/* ══════════════════════════════════════════════════════════════════
   ML CORPORATE SERVICES | About page sections

   Section rules only. Type roles, buttons and the card typography come
   from ml-site.css and are not restated here.

   Addressing follows the same policy as the rest of the build:
   containers do not output custom CSS classes, so every section is
   addressed by its Elementor element ID (#about-*); widgets are
   addressed by their widget class.

   Full-bleed sections need `--width:100%; max-width:none` because
   Elementor otherwise constrains a top-level container to the theme
   content width.
   ══════════════════════════════════════════════════════════════════ */

/* ── Hero (photograph, ink) ─────────────────────────────────────── */

#about-hero.e-con{
  position:relative;
  min-height:clamp(500px,68svh,700px);
  padding:clamp(104px,12vh,144px) var(--ml-gut) clamp(52px,6.5vh,78px);
  background-color:#0b0b0a;
  background-position:center 38%;
  background-size:cover;
  background-repeat:no-repeat;
  justify-content:center;
  align-items:center;
  text-align:center;
  --width:100%;
  max-width:none;
}

#about-hero.e-con::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.36) 0%,rgba(0,0,0,.22) 45%,rgba(0,0,0,.46) 100%),
    linear-gradient(90deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.08) 50%,rgba(0,0,0,.22) 100%);
}

#about-hero > *{position:relative;z-index:2}

#about-hero-copy.e-con{
  max-width:1120px;
  padding:0;
  align-items:center;
  text-align:center;
  --width:100%;
}

#about-hero .ml-hero-mark img{
  height:auto;
  display:block;
  opacity:.96;
}

#about-hero .ml-hero-mark{margin-bottom:clamp(18px,2.8vh,28px)}

#about-hero .elementor-heading-title{color:var(--ml-paper)}
#about-hero .ml-eyebrow .elementor-heading-title{color:rgba(255,255,255,.86)}

#about-hero .ml-page-title .elementor-heading-title{
  font-size:clamp(36px,4.2vw,62px);
  line-height:.96;
  letter-spacing:-.05em;
  max-width:28ch;
  margin-top:clamp(14px,2vh,22px);
}

#about-hero .ml-lead{margin-top:clamp(20px,2.8vh,32px);max-width:840px}

#about-hero .ml-lead p{
  font-size:clamp(15px,1.05vw,17.5px);
  line-height:1.56;
  color:rgba(255,255,255,.9);
}

#about-hero .ml-lead p + p{margin-top:clamp(12px,1.8vh,18px)}

/* ── Why we exist (paper, two columns) ──────────────────────────── */

#about-why.e-con{
  background-color:var(--ml-paper);
  color:var(--ml-ink);
  padding:clamp(96px,12vw,182px) var(--ml-gut);
  --width:100%;
  max-width:none;
}

#about-why-wrap.e-con{
  max-width:1180px;
  margin:0 auto;
  padding:0;
  gap:80px;
  align-items:flex-start;
}

#about-why-a.e-con,
#about-why-b.e-con{padding:0;--width:100%}

#about-why .ml-section-title .elementor-heading-title{
  margin-top:24px;
  max-width:14ch;
}

#about-why .ml-body,
#about-why .ml-body p{color:#4a4a4a}

/* ── Our perspective (ink, four principle cards) ────────────────── */

#about-persp.e-con{
  background-color:#0a0a0a;
  color:var(--ml-paper);
  padding:clamp(96px,11vw,140px) var(--ml-gut) clamp(104px,12vw,150px);
  --width:100%;
  max-width:none;
}

#about-persp-head.e-con{
  max-width:1400px;
  margin:0 auto;
  padding:0;
  align-items:center;
  text-align:center;
}

#about-persp-head .ml-eyebrow .elementor-heading-title{color:rgba(255,255,255,.5)}

#about-persp-head .ml-section-title .elementor-heading-title{
  color:var(--ml-paper);
  margin-top:22px;
}

#about-persp-grid.e-con{
  max-width:1400px;
  margin:72px auto 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
}

#about-pcard-1.e-con,
#about-pcard-2.e-con,
#about-pcard-3.e-con,
#about-pcard-4.e-con{
  background-color:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:34px 28px 36px;
  --width:100%;
  max-width:none;
  transition:transform .32s ease,background-color .32s ease,border-color .32s ease;
}

#about-pcard-1:hover,
#about-pcard-2:hover,
#about-pcard-3:hover,
#about-pcard-4:hover{
  background-color:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.24);
  transform:translateY(-3px);
}

#about-persp-grid .ml-moment-num .elementor-heading-title{
  font-size:.75rem;
  letter-spacing:.02em;
  color:rgba(255,255,255,.5);
}

#about-persp-grid .ml-moment-title .elementor-heading-title{
  font-weight:570;
  font-size:1.25rem;
  line-height:1.2;
  letter-spacing:-.025em;
  margin-top:18px;
}

#about-persp-grid .ml-body,
#about-persp-grid .ml-body p{
  font-size:.9688rem;
  line-height:1.68;
  color:rgba(255,255,255,.76);
  margin-top:16px;
}

/* The three tiers line up ACROSS the four cards, the same treatment the
   credential cards carry. Measured before: the number and the title already
   matched at 35 and 47 on all four, but the body sat at 124 on card 03 against
   103 on the other three, because "Structures Should Serve People." is the one
   title that wraps to two lines. A 21px step across a row of principles reads
   as carelessness.

   Subgrid: the row defines three tracks, each card adopts them, so every tier is
   sized by the tallest card and starts on the same line. Row gap is zeroed
   because the widgets carry their own top margins (18px and 16px), preserving
   the existing rhythm rather than inventing one.

   Gated to min-width 1181px, which is where these four sit in a single row.
   Below it the grid goes to two columns and then one, and row-gap:0 would
   collapse the gap BETWEEN card rows — that exact fault was measured on the
   credential cards at 900px and 700px, where they sat touching. Alignment is a
   same-row problem, so it is a same-row rule. */
@media (min-width:1181px){
  @supports (grid-template-rows: subgrid){
    #about-persp-grid.e-con{
      grid-template-rows:auto auto auto;
      row-gap:0;
    }

    #about-persp-grid > .e-con{
      grid-row:span 3;
      display:grid;
      grid-template-rows:subgrid;
      align-content:start;
    }
  }
}

/* ── How we work (paper, four steps) ────────────────────────────── */

#about-how.e-con{
  background-color:var(--ml-paper);
  color:var(--ml-ink);
  padding:clamp(96px,13vw,200px) var(--ml-gut);
  --width:100%;
  max-width:none;
}

#about-how-head.e-con{
  max-width:1300px;
  margin:0 auto;
  padding:0;
  align-items:center;
  text-align:center;
}

#about-how-head .ml-section-title .elementor-heading-title{margin-top:22px}

#about-how-steps.e-con{
  max-width:1300px;
  margin:clamp(56px,7vw,110px) auto 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  align-items:start;
}

#about-step-1.e-con,
#about-step-2.e-con,
#about-step-3.e-con,
#about-step-4.e-con{
  padding:0 26px;
  text-align:center;
  align-items:center;
  --width:100%;
  max-width:none;
}

.ml-step-dot .elementor-heading-title{
  width:58px;
  height:58px;
  border:1px solid var(--ml-ink);
  border-radius:50%;
  margin:0 auto 30px;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:var(--ml-paper);
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:.9375rem;
}

.ml-step-title .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:500;
  font-size:1.1875rem;
  letter-spacing:.4px;
  margin-bottom:14px;
}

#about-how-steps .ml-body,
#about-how-steps .ml-body p{
  font-size:1rem;
  line-height:1.68;
  color:#4a4a4a;
}

/* ── Why Rwanda (ink, copy plus photograph) ─────────────────────── */

#about-rwanda.e-con{
  background-color:#0a0a0a;
  color:var(--ml-paper);
  padding:clamp(96px,11vw,160px) var(--ml-gut);
  --width:100%;
  max-width:none;
}

/* Client review 3, item 5b. Review 2 gave the photograph equal HEIGHT to
   the copy, which fixed the alignment; she then asked for it to be
   enlarged so it better balances the text mass. Widened 540 -> 610 and
   the gutter tightened 80 -> 60, so the copy column goes 560 -> 510.
   The copy is unaffected in practice: .ml-body is already capped at 60ch
   (~504px), below both the old and the new column width, so the measure
   and the line breaks are identical either side of this change. The
   height chain below is untouched. */

#about-rwanda-wrap.e-con{
  max-width:1180px;
  margin:0 auto;
  padding:0;
  gap:60px;
  align-items:stretch;
}

#about-rwanda-copy.e-con{padding:0;--width:100%;flex:1 1 auto}
/* Proportional, not a fixed 610px: a fixed width does not shrink with the
   row, so between 1180 and the max the copy column absorbed the entire
   reduction and fell to 383px / 11 lines at 1181. 52% holds the balance
   she asked for at every width down to the stack. */
#about-rwanda-photo.e-con{padding:0;--width:52%;max-width:52%;flex:0 0 auto;display:flex}

/* The photograph answers the copy block edge for edge. Both Elementor
   wrappers have to carry the height or the container stretches while the
   image keeps its intrinsic size, which looks untouched but measures fixed. */
#about-rwanda-photo > .ml-rwanda-photo{flex:1 1 auto;display:flex;width:100%}
#about-rwanda-photo .elementor-widget-container{flex:1 1 auto;display:flex;width:100%}

#about-rwanda .ml-eyebrow .elementor-heading-title{color:rgba(255,255,255,.5)}

#about-rwanda .ml-section-title .elementor-heading-title{
  color:var(--ml-paper);
  margin-top:22px;
  max-width:16ch;
}

#about-rwanda .ml-body{margin-top:30px;max-width:60ch}

#about-rwanda .ml-body,
#about-rwanda .ml-body p{color:rgba(255,255,255,.78)}

.ml-rwanda-photo img{
  width:100%;
  height:100%;
  max-height:none;
  object-fit:cover;
  object-position:50% 45%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  display:block;
}

/* ── Closing (paper) ────────────────────────────────────────────── */

#about-close.e-con{
  background-color:var(--ml-paper);
  color:var(--ml-ink);
  padding:clamp(120px,16vw,250px) var(--ml-gut) clamp(114px,15vw,240px);
  text-align:center;
  align-items:center;
  --width:100%;
  max-width:none;
}

#about-close .ml-eyebrow .elementor-heading-title{
  font-size:.75rem;
  letter-spacing:.34em;
  margin-bottom:40px;
}

#about-close .ml-statement .elementor-heading-title{
  max-width:26ch;
  margin:0 auto;
}

#about-close-actions.e-con{
  margin-top:70px;
  padding:0;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
  --width:auto;
}

/* Buttons sit on paper here, so the ink/paper roles invert. */
#about-close .ml-btn-primary .elementor-button{
  background-color:var(--ml-ink);
  color:var(--ml-paper);
  border-color:var(--ml-ink);
}

#about-close .ml-btn-primary .elementor-button:hover{
  background-color:var(--ml-ink);
  color:var(--ml-paper);
  border-color:var(--ml-paper);
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width:1180px){
  #about-why-wrap.e-con{flex-direction:column;gap:40px}
  #about-why .ml-section-title .elementor-heading-title{max-width:none}
  #about-why-b.e-con{padding-top:52px}
  #about-persp-grid.e-con{grid-template-columns:repeat(2,minmax(0,1fr))}
  #about-how-steps.e-con{grid-template-columns:repeat(2,minmax(0,1fr));gap:60px 0}
  #about-rwanda-wrap.e-con{flex-direction:column;gap:50px;align-items:stretch}
  #about-rwanda-photo.e-con{--width:100%;max-width:none}
  /* stacked: nothing to match heights with, so give the photograph its own
     aspect back rather than letting it fill an auto-height parent */
  .ml-rwanda-photo img{height:auto;max-height:420px}
}

@media (max-width:782px){
  #about-hero.e-con{background-position:58% 34%}
  #about-persp-grid.e-con{grid-template-columns:minmax(0,1fr)}
  #about-how-steps.e-con{grid-template-columns:minmax(0,1fr);gap:56px 0}
  #about-step-1.e-con,
  #about-step-2.e-con,
  #about-step-3.e-con,
  #about-step-4.e-con{padding:0}
  #about-rwanda .ml-section-title .elementor-heading-title{max-width:none}
}

@media (max-width:430px){
  #about-hero.e-con,
  #about-why.e-con,
  #about-persp.e-con,
  #about-how.e-con,
  #about-rwanda.e-con,
  #about-close.e-con{padding-left:24px;padding-right:24px}
  #about-pcard-1.e-con,
  #about-pcard-2.e-con,
  #about-pcard-3.e-con,
  #about-pcard-4.e-con{padding:28px 24px 30px}
  #about-close-actions .elementor-button{width:100%}
}


/* ── Licences & Certifications (client review 3, item 1b) ───────────
   She asked for the Data Controller / Processor registration to stop
   being a news item and to sit in a Licences & Certifications section.
   Presented as TEXT credentials rather than scanned certificates: house
   style forbids trust badges and a pinned scan reads as one, both scans
   carry a CamScanner watermark, and a registration number with its
   validity is a fact a reader can verify where a JPEG is not. Images can
   be added later without rebuilding this. */

#about-licences.e-con{
  background-color:var(--ml-paper);
  color:var(--ml-ink);
  padding:clamp(96px,11vw,140px) var(--ml-gut);
  --width:100%;
  max-width:none;
}

/* Astra sets a default heading colour, a dark slate blue, and any section that
   does not declare its own lets it through. This one did not, so the title and
   all three card headings rendered blue instead of the site's ink. Caught by
   looking at the pixels; the font and token checks both passed. */
#about-licences .ml-eyebrow .elementor-heading-title{color:var(--ml-grey)}
#about-licences .ml-section-title .elementor-heading-title{color:var(--ml-ink);max-width:20ch}
#about-licences .ml-cred-title .elementor-heading-title{color:var(--ml-ink)}
#about-licences .ml-body,
#about-licences .ml-body p{color:#4a4a4a}
#about-licences .ml-body{max-width:62ch;margin-top:28px}

/* The head sat left-aligned and ran the full 1285px, leaving the right half of the
   section empty. It looked like the two-column blocks above it, which are left
   stacks precisely so an image can occupy the right column - but nothing sits to
   the right here, so it read as a mistake rather than a composition.

   Cause: this section has no head container of its own the way #about-persp-head
   does, so its eyebrow, title and body are direct children of the section and
   default to the left. Every comparable head that introduces a card grid is
   centred on a constrained measure - about-persp 667px, who-advise 667px,
   who-convos 623px, who-value 667px. Matched, not invented.

   Centring the head only. The grid keeps its own `margin:56px auto 0`, so nothing
   about the cards changes. */
#about-licences .ml-eyebrow,
#about-licences .ml-section-title,
#about-licences .ml-body{
  text-align:center;
}

#about-licences .ml-section-title .elementor-heading-title,
#about-licences .ml-body,
#about-licences .ml-body p{
  margin-inline:auto;
}

#about-licences-grid.e-con{
  max-width:1180px;
  margin:56px auto 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
  --width:100%;
}

/* The three tiers must line up ACROSS the cards, not just within each one.
   Measured before: title 27 and authority 56 already matched, but the detail
   block sat at 126 on the BNR card against 171 on the other two, because the
   authority is one line there and three on the others. A 45px step across a row
   of credential cards reads as carelessness on a page about being accountable.

   Solved with subgrid: the row defines three tracks and each card adopts them, so
   every tier is sized by the tallest card and starts on the same line. Row gap is
   zeroed because the widgets already carry their own top margins (10px and 14px),
   which preserves the existing vertical rhythm rather than inventing a new one.

   Wrapped in @supports so a browser without subgrid keeps the current layout
   rather than inheriting a half-applied grid.

   ALSO GATED TO THE SINGLE-ROW BREAKPOINT, and that gate is load-bearing.
   The row-gap:0 above applies to EVERY row of the parent grid, and once the
   cards wrap the parent's rows include the gaps BETWEEN card rows. Measured at
   900px and 700px before this gate existed: stacked cards sat at 0px apart,
   touching. Above 1024px the three cards are one row, so there are no card-row
   gaps to destroy; below it they stack, and stacked cards have nothing to align
   with anyway. Alignment is a same-row problem, so it is a same-row rule. */
@media (min-width:1025px){
  @supports (grid-template-rows: subgrid){
    #about-licences-grid.e-con{
      grid-template-rows:auto auto auto;
      row-gap:0;
    }

    #about-licences-grid > .e-con{
      grid-row:span 3;
      display:grid;
      grid-template-rows:subgrid;
      align-content:start;
    }
  }
}

#about-licences-grid > .e-con{
  border:1px solid rgba(10,10,10,.15);
  border-radius:12px;
  padding:26px 22px 28px;
  --width:100%;
  max-width:none;
}

#about-licences .ml-cred-title .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:1rem;
  letter-spacing:.01em;
  line-height:1.2;
}

#about-licences .ml-cred-note,
#about-licences .ml-cred-note p{
  font-family:"Literata",Georgia,serif;
  font-size:.9062rem;
  line-height:1.55;
  color:#4a4a4a;
  margin-top:10px;
}

#about-licences .ml-cred-detail,
#about-licences .ml-cred-detail p{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:.8125rem;
  letter-spacing:.01em;
  color:#595959;
  margin-top:14px;
}

@media (max-width:1024px){
  #about-licences-grid.e-con{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:782px){
  #about-licences-grid.e-con{grid-template-columns:minmax(0,1fr)}
}

/* The wrapped two-column case, for both card rows. Gating subgrid to the
   single-row width fixed the touching cards but left same-row neighbours
   unaligned: measured 21px on the credential detail at 900px, where two cards
   still sit side by side and their authority blocks differ in line count.

   Subgrid returns here with six explicit tracks (three tiers x two card rows),
   and the card-row separation is carried by a margin on the FIRST row's cards
   instead of by row-gap, because row-gap cannot distinguish a gap between tiers
   from a gap between card rows. nth-child(-n+2) is exact rather than clever:
   at two columns the first row is always the first two cards. */
@media (min-width:783px) and (max-width:1024px){
  @supports (grid-template-rows: subgrid){
    #about-licences-grid.e-con{
      grid-template-rows:repeat(6,auto);
      row-gap:0;
    }
    #about-licences-grid > .e-con{
      grid-row:span 3;
      display:grid;
      grid-template-rows:subgrid;
      align-content:start;
    }
    #about-licences-grid > .e-con:nth-child(-n+2){ margin-bottom:20px; }
  }
}

@media (min-width:783px) and (max-width:1180px){
  @supports (grid-template-rows: subgrid){
    #about-persp-grid.e-con{
      grid-template-rows:repeat(6,auto);
      row-gap:0;
    }
    #about-persp-grid > .e-con{
      grid-row:span 3;
      display:grid;
      grid-template-rows:subgrid;
      align-content:start;
    }
    #about-persp-grid > .e-con:nth-child(-n+2){ margin-bottom:20px; }
  }
}