/* ══════════════════════════════════════════════════════════════════
   ML CORPORATE SERVICES | Home, two additional sections

   Port of the `.s-persp` (Four Convictions, on paper) and `.s-latest`
   (Latest Perspectives, on ink) sections of _site/home.html. These sit
   between the Moments grid and the closing statement; everything else
   on the home page stays in ml-site.css and is untouched here.

   Addressing follows the house policy: containers emit no custom CSS
   classes in this build, so each section and each inner container is
   reached through its Elementor element ID. Widgets keep the shared
   classes from ml-site.css / ml-elementor.css.

   Responsive steps: 1180 / 782 / 430. No overflow-x:hidden anywhere.
   ══════════════════════════════════════════════════════════════════ */

/* Values these two sections need that the shared sheets do not publish
   as custom properties. Namespaced so they cannot collide with --ml-*. */
#s-persp,
#s-latest{
  --hx-mist-paper:#4a4a4a;
  --hx-line-paper:rgba(0,0,0,.09);
  --hx-line-paper-strong:rgba(0,0,0,.22);
  --hx-ink:#0a0a0a;
}

/* ── Four Convictions (paper) ───────────────────────────────────── */

#s-persp.e-con{
  position:relative;
  background-color:var(--ml-paper);
  color:var(--ml-ink);
  padding:clamp(88px,9vw,136px) var(--ml-gut);
  --width:100%;
  max-width:none;
}

#s-persp-wrap.e-con{
  max-width:var(--ml-maxw);
  margin:0 auto;
  padding:0;
  display:grid;
  grid-template-columns:minmax(280px,.42fr) minmax(0,1fr);
  gap:clamp(40px,5.5vw,90px);
  align-items:center;
  --width:100%;
}

#s-persp-intro.e-con{
  padding:0;
  --width:100%;
  max-width:none;
}

#s-persp-intro .ml-section-title .elementor-heading-title{
  color:var(--ml-ink);
  max-width:18ch;
}

#s-persp-intro .ml-body{margin-top:22px}

#s-persp-intro .ml-body,
#s-persp-intro .ml-body p{
  color:var(--hx-mist-paper);
  max-width:42ch;
}

/* The board: four cards, two up, sized so the set reads as one block
   of structure rather than four loose tiles. */
#s-persp-board.e-con{
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,1.6vw,26px);
  align-items:stretch;
  --width:100%;
  max-width:none;
}

#s-persp-card-1.e-con,
#s-persp-card-2.e-con,
#s-persp-card-3.e-con,
#s-persp-card-4.e-con{
  position:relative;
  overflow:hidden;
  background-color:var(--ml-paper);
  border:1px solid var(--hx-line-paper);
  border-radius:12px;
  min-height:clamp(220px,20vw,280px);
  padding:clamp(28px,2.4vw,38px);
  --width:100%;
  max-width:none;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}

#s-persp-card-1:hover,
#s-persp-card-2:hover,
#s-persp-card-3:hover,
#s-persp-card-4:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(0,0,0,.05);
  border-color:var(--hx-line-paper-strong);
}

#s-persp .ml-kicker .elementor-heading-title{
  font-size:.72rem;
  letter-spacing:.32em;
  color:var(--ml-grey);
}

#s-persp .ml-title{margin-top:14px}

#s-persp .ml-title .elementor-heading-title{
  font-weight:600;
  font-size:clamp(17px,1.26vw,21.5px);
  line-height:1.2;
  letter-spacing:-.032em;
  color:var(--ml-ink);
}

#s-persp .ml-excerpt{margin-top:12px}

#s-persp .ml-excerpt,
#s-persp .ml-excerpt p{
  font-size:.968rem;
  line-height:1.64;
  color:var(--hx-mist-paper);
}

/* ── Latest Perspectives (ink) ──────────────────────────────────── */

#s-latest.e-con{
  background-color:var(--hx-ink);
  color:var(--ml-paper);
  padding:clamp(88px,9vw,136px) var(--ml-gut);
  border-top:1px solid rgba(255,255,255,.12);
  --width:100%;
  max-width:none;
}

#s-latest-head.e-con{
  max-width:var(--ml-maxw);
  margin:0 auto clamp(36px,4.5vw,56px);
  padding:0;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  --width:100%;
}

#s-latest-head-copy.e-con,
#s-latest-head-link.e-con{
  padding:0;
  --width:auto;
  max-width:100%;
}

#s-latest-head-link.e-con{align-items:flex-start}

#s-latest-head .ml-eyebrow .elementor-heading-title{color:rgba(255,255,255,.62)}

#s-latest-head .ml-section-title{margin-top:16px}

#s-latest-head .ml-section-title .elementor-heading-title{color:var(--ml-paper)}

#s-latest-head .ml-go{margin-top:0}

#s-latest-head .ml-go .elementor-button{
  font-size:1rem;
  letter-spacing:.02em;
  padding-bottom:6px;
  border-bottom-color:rgba(255,255,255,.4);
}

#s-latest-grid.e-con{
  max-width:var(--ml-maxw);
  margin:0 auto;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,2.2vw,36px);
  align-items:stretch;
  --width:100%;
}

#s-latest-card-1.e-con,
#s-latest-card-2.e-con,
#s-latest-card-3.e-con{
  padding:26px;
  background-color:rgba(255,255,255,.032);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  --width:100%;
  max-width:none;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,border-color .35s ease,background-color .35s ease;
}

#s-latest-card-1:hover,
#s-latest-card-2:hover,
#s-latest-card-3:hover{
  transform:translateY(-6px);
  background-color:rgba(255,255,255,.065);
  border-color:rgba(255,255,255,.28);
  box-shadow:0 24px 48px rgba(0,0,0,.5);
}

#s-latest-art-1.e-con,
#s-latest-art-2.e-con,
#s-latest-art-3.e-con{
  padding:0;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:8px;
  background-color:#141414;
  --width:100%;
  max-width:none;
}

.ml-latest-art,
.ml-latest-art .elementor-image,
.ml-latest-art a{height:100%;line-height:0}

.ml-latest-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(1) contrast(1.1) brightness(1.02);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}

#s-latest-grid .e-con:hover .ml-latest-art img{transform:scale(1.04)}

#s-latest-copy-1.e-con,
#s-latest-copy-2.e-con,
#s-latest-copy-3.e-con{
  padding:0;
  margin-top:20px;
  flex:1 1 auto;
  --width:100%;
  max-width:none;
}

#s-latest .ml-kicker .elementor-heading-title{
  font-size:.7188rem;
  font-weight:600;
  letter-spacing:.24em;
  color:rgba(255,255,255,.6);
}

#s-latest .ml-title{margin-top:12px}

#s-latest .ml-title .elementor-heading-title{
  font-weight:570;
  font-size:clamp(19px,1.45vw,23px);
  line-height:1.2;
  letter-spacing:-.025em;
  color:var(--ml-paper);
}

#s-latest .ml-excerpt{margin-top:12px}

#s-latest .ml-excerpt,
#s-latest .ml-excerpt p{
  font-size:.9375rem;
  line-height:1.64;
  color:rgba(255,255,255,.76);
}

#s-latest-grid .ml-go{margin-top:22px;align-self:flex-start}

#s-latest-grid .ml-go .elementor-button{font-size:.875rem;padding-bottom:2px}

/* ── Responsive ─────────────────────────────────────────────────────
   Built in from the start. The intro column stacks above the board
   before the board itself drops to a single column, so the reading
   order never breaks. */

@media (max-width:1180px){
  #s-persp-wrap.e-con{
    grid-template-columns:minmax(0,1fr);
    gap:clamp(32px,4vw,48px);
    align-items:start;
  }
  #s-persp-intro .ml-section-title .elementor-heading-title{max-width:24ch}
  #s-latest-grid.e-con{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:782px){
  #s-persp-board.e-con{grid-template-columns:minmax(0,1fr)}
  #s-persp-card-1.e-con,
  #s-persp-card-2.e-con,
  #s-persp-card-3.e-con,
  #s-persp-card-4.e-con{min-height:0;padding:28px 26px 32px}
  #s-latest-grid.e-con{grid-template-columns:minmax(0,1fr);gap:28px}
  #s-latest-head.e-con{
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
  }
}

@media (max-width:430px){
  #s-persp.e-con,
  #s-latest.e-con{padding-left:24px;padding-right:24px}
  #s-persp-card-1.e-con,
  #s-persp-card-2.e-con,
  #s-persp-card-3.e-con,
  #s-persp-card-4.e-con{padding:24px 22px 28px}
  #s-latest-card-1.e-con,
  #s-latest-card-2.e-con,
  #s-latest-card-3.e-con{padding:20px}
  #s-latest-head .ml-go .elementor-button{font-size:.9375rem}
}