/* ============================================================
   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;
  font-family:var(--f-body);
  font-size:11px; 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;}
}