:root {
  /* Earthy Agricultural Palette */
  --soil:       #2c1f0e;        /* Deep dark brown — text on light */
  --bark:       #5c3d1e;        /* Medium warm brown */
  --straw:      #c9a84c;        /* Golden straw / wheat */
  --straw2:     #a8862e;        /* Deeper straw */
  --sage:       #4a7c59;        /* Earthy sage green — primary */
  --sage2:      #365c42;        /* Deeper green */
  --sage-light: #e8f0ea;        /* Very light sage tint */
  --meadow:     #6b9c5f;        /* Mid meadow green */

  /* Backgrounds */
  --bg:         #faf7f2;        /* Warm off-white — parchment */
  --bg2:        #f3ede3;        /* Cream */
  --field:      #2a3d2e;        /* Deep field green — dark section */
  --cream:      #f7f2e8;        /* Light cream */
  --cream2:     #ede6d4;        /* Deeper cream */

  /* Text */
  --ink:        #1e1509;        /* Near black warm */
  --ink2:       #4a3728;        /* Mid warm brown */
  --light-text: #f5f0e8;        /* Light text on dark */
  --muted:      #8a7a68;        /* Muted warm grey */

  /* Accent */
  --green-glow: rgba(74,124,89,.18);

  /* ── COLOUR EXPERIMENT — 18 Aug 2026 ─────────────────────────────────────
     The header bar and the buttons share one colour, --brand. Lisa is choosing it;
     it has been through the logo's lime and is now a dark olive.

     Each swap flips the text on top. A light --brand needs dark labels, a dark one
     needs light labels, so --btn-text and the whole header block move together.
     Do not change --brand without re-measuring both.

     TO REVERT, two edits:
       1. the three --btn-* values below, back to the PREVIOUS lines
       2. the .header rule, back to the PREVIOUS block recorded above it

     PREVIOUS button fill  : var(--sage)   #4a7c59   hover var(--sage2) #365c42
     PREVIOUS button label : #fff  (no hover change)
     Hover was tried as a darker lime, then --field; Shaun chose dark grey.
     PREVIOUS button shadow: var(--shadow-green), a coloured glow, at rest and
                             a stronger one on hover. Dropped: Shaun did not want
                             the glow. Neutral --shadow-soft / --shadow now.
     PREVIOUS header bar   : rgba(0,0,0,.85) + backdrop-filter: blur(6px)
                             border-bottom 1px solid #4b5b4e
                             box-shadow 0 4px 20px rgba(0,0,0,.3)
     PREVIOUS nav text     : #fff      hover/active + underline #d5de21
     PREVIOUS burger       : border rgba(245,240,232,.25), bars var(--light-text)
     PREVIOUS mobile links : rgba(245,240,232,.75), hover bg rgba(255,255,255,.08)
                             hover colour var(--straw); CTA fill var(--sage)

     On the current olive the labels are white: 7.29:1, where --soil would be
     2.20:1. On the previous lime it was the other way round.

     --brand is defined once, with --brand-rgb carrying the same value so the
     translucent header can be built from it rather than repeating a literal.
     Change the two lines together.
     ─────────────────────────────────────────────────────────────────────── */
  --brand:          #4d5d00;      /* dark olive; Lisa's pick */
  --brand-rgb:      77 93 0;      /* the same value, for rgb(... / alpha) */
  /* The same hue and saturation (70deg, 100%) raised from 18% to 30% lightness,
     for use on dark grounds. --brand itself measures 2.27:1 on the hero's scrim,
     i.e. invisible; this measures 5.09:1. Re-derive it if --brand changes. */
  --brand-lift:     #7f9900;
  --btn-bg:         var(--brand);
  --btn-text:       #fff;         /* 7.29:1 on the olive; --soil would be 2.20:1 */
  --dark:           #1a1a1a;      /* dark grey; the header bar's own rendered tone */
  --dark-lift:      #3d3d3d;      /* one step lighter, for hovering off --dark */
  --btn-bg-hover:   var(--dark);
  --btn-text-hover: #fff;         /* 17.4:1 on --dark */

  /* Layout */
  --max:   1140px;
  --r-lg:  20px;
  --r-md:  14px;
  --r-sm:  10px;

  /* Spacing */
  --s-1: 8px;
  --s-2: 12px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 72px;
  --s-8: 96px;

  /* Type */
  /* The previous heading face. Nothing references it now: the headings moved to
     --font-display with the nav and buttons. Kept so reverting is one edit — but
     reverting also means putting Lora back in the Google Fonts request, which was
     dropped once it stopped being used. */
  --serif: "Lora", Georgia, serif;
  --sans:  "DM Sans", system-ui, Arial, sans-serif;
  /* The logo's wordmark. WhatTheFont read it as Century Gothic, which is a
     licensed Monotype face: it ships with MS Office so most Windows machines have
     it, but it is not on Google Fonts and cannot be self-hosted without buying a
     webfont licence. So it is named first — anyone who has it sees the real thing —
     with the closest free substitute behind it for everyone else.

     Measured, "MEADOW BAGS" at 40px against Century Gothic's 309.2px and cap 29:
       Poppins    297.4px  -3.8% width, cap identical   <- chosen
       Questrial  293.5px  -5.1% width, cap -10.3%
       Jost       289.8px  -6.3% width, cap +3.4%
     Jost was the first pick on the reasoning that it is Futura-derived; measuring
     showed it is the furthest of the three, not the closest. */
  --font-display: "Century Gothic", "Poppins", system-ui, sans-serif;

  /* Shadows */
  --shadow:      0 12px 36px rgba(44,31,14,.14);
  --shadow-soft: 0 6px 18px rgba(44,31,14,.10);
  --shadow-green: 0 12px 36px rgba(74,124,89,.22);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 95px; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}
.container--wide {
  width: min(2100px, calc(100% - 60px));
}
.srOnly {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.srOnly:focus {
  position: fixed; top: 4px; left: 4px; z-index: 200;
  width: auto; height: auto; padding: 12px 20px; margin: 0;
  overflow: visible; clip: auto;
  background: var(--sage); color: #fff; font-weight: 600;
  border-radius: var(--r-md); box-shadow: var(--shadow);
}

/* ── Typography ── */
.eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--bark);
  font-weight: 600;
}
/* Now the same value as the base. Kept so the markup does not need editing, and
   because the eyebrows on dark grounds override both anyway:
   .hero__copy .eyebrow and .section--field .eyebrow are white. */
.eyebrow--dark { color: var(--bark); }

.h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.08;
  margin: 0 0 20px;
  font-weight: 700;
  color: #fff;
}
.h1 em {
  font-style: italic;
  color: var(--brand-lift);
}
.h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.12;
  margin: 0 0 16px;
  font-weight: 600;
  color: var(--soil);
}
.h2--light { color: var(--soil); }

.h3 {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0 0 8px;
  font-weight: 600;
  color: var(--soil);
}

.lead {
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 var(--s-4);
  color: rgba(245,240,232,.88);
}
.lead--muted { color: var(--muted); }

.body {
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink2);
  margin: 0;
}
.body--space { margin-top: var(--s-3); }
.split__content .body a { color: var(--dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.split__content .body a:hover { text-decoration-thickness: 2px; }

.micro {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin: 10px 0 0;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: var(--r-md);
  border: 2px solid transparent;
  font-family: var(--font-display);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  transition: all .18s ease;
  user-select: none;
}
.btn:active { transform: translateY(1px); }

.btn--green {
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--btn-bg);
  box-shadow: var(--shadow-soft);
}
.btn--green:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-bg-hover);
  color: var(--btn-text-hover);
  box-shadow: var(--shadow);
}
.btn--ghost {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.32);
  color: #fff;
}
.btn--ghost:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.5);
}
.btn--lg { padding: 16px 30px; font-size: 14px; }
.btn--wide { width: 100%; }

/* ── HEADER ── */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* .9 alpha: modelled against everything that scrolls under it, the nav's worst
     case is 6.89:1 over the dark why-us band, so legibility holds throughout. */
  background: rgb(var(--brand-rgb) / .9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid #fff;
  box-shadow: 0 4px 20px rgba(26,26,26,.15);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 10px 0;
}
/* The logo is a transparent PNG with near-black line art, so it needs a light
   panel behind it to read on the olive bar. The panel lives on the wrapper rather
   than the image: with the artwork transparent, painting the background on the
   <img> would tie the panel's shape to the bitmap's box. */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #fff;
  border-radius: var(--r-md);
  /* Without this the flex row squeezes the panel at tighter widths and the logo
     letterboxes inside it, drawing smaller than the panel it sits in. The height
     steps down at 1000px instead, which keeps it filling the panel. */
  flex-shrink: 0;
}
.brand__logo {
  /* The logo carries its own white background, so on the dark header it reads as
     a white chip: its darkest ink measures 1.02:1 against that ground and would
     otherwise be invisible. Padding gives the artwork room inside the chip and
     keeps the corner radius clear of the wordmark. Measured against the current
     horizontal lockup, 5px of padding leaves a 14px radius clipping nothing.
     Radius matches the header's button, so the two read as one system. */
  height: 56px;
  width: auto;
  object-fit: contain;
}
.nav {
  display: flex;
  align-items: center;
  gap: 22px;
}
.nav__link {
  font-family: var(--font-display);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  color: #fff;
  padding: 6px 2px;
  position: relative;
  transition: color .15s;
}
/* Hover and the active state are signalled by the underline alone. No text-colour
   shift: it is enough on its own, and it sidesteps a colour that would have to
   clear 4.5:1 against a translucent bar whose composite changes as the page
   scrolls under it. */
.nav__link:hover,
.nav__link.isActive { color: #fff; }
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: #d5de21;
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform .18s ease;
}
.nav__link:hover::after,
.nav__link.isActive::after { transform: scaleX(1); }
/* The header's own button cannot use --btn-bg: it would be the same colour as the
   bar it sits on (1.00:1) and disappear. It uses the deeper --field instead —
   5.32:1 against the bar, 11.63:1 for its white label. Header only; every other
   .btn--green on the page follows --btn-bg. The mobile CTA below does the same,
   for the same reason. */
.nav__cta {
  margin-left: 6px;
  background: #fff;
  border-color: #fff;
  /* White fill, so the label has to be dark rather than --btn-text's white. */
  color: var(--soil);
}
/* Inverts to the same dark grey every other button hovers to. --brand is not an
   option here: it is the bar's own colour, so the button would vanish. */
.nav__cta:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-bg-hover);
  color: var(--btn-text-hover);
}

/* Mobile nav */
.navToggle {
  display: none;
  width: 44px; height: 40px;
  border: 1px solid rgba(245,240,232,.25);
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.navToggle__bar {
  display: block;
  width: 20px; height: 2px;
  background: var(--light-text);
  border-radius: 2px;
  transition: .2s;
}
.mobileNav {
  display: none;
  border-top: 1px solid rgba(245,240,232,.15);
  /* Transparent so the panel reads as the same surface as the header it sits
     inside, rather than as a second, differently shaded block. */
  background: transparent;
  padding: 8px 0 14px;
}
.mobileNav__link {
  display: block;
  padding: 12px 20px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(245,240,232,.85);
}
/* Background tint only; the text colour does not shift on hover. */
.mobileNav__link:hover { background: rgba(255,255,255,.12); }
.mobileNav__link--cta {
  margin: 8px 20px 0;
  background: #fff;
  color: var(--soil);
  border-radius: var(--r-md);
  text-align: center;
}

/* ── HERO ── */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero__slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__slide {
  position: absolute;
  inset: 0;
  background: center center / cover no-repeat;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.hero__slide.isActive {
  opacity: 1;
}
.hero__overlay {
  display: none;
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: var(--s-8) 0 var(--s-7);
}
.hero__copy {
  max-width: 620px;
  background: rgba(0, 0, 0, .55);
  padding: 40px;
  border-radius: 12px;
  backdrop-filter: blur(6px);
}
.hero__copy .eyebrow { color: rgba(255,255,255,.6); }
.heroCtas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(213,222,33,.15);
  border: 2px solid rgba(213,222,33,.5);
  text-align: center;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}
.badge__year {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #d5de21;
}
.badge__num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.badge__tag {
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  max-width: 80px;
  text-align: center;
  line-height: 1.4;
}
.hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.hero__scroll span {
  display: block;
  width: 20px;
  height: 30px;
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 12px;
  position: relative;
}
.hero__scroll span::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.65);
  animation: scrollDot 1.8s ease-in-out infinite;
}
@keyframes scrollDot {
  0%   { top: 5px; opacity: 1; }
  80%  { top: 16px; opacity: 0; }
  100% { top: 5px; opacity: 0; }
}

/* ── SECTIONS ── */
.section { padding: var(--s-8) 0; }
.section--cream {
  background: linear-gradient(180deg, var(--cream), var(--cream2));
  padding-bottom: var(--s-6);
}
.section--field {
  background-color: var(--field);
  background-image:
    radial-gradient(900px 500px at 80% 0%, rgba(107,156,95,.18), transparent 60%),
    radial-gradient(600px 400px at 10% 100%, rgba(74,124,89,.14), transparent 60%);
  color: var(--light-text);
  position: relative;
  overflow: hidden;
}
.section--field::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Photo and its darkening scrim are one layer, deliberately.
     They used to be split across ::before and ::after, and ::after painted OVER
     the section's content: inside an Elementor container the child widgets and
     the pseudo-element land in the same stacking context, where ::after paints
     last regardless of z-index. White headings rendered at 40% brightness. It
     went unnoticed because the old gradient was fully transparent from 35% to
     65% — exactly the band the headings sit in — so the bug only showed at the
     very top and bottom of the section. */
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.62) 0%,
      rgba(0,0,0,.48) 35%,
      rgba(0,0,0,.48) 65%,
      rgba(0,0,0,.58) 100%),
    url("images/field-bg.webp") center center / cover no-repeat;
  z-index: 0;
}
.section--field > * {
  position: relative;
  z-index: 1;
}
.section--field .h2 { color: #fff; }
.section--field .eyebrow { color: rgba(255,255,255,.7); }

.sectionHead { max-width: 760px; }
.sectionHead--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--s-6);
}

.divider {
  height: 2px;
  width: clamp(120px, 30vw, 280px);
  background: linear-gradient(to right, var(--dark), transparent);
  border-radius: 2px;
  margin-top: var(--s-4);
}

/* ── ABOUT SPLIT ── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7);
  align-items: center;
}
.split__image {
  position: relative;
}
.split__img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.split__tag {
  position: absolute;
  bottom: -18px;
  right: -18px;
  background: var(--dark);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  /* Neutral shadow, not the sage glow it carried. */
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 8px;
}
.stats {
  display: flex;
  gap: var(--s-5);
  margin-top: var(--s-4);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.stat__num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--dark);
}
.stat__label {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── PRODUCTS ── */
.productGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  max-width: 2100px;
  margin-left: auto;
  margin-right: auto;
}
.productCard {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(44,31,14,.08);
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
  cursor: pointer;
}
.productCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.productCard__img {
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--cream2);
  position: relative;
}
.productCard__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(44,31,14,.18));
}
.productCard__body {
  padding: var(--s-3) var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
  align-items: center;
}
.productCard__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--soil);
  margin: 0 0 6px;
}
.productCard__sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  flex: 1;
  margin: 0 0 12px;
}
.productCard__cta {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dark);
}
/* The card itself lifts on hover; the label does not need to change colour too. */
.productCard:hover .productCard__cta { color: var(--dark); }

.productsCta {
  text-align: center;
  margin-top: var(--s-5);
}

/* ── WHY US / PILLARS ── */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.pillar {
  background: rgba(20,20,20,.88);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  text-align: center;
  transition: background .2s;
}
.pillar__icon {
  margin-bottom: var(--s-3);
  display: block;
  color: #fff;
}
.pillar__icon svg {
  width: 40px;
  height: 40px;
}
.pillar__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--light-text);
  margin: 0 0 10px;
}
.pillar__body {
  font-size: 14px;
  color: rgba(245,240,232,.72);
  line-height: 1.7;
  margin: 0;
}

/* Testimonials */
.testimonials {
  margin-top: var(--s-7);
}
.testimonials .eyebrow { text-align: center; }
.testimonials__heading {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.12;
  font-weight: 600;
  text-transform: none;
  color: #fff;
  text-align: center;
  margin: 0 0 var(--s-4);
}
.tGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
.tCard {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  background: rgba(30,30,30,.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
  position: relative;
}
.tCard blockquote {
  margin: 0 0 14px;
  font-size: 15px;
  font-style: italic;
  font-family: var(--font-display);
  color: rgba(245,240,232,.88);
  line-height: 1.7;
  /* Clears the decorative quote glyph in ::before with room to breathe. */
  padding-left: 34px;
  position: relative;
}
.tCard blockquote::before {
  content: "\201C";
  position: absolute;
  left: -4px;
  top: -10px;
  font-size: 48px;
  font-family: var(--font-display);
  color: #d5de21;
  opacity: .6;
  line-height: 1;
}
.tCard figcaption {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #d5de21;
  margin-left: 34px;
}

/* ── CONTACT ── */
.contactWrap {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--s-7);
  align-items: start;
}
.contactInfo .h2 { color: var(--soil); }
.contactDetails {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.contactDetail {
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
  font-size: 16px;
  color: var(--ink2);
  line-height: 1.6;
}
.contactDetail__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--dark);
}
/* The underline alone carries the hover, as in the nav: no colour shift. */
.contactDetail a { color: var(--dark); }
.contactDetail a:hover { color: var(--dark); text-decoration: underline; }

/* Form */
.form {
  background: #fff;
  border-radius: var(--r-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow);
  border: 1px solid rgba(44,31,14,.08);
  display: grid;
  gap: var(--s-3);
}
.form__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--soil);
  margin: 0 0 4px;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
.form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.form__field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink2);
}
.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1.5px solid rgba(44,31,14,.14);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
  appearance: none;
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(74,124,89,.12);
}
.form input::placeholder,
.form textarea::placeholder { color: var(--muted); }

/* Checkbox grid */
.form__fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
.form__fieldset legend {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink2);
  margin-bottom: 10px;
}
.checkGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink2);
  cursor: pointer;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1.5px solid rgba(44,31,14,.10);
  background: var(--bg);
  transition: border-color .15s, background .15s;
  user-select: none;
}
.check:hover {
  border-color: rgba(74,124,89,.3);
  background: var(--sage-light);
}
.check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.check__box {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1.5px solid rgba(44,31,14,.22);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.check__box::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--sage);
  transform: scale(0);
  transition: transform .15s ease;
}
.check input:checked ~ .check__box {
  border-color: var(--sage);
}
.check input:checked ~ .check__box::after {
  transform: scale(1);
}
.check input:focus-visible ~ .check__box {
  box-shadow: 0 0 0 3px rgba(74,124,89,.18);
}

/* ── Multi-Select Dropdown ── */
.multiSelect {
  position: relative;
  min-width: 0;
}
.multiSelect__trigger {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1.5px solid rgba(44,31,14,.14);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: border-color .15s;
  text-align: left;
  overflow: hidden;
  max-width: 100%;
  min-width: 0;
}
.multiSelect__trigger:hover {
  border-color: rgba(44,31,14,.28);
}
.multiSelect__trigger:focus,
.multiSelect.isOpen .multiSelect__trigger {
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(74,124,89,.12);
  outline: none;
}
.multiSelect__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multiSelect__text--placeholder {
  color: var(--muted);
}
.multiSelect__arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--muted);
  transition: transform .2s ease;
}
.multiSelect.isOpen .multiSelect__arrow {
  transform: rotate(180deg);
}
.multiSelect__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid rgba(44,31,14,.14);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  max-height: 320px;
  overflow-y: auto;
  z-index: 20;
  padding: 8px 0;
}
.multiSelect.isOpen .multiSelect__dropdown {
  display: block;
}

/* Category group */
.msGroup {
  padding: 0 8px;
}
.msGroup + .msGroup {
  border-top: 1px solid rgba(44,31,14,.06);
  margin-top: 4px;
  padding-top: 4px;
}
.msGroup__parent {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--soil);
  cursor: pointer;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  transition: background .15s;
  user-select: none;
}
.msGroup__parent:hover {
  background: var(--sage-light);
}
.msGroup__parent input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Children */
.msGroup__children {
  padding-left: 24px;
}
.msChild {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink2);
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  transition: background .15s;
  user-select: none;
}
.msChild:hover {
  background: var(--sage-light);
}
.msChild input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Checked state for multi-select checkboxes */
.msGroup__parent input:checked ~ .check__box,
.msChild input:checked ~ .check__box {
  border-color: var(--sage);
}
.msGroup__parent input:checked ~ .check__box::after,
.msChild input:checked ~ .check__box::after {
  transform: scale(1);
}
.msGroup__parent input:focus-visible ~ .check__box,
.msChild input:focus-visible ~ .check__box {
  box-shadow: 0 0 0 3px rgba(74,124,89,.18);
}

/* Dropdown scrollbar */
.multiSelect__dropdown::-webkit-scrollbar {
  width: 6px;
}
.multiSelect__dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.multiSelect__dropdown::-webkit-scrollbar-thumb {
  background: rgba(44,31,14,.15);
  border-radius: 3px;
}

/* ── PRODUCT DETAIL CARDS (products.html) ── */
/* Four cards per row on wide screens. The grid is capped rather than left fluid
   so the cards stay the size they were at three per row (4 x 366 + 3 x 24), and
   steps down to three at the width where a fourth no longer fits. */
.prodGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-5);
  max-width: 1536px;
  margin-left: auto;
  margin-right: auto;
}
/* 1536 grid + the 60px gutter .container--wide reserves. Below this a fourth card
   would have to shrink, so it steps down instead. */
@media (max-width: 1596px) {
  .prodGrid { grid-template-columns: repeat(3, 1fr); max-width: var(--max); }
}
/* Centre a lone card on the final row instead of stranding it left. Scoped to the
   three-across band, which is the only place it makes sense: at four across the
   seventh card fills row two, and at two or one there is no middle to centre into.
   Inert whenever the product count is a multiple of 3. */
@media (min-width: 1021px) and (max-width: 1596px) {
  .prodGrid > .prodCard:last-child:nth-child(3n + 1) { grid-column: 2; }
}
.prodCard {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(44,31,14,.08);
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
}
.prodCard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.prodCard__img {
  height: 220px;
  background-size: cover;
  background-position: center;
  background-color: var(--cream2);
  position: relative;
}
.prodCard__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(44,31,14,.15));
}
.prodCard__body {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.prodCard__num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.prodCard__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--soil);
  margin: 0 0 10px;
  line-height: 1.2;
}
.prodCard__desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink2);
  margin: 0 0 16px;
}
.prodCard__list {
  list-style: none;
  padding: 0;
  margin: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 20px;
}
.prodCard__list li {
  font-size: 13px;
  color: var(--ink2);
  line-height: 1.5;
  padding-left: 22px;
  position: relative;
}
.prodCard__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sage);
  opacity: .7;
}
.prodCard__cta {
  margin-top: auto;
}

@media (max-width: 1020px) {
  .prodGrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .prodGrid { grid-template-columns: 1fr; }
  .prodCard__img { height: 200px; }
}

/* Text link from a product card to that product's own page. It sits between the
   size list and the quote button, so the button gives up its auto margin. */
/* Two classes, not one: on the WordPress build Elementor's `.elementor a` rule
   strips the underline from any link styled by a single class. */
.prodCard .prodCard__more {
  align-self: flex-start;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prodCard .prodCard__more:hover { text-decoration-thickness: 2px; }
.prodCard .prodCard__more + .prodCard__cta { margin-top: 0; }

/* ── PRODUCT LANDING PAGE ── */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 var(--s-5);
  font-size: 13px;
  color: var(--ink2);
}
.crumbs a { color: var(--dark); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { text-decoration-thickness: 2px; }

/* The product photo is a wide packshot; the about photo's fixed 440px crop would
   cut the bags off at both sides, so this one keeps its own proportions. */
.split__img.split__img--natural { height: auto; }

.landing__list { margin: var(--s-3) 0 0; padding-bottom: var(--s-4); }
.landing__list li { font-size: 15px; }
.landing__list li::before { top: 7px; }
.landing__back {
  margin: var(--s-3) 0 0;
  font-size: 14px;
}
.landing__back a { color: var(--dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.landing__back a:hover { text-decoration-thickness: 2px; }

@media (max-width: 860px) {
  .crumbs { justify-content: center; }
  /* The split centres its copy here; a bulleted list reads badly centred, so it
     stays left-aligned and is centred as a block instead. */
  .landing__list { width: fit-content; margin-left: auto; margin-right: auto; text-align: left; }
}

/* ── FOOTER ── */
.footer {
  background: var(--cream2);
  padding: var(--s-4) 0;
  box-shadow: none;
}
.footer__hr {
  border: none;
  border-top: 1px solid rgba(44,31,14,.15);
  margin: 0 0 var(--s-5);
}
.footer__copy {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--muted);
  text-align: center;
  margin: 0;
}

/* ── CHAT WIDGET ── */
.chatWidget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.chatWidget__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transform: translateY(10px) scale(.9);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.chatWidget.isOpen .chatWidget__options {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.chatWidget__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 28px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transition: transform .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.chatWidget__link:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.chatWidget__link svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.chatWidget__link--wa { background: #25D366; }
.chatWidget__link--fb { background: #0084FF; }

.chatWidget__fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--btn-bg);
  color: var(--btn-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-soft);
  transition: background .15s ease, transform .15s ease;
}
.chatWidget__fab:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-text-hover);
  transform: scale(1.06);
}
.chatWidget__icon {
  width: 26px;
  height: 26px;
}
.chatWidget__icon--close { display: none; }
.chatWidget.isOpen .chatWidget__icon--chat { display: none; }
.chatWidget.isOpen .chatWidget__icon--close { display: block; }

@media (max-width: 860px) {
  .chatWidget { bottom: 16px; right: 16px; }
  .chatWidget__fab { width: 50px; height: 50px; }
  .chatWidget__icon { width: 22px; height: 22px; }
}

/* ── REVEAL ANIMATIONS ── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.isVisible {
  opacity: 1;
  transform: translateY(0);
}

/* ── RESPONSIVE ── */
@media (max-width: 1020px) {
  .productGrid { grid-template-columns: repeat(4, 1fr); }
  .pillars { grid-template-columns: repeat(2, 1fr); }
}

/* The lockup is 5.16:1 and the uppercase nav is ~600px, so the two need about
   940px of container between them. Below that the burger takes over: the previous
   860px handover left a band where the nav stayed visible and wrapped its own
   items instead, "Why Us" onto two lines and the quote button onto three. */
@media (max-width: 1000px) {
  .nav { display: none; }
  .navToggle { display: flex; }
  .mobileNav.isOpen { display: block; }
}

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__badge { display: none; }
  .split { grid-template-columns: 1fr; }
  .split__tag { right: auto; left: 50%; transform: translateX(-50%); white-space: nowrap; }
  .split__content { text-align: center; }
  .split__content .eyebrow { text-align: center; }
  .split__content .body { text-align: center; }
  .hero { min-height: 75svh; }
  .hero__inner { padding: 24px 0 16px; }
  .hero__scroll { display: none; }
  .hero__copy { text-align: center; padding: 24px 20px; }
  .h1 { font-size: clamp(30px, 8vw, 40px); white-space: nowrap; }
  .heroCtas { flex-direction: column; align-items: stretch; }
  .heroCtas .btn { width: 100%; text-align: center; }
  .heroCtas .badge { align-self: center; margin-left: 0; }
  .contactInfo { text-align: center; }
  .contactInfo .eyebrow { text-align: center; }
  .contactInfo .body { text-align: center; }
  .contactDetails { justify-items: start; text-align: left; }
  .divider {
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(to right, transparent, var(--dark), transparent);
  }
  .stats { gap: var(--s-4); justify-content: center; }
  .stat { align-items: center; text-align: center; }
  .section { padding: var(--s-6) 0; }
  .section--cream { padding-bottom: var(--s-4); }
  .footer { padding: var(--s-2) 0; }
  .footer__hr { margin-bottom: var(--s-3); }
  .contactWrap { grid-template-columns: 1fr; }
  .tGrid { grid-template-columns: 1fr; }
  .multiSelect__dropdown { max-height: 260px; }
  .container { width: min(var(--max), calc(100% - 64px)); }
  .container--wide { width: min(1600px, calc(100% - 64px)); }

  /* The header sits tighter to the edge than the page content does: the logo's
     white panel already carries its own inset, so the page gutter on top of it
     read as too much space on the left. */
  .header .container { width: min(var(--max), calc(100% - 24px)); }
  .brand { padding: 6px 10px; }
  .brand__logo { height: 48px; }
}

@media (max-width: 640px) {
  .productGrid { grid-template-columns: repeat(2, 1fr); }
  .pillars { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .container { width: min(var(--max), calc(100% - 64px)); }
  .form { padding: var(--s-4); }
  .form__title { font-size: 19px; }
  .multiSelect__trigger { font-size: 13px; padding: 10px 12px; }
  .multiSelect__dropdown { max-height: 240px; }
  .msGroup__parent { font-size: 13px; padding: 7px 8px; }
  .msChild { font-size: 12px; padding: 5px 8px; }
  .msGroup__children { padding-left: 18px; }
}

@media (max-width: 400px) {
  .productGrid { grid-template-columns: 1fr; }
}