/* Version 2 — Greenline: bright, rounded, leaf green. Split hero with layered photos,
   inset image cards, light globe, process as cards. One sans family throughout. */
:root[data-variant="greenline"] {
  --chaff-50: #ffffff;
  --chaff-100: #f5f7f1;
  --chaff-200: #e8eee3;
  --chaff-300: #d3dccb;
  --chaff-400: #b3c0a8;
  --loam-950: #0b140e;
  --loam-900: #102017;
  --loam-800: #14251b;
  --loam-700: #233a2b;
  --loam-600: #42574a;
  --loam-500: #5b6e62;
  --barley-200: #dcebd3;
  --barley-300: #a8d08f;
  --barley-400: #2f7a45;
  --barley-500: #276a3b;
  --barley-700: #1f5a32;
  --accent-ink: #ffffff;
  --accent-hover: #276a3b;
  --line: rgb(20 37 27 / 0.12);
  --line-strong: rgb(20 37 27 / 0.26);

  --font-display: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-text: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --fs-base: 1.0625rem;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --shadow-ring: 0 0 0 1px rgb(20 37 27 / 0.06), 0 1px 3px rgb(20 37 27 / 0.06);
  --shadow-lift: 0 0 0 1px rgb(20 37 27 / 0.06), 0 18px 40px -18px rgb(20 37 27 / 0.3);

  --globe-dark: 0;
  --globe-diffuse: 1.6;
  --globe-map-brightness: 7;
  --globe-map-base: 0;
  --globe-base: 0.96 0.98 0.94;
  --globe-marker: 0.18 0.48 0.27;
  --globe-glow: 0.86 0.92 0.83;
}

:root[data-variant="greenline"] h1,
:root[data-variant="greenline"] h2,
:root[data-variant="greenline"] h3 { font-weight: 700; letter-spacing: -0.03em; }
:root[data-variant="greenline"] .eyebrow,
:root[data-variant="greenline"] .mono,
:root[data-variant="greenline"] .fact dt,
:root[data-variant="greenline"] .step-num { font-weight: 600; letter-spacing: 0.06em; }
:root[data-variant="greenline"] .eyebrow {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--barley-200);
  color: var(--barley-700);
}
:root[data-variant="greenline"] .eyebrow::before { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--barley-400); }
:root[data-variant="greenline"] .site-footer .eyebrow { background: rgb(168 208 143 / 0.14); color: var(--barley-300); }

/* Brand mark */
:root[data-variant="greenline"] .site-header .brand-mark rect { fill: var(--barley-400); }
:root[data-variant="greenline"] .site-header .brand-mark path:first-of-type { stroke: #dcebd3; }

/* Hero: copy left, layered photos right */
:root[data-variant="greenline"] .hero { min-height: 0; display: block; padding-bottom: var(--sp-6); }
:root[data-variant="greenline"] .hero-media { display: none; }
:root[data-variant="greenline"] .hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: center;
  padding-top: calc(var(--header-h) + clamp(1.5rem, 1rem + 3vw, 3.5rem));
}
:root[data-variant="greenline"] .hero-copy { padding: 0; }
:root[data-variant="greenline"] .hero-title {
  font-size: clamp(2.75rem, 1.5rem + 4vw, 5.25rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.045em;
}
:root[data-variant="greenline"] .hero-title em { color: var(--barley-400); }
:root[data-variant="greenline"] .hero-lede { color: var(--loam-600); }
:root[data-variant="greenline"] .hero-actions .btn:not(.btn-primary) { background: var(--chaff-50); -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-variant="greenline"] .hero-gallery { display: block; position: relative; }
:root[data-variant="greenline"] .hg-wheat-sky {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: 40% 50%;
  border-radius: 32px;
}
:root[data-variant="greenline"] .hg-wheat-grain {
  display: block;
  position: absolute;
  left: -3rem;
  bottom: 2.5rem;
  width: 42%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 22px;
  border: 6px solid var(--chaff-50);
  box-shadow: 0 20px 40px -16px rgb(20 37 27 / 0.45);
}
:root[data-variant="greenline"] .hero-index { padding-top: var(--sp-7); padding-bottom: 0; }
:root[data-variant="greenline"] .index-panel {
  gap: var(--sp-3);
  padding: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root[data-variant="greenline"] .index-panel li { border: 0; }
:root[data-variant="greenline"] .index-link {
  padding: var(--sp-5) var(--sp-4);
  background: var(--chaff-50);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-ring);
  transition: background-color var(--dur-fast) ease-out, box-shadow var(--dur-mid) ease-out;
}
:root[data-variant="greenline"] .index-icon { background: var(--barley-200); color: var(--barley-700); border-radius: 12px; }
@media (hover: hover) and (pointer: fine) {
  :root[data-variant="greenline"] .index-link:hover { background: var(--chaff-50); box-shadow: var(--shadow-lift); }
}
@media (max-width: 52rem) {
  :root[data-variant="greenline"] .hero-main { grid-template-columns: 1fr; gap: var(--sp-6); }
  :root[data-variant="greenline"] .hg-wheat-sky { aspect-ratio: 4 / 3; border-radius: 24px; }
  :root[data-variant="greenline"] .hg-wheat-grain { left: auto; right: var(--sp-4); bottom: calc(var(--sp-5) * -1); width: 38%; border-width: 4px; border-radius: 16px; }
}

/* Company */
:root[data-variant="greenline"] .facts { border-top: 0; gap: var(--sp-3); }
:root[data-variant="greenline"] .fact,
:root[data-variant="greenline"] .fact + .fact {
  padding: var(--sp-5);
  border: 0;
  border-radius: var(--r-md);
  background: var(--chaff-50);
  box-shadow: var(--shadow-ring);
}
:root[data-variant="greenline"] .photo-frame { border-radius: 24px; }

/* Commodities: 2 × 2 cards with inset images */
:root[data-variant="greenline"] .crop:nth-child(n) { grid-column: span 6; }
:root[data-variant="greenline"] .crop { padding: 10px; border-radius: 28px; }
:root[data-variant="greenline"] .crop-media { border-radius: 18px; height: clamp(12rem, 8rem + 9vw, 17rem); }
:root[data-variant="greenline"] .crop-body { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
:root[data-variant="greenline"] .crop-tag { background: var(--chaff-50); color: var(--barley-700); font-weight: 600; }
:root[data-variant="greenline"] .chip { background: var(--chaff-100); }
:root[data-variant="greenline"] .crop-foot { border-top: 0; padding-top: 0; }
:root[data-variant="greenline"] .crop-foot .btn-dark { --btn-bg: var(--barley-400); }
@media (hover: hover) and (pointer: fine) {
  :root[data-variant="greenline"] .crop-foot .btn-dark:hover { --btn-bg: var(--barley-500); }
}
@media (max-width: 40rem) {
  :root[data-variant="greenline"] .crop:nth-child(n) { grid-column: 1 / -1; }
}

/* Panorama: inset, rounded */
:root[data-variant="greenline"] .panorama {
  width: min(calc(100% - var(--gutter) * 2), var(--max));
  margin: var(--section-y) auto 0;
  border-radius: 32px;
  height: clamp(20rem, 10rem + 28vw, 36rem);
}
:root[data-variant="greenline"] .panorama-media::after { background: linear-gradient(0deg, rgb(16 32 23 / 0.7) 0%, rgb(16 32 23 / 0) 60%); }
:root[data-variant="greenline"] .panorama-copy { padding-inline: clamp(1.25rem, 0.5rem + 3vw, 3rem); }

/* Markets: light section, light globe */
:root[data-variant="greenline"] .markets {
  --bg: var(--chaff-100);
  --surface: var(--chaff-50);
  --text: var(--loam-800);
  --text-muted: var(--loam-600);
  --text-subtle: var(--loam-500);
  --line: rgb(20 37 27 / 0.12);
  --line-strong: rgb(20 37 27 / 0.26);
  --accent-text: var(--barley-700);
  --focus: var(--loam-800);
}
:root[data-variant="greenline"] .markets::before { display: none; }
:root[data-variant="greenline"] .markets .btn:hover { --btn-ring: var(--text); }
:root[data-variant="greenline"] .region-btn {
  background: var(--chaff-50);
  box-shadow: var(--shadow-ring);
  color: var(--text-muted);
  border-radius: 14px;
}
:root[data-variant="greenline"] .region-btn[aria-pressed="true"] {
  background: var(--barley-400);
  box-shadow: none;
  color: #fff;
}
:root[data-variant="greenline"] .region-btn[aria-pressed="true"] .region-meta { color: rgb(255 255 255 / 0.75); }
:root[data-variant="greenline"] .region-btn[aria-pressed="true"] .region-dot { background: #fff; box-shadow: inset 0 0 0 1.5px #fff, 0 0 0 4px rgb(255 255 255 / 0.25); }
@media (hover: hover) and (pointer: fine) {
  :root[data-variant="greenline"] .region-btn:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
  :root[data-variant="greenline"] .region-btn[aria-pressed="true"]:hover { color: #fff; box-shadow: none; background: var(--barley-500); }
}
:root[data-variant="greenline"] .region-detail { background: var(--chaff-50); box-shadow: var(--shadow-ring); border-radius: var(--r-lg); }
:root[data-variant="greenline"] .region-dest .icon { color: var(--barley-400); }
:root[data-variant="greenline"] .globe-stage::before { background: radial-gradient(circle at 38% 34%, #ffffff 0%, #eef3ea 70%); box-shadow: 0 30px 60px -20px rgb(20 37 27 / 0.25); }
:root[data-variant="greenline"] .globe-label { background: #fff; color: var(--loam-800); box-shadow: 0 0 0 1px rgb(47 122 69 / 0.4), 0 4px 10px -4px rgb(20 37 27 / 0.3); font-family: var(--font-display); font-weight: 600; }

/* Process: three cards */
:root[data-variant="greenline"] .step {
  padding: var(--sp-6);
  background: var(--chaff-50);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-ring);
}
:root[data-variant="greenline"] .step::before { display: none; }
:root[data-variant="greenline"] .step-marker {
  position: static;
  margin-bottom: var(--sp-5);
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  color: #fff;
}
@media (max-width: 52rem) {
  :root[data-variant="greenline"] .step { padding: var(--sp-5); padding-inline-start: var(--sp-5); }
}

/* Contact */
:root[data-variant="greenline"] .notice { background: var(--barley-200); }
:root[data-variant="greenline"] .notice .icon { color: var(--barley-700); }
:root[data-variant="greenline"] .badge { background: var(--barley-200); color: var(--barley-700); }
:root[data-variant="greenline"] .input { background: var(--chaff-100); border-color: transparent; box-shadow: inset 0 0 0 1px var(--line); }
:root[data-variant="greenline"] .input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--danger); }
:root[data-variant="greenline"] .input:focus-visible { background: #fff; }
:root[data-variant="greenline"] .form-card { border-radius: 28px; }

/* Footer */
:root[data-variant="greenline"] .site-footer { background: var(--loam-900); }
:root[data-variant="greenline"] .site-footer .brand-mark rect { fill: var(--barley-300); }
:root[data-variant="greenline"] .site-footer .brand-mark path { stroke: var(--loam-900); }