/* ==========================================================================
   MREMBO NATURALS — FARMER, IMPACT & SOURCING DASHBOARD
   --------------------------------------------------------------------------
   Built entirely on the design tokens already defined in index.html
   (--green, --turmeric, --terracotta, --cream, --line …) and on the existing
   type scale (Newsreader display / Work Sans body / Quicksand labels).
   Nothing here overrides an existing site rule — every selector is scoped
   under .imp- or #page-impact.
   ========================================================================== */

/* ==========================================================================
   0. SHARED PRIMITIVES
   ========================================================================== */

#page-impact { --imp-shadow: 0 26px 44px -28px rgba(97,64,2,0.34); }

/* Source attribution chip. Every verified figure can show where it came from. */
.src-tag{
  display:inline-flex; align-items:center; gap:0.34rem;
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.63rem;
  letter-spacing:0.03em; color:var(--neutral);
  background:var(--cream-2); border:0;
  padding:0.2rem 0.55rem; border-radius:999px; line-height:1.35;
}
.src-tag::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--green-2); flex:none;
}

/* Status flags — how we keep proposals and gaps visually distinct from fact. */
.status-tag{
  display:inline-flex; align-items:center; gap:0.3rem;
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.6rem;
  letter-spacing:0.09em; text-transform:uppercase;
  padding:0.22rem 0.6rem; border-radius:999px; line-height:1.4;
}
.status-tag.planned{ background:var(--turmeric-soft); color:#000000; border:0; }
.status-tag.placeholder{ background:#FFFFFF; color:#000000; border:0; }

/* A figure we do not have yet. Never a number — always this. */
.tbu{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.9rem;
  color:#000000; letter-spacing:0.01em;
}

.imp-note{
  font-size:0.83rem; line-height:1.6; color:var(--neutral);
  border-left:2px solid var(--line); padding-left:0.9rem;
}

/* ==========================================================================
   1. HERO
   ========================================================================== */

.imp-hero{
  position:relative; overflow:hidden; color:#FFFFFF;
  background:linear-gradient(155deg,#000000 0%,#000000 48%,#000000 100%);
}
.imp-hero-art{ position:absolute; inset:0; width:100%; height:100%; opacity:0.5; }
.imp-hero .wrap{ position:relative; z-index:2; padding-top:5rem; padding-bottom:4.4rem; }
.imp-hero h1{
  font-family:'Quicksand', sans-serif; font-weight:500; line-height:1.08;
  font-size:clamp(2.1rem, 5.2vw, 3.5rem); max-width:19ch; margin-top:0.9rem;
  text-wrap:balance;
}
.imp-hero .lede{ color:rgba(245,227,192,0.9); max-width:54ch; margin-top:1.2rem; font-size:1.03rem; }
.imp-hero .eyebrow{ color:var(--turmeric); }

/* The five-word promise strip under the hero headline. */
.imp-chain{
  display:flex; flex-wrap:wrap; align-items:center; gap:0.5rem;
  margin-top:2rem;
}
.imp-chain span{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.74rem;
  letter-spacing:0.05em; padding:0.45rem 0.95rem; border-radius:999px;
  background:rgba(245,227,192,0.1); border:0;
  color:#F5E3C0;
}
.imp-chain i{ color:var(--turmeric); font-style:normal; opacity:0.75; font-size:0.9rem; }

/* ==========================================================================
   2. IMPACT METRICS — animated counters
   ========================================================================== */

.metric-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.15rem;
}
@media (max-width:1040px){ .metric-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:780px){ .metric-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px){ .metric-grid{ grid-template-columns:1fr; } }

.metric{
  background:var(--white); border:0; border-radius:18px;
  padding:1.5rem 1.4rem 1.3rem; position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:0.5rem;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.metric::before{ display:none;
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:var(--m-accent, var(--green));
}
.metric:hover{ transform:translateY(-4px); box-shadow:var(--imp-shadow); border-color:#F5E3C0; }

.metric-ico{
  width:38px; height:38px; border-radius:11px; display:flex;
  align-items:center; justify-content:center; margin-bottom:0.15rem;
  background:var(--m-soft, var(--green-soft));
}
.metric-ico svg{ width:19px; height:19px; stroke:var(--m-accent, var(--green)); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

.metric-val{
  font-family:'Quicksand', sans-serif; font-weight:500; line-height:1;
  font-size:clamp(1.9rem, 4.2vw, 2.5rem); color:var(--m-accent, var(--green));
  letter-spacing:-0.015em;
}
.metric-label{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.79rem;
  color:var(--ink); line-height:1.35;
}
.metric-blurb{ font-size:0.82rem; line-height:1.55; color:var(--neutral); flex:1; }
.metric-foot{ display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; margin-top:0.3rem; }

.metric.is-placeholder{ background:#FFFFFF; border-style:dashed; }
.metric.is-placeholder::before{ opacity:0.4; }

/* ==========================================================================
   3. TANZANIA SOURCING MAP
   ========================================================================== */

.imp-map-shell{
  display:grid; grid-template-columns:1.25fr 0.95fr; gap:1.6rem;
  /* Both columns keep their natural height. Stretching the map to match a
     long panel leaves a lake of empty green underneath it. */
  align-items:start;
}
@media (max-width:960px){ .imp-map-shell{ grid-template-columns:1fr; } }

.imp-map-frame{
  position:relative; border-radius:22px; overflow:hidden;
  border:0;
  background:
    radial-gradient(120% 90% at 25% 15%, #000000 0%, #000000 42%, #000000 100%);
  min-height:430px;
  box-shadow:0 30px 60px -34px rgba(0,0,0,0.75);
  /* The panel beside it is usually taller, so centre the map in whatever
     height the row ends up with rather than pinning it to the top. */
  display:flex; align-items:center; justify-content:center;
  padding:1.2rem 1.2rem 4.6rem;   /* room for the legend at the bottom */
  /* Stays in view while the reader works down a long location panel. */
  position:sticky; top:6.5rem;
}
.imp-map-frame svg{ width:100%; height:auto; max-height:100%; display:block; touch-action:manipulation; }
@media (max-width:960px){
  /* Stack instead of centring, so the legend sits under the map rather than
     beside it as a second flex column. */
  .imp-map-frame{ padding:0.8rem; min-height:0; position:static; flex-direction:column; }
  .imp-map-frame .tz-legend{
    position:static; margin-top:0.9rem; width:100%;
    flex-direction:row; flex-wrap:wrap; gap:0.5rem 1.1rem;
  }
}

/* Landmass */
.tz-land{
  fill:#F5E3C0; stroke:#F5E3C0; stroke-width:1.4;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,0.28));
}
.tz-water{ fill:#000000; opacity:0.55; }
.tz-island{ fill:#F5E3C0; stroke:#F5E3C0; stroke-width:1; }
.tz-grat{ stroke:rgba(245,227,192,0.14); stroke-width:0.8; fill:none; }

/* Region label text on the land */
.tz-region-label{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:13px;
  fill:#000000; letter-spacing:0.06em; text-transform:uppercase;
  pointer-events:none; user-select:none;
}

/* Pins */
.tz-pin{ cursor:pointer; outline:none; }
.tz-pin .pin-hit{ fill:transparent; }
.tz-pin .pin-halo{
  fill:var(--pin, #000000); opacity:0.18;
  transform-box:fill-box; transform-origin:center;
}
.tz-pin .pin-ring{ fill:none; stroke:#F5E3C0; stroke-width:2.5; }
.tz-pin .pin-core{ fill:var(--pin, #000000); transition:r .2s ease; }
.tz-pin .pin-name{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:14px;
  fill:var(--ink); paint-order:stroke; stroke:#F5E3C0; stroke-width:4px;
  stroke-linejoin:round; pointer-events:none;
}
.tz-pin:hover .pin-core,
.tz-pin:focus-visible .pin-core{ r:11; }
.tz-pin:focus-visible .pin-ring{ stroke:var(--turmeric); stroke-width:3.5; }
.tz-pin.is-active .pin-core{ r:12; }
.tz-pin.is-active .pin-halo{ opacity:0.34; }
/* Planned sites read as outlines, not solid — they are not built yet. */
.tz-pin.is-planned .pin-core{ fill:#F5E3C0; stroke:var(--pin); stroke-width:3; stroke-dasharray:3.5 3; }

@keyframes pinPulse{ 0%{ transform:scale(1); opacity:0.3 } 70%{ transform:scale(2.1); opacity:0 } 100%{ transform:scale(2.1); opacity:0 } }
.tz-pin.is-active .pin-halo{ animation:pinPulse 2.4s ease-out infinite; }
@media (prefers-reduced-motion:reduce){ .tz-pin.is-active .pin-halo{ animation:none; } }

/* Map legend */
.tz-legend{
  position:absolute; left:1rem; bottom:1rem; z-index:3;
  background:rgba(245,227,192,0.94); backdrop-filter:blur(8px);
  border:0; border-radius:13px; padding:0.7rem 0.9rem;
  display:flex; flex-direction:column; gap:0.4rem;
}
.tz-legend div{
  display:flex; align-items:center; gap:0.5rem;
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.7rem; color:var(--ink);
}
.tz-legend .sw{ width:10px; height:10px; border-radius:50%; flex:none; }
.tz-legend .sw.planned{ background:#FFFFFF; border:0; }

/* Location panel */
.loc-panel{
  background:var(--white); border:0; border-radius:22px;
  padding:1.8rem 1.7rem; display:flex; flex-direction:column; gap:1rem;
  align-self:start; position:sticky; top:6.5rem;
  max-height:calc(100vh - 8rem); overflow-y:auto;
}
@media (max-width:960px){ .loc-panel{ position:static; max-height:none; } }

.loc-panel h3{
  font-family:'Quicksand', sans-serif; font-weight:500; font-size:1.55rem; line-height:1.15;
}
.loc-region{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.68rem;
  letter-spacing:0.13em; text-transform:uppercase; color:var(--terracotta);
}
.loc-badges{ display:flex; flex-wrap:wrap; gap:0.4rem; }
.loc-badge{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.66rem;
  letter-spacing:0.05em; padding:0.28rem 0.7rem; border-radius:999px;
  border:0; background:var(--cream-2); color:var(--ink);
}
.loc-badge.operating{ background:var(--green-soft); border-color:#F5E3C0; color:#000000; }
.loc-badge.commissioning{ background:var(--turmeric-soft); border-color:#F5E3C0; color:#000000; }
.loc-badge.planned{ background:#FFFFFF; border-color:#F5E3C0; color:#000000; }

.loc-headline{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.92rem; color:var(--green); }
.loc-panel p.loc-role{ font-size:0.9rem; line-height:1.62; color:var(--neutral); }

.loc-block{ padding-top:0.95rem; }
.loc-block h4{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.66rem;
  letter-spacing:0.13em; text-transform:uppercase; color:var(--neutral);
  margin-bottom:0.55rem;
}
.loc-block p{ font-size:0.87rem; line-height:1.6; color:var(--neutral); }
.loc-block p + p{ margin-top:0.5rem; }
.loc-chips{ display:flex; flex-wrap:wrap; gap:0.35rem; }
.loc-chip{
  display:inline-flex; font-family:'Quicksand',sans-serif; font-weight:600;
  font-size:0.71rem; background:var(--cream-2); color:var(--ink);
  padding:0.26rem 0.68rem; border-radius:999px; border:0;
}
.loc-chip.prod{ background:var(--green-soft); border-color:#F5E3C0; }

.loc-figs{ display:grid; grid-template-columns:1fr 1fr; gap:0.7rem; }
.loc-fig{
  background:var(--cream); border:0; border-radius:12px;
  padding:0.75rem 0.85rem;
}
.loc-fig .lf-val{ font-family:'Quicksand', sans-serif; font-size:1.35rem; color:var(--green); line-height:1.1; }
.loc-fig .lf-lab{ font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.66rem; color:var(--neutral); margin-top:0.2rem; line-height:1.4; }

/* Pin list — the accessible, always-visible way to reach every location.
   Also the primary control on small screens. */
.loc-list{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1.1rem; }
.loc-list button{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.78rem;
  padding:0.5rem 1rem; border-radius:999px; cursor:pointer;
  background:var(--white); border:0; color:var(--ink);
  display:inline-flex; align-items:center; gap:0.45rem;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}
.loc-list button .dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.loc-list button:hover{ border-color:#F5E3C0; }
.loc-list button[aria-pressed="true"]{ background:var(--green); border-color:var(--green); color:#FFFFFF; }

/* ==========================================================================
   4. CHARTS
   ========================================================================== */

.chart-card{
  background:var(--white); border:0; border-radius:18px;
  padding:1.7rem 1.6rem; display:flex; flex-direction:column; gap:0.9rem;
}
.chart-card h3{ font-family:'Quicksand', sans-serif; font-weight:500; font-size:1.25rem; }
.chart-card .ch-sub{ font-size:0.84rem; line-height:1.55; color:var(--neutral); }

.donut-wrap{ display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.donut-wrap svg{ flex:none; }
.donut-center{ font-family:'Quicksand', sans-serif; font-size:26px; fill:var(--green); }
.donut-sub{ font-family:'Quicksand',sans-serif; font-weight:600; font-size:9px; fill:var(--neutral); letter-spacing:0.08em; }
.donut-key{ display:flex; flex-direction:column; gap:0.55rem; }
.donut-key div{ display:flex; align-items:center; gap:0.55rem; font-size:0.85rem; color:var(--ink); }
.donut-key .sw{ width:11px; height:11px; border-radius:3px; flex:none; }
.donut-key small{ color:var(--neutral); font-size:0.78rem; }

.bars{ display:flex; flex-direction:column; gap:0.85rem; }
.bar-row .bar-top{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:0.8rem; margin-bottom:0.32rem;
}
.bar-row .bar-name{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.8rem; color:var(--ink); }
.bar-row .bar-num{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.78rem; color:var(--neutral); }
.bar-track{ height:10px; border-radius:999px; background:var(--cream-2); overflow:hidden; }
.bar-fill{
  height:100%; border-radius:999px; width:0;
  transition:width 1.1s cubic-bezier(.22,.9,.28,1);
}
.bar-row .bar-note{ font-size:0.76rem; color:var(--neutral); margin-top:0.3rem; line-height:1.5; }
@media (prefers-reduced-motion:reduce){ .bar-fill{ transition:none; } }

/* ==========================================================================
   5. CROPS
   ========================================================================== */

.crop-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
@media (max-width:980px){ .crop-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .crop-grid{ grid-template-columns:1fr; } }

.crop-card{
  background:var(--white); border:0; border-radius:20px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.crop-card:hover{ transform:translateY(-5px); box-shadow:var(--imp-shadow); border-color:#F5E3C0; }
.crop-media{ height:170px; position:relative; overflow:hidden; background:var(--cream-2); }
.crop-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.crop-card:hover .crop-media img{ transform:scale(1.05); }
.crop-media svg{ width:100%; height:100%; display:block; }
.crop-latin{
  position:absolute; left:0.9rem; bottom:0.75rem; z-index:2;
  font-family:'Quicksand', sans-serif; font-style:normal; font-size:0.79rem;
  color:#FFFFFF; text-shadow:0 1px 6px rgba(0,0,0,0.55);
}
/* Illustrated panels are light, so the botanical name needs ink, not white. */
.crop-latin.on-light{ color:var(--neutral); text-shadow:none; }
.loc-chip.indicative{ background:transparent; border-style:dashed; color:var(--neutral); }
.cr-hint{
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.63rem;
  letter-spacing:0.06em; text-transform:uppercase; color:#000000;
  align-self:center; margin-left:0.1rem;
}
.crop-body{ padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:0.6rem; flex:1; }
.crop-body h3{ font-family:'Quicksand', sans-serif; font-weight:500; font-size:1.28rem; }
.crop-row{ display:flex; gap:0.5rem; align-items:flex-start; }
.crop-row .cr-lab{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.63rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--neutral);
  flex:0 0 74px; padding-top:0.15rem;
}
.crop-row .cr-val{ font-size:0.84rem; line-height:1.55; color:var(--ink); flex:1; }
.crop-farmer{ font-size:0.83rem; line-height:1.58; color:var(--neutral); }
.crop-circ{
  font-size:0.79rem; line-height:1.55; color:#000000;
  background:var(--lime-soft); border-radius:11px; padding:0.6rem 0.8rem;
  border:0;
}
.crop-foot{ margin-top:auto; padding-top:0.7rem; display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; }

.crop-filters{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1.8rem; }

/* ==========================================================================
   6. FARM TO PRODUCT JOURNEY
   ========================================================================== */

.journey{ display:grid; grid-template-columns:repeat(6,1fr); gap:0.55rem; }
@media (max-width:1000px){ .journey{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .journey{ grid-template-columns:repeat(2,1fr); } }

.j-step{
  position:relative; text-align:left; cursor:pointer;
  background:var(--white); border:0; border-radius:15px;
  padding:1rem 0.95rem 1.05rem; font-family:inherit;
  display:flex; flex-direction:column; gap:0.45rem;
  transition:border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.j-step:hover{ border-color:#F5E3C0; transform:translateY(-3px); }
.j-step[aria-selected="true"]{ background:var(--green); border-color:var(--green); }
.j-step[aria-selected="true"] .j-num,
.j-step[aria-selected="true"] .j-title{ color:#FFFFFF; }
.j-step[aria-selected="true"] .j-dot{ background:var(--turmeric); }
.j-num{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.62rem;
  letter-spacing:0.12em; color:var(--neutral);
}
.j-title{ font-family:'Quicksand', sans-serif; font-weight:500; font-size:1.05rem; color:var(--ink); line-height:1.2; }
.j-dot{ width:10px; height:10px; border-radius:50%; background:var(--j-accent, var(--green)); }

.j-detail{
  margin-top:1.5rem; background:var(--white); border:0;
  border-radius:20px; padding:2rem 2.1rem;
  display:grid; grid-template-columns:1fr 1.15fr; gap:2.2rem; align-items:start;
}
@media (max-width:820px){ .j-detail{ grid-template-columns:1fr; gap:1.4rem; padding:1.5rem 1.4rem; } }
.j-detail h3{ font-family:'Quicksand', sans-serif; font-weight:500; font-size:1.7rem; line-height:1.15; }
.j-detail .j-summary{ font-size:0.98rem; line-height:1.65; color:var(--neutral); margin-top:0.7rem; }
.j-points{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.75rem; }
.j-points li{ display:flex; gap:0.7rem; align-items:flex-start; font-size:0.91rem; line-height:1.58; color:var(--ink); }
.j-points li::before{
  content:""; flex:0 0 7px; width:7px; height:7px; border-radius:50%;
  background:var(--turmeric); margin-top:0.55rem;
}
.j-fade{ animation:jFade .32s ease; }
@keyframes jFade{ from{ opacity:0; transform:translateY(7px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){ .j-fade{ animation:none; } }

/* ==========================================================================
   7. WOMEN & SOCIAL IMPACT
   ========================================================================== */

.pillar-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
@media (max-width:1040px){ .pillar-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .pillar-grid{ grid-template-columns:1fr; } }

.pillar{
  background:var(--white); border:0; border-radius:20px;
  padding:1.5rem 1.4rem; display:flex; flex-direction:column; gap:0.55rem;
  
  transition:transform .22s ease, box-shadow .22s ease;
}
.pillar:hover{ transform:translateY(-4px); box-shadow:var(--imp-shadow); }
.pillar h3{ font-family:'Quicksand', sans-serif; font-weight:500; font-size:1.13rem; line-height:1.25; }
.pillar p{ font-size:0.85rem; line-height:1.6; color:var(--neutral); flex:1; }

/* ==========================================================================
   8. FARMER VALUE — the problem strip
   ========================================================================== */

.prob-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
@media (max-width:760px){ .prob-strip{ grid-template-columns:1fr; } }
.prob{
  background:rgba(245,227,192,0.07); border:0;
  border-radius:17px; padding:1.6rem 1.5rem;
}
.prob .pv{
  font-family:'Quicksand', sans-serif; font-weight:500; font-size:2.2rem;
  color:var(--turmeric); line-height:1;
}
.prob .pl{ font-size:0.88rem; line-height:1.58; color:#F5E3C0; margin-top:0.6rem; }
.prob .pa{
  font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.66rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--turmeric); margin-top:0.7rem;
}

/* ==========================================================================
   9. B2B / B2C
   ========================================================================== */

.hybrid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media (max-width:860px){ .hybrid{ grid-template-columns:1fr; } }

.hy-card{
  border-radius:22px; overflow:hidden; border:0;
  background:var(--white); display:flex; flex-direction:column;
}
.hy-head{ padding:1.8rem 1.8rem 1.5rem; color:#FFFFFF; }
.hy-card.b2b .hy-head{ background:linear-gradient(150deg,#000000,#000000); }
.hy-card.b2c .hy-head{ background:linear-gradient(150deg,#D88F04,#D88F04); }
.hy-head .hy-eyebrow{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.66rem;
  letter-spacing:0.14em; text-transform:uppercase; opacity:0.82;
}
.hy-head h3{ font-family:'Quicksand', sans-serif; font-weight:500; font-size:1.7rem; margin-top:0.5rem; }
.hy-head p{ font-size:0.92rem; line-height:1.6; margin-top:0.7rem; opacity:0.93; max-width:42ch; }
.hy-flow{
  display:flex; align-items:center; gap:0.45rem; flex-wrap:wrap;
  margin-top:1.2rem; font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.72rem;
}
.hy-flow span{ background:rgba(255,255,255,0.16); padding:0.35rem 0.75rem; border-radius:999px; }
.hy-flow i{ font-style:normal; opacity:0.7; }
.hy-body{ padding:1.6rem 1.8rem 1.9rem; display:flex; flex-direction:column; gap:1rem; flex:1; }
.hy-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.6rem; }
.hy-list li{ display:flex; gap:0.65rem; align-items:flex-start; font-size:0.88rem; line-height:1.55; color:var(--neutral); }
.hy-list li svg{ flex:0 0 15px; width:15px; height:15px; margin-top:0.22rem; stroke-width:2.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.hy-card.b2b .hy-list li svg{ stroke:var(--green-2); }
.hy-card.b2c .hy-list li svg{ stroke:var(--mango); }
.hy-markets{ padding-top:1rem; margin-top:auto; }
.hy-markets h4{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.64rem;
  letter-spacing:0.13em; text-transform:uppercase; color:var(--neutral); margin-bottom:0.55rem;
}
.mkt-chip{
  display:inline-flex; font-family:'Quicksand',sans-serif; font-weight:600; font-size:0.72rem;
  padding:0.26rem 0.7rem; border-radius:999px; margin:0.15rem 0.3rem 0 0;
  background:var(--green-soft); color:#000000; border:0;
}
.mkt-chip.pipeline{ background:transparent; border:1px dashed #F5E3C0; color:var(--neutral); }

/* ==========================================================================
   10. INVESTOR VIEW
   ========================================================================== */

.inv-toggle{
  display:inline-flex; align-items:center; gap:0.55rem; cursor:pointer;
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.78rem;
  background:var(--white); border:0; color:var(--ink);
  padding:0.55rem 1.1rem; border-radius:999px;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.inv-toggle[aria-expanded="true"]{ background:var(--ink); border-color:var(--ink); color:var(--turmeric-soft); }
.inv-toggle svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease; }
.inv-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }

.inv-panel{ display:none; margin-top:2rem; }
.inv-panel.open{ display:block; animation:jFade .35s ease; }

.inv-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:1000px){ .inv-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .inv-grid{ grid-template-columns:1fr; } }
.inv-cell{
  background:#000000; border:0;
  border-radius:15px; padding:1.25rem 1.2rem;
}
.inv-cell .iv{ font-family:'Quicksand', sans-serif; font-weight:500; font-size:1.7rem; color:var(--turmeric); line-height:1.05; }
.inv-cell .il{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.72rem; color:#F5E3C0; margin-top:0.4rem; }
.inv-cell .id{ font-size:0.79rem; line-height:1.55; color:#D88F04; margin-top:0.35rem; }

.inv-cols{ display:grid; grid-template-columns:1fr 1fr; gap:2.2rem; margin-top:2.2rem; }
@media (max-width:860px){ .inv-cols{ grid-template-columns:1fr; gap:1.6rem; } }
.inv-cols h3{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.68rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--turmeric); margin-bottom:1rem;
}
.inv-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.9rem; }
.inv-list li{ font-size:0.9rem; line-height:1.6; color:#F5E3C0; display:flex; gap:0.7rem; align-items:flex-start; }
.inv-list li::before{ content:""; flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:var(--turmeric); margin-top:0.55rem; }
.inv-list li b{ color:#F5E3C0; font-weight:600; display:block; margin-bottom:0.15rem; font-family:'Quicksand',sans-serif; font-size:0.85rem; }

.inv-prop{
  margin-top:2.2rem; border:0;
  border-radius:18px; padding:1.7rem 1.7rem;
  background:#FFFFFF;
}
.inv-prop-figs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.2rem; }
@media (max-width:760px){ .inv-prop-figs{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .inv-prop-figs{ grid-template-columns:1fr; } }
.inv-prop-figs .pf .v{ font-family:'Quicksand', sans-serif; font-size:1.5rem; color:var(--turmeric); line-height:1.1; }
.inv-prop-figs .pf .l{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.72rem; color:#F5E3C0; margin-top:0.25rem; }
.inv-prop-figs .pf .n{ font-size:0.75rem; color:#D88F04; margin-top:0.2rem; line-height:1.45; }

.inv-locked{
  margin-top:2rem; border-radius:15px; padding:1.3rem 1.4rem;
  background:rgba(0,0,0,0.22); border:0;
  display:flex; gap:1rem; align-items:flex-start;
}
.inv-locked svg{ flex:0 0 20px; width:20px; height:20px; stroke:var(--turmeric); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; margin-top:0.15rem; }
.inv-locked p{ font-size:0.87rem; line-height:1.6; color:#F5E3C0; }
.inv-locked b{ color:#F5E3C0; font-weight:600; }

/* ==========================================================================
   11. DATA INTEGRITY FOOTER
   ========================================================================== */

.data-notice{
  background:var(--white); border:0; border-radius:18px;
  padding:1.8rem 1.9rem; display:grid; grid-template-columns:auto 1fr; gap:1.2rem;
}
@media (max-width:640px){ .data-notice{ grid-template-columns:1fr; } }
.data-notice .dn-ico{
  width:42px; height:42px; border-radius:12px; background:var(--green-soft);
  display:flex; align-items:center; justify-content:center;
}
.data-notice .dn-ico svg{ width:20px; height:20px; stroke:var(--green); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.data-notice h3{ font-family:'Quicksand', sans-serif; font-weight:500; font-size:1.2rem; margin-bottom:0.5rem; }
.data-notice p{ font-size:0.87rem; line-height:1.62; color:var(--neutral); }
.data-notice p + p{ margin-top:0.6rem; }
.dn-key{ display:flex; flex-wrap:wrap; gap:1.1rem; margin-top:0.9rem; }
.dn-key .dn-row{ display:flex; align-items:center; gap:0.6rem; font-size:0.85rem; color:var(--neutral); }
.dn-key .dn-row svg{ width:16px; height:16px; flex:none; fill:none; stroke:var(--green); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.dn-key .dn-row b{ color:var(--ink); font-weight:700; }
.data-notice{ display:block; }
.dn-key div{ display:flex; align-items:center; gap:0.45rem; font-size:0.8rem; color:var(--neutral); }

.dn-conflicts{
  margin-top:1.1rem; border:0; border-radius:13px;
  background:#FFFFFF; padding:0.85rem 1rem;
}
.dn-conflicts summary{
  cursor:pointer; font-family:'Quicksand',sans-serif; font-weight:700;
  font-size:0.79rem; color:#000000; line-height:1.5;
}
.dn-conflicts summary::marker{ color:var(--turmeric); }
.dn-conflict{ margin-top:0.85rem; padding-top:0.85rem; }
.dn-conflict h4{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.75rem;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); margin-bottom:0.45rem;
}
.dn-conflict p{ font-size:0.82rem; line-height:1.6; color:var(--neutral); }
.dn-conflict p + p{ margin-top:0.35rem; }
.dn-conflict b{ color:var(--ink); font-weight:600; }
.dn-conflict .dn-owner{
  font-family:'Quicksand',sans-serif; font-weight:700; font-size:0.7rem;
  color:var(--terracotta); margin-top:0.5rem;
}


/* ==========================================================================
   REFRESH: no standalone cards, no pill tags in the figures key, a plain divider
   ========================================================================== */
.data-notice .dn-ico{ background:none !important; width:auto !important; height:auto !important; }
.dn-key{ display:flex; flex-direction:column; gap:0.45rem; margin:0.9rem 0; font-size:0.85rem; color:var(--neutral); }
.dn-key .src-tag, .dn-key .status-tag{ background:none !important; border:0 !important; padding:0 !important; color:var(--ink); font-weight:700; }

/* Card source lines (Source: ...): a divider line above the text, no dot, no pill.
   The legend item in the data notice is excluded. */
.src-tag:not(.dn-key .src-tag){ display:block; background:none; border:0; border-top:1px solid #D9D9D9; border-radius:0; padding:0.7rem 0 0; margin-top:0.9rem; color:var(--neutral); }
.src-tag:not(.dn-key .src-tag)::before{ display:none; }

/* PLACEHOLDER DATA: hidden until the owner supplies the figures.
   The entries still exist in data/impact-data.js and data/ingredients.js.
   To show a metric again, remove its status "placeholder" in the data and delete this block. */
.metric.is-placeholder, .status-tag.placeholder, .tbu, .lf-val .tbu{ display:none !important; }


/* ==========================================================================
   HOW TO READ THESE FIGURES — panel layout (grey panel, figures across the top)
   ========================================================================== */
.data-notice{ background:#F5F5F5; border:0; border-radius:20px; padding:2.2rem 2.4rem; display:block; }
.data-notice .rd-title{ font-family:'Quicksand',sans-serif; font-weight:600; font-size:1.3rem; color:#000000; margin:0 0 1.2rem; }
.rd-body{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:2.4rem; align-items:start; }
.rd-text p{ font-size:0.9rem; line-height:1.66; color:#000000; }
.rd-text p + p{ margin-top:0.7rem; }
.rd-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0.9rem; }
.rd-stat{ display:flex; flex-direction:column; gap:0.5rem; padding:1.2rem 1.1rem; background:#FFFFFF; border:0; border-radius:14px; }
.rd-num{ font-family:'Quicksand',sans-serif; font-weight:700; font-size:2.4rem; line-height:1; color:#000000; }
.rd-stat.planned .rd-num{ color:#D88F04; }
.rd-stat.wait .rd-num{ color:#8A8A8A; }
.rd-lab{ font-size:0.8rem; line-height:1.45; color:#000000; }
.data-notice .dn-conflicts{ margin-top:1.4rem; }
.data-notice .dn-conflicts summary{ font-size:0.86rem; font-weight:600; color:#000000; cursor:pointer; }
.rd-foot{ margin-top:1.4rem; font-size:0.8rem; color:#000000; }
@media (max-width:820px){
  .rd-body{ grid-template-columns:1fr; gap:1.4rem; }
}
@media (max-width:520px){
  .rd-stats{ grid-template-columns:1fr; }
  .data-notice{ padding:1.6rem 1.3rem; }
}