/* ==========================================================================
   MB Agrovibes — site styles
   Ported from the Claude Design prototype "MB Agrovibes Website.dc.html".
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --green: #17843C;
  --green-dark: #0F5C2A;
  --green-deep: #14612F;
  --gold: #F5C11A;
  --gold-dark: #E9A81C;
  --gold-light: #FFD34D;
  --gold-ink: #8A6A05;

  /* Neutrals */
  --ink: #1C1D1A;
  --body: #46443E;
  --muted: #6B6A63;
  --muted-2: #8A8880;
  --muted-3: #B0AEA4;

  /* Surfaces */
  --white: #FFFFFF;
  --cream: #FAF6EF;
  --mint: #EAF4E9;
  --mint-2: #F7FAF6;
  --mint-3: #F3F7F1;
  --amber: #FFF3CF;
  --amber-2: #FFF8E6;

  /* Lines */
  --line: #EDE5D8;
  --line-2: #E7E0D4;
  --line-3: #E0D8CA;
  --line-mint: #E3EFE1;
  --line-mint-2: #D9E7D6;
  --line-amber: #F0DFAE;

  /* Type */
  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body: Karla, system-ui, sans-serif;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Layout */
  --wrap: 1240px;
  --section-y: clamp(56px, 7vw, 96px);

  /* Header. The logo is a stacked lockup (leaf mark over wordmark), so it needs
     real height for the wordmark to read. Everything else is derived: the bar
     is the logo plus its padding, and the hero pulls up by exactly that much
     to sit under the floating header. Change --logo-h and the rest follows. */
  --logo-h: 72px;
  --header-pad-y: 18px;
  --header-top: 14px;
  --header-pad-x: 24px;
  --header-radius: 12px;
  --header-h: calc(var(--logo-h) + (var(--header-pad-y) * 2) + var(--header-top));

  /* Decorative stripe fills */
  --stripes-15: repeating-linear-gradient(115deg, #fff 0 2px, transparent 2px 15px);
  --stripes-16: repeating-linear-gradient(115deg, #fff 0 2px, transparent 2px 16px);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  margin: 0;
  padding: 0;
  background: var(--white);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

a { color: var(--green); text-decoration: none; }
a:hover { color: var(--gold-dark); }

h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0;
  text-wrap: pretty;
}

p { margin: 0; }
img, video { max-width: 100%; }
button { font-family: var(--font-body); }
input, textarea, select { font-family: var(--font-body); font-size: 16px; }

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; }
.section { padding: var(--section-y) 24px; }
.section--white { background: var(--white); }
.section--cream { background: var(--cream); }
.section--green { background: var(--green); position: relative; overflow: hidden; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  padding: 14px 20px;
  border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; color: var(--ink); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Decorative diagonal stripe overlay */
.stripes {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image: var(--stripes-16);
  pointer-events: none;
}
.stripes--15 { background-image: var(--stripes-15); }
.stripes--13 { opacity: 0.13; }

@keyframes drift {
  from { transform: translateX(0); }
  to { transform: translateX(8px); }
}
.stripes--drift { animation: drift 44s linear infinite alternate; }

/* --------------------------------------------------------------------------
   3. Motion — scroll reveals, entrances, overlays
   -------------------------------------------------------------------------- */
[data-reveal],
[data-reveal-img],
[data-reveal-group] > * {
  opacity: 0;
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
[data-reveal] { transform: translateY(14px); }
[data-reveal-group] > * { transform: translateY(16px); }
[data-reveal-img] { transform: scale(0.99); }

[data-reveal][data-in],
[data-reveal-img][data-in],
[data-reveal-group][data-in] > * { opacity: 1; transform: none; }

[data-reveal-group] > *:nth-child(2)  { transition-delay: 55ms; }
[data-reveal-group] > *:nth-child(3)  { transition-delay: 110ms; }
[data-reveal-group] > *:nth-child(4)  { transition-delay: 165ms; }
[data-reveal-group] > *:nth-child(5)  { transition-delay: 220ms; }
[data-reveal-group] > *:nth-child(6)  { transition-delay: 275ms; }
[data-reveal-group] > *:nth-child(7)  { transition-delay: 330ms; }
[data-reveal-group] > *:nth-child(8)  { transition-delay: 385ms; }
[data-reveal-group] > *:nth-child(9)  { transition-delay: 440ms; }
[data-reveal-group] > *:nth-child(10) { transition-delay: 495ms; }
[data-reveal-group] > *:nth-child(11) { transition-delay: 550ms; }
[data-reveal-group] > *:nth-child(12) { transition-delay: 605ms; }

/* No-JS safety net: never hide content if the observer never runs. */
.no-js [data-reveal],
.no-js [data-reveal-img],
.no-js [data-reveal-group] > * { opacity: 1; transform: none; }

@keyframes enterUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
[data-enter] { animation: enterUp 520ms var(--ease-out) both; }

@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
[data-page] { animation: pageIn 260ms ease both; }

@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(18px) scale(0.99); }
  to { opacity: 1; transform: none; }
}

@keyframes menuIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  [data-reveal],
  [data-reveal-img],
  [data-reveal-group] > * { opacity: 1 !important; transform: none !important; }
  [data-grid][data-swapping="true"] { opacity: 1 !important; }
  html, body { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-py: 19px;
  --btn-px: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-py) var(--btn-px);
  border: none;
  border-radius: 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background 180ms ease,
              box-shadow 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn:active { transform: scale(0.97); }

/* Outline variants carry a 2px border, so trim 2px of vertical padding to
   keep the control the same height as its solid sibling. */
.btn--outline-green,
.btn--outline-light,
.btn--outline-sand {
  border: 2px solid;
  padding: calc(var(--btn-py) - 2px) var(--btn-px);
  background: transparent;
}

/* Sizes */
.btn--lg     { --btn-py: 19px; --btn-px: 30px; font-size: 14px; }
.btn--lg-w   { --btn-py: 19px; --btn-px: 32px; font-size: 14px; }
.btn--menu   { --btn-py: 18px; --btn-px: 22px; font-size: 14px; }
.btn--md     { --btn-py: 17px; --btn-px: 28px; font-size: 13px; }
.btn--md-n   { --btn-py: 16px; --btn-px: 24px; font-size: 13px; }
.btn--md-c   { --btn-py: 17px; --btn-px: 26px; font-size: 13px; }
.btn--sm     { --btn-py: 14px; --btn-px: 16px; font-size: 12px; }

/* Colours */
.btn--green { background: var(--green); color: #fff; }
.btn--green:hover { background: var(--green-dark); color: #fff; }

.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: var(--gold-light); color: var(--ink); }

.btn--outline-green { border-color: var(--green); color: var(--green); }
.btn--outline-green:hover { background: var(--mint); color: var(--green); }

.btn--outline-light { border-color: rgba(255, 255, 255, 0.6); color: #fff; }
.btn--outline-light:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

.btn--outline-sand { border-color: var(--line-2); color: var(--ink); }
.btn--outline-sand:hover { border-color: var(--green); color: var(--green); }

.btn--ghost {
  background: transparent;
  color: var(--muted);
  --btn-py: 15px;
  --btn-px: 10px;
  font-size: 13px;
}
.btn--ghost:hover { color: var(--ink); }

/* Lifts on hover (hero + header CTAs only, per the design) */
.btn--lift:hover { transform: translateY(-2px); }
.btn--lift-1:hover { transform: translateY(-1px); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.btn-row--tight { gap: 12px; }
.btn-row--center { justify-content: center; }

/* Text link with arrow */
.link-arrow {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--green);
}

/* --------------------------------------------------------------------------
   5. Header + navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: var(--header-top) var(--header-pad-x) 0;
}

.site-header__bar {
  max-width: 1288px;
  margin: 0 auto;
  background: var(--green);
  border-radius: var(--header-radius);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 50, 26, 0.22);
  transition: box-shadow 320ms ease;
}
/* The brand's woven diagonal, same fill the footer and green panels use. */
.site-header__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image: var(--stripes-16);
  pointer-events: none;
}
html[data-scrolled] .site-header__bar {
  box-shadow: 0 14px 38px rgba(15, 50, 26, 0.3);
}

.site-header__inner {
  position: relative;
  z-index: 1;
  max-width: 1288px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: var(--header-pad-y) 24px;
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.site-header__logo img {
  height: var(--logo-h);
  width: auto;
  display: block;
}

.site-nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.site-nav__link {
  position: relative;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  padding: 11px 14px;
  border-radius: 10px;
  color: #fff;
  transition: background 0.18s ease, color 0.18s ease;
}
.site-nav__link:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.site-nav__link[aria-current="page"] { color: var(--gold); }

.site-nav__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 180ms var(--ease-out);
}

.site-header__cta {
  flex: 0 0 auto;
  background: var(--gold);
  color: var(--ink);
}
.site-header__cta:hover { background: var(--gold-light); color: var(--ink); }

.nav-toggle {
  flex: 0 0 auto;
  display: none;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  gap: 4px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  margin-left: auto;
  transition: background 180ms ease, border-color 180ms ease;
}
.nav-toggle:active { background: rgba(255, 255, 255, 0.24); }
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
}

/* The prototype switches to the mobile layout below 1040px. */
@media (max-width: 1039px) {
  .site-nav { display: none; }
  .site-header__cta { display: none; }
  .nav-toggle { display: flex; }
}

/* ---------------------------------------------------------------------------
   Mobile header scale.

   The bar's height is derived (logo + 2x pad-y + top), so shrinking only the
   logo left desktop padding in place and the bar stayed ~94-100px on a phone.
   Each step below scales the whole set, giving a real mobile nav bar:

     <= 1039px  56 + 24 + 12 = 92px   (tablet, steps toward the 114px desktop bar)
     <=  700px  48 + 22 + 10 = 80px
     <=  380px  44 + 20 +  9 = 73px

   --header-top folds in the safe-area inset so --header-h stays truthful and
   the hero's negative offset tracks it automatically. It resolves to 0 in
   normal portrait Safari, so no blank gap appears.
   ------------------------------------------------------------------------- */
@media (max-width: 1039px) {
  :root {
    --logo-h: 56px;
    --header-pad-y: 14px;
    --header-top: calc(12px + env(safe-area-inset-top, 0px));
    --header-pad-x: 20px;
  }
}

@media (max-width: 700px) {
  :root {
    --logo-h: 48px;
    --header-pad-y: 12px;
    --header-top: calc(10px + env(safe-area-inset-top, 0px));
    --header-pad-x: 16px;
  }
}

@media (max-width: 380px) {
  :root {
    --logo-h: 46px;
    --header-pad-y: 11px;
    --header-top: calc(9px + env(safe-area-inset-top, 0px));
    --header-pad-x: 14px;
  }
}

/* A 34px-deep desktop shadow reads as a heavy card on an 80px bar. */
@media (max-width: 1039px) {
  .site-header__bar {
    box-shadow: 0 6px 18px rgba(15, 50, 26, 0.18);
  }
  html[data-scrolled] .site-header__bar {
    box-shadow: 0 8px 22px rgba(15, 50, 26, 0.26);
  }

  /* On desktop the inner row is inset because its 1240px max-width sits inside
     a 1288px bar. Below that the bar is narrower than --wrap, so margin:auto
     yields no inset at all and the logo and burger end up flush against the
     rounded edges. Give the row explicit padding at these sizes. */
  .site-header__inner {
    gap: 12px;
    padding-inline: 18px;
  }
}
@media (max-width: 380px) {
  .site-header__inner { padding-inline: 14px; }
}

/* Mobile menu overlay */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--green-dark);
  padding: 22px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  animation: menuIn 260ms var(--ease-out) both;
}
.menu[hidden] { display: none; }

.menu__top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.menu__top img { height: 64px; width: auto; }

.menu__close {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.menu__nav {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 34px;
}
.menu__nav a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  padding: 14px 4px;
  color: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  animation: enterUp 300ms var(--ease-out) both;
}
.menu__nav a[aria-current="page"] { color: var(--gold); }
.menu__nav a:nth-child(1) { animation-delay: 40ms; }
.menu__nav a:nth-child(2) { animation-delay: 80ms; }
.menu__nav a:nth-child(3) { animation-delay: 120ms; }
.menu__nav a:nth-child(4) { animation-delay: 160ms; }

.menu__foot {
  position: relative;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.menu__contact {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  line-height: 1.7;
  margin-top: 10px;
}
.menu .btn--outline-light { border-color: rgba(255, 255, 255, 0.45); }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  display: flex;
  overflow: hidden;
}
/* Full-bleed landing section. min-height (not height) so the hero still grows
   if the content ever needs more room than the viewport — e.g. a short landscape
   phone — instead of clipping. svh tracks the visible viewport on mobile so the
   collapsing browser chrome cannot leave a gap. */
.hero--home {
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
}
.hero--page {
  min-height: clamp(440px, 62vh, 620px);
  align-items: center;
}
.hero--products {
  min-height: clamp(460px, 66vh, 660px);
  align-items: center;
}

/* The hero media layer also carries .media, which sets position:relative later
   in this file. At equal specificity source order would win and collapse this
   box to 0x0 — taking the hero video/image with it. Scoping to .hero raises
   specificity so the fill always wins, whatever the declaration order. */
.hero .hero__media {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  z-index: 0;
}
.hero .hero__scrim { position: absolute; inset: 0; z-index: 1; }
.hero .hero__inner { z-index: 2; }
.hero--home .hero__scrim {
  background: linear-gradient(180deg, rgba(15, 50, 26, 0.62) 0%, rgba(15, 50, 26, 0.34) 42%, rgba(15, 50, 26, 0.82) 100%);
}
.hero--page .hero__scrim {
  background: linear-gradient(180deg, rgba(15, 50, 26, 0.66) 0%, rgba(15, 50, 26, 0.4) 60%, rgba(15, 50, 26, 0.7) 100%);
}
.hero--contact .hero__scrim {
  background: linear-gradient(180deg, rgba(15, 50, 26, 0.66) 0%, rgba(15, 50, 26, 0.42) 58%, rgba(15, 50, 26, 0.78) 100%);
}
.hero--products .hero__scrim {
  background: linear-gradient(180deg, rgba(15, 50, 26, 0.66) 0%, rgba(15, 50, 26, 0.42) 55%, rgba(15, 50, 26, 0.78) 100%);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero--home .hero__inner {
  padding: calc(var(--header-h) + 40px) 24px clamp(56px, 8vw, 96px);
  gap: 22px;
}
.hero--page .hero__inner { padding: calc(var(--header-h) + 32px) 24px 64px; gap: 18px; }
.hero--contact .hero__inner { padding: calc(var(--header-h) + 32px) 24px 64px; gap: 20px; }
.hero--products .hero__inner { padding: calc(var(--header-h) + 32px) 24px 66px; gap: 20px; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 9px 18px;
  color: var(--gold);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
}
.hero__badge span {
  width: 9px;
  height: 9px;
  background: var(--gold);
  transform: rotate(45deg);
  display: block;
}

.hero__eyebrow {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--gold);
}

.hero h1 {
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.hero--home h1 { font-size: clamp(38px, 7vw, 84px); line-height: 1.02; max-width: 18ch; }
.hero--about h1 { font-size: clamp(34px, 6vw, 66px); line-height: 1.05; max-width: 20ch; }
.hero--products h1 { font-size: clamp(34px, 6vw, 68px); line-height: 1.04; max-width: 20ch; }
.hero--contact h1 { font-size: clamp(32px, 5.6vw, 62px); line-height: 1.05; max-width: 22ch; }

.hero__lede {
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.65;
}
.hero--home .hero__lede { font-size: clamp(16px, 1.9vw, 20px); max-width: 68ch; }
.hero--about .hero__lede { font-size: clamp(16px, 1.8vw, 19px); max-width: 60ch; }
.hero--products .hero__lede,
.hero--contact .hero__lede { font-size: clamp(16px, 1.8vw, 19px); max-width: 66ch; }

/* --------------------------------------------------------------------------
   7. Media frames (image + video wells)
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  background: #E4EFE2;
  background-image: repeating-linear-gradient(115deg, rgba(23, 132, 60, 0.09) 0 2px, transparent 2px 14px);
}
.media > img,
.media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media--hero {
  background: #2C4A33;
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 16px);
}
.media--hero > video { pointer-events: none; }

.media--r28 { border-radius: 28px; }
.media--r18 { border-radius: 18px; }
.media--r24 { border-radius: 24px; }

.media--4x5 { aspect-ratio: 4 / 5; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--1x1 { aspect-ratio: 1 / 1; }

.media--shadow { box-shadow: 0 24px 54px rgba(15, 50, 26, 0.14); }
.media--shadow-lg { box-shadow: 0 26px 56px rgba(15, 50, 26, 0.16); }

/* Portrait video treatment (About → Who We Are).
   The video sizes itself: width:100% + height:auto keeps whatever aspect ratio
   the file actually has, so a vertical clip is never cropped, letterboxed or
   stretched. Do not add object-fit here — that is what would crop it. */
.portrait-media {
  width: 100%;
  /* 400px x 9:16 lands at ~711px tall — the same visual height the 4:5 image
     slot had at full column width, so the section's balance is unchanged. */
  max-width: 400px;
  margin: 0 auto;
  border-radius: 28px;
  box-shadow: 0 24px 54px rgba(15, 50, 26, 0.14);
  background: var(--green-dark);
  line-height: 0;
  /* isolate + own radius on the child: Safari will not clip a <video> to an
     ancestor's border-radius without its own stacking context. */
  isolation: isolate;
  overflow: hidden;
}
.portrait-media__video,
.portrait-media img {
  display: block;
  width: 100%;
  height: auto;          /* keeps the file's real ratio — never crops or stretches */
  border-radius: 28px;
  background: var(--green-dark);
}

/* --------------------------------------------------------------------------
   8. Shared content blocks
   -------------------------------------------------------------------------- */
.eyebrow {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--gold-dark);
}
.eyebrow--gold { color: var(--gold); }

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.section-head h2 {
  font-weight: 800;
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.08;
}
.section-head--left {
  align-items: flex-start;
  text-align: left;
  gap: 16px;
  max-width: 780px;
}

.leaf-mark {
  width: 30px;
  height: 30px;
  color: var(--green);
  flex: 0 0 auto;
}

.prose {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.prose h2 {
  font-weight: 800;
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.08;
}
.prose p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--body);
  max-width: 60ch;
}

/* Track minimums are wrapped in min(..., 100%) throughout. A bare
   minmax(340px, 1fr) forces a 340px track even inside a 312px mobile column,
   which pushes children past the section's right edge and makes every other
   row look misaligned. min() lets the track collapse to the container. */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.split--tight { gap: clamp(32px, 5vw, 68px); }
.split--60 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(32px, 5vw, 60px); }
.split--64 { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: clamp(32px, 5vw, 64px); }
.split--56 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(28px, 4vw, 56px); }

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.pill {
  background: var(--mint);
  color: var(--green-deep);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 11px 16px;
  border-radius: 10px;
}
.pill--sand {
  background: var(--cream);
  border: 1px solid var(--line-2);
  color: var(--body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: normal;
}

.tag {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 7px 12px;
  border-radius: 8px;
}
.tag--amber { background: var(--amber); color: var(--gold-ink); }
.tag--mint { background: var(--mint); color: var(--green); }
.tag-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Icon cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
  margin-top: clamp(32px, 5vw, 56px);
}
.card-grid--340 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.card-grid--260 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.card-grid--150 { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; margin-top: 6px; }

.icon-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 260ms ease, transform 260ms var(--ease-out), border-color 260ms ease;
}
.icon-card:hover {
  box-shadow: 0 18px 38px rgba(15, 50, 26, 0.1);
  transform: translateY(-3px);
  border-color: var(--line-mint-2);
}
.icon-card h3 { font-weight: 700; font-size: 21px; line-height: 1.25; }
.icon-card p { font-size: 15px; line-height: 1.7; color: var(--body); }

.icon-card__badge {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.icon-card__badge--mint { background: var(--mint); width: 52px; height: 52px; }
.icon-card__badge svg { width: 28px; height: 28px; color: var(--green); flex: 0 0 auto; }
.icon-card__badge--mint svg { width: 26px; height: 26px; }

.icon-card svg { transition: transform 300ms var(--ease-out); }

/* Compact horizontal icon rows (requirement fields, buyer types) */
.row-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 260ms var(--ease-out), border-color 260ms ease, box-shadow 260ms ease;
}
.row-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-mint-2);
  box-shadow: 0 14px 30px rgba(15, 50, 26, 0.08);
}
.row-card__badge {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--mint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.row-card__badge svg { width: 24px; height: 24px; color: var(--green); flex: 0 0 auto; }
.row-card__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
}

/* Numbered step tiles on the green band */
.step {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.step__no {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  color: var(--gold);
  line-height: 1;
}
.step__top svg { width: 28px; height: 28px; color: var(--gold); flex: 0 0 auto; }
.step h3 { color: #fff; font-weight: 700; font-size: 20px; line-height: 1.3; }

/* Light numbered tiles (products quality stages) */
.stage {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 24px;
  transition: transform 260ms var(--ease-out), box-shadow 260ms ease, border-color 260ms ease;
}
.stage:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(15, 50, 26, 0.09);
  border-color: var(--line-mint-2);
}
.stage__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.stage__no {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  color: var(--gold-dark);
  line-height: 1;
}
.stage__top svg { width: 26px; height: 26px; color: var(--green); flex: 0 0 auto; }
.stage h3 { font-weight: 700; font-size: 20px; margin-top: 12px; line-height: 1.3; }
.stage svg { transition: transform 300ms var(--ease-out); }

/* Green closing panel */
.panel {
  max-width: var(--wrap);
  margin: 0 auto;
  background: var(--green-dark);
  border-radius: 28px;
  padding: clamp(36px, 6vw, 72px);
  position: relative;
  overflow: hidden;
}
.panel__orb {
  position: absolute;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(245, 193, 26, 0.16);
  right: -60px;
  top: -60px;
}
.panel__orb--bl {
  right: auto;
  top: auto;
  left: -70px;
  bottom: -70px;
  width: 260px;
  height: 260px;
  background: rgba(245, 193, 26, 0.14);
}
.panel__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  max-width: 62ch;
}
.panel__body h2 {
  color: #fff;
  font-weight: 800;
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1.06;
}
.panel__body p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 17px;
  line-height: 1.7;
}
.section--panel { padding: clamp(24px, 4vw, 40px) 24px clamp(56px, 7vw, 96px); }

/* Cream banner CTA */
.banner {
  max-width: var(--wrap);
  margin: 0 auto;
  background: var(--amber-2);
  border: 1px solid var(--line-amber);
  border-radius: 28px;
  padding: clamp(30px, 4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.banner h2 {
  font-weight: 800;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.12;
  max-width: 22ch;
}

/* --------------------------------------------------------------------------
   9. Home page
   -------------------------------------------------------------------------- */
.about-figure { position: relative; padding-bottom: 74px; }
.about-figure__note {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  background: var(--green);
  color: #fff;
  border-radius: 20px;
  padding: 24px 26px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(15, 92, 42, 0.28);
}
.about-figure__note h3 { font-weight: 700; font-size: 20px; margin-bottom: 8px; }
.about-figure__note p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 22px;
  margin-top: clamp(32px, 5vw, 56px);
}

.feature-card {
  grid-column: 1 / -1;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.feature-card__media { position: relative; min-height: 320px; }
.feature-card__body {
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}
.feature-card__body h3 {
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
}
.feature-card__body p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  max-width: 46ch;
}

.cat-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  transition: transform 260ms var(--ease-out), box-shadow 260ms ease;
}
.cat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px rgba(15, 50, 26, 0.13);
}
.cat-card__body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cat-card__body h3 { font-weight: 700; font-size: 24px; }
.cat-card__body p { font-size: 15px; line-height: 1.7; color: var(--body); }

[data-card] img { transition: transform 420ms var(--ease-out); }

.market-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
}
.market-card svg {
  width: 26px;
  height: 26px;
  color: var(--green);
  flex: 0 0 auto;
  margin-bottom: 14px;
}
.market-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
}
.market-card__note { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* --------------------------------------------------------------------------
   10. About page
   -------------------------------------------------------------------------- */
.mv-grid {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 22px;
}
.mv-card {
  border-radius: 28px;
  padding: clamp(30px, 4vw, 48px);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mv-card--mission { background: var(--green); color: #fff; }
.mv-card--vision { background: var(--amber-2); border: 1px solid var(--line-amber); }
.mv-card__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mv-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.mv-card__icon svg { width: 24px; height: 24px; flex: 0 0 auto; }
.mv-card--mission .mv-card__icon { background: rgba(245, 193, 26, 0.9); }
.mv-card--mission .mv-card__icon svg { color: var(--green-dark); }
.mv-card--vision .mv-card__icon { background: var(--green); }
.mv-card--vision .mv-card__icon svg { color: var(--gold); }
.mv-card p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.3;
}
.mv-card--vision p { color: var(--ink); }

.future-card {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  padding: 30px;
}
.future-card svg {
  width: 28px;
  height: 28px;
  color: var(--gold);
  flex: 0 0 auto;
  margin-bottom: 18px;
}
.future-card h3 { color: #fff; font-weight: 700; font-size: 24px; margin-bottom: 8px; }
.future-card p { color: rgba(255, 255, 255, 0.85); font-size: 15px; line-height: 1.7; }

/* --------------------------------------------------------------------------
   11. Products page
   -------------------------------------------------------------------------- */
.section--featured { padding: clamp(44px, 6vw, 72px) 24px clamp(24px, 3vw, 36px); }
.section--catalogue { padding: clamp(24px, 4vw, 40px) 24px clamp(56px, 7vw, 96px); }

.featured {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.featured h2 {
  font-weight: 800;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.04;
}
.featured__sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--green);
  line-height: 1.3;
}
.spec-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 14px;
  margin-top: 8px;
}
.spec-strip__item { border-left: 3px solid var(--gold); padding-left: 14px; }
.spec-strip__label {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--muted-2);
}
.spec-strip__value { font-weight: 600; font-size: 16px; margin-top: 3px; }

.filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 30px auto 0;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.filter {
  border: 2px solid var(--line-2);
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  padding: 13px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.filter[aria-pressed="true"] {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(272px, 100%), 1fr));
  gap: 22px;
  margin-top: 36px;
  transition: opacity 130ms ease, transform 130ms var(--ease-out);
}
.product-grid[data-swapping="true"] { opacity: 0; transform: translateY(6px); }

.product-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 260ms var(--ease-out), box-shadow 260ms ease;
}
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 46px rgba(15, 50, 26, 0.14);
}
.product-card[hidden] { display: none; }

.product-card__media { position: relative; aspect-ratio: 1 / 1; }
.product-card__no,
.product-card__cat {
  position: absolute;
  top: 14px;
  font-weight: 700;
  padding: 7px 11px;
  border-radius: 8px;
}
.product-card__no {
  left: 14px;
  background: rgba(15, 92, 42, 0.92);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.1em;
}
.product-card__cat {
  right: 14px;
  background: rgba(245, 193, 26, 0.95);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.1em;
}

.product-card__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}
.product-card__body h3 { font-weight: 700; font-size: 22px; line-height: 1.2; }
.product-card__desc { font-size: 14px; line-height: 1.65; color: var(--muted); }

.product-card__highlight {
  margin-top: 2px;
  padding: 12px 14px;
  background: var(--mint-2);
  border: 1px solid var(--line-mint);
  border-radius: 12px;
}
.product-card__highlight dt {
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--green);
}
.product-card__highlight dd {
  font-weight: 600;
  font-size: 14px;
  margin: 3px 0 0;
  color: var(--ink);
}

.product-card__actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  flex-wrap: wrap;
}
.product-card__actions > * { flex: 1 1 auto; }

/* Spec table — lives in the page for SEO, surfaced through the modal. */
.product-card__specs { display: none; }
.no-js .product-card__specs { display: block; margin-top: 16px; }
.no-js .product-card__actions .js-open-detail { display: none; }

.spec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid var(--green);
  padding-bottom: 10px;
  margin-bottom: 4px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--green);
}
.spec-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--line);
}
.spec-row__label {
  flex: 0 0 auto;
  width: 180px;
  min-width: 140px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--muted-2);
  padding-top: 2px;
  margin: 0;
}
.spec-row__label svg {
  width: 16px;
  height: 16px;
  color: var(--muted-3);
  flex: 0 0 auto;
}
.spec-row__value {
  flex: 1 1 260px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}

/* Detail modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(15, 50, 26, 0.6);
  display: grid;
  place-items: center;
  padding: clamp(14px, 4vw, 40px);
  animation: overlayIn 200ms ease both;
}
.modal[hidden] { display: none; }
.modal[data-closing="true"] { animation: overlayIn 170ms ease reverse both; }

/* Column layout: the head is a fixed row and only the body scrolls, so the
   scrollbar lives inside the content area instead of running the full height of
   the panel beside the green header. */
.modal__panel {
  background: var(--white);
  width: 100%;
  max-width: 940px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  animation: panelIn 300ms var(--ease-out) both;
}
.modal[data-closing="true"] .modal__panel {
  animation: panelIn 170ms var(--ease-out) reverse both;
}

.modal__head {
  flex: 0 0 auto;
  /* Must stay positioned: it hosts an inset:0 .stripes overlay, which would
     otherwise resolve against .modal and paint the woven pattern across the
     whole panel — including the product image. */
  position: relative;
  background: var(--green);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  overflow: hidden;
  z-index: 1;
}
.modal__eyebrow {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gold);
}
.modal__head h2 {
  color: #fff;
  font-weight: 800;
  font-size: clamp(22px, 3vw, 32px);
  margin-top: 4px;
}
.modal__close {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.modal__body {
  flex: 1 1 auto;
  min-height: 0;               /* lets the flex child actually shrink and scroll */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(20px, 3vw, 34px);
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.modal__body::-webkit-scrollbar { width: 8px; }
.modal__body::-webkit-scrollbar-track { background: transparent; }
.modal__body::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 4px;
}
.modal__body::-webkit-scrollbar-thumb:hover { background: var(--muted-3); }
.modal__body .media { margin-bottom: 26px; }
.modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* --------------------------------------------------------------------------
   12. Contact page
   -------------------------------------------------------------------------- */
.section--intro { padding: var(--section-y) 24px clamp(20px, 3vw, 30px); }
.section--inquiry { padding: clamp(20px, 3vw, 30px) 24px var(--section-y); }

.intro {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.intro h2 {
  font-weight: 800;
  font-size: clamp(28px, 4.2vw, 50px);
  line-height: 1.08;
}
.intro p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
  max-width: 62ch;
}

.contact-grid {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 24px;
  align-items: start;
}

.form-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(26px, 4vw, 44px);
  position: relative;
}
.rule-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.rule-head::before {
  content: "";
  width: 4px;
  height: 30px;
  border-radius: 2px;
  background: var(--gold);
  flex: 0 0 auto;
}
.rule-head--green::before { background: var(--green); }
.rule-head h3 { font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); }
.rule-head--green h3 { font-size: clamp(20px, 2.2vw, 24px); }

.form-card__note {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 26px;
}

.inquiry-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(196px, 100%), 1fr));
  gap: 16px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.field label {
  color: var(--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
}
.field input,
.field textarea {
  background: var(--white);
  border: 1px solid var(--line-3);
  border-radius: 12px;
  padding: 15px 16px;
  color: var(--ink);
  transition: background 200ms ease, border-color 200ms ease;
}
.field input { min-height: 52px; }
.field textarea { resize: vertical; }
.field input:focus,
.field textarea:focus { border-color: var(--green); }

.inquiry-form .btn { align-self: flex-start; margin-top: 10px; }

.form-success {
  background: var(--white);
  border: 1px solid var(--line-mint-2);
  border-radius: 16px;
  padding: 26px;
}
.form-success[hidden] { display: none; }
.form-success__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 8px;
  color: var(--green);
}
.form-success p { font-size: 15px; line-height: 1.7; color: var(--body); }

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: transform 240ms var(--ease-out), box-shadow 240ms ease, border-color 240ms ease;
}
.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(15, 50, 26, 0.08);
  border-color: var(--line-mint-2);
}
.contact-card__badge {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--amber);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-card__badge svg { width: 24px; height: 24px; color: var(--green); flex: 0 0 auto; }
.contact-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
}
.contact-card a,
.contact-card__value {
  display: block;
  font-size: 16px;
  color: var(--body);
  margin-top: 4px;
  line-height: 1.6;
}
.contact-card a:hover { color: var(--green); }

.founder-card {
  background: var(--amber-2);
  border: 1px solid var(--line-amber);
  border-radius: 20px;
  padding: 24px;
}
.founder-card__label {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--gold-ink);
}
.founder-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  margin-top: 6px;
}
.founder-card__role { font-size: 15px; color: var(--muted); margin-top: 2px; }

.contact-card a.contact-card__action {
  display: inline-block;
  margin-top: 10px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--green);
}
.contact-card a.contact-card__action:hover { color: var(--gold-dark); }

.contact-card__hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 6px;
}

.location-note { font-size: 15px; line-height: 1.7; color: var(--muted); }

/* Google Maps embed — fluid box, never a fixed iframe size */
.map-frame {
  position: relative;
  width: 100%;
  max-width: 100%;
  /* Height comes from the aspect ratio only. A min-height here would let the
     browser back-solve the width (min-height x ratio) and blow out the grid
     track on narrow screens, so narrow viewports get a squarer ratio instead. */
  aspect-ratio: 4 / 3;
  max-height: 560px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--mint-2);
}
.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--green);
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 6vw, 80px) 24px 0;
}
.site-footer__inner {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
}

.footer-cta {
  background: var(--green-dark);
  border-radius: 28px;
  padding: clamp(30px, 4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.footer-cta h2 {
  color: #fff;
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.1;
  max-width: 24ch;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(28px, 4vw, 44px);
  padding: clamp(36px, 5vw, 56px) 0;
  align-items: start;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-brand img { height: 92px; width: auto; align-self: flex-start; }
.footer-brand p {
  color: rgba(255, 255, 255, 0.84);
  font-size: 15px;
  line-height: 1.7;
  max-width: 40ch;
}

.footer-col__title {
  color: var(--gold);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold);
  display: inline-block;
}
.footer-col__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 15px;
}
.footer-col__list--contact { gap: 12px; line-height: 1.6; }
.footer-col__list a { color: rgba(255, 255, 255, 0.86); }
.footer-col__list a:hover { color: var(--gold); }
.footer-person { color: #fff; font-weight: 700; }
.footer-person-role { color: rgba(255, 255, 255, 0.7); font-size: 14px; }

.footer-base {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 24px 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   14. Hover refinements — pointer devices only
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  [data-card]:hover img { transform: scale(1.035); }
  .site-nav__link:hover::after { transform: scaleX(1); }
  .icon-card:hover svg,
  .stage:hover svg,
  .row-card:hover svg,
  .contact-card:hover svg { transform: scale(1.09); }
}

/* The location block pairs copy with the map. Two narrow columns leave the map
   too small to read on tablets, so this one section stacks earlier than the
   rest of the split layouts and gives the map the full column width. */
@media (max-width: 900px) {
  /* minmax(0, 1fr), not 1fr: the auto minimum would let the map's aspect-ratio
     inflate the track and push the page wider than the viewport. */
  .split--map { grid-template-columns: minmax(0, 1fr); }
}

/* Narrow screens: a 4:3 map in a ~330px column is only ~250px tall, which is
   too shallow to read. A squarer box keeps a useful viewing area. */
@media (max-width: 600px) {
  .map-frame { aspect-ratio: 1 / 1; }
}

/* --------------------------------------------------------------------------
   15. Inquiry form states
   -------------------------------------------------------------------------- */

/* Honeypot. Off-screen rather than display:none — bots skip hidden fields but
   happily fill this one, which is exactly what we want them to do. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.req { color: #B3261E; margin-left: 2px; }

.field-error {
  font-size: 13px;
  line-height: 1.45;
  color: #B3261E;
  margin: 0;
}
.field-error[hidden] { display: none; }

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #B3261E;
  background: #FEF7F6;
}

.form-error {
  background: #FEF7F6;
  border: 1px solid #F0C9C4;
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 20px;
}
.form-error[hidden] { display: none; }
.form-error__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: #B3261E;
  margin-bottom: 6px;
}
.form-error p { font-size: 15px; line-height: 1.65; color: var(--body); }
.form-error a { color: var(--green); text-decoration: underline; }

/* Submitting: the button keeps its footprint so the layout does not jump. */
.inquiry-form button[aria-busy="true"] { cursor: progress; }
.inquiry-form button[disabled] { opacity: 0.72; }
.inquiry-form button[disabled]:active { transform: none; }

/* No-JS path: the PHP handler redirects back to #inquiry-success (or
   #inquiry-error), and :target reveals the matching panel. Must sit after the
   [hidden] rules — same specificity, so source order decides. */
.form-success:target,
.form-error:target { display: block; }

/* Five buyer types. auto-fit lands on 4 + 1 orphan once the container is wide
   enough for four 260px tracks, which reads as a mistake. Above 1180px force a
   single row of five — the cards stay equal height and only the longest label
   takes a second line. */
@media (min-width: 1180px) {
  .card-grid--260 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Tablet: two columns would leave the fifth card alone on its own row. Three
   gives a 3 + 2 arrangement, which reads as intentional. */
@media (min-width: 660px) and (max-width: 1179px) {
  .card-grid--260 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   16. Home — What We Supply
   Image-led editorial composition: a featured produce band above two large
   category panels whose photography carries the section rather than sitting
   in a small thumbnail. Reuses the existing card, radius, pattern and button
   language — no new design system.
   -------------------------------------------------------------------------- */
.supply-head { max-width: 62ch; margin-inline: auto; }
.supply-head p {
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
}

/* Featured produce band */
.supply-feature {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  margin-top: clamp(30px, 4vw, 48px);
}
.supply-feature__media { position: relative; min-height: 300px; }
.supply-feature__body {
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}
.supply-feature__body h3 {
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.1;
}
.supply-feature__body p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--body);
  max-width: 46ch;
}

/* Two category panels */
.supply-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 22px;
  margin-top: 22px;
}

.supply-card {
  position: relative;
  display: block;
  border-radius: 28px;
  overflow: hidden;
  min-height: 420px;
  isolation: isolate;
  color: #fff;
  transition: transform 260ms var(--ease-out), box-shadow 260ms ease;
}
.supply-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 46px rgba(15, 50, 26, 0.16);
  color: #fff;
}
.supply-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .supply-card:hover img { transform: scale(1.035); }
}
/* Scrim keeps the produce readable at the top and the copy legible at the base. */
.supply-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(15, 50, 26, 0.10) 0%,
    rgba(15, 50, 26, 0.42) 46%,
    rgba(15, 50, 26, 0.88) 100%);
}
.supply-card__body {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: clamp(24px, 3vw, 32px);
}
.supply-card__kicker {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.supply-card__body h3 {
  color: #fff;
  font-weight: 800;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.1;
}
.supply-card__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 4px;
  padding: 0;
  list-style: none;
}
.supply-card__items li {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  backdrop-filter: blur(2px);
}
.supply-card__more {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

@media (max-width: 600px) {
  .supply-card { min-height: 360px; }
}

/* --------------------------------------------------------------------------
   17. Contact — combined phone / WhatsApp card
   One card, two clearly-labelled routes. WhatsApp uses the brand glyph (solid,
   as brand marks are drawn) while the call row uses the site's outline phone
   icon, so the difference between the two is readable at a glance.
   -------------------------------------------------------------------------- */
.contact-card__main { flex: 1 1 auto; min-width: 0; }

.phone-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Scoped under .contact-card: the generic `.contact-card a { display:block }`
   rule is more specific than a bare class and would otherwise stack the icon
   above the text instead of beside it. */
.contact-card a.phone-list__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 0 0 0 -12px;
  border-radius: 12px;
  color: var(--ink);
  font-size: inherit;
  line-height: 1.25;
  transition: background 180ms ease;
}
.contact-card a.phone-list__row:hover { background: var(--mint-2); color: var(--ink); }

.phone-list__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mint);
  color: var(--green);
}
.phone-list__icon svg { width: 18px; height: 18px; }
/* WhatsApp's own brand green, so the route is recognisable instantly. */
.phone-list__icon--wa { background: #25D366; color: #fff; }

.phone-list__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
  margin: 0;
}
.phone-list__label {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.phone-list__num {
  font-size: 16px;
  color: var(--body);
  margin-top: 2px;
  white-space: nowrap;
}
.contact-card a.phone-list__row .phone-list__num { display: block; }
.phone-list__row:hover .phone-list__num { color: var(--green); }

/* --------------------------------------------------------------------------
   18. Footer — phone rows
   Same two-route treatment as the Contact page, tuned for the green ground.
   -------------------------------------------------------------------------- */
.footer-col__list a.footer-phone {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 10px;
  margin-left: -10px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.86);
  transition: background 180ms ease;
}
.footer-col__list a.footer-phone:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.footer-phone__icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.footer-phone__icon svg { width: 16px; height: 16px; }
.footer-phone__icon--wa { background: #25D366; color: #fff; }

.footer-phone__text { display: flex; flex-direction: column; line-height: 1.25; }
.footer-phone__label {
  font-weight: 700;
  /* 11px, matching .phone-list__label on the contact page — 10px was under the
     legibility floor for uppercase micro-type on a phone. */
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.footer-phone__num { font-size: 15px; margin-top: 2px; white-space: nowrap; }

/* Footer product links read as links, not plain text. */
.footer-col__list a { transition: color 180ms ease; }

/* --------------------------------------------------------------------------
   19. Secondary "Call" action on the primary number
   The primary number is both a WhatsApp and a voice line. Nested anchors are
   invalid, so the row holds two sibling links: the main area opens WhatsApp,
   a compact trailing link dials it.
   -------------------------------------------------------------------------- */
.phone-list li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.contact-card a.phone-list__row { flex: 1 1 auto; min-width: 0; }

.contact-card a.phone-list__alt {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--green);
  transition: background 180ms ease, border-color 180ms ease;
}
.contact-card a.phone-list__alt:hover {
  background: var(--mint);
  border-color: var(--green);
  color: var(--green);
}
.phone-list__alt svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* Footer variant, on the green ground */
.footer-phone-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-col__list a.footer-phone { flex: 1 1 auto; min-width: 0; }

.footer-col__list a.footer-phone__alt {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 10px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
  color: rgba(255, 255, 255, 0.9);
  transition: background 180ms ease, border-color 180ms ease;
}
.footer-col__list a.footer-phone__alt:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}
.footer-phone__alt svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* Narrow phones: let the Call chip drop under the number rather than squeeze it. */
@media (max-width: 420px) {
  .phone-list li,
  .footer-phone-row { flex-wrap: wrap; }
  .contact-card a.phone-list__alt,
  .footer-col__list a.footer-phone__alt { margin-left: 44px; }
}

/* A field that should occupy the whole row rather than sit as a lone
   half-width box when the count is odd. */
.field-grid .field--wide { grid-column: 1 / -1; }

/* Three requirement cards: one clean row from tablet up, stacked below, so the
   set never breaks to 2 + 1 with an orphan. */
.card-grid--3 { grid-template-columns: minmax(0, 1fr); }
/* 940px, not 760: below that the three tracks are too narrow for
   "Product Required" to sit on one line. Stacked reads better than wrapped. */
@media (min-width: 940px) {
  .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Footer links are 18px line boxes — fine to click, too small to tap. On the
   stacked layout give every one of them a 24px hit area (WCAG 2.5.8 AA)
   without changing the desktop footer's spacing. The phone rows set their own
   display and win on specificity, so they are untouched. */
@media (max-width: 1039px) {
  .footer-col__list a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
  }
  .footer-col__list { gap: 12px; }
}

/* Very narrow phones (320–359px: iPhone SE 1st gen, a folded Galaxy Fold).
   .btn is white-space:nowrap by design, and the longest label — "DISCUSS YOUR
   REQUIREMENT" — needs ~302px, which does not fit inside a 320px viewport's
   gutters. Tighten the control and let it wrap rather than push the page
   sideways. Nothing at 360px and up is affected. */
@media (max-width: 359px) {
  .btn {
    --btn-px: 18px;
    letter-spacing: 0.06em;
    white-space: normal;
    text-wrap: balance;
  }
  .btn-row > .btn { flex: 1 1 100%; }

  /* Same squeeze on the icon rows: the badge plus 24px of card padding leaves
     ~170px, and "Product Required" / "Food Manufacturers" need a little more
     than that at 19px. Buy the width back rather than break them over two
     lines beside a single-line neighbour. */
  .row-card { padding: 18px 16px; gap: 12px; }
  .row-card__label { font-size: 17px; }
}