/* ============================================================================
   Zambezi Trade Capital — the narrative sections below the hero
   ----------------------------------------------------------------------------
   The hero is a fixed composition measured off mission.png and is sized
   entirely in cqw. Everything here is the opposite: ordinary flow, sized from
   the fluid type and spacing scales in tokens.css, with no fixed heights. The
   two never share a unit.
   ============================================================================ */

/* A three-column grid rather than a centred wrapper. Everything lands in the
   middle column, and a child narrower than that column — the intro, the pulled
   quote, the status panel — aligns to its left edge instead of centring itself.
   With `margin-inline: auto` on the children they would each centre on their
   own width, and no two would line up. */
.section {
  display: grid;
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [content-start] min(100%, var(--page-max))
    [content-end] minmax(0, 1fr)
    [full-end];
  padding: var(--space-3xl) var(--gutter);
}

.section > * {
  grid-column: content;
}

/* Alternating surfaces, so the eye can tell one section from the next without
   a rule between them. The wash is translucent because the page ground is a
   single fixed gradient running the whole document. */
.section--sunk {
  background: rgb(255 255 255 / 0.55);
  border-block: 1px solid var(--rule-soft);
}

.section__intro {
  max-width: 46rem;
}

.kicker {
  margin-bottom: var(--space-s);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.section h2 {
  font-size: var(--step-3);
  letter-spacing: 0.005em;
  color: var(--ink);
}

.section__lead {
  max-width: var(--measure);
  margin-top: var(--space-m);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-body);
}

.section h3 {
  font-size: var(--step-0);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
}

/* --- Three-up statements of fact ----------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-l);
  margin-top: var(--space-xl);
  list-style: none;
}

.facts li {
  padding-top: var(--space-s);
  border-top: 2px solid var(--teal-bright);
}

.facts p {
  margin-top: var(--space-2xs);
  color: var(--ink-body);
}

/* --- The pulled-out sentence that closes section 01 ----------------------- */

.statement {
  max-width: 52rem;
  margin-top: var(--space-xl);
  padding: var(--space-m) var(--space-l);
  border-left: 3px solid var(--gold);
  background: rgb(255 255 255 / 0.6);
}

.statement p {
  font-size: var(--step-2);
  line-height: 1.4;
  color: var(--ink);
}

.statement strong {
  color: var(--teal);
}

/* --- Two-column split ---------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.split__title {
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--border-panel);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-s);
  list-style: none;
}

.tags li {
  padding: 0.35em 0.9em;
  border: 1px solid var(--border-panel);
  border-radius: 100px;
  background: var(--panel);
  font-size: var(--step--1);
  color: var(--ink-body);
}

/* --- Numbered lists: the assessment criteria and the transaction sequence -- */

.criteria,
.process {
  list-style: none;
  counter-reset: none;
}

.criteria {
  margin-top: var(--space-s);
}

.criteria li,
.process li {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  align-items: baseline;
  column-gap: var(--space-s);
  padding: var(--space-s) 0;
  border-top: 1px solid var(--rule-soft);
}

.criteria li:last-child,
.process li:last-child {
  border-bottom: 1px solid var(--rule-soft);
}

.criteria span,
.process span {
  grid-row: span 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--gold);
}

.criteria strong,
.process strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: 0.02em;
  color: var(--ink);
}

.criteria small,
.process small {
  font-size: var(--step-0);
  color: var(--ink-muted);
}

/* The transaction sequence reads as a sequence, so on a wide screen it runs as
   a row of steps with a connecting rule rather than as a stacked list. */
.process {
  margin-top: var(--space-xl);
}

@media (min-width: 60rem) {
  .process {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-m);
  }

  .process li {
    display: block;
    position: relative;
    padding: var(--space-m) 0 0;
    border: 0;
    border-top: 2px solid var(--teal-bright);
  }

  .process li:last-child {
    border-bottom: 0;
  }

  /* The arrow between steps. Drawn on the step, not between them, so the row
     stays a plain six-column grid. */
  .process li + li::before {
    content: "";
    position: absolute;
    top: -2px;
    left: calc(-1 * var(--space-m));
    width: var(--space-m);
    height: 2px;
    background: var(--rule);
  }

  .process span {
    display: block;
    font-size: var(--step-0);
  }

  .process strong {
    display: block;
    margin-top: var(--space-3xs);
    font-size: var(--step-0);
  }

  .process small {
    display: block;
    margin-top: var(--space-2xs);
    font-size: var(--step--1);
  }
}

/* --- The comparison in section 04 ---------------------------------------- */

.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-m);
  margin-top: var(--space-xl);
}

.compare__col {
  padding: var(--space-m);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-m);
  background: var(--panel);
}

.compare__col p {
  margin-top: var(--space-2xs);
  color: var(--ink-body);
}

/* The right-hand column is the one that describes this business, and carries
   the accent so the contrast is legible without any comparative wording. */
.compare__col--ours {
  border-color: var(--border-panel);
  box-shadow: var(--shadow-s);
}

.compare__col--ours h3 {
  color: var(--green);
}

/* --- Section 05: the plain statement of stage ---------------------------- */

.status {
  max-width: var(--measure);
  margin-top: var(--space-l);
  padding: var(--space-l);
  border: 1px solid var(--border-panel);
  border-radius: var(--radius-m);
  background: var(--panel);
}

.status p + p {
  margin-top: var(--space-s);
}

.status p {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-body);
}

/* --- Section 07: contact ------------------------------------------------- */

.contact {
  text-align: center;
}

.contact .kicker,
.contact h2,
.contact .section__lead,
.contact .contact__address {
  margin-inline: auto;
}

.contact .section__intro {
  margin-inline: auto;
}

.contact .section__lead {
  max-width: 34rem;
}

.contact__address {
  margin-top: var(--space-l);
  font-family: var(--font-display);
  font-weight: 700;
  /* An email address is one unbreakable word, so it cannot use --step-2: at
     320px that overflows the viewport. This scale is solved against the
     address's own length instead, and it may break mid-word if it still has to. */
  font-size: clamp(1rem, 0.72rem + 1.4vw, 1.75rem);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.contact__address a {
  color: var(--teal);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
}

.contact__address a:hover {
  color: var(--gold);
}

/* ---------------------------------------------------------------------------
   Site footer
   --------------------------------------------------------------------------- */

.site-footer {
  padding: var(--space-xl) var(--gutter) var(--space-l);
  border-top: 1px solid var(--border-panel);
  background: rgb(255 255 255 / 0.7);
}

.site-footer > * {
  max-width: var(--page-max);
  margin-inline: auto;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-l);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  text-decoration: none;
  color: var(--ink);
}

.footer-brand img {
  width: auto;
  height: 3rem;
}

.footer-brand span {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}

.footer-brand small {
  display: block;
  font-family: var(--font-lockup);
  font-weight: 300;
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  color: var(--gold);
}

.footer-contact {
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink-body);
}

.footer-notice {
  margin-top: var(--space-l);
  padding-top: var(--space-s);
  border-top: 1px solid var(--rule-soft);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-muted);
}

.footer-notice p + p {
  margin-top: var(--space-2xs);
}

/* ---------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------------
   Two variants and no more. --primary is the teal fill; --download is the same
   shape with a gold left edge, used wherever the action produces a file. Both
   are used on the landing page and on the white paper, so they live here rather
   than in either page's own stylesheet.
   --------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.5em;
  border: 0;
  border-radius: var(--radius-s);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    translate var(--dur-fast) var(--ease);
}

.button svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

.button--primary {
  background: var(--teal);
  color: #fff;
  box-shadow: var(--shadow-s);
}

.button--primary:hover {
  background: var(--ink);
  color: #fff;
  translate: 0 -1px;
  box-shadow: var(--shadow-m);
}

/* The gold edge marks the action that produces a file. Gold is load-bearing
   here as a graphic, not as text, so --gold-light is safe. */
.button--download {
  background: var(--teal);
  color: #fff;
  border-left: 4px solid var(--gold-light);
  box-shadow: var(--shadow-s);
}

.button--download:hover {
  background: var(--ink);
  color: #fff;
  border-left-color: var(--gold);
  translate: 0 -1px;
  box-shadow: var(--shadow-m);
}

/* ---------------------------------------------------------------------------
   The white paper card on the landing page
   --------------------------------------------------------------------------- */

.paper__inner {
  display: grid;
  gap: var(--space-l);
}

.paper__text {
  max-width: 46rem;
}

.paper__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-m);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-mid);
}

.paper__meta span + span::before {
  content: "·";
  margin-right: var(--space-s);
  color: var(--rule);
}

.paper__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-l);
}