/* ---------------------------------------------------------------------------
     FONTS — the genuine design fonts, self-hosted. Identical stack to the
     homepage (index.html) so the two pages render as one system:
       • Muro        → big hero display headline + the Myth/FACTS pill labels
       • BookmanOpti → partner names (consult card)
       • Noto Sans   → all body copy incl. section headings (Myth/Fact copy,
                       Introduction, subtitles) — replaces the XD-declared
                       Poppins / Noto Nastaliq Urdu substitution artifacts
       • Montserrat  → references + legal + nav "HOME"
       • Roboto      → the MENSHEALTHCARE wordmark
     --------------------------------------------------------------------------- */
  @font-face{
    font-family:'Muro';
    src:url('Muro/Muro.otf') format('opentype');
    font-weight:normal; font-style:normal; font-display:swap;
    /* Muro ships CONTRADICTORY vertical metrics (unitsPerEm 1000): hhea and OS/2
       typo say ascender 750 / descender -250, while OS/2 usWinAscent/Descent say
       1000 / 0. Engines pick different tables — WebKit uses hhea (caps render
       .107em HIGH), Chrome/Windows uses usWin (caps render .143em LOW) — so a
       label centred in one browser is visibly off in the other.
       Pin the metrics instead. With ascent − descent = the font's own capHeight
       (714/1000) and ascent + descent = 1em, a line-height:1 box centres caps
       exactly, in every engine that honours these descriptors, with no padding
       hacks. Ignored by Safari <16.4, which then falls back to hhea (caps .107em
       high — the smaller of the two native errors). */
    ascent-override:85.7%;
    descent-override:14.3%;
    line-gap-override:0%;
  }
  @font-face{
    font-family:'BookmanOpti';
    src:url('BookmanOpti/BOOKmanOpti-Light.otf') format('opentype');
    font-weight:100 900; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'MontserratLocal';
    src:url('Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight:100 900; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'RobotoLocal';
    src:url('Roboto/Roboto-Bold.ttf') format('truetype');
    font-weight:700; font-style:normal; font-display:swap;
  }
  @font-face{
    /* Body copy. Variable font (wght 400–700): the design uses Regular and Bold only. */
    font-family:'Noto Sans';
    src:url('NotoSans/NotoSans-Variable.woff2') format('woff2');
    font-weight:400 700; font-style:normal; font-display:swap;
  }
  @font-face{
    /* Myth/FACTS body copy: the XD paints these in Poppins (client QA, per finding). */
    font-family:'Poppins';
    src:url('Poppins/Poppins-Regular.woff2') format('woff2');
    font-weight:400; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:'Poppins';
    src:url('Poppins/Poppins-Bold.woff2') format('woff2');
    font-weight:700; font-style:normal; font-display:swap;
  }
  :root{
    --teal:#204D4C;
    --teal-2:#2E8876;
    --green:#51A090;
    --blue:#AEE0E8;
    --mint:#D9ECD2;

    --display-font:'Muro','MontserratLocal',Impact,sans-serif;
    --heading-font:'BookmanOpti','Bookman',Georgia,'Times New Roman',serif;
    --body-font:'Noto Sans','MontserratLocal','Helvetica Neue',Helvetica,Arial,sans-serif;
    --legal-font:'MontserratLocal','Helvetica Neue',Arial,sans-serif;
    --brand-font:'RobotoLocal','Helvetica Neue',Helvetica,Arial,sans-serif;
  }

  /* ---------------------------------------------------------------------------
     OLD-BROWSER COMPATIBILITY (~2018+): every fluid clamp() value is preceded by
     a static fallback; flex `gap` is avoided in favour of margins; aspect-ratio
     carries an @supports fallback. (Same contract as index.html.)
     --------------------------------------------------------------------------- */
  *{ box-sizing:border-box; }
  body{
    margin:0;
    font-family:var(--body-font);
    color:var(--teal);
    background:#fff;
  }
  img{ max-width:100%; display:block; }
  a{ text-decoration:none; color:inherit; }

  /* .page is the stacking context for the full-bleed watercolour washes: they are
     z-index:-1 pseudo-elements, so .page must own the context for them to paint
     ABOVE its white background yet BELOW every section's own background/content
     (in the XD the washes sit at the bottom of the layer stack). overflow:hidden
     also clips their 100vw width (which exceeds the scrollbar-less body). */
  .page{ width:100%; margin:0 auto; background:#fff; overflow:hidden; position:relative; z-index:0; }
  .wrap{
    padding-left:48px; padding-right:48px;
    padding-left:clamp(16px,4vw,72px);
    padding-right:clamp(16px,4vw,72px);
  }

  /* ---------- Nav pill (shared with the homepage) ---------- */
  .btn-pill{
    position:relative;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:999px;
    padding:.64em 3em;
    font-family:var(--heading-font);
    font-weight:500; color:#fff;
    white-space:nowrap; line-height:1.1;
    text-transform:uppercase;
  }
  /* Nav "HOME": square-cornered outline box with a bold sans label — matches the
     XD (and the homepage's "HARD FACTS" button). */
  .btn-pill.outline{
    background:transparent;
    color:var(--teal);
    border:3px solid var(--teal);       /* XD: 3px #204D4C stroke */
    border-radius:0;
    font-family:'MontserratLocal','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-weight:700;
    letter-spacing:.6px;
    font-size:16px;
    font-size:clamp(14px,1.3vw,25px);   /* XD: 25px label in a 210×65 box */
    padding:.6em 1.2em;
    transition:background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .btn-pill.outline:hover,
  .btn-pill.outline:focus-visible{
    background:var(--green); border-color:var(--green); color:#fff;
  }

  /* ---------- HERO ---------- */
  .hf-hero{
    position:relative;
    padding:14px 16px 0;
    padding:clamp(10px,.89vw,17px) clamp(12px,1.15vw,22px) 0;   /* XD: card top 17px, side 22px */
  }
  /* Nav pill (XD Rectangle 7: 1380×100 at board x=270, r=[0,0,15,15]) — was inline
     styles, moved here so the narrow-viewport rules below can reach it. Mirrors the
     homepage's .nav-pill exactly so both pages share one nav treatment. */
  .nav-pill{
    position:absolute; top:0; left:50%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
    z-index:5;
    background:#fff;
    border-radius:0 0 15px 15px;    /* corners [0,0,15,15] in the XD */
    width:71.9%;                    /* XD: nav rect spans 1380 of the 1920 board */
    max-width:1380px;
    padding:1rem 40px;
    padding:1rem clamp(20px,3vw,56px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;                       /* safe: space-between survives gap collapsing */
    flex-wrap:wrap;
  }
  /* Tablets (768–991) keep the exact desktop nav — the base 72%-wide centred pill.
     Only phones need adapting: at 72% the brand + button can't share a row, so the
     pill hangs near-full-width from the page top, inset 16px. (Same as homepage.) */
  @media (max-width:767.98px){
    .nav-pill{
      left:16px; right:16px; width:auto;
      -webkit-transform:none; transform:none;
      padding:.72rem 20px;
      gap:.6rem;
    }
  }
  .brand{
    font-family:var(--brand-font);
    font-weight:700;
    font-size:22px;
    font-size:clamp(16px,1.4vw,27px);            /* XD: 27px wordmark */
    letter-spacing:.6px;
    color:var(--teal);
  }
  /* Hold the wordmark colour on hover — Bootstrap Reboot's a:hover would turn it link-blue. */
  .brand:hover{ color:var(--teal); }
  .hf-hero-card{
    position:relative;
    border-radius:24px;                       /* XD: BG2-IMG r=24 */
    overflow:hidden;
    display:flex; flex-direction:column;
    min-height:540px;
    min-height:clamp(430px,55.3vw,1062px);    /* XD: card height 1062 at the 1920 board */
    /* XD hero fill is the bedroom photo (BG2-IMG). A soft blue→mint wash on the
       left keeps the teal headline legible over the lighter part of the photo. */
    background:url('../revamp/about/BG2-IMG.png') center top / cover no-repeat;
  }
  /* NOTE: the XD has NO gradient overlay on the hero photo at desktop — whatever
     wash exists is baked into BG2-IMG.png. The ::after overlays exist only in the
     narrow-viewport media queries below as legibility helpers (no XD reference). */
  /* Couple cut-out (XD "13": 888×952 frame at board 917/127, natural 1119×1200
     covers at the same aspect, no offsets/flip): bottom FLUSH with the card
     bottom, right edge 93px in from the card's right (93/1876=4.96%). */
  .hf-hero-couple{
    position:absolute; right:4.96%; bottom:0; z-index:2;
    width:47.33%;                              /* XD: 888 of the 1876 card */
    height:auto;
  }
  .hf-hero-body{
    position:relative; z-index:3;
    flex:1 1 auto;
    display:flex; flex-direction:column; justify-content:center;
    max-width:60%;
    padding:40px;
    padding:clamp(22px,3.9vw,75px) clamp(20px,3vw,58px) clamp(16px,2vw,40px);
  }
  .hf-display{
    font-family:var(--display-font);
    font-weight:normal;                        /* Muro ships one heavy weight */
    color:var(--teal);
    line-height:.878;                          /* XD: 148px text, line spacing 130 */
    letter-spacing:0;                          /* per-character kerning applied via spans (XD charSpacing) */
    margin:0;
    font-size:64px;
    font-size:clamp(38px,7.71vw,148px);        /* XD: 148px at the 1920 board */
  }
  /* XD ranged style: the whole "WHAT's" line is filled rgb(46,136,118) — a
     brighter green-teal than the base #204D4C of the other two lines. */
  .hf-display .hf-display-accent{ color:#2e8876; }
  /* Per-character XD kerning (charSpacing per-mille em). Classes, NOT inline
     style attributes, so the prod .htaccess CSP (style-src 'self', no
     'unsafe-inline') doesn't block them — a CSP hash/nonce cannot whitelist an
     inline style attribute, only a class in this hashed <style> block works. */
  .hf-display .k20{ letter-spacing:-.02em; }
  .hf-display .k25{ letter-spacing:-.025em; }
  .hf-display .k30{ letter-spacing:-.03em; }
  .hf-display .k35{ letter-spacing:-.035em; }
  /* Title block inside the hero card's lower area (XD: "The Little Book…" y791,
     "SHARING…" y860, both over the bedroom, under the headline). */
  .hf-hero-title{
    position:relative; z-index:3;
    max-width:60%;
    padding:0 40px 40px;
    padding:0 clamp(20px,3vw,58px) clamp(16px,2.6vw,50px);
  }
  .hf-hero-title h2{
    font-family:var(--body-font);              /* Noto Sans (headings stay Noto Sans; only body copy is Poppins) */
    font-weight:500;
    color:var(--teal);
    margin:0;
    font-size:30px;
    font-size:clamp(24px,2.6vw,50px);          /* XD: 50px */
    line-height:1.05;
  }
  .hf-hero-title p{
    font-family:var(--body-font);              /* Noto Sans */
    color:var(--teal);
    margin:.5em 0 0;
    font-size:17px;
    font-size:clamp(14px,1.56vw,30px);         /* XD: 30px */
    line-height:1.15;
    letter-spacing:.2px;
  }
  /* Right-edge "BOOK CONSULTATION" quick tab (XD Rectangle 8: 96×243 at board
     y=368, r [12,0,0,12], drop shadow 0/3/3 rgba(0,0,0,.161)).
     Desktop-only decorative shortcut; hidden on small screens where it can't fit. */
  .hf-book-tab{
    /* Sticky: stays pinned to the viewport's right edge while the page scrolls
       (top:33% keeps it near the XD's y=368 position within the hero). */
    position:fixed; top:33%; right:0; z-index:40;
    /* Creative review "follow XD sizes": XD Rectangle 8 is 96×243 with 56px logos.
       Fixed on desktop (was scaling with vw → too short on laptops). */
    width:96px;
    height:243px;
    background:#fff;
    border-radius:12px 0 0 12px;
    box-shadow:0 3px 6px rgba(0,0,0,.161);   /* XD: dy 3, blur 6 (JSON r=3 × 2) */
    padding:14px 8px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
  }
  .hf-book-tab span{
    font-family:var(--body-font);
    font-weight:700;
    color:var(--teal);
    display:block;
    line-height:1.15;
    letter-spacing:.3px;
    margin-bottom:2px;
  }
  /* XD: BOOK 18px, CONSULTATION 10px. */
  .hf-book-tab .bc-book{ font-size:18px; }
  .hf-book-tab .bc-consult{ font-size:10px; margin-bottom:8px; }
  .hf-book-tab img{ width:56px; height:auto; margin-top:6px; }   /* XD: 56px logos, not rounded (QA) */
  .hf-book-tab img + img{ margin-top:20px; }                     /* XD: 20px gap between the two partner icons (y 503→523) */
  /* Icons are wrapped in leave-modal links; carry the spacing on the link so the
     wrapping doesn't change the XD gaps (img + img no longer matches once wrapped). */
  .hf-book-tab .bc-link{ display:block; cursor:pointer; margin-top:6px; transition:opacity .15s ease; }
  .hf-book-tab .bc-link + .bc-link{ margin-top:20px; }
  .hf-book-tab .bc-link img{ margin-top:0; }
  .hf-book-tab .bc-link:hover{ opacity:.85; }
  /* Desktop-exact hero copy placement (board-relative, card at 22/17):
     h1 first baseline at board y=412 → box top 256px below the card top, left 87px
     (Muro: baseline − halfLeading − ascent). Subtitle block is absolutely pinned:
     h2 "The Little Book…" centred at card x=393 (block 41.9% wide), baseline 774;
     tagline centred at x=476 (block 50.74%), baseline 843 → 36.5px gap. */
  @media (min-width:992px){
    .hf-hero-body{
      justify-content:flex-start;
      /* +18px over the original 256/13.33vw: pinning Muro's metrics (see @font-face)
         moves the first baseline up by (ascent−descent) − 1em = .143em ≈ 18px at
         148px. That shift is unavoidable — the baseline is lh/2 + (A−D)/2, and A−D
         is fixed at the cap height so the pill labels can self-centre — so the XD's
         board-y 412 baseline is restored here instead. */
      padding:274px 0 0 87px;
      padding:14.27vw 0 0 4.53vw;
    }
    .hf-hero-title{
      position:absolute;
      top:714px; top:37.19vw;   /* measured baseline sat 6px low of XD y=791/860 */
      left:0; right:0;
      max-width:none;
      /* XD: "The Little Book" and "SHARING" both have their LEFT EDGE at board x=109 —
         the SAME left edge as the headline (87px from the card). Left-align all three
         at that offset so they stay aligned at EVERY width (the old centred %-width
         blocks drifted, misaligning on big screens). */
      padding:0 0 0 87px;
      padding:0 0 0 4.53vw;
    }
    .hf-hero-title h2{
      text-align:left;
      white-space:nowrap;
    }
    .hf-hero-title p{
      text-align:left;
      white-space:nowrap;
      margin:36.5px 0 0;
      margin:1.9vw 0 0;
    }
  }
  /* Tablet + phone: stack the hero like every other section on the page — copy on
     top, photo below it, both centred. The couple cut-out returns to FLOW (it is
     first in the DOM, so order:1 moves it after the copy) and grounds on the card's
     bottom edge; it is a clean cut-out (transparent top row and corners), so it
     stacks without a seam. */
  @media (max-width:991.98px){
    .hf-hero-body,.hf-hero-title{ max-width:100%; }
    .hf-book-tab{ display:none; }
    /* Content-height card: the 430px min-height floor left a dead band, because
       .hf-hero-body centred itself in the slack. */
    .hf-hero-card{ min-height:0; }
    .hf-hero-couple{
      display:block;
      position:relative;                     /* keeps z-index above the wash */
      order:1;
      right:auto; bottom:auto;
      width:56%;
      max-width:440px;                       /* same cap as the stacked section images */
      opacity:1;
      margin:4px auto 0;                     /* centred */
    }
    .hf-hero-body{
      flex:0 0 auto;
      justify-content:flex-start;
      text-align:center;
      padding:84px 20px 0;                   /* clears the nav pill */
    }
    .hf-hero-title{
      margin-top:0;
      text-align:center;
      padding:12px 16px 0;
    }
    /* The bedroom photo is now only a backdrop behind the copy (the couple carries
       the imagery), so a light vertical wash replaces the old strong left-weighted
       one, which was built for the copy-left / photo-right overlay. */
    .hf-hero-card::after{
      content:""; position:absolute; top:0; right:0; bottom:0; left:0; z-index:1;
      pointer-events:none;
      background:linear-gradient(180deg, rgba(196,232,238,.72) 0%, rgba(196,232,238,.46) 55%, rgba(196,232,238,.2) 100%);
    }
  }
  @media (max-width:575.98px){
    /* Phone: a wider photo (the card itself is narrow) and smaller title type. */
    .hf-hero-couple{ width:92%; max-width:340px; }
    .hf-hero-body{ padding:66px 20px 0; }
    /* 24px wrapped "The Little Book of Hard Facts" onto two lines in the 311px
       column (it needs 329); 22px fits on one. */
    .hf-hero-title h2{ font-size:22px; }
    /* Measured (not estimated): the tagline needs 303px at 12px with the tracking
       dropped, against 319px available once the block's padding is 16px — so it
       stays on one line as in the XD, with real slack. */
    .hf-hero-title p{ font-size:12px; letter-spacing:0; }
  }

  /* ---------- INTRODUCTION ---------- */
  .hf-intro{
    display:flex;
    /* Ground the cut-out on the section's baseline: the men sit at the image's bottom
       edge, so anchoring the image bottom (no bottom padding) removes the empty gap
       under it that made it look like it was floating. */
    align-items:flex-end;
    /* XD: 68px between the section top (board y=1079) and image 21's top (y=1147). */
    padding:40px 0 0;
    padding:clamp(24px,3.54vw,68px) 0 0;
    /* XD "Path 1": a full-width 1920×914.875 rect behind the whole section.
       Vertical linear gradient, stops read bottom→top because the shape is rotated
       180° in the XD: #AEE0E8 (rgb 174,224,232) at the section BOTTOM fading to
       rgba(255,255,255,.302) at the TOP, painted over the white artboard. */
    background:#fff;
    background-image:linear-gradient(0deg, #aee0e8 0%, rgba(255,255,255,.302) 100%);
    position:relative;
  }
  /* XD: image 21 spans from the board's left edge (x=-53) — flush left, no gap. */
  .hf-intro-media{ flex:0 0 60%; max-width:60%; padding:0; }
  .hf-intro-media img{ width:100%; height:auto; display:block; }
  /* Desktop: XD image "21" is 1275×848 anchored at board x=-53 (53px cropped off
     the left edge), visible span 0..1222 → media column 1222/1920=63.65%, image
     66.41vw shifted -2.76vw. This also restores the section's XD height (915px at
     1920), which keeps the intro copy clear of the myth-1 image head that rises
     into this section. */
  @media (min-width:992px){
    .hf-intro-media{ flex:0 0 63.65%; max-width:63.65%; }
    .hf-intro-media img{
      width:1275px;      width:66.41vw;
      max-width:none;
      margin-left:-53px; margin-left:-2.76vw;
    }
    /* XD: copy block starts 40px LEFT of the image's visible right edge. */
    .hf-intro .hf-intro-copy h2,
    .hf-intro .hf-intro-copy p{ margin-left:-40px; margin-left:-2.06vw; }
  }
  .hf-intro-copy{
    flex:1 1 auto;
    align-self:flex-start;             /* XD: copy is TOP-aligned with the image (heading near the image top), not centred */
    text-align:center;
    /* The myth-1 couple image rises into this section (visible head ink tops out
       at board y≈1959, ~105px clear of the copy's last line at y≈1853). Keep the
       copy above it as a safeguard so text can never be buried at odd wrap/zoom
       states. */
    position:relative; z-index:1;
    /* No left padding: pull the 563px block toward the image (horizontal position per
       the earlier request; the copy is VERTICALLY centred via align-self:center). */
    padding:clamp(16px,3vw,64px) clamp(16px,3vw,64px) clamp(16px,3vw,64px) 0;
  }
  .hf-intro-copy h2,
  .hf-intro-copy p{ max-width:563px; margin-left:0; margin-right:auto; }
  .hf-intro-copy h2{
    font-family:var(--body-font);              /* Noto Sans (heading stays Noto Sans; only body copy is Poppins) */
    font-weight:700;
    color:var(--teal);
    margin-top:0; margin-bottom:.5em;
    font-size:38px;
    font-size:clamp(28px,3.13vw,60px);         /* XD: 60px */
    line-height:1.1;
  }
  .hf-intro-copy p{
    /* XD paints the Introduction body in Poppins (Regular + Bold runs). */
    font-family:'Poppins','Noto Sans','MontserratLocal','Helvetica Neue',Helvetica,Arial,sans-serif;
    color:var(--teal);
    font-size:17px;
    font-size:clamp(15px,1.15vw,22px);         /* XD: 22px */
    line-height:1.5;                           /* XD: 33px baselines at 22px (uniform grid) */
    /* XD: the centred body block's widest line spans 563px at the 1920 board
       (anchor ±281.5) — cap the text to that width so it wraps as in the design.
       Left/right margins are set by the shared block rule above (left-aligned).
       Paragraph gap = one blank line: baseline-to-baseline 66px = line-height (33)
       + a 33px (1.5em) bottom margin, matching the XD's blank-line paragraph break. */
    margin-top:0; margin-bottom:1.5em;
  }
  .hf-intro-copy p:last-child{ margin-bottom:0; }
  /* Citation numbers: superscript, NOT bold (client copy revision — the XD painted
     them bold, but they read as part of the sentence when they are). */
  .hf-intro-copy sup{ font-size:.7em; font-weight:400; }
  .hf-intro-copy strong{ font-weight:700; }                /* XD: Poppins-Bold runs → Noto Sans 700, same teal */
  @media (max-width:991.98px){
    /* Stacked: copy first, image under it (column-reverse — the DOM keeps media
       first). No bottom padding: the image grounds on the section bottom. */
    .hf-intro{ flex-direction:column-reverse; align-items:center; padding-bottom:0; }
    .hf-intro-media,.hf-intro-copy{ flex:0 0 auto; max-width:100%; width:100%; }
    .hf-intro-media{ max-width:460px; margin:12px auto 0; }
    /* Stacked: re-centre the copy block and restore symmetric padding. */
    .hf-intro-copy{ padding-left:clamp(16px,3vw,64px); }
    .hf-intro-copy h2,.hf-intro-copy p{ max-width:563px; margin-left:auto; margin-right:auto; }
  }

  /* ---------- MYTH / FACT sections ---------- */
  .myths{
    /* XD "BG3": a single 1920×1080 image (scaleBehavior "fill") whose top edge sits
       exactly where the intro ends (board y=1994), drawn at opacity 0.7 over the
       white artboard. The white 30% veil layered over the image reproduces that
       opacity without touching the content; 100% auto keeps the board's 16:9 scale.
       NO background-color here: the section must stay transparent below the image,
       or it would paint over the row-anchored washes (they are z-index:-1 pseudos,
       which render BENEATH in-flow backgrounds). .page supplies the white base.
       The veil layer is clipped to the image's 16:9 box (56.25vw) for the same
       reason — full-height it would fog every wash further down. */
    background-image:
      linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)),
      url('../revamp/about/BG3.png');
    background-repeat:no-repeat;
    background-position:top center;
    background-size:100% 56.25vw, 100% auto;
    padding:24px 0;
    padding:clamp(16px,2vw,40px) 0;
  }
  .myth-row{
    display:flex;
    /* Ground the cut-out figures on a shared baseline (copy stays centred beside them)
       so no image floats with empty space beneath it. */
    align-items:flex-end;
    max-width:1500px;
    margin:0 auto;
    padding:clamp(18px,3vw,60px) clamp(16px,4vw,72px);
    position:relative;                /* containing block for the wash pseudos */
  }
  .myth-row.rev{ flex-direction:row-reverse; }
  /* Row 1 — XD image "18" is oversized and breaks the grid: a 1040×1206 frame at
     board x=841/y=1666 (right edge 39px off the board → 2.03vw gap) whose pattern
     fill carries offsetY=0.18930 — the PNG is drawn 228px LOWER inside the frame
     and the frame clips its bottom 228px. Net visible geometry: the PNG's top
     lands at board y=1894, i.e. 100px (5.19vw) above the myths section start, so
     only the TOP OF THE MAN'S HEAD (≈35px of ink) overlaps the Introduction.
     Reproduced by raising the media box 7.19vw (5.19vw + the section's 2vw top
     padding) with overflow:hidden as the XD frame, and a -11.89vw bottom margin
     on the img so its clipped 228px overflow the box and are cut. The copy block
     centres at XD x=515 → 9.84vw left padding on the leftover column. Desktop
     only; stacked layouts keep the shared rules. */
  @media (min-width:992px){
    .myth-row:nth-child(1){
      max-width:none;
      padding:0 39px 0 0;
      padding:0 2.03vw 0 0;
    }
    .myth-row:nth-child(1) .myth-media{
      flex:0 0 auto; max-width:none; padding:0;
      overflow:hidden;
      margin-top:-138px; margin-top:-7.19vw;
    }
    .myth-row:nth-child(1) .myth-media img{
      width:1040px;   width:54.17vw;
      margin-bottom:-228px; margin-bottom:-11.89vw;
    }
    .myth-row:nth-child(1) .myth-copy{
      padding:0 0 0 189px;
      padding:0 0 0 9.84vw;
    }

    /* Row 2 — XD wraps this myth in a card ("BG", two stacked paths at board
       x=118/y=2875, 1683.18×1018.21): BG2.png (1920×1080, cover) below a
       #AEE0E8→#DAECD2 gradient veil at opacity .696 (axis .211,.145→.947,.857 →
       120.3deg with stops at 19.4%/92.3% of the CSS gradient line), elliptical
       corners rx23.7/ry45.4, drop shadow 0/3/27.5 rgba(0,0,0,.161). The photo
       ("9", 941×1162 at x=116) rises 144px (7.5vw) above the card top — its
       bottom is exactly flush with the card's, so pinning bottoms (the row's
       align-items:flex-end) and lifting the img by 7.5vw reproduces both. */
    .myth-row:nth-child(2){
      max-width:none;
      margin:0 6.19vw 0 6.15vw;
      padding:0;
      background-image:
        linear-gradient(120.3deg, rgba(174,224,232,.696) 19.4%, rgba(218,236,210,.696) 92.3%),
        url('../revamp/about/BG2.png');
      background-repeat:no-repeat;
      background-position:center;
      background-size:cover;
      border-radius:23.7px / 45.4px;
      /* XD "BG": dy 3, black 16% (alpha 41/255), JSON r=27.5. The .agc stores the
         Gaussian SIGMA, so CSS blur-radius = 2r = 55px — do NOT use 27.5, which is
         half the design's spread and reads as no shadow at all. Verified against
         the approved PDF, which carries this shadow as a raster soft mask: peak
         alpha exactly 41/255, falloff centred on the card edges +3px, 10-90% rise
         66px => sigma 25.8 => blur ~51.5px. */
      box-shadow:0 3px 55px rgba(0,0,0,.161);
    }
    .myth-row:nth-child(2) .myth-media{ flex:0 0 auto; max-width:none; padding:0; }
    .myth-row:nth-child(2) .myth-media img{
      width:941px;      width:49.01vw;
      margin-top:-144px; margin-top:-7.5vw;
      margin-left:-2px;  margin-left:-.1vw;
    }
    .myth-row:nth-child(2) .myth-copy{
      padding:0 124px 0 0;
      padding:0 6.46vw 0 0;
    }

    /* Row 3 — XD image "14" (1383×1200 at board x=718/y=3635, no fill offsets):
       its bottom is flush with the row bottom (y=4835, where BG4 starts) and its
       top rises 259px (13.49vw) into the row-2 card zone — the man's head overlaps
       the section above, painting OVER the card (XD doc order 89 vs 8/78, same as
       DOM order here). Its right edge runs 181px (9.43vw) off the board, cropped
       by the artboard — .page{overflow:hidden} does the same. Copy block centres
       at XD x=552 → 28.75vw. */
    .myth-row:nth-child(3){
      max-width:none;
      padding:0;
    }
    .myth-row:nth-child(3) .myth-media{ flex:0 0 auto; max-width:none; padding:0; }
    .myth-row:nth-child(3) .myth-media img{
      width:1383px;      width:72.03vw;
      max-width:none;    /* the global img{max-width:100%} would cap the bleed */
      margin-top:-259px;  margin-top:-13.49vw;
      margin-right:-181px; margin-right:-9.43vw;
    }
    /* XD: the copy lines centre at x=552 and the widest (545px) spans 279..825 —
       past the image box's left edge (x=718, transparent there). Extend the copy
       content box to exactly 279..825 so the XD breaks hold without rewrapping. */
    .myth-row:nth-child(3) .myth-copy{
      /* Box widened ~3vw (symmetric) beyond the XD's tight 546px so the 4-line
         XD break structure holds at narrower widths too (the old box left only
         ~1px slack → the longest line re-wrapped below ~1500px). Centre unchanged. */
      padding:0 0 0 261px;
      padding:0 0 0 13.6vw;
      margin-right:-137px;
      margin-right:-7.15vw;
    }

    /* Row 4 — XD image "25" (796×1066 frame at board x=196/y=4734; the 896×1200
       PNG covers it at the identical aspect, no offsets): bottom flush with the
       row bottom (y=5800, the myth-5/6 cards zone) and top rising 101px (5.26vw)
       above the row top (y=4835 = BG4's start) — the man's head overlaps row 3,
       painting above its image (XD doc order 138 vs 89 = DOM order). Copy block
       centres at XD x=1389. */
    .myth-row:nth-child(4){
      max-width:none;
      padding:0;
    }
    .myth-row:nth-child(4) .myth-media{ flex:0 0 auto; max-width:none; padding:0; }
    .myth-row:nth-child(4) .myth-media img{
      width:796px;       width:41.46vw;
      margin-top:-101px; margin-top:-5.26vw;
      margin-left:196px; margin-left:10.21vw;
    }
    .myth-row:nth-child(4) .myth-copy{
      padding:0 134px 0 0;
      padding:0 6.98vw 0 0;
    }

    /* Rows 6 & 7 — the XD interleaves these two myths inside one tight zone.
       Row 6's flow top is the LEAD CARDS' BOTTOM (board 6818), so every offset here
       is measured from there — not from BG5's start (6710), which is 108px higher
       and was the origin these three values were first (wrongly) keyed to, leaving
       a 108px gap under the cards that QA flagged as "malaki yung spacing":
         image "16" (873×1169 at x=889/y=6631) → 187px above the row top
         BG5 wash (y=6710)                     → 108px above the row top
         pill (Rectangle 9 at y=6964)          → 146px below the row top
       Image 24 (896×1200 frame at x=180/y=7169) rises 621px above row 7's top, its
       fill offset (43.5px right / 157px down) clipped by the frame like row 1. */
    .myth-row:nth-child(6){
      max-width:none;
      padding:0;
    }
    /* .page prefix outranks the shared wash rule further down the file, which sets
       top:0 (equal specificity, later position would otherwise win). */
    .page .myth-row:nth-child(6)::before{
      top:-108px; top:-5.63vw;                   /* BG5 starts above the cards' bottom */
    }
    .myth-row:nth-child(6) .myth-media{
      flex:0 0 auto; max-width:none; padding:0;
      margin-right:158px; margin-right:8.23vw;   /* XD: image right edge at x=1762 */
    }
    .myth-row:nth-child(6) .myth-media img{
      width:873px;        width:45.47vw;
      max-width:none;
      margin-top:-187px;  margin-top:-9.74vw;
      margin-bottom:-10px; margin-bottom:-.52vw;
    }
    /* XD copy: pill 146px below the row top, block centred at x=663; content box
       widened to 600px (363..963, past the flex column's edge) so the XD line breaks
       survive Noto Sans' wider glyphs. */
    .myth-row:nth-child(6) .myth-copy{
      align-self:flex-start;
      padding:146px 0 0 363px;
      padding:7.6vw 0 0 18.91vw;
      margin-right:-74px; margin-right:-3.85vw;
    }
    .myth-row:nth-child(7){
      max-width:none;
      padding:0;
    }
    /* Path 7's gradient starts 517px above this (now short) row's top. */
    .myth-row:nth-child(7)::before{
      top:-517px; top:-26.93vw;
    }
    .myth-row:nth-child(7) .myth-media{
      flex:0 0 auto; max-width:none; padding:0;
      width:896px;        width:46.67vw;
      overflow:hidden;                            /* the XD frame clips the shifted fill */
      margin-left:180px;  margin-left:9.38vw;
      /* This image rises into row 6's copy, and at 1920 its head clears the copy's
         last line by 48px. But the copy's font sizes bottom out at their clamp
         floors (15px) while this frame keeps scaling with vw, so the head climbs
         into the text as the window narrows — measured +48px at 1905, +3px at 1425
         and −36px (overlapping) at 1185, the QA finding "bottom spacing of content
         it's almost near in the image".
         So shrink the rise FASTER than vw: the ramp below holds ~40px of clearance
         from 1920 down to ~1180, bounded so it never exceeds the XD's proportional
         rise on wide screens (min) or drifts too low on small ones (max). The frame
         height is trimmed by exactly the same amount, which keeps the image's BOTTOM
         where the XD puts it — the frame clips, so this crops slightly more of the
         legs instead of pushing the photo into the next row. */
      --rise24:-32.34vw;                          /* fallback: no clamp support */
      /* Ramp fitted through the two ends of the desktop range: -616px at 1905 (the
         XD's own rise, 48px clearance) and -190px at ~1010, where the floored text
         is at its tallest relative to the layout. */
      --rise24:clamp(-32.34vw, calc(289.6px - 47.54vw), -190px);
      margin-top:-621px;                          /* static fallback (Safari <13.1) */
      margin-top:var(--rise24);
      height:1200px;                              /* static fallback */
      height:calc(30.16vw - var(--rise24));
    }
    .myth-row:nth-child(7) .myth-media img{
      width:896px;        width:46.67vw;
      max-width:none;
      margin-top:157px;   margin-top:8.17vw;      /* pattern offsetY .13073 × 1200 */
      margin-left:44px;   margin-left:2.27vw;     /* pattern offsetX .04857 × 896  */
    }
    .myth-row:nth-child(7) .myth-copy{
      align-self:flex-start;                      /* XD: pill top = row top exactly */
      padding:0 202px 0 0;
      padding:0 10.52vw 0 0;
    }

    /* Row 8 — XD image "6" (1082×880 frame at board x=784/y=8369; natural
       1024×833 covers at the same aspect, no offsets, and the pattern carries
       flipX:true — the XD MIRRORS the photo, woman on the left): its top sits
       EXACTLY on the row top (= BG6's start) and its bottom runs 24px past the
       row bottom under the myth-9 card's top border — the XD paints the card
       ABOVE that sliver (doc order 4 vs 91), so the photo's white backdrop
       tucks cleanly under the card edge; the row-9 background painting later in
       the DOM reproduces that for free. Right edge 54px off the board. Copy
       block centres at XD x=483, pill 225px below the row top. */
    .myth-row:nth-child(8){
      max-width:none;
      padding:0;
    }
    .myth-row:nth-child(8) .myth-media{
      flex:0 0 auto; max-width:none; padding:0;
      margin-right:54px; margin-right:2.81vw;
    }
    .myth-row:nth-child(8) .myth-media img{
      width:1082px;       width:56.35vw;
      max-width:none;
      margin-bottom:-24px; margin-bottom:-1.25vw;
      transform:scaleX(-1);           /* XD pattern flipX */
    }
    .myth-row:nth-child(8) .myth-copy{
      align-self:flex-start;
      padding:225px 0 0 183px;
      padding:11.72vw 0 0 9.53vw;
    }

    /* Row 9 — XD "Rectangle 34" (1683×890 at board x=119/y=9225): a GRADIENT-only
       card — no background image — #AEE0E8→#DAECD2, axis (.191,-.035)→(.819,1.044)
       → 132.3deg with stops at 11.8%/89.2% of the CSS line; circular r=55 corners;
       NO drop shadow (verified by sweeping every dropShadow filter in the file —
       only the row-2 card, one hero rect and the consult card carry one). Photo
       "3" (912×972 at x=180; natural 720×768 covers at the same aspect, no
       offsets) rises 82px above the card top, bottom flush with the card bottom;
       the XD paints it above the card (doc order 101 vs 91 = DOM order). The copy
       block centres at XD x=1385 and is vertically centred in the card (XD content
       centre 9668 vs card centre 9670). */
    .myth-row:nth-child(9){
      max-width:none;
      margin:0 118px 0 119px;
      margin:0 6.15vw 0 6.2vw;
      padding:0;
      background:linear-gradient(132.3deg, #aee0e8 11.8%, #daecd2 89.2%);
      border-radius:55px;
    }
    .myth-row:nth-child(9) .myth-media{
      flex:0 0 auto; max-width:none; padding:0;
      margin-left:61px; margin-left:3.18vw;
    }
    .myth-row:nth-child(9) .myth-media img{
      width:912px;      width:47.5vw;
      max-width:none;
      margin-top:-82px; margin-top:-4.27vw;
    }
    .myth-row:nth-child(9) .myth-copy{
      padding:0 124px 0 0;
      padding:0 6.46vw 0 0;
    }

    /* Row 10 — XD image "19" (2280×1078 frame at board x=118/y=10038; natural
       2537×1200 covers at the same aspect, no offsets, no flip): WIDER than the
       board — its right side runs 478px off the 1920 edge, cropped by the
       artboard (= .page overflow:hidden). It spans the whole row, so it sits
       absolutely positioned behind the copy; z-index:-1 keeps it under the
       consult card's white background, which the XD paints over the photo's
       135px bottom overhang (doc order 90 vs 155) — the bed continues visibly
       around the card. The image TOP (y=10038, with BG7) sits 77px BEHIND the
       row-9 card's bottom (y=10115), so image and wash rise -77px above this
       row's flow top and the row keeps 10115→10981 (866px). Copy centres at XD
       x=483, pill at y=10362 (247px below the row top), text painting above the
       photo (text orders 103/104 vs 90). */
    .myth-row:nth-child(10){
      max-width:none;
      padding:0;
      height:866px; height:45.1vw;
      position:relative;
    }
    .myth-row:nth-child(10)::before{
      top:-77px; top:-4.01vw;               /* BG7 starts behind the row-9 card */
    }
    .myth-row:nth-child(10) .myth-media{
      position:absolute;
      z-index:-1;
      top:-77px; top:-4.01vw;               /* image top behind the row-9 card */
      left:118px; left:6.15vw;
      margin:0; padding:0; max-width:none;
    }
    .myth-row:nth-child(10) .myth-media img{
      width:2280px; width:118.75vw;
      max-width:none;
    }
    .myth-row:nth-child(10) .myth-copy{
      align-self:flex-start;
      padding:247px 954px 0 0;
      padding:12.86vw 49.68vw 0 0;
    }

    /* Closing — XD image "17" (1030×741 frame at board x=147/y=11354; natural
       1668×1200 covers at the same aspect, fill offset -11px horizontal, no
       flip): bottom flush with the References band. The section top sits 46px
       above the image (consult card bottom → image top is 102px in the XD, of
       which 56px is the consult section's own bottom padding). Headline centres
       at XD x=1444 — its widest line (577px) reaches LEFT of the image column's
       edge (x=1177), so the copy box extends under the image like row 3. First
       baseline 227px below the image top (≈213px h2 box top). */
    /* (.page prefix outranks the later base .hf-closing rules in the cascade.) */
    .page .hf-closing{
      max-width:none;
      padding:46px 0 0;
      padding:2.4vw 0 0;
    }
    .page .hf-closing-media{
      flex:0 0 auto; max-width:none;
      width:1030px;      width:53.65vw;
      margin-left:147px; margin-left:7.66vw;
      padding:0;
      overflow:hidden;                       /* the XD frame crops the shifted fill */
    }
    .page .hf-closing-media img{
      width:1030px;      width:53.65vw;
      max-width:none;
      margin-left:-11px; margin-left:-.57vw; /* pattern offsetX -.011 × 1030 */
    }
    .page .hf-closing-copy{
      align-self:flex-start;
      /* 213px below the section top minus the section's own 46px padding-top */
      padding:167px 187px 0 0;
      padding:8.7vw 9.74vw 0 0;
      margin-left:-22px; margin-left:-1.15vw;
      position:relative; z-index:1;          /* headline above the photo, as XD paints it */
    }
    /* XD line breaks are explicit (Start positive / conversations / about ED and /
       regain your sexual / confidence.). "regain your sexual" is the widest XD line
       (577px @1920 = 30.06vw) and slightly exceeds the copy content box, so keep the
       manual <br> lines from re-wrapping — the tiny overflow falls into the empty
       right padding, exactly as the XD paints that line widest over the photo. */
    .page .hf-closing-copy h2{ white-space:nowrap; }
    /* Wash offsets against the new section box: BG5 starts 54px below the
       section top (board 11362), Path 9 243px (board 11551). */
    .page .hf-closing::before{
      top:54px; top:2.81vw;
    }
    .page .hf-closing::after{
      top:243px; top:12.66vw;
    }
  }

  /* ---------- Myth-5 lead cards (XD Rectangles 32/33, board y=5800) ----------
     Two side-by-side rounded cards, 809×1018 r=55 each, 64px apart, flush with
     row 4's bottom. No drop shadows in the XD (filters undefined). Gradients are
     the XD axes converted to CSS lines:
       left  (Rect 32): #AEE0E8→#E4F2EF, axis (-.039,-.016)→(.599,.685) → 144.1deg,
                        stops -2.5% / 65.4%
       right (Rect 33): #AEE0E8→#DAECD2, axis (1.026,1.104)→(.079,.102) → 323.1deg,
                        stops -7.5% / 90.7%
     Photos sit flush with the card bottoms and OVERLAP the cards unclipped (no
     mask in the XD): photo 12 is 786 wide with its right edge flush; photo 5 is
     1020 wide, starting 32px LEFT of its card and running 179px past its right
     edge — the artboard crops it at the 1920 board edge, which .page's
     overflow:hidden reproduces. */
  .myth-cards{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:18px 16px;
  }
  .m-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;               /* XD: card copy is centre-aligned (was inheriting left) */
    position:relative;               /* anchors the bottom-pinned photos (desktop) */
    border-radius:55px;
    width:100%;
    max-width:480px;
    padding-top:32px;
    margin:0 0 24px;
  }
  .m-card:last-child{ margin-bottom:0; }
  /* The XD text lines run wider than the global 610px cap once rendered in Noto
     Sans (the XD painted Poppins) — let the card's padding bound them instead so
     the design's manual breaks hold. */
  .m-card .mf-text{ max-width:none; padding:0 24px; }
  .m-card img{ display:block; width:100%; margin-top:auto; }
  .m-card-myth{ background:linear-gradient(144.1deg, #aee0e8 -2.5%, #e4f2ef 65.4%); }
  .m-card-fact{ background:linear-gradient(323.1deg, #aee0e8 -7.5%, #daecd2 90.7%); }
  /* Stacked: the photo fills the card's full width, so its SQUARE bottom corners
     cut straight through the 55px rounding and break the card's border. Clip them.
     (Desktop deliberately does NOT clip — the XD has photo 5 overhanging the card.) */
  @media (max-width:991.98px){
    .m-card{ overflow:hidden; }
  }
  @media (min-width:992px){
    .myth-cards{
      flex-direction:row;
      justify-content:center;
      align-items:flex-start;
      padding:0;
    }
    .m-card{
      width:809px;        width:42.14vw;
      max-width:none;
      height:1018px;      height:53.02vw;
      padding-top:77px;   padding-top:4.01vw;   /* XD: pills sit 77px below the card top */
      margin:0;
    }
    .m-card-fact{ margin-left:64px; margin-left:3.33vw; }
    /* Desktop: the XD photos are bottom-pinned and OVERLAP the card content zone
       (the fact text's ink bottom runs 22px past the photo's transparent top), so
       they must be absolutely anchored, not flowed. Heights land exactly: photo 12
       (797 tall) tops out 221px below its card top, photo 5 (752) at 266 — the
       XD's own offsets. */
    .m-card img{ position:absolute; bottom:0; margin-top:0; }
    .m-card-myth img{
      width:786px;        width:40.94vw;
      right:0;                                  /* XD: right edge flush with the card's */
    }
    .m-card-fact img{
      width:1020px;       width:53.13vw;
      max-width:none;
      left:-32px;         left:-1.67vw;         /* XD: starts 32px left of the card */
    }
  }
  @media (max-width:991.98px){
    /* Stacked: 25.png (row 4, above) fades to white over its bottom ~10% (baked
       into the asset), which reads as a gap — tuck the cards up over that band.
       position:relative joins the positioned paint order so the cards draw ABOVE
       the (also positioned) myth rows they overlap. */
    .myth-cards{ margin-top:-64px; position:relative; }
    /* Ground row 10's bed photo on the section end and tuck the consult card up
       over it (~40px), matching the desktop's card-over-bed overlap. */
    .myths{ padding-bottom:0; }
    .consult-wrap{ margin-top:-64px; position:relative; }
  }

  /* ---------- Watercolour washes + gradient leads (XD BG4–BG7, Path 7/8/9) ----------
     The XD alternates full-bleed 1920×1080 image washes with full-bleed vertical
     gradient rects down the board; each one's top edge coincides with a myth row's
     top (BG6/BG7 align with their row images to the pixel), so each is anchored to
     its row as a full-bleed ::before — 100vw wide, recentred with left:50% /
     margin-left:-50vw, clipped by .page{overflow:hidden}. z-index:-1 keeps them
     under all content (and under the white consult card, as in the XD stack).
     A wash's XD opacity is reproduced as a white veil of alpha (1 − opacity) over
     the image — identical arithmetic over the white page. The rows are DOM-ordered
     exactly like the XD z-order, so where BG5 bleeds under Path 7 the gradient
     paints on top, as designed. */
  .myth-row:nth-child(3)::before,
  .myth-row:nth-child(4)::before,
  .myth-row:nth-child(6)::before,
  .myth-row:nth-child(7)::before,
  .myth-row:nth-child(8)::before,
  .myth-row:nth-child(10)::before{
    content:"";
    position:absolute;
    top:0; left:50%;
    width:100vw; margin-left:-50vw;
    z-index:-1;
    pointer-events:none;
  }
  /* Rows 3 & 7 — XD "Path 8" (1920×941) / "Path 7" (1920×1096): gradient rects whose
     bottom edges meet the next wash's top exactly. Both are rotated 180° in the XD,
     so their stops read bottom-up: the colour sits at the BOTTOM, fading to
     rgba(255,255,255,.302) at the top. */
  .myth-row:nth-child(3)::before,
  .myth-row:nth-child(7)::before{ bottom:0; }
  .myth-row:nth-child(3)::before{   /* Path 8 — ends at BG4's top edge */
    background:linear-gradient(0deg, #aee0e8 0%, rgba(255,255,255,.302) 100%);
  }
  .myth-row:nth-child(7)::before{   /* Path 7 — greener #D4F4ED, ends at BG6's top edge */
    background:linear-gradient(0deg, #d4f4ed 0%, rgba(255,255,255,.302) 100%);
  }
  /* Rows 4/6/8/10 — the image washes, fixed to the image's 16:9 box (56.25vw). */
  .myth-row:nth-child(4)::before,
  .myth-row:nth-child(6)::before,
  .myth-row:nth-child(8)::before,
  .myth-row:nth-child(10)::before{
    height:56.25vw;
    background-repeat:no-repeat;
    background-position:top center;
    background-size:100% auto;
  }
  .myth-row:nth-child(4)::before{   /* XD BG4, opacity .600 → veil .400 */
    background-image:linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.4)),
                     url('../revamp/about/BG4.png');
  }
  .myth-row:nth-child(6)::before{   /* XD BG5, opacity .300 → veil .700 */
    background-image:linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)),
                     url('../revamp/about/BG5.png');
  }
  .myth-row:nth-child(8)::before{   /* XD BG6, opacity .445 → veil .555 */
    background-image:linear-gradient(rgba(255,255,255,.555), rgba(255,255,255,.555)),
                     url('../revamp/about/BG6.png');
  }
  .myth-row:nth-child(10)::before{  /* XD BG7, opacity .550 → veil .450 */
    background-image:linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)),
                     url('../revamp/about/BG7.png');
  }
  .myth-media{ flex:0 0 46%; max-width:46%; padding:0 clamp(8px,1.5vw,28px); }
  .myth-media img{ width:100%; height:auto; display:block; }
  .myth-copy{
    flex:1 1 auto;
    align-self:center;
    text-align:center;
    padding:0 clamp(8px,2vw,40px);
    /* Keep copy above neighbouring rows' oversized images (their boxes overlap
       the text zones in the XD; the text is always legible in the design). */
    position:relative; z-index:1;
  }
  /* Myth / FACTS pills — XD Rectangle 9 (#204D4C) / Rectangle 31 (#51A090),
     250×65, fully rounded (r=120), Muro 45px white label. */
  .mf-pill{
    display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--display-font);
    font-weight:normal;
    color:#fff;
    border-radius:999px;
    width:250px; width:clamp(150px,13.02vw,250px);
    height:65px; height:clamp(44px,3.39vw,65px);
    font-size:30px; font-size:clamp(22px,2.34vw,45px);   /* XD: Muro 45 */
    line-height:1;
    margin:0 auto;
    /* Caps centre with NO padding hack now: the @font-face ascent/descent overrides
       pin Muro's line box symmetric about its cap height. The previous .266em/.289em
       bottom-pads were calibrated against Chrome's usWin metrics (caps .143em low);
       Safari reads hhea instead (caps .107em high), so those lifts stacked and the
       label rendered visibly high on iOS — the QA finding this replaces. */
  }
  /* Desktop: hold the pill at the XD's exact 250×65 with the 45px Muro label at every
     desktop width (the fluid clamp above shrank it to ~150×44 on smaller laptops — a
     QA finding). Mobile keeps the proportional clamp. */
  @media (min-width:992px){
    .mf-pill{ width:250px; height:65px; font-size:45px; }
  }
  .mf-pill.myth{ background:var(--teal); }
  .mf-pill.fact{ background:var(--green); }
  .mf-text{
    /* XD paints the Myth/FACTS copy in Poppins (not the site's Noto Sans body font). */
    font-family:'Poppins','Noto Sans','MontserratLocal','Helvetica Neue',Helvetica,Arial,sans-serif;
    color:var(--teal);
    font-size:17px; font-size:clamp(15px,1.15vw,22px);   /* XD: 22px */
    line-height:1.45;
    /* XD spacing rhythm: a pill's bottom sits 44px above the following text's first
       baseline (≈2.0em), and a text's last baseline sits 79px above the next pill
       (≈3.6em) — so the gap BEFORE each FACTS pill is larger than the gap after it.
       (.885em top / 3.25em bottom convert those baseline targets to box margins for
       Noto Sans at line-height 1.45.) */
    margin:.885em auto 3.25em;
    /* XD: the copy is centred point-text with manual breaks; measured across ALL
       Myth/FACTS blocks the widest rendered line is 610px at the 1920 board
       (601px in the regular rows, 610px in the myth-5/6 cards) — cap at that
       envelope so no block wraps wider than the design. */
    max-width:610px;
  }
  .mf-text:last-child{ margin-bottom:0; }
  .mf-text sup{ font-size:.7em; }
  /* The Myth/FACTS copy columns are squeezed by the XD's wide bleeding images, so the
     XD line breaks only fit once the layout is wide enough (~1366px+). Between the
     desktop start (992) and there, collapse the manual breaks to natural wrapping —
     otherwise a too-long forced line re-wraps into ragged short lines. (Each break has
     a trailing space, so collapsing keeps the words spaced.) */
  @media (min-width:992px) and (max-width:1365.98px){
    .myths .mf-text br, .m-card .mf-text br{ display:none !important; }
  }
  @media (max-width:991.98px){
    /* Stacked: copy first, image under it (column-reverse — the DOM keeps media
       first). No bottom padding: images ground on their row bottoms. */
    .myth-row,.myth-row.rev{ flex-direction:column-reverse; align-items:center; padding-bottom:0; }
    .myth-media,.myth-copy{ flex:0 0 auto; max-width:100%; width:100%; }
    .myth-media{ max-width:440px; margin:18px auto 0; }
    /* Row 10's photo is a 2537×1200 wide composition — the couple occupies only
       the middle ~half of it, so the shared 440px cap shrank them to ~210px. Keep
       the XD's proportional width (118.75vw, where the couple reads ~60% of the
       viewport as on desktop) and crop the overhang evenly on both sides. Its
       56.2vw height then matches the BG7 wash band exactly. */
    .myth-row:nth-child(10) .myth-media{
      max-width:none;
      width:100vw;
      /* Escape the row's side padding so the photo is full-bleed like its wash. */
      margin:18px 0 0;
      margin:18px calc(50% - 50vw) 0;
      overflow:hidden;
      display:flex;
      justify-content:center;
    }
    .myth-row:nth-child(10) .myth-media img{
      flex:0 0 auto;
      width:118.75vw;
      max-width:none;
    }
    /* 19.png is a full-frame photo whose top row is a semi-transparent grey
       (rgb 192 @ 44% alpha → ~#e4e4e4 over white): a 27-level step against the
       white page, which draws a hard line under the copy. Fade the top edge out
       so it dissolves instead. 14.png (row 3) has the same defect, 10 levels.
       Degrades gracefully — without mask support the line simply remains. */
    .myth-row:nth-child(10) .myth-media img{
      -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 15%);
              mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 15%);
    }
    .myth-row:nth-child(3) .myth-media img{
      -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 8%);
              mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 8%);
    }
    /* The watercolour washes follow the images: bottom-anchored, since the images
       now sit at the bottom of each stacked row. */
    .myth-row:nth-child(4)::before,
    .myth-row:nth-child(6)::before,
    .myth-row:nth-child(8)::before,
    .myth-row:nth-child(10)::before{
      top:auto; bottom:0;
      background-position:bottom center;
    }
    /* BG3 moves off the section top onto row 1, behind its image. */
    .myths{ background-image:none; }
    .myth-row:nth-child(1)::before{
      content:"";
      position:absolute;
      bottom:0; left:50%;
      width:100vw; margin-left:-50vw;
      height:56.25vw;
      z-index:-1;
      pointer-events:none;
      background-image:linear-gradient(180deg, #fff 0%, rgba(255,255,255,.3) 35%, rgba(255,255,255,.3) 100%),
                       url('../revamp/about/BG3.png');
      background-repeat:no-repeat;
      background-position:bottom center;
      background-size:100% auto;
    }
    /* Soften every wash's cropped top edge: the veil fades from solid white into
       each wash's XD opacity, so no hard line cuts across the row. */
    .myth-row:nth-child(4)::before{
      background-image:linear-gradient(180deg, #fff 0%, rgba(255,255,255,.4) 35%, rgba(255,255,255,.4) 100%),
                       url('../revamp/about/BG4.png');
    }
    .myth-row:nth-child(6)::before{
      background-image:linear-gradient(180deg, #fff 0%, rgba(255,255,255,.7) 35%, rgba(255,255,255,.7) 100%),
                       url('../revamp/about/BG5.png');
    }
    .myth-row:nth-child(8)::before{
      background-image:linear-gradient(180deg, #fff 0%, rgba(255,255,255,.555) 35%, rgba(255,255,255,.555) 100%),
                       url('../revamp/about/BG6.png');
    }
    .myth-row:nth-child(10)::before{
      background-image:linear-gradient(180deg, #fff 0%, rgba(255,255,255,.45) 35%, rgba(255,255,255,.45) 100%),
                       url('../revamp/about/BG7.png');
    }
  }

  /* ---------- CLOSING statement ---------- */
  .hf-closing{
    display:flex;
    /* XD: image 17's bottom meets the References band — ground it (no bottom padding)
       so the cut-out couple sits on the section baseline instead of floating above it. */
    align-items:flex-end;
    max-width:1600px; margin:0 auto;
    padding:clamp(20px,3vw,60px) clamp(16px,4vw,72px) 0;
    position:relative;                /* containing block for the wash pseudos */
  }
  /* XD "BG5" (second use, board y=11362): the same 1920×1080 wash at opacity .525
     → veil .475. Its tail runs under the opaque green References band in the XD,
     which the DOM reproduces for free (.references paints over the bleed). */
  .hf-closing::before{
    content:"";
    position:absolute;
    top:0; left:50%;
    width:100vw; margin-left:-50vw;
    height:56.25vw;
    z-index:-1;
    pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.475), rgba(255,255,255,.475)),
                     url('../revamp/about/BG5.png');
    background-repeat:no-repeat;
    background-position:top center;
    background-size:100% auto;
  }
  /* XD "Path 9" (board y 11551→12442, rotated 180°): a vertical gradient painted
     ABOVE the wash (::after follows ::before at equal z), #AEE0E8 at its bottom
     fading to rgba(255,255,255,.302) at its top. It starts ~197px below the
     section top (10.3% of the 1920 board) and its bottom 348px run under the
     opaque References band — so the visible ramp stops short of full strength;
     pushing the #AEE0E8 stop 63.9% past the bottom edge reproduces that cut. */
  .hf-closing::after{
    content:"";
    position:absolute;
    top:10.3vw; bottom:0; left:50%;
    width:100vw; margin-left:-50vw;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(0deg, #aee0e8 -63.9%, rgba(255,255,255,.302) 100%);
  }
  .hf-closing-media{ flex:0 0 52%; max-width:52%; padding:0 clamp(8px,1.5vw,28px); }
  .hf-closing-media img{ width:100%; height:auto; display:block; }
  .hf-closing-copy{
    flex:1 1 auto; align-self:center; text-align:center;
    padding:clamp(20px,3vw,60px) clamp(12px,2vw,40px);
  }
  .hf-closing-copy h2{
    /* XD: "Start positive conversations…" is Montserrat-Bold (QA). */
    font-family:'MontserratLocal','Helvetica Neue',Helvetica,Arial,sans-serif;
    font-weight:700;
    color:var(--teal);
    margin:0;
    font-size:34px; font-size:clamp(26px,3.13vw,60px);   /* XD: 60px */
    line-height:1.217;                                   /* XD: 73px baselines at 60px */
  }
  @media (max-width:991.98px){
    /* Stacked: headline first, image under it (column-reverse — the DOM keeps
       media first). No bottom padding: the couple grounds on the References band. */
    .hf-closing{ flex-direction:column-reverse; align-items:center; padding-bottom:0; }
    /* The BG5 wash follows the image to the section bottom; its veil fades from
       solid white at the top so the cropped edge doesn't draw a line. */
    .hf-closing::before{
      top:auto; bottom:0;
      background-position:bottom center;
      background-image:linear-gradient(180deg, #fff 0%, rgba(255,255,255,.475) 35%, rgba(255,255,255,.475) 100%),
                       url('../revamp/about/BG5.png');
    }
    .hf-closing-media,.hf-closing-copy{ flex:0 0 auto; max-width:100%; width:100%; }
    .hf-closing-media{ max-width:480px; margin:16px auto 0; }
    .hf-closing-copy{ padding-top:0; }
  }

  /* ---------- Book-a-consultation card (shared with the homepage) ---------- */
  .consult{
    background:#fff;
    border-radius:28px;                                  /* XD card: r=28 */
    box-shadow:0 3px 25px rgba(0,0,0,.16);
    padding:34px 24px 24px;
    padding:clamp(16px,2.34vw,45px) clamp(14px,1.66vw,32px) clamp(15px,1.7vw,33px);
    width:880px; width:61.51vw;                          /* XD: 1181/1920 */
    max-width:1181px;
    margin-left:auto; margin-right:auto;
  }
  /* Tablet: the vw-based width collapses to ~500px at 820, which reads as a tiny
     card — widen it (the phone block below takes over under 600px). */
  @media (min-width:600px) and (max-width:991.98px){
    .consult{ width:94%; padding:30px 28px 28px; }
  }
  @media (max-width:599.98px){
    .consult{ width:auto; padding-left:24px; padding-right:24px; padding-top:20px; padding-bottom:24px; }
  }
  .consult-wrap{ padding-top:clamp(20px,3vw,56px); padding-bottom:clamp(20px,3vw,56px); }
  .consult h2{
    font-family:var(--body-font);
    font-weight:700; color:var(--teal);
    text-transform:uppercase;        /* displayed ALL CAPS, same as the homepage card */
    text-align:center;
    margin:0 0 .42em;
    font-size:30px; font-size:clamp(22px,2.19vw,42px);   /* XD: 42px */
    line-height:1.15;
  }
  .partners{ display:flex; flex-wrap:wrap; justify-content:center; margin:-6px -24px; }
  .partner{ flex:0 1 auto; max-width:44%; display:flex; align-items:flex-start; padding:6px 16px; }
  .partner > div{ max-width:200px; max-width:13.9vw; padding-top:6px; padding-top:.43vw; }
  @media (max-width:991.98px){ .partner > div{ max-width:170px; } }
  @media (max-width:599.98px){
    .partners{ margin:-6px -16px; }
    .partner{ flex:1 1 100%; max-width:100%; padding:12px 16px; }
    .partner > div{ max-width:none; }
    .partner .logo{ margin-right:18px; }
  }
  .partner .logo{
    flex:0 0 auto;
    width:88px;  width:clamp(64px,5.83vw,112px);
    height:88px; height:clamp(64px,5.83vw,112px);
    overflow:hidden;
    margin-right:20px; margin-right:clamp(14px,2.03vw,39px);
  }
  .partner .logo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .partner .name{
    font-family:var(--heading-font);
    color:var(--green);
    font-weight:600;
    font-size:20px; font-size:clamp(17px,1.3vw,25px);   /* XD: 25px */
    line-height:.92;
    margin:0 0 .3rem; display:block;
  }
  .partner .blurb{
    font-family:var(--body-font);
    font-size:14px; font-size:clamp(12.5px,.94vw,18px); /* XD: 18px */
    line-height:1.17;
    margin:0;
  }
  /* Below 992px every clamp() above has bottomed out at its floor (heading 22px,
     name 17px, blurb 12.5px, logo 64px) while the card itself keeps shrinking, so
     the whole block reads undersized. Scale it back up here — AFTER the base rules,
     since these selectors match with equal specificity and the later rule wins. */
  @media (max-width:991.98px){
    .consult h2{ font-size:28px; margin-bottom:.5em; }
    .partner .name{ font-size:21px; }
    .partner .blurb{ font-size:14.5px; line-height:1.25; }
    .partner .logo{
      width:84px; height:84px;
      margin-right:20px;
    }
  }
  /* Tablet only: widen the text column to suit the larger type (phones use the
     full-width stacked partners defined above). The tighter gutter buys the ~206px
     the 21px "The Filipino Doctor" needs to stay on one line, as it is in the XD. */
  @media (min-width:600px) and (max-width:991.98px){
    .partner{ max-width:48%; padding:6px 10px; }
    .partner > div{ max-width:250px; padding-top:4px; }
  }

  /* ---------- References (shared with the homepage) ---------- */
  .references{
    background:var(--green);
    color:#fff;
    padding:24px 40px 37px;
    padding:clamp(20px,1.67vw,32px) clamp(24px,9.5vw,182px) clamp(28px,2.57vw,49px);
  }
  .references h2{
    font-family:var(--body-font);
    font-weight:700; text-transform:uppercase;
    font-size:34px; font-size:clamp(26px,2.5vw,42px);   /* XD: 42px */
    line-height:1.15;
    margin:0 0 .49em;
  }
  .references .ref-list{
    font-family:var(--legal-font);
    font-size:13px; font-size:clamp(11.5px,.83vw,16px); /* XD: Montserrat 16 / line 24 */
    line-height:1.5;
    margin:0; padding:0; color:#fff;
    word-break:break-word;
  }

  /* ---------- Footer (shared with the homepage) ---------- */
  .site-footer{
    background:#fff; color:#000;
    padding:26px 0 36px;
    padding:clamp(18px,1.77vw,34px) 0 clamp(26px,2.45vw,47px);
  }
  .site-footer .inner{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; }
  .footer-brand{ flex:0 0 auto; display:flex; align-items:flex-end; }
  .footer-brand img{ width:535px; width:clamp(320px,37.14vw,713px); height:auto; max-width:88vw; margin:0; }
  .footer-brand address{
    font-family:var(--legal-font); font-style:normal;
    font-size:14px; font-size:clamp(12.5px,.9vw,15px);
    line-height:1.45; color:#000;
    margin:0 0 14px 24px;
    margin:0 0 clamp(10px,.97vw,19px) clamp(16px,1.6vw,30px);
  }
  .footer-legal{
    flex:1 1 300px; max-width:900px;
    margin-left:32px; margin-left:clamp(20px,3vw,48px);
    font-family:var(--legal-font);
    font-size:13px; font-size:clamp(12.5px,.9vw,14px);
    line-height:1.45; color:#000;
  }
  .footer-legal p{ margin:0 0 .9rem; }
  .footer-legal .copy{ margin-bottom:0; }
  @media (max-width:991.98px){
    .site-footer .inner{ flex-direction:column; align-items:center; justify-content:center; text-align:center; }
    .footer-brand{ flex-direction:column; align-items:center; }
    .footer-brand img{ margin-left:auto; margin-right:auto; }
    .footer-brand address{ margin:12px 0 0; }
    .footer-legal{ flex:0 0 auto; margin-top:28px; margin-left:0; }
  }

  /* =========================================================================
     LEAVING-SITE INTERSTITIAL
     Partner cards (.partner) are now links; activating one opens this modal,
     which repeats the third-party disclaimer before the user leaves the site.
     Progressive enhancement — no JS means the links navigate directly.
     Old-browser contract kept: static fallback before every clamp(), no flex
     `gap`, physical longhands before shorthand, @supports guards for flex.
     ========================================================================= */
  a.partner{ cursor:pointer; color:inherit; }
  /* Bootstrap Reboot recolours a:hover/:focus link-blue (0,0,1,1); these class rules
     outrank it so the card keeps its own colours — the name underline is the only
     hover affordance. */
  a.partner:hover, a.partner:focus{ color:inherit; }
  a.partner:hover .name{ text-decoration:underline; }
  a.partner:focus-visible{ outline:3px solid var(--green); outline-offset:4px; border-radius:8px; }

  /* Freeze background scroll while the modal is open (toggled on <html> by JS). */
  .lv-locked{ overflow:hidden; }
  /* The sticky "BOOK CONSULTATION" tab is fixed to the right edge; hide it while the
     modal is open. It sits behind the dark backdrop anyway, and hiding it avoids the
     scrollbar-removal exposing its square right edge against the dimmed page. Being
     position:fixed, hiding it causes no layout shift. */
  .lv-locked .hf-book-tab{ display:none; }

  .lv-overlay{
    display:none;
    position:fixed; top:0; right:0; bottom:0; left:0;
    z-index:2000;
    background:rgba(20,30,30,.55);
    padding:16px 14px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .lv-overlay.is-open{ display:block; }              /* block-centering fallback */
  @supports (display:flex){
    .lv-overlay.is-open{ display:flex; align-items:center; justify-content:center; }
  }

  .lv-dialog{
    position:relative;
    width:100%;
    max-width:900px;
    margin:auto;                                     /* centers in the fallback path */
    /* Never taller than the viewport, so the action buttons are always on-screen —
       the user shouldn't have to scroll the page to reach Continue/Cancel. */
    max-height:92vh;
    max-height:calc(100vh - 28px);
    overflow-y:auto;                                 /* fallback: whole dialog scrolls */
    background:#fff;
    border-radius:20px;
    box-shadow:0 12px 48px rgba(0,0,0,.28);
    padding:22px 24px 24px;
    padding:clamp(18px,2.2vw,34px) clamp(18px,2.4vw,42px) clamp(20px,2.4vw,38px);
    text-align:center;
    color:var(--teal);
  }
  /* With flex, lay the dialog out as a column and let ONLY the body copy scroll if a
     very short screen can't fit everything — logo, header and buttons stay visible. */
  @supports (display:flex){
    .lv-dialog{ display:flex; flex-direction:column; overflow:visible; }
    .lv-logo, .lv-title, .lv-actions{ flex:0 0 auto; }
    .lv-body{ flex:1 1 auto; min-height:0; overflow-y:auto; }
  }

  .lv-logo{
    width:170px;
    width:clamp(140px,13.5vw,210px);
    height:auto;
    margin-left:auto; margin-right:auto;
    margin-bottom:14px; margin-bottom:clamp(10px,1.2vw,18px);
  }

  /* Header — BookmanOpti, same face as the home "Benign Prostatic Hyperplasia" title. */
  .lv-title{
    font-family:var(--heading-font);
    font-weight:500;
    color:var(--teal);
    font-size:24px;
    font-size:clamp(21px,2.1vw,32px);
    line-height:1.16;
    margin:0 0 14px;
    margin:0 0 clamp(12px,1.4vw,20px);
  }

  /* Body — Noto Sans; reduced so the modal fits laptop screens (client req) AND each
     desktop line matches the mock-up's word breaks (the manual <br>s in the markup are
     desktop-only — they vanish below lg, where the copy wraps naturally). */
  .lv-body{ margin-left:auto; margin-right:auto; max-width:940px; }
  .lv-body p{
    font-family:var(--body-font);
    font-size:14px;
    font-size:clamp(13px,.8vw,14.5px);
    line-height:1.5;
    margin:0 0 12px;
    margin:0 0 clamp(9px,.9vw,16px);
  }
  .lv-body p:last-child{ margin-bottom:0; }
  .lv-italic{ font-style:italic; }

  .lv-actions{
    display:block;
    text-align:center;
    margin-top:18px;
    margin-top:clamp(14px,1.6vw,24px);
  }
  @supports (display:flex){
    .lv-actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; }
  }

  .lv-btn{
    display:inline-block;
    min-width:150px;
    text-align:center;
    font-family:var(--heading-font);
    font-weight:500;
    font-size:16px;
    font-size:clamp(15px,1vw,18px);
    line-height:1.1;
    border-radius:999px;
    /* Optical vertical centring: the labels have no descenders. Sit the caps a touch
       ABOVE the geometric centre (the conventional optical position for button text)
       via slightly more top / less bottom padding (equal total → height unchanged). */
    padding:.72em 2.2em .68em;
    cursor:pointer;
    /* Margins (not flex `gap`) space the buttons — Safari <14.1. */
    margin:8px 10px 0;
    transition:background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .lv-cancel{
    background:#fff;
    color:var(--teal);
    border:2px solid var(--teal);
  }
  .lv-cancel:hover,
  .lv-cancel:focus-visible{ background:var(--teal); color:#fff; }
  /* a:hover from Bootstrap Reboot (0,0,1,1) is outranked by these class rules. */
  .lv-continue{
    background:var(--teal);
    color:#fff;
    border:2px solid var(--teal);
  }
  .lv-continue:hover,
  .lv-continue:focus-visible{ background:var(--teal-2); border-color:var(--teal-2); color:#fff; }

  @media (max-width:479.98px){
    /* Phones: stack the actions full-width for easy tapping. */
    .lv-btn{ display:block; width:100%; min-width:0; margin:10px 0 0; }
    .lv-btn:first-child{ margin-top:0; }
  }

  /* Short viewports (laptops, small/landscape windows): tighten type and spacing so
     everything — including the buttons — fits without scrolling. */
  @media (max-height:720px){
    .lv-logo{ width:130px; margin-bottom:8px; }
    .lv-title{ font-size:22px; font-size:clamp(19px,1.9vw,26px); margin-bottom:9px; }
    .lv-body p{ font-size:13px; font-size:clamp(12.5px,.78vw,14px); line-height:1.42; margin-bottom:8px; }
    .lv-actions{ margin-top:12px; }
  }
  @media (max-height:560px){
    .lv-logo{ display:none; }                       /* reclaim height on very short screens */
    .lv-title{ font-size:20px; margin-bottom:7px; }
    .lv-body p{ font-size:13px; line-height:1.34; margin-bottom:6px; }
  }