/* Mozambique Local Content Partners
   Bridge palette carried forward from the prior identity:
   NAVY = international governance · CLAY = Mozambican execution · INK = anchor.
   Ground is warm paper, chosen from the use scene: procurement officers, DFI
   analysts and operators reading on a laptop in daylight, and printing. */

:root {
  /* Anchors */
  --ink:        oklch(21% 0.012 260);
  --ink-soft:   oklch(34% 0.012 260);
  --ink-mute:   oklch(50% 0.010 260);
  --ink-faint:  oklch(62% 0.008 260);

  --navy:       oklch(27% 0.058 245);
  --navy-deep:  oklch(20% 0.050 245);
  --navy-lift:  oklch(36% 0.070 245);
  --navy-pale:  oklch(93% 0.018 245);

  --clay:       oklch(53% 0.104 52);
  --clay-lift:  oklch(61% 0.112 52);
  --clay-deep:  oklch(45% 0.098 52);   /* hover fill: darkens, so paper text gains contrast */
  --clay-on-navy: oklch(78% 0.095 60); /* small clay text on navy needs to clear 4.5:1 */
  --clay-pale:  oklch(94% 0.022 60);

  /* Paper */
  --paper:      oklch(98% 0.005 85);
  --paper-2:    oklch(95.5% 0.008 85);
  --paper-3:    oklch(92% 0.010 85);
  --rule:       oklch(21% 0.012 260 / 0.14);
  --rule-firm:  oklch(21% 0.012 260 / 0.28);

  /* On navy. Secondary tiers are tinted FROM the navy hue, never neutral gray:
     desaturated gray on a coloured ground reads washed out. */
  --on-navy:      oklch(97% 0.008 245);
  --on-navy-soft: oklch(89% 0.038 245);
  --on-navy-mute: oklch(81% 0.046 245);

  /* Type */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:  'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --t-12: 0.75rem;   --t-14: 0.875rem;  --t-16: 1rem;
  --t-18: 1.125rem;  --t-20: 1.25rem;   --t-24: 1.5rem;
  --t-28: 1.75rem;   --t-32: 2rem;      --t-40: 2.5rem;
  --t-48: 3rem;

  --display: clamp(2.6rem, 6vw, 5rem);
  --headline: clamp(1.9rem, 3.4vw, 2.9rem);

  /* Space */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 72px; --s-7: 104px; --s-8: 144px;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink-faint) var(--paper-2); }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: var(--t-16);
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

/* Browser surfaces: the parts we did not draw still carry the design. */
::selection { background: var(--clay); color: var(--paper); }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 2px; }
a { color: var(--clay); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--clay-lift); }
input, textarea { caret-color: var(--clay); }
::marker { color: var(--clay); }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
img { max-width: 100%; display: block; }

.wrap { width: min(1180px, calc(100% - 2 * var(--s-3))); margin-inline: auto; }
.measure { max-width: 68ch; }

/* ---------- Header ---------- */
.head {
  position: sticky; top: 0; z-index: 20;
  background: var(--navy);
  border-bottom: 1px solid oklch(97% 0.006 85 / 0.14);
}
.head-in { display: flex; align-items: center; gap: var(--s-4); padding: 14px 0; }

.brand { display: block; text-decoration: none; margin-right: auto; }
.brand .l1, .brand .l2 { display: block; font-family: var(--sans); text-transform: uppercase; }
.brand .l1 {
  font-size: var(--t-12); font-weight: 700; letter-spacing: .3em;
  color: var(--clay-on-navy); line-height: 1;
}
.brand .l2 {
  font-size: var(--t-14); font-weight: 500; letter-spacing: .14em;
  color: var(--on-navy); line-height: 1.4; margin-top: 3px;
}

.nav { display: flex; gap: var(--s-3); align-items: center; }
.nav a {
  color: var(--on-navy-soft); text-decoration: none;
  font-size: var(--t-14); padding: 6px 0;
  border-bottom: 1px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav a:hover { color: var(--on-navy); border-bottom-color: var(--clay-lift); }
.nav a.lang { font-family: var(--mono); font-size: var(--t-12); letter-spacing: .12em; color: var(--on-navy-mute); }
.nav-btn {
  display: none; background: none; border: 1px solid oklch(97% 0.006 85 / 0.3);
  color: var(--on-navy); font-family: var(--sans); font-size: var(--t-14);
  padding: 7px 13px; border-radius: 4px; cursor: pointer;
}

/* ---------- Hero ---------- */
.hero { background: var(--navy); color: var(--on-navy); padding: var(--s-7) 0 var(--s-8); }
.hero h1 {
  font-family: var(--serif); font-weight: 400; font-size: var(--display);
  line-height: 1.04; letter-spacing: -0.022em; color: var(--paper);
  max-width: 20ch;
}
/* Same clay tone as the wordmark: the one that clears AA on navy at any size. */
.hero h1 em { font-style: normal; color: var(--clay-on-navy); }

/* The one authored moment: the bridge span draws once, on load. */
.span-rule { height: 1px; background: var(--clay-lift); margin: var(--s-4) 0 var(--s-4); transform-origin: left center; }
.span-rule { animation: span-draw 1100ms var(--ease) both; }
@keyframes span-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .span-rule { animation: none; } }

.hero p { color: var(--on-navy-soft); font-size: var(--t-18); max-width: 62ch; }
.place {
  font-family: var(--mono); font-size: var(--t-12); letter-spacing: .18em;
  text-transform: uppercase; color: var(--on-navy-mute); margin-bottom: var(--s-3);
}
.cta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.btn {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 28px;
  border-radius: 4px; text-decoration: none; font-size: var(--t-16); font-weight: 500;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn-fill { background: var(--clay); color: var(--paper); border: 1px solid var(--clay); }
.btn-fill:hover { background: var(--clay-deep); border-color: var(--clay-deep); color: var(--paper); transform: translateY(-1px); }
.btn-line { background: transparent; color: var(--on-navy); border: 1px solid oklch(97% 0.008 245 / 0.45); }
.btn-line:hover { border-color: var(--clay-lift); color: var(--paper); transform: translateY(-1px); }

/* ---------- Sections ---------- */
.sec { padding: var(--s-7) 0; }
.sec + .sec { border-top: 1px solid var(--rule); }
.sec.alt { background: var(--paper-2); }
.sec h2 {
  font-family: var(--serif); font-weight: 400; font-size: var(--headline);
  line-height: 1.12; letter-spacing: -0.018em; color: var(--ink); max-width: 24ch;
}
.sec .lede { font-size: var(--t-18); color: var(--ink-soft); margin-top: var(--s-3); max-width: 68ch; }

/* The gap: two sides of one boundary, deliberately asymmetric, split by a real rule. */
.gap-grid {
  display: grid; grid-template-columns: 1fr 1px 1fr; gap: var(--s-5);
  margin-top: var(--s-6); align-items: start;
}
.gap-grid .divider { background: var(--rule); align-self: stretch; }
.side h3 {
  font-family: var(--sans); font-size: var(--t-20); font-weight: 600;
  color: var(--ink); line-height: 1.3; margin-bottom: var(--s-2);
}
.side.intl h3 { color: var(--navy); }
.side.moz h3 { color: var(--clay); }
.side p { max-width: 46ch; }

/* Four stages. The sequence is carried by the stage names in the display voice
   and by the copy, not by numeric index chrome riding beside the headings. */
.phases { margin-top: var(--s-6); border-top: 1px solid var(--rule-firm); }
.phase {
  display: grid; grid-template-columns: minmax(230px, 1fr) 1.2fr; gap: var(--s-5);
  padding: var(--s-5) 0; border-bottom: 1px solid var(--rule);
}
.phase h3 {
  grid-column: 1; grid-row: 1;
  font-family: var(--serif); font-size: var(--t-32); font-weight: 400;
  color: var(--navy); line-height: 1.1; letter-spacing: -0.018em;
}
.phase .outcome { grid-column: 1; grid-row: 2; margin-top: var(--s-1); color: var(--ink-soft); max-width: 34ch; }
.phase ul { grid-column: 2; grid-row: 1 / span 2; margin: 0; padding-left: 1.1em; color: var(--ink-soft); }
.phase li { margin-bottom: 6px; }

/* Two readiness tracks */
.tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-5); margin-top: var(--s-6); }
.track { border: 1px solid var(--rule-firm); border-radius: 12px; padding: var(--s-4); background: var(--paper); }
.track h3 {
  font-family: var(--serif); font-size: var(--t-28); font-weight: 400;
  color: var(--ink); line-height: 1.15; letter-spacing: -0.015em;
}
.track p { margin-top: var(--s-2); color: var(--ink-soft); }
.track ul { margin: var(--s-3) 0 0; padding-left: 1.1em; }
.track li { margin-bottom: 6px; }

/* Incentive band */
.band { background: var(--clay); color: var(--paper); padding: var(--s-7) 0; }
.band h2 { font-family: var(--serif); font-weight: 400; font-size: var(--headline); line-height: 1.1; letter-spacing: -0.018em; color: var(--paper); }
.band p { margin-top: var(--s-3); max-width: 64ch; color: oklch(97% 0.01 60 / 0.92); font-size: var(--t-18); }
.band strong { color: var(--paper); font-weight: 600; }

/* Why us: definition list, not a card grid */
.why { margin-top: var(--s-6); }
.why-row {
  display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: var(--s-5);
  padding: var(--s-4) 0; border-top: 1px solid var(--rule);
}
.why-row:last-child { border-bottom: 1px solid var(--rule); }
.why-row h3 { font-family: var(--sans); font-size: var(--t-20); font-weight: 600; color: var(--navy); line-height: 1.3; }
.why-row p { color: var(--ink-soft); }

/* Contact */
.contact-line { margin-top: var(--s-5); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
.contact-line .lbl { font-family: var(--mono); font-size: var(--t-12); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); }
.contact-line a { font-family: var(--serif); font-size: var(--t-32); color: var(--clay); text-decoration: none; border-bottom: 1px solid var(--clay-pale); }
.contact-line a:hover { border-bottom-color: var(--clay); }

/* Footer */
.foot { background: var(--navy-deep); color: var(--on-navy-soft); padding: var(--s-6) 0 var(--s-5); font-size: var(--t-14); }
.foot-in { display: flex; flex-wrap: wrap; gap: var(--s-5); justify-content: space-between; }
.foot .brand .l2 { color: var(--on-navy); }
.foot .tag-line { font-family: var(--serif); font-size: var(--t-20); color: var(--on-navy); max-width: 30ch; line-height: 1.35; }
@media (max-width: 900px) {
  .gap-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .gap-grid .divider { height: 1px; width: 100%; }
  .phase { grid-template-columns: 1fr; gap: var(--s-2); }
  .phase h3, .phase .outcome, .phase ul { grid-column: 1; grid-row: auto; }
  .why-row { grid-template-columns: 1fr; gap: var(--s-2); }
}
@media (max-width: 760px) {
  .nav-btn { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--navy-deep); padding: var(--s-2) var(--s-3) var(--s-3);
  }
  .nav.open { display: flex; }
  .head-in { position: relative; }
  .nav a { padding: 10px 0; width: 100%; }
  .hero { padding: var(--s-6) 0 var(--s-7); }
  .sec { padding: var(--s-6) 0; }
  .contact-line a { font-size: var(--t-24); word-break: break-word; }
}