/* Cocoa Empire Uganda — institutional / investor-grade origin platform */

:root {
  --cocoa: #3D1C08;
  --cocoa-deep: #2B1306;
  --cocoa-soft: #5A3015;
  --cream: #F8F5F1;
  --beige: #E8DED3;
  --beige-deep: #D9CDBE;
  --gold: #B8945A;
  --green: #2E4A35;
  --white: #FFFFFF;
  --ink: #1A1208;
  --muted: #6B5A4B;
  --rule: rgba(61, 28, 8, 0.12);
  --rule-strong: rgba(61, 28, 8, 0.22);

  --container: 1320px;
  --pad-x: clamp(20px, 4vw, 56px);

  --row: 56px;
  --row-tight: 44px;
  --density: 1;

  /* Typography scale */
  --t-mega: clamp(56px, 9vw, 132px);
  --t-display: clamp(40px, 5.4vw, 76px);
  --t-h1: clamp(32px, 3.6vw, 52px);
  --t-h2: clamp(22px, 2.2vw, 30px);
  --t-h3: 18px;
  --t-body: 16px;
  --t-small: 13px;
  --t-micro: 11px;

  font-feature-settings: "ss01", "kern";
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body[data-density="compact"] { --density: 0.78; }
body[data-density="comfy"]   { --density: 1.18; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ─── Page chrome ───────────────────────────────────────────────────────── */

.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(248, 245, 241, 0.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--rule);
}
.topbar.on-dark {
  background: rgba(43, 19, 6, 0.86);
  color: var(--cream);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.topbar-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 18px var(--pad-x);
  display: flex;
  align-items: center;
  gap: 40px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.brand-mark {
  display: block;
}
.brand-word {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.brand-word em {
  font-style: normal;
  font-weight: 300;
  opacity: 0.7;
}
.nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
  align-items: center;
}
.nav button {
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  padding: 8px 14px;
  font-size: 13px;
  letter-spacing: 0.04em;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  opacity: 0.72;
  transition: opacity .15s;
}
.nav button:hover { opacity: 1; }
.nav button[aria-current="true"] { opacity: 1; }
.nav button[aria-current="true"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -19px;
  height: 2px;
  background: currentColor;
}
.topbar.on-dark .nav button[aria-current="true"]::after { background: var(--gold); }
.nav-calc {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  padding: 9px 16px 9px 13px;
  border: 1px solid var(--gold);
  background: rgba(184, 148, 90, 0.10);
  color: var(--gold);
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.nav-calc:hover {
  background: var(--gold);
  color: var(--cocoa);
  transform: translateY(-1px);
}
.nav-calc svg { flex-shrink: 0; }
.topbar.on-dark .nav-calc {
  background: rgba(184, 148, 90, 0.14);
}

.cta {
  margin-left: 8px;
  padding: 10px 18px;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.cta:hover { background: var(--ink); color: var(--cream); }
.topbar.on-dark .cta:hover { background: var(--cream); color: var(--cocoa); }
.cta.solid {
  background: var(--cocoa);
  color: var(--cream);
  border-color: var(--cocoa);
}
.cta.solid:hover { background: var(--cocoa-deep); }

/* ─── Layout primitives ─────────────────────────────────────────────────── */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}
.section {
  padding-top: calc(120px * var(--density));
  padding-bottom: calc(120px * var(--density));
}
.section.tight {
  padding-top: calc(72px * var(--density));
  padding-bottom: calc(72px * var(--density));
}
.section.dark {
  background: var(--cocoa);
  color: var(--cream);
}
.section.dark-deep {
  background: var(--cocoa-deep);
  color: var(--cream);
}
.section.beige { background: var(--beige); }

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cocoa);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.section.dark .eyebrow,
.section.dark-deep .eyebrow { color: var(--gold); }

.display {
  font-size: var(--t-display);
  line-height: 0.98;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: pretty;
}
.display strong { font-weight: 700; }
.h1 {
  font-size: var(--t-h1);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: pretty;
}
.h1 strong { font-weight: 700; }
.h2 {
  font-size: var(--t-h2);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0;
}
.h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
}
.lede {
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  color: var(--muted);
  max-width: 60ch;
}
.section.dark .lede,
.section.dark-deep .lede { color: rgba(248, 245, 241, 0.74); }
.kicker {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.6;
}
.tabular { font-variant-numeric: tabular-nums; }

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}
.section.dark .rule,
.section.dark-deep .rule { background: rgba(255,255,255,.14); }

/* ─── Grids ─────────────────────────────────────────────────────────────── */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* ─── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  background: var(--cocoa);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(80px, 12vh, 140px) var(--pad-x) clamp(60px, 8vh, 100px);
  position: relative;
  z-index: 2;
}
.hero h1 {
  font-size: var(--t-mega);
  line-height: 0.92;
  font-weight: 200;
  letter-spacing: -0.035em;
  margin: 36px 0 0;
  max-width: 14ch;
  text-wrap: balance;
}
.hero h1 strong {
  font-weight: 700;
  display: block;
}
.hero h1 .gold { color: var(--gold); font-weight: 700; }
.hero-meta {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-top: 32px;
}
.hero-meta .cell .kicker { color: var(--gold); opacity: 0.9; }
.hero-meta .cell .figure {
  font-size: 38px;
  font-weight: 300;
  margin-top: 10px;
  letter-spacing: -0.02em;
}
.hero-meta .cell .figure strong { font-weight: 600; }
.hero-meta .cell .note {
  font-size: 12px;
  color: rgba(248,245,241,.6);
  margin-top: 4px;
}

.hero-pods {
  position: absolute;
  inset: 0;
  opacity: 0.10;
  pointer-events: none;
  z-index: 1;
}

/* ─── Stat ribbon ───────────────────────────────────────────────────────── */

.ribbon {
  background: var(--cream);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.ribbon-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px var(--pad-x);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.ticker {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  align-items: baseline;
}
.ticker .item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
}
.ticker .label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.ticker .v {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ticker .delta {
  font-size: 12px;
  color: var(--green);
  font-weight: 600;
}
.ticker .delta.neg { color: #8B2E2E; }

/* ─── Thesis block ──────────────────────────────────────────────────────── */

.thesis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.thesis .left { position: sticky; top: 100px; }
.thesis .right .item {
  padding: 32px 0;
  border-top: 1px solid var(--rule);
}
.thesis .right .item:last-child { border-bottom: 1px solid var(--rule); }
.thesis .right .item .num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--gold);
}
.thesis .right .item h3 {
  margin: 8px 0 12px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.thesis .right .item p {
  margin: 0;
  font-size: 16px;
  color: var(--muted);
  max-width: 52ch;
}

/* ─── How it works ──────────────────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.section.dark .steps,
.section.dark-deep .steps {
  border-color: rgba(255,255,255,.16);
}
.steps .step {
  padding: 48px 32px 56px;
  border-right: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  transition: background .3s ease;
  isolation: isolate;
}
.steps .step::before {
  content: attr(data-num);
  position: absolute;
  right: -14px;
  bottom: -56px;
  font-size: 220px;
  font-weight: 800;
  line-height: 1;
  color: currentColor;
  opacity: 0.045;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.06em;
  z-index: -1;
  transition: opacity .35s ease, transform .45s ease;
  transform-origin: bottom right;
}
.steps .step:hover {
  background: rgba(255, 255, 255, 0.025);
}
.section.beige .steps .step:hover {
  background: rgba(61, 28, 8, 0.035);
}
.steps .step:hover::before {
  opacity: 0.08;
  transform: scale(1.05);
}
.steps .step:first-child { padding-left: 0; }
.steps .step:last-child  { padding-right: 0; }
.section.dark .steps .step,
.section.dark-deep .steps .step {
  border-right-color: rgba(255,255,255,.16);
}
.steps .step:last-child { border-right: 0; }

.steps .step-rule {
  width: 36px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 28px;
  transition: width .35s cubic-bezier(.2, .7, .2, 1);
}
.steps .step:hover .step-rule { width: 72px; }

.steps .step-numeral {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.85;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}
.steps .step-meta {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.6;
  margin-bottom: 28px;
}
.steps .step h4 {
  margin: 0 0 14px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-wrap: balance;
}
.steps .step p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}
.section.dark .steps .step p,
.section.dark-deep .steps .step p { color: rgba(248,245,241,.72); }

/* ─── Lots table ────────────────────────────────────────────────────────── */

.lots-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0;
  flex-wrap: wrap;
}
.lots-controls .filter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin-right: 8px;
}
.chip {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.chip:hover { border-color: var(--cocoa); }
.chip[aria-pressed="true"] {
  background: var(--cocoa);
  color: var(--cream);
  border-color: var(--cocoa);
}
.lots-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--rule-strong);
  padding: 7px 12px;
  font-size: 12px;
  min-width: 220px;
}
.lots-search input {
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  flex: 1;
  color: inherit;
}

.lots-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.lots-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 12px;
  border-bottom: 1px solid var(--rule-strong);
}
.lots-table tbody td {
  padding: 18px 12px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.lots-table tbody tr {
  cursor: pointer;
  transition: background .12s;
}
.lots-table tbody tr:hover { background: rgba(61,28,8,0.035); }
.lots-table tbody tr.active { background: var(--beige); }
.lots-table .lot-id { font-weight: 600; letter-spacing: 0.04em; }
.lots-table .lot-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  letter-spacing: 0.03em;
}
.lots-table .right { text-align: right; }
.lots-table .num { font-weight: 600; }
.lots-table .progress {
  width: 100%;
  height: 4px;
  background: var(--beige);
  position: relative;
}
.lots-table .progress > i {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--cocoa);
}
.lots-table .progress.green > i { background: var(--green); }
.lots-table .progress.gold  > i { background: var(--gold); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.status.accepted { color: var(--green); }
.status.financing { color: var(--gold); }
.status.intake { color: var(--cocoa-soft); }
.status.shipped { color: #2d4a7a; }
.status.settled { color: var(--muted); }

/* ─── Lot detail drawer ─────────────────────────────────────────────────── */

.detail {
  background: var(--white);
  border: 1px solid var(--rule-strong);
  padding: 32px;
  margin-top: 16px;
}
.detail header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 24px;
  margin-bottom: 24px;
}
.detail header h3 {
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.01em;
  margin: 0;
}
.detail header h3 strong { font-weight: 700; }
.detail-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
}
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.specs .row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
}
.specs .row .k {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.specs .row .v { font-weight: 600; }

/* ─── Photo / placeholder slots ─────────────────────────────────────────── */

.photo {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      var(--beige) 0 8px,
      var(--beige-deep) 8px 16px);
  border: 1px solid var(--rule-strong);
  display: flex;
  align-items: flex-end;
  padding: 16px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cocoa);
}
.photo.dark {
  background:
    repeating-linear-gradient(135deg,
      var(--cocoa-deep) 0 8px,
      #341806 8px 16px);
  color: var(--gold);
  border-color: rgba(255,255,255,.14);
}
.photo .tag {
  background: var(--cream);
  padding: 4px 8px;
  font-weight: 600;
}
.photo.dark .tag { background: var(--cocoa-deep); color: var(--gold); }

/* ─── Map ───────────────────────────────────────────────────────────────── */

.map-card {
  background: var(--cocoa-deep);
  color: var(--cream);
  padding: 32px;
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.map-card svg { width: 100%; height: 100%; display: block; }
.map-pins {
  position: absolute;
  inset: 32px;
}
.map-pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.map-pin .dot {
  width: 10px;
  height: 10px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(184, 148, 90, 0.18);
}
.map-pin .label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cream);
  white-space: nowrap;
  background: rgba(43, 19, 6, 0.7);
  padding: 3px 7px;
}
.map-pin[data-active="true"] .dot {
  background: var(--cream);
  box-shadow: 0 0 0 5px rgba(255,255,255,0.2);
}

/* ─── Timeline (track screen) ──────────────────────────────────────────── */

.timeline {
  position: relative;
  padding-left: 40px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--rule-strong);
}
.timeline .node {
  position: relative;
  padding: 0 0 36px;
  cursor: pointer;
}
.timeline .node::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--rule-strong);
  box-sizing: border-box;
}
.timeline .node.done::before {
  background: var(--green);
  border-color: var(--green);
}
.timeline .node.current::before {
  background: var(--cocoa);
  border-color: var(--cocoa);
  box-shadow: 0 0 0 5px rgba(61,28,8,0.12);
}
.timeline .node.future::before { background: var(--cream); }
.timeline .node .stamp {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.timeline .node h4 {
  margin: 4px 0 6px;
  font-size: 18px;
  font-weight: 600;
}
.timeline .node p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  max-width: 56ch;
}
.timeline .node.current h4 { color: var(--cocoa); }

/* ─── Financing terms ───────────────────────────────────────────────────── */

.terms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--rule-strong);
}
.terms-grid .tile {
  padding: 36px 28px;
  border-right: 1px solid var(--rule);
  background: var(--white);
  position: relative;
}
.terms-grid .tile:last-child { border-right: 0; }
.terms-grid .tile.featured {
  background: var(--cocoa);
  color: var(--cream);
}
.terms-grid .tile .name {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
}
.terms-grid .tile h3 {
  margin: 14px 0 4px;
  font-size: 36px;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.terms-grid .tile h3 strong { font-weight: 700; }
.terms-grid .tile .unit {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 24px;
}
.terms-grid .tile.featured .unit { color: rgba(248,245,241,.6); }
.terms-grid .tile ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.terms-grid .tile li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.terms-grid .tile li::before {
  content: "—";
  color: var(--gold);
  font-weight: 600;
}

/* ─── KPIs ──────────────────────────────────────────────────────────────── */

.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.kpis .k {
  padding: 32px 24px;
  border-right: 1px solid var(--rule);
}
.kpis .k:first-child { padding-left: 0; }
.kpis .k:last-child  { padding-right: 0; border-right: 0; }
.kpis .k .lbl {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.kpis .k .v {
  font-size: 44px;
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-top: 14px;
}
.kpis .k .v strong { font-weight: 600; }
.kpis .k .sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

/* ─── Quote ─────────────────────────────────────────────────────────────── */

.quote {
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.12;
  font-weight: 300;
  letter-spacing: -0.015em;
  max-width: 22ch;
  text-wrap: balance;
}
.quote strong { font-weight: 700; }
.quote::before {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 32px;
}

/* ─── Footer ────────────────────────────────────────────────────────────── */

.footer {
  background: var(--cocoa-deep);
  color: var(--cream);
  margin-top: auto;
  position: relative;
  overflow: hidden;
}
/* footer silhouette removed */
.footer-inner { position: relative; z-index: 1; }
.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 80px var(--pad-x) 40px;
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer h5 {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.footer ul a { opacity: 0.74; transition: opacity .15s; }
.footer ul a:hover { opacity: 1; }
.footer-statement {
  font-size: 22px;
  font-weight: 300;
  letter-spacing: -0.005em;
  max-width: 28ch;
  line-height: 1.25;
}
.footer-statement strong { font-weight: 700; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248,245,241,.5);
}

/* ─── Buttons + misc ────────────────────────────────────────────────────── */

.button-row {
  display: flex;
  gap: 12px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background .2s, color .2s;
  border-radius: 0;
}
.btn:hover { background: currentColor; }
.btn:hover span { color: var(--cocoa); }
.btn.primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--cocoa);
}
.btn.primary:hover {
  background: var(--cream);
  border-color: var(--cream);
}
.btn.primary:hover span { color: var(--cocoa); }
.btn.solid-dark {
  background: var(--cocoa);
  border-color: var(--cocoa);
  color: var(--cream);
}
.btn.solid-dark:hover { background: var(--cocoa-deep); border-color: var(--cocoa-deep); color: var(--cream); }
.btn .arrow { display: inline-block; transform: translateY(-1px); }

/* ─── Decorative pod motif ──────────────────────────────────────────────── */

.pod-corner {
  position: absolute;
  pointer-events: none;
  opacity: 0.07;
  z-index: 0;
}
.pod-corner.tl { top: -60px; left: -80px; transform: rotate(-12deg); }
.pod-corner.br { bottom: -80px; right: -80px; transform: rotate(190deg); }

/* ─── Cocoa-pod companion cursor ───────────────────────────────────────── */

.ce-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  pointer-events: none;
  z-index: 2147483645;
  will-change: transform, opacity;
  opacity: 0;
  transition: opacity .25s ease;
  mix-blend-mode: normal;
}
.ce-cursor img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));
  transition: filter .25s ease;
}
.ce-cursor.hover img {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.30));
}
.ce-cursor.on-dark img {
  /* Brown pod becomes cream on dark backgrounds. */
  filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  opacity: 0.92;
}
.ce-cursor.on-dark.hover img {
  filter: brightness(0) invert(1) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
  opacity: 1;
}

/* Hide companion on coarse pointers (mobile/tablet). */
@media (pointer: coarse), (hover: none) {
  .ce-cursor { display: none !important; }
}

/* ─── Cycle animation (financing) ───────────────────────────────────────── */

.cycle-anim {
  margin-top: 56px;
  color: inherit;
}
.cycle-track-wrap {
  position: relative;
  padding: 24px 0;
}
.cycle-track {
  position: relative;
  height: 64px;
  margin: 0;
}
.cycle-line {
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-50%);
}
.cycle-line-fill {
  position: absolute;
  top: 50%;
  left: 10%;
  height: 2px;
  background: var(--gold);
  transform: translateY(-50%);
  transition: width 1.4s cubic-bezier(.5, .05, .35, 1);
  box-shadow: 0 0 12px rgba(184, 148, 90, 0.35);
}
.cycle-stops {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  justify-items: center;
}
.cycle-stop {
  appearance: none;
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cocoa);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(248, 245, 241, 0.55);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.35s ease, border-color 0.35s ease,
              transform 0.4s cubic-bezier(.3, .8, .3, 1.1), color 0.35s ease;
}
.cycle-stop .num {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.cycle-stop:hover { border-color: rgba(255, 255, 255, 0.5); }
.cycle-stop.is-done {
  border-color: var(--gold);
  color: var(--gold);
}
.cycle-stop.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--cocoa);
  transform: scale(1.18);
  box-shadow: 0 0 0 6px rgba(184, 148, 90, 0.14),
              0 0 32px rgba(184, 148, 90, 0.25);
}
.cycle-stop.is-active .num { font-weight: 800; }

.cycle-pod {
  position: absolute;
  top: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  pointer-events: none;
  transition: left 1.4s cubic-bezier(.5, .05, .35, 1);
  z-index: 2;
}
.cycle-pod img {
  width: 100%;
  height: 100%;
  display: block;
  filter: brightness(0) invert(1)
          drop-shadow(0 0 16px rgba(184, 148, 90, 0.6));
  opacity: 0;
  animation: pod-wobble 4s ease-in-out infinite;
}
.cycle-anim:hover .cycle-pod img,
.cycle-pod img { opacity: 0.95; }
@keyframes pod-wobble {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50%      { transform: rotate(6deg) translateY(-3px); }
}

/* Phase detail rail */
.cycle-details {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 32px;
  padding: 0;
}
.cycle-detail {
  position: relative;
  text-align: center;
  padding: 26px 14px 26px;
  margin: 0 12px;
  opacity: 0.45;
  transform: translateY(4px);
  transition: opacity 0.45s ease, transform 0.45s ease,
              background 0.45s ease, border-color 0.45s ease,
              box-shadow 0.45s ease;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
}
.cycle-detail.is-active {
  opacity: 1;
  transform: translateY(-4px);
  background: rgba(184, 148, 90, 0.07);
  border-color: rgba(184, 148, 90, 0.55);
  box-shadow:
    0 0 0 1px rgba(184, 148, 90, 0.18),
    0 18px 40px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.cycle-detail.is-active::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 2px;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(184, 148, 90, 0.6);
}
.cycle-detail .k {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
}
.cycle-detail h4 {
  margin: 14px 0 10px;
  font-size: 19px;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.cycle-detail p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(248, 245, 241, 0.7);
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
}
.cycle-detail .money {
  margin-top: 16px;
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border: 1px solid rgba(184, 148, 90, 0.4);
  border-radius: 2px;
}

/* Calculator */
.calc {
  margin-top: 88px;
}
.calc-head {
  text-align: center;
  margin: 0 auto 40px;
  max-width: 56ch;
}
.calc-head .eyebrow { color: var(--gold); justify-content: center; }
.calc-head .eyebrow::before,
.calc-head .eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.calc-title {
  margin: 18px 0 12px;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--cream);
}
.calc-title strong { font-weight: 700; }
.calc-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(248, 245, 241, 0.65);
}

.calc-input {
  max-width: 760px;
  margin: 0 auto 56px;
  padding: 36px 44px 30px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 2px;
}
.calc-amount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}
.calc-step {
  appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: var(--cream);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  font-family: inherit;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calc-step:hover {
  border-color: var(--gold);
  background: rgba(184, 148, 90, 0.08);
  color: var(--gold);
}
.calc-amount {
  flex: 1;
  text-align: center;
}
.calc-amount .v {
  display: block;
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}
.calc-amount .lbl {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(248, 245, 241, 0.5);
}

.calc-slider {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--gold) 0%,
    var(--gold) var(--pct, 0%),
    rgba(255, 255, 255, 0.16) var(--pct, 0%),
    rgba(255, 255, 255, 0.16) 100%);
  outline: none;
  margin-top: 12px;
}
.calc-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
  border-radius: 999px;
}
.calc-slider::-moz-range-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}
.calc-slider::-moz-range-progress {
  height: 4px;
  background: var(--gold);
  border-radius: 999px;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--cocoa-deep);
  box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(184, 148, 90, 0.4);
  cursor: pointer;
  margin-top: -9px;
}
.calc-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid var(--cocoa-deep);
  box-shadow: 0 0 0 1px var(--gold), 0 0 18px rgba(184, 148, 90, 0.4);
  cursor: pointer;
}
.calc-scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(248, 245, 241, 0.45);
  font-variant-numeric: tabular-nums;
}

/* Scenario tiles */
.calc-scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.calc-scen {
  position: relative;
  padding: 36px 32px 32px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 2px;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.calc-scen:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.04);
}
.calc-scen.is-base {
  background: rgba(184, 148, 90, 0.10);
  border-color: var(--gold);
  box-shadow:
    0 0 0 1px rgba(184, 148, 90, 0.25),
    0 24px 60px rgba(0, 0, 0, 0.3);
}
.calc-scen.is-base::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 2px;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(184, 148, 90, 0.6);
}
.calc-flag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--cocoa);
  padding: 4px 14px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.calc-scen-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
}
.calc-scen .kicker {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
}
.calc-cyc {
  font-size: 24px;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.calc-cyc span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(248, 245, 241, 0.45);
  margin-left: 4px;
}
.calc-pct {
  font-size: clamp(56px, 6vw, 88px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.calc-pct .unit {
  font-size: 28px;
  font-weight: 600;
  opacity: 0.7;
}
.calc-scen.is-base .calc-pct { color: var(--gold); }
.calc-pct-lbl {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(248, 245, 241, 0.55);
}
.calc-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  margin: 28px 0 18px;
}
.calc-scen.is-base .calc-divider { background: rgba(184, 148, 90, 0.3); }
.calc-yield-row, .calc-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  font-variant-numeric: tabular-nums;
}
.calc-yield-row .k, .calc-total-row .k {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(248, 245, 241, 0.55);
}
.calc-yield-row .v {
  font-size: 16px;
  font-weight: 600;
  color: var(--gold);
}
.calc-total-row .v {
  font-size: 22px;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.005em;
}
.calc-scen.is-base .calc-total-row .v { color: var(--gold); }

.calc-foot {
  margin: 32px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(248, 245, 241, 0.5);
  text-align: center;
  max-width: 80ch;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 980px) {
  .calc-scenarios { grid-template-columns: 1fr; gap: 16px; }
  .calc-input { padding: 24px; }
}

/* Math summary (legacy, kept for reference if used elsewhere) */
.cycle-math {
  margin-top: 72px;
  padding: 44px 56px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1.2fr;
  gap: 36px;
  align-items: center;
}
.cycle-math-cell {
  text-align: left;
}
.cycle-math-cell.result { text-align: right; }
.cycle-math .v {
  font-size: 84px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.88;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.cycle-math .v .unit {
  font-size: 28px;
  opacity: 0.7;
  font-weight: 600;
  margin-left: 2px;
}
.cycle-math .lbl {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(248, 245, 241, 0.55);
}
.cycle-math .op {
  font-size: 44px;
  font-weight: 200;
  color: var(--gold);
  text-align: center;
}
.cycle-math .result .v { color: var(--gold); }
.cycle-math .result .lbl { color: var(--gold); }

.cycle-fineprint {
  margin: 32px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(248, 245, 241, 0.65);
  max-width: 78ch;
}

@media (max-width: 980px) {
  .cycle-details { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .cycle-math { grid-template-columns: 1fr; gap: 18px; padding: 28px; text-align: center; }
  .cycle-math-cell, .cycle-math-cell.result { text-align: center; }
  .cycle-math .op { font-size: 32px; }
}

/* ─── Brand wordmark marquee ───────────────────────────────────────────── */

.market-section { background: var(--white); }
.market-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: end;
  margin-bottom: 56px;
}
.market-sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 48ch;
}
.market-foot {
  margin: 40px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-align: center;
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}

.brand-marquee {
  position: relative;
  overflow: hidden;
  background: transparent;
  mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
}
.brand-track {
  display: flex;
  width: max-content;
  animation: brand-marquee 60s linear infinite;
}
.brand-marquee:hover .brand-track,
.brand-track:hover { animation-play-state: paused; }
@keyframes brand-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.brand-cell {
  flex: 0 0 auto;
  height: 140px;
  padding: 0 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--rule);
}
.brand-mark-text {
  font-family: "Raleway", sans-serif;
  font-size: 28px;
  color: var(--cocoa);
  white-space: nowrap;
  line-height: 1;
  transition: opacity 0.25s ease, color 0.25s ease;
  opacity: 0.55;
}
.brand-mark-img {
  height: 64px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  display: block;
  filter: grayscale(1) brightness(0.7) contrast(1.05);
  transition: filter 0.3s ease, transform 0.3s ease;
  opacity: 0.78;
}
.brand-cell:hover .brand-mark-img {
  filter: none;
  opacity: 1;
  transform: scale(1.06);
}
.brand-cell:hover .brand-mark-text {
  opacity: 1;
  color: var(--cocoa-deep);
}
.brand-mark-text.upper { text-transform: uppercase; }

@media (max-width: 980px) {
  .market-head { grid-template-columns: 1fr; gap: 24px; }
  .brand-cell { padding: 0 32px; height: 110px; }
  .brand-mark-text { font-size: 22px; }
}

/* ─── Quote section with photo background ──────────────────────────────── */

.quote-bg {
  position: relative;
  overflow: hidden;
  background: var(--cocoa-deep);
}
.quote-bg image-slot { z-index: 0; }
/* Two veils: a strong cocoa-tinted dim across the whole, then a
   left-to-right gradient that keeps the headline panel rich-dark and
   lets the bean texture show through on the right. The bean photo is
   warm-brown so it blends with the cocoa palette naturally. */
.quote-bg-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.92) 0%,
      rgba(20, 9, 3, 0.72) 30%,
      rgba(20, 9, 3, 0.50) 55%,
      rgba(20, 9, 3, 0.38) 100%),
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.25) 0%,
      transparent 30%,
      rgba(20, 9, 3, 0.30) 100%);
}
.quote-bg-inner .quote {
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}
.quote-bg-inner .lede {
  color: rgba(248, 245, 241, 0.88);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.quote-bg-inner .kicker {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* ─── Origin story full-bleed band ──────────────────────────────────────── */

.origin-story {
  position: relative;
  min-height: 680px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--cocoa-deep);
  color: var(--cream);
}
.origin-story image-slot {
  z-index: 0;
}
/* Default state when no photo dropped — a textured cocoa surface so the
   band reads as intentional, not broken. */
.origin-story image-slot::part(empty),
.origin-story image-slot:not([data-filled]) {
  background:
    radial-gradient(circle at 30% 40%, rgba(184, 148, 90, 0.10) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(46, 74, 53, 0.25) 0%, transparent 60%),
    linear-gradient(160deg, var(--cocoa-deep) 0%, var(--cocoa) 100%);
}
/* Layered veil tuned for a right-weighted hero subject (cocoa pod on
   the right): heavier dark on the left where the headline sits, very
   light dim on the right to let the subject shine, plus a top-down
   gradient to anchor the kicker and a bottom gradient for stats row. */
.origin-story-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* left-to-right copy block */
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.88) 0%,
      rgba(20, 9, 3, 0.62) 28%,
      rgba(20, 9, 3, 0.18) 50%,
      rgba(20, 9, 3, 0.05) 70%,
      rgba(20, 9, 3, 0.20) 100%),
    /* gentle top + bottom darkening */
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.35) 0%,
      rgba(20, 9, 3, 0.10) 30%,
      rgba(20, 9, 3, 0.20) 65%,
      rgba(20, 9, 3, 0.70) 100%);
  pointer-events: none;
}
.origin-story-inner {
  position: relative;
  z-index: 2;
  padding-top: 140px;
  padding-bottom: 80px;
  width: 100%;
}
.origin-story-kicker {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.6);
}
.origin-story-kicker::before {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.origin-story-headline {
  margin: 0;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 16ch;
  color: var(--cream);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}
.origin-story-headline strong {
  font-weight: 700;
  color: var(--gold);
}
.origin-story-headline em {
  font-style: normal;
  font-weight: 700;
  color: var(--cream);
  background: linear-gradient(120deg, transparent 0 30%, rgba(184,148,90,0.32) 30% 100%);
  padding: 0 8px;
}
.origin-story-meta {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  padding-top: 28px;
  max-width: 880px;
}
.origin-story-meta .cell .k {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.origin-story-meta .cell .v {
  margin-top: 8px;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}
@media (max-width: 980px) {
  .origin-story { min-height: 560px; }
  .origin-story-veil {
    background:
      linear-gradient(180deg,
        rgba(20, 9, 3, 0.45) 0%,
        rgba(20, 9, 3, 0.30) 40%,
        rgba(20, 9, 3, 0.85) 100%);
  }
  .origin-story-meta { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* CTA below 4 cards → deep control screen */
.of-cta {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.of-cta-btn {
  padding: 18px 30px;
  font-size: 13px;
  letter-spacing: 0.18em;
}
.of-cta-sub {
  margin: 0;
  font-size: 13px;
  color: rgba(248, 245, 241, 0.55);
  max-width: 56ch;
  letter-spacing: 0;
}

/* Back link on the Control screen */
.control-back {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--gold);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  margin-bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.control-back:hover { opacity: 1; transform: translateX(-3px); }

/* ─── Operating flow + accordion ─────────────────────────────────────────── */

.operating-flow .of-head { max-width: 100%; }
.operating-flow .of-subhead {
  font-size: 20px;
  line-height: 1.45;
  font-weight: 400;
  color: rgba(248, 245, 241, 0.82);
  max-width: 56ch;
  margin: 28px 0 0;
  text-wrap: pretty;
}
.operating-flow .of-intro {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(248, 245, 241, 0.65);
  max-width: 70ch;
  margin: 20px 0 0;
}

.flow-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 72px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.flow-card {
  padding: 44px 28px 48px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease;
  isolation: isolate;
}
.flow-card:last-child { border-right: 0; }
.flow-card:hover { background: rgba(255, 255, 255, 0.03); }
.flow-card::before {
  content: attr(data-num);
  position: absolute;
  right: -18px;
  bottom: -64px;
  font-size: 240px;
  font-weight: 800;
  line-height: 1;
  color: var(--cream);
  opacity: 0.035;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.06em;
  z-index: -1;
  transition: opacity 0.35s ease, transform 0.5s ease;
  transform-origin: bottom right;
}
.flow-card:hover::before {
  opacity: 0.07;
  transform: scale(1.06);
}
.flow-rule {
  width: 36px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 24px;
  transition: width 0.4s cubic-bezier(.2, .7, .2, 1);
}
.flow-card:hover .flow-rule { width: 72px; }
.flow-num {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.flow-k {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.6;
  margin-bottom: 24px;
}
.flow-t {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-wrap: balance;
  color: var(--cream);
}
.flow-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(248, 245, 241, 0.72);
}

/* Accordion head */
.of-acc-head {
  margin-top: 120px;
  padding-bottom: 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: end;
}
.of-acc-headline {
  margin: 16px 0 0;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--cream);
}
.of-acc-headline strong { font-weight: 700; }
.of-acc-sub {
  margin: 0;
  font-size: 14px;
  color: rgba(248, 245, 241, 0.65);
  max-width: 36ch;
  line-height: 1.55;
  letter-spacing: 0;
}

/* Accordion */
.acc {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.acc-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  transition: background 0.25s ease;
}
.acc-item:hover { background: rgba(255, 255, 255, 0.02); }
.acc-item.open  { background: rgba(255, 255, 255, 0.03); }

.acc-row {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  color: inherit;
  display: grid;
  grid-template-columns: 88px 1fr 36px;
  gap: 24px;
  align-items: center;
  padding: 28px 8px 28px 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: padding 0.25s ease;
}
.acc-item.open .acc-row { padding-left: 16px; padding-top: 32px; padding-bottom: 24px; }
.acc-n {
  font-size: 28px;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: font-size 0.3s ease, transform 0.3s ease;
}
.acc-item.open .acc-n {
  font-size: 36px;
  transform: translateX(-2px);
}
.acc-h {
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--cream);
  transition: color 0.2s ease;
}
.acc-item:hover .acc-h { color: var(--gold); }
.acc-item.open  .acc-h { color: var(--cream); }

/* Toggle: plus turns to minus by hiding the vertical bar. */
.acc-toggle {
  position: relative;
  width: 32px; height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease, transform 0.4s cubic-bezier(.2,.7,.2,1), background 0.25s ease;
  flex-shrink: 0;
  justify-self: end;
}
.acc-item:hover .acc-toggle { border-color: rgba(255, 255, 255, 0.5); }
.acc-item.open  .acc-toggle {
  border-color: var(--gold);
  background: rgba(184, 148, 90, 0.08);
  transform: rotate(180deg);
}
.acc-toggle .bar {
  position: absolute;
  background: var(--cream);
  transition: opacity 0.3s ease, background 0.3s ease;
}
.acc-toggle .bar.h { width: 12px; height: 1.5px; }
.acc-toggle .bar.v { width: 1.5px; height: 12px; }
.acc-item.open .acc-toggle .bar.v { opacity: 0; }
.acc-item.open .acc-toggle .bar { background: var(--gold); }

/* Body (animated via grid-template-rows). */
.acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(.2, .7, .2, 1);
}
.acc-item.open .acc-body { grid-template-rows: 1fr; }
.acc-body > .inner { overflow: hidden; min-height: 0; }
.acc-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding: 12px 0 56px;
  padding-left: 104px;
  position: relative;
}

.acc-stage {
  position: relative;
}
.acc-mega {
  position: absolute;
  top: -36px;
  left: -120px;
  font-size: 280px;
  font-weight: 800;
  line-height: 0.82;
  letter-spacing: -0.07em;
  color: var(--gold);
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.acc-item.open .acc-mega { animation: acc-mega-in 0.9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes acc-mega-in {
  from { opacity: 0; transform: translateX(-32px) scale(0.94); }
  to   { opacity: 0.10; transform: translateX(0) scale(1); }
}
.acc-mega-meta {
  position: relative;
  z-index: 1;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 16px;
}
.acc-title {
  position: relative;
  z-index: 1;
  margin: 0 0 24px;
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--cream);
  max-width: 26ch;
  text-wrap: balance;
}
.acc-item.open .acc-title { animation: acc-slide-up 0.55s 0.08s cubic-bezier(.2,.7,.2,1) both; }
.acc-explain {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 15.5px;
  color: rgba(248, 245, 241, 0.82);
  line-height: 1.7;
  max-width: 56ch;
}
.acc-item.open .acc-explain { animation: acc-slide-up 0.55s 0.18s cubic-bezier(.2,.7,.2,1) both; }
.acc-cap {
  float: left;
  font-size: 64px;
  line-height: 0.85;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--gold);
  padding: 6px 14px 0 0;
  margin-top: 2px;
  font-family: "Raleway", sans-serif;
}
@keyframes acc-slide-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.acc-pull {
  position: relative;
  z-index: 1;
  margin-top: 32px;
  padding: 24px 28px;
  border-left: 2px solid var(--gold);
  background: rgba(184, 148, 90, 0.06);
  font-size: 19px;
  font-weight: 300;
  letter-spacing: -0.005em;
  color: var(--cream);
  line-height: 1.4;
  max-width: 52ch;
  clear: left;
}
.acc-pull strong { font-weight: 700; color: var(--gold); }

.acc-photo-wrap {
  position: relative;
  z-index: 1;
  margin-top: 36px;
  max-width: 480px;
  clear: left;
}
.acc-item.open .acc-photo-wrap { animation: acc-slide-up 0.55s 0.28s cubic-bezier(.2,.7,.2,1) both; }
.acc-photo-cap {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(248, 245, 241, 0.55);
}
.acc-photo-cap .acc-photo-n {
  color: var(--gold);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
}

.acc-right {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.acc-card {
  position: relative;
  padding: 28px 30px 30px;
  background: var(--cocoa);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 2px;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.acc-card:hover {
  background: var(--cocoa-soft);
  border-color: rgba(184, 148, 90, 0.4);
  transform: translateY(-2px);
}
.acc-card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.acc-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(184, 148, 90, 0.10);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.acc-card-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
.acc-card-icon.shield svg {
  width: 26px;
  height: 26px;
}
.acc-card:hover .acc-card-icon {
  transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(184, 148, 90, 0.10);
}
.acc-card-lbl {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--cream);
  line-height: 1.1;
}
.acc-card-meta {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(248, 245, 241, 0.5);
}

.acc-controls-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}
.acc-controls-grid li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--cream);
  letter-spacing: -0.005em;
}
.acc-ctrl-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(184, 148, 90, 0.18);
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 1px;
}
.acc-ctrl-tick svg { width: 13px; height: 13px; display: block; }

.acc-risks-card {
  background: linear-gradient(
    155deg,
    #2E4A35 0%,
    #1F3326 100%);
  border-color: rgba(46, 74, 53, 0.7);
  position: relative;
  overflow: hidden;
}
.acc-risks-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 100% 0%,
    rgba(107, 142, 120, 0.30) 0%,
    transparent 55%);
  pointer-events: none;
}
.acc-risks-card:hover {
  background: linear-gradient(
    155deg,
    #355A40 0%,
    #243B2C 100%);
  border-color: #4F7560;
  transform: translateY(-2px);
}
.acc-risks-card > * { position: relative; z-index: 1; }
.acc-risks-card .acc-card-icon.shield {
  border-color: #6B8E78;
  background: rgba(46, 74, 53, 0.45);
  color: #B8D4BF;
}
.acc-risks-card:hover .acc-card-icon {
  box-shadow: 0 0 0 8px rgba(46, 74, 53, 0.20);
}
.acc-risks-card .acc-card-lbl { color: #DCE9DF; }
.acc-risks-card .acc-card-meta { color: rgba(220, 233, 223, 0.65); }
.acc-risks {
  margin: 0;
  font-size: 17px;
  color: #E8EFE9;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

/* Closing strong lines */
.of-strong {
  margin-top: 96px;
  padding-top: 64px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
  align-items: end;
}
.of-strong-1 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--cream);
  text-wrap: balance;
}
.of-strong-1 strong { font-weight: 700; }
.of-strong-2 {
  margin: 0;
  font-size: 16px;
  color: rgba(248, 245, 241, 0.78);
  line-height: 1.5;
  letter-spacing: 0;
  font-weight: 400;
  max-width: 32ch;
  justify-self: end;
  text-align: right;
}
.of-strong-2 strong { color: var(--gold); font-weight: 700; }

@media (max-width: 980px) {
  .flow-cards { grid-template-columns: 1fr 1fr; border-bottom: 0; }
  .flow-card { border-bottom: 1px solid rgba(255,255,255,0.14); }
  .flow-card:nth-child(2n) { border-right: 0; }
  .of-acc-head { grid-template-columns: 1fr; gap: 24px; }
  .acc-content { grid-template-columns: 1fr; gap: 32px; padding-left: 0; }
  .acc-row { grid-template-columns: 64px 1fr 32px; gap: 16px; }
  .acc-n { font-size: 22px; }
  .acc-item.open .acc-n { font-size: 28px; }
  .acc-mega { font-size: 180px; left: -8px; top: -28px; }
  .acc-cap { font-size: 48px; padding-right: 10px; }
  .acc-controls-grid { grid-template-columns: 1fr; gap: 4px; }
  .acc-card { padding: 22px 20px 24px; }
  .of-strong { grid-template-columns: 1fr; gap: 28px; }
  .of-strong-2 { justify-self: start; text-align: left; }
}

/* ─── Page transitions ──────────────────────────────────────────────────── */

.view {
  animation: fade .3s ease-out;
}
@keyframes fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll-revealed elements */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .85s cubic-bezier(.2,.6,.2,1), transform .85s cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Slow pod drift (background motifs) ───────────────────────────────── */

.hero-pods, .pod-corner {
  animation: pod-drift 38s ease-in-out infinite alternate;
  transform-origin: center center;
}
.pod-corner.br { animation-direction: alternate-reverse; }
@keyframes pod-drift {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(-14px, 8px, 0) rotate(1.6deg); }
}
.pod-corner.tl { animation-name: pod-drift-tl; }
.pod-corner.br { animation-name: pod-drift-br; }
@keyframes pod-drift-tl {
  from { transform: rotate(-12deg) translate3d(0,0,0); }
  to   { transform: rotate(-9deg) translate3d(-10px, -8px, 0); }
}
@keyframes pod-drift-br {
  from { transform: rotate(190deg) translate3d(0,0,0); }
  to   { transform: rotate(186deg) translate3d(8px, 6px, 0); }
}

/* ─── Metric carousel ──────────────────────────────────────────────────── */

.metric-carousel {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 64px 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
}
.metric-track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: marquee 80s linear infinite;
}
.metric-carousel:hover .metric-track,
.metric-track:hover {
  animation-play-state: paused;
}
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.metric-card {
  flex: 0 0 auto;
  width: 360px;
  padding: 40px 36px;
  border-right: 1px solid var(--rule);
  background: var(--white);
  transition: background .25s ease;
  cursor: default;
}
.metric-card:hover { background: var(--beige); }
.metric-num {
  font-size: 68px;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--cocoa);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.metric-num .unit {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--cocoa-soft);
}
.metric-lbl {
  margin-top: 22px;
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 0;
  max-width: 32ch;
  line-height: 1.5;
}
.metric-carousel-head {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x) 36px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  flex-wrap: wrap;
}

/* ─── Infrastructure grid ──────────────────────────────────────────────── */

.infra-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-strong);
}
.infra-tile {
  padding: 36px 32px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--white);
  transition: background .2s ease;
}
.infra-tile:hover { background: var(--beige); }
.infra-tile:nth-child(3n) { border-right: 0; }
.infra-tile .kicker { color: var(--gold); }
.infra-tile h4 {
  margin: 14px 0 8px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.infra-tile .v {
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.015em;
  margin: 12px 0 4px;
}
.infra-tile .v strong { font-weight: 700; }
.infra-tile p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* ─── Small screens (basic graceful degradation) ───────────────────────── */

@media (max-width: 980px) {
  .cols-2, .cols-3, .cols-4, .terms-grid, .steps, .kpis,
  .hero-meta, .detail-grid, .thesis, .footer-top { grid-template-columns: 1fr; }
  .terms-grid .tile, .kpis .k, .steps .step {
    border-right: 0; border-bottom: 1px solid var(--rule);
  }
  .infra-grid { grid-template-columns: 1fr 1fr; }
  .infra-tile:nth-child(3n) { border-right: 1px solid var(--rule); }
  .infra-tile:nth-child(2n) { border-right: 0; }
  .nav, .nav-calc { display: none; }
}


/* ─── Financing intro with photo background ─────────────────────────────── */

.financing-intro {
  position: relative;
  overflow: hidden;
  background: var(--cocoa);
  color: var(--cream);
}
.financing-intro image-slot { z-index: 0; }
/* Veil: heavier dark on the left (where headline lives), lighter on the
   right (let the colorful pod stack show). Two stacked gradients also
   add depth top + bottom so the section reads as a contained band. */
.financing-intro-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.92) 0%,
      rgba(20, 9, 3, 0.78) 30%,
      rgba(20, 9, 3, 0.52) 55%,
      rgba(20, 9, 3, 0.38) 100%),
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.28) 0%,
      transparent 35%,
      rgba(20, 9, 3, 0.32) 100%);
}
.financing-intro-inner {
  position: relative;
  z-index: 2;
}
.financing-intro-inner .display {
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6);
}
.financing-intro-inner .lede {
  color: rgba(248, 245, 241, 0.88);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.financing-intro-inner .eyebrow {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}


/* ─── Hero photo background ─────────────────────────────────────────────── */

.hero { position: relative; overflow: hidden; }
.hero image-slot { display: block; }
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.92) 0%,
      rgba(20, 9, 3, 0.78) 35%,
      rgba(20, 9, 3, 0.55) 60%,
      rgba(20, 9, 3, 0.40) 100%),
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.30) 0%,
      transparent 35%,
      rgba(20, 9, 3, 0.45) 100%);
}
.hero-inner { position: relative; z-index: 2; }
.hero h1 { text-shadow: 0 2px 32px rgba(0, 0, 0, 0.5); }
.hero .lede { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); }
.hero .hero-meta .cell .figure { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); }


/* ─── Hero metric tiles — bigger, bolder, hover-amplified ───────────── */

.hero-meta {
  gap: 36px;
}
.hero-meta .cell {
  transition: transform 0.35s cubic-bezier(.2, .7, .2, 1);
  cursor: default;
}
.hero-meta .cell:hover { transform: translateY(-4px); }
.hero-meta .cell .kicker {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--gold);
}
.hero-meta .cell .figure {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  margin-top: 14px;
  transition: font-size 0.35s cubic-bezier(.2, .7, .2, 1), color 0.35s ease;
}
.hero-meta .cell:hover .figure {
  font-size: 78px;
  color: var(--gold);
}
.hero-meta .cell .figure strong { font-weight: 900; }
.hero-meta .cell .note {
  margin-top: 10px;
  font-size: 13px;
}

/* ─── Accordion item headers: push contrast up ──────────────────────────── */

.acc-h {
  color: var(--cream) !important;
  font-weight: 700 !important;
  font-size: clamp(18px, 1.5vw, 22px) !important;
}
.acc-item:hover .acc-h { color: var(--gold) !important; }
.acc-item.open  .acc-h { color: #FFFFFF !important; }
.acc-n {
  color: var(--gold) !important;
  font-weight: 800 !important;
}

/* ─── Risk mitigated card: pop harder ────────────────────────────────── */

.acc-risks-card {
  background: linear-gradient(155deg, #355A40 0%, #1F3326 100%) !important;
  border-color: #6B8E78 !important;
  box-shadow:
    0 0 0 1px rgba(184, 220, 195, 0.10),
    0 16px 38px rgba(0, 0, 0, 0.32) !important;
}
.acc-risks-card .acc-card-icon.shield {
  border-color: #A6D1B0 !important;
  background: rgba(53, 90, 64, 0.85) !important;
  color: #C9EBD2 !important;
  box-shadow: 0 0 22px rgba(166, 209, 176, 0.22);
}
.acc-risks-card .acc-card-lbl {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
.acc-risks-card .acc-card-meta { color: #B8D4BF !important; }
.acc-risks-card:hover {
  background: linear-gradient(155deg, #3F6B4B 0%, #25402F 100%) !important;
  border-color: #93B89E !important;
  transform: translateY(-3px) !important;
}
.acc-risks {
  color: #F0F7F1 !important;
  font-weight: 500 !important;
  font-size: 18px !important;
}


/* ─── Accordion modernised: 2-col stage, white Controls, vivid green Risk ── */

.acc-stage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  position: relative;
  z-index: 1;
}
.acc-stage-r { padding-top: 8px; }

/* Title — bigger, mixed weight */
.acc-title {
  margin: 0 0 14px !important;
  font-size: clamp(34px, 3.6vw, 52px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.02em !important;
  color: var(--cream) !important;
  max-width: 18ch !important;
  font-weight: 300 !important;
}
.acc-title .t-light { font-weight: 300; }
.acc-title .t-bold  { font-weight: 800; }

/* Explanation column */
.acc-explain {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: rgba(248, 245, 241, 0.85) !important;
  max-width: 60ch !important;
}
.acc-cap {
  font-size: 72px !important;
  color: var(--gold) !important;
  padding-right: 16px !important;
}

/* Controls card → white surface, dark text, modern */
.acc-card.acc-controls {
  background: var(--white) !important;
  border: 1px solid var(--rule) !important;
  color: var(--cocoa) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}
.acc-card.acc-controls:hover {
  background: var(--cream) !important;
  border-color: var(--gold) !important;
  transform: translateY(-3px);
}
.acc-card.acc-controls .acc-card-icon {
  border-color: var(--cocoa);
  background: var(--cocoa);
  color: var(--cream);
}
.acc-card.acc-controls .acc-card-lbl {
  color: var(--cocoa) !important;
  font-weight: 800 !important;
  font-size: 22px !important;
}
.acc-card.acc-controls .acc-card-meta {
  color: var(--muted) !important;
}
.acc-card.acc-controls .acc-controls-grid li {
  color: var(--cocoa) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  padding: 13px 0 !important;
  border-bottom-color: rgba(61, 28, 8, 0.10) !important;
}
.acc-card.acc-controls .acc-ctrl-tick {
  width: 26px;
  height: 26px;
  background: rgba(184, 148, 90, 0.16);
  color: var(--cocoa);
}
.acc-card.acc-controls .acc-ctrl-tick svg { width: 15px; height: 15px; }

/* Risk mitigated → vivid green #72bd2d */
.acc-risks-card {
  background: linear-gradient(155deg, #72BD2D 0%, #4B8E1E 100%) !important;
  border-color: #95D154 !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10),
    0 18px 44px rgba(0, 0, 0, 0.30) !important;
}
.acc-risks-card::before {
  background: radial-gradient(
    circle at 100% 0%,
    rgba(255, 255, 255, 0.28) 0%,
    transparent 55%) !important;
}
.acc-risks-card:hover {
  background: linear-gradient(155deg, #82CC36 0%, #569E22 100%) !important;
  border-color: #B1E27A !important;
  transform: translateY(-3px) !important;
}
.acc-risks-card .acc-card-icon.shield {
  border: 0 !important;
  width: 56px !important;
  height: 56px !important;
  background: transparent !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.acc-risks-card .acc-card-icon.shield svg {
  width: 56px !important;
  height: 56px !important;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}
.acc-risks-card .acc-card-lbl {
  color: #FFFFFF !important;
  font-weight: 800 !important;
  font-size: 22px !important;
}
.acc-risks-card .acc-card-meta {
  color: rgba(255, 255, 255, 0.78) !important;
  font-weight: 700 !important;
}
.acc-risks {
  color: #FFFFFF !important;
  font-weight: 500 !important;
  font-size: 19px !important;
  line-height: 1.5 !important;
}

@media (max-width: 980px) {
  .acc-stage-grid { grid-template-columns: 1fr; gap: 28px; }
}


/* ─── Live ticker (replaces static .ribbon-inner) ───────────────────────── */

.ribbon.live-ticker {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--cream);
  overflow: hidden;
  position: relative;
}
.lt-track-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.lt-track {
  display: flex;
  width: max-content;
  animation: lt-marquee 95s linear infinite;
}
.live-ticker:hover .lt-track,
.lt-track:hover { animation-play-state: paused; }
@keyframes lt-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.lt-item {
  flex: 0 0 auto;
  padding: 22px 36px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-right: 1px solid var(--rule);
  font-size: 13px;
  position: relative;
}
.lt-label {
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.lt-price {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--cocoa);
  font-size: 15px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.lt-unit {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}
.lt-delta {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.lt-delta.up   { color: #2C8C42; }
.lt-delta.down { color: #B53B2F; }
.lt-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.lt-pulse[data-live="1"] {
  background: #2C8C42;
  box-shadow: 0 0 0 0 rgba(44, 140, 66, 0.6);
  animation: lt-pulse 2s ease-out infinite;
}
@keyframes lt-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(44, 140, 66, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(44, 140, 66, 0); }
  100% { box-shadow: 0 0 0 0 rgba(44, 140, 66, 0); }
}

.lt-clock {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--pad-x);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  background: var(--cream);
  border-left: 1px solid var(--rule);
  align-self: stretch;
}
.lt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 0 rgba(184, 148, 90, 0.6);
  animation: lt-pulse-gold 2.4s ease-out infinite;
}
@keyframes lt-pulse-gold {
  0%   { box-shadow: 0 0 0 0 rgba(184, 148, 90, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(184, 148, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 148, 90, 0); }
}

@media (max-width: 980px) {
  .lt-item { padding: 18px 22px; gap: 10px; }
  .lt-clock { padding: 0 18px; font-size: 10px; }
}


/* ─── New positioning sections (Section 2-3, 10, 13, 14) ──────────────── */

.hero-secondary {
  margin-top: 28px;
  font-size: 18px;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.005em;
}
.hero-secondary strong {
  font-weight: 800;
  color: var(--cream);
}
.hero-trust {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
}
.hero-trust .sep { color: rgba(184, 148, 90, 0.45); }

/* Hero meta now needs 6 cells in a 3-col grid on most screens, 2 on mobile */
.hero-meta {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 32px 40px !important;
}
.hero-meta .cell .figure { font-size: 52px !important; }
.hero-meta .cell:hover .figure { font-size: 62px !important; }

/* Section 2 — capabilities */
.capability-grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
.cap-card {
  padding: 36px 28px;
  border-right: 1px solid var(--rule);
  transition: background 0.25s ease;
}
.cap-card:hover { background: var(--cream); }
.cap-card:last-child { border-right: 0; }
.cap-num {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-bottom: 18px;
}
.cap-card h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--cocoa);
  letter-spacing: -0.005em;
}
.cap-card p {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}

/* Section 3 — proven grid */
.proven-grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.proven-tile {
  padding: 36px 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.proven-tile:nth-child(4n) { border-right: 0; }
.proven-tile h3 {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.005em;
}
.proven-tile p {
  margin: 0;
  font-size: 14px;
  color: rgba(248, 245, 241, 0.72);
  line-height: 1.6;
}

/* Section 10 — buyer grid */
.buyer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.buyer-tile {
  background: var(--white);
  border: 1px solid var(--rule);
  padding: 32px 28px 28px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.buyer-tile:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 18px 38px rgba(61, 28, 8, 0.10);
}
.buyer-tick {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(184, 148, 90, 0.14);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.buyer-tick svg { width: 22px; height: 22px; }
.buyer-tile h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--cocoa);
  letter-spacing: -0.005em;
}
.buyer-tile p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}

/* Section 13 — Impact */
.impact-section .impact-strong {
  margin-top: 22px;
  font-size: 17px;
  font-weight: 600;
  color: var(--gold);
  border-left: 2px solid var(--gold);
  padding-left: 18px;
  line-height: 1.45;
  max-width: 48ch;
}
.impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.impact-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: -0.005em;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.impact-tile:hover {
  background: rgba(114, 189, 45, 0.10);
  border-color: #72BD2D;
  transform: translateY(-2px);
}
.impact-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #72BD2D;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(114, 189, 45, 0.18);
}

/* Capital pillars (Financing screen) */
.cap-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
.cap-pillar {
  padding: 36px 28px;
  border-right: 1px solid var(--rule);
}
.cap-pillar:last-child { border-right: 0; }
.cap-pillar h3 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--cocoa);
  letter-spacing: -0.005em;
  max-width: 22ch;
}
.cap-pillar p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

/* Disclaimer — used on multiple sections */
.disclaimer {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  letter-spacing: 0.02em;
  font-weight: 500;
  max-width: 86ch;
  padding: 16px 0 0;
  border-top: 1px solid var(--rule);
}
.section.dark-deep .disclaimer,
.section.dark .disclaimer {
  color: rgba(248, 245, 241, 0.52);
  border-top-color: rgba(255, 255, 255, 0.14);
}

/* Final CTA */
.final-cta {
  background: var(--beige);
}

@media (max-width: 980px) {
  .hero-meta { grid-template-columns: 1fr 1fr !important; }
  .capability-grid { grid-template-columns: 1fr 1fr; }
  .cap-card { border-right: 1px solid var(--rule) !important; border-bottom: 1px solid var(--rule); }
  .cap-card:nth-child(2n) { border-right: 0 !important; }
  .proven-grid { grid-template-columns: 1fr 1fr; }
  .proven-tile:nth-child(2n) { border-right: 0; }
  .buyer-grid { grid-template-columns: 1fr; }
  .impact-grid { grid-template-columns: 1fr 1fr; }
  .cap-pillars { grid-template-columns: 1fr; }
  .cap-pillar { border-right: 0; border-bottom: 1px solid var(--rule); }
}


/* Hide legacy nav-calc button anywhere it might persist */
.nav-calc { display: none !important; }


/* ─── Supply Network — hero ─────────────────────────────────────────────── */

.supply-hero {
  position: relative;
  overflow: hidden;
  background: var(--cocoa-deep);
  color: var(--cream);
  min-height: 540px;
  display: flex;
  align-items: flex-end;
}
.supply-hero image-slot { z-index: 0; }
.supply-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.86) 0%,
      rgba(20, 9, 3, 0.62) 40%,
      rgba(20, 9, 3, 0.30) 100%),
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.28) 0%,
      transparent 35%,
      rgba(20, 9, 3, 0.55) 100%);
}
.supply-hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 140px;
  padding-bottom: 80px;
  width: 100%;
}
.supply-hero h1 { text-shadow: 0 2px 30px rgba(0,0,0,0.5); }
.supply-hero .lede { text-shadow: 0 1px 14px rgba(0,0,0,0.45); }

/* ─── Infrastructure rich tiles ─────────────────────────────────────────── */

.infra-grid-rich {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-strong);
  border-left: 1px solid var(--rule-strong);
}
.infra-rich-tile {
  position: relative;
  padding: 36px 32px 32px;
  border-right: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  background: var(--white);
  overflow: hidden;
  transition: background 0.3s ease, transform 0.3s ease;
}
.infra-rich-tile:hover {
  background: linear-gradient(165deg, var(--cream) 0%, var(--beige) 100%);
  transform: translateY(-3px);
}
.infra-rich-tile::after {
  content: "";
  position: absolute;
  right: -28px;
  top: -8px;
  width: 80px;
  height: 80px;
  background-image: url("assets/cocoa-pod.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  opacity: 0.05;
  transform: rotate(8deg);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.45s ease;
}
.infra-rich-tile:hover::after {
  opacity: 0.12;
  transform: rotate(2deg) scale(1.05);
}
.infra-rich-n {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  margin-bottom: 22px;
}
.infra-rich-k {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--cocoa);
  margin-bottom: 12px;
}
.infra-rich-v {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--cocoa);
  line-height: 1;
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
.infra-rich-tile p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 500;
}

/* ─── Team screen ───────────────────────────────────────────────────────── */

.team-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 18px;
}
.team-count {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cocoa);
}
.team-count span {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
  margin-left: 8px;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 28px;
}
.team-card {
  cursor: default;
  transition: transform 0.3s ease;
}
.team-card:hover { transform: translateY(-4px); }
.team-card image-slot {
  margin-bottom: 18px;
}
.team-body { padding: 0 2px; }
.team-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--cocoa);
  line-height: 1.2;
}
.team-role {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.4;
}
.team-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
}
.team-meta .dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
}

@media (max-width: 1180px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .infra-grid-rich { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .infra-grid-rich { grid-template-columns: 1fr; }
  .team-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}


/* ─── Impact section with photo background + restyled headline ─────────── */

.impact-photo {
  background: var(--cocoa-deep);
  color: var(--cream);
}
.impact-photo image-slot { z-index: 0; }
.impact-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.92) 0%,
      rgba(20, 9, 3, 0.78) 32%,
      rgba(20, 9, 3, 0.50) 60%,
      rgba(20, 9, 3, 0.30) 100%),
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.30) 0%,
      transparent 30%,
      rgba(20, 9, 3, 0.40) 100%);
}

.impact-headline {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.5);
}
.impact-headline .pct {
  font-size: clamp(96px, 12vw, 168px);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--cream);
  line-height: 0.9;
  margin-bottom: 4px;
  display: inline-flex;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}
.impact-headline .pct .sym {
  font-size: 0.45em;
  font-weight: 600;
  color: var(--gold);
  margin-left: 4px;
  letter-spacing: 0;
}
.impact-headline .line {
  font-size: clamp(28px, 3vw, 44px);
}
.impact-headline .light {
  font-weight: 300;
  color: rgba(248, 245, 241, 0.86);
}
.impact-headline .bold {
  font-weight: 800;
  color: var(--cream);
}
.impact-headline .em {
  font-weight: 700;
  color: var(--gold);
  font-style: normal;
}

.impact-photo .lede {
  color: rgba(248, 245, 241, 0.86);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}
.impact-photo .impact-strong {
  margin-top: 22px;
  font-size: 17px;
  font-weight: 600;
  color: var(--cream);
  border-left: 2px solid var(--gold);
  padding-left: 18px;
  line-height: 1.45;
  max-width: 48ch;
}
.impact-photo .eyebrow {
  color: var(--gold);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}


/* ─── Impact tile icons (replaces .impact-dot) ─────────────────────────── */

.impact-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(114, 189, 45, 0.16);
  color: #A6E055;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s ease, color 0.25s ease, transform 0.3s ease;
}
.impact-icon svg { width: 20px; height: 20px; display: block; }
.impact-tile:hover .impact-icon {
  background: #72BD2D;
  color: var(--cocoa-deep);
  transform: scale(1.08) rotate(-4deg);
}

/* Make impact tiles a touch taller and aligned to top with the icon */
.impact-tile {
  align-items: center;
  padding: 18px 22px;
  gap: 16px;
}


/* ─── Metric card icon — bubble-pop effect on hover ─────────────────── */

.metric-card { position: relative; overflow: hidden; }
.metric-card::after {
  /* Burst circle — sits at the icon's spawn point, expands + fades */
  content: "";
  position: absolute;
  top: 60px;
  right: 60px;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184,148,90,0.45) 0%, rgba(184,148,90,0) 70%);
  transform: translate(50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.metric-card:hover::after {
  animation: bubble-burst 0.7s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes bubble-burst {
  0%   { width: 0;     height: 0;     opacity: 0;    }
  20%  { opacity: 1;                                  }
  60%  { width: 180px; height: 180px; opacity: 0.45; }
  100% { width: 240px; height: 240px; opacity: 0;    }
}

.metric-icon {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0) rotate(-30deg);
  transition: opacity 0.2s ease;
  pointer-events: none;
  box-shadow: 0 8px 22px rgba(184,148,90,0.35);
  z-index: 2;
}
.metric-icon svg {
  width: 30px;
  height: 30px;
  display: block;
}
.metric-icon::before {
  /* Particle ring — 6 dots that scatter outwards */
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 0%,   var(--gold) 0 2.5px, transparent 3px),
    radial-gradient(circle at 100% 50%, var(--gold) 0 2.5px, transparent 3px),
    radial-gradient(circle at 50% 100%, var(--gold) 0 2.5px, transparent 3px),
    radial-gradient(circle at 0% 50%,   var(--gold) 0 2.5px, transparent 3px),
    radial-gradient(circle at 85% 15%,  var(--gold) 0 2.5px, transparent 3px),
    radial-gradient(circle at 15% 85%,  var(--gold) 0 2.5px, transparent 3px);
  background-size: 100% 100%;
  opacity: 0;
  transform: scale(0.6);
}

.metric-card:hover .metric-icon {
  animation: pop-in 0.7s cubic-bezier(.2,.9,.25,1.4) 0.10s forwards;
}
.metric-card:hover .metric-icon::before {
  animation: particle-scatter 0.85s ease-out 0.18s forwards;
}

@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0)    rotate(-30deg); }
  60%  { opacity: 1; transform: scale(1.15) rotate(8deg);   }
  100% { opacity: 1; transform: scale(1)    rotate(0);      }
}
@keyframes particle-scatter {
  0%   { opacity: 0; transform: scale(0.55); }
  35%  { opacity: 1;                          }
  100% { opacity: 0; transform: scale(1.55); }
}

/* Per-icon secondary motion — kicks in AFTER the pop, while hovered */
.metric-card:hover .metric-icon.icon-rotate svg     { animation: spin-once 1.2s ease-in-out 0.75s infinite; transform-origin: 15px 15px; }
.metric-card:hover .metric-icon.icon-certified svg  { animation: spin-once 1.6s ease-out 0.75s infinite; transform-origin: 15px 15px; }
.metric-card:hover .metric-icon.icon-network svg    { animation: pulse-soft 1.6s ease-in-out 0.75s infinite; }
.metric-card:hover .metric-icon.icon-farmers svg    { animation: pulse-soft 1.6s ease-in-out 0.75s infinite; }
.metric-card:hover .metric-icon.icon-community svg  { animation: heartbeat 1.4s ease-in-out 0.75s infinite; }
.metric-card:hover .metric-icon.icon-onboarding svg { animation: nudge-right 1.4s ease-in-out 0.75s infinite; }
.metric-card:hover .metric-icon.icon-warehouse svg  { animation: settle 1.5s ease-out 0.75s infinite; }
.metric-card:hover .metric-icon.icon-map svg        { animation: drop-pin 1.6s ease-in-out 0.75s infinite; }

@keyframes spin-once    { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes pulse-soft   { 0%,100% { transform: scale(1); } 50% { transform: scale(1.10); } }
@keyframes heartbeat    { 0%,100% { transform: scale(1); } 20% { transform: scale(1.14); } 40% { transform: scale(0.96); } 60% { transform: scale(1.08); } }
@keyframes nudge-right  { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes settle       { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes drop-pin     { 0% { transform: translateY(-3px); } 60% { transform: translateY(2px); } 100% { transform: translateY(-3px); } }

.metric-card {
  transition: background 0.25s ease, transform 0.3s ease;
}
.metric-card:hover {
  transform: translateY(-4px);
  background: var(--beige);
}
.metric-num { padding-right: 64px; }


/* ─── Buyers screen hero with photo background ───────────────────────── */

.buyers-hero {
  position: relative;
  overflow: hidden;
  background: var(--cocoa-deep);
  color: var(--cream);
  min-height: 480px;
  padding-top: 100px;
  padding-bottom: 80px;
}
.buyers-hero image-slot { z-index: 0; }
.buyers-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.92) 0%,
      rgba(20, 9, 3, 0.74) 35%,
      rgba(20, 9, 3, 0.45) 60%,
      rgba(20, 9, 3, 0.25) 100%),
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.30) 0%,
      transparent 35%,
      rgba(20, 9, 3, 0.40) 100%);
}
.buyers-hero-inner {
  position: relative;
  z-index: 2;
}
.buyers-hero h1 { text-shadow: 0 2px 30px rgba(0,0,0,0.55); }
.buyers-hero .lede { text-shadow: 0 1px 14px rgba(0,0,0,0.50); color: rgba(248,245,241,.88); }
.buyers-hero .eyebrow { text-shadow: 0 1px 10px rgba(0,0,0,0.5); }


/* ─── Built new · photo background ─────────────────────────────────────── */
.builtnew-photo image-slot { z-index: 0; }
.builtnew-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.94) 0%,
      rgba(20, 9, 3, 0.82) 35%,
      rgba(20, 9, 3, 0.52) 65%,
      rgba(20, 9, 3, 0.30) 100%),
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.30) 0%,
      transparent 35%,
      rgba(20, 9, 3, 0.45) 100%);
}
.builtnew-photo .display { text-shadow: 0 2px 28px rgba(0,0,0,0.55); }
.builtnew-photo .lede { text-shadow: 0 1px 12px rgba(0,0,0,0.5); }

/* ─── Buyers tile redesign: icon + hover tag ───────────────────────────── */

.buyer-tile {
  position: relative;
  overflow: hidden;
}
.buyer-tile .buyer-tag {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--gold);
  color: var(--cocoa);
  padding: 6px 12px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-8px) scale(0.92);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(.2,.8,.2,1.2);
  border-radius: 2px;
  box-shadow: 0 6px 16px rgba(184, 148, 90, 0.30);
}
.buyer-tile:hover .buyer-tag {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.buyer-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(184, 148, 90, 0.10);
  color: var(--cocoa);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: background 0.3s ease, color 0.3s ease, transform 0.4s cubic-bezier(.2,.8,.2,1.2);
}
.buyer-icon svg { width: 28px; height: 28px; display: block; }
.buyer-tile:hover .buyer-icon {
  background: var(--cocoa);
  color: var(--gold);
  transform: rotate(-6deg) scale(1.08);
}

/* Hide legacy tick if still present */
.buyer-tick { display: none; }

/* ─── Team hero photo background ───────────────────────────────────────── */
.team-hero {
  background: var(--cocoa-deep);
  color: var(--cream);
  min-height: 480px;
  padding-top: 100px;
  padding-bottom: 80px;
}
.team-hero image-slot { z-index: 0; }
.team-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.92) 0%,
      rgba(20, 9, 3, 0.72) 40%,
      rgba(20, 9, 3, 0.42) 100%),
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.28) 0%,
      transparent 35%,
      rgba(20, 9, 3, 0.45) 100%);
}
.team-hero .display { text-shadow: 0 2px 28px rgba(0,0,0,0.55); }
.team-hero .lede { text-shadow: 0 1px 12px rgba(0,0,0,0.45); color: rgba(248,245,241,0.88); }

/* Make sure team cards keep vertical 4:5 portrait aspect */
.team-card image-slot { aspect-ratio: 4/5 !important; }

/* ─── Photo gallery (loading process) ──────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.gallery-card {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--rule);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(61, 28, 8, 0.12);
}
.gallery-cap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid var(--rule);
}
.gallery-n {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.gallery-cap span:last-child {
  font-size: 13px;
  color: var(--cocoa);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35;
}

@media (max-width: 1180px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* ─── Supply CTA photo background ──────────────────────────────────────── */
.supply-cta image-slot { z-index: 0; }
.supply-cta-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.92) 0%,
      rgba(20, 9, 3, 0.78) 32%,
      rgba(20, 9, 3, 0.45) 65%,
      rgba(20, 9, 3, 0.25) 100%),
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.30) 0%,
      transparent 35%,
      rgba(20, 9, 3, 0.40) 100%);
}
.supply-cta .display { text-shadow: 0 2px 28px rgba(0,0,0,0.55); }
.supply-cta .lede { text-shadow: 0 1px 12px rgba(0,0,0,0.45); color: rgba(248,245,241,0.86); }

/* ─── Disciplined capital deployment · photo bg ────────────────────────── */
.discipline-photo image-slot { z-index: 0; }
.discipline-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.95) 0%,
      rgba(20, 9, 3, 0.85) 40%,
      rgba(20, 9, 3, 0.65) 100%),
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.35) 0%,
      rgba(20, 9, 3, 0.50) 100%);
}
.discipline-photo .display { text-shadow: 0 2px 28px rgba(0,0,0,0.55); }

/* ─── Footer · bigger & bolder section heads ───────────────────────────── */
.footer h5 {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin-bottom: 22px;
}
.footer ul a {
  cursor: pointer;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
}
.footer ul a:hover { color: var(--gold); }


/* ─── Right-column lede: bump up across all sections ─────────────────── */
.lede {
  font-size: 20px !important;
  line-height: 1.55 !important;
}
@media (max-width: 760px) {
  .lede { font-size: 17px !important; }
}

/* ─── Team hero count emphasis ────────────────────────────────────────── */
.team-hero .lede strong {
  display: inline-block;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--gold) !important;
  line-height: 1;
  vertical-align: -4px;
  margin: 0 2px;
  font-variant-numeric: tabular-nums;
}


/* ─── Splash intro overlay — pop the logo, then fade out ──────────────── */

.ce-splash {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: var(--cocoa-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  isolation: isolate;
}
.ce-splash-out { animation: splash-veil-out 1.4s cubic-bezier(.4,0,.4,1) forwards; }
@keyframes splash-veil-out {
  0%   { opacity: 1; filter: blur(0); backdrop-filter: blur(0); }
  40%  { filter: blur(8px); }
  100% { opacity: 0; filter: blur(24px); visibility: hidden; }
}

/* Logo pop + 4D wobble */
.ce-splash-logo {
  position: relative;
  z-index: 4;
  transform: scale(0) rotate(-25deg);
  opacity: 0;
  animation: splash-logo-pop 1.1s cubic-bezier(.2,.9,.25,1.4) 0.1s forwards;
  filter: drop-shadow(0 24px 60px rgba(0,0,0,.55));
}
.ce-splash-out .ce-splash-logo {
  animation: splash-logo-out 1.2s cubic-bezier(.4,0,.5,1) forwards;
}
@keyframes splash-logo-pop {
  0%   { opacity: 0; transform: scale(0)    rotate(-25deg); }
  55%  { opacity: 1; transform: scale(1.18) rotate(8deg);   }
  80%  { opacity: 1; transform: scale(0.96) rotate(-3deg);  }
  100% { opacity: 1; transform: scale(1)    rotate(0);      }
}
@keyframes splash-logo-out {
  0%   { opacity: 1; transform: scale(1)   rotate(0); filter: blur(0) drop-shadow(0 24px 60px rgba(0,0,0,.55)); }
  100% { opacity: 0; transform: scale(1.6) rotate(0); filter: blur(18px) drop-shadow(0 0 80px rgba(184,148,90,.4)); }
}

/* Central radial burst */
.ce-splash-burst {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(184,148,90,0.65) 0%,
    rgba(184,148,90,0.20) 35%,
    rgba(184,148,90,0)   70%);
  z-index: 1;
  opacity: 0;
  animation: splash-burst 0.9s cubic-bezier(.2,.7,.3,1) 0.05s forwards;
}
@keyframes splash-burst {
  0%   { width: 0;     height: 0;     opacity: 0; }
  20%  { opacity: 1; }
  100% { width: 1200px; height: 1200px; opacity: 0; }
}

/* Concentric expanding rings */
.ce-splash-ring {
  position: absolute;
  border: 2px solid var(--gold);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  z-index: 2;
  opacity: 0;
}
.ce-splash-ring.r1 { animation: splash-ring 1.1s cubic-bezier(.2,.7,.3,1) 0.05s forwards; }
.ce-splash-ring.r2 { animation: splash-ring 1.1s cubic-bezier(.2,.7,.3,1) 0.18s forwards; }
.ce-splash-ring.r3 { animation: splash-ring 1.1s cubic-bezier(.2,.7,.3,1) 0.32s forwards; }
@keyframes splash-ring {
  0%   { opacity: 0; transform: scale(0.2); border-width: 3px; }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: scale(8);   border-width: 0.5px; }
}

/* Particle scatter — 14 dots radiate outward */
.ce-splash-particles {
  position: absolute;
  width: 0;
  height: 0;
  z-index: 3;
}
.ce-splash-particles span {
  position: absolute;
  left: 0; top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  margin: -4px 0 0 -4px;
  transform: rotate(var(--a)) translateY(0);
  opacity: 0;
  animation: splash-particle 1.0s cubic-bezier(.2,.7,.3,1) 0.30s forwards;
}
@keyframes splash-particle {
  0%   { opacity: 0; transform: rotate(var(--a)) translateY(0)    scale(1); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-360px) scale(0.4); }
}


/* ─── Risk mitigated card — celebratory hover (the "prize" feel) ────── */

.acc-risks-card {
  position: relative;
  overflow: hidden;
  transition:
    background 0.4s ease,
    border-color 0.4s ease,
    transform 0.4s cubic-bezier(.2,.8,.2,1.2),
    box-shadow 0.4s ease !important;
}

/* Sweep / shimmer pseudo across the green panel on hover */
.acc-risks-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,255,255,0.22) 45%,
    rgba(255,255,255,0.32) 50%,
    rgba(255,255,255,0.22) 55%,
    transparent 100%);
  transform: translateX(-110%);
  pointer-events: none;
  z-index: 2;
}
.acc-risks-card:hover::after {
  animation: risk-sweep 1.2s cubic-bezier(.2,.7,.3,1);
}
@keyframes risk-sweep {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(110%); }
}

/* "Prize" pulse-glow ring around the whole card */
.acc-risks-card:hover {
  background: linear-gradient(155deg, #8FE03A 0%, #5BB426 55%, #3F8D1A 100%) !important;
  border-color: #B8EE7A !important;
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.30) inset,
    0 0 0 4px rgba(143, 224, 58, 0.30),
    0 24px 60px rgba(67, 160, 30, 0.42),
    0 0 80px rgba(143, 224, 58, 0.25) !important;
}

/* All text snaps to pure white on hover (was #F0F7F1) */
.acc-risks-card .acc-card-lbl,
.acc-risks-card .acc-risks {
  color: #FFFFFF !important;
}
.acc-risks-card .acc-card-meta {
  color: rgba(255, 255, 255, 0.86) !important;
}

/* Title grows on hover for the "prize" reveal */
.acc-risks-card .acc-card-lbl {
  font-size: 22px !important;
  font-weight: 800 !important;
  transition: font-size 0.4s cubic-bezier(.2,.8,.2,1.2), letter-spacing 0.4s ease;
  letter-spacing: -0.005em;
}
.acc-risks-card:hover .acc-card-lbl {
  font-size: 30px !important;
  letter-spacing: -0.02em;
}

/* Shield icon — make it the star on hover */
.acc-risks-card .acc-card-icon.shield {
  width: 64px !important;
  height: 64px !important;
  border: 0 !important;
  background: transparent !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1.3) !important;
}
.acc-risks-card .acc-card-icon.shield svg {
  width: 60px !important;
  height: 60px !important;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.30));
}
.acc-risks-card:hover .acc-card-icon.shield {
  transform: scale(1.18) rotate(-6deg) !important;
  animation: shield-pulse 1.4s ease-in-out 0.5s infinite;
}
@keyframes shield-pulse {
  0%, 100% { transform: scale(1.18) rotate(-6deg); }
  50%      { transform: scale(1.28) rotate(0deg);  }
}

/* Confetti / spark burst — radiates from icon on hover */
.acc-risks-card .acc-card-head { position: relative; }
.acc-risks-card .acc-card-icon.shield::before,
.acc-risks-card .acc-card-icon.shield::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 0%,   #FFFFFF 0 3px, transparent 4px),
    radial-gradient(circle at 100% 50%, #FFFFFF 0 3px, transparent 4px),
    radial-gradient(circle at 50% 100%, #FFFFFF 0 3px, transparent 4px),
    radial-gradient(circle at 0% 50%,   #FFFFFF 0 3px, transparent 4px),
    radial-gradient(circle at 85% 12%,  #FFFFFF 0 2px, transparent 3px),
    radial-gradient(circle at 15% 88%,  #FFFFFF 0 2px, transparent 3px),
    radial-gradient(circle at 12% 12%,  #FFFFFF 0 2px, transparent 3px),
    radial-gradient(circle at 88% 88%,  #FFFFFF 0 2px, transparent 3px);
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
}
.acc-risks-card:hover .acc-card-icon.shield::before {
  animation: spark-scatter 1.0s ease-out 0.3s forwards;
}
.acc-risks-card:hover .acc-card-icon.shield::after {
  animation: spark-scatter 1.2s ease-out 0.5s forwards;
  transform: rotate(22deg) scale(0.7);
}
@keyframes spark-scatter {
  0%   { opacity: 0; transform: scale(0.55); }
  30%  { opacity: 1;                          }
  100% { opacity: 0; transform: scale(1.9);  }
}

/* Risks paragraph also scales subtly on hover */
.acc-risks-card .acc-risks {
  transition: font-size 0.4s ease, font-weight 0.4s ease;
}
.acc-risks-card:hover .acc-risks {
  font-size: 20px !important;
  font-weight: 600 !important;
}


/* ─── Global · small text bolder for legibility ────────────────────── */

body { font-weight: 500; }
.lede { font-weight: 500 !important; }
.cap-card p, .proven-tile p, .buyer-tile p,
.infra-tile p, .infra-rich-tile p,
.team-role, .cycle-detail p, .acc-explain,
.market-foot, .market-sub, .of-intro,
.gallery-cap span:last-child, .disclaimer {
  font-weight: 500;
}

/* "Built new" lede on dark photo bg — push contrast */
.builtnew-photo .lede {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 18px rgba(0,0,0,0.7) !important;
}
.builtnew-veil {
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.96) 0%,
      rgba(20, 9, 3, 0.86) 40%,
      rgba(20, 9, 3, 0.62) 70%,
      rgba(20, 9, 3, 0.35) 100%) !important,
    linear-gradient(180deg, rgba(20, 9, 3, 0.32) 0%, transparent 35%, rgba(20, 9, 3, 0.50) 100%) !important;
}

/* Thesis 01/02/03 — much larger */
.thesis .right .item .num {
  font-size: 56px !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  color: var(--gold) !important;
  line-height: 1 !important;
  margin-bottom: 6px !important;
  font-variant-numeric: tabular-nums !important;
}

/* Operating principle №1 quote section — push readability over the photo */
.quote-bg-inner .lede {
  color: #FFFFFF !important;
  font-weight: 500 !important;
  text-shadow: 0 2px 18px rgba(0,0,0,0.8) !important;
}
.quote-bg-inner .kicker {
  color: var(--gold) !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 12px rgba(0,0,0,0.8) !important;
}
.quote-bg-inner .quote {
  text-shadow: 0 2px 30px rgba(0,0,0,0.85) !important;
}
.quote-bg-veil {
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.95) 0%,
      rgba(20, 9, 3, 0.86) 35%,
      rgba(20, 9, 3, 0.65) 60%,
      rgba(20, 9, 3, 0.48) 100%) !important,
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.30) 0%,
      transparent 30%,
      rgba(20, 9, 3, 0.42) 100%) !important;
}

/* ─── Infrastructure rich tiles · chess pattern w/ photo bg ──────────── */
.infra-rich-tile {
  position: relative;
  isolation: isolate;
}
.infra-rich-tile.with-photo {
  background: var(--cocoa-deep);
  color: var(--cream);
}
.infra-rich-tile.with-photo image-slot { z-index: 0; }
.infra-rich-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(20, 9, 3, 0.35) 0%,
    rgba(20, 9, 3, 0.70) 100%);
  transition: opacity 0.3s ease;
}
.infra-rich-tile.with-photo .infra-rich-content {
  position: relative;
  z-index: 2;
}
.infra-rich-tile.with-photo .infra-rich-k {
  color: var(--cream);
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}
.infra-rich-tile.with-photo .infra-rich-v {
  color: #FFFFFF;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7);
}
.infra-rich-tile.with-photo p {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 12px rgba(0,0,0,0.6);
}
.infra-rich-tile.with-photo:hover {
  background: var(--cocoa-deep);
}
.infra-rich-tile.with-photo::after {
  /* hide the brand pod overlay on photo tiles */
  opacity: 0 !important;
}

/* Team closing section with photo bg */
.team-closing image-slot { z-index: 0; }
.team-closing-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(20, 9, 3, 0.50) 0%,
      rgba(20, 9, 3, 0.85) 70%),
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.40) 0%,
      rgba(20, 9, 3, 0.65) 100%);
}
.team-closing .display { text-shadow: 0 2px 28px rgba(0,0,0,0.65); }

/* Calculator · indicative return block */
.calc-return {
  text-align: center;
  padding: 20px 4px 4px;
}
.calc-return-pct {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.calc-return-pct .unit {
  font-size: 22px;
  font-weight: 600;
  opacity: 0.85;
}
.calc-return-lbl {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(248, 245, 241, 0.55);
}
.calc-scen.is-base .calc-return-lbl { color: rgba(255, 255, 255, 0.75); }
.calc-return-amt {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}


/* ─── Infra rich tiles · revamped ─────────────────────────────────────── */
.infra-grid-rich {
  border: 0;
  gap: 14px;
}
.infra-rich-tile {
  border: 0 !important;
  padding: 40px 32px 36px !important;
  background: var(--cream) !important;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1.1), background 0.4s ease, box-shadow 0.4s ease !important;
  min-height: 280px;
  display: flex;
  flex-direction: column;
}
.infra-rich-tile:hover {
  transform: translateY(-6px) !important;
  background: linear-gradient(165deg, var(--cream) 0%, var(--beige) 100%) !important;
  box-shadow: 0 24px 50px rgba(61, 28, 8, 0.18) !important;
}
/* Photo tiles — alternating, darker w/ photo bg */
.infra-rich-tile.with-photo {
  background: var(--cocoa-deep) !important;
  color: var(--cream) !important;
}
.infra-rich-tile.with-photo:hover {
  background: var(--cocoa) !important;
  box-shadow: 0 24px 60px rgba(20, 9, 3, 0.45) !important;
}
.infra-rich-tile.with-photo .infra-rich-veil {
  background: linear-gradient(165deg,
    rgba(20, 9, 3, 0.45) 0%,
    rgba(20, 9, 3, 0.82) 100%) !important;
}
.infra-rich-tile.with-photo:hover .infra-rich-veil {
  background: linear-gradient(165deg,
    rgba(20, 9, 3, 0.30) 0%,
    rgba(20, 9, 3, 0.65) 100%) !important;
}

/* Big number — way larger, with a subtle slide on hover */
.infra-rich-n {
  font-size: 56px !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  color: var(--gold) !important;
  line-height: 0.9 !important;
  margin-bottom: 24px !important;
  font-variant-numeric: tabular-nums !important;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1.2), color 0.3s ease;
}
.infra-rich-tile:hover .infra-rich-n {
  transform: translateY(-4px) scale(1.08);
}
.infra-rich-tile.with-photo .infra-rich-n {
  color: var(--gold) !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}

/* Animated underline under the kicker */
.infra-rich-k {
  position: relative;
  font-size: 12px !important;
  letter-spacing: 0.20em !important;
  padding-bottom: 10px !important;
  margin-bottom: 16px !important;
  display: inline-block;
}
.infra-rich-k::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: var(--gold);
  transition: width 0.5s cubic-bezier(.2,.8,.2,1.2);
}
.infra-rich-tile:hover .infra-rich-k::after { width: 72px; }

.infra-rich-v {
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
  margin-bottom: 18px !important;
}
.infra-rich-content > p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin-top: auto;
  padding-top: 14px;
}

/* Kill the corner pod decoration on photo tiles + lower its opacity overall */
.infra-rich-tile::after {
  opacity: 0.04 !important;
  width: 96px !important;
  height: 96px !important;
}
.infra-rich-tile.with-photo::after { display: none; }
.infra-rich-tile.with-photo .infra-rich-k {
  color: var(--cream) !important;
}
.infra-rich-tile.with-photo p {
  color: rgba(255,255,255,0.78) !important;
}

/* ─── Global · forbid empty image-slots from rendering ───────────────── */
/* (Gallery already trimmed in JSX; this is a safety net.) */

/* ─── Buyer tiles · slice the red-pod photo across the 3×2 grid ─────── */

.buyer-tile-photo {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--white);
  isolation: isolate;
}
.buyer-tile-photo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("assets/u26.jpg");
  background-size: 300% 200%;        /* 3 cols × 2 rows = same image, sliced */
  background-repeat: no-repeat;
  transition: transform 0.6s cubic-bezier(.2,.7,.3,1), filter 0.4s ease;
  filter: saturate(1.05);
}
.buyer-tile-photo[data-pos="0"] .buyer-tile-photo-bg { background-position:   0%   0%; }
.buyer-tile-photo[data-pos="1"] .buyer-tile-photo-bg { background-position:  50%   0%; }
.buyer-tile-photo[data-pos="2"] .buyer-tile-photo-bg { background-position: 100%   0%; }
.buyer-tile-photo[data-pos="3"] .buyer-tile-photo-bg { background-position:   0% 100%; }
.buyer-tile-photo[data-pos="4"] .buyer-tile-photo-bg { background-position:  50% 100%; }
.buyer-tile-photo[data-pos="5"] .buyer-tile-photo-bg { background-position: 100% 100%; }

.buyer-tile-photo-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.82) 55%,
    rgba(255, 255, 255, 0.62) 100%);
  transition: background 0.4s ease;
  pointer-events: none;
}
.buyer-tile-photo:hover .buyer-tile-photo-bg {
  transform: scale(1.06);
}
.buyer-tile-photo:hover .buyer-tile-photo-veil {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.55) 55%,
    rgba(255, 255, 255, 0.32) 100%);
}
.buyer-tile-content {
  position: relative;
  z-index: 2;
}
.buyer-tile-photo h3, .buyer-tile-photo p {
  text-shadow: 0 1px 6px rgba(255,255,255,0.7);
}


/* ─── Operating discipline · visual redesign ─────────────────────────── */

.discipline-grid {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  gap: 24px;
  align-items: stretch;
}
.discipline-col {
  position: relative;
  padding: 36px 36px 32px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1.2), background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
  z-index: 1;
}
.discipline-col::before {
  /* Faint vertical band along the left edge — red for NOT, green for DO */
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  pointer-events: none;
  transition: width 0.4s ease;
}
.discipline-not::before { background: linear-gradient(180deg, #C75441 0%, #8A2E1F 100%); }
.discipline-do::before  { background: linear-gradient(180deg, #72BD2D 0%, #3F8D1A 100%); }
.discipline-not:hover {
  background: linear-gradient(155deg, rgba(165, 45, 30, 0.30) 0%, rgba(20, 9, 3, 0.5) 100%);
  border-color: rgba(199, 84, 65, 0.65);
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(199, 84, 65, 0.20);
}
.discipline-do:hover {
  background: linear-gradient(155deg, rgba(63, 141, 26, 0.30) 0%, rgba(20, 9, 3, 0.5) 100%);
  border-color: #93C75A;
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(114, 189, 45, 0.25);
}
.discipline-col:hover::before { width: 5px; }

.discipline-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.discipline-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1.3), box-shadow 0.4s ease;
}
.discipline-icon svg { width: 28px; height: 28px; display: block; }
.discipline-not .discipline-icon {
  background: rgba(199, 84, 65, 0.18);
  color: #F2A697;
  border: 1px solid rgba(199, 84, 65, 0.55);
}
.discipline-do .discipline-icon {
  background: rgba(114, 189, 45, 0.18);
  color: #BDE885;
  border: 1px solid rgba(114, 189, 45, 0.55);
}
.discipline-col:hover .discipline-icon {
  transform: rotate(-8deg) scale(1.12);
}
.discipline-not:hover .discipline-icon {
  background: #C75441;
  color: #FFFFFF;
  box-shadow: 0 0 24px rgba(199, 84, 65, 0.45);
}
.discipline-do:hover .discipline-icon {
  background: #72BD2D;
  color: #FFFFFF;
  box-shadow: 0 0 24px rgba(114, 189, 45, 0.55);
}
.discipline-kicker {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--cream);
  line-height: 1;
}
.discipline-sub {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}
.discipline-not .discipline-sub { color: rgba(242, 166, 151, 0.85); }
.discipline-do  .discipline-sub { color: rgba(189, 232, 133, 0.85); }

.discipline-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.discipline-col li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 16px;
  font-weight: 500;
  color: var(--cream);
  line-height: 1.45;
  letter-spacing: -0.005em;
  transition: padding-left 0.3s cubic-bezier(.2,.8,.2,1.2);
}
.discipline-col li:hover { padding-left: 6px; }
.discipline-col li:last-child { border-bottom: 0; }
.discipline-bullet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  transition: transform 0.35s ease;
}
.discipline-bullet svg { width: 12px; height: 12px; }
.discipline-bullet.not {
  background: rgba(199, 84, 65, 0.20);
  color: #F2A697;
}
.discipline-bullet.do {
  background: rgba(114, 189, 45, 0.20);
  color: #BDE885;
}
.discipline-col li:hover .discipline-bullet { transform: scale(1.18); }

.discipline-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.discipline-divider::before,
.discipline-divider::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(184, 148, 90, 0.40), transparent);
  transform: translateX(-50%);
}
.discipline-divider::before { top: 0; bottom: 50%; margin-bottom: 24px; }
.discipline-divider::after  { top: 50%; bottom: 0;   margin-top: 24px;   }
.discipline-divider span {
  font-size: 13px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(184, 148, 90, 0.5);
  background: rgba(184, 148, 90, 0.10);
}

@media (max-width: 980px) {
  .discipline-grid { grid-template-columns: 1fr; }
  .discipline-divider { transform: rotate(90deg); margin: 8px 0; height: 60px; }
}


/* ─── Brand-name highlight ─────────────────────────────────────────────── */
/* "Cocoa Empire" mentions in body copy. Cream-tinted bold so the brand
   pops in every paragraph. Dark backgrounds default. */
.ce-name {
  font-weight: 800 !important;
  color: var(--cream) !important;
  letter-spacing: -0.005em;
}
/* On light surfaces, switch to cocoa-dark + same weight */
.section:not(.dark):not(.dark-deep):not(.beige) .ce-name,
.section.final-cta .ce-name,
.market-section .ce-name,
.metric-carousel .ce-name {
  color: var(--cocoa) !important;
}
/* Beige sections keep cocoa too */
.section.beige .ce-name { color: var(--cocoa) !important; }

/* ─── Decorative cocoa pod corners on plain light sections ─────────── */
/* Adds a subtle, rotated logo-style pod silhouette to large blocks that
   sit on cream/white without a photo background. Each angle (.angle-N)
   picks a different rotation so consecutive sections feel distinct. */
.section:not(.dark):not(.dark-deep):not(.beige):not(.market-section):not(.impact-section):not(.financing-intro):not(.builtnew-photo):not(.team-hero):not(.supply-hero):not(.quote-bg):not(.discipline-photo):not(.origin-story):not(.buyers-hero):not(.supply-cta):not(.team-closing):not(.hero):not(.impact-photo)::before {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  background-image: url("assets/cocoa-pod.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.045;
  pointer-events: none;
  z-index: 0;
}
.section:not(.dark):not(.dark-deep):not(.beige):not(.market-section):not(.impact-section):not(.financing-intro):not(.builtnew-photo):not(.team-hero):not(.supply-hero):not(.quote-bg):not(.discipline-photo):not(.origin-story):not(.buyers-hero):not(.supply-cta):not(.team-closing):not(.hero):not(.impact-photo) {
  position: relative;
  overflow: hidden;
}
/* Default placement: top-right tilt */
.section:not(.dark):not(.dark-deep):not(.beige):not(.market-section):not(.impact-section):not(.financing-intro):not(.builtnew-photo):not(.team-hero):not(.supply-hero):not(.quote-bg):not(.discipline-photo):not(.origin-story):not(.buyers-hero):not(.supply-cta):not(.team-closing):not(.hero):not(.impact-photo)::before {
  top: -60px;
  right: -60px;
  transform: rotate(18deg);
}
/* Alternate placements via nth-of-type */
.section:not(.dark):not(.dark-deep):not(.beige):not(.market-section):not(.impact-section):not(.financing-intro):not(.builtnew-photo):not(.team-hero):not(.supply-hero):not(.quote-bg):not(.discipline-photo):not(.origin-story):not(.buyers-hero):not(.supply-cta):not(.team-closing):not(.hero):not(.impact-photo):nth-of-type(2n)::before {
  top: auto;
  right: auto;
  bottom: -80px;
  left: -70px;
  transform: rotate(-32deg);
}
.section:not(.dark):not(.dark-deep):not(.beige):not(.market-section):not(.impact-section):not(.financing-intro):not(.builtnew-photo):not(.team-hero):not(.supply-hero):not(.quote-bg):not(.discipline-photo):not(.origin-story):not(.buyers-hero):not(.supply-cta):not(.team-closing):not(.hero):not(.impact-photo):nth-of-type(3n)::before {
  top: 40%;
  right: -80px;
  bottom: auto;
  left: auto;
  transform: rotate(56deg) scale(1.2);
}
.section:not(.dark):not(.dark-deep):not(.beige):not(.market-section):not(.impact-section):not(.financing-intro):not(.builtnew-photo):not(.team-hero):not(.supply-hero):not(.quote-bg):not(.discipline-photo):not(.origin-story):not(.buyers-hero):not(.supply-cta):not(.team-closing):not(.hero):not(.impact-photo):nth-of-type(4n)::before {
  top: 10%;
  left: -100px;
  right: auto;
  bottom: auto;
  transform: rotate(-72deg) scale(0.9);
}
/* Make sure section content sits above the pod */
.section .container { position: relative; z-index: 1; }


/* ─── Risk & Control Journey ───────────────────────────────────────────── */

.journey-stage {
  position: relative;
  background: var(--cocoa);
  color: var(--cream);
  min-height: 100vh;
  padding: 100px 0 80px;
  overflow: hidden;
}
.journey-stage::before {
  /* Atmospheric warm vignette + faint pod glyph drift */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(184, 148, 90, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(46, 74, 53, 0.20) 0%, transparent 50%),
    linear-gradient(180deg, var(--cocoa-deep) 0%, var(--cocoa) 50%, var(--cocoa-deep) 100%);
  pointer-events: none;
  z-index: 0;
}
.journey-stage::after {
  /* huge faint pod silhouette in the back */
  content: "";
  position: absolute;
  right: -200px;
  top: 20%;
  width: 720px;
  height: 720px;
  background-image: url("assets/cocoa-pod.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.045;
  transform: rotate(18deg);
  pointer-events: none;
  z-index: 0;
}
.journey-stage > * { position: relative; z-index: 2; }

.journey-back {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--gold);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 var(--pad-x) 32px;
  padding: 8px 0;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.journey-back:hover { opacity: 1; transform: translateX(-3px); }

.journey-header { max-width: 100%; padding-bottom: 32px; }

/* ─── Stepper bar ───────────────────────────────────────────────────────── */
.journey-stepper { padding: 0 var(--pad-x); margin-bottom: 56px; }
.journey-rail {
  position: relative;
  height: 56px;
  display: flex;
  align-items: center;
}
.journey-rail::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: rgba(255, 255, 255, 0.10);
  transform: translateY(-50%);
}
.journey-rail-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 3px;
  background: linear-gradient(90deg, var(--gold) 0%, #C9A871 100%);
  transform: translateY(-50%);
  transition: width 0.7s cubic-bezier(.5,.05,.35,1);
  box-shadow: 0 0 18px rgba(184,148,90,0.5);
}
.journey-rail-stops {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.journey-stop {
  appearance: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: var(--cocoa-deep);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.12);
  color: rgba(248, 245, 241, 0.55);
  font: 800 11px/1 "Raleway", sans-serif;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(.3,.8,.3,1.2), background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.journey-stop:hover { transform: scale(1.15); color: var(--cream); }
.journey-stop.is-done {
  background: var(--cocoa);
  box-shadow: inset 0 0 0 2px var(--gold);
  color: var(--gold);
}
.journey-stop.is-active {
  background: var(--gold);
  color: var(--cocoa);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.4),
    0 0 0 4px rgba(184,148,90,0.20),
    0 0 24px rgba(184,148,90,0.45);
  transform: scale(1.2);
}
.journey-stop.is-payment.is-active {
  background: #72BD2D;
  color: #FFFFFF;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.5),
    0 0 0 5px rgba(114,189,45,0.30),
    0 0 28px rgba(114,189,45,0.55);
  animation: payment-stop-pulse 1.8s ease-in-out infinite;
}
@keyframes payment-stop-pulse {
  0%,100% { box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.5),
    0 0 0 5px rgba(114,189,45,0.30),
    0 0 28px rgba(114,189,45,0.55); }
  50% { box-shadow:
    inset 0 0 0 3px rgba(255,255,255,0.6),
    0 0 0 10px rgba(114,189,45,0.18),
    0 0 38px rgba(114,189,45,0.7); }
}

/* ─── Scene wrapper + transitions ─────────────────────────────────────── */
.journey-scene {
  min-height: 60vh;
}
.journey-scene-next { animation: scene-in-right 0.55s cubic-bezier(.2,.7,.2,1) both; }
.journey-scene-prev { animation: scene-in-left  0.55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes scene-in-right {
  from { opacity: 0; transform: translateX(60px) scale(0.99); filter: blur(6px); }
  to   { opacity: 1; transform: translateX(0)    scale(1);    filter: blur(0); }
}
@keyframes scene-in-left {
  from { opacity: 0; transform: translateX(-60px) scale(0.99); filter: blur(6px); }
  to   { opacity: 1; transform: translateX(0)     scale(1);    filter: blur(0); }
}

/* ─── Scene composition ───────────────────────────────────────────────── */
.scene {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 64px;
  align-items: start;
}
.scene-rail { position: relative; padding-top: 12px; }
.scene-num-stack { position: relative; line-height: 0.85; }
.scene-mega {
  font-size: clamp(160px, 18vw, 240px);
  font-weight: 800;
  letter-spacing: -0.06em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 2;
  text-shadow: 0 6px 28px rgba(0,0,0,0.35);
}
.scene-mega-shadow {
  position: absolute;
  top: 16px;
  left: 12px;
  font-size: clamp(160px, 18vw, 240px);
  font-weight: 800;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(184, 148, 90, 0.30);
  font-variant-numeric: tabular-nums;
  z-index: 1;
}
.scene-rail-meta { margin-top: 12px; }
.scene-rail-meta .kicker {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(248, 245, 241, 0.5);
}
.scene-header {
  margin-top: 12px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--cream);
}

.scene-headline {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin-bottom: 26px;
  text-wrap: balance;
}
.scene-headline .t-light { font-weight: 300; }
.scene-headline .t-bold  { font-weight: 800; color: var(--cream); }

.scene-explain {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(248, 245, 241, 0.86);
  max-width: 64ch;
  font-weight: 500;
  margin: 0 0 28px;
}

.scene-pull {
  margin: 0 0 36px;
  padding: 22px 28px;
  background: linear-gradient(120deg, rgba(184, 148, 90, 0.18) 0%, rgba(184, 148, 90, 0.04) 100%);
  border-left: 4px solid var(--gold);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--cream);
  max-width: 60ch;
  position: relative;
}
.scene-pull strong { font-weight: 800; color: var(--gold); }

/* ─── Two solid panels (no thin borders) ──────────────────────────────── */
.scene-blocks {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 22px;
  margin-top: 12px;
}
.scene-problem,
.scene-control {
  position: relative;
  padding: 32px 32px 30px;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1.2), box-shadow 0.4s ease;
}
.scene-problem:hover, .scene-control:hover {
  transform: translateY(-4px);
}
.scene-problem {
  /* warm/red wash — risk side */
  background: linear-gradient(155deg, rgba(166, 50, 32, 0.30) 0%, rgba(70, 22, 14, 0.85) 100%);
  color: var(--cream);
  box-shadow:
    inset 0 0 0 1px rgba(199, 84, 65, 0.30),
    0 16px 38px rgba(0, 0, 0, 0.35);
}
.scene-problem::before {
  content: "";
  position: absolute;
  inset: auto -40px -50px auto;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199, 84, 65, 0.40) 0%, transparent 70%);
  pointer-events: none;
}
.scene-problem:hover {
  background: linear-gradient(155deg, rgba(199, 84, 65, 0.42) 0%, rgba(70, 22, 14, 0.92) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(199, 84, 65, 0.55),
    0 24px 50px rgba(199, 84, 65, 0.22),
    0 16px 38px rgba(0, 0, 0, 0.4);
}

.scene-control {
  /* solid cream surface — the platform's discipline */
  background: linear-gradient(160deg, #F8F5F1 0%, #E8DED3 100%);
  color: var(--cocoa);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.05),
    0 18px 42px rgba(0, 0, 0, 0.32);
}
.scene-control:hover {
  background: linear-gradient(160deg, #FAF7F2 0%, #DBCEB9 100%);
  box-shadow:
    inset 0 0 0 1px var(--gold),
    0 26px 56px rgba(184, 148, 90, 0.32),
    0 18px 42px rgba(0, 0, 0, 0.32);
}

.scene-block-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}
.scene-problem .scene-block-head { border-bottom-color: rgba(255, 255, 255, 0.16); }
.scene-block-icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1.3);
}
.scene-block-icon svg { width: 30px; height: 30px; display: block; }
.scene-block-icon.problem {
  background: rgba(199, 84, 65, 0.20);
  color: #F2A697;
  border: 1px solid rgba(242, 166, 151, 0.6);
}
.scene-block-icon.control {
  background: rgba(184, 148, 90, 0.20);
  color: var(--cocoa);
  border: 1px solid var(--cocoa);
}
.scene-problem:hover .scene-block-icon.problem { transform: rotate(-8deg) scale(1.1); }
.scene-control:hover .scene-block-icon.control { transform: rotate(-6deg) scale(1.1); }

.scene-block-lbl {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.scene-block-sub {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 800;
}
.scene-problem .scene-block-sub { color: rgba(242, 166, 151, 0.85); }
.scene-control .scene-block-sub { color: var(--muted); }

.scene-problem p {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: #FFFFFF;
  letter-spacing: -0.005em;
}

.scene-control ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
.scene-control li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(61, 28, 8, 0.10);
  font-size: 15px;
  font-weight: 600;
  color: var(--cocoa);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.scene-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(184, 148, 90, 0.20);
  color: var(--cocoa);
  flex-shrink: 0;
}
.scene-tick svg { width: 13px; height: 13px; }

/* Payment scene cue: scene-control glows pre-celebration */
.is-payment-scene .scene-control {
  background: linear-gradient(160deg, #DDEEC9 0%, #B6D87E 100%);
  box-shadow:
    inset 0 0 0 1px rgba(114, 189, 45, 0.6),
    0 24px 56px rgba(114, 189, 45, 0.35);
  animation: payment-glow 2.2s ease-in-out infinite;
}
@keyframes payment-glow {
  0%,100% { box-shadow:
    inset 0 0 0 1px rgba(114, 189, 45, 0.6),
    0 24px 56px rgba(114, 189, 45, 0.35); }
  50%     { box-shadow:
    inset 0 0 0 1px rgba(114, 189, 45, 0.9),
    0 30px 70px rgba(114, 189, 45, 0.55); }
}

/* ─── Bottom nav ──────────────────────────────────────────────────────── */
.journey-nav {
  margin-top: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.journey-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 4px;
  border: 0;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
}
.journey-btn.ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--cream);
}
.journey-btn.ghost:hover { background: rgba(255,255,255,0.06); border-color: var(--cream); }
.journey-btn.primary {
  background: var(--gold);
  color: var(--cocoa);
  box-shadow: 0 14px 32px rgba(184, 148, 90, 0.30);
}
.journey-btn.primary:hover {
  background: #C9A871;
  transform: translateY(-2px);
  box-shadow: 0 22px 46px rgba(184, 148, 90, 0.42);
}
.journey-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.journey-counter {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--cream);
}
.journey-counter .now {
  font-size: 36px;
  font-weight: 800;
  color: var(--gold);
}
.journey-counter .sep { color: rgba(255,255,255,0.3); font-size: 18px; font-weight: 300; }
.journey-counter .total { font-size: 18px; font-weight: 500; opacity: 0.65; }

@media (max-width: 980px) {
  .scene { grid-template-columns: 1fr; gap: 32px; }
  .scene-mega { font-size: 120px; }
  .scene-mega-shadow { font-size: 120px; top: 10px; left: 6px; }
  .scene-blocks { grid-template-columns: 1fr; }
  .scene-control ul { grid-template-columns: 1fr; }
  .journey-stop { width: 28px; height: 28px; font-size: 9px; }
}

/* ─── Celebration overlay (step 07) ──────────────────────────────────── */
.celebration {
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  background: rgba(20, 9, 3, 0.78);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: celebration-fade-in 0.4s ease forwards;
}
@keyframes celebration-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.celebration-close {
  position: absolute;
  top: 24px;
  right: 32px;
  background: transparent;
  border: 0;
  color: var(--cream);
  font-size: 36px;
  font-weight: 200;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transition: background 0.2s ease;
}
.celebration-close:hover { background: rgba(255,255,255,0.10); }

.celebration-card {
  position: relative;
  padding: 64px 72px 56px;
  border-radius: 8px;
  background: linear-gradient(165deg, #FFFFFF 0%, #F0F7E8 100%);
  color: var(--cocoa);
  text-align: center;
  max-width: 640px;
  width: 100%;
  box-shadow:
    0 0 0 1px rgba(114, 189, 45, 0.4),
    0 60px 120px rgba(0, 0, 0, 0.50),
    0 0 80px rgba(114, 189, 45, 0.35);
  animation: celebration-pop 0.7s cubic-bezier(.2,.9,.25,1.4) forwards;
  overflow: hidden;
}
@keyframes celebration-pop {
  0%   { opacity: 0; transform: scale(0.55) rotate(-3deg); }
  60%  { opacity: 1; transform: scale(1.06) rotate(2deg);  }
  100% { opacity: 1; transform: scale(1)    rotate(0);     }
}

.celebration-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(114,189,45,0.40) 0%, rgba(114,189,45,0) 70%);
  transform: translate(-50%, -50%);
  animation: celebration-burst 1.0s cubic-bezier(.2,.7,.3,1) 0.1s forwards;
  z-index: 0;
}
@keyframes celebration-burst {
  0%   { width: 0; height: 0; opacity: 0; }
  20%  { opacity: 1; }
  100% { width: 900px; height: 900px; opacity: 0; }
}
.celebration-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin: -40px 0 0 -40px;
  border: 2px solid #72BD2D;
  border-radius: 50%;
  opacity: 0;
  z-index: 0;
}
.celebration-ring.r1 { animation: celebration-ring 1.2s cubic-bezier(.2,.7,.3,1) 0.10s forwards; }
.celebration-ring.r2 { animation: celebration-ring 1.2s cubic-bezier(.2,.7,.3,1) 0.25s forwards; }
.celebration-ring.r3 { animation: celebration-ring 1.2s cubic-bezier(.2,.7,.3,1) 0.40s forwards; }
@keyframes celebration-ring {
  0%   { opacity: 0; transform: scale(0.2); border-width: 3px; }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: scale(7);   border-width: 0.5px; }
}
.celebration-card > * { position: relative; z-index: 1; }

.celebration-stamp {
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  display: block;
  animation: stamp-bounce 0.9s cubic-bezier(.2,.9,.25,1.5) 0.35s both;
  filter: drop-shadow(0 8px 18px rgba(114, 189, 45, 0.40));
}
@keyframes stamp-bounce {
  0%   { opacity: 0; transform: scale(0) rotate(-20deg); }
  60%  { opacity: 1; transform: scale(1.2) rotate(10deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

.celebration-meta {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 800;
  color: #4B8E1E;
}
.celebration-title {
  margin: 14px 0 14px;
  font-size: clamp(48px, 5.4vw, 76px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 0.98;
  color: var(--cocoa);
}
.celebration-title .hl {
  font-weight: 800;
  color: #4B8E1E;
}
.celebration-sub {
  margin: 0 auto 32px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 44ch;
  font-weight: 500;
}
.celebration-sub strong {
  font-weight: 800;
  color: var(--cocoa);
}

.celebration-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0 0 32px;
  border-top: 1px solid rgba(61, 28, 8, 0.10);
  border-bottom: 1px solid rgba(61, 28, 8, 0.10);
  padding: 22px 0;
}
.celebration-stats > div { padding: 4px 12px; }
.celebration-stats .k {
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--muted);
}
.celebration-stats .v {
  margin-top: 6px;
  font-size: 32px;
  font-weight: 800;
  color: #4B8E1E;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Confetti — full-screen rain */
.confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.confetti span {
  position: absolute;
  top: -20px;
  left: var(--x);
  width: var(--w);
  height: var(--h);
  background: var(--c);
  transform: rotate(var(--r));
  animation: confetti-fall calc(2.2s + var(--d)) cubic-bezier(.3,.1,.5,1) var(--d) infinite;
}
@keyframes confetti-fall {
  to { transform: translateY(120vh) rotate(calc(var(--r) + 720deg)); }
}


/* ─── Calculator · denser layout to fit standard screens ───────────────── */
.calc { margin-top: 56px; }
.calc-input {
  max-width: 620px;
  margin: 0 auto 32px;
  padding: 24px 32px 22px;
}
.calc-amount-row { margin-bottom: 12px; gap: 18px; }
.calc-step {
  width: 36px;
  height: 36px;
  font-size: 18px;
}
.calc-amount .v {
  font-size: clamp(36px, 4.4vw, 56px) !important;
}
.calc-amount .lbl {
  font-size: 10px !important;
  margin-top: 6px !important;
}
.calc-scale { margin-top: 12px; font-size: 10px; }

.calc-scenarios {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.calc-scen {
  padding: 26px 22px 22px !important;
}
.calc-flag {
  font-size: 9px !important;
  padding: 3px 11px !important;
  top: -10px !important;
}
.calc-scen-head { margin-bottom: 18px; }
.calc-scen .kicker { font-size: 10px !important; }
.calc-cyc {
  font-size: 19px !important;
}
.calc-cyc span { font-size: 10px !important; }
.calc-pct {
  font-size: clamp(42px, 4.4vw, 60px) !important;
}
.calc-pct .unit {
  font-size: 18px !important;
}
.calc-pct-lbl {
  font-size: 10px !important;
  margin-top: 6px;
}
.calc-divider { margin: 18px 0 12px !important; }
.calc-yield-row, .calc-total-row { padding: 6px 0 !important; }
.calc-yield-row .k, .calc-total-row .k { font-size: 10px !important; }
.calc-yield-row .v { font-size: 14px !important; }
.calc-total-row .v { font-size: 18px !important; }

.calc-return { padding: 14px 4px 4px; }
.calc-return-pct { font-size: 36px !important; }
.calc-return-pct .unit { font-size: 18px !important; }
.calc-return-lbl { font-size: 10px !important; margin-top: 6px !important; }
.calc-return-amt { font-size: 14px !important; margin-top: 8px !important; }

.calc-foot { font-size: 11px; margin-top: 22px; }


/* ─── Journey scene · DENSER for any screen ────────────────────────── */
.journey-stage { padding: 80px 0 60px !important; }
.journey-header h1.display { font-size: clamp(32px, 4vw, 56px) !important; }
.journey-stepper { margin-bottom: 36px !important; }
.journey-rail { height: 44px; }
.journey-stop {
  width: 30px !important;
  height: 30px !important;
  font-size: 10px !important;
}

.scene {
  grid-template-columns: 280px 1fr !important;
  gap: 40px !important;
}
.scene-mega {
  font-size: clamp(120px, 12vw, 180px) !important;
}
.scene-mega-shadow {
  font-size: clamp(120px, 12vw, 180px) !important;
  top: 10px;
  left: 8px;
}
.scene-rail-meta .kicker { font-size: 10px !important; }
.scene-header { font-size: 18px !important; margin-top: 8px; }
.scene-headline {
  font-size: clamp(28px, 3.6vw, 44px) !important;
  margin-bottom: 18px !important;
}
.scene-explain {
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin-bottom: 22px !important;
}
.scene-pull {
  margin-bottom: 24px !important;
  padding: 16px 22px !important;
  font-size: 16px !important;
}

.scene-blocks {
  grid-template-columns: 1fr 1.1fr !important;
  gap: 16px !important;
}
.scene-problem, .scene-control {
  padding: 22px 22px 20px !important;
  border-radius: 6px !important;
}

/* "How we control it" — restyled with cleaner type + new icon family */
.scene-block-head {
  margin-bottom: 18px !important;
  padding-bottom: 16px !important;
  gap: 14px !important;
}
.scene-block-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 8px !important; /* squared rather than circle */
}
.scene-block-icon svg { width: 22px !important; height: 22px !important; }
.scene-block-icon.problem {
  background: linear-gradient(155deg, rgba(199, 84, 65, 0.30) 0%, rgba(165, 45, 30, 0.10) 100%);
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(242, 166, 151, 0.55);
}
.scene-block-icon.control {
  background: linear-gradient(155deg, rgba(184, 148, 90, 0.30) 0%, rgba(184, 148, 90, 0.08) 100%);
  border: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(184, 148, 90, 0.55);
}
.scene-block-lbl {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}
.scene-block-sub {
  margin-top: 4px !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
}
.scene-problem p {
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}
.scene-control ul {
  gap: 4px 18px !important;
}
.scene-control li {
  padding: 8px 0 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  border-bottom: 1px solid rgba(61, 28, 8, 0.08) !important;
  font-family: "Raleway", sans-serif !important;
}
.scene-tick {
  width: 20px !important;
  height: 20px !important;
  border-radius: 4px !important; /* squared chips */
  background: var(--gold) !important;
  color: var(--cocoa-deep) !important;
}
.scene-tick svg { width: 11px !important; height: 11px !important; }

/* "How we control it" — chip-style checklist on hover */
.scene-control li {
  transition: padding-left 0.25s ease, background 0.25s ease;
}
.scene-control li:hover {
  padding-left: 4px !important;
  background: linear-gradient(90deg, rgba(184, 148, 90, 0.12), transparent 70%);
}

.journey-nav { margin-top: 36px !important; }
.journey-btn { padding: 12px 22px !important; font-size: 11px !important; }
.journey-counter .now { font-size: 28px !important; }

@media (max-width: 980px) {
  .scene { grid-template-columns: 1fr !important; gap: 24px !important; }
  .scene-mega { font-size: 88px !important; }
  .scene-mega-shadow { font-size: 88px !important; top: 6px; left: 4px; }
  .scene-blocks { grid-template-columns: 1fr !important; }
  .scene-control ul { grid-template-columns: 1fr !important; }
}

/* ─── Celebration · tamer + cocoa pod rain ─────────────────────────── */

.celebration {
  background: rgba(20, 9, 3, 0.62) !important;
  backdrop-filter: blur(6px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(115%) !important;
}
.celebration-card {
  padding: 44px 52px 40px !important;
  max-width: 520px !important;
  box-shadow:
    0 0 0 1px rgba(114, 189, 45, 0.30),
    0 40px 80px rgba(0, 0, 0, 0.40) !important;
  animation: celebration-pop-tame 0.55s cubic-bezier(.2,.8,.25,1.15) forwards !important;
}
@keyframes celebration-pop-tame {
  0%   { opacity: 0; transform: scale(0.85) translateY(12px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* Soften burst + rings */
.celebration-burst {
  animation-duration: 0.8s !important;
}
@keyframes celebration-burst {
  0%   { width: 0; height: 0; opacity: 0; }
  20%  { opacity: 0.85; }
  100% { width: 600px; height: 600px; opacity: 0; }
}
.celebration-ring { display: none !important; }

.celebration-stamp { width: 72px !important; height: 72px !important; margin-bottom: 18px !important; }
.celebration-meta { font-size: 10px !important; }
.celebration-title {
  font-size: clamp(36px, 4.2vw, 52px) !important;
  margin: 10px 0 12px !important;
}
.celebration-sub {
  font-size: 14.5px !important;
  margin-bottom: 22px !important;
}
.celebration-stats { padding: 16px 0 !important; margin-bottom: 22px !important; }
.celebration-stats .v { font-size: 24px !important; }
.celebration-stats .k { font-size: 9.5px !important; }

/* Cocoa pod rain (replaces confetti rectangles) */
.pod-rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.pod-rain svg {
  position: absolute;
  top: -60px;
  left: var(--x);
  width: var(--w);
  height: auto;
  transform: rotate(var(--r));
  animation: pod-fall var(--dur) cubic-bezier(.3,.1,.5,1) var(--d) infinite,
             pod-spin var(--dur) linear var(--d) infinite;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
}
@keyframes pod-fall {
  0%   { top: -80px; }
  100% { top: 110vh; }
}
@keyframes pod-spin {
  0%   { transform: rotate(var(--r)); }
  100% { transform: rotate(calc(var(--r) + 540deg)); }
}


/* ─── Global compaction: less vertical airy padding everywhere ───────── */
.section { padding-top: calc(72px * var(--density)) !important; padding-bottom: calc(72px * var(--density)) !important; }
.section.tight { padding-top: calc(48px * var(--density)) !important; padding-bottom: calc(48px * var(--density)) !important; }

/* Hero · trim breathing room */
.hero-inner { padding-top: clamp(56px, 8vh, 96px) !important; padding-bottom: clamp(44px, 6vh, 76px) !important; }
.hero-meta { margin-top: 40px !important; padding-top: 22px !important; gap: 22px 32px !important; }
.hero-meta .cell .figure { font-size: 44px !important; }
.hero-meta .cell:hover .figure { font-size: 52px !important; }

/* Display headlines · cap maximum size */
.display { font-size: clamp(28px, 3.6vw, 52px) !important; }
.hero h1 { font-size: clamp(44px, 7vw, 96px) !important; }

/* Big mid-section padded blocks · drop top/bottom */
.thesis { gap: 56px !important; }
.thesis .right .item { padding: 22px 0 !important; }
.thesis .right .item .num { font-size: 44px !important; margin-bottom: 2px !important; }
.thesis .right .item h3 { font-size: 20px !important; margin: 4px 0 8px !important; }
.thesis .right .item p { font-size: 15px !important; }

.infra-grid-rich .infra-rich-tile { min-height: 220px !important; padding: 28px 26px 24px !important; }
.infra-rich-n { font-size: 44px !important; margin-bottom: 16px !important; }
.infra-rich-v { font-size: 24px !important; margin-bottom: 12px !important; }

/* Operating flow cards · denser */
.flow-cards { margin-top: 44px !important; }
.flow-card { padding: 28px 22px 30px !important; }
.flow-num { font-size: 48px !important; margin-bottom: 2px !important; }
.flow-t { font-size: 18px !important; margin-bottom: 12px !important; }
.flow-card p { font-size: 13px !important; }

/* Capability + proven + buyer + cap-pillar grids · tighter */
.cap-card { padding: 28px 22px !important; }
.cap-num { font-size: 30px !important; margin-bottom: 14px !important; }
.cap-card h3 { font-size: 17px !important; }
.cap-card p { font-size: 13px !important; }

.proven-tile { padding: 26px 22px !important; }
.proven-tile h3 { font-size: 18px !important; }
.proven-tile p { font-size: 13.5px !important; }

.buyer-tile, .buyer-tile-photo { padding: 24px 22px 22px !important; }
.buyer-tile h3 { font-size: 17px !important; }
.buyer-tile p { font-size: 13.5px !important; }
.buyer-icon { width: 46px !important; height: 46px !important; margin-bottom: 16px !important; }

.cap-pillar { padding: 26px 22px !important; }
.cap-pillar h3 { font-size: 18px !important; }
.cap-pillar p { font-size: 13.5px !important; }

/* Discipline cards */
.discipline-col { padding: 26px 26px 22px !important; }
.discipline-head { margin-bottom: 18px !important; padding-bottom: 16px !important; }
.discipline-kicker { font-size: 18px !important; }
.discipline-col li { padding: 10px 0 !important; font-size: 14.5px !important; }

/* Origin-story band · smaller min-height */
.origin-story { min-height: 480px !important; }
.origin-story-inner { padding-top: 88px !important; padding-bottom: 56px !important; }
.origin-story-headline { font-size: clamp(28px, 4vw, 52px) !important; }
.origin-story-meta { margin-top: 36px !important; padding-top: 20px !important; gap: 32px !important; }
.origin-story-meta .cell .v { font-size: 26px !important; margin-top: 4px !important; }

/* Buyer / Supply / Team heroes · shorter */
.buyers-hero, .supply-hero, .team-hero, .financing-intro {
  min-height: 380px !important;
  padding-top: 72px !important;
  padding-bottom: 56px !important;
}

/* Impact · tighter */
.impact-section { min-height: 480px !important; }
.impact-headline .pct { font-size: clamp(72px, 9vw, 120px) !important; }
.impact-headline .line { font-size: clamp(24px, 2.4vw, 36px) !important; }
.impact-grid { gap: 10px !important; }
.impact-tile { padding: 14px 18px !important; font-size: 14px !important; }

/* Team · compact */
.team-grid { gap: 24px 22px !important; }
.team-card image-slot { aspect-ratio: 5/6 !important; }
.team-name { font-size: 16px !important; }
.team-role { font-size: 13px !important; margin-top: 4px !important; }

/* Gallery */
.gallery-grid { gap: 12px !important; }
.gallery-cap { padding: 10px 14px !important; }
.gallery-cap span:last-child { font-size: 12px !important; }

/* Footer */
.footer-inner { padding: 56px var(--pad-x) 28px !important; }
.footer-top { padding-bottom: 36px !important; gap: 36px !important; }
.footer-statement { font-size: 18px !important; }


/* ─── Capability cards · big translucent numerals ──────────────────── */
.capability-grid {
  position: relative;
}
.cap-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cap-num {
  position: relative;
  font-size: 96px !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  color: var(--gold) !important;
  opacity: 0.18 !important;
  line-height: 0.85 !important;
  margin-bottom: 4px !important;
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(.2,.8,.2,1.2) !important;
  z-index: 0;
}
.cap-card:hover .cap-num {
  opacity: 0.42 !important;
  transform: translateY(-4px) scale(1.05);
}
.cap-card h3, .cap-card p { position: relative; z-index: 1; }

/* Decorative pod inside each cap card */
.cap-card::after {
  content: "";
  position: absolute;
  right: -32px;
  bottom: -42px;
  width: 130px;
  height: 130px;
  background-image: url("assets/cocoa-pod.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.05;
  transform: rotate(28deg);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.2,.8,.2,1.2);
  pointer-events: none;
  z-index: 0;
}
.cap-card:hover::after {
  opacity: 0.10;
  transform: rotate(14deg) scale(1.08);
}

/* ─── Add a second pod accent to every section that is not photo-bg ── */
/* Stacks on top of the existing ::before placement; this one floats
   on the opposite axis with smaller scale. */
.section:not(.dark):not(.dark-deep):not(.beige):not(.market-section):not(.impact-section):not(.financing-intro):not(.builtnew-photo):not(.team-hero):not(.supply-hero):not(.quote-bg):not(.discipline-photo):not(.origin-story):not(.buyers-hero):not(.supply-cta):not(.team-closing):not(.hero):not(.impact-photo)::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  background-image: url("assets/cocoa-pod.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
  bottom: -40px;
  left: 8%;
  transform: rotate(-22deg);
}
.section:not(.dark):not(.dark-deep):not(.beige):not(.market-section):not(.impact-section):not(.financing-intro):not(.builtnew-photo):not(.team-hero):not(.supply-hero):not(.quote-bg):not(.discipline-photo):not(.origin-story):not(.buyers-hero):not(.supply-cta):not(.team-closing):not(.hero):not(.impact-photo):nth-of-type(2n)::after {
  bottom: auto;
  left: auto;
  top: 8%;
  right: 16%;
  transform: rotate(44deg);
  width: 160px;
  height: 160px;
}
.section:not(.dark):not(.dark-deep):not(.beige):not(.market-section):not(.impact-section):not(.financing-intro):not(.builtnew-photo):not(.team-hero):not(.supply-hero):not(.quote-bg):not(.discipline-photo):not(.origin-story):not(.buyers-hero):not(.supply-cta):not(.team-closing):not(.hero):not(.impact-photo):nth-of-type(3n)::after {
  top: 50%;
  left: 4%;
  right: auto;
  bottom: auto;
  transform: rotate(82deg) scale(0.85);
}

/* Dark sections get a faint pod too */
.section.dark, .section.dark-deep {
  position: relative;
  overflow: hidden;
}
.section.dark::after, .section.dark-deep::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  background-image: url("assets/cocoa-pod.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  right: -80px;
  bottom: -60px;
  transform: rotate(-12deg);
  filter: brightness(0) invert(1);
}
.section.dark > *, .section.dark-deep > * { position: relative; z-index: 1; }

/* Beige sections too */
.section.beige {
  position: relative;
  overflow: hidden;
}
.section.beige::before {
  content: "";
  position: absolute;
  top: 12%;
  right: -60px;
  width: 260px;
  height: 260px;
  background-image: url("assets/cocoa-pod.png");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.06;
  transform: rotate(34deg);
  pointer-events: none;
  z-index: 0;
}
.section.beige > * { position: relative; z-index: 1; }


/* ─── Photo-backed sections · stronger veils + solid tiles for legibility ── */

/* "Built new · proven in execution" — push veil + tile solidity */
.builtnew-veil {
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.92) 0%,
      rgba(20, 9, 3, 0.82) 30%,
      rgba(20, 9, 3, 0.68) 55%,
      rgba(20, 9, 3, 0.62) 100%) !important,
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.45) 0%,
      rgba(20, 9, 3, 0.30) 40%,
      rgba(20, 9, 3, 0.78) 100%) !important;
}
/* The 4 tiles on top of the photo: solid translucent panels with text-shadow */
.builtnew-photo .proven-grid {
  border-top: 0 !important;
  gap: 14px !important;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.builtnew-photo .proven-tile {
  background: rgba(20, 9, 3, 0.78) !important;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 6px !important;
  padding: 26px 22px !important;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease !important;
}
.builtnew-photo .proven-tile:hover {
  background: rgba(20, 9, 3, 0.88) !important;
  border-color: var(--gold) !important;
  transform: translateY(-3px);
}
.builtnew-photo .proven-tile h3 {
  color: var(--cream) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}
.builtnew-photo .proven-tile p {
  color: rgba(248, 245, 241, 0.92) !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.builtnew-photo .display, .builtnew-photo h2 {
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.75) !important;
}
.builtnew-photo .lede {
  color: #FFFFFF !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.75) !important;
  background: linear-gradient(90deg, rgba(20,9,3,0.40) 0%, rgba(20,9,3,0.10) 100%);
  padding: 14px 18px;
  border-radius: 4px;
  border-left: 2px solid var(--gold);
}

/* Hero · stronger veil so 6 stat tiles read */
.hero-veil {
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.95) 0%,
      rgba(20, 9, 3, 0.82) 35%,
      rgba(20, 9, 3, 0.62) 65%,
      rgba(20, 9, 3, 0.50) 100%) !important,
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.35) 0%,
      rgba(20, 9, 3, 0.10) 40%,
      rgba(20, 9, 3, 0.65) 100%) !important;
}
.hero-meta .cell .note { color: rgba(248, 245, 241, 0.78) !important; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }
.hero-meta .cell .kicker { text-shadow: 0 1px 8px rgba(0,0,0,0.5); }

/* Origin story photo band · push veil left to give headline weight */
.origin-story-veil {
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.92) 0%,
      rgba(20, 9, 3, 0.78) 30%,
      rgba(20, 9, 3, 0.45) 60%,
      rgba(20, 9, 3, 0.28) 100%) !important,
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.30) 0%,
      transparent 35%,
      rgba(20, 9, 3, 0.65) 100%) !important;
}

/* Supply hero same treatment */
.supply-hero-veil {
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.92) 0%,
      rgba(20, 9, 3, 0.78) 35%,
      rgba(20, 9, 3, 0.50) 70%,
      rgba(20, 9, 3, 0.32) 100%) !important,
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.32) 0%,
      transparent 35%,
      rgba(20, 9, 3, 0.60) 100%) !important;
}

/* Team hero */
.team-hero-veil {
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.94) 0%,
      rgba(20, 9, 3, 0.80) 38%,
      rgba(20, 9, 3, 0.48) 100%) !important,
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.32) 0%,
      transparent 35%,
      rgba(20, 9, 3, 0.55) 100%) !important;
}

/* Buyers hero */
.buyers-hero-veil {
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.94) 0%,
      rgba(20, 9, 3, 0.78) 38%,
      rgba(20, 9, 3, 0.50) 65%,
      rgba(20, 9, 3, 0.30) 100%) !important,
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.32) 0%,
      transparent 35%,
      rgba(20, 9, 3, 0.55) 100%) !important;
}

/* Financing intro */
.financing-intro-veil {
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.94) 0%,
      rgba(20, 9, 3, 0.82) 32%,
      rgba(20, 9, 3, 0.55) 60%,
      rgba(20, 9, 3, 0.40) 100%) !important,
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.32) 0%,
      transparent 35%,
      rgba(20, 9, 3, 0.55) 100%) !important;
}

/* Impact photo */
.impact-veil {
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.94) 0%,
      rgba(20, 9, 3, 0.82) 30%,
      rgba(20, 9, 3, 0.55) 60%,
      rgba(20, 9, 3, 0.32) 100%) !important,
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.32) 0%,
      transparent 30%,
      rgba(20, 9, 3, 0.55) 100%) !important;
}

/* Supply CTA · yellow pod bg */
.supply-cta-veil {
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.94) 0%,
      rgba(20, 9, 3, 0.82) 32%,
      rgba(20, 9, 3, 0.55) 65%,
      rgba(20, 9, 3, 0.32) 100%) !important,
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.32) 0%,
      transparent 35%,
      rgba(20, 9, 3, 0.50) 100%) !important;
}

/* Discipline photo · strong veil since lists need readability */
.discipline-veil {
  background:
    linear-gradient(155deg,
      rgba(20, 9, 3, 0.96) 0%,
      rgba(20, 9, 3, 0.88) 50%,
      rgba(20, 9, 3, 0.78) 100%) !important;
}

/* Team closing */
.team-closing-veil {
  background:
    radial-gradient(circle at 50% 50%,
      rgba(20, 9, 3, 0.55) 0%,
      rgba(20, 9, 3, 0.92) 70%) !important,
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.45) 0%,
      rgba(20, 9, 3, 0.72) 100%) !important;
}

/* Quote section · cocoa beans bg */
.quote-bg-veil {
  background:
    linear-gradient(90deg,
      rgba(20, 9, 3, 0.96) 0%,
      rgba(20, 9, 3, 0.86) 35%,
      rgba(20, 9, 3, 0.70) 65%,
      rgba(20, 9, 3, 0.55) 100%) !important,
    linear-gradient(180deg,
      rgba(20, 9, 3, 0.32) 0%,
      transparent 30%,
      rgba(20, 9, 3, 0.50) 100%) !important;
}

/* Universal: text on any dark photo gets a subtle drop shadow safety net */
.builtnew-photo p, .origin-story p, .supply-hero p,
.team-hero p, .buyers-hero p, .financing-intro p,
.impact-photo p, .supply-cta p, .team-closing p,
.quote-bg p {
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}


/* ─── Eyebrow · bigger, bolder, cream across the site ──────────────── */
.eyebrow {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.20em !important;
}
/* Per-section accent color so they read as section markers, not boilerplate */
.section.dark .eyebrow,
.section.dark-deep .eyebrow,
.hero .eyebrow,
.builtnew-photo .eyebrow,
.supply-hero .eyebrow,
.buyers-hero .eyebrow,
.team-hero .eyebrow,
.financing-intro .eyebrow,
.impact-photo .eyebrow,
.origin-story-kicker,
.team-closing .eyebrow {
  color: var(--cream) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.section.dark .eyebrow::before,
.section.dark-deep .eyebrow::before,
.hero .eyebrow::before,
.builtnew-photo .eyebrow::before,
.supply-hero .eyebrow::before,
.buyers-hero .eyebrow::before,
.team-hero .eyebrow::before,
.financing-intro .eyebrow::before,
.impact-photo .eyebrow::before {
  background: var(--gold) !important;
  opacity: 0.9 !important;
  width: 38px !important;
  height: 2px !important;
}

/* Hero · shorter overall */
.hero-inner {
  padding-top: clamp(40px, 6vh, 72px) !important;
  padding-bottom: clamp(32px, 5vh, 56px) !important;
}
.hero h1 {
  font-size: clamp(40px, 6vw, 80px) !important;
  margin: 22px 0 0 !important;
}
.hero .lede { font-size: 17px !important; margin-top: 22px !important; }
.hero-secondary { margin-top: 18px !important; font-size: 16px !important; }
.hero-meta { margin-top: 28px !important; padding-top: 18px !important; gap: 18px 28px !important; }
.hero-meta .cell .figure { font-size: 38px !important; margin-top: 8px !important; }
.hero-meta .cell:hover .figure { font-size: 44px !important; }
.hero-meta .cell .note { font-size: 11px !important; margin-top: 4px !important; }

/* Trust line · big, bold, important */
.hero-trust {
  margin-top: 24px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase;
  color: var(--cream) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
  gap: 18px !important;
}
.hero-trust .sep {
  color: var(--gold) !important;
  font-weight: 800 !important;
  opacity: 0.85 !important;
}


/* ─── Metric carousel · compact + filled (body-style) icons ─────────── */
.metric-carousel { padding: 26px 0 !important; }
.metric-card {
  width: 300px !important;
  padding: 20px 24px !important;
}
.metric-num { font-size: 46px !important; padding-right: 50px !important; }
.metric-num .unit { font-size: 15px !important; }
.metric-lbl { margin-top: 10px !important; font-size: 13px !important; }

/* Icons: larger, filled, with depth (drop-shadow + double layer) */
.metric-icon {
  top: 20px !important;
  right: 20px !important;
  width: 46px !important;
  height: 46px !important;
  background: linear-gradient(155deg, var(--gold) 0%, #8E6E3F 100%) !important;
  color: var(--cream) !important;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18) !important;
}
.metric-icon svg {
  width: 26px !important;
  height: 26px !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}
/* Use thicker stroke + fill for body */
.metric-icon svg path,
.metric-icon svg circle,
.metric-icon svg line {
  stroke-width: 2.4 !important;
}
.metric-card::after { top: 50px !important; right: 50px !important; }
@keyframes bubble-burst {
  0%   { width: 0; height: 0; opacity: 0; }
  20%  { opacity: 1; }
  60%  { width: 140px; height: 140px; opacity: 0.45; }
  100% { width: 180px; height: 180px; opacity: 0; }
}


/* ─── Celebration popup · centered text ────────────────────────────── */
.celebration-card { text-align: center !important; }
.celebration-stamp { margin-left: auto !important; margin-right: auto !important; }
.celebration-meta,
.celebration-title,
.celebration-sub { text-align: center !important; }
.celebration-card .btn { margin-left: auto !important; margin-right: auto !important; display: inline-flex !important; }
.celebration-stats { text-align: center !important; }
.celebration-stats > div { text-align: center !important; }


/* "Every Bag" section — trim top */
.operating-flow { padding-top: 36px !important; padding-bottom: 48px !important; }
.operating-flow .pod-corner.tl { top: -120px !important; left: -120px !important; width: 300px !important; opacity: 0.06 !important; }

/* Strategic #4B8E1E accents */
.hero-secondary strong { color: #4B8E1E !important; }
.buyer-tag { background: #4B8E1E !important; color: #FFFFFF !important; }
.hero-trust .sep { color: #72BD2D !important; opacity: 1 !important; }
.cycle-line-fill { background: #4B8E1E !important; }
.calc-scen.is-base .calc-pct,
.calc-scen.is-base .calc-return-pct,
.calc-scen.is-base .calc-total-row .v { color: #4B8E1E !important; }
.of-strong-2 strong { color: #4B8E1E !important; }
.final-cta .display strong { color: #4B8E1E !important; }
.footer-statement strong:last-of-type { color: #4B8E1E !important; }
.impact-photo .impact-strong { border-left-color: #72BD2D !important; color: #DCEFC1 !important; }
.discipline-do .discipline-icon { background: rgba(75, 142, 30, 0.30) !important; border-color: #4B8E1E !important; color: #FFFFFF !important; }
.discipline-do:hover .discipline-icon { background: #4B8E1E !important; }
.builtnew-photo .proven-tile h3 { color: #BDE885 !important; }


/* ─── Photo-backed text panels · gold-ribbed dark backdrop ────────── */
.builtnew-photo .lede,
.buyers-hero .lede,
.supply-hero .lede,
.team-hero .lede,
.financing-intro .lede,
.impact-photo .lede,
.supply-cta .lede,
.quote-bg-inner .lede,
.origin-story .lede,
.team-closing .lede {
  background: rgba(20, 9, 3, 0.78) !important;
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  padding: 18px 22px !important;
  border-left: 3px solid var(--gold) !important;
  border-radius: 2px;
  color: #FFFFFF !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55) !important;
  font-weight: 500 !important;
}

/* Strong-tagged words inside those panels keep the gold/green accent */
.builtnew-photo .lede strong,
.buyers-hero .lede strong,
.supply-hero .lede strong,
.team-hero .lede strong,
.financing-intro .lede strong,
.impact-photo .lede strong,
.supply-cta .lede strong,
.quote-bg-inner .lede strong,
.origin-story .lede strong,
.team-closing .lede strong {
  color: var(--gold) !important;
  font-weight: 800 !important;
}

/* ce-name inside those panels: keep cream + bold */
.builtnew-photo .lede .ce-name,
.buyers-hero .lede .ce-name,
.supply-hero .lede .ce-name,
.team-hero .lede .ce-name,
.financing-intro .lede .ce-name,
.impact-photo .lede .ce-name,
.supply-cta .lede .ce-name,
.quote-bg-inner .lede .ce-name {
  color: var(--cream) !important;
  font-weight: 800 !important;
}


/* Impact section · fix ce-name visibility + green */
.impact-photo .lede .ce-name {
  color: #F8F5F1 !important;
  font-weight: 800 !important;
}
.impact-photo .impact-strong {
  background: rgba(20, 9, 3, 0.78) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 16px 20px !important;
  border-left: 3px solid #4B8E1E !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
  font-weight: 500 !important;
}


/* Hero secondary tagline · larger, editorial, monochrome cream */
.hero-secondary {
  font-family: "Raleway", sans-serif !important;
  font-size: clamp(20px, 2vw, 28px) !important;
  font-weight: 300 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  color: var(--cream) !important;
  margin-top: 22px !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
  max-width: 28ch;
}
.hero-secondary strong {
  font-weight: 800 !important;
  color: var(--cream) !important;
  letter-spacing: -0.015em;
}


/* "Every Bag" — kill remaining top gap aggressively */
section.operating-flow {
  padding-top: 28px !important;
  padding-bottom: 44px !important;
  min-height: 0 !important;
}
.operating-flow .of-head { padding-top: 0 !important; }
.operating-flow .pod-corner.tl {
  top: -160px !important;
  left: -140px !important;
  width: 240px !important;
  opacity: 0.05 !important;
}


/* Operating principle №1 kicker — push contrast hard */
.quote-bg-inner .kicker {
  display: inline-block;
  background: rgba(20, 9, 3, 0.85);
  padding: 8px 14px;
  color: var(--gold) !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8) !important;
  letter-spacing: 0.22em;
  border-left: 2px solid var(--gold);
}

/* Every Bag — eliminate any padding above .of-head */
.operating-flow { padding-top: 0 !important; }
.operating-flow .container { padding-top: 24px !important; }
.operating-flow .of-head .eyebrow { margin-top: 0 !important; }


/* Celebration card · vertically centered content */
.celebration-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 480px;
}
.celebration-stamp { margin-top: auto !important; }
.celebration-card .btn { margin-bottom: auto !important; }


/* Celebration · lift content up so it sits in the upper-middle */
.celebration-card {
  justify-content: flex-start !important;
  padding-top: 60px !important;
  min-height: 420px !important;
}
.celebration-stamp { margin-top: 0 !important; }
.celebration-card .btn { margin-bottom: 0 !important; margin-top: 12px !important; }


/* All 11 control-step headlines · Raleway 800 */
.scene-headline,
.scene-headline .t-light,
.scene-headline .t-bold {
  font-family: "Raleway", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}


/* Celebration · compact centered card (not full-height strip) */
.celebration {
  align-items: center !important;
  justify-content: center !important;
}
.celebration-card {
  min-height: 0 !important;
  height: auto !important;
  max-width: 480px !important;
  width: auto !important;
  padding: 40px 48px 40px !important;
  border-radius: 10px !important;
  display: block !important;
  text-align: center !important;
  margin: auto !important;
  flex: 0 0 auto !important;
}
.celebration-stamp {
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 16px !important;
}
.celebration-card .btn { margin: 12px auto 0 !important; display: inline-flex !important; }


/* Control journey · cards reskin */
.scene-control {
  background: #FFFFFF !important;
  box-shadow:
    inset 0 0 0 1px rgba(61, 28, 8, 0.06),
    0 18px 42px rgba(0, 0, 0, 0.32) !important;
}
.scene-control:hover {
  background: #FFFFFF !important;
  box-shadow:
    inset 0 0 0 1px #4B8E1E,
    0 26px 56px rgba(75, 142, 30, 0.32) !important;
}
.scene-control .scene-block-icon.control {
  background: linear-gradient(155deg, rgba(75, 142, 30, 0.18) 0%, rgba(75, 142, 30, 0.06) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(75, 142, 30, 0.4) !important;
  color: #4B8E1E !important;
}
.scene-control:hover .scene-block-icon.control {
  background: #4B8E1E !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 18px rgba(75, 142, 30, 0.4) !important;
}

/* Ticks turn green on hover */
.scene-control .scene-tick {
  background: rgba(61, 28, 8, 0.10) !important;
  color: var(--cocoa) !important;
  transition: background 0.25s ease, color 0.25s ease;
}
.scene-control:hover .scene-tick {
  background: #4B8E1E !important;
  color: #FFFFFF !important;
}

/* "The risk without us" / "How we control it" titles · Raleway 800 */
.scene-block-lbl {
  font-family: "Raleway", sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -0.005em !important;
}

/* Strategic #4B8E1E on big titles throughout the web */
.display strong,
.hero h1 strong,
.scene-headline .t-bold {
  /* Default keep cream; only flagship phrases below switch to green */
}
/* Hero: "Own the Supply." headline strong word → green */


/* "Demand is abundant. Controlled origin is scarce." — strong word */


/* Footer statement: "supply." stays green (already set) */

/* The thesis 03 "Institutional control is the moat" item h3 emphasis */


/* "Every Bag. Every Step. Controlled." → Controlled in green */


/* Buyer Channels hero "major cocoa buyer channels." green emphasis */


/* Risk control headline "one discipline." green */



/* ─── Journey · white surface mode ─────────────────────────────────── */
.journey-stage {
  background: var(--cream) !important;
  color: var(--cocoa) !important;
}
.journey-stage::before {
  background:
    radial-gradient(circle at 15% 20%, rgba(184, 148, 90, 0.10) 0%, transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(75, 142, 30, 0.08) 0%, transparent 55%),
    linear-gradient(180deg, #FAF7F2 0%, var(--cream) 50%, #F2EDE3 100%) !important;
}
.journey-stage::after { opacity: 0.06 !important; }

.journey-back { color: var(--cocoa) !important; opacity: 0.7; }
.journey-back:hover { opacity: 1; }

.journey-header h1.display { color: var(--cocoa) !important; text-shadow: none !important; }
.journey-stage .eyebrow { color: var(--cocoa) !important; opacity: 0.7; text-shadow: none !important; }

/* Roadmap stops · modern pill with internal pop on active */
.journey-rail::before {
  background: rgba(61, 28, 8, 0.10) !important;
  height: 3px !important;
}
.journey-rail-fill {
  background: linear-gradient(90deg, #4B8E1E 0%, #72BD2D 100%) !important;
  box-shadow: 0 0 16px rgba(75, 142, 30, 0.35) !important;
  height: 3px !important;
}
.journey-stop {
  width: 42px !important;
  height: 42px !important;
  background: #FFFFFF !important;
  box-shadow:
    inset 0 0 0 1.5px rgba(61, 28, 8, 0.18),
    0 4px 12px rgba(61, 28, 8, 0.08) !important;
  color: var(--cocoa) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  transition: transform 0.35s cubic-bezier(.3,.8,.3,1.2), box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease !important;
}
.journey-stop:hover {
  transform: scale(1.12);
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    0 8px 20px rgba(184, 148, 90, 0.22) !important;
  color: var(--cocoa) !important;
}
.journey-stop.is-done {
  background: #FFFFFF !important;
  color: #4B8E1E !important;
  box-shadow:
    inset 0 0 0 2px #4B8E1E,
    0 4px 14px rgba(75, 142, 30, 0.18) !important;
}
.journey-stop.is-active {
  background: linear-gradient(155deg, var(--gold) 0%, #8E6E3F 100%) !important;
  color: #FFFFFF !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 0 4px rgba(184, 148, 90, 0.20),
    0 10px 24px rgba(184, 148, 90, 0.45) !important;
  transform: scale(1.18);
}
.journey-stop.is-payment.is-active {
  background: linear-gradient(155deg, #72BD2D 0%, #3F8D1A 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 5px rgba(114, 189, 45, 0.25),
    0 0 30px rgba(114, 189, 45, 0.55) !important;
}

/* Scene panels on white surface */
.scene-mega {
  color: var(--gold) !important;
  text-shadow: 0 6px 24px rgba(184, 148, 90, 0.18) !important;
}
.scene-mega-shadow {
  -webkit-text-stroke: 1.5px rgba(61, 28, 8, 0.10) !important;
}
.scene-rail-meta .kicker { color: var(--muted) !important; }
.scene-header { color: var(--cocoa) !important; }
.scene-headline,
.scene-headline .t-light,
.scene-headline .t-bold { color: var(--cocoa) !important; }
.scene-explain { color: var(--muted) !important; }

.scene-pull {
  background: linear-gradient(120deg, rgba(184, 148, 90, 0.15) 0%, rgba(184, 148, 90, 0.04) 100%) !important;
  color: var(--cocoa) !important;
  border-left-color: var(--gold) !important;
}

/* Risk card · darker frame on white surface */
.scene-problem {
  background: linear-gradient(155deg, rgba(166, 50, 32, 0.92) 0%, rgba(70, 22, 14, 1) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(199, 84, 65, 0.40),
    0 18px 42px rgba(70, 22, 14, 0.28) !important;
}

/* Bottom nav buttons on white */
.journey-btn.ghost {
  border-color: rgba(61, 28, 8, 0.20) !important;
  color: var(--cocoa) !important;
}
.journey-btn.ghost:hover {
  background: rgba(61, 28, 8, 0.05) !important;
  border-color: var(--cocoa) !important;
}
.journey-counter { color: var(--cocoa) !important; }
.journey-counter .sep { color: rgba(61, 28, 8, 0.30) !important; }
.journey-counter .total { color: var(--muted) !important; }

/* Closing strong lines on white */
.journey-stage .of-strong-1 { color: var(--cocoa) !important; }
.journey-stage .of-strong-2 { color: var(--muted) !important; }
.journey-stage .of-strong { border-top-color: rgba(61, 28, 8, 0.12) !important; }
.journey-stage .of-strong-2 strong { color: #4B8E1E !important; }

/* Payment scene "control card" pre-celebration cue — green-tinted on white */
.is-payment-scene .scene-control {
  background: linear-gradient(160deg, #EFFADF 0%, #C9E8A6 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(114, 189, 45, 0.6),
    0 24px 56px rgba(114, 189, 45, 0.30) !important;
}


/* Celebration · proper centered modal box */
.celebration {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 32px !important;
}
.celebration-card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 480px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 48px 48px 40px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  text-align: center !important;
}
.celebration-card > * { position: relative; z-index: 1; }
.celebration-stamp { margin: 0 auto 18px !important; }
.celebration-card .btn { margin: 16px auto 0 !important; }


/* ─── Section spacing audit fix ─────────────────────────────────────── */
/* Tighten the operating-flow section so it doesn't dominate the page */
section.operating-flow { padding-top: 36px !important; padding-bottom: 56px !important; }
.operating-flow .container { padding-top: 0 !important; padding-bottom: 0 !important; }
.operating-flow .flow-cards { margin-top: 32px !important; }
.operating-flow .of-cta { margin-top: 36px !important; }

/* Origin-story band is heavy when 530px — cap min-height */
.origin-story { min-height: 380px !important; }
.origin-story-inner { padding-top: 72px !important; padding-bottom: 56px !important; }

/* Final-cta sits final — let it breathe but trim */
.section.final-cta { padding-top: 56px !important; padding-bottom: 64px !important; }

/* Quote section is fine but cap padding */
.section.dark-deep.quote-bg { padding-top: 64px !important; padding-bottom: 64px !important; }

/* The "What we really do" section has the most padding — trim slightly */
.section { padding-top: clamp(48px, 5vh, 72px) !important; padding-bottom: clamp(48px, 5vh, 72px) !important; }
.section.tight { padding-top: clamp(32px, 4vh, 48px) !important; padding-bottom: clamp(32px, 4vh, 48px) !important; }


/* Operating-flow pod-corner must NOT take layout space */
.operating-flow > .pod-corner.tl,
.operating-flow .pod-corner.tl {
  position: absolute !important;
  top: -120px !important;
  left: -120px !important;
  width: 300px !important;
  height: auto !important;
  opacity: 0.06 !important;
  pointer-events: none !important;
}


/* "Explore our Risk & Control" CTA · green */
.of-cta-btn.btn.primary,
.of-cta .btn.primary {
  background: #4B8E1E !important;
  border-color: #4B8E1E !important;
  color: #FFFFFF !important;
  box-shadow: 0 14px 30px rgba(75, 142, 30, 0.30) !important;
}
.of-cta-btn.btn.primary:hover,
.of-cta .btn.primary:hover {
  background: #5DA825 !important;
  border-color: #5DA825 !important;
  color: #FFFFFF !important;
  box-shadow: 0 22px 42px rgba(75, 142, 30, 0.45) !important;
}
.of-cta-btn.btn.primary span,
.of-cta .btn.primary span { color: #FFFFFF !important; }


/* "Want the full protocol?" CTA · green */
.supply-cta .btn.primary,
.supply-cta-inner .btn.primary {
  background: #4B8E1E !important;
  border-color: #4B8E1E !important;
  color: #FFFFFF !important;
  box-shadow: 0 14px 30px rgba(75, 142, 30, 0.30) !important;
}
.supply-cta .btn.primary:hover,
.supply-cta-inner .btn.primary:hover {
  background: #5DA825 !important;
  border-color: #5DA825 !important;
  color: #FFFFFF !important;
  box-shadow: 0 22px 42px rgba(75, 142, 30, 0.45) !important;
}
.supply-cta .btn.primary span { color: #FFFFFF !important; }


/* Loading-process intro lede · dark backdrop + green ribbon */
.gallery-lede {
  background: rgba(20, 9, 3, 0.92) !important;
  padding: 20px 26px !important;
  border-left: 4px solid #4B8E1E !important;
  border-radius: 4px !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
  font-weight: 500 !important;
  box-shadow: 0 12px 28px rgba(20, 9, 3, 0.22);
  max-width: 56ch;
}
.gallery-lede strong {
  color: #72BD2D !important;
  font-weight: 800 !important;
}


/* "What we really do" — giant cross-cutting cocoa pod */
.really-do { position: relative; overflow: hidden; }
.really-do > .container { position: relative; z-index: 1; }

.really-do-pod {
  position: absolute;
  top: -10%;
  right: -10%;
  width: 60%;
  height: 120%;
  background-image: url("assets/cocoa-pod.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center right;
  opacity: 0.10;
  transform: rotate(28deg);
  pointer-events: none;
  z-index: 0;
}

/* Suppress the default decorative ::before/::after on this section */
.really-do::before,
.really-do::after { display: none !important; }

@media (max-width: 980px) {
  .really-do-pod { width: 90%; right: -25%; opacity: 0.08; }
}


/* Gallery captions · bigger, green numbers */
.gallery-cap { padding: 14px 18px !important; gap: 14px !important; }
.gallery-n {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #4B8E1E !important;
}
.gallery-cap span:last-child {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--cocoa) !important;
  letter-spacing: -0.005em !important;
}


/* Operating principle №1 · big, clean, no chip background */
.quote-bg-inner .quote-bg-kicker {
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-bottom: 18px !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: var(--gold) !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7) !important;
  text-transform: none !important;
}


/* Buyer tiles · stronger photo background + green icon explosion on hover */
.buyer-tile-photo-veil {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.74) 0%,
    rgba(255, 255, 255, 0.55) 60%,
    rgba(255, 255, 255, 0.32) 100%) !important;
}
.buyer-tile-photo:hover .buyer-tile-photo-veil {
  background: linear-gradient(160deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.30) 60%,
    rgba(255, 255, 255, 0.10) 100%) !important;
}

/* Icon — chunky body + green burst on hover */
.buyer-tile .buyer-icon {
  position: relative;
  background: linear-gradient(155deg, rgba(61, 28, 8, 0.10) 0%, rgba(61, 28, 8, 0.04) 100%) !important;
  color: var(--cocoa) !important;
  transition: background 0.3s ease, color 0.3s ease, transform 0.45s cubic-bezier(.2,.8,.2,1.3) !important;
}
.buyer-tile .buyer-icon::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(75, 142, 30, 0.45) 0%, rgba(75, 142, 30, 0) 70%);
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
}
.buyer-tile:hover .buyer-icon {
  background: linear-gradient(155deg, #72BD2D 0%, #4B8E1E 100%) !important;
  color: #FFFFFF !important;
  transform: scale(1.18) rotate(-6deg) !important;
  box-shadow: 0 12px 28px rgba(75, 142, 30, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}
.buyer-tile:hover .buyer-icon::before {
  animation: buyer-icon-burst 0.7s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes buyer-icon-burst {
  0%   { opacity: 0; transform: scale(0.4); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: scale(2.2); }
}

/* Hover also tints the title green */
.buyer-tile h3 { transition: color 0.3s ease; }
.buyer-tile:hover h3 { color: #4B8E1E !important; }
.buyer-tile .buyer-icon svg { width: 26px !important; height: 26px !important; }


/* Buyer hero · cream CE name + green strong + green ribbon */
.buyers-hero .lede .ce-name {
  color: #F8F5F1 !important;
  font-weight: 800 !important;
}
.buyers-hero .lede strong {
  color: #4B8E1E !important;
  font-weight: 800 !important;
}
.buyers-hero .lede {
  border-left-color: #4B8E1E !important;
}


/* Force buyers-hero CE name to white (override global ce-name) */
.buyers-hero .lede .ce-name,
.buyers-hero p.lede span.ce-name,
.buyers-hero .container .lede .ce-name {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}


/* ─── Journey stops · modern flat design ─────────────────────────── */
.journey-stop {
  width: 36px !important;
  height: 36px !important;
  background: #FFFFFF !important;
  box-shadow:
    inset 0 0 0 1.5px rgba(61, 28, 8, 0.16),
    0 2px 6px rgba(61, 28, 8, 0.06) !important;
  color: rgba(61, 28, 8, 0.45) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  font-feature-settings: "tnum" !important;
  letter-spacing: 0.04em !important;
}
.journey-stop:hover {
  transform: scale(1.10);
  box-shadow:
    inset 0 0 0 1.5px #4B8E1E,
    0 6px 16px rgba(75, 142, 30, 0.18) !important;
  color: #4B8E1E !important;
}
.journey-stop.is-done {
  background: #FFFFFF !important;
  color: #4B8E1E !important;
  box-shadow:
    inset 0 0 0 2px #4B8E1E,
    0 2px 8px rgba(75, 142, 30, 0.15) !important;
}
.journey-stop.is-active {
  background: linear-gradient(155deg, #72BD2D 0%, #4B8E1E 100%) !important;
  color: #FFFFFF !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 0 0 4px rgba(75, 142, 30, 0.18),
    0 8px 20px rgba(75, 142, 30, 0.45) !important;
  transform: scale(1.20) !important;
}
.journey-stop.is-payment.is-active {
  background: linear-gradient(155deg, #72BD2D 0%, #3F8D1A 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    0 0 0 5px rgba(114, 189, 45, 0.25),
    0 0 28px rgba(114, 189, 45, 0.55) !important;
}

/* Rail fill in green to match */
.journey-rail-fill {
  background: linear-gradient(90deg, #4B8E1E 0%, #72BD2D 100%) !important;
  box-shadow: 0 0 12px rgba(75, 142, 30, 0.35) !important;
  height: 2.5px !important;
}
.journey-rail::before { background: rgba(61, 28, 8, 0.10) !important; height: 2.5px !important; }

/* ─── Red risk card · trimmed, less screaming ──────────────────── */
.scene-problem {
  padding: 22px 22px 20px !important;
  background: linear-gradient(155deg, rgba(120, 36, 22, 0.92) 0%, rgba(60, 18, 12, 1) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(199, 84, 65, 0.25),
    0 14px 32px rgba(60, 18, 12, 0.25) !important;
}
.scene-problem::before { opacity: 0.6 !important; width: 160px !important; height: 160px !important; }
.scene-problem .scene-block-head {
  margin-bottom: 14px !important;
  padding-bottom: 14px !important;
  gap: 12px !important;
}
.scene-problem .scene-block-icon.problem {
  width: 36px !important;
  height: 36px !important;
  border-radius: 6px !important;
  background: linear-gradient(155deg, rgba(199, 84, 65, 0.35) 0%, rgba(165, 45, 30, 0.15) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(242, 166, 151, 0.4) !important;
}
.scene-problem .scene-block-icon.problem svg {
  width: 18px !important;
  height: 18px !important;
}
.scene-problem .scene-block-lbl {
  font-size: 15px !important;
  font-weight: 800 !important;
}
.scene-problem .scene-block-sub {
  font-size: 9.5px !important;
  letter-spacing: 0.16em !important;
}
.scene-problem p {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.92) !important;
}


/* ─── Scene rail · cooler architectural treatment ─────────────────── */
.scene-rail {
  position: relative;
  padding-left: 24px !important;
  border-left: 4px solid #4B8E1E;
}
.scene-mega {
  font-size: clamp(110px, 11vw, 160px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.06em !important;
  color: var(--cocoa) !important;
  text-shadow: none !important;
  line-height: 0.9 !important;
}
.scene-mega-shadow {
  -webkit-text-stroke: 1px rgba(75, 142, 30, 0.25) !important;
  color: transparent !important;
  font-size: clamp(110px, 11vw, 160px) !important;
  top: 6px !important;
  left: 4px !important;
}
.scene-rail-meta { margin-top: 18px !important; }
.scene-rail-meta .kicker {
  display: inline-block;
  background: #4B8E1E;
  color: #FFFFFF !important;
  padding: 5px 12px;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase;
  border-radius: 2px;
}
.scene-header {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--cocoa) !important;
  margin-top: 14px !important;
  letter-spacing: -0.005em;
  line-height: 1.2;
}

/* ─── "How we control it" · dominant green-accented card ──────────── */
.scene-control {
  position: relative !important;
  background: #FFFFFF !important;
  padding: 26px 26px 24px !important;
  border-radius: 6px !important;
  box-shadow:
    0 0 0 1px rgba(61, 28, 8, 0.06),
    0 20px 44px rgba(0, 0, 0, 0.10) !important;
  overflow: hidden;
}
.scene-control::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #72BD2D 0%, #4B8E1E 100%);
  z-index: 1;
}
.scene-control:hover {
  background: #FFFFFF !important;
  box-shadow:
    0 0 0 1px #4B8E1E,
    0 28px 60px rgba(75, 142, 30, 0.20) !important;
}
.scene-control .scene-block-icon.control {
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  background: linear-gradient(155deg, #4B8E1E 0%, #3F8D1A 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 14px rgba(75, 142, 30, 0.30) !important;
}
.scene-control .scene-block-icon.control svg {
  width: 24px !important;
  height: 24px !important;
}
.scene-control .scene-block-lbl {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--cocoa) !important;
}
.scene-control .scene-block-sub {
  color: #4B8E1E !important;
  font-weight: 800 !important;
  font-size: 10px !important;
}

/* Always-on green ticks (no hover wait) */
.scene-control .scene-tick {
  width: 22px !important;
  height: 22px !important;
  border-radius: 5px !important;
  background: #4B8E1E !important;
  color: #FFFFFF !important;
}
.scene-control .scene-tick svg { width: 12px !important; height: 12px !important; }
.scene-control li {
  padding: 9px 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--cocoa) !important;
  border-bottom: 1px solid rgba(75, 142, 30, 0.08) !important;
}
.scene-control li:hover {
  padding-left: 6px !important;
  background: linear-gradient(90deg, rgba(75, 142, 30, 0.06) 0%, transparent 70%) !important;
}

/* ─── Risk card · keep small/minor ─────────────────────────────── */
.scene-problem {
  padding: 20px 20px 18px !important;
  background: linear-gradient(155deg, #7B2418 0%, #3C120C 100%) !important;
  border-radius: 6px !important;
  box-shadow:
    inset 0 0 0 1px rgba(199, 84, 65, 0.18),
    0 10px 24px rgba(60, 18, 12, 0.18) !important;
}
.scene-problem::before { opacity: 0.4 !important; }
.scene-problem .scene-block-icon.problem {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
}
.scene-problem .scene-block-icon.problem svg { width: 16px !important; height: 16px !important; }
.scene-problem .scene-block-lbl { font-size: 14px !important; }
.scene-problem .scene-block-sub { font-size: 9px !important; }
.scene-problem .scene-block-head {
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
}
.scene-problem p {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

/* Make the green card dominant by giving more horizontal space */
.scene-blocks {
  grid-template-columns: 0.85fr 1.3fr !important;
}


/* Mega numeral in green */
.scene-mega { color: #4B8E1E !important; }
.scene-mega-shadow {
  -webkit-text-stroke: 1px rgba(75, 142, 30, 0.35) !important;
}

/* Card titles MUCH bigger */
.scene-problem .scene-block-lbl,
.scene-control .scene-block-lbl {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.05 !important;
}
.scene-problem .scene-block-sub,
.scene-control .scene-block-sub {
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  margin-top: 6px !important;
}

/* Slightly bigger icons to balance the bigger title */
.scene-problem .scene-block-icon.problem {
  width: 40px !important;
  height: 40px !important;
}
.scene-control .scene-block-icon.control {
  width: 52px !important;
  height: 52px !important;
}
.scene-control .scene-block-icon.control svg { width: 28px !important; height: 28px !important; }


/* "The risk without us" · white minimalist card */
.scene-problem {
  background: #FFFFFF !important;
  color: var(--cocoa) !important;
  padding: 18px 18px 16px !important;
  border-radius: 6px !important;
  box-shadow:
    0 0 0 1px rgba(61, 28, 8, 0.08),
    0 12px 28px rgba(61, 28, 8, 0.10) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
.scene-problem::before { display: none !important; }
.scene-problem:hover {
  animation: risk-wobble 0.5s ease-in-out;
  box-shadow:
    0 0 0 1px #E0A092,
    0 18px 36px rgba(165, 45, 30, 0.15) !important;
  transform: translateY(-3px) !important;
}
@keyframes risk-wobble {
  0%, 100% { transform: translateY(-3px) rotate(0deg); }
  20%      { transform: translateY(-3px) rotate(-1.5deg); }
  40%      { transform: translateY(-3px) rotate(1.5deg); }
  60%      { transform: translateY(-3px) rotate(-1deg); }
  80%      { transform: translateY(-3px) rotate(0.5deg); }
}

/* Header */
.scene-problem .scene-block-head {
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
  border-bottom-color: rgba(61, 28, 8, 0.10) !important;
}
.scene-problem .scene-block-icon.problem {
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  background: linear-gradient(155deg, #D85A45 0%, #A5392E 100%) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: 0 4px 10px rgba(165, 45, 30, 0.30) !important;
  transition: transform 0.3s ease;
}
.scene-problem:hover .scene-block-icon.problem {
  animation: warning-shake 0.6s ease-in-out;
}
@keyframes warning-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  15%      { transform: translateX(-3px) rotate(-5deg); }
  30%      { transform: translateX(3px) rotate(5deg); }
  45%      { transform: translateX(-2px) rotate(-3deg); }
  60%      { transform: translateX(2px) rotate(3deg); }
  75%      { transform: translateX(-1px) rotate(-1deg); }
}
.scene-problem .scene-block-icon.problem svg {
  width: 20px !important;
  height: 20px !important;
}
.scene-problem .scene-block-lbl {
  color: var(--cocoa) !important;
  font-size: 18px !important;
}
.scene-problem .scene-block-sub {
  color: #A5392E !important;
}
.scene-problem p {
  color: var(--muted) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

/* Make it physically smaller in the grid */
.scene-blocks {
  grid-template-columns: 0.7fr 1.5fr !important;
}


/* Control list items · bigger, cleaner */
.scene-control li {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--cocoa) !important;
  padding: 12px 0 !important;
  letter-spacing: -0.005em !important;
  font-family: "Raleway", sans-serif !important;
}
.scene-control .scene-tick {
  width: 26px !important;
  height: 26px !important;
  border-radius: 6px !important;
}
.scene-control .scene-tick svg { width: 14px !important; height: 14px !important; }


/* Force buyers-hero CE name white — beat the section:not(...) rule */
.section.buyers-hero .lede .ce-name,
section.section.tight.buyers-hero .lede .ce-name,
section.buyers-hero p.lede span.ce-name {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}


/* Buyer tiles · dark veil with white text */
.buyer-tile-photo-veil {
  background: linear-gradient(160deg,
    rgba(20, 9, 3, 0.82) 0%,
    rgba(20, 9, 3, 0.62) 60%,
    rgba(20, 9, 3, 0.42) 100%) !important;
}
.buyer-tile-photo:hover .buyer-tile-photo-veil {
  background: linear-gradient(160deg,
    rgba(20, 9, 3, 0.70) 0%,
    rgba(20, 9, 3, 0.48) 60%,
    rgba(20, 9, 3, 0.28) 100%) !important;
}
.buyer-tile-photo h3 {
  color: #FFFFFF !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.buyer-tile-photo p {
  color: rgba(255, 255, 255, 0.88) !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}
.buyer-tile-photo:hover h3 {
  color: #A6E055 !important;
}
/* Icon needs to show on dark veil */
.buyer-tile-photo .buyer-icon {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.06) 100%) !important;
  color: #FFFFFF !important;
}


/* For global buyers · lede with dark backdrop + green ribbon */
.buyers-global-lede {
  background: linear-gradient(135deg, rgba(20, 9, 3, 0.95) 0%, rgba(20, 9, 3, 0.82) 100%) !important;
  padding: 22px 28px !important;
  border-left: 4px solid #4B8E1E !important;
  border-radius: 4px !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
  box-shadow: 0 12px 30px rgba(20, 9, 3, 0.20);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.40);
}
.buyers-global-lede .ce-name {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
.buyers-global-lede strong {
  color: #72BD2D !important;
  font-weight: 800 !important;
}


/* Force CE name white inside buyers-global-lede */
.section .buyers-global-lede .ce-name,
.section.section .buyers-global-lede .ce-name {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}


/* Capability card numbers turn green on hover */
.cap-card:hover .cap-num {
  color: #4B8E1E !important;
  opacity: 0.65 !important;
}


/* Trust line · green box w/ white letters and vertical separators */
.hero-trust {
  display: inline-flex !important;
  align-items: center !important;
  background: linear-gradient(135deg, #4B8E1E 0%, #3F8D1A 100%) !important;
  color: #FFFFFF !important;
  padding: 14px 24px !important;
  border-radius: 4px !important;
  gap: 0 !important;
  margin-top: 28px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  box-shadow: 0 10px 28px rgba(75, 142, 30, 0.30) !important;
  text-shadow: none !important;
}
.hero-trust > span:not(.sep) { padding: 0 18px; }
.hero-trust > span:first-child { padding-left: 0; }
.hero-trust > span:last-child  { padding-right: 0; }
.hero-trust .sep {
  width: 1px !important;
  height: 14px !important;
  background: rgba(255, 255, 255, 0.45) !important;
  color: transparent !important;
  padding: 0 !important;
  display: inline-block;
  font-size: 0 !important;
}


/* Trust row · pill + cert floater carousel side by side */
.trust-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.trust-row .hero-trust { margin-top: 0 !important; }

/* Shine effect when hovering the green pill */
.hero-trust { position: relative; overflow: hidden; }
.hero-trust::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 30%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.0) 70%,
    transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  transition: left 0s;
}
.hero-trust:hover::before {
  animation: trust-shine 0.95s cubic-bezier(.3,.7,.4,1) forwards;
}
@keyframes trust-shine {
  0%   { left: -120%; }
  100% { left: 130%; }
}


  22%       { opacity: 1;    transform: translateX(-50%) scale(1); }
  60%       { bottom: 12px;  opacity: 1; transform: translateX(-50%) scale(1); }
  78%       { bottom: 44px;  opacity: 0.4; }
  86%, 100% { bottom: 56px;  opacity: 0; transform: translateX(-50%) scale(0.92); }
}


/* Cert floater · horizontal marquee, right → left, grayscale, color on hover */
.cert-floater {
  position: relative;
  height: 56px;
  flex: 1;
  min-width: 220px;
  max-width: 320px;
  overflow: hidden;
  pointer-events: auto;
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.cert-floater-track {
  display: flex;
  align-items: center;
  gap: 36px;
  height: 100%;
  width: max-content;
  animation: cert-scroll 14s linear infinite;
}
.cert-floater:hover .cert-floater-track {
  animation-play-state: paused;
}
@keyframes cert-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.cert-floater img {
  height: 42px;
  width: auto;
  max-width: 70px;
  object-fit: contain;
  background: transparent !important;
  filter: grayscale(1) brightness(0.85) contrast(0.95);
  opacity: 0.78;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.cert-floater img:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.10);
}


/* Proven-grid card titles in the brand green */
.builtnew-photo .proven-tile h3,
.proven-tile h3 {
  color: #4B8E1E !important;
  font-weight: 800 !important;
}
.builtnew-photo .proven-tile:hover h3,
.proven-tile:hover h3 {
  color: #72BD2D !important;
}

/* Metric carousel icons · green background instead of gold */
.metric-icon {
  background: linear-gradient(155deg, #72BD2D 0%, #4B8E1E 100%) !important;
  color: #FFFFFF !important;
  box-shadow:
    0 8px 16px rgba(75, 142, 30, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(0, 0, 0, 0.18) !important;
}
.metric-card::after {
  background: radial-gradient(circle, rgba(75, 142, 30, 0.40) 0%, rgba(75, 142, 30, 0) 70%) !important;
}


/* Force CE name white on impact + financing screens */
.impact-cename,
.financing-cename,
.section .impact-cename,
.section .financing-cename {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

/* ─── Cycle phase 5 · victory mode ─────────────────────────────────── */
.cycle-detail:nth-child(5).is-active {
  background: linear-gradient(155deg, #FFFFFF 0%, #EFFADF 100%) !important;
  border-color: #4B8E1E !important;
  box-shadow:
    0 0 0 2px rgba(75, 142, 30, 0.30),
    0 24px 56px rgba(75, 142, 30, 0.35) !important;
}
.cycle-detail:nth-child(5).is-active::before {
  background: linear-gradient(90deg, #72BD2D 0%, #4B8E1E 100%) !important;
  width: 80px !important;
  box-shadow: 0 0 16px rgba(75, 142, 30, 0.7) !important;
}
.cycle-detail:nth-child(5).is-active .k { color: #4B8E1E !important; font-weight: 800 !important; }
.cycle-detail:nth-child(5).is-active h4 { color: var(--cocoa) !important; }
.cycle-detail:nth-child(5).is-active p { color: var(--muted) !important; }
.cycle-detail:nth-child(5).is-active .money {
  background: #4B8E1E !important;
  color: #FFFFFF !important;
  border-color: #4B8E1E !important;
  font-weight: 800 !important;
}

/* Falling cocoa pods overlay on cycle phase 5 */
.cycle-detail:nth-child(5).is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 10px 18px at 12% -8px,  #C75441 50%, transparent 51%),
    radial-gradient(ellipse  8px 14px at 28% -12px, #B8945A 50%, transparent 51%),
    radial-gradient(ellipse 12px 20px at 44% -10px, #D46A2C 50%, transparent 51%),
    radial-gradient(ellipse  9px 16px at 60% -6px,  #5A7B36 50%, transparent 51%),
    radial-gradient(ellipse 11px 18px at 76% -14px, #C9A14B 50%, transparent 51%),
    radial-gradient(ellipse  8px 14px at 92% -8px,  #7A3D14 50%, transparent 51%);
  background-repeat: no-repeat;
  animation: pod-fall-detail 2.4s linear infinite;
}
@keyframes pod-fall-detail {
  0%   { transform: translateY(-20px); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(220px); opacity: 0; }
}


/* Topbar nav · bolder + slightly larger */
.nav button {
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 8px 16px !important;
  letter-spacing: 0.02em !important;
  opacity: 0.85 !important;
}
.nav button:hover { opacity: 1 !important; }
.nav button[aria-current="true"] { opacity: 1 !important; font-weight: 800 !important; }


/* Bridge band between two photo sections */
.impact-bridge {
  background: linear-gradient(180deg, var(--cocoa-deep) 0%, var(--cocoa) 100%);
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  position: relative;
  z-index: 2;
}
.impact-bridge-line {
  flex: 0 0 140px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(184, 148, 90, 0.55) 50%, transparent 100%);
}
.impact-bridge-mark {
  color: #4B8E1E;
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  transform: rotate(0deg);
  letter-spacing: 0;
  opacity: 0.85;
}


/* ─── Cycle phase 5 · MUCH bigger falling cocoa pods ────────────── */
.cycle-detail:nth-child(5).is-active::after {
  background-image:
    radial-gradient(ellipse 22px 38px at 10% -20px,  #C75441 50%, transparent 51%),
    radial-gradient(ellipse 18px 32px at 24% -32px,  #B8945A 50%, transparent 51%),
    radial-gradient(ellipse 26px 44px at 40% -26px,  #D46A2C 50%, transparent 51%),
    radial-gradient(ellipse 20px 36px at 58% -18px,  #5A7B36 50%, transparent 51%),
    radial-gradient(ellipse 24px 40px at 74% -34px,  #C9A14B 50%, transparent 51%),
    radial-gradient(ellipse 18px 30px at 90% -22px,  #7A3D14 50%, transparent 51%) !important;
  animation: pod-fall-detail-big 3s linear infinite !important;
}
@keyframes pod-fall-detail-big {
  0%   { transform: translateY(-40px); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(280px); opacity: 0; }
}

/* ─── Phase stops · keep prior steps GREEN until loop resets ────── */
/* "is-done" already turns gold; override to green so completed steps mark visually. */
.cycle-stop.is-done {
  background: var(--cocoa) !important;
  border-color: #4B8E1E !important;
  color: #4B8E1E !important;
}
.cycle-stop.is-done .num { color: #4B8E1E !important; font-weight: 800 !important; }
/* Active still stays gold/green by phase */

/* ─── Working Capital Simulator · differentiated band + power ───── */

/* Wrap section: cleaner offset, lighter cream tint */
.cycle-anim .calc {
  background: linear-gradient(180deg, rgba(248, 245, 241, 0.045) 0%, rgba(248, 245, 241, 0.08) 100%);
  margin: 88px -32px 0 !important;
  padding: 48px 32px 56px !important;
  border-radius: 8px;
  border-top: 1px solid rgba(248, 245, 241, 0.10);
  border-bottom: 1px solid rgba(248, 245, 241, 0.10);
  position: relative;
}
.cycle-anim .calc::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, #72BD2D 0%, #4B8E1E 100%);
  border-radius: 0 0 4px 4px;
}

/* Headline & sub · bigger and clearer */
.calc-title { font-size: clamp(32px, 3.4vw, 48px) !important; }
.calc-sub { font-size: 16px !important; line-height: 1.55 !important; }

/* Slider container bigger + bolder */
.calc-input { max-width: 760px !important; padding: 32px 44px 28px !important; }
.calc-amount .v { font-size: clamp(48px, 6vw, 72px) !important; }
.calc-amount .lbl { font-size: 12px !important; }

/* Scenario tiles · BIGGER text everywhere */
.calc-scen { padding: 32px 28px 28px !important; }
.calc-scen .kicker { font-size: 12px !important; }
.calc-cyc { font-size: 22px !important; }
.calc-cyc span { font-size: 11px !important; }
.calc-pct { font-size: clamp(56px, 6vw, 76px) !important; }
.calc-pct .unit { font-size: 22px !important; }
.calc-pct-lbl { font-size: 12px !important; }
.calc-divider { margin: 22px 0 14px !important; }
.calc-yield-row .k, .calc-total-row .k { font-size: 12px !important; }
.calc-yield-row .v { font-size: 18px !important; }
.calc-total-row .v { font-size: 22px !important; }
.calc-return-pct { font-size: 44px !important; }
.calc-return-pct .unit { font-size: 22px !important; }
.calc-return-lbl { font-size: 12px !important; }
.calc-return-amt { font-size: 18px !important; }

/* Hide "Controlled MT" line */
.calc-scen .calc-total-row {
  display: none !important;
}

/* Expected (base) card · GREEN + WHITE power treatment, scaled bigger */
.calc-scen.is-base {
  background: linear-gradient(160deg, #72BD2D 0%, #3F8D1A 100%) !important;
  border-color: #B1E27A !important;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.20) inset,
    0 0 0 4px rgba(114, 189, 45, 0.30),
    0 30px 70px rgba(75, 142, 30, 0.45) !important;
  transform: scale(1.06);
  z-index: 2;
}
.calc-scen.is-base:hover { transform: scale(1.08) translateY(-2px); }
.calc-scen.is-base::before { background: #FFFFFF !important; height: 3px !important; }
.calc-scen.is-base .calc-flag {
  background: #FFFFFF !important;
  color: #4B8E1E !important;
  font-weight: 900 !important;
}
.calc-scen.is-base .kicker { color: #FFFFFF !important; }
.calc-scen.is-base .calc-cyc { color: #FFFFFF !important; }
.calc-scen.is-base .calc-cyc span { color: rgba(255,255,255,0.75) !important; }
.calc-scen.is-base .calc-pct,
.calc-scen.is-base .calc-pct .unit { color: #FFFFFF !important; }
.calc-scen.is-base .calc-pct-lbl { color: rgba(255,255,255,0.80) !important; }
.calc-scen.is-base .calc-divider { background: rgba(255,255,255,0.30) !important; }
.calc-scen.is-base .calc-yield-row .k,
.calc-scen.is-base .calc-return-lbl { color: rgba(255,255,255,0.85) !important; }
.calc-scen.is-base .calc-yield-row .v,
.calc-scen.is-base .calc-return-pct,
.calc-scen.is-base .calc-return-pct .unit,
.calc-scen.is-base .calc-return-amt { color: #FFFFFF !important; }


/* Metric icons · green sparks/particles + burst */
.metric-card::after {
  background: radial-gradient(circle, rgba(75, 142, 30, 0.55) 0%, rgba(75, 142, 30, 0) 70%) !important;
}
.metric-icon::before {
  background:
    radial-gradient(circle at 50% 0%,   #4B8E1E 0 2.5px, transparent 3px),
    radial-gradient(circle at 100% 50%, #4B8E1E 0 2.5px, transparent 3px),
    radial-gradient(circle at 50% 100%, #4B8E1E 0 2.5px, transparent 3px),
    radial-gradient(circle at 0% 50%,   #4B8E1E 0 2.5px, transparent 3px),
    radial-gradient(circle at 85% 15%,  #4B8E1E 0 2.5px, transparent 3px),
    radial-gradient(circle at 15% 85%,  #4B8E1E 0 2.5px, transparent 3px) !important;
}


/* "Controlled." wave on hover */
.wave-text { display: inline-flex; gap: 0; }
.wave-letter {
  display: inline-block;
  transform: translateY(0);
  transition: transform 0s;
}
.wave-text:hover .wave-letter {
  animation: ctrl-wave 0.8s ease-in-out forwards;
}
@keyframes ctrl-wave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}


/* Operating principle №1 kicker · white, bold, bigger */
.quote-bg-inner .quote-bg-kicker {
  color: #FFFFFF !important;
  font-weight: 900 !important;
  font-size: 26px !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75) !important;
}


/* ─── Legal / Privacy / Disclosures pages ─────────────────────────── */
.legal-page {
  background: var(--cream);
  color: var(--cocoa);
  padding-top: 100px !important;
  padding-bottom: 80px !important;
  min-height: calc(100vh - 200px);
}
.legal-back {
  color: var(--cocoa) !important;
  opacity: 0.65;
  margin: 0 0 28px !important;
  padding: 0 !important;
}
.legal-back:hover { opacity: 1; }
.legal-h1 {
  margin: 16px 0 4px !important;
  color: var(--cocoa) !important;
  text-shadow: none !important;
  font-size: clamp(48px, 6vw, 72px) !important;
}
.legal-updated {
  margin: 0 0 48px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.legal-body {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.legal-section h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--cocoa);
  margin: 0 0 12px;
  letter-spacing: -0.005em;
}
.legal-section p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(61, 28, 8, 0.78);
  font-weight: 500;
}
.legal-foot {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(61, 28, 8, 0.12);
  font-size: 14px;
  color: var(--muted);
}
.legal-foot a {
  color: #4B8E1E;
  font-weight: 700;
}
.legal-foot a:hover { text-decoration: underline; }


/* ─── Legal pages · richer section heads with icon + box ────────── */
.legal-h1 {
  font-size: clamp(56px, 7vw, 88px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
}
.legal-body { max-width: 820px; gap: 22px !important; }
.legal-section {
  padding: 26px 28px 24px;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(61, 28, 8, 0.06),
    0 12px 30px rgba(61, 28, 8, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.legal-section:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px #4B8E1E,
    0 20px 40px rgba(75, 142, 30, 0.16);
}
.legal-section-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(61, 28, 8, 0.08);
}
.legal-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(155deg, #72BD2D 0%, #4B8E1E 100%);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(75, 142, 30, 0.30);
  transition: transform 0.4s cubic-bezier(.2, .8, .2, 1.3);
}
.legal-icon svg { width: 28px; height: 28px; }
.legal-section:hover .legal-icon {
  transform: scale(1.10) rotate(-5deg);
}
.legal-section-n {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.20em;
  color: #4B8E1E;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.legal-section h2 {
  margin: 4px 0 0 !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
  color: var(--cocoa) !important;
}
.legal-section p {
  margin: 0 !important;
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  color: rgba(61, 28, 8, 0.78) !important;
  font-weight: 500 !important;
}


/* ─── Impact mid band ──────────────────────────────────────────── */
.impact-mid {
  background: linear-gradient(180deg, var(--cream) 0%, var(--beige) 100%);
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}
.impact-mid-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: end;
  margin-bottom: 56px;
}
.impact-mid-h2 {
  margin-top: 18px !important;
  color: var(--cocoa) !important;
  font-size: clamp(32px, 4vw, 56px) !important;
  font-weight: 300 !important;
  line-height: 1.05 !important;
}
.impact-mid-h2 strong {
  color: #4B8E1E;
  font-weight: 800;
}
.impact-mid-quote {
  position: relative;
  padding: 24px 26px 24px 56px;
  background: #FFFFFF;
  border-left: 4px solid #4B8E1E;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(61, 28, 8, 0.08);
}
.impact-mid-quote .impact-mark {
  position: absolute;
  left: 14px;
  top: 4px;
  font-size: 64px;
  line-height: 1;
  color: #4B8E1E;
  font-weight: 900;
  font-family: Georgia, serif;
}
.impact-mid-quote p {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--cocoa);
  font-weight: 500;
  font-style: italic;
}

/* Areas as cream cards with numeral + icon */
.impact-areas {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 56px;
}
.impact-area {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 18px;
  background: #FFFFFF;
  border-radius: 6px;
  border: 1px solid rgba(61, 28, 8, 0.06);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.impact-area:hover {
  transform: translateY(-3px);
  border-color: #4B8E1E;
  box-shadow: 0 14px 28px rgba(75, 142, 30, 0.14);
}
.impact-area-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(155deg, #72BD2D 0%, #4B8E1E 100%);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(75, 142, 30, 0.25);
  transition: transform 0.3s ease;
}
.impact-area-icon svg { width: 22px; height: 22px; }
.impact-area:hover .impact-area-icon { transform: rotate(-6deg) scale(1.08); }
.impact-area-meta { display: flex; flex-direction: column; gap: 2px; }
.impact-area-n {
  font-size: 11px;
  font-weight: 800;
  color: #4B8E1E;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}
.impact-area-lbl {
  font-size: 15px;
  font-weight: 700;
  color: var(--cocoa);
  letter-spacing: -0.005em;
  line-height: 1.2;
}

/* Stats row */
.impact-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(61, 28, 8, 0.12);
  border-bottom: 1px solid rgba(61, 28, 8, 0.12);
  padding: 28px 0;
}
.impact-stats > div { padding: 0 24px; border-right: 1px solid rgba(61, 28, 8, 0.10); }
.impact-stats > div:last-child { border-right: 0; }
.impact-stats > div:first-child { padding-left: 0; }
.impact-stats .k {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.impact-stats .v {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #4B8E1E;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
}
.impact-stats .v .unit { font-size: 28px; opacity: 0.85; margin-left: 2px; }
.impact-stats .sub {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}

@media (max-width: 980px) {
  .impact-mid-head { grid-template-columns: 1fr; gap: 28px; }
  .impact-areas { grid-template-columns: 1fr 1fr; }
  .impact-stats { grid-template-columns: 1fr; }
  .impact-stats > div { border-right: 0; border-bottom: 1px solid rgba(61, 28, 8, 0.10); padding: 18px 0; }
  .impact-stats > div:last-child { border-bottom: 0; }
}


/* Impact mid headline · wave hover, bold across all words */
.impact-mid-h2 {
  font-weight: 800 !important;
  color: var(--cocoa) !important;
}
.impact-mid-h2 .wave-word {
  display: inline-block;
  transform: translateY(0);
  transition: transform 0s;
}
.impact-mid-h2.wave-text:hover .wave-word {
  animation: impact-wave 0.95s ease-in-out forwards;
}
.impact-mid-h2 .wave-word.is-green { color: #4B8E1E; }
@keyframes impact-wave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* Area cards · no numeral, bigger bolder labels */
.impact-area-lbl {
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -0.005em !important;
  line-height: 1.2 !important;
  color: var(--cocoa) !important;
}
.impact-area { padding: 22px 22px !important; }
.impact-area-icon { width: 48px !important; height: 48px !important; }
.impact-area-icon svg { width: 24px !important; height: 24px !important; }

/* Stats · flip-in digit animation (replaces count-up) */
.impact-stats .v.flip-in {
  perspective: 600px;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.impact-stats .v.flip-in > span {
  display: inline-block;
  transform: rotateX(90deg);
  opacity: 0;
  transform-origin: 50% 100%;
  animation: digit-flip 0.7s cubic-bezier(.2, .8, .2, 1.1) forwards;
}
.impact-stats .v.flip-in > span:nth-child(1) { animation-delay: 0.15s; }
.impact-stats .v.flip-in > span:nth-child(2) { animation-delay: 0.32s; }
.impact-stats .v.flip-in > span:nth-child(3) { animation-delay: 0.50s; }
@keyframes digit-flip {
  0%   { transform: rotateX(90deg);  opacity: 0; }
  60%  { transform: rotateX(-10deg); opacity: 1; }
  100% { transform: rotateX(0deg);   opacity: 1; }
}
.impact-stats .v.flip-in > span.unit {
  font-size: 28px;
  opacity: 0.85;
  margin-left: 2px;
}


/* Force CE name white in Impact lede (override global gold) */
.impact-photo .lede .ce-name,
.impact-section .lede .ce-name,
.impact-cename,
.section .impact-cename {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}


/* Impact mid · trim huge top whitespace + restore proper headline spacing */
.impact-mid { padding-top: 48px !important; padding-bottom: 64px !important; }
.impact-mid-head { margin-bottom: 36px !important; gap: 40px !important; }
.impact-mid-h2 {
  margin-top: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: var(--cocoa) !important;
  /* Restore natural word spacing */
  display: block !important;
  white-space: normal !important;
}
.impact-mid-h2 .wave-word {
  display: inline-block;
  color: #4B8E1E;
  cursor: default;
  transform: translateY(0);
  transition: transform 0s;
}
.impact-mid-h2 .wave-word:hover {
  animation: impact-wave 0.6s ease-in-out;
}
@keyframes impact-wave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}


/* Per-letter wave on green words inside impact mid */
.impact-mid-h2 .wave-letters {
  display: inline-block;
  color: #4B8E1E;
}
.impact-mid-h2 .wave-letter {
  display: inline-block;
  transform: translateY(0);
  transition: transform 0s;
}
.impact-mid-h2 .wave-letters:hover .wave-letter {
  animation: letter-wave 0.65s ease-in-out;
}
@keyframes letter-wave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}


/* Hard-override impact CE name — beat the global :not(.dark) selector */
section.impact-section.impact-photo .container .lede span.ce-name.impact-cename,
section.section.impact-section.impact-photo .lede .ce-name.impact-cename {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}


/* ─── Invest with us · institutional redesign ───────────────────── */

/* Hero — cream surface, typographic */
.invest-hero {
  background: var(--cream);
  padding-top: 96px !important;
  padding-bottom: 72px !important;
}
.invest-hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 80px;
  align-items: start;
}
.invest-h1 {
  margin: 18px 0 24px;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--cocoa);
  text-wrap: balance;
}
.invest-h1 strong {
  font-weight: 800;
  color: #4B8E1E;
}
.invest-h2 {
  font-size: clamp(28px, 3.4vw, 44px) !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.05 !important;
  color: var(--cocoa) !important;
  text-shadow: none !important;
}
.invest-h2 strong { font-weight: 800; color: #4B8E1E; }
.invest-sub, .invest-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  font-weight: 500;
  max-width: 58ch;
  margin: 0;
}
.invest-cename { color: var(--cocoa) !important; font-weight: 800 !important; }

.invest-cta-row {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.invest-btn-primary {
  background: #4B8E1E !important;
  border-color: #4B8E1E !important;
  color: #FFFFFF !important;
  padding: 16px 26px !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 28px rgba(75, 142, 30, 0.28) !important;
}
.invest-btn-primary span { color: #FFFFFF !important; }
.invest-btn-primary:hover {
  background: #5DA825 !important;
  border-color: #5DA825 !important;
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(75, 142, 30, 0.40) !important;
}
.invest-btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(61, 28, 8, 0.20) !important;
  color: var(--cocoa) !important;
  padding: 16px 26px !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  font-weight: 800 !important;
}
.invest-btn-ghost:hover {
  background: rgba(61, 28, 8, 0.04) !important;
  border-color: var(--cocoa) !important;
}

/* Hero stat card · clean institutional sidebar */
.invest-stat-card {
  background: #FFFFFF;
  border: 1px solid rgba(61, 28, 8, 0.08);
  border-radius: 8px;
  padding: 24px 28px;
  box-shadow: 0 16px 36px rgba(61, 28, 8, 0.06);
}
.invest-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(61, 28, 8, 0.08);
  gap: 16px;
}
.invest-stat-row:last-child { border-bottom: 0; padding-bottom: 0; }
.invest-stat-row:first-child { padding-top: 0; }
.invest-stat-row .k {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.invest-stat-row .v {
  font-size: 24px;
  font-weight: 800;
  color: var(--cocoa);
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.invest-stat-row .v.small { font-size: 14px; letter-spacing: 0; }
.invest-stat-row .v .unit { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 2px; }

/* Principles · clean 3-col text */
.invest-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(61, 28, 8, 0.10);
}
.invest-principle { padding-right: 16px; }
.invest-principle-n {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.20em;
  color: #4B8E1E;
  font-variant-numeric: tabular-nums;
  margin-bottom: 18px;
}
.invest-principle h3 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--cocoa);
  line-height: 1.2;
}
.invest-principle p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  font-weight: 500;
  max-width: 32ch;
}

/* Section head w/ button */
.invest-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 16px;
}

/* Discipline · 2 plain columns on white */
.invest-discipline { background: var(--cream); }
.invest-disc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.invest-disc-col {
  background: #FFFFFF;
  border: 1px solid rgba(61, 28, 8, 0.08);
  border-radius: 8px;
  padding: 28px 32px 24px;
}
.invest-disc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(61, 28, 8, 0.08);
  margin-bottom: 18px;
}
.invest-disc-mark {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.invest-disc-mark.not {
  background: rgba(165, 45, 30, 0.08);
  color: #A5392E;
}
.invest-disc-mark.do {
  background: rgba(75, 142, 30, 0.12);
  color: #4B8E1E;
}
.invest-disc-mark svg { width: 18px; height: 18px; }
.invest-disc-lbl {
  font-size: 18px;
  font-weight: 800;
  color: var(--cocoa);
  letter-spacing: -0.005em;
}
.invest-disc-sub {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.invest-disc-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.invest-disc-col li {
  padding: 12px 0;
  border-bottom: 1px solid rgba(61, 28, 8, 0.06);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--cocoa);
  line-height: 1.45;
}
.invest-disc-col li:last-child { border-bottom: 0; }
.invest-disc-col li::before { content: none !important; }

/* Final CTA */
.invest-final-cta { background: var(--cream); }
.invest-final-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

@media (max-width: 980px) {
  .invest-hero-grid,
  .invest-final-grid { grid-template-columns: 1fr; gap: 32px; }
  .invest-principles { grid-template-columns: 1fr; gap: 28px; }
  .invest-disc-grid { grid-template-columns: 1fr; gap: 18px; }
}


/* ─── Cycle animation · institutional cleanup ─────────────────────── */

/* Stops: thinner ring, monochrome typography */
.cycle-stop {
  width: 48px !important;
  height: 48px !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.50) !important;
  font-weight: 700 !important;
}
.cycle-stop:hover {
  border-color: rgba(255, 255, 255, 0.55) !important;
  color: var(--cream) !important;
}
.cycle-stop .num {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
}
.cycle-stop.is-done {
  border-color: rgba(255, 255, 255, 0.30) !important;
  color: rgba(255, 255, 255, 0.60) !important;
}
.cycle-stop.is-active {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: var(--cocoa-deep) !important;
  box-shadow:
    0 0 0 5px rgba(184, 148, 90, 0.16),
    0 6px 20px rgba(184, 148, 90, 0.35) !important;
  transform: scale(1.08) !important;
  animation: none !important;
}

/* Rail: thinner, monochrome */
.cycle-line { background: rgba(255, 255, 255, 0.16) !important; height: 1px !important; }
.cycle-line-fill {
  background: var(--gold) !important;
  height: 1px !important;
  box-shadow: 0 0 8px rgba(184, 148, 90, 0.30) !important;
}

/* Cards: minimal, institutional */
.cycle-details {
  margin-top: 56px !important;
  gap: 4px !important;
}
.cycle-detail {
  margin: 0 4px !important;
  padding: 22px 18px 22px !important;
  text-align: left !important;
  opacity: 0.65 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 0 !important;
  transform: none !important;
  box-shadow: none !important;
}
.cycle-detail:hover { opacity: 0.85; }
.cycle-detail.is-active {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-top: 1px solid var(--gold) !important;
  box-shadow: none !important;
  transform: translateY(-2px) !important;
}
.cycle-detail.is-active::before {
  background: var(--gold) !important;
  width: 100% !important;
  height: 2px !important;
  top: -1px !important;
  left: 0 !important;
  transform: none !important;
}

.cycle-detail .k {
  font-size: 10px !important;
  letter-spacing: 0.20em !important;
  font-weight: 700 !important;
  color: var(--gold) !important;
}
.cycle-detail h4 {
  font-size: 17px !important;
  font-weight: 700 !important;
  margin-top: 10px !important;
  color: var(--cream) !important;
  letter-spacing: -0.005em !important;
  line-height: 1.2 !important;
  max-width: none !important;
}
.cycle-detail p {
  margin: 12px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 500 !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}
.cycle-detail .money {
  margin-top: 18px !important;
  display: inline-block !important;
  padding: 6px 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  border-radius: 0 !important;
}
.cycle-detail.is-active .money {
  color: var(--cream) !important;
}

/* Phase 5 special-case override · keep green but match institutional layout */
.cycle-detail:nth-child(5).is-active {
  background: rgba(75, 142, 30, 0.10) !important;
  border-top: 1px solid #4B8E1E !important;
  box-shadow: none !important;
  transform: translateY(-2px) !important;
}
.cycle-detail:nth-child(5).is-active::before {
  background: linear-gradient(90deg, #72BD2D 0%, #4B8E1E 100%) !important;
  height: 2px !important;
  top: -1px !important;
  width: 100% !important;
  box-shadow: 0 0 8px rgba(75, 142, 30, 0.40) !important;
}
.cycle-detail:nth-child(5).is-active .k { color: #4B8E1E !important; }
.cycle-detail:nth-child(5).is-active h4 { color: var(--cream) !important; }
.cycle-detail:nth-child(5).is-active p { color: rgba(255, 255, 255, 0.70) !important; }
.cycle-detail:nth-child(5).is-active .money {
  color: #4B8E1E !important;
  font-weight: 800 !important;
}

/* Pod: subtler glow */
.cycle-pod img {
  filter: brightness(0) invert(1)
          drop-shadow(0 0 12px rgba(184, 148, 90, 0.45)) !important;
}


/* ─── Cycle animation · classic-bank redesign ───────────────────── */

/* Force the wrapping section to a clean cream surface — drop dark brown */
.section.tight.dark-deep:has(.cycle-anim) {
  background: var(--cream) !important;
  color: var(--cocoa) !important;
}
/* Fallback for browsers without :has — also tag via JS later if needed */

/* Cycle wrapper · light, generous */
.cycle-anim {
  background: transparent !important;
  padding: 0 !important;
}

/* Hide the circular stops + pod entirely · we replace with a flat row */
.cycle-track-wrap { padding: 0 !important; }
.cycle-track { height: 4px !important; margin: 0 !important; }
.cycle-line { background: rgba(61, 28, 8, 0.10) !important; height: 2px !important; left: 0 !important; right: 0 !important; }
.cycle-line-fill { background: var(--gold) !important; height: 2px !important; box-shadow: none !important; left: 0 !important; }
.cycle-stops { display: none !important; }
.cycle-pod { display: none !important; }

/* Cards row · 5 numbered columns separated by hairlines */
.cycle-details {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0 !important;
  margin-top: 36px !important;
  padding: 0 !important;
  border-top: 1px solid rgba(61, 28, 8, 0.12) !important;
  border-bottom: 1px solid rgba(61, 28, 8, 0.12) !important;
}
.cycle-detail {
  position: relative;
  margin: 0 !important;
  padding: 36px 26px 34px !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid rgba(61, 28, 8, 0.10) !important;
  border-radius: 0 !important;
  text-align: left !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;
  transition: background 0.45s ease, border-right-color 0.45s ease, transform 0.45s ease !important;
}
.cycle-detail:last-child { border-right: 0 !important; }
.cycle-detail::before {
  content: attr(data-step-num);
  display: block;
  font-size: clamp(56px, 5.5vw, 88px);
  font-weight: 200;
  letter-spacing: -0.05em;
  color: rgba(61, 28, 8, 0.18);
  line-height: 0.9;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
  font-family: "Raleway", sans-serif;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  transform: none !important;
  transition: color 0.45s ease;
}
.cycle-detail.is-active {
  background: #FFFFFF !important;
  opacity: 1 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 38px rgba(61, 28, 8, 0.10) !important;
  border-right-color: transparent !important;
}
.cycle-detail.is-active::before {
  color: #4B8E1E !important;
  font-weight: 800 !important;
}
.cycle-detail.is-active::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: -1px;
  height: 2px;
  background: #4B8E1E;
  z-index: 2;
}

.cycle-detail .k {
  font-size: 10.5px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  color: var(--muted) !important;
  margin-bottom: 6px !important;
}
.cycle-detail.is-active .k { color: #4B8E1E !important; }
.cycle-detail h4 {
  margin: 6px 0 14px !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--cocoa) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
  max-width: none !important;
}
.cycle-detail p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
  max-width: none !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.cycle-detail .money {
  margin-top: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  display: inline-block !important;
  border-top: 1px solid rgba(61, 28, 8, 0.12) !important;
  padding-top: 14px !important;
  width: 100%;
}
.cycle-detail.is-active .money {
  color: #4B8E1E !important;
  border-top-color: rgba(75, 142, 30, 0.30) !important;
}

/* Phase 5 victory — keep but match new style */
.cycle-detail:nth-child(5).is-active {
  background: #FFFFFF !important;
  box-shadow:
    0 0 0 1px rgba(75, 142, 30, 0.25),
    0 18px 42px rgba(75, 142, 30, 0.18) !important;
}
.cycle-detail:nth-child(5).is-active::after {
  background: linear-gradient(90deg, #72BD2D 0%, #4B8E1E 100%) !important;
  height: 3px !important;
}

/* Calculator wrap inside cycle-anim - lift its background tint */
.cycle-anim .calc {
  background: transparent !important;
  border: 0 !important;
  margin-top: 56px !important;
  padding: 0 !important;
}
.cycle-anim .calc::before { display: none !important; }


/* Cycle kickers — active state much bigger & green */
.cycle-detail.is-active .k {
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #4B8E1E !important;
  letter-spacing: 0.22em !important;
}
.cycle-detail:nth-child(5).is-active .k {
  font-size: 14px !important;
  color: #4B8E1E !important;
  font-weight: 900 !important;
}

/* Phase 5 visibility · solid green background instead of white */
.cycle-detail:nth-child(5).is-active {
  background: linear-gradient(160deg, #FFFFFF 0%, #EFFADF 100%) !important;
  box-shadow:
    0 0 0 1px rgba(75, 142, 30, 0.30),
    0 22px 50px rgba(75, 142, 30, 0.22) !important;
  border-right-color: transparent !important;
  overflow: hidden;
}
.cycle-detail:nth-child(5).is-active::before {
  color: #4B8E1E !important;
}
.cycle-detail:nth-child(5).is-active .k { color: #4B8E1E !important; }
.cycle-detail:nth-child(5).is-active h4 { color: var(--cocoa) !important; }
.cycle-detail:nth-child(5).is-active p { color: var(--muted) !important; }
.cycle-detail:nth-child(5).is-active .money {
  color: #4B8E1E !important;
  border-top-color: rgba(75, 142, 30, 0.30) !important;
}

/* Falling cocoa pods inside phase 5 */
.cycle-pod-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.cycle-pod-rain span {
  position: absolute;
  top: -40px;
  left: var(--x);
  width: var(--w);
  height: var(--h);
  background: var(--c);
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  transform: rotate(var(--r));
  opacity: 0.85;
  animation: pod-rain-fall var(--dur) cubic-bezier(.3, .1, .5, 1) var(--d) infinite,
             pod-rain-spin var(--dur) linear var(--d) infinite;
  box-shadow: inset -3px -3px 8px rgba(0, 0, 0, 0.25);
}
@keyframes pod-rain-fall {
  0%   { top: -40px; opacity: 0; }
  10%  { opacity: 0.9; }
  100% { top: 120%; opacity: 0; }
}
@keyframes pod-rain-spin {
  0%   { transform: rotate(var(--r)); }
  100% { transform: rotate(calc(var(--r) + 540deg)); }
}
.cycle-detail .k,
.cycle-detail h4,
.cycle-detail p,
.cycle-detail .money { position: relative; z-index: 1; }


/* Capability cards · pod tints on hover (one color per stage) */
.cap-card::after {
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.2,.8,.2,1.2), filter 0.5s ease !important;
}
.capability-grid .cap-card:nth-child(1):hover::after {
  /* Control origin · young green */
  filter: brightness(0) saturate(100%) invert(46%) sepia(60%) saturate(420%) hue-rotate(45deg) brightness(95%) contrast(95%);
  opacity: 0.85 !important;
}
.capability-grid .cap-card:nth-child(2):hover::after {
  /* Verify quality · golden yellow */
  filter: brightness(0) saturate(100%) invert(70%) sepia(70%) saturate(420%) hue-rotate(0deg) brightness(105%) contrast(100%);
  opacity: 0.85 !important;
}
.capability-grid .cap-card:nth-child(3):hover::after {
  /* Secure compliance · orange */
  filter: brightness(0) saturate(100%) invert(55%) sepia(75%) saturate(900%) hue-rotate(355deg) brightness(100%) contrast(95%);
  opacity: 0.85 !important;
}
.capability-grid .cap-card:nth-child(4):hover::after {
  /* Move buyer-ready · red mature */
  filter: brightness(0) saturate(100%) invert(34%) sepia(85%) saturate(1800%) hue-rotate(345deg) brightness(95%) contrast(95%);
  opacity: 0.85 !important;
}
.capability-grid .cap-card:nth-child(5):hover::after {
  /* Settle & recycle · brand cocoa brown (saturated) */
  filter: brightness(0) saturate(100%) invert(15%) sepia(65%) saturate(1200%) hue-rotate(8deg) brightness(85%) contrast(105%);
  opacity: 0.85 !important;
}


/* Capability cards · bigger green titles + bolder body */
.cap-card h3 {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #4B8E1E !important;
  letter-spacing: -0.01em !important;
  line-height: 1.15 !important;
}
.cap-card p {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--cocoa) !important;
  line-height: 1.55 !important;
}


/* Gallery captions · much bigger green numbers */
.gallery-n {
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}
.gallery-cap { padding: 16px 20px !important; gap: 16px !important; align-items: center !important; }
.gallery-cap span:last-child {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}


/* Impact areas · institutional redesign (annual-report style) */
.impact-areas {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  border-top: 1px solid rgba(61, 28, 8, 0.14) !important;
  border-bottom: 1px solid rgba(61, 28, 8, 0.14) !important;
  padding: 0 !important;
  margin-bottom: 56px !important;
}
.impact-area {
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid rgba(61, 28, 8, 0.10) !important;
  border-radius: 0 !important;
  padding: 26px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
  transition: background 0.3s ease, transform 0s !important;
}
.impact-area:nth-child(4n) { border-right: 0 !important; }
.impact-area:nth-child(n+5) { border-top: 1px solid rgba(61, 28, 8, 0.10) !important; }
.impact-area:hover {
  background: rgba(75, 142, 30, 0.05) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Icon · subtle outline, not chunky green badge */
.impact-area-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #4B8E1E !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.3s ease !important;
}
.impact-area-icon svg {
  width: 30px !important;
  height: 30px !important;
}
/* Use outline icons by adding stroke override */
.impact-area-icon svg path,
.impact-area-icon svg circle {
  fill: none !important;
  stroke: #4B8E1E !important;
  stroke-width: 1.4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.impact-area:hover .impact-area-icon {
  transform: translateY(-2px);
}

/* Label · typographic, no all-caps */
.impact-area-lbl {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--cocoa) !important;
  letter-spacing: -0.005em !important;
  line-height: 1.2 !important;
}

@media (max-width: 980px) {
  .impact-areas { grid-template-columns: 1fr 1fr !important; }
  .impact-area:nth-child(4n) { border-right: 1px solid rgba(61, 28, 8, 0.10) !important; }
  .impact-area:nth-child(2n) { border-right: 0 !important; }
}


/* ─── Impact split band · cocoa panel + photo ─────────────────── */
.impact-split {
  padding: 0 !important;
  background: var(--cocoa-deep);
  overflow: hidden;
}
.impact-split-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  min-height: 560px;
}

/* LEFT solid cocoa panel */
.impact-panel {
  background: linear-gradient(155deg, var(--cocoa-deep) 0%, var(--cocoa) 100%);
  display: flex;
  align-items: center;
  padding: 72px clamp(40px, 5vw, 80px);
  position: relative;
}
.impact-panel-inner { max-width: 540px; }
.impact-panel .eyebrow {
  color: var(--cream) !important;
}
.impact-panel .eyebrow::before { background: var(--gold) !important; opacity: 1 !important; }

.impact-panel-h1 {
  margin: 24px 0 32px !important;
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  text-wrap: balance;
}
.impact-panel-h1 .pct {
  font-size: clamp(80px, 9vw, 140px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  line-height: 0.9 !important;
  color: var(--cream) !important;
  display: inline-flex;
  align-items: baseline;
  margin-bottom: 8px;
}
.impact-panel-h1 .pct .sym {
  font-size: 0.45em !important;
  font-weight: 500 !important;
  color: var(--gold) !important;
  margin-left: 6px;
}
.impact-panel-h1 .line {
  font-size: clamp(26px, 2.6vw, 38px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--cream) !important;
  line-height: 1.1 !important;
}
.impact-panel-h1 .line em {
  font-style: normal;
  color: var(--gold);
  font-weight: 800;
}

.impact-panel-lede {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: rgba(248, 245, 241, 0.78) !important;
  font-weight: 500 !important;
  max-width: 44ch;
}
.impact-panel-ce {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}
.impact-panel-strong { color: var(--gold) !important; font-weight: 800 !important; }

/* RIGHT photo */
.impact-photo-r {
  position: relative;
  overflow: hidden;
  background: var(--cocoa-deep);
}
.impact-photo-r image-slot { z-index: 0; }
.impact-photo-overlay {
  position: absolute;
  bottom: 32px;
  right: 32px;
  z-index: 2;
  background: linear-gradient(155deg, var(--cocoa-deep) 0%, var(--cocoa) 100%);
  padding: 22px 26px;
  max-width: 320px;
  border-radius: 4px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
}
.impact-photo-overlay p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--cream);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.impact-photo-overlay strong {
  font-weight: 800;
  color: var(--cream);
}

/* ─── 6-column area grid (replaces icon tiles) ────────────────── */
.impact-cols {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  border-top: 1px solid rgba(61, 28, 8, 0.12);
  padding-top: 28px;
}
.impact-col {
  padding: 0 24px 0 0;
  border-right: 1px solid rgba(61, 28, 8, 0.08);
}
.impact-col:last-child { border-right: 0; padding-right: 0; }
.impact-col-lbl {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #4B8E1E;
  margin-bottom: 12px;
}
.impact-col p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cocoa);
  font-weight: 500;
  max-width: 22ch;
}

@media (max-width: 1100px) {
  .impact-split-grid { grid-template-columns: 1fr; }
  .impact-photo-r { min-height: 360px; }
  .impact-cols { grid-template-columns: repeat(3, 1fr); }
  .impact-col:nth-child(3n) { border-right: 0; }
  .impact-col:nth-child(n+4) { padding-top: 24px; border-top: 1px solid rgba(61, 28, 8, 0.08); }
}
@media (max-width: 720px) {
  .impact-cols { grid-template-columns: 1fr 1fr; }
  .impact-col:nth-child(2n) { border-right: 0; }
  .impact-col:nth-child(3n) { border-right: 1px solid rgba(61, 28, 8, 0.08); }
  .impact-col:nth-child(n+3) { padding-top: 24px; border-top: 1px solid rgba(61, 28, 8, 0.08); }
}


/* Impact mid · match the dark panel's gold/cream palette (not green) */
.impact-mid-h2 .wave-letters {
  color: var(--gold) !important;
}
.impact-mid-h2 .wave-letters .wave-letter {
  color: var(--gold) !important;
}
/* Column labels: cocoa, not green */
.impact-col-lbl {
  color: var(--cocoa) !important;
}
/* Quote · subtle gold accent instead of green */
.impact-mid-quote {
  border-left-color: var(--gold) !important;
}
.impact-mid-quote .impact-mark {
  color: var(--gold) !important;
}


/* Impact overlay box · cream ribbon on the left edge */
.impact-photo-overlay {
  border-left: 3px solid var(--cream) !important;
}


/* Impact columns · big numeral + accent rule + bolder type */
.impact-cols {
  padding-top: 36px !important;
  gap: 0 !important;
}
.impact-col {
  position: relative;
  padding: 0 28px 8px 0 !important;
  border-right: 1px solid rgba(61, 28, 8, 0.08);
  transition: padding 0.3s ease, transform 0.3s ease !important;
}
.impact-col:last-child { border-right: 0; padding-right: 0; }
.impact-col:hover { transform: translateY(-3px); }
.impact-col-n {
  font-size: 36px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  color: var(--gold) !important;
  line-height: 0.9 !important;
  font-variant-numeric: tabular-nums !important;
  margin-bottom: 14px !important;
}
.impact-col-rule {
  width: 28px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 18px;
  transition: width 0.4s cubic-bezier(.2, .8, .2, 1.2);
}
.impact-col:hover .impact-col-rule { width: 56px; background: var(--cocoa); }
.impact-col-lbl {
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--cocoa) !important;
  margin-bottom: 10px !important;
  line-height: 1.2 !important;
}
.impact-col p {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: var(--cocoa) !important;
  line-height: 1.55 !important;
  max-width: 24ch !important;
}


/* Impact mid · gradient fade cream → cocoa, columns sit on cocoa portion */
.impact-mid {
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 40%, var(--cocoa) 100%) !important;
  padding-bottom: 88px !important;
}

/* Columns area: separator line in cream over the dark portion */
.impact-cols {
  border-top: 1px solid rgba(248, 245, 241, 0.20) !important;
  margin-top: 12px !important;
}
.impact-col {
  border-right-color: rgba(248, 245, 241, 0.14) !important;
}

/* Numerals · clean white */
.impact-col-n {
  color: #FFFFFF !important;
  opacity: 0.95;
}
/* Rule · cream */
.impact-col-rule {
  background: var(--cream) !important;
}
.impact-col:hover .impact-col-rule { background: var(--gold) !important; }

/* Labels · white, fresh */
.impact-col-lbl {
  color: #FFFFFF !important;
}
.impact-col p {
  color: rgba(248, 245, 241, 0.80) !important;
}


/* Column 01 · photo background */
.impact-col:nth-child(1) {
  position: relative;
  padding: 22px 22px 22px 22px !important;
  border-radius: 6px;
  overflow: hidden;
  margin-right: 8px;
  background-image: linear-gradient(155deg, rgba(20, 9, 3, 0.78) 0%, rgba(20, 9, 3, 0.55) 100%),
                    url("assets/impact-education.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-blend-mode: normal, normal;
  border-right: 0 !important;
  transition: background-color 0.4s ease, transform 0.3s ease !important;
}
.impact-col:nth-child(1):hover {
  background-image: linear-gradient(155deg, rgba(20, 9, 3, 0.62) 0%, rgba(20, 9, 3, 0.38) 100%),
                    url("assets/impact-education.jpg");
  transform: translateY(-3px);
}
.impact-col:nth-child(1) p { max-width: 22ch !important; }


/* Team-closing band · no decorative pod on the right */
.team-closing::before,
.team-closing::after,
.team-closing .pod-corner {
  display: none !important;
}


/* ─── Community Impact Fund · roadmap section ─────────────────── */

.impact-fund {
  background: var(--cream);
  padding-top: 88px !important;
  padding-bottom: 96px !important;
}
.fund-head {
  max-width: 720px;
  margin: 0 auto 64px;
  text-align: center;
}
.fund-head .eyebrow {
  justify-content: center;
  color: #4B8E1E !important;
}
.fund-head .eyebrow::before,
.fund-head .eyebrow::after {
  content: "";
  width: 32px;
  height: 1.5px;
  background: #4B8E1E;
  opacity: 0.85;
}
.fund-h2 {
  margin: 22px 0 22px;
  font-size: clamp(38px, 5.4vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--cocoa);
}
.fund-h2-line.light { font-weight: 200; }
.fund-h2-line.bold  { font-weight: 800; color: #4B8E1E; }
.fund-sub {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  font-weight: 500;
}
.fund-sub strong { color: var(--cocoa); font-weight: 800; }

/* Progress block */
.fund-progress {
  max-width: 920px;
  margin: 0 auto 72px;
}
.fund-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
  gap: 24px;
}
.fund-progress-k {
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--muted);
}
.fund-progress-v {
  margin-top: 6px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--cocoa);
  font-variant-numeric: tabular-nums;
}
.fund-progress-r { text-align: right; }
.fund-progress-v-raised { color: #4B8E1E; }
.fund-progress-track {
  height: 6px;
  background: rgba(61, 28, 8, 0.10);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.fund-progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #72BD2D 0%, #4B8E1E 100%);
  border-radius: 999px;
  position: relative;
}
.fund-progress-note {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: right;
  color: var(--muted);
  font-weight: 600;
}

/* Roadmap */
.fund-roadmap {
  position: relative;
  padding: 24px 0 0;
}
.fund-roadmap-line {
  position: absolute;
  top: 50px;
  left: 7%;
  right: 7%;
  height: 4px;
  background: rgba(61, 28, 8, 0.12);
  border-radius: 4px;
}
.fund-roadmap-fill {
  position: absolute;
  top: 50px;
  left: 7%;
  width: 4%;
  height: 4px;
  background: linear-gradient(90deg, #72BD2D 0%, #4B8E1E 100%);
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(75, 142, 30, 0.40);
}
.fund-milestones {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
  z-index: 1;
}
.fund-milestone {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 18px;
}
.fund-milestone-dot {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid rgba(61, 28, 8, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(61, 28, 8, 0.45);
  font-family: "Raleway", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  transition: transform 0.35s cubic-bezier(.3, .8, .3, 1.2), background 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
  margin-bottom: 22px;
  position: relative;
}
.fund-milestone:hover .fund-milestone-dot {
  border-color: var(--gold);
  color: var(--cocoa);
  transform: scale(1.05);
}
.fund-milestone.is-active .fund-milestone-dot {
  background: linear-gradient(155deg, #72BD2D 0%, #4B8E1E 100%);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow:
    0 0 0 6px rgba(75, 142, 30, 0.16),
    0 16px 32px rgba(75, 142, 30, 0.30);
}

.fund-milestone-date {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 10px;
}
.fund-milestone.is-active .fund-milestone-date { color: #4B8E1E; }
.fund-milestone-title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--cocoa);
  line-height: 1.2;
  margin-bottom: 8px;
  max-width: 18ch;
}
.fund-milestone-sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  font-weight: 500;
  max-width: 22ch;
}

@media (max-width: 980px) {
  .fund-milestones { grid-template-columns: 1fr; gap: 28px; }
  .fund-roadmap-line, .fund-roadmap-fill { display: none; }
  .fund-progress-meta { flex-direction: column; gap: 12px; }
  .fund-progress-r { text-align: left; }
}


/* Impact Fund · condensed */
.impact-fund { padding-top: 56px !important; padding-bottom: 64px !important; }
.fund-head { margin-bottom: 36px !important; max-width: 640px !important; }
.fund-h2 {
  margin: 14px 0 14px !important;
  font-size: clamp(30px, 4vw, 48px) !important;
  line-height: 1.0 !important;
}
.fund-sub { font-size: 15px !important; line-height: 1.5 !important; }

.fund-progress { margin-bottom: 48px !important; max-width: 820px !important; }
.fund-progress-v { font-size: 22px !important; }
.fund-progress-track { height: 4px !important; }
.fund-progress-note { font-size: 11px !important; margin-top: 8px !important; }

.fund-roadmap { padding-top: 8px !important; }
.fund-roadmap-line, .fund-roadmap-fill { top: 32px !important; height: 3px !important; }
.fund-milestone-dot {
  width: 54px !important;
  height: 54px !important;
  font-size: 17px !important;
  margin-bottom: 14px !important;
  border-width: 1.5px !important;
}
.fund-milestone.is-active .fund-milestone-dot {
  box-shadow:
    0 0 0 4px rgba(75, 142, 30, 0.16),
    0 10px 22px rgba(75, 142, 30, 0.28) !important;
}
.fund-milestone-date {
  font-size: 10px !important;
  margin-bottom: 6px !important;
}
.fund-milestone-title {
  font-size: 14px !important;
  line-height: 1.2 !important;
  max-width: 14ch !important;
}


/* ─── Community Impact Fund · stepper redesign (no circles) ───── */
.fund-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
  border-top: 2px solid rgba(61, 28, 8, 0.12);
}
.fund-steps::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 20%;
  height: 2px;
  background: linear-gradient(90deg, #72BD2D 0%, #4B8E1E 100%);
  box-shadow: 0 0 10px rgba(75, 142, 30, 0.5);
}
.fund-step {
  position: relative;
  padding: 22px 24px 0 0;
  margin-right: 24px;
  border-right: 1px solid rgba(61, 28, 8, 0.10);
  transition: padding 0.3s ease, background 0.3s ease;
}
.fund-step:last-child {
  border-right: 0;
  margin-right: 0;
  padding-right: 0;
}
.fund-step::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  width: 14px;
  height: 14px;
  background: var(--cream);
  border: 2px solid rgba(61, 28, 8, 0.20);
  border-radius: 50%;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.fund-step:hover::before {
  border-color: var(--cocoa);
  transform: scale(1.15);
}
.fund-step.is-active::before {
  background: #4B8E1E;
  border-color: #4B8E1E;
  box-shadow: 0 0 0 5px rgba(75, 142, 30, 0.18);
  transform: scale(1.2);
}
.fund-step-num {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgba(61, 28, 8, 0.30);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
  transition: color 0.3s ease;
}
.fund-step.is-active .fund-step-num { color: #4B8E1E; }
.fund-step-date {
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 8px;
}
.fund-step.is-active .fund-step-date { color: #4B8E1E; }
.fund-step-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--cocoa);
  letter-spacing: -0.005em;
  line-height: 1.2;
  max-width: 16ch;
}

/* Remove obsolete circle styles by undoing them */
.fund-roadmap, .fund-roadmap-line, .fund-roadmap-fill,
.fund-milestones, .fund-milestone-dot { display: none !important; }

@media (max-width: 980px) {
  .fund-steps { grid-template-columns: 1fr; gap: 0; }
  .fund-step { padding: 18px 0 18px 24px; margin-right: 0; border-right: 0; border-top: 1px solid rgba(61, 28, 8, 0.10); }
  .fund-step:first-child { border-top: 0; }
  .fund-step::before { top: 24px; left: -7px; }
  .fund-steps::before { display: none; }
}


/* Fund stepper · modern typography mix */
.fund-step-num {
  font-family: "Outfit", "Raleway", sans-serif !important;
  font-weight: 300 !important;
  font-size: 44px !important;
  letter-spacing: -0.04em !important;
  color: rgba(61, 28, 8, 0.22) !important;
  margin-bottom: 18px !important;
}
.fund-step.is-active .fund-step-num {
  font-weight: 800 !important;
  color: #4B8E1E !important;
}
.fund-step-date {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin-bottom: 10px !important;
}
.fund-step.is-active .fund-step-date {
  color: #4B8E1E !important;
  font-weight: 700 !important;
}
.fund-step-title {
  font-family: "Outfit", "Raleway", sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: var(--cocoa) !important;
  line-height: 1.15 !important;
}
.fund-step.is-active .fund-step-title { font-weight: 700 !important; }

/* Use modern Outfit on the fund head too for consistency */
.impact-fund .fund-h2 {
  font-family: "Outfit", "Raleway", sans-serif !important;
  letter-spacing: -0.035em !important;
}
.impact-fund .fund-progress-v {
  font-family: "Outfit", "Raleway", sans-serif !important;
  letter-spacing: -0.03em !important;
}
.impact-fund .fund-progress-k,
.impact-fund .fund-progress-note {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  letter-spacing: 0.08em !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}


/* ─── Fund progress · redesigned · big number, solid bar ───────── */
.fund-progress {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: left;
}
.fund-progress-bar {
  height: 5px;
  background: rgba(75, 142, 30, 0.14);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 18px;
}
.fund-progress-bar .fund-progress-fill {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #72BD2D 0%, #4B8E1E 100%);
  border-radius: 4px;
}
.fund-progress-readout {
  margin-bottom: 22px;
}
.fund-progress-amount {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: clamp(40px, 4.4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #4B8E1E;
}
.fund-progress-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: #4B8E1E;
  opacity: 0.7;
}
.fund-progress-badge svg { width: 22px; height: 22px; }
.fund-progress-sub {
  margin-top: 6px;
  font-family: "Outfit", "Raleway", sans-serif !important;
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.fund-cta-row {
  display: flex;
  justify-content: flex-start;
}
.fund-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: var(--cocoa);
  color: var(--cream);
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 10px 22px rgba(61, 28, 8, 0.16);
}
.fund-cta:hover {
  background: #4B8E1E;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(75, 142, 30, 0.30);
}
.fund-cta-arrow svg { width: 14px; height: 10px; }


/* ─── Fund timeline · cleaner, no boxed cells ──────────────────── */
.fund-steps {
  border-top: 0 !important;
  position: relative;
  padding-top: 18px !important;
}
.fund-steps::before {
  display: none !important;
}
.fund-step {
  border-right: 0 !important;
  padding: 0 18px 0 0 !important;
  margin-right: 18px !important;
  position: relative;
}
.fund-step:last-child { padding-right: 0 !important; margin-right: 0 !important; }
/* New connecting line drawn under the whole row */
.fund-steps {
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(61, 28, 8, 0.10) 0%,
      rgba(61, 28, 8, 0.10) 100%) no-repeat;
  background-size: 100% 1px;
  background-position: 0 0;
}
/* Active fill — first 20% in green */
.fund-steps::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 1px;
  background: linear-gradient(90deg, #72BD2D 0%, #4B8E1E 100%);
}
/* Marker dot per step */
.fund-step::before {
  top: -7px !important;
  left: 0 !important;
  width: 12px !important;
  height: 12px !important;
  border-width: 2px !important;
}

/* Numerals · lighter modern, less heavy */
.fund-step-num {
  font-size: 36px !important;
  font-weight: 200 !important;
  letter-spacing: -0.04em !important;
  color: var(--cocoa) !important;
  opacity: 0.45 !important;
  margin-top: 18px !important;
  margin-bottom: 14px !important;
}
.fund-step.is-active .fund-step-num {
  font-weight: 700 !important;
  color: #4B8E1E !important;
  opacity: 1 !important;
}

/* Modern compact CTA row (after the steps) */
.fund-cta-row {
  margin-top: 56px !important;
  padding-top: 36px;
  border-top: 1px solid rgba(61, 28, 8, 0.10);
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: wrap;
}
.fund-cta-text {
  margin: 0;
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--cocoa);
  letter-spacing: -0.005em;
  max-width: 46ch;
}
.fund-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 22px !important;
  background: transparent !important;
  border: 1.5px solid #4B8E1E !important;
  color: #4B8E1E !important;
  font-family: "Outfit", "Raleway", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease !important;
}
.fund-cta:hover {
  background: #4B8E1E !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}
.fund-cta-arrow svg { width: 14px; height: 10px; }


/* ─── Progress bar with milestone dots + tooltips ──────────────── */
.fund-progress-bar {
  position: relative;
  height: 4px;
  background: rgba(61, 28, 8, 0.12);
  border-radius: 4px;
  overflow: visible;
  margin-bottom: 28px;
}
.fund-progress-bar .fund-progress-fill {
  width: 4%;
  height: 100%;
  background: linear-gradient(90deg, #72BD2D 0%, #4B8E1E 100%);
  border-radius: 4px;
}
.fund-progress-dots {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0;
  pointer-events: none;
}
.fund-progress-dot {
  position: absolute;
  top: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: var(--cream);
  border: 2px solid rgba(61, 28, 8, 0.30);
  border-radius: 50%;
  pointer-events: auto;
  cursor: default;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.fund-progress-dot:hover {
  transform: scale(1.30);
  border-color: var(--cocoa);
  background: #FFFFFF;
}
.fund-progress-dot.is-active {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: #4B8E1E;
  border: 0;
  box-shadow: 0 0 0 0 rgba(75, 142, 30, 0.55);
  animation: fund-pulse 2s ease-out infinite;
}
@keyframes fund-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(75, 142, 30, 0.55); }
  60%  { box-shadow: 0 0 0 14px rgba(75, 142, 30, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(75, 142, 30, 0);   }
}

/* Tooltip */
.fund-progress-dot-tip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--cocoa);
  color: var(--cream);
  padding: 10px 14px;
  border-radius: 4px;
  font-family: "Outfit", "Raleway", sans-serif;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(.2, .8, .2, 1.2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  box-shadow: 0 14px 30px rgba(61, 28, 8, 0.25);
  z-index: 5;
}
.fund-progress-dot-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--cocoa);
}
.tip-date {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.tip-title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--cream);
}
.fund-progress-dot:hover .fund-progress-dot-tip,
.fund-progress-dot.is-active .fund-progress-dot-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Hide old stepper styles · removed from JSX, just safety net */
.fund-steps { display: none !important; }


/* Fund progress · adjustments */
.fund-progress {
  max-width: 880px !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Tooltips · open BELOW the dots, translucent white, thin */
.fund-progress-dot-tip {
  bottom: auto !important;
  top: calc(100% + 12px) !important;
  background: rgba(248, 245, 241, 0.92) !important;
  color: var(--cocoa) !important;
  padding: 8px 12px !important;
  box-shadow: 0 8px 18px rgba(61, 28, 8, 0.10) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(61, 28, 8, 0.08);
  font-weight: 500 !important;
}
.fund-progress-dot-tip::after {
  top: auto !important;
  bottom: 100% !important;
  border-top-color: transparent !important;
  border-bottom-color: rgba(248, 245, 241, 0.92) !important;
}
.tip-date {
  color: var(--muted) !important;
  font-size: 9px !important;
  letter-spacing: 0.10em !important;
}
.tip-title {
  color: var(--cocoa) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Static start marker · sits below the green pulsing dot */
.fund-progress-marker-start {
  position: absolute;
  top: 24px;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fund-progress-marker-date {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4B8E1E;
  font-weight: 700;
}
.fund-progress-marker-title {
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--cocoa);
  letter-spacing: -0.005em;
}

/* Readout · move slightly left, tighter spacing */
.fund-progress-readout {
  margin-top: 56px !important;
  margin-left: 0 !important;
}
.fund-progress-amount {
  margin-left: 0 !important;
  padding-left: 0 !important;
}


/* Fund progress tooltip · Raleway typography */
.fund-progress-dot-tip {
  font-family: "Raleway", sans-serif !important;
}
.tip-date {
  font-family: "Raleway", sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
}
.tip-title {
  font-family: "Raleway", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--cocoa) !important;
}


/* Readout · split start/end below the bar */
.fund-progress-readout {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 48px !important;
  gap: 24px;
}
.fund-progress-amount-start {
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #4B8E1E;
  line-height: 1;
}
.fund-progress-amount-end {
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: rgba(61, 28, 8, 0.40);
  line-height: 1;
}
.fund-progress-sub-row {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: "Raleway", sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}


/* Project launch marker · ABOVE the dot (not below) */
.fund-progress-marker-start {
  top: auto !important;
  bottom: calc(100% + 12px) !important;
  align-items: flex-start !important;
}
.fund-progress-marker-date {
  color: #4B8E1E !important;
}

/* Amounts: $0 normal size left, $243.000 BIG grey on the right */
.fund-progress-amount-start {
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 700 !important;
  color: #4B8E1E !important;
}
.fund-progress-amount-end {
  font-size: clamp(40px, 4.4vw, 56px) !important;
  font-weight: 800 !important;
  color: rgba(61, 28, 8, 0.32) !important;
}


/* ─── Fund progress · 2-col layout with project card ─────────── */
.fund-progress-row {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 48px;
  align-items: start;
  margin: 0 auto 56px;
  max-width: 1080px;
}
.fund-progress-row .fund-progress {
  margin: 0 !important;
  max-width: none !important;
}

.fund-project-card {
  background: rgba(61, 28, 8, 0.04);
  border: 1px solid rgba(61, 28, 8, 0.10);
  padding: 22px 24px 22px;
  border-radius: 6px;
  color: var(--muted);
  font-family: "Raleway", sans-serif;
}
.fund-project-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.fund-project-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 148, 90, 0.18);
}
.fund-project-name {
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(61, 28, 8, 0.65);
  line-height: 1.15;
  margin-bottom: 8px;
}
.fund-project-location {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.fund-project-location svg { width: 14px; height: 14px; }
.fund-project-rule {
  margin: 18px 0;
  height: 1px;
  background: rgba(61, 28, 8, 0.10);
}
.fund-project-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fund-project-rows .k {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.fund-project-rows .v {
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(61, 28, 8, 0.62);
  letter-spacing: -0.005em;
}
.fund-project-footer {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(61, 28, 8, 0.08);
  font-size: 12px;
  line-height: 1.55;
  font-style: italic;
  color: rgba(61, 28, 8, 0.55);
  max-width: 30ch;
}

@media (max-width: 980px) {
  .fund-progress-row { grid-template-columns: 1fr; gap: 28px; }
}


/* ─── Potential projects · cards row ──────────────────────────── */
.fund-projects {
  margin: 56px 0 0;
}
.fund-projects-head {
  text-align: center;
  margin-bottom: 28px;
}
.fund-projects-head .eyebrow {
  justify-content: center;
  color: var(--gold) !important;
}
.fund-projects-head .eyebrow::before,
.fund-projects-head .eyebrow::after {
  background: var(--gold) !important;
  opacity: 0.85 !important;
}
.fund-projects-sub {
  margin: 12px 0 0;
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}
.fund-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.fund-pcard {
  background: #FFFFFF;
  border: 1px solid rgba(61, 28, 8, 0.10);
  border-radius: 8px;
  padding: 22px 24px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.fund-pcard.is-open {
  border-color: rgba(75, 142, 30, 0.45);
  box-shadow:
    0 0 0 1px rgba(75, 142, 30, 0.20),
    0 16px 36px rgba(75, 142, 30, 0.12);
}
.fund-pcard.is-open:hover {
  transform: translateY(-4px);
  border-color: #4B8E1E;
  box-shadow:
    0 0 0 1px #4B8E1E,
    0 26px 50px rgba(75, 142, 30, 0.22);
}
.fund-pcard.is-study {
  background: rgba(61, 28, 8, 0.03);
  color: var(--muted);
}
.fund-pcard.is-study:hover {
  border-color: rgba(61, 28, 8, 0.18);
}

.fund-pcard-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: "Raleway", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.fund-pcard-status.open {
  background: rgba(75, 142, 30, 0.12);
  color: #4B8E1E;
}
.fund-pcard-status.study {
  background: rgba(61, 28, 8, 0.08);
  color: var(--muted);
}
.fund-pcard-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.fund-pcard.is-open .fund-pcard-status-dot {
  animation: fund-pulse 2s ease-out infinite;
}

.fund-pcard-cat {
  font-family: "Raleway", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.20em;
  color: var(--gold);
  margin-bottom: 8px;
}
.fund-pcard.is-study .fund-pcard-cat { color: rgba(61, 28, 8, 0.45); }

.fund-pcard-name {
  margin: 0 0 8px;
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--cocoa);
  line-height: 1.2;
}
.fund-pcard.is-study .fund-pcard-name { color: rgba(61, 28, 8, 0.65); }

.fund-pcard-loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Raleway", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.fund-pcard-loc svg { width: 12px; height: 12px; }

.fund-pcard-rule {
  margin: 16px 0;
  height: 1px;
  background: rgba(61, 28, 8, 0.08);
}

.fund-pcard-stat .k {
  font-family: "Raleway", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.fund-pcard-stat .v {
  margin-top: 4px;
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cocoa);
  font-variant-numeric: tabular-nums;
}
.fund-pcard.is-study .fund-pcard-stat .v { color: rgba(61, 28, 8, 0.50); }

.fund-pcard-bar {
  margin-top: 14px;
}
.fund-pcard-bar-track {
  height: 4px;
  background: rgba(75, 142, 30, 0.12);
  border-radius: 999px;
  overflow: hidden;
}
.fund-pcard-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #72BD2D 0%, #4B8E1E 100%);
  border-radius: 999px;
}
.fund-pcard-bar-meta {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  font-family: "Raleway", sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.fund-pcard-bar-meta strong {
  color: #4B8E1E;
  font-weight: 800;
}

.fund-pcard-foot {
  margin-top: 14px;
  font-family: "Raleway", sans-serif;
  font-size: 11.5px;
  font-style: italic;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.45;
}

@media (max-width: 980px) {
  .fund-projects-grid { grid-template-columns: 1fr; gap: 14px; }
}


/* ─── Potential projects · hero card redesign ─────────────────── */
.fund-pcard {
  padding: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.fund-pcard-hero {
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(165deg, var(--cocoa-deep) 0%, var(--cocoa) 100%);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 16px 18px;
}
.fund-pcard-hero.plain {
  background: linear-gradient(165deg, #5A4438 0%, #2E2520 100%);
  aspect-ratio: 4/3;
}
.fund-pcard-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.5s ease;
}
.fund-pcard.is-open:hover .fund-pcard-hero-img { transform: scale(1.04); }
.fund-pcard-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20, 9, 3, 0.10) 0%, rgba(20, 9, 3, 0.70) 100%);
}
.fund-pcard-hero > * { position: relative; z-index: 2; }

.fund-pcard-hero .fund-pcard-status {
  position: absolute;
  top: 14px;
  left: 14px;
  margin: 0;
  padding: 5px 11px;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  z-index: 3;
}
.fund-pcard.is-open .fund-pcard-hero .fund-pcard-status.open {
  background: rgba(255, 255, 255, 0.94);
  color: #4B8E1E;
}
.fund-pcard-hero .fund-pcard-status.study {
  background: rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.85);
}

/* Diagonal ribbon (first programme) */
.fund-pcard-ribbon {
  position: absolute;
  top: 18px;
  right: -38px;
  z-index: 3;
  background: linear-gradient(155deg, #72BD2D 0%, #4B8E1E 100%);
  color: #FFFFFF;
  padding: 6px 44px;
  font-family: "Raleway", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: rotate(35deg);
  box-shadow: 0 10px 22px rgba(75, 142, 30, 0.30);
}

.fund-pcard-hero-meta { width: 100%; }
.fund-pcard-hero-name {
  margin: 0 0 4px;
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.015em;
  line-height: 1.1;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.fund-pcard-hero-loc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Raleway", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.fund-pcard-hero-loc svg { width: 12px; height: 12px; }
.fund-pcard.is-study .fund-pcard-hero-loc { color: rgba(255, 255, 255, 0.65); }

/* Category strip */
.fund-pcard-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  font-family: "Raleway", sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cocoa);
  background: rgba(61, 28, 8, 0.04);
  border-bottom: 1px solid rgba(61, 28, 8, 0.08);
}
.fund-pcard-strip svg { width: 14px; height: 14px; opacity: 0.65; }
.fund-pcard.is-study .fund-pcard-strip { color: var(--muted); }

/* Body */
.fund-pcard-body {
  padding: 22px 24px 24px;
  flex: 1;
}
.fund-pcard-target {
  text-align: center;
  padding: 8px 0 18px;
}
.fund-pcard-target .v {
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #4B8E1E;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fund-pcard.is-study .fund-pcard-target .v { color: rgba(61, 28, 8, 0.42); font-weight: 700; }
.fund-pcard-target .k {
  margin-top: 6px;
  font-family: "Raleway", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.fund-pcard-cycle {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding-top: 14px;
  border-top: 1px solid rgba(61, 28, 8, 0.08);
  font-family: "Raleway", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 22px;
}
.fund-pcard-cycle svg { width: 14px; height: 14px; opacity: 0.55; }
.fund-pcard-cycle strong { color: var(--cocoa); font-weight: 800; }

.fund-pcard-bar { padding-top: 14px; border-top: 1px solid rgba(61, 28, 8, 0.08); }
.fund-pcard-bar-meta {
  display: flex;
  justify-content: space-between;
  font-family: "Raleway", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}
.fund-pcard-bar-meta strong { color: #4B8E1E; font-weight: 800; font-size: 15px; }
.fund-pcard-bar-scale {
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  font-family: "Raleway", sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
}

.fund-pcard-foot {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(61, 28, 8, 0.08);
  font-family: "Raleway", sans-serif;
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
  text-align: center;
  line-height: 1.45;
}


/* Hero photo · full bleed, no brown gap */
.fund-pcard-hero {
  aspect-ratio: 5/4 !important;
  background: var(--cocoa-deep);
  padding: 18px !important;
}
.fund-pcard-hero-img {
  object-fit: cover !important;
  object-position: center !important;
}
.fund-pcard-hero-veil {
  background: linear-gradient(180deg, rgba(20, 9, 3, 0.05) 0%, rgba(20, 9, 3, 0.55) 100%) !important;
}

/* Ribbon · readable, properly clipped to card */
.fund-pcard {
  position: relative;
  overflow: hidden;
}
.fund-pcard-ribbon {
  position: absolute !important;
  top: 16px !important;
  right: -54px !important;
  width: 180px !important;
  padding: 9px 0 !important;
  text-align: center;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  transform: rotate(40deg) !important;
  background: linear-gradient(155deg, #72BD2D 0%, #4B8E1E 100%);
  color: #FFFFFF;
  font-weight: 800;
  text-transform: uppercase;
  font-family: "Raleway", sans-serif;
  box-shadow: 0 8px 22px rgba(75, 142, 30, 0.30);
  line-height: 1.15;
  z-index: 4;
}
.fund-pcard-ribbon span { display: block; }

/* Status pill above the hero · cleaner */
.fund-pcard-hero .fund-pcard-status.open {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #4B8E1E !important;
  padding: 6px 12px !important;
  font-size: 10px !important;
}

/* Funding bar · BIGGER readable type */
.fund-pcard-bar-meta {
  font-size: 14px !important;
  margin-bottom: 12px !important;
}
.fund-pcard-bar-meta strong {
  font-size: 22px !important;
  letter-spacing: -0.015em !important;
}
.fund-pcard-bar-meta span:last-child {
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--cocoa);
  letter-spacing: -0.015em;
}
.fund-pcard-bar-track { height: 6px !important; }
.fund-pcard-bar-scale {
  font-size: 11px !important;
  margin-top: 8px !important;
}

/* Category strip · more refined wording style */
.fund-pcard-strip {
  text-transform: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  padding: 14px 18px !important;
  color: var(--cocoa) !important;
}
.fund-pcard-strip svg { width: 16px !important; height: 16px !important; opacity: 0.7 !important; }


/* Ribbon · slimmer */
.fund-pcard-ribbon {
  width: 150px !important;
  padding: 6px 0 !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  right: -44px !important;
  top: 14px !important;
}

/* Photo · full-card background on the open card */
.fund-pcard.is-open {
  position: relative;
  background:
    linear-gradient(180deg, rgba(20, 9, 3, 0.20) 0%, rgba(20, 9, 3, 0.85) 100%),
    url("assets/u21.jpg") center / cover no-repeat;
  color: var(--cream);
  border-color: rgba(75, 142, 30, 0.60) !important;
}
.fund-pcard.is-open .fund-pcard-hero {
  aspect-ratio: auto !important;
  height: 220px !important;
  background: transparent !important;
  padding: 16px 18px !important;
}
.fund-pcard.is-open .fund-pcard-hero-img { display: none !important; }
.fund-pcard.is-open .fund-pcard-hero-veil { display: none !important; }
.fund-pcard.is-open .fund-pcard-strip {
  background: rgba(20, 9, 3, 0.60) !important;
  color: var(--cream) !important;
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.fund-pcard.is-open .fund-pcard-strip svg { opacity: 0.85 !important; }
.fund-pcard.is-open .fund-pcard-body {
  background: rgba(20, 9, 3, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fund-pcard.is-open .fund-pcard-target .v { color: #A6E055 !important; }
.fund-pcard.is-open .fund-pcard-target .k { color: rgba(248, 245, 241, 0.65) !important; }
.fund-pcard.is-open .fund-pcard-cycle {
  border-top-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(248, 245, 241, 0.78) !important;
}
.fund-pcard.is-open .fund-pcard-cycle strong { color: var(--cream) !important; }
.fund-pcard.is-open .fund-pcard-bar {
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}
.fund-pcard.is-open .fund-pcard-bar-meta {
  color: rgba(248, 245, 241, 0.85) !important;
}
.fund-pcard.is-open .fund-pcard-bar-meta span:last-child { color: var(--cream) !important; }
.fund-pcard.is-open .fund-pcard-bar-track {
  background: rgba(255, 255, 255, 0.14) !important;
}
.fund-pcard.is-open .fund-pcard-bar-scale {
  color: rgba(248, 245, 241, 0.55) !important;
}


/* Open card · photo only on hero, body returns to dark solid */
.fund-pcard.is-open {
  background: var(--cocoa-deep) !important;
  color: var(--cream);
}
.fund-pcard.is-open .fund-pcard-hero {
  background:
    linear-gradient(180deg, rgba(20, 9, 3, 0.10) 0%, rgba(20, 9, 3, 0.55) 100%),
    url("assets/u21.jpg") center / cover no-repeat !important;
  aspect-ratio: auto !important;
  height: 220px !important;
  padding: 16px 18px !important;
}
.fund-pcard.is-open .fund-pcard-hero-img { display: none !important; }
.fund-pcard.is-open .fund-pcard-hero-veil { display: none !important; }

/* Ribbon · slide it down further so text reads cleanly */
.fund-pcard-ribbon {
  top: 26px !important;
  right: -50px !important;
}


/* Hero location · bolder, anchored to bottom */
.fund-pcard-hero-meta {
  position: absolute !important;
  bottom: 14px;
  left: 18px;
  right: 18px;
  z-index: 3;
}
.fund-pcard-hero-loc {
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}
.fund-pcard-hero-loc svg {
  width: 14px !important;
  height: 14px !important;
  color: var(--gold) !important;
}
.fund-pcard.is-study .fund-pcard-hero-loc {
  color: rgba(255, 255, 255, 0.65) !important;
}
.fund-pcard.is-study .fund-pcard-hero-loc svg { color: rgba(255, 255, 255, 0.45) !important; }

/* Ribbon · lower & wider so 1st Programme reads in full */
.fund-pcard-ribbon {
  top: 30px !important;
  right: -52px !important;
  width: 170px !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  padding: 7px 0 !important;
}

/* The 2 right cards · match open layout but desaturated */
.fund-pcard.is-study {
  background: var(--cocoa-deep) !important;
  color: rgba(248, 245, 241, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
.fund-pcard.is-study .fund-pcard-hero {
  aspect-ratio: auto !important;
  height: 220px !important;
  padding: 16px 18px !important;
  background:
    linear-gradient(180deg, rgba(20, 9, 3, 0.10) 0%, rgba(20, 9, 3, 0.85) 100%),
    url("assets/u21.jpg") center / cover no-repeat !important;
  filter: grayscale(1) brightness(0.55);
  position: relative;
}
.fund-pcard.is-study .fund-pcard-hero.plain { background: var(--cocoa-deep) !important; }
.fund-pcard.is-study .fund-pcard-strip {
  background: rgba(20, 9, 3, 0.60) !important;
  color: rgba(248, 245, 241, 0.72) !important;
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
  text-transform: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}
.fund-pcard.is-study .fund-pcard-body {
  background: rgba(20, 9, 3, 0.72);
}
.fund-pcard.is-study .fund-pcard-target .v {
  color: rgba(248, 245, 241, 0.45) !important;
  font-weight: 700;
}
.fund-pcard.is-study .fund-pcard-target .k {
  color: rgba(248, 245, 241, 0.45) !important;
}
.fund-pcard.is-study .fund-pcard-foot {
  color: rgba(248, 245, 241, 0.55) !important;
  border-top-color: rgba(255, 255, 255, 0.10) !important;
}
.fund-pcard.is-study .fund-pcard-hero .fund-pcard-status.study {
  background: rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  filter: none;
}
/* Status badge needs to escape grayscale filter on the hero */
.fund-pcard.is-study .fund-pcard-hero > * {
  filter: none;
  -webkit-filter: none;
}


/* Location pin icon · white across all states */
.fund-pcard-hero-loc svg {
  color: #FFFFFF !important;
}
.fund-pcard.is-study .fund-pcard-hero-loc svg {
  color: #FFFFFF !important;
  opacity: 0.85;
}

/* Strip consistency · same alignment + icon spacing in all 3 cards */
.fund-pcard-strip {
  justify-content: flex-start !important;
  text-align: left !important;
  text-transform: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  padding: 14px 18px !important;
}
.fund-pcard.is-study .fund-pcard-strip {
  text-transform: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}


/* Ribbon · lower more so "1st Programme" reads in full */
.fund-pcard-ribbon {
  top: 44px !important;
  right: -52px !important;
  width: 170px !important;
}


/* Fund CTA button · solid green, white text */
.fund-cta {
  background: linear-gradient(155deg, #72BD2D 0%, #4B8E1E 100%) !important;
  border: 0 !important;
  color: #FFFFFF !important;
  padding: 14px 26px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 22px rgba(75, 142, 30, 0.30) !important;
}
.fund-cta:hover {
  background: linear-gradient(155deg, #82CC36 0%, #5DA825 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 30px rgba(75, 142, 30, 0.42) !important;
  color: #FFFFFF !important;
}
.fund-cta span { color: #FFFFFF !important; }
.fund-cta-text strong { font-weight: 800; color: var(--cocoa); }


/* Ribbon · longer so the word "Programme" sits fully inside */
.fund-pcard-ribbon {
  width: 230px !important;
  right: -60px !important;
  font-size: 11px !important;
  padding: 8px 0 !important;
}


/* Move the $0 / $243K readout further down */
.fund-progress-readout {
  margin-top: 72px !important;
}

/* Full-width white banner for potential-projects intro */
.fund-projects-banner {
  background: #FFFFFF;
  border-top: 1px solid rgba(61, 28, 8, 0.08);
  border-bottom: 1px solid rgba(61, 28, 8, 0.08);
  padding: 36px 0;
  text-align: center;
  margin: 64px 0 28px;
}
.fund-projects-banner .eyebrow {
  justify-content: center;
  color: var(--gold) !important;
}
.fund-projects-banner .eyebrow::before,
.fund-projects-banner .eyebrow::after {
  background: var(--gold) !important;
  opacity: 0.85 !important;
}
.fund-projects-banner .fund-projects-sub {
  margin: 12px auto 0;
  max-width: 60ch;
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: 15px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.55;
}

/* Reset the old centered head spacing since we removed it */
.fund-projects { margin-top: 0 !important; }
.fund-projects-head { display: none !important; }


/* Without the bar, render $0 / $243K as a clean centered stat strip */
.fund-progress {
  text-align: center;
  max-width: 720px !important;
  margin: 0 auto 0 !important;
}
.fund-progress-readout {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 48px !important;
  margin-top: 12px !important;
}
.fund-progress-readout > * { text-align: center; }
.fund-progress-amount-start {
  font-size: clamp(28px, 3vw, 40px) !important;
}
.fund-progress-amount-end {
  font-size: clamp(36px, 4vw, 52px) !important;
}
.fund-progress-sub-row {
  justify-content: center !important;
  gap: 48px !important;
  margin-top: 6px !important;
}


/* Under-study cards · proper "muted / inactive" grey look */
.fund-pcard.is-study {
  background: #6B655F !important;
  color: rgba(255, 255, 255, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  filter: saturate(0.4);
}
.fund-pcard.is-study .fund-pcard-hero {
  background: linear-gradient(165deg, #7C7670 0%, #4A453F 100%) !important;
  filter: none !important;
}
.fund-pcard.is-study .fund-pcard-strip {
  background: rgba(0, 0, 0, 0.28) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}
.fund-pcard.is-study .fund-pcard-body {
  background: rgba(0, 0, 0, 0.32) !important;
}
.fund-pcard.is-study .fund-pcard-target .v {
  color: rgba(255, 255, 255, 0.62) !important;
}
.fund-pcard.is-study .fund-pcard-target .k {
  color: rgba(255, 255, 255, 0.55) !important;
}
.fund-pcard.is-study .fund-pcard-foot {
  color: rgba(255, 255, 255, 0.65) !important;
  border-top-color: rgba(255, 255, 255, 0.12) !important;
}
.fund-pcard.is-study .fund-pcard-hero .fund-pcard-status.study {
  background: rgba(255, 255, 255, 0.20) !important;
  color: #FFFFFF !important;
}
.fund-pcard.is-study .fund-pcard-hero-name {
  color: #FFFFFF !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.fund-pcard.is-study .fund-pcard-hero-loc {
  color: rgba(255, 255, 255, 0.78) !important;
}
.fund-pcard.is-study .fund-pcard-hero-loc svg {
  color: rgba(255, 255, 255, 0.85) !important;
}


/* Photo hero on study card · image visible, grayscale + dim filter */
.fund-pcard.is-study.has-photo .fund-pcard-hero {
  background: var(--cocoa-deep);
  position: relative;
  overflow: hidden;
}
.fund-pcard.is-study.has-photo .fund-pcard-hero-img {
  filter: grayscale(0.85) brightness(0.65);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block !important;
  z-index: 0;
}
.fund-pcard.is-study.has-photo .fund-pcard-hero-veil {
  display: block !important;
  background: linear-gradient(180deg, rgba(20, 9, 3, 0.10) 0%, rgba(20, 9, 3, 0.75) 100%);
  position: absolute; inset: 0; z-index: 1;
}
.fund-pcard.is-study.has-photo .fund-pcard-hero > * {
  position: relative;
  z-index: 2;
}


/* Impact columns 02 (Clean water) and 03 (Healthcare) · photo backgrounds */
.impact-col:nth-child(2) {
  position: relative;
  padding: 22px 22px 22px 22px !important;
  border-radius: 6px;
  overflow: hidden;
  margin-right: 8px;
  background-image: linear-gradient(155deg, rgba(20, 9, 3, 0.74) 0%, rgba(20, 9, 3, 0.50) 100%),
                    url("assets/project-water-tower.jpg");
  background-size: cover, cover;
  background-position: center, center;
  border-right: 0 !important;
  transition: background-color 0.4s ease, transform 0.3s ease !important;
}
.impact-col:nth-child(2):hover {
  background-image: linear-gradient(155deg, rgba(20, 9, 3, 0.58) 0%, rgba(20, 9, 3, 0.32) 100%),
                    url("assets/project-water-tower.jpg");
  transform: translateY(-3px);
}

.impact-col:nth-child(3) {
  position: relative;
  padding: 22px 22px 22px 22px !important;
  border-radius: 6px;
  overflow: hidden;
  margin-right: 8px;
  background-image: linear-gradient(155deg, rgba(20, 9, 3, 0.76) 0%, rgba(20, 9, 3, 0.55) 100%),
                    url("assets/project-healthcare.jpeg");
  background-size: cover, cover;
  background-position: center, center;
  border-right: 0 !important;
  transition: background-color 0.4s ease, transform 0.3s ease !important;
}
.impact-col:nth-child(3):hover {
  background-image: linear-gradient(155deg, rgba(20, 9, 3, 0.58) 0%, rgba(20, 9, 3, 0.34) 100%),
                    url("assets/project-healthcare.jpeg");
  transform: translateY(-3px);
}


/* Impact column 04 · Agronomy training photo */
.impact-col:nth-child(4) {
  position: relative;
  padding: 22px 22px 22px 22px !important;
  border-radius: 6px;
  overflow: hidden;
  margin-right: 8px;
  background-image: linear-gradient(155deg, rgba(20, 9, 3, 0.74) 0%, rgba(20, 9, 3, 0.50) 100%),
                    url("assets/project-agronomy.jpg");
  background-size: cover, cover;
  background-position: center, center;
  border-right: 0 !important;
  transition: background-color 0.4s ease, transform 0.3s ease !important;
}
.impact-col:nth-child(4):hover {
  background-image: linear-gradient(155deg, rgba(20, 9, 3, 0.58) 0%, rgba(20, 9, 3, 0.32) 100%),
                    url("assets/project-agronomy.jpg");
  transform: translateY(-3px);
}


/* Impact column 05 · Fair income support photo */
.impact-col:nth-child(5) {
  position: relative;
  padding: 22px 22px 22px 22px !important;
  border-radius: 6px;
  overflow: hidden;
  margin-right: 8px;
  background-image: linear-gradient(155deg, rgba(20, 9, 3, 0.74) 0%, rgba(20, 9, 3, 0.50) 100%),
                    url("assets/project-fair-income.jpg");
  background-size: cover, cover;
  background-position: center, center;
  border-right: 0 !important;
  transition: background-color 0.4s ease, transform 0.3s ease !important;
}
.impact-col:nth-child(5):hover {
  background-image: linear-gradient(155deg, rgba(20, 9, 3, 0.58) 0%, rgba(20, 9, 3, 0.32) 100%),
                    url("assets/project-fair-income.jpg");
  transform: translateY(-3px);
}


/* Impact column 06 · Community Projects photo */
.impact-col:nth-child(6) {
  position: relative;
  padding: 22px 22px 22px 22px !important;
  border-radius: 6px;
  overflow: hidden;
  margin-right: 0 !important;
  background-image: linear-gradient(155deg, rgba(20, 9, 3, 0.74) 0%, rgba(20, 9, 3, 0.50) 100%),
                    url("assets/project-community.jpg");
  background-size: cover, cover;
  background-position: center, center;
  border-right: 0 !important;
  transition: background-color 0.4s ease, transform 0.3s ease !important;
}
.impact-col:nth-child(6):hover {
  background-image: linear-gradient(155deg, rgba(20, 9, 3, 0.58) 0%, rgba(20, 9, 3, 0.32) 100%),
                    url("assets/project-community.jpg");
  transform: translateY(-3px);
}


/* Bold inside impact-mid quote · gold accent */
.impact-mid-quote p strong {
  font-weight: 800;
  color: var(--cocoa);
  font-style: normal;
}


/* Cycle phase 5 · remove top green line + redesign the money pill as a proper button */
.cycle-detail:nth-child(5).is-active::before,
.cycle-detail:nth-child(5).is-active::after {
  display: none !important;
}
.cycle-detail:nth-child(5).is-active {
  border-top: 0 !important;
}

/* Money pill for phase 5 · solid green button with white text */
.cycle-detail:nth-child(5).is-active .money {
  display: block !important;
  background: linear-gradient(155deg, #72BD2D 0%, #4B8E1E 100%) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  padding: 12px 16px !important;
  border-radius: 4px !important;
  border: 0 !important;
  text-align: center;
  box-shadow: 0 10px 22px rgba(75, 142, 30, 0.32);
  margin-top: 22px !important;
  width: 100%;
}


/* Under-study card hero · lighter translucent grey (top) */
.fund-pcard.is-study .fund-pcard-hero,
.fund-pcard.is-study .fund-pcard-hero.plain {
  background: linear-gradient(165deg, #8A847F 0%, #5C5651 100%) !important;
  filter: none !important;
}
.fund-pcard.is-study.has-photo .fund-pcard-hero {
  background: #6B655F !important;
  filter: none;
}
.fund-pcard.is-study.has-photo .fund-pcard-hero-img {
  filter: grayscale(0.85) brightness(0.78) !important;
}
.fund-pcard.is-study.has-photo .fund-pcard-hero-veil {
  background: linear-gradient(180deg, rgba(80, 75, 70, 0.40) 0%, rgba(40, 35, 30, 0.72) 100%) !important;
}
.fund-pcard.is-study .fund-pcard-hero-name {
  color: #FFFFFF !important;
}
.fund-pcard.is-study .fund-pcard-hero-loc {
  color: rgba(255, 255, 255, 0.78) !important;
}
.fund-pcard.is-study .fund-pcard-hero-loc svg {
  color: rgba(255, 255, 255, 0.85) !important;
}
.fund-pcard.is-study .fund-pcard-hero .fund-pcard-status.study {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #FFFFFF !important;
}


/* Invest stat card · bigger, more readable + green cycle */
.invest-stat-card {
  padding: 28px 32px !important;
}
.invest-stat-row {
  padding: 18px 0 !important;
  gap: 20px !important;
}
.invest-stat-row .k {
  font-size: 13px !important;
  letter-spacing: 0.14em !important;
  font-weight: 800 !important;
}
.invest-stat-row .v {
  font-size: 28px !important;
  font-weight: 800 !important;
}
.invest-stat-row .v.small {
  font-size: 17px !important;
  font-weight: 700 !important;
}
.invest-stat-row .v .unit {
  font-size: 14px !important;
  font-weight: 600 !important;
}

/* Cycle length row · green */
.invest-stat-row.is-cycle .v,
.invest-stat-row.is-cycle .v .unit {
  color: #4B8E1E !important;
}
.invest-stat-row.is-cycle .v {
  font-size: 32px !important;
  letter-spacing: -0.02em !important;
}


/* Invest stat card · dark translucent with green left ribbon */
.invest-stat-card {
  background: rgba(20, 9, 3, 0.86) !important;
  border: 0 !important;
  border-left: 4px solid #4B8E1E !important;
  border-radius: 4px !important;
  box-shadow: 0 18px 40px rgba(20, 9, 3, 0.30) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #FFFFFF !important;
}
.invest-stat-row {
  border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}
.invest-stat-row .k {
  color: rgba(255, 255, 255, 0.65) !important;
}
.invest-stat-row .v {
  color: #FFFFFF !important;
}
.invest-stat-row .v.small {
  color: rgba(255, 255, 255, 0.92) !important;
}
.invest-stat-row .v .unit {
  color: rgba(255, 255, 255, 0.70) !important;
}
.invest-stat-row.is-cycle .v,
.invest-stat-row.is-cycle .v .unit {
  color: #A6E055 !important;
}


/* Cycle animation · photo background veil */
.cycle-bg image-slot { z-index: 0; }
.cycle-bg-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20, 9, 3, 0.50) 0%, rgba(20, 9, 3, 0.88) 100%),
    radial-gradient(circle at 30% 30%, rgba(75, 142, 30, 0.10) 0%, transparent 55%);
}


/* Photo band between "How the cycle works" and the cycle animation */
.cycle-photo-band {
  position: relative;
  height: 320px;
  overflow: hidden;
  background: var(--cocoa-deep);
}
.cycle-photo-band image-slot { display: block; }


/* "How the cycle works" · photo background + dark veil */
.cycle-how { background: var(--cocoa-deep); }
.cycle-how image-slot { z-index: 0; }
.cycle-how-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(20, 9, 3, 0.78) 0%, rgba(20, 9, 3, 0.92) 100%),
    radial-gradient(circle at 25% 30%, rgba(75, 142, 30, 0.10) 0%, transparent 60%);
  pointer-events: none;
}
.cycle-how-h2 {
  color: #FFFFFF !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.cycle-how-h2 strong { color: #A6E055 !important; }
.cycle-how-lede {
  color: rgba(255, 255, 255, 0.88) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}
.cycle-how .eyebrow span { color: var(--gold) !important; }


/* Ensure the inline strong reads bright on the dark photo background */
.cycle-how-lede strong { color: #A6E055 !important; font-weight: 800 !important; }


/* 4-button invest CTA row · wraps cleanly */
.invest-cta-row { gap: 10px !important; flex-wrap: wrap; }
.invest-cta-row .btn {
  font-size: 11.5px !important;
  padding: 13px 18px !important;
  letter-spacing: 0.16em !important;
}
.invest-btn-calc {
  background: var(--cocoa) !important;
  border-color: var(--cocoa) !important;
  box-shadow: 0 10px 22px rgba(61, 28, 8, 0.28) !important;
}
.invest-btn-calc:hover {
  background: var(--cocoa-deep) !important;
  border-color: var(--cocoa-deep) !important;
}


/* ─── Scene blocks · institutional, condensed ──────────────────── */
.scene-blocks {
  grid-template-columns: 1fr 1.5fr !important;
  gap: 14px !important;
}

/* Cards · cleaner, tighter, no green strip / no shadow extravaganza */
.scene-problem,
.scene-control {
  padding: 22px 22px 20px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(61, 28, 8, 0.10) !important;
  transition: border-color 0.25s ease, transform 0s !important;
}
.scene-control { background: #FFFFFF !important; }
.scene-problem { background: #FFFFFF !important; color: var(--cocoa) !important; }
.scene-problem:hover, .scene-control:hover {
  transform: none !important;
  border-color: rgba(61, 28, 8, 0.18) !important;
  box-shadow: 0 10px 20px rgba(61, 28, 8, 0.06) !important;
  background: #FFFFFF !important;
}
.scene-problem::before,
.scene-control::before { display: none !important; }
.is-payment-scene .scene-control { background: #FFFFFF !important; box-shadow: 0 10px 22px rgba(75, 142, 30, 0.10) !important; border-color: rgba(75, 142, 30, 0.30) !important; animation: none !important; }

/* Block heads · smaller icon in solid square, tighter type */
.scene-block-head {
  margin-bottom: 14px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid rgba(61, 28, 8, 0.08) !important;
  gap: 12px !important;
}
.scene-block-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  border: 0 !important;
}
.scene-block-icon svg { width: 18px !important; height: 18px !important; }
.scene-block-icon.problem {
  background: #1F1208 !important;
  color: #FFFFFF !important;
}
.scene-block-icon.control {
  background: #1F1208 !important;
  color: #FFFFFF !important;
}
.scene-problem .scene-block-head { border-bottom-color: rgba(61, 28, 8, 0.08) !important; }
.scene-block-lbl {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--cocoa) !important;
  letter-spacing: -0.005em !important;
}
.scene-block-sub {
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  margin-top: 4px !important;
  color: var(--muted) !important;
}

/* Problem text · cocoa, compact */
.scene-problem p {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  line-height: 1.5 !important;
}

/* Control list · compact rows, slim ticks in dark squares */
.scene-control ul {
  grid-template-columns: 1fr 1fr !important;
  gap: 4px 18px !important;
}
.scene-control li {
  padding: 9px 0 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--cocoa) !important;
  border-bottom: 1px solid rgba(61, 28, 8, 0.06) !important;
  letter-spacing: -0.005em !important;
}
.scene-tick {
  width: 20px !important;
  height: 20px !important;
  border-radius: 4px !important;
  background: #4B8E1E !important;
  color: #FFFFFF !important;
}
.scene-tick svg { width: 11px !important; height: 11px !important; }

/* Hide decorative pod on these cards (it leaked over the cocoa-bean icon) */
.scene-problem::after, .scene-control::after { display: none !important; }


/* ─── Journey stepper · plain numbers, no circles ──────────────── */
.journey-rail::before {
  background: rgba(61, 28, 8, 0.18) !important;
  height: 1px !important;
}
.journey-rail-fill { display: none !important; }
.journey-stop {
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 6px 8px !important;
  color: rgba(61, 28, 8, 0.42) !important;
  font-family: "Outfit", "Raleway", sans-serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  transform: none !important;
  transition: color 0.3s ease, transform 0.3s ease !important;
}
.journey-stop:hover {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cocoa) !important;
  transform: translateY(-1px) !important;
}
.journey-stop.is-done {
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(61, 28, 8, 0.62) !important;
}
.journey-stop.is-active {
  background: transparent !important;
  box-shadow: none !important;
  color: #4B8E1E !important;
  font-weight: 800 !important;
  transform: scale(1.18) !important;
  animation: journey-num-pulse 1.8s ease-in-out infinite;
}
.journey-stop.is-payment.is-active {
  color: #4B8E1E !important;
  animation: journey-num-pulse 1.8s ease-in-out infinite;
  background: transparent !important;
  box-shadow: none !important;
}
@keyframes journey-num-pulse {
  0%, 100% { transform: scale(1.18); opacity: 1; }
  50%      { transform: scale(1.32); opacity: 0.75; }
}
.journey-stop .num {
  font-size: 17px !important;
  font-weight: inherit !important;
  letter-spacing: -0.02em !important;
}
.journey-stop.is-active .num { font-weight: 800 !important; }


/* ─── Scene blocks v3 · dark translucent, condensed, thin icons ── */
.scene-blocks {
  grid-template-columns: 0.85fr 1.55fr !important;
  gap: 12px !important;
}

/* Cards · dark translucent, slim border */
.scene-problem,
.scene-control {
  background: rgba(20, 9, 3, 0.88) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  color: #FFFFFF !important;
  padding: 20px 22px 18px !important;
  border-radius: 4px !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 14px 28px rgba(20, 9, 3, 0.25) !important;
}
.scene-problem:hover, .scene-control:hover {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(20, 9, 3, 0.92) !important;
  transform: none !important;
  box-shadow: 0 20px 36px rgba(20, 9, 3, 0.32) !important;
}
.is-payment-scene .scene-control {
  border-color: rgba(75, 142, 30, 0.55) !important;
  box-shadow: 0 18px 32px rgba(75, 142, 30, 0.20) !important;
  animation: none !important;
}

/* Block heads */
.scene-block-head {
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  gap: 12px !important;
}
.scene-block-lbl {
  color: #FFFFFF !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
}
.scene-block-sub {
  font-size: 9.5px !important;
  letter-spacing: 0.16em !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin-top: 3px !important;
}

/* Icons · slim stroke style, square chip, no fill chunk */
.scene-block-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 5px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow: none !important;
}
.scene-block-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.5 !important;
}
/* Force outline rendering on the inline SVGs (override existing fills) */
.scene-block-icon svg path,
.scene-block-icon svg circle {
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Problem icon · yellow stroke */
.scene-block-icon.problem {
  color: #E8B83A !important;
  border-color: rgba(232, 184, 58, 0.55) !important;
}
.scene-block-icon.problem svg path {
  stroke: #E8B83A !important;
  stroke-width: 1.7 !important;
}

/* Control icon · green stroke */
.scene-block-icon.control {
  color: #A6E055 !important;
  border-color: rgba(166, 224, 85, 0.55) !important;
}
.scene-block-icon.control svg path {
  stroke: #A6E055 !important;
  stroke-width: 1.6 !important;
}

/* Problem body · muted white */
.scene-problem p {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

/* Control list · compact, white text, slim ticks */
.scene-control ul {
  grid-template-columns: 1fr 1fr !important;
  gap: 2px 16px !important;
}
.scene-control li {
  padding: 7px 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.scene-tick {
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
  background: transparent !important;
  border: 1px solid rgba(166, 224, 85, 0.55) !important;
  color: #A6E055 !important;
}
.scene-tick svg {
  width: 10px !important;
  height: 10px !important;
  stroke-width: 2 !important;
}
.scene-tick svg path { stroke: #A6E055 !important; }

/* Hide leftover decorative dot on the right card · clean look */
.scene-problem::after, .scene-control::after { display: none !important; }
.scene-problem::before, .scene-control::before { display: none !important; }


/* ─── Scene blocks v4 · refined institutional polish ────────────── */

/* Cards · slightly less dark, more glass */
.scene-problem,
.scene-control {
  background: rgba(20, 9, 3, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 24px 26px 22px !important;
  border-radius: 6px !important;
}
.scene-problem:hover, .scene-control:hover {
  background: rgba(20, 9, 3, 0.84) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
.is-payment-scene .scene-control {
  border-color: rgba(75, 142, 30, 0.50) !important;
}

/* Headers · refined typography */
.scene-block-head {
  margin-bottom: 16px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  gap: 14px !important;
  align-items: center !important;
}
.scene-block-lbl {
  font-family: "Outfit", "Raleway", sans-serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.015em !important;
  line-height: 1.1 !important;
}
.scene-problem .scene-block-lbl { color: #FFFFFF !important; }
.scene-block-sub {
  font-family: "Raleway", sans-serif !important;
  font-size: 9px !important;
  letter-spacing: 0.20em !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.48) !important;
  margin-top: 5px !important;
}
.scene-problem .scene-block-sub { color: rgba(232, 184, 58, 0.65) !important; }

/* Icon chips · minimal square, no fill, refined stroke */
.scene-block-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: none !important;
}
.scene-block-icon svg { width: 18px !important; height: 18px !important; stroke-width: 1.2 !important; }
.scene-block-icon.problem {
  border-color: rgba(232, 184, 58, 0.50) !important;
  color: #E8B83A !important;
}
.scene-block-icon.problem svg path,
.scene-block-icon.problem svg circle { stroke: #E8B83A !important; fill: none !important; }
.scene-block-icon.problem svg circle[fill="currentColor"] { fill: #E8B83A !important; stroke: none !important; }
.scene-block-icon.control {
  border-color: rgba(166, 224, 85, 0.50) !important;
  color: #A6E055 !important;
}
.scene-block-icon.control svg path { stroke: #A6E055 !important; fill: none !important; }

/* Problem body · refined typography */
.scene-problem p {
  font-family: "Outfit", "Raleway", sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  line-height: 1.55 !important;
  letter-spacing: -0.005em !important;
}

/* Control list · finer typography, minimal chip ticks */
.scene-control ul {
  grid-template-columns: 1fr 1fr !important;
  gap: 0 28px !important;
}
.scene-control li {
  font-family: "Outfit", "Raleway", sans-serif !important;
  padding: 9px 0 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  letter-spacing: -0.005em !important;
}
.scene-tick {
  width: 18px !important;
  height: 18px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(166, 224, 85, 0.50) !important;
  background: transparent !important;
  color: #A6E055 !important;
  box-shadow: none !important;
}
.scene-tick svg { width: 10px !important; height: 10px !important; stroke-width: 1.4 !important; }
.scene-tick svg path { stroke: #A6E055 !important; }

/* Scene rail headline · refined */
.scene-header {
  font-family: "Outfit", "Raleway", sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: var(--cocoa) !important;
  margin-top: 12px !important;
  letter-spacing: -0.015em !important;
}
.scene-rail-meta .kicker {
  background: #4B8E1E !important;
  color: #FFFFFF !important;
  padding: 4px 10px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
}

/* Scene headline · cleaner */
.scene-headline {
  font-family: "Outfit", "Raleway", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}

/* Next checkpoint button · match the palette */
.journey-btn.primary {
  background: #4B8E1E !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 18px rgba(75, 142, 30, 0.22) !important;
}
.journey-btn.primary:hover {
  background: #5DA825 !important;
  box-shadow: 0 14px 28px rgba(75, 142, 30, 0.36) !important;
}
.journey-btn.primary span { color: #FFFFFF !important; }


/* ─── Scene blocks v5 · light fintech cards ───────────────────── */

/* Cards on white surface · subtle border, no heavy bg */
.scene-problem,
.scene-control {
  background: #FFFFFF !important;
  border: 1px solid rgba(61, 28, 8, 0.10) !important;
  color: var(--cocoa) !important;
  padding: 26px 28px 24px !important;
  border-radius: 10px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 18px 36px rgba(20, 9, 3, 0.06) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}
.scene-problem:hover, .scene-control:hover {
  background: #FFFFFF !important;
  border-color: rgba(61, 28, 8, 0.18) !important;
  transform: translateY(-2px) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 24px 48px rgba(20, 9, 3, 0.10) !important;
}
.is-payment-scene .scene-control {
  border-color: rgba(75, 142, 30, 0.45) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 24px 48px rgba(75, 142, 30, 0.14) !important;
  animation: none !important;
}

/* Header row · text-first, no chip icon — uses inline mark + label */
.scene-block-head {
  margin-bottom: 18px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(61, 28, 8, 0.08) !important;
  gap: 12px !important;
  align-items: flex-start !important;
}
.scene-block-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: 1px solid rgba(61, 28, 8, 0.10) !important;
  box-shadow: none !important;
  flex-shrink: 0;
  margin-top: 2px;
}
.scene-block-icon svg { width: 16px !important; height: 16px !important; stroke-width: 1.4 !important; }
.scene-block-icon.problem {
  color: #C45A2E !important;
  border-color: rgba(196, 90, 46, 0.30) !important;
  background: rgba(196, 90, 46, 0.06) !important;
}
.scene-block-icon.problem svg path,
.scene-block-icon.problem svg circle { stroke: #C45A2E !important; fill: none !important; }
.scene-block-icon.problem svg circle[fill="currentColor"] { fill: #C45A2E !important; stroke: none !important; }
.scene-block-icon.control {
  color: #4B8E1E !important;
  border-color: rgba(75, 142, 30, 0.30) !important;
  background: rgba(75, 142, 30, 0.06) !important;
}
.scene-block-icon.control svg path { stroke: #4B8E1E !important; fill: none !important; }

.scene-block-lbl {
  font-family: "Outfit", "Raleway", sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--cocoa) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
}
.scene-block-sub {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 10px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  margin-top: 4px !important;
}
.scene-problem .scene-block-sub { color: #C45A2E !important; opacity: 0.85; }

/* Problem body · muted cocoa, restrained */
.scene-problem p {
  font-family: "Outfit", "Raleway", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--muted) !important;
  line-height: 1.55 !important;
  letter-spacing: -0.005em !important;
}

/* Control list · monospace label tag + clean rows */
.scene-control ul {
  grid-template-columns: 1fr 1fr !important;
  gap: 0 32px !important;
  margin-top: 4px !important;
}
.scene-control li {
  font-family: "Outfit", "Raleway", sans-serif !important;
  padding: 10px 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--cocoa) !important;
  border-bottom: 1px solid rgba(61, 28, 8, 0.06) !important;
  letter-spacing: -0.005em !important;
}
.scene-control li:last-child { border-bottom: 0 !important; }
.scene-control li:nth-last-child(2):nth-child(odd) { border-bottom: 0 !important; }
.scene-tick {
  width: 16px !important;
  height: 16px !important;
  border-radius: 3px !important;
  background: rgba(75, 142, 30, 0.10) !important;
  color: #4B8E1E !important;
  border: 0 !important;
  box-shadow: none !important;
}
.scene-tick svg { width: 10px !important; height: 10px !important; stroke-width: 1.8 !important; }
.scene-tick svg path { stroke: #4B8E1E !important; }


/* Cycle-how right column · lede + point-of-control card */
.cycle-how-r { display: flex; flex-direction: column; gap: 22px; }
.point-of-control {
  background: rgba(20, 9, 3, 0.65);
  border: 1px solid rgba(75, 142, 30, 0.40);
  border-left: 4px solid #4B8E1E;
  border-radius: 6px;
  padding: 18px 22px 20px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.point-of-control-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.point-of-control-icon {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  border: 1px solid rgba(166, 224, 85, 0.50);
  color: #A6E055;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.point-of-control-icon svg { width: 16px; height: 16px; }
.point-of-control-kicker {
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #A6E055;
  letter-spacing: -0.01em;
}
.point-of-control p {
  margin: 0;
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  font-weight: 400;
}
.point-of-control p strong {
  color: #FFFFFF;
  font-weight: 700;
}


/* ─── Operating discipline · full-bleed dark band ─────────────── */
.invest-discipline-band {
  background: rgba(20, 9, 3, 0.94);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}
.invest-discipline-band .eyebrow {
  color: var(--gold) !important;
}
.invest-discipline-band .eyebrow::before {
  background: var(--gold) !important;
  opacity: 0.85 !important;
}
.invest-disc-band-h2 {
  font-family: "Outfit", "Raleway", sans-serif;
  margin: 18px 0 56px;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #FFFFFF;
}
.invest-disc-band-h2 strong {
  font-weight: 800;
  color: #A6E055;
}
.invest-disc-band-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 48px;
}
.invest-disc-band-col {
  position: relative;
}
.invest-disc-band-col.not::before,
.invest-disc-band-col.do::before {
  content: "";
  position: absolute;
  top: -49px;
  left: 0;
  width: 80px;
  height: 2px;
}
.invest-disc-band-col.not::before { background: #C45A2E; }
.invest-disc-band-col.do::before  { background: #A6E055; }

.invest-disc-band-h {
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: clamp(64px, 8vw, 112px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-bottom: 36px;
  color: #FFFFFF;
}
.invest-disc-band-col.not .invest-disc-band-h {
  color: #E08266;
}
.invest-disc-band-col.do .invest-disc-band-h {
  color: #A6E055;
}

.invest-disc-band-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.invest-disc-band-col li {
  font-family: "Outfit", "Raleway", sans-serif;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.invest-disc-band-col li::before { content: none !important; }
.invest-disc-band-col li:last-child { border-bottom: 0; }

@media (max-width: 980px) {
  .invest-disc-band-grid { grid-template-columns: 1fr; gap: 32px; }
}


/* Operating discipline · reduce overall scale */
.invest-discipline-band {
  padding-top: 56px !important;
  padding-bottom: 64px !important;
}
.invest-disc-band-h2 {
  font-size: clamp(28px, 3.4vw, 44px) !important;
  margin: 14px 0 36px !important;
}
.invest-disc-band-grid {
  gap: 40px !important;
  padding-top: 32px !important;
}
.invest-disc-band-col.not::before,
.invest-disc-band-col.do::before {
  top: -33px !important;
  width: 56px !important;
}
.invest-disc-band-h {
  font-size: clamp(36px, 4.4vw, 56px) !important;
  margin-bottom: 22px !important;
}
.invest-disc-band-col li {
  padding: 14px 0 !important;
  font-size: clamp(15px, 1.3vw, 16px) !important;
  font-weight: 500 !important;
}


/* Operating discipline · halved, bold items, no row borders, lighter bg */
.invest-discipline-band {
  background: rgba(20, 9, 3, 0.62) !important;
  padding-top: 36px !important;
  padding-bottom: 40px !important;
}
.invest-disc-band-h2 {
  font-size: clamp(22px, 2.6vw, 32px) !important;
  margin: 10px 0 22px !important;
}
.invest-disc-band-grid {
  gap: 32px !important;
  padding-top: 20px !important;
}
.invest-disc-band-col.not::before,
.invest-disc-band-col.do::before {
  top: -21px !important;
  width: 40px !important;
  height: 2px !important;
}
.invest-disc-band-h {
  font-size: clamp(26px, 3.2vw, 38px) !important;
  margin-bottom: 14px !important;
}
.invest-disc-band-col ul { padding: 0 !important; margin: 0 !important; }
.invest-disc-band-col li {
  padding: 7px 0 !important;
  border-bottom: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}


/* Discipline items · larger again */
.invest-disc-band-col li {
  padding: 10px 0 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}


/* Discipline band · photo background veil */
.invest-discipline-band image-slot { z-index: 0; }
.invest-discipline-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20, 9, 3, 0.78) 0%, rgba(20, 9, 3, 0.90) 100%);
}
.invest-discipline-band { background: var(--cocoa-deep) !important; }


/* Discipline items · tighter line-height + padding */
.invest-disc-band-col li {
  padding: 6px 0 !important;
  line-height: 1.2 !important;
}
.invest-disc-band-col ul li + li {
  margin-top: 2px !important;
}


/* Discipline item marks · thin X / check inline */
.invest-disc-band-col li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}
.invest-disc-band-col .disc-mark {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 4px;
  opacity: 0.95;
}
.invest-disc-band-col.not .disc-mark { color: #E08266; }
.invest-disc-band-col.do  .disc-mark { color: #A6E055; }


/* Capital partnership principles · white surface, big grey numerals */
.invest-principles + *, .invest-principles {
  margin-top: 0;
}
section.section:has(.invest-principles) {
  background: #FFFFFF !important;
}
.invest-principles {
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 0 !important;
  border-top: 1px solid rgba(61, 28, 8, 0.10) !important;
  padding-top: 36px !important;
}
.invest-principle {
  position: relative;
  padding: 0 32px 0 0 !important;
  border-right: 1px solid rgba(61, 28, 8, 0.08);
  margin-right: 32px;
  transition: transform 0.3s ease;
}
.invest-principle:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.invest-principle:hover { transform: translateY(-2px); }

.invest-principle-n {
  font-family: "Outfit", "Raleway", sans-serif !important;
  font-size: 64px !important;
  font-weight: 200 !important;
  letter-spacing: -0.04em !important;
  color: rgba(61, 28, 8, 0.32) !important;
  margin-bottom: 18px !important;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease, font-weight 0.3s ease;
}
.invest-principle:hover .invest-principle-n {
  color: #4B8E1E !important;
  font-weight: 700 !important;
}

.invest-principle h3 {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--cocoa) !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 12px !important;
}
.invest-principle p {
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  line-height: 1.55 !important;
}


/* Capital partnership principles · compressed */
section.section:has(.invest-principles) {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}
.invest-principles {
  padding-top: 24px !important;
}
.invest-principle-n {
  font-size: 48px !important;
  margin-bottom: 12px !important;
}
.invest-principle h3 {
  font-size: 18px !important;
  margin-bottom: 8px !important;
}
.invest-principle p {
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.invest-h2 {
  margin-top: 12px !important;
  margin-bottom: 28px !important;
  font-size: clamp(26px, 3vw, 38px) !important;
}


/* Invest hero CTA row · 4 buttons in a single horizontal row, full width */
.invest-hero .invest-cta-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  width: 100%;
  margin-top: 32px !important;
}
.invest-hero .invest-cta-row .btn {
  justify-content: center !important;
  text-align: center !important;
  padding: 14px 16px !important;
  font-size: 11.5px !important;
  letter-spacing: 0.14em !important;
  white-space: nowrap;
}
.invest-hero .invest-cta-row .btn span { white-space: nowrap; }
.invest-hero .invest-cta-row .btn .arrow,
.invest-hero .invest-cta-row .btn svg { flex-shrink: 0; }

@media (max-width: 980px) {
  .invest-hero .invest-cta-row { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  .invest-hero .invest-cta-row { grid-template-columns: 1fr !important; }
}


/* Invest hero · move stat card above the CTA row on the right side */
.invest-hero-grid {
  grid-template-columns: 1.6fr 1fr !important;
  gap: 56px !important;
  align-items: end !important;
}
/* Reset stat card sizing to a more reasonable width */
.invest-stat-card {
  width: 360px !important;
  max-width: 100% !important;
  padding: 22px 26px !important;
  margin-left: auto;
}

/* Capital simulator button · pulsing gold halo */
.invest-btn-calc {
  position: relative;
  animation: capital-pulse 2.2s ease-in-out infinite;
}
@keyframes capital-pulse {
  0%, 100% {
    box-shadow:
      0 10px 22px rgba(61, 28, 8, 0.28),
      0 0 0 0 rgba(184, 148, 90, 0.55);
  }
  50% {
    box-shadow:
      0 10px 22px rgba(61, 28, 8, 0.28),
      0 0 0 10px rgba(184, 148, 90, 0);
  }
}
.invest-btn-calc:hover { animation-play-state: paused; }


/* Invest hero · stat card sits above the CTA row, aligned to the right */
.invest-hero-grid {
  grid-template-columns: 1.6fr 1fr !important;
  gap: 48px !important;
  align-items: end !important;
}
.invest-hero-r {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: flex-end !important;
  width: 100%;
}
.invest-stat-card {
  width: 100% !important;
  max-width: 380px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: flex-end !important;
  margin-bottom: 76px !important;
}


/* Journey stage · white background */
.journey-stage {
  background: #FFFFFF !important;
}
.journey-stage::before {
  background:
    radial-gradient(circle at 15% 20%, rgba(184, 148, 90, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(75, 142, 30, 0.05) 0%, transparent 55%),
    #FFFFFF !important;
}

/* ─── Scene combo · single translucent black card ─────────────── */
.scene-combo {
  background: rgba(20, 9, 3, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 32px 36px;
  display: grid;
  grid-template-columns: 0.95fr 1px 1.55fr;
  gap: 32px;
  align-items: stretch;
  color: #FFFFFF;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 24px 56px rgba(20, 9, 3, 0.20);
}
.scene-combo-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.scene-combo-risk, .scene-combo-control { display: flex; flex-direction: column; }

/* Heads · larger icons + bigger labels */
.scene-combo-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.scene-combo-icon {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.30);
}
.scene-combo-icon svg { width: 32px; height: 32px; }
.scene-combo-icon.risk { color: #FFFFFF; }
.scene-combo-icon.risk svg path,
.scene-combo-icon.risk svg circle { stroke: #FFFFFF; }
.scene-combo-icon.risk svg circle[fill="currentColor"] { fill: #FFFFFF; stroke: none; }
.scene-combo-icon.control { color: #4B8E1E; background: rgba(0, 0, 0, 0.30); }
.scene-combo-icon.control svg path { stroke: #4B8E1E; }

.scene-combo-lbl {
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.scene-combo-sub {
  margin-top: 5px;
  font-family: "Raleway", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
}
.scene-combo-risk .scene-combo-sub { color: rgba(232, 184, 58, 0.85); }

/* Risk body */
.scene-combo-risk p {
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  letter-spacing: -0.005em;
  margin: 0;
}

/* Control list */
.scene-combo-control ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 36px;
}
.scene-combo-control li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.scene-combo-tick {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(75, 142, 30, 0.20);
  color: #A6E055;
  border: 1px solid rgba(166, 224, 85, 0.40);
}
.scene-combo-tick svg { width: 14px; height: 14px; }
.scene-combo-tick svg path { stroke: #A6E055; }

/* Hide the old separate scene-problem / scene-control cards entirely */
.scene-blocks { display: none !important; }

@media (max-width: 980px) {
  .scene-combo { grid-template-columns: 1fr; gap: 24px; padding: 22px 24px; }
  .scene-combo-divider { width: auto; height: 1px; }
  .scene-combo-control ul { grid-template-columns: 1fr; }
}


/* Invest hero · pull the stat card left toward the headline */
.invest-hero-r {
  justify-content: flex-start !important;
}
.invest-stat-card {
  margin-left: -32px !important;
  max-width: 380px !important;
  width: 100% !important;
}
@media (max-width: 980px) {
  .invest-stat-card { margin-left: 0 !important; }
}


/* Invest hero · widen the right column so the stat card pulls toward the headline */
.invest-hero-grid {
  grid-template-columns: 1.2fr 1fr !important;
  gap: 40px !important;
}
.invest-stat-card {
  margin-left: -56px !important;
  max-width: 440px !important;
}
@media (max-width: 980px) {
  .invest-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .invest-stat-card { margin-left: 0 !important; max-width: 100% !important; }
}


/* Stat card · cap height so its top stays below the INVEST WITH US eyebrow */
.invest-stat-card {
  padding: 14px 24px !important;
  max-height: 340px !important;
}
.invest-stat-row {
  padding: 11px 0 !important;
  gap: 16px !important;
}
.invest-stat-row .k {
  font-size: 11.5px !important;
  letter-spacing: 0.14em !important;
  font-weight: 700 !important;
}
.invest-stat-row .v {
  font-size: 22px !important;
}
.invest-stat-row.is-cycle .v {
  font-size: 26px !important;
}
.invest-stat-row .v.small {
  font-size: 14px !important;
}
.invest-stat-row .v .unit {
  font-size: 12px !important;
}


/* Stat card · wider, extending further left */
.invest-hero-grid { grid-template-columns: 1fr 1fr !important; }
.invest-stat-card {
  max-width: 540px !important;
  margin-left: -120px !important;
}
@media (max-width: 980px) {
  .invest-hero-grid { grid-template-columns: 1fr !important; }
  .invest-stat-card { max-width: 100% !important; margin-left: 0 !important; }
}


/* Stat card · wider still so values fit on one line */
.invest-hero-grid {
  grid-template-columns: 0.95fr 1.15fr !important;
}
.invest-stat-card {
  max-width: 640px !important;
  margin-left: -160px !important;
  padding: 16px 28px !important;
}
.invest-stat-row .v.small {
  white-space: nowrap !important;
}
@media (max-width: 1180px) {
  .invest-stat-card { margin-left: -80px !important; max-width: 540px !important; }
}
@media (max-width: 980px) {
  .invest-hero-grid { grid-template-columns: 1fr !important; }
  .invest-stat-card { max-width: 100% !important; margin-left: 0 !important; }
}


/* Stat card · a bit wider so "under NDA" sits inside */
.invest-stat-card {
  max-width: 720px !important;
  padding: 16px 32px !important;
}
.invest-stat-row .v.small {
  white-space: nowrap !important;
  overflow: visible !important;
}
@media (max-width: 1180px) { .invest-stat-card { max-width: 600px !important; } }


/* Stat card · force the right column wider so the card actually grows */
.invest-hero-grid {
  grid-template-columns: 0.8fr 1.3fr !important;
}
.invest-hero-r {
  width: 100% !important;
  min-width: 540px !important;
}
.invest-stat-card {
  width: 100% !important;
  max-width: none !important;
  margin-left: -200px !important;
  padding: 16px 32px !important;
}
.invest-stat-row .v.small {
  white-space: nowrap !important;
}
@media (max-width: 1180px) {
  .invest-hero-r { min-width: 460px !important; }
  .invest-stat-card { margin-left: -100px !important; }
}
@media (max-width: 980px) {
  .invest-hero-grid { grid-template-columns: 1fr !important; }
  .invest-hero-r { min-width: 0 !important; }
  .invest-stat-card { margin-left: 0 !important; }
}


/* Scene combo · tighter list, no row borders, plain checkmarks */
.scene-combo-control li {
  padding: 6px 0 !important;
  border-bottom: 0 !important;
  line-height: 1.25 !important;
}
.scene-combo-tick {
  width: 18px !important;
  height: 18px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: #A6E055 !important;
  box-shadow: none !important;
}
.scene-combo-tick svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 1.8 !important;
}
.scene-combo-tick svg path { stroke: #A6E055 !important; }
.scene-combo-risk p { font-size: 15.5px !important; line-height: 1.45 !important; }


/* Scene combo · header strip in solid black */
.scene-combo {
  padding: 0 !important;
  overflow: hidden;
}
.scene-combo-risk, .scene-combo-control {
  padding: 0;
}
.scene-combo-risk > p,
.scene-combo-control > ul {
  padding: 22px 28px 24px !important;
}
.scene-combo-head {
  background: rgba(0, 0, 0, 0.85);
  margin: 0 !important;
  padding: 18px 28px !important;
  border-bottom: 0 !important;
}
.scene-combo-divider {
  background: rgba(255, 255, 255, 0.08);
}


/* Journey · compressed to fit one viewport */
.journey-stage {
  padding-top: 56px !important;
  padding-bottom: 40px !important;
}
.journey-back { margin-bottom: 14px !important; }
.journey-header { padding-bottom: 16px !important; }
.journey-header h1.display { font-size: clamp(28px, 3.4vw, 42px) !important; margin-top: 10px !important; }
.journey-stepper { margin-bottom: 22px !important; }
.journey-rail { height: 32px !important; }
.journey-scene { min-height: 0 !important; }

.scene { gap: 32px !important; }
.scene-rail { padding-top: 4px !important; }
.scene-mega { font-size: clamp(80px, 9vw, 120px) !important; }
.scene-mega-shadow { font-size: clamp(80px, 9vw, 120px) !important; top: 6px; left: 4px; }
.scene-rail-meta { margin-top: 8px !important; }
.scene-header { font-size: 14px !important; margin-top: 8px !important; }
.scene-headline { font-size: clamp(24px, 3vw, 36px) !important; margin-bottom: 12px !important; }
.scene-explain { font-size: 14px !important; line-height: 1.5 !important; margin-bottom: 18px !important; }
.scene-pull { padding: 14px 18px !important; font-size: 14px !important; margin-bottom: 18px !important; }

.scene-combo-head { padding: 14px 22px !important; }
.scene-combo-icon { width: 44px !important; height: 44px !important; }
.scene-combo-icon svg { width: 24px !important; height: 24px !important; }
.scene-combo-lbl { font-size: 18px !important; }
.scene-combo-sub { font-size: 10px !important; letter-spacing: 0.16em !important; margin-top: 3px !important; }
.scene-combo-risk > p,
.scene-combo-control > ul { padding: 16px 22px 18px !important; }
.scene-combo-risk p { font-size: 14px !important; line-height: 1.45 !important; }
.scene-combo-control li { font-size: 14px !important; padding: 5px 0 !important; gap: 10px !important; }
.scene-combo-tick { width: 16px !important; height: 16px !important; }
.scene-combo-tick svg { width: 14px !important; height: 14px !important; }

.journey-nav { margin-top: 22px !important; }
.journey-btn { padding: 10px 18px !important; font-size: 10.5px !important; }
.journey-counter .now { font-size: 22px !important; }


/* Scene combo · solid black header strip across both columns + equal heights */
.scene-combo {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
}
/* Single black band spanning the whole header row */
.scene-combo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--combo-head-h, 78px);
  background: rgba(0, 0, 0, 0.92);
  pointer-events: none;
  border-radius: 10px 10px 0 0;
}
.scene-combo > * { position: relative; z-index: 1; }
/* Make the divider only span the body section (below the head strip), not the head */
.scene-combo-divider {
  margin-top: var(--combo-head-h, 78px);
}
/* Equal head heights */
.scene-combo-risk, .scene-combo-control {
  display: grid !important;
  grid-template-rows: var(--combo-head-h, 78px) 1fr;
}
.scene-combo-head {
  background: transparent !important; /* the ::before paints it */
  height: var(--combo-head-h, 78px);
  display: flex;
  align-items: center;
}


/* Scene combo · larger header icons */
.scene-combo-icon {
  width: 52px !important;
  height: 52px !important;
}
.scene-combo-icon svg {
  width: 30px !important;
  height: 30px !important;
}


/* Active step number · doubled size */
.journey-stop.is-active {
  font-size: 34px !important;
}
.journey-stop.is-active .num {
  font-size: 34px !important;
  font-weight: 800 !important;
}
.journey-stop.is-payment.is-active {
  font-size: 34px !important;
}


/* Cycle "money" labels · green translucent pill for every phase */
.cycle-detail .money {
  display: inline-block !important;
  background: rgba(75, 142, 30, 0.12) !important;
  color: #4B8E1E !important;
  border: 0 !important;
  border-radius: 4px !important;
  padding: 8px 14px !important;
  font-family: "Raleway", sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-top: 22px !important;
  width: auto !important;
  border-top: 0 !important;
}
.cycle-detail.is-active .money {
  background: rgba(75, 142, 30, 0.22) !important;
  color: #4B8E1E !important;
}
/* Phase 5 special-case · slightly stronger but still translucent */
.cycle-detail:nth-child(5).is-active .money {
  background: rgba(75, 142, 30, 0.30) !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 14px rgba(75, 142, 30, 0.22) !important;
}


/* Cycle money pills · center text and brighten phase 5 active */
.cycle-detail { text-align: center !important; }
.cycle-detail .money {
  text-align: center !important;
  width: auto !important;
}
.cycle-detail:nth-child(5).is-active .money {
  background: linear-gradient(155deg, #72BD2D 0%, #4B8E1E 100%) !important;
  color: #FFFFFF !important;
  box-shadow:
    0 0 0 4px rgba(75, 142, 30, 0.18),
    0 10px 22px rgba(75, 142, 30, 0.45) !important;
}


/* Strong closing band · photo bg with left-to-right dark veil */
.of-strong-wrap {
  position: relative;
  overflow: hidden;
  background: var(--cocoa-deep);
  margin-top: 28px;
}
.of-strong-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  display: block;
}
.of-strong-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.82) 35%,
      rgba(0, 0, 0, 0.55) 70%,
      rgba(0, 0, 0, 0.28) 100%);
}
.of-strong-inner {
  position: relative;
  z-index: 2;
  padding-top: 48px;
  padding-bottom: 48px;
}
.of-strong-wrap .of-strong { border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }
.of-strong-wrap .of-strong-1 { color: #FFFFFF !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.of-strong-wrap .of-strong-1 strong { color: #A6E055 !important; }
.of-strong-wrap .of-strong-2 { color: rgba(255, 255, 255, 0.78) !important; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
.of-strong-wrap .of-strong-2 strong { color: #A6E055 !important; }


/* Closing band · vertically centered right column, bold */
.of-strong-wrap .of-strong {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr !important;
  gap: 56px !important;
  align-items: center !important;
}
.of-strong-wrap .of-strong-2 {
  font-weight: 700 !important;
  font-size: clamp(16px, 1.6vw, 20px) !important;
  line-height: 1.35 !important;
  max-width: 28ch !important;
  margin: 0 !important;
  align-self: center !important;
  text-align: right !important;
  justify-self: end !important;
}
@media (max-width: 980px) {
  .of-strong-wrap .of-strong { grid-template-columns: 1fr !important; gap: 24px !important; }
  .of-strong-wrap .of-strong-2 { text-align: left !important; justify-self: start !important; }
}


/* Footer · compact */
.footer-inner { padding: 36px var(--pad-x) 20px !important; }
.footer-top { padding-bottom: 24px !important; gap: 28px !important; }
.footer h5 { margin-bottom: 12px !important; font-size: 12px !important; }
.footer ul { gap: 6px !important; font-size: 13px !important; }
.footer-statement { font-size: 16px !important; line-height: 1.25 !important; }
.footer .brand { margin-bottom: 18px !important; }
.footer-top p { margin-top: 14px !important; font-size: 12px !important; line-height: 1.5 !important; }
.footer-bottom { margin-top: 18px !important; font-size: 10px !important; }


/* Thesis section · compress vertical space */
.section:has(.thesis) {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
.thesis { gap: 64px !important; }
.thesis .right .item {
  padding: 18px 0 !important;
}
.thesis .right .item .num { font-size: 38px !important; margin-bottom: 4px !important; }
.thesis .right .item h3 {
  font-size: 18px !important;
  margin: 4px 0 8px !important;
  line-height: 1.2 !important;
}
.thesis .right .item p {
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.thesis .left .display { font-size: clamp(28px, 3.4vw, 44px) !important; line-height: 1 !important; }
.thesis .left .lede { font-size: 15px !important; margin-top: 20px !important; line-height: 1.5 !important; }


/* Scene pull · green ribbon + green strong */
.scene-pull {
  border-left-color: #4B8E1E !important;
  background: linear-gradient(120deg, rgba(75, 142, 30, 0.14) 0%, rgba(75, 142, 30, 0.04) 100%) !important;
}
.scene-pull strong { color: #4B8E1E !important; }
.acc-pull { border-left-color: #4B8E1E !important; background: rgba(75, 142, 30, 0.06) !important; }
.acc-pull strong { color: #4B8E1E !important; }


/* ─── Track record dashboard ───────────────────────────────────── */
.track-screen { background: #F5EFE6; color: #3D2817; }
.track-header { padding-top: 56px !important; padding-bottom: 36px !important; }
.track-eyebrow {
  font-family: "Raleway", sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: #B89968;
  margin-bottom: 14px;
}
.track-h1 {
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: #3D2817;
  margin: 0 0 14px;
}
.track-h1-num {
  font-weight: 800;
  color: #3E5C3A;
}
.track-sub {
  margin: 0 0 36px;
  font-size: 15.5px;
  color: #5B3A1F;
  font-weight: 500;
  line-height: 1.55;
  max-width: 76ch;
}
.track-sub strong { color: #3D2817; font-weight: 800; }

.track-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid rgba(61, 40, 23, 0.14);
  border-bottom: 1px solid rgba(61, 40, 23, 0.14);
  padding: 22px 0;
  margin-top: 12px;
}
.track-kpi { padding: 0 20px; border-right: 1px solid rgba(61, 40, 23, 0.10); }
.track-kpi:first-child { padding-left: 0; }
.track-kpi:last-child { padding-right: 0; border-right: 0; }
.track-kpi-v {
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #3D2817;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.track-kpi-v span {
  font-size: 14px;
  font-weight: 600;
  color: #8A6E4D;
  margin-left: 2px;
}
.track-kpi-k {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: #8A6E4D;
}
.track-kpi-zero .track-kpi-v { color: #3E5C3A; }

.track-divider {
  height: 1px;
  background: rgba(61, 40, 23, 0.14);
}

.track-legend {
  padding: 18px var(--pad-x) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.track-legend-items { display: flex; gap: 18px; flex-wrap: wrap; }
.track-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Raleway", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5B3A1F;
}
.track-legend-chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.track-legend-note {
  font-family: "Raleway", sans-serif;
  font-size: 11px;
  color: #8A6E4D;
  letter-spacing: 0.02em;
}

/* Controls */
.track-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.track-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.track-chip {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(61, 40, 23, 0.18);
  color: #3D2817;
  padding: 6px 14px;
  font-family: "Raleway", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.track-chip:hover { border-color: #3D2817; }
.track-chip[aria-pressed="true"] {
  background: #3D2817;
  color: #F5EFE6;
  border-color: #3D2817;
}
.track-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(61, 40, 23, 0.18);
  padding: 6px 12px;
  font-size: 12px;
  min-width: 240px;
  background: #FFFFFF;
}
.track-search input {
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  flex: 1;
  color: inherit;
  padding: 4px 0;
}

/* Table */
.track-table-wrap {
  background: #FFFFFF;
  border: 1px solid rgba(61, 40, 23, 0.10);
  overflow-x: auto;
}
.track-table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.track-table thead th {
  text-align: left;
  font-family: "Raleway", sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8A6E4D;
  font-weight: 700;
  padding: 16px 16px;
  border-bottom: 1px solid rgba(61, 40, 23, 0.14);
  background: #FAF5EC;
}
.track-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(61, 40, 23, 0.06);
  color: #3D2817;
}
.track-table tbody tr {
  cursor: pointer;
  transition: background 0.12s ease;
}
.track-table tbody tr:hover { background: #FBF7EE; }
.track-table tbody tr.active { background: #F5EFE6; }
.track-lot-id { font-weight: 700; letter-spacing: 0.02em; }
.track-lot-sub { font-size: 11px; color: #8A6E4D; margin-top: 2px; }
.track-table .right { text-align: right; }
.track-table .num { font-weight: 600; }

.track-pay {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 140px;
}
.track-pay-bar {
  position: relative;
  flex: 1;
  height: 3px;
  background: rgba(61, 40, 23, 0.10);
}
.track-pay-bar > i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
}
.track-pay span {
  font-size: 12px;
  font-weight: 700;
  width: 36px;
  text-align: right;
}

.track-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Raleway", sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.track-status .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.track-footnote {
  margin: 18px 0 0;
  font-family: "Raleway", sans-serif;
  font-size: 11.5px;
  line-height: 1.55;
  color: #8A6E4D;
  padding-top: 14px;
  border-top: 1px solid rgba(61, 40, 23, 0.10);
  max-width: 90ch;
}

@media (max-width: 1100px) { .hide-md { display: none !important; } }
@media (max-width: 780px)  { .hide-sm { display: none !important; } .track-kpis { grid-template-columns: 1fr 1fr; gap: 16px 0; } .track-kpi { border-right: 0; } }


/* ─── Track screen · bolder visual redesign ──────────────────── */
.track-screen { background: #FAFAF7 !important; color: #1A1208 !important; }

/* Header · darker, more architectural */
.track-header { padding-top: 64px !important; padding-bottom: 48px !important; }
.track-eyebrow { color: #4B8E1E !important; font-size: 12px !important; letter-spacing: 0.24em !important; }
.track-h1 {
  font-size: clamp(40px, 5vw, 64px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 0.98 !important;
  color: #1A1208 !important;
}
.track-h1-num {
  background: linear-gradient(155deg, #72BD2D 0%, #4B8E1E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-size: 1.4em;
  letter-spacing: -0.05em;
}
.track-sub { font-size: 17px !important; color: #4A4035 !important; }

/* KPIs · big numerals */
.track-kpis {
  background: #FFFFFF;
  border: 1px solid rgba(26, 18, 8, 0.10) !important;
  padding: 28px 0 !important;
  margin-top: 24px !important;
  border-radius: 4px;
  box-shadow: 0 12px 28px rgba(26, 18, 8, 0.05);
}
.track-kpi { padding: 0 28px !important; border-right-color: rgba(26, 18, 8, 0.08) !important; }
.track-kpi-v { font-size: 44px !important; color: #1A1208 !important; }
.track-kpi-v span { font-size: 16px !important; color: #4B8E1E !important; font-weight: 700 !important; }
.track-kpi-k { font-size: 11px !important; color: #4A4035 !important; }
.track-kpi-zero { background: linear-gradient(135deg, rgba(114, 189, 45, 0.10) 0%, transparent 100%); }
.track-kpi-zero .track-kpi-v {
  color: #4B8E1E !important;
  font-size: 48px !important;
}

/* Legend */
.track-divider { display: none !important; }
.track-legend { padding: 28px var(--pad-x) 8px !important; }
.track-legend-chip { font-size: 11px !important; color: #1A1208 !important; }
.track-legend-chip .dot { width: 10px !important; height: 10px !important; box-shadow: 0 0 0 3px rgba(0,0,0,0.04); }

/* Controls */
.track-chip {
  border-radius: 999px !important;
  padding: 8px 16px !important;
  font-size: 11.5px !important;
  border-color: rgba(26, 18, 8, 0.16) !important;
  color: #1A1208 !important;
}
.track-chip[aria-pressed="true"] {
  background: linear-gradient(155deg, #72BD2D 0%, #4B8E1E 100%) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 14px rgba(75, 142, 30, 0.30);
}
.track-search { border-radius: 999px !important; padding: 8px 16px !important; }

/* Table · light surface, bigger type */
.track-table-wrap {
  background: #FFFFFF !important;
  border: 0 !important;
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(26, 18, 8, 0.06);
}
.track-table { font-size: 15px !important; }
.track-table thead th {
  background: #FAFAF7 !important;
  border-bottom: 1px solid rgba(26, 18, 8, 0.10) !important;
  color: #4A4035 !important;
  padding: 18px 18px !important;
  font-size: 10.5px !important;
}
.track-table tbody td {
  padding: 18px 18px !important;
  border-bottom-color: rgba(26, 18, 8, 0.05) !important;
  color: #1A1208 !important;
}
.track-table tbody tr:hover { background: #F5F9EE !important; }
.track-table tbody tr.active { background: rgba(114, 189, 45, 0.10) !important; }
.track-lot-id { font-size: 16px !important; font-weight: 800 !important; }
.track-lot-sub { font-size: 12px !important; color: #6F6356 !important; }

/* Active operations (shipped/accepted/financing) · green translucent row */
.track-table tbody tr[data-active="1"] {
  background: rgba(114, 189, 45, 0.06) !important;
}

/* Status chips · solid pill */
.track-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  font-size: 12px !important;
  font-weight: 800 !important;
}
.track-pay-bar { height: 5px !important; border-radius: 999px; overflow: hidden; background: rgba(26, 18, 8, 0.08) !important; }
.track-pay-bar > i { border-radius: 999px; }
.track-pay span { font-size: 14px !important; font-weight: 800 !important; color: #1A1208; }

.track-footnote { color: #6F6356 !important; font-size: 12px !important; border-top-color: rgba(26, 18, 8, 0.08) !important; }


/* Track headers · bolder, more impact */
.track-table thead th {
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0.20em !important;
  color: #1A1208 !important;
  padding: 22px 18px !important;
  background: #F0EDE6 !important;
  border-bottom: 2px solid rgba(26, 18, 8, 0.18) !important;
}

/* Price · explicit, larger */
.track-price {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #1A1208 !important;
}

/* Active rows · green translucent for shipped/accepted/intake */
.track-table tbody tr[data-active="1"] {
  background: rgba(75, 142, 30, 0.08) !important;
}
.track-table tbody tr[data-active="1"]:hover {
  background: rgba(75, 142, 30, 0.14) !important;
}

/* Buyer badges · colored translucent pills, one per buyer */
.track-buyer-badge {
  display: inline-block;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  border: 1px solid;
}
.track-buyer-badge[data-buyer="Ecom Agrotrade"] {
  background: rgba(46, 74, 53, 0.10);
  color: #2E4A35;
  border-color: rgba(46, 74, 53, 0.30);
}
.track-buyer-badge[data-buyer="Cargill BV"] {
  background: rgba(38, 78, 122, 0.10);
  color: #264E7A;
  border-color: rgba(38, 78, 122, 0.30);
}
.track-buyer-badge[data-buyer="PT Golden Harvest"] {
  background: rgba(184, 153, 104, 0.16);
  color: #8E6E3F;
  border-color: rgba(184, 153, 104, 0.45);
}
.track-buyer-badge[data-buyer="Icam"] {
  background: rgba(165, 57, 46, 0.10);
  color: #A5392E;
  border-color: rgba(165, 57, 46, 0.30);
}
.track-buyer-badge[data-buyer="Bohnkaf-Kolonial"] {
  background: rgba(91, 58, 31, 0.10);
  color: #5B3A1F;
  border-color: rgba(91, 58, 31, 0.30);
}


/* Grade tags · ORGANIC green, CONVENTIONAL grey */
.track-grade {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.track-grade-org {
  background: rgba(75, 142, 30, 0.14);
  color: #4B8E1E;
  border: 1px solid rgba(75, 142, 30, 0.30);
}
.track-grade-conv {
  background: rgba(26, 18, 8, 0.08);
  color: #4A4035;
  border: 1px solid rgba(26, 18, 8, 0.18);
}


/* Pills · near-square corners */
.track-buyer-badge,
.track-grade,
.track-status,
.track-chip {
  border-radius: 3px !important;
}

/* Country names bold */
.track-dest strong {
  font-weight: 800 !important;
  color: #1A1208 !important;
  letter-spacing: -0.005em;
}

/* Status-specific row backgrounds · settled green, others distinct hues */
.track-table tbody tr.row-settled    { background: rgba(75, 142, 30, 0.10) !important; }
.track-table tbody tr.row-shipped    { background: rgba(38, 78, 122, 0.08) !important; }
.track-table tbody tr.row-accepted   { background: rgba(184, 153, 104, 0.10) !important; }
.track-table tbody tr.row-intake     { background: rgba(165, 57, 46, 0.06) !important; }

.track-table tbody tr.row-settled:hover    { background: rgba(75, 142, 30, 0.18) !important; }
.track-table tbody tr.row-shipped:hover    { background: rgba(38, 78, 122, 0.14) !important; }
.track-table tbody tr.row-accepted:hover   { background: rgba(184, 153, 104, 0.16) !important; }
.track-table tbody tr.row-intake:hover     { background: rgba(165, 57, 46, 0.12) !important; }

/* Status accent colors · distinct per state */
.track-status { box-shadow: inset 0 0 0 1px currentColor; }


/* Pills · solid colored backgrounds + white text */
.track-buyer-badge {
  color: #FFFFFF !important;
  border: 0 !important;
  font-weight: 800 !important;
  padding: 6px 12px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.track-buyer-badge[data-buyer="Ecom Agrotrade"]    { background: #2E4A35 !important; }
.track-buyer-badge[data-buyer="Cargill BV"]        { background: #264E7A !important; }
.track-buyer-badge[data-buyer="PT Golden Harvest"] { background: #8E6E3F !important; }
.track-buyer-badge[data-buyer="Icam"]              { background: #A5392E !important; }
.track-buyer-badge[data-buyer="Bohnkaf-Kolonial"]  { background: #5B3A1F !important; }

.track-grade {
  color: #FFFFFF !important;
  border: 0 !important;
  font-weight: 800 !important;
  padding: 5px 11px !important;
}
.track-grade-org  { background: linear-gradient(155deg, #72BD2D 0%, #4B8E1E 100%) !important; box-shadow: 0 4px 10px rgba(75, 142, 30, 0.30); }
.track-grade-conv { background: #1A1208 !important; box-shadow: 0 4px 10px rgba(26, 18, 8, 0.20); }

.track-status {
  color: #FFFFFF !important;
  padding: 6px 14px !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}
.row-settled  .track-status { background: #4B8E1E !important; }
.row-shipped  .track-status { background: #264E7A !important; }
.row-accepted .track-status { background: #B89968 !important; }
.row-intake   .track-status { background: #A5392E !important; }
.track-status .dot { background: #FFFFFF !important; }


/* Filter chips · color-coded boxes that double as legend */
.track-chip { border-radius: 4px !important; padding: 8px 14px !important; }
.track-chip[data-st="settled"][aria-pressed="false"]  { color: #4B8E1E !important; border-color: #4B8E1E !important; }
.track-chip[data-st="shipped"][aria-pressed="false"]  { color: #264E7A !important; border-color: #264E7A !important; }
.track-chip[data-st="accepted"][aria-pressed="false"] { color: #8E6E3F !important; border-color: #B89968 !important; }
.track-chip[data-st="intake"][aria-pressed="false"]   { color: #A5392E !important; border-color: #A5392E !important; }
.track-chip[data-st="settled"][aria-pressed="true"]   { background: #4B8E1E !important; border-color: #4B8E1E !important; color: #FFFFFF !important; }
.track-chip[data-st="shipped"][aria-pressed="true"]   { background: #264E7A !important; border-color: #264E7A !important; color: #FFFFFF !important; }
.track-chip[data-st="accepted"][aria-pressed="true"]  { background: #B89968 !important; border-color: #B89968 !important; color: #FFFFFF !important; }
.track-chip[data-st="intake"][aria-pressed="true"]    { background: #A5392E !important; border-color: #A5392E !important; color: #FFFFFF !important; }


/* Table header band · dark, dramatic, large type */
.track-table thead th {
  background: #1A1208 !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.22em !important;
  padding: 26px 18px !important;
  border-bottom: 4px solid #4B8E1E !important;
  text-transform: uppercase !important;
  font-family: "Outfit", "Raleway", sans-serif !important;
}
.track-table thead th:first-child { padding-left: 28px !important; }
.track-table thead th:last-child  { padding-right: 28px !important; }

/* Subtle accent column-rule below header */
.track-table thead th + th {
  border-left: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Slight contrast for first column / body padding to match */
.track-table tbody td:first-child { padding-left: 28px !important; }
.track-table tbody td:last-child  { padding-right: 28px !important; }

/* Card-style table surface · stronger shadow + accent border */
.track-table-wrap {
  border-radius: 6px !important;
  overflow: hidden;
  box-shadow:
    0 24px 48px rgba(26, 18, 8, 0.10),
    0 4px 10px rgba(26, 18, 8, 0.04) !important;
}


/* Docs expansion row */
.track-table-hint {
  font-family: "Raleway", sans-serif;
  font-size: 11.5px;
  color: #6F6356;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 700;
}
.track-docs-row td {
  background: #1A1208 !important;
  color: #FFFFFF !important;
  padding: 22px 28px !important;
  border-bottom: 2px solid #4B8E1E !important;
}
.track-docs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
}
.track-docs-item {}
.track-docs-k {
  font-family: "Raleway", sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 700;
  color: #B89968;
  margin-bottom: 6px;
}
.track-docs-v {
  font-family: "Outfit", "Raleway", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.005em;
}
.track-doc-pill {
  display: inline-block;
  padding: 3px 9px;
  margin: 2px 4px 2px 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
@media (max-width: 980px) { .track-docs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .track-docs { grid-template-columns: 1fr; } }


/* Docs row · cream + forest green palette (replaces black/gold) */
.track-docs-row td {
  background: linear-gradient(180deg, #F5F0E0 0%, #EFE7D2 100%) !important;
  color: #1F3A1A !important;
  padding: 26px 28px !important;
  border-top: 2px solid #4B8E1E !important;
  border-bottom: 4px solid #4B8E1E !important;
  box-shadow: inset 0 8px 14px rgba(75, 142, 30, 0.06);
}
.track-docs-row .track-docs-k {
  color: #4B8E1E !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
}
.track-docs-row .track-docs-v {
  color: #1A1208 !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
.track-docs-row .track-doc-pill {
  background: #4B8E1E !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  border-radius: 3px;
  padding: 4px 10px !important;
  box-shadow: 0 3px 8px rgba(75, 142, 30, 0.30);
}
/* Hover affordance · subtle invitation */
.track-table tbody tr { transition: background 0.15s ease, transform 0.15s ease; }


/* Track table · all rows white, hover/active shows status-color tint + framed docs */
.track-table tbody tr.row-settled,
.track-table tbody tr.row-shipped,
.track-table tbody tr.row-accepted,
.track-table tbody tr.row-intake { background: #FFFFFF !important; }

.track-table tbody tr.row-settled:hover,
.track-table tbody tr.row-settled.active   { background: rgba(75, 142, 30, 0.12) !important; }
.track-table tbody tr.row-shipped:hover,
.track-table tbody tr.row-shipped.active   { background: rgba(38, 78, 122, 0.10) !important; }
.track-table tbody tr.row-accepted:hover,
.track-table tbody tr.row-accepted.active  { background: rgba(184, 153, 104, 0.16) !important; }
.track-table tbody tr.row-intake:hover,
.track-table tbody tr.row-intake.active    { background: rgba(165, 57, 46, 0.10) !important; }

/* Docs band · framed to match the row above */
.track-docs-row td {
  background: #FFFFFF !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.track-docs {
  background: #FAFAF7;
  border: 1px solid rgba(26, 18, 8, 0.10);
  border-left-width: 4px;
  border-radius: 4px;
  margin: 8px 16px 14px;
  padding: 20px 24px !important;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px;
  box-shadow: 0 8px 20px rgba(26, 18, 8, 0.06);
}
.row-settled  + tr.track-docs-row .track-docs { border-left-color: #4B8E1E; }
.row-shipped  + tr.track-docs-row .track-docs { border-left-color: #264E7A; }
.row-accepted + tr.track-docs-row .track-docs { border-left-color: #B89968; }
.row-intake   + tr.track-docs-row .track-docs { border-left-color: #A5392E; }

.track-docs .track-docs-k {
  color: #4A4035 !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  letter-spacing: 0.20em !important;
}
.track-docs .track-docs-v {
  color: #1A1208 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
.track-docs .track-doc-pill {
  background: rgba(26, 18, 8, 0.06) !important;
  color: #1A1208 !important;
  border-radius: 3px;
  padding: 3px 9px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  box-shadow: none !important;
}


/* Track table · connect the docs band visually to its row */
.track-table tbody tr.active td,
.track-table tbody tr.row-settled.active td,
.track-table tbody tr.row-shipped.active td,
.track-table tbody tr.row-accepted.active td,
.track-table tbody tr.row-intake.active td {
  border-bottom: 0 !important;
}
.track-docs-row td {
  border-top: 0 !important;
}
.track-docs {
  margin: 0 16px 14px !important;
  border-radius: 0 0 6px 6px !important;
  border-top: 0 !important;
  border-left-width: 4px !important;
  position: relative;
}
/* Top connector strip · same color as left border, spans full card width */
.track-docs::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -4px;
  right: -1px;
  height: 3px;
}
.row-settled  + tr.track-docs-row .track-docs::before { background: #4B8E1E; }
.row-shipped  + tr.track-docs-row .track-docs::before { background: #264E7A; }
.row-accepted + tr.track-docs-row .track-docs::before { background: #B89968; }
.row-intake   + tr.track-docs-row .track-docs::before { background: #A5392E; }

/* Frame the active row + docs as one piece */
.track-table tbody tr.active td:first-child { border-left: 4px solid; }
.track-table tbody tr.row-settled.active  td:first-child { border-left-color: #4B8E1E; }
.track-table tbody tr.row-shipped.active  td:first-child { border-left-color: #264E7A; }
.track-table tbody tr.row-accepted.active td:first-child { border-left-color: #B89968; }
.track-table tbody tr.row-intake.active   td:first-child { border-left-color: #A5392E; }


/* Track KPIs · uniform, no green */
.track-kpi-zero { background: transparent !important; }
.track-kpi-zero .track-kpi-v { color: #1A1208 !important; font-size: 44px !important; }
.track-kpi-v span { color: #4A4035 !important; }

/* Search · rectangular w/ bigger icon */
.track-search {
  border-radius: 6px !important;
  padding: 12px 18px !important;
  border: 1px solid rgba(26, 18, 8, 0.18) !important;
  background: #FFFFFF !important;
  gap: 10px !important;
}
.track-search > span[aria-hidden] {
  font-size: 20px !important;
  color: #3D2817 !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}
.track-search input {
  font-size: 14px !important;
}

/* Table header · soften from black to cocoa-tinted cream */
.track-table thead th {
  background: #EFEAE0 !important;
  color: #1A1208 !important;
  border-bottom: 2px solid #4B8E1E !important;
}
.track-table thead th + th {
  border-left: 1px solid rgba(26, 18, 8, 0.08) !important;
}


/* KPI numerals · larger & uniform across all tiles */
.track-kpi-v,
.track-kpi-zero .track-kpi-v {
  font-size: 60px !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}
.track-kpi-v span { font-size: 18px !important; }
.track-kpi-k { font-size: 11.5px !important; margin-top: 12px !important; }


/* KPI · Raleway, green, hover shadow, bold label below */
.track-kpi {
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  border-radius: 6px;
  padding: 22px 28px !important;
}
.track-kpi:hover {
  background: #FFFFFF !important;
  box-shadow: 0 12px 28px rgba(75, 142, 30, 0.18), 0 2px 6px rgba(26, 18, 8, 0.06) !important;
  transform: translateY(-2px);
}
.track-kpi-v,
.track-kpi-zero .track-kpi-v {
  font-family: "Raleway", "Outfit", sans-serif !important;
  font-weight: 800 !important;
  font-size: 64px !important;
  color: #4B8E1E !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}
.track-kpi-v span {
  font-size: 18px !important;
  color: #4B8E1E !important;
  font-weight: 700 !important;
}
.track-kpi-k {
  font-family: "Raleway", sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  color: #1A1208 !important;
  margin-top: 14px !important;
}

.track-kpi-v .__om-t,
.track-kpi-v > span:not([class]) {
  font: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
}


/* Table header · translucent black */
.track-table thead th {
  background: rgba(26, 18, 8, 0.86) !important;
  color: #FFFFFF !important;
  border-bottom: 2px solid #4B8E1E !important;
}
.track-table thead th + th {
  border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
}


/* Docs panel · two-band layout (Trade + Logistics) */
.track-docs {
  display: block !important;
  padding: 18px 22px !important;
}
.track-docs-trade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 14px 18px;
  margin-bottom: 14px;
  background: rgba(75, 142, 30, 0.06);
  border: 1px solid rgba(75, 142, 30, 0.20);
  border-radius: 4px;
}
.track-docs-logistics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px;
}
.track-docs-gp .track-docs-v { color: #4B8E1E !important; font-size: 16px !important; font-weight: 800 !important; }


/* Hero KPI tiles · big bold numbers above the metric strip */
.track-hero-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 36px 0 24px;
}
.track-hero-kpi {
  background: #FFFFFF;
  border: 1px solid rgba(26, 18, 8, 0.10);
  border-radius: 6px;
  padding: 28px 32px 24px;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.track-hero-kpi:hover {
  box-shadow: 0 16px 32px rgba(75, 142, 30, 0.20), 0 2px 6px rgba(26, 18, 8, 0.06);
  transform: translateY(-2px);
}
.track-hero-v {
  font-family: "Raleway", sans-serif !important;
  font-weight: 800 !important;
  font-size: 88px !important;
  line-height: 1 !important;
  color: #4B8E1E !important;
  letter-spacing: -0.025em !important;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.track-hero-v span {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #4B8E1E !important;
  letter-spacing: 0 !important;
}
.track-hero-v .__om-t,
.track-hero-v > span:not([class]) { font: inherit !important; color: inherit !important; }
.track-hero-k {
  margin-top: 14px;
  font-family: "Raleway", sans-serif !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: #1A1208 !important;
}


/* Hero KPI tiles · refined (less wild) */
.track-hero-kpis {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 28px 0 16px !important;
  background: #FFFFFF;
  border: 1px solid rgba(26, 18, 8, 0.10);
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(26, 18, 8, 0.05);
  overflow: hidden;
}
.track-hero-kpi {
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid rgba(26, 18, 8, 0.08) !important;
  border-radius: 0 !important;
  padding: 22px 28px !important;
  box-shadow: none !important;
  transition: background 180ms ease;
}
.track-hero-kpi:last-child { border-right: 0 !important; }
.track-hero-kpi:hover {
  background: rgba(75, 142, 30, 0.05) !important;
  transform: none !important;
  box-shadow: none !important;
}
.track-hero-v {
  font-size: 44px !important;
  letter-spacing: -0.015em !important;
  color: #1A1208 !important;
}
.track-hero-v span {
  font-size: 16px !important;
  color: #4B8E1E !important;
  margin-left: 2px;
}
.track-hero-k {
  margin-top: 10px !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  color: #4A4035 !important;
  font-weight: 700 !important;
}


/* Unified sizing across all KPI strips · numbers black, only revenue/gp green */
.track-kpi-v,
.track-kpi-zero .track-kpi-v {
  font-size: 44px !important;
  color: #1A1208 !important;
}
.track-kpi-v span { color: #1A1208 !important; }

.track-hero-v {
  font-size: 44px !important;
  color: #1A1208 !important;
}
.track-hero-v span { color: #1A1208 !important; }

/* Revenue (2nd hero tile) + Gross profit (3rd) · green */
.track-hero-kpi:nth-child(2) .track-hero-v,
.track-hero-kpi:nth-child(2) .track-hero-v span,
.track-hero-kpi:nth-child(3) .track-hero-v,
.track-hero-kpi:nth-child(3) .track-hero-v span {
  color: #4B8E1E !important;
}


/* Match bottom KPI strip height to hero strip */
.track-kpi { padding: 22px 28px !important; }
.track-kpi:hover { transform: none !important; box-shadow: none !important; background: rgba(75, 142, 30, 0.04) !important; }
.track-kpi-k { margin-top: 10px !important; font-size: 11px !important; letter-spacing: 0.18em !important; }


/* Trim bottom KPI strip · less vertical padding & tight label */
.track-kpi { padding: 16px 22px !important; }
.track-kpi-k {
  margin-top: 8px !important;
  white-space: nowrap !important;
  letter-spacing: 0.14em !important;
}
.track-kpis { margin-top: 8px !important; }


/* Condense track-header · smaller title, tighter spacing */
.track-h1 {
  font-size: 52px !important;
  line-height: 1.05 !important;
  margin: 8px 0 12px !important;
  letter-spacing: -0.02em !important;
}
.track-h1-num { color: #4B8E1E !important; font-size: inherit !important; }
.track-sub { margin-bottom: 20px !important; font-size: 15px !important; max-width: 700px !important; }
.track-eyebrow { font-size: 11px !important; letter-spacing: 0.22em !important; }

/* Tighten KPI strips */
.track-hero-kpis { margin: 18px 0 8px !important; }
.track-hero-kpi { padding: 16px 22px !important; }
.track-hero-v { font-size: 38px !important; }
.track-hero-v span { font-size: 14px !important; }
.track-hero-k { margin-top: 6px !important; font-size: 10.5px !important; letter-spacing: 0.16em !important; }

.track-kpi { padding: 14px 22px !important; }
.track-kpi-v { font-size: 38px !important; }
.track-kpi-v span { font-size: 14px !important; }
.track-kpi-k { margin-top: 6px !important; font-size: 10.5px !important; letter-spacing: 0.14em !important; }

.track-header { padding-top: 36px !important; padding-bottom: 24px !important; }


/* Condense financing hero · less wild, tighter heights */
.invest-hero { padding-top: 56px !important; padding-bottom: 32px !important; }
.invest-h1 {
  font-size: clamp(36px, 4.4vw, 56px) !important;
  line-height: 1.05 !important;
  margin-bottom: 16px !important;
}
.invest-sub {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  max-width: 60ch !important;
  margin-bottom: 22px !important;
}
.invest-cta-row { gap: 10px !important; flex-wrap: wrap !important; }
.invest-cta-row .btn { padding: 12px 18px !important; font-size: 11.5px !important; }
.invest-stat-card { padding: 14px 22px !important; }
.invest-stat-row { padding: 10px 0 !important; }
.invest-stat-row .v { font-size: 22px !important; }
.invest-stat-row.is-cycle .v { font-size: 32px !important; }
.invest-stat-row .v.small { font-size: 13px !important; }
.invest-stat-row .k { font-size: 10.5px !important; letter-spacing: 0.18em !important; }


/* Invest hero · fix overlap of stat card on the headline */
.invest-hero-grid {
  grid-template-columns: 1.4fr 1fr !important;
  gap: 40px !important;
  align-items: start !important;
}
.invest-hero-r {
  min-width: 0 !important;
  width: 100% !important;
  justify-content: flex-end !important;
}
.invest-stat-card {
  margin-left: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}
@media (max-width: 1180px) {
  .invest-hero-r { min-width: 0 !important; }
  .invest-stat-card { margin-left: 0 !important; }
}


/* Topbar actions group · sign-in + partner button */
.topbar-actions { display: inline-flex; align-items: center; gap: 14px; }
.topbar.on-dark .topbar-signin { color: var(--cream); }


/* Track docs · trade band now 4 cells (buy/sell/gp/payment) */
.track-docs-trade { grid-template-columns: 1fr 1fr 1fr 1.4fr !important; gap: 18px !important; }
.track-docs-sub {
  margin-top: 3px;
  font-family: "Raleway", sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6F6356;
  font-variant-numeric: tabular-nums;
}
.track-docs-payment-v {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.track-payment-pill {
  display: inline-block;
  padding: 3px 9px;
  background: rgba(26, 18, 8, 0.06);
  color: #1A1208;
  border-radius: 3px;
  font-family: "Raleway", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 980px) {
  .track-docs-trade { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .track-docs-trade { grid-template-columns: 1fr !important; }
}


/* Sign in · proper outlined button */
.topbar-signin {
  background: transparent;
  border: 1px solid rgba(26, 18, 8, 0.25);
  padding: 9px 16px !important;
  border-radius: 4px;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  font-size: 11px !important;
  opacity: 1;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.topbar-signin:hover {
  background: var(--cocoa);
  color: var(--cream);
  border-color: var(--cocoa);
}
.topbar.on-dark .topbar-signin {
  border-color: rgba(248, 245, 241, 0.35);
}
.topbar.on-dark .topbar-signin:hover {
  background: var(--cream);
  color: var(--cocoa);
  border-color: var(--cream);
}
.topbar-signin .lock { width: 13px; height: 13px; }


/* Footer · restricted-offering disclaimer band */
.footer-restricted {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(248, 245, 241, 0.12);
  font-family: "Raleway", sans-serif;
  font-size: 10.5px;
  line-height: 1.55;
  color: rgba(248, 245, 241, 0.50);
  letter-spacing: 0.02em;
  max-width: 100%;
}
.footer-restricted strong {
  color: rgba(248, 245, 241, 0.78);
  font-weight: 800;
}


/* Topbar · solid green Invest-with-Us button */
.nav button.nav-cta {
  background: #4B8E1E !important;
  color: #FFFFFF !important;
  border: 1px solid #4B8E1E !important;
  padding: 9px 18px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  opacity: 1 !important;
  margin-left: 8px;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.nav button.nav-cta:hover {
  background: #FFFFFF !important;
  color: #4B8E1E !important;
  border-color: #4B8E1E !important;
  transform: translateY(-1px);
}

/* Topbar · solid white Sign In button (was outlined) */
.topbar-signin {
  background: #FFFFFF !important;
  border: 1px solid rgba(26, 18, 8, 0.18) !important;
  color: #1A1208 !important;
  padding: 9px 16px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.topbar-signin:hover {
  background: #1A1208 !important;
  color: #FFFFFF !important;
  border-color: #1A1208 !important;
  transform: translateY(-1px);
}
.topbar.on-dark .topbar-signin {
  background: #FFFFFF !important;
  color: #1A1208 !important;
  border-color: rgba(248, 245, 241, 0.40) !important;
}
.topbar.on-dark .topbar-signin:hover {
  background: var(--cream) !important;
  color: var(--cocoa) !important;
}


/* Square corners across topbar buttons + larger lock icon */
.nav button.nav-cta,
.topbar-signin,
.topbar .cta.solid {
  border-radius: 0 !important;
}
.topbar-signin .lock {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 1.7 !important;
}


/* Topbar buttons · unified box height and metrics */
.nav button.nav-cta,
.topbar-signin,
.topbar .cta.solid,
.topbar .cta {
  height: 40px !important;
  padding: 0 18px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}
.topbar-signin {
  gap: 8px !important;
}
.topbar-signin .lock {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.8 !important;
}


/* Tight uniform gap between Invest / Sign in / Partner */
.nav button.nav-cta { margin-left: 10px !important; }
.topbar-actions { gap: 10px !important; }
.topbar .cta { margin-left: 0 !important; }
.topbar-inner { gap: 10px !important; }


/* ─── Legal pages · refined dark · point-by-point ─────────────── */
.legal-dark {
  background: #0E0905 !important;
  color: rgba(248, 245, 241, 0.82) !important;
  padding-top: 80px !important;
  padding-bottom: 96px !important;
  min-height: calc(100vh - 200px);
}
.legal-container { max-width: 820px !important; }

/* Reset old chunky styles inside the dark layout */
.legal-dark .legal-back { color: rgba(248, 245, 241, 0.60) !important; opacity: 1 !important; }
.legal-dark .legal-back:hover { color: var(--cream) !important; }

.legal-dark .legal-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding-bottom: 14px;
  margin-bottom: 26px;
  border-bottom: 1px solid rgba(248, 245, 241, 0.12);
}
.legal-dark .legal-meta-k {
  font-family: "Raleway", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(248, 245, 241, 0.55);
}

.legal-dark .legal-h1 {
  margin: 0 0 36px !important;
  font-family: "Raleway", sans-serif !important;
  font-weight: 800 !important;
  font-size: clamp(40px, 5.5vw, 60px) !important;
  letter-spacing: -0.025em !important;
  color: var(--cream) !important;
  text-shadow: none !important;
}

.legal-dark .legal-rule {
  display: none !important;
}

.legal-dark .legal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: legal;
}
.legal-dark .legal-item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(248, 245, 241, 0.08);
}
.legal-dark .legal-item:last-child { border-bottom: 0; }

.legal-dark .legal-item-n {
  font-family: "Raleway", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--gold);
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
}

.legal-dark .legal-item-body h2 {
  margin: 0 0 8px !important;
  font-family: "Raleway", sans-serif !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  color: var(--cream) !important;
  line-height: 1.3 !important;
}
.legal-dark .legal-item-body p {
  margin: 0 !important;
  font-family: "Outfit", "Raleway", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: rgba(248, 245, 241, 0.72) !important;
  font-weight: 400 !important;
}

.legal-dark .legal-foot {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid rgba(248, 245, 241, 0.10);
  font-family: "Raleway", sans-serif;
  font-size: 12px;
  color: rgba(248, 245, 241, 0.45);
  letter-spacing: 0.02em;
}
.legal-dark .legal-foot a {
  color: var(--gold);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px solid currentColor;
}
.legal-dark .legal-foot a:hover { color: var(--cream); }

@media (max-width: 720px) {
  .legal-dark .legal-item { grid-template-columns: 1fr; gap: 8px; }
  .legal-dark .legal-item-n { padding-top: 0; }
}


/* Legal dark · visible back link */
.legal-dark .legal-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  font-family: "Raleway", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--cream) !important;
  opacity: 0.7 !important;
  cursor: pointer;
  transition: opacity 160ms ease, transform 160ms ease;
}
.legal-dark .legal-back:hover { opacity: 1 !important; transform: translateX(-3px); }
.legal-dark .legal-back svg { width: 14px; height: 12px; stroke: currentColor; }

/* Larger display numerals */
.legal-dark .legal-item {
  grid-template-columns: 120px 1fr !important;
  gap: 32px !important;
  padding: 28px 0 !important;
}
.legal-dark .legal-item-n {
  font-family: "Raleway", sans-serif !important;
  font-size: 64px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  color: rgba(184, 148, 90, 0.85) !important;
  padding-top: 2px !important;
  text-align: left !important;
}

@media (max-width: 720px) {
  .legal-dark .legal-item { grid-template-columns: 1fr !important; gap: 8px !important; }
  .legal-dark .legal-item-n { font-size: 48px !important; }
}


/* Solid-dark button · invert on hover (white bg + cocoa text) */
.btn.solid-dark {
  background: var(--cocoa) !important;
  color: var(--cream) !important;
  border: 1px solid var(--cocoa) !important;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease !important;
}
.btn.solid-dark span { color: inherit !important; }
.btn.solid-dark svg path { stroke: currentColor !important; }
.btn.solid-dark:hover {
  background: #FFFFFF !important;
  color: var(--cocoa) !important;
  border-color: var(--cocoa) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(61, 28, 8, 0.16) !important;
}
.btn.solid-dark:hover span { color: var(--cocoa) !important; }
.btn.solid-dark:hover svg path { stroke: var(--cocoa) !important; }


/* Default outlined .btn · invert on hover (cocoa bg + cream text) */
.btn:not(.primary):not(.solid-dark):not(.invest-btn-primary):not(.invest-btn-ghost):not(.invest-btn-calc):not(.fund-cta):not(.cc-btn):not(.inv-gate-btn) {
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.btn:not(.primary):not(.solid-dark):not(.invest-btn-primary):not(.invest-btn-ghost):not(.invest-btn-calc):not(.fund-cta):not(.cc-btn):not(.inv-gate-btn):hover {
  background: var(--cocoa) !important;
  color: var(--cream) !important;
  border-color: var(--cocoa) !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(61, 28, 8, 0.16);
}
.btn:not(.primary):not(.solid-dark):not(.invest-btn-primary):not(.invest-btn-ghost):not(.invest-btn-calc):not(.fund-cta):not(.cc-btn):not(.inv-gate-btn):hover span { color: var(--cream) !important; }
.btn:not(.primary):not(.solid-dark):not(.invest-btn-primary):not(.invest-btn-ghost):not(.invest-btn-calc):not(.fund-cta):not(.cc-btn):not(.inv-gate-btn):hover svg path { stroke: var(--cream) !important; }