/* ══════════════════════════════════════════════════════════════════
   ML CORPORATE SERVICES | The Moments That Matter page sections

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

   Four moments, alternating paper and ink, each pairing its approved
   illustration with the numeral, title, situation and perspective.
   ══════════════════════════════════════════════════════════════════ */

#mom-hero,
#mom-intro,
#mom-1,
#mom-2,
#mom-3,
#mom-4,
#mom-close{
  --pg-mist-paper:#4a4a4a;
  --pg-stone:#f4f3f1;
}

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

#mom-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;
}

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

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

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

#mom-hero .ml-hero-mark img{
  width:clamp(108px,7.8vw,148px);
  height:auto;
  display:block;
  opacity:.96;
}

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

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

#mom-hero .ml-page-title .elementor-heading-title{
  max-width:22ch;
  margin-top:clamp(14px,2vh,22px);
}

#mom-hero .ml-lead{margin-top:clamp(20px,2.8vh,32px);max-width:760px}
#mom-hero .ml-lead p{color:rgba(255,255,255,.9)}

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

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

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

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

#mom-intro .ml-section-title .elementor-heading-title{margin-top:20px;max-width:22ch}
#mom-intro .ml-body,
#mom-intro .ml-body p{color:var(--pg-mist-paper)}

/* ── The four moments ────────────────────────────────────────────── */

#mom-1.e-con,
#mom-2.e-con,
#mom-3.e-con,
#mom-4.e-con{
  padding:clamp(96px,11vw,150px) var(--ml-gut);
  --width:100%;
  max-width:none;
}

#mom-1.e-con,
#mom-3.e-con{background-color:var(--ml-paper);color:var(--ml-ink)}
#mom-2.e-con,
#mom-4.e-con{background-color:var(--ml-charcoal);color:var(--ml-paper)}

#mom-wrap-1.e-con,
#mom-wrap-2.e-con,
#mom-wrap-3.e-con,
#mom-wrap-4.e-con{
  max-width:1240px;
  margin:0 auto;
  padding:0;
  gap:clamp(48px,6vw,90px);
  align-items:center;
}

#mom-art-1.e-con,
#mom-art-2.e-con,
#mom-art-3.e-con,
#mom-art-4.e-con{
  padding:0;
  --width:38%;
  max-width:none;
  border-radius:12px;
  overflow:hidden;
}

#mom-copy-1.e-con,
#mom-copy-2.e-con,
#mom-copy-3.e-con,
#mom-copy-4.e-con{padding:0;--width:52%;max-width:none}

/* The even moments mirror the layout, image to the right. */
#mom-wrap-2.e-con,
#mom-wrap-4.e-con{flex-direction:row-reverse}

#mom-art-1 .ml-moment-art,
#mom-art-2 .ml-moment-art,
#mom-art-3 .ml-moment-art,
#mom-art-4 .ml-moment-art{line-height:0}

.ml-moment-art img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio:1/1;
  object-fit:cover;
}

#mom-1 .ml-moment-art,
#mom-3 .ml-moment-art{background-color:var(--pg-stone)}

#mom-2 .ml-moment-art,
#mom-4 .ml-moment-art{background-color:#121210}

/* Numeral and title use the shared moment roles from ml-site.css;
   only the colour changes on the paper sections. */

#mom-1 .ml-moment-num .elementor-heading-title,
#mom-3 .ml-moment-num .elementor-heading-title{color:var(--ml-grey)}

#mom-1 .ml-moment-title .elementor-heading-title,
#mom-3 .ml-moment-title .elementor-heading-title{color:var(--ml-ink);margin-top:16px}

#mom-2 .ml-moment-title .elementor-heading-title,
#mom-4 .ml-moment-title .elementor-heading-title{margin-top:16px}

/* Situation line */

.ml-mom-situation,
.ml-mom-situation p{
  font-family:"Literata",Georgia,serif;
  font-size:1.125rem;
  line-height:1.55;
  max-width:34ch;
  margin-top:18px;
}

#mom-1 .ml-mom-situation p,
#mom-3 .ml-mom-situation p{color:var(--pg-mist-paper)}

#mom-2 .ml-mom-situation p,
#mom-4 .ml-mom-situation p{color:var(--ml-mist-ink)}

/* Perspective block */

#mom-persp-1.e-con,
#mom-persp-2.e-con,
#mom-persp-3.e-con,
#mom-persp-4.e-con{
  margin-top:36px;
  padding:0 0 0 20px;
  --width:100%;
  max-width:none;
}

#mom-persp-1.e-con,
#mom-persp-3.e-con{border-left:2px solid rgba(0,0,0,.18)}

#mom-persp-2.e-con,
#mom-persp-4.e-con{border-left:2px solid rgba(255,255,255,.28)}

.ml-mom-label .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
}

#mom-1 .ml-mom-label .elementor-heading-title,
#mom-3 .ml-mom-label .elementor-heading-title{color:var(--ml-grey)}

#mom-2 .ml-mom-label .elementor-heading-title,
#mom-4 .ml-mom-label .elementor-heading-title{color:var(--ml-grey-light)}

.ml-mom-persp-title .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:500;
  font-size:1.3rem;
  line-height:1.2;
  letter-spacing:.3px;
  margin:12px 0 8px;
}

#mom-1 .ml-mom-persp-title .elementor-heading-title,
#mom-3 .ml-mom-persp-title .elementor-heading-title{color:var(--ml-ink)}

#mom-2 .ml-mom-persp-title .elementor-heading-title,
#mom-4 .ml-mom-persp-title .elementor-heading-title{color:var(--ml-paper)}

#mom-persp-1 .ml-body p,
#mom-persp-3 .ml-body p{color:var(--pg-mist-paper);max-width:44ch}

#mom-persp-2 .ml-body p,
#mom-persp-4 .ml-body p{color:var(--ml-mist-ink);max-width:44ch}

/* The quiet underlined link that closes each moment. */

#mom-actions-1.e-con,
#mom-actions-2.e-con,
#mom-actions-3.e-con,
#mom-actions-4.e-con{margin-top:26px;padding:0;--width:auto}

.ml-mom-go .elementor-button{
  background-color:transparent;
  background-image:none;
  border:none;
  border-bottom:1px solid currentColor;
  border-radius:0;
  box-shadow:none;
  padding:0 0 5px;
  font-family:"Literata",Georgia,serif;
  font-weight:520;
  font-size:1rem;
  letter-spacing:.015em;
  transition:opacity .3s ease;
}

.ml-mom-go .elementor-button:hover{background-color:transparent;opacity:.6}

#mom-1 .ml-mom-go .elementor-button,
#mom-3 .ml-mom-go .elementor-button{color:var(--ml-ink)}

#mom-2 .ml-mom-go .elementor-button,
#mom-4 .ml-mom-go .elementor-button{color:var(--ml-paper)}

#mom-1 .ml-mom-go .elementor-button:hover,
#mom-3 .ml-mom-go .elementor-button:hover{color:var(--ml-ink)}

#mom-2 .ml-mom-go .elementor-button:hover,
#mom-4 .ml-mom-go .elementor-button:hover{color:var(--ml-paper)}

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

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

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

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

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

/* The closing section sits on paper, so the shared button roles,
   which are drawn for ink, are inverted here. */

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

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

#mom-close .ml-btn-secondary .elementor-button{
  background-color:transparent;
  color:var(--ml-ink);
  border-color:rgba(0,0,0,.32);
}

#mom-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){
  #mom-intro-wrap.e-con{flex-direction:column;gap:40px}
  #mom-intro-b.e-con{border-top:1px solid rgba(0,0,0,.15);padding-top:34px}
  #mom-wrap-1.e-con,
  #mom-wrap-2.e-con,
  #mom-wrap-3.e-con,
  #mom-wrap-4.e-con{gap:52px}
  #mom-art-1.e-con,
  #mom-art-2.e-con,
  #mom-art-3.e-con,
  #mom-art-4.e-con{--width:42%}
  #mom-copy-1.e-con,
  #mom-copy-2.e-con,
  #mom-copy-3.e-con,
  #mom-copy-4.e-con{--width:58%}
  #mom-hero .ml-page-title .elementor-heading-title{max-width:none}
}

@media (max-width:782px){
  #mom-wrap-1.e-con,
  #mom-wrap-2.e-con,
  #mom-wrap-3.e-con,
  #mom-wrap-4.e-con{flex-direction:column;gap:40px;align-items:stretch}
  #mom-art-1.e-con,
  #mom-art-2.e-con,
  #mom-art-3.e-con,
  #mom-art-4.e-con,
  #mom-copy-1.e-con,
  #mom-copy-2.e-con,
  #mom-copy-3.e-con,
  #mom-copy-4.e-con{--width:100%}
  .ml-moment-art img{aspect-ratio:16/10;max-height:320px}
  .ml-mom-situation,
  .ml-mom-situation p{font-size:1.0625rem;max-width:none}
}

@media (max-width:430px){
  #mom-hero.e-con,
  #mom-intro.e-con,
  #mom-1.e-con,
  #mom-2.e-con,
  #mom-3.e-con,
  #mom-4.e-con,
  #mom-close.e-con{padding-left:24px;padding-right:24px}
  #mom-close-actions.e-con{flex-direction:column;align-items:stretch;--width:100%}
  #mom-close-actions .elementor-button{width:100%}
}