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

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

   The leadership hero is the one hero on paper rather than ink, so the
   on-ink colour rules used elsewhere are deliberately not applied here.
   ══════════════════════════════════════════════════════════════════ */

/* ── Hero (paper) ───────────────────────────────────────────────── */

#lead-hero.e-con{
  position:relative;
  min-height:clamp(480px,64svh,640px);
  padding:clamp(104px,12vh,144px) var(--ml-gut) clamp(52px,6.5vh,78px);
  background-color:#f7f5ef;
  color:var(--ml-ink);
  justify-content:center;
  align-items:center;
  text-align:center;
  --width:100%;
  max-width:none;
}

#lead-hero.e-con::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 78% 36%,rgba(14,14,12,.075),rgba(14,14,12,0) 28%),
    linear-gradient(90deg,rgba(247,245,239,.96),rgba(247,245,239,.9));
}

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

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

#lead-hero .ml-hero-mark img{
  height:auto;
  display:block;
}

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

#lead-hero .ml-eyebrow .elementor-heading-title{color:#757168}

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

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

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

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

/* ── Profiles (paper) ───────────────────────────────────────────── */

#lead-lydie.e-con,
#lead-paul.e-con{
  background-color:var(--ml-paper);
  color:var(--ml-ink);
  padding:clamp(84px,10vw,150px) var(--ml-gut);
  --width:100%;
  max-width:none;
}

#lead-lydie-grid.e-con,
#lead-paul-grid.e-con{
  max-width:1300px;
  margin:0 auto;
  padding:0;
  gap:90px;
  align-items:flex-start;
}

#lead-lydie-portrait.e-con,
#lead-paul-portrait.e-con{
  padding:0;
  --width:440px;
  max-width:440px;
  flex:0 0 auto;
}

#lead-lydie-body.e-con,
#lead-paul-body.e-con{padding:0;--width:100%;flex:1 1 auto}

.ml-portrait img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  display:block;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.15);
  filter:grayscale(1) contrast(1.08);
  background-color:#141414;
}

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

.ml-name .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:clamp(30px,3vw,42px);
  line-height:1.1;
  letter-spacing:.02em;
  margin:16px 0 8px;
}

.ml-position .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:500;
  font-size:.8125rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ml-grey);
}

#lead-lydie-body .ml-body,
#lead-paul-body .ml-body{margin-top:32px;max-width:64ch}

#lead-lydie-body .ml-body p,
#lead-paul-body .ml-body p{color:#4a4a4a}

#lead-lydie-creds.e-con,
#lead-paul-creds.e-con{
  margin-top:44px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  align-items:stretch;
  --width:100%;
  max-width:none;
}

#lead-lydie-creds > .e-con,
#lead-paul-creds > .e-con{
  border:1px solid rgba(0,0,0,.15);
  border-radius:12px;
  padding:24px 20px;
  --width:100%;
  max-width:none;
}

.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;
}

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

.ml-linkedin,
.ml-linkedin p{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:.8125rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ml-grey);
  margin-top:34px;
}

/* ── Our approach (ink) ─────────────────────────────────────────── */

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

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

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

#lead-approach .ml-body{max-width:82ch;margin:44px auto 0}

#lead-approach .ml-body,
#lead-approach .ml-body p{color:rgba(255,255,255,.8)}

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

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

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

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

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

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

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

#lead-close .ml-btn-secondary .elementor-button{
  background-color:transparent;
  color:var(--ml-ink);
  border-color:var(--ml-ink);
}

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

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

@media (max-width:1180px){
  #lead-lydie-grid.e-con,
  #lead-paul-grid.e-con{flex-direction:column;gap:44px}
  #lead-lydie-portrait.e-con,
  #lead-paul-portrait.e-con{--width:100%;max-width:440px}
  #lead-lydie-creds.e-con,
  #lead-paul-creds.e-con{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:782px){
  #lead-lydie-creds.e-con,
  #lead-paul-creds.e-con{grid-template-columns:minmax(0,1fr)}
  #lead-lydie-body .ml-body,
  #lead-paul-body .ml-body{max-width:none}
}

@media (max-width:430px){
  #lead-hero.e-con,
  #lead-lydie.e-con,
  #lead-paul.e-con,
  #lead-approach.e-con,
  #lead-close.e-con{padding-left:24px;padding-right:24px}
  #lead-close-actions.e-con{flex-direction:column;align-items:stretch;--width:100%}
  #lead-close-actions .elementor-button{width:100%}
}

/* ── Biography rhythm (client review 2, items 3 and 4) ────────────
   The 26px between biography paragraphs was the shared 16px
   `.ml-body p + p` rule plus the theme's own paragraph margin, which
   read as fragmented rather than continuous. Zero the inherited
   bottom margin so one rule governs the interval. The gap from the
   biography to the credential cards comes down with it so the cards
   read as part of the profile rather than a separate block. */

#lead-lydie-body .ml-body p,
#lead-paul-body .ml-body p{margin-bottom:0}

#lead-lydie-body .ml-body p + p,
#lead-paul-body .ml-body p + p{margin-top:12px}

#lead-lydie-creds.e-con,
#lead-paul-creds.e-con{margin-top:21px}


/* ── Our Approach density (client review 3, item 7a) ────────────────
   She asked for 10-15% less air between OUR APPROACH, the heading and
   the two paragraphs, on this section only. The site-wide 26/28 lock in
   ml-site.css is deliberately untouched and still governs the other 38
   section heads; these three rules are a scoped exception carrying the
   same !important weight the global rules use, so they win here and
   nowhere else. Reductions: 26->23 (-11.5%), 28->24 (-14.3%),
   25.6->22 (-14%). The paragraph interval needs the inherited bottom
   margin zeroed first, exactly as the biographies did, or the theme's
   1.6em wins and one rule no longer governs the interval. */

body #lead-approach .ml-eyebrow{margin-bottom:23px !important}

body #lead-approach .ml-statement + .ml-body,
body #lead-approach .ml-statement + .elementor-widget-text-editor{
  margin-top:24px !important;
}

body #lead-approach .ml-body p{margin-bottom:0}
body #lead-approach .ml-body p + p{margin-top:22px}

/* Widening the measure to 82ch fixed the short lines (53 -> 60 and 66
   characters) but left both paragraphs ending on an orphan: 149px under
   a 759px line, and 61px under 753px. Centred text shows that badly.
   Balance evens the lines without changing the count or the wording.
   Progressive: a browser without it keeps today's wrap. */
body #lead-approach .ml-body p{text-wrap:balance}

/* ── Cross-card tier alignment ──────────────────────────────────────
   The credential note started 21px below its neighbours wherever a title wraps
   to two lines ("20+ Years Professional Experience"). Subgrid so both tiers are
   sized by the tallest card and start on the same line.

   Card separation is carried as margin on the cards with the container pulling
   back by the same amount, because subgrid requires row-gap:0 and that would
   otherwise make the cards touch once they wrap to two rows. See the note in
   ml-page-who.css — the About credential cards shipped with exactly that fault
   before the audit caught it. */
@supports (grid-template-rows: subgrid){
  #lead-lydie-creds.e-con,
  #lead-paul-creds.e-con{
    grid-template-rows:auto auto;
    row-gap:0;
    margin-bottom:-20px;
  }
  #lead-lydie-creds > .e-con,
  #lead-paul-creds > .e-con{
    grid-row:span 2;
    display:grid;
    grid-template-rows:subgrid;
    align-content:start;
    margin-bottom:20px;
  }
}