/* ==========================================================================
 MREMBO NATURALS — SHARED DESIGN TOKENS & BASE COMPONENTS
 --------------------------------------------------------------------------
 Extracted verbatim from index.html so that pages outside the single-page
 app — the generated ingredient pages at /ingredients/<slug>/ — use exactly
 the same colours, type and buttons as the rest of the site.

 index.html also links this file, but its own inline <style> block loads
 afterwards and therefore still wins on any rule it defines. Linking it
 there is what stops the two copies drifting apart: change a token here and
 both the generated pages and the main site pick it up.

 Add site-wide tokens and shared components here. Page-specific styling
 belongs in impact-dashboard.css or b2b-catalog.css.
 ========================================================================== */

:root{
  --ink:#000000; --cream:#F5E3C0; --cream-2:#F5E3C0; --white:#FFFFFF;
  --green:#000000; --green-2:#000000; --green-soft:#F5E3C0; --lime:#D88F04; --lime-soft:#F5E3C0;
  --terracotta:#000000; --terracotta-soft:#F5E3C0;
  --gold:#D88F04; --gold-soft:#F5E3C0;
  --turmeric:#D88F04; --turmeric-soft:#F5E3C0;
  --mango:#D88F04; --mango-soft:#F5E3C0;
  --coral:#D88F04; --coral-soft:#F5E3C0;
  --neutral:#000000; --line:#F5E3C0;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0; background:var(--cream); color:var(--ink);}
body{font-family:'Quicksand', system-ui, sans-serif;}
::selection{background:var(--turmeric-soft); color:var(--ink);}
img,svg{display:block; max-width:100%;}
a{text-decoration:none; color:inherit;}
h1,h2,h3,h4{margin:0; font-weight:500;}
p{margin:0;}
.wrap{max-width:1240px; margin:0 auto; padding:0 2.2rem;}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

.reveal{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease;}
.reveal.in{opacity:1; transform:none;}

.eyebrow{font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.72rem; letter-spacing:0.16em; text-transform:uppercase; display:flex; align-items:center; gap:0.6rem; color:var(--terracotta);}
.display{font-family:'Quicksand', sans-serif; font-weight:500; line-height:1.1; text-wrap:balance;}
.lede{font-size:1.06rem; line-height:1.62; color:var(--neutral); max-width:56ch;}
.cap{font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.7rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--neutral);}

/* ---------- buttons ---------- */
.btn{font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.85rem; padding:0.85rem 1.65rem; border-radius:999px; text-transform:uppercase; letter-spacing:0.12em; display:inline-flex; align-items:center; gap:0.55rem; transition:transform .18s ease, background-color .18s ease; cursor:pointer; border:none;}
.btn:hover{transform:translateY(-3px);}
.btn-terracotta{background:var(--terracotta); color:#FFFFFF; box-shadow:none;}
.btn-mango{background:var(--mango); color:var(--ink); box-shadow:none;}
.btn-mango:hover{background:var(--coral);}
.btn-green{background:var(--green); color:#FFFFFF; box-shadow:none;}
.btn-turmeric{background:var(--turmeric); color:#000000; box-shadow:none;}
.btn-outline{background:var(--cream-2); border:0; color:var(--ink);}
.btn-outline-cream{background:rgba(245,227,192,0.16); border:0; color:var(--cream);}
.btn-sm{padding:0.55rem 1.1rem; font-size:0.76rem;}

.card{background:var(--white); border:0; box-shadow:0 1px 2px rgba(97,64,2,0.06); border-radius:20px; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; display:flex; flex-direction:column;}
.card:hover{transform:translateY(-5px); box-shadow:0 26px 44px -24px rgba(97,64,2,0.3);}
.scene{position:relative; overflow:hidden;}
.scene svg{width:100%; height:100%; display:block; transition:transform .5s ease;}
.card:hover .scene svg{transform:scale(1.05);}
.photo{position:relative; overflow:hidden;}
.photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease;}
.card:hover .photo img{transform:scale(1.05);}
.blob{border-radius:62% 38% 41% 59% / 55% 42% 58% 45%;}
.rounded-lg{border-radius:24px;}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:2.4rem;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem;}
@media (max-width:980px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} }

section{padding:5.5rem 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:2.4rem; flex-wrap:wrap;}
.page{display:none;}
.page.active{display:block;}
.divider{display:block; width:100%; height:60px;}

.filter-chip{font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.8rem; padding:0.5rem 1.1rem; border-radius:999px; border:0; cursor:pointer; background:var(--cream-2); transition:all .15s ease;}
.filter-chip.active{background:var(--green); color:#FFFFFF; border-color:var(--green);}

.flow{display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; justify-content:center;}
.flow-node{display:flex; flex-direction:column; align-items:center; gap:0.5rem; width:120px; text-align:center;}
.flow-node .dot{width:2.7rem; height:2.7rem; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#FFFFFF; font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.78rem;}
.flow-node span{font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.78rem;}
.flow-arrow{color:var(--terracotta); opacity:0.55; font-size:1.1rem;}
@media (max-width:700px){ .flow{flex-direction:column;} .flow-arrow{transform:rotate(90deg);} }

.photo-caption{font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.68rem; letter-spacing:0.04em; color:var(--neutral); margin-top:0.6rem;}

.modal-close{position:absolute; top:1rem; right:1.2rem; background:var(--cream-2); border:0; width:36px; height:36px; border-radius:50%; font-size:1.3rem; line-height:1; cursor:pointer; color:var(--ink); transition:all .18s ease;}
.modal-close:hover{background:var(--mango); color:var(--ink); border-color:var(--mango);}

/* Dark footers keep light text. The grey used on light sections would fail on black. */
footer.site .bottom, footer.site .bottom span, .mini-foot, .mini-foot p, .mini-foot span, .mini-foot .bottom span { color:#D88F04 !important; }
.mini-foot a { color:#F5E3C0 !important; }
.mini-foot a:hover { color:var(--turmeric); }

/* REFRESH: one colour for card titles, and no cap lines or borders on cards */
.card h3, .card h4, .why-card h3, .why-card h4, .path-card h2{ color:var(--ink) !important; }
.card, .why-card, .pillar{ border:0 !important; }

/* ---------- SHOP REFRESH: category bar, search, clear section transitions ---------- */
.shop-jump{ padding:1.6rem 0 0; background:var(--cream); }
.sj-links{ display:flex; flex-wrap:wrap; gap:0.4rem 1.6rem; align-items:center; }
.sj-links span{ cursor:pointer; font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.92rem; color:var(--ink); padding:0.3rem 0; border-bottom:2px solid transparent; transition:border-color .2s ease, color .2s ease; }
.sj-links span:hover, .sj-links span:focus-visible{ border-bottom-color:var(--mango); outline:none; }
.sj-search{ display:block; margin-top:1.1rem; max-width:460px; }
.sj-search input{ width:100%; font:inherit; font-size:0.95rem; padding:0.8rem 1rem; border:0; border-radius:14px; background:var(--cream-2); color:var(--ink); }
.sj-search input:focus{ outline:2px solid var(--mango); outline-offset:1px; }
#page-shop section[id^="cat-"]{ padding:4.2rem 0; }
#page-shop section[id^="cat-"] + section[id^="cat-"]{ border-top:0; }
#page-shop section[id^="cat-"] .section-head h2{ font-size:1.7rem; }
#page-shop .section-head .cap{ font-size:0.85rem; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- INGREDIENTS REFRESH: fewer pills, smaller tags, plain audience line ---------- */
.b2b-aud{ display:block; margin-top:1.1rem; }
.b2b-aud span{ display:inline; background:none !important; border:0 !important; padding:0 !important; border-radius:0 !important; font-size:0.86rem; color:#F5E3C0; }
.b2b-aud span + span::before{ content:"  \00B7  "; color:#000000; }
.ingpill, .apptag{ background:none !important; border:0 !important; padding:0 !important; font-size:0.76rem; color:var(--neutral) !important; font-weight:700; letter-spacing:0.02em; }
.ingpill + .ingpill::before, .apptag + .apptag::before{ content:"  \00B7  "; color:#000000; }

/* Ingredient catalogue: no card borders, no pill tags, single dark rule per category */
.ing-card, .ing-hero-media{ border:0 !important; box-shadow:none; }
.ing-card:hover{ box-shadow:0 14px 30px -18px rgba(97,64,2,0.35); }
.b2b-tag{ background:none !important; border:0 !important; padding:0 !important; border-radius:0 !important; font-size:0.74rem; letter-spacing:0.03em; color:var(--neutral); }
.b2b-cat-head{ border-bottom:1px solid var(--ink) !important; }
.b2b-trust *{ border:0 !important; box-shadow:none !important; }

/* Partner logos: plain logos, no cards */
.sup{ background:none !important; border:0 !important; box-shadow:none !important; padding:0.4rem 0.6rem !important; }
.sup:hover{ transform:none !important; box-shadow:none !important; border-color:transparent !important; }

/* ---------- HOMEPAGE HERO: full-width background, YouTube video once loaded ---------- */
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; background:#000000; }
.hero-bg img.hero-poster, .hero-yt iframe{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:max(100%, 177.78vh); height:max(100%, 56.25vw); min-width:100%; min-height:100%; border:0; object-fit:cover; }
.hero-yt{ position:absolute; inset:0; }
.hero-yt iframe{ opacity:0; transition:opacity 1.2s ease; pointer-events:none; }
.hero-bg.is-on .hero-yt iframe{ opacity:1; }
.hero-shade{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0.25) 100%); }

/* ---------- PARTNER LOGOS: plain logos sliding, no cards ---------- */
.sup-marquee{ display:flex !important; width:max-content; grid-template-columns:none !important; gap:3.5rem; align-items:center; animation:supSlide 38s linear infinite; }
.sup-marquee .sup{ flex:0 0 auto; width:auto; min-width:150px; }
.sup-track{ overflow:hidden; }
.sup-track:hover .sup-marquee{ animation-play-state:paused; }
@keyframes supSlide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .sup-marquee{ animation:none; } }

/* ---------- CARD TITLES: brand orange ---------- */
.card h2, .card h3, .card h4, .why-card h3, .why-card h4, .pcard h4, .ing-card h3, .crop-card h3, .pillar h3, .path-card h2{ color:#D88F04 !important; }
.sup-marquee .sup span{ display:none; }

/* ---- Round 3 fixes ----
   Outlined amber button: transparent, amber border and text (no fill). */
.btn.btn-outline-amber{ background:transparent !important; color:#D88F04 !important; border:2px solid #D88F04 !important; box-shadow:none !important; }
.btn.btn-outline-amber:hover, .btn.btn-outline-amber:focus-visible{ background:#D88F04 !important; color:#000000 !important; }
/* Stats cards: title figure and subtitle in amber, not black or brown */
.why-fig, .why-card h3{ color:#D88F04 !important; }

/* ---- Round 4: one style per element, brand colours only (black / orange / white) ---- */
:root{ --ink:#000000; --cream:#FFFFFF; --cream-2:#FFFFFF; --green-soft:#FFFFFF; --lime-soft:#FFFFFF; --mango-soft:#FFFFFF; }

/* Footer: solid colour only. Icons and buttons are solid orange, no borders. */
footer.site .socials a.soc, .socials a.soc{ background:#D88F04 !important; border:0 !important; box-shadow:none !important; }
footer.site .socials a.soc svg{ fill:#000000 !important; }
footer.site .socials a.soc:hover{ background:#FFFFFF !important; }
footer.site .btn{ background:#D88F04 !important; color:#000000 !important; border:0 !important; box-shadow:none !important; }
/* Footer links are plain text: no border, no fill. */
footer.site a{ border:0 !important; background:none !important; }

/* Job list: border only, no solid fill. */
.job-tag, .job-tag.type{ background:transparent !important; border:1px solid #000000 !important; color:#000000 !important; }
.job-toggle{ background:transparent !important; border:1px solid #000000 !important; }
.job.open .job-toggle{ background:transparent !important; border-color:#D88F04 !important; }
.job-head:hover{ background:#FFFFFF !important; }

/* Steps (from Tanzanian farms to global shelves): one colour, orange. */
.flow-node .dot{ background:#D88F04 !important; color:#FFFFFF !important; }
.flow-node span{ color:#000000 !important; }

/* Stats cards: a line above the source link, no pill. */
.why-card .why-link{ display:block !important; background:none !important; border:0 !important; border-top:1px solid #D9D9D9 !important; border-radius:0 !important; padding:0.9rem 0 0 !important; color:#000000 !important; }

/* Hero: everything centred. */
.hero-wrap .eyebrow{ display:block !important; text-align:center !important; }
.hero-wrap .lede{ margin-left:auto !important; margin-right:auto !important; text-align:center !important; }

/* Uppercase subtitles (eyebrows) carry the orange. */
.eyebrow{ color:#D88F04 !important; }

/* ---- Footer styles (copied from the home page so every page renders the same footer) ---- */
.brand{display:flex; align-items:center; gap:0.7rem; cursor:pointer;}
.brand-logo{height:44px; flex:none;}
.brand-logo img{height:100%; width:auto; object-fit:contain; border-radius:0;}
.trust-strip{display:flex; gap:2.4rem; flex-wrap:wrap; justify-content:center; font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.82rem;}
.socials{display:flex; gap:0.6rem; flex-wrap:wrap; align-items:center; margin:0; padding:0;}
.socials a.soc{
flex:0 0 42px; width:42px; height:42px; margin:0; padding:0;
border-radius:50%; box-sizing:border-box;
display:inline-flex; align-items:center; justify-content:center; line-height:0;
background:rgba(245,227,192,0.10); border:1px solid rgba(245,227,192,0.22);
transition:transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.socials a.soc svg{width:18px; height:18px; display:block; fill:#F5E3C0; transition:fill .2s ease;}
.socials a.soc:hover{transform:translateY(-2px) scale(1.06);}
.socials a.soc.ig:hover{background:#D88F04; border-color:#D88F04;}
.socials a.soc.fb:hover{background:#D88F04; border-color:#D88F04;}
.socials a.soc.x:hover{background:#000000; border-color:#000000;}
.socials a.soc:hover svg{fill:#FFFFFF;}
.socials a.soc.soc-light{background:var(--white); border-color:var(--line);}
.socials a.soc.soc-light svg{fill:var(--ink);}
.socials a.soc.soc-light:hover svg{fill:#FFFFFF;}
.cinfo{display:flex; flex-direction:column; gap:1.15rem;}
.crow{display:flex; gap:0.95rem; align-items:flex-start;}
.crow .cico{flex:0 0 42px; width:42px; height:42px; border-radius:12px; background:var(--turmeric-soft); border:1px solid #F5E3C0; display:inline-flex; align-items:center; justify-content:center;}
.crow .cico svg{width:19px; height:19px; stroke:var(--terracotta); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.crow .clabel{font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--neutral); margin-bottom:0.2rem;}
.crow .cval{font-size:0.98rem; color:var(--ink); line-height:1.5;}
.crow .cval a:hover{color:var(--terracotta);}
.crow .cval .hours{font-size:0.9rem; color:var(--neutral); display:block;}
.cinfo-dark .cico{background:#FFFFFF; border-color:rgba(216,143,4,0.3);}
.cinfo-dark .cico svg{stroke:var(--turmeric);}
.cinfo-dark .clabel{color:#D88F04;}
.cinfo-dark .cval{color:#F5E3C0;}
.cinfo-dark .cval .hours{color:#D88F04;}
footer.site{background:#000000; color:#FFFFFF; padding:4rem 0 0;}
.footer-base{background:#0D0D0D; padding:1.2rem 0;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.2fr; gap:2.2rem; padding-bottom:2.6rem;}
@media (max-width:1180px){ .footer-grid{grid-template-columns:1.3fr 1fr 1fr;} }
.footer-grid h5{font-family:'Quicksand',sans-serif; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:#D88F04; margin-bottom:0.9rem;}
.footer-grid a, .footer-grid p{display:block; font-size:0.85rem; color:#F5E3C0; margin-bottom:0.55rem;}
.footer-grid .socials a{margin-bottom:0;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:0; font-size:0.76rem; color:#D88F04; flex-wrap:wrap; gap:0.7rem;}
/* minmax(0,1fr) stops a long unbreakable string (the contact email) from
forcing its column wider than its share and pushing the page sideways. */
@media (max-width:900px){ .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:420px){ .footer-grid{grid-template-columns:minmax(0,1fr); gap:1.6rem;} }
.footer-grid a, .footer-grid .cval{overflow-wrap:anywhere;}
/* Cream outline button (hero secondary): outline only, no fill. */
.btn.btn-outline-cream{ background:transparent !important; border:2px solid #FFFFFF !important; color:#FFFFFF !important; box-shadow:none !important; }

/* Business ingredient cards (PDF p8): title black; label orange and quote button solid orange are set in js/site.js. */
#biz-ingredient-grid .icard h4{ color:#000000 !important; }

/* Orange band directly above the black footer: leave white space between them */
section[style*="var(--mango)"] + footer.site{ margin-top:3.5rem; }

/* ---- Site-wide clean-up ---- */
/* Outline buttons: one thin line everywhere (about 25% thinner than before) */
.btn.btn-outline-amber, .btn.btn-outline-cream, .btn-outline-amber, .btn-outline-cream{ border-width:1.1px !important; }
/* Footer contact icons: orange box, black icon */
footer.site .cico{ background:#D88F04 !important; color:#000 !important; border:0 !important; }
footer.site .cico svg{ stroke:#000 !important; }
/* PLACEHOLDER DATA: hidden until the owner supplies the figures. Data files are unchanged. */
.metric.is-placeholder, .status-tag.placeholder, .tbu, .lf-val .tbu{ display:none !important; }