/* ==========================================================================
   Shree Jalaram Expo — style.css
   A cinematic, nature-led interface: cream paper, deep forest, gold light.
   --------------------------------------------------------------------------
   Contents
     01  tokens
     02  reset + base typography
     03  layout helpers
     04  buttons, chips, badges, eyebrows
     05  atmosphere (mist, rays, leaves, grain) + loader
     06  navigation + drawer
     07  hero
     08  marquee
     09  heritage
     10  coffee collection
     11  indian spices
     12  cards (export desk, industries)
     13  farm-to-export journey
     14  sustainability + counters
     15  quality
     16  farmers
     17  why us
     18  global presence
     19  order sizes
     20  testimonials
     21  faq
     22  contact + form + map
     23  footer
     24  progress, to-top, misc
     25  reveal states + motion
     26  responsive
     27  reduced motion + print
   ========================================================================== */

/* ============================================================ 01 TOKENS */
:root {
  /* Greens: a rested, natural forest. The old set bottomed out near black
     (#0a2116), which made the dark sections glare against cream text — this
     one keeps the depth but sits high enough to be comfortable to read for
     a long time. */
  --forest: #2f6149;
  --forest-deep: #285540;
  --forest-ink: #204a37;
  --moss: #3c7f5f;
  --moss-light: #55a077;
  --sage: #a5dcbf;
  --sage-deep: #8cb79c;

  /* browns + paper */
  --coffee: #6f4e37;
  --cinnamon: #8b5a2b;
  --sand: #ddb892;
  --cream: #f8f4ec;
  --cream-2: #f2ece0;
  --cream-3: #eae3d4;

  /* accents */
  --gold: #c9a227;
  --gold-light: #e4c05f;
  --copper: #b87333;

  /* Text: pulled back from black-on-white and white-on-black at both ends.
     Everything still clears WCAG AA; none of it glares. */
  --ink: #1e3128;
  --ink-2: #44584c;
  --ink-3: #62756a;
  --on-dark: #eaf2e6;
  --on-dark-2: #c9d9ca;
  --on-dark-3: #a6b9a8;

  /* surfaces */
  --page: var(--cream);
  --card: #ffffff;
  --line: rgba(23, 40, 31, 0.1);
  --line-strong: rgba(23, 40, 31, 0.18);
  --line-dark: rgba(242, 246, 238, 0.14);

  /* type */
  --display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --sans: 'Inter', 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* rhythm */
  --gutter: clamp(20px, 4vw, 56px);
  --sec-y: clamp(84px, 11vw, 168px);
  --maxw: 1240px;
  --maxw-wide: 1480px;

  /* organic radii — never a perfect rectangle */
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 34px;
  --r-leaf: 40px 40px 40px 6px;
  --r-pill: 999px;

  /* shadows: warm, low, layered */
  --sh-1: 0 2px 10px rgba(27, 67, 50, 0.06), 0 12px 30px rgba(27, 67, 50, 0.06);
  --sh-2: 0 4px 16px rgba(27, 67, 50, 0.08), 0 24px 60px rgba(27, 67, 50, 0.1);
  --sh-3: 0 8px 24px rgba(27, 67, 50, 0.12), 0 40px 90px rgba(27, 67, 50, 0.16);
  --sh-dark: 0 20px 60px rgba(20, 46, 33, 0.34);

  /* motion — slow and premium throughout */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --slow: 1.1s;
}

/* ==================================================== 02 RESET + BASE */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(15.5px, 1.02vw, 17px);
  line-height: 1.72;
  font-weight: 400;
  letter-spacing: 0.002em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
canvas,
iframe { display: block; max-width: 100%; }

img { height: auto; }

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

button,
input,
select,
textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.018em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; }

::selection {
  background: var(--gold);
  color: #1a1408;
}

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

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--forest);
  color: var(--on-dark);
  transform: translateY(-160%);
  transition: transform 0.3s var(--ease);
}
.skip-link:focus-visible { transform: none; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* type scale */
.h-xl {
  font-size: clamp(2.9rem, 7.4vw, 6.5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.h-lg {
  font-size: clamp(2.05rem, 4.1vw, 3.55rem);
  letter-spacing: -0.024em;
}
.h-md { font-size: clamp(1.4rem, 2vw, 1.85rem); }

.lead {
  font-size: clamp(1.02rem, 1.2vw, 1.16rem);
  line-height: 1.8;
  color: var(--ink-2);
  max-width: 62ch;
}

.grad-gold {
  background: linear-gradient(100deg, var(--gold-light) 0%, var(--gold) 45%, var(--copper) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.grad-forest {
  background: linear-gradient(100deg, var(--moss-light) 0%, var(--moss) 50%, var(--forest) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.note {
  margin-top: 22px;
  font-size: 0.82rem;
  color: var(--ink-3);
  font-style: italic;
}

.link {
  color: var(--moss);
  font-weight: 600;
  border-bottom: 1px solid rgba(60, 127, 95, 0.35);
  padding-bottom: 2px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.link i { font-size: 0.8em; transition: transform 0.35s var(--ease); display: inline-block; }
.link:hover { color: var(--copper); border-color: var(--copper); }
.link:hover i { transform: translateX(5px); }

/* ==================================================== 03 LAYOUT HELPERS */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--maxw-wide); }

.section {
  position: relative;
  padding-block: var(--sec-y);
  isolation: isolate;
}

/* alternating paper tones keep a long page from flattening out */
.section:nth-of-type(even) { background: var(--cream-2); }
.spices { background: var(--cream-2); }
.craft { background: var(--cream); }
.industries { background: var(--cream-2); }
.orders { background: var(--cream); }
.voices { background: var(--cream-2); }
.faq { background: var(--cream); }
.contact { background: var(--cream-2); }

.section__head { margin-bottom: clamp(44px, 5vw, 76px); max-width: 46rem; }
.section__head--center {
  margin-inline: auto;
  text-align: center;
}
.section__head--center .lead { margin-inline: auto; }
.section__foot {
  margin-top: clamp(34px, 4vw, 52px);
  font-size: 0.96rem;
  color: var(--ink-3);
}

.grid-3,
.grid-4 {
  display: grid;
  gap: clamp(18px, 1.8vw, 26px);
}
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* section decoration: soft colour washes and drifting motifs */
.sdecor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}
.sdecor__wash {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
}
.sdecor__wash--sage { background: radial-gradient(circle, rgba(165, 220, 191, 0.75), transparent 68%); }
.sdecor__wash--gold { background: radial-gradient(circle, rgba(228, 192, 95, 0.55), transparent 68%); }
.sdecor__wash--copper { background: radial-gradient(circle, rgba(184, 115, 51, 0.4), transparent 68%); }
.sdecor__motif {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: auto;
  opacity: 0.5;
}
.sdecor__motif--soft { opacity: 0.28; }

/* a fine rain veil, used in the sustainability section */
.sdecor__rain {
  position: absolute;
  inset: -6% 40% 62% -6%;
  background-image: repeating-linear-gradient(
    16deg,
    rgba(120, 170, 190, 0.3) 0 1px,
    transparent 1px 9px
  );
  mask-image: radial-gradient(120% 100% at 20% 0%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 100% at 20% 0%, #000 10%, transparent 72%);
  opacity: 0.4;
  animation: rain 1.9s linear infinite;
}
@keyframes rain {
  to { transform: translate3d(-7px, 26px, 0); }
}

/* ======================================= 04 BUTTONS, CHIPS, EYEBROWS */
.btn {
  --btn-bg: var(--forest);
  --btn-fg: var(--on-dark);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 16px 28px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--sh-1);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out),
    color 0.4s var(--ease);
}
.btn i { font-size: 0.86em; transition: transform 0.45s var(--ease-out); }
.btn:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.btn:hover i:last-child { transform: translateX(5px); }
.btn:active { transform: translateY(-1px); }

/* leaf-shaped wash that unfurls from the lower-left on hover */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-hover, linear-gradient(115deg, var(--moss), var(--forest)));
  border-radius: 55% 45% 60% 40% / 50% 55% 45% 50%;
  transform: scale(0.2) translate(-40%, 60%);
  opacity: 0;
  transition: transform 0.7s var(--ease-out), opacity 0.5s var(--ease);
}
.btn:hover::after { transform: scale(1.6) translate(0, 0); opacity: 1; }

.btn--sm { padding: 12px 20px; font-size: 0.86rem; }
.btn--wide { width: 100%; justify-content: center; }

.btn--gold {
  --btn-bg: linear-gradient(115deg, var(--gold-light), var(--gold) 55%, var(--copper));
  --btn-fg: #1d1608;
  --btn-hover: linear-gradient(115deg, #f0d07c, var(--gold-light) 60%, var(--gold));
  box-shadow: 0 2px 10px rgba(184, 115, 51, 0.22), 0 16px 40px rgba(201, 162, 39, 0.24);
}
.btn--gold:hover { box-shadow: 0 6px 18px rgba(184, 115, 51, 0.28), 0 26px 60px rgba(201, 162, 39, 0.3); }

.btn--forest {
  --btn-bg: linear-gradient(115deg, var(--moss), var(--forest) 70%);
  --btn-fg: var(--on-dark);
  --btn-hover: linear-gradient(115deg, var(--moss-light), var(--moss) 70%);
}

.btn--glass {
  --btn-bg: rgba(248, 244, 236, 0.1);
  --btn-fg: var(--on-dark);
  --btn-hover: rgba(248, 244, 236, 0.2);
  border: 1px solid rgba(248, 244, 236, 0.34);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: none;
}

/* the same idea over a light backdrop */
.btn--outline {
  --btn-bg: rgba(255, 255, 255, 0.7);
  --btn-fg: var(--forest);
  --btn-hover: linear-gradient(115deg, var(--moss), var(--forest));
  border: 1px solid rgba(60, 127, 95, 0.28);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: none;
}
.btn--outline:hover { color: var(--on-dark); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.6);
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.chip i { color: var(--moss); font-size: 0.9em; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--moss);
}
.eyebrow i { font-size: 0.95em; color: var(--gold); }
.eyebrow--light { color: var(--sage); }
.eyebrow--light i { color: var(--gold-light); }
.eyebrow__leaf {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50% 50% 50% 4px;
  background: rgba(201, 162, 39, 0.18);
  border: 1px solid rgba(201, 162, 39, 0.4);
}

.badge {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 20px;
  border-radius: 50% 50% 50% 8px;
  background: linear-gradient(145deg, rgba(60, 127, 95, 0.14), rgba(60, 127, 95, 0.04));
  border: 1px solid rgba(60, 127, 95, 0.2);
  color: var(--moss);
  font-size: 1.15rem;
}
.badge--sage {
  background: linear-gradient(145deg, rgba(165, 220, 191, 0.4), rgba(165, 220, 191, 0.08));
  border-color: rgba(60, 127, 95, 0.24);
}
.badge--copper {
  background: linear-gradient(145deg, rgba(184, 115, 51, 0.2), rgba(184, 115, 51, 0.05));
  border-color: rgba(184, 115, 51, 0.3);
  color: var(--copper);
}

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tag {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(60, 127, 95, 0.08);
  border: 1px solid rgba(60, 127, 95, 0.14);
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--ink-2);
}

.round-btn {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--card);
  color: var(--forest);
  cursor: pointer;
  box-shadow: var(--sh-1);
  transition: transform 0.4s var(--ease-out), background 0.4s var(--ease), color 0.4s var(--ease);
}
.round-btn:hover { transform: translateY(-2px); background: var(--forest); color: var(--on-dark); }

/* ================================== 05 ATMOSPHERE + LOADER */
.atmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.atmos > * { position: absolute; }

.atmos__mist {
  width: 130vw;
  height: 60vh;
  left: -15vw;
  background: radial-gradient(
    60% 60% at 50% 50%,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0) 70%
  );
  filter: blur(14px);
  opacity: 0.5;
}
.atmos__mist--a { top: 6vh; animation: drift-a 78s linear infinite; }
.atmos__mist--b { top: 52vh; opacity: 0.34; animation: drift-b 106s linear infinite; }
@keyframes drift-a {
  0% { transform: translate3d(-6%, 0, 0) scaleY(1); }
  50% { transform: translate3d(8%, 2vh, 0) scaleY(1.14); }
  100% { transform: translate3d(-6%, 0, 0) scaleY(1); }
}
@keyframes drift-b {
  0% { transform: translate3d(9%, 0, 0) scaleY(1.1); }
  50% { transform: translate3d(-8%, -3vh, 0) scaleY(0.94); }
  100% { transform: translate3d(9%, 0, 0) scaleY(1.1); }
}

/* god rays: a fan of soft beams, nudged by the cursor from script.js */
.atmos__rays {
  top: -30vh;
  left: 50%;
  width: 120vw;
  height: 130vh;
  transform: translateX(-50%) rotate(var(--ray-tilt, 8deg));
  background: repeating-linear-gradient(
    97deg,
    rgba(255, 240, 200, 0.14) 0 2px,
    rgba(255, 240, 200, 0.05) 2px 26px,
    transparent 26px 84px
  );
  mask-image: radial-gradient(60% 55% at 62% 6%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(60% 55% at 62% 6%, #000 0%, transparent 76%);
  mix-blend-mode: screen;
  opacity: 0.7;
}

.atmos__canvas { inset: 0; width: 100%; height: 100%; opacity: 0.85; }

.atmos__grain {
  inset: 0;
  background-image: url('./assets/img/grain.svg');
  background-size: 180px 180px;
  opacity: 0.05;
  mix-blend-mode: multiply;
}

.atmos__vignette {
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(23, 40, 31, 0.14) 100%);
}

/* every page section paints above the fixed atmosphere */
.nav,
main,
.footer,
.progress,
.to-top,
.drawer { position: relative; z-index: 2; }
.nav { z-index: 60; }

/* ------------------------------------------------------------- loader */
.loader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 100% at 50% 30%, #2b5b45, var(--forest-ink) 70%);
  transition: opacity 0.8s var(--ease), visibility 0.8s var(--ease);
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__inner { text-align: center; padding: 30px; }
.loader__mark {
  margin: 0 auto 22px;
  width: 64px; height: 64px;
  animation: bob 3.4s var(--ease) infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-9px) rotate(2deg); }
}
.loader__word {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  color: var(--on-dark);
  letter-spacing: 0.01em;
}
.loader__tag {
  margin: 0 0 26px;
  font-family: var(--serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--sage);
}
.loader__bar {
  width: min(260px, 60vw);
  height: 2px;
  margin: 0 auto 12px;
  background: rgba(242, 246, 238, 0.16);
  overflow: hidden;
  border-radius: 2px;
}
.loader__bar span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--sage), var(--gold-light));
}
.loader__pct {
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  color: var(--on-dark-3);
}

/* ============================================= 06 NAVIGATION + DRAWER */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: clamp(14px, 1.6vw, 24px) 0;
  transition: padding 0.5s var(--ease), background 0.5s var(--ease),
    box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  padding: 10px 0;
  background: rgba(248, 244, 236, 0.78);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--line);
  box-shadow: 0 10px 40px rgba(27, 67, 50, 0.08);
}
/* Without JS nothing adds .is-stuck, so the bar would stay transparent over
   the cream sections. Give it the frosted treatment from the start instead. */
html.no-js .nav {
  padding: 10px 0;
  background: rgba(248, 244, 236, 0.86);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--line);
}
html.no-js .brand__name { color: var(--forest); }
html.no-js .brand__sub { color: var(--moss); }
html.no-js .nav__link { color: var(--ink-2); }
html.no-js .nav__burger { border-color: var(--line-strong); background: rgba(60, 127, 95, 0.07); }
html.no-js .nav__burger span { background: var(--forest); }

.nav__in {
  max-width: var(--maxw-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand__mark {
  width: 42px; height: 42px;
  border-radius: 13px;
  transition: transform 0.6s var(--ease-out);
}
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); }
.brand__text { display: grid; line-height: 1.15; }
/* The hero behind the bar is daylight, so the bar reads dark from the
   start and simply keeps its colour once it frosts over. */
.brand__name {
  font-family: var(--display);
  font-size: 1.06rem;
  color: var(--forest);
  letter-spacing: -0.01em;
  transition: color 0.5s var(--ease);
}
.brand__sub {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss);
  transition: color 0.5s var(--ease);
}
.nav.is-stuck .brand__name { color: var(--forest); }
.nav.is-stuck .brand__sub { color: var(--moss); }

.nav__links {
  position: relative;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__link {
  position: relative;
  padding: 10px 15px;
  border-radius: var(--r-pill);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color 0.4s var(--ease);
  z-index: 1;
}
.nav__link:hover,
.nav__link.is-active { color: var(--forest); }

/* the pill that slides between links */
.nav__pill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 38px;
  width: 0;
  transform: translateY(-50%);
  border-radius: var(--r-pill);
  background: rgba(60, 127, 95, 0.1);
  opacity: 0;
  transition: transform 0.55s var(--ease-out), width 0.55s var(--ease-out),
    opacity 0.4s var(--ease), background 0.5s var(--ease);
  pointer-events: none;
}
.nav.is-stuck .nav__pill { background: rgba(60, 127, 95, 0.12); }

.nav__cta { margin-left: 6px; }

.nav__burger {
  display: none;
  /* with the links and the CTA hidden, nothing else pushes it to the edge */
  margin-left: auto;
  width: 46px; height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: rgba(60, 127, 95, 0.07);
  cursor: pointer;
  padding: 12px;
}
.nav__burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--forest);
  transition: transform 0.45s var(--ease), opacity 0.3s var(--ease), background 0.4s var(--ease);
}
.nav__burger span + span { margin-top: 5px; }
.nav.is-stuck .nav__burger { border-color: var(--line-strong); background: rgba(60, 127, 95, 0.07); }
.nav.is-stuck .nav__burger span { background: var(--forest); }
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* the bar keeps its z-index over the open drawer, and the drawer is dark */
.nav.is-over-drawer { background: transparent; box-shadow: none; border-bottom-color: transparent; }
.nav.is-over-drawer .brand__name { color: var(--on-dark); }
.nav.is-over-drawer .brand__sub { color: var(--sage); }
.nav.is-over-drawer .nav__burger {
  border-color: rgba(242, 246, 238, 0.3);
  background: rgba(242, 246, 238, 0.08);
}
.nav.is-over-drawer .nav__burger span { background: var(--on-dark); }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  /* eleven destinations plus a footer: start below the bar and let the list
     scroll rather than centring it into the brand */
  justify-content: flex-start;
  gap: clamp(18px, 3vh, 30px);
  padding: 94px var(--gutter) 36px;
  background: linear-gradient(160deg, #2f6349, var(--forest-ink));
  clip-path: circle(0% at calc(100% - 46px) 46px);
  transition: clip-path 0.75s var(--ease-out);
  overflow-y: auto;
}
.drawer.is-open { clip-path: circle(150% at calc(100% - 46px) 46px); }
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__item { border-bottom: 1px solid var(--line-dark); }
.drawer__link {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: clamp(9px, 1.4vh, 15px) 2px;
  font-family: var(--display);
  font-size: clamp(1.15rem, 4.8vw, 1.8rem);
  color: var(--on-dark);
  transition: color 0.35s var(--ease), padding-left 0.4s var(--ease);
}
.drawer__link em {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--gold);
}
.drawer__link:hover { color: var(--sage); padding-left: 10px; }
.drawer__foot { display: grid; gap: 14px; justify-items: start; }
.drawer__note { margin: 0; font-size: 0.82rem; color: var(--on-dark-3); }

/* ============================================================ 07 HERO */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(110px, 14vh, 168px) clamp(74px, 10vh, 120px);
  overflow: hidden;
  isolation: isolate;
  background: #e8f1f3;
  color: var(--ink);
}
.hero > *:not(.hero__grid):not(.scroll-cue) {
  position: absolute;
  pointer-events: none;
}

/* full morning light: a clear sky washing down into warm haze over the
   ridgeline — daylight, not dusk */
.hero__sky {
  inset: 0;
  background: linear-gradient(
    to bottom,
    #a9d4e8 0%,
    #bfe0ec 14%,
    #d5eaef 28%,
    #e8f1e9 40%,
    #f4f0dc 50%,
    #fbeecb 60%,
    #fdf1d8 72%,
    #fdf6e8 100%
  );
}

.hero__sun {
  top: 30%;
  left: 68%;
  width: clamp(200px, 26vw, 400px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fffdf4 0%, #fff2cf 30%, rgba(255, 228, 170, 0.5) 54%, transparent 72%);
  filter: blur(2px);
}
.hero__glow {
  inset: auto 0 20%;
  height: 50%;
  background: radial-gradient(66% 100% at 68% 100%, rgba(255, 233, 183, 0.7), transparent 72%);
  mix-blend-mode: screen;
}

.hero__rays {
  top: -20%;
  left: 66%;
  width: 150vw;
  height: 150vh;
  transform: translateX(-50%) rotate(var(--ray-tilt, 6deg));
  background: repeating-linear-gradient(
    92deg,
    rgba(255, 250, 226, 0.55) 0 3px,
    rgba(255, 250, 226, 0.2) 3px 30px,
    transparent 30px 96px
  );
  mask-image: radial-gradient(52% 60% at 50% 30%, #000, transparent 74%);
  -webkit-mask-image: radial-gradient(52% 60% at 50% 30%, #000, transparent 74%);
  opacity: 0.7;
}

/* Ridges: wider than the frame so parallax never exposes an edge, and given
   explicit heights so the horizon sits low enough to leave the sunrise
   visible above it. The artwork has preserveAspectRatio="none" — stretching
   it is the intended behaviour. */
.hero__ridge {
  left: -8%;
  width: 116%;
  max-width: none;
}
.hero__ridge--far {
  bottom: 29%;
  height: clamp(140px, 21vh, 250px);
  opacity: 0.85;
}
.hero__ridge--mid {
  bottom: 9%;
  height: clamp(200px, 31vh, 370px);
}
.hero__ridge--near {
  bottom: -8%;
  height: clamp(250px, 39vh, 460px);
}

.hero__cloud {
  left: -10%;
  width: 120%;
  height: 18vh;
  background: linear-gradient(to top, rgba(255, 253, 246, 0.82), rgba(255, 253, 246, 0) 82%);
  filter: blur(12px);
}
.hero__cloud--a { bottom: 28%; opacity: 0.8; animation: drift-a 92s linear infinite; }
.hero__cloud--b { bottom: 10%; height: 14vh; opacity: 0.66; animation: drift-b 74s linear infinite; }

.hero__birds {
  top: 17%;
  left: 12%;
  width: clamp(160px, 20vw, 300px);
  opacity: 0.5;
  animation: fly 46s linear infinite;
}
@keyframes fly {
  0% { transform: translate3d(-10vw, 4vh, 0) scale(0.8); opacity: 0; }
  8% { opacity: 0.7; }
  84% { opacity: 0.55; }
  100% { transform: translate3d(78vw, -8vh, 0) scale(1.05); opacity: 0; }
}

/* Morning haze over the left of the frame. Light, not dark: it lifts the
   backdrop behind the type instead of shading it, so the sunlit right side
   of the landscape stays exactly as bright as it should be. */
.hero__haze {
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(253, 250, 243, 0.82) 0%,
      rgba(253, 250, 243, 0.6) 30%,
      rgba(253, 250, 243, 0.24) 52%,
      transparent 68%
    ),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent 22%);
  /* lift off the foreground: the type needs the haze, the planted slope
     underneath it does not */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 54%, rgba(0, 0, 0, 0.4) 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 54%, rgba(0, 0, 0, 0.4) 78%, transparent 100%);
}

/* the WebGL foreground. It sits above the ridges and below the haze, so
   the morning light still falls across it. */
.hero__fx { inset: 0; z-index: 1; }
.hero__fx canvas {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.6s var(--ease);
}
.hero__fx.is-ready canvas { opacity: 1; }
/* once the 3D slope is drawn it becomes the foreground, so the painted one
   steps back to being the middle distance */
.hero.has-fx .hero__ridge--near { opacity: 0; transition: opacity 1.6s var(--ease); }

.hero__haze { z-index: 2; }

.hero__grid {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
}

.hero__in { max-width: 40rem; }
.hero__title {
  margin: 0 0 24px;
  /* the two-column hero gives the headline less room than a full-bleed one */
  font-size: clamp(2.7rem, 5.6vw, 4.9rem);
  color: var(--forest-ink);
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span {
  display: block;
  text-shadow: 0 2px 26px rgba(253, 250, 243, 0.85);
}
/* the page-wide gold reads washed out against daylight — deepen it here */
.hero__title .grad-gold {
  background: linear-gradient(100deg, #d8ab2c 0%, #b8860b 46%, #92601d 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero__sub {
  max-width: 34rem;
  font-size: clamp(1.04rem, 1.35vw, 1.26rem);
  line-height: 1.78;
  color: var(--ink-2);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 34px 0 30px;
}
.hero__trust { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__trust .chip {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(23, 40, 31, 0.14);
  color: var(--ink-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* the export desk: what actually ships, over the facts about it */
.hero__panel {
  position: relative;
  padding: clamp(18px, 1.6vw, 24px);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 12px rgba(27, 67, 50, 0.06), 0 28px 70px rgba(27, 67, 50, 0.14);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}
.hpanel__label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moss);
}
.hpanel__label i { color: var(--gold); }

.hpanel__grid {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.hprod {
  display: grid;
  gap: 2px;
  text-align: center;
}
.hprod img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--r-sm);
  margin-bottom: 9px;
  box-shadow: 0 8px 22px rgba(27, 67, 50, 0.16);
  transition: transform 0.6s var(--ease-out);
}
.hero__panel:hover .hprod img { transform: translateY(-3px); }
.hprod__name {
  font-family: var(--display);
  font-size: 0.94rem;
  line-height: 1.2;
  color: var(--forest);
}
.hprod__note { font-size: 0.7rem; color: var(--ink-3); }

.hpanel__facts {
  margin: 0;
  display: grid;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.hfact dt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hfact dt i { color: var(--moss); }
.hfact dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--ink);
}
.hfact dd span {
  display: block;
  margin-top: 2px;
  font-family: var(--sans);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--ink-3);
}

.hpanel__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--forest);
  border-bottom: 1px solid rgba(60, 127, 95, 0.35);
  padding-bottom: 2px;
  transition: gap 0.4s var(--ease-out), color 0.3s var(--ease);
}
.hpanel__cta:hover { gap: 14px; color: var(--moss); }

.scroll-cue {
  position: absolute;
  right: clamp(18px, 3vw, 44px);
  bottom: 26px;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 10px;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  /* it sits low on the frame, over the near ridge */
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 12px rgba(10, 33, 22, 0.45);
}
.scroll-cue__rail {
  width: 1px;
  height: 54px;
  background: linear-gradient(rgba(255, 255, 255, 0.7), transparent);
  position: relative;
  overflow: hidden;
}
.scroll-cue__rail::after {
  content: '';
  position: absolute;
  top: -30%;
  left: 0;
  width: 100%;
  height: 40%;
  background: var(--gold-light);
  animation: cue 2.6s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: translateY(-60%); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(280%); opacity: 0; }
}

/* ========================================================= 08 MARQUEE */
.marquee {
  position: relative;
  z-index: 3;
  padding: 22px 0;
  background: linear-gradient(90deg, var(--forest-deep), var(--forest) 50%, var(--forest-deep));
  border-block: 1px solid rgba(201, 162, 39, 0.24);
  overflow: hidden;
}
.marquee__row { display: flex; overflow: hidden; }
.marquee__row + .marquee__row { margin-top: 10px; }
.marquee__track {
  display: flex;
  gap: 46px;
  flex: 0 0 auto;
  padding-right: 46px;
  will-change: transform;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 46px;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.9vw, 1.6rem);
  font-style: italic;
  color: rgba(242, 246, 238, 0.82);
  white-space: nowrap;
}
.marquee__item::after {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.85;
}
.marquee__row--alt .marquee__item { color: rgba(165, 220, 191, 0.55); font-size: 0.9em; }

/* ======================================================= 09 HERITAGE */
.story__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(34px, 5vw, 80px);
  align-items: start;
}
.story__meta { display: grid; gap: 18px; margin-top: 36px; }
.mini {
  padding: 22px 24px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  box-shadow: var(--sh-1);
}
.mini__k {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--moss);
  font-weight: 600;
}
.mini__k i { color: var(--gold); }
.mini__v { margin: 0; font-size: 0.94rem; color: var(--ink-2); }

.story__stack { display: grid; gap: 26px; position: sticky; top: 110px; }

/* framed artwork with a mask reveal, driven by ScrollTrigger */
.frame {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--cream-3);
  box-shadow: var(--sh-2);
  aspect-ratio: 4 / 5;
}
.frame--wide { aspect-ratio: 4 / 3; }
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.6s var(--ease-out);
}
.frame.is-in img { transform: scale(1); }
.frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 33, 22, 0.72), transparent 52%);
  pointer-events: none;
}
.frame__cap {
  position: absolute;
  left: 20px; right: 20px; bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  color: rgba(242, 246, 238, 0.94);
  z-index: 1;
}
.frame__cap i { color: var(--gold-light); }

.pull {
  margin: 0;
  padding: 28px 30px;
  border-radius: var(--r-md);
  background: linear-gradient(140deg, var(--forest), var(--forest-deep));
  color: var(--on-dark);
  font-family: var(--serif);
  font-size: clamp(1.16rem, 1.7vw, 1.5rem);
  font-style: italic;
  line-height: 1.5;
  box-shadow: var(--sh-2);
}
.pull span {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sage);
}
.pull--wide {
  margin-top: clamp(40px, 5vw, 70px);
  text-align: center;
  padding: clamp(30px, 4vw, 52px);
  background: rgba(242, 246, 238, 0.06);
  border: 1px solid var(--line-dark);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* =============================================== 10 COFFEE COLLECTION */
/* four products, two by two: each card stays large enough to be a portrait
   of the bean rather than a thumbnail */
.ccards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(20px, 2.2vw, 34px);
}
.ccard--wide { grid-column: span 2; }
@media (max-width: 620px) {
  .ccards { grid-template-columns: 1fr; }
}
.ccard {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform 0.7s var(--ease-out), box-shadow 0.7s var(--ease-out);
}
.ccard:hover { transform: translateY(-8px); box-shadow: var(--sh-3); }
.ccard__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--forest-deep);
}
/* above the phone break the card lies on its side: the bean on the left,
   the specification on the right */
@media (min-width: 621px) {
  .ccard { display: grid; grid-template-columns: 0.92fr 1.08fr; }
  .ccard__media { aspect-ratio: auto; height: 100%; min-height: 320px; }
  .ccard__media::after {
    background: linear-gradient(to right, transparent 55%, rgba(10, 33, 22, 0.35));
  }
  .ccard__body { padding: 30px 30px 32px; align-self: center; }
}
.ccard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.5s var(--ease-out), filter 0.8s var(--ease);
}
.ccard:hover .ccard__media img { transform: scale(1.07); }
.ccard__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 33, 22, 0.55), transparent 60%);
}
.ccard__body { padding: 24px 24px 28px; }
.ccard__kind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 600;
}
.ccard__name { margin: 0 0 10px; font-size: 1.3rem; }
.ccard__desc { margin: 0; font-size: 0.92rem; color: var(--ink-2); }
.ccard__facts {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 9px;
  font-size: 0.85rem;
  color: var(--ink-3);
}
.ccard__facts li { display: flex; align-items: center; gap: 10px; }
.ccard__facts i { color: var(--moss); width: 16px; }

/* ==================================================== 11 INDIAN SPICES */
.sgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}
.scard {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.scard:hover,
.scard:focus-visible { transform: translateY(-6px); box-shadow: var(--sh-2); }
.scard__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.scard__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.scard:hover .scard__media img { transform: scale(1.08) rotate(1deg); }
/* an organic paper edge where the image meets the card */
.scard__media::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px 0;
  height: 34px;
  background: var(--card);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.scard__body { padding: 6px 20px 22px; }
.scard__name { margin: 0 0 6px; font-size: 1.08rem; }
.scard__desc { margin: 0; font-size: 0.85rem; color: var(--ink-3); }
.scard--ask {
  display: grid;
  align-content: center;
  background: linear-gradient(150deg, rgba(60, 127, 95, 0.1), rgba(201, 162, 39, 0.1));
  border-style: dashed;
  border-color: var(--line-strong);
  box-shadow: none;
}
.scard--ask .scard__body { padding: 26px 24px; }
.scard--ask .scard__desc { margin-bottom: 18px; }

/* ============================================================ 12 CARDS */
.card {
  position: relative;
  padding: 32px 30px 34px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  overflow: hidden;
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out),
    border-color 0.6s var(--ease);
}
.card--tight { padding: 26px 24px 28px; }
.card::before {
  content: '';
  position: absolute;
  inset: -40% 55% 55% -40%;
  background: radial-gradient(circle, rgba(165, 220, 191, 0.35), transparent 70%);
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  pointer-events: none;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-3);
  border-color: rgba(60, 127, 95, 0.24);
}
.card:hover::before { opacity: 1; }
.card__no {
  position: absolute;
  top: 22px; right: 26px;
  font-family: var(--display);
  font-size: 2.2rem;
  color: rgba(23, 40, 31, 0.07);
}
.card__title { margin: 0 0 10px; font-size: 1.2rem; }
.card__text { margin: 0; font-size: 0.92rem; color: var(--ink-2); }

/* ========================================================== 13 JOURNEY */
.journey {
  position: relative;
  padding-block: var(--sec-y);
  background: linear-gradient(180deg, var(--forest-ink), #265440 45%, var(--forest-ink));
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}
.journey::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('./assets/img/grain.svg');
  background-size: 180px;
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.journey__head { margin-inline: auto; }
.journey__head .lead { color: var(--on-dark-2); margin-inline: auto; }

/* While the section is pinned this block owns the viewport, so it centres
   its own content instead of leaving a hole underneath. */
.jstage {
  position: relative;
  margin-top: clamp(30px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 2vw, 30px);
}
@media (min-width: 901px) {
  .jstage { min-height: 72vh; }
}
.jviewport { overflow: hidden; }
.jtrack {
  display: flex;
  gap: clamp(20px, 2.4vw, 34px);
  padding-inline: var(--gutter);
  will-change: transform;
}
.jstep {
  position: relative;
  flex: 0 0 clamp(280px, 30vw, 400px);
  padding: 26px;
  border-radius: var(--r-lg);
  background: rgba(242, 246, 238, 0.05);
  border: 1px solid var(--line-dark);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.jstep__no {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--display);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.jstep__media {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 10 / 7;
  margin-bottom: 20px;
  background: #234e3a;
}
.jstep__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease-out);
}
.jstep:hover .jstep__media img { transform: scale(1.05); }
.jstep__t { margin: 0 0 8px; font-size: 1.34rem; color: var(--cream); }
.jstep__d { margin: 0; font-size: 0.9rem; color: var(--on-dark-2); }

/* the connective thread between steps */
.jstep::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(-1 * clamp(20px, 2.4vw, 34px));
  width: clamp(20px, 2.4vw, 34px);
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.6), transparent);
}
.jstep:last-child::after { display: none; }

.jhint {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: var(--maxw);
  margin: 26px auto 0;
  padding-inline: var(--gutter);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.jhint i { color: var(--gold); animation: nudge 2.4s var(--ease) infinite; }
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}
.jbar {
  flex: 1;
  height: 2px;
  background: rgba(242, 246, 238, 0.14);
  border-radius: 2px;
  overflow: hidden;
}
.jbar span {
  display: block;
  width: 8%;
  height: 100%;
  background: linear-gradient(90deg, var(--sage), var(--gold));
}

/* =================================================== 14 SUSTAINABILITY */

/* The shade tree takes the illustration's place when WebGL is available.
   The frame keeps its paper ground, so the tree reads as drawn on it. */
.sustain__tree {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.sustain__tree.is-ready { opacity: 1; }
.sustain__tree canvas { width: 100%; height: 100%; }
.frame.is-3d {
  background: linear-gradient(178deg, var(--cream) 0%, var(--cream-2) 58%, var(--cream-3) 100%);
}
.frame.is-3d img { opacity: 0; transition: opacity 0.9s var(--ease); }
/* the caption scrim is sized for a photograph; over the tree it only has to
   carry one line of text, so it stops well short of the coffee underneath */
.frame.is-3d::after {
  background: linear-gradient(to top, rgba(10, 33, 22, 0.74),
                              rgba(10, 33, 22, 0.34) 16%, transparent 34%);
}

.sustain__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
}
.pillars { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 8px; }
.pillar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding: 16px 18px;
  border-radius: var(--r-md);
  transition: background 0.5s var(--ease), transform 0.5s var(--ease-out);
}
.pillar:hover { background: rgba(255, 255, 255, 0.7); transform: translateX(5px); }
.pillar__ico {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50% 50% 50% 6px;
  background: linear-gradient(145deg, rgba(165, 220, 191, 0.45), rgba(60, 127, 95, 0.1));
  border: 1px solid rgba(60, 127, 95, 0.2);
  color: var(--moss);
}
.pillar__t { margin: 0 0 4px; font-weight: 600; font-size: 1rem; }
.pillar__d { margin: 0; font-size: 0.88rem; color: var(--ink-3); }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(18px, 2vw, 28px);
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
}
.stat { text-align: center; }
.stat__ring {
  position: relative;
  width: 96px;
  margin: 0 auto 16px;
}
.stat__ring svg { width: 100%; height: auto; transform: rotate(-90deg); }
.stat__arc {
  stroke-dasharray: 276;
  stroke-dashoffset: 276;
  transition: stroke-dashoffset 1.8s var(--ease-out);
}
.stat.is-in .stat__arc { stroke-dashoffset: 74; }
.stat__ring i {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  color: var(--moss);
}
.stat__num {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  line-height: 1;
  color: var(--forest);
}
.stat__label { margin: 8px 0 2px; font-weight: 600; font-size: 0.95rem; }
.stat__sub { margin: 0; font-size: 0.8rem; color: var(--ink-3); }

/* ========================================================== 15 QUALITY */
.quality__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
}
.checks { display: grid; gap: 4px; margin-top: 32px; }
.check {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  align-items: start;
  padding: 12px 6px;
}
.check svg { width: 34px; height: 34px; }
.check__path {
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  transition: stroke-dashoffset 0.9s var(--ease-out) 0.15s;
}
.check.is-in .check__path { stroke-dashoffset: 0; }
.check__t { margin: 0 0 3px; font-weight: 600; font-size: 0.98rem; }
.check__d { margin: 0; font-size: 0.86rem; color: var(--ink-3); }

/* ========================================================== 16 FARMERS */
.farmers {
  position: relative;
  padding-block: var(--sec-y);
  background:
    radial-gradient(80% 60% at 20% 0%, rgba(60, 127, 95, 0.5), transparent 70%),
    linear-gradient(180deg, #2a5539, var(--forest-ink));
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}
.farmers__head { max-width: 44rem; }
.farmers__head .lead { color: var(--on-dark-2); }

.fgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  align-items: end;
}
.fportrait {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: var(--sh-dark);
  background: #14351f;
}
.fportrait--tall { aspect-ratio: 3 / 4.6; }
.fportrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.8s var(--ease-out), filter 0.9s var(--ease);
  filter: saturate(0.96);
}
.fportrait:hover img { transform: scale(1.01); filter: saturate(1.06); }
.fportrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 31, 21, 0.9) 4%, rgba(11, 31, 21, 0.42) 30%, transparent 62%);
}
.fportrait figcaption {
  position: absolute;
  left: 20px; right: 18px; bottom: 18px;
  z-index: 1;
}
.fportrait__t {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--cream);
}
.fportrait__d { margin: 0; font-size: 0.8rem; color: var(--on-dark-3); }

/* =========================================================== 17 WHY US */
.why__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(34px, 5vw, 76px);
  align-items: start;
}
.why__aside { position: sticky; top: 116px; }
.why__ring { position: relative; width: min(230px, 60%); margin-top: 40px; }
.why__ring svg { width: 100%; height: auto; }
.why__arc {
  stroke-dasharray: 540;
  stroke-dashoffset: 540;
  transition: stroke-dashoffset 2.2s var(--ease-out);
}
.why__ring.is-in .why__arc { stroke-dashoffset: 108; }
.why__core {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--display);
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--forest);
}

.why__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.why__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 22px;
  border-radius: var(--r-md);
  border-bottom: 1px solid var(--line);
  transition: background 0.5s var(--ease), transform 0.5s var(--ease-out);
}
.why__item:hover { background: rgba(255, 255, 255, 0.7); transform: translateX(6px); }
.why__no {
  font-family: var(--display);
  font-size: 1.02rem;
  color: var(--gold);
  min-width: 26px;
}
.why__txt { font-weight: 600; font-size: 1rem; display: grid; gap: 3px; }
.why__txt small { font-weight: 400; font-size: 0.85rem; color: var(--ink-3); }
.why__ico {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50% 50% 50% 6px;
  background: rgba(60, 127, 95, 0.09);
  color: var(--moss);
  font-size: 0.95rem;
}

/* ================================================= 18 GLOBAL PRESENCE */
.reach {
  position: relative;
  padding-block: var(--sec-y);
  background: linear-gradient(180deg, var(--forest-ink), #235039 60%, var(--forest-ink));
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}
.reach__head { max-width: 46rem; }
.reach__head .lead { color: var(--on-dark-2); }

.reach__map { position: relative; }
.reach__stage {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: radial-gradient(70% 90% at 50% 40%, rgba(60, 127, 95, 0.3), transparent 70%);
  transition: opacity 0.8s var(--ease);
}
.reach__dots { width: 100%; height: auto; opacity: 1; }
.reach__routes { position: absolute; inset: 0; width: 100%; height: 100%; }
.route {
  fill: none;
  stroke: url(#routeGrad);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 6 10;
  animation: flow 2.6s linear infinite;
  opacity: 0.9;
}
@keyframes flow { to { stroke-dashoffset: -64; } }
.reach__pin circle { animation: pulse-pin 3s var(--ease) infinite; }
@keyframes pulse-pin {
  0%, 100% { opacity: 0.7; r: 5; }
  50% { opacity: 1; r: 7.5; }
}
.reach__label text {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  fill: var(--sage);
  letter-spacing: 0.04em;
}

/* when WebGL takes over, the flat map steps aside but stays for print */
.reach__map.is-3d .reach__stage {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.reach__globe {
  position: relative;
  aspect-ratio: 16 / 10;
  max-height: 74vh;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.reach__globe.is-ready { opacity: 1; }
.reach__globe canvas { width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.reach__globe.is-dragging canvas { cursor: grabbing; }
.reach__labels { position: absolute; inset: 0; pointer-events: none; }
.reach__label3d {
  position: absolute;
  top: 0; left: 0;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(20, 48, 35, 0.66);
  border: 1px solid rgba(165, 220, 191, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--on-dark);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.reach__label3d.is-home { border-color: rgba(201, 162, 39, 0.55); color: var(--gold-light); }
.reach__hint {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-3);
}
.reach__hint i { color: var(--gold); margin-right: 6px; }

.reach__markets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 26px;
}
.reach__markets .chip {
  background: rgba(242, 246, 238, 0.07);
  border-color: var(--line-dark);
  color: var(--on-dark-2);
}
.reach__markets .chip i { color: var(--gold-light); }
.reach__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  justify-content: center;
  margin-top: 22px;
  font-size: 0.82rem;
  color: var(--on-dark-3);
}
.reach__legend b { color: var(--sage); font-weight: 600; }

/* ====================================================== 19 ORDER SIZES */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(20px, 2.2vw, 30px);
  align-items: stretch;
}
.plan {
  display: grid;
  gap: 20px;
  align-content: start;
  padding: 32px 30px;
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.plan--featured {
  position: relative;
  background: linear-gradient(165deg, var(--forest), var(--forest-deep));
  color: var(--on-dark);
  border-color: rgba(201, 162, 39, 0.4);
  box-shadow: var(--sh-3);
}
.plan__badge {
  position: absolute;
  top: 18px; right: 18px;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  background: linear-gradient(115deg, var(--gold-light), var(--gold));
  color: #1d1608;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.plan__name { margin: 0 0 6px; font-size: 1.45rem; }
.plan__for { margin: 0; font-size: 0.88rem; color: var(--ink-3); }
.plan--featured .plan__for { color: var(--on-dark-3); }
.plan__qty {
  margin: 0;
  padding-block: 16px;
  border-block: 1px solid var(--line);
  font-family: var(--display);
  font-size: 1.3rem;
}
.plan--featured .plan__qty { border-color: var(--line-dark); }
.plan__qty span {
  display: block;
  margin-top: 5px;
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--ink-3);
}
.plan--featured .plan__qty span { color: var(--on-dark-3); }
.plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 0.9rem; }
.plan__list li { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start; }
.plan__list i { color: var(--moss); margin-top: 5px; font-size: 0.8em; }
.plan--featured .plan__list i { color: var(--sage); }
.plan__list .is-off { color: var(--ink-3); opacity: 0.7; }
.plan__list .is-off i { color: var(--ink-3); }

/* ===================================================== 20 TESTIMONIALS */
.tst__viewport { overflow: hidden; }
.tst__track {
  display: flex;
  gap: clamp(18px, 2vw, 26px);
  transition: transform 0.85s var(--ease-out);
}
.tst__card {
  flex: 0 0 calc((100% - 2 * clamp(18px, 2vw, 26px)) / 3);
  display: grid;
  gap: 22px;
  align-content: space-between;
  padding: 30px 28px;
  border-radius: var(--r-lg);
  background:
    linear-gradient(150deg, rgba(165, 220, 191, 0.16), rgba(255, 255, 255, 0.9) 45%),
    var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}
.tst__mark {
  display: block;
  font-family: var(--display);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--gold);
  opacity: 0.6;
}
.tst__quote {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink);
}
.tst__who {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.tst__flag {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50% 50% 50% 6px;
  background: rgba(60, 127, 95, 0.1);
  color: var(--moss);
}
.tst__role { margin: 0; font-weight: 600; font-size: 0.92rem; }
.tst__loc { margin: 0; font-size: 0.78rem; color: var(--ink-3); }
.tst__stars { color: var(--gold); font-size: 0.82rem; letter-spacing: 0.06em; }
.tst__nav { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.tst__dots { display: flex; gap: 8px; margin-left: 10px; }
.tst__dot {
  width: 9px; height: 9px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--line-strong);
  cursor: pointer;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}
.tst__dot.is-on { background: var(--moss); transform: scale(1.35); }

/* ============================================================== 21 FAQ */
.faq__grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(34px, 5vw, 76px);
  align-items: start;
}
.faq__aside { position: sticky; top: 116px; }
.faq__list { display: grid; gap: 12px; }
.faq__item {
  border-radius: var(--r-md);
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.faq__item.is-open { box-shadow: var(--sh-2); border-color: rgba(60, 127, 95, 0.24); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 22px 24px;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--display);
  font-size: 1.06rem;
  cursor: pointer;
  color: var(--ink);
}
.faq__ico {
  position: relative;
  flex: 0 0 22px;
  width: 22px; height: 22px;
}
.faq__ico::before,
.faq__ico::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 2px;
  border-radius: 2px;
  background: var(--moss);
  transform: translate(-50%, -50%);
  transition: transform 0.5s var(--ease-out);
}
.faq__ico::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item.is-open .faq__ico::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__a {
  height: 0;
  overflow: hidden;
  transition: height 0.6s var(--ease-out);
}
.faq__a-in {
  padding: 0 24px 24px;
  font-size: 0.93rem;
  color: var(--ink-2);
}

/* ================================================= 22 CONTACT + FORM */
.contact__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(34px, 5vw, 70px);
  align-items: start;
}
.info { display: grid; gap: 6px; margin-top: 34px; }
.info__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
}
.info__ico {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50% 50% 50% 6px;
  background: rgba(60, 127, 95, 0.09);
  color: var(--moss);
}
.info__k {
  margin: 0 0 2px;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.info__v { margin: 0; font-weight: 600; font-size: 0.98rem; }
.info__v a { border-bottom: 1px solid rgba(60, 127, 95, 0.4); }
.info__v a:hover { color: var(--moss); }

.mapcard {
  margin: 30px 0 0;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--cream-3);
  box-shadow: var(--sh-1);
}
.mapcard iframe {
  width: 100%;
  height: 260px;
  border: 0;
  filter: saturate(0.85) contrast(1.02);
}
.mapcard figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  font-size: 0.84rem;
  color: var(--ink-2);
  background: rgba(255, 255, 255, 0.7);
}
.mapcard figcaption i { color: var(--moss); }
.mapcard figcaption a {
  margin-left: auto;
  font-weight: 600;
  color: var(--moss);
  border-bottom: 1px solid rgba(60, 127, 95, 0.35);
}

.form {
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
}
.form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field { position: relative; }
.field--full { grid-column: 1 / -1; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 22px 16px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--cream);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease);
  appearance: none;
}
.field textarea { min-height: 132px; resize: vertical; }
/* the caret is drawn, not native, so it matches the rest of the form */
.field select {
  cursor: pointer;
  padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, var(--moss) 50%),
    linear-gradient(135deg, var(--moss) 50%, transparent 50%);
  background-position: calc(100% - 22px) 25px, calc(100% - 16px) 25px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field label {
  position: absolute;
  left: 17px;
  top: 15px;
  font-size: 0.94rem;
  color: var(--ink-3);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.32s var(--ease), color 0.32s var(--ease);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--moss);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(60, 127, 95, 0.12);
}
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label,
.field input:focus + label,
.field textarea:focus + label,
.field select:focus + label,
.field select:valid + label {
  transform: translateY(-11px) scale(0.76);
  color: var(--moss);
}
.field__err {
  margin: 5px 0 0;
  min-height: 1em;
  font-size: 0.76rem;
  color: #b4442e;
}
.field.is-bad input,
.field.is-bad select,
.field.is-bad textarea { border-color: #c05540; }

.form__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
}
.form__hint { margin: 0; font-size: 0.8rem; color: var(--ink-3); max-width: 30ch; }
.form__ok {
  display: none;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
  padding: 16px 18px;
  border-radius: var(--r-sm);
  background: rgba(60, 127, 95, 0.1);
  border: 1px solid rgba(60, 127, 95, 0.26);
  font-size: 0.9rem;
}
.form__ok.is-on { display: flex; }
.form__ok i { color: var(--moss); font-size: 1.1rem; }
/* same box, red, for a delivery failure */
.form__ok.is-bad {
  background: rgba(192, 85, 64, 0.1);
  border-color: rgba(192, 85, 64, 0.3);
}
.form__ok.is-bad i { color: #c05540; }

/* the spam trap: off-screen, never focusable, still fillable by a bot */
.hp {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* while a form is in flight */
.is-sending { opacity: 0.65; pointer-events: none; }

/* ========================================================== 23 FOOTER */
.footer {
  position: relative;
  padding-top: clamp(120px, 14vw, 190px);
  background: linear-gradient(180deg, #23513b, var(--forest-ink) 60%, #1b402f);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}
.footer__trees {
  position: absolute;
  top: 0; left: -6%;
  width: 112%;
  max-width: none;
  opacity: 0.6;
  z-index: -1;
}
.footer__fog {
  position: absolute;
  top: 0; left: -10%;
  width: 120%;
  height: 40%;
  background: linear-gradient(to bottom, rgba(165, 220, 191, 0.12), transparent 70%);
  filter: blur(20px);
  z-index: -1;
  animation: drift-b 96s linear infinite;
}

.footer__cta {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto clamp(50px, 6vw, 80px);
}
.footer__cta .h-lg { color: var(--cream); }
.footer__cta .lead { color: var(--on-dark-2); margin-inline: auto; }
.footer__cta .eyebrow { justify-content: center; }
.footer__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 26px; }

.news {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 26px 30px;
  margin-bottom: clamp(48px, 6vw, 76px);
  border-radius: var(--r-lg);
  background: rgba(242, 246, 238, 0.05);
  border: 1px solid var(--line-dark);
}
.news__t { margin: 0 0 4px; font-family: var(--display); font-size: 1.22rem; color: var(--cream); }
.news__d { margin: 0; font-size: 0.88rem; color: var(--on-dark-3); }
.news__row { display: flex; gap: 10px; }
.news__row input {
  padding: 13px 18px;
  min-width: min(300px, 58vw);
  border-radius: var(--r-pill);
  border: 1px solid var(--line-dark);
  background: rgba(16, 42, 30, 0.42);
  color: var(--on-dark);
}
.news__row input::placeholder { color: var(--on-dark-3); }
.news__row input:focus { outline: none; border-color: var(--sage); }
.news__ok {
  display: none;
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.84rem;
  color: var(--sage);
}
.news__ok.is-on { display: block; }
.news__ok.is-bad { color: #e5a08f; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 3vw, 50px);
  padding-bottom: 50px;
}
.footer__brand p {
  margin: 20px 0 14px;
  font-size: 0.9rem;
  color: var(--on-dark-2);
  max-width: 34ch;
}
.footer__brand .brand__name { color: var(--cream); }
.footer__tag {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--gold-light);
}
.socials { display: flex; gap: 10px; margin-top: 22px; }
.social {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50% 50% 50% 6px;
  background: rgba(242, 246, 238, 0.07);
  border: 1px solid var(--line-dark);
  color: var(--on-dark-2);
  transition: transform 0.45s var(--ease-out), background 0.45s var(--ease), color 0.45s var(--ease);
}
.social:hover { transform: translateY(-3px); background: var(--gold); color: #1d1608; }

.footer__col h4 {
  margin: 0 0 16px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__col a,
.footer__docs li {
  font-size: 0.88rem;
  color: var(--on-dark-2);
  transition: color 0.35s var(--ease), transform 0.35s var(--ease);
}
.footer__col a:hover { color: var(--gold-light); transform: translateX(3px); display: inline-block; }
.footer__docs li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.footer__docs i { color: var(--moss-light); margin-top: 5px; font-size: 0.8em; }

.footer__word {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.4rem, 15vw, 13rem);
  line-height: 0.9;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(165, 220, 191, 0.16);
  letter-spacing: 0.04em;
  user-select: none;
}

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 30px;
  border-top: 1px solid var(--line-dark);
  font-size: 0.82rem;
  color: var(--on-dark-3);
}
.footer__bar p { margin: 0; }
.footer__bar nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__bar a:hover { color: var(--gold-light); }

/* ============================================= 24 PROGRESS + TO TOP */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 70;
  background: rgba(23, 40, 31, 0.08);
}
.progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--moss), var(--sage) 55%, var(--gold));
}

.to-top {
  position: fixed;
  right: clamp(16px, 2vw, 30px);
  bottom: clamp(16px, 2vw, 30px);
  z-index: 50;
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50% 50% 50% 8px;
  background: linear-gradient(140deg, var(--moss), var(--forest));
  color: var(--on-dark);
  cursor: pointer;
  box-shadow: var(--sh-2);
  opacity: 0;
  transform: translateY(18px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease-out);
}
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { transform: translateY(-3px); }

/* ============================================ 25 REVEALS + MOTION */
/* Pre-states live in CSS so nothing flashes; ScrollTrigger (or an
   IntersectionObserver fallback) simply adds .is-in. */
html.js [data-reveal] {
  opacity: 0;
  transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out),
    filter var(--slow) var(--ease-out);
  transition-delay: var(--rd, 0ms);
  will-change: transform, opacity;
}
html.js [data-reveal='up'] { transform: translate3d(0, 42px, 0); }
html.js [data-reveal='left'] { transform: translate3d(-42px, 0, 0); }
html.js [data-reveal='right'] { transform: translate3d(38px, 0, 0); }
html.js [data-reveal='scale'] { transform: scale(0.92); }
html.js [data-reveal='blur'] { filter: blur(14px); transform: scale(1.03); }

html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

/* headline word split, filled in by script.js */
.word { display: inline-block; overflow: hidden; vertical-align: top; }
.word > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease-out);
  transition-delay: var(--wd, 0ms);
}
.is-in .word > span,
.word.is-in > span { transform: none; }

/* the hero intro is driven by GSAP; these are the resting states */
html.js .hero__title .line > span,
html.js [data-hero] { opacity: 0; }
html.no-js .loader { display: none; }

/* ==================================================== 26 RESPONSIVE */
@media (max-width: 1180px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .fgrid { grid-template-columns: repeat(2, 1fr); }
  .fportrait--tall { aspect-ratio: 3 / 4; }
  .tst__card { flex-basis: calc((100% - clamp(18px, 2vw, 26px)) / 2); }
}

/* the full bar needs ~1140px before the brand and the links start to crowd
   each other; below that it becomes the burger and the drawer */
@media (max-width: 1140px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__cta { display: none; }
}

/* a short laptop screen: tighten the hero so the trust chips still land
   above the fold rather than being cut in half by it */
@media (min-width: 1081px) and (max-height: 830px) {
  .hero { padding-block: clamp(92px, 12vh, 124px) clamp(50px, 7vh, 78px); }
  .hero__title { font-size: clamp(2.5rem, 4.5vw, 4.1rem); margin-bottom: 20px; }
  .hero__actions { margin: 26px 0 22px; }
  .hpanel__grid { margin-bottom: 16px; }
  .hpanel__facts { padding-top: 14px; gap: 10px; }
}

/* below a wide desktop the two hero columns stop fitting side by side:
   the copy takes the full width and the export desk sits under it */
@media (max-width: 1080px) {
  .hero { padding-block: clamp(112px, 15vh, 170px) clamp(70px, 9vh, 110px); }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__in { max-width: 46rem; }
  .hero__panel { max-width: 34rem; }
  .hero__haze {
    background:
      linear-gradient(to bottom, rgba(253, 250, 243, 0.88) 0%, rgba(253, 250, 243, 0.6) 55%, rgba(253, 250, 243, 0.32) 100%);
  }
}

@media (max-width: 1000px) {
  .story__grid,
  .sustain__grid,
  .quality__grid,
  .why__grid,
  .faq__grid,
  .contact__grid { grid-template-columns: 1fr; }
  .story__stack,
  .why__aside,
  .faq__aside { position: static; }
  .quality__grid > figure { order: -1; }
}

@media (max-width: 760px) {
  :root { --sec-y: clamp(66px, 12vw, 96px); }
  /* the hero grows past the viewport on a phone, so the 3D slope is anchored
     to the foot of it rather than stretched over the whole thing, and the
     section keeps enough room below the panel to show it */
  .hero { min-height: auto; padding-bottom: clamp(140px, 26svh, 250px); }
  .hero__ridge--far { bottom: 33%; }
  .hero__fx { inset: auto 0 -1px 0; height: 46svh; }
  .hpanel__grid { gap: 9px; }
  .hprod__note { display: none; }
  .form__grid { grid-template-columns: 1fr; }
  .tst__card { flex-basis: 100%; }
  .news { grid-template-columns: 1fr; }
  .news__row { flex-direction: column; }
  .news__row input { min-width: 0; width: 100%; }
  .footer__grid { grid-template-columns: 1fr; }
  .why__item { grid-template-columns: auto 1fr; }
  .why__ico { display: none; }
  .jstep { flex-basis: 78vw; }
  .stats { gap: 30px 18px; }
  .mapcard iframe { height: 200px; }
}

@media (max-width: 520px) {
  .fgrid { grid-template-columns: 1fr; }
  .scroll-cue { display: none; }
  .hprod__name { font-size: 0.8rem; }
}

/* the horizontal journey only pins on a wide viewport; below that it is a
   native snap-scroller, which is what a thumb expects */
@media (max-width: 900px) {
  .jviewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .jviewport::-webkit-scrollbar { display: none; }
  .jtrack { transform: none !important; }
  .jstep { scroll-snap-align: center; }
  .jhint i { animation: none; }
}

/* ============================================ 27 REDUCED MOTION + PRINT */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-reveal] { opacity: 1; transform: none; filter: none; }
  html.js .hero__title .line > span,
  html.js [data-hero] { opacity: 1; }
  .word > span { transform: none; }
  .atmos__canvas,
  .atmos__rays,
  .sdecor__rain,
  .hero__birds { display: none; }
  .stat.is-in .stat__arc { transition: none; stroke-dashoffset: 74; }
}

@media print {
  .atmos, .loader, .nav, .drawer, .progress, .to-top,
  .reach__globe, .scroll-cue, .jhint, .marquee { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .journey, .farmers, .reach, .footer { padding-block: 24pt; background: #fff; color: #000; }
  .hero { min-height: auto; color: #000; background: #fff; }
  .hero__sky, .hero__sun, .hero__glow, .hero__rays, .hero__cloud { display: none; }
  html.js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .reach__map.is-3d .reach__stage { position: relative; opacity: 1; }
  .sustain__tree { display: none; }
  .frame.is-3d img { opacity: 1; }
}