/* ═══════════════════════════════════════════════════════════════
   FARMING HUB — INNER PAGES
   Shares the same design system as style.css. Self-sufficient:
   most inner pages load ONLY this file. about.html loads both.
═══════════════════════════════════════════════════════════════ */

:root {
  --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;

  --ink:          #16211b;
  --body:         #44514b;
  --muted:        #6c7a72;
  --line:         #e3eae3;
  --line-strong:  #d3ddd4;
  --white:        #ffffff;
  --off-white:    #ffffff;
  /* Same colour, the other spelling. css/style.css (the home-page stylesheet)
     calls it --bg-soft, and pages that load THIS stylesheet were using that name
     too — product.html alone had four declarations silently invalid, which is why
     its hero rendered on flat white instead of the wash it was designed with.
     Both names resolve now; prefer --off-white in new rules. */
  --bg-soft:      #ffffff;
  --bg-cream:     #ffffff;

  /* legacy aliases used in inner-page markup */
  --grey-50:      #f4f6f3;
  --grey-100:     #e7ece8;
  --grey-400:     #6c7a72;
  --grey-700:     #44514b;
  --black:        #16211b;

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

  --r-xs: 8px;
  --r-sm: 12px;
  --r:    16px;
  --r-lg: 22px;
  --r-pill: 999px;
  --radius: 14px;

  --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);
  --shadow-sm: var(--sh-1);
  --shadow-md: var(--sh-2);

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

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* no `scroll-behavior: smooth` — it janks GSAP ScrollTrigger pins; smooth
   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); }
  /* products.html: the sticky filter column is capped to the viewport */
  html .cat-side { max-height: calc(100vh / .9 - 105px - 28px); }
}
/* 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; }
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); }
p { color: var(--body); }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--lime); color: var(--green-deep); }

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

/* ═══════════════════════════════════════════
   HEADER (light, solid) — self-sufficient
═══════════════════════════════════════════ */
#siteHeader {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t), background var(--t);
}
#siteHeader.scrolled { box-shadow: 0 8px 30px -18px rgba(13,40,27,.5); }
.header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; height: 88px; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad); }
/* centered logo — inner pages show the full wordmark (solid header, no hero to hang a badge over) */
.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%; transform: translate(-50%, -50%); }
.logo-mark { display: none; }
.logo-full { height: 58px; width: auto; opacity: 1; }
.site-logo-img { width: clamp(150px, 15vw, 188px); height: auto; max-height: 52px; object-fit: contain; }

.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: var(--body);
  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: var(--green); background: var(--green-50); }
.nav-link.active { color: var(--green); }
.nav-link.active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--lime); }
.nav-arrow, .nav-caret { font-size: .58rem; opacity: .7; }

.nav-cta {
  margin-left: 10px;
  padding: 10px 20px;
  background: var(--green);
  color: #fff;
  border-radius: var(--r-xs);
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 700;
  transition: var(--t);
  position: relative;
  overflow: hidden;
}
.nav-cta:hover { background: var(--green-mid); transform: translateY(-2px); box-shadow: var(--sh-2); }

/* header small buttons (about.html uses .header-actions) — force light treatment */
.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
#siteHeader .btn-outline-sm { color: var(--green); background: transparent; border: 1.5px solid var(--line-strong); }
#siteHeader .btn-outline-sm:hover { background: var(--green); color: #fff; border-color: var(--green); }
#siteHeader .btn-primary-sm { color: #fff; background: var(--green); border: 1.5px solid var(--green); }
#siteHeader .btn-primary-sm:hover { background: var(--green-mid); border-color: var(--green-mid); }
#siteHeader .site-logo-img { filter: none; }
#siteHeader .nav-list .nav-link { color: var(--body); }
#siteHeader .hamburger span { background: var(--green); }

/* Desktop dropdown (inner markup) */
.nav-item-dropdown { position: relative; }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 232px;
  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: 1200;
}
.nav-item-dropdown::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.nav-item-dropdown:hover .nav-dropdown, .nav-item-dropdown:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a { display: block; padding: 10px 14px; border-radius: var(--r-xs); font-size: .86rem; font-weight: 500; color: var(--body); transition: var(--t); }
.nav-dropdown a:hover { background: var(--green-50); color: var(--green); }

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--green); border-radius: 2px; transition: var(--t); }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav */
#mobileNav, .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);
  z-index: 1100;
  padding: 96px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: translateX(100%);
  transition: transform .45s var(--ease);
  overflow-y: auto;
}
#mobileNav.open, .mobile-nav.open { transform: translateX(0); }
.mobile-nav-link, .mobile-nav ul li a {
  display: block;
  padding: 13px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  color: var(--body);
  border-radius: var(--r-xs);
  transition: var(--t);
}
.mobile-nav-link:hover, .mobile-nav-link.active { color: var(--green); background: var(--green-50); }
.mobile-sub-link { display: block; padding: 10px 16px 10px 32px; font-size: .86rem; font-weight: 500; color: var(--muted); border-radius: var(--r-xs); transition: var(--t); }
.mobile-sub-link:hover { color: var(--green); background: var(--green-50); }
.mobile-nav-cta { margin-top: 14px; display: block; padding: 13px 20px; background: var(--green); color: #fff; border-radius: var(--r-xs); font-family: var(--font-display); font-weight: 700; text-align: center; }
.mobile-cta { color: var(--green) !important; }

@media (min-width: 1280px) { .hamburger { display: none !important; } }
/* nav has 9 items now (Home 3 added) — collapse to hamburger below 1280 so it never crowds/overflows */
@media (max-width: 1279px) {
  .main-nav, .nav-cta, .header-actions { display: none; }
  .hamburger { display: flex; position: fixed; top: 22px; right: 22px; width: 44px; height: 44px; align-items: center; justify-content: center; background: var(--green-50); border: 1px solid var(--line-strong); border-radius: var(--r-xs); z-index: 1300; }
}

/* ═══════════════════════════════════════════
   PAGE HERO
═══════════════════════════════════════════ */
.page-hero { position: relative; padding-top: 78px; overflow: hidden; background: var(--green-night); }
.page-hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(6,20,12,.94) 0%, rgba(10,39,25,.78) 52%, rgba(10,39,25,.42) 100%),
    url('../assets/images/brand-promise-hero-web.jpg') center 38%/cover;
}
@media (max-width: 760px) {
  /* phones get the 900px cut of the default hero. Safe here because this is a
     stylesheet rule: the browser only fetches the URL that actually applies.
     Never do this against a background url() in an inline style attribute - the
     preload scanner reads that one too and you end up downloading both. */
  .page-hero-bg {
    background:
      linear-gradient(180deg, rgba(6,20,12,.86) 0%, rgba(7,24,17,.62) 55%, rgba(7,24,17,.5) 100%),
      url('../assets/images/brand-promise-hero-mobile.jpg') center 38%/cover;
  }
}
.page-hero-overlay { position: absolute; inset: auto 0 0; height: 44%; background: linear-gradient(180deg, transparent, rgba(6,20,12,.7)); z-index: 1; pointer-events: none; }
.page-hero-inner, .page-hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: clamp(56px, 8vw, 96px) var(--pad) clamp(60px, 8vw, 100px);
}
.breadcrumb { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: .82rem; color: rgba(255,255,255,.72); margin-bottom: 20px; }
.breadcrumb a { color: rgba(255,255,255,.72); transition: var(--t); }
.breadcrumb a:hover { color: var(--lime); }
.breadcrumb .sep, .breadcrumb .bc-sep { color: rgba(255,255,255,.4); }
.breadcrumb .current, .breadcrumb .bc-current { color: var(--lime); }
.page-hero-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(--lime-soft);
  padding: 8px 14px;
  border: 1px solid rgba(198,220,60,.4);
  border-radius: var(--r-pill);
  background: rgba(7,24,15,.4);
  margin-bottom: 20px;
}
.page-hero-title { font-family: var(--font-display); font-size: clamp(2.1rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -.025em; color: #fff; line-height: 1.08; margin-bottom: 20px; }
.page-hero-title span { color: var(--lime); }
.page-hero-desc, .page-hero-sub { font-size: clamp(1rem, 1.4vw, 1.14rem); color: rgba(255,255,255,.8); max-width: 640px; line-height: 1.75; }
.page-hero-scroll { position: absolute; z-index: 2; right: var(--pad); bottom: 28px; display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.6); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.scroll-line { width: 42px; height: 1px; background: var(--lime); }

/* ═══════════════════════════════════════════
   SECTION UTILITIES
═══════════════════════════════════════════ */
.section { padding: var(--section-y) 0; }
.section--alt { background: var(--off-white); }
.section--dark { background: var(--green-night); }
.section--lime { background: var(--lime); }

.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: 16px;
}
.section-tag::before { content: ''; width: 26px; height: 2px; border-radius: 2px; background: var(--lime); }
.section-tag--lime { color: var(--lime-dark); }
.section-tag--white { color: var(--lime-soft); }
.section-title { font-family: var(--font-display); font-size: clamp(1.8rem, 3.3vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1.14; margin-bottom: 16px; }
.section-title--white { color: #fff; }
.section-title span { color: var(--green); }
.section-title span.lime { color: var(--lime-dark); }
.section-desc { font-size: 1.02rem; color: var(--muted); max-width: 620px; line-height: 1.75; }
.section-desc--white { color: rgba(255,255,255,.76); }
.section-header { margin-bottom: clamp(40px, 5vw, 56px); }
.section-header.center { text-align: center; }
.section-header.center .section-tag { margin-inline: auto; }
.section-header.center .section-desc { margin-inline: auto; }

/* ═══════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 700;
  padding: 14px 26px;
  border-radius: var(--r-xs);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: var(--t);
  position: relative;
  overflow: hidden;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--green); color: #fff; 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); }
.btn-outline { background: transparent; color: var(--green); border-color: var(--line-strong); }
.btn-outline:hover { background: var(--green); color: #fff; border-color: var(--green); transform: translateY(-3px); }
.btn-outline-white { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.5); }
.btn-outline-white:hover { background: #fff; color: var(--green); border-color: #fff; transform: translateY(-3px); }
.btn-white { background: #fff; color: var(--green); border-color: #fff; }
.btn-white:hover { background: var(--lime); color: var(--green-deep); border-color: var(--lime); transform: translateY(-3px); }
.btn-primary::after, .btn-lime::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 { left: 130%; }
.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);
}

/* ═══════════════════════════════════════════
   IMAGE PLACEHOLDERS
═══════════════════════════════════════════ */
.img-placeholder { position: relative; background: linear-gradient(150deg, var(--green-50), var(--green-100)); border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.img-placeholder--lime { background: linear-gradient(150deg, var(--lime-soft), var(--lime)); }
.img-placeholder--dark { background: linear-gradient(150deg, var(--green), var(--green-night)); }
.img-placeholder-label { position: absolute; bottom: 12px; left: 12px; background: rgba(7,18,11,.55); color: rgba(255,255,255,.86); font-size: .7rem; font-weight: 500; padding: 4px 10px; border-radius: 6px; backdrop-filter: blur(4px); }

/* ═══════════════════════════════════════════
   2-COLUMN INTRO
═══════════════════════════════════════════ */
.intro-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(44px, 6vw, 80px); align-items: center; }
.intro-inner.reverse { direction: rtl; }
.intro-inner.reverse > * { direction: ltr; }
.intro-media { position: relative; height: 460px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-3); }
.intro-media .img-placeholder { height: 100%; border-radius: var(--r-lg); }
.intro-badge { position: absolute; bottom: -22px; right: -22px; width: 124px; height: 124px; background: var(--lime); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: var(--sh-3); text-align: center; }
.intro-badge-num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: var(--green-deep); line-height: 1; }
.intro-badge-label { font-size: .6rem; font-weight: 700; color: var(--green-deep); text-transform: uppercase; letter-spacing: .06em; }
.intro-copy .label { 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(--green); margin-bottom: 16px; }
.intro-copy .label::before { content: ''; width: 24px; height: 2px; background: var(--lime); }
.intro-copy h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: var(--ink); margin-bottom: 20px; line-height: 1.16; }
.intro-copy h2 span { color: var(--green); }
.intro-copy p { color: var(--body); line-height: 1.8; margin-bottom: 16px; }
.intro-copy p:last-of-type { margin-bottom: 28px; }
.intro-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════
   STATS STRIP
═══════════════════════════════════════════ */
.stats-strip { background: var(--green-night); padding: clamp(56px, 7vw, 76px) 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; }
.stat-num { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.02em; color: var(--lime); line-height: 1; margin-bottom: 8px; }
.stat-label { font-size: .86rem; color: rgba(255,255,255,.7); font-weight: 500; }
.stat-divider { width: 1px; background: rgba(255,255,255,.14); margin: 0 auto; }

/* ═══════════════════════════════════════════
   CARD GRID
═══════════════════════════════════════════ */
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cards-grid--4 { grid-template-columns: repeat(4, 1fr); }
.cards-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 32px; box-shadow: var(--sh-1); transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: var(--green-100); }
.card-icon { width: 54px; height: 54px; background: var(--green-50); border-radius: var(--r-xs); display: grid; place-items: center; margin-bottom: 20px; }
.card-icon svg { width: 26px; height: 26px; fill: var(--green); }
.card h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; color: var(--ink); }
.card p { font-size: .9rem; color: var(--muted); line-height: 1.65; }
.card-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(--green); transition: var(--t); }
.card-link:hover { gap: 11px; }
.card-link svg { width: 16px; height: 16px; fill: var(--green); }

/* ═══════════════════════════════════════════
   FEATURE LIST
═══════════════════════════════════════════ */
.feature-list { display: flex; flex-direction: column; gap: 14px; margin: 24px 0; }
.feature-item { display: flex; align-items: flex-start; gap: 12px; }
.feature-check { flex-shrink: 0; width: 24px; height: 24px; background: var(--lime); border-radius: 50%; display: grid; place-items: center; margin-top: 2px; }
.feature-check svg { width: 12px; height: 12px; fill: var(--green-deep); }
.feature-text { font-size: .92rem; color: var(--body); line-height: 1.55; }
.feature-text strong { color: var(--ink); font-weight: 700; }

/* ═══════════════════════════════════════════
   DIVISION BANNER (dark)
═══════════════════════════════════════════ */
.division-banner { position: relative; overflow: hidden; padding: var(--section-y) 0; background: linear-gradient(120deg, var(--green-night) 26%, var(--green-deep) 72%, var(--green) 100%); }
.division-banner-inner { position: relative; z-index: 1; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 64px); align-items: center; }
.division-banner-copy .section-tag { color: var(--lime-soft); }
.division-banner-copy h2 { font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 800; color: #fff; margin-bottom: 16px; line-height: 1.14; }
.division-banner-copy h2 span { color: var(--lime); }
.division-banner-copy p { color: rgba(255,255,255,.76); line-height: 1.75; margin-bottom: 28px; }
.division-banner-media { height: 360px; border-radius: var(--r-lg); overflow: hidden; background: linear-gradient(150deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--sh-3); }

/* ═══════════════════════════════════════════
   PRODUCT LISTING
═══════════════════════════════════════════ */
.products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.product-list-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); }
.product-list-card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: var(--green-100); }
.product-list-img { height: 220px; position: relative; background: linear-gradient(150deg, var(--green-50), var(--green-100)); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; }
.product-list-body { padding: 26px; }
.product-list-body h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.product-list-body p { font-size: .88rem; color: var(--muted); line-height: 1.65; margin-bottom: 16px; }
.product-list-tag { display: inline-block; font-family: var(--font-display); font-size: .7rem; font-weight: 600; padding: 4px 11px; border-radius: var(--r-pill); background: var(--green-50); color: var(--green); margin-right: 6px; margin-bottom: 6px; }

/* ═══════════════════════════════════════════
   ACCORDION
═══════════════════════════════════════════ */
.accordion { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-1); background: var(--white); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-item:last-child { border-bottom: none; }
.accordion-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; cursor: pointer; transition: background var(--t); user-select: none; }
.accordion-header:hover { background: var(--green-50); }
.accordion-header h4 { font-family: var(--font-display); font-size: .98rem; font-weight: 700; color: var(--ink); }
.accordion-icon { width: 26px; height: 26px; background: var(--green-50); border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; transition: var(--t); }
.accordion-icon svg { width: 14px; height: 14px; fill: var(--green); transition: transform var(--t); }
.accordion-item.open .accordion-icon { background: var(--green); }
.accordion-item.open .accordion-icon svg { fill: #fff; transform: rotate(180deg); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.accordion-item.open .accordion-body { max-height: 420px; }
.accordion-body-inner { padding: 0 26px 22px; font-size: .92rem; color: var(--body); line-height: 1.75; }

/* ═══════════════════════════════════════════
   FORM
═══════════════════════════════════════════ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid.full { grid-template-columns: 1fr; }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group.span-2 { grid-column: 1 / -1; }
.form-group label { font-family: var(--font-display); font-size: .85rem; font-weight: 600; color: var(--ink); }
.form-group input, .form-group select, .form-group textarea {
  padding: 13px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  font-size: .92rem;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  transition: border-color var(--t), box-shadow var(--t);
  outline: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(15,59,37,.1); }
.form-group textarea { resize: vertical; min-height: 130px; }
.form-group select { appearance: none; cursor: pointer; }

/* ═══════════════════════════════════════════
   INNER CTA
═══════════════════════════════════════════ */
.inner-cta { position: relative; overflow: hidden; padding: var(--section-y) 0; text-align: center; background: linear-gradient(135deg, var(--green-deep), var(--green) 70%, var(--green-mid)); }
/* (corner glow removed) */
.inner-cta-inner { position: relative; z-index: 1; }
.inner-cta h2 { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; color: #fff; margin-bottom: 16px; }
.inner-cta h2 span { color: var(--lime); }
.inner-cta p { color: rgba(255,255,255,.78); max-width: 540px; margin: 0 auto 32px; line-height: 1.75; }
.inner-cta-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* CTA strip (about.html) */
.cta-strip { padding: clamp(60px, 7vw, 84px) 0; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--green-deep), var(--green) 70%, var(--green-mid)); }
.cta-strip-inner { 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: #fff; margin-bottom: 12px; }
.cta-strip-copy p { color: rgba(255,255,255,.78); line-height: 1.7; }
.cta-strip-actions { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }

/* ═══════════════════════════════════════════
   FOOTER (inner markup)
═══════════════════════════════════════════ */
/* curved forest-green footer — matches the homepage footer */
.site-footer { background: var(--green); color: #eef2e6; padding: clamp(70px, 7.5vw, 96px) 0 0;
  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 { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--pad); display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 44px; }
/* three-column footers (the "Divisions" column went with the division pages); legal, blog and
   media pages still have four children and keep the rule above */
@media (min-width: 1101px) {
  .footer-inner:not(:has(> :nth-child(4))) { grid-template-columns: 2fr 1fr 1.4fr; }
}
.footer-brand .footer-logo, .footer-col--brand .footer-logo { display: inline-flex; align-items: center; margin-bottom: 20px; line-height: 0; }
.footer-logo-img { width: 180px; height: auto; object-fit: contain; }
.footer-tagline, .footer-about { font-size: .86rem; color: rgba(238,242,230,.66); line-height: 1.75; max-width: 34ch; margin-bottom: 24px; }
.footer-social { display: flex; gap: 10px; }
.footer-social-link, .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); transition: var(--t); color: rgba(238,242,230,.75); }
.footer-social-link svg { width: 16px; height: 16px; fill: rgba(238,242,230,.75); transition: var(--t); }
.footer-social-link:hover, .social-link:hover { background: var(--lime); border-color: var(--lime); transform: translateY(-3px); }
.footer-social-link:hover svg { fill: var(--green-deep); }
.footer-col h4, .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 { display: flex; flex-direction: column; gap: 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-links li { margin-bottom: 0; }
.footer-contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: .88rem; }
.footer-contact-item svg { width: 16px; height: 16px; fill: var(--lime); flex-shrink: 0; margin-top: 3px; }
.footer-contact-item span { font-size: .88rem; color: rgba(238,242,230,.72); line-height: 1.55; }
.footer-contact-item a { color: rgba(238,242,230,.78); transition: var(--t); }
.footer-contact-item a:hover { color: var(--lime); }
.footer-address { font-size: .86rem; color: rgba(238,242,230,.66); line-height: 1.75; margin-bottom: 14px; }
.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-bottom { margin-top: 56px; border-top: 1px solid rgba(238,242,230,.12); padding: 22px var(--pad); max-width: var(--max-w); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.footer-copy { font-size: .8rem; color: rgba(238,242,230,.5); }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-legal a { font-size: .78rem; color: rgba(238,242,230,.5); transition: var(--t); }
.footer-legal a:hover { color: var(--lime); }
/* homepage-markup footer legal wrapper (about.html) */
.footer-legal-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; max-width: var(--max-w); margin-inline: auto; padding: 22px var(--pad); }
.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
═══════════════════════════════════════════ */
#scrollTop { position: fixed; bottom: 28px; right: 28px; width: 48px; height: 48px; background: var(--green); border: none; border-radius: var(--r-xs); display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(16px); transition: var(--t); z-index: 900; box-shadow: var(--sh-2); }
#scrollTop.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
#scrollTop:hover { background: var(--lime); transform: translateY(-4px); }
#scrollTop svg { width: 20px; height: 20px; fill: #fff; }
#scrollTop:hover svg { fill: var(--green-deep); }
#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; }

/* ═══════════════════════════════════════════
   ABOUT PAGE
═══════════════════════════════════════════ */
.story-section, .values-section, .certs-section, .leadership-teaser { background: var(--white); padding: var(--section-y) 0; }
.whatwedo-section { position: relative; overflow: hidden; background: var(--off-white); padding: var(--section-y) 0; }
.whatwedo-section .section-header { margin-bottom: clamp(32px, 5vw, 48px); }
.numbers-section { position: relative; overflow: hidden; background: var(--off-white); padding: var(--section-y) 0; }
.vm-section { position: relative; overflow: hidden; background: var(--green-night); padding: clamp(72px, 8vw, 100px) 0; }
.vm-section::before { content: ''; position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 760px; height: 760px; border-radius: 50%; background: radial-gradient(circle, rgba(198,220,60,.10), transparent 62%); pointer-events: none; }
.vm-section .container { position: relative; z-index: 1; }
.vm-section .section-header { margin-bottom: clamp(34px, 5vw, 54px); }
.vm-section .section-tag { color: var(--lime); }
.vm-section .section-title { color: #fff; }

/* Leadership teaser media (kept) */
.leadership-inner { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 76px); align-items: center; }
.leadership-avatars { position: relative; }
.avatar-card { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-3); }
.leadership-avatars .img-placeholder-label, .whatwedo-icon .img-placeholder-label, .avatar-card .img-placeholder-label { display: none; }
.leadership-copy p { color: var(--body); line-height: 1.8; margin-bottom: 16px; }

/* ───── Our People — dark immersive band + dual scrolling role marquee (no cards) ───── */
.people-feature { position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(900px 560px at 84% -14%, rgba(198,220,60,.13), transparent 58%),
    radial-gradient(680px 460px at -6% 116%, rgba(28,90,57,.4), transparent 62%),
    linear-gradient(165deg, #07241a 6%, #0c3322 70%, #07241a 100%); }
.people-feature::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='pn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23pn)'/%3E%3C/svg%3E"); }
.people-head { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; text-align: center; }
.people-feature .section-tag { color: var(--lime); }
.people-feature .section-title { color: #fff; text-align: center; }
.people-lead { color: rgba(255,255,255,.74); line-height: 1.8; font-size: 1.02rem; margin: 18px auto 30px; max-width: 620px; }

/* marquee rows */
.people-marquee { position: relative; z-index: 1; display: flex; overflow: hidden; margin-top: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.people-marquee + .people-marquee { margin-top: 14px; }
.people-track { display: flex; flex: none; gap: 14px; padding-right: 14px; white-space: nowrap;
  animation: peopleScroll 42s linear infinite; }
.people-marquee--rev .people-track { animation-direction: reverse; }
.people-marquee:hover .people-track { animation-play-state: paused; }
.people-pill { flex: none; display: inline-flex; align-items: center; gap: 11px;
  padding: 13px 24px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.05); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(.92rem, 1.5vw, 1.2rem); color: rgba(255,255,255,.92); }
.people-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); flex: none; }
.people-pill--solid { background: var(--lime); border-color: var(--lime); color: #07241a; }
.people-pill--solid::before { background: #07241a; }
@keyframes peopleScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .people-track { animation: none; } }
@media (max-width: 600px) { .people-pill { padding: 11px 18px; } }

/* ── OUR STORY — creative 3D parallax + scroll reveal ── */
.story-section { position: relative; overflow: hidden; }
/* watermark = the real logo wordmark, tinted green by mask (same asset the home
   Featured Range section uses). Width mirrors the old type size exactly. */
.story-bg-word { position: absolute; top: clamp(20px, 4.2vw, 52px); left: 0; right: 0; margin-inline: auto;
  width: clamp(242px, 61vw, 792px); aspect-ratio: 2200 / 410; font-size: 0;
  background-color: var(--green);
  -webkit-mask: url('../assets/images/farming-hub-wordmark.png') center/contain no-repeat;
          mask: url('../assets/images/farming-hub-wordmark.png') center/contain no-repeat;
  opacity: .045; pointer-events: none; user-select: none; z-index: 0; }
.story-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: clamp(40px, 6vw, 84px); align-items: center; }

.story-media { position: relative; min-height: 460px; perspective: 1300px; }
.story-media-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) 58px minmax(0, 1fr); align-items: stretch; transform-style: preserve-3d; transition: transform .5s var(--ease); will-change: transform; }

/* big company image (the parent) */
.story-company { position: relative; margin: 0; min-height: 460px; overflow: hidden; border-radius: var(--r-lg); border: 5px solid #fff; box-shadow: var(--sh-3); transform: translateZ(0); }
.story-company img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story-company::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,28,17,.08) 0%, rgba(8,28,17,0) 34%, rgba(8,28,17,.46)); }

.story-chip { position: absolute; top: 16px; left: 16px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--r-pill); background: var(--green); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .82rem; box-shadow: var(--sh-2); white-space: nowrap; transform: translateZ(60px); }
.story-chip .chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(198,220,60,.28); }
.story-badge { position: absolute; left: 16px; bottom: 16px; z-index: 4; min-width: 142px; padding: 15px 20px; border-radius: var(--r); background: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line); box-shadow: var(--sh-3); transform: translateZ(72px); }
.story-badge-label, .story-badge-sub { display: block; font-size: .7rem; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.story-badge-place { display: block; font-family: var(--font-display); color: var(--green); font-size: 1.4rem; font-weight: 800; line-height: 1.15; margin: 3px 0; }

/* connector fork: company → 3 divisions */
.story-fork { position: relative; }
.story-fork span { position: absolute; background: var(--line-strong); }
.fork-trunk { left: 0; top: 50%; width: 50%; height: 2px; transform-origin: left center; }
.fork-spine { left: 50%; top: 15%; width: 2px; height: 70%; transform-origin: center top; }
.fork-branch { left: 50%; width: 50%; height: 2px; transform-origin: left center; }
.fork-b1 { top: 15%; }
.fork-b2 { top: 50%; }
.fork-b3 { top: 85%; }
.fork-branch::after { content: ''; position: absolute; right: -3px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.fork-node { left: 50%; top: 50%; width: 13px; height: 13px; border-radius: 50%; background: var(--green); border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(15,59,37,.10); transform: translate(-50%, -50%); }

/* small division cards (the children) */
.story-divs { display: flex; flex-direction: column; gap: 20px; min-height: 460px; }
.story-div { position: relative; flex: 1; margin: 0; overflow: hidden; border-radius: var(--r); border: 4px solid #fff; box-shadow: var(--sh-2); transform: translateZ(26px); }
.story-div img { display: block; width: 100%; height: 100%; object-fit: cover; }
.story-div::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,28,17,0) 38%, rgba(8,28,17,.74)); }
.div-cap { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; display: flex; flex-direction: column; }
.div-tag { align-self: flex-start; margin-bottom: 5px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--lime); color: var(--green-deep); font-family: var(--font-display); font-size: .54rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.div-name { font-family: var(--font-display); color: #fff; font-weight: 700; font-size: .85rem; line-height: 1.15; }

.story-copy { position: relative; }
.story-copy .section-tag { margin-bottom: 16px; }
.story-copy .section-title { text-align: left; }
.story-copy .section-title::after { content: ''; display: block; width: 64px; height: 3px; margin-top: 18px; border-radius: 3px; background: linear-gradient(90deg, var(--lime), transparent); }
.story-copy p { color: var(--body); line-height: 1.85; margin-bottom: 16px; }
.story-lead { font-size: 1.14rem; font-weight: 500; color: var(--ink); }
.story-lead em { font-style: normal; font-weight: 700; color: var(--green); }

.value-card, .cert-badge { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); }

/* ── By the numbers — creative bento ── */
.numbers-section::before { content: ''; position: absolute; top: -12%; right: -6%; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(198,220,60,.16), transparent 65%); pointer-events: none; }
.numbers-section .container { position: relative; z-index: 1; }
.numbers-section .section-header { margin-bottom: clamp(32px, 5vw, 52px); }

.stats-bento { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: auto auto; gap: 18px; }
.stat { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 30px 28px; border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-1); transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.stat:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: var(--green-100); }
.stat--feature { grid-column: 1; grid-row: 1 / span 2; justify-content: space-between; color: #fff; border: none; background: radial-gradient(135% 130% at 0% 0%, var(--green-mid), var(--green) 52%, var(--green-deep)); box-shadow: var(--sh-3); }
.stat--feature::after { content: ''; position: absolute; right: -46px; bottom: -56px; width: 220px; height: 220px; border-radius: 50%; border: 2px solid rgba(255,255,255,.10); }
.stat--wide { grid-column: 2 / span 2; grid-row: 1; flex-direction: row; align-items: center; gap: 30px; }
.stat--wide .stat-ico { margin-bottom: 0; flex-shrink: 0; }

.stat-ico { width: 52px; height: 52px; border-radius: var(--r); display: grid; place-items: center; background: var(--green-50); color: var(--green); margin-bottom: 24px; transition: background var(--t), color var(--t); }
.stat-ico svg { width: 26px; height: 26px; }
.stat--feature .stat-ico { background: rgba(198,220,60,.16); color: var(--lime); position: relative; z-index: 1; }
.stat:hover .stat-ico { background: var(--green); color: #fff; }
.stat--feature:hover .stat-ico { background: var(--lime); color: var(--green-deep); }

.stat-main { position: relative; z-index: 1; }
.stat-num { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--green); font-size: clamp(2.4rem, 4vw, 3.5rem); margin-bottom: 10px; }
.stat-num--text { font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.stat--feature .stat-num { color: #fff; font-size: clamp(3rem, 5vw, 4.6rem); }
.stat-label { font-family: var(--font-display); color: var(--ink); font-weight: 700; font-size: 1rem; margin-bottom: 8px; }
.stat--feature .stat-label { color: #fff; font-size: 1.18rem; }
.stat-desc { color: var(--muted); font-size: .86rem; line-height: 1.6; }
.stat--feature .stat-desc { color: rgba(255,255,255,.82); }
@media (max-width: 880px) {
  .stats-bento { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .stat--feature { grid-column: 1 / span 2; grid-row: auto; flex-direction: row; align-items: center; gap: 26px; }
  .stat--feature .stat-ico { margin-bottom: 0; flex-shrink: 0; }
  .stat--wide { grid-column: 1 / span 2; grid-row: auto; }
}
@media (max-width: 520px) {
  .stats-bento { grid-template-columns: 1fr; }
  .stat--feature, .stat--wide { grid-column: 1; }
  .stat--feature { flex-direction: column; align-items: flex-start; }
  .stat--feature .stat-ico { margin-bottom: 18px; }
}

.vm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.vm-card { position: relative; overflow: hidden; padding: clamp(32px, 4vw, 48px); border-radius: var(--r-lg); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); color: #fff; transition: transform var(--t), border-color var(--t), background var(--t), box-shadow var(--t); }
.vm-card:hover { transform: translateY(-6px); border-color: rgba(198,220,60,.45); background: rgba(255,255,255,.07); box-shadow: 0 32px 60px -30px rgba(0,0,0,.6); }
.vm-card::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--lime), transparent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.vm-card:hover::after { transform: scaleX(1); }
.vm-corner { position: absolute; top: 22px; right: 28px; font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: rgba(255,255,255,.06); }
.vm-icon { position: relative; width: 74px; height: 74px; border-radius: var(--r); display: grid; place-items: center; color: var(--lime); background: rgba(198,220,60,.12); margin-bottom: 26px; }
.vm-icon svg { width: 42px; height: 42px; overflow: visible; }
.vm-card h3 { color: #fff; font-size: 1.5rem; margin-bottom: 14px; }
.vm-card p { color: rgba(255,255,255,.76); line-height: 1.8; }

/* animated icon strokes + loops */
.vm-stroke { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 360; stroke-dashoffset: 0; }
.vm-dot-pulse { transform-box: fill-box; transform-origin: center; animation: vmPulse 2.4s ease-in-out infinite; }
@keyframes vmPulse { 0%, 100% { transform: scale(.65); opacity: .55; } 50% { transform: scale(1); opacity: 1; } }
.vm-ripple { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; border: 2px solid var(--lime); opacity: 0; animation: vmRipple 2.8s ease-out infinite; pointer-events: none; }
@keyframes vmRipple { 0% { transform: scale(.5); opacity: .5; } 80%, 100% { transform: scale(1.8); opacity: 0; } }
.vm-sway { transform-box: fill-box; transform-origin: bottom center; animation: vmSway 3.6s ease-in-out infinite; }
@keyframes vmSway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* ═══════════════════════════════════════════
   OUR JOURNEY — timeline / milestones
═══════════════════════════════════════════ */
.timeline-section { position: relative; overflow: hidden; padding: var(--section-y) 0;
  background-color: #ffffff;
  /* the two radial washes are gone — they moved the beige by 12 levels and broke the one-colour
     field the owner asked for. The hairline grid stays. */
  background-image:
    repeating-linear-gradient(0deg, rgba(15,59,37,.022) 0 1px, transparent 1px 46px); }
.timeline-section .container { position: relative; z-index: 1; }
.timeline-section .section-header { margin-bottom: clamp(40px, 6vw, 70px); }
.timeline-section .section-desc em { color: var(--muted); font-style: italic; font-size: .92em; }

/* ── growth-path timeline ── */
.path-timeline { position: relative; max-width: 1040px; margin: 0 auto; }
.path-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.path-base { stroke: #cdd6bb; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 12; }
.path-progress { stroke-width: 5; stroke-linecap: round; }

.ms-list { list-style: none; position: relative; z-index: 1; margin: 0; padding: 0; }
.milestone { position: relative; display: flex; align-items: center; min-height: 232px; }
.milestone.ms-major { min-height: 296px; }
.ms-left { justify-content: flex-end; padding-right: 61%; }
.ms-right { justify-content: flex-start; padding-left: 61%; }

/* illustrated markers on the winding path */
.ms-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--white); border: 2px solid var(--green-100); color: var(--green);
  box-shadow: 0 10px 22px -10px rgba(16,46,30,.4); cursor: pointer; opacity: 1;
  transition: opacity .6s var(--ease), background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.js .ms-marker { opacity: 0; }
.milestone.in-view .ms-marker { opacity: 1; }
.ms-major .ms-marker { width: 66px; height: 66px; border-color: rgba(147,168,42,.5); }
.ms-marker svg { width: 25px; height: 25px; }
.ms-major .ms-marker svg { width: 30px; height: 30px; }
.ms-left .ms-marker { left: 46%; }
.ms-right .ms-marker { left: 54%; }
.ms-marker:hover, .ms-marker:focus-visible,
.milestone.is-active .ms-marker { background: var(--green); color: #fff; border-color: var(--green);
  box-shadow: 0 0 0 7px rgba(198,220,60,.22), 0 16px 30px -12px rgba(16,46,30,.5); }
.ms-marker:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }

/* editorial cards */
.ms-card { position: relative; z-index: 2; width: clamp(258px, 100%, 400px); padding: 24px 30px;
  background: #ffffff; border: 1px solid #ececec; border-radius: var(--r-lg); cursor: pointer; overflow: hidden;
  box-shadow: 0 18px 42px -26px rgba(16,46,30,.28);
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow var(--t), border-color var(--t); }
/* bold accent bar on the timeline-facing edge */
.ms-card::before { content: ''; position: absolute; top: 0; bottom: 0; width: 4px; background: linear-gradient(var(--green), var(--lime)); transition: width var(--t); }
.ms-left .ms-card::before { right: 0; }
.ms-right .ms-card::before { left: 0; }
.js .ms-card { opacity: 0; transform: translateY(28px); }
.milestone.in-view .ms-card { opacity: 1; transform: none; }
.ms-major .ms-card { width: clamp(280px, 100%, 460px); padding: 28px 30px; }
.ms-card:hover, .milestone.in-view .ms-card:hover { transform: translateY(-5px); box-shadow: 0 30px 56px -26px rgba(16,46,30,.4); border-color: var(--green-100); }
.ms-card:hover::before { width: 7px; }
.ms-card::after { content: ''; position: absolute; top: 50%; width: 26px; height: 2px; background: #d7dec8; transform: translateY(-50%); }
.ms-left .ms-card::after { right: -26px; }
.ms-right .ms-card::after { left: -26px; }

.ms-cat { display: inline-block; font-family: var(--font-display); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--lime-dark); }
.ms-year { display: block; font-family: var(--font-display); font-weight: 800; line-height: 1; color: var(--green); letter-spacing: -.02em; font-size: clamp(2.1rem, 3vw, 2.9rem); margin: 5px 0 8px; }
.ms-major .ms-year { font-size: clamp(2.6rem, 4vw, 3.7rem); }
.ms-title { font-family: var(--font-display); color: var(--ink); font-weight: 700; font-size: 1.08rem; margin-bottom: 7px; }
.ms-desc { color: var(--body); font-size: .9rem; line-height: 1.6; margin-bottom: 14px; }
.ms-impact { display: inline-block; font-family: var(--font-display); font-size: .72rem; font-weight: 700; color: var(--green); background: rgba(198,220,60,.18); border: 1px solid rgba(198,220,60,.45); padding: 5px 12px; border-radius: var(--r-pill); }
.ms-more-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: var(--green); }
.ms-more-link svg { width: 16px; height: 16px; transition: transform var(--t); }
.ms-card:hover .ms-more-link svg { transform: translateX(4px); }

/* milestone detail modal */
.ms-modal { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 20px; }
.ms-modal[hidden] { display: none; }
.ms-modal-overlay { position: absolute; inset: 0; background: rgba(8,20,14,.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity .3s var(--ease); }
.ms-modal.open .ms-modal-overlay { opacity: 1; }
.ms-modal-panel { position: relative; z-index: 1; width: min(660px, 100%); max-height: 88vh; overflow: auto; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--sh-3); opacity: 0; transform: translateY(18px) scale(.98); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.ms-modal.open .ms-modal-panel { opacity: 1; transform: none; }
.ms-modal-media { height: 220px; overflow: hidden; }
.ms-modal-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: var(--ink); font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: var(--sh-2); transition: background var(--t), color var(--t); }
.ms-modal-close:hover { background: var(--green); color: #fff; }
.ms-modal-close:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.ms-modal-body { padding: 26px clamp(22px, 4vw, 34px) clamp(28px, 4vw, 34px); }
.ms-modal-body .ms-cat { color: var(--lime-dark); }
.ms-modal-body .ms-year { font-size: 2.4rem; margin: 4px 0 6px; }
.ms-modal-title { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--ink); margin-bottom: 12px; }
.ms-modal-text { color: var(--body); line-height: 1.8; margin-bottom: 18px; }
.ms-modal-stat span { display: inline-block; font-family: var(--font-display); font-weight: 700; color: var(--green); background: var(--green-50); border: 1px solid var(--green-100); border-radius: var(--r-pill); padding: 8px 16px; }

/* mobile: clean vertical timeline, route line on the left */
@media (max-width: 860px) {
  .path-svg { display: none; }
  .path-timeline { max-width: 560px; }
  .path-timeline::before { content: ''; position: absolute; left: 26px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: linear-gradient(var(--green), var(--lime)); }
  .milestone, .milestone.ms-major { display: block; min-height: 0; padding: 0 0 26px 64px; }
  .milestone:last-child { padding-bottom: 0; }
  .ms-marker, .ms-major .ms-marker { position: absolute; left: 26px; top: 4px; transform: translateX(-50%); width: 48px; height: 48px; }
  .ms-major .ms-marker { width: 54px; height: 54px; }
  .ms-marker svg, .ms-major .ms-marker svg { width: 24px; height: 24px; }
  .ms-card, .ms-major .ms-card,
  .ms-left .ms-card, .ms-right .ms-card { grid-column: auto; width: auto; margin: 0; justify-self: stretch; }
  .ms-card::after { display: none; }
  /* timeline runs down the left on mobile — keep the accent bar on the left for every card */
  .ms-left .ms-card::before, .ms-right .ms-card::before { left: 0; right: auto; }
}
@media (max-width: 480px) { .ms-modal-media { height: 170px; } }

/* ───── What We Stand For — dark editorial values band (creative redesign) ───── */
.values-section { position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(960px 620px at 88% -12%, rgba(198,220,60,.12), transparent 60%),
    radial-gradient(700px 520px at -6% 112%, rgba(28,90,57,.45), transparent 62%),
    linear-gradient(160deg, #0a2718 8%, #0e3422 72%, #0a2718 100%); }
.values-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='vn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23vn)'/%3E%3C/svg%3E"); }
.values-section .container { position: relative; z-index: 1; }
.values-section .section-tag { color: var(--lime); }
.values-section .section-title { color: #fff; }

.values-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.value-card { position: relative; overflow: hidden; padding: 32px 26px 28px; border-radius: var(--r-lg);
  background: linear-gradient(165deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1); box-shadow: none;
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  transition: transform .55s var(--ease), border-color .4s var(--ease), background .4s var(--ease); }
.value-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 .55s var(--ease); }
.value-card:hover { transform: translateY(-8px); border-color: rgba(198,220,60,.5);
  background: linear-gradient(165deg, rgba(198,220,60,.15), rgba(255,255,255,.02)); }
.value-card:hover::after { transform: scaleX(1); }
/* big ghost number, top-right */
.value-num { position: absolute; top: 10px; right: 20px; margin: 0; font-family: var(--font-display);
  font-size: 3.6rem; font-weight: 800; line-height: 1; letter-spacing: -.02em;
  color: rgba(255,255,255,.06); transition: color .45s var(--ease); pointer-events: none; }
.value-card:hover .value-num { color: rgba(198,220,60,.24); }
.value-icon { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center;
  background: rgba(198,220,60,.12); border: 1px solid rgba(198,220,60,.42); color: var(--lime); margin-bottom: 22px;
  transition: background .4s var(--ease), color .4s var(--ease), transform .5s var(--ease); }
.value-card:hover .value-icon { background: var(--lime); color: #0a2718; transform: scale(1.08) rotate(-5deg); }
.value-card h4 { position: relative; z-index: 1; font-family: var(--font-display); color: #fff; font-weight: 700; font-size: 1.2rem; margin-bottom: 10px; }
.value-card p { position: relative; z-index: 1; color: rgba(255,255,255,.66); line-height: 1.66; font-size: .9rem; }
/* cert badges keep their light-card hover */
.cert-badge:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: var(--green-100); }
.whatwedo-copy h4 { font-family: var(--font-display); color: var(--ink); font-weight: 700; margin-bottom: 10px; }
.whatwedo-copy p { color: var(--muted); line-height: 1.65; font-size: .9rem; }

/* ── Divisions — expanding image panels ── */
.div-panels { display: flex; gap: 14px; height: 480px; }
.div-panel { position: relative; flex: 1 1 0; min-width: 0; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; box-shadow: var(--sh-2); transition: flex-grow .6s var(--ease); }
.div-panel:hover { flex-grow: 2.6; }
.div-panel-bg { position: absolute; inset: 0; background: var(--panel-img) center/cover no-repeat; transition: transform 1s var(--ease); }
.div-panel:hover .div-panel-bg { transform: scale(1.06); }
.div-panel::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(8,28,17,.18) 0%, rgba(8,28,17,0) 28%, rgba(8,28,17,.4) 52%, rgba(8,28,17,.9) 100%); }
.div-panel-inner { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 26px; }
.div-panel-num { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--lime); letter-spacing: .12em; }
.div-panel-name { font-family: var(--font-display); color: #fff; font-weight: 800; font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.18; }
.div-panel-reveal { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s var(--ease), opacity .5s var(--ease), margin-top .5s var(--ease); }
.div-panel:hover .div-panel-reveal { max-height: 220px; opacity: 1; margin-top: 12px; }
.div-panel-reveal p { color: rgba(255,255,255,.86); font-size: .9rem; line-height: 1.6; margin-bottom: 14px; max-width: 430px; }
.div-panel-link { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); color: var(--lime); font-weight: 700; font-size: .9rem; transition: gap var(--t); }
.div-panel-link:hover { gap: 12px; }
@media (max-width: 760px) {
  .div-panels { flex-direction: column; height: auto; gap: 12px; }
  .div-panel { flex: none; height: 300px; }
  .div-panel:hover { flex-grow: 0; }
  .div-panel-name { white-space: normal; }
  .div-panel-reveal { max-height: 260px; opacity: 1; margin-top: 12px; }
}
.inner-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-family: var(--font-display); color: var(--green); font-weight: 700; font-size: .88rem; transition: var(--t); }
.inner-link:hover { gap: 11px; }

.certs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cert-badge { padding: 26px; text-align: center; transition: transform var(--t), box-shadow var(--t), border-color var(--t); }
.cert-logo { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; background: var(--green-50); color: var(--green); font-family: var(--font-display); font-weight: 800; border: 1px solid var(--green-100); }
.cert-badge span { font-family: var(--font-display); color: var(--ink); font-weight: 600; }
.certs-note { margin-top: 18px; color: var(--muted); font-size: .86rem; text-align: center; }

.leadership-inner { padding: clamp(28px, 4vw, 44px); border-radius: var(--r-lg); background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.avatar-stack { position: relative; min-height: 410px; }
.avatar-card { position: absolute; background: linear-gradient(180deg, rgba(15,59,37,.04), rgba(15,59,37,.26)), url('../assets/images/lae-division-web.jpg') center/cover; }
.avatar-card--large { width: 70%; height: 300px; left: 0; top: 0; }
.avatar-card:not(.avatar-card--large) { width: 50%; height: 190px; }
.avatar-card:nth-child(2) { right: 0; top: 92px; }
.avatar-card:nth-child(3) { left: 18%; bottom: 0; }
.avatar-info { position: absolute; left: 14px; right: 14px; bottom: 14px; padding: 12px 14px; border-radius: var(--r-xs); background: rgba(255,255,255,.94); border: 1px solid var(--line); }
.avatar-name { display: block; font-family: var(--font-display); color: var(--ink); font-weight: 700; }
.avatar-role { display: block; color: var(--muted); font-size: .78rem; }

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

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1100px) {
  .cards-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid, .certs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  .leadership-inner { grid-template-columns: 1fr; }
  .story-inner { grid-template-columns: 1fr; gap: 56px; }
  .story-media { max-width: 600px; width: 100%; margin: 0 auto; }
  .story-company, .story-div, .story-chip, .story-badge { transform: none; }  /* flatten depth when 3D tilt is off */
}
@media (max-width: 980px) {
  .intro-inner { grid-template-columns: 1fr; gap: 48px; }
  .intro-inner.reverse { direction: ltr; }
  .intro-media { height: 340px; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .cards-grid--2 { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .division-banner-inner { grid-template-columns: 1fr; gap: 44px; }
  .division-banner-media { height: 280px; }
  .vm-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  :root { --section-y: 64px; }
  .header-inner { height: 70px; }
  .site-logo-img { width: 142px; max-height: 46px; }
  .hamburger { top: 19px; }
  .page-hero-scroll { display: none; }
  .cards-grid, .cards-grid--4 { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px 14px; }
  .values-grid, .certs-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-group.span-2 { grid-column: 1; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .footer-legal { justify-content: center; }
  .intro-media { height: 280px; }
  .intro-badge { width: 100px; height: 100px; bottom: -16px; right: -16px; }
  .intro-badge-num { font-size: 1.5rem; }
  .leadership-avatars, .avatar-stack { min-height: 320px; }
  .story-media, .story-media-stage { min-height: 0; }
  .story-media-stage { grid-template-columns: 1fr; }
  .story-company { min-height: 0; height: 208px; }
  .story-fork { display: none; }
  .story-divs { flex-direction: row; gap: 9px; min-height: 0; margin-top: 14px; }
  .story-div { height: 126px; border-width: 3px; }
  .div-tag { display: none; }
  .div-name { font-size: .72rem; }
  .story-chip { top: 12px; left: 12px; font-size: .72rem; padding: 8px 13px; }
  .story-badge { left: 12px; bottom: 12px; min-width: 116px; padding: 12px 15px; }
  .story-badge-place { font-size: 1.25rem; }
  .story-bg-word { width: clamp(279px, 116vw, 559px); }
  .whatwedo-item { grid-template-columns: 1fr; }
  .whatwedo-icon { width: 100%; }
  .cta-strip-actions .btn, .inner-cta-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .product-list-card:hover .product-list-img, .intro-media:hover .img-placeholder, .division-media:hover .img-placeholder { transform: none !important; }
}

/* ═══ 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; }
  /* the breadcrumb "Home" link measured 37x22 on every inner page — the pull-up
     margin keeps the hero spacing exactly where it was */
  .breadcrumb a { display: inline-block; padding: 6px 0; margin: -6px 0; }
}