:root{
  --paper:#F7F8F5; --ink:#15201A; --ink-2:#39453D; --mute:#6E7871;
  --line:#D9DDD4; --line-2:#E9ECE5; --panel:#FFFFFF;
  --pea:#8CC152; --pea-soft:#E4F0D2; --green:#1F7A5A; --green-2:#2A9B72;
  --blue:#2E86C8; --purple:#7B4B8A; --lime:#B6D27E;
  --shadow:0 1px 2px rgba(21,32,26,.06), 0 8px 24px rgba(21,32,26,.05);
}
:root:not([data-theme="light"]){}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#12150F; --ink:#EEF1E9; --ink-2:#C3CABB; --mute:#8B948A;
    --line:#2A2F26; --line-2:#1D2119; --panel:#181C15;
    --pea:#A8D46A; --pea-soft:#233018; --green:#4FBF92; --green-2:#6FD4AB;
    --blue:#5AA9E0; --purple:#A87BB5; --lime:#C6DE98;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  }
}
:root[data-theme="dark"]{
  --paper:#12150F; --ink:#EEF1E9; --ink-2:#C3CABB; --mute:#8B948A;
  --line:#2A2F26; --line-2:#1D2119; --panel:#181C15;
  --pea:#A8D46A; --pea-soft:#233018; --green:#4FBF92; --green-2:#6FD4AB;
  --blue:#5AA9E0; --purple:#A87BB5; --lime:#C6DE98;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
body{background:var(--paper); color:var(--ink);
  font-family:"Source Serif 4", Georgia, serif; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;}
.wrap{max-width:1080px; margin:0 auto; padding-inline:24px}
h1,h2,h3,.ui{font-family:Archivo, "Helvetica Neue", Arial, sans-serif}
h1,h2,h3{text-wrap:balance; margin:0; line-height:1.12; letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
.lab{font-family:Archivo, sans-serif; font-size:11.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--mute)}
.num{font-variant-numeric:tabular-nums}

/* ---- masthead ---- */
.mast{border-bottom:1px solid var(--line); background:var(--panel)}
.mast .wrap{display:flex; align-items:center; gap:18px; padding-block:16px; flex-wrap:wrap}
.mark{display:flex; align-items:center; gap:11px; margin-inline-end:auto}
.mark img{height:50px; width:auto; display:block}
@media (max-width:560px){.mark img{height:40px}}
.mark em{font-style:normal; font-family:Archivo,sans-serif; font-size:10.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mute); padding-inline-start:14px;
  border-inline-start:1px solid var(--line)}
@media (max-width:560px){.mark em{display:none}}
.mast nav{display:flex; gap:20px; flex-wrap:wrap}
.mast nav a{font-family:Archivo,sans-serif; font-size:13.5px; font-weight:500;
  text-decoration:none; color:var(--ink-2); padding-block:4px; border-bottom:2px solid transparent}
.mast nav a:hover{color:var(--ink); border-bottom-color:var(--pea)}

/* ---- hero ---- */
.hero{padding-block:64px 0}
.hero .eyebrow{display:flex; align-items:center; gap:10px; margin-bottom:20px}
.hero .eyebrow i{display:block; width:46px; height:3px; flex:none; border-radius:2px;
  background:linear-gradient(90deg,var(--lime),var(--green-2),var(--blue),var(--purple))}
.hero h1{font-size:clamp(38px,6.2vw,62px); font-weight:800; max-width:15ch}
.hero h1 u{text-decoration:none; color:var(--green)}
.hero .lede{margin-top:22px; max-width:56ch; font-size:19px; color:var(--ink-2)}
.cta{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap}
.btn{font-family:Archivo,sans-serif; font-size:14px; font-weight:600; text-decoration:none;
  padding:11px 20px; border-radius:3px; border:1.5px solid var(--green); display:inline-block}
.btn.solid{background:var(--green); color:#fff}
.btn.solid:hover{background:var(--green-2); border-color:var(--green-2)}
.btn.ghost{color:var(--ink)}
.btn.ghost:hover{background:var(--line-2)}

/* ---- figures strip ---- */
.figs{margin-top:54px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr)}
.figs div{padding:22px 22px 22px 0; border-inline-end:1px solid var(--line-2)}
.figs div:last-child{border-inline-end:0}
.figs b{display:block; font-family:Archivo,sans-serif; font-weight:700; font-size:30px;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.1}
.figs span{display:block; margin-top:5px; font-size:13.5px; color:var(--mute); font-family:Archivo,sans-serif}

/* ---- sections ---- */
section{padding-block:70px}
section + section{border-top:1px solid var(--line-2)}
.head{max-width:60ch; margin-bottom:36px}
.head h2{font-size:clamp(25px,3.4vw,34px); font-weight:700; margin-top:11px}
.head p{margin-top:13px; color:var(--ink-2)}

/* ---- spec table ---- */
.specs{overflow-x:auto}
table{width:100%; border-collapse:collapse; min-width:600px}
th,td{text-align:start; padding:13px 14px 13px 0; border-bottom:1px solid var(--line-2); vertical-align:top}
th{font-family:Archivo,sans-serif; font-size:11.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mute); border-bottom:1.5px solid var(--line)}
td.p{font-family:Archivo,sans-serif; font-weight:600; font-size:15px}
td small{display:block; color:var(--mute); font-size:13px; font-weight:400; font-family:"Source Serif 4",serif; margin-top:2px}
td.n{font-variant-numeric:tabular-nums; white-space:nowrap}
.tag{display:inline-block; font-family:Archivo,sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; padding:3px 8px; border-radius:2px;
  background:var(--pea-soft); color:var(--ink)}
.tag.by{background:var(--line-2); color:var(--mute)}

/* ---- process ---- */
.flow{display:grid; grid-template-columns:repeat(6,1fr); gap:0}
.step{padding:0 16px 0 0; border-top:2px solid var(--line); padding-top:15px; position:relative}
.flow .step:nth-child(1){border-top-color:var(--lime)}
.flow .step:nth-child(2){border-top-color:#7FC47E}
.flow .step:nth-child(3){border-top-color:var(--green-2)}
.flow .step:nth-child(4){border-top-color:#33A0A8}
.flow .step:nth-child(5){border-top-color:var(--blue)}
.flow .step:nth-child(6){border-top-color:var(--purple)}
.step b{display:block; font-family:Archivo,sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.12em; color:var(--mute); margin-bottom:7px}
.step h3{font-size:16px; font-weight:600}
.step p{margin-top:6px; font-size:14.5px; color:var(--ink-2); line-height:1.5}

/* ---- two col ---- */
.two{display:grid; grid-template-columns:1.15fr 1fr; gap:54px; align-items:start}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:26px; box-shadow:var(--shadow)}
.panel h3{font-size:17px; font-weight:700; margin-bottom:16px}
.kv{display:flex; justify-content:space-between; gap:18px; padding-block:10px; border-bottom:1px solid var(--line-2); font-size:15px}
.kv:last-child{border-bottom:0; padding-bottom:0}
.kv span{color:var(--mute); font-family:Archivo,sans-serif; font-size:13px}
.kv b{font-weight:600; text-align:end; font-variant-numeric:tabular-nums}
.list{display:flex; flex-direction:column; gap:17px}
.list div{padding-inline-start:17px; border-inline-start:2px solid var(--green-2)}
.list h3{font-size:16px; font-weight:600}
.list p{margin-top:4px; color:var(--ink-2); font-size:15.5px}

.prods{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:4px; overflow:hidden}
.prods.three{grid-template-columns:repeat(3,1fr)}
.prods>div{background:var(--panel); padding:24px 24px 26px}
.prods h3{font-size:17px; font-weight:700}
.prods h3::after{content:""; display:block; width:28px; height:3px; border-radius:2px; margin-top:9px;
  background:linear-gradient(90deg,var(--lime),var(--green-2))}
.prods>div:nth-child(2) h3::after{background:linear-gradient(90deg,var(--green-2),#33A0A8)}
.prods>div:nth-child(3) h3::after{background:linear-gradient(90deg,#33A0A8,var(--blue))}
.prods>div:nth-child(4) h3::after{background:linear-gradient(90deg,var(--blue),var(--purple))}
.prods>div:nth-child(5) h3::after{background:linear-gradient(90deg,var(--purple),#B36FA8)}
.prods>div:nth-child(6) h3::after{background:linear-gradient(90deg,var(--lime),var(--blue))}
.prods p{margin-top:11px; color:var(--ink-2); font-size:15.5px; line-height:1.55}
.foot-note{margin-top:20px; font-size:15px; color:var(--mute)}
@media (max-width:820px){.prods,.prods.three{grid-template-columns:1fr}}

/* ---- contact ---- */
.contact{background:var(--panel); border-top:1px solid var(--line)}
.cgrid{display:grid; grid-template-columns:1fr 1.1fr; gap:54px; align-items:start}
label{display:block; font-family:Archivo,sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin-bottom:6px}
input,textarea,select{width:100%; font:inherit; font-size:15px; padding:10px 12px;
  border:1px solid var(--line); border-radius:3px; background:var(--paper); color:var(--ink)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--green); outline-offset:1px; border-color:var(--green)}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:15px}
form>*+*{margin-top:15px}
.wa{display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  background:#128C7E; color:#fff; font-family:Archivo,sans-serif; font-weight:600; font-size:14.5px;
  padding:12px 20px; border-radius:3px}
.wa:hover{background:#0f7a6d}
.sent{display:none; padding:13px 15px; border-radius:3px; background:var(--pea-soft);
  font-family:Archivo,sans-serif; font-size:14px; font-weight:500}
.addr{font-size:15.5px; color:var(--ink-2); line-height:1.75}
.addr b{font-family:Archivo,sans-serif; font-weight:600; color:var(--ink)}

/* ---- foot ---- */
footer{border-top:1px solid var(--line); padding-block:26px; font-size:13.5px; color:var(--mute)}
footer .wrap{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center}
footer a{color:var(--mute); text-decoration:none}
footer a:hover{color:var(--ink)}

/* ---- fill-me markers ---- */
.fill{background:var(--pea-soft); color:var(--ink); border-bottom:1.5px dotted var(--pea);
  padding:0 3px; font-style:italic}
.draftbar{background:var(--green); color:#fff; font-family:Archivo,sans-serif; font-size:13px; font-weight:500}
.draftbar .wrap{padding-block:9px; display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.draftbar b{font-weight:700}

@media (max-width:900px){
  .two,.cgrid{grid-template-columns:1fr; gap:34px}
  .flow{grid-template-columns:repeat(3,1fr); gap:26px 0}
  .figs{grid-template-columns:repeat(2,1fr)}
  .figs div{border-inline-end:0}
}
@media (max-width:560px){
  body{font-size:16px}
  .flow{grid-template-columns:1fr 1fr}
  .f2{grid-template-columns:1fr}
  section{padding-block:50px}
}


/* ---- colour ---- */
:root{ --wash-a:rgba(140,193,82,.13); --wash-b:rgba(46,134,200,.11); --wash-c:rgba(123,75,138,.09);
       --tint:rgba(31,122,90,.045); --tint-2:rgba(46,134,200,.05); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --wash-a:rgba(168,212,106,.10); --wash-b:rgba(90,169,224,.10); --wash-c:rgba(168,123,181,.09);
  --tint:rgba(79,191,146,.055); --tint-2:rgba(90,169,224,.055); } }
:root[data-theme="dark"]{
  --wash-a:rgba(168,212,106,.10); --wash-b:rgba(90,169,224,.10); --wash-c:rgba(168,123,181,.09);
  --tint:rgba(79,191,146,.055); --tint-2:rgba(90,169,224,.055); }

.mast{position:relative}
.mast::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,var(--lime),var(--green-2) 30%,#33A0A8 55%,var(--blue) 78%,var(--purple))}

.hero{position:relative}
.hero::before{content:""; position:absolute; inset:-70px -40vw -30px -40vw; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 70% at 12% 8%, var(--wash-a), transparent 70%),
    radial-gradient(52% 64% at 88% 18%, var(--wash-b), transparent 72%),
    radial-gradient(46% 58% at 62% 96%, var(--wash-c), transparent 70%);}
body{position:relative; z-index:0}

.figs{background:var(--panel); border-radius:5px; box-shadow:var(--shadow); overflow:hidden;
  border:1px solid var(--line)}
.figs>div{padding:22px; position:relative}
.figs>div::before{content:""; position:absolute; top:0; left:0; right:0; height:3px}
.figs>div:nth-child(1)::before{background:var(--lime)}
.figs>div:nth-child(2)::before{background:var(--green-2)}
.figs>div:nth-child(3)::before{background:var(--blue)}
.figs>div:nth-child(4)::before{background:var(--purple)}
.figs>div:nth-child(1) b{color:#6FA83C}
.figs>div:nth-child(2) b{color:var(--green)}
.figs>div:nth-child(3) b{color:var(--blue)}
.figs>div:nth-child(4) b{color:var(--purple)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .figs>div:nth-child(1) b{color:var(--lime)}}
:root[data-theme="dark"] .figs>div:nth-child(1) b{color:var(--lime)}

#products{background:var(--tint)}
#buyers{background:linear-gradient(180deg, var(--tint-2), transparent)}
#milling{background:var(--tint)}

.head .lab{color:var(--green-2)}
#buyers .head .lab{color:var(--blue)}
#quality .head .lab{color:var(--purple)}
#milling .head .lab{color:#33A0A8}

.hero h1 u{background:linear-gradient(90deg,var(--green),var(--blue) 55%,var(--purple));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent}

.contact{background:var(--panel); position:relative}
.contact::before{content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--lime),var(--green-2) 30%,#33A0A8 55%,var(--blue) 78%,var(--purple))}
.panel{border-top:3px solid var(--green-2)}
#quality .panel{border-top-color:var(--purple)}
#facility .panel{border-top-color:var(--blue)}

footer{background:var(--panel)}

/* ---- motion ---- */
@media (prefers-reduced-motion: no-preference){
  @keyframes rise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
  @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .mark img{animation:fade .7s ease both}
  .hero .eyebrow{animation:rise .55s cubic-bezier(.2,.7,.3,1) both}
  .hero .eyebrow i{transform-origin:left center; animation:grow .7s cubic-bezier(.2,.8,.2,1) .15s both}
  .hero h1{animation:rise .7s cubic-bezier(.2,.7,.3,1) .08s both}
  .hero .lede{animation:rise .7s cubic-bezier(.2,.7,.3,1) .18s both}
  .hero .cta{animation:rise .7s cubic-bezier(.2,.7,.3,1) .28s both}
  .figs>div{animation:rise .6s cubic-bezier(.2,.7,.3,1) both}
  .figs>div:nth-child(1){animation-delay:.36s} .figs>div:nth-child(2){animation-delay:.44s}
  .figs>div:nth-child(3){animation-delay:.52s} .figs>div:nth-child(4){animation-delay:.60s}
  .reveal{opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1)}
  .reveal.pre{opacity:0; transform:translateY(18px)}
  .flow .step{transition:border-top-color .4s ease}
  .step::before{content:""; position:absolute; inset:-2px 0 auto 0; height:2px; background:var(--paper);
    transform-origin:right center; transition:transform .5s cubic-bezier(.2,.8,.2,1)}
  .step.lit::before{transform:scaleX(0)}
}
.mast nav a{transition:color .2s ease, border-color .25s ease}
.btn{transition:background .22s ease, border-color .22s ease, transform .18s ease, box-shadow .22s ease}
.btn:hover{transform:translateY(-1px)}
.btn.solid:hover{box-shadow:0 6px 18px rgba(31,122,90,.28)}
.prods>div{transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease, background .2s ease}
.prods>div:hover{transform:translateY(-3px); box-shadow:0 10px 28px rgba(21,32,26,.08); z-index:1}
.prods h3::after{transition:width .32s cubic-bezier(.2,.8,.2,1)}
.prods>div:hover h3::after{width:56px}
.list div{transition:border-color .25s ease, padding-inline-start .25s ease}
.list div:hover{border-inline-start-color:var(--blue); padding-inline-start:21px}
.wa{transition:background .22s ease, transform .18s ease, box-shadow .22s ease}
.wa:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(18,140,126,.3)}
.kv{transition:background .18s ease}
.panel .kv:hover{background:var(--line-2)}
input,textarea,select{transition:border-color .18s ease, box-shadow .18s ease}
.sent{animation:fade .4s ease both}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---- multi-page shell ---- */
a.mark{text-decoration:none; color:inherit}
.mast nav a.on{color:var(--ink); border-bottom-color:var(--green-2)}
.foot-note a{color:var(--green); font-family:Archivo,sans-serif; font-weight:600;
  font-size:14.5px; text-decoration:none; border-bottom:1.5px solid transparent; transition:border-color .2s}
.foot-note a:hover{border-bottom-color:var(--green)}
.addr a{color:inherit; text-decoration:none; border-bottom:1px solid var(--line)}
.addr a:hover{border-bottom-color:var(--green)}
.kv a{color:var(--green); text-decoration:none}
section.contact .cta{margin-top:0}
section.contact .head{max-width:52ch}