/* GENERATED by build.py — do not edit. Sources:
 *   _ds/mafa-design-system-a7c857a5-673c-480d-a182-7c65e6d66b63/tokens/{fonts.css,colors.css,typography.css,spacing.css}
 *   src/css/site.css
 * Edit those, then re-run: python3 build.py
 *
 * The @font-face rules below use url('../assets/fonts/…'), which is why the
 * webfonts are copied to public_html/assets/fonts/ and this file lives in
 * public_html/css/ — the token file's own relative paths then resolve
 * unchanged, so no path rewriting happens anywhere in this build.
 */

/* ---- _ds tokens: fonts.css ---- */
/* MAFA Holding — webfonts (extraites du deck de marque : Space Grotesk, Work Sans, Outfit) */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/space-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/space-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/space-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/work-sans-400.woff2') format('woff2')}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/work-sans-600.woff2') format('woff2')}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/work-sans-700.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url('../assets/fonts/outfit-300.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/outfit-400.woff2') format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/outfit-500.woff2') format('woff2')}

/* ---- _ds tokens: colors.css ---- */
/* MAFA Holding — palette (Branding V1, p.26) */
:root{
/* primaires */
--mafa-noir:#180206;
--mafa-rouge:#8D0C23;
--mafa-or:#E1C389;
/* secondaires */
--mafa-bleu:#1F2F79;
--mafa-vert:#0C4E2C;
--mafa-creme:#E2DFCE;
/* dérivés observés dans le deck */
--mafa-ivoire:#FBF9F2;
/* sémantique */
--surface-page:#FFFFFF;
--surface-panel:var(--mafa-creme);
--surface-soft:var(--mafa-ivoire);
--surface-inverse:var(--mafa-rouge);
--surface-dark:var(--mafa-noir);
--surface-gold:var(--mafa-or);
--text-body:var(--mafa-noir);
--text-heading:var(--mafa-noir);
--text-accent:var(--mafa-rouge);
--text-on-inverse:var(--mafa-ivoire);
--text-muted:#6E6A5E;
--border-subtle:#D4D0C0;
--focus-ring:var(--mafa-bleu);
--positive:var(--mafa-vert);
--info:var(--mafa-bleu);
}

/* ---- _ds tokens: typography.css ---- */
/* MAFA Holding — typographie
   Spec (p.28) : Titres d'affiche = Space Grotesk ; Titres / Corps = Arial.
   Pratique du deck : titres = Space Grotesk Bold, corps = Outfit, emphase = Work Sans Bold. */
:root{
--font-display:'Space Grotesk','Arial',sans-serif;
--font-heading:'Space Grotesk','Arial',sans-serif;
--font-body:'Outfit','Arial',sans-serif;
--font-emphasis:'Work Sans','Arial',sans-serif;
/* échelle (base deck 1920×1080) */
--text-hero:72px;      /* titres d'affiche */
--text-h1:48px;
--text-h2:34px;
--text-h3:24px;
--text-lead:21px;
--text-base:17px;
--text-small:14px;
--text-caption:12px;
/* graisse & rythme */
--weight-display:700;
--weight-heading:700;
--weight-body:400;
--weight-emphasis:700;
--leading-tight:1.1;
--leading-heading:1.2;
--leading-body:1.55;
--tracking-caps:0.18em; /* labels espacés type M O D E R N I S E R */
}

/* ---- _ds tokens: spacing.css ---- */
/* MAFA Holding — espacement, bords, élévation : géométrie stricte, angles vifs, aplats sans ombre */
:root{
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
--space-9:96px;
/* angles vifs partout — le pixel carré est le motif de la marque */
--radius-none:0;
--radius-default:0;
/* bordures */
--border-width:1px;
--border-strong:2px;
/* pas d'ombres portées : la hiérarchie se fait par aplats de couleur et superposition */
--shadow-none:none;
--overlay-photo:rgba(24,2,6,0.55); /* voile sombre sur photos plein cadre */
}

/* ---- src/css/site.css ---- */
/* ============================================================================
   MAFA Holding — site stylesheet
   ----------------------------------------------------------------------------
   The brand token files from _ds/mafa-design-system-.../tokens/ are PREPENDED to
   this file by build.py, so --mafa-rouge, --font-heading, --space-6 etc. are all
   available below and are single-sourced from the design system. Do not restate a
   token value here; add the token to the design system instead.

   Brand rules this file must not break (design system readme.md, from the brand
   book "Branding MAFA V1"):
     - Corners are 0px everywhere. The square is the brand motif. Never round.
     - No shadows. Hierarchy comes from flat colour planes and overlap.
     - No gradients, no textures.
     - Hover darkens a flat fill; never scale, never add elevation.
   ========================================================================== */

/* --- reset ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: var(--leading-body);
}

img { max-width: 100%; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  text-wrap: pretty;
}

p { margin: 0; }

/* The UA gives <blockquote> a 40px inline margin. Every quote on the site is a
   <blockquote> laid out by a .wrap or a grid column, so unreset it pushed the
   quote off the page's rail — MEASURED at 1920px, the home pull-quote's red
   plane began at 412px while every section above and below it began at 372px. */
blockquote { margin: 0; }

a { color: var(--text-accent); }
a:hover { color: #73091C; }

strong { font-family: var(--font-emphasis); font-weight: var(--weight-emphasis); }

:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--mafa-noir);
  color: var(--mafa-ivoire);
  font-family: var(--font-heading);
  font-size: 14px;
  padding: 12px 20px;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  color: var(--mafa-ivoire);
}

/* --- layout scaffolding --------------------------------------------------- */

/* A layout constant, not a brand token — the design system carries no page-width
   token, so nothing is being restated from _ds here. Every band of colour on the
   site runs the full viewport while its content stays inside this one container,
   which is what keeps the ten pages on a single left rail at any width. Nothing
   is allowed to escape it: a section that bleeds its content instead of just its
   background drifts as the viewport grows — MEASURED before this rule was made
   the only one, the home headline sat 32px right of the figures below it at
   3200px and 47px right at 3840px. */
:root {
  --page-max: 1240px;
}

.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: var(--space-6);
}

.section { padding: 88px 0; }
.section--sm { padding: 72px 0; }
.section--lg { padding: 96px 0; }

.s-white  { background: var(--surface-page); }
.s-ivory  { background: var(--mafa-ivoire); }
.s-cream  { background: var(--mafa-creme); }
.s-noir   { background: var(--mafa-noir);  color: var(--mafa-ivoire); }
.s-rouge  { background: var(--mafa-rouge); color: var(--mafa-ivoire); }
.s-bleu   { background: var(--mafa-bleu);  color: var(--mafa-ivoire); }
.s-vert   { background: var(--mafa-vert);  color: var(--mafa-ivoire); }

.rule-top { border-top: 1px solid var(--border-subtle); }
.rule-bottom { border-bottom: 1px solid var(--border-subtle); }

.stack { display: flex; flex-direction: column; gap: var(--space-5); }
.stack--tight { gap: var(--space-4); }
.stack--loose { gap: 28px; }

.measure-sm { max-width: 720px; }
.measure    { max-width: 760px; }
.measure-md { max-width: 840px; }
.measure-lg { max-width: 880px; }

/* Flow spacing. Sibling selectors instead of utility classes or inline margins:
   the gap between a section label and what it introduces is a property of the
   pairing, not of either element, and this keeps the page markup free of
   one-off style attributes. */
.eyebrow + .stats,
.eyebrow + .rows,
.eyebrow + .cards,
.eyebrow + .features,
.eyebrow + .tiles,
.eyebrow + .subsidiaries,
.eyebrow + .subsidiary-row { margin-top: var(--space-7); }

.eyebrow + .title-section { margin-top: var(--space-4); }
.title-section + .rows,
.title-section + .tiles,
.title-section + .cards { margin-top: var(--space-7); }
.title-section + .text,
.title-section + .lead { margin-top: var(--space-5); }
.text + .acronyms,
.lead + .acronyms { margin-top: 56px; }

/* --- type ----------------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  line-height: 1.4;
}
.eyebrow--rouge { color: var(--mafa-rouge); }
.eyebrow--or    { color: var(--mafa-or); }
.eyebrow--noir  { color: var(--mafa-noir); }

.title-hero    { font-size: 58px; line-height: 1.08; }
.title-page    { font-size: 46px; line-height: 1.1; }
.title-page-lg { font-size: 50px; line-height: 1.1; }
.title-section { font-size: 38px; line-height: 1.15; }
.title-band    { font-size: 32px; line-height: 1.2; }
.title-band-sm { font-size: 30px; line-height: 1.2; }

.lead      { font-size: 19px; line-height: 1.6; }
.lead--sm  { font-size: 18px; line-height: 1.6; }
.text      { font-size: 17px; line-height: 1.65; }
.text--sm  { font-size: 16px; line-height: 1.6; }
.text--xs  { font-size: 15px; line-height: 1.6; }

.on-dark-muted { color: rgba(251, 249, 242, .92); }

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-block;
  width: max-content;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .03em;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-none);
  padding: 15px 28px;
  cursor: pointer;
}
.btn--lg { font-size: 16px; padding: 16px 32px; }

.btn--or {
  background: var(--mafa-or);
  color: var(--mafa-noir);
}
.btn--or:hover { background: #D3B172; color: var(--mafa-noir); }

.btn--rouge {
  background: var(--mafa-rouge);
  color: var(--mafa-ivoire);
}
.btn--rouge:hover { background: #73091C; color: var(--mafa-ivoire); }

.btn--ghost-ivory {
  background: transparent;
  border: var(--border-strong) solid var(--mafa-ivoire);
  color: var(--mafa-ivoire);
  padding: 13px 26px;
}
.btn--ghost-ivory:hover { background: var(--mafa-ivoire); color: var(--mafa-rouge); }

.btn--ghost-ivory-noir:hover { background: var(--mafa-ivoire); color: var(--mafa-noir); }

/* --- navigation ----------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
}
.nav__inner {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.nav__logo img { height: 36px; width: auto; display: block; }

.nav__desktop { display: flex; align-items: center; gap: 28px; }

.nav__link {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .05em;
  text-decoration: none;
  color: var(--mafa-noir);
  padding: 26px 0 24px;
  border-bottom: var(--border-strong) solid transparent;
}
.nav__link:hover { color: var(--mafa-rouge); }
.nav__link--active {
  color: var(--mafa-rouge);
  border-bottom-color: var(--mafa-rouge);
}

.nav__cta {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .05em;
  text-decoration: none;
  background: var(--mafa-rouge);
  color: var(--mafa-ivoire);
  padding: 11px 22px;
}
.nav__cta:hover { background: #73091C; color: var(--mafa-ivoire); }

/* The mobile menu is a <details> disclosure: full navigation on a phone with no
   JavaScript on the page at all. Hidden at desktop widths, where .nav__desktop
   carries the same links (both are emitted from one link list in site.json, so
   they cannot drift apart). */
.nav__mobile { display: none; position: relative; }
.nav__toggle {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mafa-noir);
  padding: 10px 0;
  cursor: pointer;
  list-style: none;
}
.nav__toggle::-webkit-details-marker { display: none; }
.nav__toggle::after { content: " +"; color: var(--mafa-rouge); }
.nav__mobile[open] .nav__toggle::after { content: " −"; }

/* The panel is hidden with an explicit display:none rather than by leaning on the
   UA's own hiding of a closed <details>. MEASURED, not assumed: with only the UA
   rule, a closed panel was still laid out (64x375 at x=813 in a 900px viewport,
   contentVisibility:visible) — an invisible block of live nav links floating over
   the header on every page below the breakpoint. It is also anchored to the toggle
   with right/left:auto instead of left:0;right:0, because which ancestor becomes
   the containing block inside <details> proved not to be dependable. */
.nav__panel {
  display: none;
  position: absolute;
  top: calc(100% + 1px);
  right: 0;
  left: auto;
  z-index: 1;
  min-width: 260px;
  width: max-content;
  max-width: 78vw;
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  flex-direction: column;
  padding: var(--space-4) var(--space-5) var(--space-5);
  gap: 2px;
}
.nav__mobile[open] .nav__panel { display: flex; }
.nav__panel-link {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  color: var(--mafa-noir);
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.nav__panel-link:hover { color: var(--mafa-rouge); }
.nav__panel-link--active { color: var(--mafa-rouge); }
.nav__panel .btn { margin-top: var(--space-4); }

/* --- home hero ------------------------------------------------------------ */

/* The opener is the .s-rouge + .wrap .split composition every other page uses,
   so its content sits on the page rail and stays centred at any width, and the
   split's own stacking rule below 900px carries the responsive behaviour. Only
   the button row is specific to it. */
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); }

/* --- key figures ---------------------------------------------------------- */

.stats { display: grid; gap: 40px; }
.stats--5 { grid-template-columns: repeat(5, 1fr); gap: var(--space-6); }
.stats--2 { grid-template-columns: 1fr 1fr; gap: var(--space-7); }

.stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: var(--border-strong) solid var(--mafa-noir);
  padding-top: 18px;
}
.stat--accent { border-top-color: var(--mafa-rouge); }
.stat--or { border-top-color: var(--mafa-or); padding-top: 20px; }

/* 34px, not the artboard's 38px, and the reason is measured rather than aesthetic.
   The figures use French non-breaking thousands separators (U+00A0), as they must —
   with an ordinary space the browser broke "1 368 000+" after "1 368", which reads
   as a different and much smaller number. Unbreakable, the widest figure
   ("1 400 000+") measured 207px at 38px inside a 203px column of the five-column
   grid the design specifies, overflowing into its neighbour. At 34px it measures
   ~185px and fits with headroom. The artboard only appeared to fit because it was
   silently splitting the number across two lines. */
.stat__num {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 34px;
  line-height: 1;
  color: var(--mafa-noir);
}
.stat__num--rouge { color: var(--mafa-rouge); }
.stat__num--lg { font-size: 52px; color: inherit; }

.stat__label { font-size: 14px; line-height: 1.5; }
.stat__label--lg { font-size: 16px; line-height: 1.6; }

/* --- numbered rows (pillars, pipelines, components) ----------------------- */

.rows { display: flex; flex-direction: column; }

.row {
  display: grid;
  grid-template-columns: 120px 1fr 2fr;
  gap: var(--space-6);
  align-items: baseline;
  padding: 36px 0;
  border-top: 1px solid var(--border-subtle);
}
.rows > .row:last-child { border-bottom: 1px solid var(--border-subtle); }

.row--link {
  text-decoration: none;
  color: var(--text-body);
  padding: var(--space-6) 0;
}
.row--link:hover { background: var(--mafa-ivoire); color: var(--text-body); }

.row--loose { padding: 40px 0; }

/* A row whose body is a block of sub-cards rather than a title + text pair. */
.row--stacked { grid-template-columns: 120px 1fr; align-items: start; padding: 40px 0; }

.row__num {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 56px;
  line-height: 1;
  color: var(--mafa-or);
}
.row__title { font-size: 21px; line-height: 1.3; }
.row__title--lg { font-size: 26px; line-height: 1.25; }
.row__title--md { font-size: 22px; line-height: 1.3; }
.row__text { font-size: 16px; line-height: 1.6; }

/* --- quote bands ---------------------------------------------------------- */

.quote {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-5);
  align-items: start;
}
.quote--narrow { grid-template-columns: 90px 1fr; }

.quote__mark {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 120px;
  line-height: .7;
  color: var(--mafa-or);
}
.quote--narrow .quote__mark { font-size: 96px; }

.quote__text {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 30px;
  line-height: 1.35;
  text-wrap: pretty;
}
.quote__text--sm { font-size: 26px; line-height: 1.4; }

/* The home page's overlapping quote: a rouge block sitting over the photo.
   The overlap is the brand's layout motif (flat blocks overlapping, no shadow). */
.quote-overlap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.quote-overlap__block {
  position: relative;
  z-index: 1;
  background: var(--mafa-rouge);
  color: var(--mafa-ivoire);
  padding: 64px 56px;
  margin-right: -64px;
}
.quote-overlap__mark {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 96px;
  line-height: .6;
  color: var(--mafa-or);
  margin-bottom: var(--space-5);
}
.quote-overlap__text {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 27px;
  line-height: 1.35;
  text-wrap: pretty;
}
.quote-overlap__media { position: relative; min-height: 460px; }
.quote-overlap__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- split sections (text beside a photograph) ---------------------------- */

.split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
.split--photo-first { grid-template-columns: 1fr 1.2fr; }

.split__media { position: relative; min-height: 480px; }
.split__media--sm { min-height: 420px; }
.split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Biases the crop towards the top of the photograph. object-fit:cover discards
   height from both edges equally, which decapitates a subject standing high in
   the frame: MEASURED on the home photograph (1984x2050) in the stacked 460x300
   mobile frame, the centred crop cuts 87px off the top while the head starts
   60px down. 28% keeps it, with headroom, at every width. */
.split__media--top img { object-position: 50% 28%; }

/* --- call-to-action band -------------------------------------------------- */

.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}
.cta-band__text { display: flex; flex-direction: column; gap: var(--space-3); max-width: 640px; }
.cta-band__title { max-width: 640px; }

/* --- cards ---------------------------------------------------------------- */

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.cards--3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

.card {
  border: 1px solid var(--border-subtle);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--mafa-ivoire);
}
.card__title { font-size: 17px; line-height: 1.3; }

/* Solutions hub tiles. The alternating white/ivory ground reproduces the
   checkerboard the design draft generated from its index parity. */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }

.tile {
  text-decoration: none;
  color: var(--text-body);
  border: 1px solid var(--border-subtle);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: var(--surface-page);
}
.tile:nth-child(even) { background: var(--mafa-ivoire); }
.tile:hover { background: var(--mafa-creme); color: var(--text-body); }

.tile__num {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 64px;
  line-height: 1;
  color: var(--mafa-rouge);
}
.tile__title { font-size: 24px; line-height: 1.25; }
.tile__more {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: .05em;
  color: var(--mafa-rouge);
  margin-top: auto;
}

/* --- subsidiaries --------------------------------------------------------- */

/* Each subsidiary carries its own brand colour as ONE accent — the left rule and
   the role label — and nothing more. Its full brand system is not reproduced here,
   and deliberately so: Colibri's charter mandates rounded corners (4–24px, plus a
   pill radius) and low green-tinted shadows, and both subsidiaries run their own
   type systems (Colibri: Big Caslon + Montserrat; Crystal: Migha + Archivo + IBM
   Plex Mono). MAFA's brand book states 0px corners and no shadows as constraints,
   not preferences (governing principle 4), so a faithfully-themed subsidiary block
   on this site would have to break one brand's rules or the other's. Full brand
   expression belongs on each subsidiary's own domain — which is what both charters
   are built for, both logos reading "BY MAFA HOLDING". See DEC-010.

   Two custom properties, not one, because Crystal's signature blue #63ADE0 is a
   graphic colour that fails text contrast on white; its own charter specifies
   #2C6A98 for blue TEXT (AA). So --accent paints the rule and --accent-text the
   label. */
.subsidiaries {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.subsidiary {
  --accent: var(--mafa-noir);
  --accent-text: var(--mafa-noir);
  background: var(--mafa-ivoire);
  border-left: 4px solid var(--accent);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.subsidiary--colibri { --accent: #0C6153; --accent-text: #0C6153; }
.subsidiary--crystal { --accent: #63ADE0; --accent-text: #2C6A98; }
/* Cassini has no brand charter yet, so it keeps the inherited MAFA noir rather
   than an invented brand colour. Give it its real accent once the charter exists. */
.subsidiary--cassini { --accent: var(--mafa-noir); --accent-text: var(--mafa-noir); }

.subsidiary__name { font-size: 26px; line-height: 1.2; }
.subsidiary__role {
  font-family: var(--font-emphasis);
  font-weight: var(--weight-emphasis);
  font-size: 14px;
  color: var(--accent-text);
}

/* The compact home-page band: same accent rule, one line each, links to the page. */
.subsidiary-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.subsidiary-link {
  --accent: var(--mafa-noir);
  --accent-text: var(--mafa-noir);
  text-decoration: none;
  color: var(--text-body);
  border-left: 4px solid var(--accent);
  padding: 4px 0 4px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.subsidiary-link:hover { color: var(--text-body); background: var(--mafa-ivoire); }
.subsidiary-link--colibri { --accent: #0C6153; --accent-text: #0C6153; }
.subsidiary-link--crystal { --accent: #63ADE0; --accent-text: #2C6A98; }
.subsidiary-link--cassini { --accent: var(--mafa-noir); --accent-text: var(--mafa-noir); }

.subsidiary-link__name { font-size: 21px; line-height: 1.2; }
.subsidiary-link__role {
  font-family: var(--font-emphasis);
  font-weight: var(--weight-emphasis);
  font-size: 13px;
  color: var(--accent-text);
}

/* Acronym panels (MA / FA) on the vision page. */
.acronyms { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }

.acronym {
  background: var(--mafa-creme);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.acronym__letters {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 72px;
  line-height: 1;
  color: var(--mafa-rouge);
}

/* Feature pairs with a heavy top rule. `--3` is for a section with three of them: in the
   default two-column grid an odd item leaves an empty quadrant and a large dead gap before
   the next band, which reads as "a card failed to load" rather than as deliberate space. */
.features { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.features--3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.feature {
  border-top: var(--border-strong) solid var(--mafa-noir);
  padding: 28px 0 12px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.feature__title { font-size: 23px; line-height: 1.25; }

/* --- solution page header (giant ghost numeral) --------------------------- */

.solution-hero {
  position: relative;
  overflow: hidden;
  background: var(--mafa-creme);
}
.solution-hero__ghost {
  position: absolute;
  right: -16px;
  bottom: -56px;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 300px;
  line-height: 1;
  color: var(--mafa-ivoire);
  pointer-events: none;
  user-select: none;
}
.solution-hero__inner {
  position: relative;
  padding-block: 80px 88px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.backlink {
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mafa-rouge);
  width: max-content;
}
.backlink:hover { color: #73091C; }

.solution-hero__label { margin-top: var(--space-5); }

/* --- previous / next pager ------------------------------------------------ */

.pager {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-6);
}
.pager--end { justify-content: flex-end; }
.pager--start { justify-content: flex-start; }

.pager__link {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  color: var(--mafa-rouge);
}
.pager__link:hover { color: #73091C; }

/* --- contact page --------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

/* overflow-wrap:anywhere, not break-word, and the difference is the whole point:
   only `anywhere` reduces an element's intrinsic min-content contribution. An email
   address is one unbreakable token — MEASURED at 320px, "contact@mafa.africa" wanted
   207px inside a 150px box, which pushed this card's min-content to 305px and forced
   the 1fr grid column wider than the viewport (documentElement.scrollWidth 325 vs 320).
   `break-word` would have wrapped the text visually and left the overflow in place.
   Inherited, so it covers the paragraphs, the button and the subject list below. */
.contact-card {
  background: var(--surface-page);
  border: 1px solid var(--border-subtle);
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  overflow-wrap: anywhere;
}

.contact-checklist {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 16px;
  line-height: 1.6;
}

.subject-list { display: flex; flex-direction: column; gap: 0; }
.subject-link {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  text-decoration: none;
  color: var(--text-body);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--border-subtle);
}
.subject-list > .subject-link:last-child { border-bottom: 1px solid var(--border-subtle); }
.subject-link:hover { background: var(--mafa-ivoire); color: var(--mafa-rouge); }
.subject-link::after { content: "→"; color: var(--mafa-rouge); }

.contact-blocks { display: flex; flex-direction: column; }
.contact-block {
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-block--rouge { background: var(--mafa-rouge); color: var(--mafa-ivoire); }
.contact-block--cream { background: var(--mafa-creme); color: var(--mafa-noir); }

.contact-block__title { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: 20px; }

/* <address> is the right element for a postal address, but every browser italicises it by
   default, which fights a brand that has no italic anywhere. */
address { font-style: normal; }
.contact-address { font-size: 16px; line-height: 1.7; }

.contact-email {
  font-size: 16px;
  text-decoration: none;
  font-family: var(--font-emphasis);
  font-weight: var(--weight-emphasis);
  overflow-wrap: anywhere;
}
.contact-block--rouge .contact-email { color: var(--mafa-ivoire); }
.contact-block--rouge .contact-email:hover { color: var(--mafa-or); }
.contact-block--cream .contact-email { color: var(--mafa-rouge); }
.contact-block--cream .contact-email:hover { color: #73091C; }

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

.footer { background: var(--mafa-noir); color: var(--mafa-ivoire); }

.footer__grid {
  padding-top: 72px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: var(--space-7);
}
.footer__brand { display: flex; flex-direction: column; gap: 20px; }
/* align-self is the load-bearing part, not the height. .footer__brand is a COLUMN flex
   container, so its default align-items:stretch stretches a width:auto image across the
   whole column on the cross axis while height:40px stays put — the logo rendered ~640px
   wide at 40px tall, badly distorted, and the brand book explicitly says never to
   recompose the wordmark. The nav logo is unaffected because it sits in a ROW flex, where
   the cross axis is vertical. */
.footer__logo {
  height: 40px;
  width: auto;
  align-self: flex-start;
  display: block;
}
.footer__tagline {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--mafa-or);
  line-height: 1.8;
}
.footer__col { display: flex; flex-direction: column; gap: 14px; }
.footer__head {
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--mafa-or);
  margin-bottom: 6px;
}
.footer__link {
  color: var(--mafa-ivoire);
  text-decoration: none;
  font-size: 14px;
  overflow-wrap: anywhere; /* the footer carries the same unbreakable email token */
}
.footer__link:hover { color: var(--mafa-or); }
.footer__text { font-size: 14px; line-height: 1.7; }
.footer__address { font-size: 14px; line-height: 1.7; }

.footer__bottom {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
  border-top: 1px solid rgba(251, 249, 242, .18);
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  font-size: 13px;
  color: rgba(251, 249, 242, .65);
}

/* ============================================================================
   Responsive. The artboards are fixed 1280px desktop compositions with no
   breakpoints; everything below is added for the real site. Order matters —
   these are max-width overrides, so they must stay after the base rules.
   ========================================================================== */

@media (max-width: 1080px) {
  .stats--5 { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .nav__desktop { display: none; }
  .nav__mobile { display: block; }
  .nav__inner { height: 68px; }

  .quote-overlap { grid-template-columns: 1fr; }
  .quote-overlap__block { margin-right: 0; padding: 48px var(--space-6); order: 2; }
  .quote-overlap__media { order: 1; min-height: 280px; }

  .split, .split--photo-first { grid-template-columns: 1fr; gap: var(--space-7); }
  .split__media, .split__media--sm { min-height: 300px; order: -1; }

  .row, .row--stacked {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-6) 0;
  }
  .row__num { font-size: 44px; }

  .cards, .cards--3, .features, .stats--2, .tiles, .acronyms,
  .subsidiaries, .subsidiary-row { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; gap: var(--space-7); }
  .contact-card { padding: var(--space-6); }

  .solution-hero__ghost { font-size: 190px; bottom: -32px; }
  .solution-hero__inner { padding-block: 56px 64px; }

  .section { padding: 64px 0; }
  .section--sm { padding: 56px 0; }
  .section--lg { padding: 72px 0; }

  .title-hero { font-size: 40px; }
  .title-page, .title-page-lg { font-size: 34px; }
  .title-section { font-size: 30px; }
  .title-band, .title-band-sm { font-size: 26px; }
  .quote__text { font-size: 24px; }
  .quote__text--sm { font-size: 22px; }
  .quote-overlap__text { font-size: 22px; }
  .quote__mark, .quote--narrow .quote__mark { font-size: 80px; }
  .quote { grid-template-columns: 1fr; gap: var(--space-2); }
  .lead { font-size: 18px; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); padding-top: 56px; }
  .footer__brand { grid-column: auto; }
  .footer__bottom { flex-direction: column; gap: var(--space-3); }
}

@media (max-width: 560px) {
  .wrap { padding-inline: 20px; }

  .stats--5 { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
  .stat__num { font-size: 26px; }   /* measured: the widest figure needs 164px at 30px in a 162px column */
  .stat__num--lg { font-size: 34px; }

  .title-hero { font-size: 33px; }
  .title-page, .title-page-lg { font-size: 29px; }
  .title-section { font-size: 26px; }
  .title-band, .title-band-sm { font-size: 23px; }
  .row__title--lg { font-size: 22px; }
  .tile { padding: var(--space-6) var(--space-5); }
  .tile__num { font-size: 48px; }
  .tile__title { font-size: 21px; }
  .acronym { padding: var(--space-6) var(--space-5); }
  .acronym__letters { font-size: 56px; }

  .solution-hero__ghost { font-size: 130px; bottom: -16px; right: -8px; }

  .btn, .btn--lg { width: 100%; text-align: center; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }

  .footer__grid { grid-template-columns: 1fr; }
  .pager { flex-direction: column; }
}

/* Below ~348px two columns of key figures cannot hold them: MEASURED, the widest
   figure needs 142px, so two columns plus the 24px gap need 308px of content width
   while a 320px viewport offers 280 — which pushed documentElement.scrollWidth to
   325 and scrolled the whole page sideways. Stacking is the legible answer; the
   alternative was a 22px figure, too small for the numbers the page is built on. */
@media (max-width: 380px) {
  .stats--5 { grid-template-columns: 1fr; }
}

/* Respect a reader who has asked for less motion. Nothing here animates today;
   this is the guard so that a later addition cannot ignore the preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .nav, .skip-link, .pager, .cta-band { display: none; }
  body { color: #000; background: #fff; }
}