/* ══════════════════════════════════════════════════════════════════
   ML CORPORATE SERVICES | Who We Work With page sections

   Section rules only; type roles and buttons come from ml-site.css.
   Sections are addressed by Elementor element ID (#who-*) because
   containers do not output custom CSS classes in this build.
   ══════════════════════════════════════════════════════════════════ */

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

#who-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 43%;
  background-size:cover;
  background-repeat:no-repeat;
  justify-content:center;
  align-items:center;
  text-align:center;
  --width:100%;
  max-width:none;
}

#who-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%);
}

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

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

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

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

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

/* The longest page title on the site: held one step down so it stays
   on three lines at desktop width. */
#who-hero .ml-page-title .elementor-heading-title{
  font-size:clamp(34px,3.6vw,52px);
  line-height:1;
  letter-spacing:-.045em;
  max-width:26ch;
  margin-top:clamp(14px,2vh,22px);
}

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

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

/* ── Introduction (paper, two columns) ──────────────────────────── */

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

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

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

#who-intro .ml-section-title .elementor-heading-title{margin-top:24px}

#who-intro .ml-body,
#who-intro .ml-body p{color:#4a4a4a}

/* ── Who we advise (paper, six cards) ───────────────────────────── */

#who-advise.e-con{
  background-color:var(--ml-paper);
  color:var(--ml-ink);
  padding:clamp(80px,9vw,120px) var(--ml-gut) clamp(120px,14vw,200px);
  --width:100%;
  max-width:none;
}

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

#who-advise-head .ml-section-title .elementor-heading-title{margin-top:20px}

#who-advise-grid.e-con{
  max-width:1300px;
  margin:72px auto 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}

#who-advise-grid > .e-con{
  border:1px solid rgba(0,0,0,.1);
  border-radius:12px;
  padding:36px 30px;
  min-height:220px;
  background-color:rgba(0,0,0,.02);
  --width:100%;
  max-width:none;
  transition:transform .32s ease,background-color .32s ease,border-color .32s ease;
}

#who-advise-grid > .e-con:hover{
  transform:translateY(-3px);
  background-color:#ffffff;
  border-color:rgba(0,0,0,.2);
}

.ml-acard-title .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:570;
  font-size:1.35rem;
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--ml-ink);
}

#who-advise-grid .ml-body,
#who-advise-grid .ml-body p{
  font-size:.9688rem;
  line-height:1.68;
  color:#4a4a4a;
  margin-top:14px;
}

/* ── Typical conversations (ink, six cards) ─────────────────────── */

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

#who-convos-head.e-con{
  max-width:1200px;
  margin:0 auto;
  padding:0;
  align-items:center;
  text-align:center;
}

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

#who-convos-head .ml-section-title .elementor-heading-title{
  color:var(--ml-paper);
  margin-top:20px;
}

#who-convos-grid.e-con{
  max-width:1200px;
  margin:72px auto 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:1fr;
  gap:20px;
  align-items:stretch;
}

#who-convos-grid > .e-con{
  background-color:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:34px;
  --width:100%;
  max-width:none;
  transition:transform .32s ease,background-color .32s ease,border-color .32s ease;
}

#who-convos-grid > .e-con:hover{
  background-color:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.24);
  transform:translateY(-3px);
}

.ml-quote .elementor-heading-title{
  font-family:"Literata",Georgia,serif;
  font-style:italic;
  font-weight:400;
  font-size:1.25rem;
  line-height:1.45;
  letter-spacing:0;
  color:#ffffff;
}

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

/* ── How we add value (paper, four blocks) ──────────────────────── */

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

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

#who-value-head .ml-section-title .elementor-heading-title{margin-top:20px}

#who-value-grid.e-con{
  max-width:1300px;
  margin:clamp(56px,7vw,100px) auto 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}

#who-value-grid > .e-con{
  border:1px solid rgba(0,0,0,.15);
  border-radius:12px;
  padding:28px 24px;
  --width:100%;
  max-width:none;
}

.ml-vnum .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.02em;
  color:var(--ml-grey);
}

.ml-vtitle .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:500;
  font-size:1.25rem;
  letter-spacing:.3px;
  margin:16px 0 14px;
}

#who-value-grid .ml-body,
#who-value-grid .ml-body p{
  font-size:1rem;
  line-height:1.68;
  color:#4a4a4a;
}

/* ── Closing (ink) ──────────────────────────────────────────────── */

#who-close.e-con{
  background-color:var(--ml-ink);
  color:var(--ml-paper);
  padding:clamp(120px,14vw,200px) var(--ml-gut);
  text-align:center;
  align-items:center;
  --width:100%;
  max-width:none;
}

#who-close .ml-eyebrow .elementor-heading-title{color:var(--ml-grey-light)}

#who-close .ml-statement .elementor-heading-title{
  color:var(--ml-paper);
  max-width:34ch;
  margin:26px auto 0;
}

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

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

@media (max-width:1180px){
  #who-intro-wrap.e-con{flex-direction:column;gap:40px}
  #who-intro-b.e-con{padding-top:52px}
  #who-advise-grid.e-con{grid-template-columns:repeat(2,minmax(0,1fr))}
  #who-convos-grid.e-con{grid-template-columns:minmax(0,1fr)}
  #who-value-grid.e-con{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
  #who-hero .ml-page-title .elementor-heading-title{max-width:none}
}

@media (max-width:782px){
  #who-advise-grid.e-con{grid-template-columns:minmax(0,1fr)}
  #who-value-grid.e-con{grid-template-columns:minmax(0,1fr)}
  #who-hero .ml-page-title .elementor-heading-title{font-size:clamp(30px,7.6vw,44px)}
  #who-advise-grid > .e-con{min-height:0}
}

@media (max-width:430px){
  #who-hero.e-con,
  #who-intro.e-con,
  #who-advise.e-con,
  #who-convos.e-con,
  #who-value.e-con,
  #who-close.e-con{padding-left:24px;padding-right:24px}
  #who-advise-grid > .e-con{padding:28px 24px}
  #who-convos-grid > .e-con{padding:28px 24px}
  #who-close-actions.e-con{flex-direction:column;align-items:stretch;--width:100%}
  #who-close-actions .elementor-button{width:100%}
}

/* ── Cross-card tier alignment ──────────────────────────────────────
   Found by the card audit: on #who-advise-grid the body of the sixth card
   started 28px below the other five, because "Public & Development
   Institutions" is the one title that wraps to two lines. Same on
   #who-value-grid at two columns, where "Governance & Ownership" wraps and its
   body sat 26px low.

   Subgrid rather than a min-height on the title: min-height would reserve two
   lines' space on every card at every width, adding dead space wherever the
   titles do not wrap. Subgrid costs nothing when they all fit on one line.

   The row-gap problem, and why it is solved this way. Subgrid needs the parent
   row-gap at 0, because the parent's rows are now the TIERS inside each card,
   not the gaps between card rows. Zeroing it naively makes stacked cards touch —
   that exact fault shipped on the About credential cards and sat at 0px apart
   at 900px and 700px until the audit caught it. So the card separation moves
   onto the cards themselves as margin-bottom, and the container pulls back by
   the same amount to cancel the last row's trailing margin. That is agnostic to
   how many rows the cards happen to wrap into, which the nth-child approach is
   not. */
@supports (grid-template-rows: subgrid){
  #who-advise-grid.e-con{
    grid-template-rows:auto auto;
    row-gap:0;
    margin-bottom:-24px;
  }
  #who-advise-grid > .e-con{
    grid-row:span 2;
    display:grid;
    grid-template-rows:subgrid;
    align-content:start;
    margin-bottom:24px;
  }

  #who-value-grid.e-con{
    grid-template-rows:auto auto auto;
    row-gap:0;
    margin-bottom:-24px;
  }
  #who-value-grid > .e-con{
    grid-row:span 3;
    display:grid;
    grid-template-rows:subgrid;
    align-content:start;
    margin-bottom:24px;
  }
}

/* the value grid widens its gap at two columns, so the compensation follows */
@media (max-width:1180px){
  @supports (grid-template-rows: subgrid){
    #who-value-grid.e-con{margin-bottom:-34px}
    #who-value-grid > .e-con{margin-bottom:34px}
  }
}