/* ══════════════════════════════════════════════════════════════════
   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{
  width:clamp(108px,7.8vw,148px);
  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));
  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:.32em;
  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{border-top:1px solid rgba(0,0,0,.15);padding-top:34px}
  #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%}
}