/* ══════════════════════════════════════════════════════════════════
   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,
#s-media{
  --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,
#s-media.e-con{
  background-color:var(--hx-ink);
  color:var(--ml-paper);
  padding:clamp(88px,9vw,136px) var(--ml-gut);
  --width:100%;
  max-width:none;
}

#s-latest-head.e-con,
#s-media-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,
#s-media-head .ml-eyebrow .elementor-heading-title{color:rgba(255,255,255,.62)}

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

/* The eyebrow and the section title sit on ONE LINE.

   They were already in the same flex row, but `body #s-latest-head.e-con` in
   ml-site.css centres the row's items and that shared rule serves five section
   heads, so it must not be edited here. Centring two texts of wildly different
   size (12.5px against 44.64px) lines up their BOXES, which puts the eyebrow's
   baseline about 21px above the title's - close enough to look like a mistake
   rather than a decision. Baseline alignment is what actually makes two texts
   read as one line. Specificity matches the ml-site rule and this file loads
   after it, so source order carries it.

   Scoped above 782px because that is where the head stacks to a column; below
   it there is no shared line to align to. */
@media (min-width:783px){
  body #s-latest-head.e-con,
  body #s-media-head.e-con{align-items:baseline}
  body #s-latest-head .ml-eyebrow,
  body #s-media-head .ml-eyebrow,
  body #s-latest-head .ml-section-title,
  body #s-media-head .ml-section-title{margin-top:0}

  /* The supporting line belongs to the TITLE, not to the middle of the page.

     `body #s-latest-head .ml-body` in ml-site.css centres it with auto margins,
     which is right for the four heads that stack but wrong for this one now
     that it is a row: measured, the eyebrow ran x78-405, the title x853-1362
     and this line sat at x501-939 - aligned to neither, floating in the gap
     between them, 50px adrift. Sending it to the same right edge as the title
     puts the two together as one block and leaves the eyebrow alone on the
     left, which is the structure the row was asking for. Right edge rather
     than left because the title is flush right at every viewport, so the two
     agree without pinning either to a width. */
  body #s-latest-head .ml-body,
  body #s-media-head .ml-body{
    flex-basis:100%;
    margin-left:auto;
    margin-right:0;
    text-align:right;
    margin-top:6px;
  }
}

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

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

#s-latest-head .ml-go .elementor-button,
#s-media-head .ml-go .elementor-button{
  font-size:1rem;
  letter-spacing:.02em;
  border-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,
#s-media .ml-kicker .elementor-heading-title{
  font-size:.7188rem;
  font-weight:600;
  letter-spacing:.24em;
  color:rgba(255,255,255,.6);
}

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

#s-latest .ml-title .elementor-heading-title,
#s-media .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,
#s-media .ml-excerpt{margin-top:12px}

#s-latest .ml-excerpt,
#s-media .ml-excerpt,
#s-latest .ml-excerpt p,
#s-media .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}

/* ── 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,
  #s-media-head.e-con{
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
  }
}

@media (max-width:430px){
  #s-persp.e-con,
  #s-latest.e-con,
  #s-media.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,
  #s-media-head .ml-go .elementor-button{font-size:.9375rem}
}


/* Client review 3, item 1c: "a View All Articles button linking to the complete
   Articles page". The homepage already showed only the latest three; the button
   was the missing half. Mirrors #s-close-actions so the two rows in this section
   sit the same way. */
#s-latest-actions.e-con,
#s-media-actions.e-con{
  padding:0;
  margin-top:56px;
  justify-content:center;
  gap:16px;
  --width:100%;
  max-width:none;
}

/* ── s-media inverts to paper ─────────────────────────────────────────
   The Media preview was cloned from #s-latest and inherited its INK colours
   as well as its layout, so the homepage ended on three dark bands in a row
   (s-latest, s-media, s-close) and the eye read the break as a mistake.

   Cloning shared colour, not just structure. That is the real lesson here:
   when a section is duplicated, the layout rules are what should be shared
   and the colour rules are what must be re-decided.

   Each override below deliberately MIRRORS THE SHAPE of the rule it has to
   beat, with a body prefix, because the originals are (0,1,2,0) and a
   blanket "body #s-media .elementor-heading-title" is only (0,1,1,1) and
   silently loses - which is exactly how the section title first shipped
   white on white. */

body #s-media.e-con,
body #s-media-actions.e-con{
  background-color:var(--ml-paper);
  color:var(--ml-ink);
}

body #s-media-head .ml-eyebrow .elementor-heading-title{color:var(--ml-grey)}
body #s-media-head .ml-section-title .elementor-heading-title{color:var(--ml-ink)}
body #s-media-head .ml-body,
body #s-media-head .ml-body p{color:var(--ml-grey)}

body #s-media .ml-kicker .elementor-heading-title{color:var(--ml-grey)}
body #s-media .ml-title .elementor-heading-title{color:var(--ml-ink)}
body #s-media .ml-excerpt,
body #s-media .ml-excerpt p{color:var(--ml-grey)}
body #s-media .ml-meta,
body #s-media .ml-meta .elementor-heading-title{color:var(--ml-grey)}
body #s-media .e-loop-item{border-top-color:rgba(0,0,0,.14)}

body #s-media .ml-go .elementor-button,
body #s-media-head .ml-go .elementor-button{
  color:var(--ml-ink);
  border-color:rgba(0,0,0,.4);
}
/* The shared .ml-go hover rule sets colour:paper unconditionally - correct
   for every other section this class appears in, all of which sit on ink,
   but these specific cards are paper-coloured tiles inside an otherwise-ink
   #s-media section. Left alone, hover would have gone white-on-white here
   too - found while fixing the same pattern's other instances 2026-08-17,
   not yet reported broken, closed anyway rather than left for later. */
body #s-media .ml-go .elementor-button:hover,
body #s-media .ml-go .elementor-button:focus,
body #s-media-head .ml-go .elementor-button:hover,
body #s-media-head .ml-go .elementor-button:focus{
  color:var(--ml-ink);
  border-color:var(--ml-ink);
}
body #s-media-actions .elementor-button{
  color:var(--ml-ink);
  border-color:var(--ml-ink);
}
body #s-media-actions .elementor-button:hover,
body #s-media-actions .elementor-button:focus{
  color:var(--ml-paper);
  background-color:var(--ml-ink);
  border-color:var(--ml-ink);
}