/* ==========================================================================
   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:  #0e3d1a;
  --cream:       #fbf6ed;
  --cream-dark:  #f3ead9;
  --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: 20px;
  --gutter: clamp(1.25rem, 5vw, 6rem);
}

*{ 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.12; }
h2{ font-size:clamp(2.4rem, 5.1vw, 4.1rem); letter-spacing:-.01em; }
h2 em{ font-style:italic; color:var(--green); }
section{ position:relative; }

/* Small caps intro line above each section heading */
.kicker{
  font-size:.78rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-text); font-weight:600; margin-bottom:1rem;
}
/* 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; }
}

/* 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));
  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,.86); backdrop-filter:blur(14px);
}
/* 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); 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 */
.btn{
  display:inline-block; padding:.85rem 1.9rem; border-radius:999px;
  font-weight:600; font-size:.95rem; letter-spacing:.02em;
  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(0) scale(.98); }
.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. */
  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 14px 30px -8px rgba(212,165,74,.65); }
.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); }

/* 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(.95); }

/* ==========================================================================
   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(14,61,26,.25), rgba(14,61,26,.6)),
    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(14,61,26,.92) 0%, rgba(14,61,26,.25) 45%, rgba(14,61,26,.35) 100%);
}
.hero__inner{ position:relative; z-index:2; padding:8rem var(--gutter) 6rem; max-width:1080px; }
.hero__kicker{
  font-size:.8rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-soft); font-weight:600; margin-bottom:1.6rem;
}
.hero__title{
  font-size:clamp(3.2rem, 8.2vw, 6.8rem); font-weight:600; letter-spacing:-.015em;
  margin-bottom:1.4rem; line-height:1.25;
}
/* 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:34rem; font-weight:300; font-size:1.06rem; color:rgba(251,246,237,.88); margin-bottom:2.4rem; }
.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(34px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--d, 0s); /* stagger set inline by JS per group */
}
.reveal.in{ opacity:1; transform:none; }

/* ==========================================================================
   STATS BAND — cream, counters animate on first sight
   ========================================================================== */
.stats{ padding:5rem var(--gutter); border-bottom:1px solid rgba(44,44,44,.08); }
.stats__grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:2.5rem 2rem; max-width:1200px; margin:0 auto; text-align:center;
}
.stat__num{
  display:block; font-family:var(--serif); font-weight:700;
  font-size:clamp(2.75rem, 4.8vw, 4.1rem); color:var(--green);
  font-variant-numeric:tabular-nums;
}
.stat__label{ display:block; margin-top:.4rem; font-size:.86rem; color:var(--ink-soft); max-width:15rem; margin-inline:auto; }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about{ padding:7rem 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.6rem;
  border:1px solid rgba(44,44,44,.07);
  box-shadow:0 20px 40px -30px rgba(44,44,44,.25);
}
.mv h3{ font-size:1.3rem; 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); overflow:hidden;
  background:
    linear-gradient(rgba(14,61,26,.08), rgba(14,61,26,.22)),
    url("img/opening-ceremony.jpg") center/cover no-repeat,
    linear-gradient(150deg, var(--green) 0%, var(--green-deep) 100%);
  box-shadow:0 40px 70px -35px rgba(14,61,26,.55);
}
.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:7rem var(--gutter) 8rem;
  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.6rem 1.8rem; border:1px solid rgba(44,44,44,.07);
  box-shadow:0 24px 48px -32px rgba(44,44,44,.3);
  transition:transform .4s var(--spring), box-shadow .4s;
}
.tl__card:hover{ transform:translateY(-5px); box-shadow:0 30px 55px -30px rgba(44,44,44,.4); }
.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:3px 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:7rem var(--gutter);
  background:
    radial-gradient(90% 120% at 15% 0%, #23703a 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,.06); border:1px solid rgba(251,246,237,.14);
  border-radius:var(--radius); padding:2.2rem 1.8rem;
  backdrop-filter:blur(4px);
  transition:border-color .3s, background .3s;
  transform-style:preserve-3d; will-change:transform;
}
.farm:hover{ border-color:var(--gold); background:rgba(251,246,237,.09); }
.farm__count{
  font-family:var(--serif); font-weight:700; font-size:3.4rem; 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,.7); }

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services{ padding:7rem 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.2rem;
  border:1px solid rgba(44,44,44,.07);
  box-shadow:0 20px 45px -35px rgba(44,44,44,.3);
  transform-style:preserve-3d; will-change:transform;
  transition:box-shadow .35s;
}
.svc:hover{ box-shadow:0 32px 60px -30px rgba(26,94,42,.35); }
.svc--training{
  background:linear-gradient(105deg, rgba(255,255,255,.92), rgba(255,255,255,.78)) 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:7rem 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); overflow:hidden; background:#fff; box-shadow:0 24px 50px -35px rgba(44,44,44,.35); }
.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:7.5rem 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:3px solid var(--gold); padding:1.4rem 1.6rem;
  background:rgba(251,246,237,.05); 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:7rem 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;
  border:1px solid rgba(44,44,44,.07);
  box-shadow:0 20px 45px -35px rgba(44,44,44,.3);
  transition:transform .4s var(--spring), box-shadow .35s;
}
.news__card:hover{ transform:translateY(-5px); box-shadow:0 30px 55px -30px rgba(44,44,44,.4); }
.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;
  border:1px solid rgba(44,44,44,.07);
  box-shadow:0 20px 45px -35px rgba(44,44,44,.3);
}
.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:7rem 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:1px solid rgba(44,44,44,.07); border-radius:16px;
  padding:1.1rem 1.4rem; transition:transform .3s var(--spring), box-shadow .3s;
}
.contact__list li:hover{ transform:translateX(6px); box-shadow:0 18px 40px -28px rgba(44,44,44,.35); }
.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); }

/* ==========================================================================
   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:10px;
  font-weight:600; font-size:.9rem; white-space:nowrap;
}
.mobilebar__call{ border:1.5px solid var(--green); color:var(--green); }
.mobilebar__quote{ background:linear-gradient(135deg, var(--gold), #c99a4e); color:var(--charcoal); }

/* ==========================================================================
   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:.2em; }
  .hero__title{ font-size:clamp(2.5rem, 11.8vw, 3.85rem); }
  .hero__slogan{ font-size:1rem; }
  .hero__lede{ font-size:.98rem; }

  /* Section headings + vertical rhythm: desktop air reads as empty on phones */
  h2{ font-size:clamp(2.15rem, 8.4vw, 3.05rem); }
  .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); }
}