/* ============================================================
   TradeWeave — marketing site v2
   Colour system: "field to factory"
     Paper      cream, the page
     Field      lime tints for the upstream half of the chain
     Factory    light graphite for the downstream, industrial half
     Ink        deep forest for text, buttons, dark bands
     Action     terracotta, used only for calls to action
     Marks      soil brown for labels and emphasis; leaf green = good;
                madder = warning. Rules: terracotta is the only warm
                colour ever used as a fill; marks are text, pills, dots;
                one active mark per component.
   Serif display (Instrument Serif) + Inter. Square corners, hairlines.
   ============================================================ */

:root {
  /* Canvas & surfaces (60) */
  --paper-cream:       #FDFAEF;                                         /* page */
  --field-lime:        #E5FFB2;                                         /* upstream: one bright band per page, farm-side nodes */
  --field-light:       color-mix(in srgb, var(--field-lime) 30%, var(--paper-cream)); /* derived: upstream alternating bands */
  --factory-graphite:  #E9EBE8;                                         /* downstream: logistics, export, bank */
  --surface-white:     #FFFFFF;                                         /* elevated panels, tiles, inputs */

  /* Ink & hierarchy (30) */
  --forest-ink:        #102117;                                         /* text, buttons, dark bands, logo */
  --forest-hover:      #1B3324;                                         /* hover on ink fills */
  --ink-2:             #2A3A30;                                         /* ledes, nav links */
  --text-muted:        #5E6B60;                                         /* captions, labels; AA body on cream/field/graphite */
  --text-dimmed:       color-mix(in srgb, var(--text-muted) 78%, var(--paper-cream)); /* derived: large or decorative text only */

  /* Action (10) & semantic marks */
  --terracotta:        #CF441E;                                         /* the ONLY warm fill; CTAs only; white text 4.7:1 */
  --terracotta-hover:  #B93A17;
  --terracotta-tint:   #FBD9CC;                                         /* text selection only */
  --soil:              #96591F;                                         /* emphasis, pending; dots, pills, text only */
  --leaf:              #3E6B3A;                                         /* good; pills, text only */
  --madder:            #B42318;                                         /* warning; outlined pills, text only */

  /* Announcement bar: inverted forest on cream, never a new colour */
  --announce-bg:       var(--forest-ink);
  --announce-fg:       var(--paper-cream);

  /* Structure */
  --hairline:          #DCDCC4;
  --hairline-dark:     rgba(255, 255, 255, 0.14);
  --nav-bg:            rgba(253, 250, 239, 0.86);
  --num-ghost:         color-mix(in srgb, var(--field-lime) 60%, var(--paper-cream));
  --art-line:          #D5D9C0;                                         /* hero grid hairlines */
  --art-path:          #97A283;                                         /* hero connector paths */

  --serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --maxw: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--forest-ink);
  background: var(--paper-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--terracotta-tint); color: var(--forest-ink); }
:focus-visible { outline: 2px solid var(--forest-ink); outline-offset: 3px; }
.dark :focus-visible, .band-navy :focus-visible { outline-color: var(--paper-cream); }

/* ---------- Skip link ---------- */
.skip { position: absolute; left: 16px; top: -48px; z-index: 200; padding: 10px 14px; background: var(--forest-ink); color: var(--paper-cream); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }
.skip:focus { top: 12px; }

/* ---------- Type ---------- */
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; }
.display-xl {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(3rem, 7.2vw, 6.5rem);
  line-height: 0.98; letter-spacing: -0.02em;
}
.display-l {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.4rem, 4.8vw, 4.25rem);
  line-height: 1.02; letter-spacing: -0.02em;
}
.display-m {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1.08; letter-spacing: -0.015em;
}
.display-s {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1.15; letter-spacing: -0.01em;
}
.display-xl em, .display-l em, .display-m em { font-style: italic; color: var(--soil); }
.lede { font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 34em; }
.body-l { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
.body-m { font-size: 0.9375rem; line-height: 1.6; color: var(--text-muted); }
.label {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted);
}
.label--forest-ink { color: var(--forest-ink); }
.label--terracotta { color: var(--soil); }
.label::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--soil); margin-right: 10px; vertical-align: 1px; }
.label.no-dot::before { display: none; }
.dark { color: #fff; }
.dark .label, .dark .body-m { color: rgba(255,255,255,0.62); }
.dark .lede, .dark .body-l { color: rgba(255,255,255,0.82); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(72px, 9vw, 136px) 0; }
.section--tight { padding: clamp(48px, 6vw, 88px) 0; }
.band-2 { background: var(--field-light); }
.band-3 { background: var(--field-lime); }
.band-steel { background: var(--factory-graphite); }
.band-steel .grid > *, .band-steel .step { background: var(--factory-graphite); }
.band-3 .label { color: var(--ink-2); }
.band-3 .quote blockquote { color: var(--forest-ink); }
.band-navy { background: var(--forest-ink); color: #fff; }
.hairline-top { border-top: 1px solid var(--hairline); }
.hairline-bottom { border-bottom: 1px solid var(--hairline); }
.section-head { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head .lede { margin-top: 6px; }
@media (min-width: 900px) {
  .section-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 48px; }
  .section-head--stack { grid-template-columns: 1fr; }
}
.grid { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
.grid > * { background: var(--paper-cream); }
.band-2 .grid > * { background: var(--field-light); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 22px;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: var(--terracotta); border: 1px solid var(--terracotta);
  transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--terracotta-hover); border-color: var(--terracotta-hover); }
.btn--forest-ink { background: var(--forest-ink); border-color: var(--forest-ink); }
.btn--forest-ink:hover { background: var(--forest-hover); border-color: var(--forest-hover); }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.btn--ghost { background: transparent; color: var(--forest-ink); border-color: var(--forest-ink); }
.btn--ghost:hover { background: var(--forest-ink); color: #fff; }
.btn--terracotta { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.btn--terracotta:hover { background: var(--terracotta-hover); border-color: var(--terracotta-hover); }
.btn--light { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.btn--light:hover { background: var(--terracotta-hover); border-color: var(--terracotta-hover); }
.btn--ghost-light { background: transparent; border-color: rgba(255,255,255,0.4); color: #fff; }
.btn--ghost-light:hover { background: #fff; color: var(--forest-ink); border-color: #fff; }
.btn--sm { height: 40px; padding: 0 16px; font-size: 0.7rem; }
.link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--forest-ink); border-bottom: 1px solid transparent; transition: border-color .2s;
}
.link:hover { border-color: var(--forest-ink); }
.link .arr { transition: transform .25s var(--ease); }
.link:hover .arr { transform: translateX(3px); }
.arr { width: 14px; height: 14px; flex: none; }

/* Email + button combo (hero) */
.combo { display: flex; max-width: 520px; border: 1px solid var(--forest-ink); }
.combo .btn { border-left-color: var(--forest-ink) !important; }
.combo .btn:hover { border-left-color: var(--forest-ink) !important; }
.combo input {
  flex: 1; min-width: 0; height: 52px; padding: 0 16px;
  font: inherit; font-size: 0.95rem; color: var(--forest-ink);
  background: var(--surface-white); border: 0; outline: none;
}
.combo input::placeholder { color: var(--text-dimmed); }
.combo .btn { height: 52px; border: 0; border-left: 1px solid var(--forest-ink); }
@media (max-width: 480px) {
  .combo { flex-direction: column; }
  .combo .btn { border-left: 0; border-top: 1px solid var(--forest-ink); }
}

/* ---------- Announcement bar ---------- */
.announce {
  background: var(--announce-bg); color: var(--announce-fg);
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  text-align: center; padding: 10px var(--gutter);
  display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap;
}
.announce .tag { display: inline-flex; align-items: center; gap: 8px; }
.announce .tag::before { content: ''; width: 6px; height: 6px; background: var(--field-lime); }
.announce a { display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid rgba(253,250,239,0.4); }
.announce a:hover { border-color: var(--announce-fg); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: var(--nav-bg);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s;
}
.nav { border-bottom-color: var(--hairline); }
.nav.scrolled { border-bottom-color: var(--hairline); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 26px; width: 26px; }
.brand span { font-family: var(--serif); font-weight: 400; font-size: 1.4rem; letter-spacing: -0.01em; color: var(--forest-ink); line-height: 1; }
.dark .brand span { color: var(--paper-cream); }
.nav__links { display: flex; align-items: center; gap: 34px; }
.nav__links a {
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-2); transition: color .2s;
}
.nav__links a:hover, .nav__links a.active { color: var(--forest-ink); }
.nav__links .btn { margin-left: 10px; color: #fff; }
.nav__links .btn:hover { color: #fff; }
.nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; margin-right: -10px; }
.nav__toggle span { display: block; width: 22px; height: 1.5px; background: var(--forest-ink); position: relative; transition: transform .25s, background .25s; }
.nav__toggle span::before, .nav__toggle span::after { content: ''; position: absolute; left: 0; width: 22px; height: 1.5px; background: var(--forest-ink); transition: transform .25s, top .25s; }
.nav__toggle span::before { top: -7px; } .nav__toggle span::after { top: 7px; }
.nav__toggle.open span { background: transparent; }
.nav__toggle.open span::before { top: 0; transform: rotate(45deg); }
.nav__toggle.open span::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 960px) {
  .nav__toggle { display: flex; }
  .nav__links {
    display: none; position: absolute; left: 0; right: 0; top: 64px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper-cream); border-bottom: 1px solid var(--hairline);
    padding: 8px var(--gutter) 24px;
  }
  .nav__links.open { display: flex; }
  .nav__links a { padding: 16px 0; border-bottom: 1px solid var(--hairline); font-size: 0.85rem; }
  .nav__links .btn { margin: 20px 0 0; border-bottom: 1px solid var(--forest-ink); }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 6vw, 88px); }
.hero__inner { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.hero__copy { position: relative; z-index: 2; max-width: 640px; }
.hero__copy .lede { margin: 28px 0 36px; }
.hero__note { margin-top: 18px; font-size: 0.85rem; color: var(--text-muted); }
.hero__art { position: relative; min-height: 420px; }
@media (min-width: 1000px) {
  .hero__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 32px; }
  .hero__art { min-height: 560px; }
}
.hero__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile {
  position: absolute; background: var(--surface-white); border: 1px solid var(--hairline);
  padding: 14px 16px; width: 220px;
  box-shadow: 0 24px 48px -32px rgba(11, 19, 34, 0.35);
}
.tile .label { font-size: 0.62rem; letter-spacing: 0.14em; }
.tile .label::before { width: 5px; height: 5px; margin-right: 8px; }
.tile__title { font-family: var(--serif); font-size: 1.2rem; line-height: 1.1; margin: 8px 0 4px; }
.tile__meta { font-size: 0.78rem; color: var(--text-muted); }
.tile__row { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; padding: 6px 0; border-top: 1px solid var(--hairline); }
.tile__row:first-of-type { border-top: 0; }
.tile__row b { font-weight: 500; color: var(--forest-ink); }
.pill { font-size: 0.62rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px; border: 1px solid currentColor; }
.pill--ok { color: var(--leaf); }
.pill--warn { color: var(--madder); }
.pill--terracotta { color: var(--soil); }
.tile--1 { left: 4%; top: 6%; }
.tile--2 { right: 2%; top: 4%; }
.tile--3 { left: 6%; bottom: 2%; width: 250px; }
@media (max-width: 999px) {
  /* Phones and small tablets: art on top, cards stacked below it (no overlap) */
  .hero__art { min-height: 0; aspect-ratio: 640 / 520; max-height: 60vw; }
  .hero__art svg { position: absolute; inset: 0; }
  .tile { position: static; width: auto; box-shadow: none; border-top: 0; }
  .hero__cards { display: grid; grid-template-columns: 1fr; border: 1px solid var(--hairline); margin-top: 20px; }
  .hero__cards .tile + .tile { border-top: 1px solid var(--hairline); }
}
@media (min-width: 560px) and (max-width: 999px) { .hero__cards { grid-template-columns: repeat(3, 1fr); } .hero__cards .tile + .tile { border-top: 0; border-left: 1px solid var(--hairline); } }


/* ---------- Trusted strip ---------- */
.trusted { padding: 36px 0; }
.trusted__inner { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.trusted__inner .label { flex: none; }
.commodities { display: flex; gap: clamp(20px, 3.5vw, 52px); flex-wrap: wrap; }
.commodities span { font-family: var(--serif); font-size: clamp(1.25rem, 1.9vw, 1.7rem); color: var(--text-muted); letter-spacing: -0.01em; white-space: nowrap; }

/* ---------- Manifesto ---------- */
.manifesto { max-width: 1040px; }
.manifesto p { font-family: var(--serif); font-size: clamp(1.7rem, 3.1vw, 2.85rem); line-height: 1.22; letter-spacing: -0.015em; color: var(--forest-ink); }
.manifesto p .dim { color: var(--text-dimmed); }
.manifesto .label { display: block; margin-bottom: 28px; }

/* ---------- Cards ---------- */
.card { padding: clamp(24px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 14px; min-height: 260px; }
.card .display-s { margin-top: 4px; }
.card .body-m { flex: 1; }
.card .num { font-family: var(--serif); font-size: 1.1rem; color: var(--text-dimmed); }
.card--tall { min-height: 360px; }
.card__art { height: 150px; border: 1px solid var(--hairline); background: var(--surface-white); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 8px; }
.card__art svg { width: 100%; height: 100%; }
.card__foot { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; align-items: baseline; }
.stat-inline { font-family: var(--serif); font-size: 1.6rem; line-height: 1; }
.stat-inline small { font-family: var(--sans); font-size: 0.75rem; color: var(--text-muted); margin-left: 8px; letter-spacing: 0.04em; }

/* ---------- Platform split ---------- */
.split { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; } .split--rev > :first-child { order: 2; } }
.pillars { border-top: 1px solid var(--hairline); }
.pillar { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--hairline); }
.pillar .num { font-family: var(--serif); font-size: 1.1rem; color: var(--text-dimmed); padding-top: 4px; }
.pillar h3 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.15; margin-bottom: 6px; }

/* Product panel (mock UI) */
.panel { border: 1px solid var(--hairline); background: var(--surface-white); box-shadow: 0 40px 80px -60px rgba(11,19,34,0.45); }
.panel__bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--hairline); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.panel__bar b { color: var(--forest-ink); font-weight: 500; }
.panel__body { padding: 18px; }
.panel__title { font-family: var(--serif); font-size: 1.35rem; line-height: 1.1; }
.panel__sub { font-size: 0.82rem; color: var(--text-muted); margin: 4px 0 16px; }
.check { display: grid; grid-template-columns: 84px 1fr auto; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--hairline); font-size: 0.86rem; }
.check .pill { justify-self: start; }
.check .note { color: var(--text-muted); font-size: 0.78rem; }
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); margin: 18px 0 6px; position: relative; }
.timeline::before { content: ''; position: absolute; left: 10%; right: 10%; top: 6px; height: 1px; background: var(--hairline); }
.timeline li { text-align: center; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); position: relative; padding-top: 18px; }
.timeline li::before { content: ''; position: absolute; top: 1px; left: 50%; transform: translateX(-50%); width: 11px; height: 11px; border-radius: 50%; background: var(--leaf); border: 2px solid var(--surface-white); box-shadow: 0 0 0 1px var(--leaf); }
.timeline li.now::before { background: var(--surface-white); box-shadow: 0 0 0 1.5px var(--terracotta); }
.timeline li.todo::before { background: var(--surface-white); box-shadow: 0 0 0 1px var(--hairline); }
.timeline li.now { color: var(--forest-ink); }

/* ---------- Numbered list (commodities / verticals) ---------- */
.numlist { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--hairline); }
@media (min-width: 720px) { .numlist { grid-template-columns: 1fr 1fr; column-gap: 64px; } }
.numlist li { display: grid; grid-template-columns: 44px 1fr auto; gap: 16px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--hairline); }
.numlist .num { font-size: 0.72rem; letter-spacing: 0.12em; color: var(--text-dimmed); }
.numlist .name { font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.05; }
.numlist .docs { font-size: 0.78rem; color: var(--text-muted); text-align: right; max-width: 260px; }
@media (max-width: 520px) { .numlist li { grid-template-columns: 36px 1fr; } .numlist .docs { grid-column: 2; text-align: left; } }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--field-light); padding: clamp(24px, 2.6vw, 36px); display: flex; flex-direction: column; }
.band-2 .step { background: var(--field-light); }
.step .label { margin-bottom: 40px; }
.step h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.1vw, 1.95rem); line-height: 1.1; margin-bottom: 12px; }
.step .body-m { margin-top: auto; }
.step__num { font-family: var(--serif); font-size: 3.4rem; line-height: 1; color: var(--text-dimmed); margin-bottom: 22px; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--hairline-dark); border-left: 1px solid var(--hairline-dark); }
@media (min-width: 860px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px); border-right: 1px solid var(--hairline-dark); border-bottom: 1px solid var(--hairline-dark); }
.stat .val { font-family: var(--serif); font-size: clamp(2.6rem, 5vw, 4.5rem); line-height: 1; letter-spacing: -0.02em; }
.stat .cap { margin-top: 10px; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6); }

/* ---------- Principles (Depth / Ownership / Breadth) ---------- */
.principles { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--hairline); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
@media (min-width: 860px) { .principles { grid-template-columns: repeat(3, 1fr); } }
.principle { background: var(--paper-cream); padding: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px) clamp(28px, 3vw, 44px) 0; }
.principle + .principle { padding-left: clamp(20px, 2.4vw, 36px); }
.principle .label { margin-bottom: 26px; display: block; }
.principle h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.05; margin-bottom: 14px; }

/* ---------- Quote ---------- */
.quote { max-width: 980px; margin: 0 auto; text-align: center; }
.quote blockquote { margin: 0; font-family: var(--serif); font-size: clamp(1.6rem, 2.8vw, 2.5rem); line-height: 1.25; letter-spacing: -0.015em; }
.quote figcaption { margin-top: 28px; }
.quote figcaption .label { display: block; }

/* ---------- Video ---------- */
.video-frame { border: 1px solid var(--hairline); background: var(--forest-ink); position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.video-frame video { width: 100%; height: 100%; object-fit: cover; }
.video-frame__cap { display: flex; justify-content: space-between; padding: 14px 0 0; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }

/* ---------- CTA band ---------- */
.cta { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 960px) { .cta { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 80px; align-items: start; } }
.cta .lede { margin-top: 22px; }
.cta__list { margin-top: 36px; border-top: 1px solid var(--hairline-dark); }
.cta__list li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--hairline-dark); font-size: 0.95rem; color: rgba(255,255,255,0.82); }
.cta__list .num { font-family: var(--serif); color: rgba(255,255,255,0.5); }
.cta__list b { display: block; color: #fff; font-weight: 500; margin-bottom: 2px; }
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 8px; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.62); }
.form input, .form textarea {
  width: 100%; font: inherit; font-size: 0.95rem; color: #fff;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.22);
  padding: 13px 14px; outline: none; transition: border-color .2s, background .2s;
}
.form input:focus, .form textarea:focus { border-color: #fff; background: rgba(255,255,255,0.08); }
.form textarea { min-height: 120px; resize: vertical; }
.form input.touched:invalid, .combo input.touched:invalid { border-color: var(--madder); }
.form .field-msg { display: none; font-size: 0.78rem; letter-spacing: 0; text-transform: none; color: #F3B9AE; }
.form label:has(input.touched:invalid) .field-msg { display: block; }
.form .btn { justify-self: start; margin-top: 6px; }
.form__msg { display: none; font-size: 0.9rem; padding-top: 8px; color: rgba(255,255,255,0.82); }
.form__msg.show { display: block; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--hairline); padding: clamp(48px, 6vw, 88px) 0 32px; }
.footer__top { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 900px) { .footer__top { grid-template-columns: minmax(0, 8fr) repeat(2, minmax(0, 2fr)); gap: 48px; } }
.footer__brand p { margin-top: 18px; max-width: 30em; }
.footer h4 { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; }
.footer li { padding: 5px 0; font-size: 0.92rem; color: var(--ink-2); }
.footer li a:hover { color: var(--forest-ink); text-decoration: underline; text-underline-offset: 3px; }
.footer__tag { font-family: var(--serif); font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1.1; margin-top: clamp(40px, 5vw, 72px); padding-top: 32px; border-top: 1px solid var(--hairline); }
.footer__bottom { display: flex; align-items: center; gap: 20px 32px; flex-wrap: wrap; margin-top: clamp(40px, 5vw, 64px); padding-top: 20px; border-top: 1px solid var(--hairline); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.footer__right { margin-left: auto; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.footer__bottom > ul, .footer__right > ul { display: flex; gap: 20px; flex-wrap: wrap; }
.footer__bottom > ul > li, .footer__right > ul > li { padding: 0; font-size: inherit; color: inherit; }
.badges { display: flex; gap: 10px; flex-wrap: wrap; }
.badges span { padding: 5px 8px; border: 1px solid var(--hairline); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }

/* ---------- Page hero (subpages) ---------- */
.page-hero { padding: clamp(56px, 7vw, 104px) 0 clamp(48px, 6vw, 88px); }
.page-hero .label { display: block; margin-bottom: 24px; }
.page-hero .lede { margin-top: 26px; }
.page-hero .display-xl { max-width: 14em; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--hairline); max-width: 860px; }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; text-align: left; font-family: var(--serif); font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.2; }
.faq__q .plus { width: 14px; height: 14px; position: relative; flex: none; }
.faq__q .plus::before, .faq__q .plus::after { content: ''; position: absolute; background: var(--forest-ink); left: 0; top: 6.5px; width: 14px; height: 1px; }
.faq__q .plus::after { transform: rotate(90deg); transition: transform .25s; }
.faq__item.open .plus::after { transform: rotate(0); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease); }
.faq__a p { padding: 0 40px 24px 0; color: var(--ink-2); }

/* ---------- Values (company) ---------- */
.values { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--hairline); }
.values li { display: grid; grid-template-columns: 110px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
.values .label { padding-top: 6px; }
.values .txt { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.12; }
@media (max-width: 520px) { .values li { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Request received (form success state) ---------- */
.received { display: none; border: 1px solid rgba(255,255,255,0.35); padding: clamp(24px, 3vw, 40px); max-width: 480px; }
.received.show { display: block; }
.received .label { display: block; margin-bottom: 26px; color: rgba(255,255,255,0.62); }
.received h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 2.6vw, 2.4rem); line-height: 1.12; letter-spacing: -0.015em; color: #fff; margin-bottom: 16px; text-wrap: balance; }
.received p { font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,0.78); }
.received a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.5); }
.received a:hover { border-color: #fff; }
.form.hidden { display: none; }



/* ---------- Farm-to-factory chain ---------- */
.chain { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--hairline); }
@media (min-width: 720px) { .chain { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .chain { grid-template-columns: repeat(6, 1fr); } }
.chain__stage { position: relative; padding: 28px 22px 32px 0; border-bottom: 1px solid var(--hairline); }
@media (min-width: 720px) { .chain__stage { padding-right: 28px; border-bottom: 0; } .chain__stage + .chain__stage { padding-left: 28px; border-left: 1px solid var(--hairline); } }
.chain__stage::before { content: ''; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--field-lime); border: 1.5px solid var(--forest-ink); }
@media (min-width: 720px) { .chain__stage + .chain__stage::before { left: 28px; } }
.chain__stage.factory::before { background: var(--factory-graphite); }
.chain__stage .label { display: block; margin-bottom: 14px; }
.chain__stage h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.4rem, 1.7vw, 1.75rem); line-height: 1.1; margin-bottom: 14px; }
.chain__stage ul { display: grid; gap: 6px; }
.chain__stage li { font-size: 0.86rem; color: var(--ink-2); padding-left: 14px; position: relative; line-height: 1.45; }
.chain__stage li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 1px; background: var(--soil); }
.chain__ends { display: flex; justify-content: space-between; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 18px; }

/* ---------- Language switcher (footer) ---------- */
.lang { position: relative; display: inline-block; }
.lang__btn { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border: 1px solid var(--hairline); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); background: transparent; transition: color .2s, border-color .2s; }
.lang__btn:hover { color: var(--forest-ink); border-color: var(--forest-ink); }
.lang__caret { font-size: 0.6rem; transition: transform .2s; }
.lang.open .lang__caret { transform: rotate(180deg); }
.lang .lang__menu { position: absolute; right: 0; bottom: calc(100% + 8px); min-width: 200px; background: var(--surface-white); border: 1px solid var(--hairline); box-shadow: 0 24px 48px -28px rgba(16,33,23,0.35); display: none; z-index: 80; }
.lang.open .lang__menu { display: block; }
.lang__menu li { padding: 0; border-bottom: 1px solid var(--hairline); }
.lang__menu li:last-child { border-bottom: 0; }
.lang__menu a { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; font-size: 0.95rem; letter-spacing: 0; text-transform: none; color: var(--text-muted); transition: color .2s, background .2s; }
.lang__menu a:hover { color: var(--forest-ink); background: var(--field-light); }
.lang__menu li.on a { color: var(--forest-ink); background: var(--paper-cream); }
.lang__menu li.on a::after { content: '✓'; font-size: 0.85rem; }
.footer__bottom .lang { margin-left: 4px; }
.i18n-loading body { visibility: hidden; }
/* Devanagari fallbacks: serif headings and sans body keep their voice in Hindi */
html[lang="hi"] .display-xl, html[lang="hi"] .display-l, html[lang="hi"] .display-m, html[lang="hi"] .display-s,
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3, html[lang="hi"] .serif, html[lang="hi"] .tile__title, html[lang="hi"] .panel__title,
html[lang="hi"] .manifesto p, html[lang="hi"] .quote blockquote, html[lang="hi"] .numlist .name, html[lang="hi"] .stat .val, html[lang="hi"] .footer__tag, html[lang="hi"] .commodities span, html[lang="hi"] .received h3, html[lang="hi"] .values .txt {
  font-family: 'Instrument Serif', 'Noto Serif Devanagari', serif; line-height: 1.15;
}
html[lang="hi"] body, html[lang="hi"] .label, html[lang="hi"] .btn, html[lang="hi"] .link, html[lang="hi"] .nav__links a { font-family: 'Inter', 'Noto Sans Devanagari', system-ui, sans-serif; }
html[lang="hi"] .label, html[lang="hi"] .btn, html[lang="hi"] .announce, html[lang="hi"] .nav__links a, html[lang="hi"] .lang__btn { letter-spacing: 0.04em; }

/* ---------- Book a demo page ---------- */
.demo-nav { border-bottom: 1px solid var(--hairline); }
.demo { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - 65px); }
@media (min-width: 1000px) { .demo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.demo__form { padding: clamp(40px, 6vw, 96px) var(--gutter); display: flex; align-items: safe center; }
.demo__form-inner { width: 100%; max-width: 480px; margin: 0 auto; }
@media (min-width: 1000px) { .demo__form-inner { margin: 0 0 0 auto; padding-right: clamp(24px, 4vw, 72px); } }
.demo__form .display-l { margin-bottom: 14px; }
.demo__form .lede { margin-bottom: 36px; }
.steps-ind { display: flex; gap: 24px; margin-bottom: 40px; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dimmed); }
.steps-ind li { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid transparent; }
.steps-ind li span { font-family: var(--serif); font-size: 0.95rem; letter-spacing: 0; }
.steps-ind li.on { color: var(--forest-ink); border-bottom-color: var(--forest-ink); }
.steps-ind li.done { color: var(--text-muted); }
.dstep { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 18px; }
.dstep[hidden], .demo [hidden] { display: none !important; }
.fld { display: grid; gap: 8px; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.fld__label { display: block; }
.fld input, .fld select, .fld textarea { width: 100%; font: inherit; font-size: 0.98rem; letter-spacing: 0; text-transform: none; color: var(--forest-ink); background: var(--surface-white); border: 1px solid var(--hairline); padding: 13px 14px; outline: none; transition: border-color .2s; -webkit-appearance: none; appearance: none; border-radius: 0; }
.fld select { background-image: linear-gradient(45deg, transparent 50%, var(--forest-ink) 50%), linear-gradient(135deg, var(--forest-ink) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--forest-ink); }
.fld input.touched:invalid { border-color: var(--madder); }
.fld .field-msg { display: none; font-size: 0.78rem; letter-spacing: 0; text-transform: none; color: var(--madder); }
.fld:has(input.touched:invalid) .field-msg { display: block; }
.fld textarea { min-height: 110px; resize: vertical; }
.fld-row { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 560px) { .fld-row { grid-template-columns: 1fr 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip span { display: inline-block; padding: 8px 12px; border: 1px solid var(--hairline); font-size: 0.85rem; letter-spacing: 0; text-transform: none; color: var(--ink-2); background: var(--surface-white); cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.chip input:checked + span { background: var(--forest-ink); border-color: var(--forest-ink); color: var(--paper-cream); }
.chip input:focus-visible + span { outline: 2px solid var(--forest-ink); outline-offset: 2px; }
.dstep .btn { justify-self: start; }
.dstep__note { margin-top: -6px; }
.dstep__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.dstep__actions .link { border-bottom-color: var(--hairline); }
#formErr.form__msg { color: var(--madder); }
#formErr.form__msg a { color: var(--forest-ink); text-decoration: underline; text-underline-offset: 3px; }
.received--light { border-color: var(--forest-ink); }
.received--light .label { color: var(--text-muted); }
.received--light h3 { color: var(--forest-ink); }
.received--light p { color: var(--ink-2); }
.received--light a { color: var(--forest-ink); border-bottom-color: rgba(16,33,23,0.4); }

.demo__side { background: var(--field-light); border-left: 1px solid var(--hairline); display: flex; flex-direction: column; }
@media (max-width: 999px) { .demo__side { border-left: 0; border-top: 1px solid var(--hairline); } }
.demo__art { flex: 1; min-height: 360px; position: relative; overflow: hidden; padding: clamp(16px, 3vw, 40px); }
.demo__art svg { position: absolute; inset: clamp(16px, 3vw, 40px); width: calc(100% - 2 * clamp(16px, 3vw, 40px)); height: calc(100% - 2 * clamp(16px, 3vw, 40px)); }
.demo__panels { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--hairline); }
@media (min-width: 720px) { .demo__panels { grid-template-columns: 1fr 1fr; } .demo__panel + .demo__panel { border-left: 1px solid var(--hairline); } }
.demo__panel { padding: clamp(28px, 3vw, 48px); }
.demo__panel .display-m { margin-bottom: 14px; }
.demo__panel .display-m em { color: var(--text-muted); font-style: normal; }
.demo__steps { display: grid; gap: 0; }
.demo__steps li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hairline); font-size: 0.9rem; color: var(--ink-2); }
.demo__steps li:last-child { border-bottom: 0; }
.demo__steps .num { font-family: var(--serif); color: var(--text-dimmed); }
.demo__steps b { display: block; font-weight: 500; color: var(--forest-ink); margin-bottom: 2px; }
.demo__strip { border-top: 1px solid var(--hairline); padding: 22px clamp(28px, 3vw, 48px); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.demo__strip .commodities span { font-size: 1.1rem; }

/* ---------- Demo page · forest treatment ---------- */
.demo--dark { background: var(--forest-ink); color: #fff; --art-line: rgba(253,250,239,0.16); --art-path: rgba(253,250,239,0.55); }
.demo--dark .demo__form .display-l { color: #fff; }
.demo--dark .demo__form .display-l em { color: var(--field-lime); }
.demo--dark .lede { color: rgba(255,255,255,0.82); }
.demo--dark .steps-ind { color: rgba(255,255,255,0.45); }
.demo--dark .steps-ind li.on { color: #fff; border-bottom-color: #fff; }
.demo--dark .steps-ind li.done { color: rgba(255,255,255,0.7); }
.demo--dark .fld, .demo--dark .fld__label { color: rgba(255,255,255,0.62); }
.demo--dark .fld input, .demo--dark .fld select, .demo--dark .fld textarea { color: #fff; background-color: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.22); }
.demo--dark .fld input::placeholder, .demo--dark .fld textarea::placeholder { color: rgba(255,255,255,0.4); }
.demo--dark .fld input:focus, .demo--dark .fld select:focus, .demo--dark .fld textarea:focus { border-color: #fff; background-color: rgba(255,255,255,0.08); }
.demo--dark .fld select { background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.demo--dark .fld select option { color: var(--forest-ink); background: #fff; }
.demo--dark .fld input.touched:invalid { border-color: #F3B9AE; }
.demo--dark .fld .field-msg { color: #F3B9AE; }
.demo--dark .chip span { color: rgba(255,255,255,0.85); background: transparent; border-color: rgba(255,255,255,0.3); }
.demo--dark .chip span:hover { border-color: #fff; }
.demo--dark .chip input:checked + span { background: var(--paper-cream); border-color: var(--paper-cream); color: var(--forest-ink); }
.demo--dark .chip input:focus-visible + span { outline-color: var(--paper-cream); }
.demo--dark .dstep__note { color: rgba(255,255,255,0.62); }
.demo--dark .dstep__actions .link { color: #fff; border-bottom-color: rgba(255,255,255,0.4); }
.demo--dark .dstep__actions .link:hover { border-bottom-color: #fff; }
.demo--dark #formErr.form__msg { color: #F3B9AE; }
.demo--dark #formErr.form__msg a { color: #fff; }
.demo--dark .demo__side { background: var(--navy-800); border-left-color: var(--hairline-dark); }
@media (max-width: 999px) { .demo--dark .demo__side { border-top-color: var(--hairline-dark); } }
.demo--dark .demo__panels, .demo--dark .demo__strip { border-top-color: var(--hairline-dark); }
.demo--dark .demo__panel + .demo__panel { border-left-color: var(--hairline-dark); }
.demo--dark .demo__panel .display-m { color: #fff; }
.demo--dark .demo__panel .display-m em { color: rgba(255,255,255,0.55); }
.demo--dark .demo__panel .body-m { color: rgba(255,255,255,0.7); }
.demo--dark .demo__steps li { color: rgba(255,255,255,0.78); border-bottom-color: var(--hairline-dark); }
.demo--dark .demo__steps b { color: #fff; }
.demo--dark .demo__steps .num { color: rgba(255,255,255,0.45); }
.demo--dark .commodities span { color: rgba(255,255,255,0.62); }
.demo--dark .badges span { color: rgba(255,255,255,0.62); border-color: rgba(255,255,255,0.25); }
.demo--dark .demo__art rect[fill="var(--forest-ink)"] { stroke: var(--paper-cream); stroke-width: 1; }
.demo--dark :focus-visible { outline-color: var(--paper-cream); }

/* ---------- Demo page · fit to viewport (no page scroll on desktop) ---------- */
@media (min-width: 1000px) {
  html.demo-fit, html.demo-fit body { height: 100%; overflow: hidden; }
  .demo { height: calc(100vh - 65px); min-height: 0; overflow: hidden; }
  .demo__form { padding: clamp(20px, 3vh, 48px) var(--gutter); overflow-y: auto; }
  .demo__side { height: 100%; overflow: hidden; }
  .demo__art { min-height: 0; flex: 1 1 auto; }
  .demo__panels { flex: 0 0 auto; }
  .demo__strip { flex: 0 0 auto; }
}
.demo__form .display-l { font-size: clamp(2.2rem, 3.6vw, 3.4rem); margin-bottom: 10px; }
.demo__form .lede { margin-bottom: 26px; font-size: 1.05rem; }
.steps-ind { margin-bottom: 28px; }
.dstep { gap: 14px; }
.fld textarea { min-height: 84px; }
.chip span { padding: 6px 10px; font-size: 0.82rem; }
.demo__panel { padding: clamp(20px, 2.4vh, 36px) clamp(24px, 2.6vw, 40px); }
.demo__panel .display-m { font-size: clamp(1.6rem, 2.4vw, 2.2rem); margin-bottom: 10px; }
.demo__steps li { padding: 9px 0; font-size: 0.86rem; }
.demo__strip { padding: 14px clamp(24px, 2.6vw, 40px); }
.demo__strip .commodities { gap: clamp(14px, 1.6vw, 28px); }
.demo__strip .commodities span { font-size: 1rem; }
@media (min-width: 1000px) and (max-height: 820px) {
  .demo__strip { display: none; }
  .demo__panel .body-m { display: none; }
  .demo__form .lede { margin-bottom: 18px; }
  .demo[data-step="2"] .demo__form .lede { display: none; }
  .steps-ind { margin-bottom: 18px; }
  .demo__form .display-l { font-size: clamp(2rem, 3vw, 2.8rem); margin-bottom: 14px; }
  .dstep { gap: 12px; }
  .fld input, .fld select { padding: 10px 12px; }
  .fld textarea { min-height: 64px; }
  .chips { gap: 6px; }
}

/* Demo page · single proof panel (walkthrough steps removed) */
.demo__panels--single { grid-template-columns: 1fr; }
.demo__panels--single .demo__panel { display: grid; grid-template-columns: 1fr; gap: 6px 48px; align-items: start; }

.demo__panels--single .demo__panel .display-m { margin-bottom: 0; }
.demo__panels--single .demo__panel .body-m { max-width: 40em; padding-top: 6px; }
@media (min-width: 1000px) and (max-height: 820px) { .demo__panels--single .demo__panel .body-m { display: block; } }



.fld__head { display: flex; align-items: baseline; gap: 8px; }
.fld__opt { font-size: 0.62rem; letter-spacing: 0.1em; color: var(--text-dimmed); }


/* Hero visual wrapper: art + cards. Cards float over the art on desktop, stack under it on small screens. */
.hero__visual { position: relative; }
@media (min-width: 1000px) {
  .hero__cards { position: absolute; inset: 0; pointer-events: none; }
  .hero__cards .tile { pointer-events: auto; }
}

/* ---------- Hero: thread draws once; photos surface on grid cells and fade away (HappyRobot-style) ---------- */
.hero__art .hero-tiles image { opacity: 0; transition: opacity 2.6s ease-in-out; }
.hero__art .hero-tiles image.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__art .hero-tiles image { transition: none; }
}

/* ---------- Legal pages ---------- */
.legal { max-width: 720px; margin: 0; padding-bottom: clamp(48px, 6vw, 88px); }
.legal p, .legal li { font-size: 1.02rem; line-height: 1.65; color: var(--ink-2); }
.legal p + p { margin-top: 14px; }
.legal h2 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.15; margin: 36px 0 10px; color: var(--forest-ink); letter-spacing: -0.01em; }
.legal ul { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.legal li { padding-left: 18px; position: relative; }
.legal li::before { content: ''; position: absolute; left: 0; top: 12px; width: 8px; height: 1px; background: var(--soil); }
.legal a { color: var(--forest-ink); text-decoration: underline; text-underline-offset: 3px; }
.legal b { font-weight: 500; color: var(--forest-ink); }

/* ---------- Closing CTA band (no form; the demo page has it) ---------- */
.cta-close { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: end; }
@media (min-width: 900px) { .cta-close { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; } }
.cta-close .lede { margin-top: 22px; }
.cta-close__action { display: grid; gap: 18px; justify-items: start; }
@media (min-width: 900px) { .cta-close__action { justify-items: end; text-align: right; } }
.cta-close__action .body-m { color: rgba(255,255,255,0.62); }
.cta-close__action .body-m a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.4); }
.cta-close__action .body-m a:hover { border-bottom-color: #fff; }

/* Homepage hero headline: three deliberate lines, sized to the column */
.hero__h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 4.9vw, 4.6rem); line-height: 1.02; letter-spacing: -0.025em; max-width: none; text-wrap: nowrap; color: var(--forest-ink); }
.hero__h1 br { display: none; }
@media (max-width: 999px) { .hero__h1 { text-wrap: balance; white-space: normal; } .hero__h1 br { display: inline; content: ' '; font-size: 0; } .hero__h1 br::after { content: ' '; font-size: inherit; } }
@media (min-width: 1000px) { .hero__h1 br { display: inline; } .hero__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 24px; } }
.hero__copy { max-width: 700px; }
.hero__copy .lede { margin: 24px 0 32px; }

/* Hero art bleeds to the right edge and fills the hero height on desktop */
@media (min-width: 1000px) {
  .hero__visual { margin-right: calc(-1 * var(--gutter)); }
  .hero__art { min-height: 520px; }
  .hero__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
}

/* Hero: short tagline, then the supporting paragraph */
.hero__copy .hero__tag { margin: 22px 0 12px; color: var(--forest-ink); }
.hero__copy .hero__sub { margin: 0 0 30px; max-width: 34em; }

.cta-close__sub { margin-top: 14px; max-width: 34em; color: rgba(255,255,255,0.72); }

/* Footer: large mark alone, centred against the link columns (HappyRobot-style) */
.footer__brand { display: flex; align-items: center; }
.footer__mark img { width: clamp(72px, 8vw, 120px); height: auto; display: block; }
@media (max-width: 899px) { .footer__brand { margin-bottom: 8px; } .footer__mark img { width: 64px; } }

/* ---------- Big idea band (under the hero) ---------- */
.idea { padding: clamp(48px, 6vw, 80px) 0; }
.idea__h { max-width: 22em; margin-bottom: clamp(28px, 3.5vw, 44px); }
.idea__chain { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 0; font-family: var(--serif); font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1; color: var(--forest-ink); letter-spacing: -0.01em; }
.idea__chain li { display: flex; align-items: center; }
.idea__chain li + li::before { content: ''; display: inline-block; width: clamp(28px, 4vw, 64px); height: 1px; background: var(--art-path); margin: 0 clamp(10px, 1.2vw, 18px); position: relative; }
.idea__chain li + li::after { content: ''; }
.idea__chain li:nth-child(-n+3) { color: var(--forest-ink); }
.idea__chain li:nth-child(n+4) { color: var(--ink-2); }
.idea__chain li:last-child { color: var(--forest-ink); }
.idea__functions { display: flex; flex-wrap: wrap; gap: 8px 0; margin-top: 18px; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.idea__functions li + li::before { content: '·'; margin: 0 12px; color: var(--soil); }
.idea__commodities { margin-top: clamp(28px, 3.5vw, 44px); padding-top: 22px; border-top: 1px solid var(--hairline); display: flex; align-items: baseline; gap: 20px 36px; flex-wrap: wrap; }
.idea__commodities .commodities span { font-size: clamp(1rem, 1.3vw, 1.2rem); color: var(--text-muted); }
@media (max-width: 600px) { .idea__chain { font-size: 1.15rem; } .idea__chain li + li::before { width: 18px; margin: 0 8px; } }

.idea__p { max-width: 40em; margin-top: -6px; }
.idea__keep { margin: 18px 0 clamp(28px, 3.5vw, 44px); color: var(--forest-ink); }
.idea__h { margin-bottom: 18px; }

/* ---------- Commodity strip ---------- */
.cstrip { display: grid; grid-template-columns: 1fr; gap: 18px 48px; align-items: start; }
@media (min-width: 960px) { .cstrip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.cstrip .label { display: block; margin-bottom: 14px; }
.cstrip__list span { font-size: clamp(1.05rem, 1.3vw, 1.25rem); color: var(--forest-ink); }
.cstrip .commodities { gap: 12px clamp(16px, 2vw, 28px); }
.cstrip__note { max-width: 32em; color: var(--ink-2); }
@media (min-width: 960px) { .cstrip__note { padding-top: 26px; } }

/* Band discipline: upstream sections on field tints, downstream on graphite, one lime band per page */
.band-steel .grid { background: var(--hairline); }
.band-steel .card__art { background: var(--surface-white); }
.band-steel .label { color: var(--text-muted); }
.band-3 .quote figcaption .label { color: var(--ink-2); }

.card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__art { height: 180px; }

/* Cards whose parts line up across columns: image, label, headline, body, stat share rows */
@media (min-width: 961px) {
  .grid--rows { grid-template-rows: auto auto auto 1fr auto; }
  .grid--rows > .card { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 14px; }
  .grid--rows > .card .card__foot { margin-top: 0; padding-top: 16px; }
}

/* .steps--rows */
/* Steps: number, headline and body line up across columns */
@media (min-width: 860px) {
  .steps { grid-template-rows: auto auto 1fr; }
  .steps > .step { display: grid; grid-template-rows: subgrid; grid-row: span 3; min-height: 0; }
  .steps > .step .label { margin-bottom: 28px; }
  .steps > .step .body-m { margin-top: 0; align-self: start; }
}

.idea__p--last { margin-bottom: clamp(28px, 3.5vw, 44px); }

/* ---------- Problem band: stage-over-function flow with arrows ---------- */
.idea__h { text-wrap: balance; max-width: 20em; }
.idea__p--last { margin-bottom: clamp(36px, 4.5vw, 56px); }
.flow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--hairline); }
.flow li { position: relative; padding: 22px 24px 4px 0; display: grid; gap: 8px; }
.flow li + li { padding-left: 24px; }
.flow__stage { font-family: var(--serif); font-size: clamp(1.3rem, 1.9vw, 1.8rem); line-height: 1.05; color: var(--forest-ink); letter-spacing: -0.01em; }
.flow__fn { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
/* arrow sits on the top rule, between columns: a terracotta handoff dot and a chevron */
.flow li + li::before { content: ''; position: absolute; left: -4px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta); }
.flow li + li::after { content: ''; position: absolute; left: -26px; top: -4px; width: 6px; height: 6px; border-top: 1.2px solid var(--art-path); border-right: 1.2px solid var(--art-path); transform: rotate(45deg); }
.flow li:nth-child(-n+3) .flow__stage { color: var(--forest-ink); }
@media (max-width: 899px) {
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; row-gap: 0; }
  .flow li, .flow li + li { padding: 16px 16px 16px 0; border-top: 1px solid var(--hairline); }
  .flow li::before, .flow li::after, .flow li + li::before, .flow li + li::after { display: none; }
}

/* A shipment moving through the chain: small dot travels the top rule, pauses, loops */
.flow { position: relative; }
.flow__runner { position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--forest-ink); box-shadow: 0 0 0 4px rgba(16,33,23,0.08); animation: flowRun 30s cubic-bezier(.45,0,.55,1) 1.5s infinite; opacity: 0; pointer-events: none; }
@keyframes flowRun {
  0%   { left: 0; opacity: 0; }
  4%   { opacity: 1; }
  80%  { left: calc(100% - 9px); opacity: 1; }
  86%  { left: calc(100% - 9px); opacity: 0; }
  100% { left: calc(100% - 9px); opacity: 0; }
}
@media (max-width: 899px) { .flow__runner { display: none; } }
@media (prefers-reduced-motion: reduce) { .flow__runner { display: none; } }

/* ---------- Product section: pillars point at parts of the trade file ---------- */
.split--demo { align-items: start; }
@media (min-width: 960px) { .split--demo .panel { margin-top: 0; } }
.split--demo .pillar { cursor: default; transition: opacity .6s ease; }
.split--demo .pillar.is-on h3 { color: var(--forest-ink); }
.split--demo .pillar .num { transition: color .6s ease; }
.split--demo .pillar.is-on .num { color: var(--terracotta); }
.panel__zone { position: relative; transition: opacity .6s ease; }
.panel__zone[data-zone="checks"] { margin-top: 4px; }
.panel__draft { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--hairline); background: var(--paper-cream); }
.draft__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.draft__head .label { font-size: .62rem; }
.draft__review { font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--terracotta); padding: 4px 10px; }
.draft__text { font-size: .86rem; line-height: 1.5; color: var(--ink-2); }
.panel__status { color: var(--soil); }
@media (prefers-reduced-motion: reduce) { .split--demo .pillar, .panel__zone { transition: none; } }

/* Hero fills the first screen (capped on very tall monitors); art matches the text block height */
@media (min-width: 1000px) {
  .hero { min-height: min(calc(100svh - 104px), 780px); display: flex; align-items: center; padding: clamp(32px, 4vh, 64px) 0; }
  .hero > .wrap { width: 100%; }
  .hero__inner { align-items: stretch; }
  .hero__copy { display: flex; flex-direction: column; justify-content: center; }
  .hero__visual, .hero__art { height: 100%; }
  .hero__art { min-height: 0; }
  .hero__art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
}

/* Commodity chips (display only, not interactive) */
.cstrip__h { margin-bottom: 18px; }
.cchips { display: flex; flex-wrap: wrap; gap: 10px; }
.cchips li { padding: 10px 16px; border: 1px solid var(--hairline); background: var(--surface-white); font-size: 0.95rem; color: var(--forest-ink); line-height: 1.2; }
@media (min-width: 960px) { .cstrip { align-items: center; } .cstrip__note { padding-top: 0; } }

.clist { display: flex; flex-wrap: wrap; gap: 6px 0; font-family: var(--serif); font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.3; color: var(--forest-ink); }
.clist li:not(:last-child)::after { content: '·'; margin: 0 12px; color: var(--soil); }

/* Phone: country code + number */
.phone-row { display: grid; grid-template-columns: minmax(0, 12.5em) minmax(0, 1fr); gap: 8px; }
.phone-row select { text-overflow: ellipsis; padding-right: 36px; }
.fld:has(input.touched:invalid) > .field-msg { display: block; }

/* Country code picker (replaces the native select when JS runs) */
.ccp__native { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.phone-row { position: relative; grid-template-columns: auto minmax(0, 1fr); }
.ccp { position: relative; }
.ccp__btn { height: 100%; min-height: 48px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--surface-white); border: 1px solid var(--hairline); font-size: 0.98rem; letter-spacing: 0; text-transform: none; color: var(--forest-ink); transition: border-color .2s; }
.ccp__btn:hover, .ccp.open .ccp__btn { border-color: var(--forest-ink); }
.ccp__cc { font-size: 0.7rem; letter-spacing: 0.12em; color: var(--text-muted); }
.ccp__caret { width: 6px; height: 6px; border-right: 1.3px solid var(--forest-ink); border-bottom: 1.3px solid var(--forest-ink); transform: rotate(45deg) translate(-2px, -2px); margin-left: 2px; transition: transform .2s; }
.ccp.open .ccp__caret { transform: rotate(225deg) translate(-2px, -2px); }
.ccp__pop { position: absolute; left: 0; top: calc(100% + 6px); z-index: 90; width: 250px; background: var(--surface-white); border: 1px solid var(--hairline); box-shadow: 0 24px 48px -28px rgba(16,33,23,0.35); }
.ccp__search { width: 100%; border: 0; border-bottom: 1px solid var(--hairline); padding: 9px 12px; font: inherit; font-size: 0.86rem; letter-spacing: 0; text-transform: none; color: var(--forest-ink); background: var(--paper-cream); outline: none; }
.ccp__list { max-height: 196px; overflow-y: auto; padding: 2px 0; }
.ccp__list li[role="option"] { display: flex; justify-content: space-between; gap: 12px; padding: 6px 12px; font-size: 0.85rem; letter-spacing: 0; text-transform: none; color: var(--ink-2); cursor: pointer; }
.ccp__list li[role="option"]:hover, .ccp__list li.is-active { background: var(--field-light); color: var(--forest-ink); }
.ccp__list li[aria-selected="true"] { color: var(--forest-ink); font-weight: 500; }
.ccp__dial { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ccp__sep { height: 1px; background: var(--hairline); margin: 4px 0; }
.ccp__none { padding: 12px 14px; font-size: 0.9rem; letter-spacing: 0; text-transform: none; color: var(--text-muted); }
@media (max-width: 520px) { .ccp__pop { width: min(300px, calc(100vw - 40px)); } }
.ccp.up .ccp__pop { top: auto; bottom: calc(100% + 6px); }