/* ==========================================================================
   Agro Trading Company — styles.css
   Palette derived from the company logo: deep forest green + warm cream.
   ========================================================================== */

:root {
  --green-900: #12271c;
  --green-800: #1a3a28;
  --green-700: #1e4430;
  --green-600: #245136;
  --green-300: #7a9b87;
  --cream-50: #fdfbf7;
  --cream-100: #f8f0e5;
  --cream-200: #efe5d6;
  --gold: #c9a227;
  --corr-east: #c9a227;
  /* west and sea share one blue trunk on the map and the globe */
  --corr-west: #7fb6ce;
  --corr-sea: #7fb6ce;
  /* the same three hues, darkened to read on the cream background */
  --corr-east-ink: #a8871c;
  --corr-west-ink: #2f6e8f;
  --corr-sea-ink: #2f6e8f;
  --on-dark: #c9d2c9;
  --gold-text: #8f7318; /* accessible gold for text on cream */
  --ink: #1c1c1a;
  --ink-muted: #5c5f58;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --maxw: 1200px;
  --gutter: 24px;
  --section-y: 64px;
  /* cap-height offset of the .eyebrow label; see the split section notes */
  --eyebrow-cap: 0.325rem;
  --h2-baseline-offset: 3.36rem;
  --radius: 2px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--cream-50);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  /* clip, never hidden: overflow-x: hidden on the body turns it into a scroll
     container and silently kills position: sticky further down the page */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img,
svg {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: inherit;
}
button {
  font: inherit;
}
h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 600;
  /* Fraunces is variable: a high optical size sharpens the display cut */
  font-variation-settings: "opsz" 120, "SOFT" 0, "WONK" 0;
  line-height: 1.14;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h3,
h4 {
  font-weight: 560;
  font-variation-settings: "opsz" 48, "SOFT" 0, "WONK" 0;
}
p {
  margin: 0 0 1.1em;
}
p:last-child {
  margin-bottom: 0;
}
ul {
  margin: 0;
  padding: 0;
}

/* ---------- type ---------- */
h1 {
  font-size: clamp(2rem, 4vw, 3rem);
}
h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.25rem);
}
h3 {
  font-size: 1.25rem;
}


.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold-text);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--gold);
  flex: none;
}
.on-dark .eyebrow,
.eyebrow--dark {
  color: var(--gold);
}
.lead {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 62ch;
}
.muted {
  color: var(--ink-muted);
}
.caption {
  font-size: 0.8rem;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: var(--section-y);
}
@media (min-width: 900px) {
  .section {
    padding-block: 120px;
  }
  .section + .section:not(.section--tight) {
    padding-top: 60px;
  }
  .section:not(.section--tight):has(+ .section) {
    padding-bottom: 60px;
  }
}
.section--tight {
  padding-block: clamp(3rem, 5vw, 4.5rem);
}
.section--cream {
  background: var(--cream-100);
}
.section--green {
  background: var(--green-800);
  color: var(--cream-50);
}
.section--green h2,
.section--green h3 {
  color: #fff;
}
.divider {
  height: 1px;
  background: var(--cream-200);
  border: 0;
  margin: 0;
}

/* skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--green-700);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

figure {
  margin: 0;
}

/* sticky header offset for in-page anchors and programmatic focus: nothing may
   come to rest behind the header */
html {
  scroll-padding-top: calc(var(--hdr, 76px) + 1.5rem);
}
[id] {
  scroll-margin-top: calc(var(--hdr, 76px) + 1.5rem);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.section--green :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible {
  outline-color: var(--gold);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.95rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.btn--primary {
  background: var(--cream-100);
  color: var(--green-900);
  border-color: var(--cream-100);
}
.btn--primary:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--green-900);
}
.btn--outline {
  background: transparent;
  color: #fff;
  border-color: rgba(248, 240, 229, 0.55);
}
.btn--outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.btn--dark {
  background: var(--green-700);
  color: #fff;
  border-color: var(--green-700);
}
.btn--dark:hover {
  background: var(--green-900);
  border-color: var(--green-900);
}
.btn--ghost {
  background: transparent;
  color: var(--green-700);
  border-color: var(--cream-200);
}
.btn--ghost:hover {
  border-color: var(--green-700);
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--green-700);
  text-decoration: none;
  border-bottom: 1px solid var(--cream-200);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.textlink:hover {
  color: var(--gold-text);
  border-color: var(--gold);
}
.textlink svg {
  width: 14px;
  height: 14px;
  flex: none;
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--green-700);
  transition: box-shadow 0.3s var(--ease);
}
.site-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(18, 39, 28, 0.28);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
  padding-block: 0.75rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--cream-50);
  flex: none;
}
.brand img {
  width: 38px;
  height: 40px;
  object-fit: contain;
  flex: none;
}
.brand__word {
  font-family: var(--serif);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}
@media (min-width: 480px) {
  .brand__word {
    font-size: 0.94rem;
    letter-spacing: 0.15em;
  }
}
@media (min-width: 1100px) {
  .brand__word {
    font-size: 1rem;
  }
}

.nav {
  display: none;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  list-style: none;
}
.nav__link {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(253, 251, 247, 0.86);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
  white-space: nowrap;
}
.nav__link:hover {
  color: #fff;
  border-color: rgba(201, 162, 39, 0.6);
}
.nav__link[aria-current="page"] {
  color: #fff;
  border-color: var(--gold);
}
.nav__list li:last-child {
  margin-left: auto;
}
.nav__cta {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.nav__cta:hover,
.nav__cta:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--green-900);
}
.nav__cta[aria-current="page"] {
  background: var(--gold);
  color: var(--green-900);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: 1px solid rgba(248, 240, 229, 0.35);
  color: var(--cream-50);
  border-radius: var(--radius);
  padding: 0.55rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle__bars {
  position: relative;
  width: 18px;
  height: 12px;
  flex: none;
}
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle__bars span:nth-child(1) {
  top: 0;
}
.nav-toggle__bars span:nth-child(2) {
  top: 5px;
}
.nav-toggle__bars span:nth-child(3) {
  top: 10px;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

.mobile-nav {
  display: block;
  background: var(--green-800);
  border-top: 1px solid rgba(122, 155, 135, 0.28);
  overflow: hidden;
  max-height: 0;
  /* visibility keeps collapsed links out of the tab order */
  visibility: hidden;
  transition: max-height 0.35s var(--ease), visibility 0s linear 0.35s;
}
.mobile-nav[hidden] {
  display: block;
}
.mobile-nav.is-open {
  max-height: 32rem;
  visibility: visible;
  transition: max-height 0.35s var(--ease), visibility 0s linear 0s;
}
.mobile-nav__list {
  list-style: none;
  padding: 0.5rem var(--gutter) 1.5rem;
}
.mobile-nav__list a {
  display: block;
  padding: 0.95rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(253, 251, 247, 0.9);
  text-decoration: none;
  border-bottom: 1px solid rgba(122, 155, 135, 0.2);
}
.mobile-nav__list a[aria-current="page"] {
  color: var(--gold);
}
.mobile-nav__meta {
  padding: 1.25rem var(--gutter) 1.75rem;
  border-top: 1px solid rgba(122, 155, 135, 0.2);
  color: var(--green-300);
  font-size: 0.85rem;
}
.mobile-nav__meta a {
  color: var(--cream-100);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 39, 0.5);
}

@media (min-width: 940px) {
  .nav {
    display: block;
  }
  .nav-toggle {
    display: none;
  }
  .mobile-nav {
    display: none !important;
  }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 82vh;
  color: #fff;
  background: var(--green-900);
  overflow: hidden;
}
.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to top,
      rgba(18, 39, 28, 0.92) 0%,
      rgba(18, 39, 28, 0.72) 42%,
      rgba(18, 39, 28, 0.45) 100%
    ),
    linear-gradient(to right, rgba(18, 39, 28, 0.6), rgba(18, 39, 28, 0.15));
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 8vw, 7rem);
  width: 100%;
}
.hero__content {
  max-width: 44rem;
}
.hero h1 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  color: #fff;
  margin-bottom: 1.1rem;
}
.hero__sub {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.55;
  color: rgba(248, 240, 229, 0.9);
  max-width: 38rem;
  margin: 0;
}

/* page hero (interior pages) */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 46vh;
  color: #fff;
  background: var(--green-800);
  overflow: hidden;
}
.page-hero--short {
  min-height: 34vh;
}
.page-hero--duo {
  min-height: 40vh;
}
.page-hero--duo .page-hero__media img {
  filter: saturate(0.7) contrast(1.04);
}
.page-hero__duo {
  position: absolute;
  inset: 0;
  background: var(--green-700);
  mix-blend-mode: multiply;
  opacity: 0.8;
}
/* the duotone alone is not enough for text, so keep a light reading scrim */
.page-hero--duo .page-hero__media::after {
  background: linear-gradient(
    to top,
    rgba(18, 39, 28, 0.72) 0%,
    rgba(18, 39, 28, 0.34) 62%,
    rgba(18, 39, 28, 0.12) 100%
  );
}
.page-hero--duo h1 {
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  line-height: 1.04;
}
.page-hero__sub {
  max-width: 52ch;
}
.page-hero__media,
.page-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(18, 39, 28, 0.92) 0%,
    rgba(18, 39, 28, 0.7) 58%,
    rgba(18, 39, 28, 0.62) 100%
  );
}
/* the photograph's own top edge is light, which read as a beige strip under the
   header; this fades the image into the header green so they meet directly */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(90px, 14vh, 150px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--green-700) 0%,
    rgba(30, 68, 48, 0.72) 42%,
    rgba(30, 68, 48, 0) 100%
  );
}
.page-hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(3rem, 6vw, 5rem);
  width: 100%;
}
.page-hero h1 {
  color: #fff;
  margin-bottom: 0.7rem;
}
.page-hero p {
  color: rgba(248, 240, 229, 0.9);
  max-width: 46rem;
  font-size: 1.05rem;
  margin: 0;
}
.crumbs {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.crumbs a {
  color: rgba(248, 240, 229, 0.75);
  text-decoration: none;
}
.crumbs a:hover {
  color: #fff;
}

/* ---------- stats band ---------- */
.stats {
  background: var(--green-800);
  color: var(--cream-50);
  padding-block: clamp(3rem, 5vw, 4.25rem);
}
.stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.stats .eyebrow {
  margin-bottom: 1.6rem;
}
.stats__note {
  margin: 1.6rem 0 0;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgba(248, 240, 229, 0.62);
  max-width: 46ch;
}
.stat {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(122, 155, 135, 0.3);
}
.stat:last-child {
  border-bottom: 0;
}
.stat__value {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
  display: block;
  white-space: nowrap;
  hyphens: none;
}
@media (max-width: 380px) {
  .stat__value {
    font-size: 2.1rem;
  }
}
.stat__label {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-300);
}
@media (min-width: 640px) {
  .stats__grid {
    grid-template-columns: 1fr 1fr;
    gap: 0 clamp(1.5rem, 4vw, 3rem);
  }
  .stat {
    border-bottom: 1px solid rgba(122, 155, 135, 0.3);
  }
  .stat:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}
@media (min-width: 1000px) {
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .stat {
    border-bottom: 0;
    border-left: 1px solid rgba(122, 155, 135, 0.3);
    padding: 0.25rem 0 0.25rem clamp(1.25rem, 2vw, 1.75rem);
  }
  .stat:first-child {
    border-left: 0;
    padding-left: 0;
  }
}

/* ---------- pillars (3 col with icons) ---------- */
.pillars {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .pillars {
    grid-template-columns: repeat(3, 1fr);
  }
}
.pillar__icon {
  width: 40px;
  height: 40px;
  color: var(--green-700);
  margin-bottom: 1.25rem;
}
.pillar h3 {
  margin-bottom: 0.5rem;
}
.pillar p {
  color: var(--ink-muted);
  font-size: 0.97rem;
}
.pillar {
  padding-top: 1.5rem;
  border-top: 2px solid var(--green-700);
}

/* ---------- split (asymmetric image/text) ---------- */
/* ---------- split sections (text + media) ----------
   One 12-column system for every text+media section on the site: text spans 5,
   a single column is left empty as the gutter, media spans 6. Sides alternate
   per section via .split--reverse. */
.split {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: repeat(12, 1fr);
    column-gap: 0;
    /* rows must not stretch: the media aligns to the eyebrow, not to centre */
    align-items: start;
  }
  /* both columns are explicitly on row 1 so DOM order never forces a new row */
  .split__body,
  .split__media {
    grid-row: 1;
  }
  .split__body {
    grid-column: 1 / span 5;
  }
  .split__media {
    grid-column: 7 / span 6;
  }
  .split--reverse .split__media {
    grid-column: 1 / span 6;
  }
  .split--reverse .split__body {
    grid-column: 8 / span 5;
  }
  /* two text columns, no media */
  .split--wide-text .split__body:first-child {
    grid-column: 1 / span 5;
  }
  .split--wide-text .split__body:last-child {
    grid-column: 7 / span 6;
  }

  /* THE ALIGNMENT RULE
     The media box starts at the cap-height of the eyebrow label, not at the
     heading and not at its own box edge. The eyebrow is 0.75rem/1.6, so its
     line box is 19.2px tall and Inter's cap height is 0.727em = 8.7px; the
     cap therefore begins (19.2 - 8.7) / 2 = 5.2px below the line box top. */
  .split__media {
    margin-top: var(--eyebrow-cap, 0.325rem);
  }

  /* Second text column aligned to the first column's H2 baseline rather than
     to its eyebrow, which otherwise reads as a mistake. */
  .split--baseline .split__body:last-child {
    padding-top: var(--h2-baseline-offset, 2.55rem);
  }
}

/* ---------- media boxes: one treatment everywhere ---------- */
.split__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.split__media figcaption {
  margin-top: 0.75rem;          /* 12px below the image */
  font-size: 0.8125rem;         /* 13px */
  line-height: 1.5;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
  text-align: left;
}
.split__body p {
  color: var(--ink-muted);
}
.split__body h2 {
  color: var(--ink);
}
.split__body > *:first-child {
  margin-top: 0;
}

/* ---------- media that bleeds to the viewport edge ----------
   The text column stays inside the grid; the media runs out to the edge of the
   window. The offset is the exact distance from the wrap's content edge to the
   viewport edge, in both the capped and the narrow regime. */
@media (min-width: 900px) {
  .split--bleed .split__media {
    margin-right: calc(-1 * (max(0px, 100vw - var(--maxw)) / 2 + var(--gutter)));
  }
  .split--bleed .split__media img {
    border-radius: 0;
    aspect-ratio: 3 / 2;
  }
  .split--bleed .split__media figcaption {
    padding-right: calc(max(0px, 100vw - var(--maxw)) / 2 + var(--gutter));
  }
}
/* a bleeding child must never create a horizontal scrollbar */
.section--bleed {
  overflow-x: clip;
}

/* ---------- commodity cards ---------- */
.commodity-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .commodity-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ccard__img {
    aspect-ratio: 4 / 3;
  }
}
@media (min-width: 1000px) {
  .commodity-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  /* every card is the same width; the trailing row of two is centred on the
     grid rather than stretched to fill it */
  .commodity-grid > * {
    grid-column: span 2;
  }
  .commodity-grid > *:nth-child(4) {
    grid-column: 2 / span 2;
  }
  .commodity-grid > *:nth-child(5) {
    grid-column: 4 / span 2;
  }
}
.ccard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--cream-200);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.ccard:hover,
.ccard:focus-within {
  border-color: var(--green-700);
  transform: translateY(-3px);
}
.ccard__img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.ccard__body {
  padding: 1.25rem 1.35rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}
.ccard__name {
  font-family: var(--serif);
  font-variation-settings: "opsz" 48, "SOFT" 0, "WONK" 0;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
}
.ccard__vol {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--green-700);
}
.ccard__dest {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* quiet per-card link; its stretched hit area makes the whole card clickable */
.ccard__act {
  margin: auto 0 0;
  padding-top: 1rem;
}
.ccard__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold-text);
  text-decoration: none;
}
.ccard__link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.25s var(--ease);
}
.ccard__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.ccard:hover .ccard__link svg,
.ccard__link:focus-visible svg {
  transform: translateX(3px);
}
.ccard__link:focus-visible {
  outline: none;
}
.ccard:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* full-width alternating commodity rows */
.crow {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: 1fr;
  padding-block: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid var(--cream-200);
}
.crow:first-of-type {
  border-top: 0;
  padding-top: 0;
}
@media (min-width: 860px) {
  .crow {
    grid-template-columns: 1fr 1fr;
  }
  .crow:nth-child(even) .crow__media {
    order: 2;
  }
}
.crow__media img {
  width: 100%;
  border-radius: var(--radius);
}
.crow h2 {
  margin-bottom: 0.4rem;
}
.crow__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin: 1.25rem 0 0;
  list-style: none;
  border-top: 1px solid var(--cream-200);
  padding-top: 1.1rem;
}
.crow__meta div {
  min-width: 8rem;
}
.crow__meta dt {
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 0.3rem;
}
.crow__meta dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
}

/* ---------- statement band ---------- */
.statement {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 60vh;
  color: #fff;
  overflow: hidden;
  background: var(--green-900);
}
.statement__media,
.statement__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.statement__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(18, 39, 28, 0.74);
}
.statement__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 8vw, 7rem);
  width: 100%;
}
.statement p.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  line-height: 1.4;
  max-width: none;
}
.statement__inner > p:not(.eyebrow) {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.3;
  max-width: 34ch;
  margin: 0;
  color: #fff;
  letter-spacing: -0.01em;
}
.statement .eyebrow {
  color: var(--gold);
}

/* ---------- markets strip ---------- */
.markets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  border-top: 1px solid var(--cream-200);
  border-bottom: 1px solid var(--cream-200);
  padding-block: 1.75rem;
}
.markets li {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2.2vw, 1.6rem);
  padding-inline: clamp(1rem, 3vw, 2.5rem);
  border-left: 1px solid var(--gold);
  line-height: 1.2;
}
.markets li:first-child {
  border-left: 0;
  padding-left: 0;
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--green-700);
  color: #fff;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
}
.cta-band__inner {
  display: grid;
  gap: 1.75rem;
  align-items: center;
}
@media (min-width: 860px) {
  .cta-band__inner {
    grid-template-columns: 1.4fr auto;
    gap: 3rem;
  }
}
.cta-band__inner > * {
  align-self: center;
}
.cta-band .btn-row {
  margin-top: 0;
  align-items: center;
}
.cta-band h2 {
  color: #fff;
  margin-bottom: 0.5rem;
}
.cta-band p {
  color: rgba(248, 240, 229, 0.85);
  max-width: 44ch;
  margin: 0;
}
.cta-band .btn-row {
  margin-top: 0;
}

/* ---------- facts table ---------- */
.facts {
  margin: 0;
  border-top: 1px solid var(--cream-200);
}
.facts__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--cream-200);
}
@media (min-width: 640px) {
  .facts__row {
    grid-template-columns: 15rem 1fr;
    gap: 1.5rem;
    align-items: baseline;
  }
}
.facts dt {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.facts dd {
  margin: 0;
  font-size: 1.02rem;
}

/* ---------- feature blocks with icons (compliance) ---------- */
.blocks {
  display: grid;
  gap: 1px;
  background: var(--cream-200);
  border: 1px solid var(--cream-200);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .blocks {
    grid-template-columns: 1fr 1fr;
  }
}
.block {
  background: var(--cream-50);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
}
.block__icon {
  width: 34px;
  height: 34px;
  color: var(--green-700);
  margin-bottom: 1.1rem;
}
.block h3 {
  margin-bottom: 0.45rem;
}
.block p {
  color: var(--ink-muted);
  font-size: 0.97rem;
  margin: 0;
}

/* ---------- spec table ---------- */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
}
.spec-table caption {
  text-align: left;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
  padding-bottom: 0.9rem;
}
.spec-table th,
.spec-table td {
  text-align: left;
  padding: 0.9rem 1rem 0.9rem 0;
  border-bottom: 1px solid var(--cream-200);
  vertical-align: top;
}
.spec-table th {
  width: 40%;
  font-weight: 600;
  color: var(--ink);
}
.spec-table td {
  color: var(--ink-muted);
}
.table-scroll {
  overflow-x: auto;
}

/* ---------- corridor map ---------- */
.map-figure {
  margin: 0;
  background: var(--cream-50);
  border: 1px solid var(--cream-200);
  padding: clamp(1rem, 3vw, 2.25rem);
}
.map-figure .map-micro-sm {
  display: none;
}
.map-figure svg {
  width: 100%;
  height: auto;
  display: block;
}
.map-figure__caption {
  margin: 1.1rem 0 0;
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 62ch;
}
.map-figure__caption a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--cream-200);
  text-underline-offset: 2px;
}
.map-figure__caption a:hover,
.map-figure__caption a:focus-visible {
  color: var(--green-700);
  text-decoration-color: currentColor;
}
/* deep-sea legs keep their dash pattern, so they fade in rather than draw on */
.corridor-sea {
  opacity: 0;
  transition: opacity 0.9s ease-out 0.85s;
}
.is-visible .corridor-sea {
  opacity: 1;
}
@media (max-width: 620px) {
  .map-figure {
    padding: 0.75rem;
  }
  /* the 12.5px desktop labels and the legend become illegible at this render
     size, so swap in the larger key-places tier; the route list below the map
     still carries every corridor as text */
  .map-figure .map-micro,
  .map-figure .map-badges,
  .map-figure .map-region__long {
    display: none;
  }
  .map-figure .map-micro-sm {
    display: block;
  }
  /* keep the country names readable at the reduced render size */
  .map-figure .map-region text {
    font-size: 40px;
    letter-spacing: 5px;
  }
  .map-figure .map-network {
    display: none;
  }
}
.route-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .route-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
.route-list li {
  border-top: 2px solid var(--gold);
  padding-top: 1rem;
}
.route-list__num {
  font-family: var(--serif);
  font-size: 0.9rem;
  color: var(--gold-text);
  display: block;
  margin-bottom: 0.3rem;
}
.route-list__title {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  display: block;
  margin-bottom: 0.35rem;
}
.route-list__path {
  font-size: 0.9rem;
  color: var(--ink-muted);
  display: block;
}
.route-list__terms {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-700);
  display: block;
  margin-top: 0.5rem;
  font-weight: 600;
}
.route-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s ease-out;
}
.route-draw--2 {
  transition-delay: 0.25s;
}
.route-draw--3 {
  transition-delay: 0.5s;
  transition-duration: 2.1s;
}
.is-visible .route-draw {
  stroke-dashoffset: 0;
}

/* route detail blocks */
.routes {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .routes {
    grid-template-columns: repeat(3, 1fr);
  }
}
.route {
  border-top: 1px solid var(--cream-200);
  padding-top: 1.5rem;
}
.route__index {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--gold-text);
  display: block;
  margin-bottom: 0.6rem;
}
.route h3 {
  margin-bottom: 0.5rem;
}
.route p {
  color: var(--ink-muted);
  font-size: 0.97rem;
}
.route dl {
  margin: 1.1rem 0 0;
  display: grid;
  gap: 0.5rem;
}
.route dl > div {
  display: block;
  font-size: 0.9rem;
  border-top: 1px solid var(--cream-200);
  padding-top: 0.55rem;
}
.route dt {
  color: var(--ink-muted);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.7rem;
  margin-bottom: 0.15rem;
}
.route dd {
  margin: 0;
  font-weight: 500;
}

/* ---------- contact ---------- */
.contact-layout {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 960px) {
  .contact-layout {
    grid-template-columns: 1.25fr 0.75fr;
  }
}
.contact-details {
  list-style: none;
  display: grid;
  gap: 1.5rem;
  margin: 0 0 2.5rem;
}
.contact-details dt {
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 0.35rem;
}
.contact-details dd {
  margin: 0;
  font-size: 1.02rem;
}
.contact-details a {
  color: var(--green-700);
  text-decoration: none;
  border-bottom: 1px solid var(--cream-200);
}
.contact-details a:hover {
  border-color: var(--green-700);
}

.aside-card {
  background: var(--cream-100);
  border: 1px solid var(--cream-200);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.aside-card h2,
.aside-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.6rem;
}
.aside-card p {
  color: var(--ink-muted);
  font-size: 0.95rem;
}
.aside-card ul {
  list-style: none;
  display: grid;
  gap: 0.7rem;
  margin: 1.1rem 0 0;
  font-size: 0.95rem;
}
.aside-card ul li {
  padding-left: 1.1rem;
  position: relative;
  color: var(--ink-muted);
}
.aside-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--gold);
}

.map-embed {
  border: 1px solid var(--green-700);
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 62rem;
  background: var(--cream-200) url("../assets/office-jlt.webp") center / cover no-repeat;
  position: relative;
}
.map-embed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(18, 39, 28, 0.55), rgba(18, 39, 28, 0.35));
  pointer-events: none;
}
.map-embed iframe {
  position: relative;
  z-index: 2;
}
@media (max-width: 640px) {
  .map-embed {
    aspect-ratio: 4 / 3;
  }
}
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- form ---------- */
.form {
  display: grid;
  gap: 1.35rem;
}
.form__grid {
  display: grid;
  gap: 1.35rem;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .form__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.field label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
}
.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--cream-200);
  border-radius: var(--radius);
  padding: 0.8rem 0.9rem;
  width: 100%;
  transition: border-color 0.2s var(--ease);
}
.field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231E4430' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
  background-size: 0.75rem 0.5rem;
  cursor: pointer;
}
.field textarea {
  min-height: 8rem;
  resize: vertical;
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--green-300);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--green-700);
}
.field .error {
  font-size: 0.8rem;
  color: #8c2f1d;
  min-height: 1rem;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #8c2f1d;
}
.form__note {
  font-size: 0.82rem;
  color: var(--ink-muted);
}
.form-success {
  background: var(--cream-100);
  border-left: 3px solid var(--green-700);
  padding: 1.5rem 1.6rem;
}
.form-success h3 {
  margin-bottom: 0.3rem;
}
.form-success p {
  color: var(--ink-muted);
  margin: 0;
}
[hidden] {
  display: none !important;
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--green-900);
  color: rgba(248, 240, 229, 0.78);
  padding-top: clamp(3.5rem, 6vw, 5rem);
  font-size: 0.93rem;
}
.site-footer__top {
  display: grid;
  gap: clamp(2.25rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 760px) {
  .site-footer__top {
    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  }
}
.site-footer .brand {
  color: var(--cream-100);
  margin-bottom: 1.1rem;
}
.site-footer__blurb {
  max-width: 30ch;
  color: rgba(248, 240, 229, 0.7);
  margin-bottom: 1.25rem;
}
.site-footer__addr {
  font-style: normal;
  color: rgba(248, 240, 229, 0.7);
  line-height: 1.7;
}
.site-footer__addr a {
  color: var(--cream-100);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 39, 0.5);
}
.site-footer__addr a:hover {
  color: var(--gold);
}
.site-footer h2 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.site-footer ul {
  list-style: none;
  display: grid;
  gap: 0.65rem;
}
.site-footer ul a {
  color: rgba(248, 240, 229, 0.8);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.site-footer ul a:hover {
  color: var(--gold);
}
.site-footer__bottom {
  border-top: 1px solid rgba(201, 162, 39, 0.4);
  padding-block: 1.5rem 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(248, 240, 229, 0.6);
}

/* ---------- reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .route-draw {
    stroke-dashoffset: 0;
    transition: none;
  }
  .corridor-sea {
    opacity: 1;
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================ corridor globe */
.globe-section {
  background: var(--green-900);
  color: var(--cream-50);
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
}

.globe-section__head {
  /* .wrap centres the container, so the reading measure is capped on the
     children instead — otherwise the head drifts off the section's left edge */
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.globe-section__head > * {
  max-width: 62ch;
}
.globe-section__head .globe-stats {
  max-width: 46rem;
}

.globe-section__head h2 {
  color: var(--cream-50);
  margin: 0.6rem 0 1rem;
}

.globe-section__head .eyebrow {
  color: var(--gold);
}

.globe-section__head .lead {
  color: var(--on-dark);
  margin: 0;
}

/* ---------- season stats row ---------- */
.globe-stats {
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
.globe-stats__label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin: 0 0 0.9rem;
}
.globe-stats__grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 4vw, 2.75rem);
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(253, 251, 247, 0.14);
}
.globe-stats__item {
  min-width: 0;
}
.globe-stats__item dd {
  font-family: var(--serif);
  font-variation-settings: "opsz" 42, "SOFT" 0, "WONK" 0;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 600;
  font-size: clamp(1.75rem, 3.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--cream-50);
  margin: 0;
}
.globe-stats__item dd span {
  font-size: 0.55em;
  font-weight: 560;
  letter-spacing: 0.02em;
}
.globe-stats__item dt {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--on-dark);
  margin-top: 0.35rem;
}

/* ---------- drag affordance ---------- */
.globe-hint {
  position: absolute;
  left: 50%;
  bottom: 0.5rem;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(11, 26, 18, 0.7);
  border: 1px solid rgba(253, 251, 247, 0.16);
  color: rgba(253, 251, 247, 0.66);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.globe-stage.has-hint .globe-hint {
  opacity: 1;
}

.globe-section__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  /* stretch, not start: the left column must be as tall as the step column so
     the globe has the whole section to pin inside */
  align-items: stretch;
}

/* full-height rail for the pinned globe; height stays auto/stretch — a fixed
   height here would leave the sticky child nothing to travel through */
.globe-section__col {
  position: relative;
  min-width: 0;
}

.globe-section__sticky {
  position: sticky;
  /* a viewport-tall box parked under the site header, with the globe centred
     inside it, so the globe sits at the middle of the screen for the whole
     section without having to know its own pixel height */
  top: var(--hdr, 76px);
  height: calc(100vh - var(--hdr, 76px));
  display: grid;
  place-items: center;
}
@supports (height: 1svh) {
  .globe-section__sticky {
    height: calc(100svh - var(--hdr, 76px));
  }
}

.globe-stage {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
}

.globe-stage canvas {
  display: block;
  cursor: grab;
  touch-action: pan-y;
  border-radius: 50%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
}

.globe-stage canvas:active {
  cursor: grabbing;
}

.globe-stage__note,
.globe-stage--failed::after {
  color: rgba(253, 251, 247, 0.6);
  font-size: 0.9rem;
  max-width: 34ch;
  text-align: center;
}

.globe-stage--failed::after {
  content: "The corridors are described in full alongside.";
}

.globe-stage__credit {
  margin: 1.4rem auto 0;
  max-width: 46ch;
  font-size: 0.75rem;
  line-height: 1.55;
  color: rgba(253, 251, 247, 0.5);
  text-align: center;
}

.globe-stage__credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.globe-steps {
  --rail: 0%;
  --rail-colour: var(--cream-200);
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 clamp(1.25rem, 3vw, 2.25rem);
}
/* the track */
.globe-steps::before,
.globe-steps::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.globe-steps::before {
  bottom: 0;
  width: 1px;
  background: rgba(253, 251, 247, 0.12);
}
/* the fill, driven by globe.js as each corridor becomes active */
.globe-steps::after {
  width: 2px;
  height: var(--rail);
  background: var(--rail-colour);
  transition: height 0.5s var(--ease), background-color 0.5s var(--ease);
}

.globe-step {
  --step-colour: var(--gold);
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5rem 0;
  opacity: 0.35;
  transition: opacity 0.5s ease;
}
@supports (height: 1svh) {
  .globe-step {
    min-height: 70svh;
  }
}

.globe-step.is-active {
  opacity: 1;
}
.globe-step--origin { --step-colour: var(--cream-200); }
.globe-step--east { --step-colour: var(--corr-east); }
.globe-step--west { --step-colour: var(--corr-west); }
.globe-step--sea { --step-colour: var(--corr-sea); }


.globe-step__badge {
  display: inline-grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  border: 1px solid var(--step-colour);
  color: var(--step-colour);
  background: transparent;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0;
  flex: none;
  transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}
.globe-step.is-active .globe-step__badge {
  background: var(--step-colour);
  color: var(--green-900);
}
/* the origin marker is drawn, not typed — a glyph here picks up an emoji
   fallback in some browsers and lands as a stray coloured dot */
.globe-step--origin .globe-step__badge {
  font-size: 0;
  line-height: 0;
}
.globe-step--origin .globe-step__badge::before {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--step-colour);
}
.globe-step--origin.is-active .globe-step__badge::before {
  background: var(--green-900);
}

.globe-step__num {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--step-colour);
  margin: 0 0 0.7rem;
}

.globe-step h3 {
  color: var(--cream-50);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  margin: 0 0 0.75rem;
}

.globe-step p:not(.globe-step__num) {
  color: var(--on-dark);
  margin: 0;
  max-width: 44ch;
}

@media (max-width: 900px) {
  .globe-section__inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* no pinning on a phone: the globe is drawn once at the top of the section
     and the steps stack underneath it as ordinary blocks */
  .globe-section__sticky {
    position: static;
    height: auto;
    top: auto;
  }
  @supports (height: 1svh) {
    .globe-section__sticky {
      height: auto;
    }
  }

  .globe-stage {
    max-width: min(78vw, 340px);
  }

  .globe-stage__credit {
    display: none;
  }

  .globe-steps {
    padding-top: 2rem;
  }

  .globe-step {
    min-height: 0;
    opacity: 1;
    padding: 1.75rem 0;
  }
  @supports (height: 1svh) {
    .globe-step {
      min-height: 0;
    }
  }
  .globe-step + .globe-step {
    border-top: 1px solid rgba(253, 251, 247, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .globe-section__sticky {
    position: static;
    height: auto;
  }

  .globe-step {
    min-height: 0;
    opacity: 1;
    padding: 1.5rem 0;
  }

  .globe-stage canvas {
    cursor: default;
  }
}

/* ==== logistics: globe hero that hands over to the flat corridor map ====
   Base state below is the no-JS / reduced-motion state: an ordinary hero
   followed by an ordinary map section. globe-hero.js opts in to the pinned
   scrub by adding .is-scrub / .is-scrub-target. */
.scrollstage {
  position: relative;
}
.scrollstage__pin {
  background: var(--green-900);
}
.globe-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* The hero owns the first viewport before any JS runs, so nothing below it
     can flash into view while the globe mounts. The sticky header takes flow
     space above, so its height comes off the top. */
  min-height: calc(100vh - var(--hdr, 76px));
  min-height: calc(100svh - var(--hdr, 76px));
  overflow: hidden;
  color: #fff;
}
.globe-hero__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* lifts the globe clear of the headline block */
  padding-bottom: 12vh;
  pointer-events: none;
  --globe-size: min(70vw, 50vh, 460px);
}
@supports (height: 1svh) {
  .globe-hero__stage {
    --globe-size: min(70vw, 50svh, 460px);
  }
}
/* keeps the headline legible over the landmasses; fades out with the copy */
.globe-hero__scrim {
  position: absolute;
  inset: auto 0 0;
  height: 62%;
  background: linear-gradient(to bottom, rgba(11, 26, 18, 0) 0%, rgba(11, 26, 18, 0.55) 42%, rgba(11, 26, 18, 0.9) 100%);
  pointer-events: none;
}
/* The wrapper is the placeholder: a circle of ocean at the globe's exact final
   size and position, so there is no empty hole and no layout shift when the
   canvas paints over it. */
.globe-hero__scale {
  width: var(--globe-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, #27543E 0%, #1E3B2C 58%, #16301F 100%);
  will-change: transform;
  transform-origin: 50% 50%;
}
.globe-hero__stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* never trap a vertical swipe that is trying to scroll past the hero */
  touch-action: pan-y;
}
.globe-hero__copy {
  position: relative;
  z-index: 2;
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3.5rem, 7vw, 5rem);
  max-width: 62ch;
  will-change: opacity, transform;
}
.globe-hero__copy h1 {
  margin: 0.35rem 0 0.75rem;
  /* the globe sits behind the copy, so lift the text off it */
  text-shadow: 0 2px 18px rgba(11, 26, 18, 0.55);
}
.globe-hero__copy > p:not(.crumbs) {
  margin: 0;
  max-width: 56ch;
  text-shadow: 0 1px 12px rgba(11, 26, 18, 0.6);
}

/* scroll hint, bottom-centre */
.globe-hero__hint {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(253, 251, 247, 0.66);
  pointer-events: none;
}
/* the hint only tells the truth once the pinned scrub is actually running, so
   it stays hidden without JS, on failure and under reduced motion */
.scrollstage.is-scrub .globe-hero__hint {
  display: flex;
}
.globe-hero__hint svg {
  width: 18px;
  height: 18px;
  animation: hint-nudge 2.4s var(--ease) infinite;
}
@keyframes hint-nudge {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(5px); opacity: 1; }
}

/* ---- static state: reduced motion, or before/without JS ---- */
.scrollstage--static .globe-hero__stage {
  padding-bottom: 12vh;
  --globe-size: min(72vw, 44vh, 430px);
}

/* ---- scrubbed state ---- */
/* 100vh of pin + ~120vh of scroll travel through the sequence */
.scrollstage.is-scrub {
  height: 220vh;
}
.scrollstage.is-scrub .scrollstage__pin {
  position: sticky;
  /* parks directly under the sticky site header */
  top: var(--hdr, 76px);
  height: calc(100vh - var(--hdr, 76px));
  overflow: hidden;
  z-index: 1;
}
.scrollstage.is-scrub .globe-hero {
  height: calc(100vh - var(--hdr, 76px));
}
@supports (height: 1svh) {
  .scrollstage.is-scrub .scrollstage__pin,
  .scrollstage.is-scrub .globe-hero {
    height: calc(100svh - var(--hdr, 76px));
  }
}
.corridor-arrival.is-scrub-target {
  position: relative;
  z-index: 2;
  /* rises over the final viewport of the pinned stage */
  margin-top: calc(var(--hdr, 76px) - 100vh);
  /* The pin stays stuck for the last viewport of the stage, so this section
     must be at least that tall or the dark pin outlives it and shows as a
     green band underneath. Its natural height is fixed, so guarantee it. */
  min-height: calc(100vh - var(--hdr, 76px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--cream-50);
  opacity: 0;
  will-change: opacity, transform;
}
@supports (height: 1svh) {
  .corridor-arrival.is-scrub-target {
    margin-top: calc(var(--hdr, 76px) - 100svh);
    min-height: calc(100svh - var(--hdr, 76px));
  }
}

@media (max-width: 900px) {
  /* shorter pin distance (~80vh of travel) so the sequence does not overstay
     on a phone */
  .scrollstage.is-scrub {
    height: 170vh;
  }
  .globe-hero__stage {
    /* globe up, copy below its centre */
    padding-bottom: 31vh;
    --globe-size: min(85vw, 52vh);
  }
  @supports (height: 1svh) {
    .globe-hero__stage {
      --globe-size: min(85vw, 52svh);
    }
  }
  .globe-hero__copy {
    /* the lower pad keeps the intro clear of the scroll hint */
    padding-block: clamp(1.5rem, 6vw, 2.5rem) clamp(5.5rem, 24vw, 7.5rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .globe-hero__scale {
    transform: none !important;
  }
  .globe-hero__hint svg {
    animation: none;
  }
}


/* ================================================================ commodities */

/* sticky in-page jump nav */
.cnav {
  position: sticky;
  top: var(--hdr, 76px);
  z-index: 90;
  background: var(--cream-50);
  border-bottom: 1px solid var(--cream-200);
}
.cnav ul {
  list-style: none;
  display: flex;
  gap: 0 1.6rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0.85rem 0;
}
.cnav a {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.cnav a:hover,
.cnav a:focus-visible {
  color: var(--ink);
}
.cnav a.is-current {
  color: var(--gold-text);
  border-bottom-color: var(--gold);
}
@media (max-width: 620px) {
  .cnav ul {
    gap: 0 1.1rem;
  }
  .cnav a {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }
}
.section--rows {
  padding-bottom: 0;
}
/* the sticky jump nav must not cover the row it scrolls to */
.crow {
  scroll-margin-top: calc(var(--hdr, 76px) + 4rem);
}
.section--rows .crow:first-of-type {
  padding-top: 0;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* commodity rows: equal rhythm, unified imagery, spec sheet */
.crow {
  padding-block: 3.5rem;
  align-items: start;
}
@media (min-width: 860px) {
  .crow {
    padding-block: 6rem;
    grid-template-columns: 1fr 1.05fr;
  }
}
.crow__media {
  margin: 0;
}
.crow__media img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--cream-200);
  /* the supplied macros are already graded as a set — nothing on top */
}
.crow__media {
  position: relative;
}
.crow__media::before {
  content: "";
  position: absolute;
  inset: 0;
  bottom: auto;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  box-shadow: inset 0 0 5rem 1.25rem rgba(28, 28, 26, 0.13);
  pointer-events: none;
}
.crow__media figcaption {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}
.crow__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* reserve two lines so the spec sheet starts at the same offset in every row */
.crow__line {
  color: var(--ink-muted);
  max-width: 46ch;
  margin-bottom: 0;
}
@media (min-width: 860px) {
  .crow__line {
    min-height: calc(2 * 1.6 * 1.0625rem);
  }
}

/* 4-up spec sheet, 2x2 on mobile */
.cspec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 1.6rem 0 0;
  border-top: 1px solid var(--cream-200);
}
@media (min-width: 700px) {
  .cspec {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.cspec__cell {
  padding: 1rem 1rem 1.05rem 0;
  border-bottom: 1px solid var(--cream-200);
}
@media (min-width: 700px) {
  .cspec__cell {
    border-bottom: 0;
  }
}
.cspec__cell dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.45rem;
}
.cspec__v {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cspec__v--num {
  font-family: var(--serif);
  font-variation-settings: "opsz" 42, "SOFT" 0, "WONK" 0;
  font-weight: 600;
  font-size: 1.15rem;
}
@media (min-width: 700px) {
  .cspec__v--num {
    white-space: nowrap;
  }
}
.crow__act {
  margin: 1.5rem 0 0;
}

.caption--tail {
  margin: 2.5rem 0 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cream-200);
}

/* closing dark band */
.closeband {
  background: var(--green-800);
  color: var(--cream-100);
  padding-block: clamp(2.75rem, 5vw, 4rem);
}
.closeband__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2.5rem;
}
.closeband p {
  margin: 0;
  max-width: 46ch;
  font-family: var(--serif);
  font-variation-settings: "opsz" 84, "SOFT" 0, "WONK" 0;
  font-weight: 560;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.35;
  color: var(--cream-50);
}
.btn--gold {
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
}
.btn--gold:hover,
.btn--gold:focus-visible {
  background: var(--gold);
  color: var(--green-900);
  border-color: var(--gold);
}

/* ================================================================ routes rebuild */
.route-list li {
  border-top-width: 3px;
}
/* the element+class selector above sets the width, so match its specificity */
.route-list li.route-list--east {
  border-top-color: var(--corr-east-ink);
}
.route-list li.route-list--west {
  border-top-color: var(--corr-west-ink);
}
.route-list li.route-list--sea {
  border-top-color: var(--corr-sea-ink);
}
.route-list__num {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.45rem;
}

.route {
  border-top: 3px solid var(--corr-east-ink);
  padding-top: 1.35rem;
}
.route--east {
  border-top-color: var(--corr-east-ink);
}
.route--west {
  border-top-color: var(--corr-west-ink);
}
.route--sea {
  border-top-color: var(--corr-sea-ink);
}
.route__dir {
  color: var(--ink-muted);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  margin-bottom: 0.5rem;
}
.route h3 {
  margin-bottom: 1.1rem;
  max-width: 22ch;
}
.route__row {
  border-top: 1px solid var(--cream-200);
  padding: 0.7rem 0 0.75rem;
}
.route__row dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.3rem;
}
.route__row dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* one shared baseline grid across the three columns */
@media (min-width: 900px) {
  .routes {
    grid-template-rows: auto auto repeat(5, auto);
    gap: 0 clamp(2rem, 4vw, 3rem);
  }
  .route {
    display: grid;
    grid-row: span 7;
    grid-template-rows: subgrid;
    align-content: start;
  }
  .route h3 {
    align-self: start;
  }
}
.routes__tail {
  margin: clamp(2rem, 4vw, 2.75rem) 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cream-200);
  color: var(--ink-muted);
  font-size: 0.9375rem;
}
.routes__tail .textlink {
  margin-left: 0.5rem;
}


/* ================================================================ split section extras */
/* the fact grid inside a split column stays 2x2 at every width */
.cspec--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.75rem;
}
@media (min-width: 700px) {
  .cspec--pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.cspec--pair .cspec__v--num {
  font-size: 1.05rem;
}
.split__cta {
  margin-top: 1.75rem;
}

/* ---------- KYC pack checklist ---------- */
.checks {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem 1.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9375rem;  /* 15px */
  line-height: 1.45;
  color: var(--ink);
}
.checks__tick {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 0.28rem;
  color: var(--gold);
}

/* ---------- footer legal line ---------- */
.site-footer__legal {
  margin: 0;
  padding-bottom: 1.75rem;
  font-size: 0.8125rem;  /* 13px */
  color: rgba(248, 240, 229, 0.55);
}
.site-footer__bottom {
  padding-bottom: 0.9rem;
}


/* ================================================================ process strip
   FCA at the elevator through to CIF at the discharge port. Five nodes on a
   hairline; no claim beyond the two Incoterms already stated in the copy. */
.pstrip {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: flex;
}
.pstrip__step {
  position: relative;
  /* five equal columns */
  flex: 1 1 0;
  min-width: 0;
  padding-right: 0.5rem;
}
.pstrip__step:last-child {
  padding-right: 0;
}
/* the connector runs from the edge of one dot to the edge of the next */
.pstrip__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 0;
  top: 3.5px;
  height: 1px;
  background: var(--cream-200);
}
.pstrip__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-700);
}
.pstrip__name,
.pstrip__term {
  display: block;
  font-family: var(--sans);
  font-size: 0.625rem;   /* 10px — keeps every label on one line */
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pstrip__name {
  margin-top: 0.85rem;
  color: var(--ink);
  /* one line per node, so FCA and CIF sit on a shared baseline */
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.pstrip__term {
  margin-top: 0.4rem;
  color: var(--gold-text);
}

@media (max-width: 639px) {
  /* a vertical list on a left rail */
  .pstrip {
    flex-direction: column;
    gap: 1.15rem;
    margin-top: 2rem;
  }
  .pstrip__step {
    flex: none;
    padding: 0 0 0 1.5rem;
  }
  .pstrip__step:last-child {
    padding-right: 0;
  }
  .pstrip__dot {
    position: absolute;
    left: 0;
    top: 4px;
  }
  .pstrip__step:not(:last-child)::after {
    left: 3.5px;
    right: auto;
    top: 15px;
    bottom: -1.15rem;
    width: 1px;
    height: auto;
  }
  .pstrip__name {
    margin-top: 0;
  }
  .pstrip__term {
    margin-top: 0.25rem;
  }
}

/* ================================================================ about page */
/* the milestone strip borrows the process strip's rhythm: four dots on a hairline */
.mstrip {
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 0;
  display: flex;
  counter-reset: none;
}
.mstrip__step {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding-right: 1rem;
}
.mstrip__step:last-child {
  padding-right: 0;
}
.mstrip__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 11px;
  right: 0;
  top: 3.5px;
  height: 1px;
  background: var(--cream-200);
}
.mstrip__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-700);
}
.mstrip__when {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.mstrip__what {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 560;
  font-variation-settings: "opsz" 48, "SOFT" 0, "WONK" 0;
  line-height: 1.3;
  color: var(--ink);
}

@media (max-width: 767px) {
  .mstrip {
    flex-direction: column;
    gap: 1.35rem;
    margin-top: 2rem;
  }
  .mstrip__step {
    flex: none;
    padding: 0 0 0 1.5rem;
  }
  .mstrip__dot {
    position: absolute;
    left: 0;
    top: 5px;
  }
  .mstrip__when {
    margin-top: 0;
  }
  .mstrip__step:not(:last-child)::after {
    left: 3.5px;
    right: auto;
    top: 16px;
    bottom: -1.35rem;
    width: 1px;
    height: auto;
  }
}

/* the pull-quote fills the dead space under the section heading in the left column */
.pullq {
  margin: clamp(2rem, 4vw, 3.25rem) 0 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--cream-200);
  padding-top: clamp(1.5rem, 2.4vw, 2rem);
  max-width: 22ch;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
  font-weight: 500;
  font-variation-settings: "opsz" 96, "SOFT" 0, "WONK" 0;
  line-height: 1.24;
  letter-spacing: -0.005em;
  color: var(--green-700);
}
@media (max-width: 899px) {
  .pullq {
    max-width: 30ch;
    margin-top: 1.75rem;
  }
}

/* one primary action per band: gold fill, dark text */
.btn--primary {
  background: var(--gold);
  color: var(--green-900);
  border: 1px solid var(--gold);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: #dcb230;
  border-color: #dcb230;
  color: var(--green-900);
}

/* ================================================================ commodity rows, tightened */
/* the text block centres against the taller image, and the row closes 48px
   below whichever column runs lower */
.crow {
  align-items: center;
}
@media (min-width: 860px) {
  .crow {
    padding-block: 6rem 3rem;
  }
}

/* the index numeral sits behind the crop name and is cropped by the column */
.crow__head {
  position: relative;
  isolation: isolate;
  margin-top: 0.35rem;
}
.crow__ghost {
  position: absolute;
  left: -0.06em;
  bottom: -0.06em;
  z-index: -1;
  font-family: var(--serif);
  font-size: clamp(5rem, 8vw, 7.5rem);
  font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0;
  line-height: 0.78;
  letter-spacing: -0.03em;
  color: rgba(28, 28, 26, 0.08);
  pointer-events: none;
  user-select: none;
}
.crow__head h2 {
  position: relative;
}

/* ---------- network tiles (about) ---------- */
.netgrid {
  list-style: none;
  margin: clamp(2rem, 3.4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.75rem);
}
@media (min-width: 860px) {
  .netgrid { grid-template-columns: repeat(4, 1fr); }
}
.nstat {
  border-top: 2px solid var(--gold);
  padding-top: 0.9rem;
}
.nstat__fig {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-style: italic;
  font-variation-settings: "opsz" 48, "SOFT" 0, "WONK" 0;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.25;
  color: var(--green-700);
  text-wrap: balance;
  max-width: 20ch;
  /* two lines of runway so every label in a row starts on the same line */
  min-height: 2.5em;
}
.nstat__label {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--ink-muted);
  max-width: 28ch;
  text-wrap: balance;
}
.netgrid__note {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  font-size: 0.9375rem;
  color: var(--ink-muted);
  max-width: 62ch;
}
.cspec--pair .cspec__cell--full {
  grid-column: 1 / -1;
}