/* ============================================================
   v2 editorial theme pass — loads AFTER the inline styles.
   Kills the "AI-built" tells: mono-uppercase eyebrows, outline
   pills, white rounded shadow-cards, icon tiles. Replaces them
   with an editorial system: italic labels + hairline rules,
   slash-separated meta text, ruled borderless cards, outlined
   numerals, offset image plates.
   ============================================================ */

/* ---------- labels: quiet tracked-out uppercase micro-labels */
.eyebrow{
  font-family:var(--nohemi) !important;font-style:normal !important;font-weight:500;
  text-transform:uppercase !important;letter-spacing:.18em !important;font-size:11px !important;
  color:rgba(19,63,66,.52) !important;display:block;margin-bottom:6px}
.eyebrow::before{display:none}
.sec--verdant .eyebrow,.products .eyebrow,.ihero .eyebrow,.cta .eyebrow{color:rgba(237,228,211,.52) !important}
.hero-eyebrow span{
  font-family:var(--nohemi) !important;font-style:normal !important;font-weight:500;
  text-transform:uppercase !important;letter-spacing:.22em !important;font-size:11px !important;
  color:rgba(237,228,211,.55) !important;display:inline-block}
.hero-eyebrow span::before{display:none}
.crumbs span{
  font-family:var(--nohemi) !important;font-style:normal !important;font-weight:500;
  text-transform:uppercase !important;letter-spacing:.18em !important;font-size:10px !important;
  color:rgba(237,228,211,.48)}
.crumbs a{color:rgba(237,228,211,.48)} .crumbs a:hover{color:var(--husk)}

/* ---------- chips & pills → slash-separated editorial meta text */
.chips{gap:0 !important}
.chip{
  background:none !important;border:none !important;padding:0 !important;border-radius:0 !important;
  font-family:var(--nohemi) !important;font-style:normal !important;font-weight:500;
  text-transform:uppercase !important;letter-spacing:.14em !important;font-size:10.5px !important;
  color:rgba(237,228,211,.62) !important}
.chip+.chip::before{content:'/';color:rgba(237,228,211,.28);margin:0 12px}
.pillrow{gap:0 !important}
.pill{
  border:none !important;padding:0 !important;
  font-family:var(--nohemi) !important;font-style:normal !important;font-weight:500;
  text-transform:uppercase !important;letter-spacing:.14em !important;font-size:10.5px !important;
  color:rgba(19,63,66,.5)}
.pill+.pill::before{content:'/';color:rgba(19,63,66,.25);margin:0 12px}

/* ---------- story image: square corners + offset verdant plate */
.imgwrap{border-radius:0 !important;margin:0 26px 26px 0;box-shadow:26px 26px 0 0 var(--verdant)}
.sec--verdant .imgwrap,.products .imgwrap{box-shadow:26px 26px 0 0 var(--ember)}

/* ---------- big stat: ruled, quieter label */
.bignum{padding-top:24px;border-top:1px solid rgba(19,63,66,.22);display:inline-block;min-width:220px}
.bignum+p{font-family:var(--nohemi);font-weight:500;text-transform:uppercase !important;letter-spacing:.15em !important;font-style:normal !important;font-size:10.5px !important;color:rgba(19,63,66,.55) !important}

/* ---------- value chain: outlined numerals, bigger square photos */
.vnum{color:transparent !important;-webkit-text-stroke:1.5px var(--ember);font-size:78px !important}
.vimg{border-radius:0 !important;height:200px !important}
.vrow{transition:background .35s,padding .35s}
.vrow:hover{background:rgba(19,63,66,.035)}

/* ---------- tiles: ruled editorial list, no cards, no icons */
.tiles{gap:46px 36px !important;margin-top:54px !important}
.tile{
  background:none !important;border-radius:0 !important;box-shadow:none !important;
  padding:26px 0 0 !important;border-top:1px solid rgba(19,63,66,.22)}
.tile:hover{transform:none !important;box-shadow:none !important}
.tile .ic{
  font-family:var(--nohemi) !important;font-size:14px !important;letter-spacing:.08em;
  color:var(--ember) !important;margin-bottom:16px !important}

/* ---------- testimonials: ruled columns, offset rhythm, no cards */
.qgrid{gap:0 46px !important}
.quote{
  background:none !important;border-radius:0 !important;box-shadow:none !important;
  padding:30px 0 0 !important;border-top:1px solid rgba(19,63,66,.22)}
.quote:hover{transform:none !important;box-shadow:none !important}
.quote .qm{font-size:44px;margin-bottom:12px}
.quote p{font-size:16.5px;line-height:1.78}
@media(min-width:901px){
  .qgrid>*:nth-child(2){margin-top:56px}
  .qgrid>*:nth-child(3){margin-top:112px}}

/* ---------- stats row: ruled */
.statgrid{gap:34px !important}
.statgrid .stat{border-top:1px solid rgba(19,63,66,.22);padding-top:22px}
.stat .l{font-family:var(--nohemi);font-weight:500;text-transform:uppercase !important;letter-spacing:.15em !important;font-style:normal !important;font-size:10.5px !important;color:rgba(19,63,66,.55) !important}

/* ---------- product cards: tighter radius, italic category */
.pcard{border-radius:2px !important}
.pcard .sub{
  font-family:var(--nohemi) !important;font-style:normal !important;font-weight:500;
  text-transform:uppercase !important;letter-spacing:.16em !important;font-size:9.5px !important;
  color:rgba(237,228,211,.6) !important}

/* ---------- scroll cue, footer headings, form labels */
.scroll-cue{font-family:var(--nohemi) !important;font-style:normal !important;font-weight:500;text-transform:uppercase !important;letter-spacing:.3em !important;font-size:9.5px !important;color:rgba(237,228,211,.45) !important}
.f-grid h4{font-family:var(--nohemi) !important;font-style:normal !important;font-weight:500;text-transform:uppercase !important;letter-spacing:.18em !important;font-size:10px !important;color:rgba(237,228,211,.45) !important}
.cform label{font-family:var(--ranade) !important;text-transform:none !important;letter-spacing:.01em !important;font-size:14px !important;font-weight:450;color:var(--verdant)}
.cform input,.cform select,.cform textarea{border-radius:4px !important}

/* ---------- FAQ: quieter rules */
.faq details{border-color:rgba(19,63,66,.18) !important}

/* ============================================================
   Section rebuilds — story spread · hover-list value chain ·
   pull-quote slider
   ============================================================ */

/* ---------- story: editorial spread */
.story-ed .sed-title{font-family:var(--nohemi);font-weight:600;font-size:clamp(38px,4.6vw,64px);line-height:1.05;margin:18px 0 0;color:var(--verdant);max-width:1000px}
.accent-i{font-family:inherit;font-style:normal;font-weight:inherit;color:inherit}
.sed-grid{display:grid;grid-template-columns:5fr 7fr;gap:76px;margin-top:70px;align-items:start}
@media(max-width:900px){.sed-grid{grid-template-columns:1fr;gap:44px}}
.sed-lede{font-family:var(--nohemi);font-weight:500;font-size:21px;line-height:1.5;color:var(--verdant);margin:0 0 22px}
.sed-copy p{color:var(--ink);font-weight:300;line-height:1.85;font-size:16.5px}
.sed-copy p.sed-meta,.sed-meta{font-family:var(--nohemi);font-style:normal;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:rgba(19,63,66,.5);margin-top:30px;font-size:10.5px;padding-top:22px;border-top:1px solid rgba(19,63,66,.18)}
.sed-copy p.sed-meta b,.sed-meta b{color:rgba(19,63,66,.25);font-weight:500;margin:0 10px}
.sed-media{position:relative;padding:56px 0 110px}
.sed-img-a{width:84%;margin-left:auto;overflow:hidden}
.sed-img-a img{width:100%;display:block;filter:sepia(.14) saturate(.94)}
.sed-img-b{position:absolute;left:0;bottom:0;width:46%;overflow:hidden;border:6px solid var(--paper);box-shadow:0 30px 60px rgba(19,63,66,.18)}
.sec--husk .sed-img-b{border-color:var(--husk)}
.sed-img-b img{width:100%;display:block;filter:sepia(.2) saturate(.9)}
.sed-num{position:absolute;right:0;top:-14px;text-align:right;z-index:2}
.sed-num .n{font-family:var(--nohemi);font-weight:600;font-size:clamp(96px,10vw,150px);line-height:.9;color:transparent;-webkit-text-stroke:1.5px var(--ember)}
.sed-num small{display:block;font-family:var(--nohemi);font-weight:500;text-transform:uppercase;letter-spacing:.15em;font-style:normal;color:rgba(19,63,66,.55);font-size:10px;margin-top:12px}
@media(max-width:900px){.sed-num{top:-30px}.sed-media{padding-top:70px}}

/* ---------- value chain: oversized hover list + floating image */
.vlist{list-style:none;margin-top:48px;padding:0}
.vlist li{border-top:1px solid rgba(19,63,66,.18);padding:36px 0}
.vlist li:last-child{border-bottom:1px solid rgba(19,63,66,.18)}
.vl-row{display:flex;align-items:baseline;gap:30px}
.vl-idx{font-family:var(--nohemi);font-size:15px;color:var(--ember);min-width:56px;letter-spacing:.04em}
.vlist h3{font-family:var(--nohemi);font-weight:600;font-size:clamp(32px,4vw,56px);line-height:1.04;color:var(--verdant);margin:0;transition:transform .4s var(--ease),color .4s}
.vlist li:hover h3{transform:translateX(16px);color:var(--ember)}
.vl-arrow{margin-left:auto;font-size:28px;color:var(--ember);opacity:0;transform:translateX(-14px);transition:opacity .35s var(--ease),transform .35s var(--ease);flex:none}
.vlist li:hover .vl-arrow{opacity:1;transform:none}
.vl-copy{margin:16px 0 0 86px;max-width:620px;color:var(--ink);font-weight:300;font-size:16px;line-height:1.72}
.vfloat{position:fixed;left:0;top:0;z-index:40;width:310px;height:216px;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .3s var(--ease);will-change:transform}
.vfloat.on{opacity:1}
.vfloat img{width:100%;height:100%;object-fit:cover}
.vl-mimg{display:none;margin:20px 0 0}
.vl-mimg img{width:100%;display:block}
@media(max-width:900px){.vl-copy{margin-left:0}.vl-mimg{display:block}.vfloat{display:none !important}}
@media(hover:none){.vfloat{display:none !important}}

/* ---------- testimonials: pull-quote slider */
.tslider{margin-top:48px;position:relative}
.ts-track{position:relative}
.ts-slide{opacity:0;transition:opacity .65s var(--ease);pointer-events:none;position:absolute;inset:0;display:grid;grid-template-columns:1fr 320px;gap:70px;align-items:center}
.ts-slide.on{opacity:1;pointer-events:auto;position:relative}
.ts-qm{font-family:var(--nohemi);font-size:72px;line-height:.5;color:var(--ember);display:block;margin-bottom:26px}
.ts-slide blockquote{font-family:var(--nohemi);font-weight:500;font-size:clamp(21px,2.5vw,34px);line-height:1.45;color:var(--verdant);margin:0;border:none;padding:0}
.ts-who{display:flex;gap:16px;align-items:center;margin-top:34px}
.ts-who img{width:54px;height:54px;border-radius:50%;object-fit:cover}
.ts-who b{display:block;font-weight:520;font-size:16px;color:var(--verdant)}
.ts-who span{font-size:14px;color:var(--ink);font-style:italic}
.ts-por{overflow:hidden}
.ts-por img{width:100%;height:400px;object-fit:cover;display:block;filter:sepia(.16) saturate(.92)}
@media(max-width:900px){.ts-slide{grid-template-columns:1fr;gap:0}.ts-por{display:none}}
.ts-nav{display:flex;align-items:center;gap:24px;margin-top:52px}
.ts-btn{width:54px;height:54px;border-radius:50%;border:1px solid rgba(19,63,66,.3);background:none;font-size:20px;color:var(--verdant);cursor:pointer;transition:background .25s,color .25s,border-color .25s;font-family:var(--ranade)}
.ts-btn:hover{background:var(--verdant);color:#fff;border-color:var(--verdant)}
.ts-count{font-family:var(--nohemi);font-size:14px;letter-spacing:.08em;color:var(--ink);min-width:64px}
.ts-bar{flex:1;height:1px;background:rgba(19,63,66,.18);position:relative;overflow:visible}
.ts-bar i{position:absolute;left:0;top:-.5px;height:2px;background:var(--ember);width:0}

/* ============================================================
   Value chain v3 — expanding panel gallery
   All four images visible; the WHOLE panel expands on hover,
   others compress. Copy unfolds inside the expanded panel.
   ============================================================ */
.vexp{display:flex;gap:12px;height:560px;margin-top:52px}
.vx{position:relative;flex:1;overflow:hidden;cursor:pointer;border-radius:2px;
  transition:flex .75s cubic-bezier(.16,1,.3,1)}
.vx:hover,.vx.open{flex:2.9}
.vx img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.85) brightness(.72) sepia(.12);transform:scale(1.05);
  transition:filter .65s var(--ease),transform 1s cubic-bezier(.16,1,.3,1)}
.vx:hover img,.vx.open img{filter:grayscale(0) brightness(.85) sepia(0);transform:scale(1)}
.vx::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(11,43,46,.9) 0%,rgba(11,43,46,.32) 46%,rgba(11,43,46,.18) 100%);
  transition:opacity .5s}
.vx-idx{position:absolute;top:24px;left:24px;z-index:2;font-family:var(--nohemi);
  font-size:15px;letter-spacing:.05em;color:var(--husk);opacity:.85}
.vx-rule{position:absolute;top:31px;left:74px;z-index:2;height:1px;width:0;background:var(--ember);
  transition:width .6s cubic-bezier(.16,1,.3,1) .15s}
.vx:hover .vx-rule,.vx.open .vx-rule{width:56px}
.vx-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:28px 26px}
.vx-body h3{font-family:var(--nohemi);font-weight:600;color:var(--husk);
  font-size:clamp(19px,1.8vw,24px);line-height:1.12;margin:0;
  transition:font-size .55s cubic-bezier(.16,1,.3,1)}
.vx:hover .vx-body h3,.vx.open .vx-body h3{font-size:clamp(24px,2.4vw,34px)}
.vx-body p{max-width:520px;color:rgba(237,228,211,.88);font-weight:300;
  font-size:15.5px;line-height:1.68;margin:0;opacity:0;transform:translateY(14px);
  max-height:0;overflow:hidden;
  transition:opacity .5s var(--ease) .18s,transform .5s var(--ease) .18s,max-height .6s var(--ease) .05s,margin .5s var(--ease)}
.vx:hover .vx-body p,.vx.open .vx-body p{opacity:1;transform:none;max-height:240px;margin-top:14px}
@media(max-width:900px){
  .vexp{flex-direction:column;height:auto;gap:10px}
  .vx{flex:none !important;height:280px}
  .vx-body p{opacity:1;transform:none;max-height:none;margin-top:12px;font-size:14.5px}
  .vx img{filter:grayscale(0) brightness(.8)}
  .vx-body h3{font-size:24px}}

/* ============================================================
   Testimonials v3 — expanding farmer portrait gallery
   All three farmers visible; hovered panel expands and the
   quote unfolds over the portrait.
   ============================================================ */
.texp{display:flex;gap:12px;height:540px;margin-top:52px}
.tx{position:relative;flex:1;overflow:hidden;border-radius:2px;cursor:pointer;
  transition:flex .75s cubic-bezier(.16,1,.3,1)}
.tx:hover,.tx.open{flex:2.6}
.tx img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.55) sepia(.16) brightness(.8);transform:scale(1.04);
  transition:filter .65s var(--ease),transform 1s cubic-bezier(.16,1,.3,1)}
.tx:hover img,.tx.open img{filter:grayscale(0) sepia(0) brightness(.68);transform:scale(1)}
.tx::before{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(11,43,46,.82) 0%,rgba(11,43,46,.12) 55%)}
.tx::after{content:'';position:absolute;inset:0;z-index:1;opacity:0;
  background:linear-gradient(to top,rgba(11,43,46,.95) 10%,rgba(11,43,46,.6) 55%,rgba(11,43,46,.3) 100%);
  transition:opacity .6s var(--ease)}
.tx:hover::after,.tx.open::after{opacity:1}
.tx-qm{position:absolute;top:20px;left:24px;z-index:2;font-family:var(--nohemi);
  font-size:84px;line-height:.9;color:var(--husk);opacity:.3;
  transition:color .5s,opacity .5s}
.tx:hover .tx-qm,.tx.open .tx-qm{color:var(--ember);opacity:1}
.tx-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:30px 28px}
.tx-quote{font-family:var(--ranade);font-style:italic;font-weight:350;
  color:rgba(237,228,211,.96);font-size:16.5px;line-height:1.72;margin:0;
  max-width:520px;opacity:0;transform:translateY(16px);max-height:0;overflow:hidden;
  transition:opacity .55s var(--ease) .18s,transform .55s var(--ease) .18s,max-height .65s var(--ease) .05s,margin .5s var(--ease)}
.tx:hover .tx-quote,.tx.open .tx-quote{opacity:1;transform:none;max-height:320px;margin-bottom:20px}
.tx-who::before{content:'';display:block;width:0;height:1px;background:var(--ember);
  margin-bottom:14px;transition:width .6s cubic-bezier(.16,1,.3,1) .15s}
.tx:hover .tx-who::before,.tx.open .tx-who::before{width:56px}
.tx-who b{display:block;font-family:var(--nohemi);font-weight:600;color:var(--husk);
  font-size:clamp(18px,1.7vw,22px);transition:font-size .55s cubic-bezier(.16,1,.3,1)}
.tx:hover .tx-who b,.tx.open .tx-who b{font-size:clamp(21px,2vw,26px)}
.tx-who span{font-family:var(--nohemi);font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-style:normal;color:rgba(237,228,211,.55);font-size:10px;margin-top:7px;display:block}
@media(max-width:900px){
  .texp{flex-direction:column;height:auto;gap:10px}
  .tx{flex:none !important;height:360px}
  .tx-quote{opacity:1;transform:none;max-height:none;margin-bottom:16px;font-size:15px}
  .tx img{filter:grayscale(0) brightness(.66)}
  .tx::after{opacity:1}}

/* ============================================================
   Story v4 — "The Ledger": statement + cinematic image wipe +
   ruled fact band with counting numerals
   ============================================================ */
.sv3-title{font-family:var(--nohemi);font-weight:600;font-size:clamp(38px,4.8vw,68px);line-height:1.04;margin:18px 0 0;color:var(--verdant);max-width:1060px;letter-spacing:-.01em}
.sv3-grid{display:grid;grid-template-columns:5fr 7fr;gap:80px;margin-top:70px;align-items:start}
@media(max-width:900px){.sv3-grid{grid-template-columns:1fr;gap:44px}}
.sv3-copy .sed-lede{font-family:var(--nohemi);font-weight:500;font-size:21px;line-height:1.5;color:var(--verdant);margin:0 0 24px}
.sv3-copy p{color:var(--ink);font-weight:300;line-height:1.85;font-size:16.5px}
.sv3-img{overflow:hidden;position:relative}
.sv3-img img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;transform:scale(1.06);transition:transform 1.6s cubic-bezier(.16,1,.3,1) .1s}
.sv3-img.in img{transform:scale(1)}
/* cinematic wipe reveal — replaces the fade for this element only */
.wipe{opacity:1 !important;transform:none !important;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.2s cubic-bezier(.16,1,.3,1) !important}
.wipe.in{clip-path:inset(0 0 0 0)}
/* fact band */
.sv3-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:38px;margin-top:78px}
@media(max-width:900px){.sv3-stats{grid-template-columns:repeat(2,1fr);gap:30px}}
.sv3-stat{border-top:1px solid rgba(19,63,66,.25);padding-top:22px}
.sv3-stat .n{font-family:var(--nohemi);font-weight:600;font-size:clamp(38px,4.2vw,60px);line-height:1;color:var(--verdant);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.sv3-stat small{display:block;font-family:var(--nohemi);font-weight:500;text-transform:uppercase;letter-spacing:.15em;font-size:10px;color:rgba(19,63,66,.55);margin-top:12px}

/* ============================================================
   Story v5 — "Three Chapters": full-screen pinned scroll story.
   Section pins for ~3 screen-heights; background photography
   crossfades between acts as giant numerals advance the story.
   ============================================================ */
.chap{position:relative;height:300vh;background:var(--verdant-d)}
.chap-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.chap-bgs{position:absolute;inset:0}
.cb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.07);transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),transform 7s linear}
.cb.on{opacity:1;transform:scale(1)}
.chap-shade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right,rgba(11,43,46,.88) 0%,rgba(11,43,46,.6) 44%,rgba(11,43,46,.14) 100%)}
.chap-ui{position:relative;z-index:2;width:100%}
.chap .eyebrow{color:rgba(237,228,211,.5) !important}
.chap-acts{position:relative;margin-top:20px;min-height:400px}
.act{position:absolute;top:0;left:0;max-width:600px;opacity:0;transform:translateY(28px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1);pointer-events:none}
.act.on{opacity:1;transform:none;pointer-events:auto}
.act-k{font-family:var(--nohemi);font-weight:600;font-size:clamp(60px,8vw,118px);line-height:.95;
  color:var(--ember);display:block;letter-spacing:-.015em}
.act h3{font-family:var(--nohemi);font-weight:600;color:var(--husk);
  font-size:clamp(26px,3vw,42px);line-height:1.08;margin:22px 0 16px;max-width:560px}
.act p{color:rgba(237,228,211,.82);font-weight:300;font-size:16.5px;line-height:1.75;max-width:520px}
.act-facts{font-family:var(--nohemi);font-weight:500;text-transform:uppercase;letter-spacing:.16em;
  font-size:11px;color:rgba(237,228,211,.6);margin-top:26px}
.act-facts b{color:var(--husk);font-weight:600;margin-right:4px}
.act-facts i{font-style:normal;color:rgba(237,228,211,.3);margin:0 12px}
.chap-prog{display:flex;gap:8px;margin-top:48px}
.cp{width:48px;height:2px;background:rgba(237,228,211,.22);transition:background .45s}
.cp.on{background:var(--ember)}
.act .m-img{display:none}
@media(max-width:900px){
  .chap{height:auto}
  .chap-pin{position:relative;height:auto;display:block;padding:80px 0 40px}
  .chap-bgs,.chap-shade,.chap-prog{display:none}
  .chap-acts{position:static;min-height:0;margin-top:10px}
  .act{position:static;opacity:1;transform:none;pointer-events:auto;margin-bottom:56px}
  .act-k{font-size:52px}
  .act .m-img{display:block;width:100%;margin-top:22px}
}

/* ============================================================
   Contact v2 — single-viewport split: direct details left,
   compact form right. No scrolling needed, no imagery.
   ============================================================ */
body.cpage-body nav{background:rgba(237,228,211,.9);backdrop-filter:blur(14px);padding:14px 0;box-shadow:0 1px 0 rgba(19,63,66,.08)}
body.cpage-body nav .logo-w{display:none}
body.cpage-body nav .logo-v{display:block}
body.cpage-body nav .nav-links a{color:var(--verdant)}
.cpage{display:grid;grid-template-columns:5fr 6fr;min-height:100vh}
@media(max-width:900px){.cpage{grid-template-columns:1fr;min-height:0}}
.cpage-left{background:var(--verdant);position:relative;overflow:hidden;display:flex;align-items:center;padding:130px 0 60px}
.cpage-left .bloom{position:absolute;right:-150px;bottom:-150px;width:440px;opacity:.07;animation:spin 90s linear infinite}
.cpl-in{position:relative;z-index:2;width:100%;max-width:480px;margin:0 auto;padding:0 40px}
.cpage-left .eyebrow{color:rgba(237,228,211,.5) !important}
.cpage-left h1{font-family:var(--nohemi);font-weight:600;color:var(--husk);font-size:clamp(40px,4.6vw,64px);line-height:1.02;margin:14px 0 18px}
.cpage-left h1 .accent{color:var(--ember)}
.cpl-lead{color:rgba(237,228,211,.75);font-weight:300;font-size:16px;line-height:1.7;max-width:380px}
.cpl-details{margin-top:44px;border-top:1px solid rgba(237,228,211,.16);padding-top:34px}
.cpl-mail{display:inline-block;font-family:var(--nohemi);font-weight:600;font-size:clamp(22px,2.2vw,30px);color:var(--husk);text-decoration:none;border-bottom:2px solid var(--ember);padding-bottom:4px;transition:color .25s}
.cpl-mail:hover{color:var(--ember)}
.cpl-addr{color:rgba(237,228,211,.65);font-weight:300;font-size:15px;line-height:1.7;margin-top:26px}
.cpl-soc{margin-top:26px}
.cpl-soc a{font-family:var(--nohemi);font-weight:500;text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;color:rgba(237,228,211,.6);text-decoration:none;margin-right:22px;transition:color .25s}
.cpl-soc a:hover{color:var(--ember)}
.cpage-right{background:var(--husk);display:flex;align-items:center;padding:130px 0 60px}
.cpr-in{width:100%;max-width:600px;margin:0 auto;padding:0 48px}
.cpr-in .cform{gap:14px}
.cpr-in .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.cpr-in .frow{grid-template-columns:1fr}}
.cpr-in .cform input,.cpr-in .cform select{padding:13px 15px}
.cpr-in .cform textarea{padding:13px 15px;resize:vertical}
.cpr-title{font-family:var(--nohemi);font-weight:600;font-size:22px;color:var(--verdant);margin-bottom:18px}
@media(max-width:900px){.cpage-left,.cpage-right{padding:110px 0 50px}.cpage-right{padding-top:50px}}

/* ============================================================
   Mobile pass — full-screen menu + per-section polish
   ============================================================ */
/* ---------- mobile menu */
.mnav-btn{display:none}
.mnav{display:none}
@media(max-width:820px){
  .nav-links{display:none !important}
  .mnav-btn{display:flex;flex-direction:column;justify-content:center;gap:6px;background:none;border:none;padding:10px;cursor:pointer;position:relative;z-index:70}
  .mnav-btn span{display:block;width:26px;height:2px;background:var(--husk);transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s}
  nav.scrolled .mnav-btn span,body.cpage-body .mnav-btn span{background:var(--verdant)}
  body.mnav-open .mnav-btn span{background:var(--husk) !important}
  body.mnav-open .mnav-btn span:first-child{transform:translateY(4px) rotate(45deg)}
  body.mnav-open .mnav-btn span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .mnav{display:flex;position:fixed;inset:0;z-index:60;background:var(--verdant-d);align-items:center;opacity:0;pointer-events:none;transition:opacity .45s cubic-bezier(.22,.61,.36,1)}
  body.mnav-open .mnav{opacity:1;pointer-events:auto}
  body.mnav-open{overflow:hidden}
  .mnav-in{width:100%;padding:0 34px}
  .mnav .mn-link{display:block;font-family:var(--nohemi);font-weight:600;font-size:clamp(32px,9vw,44px);line-height:1.1;color:var(--husk);text-decoration:none;padding:16px 0;border-bottom:1px solid rgba(237,228,211,.12);opacity:0;transform:translateY(24px);transition:opacity .5s cubic-bezier(.22,.61,.36,1),transform .5s cubic-bezier(.22,.61,.36,1)}
  .mnav .mn-link .mn-i{font-size:13px;color:var(--ember);vertical-align:super;margin-right:14px;font-weight:500}
  body.mnav-open .mn-link{opacity:1;transform:none}
  body.mnav-open .mn-link:nth-child(1){transition-delay:.08s}
  body.mnav-open .mn-link:nth-child(2){transition-delay:.16s}
  body.mnav-open .mn-link:nth-child(3){transition-delay:.24s}
  body.mnav-open .mn-link:nth-child(4){transition-delay:.32s}
  body.mnav-open .mn-link:nth-child(5){transition-delay:.4s}
  .mnav-foot{margin-top:38px;opacity:0;transition:opacity .5s cubic-bezier(.22,.61,.36,1) .45s}
  body.mnav-open .mnav-foot{opacity:1}
  .mnav-foot a{font-family:var(--nohemi);font-weight:600;font-size:18px;color:var(--ember);text-decoration:none}
  .mnav-foot p{font-family:var(--nohemi);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:rgba(237,228,211,.45);margin-top:10px}
}
/* ---------- mobile polish */
@media(max-width:820px){
  .wrap{padding:0 24px}
  .sec{padding:70px 0}
  .ihero{min-height:0;padding:126px 0 50px}
  .ihero h1{font-size:clamp(38px,11vw,54px)}
  .hero-inner{padding:126px 0 84px}
  .statement{padding:84px 0}
  .statement p.big{font-size:clamp(26px,7.6vw,40px)}
  .marquee{padding:12px 0}
  .mq-track span{font-size:16px;gap:34px}
  .mq-track{gap:34px}
  section h2{font-size:clamp(28px,8vw,40px)}
  .sv3-title{font-size:clamp(30px,8.6vw,44px)}
  .sv3-grid{margin-top:40px}
  .sv3-stats{margin-top:52px;gap:26px}
  .sv3-stat .n{font-size:clamp(34px,9vw,44px)}
  .chap-pin{padding:70px 0 26px}
  .act-k{font-size:clamp(44px,13vw,58px)}
  .act h3{font-size:clamp(22px,6.4vw,30px)}
  .pcard{height:300px}
  .cta{padding:88px 0}
  .cta h2{font-size:clamp(34px,10vw,52px)}
  .btn-mag{padding:18px 42px;font-size:16px}
  .f-mark{margin-bottom:40px}
  .f-grid{gap:28px}
  .f-bottom{margin-top:40px}
  .faq summary{font-size:17px}
  .hero-cta{gap:14px}
  .hero-cta .btn{white-space:nowrap}
  .scroll-cue{display:none !important}
  .cpl-in,.cpr-in{padding:0 26px}
  .cpage-left{padding:116px 0 44px}
  .cpage-right{padding:36px 0 60px}
}

/* ---------- mobile scroll-spotlight: product cards colourise in view */
@media(hover:none),(max-width:820px){
  .pcard.lit img{filter:grayscale(0) brightness(.9);transform:scale(1.02)}
  .pcard.lit .go{opacity:1;transform:none}
}

/* ---------- mobile scroll-spotlight: value-chain steps 01–04 */
@media(hover:none),(max-width:820px){
  .vx img{filter:grayscale(.85) brightness(.72) sepia(.12);transform:scale(1.04)}
  .vx.lit img{filter:grayscale(0) brightness(.85) sepia(0);transform:scale(1)}
  .vx.lit .vx-rule{width:56px}
}

/* ---------- mobile scroll-spotlight: farmer testimonials */
@media(hover:none),(max-width:820px){
  .tx img{filter:grayscale(.55) sepia(.16) brightness(.8);transform:scale(1.04)}
  .tx.lit img{filter:grayscale(0) sepia(0) brightness(.68);transform:scale(1)}
  .tx.lit .tx-who::before{width:56px}
  .tx.lit .tx-qm{color:var(--ember);opacity:1}
}

/* ============================================================
   Large-screen scaling — the layout grows with the display
   instead of huddling at 1280px on big monitors
   ============================================================ */
@media(min-width:1500px){
  .wrap{max-width:1480px}
  .pcard{height:400px}
  .vexp{height:640px}
  .texp{height:620px}
  section h2{font-size:clamp(32px,3.2vw,62px) !important}
  .sv3-title{font-size:clamp(38px,3.6vw,78px) !important}
  .lead,.split p,.sv3-copy p{font-size:17.5px}
  .vx-body p,.tx-quote{font-size:17px}
}
@media(min-width:1900px){
  .wrap{max-width:1720px}
  .pcard{height:460px}
  .vexp{height:700px}
  .texp{height:680px}
  .nav-links a{font-size:15px}
  .ihero h1{font-size:clamp(42px,5.6vw,116px) !important}
  h1{font-size:clamp(46px,6.4vw,128px) !important}
  .act-k{font-size:clamp(60px,7.4vw,150px) !important}
  .cta h2{font-size:clamp(40px,5.4vw,104px) !important}
}

/* ============================================================
   Reduced-motion correctness: infinite loops must STOP, not
   spin at 1000x (the "flying orange bar" bug on machines with
   the OS "reduce motion" accessibility setting enabled)
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  .mq-track{animation:none !important}
  .hero-bloom,.ihero-bloom,.cta .bloom,.cpage-left .bloom{animation:none !important}
  .load-mark .bloom{animation:none !important;transform:none !important}
  .scroll-cue::after{animation:none !important}
  .cb{transition:none !important}
}