/* ==========================================================================
   House of Tobaro — Design tokens
   Premium African coffee & cocoa sourcing, B2B corporate site
   Mobile-first: base rules target small screens; min-width breakpoints
   layer on tablet/desktop layout as the viewport grows.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* colour */
  --brown-950:#1B120D;   /* primary bg — roasted espresso */
  --brown-900:#241811;
  --brown-800:#3A2418;   /* panels on dark */
  --brown-700:#4E2F1E;
  --cream-100:#F4ECDC;   /* light bg / text on dark */
  --cream-50:#FAF6EE;
  --gold-500:#C7973E;    /* premium accent */
  --gold-400:#DAB25C;
  --green-600:#4B6B4B;   /* agriculture accent */
  --green-700:#3A5439;
  --rust-700:#7A3B24;    /* cocoa secondary accent */
  --ink:#20140D;

  /* type */
  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'Space Mono', monospace;

  --container:1180px;
  --edge:clamp(18px, 5vw, 64px);
}

/* Breakpoints used throughout (mobile-first, min-width only):
   480px  – large phone
   600px  – small tablet / phablet
   700px  – tablet
   860px  – nav switches to desktop row
   960px  – small desktop
   1100px – full desktop grid
*/

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--brown-950);
  color:var(--cream-100);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.12;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
p{ margin:0 0 1em; }
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--edge);
}

::selection{ background:var(--gold-500); color:var(--ink); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{
  outline:2px solid var(--gold-500);
  outline-offset:3px;
}

/* ---------- eyebrow / labels ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--gold-500);
  display:inline-flex;
  align-items:center;
  gap:.6em;
  margin-bottom:1.1em;
}
.eyebrow::before{
  content:'';
  width:20px; height:1px;
  background:var(--gold-500);
  display:inline-block;
}
@media (min-width:700px){
  .eyebrow{ font-size:12px; letter-spacing:.14em; }
  .eyebrow::before{ width:24px; }
}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  letter-spacing:.01em;
  padding:14px 24px;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  width:100%;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary{
  background:var(--gold-500);
  color:var(--ink);
}
.btn-primary:hover{ background:var(--cream-50); transform:translateY(-2px); }
.btn-ghost{
  background:transparent;
  color:var(--cream-100);
  border-color:rgba(244,236,220,.35);
}
.btn-ghost:hover{ border-color:var(--gold-500); color:var(--gold-500); transform:translateY(-2px); }
.btn-row{ display:flex; flex-direction:column; gap:14px; }
@media (min-width:560px){
  .btn{ width:auto; padding:15px 30px; font-size:14.5px; }
  .btn-row{ flex-direction:row; flex-wrap:wrap; gap:16px; }
}

/* ---------- nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(27,18,13,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(244,236,220,.1);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px var(--edge);
  max-width:var(--container); margin:0 auto;
}
.brand{
  font-family:var(--font-display);
  font-size:18px;
  letter-spacing:.02em;
  display:flex; align-items:baseline; gap:.5em;
}
.brand span{ color:var(--gold-500); font-style:italic; }

.brand-logo{
  height:32px; width:auto; display:block;
}
.footer-brand .brand-logo{ height:44px; margin-bottom:16px; }

.nav-links{
  position:fixed; top:0; right:0; bottom:0;
  width:min(84vw, 340px);
  background:var(--brown-950);
  border-left:1px solid rgba(244,236,220,.12);
  box-shadow:-24px 0 48px rgba(0,0,0,.4);
  display:flex;
  flex-direction:column; align-items:flex-start;
  padding:100px 32px 32px;
  gap:0; font-size:21px;
  list-style:none; margin:0;
  counter-reset:navcount;
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
  z-index:70;
}
.nav-links::before{
  content:'Menu';
  position:absolute; top:38px; left:32px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(244,236,220,.4);
}
.nav-links.open{ transform:translateX(0); }
.nav-links li{ width:100%; }
.nav-links li:not(.nav-links-cta):not(.nav-links-foot){
  border-bottom:1px solid rgba(244,236,220,.1);
}
.nav-links li:not(.nav-links-cta):not(.nav-links-foot) a{
  display:flex; align-items:baseline; gap:14px;
  padding:16px 0;
  font-family:var(--font-display);
}
.nav-links li:not(.nav-links-cta):not(.nav-links-foot) a::before{
  counter-increment:navcount;
  content:counter(navcount, decimal-leading-zero);
  font-family:var(--font-mono); font-size:12px;
  color:var(--gold-500); opacity:.8;
}
.nav-links a{
  position:relative; opacity:.88; transition:opacity .2s ease, color .2s ease;
}
.nav-links a:hover, .nav-links a.active{ opacity:1; color:var(--gold-500); }
.nav-links a.btn{ opacity:1; padding:14px 24px; }
.nav-links a.btn:hover{ color:var(--ink); }
.nav-links .nav-links-cta{
  margin-top:22px; width:100%;
}
.nav-links .nav-links-foot{
  margin-top:16px; padding-top:16px; border-top:1px dashed rgba(244,236,220,.16);
  font-family:var(--font-mono); font-size:12.5px;
}
.nav-links .nav-links-foot a{ opacity:.7; }
.nav-links .nav-links-foot a:hover{ opacity:1; color:var(--gold-500); }

/* staggered entrance for the offcanvas items */
.nav-links li{
  opacity:0; transform:translateX(14px);
  transition:opacity .35s ease, transform .35s ease;
}
.nav-links.open li{ opacity:1; transform:none; }
.nav-links.open li:nth-child(1){ transition-delay:.06s; }
.nav-links.open li:nth-child(2){ transition-delay:.1s; }
.nav-links.open li:nth-child(3){ transition-delay:.14s; }
.nav-links.open li:nth-child(4){ transition-delay:.18s; }
.nav-links.open li:nth-child(5){ transition-delay:.22s; }
.nav-links.open li:nth-child(6){ transition-delay:.26s; }

.nav-overlay{
  position:fixed; inset:0;
  background:rgba(15,9,6,.55);
  backdrop-filter:blur(2px);
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility 0s linear .35s;
  z-index:60;
}
.nav-overlay.open{
  opacity:1; visibility:visible;
  transition:opacity .35s ease, visibility 0s linear 0s;
}
body.nav-locked{ overflow:hidden; }

.nav-cta{ display:flex; align-items:center; gap:16px; }
.nav-cta .btn-primary{ display:none; }

.nav-toggle{
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; cursor:pointer; line-height:1;
  width:40px; height:40px; padding:0;
  position:relative; z-index:80;
}
.hamburger{
  position:relative; width:22px; height:16px; display:block;
}
.hamburger span{
  position:absolute; left:0; width:100%; height:2px;
  background:var(--cream-100); border-radius:2px;
  transition:transform .3s ease, opacity .2s ease, top .3s ease;
}
.hamburger span:nth-child(1){ top:0; }
.hamburger span:nth-child(2){ top:7px; }
.hamburger span:nth-child(3){ top:14px; }
.nav-toggle[aria-expanded="true"] .hamburger span:nth-child(1){ top:7px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] .hamburger span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .hamburger span:nth-child(3){ top:7px; transform:rotate(-45deg); }

@media (min-width:861px){
  .nav{ padding:20px var(--edge); }
  .brand{ font-size:20px; }
  .brand-logo{ height:40px; }
  .nav-links{
    position:static; inset:auto; width:auto; background:none; border-left:none; box-shadow:none;
    flex-direction:row; align-items:center; padding:0; gap:36px; font-size:14px; font-weight:500;
    transform:none; overflow:visible;
  }
  .nav-links .nav-links-cta{ display:none; }
  .nav-links .nav-links-foot{ display:none; }
  .nav-links::before{ content:none; }
  .nav-links li{
    width:auto; border-bottom:none;
    opacity:1; transform:none; transition:none;
  }
  .nav-links li a{ padding:4px 0; font-family:var(--font-body); }
  .nav-links li a::before{ content:none; }
  .nav-overlay{ display:none; }
  .nav-cta{ gap:20px; }
  .nav-cta .btn-primary{ display:inline-flex; width:auto; padding:13px 26px; font-size:14px; }
  .nav-toggle{ display:none; }
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:64px var(--edge) 56px;
  overflow:hidden;
  border-bottom:1px solid rgba(244,236,220,.1);
}
.hero-grain{
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 15% 20%, rgba(199,151,62,.10), transparent 45%),
                    radial-gradient(circle at 85% 75%, rgba(75,107,75,.14), transparent 50%);
  pointer-events:none;
}
.hero-inner{
  max-width:var(--container); margin:0 auto;
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr; gap:44px; align-items:center;
}
.hero h1{
  font-size:clamp(34px, 9vw, 76px);
  max-width:12ch;
}
.hero h1 em{ color:var(--gold-500); font-style:italic; }
.hero-sub{
  font-size:16.5px; max-width:44ch; color:rgba(244,236,220,.8);
  margin-bottom:30px;
}
.hero-map{ position:relative; order:-1; max-width:340px; margin:0 auto; }

@media (min-width:901px){
  .hero{ padding:150px var(--edge) 120px; }
  .hero-inner{ grid-template-columns:1.1fr .9fr; gap:60px; align-items:end; }
  .hero-sub{ font-size:18px; margin-bottom:36px; }
  .hero-map{ order:initial; max-width:none; margin:0; }
}

/* ---------- page hero (secondary pages) ---------- */
.page-hero{
  padding:64px var(--edge) 48px;
  border-bottom:1px solid rgba(244,236,220,.1);
}
.page-hero h1{ font-size:clamp(32px,8vw,58px); max-width:16ch; }
.page-hero p{ max-width:60ch; font-size:16px; color:rgba(244,236,220,.78); }
@media (min-width:901px){
  .page-hero{ padding:150px var(--edge) 80px; }
  .page-hero p{ font-size:17px; }
}

/* ---------- sections ---------- */
.section{ padding:64px var(--edge); }
.section-tight{ padding:56px var(--edge); }
.section-dark{ background:var(--brown-950); }
.section-panel{ background:var(--brown-900); }
.section-light{ background:var(--cream-100); color:var(--ink); }
.section-light .eyebrow{ color:var(--rust-700); }
.section-light .eyebrow::before{ background:var(--rust-700); }
@media (min-width:901px){
  .section{ padding:110px var(--edge); }
  .section-tight{ padding:80px var(--edge); }
}

.section-head{
  max-width:640px; margin-bottom:36px;
}
.section-head h2{ font-size:clamp(28px,7vw,46px); }
.section-head p{ font-size:16px; color:rgba(244,236,220,.78); }
.section-light .section-head p{ color:rgba(32,20,13,.72); }
@media (min-width:901px){ .section-head{ margin-bottom:60px; } .section-head p{ font-size:17px; } }

.two-col{
  display:grid; grid-template-columns:1fr; gap:36px; align-items:center;
}
@media (min-width:861px){ .two-col{ grid-template-columns:1fr 1fr; gap:70px; } }

/* ---------- origin cards ---------- */
.origin-grid{
  display:grid; grid-template-columns:1fr; gap:2px;
  background:rgba(244,236,220,.12);
  border:1px solid rgba(244,236,220,.12);
}
.origin-card{
  background:var(--brown-950);
  padding:36px 26px;
  position:relative;
}
.origin-flag{ font-size:30px; margin-bottom:16px; }
.origin-card h3{ font-size:24px; margin-bottom:6px; }
.origin-tag{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-500); margin-bottom:18px; display:block;
}
.origin-card p{ color:rgba(244,236,220,.78); }
.tag-list{ list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.tag-list li{
  font-size:13px; font-family:var(--font-mono);
  border:1px solid rgba(244,236,220,.25); padding:6px 12px; border-radius:20px;
  color:rgba(244,236,220,.85);
}
@media (min-width:701px){
  .origin-grid{ grid-template-columns:1fr 1fr; }
  .origin-card{ padding:50px 44px; }
  .origin-flag{ font-size:34px; margin-bottom:18px; }
  .origin-card h3{ font-size:28px; }
  .origin-tag{ margin-bottom:22px; }
}

/* ---------- product cards ---------- */
.product-grid{ display:grid; grid-template-columns:1fr; gap:24px; }
.product-card{
  background:var(--brown-900);
  border:1px solid rgba(244,236,220,.1);
  padding:32px 26px;
  transition:border-color .3s ease, transform .3s ease;
}
.product-card:hover{ border-color:var(--gold-500); transform:translateY(-4px); }
.product-kicker{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--green-600); }
.product-card h3{ font-size:22px; margin:8px 0 16px; }
.product-card h4{ font-family:var(--font-body); font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:rgba(244,236,220,.55); margin:20px 0 10px; font-weight:600; }
.product-card ul{ margin:0; padding-left:18px; color:rgba(244,236,220,.82); }
.product-card ul li{ margin-bottom:6px; }
@media (min-width:701px){
  .product-grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .product-card{ padding:44px; }
  .product-card h3{ font-size:26px; margin:8px 0 18px; }
}

/* ---------- why grid ---------- */
.why-grid{
  display:grid; grid-template-columns:1fr; gap:1px;
  background:rgba(32,20,13,.12);
}
.why-card{
  background:var(--cream-100); padding:30px 24px;
}
.why-card .num{ font-family:var(--font-mono); font-size:12px; color:var(--rust-700); margin-bottom:18px; display:block; }
.why-card h3{ font-size:19px; color:var(--ink); margin-bottom:10px; }
.why-card p{ font-size:14.5px; color:rgba(32,20,13,.72); margin:0; }
@media (min-width:601px){ .why-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:961px){
  .why-grid{ grid-template-columns:repeat(4,1fr); }
  .why-card{ padding:38px 30px; }
  .why-card .num{ margin-bottom:22px; }
  .why-card h3{ font-size:20px; }
}

/* ---------- process ---------- */
.process{
  display:grid; grid-template-columns:1fr; gap:34px;
  position:relative;
}
.process-step{ padding:0; position:relative; }
.process-step:not(:last-child)::after{
  content:'↓';
  position:absolute; left:0; bottom:-24px; top:auto; right:auto;
  color:var(--gold-500); font-size:20px;
}
.process-step .num{ font-family:var(--font-mono); font-size:32px; color:var(--gold-500); display:block; margin-bottom:14px; }
.process-step h3{ font-size:18px; margin-bottom:8px; }
.process-step p{ font-size:14.5px; color:rgba(244,236,220,.75); }
@media (min-width:901px){
  .process{ grid-template-columns:repeat(4,1fr); gap:0; }
  .process-step{ padding:0 26px 0 0; }
  .process-step:not(:last-child)::after{ content:'→'; left:auto; right:-6px; top:6px; bottom:auto; }
  .process-step .num{ font-size:36px; margin-bottom:16px; }
  .process-step h3{ font-size:19px; }
}

/* ---------- for businesses ---------- */
.audience-list{ list-style:none; padding:0; margin:22px 0 30px; display:grid; grid-template-columns:1fr; gap:12px; }
.audience-list li{ display:flex; align-items:center; gap:10px; font-size:15px; }
.audience-list li::before{ content:'✓'; color:var(--gold-500); font-weight:700; }
@media (min-width:561px){ .audience-list{ grid-template-columns:1fr 1fr; gap:12px 24px; margin:24px 0 34px; } }

/* ---------- sustainability list ---------- */
.commit-list{ list-style:none; padding:0; margin:24px 0 0; display:grid; gap:14px; }
.commit-list li{
  padding:16px 0; border-top:1px solid rgba(244,236,220,.14);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-size:15px;
}
.commit-list li:last-child{ border-bottom:1px solid rgba(244,236,220,.14); }
.commit-list li::after{ content:'—'; color:var(--gold-500); font-family:var(--font-mono); }
@media (min-width:701px){ .commit-list li{ font-size:15.5px; padding:18px 0; } }

/* ---------- CTA band ---------- */
.cta-band{
  background:var(--brown-800);
  padding:64px var(--edge);
  text-align:center;
  border-top:1px solid rgba(244,236,220,.1);
  border-bottom:1px solid rgba(244,236,220,.1);
}
.cta-band h2{ font-size:clamp(28px,7.5vw,48px); max-width:16ch; margin-left:auto; margin-right:auto; }
.cta-band p{ max-width:52ch; margin:0 auto 30px; color:rgba(244,236,220,.78); font-size:15.5px; }
.cta-band .btn-row{ justify-content:center; align-items:center; }
@media (min-width:701px){ .cta-band{ padding:90px var(--edge); } .cta-band p{ font-size:16px; margin-bottom:34px; } }

/* ---------- route map signature element ---------- */
.route-map{ width:100%; height:auto; }
.route-map .pin{ fill:var(--gold-500); }
.route-map .land{ fill:none; stroke:rgba(244,236,220,.28); stroke-width:1; }
.route-map .route{
  fill:none; stroke:var(--gold-500); stroke-width:1.6;
  stroke-dasharray:6 7;
  animation:dash-flow 6s linear infinite;
}
.route-map .route.route-green{ stroke:var(--green-600); }
.route-map .label{ font-family:var(--font-mono); font-size:11px; fill:rgba(244,236,220,.72); letter-spacing:.06em; }
.route-map .place{ font-family:var(--font-display); font-size:15px; fill:var(--cream-100); }
@keyframes dash-flow{ to{ stroke-dashoffset:-130; } }

.footer-map{ opacity:.55; max-width:340px; }

/* ---------- footer ---------- */
.site-footer{
  background:var(--brown-950);
  padding:56px var(--edge) 28px;
  border-top:1px solid rgba(244,236,220,.1);
}
.footer-grid{
  display:grid; grid-template-columns:1fr; gap:36px;
  padding-bottom:36px; border-bottom:1px solid rgba(244,236,220,.1);
}
.footer-grid h4{ font-family:var(--font-body); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:rgba(244,236,220,.55); margin-bottom:16px; font-weight:600; }
.footer-grid ul{ list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:14.5px; }
.footer-grid ul a:hover{ color:var(--gold-500); }
.footer-brand p{ color:rgba(244,236,220,.65); max-width:34ch; font-size:14.5px; }
.footer-flags{ font-size:13px; color:rgba(244,236,220,.6); font-family:var(--font-mono); }
.footer-bottom{
  padding-top:22px; display:flex; flex-direction:column; gap:10px;
  font-size:13px; color:rgba(244,236,220,.45);
}
@media (min-width:700px){
  .site-footer{ padding:80px var(--edge) 34px; }
  .footer-grid{ grid-template-columns:1.4fr 1fr 1fr; gap:50px; padding-bottom:50px; }
  .footer-bottom{ flex-direction:row; justify-content:space-between; align-items:center; padding-top:26px; }
}

/* ---------- forms ---------- */
.form-card{
  background:var(--brown-900); border:1px solid rgba(244,236,220,.12);
  padding:28px 22px;
}
.form-grid{ display:grid; grid-template-columns:1fr; gap:0; }
.form-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.form-field.full{ grid-column:1 / -1; }
.form-field label{ font-size:12.5px; font-family:var(--font-mono); letter-spacing:.06em; text-transform:uppercase; color:rgba(244,236,220,.6); }
.form-field input, .form-field select, .form-field textarea{
  background:var(--brown-950); border:1px solid rgba(244,236,220,.2);
  color:var(--cream-100); padding:13px 14px; font-family:var(--font-body); font-size:16px;
  border-radius:2px; width:100%;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  border-color:var(--gold-500); outline:none;
}
.chip-group{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  border:1px solid rgba(244,236,220,.28); padding:9px 16px; border-radius:20px;
  font-size:13.5px; cursor:pointer; background:transparent; color:var(--cream-100);
  font-family:var(--font-body); transition:all .2s ease;
}
.chip.selected{ background:var(--gold-500); border-color:var(--gold-500); color:var(--ink); }
.form-note{ font-size:12.5px; color:rgba(244,236,220,.5); margin-top:6px; }
.form-success{
  display:none; text-align:center; padding:32px 16px;
  font-family:var(--font-display); font-size:20px;
}
.form-success.show{ display:block; }
.form-card form.hidden{ display:none; }
@media (min-width:600px){
  .form-card{ padding:48px; }
  .form-grid{ grid-template-columns:1fr 1fr; gap:22px; }
  .form-field{ margin-bottom:22px; }
  .form-field label{ font-size:13px; }
  .form-field input, .form-field select, .form-field textarea{ padding:14px 16px; font-size:15px; }
  .form-success{ padding:40px 20px; font-size:22px; }
}

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- misc page bits ---------- */
.value-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:rgba(244,236,220,.12); margin-top:30px; }
.value-card{ background:var(--brown-950); padding:24px 16px; text-align:center; }
.value-card span{ font-family:var(--font-display); font-style:italic; font-size:20px; color:var(--gold-500); display:block; margin-bottom:8px; }
.value-card p{ margin:0; font-size:13.5px; }
@media (min-width:520px){ .value-card{ padding:30px 22px; } .value-card span{ font-size:22px; margin-bottom:10px; } .value-card p{ font-size:14px; } }
@media (min-width:900px){ .value-grid{ grid-template-columns:repeat(5,1fr); margin-top:40px; } }

.vision-mission{ display:grid; grid-template-columns:1fr; gap:2px; background:rgba(244,236,220,.12); margin-top:20px; }
.vm-card{ background:var(--brown-900); padding:32px 26px; }
.vm-card .eyebrow{ margin-bottom:16px; }
.vm-card h3{ font-size:clamp(19px,4vw,24px); }
@media (min-width:701px){ .vision-mission{ grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); } .vm-card{ padding:44px; } }

.req-list{ list-style:none; padding:0; margin:20px 0 0; }
.req-list li{
  padding:13px 0; border-top:1px dashed rgba(244,236,220,.2);
  font-size:14.5px; display:flex; gap:12px;
}
.req-list li:last-child{ border-bottom:1px dashed rgba(244,236,220,.2); }
.req-list li::before{ content:'▸'; color:var(--gold-500); }
@media (min-width:701px){ .req-list{ margin-top:22px; } .req-list li{ padding:14px 0; font-size:15px; } }

.partner-split{ display:grid; grid-template-columns:1fr; gap:2px; background:rgba(244,236,220,.1); }
.partner-panel{ padding:40px 24px; }
@media (min-width:861px){ .partner-split{ grid-template-columns:1fr 1fr; } .partner-panel{ padding:60px 50px; } }

/* ---------- commodity grid (What We Source) ---------- */
.commodity-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:rgba(244,236,220,.12);
}
.commodity-card{
  background:var(--brown-900);
  padding:26px 20px;
  display:flex; flex-direction:column; gap:10px;
  transition:background .25s ease, transform .25s ease;
}
.commodity-card:hover{ background:var(--brown-800); transform:translateY(-3px); }
.commodity-card .commodity-num{ font-family:var(--font-mono); font-size:18px; line-height:1; color:var(--gold-500); opacity:.9; }
.commodity-card h3{ font-size:18px; margin:0; }
.commodity-card.is-other{ background:transparent; border:1px dashed rgba(244,236,220,.25); justify-content:center; align-items:flex-start; }
@media (min-width:600px){ .commodity-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px){
  .commodity-grid{ grid-template-columns:repeat(4,1fr); }
  .commodity-card{ padding:34px 26px; }
  .commodity-card h3{ font-size:20px; }
}

/* ---------- future expansion tags ---------- */
.expansion-block{ margin-top:40px; }
.expansion-label{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(244,236,220,.5); margin-bottom:16px; display:block;
}
.expansion-tags{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.expansion-tags li{
  font-size:13.5px; font-family:var(--font-mono);
  border:1px dashed rgba(244,236,220,.3); padding:8px 16px; border-radius:20px;
  color:rgba(244,236,220,.7);
}