/* ==========================================================================
   NUUDELCHIN AGRO FARM — premium single-page site
   Palette: forest green / warm cream / charcoal / metallic gold
   Type: Cormorant Garamond (serif display) + Inter (body) — Latin + Cyrillic (incl. Mongolian ө/ү)
   ========================================================================== */

:root{
  --green:       #1a5e2a;
  --green-deep:  #0a2e16;
  --cream:       #fbf6ed;
  --cream-dark:  #f2e8d6;
  --charcoal:    #2c2c2c;
  --gold:        #d4a54a;
  --gold-soft:   #e8c882;
  /* Text-safe gold: --gold itself is ~2.1:1 on cream/white (fails WCAG AA
     even at the large-text 3:1 threshold) and --gold-soft is ~1.5:1 there —
     both were designed for gold-on-dark use. This darker value is ~5:1 on
     cream, for gold text that sits on light backgrounds (kicker labels,
     timeline year numbers, the About badge number). */
  --gold-text:   #86641f;
  --ink-soft:    rgba(44,44,44,.72);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans:  "Inter", -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(.22,1,.36,1);       /* long deceleration — used for reveals */
  --spring:   cubic-bezier(.34,1.56,.64,1);    /* slight overshoot — used for micro-interactions */
  --radius: 24px;
  --radius-lg: 30px;
  --gutter: clamp(1.25rem, 5vw, 6rem);
  /* Layered Apple-style surface shadows — depth from light + elevation,
     never from a hard border. */
  --shadow-1: 0 1px 2px rgba(44,44,44,.04), 0 14px 30px -18px rgba(44,44,44,.24);
  --shadow-2: 0 2px 6px rgba(44,44,44,.05), 0 26px 52px -24px rgba(44,44,44,.32);
  --shadow-green: 0 28px 56px -26px rgba(10,46,22,.55);
}

*{ margin:0; padding:0; box-sizing:border-box; }
/* Smooth anchor scrolling where supported; older Android browsers that ignore
   this simply jump — acceptable fallback, and the FAB uses JS scrollTo anyway */
html{ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  color:var(--charcoal);
  background:var(--cream);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.1; }
/* Two-line headlines with italic accents need a touch more leading so the
   serif's long descenders (g, p, y) never collide with the line below. */
h2{ font-size:clamp(2.6rem, 5.6vw, 4.7rem); letter-spacing:-.022em; line-height:1.14; }
h2 em{ font-style:italic; color:var(--green); }
section{ position:relative; }

/* Small caps intro line above each section heading */
.kicker{
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-text); font-weight:600; margin-bottom:1.2rem;
}
/* For kickers sitting on dark sections (Recognition, Farms) — --gold-soft
   reads clearly there; the default --gold-text above is tuned for the
   light/cream sections (About, Journey, Services, Products, Contact). */
.kicker--light{ color:var(--gold-soft); }

/* Reduced motion: kill transforms/animations, keep content visible */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero__inner{ opacity:1 !important; transform:none !important; }
}

/* Reduced transparency: frosted materials go solid so text stays legible
   over whatever scrolls beneath (nav, mobile menu, action bar, farm glass). */
@media (prefers-reduced-transparency: reduce){
  .nav::before{ background:rgba(251,246,237,.98); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .mobilebar{ background:rgba(251,246,237,.99); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .farm{ background:rgba(10,46,22,.92); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
/* The full-screen mobile menu is the only nav surface with a background, so
   only harden it on small screens. */
@media (prefers-reduced-transparency: reduce) and (max-width: 820px){
  .nav__links{ background:rgba(251,246,237,.99); backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* High contrast: reinforce boundaries so stacked surfaces separate clearly. */
@media (prefers-contrast: more){
  .svc, .tl__card, .mv, .news__card, .news__post, .prod, .contact__list li{ border:1px solid rgba(44,44,44,.4); }
  .farm{ border-color:rgba(251,246,237,.55); }
}

/* Focus-visible: a charcoal ring + cream halo, not just the browser default.
   This page has no single background tone — dark green, charcoal, cream and
   white sections all sit side by side — so one flat outline color would
   disappear against at least half of them. The two rings together mean one
   of the two always has strong contrast, wherever the focused element is. */
:focus-visible{
  outline:3px solid var(--charcoal);
  outline-offset:2px;
  box-shadow:0 0 0 5px rgba(251,246,237,.85);
}

/* ==========================================================================
   GLOBAL OVERLAYS — progress bar, cursor glow, film grain
   ========================================================================== */

/* Progress bar: transform-scaled (not width) so it stays on the compositor */
.progress-bar{
  position:fixed; top:0; left:0; height:3px; width:100%;
  background:linear-gradient(90deg, var(--green), var(--gold));
  box-shadow:0 0 14px rgba(212,165,74,.55);
  transform-origin:0 50%; transform:scaleX(0);
  z-index:1000; pointer-events:none;
}

/* Cursor glow: large soft radial gradient, eased toward the pointer with lerp in JS */
.cursor-glow{
  position:fixed; top:0; left:0; width:520px; height:520px;
  margin:-260px 0 0 -260px; border-radius:50%;
  background:radial-gradient(circle, rgba(212,165,74,.14) 0%, rgba(212,165,74,0) 62%);
  pointer-events:none; z-index:4; will-change:transform;
}
@media (hover:none){ .cursor-glow{ display:none; } }

/* Film grain: tiny SVG turbulence tile, very low opacity, fixed over everything */
.grain{
  position:fixed; inset:0; z-index:999; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; gap:2rem;
  padding:1.1rem var(--gutter);
  transition:box-shadow .45s, padding .45s;
  color:var(--cream);
}
/* The frosted-glass background lives on a ::before, not on .nav itself.
   backdrop-filter (like transform/filter) makes its element the containing
   block for position:fixed DESCENDANTS — and .nav__links (the full-screen
   mobile menu) is fixed and nested inside .nav. Blurring .nav directly meant
   that past 60px of scroll, the menu's inset:0 resolved against the ~70px
   header bar instead of the viewport, collapsing it into an untappable
   sliver — the menu worked at the top of the page and silently broke the
   moment you scrolled. Keeping the filter off .nav avoids that entirely. */
.nav::before{
  content:""; position:absolute; inset:0; z-index:-1;
  opacity:0; transition:opacity .45s var(--ease-out);
  background:rgba(251,246,237,.72); backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
}
/* JS adds .nav--solid after 60px of scroll: cream glass panel, charcoal text */
.nav--solid{
  box-shadow:0 1px 0 rgba(44,44,44,.08), 0 12px 32px -24px rgba(44,44,44,.25);
  color:var(--charcoal);
  padding-top:.7rem; padding-bottom:.7rem;
}
.nav--solid::before{ opacity:1; }
.nav__brand{ display:flex; align-items:center; margin-right:auto; }
/* Logo mark alone now carries the full brand identity — sized up a bit
   since there's no accompanying wordmark text, and object-fit:contain
   guarantees the whole icon shows (never cropped). */
.nav__mark{ width:160px; height:80px; }
.nav__mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.nav__links{ display:flex; gap:1.8rem; font-size:.92rem; font-weight:500; }
.nav__links a{ position:relative; padding:.2rem 0; }
/* Underline grows from left on hover */
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .3s var(--ease-out);
}
.nav__links a:hover::after, .nav__links a.is-active::after{ transform:scaleX(1); }
.nav__burger{ display:none; }

/* Buttons — spring hover lift, instant press feedback (Apple: respond on
   pointer-down, not on release). The active state uses a fast easing so the
   press reads immediately; release springs back on the base transition. */
.btn{
  display:inline-block; padding:.85rem 1.9rem; border-radius:999px;
  font-weight:600; font-size:.95rem; letter-spacing:.02em;
  /* font-family/border/cursor are reset explicitly because .btn is used on
     both <a> and <button>. Form controls don't inherit the body font and
     carry a UA "outset" border, so on a <button> the same class rendered in
     Arial inside a 3D box — visibly a different component from the identical
     <a class="btn"> on the homepage. (.btn--ghost and .nav__cta re-declare
     their own border below and still win, being later in the file.) */
  font-family:inherit; border:0; cursor:pointer;
  transition:transform .35s var(--spring), box-shadow .35s, background .3s, color .3s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-3px) scale(1.03); }
.btn:active{ transform:translateY(1px) scale(.96); transition:transform .08s ease-out; }
.btn--gold{
  /* Charcoal text, not white: white-on-this-gradient measured ~2.3-3.2:1
     (fails WCAG AA's 4.5:1) across every stop, since gold is a mid-light
     tone with nothing dark enough behind pale text. Charcoal gets ~5.5-6.2:1
     across the same gradient (the darker stop is nudged lighter here to
     hold that margin at both ends) — same premium gold-button look, text
     that's actually readable. */
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, var(--gold), #c99a4e);
  color:var(--charcoal); box-shadow:0 8px 24px -8px rgba(212,165,74,.55);
}
.btn--gold:hover{ box-shadow:0 16px 34px -10px rgba(212,165,74,.7); }
/* Sheen sweep — light catching the gold as the pointer crosses (material, not
   just a color swap). Hidden for reduced motion below. */
.btn--gold::after{
  content:""; position:absolute; top:0; left:-140%; width:60%; height:100%;
  transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transition:left .65s var(--ease-out);
  pointer-events:none;
}
.btn--gold:hover::after{ left:150%; }
.btn--ghost{ border:1.5px solid rgba(251,246,237,.55); color:var(--cream); }
.btn--ghost:hover{ background:rgba(251,246,237,.12); }
/* Nav CTA is now an outline button (was solid gold). In the first viewport
   the hero's "Our journey" is the single solid-gold primary — two solid-gold
   CTAs (nav + hero) were competing. currentColor keeps this legible in both
   nav states: cream border/text on the dark hero, charcoal once the nav goes
   solid on scroll. */
.nav__cta{
  padding:.6rem 1.4rem; font-size:.85rem;
  border:1.5px solid currentColor; color:inherit; background:transparent;
}
.nav__cta:hover{ border-color:var(--gold); background:rgba(212,165,74,.12); }

/* Cart icon + badge — sits right before the language toggle */
.cart-toggle{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; }
.cart-toggle__badge{
  position:absolute; top:2px; right:0; min-width:18px; height:18px; padding:0 4px;
  border-radius:999px; background:var(--gold); color:var(--charcoal);
  font-size:.68rem; font-weight:700; line-height:18px; text-align:center;
}

/* Language toggle — small pill next to the CTA; inherits nav color state */
.lang-toggle{
  min-width:44px; min-height:44px; padding:.4rem .9rem;
  border-radius:999px; border:1.5px solid currentColor;
  background:transparent; color:inherit; cursor:pointer;
  font-family:var(--sans); font-weight:700; font-size:.8rem; letter-spacing:.08em;
  transition:background .3s, color .3s, transform .3s var(--spring);
}
.lang-toggle:hover{ background:var(--gold); border-color:var(--gold); color:var(--charcoal); transform:translateY(-2px); }
.lang-toggle:active{ transform:scale(.93); transition:transform .1s ease-out; }

/* ==========================================================================
   SCROLL-SPY DOTS (right edge, desktop)
   ========================================================================== */
.dots{
  position:fixed; right:1.6rem; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:1rem; z-index:800;
}
.dots a{ display:flex; align-items:center; justify-content:flex-end; gap:.6rem; }
.dots i{
  width:9px; height:9px; border-radius:50%; flex-shrink:0; order:2;
  background:rgba(44,44,44,.25); border:1px solid transparent;
  transition:all .3s var(--spring);
}
.dots b{
  font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--charcoal); order:1; text-align:right;
  opacity:0; transform:translateX(6px);
  transition:all .3s var(--ease-out);
}
.dots a:hover b{ opacity:1; transform:none; }
.dots a.is-active i{ background:var(--gold); transform:scale(1.5); box-shadow:0 0 0 4px rgba(212,165,74,.2); }
/* Dots invert to cream on dark sections (class toggled by JS) */
.dots--light i{ background:rgba(251,246,237,.4); }
.dots--light b{ color:var(--cream); }

/* ==========================================================================
   HERO — layered parallax scene + line-mask headline reveal
   ========================================================================== */
.hero{
  min-height:100svh; display:flex; align-items:center;
  color:var(--cream); overflow:hidden;
  background:var(--green-deep);
}
/* Photo layer moves slower than scroll (data-parallax in JS). Gradient fallback
   keeps the hero rich even if the image is missing. */
.hero__bg{
  position:absolute; inset:-12% 0; z-index:0; will-change:transform;
  background:
    linear-gradient(160deg, rgba(10,46,22,.22), rgba(10,46,22,.55)),
    url("img/farm-barn.jpg") center/cover no-repeat,
    radial-gradient(120% 90% at 75% 15%, #2c7a3f 0%, var(--green) 45%, var(--green-deep) 100%);
}
.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(10,46,22,.94) 0%, rgba(10,46,22,.26) 42%, rgba(10,46,22,.42) 100%);
}
.hero__inner{ position:relative; z-index:2; padding:clamp(7rem, 15vh, 11rem) var(--gutter) 6.5rem; max-width:1120px; }
.hero__kicker{
  font-size:.78rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-soft); font-weight:600; margin-bottom:1.8rem;
}
.hero__title{
  font-size:clamp(3.4rem, 8.6vw, 7.4rem); font-weight:600; letter-spacing:-.022em;
  margin-bottom:1.6rem; line-height:1.08;
}
/* Line reveal: each line fades up from below without clipping.
   No overflow:hidden — descenders stay intact. */
.hero__title .line{ display:block; }
.hero__title .line > span{
  display:inline-block; opacity:0; transform:translateY(.55em);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.hero__title .line.in > span{ opacity:1; transform:translateY(0); }
.gold-ink{
  background:linear-gradient(100deg, var(--gold-soft), var(--gold) 55%, #f4e3b8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-style:italic;
}
.hero__slogan{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.2rem, 2.2vw, 1.5rem);
  color:var(--gold-soft); margin-bottom:1rem;
}
.hero__lede{ max-width:37rem; font-weight:300; font-size:1.1rem; line-height:1.75; color:rgba(251,246,237,.85); margin-bottom:2.6rem; }
.hero__actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero__scroll{
  position:absolute; left:50%; bottom:2rem; z-index:2; width:38px; height:38px;
  color:rgba(251,246,237,.75); transform:translateX(-50%);
  animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,8px);} }

/* ==========================================================================
   GENERIC SCROLL REVEAL — fade-up, activated by IntersectionObserver
   ========================================================================== */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay:var(--d, 0s); /* stagger set inline by JS per group */
}
.reveal.in{ opacity:1; transform:none; }
/* Materialized reveal for surfaces (cards, photos, quotes): a gentle scale-in
   alongside the fade reads as a physical layer arriving — not just text
   sliding up. Lower specificity than .reveal.in, so the settled state wins. */
.reveal--scale{ transform:translateY(20px) scale(.972); }

/* ==========================================================================
   STATS BAND — cream, counters animate on first sight
   ========================================================================== */
.stats{ padding:clamp(4rem, 8vw, 6.5rem) var(--gutter); border-bottom:1px solid rgba(44,44,44,.07); }
.stats__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:2.6rem 2rem; max-width:1200px; margin:0 auto; text-align:center;
}
.stat__num{
  display:block; font-family:var(--serif); font-weight:700;
  font-size:clamp(3rem, 5.2vw, 4.6rem); letter-spacing:-.01em; color:var(--green);
  font-variant-numeric:tabular-nums;
}
/* Gold hairline under each numeral — a quiet echo of the timeline spine */
.stat__num::after{
  content:""; display:block; width:2.5rem; height:2px; margin:.55rem auto 0;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.stat__label{ display:block; margin-top:.8rem; font-size:.88rem; color:var(--ink-soft); max-width:15rem; margin-inline:auto; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{ padding:clamp(5.5rem, 11vw, 8.5rem) var(--gutter); }
.about__grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:4.5rem;
  max-width:1240px; margin:0 auto; align-items:start;
}
.about__text h2{ margin-bottom:1.4rem; }
/* :not(.kicker) — otherwise this (higher-specificity: class+type vs .kicker's
   single class) silently overrode the kicker's gold with body-copy gray. */
.about__text > p:not(.kicker){ max-width:36rem; color:var(--ink-soft); margin-bottom:2.2rem; }
.about__mv{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-bottom:2rem; }
.mv{
  background:#fff; border-radius:var(--radius); padding:1.8rem 1.9rem;
  box-shadow:var(--shadow-1);
  transition:transform .35s var(--spring), box-shadow .35s;
}
.mv:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); }
.mv h3{ font-size:1.35rem; color:var(--green); margin-bottom:.5rem; }
.mv p{ font-size:.9rem; color:var(--ink-soft); }
.values{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; }
.values li{
  font-size:.8rem; font-weight:600; letter-spacing:.04em;
  padding:.45rem 1rem; border-radius:999px;
  border:1px solid rgba(26,94,42,.3); color:var(--green);
  transition:all .3s var(--spring);
}
.values li:hover{ background:var(--green); color:var(--cream); transform:translateY(-2px); }

.about__media{ position:relative; }
.about__photo{
  aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden;
  background:
    linear-gradient(rgba(10,46,22,.08), rgba(10,46,22,.22)),
    url("img/opening-ceremony.jpg") center/cover no-repeat,
    linear-gradient(150deg, var(--green) 0%, var(--green-deep) 100%);
  box-shadow:var(--shadow-green);
}
.about__media figcaption{ margin-top:.8rem; font-size:.8rem; color:var(--ink-soft); font-style:italic; }
.about__badge{
  position:absolute; left:-1.6rem; bottom:3.2rem;
  background:var(--cream); border-radius:16px; padding:1rem 1.3rem;
  box-shadow:0 24px 50px -20px rgba(44,44,44,.35);
  display:flex; align-items:center; gap:.9rem; max-width:15rem;
  font-size:.8rem; line-height:1.35; color:var(--ink-soft);
}
.about__badge-num{ font-family:var(--serif); font-size:2.3rem; font-weight:700; color:var(--gold-text); }

/* ==========================================================================
   JOURNEY — alternating timeline threaded on a self-drawing gold spine
   ========================================================================== */
.journey{
  padding:clamp(5.5rem, 11vw, 8.5rem) var(--gutter) clamp(6rem, 12vw, 9rem);
  background:linear-gradient(180deg, var(--cream) 0%, var(--cream-dark) 100%);
}
.journey__head{ text-align:center; max-width:640px; margin:0 auto 4.5rem; }
.timeline{ position:relative; max-width:900px; margin:0 auto; }
/* The spine SVG stretches the full height of the list; JS measures the path
   and animates stroke-dashoffset from full length → 0 as the section scrolls. */
.timeline__spine{
  position:absolute; left:50%; top:0; height:100%; width:60px;
  transform:translateX(-50%); overflow:visible;
}
.tl{ display:flex; align-items:center; margin-bottom:3.2rem; position:relative; }
.tl:nth-child(even){ flex-direction:row; }      /* card right */
.tl:nth-child(odd){ flex-direction:row-reverse; } /* card left */
.tl__year{
  flex:0 0 50%; text-align:center;
  font-family:var(--serif); font-weight:700; font-style:italic;
  font-size:clamp(1.85rem, 3.4vw, 2.75rem); color:var(--gold-text);
}
.tl__card{
  flex:0 0 50%; background:#fff; border-radius:var(--radius);
  padding:1.7rem 1.9rem;
  box-shadow:var(--shadow-1);
  transition:transform .4s var(--spring), box-shadow .4s;
}
.tl__card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-2); }
.tl__card h3{ font-size:1.35rem; color:var(--green); margin-bottom:.4rem; }
.tl__card p{ font-size:.92rem; color:var(--ink-soft); }
.tl__card--major{ border-top:4px solid var(--gold); }
.tl__card--future{ background:var(--green-deep); border:none; }
.tl__card--future h3{ color:var(--gold-soft); }
.tl__card--future p{ color:rgba(251,246,237,.85); }

/* ==========================================================================
   FARMS — dark green band, 3D-tilt cards
   ========================================================================== */
.farms{
  padding:clamp(5.5rem, 11vw, 8.5rem) var(--gutter);
  background:
    radial-gradient(90% 120% at 15% 0%, #25763c 0%, var(--green) 40%, var(--green-deep) 100%);
  color:var(--cream);
}
.farms h2 em{ color:var(--gold-soft); }
/* Editorial split: intro copy on the left, the four cluster cards as a 2×2
   grid on the right (was: copy stacked above a single full-width card row). */
.farms__layout{
  display:grid; grid-template-columns:0.85fr 1.15fr;
  gap:clamp(2rem, 5vw, 4.5rem); align-items:center;
  max-width:1240px; margin:0 auto;
}
.farms__head{ max-width:none; margin-bottom:0; }
.farms__head p:last-child{ color:rgba(251,246,237,.8); margin-top:1.2rem; }
.farms__grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1.4rem; }
/* data-tilt cards get perspective rotation from JS; transform-style keeps the
   inner content lifted */
.farm{
  background:rgba(251,246,237,.07); border:1px solid rgba(251,246,237,.16);
  border-radius:var(--radius); padding:2.3rem 1.9rem;
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 24px 48px -24px rgba(6,28,14,.65);
  transition:border-color .3s, background .3s, box-shadow .35s;
  transform-style:preserve-3d; will-change:transform;
}
.farm:hover{ border-color:rgba(212,165,74,.7); background:rgba(251,246,237,.1); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 32px 58px -26px rgba(6,28,14,.7); }
.farm__count{
  font-family:var(--serif); font-weight:700; font-size:3.6rem; letter-spacing:-.01em;
  color:var(--gold-soft);
  display:block; transform:translateZ(30px);
}
.farm h3{ font-size:1.45rem; margin:.4rem 0 .5rem; }
.farm__meta{ font-size:.82rem; color:rgba(251,246,237,.72); }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services{ padding:clamp(5.5rem, 11vw, 8.5rem) var(--gutter); }
.services__head{ max-width:600px; margin:0 auto 3.5rem; text-align:center; }
/* Explicit 3×2 — six services divide evenly into three columns. The old
   auto-fit landed on 4 columns, orphaning the last two on a second row. */
.services__grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1.4rem; max-width:1140px; margin:0 auto;
}
.svc{
  background:#fff; border-radius:var(--radius); padding:2.3rem;
  box-shadow:var(--shadow-1);
  transform-style:preserve-3d; will-change:transform;
  transition:box-shadow .35s;
}
.svc:hover{ box-shadow:var(--shadow-2); }
.svc--training{
  background:linear-gradient(105deg, rgba(255,255,255,.94), rgba(255,255,255,.8)) center/cover no-repeat;
}
.svc__icon{
  width:46px; height:46px; color:var(--gold); margin-bottom:1.2rem;
  transform:translateZ(26px); transition:transform .35s var(--spring), color .3s;
}
.svc:hover .svc__icon{ color:var(--green); transform:translateZ(26px) scale(1.12); }
.svc h3{ font-size:1.4rem; margin-bottom:.5rem; color:var(--charcoal); }
.svc p{ font-size:.92rem; color:var(--ink-soft); }

/* ==========================================================================
   PRODUCTS — editorial photo cards with hover zoom
   ========================================================================== */
.products{ padding:clamp(5.5rem, 11vw, 8.5rem) var(--gutter); background:var(--cream-dark); }
.products__head{ max-width:600px; margin:0 auto 3.5rem; text-align:center; }
.products__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(270px,1fr));
  gap:1.6rem; max-width:1240px; margin:0 auto;
}
.prod{
  border-radius:var(--radius-lg); overflow:hidden; background:#fff;
  box-shadow:var(--shadow-1);
  transition:transform .35s var(--spring), box-shadow .35s;
}
.prod:hover{ transform:translateY(-5px); box-shadow:var(--shadow-2); }
.prod__media{
  aspect-ratio:16/10; background-size:cover; background-position:center;
  transition:transform .8s var(--ease-out);
}
.prod:hover .prod__media{ transform:scale(1.06); }
/* Real photos with a light brand-tinted veil — subtle enough that the
   photography reads clearly (heavy blend modes flattened the images) */
.prod__media--equipment{ background-image:linear-gradient(rgba(44,44,44,.22), rgba(44,44,44,.38)), url("img/proj-farm.jpg"); background-size:cover; background-position:center; }
.prod__media--milk{ background-image:linear-gradient(rgba(212,165,74,.14), rgba(184,134,47,.26)), url("img/cow-holstein.jpg"); background-size:cover; background-position:center; }
.prod__media--livestock{ background-image:linear-gradient(rgba(26,94,42,.16), rgba(14,61,26,.34)), url("img/calves.png"); background-size:cover; background-position:center; }
.prod__body{ padding:1.6rem 1.8rem 1.9rem; }
.prod__body h3{ font-size:1.4rem; color:var(--green); margin-bottom:.4rem; }
.prod__body p{ font-size:.92rem; color:var(--ink-soft); }

/* ==========================================================================
   RECOGNITION — charcoal editorial block
   ========================================================================== */
.recognition{ padding:clamp(5.5rem, 11vw, 9rem) var(--gutter); background:var(--charcoal); color:var(--cream); }
.recognition h2 em{ color:var(--gold-soft); }
.recognition__inner{ max-width:1000px; margin:0 auto; }
.recognition__body{ max-width:44rem; margin:1.4rem 0 3rem; color:rgba(251,246,237,.85); }
.quotes{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-bottom:3rem; }
.director-badge{
  display:flex; align-items:center; gap:1.2rem;
  background:rgba(212,165,74,.12); border:1px solid rgba(212,165,74,.25);
  border-radius:var(--radius); padding:1.1rem 1.5rem; margin-bottom:2rem; max-width:fit-content;
}
.director-badge__photo{ border-radius:50%; object-fit:cover; border:2px solid var(--gold); }
.director-badge strong{ display:block; color:var(--gold-soft); font-size:.95rem; }
.director-badge span{ font-size:.78rem; color:rgba(251,246,237,.65); }
.quote{
  border-left:4px solid var(--gold); padding:1.6rem 1.8rem;
  background:rgba(251,246,237,.06); border-radius:0 var(--radius) var(--radius) 0;
}
.quote p{ font-family:var(--serif); font-style:italic; font-size:1.22rem; line-height:1.5; margin-bottom:.9rem; }
.quote footer{ font-size:.82rem; color:rgba(251,246,237,.65); }
.story{ background:rgba(212,165,74,.1); border:1px solid rgba(212,165,74,.3); border-radius:var(--radius); padding:1.8rem 2rem; margin-bottom:3rem; }
.story h3{ color:var(--gold-soft); font-size:1.3rem; margin-bottom:.6rem; }
.story p{ font-size:.94rem; color:rgba(251,246,237,.88); }
.story__src{ margin-top:.7rem; font-size:.75rem !important; color:rgba(251,246,237,.5) !important; letter-spacing:.06em; }
/* Divider + top padding separate "Partners" from the herder testimonial above
   it, so the densest section on the page gets a clear internal break. */
.partners{ margin-top:1rem; padding-top:2.6rem; border-top:1px solid rgba(251,246,237,.12); }
.partners h3{ font-size:1.25rem; color:var(--gold-soft); margin-bottom:1rem; }
/* Centered flex so 5 partners land as a deliberate 3 + 2 (the old auto-fit
   grid left one lonely card on a 4 + 1 second row). */
.partners ul{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
.partners li{
  flex:1 1 260px; max-width:320px;
  padding:1rem 1.2rem; border:1px solid rgba(251,246,237,.14); border-radius:14px;
  font-size:.85rem; transition:border-color .3s;
}
.partners li:hover{ border-color:var(--gold); }
.partners li strong{ display:block; margin-bottom:.2rem; }
.partners li span{ color:rgba(251,246,237,.6); }

/* ==========================================================================
   NEWS — homepage feed section
   ========================================================================== */
.news{
  padding:clamp(5.5rem, 11vw, 8.5rem) var(--gutter);
  background:var(--cream-dark);
}
.news__head{ text-align:center; max-width:600px; margin:0 auto 3.5rem; }
.news__head h2 em{ color:var(--green); }
.news__grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1.6rem; max-width:1140px; margin:0 auto;
}
.news__card{
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-1);
  transition:transform .4s var(--spring), box-shadow .35s;
}
.news__card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-2); }
.news__card-img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
}
.news__card-body{ padding:1.4rem 1.6rem 1.8rem; }
.news__date{
  display:inline-block; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600; color:var(--gold-text);
  margin-bottom:.4rem;
}
.news__card-title{
  font-size:1.25rem; font-family:var(--serif); font-weight:600;
  color:var(--green); margin-bottom:.5rem; line-height:1.25;
}
.news__card-excerpt{ font-size:.88rem; color:var(--ink-soft); line-height:1.55; }
.news__empty{
  grid-column:1 / -1; text-align:center; color:var(--ink-soft);
  font-family:var(--serif); font-style:italic; font-size:1.15rem;
  display:none; padding:2rem 0;
}
.news__loader{
  grid-column:1 / -1; text-align:center; color:var(--ink-soft);
  padding:2rem 0; font-size:.9rem;
}
.news__footer{ text-align:center; margin-top:2.8rem; }
.news__footer .btn--ghost{
  border-color:var(--green); color:var(--green); display:inline-block;
}
.news__footer .btn--ghost:hover{
  background:var(--green); color:var(--cream);
}

/* ==========================================================================
   NEWS ARCHIVE PAGE
   ========================================================================== */
.news-archive{
  padding:8rem var(--gutter) 5rem;
  background:var(--cream);
  min-height:60vh;
}
.news-archive__head{ text-align:center; max-width:600px; margin:0 auto 3.5rem; padding-top:2rem; }
.news-archive__head h1 em{ color:var(--green); }
.news-archive__head h1{ font-size:clamp(2.4rem, 5.1vw, 4.1rem); font-family:var(--serif); font-weight:600; line-height:1.12; }
.news-archive__list{
  max-width:800px; margin:0 auto;
  display:flex; flex-direction:column; gap:2.5rem;
}
.news-archive__empty{
  text-align:center; color:var(--ink-soft);
  font-family:var(--serif); font-style:italic; font-size:1.15rem;
  display:none; padding:2rem 0;
}
.news__post{
  background:#fff; border-radius:var(--radius); padding:2rem 2.4rem;
  box-shadow:var(--shadow-1);
}
.news__post-img{
  width:100%; max-height:400px; object-fit:cover; border-radius:12px;
  margin-bottom:1.2rem;
}
.news__post-title{
  font-size:1.8rem; font-family:var(--serif); font-weight:600;
  color:var(--green); line-height:1.2; margin:.6rem 0 1rem;
}
.news__post-body{
  font-size:.98rem; color:var(--charcoal); line-height:1.7;
}

/* Archive responsive */
@media (max-width: 820px){
  .news-archive{ padding-top:6rem; }
  .news__post{ padding:1.4rem 1.5rem; }
  .news__post-title{ font-size:1.45rem; }
}

/* ==========================================================================
   CONTACT + FOOTER
   ========================================================================== */
.contact{ padding:clamp(5.5rem, 11vw, 8.5rem) var(--gutter) 0; }
.contact__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:4rem;
  max-width:1140px; margin:0 auto 5rem;
}
.contact__intro p[lang="mn"]{ margin-top:1.2rem; font-family:var(--serif); font-style:italic; font-size:clamp(1.35rem, 2.7vw, 1.85rem); color:var(--charcoal); }
.contact__list{ list-style:none; display:flex; flex-direction:column; gap:1.1rem; }
.contact__list li{
  display:flex; gap:1.1rem; align-items:center;
  background:#fff; border-radius:20px;
  padding:1.15rem 1.45rem; box-shadow:var(--shadow-1);
  transition:transform .3s var(--spring), box-shadow .3s;
}
.contact__list li:hover{ transform:translateX(6px); box-shadow:var(--shadow-2); }
.contact__list svg{ width:26px; height:26px; color:var(--gold); flex-shrink:0; }
.contact__list span{ display:block; font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft); }
.contact__list a, .contact__list p{ font-weight:600; font-size:.98rem; }
.contact__list a:hover{ color:var(--green); }
.footer{
  border-top:1px solid rgba(44,44,44,.1); padding:2rem var(--gutter) 5.5rem;
  text-align:center; font-size:.82rem; color:var(--ink-soft);
}

/* ==========================================================================
   FAB — scroll-to-top with bounce-in
   ========================================================================== */
.fab{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:850;
  width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
  background:var(--green); color:var(--cream);
  box-shadow:0 14px 30px -10px rgba(14,61,26,.6);
  display:grid; place-items:center;
  opacity:0; transform:translateY(20px) scale(.6); pointer-events:none;
  transition:opacity .4s, transform .45s var(--spring), background .3s;
}
.fab svg{ width:22px; height:22px; transition:transform .35s var(--spring); }
.fab.show{ opacity:1; transform:none; pointer-events:auto; }
.fab:hover{ background:var(--gold); }
.fab:hover svg{ transform:translateY(-3px) rotate(-8deg); }
.fab:active{ transform:scale(.9); transition:transform .12s ease-out; }

/* ==========================================================================
   STICKY MOBILE ACTION BAR
   ========================================================================== */
.mobilebar{
  position:fixed; left:0; right:0; bottom:0; z-index:860;
  display:none; grid-template-columns:1fr 1fr; align-items:center;
  background:rgba(251,246,237,.94); backdrop-filter:blur(12px);
  border-top:1px solid rgba(44,44,44,.1);
  padding:.5rem .7rem calc(.5rem + env(safe-area-inset-bottom));
  gap:.6rem;
}
.mobilebar a{
  text-align:center; padding:.6rem .9rem; border-radius:12px;
  font-weight:600; font-size:.9rem; white-space:nowrap;
  transition:transform .15s var(--spring), background .25s;
}
.mobilebar a:active{ transform:scale(.96); }
.mobilebar__call{ border:1.5px solid var(--green); color:var(--green); }
.mobilebar__call:active{ background:rgba(26,94,42,.08); }
.mobilebar__quote{ background:linear-gradient(135deg, var(--gold), #c99a4e); color:var(--charcoal); }
.mobilebar__quote:active{ background:linear-gradient(135deg, #c99a4e, #b8893d); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px){
  .dots{ display:none; }
  .about__grid{ grid-template-columns:1fr; gap:3rem; }
  .about__badge{ left:1rem; }
}
@media (max-width: 820px){
  .nav__links{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; align-items:center; justify-content:center; gap:2rem;
    background:rgba(251,246,237,.97); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    color:var(--charcoal); font-size:1.4rem;
    /* Same typeface + weight as the desktop nav (Inter, 500) — this used to
       switch to the serif display font here, so mobile and desktop nav
       links looked like two different fonts. */
    font-family:var(--sans); font-weight:500;
    /* Reveals via transform+opacity, not clip-path circle(). A clip-path
       shape-function transition (closed 0% -> open 150% radius) verified
       reliably stuck at the closed value and never animated to open — a
       known fragility of animating basic-shape() properties. transform
       and opacity are the two properties every engine animates correctly,
       so the burger's click handler and aria-state now have a reveal that
       actually renders instead of silently doing nothing. */
    transform-origin: calc(100% - 2.4rem) 2rem;
    transform: scale(0.05);
    opacity: 0;
    pointer-events: none;
    transition: transform .5s var(--ease-out), opacity .3s ease;
  }
  .nav.menu-open .nav__links{ transform: scale(1); opacity: 1; pointer-events: auto; }
  .nav__cta{ display:none; }
  .nav__burger{
    display:flex; flex-direction:column; gap:5px; background:none; border:none;
    cursor:pointer; padding:.4rem; z-index:2;
  }
  .nav__burger span{
    width:26px; height:2px; background:currentColor; border-radius:2px;
    transition:transform .35s var(--spring), opacity .25s;
  }
  /* Burger → X */
  .menu-open .nav__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .menu-open .nav__burger span:nth-child(2){ opacity:0; }
  .menu-open .nav__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .menu-open{ color:var(--charcoal) !important; }

  .about__mv, .quotes, .contact__grid{ grid-template-columns:1fr; }
  .timeline__spine{ left:14px; transform:none; }
  /* ".timeline .tl" (2 classes) matches the desktop nth-child rules'
     specificity (class + pseudo-class) for EVERY card regardless of parity,
     so it reliably wins as the later rule. Plain ".tl" alone was one class —
     it lost to ".tl:nth-child(even)" for half the cards, because the spine
     SVG is the first child in .timeline and shifts each card's real
     nth-child parity by one. Those cards silently stayed in 50%-wide row
     layout on mobile, blowing the page width out to 3x the viewport. */
  .timeline .tl{ flex-direction:column; align-items:flex-start; padding-left:3rem; }
  .tl__year, .tl__card{ flex-basis:auto; text-align:left; }
  .tl__year{ margin-bottom:.5rem; }
  .mobilebar{ display:grid; transform:translateY(120%); transition:transform .35s cubic-bezier(.22,1,.36,1); }
  .mobilebar.mobilebar--show{ transform:translateY(0); }
  /* FAB sits above the sticky action bar (bar height + safe area) */
  .fab{ bottom:calc(5.4rem + env(safe-area-inset-bottom)); }
  .footer{ padding-bottom:calc(7rem + env(safe-area-inset-bottom)); }
  /* ≥16px body copy on phones so iOS Safari never auto-zooms text */
  body{ font-size:16px; }
}

/* ==========================================================================
   MOBILE / TOUCH ENHANCEMENTS
   ========================================================================== */

/* Comfortable tap targets (Apple HIG: 44×44px minimum).
   .nav__cta is excluded: it's unconditional here but a mobile media query
   (above) sets it to display:none, and same-specificity + later-in-file
   was letting this rule win on phones, making the header CTA reappear and
   crowd the burger/lang-toggle. */
.btn:not(.nav__cta), .mobilebar a{ min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.nav__links a{ min-height:44px; display:inline-flex; align-items:center; }
.dots a{ min-height:28px; padding:.3rem 0; } /* dots are desktop-only; padded for precision pointers */
.contact__list a{ padding:.4rem 0; display:inline-block; }
.hero__scroll{ min-width:44px; min-height:44px; display:grid; place-items:center; }
.nav__burger{ min-width:44px; min-height:44px; align-items:center; justify-content:center; }

/* Touch devices: no hover states to rely on — kill 3D tilt and cursor glow,
   and make hover-revealed styles the resting state where it matters */
@media (hover: none){
  [data-tilt]{ transform:none !important; transition:none !important; }
  .cursor-glow{ display:none !important; }
  /* value pills + partner cards show their accent state without hover */
  .partners li{ border-color:rgba(212,165,74,.45); }
  /* tap feedback replaces hover lift */
  .btn:active, .tl__card:active, .svc:active, .farm:active{ transform:scale(.98); }
}

/* Forms (none today, but any future input keeps 16px so iOS doesn't zoom) */
input, textarea, select{ font-size:16px !important; }

/* ==========================================================================
   MOBILE POLISH — phone-first sizing (placed last so it wins the cascade)
   ========================================================================== */
@media (max-width: 820px){
  :root{ --gutter:1.25rem; }

  /* Header: tighter gaps so the logo, toggle and burger fit 375px */
  .nav{ gap:.75rem; padding:.75rem 1rem; }
  .nav__mark{ width:100px; height:36px; }
  .lang-toggle{ padding:.3rem .75rem; font-size:.75rem; }

  /* Hero: scale the display type to the viewport instead of desktop minimums */
  .hero__inner{ padding:6.5rem var(--gutter) 5.5rem; }
  .hero__kicker{ font-size:.68rem; letter-spacing:.22em; }
  .hero__title{ font-size:clamp(2.6rem, 12vw, 4.1rem); letter-spacing:-.018em; }
  .hero__slogan{ font-size:1rem; }
  .hero__lede{ font-size:.98rem; line-height:1.65; }

  /* Section headings + vertical rhythm: desktop air reads as empty on phones */
  h2{ font-size:clamp(2.2rem, 8.6vw, 3.2rem); }
  .about, .journey, .farms, .services, .products, .news{ padding-top:4.5rem; padding-bottom:4.5rem; }
  .recognition{ padding-top:4.5rem; padding-bottom:4.5rem; }
  .contact{ padding-top:4.5rem; }
  .journey__head, .services__head, .products__head{ margin-bottom:2.6rem; }
  .farms__head{ margin-bottom:2.4rem; }

  /* Stats: 2-up grid (last stat spans full width) instead of one long column */
  .stats{ padding:3.5rem var(--gutter); }
  .stats__grid{ grid-template-columns:repeat(2, 1fr); gap:1.8rem 1rem; }
  .stat:last-child{ grid-column:1 / -1; }
  .stat__num{ font-size:2.6rem; }
  .stat__label{ font-size:.8rem; }

  /* About: tighter photo block. The badge is absolutely positioned
     over the photo — on narrow screens the 4:5 photo is shorter, so
     we pull the badge higher and give the figcaption extra top margin
     so the caption text never sits underneath it. */
  .about__grid{ gap:2.4rem; }
  .about__badge{ left:.9rem; bottom:3.8rem; padding:.8rem 1rem; max-width:12rem; }
  .about__badge-num{ font-size:1.7rem; }
  .about__media figcaption{ margin-top:1.8rem; }

  /* Timeline: narrow the wiggling spine so it can't run under the cards */
  .timeline__spine{ left:0; width:26px; }
  .tl{ padding-left:2.5rem; margin-bottom:2.2rem; }
  .tl__card{ padding:1.3rem 1.4rem; }

  /* Cards: reduce desktop padding so content leads */
  .svc{ padding:1.7rem 1.5rem; }
  .farm{ padding:1.8rem 1.5rem; }
  .farm__count{ font-size:2.7rem; }
  .quote p{ font-size:1rem; }
  .quotes{ gap:1rem; margin-bottom:2.2rem; }
  .story{ padding:1.4rem 1.5rem; }
  /* Hero scroll arrow hides on phones — the sticky action bar covers it */
  .hero__scroll{ display:none; }
  /* Director badge: compact on phones */
  .director-badge{ padding:.9rem 1rem; gap:.9rem; }
  .director-badge__photo{ width:56px; height:56px; }
  .contact__grid{ gap:2.4rem; margin-bottom:3.4rem; }
}

/* Very small phones (≤380px): calmer buttons.
   (Partners now use centered flex — no grid override needed; the cards wrap
   to a single column on their own at this width.) */
@media (max-width: 380px){
  .btn{ padding:.75rem 1.4rem; font-size:.9rem; }
  .hero__actions{ gap:.7rem; }
}

/* ==========================================================================
   NEW LAYOUT RESPONSIVE — farms two-column + services 3-up (placed last)
   ========================================================================== */
@media (max-width: 820px){
  /* Farms: stack the copy above the 2×2 card grid instead of side-by-side */
  .farms__layout{ grid-template-columns:1fr; gap:2.4rem; }
  /* Services: 3 columns is too tight on tablets — drop to 2 (→ 3 rows of 2) */
  .services__grid{ grid-template-columns:1fr 1fr; }
  .news__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 520px){
  /* ====================================================================
     MOBILE HORIZONTAL SWIPE CARDS
     Farms, Services, and Products cards scroll left→right instead of
     stacking vertically. Each card is ~82% viewport width so the next
     card peeks from the right edge — a natural "swipe me" affordance.
     scroll-snap gives a native-feeling stop at each card.
     ==================================================================== */
  .farms__grid,
  .services__grid,
  .products__grid{
    display:flex; flex-wrap:nowrap;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:1rem;
    /* Let the first/last card breathe inside the viewport */
    scroll-padding:0 var(--gutter);
    padding:.5rem var(--gutter) 1.75rem;
    /* Kill the desktop grid-template-columns overrides */
    grid-template-columns:none;
  }
  /* Hide scrollbar across all engines */
  .farms__grid::-webkit-scrollbar,
  .services__grid::-webkit-scrollbar,
  .products__grid::-webkit-scrollbar{ display:none; }
  .farms__grid, .services__grid, .products__grid{
    -ms-overflow-style:none; scrollbar-width:none;
  }

  /* Each card snaps into place */
  .farms__grid  > *,
  .services__grid > *,
  .products__grid > *{
    flex:0 0 82%; min-width:0;
    scroll-snap-align:start;
  }

  /* Let the last card snap fully into view */
  .farms__grid  > *:last-child,
  .services__grid > *:last-child,
  .products__grid > *:last-child{
    margin-right:var(--gutter);
  }

  /* News: horizontal swipe on phones */
  .news__grid{
    display:flex; flex-wrap:nowrap;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    gap:1rem;
    scroll-padding:0 var(--gutter);
    padding:.5rem var(--gutter) 1.75rem;
    grid-template-columns:none;
  }
  .news__grid::-webkit-scrollbar{ display:none; }
  .news__grid{ -ms-overflow-style:none; scrollbar-width:none; }
  .news__grid > *{
    flex:0 0 82%; min-width:0;
    scroll-snap-align:start;
  }
  .news__grid > *:last-child{ margin-right:var(--gutter); }
}

/* ==========================================================================
   SHOP PAGE — product grid + product detail with variant switcher
   ========================================================================== */
.shop{ padding:8rem var(--gutter) 6rem; background:var(--cream); min-height:60vh; }
.shop__head{ text-align:center; max-width:600px; margin:0 auto 3.5rem; padding-top:2rem; }
.shop__head h1{ font-size:clamp(2.4rem, 5.1vw, 4.1rem); font-family:var(--serif); font-weight:600; line-height:1.12; }
.shop__head h1 em{ color:var(--green); }
.shop__empty{
  text-align:center; color:var(--ink-soft);
  font-family:var(--serif); font-style:italic; font-size:1.15rem;
  padding:2rem 0;
}

/* Product grid — reuses .prod (homepage Products cards) verbatim via
   .products__grid so the shop reads as a continuation of that section,
   not a different template. .shop-grid only supplies the max-width. */
.shop-grid{ max-width:1240px; }
/* Cap the track width so a catalogue of one or two products shows normally
   proportioned cards centred in the row — auto-fit collapses the empty
   tracks, so an uncapped 1fr would stretch a lone card across all 1240px.
   Scoped above the 520px breakpoint to leave the mobile swipe-rail
   (.products__grid, which switches to flex) completely untouched. */
@media (min-width: 521px){
  .shop-grid{
    grid-template-columns:repeat(auto-fit, minmax(270px, 360px));
    justify-content:center;
  }
}
.shop-grid__card-link{ display:block; text-decoration:none; color:inherit; }
/* The full product description is several paragraphs long — clamped to a
   3-line teaser so grid cards stay the compact shape the homepage ones are.
   The whole description is shown on the product detail page. */
.shop-grid__desc{
  display:-webkit-box; -webkit-line-clamp:3; line-clamp:3;
  -webkit-box-orient:vertical; overflow:hidden;
}
.shop-grid__price{ font-weight:700; color:var(--green); margin-top:.6rem; }

/* Product detail */
.shop-product{ max-width:1100px; margin:0 auto; padding:0 var(--gutter) 6rem; }
.shop-product__back{
  display:inline-block; margin-bottom:1.6rem; font-size:.9rem; font-weight:600;
  color:var(--ink-soft); transition:color .25s;
}
.shop-product__back:hover{ color:var(--green); }
.shop-product__title{ font-family:var(--serif); font-size:clamp(2rem, 4vw, 2.8rem); color:var(--charcoal); margin-bottom:1.6rem; }
.shop-product__switcher-label{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-text); font-weight:600; margin-bottom:.9rem;
}
.shop-product__switcher{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.8rem; }
.variant-pill{
  min-width:44px; min-height:44px; padding:.6rem 1.5rem;
  border-radius:999px; border:1.5px solid var(--green); background:transparent; color:var(--green);
  font-family:var(--sans); font-weight:700; font-size:.92rem; cursor:pointer;
  transition:background .3s, color .3s, transform .3s var(--spring);
}
.variant-pill:hover{ transform:translateY(-2px); }
.variant-pill.is-active{ background:var(--gold); border-color:var(--gold); color:var(--charcoal); }

.shop-variant{
  display:grid; grid-template-columns:1fr; gap:2.8rem;
  background:#fff; border-radius:var(--radius-lg); padding:2.5rem;
  box-shadow:var(--shadow-2);
}
.shop-variant__img{ width:100%; border-radius:var(--radius); max-height:420px; object-fit:cover; }
.shop-variant__name{ font-family:var(--serif); font-size:2.2rem; color:var(--green); margin-bottom:.5rem; }
.shop-variant__price{ font-size:1.5rem; font-weight:700; color:var(--charcoal); margin-bottom:.4rem; }
.shop-variant__weight{ font-size:.9rem; font-weight:400; color:var(--ink-soft); }
.shop-variant__stock{ font-size:.85rem; color:var(--ink-soft); margin-bottom:1.4rem; }
.shop-variant__benefits{ color:var(--ink-soft); font-size:1rem; line-height:1.75; margin-bottom:1.6rem; max-width:52rem; }
.shop-variant__qty{ display:flex; align-items:center; gap:1rem; margin-bottom:.5rem; }
.shop-variant__qty label{ font-weight:600; font-size:.9rem; }
.shop-variant__qty input{ width:70px; padding:.6rem; border-radius:8px; border:1px solid rgba(44,44,44,.2); font-size:1rem; font-family:inherit; }
.shop-variant__section{ margin-top:1.8rem; padding-top:1.6rem; border-top:1px solid rgba(44,44,44,.08); }
.shop-variant__section h3{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-text); font-weight:600; margin-bottom:.7rem;
}
.shop-variant__section p{ color:var(--ink-soft); font-size:.98rem; line-height:1.75; max-width:52rem; }
.ingredient-table__row{ display:flex; justify-content:space-between; padding:.6rem 0; font-size:.92rem; }
.ingredient-table__row + .ingredient-table__row{ border-top:1px solid rgba(212,165,74,.25); }

@media (min-width: 720px){
  /* Only split into image + text columns when there IS an image. Applied
     unconditionally, a variant with no photo put its lone text column in the
     340px image track and left the rest of the card empty. */
  .shop-variant--with-img{ grid-template-columns:340px 1fr; }
}

/* ============ Cart drawer ============ */
.cart-drawer{ position:fixed; inset:0; z-index:1500; pointer-events:none; }
.cart-drawer__backdrop{ position:absolute; inset:0; background:rgba(10,46,22,.35); opacity:0; transition:opacity .35s; }
.cart-drawer__panel{
  position:absolute; top:0; right:0; bottom:0; width:min(420px,90vw);
  background:rgba(251,246,237,.97); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%);
  box-shadow:var(--shadow-2); transform:translateX(100%); transition:transform .45s var(--ease-out);
  display:flex; flex-direction:column; padding:1.5rem;
}
.cart-drawer.is-open{ pointer-events:auto; }
.cart-drawer.is-open .cart-drawer__backdrop{ opacity:1; }
.cart-drawer.is-open .cart-drawer__panel{ transform:translateX(0); }
.cart-drawer__head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; }
.cart-drawer__head h2{ font-family:var(--serif); font-size:1.4rem; color:var(--green); }
.cart-drawer__head button{ background:none; border:none; font-size:1.2rem; cursor:pointer; min-width:44px; min-height:44px; }
.cart-drawer__items{ flex:1; overflow-y:auto; }
.cart-drawer__empty{ color:var(--ink-soft); text-align:center; padding:2rem 0; }
.cart-drawer__item{ padding:.9rem 0; border-bottom:1px solid rgba(44,44,44,.08); }
.cart-drawer__item-name{ font-weight:600; margin-bottom:.4rem; }
.cart-drawer__item-row{ display:flex; align-items:center; gap:.8rem; }
.cart-drawer__item--unavailable .cart-drawer__item-name{ color:var(--ink-soft); font-style:italic; font-weight:500; }
.cart-drawer__qty{ width:56px; padding:.3rem; border-radius:6px; border:1px solid rgba(44,44,44,.2); font-family:inherit; }
.cart-drawer__remove{ margin-left:auto; background:none; border:none; color:var(--ink-soft); cursor:pointer; min-width:32px; min-height:32px; }
.cart-drawer__footer{ padding-top:1rem; border-top:1px solid rgba(44,44,44,.1); }
.cart-drawer__total{ font-weight:700; margin-bottom:1rem; }

/* ============ Checkout form (inside cart drawer) ============ */
.checkout-form{ display:flex; flex-direction:column; gap:1rem; padding-bottom:1rem; }
.checkout-form__field{ display:flex; flex-direction:column; gap:.3rem; }
.checkout-form__field label{ font-size:.85rem; font-weight:600; color:var(--charcoal); }
.checkout-form input, .checkout-form textarea{ padding:.6rem; border-radius:8px; border:1px solid rgba(44,44,44,.2); font-family:var(--sans); font-size:.95rem; background:#fff; }
.checkout-form textarea{ resize:vertical; min-height:60px; }
.checkout-form__error{ color:#b3261e; font-size:.85rem; }
.slot-picker__day{ margin-bottom:1rem; }
.slot-picker__date{ font-weight:700; margin-bottom:.5rem; font-size:.85rem; color:var(--green); }
.slot-picker__slots{ display:flex; gap:.5rem; flex-wrap:wrap; }
.slot-btn{ font-size:.8rem; padding:.4rem 1rem; }
#checkoutBackBtn{ background:none; border:none; color:var(--ink-soft); cursor:pointer; text-decoration:underline; padding:.5rem; align-self:center; }

/* ============ QR payment + confirmation (inside cart drawer) ============ */
.qr-screen{ text-align:center; padding:1.5rem 0; }
.qr-screen__img{ width:220px; height:220px; margin:0 auto 1.2rem; border-radius:12px; box-shadow:var(--shadow-1); }
.qr-screen__total{ font-family:var(--serif); font-size:1.8rem; color:var(--green); margin-bottom:.8rem; }
.qr-screen__waiting{ color:var(--ink-soft); animation:qrPulse 1.8s ease-in-out infinite; }
.qr-screen__link{ font-size:.75rem; color:var(--ink-soft); word-break:break-all; margin-top:1rem; }
@keyframes qrPulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.order-confirmation{ text-align:center; padding:1.5rem 0; }
.order-confirmation__check{ width:56px; height:56px; margin-bottom:1rem; }
.order-confirmation__total{ font-family:var(--serif); font-size:1.6rem; color:var(--green); margin-bottom:.8rem; }
.order-confirmation__link{ font-size:.75rem; color:var(--ink-soft); word-break:break-all; margin-top:1rem; }