/* ============================================================
   MAXIMIZING MUSCLE HYPERTROPHY  —  Science of Water (SOW 08)
   Isolated page styles. All selectors namespaced under .mmh
   so nothing here can touch global site CSS.
   Built section-by-section from approved-sections-1-3.png (locked)
   + CLAUDE-MAX-HYPERTROPHY-COMPLETE-BRIEF.md.
   ============================================================ */

/* ---- Brief's primary faces, now LOCAL (uploaded to assets/fonts) ---- */
@font-face{font-family:'Bebas Neue';src:url('../fonts/BebasNeue-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('../fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');font-weight:100 900;font-style:italic;font-display:swap;}

/* ---- Local fallback faces ---- */
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');font-weight:100 900;font-style:italic;font-display:swap;}
@font-face{font-family:'AntonLocal';src:url('../fonts/Anton-Regular.ttf') format('truetype');font-weight:400;font-display:swap;}
@font-face{font-family:'DMSerifLocal';src:url('../fonts/DMSerifDisplay-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'DMSerifLocal';src:url('../fonts/DMSerifDisplay-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'CabinLocal';src:url('../fonts/Cabin-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'CabinLocal';src:url('../fonts/Cabin-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'CabinLocal';src:url('../fonts/Cabin-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'CabinLocal';src:url('../fonts/Cabin-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'CabinLocal';src:url('../fonts/Cabin-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'LibreBaskervilleLocal';src:url('../fonts/LibreBaskerville-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'LibreBaskervilleLocal';src:url('../fonts/LibreBaskerville-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'LibreBaskervilleLocal';src:url('../fonts/LibreBaskerville-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'ManropeLocal';src:url('../fonts/Manrope-Regular.ttf') format('truetype');font-weight:400;font-display:swap;}
@font-face{font-family:'ManropeLocal';src:url('../fonts/Manrope-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap;}
@font-face{font-family:'ManropeLocal';src:url('../fonts/Manrope-Bold.ttf') format('truetype');font-weight:700;font-display:swap;}

.mmh{
  /* palette (brief §3) */
  --navy:#000033;
  --ink:#061426;
  --aqua:#00AEEF;
  --aqua-soft:#7FD1F0;      /* softer, less neon — used for all icon artwork */
  --orange:#F5A623;
  --white:#FFFFFF;
  --soft:#F4F7FA;
  --lgray:#D8E0E8;
  --mgray:#9AA8B7;
  --pale-aqua:#EAF6FA;
  --ivory:#F5F1EA;
  /* field navy measured off the approved rendering (#041525-#061829);
     matches the brief's Ink Navy token exactly */
  --field:#061426;

  /* type stacks (brief §4) — exact font first, local fallback next */
  --f-display:'Bebas Neue','AntonLocal',sans-serif;
  --f-serif:'DMSerifLocal',Georgia,serif;   /* no Cormorant on this page */
  --f-body:'Inter','ManropeLocal',system-ui,-apple-system,sans-serif;
  --f-eyebrow:'Montserrat',sans-serif;
  --f-quote:'LibreBaskervilleLocal',Georgia,serif;   /* pull quotes */
  --f-editorial:'DMSerifLocal',Georgia,serif;        /* transition headline only */
  --f-founder:'CabinLocal',system-ui,sans-serif;     /* founder's voice (SOW rule) */

  --edge:min(1200px, calc(100% - 40px));

  background:var(--navy);
  color:var(--soft);
  font-family:var(--f-body);
  /* `overflow-x:hidden` forces overflow-y to compute as `auto`, turning <main>
     into a scroll container — which silently broke the site-wide
     IntersectionObserver in main.js, leaving every section <h2> stuck at
     opacity:0. `clip` contains the full-bleed images without that side effect. */
  overflow-x:clip;
}

.mmh *{box-sizing:border-box;}

/* ============================================================
   HERO  (brief §7 — locked composition, replacement photo)
   ============================================================ */
.mmh-hero{
  position:relative;
  width:100%;              /* FULL BLEED — spans the whole viewport */
  margin:0;
  height:max(560px, calc(100vh - var(--nav-h)));   /* one screen tall — non-scroll on desktop/27"; hard cap, not a floor */
  background:var(--field);                         /* the one navy the whole page shares */
  overflow:hidden;   /* safety net — content is vh-sized to fit, this just guarantees no page scroll if it ever doesn't */
  display:flex;
  isolation:isolate;
}
.mmh-hero__picture{display:contents;}
.mmh-s2__picture{display:contents;}
/* intrinsic width/height attrs reserve the aspect ratio (no layout shift, and
   lazy-loading can measure the box) — CSS still controls the rendered size */
.mmh-hero__img,.mmh-s2__photo{max-width:none;}
.mmh-hero__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% center;   /* source is pre-cropped (subject left, no Buddha, water-forward); AR is close to the hero's, so minimal cover-crop either way */
  z-index:0;
  /* Feathered with an alpha mask rather than covered by a navy scrim, so the
     faded right column and bottom are the page's REAL #000033 — the navy then
     reads identically here and in every section below. */
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, #000 50%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.1) 84%, transparent 93%),
    linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.4) 78%, transparent 96%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, #000 0%, #000 50%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.1) 84%, transparent 93%),
    linear-gradient(180deg, #000 0%, #000 52%, rgba(0,0,0,.4) 78%, transparent 96%);
  mask-composite:intersect;
}
/* The splash stays ON FULL DISPLAY — no filter over it. The photo already
   carries its own baked navy gradient on the right; this scrim only nudges
   the far-right darker for text legibility and adds a slim top band for the
   masthead, both kept off the splash (brief §7 — "use the photo's fade"). */
.mmh-hero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* the mask does the blending now; this only steadies contrast under the copy */
  background:
    /* Copy column begins at 51.8%. Stays clear of the splash until 46%, then ramps
       hard so the "M" of MAXIMIZING sits on ground as dark as the "M" of MUSCLE. */
    linear-gradient(90deg,
      rgba(6,20,38,0) 46%, rgba(6,20,38,.44) 52%,
      rgba(6,20,38,.70) 62%, rgba(6,20,38,.80) 100%),
    /* Statement box top sits 31.3% up from the bottom — hold the density that far
       so its first line reads as strongly as its last, and the aqua rule defines. */
    linear-gradient(0deg,
      rgba(6,20,38,.78) 0%, rgba(6,20,38,.74) 18%, rgba(6,20,38,.60) 32%,
      rgba(6,20,38,.26) 44%, rgba(6,20,38,0) 58%);
}
.mmh-hero__content{
  position:relative; z-index:2;
  width:100%; max-width:1600px; margin-inline:auto;
  display:flex; flex-direction:column;
  /* top/bottom padding is vh-driven (it eats into the fixed one-screen hero height
     directly); horizontal stays vw — width never constrains this layout's fit. */
  padding-top:clamp(14px,3vh,42px);
  padding-inline:clamp(24px,4vw,72px);
  padding-bottom:clamp(14px,3vh,42px);
}

/* right-side title block — narrower box pushes it (and the copy under it)
   further right, off the busiest part of the splash */
.mmh-hero__body{
  width:min(48%, 560px);
  margin-left:auto;
  margin-top:clamp(20px,7vh,120px);
}
.mmh-hero__eyebrow{
  font-family:var(--f-eyebrow); font-weight:600;
  color:var(--white);
  text-transform:uppercase; letter-spacing:.19em;
  font-size:clamp(11px,1.6vh,15px);
  margin:0 0 clamp(8px,1.8vh,18px);
}
.mmh-hero__title{
  font-family:var(--f-display);
  color:var(--white);
  text-transform:uppercase;
  font-weight:400;
  /* driven by vh (not vw) — a wide-but-short window (real browser chrome eating
     into a 27" screen's usable height) must shrink the title, or it overflows
     past one screen instead of the window narrowing it. */
  font-size:clamp(38px,12.5vh,118px);
  line-height:.88;
  letter-spacing:-.01em;   /* condensed — tighter than the brief's default tracking */
  margin:0;
}
.mmh-hero__kicker{
  font-family:var(--f-eyebrow); font-weight:800;
  color:var(--orange);
  text-transform:uppercase; letter-spacing:.14em;
  font-size:clamp(12px,1.8vh,17px);
  margin:clamp(4px,.9vh,8px) 0 0;
}
.mmh-hero__lede{
  font-family:var(--f-body);
  color:var(--soft);
  font-size:clamp(16px,1.95vh,20px);   /* 16px floor — brief §16 mobile body-copy minimum */
  line-height:1.44;
  margin:clamp(10px,2vh,20px) 0 0;
  max-width:42ch;
}
.mmh-hero__lede + .mmh-hero__lede{margin-top:clamp(8px,1.6vh,15px);}

/* feature statement box, centred across lower hero */
.mmh-hero__statement{
  position:relative; z-index:2;
  margin:auto auto 0;
  margin-top:clamp(16px,4vh,64px);
  /* sizes to the copy so the authored <br> is the ONLY break — the second line
     was 620px against a 590px inner width, which forced "WEIGHT." onto a 3rd line */
  width:fit-content;
  max-width:100%;
  margin-inline:auto;
  border:0;
  background:transparent;            /* no blur/box fill — the bottom bleed carries the contrast */
  padding-block:clamp(12px,2.4vh,26px);
  padding-inline:clamp(18px,2vw,32px);
  text-align:center;
}
.mmh-hero__statement::after{       /* short centred rule BELOW the statement */
  content:""; display:block;
  width:clamp(34px,3.4vw,54px); height:2px;
  background:#7FD1F0;                /* lighter blue — full aqua pulled the eye */
  margin:clamp(11px,1.3vh,18px) auto 0;
}
.mmh-hero__statement p{
  font-family:var(--f-eyebrow); font-weight:600;
  color:var(--white);
  text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(15px,2.6vh,25px);
  line-height:1.26; margin:0;
}
.mmh-hero__statement .hl{color:var(--orange);}

.mmh-hero__credit{
  /* sits just under the point where the bottom bleed has swallowed the water,
     rather than floating in the solid navy at the very bottom edge */
  position:absolute; left:clamp(16px,2vw,26px); bottom:12.5%; z-index:3;
  /* SITE CREDIT STANDARD, set 2026-07-29. This is a full-page hero — measured
     793px, 92% of a 860px viewport — so 11.52px / 600, the site default credit.
     Was 11px with no weight declared (inheriting 500).
     font-family is Montserrat, NOT var(--f-body): --f-body is Inter/Manrope,
     which left this credit in a different face from every other credit on the
     site. Credits are chrome, not editorial voice — they stay in the sans
     regardless of the page's body font. Literal stack because this file does
     not define --sans. */
  font-family:'Montserrat',Arial,sans-serif;
  font-size:11.52px; font-weight:600; letter-spacing:.03em;
  color:rgba(255,255,255,.55);
  text-shadow:0 1px 3px rgba(6,20,38,.8);
}

/* ---------- tablet / narrow: image on top, copy below (brief §16) ----------
   Below 900px the cinematic overlay gets cramped, so we switch to a stacked
   editorial treatment: photo band on top, masthead + title + copy on navy below. */
@media (max-width:900px){
  .mmh-hero{
    width:100%; margin-top:0;
    height:auto; flex-direction:column; overflow:visible;
  }
  .mmh-hero__img{
    position:relative;
    /* single source of truth for the band height — the credit below is pinned to
       it, so both must use the SAME expression (a bare min() ignored the 300px
       floor and stranded the credit mid-splash) */
    height:max(min(56vw,440px), 300px);
    object-position:40% center;
  }
  .mmh-hero__scrim{
    /* bottom of the band goes near-solid navy so the credit always has a dark ground */
    background:linear-gradient(180deg, rgba(6,20,38,.18) 0%, rgba(6,20,38,0) 28%, rgba(6,20,38,.55) 88%, rgba(6,20,38,.85) 100%);
    height:max(min(56vw,440px), 300px);
  }
  .mmh-hero__content{padding:clamp(24px,4vw,34px) clamp(22px,4vw,40px) 38px;}
  .mmh-hero__body{width:100%; margin:0;}
  .mmh-hero__title{font-size:clamp(46px,9vw,76px);}
  .mmh-hero__lede{max-width:62ch;}
  .mmh-hero__statement{margin-top:28px; width:100%; max-width:none;}
  .mmh-hero__statement::after{       /* short centred rule BELOW the statement */
  content:""; display:block;
  width:clamp(34px,3.4vw,54px); height:2px;
  background:#7FD1F0;                /* lighter blue — full aqua pulled the eye */
  margin:clamp(11px,1.3vh,18px) auto 0;
}
.mmh-hero__statement p{white-space:normal;}   /* wrap freely once stacked */
  .mmh-hero__credit{
    left:clamp(16px,4vw,40px); bottom:auto;
    /* same expression as the image band above, so it pins to the band's real
       bottom edge (dark ground) instead of floating over the splash */
    top:calc(max(min(56vw,440px), 300px) - 24px);
    color:rgba(255,255,255,.78);
    text-shadow:0 1px 3px rgba(6,20,38,.9);
  }
}

/* ---------- small mobile ---------- */
@media (max-width:620px){
  .mmh-hero__title{font-size:clamp(42px,12vw,60px);}
  .mmh-hero__lede{max-width:100%;}

  /* The feature statement is ALL CAPS: at 22px/600 it ran six dense lines on a
     phone and out-shouted the body copy. Sized to sit just under the lede and
     given more leading, since caps have no ascenders to guide the eye. */
  .mmh-hero__statement p{
    font-size:15.5px;
    line-height:1.42;
    letter-spacing:.035em;
  }
  .mmh-hero__statement{padding-block:16px;}

  /* ~33 characters per line on a phone — the tightened desktop leading reads
     cramped at that measure, so give it back a little air here only. */
  .mmh-hero__lede{line-height:1.54;}

}

/* ============================================================
   SHARED SECTION FURNITURE
   ============================================================ */
.mmh-wrap{
  width:min(1320px, calc(100% - clamp(40px,8vw,140px)));
  margin-inline:auto;
}
.mmh-eyebrow{
  font-family:var(--f-eyebrow); font-weight:600;
  text-transform:uppercase; letter-spacing:.2em;
  font-size:clamp(11px,.88vw,12.5px);
  margin:0 0 clamp(8px,.9vw,13px);
  display:flex; align-items:center; gap:14px;
}
.mmh-eyebrow::after{                 /* short rule trailing the label */
  content:""; flex:0 0 clamp(28px,4vw,64px); height:1px;
  background:currentColor; opacity:.55;
}
.mmh-eyebrow--orange{color:var(--orange);}
.mmh-eyebrow--aqua{color:var(--aqua-soft);}

/* ============================================================
   SECTION 1 — THE SCIENCE IS CLEAR   (brief §8)
   Continuous navy, one restrained horizontal row of four
   principles. Typography outranks the icons (brief), thin
   aqua dividers, compact navy-on-navy reflection panel.
   ============================================================ */
.mmh-s1{
  position:relative;
  /* Flat field navy, no wash, no tonal drift — Section 2 opens on the same
     colour so the river runs unbroken. */
  background:var(--field);
  /* the hero's height is a fractional px (vh-derived), so rounding could leave a
     1px sliver of the page background at the join */
  margin-top:-1px;
  /* slightly MORE bottom than top so the section reads as finished before the
     next begins — it was 59/41 and felt cramped against the magnifier */
  padding:clamp(44px,5vw,84px) 0 clamp(50px,5.6vw,94px);
}
/* Divider at the hero boundary — same editorial hairline used at the next
   section, eased off at both ends. */
.mmh-s1::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:2;
  background:linear-gradient(90deg,
    rgba(127,209,240,0) 0%, rgba(127,209,240,.42) 8%,
    rgba(127,209,240,.42) 92%, rgba(127,209,240,0) 100%);
  pointer-events:none;
}
.mmh-s1__title{
  font-family:var(--f-display);
  color:var(--white);
  text-transform:uppercase;
  font-weight:400;
  font-size:clamp(34px,4.4vw,66px);   /* peer size, shared with the s3 title */
  line-height:.92; letter-spacing:.01em;
  margin:0 0 clamp(9px,1vw,14px);
}
.mmh-s1__intro{
  font-family:var(--f-body);
  color:var(--lgray);
  font-size:clamp(16px,1.15vw,19px);
  line-height:1.5;
  max-width:68ch;
  margin:0 0 clamp(32px,3.8vw,58px);
}

/* ---- four principles ---- */
/* Every card carries the SAME padding so all four text measures match; the grid
   is pulled outward by that padding so cards 1 and 4 still line up with the
   section margins. Zeroing the outer padding instead made 1 and 4 ~19% wider. */
.mmh-s1__grid{
  --cardpad:clamp(24px,3vw,46px);
  list-style:none; padding:0;
  margin:0 calc(-1 * var(--cardpad));
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0;
}
.mmh-principle{
  padding:0 var(--cardpad);
  border-left:1px solid rgba(127,209,240,.22);
}
.mmh-principle:first-child{border-left:0;}

/* centred, and scaled up to the rendering's icon-to-column ratio (~25%) */
.mmh-principle__icon{
  display:flex; align-items:center; justify-content:center;
  height:clamp(56px,5.4vw,82px);
  margin:0 auto clamp(13px,1.5vw,20px);
  color:var(--aqua-soft);            /* inline SVGs inherit this via currentColor */
}
.mmh-principle__icon img,
.mmh-principle__icon svg{
  height:100%; width:auto; display:block;
}
/* lighter overall weight across the row: thinner strokes on the inline SVGs,
   and the flat PNG line art eased back so it doesn't out-weigh them */
.mmh-principle__icon svg{stroke-width:1.05;}
.mmh-principle__icon img{opacity:1;}   /* full strength: .72 made the PNG icons read as a different blue than the inline SVGs */

.mmh-principle__label{
  font-family:var(--f-eyebrow); font-weight:700;
  color:var(--aqua-soft);
  text-transform:uppercase; letter-spacing:.15em;
  font-size:clamp(12px,1.02vw,14.5px);
  line-height:1.24;
  margin:0 0 clamp(12px,1.4vw,18px);
  text-align:center;
}
.mmh-principle__copy{
  font-family:var(--f-body);
  color:var(--soft);
  font-size:clamp(16px,1.18vw,18.5px);
  line-height:1.62;
  margin:0;
}

/* ---- reflection panel (navy on navy, single aqua rule) ---- */
.mmh-s1__reflect{
  /* the CARD is centred and narrower; its contents stay left-aligned */
  margin:clamp(28px,3.3vw,50px) auto 0;
  /* no vertical padding — the aqua rule then spans exactly the text block's
     height rather than overshooting it */
  padding:0 clamp(22px,2.6vw,40px);
  background:transparent;              /* no lighter panel — sits straight on the field */
  width:min(880px, 100%);
  border-left:2px solid var(--aqua-soft);   /* the brief's single aqua rule */
  display:flex; align-items:center; text-align:left;   /* icon centred against the copy block */
  gap:clamp(18px,2.2vw,32px);
}
.mmh-s1__reflect-icon{
  flex:0 0 auto; color:var(--aqua-soft);
  height:clamp(46px,4.4vw,68px);
}
.mmh-s1__reflect-icon img{height:100%; width:auto; display:block; opacity:1; transform:scaleX(-1);}  /* face toward the copy */
.mmh-s1__reflect-text{min-width:0;}
/* not a pull quote — sans-serif emphasis (brief §4 "bold body emphasis"),
   not the Cormorant italic reserved for actual pull quotes */
.mmh-s1__reflect-lead{
  font-family:var(--f-body); font-weight:600;
  color:var(--white);
  font-size:clamp(18px,1.65vw,25px);
  line-height:1.26; letter-spacing:-.005em;
  margin:0 0 clamp(4px,.45vw,7px);
}
.mmh-s1__reflect-body{
  font-family:var(--f-body);
  color:var(--lgray);
  font-size:clamp(16px,1.15vw,18.5px);
  line-height:1.5;
  max-width:70ch;
  margin:0;
}

/* ---------- tablet: 4 across → 2×2 (brief §16) ---------- */
@media (max-width:900px){
  .mmh-s1__grid{grid-template-columns:repeat(2,1fr); row-gap:clamp(34px,5vw,48px);}
  /* 16px body-copy floor applies to tablet too, not just phones (brief §16) */
  .mmh-principle__copy{font-size:16.5px; line-height:1.6;}
  .mmh-s1__intro{font-size:16px;}
  .mmh-s1__reflect-body{font-size:16px;}
  .mmh-principle:nth-child(odd){border-left:0;}
}

/* ---------- mobile: stacked modules separated by thin rules ---------- */
@media (max-width:620px){
  .mmh-s1__grid{grid-template-columns:1fr; row-gap:0;}
  .mmh-s1__grid{margin:0;}
  .mmh-principle{
    border-left:0; padding:clamp(24px,5vw,30px) 0;
    border-top:1px solid rgba(127,209,240,.22);
  }
  .mmh-principle:first-child{border-top:0; padding-top:0;}
  .mmh-principle:last-child{padding-bottom:0;}
  .mmh-principle__copy{font-size:16px;}
  .mmh-s1__intro{font-size:16px;}
}

/* ============================================================
   SECTION 2 — WHAT DID THE RESEARCH EXAMINE?   (brief §9)
   Stays in the continuous navy system (explicitly NOT a white
   page). Left = editorial summary + WHO/WHAT/WHY rows.
   Right = magnifier photo, pull quote, published-review card.
   Closes on the pale-aqua Study Boundaries panel.
   ============================================================ */
.mmh-s2{
  position:relative;
  overflow:hidden;                       /* lets the photo bleed off the edges */
  background:var(--field);               /* identical to the hero and S1 */
  padding:clamp(26px,3vw,46px) 0 clamp(30px,3.4vw,54px);
}
.mmh-s2 .mmh-wrap{position:relative; z-index:1;}
/* Section divider. Sits above the photo (which bleeds to the very top edge),
   so the line runs unbroken across the full width as it does in the rendering.
   Eased off at both ends so it reads as an editorial hairline, not a border. */
.mmh-s2::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:2;
  background:linear-gradient(90deg,
    rgba(127,209,240,0) 0%, rgba(127,209,240,.42) 8%,
    rgba(127,209,240,.42) 92%, rgba(127,209,240,0) 100%);
  pointer-events:none;
}
.mmh-s2__title{
  font-family:var(--f-display);
  color:var(--white);
  text-transform:uppercase; font-weight:400;
  font-size:clamp(34px,4.4vw,66px);   /* peer size, shared with the s2 title */
  line-height:.92; letter-spacing:.01em;
  margin:0 0 clamp(18px,2.2vw,30px);
}

.mmh-s2__split{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,4.5vw,72px);
  align-items:start;
}

/* ---- left: summary + rows ---- */
.mmh-s2__summary{
  padding-bottom:clamp(16px,2vw,26px);
  margin-bottom:clamp(16px,2vw,26px);
  border-bottom:1px solid rgba(127,209,240,.2);
}
.mmh-s2__summary-icon{
  flex:0 0 auto; color:var(--aqua-soft);
  height:clamp(34px,3.2vw,46px); margin-top:3px;
}
.mmh-s2__summary-icon svg{height:100%; width:auto; display:block;}
.mmh-s2__summary p{
  font-family:var(--f-body);
  color:var(--lgray);
  font-size:clamp(16px,1.12vw,18.5px);
  line-height:1.5; margin:0;
}

.mmh-s2__rows{margin:0; padding:0;}
.mmh-row{
  display:flex; align-items:flex-start; gap:clamp(14px,1.7vw,24px);
  padding:clamp(9px,1.1vw,14px) 0;
  border-top:1px solid rgba(127,209,240,.14);
}
.mmh-row:first-child{border-top:0; padding-top:0;}
.mmh-row__icon{
  flex:0 0 auto; color:var(--aqua-soft);
  height:clamp(30px,2.7vw,40px); margin-top:2px;
}
.mmh-row__icon img,
.mmh-row__icon svg{height:100%; width:auto; display:block; opacity:1;}
.mmh-row dt{
  font-family:var(--f-eyebrow); font-weight:700;
  color:var(--aqua-soft);
  text-transform:uppercase; letter-spacing:.15em;
  font-size:clamp(11.5px,.95vw,13.5px);
  margin:0 0 clamp(2px,.3vw,4px);
}
.mmh-row dd{
  font-family:var(--f-body);
  color:var(--soft);
  font-size:clamp(15px,1.02vw,16px);      /* dense body */
  line-height:1.4; margin:0;
}

/* ---- right: photo, quote, review card ---- */
/* No baked-in bleed: the no-bleed source is feathered here with an alpha mask,
   so the section's own #000033 shows through the faded edges. Nothing to colour-
   match, and it stays correct if the background gradient ever changes. */
.mmh-s2__photo{
  display:block;
  /* global `img{max-width:100%}` was capping this and killing the bleed */
  max-width:none;
  width:calc(100% + clamp(90px,12vw,260px));
  height:auto;
  max-height:clamp(280px,22vw,400px);   /* was 571px at 1080p — the overflow driver */
  object-fit:cover;
  object-position:52% 42%;
  margin-top:calc(-1 * clamp(26px,3vw,46px));            /* bleed up to the section's top rule */
  margin-left:calc(-1 * clamp(10px,2vw,44px));           /* and leftward, under the copy */
  margin-right:calc(-1 * clamp(90px,12vw,260px));        /* runs off the right edge */
  margin-bottom:clamp(16px,2vw,26px);
  filter:brightness(.9);
  /* radial fades away from the top-right, so left AND bottom-right both dissolve —
     no hard cut on any edge, which is why no new rendering is needed */
  /* radial dissolves left + lower-right; the second layer forces alpha to 0 at the
     bottom edge, so the photo can never terminate in a hard floating cut */
  /* left edge dissolves into the copy, bottom eases off; the RIGHT stays fully
     opaque so the photo bleeds off the page instead of stopping in mid-air */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, rgba(0,0,0,.85) 38%, #000 55%),
    linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.5) 84%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, rgba(0,0,0,.85) 38%, #000 55%),
    linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.5) 84%, transparent 100%);
  mask-composite:intersect;
}
/* Matches the rendering: a dark card carrying a large geometric quote mark,
   set in SANS-SERIF — the italic serif with only a vertical rule read flat. */
.mmh-s2__quote{
  margin:0 0 clamp(16px,1.9vw,26px);
  padding:clamp(18px,2.1vw,28px) clamp(20px,2.3vw,32px);
  background:rgba(6,20,38,.72);
  border:1px solid rgba(127,209,240,.22);
  display:flex; align-items:flex-start; gap:clamp(12px,1.4vw,20px);
}
.mmh-s2__quote-mark{
  flex:0 0 auto;
  color:var(--aqua-soft);
  height:clamp(26px,2.7vw,40px);
  margin-top:.28em;
  display:block;
}
.mmh-s2__quote-mark svg{height:100%; width:auto; display:block;}
.mmh-s2__quote p{
  font-family:var(--f-quote); font-weight:700;
  color:var(--white);
  font-size:clamp(17px,1.72vw,25px);
  line-height:1.3; letter-spacing:-.005em; margin:0;
}
.mmh-s2__quote .hl{color:var(--aqua-soft);}

.mmh-s2__review{
  padding:clamp(18px,2.1vw,26px) clamp(18px,2.2vw,28px);
  background:rgba(6,20,38,.5);
  border:1px solid rgba(127,209,240,.24);
}
.mmh-s2__review-label{
  font-family:var(--f-eyebrow); font-weight:600;
  color:var(--aqua-soft);            /* orange reserved for section openings */
  text-transform:uppercase; letter-spacing:.2em;
  font-size:clamp(11px,.9vw,12.5px);
  margin:0 0 clamp(9px,1vw,13px);
}
.mmh-s2__review-title{
  font-family:var(--f-body); font-weight:600;
  color:var(--white);
  font-size:clamp(15px,1.02vw,16px);      /* dense body */
  line-height:1.34; margin:0 0 clamp(8px,.9vw,12px);
}
.mmh-s2__review-meta{
  font-family:var(--f-body);
  color:var(--mgray);
  font-size:clamp(12.5px,.9vw,14px);
  line-height:1.34; margin:0;
}

/* ---- pale-aqua study boundaries panel (brief §9) ---- */
.mmh-s2__bounds{
  margin-top:clamp(26px,3vw,44px);
  background:transparent;
  /* border-LEFT only, echoing s2's reflection panel — s3 had three framed boxes */
  border-left:2px solid var(--aqua-soft);
  padding:clamp(4px,.5vw,8px) 0 clamp(4px,.5vw,8px) clamp(20px,2.4vw,34px);
}
.mmh-s2__bounds-label{
  font-family:var(--f-eyebrow); font-weight:600;
  color:var(--aqua-soft);            /* orange reserved for section openings */
  text-transform:uppercase; letter-spacing:.2em;
  font-size:clamp(11px,.9vw,12.5px);
  margin:0 0 clamp(14px,1.6vw,20px);
}
.mmh-s2__bounds ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:clamp(12px,1.5vw,20px) clamp(26px,3.2vw,52px);
}
.mmh-s2__bounds li{
  position:relative; padding-left:20px;
  font-family:var(--f-body);
  color:var(--soft);
  font-size:clamp(15px,1.02vw,16px);      /* dense body */
  line-height:1.4;
}
.mmh-s2__bounds li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:8px; height:8px; background:var(--aqua-soft);
}

/* ---------- tablet ---------- */
@media (max-width:900px){
  .mmh-s2__split{grid-template-columns:1fr; gap:clamp(30px,4vw,44px);}
  .mmh-s2__right{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,30px); align-items:start;}
  /* Stacked: no copy sits beside the photo, so the desktop left-dissolve is wrong
     and a full-height slab overpowers the section. Becomes a contained band that
     bleeds both edges and eases out at the bottom instead. */
  .mmh-s2__photo{
    grid-column:1 / -1;
    width:calc(100% + clamp(56px,14vw,180px));
    margin-left:calc(-1 * clamp(28px,7vw,90px));
    margin-right:calc(-1 * clamp(28px,7vw,90px));
    margin-top:0;
    margin-bottom:clamp(4px,1vw,10px);
    height:clamp(190px,30vw,300px);
    object-fit:cover;
    object-position:58% 45%;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.45) 84%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.45) 84%, transparent 100%);
    -webkit-mask-composite:source-over;
            mask-composite:add;
  }
  .mmh-s2__quote{margin-bottom:0;}
  .mmh-s2__summary p{font-size:16px;}
  .mmh-row dd{font-size:16px;}
  .mmh-s2__bounds li{font-size:16px;}
}

/* ---------- mobile ---------- */
@media (max-width:620px){
  .mmh-s2__right{grid-template-columns:1fr;}
  .mmh-s2__bounds ul{grid-template-columns:1fr;}
  .mmh-s2__summary{gap:14px;}
  .mmh-row{gap:14px;}
}


/* ============================================================
   LIGHT FIELDS  (brief §11-§13, §15)
   The river widens: navy holds through the science, opens into
   light for application + the human voice, returns to navy for
   the final beat, closes quiet on soft white.
   ============================================================ */
.mmh-light{color:var(--navy);}
.mmh-light .mmh-eyebrow--orange{color:#C9761A;}   /* orange darkened for contrast on light */

/* shared editorial headline (serif, sentence case) */
.mmh-serif-title{
  font-family:var(--f-editorial);
  font-weight:400;
  font-size:clamp(28px,3.4vw,50px);
  line-height:1.08; letter-spacing:-.01em;
  margin:0 0 clamp(16px,1.9vw,26px);
  max-width:22ch;
}
.mmh-light .mmh-serif-title{color:var(--navy);}
.mmh-s3 .mmh-serif-title{color:var(--white); max-width:20ch;}
.mmh-serif-title--sm{font-size:clamp(24px,2.6vw,38px); max-width:none;}

.mmh-body{
  font-family:var(--f-body); font-weight:500;
  font-size:clamp(16px,1.12vw,18px);
  line-height:1.55;
  max-width:64ch;
  margin:0 0 clamp(14px,1.6vw,22px);
}
.mmh-light .mmh-body{color:#16273B;}
.mmh-body--strong{font-weight:700; color:var(--navy);}

.mmh-subhead{
  font-family:var(--f-eyebrow); font-weight:700;
  text-transform:uppercase; letter-spacing:.18em;
  font-size:clamp(11px,.9vw,12.5px);
  color:#C9761A;
  margin:clamp(20px,2.2vw,30px) 0 clamp(14px,1.6vw,20px);
}

/* ============================================================
   SECTION 3 — WHAT THE REVIEW HIGHLIGHTS   (navy, brief §10)
   No cards. Numerals carry the rhythm, thin rules divide.
   ============================================================ */
.mmh-s3{
  position:relative;
  background:var(--field);
  padding:clamp(40px,4.6vw,76px) 0 clamp(46px,5.2vw,86px);
}
.mmh-s3::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:2;
  background:linear-gradient(90deg,
    rgba(127,209,240,0) 0%, rgba(127,209,240,.42) 8%,
    rgba(127,209,240,.42) 92%, rgba(127,209,240,0) 100%);
  pointer-events:none;
}
.mmh-s3__lead{
  font-family:var(--f-body); font-weight:500;
  color:var(--lgray);
  font-size:clamp(16px,1.12vw,18px);
  line-height:1.5;
  max-width:62ch;
  margin:0 0 clamp(30px,3.6vw,54px);
}
.mmh-s3__grid{
  --cardpad:clamp(18px,2.2vw,34px);
  list-style:none; padding:0;
  margin:0 calc(-1 * var(--cardpad));
  display:grid; grid-template-columns:repeat(4,1fr);
}
.mmh-insight{
  padding:0 var(--cardpad);
  border-left:1px solid rgba(127,209,240,.2);
}
.mmh-insight:first-child{border-left:0;}
.mmh-insight__num{
  font-family:var(--f-display);
  color:var(--orange);
  font-size:clamp(52px,6vw,92px);      /* brief §10 asks for LARGE numerals */
  line-height:.86; letter-spacing:.01em;
  margin:0 0 clamp(10px,1.1vw,16px);
}
.mmh-insight__label{
  font-family:var(--f-eyebrow); font-weight:700;
  color:var(--aqua-soft);
  text-transform:uppercase; letter-spacing:.15em;
  font-size:clamp(11.5px,.95vw,13.5px);
  line-height:1.22;
  margin:0 0 clamp(8px,.9vw,12px);
  padding-top:clamp(8px,.9vw,12px);
  border-top:1px solid rgba(127,209,240,.28);
}
.mmh-insight__copy{
  font-family:var(--f-body); font-weight:500;
  color:var(--soft);
  font-size:clamp(15px,1.02vw,16px);
  line-height:1.5; margin:0;
}

/* ============================================================
   SECTION 4 — WHAT THIS MEANS FOR AQUAFIT SPORTS  (pale aqua)
   ============================================================ */
.mmh-s4{
  position:relative;
  background:var(--pale-aqua);
  padding:clamp(112px,12vw,164px) 0 clamp(38px,4vw,60px);
}
.mmh-s4__vars{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(22px,2.8vw,44px);
}
.mmh-var__icon{
  display:flex; align-items:center; justify-content:center;
  width:clamp(44px,3.8vw,56px); height:clamp(44px,3.8vw,56px);
  border-radius:50%;
  background:#FFFFFF;
  color:var(--navy);
  margin:0 0 clamp(10px,1.1vw,14px);
}
.mmh-var__icon svg{width:56%; height:56%; display:block; stroke-width:2.6;}
.mmh-var h3{
  font-family:var(--f-eyebrow); font-weight:700;
  color:var(--navy);
  text-transform:uppercase; letter-spacing:.15em;
  font-size:clamp(11.5px,.95vw,13.5px);
  line-height:1.22; margin:0 0 clamp(7px,.8vw,11px);
}
.mmh-var p{
  font-family:var(--f-body); font-weight:500;
  color:#16273B;
  font-size:clamp(15px,1.02vw,16px);
  line-height:1.45; margin:0;
}
.mmh-inset-quote{
  margin:clamp(22px,2.4vw,34px) 0 0;
  padding:clamp(18px,2vw,26px) clamp(22px,2.6vw,36px);
  background:#FFFFFF;
  border-left:3px solid var(--orange);
}
.mmh-inset-quote p{
  font-family:var(--f-quote); font-weight:700;
  color:var(--navy);
  font-size:clamp(17px,1.6vw,23px);
  line-height:1.4; margin:0;
  max-width:60ch;
}

/* ============================================================
   SECTION 5 — FOUNDER PERSPECTIVE  (warm ivory, orange strip)
   ============================================================ */
.mmh-s5{
  position:relative;
  background:var(--ivory);
  padding:clamp(74px,8vw,116px) 0 clamp(52px,6vw,92px);
}
.mmh-s5::before{      /* narrow orange strip at the left edge (brief §12) */
  content:""; position:absolute; top:0; bottom:0; left:0;
  width:clamp(4px,.5vw,7px); background:var(--orange);
}
.mmh-s5__closing{
  font-family:var(--f-quote); font-weight:700;
  color:var(--navy);
  font-size:clamp(20px,2.3vw,34px);
  line-height:1.28; letter-spacing:-.01em;
  margin:clamp(24px,2.9vw,42px) 0 0;
  max-width:24ch;
}

/* ============================================================
   SECTION 6 — THE LARGER LESSON  (white, compact + reflective)
   ============================================================ */
.mmh-s6{
  position:relative;
  background:#FFFFFF;
  padding:clamp(74px,8vw,116px) 0 clamp(46px,5.2vw,78px);
}

/* ============================================================
   SECTION 7 — FINAL TAKEAWAY  (navy, one rule, nothing else)
   ============================================================ */
/* Final takeaway — folded into The Larger Lesson rather than owning a section.
   Libre Baskerville, matching the page's other pull quote. */
.mmh-takeaway{
  margin:clamp(30px,3.6vw,52px) auto 0;
  padding:clamp(24px,2.8vw,38px) clamp(24px,2.8vw,40px);
  background:var(--field);
  max-width:none;
  text-align:center;
}
.mmh-takeaway p{
  font-family:var(--f-quote); font-weight:700;
  color:var(--white);
  font-size:clamp(19px,2.1vw,31px);
  line-height:1.3; letter-spacing:-.01em;
  margin:0;
}
.mmh-takeaway p + p{margin-top:clamp(6px,.7vw,10px); color:var(--aqua-soft);}

/* ============================================================
   SECTION 8 — RESEARCH REFERENCES  (soft white, restrained)
   ============================================================ */
.mmh-s8{
  position:relative;
  background:var(--soft);
  padding:clamp(74px,8vw,116px) 0 clamp(52px,6vw,96px);
}
.mmh-refs{
  list-style:none; margin:0; padding:0;
  border-top:1px solid rgba(6,20,38,.14);
}
.mmh-refs li{
  display:flex; gap:clamp(14px,1.7vw,26px);
  padding:clamp(15px,1.8vw,24px) 0;
  border-bottom:1px solid rgba(6,20,38,.14);
}
.mmh-refs__n{
  flex:0 0 auto;
  font-family:var(--f-display);
  color:var(--orange);
  font-size:clamp(26px,2.3vw,38px);
  line-height:1; padding-top:.02em;
}
.mmh-refs p{
  font-family:var(--f-body); font-weight:400;
  color:#2B3B4D;
  font-size:clamp(13.5px,.95vw,15px);
  line-height:1.55; margin:0;
}
.mmh-refs em{font-style:italic; color:var(--navy); font-weight:600;}
.mmh-refs a{color:#1B6C93; text-decoration:none; border-bottom:1px solid rgba(27,108,147,.35); word-break:break-word;}
.mmh-refs a:hover{border-bottom-color:#1B6C93;}

.mmh-boundary{
  margin-top:clamp(26px,3.1vw,46px);
  padding-left:clamp(18px,2.1vw,30px);
  border-left:2px solid var(--orange);
  max-width:78ch;
}
.mmh-boundary__label{
  font-family:var(--f-eyebrow); font-weight:600;
  text-transform:uppercase; letter-spacing:.2em;
  font-size:clamp(11px,.9vw,12.5px);
  color:#C9761A;
  margin:0 0 clamp(8px,.9vw,12px);
}
.mmh-boundary p:last-child{
  font-family:var(--f-body); font-weight:500;
  color:#2B3B4D;
  font-size:clamp(14px,.98vw,15.5px);
  line-height:1.55; margin:0;
}

/* ---------------- tablet ---------------- */
@media (max-width:900px){
  .mmh-s3__grid{grid-template-columns:repeat(2,1fr); row-gap:clamp(28px,4vw,40px);}
  .mmh-insight:nth-child(odd){border-left:0;}
  .mmh-s4__vars{grid-template-columns:repeat(2,1fr);}
}

/* ---------------- mobile ---------------- */
@media (max-width:620px){
  .mmh-s3__grid{grid-template-columns:1fr; row-gap:0;}
  .mmh-s3__grid{margin:0;}
  .mmh-insight{
    border-left:0; padding:clamp(20px,4.5vw,26px) 0;
    border-top:1px solid rgba(127,209,240,.2);
  }
  .mmh-insight:first-child{border-top:0; padding-top:0;}
  .mmh-insight:last-child{padding-bottom:0;}
  .mmh-s4__vars{grid-template-columns:1fr; gap:clamp(20px,5vw,28px);}
  .mmh-refs li{flex-direction:column; gap:6px;}
  .mmh-serif-title{max-width:none;}
}


/* ============================================================
   MOBILE TYPE SPACING — declared last on purpose.
   These selectors have the same specificity as their base rules,
   so they must come AFTER them in source order to take effect.
   ============================================================ */
@media (max-width:620px){
  /* clamp floors bottomed out at 9px beneath a 34px display title — far too
     tight once Bebas's tall caps are in play */
  .mmh-s1__title,
  .mmh-s2__title{margin-bottom:16px;}
  .mmh-serif-title{margin-bottom:15px;}
}


/* ============================================================
   REVEAL FAIL-SAFE
   main.js hides every section <h2> (opacity:0 + translateY) and
   relies on an IntersectionObserver to reveal it. If that observer
   never fires — a clipping/scroll-container ancestor, an early JS
   error, an unusual viewport — the headline stays invisible.
   This dead-man's switch restores it after 2s no matter what.
   When the observer DOES fire, .is-visible lands on the same end
   state first, so the animation is invisible in normal use.
   ============================================================ */
.mmh .reveal{
  animation:mmh-reveal-failsafe .35s ease-out 2s forwards;
}
.mmh .reveal.is-visible{
  animation:none;          /* observer won — let its transition own it */
}
@keyframes mmh-reveal-failsafe{
  to{opacity:1; transform:none;}
}
@media (prefers-reduced-motion:reduce){
  .mmh .reveal{animation-delay:0s; animation-duration:.01s;}
}


/* ============================================================
   FIELD TRANSITIONS — fixed-height bands, not percentages.
   Percentage stops moved with section height, so the eyebrow
   could land on navy at one viewport and mid-blue at another
   and lose contrast either way. A fixed band always resolves
   before any content begins.
   ============================================================ */
.mmh-s4::after,
.mmh-s5::after,
.mmh-s6::after,
.mmh-s8::after{
  content:""; position:absolute; top:0; left:0; right:0;
  pointer-events:none; z-index:0;
}
.mmh-s4::after{height:clamp(80px,9vw,120px);
  background:linear-gradient(180deg, var(--field) 0, #0B2437 26%, #6E9FB8 62%, var(--pale-aqua) 100%);}
.mmh-s5::after{height:clamp(42px,5vw,68px);
  background:linear-gradient(180deg, var(--pale-aqua) 0, var(--ivory) 100%);}
.mmh-s6::after{height:clamp(42px,5vw,68px);
  background:linear-gradient(180deg, var(--ivory) 0, #FFFFFF 100%);}
.mmh-s8::after{height:clamp(42px,5vw,68px);
  background:linear-gradient(180deg, #FFFFFF 0, var(--soft) 100%);}
.mmh-s4 .mmh-wrap,.mmh-s5 .mmh-wrap,
.mmh-s6 .mmh-wrap,.mmh-s8 .mmh-wrap{position:relative; z-index:1;}

/* ============================================================
   SANS TITLES — everything after the serif transition beat
   ============================================================ */
/* Bebas carries every section title on the page — s1-s3 in the navy half and
   s5 onward in the light half — so one display voice runs end to end.
   Only two exceptions: s4 (DM Serif, marking the turn) and Founder (Cabin). */
.mmh-sans-title{
  font-family:var(--f-display); font-weight:400;
  color:var(--navy);
  text-transform:uppercase;
  font-size:clamp(34px,4.4vw,66px);
  line-height:.92; letter-spacing:.01em;
  margin:0 0 clamp(16px,1.9vw,26px);
  max-width:20ch;
}
.mmh-sans-title--sm{font-size:clamp(26px,3vw,46px); max-width:none;}

/* ============================================================
   ① FOUNDER PERSPECTIVE — its own voice.
   Cabin (SOW rule), a narrow measure, and set in from the rule
   so it reads as a person speaking, not another analysis block.
   ============================================================ */
.mmh-founder .mmh-wrap{max-width:none;}
.mmh-founder__title{
  font-family:var(--f-founder); font-weight:700;
  color:var(--navy);
  font-size:clamp(25px,2.7vw,40px);
  line-height:1.16; letter-spacing:-.015em;
  margin:0 0 clamp(16px,1.9vw,26px);
}
.mmh-founder .mmh-body{
  font-family:var(--f-founder);
  font-size:clamp(16px,1.15vw,18.5px);
  line-height:1.62;
  max-width:38ch;                     /* deliberately narrow — a spoken measure */
}
.mmh-founder .mmh-body--strong{font-weight:600;}
.mmh-founder .mmh-eyebrow{margin-left:0;}
.mmh-s5__closing{
  font-family:var(--f-founder); font-weight:700; font-style:italic;
  color:var(--navy);
  font-size:clamp(21px,2.4vw,35px);
  line-height:1.3; letter-spacing:-.012em;
  margin:clamp(26px,3vw,44px) 0 0;
  max-width:26ch;
  padding-left:clamp(16px,1.8vw,26px);
  border-left:2px solid var(--orange);
}

/* ============================================================
   ② THE LARGER LESSON — centred conclusion, stillness
   ============================================================ */
.mmh-conclusion .mmh-wrap{max-width:min(860px, calc(100% - clamp(40px,8vw,140px)));}
.mmh-conclusion .mmh-eyebrow{justify-content:center;}
.mmh-conclusion .mmh-eyebrow::after{display:none;}
.mmh-conclusion .mmh-sans-title{
  max-width:none; text-align:center;
  font-size:clamp(28px,3.4vw,50px);
  margin-bottom:clamp(20px,2.4vw,32px);
}
.mmh-conclusion .mmh-body{max-width:none; text-align:center;}

/* ============================================================
   ③ HIGHLIGHTS — two-column header breaks the repeated stack
   ============================================================ */
.mmh-splithead{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,60px); align-items:end;
  margin-bottom:clamp(30px,3.6vw,54px);
}
.mmh-splithead .mmh-serif-title{margin-bottom:0; max-width:16ch;}
.mmh-splithead .mmh-s3__lead{margin-bottom:0; max-width:46ch;}

/* ---- responsive for the new structures ---- */
@media (max-width:900px){
  .mmh-splithead{grid-template-columns:1fr; gap:clamp(14px,2.4vw,22px); align-items:start;}
  .mmh-splithead .mmh-serif-title{max-width:none;}
}
@media (max-width:620px){
  .mmh-founder .mmh-body{max-width:none;}
  .mmh-s5__closing{max-width:none;}
  .mmh-sans-title{max-width:none;}
  .mmh-conclusion .mmh-sans-title,
  .mmh-conclusion .mmh-body{text-align:left;}
  .mmh-conclusion .mmh-eyebrow{justify-content:flex-start;}
}


/* ============================================================
   TWO-COLUMN SECTION HEADER — the light half's shared pattern.
   Title left, body right. Used by s5, s7 and (inverted) s6 so
   the back half reads as one system instead of a stack of
   identical full-width blocks.
   ============================================================ */
.mmh-2col{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,72px);
  align-items:start;
}
.mmh-2col .mmh-sans-title{margin:0; max-width:14ch;}
.mmh-2col__body .mmh-body:last-child{margin-bottom:0;}

/* alternating numerals — aqua / orange / aqua / orange */
.mmh-insight__num--a{color:var(--aqua-soft);}
.mmh-insight__num--b{color:var(--orange);}

/* Founder: copy left, the closing line lifted into a real pull quote right */
.mmh-2col--founder{align-items:center;}
.mmh-2col--founder .mmh-body{max-width:none;}
.mmh-s5__closing{
  margin:0;
  padding:clamp(4px,.5vw,8px) 0 clamp(4px,.5vw,8px) clamp(20px,2.4vw,34px);
  border-left:3px solid var(--orange);
  max-width:none;
}
.mmh-s5__closing p{
  font-family:var(--f-quote); font-weight:700;
  color:var(--navy);
  font-size:clamp(21px,2.5vw,36px);
  line-height:1.24; letter-spacing:-.012em;
  margin:0;
}
.mmh-s5__closing p + p{margin-top:clamp(12px,1.5vw,22px);}

@media (max-width:900px){
  .mmh-2col{grid-template-columns:1fr; gap:clamp(16px,2.6vw,26px);}
  .mmh-2col .mmh-sans-title{max-width:none;}
  .mmh-2col--founder{gap:clamp(24px,4vw,36px);}
}


/* ============================================================
   MATCHING THE APPROVED CONCEPT — sections 4-9
   ============================================================ */

/* s4 supporting line as a bordered callout beside the headline */
.mmh-s3__lead{
  border-left:2px solid rgba(127,209,240,.45);
  padding:clamp(4px,.6vw,10px) 0 clamp(4px,.6vw,10px) clamp(16px,1.8vw,26px);
  margin:0; max-width:42ch;
}
.mmh-s3__lead p{
  font-family:var(--f-body); font-weight:400;
  color:var(--lgray);
  font-size:clamp(14.5px,1vw,16px);
  line-height:1.55; margin:0;
}
/* numerals sit over a rule; labels drop to sentence case */
.mmh-insight__label{
  text-transform:none;
  letter-spacing:.005em;
  font-weight:700;
  font-size:clamp(13px,1.05vw,15.5px);
  color:var(--white);
  border-top:1px solid rgba(127,209,240,.3);
  padding-top:clamp(9px,1.1vw,14px);
  margin:0 0 clamp(9px,1.1vw,14px);
  text-align:left;
}
.mmh-insight__copy{font-size:clamp(13.5px,.98vw,15px); line-height:1.55;}

/* ============================================================
   THE QUADRANT — four inputs converging on one outcome.
   A flat row said "here are four things"; this says they all
   feed the same result, which is the section's actual argument.
   ============================================================ */
.mmh-quad{
  position:relative;
  margin:clamp(24px,3vw,44px) 0 0;
  padding:clamp(14px,2vw,30px) 0;
}
.mmh-quad__items{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:1fr clamp(150px,17vw,215px) 1fr;
  grid-template-rows:auto auto;
  column-gap:clamp(18px,2.4vw,38px);
  row-gap:clamp(30px,4vw,62px);
}
.mmh-var--tl{grid-column:1; grid-row:1;}
.mmh-var--tr{grid-column:3; grid-row:1;}
.mmh-var--bl{grid-column:1; grid-row:2;}
.mmh-var--br{grid-column:3; grid-row:2;}
.mmh-var{display:flex; align-items:flex-start; gap:clamp(12px,1.4vw,18px);}
.mmh-var__icon{flex:0 0 auto; margin:0;}

/* crosshair the four sit around */
.mmh-quad__axis{
  position:absolute; inset:0; pointer-events:none;
}
.mmh-quad__axis::before,
.mmh-quad__axis::after{
  content:""; position:absolute; background:rgba(6,20,38,.16);
}
.mmh-quad__axis::before{left:0; right:0; top:50%; height:1px;}
.mmh-quad__axis::after{top:0; bottom:0; left:50%; width:1px;}

.mmh-quad__hub{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:clamp(132px,15vw,190px); height:clamp(132px,15vw,190px);
  border-radius:50%;
  background:#FFFFFF;
  border:1px solid rgba(6,20,38,.16);
  box-shadow:0 0 0 clamp(7px,.9vw,12px) rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center;
  text-align:center; margin:0; padding:10px;
}
.mmh-quad__hub-art{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--navy); opacity:.16; pointer-events:none;
}
.mmh-quad__hub-art svg{width:82%; height:82%; display:block;}
.mmh-quad__hub p{position:relative; z-index:1; margin:0;}
.mmh-quad__hub span{
  font-family:var(--f-eyebrow); font-weight:700;
  text-transform:uppercase; letter-spacing:.13em;
  font-size:clamp(9.5px,.78vw,11px);
  line-height:1.5; color:var(--navy);
}

/* ============================================================
   s8 FINAL TAKEAWAY — its own navy field again
   ============================================================ */
.mmh-s7{
  position:relative;
  background:var(--field);
  padding:clamp(64px,7.5vw,120px) 0;
}
.mmh-s7::after{
  content:""; position:absolute; top:0; left:0; right:0; z-index:0;
  height:clamp(50px,6vw,80px); pointer-events:none;
  background:linear-gradient(180deg, #FFFFFF 0, #A9BECB 30%, var(--field) 100%);
}
.mmh-s7 .mmh-wrap{position:relative; z-index:1;}
.mmh-takeaway{
  margin:0;
  padding:clamp(4px,.6vw,10px) 0 clamp(4px,.6vw,10px) clamp(22px,2.6vw,40px);
  border-left:3px solid var(--aqua-soft);
  background:transparent; text-align:left;
  max-width:none;
}
.mmh-takeaway p{
  font-family:var(--f-eyebrow); font-weight:700;
  color:var(--white);
  font-size:clamp(23px,2.9vw,44px);
  line-height:1.2; letter-spacing:-.02em;
  margin:0;
}
.mmh-takeaway p + p{margin-top:clamp(4px,.5vw,8px); color:var(--aqua-soft);}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .mmh-quad__items{grid-template-columns:1fr 1fr; row-gap:clamp(24px,3.4vw,36px);}
  .mmh-var--tl{grid-column:1; grid-row:1;} .mmh-var--tr{grid-column:2; grid-row:1;}
  .mmh-var--bl{grid-column:1; grid-row:2;} .mmh-var--br{grid-column:2; grid-row:2;}
  .mmh-quad__hub{display:none;}
  .mmh-quad__axis{display:none;}
}
@media (max-width:620px){
  .mmh-quad__items{grid-template-columns:1fr;}
  .mmh-var--tr,.mmh-var--bl,.mmh-var--br{grid-column:1;}
  .mmh-var--tr{grid-row:2;} .mmh-var--bl{grid-row:3;} .mmh-var--br{grid-row:4;}
  .mmh-s3__lead{max-width:none;}
}


/* ============================================================
   TYPOGRAPHY SPEC — MAX_HYPERTROPHY_TYPOGRAPHY_SPEC.md
   Scoped to the sections AFTER the three locked ones, so the
   hero / Science Is Clear / Research Examine are untouched.

   Two families only: Montserrat is the publication system,
   Libre Baskerville Italic is the rare editorial interruption.
   Hierarchy comes from scale, weight and space — not more faces.

   Documented exception: Founder Perspective stays Cabin per
   Stuart's direction (spec would have it Montserrat 800).
   ============================================================ */

/* 4 · Eyebrows / section labels */
.mmh-s3 .mmh-eyebrow,
.mmh-s4 .mmh-eyebrow,
.mmh-s5 .mmh-eyebrow,
.mmh-s6 .mmh-eyebrow,
.mmh-s8 .mmh-eyebrow{
  font-family:var(--f-eyebrow); font-weight:700;
  font-size:13px; line-height:1; letter-spacing:.19em;
  text-transform:uppercase;
}

/* 1 · Standard section titles — Montserrat 800 */
.mmh-sans-title{
  font-family:var(--f-eyebrow); font-weight:800;
  font-style:normal;
  color:var(--navy);
  font-size:clamp(44px,4.25vw,72px);
  line-height:1.02; letter-spacing:-.035em;
  max-width:16ch;
}
/* 2 · Compact section titles (Research references) */
.mmh-sans-title--sm{font-size:clamp(38px,3.35vw,58px); max-width:none;}

/* 3 · Editorial thesis — the one serif headline */
.mmh-serif-title{
  font-family:var(--f-quote); font-style:italic; font-weight:400;
  font-size:clamp(58px,5.3vw,88px);
  line-height:1.08; letter-spacing:-.045em;
  max-width:15ch;
}

/* 5 · Body copy */
.mmh-s3 .mmh-body, .mmh-s4 .mmh-body,
.mmh-s6 .mmh-body, .mmh-s8 .mmh-body,
.mmh-s3 .mmh-body p, .mmh-s4 .mmh-body p{
  font-family:var(--f-eyebrow); font-weight:400;
  font-size:18px; line-height:1.7;
  max-width:60ch;
}
.mmh-s3 .mmh-body--strong, .mmh-s4 .mmh-body--strong,
.mmh-s6 .mmh-body--strong, .mmh-s8 .mmh-body--strong{font-weight:700;}

/* 6 · Review-support paragraph beside the thesis */
.mmh-s3__lead p{
  font-family:var(--f-eyebrow); font-weight:400;
  font-size:19px; line-height:1.65;
  color:var(--lgray);
}

/* 7 · Numbered review insights */
.mmh-insight__num{
  font-family:var(--f-eyebrow); font-weight:800;
  font-size:clamp(64px,5vw,88px);
  line-height:.9; letter-spacing:-.06em;
}
.mmh-insight__label{
  font-family:var(--f-eyebrow); font-weight:700;
  font-size:19px; line-height:1.18;
  text-transform:none; letter-spacing:normal;
  color:var(--white);
}
.mmh-insight__copy{
  font-family:var(--f-eyebrow); font-weight:400;
  font-size:17px; line-height:1.62;
}

/* 8 · Resistance-field labels */
.mmh-var h3{
  font-family:var(--f-eyebrow); font-weight:700;
  font-size:19px; line-height:1.1; letter-spacing:.04em;
  text-transform:uppercase;
}
.mmh-var p{
  font-family:var(--f-eyebrow); font-weight:400;
  font-size:16px; line-height:1.5;
}
.mmh-quad__hub span{
  font-family:var(--f-eyebrow); font-weight:700;
  font-size:13px; line-height:1.45; letter-spacing:.08em;
  text-transform:uppercase;
}

/* 9 · AQF interpretation pull quote */
.mmh-inset-quote p{
  font-family:var(--f-quote); font-style:italic; font-weight:400;
  font-size:clamp(24px,2.2vw,34px);
  line-height:1.42; letter-spacing:normal;
}

/* 10 · Founder Perspective — heading + body stay CABIN (Stuart's override);
        only the reflective statement takes the serif, per spec */
.mmh-founder__title{
  font-family:var(--f-founder); font-weight:700;
  font-size:clamp(38px,3.35vw,58px);
  line-height:1.02; letter-spacing:-.03em;
}
.mmh-founder .mmh-body{
  font-family:var(--f-founder); font-weight:400;
  font-size:18px; line-height:1.7;
}
.mmh-founder .mmh-body--strong{font-weight:700;}
.mmh-s5__closing p{
  font-family:var(--f-quote); font-style:italic; font-weight:400;
  font-size:clamp(42px,4.1vw,68px);
  line-height:1.22; letter-spacing:-.035em;
}

/* 11 · Final adaptation anchor */
.mmh-takeaway p{
  font-family:var(--f-eyebrow); font-weight:500;
  font-size:clamp(52px,5vw,82px);
  line-height:1.05; letter-spacing:-.045em;
  color:var(--white);
}
.mmh-takeaway p strong{font-weight:800; color:var(--aqua-soft);}
.mmh-takeaway p + p{margin-top:clamp(4px,.5vw,10px); color:var(--white);}

/* references + boundary note ride the same system */
.mmh-refs p, .mmh-boundary p:last-child{
  font-family:var(--f-eyebrow); font-weight:400;
}
.mmh-refs__n{font-family:var(--f-eyebrow); font-weight:800; letter-spacing:-.04em;}
.mmh-boundary__label{font-family:var(--f-eyebrow); font-weight:700; letter-spacing:.19em; font-size:13px;}

/* the larger type needs the columns to stop fighting it */
.mmh-2col{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);}
.mmh-2col .mmh-sans-title{max-width:none;}
.mmh-splithead .mmh-serif-title{max-width:none;}

@media (max-width:900px){
  .mmh-sans-title{font-size:clamp(34px,6vw,48px);}
  .mmh-serif-title{font-size:clamp(38px,7vw,58px);}
  .mmh-s5__closing p{font-size:clamp(30px,6vw,46px);}
  .mmh-takeaway p{font-size:clamp(34px,7vw,54px);}
  .mmh-insight__num{font-size:clamp(48px,9vw,68px);}
  .mmh-2col{grid-template-columns:1fr;}
}
@media (max-width:620px){
  .mmh-sans-title{font-size:clamp(30px,8vw,40px);}
  .mmh-serif-title{font-size:clamp(32px,8.5vw,44px);}
  .mmh-s5__closing p{font-size:clamp(26px,7vw,36px);}
  .mmh-takeaway p{font-size:clamp(29px,8vw,42px);}
  .mmh-s3 .mmh-body,.mmh-s4 .mmh-body,.mmh-s6 .mmh-body,.mmh-s8 .mmh-body,
  .mmh-founder .mmh-body{font-size:16.5px; line-height:1.66;}
  .mmh-insight__copy{font-size:16px;}
  .mmh-var p{font-size:16px;}
}


/* ============================================================
   ROUND OF SIZE / WEIGHT ADJUSTMENTS  (Stuart, section audit)
   Declared last so these win on source order.
   ============================================================ */

/* --- s2 · The Science Is Clear --- */

/* intro must clearly outrank the copy under the icons (was 19px vs 18.5px —
   effectively the same size, so the hierarchy read flat) */
.mmh-s1__intro{
  font-size:clamp(18px,1.55vw,25px);
  line-height:1.5;
  max-width:60ch;
}

/* "Effective stimulus matters more than endless stimulus." — 1.5x */
.mmh-s1__reflect-lead{
  font-size:clamp(27px,2.5vw,37px);
  line-height:1.22;
}

/* --- s3 · What Did The Research Examine? --- */

/* opening summary — 1.5x */
.mmh-s2__summary p{
  font-size:clamp(24px,1.7vw,28px);
  line-height:1.42;
}

/* WHO / WHAT / WHY IT MATTERS rows — 1.5x on the copy, labels scaled to match.
   Deliberately EXCLUDED per direction: the icons, the Published Review card,
   and the Study Boundaries panel (label + bullets) all stay as they were. */
.mmh-row dd{
  font-size:clamp(22px,1.5vw,24px);
  line-height:1.38;
}
.mmh-row dt{
  font-size:clamp(13px,1.05vw,15px);
}

/* --- s4 · What The Review Highlights --- */

/* review-support paragraph, slightly bolder */
.mmh-s3__lead p{font-weight:500;}

/* the four insight paragraphs, slightly bolder */
.mmh-insight__copy{font-weight:500;}

/* ============================================================
   SOFTER FIELD TRANSITIONS
   The bands were 80-120px, which read as a hard wipe. Stretched
   to roughly 2.5x and the section padding grown to match, so the
   copy still starts well clear of the blend.
   ============================================================ */
.mmh-s4::after{height:clamp(210px,23vw,330px);
  background:linear-gradient(180deg,
    var(--field) 0%, #0A2033 18%, #24506B 40%,
    #6E9FB8 64%, #B8D9E6 84%, var(--pale-aqua) 100%);}
.mmh-s4{padding-top:clamp(250px,27vw,390px);}

.mmh-s5::after{height:clamp(90px,10vw,140px);
  background:linear-gradient(180deg, var(--pale-aqua) 0%, #F0F0EA 55%, var(--ivory) 100%);}
.mmh-s5{padding-top:clamp(122px,13vw,180px);}

.mmh-s6::after{height:clamp(90px,10vw,140px);
  background:linear-gradient(180deg, var(--ivory) 0%, #FAF9F6 55%, #FFFFFF 100%);}
.mmh-s6{padding-top:clamp(122px,13vw,180px);}

.mmh-s7::after{height:clamp(190px,21vw,300px);
  background:linear-gradient(180deg,
    #FFFFFF 0%, #D9E4EB 22%, #8FAABC 46%,
    #2B4A61 72%, #0C1E32 90%, var(--field) 100%);}
.mmh-s7{padding-top:clamp(230px,25vw,360px);}

.mmh-s8::after{height:clamp(190px,21vw,300px);
  background:linear-gradient(180deg,
    var(--field) 0%, #0C1E32 14%, #2B4A61 36%,
    #8FAABC 62%, #D9E4EB 84%, var(--soft) 100%);}
.mmh-s8{padding-top:clamp(230px,25vw,360px);}

@media (max-width:620px){
  .mmh-s1__intro{font-size:17.5px;}
  .mmh-s1__reflect-lead{font-size:22px;}
  .mmh-s2__summary p{font-size:19px;}
  .mmh-row dd{font-size:18px;}
  /* bands scale down so the light sections don't open with a wall of gradient */
  .mmh-s4::after{height:150px;}  .mmh-s4{padding-top:180px;}
  .mmh-s7::after{height:140px;}  .mmh-s7{padding-top:168px;}
  .mmh-s8::after{height:140px;}  .mmh-s8{padding-top:168px;}
  .mmh-s5::after{height:70px;}   .mmh-s5{padding-top:96px;}
  .mmh-s6::after{height:70px;}   .mmh-s6{padding-top:96px;}
}

/* sentence case — a leftover text-transform from the Bebas era was forcing
   these to caps, which the spec and concept both show as sentence case */
.mmh-sans-title,
.mmh-sans-title--sm,
.mmh-founder__title,
.mmh-serif-title{text-transform:none;}

/* s4 closes tighter into the gradient. Trimmed here rather than shortening
   s5's top padding, which is what keeps the copy clear of the blend. */
.mmh-s3{padding-bottom:clamp(14px,1.6vw,26px);}
@media (max-width:620px){
  .mmh-s3{padding-bottom:16px;}
}

/* ============================================================
   HERO COPY — sized up to match the page.
   It was 16px (20px on a 1080 screen) while the s3 summary runs
   24px, so the page's most important copy was also its smallest.
   The column widens at the same time, so the larger size is
   absorbed by measure rather than by extra lines — which matters
   because the hero has no vertical headroom to give.
   ============================================================ */
.mmh-hero__body{width:min(56%, 660px);}
.mmh-hero__lede{
  font-size:clamp(17px,2.3vh,24px);
  max-width:46ch;
  line-height:1.42;
}
@media (max-width:900px){
  .mmh-hero__body{width:100%;}
  .mmh-hero__lede{max-width:62ch;}
}
@media (max-width:620px){
  .mmh-hero__lede{font-size:17px; line-height:1.54; max-width:none;}
}

/* Break the hero lede at SENTENCE boundaries. Left to wrap freely it stranded
   the word "not." alone on its own line — a widow that sizing up would only
   worsen, since bigger type in the same column wraps more, not less. */
.mmh-sbr{display:block; content:""; }
@media (max-width:620px){
  .mmh-sbr{display:none;}   /* let it wrap naturally once the column is narrow */
}

/* Sentence breaks left more ragged space at the right, which reads as a lighter
   block even though the size never changed. Nudged up to compensate. */
.mmh-hero__lede{font-size:clamp(18px,2.5vh,26px);}

/* ============================================================
   HERO TEXT LEGIBILITY
   The copy overlays the photo at any width above 900px — and a
   landscape phone lands there. If the splash ever sits behind a
   line, white-on-white disappears. A soft, wide shadow lifts the
   type off the water without reading as a drop shadow: the large
   blur does the work, the tight one only crisps the edge.
   ============================================================ */
.mmh-hero__eyebrow,
.mmh-hero__title,
.mmh-hero__kicker,
.mmh-hero__lede,
.mmh-hero__statement p{
  text-shadow:
    0 2px 18px rgba(6,20,38,.55),
    0 1px 4px rgba(6,20,38,.38);
}
/* stacked layout puts the copy on solid navy — no photo behind it, so the
   shadow is pure cost there */
@media (max-width:900px){
  .mmh-hero__eyebrow,
  .mmh-hero__title,
  .mmh-hero__kicker,
  .mmh-hero__lede,
  .mmh-hero__statement p{text-shadow:none;}
}

/* Push the eyebrow/title/kicker/lede block further right so the splash keeps
   its breathing room. Two moves: the block slides toward the edge (eating some
   of the content padding) and narrows slightly, so the LEFT edge — the one that
   crowds the water — travels further right than the right edge does.
   The statement box and photo credit are deliberately untouched. */
.mmh-hero__body{
  width:min(53%, 620px);
  margin-right:calc(-1 * clamp(14px,2.1vw,38px));
}
@media (max-width:900px){
  .mmh-hero__body{width:100%; margin-right:0;}
}

/* ============================================================
   HERO — closer to the earlier composition.
   Three things the previous version did better: the copy sat
   further right, the bleeds were gentler, and more open water
   read before the white splash. Softening the ramps recovers the
   water WITHOUT losing density behind the copy — the horizontal
   scrim now starts later but climbs harder once it passes the
   splash, so the text keeps its dark ground.
   ============================================================ */
.mmh-hero__body{
  width:min(50%, 592px);
  margin-right:calc(-1 * clamp(18px,2.7vw,52px));
}

.mmh-hero__img{
  /* longer, gentler ramps — the tight fades were cutting the water short */
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, #000 44%, rgba(0,0,0,.74) 62%,
                    rgba(0,0,0,.34) 77%, rgba(0,0,0,.08) 89%, transparent 97%),
    linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,.58) 70%,
                    rgba(0,0,0,.2) 86%, transparent 99%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, #000 0%, #000 44%, rgba(0,0,0,.74) 62%,
                    rgba(0,0,0,.34) 77%, rgba(0,0,0,.08) 89%, transparent 97%),
    linear-gradient(180deg, #000 0%, #000 46%, rgba(0,0,0,.58) 70%,
                    rgba(0,0,0,.2) 86%, transparent 99%);
  mask-composite:intersect;
}

.mmh-hero__scrim{
  background:
    /* holds off the water longer (50% vs 46%), then climbs harder so the copy
       column is actually DARKER than before despite the softer opening */
    linear-gradient(90deg,
      rgba(6,20,38,0) 50%, rgba(6,20,38,.22) 56%, rgba(6,20,38,.60) 64%,
      rgba(6,20,38,.82) 76%, rgba(6,20,38,.88) 100%),
    /* bottom bleed stretched out so it stops reading as a hard band */
    linear-gradient(0deg,
      rgba(6,20,38,.74) 0%, rgba(6,20,38,.68) 16%, rgba(6,20,38,.52) 30%,
      rgba(6,20,38,.30) 46%, rgba(6,20,38,.10) 61%, rgba(6,20,38,0) 74%);
}

@media (max-width:900px){
  .mmh-hero__body{width:100%; margin-right:0;}
}

/* ============================================================
   HERO — get the white water back.
   My previous "softening" lengthened the ramps, which pushed them
   UP into the splash: the bottom wash reached 74% of the hero and
   the mask began fading at 46%, straight through the water.
   Fixed by moving where they act, not how strong they are —
   both now hold clear until past the splash, then work hard in
   the copy column only.
   ============================================================ */
.mmh-hero__img{
  -webkit-mask-image:
    /* opaque straight across the splash (ends ~56%), fades only after it */
    linear-gradient(90deg, #000 0%, #000 56%, rgba(0,0,0,.52) 72%,
                    rgba(0,0,0,.16) 86%, transparent 96%),
    /* holds the water bright far longer — was fading from 46% */
    linear-gradient(180deg, #000 0%, #000 64%, rgba(0,0,0,.62) 82%,
                    rgba(0,0,0,.18) 94%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, #000 0%, #000 56%, rgba(0,0,0,.52) 72%,
                    rgba(0,0,0,.16) 86%, transparent 96%),
    linear-gradient(180deg, #000 0%, #000 64%, rgba(0,0,0,.62) 82%,
                    rgba(0,0,0,.18) 94%, transparent 100%);
  mask-composite:intersect;
}

.mmh-hero__scrim{
  background:
    /* nothing at all over the splash; climbs hard once past it so the copy
       column stays as dark as before */
    linear-gradient(90deg,
      rgba(6,20,38,0) 55%, rgba(6,20,38,.26) 62%, rgba(6,20,38,.66) 71%,
      rgba(6,20,38,.86) 82%, rgba(6,20,38,.9) 100%),
    /* lighter and lower — stops well below the water instead of washing it */
    linear-gradient(0deg,
      rgba(6,20,38,.52) 0%, rgba(6,20,38,.38) 13%, rgba(6,20,38,.20) 26%,
      rgba(6,20,38,.07) 40%, rgba(6,20,38,0) 53%);
}

/* The splash actually ends around 41% of the frame — starting the darkening at
   55% left the copy (which begins at 52%) sitting on undarkened image. Brought
   the horizontal ramps back to ~44%, still clear of the water, so the copy
   regains its ground. The VERTICAL work stays as fixed: the bottom wash ends at
   53% and the image holds bright to 64%, which is what recovered the splash. */
.mmh-hero__img{
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, #000 46%, rgba(0,0,0,.5) 64%,
                    rgba(0,0,0,.15) 82%, transparent 94%),
    linear-gradient(180deg, #000 0%, #000 64%, rgba(0,0,0,.62) 82%,
                    rgba(0,0,0,.18) 94%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, #000 0%, #000 46%, rgba(0,0,0,.5) 64%,
                    rgba(0,0,0,.15) 82%, transparent 94%),
    linear-gradient(180deg, #000 0%, #000 64%, rgba(0,0,0,.62) 82%,
                    rgba(0,0,0,.18) 94%, transparent 100%);
  mask-composite:intersect;
}
.mmh-hero__scrim{
  background:
    linear-gradient(90deg,
      rgba(6,20,38,0) 44%, rgba(6,20,38,.24) 51%, rgba(6,20,38,.64) 62%,
      rgba(6,20,38,.86) 76%, rgba(6,20,38,.9) 100%),
    linear-gradient(0deg,
      rgba(6,20,38,.52) 0%, rgba(6,20,38,.38) 13%, rgba(6,20,38,.20) 26%,
      rgba(6,20,38,.07) 40%, rgba(6,20,38,0) 53%);
}

/* ============================================================
   MEASURED, not estimated. Sampling the source image for bright
   pixels puts the splash's main mass at 58.6% of the frame and
   faint spray out to 65% — my ramps had been starting at 44%,
   deep inside the water. That is why every "softer" attempt still
   dulled it. Everything now begins past 59%.
   The copy shifts right to meet the ramp so it keeps dark ground.
   ============================================================ */
.mmh-hero__body{
  width:min(46%, 548px);
  margin-right:calc(-1 * clamp(18px,2.7vw,52px));
}
.mmh-hero__img{
  -webkit-mask-image:
    linear-gradient(90deg, #000 0%, #000 60%, rgba(0,0,0,.45) 74%,
                    rgba(0,0,0,.12) 87%, transparent 96%),
    linear-gradient(180deg, #000 0%, #000 64%, rgba(0,0,0,.62) 82%,
                    rgba(0,0,0,.18) 94%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg, #000 0%, #000 60%, rgba(0,0,0,.45) 74%,
                    rgba(0,0,0,.12) 87%, transparent 96%),
    linear-gradient(180deg, #000 0%, #000 64%, rgba(0,0,0,.62) 82%,
                    rgba(0,0,0,.18) 94%, transparent 100%);
  mask-composite:intersect;
}
.mmh-hero__scrim{
  background:
    /* nothing until 59% — past the main splash mass */
    linear-gradient(90deg,
      rgba(6,20,38,0) 59%, rgba(6,20,38,.34) 65%, rgba(6,20,38,.72) 73%,
      rgba(6,20,38,.88) 84%, rgba(6,20,38,.92) 100%),
    linear-gradient(0deg,
      rgba(6,20,38,.52) 0%, rgba(6,20,38,.38) 13%, rgba(6,20,38,.20) 26%,
      rgba(6,20,38,.07) 40%, rgba(6,20,38,0) 53%);
}
/* the copy's leading edge can still catch spray — carry a touch more shadow */
.mmh-hero__eyebrow,
.mmh-hero__title,
.mmh-hero__kicker,
.mmh-hero__lede{
  text-shadow:0 2px 20px rgba(6,20,38,.72), 0 1px 4px rgba(6,20,38,.5);
}
@media (max-width:900px){
  .mmh-hero__body{width:100%; margin-right:0;}
}

/* s3's opening summary was 24px against s2's 18.6px — a 29% jump between two
   paragraphs doing the same job, which is what read as awkward. Matched. */
.mmh-s2__summary p{
  font-size:clamp(18px,1.55vw,25px);
  line-height:1.5;
}

/* Matching the summary size closed 65px of the imbalance; the photo absorbs the
   rest. Growing the image (rather than padding the card) is the fix that also
   earns its keep — the magnifier is this section's anchor and was undersized. */
.mmh-s2__photo{max-height:clamp(390px,35vw,560px);}
@media (max-width:900px){
  .mmh-s2__photo{max-height:none;}   /* stacked band has its own height */
}

/* The rows were 22px against an 18.6px summary — supporting detail set larger
   than the statement it supports. (Weights were already identical at 500; the
   "bolder" read came entirely from size.) Now sits just below the summary,
   giving a clean descending scale: lede 18.6 > rows 17 > s2 cards 16. */
.mmh-row dd{
  font-size:clamp(16px,1.4vw,17.5px);
  line-height:1.5;
}
@media (max-width:620px){
  .mmh-row dd{font-size:16px;}
}

/* Shrinking the rows shortened the left column, flipping the imbalance to -68px.
   Photo trimmed to match — the two columns track each other. */
.mmh-s2__photo{max-height:clamp(330px,29.5vw,490px);}
@media (max-width:900px){
  .mmh-s2__photo{max-height:none;}
}

/* ============================================================
   COPY UNIFORMITY AUDIT
   Measured every text role on the page: 8 different body sizes
   and TWO weights. The locked sections (hero/s2/s3) all run
   weight 500; everything from s4 on ran 400, so the back half
   read lighter throughout — and s4's intro was ALSO 19px against
   19.8px above it, which is why it looked smallest of all.
   Since the first three are locked, the new sections come up to
   meet them. One scale, one weight.

   Deviation noted: the type spec specifies Montserrat 400 for
   body. Held at 500 so it optically matches the locked Inter 500
   half — mixing families makes matched weight matter more than
   the literal value.
   ============================================================ */

/* section intros — one size, matching s2 and s3 exactly */
.mmh-s3__lead p{
  font-size:clamp(17px,1.55vw,19.8px);
  font-weight:500;
  line-height:1.55;
}

/* body copy — weight lifted to match the locked half */
.mmh-s4 .mmh-body,
.mmh-s6 .mmh-body,
.mmh-s8 .mmh-body,
.mmh-founder .mmh-body{font-weight:500;}
.mmh-s4 .mmh-body--strong,
.mmh-s6 .mmh-body--strong,
.mmh-s8 .mmh-body--strong,
.mmh-founder .mmh-body--strong{font-weight:700;}

/* supporting detail — aligned to s3's row copy (17.5) */
.mmh-insight__copy{
  font-size:clamp(16px,1.4vw,17.5px);
  font-weight:500;
  line-height:1.55;
}

/* card-level copy — aligned to s2's card copy (16) */
.mmh-var p{font-size:16px; font-weight:500; line-height:1.55;}

/* references sit deliberately smaller, but were the outlier at 13.5 */
.mmh-refs p{font-size:14.5px; line-height:1.6;}
.mmh-boundary p:last-child{font-size:14.5px; font-weight:500; line-height:1.6;}

@media (max-width:620px){
  .mmh-s3__lead p{font-size:16.5px;}
  .mmh-insight__copy{font-size:16px;}
  .mmh-refs p,.mmh-boundary p:last-child{font-size:14.5px;}
}

/* Section intros must share the SAME clamp, not just match at one width.
   s4's cap was 19.8px while s2/s3 run to 25px — identical at 1280 but 5px
   apart on a 27". One expression for all three. */
.mmh-s1__intro,
.mmh-s2__summary p,
.mmh-s3__lead p{
  font-size:clamp(18px,1.55vw,25px);
  font-weight:500;
  line-height:1.5;
}
.mmh-s3__lead p{line-height:1.55;}   /* slightly looser inside its callout box */

/* ============================================================
   s4 — give the support copy a voice beside the thesis.
   The headline is 58-88px serif italic; the callout was 25px in
   muted grey, so it disappeared. Rather than shrink the headline
   (the punch is wanted), the callout gains contrast and presence:
   near-white text, a brighter and heavier rule, and a faint panel
   so it reads as a deliberate aside rather than leftover text.
   ============================================================ */
.mmh-s3__lead{
  border-left:3px solid var(--aqua-soft);
  background:rgba(127,209,240,.055);
  padding:clamp(14px,1.6vw,22px) clamp(16px,1.8vw,26px);
}
.mmh-s3__lead p{
  color:#EFF5F9;
  font-weight:500;
}

/* ============================================================
   TRANSITION SPANS BOTH SIDES OF THE BOUNDARY
   The blend previously lived entirely inside s5's top, so it
   began the instant the section changed. Now s4 starts easing
   in its final stretch and s5 continues it — one long move
   across the join instead of a ramp that starts at a hard line.
   ============================================================ */
.mmh-s3{padding-bottom:clamp(90px,10vw,150px);}
.mmh-s3::after{
  content:""; position:absolute; left:0; right:0; bottom:0; z-index:0;
  height:clamp(150px,17vw,260px); pointer-events:none;
  background:linear-gradient(180deg,
    rgba(6,20,38,0) 0%, rgba(10,32,51,.55) 42%,
    rgba(18,52,78,.85) 76%, #12344E 100%);
}
.mmh-s3 .mmh-wrap{position:relative; z-index:1;}

/* s5 picks up exactly where s4 left off */
.mmh-s4::after{
  height:clamp(210px,23vw,330px);
  background:linear-gradient(180deg,
    #12344E 0%, #24506B 22%, #4A7E9B 48%,
    #8FBACE 72%, #C8E2EC 88%, var(--pale-aqua) 100%);
}
@media (max-width:620px){
  .mmh-s3{padding-bottom:70px;}
  .mmh-s3::after{height:110px;}
}

/* ============================================================
   BOLDER: the transition starts higher in s4 and carries most of
   the way there, so s5's content can climb up into the blue
   instead of waiting below a long runway.
   s4's band now travels navy -> mid-blue; s5 only finishes the
   last stretch, so its copy begins far sooner.
   The band still starts well below s4's insight copy.
   ============================================================ */
.mmh-s3::after{
  height:clamp(230px,26vw,390px);
  background:linear-gradient(180deg,
    rgba(6,20,38,0) 0%, rgba(11,34,54,.5) 30%,
    rgba(24,62,90,.82) 58%, rgba(45,95,128,.95) 82%, #3D7A9E 100%);
}
.mmh-s4::after{
  height:clamp(120px,14vw,200px);
  background:linear-gradient(180deg,
    #3D7A9E 0%, #6FA3BE 28%, #A3C9DA 58%, #D2E7EF 82%, var(--pale-aqua) 100%);
}
/* content rises to just past the end of the band */
.mmh-s4{padding-top:clamp(140px,16vw,225px);}
@media (max-width:620px){
  .mmh-s3::after{height:150px;}
  .mmh-s4::after{height:90px;}
  .mmh-s4{padding-top:118px;}
}

/* ============================================================
   s5 AS A DESCENT THROUGH WATER
   The header block now sits UP in the deep blue; the section
   clears as it goes down, so the variables and quote land in the
   shallows. Text colour follows the depth: light type where the
   water is dark, navy type once it lightens.
   ============================================================ */

/* s4 hands off deeper than before */
.mmh-s3::after{
  height:clamp(230px,26vw,390px);
  background:linear-gradient(180deg,
    rgba(6,20,38,0) 0%, rgba(9,28,45,.55) 34%,
    rgba(15,44,66,.85) 66%, #16405C 100%);
}

/* s5 carries the long climb from deep blue up to pale aqua */
.mmh-s4::after{
  height:clamp(300px,34vw,520px);
  background:linear-gradient(180deg,
    #16405C 0%, #1E5477 22%, #3D7A9E 44%,
    #7FADC6 66%, #BCDBE8 86%, var(--pale-aqua) 100%);
}
/* header block rides high, in the dark water */
.mmh-s4{padding-top:clamp(64px,7vw,104px);}

/* type follows the depth — light while the water is dark */
.mmh-s4 .mmh-eyebrow--orange{color:var(--orange);}     /* full-strength orange */
.mmh-s4 .mmh-sans-title{color:#FFFFFF;}
.mmh-s4 .mmh-2col__body .mmh-body{color:#DCEAF2;}
.mmh-s4 .mmh-2col__body .mmh-body--strong{color:#FFFFFF;}

/* the subhead sits at the waterline */
.mmh-s4 .mmh-subhead{color:var(--orange);}

@media (max-width:620px){
  .mmh-s3::after{height:150px;}
  .mmh-s4::after{height:230px;}
  .mmh-s4{padding-top:52px;}
}

/* ============================================================
   Black type instead of light — so the block moves DOWN to where
   the water has cleared enough to carry it. Still well inside the
   blue (the descent idea holds), just far enough along that navy
   reads properly rather than fighting the depth.
   ============================================================ */
.mmh-s4{padding-top:clamp(190px,21vw,310px);}
.mmh-s4 .mmh-sans-title{color:var(--navy);}
.mmh-s4 .mmh-2col__body .mmh-body{color:#16273B;}
.mmh-s4 .mmh-2col__body .mmh-body--strong{color:var(--navy);}
.mmh-s4 .mmh-eyebrow--orange{color:#B3620F;}   /* darker orange now that it sits on light water */

@media (max-width:620px){
  .mmh-s4{padding-top:150px;}
}

/* ============================================================
   WHITE, AND HIGH. The header block sits right under s4 in the
   deep water — white type carrying over from the science half is
   itself the signal that the subject has changed.
   The band is long enough to hold that depth through the whole
   header, then clears at the "waterline" gap before the subhead,
   where the type flips to navy for the shallows.
   ============================================================ */
.mmh-s4{padding-top:clamp(44px,5vw,76px);}
.mmh-s4::after{
  height:clamp(560px,62vw,900px);
  background:linear-gradient(180deg,
    #16405C 0%, #1A4A69 30%, #255E80 44%,
    #2E6C90 56%, #5893B0 66%, #8FBACE 75%,
    #C3DEEA 85%, var(--pale-aqua) 94%, var(--pale-aqua) 100%);
}

/* header rides the deep water — light type */
.mmh-s4 .mmh-sans-title{color:#FFFFFF;}
.mmh-s4 .mmh-2col__body .mmh-body{color:#DCEAF2;}
.mmh-s4 .mmh-2col__body .mmh-body--strong{color:#FFFFFF;}
.mmh-s4 .mmh-eyebrow--orange{color:var(--orange);}

/* the waterline — a deliberate pause where the blue clears */
.mmh-s4 .mmh-subhead{
  margin-top:clamp(96px,11.5vw,190px);
  color:#B3620F;
}
/* shallows — navy type from here down */
.mmh-s4 .mmh-var h3{color:var(--navy);}
.mmh-s4 .mmh-var p{color:#16273B;}

@media (max-width:620px){
  .mmh-s4{padding-top:40px;}
  .mmh-s4::after{height:430px;}
  .mmh-s4 .mmh-subhead{margin-top:70px;}
}

/* The 192px hole between the two copy blocks was padding, not gradient — the
   band is absolutely positioned and doesn't need the space reserved. s4's copy
   can sit close to its own bottom edge (white on deep blue reads fine there)
   and s5's header starts almost immediately after. The blend is unaffected. */
.mmh-s3{padding-bottom:clamp(26px,3vw,48px);}
.mmh-s4{padding-top:clamp(26px,3vw,48px);}
@media (max-width:620px){
  .mmh-s3{padding-bottom:26px;}
  .mmh-s4{padding-top:26px;}
}

/* Tighter still — the header climbs further into the deep water while keeping
   a real gap. s4 gives up more than s5 does, since its white copy sits happily
   close to its own edge on the dark blue. */
.mmh-s3{padding-bottom:clamp(14px,1.5vw,24px);}
.mmh-s4{padding-top:clamp(18px,2vw,32px);}
@media (max-width:620px){
  .mmh-s3{padding-bottom:18px;}
  .mmh-s4{padding-top:22px;}
}

/* Drop the tinted panel behind the s4 callout — it read as an off-colour box
   against the navy. The rule plus the brighter type carry it on their own. */
.mmh-s3__lead{
  background:transparent;
  padding:clamp(4px,.6vw,10px) 0 clamp(4px,.6vw,10px) clamp(16px,1.8vw,26px);
}

/* 45px was too tight — back to roughly the 80px that read well. */
.mmh-s3{padding-bottom:clamp(30px,3.4vw,54px);}
.mmh-s4{padding-top:clamp(32px,3.6vw,58px);}
@media (max-width:620px){
  .mmh-s3{padding-bottom:30px;}
  .mmh-s4{padding-top:34px;}
}

/* Block drops so the BOTTOM of the copy lands on the delineating line. The
   gradient holds its depth all the way to that point and clears immediately
   after — otherwise the closing lines would sit on mid-blue at ~3.3:1. */
.mmh-s4{padding-top:clamp(150px,16vw,240px);}
.mmh-s4::after{
  background:linear-gradient(180deg,
    #16405C 0%, #184764 34%, #1E5273 54%,
    #2A6588 68%, #5893B0 77%, #8FBACE 85%,
    #C3DEEA 92%, var(--pale-aqua) 98%, var(--pale-aqua) 100%);
}
@media (max-width:620px){
  .mmh-s4{padding-top:110px;}
}

/* Halfway back up: 46px was too high, 205px too low — 125px splits it.
   The copy now ends just ABOVE the delineating line rather than on it, which
   also buys back contrast headroom at the bottom of the block. */
.mmh-s4{padding-top:clamp(90px,9.8vw,150px);}
@media (max-width:620px){
  .mmh-s4{padding-top:76px;}
}

/* ============================================================
   s6 — the quadrant half of the water section
   ============================================================ */

/* Band grows 794 -> 872px, but every teal stop is re-percentaged to hold its
   SAME absolute pixel, so no extra teal travels down the page. Only the final
   pale approach stretches: full lightening moves from row 1 of the variables
   (~3945) down to the quadrant centre line (~4017). */
.mmh-s4::after{
  height:clamp(615px,68.1vw,990px);
  background:linear-gradient(180deg,
    #16405C 0%, #184764 31%, #1E5273 49.2%, #2A6588 61.9%,
    #5893B0 70.1%, #8FBACE 77.4%, #C3DEEA 92%,
    var(--pale-aqua) 97%, var(--pale-aqua) 100%);
}

/* HOW AQUATIC RESISTANCE IS ADJUSTED goes white. The darkened orange was
   measuring 1.41:1 against the mid-blue it sits on — orange and this blue are
   near-complementary at matched luminance, the same trap hit in s5's header.
   Shadow does the remaining work, as on the hero. */
.mmh-s4 .mmh-subhead{
  color:#FFFFFF;
  text-shadow:0 1px 2px rgba(6,20,38,.42), 0 2px 12px rgba(6,20,38,.30);
}

/* The AQF interpretation loses its card — quote sits straight on the field
   with only the orange rule, like the page's other pull quotes. */
.mmh-inset-quote{
  background:transparent;
  border-radius:0;
  box-shadow:none;
  padding:clamp(4px,.6vw,10px) 0 clamp(4px,.6vw,10px) clamp(20px,2.4vw,34px);
}

/* Quote steps down a size (28.2 -> 24.3 at 1280) and the orange rule thins
   from 2.5px to 1.5px, with the gap tightened to keep the pairing in scale. */
.mmh-inset-quote{
  /* 1.75px lands on 2 device pixels at dpr 1.2 — exactly half the original 3px
     (which rendered as 3). 1.5px snapped down to a single-pixel hairline. */
  border-left-width:1.75px;
  padding-left:clamp(15px,1.85vw,26px);
}
.mmh-inset-quote p{
  font-size:clamp(21px,1.9vw,29px);
  line-height:1.45;
}

/* Down another half size, and indented off the left margin so it sits inboard
   of the column without becoming a centred pull quote. */
.mmh-inset-quote{
  margin-left:clamp(32px,11vw,180px);
}
.mmh-inset-quote p{
  font-size:clamp(19px,1.74vw,26px);
}
@media (max-width:620px){
  .mmh-inset-quote{margin-left:14px;}
}

/* Subhead to the site dark navy — the same #061426 the first three sections
   use as their field. Shadow drops: it existed to lift white off mid-blue and
   would only muddy a dark colour. */
.mmh-s4 .mmh-subhead{
  color:var(--ink);
  text-shadow:none;
}

/* Whole quadrant onto one navy — #000033 out, site #061426 in. */
.mmh-s4 .mmh-var h3,
.mmh-s4 .mmh-quad__axis,
.mmh-s4 .mmh-quad__hub span,
.mmh-inset-quote p{
  color:var(--ink);
}

/* Label was stranded: 148px of air above it against 64px below. Dropping it
   24px ties it to the quadrant it names. */
.mmh-s4 .mmh-subhead{
  margin-top:clamp(112px,13.4vw,220px);
}

/* Gains the trailing hairline every other eyebrow on the page carries.
   currentColor so it tracks the navy automatically. */
.mmh-s4 .mmh-subhead{
  display:flex;
  align-items:center;
  gap:14px;
}
.mmh-s4 .mmh-subhead::after{
  content:"";
  display:block;
  height:1px;
  /* identical to .mmh-eyebrow::after — responsive width and the same .55 */
  flex:0 0 clamp(28px,4vw,64px);
  background:currentColor;
  opacity:.55;
}

/* Closing the air BELOW the label as well — lowering it alone just carried the
   quadrant down with it, so the 64px gap never changed. */
.mmh-s4 .mmh-quad{
  margin-top:12px;
}

/* Matched to the page eyebrow standard: 13px / 700 / .19em, no clamp, so it
   holds identical at every width the way the others do. */
.mmh-s4 .mmh-subhead{
  font-size:13px;
  font-weight:700;
  letter-spacing:.19em;
  line-height:1;
  text-transform:uppercase;
}

/* ------------------------------------------------------------
   Quadrant mirrored about the hub.
   The columns were already exact (443px each, hub centred to the
   pixel) but both presented an ICON to the centre on the right and
   RAGGED TEXT on the left, so the inner gaps ran 43px vs 71-146px.
   Flipping the right column puts icons on both outer margins and
   ragged text facing the hub from both sides.
   ------------------------------------------------------------ */
.mmh-s4 .mmh-var--tr,
.mmh-s4 .mmh-var--br{
  flex-direction:row-reverse;
  text-align:right;
}

/* Below the two-column breakpoint everything stacks, so the mirror has to
   come off or the right pair reads as a stray right-aligned block. */
@media (max-width:900px){
  .mmh-s4 .mmh-var--tr,
  .mmh-s4 .mmh-var--br{
    flex-direction:row;
    text-align:left;
  }
}

/* Plain-English gloss for the hub term. Centred under the diagram it captions,
   which is also the one place on this left-aligned page where centring reads as
   deliberate rather than stray. Quieter than the variable copy so it supports
   the quadrant instead of competing with it. */
.mmh-quad__gloss{
  margin:clamp(30px,3.4vw,52px) auto 0;
  max-width:56ch;
  text-align:center;
  font-family:var(--f-eyebrow);
  font-weight:400;
  font-size:16.5px;
  line-height:1.62;
  color:rgba(6,20,38,.78);
}
.mmh-quad__gloss strong{
  font-weight:700;
  color:var(--ink);
}
@media (max-width:620px){
  .mmh-quad__gloss{text-align:left; font-size:16px;}
}

/* Not a quotation but an editorial statement, so it comes out of Libre
   Baskerville Italic and into Montserrat. The orange rule carries the emphasis
   instead of the serif. Sans reads optically larger at the same size, so it
   steps down 22.3 -> 21px and takes weight 600 to keep outranking body copy.
   Serif is now reserved for the thesis headline and the Founder closing. */
.mmh-inset-quote p{
  font-family:var(--f-eyebrow);
  font-style:normal;
  font-weight:600;
  font-size:clamp(18px,1.64vw,25px);
  line-height:1.52;
  letter-spacing:-.004em;
}

/* Gloss belongs to the diagram, so it tucks up under it and the statement gets
   the bigger break instead. Was 44 above / 31 below, which read the other way. */
.mmh-quad__gloss{
  margin-top:clamp(18px,2vw,30px);
}
.mmh-inset-quote{
  margin-top:clamp(44px,4.8vw,72px);
}

/* Last of the old #000033 — the SVG strokes inherit via currentColor. */
.mmh-s4 .mmh-var__icon,
.mmh-s4 .mmh-quad__hub-art,
.mmh-s4 .mmh-quad__axis{
  color:var(--ink);
}

/* Founder signature — signs the closing statement, sitting inside the orange
   rule so the rule brackets statement AND signature as one unit. Sized well
   below the serif so it reads as a mark, not a third line of type. */
.mmh-founder__sig{
  display:block;
  width:clamp(120px,11.5vw,168px);
  height:auto;
  margin:clamp(24px,2.8vw,40px) 0 0;
}
@media (max-width:620px){
  .mmh-founder__sig{width:118px; margin-top:22px;}
}

/* Identity under the signature, mirroring maximize-your-gains so the founder
   block reads the same across the series. Montserrat, not the section's Cabin:
   this is a label, and labels are Montserrat page-wide. */
.mmh-founder__sig{margin-bottom:6px;}
.mmh-founder__identity{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.mmh-founder__identity strong{
  font-family:var(--f-eyebrow);
  font-weight:700;
  font-size:13px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink);
}
.mmh-founder__identity span{
  font-family:var(--f-eyebrow);
  font-weight:400;
  font-size:12.5px;
  letter-spacing:.01em;
  color:rgba(6,20,38,.72);
}
.mmh-founder__identity em{font-style:italic;}

/* 52.5 -> 44px. Measured tipping point: at 46px and up "The water is adaptable."
   wraps to two lines; at 44 it holds one, taking the block from 4 lines to 3.
   vw-driven so the one-line break survives as the column scales with viewport. */
.mmh-s5__closing p{
  font-size:clamp(34px,3.44vw,56px);
}

/* Name and title were inheriting italic from the blockquote. Upright, including
   the AquaFit Sports em, so the attribution reads as a label rather than part of
   the statement. The statement itself stays italic. */
.mmh-founder__identity,
.mmh-founder__identity strong,
.mmh-founder__identity span,
.mmh-founder__identity em{
  font-style:normal;
}

/* ------------------------------------------------------------
   s8 - The Larger Lesson, restructured as a synthesis.
   The two paragraphs already WERE the article's two halves
   converging (science, then water); stacking them in one column
   hid that. Thesis goes full width, the halves go side by side.
   ------------------------------------------------------------ */
.mmh-thesis{
  max-width:24ch;
  font-size:clamp(46px,4.9vw,82px);
  margin-bottom:clamp(46px,5vw,76px);
}
.mmh-synth{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,4.4vw,72px);
}
.mmh-synth__label{
  margin:0 0 clamp(14px,1.5vw,20px);
  padding-top:clamp(14px,1.5vw,20px);
  border-top:1px solid rgba(6,20,38,.22);
  font-family:var(--f-eyebrow);
  font-weight:700;
  font-size:13px;
  line-height:1;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--ink);
}
/* the body max-width is meant for a full measure, not a half column */
.mmh-synth .mmh-body{max-width:none;}

@media (max-width:900px){
  .mmh-synth{grid-template-columns:1fr; gap:clamp(26px,4vw,40px);}
  .mmh-thesis{max-width:none;}
}

/* ------------------------------------------------------------
   s9 - Final Takeaway. These lines are verbatim the hero's lede,
   so the eyebrow names the return and stops it reading as an
   accidental repeat. Rule drops and the statement centres: an
   orange left rule means "pull statement / set aside" everywhere
   else on this page, and this is the opposite - the last word.
   ------------------------------------------------------------ */
.mmh-eyebrow--center{
  justify-content:center;
  text-align:center;
}
/* symmetric hairlines - a single trailing rule looks lopsided when centred */
.mmh-eyebrow--center::before{
  content:"";
  flex:0 0 clamp(28px,4vw,64px);
  height:1px;
  background:currentColor;
  opacity:.55;
}

.mmh-s7 .mmh-takeaway{
  border-left:0;
  padding-left:0;
  text-align:center;
  max-width:none;
  margin-inline:auto;
}
.mmh-s7 .mmh-takeaway p{max-width:none;}

/* Band was 269px with 320px of padding reserved above it and only 96 below -
   top-heavy, and the reason the section read as empty rather than composed.
   Band tightens and the air redistributes toward the bottom. */
.mmh-s7::after{height:clamp(120px,13vw,190px);}
.mmh-s7{
  padding-top:clamp(150px,17vw,240px);
  padding-bottom:clamp(110px,12vw,170px);
}
@media (max-width:620px){
  .mmh-s7::after{height:104px;}
  .mmh-s7{padding-top:132px; padding-bottom:96px;}
}

/* ------------------------------------------------------------
   s9 goes to a hard-edged navy slab. Every other transition on
   this page is a blend; making the final statement the single
   exception reads as punctuation, not an oversight.
   Both edges cut - a hard top against a 268px soft bottom fade
   looked unresolved, and the exit was running far longer than
   the entry. With no bands to clear, the reserved padding on
   both sections goes too.
   ------------------------------------------------------------ */
.mmh-s7::after,
.mmh-s8::after{display:none;}

.mmh-s7{
  padding-top:clamp(110px,12vw,170px);
  padding-bottom:clamp(110px,12vw,170px);
}
.mmh-s8{padding-top:clamp(80px,9vw,132px);}

@media (max-width:620px){
  .mmh-s7{padding-top:84px; padding-bottom:84px;}
  .mmh-s8{padding-top:66px;}
}

/* On a 27" the clamp reached its 82px ceiling while the measure stopped at
   1320px, so "The principles of adaptation do not." needed ~1430px and dropped
   "not." to a line of its own. Ceiling lowered to 72px: the same line then
   measures ~1255px, leaving 65px of grace. Each sentence stays one line. */
.mmh-takeaway p{
  font-size:clamp(52px,5vw,72px);
}

/* ------------------------------------------------------------
   s10 - closing. Editorial Boundary lifted out of its footnote
   panel and paired with Cite This Article as equal halves; the
   references then close the page beneath them. The boundary is
   the article's integrity statement, not a footnote, so it now
   outranks the bibliography rather than sitting under it.
   Reuses s8's synthesis label so the two splits rhyme.
   ------------------------------------------------------------ */
.mmh-close{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,4.4vw,72px);
  margin:0 0 clamp(58px,6.6vw,108px);
}
.mmh-close__col p{
  font-family:var(--f-eyebrow);
  font-weight:400;
  font-size:16.5px;
  line-height:1.62;
  color:rgba(6,20,38,.82);
  margin:0;
  max-width:none;
}
.mmh-close__col p + p{margin-top:.7em;}
.mmh-close__url{
  display:inline-block;
  margin-top:.9em;
  font-family:var(--f-eyebrow);
  font-size:15px;
  color:var(--ink);
  text-decoration-color:rgba(6,20,38,.35);
  text-underline-offset:3px;
}
.mmh-close__url:hover{text-decoration-color:var(--orange);}
.mmh-refs__head{margin-top:0;}

@media (max-width:900px){
  .mmh-close{grid-template-columns:1fr; gap:clamp(28px,4vw,44px);}
}

/* s10 is ONE section: "Sources & Footnotes" becomes the title, and the three
   sub-blocks all take the same label so nothing reads as a separate section.
   Deliberately NOT an orange eyebrow for "Research references" - orange
   eyebrows mark sections here, and one mid-section would undo the point. */
.mmh-s8 .mmh-sans-title{margin-bottom:clamp(38px,4.2vw,64px);}
.mmh-refs__label{margin-bottom:clamp(18px,2vw,26px);}

/* Divider centred in the gap via the container, so it stays a divider rather
   than becoming an edge belonging to the right column. */
.mmh-close{position:relative;}
.mmh-close::before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:50%;
  width:1px;
  background:rgba(6,20,38,.18);
}

/* Boundary in bold - it's the integrity statement, and it should look like
   something being stated plainly rather than something tucked away. Same rule
   as s8: bold is AquaFit's voice, roman is the record. */
.mmh-close__col:first-child p{
  font-weight:600;
  color:var(--ink);
}

@media (max-width:900px){
  .mmh-close::before{display:none;}
}

/* s10 spacing pass.
   Title was sitting 115px below the navy slab - too much air for a section
   that closes the page. Inside the split band the content was pinned to the
   top hairline (19px above, 84px below); one --closepad now drives both, so
   label+copy sit centred between the hairline above and the hairline below,
   and the divider spans the whole band rather than stopping at the copy. */
.mmh-close{
  --closepad:clamp(32px,3.8vw,54px);
  margin-bottom:var(--closepad);
}
.mmh-close .mmh-synth__label{
  padding-top:var(--closepad);
}
.mmh-close::before{
  bottom:calc(-1 * var(--closepad));
}
.mmh-s8{padding-top:clamp(54px,6.1vw,90px);}

@media (max-width:620px){
  .mmh-s8{padding-top:46px;}
}

/* Divider shortened to a delineating mark rather than a full-height rule.
   The element still spans the whole band, but paints only the middle 52% -
   that way it stays perfectly centred between the hairlines automatically,
   with no offset maths to drift when the copy length changes. */
.mmh-close::before{
  background:linear-gradient(180deg,
    transparent 0 24%,
    rgba(6,20,38,.18) 24% 76%,
    transparent 76% 100%);
}

/* Cite This Article matches the boundary's weight. Stuart's call, for internal
   consistency across the three blocks. */
.mmh-close__col p{
  font-weight:600;
  color:var(--ink);
}

/* Kill last-line orphans in the closing split. text-wrap:pretty tightens the
   preceding lines so the final line carries more than a single word; browsers
   without it simply wrap as before. */
.mmh-close__col p{
  text-wrap:pretty;
}

/* Closing clause travels as one unit so the paragraph can't end on a stub.
   Measured ~230px at 16.5px, well inside the column at every breakpoint. */
.mmh-nb{white-space:nowrap;}

/* AUDIT FIX - tablet. The 52px clamp FLOOR held the type steady from ~1040px
   down to the 620px breakpoint while the measure kept narrowing, so "not."
   dropped to its own line again - the 27" bug mirrored at the other end.
   Floor lowered so the size stays proportional right down to the phone rule. */
.mmh-takeaway p{
  font-size:clamp(34px,4.9vw,72px);
}

/* Below ~700px a 36-character sentence cannot hold one line at a readable
   size, so the goal shifts from preventing the wrap to controlling it:
   balance splits the sentence evenly instead of orphaning "not." */
.mmh-takeaway p,
.mmh-s5__closing p,
.mmh-thesis,
.mmh-sans-title{
  text-wrap:balance;
}

/* AUDIT FIX - brief section 16 sets a 16px floor for body copy. Two roles were
   under it. Both are read as prose, not as labels, so the floor applies. */
.mmh-s2__review-title{
  font-size:clamp(16px,1.02vw,17px);       /* was 15px at phone AND tablet */
}
@media (max-width:620px){
  .mmh-hero__statement p{
    font-size:16px;                        /* was 15.5px */
    line-height:1.44;
  }
}

/* ============================================================
   AUDIT FIX - the worst defect found. The descent band was sized
   in px/vw, i.e. against VIEWPORT WIDTH, but once the columns
   stack the section grows far taller than the band. The header
   copy ran out of the dark water while still coloured white for
   it: 3.34:1 at the top of the paragraph falling to 1.22:1 by
   the last line - white on #D8ECF3.

   Percentage height resolves against the SECTION instead, so the
   band scales with the content and reproduces the desktop ratio
   (copy ending around 60% of the band) at any width.
   ============================================================ */
@media (max-width:900px){
  .mmh-s4::after{height:72%;}
}

/* ============================================================
   AUDIT FIX - s5 header on mobile, proper version.
   A single band cannot serve both widths: at 390 the copy ends
   at 60% of the band, at 768 it ends at 67%, and the navy
   quadrant below needs LIGHT water exactly where the white copy
   above needs DARK. No ramp position satisfies both.

   So the type stops sitting on an ambiguous gradient at all: the
   header block gets its own solid navy backing (full-bleed), and
   the descent runs in the gap BETWEEN the copy and the subhead,
   where no type lives. Content-anchored, so it holds at any width.
   ============================================================ */
@media (max-width:900px){
  .mmh-s4::after{display:none;}
  .mmh-s4{padding-top:0;}

  .mmh-s4__head{
    position:relative;
    background:var(--field);
    margin-inline:calc(50% - 50vw);       /* full-bleed out of the wrap */
    padding-inline:calc(50vw - 50%);      /* and put the copy back */
    padding-top:clamp(64px,9vw,96px);
    padding-bottom:clamp(30px,5vw,54px);
  }
  .mmh-s4__head::after{
    content:"";
    position:absolute;
    left:0; right:0; top:100%;
    height:clamp(94px,14vw,132px);
    background:linear-gradient(180deg,
      var(--field) 0%, #1E5273 24%, #2A6588 42%,
      #5893B0 60%, #9CC5D8 76%, #C3DEEA 89%, var(--pale-aqua) 100%);
  }
  /* subhead must clear the descent band */
  .mmh-s4 .mmh-subhead{margin-top:clamp(124px,19vw,176px);}
}

/* AUDIT FIX - stacked layouts buried the magnifier photo 784px BELOW the
   heading, after all the copy, so the section opened with a wall of text.
   Dissolving .mmh-s2__right into the split grid lets the photo take order:-1
   and lead the section as a full-bleed band, the way it reads on desktop.
   .mmh-s2__left keeps its own block flow, so the copy is untouched. */
@media (max-width:900px){
  .mmh-s2__right{display:contents;}
  .mmh-s2__photo{order:-1; margin-bottom:clamp(18px,3vw,28px);}
  .mmh-s2__left{order:0;}
  .mmh-s2__quote{order:1;}
  .mmh-s2__review{order:2;}
}

/* Internal links. The hero kicker becomes the route back to the series index
   without looking like a link until you reach for it. */
.mmh-hero__eyebrow a{
  color:inherit;
  text-decoration:none;
  transition:color .18s ease;
}
.mmh-hero__eyebrow a:hover,
.mmh-hero__eyebrow a:focus-visible{
  color:var(--orange);
  text-decoration:underline;
  text-underline-offset:4px;
}

/* Inline body link - underlined so it reads as a link in running copy, but
   weighted to sit inside the sentence rather than shout. */
.mmh-inline-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:rgba(6,20,38,.38);
  transition:text-decoration-color .18s ease, color .18s ease;
}
.mmh-inline-link:hover,
.mmh-inline-link:focus-visible{
  color:#B3620F;
  text-decoration-color:var(--orange);
}