/* =====================================================================
   TERRE D'ATLAS — stylesheet
   Design language adapted from Flor & Fjære (florogfjare.no/en) for
   a premium grower-led Moroccan produce brand.
   ===================================================================== */

:root {
  /* Deep natural palette */
  --green-900: #14261c;   /* darkest — headings, nav background */
  --green-800: #1f3a2b;
  --green-700: #2d4a35;   /* primary brand green */
  --green-600: #41674c;
  --green-500: #5c8565;
  --green-400: #7fa58a;

  /* Warm naturals */
  --cream-50:  #fbf6ec;
  --cream-100: #f6ecd9;   /* primary background */
  --cream-200: #efe1c4;
  --cream-300: #e4d0a7;
  --sand-400:  #c9a976;
  --sand-500:  #a98651;
  --terra:     #b75a36;   /* accent terracotta */
  --rose:      #c07d6a;

  --ink:       #1f1d18;
  --ink-soft:  #3a3628;

  /* Type */
  --serif:   "Cormorant Garamond", "Cormorant", Georgia, serif;
  --display: "Italiana", "Cormorant Garamond", Georgia, serif;
  --sans:    "Inter", -apple-system, system-ui, sans-serif;

  /* Rhythm */
  --gut: clamp(1.25rem, 3vw, 2rem);
  --sec: clamp(5rem, 10vw, 9rem);
  --max: 1320px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* Prevent iOS Safari from auto-enlarging small text in portrait mode —
     this is what was scaling .hero__tagline-top past its parent and
     forcing the right star (and last word) onto a second line. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream-100);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle paper grain — applied via ::before so it overlays everything.
   Desktop only: mix-blend-mode on a fixed full-viewport layer is a known
   iOS Safari scroll/compositor killer, and at 0.04 opacity the texture is
   imperceptible on phone screens anyway. */
@media (min-width: 769px) {
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.04;
    mix-blend-mode: multiply;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(0,0,0,.35) 0.4px, transparent 1px),
      radial-gradient(circle at 70% 70%, rgba(0,0,0,.25) 0.4px, transparent 1px),
      radial-gradient(circle at 40% 80%, rgba(0,0,0,.25) 0.4px, transparent 1px);
    background-size: 3px 3px, 5px 5px, 7px 7px;
  }
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--green-900);
  letter-spacing: -0.01em;
  margin: 0;
}
h1 em, h2 em, h3 em, h4 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--green-700);
}
p  { margin: 0; }
a  { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* ---------- NAV ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 40;
  padding: 1.25rem var(--gut);
  transition: background 0.5s ease, padding 0.4s ease, border-color 0.5s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(246, 236, 217, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.85rem var(--gut);
  border-bottom-color: rgba(20, 38, 28, 0.08);
}
.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--green-900);
}
.nav__mark { display: inline-flex; color: var(--green-700); }
.nav__word {
  font-family: var(--display);
  font-size: 1.45rem;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--green-900);
}
.nav__word em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  margin-right: 0.12em;
  color: var(--green-700);
}
.nav__links {
  display: flex;
  gap: 2.2rem;
  align-items: center;
  font-family: var(--sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 400;
}
.nav__links a { color: var(--green-900); position: relative; padding: 0.3rem 0; transition: color .3s; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px;
  height: 1px; background: var(--green-700); transition: right .4s ease;
}
.nav__links a:hover::after { right: 0; }
.nav__links a:hover { color: var(--green-700); }
.nav__cta {
  padding: 0.55rem 1.1rem !important;
  border: 1px solid var(--green-900);
  border-radius: 999px;
  transition: background .3s, color .3s;
}
.nav__cta:hover { background: var(--green-900); color: var(--cream-100) !important; }
.nav__cta::after { display: none; }

/* Direct-contact cluster (phone + whatsapp) */
.nav__contacts {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
}
.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--green-900);
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(20, 38, 28, 0.25);
  border-radius: 999px;
  transition: background .3s, color .3s, border-color .3s;
}
.nav__phone svg { width: 14px; height: 14px; color: var(--green-700); }
.nav__phone:hover {
  background: var(--green-900);
  color: var(--cream-50);
  border-color: var(--green-900);
}
.nav__phone:hover svg { color: var(--cream-50); }

.nav__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  transition: transform .3s ease, box-shadow .3s ease, background .3s;
}
.nav__wa svg { width: 18px; height: 18px; }
.nav__wa:hover {
  background: #1ebe5d;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -6px rgba(37, 211, 102, 0.7);
}

@media (max-width: 1100px) {
  .nav__phone-num { display: none; }
  .nav__phone { padding: 0.4rem; width: 36px; height: 36px; justify-content: center; gap: 0; }
  .nav__phone svg { width: 16px; height: 16px; }
}

.nav__burger {
  display: none;
  flex-direction: column; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 0.5rem;
}
.nav__burger span { width: 22px; height: 1px; background: var(--green-900); transition: transform .3s; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__burger { display: flex; }
}

/* ===================================================================
   HERO
   =================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  padding: clamp(5.5rem, 11vh, 7rem) var(--gut) clamp(3rem, 6vh, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__aquarelle {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(to right,
      rgba(247, 243, 237, 1)    0%,
      rgba(247, 243, 237, 0.85) 25%,
      rgba(247, 243, 237, 0.4)  50%,
      rgba(247, 243, 237, 0)    70%
    ),
    url("assets/hero.jpeg");
  background-size: auto, cover;
  background-position: left, right center;
  background-repeat: no-repeat, no-repeat;
}
.hero__content {
  position: relative;
  max-width: 760px;
  margin-left: clamp(0px, 5vw, 80px);
}
.hero__tagline {
  font-family: var(--sans);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--green-700);
  text-align: left;
  margin: 0 0 1.6rem;
  line-height: 1.7;
}
.hero__tagline p { margin: 0; }
.hero__tagline-top .hero__tagline-star:first-child { margin-left: 0; }
.hero__tagline-star {
  color: var(--sand-500);
  font-size: 0.85rem;
  margin: 0 0.7em;
  display: inline-block;
}
.hero__tagline-bottom {
  color: var(--green-800);
  font-weight: 500;
  letter-spacing: 0.34em;
  margin-top: 0.35rem !important;
}

.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.8rem, 6.5vw, 5.8rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--green-900);
  margin-bottom: 1.3rem;
}
.hero__title .line { display: block; }
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--green-700);
}

.hero__meta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--sans);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--green-700);
  padding-top: 1rem;
  border-top: 1px solid rgba(20, 38, 28, 0.15);
}
.hero__divider { color: var(--sand-500); }

.hero__scroll {
  position: absolute;
  right: clamp(1.5rem, 4vw, 3rem);
  bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--green-700);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.hero__scroll-line {
  writing-mode: horizontal-tb;
  transform: rotate(180deg);
  width: 1px; height: 60px;
  background: var(--green-700);
  position: relative;
}
.hero__scroll-line::before {
  content: ""; position: absolute;
  left: -1px; top: 0; width: 3px; height: 20px;
  background: var(--green-900);
  animation: scrollHint 2s ease-in-out infinite;
}
@keyframes scrollHint {
  0%, 100% { transform: translateY(0); opacity: 0.3; }
  50% { transform: translateY(38px); opacity: 1; }
}

/* ===================================================================
   STRIP QUOTE
   =================================================================== */
.strip {
  padding: var(--sec) var(--gut);
  background: var(--cream-50);
  position: relative;
}
.strip::before, .strip::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(20, 38, 28, 0.18), transparent);
}
.strip::before { top: 0; }
.strip::after  { bottom: 0; }
.strip__inner {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
/* ===================================================================
   SECTION HEADERS
   =================================================================== */
.section-head {
  max-width: 820px;
  margin: 0 auto var(--sec);
  padding: 0 var(--gut);
}
.section-head--center { text-align: center; }
.section-head__eyebrow {
  font-family: var(--sans);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--green-600);
  margin-bottom: 1.2rem;
}
.section-head__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 4.8vw, 4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin-bottom: 1.3rem;
  color: var(--green-900);
}
.section-head__lead {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 400;
}

/* ===================================================================
   PRODUCTS
   =================================================================== */
.products {
  padding: var(--sec) 0;
  background: var(--cream-100);
}
.products__grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.8rem);
}
@media (max-width: 1100px) {
  .products__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .products__grid { grid-template-columns: 1fr; }
}

/* Citrus card — JPEG with white background, multiply-blended to match beige */
.product__art--citrus {
  mix-blend-mode: multiply;
  object-fit: contain;
  filter: none !important;
  transform: scale(1.05);
}
.product:hover .product__art--citrus {
  transform: scale(1.08);
}

.product {
  display: flex;
  flex-direction: column;
  background: var(--cream-50);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(20,38,28,0.05);
  transition: transform .7s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
  cursor: default;
}
.product:hover {
  transform: translateY(-6px);
  box-shadow:
    0 30px 60px -30px rgba(20, 38, 28, 0.25),
    0 1px 0 rgba(20,38,28,0.05);
}

.product__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
  background: var(--cream-200);
}
.product__art {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,.8,.2,1), filter .6s ease;
  filter: saturate(0.85);
}
.product:hover .product__art {
  transform: scale(1.06);
  filter: saturate(1.1);
}
/* Strict-asset variant — preserves user-provided image exactly (no filter, no crop) */
.product__art--asset,
.product:hover .product__art--asset {
  filter: none !important;
  object-fit: contain;
}
.product__media--asset {
  background: #f4e8c4;
}
.product__media--asset::after { display: none; }

.product__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(20, 38, 28, 0) 60%, rgba(20, 38, 28, 0.15) 100%);
  pointer-events: none;
  opacity: 0.9;
  transition: opacity .6s ease;
}
.product:hover .product__media::after { opacity: 0.4; }

.product__body {
  padding: 2.3rem 2rem 2.5rem;
  border-top: 1px solid rgba(20, 38, 28, 0.08);
}
.product__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 2.8vw, 2.5rem);
  line-height: 1;
  margin-bottom: 0.9rem;
  letter-spacing: -0.01em;
}
.product__sep {
  font-family: var(--serif);
  font-size: 0.95rem;
  letter-spacing: 0.55em;
  text-align: center;
  color: var(--green-700);
  opacity: 0.7;
  margin: 0 0 1rem;
  line-height: 1;
}
.product__varieties {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--green-800);
  text-align: center;
  margin: 0 0 1.1rem;
}
.product__desc {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  font-weight: 400;
}

/* ===================================================================
   STORY
   =================================================================== */
.story {
  padding: var(--sec) var(--gut);
  background: var(--green-900);
  color: var(--cream-100);
  position: relative;
  overflow: hidden;
}
.story::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(245, 210, 150, 0.06), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(183, 90, 54, 0.08), transparent 45%);
  pointer-events: none;
}
.story__grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  position: relative;
}
@media (max-width: 960px) {
  .story__grid { grid-template-columns: 1fr; }
}
.story__media {
  aspect-ratio: 3 / 4;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 50px 100px -40px rgba(0,0,0,0.5);
}
.story__art { width: 100%; height: 100%; object-fit: cover; }

/* Desktop: match image height to the text column so both align */
@media (min-width: 961px) {
  .story__grid { align-items: stretch; }
  .story__media--asset {
    aspect-ratio: auto;
    height: 100%;
    min-height: 420px;
  }
}

.story__text .section-head__eyebrow { color: var(--sand-400); }
.story__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 4.5vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 1rem 0 2rem;
  color: var(--cream-50);
}
.story__title em {
  font-style: italic;
  color: var(--sand-400);
}
.story__paragraph {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.7;
  color: rgba(246, 236, 217, 0.82);
  margin-bottom: 1.3rem;
  font-weight: 400;
  max-width: 52ch;
}
.story__pillars {
  list-style: none;
  padding: 0;
  margin: 3rem 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  border-top: 1px solid rgba(246, 236, 217, 0.2);
  padding-top: 2.2rem;
}
.story__pillars li {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 1.4rem;
  align-items: start;
}
.story__pillar-num {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--sand-400);
  letter-spacing: 0.05em;
  line-height: 1;
  padding-top: 0.1rem;
}
.story__pillars h4 {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--cream-50);
  margin-bottom: 0.3rem;
}
.story__pillars p {
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(246, 236, 217, 0.65);
  font-weight: 400;
}

/* ===================================================================
   PROCESS
   =================================================================== */
.process {
  padding: var(--sec) 0;
  background: var(--cream-50);
  position: relative;
}
.process__steps {
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 2.25vw, 2.5rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 2.75vw, 3rem);
  position: relative;
}
/* connecting line */
.process__steps::before {
  content: "";
  position: absolute;
  top: 27%;
  left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(45, 74, 53, 0.3) 20%, rgba(45, 74, 53, 0.3) 80%, transparent);
  z-index: 0;
}
@media (max-width: 900px) {
  .process__steps { grid-template-columns: repeat(2, 1fr); }
  .process__steps::before { display: none; }
}
@media (max-width: 520px) {
  .process__steps { grid-template-columns: 1fr; }
}

.step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 0.5rem;
}
.step__media {
  aspect-ratio: 1;
  margin-bottom: 2rem;
  border-radius: 50%;
  overflow: hidden;
  max-width: 320px;
  width: 100%;
  margin-left: auto; margin-right: auto;
  background: var(--cream-200);
  box-shadow: 0 10px 40px -15px rgba(20, 38, 28, 0.25);
  border: 1px solid rgba(20, 38, 28, 0.1);
  transition: transform .6s ease;
}
.step:hover .step__media { transform: translateY(-6px) scale(1.02); }
.step__art { width: 100%; height: 100%; object-fit: cover; }

/* Field image: zoom tighter on house + rows, trim watermark strip at bottom */
.step__art--field {
  transform: scale(1.35);
  transform-origin: 45% 42%;
}

/* Harvest image: source has a painted watercolor circle on white margin.
   Scale up enough that the dense painted area fully fills the container's circle,
   cropping out both the white margin AND the soft watercolor fade edge. */
.step__art--harvest {
  transform: scale(1.32);
  transform-origin: 50% 50%;
}

/* Pack image: tighten crop, focus on crates of melons + worker in pack-house */
.step__art--pack {
  transform: scale(1.1);
  transform-origin: 50% 55%;
}

/* Ship image: tighten crop, center truck as main subject, trim excess sky/ground */
.step__art--ship {
  transform: scale(1.2);
  transform-origin: 58% 55%;
}

.step__num {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  color: var(--sand-500);
  margin-bottom: 0.7rem;
}
.step__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 2.4vw, 2.5rem);
  line-height: 1;
  margin-bottom: 0.9rem;
  color: var(--green-900);
}
.step__desc {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.15vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink-soft);
  font-weight: 400;
  max-width: 32ch;
  margin: 0 auto;
}

/* ===================================================================
   CERTS
   =================================================================== */
/* ============================================================
   CERTIFICATIONS — clean horizontal logo strip on light cream
   ============================================================ */
.certs {
  padding: var(--sec) 0;
  background: #f7f3ed;
  border-top: 1px solid rgba(20, 38, 28, 0.06);
}
.certs__head {
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.4rem);
  padding: 0 var(--gut);
}
.certs__head .section-head__eyebrow {
  margin-bottom: 0.55rem;
}
.certs__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2rem, 3.15vw, 3rem);
  line-height: 1.22;
  letter-spacing: -0.005em;
  color: var(--green-900);
  margin: 0;
}
.certs__title-line { display: block; }

.certs__blocks {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: clamp(1rem, 2vw, 2rem);
  align-items: start;
}
.certs__block {
  border: 1px solid rgba(20, 38, 28, 0.12);
  background: var(--cream-50);
  padding: 6px;
  overflow: hidden;
}
.certs__block-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Tablet — stack the two blocks vertically */
@media (max-width: 900px) {
  .certs__blocks { grid-template-columns: 1fr; }
}

/* ===================================================================
   CONTACT
   =================================================================== */
.contact {
  padding: var(--sec) var(--gut);
  background: var(--green-900);
  color: var(--cream-100);
  position: relative;
  overflow: hidden;
}
.contact::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(245, 210, 150, 0.08), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(183, 90, 54, 0.1), transparent 50%);
  pointer-events: none;
}
.contact__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: clamp(2rem, 5vw, 5rem);
  position: relative;
}
@media (max-width: 900px) { .contact__inner { grid-template-columns: 1fr; } }

.contact__text .section-head__eyebrow { color: var(--sand-400); }
.contact__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.3rem, 4.5vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 1rem 0 1.8rem;
  color: var(--cream-50);
}
.contact__title em {
  font-style: italic;
  color: var(--sand-400);
}
.contact__lead {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.65;
  color: rgba(246, 236, 217, 0.82);
  max-width: 48ch;
  margin-bottom: 3rem;
  font-weight: 400;
}

.contact__info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(246, 236, 217, 0.18);
}
.contact__label {
  font-family: var(--sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--sand-400);
  margin-bottom: 0.6rem;
}
.contact__value {
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--cream-50);
  font-weight: 400;
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2.5rem;
  background: rgba(246, 236, 217, 0.04);
  border: 1px solid rgba(246, 236, 217, 0.12);
  border-radius: 2px;
  backdrop-filter: blur(6px);
}
.contact__form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--sans);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--sand-400);
}
.contact__form input,
.contact__form textarea {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--cream-50);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(246, 236, 217, 0.3);
  padding: 0.6rem 0;
  outline: none;
  transition: border-color .3s;
  font-weight: 400;
  resize: vertical;
}
.contact__form input:focus,
.contact__form textarea:focus {
  border-bottom-color: var(--sand-400);
}
.contact__form button {
  align-self: flex-start;
  margin-top: 0.6rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--cream-50);
  background: transparent;
  border: 1px solid var(--sand-400);
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all .4s ease;
}
.contact__form button:hover {
  background: var(--sand-400);
  color: var(--green-900);
}

/* Wrap around form + success + error. Its height is locked in JS to the
   form's height at submit time so the surrounding grid doesn't collapse
   when the form is hidden — the success block then fills the same space. */
.contact__form-wrap {
  display: flex;
  flex-direction: column;
}

/* Success state shown after a successful AJAX form submission.
   Matches the form card's frosted-glass aesthetic. Sized to fill the
   wrap's locked min-height with vertically-centered content. */
.contact__form-success {
  flex: 1;
  min-height: 100%;
  padding: 2.5rem;
  background: rgba(246, 236, 217, 0.04);
  border: 1px solid rgba(246, 236, 217, 0.18);
  border-radius: 2px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: contactSuccessIn 0.45s ease both;
}
.contact__form-success-eyebrow {
  font-family: var(--sans);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--sand-400);
  margin: 0 0 1rem;
}
.contact__form-success-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.5vw, 2.1rem);
  line-height: 1.2;
  color: var(--cream-50);
  margin: 0 0 0.85rem;
  letter-spacing: -0.005em;
}
.contact__form-success-msg {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  line-height: 1.35;
  color: var(--cream-50);
  margin: 0 auto;
  max-width: 36ch;
  font-weight: 400;
  letter-spacing: -0.005em;
}
@keyframes contactSuccessIn {
  /* Pure fade — no translate, so the eye never reads it as "collapse". */
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Error state shown when the AJAX submission fails. Subtle terra accent
   to distinguish it from the success block, but keeping the same
   restrained editorial tone — no alarming reds. */
.contact__form-error {
  margin-top: 1.2rem;
  padding: 1.2rem 1.4rem;
  background: rgba(183, 90, 54, 0.08);
  border: 1px solid rgba(183, 90, 54, 0.35);
  border-radius: 2px;
  animation: contactSuccessIn 0.4s cubic-bezier(.2,.8,.2,1) both;
}
.contact__form-error-msg {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--cream-50);
  margin: 0;
  text-align: center;
}
.contact__form-error-msg a {
  color: var(--sand-400);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.contact__form-error-msg a:hover { color: var(--cream-50); }

/* ===================================================================
   FOOTER
   =================================================================== */
.foot {
  padding: 4rem var(--gut) 2rem;
  background: var(--green-900);
  color: rgba(246, 236, 217, 0.7);
  border-top: 1px solid rgba(246, 236, 217, 0.08);
}
.foot__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(246, 236, 217, 0.12);
}
@media (max-width: 720px) { .foot__inner { grid-template-columns: 1fr; } }

.foot__word {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: var(--cream-50);
  display: block;
  margin-bottom: 0.8rem;
}
.foot__word em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--sand-400);
  margin-right: 0.12em;
}
.foot__tag {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 30ch;
  font-weight: 400;
  color: rgba(246, 236, 217, 0.6);
}
.foot__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.foot__h {
  font-family: var(--sans);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--sand-400);
  margin-bottom: 1.1rem;
}
.foot__cols a {
  display: block;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 2;
  color: rgba(246, 236, 217, 0.75);
  transition: color .3s;
  font-weight: 400;
}
.foot__cols a:hover { color: var(--sand-400); }
.foot__legal {
  max-width: var(--max);
  margin: 2rem auto 0;
  font-family: var(--sans);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(246, 236, 217, 0.45);
  text-align: center;
}

/* ===================================================================
   REACH — International customers (compact, editorial)
   =================================================================== */
.reach {
  padding: var(--sec) 0;
  background: var(--cream-50);
  border-top: 1px solid rgba(20, 38, 28, 0.06);
}
.reach__head {
  max-width: 980px;
  margin: 0 auto clamp(2rem, 4vh, 3.5rem);
  padding: 0 var(--gut);
  text-align: center;
}
.reach__head .section-head__eyebrow { margin-bottom: 0.7rem; }
.reach__heading {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.3rem, 4.4vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--green-900);
  margin: 0 0 0.65rem;
}
.reach__heading em {
  font-style: italic;
  font-weight: 400;
  color: var(--green-700);
}
.reach__sub {
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.4;
  color: var(--ink-soft);
  opacity: 0.72;
  font-weight: 400;
  max-width: none;
  margin: 0 auto;
  white-space: nowrap;
}
@media (max-width: 820px) {
  .reach__sub { white-space: normal; max-width: 46ch; font-size: 0.92rem; }
}
.reach__zones {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--gut);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}
.reach__zone {
  position: relative;
  text-align: center;
  padding: 1.5rem clamp(1.5rem, 4vw, 3.5rem);
}
.reach__zone + .reach__zone::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: rgba(20, 38, 28, 0.18);
}
.reach__zone h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 2.7vw, 2.6rem);
  line-height: 1.15;
  color: var(--green-900);
  letter-spacing: -0.005em;
  margin: 0;
}

@media (max-width: 860px) {
  .reach__zones { grid-template-columns: 1fr; gap: 0; }
  .reach__zone { padding: 1.2rem var(--gut); }
  .reach__zone + .reach__zone::before {
    left: 20%; right: 20%; top: 0; bottom: auto;
    width: auto; height: 1px;
  }
}

/* ===================================================================
   CALENDAR — Product seasonality
   =================================================================== */
.calendar {
  padding: var(--sec) 0;
  background: #f7f3ed;
  border-top: 1px solid rgba(20, 38, 28, 0.06);
}
.calendar__table {
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 2.25vw, 2.5rem);
  display: grid;
  gap: 0.7rem;
}
.calendar__row {
  display: grid;
  grid-template-columns: 200px repeat(12, 1fr);
  gap: 0.5rem;
  align-items: center;
}
.calendar__row--months {
  padding-bottom: 1rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid rgba(20, 38, 28, 0.12);
}
.calendar__corner { height: 100%; }
.calendar__month {
  font-family: var(--sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--green-700);
  text-align: center;
}
.calendar__label {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 1.85vw, 1.75rem);
  color: var(--green-900);
  letter-spacing: -0.005em;
}
.calendar__cell {
  height: 46px;
  border-radius: 4px;
  background: rgba(20, 38, 28, 0.05);
  transition: transform .3s ease;
}
.calendar__cell--on     { background: rgba(45, 74, 53, 0.15); }
.calendar__cell--melon  { background: rgba(201, 169, 118, 0.75); }
.calendar__cell--citrus { background: rgba(220, 142, 60, 0.7);  }
.calendar__cell--berry  { background: rgba(192, 125, 106, 0.7);  }
.calendar__cell--corn   { background: rgba(127, 165, 138, 0.75); }
.calendar__cell:hover { transform: scaleY(1.08); }

.calendar__legend {
  max-width: 1640px;
  margin: clamp(1.5rem, 3vh, 2.5rem) auto 0;
  padding: 0 clamp(1rem, 2.25vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.7rem 2.2rem;
  font-family: var(--sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--green-700);
}
.calendar__chip {
  display: inline-block;
  width: 26px;
  height: 12px;
  border-radius: 2px;
  margin-right: 0.55rem;
  vertical-align: middle;
}
.calendar__chip--melon  { background: rgba(201, 169, 118, 0.85); }
.calendar__chip--citrus { background: rgba(220, 142, 60, 0.8);  }
.calendar__chip--berry  { background: rgba(192, 125, 106, 0.8);  }
.calendar__chip--corn   { background: rgba(127, 165, 138, 0.85); }

@media (max-width: 700px) {
  .calendar__row { grid-template-columns: 130px repeat(12, 1fr); gap: 0.3rem; }
  .calendar__cell { height: 32px; }
  .calendar__month { font-size: 0.65rem; letter-spacing: 0.14em; }
  .calendar__label { font-size: 1.05rem; }
}

/* ===================================================================
   REVEAL ANIMATIONS
   =================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.1s cubic-bezier(.2,.8,.2,1), transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 0.12s; }
.reveal--delay-2 { transition-delay: 0.24s; }
.reveal--delay-3 { transition-delay: 0.36s; }

/* ===================================================================
   ONE-SCREEN SECTIONS — desktop only (must sit AFTER base rules so it
   wins the cascade over .section-head, .products, etc.).
   Each main section fills a single viewport height; content sits
   vertically centered. Scroll-snap lands the user on a complete block.
   =================================================================== */
@media screen and (min-width: 901px) and (min-height: 680px) {
  html {
    scroll-snap-type: y proximity;
  }
  .hero, .reach, .products, .calendar, .certs, .process, .story, .contact {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(2.5rem, 5vh, 5rem) !important;
    padding-bottom: clamp(2.5rem, 5vh, 5rem) !important;
  }
  .hero {
    padding-top: clamp(5.5rem, 10vh, 7rem) !important;
    padding-bottom: clamp(3rem, 5vh, 4.5rem) !important;
    justify-content: center !important;
  }

  /* Kill the giant --sec gap under every section header */
  .section-head   { margin-bottom: clamp(1.25rem, 3vh, 2.4rem) !important; }
  .certs__head    { margin-bottom: clamp(1.5rem, 3.5vh, 2.8rem) !important; }

  /* ---- Products: compact 4-col cards so row + head fit in one viewport ---- */
  .products .section-head__title     { font-size: clamp(2rem, 3.4vw, 2.9rem); white-space: nowrap; letter-spacing: -0.02em; }
  .products__grid .product__media    { aspect-ratio: 5 / 4; }
  .products__grid .product__body     { padding: 0.95rem 0.9rem 0.95rem; text-align: center; }
  .products__grid .product__title    {
    font-size: clamp(1.7rem, 2.2vw, 2.15rem);
    font-weight: 700;
    margin-bottom: 0.4rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--green-900);
  }
  .products__grid .product__sep      {
    font-size: 0.65rem;
    letter-spacing: 0.5em;
    margin: 0 auto 0.45rem;
    color: var(--green-700);
    opacity: 0.7;
  }
  .products__grid .product__varieties {
    color: var(--green-800);
    margin: 0 auto 0.55rem;
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    max-width: 24ch;
  }
  .products__grid .product__desc     {
    font-size: 0.76rem;
    line-height: 1.4;
    margin: 0 auto;
    max-width: none;
    color: var(--ink-soft);
    font-weight: 400;
  }

  /* ---- Process: trimmer step circles + tighter text ---- */
  .process__steps .step__media { max-width: 240px; margin-bottom: 1.4rem; }
  .process__steps .step__title { font-size: 1.9rem; margin-bottom: 0.55rem; }
  .process__steps .step__desc  { font-size: 1.05rem; line-height: 1.5; max-width: 32ch; }
  .process__steps .step__num   { margin-bottom: 0.45rem; }
  .process__steps::before      { top: 24%; }

  /* ---- Story: tighter text + pillars, right column vertically centered ---- */
  .story__grid           { align-items: stretch !important; }
  .story__text           { display: flex; flex-direction: column; justify-content: center; }
  .story__title          { font-size: clamp(2rem, 3.6vw, 3rem); margin: 0.6rem 0 0.9rem; }
  .story__paragraph      { font-size: 1.02rem; line-height: 1.5; margin-bottom: 0.75rem; max-width: 54ch; }
  .story__paragraph:last-of-type { margin-bottom: 0; }
  .story__pillars        { margin-top: 1.2rem; padding-top: 1.1rem; gap: 0.75rem; }
  .story__pillars li     { grid-template-columns: 50px 1fr; gap: 1rem; }
  .story__pillar-num     { font-size: 1.2rem; }
  .story__pillars h4     { font-size: 1.1rem; margin-bottom: 0.1rem; }
  .story__pillars p      { font-size: 0.85rem; line-height: 1.45; }
  .story__media--asset   { min-height: 360px !important; }

  /* ---- Contact: tighter form + info ---- */
  .contact__title          { font-size: clamp(2rem, 3.6vw, 3rem); margin: 0.7rem 0 1rem; }
  .contact__lead           { font-size: 1.02rem; line-height: 1.55; margin-bottom: 1.6rem; max-width: 52ch; }
  .contact__info           { gap: 1.2rem 2rem; padding-top: 1.2rem; }
  .contact__value          { font-size: 1rem; }
  .contact__form           { padding: 1.8rem; gap: 1.1rem; }
  .contact__form button    { padding: 0.8rem 1.7rem; }

  /* ---- Calendar: compact rows ---- */
  .calendar__cell { height: 38px; }
  .calendar__row  { gap: 0.5rem; }
  .calendar__legend { margin-top: 1.4rem; }

}

/* ===================================================================
   MOBILE — isolated tweaks for ≤768px. Desktop layout is untouched.
   All rules scoped inside the max-width: 768px block.
   =================================================================== */
/* ===================================================================
   MOBILE — Mobile-first rebuild (≤768px). Each section is a "scene":
   premium spacing, intentional rhythm, full-screen hero, generous
   typography, smooth scroll-reveal motion. Desktop is untouched.
   =================================================================== */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  body {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Smooth scroll for the entire mobile experience */
  html { scroll-behavior: smooth; }

  /* -- NAV ------------------------------------------------------- */
  /* Mobile: drop backdrop-filter (very expensive on iOS Safari) and the
     slow background/padding transition. Use a near-opaque cream instead
     of frosted glass — visually identical over the cream page. */
  .nav {
    padding: 0.9rem 1.1rem !important;
    transition: none !important;
  }
  .nav.is-scrolled {
    padding: 0.75rem 1.1rem !important;
    background: rgba(246, 236, 217, 0.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .nav__inner { gap: 0.8rem; }
  .nav__word { font-size: 1.25rem; }
  .nav__mark svg { width: 28px; height: 28px; }

  /* Slide-in drawer */
  .nav__links {
    display: flex !important;
    position: fixed;
    top: 0;
    right: 0;
    width: min(84vw, 360px);
    height: 100vh;
    background: var(--cream-50);
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 5.5rem 1.8rem 2rem;
    transform: translateX(100%);
    transition: transform .45s cubic-bezier(.2,.8,.2,1);
    box-shadow: -24px 0 50px -20px rgba(20, 38, 28, 0.3);
    z-index: 41;
    overflow-y: auto;
  }
  .nav.is-menu-open .nav__links { transform: translateX(0); }
  .nav__links a {
    font-size: 0.95rem;
    letter-spacing: 0.22em;
    padding: 0.3rem 0;
    color: var(--green-900);
    font-weight: 500;
  }
  .nav__links a::after { display: none; }

  .nav.is-menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(20, 38, 28, 0.5);
    backdrop-filter: blur(3px);
    z-index: 40;
    animation: fadeIn .35s ease forwards;
  }
  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

  .nav__contacts { gap: 0.45rem; margin-left: auto; }
  .nav__phone { width: 36px; height: 36px; padding: 0.35rem !important; justify-content: center; gap: 0; }
  .nav__phone-num { display: none; }
  .nav__phone svg { width: 16px; height: 16px; }
  .nav__wa { width: 36px; height: 36px; }
  .nav__wa svg { width: 17px; height: 17px; }

  .nav__burger { display: flex; z-index: 42; position: relative; }
  .nav.is-menu-open .nav__burger span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
  .nav.is-menu-open .nav__burger span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

  body.no-scroll { overflow: hidden; position: fixed; width: 100%; }

  /* -- HERO — full-screen scene, image-backed with legibility overlay -- */
  .hero {
    min-height: 100vh !important;
    min-height: 100svh !important;
    padding: 5.5rem 1.5rem 4rem !important;
    align-items: stretch !important;
    justify-content: center !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .hero__aquarelle {
    background:
      linear-gradient(to bottom,
        rgba(247, 243, 237, 0.35) 0%,
        rgba(247, 243, 237, 0.75) 55%,
        rgba(247, 243, 237, 0.95) 100%
      ),
      url("assets/hero.jpeg") !important;
    background-size: cover, cover !important;
    background-position: center, 60% center !important;
    background-repeat: no-repeat, no-repeat !important;
  }
  .hero__content {
    margin: 0 !important;
    max-width: 100% !important;
    text-align: center;
    position: relative;
    z-index: 1;
  }
  .hero__title {
    font-size: clamp(2.5rem, 11vw, 3.5rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 1.6rem !important;
    text-align: center;
  }
  .hero__title .line { display: block; }
  .hero__tagline {
    text-align: center !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.28em !important;
    line-height: 1.8 !important;
    margin: 0 auto 1.5rem !important;
  }
  .hero__tagline-top {
    /* Layout-level single-line guarantee on every iPhone width. Switching
       to inline-flex with flex-wrap: nowrap makes the left star, the text,
       and the right star physical flex items that the browser cannot
       break onto multiple rows — stronger than text-level `white-space`.
       Centered via the parent .hero__tagline's text-align: center. */
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap !important;
    font-size: 0.56rem !important;
    letter-spacing: 0.15em !important;
  }
  .hero__tagline-top .hero__tagline-star { margin: 0 0.35em; }
  .hero__tagline-top .hero__tagline-star:first-child { margin-left: 0.35em; }
  /* Structural single-line guarantee — the wrapper <span> is an
     inline-block with nowrap, which is the strongest single-line lock
     in CSS: nothing inside an inline-block with white-space: nowrap can
     wrap, regardless of letter-spacing, font-loading state, iOS
     auto-scaling, or parent layout mode. Sized via max-content so it
     hugs its content rather than stretching, and clamped to the viewport
     so it can never overflow horizontally. */
  .hero__tagline-line {
    display: inline-block !important;
    white-space: nowrap !important;
    max-width: 100vw;
  }
  .hero__tagline-bottom {
    /* Guarantee single line on every iPhone. Without nowrap the computed
       white-space is `normal`, and the rendered text (~268px) is within
       a few pixels of the parent width on 320px iPhones — any iOS Safari
       metric rounding wraps it. Tracking nudged from 0.3em→0.26em buys
       ~11px of horizontal slack without visibly altering the spaced-caps feel. */
    white-space: nowrap !important;
    letter-spacing: 0.26em !important;
  }
  .hero__meta {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
    font-size: 0.65rem;
    letter-spacing: 0.24em;
    padding-top: 1rem;
    margin: 0 auto;
  }
  .hero__scroll { display: none; }

  /* -- SECTION RHYTHM — every section gets the same generous pacing - */
  .reach,
  .products,
  .calendar,
  .certs,
  .process,
  .story,
  .contact {
    padding: 4.5rem 1.4rem !important;
    min-height: 0 !important;
  }
  .calendar { padding-left: 1rem !important; padding-right: 1rem !important; }

  /* -- SHARED SECTION HEADS — uniform mobile typography ------------ */
  .section-head {
    padding: 0;
    margin-bottom: 2.2rem !important;
    text-align: center;
  }
  .section-head__title {
    font-size: clamp(2rem, 7.5vw, 2.5rem) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    letter-spacing: -0.01em !important;
  }
  .section-head__lead {
    font-size: 1rem;
    line-height: 1.55;
    max-width: 38ch;
    margin: 0 auto;
  }

  /* -- OUR STORY ----------------------------------------------------- */
  .story__grid {
    grid-template-columns: 1fr !important;
    gap: 2.2rem !important;
    align-items: start !important;
  }
  .story__text { display: block !important; }
  .story__media, .story__media--asset {
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
  }
  .story__title {
    font-size: clamp(2rem, 7.5vw, 2.4rem) !important;
    line-height: 1.1 !important;
    margin: 0.6rem 0 1.1rem !important;
  }
  .story__paragraph {
    font-size: 1.02rem !important;
    line-height: 1.6 !important;
    max-width: none !important;
    margin-bottom: 1rem;
  }
  .story__pillars {
    margin-top: 2rem !important;
    padding-top: 1.5rem !important;
    gap: 1.3rem !important;
  }
  .story__pillars li {
    grid-template-columns: 44px 1fr !important;
    gap: 1rem !important;
  }
  .story__pillars h4 { font-size: 1.05rem !important; margin-bottom: 0.25rem; }
  .story__pillars p { font-size: 0.92rem !important; line-height: 1.5; }

  /* -- PRODUCE — each crop a full-width premium card ---------------- */
  .products__grid {
    grid-template-columns: 1fr !important;
    gap: 1.8rem !important;
    padding: 0 !important;
    max-width: 480px;
    margin: 0 auto;
  }
  .products__grid .product { box-shadow: 0 14px 36px -22px rgba(20,38,28,0.25); }
  .products__grid .product__media { aspect-ratio: 4 / 3 !important; }
  .products__grid .product__body {
    padding: 1.6rem 1.4rem 1.8rem !important;
    text-align: center;
  }
  .products__grid .product__title {
    font-size: 1.75rem !important;
    margin-bottom: 0.55rem !important;
    color: var(--green-900);
  }
  .products__grid .product__sep {
    font-size: 0.75rem !important;
    letter-spacing: 0.5em !important;
    text-align: center !important;
    margin: 0 auto 0.7rem !important;
    color: var(--green-700);
    opacity: 0.7;
  }
  .products__grid .product__varieties {
    font-size: 1.22rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    text-align: center !important;
    margin: 0 auto 0.85rem !important;
    max-width: 28ch;
    color: var(--green-800);
  }
  .products__grid .product__desc {
    font-size: 0.97rem !important;
    line-height: 1.55 !important;
    max-width: 38ch;
    margin: 0 auto !important;
    -webkit-line-clamp: unset !important;
    display: block !important;
    overflow: visible !important;
  }

  /* -- CALENDAR — tight readable grid ------------------------------- */
  .calendar__table { padding: 0 0.25rem !important; }
  .calendar__row {
    grid-template-columns: 76px repeat(12, 1fr) !important;
    gap: 3px !important;
  }
  .calendar__cell { height: 22px !important; border-radius: 3px; }
  .calendar__row--months { padding-bottom: 0.6rem; margin-bottom: 0.3rem; }
  .calendar__month {
    font-size: 0.55rem !important;
    letter-spacing: 0.08em !important;
  }
  .calendar__label { font-size: 0.95rem !important; }
  .calendar__legend {
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    gap: 0.5rem 1.2rem;
    margin-top: 1.6rem !important;
  }
  .calendar__chip { width: 16px; height: 9px; margin-right: 0.4rem; }

  /* -- HOW WE WORK — vertical flow: image → title → text ------------ */
  .process__steps {
    grid-template-columns: 1fr !important;
    gap: 3rem !important;
    padding: 0 !important;
    max-width: 360px;
    margin: 0 auto;
  }
  .process__steps::before { display: none !important; }
  .step { padding: 0; }
  .step__media {
    max-width: 220px !important;
    margin-bottom: 1.4rem !important;
  }
  .step__num { font-size: 0.95rem !important; margin-bottom: 0.55rem !important; }
  .step__title {
    font-size: 1.7rem !important;
    margin-bottom: 0.7rem !important;
  }
  .step__desc {
    font-size: 1rem !important;
    line-height: 1.55 !important;
    max-width: 32ch;
  }

  /* -- STANDARDS — stacked, full-width image cards ------------------ */
  .certs__head { margin-bottom: 2rem !important; }
  .certs__title {
    font-size: 1.55rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }
  .certs__blocks {
    grid-template-columns: 1fr !important;
    gap: 1.2rem !important;
    padding: 0 !important;
  }

  /* -- REACH — vertical scene, large typography --------------------- */
  .reach__head { margin-bottom: 2.4rem; }
  .reach__heading { font-size: clamp(2rem, 7.5vw, 2.4rem) !important; }
  .reach__sub { font-size: 0.95rem; line-height: 1.5; max-width: 36ch; margin: 0 auto; white-space: normal !important; }
  .reach__zones { grid-template-columns: 1fr !important; gap: 0; }
  .reach__zone { padding: 1.8rem 1.5rem !important; }
  .reach__zone + .reach__zone::before {
    left: 22% !important;
    right: 22% !important;
    top: 0 !important;
    bottom: auto !important;
    width: auto !important;
    height: 1px !important;
  }
  .reach__zone h3 {
    font-size: 1.7rem !important;
    white-space: nowrap !important;
  }

  /* -- CONTACT — text first, then form, premium spacing ------------- */
  .contact__inner {
    grid-template-columns: 1fr !important;
    gap: 2.3rem;
  }
  .contact__title {
    font-size: clamp(2rem, 7.5vw, 2.4rem) !important;
    line-height: 1.15 !important;
  }
  .contact__lead {
    font-size: 1rem !important;
    line-height: 1.55 !important;
    margin-bottom: 1.5rem;
  }
  .contact__info {
    grid-template-columns: 1fr 1fr !important;
    gap: 1.2rem 1.5rem !important;
    padding-top: 1.4rem !important;
  }
  .contact__form {
    padding: 1.6rem 1.3rem !important;
    gap: 1.15rem !important;
  }
  .contact__form label span { font-size: 0.95rem; }
  .contact__form input,
  .contact__form textarea {
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
  }
  .contact__form button {
    width: 100%;
    text-align: center;
    padding: 1rem 1.2rem;
    font-size: 0.92rem;
    letter-spacing: 0.22em;
  }

  /* -- FOOTER ------------------------------------------------------- */
  .foot { padding: 3rem 1.4rem 1.6rem; }
  .foot__inner {
    grid-template-columns: 1fr !important;
    gap: 2rem;
    padding-bottom: 1.8rem;
  }
  .foot__cols {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
  }
  .foot__h { font-size: 0.62rem; letter-spacing: 0.22em; }
  .foot__cols a { font-size: 0.88rem; line-height: 1.9; }
  .foot__word { font-size: 1.4rem; }
  .foot__tag { font-size: 0.92rem; }
  .foot__legal { font-size: 0.6rem; letter-spacing: 0.18em; margin-top: 1.4rem; }

  /* -- REVEAL — premium scroll-in motion calibrated for mobile ------ */
  .reveal {
    transform: translateY(22px);
    transition: opacity 0.85s cubic-bezier(.2,.8,.2,1),
                transform 0.85s cubic-bezier(.2,.8,.2,1);
  }
  .reveal--delay-1 { transition-delay: 0.08s; }
  .reveal--delay-2 { transition-delay: 0.16s; }
}

/* Small phone refinement (≤380px — iPhone SE / Mini class) ---------- */
@media (max-width: 380px) {
  .hero__title { font-size: 2.2rem !important; }
  .hero__tagline-top {
    font-size: 0.5rem !important;
    letter-spacing: 0.15em !important;
  }
  .hero__tagline-top .hero__tagline-star { margin: 0 0.3em; }
  .hero__tagline-top .hero__tagline-star:first-child { margin-left: 0.3em; }
  /* On 320px iPhones the bottom tagline is borderline-fitting; shrink it
     a touch so real iOS Safari (which renders text slightly wider than
     macOS WebKit) cannot tip it over the wrap threshold. */
  .hero__tagline-bottom {
    font-size: 0.64rem !important;
    letter-spacing: 0.22em !important;
  }
  .reach__zone h3 { font-size: 1.5rem !important; }
  .step__title { font-size: 1.55rem !important; }
  .products__grid .product__title { font-size: 1.6rem !important; }
  .products__grid .product__varieties { font-size: 1.12rem !important; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
  .calendar__row { grid-template-columns: 60px repeat(12, 1fr) !important; }
  .calendar__label { font-size: 0.85rem !important; }
  .contact__info { grid-template-columns: 1fr !important; }
}

/* ===================================================================
   PRINT / PDF — A4 portrait, one section per page where possible.
   =================================================================== */
@page {
  size: A4 portrait;
  margin: 0;
}

@media print {
  :root { --sec: 3rem; --gut: 1.6rem; }

  html, body { background: var(--cream-100) !important; }
  body::before { display: none !important; }

  .nav, .hero__scroll, .contact__form, .nav__contacts, .nav__burger { display: none !important; }

  /* Reset screen scroll-snap & viewport fitting */
  * { scroll-snap-type: none !important; scroll-snap-align: none !important; }

  /* Colour fidelity */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Each major section fills one A4 page, vertically centered */
  .hero, .reach, .products, .calendar, .certs, .process, .story, .contact {
    min-height: 297mm !important;
    height: 297mm !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: 14mm !important;
    padding-bottom: 14mm !important;
    page-break-before: always;
    break-before: page;
    page-break-inside: avoid;
    break-inside: avoid;
    box-sizing: border-box;
  }
  .hero { page-break-before: auto; break-before: auto; }

  /* ---- HERO ---- */
  .hero {
    min-height: calc(297mm - 2px) !important;
    padding: 22mm 18mm 18mm !important;
    display: flex !important;
    align-items: center !important;
  }
  .hero__content { max-width: 160mm; margin-left: 0 !important; }
  .hero__title   { font-size: 52pt !important; line-height: 1.02; margin-bottom: 8mm; }
  .hero__tagline { font-size: 9pt !important; margin: 0 0 10mm !important; line-height: 1.7; }
  .hero__meta    { font-size: 9pt !important; padding-top: 4mm; }

  /* ---- REACH ---- */
  .reach { padding: 20mm 15mm !important; }
  .reach__head   { max-width: 180mm; margin: 0 auto 14mm; }
  .reach__heading{ font-size: 32pt !important; }
  .reach__sub    { font-size: 11pt !important; white-space: normal !important; max-width: 150mm; margin: 0 auto; }
  .reach__zones  {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 180mm;
    margin: 0 auto;
    align-items: center !important;
    gap: 0 !important;
  }
  .reach__zone   { padding: 3mm 4mm !important; text-align: center; position: relative; }
  .reach__zone h3{ font-size: 16pt !important; white-space: nowrap; }
  /* Reset the mobile horizontal divider & restore the vertical hairline */
  .reach__zone + .reach__zone::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 15% !important;
    bottom: 15% !important;
    width: 1px !important;
    height: auto !important;
    background: rgba(20, 38, 28, 0.2) !important;
  }

  /* ---- PRODUCTS ---- */
  .products { padding: 18mm 15mm !important; }
  .section-head { margin: 0 auto 10mm !important; max-width: 170mm; }
  .section-head__title { font-size: 28pt !important; line-height: 1.1; }
  .section-head__eyebrow { font-size: 9pt !important; margin-bottom: 4mm; }
  .products__grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6mm !important;
    max-width: 180mm;
  }
  .products__grid .product__media { aspect-ratio: 5 / 4 !important; }
  .products__grid .product__body  { padding: 5mm 4mm 5mm !important; }
  .products__grid .product__title { font-size: 16pt !important; margin-bottom: 2.5mm !important; }
  .products__grid .product__sep  { font-size: 7pt !important; letter-spacing: 0.5em !important; text-align: center; margin: 0 0 2mm !important; color: var(--green-700); opacity: 0.7; }
  .products__grid .product__varieties { font-size: 11pt !important; font-weight: 600 !important; line-height: 1.3 !important; text-align: center; margin: 0 0 2.5mm !important; color: var(--green-800); }
  .products__grid .product__desc  { font-size: 9pt !important; line-height: 1.4; max-width: none !important; margin: 0 !important; -webkit-line-clamp: unset !important; display: block !important; overflow: visible !important; }

  /* ---- CALENDAR ---- */
  .calendar { padding: 18mm 15mm !important; }
  .calendar__table { max-width: 180mm; gap: 2mm !important; }
  .calendar__row { grid-template-columns: 32mm repeat(12, 1fr) !important; gap: 1mm !important; }
  .calendar__row--months { padding-bottom: 3mm; margin-bottom: 2mm; }
  .calendar__month { font-size: 7pt !important; letter-spacing: 0.14em !important; }
  .calendar__label { font-size: 12pt !important; }
  .calendar__cell  { height: 7mm !important; }
  .calendar__legend { font-size: 7pt !important; margin-top: 6mm !important; gap: 3mm 10mm; }

  /* ---- CERTS ---- */
  .certs { padding: 22mm 15mm !important; }
  .certs__head   { margin-bottom: 10mm !important; }
  .certs__title  { font-size: 22pt !important; line-height: 1.25; font-weight: 500; }
  .certs__blocks {
    max-width: 180mm;
    padding: 0 !important;
    grid-template-columns: 3fr 2fr !important;
    gap: 4mm !important;
  }

  /* ---- PROCESS ---- */
  .process { padding: 18mm 15mm !important; }
  .process__steps {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6mm !important;
    max-width: 180mm;
    position: relative;
  }
  .process__steps::before,
  .process__steps::after { display: none !important; content: none !important; }
  .step { position: relative; z-index: 1; }
  .step__media {
    aspect-ratio: 1 / 1 !important;
    width: 36mm !important;
    max-width: 36mm !important;
    height: 36mm !important;
    margin: 0 auto 4mm !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
  }
  .step__num   { font-size: 9pt !important; }
  .step__title { font-size: 14pt !important; margin-bottom: 2mm !important; }
  .step__desc  { font-size: 8.5pt !important; line-height: 1.4; max-width: none; }

  /* ---- STORY ---- */
  .story { padding: 20mm 15mm !important; }
  .story__grid {
    grid-template-columns: 5fr 7fr !important;
    gap: 12mm !important;
    align-items: stretch !important;
    max-width: 180mm;
    margin: 0 auto;
  }
  .story__media--asset { aspect-ratio: auto !important; height: 100% !important; min-height: 140mm !important; }
  .story__title     { font-size: 26pt !important; line-height: 1.05; margin: 3mm 0 5mm !important; }
  .story__paragraph { font-size: 10pt !important; line-height: 1.5; max-width: none !important; margin-bottom: 3mm; }
  .story__pillars   { margin-top: 6mm !important; padding-top: 5mm !important; gap: 3mm !important; }
  .story__pillars li{ grid-template-columns: 10mm 1fr !important; gap: 4mm !important; }
  .story__pillars h4{ font-size: 11pt !important; margin-bottom: 1mm !important; }
  .story__pillars p { font-size: 8.5pt !important; max-width: none !important; line-height: 1.45 !important; }
  .story__pillar-num{ font-size: 12pt !important; }

  /* ---- CONTACT (sits at top of final page, footer beneath) ---- */
  .contact {
    min-height: 195mm !important;
    height: auto !important;
    padding: 20mm 15mm 10mm !important;
    justify-content: center !important;
    page-break-after: avoid !important;
    break-after: avoid !important;
  }
  .contact__inner { grid-template-columns: 1fr !important; max-width: 170mm; margin: 0 auto; }
  .contact__title { font-size: 28pt !important; margin: 3mm 0 5mm !important; }
  .contact__lead  { font-size: 11pt !important; line-height: 1.55; max-width: 140mm; margin-bottom: 8mm; }
  .contact__info  { grid-template-columns: repeat(2, 1fr); gap: 6mm 10mm; padding-top: 5mm !important; }
  .contact__value { font-size: 10pt !important; }
  .contact__label { font-size: 7pt !important; }

  /* ---- FOOTER (glued to the bottom of the contact page) ---- */
  .foot {
    padding: 10mm 15mm 10mm !important;
    page-break-before: avoid !important;
    break-before: avoid !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .foot__inner  { padding-bottom: 6mm !important; }
  .foot__legal  { margin-top: 4mm !important; font-size: 7pt !important; }
  .foot__word   { font-size: 16pt !important; }
  .foot__tag    { font-size: 9pt !important; }
  .foot__h      { font-size: 7pt !important; }
  .foot__cols a { font-size: 9pt !important; line-height: 1.7 !important; }

  /* Reveal animations forced on */
  .reveal, .reveal.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}