/* ══════════════════════════════════════════════════════════════════
   ML CORPORATE SERVICES | Site design system
   Archivo structure, Literata voice. Black, white and soft grey only;
   accent reserved for hover and active states (IMPLEMENTATION GUIDE 7).

   Structure and content are Elementor's, so every heading, paragraph
   and button stays editable in the builder (19). Typography, colour and
   section treatment are defined here so they stay consistent across
   every page and cannot drift page by page (6, 23).

   Addressing: sections carry an Elementor element ID (containers do not
   output custom classes in this build); everything inside carries a
   widget class.
   ══════════════════════════════════════════════════════════════════ */

/* ── Type roles ───────────────────────────────────────────────────
   Titles capitalise every word, per the client's direction. */

.ml-page-title .elementor-heading-title,
.ml-section-title .elementor-heading-title,
.ml-moment-title .elementor-heading-title,
.ml-title .elementor-heading-title{text-transform:capitalize}

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

.ml-page-title .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:560;
  font-size:clamp(44px,5.6vw,92px);
  line-height:.95;
  letter-spacing:-.058em;
  text-wrap:balance;
}

.ml-section-title .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:560;
  font-size:clamp(32px,3.8vw,54px);
  line-height:1.05;
  letter-spacing:-.03em;
  text-wrap:balance;
}

.ml-statement .elementor-heading-title{
  font-family:"Literata",Georgia,serif;
  font-weight:400;
  font-size:clamp(32px,3.4vw,44px);
  line-height:1.45;
}

.ml-body,
.ml-body p{
  font-family:"Literata",Georgia,serif;
  font-weight:400;
  font-size:1.0938rem;
  line-height:1.72;
}

.ml-body p + p{margin-top:16px}

.ml-lead,
.ml-lead p{
  font-family:"Literata",Georgia,serif;
  font-size:clamp(16px,1.05vw,19px);
  line-height:1.62;
}

/* ── Buttons: one shape everywhere (12, 23) ─────────────────────── */

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

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

.ml-btn-primary .elementor-button:hover{
  background-color:transparent;
  color:var(--ml-paper);
}

.ml-btn-secondary .elementor-button{
  background-color:transparent;
  color:var(--ml-paper);
  border-color:rgba(255,255,255,.48);
}

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

/* ── On ink ─────────────────────────────────────────────────────── */

#s-hero .elementor-heading-title,
#s-close .elementor-heading-title{color:var(--ml-paper)}

#s-hero .ml-eyebrow .elementor-heading-title{
  color:rgba(255,255,255,.84);
  letter-spacing:.38em;
}

#s-hero .ml-lead,
#s-hero .ml-lead p{color:rgba(255,255,255,.86)}

/* ── Hero ───────────────────────────────────────────────────────── */

#s-hero.e-con{
  position:relative;
  min-height:100svh;
  padding:clamp(138px,16vh,210px) var(--ml-gut) clamp(54px,7vh,96px);
  background-color:#000;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  justify-content:center;
  align-items:center;
  text-align:center;
  --width:100%;
  max-width:none;
}

#s-hero.e-con::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,.54) 42%,rgba(0,0,0,.3) 66%,rgba(0,0,0,.8)),
    linear-gradient(180deg,rgba(0,0,0,.35),transparent 40%,rgba(0,0,0,.78));
}

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

#s-hero .ml-hero-mark{text-align:center}

#s-hero .ml-hero-mark img{
  width:clamp(64px,6vw,92px);
  height:auto;
  display:block;
}



#s-hero-copy.e-con{
  max-width:var(--ml-maxw);
  padding:0;
  align-items:center;
  text-align:center;
  --width:100%;
}

#s-hero .ml-page-title{margin-top:34px}
#s-hero .ml-lead{margin-top:26px;max-width:78ch}
#s-hero-actions.e-con{margin-top:40px;padding:0;gap:16px;flex-wrap:wrap;justify-content:center;--width:auto}

#s-hero .ml-hero-proof{margin-top:38px}

#s-hero .ml-hero-proof,
#s-hero .ml-hero-proof p{
  font-family:"Literata",Georgia,serif;
  font-size:.9375rem;
  line-height:1.65;
  color:rgba(255,255,255,.72);
}

/* ── Introduction (paper) ───────────────────────────────────────── */

#s-begin.e-con{
  background-color:var(--ml-paper);
  color:var(--ml-ink);
  padding:clamp(106px,12vw,182px) var(--ml-gut);
  --width:100%;
  max-width:none;
}

#s-begin-wrap.e-con{
  max-width:1180px;
  margin:0 auto;
  padding:0;
}

#s-begin .ml-section-title .elementor-heading-title{max-width:14ch}
#s-begin .ml-body,
#s-begin .ml-body p{color:var(--ml-mist-paper)}

/* ── Closing statement (ink) ────────────────────────────────────── */

#s-close.e-con{
  background-color:var(--ml-charcoal);
  color:var(--ml-paper);
  padding:clamp(120px,14vw,200px) var(--ml-gut);
  text-align:center;
  --width:100%;
  max-width:none;
}

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

#s-close-actions.e-con{margin-top:52px;padding:0;gap:16px;justify-content:center;flex-wrap:wrap}

/* ── Responsive ─────────────────────────────────────────────────────
   Built in from the start. Checked at 1440, 1024, 768 and 390. */



@media (max-width:782px){
  #s-hero.e-con{background-position:58% 34%}
  .ml-page-title .elementor-heading-title{font-size:clamp(47px,14.2vw,76px)}
  .ml-section-title .elementor-heading-title{font-size:clamp(25px,7vw,34px)}
  .ml-statement .elementor-heading-title{font-size:clamp(23px,6.2vw,32px);line-height:1.4}
  .ml-btn .elementor-button{padding:16px 30px}
}

@media (max-width:430px){
  #s-hero.e-con,
  #s-begin.e-con,
  #s-close.e-con{padding-left:24px;padding-right:24px}
  #s-hero-actions .elementor-button,
  #s-close-actions .elementor-button{width:100%}
}

/* ── Moments (the four explanatory illustrations, GUIDE 10) ─────────
   Growth / Ownership / Continuity / Cross-border. Each card is an
   illustration stage over ink with its numeral, title and one line of
   copy beneath, per the approved card design. */

#s-moments.e-con{
  background-color:var(--ml-charcoal);
  color:var(--ml-paper);
  padding:clamp(96px,11vw,168px) var(--ml-gut);
  --width:100%;
  max-width:none;
}

#s-moments-head.e-con{
  max-width:var(--ml-maxw);
  margin:0 auto clamp(44px,5vw,72px);
  padding:0;
}

#s-moments-head .ml-eyebrow .elementor-heading-title{color:var(--ml-grey-light)}
#s-moments-head .ml-section-title .elementor-heading-title{color:var(--ml-paper);max-width:22ch}
#s-moments-head .ml-body,
#s-moments-head .ml-body p{color:var(--ml-mist-ink);max-width:46ch;margin-top:18px}

#s-moments-grid.e-con{
  max-width:var(--ml-maxw);
  margin:0 auto;
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,1.6vw,26px);
  align-items:stretch;
}

#s-moment-1.e-con,
#s-moment-2.e-con,
#s-moment-3.e-con,
#s-moment-4.e-con{
  padding:0;
  background-color:#121210;
  border-radius:14px;
  overflow:hidden;
  --width:100%;
  max-width:none;
  transition:background-color .3s ease;
}

#s-moment-1:hover,
#s-moment-2:hover,
#s-moment-3:hover,
#s-moment-4:hover{background-color:#171714}

.ml-moment-art{line-height:0}

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

.ml-moment-num .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:.6562rem;
  letter-spacing:.28em;
  color:var(--ml-grey-light);
}

.ml-moment-title .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-weight:600;
  font-size:clamp(19px,1.45vw,24px);
  line-height:1.16;
  letter-spacing:-.02em;
  color:var(--ml-paper);
  margin-top:14px;
}

#s-moments-grid .ml-body,
#s-moments-grid .ml-body p{
  font-family:"Literata",Georgia,serif;
  font-size:.9688rem;
  line-height:1.62;
  color:var(--ml-mist-ink);
  margin-top:14px;
}

#s-moment-copy-1.e-con,
#s-moment-copy-2.e-con,
#s-moment-copy-3.e-con,
#s-moment-copy-4.e-con{padding:30px 30px 38px;flex:1 1 auto}

@media (max-width:1180px){
  #s-moments-grid.e-con{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:640px){
  #s-moments-grid.e-con{grid-template-columns:minmax(0,1fr)}
  #s-moment-copy-1.e-con,
  #s-moment-copy-2.e-con,
  #s-moment-copy-3.e-con,
  #s-moment-copy-4.e-con{padding:26px 24px 32px}
}

/* ── Scale lock ─────────────────────────────────────────────────────
   Measured against the built reference at 1440 and pinned here. Astra
   and Elementor both set heading line-height globally at a higher
   specificity than a plain class selector, which inflated every title
   by roughly 1.4x, so these declarations are marked important. Figures
   are the reference values, not guesses:
     hero title    61.92px / 0.95    lead   15.12px / 1.56
     section title 44.64px / 0.96    body   16px    / 1.56 */

.ml-page-title .elementor-heading-title{
  font-size:clamp(40px,4.3vw,62px) !important;
  line-height:.95 !important;
  letter-spacing:-.05em !important;
}

.ml-section-title .elementor-heading-title{
  font-size:clamp(28px,3.1vw,45px) !important;
  line-height:.96 !important;
  letter-spacing:-.045em !important;
}

.ml-statement .elementor-heading-title{
  font-size:clamp(24px,2.4vw,34px) !important;
  line-height:1.42 !important;
}

.ml-lead,
.ml-lead p{
  font-size:clamp(14px,1.05vw,15.5px) !important;
  line-height:1.56 !important;
}

.ml-body,
.ml-body p{
  font-size:16px !important;
  line-height:1.56 !important;
}

.ml-moment-title .elementor-heading-title{
  font-size:clamp(17px,1.3vw,21px) !important;
  line-height:1.15 !important;
}

/* ── Hero rhythm, shared across every page (GUIDE 4) ────────────────
   Measured drift before this block, at 1440: the home hero sat on a
   1285px measure with 144px of head room, the About family on 1120/108,
   the Perspectives family on 1180/144 and Contact on 1120/118. Four
   different heroes on one site reads as four different sites, so the
   measure, the head room and the interior height are set once here.
   The home hero keeps its taller stance as the landing surface; every
   interior hero shares one height. */

body #s-hero.e-con,
body #about-hero.e-con,
body #lead-hero.e-con,
body #mom-hero.e-con,
body #who-hero.e-con,
body #persp-hero.e-con,
body #pub-hero.e-con,
body #media-hero.e-con,
body #contact-hero.e-con{
  padding-left:var(--ml-gut);
  padding-right:var(--ml-gut);
  --width:100%;
  max-width:none;
}

body #about-hero.e-con,
body #lead-hero.e-con,
body #mom-hero.e-con,
body #who-hero.e-con,
body #persp-hero.e-con,
body #pub-hero.e-con,
body #media-hero.e-con,
body #contact-hero.e-con{
  min-height:74svh;
  padding-top:clamp(150px,17vh,190px);
  padding-bottom:clamp(70px,9vh,110px);
  justify-content:center;
}

/* One measure for every hero's copy column. */
body #s-hero-copy.e-con,
body #about-hero-copy.e-con,
body #lead-hero-copy.e-con,
body #mom-hero-copy.e-con,
body #who-hero-copy.e-con,
body #persp-hero-copy.e-con,
body #pub-hero-copy.e-con,
body #media-hero-copy.e-con,
body #contact-hero-copy.e-con{
  max-width:var(--ml-maxw);
  --width:100%;
  margin-left:auto;
  margin-right:auto;
  padding:0;
}

/* The header mark returns to the homepage. */
.mlcs-home-link{display:inline-block;line-height:0}

/* ── One black ──────────────────────────────────────────────────────
   Five different dark values had crept in across the pages: #000000,
   #0e0e0c, #0a0a0a and #0b0b0a on the sections, which reads as a
   colour fault when two of them meet at a section edge. The reference
   build uses a single ink field, so every dark section is set to it
   here. Card surfaces stay one step lighter so they still lift off
   the field. */

:root{
  --ml-field:#0a0a0a;
  --ml-card:#121210;
}

body #s-hero.e-con,
body #s-moments.e-con,
body #s-latest.e-con,
body #s-close.e-con,
body #about-hero.e-con,
body #about-persp.e-con,
body #about-close.e-con,
body #lead-approach.e-con,
body #mom-hero.e-con,
body #mom-2.e-con,
body #mom-4.e-con,
body #who-hero.e-con,
body #who-convos.e-con,
body #who-close.e-con,
body #persp-hero.e-con,
body #persp-latest.e-con,
body #persp-band.e-con,
body #persp-close.e-con,
body #pub-hero.e-con,
body #pub-library.e-con,
body #pub-close.e-con,
body #media-hero.e-con,
body #media-selected.e-con,
body #media-close.e-con,
body #contact-close.e-con{
  background-color:var(--ml-field);
}

body #s-moment-1.e-con,
body #s-moment-2.e-con,
body #s-moment-3.e-con,
body #s-moment-4.e-con{
  background-color:var(--ml-card);
}

/* ── Buttons: one grammar, taken from the reference build ───────────
   IMPLEMENTATION GUIDE 12: one button style throughout. Primary is
   black with white text, secondary is white with a black outline, no
   gradients, no shadows. 13 allows fade only, so the hover state
   changes tone and never moves. Radius, height and lettering match the
   reference exactly: 18px, 54px, Archivo .72rem at .18em uppercase. */

:root{ --ml-button-radius:18px; }

body .ml-btn .elementor-button{
  font-family:"Archivo",Helvetica,Arial,sans-serif !important;
  font-size:.72rem !important;
  line-height:1 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  font-weight:600 !important;
  border-radius:var(--ml-button-radius) !important;
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:17px 30px !important;
  border:1px solid currentColor;
  box-shadow:none !important;
  background-image:none !important;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease,opacity .35s ease;
  transform:none !important;
}

/* On paper: primary black, secondary outlined. */
body .ml-btn-primary .elementor-button{
  background-color:var(--ml-ink);
  color:var(--ml-paper);
  border-color:var(--ml-ink);
}
body .ml-btn-secondary .elementor-button{
  background-color:transparent;
  color:var(--ml-ink);
  border-color:rgba(14,14,12,.45);
}

/* On an ink field the pair inverts, as in the reference. */
body #s-hero .ml-btn-primary .elementor-button,
body #s-close .ml-btn-primary .elementor-button,
body #about-close .ml-btn-primary .elementor-button,
body #who-close .ml-btn-primary .elementor-button,
body #persp-close .ml-btn-primary .elementor-button,
body #pub-close .ml-btn-primary .elementor-button,
body #media-close .ml-btn-primary .elementor-button,
body #contact-close .ml-btn-primary .elementor-button,
body #media-invite .ml-btn-primary .elementor-button{
  background-color:var(--ml-paper);
  color:var(--ml-ink);
  border-color:var(--ml-paper);
}
body #s-hero .ml-btn-secondary .elementor-button,
body #s-close .ml-btn-secondary .elementor-button,
body #about-close .ml-btn-secondary .elementor-button,
body #who-close .ml-btn-secondary .elementor-button,
body #persp-close .ml-btn-secondary .elementor-button,
body #pub-close .ml-btn-secondary .elementor-button,
body #media-close .ml-btn-secondary .elementor-button,
body #contact-close .ml-btn-secondary .elementor-button{
  background-color:transparent;
  color:var(--ml-paper);
  border-color:rgba(255,255,255,.48);
}

/* Hover: a defined tone change, never a colour surprise and never movement. */
body .ml-btn-primary .elementor-button:hover,
body .ml-btn-primary .elementor-button:focus{
  background-color:transparent;
  color:var(--ml-ink);
  border-color:var(--ml-ink);
}
body .ml-btn-secondary .elementor-button:hover,
body .ml-btn-secondary .elementor-button:focus{
  background-color:var(--ml-ink);
  color:var(--ml-paper);
  border-color:var(--ml-ink);
}
body #s-hero .ml-btn-primary .elementor-button:hover,
body #s-close .ml-btn-primary .elementor-button:hover,
body #about-close .ml-btn-primary .elementor-button:hover,
body #who-close .ml-btn-primary .elementor-button:hover,
body #persp-close .ml-btn-primary .elementor-button:hover,
body #pub-close .ml-btn-primary .elementor-button:hover,
body #media-close .ml-btn-primary .elementor-button:hover,
body #contact-close .ml-btn-primary .elementor-button:hover,
body #media-invite .ml-btn-primary .elementor-button:hover{
  background-color:transparent;
  color:var(--ml-paper);
  border-color:var(--ml-paper);
}
body #s-hero .ml-btn-secondary .elementor-button:hover,
body #s-close .ml-btn-secondary .elementor-button:hover,
body #about-close .ml-btn-secondary .elementor-button:hover,
body #who-close .ml-btn-secondary .elementor-button:hover,
body #persp-close .ml-btn-secondary .elementor-button:hover,
body #pub-close .ml-btn-secondary .elementor-button:hover,
body #media-close .ml-btn-secondary .elementor-button:hover,
body #contact-close .ml-btn-secondary .elementor-button:hover{
  background-color:var(--ml-paper);
  color:var(--ml-ink);
  border-color:var(--ml-paper);
}

/* Text links: one hover, no surprise colours (7). */
body .ml-go .elementor-button:hover,
body .ml-title .elementor-heading-title a:hover,
body .ml-kicker a:hover{
  opacity:.72;
  color:inherit;
}

/* ── Titles: no unnecessary lines ───────────────────────────────────
   Several sections carried measures as tight as 14ch, which broke a
   short heading over four lines. Widened and balanced so a title takes
   the fewest lines it reasonably can. */

body .ml-section-title .elementor-heading-title{
  max-width:26ch;
  text-wrap:balance;
}
body .ml-page-title .elementor-heading-title{
  max-width:none;
  text-wrap:balance;
}
body #s-begin .ml-section-title .elementor-heading-title,
body #about-why .ml-section-title .elementor-heading-title{
  max-width:22ch;
}

/* One button height everywhere (12: one button style throughout). */
body .ml-btn .elementor-button,
body .ml-tile .elementor-button{
  min-height:54px !important;
}

/* Two intro headings were still breaking over four lines on their own
   page measures. Widened to the shared cap. */
body #mom-intro .ml-section-title .elementor-heading-title,
body #who-intro .ml-section-title .elementor-heading-title,
body #who-intro-a .ml-section-title .elementor-heading-title,
body #persp-hero .ml-page-title .elementor-heading-title,
body #contact-hero .ml-page-title .elementor-heading-title{
  max-width:32ch !important;
}

/* ── Heading alignment ──────────────────────────────────────────────
   Section heads that stand alone across the full width are centred.
   Heads that sit in a two-column block opposite their body copy stay
   left, because the alignment is doing structural work there: it pairs
   the heading with the text beside it. */

body #s-latest-head.e-con,
body #media-selected-head.e-con,
body #persp-latest-head.e-con,
body #pub-library-head.e-con,
body #s-moments-head.e-con{
  align-items:center;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

body #s-latest-head .ml-section-title .elementor-heading-title,
body #media-selected-head .ml-section-title .elementor-heading-title,
body #persp-latest-head .ml-section-title .elementor-heading-title,
body #pub-library-head .ml-section-title .elementor-heading-title,
body #s-moments-head .ml-section-title .elementor-heading-title,
body #s-latest-head .ml-body,
body #media-selected-head .ml-body,
body #persp-latest-head .ml-body,
body #pub-library-head .ml-body,
body #s-moments-head .ml-body{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* ── No stray blue ──────────────────────────────────────────────────
   The theme's link colour and the browser focus ring were showing on
   buttons as a pale blue outline on hover. Colour is black, white and
   grey only (7), so both are pinned. Focus stays visible for keyboard
   users, drawn in ink rather than the theme default. */

body .ml-btn .elementor-button,
body .ml-btn .elementor-button:hover,
body .ml-btn .elementor-button:focus,
body .ml-btn .elementor-button:active,
body .ml-tile .elementor-button:hover,
body .ml-go .elementor-button:hover{
  outline:none !important;
  box-shadow:none !important;
}

body .ml-btn .elementor-button:focus-visible{
  outline:2px solid currentColor !important;
  outline-offset:3px;
}

/* Every button inverts on hover, filled ones included, with the border
   following the fill so no third colour appears. */
body .ml-btn-primary .elementor-button:hover,
body .ml-btn-primary .elementor-button:focus{
  background-color:transparent !important;
  color:var(--ml-ink) !important;
  border-color:var(--ml-ink) !important;
}
body .ml-btn-secondary .elementor-button:hover,
body .ml-btn-secondary .elementor-button:focus{
  background-color:var(--ml-ink) !important;
  color:var(--ml-paper) !important;
  border-color:var(--ml-ink) !important;
}
body #s-hero .ml-btn-primary .elementor-button:hover,
body #s-close .ml-btn-primary .elementor-button:hover,
body #about-close .ml-btn-primary .elementor-button:hover,
body #who-close .ml-btn-primary .elementor-button:hover,
body #persp-close .ml-btn-primary .elementor-button:hover,
body #pub-close .ml-btn-primary .elementor-button:hover,
body #media-close .ml-btn-primary .elementor-button:hover,
body #media-invite .ml-btn-primary .elementor-button:hover,
body #contact-close .ml-btn-primary .elementor-button:hover{
  background-color:transparent !important;
  color:var(--ml-paper) !important;
  border-color:var(--ml-paper) !important;
}
body #s-hero .ml-btn-secondary .elementor-button:hover,
body #s-close .ml-btn-secondary .elementor-button:hover,
body #about-close .ml-btn-secondary .elementor-button:hover,
body #who-close .ml-btn-secondary .elementor-button:hover,
body #persp-close .ml-btn-secondary .elementor-button:hover,
body #pub-close .ml-btn-secondary .elementor-button:hover,
body #media-close .ml-btn-secondary .elementor-button:hover,
body #contact-close .ml-btn-secondary .elementor-button:hover{
  background-color:var(--ml-paper) !important;
  color:var(--ml-ink) !important;
  border-color:var(--ml-paper) !important;
}

/* ── Header over a paper hero ───────────────────────────────────────
   The header nav is white, which is correct over the photographic
   heroes but invisible on Leadership and Contact, whose heroes are
   paper. Those two pages get ink links until the header scrolls, at
   which point the shared dark bar takes over as everywhere else. */

body.page-id-1957 header:not(.is-scrolled) .nav a,
body.page-id-1993 header:not(.is-scrolled) .nav a,
body.page-id-1957 header:not(.is-scrolled) .elementor-nav-menu a,
body.page-id-1993 header:not(.is-scrolled) .elementor-nav-menu a,
body.page-id-1957 header:not(.is-scrolled) .menu-link,
body.page-id-1993 header:not(.is-scrolled) .menu-link{
  color:var(--ml-ink) !important;
  text-shadow:none !important;
}
body.page-id-1957 header:not(.is-scrolled) .mlcs-home-link img,
body.page-id-1993 header:not(.is-scrolled) .mlcs-home-link img{
  filter:invert(1);
}

/* The LinkedIn link reads as a text link, not a filled button. */
body .ml-linkedin .elementor-button{
  background:none !important;
  border:0 !important;
  border-bottom:1px solid currentColor !important;
  border-radius:0 !important;
  min-height:0 !important;
  padding:0 0 3px !important;
  font-family:"Literata",Georgia,serif !important;
  font-size:.9375rem !important;
  letter-spacing:.01em !important;
  text-transform:none !important;
  color:var(--ml-ink) !important;
}
body .ml-linkedin .elementor-button:hover{opacity:.72}

/* ── Nothing inherits the theme's ink ───────────────────────────────
   Astra sets a default heading colour (a dark slate blue). Anywhere a
   section did not declare its own, that colour showed through, which
   on an ink field reads as dark blue text on black. Every ink section
   now states its own colours, and no theme default can reach them. */

body #s-hero, body #s-moments, body #s-latest, body #s-close,
body #about-hero, body #about-persp, body #about-close,
body #lead-approach, body #lead-close,
body #mom-hero, body #mom-2, body #mom-4,
body #who-hero, body #who-convos, body #who-close,
body #persp-hero, body #persp-latest, body #persp-band, body #persp-close,
body #pub-hero, body #pub-library, body #pub-close,
body #media-hero, body #media-selected, body #media-invite, body #media-close,
body #contact-close{
  color:var(--ml-paper);
}

body #s-hero .elementor-heading-title,
body #s-moments .elementor-heading-title,
body #s-latest .elementor-heading-title,
body #s-close .elementor-heading-title,
body #about-hero .elementor-heading-title,
body #about-persp .elementor-heading-title,
body #about-close .elementor-heading-title,
body #lead-approach .elementor-heading-title,
body #mom-hero .elementor-heading-title,
body #mom-2 .elementor-heading-title,
body #mom-4 .elementor-heading-title,
body #who-hero .elementor-heading-title,
body #who-convos .elementor-heading-title,
body #who-close .elementor-heading-title,
body #persp-hero .elementor-heading-title,
body #persp-latest .elementor-heading-title,
body #persp-band .elementor-heading-title,
body #persp-close .elementor-heading-title,
body #pub-hero .elementor-heading-title,
body #pub-library .elementor-heading-title,
body #pub-close .elementor-heading-title,
body #media-hero .elementor-heading-title,
body #media-selected .elementor-heading-title,
body #media-invite .elementor-heading-title,
body #media-close .elementor-heading-title,
body #contact-close .elementor-heading-title{
  color:var(--ml-paper) !important;
}

body #s-close .ml-body, body #s-close .ml-body p,
body #about-close .ml-body, body #about-close .ml-body p,
body #about-persp .ml-body, body #about-persp .ml-body p,
body #lead-approach .ml-body, body #lead-approach .ml-body p,
body #who-close .ml-body, body #who-close .ml-body p,
body #who-convos .ml-body, body #who-convos .ml-body p,
body #persp-close .ml-body, body #persp-close .ml-body p,
body #persp-latest .ml-body, body #persp-latest .ml-body p,
body #pub-close .ml-body, body #pub-close .ml-body p,
body #pub-library .ml-body, body #pub-library .ml-body p,
body #media-close .ml-body, body #media-close .ml-body p,
body #media-invite .ml-body, body #media-invite .ml-body p,
body #media-selected .ml-body, body #media-selected .ml-body p,
body #contact-close .ml-body, body #contact-close .ml-body p,
body #mom-2 .ml-body, body #mom-2 .ml-body p,
body #mom-4 .ml-body, body #mom-4 .ml-body p{
  color:var(--ml-mist-ink) !important;
}

body #s-moments .ml-eyebrow .elementor-heading-title,
body #s-latest .ml-eyebrow .elementor-heading-title,
body #s-close .ml-eyebrow .elementor-heading-title,
body #about-close .ml-eyebrow .elementor-heading-title,
body #about-persp .ml-eyebrow .elementor-heading-title,
body #lead-approach .ml-eyebrow .elementor-heading-title,
body #who-close .ml-eyebrow .elementor-heading-title,
body #persp-close .ml-eyebrow .elementor-heading-title,
body #pub-close .ml-eyebrow .elementor-heading-title,
body #media-close .ml-eyebrow .elementor-heading-title,
body #contact-close .ml-eyebrow .elementor-heading-title{
  color:var(--ml-grey-light) !important;
}

/* Leadership hero: PAGES.docx Page 3 specifies a plain white
   background with no image. Held to the spec, set to true white. */
body #lead-hero.e-con{
  background-color:#ffffff !important;
  background-image:none !important;
}
body #lead-hero .elementor-heading-title{color:var(--ml-ink) !important}
body #lead-hero .ml-eyebrow .elementor-heading-title{color:var(--ml-grey) !important}
body #lead-hero .ml-body, body #lead-hero .ml-body p,
body #lead-hero .ml-lead, body #lead-hero .ml-lead p{color:var(--ml-mist-paper) !important}

/* Two real contrast faults, measured: dark grey body copy sitting on the
   ink field on Perspectives, and white type on a light panel on Media. */

body #persp-band .ml-body,
body #persp-band .ml-body p,
body #persp-band .elementor-widget-text-editor p,
body #persp-close .elementor-widget-text-editor p,
body #persp-latest .elementor-widget-text-editor p{
  color:var(--ml-mist-ink) !important;
}

/* The invitation panel on Media is paper, so it takes ink type. */
body #media-invite{color:var(--ml-ink)}
body #media-invite .elementor-heading-title{color:var(--ml-ink) !important}
body #media-invite .ml-eyebrow .elementor-heading-title{color:var(--ml-grey) !important}
body #media-invite .ml-body,
body #media-invite .ml-body p,
body #media-invite .elementor-widget-text-editor p{color:var(--ml-mist-paper) !important}
body #media-invite .ml-btn-primary .elementor-button{
  background-color:var(--ml-ink);
  color:var(--ml-paper);
  border-color:var(--ml-ink);
}
body #media-invite .ml-btn-primary .elementor-button:hover{
  background-color:transparent !important;
  color:var(--ml-ink) !important;
  border-color:var(--ml-ink) !important;
}



/* ── Refinement pass ────────────────────────────────────────────────

   1. The mark sat flush against the eyebrow beneath it, with a measured
      gap of exactly 0px, which reads as a collision rather than a stack.
   2. Buttons inside ink bands were rendering black-on-black: measured
      fill rgb(0,0,0) against the rgb(10,10,10) field. Every ink section
      now takes the inverted pair, so a primary button is always legible
      against whatever it sits on. */

body [id$="-hero"] .ml-hero-mark,
body #s-hero .ml-hero-mark,
body [id$="-hero-copy"] .elementor-widget-image{
  margin-bottom:20px;
}

body #s-hero .elementor-widget-image + .ml-eyebrow,
body [id$="-hero"] .elementor-widget-image + .ml-eyebrow{
  margin-top:4px;
}

/* Any button on an ink field takes the light pair. */
body #s-moments .ml-btn-primary .elementor-button,
body #s-latest .ml-btn-primary .elementor-button,
body #about-persp .ml-btn-primary .elementor-button,
body #lead-approach .ml-btn-primary .elementor-button,
body #mom-2 .ml-btn-primary .elementor-button,
body #mom-4 .ml-btn-primary .elementor-button,
body #who-convos .ml-btn-primary .elementor-button,
body #persp-band .ml-btn-primary .elementor-button,
body #persp-latest .ml-btn-primary .elementor-button,
body #pub-library .ml-btn-primary .elementor-button,
body #media-selected .ml-btn-primary .elementor-button{
  background-color:var(--ml-paper) !important;
  color:var(--ml-ink) !important;
  border-color:var(--ml-paper) !important;
}
body #s-moments .ml-btn-primary .elementor-button:hover,
body #s-latest .ml-btn-primary .elementor-button:hover,
body #about-persp .ml-btn-primary .elementor-button:hover,
body #lead-approach .ml-btn-primary .elementor-button:hover,
body #mom-2 .ml-btn-primary .elementor-button:hover,
body #mom-4 .ml-btn-primary .elementor-button:hover,
body #who-convos .ml-btn-primary .elementor-button:hover,
body #persp-band .ml-btn-primary .elementor-button:hover,
body #persp-latest .ml-btn-primary .elementor-button:hover,
body #pub-library .ml-btn-primary .elementor-button:hover,
body #media-selected .ml-btn-primary .elementor-button:hover{
  background-color:transparent !important;
  color:var(--ml-paper) !important;
  border-color:var(--ml-paper) !important;
}
body #persp-band .ml-btn-secondary .elementor-button,
body #persp-latest .ml-btn-secondary .elementor-button,
body #media-selected .ml-btn-secondary .elementor-button,
body #pub-library .ml-btn-secondary .elementor-button{
  background-color:transparent !important;
  color:var(--ml-paper) !important;
  border-color:rgba(255,255,255,.48) !important;
}

/* ── Contact details ────────────────────────────────────────────────
   The telephone and email in the office panel were inheriting a
   heading size and rendering at 71px, which broke the address block
   over several lines. They are supporting information, set at body
   size like the rest of the panel. */

body #contact-enquiry a[href^="tel"],
body #contact-enquiry a[href^="mailto"],
body #contact-enquiry a[href^="tel"] *,
body #contact-enquiry a[href^="mailto"] *,
body #contact-office a,
body #contact-office p{
  font-family:"Literata",Georgia,serif !important;
  font-size:1rem !important;
  line-height:1.6 !important;
  letter-spacing:normal !important;
  font-weight:400 !important;
  overflow-wrap:anywhere;
}

/* ── Mobile menu ────────────────────────────────────────────────────
   The theme's mobile menu was inheriting a display size and the theme
   font: measured at 71px Poppins per item, which is what made the menu
   look broken on a phone. Matched to the desktop navigation (Literata
   16px) with touch-sized rows. */

/* Mobile drawer only. This block previously matched .main-header-menu a
   with no media query, so it painted the DESKTOP navigation ink as well
   and the homepage nav went black on a black hero. */
@media (max-width:921px){
  body .ast-hf-mobile-menu a,
  body .ast-mobile-popup-drawer .main-header-menu a,
  body .main-header-menu a,
  body .ast-mobile-header-wrap .main-header-menu a{
    font-family:"Literata",Georgia,serif !important;
    font-size:1.0625rem !important;
    line-height:1.4 !important;
    letter-spacing:normal !important;
    font-weight:400 !important;
    text-transform:none !important;
    padding-top:14px !important;
    padding-bottom:14px !important;
    color:var(--ml-ink) !important;
  }
}

/* Desktop: light over the photographic heroes, ink over the two paper
   ones, and light again once the scrolled bar goes dark. */
@media (min-width:922px){
  body .main-header-menu a,
  body .menu-link{
    font-family:"Literata",Georgia,serif !important;
    font-size:1rem !important;
    letter-spacing:normal !important;
    text-transform:none !important;
    color:var(--ml-paper) !important;
  }
  body.page-id-1957 .site-header:not(.mlcs-stuck) .main-header-menu a,
  body.page-id-1993 .site-header:not(.mlcs-stuck) .main-header-menu a{
    color:var(--ml-ink) !important;
  }
}

/* Row dividers belong to the mobile drawer only. Applied to
   .main-header-menu they also drew a hairline across the desktop
   navigation, which read as a rule under the header. */
@media (max-width:921px){
  body .ast-hf-mobile-menu .menu-item,
  body .ast-mobile-popup-drawer .menu-item{
    border-bottom:1px solid rgba(14,14,12,.10);
  }
}

/* Nothing inherits the theme's own typeface. Archivo carries structure,
   Literata carries voice, and that is the whole set (6). */
body,
body p,
body li,
body span,
body a,
body button,
body input,
body textarea,
body select{
  font-family:"Literata",Georgia,serif;
}
body h1, body h2, body h3, body h4, body h5, body h6{
  font-family:"Archivo",Helvetica,Arial,sans-serif;
}

/* ── Menu toggle ────────────────────────────────────────────────────
   The theme drew it in accent blue; painting it ink removed the blue
   but made it black on black over every dark hero. Measured on pixels:
   separation between the bars and the field was 16 on the homepage and
   15 on Media, against 60 on Leadership's paper hero. The toggle now
   follows the surface beneath it. */

/* Default: light, because seven of the nine heroes are photographic. */
body .menu-toggle,
body .menu-toggle:focus,
body .ast-mobile-menu-trigger-minimal,
body .menu-toggle .ast-mobile-svg,
body .ast-button-wrap .menu-toggle.main-header-menu-toggle{
  color:var(--ml-paper) !important;
  fill:var(--ml-paper) !important;
  background:transparent !important;
  border-color:transparent !important;
}

/* The two pages whose heroes are paper take ink, until the bar darkens. */
body.page-id-1957 .site-header:not(.mlcs-stuck) .menu-toggle,
body.page-id-1957 .site-header:not(.mlcs-stuck) .menu-toggle .ast-mobile-svg,
body.page-id-1993 .site-header:not(.mlcs-stuck) .menu-toggle,
body.page-id-1993 .site-header:not(.mlcs-stuck) .menu-toggle .ast-mobile-svg{
  color:var(--ml-ink) !important;
  fill:var(--ml-ink) !important;
}

/* The drawer itself is paper, so its close control stays ink. */
body .ast-mobile-popup-drawer .menu-toggle-close,
body .ast-mobile-popup-drawer .menu-toggle-close svg,
body .ast-mobile-popup-drawer .ast-close-svg,
body .ast-mobile-popup-drawer .menu-toggle{
  color:var(--ml-ink) !important;
  fill:var(--ml-ink) !important;
  background:transparent !important;
}


/* ── Leadership corrections ─────────────────────────────────────────
   1. The hero read cream although its background computed white: a
      ::before was painting a radial wash over it. PAGES.docx Page 3
      asks for a plain white background with no image, so the wash goes.
   2. mom-close and lead-close are paper sections, so their primary
      button keeps the ink pair on hover instead of turning white on
      white and disappearing.
   3. The credential cards were 174px wide and set to their own content
      heights, which broke the row. Two even columns, equal heights. */

body #lead-hero::before,
body #lead-hero::after{
  content:none !important;
  background:none !important;
}

body #mom-close .ml-btn-primary .elementor-button:hover,
body #lead-close .ml-btn-primary .elementor-button:hover{
  background-color:transparent !important;
  color:var(--ml-ink) !important;
  border-color:var(--ml-ink) !important;
}

body #lead-lydie-creds.e-con,
body #lead-paul-creds.e-con{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,1.4vw,22px);
  align-items:stretch;
}

body [id^="lead-lydie-cred-"].e-con,
body [id^="lead-paul-cred-"].e-con{
  height:100%;
  padding:26px 26px 30px !important;
}

/* The approach statement was breaking over three lines. */
body #lead-approach .ml-section-title .elementor-heading-title,
body #lead-approach .ml-statement .elementor-heading-title{
  max-width:34ch !important;
}

/* ── Paper tooth ────────────────────────────────────────────────────
   The built reference carries a fine grain on its paper sections so
   the white reads as stock rather than as screen white. One
   high-frequency layer, raised from 0.125 to 0.17 so the tooth is
   easier to see. The frequency stays at 1.6: fineness is what makes it
   read as stock, and dropping it produces low-frequency clumps that
   look like compression artefact. Measured cost of the change is about
   1 brightness point per 0.02 opacity, so the stock darkens by roughly
   two points and stays comfortably white. */

body #s-begin.e-con,
body #s-persp.e-con,
body #about-why.e-con,
body #lead-hero.e-con,
body #lead-lydie.e-con,
body #lead-paul.e-con,
body #lead-close.e-con,
body #mom-intro.e-con,
body #mom-1.e-con,
body #mom-3.e-con,
body #mom-close.e-con,
body #who-intro.e-con,
body #who-advise.e-con,
body #who-value.e-con,
body #persp-topics.e-con,
body #pub-types.e-con,
body #pub-request.e-con,
body #media-invite.e-con,
body #contact-hero.e-con,
body #contact-enquiry.e-con{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.17'/%3E%3C/svg%3E") !important;
  background-repeat:repeat;
  background-size:420px 420px;
}

/* ── Header: sticky, and quiet until it is needed ───────────────────
   The reference build keeps the navigation with you: transparent while
   you are at the top of the page, and a dark bar once you scroll, so
   the links stay legible over whatever is passing underneath. Desktop
   only; the phone keeps the standard header and its drawer. */

@media (min-width:922px){
  body .site-header,
  body #masthead.site-header{
    /* fixed rather than sticky, so the header sits ON the hero exactly as
       in the reference build. In flow it pushed the hero down and left a
       band of plain body white above the section's tooth, which read as a
       rule under the navigation. */
    position:fixed;
    top:0;
    left:0;
    right:0;
    width:100%;
    z-index:99;
    background:transparent;
    border-bottom:0 !important;
    box-shadow:none !important;
    transition:background-color .3s ease,backdrop-filter .3s ease;
  }

  body .site-header.mlcs-stuck,
  body #masthead.site-header.mlcs-stuck{
    background:rgba(10,10,10,.82);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }

  /* Once the bar is dark, every page's links are light, including the
     two pages whose heroes are paper. */
  body .site-header.mlcs-stuck .main-header-menu a,
  body.page-id-1957 .site-header.mlcs-stuck .main-header-menu a,
  body.page-id-1993 .site-header.mlcs-stuck .main-header-menu a,
  body .site-header.mlcs-stuck .menu-link{
    color:var(--ml-paper) !important;
  }
}

/* No rule under the header at rest. */
body .site-header,
body .main-header-bar,
body .ast-main-header-wrap,
body .main-header-bar-wrap{
  border-bottom:0 !important;
  box-shadow:none !important;
}

/* Hover and current page draw an underline, as in the reference build,
   in the colour the link is already wearing.

   The rule is drawn to the WIDTH OF THE TEXT, not the link box. The
   nav items sit edge to edge - measured gap between link boxes is 0px
   with 17px of padding inside each - so a border on the box made the
   active item's underline run straight into the hovered item's next to
   it, reading as one long dash across two items. Insetting by the
   padding keeps each underline over its own word. */
@media (min-width:922px){
  body .main-header-menu > .menu-item > a,
  body .main-header-menu > .menu-item > .menu-link{
    position:relative;
    border-bottom:0;
    padding-bottom:3px;
  }
  body .main-header-menu > .menu-item > a::after{
    content:"";
    position:absolute;
    left:17px;
    right:17px;
    bottom:6px;
    height:2px;
    background-color:currentColor;
    opacity:0;
    transition:opacity .25s ease;
    pointer-events:none;
  }
  body .main-header-menu > .menu-item > a:hover::after,
  body .main-header-menu > .menu-item.current-menu-item > a::after,
  body .main-header-menu > .menu-item.current_page_item > a::after{
    opacity:1;
  }
}

/* ── Last strays ────────────────────────────────────────────────────
   The footer menu and the popup plugin's close control were still
   carrying the theme face and a browser default serif. Archivo and
   Literata are the whole set (6). */

body footer a,
body footer li,
body footer .menu-link,
body .elementor-location-footer a,
body [data-elementor-type="footer"] a,
body .pum-container button,
body .pum-close,
body .popmake-close{
  font-family:"Literata",Georgia,serif !important;
}

/* ── Touch targets ──────────────────────────────────────────────────
   Measured on phones: footer links stood 20-22px tall, the profile
   LinkedIn link 18px and the card category label 15px. Anything a
   thumb has to find wants around 40px of height, so the padding is
   added on small screens only and the desktop rhythm is untouched. */

@media (max-width:834px){
  body footer a,
  body [data-elementor-type="footer"] a,
  body .ml-linkedin .elementor-button,
  body .ml-go .elementor-button,
  body .ml-kicker a,
  body .ml-title .elementor-heading-title a{
    display:inline-block;
    padding-top:9px;
    padding-bottom:9px;
    min-height:40px;
  }

  body footer li{
    margin-bottom:2px;
  }
}

/* The LinkedIn link is styled as a text link with min-height:0, which
   outranked the touch-target rule. Restored on small screens, with the
   underline kept tight to the word by padding rather than height. */
@media (max-width:834px){
  body .ml-linkedin .elementor-button{
    min-height:40px !important;
    padding:11px 0 8px !important;
    display:inline-flex !important;
    align-items:center;
  }
}

/* The office panel's telephone, email and connect links are the most
   likely things a visitor taps on a phone, and they measured 22-28px
   tall. Given a proper target without changing how they read. */
@media (max-width:834px){
  body #contact-enquiry a[href^="tel"],
  body #contact-enquiry a[href^="mailto"],
  body #contact-office a,
  body #contact-enquiry-b a{
    display:inline-flex !important;
    align-items:center;
    min-height:44px !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
  }
}

/* ── Eyebrow to title, one interval everywhere ──────────────────────
   Measured across the site before this rule: the Leadership approach
   section, the one that reads correctly, sits at 26px between the
   eyebrow and the title. Elsewhere it ranged from 34px in the heroes
   down to 0px on the moments and media heads and -20px on the latest
   head, where the title had climbed into the eyebrow's space. The
   eyebrow is a label announcing the title, so the interval is set once
   and the titles no longer carry their own top margins. */

body .ml-eyebrow{
  margin-bottom:26px !important;
}

body .ml-eyebrow + .ml-section-title,
body .ml-eyebrow + .ml-statement,
body .ml-eyebrow + .ml-page-title,
body .ml-section-title,
body .ml-statement{
  margin-top:0 !important;
}

body #s-hero .ml-page-title,
body [id$="-hero-copy"] .ml-page-title{
  margin-top:0 !important;
}

/* The title then holds clear air before the copy beneath it, matching
   the same reference section. */
body .ml-section-title + .ml-body,
body .ml-statement + .ml-body,
body .ml-section-title + .elementor-widget-text-editor,
body .ml-statement + .elementor-widget-text-editor{
  margin-top:28px !important;
}

/* The interval above was landing at 26px in some sections and 42-66px in
   others because the container's own row gap stacks on top of the
   margin. Any container holding an eyebrow gives up its row gap, so the
   margins alone set the rhythm and every section head reads the same. */
body .e-con:has(> .ml-eyebrow){
  row-gap:0 !important;
}

/* The remaining variation came from margins on the INNER heading
   element, set per section in the page stylesheets (and by one of my
   own earlier rules on the closing statements). The interval belongs to
   the eyebrow, so the heading itself carries no top margin anywhere. */
body .ml-section-title .elementor-heading-title,
body .ml-statement .elementor-heading-title,
body .ml-page-title .elementor-heading-title,
body .ml-subhead .elementor-heading-title,
body .ml-eyebrow .elementor-heading-title{
  margin-top:0 !important;
}

/* One section titles itself with .ml-subhead rather than the shared
   roles, so it is named here and takes the same interval. */
body .ml-subhead{margin-top:0 !important}
body .ml-eyebrow .elementor-heading-title{
  margin-bottom:0 !important;
}

/* ── Moment buttons ─────────────────────────────────────────────────
   The four per-moment buttons carry .ml-mom-go rather than one of the
   shared button roles, so no hover rule reached them and the theme's
   link blue showed through. They now alternate like every other button
   on the site: fill inverts to the opposite of the field it sits on,
   the border follows the fill, and no third colour appears. */

body .ml-mom-go .elementor-button{
  background-color:transparent;
  transition:background-color .35s ease,color .35s ease,border-color .35s ease;
}

/* On paper: outlined, then black fill with white text. */
body #mom-1 .ml-mom-go .elementor-button,
body #mom-3 .ml-mom-go .elementor-button{
  color:var(--ml-ink) !important;
  border-color:rgba(14,14,12,.32) !important;
}
body #mom-1 .ml-mom-go .elementor-button:hover,
body #mom-1 .ml-mom-go .elementor-button:focus,
body #mom-3 .ml-mom-go .elementor-button:hover,
body #mom-3 .ml-mom-go .elementor-button:focus{
  background-color:var(--ml-ink) !important;
  color:var(--ml-paper) !important;
  border-color:var(--ml-ink) !important;
}

/* On ink: outlined in light, then white fill with black text. */
body #mom-2 .ml-mom-go .elementor-button,
body #mom-4 .ml-mom-go .elementor-button{
  color:var(--ml-paper) !important;
  border-color:rgba(255,255,255,.48) !important;
}
body #mom-2 .ml-mom-go .elementor-button:hover,
body #mom-2 .ml-mom-go .elementor-button:focus,
body #mom-4 .ml-mom-go .elementor-button:hover,
body #mom-4 .ml-mom-go .elementor-button:focus{
  background-color:var(--ml-paper) !important;
  color:var(--ml-ink) !important;
  border-color:var(--ml-paper) !important;
}

/* No focus ring in the theme accent on these either. */
body .ml-mom-go .elementor-button:focus,
body .ml-mom-go .elementor-button:active{
  outline:none !important;
  box-shadow:none !important;
}
body .ml-mom-go .elementor-button:focus-visible{
  outline:2px solid currentColor !important;
  outline-offset:3px;
}

/* ── Deep links into a moment ───────────────────────────────────────
   Each homepage card now points at its own moment rather than the top
   of the page, so the anchor target has to clear the fixed header or
   the section lands underneath it. */
body #mom-1,
body #mom-2,
body #mom-3,
body #mom-4{
  scroll-margin-top:120px;
}

/* With the repeated label and button gone, the perspective block leans
   on the rule beside it and the space around it to mark the shift from
   describing the moment to stating our view of it. */
body [id^="mom-persp-"]{
  margin-top:34px;
}