/* Layout: highland-green hero over a drifting contour map, a scroll-linked marquee, one full-bleed colour band per product, harvest calendar, voyage chart, timeline, inquiry desk. */
:root {
  --ground: #F1F4EE;
  --surface: #FFFFFF;
  --ink: #16211B;
  --muted: #56645B;
  --line: #D3DBD2;
  --jade: #1C4434;
  --hero-bg: #12352A;
  --hero-deep: #0B241C;
  --on-hero: #EFF3EA;
  --on-hero-muted: #A9C2B4;
  --robusta: #6A3B26;
  --cashew: #D6931A;
  --kernel: #EBCF94;
  --cacao: #8C2638;
  --cacao-ridge: #5E1724;
  --focus: #D6931A;

  --f-display: "Phudu", "Arial Narrow", "Helvetica Neue", sans-serif;
  --f-body: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-2: 1.75rem;
  --step-3: clamp(2.2rem, 5vw, 3.6rem);
  --step-4: clamp(3rem, 9vw, 7.25rem);
  --step-5: clamp(4rem, 15vw, 11rem);
  --radius: 8px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1240px;
  --ease: cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0E1612; --surface: #15201A; --ink: #E6ECE4; --muted: #9AABA0; --line: #2A3A31;
    --jade: #7DBE9E; --hero-bg: #0D271F; --hero-deep: #071711; --on-hero: #EFF3EA; --on-hero-muted: #93B3A2;
    --robusta: #C48D6E; --cashew: #EDB348; --kernel: #E2C487; --cacao: #D9667C; --cacao-ridge: #8C2638;
    --focus: #EDB348; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #0E1612; --surface: #15201A; --ink: #E6ECE4; --muted: #9AABA0; --line: #2A3A31;
  --jade: #7DBE9E; --hero-bg: #0D271F; --hero-deep: #071711; --on-hero: #EFF3EA; --on-hero-muted: #93B3A2;
  --robusta: #C48D6E; --cashew: #EDB348; --kernel: #E2C487; --cacao: #D9667C; --cacao-ridge: #8C2638;
  --focus: #EDB348; color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--ground); color: var(--ink);
  font-family: var(--f-body); font-size: var(--step-0); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: 1; text-wrap: balance; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
.eyebrow { font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.eyebrow::before { content: ""; display: inline-block; width: 22px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 10px; opacity: .7; }

/* Header */
.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  background: color-mix(in srgb, var(--hero-deep) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--on-hero);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 14px; }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--robusta), var(--cashew), var(--cacao)); transform-origin: left; transform: scaleX(0); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { display: flex; gap: 4px; }
.brand-mark span { width: 9px; height: 14px; border-radius: 50%; }
.brand-mark span:nth-child(1) { background: #A8694A; }
.brand-mark span:nth-child(2) { background: var(--cashew); }
.brand-mark span:nth-child(3) { background: #C9455C; }
.brand-name { font-family: var(--f-display); font-weight: 900; font-size: 1.4rem; letter-spacing: 0.02em; text-transform: uppercase; }
.nav { display: flex; gap: 28px; align-items: center; font-size: 0.9rem; }
.nav a { text-decoration: none; color: var(--on-hero-muted); transition: color .2s; }
.nav a:hover { color: var(--on-hero); }
.btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font: 600 0.92rem/1 var(--f-body); text-decoration: none;
  padding: 14px 20px; border-radius: 999px; border: 0;
  background: var(--cashew); color: #1B140A !important;
  transition: transform .2s var(--ease), box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--cashew) 80%, transparent); }
.btn .arr { transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }
.btn.ghost { background: transparent; color: var(--on-hero) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-hero) 40%, transparent); }
.nav .btn { padding: 11px 16px; }
.brand-name { white-space: nowrap; }
@media (max-width: 760px) { .nav a:not(.btn) { display: none; } }
@media (max-width: 420px) { .brand-name { font-size: 1.15rem; } .nav .btn { padding: 10px 13px; font-size: 0.82rem; } }

/* Hero */
.hero {
  position: relative; overflow: hidden; color: var(--on-hero);
  background: radial-gradient(120% 90% at 80% 20%, var(--hero-bg), var(--hero-deep));
}
#topo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; padding-block: clamp(32px, 4.5vw, 64px) clamp(40px, 4.5vw, 64px); }
.hero .eyebrow { color: var(--on-hero-muted); margin-bottom: 24px; }
.hero .slogan { font-size: var(--step-4); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: .92; }
.hero .slogan .ln { display: block; animation: lift 1s var(--ease) both; }
.hero .slogan .ln:nth-child(2) { animation-delay: .1s; }
.hero .slogan .ln:nth-child(3) { animation-delay: .2s; }
.hero .slogan em { font-style: normal; color: var(--cashew); }
.hero .lede { margin-top: 28px; max-width: 34em; font-size: 1.125rem; color: var(--on-hero-muted); animation: lift 1s .3s var(--ease) both; }
.hero .lede strong { color: var(--on-hero); font-weight: 500; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; animation: lift 1s .4s var(--ease) both; }
@keyframes lift { from { transform: translateY(28px); } to { transform: none; } }

/* Three equal arched photo tiles in one row with identical gaps; each label sits under its photo. */
.seed-stage { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 22px); width: 100%; max-width: 100%; align-items: start; }
.hseed { min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; animation: settle 1.1s var(--ease) both; }
.hseed:nth-child(2) { animation-delay: .12s; }
.hseed:nth-child(3) { animation-delay: .24s; }
.hseed .photo { aspect-ratio: 3 / 4.6; max-width: 100%; overflow: hidden; border-radius: 999px 999px 14px 14px; border: 1px solid color-mix(in srgb, var(--on-hero) 22%, transparent); box-shadow: 0 30px 50px -24px rgba(0,0,0,.6); background: var(--hero-deep); }
.hseed img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hseed .photo { transition: box-shadow .3s; }
.hseed:hover .photo { box-shadow: 0 36px 60px -20px rgba(0,0,0,.7), 0 0 0 2px var(--cashew); }
@keyframes settle { from { transform: translateY(26px); } to { transform: none; } }
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .seed-stage { max-width: 560px; margin-inline: auto; }
}

/* Scroll-linked marquee */
.marquee { background: var(--cashew); color: #1B140A; overflow: hidden; border-block: 1px solid color-mix(in srgb, #000 15%, var(--cashew)); }
.marquee-track { display: flex; gap: 40px; white-space: nowrap; padding-block: 16px; width: max-content; }
.marquee-track span { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2.2rem); text-transform: uppercase; display: inline-flex; align-items: center; gap: 40px; }
.marquee-track span::after { content: ""; width: 12px; height: 16px; border-radius: 50%; background: #1B140A; opacity: .8; }

/* Section shell */
section.block { padding-block: clamp(72px, 10vw, 128px); }
.sec-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px 56px; align-items: end; margin-bottom: 56px; }
.sec-head h2 { font-size: var(--step-3); text-transform: uppercase; margin-top: 14px; }
.sec-head p { color: var(--muted); max-width: 36em; }
@media (max-width: 760px) { .sec-head { grid-template-columns: 1fr; } }

/* Facts */
.facts .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding-block: 0; }
.fact { min-width: 0; padding: 40px 24px 40px 0; border-right: 1px solid var(--line); }
.fact + .fact { padding-left: 24px; }
.fact:last-child { border-right: 0; }
.fact .n { font-family: var(--f-display); font-weight: 900; font-size: clamp(2rem, 4vw, 3rem); color: var(--jade); line-height: 1; }
.fact p { margin-top: 10px; color: var(--muted); font-size: 0.9rem; }
.facts { border-bottom: 1px solid var(--line); }
@media (max-width: 860px) {
  .facts .wrap { grid-template-columns: 1fr 1fr; }
  .fact { padding: 28px 16px 28px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .fact + .fact { padding-left: 0; }
  .fact:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
  .fact:nth-last-child(-n+2) { border-bottom: 0; }
}

/* Product bands */
.band { --c: var(--jade); position: relative; overflow: hidden; background: color-mix(in srgb, var(--c) 9%, var(--ground)); border-top: 1px solid var(--line); }
.band.coffee { --c: var(--robusta); }
.band.cashew { --c: var(--cashew); }
.band.cacao { --c: var(--cacao); }
.band .wrap { display: grid; grid-template-columns: 0.9fr 1.3fr; gap: clamp(32px, 5vw, 72px); align-items: start; padding-block: clamp(64px, 9vw, 112px); }
.band.flip .wrap { grid-template-columns: 1.3fr 0.9fr; }
.band.flip .band-title { order: 2; }
.band-title { position: relative; min-width: 0; }
.band-title .idx { font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.band-title h3 { font-size: clamp(3rem, 7.5vw, 6.5rem); font-weight: 900; text-transform: uppercase; color: var(--c); line-height: .85; letter-spacing: -0.03em; margin-top: 12px; white-space: nowrap; }
.band-title .vi { font-size: 1.4rem; font-weight: 500; color: var(--ink); margin-top: 10px; }
.band-seed { width: min(300px, 70%); aspect-ratio: 1; max-width: 100%; margin-top: 28px; border-radius: 50%; overflow: hidden; border: 6px solid var(--surface); box-shadow: 0 28px 50px -24px color-mix(in srgb, var(--c) 70%, transparent); }
.band-seed img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band-card { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 36px); display: grid; gap: 22px; box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--c) 60%, transparent); }
.band-card > p { color: var(--muted); }
.meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); margin: 0; }
.meta div { min-width: 0; }
.meta dt { font-family: var(--f-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.meta dd { margin: 4px 0 0; font-size: 0.88rem; font-weight: 500; }
.table-scroll { overflow-x: auto; }
table.spec { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.spec th { text-align: left; font-family: var(--f-mono); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 0 14px 10px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.spec td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec td:first-child { font-weight: 600; white-space: nowrap; }
.spec tbody tr { transition: background .2s; }
.spec tbody tr:hover { background: color-mix(in srgb, var(--c) 7%, transparent); }
.spec tr:last-child td { border-bottom: 0; }
.spec .mono { font-family: var(--f-mono); font-size: 0.8rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--f-mono); font-size: 0.72rem; padding: 6px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 50%, var(--line)); background: color-mix(in srgb, var(--c) 6%, transparent); }
@media (max-width: 900px) {
  .band .wrap, .band.flip .wrap { grid-template-columns: 1fr; }
  .band.flip .band-title { order: 0; }
  .band-seed { position: absolute; right: 0; top: 0; width: 34%; margin: 0; }
  .meta { grid-template-columns: 1fr 1fr; }
}

/* Harvest calendar */
.cal-section { background: var(--surface); border-top: 1px solid var(--line); }
.cal-scroll { overflow-x: auto; }
.cal { display: grid; grid-template-columns: 180px repeat(12, minmax(44px, 1fr)); min-width: 720px; font-size: 0.85rem; }
.cal .m { font-family: var(--f-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding-bottom: 12px; text-align: center; }
.cal .row-label { padding: 14px 12px 14px 0; font-weight: 600; border-top: 1px solid var(--line); }
.cal .row-label small { display: block; font-weight: 400; color: var(--muted); font-size: 0.75rem; }
.cal .cell { border-top: 1px solid var(--line); display: flex; align-items: center; }
.cal .bar { height: 18px; width: 100%; transform-origin: left; }
.cal .on .bar { background: color-mix(in srgb, var(--c) 40%, transparent); }
.cal .peak .bar { background: var(--c); }
.cal .start .bar { border-radius: 999px 0 0 999px; margin-left: 4px; }
.cal .end .bar { border-radius: 0 999px 999px 0; margin-right: 4px; }
.cal .start.end .bar { border-radius: 999px; }
.legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; font-size: 0.8rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 28px; height: 10px; border-radius: 999px; background: var(--jade); }
.legend i.light { background: color-mix(in srgb, var(--jade) 40%, transparent); }

/* Process timeline */
.timeline { position: relative; list-style: none; margin: 0; padding: 0; display: grid; view-timeline-name: --tl; }
.timeline::before, .tl-fill { content: ""; position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px; background: var(--line); }
.tl-fill { background: linear-gradient(var(--robusta), var(--cashew), var(--cacao)); transform-origin: top; }
.timeline li { position: relative; display: grid; grid-template-columns: 56px 1fr 1.2fr; gap: 8px 32px; padding-block: 26px; border-bottom: 1px solid var(--line); align-items: baseline; }
.timeline li:last-child { border-bottom: 0; }
.dot { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ground); border: 2px solid var(--jade); font-family: var(--f-mono); font-size: 0.85rem; font-weight: 500; color: var(--jade); position: relative; z-index: 1; align-self: start; }
.timeline h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); text-transform: uppercase; }
.timeline p { color: var(--muted); max-width: 40em; }
@media (max-width: 760px) {
  .timeline li { grid-template-columns: 56px 1fr; }
  .timeline li p { grid-column: 2; }
}

/* Voyage chart + docs */
.ship-section { background: var(--surface); border-top: 1px solid var(--line); }
.ship { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; }
.ship > div { min-width: 0; }
.ship h3 { font-size: 1.7rem; text-transform: uppercase; margin-bottom: 8px; }
.ship .sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 24px; }
.voyage { display: grid; gap: 14px; }
.vrow { display: grid; grid-template-columns: 150px 1fr 64px; gap: 14px; align-items: center; font-size: 0.9rem; }
.vrow .port { font-weight: 600; min-width: 0; }
.vrow .port small { display: block; font-weight: 400; color: var(--muted); font-size: 0.72rem; }
.vtrack { position: relative; height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--jade) 8%, transparent); }
.vbar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; transform-origin: left; background: linear-gradient(90deg, color-mix(in srgb, var(--jade) 25%, transparent) 0, color-mix(in srgb, var(--jade) 25%, transparent) var(--minp), var(--jade) var(--minp)); }
.vbar::after { content: ""; position: absolute; right: -5px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--cashew); border: 2px solid var(--surface); }
.vrow .days { font-family: var(--f-mono); font-size: 0.78rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.vaxis { display: grid; grid-template-columns: 150px 1fr 64px; gap: 14px; font-family: var(--f-mono); font-size: 0.68rem; color: var(--muted); }
.vaxis .ticks { display: flex; justify-content: space-between; }
.docs { list-style: none; margin: 0; padding: 0; }
.docs li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.docs li span:last-child { font-family: var(--f-mono); font-size: 0.74rem; color: var(--muted); text-align: right; }
@media (max-width: 900px) { .ship { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .vrow, .vaxis { grid-template-columns: 96px 1fr 52px; gap: 10px; } }

/* Inquiry */
.inquiry { position: relative; overflow: hidden; color: var(--on-hero); background: radial-gradient(120% 100% at 10% 100%, var(--hero-bg), var(--hero-deep)); }
.inquiry .wrap { position: relative; display: grid; grid-template-columns: 0.9fr 1.3fr; gap: 56px; padding-block: clamp(72px, 10vw, 128px); }
.inquiry h2 { font-size: var(--step-4); font-weight: 900; text-transform: uppercase; line-height: .92; margin-top: 16px; }
.inquiry h2 em { font-style: normal; color: var(--cashew); }
.inquiry .eyebrow { color: var(--on-hero-muted); }
.inquiry .intro p { color: var(--on-hero-muted); margin-top: 24px; max-width: 30em; }
.contact { margin-top: 36px; display: grid; gap: 16px; font-size: 0.95rem; }
.contact div { display: grid; gap: 2px; }
.contact .eyebrow::before { display: none; }
.contact span:last-child { user-select: all; }
form.quote { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; min-width: 0; align-content: start; padding: clamp(20px, 3vw, 32px); border-radius: var(--radius); background: color-mix(in srgb, var(--on-hero) 5%, transparent); border: 1px solid color-mix(in srgb, var(--on-hero) 14%, transparent); }
.field { display: grid; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--f-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--on-hero-muted); }
.field input, .field select, .field textarea {
  font: 400 0.95rem/1.4 var(--f-body); color: var(--on-hero);
  background: color-mix(in srgb, var(--hero-deep) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--on-hero) 20%, transparent);
  border-radius: 6px; padding: 12px; width: 100%; transition: border-color .2s;
}
.field select option { color: #16211B; background: #FFFFFF; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cashew); }
.form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.error { color: var(--cashew); font-size: 0.82rem; }
.summary { grid-column: 1 / -1; border-top: 1px solid color-mix(in srgb, var(--on-hero) 20%, transparent); padding-top: 20px; display: grid; gap: 12px; }
.summary h3 { font-size: 1.5rem; text-transform: uppercase; }
.summary pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--f-mono); font-size: 0.78rem; color: var(--on-hero-muted); background: color-mix(in srgb, var(--hero-deep) 70%, transparent); padding: 14px; border-radius: 6px; }
.summary .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media (max-width: 900px) { .inquiry .wrap { grid-template-columns: 1fr; } }
@media (max-width: 520px) { form.quote { grid-template-columns: 1fr; } }

footer { background: var(--hero-deep); color: var(--on-hero-muted); padding-block: 28px; font-size: 0.82rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

/* ---------- Scroll animation ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .progress { animation: grow-x linear both; animation-timeline: scroll(root); }
    .hseed img { animation: zoom-out linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
    .hseed:nth-child(1) .photo { animation: fan-l linear both; animation-timeline: scroll(root); animation-range: 0 600px; }
    .hseed:nth-child(2) .photo { animation: fan-c linear both; animation-timeline: scroll(root); animation-range: 0 600px; }
    .hseed:nth-child(3) .photo { animation: fan-r linear both; animation-timeline: scroll(root); animation-range: 0 600px; }
    .band-seed { animation: swing-in linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .band.flip .band-seed { animation-name: swing-in-r; }
    .hero .copy { animation: fade-up linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
    .marquee-track { animation: slide linear both; animation-timeline: scroll(root); }
    .reveal { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .reveal-l { animation: from-left linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    .band-seed img { animation: photo-in linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
    .band-title h3 { animation: stretch linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    .cal .bar { animation: grow-x linear both; animation-timeline: view(); animation-range: entry 20% cover 40%; }
    .vbar { animation: grow-x linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
    .tl-fill { animation: grow-y linear both; animation-timeline: --tl; animation-range: entry 40% exit 40%; }
    .dot { animation: pop linear both; animation-timeline: view(); animation-range: entry 60% cover 40%; }
  }
  .no-sda .js-hide { transform: translateY(40px); }
  .no-sda .js-anim { transition: opacity .9s var(--ease), transform .9s var(--ease); }
}
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes zoom-out { from { transform: scale(1); } to { transform: scale(1.18); } }
@keyframes fan-l { to { transform: translate(-14px, -36px) rotate(-6deg); } }
@keyframes fan-c { to { transform: translateY(-80px) scale(1.04); } }
@keyframes fan-r { to { transform: translate(14px, -36px) rotate(6deg); } }
/* Captions start hidden and rise into view, following their photo as it fans out */
@keyframes swing-in { from { transform: translateX(-90px) rotate(-18deg) scale(.7); } to { transform: none; } }
@keyframes swing-in-r { from { transform: translateX(90px) rotate(18deg) scale(.7); } to { transform: none; } }
@keyframes photo-in { from { transform: scale(1.25); } to { transform: scale(1); } }
@keyframes fade-up { to { transform: translateY(-80px); } }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rise { from { transform: translateY(60px); } to { transform: none; } }
@keyframes from-left { from { transform: translateX(-60px); } to { transform: none; } }
@keyframes turn { from { transform: rotate(-35deg) scale(.85); } to { transform: rotate(35deg) scale(1.05); } }
@keyframes stretch { from { letter-spacing: 0.06em; } to { letter-spacing: -0.03em; } }
@keyframes pop { from { transform: scale(.5); background: var(--ground); } to { transform: scale(1); background: color-mix(in srgb, var(--jade) 14%, var(--ground)); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .slogan .ln, .hero .lede, .hero-ctas, .hseed { animation: none; }
  .progress { opacity: 0; }
}

/* ---------- SEO structure: keyword heading, internal links, FAQ, product pages ---------- */
.slogan { font-family: var(--f-display); line-height: 1; text-wrap: balance; margin: 0; }
.hero h1.eyebrow { font-family: var(--f-mono); font-size: var(--step--1); font-weight: 400; line-height: 1.6; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-hero-muted); margin: 0 0 24px; }

.more { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.92rem; color: var(--c); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--c) 40%, transparent); padding-bottom: 2px; transition: gap .2s var(--ease); }
.more:hover { gap: 12px; }

.faq-section { background: var(--surface); border-top: 1px solid var(--line); }
.faq { display: grid; gap: 0; max-width: 900px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 20px 0; font-family: var(--f-display); font-weight: 800; font-size: clamp(1.15rem, 2vw, 1.4rem); text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--f-mono); font-weight: 400; color: var(--jade); font-size: 1.3rem; transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-bottom: 22px; max-width: 62em; }

.footer-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-links a { color: var(--on-hero-muted); text-decoration: none; }
.footer-links a:hover { color: var(--on-hero); }

/* Product pages */
.page-hero .wrap { grid-template-columns: 1.4fr 0.8fr; }
.page-hero .slogan { font-size: clamp(2.6rem, 6.5vw, 5.25rem); }
.crumbs { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-hero-muted); margin-bottom: 20px; }
.crumbs a { color: var(--on-hero-muted); }
.crumbs a:hover { color: var(--on-hero); }
.hero-photo { width: 100%; max-width: 380px; aspect-ratio: 1; justify-self: center; border-radius: 50%; overflow: hidden; border: 1px solid color-mix(in srgb, var(--on-hero) 22%, transparent); box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 56px; }
.info-grid > div { min-width: 0; display: grid; gap: 10px; align-content: start; }
.info-grid h3 { font-size: 1.5rem; text-transform: uppercase; }
.info-grid p, .info-grid li { color: var(--muted); }
.info-grid ul { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.related { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (max-width: 900px) { .page-hero .wrap { grid-template-columns: 1fr; } .hero-photo { max-width: 260px; } }
@media (max-width: 700px) { .info-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero-photo img { animation: zoom-out linear both; animation-timeline: scroll(root); animation-range: 0 600px; }
    .info-grid > div { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}

/* Logo: globe with export arrow */
.brand-logo { width: 32px; height: 32px; flex: none; color: var(--on-hero); overflow: visible; }
.brand-logo .arc-gap { stroke: var(--hero-deep); }
.brand-logo .arc { stroke: var(--cashew); }
.brand-logo .arc-head { fill: var(--cashew); }
.brand:hover .brand-logo .arc, .brand:hover .brand-logo .arc-head { filter: brightness(1.15); }

/* Hero photo captions sit on the photo */
.hseed .photo { position: relative; }
.tag { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 4px; padding: 48px 8px 16px; text-align: center; background: linear-gradient(to top, rgba(5,20,13,.92) 0%, rgba(5,20,13,.6) 45%, rgba(5,20,13,0) 100%); color: #FFFFFF; animation: cap-in .9s .5s var(--ease) both; }
.tag b { font-family: var(--f-display); font-weight: 900; font-size: clamp(1rem, 1.7vw, 1.4rem); text-transform: uppercase; letter-spacing: 0.05em; line-height: 1; }
.tag b::after { content: ""; display: block; width: 22px; height: 2px; margin: 7px auto 0; background: var(--cashew); border-radius: 2px; }
.tag span { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.hseed:nth-child(2) .tag { animation-delay: .62s; }
.hseed:nth-child(3) .tag { animation-delay: .74s; }
@keyframes cap-in { from { transform: translateY(14px); } to { transform: none; } }
@media (max-width: 480px) { .tag { padding: 36px 4px 10px; } .tag b { font-size: 0.85rem; } .tag span { font-size: 0.55rem; letter-spacing: 0.08em; } }

/* Hero background: coffee-growing mountainside */
.hills { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.hero-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(7,23,15,.88) 0%, rgba(7,23,15,.7) 34%, rgba(7,23,15,.2) 56%, rgba(7,23,15,0) 70%), linear-gradient(180deg, rgba(7,23,15,.3) 0%, rgba(7,23,15,0) 30%); }
@media (max-width: 900px) { .hero-shade { background: linear-gradient(180deg, rgba(7,23,15,.78) 0%, rgba(7,23,15,.5) 55%, rgba(7,23,15,.15) 100%); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hills .hill-far { animation: drift-far linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
    .hills .hill-mid { animation: drift-mid linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
    .hills .hill-near { animation: drift-near linear both; animation-timeline: scroll(root); animation-range: 0 700px; }
  }
}
@keyframes drift-far { to { transform: translateY(70px); } }
@keyframes drift-mid { to { transform: translateY(40px); } }
@keyframes drift-near { to { transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .tag { animation: none; } }
/* Wordmark: larger, with an arrow-tipped X */
.brand { gap: 12px; }
.brand-name { font-size: 1.75rem; letter-spacing: 0.045em; display: inline-flex; align-items: baseline; }
.brand-logo { width: 38px; height: 38px; }
.x-arrows { width: 0.567em; height: 0.7em; margin: 0 0.045em 0 0.005em; overflow: visible; }
@media (max-width: 420px) { .brand-name { font-size: 1.3rem; } .brand-logo { width: 30px; height: 30px; } }

/* ---------- Product spec sections: rich themed backdrops ---------- */
.band, .band-bg {
  --c: var(--jade); --c-lt: #9FD3B5; --base-1: #0E2A20; --base-2: #1B3F31; --glow: rgba(125,190,158,.22); --pattern: none;
  position: relative; overflow: hidden; isolation: isolate; color: #F3F1EC;
  background:
    radial-gradient(55% 70% at 12% 22%, var(--glow), transparent 70%),
    radial-gradient(45% 60% at 92% 88%, rgba(255,255,255,.06), transparent 70%),
    var(--pattern),
    linear-gradient(155deg, var(--base-1) 0%, var(--base-2) 100%);
  border-top: 0;
}
.band.coffee, .band-bg.coffee {
  --c: var(--robusta); --c-lt: #E7AE86; --base-1: #1C110B; --base-2: #3B2416; --glow: rgba(214,147,26,.20);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='none' stroke='%23F6E3D3' stroke-opacity='.08' stroke-width='2'%3E%3Cg transform='translate(45 50) rotate(-28)'%3E%3Cellipse rx='12' ry='17'/%3E%3Cpath d='M0-16C-6-6 6 6 0 16'/%3E%3C/g%3E%3Cg transform='translate(160 40) rotate(35)'%3E%3Cellipse rx='10' ry='14'/%3E%3Cpath d='M0-13C-5-5 5 5 0 13'/%3E%3C/g%3E%3Cg transform='translate(115 130) rotate(70)'%3E%3Cellipse rx='13' ry='18'/%3E%3Cpath d='M0-17C-6-6 6 6 0 17'/%3E%3C/g%3E%3Cg transform='translate(35 175) rotate(10)'%3E%3Cellipse rx='10' ry='14'/%3E%3Cpath d='M0-13C-5-5 5 5 0 13'/%3E%3C/g%3E%3Cg transform='translate(190 180) rotate(-55)'%3E%3Cellipse rx='11' ry='15'/%3E%3Cpath d='M0-14C-5-5 5 5 0 14'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.band.cashew, .band-bg.cashew {
  --c: var(--cashew); --c-lt: #F6C35E; --base-1: #231808; --base-2: #4A3412; --glow: rgba(246,195,94,.24);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cdefs%3E%3Cpath id='k' d='M10-12C-6-18-16-4-13 8C-10 18 6 20 12 12C15 8 12 4 7 6C1 8-3 3-2-2C-1-7 4-8 9-6C15-4 18-9 10-12Z'/%3E%3C/defs%3E%3Cg fill='none' stroke='%23FFF1D2' stroke-opacity='.09' stroke-width='1.8'%3E%3Cuse href='%23k' transform='translate(48 46) rotate(-20) scale(1.25)'/%3E%3Cuse href='%23k' transform='translate(165 52) rotate(60) scale(1.05)'/%3E%3Cuse href='%23k' transform='translate(112 128) rotate(150) scale(1.35)'/%3E%3Cuse href='%23k' transform='translate(40 178) rotate(100) scale(1.05)'/%3E%3Cuse href='%23k' transform='translate(186 182) rotate(-80) scale(1.15)'/%3E%3C/g%3E%3C/svg%3E");
}
.band.cacao, .band-bg.cacao {
  --c: var(--cacao); --c-lt: #F28A9C; --base-1: #1E0A10; --base-2: #461523; --glow: rgba(242,138,156,.22);
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cdefs%3E%3Cg id='p'%3E%3Cpath d='M0-24C15-16 15 16 0 24C-15 16-15-16 0-24Z'/%3E%3Cpath d='M0-21V21M-7-18C-11-6-11 6-7 18M7-18C11-6 11 6 7 18'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%23FFDDE3' stroke-opacity='.08' stroke-width='1.8'%3E%3Cuse href='%23p' transform='translate(55 60) rotate(-30)'/%3E%3Cuse href='%23p' transform='translate(180 50) rotate(25) scale(.85)'/%3E%3Cuse href='%23p' transform='translate(125 150) rotate(75) scale(1.1)'/%3E%3Cuse href='%23p' transform='translate(40 200) rotate(5) scale(.8)'/%3E%3Cuse href='%23p' transform='translate(210 200) rotate(-60) scale(.9)'/%3E%3C/g%3E%3C/svg%3E");
}
/* Giant outlined product name in the background */
.band::before, .band-bg::before {
  content: attr(data-word); position: absolute; z-index: -1; right: -0.04em; bottom: -0.16em;
  font: 900 clamp(7rem, 22vw, 20rem)/0.8 var(--f-display); text-transform: uppercase; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.07); white-space: nowrap; pointer-events: none;
}
.band.flip::before { right: auto; left: -0.04em; }
.band + .band { border-top: 1px solid rgba(255,255,255,.06); }

/* Light text on the dark backdrops */
.band .band-title .idx, .band-bg .eyebrow { color: rgba(243,241,236,.66); }
.band .band-title h3 { color: var(--c-lt); text-shadow: 0 10px 40px rgba(0,0,0,.35); }
.band .band-title .vi { color: rgba(243,241,236,.9); }
.band-bg .sec-head h2 { color: #F7F5F0; }
.band-bg .sec-head p { color: rgba(243,241,236,.75); }
.band-bg .sec-head a { color: var(--c-lt); }
.band .band-seed { border: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 0 0 10px rgba(255,255,255,.05), 0 40px 70px -30px rgba(0,0,0,.7); width: min(340px, 82%); }

/* Spec card floats on the backdrop */
.band .band-card, .band-bg .band-card { color: var(--ink); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 50px 90px -40px rgba(0,0,0,.65), 0 2px 0 rgba(255,255,255,.06) inset; }
.band .chip, .band-bg .chip { border-color: color-mix(in srgb, var(--c) 55%, var(--line)); }

/* Fill the empty column: title + photo stay in view beside the long spec card */
@media (min-width: 901px) {
  .band .band-title { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 110px); align-self: start; }
  .band .wrap { align-items: start; }
}
@media (max-width: 900px) {
  .band .band-seed { width: 34%; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 20px 40px -20px rgba(0,0,0,.7); }
  .band::before, .band-bg::before { font-size: 34vw; }
}

@media (max-width: 900px) { .band .band-title { padding-right: 38%; } }

/* ---------- Homepage hero: headline / photos / copy stacked ---------- */
.hero .wrap.hero-stack { grid-template-columns: 1fr; gap: clamp(22px, 2.6vw, 36px); align-items: start; }
.hero-top .eyebrow { margin-bottom: 14px; }
.hero-stack .slogan { font-size: clamp(2.6rem, 7.2vw, 6.4rem); line-height: .9; }
.hero-stack .seed-stage { max-width: none; width: 100%; gap: clamp(12px, 1.8vw, 24px); }
.hero-stack .hseed .photo { aspect-ratio: 4 / 3.3; border-radius: 999px 999px 18px 18px / 46% 46% 18px 18px; }
.hero-stack .tag { padding-top: 64px; padding-bottom: 20px; }
.hero-stack .tag b { font-size: clamp(1.1rem, 2.2vw, 1.9rem); }
.hero-stack .tag span { font-size: clamp(.6rem, .9vw, .74rem); }
.hero-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 56px; align-items: center; }
.hero-bottom .lede { margin-top: 0; max-width: 46em; }
.hero-bottom .hero-ctas { margin-top: 0; flex-wrap: nowrap; }
.hero-stack ~ .hero-shade, .hero .hero-shade { background: linear-gradient(180deg, rgba(7,23,15,.6) 0%, rgba(7,23,15,.2) 38%, rgba(7,23,15,.25) 62%, rgba(7,23,15,.55) 82%, rgba(7,23,15,.7) 100%), linear-gradient(90deg, rgba(7,23,15,.55) 0%, rgba(7,23,15,0) 60%); }
@media (max-width: 900px) {
  .hero-bottom { grid-template-columns: 1fr; }
  .hero-bottom .hero-ctas { flex-wrap: wrap; }
  .hero-stack .seed-stage { max-width: none; margin-inline: 0; }
  .hero-stack .hseed .photo { aspect-ratio: 3 / 4.2; border-radius: 999px 999px 14px 14px; }
}
@media (max-width: 480px) { .hero-stack .tag { padding: 40px 4px 10px; } .hero-stack .tag b { font-size: .85rem; } .hero-stack .tag span { font-size: .55rem; } }

/* Products intro sits close to the facts strip above it */
section.block#products { padding-top: clamp(40px, 4vw, 56px); }

/* Centered hero headline */
.hero-top { text-align: center; }
.hero-top .eyebrow::before { display: none; }

/* ---------- Product section dividers ---------- */
.band-divider { position: relative; z-index: 3; height: 0; display: flex; align-items: center; justify-content: center; gap: 18px; padding-inline: var(--gutter); }
.band-divider .rule { flex: 1 1 0; max-width: 420px; height: 2px; border-radius: 2px; }
.band-divider .rule:first-child { background: linear-gradient(90deg, rgba(214,147,26,0), rgba(214,147,26,.9)); }
.band-divider .rule:last-of-type { background: linear-gradient(90deg, rgba(214,147,26,.9), rgba(214,147,26,0)); }
.band-divider .medal { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #20382D, #0B1F17); box-shadow: 0 0 0 2px #D6931A, 0 0 0 7px rgba(214,147,26,.18), 0 14px 30px -8px rgba(0,0,0,.7); }
.band-divider .medal svg { width: 38px; height: 38px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
/* each product section layers over the one before it */
.band { box-shadow: inset 0 26px 40px -26px rgba(0,0,0,.75); }
.band::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); pointer-events: none; }
.band + .band { border-top: 0; }
.band .wrap { padding-top: clamp(80px, 9vw, 120px); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .band-divider .medal { animation: medal-in linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    .band-divider .rule { animation: rule-in linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
}
@keyframes medal-in { from { transform: scale(.4) rotate(-90deg); } to { transform: none; } }
@keyframes rule-in { from { transform: scaleX(0); } to { transform: none; } }
.band-divider .rule:first-child { transform-origin: right; }
.band-divider .rule:last-of-type { transform-origin: left; }
@media (max-width: 600px) { .band-divider .medal { width: 52px; height: 52px; } .band-divider .medal svg { width: 30px; height: 30px; } }

/* Dividers between every section: stroke icons in the medal, layered top edges */
.band-divider .medal.icon { color: #F2C25C; }
.band-divider .medal.icon svg { width: 30px; height: 30px; filter: none; }
.band-divider + section { box-shadow: inset 0 24px 34px -26px rgba(16,40,28,.28); }
.band-divider + section.band-bg, .band-divider + section.inquiry { box-shadow: inset 0 26px 40px -26px rgba(0,0,0,.75); }
.band-divider + section::before { pointer-events: none; }
@media (max-width: 600px) { .band-divider .medal.icon svg { width: 24px; height: 24px; } }

/* ---------- Section backdrops (non-product sections) ---------- */
/* Products intro: terrain contour lines */
section#products {
  background:
    radial-gradient(60% 120% at 85% 0%, color-mix(in srgb, var(--jade) 10%, transparent), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240'%3E%3Cg fill='none' stroke='%232E6A4F' stroke-opacity='.09' stroke-width='1.4'%3E%3Cpath d='M0 30C80 0 160 60 240 30S400 0 480 30'/%3E%3Cpath d='M0 70C80 40 160 100 240 70S400 40 480 70'/%3E%3Cpath d='M0 110C80 80 160 140 240 110S400 80 480 110'/%3E%3Cpath d='M0 150C80 120 160 180 240 150S400 120 480 150'/%3E%3Cpath d='M0 190C80 160 160 220 240 190S400 160 480 190'/%3E%3Cpath d='M0 230C80 200 160 260 240 230S400 200 480 230'/%3E%3C/g%3E%3C/svg%3E"),
    var(--ground);
}

/* Harvest calendar + sourcing: leaves and sunlight */
section.cal-section {
  background:
    radial-gradient(45% 80% at 95% 10%, rgba(214,147,26,.12), transparent 70%),
    radial-gradient(50% 90% at 0% 100%, color-mix(in srgb, var(--jade) 9%, transparent), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cdefs%3E%3Cg id='l'%3E%3Cpath d='M0 18C0 4 9-8 24-8 24 6 15 18 0 18Z'/%3E%3Cpath d='M0 18 15 3'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='none' stroke='%232E6A4F' stroke-opacity='.10' stroke-width='1.5' stroke-linecap='round'%3E%3Cuse href='%23l' transform='translate(30 40) rotate(-10)'/%3E%3Cuse href='%23l' transform='translate(170 30) rotate(60) scale(.9)'/%3E%3Cuse href='%23l' transform='translate(110 130) rotate(140) scale(1.2)'/%3E%3Cuse href='%23l' transform='translate(20 200) rotate(200) scale(.8)'/%3E%3Cuse href='%23l' transform='translate(200 190) rotate(-70)'/%3E%3C/g%3E%3C/svg%3E"),
    var(--surface);
}

/* Export process: dark, with shipping routes and ports */
section#process {
  --ground: #0E2A21; --surface: #143328; --ink: #EAF0E8; --muted: #A9C2B4; --line: rgba(255,255,255,.12); --jade: #8FD1AE;
  color: var(--ink);
  background:
    radial-gradient(50% 70% at 90% 15%, rgba(242,194,92,.16), transparent 70%),
    radial-gradient(60% 80% at 5% 95%, rgba(143,209,174,.10), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='300'%3E%3Cg fill='none' stroke='%23F2C25C' stroke-opacity='.16' stroke-width='1.6' stroke-dasharray='2 9' stroke-linecap='round'%3E%3Cpath d='M30 250C120 120 260 120 390 40'/%3E%3Cpath d='M-20 120C90 70 200 200 440 170'/%3E%3C/g%3E%3Cg fill='%23F2C25C' fill-opacity='.22'%3E%3Ccircle cx='30' cy='250' r='4'/%3E%3Ccircle cx='390' cy='40' r='4'/%3E%3Ccircle cx='205' cy='150' r='3'/%3E%3C/g%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.06' stroke-width='1'%3E%3Ccircle cx='30' cy='250' r='10'/%3E%3Ccircle cx='390' cy='40' r='10'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg, #0B231B 0%, #163C2E 100%);
}
section#process .sec-head h2 { color: #F4F6F0; }
section#process .dot { background: #0E2A21; }

/* Shipping: map graticule with a faint globe */
section.ship-section {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%232E6A4F' stroke-opacity='.10' stroke-width='1.5'%3E%3Ccircle cx='300' cy='300' r='280'/%3E%3Cellipse cx='300' cy='300' rx='120' ry='280'/%3E%3Cellipse cx='300' cy='300' rx='210' ry='280'/%3E%3Cpath d='M20 300h560M45 190h510M45 410h510M110 100h380M110 500h380'/%3E%3C/g%3E%3C/svg%3E") no-repeat right -140px center / 620px 620px,
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--jade) 6%, transparent) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--jade) 6%, transparent) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--jade) 5%, var(--surface)));
}

/* FAQ: warm sand with a jute-sack weave */
section#faq {
  background:
    repeating-linear-gradient(45deg, rgba(140,100,40,.045) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(140,100,40,.045) 0 1px, transparent 1px 7px),
    radial-gradient(60% 90% at 100% 0%, rgba(214,147,26,.10), transparent 70%),
    color-mix(in srgb, var(--surface) 90%, #C9A15A);
}
section#faq .faq details { border-color: color-mix(in srgb, var(--line) 70%, #C9A15A); }

/* Request a quote: terrain lines and a gold glow over the dark green */
section.inquiry {
  background:
    radial-gradient(45% 70% at 88% 20%, rgba(242,194,92,.14), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.05' stroke-width='1.4'%3E%3Cpath d='M0 30C80 0 160 60 240 30S400 0 480 30'/%3E%3Cpath d='M0 70C80 40 160 100 240 70S400 40 480 70'/%3E%3Cpath d='M0 110C80 80 160 140 240 110S400 80 480 110'/%3E%3Cpath d='M0 150C80 120 160 180 240 150S400 120 480 150'/%3E%3Cpath d='M0 190C80 160 160 220 240 190S400 160 480 190'/%3E%3Cpath d='M0 230C80 200 160 260 240 230S400 200 480 230'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(120% 100% at 10% 100%, var(--hero-bg), var(--hero-deep));
}

/* Wordmark X: the font's own X with small arrow tips on its four ends */
.x-glyph { position: relative; display: inline-block; line-height: 1; }
.x-tips { position: absolute; left: 0; top: .21em; width: .567em; height: .7em; overflow: visible; fill: currentColor; pointer-events: none; }

/* Logo mark: globe whose meridian is a coffee-bean crease, with a gold export arrow */
.brand-logo .mark-arrow { stroke: var(--cashew); }
.brand:hover .brand-logo .mark-arrow { transform: translate(1px,-1px); transition: transform .2s var(--ease); }

/* ---------- Accessibility (WCAG 2.1 / 2.2 AA) ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: 8px; background: var(--cashew); color: #1B140A; font-weight: 600; text-decoration: none; transition: top .15s; }
.skip-link:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); outline: 3px solid #FFFFFF; outline-offset: 2px; }
main:focus { outline: none; }
/* keep focused items clear of the sticky header (2.4.11) */
html { scroll-padding-top: 96px; }
/* stronger, consistent focus ring on every control */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.band a:focus-visible, .inquiry a:focus-visible, .hero a:focus-visible, .site-head a:focus-visible, section#process a:focus-visible { outline-color: #FFD27A; }

/* contrast: product links use a darker ink of each product color on the white card (1.4.3) */
.band.coffee, .band-bg.coffee { --c-ink: #6A3B26; }
.band.cashew, .band-bg.cashew { --c-ink: #7A4E05; }
.band.cacao, .band-bg.cacao { --c-ink: #8C2638; }
.band .more { color: var(--c-ink, var(--c)); border-bottom-color: color-mix(in srgb, var(--c-ink, var(--c)) 45%, transparent); }
/* hero paragraph stays readable over the lighter hills */
.hero .lede { color: #DCE7DF; text-shadow: 0 1px 12px rgba(7,23,15,.6); }
/* form fields: visible borders (1.4.11) and readable placeholders */
.field input, .field select, .field textarea { border-color: rgba(239,243,234,.5); }
.field input::placeholder, .field textarea::placeholder { color: rgba(239,243,234,.68); opacity: 1; }
.field input[aria-invalid="true"] { border-color: #FFB4A8; box-shadow: 0 0 0 1px #FFB4A8; }
.error { color: #FFD27A; font-weight: 500; }
/* harvest calendar: peak vs season shown by bar height as well as color (1.4.1) */
.cal .on .bar { height: 8px; }
.cal .peak .bar { height: 20px; }
.legend i { height: 8px; }
.legend i:not(.light) { height: 16px; }
/* chips and fine print keep AA contrast in every theme */
.chip { color: var(--ink); }

/* Accessibility statement and other text pages */
.prose { max-width: 760px; display: grid; gap: 16px; }
.prose h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); text-transform: uppercase; margin-top: 24px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink); line-height: 1.7; }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; }
.prose a { color: var(--jade); text-underline-offset: 3px; }

/* Solid header so menu text always meets contrast over any section */
.site-head { background: var(--hero-deep); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Secondary text on dark green areas: brighter for 4.5:1 even over the lightest hills */
.hero, .site-head, .inquiry, footer { --on-hero-muted: #C4D7CB; }

.skip-link { transition: none; }