/* ==========================================================================
   Momba — one stylesheet, every page.
   Base system extracted verbatim from the approved home page; shared header,
   footer and page components appended below.
   ========================================================================== */

  :root{
    --black:#000000;
    --near:#0D0D0D;
    --pink:#cd3167;
    --pink-lt:#ec90a8;
    --grey:#b5bec0;
    --white:#ffffff;
    --paper:#F7F7F8;
    --ink:#111315;
    --display:'Alegreya Sans','Eras ITC','Segoe UI',-apple-system,sans-serif;
    --body:'Source Sans 3','Candara',-apple-system,'Segoe UI',sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:var(--body);font-size:17px;line-height:1.6;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
  .wrap{max-width:1080px;margin:0 auto;padding:0 26px}
  h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.005em;line-height:1.08}
  /* Base size so an h2 without a component rule still matches the rest.
     .foot h2 and .legal .prose h2 are more specific and keep their own. */
  h2{font-size:clamp(1.5rem,3.1vw,2.25rem);text-transform:uppercase}
  .eyebrow{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--pink)}
  section{padding:46px 0}

  /* HERO — black, brand-forward */
  .hero{background:var(--black);color:var(--white);padding:84px 0 66px}
  .hero h1{font-size:clamp(1.85rem,4vw,2.9rem);max-width:17ch;text-transform:uppercase}
  .hero h1 em{font-style:normal;color:var(--pink)}
  .hero .sub{margin-top:22px;max-width:58ch;color:var(--grey);font-size:clamp(1rem,1.5vw,1.14rem)}
  /* Pull quote with attribution - the line in quotation marks, the name
     right-aligned underneath. Same shape as the one on /training. Inherits its
     colour so it works on both the dark heroes and the light body sections. */
  .qblock{margin-top:26px;padding-top:18px;border-top:1px solid rgba(205,49,103,.55);
    width:fit-content;max-width:min(46ch,100%)}
  .qblock .qline{font-family:var(--display);font-weight:500;font-size:clamp(1rem,1.9vw,1.24rem);line-height:1.3}
  .qblock .qby{font-family:var(--body);font-weight:500;font-size:clamp(.85rem,1.5vw,.98rem);
    letter-spacing:.02em;text-align:right;margin-top:8px;opacity:.8}
  .sig{margin-top:26px;padding-top:18px;border-top:1px solid rgba(205,49,103,.55);font-family:var(--display);font-weight:500;font-size:clamp(1rem,1.9vw,1.24rem);max-width:46ch;color:var(--white)}

  /* ticker */
  .strip{background:var(--near);border-top:1px solid rgba(181,190,192,.18);padding:14px 0;text-align:center}
  .strip span{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--grey);padding:0 12px}
  .strip span::after{content:"\2022";margin-left:24px;color:var(--pink)}
  .strip span:last-child::after{content:""}

  /* SORT — light, for reading */
  .sort{background:var(--paper)}
  .sort h2{font-size:clamp(1.5rem,3.1vw,2.25rem);max-width:21ch;text-transform:uppercase}
  /* 64ch for every lede. 1ch is 8.45px here, so this is 541px: enough for the
     longest single-line lede (519px) and level with the 539px body column it
     sits above in the shelters block. NOTE there are three lede rules -
     .sort, .phases and .shead - and .shead governs most pages. */
  .sort .lede{margin-top:14px;max-width:64ch;color:#5A6266}
  /* auto-fit so a 4-card row fills the width instead of leaving an orphan */
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:18px;margin-top:40px}
  .card{background:var(--white);border:1px solid #E2E5E7;padding:30px 26px 26px;display:flex;flex-direction:column;position:relative}
  .card__lab{font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--pink);margin-bottom:14px}
  /* Inside a card the label is the thing people scan to find themselves, but at
     10.5px it lost every time to the headline below it. Tinted band so it reads
     first. Darker pink than --pink: #cd3167 on this tint is only 4.11:1.
     Podcast rows keep the plain label — there it is attribution, not a choice. */
  .card .card__lab{font-size:11.5px;font-weight:700;letter-spacing:.12em;line-height:1.5;
    color:#A82150;background:#FBE4EC;padding:7px 11px;margin-bottom:16px;
    box-shadow:0 2px 9px rgba(205,49,103,.16)}
  .card h3{font-size:1.12rem;margin-bottom:11px;color:var(--ink)}
  .card p{font-size:15px;color:#5A6266;line-height:1.58}
  .card .go{margin-top:auto;padding-top:22px;font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--pink);text-decoration:none;border-top:1px solid #E2E5E7}
  .card--flag{border-color:var(--pink)}
  .flag{position:absolute;top:0;right:0;background:var(--pink);color:#fff;font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:5px 11px}
  .speak{margin-top:18px;background:var(--black);color:var(--white);padding:24px 28px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
  .speak b{font-family:var(--display);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--pink-lt)}
  .speak h3{font-size:1.12rem;flex:1 1 280px}
  .speak a{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--white);text-decoration:none;border-bottom:1px solid var(--pink);padding-bottom:2px}

  /* PHASES — black */
  .phases{background:var(--black);color:var(--white)}
  .phases h2{font-size:clamp(1.5rem,3.1vw,2.25rem);max-width:21ch;text-transform:uppercase}
  .phases .lede{margin-top:14px;max-width:64ch;color:var(--grey)}
  .plist{display:grid;grid-template-columns:repeat(3,1fr);margin-top:46px;border-top:1px solid rgba(205,49,103,.5)}
  .ph{padding:30px 24px 6px;border-right:1px solid rgba(181,190,192,.18)}
  .ph:last-child{border-right:0}
  .ph b{font-family:var(--display);font-size:2.1rem;font-weight:700;color:var(--pink);display:block;margin-bottom:10px;line-height:1}
  .ph h3{font-size:1.12rem;letter-spacing:.07em;text-transform:uppercase;margin-bottom:11px}
  .ph p{font-size:15px;color:var(--grey);line-height:1.58}

  /* TAX — light */
  .tax{background:var(--white)}
  .tax h2{font-size:clamp(1.5rem,3.1vw,2.25rem);max-width:19ch;text-transform:uppercase}
  .tg{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;margin-top:32px;align-items:start}
  .tg p{margin-bottom:1em;color:#414A4E}
  .quote{border-left:3px solid var(--pink);padding:4px 0 4px 24px;font-family:var(--display);font-weight:500;font-size:clamp(1.2rem,2.3vw,1.6rem);line-height:1.25;color:var(--ink)}
  .tm{color:var(--pink);font-weight:600}

  /* CLOSE */
  .close{background:var(--black);color:#fff;text-align:center;padding:82px 0}
  .close h2{font-size:clamp(1.5rem,3.1vw,2.25rem);max-width:none;margin:0 auto;text-transform:uppercase}
  .close p{margin-top:16px;color:var(--grey)}
  .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
  .btns a{font-family:var(--display);font-weight:600;font-size:14px;padding:13px 24px;text-decoration:none;background:var(--pink);color:#fff;border:1px solid var(--pink)}
  .btns a.ghost{background:transparent;color:#fff;border-color:var(--grey)}

  @media(max-width:880px){
    .cards{grid-template-columns:1fr}
    .plist{grid-template-columns:1fr}
    .ph{border-right:0;border-top:1px solid rgba(181,190,192,.18);padding:26px 0 4px}
    .tg{grid-template-columns:1fr;gap:28px}
    section{padding:36px 0}
  }

/* ==========================================================================
   SHARED CHROME — header + footer, on every page
   ========================================================================== */

  .skip{position:absolute;left:-9999px;top:0;background:var(--pink);color:#fff;font-family:var(--display);font-weight:600;padding:12px 18px;z-index:100;text-decoration:none}
  .skip:focus{left:0}
  a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

  .nav{background:var(--black);border-bottom:1px solid rgba(181,190,192,.16)}
  .nav .wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px}
  .brand{font-family:var(--display);font-weight:800;font-size:1.12rem;letter-spacing:.06em;text-transform:uppercase;color:var(--white);text-decoration:none;line-height:1;margin-right:auto}
  .brand span{color:var(--pink)}
  .nav ul{list-style:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .nav a.lnk{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey);text-decoration:none;padding:8px 10px;display:block;border-bottom:1px solid transparent}
  .nav a.lnk:hover{color:var(--white);border-bottom-color:var(--pink)}
  .nav a.lnk[aria-current="page"]{color:var(--white);border-bottom-color:var(--pink)}
  .nav a.cta{background:var(--pink);color:#fff;border:1px solid var(--pink)}
  .nav a.cta:hover{background:#b82a5a;color:#fff;border-color:#b82a5a}

  .foot{background:var(--near);color:var(--grey);padding:60px 0 34px;font-size:15px}
  .foot a{color:var(--grey);text-decoration:none;border-bottom:1px solid transparent}
  .foot a:hover{color:var(--white);border-bottom-color:var(--pink)}
  .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
  .foot h2{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:var(--pink);margin-bottom:16px}
  .foot .fbrand{font-family:var(--display);font-weight:800;font-size:1.12rem;letter-spacing:.06em;text-transform:uppercase;color:var(--white);line-height:1;display:block;margin-bottom:12px}
  .foot .fbrand span{color:var(--pink)}
  .foot ul{list-style:none;display:flex;flex-direction:column;gap:9px}
  .foot .shop{display:inline-block;margin-top:14px;font-family:var(--display);font-weight:600;font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--white);border-bottom:1px solid var(--pink);padding-bottom:3px}
  .fbot{margin-top:44px;padding-top:22px;border-top:1px solid rgba(181,190,192,.18);display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap;font-size:13.5px}
  .fbot p{max-width:62ch}

/* ==========================================================================
   PAGE COMPONENTS — shared by the inner pages
   ========================================================================== */

  /* Inner-page hero — same language as .hero, a little shorter */
  .phero{background:var(--black);color:var(--white);padding:28px 0 22px}
  .phero h1{font-size:clamp(1.85rem,4vw,2.9rem);max-width:20ch;text-transform:uppercase}
  .phero h1 em{font-style:normal;color:var(--pink)}
  .phero .sub{margin-top:22px;max-width:58ch;color:var(--grey);font-size:clamp(1rem,1.5vw,1.14rem)}
  .phero .sub + .sub{margin-top:14px}

  /* Approval / credential badge row */
  .badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
  .badge{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase;padding:8px 13px;border:1px solid var(--pink);color:var(--white)}
  .badge--solid{background:var(--pink);color:#fff}

  /* Buttons usable anywhere */
  .btn{display:inline-block;font-family:var(--display);font-weight:600;font-size:14px;padding:13px 24px;text-decoration:none;background:var(--pink);color:#fff;border:1px solid var(--pink)}
  .btn:hover{background:#b82a5a;border-color:#b82a5a;color:#fff}
  .btn--ghost{background:transparent;color:#fff;border-color:var(--grey)}
  .btn--ghost:hover{background:transparent;border-color:var(--pink);color:#fff}
  .btn--ink{background:transparent;color:var(--ink);border-color:#C9CFD2}
  .btn--ink:hover{background:transparent;border-color:var(--pink);color:var(--ink)}
  .btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

  /* Reading column */
  .prose{max-width:68ch}
  .prose p{margin-bottom:1.05em;color:#414A4E}
  .prose h2{font-size:clamp(1.5rem,3.1vw,2.25rem);text-transform:uppercase;margin:46px 0 16px}
  .prose h2:first-child{margin-top:0}
  .prose h3{font-size:1.12rem;margin:30px 0 10px;color:var(--ink)}
  .prose ul,.prose ol{margin:0 0 1.15em 1.1em;color:#414A4E}
  .prose li{margin-bottom:.5em;padding-left:.2em}
  .prose li::marker{color:var(--pink)}
  .prose a{color:var(--pink);font-weight:600}
  .prose strong{color:var(--ink);font-weight:600}
  .prose .lede{font-size:clamp(1.05rem,1.8vw,1.22rem);color:#2C3438;margin-bottom:1.2em}

  /* Section tone helpers */
  .lt{background:var(--paper)}
  .wt{background:var(--white)}
  .dk{background:var(--black);color:var(--white)}
  .dk h2,.dk h3{color:var(--white)}
  .dk p{color:var(--grey)}
  .shead h2{font-size:clamp(1.5rem,3.1vw,2.25rem);max-width:22ch;text-transform:uppercase}
  .shead .lede{margin-top:14px;max-width:64ch;color:#5A6266}
  .dk .shead .lede{color:var(--grey)}

  /* Two-column content split */
  .split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;margin-top:32px;align-items:start}
  .split--even{grid-template-columns:1fr 1fr}
  /* A heading in one column sits beside body copy in the other. Headings carry
     line-height 1.08 and body 1.6, so with identical box tops the heading's text
     rendered 7.8px higher than the paragraph beside it. 1.52 gives this h3 the
     same 27.2px first line box as the paragraph, so the two align optically. */
  .split h3{font-size:1.12rem;line-height:1.52;margin-bottom:8px}
  /* A lede leading a split column drops its top margin, so its first line sits
     level with the heading starting the other column. */
  .split > div > .lede:first-child{margin-top:0;max-width:none}

  .split p{margin-bottom:1em;color:#414A4E}
  .dk .split p{color:var(--grey)}

  /* Bordered fact list — credit hours, logistics */
  .facts{list-style:none;margin-top:28px;border-top:1px solid #E2E5E7}
  .dk .facts{border-top-color:rgba(181,190,192,.22)}
  .facts li{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:15px 0;border-bottom:1px solid #E2E5E7}
  .dk .facts li{border-bottom-color:rgba(181,190,192,.22)}
  .facts b{font-family:var(--display);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--pink);padding-top:3px}
  .facts span{color:#414A4E}
  .dk .facts span{color:var(--grey)}

  /* Plain bullet grid (what you get / who it's for) */
  .bul{display:grid;grid-template-columns:1fr 1fr;gap:12px 34px;margin-top:26px;list-style:none}
  .bul li{position:relative;padding-left:22px;color:#414A4E;font-size:15.5px;line-height:1.55}
  .dk .bul li{color:var(--grey)}
  .bul li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:1px;background:var(--pink)}
  .bul--one{grid-template-columns:1fr}

  /* Contrast pair — "this is / this is not" */
  .pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
  .pane{border:1px solid #E2E5E7;background:var(--white);padding:26px 24px}
  .pane--yes{border-color:var(--pink)}
  .pane h3{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pink);margin-bottom:14px}
  .pane--no h3{color:#8A9296}
  .pane ul{list-style:none}
  .pane li{position:relative;padding-left:20px;margin-bottom:9px;font-size:15px;color:#5A6266;line-height:1.5}
  .pane li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:1px;background:var(--pink)}
  .pane--no li::before{background:#C2C8CB}

  /* Callout */
  .note{border-left:3px solid var(--pink);background:var(--white);padding:22px 24px;margin:30px 0}
  .note p{margin-bottom:.6em;color:#414A4E}
  .note p:last-child{margin-bottom:0}
  .note b{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--pink);display:block;margin-bottom:9px}

  /* FAQ */
  .faq{margin-top:34px;border-top:1px solid #E2E5E7}
  .faq .q{border-bottom:1px solid #E2E5E7;padding:24px 0}
  .faq h3{font-size:1.12rem;margin-bottom:9px;color:var(--ink)}
  .faq p{color:#5A6266;max-width:70ch;margin-bottom:.7em}
  .faq p:last-child{margin-bottom:0}

  /* Testimonials */
  .quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:38px}
  .qt{background:var(--white);border:1px solid #E2E5E7;padding:28px 26px;display:flex;flex-direction:column}
  .qt blockquote{font-size:15.5px;color:#414A4E;line-height:1.6}
  .qt blockquote p{margin-bottom:.8em}
  .qt blockquote p:last-child{margin-bottom:0}
  .qt figcaption{margin-top:auto;padding-top:20px;border-top:1px solid #E2E5E7}
  .qt cite{font-style:normal;font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--ink);display:block}
  .qt .role{font-size:13px;color:#6B7276;margin-top:4px;display:block;line-height:1.45}

  /* Event / engagement list */
  .evs{margin-top:34px;border-top:1px solid #E2E5E7}
  .dk .evs{border-top-color:rgba(181,190,192,.22)}
  .ev{padding:22px 0;border-bottom:1px solid #E2E5E7;display:flow-root}
  .dk .ev{border-bottom-color:rgba(181,190,192,.22)}
  .ev h3{font-size:1.12rem;margin-bottom:6px}
  .ev .meta{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--pink);margin-bottom:9px}
  .ev p{font-size:15px;color:#5A6266;line-height:1.55;max-width:74ch}
  .dk .ev p{color:var(--grey)}

  /* Contact form */
  .form{margin-top:32px;max-width:560px}
  .field{margin-bottom:18px}
  .field label{display:block;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink);margin-bottom:7px}
  .field input,.field textarea{width:100%;font-family:var(--body);font-size:16px;color:var(--ink);background:var(--white);border:1px solid #C9CFD2;padding:12px 13px;line-height:1.45}
  .field textarea{min-height:140px;resize:vertical}
  .field input:focus,.field textarea:focus{border-color:var(--pink)}
  .field .hint{font-size:13px;color:#6B7276;margin-top:6px}
  .req{color:var(--pink)}
  .form button{font-family:var(--display);font-weight:600;font-size:14px;padding:13px 26px;background:var(--pink);color:#fff;border:1px solid var(--pink);cursor:pointer}
  .form button:hover{background:#b82a5a;border-color:#b82a5a}

  /* Direct-contact block */
  .dets{list-style:none;margin-top:26px}
  .dets li{margin-bottom:16px}
  .dets b{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--pink);display:block;margin-bottom:4px}
  .dets a{color:var(--ink);font-weight:600}
  .dk .dets a{color:var(--white)}

  /* Calendly */
  .cal{margin-top:34px;border:1px solid #E2E5E7;background:var(--white)}
  .calendly-inline-widget{min-width:320px}

  /* Legal pages */
  .legal .prose h2{font-size:clamp(1.25rem,2.4vw,1.6rem);margin:38px 0 14px}
  .legal .eff{font-family:var(--display);font-weight:600;font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--pink);margin-bottom:26px}

  /* Areas served */
  .areas{margin-top:26px;font-size:15px;color:#5A6266}
  .dk .areas{color:var(--grey)}

  @media(max-width:880px){
    .split{grid-template-columns:1fr;gap:28px}
    .pair{grid-template-columns:1fr}
    .quotes{grid-template-columns:1fr}
    .bul{grid-template-columns:1fr;gap:10px}
    .fgrid{grid-template-columns:1fr;gap:34px}
    .phero{padding:22px 0 20px}
  }

  @media(max-width:620px){
    /* The Calendly widget has a hard 320px minimum width. On a 320px phone the
       .wrap gutter would push it off-screen, so let it span the full viewport. */
    .cal{margin-left:-26px;margin-right:-26px;border-left:0;border-right:0;overflow-x:auto}
    .strip span{padding:0 7px;letter-spacing:.12em}
    .strip span::after{margin-left:12px}
    .facts li{grid-template-columns:1fr;gap:4px;padding:14px 0}
    .facts b{padding-top:0}
    .nav .wrap{gap:10px;padding-top:12px;padding-bottom:12px}
    .nav ul{gap:2px}
    .nav a.lnk{font-size:11.5px;letter-spacing:.08em;padding:7px 8px}
    .brand{font-size:1.05rem;width:100%;margin-right:0;margin-bottom:2px;gap:10px}
    .brand .bword{height:20px}
    .brand .bmark{height:30px}
    .fbot{flex-direction:column;gap:12px}
  }

/* ==========================================================================
   VISUAL SYSTEM — photography, duotone, angled geometry, glow.
   Direction taken from the design mock: dark/light alternation, pink duotone
   imagery, notched card geometry, glowing primary CTAs. Brand guide typography
   is unchanged.
   ========================================================================== */

  /* --- Logos -------------------------------------------------------------- */
  .brand{display:flex;align-items:center;gap:13px;margin-right:auto}
  .brand img{display:block;width:auto;max-width:100%;object-fit:contain}
  .brand .bword{height:26px}
  .brand .bmark{height:38px;flex:0 0 auto}
  .foot .fbrand img{display:block;height:88px;width:auto;margin-bottom:14px}

  /* --- Pink duotone photo treatment --------------------------------------- */
  .duo{position:relative;display:block;overflow:hidden;background:var(--black);isolation:isolate}
  .duo img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.08) brightness(.96)}
  .duo::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(150deg,var(--pink) 0%,#a8265180 45%,var(--pink-lt) 100%);
    mix-blend-mode:color;opacity:.92}
  .duo::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(150deg,rgba(205,49,103,.28),rgba(0,0,0,0) 55%)}
  /* untinted variant — real photo, just seated in the layout */
  .plain{position:relative;display:block;overflow:hidden;background:var(--black)}
  .plain img{display:block;width:100%;height:auto}

  /* --- Notched geometry --------------------------------------------------- */
  .nch{clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px))}
  .nch-sm{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}

  /* --- Glow --------------------------------------------------------------- */
  .btn,.btns a,.form button{transition:box-shadow .18s ease,background .18s ease,border-color .18s ease}
  .btn:hover,.btns a:hover,.form button:hover{box-shadow:0 6px 26px rgba(205,49,103,.42)}
  .btns a.ghost:hover{box-shadow:0 6px 26px rgba(205,49,103,.22)}
  .glow{position:relative}
  .glow::before{content:"";position:absolute;left:50%;top:50%;width:70%;height:70%;
    transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;
    background:radial-gradient(circle,rgba(205,49,103,.32),rgba(205,49,103,0) 70%)}
  .glow > *{position:relative;z-index:1}

  /* --- Photo hero — two columns, figure crisp beside the copy ------------- */
  .hero--photo{position:relative;overflow:hidden;padding:28px 0 22px}
  .herogrid{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center}
  .herocopy{position:relative;z-index:2}
  .hero--photo h1{max-width:none}
  .hero--photo .sub{max-width:46ch}
  .hero--photo .sig{max-width:42ch}
  .herologo{height:120px;width:auto;display:block;margin-bottom:20px}

  .heroart{position:relative;z-index:1}
  .heroart img{display:block;width:100%;height:auto;max-width:540px;margin:0 0 0 auto}
  /* pink halo sitting behind the figure */
  .heroart::before{content:"";position:absolute;left:52%;top:46%;width:88%;height:88%;
    transform:translate(-50%,-50%);border-radius:50%;z-index:-1;pointer-events:none;
    background:radial-gradient(circle,rgba(205,49,103,.40),rgba(205,49,103,0) 68%)}

  /* Inner-page hero with a photo behind the copy */
  .phero--photo{position:relative;overflow:hidden;padding:28px 0 22px}
  .phero--photo .wrap{position:relative;z-index:2}
  /* Measured at 1280px: the photo starts at x=658 and only reaches full strength
     at x=913, so the copy can run to the photo's edge. 22ch/60ch takes the headline
     from 5 lines to 3 and the paragraph from 6 to 4, 159px shorter; wider buys
     no more lines and only overlaps the photo. */
  .phero--photo h1{max-width:22ch}
  .phero--photo .sub{max-width:60ch}
  .phero--photo .qblock{max-width:min(55ch,100%)}

  /* --- Media + text band -------------------------------------------------- */
  .band{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;margin-top:36px}
  .band--flip .bandtext{order:2}
  .band--flip .bandart{order:1}
  .band p{margin-bottom:1em;color:#414A4E}
  .dk .band p{color:var(--grey)}

  /* --- Numbered tier rows (executive / audience tiers) -------------------- */
  .tier{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:center;
    background:var(--white);border:1px solid #E2E5E7;padding:34px 34px;margin-bottom:18px}
  .tier--dk{background:var(--near);border-color:rgba(181,190,192,.2)}
  .tier--dk h3{color:var(--white)}
  .tier--dk p{color:var(--grey)}
  .tiernum{font-family:var(--display);font-weight:800;font-size:3.1rem;line-height:.9;
    color:var(--pink);opacity:.32;display:block;margin-bottom:6px}
  .tier h3{font-size:1.3rem;text-transform:uppercase;margin-bottom:12px;
    padding-bottom:12px;border-bottom:1px solid #E2E5E7}
  .tier--dk h3{border-bottom-color:rgba(181,190,192,.22)}
  .tier p{font-size:15px;color:#5A6266;line-height:1.58;margin-bottom:.85em}
  .tier .btn{margin-top:10px}

  /* --- Chevron lists ------------------------------------------------------ */
  .chev{list-style:none;margin-top:20px}
  .chev li{position:relative;padding-left:26px;margin-bottom:10px;font-size:15.5px;
    color:#414A4E;line-height:1.55}
  .dk .chev li{color:var(--grey)}
  .chev li::before{content:"\00bb";position:absolute;left:0;top:-1px;color:var(--pink);
    font-weight:700;font-family:var(--display)}
  .chev--two{display:grid;grid-template-columns:1fr 1fr;gap:4px 30px}

  /* --- Star ratings ------------------------------------------------------- */
  .stars{color:var(--pink);font-size:15px;letter-spacing:.22em;margin-bottom:14px;display:block}
  /* Google reviews get a visible marker on the same line as the stars. They were
     only flagged in the grey role line before, which nobody reads. The .qt card
     is a flex column, which blockifies every child - so stars and badge need
     their own row wrapper or the badge drops beneath the stars. */
  .qhead{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-bottom:14px}
  .qhead .stars{margin-bottom:0}
  .gbadge{display:inline-block;padding:2px 8px;
    font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;line-height:1.5;color:#414A4E;background:#fff;border:1px solid #D5DADC}

  /* --- Credential chips --------------------------------------------------- */
  .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;align-items:center}
  .chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);
    font-weight:600;font-size:11px;letter-spacing:.13em;text-transform:uppercase;
    padding:9px 14px;border:1px solid rgba(205,49,103,.55);color:var(--white);background:rgba(205,49,103,.1)}
  .chip img{height:26px;width:auto;display:block}

  /* --- Figure captions ---------------------------------------------------- */
  .figcap{font-size:13px;color:#6B7276;margin-top:10px;line-height:1.45}
  .dk .figcap{color:var(--grey)}

  @media(max-width:980px){
    .tier{grid-template-columns:1fr;gap:26px}
    .tier .tierart{order:-1}
  }
  @media(max-width:880px){
    .band{grid-template-columns:1fr;gap:28px}
    .band--flip .bandtext{order:1}
    .band--flip .bandart{order:2}
    .chev--two{grid-template-columns:1fr}
    /* hero stacks: copy leads, figure sits beneath it at full strength */
    .herogrid{grid-template-columns:1fr;gap:26px}
    .heroart img{max-width:340px;margin:0 auto}
    .hero--photo h1,.hero--photo .sub,.hero--photo .sig,.hero--photo .eyebrow{max-width:none}
    .herologo{height:88px}
  }

  /* Inner-page heroes keep the softer behind-the-copy treatment */
  .phero--photo .heroart{position:absolute;right:0;top:0;bottom:0;width:48%;z-index:1;
    pointer-events:none;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 42%);
    mask-image:linear-gradient(to right,transparent 0%,#000 42%)}
  .phero--photo .heroart img{width:100%;height:100%;object-fit:cover;
    object-position:center 18%;opacity:.95;max-width:none;margin:0}
  .phero--photo .heroart::before{display:none}
  .phero--photo .heroart::after{content:"";position:absolute;inset:0;
    background:linear-gradient(115deg,rgba(0,0,0,.72),rgba(0,0,0,0) 60%)}

  /* --- Podcast / media cards ------------------------------------------- */
  .pods{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
  .pod{background:var(--near);border:1px solid rgba(181,190,192,.22);padding:26px 24px;
    display:flex;flex-direction:column}
  .lt .pod,.wt .pod{background:var(--white);border-color:#E2E5E7}
  /* Pink on near-black is only 3.92:1 — below AA for text this small. The light
     pink brand token clears it at 8.44:1. */
  .pod .card__lab{margin-bottom:10px;color:var(--pink-lt)}
  .pod h3{font-size:1.12rem;margin-bottom:10px;color:var(--ink)}
  .dk .pod h3{color:var(--white)}
  .pod p{font-size:14.5px;color:#5A6266;line-height:1.55}
  .dk .pod p{color:var(--grey)}
  .pod a.go{margin-top:auto;padding-top:20px;font-family:var(--display);font-weight:600;
    font-size:14px;color:var(--pink);text-decoration:none;border-top:1px solid #E2E5E7}
  .dk .pod a.go{border-top-color:rgba(181,190,192,.22)}

  @media(max-width:880px){
    .pods{grid-template-columns:1fr}
    .phero--photo .heroart{width:100%;opacity:.3;
      -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 78%);
      mask-image:linear-gradient(to bottom,#000 0%,transparent 78%)}
  }

  /* --- Swipeable testimonial rail --------------------------------------- */
  /* Natively scrollable/swipeable; the arrow buttons are enhancement only. */
  .railwrap{position:relative;margin-top:38px}
  .rail{display:grid;grid-auto-flow:column;grid-auto-columns:calc(50% - 9px);gap:18px;
    align-items:start;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:14px}
  .rail > *{scroll-snap-align:start}
  .rail:focus-visible{outline:2px solid var(--pink);outline-offset:4px}
  .rail::-webkit-scrollbar{height:6px}
  .rail::-webkit-scrollbar-track{background:#E7EAEB}
  .rail::-webkit-scrollbar-thumb{background:var(--pink)}
  .clamp{display:-webkit-box;-webkit-line-clamp:11;-webkit-box-orient:vertical;overflow:hidden}
  .railnav{display:flex;gap:8px;margin-top:8px}
  .railbtn{font-family:var(--display);font-size:20px;line-height:1;width:44px;height:44px;
    background:transparent;color:var(--ink);border:1px solid #C9CFD2;cursor:pointer}
  .railbtn:hover{border-color:var(--pink);color:var(--pink)}
  .dk .railbtn{color:var(--white);border-color:rgba(181,190,192,.4)}

  @media(max-width:880px){
    .rail{grid-auto-columns:88%}
  }

/* ==========================================================================
   MOTION — attention without noise. Every animation below is switched off
   for visitors who ask for reduced motion (see the block at the end).
   ========================================================================== */

  @keyframes momba-float   {0%,100%{transform:translateY(0)}   50%{transform:translateY(-12px)}}
  @keyframes momba-halo    {0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}
                            50%    {opacity:1;  transform:translate(-50%,-50%) scale(1.08)}}
  @keyframes momba-shimmer {0%{background-position:180% 0} 100%{background-position:-180% 0}}
  @keyframes momba-marquee {0%{transform:translateX(0)} 100%{transform:translateX(-50%)}}
  @keyframes momba-rise    {from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none}}
  @keyframes momba-sweep   {0%{transform:translateX(-120%) skewX(-18deg)}
                            60%,100%{transform:translateX(320%) skewX(-18deg)}}

  /* Hero figure drifts, its halo breathes */
  .heroart img{animation:momba-float 6.5s ease-in-out infinite;will-change:transform}
  .heroart::before{animation:momba-halo 6.5s ease-in-out infinite}

  /* Light moving through the pink headline words.
     Guarded by @supports so the text can never render invisible. */
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .shimmer{
      background-image:linear-gradient(100deg,
        var(--pink) 0%, var(--pink) 34%, #ff9dc0 45%,
        #fff2f6 50%, #ff9dc0 55%, var(--pink) 66%, var(--pink) 100%);
      background-size:180% 100%;
      -webkit-background-clip:text;background-clip:text;
      color:transparent;-webkit-text-fill-color:transparent;
      animation:momba-shimmer 6s linear infinite}
  }

  /* Credential ticker scrolls continuously */
  .strip--move{overflow:hidden}
  .strip--move .track{display:inline-flex;flex-wrap:nowrap;white-space:nowrap;
    animation:momba-marquee var(--dur,38s) linear infinite;will-change:transform}
  .strip--move:hover .track{animation-play-state:paused}

  /* Light sweeping across primary buttons */
  .btn:not(.btn--ghost):not(.btn--ink),.btns a:not(.ghost){position:relative;overflow:hidden}
  .btn:not(.btn--ghost):not(.btn--ink)::after,.btns a:not(.ghost)::after{
    content:"";position:absolute;top:-30%;left:0;width:34%;height:160%;pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.38),rgba(255,255,255,0));
    animation:momba-sweep 4.6s ease-in-out infinite}

  /* Sections lift in as they enter view. Only applied once the script runs,
     so content is always visible if JavaScript is unavailable. */
  html.js .reveal{opacity:0}
  html.js .reveal.is-in{animation:momba-rise .75s cubic-bezier(.2,.7,.3,1) forwards}

  @media (prefers-reduced-motion: reduce){
    .heroart img,.heroart::before,.strip--move .track,
    .btn::after,.btns a::after{animation:none !important}
    .shimmer{animation:none !important;background-image:none !important;
      color:var(--pink) !important;-webkit-text-fill-color:var(--pink) !important}
    html.js .reveal{opacity:1 !important;animation:none !important}
  }

  /* --- Framework label sitting on the divider --------------------------- */
  .plabel{font-family:var(--display);font-weight:700;font-size:12.5px;letter-spacing:.17em;
    text-transform:uppercase;color:var(--pink-lt);margin:40px 0 10px}
  .plabel sup{font-size:.62em;letter-spacing:0;vertical-align:super}
  .plabel + .plist{margin-top:0}

  /* --- Four-up audience row: 4 / 2 / 1, never an orphan ----------------- */
  .cards--four{grid-template-columns:repeat(4,1fr)}
  @media(max-width:1000px){ .cards--four{grid-template-columns:repeat(2,1fr)} }
  @media(max-width:620px){  .cards--four{grid-template-columns:1fr} }

  /* Captions must sit outside any clipped box, or the notch eats them. */
  .figwrap{display:block}
  .figwrap .figcap{padding-top:12px}

  /* --- Testimonial attribution with avatar ------------------------------ */
  .qt figcaption .who{display:flex;gap:13px;align-items:center}
  .whotext{min-width:0}
  .avatar{width:46px;height:46px;border-radius:50%;flex:0 0 46px;display:block;object-fit:cover;
    object-position:center top;background:#E2E5E7}
  .avatar--mono{display:flex;align-items:center;justify-content:center;background:var(--pink);
    color:#fff;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.04em}

  /* --- Safety partnership panel ----------------------------------------- */
  .pact{background:var(--black);color:var(--white);padding:46px 42px;margin-top:36px;
    border:1px solid rgba(205,49,103,.45);text-align:center}
  .pact h3{font-size:clamp(1.2rem,2.2vw,1.6rem);text-transform:uppercase;color:var(--white);
    padding-bottom:16px;border-bottom:1px solid rgba(205,49,103,.5);display:inline-block}
  .pact .pintro{color:var(--grey);max-width:60ch;margin:18px auto 0;font-size:15.5px}
  .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:30px 0 24px}
  .pbox{border:1px solid rgba(205,49,103,.5);display:flex;flex-direction:column}
  .pbox b{background:var(--pink);color:#fff;padding:11px 12px;font-family:var(--display);
    font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
  .pbox span{padding:16px 15px;color:var(--grey);font-size:14.5px;line-height:1.55}
  .pact .pfoot{color:var(--grey);max-width:66ch;margin:0 auto;font-size:15px}

  @media(max-width:880px){
    .pgrid{grid-template-columns:1fr}
    .pact{padding:34px 22px}
  }

  /* --- Anxiety Tax calculator ------------------------------------------- */
  .calc{display:grid;grid-template-columns:1.05fr .95fr;gap:0;margin-top:38px;
    border:1px solid #E2E5E7;background:var(--white)}
  .calcin{padding:34px 32px}
  .cfield{margin-bottom:26px}
  .cfield:last-child{margin-bottom:0}
  .cfield label{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--ink);margin-bottom:12px}
  .cfield output{font-size:1.32rem;font-weight:800;letter-spacing:0;text-transform:none;
    color:var(--pink);line-height:1}

  /* range input, styled for both engines */
  .cfield input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;
    background:#DFE3E5;border-radius:0;outline:none;cursor:pointer}
  .cfield input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
    width:22px;height:22px;border-radius:50%;background:var(--pink);cursor:pointer;
    border:3px solid var(--white);box-shadow:0 0 0 1px var(--pink)}
  .cfield input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
    background:var(--pink);cursor:pointer;border:3px solid var(--white);box-shadow:0 0 0 1px var(--pink)}
  .cfield input[type=range]::-moz-range-track{height:5px;background:#DFE3E5}
  .cfield input[type=range]:focus-visible{outline:2px solid var(--pink);outline-offset:6px}

  .calcout{background:var(--black);color:var(--white);padding:34px 32px;display:flex;
    flex-direction:column;justify-content:center}
  .calclab{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.15em;
    text-transform:uppercase;color:var(--pink-lt);margin-bottom:10px}
  .calcbig{font-family:var(--display);font-weight:800;line-height:1;color:var(--white);
    font-size:clamp(2.1rem,4.6vw,3.1rem);letter-spacing:-.01em}
  .calcsub{color:var(--grey);margin-top:10px;font-size:15.5px}
  .calcsub strong{color:var(--white)}
  .calcrule{border:0;border-top:1px solid rgba(205,49,103,.5);margin:20px 0 16px}
  .calcnote{color:var(--grey);font-size:15px;margin-bottom:22px}
  .calcnote strong{color:var(--pink-lt)}
  .calcout .btn{align-self:flex-start}

  @media(max-width:880px){
    .calc{grid-template-columns:1fr}
    .calcin{padding:28px 22px}
    .calcout{padding:28px 22px}
  }

  /* --- Calculator: slider + typed number side by side -------------------- */
  .cfield label{display:block;justify-content:flex-start}
  .crow{display:flex;align-items:center;gap:16px}
  .crow input[type=range]{flex:1 1 auto;min-width:0}
  .cnumwrap{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;
    border:1px solid #C9CFD2;background:var(--white);padding:7px 10px}
  .cnumwrap:focus-within{border-color:var(--pink);box-shadow:0 0 0 2px rgba(205,49,103,.18)}
  .cpre{font-family:var(--display);font-weight:800;color:var(--pink);font-size:1.02rem;line-height:1}
  .cnum{width:66px;border:0;outline:none;background:transparent;text-align:right;
    font-family:var(--display);font-weight:800;font-size:1.02rem;color:var(--pink);
    line-height:1;padding:0;-moz-appearance:textfield}
  .cnum--wide{width:82px}
  .cnum::-webkit-outer-spin-button,.cnum::-webkit-inner-spin-button{
    -webkit-appearance:none;margin:0}

  @media(max-width:620px){
    .crow{flex-wrap:wrap;gap:12px}
    .crow input[type=range]{flex:1 1 100%;order:2}
    .cnumwrap{order:1}
  }

  /* --- Calculator milestone flash --------------------------------------- */
  .calcout{position:relative;overflow:hidden;transition:box-shadow .3s ease}
  .calcout.is-big{box-shadow:inset 0 0 0 2px var(--pink),0 0 34px rgba(205,49,103,.35)}
  .calcburst{position:absolute;left:50%;top:34%;width:340px;height:340px;border-radius:50%;
    pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.3);
    background:radial-gradient(circle,rgba(236,144,168,.6),rgba(205,49,103,0) 68%)}
  .calcburst.go{animation:momba-burst .95s ease-out}
  .calcbig.pop{animation:momba-pop .6s cubic-bezier(.2,.9,.3,1)}
  .calcbadge{display:none;margin-left:10px;background:var(--pink);color:#fff;
    padding:4px 9px;font-size:9.5px;letter-spacing:.12em;vertical-align:middle}
  .is-big .calcbadge{display:inline-block}
  .is-big .calcbig{color:var(--pink-lt)}

  @keyframes momba-pop{0%{transform:scale(1)}34%{transform:scale(1.11)}100%{transform:scale(1)}}
  @keyframes momba-burst{0%{opacity:.9;transform:translate(-50%,-50%) scale(.3)}
                         100%{opacity:0;transform:translate(-50%,-50%) scale(2.5)}}

  @media (prefers-reduced-motion: reduce){
    .calcburst,.calcbig.pop{animation:none !important}
  }

  /* Phone sizing for the header lockup.
     Must live at the end of the file: the base .brand rules appear later than
     the earlier phone media block, so at equal specificity they would win. */
  @media(max-width:620px){
    .brand{gap:10px}
    .brand .bword{height:19px}
    .brand .bmark{height:30px}
  }

  /* --- Inner-page hero, split like the home hero ------------------------- */
  .phero--split{position:relative;overflow:hidden;padding:28px 0 22px}
  /* start, not center: centring against the taller image column pushed the
     eyebrow ~31px lower than on every other page. */
  .phero--split .herogrid{align-items:start}
  .phero--split h1{max-width:none}
  .phero--split .sub{max-width:46ch}
  .phero--split .sig{max-width:44ch}

  /* Framework name must never break across lines. */
  .keep{white-space:nowrap}
  .keep sup{font-size:.58em;letter-spacing:0;vertical-align:super}
  @media(max-width:760px){
    .phases h2 .keep{font-size:clamp(1rem,5.2vw,1.55rem);display:block}
  }

  /* --- Header lockup: snake in the left corner, then the wordmark --------
     Keeping the mark inside .brand means it can never drift when the nav
     wraps to a second row, which is what the right-aligned version did. */
  .brand{gap:14px}
  .brand .bmark{height:40px;width:auto;display:block;flex:0 0 auto;order:-1;
    filter:drop-shadow(0 0 2px rgba(255,255,255,.6))
           drop-shadow(0 0 9px rgba(255,255,255,.25))
           drop-shadow(0 2px 12px rgba(205,49,103,.45))}

  /* --- Podcast rows: preview left, copy right ---------------------------- */
  .pods{grid-template-columns:1fr;gap:16px}
  .pod{flex-direction:row;padding:0;align-items:stretch;overflow:hidden}
  .podthumb{position:relative;flex:0 0 306px;display:block;line-height:0;
    background:var(--black);overflow:hidden}
  .podthumb img{width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .4s ease}
  .pod:hover .podthumb img{transform:scale(1.045)}
  .playbadge{position:absolute;left:50%;top:50%;width:56px;height:56px;border-radius:50%;
    transform:translate(-50%,-50%);background:rgba(205,49,103,.94);
    box-shadow:0 4px 20px rgba(0,0,0,.45)}
  .playbadge::after{content:"";position:absolute;left:56%;top:50%;transform:translate(-50%,-50%);
    border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
  .podbody{padding:26px 28px;display:flex;flex-direction:column;flex:1 1 auto;min-width:0}

  @media(max-width:760px){
    .pod{flex-direction:column}
    .podthumb{flex:0 0 auto;aspect-ratio:16/9;width:100%}
    .podbody{padding:22px 20px}
  }

  /* --- Photo + vertical clip side by side -------------------------------- */
  .mediarow{display:flex;gap:18px;align-items:flex-start;margin-top:34px;flex-wrap:wrap}
  .vclip{flex:0 0 250px;margin:0}
  .vclip video{display:block;width:100%;height:auto;background:var(--black)}
  .vclip .figcap{padding-top:8px}
  @media(max-width:700px){
    .vclip{flex:1 1 100%;max-width:280px;margin:0 auto}
  }

  /* --- Slider: colour the distance travelled ---------------------------- */
  /* --fill is set by the calculator script; the default keeps the track
     neutral before the script runs. */
  .cfield input[type=range]{--fill:0%;
    background:linear-gradient(90deg,var(--pink) 0,var(--pink) var(--fill),
                               #DFE3E5 var(--fill),#DFE3E5 100%)}
  .cfield input[type=range]::-moz-range-track{background:transparent}
  .cfield input[type=range]::-moz-range-progress{height:5px;background:var(--pink)}

  /* --- Footer credential badge ------------------------------------------ */
  .fcreds{display:flex;align-items:center;gap:13px;margin-top:22px;
    padding-top:20px;border-top:1px solid rgba(181,190,192,.18)}
  .fcreds img{height:58px;width:auto;display:block;flex:0 0 auto;border-radius:50%}
  .fcreds span{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.09em;
    text-transform:uppercase;line-height:1.4;color:var(--grey)}

  /* --- Booking page ------------------------------------------------------ */
  .cal{border:1px solid #E2E5E7;background:var(--white);padding:6px;position:relative}
  .cal::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--pink)}
  .calfallback{padding:26px 24px;color:#414A4E;max-width:60ch}
  .calfallback a{color:var(--pink);font-weight:600}

  /* Who's Who badge sits on the bottom bar, not in the brand column */
  .fbot .fcreds{margin-top:0;padding-top:0;border-top:0;flex:0 0 auto;margin-right:auto}
  @media(max-width:620px){ .fbot .fcreds{margin-right:0} }

  /* The composite (about-hero.webp) carries ~16% of glow and empty space above
     her head, so with its box level with the copy she sat 62px below the top of
     the headline. The image is exactly column-width, so -13% of the column lifts
     her head level with the headline. What moves above the hero edge is fully
     transparent (the glow only starts 57px into the file). Desktop only: at 880px
     and below the hero stacks, and a lift would push her into the text above.
     At full column width the photo ran ~130px below the copy and left an empty
     band under it, so it is also trimmed to 90% of the column (right-aligned)
     and lifted a little further; the extra lift still only moves transparent
     pixels past the hero edge. */
  @media(min-width:881px){ .heroart--lift{width:90%;justify-self:end;margin-top:-14%} }

  /* About hero: more room for the copy, a smaller photo to match it. Measured at
     1280px - the headline drops from 5 lines to 4 once the copy column passes
     ~600px, and 1.25/.75 is the split that gets there. Headline 4 lines, paragraph
     4, quote 1 (it needs 459px); photo 369x451 against 481px of copy, and the hero
     goes from 639px to 531px. Desktop only, so phones keep the stacked layout. */
  @media(min-width:881px){ .phero--copywide .herogrid{grid-template-columns:1.25fr .75fr} }
  .phero--copywide .sub{max-width:60ch}
  .phero--copywide .qblock{max-width:none}

  /* Reduced motion: the marquee stops, and a stopped marquee is one long line cut
     off at the edge - on About only 5 of the 7 credentials showed. Reflow it
     instead: every item visible and centred, the loop's duplicate copy hidden, the
     loop separator bullet removed. Phones get one swipeable line, not a tall stack. */
  @media (prefers-reduced-motion: reduce){
    .strip--move .track{display:flex;justify-content:center;white-space:normal}
    .strip--move .set{display:flex;flex-wrap:wrap;justify-content:center;row-gap:8px}
    .strip--move .set > span{white-space:nowrap}
    .strip--move .set[aria-hidden="true"]{display:none}
    .strip--move .set::after{content:none}
  }
  @media (prefers-reduced-motion: reduce) and (max-width:620px){
    .strip--move{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .strip--move .track{justify-content:flex-start}
    .strip--move .set{flex-wrap:nowrap;justify-content:flex-start;padding:0 14px}
  }

  /* Book a Call: its copy is short, so once the photo-hero text was widened the
     hero - and the photo with it - came out 319px tall, showing 53% of the picture
     as a thin slice. A desktop floor gives the photo room and centres the copy in it. */
  @media(min-width:881px){
    .phero--tall{min-height:480px;display:flex;align-items:center}
    .phero--tall > .wrap{width:100%}
  }

  /* Speaking's Recent platforms: the About podcast rows, image on the right.
     Below 760px the rows stack and the base column layout takes over. */
  @media(min-width:761px){ .pods--flip .pod{flex-direction:row-reverse} }
  /* A row with two destinations (the article and the book): the links sit
     side by side above one shared rule instead of each carrying its own. */
  .pod .golinks{margin-top:auto;padding-top:20px;border-top:1px solid #E2E5E7;
    display:flex;flex-wrap:wrap;gap:6px 26px}
  .dk .pod .golinks{border-top-color:rgba(181,190,192,.22)}
  .pod .golinks a.go{margin-top:0;padding-top:0;border-top:0}
  /* The article-and-book picture must show both whole, whatever height the
     row grows to - contained on the image's own dark ground, not cropped. */
  .podthumb--contain{background:var(--near)}
  .podthumb--contain img{object-fit:contain}
  /* Several events in one row: one line each, the title in white. */
  .pod .evline + .evline{margin-top:10px}
  .dk .pod .evline strong{color:var(--white);font-weight:600}
  /* Lectures row: a type tile until there is a photo from the room. */
  .podthumb--type{display:flex;flex-direction:column;justify-content:center;gap:10px;
    padding:26px 28px;line-height:1.1;text-decoration:none;color:var(--white);
    background:radial-gradient(120% 95% at 22% 18%,rgba(205,49,103,.62),rgba(205,49,103,0) 62%),var(--near)}
  .podthumb--type .tt-kick{font-family:var(--display);font-size:11.5px;font-weight:700;
    letter-spacing:.18em;text-transform:uppercase;color:var(--pink-lt)}
  .podthumb--type .tt-big{font-family:var(--display);font-weight:800;text-transform:uppercase;
    font-size:2.5rem;line-height:1;letter-spacing:-.005em}
  .podthumb--type .tt-sub{font-family:var(--display);font-weight:600;font-size:13.5px;
    letter-spacing:.05em;color:var(--grey)}

  /* --- Desktop width: use the whole row ----------------------------------
     Section headings were capped at 19-22ch, so most broke onto two or three
     lines with half the row empty beside them. They now run the full width
     and balance any wrap. Intro ledes use the full row too: 13 of them were
     one sentence that broke onto a second line with room to spare. The longer
     ones wrap across the row; text-wrap:pretty keeps a lone word off the last
     line. */
  .sort h2,.phases h2,.tax h2,.shead h2{max-width:none}
  h2{text-wrap:balance}
  .sort .lede,.phases .lede,.shead .lede{max-width:none;text-wrap:pretty}
  /* A heading with a dash either fits on one line or breaks at the dash:
     each half is a .nobr span, so the space after the dash is the only
     place it can wrap. Phones wrap normally - a half can be wider than the
     screen there. */
  @media(min-width:761px){ h2 .nobr{white-space:nowrap} }
  @media(min-width:881px){
    /* Text-only sections: heading and lede across the top, the body in two
       columns - roughly half the height, with a ~57ch line in each column.
       Paragraphs stay whole, so no sentence continues at the top of the
       second column.
       Legal pages keep one column; they are read straight through. So does
       prose that follows a floated photo (CE "Who teaches it"): the photo is
       already its second column. */
    section:not(.legal) > .wrap > .prose:not(figure ~ .prose){max-width:none;column-count:2;column-gap:56px}
    section:not(.legal) > .wrap > .prose > h2,
    section:not(.legal) > .wrap > .prose > h3,
    section:not(.legal) > .wrap > .prose > .lede{column-span:all}
    section:not(.legal) > .wrap > .prose > .lede{max-width:none;text-wrap:pretty}
    section:not(.legal) > .wrap > .prose > p{break-inside:avoid}
    /* Entry lists (engagements, featured work) run two to a row - except
       entries with a photo beside the text, which already fill the row. */
    .evs:not(:has(figure)){display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
  }

  /* Bottom action bar on phones and tablets - the same component and look as
     /training's "Choose your level" bar. Hidden (and out of the tab order)
     until the script shows it past the hero; drops away near the footer. */
  .stickybar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(0,0,0,.94);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));border-top:2px solid var(--pink);
    transform:translateY(105%);visibility:hidden;transition:transform .25s ease,visibility 0s .25s}
  .stickybar.show{transform:translateY(0);visibility:visible;transition:transform .25s ease}
  .stickybar .btn{display:block;width:100%;text-align:center;font-weight:700;font-size:1rem;
    letter-spacing:.04em;text-transform:uppercase;padding:1.05em 1.9em;border:0;
    clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
  @media(min-width:960px){ .stickybar{display:none} }
  @media (prefers-reduced-motion: reduce){ .stickybar,.stickybar.show{transition:none} }

  /* MUST STAY LAST. The .brand .bmark rule that carries the logo glow sits at
     line ~701, after the 620px block at ~678, so at equal specificity it won at
     phone width too and the mark never shrank to 30px. That left the header 12px
     taller on pages using this stylesheet than on /training, which does shrink -
     the jump you see moving between them on a phone. Restated here, last. */
  @media(max-width:620px){
    .brand .bmark{height:30px}
    .brand .bword{height:19px}
  }