/* ============================================================================
   Zambezi Trade Capital — print
   ----------------------------------------------------------------------------
   Printed, the site is a document rather than a composition. The hero's job on
   screen is to occupy the viewport; on paper that would waste the first page,
   so it collapses to the lockup, the mission statement and the risk line, and
   the background motifs go entirely.
   ============================================================================ */

@page {
  margin: 18mm 16mm;
}

html,
body {
  background: #fff !important;
}

body {
  color: #000;
  font-size: 10.5pt;
  line-height: 1.45;
}

/* Chrome and the scroll cue carry no information on paper. */
.site-header,
.hero__scroll,
.hero__bg,
.skip-link,
.nav-toggle {
  display: none !important;
}

/* The hero stops being a fixed-height composition. */
.hero {
  display: block;
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
}

.hero__frame {
  width: 100%;
  max-width: none;
  container-type: normal;
}

/* Without the container the cqw lengths inside would resolve against the
   viewport, so the pieces that must stay legible are re-sized in pt here. */
.hero__identity {
  display: block;
  padding: 0;
}

.hero__mark {
  width: 34mm;
}

.lockup {
  width: 100%;
  margin-top: 6mm;
  container-type: normal;
}

.lockup__wordmark img {
  width: 92mm;
}

.lockup__line--gold {
  margin-top: 3mm;
  font-size: 13pt;
  letter-spacing: 0.4em;
}

.lockup__line--sub {
  margin-top: 2.5mm;
  font-size: 8pt;
}

.lockup__tagline {
  margin-top: 4mm;
  font-size: 12pt;
}

.lockup__hairline {
  margin-top: 3mm;
  height: 0.4mm;
}

.mission,
.strip,
.card,
.status,
.compare__col,
.statement {
  box-shadow: none !important;
  border-color: #999 !important;
  background: #fff !important;
}

.mission {
  margin-top: 8mm;
  min-height: 0;
  padding: 5mm;
}

.mission__title { font-size: 12pt; }
.mission__text { font-size: 10.5pt; max-width: none; }
.mission__icon { display: none; }
.mission { grid-template-columns: 1fr; }
.mission::before { display: none; }
.mission__body { padding-left: 0; }

/* The five cards are the brand's summary of the business and are worth keeping,
   but not at composition scale. */
.cards {
  grid-template-columns: repeat(2, 1fr);
  gap: 4mm;
  margin-top: 6mm;
}

.card {
  min-height: 0;
  padding: 4mm;
  break-inside: avoid;
}

.card__icon { width: 12mm; height: 12mm; }
.card__icon svg { width: 11mm; height: 11mm; }
.card__icon::before { display: none; }
.card__title { margin-top: 2mm; font-size: 9.5pt; }
.card__text { margin-top: 1.5mm; font-size: 9pt; }
.card::after { display: none; }

.strip {
  grid-template-columns: 1fr;
  margin-top: 6mm;
  min-height: 0;
  break-inside: avoid;
}

.strip__seg,
.strip__motto { padding: 3mm; }
.strip__icon { width: 8mm; }
.strip__label,
.strip__note,
.strip__mark-text { font-size: 8.5pt; }
.strip__motto-a { font-size: 10pt; }
.strip__motto-b { font-size: 12pt; }
.strip > * + * { border-left: 0; border-top: 1px solid #ccc; }

.hero__risk {
  margin-top: 5mm;
  font-size: 9pt;
  text-align: left;
}

/* --- The narrative sections ---------------------------------------------- */

.section {
  padding: 10mm 0 0;
  break-inside: auto;
  background: none !important;
  border: 0 !important;
}

.section h2 {
  font-size: 15pt;
  break-after: avoid;
}

.kicker {
  font-size: 8.5pt;
  break-after: avoid;
}

.section__lead { font-size: 11pt; }

.facts,
.split,
.compare {
  gap: 6mm;
}

.facts li,
.compare__col,
.criteria li,
.process li {
  break-inside: avoid;
}

.process {
  display: block;
}

.process li {
  display: grid;
  grid-template-columns: 12mm 1fr;
  border-top: 1px solid #ccc;
}

.process li + li::before { display: none; }

/* A URL the reader cannot click is worth spelling out. */
.site-footer a[href^="mailto:"]::after,
.contact__address a::after {
  content: "";
}

.site-footer {
  margin-top: 10mm;
  padding: 4mm 0 0;
  border-top: 1px solid #999;
  background: none !important;
  break-inside: avoid;
}

.footer-brand img { height: 12mm; }
.footer-notice { font-size: 8.5pt; }