/* ══════════════════════════════════════════════════════════════════
   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{
  width:clamp(108px,7.8vw,148px);
  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:.32em;
  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;
}

/* ── 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;
}

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

#about-rwanda-copy.e-con{padding:0;--width:100%;flex:1 1 auto}
#about-rwanda-photo.e-con{padding:0;--width:400px;max-width:400px;flex:0 0 auto}

#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%;
  max-height:420px;
  object-fit:cover;
  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:transparent;
  color:var(--ml-ink);
}

/* ── 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{border-top:1px solid rgba(0,0,0,.15);padding-top:34px}
  #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}
}

@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%}
}