/* ══════════════════════════════════════════════════════════════════
   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:var(--ml-ink);
  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{
  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:28px;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);
  /* Balance the rag. Measured, this statement broke over four lines with the
     last one carrying 15% of the widest - a single word, "time.", stranded
     under a full measure. `balance` evens the lines instead of filling each
     one to the max-width, which is what stops a display line ending on an
     orphan. It applies to short blocks only, so it cannot disturb body copy,
     and a browser that does not support it simply keeps today's wrap. */
  text-wrap:balance;
}

#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:.02em;
  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;
}

/* The reference figure is the DESKTOP one: 15.12px at 1440, which 1.05vw yields
   exactly and which this rule leaves untouched. The floor was 14px, a number the
   clamp fell back to below about 1440 rather than a value anyone measured, so the
   lead was rendering smaller on a phone than on a desktop. The floor now holds the
   reference size all the way down, making the lead read identically from 320px to
   1440px (14). Above 1440 the ceiling still caps it at 15.5px, unchanged. */
.ml-lead,
.ml-lead p{
  font-size:clamp(15.12px,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{
  /* bound to Site Settings, with today's values as the fallback - see the note
     on the palette in ml-elementor.css */
  --ml-field:var(--e-global-color-ml_field,#0a0a0a);
  --ml-card:var(--e-global-color-ml_card,#121210);
}

body #s-hero.e-con,
/* #s-media is deliberately ABSENT from the ink groups below. It is the Media
   preview on the homepage and it renders on PAPER, so that the page alternates
   ink / paper instead of ending on three dark bands. Its colours live in
   ml-page-home-extra.css. Adding it back here will repaint it and hide its
   headings, because the heading rule in this file carries !important. */
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,
/* #persp-hero is deliberately absent: it is a paper hero, as Contact and
   Leadership are. PAGES.docx Perspectives HERO: "Plain white background.
   No photograph." Listing it here would repaint it as an ink section. */
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,
/* The News feed was the one section this consolidation missed: it still drew
   --ml-charcoal (#0e0e0c), four points off the field. Invisible alone, but it
   is the whole reason the rule exists, and News sits one click from pages that
   use the field. */
body #ml-news.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:.82rem !important;
  line-height:1 !important;
  letter-spacing:.04em !important;
  text-transform:none !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-latest .ml-btn-primary .elementor-button,
body #s-media .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-latest .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. */
/* Hover CHANGES TONE, it does not swap the two buttons' identities.

   What was wrong: primary hovered to transparent and secondary hovered to a
   solid ink fill, so each button adopted the OTHER's resting appearance. Hover
   either one and the pair became identical - measured, 3 of the 4 hover cases
   on a pair produced the same fill AND the same text colour. A hairline ::after
   ring was added to tell them apart, which is why the hovered button read as
   having a double border. That was treating the symptom.

   Primary stays filled and secondary stays outlined at every state. Only the
   value moves, so hierarchy survives the interaction and no third colour enters
   (guide 13: fade only, never movement). */
body .ml-btn-primary .elementor-button:hover,
body .ml-btn-primary .elementor-button:focus{
  background-color:var(--ml-paper);
  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-latest .ml-btn-primary .elementor-button:hover,
body #s-media .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:var(--ml-ink) !important;
  color:var(--ml-paper) !important;
  border-color:var(--ml-paper) !important;
}
body #s-hero .ml-btn-secondary .elementor-button:hover,
body #s-latest .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);
}

/* Buttons invert on hover - fill and border together, never a third colour.
   They had drifted to washes: #333330 on primary, 6% ink on secondary-over-paper
   (which reads as a cream glow, not an inversion) and 10% white on
   secondary-over-ink. The lock in AGENTS.md is inversion; restored 2026-08-12. */

/* 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 #s-media-head.e-con,
body #media-selected-head.e-con,
body #media-av-head.e-con,
body #media-speaking-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 #media-av-head .ml-section-title .elementor-heading-title,
body #media-speaking-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 #media-av-head .ml-body,
body #media-speaking-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. */

/* CORRECTED 2026-08-17: .ml-go only had outline suppressed on :hover, and
   .ml-mom-related-link wasn't in this rule at all, so a click (native
   :focus, not just :focus-visible) showed the browser's own default blue
   ring on both - found on the Moments "Ownership" button, on hover, but
   the same gap exists on every .ml-go "Read More" style link too. Both
   classes already carry their own :focus-visible ring in the correct ink
   or paper colour elsewhere, so suppressing the plain browser default here
   loses no accessibility affordance, it just stops the wrong colour from
   ever being the one shown. */
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,
body .ml-go .elementor-button:hover,
body .ml-go .elementor-button:focus,
body .ml-go .elementor-button:active,
body .ml-mom-related-link .elementor-button,
body .ml-mom-related-link .elementor-button:hover,
body .ml-mom-related-link .elementor-button:focus,
body .ml-mom-related-link .elementor-button:active{
  outline:none !important;
  box-shadow:none !important;
}

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

/* .ml-go had no :focus-visible rule at all until now - suppressing its
   default browser outline above without adding this back would have left
   keyboard users with no focus indicator whatsoever on every "Read More" /
   "Watch" / "Listen" link site-wide. currentColor follows whichever ink or
   paper colour that section already set, same as the button's own border. */
body .ml-go .elementor-button:focus-visible{
  outline:2px solid currentColor !important;
  outline-offset:3px;
}

/* #s-latest joined the ink lists above. It is an ink section (rgb(10,10,10))
   that was never listed, so its secondary button fell through to the paper
   default and rendered ink text on an ink field: measured black rgb(0,0,0) on
   rgb(10,10,10), 10 levels apart, which is invisible. "View All Articles" sat
   like that on the homepage.

   Worth knowing how it hid: an isolated element screenshot of a TRANSPARENT
   button renders on transparency and displays as white, so the button looked
   perfectly legible when captured on its own. It only shows up when the crop
   includes the field behind it. Capture the parent, never the button alone.

   #media-invite is deliberately NOT here despite sitting in the primary ink
   list further up: it renders on the stone band rgb(241,241,243), which is
   paper, and ml-page-media.css already gives it the paper treatment. The stale
   ink-list entry is harmless only because that page rule wins. */

/* Hover changes TONE and preserves the hierarchy. It does not invert.

   The rule here used to read "every button inverts on hover, filled ones
   included". That is coherent for a lone button and wrong for a pair: if the
   filled primary empties and the outlined secondary fills, hovering either one
   makes the two identical. Measured before this change, 6 of 6 pairs on the
   site collided - same fill AND same text colour - and a hairline ::after ring
   had been added to tell them apart, which is why a hovered button read as
   having a double border.

   Now primary stays filled and secondary stays outlined in every state; only
   the value moves. Still fade-only, still no third colour, no movement. */
body .ml-btn-primary .elementor-button:hover,
body .ml-btn-primary .elementor-button:focus{
  background-color:var(--ml-paper) !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-latest .ml-btn-primary .elementor-button:hover,
body #s-media .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:var(--ml-ink);
  color:var(--ml-paper);
  border-color:var(--ml-paper);
}
body #s-hero .ml-btn-secondary .elementor-button:hover,
body #s-latest .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(.mlcs-stuck) .nav a,
body.page-id-1993 header:not(.mlcs-stuck) .nav a,
body.page-id-1957 header:not(.mlcs-stuck) .elementor-nav-menu a,
body.page-id-1993 header:not(.mlcs-stuck) .elementor-nav-menu a,
body.page-id-1957 header:not(.mlcs-stuck) .menu-link,
body.page-id-1993 header:not(.mlcs-stuck) .menu-link{
  color:var(--ml-ink) !important;
  text-shadow:none !important;
}
body.page-id-1957 header:not(.mlcs-stuck) .mlcs-home-link img,
body.page-id-1993 header:not(.mlcs-stuck) .mlcs-home-link img{
  filter:invert(1);
}

/* The LinkedIn link is a real button, carrying ml-btn ml-btn-secondary like
   every other button on the site. It previously stripped the button back to an
   underlined text link, which read as a stray hyperlink beside the biographies.
   The widget keeps .ml-linkedin only for its own spacing, set in
   ml-page-leadership.css; the button system governs everything else. */

/* ── 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-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-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:var(--ml-paper) !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 #s-media .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 #s-media .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:var(--ml-ink);
  color:var(--ml-paper);
  border-color:var(--ml-paper);
}
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 paper
   ones, and light again once the scrolled bar goes dark.

   CORRECTED 2026-08-17: this comment said "the two paper ones" and the
   list below only ever carried Leadership (1957) and Contact (1993).
   #news-hero (Articles, page 1919) is paper too - `background-color:
   var(--ml-paper)`, same as the other two - and was simply never added,
   same shape of miss as the hero-mark breakpoint fixed earlier today.
   Checked with a grep across every *-hero.e-con rule rather than trust
   this comment a third time: those three are the whole paper set. */
@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,
  body.page-id-1919 .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 six of the nine heroes are photographic.
   CORRECTED 2026-08-17: was "seven ... two paper", missing Articles -
   see the correction note on the desktop nav-colour rule above for why. */
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 three 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,
body.page-id-1919 .site-header:not(.mlcs-stuck) .menu-toggle,
body.page-id-1919 .site-header:not(.mlcs-stuck) .menu-toggle .ast-mobile-svg{
  color:var(--ml-ink) !important;
  fill:var(--ml-ink) !important;
}

/* The theme's own mobile-drawer hover/press state is accent blue
   (rgb(240,245,250)), off the locked ink/paper/grey palette. Matched to
   the felt-grey already used for the drawer's row dividers just below,
   at half that opacity so it reads as a wash, not a fill.

   CORRECTED 2026-08-17: the first pass only covered :hover and :focus,
   verified with a mouse. A real phone has no persistent pointer - a tap
   goes straight to :active, sometimes without ever matching :hover at
   all, and the fix never touched that state, so the blue survived on
   the one device that actually matters. hPanel's cache was flushed
   first on the assumption this was staleness; it was not - the rule
   genuinely never covered the state a touch triggers. :active is added
   below, and -webkit-tap-highlight-color set explicitly rather than
   left to whatever the browser defaults to, since that is a second,
   separate tap-feedback layer outside the :hover/:focus/:active cascade
   entirely and worth pinning down rather than trusting by omission. */
@media (max-width:921px){
  body .main-header-menu a:hover,
  body .main-header-menu a:focus,
  body .main-header-menu a:active,
  body .ast-mobile-header-content .menu-link:hover,
  body .ast-mobile-header-content .menu-link:focus,
  body .ast-mobile-header-content .menu-link:active{
    background-color:rgba(14,14,12,.05) !important;
    -webkit-tap-highlight-color:rgba(14,14,12,.05) !important;
  }

  /* A second, unrelated source of the same blue: Astra's own "current page"
     indicator paints .current-menu-item's link with this colour PERMANENTLY,
     at rest, no interaction needed - found live 2026-08-17 as a second band
     sitting next to whichever row was actually touched. Desktop already
     marks the current page with an underline, not a fill, so dropping this
     to plain white keeps the drawer consistent with that rather than
     inventing a second, never-tested "current page" treatment. */
  body .main-header-menu .current-menu-item > a,
  body .main-header-menu .current_page_item > a{
    background-color:transparent !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:var(--ml-paper) !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;
}

/* ── Woven paper stock ──────────────────────────────────────────────
   Light sections use one compact SVG surface: irregular navy warp and
   weft threads plus high-frequency fibre noise. The displaced,
   asymmetric weave avoids a digital grid while remaining visible on
   large white fields. It supplies material depth without competing
   with typography or introducing a decorative illustration. */

body #s-begin.e-con,
body #s-persp.e-con,
body #about-why.e-con,
body #about-how.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 #media-follow.e-con,
body #contact-hero.e-con,
body #contact-enquiry.e-con,
body #contact-map.e-con,
body #legal-body.e-con{
  /* Paper tooth, the house recipe: ONE fractalNoise layer, baseFrequency 1.6,
     1 octave, desaturated, opacity 0.17, on a 420px tile.

     What this replaced and why: a ruled weave — a 7 x 5.5px lattice of
     horizontal and vertical strokes in #172234, multiplied over the section.
     Three things made it read cheap. It was PERIODIC, so the eye locked onto a
     lattice that repeated roughly seven times across a 1440px section, and
     paper has no periodicity. Its ink was BLUE-BLACK, so it tinted the paper toward
     cool grey and the white sections stopped being white. And its 5.5-7px
     period sat right on the stem width and x-height of the body text, so the
     screen interfered with the type instead of sitting beneath it.

     Fibre is stochastic, neutral in hue, and finer than any letterform stroke;
     that is what reads as stock. Fineness is the whole trick — coarse grain
     reads as JPEG artefact. Safe ceiling is 0.20-0.22; above that the paper
     greys and the text stops floating on it. */
  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 !important;
  background-size:420px 420px !important;
  background-blend-mode:normal !important;
}

/* ── 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.

   WIDTH ALONE WAS THE WRONG TRIGGER. Gated at max-width:834px, this
   rule reached phones and narrow tablets and missed every touch device
   WIDER than that - iPad in landscape (1024 and 1366), Nintendo Switch
   and Steam Deck (1280), PS Vita (960) - where the footer links were
   still 26px and the legal row 22-26px. A finger is a finger at any
   viewport width, so the trigger is now the input device as well:
   pointer:coarse matches any device whose PRIMARY input is touch, which
   leaves mouse-driven desktops untouched exactly as before. */

@media (max-width:834px), (pointer:coarse){
  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 touch-target override is gone with the text-link styling: the
   button system already sets min-height:54px, comfortably past the 40px floor. */

/* The office panel's telephone, email and connect links are the most
   likely things a visitor taps, and they measured 22-28px tall. Given a
   proper target without changing how they read. Same trigger as above. */
@media (max-width:834px), (pointer:coarse){
  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;
}

/* Moments decision posters
   Each card is a complete decision surface: architecture establishes
   institutional context, the illustration names the tension, and the
   copy carries only the decision the visitor needs to recognise. */

body #s-moments.e-con{
  padding-top:clamp(112px,10vw,164px);
  padding-bottom:clamp(112px,10vw,164px);
}

body #s-moments-head.e-con{
  max-width:1050px;
  margin-bottom:clamp(52px,5vw,76px);
}

body #s-moments-head .ml-section-title .elementor-heading-title{
  max-width:24ch;
}

body #s-moments-head .ml-body,
body #s-moments-head .ml-body p{
  max-width:58ch;
}

body #s-moments-grid.e-con{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,2.4vw,40px);
}

body #s-moment-1.e-con,
body #s-moment-2.e-con,
body #s-moment-3.e-con,
body #s-moment-4.e-con{
  position:relative;
  isolation:isolate;
  min-height:clamp(500px,36vw,590px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background-repeat:no-repeat;
  cursor:pointer;
  transition:border-color .35s ease;
}

body #s-moment-1.e-con,
body #s-moment-4.e-con{
  background-color:#f3f1eb !important;
  background-position:center bottom !important;
  background-size:100% 54% !important;
  border-color:rgba(14,14,12,.12);
}

body #s-moment-2.e-con,
body #s-moment-3.e-con{
  background-color:var(--ml-card) !important;
  background-position:center center !important;
  background-size:cover !important;
}

body #s-moment-1::before,
body #s-moment-2::before,
body #s-moment-3::before,
body #s-moment-4::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  transition:opacity .35s ease;
}

body #s-moment-1::before,
body #s-moment-4::before{
  background:
    linear-gradient(
      180deg,
      rgba(243,241,235,1) 0%,
      rgba(243,241,235,.98) 47%,
      rgba(243,241,235,.88) 70%,
      rgba(243,241,235,.64) 100%
    );
}

body #s-moment-2::before,
body #s-moment-3::before{
  background:
    linear-gradient(
      180deg,
      rgba(10,10,10,.44) 0%,
      rgba(10,10,10,.50) 42%,
      rgba(10,10,10,.91) 100%
    );
}

body #s-moment-1:hover,
body #s-moment-4:hover{
  border-color:rgba(14,14,12,.28);
}

body #s-moment-2:hover,
body #s-moment-3:hover{
  border-color:rgba(255,255,255,.34);
}

body #s-moment-1:hover::before,
body #s-moment-4:hover::before{
  opacity:.94;
}

body #s-moment-2:hover::before,
body #s-moment-3:hover::before{
  opacity:.86;
}

body #s-moment-art-1.e-con,
body #s-moment-art-2.e-con,
body #s-moment-art-3.e-con,
body #s-moment-art-4.e-con,
body #s-moments-grid .ml-moment-art,
body #s-moments-grid .ml-moment-art .elementor-widget-container{
  display:contents !important;
}

body #s-moments-grid .ml-moment-art a{
  position:absolute;
  inset:0;
  z-index:4;
  display:block;
  border-radius:inherit;
  color:var(--ml-paper);
}

body #s-moment-1 .ml-moment-art a,
body #s-moment-4 .ml-moment-art a{
  color:var(--ml-ink);
}

body #s-moments-grid .ml-moment-art a::before{
  content:"";
  position:absolute;
  top:42px;
  right:42px;
  width:146px;
  height:146px;
  border:1px solid currentColor;
  border-radius:50%;
  opacity:.20;
  box-shadow:0 0 0 14px color-mix(in srgb,currentColor 6%,transparent);
  transition:opacity .35s ease;
}

body #s-moments-grid .ml-moment-art img{
  position:absolute;
  top:50px;
  right:50px;
  width:130px;
  height:130px;
  aspect-ratio:1;
  object-fit:cover;
  border-radius:50%;
  opacity:.34;
  pointer-events:none;
  transition:opacity .35s ease;
}

body #s-moment-1 .ml-moment-art img,
body #s-moment-4 .ml-moment-art img{
  filter:invert(1) grayscale(1);
  mix-blend-mode:multiply;
  opacity:.18;
}

body #s-moment-2 .ml-moment-art img,
body #s-moment-3 .ml-moment-art img{
  filter:grayscale(1);
  mix-blend-mode:screen;
}

body #s-moments-grid [id^="s-moment-"]:hover .ml-moment-art a::before,
body #s-moments-grid [id^="s-moment-"]:hover .ml-moment-art img{
  opacity:.48;
}

body #s-moments-grid .ml-moment-art a:focus-visible{
  outline:2px solid currentColor;
  outline-offset:-6px;
}

body #s-moment-copy-1.e-con,
body #s-moment-copy-2.e-con,
body #s-moment-copy-3.e-con,
body #s-moment-copy-4.e-con{
  position:relative;
  z-index:2;
  min-height:100%;
  justify-content:flex-end;
  padding:clamp(36px,3vw,52px) !important;
  pointer-events:none;
}

body #s-moments-grid .ml-moment-num{
  position:absolute;
  top:clamp(38px,3vw,50px);
  left:clamp(36px,3vw,52px);
}

body #s-moments-grid .ml-moment-num .elementor-heading-title{
  font-size:.6875rem !important;
  line-height:1 !important;
  letter-spacing:.02em !important;
}

body #s-moments-grid .ml-moment-title .elementor-heading-title{
  max-width:19ch;
  font-size:clamp(29px,2.35vw,39px) !important;
  line-height:1.03 !important;
  letter-spacing:-.045em !important;
  text-wrap:balance;
}

body #s-moments-grid .ml-moment-title + .ml-body{
  margin-top:22px !important;
}

body #s-moments-grid .ml-body,
body #s-moments-grid .ml-body p{
  max-width:41ch;
  margin-top:0;
  font-size:1rem !important;
  line-height:1.56 !important;
}

body #s-moment-1 .elementor-heading-title,
body #s-moment-4 .elementor-heading-title{
  color:var(--ml-ink) !important;
}

body #s-moment-1 .ml-moment-num .elementor-heading-title,
body #s-moment-4 .ml-moment-num .elementor-heading-title{
  color:rgba(14,14,12,.54) !important;
}

body #s-moment-1 .ml-body,
body #s-moment-1 .ml-body p,
body #s-moment-4 .ml-body,
body #s-moment-4 .ml-body p{
  color:rgba(14,14,12,.78) !important;
}

body #s-moment-2 .elementor-heading-title,
body #s-moment-3 .elementor-heading-title{
  color:var(--ml-paper) !important;
}

body #s-moment-2 .ml-body,
body #s-moment-2 .ml-body p,
body #s-moment-3 .ml-body,
body #s-moment-3 .ml-body p{
  color:rgba(255,255,255,.78) !important;
}

@media (max-width:900px){
  body #s-moments-grid.e-con{
    grid-template-columns:minmax(0,1fr);
    max-width:760px;
  }

  body #s-moment-1.e-con,
  body #s-moment-2.e-con,
  body #s-moment-3.e-con,
  body #s-moment-4.e-con{
    min-height:520px;
  }
}

@media (max-width:540px){
  body #s-moments.e-con{
    padding-left:24px;
    padding-right:24px;
  }

  body #s-moment-1.e-con,
  body #s-moment-2.e-con,
  body #s-moment-3.e-con,
  body #s-moment-4.e-con{
    min-height:500px;
    border-radius:16px;
  }

  body #s-moment-copy-1.e-con,
  body #s-moment-copy-2.e-con,
  body #s-moment-copy-3.e-con,
  body #s-moment-copy-4.e-con{
    padding:30px 28px 34px !important;
  }

  body #s-moments-grid .ml-moment-num{
    top:30px;
    left:28px;
  }

  body #s-moments-grid .ml-moment-art a::before{
    top:30px;
    right:28px;
    width:112px;
    height:112px;
    box-shadow:0 0 0 10px color-mix(in srgb,currentColor 6%,transparent);
  }

  body #s-moments-grid .ml-moment-art img{
    top:37px;
    right:35px;
    width:98px;
    height:98px;
  }

  body #s-moments-grid .ml-moment-title .elementor-heading-title{
    font-size:clamp(28px,9vw,36px) !important;
  }
}

@media (prefers-reduced-motion:reduce){
  body #s-moment-1.e-con,
  body #s-moment-2.e-con,
  body #s-moment-3.e-con,
  body #s-moment-4.e-con,
  body #s-moment-1::before,
  body #s-moment-2::before,
  body #s-moment-3::before,
  body #s-moment-4::before,
  body #s-moments-grid .ml-moment-art a::before,
  body #s-moments-grid .ml-moment-art img{
    transition:none;
  }
}

/* ── Scroll to top ────────────────────────────────────────────────
   Astra draws this control in the theme accent blue, which is the
   only colour on the site outside black, white and soft grey
   (clause 7). Same grammar as the buttons: hover inverts fill and
   border together, never a third colour, never movement (13). */

body .ast-scroll-top-icon,
body #ast-scroll-top{
  background-color:var(--ml-ink) !important;
  color:var(--ml-paper) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  border-radius:var(--ml-button-radius);
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
  /* Astra sizes this at 31.5px, below the 44px minimum touch target the
     standing sweep enforces. Sized to the same 46px the header controls
     use, with the glyph centred rather than sitting on the text baseline. */
  width:46px !important;
  height:46px !important;
  min-width:46px;
  min-height:46px;
  padding:0 !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  line-height:1 !important;
}

body .ast-scroll-top-icon svg,
body #ast-scroll-top svg,
body #ast-scroll-top .ast-icon svg{
  fill:currentColor !important;
  color:inherit !important;
  width:15px;
  height:15px;
  display:block;
}

body .ast-scroll-top-icon:hover,
body #ast-scroll-top:hover,
body #ast-scroll-top:focus-visible{
  background-color:var(--ml-paper) !important;
  color:var(--ml-ink) !important;
  border-color:var(--ml-paper) !important;
}

/* THE TWO FLOATING CONTROLS COLLIDE ON A PHONE. This button sits at right 30 /
   bottom 30, and TranslatePress puts its floating language switcher at bottom 0
   with a right offset that shrinks with the viewport: measured, 144px at 1440
   and 83px at 834 - clear both times - but 39px at 390, where the two overlap by
   37 x 25px and land together on top of the body copy. It reads as one broken
   control rather than two.

   Lift the button clear of the switcher on phones only: the switcher is 55px
   tall from the bottom edge, so 70px leaves a 15px gap and keeps both at their
   full 46px touch target. Nothing changes above 430px, where there was never a
   collision to fix. */
@media (max-width:430px){
  body .ast-scroll-top-icon,
  body #ast-scroll-top{bottom:70px !important}
}

/* ── Plugin controls join the type system ─────────────────────────
   Poppins came with the previous build. Its webfont is no longer
   loaded, but a few plugin-rendered controls still declare it and so
   fall back to a generic sans rather than the house set. Named here
   so the whole surface reads Archivo and Literata (guide 6): the
   phone country selector and its list, SureForms field labels, and
   the Spectra headings used in the maintenance-era blocks. */

body .iti__selected-country,
body .iti__selected-country *,
body .iti__selected-dial-code,
body .iti__country,
body .iti__country-name,
body .iti__dial-code,
body .srfm-block-label,
body .uagb-heading-text,
body .trp-language-item-name,
body .trp-language-switcher,
body .trp-language-switcher *{
  /* intl-tel-input and TranslatePress ship their own font declarations and load
     after the child theme, so these need the weight to win. */
  font-family:"Archivo",Helvetica,Arial,sans-serif !important;
}

/* ── Base family ──────────────────────────────────────────────────
   Astra declares Poppins on body, which every text role then
   overrides. Harmless while the Poppins webfont loaded; now that it
   is gone, anything without an explicit family falls back to a
   system sans instead of the house set. Named here so inheritance
   lands on Archivo rather than on whatever the browser picks. */

html body,
html body.elementor-kit-968,
html body[class*="elementor-kit"],
html body .hfeed,
html body .site,
html body .ast-container{
  /* Astra prints its own body rule inline, after this stylesheet, so an equal
     specificity loses on source order. html body takes it.

     The stubborn one is Elementor: the ACTIVE kit is .elementor-kit-968, which is
     the previous build's "Painting Company" kit, and it declares Poppins as the
     global body family. A class beats two elements, so it was winning. Matched
     here by class as well. The real fix is to make kit 86 active or to correct the
     active kit in Site Settings; this holds the line until that decision is made. */
  font-family:"Archivo",Helvetica,Arial,sans-serif;
}

/* ── The mark returns on scroll ───────────────────────────────────
   Astra nests `ast-main-header-wrap`, which holds the site identity,
   INSIDE `ast-mobile-header-wrap`, which is display:none on desktop.
   So the logo was in the markup and unreachable: revealing it by CSS
   would reveal the mobile header with it. A dedicated mark is printed
   into the visible above-header row instead (see functions.php).

   It is hidden while the header is transparent over the hero, which
   carries its own mark, and fades in with the dark bar past 40px of
   scroll. Fade only, no movement (guide 13). */

.mlcs-header-mark{
  position:absolute;
  left:var(--ml-gut,40px);
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  display:flex;
  align-items:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  line-height:0;
}

.site-header.mlcs-stuck .mlcs-header-mark{
  opacity:1;
  pointer-events:auto;
}

.mlcs-header-mark img{
  width:64px;
  height:auto;
  display:block;
}

@media (max-width:921px){
  .mlcs-header-mark{display:none}
}

/* ── Footer mark sits on the column line ──────────────────────────
   The site-logo widget wraps its image in an inline-block anchor
   that inherits a 117px line-height, and the image is vertical-align
   middle inside it, so leading pushed the mark 20px below the tops
   of "Quick Links" and "Contact". Collapsing the line box puts the
   mark's top edge on the same horizontal line as the two headings. */

body [data-elementor-type="footer"] .elementor-widget-theme-site-logo .elementor-widget-container,
body [data-elementor-type="footer"] .elementor-widget-theme-site-logo a{
  line-height:0;
}

body [data-elementor-type="footer"] .elementor-widget-theme-site-logo img{
  display:block;
  vertical-align:top;
}

/* Once the footer's own mark is on screen, the one in the bar steps back, so a
   single crest is ever in view. Declared after the stuck rule so it wins on
   source order at equal specificity. Fade only (guide 13). */
.site-header.mlcs-footer-in-view .mlcs-header-mark{
  opacity:0;
  pointer-events:none;
}

/* The same handover at the top of the page. The bar goes dark at 40px while the
   hero crest is still standing over the page title, so both marks were on screen
   together for the first ~250px of every page - read as a duplicated logo. The
   bar's mark now waits until the hero crest has gone behind it. */
.site-header.mlcs-hero-in-view .mlcs-header-mark{
  opacity:0;
  pointer-events:none;
}

/* ── Legal document system ────────────────────────────────────────────
   Privacy, Terms, Cookie and Disclaimer are utility pages, but they still
   carry the firm's standard of discretion. The compact ink header identifies
   the document; the paper field below uses a numbered editorial grid so long
   clauses remain calm, scannable and credible. All copy remains in Elementor. */

/* Astra's default content container is boxed on these utility pages. The
   document sections are full bleed, while their own .e-con-inner retains the
   controlled reading measure. */
body.page-id-3 #content > .ast-container,
body.page-id-2063 #content > .ast-container,
body.page-id-2064 #content > .ast-container,
body.page-id-2065 #content > .ast-container{
  display:block;
  width:100%;
  max-width:none;
  padding:0;
}

body.page-id-3 #primary,
body.page-id-2063 #primary,
body.page-id-2064 #primary,
body.page-id-2065 #primary,
body.page-id-3 .site-main,
body.page-id-2063 .site-main,
body.page-id-2064 .site-main,
body.page-id-2065 .site-main,
body.page-id-3 .entry-content,
body.page-id-2063 .entry-content,
body.page-id-2064 .entry-content,
body.page-id-2065 .entry-content{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}

body #legal-hero.e-con,
body #legal-body.e-con{
  --width:100%;
  width:100%;
  max-width:none;
  margin-inline:0;
}

/* Hero height is set HERE for all four legal pages, and nowhere else. Terms and
   Cookie used to stand 507px against 418px on Privacy and Disclaimer, because
   their page JSON carried padding on the hero container that stacked on top of
   this rule; the other two lost it in the 3 August rebuild. That stray padding is
   gone from the templates, and the taller proportion, which is the one we kept,
   now comes from this min-height. Content is bottom-aligned (justify-content on
   this container, align-content on the grid inside), so the added height reads as
   space above the eyebrow. Change this value, not a page. */
body #legal-hero.e-con{
  position:relative;
  min-height:clamp(440px,53svh,620px);
  padding:clamp(132px,14vh,168px) var(--ml-gut) clamp(64px,7vh,88px) !important;
  overflow:hidden;
  justify-content:flex-end;
  background-color:#0a0a0a !important;
  color:var(--ml-paper);
}

body #legal-hero.e-con::after{
  content:"";
  position:absolute;
  right:var(--ml-gut);
  bottom:0;
  left:var(--ml-gut);
  height:1px;
  background:rgba(255,255,255,.16);
  pointer-events:none;
}

/* The right column holds the effective date. At 280px it wrapped to two lines,
   which orphaned the day ("EFFECTIVE DATE: 9" / "AUGUST 2026.") and, because the
   grid is `align-items:end`, made the two-line date the tallest thing in row 2.
   The leftover height became slack ABOVE the page title, so the eyebrow-to-title
   gap was set by the date rather than by the type: 97px on Disclaimer and Privacy,
   48px on Terms and Cookie. Widened so the date sets on one line; row 2 is then
   sized by the title and the gap collapses to the eyebrow's own 26px margin, which
   is the site standard, identical on all four pages. */
body #legal-hero > .e-con-inner{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(180px,380px);
  column-gap:clamp(40px,6vw,104px);
  row-gap:0;
  align-items:end;
  /* Without this the auto rows STRETCH to fill the hero's min-height, and the
     slack lands above the page title: the eyebrow-to-title gap was 87px on
     Disclaimer and Privacy against 26px on Terms and Cookie, purely because the
     latter two carry container padding in their page JSON that absorbs the space.
     `end` keeps the rows content-sized and parks the block at the bottom of the
     hero, which is what `align-items:end` already intends for the items. */
  align-content:end;
  width:100%;
  max-width:1240px;
  margin-inline:auto;
}

/* The hero carries its own mark, as every other hero on the site does. The
   header's `.mlcs-header-mark` is deliberately opacity:0 while the bar is
   transparent and fades in past 40px of scroll, and its rule already assumes the
   hero below it shows a mark. The four legal heroes were the only ones with no
   mark, so at rest they showed no logo at all.

   112px and centred on the page axis, identical to the nine main heroes. It was
   briefly 72px and left-aligned, reasoning that this hero is a left-aligned
   two-column composition; that was overruled, and rightly. The mark is fixed brand
   furniture and should not change size or position depending on which page a
   visitor happens to land on. `margin-inline:auto` does the centring, because the
   image is display:block and the widget's own text-align would not move it. */
body #legal-hero .ml-hero-mark{
  grid-column:1 / -1;
  margin:0 0 clamp(18px,2.8vh,28px);
}

body #legal-hero .ml-hero-mark img{
  display:block;
  height:auto;
  margin-inline:auto;
  opacity:.96;
}

body #legal-hero .ml-eyebrow{
  grid-column:1 / -1;
  margin:0 0 28px;
}

body #legal-hero .ml-eyebrow .elementor-heading-title{
  color:rgba(255,255,255,.62) !important;
}

body #legal-hero .ml-page-title{
  grid-column:1;
  margin:0;
}

body #legal-hero .ml-page-title .elementor-heading-title{
  max-width:12ch;
  color:var(--ml-paper) !important;
  font-size:clamp(48px,5.15vw,74px);
  line-height:.96;
  letter-spacing:-.052em;
}

body #legal-hero .ml-legal-updated{
  grid-column:2;
  align-self:end;
  margin:0 0 5px;
  text-align:right;
}

body #legal-hero .ml-legal-updated,
body #legal-hero .ml-legal-updated p{
  color:rgba(255,255,255,.66) !important;
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:.75rem;
  font-weight:520;
  line-height:1.55;
  letter-spacing:.16em;
  text-transform:uppercase;
}

body #legal-body.e-con{
  position:relative;
  padding:clamp(78px,9vw,132px) var(--ml-gut) clamp(72px,7vw,104px) !important;
  background-color:var(--ml-paper) !important;
  color:#242424;
  counter-reset:ml-legal-section;
}

body #legal-body > .e-con-inner{
  display:grid !important;
  grid-template-columns:minmax(180px,.36fr) minmax(0,.78fr);
  grid-auto-flow:row;
  column-gap:clamp(56px,7vw,112px);
  row-gap:0;
  align-items:start;
  width:100%;
  max-width:1240px;
  margin-inline:auto;
}

body #legal-body > .e-con-inner > .elementor-widget{
  min-width:0;
  width:100%;
}

body #legal-body .ml-legal-notice,
body #legal-body .ml-legal-intro{
  grid-column:1 / -1;
}

/* Set apart by its own field and its own space. It was banded top and bottom
   by rules as well, which is belt and braces and reads as a callout box. */
body #legal-body .ml-legal-notice{
  max-width:920px;
  margin:0 0 clamp(58px,7vw,92px);
  padding:30px clamp(24px,3vw,36px);
  background:rgba(255,255,255,.46);
}

body #legal-body .ml-legal-notice,
body #legal-body .ml-legal-notice p{
  color:#494949;
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:.875rem;
  font-weight:450;
  line-height:1.65;
  letter-spacing:.005em;
}

body #legal-body .ml-legal-notice em{font-style:normal}

/* The intro runs the full content measure. It previously sat in a 49ch column,
   which left the right half of the first screen empty on every legal page.
   Its bottom margin was 108px against 48px of padding on the section head
   below, so the lead-in was separated by 156px while consecutive sections are
   114px apart: the widest gap on the page fell in the one place that should
   read as continuous. Now 48px, giving 96px. */
body #legal-body .ml-legal-intro{
  margin:0 0 clamp(32px,4vw,48px);
}

body #legal-body .ml-legal-intro,
body #legal-body .ml-legal-intro p{
  color:#161616;
  font-size:clamp(20px,1.7vw,25px);
  line-height:1.52;
}

/* No rule above the section head. The numeral and the heading are enough of a
   boundary, and the hairlines read as clutter across four pages of plain text.
   The padding stays: it is now the whole of the section separation. */
body #legal-body .ml-section-title{
  grid-column:1;
  counter-increment:ml-legal-section;
  margin:0 !important;
  padding:clamp(34px,4vw,48px) 0 clamp(48px,5vw,66px);
}

body #legal-body .ml-section-title::before{
  content:counter(ml-legal-section,decimal-leading-zero);
  display:block;
  margin-bottom:20px;
  color:#6b6b6b;
  font-family:"Archivo",Helvetica,Arial,sans-serif;
  font-size:.6875rem;
  font-weight:620;
  line-height:1;
  letter-spacing:.24em;
}

/* Word gaps in these headings measure a uniform 0.156em, so nothing is actually
   inconsistent, but they read as cramped and some letter pairs ("About|This",
   t against T) look far tighter than others at the identical gap. The cause is the
   site-wide `letter-spacing:-0.045em !important` on .ml-section-title, which also
   tightens the space character and eats about 22% of it. word-spacing restores it
   without loosening the letterfit: 0.156 + 0.07 = 0.226em.

   NOTE: the font-size, letter-spacing and line-height below are DEAD. The rule
   `.ml-section-title .elementor-heading-title` in this file carries !important on
   font-size and letter-spacing, and !important beats specificity, so this legal
   type scale has never applied. Left in place rather than silently changing the
   heading size, which nobody asked for. To make it take effect, remove the
   !important upstream first. */
body #legal-body .ml-section-title .elementor-heading-title{
  word-spacing:.07em;
  max-width:14ch;
  color:#0a0a0a !important;
  font-size:clamp(24px,1.75vw,31px);
  font-weight:560;
  line-height:1.12;
  letter-spacing:-.032em;
  text-transform:none;
}

/* The numeral is rendered by ::before INSIDE the heading widget, so it pushes the
   heading's first line down while the copy starts at the top of its own box. The
   result was that the copy aligned to the NUMERAL, not to the title, leaving the
   heading sitting 27px low against its own paragraph.

   Measured constant at 27-28px from 1024 to 2560, because the numeral block
   (11px line + 20px margin) and the body copy are both fixed sizes while only the
   heading scales. So the copy is pushed down by that measured offset and the two
   first lines start together; the numeral then reads as a margin marker above.
   Below 900px the grid is a single column and the media query resets this.

   27px aligned the LINE BOXES, which still left the heading's ink 5.4px above the
   copy's: the heading is 44.64px on a 0.96 line-height (negative half-leading)
   while the copy is 16px on 24.96, so their glyphs sit at different depths inside
   their boxes. Measured with canvas font metrics, cap-top to cap-top. 21.6px
   aligns what the eye actually reads instead of what the box model reports. */
body #legal-body .ml-section-title + .ml-body{
  grid-column:2;
  margin:0 !important;
  padding:calc(clamp(35px,4vw,49px) + 21.6px) 0 clamp(48px,5vw,66px);
}

body #legal-body .ml-section-title + .ml-body,
body #legal-body .ml-section-title + .ml-body p,
body #legal-body .ml-section-title + .ml-body li{
  color:#303030;
  font-size:1.0625rem;
  line-height:1.72;
}

/* The final row carries no trailing padding. Every section pads its bottom to
   separate it from the section below; the last one has nothing below it, so that
   66px stacked on top of the container's own padding and left a conspicuous void
   above the footer. Two widgets, because the last row is heading plus copy. */
body #legal-body > .e-con-inner > .elementor-widget:nth-last-child(-n+2){
  padding-bottom:0;
}

body #legal-body .ml-body p + p{margin-top:18px}

body #legal-body .ml-body strong{
  color:#111;
  font-weight:650;
}

body #legal-body .ml-body a{
  color:inherit;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

@media (max-width:900px){
  body #legal-hero.e-con{
    min-height:340px;
    padding:clamp(112px,13vh,142px) 28px 58px !important;
  }

  body #legal-hero.e-con::after{right:28px;left:28px}

  body #legal-hero > .e-con-inner{
    grid-template-columns:1fr;
  }

  body #legal-hero .ml-page-title,
  body #legal-hero .ml-legal-updated{
    grid-column:1;
  }

  body #legal-hero .ml-legal-updated{
    margin:20px 0 0;
    text-align:left;
  }

  body #legal-body.e-con{
    padding:clamp(68px,9vw,92px) 28px clamp(88px,12vw,128px) !important;
  }

  body #legal-body > .e-con-inner{
    grid-template-columns:1fr;
  }

  body #legal-body .ml-legal-notice,
  body #legal-body .ml-legal-intro,
  body #legal-body .ml-section-title,
  body #legal-body .ml-section-title + .ml-body{
    grid-column:1;
  }

  body #legal-body .ml-section-title{
    padding:38px 0 18px;
  }

  body #legal-body .ml-section-title + .ml-body{
    padding:0 0 50px;
    border-top:0;
  }
}

@media (max-width:480px){
  body #legal-hero.e-con{
    min-height:320px;
    padding:104px 22px 48px !important;
  }

  body #legal-hero.e-con::after{right:22px;left:22px}

  body #legal-hero .ml-eyebrow{margin-bottom:22px}

  body #legal-hero .ml-page-title .elementor-heading-title{
    font-size:clamp(40px,12vw,50px);
  }

  body #legal-body.e-con{
    padding:58px 22px 86px !important;
  }

  body #legal-body .ml-legal-notice{
    margin-bottom:54px;
    padding:20px;
  }

  body #legal-body .ml-legal-intro{
    margin-bottom:34px;
  }

  body #legal-body .ml-section-title .elementor-heading-title{
    font-size:25px;
  }

  body #legal-body .ml-section-title + .ml-body,
  body #legal-body .ml-section-title + .ml-body p,
  body #legal-body .ml-section-title + .ml-body li{
    font-size:1rem;
    line-height:1.7;
  }
}

/* ── Lazy-load placeholder ───────────────────────────────────────────
   Images are lazy-loaded with a 1x1 GIF whose single pixel is #C3C3C3,
   stretched to the width and height attributes. That is what shows as a
   grey box before the real file arrives, most visibly on the logo.
   Hide the placeholder state only: the swap replaces src with a real URL,
   at which point these rules stop matching and the image fades in. */
img[data-lazyloaded][src^="data:image/gif"]{
  opacity:0;
}

img[data-lazyloaded]{
  transition:opacity .25s ease-in;
}

/* ── Single article ─────────────────────────────────────────────────
   The post pages were still Astra's default: a blue-grey page (#f0f5fa)
   with the article floating on a white card, a "By admin" byline, and
   default blue links. Nothing about it belonged to this site, and it is
   where every Media and News card sends the visitor.

   Treated as paper, using the same tooth the other paper sections use
   so the article reads as part of the system rather than a stray. */

body.single-post,
body.single-post .site-content{
  background-color:#ffffff;
}

body.single-post .site-content{
  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");
  background-repeat:repeat;
  background-size:420px 420px;
}

/* the card is what made it look like a blog post rather than a document */
body.single-post .ast-article-single,
body.single-post article.post{
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  border:0 !important;
}

/* 760px was a reading measure applied to the WHOLE page, which left the
   article as a narrow strip in a 1440 viewport. The column is now the site's
   own 1240 content width; the BODY keeps a comfortable measure inside it,
   which is the usual editorial arrangement - wide headline, narrow text. */
body.single-post #primary{
  max-width:1240px;
  margin-inline:auto;
  padding:clamp(120px,14vh,168px) var(--ml-gut) clamp(48px,5vw,72px);
}

/* The header is transparent at rest, which put pale nav links on a light
   page. Single posts carry the bar from the top so the navigation is
   legible before any scrolling happens. */
body.single-post .site-header,
body.single-post .ast-main-header-wrap{
  background-color:#0a0a0a !important;
}

body.single-post .site-header a,
body.single-post .main-header-menu a{
  color:#ffffff !important;
}

/* CORRECTED 2026-08-17: the rule above was written for the desktop top bar,
   which is genuinely dark on single posts ("carry the bar from the top"
   above) and genuinely needs white nav text. But .main-header-menu is
   shared with the MOBILE POPUP DRAWER's own copy of the menu
   (#ast-hf-mobile-menu), which is always a white/paper surface regardless
   of page or post type - so on every single post, opening the mobile menu
   showed white text on its own white background: a real, invisible-menu
   defect, not a "some pages" one, because every post shares this one rule.
   Never caught earlier because every page-level check today used one of
   the 14 Elementor pages, never an individual post - the client found it
   first, on a real post detail page. #-selector wins on specificity over
   the class rule above even with both !important, so it does not matter
   which loads first. */
body.single-post #ast-hf-mobile-menu a{
  color:var(--ml-ink) !important;
}

/* 20ch stacked the longest headline into SEVEN lines. A headline wants to
   run wide and break three or four times at most; 34ch against the wider
   column does that without becoming a banner. */
body.single-post .entry-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif !important;
  font-weight:700;
  font-size:clamp(2.1rem,3.9vw,3.35rem);
  line-height:1.02;
  letter-spacing:-.026em;
  color:#0a0a0a;
  max-width:34ch;
  text-wrap:balance;
  margin:0 0 26px;
}

/* "By admin" is not a byline for a professional firm. The "By" and the
   separator are bare text nodes, so they cannot be selected - zeroing the
   container's font size removes them and the date is restored on its own
   span. Same 26px eyebrow-to-title relationship used site wide. */
body.single-post .entry-meta{
  font-size:0 !important;
  margin:0 0 44px;
}

body.single-post .entry-meta .posted-by{
  display:none !important;
}

body.single-post .entry-meta .posted-on,
body.single-post .entry-meta .posted-on *{
  font-family:"Archivo",Helvetica,Arial,sans-serif !important;
  font-size:.72rem !important;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#595959 !important;
}

body.single-post .entry-content{
  max-width:70ch;
}

body.single-post .entry-content p{
  font-family:"Literata",Georgia,serif;
  font-size:1rem;
  line-height:1.56;
  color:#242424;
  margin:0 0 22px;
}

/* Astra's blue is not in the palette. Links read as ink with a rule under
   them, the same treatment the rest of the site gives an inline link. */
body.single-post .entry-content a{
  color:#0a0a0a !important;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:rgba(10,10,10,.32);
}

body.single-post .entry-content a:hover{
  text-decoration-color:rgba(10,10,10,.9);
}

/* the article images arrived at assorted sizes with drop shadows */
body.single-post .entry-content img{
  width:100%;
  height:auto;
  display:block;
  box-shadow:none !important;
  border-radius:2px;
  margin:34px 0;
}

body.single-post .entry-content figure{margin:34px 0}

/* Previous / next carried arrow glyphs and Astra's blue. Reduced to two
   quiet Archivo labels, which is how every other secondary action on the
   site reads. */
body.single-post .post-navigation{
  max-width:760px;
  margin:0 auto;
  padding:64px 0 96px;
}

body.single-post .post-navigation a{
  font-family:"Archivo",Helvetica,Arial,sans-serif !important;
  font-size:.78rem !important;
  font-weight:600;
  letter-spacing:.02em;
  color:#0a0a0a !important;
  text-decoration:none;
}

body.single-post .post-navigation .nav-previous a::before,
body.single-post .post-navigation .nav-next a::after{
  content:none !important;
}

body.single-post .ast-single-post-navigation .nav-links{
  gap:32px;
}

/* ── Numerals never take tracking ────────────────────────────────────
   Lydie asked for 01, 02, 03, 04 to read as numbers. They were rendering
   as "0 1" because the label styles that carry them are uppercase styles
   with .18em-.24em tracking, which is right for a word like ARTICLES and
   wrong for a two-digit numeral: the space lands between the digits.

   It was corrected once on About and Who and came back, because the fix
   was applied where it was SEEN rather than everywhere the pattern
   occurs. The two places it never reached were the home page's four
   Perspective cards and the section counters on all four legal pages -
   the legal ones are ::before counters, which is why reading the markup
   alone would never have found them.

   Tracking is removed from the numeral only; the surrounding label styles
   keep theirs. */

body #s-persp-card-1 .ml-kicker .elementor-heading-title,
body #s-persp-card-2 .ml-kicker .elementor-heading-title,
body #s-persp-card-3 .ml-kicker .elementor-heading-title,
body #s-persp-card-4 .ml-kicker .elementor-heading-title{
  letter-spacing:0 !important;
  font-variant-numeric:tabular-nums;
}

body #legal-body .ml-section-title::before{
  letter-spacing:0 !important;
  font-variant-numeric:tabular-nums;
}

/* ── Single article: everything below the opening paragraphs ─────────
   The first pass only corrected what was visible above the fold. Below
   it the page was still WordPress defaults: a gallery of 192px thumbnails
   in shadowed frames, then a second white box carrying a comment form
   with a blue submit, a Website field and two subscription checkboxes. */

/* One grid, one crop. The block gallery sized its own thumbnails and hung
   a 0.15 shadow on every figure. */
body.single-post .entry-content .wp-block-gallery{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:34px 0 !important;
  box-shadow:none !important;
}

body.single-post .entry-content .wp-block-gallery .wp-block-image{
  margin:0 !important;
  width:auto !important;
  max-width:none !important;
  box-shadow:none !important;
}

body.single-post .entry-content .wp-block-gallery .wp-block-image img{
  width:100%;
  height:100%;
  aspect-ratio:3 / 2;
  object-fit:cover;
  margin:0 !important;
  border-radius:2px;
}

body.single-post .entry-content figure,
body.single-post .entry-content img,
body.single-post .entry-content .wp-block-image{
  box-shadow:none !important;
}

/* a standalone image keeps its own proportions, it is the SET that needs
   a common crop */
body.single-post .entry-content > .wp-block-image img,
body.single-post .entry-content > figure:not(.wp-block-gallery) img{
  aspect-ratio:auto;
  height:auto;
}

@media (max-width:600px){
  body.single-post .entry-content .wp-block-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Comments are closed at the source as well as hidden here - an
   announcement page is not a discussion thread, and leaving the form in
   place keeps a spam endpoint open even when it is invisible. */
body.single-post .comments-area,
body.single-post #comments,
body.single-post .comment-respond,
body.single-post .ast-comment-formwrap{
  display:none !important;
}

/* The grid was fixed at three columns, so a FOUR image gallery ran 3 + 1 and
   stranded the last one on its own row - the same trailing gap the card grid
   had. Column count follows the item count, which also buys a bigger crop:
   four images at two columns are ~305px rather than ~198px. */
body.single-post .entry-content .wp-block-gallery:has(> .wp-block-image:nth-child(2):last-child),
body.single-post .entry-content .wp-block-gallery:has(> .wp-block-image:nth-child(4):last-child){
  grid-template-columns:repeat(2,minmax(0,1fr));
}

body.single-post .entry-content .wp-block-gallery:has(> .wp-block-image:nth-child(1):last-child){
  grid-template-columns:minmax(0,1fr);
}

/* The arrows are SVG icons, not pseudo-element content, so the earlier
   content:none did nothing. House style is fade-only with no directional
   ornament, so the icon is removed and the label carries the meaning. */
body.single-post .post-navigation .ahfb-svg-iconset,
body.single-post .post-navigation .ast-post-nav svg{
  display:none !important;
}

/* Astra reserved room for a comment thread that no longer renders, leaving
   a dead band above the footer. */
body.single-post #primary{
  padding-bottom:clamp(48px,5vw,72px);
}

body.single-post .post-navigation{
  padding-bottom:clamp(56px,6vw,88px);
}

body.single-post .site-content .ast-container{
  padding-bottom:0 !important;
}

/* The real cap was never #primary. Astra sets .ast-container to width AND
   max-width 750px, so raising the inner element could not widen anything -
   and the gutter padding I put on #primary then squeezed 710px down to 503px,
   which is why the headline stacked nine lines deep at 1920.
   The container carries the site's 1240 measure and the gutter; the inner
   column takes the full width it is given. */
body.single-post .site-content .ast-container{
  width:100% !important;
  max-width:1240px !important;
  padding-inline:var(--ml-gut) !important;
}

body.single-post #primary{
  max-width:none;
  width:100%;
  padding-inline:0;
}

/* ── Footer descriptor ───────────────────────────────────────────────
   Lydie asked for three lines above the legal row: the firm name, the
   services line, then the tagline. They had been added once directly in
   the Elementor UI and were silently reverted by a later JSON push - the
   drift this build is warned about. They now live in the source of truth
   (footer-elements.json), so a push cannot lose them again. */
body [data-elementor-type="footer"] .ml-foot-name .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif !important;
  font-size:.9375rem !important;
  font-weight:600;
  letter-spacing:.01em;
  color:#ffffff !important;
  margin:0 0 6px;
}

body [data-elementor-type="footer"] .ml-foot-svcs .elementor-heading-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif !important;
  font-size:.75rem !important;
  font-weight:400;
  line-height:1.6;
  letter-spacing:.01em;
  color:#a5a5a5 !important;
  max-width:34ch;
  margin:0 0 14px;
}

/* ── Moment cards 01-04 ──────────────────────────────────────────────
   Cephas, 2026-08-01: no ring, no photograph under the copy, illustration
   enlarged as the highlight of the card. Odd cards are white with ink art,
   even cards are the same treatment INVERTED - dark card, paper-coloured art.

   THE ART IS VECTOR. It was raster, and the softness was never a delivery
   problem: measured on the live card the browser already had 1440x1440 source
   pixels against a 648x537 device-pixel need, 2.2x headroom. The softness was
   baked into the artwork as anti-aliased strokes, which invert() and a contrast
   lift amplified. The SAME drawings are traced to outlines
   (assets/trace-illo.py) and carry ink in `currentColor`, which retires the
   whole invert + multiply stack - and with it the white rectangle that stack
   painted around each drawing.

   Two source faults the tracer had to handle, both found by measuring:
   illo-growth.png carries a 1px band of value 185-200 across its ENTIRE top
   row, which traced as a real shape and printed as a dash across the card; and
   every source is a square with wide empty margins, so a wide composition
   letterboxed inside its slot and read as a small object boxed into the card.
   The tracer now crops the frame and trims the viewBox to the ink, so each
   drawing carries its own aspect ratio and fills the space it is given.

   Dark cards use #121210, not pure black: the locked law is field #0A0A0A,
   cards #121210. Pure black would dissolve the card into the section. */

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-image:none !important;
}

body #s-moment-1.e-con,
body #s-moment-4.e-con{
  background-color:#ffffff !important;
  color:#0a0a0a;
}

body #s-moment-2.e-con,
body #s-moment-3.e-con{
  background-color:#121210 !important;
  color:#f3f1eb;
}

/* the photograph's scrim has nothing left to sit over */
body #s-moment-1::before,
body #s-moment-2::before,
body #s-moment-3::before,
body #s-moment-4::before{
  background:none !important;
  opacity:0 !important;
}

/* THE RING. Drawn by the shared rule
   `body #s-moments-grid .ml-moment-art a::before`, and the new markup still
   puts an <a> inside .ml-moment-art, so that selector still matches. Rewriting
   this block once dropped the override and the ring came straight back. */
body #s-moments-grid .ml-moment-art a::before{
  display:none !important;
}

/* One box for every card; the DRAWING decides how it fills it. Because each
   viewBox is trimmed to its own ink, max-width/max-height with auto sizing lets
   a wide composition run to the width and a tall one to the height, without a
   per-card figure to maintain. */
body #s-moments-grid .ml-illo{
  position:absolute;
  top:3%;
  left:8%;
  width:84%;
  height:50%;
  z-index:0;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

body #s-moments-grid .ml-illo svg{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  display:block;
}

/* EVERY DRAWING AT THE SAME SCALE AS CARD 01. Card 01 is the standard: it fills
   the box height, and the other three are held to the same measure so no card
   reads as smaller than its neighbours.

   This replaced a per-card cap that equalised the four by OPTICAL MASS - blurred
   and thresholded, so a dispersed drawing counted for less than a compact one.
   The arithmetic was sound and the result was wrong: matching mass shrinks the
   wide drawings to roughly two thirds of the box, and against card 01 at full
   height they simply read as smaller. Apparent size here is carried by the
   height each drawing occupies, not by how much ink it lays down. Cephas called
   it from the rendered cards; keep it this way. */

/* the anchor keeps the whole card clickable, as the linked image used to */
body #s-moments-grid .ml-moment-hit{
  position:absolute;
  inset:0;
  z-index:4;
  display:block;
  border-radius:inherit;
  color:inherit;
}

/* the art passes over the corner the numeral sits in. Raise the stacking order
   ONLY - setting position:relative here took the numeral out of its absolute
   corner and dropped it 325px down the card. */
body #s-moments-grid .ml-moment-num{
  z-index:6;
}

@media (max-width:834px){
  body #s-moments-grid .ml-illo{
    top:3%;
    left:8%;
    width:84%;
    height:42%;
  }
}

/* CARD 02's flat arm-cuts are a KNOWN OPEN ITEM, deliberately left alone.
   Three fixes were tried on 2026-08-01 and each traded one fault for another:
   bleeding the art off the card moved the cut to the bottom edge of the art box
   (mid-card, so it showed as a full-width line); masking the sides dissolved the
   cut but greyed the arms. The drawing is 1.44 wide against a 2.27 visible zone,
   so nothing wide enough to reach the card's edges is short enough to fit - the
   two faults trade places, and placement alone cannot settle it. Any real fix
   changes the ARTWORK, not the CSS. Do not re-derive this: see LOOP_LEDGER
   2026-08-01 18:30 and 18:45. */

/* CARD 03 is an ALPHA MATTE, not a trace. Its source is tonal, not line art:
   the canopies and ground are built from stipple, so a hard-threshold trace
   produced 872 loops of speckle and the trees disappeared. Luminance becomes
   the alpha channel and the colour becomes flat white, so the drawing keeps its
   stipple AND composites on the card with no black square behind it - which is
   the "boxed in" fault. It is tinted to the card's own ink via a filter so the
   set still inverts as one. */
/* AND IT MUST UNDO THE OLD BADGE, PROPERTY BY PROPERTY. Cards 01/02/04 escaped
   the orb because they stopped being <img> at all - they are inline <svg>, so
   `body #s-moments-grid .ml-moment-art img` (line 1643) simply no longer
   matches them. Card 03 is still an <img>, so it kept the ENTIRE legacy
   treatment: opacity .34, grayscale + mix-blend-mode:screen, position:absolute
   at top 50/right 50, border-radius 50% and object-fit:cover in a 130px box.
   Measured on the live card, not inferred: opacity 0.34, filter grayscale(1),
   blend screen, radius 50%, box 258x258 while its siblings were free-aspect.
   That is the ghosted circular badge the brief killed - "no orb or rim", the
   art "should breathe fully" - surviving on exactly one of the four.
   Sizing alone could not fix it: the newer rule set width/height and nothing
   else, so every other legacy property still won by cascade. Each one has to
   be named and reset here. */
body #s-moments-grid .ml-illo-raster img{
  position:static;
  top:auto;
  right:auto;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  display:block;
  border-radius:0;
  object-fit:contain;
  opacity:1;
  filter:none;
  mix-blend-mode:normal;
  /* `.ml-moment-art img` (line 300) pins aspect-ratio:1/1. It is far weaker
     than this selector but it still won, because a rule only overrides the
     properties it actually names and the reset above never named this one.
     Left in, it squared a 1024x598 drawing into a 258x258 box and object-fit
     :contain letterboxed it - the art paints ~151px tall where its siblings
     get the full 258. Reset it so the drawing carries its own ratio, exactly
     as the trimmed SVG viewBoxes do. */
  aspect-ratio:auto;
}

/* the legacy hover lifted the badge from .34 to .48. The art is no longer a
   badge and does not react to hover; the card itself still does. */
body #s-moments-grid [id^="s-moment-"]:hover .ml-illo-raster img{
  opacity:1;
}

/* on a light card the white matte must become ink */
body #s-moment-1 .ml-illo-raster img,
body #s-moment-4 .ml-illo-raster img{
  filter:invert(1);
}

/* ── Short viewports: heroes must not outgrow the screen ─────────────
   Added 2026-08-06 after a full sweep. The standing sweep tests horizontal
   overflow and never looks at vertical proportion, so this was invisible to it.

   THE FAULT. Every hero sets its top padding as a clamp whose MINIMUM is a large
   pixel value (104px on about/leadership/moments/who, 118px contact, 132px legal,
   138px home/media/perspectives/publications). On a short screen the vh term
   collapses but that floor holds, so padding alone consumed ~190px of a 300px
   window regardless of min-height. Measured at 1280x300, a laptop window dragged
   short:

       who     623px = 208% of viewport, page title BELOW the fold
       about   566px = 189%,             title below the fold
       terms   440px = 147%,             title below the fold

   The page opened on an image with no headline. The legal pages looked immune at
   480x272 only by accident: their guard is a `max-width:480px` rule, keyed to
   WIDTH, which cannot see a wide-but-short window at all. At 1280x300 they failed
   with everything else.

   THE FIX is on the axis the bug is actually on. Height-keyed, so it is inert at
   every normal viewport, and the two deliberate hero scales are untouched: main
   heroes stay 74svh, legal stays 53svh. This only stops a hero reserving 666px of
   vertical space inside a 300px window.

   TWO CONSTRAINTS PULL AGAINST EACH OTHER, and the first attempt got it wrong.
   A 76px top padding cleared the viewport but put hero content at y=76 against a
   visible nav whose links end at y=93 — measured collision, not theory. Raising
   the floor to clear the nav then pushed the title back below the fold, because
   at 1280x300 the hero's content block is itself 346px tall. Padding alone cannot
   satisfy both.

   So the mark is dropped instead. It is decorative brand furniture, the least
   load-bearing thing in the hero, and worth ~130px with its margin — which is
   exactly the budget needed to clear the nav AND keep the headline above the fold.
   Sacrificing it is the honest trade at this size; hiding the title is not.

   The 104px floor is measured: the fixed header is 93px on desktop and 42px on
   mobile, and hero content sits ~46px below the padding edge, so 104px puts
   content at ~150px and clears the nav by ~57px.

   Selectors are enumerated with `body #id` rather than `[id$="-hero"]` because the
   per-page rules carry an ID and !important; an attribute selector loses the
   specificity contest even when it is declared later.

   CORRECTED 2026-08-17: the breakpoint was 560px, four times the 300px height it
   was actually measured against, and cost every hero its mark at ordinary tablet
   landscape sizes (Cephas found it at 960x540 - the mark was gone on eight of
   nine pages, present only on #news-hero, which this rule has never covered and
   which was never broken). Re-measured properly this time: with the mark shown
   and padding at its normal (non-emergency) value, at a height deep enough that
   the padding clamp is pinned at its floor, the lowest edge of each hero's real
   content (mark, eyebrow, title, lead, and #s-hero's CTA button, the tallest
   stack of the nine) is:

       s-hero 450 (has a button the others don't) · lead-hero 405 · persp-hero
       395 · contact-hero/who-hero 357 · about-hero 365 · mom-hero 341 ·
       media-hero/pub-hero 331

   460px clears the worst of those (450) with margin and stays well under the
   960x540 case that surfaced this, so every hero now matches #news-hero's
   always-correct behaviour at that size. Below 460px the original trade still
   holds exactly as designed - the mark still drops, because the 1280x300
   measurement above is a genuinely tight case this height also still covers. */
@media (max-height:460px){
  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 #media-hero.e-con,
  body #contact-hero.e-con,
  body #pub-hero.e-con,
  body #legal-hero.e-con{
    min-height:auto !important;
    padding-top:clamp(104px,13vh,120px) !important;
    padding-bottom:clamp(26px,5vh,44px) !important;
  }

  body #s-hero .ml-hero-mark,
  body #about-hero .ml-hero-mark,
  body #lead-hero .ml-hero-mark,
  body #mom-hero .ml-hero-mark,
  body #who-hero .ml-hero-mark,
  body #persp-hero .ml-hero-mark,
  body #media-hero .ml-hero-mark,
  body #contact-hero .ml-hero-mark,
  body #pub-hero .ml-hero-mark,
  body #legal-hero .ml-hero-mark{
    display:none !important;
  }
}

/* ── The nav wraps between 923px and 999px ───────────────────────────
   Pre-existing, found 2026-08-06 while verifying the short-viewport hero rule.
   It is a WIDTH fault and it applies at every height, so the standing sweep's
   overflow check never saw it: the header simply doubles in height instead.

   Measured: the 7 items need 906px in one row. Astra hands over from the burger
   somewhere between 922px and 940px, but the menu container is only width-90, so
   from 923px to 999px the desktop nav is on and CANNOT fit. It wraps to two rows
   and the header goes 93px -> 186px on every page in that band.

       922px  burger, header 44px
       940px  7 items, 2 rows, header 186px   <- broken
       960px  7 items, 2 rows, header 186px   <- broken
       980px  7 items, 2 rows, header 186px   <- broken
      1000px  7 items, 1 row,  header 93px

   The slack is in the item padding, not the type: the labels need 682px and the
   16px-per-side padding adds 224px. At 9px per side the row needs 808px against
   a 833px container at the narrowest point, so it fits with ~25px to spare and
   the type is untouched. Scoped to the band; every other width keeps 16px. */
@media (min-width:923px) and (max-width:999px){
  body .main-header-menu > li > a,
  body .elementor-nav-menu > li > a,
  body header nav ul > li > a{
    padding-left:9px !important;
    padding-right:9px !important;
  }
}

/* ── A hovered button must not become its neighbour's resting state ──
   Found 2026-08-06. The two hover rules above are exact mirrors: primary hovers
   to transparent+ink, which IS the secondary's resting state, and secondary
   hovers to ink+paper, which IS the primary's. Wherever the two sit together the
   pair collapses into one appearance the moment either is hovered. Measured on
   the home hero and who-close, both `identical=true` in both directions:

     rest       [Explore Our Perspectives] white/black | [Start a Conversation] transparent/white
     hover 1st  transparent/white | transparent/white   <- indistinguishable
     hover 2nd  white/black       | white/black         <- indistinguishable

   Affects six sections: s-hero, lead-close, mom-close, who-close, persp-close,
   media-follow.

   The inversion stays - it is the house hover language. What is added is a signal
   NEITHER resting state carries: a one-pixel inner ring in the button's own text
   colour. On the outlined state it reads as a doubled edge; on the filled state as
   a fine inset line. currentColor, so it is always ink-on-paper or paper-on-ink
   and never introduces a third colour. box-shadow, so nothing reflows. No
   movement, per guide 13. */
   Drawn as a pseudo-element, NOT box-shadow or outline: this file already kills
   both on buttons with !important (`box-shadow:none !important`,
   `outline:none !important`) to keep decorative shadows off the site, and that
   guard is right. Fighting it with another !important would win the cascade and
   lose the intent. No ::after existed on these buttons, so the slot was free. */
body .ml-btn .elementor-button{
  position:relative;
}


/* ── Card imagery is graded, not decorated ───────────────────────────
   The 2023 press photographs are full colour. Measured in the homepage
   Media band they ran to mean chroma 38.8, max 166, against 0.0 for the
   architecture thumbnails beside them, on a site whose every hero and
   every other image measures monochrome. Colour photographs are the only
   thing on the canvas that break that discipline.

   Graded in CSS rather than by re-encoding the files, so the originals
   stay intact for any future use and the decision is reversible in one
   line. Applies to loop-card thumbnails only; it is deliberately not a
   global image filter. */
body .ml-card-img img,
body .ml-thumb-img img{
  filter:grayscale(1);
}

/* The bilingual governing-language note. Quiet, set apart from the body it
   qualifies, and present on all four legal pages. */
body .ml-legal-governs{
  margin-top:clamp(56px,6.5vw,84px);
}
body .ml-legal-governs p{
  font-size:.8125rem;
  line-height:1.6;
  color:var(--ml-grey-light);
}

/* ── Nav legibility on light templates ───────────────────────────────
   The header is transparent at rest with PAPER links, which is right over
   the photographic heroes. Ink links were then granted by a PAGE-ID
   ALLOWLIST (Leadership 1957, Contact 1993) — and an allowlist only covers
   the pages someone remembered.

   Measured 2026-08-11, white-on-white and unreadable at rest:
     - /perspectives-2026/      paper hero added 2026-08-10, never allowlisted
     - /category/<any>/         archive templates, background #f0f5fa
     - 404 and search           same template family
   The category archives are not obscure: every Media card's category label
   links straight to one.

   Fixed by TEMPLATE rather than by id, so a page added later inherits the
   right behaviour instead of waiting to be noticed. */

body.archive header:not(.mlcs-stuck) .nav a,
body.archive header:not(.mlcs-stuck) .elementor-nav-menu a,
body.archive header:not(.mlcs-stuck) .menu-link,
body.search header:not(.mlcs-stuck) .nav a,
body.search header:not(.mlcs-stuck) .elementor-nav-menu a,
body.search header:not(.mlcs-stuck) .menu-link,
body.error404 header:not(.mlcs-stuck) .nav a,
body.error404 header:not(.mlcs-stuck) .elementor-nav-menu a,
body.error404 header:not(.mlcs-stuck) .menu-link{
  color:var(--ml-ink) !important;
  text-shadow:none !important;
}

body.archive header:not(.mlcs-stuck) .mlcs-home-link img,
body.search header:not(.mlcs-stuck) .mlcs-home-link img,
body.error404 header:not(.mlcs-stuck) .mlcs-home-link img{
  filter:invert(1);
}

@media (min-width:922px){
  body.archive .site-header:not(.mlcs-stuck) .main-header-menu a,
  body.search .site-header:not(.mlcs-stuck) .main-header-menu a,
  body.error404 .site-header:not(.mlcs-stuck) .main-header-menu a{
    color:var(--ml-ink) !important;
  }
}

/* ── Nine nav items need a little air between 922 and 1280 ───────────
   Articles and Publications joined the bar on 2026-08-11 so both live
   pages are reachable. Measured at nine items: one row from 1280 up, but
   TWO ROWS at 1152 (the 4:3 monitor rung of the sweep ladder), which reads
   as a broken header rather than a design.

   Reduced type and tracking in that band only, rather than shortening
   "The Moments That Matter" — that name is the client's, set in PAGES.docx,
   and is not ours to abbreviate for a layout problem. */
@media (min-width:922px) and (max-width:1279px){
  body .main-header-menu a,
  body .menu-link,
  body .elementor-nav-menu a{
    font-size:.9rem !important;
    letter-spacing:-.004em !important;
  }
  body .elementor-nav-menu--main .elementor-item{
    padding-left:.55em !important;
    padding-right:.55em !important;
  }
}

/* ══ THE WORDPRESS TEMPLATES, BROUGHT INTO THE FOLD ═══════════════════
   Every Elementor-built page carries the design system. The templates
   WordPress renders itself never did: category and tag archives, author
   and date archives, search results, 404, and the single post. Measured
   2026-08-11 they came up on #f0f5fa with slate-blue headings
   rgb(30,41,59) and bright blue links rgb(4,107,210) — Astra's defaults,
   not ML's.

   They are not obscure. EVERY Media card's category label links to a
   category archive, and every article card links to a single post.

   One block, because the fault is shared: paper field, Archivo headings
   in ink, Literata body in grey, links that behave like the rest of the
   site, and none of the theme's card chrome. */

body.archive,
body.search,
body.error404,
body.single-post,
body.blog{
  background-color:var(--ml-paper);
}

body.archive #content,
body.search #content,
body.error404 #content,
body.single-post #content,
body.blog #content,
body.archive .site-content,
body.search .site-content,
body.error404 .site-content,
body.single-post .site-content{
  background-color:var(--ml-paper);
}

/* the band the theme prints the archive title into */
body.archive .ast-archive-description,
body.search .ast-archive-description{
  background-color:var(--ml-paper);
  max-width:1300px;
  margin:0 auto;
  padding:clamp(140px,15vh,200px) var(--ml-gut) clamp(30px,4vh,52px);
  border:0;
  text-align:left;
}

body.archive .ast-archive-description .ast-archive-title,
body.archive .ast-archive-description h1,
body.search .ast-archive-description h1,
body.error404 .entry-title,
body.single-post .entry-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif !important;
  font-weight:600;
  font-size:clamp(30px,3.1vw,44.64px) !important;
  line-height:1.04 !important;
  letter-spacing:-.03em;
  color:var(--ml-ink) !important;
  margin:0;
}

/* body copy and links */
body.archive .site-main,
body.search .site-main,
body.error404 .site-main,
body.single-post .site-main{
  max-width:1300px;
  margin:0 auto;
  padding:0 var(--ml-gut) clamp(96px,11vw,160px);
  background-color:var(--ml-paper);
}

body.archive .site-main p,
body.search .site-main p,
body.single-post .site-main p,
body.error404 .site-main p{
  font-family:"Literata",Georgia,serif;
  font-size:1rem;
  line-height:1.56;
  color:var(--ml-grey);
}

body.archive .site-main a:not(.elementor-button),
body.search .site-main a:not(.elementor-button),
body.single-post .site-main a:not(.elementor-button),
body.error404 .site-main a:not(.elementor-button){
  color:var(--ml-ink);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
body.archive .site-main a:hover,
body.search .site-main a:hover,
body.single-post .site-main a:hover{color:var(--ml-grey)}

/* the loop, rebuilt as ML cards: rule, category, title, date */
body.archive .ast-article-post,
body.search .ast-article-post,
body.blog .ast-article-post{
  background-color:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  border-radius:0 !important;
  padding:30px 0 44px !important;
  margin:0 !important;
}

body.archive .ast-article-post .entry-title,
body.search .ast-article-post .entry-title,
body.blog .ast-article-post .entry-title{
  font-family:"Archivo",Helvetica,Arial,sans-serif !important;
  font-weight:540;
  font-size:clamp(19px,1.45vw,23px) !important;
  line-height:1.2 !important;
  letter-spacing:-.02em;
  margin:14px 0 0;
}
body.archive .ast-article-post .entry-title a,
body.search .ast-article-post .entry-title a,
body.blog .ast-article-post .entry-title a{
  color:var(--ml-ink) !important;
  text-decoration:none !important;
}

body.archive .entry-meta,
body.search .entry-meta,
body.blog .entry-meta,
body.archive .entry-meta *,
body.search .entry-meta *,
body.blog .entry-meta *,
body.single-post .entry-meta *{
  font-family:"Archivo",Helvetica,Arial,sans-serif !important;
  font-size:.72rem !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  color:var(--ml-grey) !important;
  text-decoration:none !important;
}

body.archive .ast-taxonomy-container a,
body.blog .ast-taxonomy-container a,
body.single-post .ast-taxonomy-container a{
  font-family:"Archivo",Helvetica,Arial,sans-serif !important;
  font-size:.7188rem !important;
  font-weight:600;
  letter-spacing:.24em !important;
  text-transform:uppercase !important;
  color:var(--ml-grey) !important;
  text-decoration:none !important;
}

body.archive .post-thumb img,
body.search .post-thumb img,
body.blog .post-thumb img,
body.single-post .post-thumb img{
  border-radius:0 !important;
  filter:grayscale(1);
}

/* read-more and pagination speak the button language, quietly */
body.archive .ast-readmore-btn,
body.search .ast-readmore-btn,
body.blog .ast-readmore-btn,
body.archive .ast-pagination a,
body.search .ast-pagination a,
body.archive .ast-pagination .page-numbers,
body.search .ast-pagination .page-numbers{
  font-family:"Archivo",Helvetica,Arial,sans-serif !important;
  font-size:.72rem !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  color:var(--ml-ink) !important;
  background:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 14px 0 0 !important;
}

/* nothing on these templates keeps the theme's rounded, shadowed chrome */
body.archive .ast-separate-container .ast-article-post,
body.search .ast-separate-container .ast-article-post,
body.error404 .ast-separate-container,
body.single-post .ast-separate-container .ast-article-single{
  background-color:transparent !important;
  box-shadow:none !important;
}

/* Astra sets the post title font at a higher specificity than the block
   above could reach, so the archive cards kept Literata where every other
   card on the site uses Archivo. Named explicitly here.
   The byline is also removed: every post is authored "admin", which is a
   CMS account, not a person, and printing it on a client-facing archive
   says nothing true. The date stays. */
body.archive .ast-article-post .entry-title,
body.archive .ast-article-post .entry-title a,
body.search .ast-article-post .entry-title,
body.search .ast-article-post .entry-title a,
body.blog .ast-article-post .entry-title,
body.blog .ast-article-post .entry-title a,
body.archive h2.entry-title a,
body.search h2.entry-title a{
  font-family:"Archivo",Helvetica,Arial,sans-serif !important;
  font-weight:540 !important;
  letter-spacing:-.02em !important;
}

body.archive .entry-meta .posted-by,
body.search .entry-meta .posted-by,
body.blog .entry-meta .posted-by,
body.single-post .entry-meta .posted-by,
body.archive .entry-meta .author,
body.search .entry-meta .author{
  display:none !important;
}

/* Removing the "admin" byline left its separator behind, so every card
   date read "/ NOVEMBER 24, 2023". Hide the orphaned delimiter. */
body.archive .entry-meta > span:first-child:empty,
body.search .entry-meta > span:first-child:empty{display:none !important}
body.archive .entry-meta .ast-date-meta::before,
body.search .entry-meta .ast-date-meta::before,
body.blog .entry-meta .ast-date-meta::before{content:none !important}
body.archive .entry-meta,
body.search .entry-meta,
body.blog .entry-meta{
  display:flex !important;
  gap:0 !important;
}
body.archive .entry-meta > *:first-child,
body.search .entry-meta > *:first-child{margin-left:0 !important}

/* The "/" is a bare TEXT NODE Astra prints between the byline and the date,
   so no selector can reach it. Collapse stray text nodes by zeroing the
   container's font-size and restoring it on the real children. */
body.archive .entry-meta,
body.search .entry-meta,
body.blog .entry-meta{font-size:0 !important}
body.archive .entry-meta > *,
body.search .entry-meta > *,
body.blog .entry-meta > *{
  font-size:.72rem !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
  color:var(--ml-grey) !important;
}

/* Touch targets on the WordPress templates. The category label and the
   previous/next post links are set in small uppercase Archivo, which gives
   a 12px and 11px hit area — well under the 32px floor, and the sweep
   caught them at 1280 and 1366 (Steam Deck, iPad Pro landscape) and at
   480/540. Padded to a real target on coarse pointers only, so the
   typography is unchanged on a mouse. */
@media (pointer:coarse){
  body.archive .ast-taxonomy-container a,
  body.blog .ast-taxonomy-container a,
  body.single-post .ast-taxonomy-container a,
  body.archive .entry-meta > * a,
  body.search .entry-meta > * a{
    display:inline-block;
    padding-top:10px;
    padding-bottom:10px;
  }
  body.single-post .post-navigation a,
  body.single-post .nav-links a,
  body.single-post .ast-post-nav a{
    display:inline-block;
    padding-top:11px;
    padding-bottom:11px;
  }
}

/* Breadcrumb links on the search template measured 24px on coarse pointers. */
@media (pointer:coarse){
  body.search .ast-breadcrumbs a,
  body.search .trail-items a,
  body.archive .ast-breadcrumbs a,
  body.archive .trail-items a,
  body.search .site-main nav a,
  body.search .ast-search-box a{
    display:inline-block;
    padding-top:5px;
    padding-bottom:5px;
    min-height:32px;
    line-height:22px;
  }
}

/* "Search Results for: <query>" is one unbroken string, so at 280 and 320 it
   overflowed its container. Let long queries and long taxonomy names wrap
   rather than clip. */
body.search .ast-archive-description h1,
body.archive .ast-archive-description h1,
body.archive .ast-archive-description .ast-archive-title,
body.search .site-main h1,
body.archive .site-main h1{
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}
@media (max-width:400px){
  body.search .ast-archive-description h1,
  body.archive .ast-archive-description h1,
  body.archive .ast-archive-description .ast-archive-title{
    font-size:clamp(22px,7vw,30px) !important;
    line-height:1.12 !important;
  }
}


/* ── Articles hero ───────────────────────────────────────────────────
   The Articles page is now a main-nav destination but it opened straight
   into a left-aligned eyebrow and a grid, with no monogram and no hero
   band, while every other page opens the same way: mark, eyebrow, large
   centred title, one supporting line. Given the same PAPER hero as
   Perspectives and Leadership, so the set reads as one site. */

#news-hero.e-con{
  position:relative;
  padding:clamp(118px,13vh,168px) var(--ml-gut) clamp(48px,6vh,80px);
  background-color:var(--ml-paper);
  color:var(--ml-ink);
  justify-content:center;
  align-items:center;
  text-align:center;
  --width:100%;
  max-width:none;
}
#news-hero-copy.e-con{
  max-width:1180px;
  padding:0;
  align-items:center;
  text-align:center;
  --width:100%;
}
#news-hero .ml-hero-mark img{height:auto;display:block}
#news-hero .ml-hero-mark{margin-bottom:clamp(18px,2.8vh,28px)}
#news-hero .elementor-heading-title{color:var(--ml-ink)}
#news-hero .ml-eyebrow .elementor-heading-title{color:var(--ml-grey)}
#news-hero .ml-page-title{margin-top:26px}
#news-hero .ml-page-title .elementor-heading-title{max-width:22ch;margin-left:auto;margin-right:auto}
#news-hero .ml-lead{margin-top:28px;max-width:70ch}
#news-hero .ml-lead,
#news-hero .ml-lead p{color:var(--ml-grey)}

/* the grid keeps its ink field, so the page reads paper -> ink like Perspectives */
/* Top padding for this grid now lives with the rest of its box in
   ml-elementor.css - a longhand here was silently beaten by the shorthand there. */

/* a paper hero means the nav must be ink at rest on this page too.
   The guard is .mlcs-stuck - the class functions.php actually sets on scroll.
   It read :not(.is-scrolled) until 2026-08-12, a class nothing sets, so the ink
   nav never switched off and every paper-hero page went black-on-black the moment
   you scrolled onto the dark bar. */
body.page-id-1919 header:not(.mlcs-stuck) .nav a,
body.page-id-1919 header:not(.mlcs-stuck) .elementor-nav-menu a,
body.page-id-1919 header:not(.mlcs-stuck) .menu-link{
  color:var(--ml-ink) !important;
  text-shadow:none !important;
}
body.page-id-1919 header:not(.mlcs-stuck) .mlcs-home-link img{filter:invert(1)}
@media (min-width:922px){
  body.page-id-1919 .site-header:not(.mlcs-stuck) .main-header-menu a{color:var(--ml-ink) !important}
}


/* ── Single post: the byline ─────────────────────────────────────────
   Astra prints `By <author> / <date>`. The author is the WordPress account
   that built the site - it rendered as "By ML IT" - and a developer login has
   no business on a client's masthead. `.posted-by` was already hidden, but a
   later rule handed the meta CONTAINER a font-size again, so the orphaned text
   nodes "By " and "/ " came back and the page read "BY / AUGUST 8, 2026".
   Collapsing the container to font-size:0 and restoring only its children is
   the same fix the archives already carry. Nothing on this site shows an
   author: the cards are kicker, title, date, and the single post now matches. */
body.single-post .entry-meta{
  font-size:0 !important;
  margin:22px 0 0 !important;
}

body.single-post .entry-meta .posted-on,
body.single-post .entry-meta .posted-on *{
  font-size:.6875rem !important;
  letter-spacing:.2em !important;
  color:var(--ml-grey) !important;
}

/* Title, then a beat, then the date - and a clear gap before the body opens.
   The header previously ran title/meta/copy together with no hierarchy. */
body.single-post .entry-header{
  margin-bottom:clamp(44px,5vw,68px);
}

body.single-post .entry-title{
  margin:0 !important;
  max-width:26ch;
}


/* The paper tooth is painted on body; Astra's content wrapper then covered it
   with opaque white, so single posts, archives and search read as a flat white
   column inside a textured page. Everything else on the site sits ON the paper.
   Let it through. */
body.single-post .site-main,
body.archive .site-main,
body.search .site-main,
body.error404 .site-main,
body.single-post .site-content,
body.single-post #content,
body.archive .site-content,
body.archive #content,
body.search .site-content,
body.search #content,
body.error404 .site-content,
body.error404 #content{
  background-color:transparent !important;
}


/* ── Category / tag / search archives: the grid ──────────────────────
   Astra ships these as a flex row with no gap and each card at an exact
   third, so the cards butted edge to edge - and the container was pinned
   to 1240 while every loop grid on the site runs to --ml-maxw. Rebuilt as
   a real grid on the site's own measure, with the gutters the cards
   elsewhere already have. */
body.archive .ast-container,
body.search .ast-container,
body.blog .ast-container{
  max-width:var(--ml-maxw) !important;
}

body.archive #main,
body.search #main,
body.blog #main{
  max-width:none !important;
  padding-inline:var(--ml-gut) !important;
}

body.archive .ast-row,
body.search .ast-row,
body.blog .ast-row{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(48px,4.4vw,72px) clamp(32px,2.8vw,48px);
  margin:0 !important;
}

body.archive .ast-row > article,
body.search .ast-row > article,
body.blog .ast-row > article{
  width:auto !important;
  max-width:none !important;
  flex:none !important;
  padding:0 !important;
}

@media (max-width:1100px){
  body.archive .ast-row,
  body.search .ast-row,
  body.blog .ast-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:700px){
  body.archive .ast-row,
  body.search .ast-row,
  body.blog .ast-row{grid-template-columns:minmax(0,1fr)}
}

/* The date sat flush against the title - descenders touching the caps of
   the meta line. Title, a beat, date, then the excerpt gets its own room. */
body.archive .ast-article-post .entry-title,
body.search .ast-article-post .entry-title,
body.blog .ast-article-post .entry-title{
  margin-bottom:14px !important;
}

body.archive .ast-article-post .entry-meta,
body.search .ast-article-post .entry-meta,
body.blog .ast-article-post .entry-meta{
  margin:0 0 18px !important;
}


/* Astra's card panel lives on an INNER div, not on the <article>, so the earlier
   rule that stripped the article left this untouched: opaque white, a 6px radius
   and a drop shadow, floating on the paper. That is a fourth surface plus the
   decorative shadow and floating card the design system rejects. The grid gutter
   is the separation; the card needs no box. */
body.archive .ast-post-format-,
body.search .ast-post-format-,
body.blog .ast-post-format-,
body.archive [class*="blog-layout-"],
body.search [class*="blog-layout-"],
body.blog [class*="blog-layout-"]{
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  border:0 !important;
  padding:0 !important;
}


/* The governing-language clause is hidden on the French pages at Cephas's request
   (2026-08-12). It still stands on the English pages. Note the asymmetry is
   deliberate but odd on its face: the clause exists to tell a FRENCH reader that
   the English text prevails, so hiding it there removes it from the only audience
   it addresses. Removing it entirely, or restoring it, is one line either way. */
html[lang^="fr"] .ml-legal-governs{display:none !important}