/* ============================================================
   HIGH RANGE FLAVOURS — Brand system tokens
   ============================================================ */
:root {
  --green-deep: #1C3B2E;
  --green-cardamom: #46633E;
  --green-fresh: #7CAF54;
  --green-light: #EAF0E4;
  --earth-soil: #5A4632;
  --earth-clay: #9A5B3B;
  --cream: #F6EFE3;
  --warm-grey: #F1ECE2;
  --ink: #243027;
  --white: #FFFFFF;

  /* Seed-style: a single humanist grotesque carries the whole system,
     differentiated by size, weight and tracking rather than by family */
  --font-display: "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;

  /* Fluid spacing scale. The large tokens carry the page rhythm (section
     padding, gutters), so they must shrink on phones -- fixed 128px padding
     and 48px gutters ate a quarter of a 375px screen. Each clamp() reaches its
     max before ~1000px, so desktop metrics are unchanged; at 375px this lands
     on ~20px gutters and ~56px section padding, the same rhythm seed.com uses. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: clamp(16px, 4vw, 24px);
  --s6: clamp(20px, 5vw, 32px);
  --s7: clamp(20px, 5.5vw, 48px);
  --s8: clamp(32px, 7vw, 64px);
  --s9: clamp(48px, 10vw, 96px);
  --s10: clamp(56px, 13vw, 128px);

  --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 40px; --r-pill: 999px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 96px;   /* the badge is the whole brand mark now and needs room to breathe */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* overflow-x on html (not body) keeps the document as the page scroller;
   no CSS scroll-behavior: the JS lerp owns smoothing */
html { overflow-x: hidden; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.011em;   /* Seed sets a slight negative track on body */
  -webkit-font-smoothing: antialiased;
}

/* Seed-style display type: light weight, tight negative tracking, tight leading.
   Applied broadly so every headline picks it up without per-rule edits. */
.hero__title, .section-title, .manifesto__text, .manifesto__punch,
.product__title, .statement__content h2, .kitchen__content h2,
.faq__item summary, .break__word, .enquire__done b,
.stat__num, .product__float-size, .calendar__chip-num,
.loader__word {
  letter-spacing: -0.022em;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--green-fresh); color: var(--green-deep); }

:focus-visible {
  outline: 2.5px solid var(--green-fresh);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed; top: -60px; left: var(--s4); z-index: 200;
  background: var(--green-deep); color: var(--cream);
  padding: 12px 20px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600;
  transition: top 0.3s var(--ease);
}
.skip-link:focus { top: var(--s4); }

/* ============================================================
   Grain overlay (site-wide texture)
   ============================================================ */
.grain {
  position: fixed; inset: 0; z-index: 90;
  pointer-events: none; opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   Image grade: one look for every photo
   ============================================================ */
.img-grade { position: relative; overflow: hidden; }
.img-grade img, .img-grade video { filter: saturate(0.88) contrast(1.06) brightness(0.97); }
.img-grade::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(28,59,46,0.28), rgba(124,175,84,0.12) 55%, rgba(90,70,50,0.18));
  mix-blend-mode: soft-light;
}
.img-grade::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: rgba(28, 59, 46, 0.08);
  mix-blend-mode: color;
}
.img-grade--full, .img-grade--full img { width: 100%; height: 100%; }
.img-grade--full img { object-fit: cover; }

/* ============================================================
   Loader
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--green-deep);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.9s var(--ease) 0.2s;
}
.loader.is-done { transform: translateY(-100%); }
.loader__mark { display: flex; gap: 0.4em; }
.loader__word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 64px);
  color: var(--cream);
  opacity: 0;
  transform: translateY(0.6em);
  animation: loadWord 0.7s var(--ease) forwards;
}
.loader__word:nth-child(2) { animation-delay: 0.18s; color: var(--green-fresh); }
.loader__word:nth-child(3) { animation-delay: 0.36s; }
@keyframes loadWord { to { opacity: 1; transform: none; } }

/* ============================================================
   Cursor
   ============================================================ */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 99;
  width: 40px; height: 64px;          /* larger, realistic pod */
  pointer-events: none;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.cursor.is-ready { opacity: 1; }
.cursor.is-hidden { opacity: 0; }
/* product cursors are square-ish renders; widen the box so they match the
   tall cardamom pod's visual weight */
.cursor.is-prod { width: 58px; height: 58px; }

/* the photographed pod carries the tilt + squash; a soft shadow lifts it
   off the page so it reads on both cream and dark backgrounds */
.cursor__pod {
  width: 100%; height: 100%; display: block; object-fit: contain;
  will-change: transform;
  filter: drop-shadow(0 3px 7px rgba(28, 59, 46, 0.4));
  transition: opacity 0.25s var(--ease);
}
/* on fresh-green surfaces a cream halo keeps the green pod visible */
.cursor.is-invert .cursor__pod {
  filter: drop-shadow(0 0 2px var(--cream)) drop-shadow(0 0 5px var(--cream))
          drop-shadow(0 3px 7px rgba(28, 59, 46, 0.4));
}

/* contextual label pill (+ / − on FAQ rows, ↔ on marquees) */
.cursor__label {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0; pointer-events: none; white-space: nowrap;
  background: var(--cream); color: var(--green-deep);
  font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: 0.08em;
  padding: 7px 11px; border-radius: var(--r-pill);
  box-shadow: 0 6px 18px -8px rgba(28, 59, 46, 0.5);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.cursor.has-label .cursor__label { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cursor.has-label .cursor__pod { opacity: 0; }
.cursor.has-label .cursor__ring { opacity: 0.85; transform: scale(1); }

/* I-beam over selectable prose */
.cursor__beam {
  position: absolute; left: 50%; top: 50%;
  width: 2px; height: 24px; margin: -12px 0 0 -1px;
  background: var(--green-deep); border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(246, 239, 227, 0.7);
  opacity: 0; transition: opacity 0.2s var(--ease);
}
.cursor.is-text .cursor__beam { opacity: 0.9; }
.cursor.is-text .cursor__pod,
.cursor.is-text .cursor__ring { opacity: 0; }

/* crosshair over diagrams: signals "read this data" */
.cursor__cross {
  position: absolute; left: 50%; top: 50%;
  width: 28px; height: 28px; margin: -14px 0 0 -14px;
  opacity: 0; transform: scale(0.55) rotate(-40deg);   /* spins in, lands as a + */
  transition: opacity 0.25s var(--ease), transform 0.3s var(--ease);
}
.cursor__cross::before, .cursor__cross::after {
  content: ""; position: absolute; background: var(--green-fresh);
}
.cursor__cross::before { left: 50%; top: 0; bottom: 0; width: 1.5px; margin-left: -0.75px; }
.cursor__cross::after { top: 50%; left: 0; right: 0; height: 1.5px; margin-top: -0.75px; }
.cursor.is-cross .cursor__cross { opacity: 0.9; transform: scale(1) rotate(0deg); }
.cursor.is-cross .cursor__pod { opacity: 0; }

/* echoes the brand mark on interactive elements; morphs into a pill when docked */
.cursor__ring {
  position: absolute; left: 50%; top: 50%;
  width: 68px; height: 68px; margin: -34px 0 0 -34px;
  border: 1.5px solid var(--green-fresh);
  border-radius: 50%;
  opacity: 0; transform: scale(0.45);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease),
              width 0.35s var(--ease), height 0.35s var(--ease),
              margin 0.35s var(--ease), border-radius 0.35s var(--ease);
}
.cursor.is-hover .cursor__ring { opacity: 0.85; transform: scale(1); }
.cursor.is-dock .cursor__ring {
  opacity: 0.9; transform: scale(1);
  width: var(--rw, 52px); height: var(--rh, 52px);
  margin: calc(var(--rh, 52px) / -2) 0 0 calc(var(--rw, 52px) / -2);
  border-radius: var(--rr, 26px);
}

/* seeds shed and settle */
.seeds { position: fixed; inset: 0; z-index: 98; pointer-events: none; }

/* hide the native arrow only where the pod stands in for it */
body.has-pod-cursor,
body.has-pod-cursor a,
body.has-pod-cursor button,
body.has-pod-cursor summary,
body.has-pod-cursor select,
body.has-pod-cursor [data-hover] { cursor: none; }
body.has-pod-cursor input,
body.has-pod-cursor textarea { cursor: auto; }

@media (hover: none) { .cursor, .seeds { display: none; } }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 14px; letter-spacing: 0.06em;
  padding: 16px 28px; border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  transition: transform 0.3s var(--ease), background 0.3s, color 0.3s, border-color 0.3s;
  will-change: transform;
  position: relative; overflow: hidden;
}
.btn--solid { background: var(--green-fresh); color: var(--green-deep); }
.btn--solid:hover { background: var(--green-deep); color: var(--cream); }
.btn--ghost { border-color: currentColor; color: var(--cream); background: transparent; }
.btn--ghost:hover { background: var(--cream); color: var(--green-deep); }
.btn--ghost-dark { border-color: var(--green-deep); color: var(--green-deep); background: transparent; }
.btn--ghost-dark:hover { background: var(--green-deep); color: var(--cream); }
.btn--nav { background: var(--green-deep); color: var(--cream); padding: 12px 22px; font-size: 13px; }
.btn--nav:hover { background: var(--green-fresh); color: var(--green-deep); }
.btn--wide { width: 100%; }
.btn--full { width: 100%; }

/* ============================================================
   Nav
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s7);
  transition: transform 0.5s var(--ease), background 0.4s, box-shadow 0.4s;
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(36, 48, 39, 0.08);
}
.nav.is-hidden { transform: translateY(-100%); }
/* load choreography */
.nav__item {
  opacity: 0; transform: translateY(-14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
body.is-loaded .nav__item { opacity: 1; transform: none; }
body.is-loaded .nav__item:nth-child(1) { transition-delay: 0.05s; }
.nav__links .nav__item:nth-child(1) { transition-delay: 0.12s; }
.nav__links .nav__item:nth-child(2) { transition-delay: 0.18s; }
.nav__links .nav__item:nth-child(3) { transition-delay: 0.24s; }
.nav__links .nav__item:nth-child(4) { transition-delay: 0.30s; }
.nav__links .nav__item:nth-child(5) { transition-delay: 0.36s; }
.nav > .btn--nav { transition-delay: 0.42s; }

.nav__brand { display: flex; align-items: center; gap: var(--s3); }
/* The badge IS the brand mark now -- it carries the wordmark itself, so it
   is sized to hold the nav on its own rather than sit beside type. */
.nav__logo {
  width: clamp(52px, 5.2vw, 64px); height: auto; aspect-ratio: 1 / 1;
  flex: none; display: block; object-fit: contain;
  border-radius: 50%;
  /* two-part shadow: a tight contact edge keeps the white disc crisp against
     the hero film, the wider bloom gives it weight without a visible ring */
  box-shadow:
    0 1px 2px rgba(20, 45, 32, 0.18),
    0 8px 22px -6px rgba(20, 45, 32, 0.30);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.nav__brand:hover .nav__logo {
  transform: scale(1.06);
  box-shadow:
    0 2px 4px rgba(20, 45, 32, 0.20),
    0 14px 32px -8px rgba(20, 45, 32, 0.38);
}
.nav__brand:active .nav__logo { transform: scale(0.98); transition-duration: 0.12s; }
/* once the cream backdrop slides in the badge needs less lift to separate */
.nav.is-scrolled .nav__logo {
  box-shadow:
    0 1px 2px rgba(20, 45, 32, 0.12),
    0 5px 14px -5px rgba(20, 45, 32, 0.22);
}
.nav__brand:focus-visible { outline: 2px solid var(--green-fresh); outline-offset: 5px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
  .nav__logo, .nav__brand:hover .nav__logo { transition: none; transform: none; }
}
/* cream over the full-bleed hero film; ink once the scrolled backdrop appears */

.nav__links { display: flex; gap: var(--s6); }
.nav__links a {
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--cream); position: relative; transition: color 0.4s;
}
.nav.is-scrolled .nav__links a { color: var(--ink); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 1000px) { .nav__links { display: none; } .nav { padding: 0 var(--s5); } }

/* ============================================================
   Side labels (editorial)
   ============================================================ */
.side-label {
  position: absolute; top: 50%; right: var(--s5);
  transform: rotate(90deg) translateX(-50%);
  transform-origin: right center;
  font-size: 11px; letter-spacing: 0.34em; font-weight: 600;
  color: var(--green-cardamom); opacity: 0.55;
  white-space: nowrap; pointer-events: none;
}
.side-label--light { color: var(--green-fresh); opacity: 0.7; }
@media (max-width: 1100px) { .side-label { display: none; } }

/* ============================================================
   Hero
   ============================================================ */
/* full-bleed film; deep-green backing shows through the rounded bottom corners */
.hero { position: relative; background: var(--green-deep); }
.hero__inner {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  overflow: hidden;
}
.hero__media { position: absolute; inset: -12% 0; z-index: 0; }
.hero__img {
  width: 100%; height: 100%; object-fit: cover;
  animation: kenburns 22s linear infinite alternate;   /* fallback still, gentle drift */
}
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.1); } }

/* two stacked media layers (video or still each) cross-dissolve; every frame
   slowly pushes in (Ken Burns — zoom, never out). Per-slide focal point and
   zoom depth come in as custom props from main.js. */
.hero__layer {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.15s var(--ease);
  will-change: opacity;
}
.hero__layer.is-active { opacity: 1; }
.hero__layer video, .hero__layer img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: var(--kb-origin, 50% 52%);
  transform: scale(1.001);
  will-change: transform;
}
.hero__layer .is-zooming { animation: heroPushIn var(--zoom-dur, 20s) linear forwards; }
@keyframes heroPushIn { from { transform: scale(1.001); } to { transform: scale(var(--kb-to, 1.085)); } }
/* load overture: the first clip arrives slightly zoomed + soft, then settles to rest
   (once, on load) before the slow push-in takes over */
.hero__layer .is-entering { animation: heroSettle 1.7s var(--ease) forwards; }
@keyframes heroSettle {
  from { transform: scale(1.09); filter: blur(6px) brightness(0.8); }
  to   { transform: scale(1.001); filter: blur(0) brightness(1); }
}
/* off-screen: freeze the push-ins along with the paused videos/timers */
.hero--paused .hero__layer video, .hero--paused .hero__layer img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero__layer .is-zooming, .hero__layer .is-entering, .hero__img { animation: none; }
}
/* legibility gradient over the film */
.hero__vignette {
  position: absolute; inset: 0; z-index: 2;
  /* vertical wash for the lower text block + a soft left wash for the left-aligned
     copy, so type stays legible across the brighter drone clips */
  background:
    linear-gradient(to top, rgba(28,59,46,0.94) 0%, rgba(28,59,46,0.55) 34%, rgba(28,59,46,0.28) 62%, rgba(28,59,46,0.34) 100%),
    linear-gradient(to right, rgba(28,59,46,0.34) 0%, rgba(28,59,46,0) 52%);
}

.hero__content {
  position: relative; z-index: 3;
  padding: 0 var(--s7) var(--s9);
  will-change: transform, opacity;
}
.hero__eyebrow {
  color: var(--green-fresh); font-size: 13px; font-weight: 500;
  letter-spacing: 0.1em; margin-bottom: var(--s5);
}
/* overture cascade: eyebrow → title (chars) → sub → CTAs settle in, in sequence */
.hero__eyebrow[data-reveal] { transition-delay: 0.1s; }
.hero__sub[data-reveal] { transition-delay: 0.55s; }
.hero__cta[data-reveal] { transition-delay: 0.72s; }
.hero__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 5.4vw, 88px);
  line-height: 1.04; color: var(--cream);
  letter-spacing: -0.022em;
  margin-bottom: var(--s5);
}
.hero__line { display: block; overflow: hidden; }
.hero__line--accent { color: var(--green-fresh); }
.hero__sub {
  color: var(--green-light); font-size: 17px; line-height: 1.6;
  max-width: 46ch; margin-bottom: var(--s6);
}
.hero__cta { display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap; }
/* Seed-style secondary: an underlined text link with an arrow, in cream on the film */
.hero__link {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: 15px; font-weight: 500; color: var(--cream);
  padding-bottom: 3px; border-bottom: 1.5px solid rgba(246, 239, 227, 0.6);
  transition: color 0.3s, border-color 0.3s;
}
.hero__link span { transition: transform 0.3s var(--ease); }
.hero__link:hover { color: var(--green-fresh); border-color: var(--green-fresh); }
.hero__link:hover span { transform: translateX(4px); }

.hero__scroll {
  position: absolute; right: var(--s7); bottom: var(--s9); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  color: var(--cream); font-size: 11px; letter-spacing: 0.3em;
}
.hero__scroll-line {
  width: 1.5px; height: 64px; background: rgba(246,239,227,0.35);
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: ""; position: absolute; top: -50%; left: 0;
  width: 100%; height: 50%; background: var(--green-fresh);
  animation: scrollHint 1.8s var(--ease) infinite;
}
@keyframes scrollHint { to { top: 110%; } }

@media (max-width: 700px) {
  .hero__content { padding: 0 var(--s5) var(--s8); }
  .hero__scroll { display: none; }
}

/* Split-text chars */
.char {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease);
  transition-delay: calc(var(--ci) * 0.022s);
}
.is-inview .char { transform: none; }

/* ============================================================
   Section basics
   ============================================================ */
.section-eyebrow {
  color: var(--green-cardamom); font-size: 13px; font-weight: 500;
  letter-spacing: 0.1em; margin-bottom: var(--s4);
}
.section-eyebrow--light { color: var(--green-fresh); }
.section-eyebrow--center { text-align: center; }
.section-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 4vw, 56px); line-height: 1.08;
  color: var(--ink); max-width: 18em;
}
.section-title--light { color: var(--cream); }
/* Seed keeps headlines single-weight and upright, so emphasis is colour, not italics */
.section-title em, .manifesto__text em, .statement__content em,
.product__title em, .kitchen__content em {
  font-style: normal; font-weight: 500; color: var(--green-cardamom);
}
.section-title--light em, .statement__content em { color: var(--green-fresh); }

/* Word reveal */
[data-words] .w { display: inline-block; overflow: hidden; vertical-align: top; }
[data-words] .w > span {
  display: inline-block; transform: translateY(105%);
  transition: transform 0.75s var(--ease);
  transition-delay: calc(var(--wi) * 0.035s);
}
[data-words].is-inview .w > span { transform: none; }
[data-words] .w.is-em > span { font-weight: 500; }

/* Fade-up reveal */
[data-reveal] {
  opacity: 0; transform: translateY(36px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
[data-reveal].is-inview { opacity: 1; transform: none; }

/* Scrubbed clip reveal for photos */
.img-grade[data-clip] { clip-path: inset(var(--clip, 14%) round var(--r-md)); }

/* ============================================================
   The range — product grid on deep green, straight after the hero
   ============================================================ */
.range {
  background: var(--green-deep);
  padding: var(--s10) var(--s7);
}
/* Header: headline left, lead centre, link pushed to the far right */
.range__head {
  max-width: 1360px; margin: 0 auto var(--s8);
  display: grid; grid-template-columns: 1.1fr 1fr auto;
  gap: var(--s7); align-items: start;
}
.range__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 3.6vw, 52px); line-height: 1.1;
  color: var(--cream); max-width: 13em;
}
.range__lead { color: var(--green-light); font-size: 16px; line-height: 1.6; max-width: 42ch; }
.range__all {
  justify-self: end; white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--s2);
  color: var(--cream); font-size: 15px; font-weight: 500;
  padding-bottom: 3px; border-bottom: 1.5px solid rgba(246, 239, 227, 0.6);
  transition: color 0.3s, border-color 0.3s;
}
.range__all span { transition: transform 0.3s var(--ease); }
.range__all:hover { color: var(--green-fresh); border-color: var(--green-fresh); }
.range__all:hover span { transform: translateX(4px); }

/* Carousel: a clipped viewport with an auto-scrolling track. The card width is
   set with container query units so exactly 4 sit across the viewport; JS clones
   the set and drives a seamless, measured-width loop (see main.js). */
.range__viewport {
  --range-gap: var(--s5);
  /* full-bleed: break out of the section's side padding so cards clip at the
     physical screen edge, not mid-page against the background */
  margin: 0 calc(-1 * var(--s7));
  container-type: inline-size;
  overflow-x: clip;
  padding: var(--s4) 0; /* headroom for the hover lift + shadow */
  /* soft dissolve at both edges so cards fade out instead of hard-cutting */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 clamp(32px, 6vw, 96px),
    #000 calc(100% - clamp(32px, 6vw, 96px)), transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0, #000 clamp(32px, 6vw, 96px),
    #000 calc(100% - clamp(32px, 6vw, 96px)), transparent 100%);
}
.range__track {
  display: flex; align-items: stretch;
  width: max-content;
  will-change: transform;
  touch-action: pan-y;     /* JS owns the horizontal drag; page keeps vertical scroll */
  -webkit-user-select: none; user-select: none; /* no text selection while dragging */
}
/* let the actual controls keep their pointer, but never start a text selection */
.range__track a, .range__track button { cursor: pointer; }
/* Seed-style anatomy: badge pinned to the corner, code + name stacked at the
   top, the spice image floating in the middle, price line at the very bottom.
   Card green is matched to the photography backdrop so each pile floats with
   no visible photo edge. */
.range__card {
  position: relative;
  flex: 0 0 calc(25cqw - var(--range-gap)); /* 4 across: card + gap = 25cqw */
  margin-right: var(--range-gap);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #426339; /* matched to the photography perimeter so the inset image floats seamlessly */
  border-radius: var(--r-lg);
  padding: var(--s7) var(--s5) var(--s6);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.range__card:hover { transform: translateY(-8px); box-shadow: 0 26px 50px -22px rgba(0, 0, 0, 0.5); }

.range__badge {
  position: absolute; top: var(--s5); left: var(--s5);
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--cream);
  background: rgba(20, 40, 28, 0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 6px 12px; border-radius: var(--r-pill);
}
.range__badge--hero {
  background: var(--green-fresh); color: var(--green-deep);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

.range__code {
  display: inline-block;
  font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
  color: var(--cream);
  border: 1px solid rgba(246, 239, 227, 0.45);
  padding: 4px 14px; border-radius: var(--r-pill);
}
.range__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(22px, 1.9vw, 28px); letter-spacing: -0.022em;
  color: var(--cream); margin: var(--s3) 0 0;
}
.range__media {
  width: 100%; aspect-ratio: 1; overflow: hidden;
  margin: var(--s2) 0 var(--s6);
}
.range__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s var(--ease);
}
.range__card:hover .range__media img { transform: scale(1.04); }

.btn--card {
  background: var(--green-deep); color: var(--cream);
  padding: 13px 26px; font-size: 13px;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}
.btn__arrow {
  display: inline-block; max-width: 0; margin-left: 0; overflow: hidden;
  opacity: 0; transform: translateX(-4px);
  transition: max-width 0.35s var(--ease), opacity 0.35s var(--ease),
              margin-left 0.35s var(--ease), transform 0.35s var(--ease);
}
/* the featured card, and any card on hover, adopts the white "active" button */
.range__card:hover .btn--card,
.range__card--hero .btn--card { background: var(--cream); color: var(--green-deep); }
.range__card:hover .btn__arrow,
.range__card--hero .btn__arrow {
  max-width: 1.4em; margin-left: var(--s2); opacity: 1; transform: translateX(0);
}
.range__terms { margin-top: var(--s5); font-size: 13px; color: var(--green-light); opacity: 0.85; }

/* pause the loop while a pointer is over it, so cards can be read and clicked */
.range__viewport:hover .range__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .range__viewport { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 1024px) {
  .range__head { grid-template-columns: 1fr; align-items: start; gap: var(--s5); }
  .range__all { justify-self: start; }
  .range__card { flex-basis: calc(40cqw - var(--range-gap)); } /* ~2.5 across */
}
@media (max-width: 560px) {
  .range__card { flex-basis: calc(82cqw - var(--range-gap)); } /* ~1.2 across */
}

/* ============================================================
   Estate duo — Seed-style split: copy left, stage + gallery right.
   Rounds up over the deep-green range section above it.
   ============================================================ */
.duo {
  position: relative; z-index: 1;
  margin-top: calc(-1 * var(--r-xl));
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: #FBF8F0;
  padding: var(--s10) var(--s7);
}
.duo__inner {
  max-width: 1360px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s8); align-items: center;
}
.duo__badge {
  display: inline-block; align-self: flex-start;
  background: rgba(124, 175, 84, 0.22); color: var(--green-deep);
  font-size: 13px; font-weight: 600;
  padding: 6px 14px; border-radius: var(--r-pill);
  margin-bottom: var(--s5);
}
.duo__copy { display: flex; flex-direction: column; align-items: flex-start; }
.duo__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 3.4vw, 50px); line-height: 1.12;
  letter-spacing: -0.022em; color: var(--green-deep);
  max-width: 14em; margin-bottom: var(--s5);
}
.duo__sub {
  font-size: 16.5px; line-height: 1.65; color: var(--ink);
  max-width: 48ch; margin-bottom: var(--s6);
}
.btn--duo {
  background: var(--green-deep); color: var(--cream);
  padding: 16px 32px; font-size: 14px;
}
.btn--duo:hover { background: var(--green-fresh); color: var(--green-deep); }
.duo__sign { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s7); }
.duo__rule { width: 56px; height: 1.5px; background: var(--green-fresh); flex: none; }
.duo__sign b {
  display: block; font-size: 14px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--green-deep);
}
.duo__sign span { font-size: 13px; color: var(--earth-soil); }

.duo__visual { min-width: 0; }
.duo__stage {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 40px 80px -48px rgba(28, 59, 46, 0.5);
  --sx: 50%; --sy: 55%;
}
.duo__stage img { width: 100%; display: block; }

/* spotlight: dims the whole stage except a soft pool over the active pile */
.duo__spot {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity 0.55s var(--ease);
  background: radial-gradient(circle at var(--sx) var(--sy),
    transparent 0, transparent 78px, rgba(15, 34, 22, 0.58) 220px);
}
.duo__stage.is-inspecting .duo__spot { opacity: 1; }

/* glass loupe magnifies the pods under the cursor (JS sets bg + position) */
.duo__loupe {
  position: absolute; z-index: 3; width: 132px; height: 132px;
  border-radius: 50%; pointer-events: none; background-repeat: no-repeat;
  border: 2px solid rgba(246, 239, 227, 0.9);
  box-shadow: 0 12px 30px -6px rgba(15, 34, 22, 0.55),
    inset 0 0 0 1px rgba(15, 34, 22, 0.18), inset 0 3px 16px rgba(255, 255, 255, 0.22);
  opacity: 0; transform: translate(-50%, -50%) scale(0.55);
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.duo__stage.is-loupe .duo__loupe { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* code callouts float over the stage; the dashed stem draws down when active */
.duo__callout {
  position: absolute; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none; opacity: 0.92;
  transition: opacity 0.4s var(--ease);
}
.duo__stage.is-inspecting .duo__callout { opacity: 0.28; }
.duo__stage.is-inspecting .duo__callout.is-active { opacity: 1; }
.duo__pill {
  border: 1px solid rgba(246, 239, 227, 0.55); color: var(--cream);
  background: rgba(20, 40, 28, 0.42);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.06em;
  padding: 4px 13px; border-radius: var(--r-pill);
  transition: transform 0.4s var(--ease), background 0.4s;
}
.duo__callout.is-active .duo__pill { transform: translateY(-3px); background: rgba(20, 40, 28, 0.72); }
.duo__stem {
  width: 0; height: 0; margin-top: 0; position: relative;
  border-left: 1.5px dashed rgba(246, 239, 227, 0.7);
  transition: height 0.5s var(--ease), margin-top 0.5s var(--ease);
}
.duo__callout.is-active .duo__stem { height: clamp(26px, 4.2vw, 50px); margin-top: 6px; }
.duo__stem::after {
  content: ""; position: absolute; left: -3.5px; bottom: -3px;
  width: 5.5px; height: 5.5px; border-radius: 50%; background: var(--cream);
  opacity: 0; transition: opacity 0.3s 0.35s;
}
.duo__callout.is-active .duo__stem::after { opacity: 1; }

/* spec card slides in for the active pile */
.duo__spec {
  position: absolute; bottom: 16px; z-index: 4; max-width: 220px;
  padding: 12px 15px 13px;
  background: rgba(251, 248, 240, 0.9);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 14px;
  box-shadow: 0 16px 36px -12px rgba(15, 34, 22, 0.5);
  opacity: 0; transform: translateY(12px) scale(0.96); pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.45s var(--ease);
}
.duo__spec[data-pile="gc"] { left: 16px; }
.duo__spec[data-pile="bp"] { right: 16px; }
.duo__spec.is-active { opacity: 1; transform: none; }
.duo__spec-code {
  display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  color: var(--green-cardamom); margin-bottom: 3px;
}
.duo__spec b {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: 19px; color: var(--green-deep); line-height: 1.1; margin-bottom: 3px;
}
.duo__spec-meta { display: block; font-size: 12.5px; color: var(--earth-soil); line-height: 1.4; }

/* phones: the stage is only ~175px tall, so a 220px floating card covered the
   very pile you tapped. Pin a slim full-width strip to the bottom instead --
   the pods stay visible above it. */
@media (max-width: 700px) {
  .duo__spec,
  .duo__spec[data-pile="gc"],
  .duo__spec[data-pile="bp"] {
    left: 8px; right: 8px; bottom: 8px; max-width: none;
    padding: 9px 12px 10px; border-radius: 12px;
  }
  .duo__spec b { font-size: 15px; }
  .duo__spec-meta { font-size: 11.5px; line-height: 1.35; }
}

/* invisible focusable hotspots over each pile */
.duo__hotspot {
  position: absolute; z-index: 4; top: 28%; height: 58%; width: 42%;
  border: 0; background: transparent; padding: 0; cursor: pointer;
  border-radius: var(--r-md);
}
.duo__hotspot[data-pile="gc"] { left: 6%; }
.duo__hotspot[data-pile="bp"] { left: 54%; }
.duo__hotspot:focus-visible { outline: 2px solid var(--green-fresh); outline-offset: -2px; }

/* TOUCH: hotspots are invisible, and without hover nobody would ever find
   them -- so on tap devices each pile wears a soft pulsing ring that says
   "tap me". It hides itself once that pile is open. */
.duo__stage.is-tappable .duo__hotspot::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1.5px solid rgba(246, 239, 227, 0.9);
  background: rgba(246, 239, 227, 0.16);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  box-shadow: 0 2px 12px rgba(20, 45, 32, 0.35);
  animation: duoTapPulse 2.4s ease-in-out infinite;
  transition: opacity 0.3s var(--ease);
}
/* the little dot in the middle of the ring */
.duo__stage.is-tappable .duo__hotspot::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: var(--cream);
  box-shadow: 0 1px 6px rgba(20, 45, 32, 0.5);
  transition: opacity 0.3s var(--ease);
}
@keyframes duoTapPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.22); opacity: 0.45; }
}
/* once something is being inspected, drop the prompts out of the way */
.duo__stage.is-tappable.is-inspecting .duo__hotspot::after,
.duo__stage.is-tappable.is-inspecting .duo__hotspot::before { opacity: 0; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .duo__stage.is-tappable .duo__hotspot::after { animation: none; }
}

.duo__gallery {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4); margin-top: var(--s4);
}
/* farm → pack → kitchen: captioned, with a slow Ken-Burns drift */
.duo__thumb {
  position: relative; margin: 0;
  aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden;
}
.duo__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.04);
  animation: duoKen var(--kd, 20s) ease-in-out infinite alternate;
}
.duo__thumb:nth-child(2) img { --kd: 24s; animation-delay: -6s; }
.duo__thumb:nth-child(3) img { --kd: 22s; animation-delay: -12s; }
@keyframes duoKen {
  from { transform: scale(1.03) translate(0, 0); }
  to   { transform: scale(1.1) translate(-2%, -1.5%); }
}
.duo__thumb:hover img { animation-play-state: paused; }
.duo__thumb::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(15, 34, 22, 0.62), transparent 46%);
}
.duo__thumb figcaption {
  position: absolute; left: 12px; bottom: 10px; z-index: 1;
  display: flex; align-items: baseline; gap: 7px;
  color: var(--cream); font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em;
  transition: transform 0.4s var(--ease);
}
.duo__thumb:hover figcaption { transform: translateY(-2px); }
.duo__thumb-num {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: var(--green-fresh);
}
@media (prefers-reduced-motion: reduce) {
  .duo__thumb img { animation: none; transform: none; }
  .duo__loupe { display: none; }
}

@media (max-width: 1024px) {
  .duo__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
}

/* ============================================================
   Marquee (JS-driven, velocity-reactive)
   ============================================================ */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee--dark { background: var(--green-deep); padding: var(--s5) 0; }
.marquee__track {
  display: inline-flex; align-items: center; gap: var(--s6);
  will-change: transform;
}
.marquee--dark span {
  color: var(--cream); font-weight: 600; font-size: 14px; letter-spacing: 0.18em;
}
.marquee--dark i, .marquee--big i { color: var(--green-fresh); font-style: normal; }
.marquee--big {
  padding: var(--s6) 0 var(--s8);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee--big span {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, 5vw, 80px); color: transparent;
  -webkit-text-stroke: 1.5px var(--green-cardamom);
  letter-spacing: 0.02em;
  transition: color 0.35s var(--ease), -webkit-text-stroke-color 0.35s var(--ease);
}
.marquee--big span:hover { color: var(--green-cardamom); -webkit-text-stroke-color: var(--green-deep); }

/* ============================================================
   Why grid
   ============================================================ */
.why { position: relative; padding: var(--s10) var(--s7); }
.why__head { max-width: 1240px; margin: 0 auto var(--s8); }
.why__split {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: var(--s9); align-items: start;
}

/* --- layered photo stack ------------------------------------ */
.why__stack {
  position: relative; min-width: 0;
  /* stays put while the list scrolls past on tall viewports */
  position: sticky; top: calc(var(--nav-h) + 24px);
}
.why__photo {
  position: relative;
  height: clamp(420px, 58vh, 600px);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 42px 80px -42px rgba(28, 59, 46, 0.5);
}
.why__photo .img-grade { position: absolute; inset: -6% 0; }
/* picking detail overlaps the bottom-right corner, framed in cream */
.why__photo-detail {
  position: absolute; right: -26px; bottom: -34px; z-index: 2;
  width: 34%; aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 6px solid var(--cream);
  box-shadow: 0 24px 48px -22px rgba(28, 59, 46, 0.55);
}
/* the zero-middlemen claim as a floating specimen chip */
.why__chip {
  position: absolute; left: -18px; top: 32px; z-index: 4;
  display: flex; align-items: center; gap: var(--s4);
  background: var(--green-deep);
  border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
  box-shadow: 0 20px 44px -20px rgba(28, 59, 46, 0.6);
}
.why__chip-num {
  font-family: var(--font-display); font-weight: 400;
  font-size: 44px; line-height: 1; color: var(--green-fresh);
  min-width: 30px; text-align: center;
}
.why__chip-num.is-tick { animation: whyTick 0.4s var(--ease); }
@keyframes whyTick { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
.why__chip-side { display: flex; flex-direction: column; gap: 7px; }
.why__chip-dots { display: flex; gap: 5px; }
.why__chip-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green-fresh);
  transition: background 0.35s var(--ease), transform 0.35s var(--ease);
}
.why__chip-dots i.is-out { background: rgba(246, 239, 227, 0.22); transform: scale(0.78); }
.why__chip-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  line-height: 1.5; color: var(--green-light);
}

/* the sticky photo's caption tracks the active reason */
.why__caption {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  display: flex; align-items: center; gap: 10px; max-width: 82%;
  background: rgba(20, 40, 28, 0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(246, 239, 227, 0.18);
  color: var(--cream); padding: 9px 15px; border-radius: var(--r-pill);
}
.why__caption-num {
  font-family: var(--font-display); font-weight: 400; font-size: 20px;
  color: var(--green-fresh); line-height: 1;
}
.why__caption-text { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
@keyframes whyCapIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.why__caption.is-swap .why__caption-num,
.why__caption.is-swap .why__caption-text { animation: whyCapIn 0.45s var(--ease); }

/* field-journal plate label on the sticky photo */
.why__photo::after {
  content: ""; position: absolute; inset: 10px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(246, 239, 227, 0.26); border-radius: calc(var(--r-lg) - 8px);
}
.why__plate {
  position: absolute; right: 12px; top: 12px; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  padding: 7px 11px; border-radius: 10px;
  background: rgba(20, 40, 28, 0.42);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(246, 239, 227, 0.16);
  font-size: 10px; letter-spacing: 0.1em; color: rgba(246, 239, 227, 0.9); font-weight: 600;
}
.why__plate b { color: var(--green-fresh); font-weight: 700; }
.why__plate-geo { font-size: 9px; letter-spacing: 0.12em; color: rgba(246, 239, 227, 0.62); font-weight: 500; }

/* --- Follow the Pod: the vine the pod rides + the pod itself ---- */
.why__index { position: relative; min-width: 0; }
.why__vine { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.why__vine--track { z-index: 0; }
.why__vine--pod { z-index: 2; }
.why__vine-track { fill: none; stroke: rgba(70, 99, 62, 0.2); stroke-width: 2.5; stroke-linecap: round; }
.why__vine-trail {
  fill: none; stroke: var(--green-fresh); stroke-width: 2.5; stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(124, 175, 84, 0.5));
}
.why__pod { will-change: transform; }
.why__pod-glow { fill: rgba(124, 175, 84, 0.5); filter: blur(7px); animation: whyPodGlow 2.6s ease-in-out infinite; }
@keyframes whyPodGlow { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } }
.why__pod-body { animation: whyPodBob 2.6s ease-in-out infinite; }
@keyframes whyPodBob { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(1.5px); } }
.why__pod-shell { fill: var(--green-fresh); stroke: var(--green-deep); stroke-width: 1.4; }
.why__pod-ridge, .why__pod-ridge2 { fill: none; stroke: var(--green-deep); stroke-width: 1; opacity: 0.5; stroke-linecap: round; }
.why__pod-stem { fill: none; stroke: var(--earth-soil); stroke-width: 1.4; stroke-linecap: round; }

/* --- the reasons: waiting -> bloom as the pod arrives ---------- */
.why__list { list-style: none; min-width: 0; position: relative; z-index: 1; }
.why__row {
  display: grid; grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--s4); align-items: start;
  padding: var(--s5) var(--s3);
  border-top: 1.5px solid var(--green-light);
  opacity: 0.4;
  transition: opacity 0.5s var(--ease), background 0.35s var(--ease);
}
.why__row:last-child { border-bottom: 1.5px solid var(--green-light); }
.why__row.is-lit, .why__row.is-active { opacity: 1; }
.why__row:hover { background: rgba(124, 175, 84, 0.08); }
.why__marker { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.why__num {
  position: relative;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cream); border: 1.5px solid var(--green-light);
  font-family: var(--font-display); font-weight: 400; font-size: 19px;
  color: var(--green-fresh); line-height: 1; z-index: 1;
  transition: background 0.45s var(--ease), color 0.45s, border-color 0.45s, transform 0.45s var(--ease);
}
.why__row.is-lit .why__num {
  background: var(--green-deep); border-color: var(--green-deep); color: var(--cream);
  animation: whyBloom 0.6s var(--ease);
}
@keyframes whyBloom { 0% { transform: scale(0.6); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
.why__row.is-active .why__num { transform: scale(1.1); }
.why__num::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid var(--green-fresh); opacity: 0;
}
.why__row.is-active .why__num::after { animation: whyRing 1.9s var(--ease) infinite; }
@keyframes whyRing { 0% { transform: scale(0.8); opacity: 0.75; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }
.why__icon { display: block; }
.why__ico {
  width: 24px; height: 24px; fill: none; stroke: var(--green-cardamom);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.3; transition: stroke 0.4s, opacity 0.4s, transform 0.5s var(--ease);
}
.why__ico path, .why__ico circle { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.7s var(--ease) 0.1s; }
.why__row.is-lit .why__ico { stroke: var(--green-fresh); opacity: 1; }
.why__row.is-lit .why__ico path, .why__row.is-lit .why__ico circle { stroke-dashoffset: 0; }
.why__row.is-active .why__ico { transform: scale(1.12); }
.why__row h3 {
  position: relative; display: inline-block;
  font-size: 14px; letter-spacing: 0.1em; font-weight: 600;
  color: var(--green-deep); margin-bottom: var(--s2);
}
.why__row h3::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 1.5px; width: 0;
  background: var(--green-fresh); transition: width 0.5s var(--ease);
}
.why__row.is-active h3::after { width: 100%; }
.why__row p { font-size: 15px; line-height: 1.6; color: var(--earth-soil); max-width: 52ch; }

@media (max-width: 1000px) {
  .why__split { grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
  .why__stack { position: relative; top: 0; }
  .why__photo { height: clamp(300px, 46vh, 440px); }
  .why__photo-detail { right: -8px; bottom: -26px; }
  .why__chip { left: -8px; }
}
@media (prefers-reduced-motion: reduce) {
  .why__row { opacity: 1 !important; }
  .why__pod-glow, .why__pod-body, .why__num, .why__num::after, .why__chip-num,
  .why__chip-dots i, .why__caption-num, .why__caption-text { animation: none !important; }
  .why__ico path, .why__ico circle { stroke-dashoffset: 0 !important; transition: none; }
  .why__row.is-active .why__num, .why__row.is-active .why__ico { transform: none; }
}

/* ============================================================
   Image break
   ============================================================ */
.break { position: relative; height: 72vh; overflow: hidden; }
.break__media { position: absolute; inset: -14% 0; }
.break__media img { animation: breakZoom 20s ease-in-out infinite alternate; }  /* slow breathing */
@keyframes breakZoom { from { transform: scale(1.03); } to { transform: scale(1.11); } }

/* a soft light that follows the cursor across the pods */
.break__light {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 0.45s var(--ease); mix-blend-mode: soft-light;
  background: radial-gradient(circle 320px at var(--lx, 50%) var(--ly, 50%),
    rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0) 66%);
}
.break.is-lit .break__light { opacity: 1; }
/* three.js atmosphere layer (glowing motes) sits over the photo, under the words */
.break__gl { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
.break__light { z-index: 2; }

.break__word {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 0 0.36em; padding: 0 var(--s5);
  font-family: var(--font-display); font-weight: 400; line-height: 1;
  font-size: clamp(40px, 8vw, 130px);
}
/* each word can be nudged aside by the cursor (--nx/--ny/--ns from JS) */
.break__w {
  position: relative; display: inline-block; opacity: 0;
  transform: translate(var(--nx, 0px), var(--ny, 0px)) scale(var(--ns, 1));
  transition: transform 0.4s var(--ease);
}
/* the three words arrive one after another when the band scrolls in */
.break.is-in .break__w--pure  { animation: breakIn 0.9s var(--ease) 0.10s both, pureGleam 5.5s ease-in-out 1.1s infinite; }
.break.is-in .break__w--green { animation: breakIn 0.9s var(--ease) 0.55s both, greenFlow 7s linear 0.55s infinite; }
.break.is-in .break__w--fresh { animation: breakIn 0.9s var(--ease) 1.00s both; }
@keyframes breakIn { from { opacity: 0; } to { opacity: 1; } }

/* PURE -- clean cream, a bright gleam sweeping across (light on clean glass) */
.break__w--pure {
  color: transparent;
  background-image: linear-gradient(100deg, #F6EFE3 42%, #FFFFFF 50%, #F6EFE3 58%);
  background-size: 250% 100%; background-position: 130% 0;
  -webkit-background-clip: text; background-clip: text;
  text-shadow: 0 8px 50px rgba(28, 59, 46, 0.45);
}
@keyframes pureGleam { 0%, 100% { background-position: 130% 0; } 50% { background-position: -30% 0; } }

/* GREEN -- filled with flowing brand greens (sun through leaves) */
.break__w--green {
  color: transparent;
  background-image: linear-gradient(115deg, #4E7D3C, #8FCB5E, #46633E, #A5D97A, #4E7D3C);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 3px 16px rgba(70, 99, 62, 0.55));
}
@keyframes greenFlow { from { background-position: 0 0; } to { background-position: 260% 0; } }

/* FRESH -- cool minty white with dew beading on the word */
.break__w--fresh { color: #ECF6EE; text-shadow: 0 8px 50px rgba(28, 59, 46, 0.45); }
.break__dew {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95), rgba(205,232,216,0.5) 55%, rgba(150,195,170,0.12) 100%);
  box-shadow: 0 1px 2px rgba(20, 50, 35, 0.35), inset 0 -1px 2px rgba(255, 255, 255, 0.55);
}
.break__dew--1 { width: 0.15em; height: 0.15em; left: 6%;  top: 15%; animation: dewTrickle 6s ease-in 1.6s infinite; }
.break__dew--2 { width: 0.11em; height: 0.11em; left: 45%; top: 62%; animation: dewTrickle 7.6s ease-in 3.2s infinite; }
.break__dew--3 { width: 0.09em; height: 0.09em; left: 82%; top: 24%; animation: dewTrickle 6.8s ease-in 5s infinite; }
@keyframes dewTrickle {
  0%, 62% { transform: translateY(0); opacity: 0.92; }
  86% { opacity: 0.92; }
  100% { transform: translateY(1.5em); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .break__media img, .break.is-in .break__w--pure, .break.is-in .break__w--green,
  .break.is-in .break__w--fresh, .break__dew, .break__light { animation: none !important; }
  .break__w { opacity: 1; }
  .break__w--pure { background-position: 50% 0; }
}

/* ============================================================
   Compare (pinned scene)
   ============================================================ */
.compare { background: var(--green-deep); }
.compare__pin { padding: var(--s9) var(--s7); }
.compare__head { max-width: 1280px; margin: 0 auto var(--s8); }
.compare__table {
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: 0.8fr 1.15fr 1fr 1fr;
  grid-template-rows: auto repeat(4, 1fr);   /* header row + 4 equal comparison rows */
  grid-auto-flow: column;                    /* each column's cells fill one grid column */
  gap: var(--s3);
}
/* cells become direct grid items, so every row lines up across all columns */
.compare__col { display: contents; }
.compare__cell {
  position: relative;
  padding: var(--s5);
  background: rgba(246, 239, 227, 0.05);
  border-radius: var(--r-md);
  color: var(--green-light); font-size: 15px; line-height: 1.55;
  flex: 1; display: flex; align-items: center;
  transition: background 0.3s var(--ease);
}
/* win / lose marks make the winner obvious at a glance */
.compare__cell:not(.compare__cell--head)::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-right: 12px;
  background: center / 21px no-repeat; transform-origin: center;
}
.compare__col--hero .compare__cell:not(.compare__cell--head)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237CAF54' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
}
[data-compare-col]:not(.compare__col--hero) .compare__cell:not(.compare__cell--head)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a99e88' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  opacity: 0.72;
}
.compare__col--labels .compare__cell {
  background: transparent; color: var(--green-fresh);
  font-weight: 600; letter-spacing: 0.14em; font-size: 12px;
}
.compare__cell--head {
  font-family: var(--font-display); font-weight: 400;
  font-size: 21px; letter-spacing: 0; color: var(--cream);
  background: transparent;
}
.compare__col--hero .compare__cell {
  background: rgba(124, 175, 84, 0.16);
  border: 1px solid rgba(124, 175, 84, 0.42);
  color: var(--cream);
}
.compare__col--hero .compare__cell--head {
  color: var(--green-fresh); background: transparent; border: none;
  font-size: 25px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
}
.compare__tag {
  font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--green-deep); background: var(--green-fresh);
  padding: 3px 10px; border-radius: var(--r-pill); text-transform: uppercase;
}
/* hovering a row lights the whole comparison line across the columns */
.compare__cell.is-row-hot { background: rgba(246, 239, 227, 0.13); }
.compare__col--hero .compare__cell.is-row-hot { background: rgba(124, 175, 84, 0.26); }
.compare__col--labels .compare__cell.is-row-hot { background: transparent; color: var(--cream); }

/* pinned entrance: rows reveal one at a time as you scroll (driven by JS) */
@media (min-width: 1001px) and (hover: hover) {
  .compare { height: 170vh; }
  .compare__pin {
    position: sticky; top: 0; min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    overflow: hidden;
  }
  .compare__col--hero .compare__cell:not(.compare__cell--head) {
    box-shadow: 0 0 0 1px rgba(124, 175, 84, 0.14), 0 22px 46px -26px rgba(0, 0, 0, 0.6);
  }
  .compare.is-scrub .compare__cell {
    opacity: 0; transform: translateY(16px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  }
  .compare.is-scrub .compare__cell.is-shown { opacity: 1; transform: none; }
  .compare.is-scrub .compare__cell:not(.compare__cell--head)::before { transform: scale(0); }
  .compare.is-scrub .compare__cell.is-shown:not(.compare__cell--head)::before {
    transform: scale(1); transition: transform 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) 0.12s;
  }
}
@media (max-width: 1000px) {
  .compare__table { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: var(--s4); }
  .compare__col { display: flex; flex-direction: column; gap: var(--s3); }
  .compare__col--labels { display: none; }
  .compare__col--hero { order: -1; }   /* winner first on mobile */
}

/* ============================================================
   Journey: pinned map scene
   ============================================================ */
/* the whole section is open ocean; the pinned viewport clips the bleeding sea */
.journey { background: linear-gradient(180deg, #dceff6 0%, #a5d0e8 32%, #6aabd9 66%, #3f86c4 100%); }
.journey__pin { padding: var(--s9) var(--s7) var(--s8); }
.journey__head { max-width: 1280px; margin: 0 auto var(--s6); position: relative; z-index: 2; }
/* type stays crisp against the bright horizon */
.journey .section-title { text-shadow: 0 2px 28px rgba(255, 255, 255, 0.7); }
.journey .section-eyebrow { color: var(--green-deep); opacity: 0.75; }
/* content stays comfortably padded — the ocean rects bleed past the SVG box,
   so the sea itself is still edge-to-edge */
.journey__scene { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; }
.journey__map { width: 100%; height: auto; aspect-ratio: 1200 / 460; display: block; overflow: visible; }

/* ocean surface: noise mottling, breathing sun-glint, layered swells that
   drift one wavelength (seamless) while their wrappers bob — the water lives */
.jm-watertex { opacity: 0.62; mix-blend-mode: soft-light; pointer-events: none; }
.jm-glint { pointer-events: none; animation: jmGlintPulse 9s ease-in-out infinite alternate; }
@keyframes jmGlintPulse { from { opacity: 0.75; } to { opacity: 1; } }
.jm-wave {
  fill: none; stroke: #ecf7ff; stroke-linecap: round;
  will-change: transform;
  animation: jmOcean var(--dur, 16s) linear infinite;
}
@keyframes jmOcean { to { transform: translateX(var(--wl, -120px)); } }
.jm-swell { animation: jmBob var(--bobd, 7s) ease-in-out infinite alternate; }
@keyframes jmBob {
  from { transform: translateY(calc(-1 * var(--bob, 2px))); }
  to   { transform: translateY(var(--bob, 2px)); }
}
/* cloud shadows drifting over sea and land */
.jm-cloud {
  fill: #0e2f4e; opacity: 0.06; filter: blur(16px);
  animation: jmCloud var(--cdur, 140s) linear infinite;
}
@keyframes jmCloud { from { transform: translateX(-700px); } to { transform: translateX(2100px); } }
/* sun sparkles winking on the water */
.jm-spark {
  fill: none; stroke: #ffffff; stroke-width: 1.5; stroke-linecap: round;
  opacity: 0; animation: jmSpark var(--sdur, 5s) ease-in-out infinite;
}
@keyframes jmSpark { 0%, 100% { opacity: 0; } 50% { opacity: 0.75; } }
/* a small flock crossing the scene now and then */
.jm-birds {
  fill: none; stroke: #24455f; stroke-width: 1.7; stroke-linecap: round;
  opacity: 0; animation: jmBirds 54s linear infinite 5s;
}
@keyframes jmBirds {
  0%   { transform: translate(-140px, 150px); opacity: 0; }
  4%   { opacity: 0.5; }
  96%  { opacity: 0.5; }
  100% { transform: translate(1420px, 86px); opacity: 0; }
}

/* land masses: shaded green fill (coastal → inland), coastal foam ring + cast shadow */
.jm-land { filter: url(#jmLandFx); }
.jm-land path {
  fill: url(#jmLand);
  stroke: #35502a; stroke-width: 1; stroke-opacity: 0.5;
  stroke-linejoin: round;
}
.jm-land .jm-ireland { fill-opacity: 0.92; }
.jm-map-label {
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  letter-spacing: 0.26em; fill: #f4faff; text-anchor: middle; opacity: 0.9;
  paint-order: stroke; stroke: rgba(14, 47, 78, 0.35); stroke-width: 3px;
  filter: drop-shadow(0 1px 4px rgba(14, 47, 78, 0.45));
}

/* Idukki: topo contours + a slow radiating pulse, "this is where it starts" */
.jm-contours ellipse {
  stroke: var(--green-cardamom); stroke-width: 1.1; fill: none;
  stroke-dasharray: 4 6; opacity: 0.55;
}
.jm-pulse circle {
  stroke: var(--green-fresh); stroke-width: 1.5; fill: none;
  opacity: 0;
  transform-box: fill-box;      /* scale from the circle itself, not the viewBox origin */
  transform-origin: center;
  animation: jmPulse 3.2s var(--ease) infinite;
}
.jm-pulse circle:nth-child(2) { animation-delay: 1.05s; }
.jm-pulse circle:nth-child(3) { animation-delay: 2.1s; }
@keyframes jmPulse {
  0%   { transform: scale(0.5); opacity: 0.9; }
  80%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* sea foam: brighter wake-crests along the crossing while the ship is out */
.jm-sea path {
  stroke: #eef4ee; stroke-width: 1.6; fill: none;
  stroke-linecap: round; opacity: 0;
  transition: opacity 0.8s var(--ease);
}
.jm-sea.is-on path { opacity: 0.7; animation: jmWave 4s ease-in-out infinite; }
.jm-sea path:nth-child(2) { animation-delay: 0.9s; }
.jm-sea path:nth-child(3) { animation-delay: 1.7s; }
.jm-sea path:nth-child(4) { animation-delay: 2.5s; }
@keyframes jmWave {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(9px); }
}

/* the High Range route: muted green line, just a whisper of depth over the sea */
.jm-route {
  stroke: #6f9a45; stroke-width: 2.8; fill: none; opacity: 0.9;
  stroke-linecap: round;
  filter: drop-shadow(0 1px 1.5px rgba(28, 59, 46, 0.28));
}
/* once the line is complete, cargo pulses stream along it */
.jm-flow {
  fill: none; stroke: #f2f8e6; stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 0.1 16;
  opacity: 0; transition: opacity 1s var(--ease);
}
.jm-flow.is-on { opacity: 0.55; animation: jmFlowDash 1.15s linear infinite; }
@keyframes jmFlowDash { to { stroke-dashoffset: -16.1; } }
/* the glowing pen tip that leads the line when the ship isn't carrying it */
.jm-tip {
  fill: #ffffff; opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.95));
  transition: opacity 0.35s var(--ease);
}
.jm-tip.is-on { opacity: 0.95; }

@media (prefers-reduced-motion: reduce) { .jm-ripple { animation: none; } }

/* 02 · curing rack: pods on the rack, heat shimmering upward */
.jm-cure line { stroke: var(--earth-soil); stroke-width: 1.6; stroke-linecap: round; }
.jm-cure ellipse { fill: var(--green-fresh); opacity: 0.9; }
.jm-cure { opacity: 0; transition: opacity 0.6s var(--ease); }
.jm-cure.is-on { opacity: 1; }

/* 03a/04a · cargo beats: crates on the dock, pods hopping aboard / ashore */
.jm-cargo { opacity: 0; transition: opacity 0.5s var(--ease); }
.jm-cargo.is-on { opacity: 1; }
.jm-crates rect { fill: #c99c5e; stroke: #8a6234; stroke-width: 1; }
.jm-pod ellipse { fill: var(--green-fresh); stroke: #3e6030; stroke-width: 1; }
.jm-pod path { fill: none; stroke: #3e6030; stroke-width: 0.9; opacity: 0.8; }
.jm-steam {
  stroke: var(--green-cardamom); stroke-width: 1.4; fill: none;
  stroke-linecap: round; stroke-dasharray: 26; stroke-dashoffset: 26;
}
.is-on .jm-steam { animation: jmSteam 2.6s ease-out infinite; }
.is-on .jm-steam:nth-of-type(2), .is-on .jm-steam:nth-child(2) { animation-delay: 0.7s; }
.is-on .jm-steam:nth-of-type(3), .is-on .jm-steam:nth-child(3) { animation-delay: 1.4s; }
@keyframes jmSteam {
  0%   { stroke-dashoffset: 26; opacity: 0; }
  25%  { opacity: 0.75; }
  70%  { stroke-dashoffset: 0; opacity: 0.5; }
  100% { stroke-dashoffset: -8; opacity: 0; }
}

/* 03 · Lottie cargo ship: JS sets #jmShip's transform along the route */
.jm-ship { opacity: 0; transition: opacity 0.5s var(--ease); overflow: visible; }
.jm-ship.is-on { opacity: 1; }
.jm-lottie {
  width: 100%; height: 100%; cursor: pointer;
  transform-origin: 50% 64%;           /* grow around the waterline (the route point) */
  transition: transform 0.45s var(--ease);
  filter: drop-shadow(0 4px 6px rgba(28, 59, 46, 0.22));
}
.jm-lottie:hover { transform: scale(1.7); }   /* linger to admire the ship */
.jm-lottie svg { display: block; width: 100% !important; height: 100% !important; overflow: visible; }

/* 04 · arrival steam at the UK marker */
.jm-arrive { opacity: 0; transition: opacity 0.6s var(--ease); }
.jm-arrive.is-on { opacity: 1; }

.jm-wp circle {
  fill: var(--cream); stroke: var(--green-cardamom); stroke-width: 2;
}
.jm-wp .jm-wp-core { fill: var(--green-fresh); stroke: none; r: 5; }
.jm-wp { opacity: 0; transition: opacity 0.4s var(--ease); }
.jm-wp.is-on { opacity: 1; }
/* springy pop as each waypoint lights up */
.jm-wp-pop {
  transform: scale(0.35); transform-box: fill-box; transform-origin: center;
  transition: transform 0.55s cubic-bezier(0.2, 1.65, 0.4, 1);
}
.jm-wp.is-on .jm-wp-pop { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .jm-pulse circle, .jm-sea.is-on path, .jm-wave, .jm-swell, .jm-cloud,
  .jm-spark, .jm-birds, .jm-glint, .jm-flow.is-on, .is-on .jm-steam { animation: none; }
  .is-on .jm-steam { stroke-dashoffset: 0; opacity: 0.5; }
  .jm-sea.is-on path { opacity: 0.35; }
  .jm-cargo .jm-pod { display: none; }   /* SMIL hops can't be paused from CSS */
}

.jm-tangle path {
  stroke: rgba(240, 226, 200, 0.55); stroke-width: 1.8; fill: none;
  stroke-dasharray: 7 6;
}
.jm-tangle circle { fill: none; stroke: rgba(240, 226, 200, 0.65); stroke-width: 1.4; }
.jm-tangle text {
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.14em;
  fill: #f0e2c8; text-anchor: middle; font-weight: 600;
  paint-order: stroke; stroke: rgba(14, 47, 78, 0.4); stroke-width: 2.5px;
}
.jm-tangle { opacity: 0; transition: opacity 0.6s var(--ease); }
.jm-tangle.is-on { opacity: 0.85; }

.journey__caps { position: absolute; inset: 0; pointer-events: none; }
/* frosted cards keep the story legible over open water */
.journey__cap {
  position: absolute; left: var(--cx); top: var(--cy);
  max-width: 250px; padding: 12px 16px 13px;
  background: rgba(252, 253, 250, 0.78);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(14, 47, 78, 0.2), 0 2px 6px rgba(14, 47, 78, 0.12);
  opacity: 0; transform: translateY(16px) scale(0.96);
  transition: opacity 0.55s var(--ease), transform 0.6s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.journey__cap.is-on { opacity: 1; transform: none; }
.journey__cap b {
  display: block; font-size: 12.5px; letter-spacing: 0.14em;
  color: var(--green-deep); margin-bottom: 5px;
}
.journey__cap span { font-size: 14px; line-height: 1.55; color: #34503f; }

.journey__verdict {
  display: flex; justify-content: space-between; gap: var(--s6);
  max-width: 1280px; margin: var(--s6) auto 0;
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.journey__verdict.is-on { opacity: 1; transform: none; }
.journey__verdict p {
  font-size: 13px; letter-spacing: 0.16em; font-weight: 600;
  padding: 14px 20px 16px; border-radius: 14px;
  background: rgba(252, 253, 250, 0.78);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 30px rgba(14, 47, 78, 0.18);
}
.journey__verdict-a { color: var(--earth-soil); }
.journey__verdict-b { color: var(--green-deep); text-align: right; }
.journey__verdict span {
  display: block; margin-top: 6px;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 20px; letter-spacing: 0; text-transform: none;
}
.journey__verdict-b span { color: var(--green-cardamom); font-weight: 600; }

@media (min-width: 1001px) and (hover: hover) {
  .journey { height: 200vh; }
  .journey__pin {
    position: sticky; top: 0; min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--s6) var(--s7);
    overflow: hidden;   /* clip the bleeding ocean to the pinned viewport */
  }
  .journey__pin > * { flex-shrink: 0; }
  .journey__head { margin-bottom: var(--s5); }
}
@media (max-width: 1000px) {
  .journey__scene { overflow: hidden; border-radius: var(--r-lg); }   /* clip the sea bleed to the map box */
  .journey__verdict { flex-direction: column; }
  .journey__verdict-b { text-align: left; }

  /* static fallback -- only when the scene is NOT being scroll-driven
     (no JS, or reduced motion): show the finished journey, everything visible */
  .journey:not(.is-live) .jm-wp,
  .journey:not(.is-live) .jm-tangle,
  .journey:not(.is-live) .jm-cure,
  .journey:not(.is-live) .jm-ship,
  .journey:not(.is-live) .jm-arrive,
  .journey:not(.is-live) .journey__cap,
  .journey:not(.is-live) .journey__verdict { opacity: 1; transform: none; }
  .journey:not(.is-live) .jm-sea path { opacity: 0.35; }
  .journey:not(.is-live) .jm-tangle { opacity: 0.75; }
  .journey:not(.is-live) .journey__caps { position: static; display: grid; gap: var(--s4); margin-top: var(--s5); }
  .journey:not(.is-live) .journey__cap { position: static; max-width: none; }

  /* LIVE scroll scene on phones: the section gets a scroll runway and the
     map pins, so the ship sails as you scroll -- same story as desktop,
     but the captions swap through one slot instead of sitting over the map */
  .journey.is-live { height: 200vh; }   /* see also the (hover: none) copy below for tablets */
  .journey.is-live .journey__pin {
    position: sticky; top: 0; min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--s7) var(--s5); overflow: hidden;
  }
  .journey.is-live .journey__pin > * { flex-shrink: 0; }
  .journey.is-live .journey__head { margin-bottom: var(--s5); }
  /* one caption slot: caps stack in place, the newest paints on top */
  .journey.is-live .journey__caps {
    position: relative; inset: auto; display: block;
    min-height: 92px; margin-top: var(--s5);
  }
  .journey.is-live .journey__cap {
    position: absolute; left: 0; top: 0; right: 0;
    max-width: none; background: rgba(252, 253, 250, 0.96);
  }
}

/* tablets/touch screens wider than 1000px: same pinned runway, so the
   scene never lands between the phone rules and the desktop (hover) rules */
@media (min-width: 1001px) and (hover: none) {
  .journey.is-live { height: 200vh; }
  .journey.is-live .journey__pin {
    position: sticky; top: 0; min-height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--s6) var(--s7); overflow: hidden;
  }
  .journey.is-live .journey__pin > * { flex-shrink: 0; }
}

/* ============================================================
   Estate
   ============================================================ */
.estate {
  position: relative; background: var(--green-deep);
  padding: var(--s10) var(--s7);
  overflow: hidden;
}
/* faint topo contours give the dark panel depth without competing */
.estate::before {
  content: ""; position: absolute; left: -180px; bottom: -220px;
  width: 560px; height: 560px; pointer-events: none; opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%237CAF54' stroke-width='1.1' stroke-dasharray='4 7' opacity='0.35'%3E%3Cellipse cx='300' cy='300' rx='260' ry='215'/%3E%3Cellipse cx='296' cy='304' rx='215' ry='172'/%3E%3Cellipse cx='304' cy='297' rx='170' ry='132'/%3E%3Cellipse cx='298' cy='302' rx='125' ry='94'/%3E%3Cellipse cx='302' cy='299' rx='80' ry='58'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
}
.estate__head { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto var(--s7); }
.estate__sub {
  color: var(--green-light); font-size: 17px; line-height: 1.7;
  max-width: 62ch; margin-top: var(--s5);
}
.estate__diagram { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; }
.estate__diagram svg { width: 100%; height: auto; overflow: visible; }

/* altitude lines rise in sequence once the section is in view */
.es-alt-item {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.estate.is-inview .es-alt-item:nth-child(1) { transition-delay: 0.1s; }
.estate.is-inview .es-alt-item:nth-child(2) { transition-delay: 0.3s; }
.estate.is-inview .es-alt-item:nth-child(3) { transition-delay: 0.5s; }
.estate.is-inview .es-alt-item { opacity: 1; transform: none; }
.es-alt line { stroke: rgba(246,239,227,0.16); stroke-width: 1; stroke-dasharray: 3 6; }
.es-alt text {
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.2em;
  fill: var(--green-fresh); font-weight: 600;
}
/* the 1,100m rule is the hero line, with the live altitude count */
.es-alt-item--hero line { stroke: rgba(124, 175, 84, 0.5); stroke-dasharray: none; }
.es-alt-item--hero text { fill: #a5d97a; font-size: 12px; }

/* layered ridges: JS nudges far/mid vertically for parallax depth */
.es-ridge { will-change: transform; }
.es-ridge--far { fill: url(#esRidgeFarG); }
.es-ridge--mid { fill: url(#esRidgeMidG); }

/* cool-night sky: breathing moon halo, faint twinkling stars */
.es-moon { animation: esMoonGlow 7s ease-in-out infinite alternate; }
@keyframes esMoonGlow { from { opacity: 0.85; } to { opacity: 1; } }
.es-star { fill: rgba(246, 239, 227, 0.8); opacity: 0.15; animation: esTwinkle 4.5s ease-in-out infinite; }
@keyframes esTwinkle { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.7; } }

/* ridge line: drawn by the scrub engine via stroke-dashoffset, with a soft glow */
.es-hill {
  stroke: var(--green-fresh); stroke-width: 2.5; fill: none; stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(124, 175, 84, 0.5));
}
/* the slope glows in beneath the line as it completes */
.es-fill { opacity: 0; transition: opacity 0.9s var(--ease); }
.es-fill.is-on { opacity: 1; }

/* marker pops + pulses once the line reaches the plantation; the shade grove
   springs out of the hillside with it */
.es-marker {
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.es-marker.is-on { opacity: 1; }
.es-marker circle { fill: none; stroke: var(--cream); stroke-width: 1.5; }
.es-marker .es-marker-core { fill: var(--green-fresh); stroke: none; }
.es-marker .es-marker-pulse {
  fill: none; stroke: var(--green-fresh); stroke-width: 1.5;
  transform-box: fill-box; transform-origin: center;
  animation: esPulse 2.4s var(--ease) infinite paused;
}
.es-marker.is-on .es-marker-pulse { animation-play-state: running; }
@keyframes esPulse {
  0%   { transform: scale(1);   opacity: 0.9; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
.es-marker text {
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em;
  fill: var(--cream); font-weight: 600;
}
.es-grove {
  transform: scale(0.55); transform-box: fill-box; transform-origin: 50% 100%;
  transition: transform 0.7s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.es-marker.is-on .es-grove { transform: scale(1); }
.es-grove line { stroke: #4E7D3C; stroke-width: 2; stroke-linecap: round; }
.es-grove ellipse { fill: #55873F; stroke: #7CAF54; stroke-width: 1; }
.es-grove .es-cardamom { fill: none; stroke: #8FBE68; stroke-width: 1.3; stroke-linecap: round; }

/* mist drifts along the ridges, slow enough to feel like weather */
.es-mistband {
  fill: var(--cream); filter: blur(12px); will-change: transform;
  animation: esMistDrift var(--mdur, 40s) ease-in-out infinite alternate;
}
@keyframes esMistDrift {
  from { transform: translateX(calc(-1 * var(--mdrift, 180px))); }
  to   { transform: translateX(var(--mdrift, 180px)); }
}

/* night birds crossing the sky */
.es-birds {
  fill: none; stroke: rgba(246, 239, 227, 0.45); stroke-width: 1.6; stroke-linecap: round;
  opacity: 0; animation: esBirds 46s linear infinite 8s;
}
@keyframes esBirds {
  0%   { transform: translate(1200px, 70px); opacity: 0; }
  5%   { opacity: 0.6; }
  95%  { opacity: 0.6; }
  100% { transform: translate(-160px, 130px); opacity: 0; }
}
.estate__facts {
  position: relative; z-index: 1;
  max-width: 1100px; margin: var(--s8) auto 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5);
}
/* data-readout tiles: glassy cards with living icons */
.estate__fact {
  background: rgba(246, 239, 227, 0.045);
  border: 1px solid rgba(124, 175, 84, 0.22);
  border-radius: 16px;
  padding: var(--s5);
  transition: transform 0.35s var(--ease), border-color 0.35s, background 0.35s;
}
.estate__fact:hover {
  transform: translateY(-4px); border-color: var(--green-fresh);
  background: rgba(246, 239, 227, 0.07);
}
.estate__fact-icon { display: block; width: 30px; height: 30px; margin-bottom: var(--s3); }
.estate__fact-icon svg {
  width: 100%; height: 100%; fill: none; overflow: visible;
  stroke: var(--green-fresh); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
/* living icons: leaf sway, monsoon drips, sprouting palms */
.estate__fact:nth-child(1) .estate__fact-icon svg {
  transform-origin: 30% 80%; animation: esLeafSway 6s ease-in-out infinite alternate;
}
@keyframes esLeafSway { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
.es-ico-drop { animation: esDrip 1.8s ease-in infinite; }
.estate__fact .es-ico-drop:nth-of-type(2) { animation-delay: 0.6s; }
.estate__fact .es-ico-drop:nth-of-type(3) { animation-delay: 1.2s; }
@keyframes esDrip {
  0%   { transform: translateY(0); opacity: 0; }
  25%  { opacity: 0.9; }
  70%  { opacity: 0.9; }
  100% { transform: translateY(4px); opacity: 0; }
}
.es-ico-leaf { transform-origin: 50% 100%; animation: esLeafSway 5s ease-in-out infinite alternate; }
.estate__fact b {
  display: block; color: var(--green-fresh); font-size: 12px;
  letter-spacing: 0.16em; margin-bottom: var(--s2);
}
.estate__fact span { color: var(--green-light); font-size: 14px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) {
  .es-star, .es-birds, .es-mistband, .es-moon, .es-ico-drop, .es-ico-leaf,
  .estate__fact-icon svg, .es-marker-pulse { animation: none; }
}
@media (max-width: 900px) { .estate__facts { grid-template-columns: 1fr 1fr; } }
/* viewBox scaling shrinks SVG text to ~3px on phones; compensate in
   viewBox units so labels stay legible (30 units ≈ 10px at 375w) */
@media (max-width: 700px) {
  .es-alt text { font-size: 30px; letter-spacing: 0.1em; }
  .es-marker text { font-size: 32px; letter-spacing: 0.1em; }
}

/* ============================================================
   Harvest calendar
   ============================================================ */
.calendar { padding: var(--s10) var(--s7); max-width: 1200px; margin: 0 auto; }
.calendar__head { margin-bottom: var(--s7); }
.calendar__sub { font-size: 16px; line-height: 1.7; color: var(--earth-soil); max-width: 60ch; margin-top: var(--s5); }
.calendar__chart { position: relative; }
.calendar__chart svg { width: 100%; height: auto; overflow: visible; }

.cs-base { stroke: rgba(70, 99, 62, 0.16); stroke-width: 1.2; }

/* ---- Western Ghats landscape: layered ridges with aerial perspective ---- */
.cs-mtn--far  { fill: #c6d2be; opacity: 0.7; }
.cs-mtn--mid  { fill: #a8bd9a; opacity: 0.92; }
.cs-mtn--near { fill: #85a572; }
.cs-fg        { fill: #5c7f43; }              /* nearest slope where the crop sits */
.cs-haze      { fill: rgba(242, 245, 236, 0.62); }

/* ---- Sun (high, hazy) + soft light shafts over the harvest slopes ---- */
.cs-sun { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.cs-sun.is-on { opacity: 1; transform: none; }
.cs-sun-disc { fill: #eac861; opacity: 0.6; }   /* hazy disc, no hard spokes */
.cs-sun-glow { transform-box: fill-box; transform-origin: center; animation: csGlow 6s ease-in-out infinite alternate; }
@keyframes csGlow { from { transform: scale(0.95); opacity: 0.82; } to { transform: scale(1.07); opacity: 1; } }
.cs-rays { opacity: 0.85; animation: csRayBreathe 7s ease-in-out infinite alternate; }
@keyframes csRayBreathe { from { opacity: 0.6; } to { opacity: 0.95; } }

/* ---- Monsoon weather system over the growth months (~Jun-Sep) ---- */
.cs-monsoon { opacity: 0; transition: opacity 0.9s var(--ease); }
.cs-monsoon.is-on { opacity: 1; }
.cs-monsoon text {
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.2em;
  fill: var(--green-cardamom); font-weight: 600; text-anchor: middle; opacity: 0.7;
}
/* clouds carry their own fills (inline) + a blur filter → soft nimbus */
.cs-cloud { will-change: transform; opacity: 0.42; animation: csDrift 13s ease-in-out infinite alternate; }
.cs-cloud--b { animation-duration: 16s; animation-delay: -6s; opacity: 0.32; }
@keyframes csDrift { from { transform: translateX(-10px); } to { transform: translateX(12px); } }
.cs-mist { fill: rgba(240, 244, 232, 0.5); }

.cs-rain line { stroke: #5f7a54; stroke-width: 1.5; stroke-linecap: round; stroke-opacity: 0.42; }
.cs-rain { animation: csRain 1.5s linear infinite; }
.cs-rain--1 { animation-delay: -0.5s; }
.cs-rain--2 { animation-delay: -1s; }
@keyframes csRain {
  0%   { transform: translate(6px, -20px); opacity: 0; }
  18%  { opacity: 0.9; }
  82%  { opacity: 0.65; }
  100% { transform: translate(-7px, 116px); opacity: 0; }
}

.cs-wind {
  fill: none; stroke: var(--green-fresh); stroke-width: 2; stroke-linecap: round;
  stroke-opacity: 0.5; stroke-dasharray: 40 210; animation: csWind 3.6s linear infinite;
}
.cs-wind--b { animation-duration: 4.4s; animation-delay: -1.4s; stroke-opacity: 0.4; }
.cs-wind--c { animation-duration: 5.2s; animation-delay: -2.6s; stroke-opacity: 0.32; }
@keyframes csWind { from { stroke-dashoffset: 250; } to { stroke-dashoffset: -250; } }

/* ---- Cardamom understorey: filled, shaded, layered for depth ---- */
.cs-leaf { fill: url(#leafGrad); stroke: #2c4622; stroke-width: 0.5; stroke-opacity: 0.35; }
.cs-leaf--back { fill: url(#leafGradBack); stroke: none; }
.cs-vein { fill: none; stroke: #2b4522; stroke-width: 0.7; stroke-opacity: 0.3; }
.cs-shadow { fill: rgba(44, 62, 38, 0.14); }
.cs-panicle { fill: none; stroke: var(--earth-soil); stroke-width: 1.4; stroke-linecap: round; stroke-opacity: 0.65; }
.cs-podfruit { fill: #cfe0a3; stroke: #9db56f; stroke-width: 0.4; }
.cs-plant--back { opacity: 0.5; }   /* aerial perspective: distant clumps recede */
.cs-plant {
  /* view-box + per-plant transform-origin (set inline in px = viewBox units),
     so each plant sways around its own base rather than the SVG origin */
  transform-box: view-box;
  animation: csSway var(--dur, 4s) ease-in-out infinite alternate;
  animation-delay: var(--sd, 0s);
}
@keyframes csSway {
  from { transform: rotate(calc(-1 * var(--amp, 2deg))); }
  to   { transform: rotate(var(--amp, 2deg)); }
}

/* ---- Intensity wave + travelling pod on the crest ---- */
.cs-curve { stroke: var(--green-fresh); stroke-width: 2.5; stroke-linecap: round; }
.cs-fill { opacity: 0; transition: opacity 0.9s var(--ease); }
.cs-fill.is-on { opacity: 1; }
.cs-tracer { opacity: 0; transition: opacity 0.4s var(--ease); }
.cs-tracer.is-on { opacity: 1; }
.cs-tracer-dot { fill: var(--green-fresh); }
.cs-tracer-halo {
  fill: var(--green-fresh); transform-box: fill-box; transform-origin: center;
  animation: csTracerPulse 1.8s ease-in-out infinite;
}
@keyframes csTracerPulse {
  0%, 100% { transform: scale(0.7); opacity: 0.28; }
  50%      { transform: scale(1.2); opacity: 0.08; }
}

/* ---- Picking rounds pop in, pod by pod ---- */
.cs-rounds circle { fill: var(--green-fresh); }
.cs-round-col circle {
  opacity: 0; transform: translateY(10px);
  transform-box: fill-box; transform-origin: center;
  transition: opacity 0.45s var(--ease) calc(var(--d, 0s) + var(--dd, 0s)),
              transform 0.45s var(--ease) calc(var(--d, 0s) + var(--dd, 0s));
}
.cs-rounds.is-on .cs-round-col circle { opacity: 1; transform: none; }
.cs-rounds .cs-round-col circle.is-tail { fill: var(--earth-clay); }
.cs-rounds.is-on .cs-round-col circle.is-tail { opacity: 0.62; }

.cs-months text {
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.16em;
  fill: var(--earth-soil); font-weight: 600; text-anchor: middle; opacity: 0.45;
}
.cs-months text.on { opacity: 1; fill: var(--green-deep); }

@media (prefers-reduced-motion: reduce) {
  .cs-rays, .cs-sun-glow, .cs-cloud, .cs-rain, .cs-wind, .cs-plant, .cs-tracer-halo { animation: none; }
}
/* when GSAP owns these opacities/transforms, drop the CSS transitions so the
   scrubbed timeline isn't double-animated */
.has-gsap .cs-monsoon, .has-gsap .cs-sun,
.has-gsap .cs-fill, .has-gsap .cs-round-col circle { transition: none !important; }

/* the claim chip floats over the quiet Mar-May zone, clear of the band label */
.calendar__chip {
  position: absolute; left: 17%; top: 6%;
  display: flex; align-items: center; gap: var(--s3);
  background: var(--green-deep);
  border-radius: var(--r-md);
  padding: var(--s4) var(--s5);
  box-shadow: 0 20px 44px -20px rgba(28, 59, 46, 0.6);
}
.calendar__chip-num {
  font-family: var(--font-display); font-weight: 400;
  font-size: 40px; line-height: 1; color: var(--green-fresh);
}
.calendar__chip-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em;
  line-height: 1.5; color: var(--green-light);
}

.calendar__legend {
  display: flex; gap: var(--s6); margin-top: var(--s6); flex-wrap: wrap;
  font-size: 13px; color: var(--earth-soil); align-items: center;
}
.calendar__legend .lg {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  margin-right: 8px; vertical-align: middle;
}
.lg--pick { background: var(--green-fresh); }
.lg--tail { background: var(--earth-clay); opacity: 0.65; }
.calendar__note {
  margin-left: auto; font-style: italic; font-family: var(--font-display);
  color: var(--green-cardamom);
  border-bottom: 1px solid rgba(70, 99, 62, 0.35);
  padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
}
.calendar__note:hover { color: var(--green-deep); border-color: var(--green-deep); }
@media (max-width: 900px) {
  .calendar__note { margin-left: 0; }
  /* the chart is only ~110px tall here; the chip flows above it instead */
  .calendar__chip {
    position: static; display: inline-flex;
    margin-bottom: var(--s5); padding: var(--s3) var(--s4);
  }
  .calendar__chip-num { font-size: 30px; }
}
/* SVG text shrinks with the viewBox on phones; compensate in viewBox units */
@media (max-width: 700px) {
  .cs-months text { font-size: 26px; }
  .cs-band text { font-size: 24px; }
  /* rain, gusts and plants collapse into noise at this scale */
  .cs-rain, .cs-gust, .cs-forest { display: none; }
}

/* ============================================================
   Product
   ============================================================ */
.product {
  display: grid; grid-template-columns: 1.1fr 1fr;
  min-height: 100vh; background: var(--warm-grey);
}
.product__media { position: relative; overflow: hidden; }
.product__media .img-grade { position: absolute; inset: 0; }
/* keep the pack line-up framed as the tall column crops the landscape shot */
.product__media .img-grade img { object-position: 50% 42%; }
/* floating badge tracks the selected grade */
.product__float {
  position: absolute; bottom: var(--s7); left: var(--s7); z-index: 1;
  background: var(--cream); border-radius: var(--r-md);
  padding: var(--s4) var(--s6);
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 24px 60px -20px rgba(28,59,46,0.45);
}
.product__float-size {
  font-family: var(--font-display); font-weight: 400; font-size: 46px;
  color: var(--green-deep); line-height: 1;
}
.product__float-label {
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--earth-soil); font-weight: 600;
}
/* the badge pops when a new grade lands on it */
.product__float.is-pop { animation: floatPop 0.5s var(--ease); }
@keyframes floatPop { 0% { transform: scale(1); } 40% { transform: scale(1.09); } 100% { transform: scale(1); } }
.product__panel {
  padding: var(--s8) var(--s8); display: flex; flex-direction: column;
  justify-content: center; gap: var(--s5);
}
.product__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 3.4vw, 48px); line-height: 1.05; color: var(--ink);
}
.product__desc { font-size: 16px; line-height: 1.6; color: var(--earth-soil); max-width: 46ch; }

/* grade explorer -------------------------------------------------- */
.product__grade-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.grade {
  position: relative;              /* anchors the seed burst */
  padding: 11px 20px; border-radius: var(--r-pill);
  border: 1.5px solid var(--green-cardamom);
  background: transparent; color: var(--green-cardamom);
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  transition: background 0.3s, color 0.3s, transform 0.3s var(--ease);
}
.grade:hover { transform: translateY(-2px); }
.grade.is-active { background: var(--green-deep); border-color: var(--green-deep); color: var(--cream); }
/* picking a grade cracks a pod: dark cardamom seeds scatter from the button */
.grade-seed {
  position: absolute; left: 50%; top: 50%;
  width: 6px; height: 8px; border-radius: 60% 60% 55% 55%;
  background: #3E2F23; pointer-events: none; z-index: 2;
}

/* the spec card behaves like the understorey: a canopy-light sheen follows
   the cursor (--mx/--my from JS) and the pods lean toward it like plants */
.product__spec {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s6);
  align-items: center;
  margin-top: var(--s5);
  padding: var(--s5) var(--s6);
  background:
    radial-gradient(240px circle at var(--mx, 120%) var(--my, -40%),
      rgba(124, 175, 84, 0.16), transparent 70%),
    var(--cream);
  border-radius: var(--r-lg);
  border: 1px solid var(--green-light);
}
/* three pods drawn at their true relative sizes; the selected one lifts.
   The wrapper carries the proximity lift, the svg carries the lean. */
.product__pods { display: flex; align-items: flex-end; gap: var(--s3); }
.ppod {
  display: block;
  transform: translateY(var(--lift, 0px));
  transition: transform 0.45s var(--ease);
}
.ppod.is-active { transform: translateY(calc(var(--lift, 0px) - 4px)); }
.ppod svg {
  display: block; height: auto;
  transform: rotate(var(--lean, 0deg));
  transform-origin: 50% 88%;             /* pods pivot at their base */
  transition: transform 0.55s cubic-bezier(0.22, 1.4, 0.36, 1);
}
.ppod.is-active svg { transform: rotate(var(--lean, 0deg)) scale(1.06); }
.ppod--s svg { width: 30px; }
.ppod--m svg { width: 42px; }
.ppod--l svg { width: 54px; }
.ppod__shell {
  fill: none; stroke: var(--green-cardamom); stroke-width: 6;
  opacity: 0.4; transition: fill 0.4s var(--ease), opacity 0.4s var(--ease), stroke 0.4s;
}
.ppod__ridge { stroke: var(--green-deep); stroke-width: 4; opacity: 0; transition: opacity 0.4s; }
.ppod.is-active .ppod__shell { fill: var(--green-fresh); stroke: var(--green-deep); opacity: 1; }
.ppod.is-active .ppod__ridge { opacity: 0.4; }

/* readout values rise back in one after another on every grade swap */
.product__readout {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s5);
}
.product__readout > div {
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.product__readout > div:nth-child(2) { transition-delay: 0.05s; }
.product__readout > div:nth-child(3) { transition-delay: 0.1s; }
.product__readout > div:nth-child(4) { transition-delay: 0.15s; }
.product__readout.is-swap > div {
  opacity: 0; transform: translateY(9px);
  transition-delay: 0s; transition-duration: 0.18s;
}
.product__readout-wide { grid-column: 1 / -1; }
.product__readout dt {
  font-size: 10px; letter-spacing: 0.18em; font-weight: 600;
  color: var(--green-cardamom); margin-bottom: 3px;
}
.product__readout dd { font-size: 15px; color: var(--ink); line-height: 1.35; }

/* trade terms: data-readout row; hovering a term grows a fresh-green accent
   along its slice of the top rule */
.product__terms {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4);
  padding-top: var(--s5); border-top: 1px solid var(--green-light);
}
.product__terms > div { position: relative; transition: transform 0.35s var(--ease); }
.product__terms > div::before {
  content: ""; position: absolute; left: 0; top: calc(-1 * var(--s5) - 1px);
  width: 0; height: 2px; background: var(--green-fresh);
  transition: width 0.5s var(--ease);
}
.product__terms > div:hover { transform: translateY(-3px); }
.product__terms > div:hover::before { width: 100%; }
.product__terms b {
  display: block; font-size: 10px; letter-spacing: 0.14em;
  color: var(--green-cardamom); margin-bottom: var(--s1);
}
.product__terms span { font-size: 14px; color: var(--ink); line-height: 1.35; }
@media (prefers-reduced-motion: reduce) {
  .product__float.is-pop { animation: none; }
  .ppod, .ppod svg, .product__terms > div { transition: none; }
}

.product__cta { display: grid; gap: var(--s3); max-width: 400px; }
.product__note { font-size: 12px; color: var(--earth-soil); letter-spacing: 0.04em; }

@media (max-width: 900px) {
  .product { grid-template-columns: 1fr; }
  .product__media { min-height: 56vh; }
  .product__panel { padding: var(--s8) var(--s5); }
  .product__terms { grid-template-columns: 1fr 1fr; gap: var(--s5); }
}
@media (max-width: 560px) {
  .product__spec { grid-template-columns: 1fr; gap: var(--s5); }
  .product__pods { justify-content: flex-start; }
}

/* ============================================================
   Statement
   ============================================================ */
.statement {
  position: relative; min-height: 88vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.statement__media { position: absolute; inset: -12% 0; }
/* the tint is a torch: a pool of light follows the cursor (--tx/--ty from JS),
   the rest of the frame stays deep green. Registered props transition, so the
   pool glides rather than snaps. */
@property --tx { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@property --ty { syntax: '<percentage>'; inherits: false; initial-value: 46%; }
.statement__tint {
  position: absolute; inset: 0;
  background: radial-gradient(min(46vw, 560px) circle at var(--tx) var(--ty),
    rgba(28, 59, 46, 0.22) 0%, rgba(28, 59, 46, 0.5) 48%, rgba(28, 59, 46, 0.8) 82%);
  transition: --tx 0.4s ease-out, --ty 0.4s ease-out;
}
/* no fine pointer: the light drifts across the hands on its own */
.statement--drift .statement__tint { animation: stDrift 16s ease-in-out infinite alternate; }
@keyframes stDrift {
  0%   { --tx: 32%; --ty: 38%; }
  50%  { --tx: 64%; --ty: 55%; }
  100% { --tx: 40%; --ty: 62%; }
}
/* canopy god-rays, breathing slowly */
.statement__rays { position: absolute; inset: -10%; pointer-events: none; mix-blend-mode: soft-light; }
.statement__rays span {
  position: absolute; top: -20%; height: 150%; width: 12%;
  background: linear-gradient(to bottom, rgba(246, 239, 227, 0.55), rgba(246, 239, 227, 0) 70%);
  filter: blur(22px); transform: rotate(14deg);
  animation: stRay var(--rdur, 11s) ease-in-out infinite alternate;
}
.statement__rays span:nth-child(1) { left: 18%; --rdur: 12s; }
.statement__rays span:nth-child(2) { left: 46%; width: 8%; --rdur: 9s; animation-delay: -4s; }
.statement__rays span:nth-child(3) { left: 72%; width: 15%; --rdur: 14s; animation-delay: -7s; }
@keyframes stRay {
  from { opacity: 0.35; transform: rotate(14deg) translateX(-24px); }
  to   { opacity: 0.8;  transform: rotate(14deg) translateX(24px); }
}
/* understorey leaves tumbling down the frame */
.statement__leaves { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.statement__leaf {
  position: absolute; left: var(--lx, 50%); top: -8%;
  fill: none; stroke: rgba(234, 240, 228, 0.38); stroke-width: 1.4;
  opacity: 0;
  animation: stLeaf var(--ldur, 24s) linear infinite; animation-delay: var(--ldel, 0s);
}
@keyframes stLeaf {
  0%   { transform: translate(0, -40px) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.5; }
  85%  { opacity: 0.4; }
  100% { transform: translate(-90px, 108vh) rotate(300deg); opacity: 0; }
}
.statement__content {
  position: relative; z-index: 1; text-align: center;
  padding: var(--s9) var(--s5); max-width: 900px;
}
.statement__content h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, 5.4vw, 84px); line-height: 1.04;
  color: var(--cream); margin-bottom: var(--s5);
}
/* three beats ignite in turn once the section is in view */
.statement__beat {
  display: inline-block;
  opacity: 0.12; filter: blur(6px); transform: translateY(0.35em) scale(0.98);
  transition: opacity 0.9s var(--ease), filter 0.9s var(--ease), transform 0.9s var(--ease);
}
.statement.is-lit .statement__beat { opacity: 1; filter: blur(0); transform: none; }
.statement.is-lit .statement__beat:nth-child(1) { transition-delay: 0.15s; }
.statement.is-lit .statement__beat:nth-child(2) { transition-delay: 0.75s; }
.statement.is-lit .statement__beat:nth-child(3) { transition-delay: 1.35s; }
/* the editorial gesture: "Zero" ringed, "middlemen" struck through, both
   hand-drawn in clay once the third beat lands */
.statement__zero, .statement__mid { position: relative; display: inline-block; }
.statement__ring, .statement__strike { position: absolute; pointer-events: none; overflow: visible; }
.statement__ring { left: -12%; top: -16%; width: 124%; height: 136%; }
.statement__strike { left: 0; top: 0; width: 100%; height: 100%; }
.statement__ring path, .statement__strike path {
  fill: none; stroke: #C97A4B; stroke-linecap: round;
}
.statement__ring path { stroke-width: 5.5; stroke-dasharray: 560; stroke-dashoffset: 560; }
.statement__strike path { stroke-width: 1.1; stroke-dasharray: 105; stroke-dashoffset: 105; }
.statement.is-lit .statement__ring path {
  transition: stroke-dashoffset 0.9s cubic-bezier(0.6, 0, 0.3, 1) 2.45s;
  stroke-dashoffset: 0;
}
.statement.is-lit .statement__strike path {
  transition: stroke-dashoffset 0.5s cubic-bezier(0.6, 0, 0.3, 1) 2.15s;
  stroke-dashoffset: 0;
}
.statement__sub {
  color: var(--green-light); font-size: 18px; line-height: 1.6;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.8s var(--ease) 2.9s, transform 0.8s var(--ease) 2.9s;
}
.statement.is-lit .statement__sub { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .statement__beat, .statement__sub { transition: none; opacity: 1; filter: none; transform: none; }
  .statement__ring path, .statement__strike path { transition: none !important; stroke-dashoffset: 0; }
  .statement__rays span, .statement--drift .statement__tint { animation: none; }
  .statement__leaf { display: none; }
}

/* ============================================================
   Supply + stats
   ============================================================ */
.supply { padding: var(--s9) 0 var(--s10); }
.supply__stats {
  max-width: 1160px; margin: var(--s8) auto 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  padding: 0 var(--s7);
}
.stat {
  position: relative; text-align: center; padding: var(--s5) var(--s4);
  transition: transform 0.4s var(--ease);
}
/* hairline dividers between the figures (desktop) */
@media (min-width: 801px) {
  .stat + .stat::before {
    content: ""; position: absolute; left: 0; top: 16%; bottom: 16%; width: 1px;
    background: linear-gradient(rgba(70,99,62,0), rgba(70,99,62,0.28), rgba(70,99,62,0));
  }
}
.stat__num {
  display: inline-block; position: relative;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(44px, 5.6vw, 80px); color: var(--green-deep); line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color 0.4s var(--ease);
}
/* accent line draws under each number when the section arrives */
.stat__num::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -12px; height: 3px;
  background: var(--green-fresh); border-radius: 3px;
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.7s var(--ease) 0.35s, background 0.35s;
}
.supply.is-in .stat__num::after { transform: scaleX(1); }
.stat__label {
  display: block; margin-top: var(--s5);
  font-size: 11px; letter-spacing: 0.18em; font-weight: 600; color: var(--earth-soil);
}
/* hover: the figure lifts and brightens */
.stat:hover { transform: translateY(-6px); }
.stat:hover .stat__num { color: var(--green-cardamom); }
.stat:hover .stat__num::after { transform: scaleX(1.06); background: var(--green-cardamom); }
/* "0 middlemen" is THE number: fresh green, glow, a breathing ring, no underline */
.stat--hero .stat__num { color: var(--green-fresh); text-shadow: 0 0 26px rgba(124, 175, 84, 0.45); }
.stat--hero .stat__num::after { display: none; }
.stat--hero .stat__num::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 1.3em; height: 1.3em; transform: translate(-50%, -52%);
  border-radius: 50%; border: 2px solid rgba(124, 175, 84, 0.42);
  animation: statRing 3.2s var(--ease) infinite;
}
@keyframes statRing {
  0%, 100% { transform: translate(-50%, -52%) scale(0.94); opacity: 0.35; }
  55% { transform: translate(-50%, -52%) scale(1.12); opacity: 0.75; }
}
.stat--hero:hover .stat__num { color: var(--green-fresh); }
@media (max-width: 800px) {
  .supply__stats { grid-template-columns: repeat(2, 1fr); gap: var(--s7) 0; }
}
@media (prefers-reduced-motion: reduce) {
  .stat--hero .stat__num::before { animation: none; }
  .stat__num::after { transition: none; }
}

/* ============================================================
   Kitchen break
   ============================================================ */
.kitchen {
  position: relative; min-height: 80vh; overflow: hidden;
  display: flex; align-items: flex-end;
}
.kitchen__media { position: absolute; inset: -12% 0; }
.kitchen__media img { animation: kitchenZoom 22s ease-in-out infinite alternate; }  /* slow breathing */
@keyframes kitchenZoom { from { transform: scale(1.04); } to { transform: scale(1.12); } }
.kitchen__tint {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28,59,46,0.9), rgba(28,59,46,0.12) 62%);
}
/* warm light follows the cursor and lifts the tint -- 'look into the kitchen' */
.kitchen__light {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 0.5s var(--ease); mix-blend-mode: soft-light;
  background: radial-gradient(circle 340px at var(--lx, 60%) var(--ly, 38%),
    rgba(255, 234, 186, 0.6), rgba(255, 234, 186, 0) 66%);
}
.kitchen.is-lit .kitchen__light { opacity: 1; }
.kitchen__content {
  position: relative; z-index: 2;
  padding: 0 var(--s7) var(--s9);
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s6);
  justify-content: space-between; width: 100%;
}
.kitchen__content h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 4vw, 60px); line-height: 1.06;
  color: var(--cream); max-width: 14em;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.kitchen.is-in .kitchen__content h2 { opacity: 1; transform: none; }
.kitchen__content em { color: var(--green-fresh); }
/* the three kitchen zones underline in sequence, like a chef ticking them off */
.kitchen__beat { position: relative; display: inline-block; }
.kitchen__beat::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.06em; height: 2px;
  background: var(--green-fresh); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.kitchen.is-in .kitchen__beat::after { transform: scaleX(1); }
.kitchen.is-in .kitchen__beat:nth-of-type(1)::after { transition-delay: 0.45s; }
.kitchen.is-in .kitchen__beat:nth-of-type(2)::after { transition-delay: 0.85s; }
.kitchen.is-in .kitchen__beat:nth-of-type(3)::after { transition-delay: 1.25s; }
/* the CTA: a glowing invitation with an arrow, a hover shine, and a support line */
.kitchen__cta {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.8s var(--ease) 0.5s, transform 0.8s var(--ease) 0.5s;
}
.kitchen.is-in .kitchen__cta { opacity: 1; transform: none; }
.kitchen__btn {
  position: relative; overflow: hidden;
  padding: 18px 34px; font-size: 15px;
  display: inline-flex; align-items: center; gap: 12px;
  animation: kitchenBtnGlow 3.6s ease-in-out infinite;
}
@keyframes kitchenBtnGlow {
  0%, 100% { box-shadow: 0 10px 32px -8px rgba(124, 175, 84, 0.45); }
  50% { box-shadow: 0 12px 42px -6px rgba(124, 175, 84, 0.7); }
}
.kitchen__btn-arrow { transition: transform 0.35s var(--ease); }
.kitchen__btn:hover .kitchen__btn-arrow { transform: translateX(5px); }
.kitchen__btn::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 42%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-18deg); transition: left 0.6s var(--ease); pointer-events: none;
}
.kitchen__btn:hover::after { left: 130%; }
.kitchen__cta-note { font-size: 12px; letter-spacing: 0.05em; color: rgba(246, 239, 227, 0.72); font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .kitchen__media img, .kitchen__btn { animation: none; }
  .kitchen__content h2, .kitchen__cta { opacity: 1; transform: none; transition: none; }
  .kitchen__beat::after { transition: none; transform: scaleX(1); }
  .kitchen__light { display: none; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq { padding: var(--s10) var(--s7); max-width: 900px; margin: 0 auto; }
.faq__head { margin-bottom: var(--s8); }
.faq__list { counter-reset: faq; }
.faq__item {
  counter-increment: faq;
  border-top: 1px solid var(--green-light);
}
.faq__item:last-child { border-bottom: 1px solid var(--green-light); }
.faq__item summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 2.2ch 1fr auto; align-items: center; gap: var(--s5);
  padding: var(--s5) var(--s2);
  font-family: var(--font-display); font-weight: 400; font-size: clamp(18px, 2vw, 22px);
  color: var(--ink);
  transition: color 0.35s var(--ease), padding-left 0.4s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before {
  content: counter(faq, decimal-leading-zero);
  font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  color: var(--green-fresh); font-variant-numeric: tabular-nums;
  transition: color 0.35s;
}
.faq__item summary:hover { color: var(--green-cardamom); padding-left: calc(var(--s2) + 8px); }
.faq__item[open] summary { color: var(--green-deep); }
.faq__item[open] summary::before { color: var(--green-cardamom); }
/* the +/- toggle sits in a subtle circle that fills when open */
.faq__x {
  position: relative; width: 34px; height: 34px; flex: none; border-radius: 50%;
  border: 1px solid var(--green-light);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.faq__item summary:hover .faq__x { border-color: var(--green-fresh); }
.faq__item[open] .faq__x { background: var(--green-fresh); border-color: var(--green-fresh); }
.faq__x::before, .faq__x::after {
  content: ""; position: absolute; top: 50%; left: 50%; border-radius: 2px;
  background: var(--green-cardamom);
  transition: transform 0.4s var(--ease), background 0.3s;
}
.faq__x::before { width: 13px; height: 2px; transform: translate(-50%, -50%); }
.faq__x::after { width: 2px; height: 13px; transform: translate(-50%, -50%); }
.faq__item[open] .faq__x::after { transform: translate(-50%, -50%) scaleY(0); }   /* + becomes - */
.faq__item[open] .faq__x::before, .faq__item[open] .faq__x::after { background: var(--green-deep); }
/* smooth expand/collapse (height driven by JS) */
.faq__answer { overflow: hidden; height: 0; transition: height 0.45s var(--ease); }
.faq__answer p {
  padding: 0 var(--s6) var(--s6) calc(2.2ch + var(--s5) + var(--s2)); margin: 0; max-width: 66ch;
  font-size: 15.5px; line-height: 1.7; color: var(--earth-soil);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.faq__item[open] .faq__answer p { opacity: 1; transform: none; transition-delay: 0.12s; }
@media (prefers-reduced-motion: reduce) {
  .faq__answer, .faq__answer p, .faq__x::before, .faq__x::after, .faq__item summary { transition: none; }
  .faq__answer p { opacity: 1; transform: none; }
}

/* ============================================================
   Sign-off band -- the brand name made OF the plantation
   ============================================================ */
.signoff {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(200px, 24vw, 360px);
  display: flex; align-items: center; justify-content: center;
  background: #1f3d1a;
}
/* the mossy-green plantation texture, kept visible (Seed-style bottom band) */
.signoff::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("../assets/img/hero-slide-4.jpg") 50% 66% / cover no-repeat;
  animation: signoffAmbient 42s ease-in-out infinite alternate;
}
@keyframes signoffAmbient {
  from { transform: scale(1.06); }
  to   { transform: scale(1.13); }
}
/* soft green wash so the cream wordmark reads over the leaves */
.signoff::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 120% at 50% 50%, rgba(18,42,22,0.14), rgba(16,38,20,0.5)),
    linear-gradient(rgba(22,48,26,0.28), rgba(18,42,22,0.34));
}
.signoff__content { position: relative; z-index: 1; text-align: center; padding: var(--s7) var(--s5); width: 100%; }
/* big cream wordmark sitting on the texture */
.signoff__word {
  margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(48px, 11vw, 220px); line-height: 0.9; letter-spacing: -0.03em;
  color: var(--cream);
  text-shadow: 0 10px 44px rgba(10, 26, 14, 0.55), 0 2px 12px rgba(10, 26, 14, 0.4);
}
.signoff__note {
  display: block; margin-top: var(--s6);
  font-size: 12px; letter-spacing: 0.22em; font-weight: 600; color: rgba(246, 239, 227, 0.82);
  text-shadow: 0 2px 10px rgba(10, 26, 14, 0.5);
}
@media (prefers-reduced-motion: reduce) { .signoff::before { animation: none; } }

/* ============================================================
   Enquire
   ============================================================ */
.enquire {
  background: #21401c;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8);
  padding: var(--s10) var(--s7);
}
.enquire__left { max-width: 560px; }
.enquire__sub { color: var(--green-light); font-size: 16px; line-height: 1.65; margin: var(--s5) 0 var(--s7); }
.enquire__direct { display: grid; gap: var(--s3); }
.enquire__channel {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--s5); border-radius: var(--r-md);
  background: rgba(246,239,227,0.06);
  border: 1px solid rgba(246,239,227,0.12);
  transition: background 0.3s, transform 0.3s var(--ease);
}
.enquire__channel:hover { background: rgba(124,175,84,0.16); transform: translateX(6px); }
.enquire__channel-label { font-size: 11px; letter-spacing: 0.2em; color: var(--green-fresh); font-weight: 600; }
.enquire__channel-value { color: var(--cream); font-size: 16px; }
.enquire__form {
  position: relative;
  background: var(--cream); border-radius: var(--r-lg);
  padding: var(--s7);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5);
  align-self: start;
  overflow: hidden;
}
.field { display: flex; flex-direction: column; gap: var(--s2); }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 11px; letter-spacing: 0.18em; font-weight: 600; color: var(--green-cardamom); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 15px; color: var(--ink);
  padding: 14px 16px; border-radius: var(--r-sm);
  border: 1.5px solid var(--green-light); background: var(--white);
  outline: none; transition: border-color 0.3s;
  resize: vertical;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green-fresh); }
.field.is-error input { border-color: var(--earth-clay); }
.field__err {
  display: none; font-size: 12px; color: var(--earth-clay); font-weight: 500;
}
.field.is-error .field__err { display: block; }
.hp { position: absolute; left: -9999px; opacity: 0; }
.enquire__form .btn--full { grid-column: 1 / -1; }
.enquire__fine { grid-column: 1 / -1; font-size: 12px; color: var(--earth-soil); text-align: center; }
.enquire__done {
  position: absolute; inset: 0; z-index: 2;
  background: var(--cream);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--s7);
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.enquire__form.is-done .enquire__done { opacity: 1; pointer-events: auto; }
.enquire__done-ring {
  width: 64px; height: 64px; border-radius: 50%;
  border: 4px solid var(--green-fresh); position: relative; margin-bottom: var(--s5);
}
.enquire__done-ring::after {
  content: ""; position: absolute; inset: 16px; border-radius: 50%;
  background: var(--green-fresh);
  animation: donePulse 1.6s var(--ease) infinite alternate;
}
@keyframes donePulse { to { transform: scale(0.7); } }
.enquire__done b { font-family: var(--font-display); font-size: 26px; color: var(--ink); margin-bottom: var(--s3); }
.enquire__done p { font-size: 14.5px; line-height: 1.6; color: var(--earth-soil); max-width: 40ch; }
@media (max-width: 1000px) {
  .enquire { grid-template-columns: 1fr; }
  .enquire__form { grid-template-columns: 1fr; }
}

/* ============================================================
   Footer
   ============================================================ */
.footer { background: #21401c; border-top: 1px solid rgba(246,239,227,0.1); overflow: hidden; }
.footer__grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s6);
  padding: var(--s7);
  border-top: 1px solid rgba(246,239,227,0.1);
}
.footer__brand p { color: var(--green-light); font-size: 14px; line-height: 1.7; margin-top: var(--s4); }
.nav__logo--footer { width: 84px; height: 84px; }
.footer__col { display: flex; flex-direction: column; gap: var(--s3); }
.footer__col h4 { color: var(--green-fresh); font-size: 11px; letter-spacing: 0.2em; margin-bottom: var(--s2); }
.footer__col a { color: var(--cream); font-size: 14px; transition: color 0.3s; }
.footer__col a:hover { color: var(--green-fresh); }
.footer__muted { color: var(--green-light); font-size: 14px; line-height: 1.7; }
.footer__bottom {
  max-width: 1280px; margin: 0 auto;
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: var(--s5) var(--s7);
  border-top: 1px solid rgba(246,239,227,0.1);
  color: rgba(246,239,227,0.5); font-size: 12px; letter-spacing: 0.06em;
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .hero__img { animation: none; }
  [data-reveal], [data-words] .w > span, .char { opacity: 1 !important; transform: none !important; }
  .jm-wp, .jm-tangle, .jm-cure, .jm-ship, .jm-arrive, .journey__cap, .journey__verdict { opacity: 1 !important; transform: none !important; }
  .journey, .compare { height: auto !important; }
  .pod-line { stroke-dashoffset: 0 !important; }
  .es-hill { stroke-dashoffset: 0 !important; }
  .es-fill, .es-marker, .es-alt-item { opacity: 1 !important; transform: none !important; }
  .es-mist, .es-marker-pulse { animation: none !important; }
  .cs-curve { stroke-dashoffset: 0 !important; }
  .cs-fill, .cs-band, .cs-round-col { opacity: 1 !important; transform: none !important; }
  .cs-cloud, .cs-rain, .cs-gust, .cs-plant { animation: none !important; }
  .grain, .cursor, .seeds { display: none; }
}

/* ============================================================
   Mobile typography floor
   Reading text sat at 13-15.5px on phones (seed.com uses 16px/1.3).
   Only PROSE is raised here -- eyebrows, labels, codes and meta stay
   small on purpose. Inputs go to 16px because anything smaller makes
   iOS Safari zoom the page on focus, which wrecked the enquiry form.
   ============================================================ */
@media (max-width: 700px) {
  .why__row p,
  .faq__answer p,
  .compare__cell,
  .journey__cap span,
  .estate__fact span,
  .footer__brand p,
  .footer__muted,
  .range__lead,
  .range__terms,
  .duo__sign span {
    font-size: 16px; line-height: 1.55;
  }
  .faq__answer p { line-height: 1.65; }
  /* the answer's left inset was aligned to a desktop counter column --
     on a narrow screen that indent wastes most of the line */
  .faq__answer p { padding-left: var(--s5); padding-right: var(--s5); }
}
/* 16px minimum on form controls at every touch size (iOS focus-zoom) */
@media (hover: none) {
  .field input, .field select, .field textarea { font-size: 16px; }
}

/* Phones fetch the 900px variants of the sign-off artwork (the 2400px
   originals were ~1.6MB for a band that is 230px tall on a phone). */
@media (max-width: 700px) {
  .signoff::before { background-image: url("../assets/img/hero-slide-4-m.jpg"); }
}

/* Phones: the nav belongs at the top of the page, not pinned over it.
   A fixed bar costs ~84px of an 812px screen on every scroll, and the
   floating "Request a quote" pill covered content. It scrolls away now;
   the enquiry CTA is repeated throughout the page anyway. */
@media (max-width: 700px) {
  .nav { position: absolute; }
  .nav.is-scrolled { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* The nav CTA wrapped to two lines on a 375px screen, which broke the pill.
   Keep the label on one line and let the button hug it -- the brand lockup
   gives up the space instead, since the CTA is the actionable element. */
.btn--nav { white-space: nowrap; flex: none; }
@media (max-width: 700px) {
  :root { --nav-h: 80px; }
  .nav { padding: 0 var(--s4); gap: var(--s3); }
  .btn--nav { padding: 11px 16px; font-size: 12px; letter-spacing: 0.04em; }
  .nav__brand { min-width: 0; }                 /* allow the lockup to shrink first */
}

/* ============================================================
   Range on phones: "the spice shelf"
   The desktop version is a cursor-driven auto-drifting showcase -- an idiom
   a phone does not have. Here it becomes a native snap shelf you swipe:
   OS momentum, snap, peek at the next card, and a live index so a finite
   set of six feels knowable (the desktop loop is infinite, so it needs none).
   ============================================================ */
@media (max-width: 700px) {
  /* the desktop track blocked horizontal panning (JS owned the drag) and the
     viewport was clipped, so the shelf could not be swiped at all */
  .range__viewport {
    overflow-x: auto; overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: none; mask-image: none;   /* the mask ate the only visible card */
    margin: 0 calc(-1 * var(--s7));
    padding: var(--s2) 0 var(--s5);
    overscroll-behavior-x: contain;
  }
  .range__viewport::-webkit-scrollbar { display: none; }
  .range__track {
    width: max-content;
    padding: 0 var(--s5);
    touch-action: pan-x pan-y;      /* was pan-y: horizontal swipe was blocked */
    -webkit-user-select: auto; user-select: auto;
  }
  .range__card {
    flex: 0 0 76vw; margin-right: var(--s4);
    scroll-snap-align: center;
    padding: var(--s5) var(--s4);
    /* neighbours recede so the centred card reads as the subject */
    opacity: 0.5; transform: scale(0.955);
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
  }
  .range__card.is-active {
    opacity: 1; transform: scale(1);
    box-shadow: 0 22px 46px -20px rgba(0, 0, 0, 0.55);
  }
  .range__card:hover { transform: scale(0.955); }        /* no hover lift on touch */
  .range__card.is-active:hover { transform: scale(1); }

  /* a card was 482px -- 60% of the screen. Tighten it so one sits comfortably. */
  .range__media { aspect-ratio: 4 / 3; margin: var(--s2) 0 var(--s4); }
  .range__name { font-size: 24px; margin-top: var(--s2); }
  .range__badge { top: var(--s4); left: var(--s4); font-size: 11px; padding: 5px 10px; }
  .range__terms { margin-top: var(--s3); font-size: 13px; }
  /* the CTA is the point of the card: full width, arrow always shown, and a
     44px touch target rather than something you reveal by hovering */
  .range__card .btn--card {
    width: 100%; padding: 15px 20px; font-size: 14px;
    background: var(--cream); color: var(--green-deep);
  }
  .range__card .btn__arrow { max-width: 1.4em; margin-left: var(--s2); opacity: 1; transform: none; }

  /* --- the index ------------------------------------------------------- */
  .range__shelf {
    display: flex; align-items: center; gap: var(--s4);
    margin: var(--s5) 0 var(--s3);
  }
  .range__shelf-num {
    font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
    color: var(--cream); flex: none; font-variant-numeric: tabular-nums;
  }
  .range__shelf-num b { font-weight: 600; }
  .range__shelf-num i { font-style: normal; opacity: 0.5; margin-left: 3px; }
  .range__shelf-rail {
    flex: 1 1 auto; height: 2px; border-radius: 2px;
    background: rgba(246, 239, 227, 0.22); overflow: hidden;
  }
  .range__shelf-rail i {
    display: block; height: 100%; width: 100%;
    background: var(--green-fresh); border-radius: 2px;
    transform: scaleX(0.08); transform-origin: left center;
    transition: transform 0.35s var(--ease);
  }
  .range__shelf-hint {
    font-size: 11px; letter-spacing: 0.2em; font-weight: 600; flex: none;
    color: rgba(246, 239, 227, 0.55);
    animation: rangeHint 2.6s ease-in-out infinite;
  }
  @keyframes rangeHint { 0%,100% { opacity: 0.45; } 50% { opacity: 0.9; } }
  /* once they have swiped, the prompt has done its job */
  .range.is-swiped .range__shelf-hint { opacity: 0; animation: none; transition: opacity 0.4s; }
}
/* the index is a phone affordance only */
@media (min-width: 701px) { .range__shelf { display: none; } }
@media (prefers-reduced-motion: reduce) { .range__shelf-hint { animation: none; } }