/* ============================================================
   MUVIST Academy — Movement Marketing
   Brand system: Oswald (display) + Montserrat (body)
   Palette: red #EB1F28 / deep red #B6141C / orange #F58346
   Growth-by-Giving green #126D46 · teal #437576 · ink #1f2124
   ============================================================ */

:root{
  --red:#EB1F28;
  --red-deep:#B6141C;
  --orange:#F58346;
  --orange-deep:#E66727;
  --green:#126D46;
  --green-deep:#00402D;
  --green-soft:#4B7F5C;
  --teal:#437576;
  --navy:#324A6D;
  --ink:#1c1f22;
  --ink-2:#33373d;
  --slate:#69727d;
  --line:#e7e3dc;
  --cream:#f7f4ee;
  --cream-2:#efe9df;
  --white:#ffffff;
  --shadow:none;
  --shadow-sm:none;
  --radius:18px;
  --radius-sm:12px;
  --maxw:1180px;
  --ff-display:"Oswald", "Arial Narrow", sans-serif;
  --ff-body:"Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--white);
  line-height:1.7;
  font-size:1.0625rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--red-deep);text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4,.display{
  font-family:var(--ff-display);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:5rem;text-transform:uppercase;letter-spacing:.005em}
h2{font-size:3.3rem;text-transform:uppercase}
h3{font-size:1.9rem}
h4{font-size:1.15rem;font-weight:500}
p{margin:0 0 1.1em}
strong{font-weight:700}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
li{margin-bottom:.5em}
p,li,figcaption,blockquote,.lead{text-wrap:pretty}

/* ---------- layout ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.container--narrow{max-width:840px}
.container.center{max-width:840px}
.section{padding:clamp(56px,8vw,110px) 0}
.section--tight{padding:clamp(40px,5vw,64px) 0}
.section--cream{background:var(--cream)}
.section--cream2{background:var(--cream-2)}
.section--ink{background:var(--ink);color:#efe9df}
.section--ink h1,.section--ink h2,.section--ink h3{color:#fff}
.section--green{background:linear-gradient(150deg,var(--green-deep),var(--green));color:#eafaf0}
.section--green h2,.section--green h3{color:#fff}
.section--red{background:linear-gradient(150deg,var(--red-deep),var(--red));color:#fff}
.section--red h2,.section--red h3{color:#fff}

.center{text-align:center}
.lead{font-size:1rem;line-height:1.6;color:var(--ink-2)}
.section--ink .lead,.section--green .lead,.section--red .lead{color:rgba(255,255,255,.86)}
.muted{color:var(--slate)}
.maxw-prose{max-width:68ch}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}

/* ---------- eyebrow / kicker ---------- */
.eyebrow{
  display:inline-block;
  font-family:var(--ff-display);
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:1.4rem; /* 75% larger than legacy .8rem — sitewide per Marshall 2026-05-28 */
  font-weight:500;
  color:var(--red-deep);
  margin-bottom:1rem;
}
.section--ink .eyebrow,.section--green .eyebrow,.section--red .eyebrow{color:var(--orange)}
.eyebrow--green{color:var(--green)}

/* Brand rule (Marshall, 2026-05-28): text on every photo-background or sage/green
   section renders WHITE with no overlays. Consolidated selector covers the seven
   photo-bg classes plus the green-fill audience blocks; !important overrides any
   inline color on individual eyebrows. */
:is(.hero, .hero--charities-photo, .hero--grow-photo,
    .section--green, .section--stats-photo, .section--gbg-photo,
    .section--cta-photo, .section--cta-photo-hp, .section--enquiry-photo,
    .section--course2-photo, .section--academy-next-photo,
    .section--charities-course-photo, .section--smes-course-photo,
    .aud__ribbon, .aud__felix, .aud__mod1)
  :is(.eyebrow, .aud__eyebrow, h1, h2, h3,
      .lead, p, .muted, .form-note,
      .stat__lab, .counter__num, .counter__lab){
  color:#fff !important;
  text-shadow:none !important;
}

/* ---------- buttons ---------- */
/* Universal button states (per brand guideline):
   UP  (rest)  -> dark charcoal fill, white text, subtle border
   OVER (hover/focus) -> solid red fill, white text. No glow. */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--ff-display);
  text-transform:uppercase;letter-spacing:.06em;font-weight:500;
  font-size:.98rem;
  padding:.85em 1.7em;border-radius:999px;
  background:#23272d;color:#fff;border:2px solid rgba(255,255,255,.16);
  cursor:pointer;transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  line-height:1;text-align:center;text-decoration:none;
}
.btn:hover,.btn:focus-visible{background:var(--red);color:#fff;border-color:var(--red);text-decoration:none;transform:translateY(-2px)}
.arr{display:inline-block;width:1.05em;height:1.05em;flex:0 0 auto;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2012h15%27%2F%3E%3Cpath%20d%3D%27M13%206l6%206-6%206%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2012h15%27%2F%3E%3Cpath%20d%3D%27M13%206l6%206-6%206%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;transition:transform .2s ease}
.btn:hover .arr{transform:translateX(4px)}
/* every colour variant now shares the same up (dark) + over (red) states */
.btn--primary,.btn--orange,.btn--green,.btn--ink,.btn--outline,.btn--light,.btn--ghostlight{
  background:#23272d;color:#fff;border-color:rgba(255,255,255,.16);box-shadow:none;
}
.btn--primary:hover,.btn--orange:hover,.btn--green:hover,.btn--ink:hover,.btn--outline:hover,.btn--light:hover,.btn--ghostlight:hover,
.btn--primary:focus-visible,.btn--orange:focus-visible,.btn--green:focus-visible,.btn--ink:focus-visible,.btn--outline:focus-visible,.btn--light:focus-visible,.btn--ghostlight:focus-visible{
  background:var(--red);color:#fff;border-color:var(--red)}
.btn--sm{padding:.62em 1.2em;font-size:.85rem}
.btn--block{display:flex;width:100%;justify-content:center}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}
.btn-row--center{justify-content:center}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:1.2rem;height:72px}
.nav__logo{display:flex;align-items:center;flex:0 0 auto}
.nav__logo img{height:34px;width:auto}
.nav__menu{display:flex;align-items:center;gap:.3rem;list-style:none;padding:0;margin-block:0}
.nav__menu>li{position:relative}
.nav__link{
  display:inline-flex;align-items:center;gap:.35em;
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.05em;
  font-size:.92rem;font-weight:400;color:var(--ink-2);
  padding:.6em .7em;border-radius:8px;white-space:nowrap;
}
.nav__link:hover{color:var(--red-deep);text-decoration:none;background:var(--cream)}
.nav__link--label{cursor:default;user-select:none}
.nav__link.is-active{color:var(--red-deep)}
.has-drop>.nav__link::after{content:"▾";font-size:.7em;opacity:.7}
.nav__drop{
  position:absolute;top:calc(100% + 6px);left:0;min-width:230px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:.5rem;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.18s ease;list-style:none;margin:0;
}
.has-drop:hover .nav__drop,.has-drop:focus-within .nav__drop{opacity:1;visibility:visible;transform:translateY(0)}
.nav__drop a{display:block;padding:.6em .8em;border-radius:9px;color:var(--ink-2);font-size:1rem;font-family:var(--ff-display);text-transform:none;letter-spacing:.04em}
.nav__drop a:hover{background:var(--cream);color:var(--red-deep);text-decoration:none}
.nav__drop small{display:block;color:var(--slate);font-size:.8rem;font-family:var(--ff-display);font-weight:300;text-transform:none;letter-spacing:.02em}
.nav__cta{margin-left:.4rem}
/* Desktop: centre the link cluster between the logo and the Enrol button.
   Two auto margins split the free space evenly, so the links sit centred
   while the CTA stays pinned to the far right. */
@media (min-width:861px){
  .nav__menu{flex:1 1 auto;gap:.55rem;transform:translateY(9px)}
  .nav__menu > li:first-child{margin-left:auto}
  .nav__cta{margin-left:auto}
}
.nav__toggle{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.nav__toggle span{display:block;width:26px;height:2px;background:var(--ink);transition:.2s}
.nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle.is-open span:nth-child(2){opacity:0}
.nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:#94a187;color:#fff}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(48px,7vw,96px) 0}
/* Homepage hero: bottom-align the video image with the bottom of the route buttons.
   The caption sits below absolutely so it does not push the video stack down. */
body[data-page="home"] .hero__grid{align-items:end}
body[data-page="home"] .hero__grid > div:last-child{position:relative;padding-bottom:2.2rem}
body[data-page="home"] .hero__grid > div:last-child .form-note{position:absolute;left:0;right:0;bottom:0;margin:0}
@media (max-width:640px){body[data-page="home"] .hero__grid{align-items:stretch}
  body[data-page="home"] .hero__grid > div:last-child{padding-bottom:0}
  body[data-page="home"] .hero__grid > div:last-child .form-note{position:static;margin-top:.6rem}}
.hero__img{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/10;background:#000}
.hero__img img{width:100%;height:100%;object-fit:cover}
.hero h1{color:#fff}
.hero .lead{color:rgba(255,255,255,.85);max-width:46ch}
.hero__sub{font-size:1.15rem;color:rgba(255,255,255,.9);font-weight:500}
.hero--page{background:#94a187}
.hero--page .hero__inner{padding:clamp(56px,8vw,120px) 0 clamp(48px,6vw,90px);max-width:860px}
.hero--page h1{color:#fff}
/* partnerships hero photo (Grow Together. Give First.) — white text via shared photo-bg rule */
.hero--grow-photo{background:#94a187}
@media (max-width:640px){.hero--grow-photo{background-image:none}
.hero--grow-photo .hero__inner{padding-top:44px;padding-bottom:44px}}

/* dual audience routing buttons */
.route{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.6rem;max-width:520px}
.route a{
  display:flex;flex-direction:column;gap:.2rem;align-items:flex-start;
  background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.2);
  padding:1.1rem 1.2rem;border-radius:14px;color:#fff;transition:.18s;
}
/* On already-dark sections, swap the tint to 30% white so the button still
   reads against the surrounding dark bg. */
.section--ink .route a,
.section--academy-next-photo .route a,
.section--charities-course-photo .route a,
.section--smes-course-photo .route a{background:rgba(255,255,255,.3)}
.route a:hover{background:var(--red);color:#fff;border-color:var(--red);text-decoration:none;transform:translateY(-3px)}
.route .route__lab{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.05em;font-size:1.05rem}
.route .route__sub{font-size:.82rem;opacity:.8}
.route a:hover .route__sub{opacity:.9}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:clamp(18px,2.5vw,30px)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.split--wide-left{grid-template-columns:1.2fr .8fr}
.split--top{align-items:start}
/* Left-aligned button row (overrides the default centred btn-row--center used above) */
.btn-row--left{justify-content:flex-start}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-sm);height:100%;
}
.card--flat{box-shadow:none}
/* Center-aligned card variant: icon, heading and copy all horizontally centered */
.card--center{text-align:center}
.card--center .card__icon--logo{margin-inline:auto}
.card--cream{background:var(--cream);border-color:transparent}
.card__icon{
  width:52px;height:52px;border-radius:12px;display:grid;place-items:center;
  font-family:var(--ff-display);font-size:1.4rem;color:#fff;margin-bottom:1rem;background:var(--red)
}
.card__icon--green{background:var(--green)}
.card__icon--orange{background:var(--orange-deep)}
.card__icon--teal{background:var(--teal)}
.card__icon--navy{background:var(--navy)}
/* Logo variant: full wordmark in place of the single-letter block. Sized ~2.3x the
   legacy 52px square so "muvist Academy" is readable; transparent + no border-radius. */
.card__icon--logo{width:auto;height:auto;max-width:120px;background:transparent;padding:0;margin-bottom:1rem;border-radius:0}
.card__icon--logo img{width:100%;height:auto;display:block}
.card h3{margin-bottom:.4rem}

/* ---------- audience block (for-charities / for-smes) ---------- */
/* =====================================================
   Audience-page layout (For Charities / For SMEs)
   Per "the academy page layout test sample.pdf" 2026-06-02
   ===================================================== */
.aud{--accent:var(--green);--accent-soft:#94a187;--accent-dark:#7c8a72;--pill:#e7e2d2;--pill-dot:#cf5a4a}
.aud--sme{--accent:var(--navy);--accent-soft:#a7967a;--accent-dark:#8c7c64;--pill:#ece8d8;--pill-dot:var(--orange-deep)}
.aud__head{padding:clamp(36px,5vw,72px) 0 clamp(20px,3vw,36px);background:#fff}
.aud__head-grid{display:grid;grid-template-columns:1fr auto;gap:clamp(1rem,3vw,2.4rem);align-items:start;max-width:78ch}
.aud__eyebrow{display:inline-block;font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.18em;font-size:1.4rem;color:var(--accent);margin-bottom:.6rem;font-weight:700}
.aud--sme .aud__eyebrow{color:var(--orange-deep)}
.aud__h1{font-family:var(--ff-display);font-weight:700;text-transform:uppercase;font-size:2.5rem;line-height:1.1;margin:0 0 1rem;color:var(--ink)}
.aud__sub{font-size:1.05rem;line-height:1.55;color:var(--ink-2);max-width:62ch;margin:0 0 1.4rem;font-weight:600}
.aud__badge{width:clamp(70px,8vw,108px);height:clamp(70px,8vw,108px);border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--ff-display);font-weight:700;font-size:1.2rem;text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;text-align:center;line-height:1;padding:.6em}
.aud--sme .aud__badge{background:var(--orange-deep)}
/* Intro grid (photo + content side by side) */
.aud__intro-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,52px);align-items:center;
  max-width:84ch;margin:0 auto clamp(28px,4vw,52px);
}
.aud__intro-photo{
  background:#94a187;border-radius:12px;
  aspect-ratio:1/1;width:100%;
}
.aud__intro-body{display:flex;flex-direction:column}
.aud__intro-body .aud__eyebrow{color:var(--red)}
.aud__intro-body .aud__h1{font-size:1.85rem;margin:0 0 .9rem}
.aud__intro-body .aud__sub{font-size:.95rem;margin:0 0 1.1rem;max-width:none}
.aud__intro-body>p:not(.aud__sub){font-size:.92rem;color:var(--ink-2);line-height:1.6;margin:0}
@media (max-width:780px){
  .aud__intro-grid{grid-template-columns:1fr;gap:1.4rem}
  .aud__intro-photo{aspect-ratio:1/1;min-height:240px;background-size:contain !important;background-position:center !important}
}

.aud__twocol{column-count:2;column-gap:clamp(28px,3.5vw,48px);max-width:84ch;font-size:1rem;color:var(--ink-2);line-height:1.6;margin:0 auto 1.6rem}
.aud__twocol p{margin:0 0 1rem;break-inside:avoid}
@media(max-width:720px){.aud__twocol{column-count:1}}

.aud__photo{background:#d1d2c9;height:clamp(180px,28vw,300px);margin:1.4rem 0 1.6rem;display:grid;place-items:center;color:rgba(0,0,0,.32);font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;border-radius:6px}
.aud__photo--round{width:clamp(220px,26vw,320px);height:clamp(220px,26vw,320px);border-radius:50%;margin:2rem auto 1.4rem}
.aud__video{background:#cfd0c7;aspect-ratio:16/9;margin:1.4rem 0;display:grid;place-items:center;border-radius:6px;position:relative}
.aud__video:not(video)::before{content:"";width:0;height:0;border-style:solid;border-width:22px 0 22px 38px;border-color:transparent transparent transparent var(--red)}
/* Real <video> testimonials replace the beige placeholder. Source frames are
   3:2; we keep aspect-ratio:3/2 so the player matches the video, no black bars.
   preload=auto on the markup means the browser starts buffering on page load
   so playback is instant when the user hits play. */
video.aud__video{background:#000;aspect-ratio:3/2;width:100%;height:auto;display:block;object-fit:contain;max-width:100%}
.aud__video-cap{margin:.6rem 0 1.6rem;font-size:.85rem;color:var(--slate);text-align:center}

/* Testimonial block - photo left, pull-quote + full quote + attribution right */
.aud__testimonial{padding:clamp(24px,3.2vw,42px) 0 clamp(48px,7vw,90px)}
.aud__testimonial-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;max-width:104ch;margin:0 auto}
.aud__testimonial-photo{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:16/10;background:#cfd0c7}
.aud__testimonial-photo img{width:100%;height:100%;object-fit:cover;display:block}
.aud__testimonial-quote{margin:0}
.aud__testimonial-pull{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.55rem,2.4vw,2.05rem);line-height:1.2;color:var(--ink);margin:0 0 1.15rem}
.aud__testimonial-pull-br{display:none}
@media (min-width:781px){.aud__testimonial-pull-br{display:inline}}
.aud__testimonial-body{font-size:1.02rem;line-height:1.62;color:var(--ink-2);font-style:italic;margin:0 0 1.15rem}
.aud__testimonial-cite{display:block;font-style:normal;line-height:1.5}
.aud__testimonial-cite b{display:block;font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.05em;font-weight:600;font-size:1rem;color:var(--ink)}
.aud__testimonial-cite span{display:block;font-size:.9rem;color:var(--slate);margin-top:.15rem}
@media (max-width:780px){
  .aud__testimonial{padding:clamp(24px,5vw,40px) 0 clamp(32px,7vw,56px)}
  .aud__testimonial-grid{grid-template-columns:1fr;gap:1.6rem}
}

.aud__subh{font-family:var(--ff-display);font-weight:700;text-align:center;font-size:1.4rem;margin:clamp(56px,7vw,90px) 0 clamp(20px,3vw,32px);color:var(--ink);line-height:1.3}

.aud__pills{list-style:none;padding:0;margin:1.4rem auto 0;display:flex;flex-direction:column;gap:.7rem;max-width:78ch}
.aud__pills li{background:var(--pill);border-radius:999px;padding:.85rem 1.4rem .85rem 3.3rem;position:relative;font-size:.97rem;color:var(--ink);line-height:1.45}
.aud__pills li::before{content:"";position:absolute;left:1rem;top:50%;transform:translateY(-50%);width:1.1rem;height:1.65rem;background:url("../form-arrow-icon.png?v=20260625zf") center/contain no-repeat}

.aud__takeaway{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.5vw,48px);align-items:start;margin:clamp(28px,4vw,48px) auto;max-width:84ch}
.aud__takeaway .aud__photo{margin:0;width:100%;height:clamp(180px,22vw,260px);align-self:start}
.aud__takeaway-body h4{font-family:var(--ff-display);font-weight:700;font-size:1.35rem;margin:0 0 .8rem;color:var(--ink)}
.aud__takeaway-body p{font-size:1rem;line-height:1.6;color:var(--ink-2);margin:0 0 .8rem}
@media(max-width:680px){.aud__takeaway{grid-template-columns:1fr}.aud__takeaway .aud__photo{width:100%;max-width:340px;height:clamp(160px,40vw,220px);justify-self:center}}

.aud__ribbon{background:var(--accent-soft);color:#fff;padding:clamp(48px,6vw,84px) 0;text-align:center;margin:clamp(36px,5vw,64px) 0}
.aud__ribbon p{max-width:64ch;margin:0 auto 1.6rem;font-size:1rem;color:rgba(255,255,255,.95);line-height:1.6;text-align:center}
.aud__ribbon p.aud__ribbon-h{font-family:var(--ff-display);font-weight:700;text-transform:uppercase;font-size:2.5rem;line-height:1.1;color:#fff;text-align:center;margin:0 0 1rem;max-width:none;letter-spacing:.02em}
.aud__ribbon-logo{display:flex;justify-content:center;align-items:center;gap:.7rem;margin-top:1.8rem}
.aud__ribbon-logo img{height:auto;width:auto;max-width:100%;opacity:1}

.aud__felix{background:var(--accent-soft);color:#fff;padding:clamp(48px,6vw,84px) 0;text-align:center;margin:clamp(36px,5vw,64px) 0}
.aud__felix-h{font-family:var(--ff-display);font-weight:700;text-transform:uppercase;font-size:2.5rem;line-height:1.1;color:#fff;text-align:center;margin:0 0 1rem;letter-spacing:.02em}
.aud__felix p{max-width:58ch;margin:0 auto 1.4rem;font-size:1.1875rem;color:rgba(255,255,255,.95);line-height:1.6}
.aud__felix-logo{display:flex;justify-content:center;align-items:center;margin:1.6rem 0}
.aud__felix-logo img{height:clamp(58px,6vw,86px);width:auto;display:block}
.aud__felix-btn,.aud__mod1-btn{display:inline-block;background:#23272d;color:#fff;padding:1rem 1.8rem;border-radius:999px;font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;font-weight:600;text-decoration:none;border:2px solid rgba(255,255,255,.16);cursor:pointer;transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;margin-top:1rem}
.aud__felix-btn:hover,.aud__felix-btn:focus-visible,.aud__mod1-btn:hover,.aud__mod1-btn:focus-visible{transform:translateY(-2px);background:var(--red);color:#fff;border-color:var(--red);text-decoration:none}

.aud__retain{padding:clamp(36px,5vw,64px) 0 clamp(24px,3vw,40px);text-align:center}
.aud__retain .aud__eyebrow{text-align:center;display:block;color:var(--red)}
.aud__retain .aud__subh{margin:0 0 clamp(20px,3vw,32px)}
.aud__retain .aud__twocol{margin-inline:auto;text-align:left}
.aud__retain-btn{margin-top:1.4rem}

.aud__mod1{background:var(--accent-dark);color:#fff;padding:clamp(48px,6vw,84px) 0;margin-top:clamp(36px,5vw,64px)}
.aud__mod1-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:center;max-width:90ch;margin-inline:auto}
.aud__mod1 .aud__eyebrow{color:rgba(255,255,255,.85);font-size:1.4rem;display:inline-block}
.aud__mod1-h{font-family:var(--ff-display);font-weight:700;font-size:2.1rem;color:#fff;line-height:1.15;margin:0 0 .4rem}
.aud__mod1-body p{color:rgba(255,255,255,.95);font-size:1rem;margin:0 0 1rem;line-height:1.6}
@media(max-width:780px){.aud__mod1-grid{grid-template-columns:1fr}}

.aud__cta{margin:1.6rem 0;display:flex;justify-content:center}
.aud__lockin{display:inline-block;background:#23272d;color:#fff;padding:1.05rem 2rem;border-radius:999px;font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;font-weight:600;text-decoration:none;border:2px solid rgba(255,255,255,.16);cursor:pointer;transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease}
.aud__lockin:hover,.aud__lockin:focus-visible{transform:translateY(-2px);background:var(--red);color:#fff;border-color:var(--red);text-decoration:none}

.audience{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm)}
.audience__head{padding:clamp(24px,4vw,44px);color:#fff}
.audience__head--charity{background:linear-gradient(145deg,var(--green),var(--green-deep))}
.audience__head--sme{background:linear-gradient(145deg,var(--navy),#1e2f47)}
.audience__head h2{color:#fff;margin-bottom:.3rem}
.audience__head .eyebrow{color:rgba(255,255,255,.85)}
.audience__body{padding:clamp(24px,4vw,44px)}
.audience__tag{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:.35em 1em;font-size:.78rem;font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem}

/* checklist */
.checklist{list-style:none;padding:0;margin:1rem 0}
.checklist li{position:relative;padding-left:2rem;margin-bottom:.7rem}
.checklist li::before{content:"";position:absolute;left:0;top:.42em;width:18px;height:18px;border-radius:50%;background:var(--green);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:12px;background-position:center;background-repeat:no-repeat}
.checklist--orange li::before{background-color:var(--orange-deep);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")}
/* Arrow-icon variant: form-arrow-icon at the same physical size used on the academy
   pricing banner (.pf__amt — 14x21 px). Vertically nudged to align with the first
   line of the li copy now that the icon is taller than the original 18x18 check. */
.checklist--arrow li::before{
  width:14px;height:21px;top:.22em;
  background:url("../form-arrow-icon.png?v=20260625zf") center/contain no-repeat;
  border-radius:0;
}

/* Resource library: "Use these resources to" light card list with arrow icons */
.res-uses{display:flex;flex-direction:column;gap:.75rem;margin:1.2rem auto 0;max-width:62ch;text-align:left}
.res-uses__card{display:flex;align-items:flex-start;gap:.9rem;background:#fff;border:1px solid var(--line);border-radius:12px;padding:.9rem 1.1rem;box-shadow:var(--shadow-sm)}
.res-uses__card p{margin:0;color:var(--ink)}
.res-uses__arr{flex-shrink:0;width:14px;height:21px;margin-top:.2em;background:url("../form-arrow-icon.png?v=20260625zf") center/contain no-repeat}

.takeaway{background:var(--cream);border-radius:12px;padding:1.2rem 1.4rem;margin:1.4rem 0}
.takeaway strong{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.03em}

/* ---------- quotes ---------- */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-sm);position:relative;height:100%}
.quote::before{content:"\201C";position:absolute;top:-.05em;left:.25em;font-family:var(--ff-display);font-size:5rem;color:var(--orange);opacity:.25;line-height:1}
.quote p{font-size:1.05rem;font-style:italic;color:var(--ink-2);position:relative}
.quote cite{display:block;margin-top:1rem;font-style:normal;font-weight:600;color:var(--ink);font-size:.95rem}
.quote cite span{display:block;font-weight:400;color:var(--slate);font-size:.85rem}
.quote--big p{font-size:1.25rem}
/* centred, card-less testimonial stack (homepage) */
.tstack{display:flex;flex-direction:column;gap:clamp(40px,5.5vw,64px);max-width:840px;margin-inline:auto}
.tstmnl{margin:0;text-align:center}
.tstmnl p{font-size:1.22rem;line-height:1.62;color:var(--ink-2);margin:0 0 1.1rem}
.tstmnl figcaption{display:block;text-align:center;line-height:1.55}
.tstmnl figcaption b{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.03em;font-weight:600;font-size:1.18rem;color:var(--ink);margin-right:.55em}
.tstmnl figcaption span{color:var(--slate);font-size:.92rem}

/* ---------- stats ---------- */
.stat{text-align:center}
.stat__num{font-family:var(--ff-display);font-weight:700;font-size:4.4rem;line-height:.95;color:var(--red);display:block}
.section--ink .stat__num,.section--green .stat__num{color:var(--orange)}
.stat__lab{font-size:.92rem;color:var(--slate);margin-top:.4rem}
.section--ink .stat__lab,.section--green .stat__lab{color:rgba(255,255,255,.75)}

/* ---------- logo strip (heritage) ---------- */
.logo-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logo-track{display:flex;gap:clamp(36px,5vw,72px);align-items:center;width:max-content;animation:marquee 48s linear infinite}
.logo-track img{height:92px;width:auto;opacity:1;filter:none}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.logo-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}}

/* ---------- modules ---------- */
.module{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,3vw,32px);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;height:100%}
.module__n{font-family:var(--ff-display);font-weight:700;font-size:3.4rem;color:var(--cream-2);line-height:.8;position:absolute;top:14px;right:20px}
.module h3{position:relative}
.module .res{font-size:.85rem;color:var(--slate);border-top:1px dashed var(--line);padding-top:.9rem;margin-top:1rem}
.module .res b{color:var(--ink-2);font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.04em;font-weight:500;font-size:.8rem}

/* ---------- coaches ---------- */
.coach{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);height:100%}
.coach__photo{aspect-ratio:4/3;background:linear-gradient(135deg,var(--cream-2),var(--cream));display:grid;place-items:center;color:var(--slate);position:relative;overflow:hidden}
.coach__photo img{width:100%;height:100%;object-fit:cover;display:block}
.coach__photo .ph{font-family:var(--ff-display);font-size:3rem;color:#fff;width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--orange-deep),var(--red))}
.coach__body{padding:clamp(20px,3vw,28px)}
.coach__role{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--red-deep);font-weight:500}
.coach__name{font-family:var(--ff-display);font-size:1.5rem;margin:.2rem 0 .6rem}
.coach__quote{color:var(--ink-2);font-size:.98rem;font-weight:700;margin:.8rem 0}

/* ---------- pricing ---------- */
/* ===== Retention math interactive (academy split pages) ===== */
.retain{max-width:84ch;margin:0 auto;display:flex;flex-direction:column;gap:clamp(20px,2.5vw,28px)}
.retain__panel{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,32px) clamp(22px,3vw,36px)}
.retain__slider{display:flex;flex-direction:column;gap:.55rem}
.retain__lab{font-family:var(--ff-display);font-weight:500;font-size:1.18rem;color:var(--ink);line-height:1.35}
.retain__pct{font-family:var(--ff-display);font-weight:700;color:var(--red);background:#fff5f0;border-radius:8px;padding:.05em .35em;font-size:1.05em}
.retain__slider input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:6px;background:linear-gradient(90deg,var(--red) 0,var(--red) var(--pos,50%),#e6e2d3 var(--pos,50%));border-radius:999px;outline:none;margin-top:.4rem}
.retain__slider input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--red);border:3px solid #fff;cursor:pointer}
.retain__slider input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--red);border:3px solid #fff;cursor:pointer}
.retain__scale{display:flex;justify-content:space-between;font-family:var(--ff-display);font-size:.78rem;color:var(--slate);letter-spacing:.05em}
.retain__hint{font-size:.85rem;color:var(--slate);margin:.4rem 0 0;line-height:1.5}
.retain__verdict{margin:1.4rem 0 0;font-size:1.05rem;color:var(--ink-2);line-height:1.55}
.retain__verdict b{color:var(--ink);font-weight:700}

.retain__years{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,14px)}
.retain__year{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(14px,2vw,22px) clamp(10px,1.5vw,16px);text-align:center;display:flex;flex-direction:column;gap:.25rem}
.retain__year--end{background:var(--green);color:#fff;border-color:var(--green)}
.retain__yrlab{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--slate)}
.retain__year--end .retain__yrlab{color:rgba(255,255,255,.85)}
.retain__yrnum{font-family:var(--ff-display);font-weight:700;font-size:2.2rem;color:var(--red);line-height:1.1;transition:color .15s ease}
.retain__year--end .retain__yrnum{color:#fff}
.retain__yrsub{font-size:.82rem;color:var(--slate)}
.retain__year--end .retain__yrsub{color:rgba(255,255,255,.85)}
@media(max-width:680px){.retain__years{grid-template-columns:repeat(2,1fr)}}

.retain__bars{display:flex;flex-direction:column;gap:.45rem;padding:0 .2rem}
.retain__bar{background:#ece8d7;border-radius:999px;height:14px;position:relative;overflow:hidden}
.retain__barfill{display:block;height:100%;background:linear-gradient(90deg,var(--orange-deep),var(--red));border-radius:999px;transition:width .35s cubic-bezier(.4,0,.2,1)}
.retain__bar--y1 .retain__barfill{background:linear-gradient(90deg,#f0b894,var(--orange-deep))}
.retain__bar--y2 .retain__barfill{background:linear-gradient(90deg,var(--orange-deep),#d54f4a)}
.retain__bar--y3 .retain__barfill{background:linear-gradient(90deg,#d54f4a,var(--green-deep))}

.retain__why{max-width:72ch;margin:clamp(28px,4vw,44px) auto 0;font-size:1rem;line-height:1.65;color:var(--ink-2)}
.retain__why p{margin:0 0 1rem}
.retain__why p:last-child{margin-bottom:0;color:var(--ink)}

/* ===== Pricing v2 (2026-06-03) - founding banner + Coming Soon cards ===== */
.pricing-v2{display:block;max-width:1200px;margin-inline:auto}
.pricing-v2 .pf{
  position:relative;
  border:1.5px solid var(--red);
  background:var(--cream);
  border-radius:18px;
  padding:clamp(28px,3vw,40px) clamp(28px,3.5vw,48px);
  margin:14px 0 clamp(28px,4vw,48px);
  display:grid;
  grid-template-columns:auto 1.2fr 1fr auto;
  gap:clamp(20px,3vw,40px);
  align-items:center;
}
.pf__badge{
  position:absolute;top:-14px;left:clamp(28px,8vw,80px);
  background:var(--red);color:#fff;
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.1em;
  font-size:.78rem;font-weight:700;
  padding:.5em 1.3em;border-radius:999px;white-space:nowrap;
}
.pf__amt{
  display:flex;align-items:center;gap:.45rem;
  font-family:var(--ff-display);font-weight:700;
  font-size:3.8rem;
  color:var(--red);line-height:1;
}
.pf__amt::before,.pf__amt::after{content:"";display:inline-block;width:.33em;height:.5em;background:url("../form-arrow-icon.png?v=20260625zf") center/contain no-repeat;flex-shrink:0}
.pf__amt::after{transform:scaleX(-1)}
.pf__tier{
  font-family:var(--ff-display);font-weight:700;
  font-size:2.4rem;
  color:var(--navy);text-transform:uppercase;letter-spacing:.02em;
  margin:0 0 .4rem;line-height:1.05;
}
.pf__sub{font-size:.92rem;color:var(--ink-2);margin:0;line-height:1.55}
.pf__sub span{display:block}
.pf__list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:.45rem;
  font-size:.93rem;color:var(--ink-2);line-height:1.4;
}
.pf__list li{padding-left:1rem;position:relative}
.pf__list li::before{content:"•";position:absolute;left:0;top:-.05em;color:var(--ink-2);font-size:1.1em}
.pf__btn{
  background:#23272d;color:#fff;
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.07em;
  font-size:.82rem;font-weight:700;
  padding:1.2rem 1.4rem;border-radius:999px;
  border:2px solid rgba(255,255,255,.16);
  text-decoration:none;text-align:center;
  display:inline-block;white-space:normal;
  max-width:170px;line-height:1.15;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  cursor:pointer;
}
.pf__btn:hover,.pf__btn:focus-visible{
  background:var(--red);border-color:var(--red);color:#fff;
  transform:translateY(-2px);text-decoration:none;
}
@media(max-width:920px){
  .pricing-v2 .pf{grid-template-columns:1fr;text-align:center;justify-items:center;gap:clamp(14px,2vw,22px)}
  .pf__badge{left:50%;transform:translate(-50%,0)}
  .pf__list{align-items:flex-start;text-align:left}
}

.pc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.5vw,28px);
}
@media(max-width:880px){.pc-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
.pc{
  position:relative;
  background:#d6d4cb;
  border-radius:20px;
  padding:clamp(38px,4.5vw,56px) clamp(20px,2.5vw,32px) clamp(28px,3vw,40px);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.pc__badge{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  background:#1c1f22;color:#fff;
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.1em;
  font-size:.76rem;font-weight:700;
  padding:.6em 1.5em;border-radius:999px;white-space:nowrap;
}
.pc__tier{
  font-family:var(--ff-display);font-weight:700;
  font-size:.95rem;
  color:var(--ink);text-transform:uppercase;letter-spacing:.04em;
  margin:0 0 1.2rem;line-height:1.25;white-space:nowrap;
}
.pc__amt{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  font-family:var(--ff-display);font-weight:700;
  font-size:3.2rem;
  color:#b94a37;line-height:1;margin:0 0 1.4rem;
}
.pc__amt::before,.pc__amt::after{content:"";display:inline-block;width:.3em;height:.47em;background:url("../form-arrow-icon.png?v=20260625zf") center/contain no-repeat;flex-shrink:0}
.pc__amt::after{transform:scaleX(-1)}
.pc__list{
  list-style:none;padding:0;margin:0 0 1.4rem;
  display:flex;flex-direction:column;gap:.55rem;
  font-size:.92rem;color:var(--ink-2);line-height:1.45;width:100%;
}
.pc__list li{white-space:nowrap}
.pc__verify{
  background:#eceae1;border-radius:14px;
  padding:.95rem 1.2rem;
  font-size:.82rem;color:var(--ink-2);
  margin:0 0 1.6rem;line-height:1.45;
  width:100%;text-align:center;
}
.pc__btn{
  background:#1c1f22;color:#fff;
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.08em;
  font-size:.82rem;font-weight:700;
  padding:1.05rem 2.2rem;border-radius:999px;
  border:2px solid rgba(255,255,255,.14);
  text-decoration:none;display:inline-block;
  min-width:170px;text-align:center;line-height:1;
  cursor:default;
}

/* Legacy pricing (kept for back-compat where still referenced) */
.pricing{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.price{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,2.5vw,28px);display:flex;flex-direction:column;box-shadow:var(--shadow-sm);position:relative}
.price--feature{border:2px solid var(--red);box-shadow:var(--shadow)}
.price__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;padding:.35em 1em;border-radius:999px;white-space:nowrap}
.price__badge--soon{background:var(--ink-2);color:#fff}
.price--inactive{opacity:.55;filter:grayscale(.2);transition:opacity .25s ease}
.price--inactive:hover{opacity:.85}
.price--inactive .price__verify{color:var(--ink-2)}
.btn.is-disabled{cursor:not-allowed;opacity:.75;pointer-events:none;background:var(--ink-2);color:#fff;border-color:transparent}
.price__tier{font-family:var(--ff-display);text-transform:uppercase;font-size:1.1rem;letter-spacing:.02em;color:var(--ink)}
.price__amt{font-family:var(--ff-display);font-weight:700;font-size:2.6rem;color:var(--red-deep);line-height:1;margin:.5rem 0 .1rem}
.price__amt small{font-size:.9rem;font-weight:400;color:var(--slate)}
.price__rrp{color:var(--slate);font-size:.85rem;text-decoration:line-through;margin-bottom:.6rem}
.price__list{list-style:none;padding:0;margin:.8rem 0 1.4rem;font-size:.88rem;color:var(--ink-2);flex:1}
.price__list li{padding-left:1.4rem;position:relative;margin-bottom:.5rem}
.price__list li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.price__verify{font-size:.78rem;color:var(--slate);background:var(--cream);border-radius:8px;padding:.5rem .7rem;margin-bottom:.9rem}

/* ---------- FAQ ---------- */
.faq-group{max-width:1100px;margin-inline:auto}
.faq-cat{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.14em;color:var(--red);font-size:.95rem;font-weight:700;margin:2rem 0 1rem;text-align:center}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:1.4rem;align-items:start;margin-bottom:2rem}
.faq-col{display:flex;flex-direction:column;gap:.85rem;min-width:0}
details.faq{border:1px solid #e6e2d6;border-radius:32px;background:#fff;overflow:hidden;transition:border-radius .2s ease}
details.faq[open]{border-radius:18px}
details.faq>summary{
  list-style:none;cursor:pointer;padding:.95rem 1.4rem .95rem 2.7rem;
  font-weight:500;color:var(--ink);font-family:var(--ff-body);
  font-size:.97rem;line-height:1.35;position:relative;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
details.faq[open]>summary{white-space:normal;font-weight:600}
details.faq>summary::-webkit-details-marker{display:none}
details.faq>summary::before{
  content:"+";position:absolute;left:1.1rem;top:50%;
  transform:translateY(-50%);transform-origin:center;
  font-family:var(--ff-display);font-weight:400;font-size:1.3rem;color:var(--ink-2);
  transition:transform .32s ease;line-height:1;
}
details.faq[open]>summary::before{transform:translateY(-50%) rotate(45deg)}
details.faq>summary:hover{color:var(--red-deep)}
.faq__body{
  display:grid;grid-template-rows:0fr;
  padding:0 1.4rem 0 2.7rem;
  color:var(--ink-2);font-size:.93rem;line-height:1.6;
  transition:grid-template-rows .32s ease, padding .32s ease;
}
details.faq[open]>.faq__body{
  grid-template-rows:1fr;
  padding:0 1.4rem 1.2rem 2.7rem;
}
.faq__body>*{overflow:hidden;min-height:0}
.faq__body p:last-child{margin-bottom:0}
@media (max-width:680px){.faq-grid{grid-template-columns:1fr}}
.faq-cta{
  display:grid;grid-template-columns:1fr 1fr;column-gap:1.4rem;
  max-width:1100px;margin:2.5rem auto 0;align-items:center;
}
.faq-cta>a:first-child{justify-self:end}
.faq-cta>a:last-child{justify-self:start}
@media (max-width:680px){
  .faq-cta{grid-template-columns:1fr;row-gap:.8rem}
  .faq-cta>a:first-child,.faq-cta>a:last-child{justify-self:center}
}

/* ---------- forms ---------- */
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,4vw,40px);box-shadow:var(--shadow)}
.section--ink .formcard,.section--green .formcard{color:var(--ink)}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.35rem;color:var(--ink-2)}
.field input,.field select,.field textarea{
  width:100%;padding:.8rem 1rem;border:1.5px solid var(--line);border-radius:10px;
  font-family:var(--ff-body);font-size:1rem;color:var(--ink);background:#fcfbf9;transition:.15s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red);background:#fff}
.field--inline{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.82rem;color:var(--slate);margin:1rem 0}
.consent input{width:18px;height:18px;flex:0 0 auto;margin-top:3px;accent-color:var(--red)}
.form-note{font-size:.78rem;color:var(--slate);margin-top:.8rem}
.form-ok{display:none;background:var(--green);color:#fff;border-radius:10px;padding:.9rem 1.1rem;font-weight:600;margin-top:1rem}
.form-ok.show{display:block}

/* lead magnet visual */
.leadmag{background:linear-gradient(135deg,var(--orange-deep),var(--red));border-radius:var(--radius);aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:flex-end;padding:1.6rem;color:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden}
.leadmag::before{content:"GUIDE";position:absolute;top:1.2rem;left:1.6rem;font-family:var(--ff-display);letter-spacing:.2em;font-size:.75rem;opacity:.8}
.leadmag h4{color:#fff;font-size:1.5rem;line-height:1.1}

/* ---------- placeholders for graphics-to-come ---------- */
.ph-media{
  background:repeating-linear-gradient(45deg,var(--cream),var(--cream) 14px,var(--cream-2) 14px,var(--cream-2) 28px);
  border:1.5px dashed #cdbfa8;border-radius:var(--radius);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  color:#9b8f7a;padding:2rem;min-height:200px;gap:.4rem;
}
.ph-media .ph-tag{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--orange-deep)}
.ph-media.ph-video{background:var(--ink);border-color:#444;color:#cbb;aspect-ratio:16/9;min-height:0}
.ph-media.ph-video .play{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.5);display:grid;place-items:center;margin-bottom:.6rem}
.ph-media.ph-video .play::after{content:"";border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.gbg-explainer{background:var(--ink);aspect-ratio:16/9;width:100%;height:auto;display:block;border-radius:var(--radius);object-fit:contain;box-shadow:var(--shadow-sm)}
.video-embed{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.video-embed img{width:100%;display:block}
.video-embed .play{position:absolute;inset:0;margin:auto;width:84px;height:84px;border-radius:50%;background:rgba(235,31,40,.92);display:grid;place-items:center}
.video-embed .play::after{content:"";border-left:24px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:6px}

/* fareshare counter */
.counter{display:inline-flex;flex-direction:column;align-items:center;gap:.85rem}
.counter__num{font-family:var(--ff-display);font-weight:700;font-size:5.5rem;color:#fff;line-height:1;letter-spacing:.005em}
.counter__lab{color:rgba(255,255,255,.85);font-size:1rem;line-height:1.45;letter-spacing:.02em;max-width:34ch}
/* counter on light backgrounds (e.g. About takeaway): dark/green, not white */
.section--cream .counter__num,.takeaway .counter__num{color:var(--green)}
.section--cream .counter__lab,.takeaway .counter__lab{color:var(--ink-2)}
.pill-note{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:.3em 1em;font-size:.78rem;letter-spacing:.04em}

/* badge / partner stamp */
.partner-badge{display:inline-flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.4em 1em .4em .5em;box-shadow:var(--shadow-sm);font-size:.85rem;font-weight:600;color:var(--ink-2)}
.partner-badge .dot{width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-family:var(--ff-display);font-size:.9rem}

/* resource list */
.reslist{list-style:none;padding:0;margin:0;display:grid;gap:1rem}
.resitem{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.4rem;display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:start;box-shadow:var(--shadow-sm)}
.resitem h4{margin:0 0 .3rem;font-family:var(--ff-body);font-weight:700;font-size:1.05rem}
.resitem p{margin:.3rem 0 0;font-size:.9rem;color:var(--slate)}
.resitem p b{color:var(--ink-2)}
.resitem .btn{align-self:center;white-space:nowrap}

/* partner row */
.partner-row{display:grid;grid-template-columns:400px 1fr;gap:clamp(24px,4vw,52px);align-items:center;padding:clamp(14px,2.5vw,28px) 0}
.partner-row__media{width:100%;max-width:400px;aspect-ratio:1/1;border:1.5px dashed #cdbfa8;border-radius:14px;display:grid;place-items:center;text-align:center;background:repeating-linear-gradient(45deg,var(--cream),var(--cream) 14px,var(--cream-2) 14px,var(--cream-2) 28px);color:#9b8f7a;font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;overflow:hidden}
.partner-row__media.is-filled{border:0;background:none;padding:0}
.partner-row__media img{width:100%;height:100%;object-fit:cover;display:block;border-radius:14px}
.partner-row__body{min-width:0}
.partner-row__logo{margin-bottom:1.2rem}
.partner-row__logo img{max-width:300px;max-height:150px;width:auto;height:auto}
@media(max-width:820px){.partner-row{grid-template-columns:1fr}.partner-row__media{margin-inline:auto}}

/* webinar card */
.webinar{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;height:100%}
.webinar__top{background:linear-gradient(135deg,var(--teal),var(--navy));color:#fff;padding:1.2rem 1.4rem}
.webinar__date{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;opacity:.9}
.webinar__body{padding:1.4rem;display:flex;flex-direction:column;flex:1}
.webinar__body h3{font-size:1.25rem}
.webinar__meta{font-size:.82rem;color:var(--slate);margin-top:auto;padding-top:1rem}
.tag{display:inline-block;background:var(--cream-2);color:var(--ink-2);border-radius:999px;padding:.25em .8em;font-size:.72rem;font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.06em}
.tag--cfg{background:var(--green);color:#fff}

/* phase 2 banner */
.phase2{background:var(--cream);border:1px dashed #cdbfa8;border-radius:14px;padding:1rem 1.4rem;font-size:.9rem;color:var(--ink-2)}
.phase2 b{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.05em;color:var(--orange-deep)}

/* breadcrumb / formula step */
.formula{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.formula__step{text-align:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:1.6rem 1rem;box-shadow:var(--shadow-sm);position:relative}
.formula__n{width:42px;height:42px;border-radius:50%;background:var(--green);color:#fff;font-family:var(--ff-display);font-size:1.2rem;display:grid;place-items:center;margin:0 auto .7rem}
.formula__step:nth-child(1) .formula__n{background:var(--orange-deep)}
.formula__step:nth-child(2) .formula__n{background:var(--red)}
.formula__step:nth-child(3) .formula__n{background:var(--teal)}
.formula__step:nth-child(4) .formula__n{background:var(--green)}
.formula__step:nth-child(5) .formula__n{background:var(--navy)}
.formula__step h4{font-family:var(--ff-display);text-transform:uppercase;font-size:1.1rem;margin-bottom:.3rem}
.formula__step p{font-size:.85rem;color:var(--slate);margin:0}

/* not-this list */
.not-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.not-item{display:flex;gap:.7rem;align-items:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:.8rem 1rem;font-size:.92rem}
.not-item .x{color:var(--red);font-weight:700;flex:0 0 auto}

/* "What Growth by Giving is NOT" — single-open accordion variant
   2-col grid of 8 cards; X centered above bold title, "View Details +"
   hint below, click expands description. The grid itself is 70% width
   (centered) so the columns are 30% narrower while each card still
   fills its column — that keeps the visual column gap equal to the
   row gap (both = the grid's gap value). */
.not-acc{display:grid;grid-template-columns:repeat(2,1fr);gap:1.08rem;max-width:70%;margin-inline:auto}
.not-acc .not-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden;transition:border-color .2s ease}
.not-acc .not-card[open]{border-color:rgba(235,31,40,.45)}
.not-card>summary{
  list-style:none;cursor:pointer;
  padding:1.1rem 1.2rem;
  display:flex;flex-direction:column;gap:.6rem;align-items:center;
  text-align:center;user-select:none;
}
.not-card>summary::-webkit-details-marker{display:none}
.not-card__row{display:inline-flex;align-items:center;gap:.55em;justify-content:center}
.not-card__x{color:var(--red);font-weight:700;font-size:1.35rem;line-height:1;transition:transform .25s ease;flex-shrink:0}
.not-card[open] .not-card__x{transform:rotate(180deg)}
.not-card__title{color:#fff;font-weight:700;font-size:1.02rem;line-height:1.35}
.not-card__hint{
  display:inline-flex;align-items:center;gap:.45em;
  background:var(--ink);
  border-radius:8px;
  padding:.45rem 15px;
  font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.09em;
  font-size:.7rem;font-weight:500;color:rgba(255,255,255,.62);
  margin-top:.1rem;
}
.not-card__hint::after{
  content:"+";font-family:var(--ff-display);font-weight:700;
  color:var(--red);font-size:1.15em;line-height:1;
  display:inline-block;transition:transform .25s ease;
}
.not-card[open] .not-card__hint{color:rgba(255,255,255,.85)}
.not-card[open] .not-card__hint::after{transform:rotate(45deg)}
.not-card__body{
  display:grid;grid-template-rows:0fr;
  padding:0 1.2rem;
  font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.86);text-align:center;
  transition:grid-template-rows .32s ease, padding .32s ease;
}
.not-card[open]>.not-card__body{
  grid-template-rows:1fr;
  padding:0 1.2rem 1.1rem;
}
.not-card__body>*{overflow:hidden;min-height:0}
.not-card__body p{margin:0}
@media(max-width:640px){
  .not-acc{grid-template-columns:1fr;max-width:100%}
}

/* ---------- footer ---------- */
.site-footer{background:#fff;color:var(--ink);padding:clamp(48px,6vw,80px) 0 0;border-top:1px solid var(--line)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,4vw,48px);padding-bottom:18px}
.site-footer img.flogo{height:38px;width:auto;margin-bottom:1rem}
.site-footer h5{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.08em;color:var(--ink);font-size:.92rem;margin:0 0 1rem}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer ul li{margin-bottom:.55rem}
.site-footer p{color:var(--ink)}
.site-footer a{color:var(--ink-2);font-size:.92rem}
.site-footer a:hover{color:var(--red);text-decoration:none}
.footer__fare{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;margin-top:1rem;font-size:.85rem;color:var(--ink-2)}
.footer__fare b{color:var(--green)}
.footer__legal{padding:0 0 8px;font-size:.78rem;color:var(--ink-2);line-height:1.55}
.footer__legal p{margin:0}
/* Mobile: drop the desktop-only line break after "MUVIST Ltd." so the legal copy
   reflows naturally on narrow screens. */
@media (max-width:640px){.footer__legal br.legal-br{display:none}}
.footer__bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;padding:14px 0 24px;font-size:.82rem;color:var(--ink-2);border-top:1px solid var(--line)}
.footer__policies{display:flex;flex-wrap:wrap;gap:1rem}
.footer__bottom a{font-size:.82rem;color:var(--ink-2)}
.footer__bottom a:hover{color:var(--red);text-decoration:none}

/* ---------- utility ---------- */
.divider{height:1px;background:var(--line);border:0;margin:0}
.tag-strip{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.kicker-stat{font-family:var(--ff-display);font-size:.9rem;text-transform:uppercase;letter-spacing:.1em;color:var(--green)}
.section-head{max-width:840px;margin-bottom:clamp(32px,5vw,56px)}
.section-head.center{margin-inline:auto}
/* partner section headings: centred + vertically balanced between the content above and the rows below */
.section--partners{padding-block:clamp(19px,3.15vw,47px)}
.section--partners .section-head{margin-bottom:clamp(28px,4vw,55px)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:repeat(2,1fr)}
  .formula{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .nav__toggle{display:flex}
  .nav__menu{
    position:fixed;top:72px;left:0;right:0;
    /* explicit height — fixed positioning inside the .nav flex container
       does not stretch via top+bottom; the parent's align-items:center
       collapses the menu to its baseline (~26px) without this. */
    height:calc(100vh - 72px);
    height:calc(100dvh - 72px);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    background:#fff;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom)) 1rem;
    gap:.2rem;margin:0;overflow-y:auto;
    transform:translateX(100%);transition:transform .25s ease;box-shadow:var(--shadow);
    z-index:99;
  }
  .nav__menu.is-open{transform:translateX(0)}
  .nav__link{padding:.8em .6em;border-bottom:1px solid var(--line);border-radius:0}
  .nav__drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--cream);margin:0;padding:0 0 .4rem}
  .has-drop>.nav__link::after{margin-left:auto}
  .nav__cta{margin:1rem 0 0}
  .hero__grid,.split,.split--wide-left{grid-template-columns:1fr}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .route{max-width:none}
}
@media (max-width:560px){
  .grid-4{grid-template-columns:1fr}
  .pricing{grid-template-columns:1fr}
  .not-grid{grid-template-columns:1fr}
  .field--inline{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .formula{grid-template-columns:1fr}
  .route{grid-template-columns:1fr}
  .resitem{grid-template-columns:1fr}
  .partner-row{grid-template-columns:1fr}
}

/* ---------- course growth simulator ---------- */
.sim{display:grid;grid-template-columns:1.5fr 1fr;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.sim__chart{padding:clamp(16px,2.5vw,28px);min-width:0}
.sim__legend{display:flex;gap:1.2rem;flex-wrap:wrap;margin-bottom:.5rem;font-size:.85rem;font-weight:600;color:var(--ink-2)}
.sim__key{display:inline-flex;align-items:center;gap:.45em}
.sim__key i{width:14px;height:4px;border-radius:2px;display:inline-block}
.sim__key--mv i{background:var(--green)}
.sim__key--cm i{background:#a39a8c}
#simCanvas{width:100%;height:300px;display:block}
.sim__note{font-size:.74rem;color:var(--slate);margin:.5rem 0 0;text-align:center}
.sim__panel{background:var(--cream);padding:clamp(20px,3vw,30px);display:flex;flex-direction:column;gap:1.1rem;border-left:1px solid var(--line)}
.sim__field{display:flex;flex-direction:column;gap:.5rem}
.sim__lab{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.05em;font-size:.82rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:.5em}
.sim__lab output{font-family:var(--ff-body);font-weight:700;color:var(--green);font-size:.95rem;text-transform:none;letter-spacing:0}
.sim__hint{font-size:.74rem;color:var(--slate)}
.sim input[type=range]{width:100%;accent-color:var(--green);cursor:pointer}
.seg{display:flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:3px}
.seg__btn{flex:1;border:0;background:transparent;font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.04em;font-size:.85rem;padding:.5em .8em;border-radius:999px;cursor:pointer;color:var(--ink-2);transition:.15s}
.seg__btn.is-on{background:var(--ink);color:#fff}
.sim__readout{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:.1rem}
.sim__stat{border-radius:12px;padding:.8rem .9rem;background:#fff;border:1px solid var(--line)}
.sim__stat--mv{border-color:rgba(18,109,70,.35)}
.sim__statlab{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.06em;font-size:.7rem;color:var(--slate)}
.sim__statnum{display:block;font-family:var(--ff-display);font-weight:700;font-size:1.9rem;line-height:1;margin:.15rem 0}
.sim__stat--mv .sim__statnum{color:var(--green)}
.sim__stat--cm .sim__statnum{color:#8c8579}
.sim__statsub{font-size:.72rem;color:var(--slate)}
.sim__verdict{font-size:.95rem;color:var(--ink-2);text-align:center;padding-top:.1rem}
.sim__verdict b{font-family:var(--ff-display);font-size:1.2rem;color:var(--green)}
@media (max-width:760px){.sim{grid-template-columns:1fr}.sim__panel{border-left:0;border-top:1px solid var(--line)}}

/* evidence strip for the growth simulator */
.eviz{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(22px,3vw,32px)}
.eviz__card{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;display:flex;flex-direction:column}
.eviz__num{font-family:var(--ff-display);font-weight:700;font-size:1.75rem;line-height:1;color:var(--green)}
.eviz__txt{font-size:.82rem;color:var(--ink-2);margin:.4rem 0 .7rem;flex:1}
.eviz__src{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;color:var(--slate)}
.sim__sources{text-align:center;font-size:.85rem;color:var(--slate);margin-top:1.1rem}
.sim__sources .arr{width:.9em;height:.9em}
@media(max-width:760px){.eviz{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.eviz{grid-template-columns:1fr}}

/* ---------- module explorer ---------- */
.mod{margin-top:clamp(6px,1vw,12px);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.mod__tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;border-bottom:1px solid var(--line);background:var(--cream)}
.mod__tab{flex:1 0 auto;min-width:155px;display:flex;flex-direction:column;gap:.15rem;align-items:center;text-align:center;padding:.85rem 1.1rem;border:0;border-right:1px solid var(--line);border-top:3px solid transparent;background:transparent;cursor:pointer;transition:.15s}
.mod__tab:last-child{border-right:0}
.mod__tabno{font-family:var(--ff-display);font-weight:700;font-size:1.05rem;color:var(--slate);transition:.15s}
.mod__tabnm{font-size:.8rem;color:var(--ink-2);line-height:1.2}
.mod__tab:hover{background:#fff}
.mod__tab.is-on{background:#fff;border-top-color:var(--green)}
.mod__tab.is-on .mod__tabno{color:var(--green)}
.mod__detail{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,3vw,40px);padding:clamp(22px,3.5vw,40px);transition:opacity .16s ease, transform .16s ease}
.mod__detail--out{opacity:0;transform:translateY(6px)}
.mod__left{display:flex;gap:1rem;align-items:center;justify-content:center;text-align:center;flex-direction:column}
.mod__no{display:none}
.mod__tabno{display:none}
.mod__t{margin:.1rem 0 .4rem}
.mod__focus{color:var(--ink-2);margin:0}
.mod__right{display:flex;flex-direction:column;gap:1rem;justify-content:center}
.mod__did{margin:0;font-size:.95rem;color:var(--ink-2)}
.mod__did b{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;color:var(--ink)}
.mod__keeplab{display:block;margin-bottom:.45rem;font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.06em;font-size:.74rem;color:var(--slate)}
.mod__chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{background:var(--cream);border:1px solid var(--line);border-radius:999px;padding:.4em .9em;font-size:.78rem;color:var(--ink-2);font-weight:500}
.mod__foot{display:flex;flex-wrap:wrap;gap:.4rem 1rem;align-items:center;justify-content:space-between;border-top:1px dashed var(--line);padding-top:.9rem;margin-top:.2rem}
.mod__proof{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.05em;font-size:.76rem;color:var(--green)}
.mod__hrs{font-size:.78rem;color:var(--slate)}
@media(max-width:680px){.mod__detail{grid-template-columns:1fr}}

/* ---------- 30-day activation plan timeline ---------- */
.plan{margin-top:clamp(34px,5vw,60px)}
.plan__title{text-align:center;margin-bottom:clamp(22px,3vw,34px)}
.plan__track{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem}
.plan__step{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.1rem 1rem;text-align:center;opacity:0;transform:translateY(16px);transition:opacity .5s ease, transform .5s ease}
.plan.is-in .plan__step{opacity:1;transform:none}
.plan.is-in .plan__step:nth-child(2){transition-delay:.1s}
.plan.is-in .plan__step:nth-child(3){transition-delay:.2s}
.plan.is-in .plan__step:nth-child(4){transition-delay:.3s}
.plan.is-in .plan__step:nth-child(5){transition-delay:.4s}
.plan__wk{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;color:var(--green)}
.plan__step b{display:block;font-family:var(--ff-display);font-size:1.15rem;margin:.25rem 0 .35rem;color:var(--ink)}
.plan__step span:last-child{font-size:.8rem;color:var(--slate);display:block}
.plan__step--end{background:linear-gradient(150deg,var(--green),var(--green-deep));border-color:transparent}
.plan__step--end .plan__wk{color:rgba(255,255,255,.85)}
.plan__step--end b{color:#fff}
.plan__step--end span:last-child{color:rgba(255,255,255,.9)}
.plan__step:not(:last-child)::after{content:"";position:absolute;right:-.82rem;top:50%;width:.85rem;height:2px;background:var(--line);z-index:1}
.plan__finish{text-align:center;max-width:62ch;margin:clamp(20px,3vw,28px) auto 0;color:var(--ink-2)}
.plan__finish b{color:var(--green)}
@media(max-width:680px){.plan__track{grid-template-columns:1fr 1fr}.plan__step:not(:last-child)::after{display:none}}
@media(max-width:440px){.plan__track{grid-template-columns:1fr}}

/* photo-background CTA band (partnerships: Prefer to start smaller) — white text via shared photo-bg rule */
.section--cta-photo{background:#1c1f22 url("../MUV-WORK-WITH-US-PARTNERSHIPS-join-a-free-webinar-to-see-movement-marketing-in-practice.jpg?v=20260625zf") center/cover no-repeat}
@media (max-width:640px){.section--cta-photo{background-image:url("../MUV-WORK-WITH-US-PARTNERSHIPS-join-a-free-webinar-to-see-movement-marketing-in-practice-MOBILE.jpg?v=20260628i");padding-top:206px}}

/* photo-background enquiry section (partnerships: Ready to grow together) — white text via shared photo-bg rule */
.section--enquiry-photo{background:#1c1f22 url("../MUV-WORK-WITH-US-PARTNERSHIPS-ready-to-grow-together.jpg?v=20260625zf") center/cover no-repeat}
.section--enquiry-photo .muted{color:rgba(255,255,255,.9)}
/* enquiry form panel: dark-blue (MUVIST Academy logo navy #053c6a) at 50% transparency, white field text */
.section--enquiry-photo .formcard{background:rgba(5,60,106,.5);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:#fff}
.section--enquiry-photo .formcard .field label{color:rgba(255,255,255,.92)}
.section--enquiry-photo .formcard .consent,.section--enquiry-photo .formcard .form-note{color:rgba(255,255,255,.85)}
.section--enquiry-photo .formcard .consent a{color:#fff;text-decoration:underline}
@media (max-width:640px){.section--enquiry-photo{background-image:url("../MUV-WORK-WITH-US-PARTNERSHIPS-ready-to-grow-together-MOBILE.jpg?v=20260628i");background-color:#05100b;background-position:top center;padding-top:270px}}

/* photo-background HOMEPAGE sections — aspect-ratio locked to image dimensions so cover never crops the artist's composition.
   Desktop image AR == section AR -> cover fills perfectly with no top/bottom crop.
   Mobile (<=640px) swaps to the 800x1600 portrait images and re-locks AR to 1/2. */

/* hero (index + academy: Movement Marketing for Charities & Small Businesses) — image 1920x1000.
   min-height (not aspect-ratio) so the section grows when the +150 content-shift pushes route cards + footnote past the image's natural height. Base .hero{overflow:hidden} would otherwise clip them. */
.hero--charities-photo{background:#94a187;min-height:calc(100vw * 1000 / 1920);overflow:visible}
@media (max-width:640px){.hero--charities-photo{background-image:none;min-height:calc(100vw * 1350 / 421)}}
/* Homepage hero photo — applied only to index (data-page="home") so academy variants keep their flat sage */
body[data-page="home"] .hero--charities-photo{background:#94a187 url("../MUV-HOMEPAGE-movement-marketing-for-charities-and-small-businesses.jpg?v=20260625zf") center/cover no-repeat}
/* Home hero video layer: covers the hero section behind the content. Plays
   muted + looped + auto so it acts as a moving background. Playback rate is
   set to 0.75 by an inline script next to the <video> tag. The underlying
   background-image stays as a poster / pre-load fallback. */
.hero--has-video{position:relative;overflow:hidden}
.hero--has-video > .container{position:relative;z-index:1}
/* Every hero video FILLS the hero area edge-to-edge on every screen size.
   No upper cap and no gutters; object-fit:cover scales the video to cover
   the full hero box, cropping whichever axis would otherwise letterbox.
   Source videos are already black-bar-cropped so cover-style filling
   produces a clean frame. */
.hero--has-video .hero__video{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:100%;
  height:100%;
  max-width:1920px;
  max-height:1080px;
  object-fit:cover;
  object-position:center;
  z-index:0;pointer-events:none;
}
/* Desktop: pages where the video subjects' faces/heads sit in the top third
   of the frame (food-bank scene, boardroom-table scene, audience scene).
   Anchor the video to the top of the hero so cover-cropping never eats the
   heads. Other pages keep center anchoring. */
@media (min-width:641px){
  body[data-page="gbg"] .hero--has-video .hero__video,
  .hero--photo-events .hero__video,
  .hero--photo-webinars .hero__video{
    object-position:center top;
  }
}
/* Desktop only: kill the per-page hero background-image so the video isn't
   layered over an image wallpaper. Mobile keeps its bg-image (set per page)
   because the video is hidden at ≤640px. */
@media (min-width:641px){
  .hero--has-video{background-image:none !important}
}
/* Desktop overrides for home + academy-charities + academy-smes:
   - hero + video are both 900px tall (not the shared 1080 cap)
   - video fills full viewport width (max-width:none, removes the 1920 cap)
   - text vertically centered over the video (align-items:center)
   Homepage video only: the 1280x720 source has ~137px of pure black
   burned into left AND right (content area is only 1003px wide). Scale
   by 1.28x so the content fills the display and the bars are pushed
   outside the hero. Charities + SMEs videos have no burned-in bars, so
   they use the plain full-width treatment. */
/* ============ Universal hero-with-video treatment (desktop only) ============
   Every .hero--has-video section on desktop, regardless of viewport width:
   - Exactly 900px tall (!important beats the many per-page min-height
     calc(100vw * H / 1920) rules scattered throughout this file)
   - Video fills full viewport width edge-to-edge (max-width:none removes
     the shared 1920 cap)
   - Video capped at 900px tall to match the hero
   - Content vertically centered via flex on the hero section
   - .hero__grid pages (2-col: home, charities, smes, cfg, about) keep
     their 2-col layout; .hero__inner pages (1-col) stack normally
   - Home video only: transform:scale(1.28) hides the ~137px of pure
     black burned into left/right of the 1280x720 source (content region
     is 137→1140, so 1003px wide; scale 1280/1003 ≈ 1.276 rounded up)
   - Asymmetric container/grid/inner padding overrides are killed so the
     flex centering actually centers instead of being pushed off. */
@media (min-width:641px){
  .hero--has-video{
    min-height:900px !important;
    height:900px !important;
    display:flex;
    align-items:center;
  }
  .hero--has-video > .container{
    width:100%;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  .hero--has-video .hero__video{
    max-width:none;
    max-height:900px;
  }
  body[data-page="home"] .hero--has-video .hero__video{
    transform:translate(-50%,-50%) scale(1.28);
  }
  .hero--has-video .hero__grid,
  .hero--has-video .hero__inner{
    padding-top:0 !important;
    padding-bottom:0 !important;
    align-items:center;
  }
  .hero--has-video .hero__grid > div:last-child{
    padding-bottom:0 !important;
  }
}
/* Mobile: hide hero videos and fall back to the existing MOBILE.jpg
   background-image swap (set per-page elsewhere in this file). */
@media (max-width:640px){
  .hero--has-video .hero__video{display:none}
}
@media (max-width:640px){
  body[data-page="home"] .hero--charities-photo{
    background-image:url("../MUV-HOMEPAGE-movement-marketing-for-charities-and-small-businesses-MOBILE.jpg?v=20260628o");
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:0 0 75px 0;
  }
  body[data-page="home"] .hero--charities-photo > .container{padding-top:0;padding-bottom:0}
  body[data-page="home"] .hero--charities-photo .hero__grid{padding:0}
}
/* Courses pages (academy chooser + charities + SMEs): shorter hero per Marshall's spec — desktop and mobile both -250px */
body[data-page="academy"] .hero--charities-photo{min-height:calc(100vw * 1000 / 1920 - 250px)}
@media (min-width:641px){body[data-page="academy"] .hero--charities-photo .hero__inner{padding-bottom:75px}}
@media (max-width:640px){body[data-page="academy"] .hero--charities-photo{min-height:calc(100vw * 1900 / 800)}}

/* ===================== Per-page HERO backgrounds — MUV-HERO-* assets =====================
   center/cover preserves image aspect ratio — no skew, no stretch. Image is cropped to fit, never deformed.
   min-height is calculated from each image's native 1920:H aspect so the hero displays the full image area on wide screens.
   On <=640px, the background image is dropped and the hero falls back to flat sage (mobile asset cadence is separate). */

/* about.html — MUV-ABOUT-US-hero-image.jpg (1920x1000) — sole occupant of data-page="about" */
body[data-page="about"] .hero{background:#94a187 url("../MUV-ABOUT-US-hero-image.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 1000 / 1920)}
@media (max-width:640px){body[data-page="about"] .hero{background-image:url("../MUV-ABOUT-US-hero-image-MOBILE.jpg?v=20260628i");min-height:calc(100vw * 1000 / 600)}}

/* growth-by-giving.html — MUV-GROWTH-BY-GIVING-HERO-growth-by-giving.jpg (1920x700) — sole occupant of data-page="gbg" */
body[data-page="gbg"] .hero{background:#94a187 url("../MUV-GROWTH-BY-GIVING-HERO-growth-by-giving.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 700 / 1920)}
@media (max-width:640px){body[data-page="gbg"] .hero{background-position:center;background-repeat:no-repeat;background-image:url("../MUV-GROWTH-BY-GIVING-HERO-growth-by-giving-MOBILE.jpg?v=20260628i");min-height:calc(100vw * 1000 / 600);display:flex;flex-direction:column;justify-content:center;padding-top:150px}}

/* services.html — MUV-COURSES-CONTENT-CLEANING-courses-content-services.jpg (1920x800) — sole occupant of data-page="courses" */
body[data-page="courses"] .hero{background:#94a187 url("../MUV-COURSES-CONTENT-CLEANING-courses-content-services.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 800 / 1920)}
@media (max-width:640px){body[data-page="courses"] .hero{background-image:url("../MUV-COURSES-CONTENT-CLEANING-courses-content-services-MOBILE.jpg?v=20260628l");min-height:calc(100vw * 1300 / 600)}}

/* data-page="hub" is shared by events / resources / webinars — distinguish by modifier class */
.hero--photo-events{background:#94a187 url("../MUV-LEARING-HUB-EVENTS-hero.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 700 / 1920)}
@media (max-width:640px){.hero--photo-events{background-image:url("../MUV-LEARING-HUB-EVENTS-hero-MOBILE.jpg?v=20260628i");min-height:calc(100vw * 1000 / 600)}}

.hero--photo-resources{background:#94a187 url("../MUV-LEARING-HUB-RESOURCE-LIBRARY-hero-image.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 700 / 1920)}
@media (max-width:640px){.hero--photo-resources{background-image:url("../MUV-LEARING-HUB-RESOURCE-LIBRARY-hero-image-MOBILE.jpg?v=20260628i");min-height:calc(100vw * 1000 / 600)}}

.hero--photo-webinars{background:#94a187 url("../MUV-LEARING-HUB-FREE-LIVE-WEBINARS-HERO-learning-hub-free-live-webinars.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 700 / 1920)}
@media (max-width:640px){.hero--photo-webinars{background-image:url("../MUV-LEARING-HUB-FREE-LIVE-WEBINARS-HERO-learning-hub-free-live-webinars-MOBILE.jpg?v=20260628i");min-height:calc(100vw * 1000 / 600)}}

/* data-page="work" is shared by cfg-academy / partnerships — distinguish by modifier class */
.hero--photo-cfg{background:#94a187 url("../MUV-WORK-WITH-US-CFG-work-with-us-charity-financial-group.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 1000 / 1920)}
/* Bottom-align hero pattern (desktop): left col = eyebrow+H1, right col =
   lead+body+buttons. Both columns sink so H1's last line bottom-aligns with
   the buttons' bottom edge. CFG adds extra padding-bottom to lift right col
   60px per Marshall's ask on that page. */
@media (min-width:641px){
  .hero--photo-cfg .hero__grid,
  .hero--photo-charities .hero__grid,
  .hero--photo-smes .hero__grid{align-items:end}
  .hero--photo-cfg .hero__grid{padding-top:clamp(20px,3vw,44px)}
  .hero--photo-cfg .hero__grid > div:last-child{padding-bottom:calc(60px + .4rem)}
  .hero--photo-charities .hero__grid > div:last-child,
  .hero--photo-smes .hero__grid > div:last-child{padding-bottom:.4rem}
}
.hero__badge{display:block;width:clamp(104px,11vw,195px);height:auto;aspect-ratio:1/1;border-radius:50%;margin:clamp(16px,2vw,32px) 0 0}
@media (max-width:640px){.hero--photo-cfg{background-image:url("../MUV-WORK-WITH-US-CFG-work-with-us-charity-financial-group-MOBILE.jpg?v=20260628z");background-size:100% auto;background-position:top center;background-repeat:no-repeat;min-height:calc(100vw * 1500 / 450)}.hero--photo-cfg .hero__inner{padding-top:calc(100vw * 450 / 600) !important}}

.hero--photo-partnerships{background:#94a187 url("../MUV-WORK-WITH-US-PARTNERSHIPS-HERO-work-with-us-partnerships.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 700 / 1920)}
.hero--photo-partnerships .hero__video{transform:translate(-50%,-50%) scaleX(-1)}
.hero--photo-partnerships .route--single{margin-inline:0}
.hero--photo-partnerships .route a{background:rgba(0,0,0,.65)}
@media (max-width:640px){.hero--photo-partnerships{background-image:url("../MUV-WORK-WITH-US-PARTNERSHIPS-HERO-work-with-us-partnerships-MOBILE.jpg?v=20260628i");background-position:top center;min-height:calc(100vw * 1000 / 600)}}

/* data-page="academy" is shared by academy / academy-charities / academy-smes — already has its own min-height system above (-250px). Modifier class just supplies the image. */
.hero--photo-academy{background:#94a187 url("../MUV-HERO-academy.jpg?v=20260625zf") center/cover no-repeat}
.hero--photo-charities{background:#94a187 url("../MUV-COURSES-CHARITIES-hero-courses-for-charities.jpg?v=20260625zf") center/cover no-repeat}
.hero--photo-smes{background:#94a187 url("../MUV-HERO-courses-for-smes.jpg?v=20260625zf") center/cover no-repeat}
@media (max-width:640px){
  /* min-height matched to each mobile image's actual aspect ratio so
     background-size:cover does not crop key elements. body[data-page]
     qualifier raises specificity above the body[data-page="academy"]
     .hero--charities-photo override that sets 2.0 aspect by default. */
  body[data-page="academy"] .hero--photo-academy,
  .hero--photo-academy{background-image:url("../MUV-HERO-academy-MOBILE.jpg?v=20260628i");background-position:top center;min-height:calc(100vw * 1300 / 600 - 250px)}
  body[data-page="academy"] .hero--photo-charities,
  .hero--photo-charities{background-image:url("../MUV-COURSES-CHARITIES-hero-courses-for-charities-MOBILE.jpg?v=20260628l");background-position:top center;min-height:calc(100vw * 1400 / 600)}
  body[data-page="academy"] .hero--photo-smes,
  .hero--photo-smes{background-image:url("../MUV-HERO-courses-for-smes-MOBILE.jpg?v=20260628u");background-position:top center;min-height:calc(100vw * 1250 / 450 - 250px)}
}
/* Mobile font sizing.
   - html root scale = 85% (carries layout-side rem scaling, ~15% smaller).
   - H1, H2 explicit per Marshall: 48px / 30px.
   - Main nav drop-down (parent labels, child links, sub-blurb) at 17px.
   - 17px floor for every other body / display / UI text so no text on mobile
     renders below 17px regardless of its rem declaration. */
@media (max-width:640px){
  html{font-size:85%}
  h1, .hero h1, .hero--page h1, body[data-page="legal"] h1{font-size:28px !important}
  h2{font-size:30px}
  .nav__menu .nav__link{font-size:17px}
  .nav__drop a{font-size:17px}
  .nav__drop small{font-size:17px}
  /* FAQ summary +1px above the 17px floor */
  .faq summary, .faq > summary{font-size:18px !important}
  /* Disclaimer / consent text on mobile = 15px (overrides the 17px floor) */
  .consent, .consent span, .consent *{font-size:15px !important}
  /* Footer legal copyright text on mobile −3px from the 17 floor = 14px */
  .footer__legal, .footer__legal p{font-size:14px !important}
  /* Module 1 library-card block (MODULE 1, Foundations & Authenticity,
     Case study, DESCRIPTION, RESOURCES, SEE COURSE PRICING) +3 above
     the floor = 20px. */
  .lib-card__cat,
  .lib-card__title,
  .lib-card__sub,
  .lib-cat__title,
  .lib-cat > summary,
  .lib-sub > summary,
  .lib-sub__body,
  .lib-card .btn,
  .lib-card a.btn{font-size:20px !important}
  /* Resource Library accordion items (2026 REPORTS, FOUNDATIONAL MOVEMENT
     MARKETING, DONOR BEHAVIOUR & CHARITY MARKETING, etc.) AND everything
     inside their open dropdowns (item title, sub-summaries, body text,
     download buttons) — all −3px from the 20px lib-card baseline → 17px. */
  body[data-page="hub"] .lib-cat > summary,
  body[data-page="hub"] .lib-cat__title,
  body[data-page="hub"] .lib-card__title,
  body[data-page="hub"] .lib-card__cat,
  body[data-page="hub"] .lib-card__sub,
  body[data-page="hub"] .lib-card__desc,
  body[data-page="hub"] .lib-sub > summary,
  body[data-page="hub"] .lib-sub__body,
  body[data-page="hub"] .lib-sub__body p,
  body[data-page="hub"] .lib-dl{font-size:17px !important}
  /* 17px floor — every text element bumped up to 17px when its declared
     size would otherwise compute below that. */
  body,
  .lead, .hero__sub, .eyebrow, .aud__eyebrow, .form-note,
  .btn, .btn--sm, .btn--ink, .btn--primary,
  .stat__lab,
  .pf__sub, .pf__list, .pf__list li, .pf__badge, .pf__btn, .pf__verify,
  .pc__list, .pc__badge, .pc__tier, .pc__verify, .pc__btn,
  .price__list, .price__badge, .price__verify, .price__amt small, .price__rrp,
  .quote p, .quote cite, .quote cite span,
  .coach__quote, .coach__role,
  .aud__sub, .aud__intro-body p, .aud__pills li, .aud__felix p, .aud__felix-btn, .aud__mod1-btn, .aud__lockin, .aud__video-cap, .aud__photo, .aud__twocol, .aud__takeaway-body p, .aud__ribbon p, .aud__mod1-body p,
  .faq summary, .faq__body, .faq__body p, .faq-cat,
  .consent, .field label, .form-ok,
  .ccw__copy, .ccw__title,
  .retain__hint, .retain__yrsub, .retain__yrlab, .retain__scale, .retain__verdict, .retain__why, .retain__lab,
  .sim__legend, .sim__note, .sim__lab, .sim__hint, .sim__statlab, .sim__statsub, .sim__verdict, .sim__sources,
  .takeaway, .takeaway p, .takeaway strong,
  .footer__legal, .footer__legal p, .footer__bottom, .footer__bottom a, .footer__bottom span, .footer__fare,
  .site-footer ul li a, .site-footer h5, .site-footer p, .site-footer a,
  .audience__intro, .audience__tag, .cs-stats span, .cs-stats b,
  .module .res, .module .res b,
  .route__lab, .route__sub,
  .chip, .mod__did, .mod__did b, .mod__hrs, .mod__proof, .mod__keeplab, .mod__tabnm, .mod__focus,
  .lib-card__desc, .lib-card__title, .lib-card__cat, .lib-cat__title, .lib-cat > summary, .lib-sub > summary, .lib-sub__body, .lib-dl, .lib-card__sub,
  .module .name, .module .what, .module .who, .module__n, .module__title, .module__case,
  .plan__wk, .plan__step span:last-child, .plan__step b, .plan__finish,
  .formula__step p, .formula__step h4,
  .eviz__src, .eviz__txt,
  .ph-media .ph-tag, .ph-tag,
  .tstmnl p, .tstmnl figcaption b, .tstmnl figcaption span,
  .counter__lab,
  .leadmag h4,
  p, li, blockquote, figcaption, dd, dt, td, th, address, label
  { font-size:17px }
  /* Doubled bullet · separators with SYMMETRIC vertical spacing.
     Parent gap zeroed and the bullet ::before given equal margin-top
     + margin-bottom so the space above the bullet matches the space
     below it. */
  .takeaway ul,.takeaway ol,
  .pf__list,
  section ul:not(.nav__menu):not(.nav__drop):not(.aud__pills):not(.checklist):not(.price__list):not(.pf__list):not(.reslist):not(.cs-stats):not(.mod__chips),
  main  ul:not(.nav__menu):not(.nav__drop):not(.aud__pills):not(.checklist):not(.price__list):not(.pf__list):not(.reslist):not(.cs-stats):not(.mod__chips){
    gap:0 !important;
  }
  .takeaway ul li:not(:first-child)::before,
  .takeaway ol li:not(:first-child)::before,
  .pf__list li:not(:first-child)::before,
  section ul:not(.nav__menu):not(.nav__drop):not(.aud__pills):not(.checklist):not(.price__list):not(.pf__list):not(.reslist):not(.cs-stats):not(.footer__policies):not(.mod__chips) > li:not(:first-child)::before,
  main  ul:not(.nav__menu):not(.nav__drop):not(.aud__pills):not(.checklist):not(.price__list):not(.pf__list):not(.reslist):not(.cs-stats):not(.footer__policies):not(.mod__chips) > li:not(:first-child)::before{
    font-size:2em !important;
    margin-top:.5rem !important;
    margin-bottom:.5rem !important;
  }
  /* Overflow fixes (CFG pricing card, .counter caption) — allow long list
     items to wrap on narrow screens so nothing pushes past the viewport.
     Badges (.pc__badge / .pf__badge / .price__badge) stay nowrap so the
     absolutely-positioned 'COMING SOON' / 'FOUNDING OFFER' pills don't grow
     into a 2-line ellipse and overlap the card title below. */
  .pc__list li, .pc__tier,
  .price__list li,
  .pf__list li{white-space:normal !important}
  .pc__badge, .pf__badge, .price__badge{white-space:nowrap !important}
  /* No overflow:hidden on .pc-grid or .pc — that was clipping the
     absolutely-positioned 'COMING SOON' badges that sit at top:-15px
     above the card edge. Horizontal overflow is already prevented by
     wrapping long list items above; the grid + card just need max-width. */
  .pc-grid{max-width:100% !important;overflow:visible}
  .pc{min-width:0;max-width:100%;overflow:visible}
  .counter__lab{white-space:normal !important;max-width:90vw !important}
  /* Extra top padding on the .pf founding-offer card so the gap between
     the 'FOUNDING OFFER' pill and the £97 content matches the bottom
     padding (≈ same space below the 'GET EARLY ENROLMENT' button). */
  .pricing-v2 .pf{padding-top:60px !important}
  /* Same treatment on the tan .pc 'COMING SOON' tier cards (CHARITIES,
     CICS & NOT-FOR-PROFIT and CHARITY FINANCE GROUP MEMBER) so the
     COMING SOON pill no longer crowds the tier title. */
  .pc{padding-top:60px !important; margin-top:32px !important}
  /* Extra breathing room above each tan .pc card so the COMING SOON pill
     sitting at top:-15px has the same clear space above it that the
     FOUNDING OFFER pill enjoys on the red card. */
  .pc-grid{gap:48px !important}
}
/* Mobile: stack ALL pricing block grids vertically (overrides any per-page
   inline style="grid-template-columns:repeat(N,1fr)" via !important).
   Font-size bumps removed — html=70% root scale handles all font sizing. */
@media (max-width:640px){
  .pc-grid, .pricing, .pricing-v2 .pf{grid-template-columns:1fr !important}
  .pc-grid{max-width:420px;margin-inline:auto}
}
/* Mobile: center-justify ALL content (text + images) site-wide, including
   the footer. Header nav drawer is excluded so the mobile menu still
   slides in correctly. */
@media (max-width:640px){
  body{text-align:center}
  body .btn-row{justify-content:center}
  body blockquote{text-align:center}
  section img, main img, article img{display:block;margin-inline:auto;max-width:100%;height:auto}
  section ul, section ol, main ul, main ol, article ul, article ol{list-style-position:inside;padding-inline-start:0}
  .site-header, .site-header *{text-align:initial}
  .site-footer{text-align:center}
  .site-footer .footer__grid{grid-template-columns:1fr;text-align:center}
  .site-footer .footer__grid > div{text-align:center}
  .site-footer ul{list-style:none;padding:0;margin:0}
  .site-footer .flogo, .site-footer img{display:block;margin-inline:auto}
  .site-footer .footer__fare{max-width:none;margin-inline:auto;text-align:center}
  .site-footer .footer__bottom, .site-footer .footer__legal, .site-footer .footer__policies{justify-content:center;text-align:center}
  .site-footer p{max-width:none;margin-inline:auto;text-align:center}
  .site-footer ul li{margin-bottom:.8rem}
  .ph-media--about-company{background-image:url("../MUV-ABOUT-US-the-company-behind-the-movement-MOBILE.jpg?v=20260628i") !important;background-position:top center;min-height:calc(100vw * 307 / 376) !important}
}
/* Courses pages: anchor hero content 200px from the top of the hero image
   Zero the inner .hero__grid top padding so the only top-of-content offset
   is the .container padding-top below. Bottom padding kept for breathing room. */
body[data-page="academy"] .hero--charities-photo > .container{padding-top:200px}
body[data-page="academy"] .hero--charities-photo .hero__grid{padding-top:0}

/* stats section (index: How Movement Marketing Outperforms Standard Campaigns) — image 1920x800; white text via shared photo-bg rule */
.section--stats-photo{background:#1c1f22 url("../MUV-HOMEPAGE-how-movement-marketing-outperforms-standard-campaigns.jpg?v=20260625zf") top center/cover no-repeat;aspect-ratio:1920/800}
@media (max-width:640px){.section--stats-photo{background-image:url("../MUV-HOMEPAGE-how-movement-marketing-outperforms-standard-campaigns-MOBILE.jpg?v=20260628i");aspect-ratio:auto;min-height:auto;padding:clamp(56px,8vw,110px) 0}}

/* GBG-in-practice (index: You Learn. Communities Eat.) — image 1920x900 — overrides section--green flat fill */
.section--gbg-photo{background:#126D46 url("../MUV-HOMEPAGE-growth-by-giving-in-practice.jpg?v=20260625zf") top center/cover no-repeat;aspect-ratio:1920/900}
@media (max-width:640px){.section--gbg-photo{background-image:url("../MUV-HOMEPAGE-growth-by-giving-in-practice-MOBILE.jpg?v=20260628q");aspect-ratio:auto;min-height:calc(100vw * 1300 / 450);padding:clamp(56px,8vw,110px) 0}}

/* closing CTA (index: Ready to grow your movement?) — image 1920x500 — named -hp so it doesn't collide with section--cta-photo (partnerships) */
.section--cta-photo-hp{background:#1c1f22 url("../MUV-HOMEPAGE-ready-to-grow-your-movement.jpg?v=20260625zf") top center/cover no-repeat;aspect-ratio:1920/500}
@media (max-width:640px){.section--cta-photo-hp{background-image:url("../MUV-HOMEPAGE-ready-to-grow-your-movement-MOBILE.jpg?v=20260628r");aspect-ratio:auto;min-height:calc(100vw * 1600 / 800);padding:clamp(56px,8vw,110px) 1rem;text-align:center}.section--cta-photo-hp > .container{text-align:center}.section--cta-photo-hp h2,.section--cta-photo-hp .lead,.section--cta-photo-hp p{text-align:center}.section--cta-photo-hp .btn-row{justify-content:center}}

/* HOMEPAGE photo sections — per-section content offsets (Marshall: clear focal subject in image) */
.hero--charities-photo > .container{padding-top:63px}
.section--stats-photo > .container{padding-top:165px}
.section--gbg-photo > .container{padding-top:165px}
.section--cta-photo-hp > .container{padding-top:50px}

/* stats: dark translucent contrast panel behind the .split (explicit Marshall override of no-overlay rule — needed because the volunteer image is detail-rich behind both text and stats) */
.section--stats-photo .split{background:rgba(0,0,0,.45);border-radius:18px;padding:clamp(28px,4vw,52px);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}

/* mobile: centre all content */
@media (max-width:768px){
  .section{text-align:center}
  .hero__inner,.hero__grid,.hero__grid>div{text-align:center}
  .route a{align-items:center}
  .btn-row{justify-content:center}
  ul.checklist,ul.price__list{display:inline-block;text-align:left}
  .partner-row__logo img{margin-inline:auto}
  .resitem .btn{justify-self:center}
  .mod__chips,.sim__legend{justify-content:center}
  .partner-row{padding-block:clamp(30px,8vw,48px)}
}

/* ============================================================
   LIBRARY ACCORDION (resources.html)
   Two-level: category bars open into card grids; each card
   has DESCRIPTION / WHY ITS USEFUL sub-accordions.
   ============================================================ */
.lib-acc{display:flex;flex-direction:column;gap:.85rem;margin:1.6rem auto 0;max-width:980px}
.lib-cat{background:#fff;border-radius:14px;overflow:hidden;border:1px solid rgba(0,0,0,.04)}
.lib-cat>summary{
  list-style:none;cursor:pointer;padding:1.1rem 1.5rem;
  text-align:center;font-family:Oswald,sans-serif;
  font-weight:500;letter-spacing:.09em;font-size:.92rem;
  text-transform:uppercase;color:#1a1a1a;user-select:none;
}
.lib-cat>summary::-webkit-details-marker{display:none}
.lib-cat>summary::before{
  content:"+";color:#9b1c20;font-weight:700;margin-right:.6rem;
  display:inline-block;transition:transform .3s ease;
}
.lib-cat[open]>summary::before{transform:rotate(45deg)}
.lib-cat__body{
  display:grid;grid-template-rows:0fr;
  padding:0 1.6rem;
  transition:grid-template-rows .38s ease,padding .38s ease;
}
.lib-cat[open]>.lib-cat__body{
  grid-template-rows:1fr;
  padding:.4rem 1.6rem 1.8rem;
}
.lib-cat__body>*{overflow:hidden;min-height:0}
.lib-grid{
  display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:center;
}
.lib-grid>*{width:calc((100% - 2 * 1.4rem) / 3);flex:0 0 auto}
@media(max-width:880px){.lib-grid>*{width:calc((100% - 1.4rem) / 2)}}
@media(max-width:580px){.lib-grid>*{width:100%}}

/* Card */
.lib-card{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid rgba(0,0,0,.06);border-radius:12px;
  overflow:hidden;
}
.lib-card__img{
  aspect-ratio:4/3;background:#94a187;color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:Montserrat,sans-serif;font-size:.78rem;
  letter-spacing:.04em;text-align:center;line-height:1.45;
  white-space:pre-line;
}
.lib-card__img img{width:100%;height:100%;object-fit:cover;display:block}
.lib-card__title{
  font-family:Montserrat,sans-serif;font-size:.95rem;font-weight:500;
  text-align:center;padding:.95rem 1rem .65rem;margin:0;color:#1a1a1a;
  line-height:1.3;
}

/* Card sub-tabs */
.lib-sub{margin:.25rem .85rem 0;border-radius:8px;overflow:hidden;background:#fbf8ed}
.lib-sub>summary{
  list-style:none;cursor:pointer;padding:.55rem .8rem;
  text-align:center;font-family:Oswald,sans-serif;
  font-weight:500;letter-spacing:.07em;font-size:.74rem;
  text-transform:uppercase;color:#1a1a1a;user-select:none;
}
.lib-sub>summary::-webkit-details-marker{display:none}
.lib-sub>summary::before{
  content:"+";color:#9b1c20;font-weight:700;margin-right:.4rem;
  display:inline-block;transition:transform .3s ease;
}
.lib-sub[open]>summary::before{transform:rotate(45deg)}
.lib-sub__body{
  display:grid;grid-template-rows:0fr;
  padding:0 1rem;font-size:.82rem;line-height:1.55;color:#333;
  text-align:center;background:#f5efde;
  transition:grid-template-rows .32s ease,padding .32s ease;
}
.lib-sub[open]>.lib-sub__body{
  grid-template-rows:1fr;
  padding:.75rem 1rem 1rem;
}
.lib-sub__body>*{overflow:hidden;min-height:0}
.lib-sub__body p{margin:0}

/* Download pill button */
.lib-dl{
  display:inline-block;align-self:center;margin:.85rem auto 1.1rem;
  background:#0c1e2e;color:#fff !important;
  font-family:Oswald,sans-serif;font-weight:500;letter-spacing:.08em;
  font-size:.78rem;text-transform:uppercase;
  padding:.65rem 1.4rem;border-radius:999px;text-decoration:none;
  transition:background .15s ease;
}
.lib-dl:hover{background:#1a3550}

/* Closing notice tightening so it doesn't collide visually with last bar */
.lib-notice{max-width:980px;margin-inline:auto}
.lib-notice p{max-width:none !important}

/* ============================================================
   How Content Cleaning Works (services.html)
   M-icon + uppercase heading, then 2-col case studies stacked
   with sage image placeholders top + bottom; webinar banner below.
   ============================================================ */
.ccw__head{text-align:center;margin-bottom:clamp(28px,4vw,44px)}
.ccw__icon{display:block;margin:0 auto .8rem;height:56px;width:auto}
.ccw__title{font-family:var(--ff-display);font-weight:700;text-transform:uppercase;font-size:2rem;letter-spacing:.02em;margin:0;color:var(--ink);line-height:1.15}
.ccw__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px)}
.ccw__case{display:flex;flex-direction:column;gap:1.1rem}
.ccw__media{background:#a8b09b;border-radius:10px;aspect-ratio:16/10;width:100%}
.ccw__copy{font-size:.95rem;line-height:1.65;color:var(--ink-2);margin:0}
.ccw__copy strong{color:var(--ink);font-weight:700;letter-spacing:.01em}
@media(max-width:780px){.ccw__grid{grid-template-columns:1fr}}

/* Webinar signup banner — red border, four-column row, banner height defined by 130px avatars.
   Title + hosted-by use the body font (Montserrat) bold — NOT Oswald — so they match
   the reference's wider/readable lockup. */
.webinar-banner{margin-top:clamp(32px,4vw,48px);background:#fbf8ed;border:1.5px solid var(--red);border-radius:14px;padding:clamp(18px,2.2vw,26px) clamp(18px,2.4vw,24px)}
.webinar-banner__body{display:grid;grid-template-columns:auto 1fr auto auto;gap:clamp(12px,1.4vw,18px);align-items:center}
.webinar-banner__icon{display:block;height:62px;width:auto}
.webinar-banner__text{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.webinar-banner__title{font-family:var(--ff-body);font-weight:700;font-size:1rem;line-height:1.3;margin:0;color:#0c1e2e;text-transform:none;letter-spacing:0}
.webinar-banner__kicker{color:var(--red);text-transform:uppercase;letter-spacing:.02em;margin-right:.15em;font-weight:700}
.webinar-banner__sub{font-family:var(--ff-body);font-size:.96rem;color:var(--ink-2);margin:0;line-height:1.4;font-weight:400}
.webinar-banner__hostlab{font-family:var(--ff-body);font-size:.96rem;color:var(--ink);margin:0;line-height:1.3;font-weight:700}
.webinar-banner__btn{display:inline-block;background:#1c1f22;color:#fff !important;font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;font-weight:700;padding:.95em 1.4em;border-radius:999px;text-decoration:none;white-space:nowrap;transition:background .15s ease}
.webinar-banner__btn:hover,.webinar-banner__btn:focus-visible{background:var(--red);text-decoration:none}
.webinar-banner__avatars{display:flex;gap:.45rem}
.webinar-banner__avatars img{width:130px;height:130px;border-radius:10px;object-fit:cover;display:block}
@media(max-width:1100px){
  .webinar-banner__avatars img{width:108px;height:108px}
}
@media(max-width:980px){
  .webinar-banner__body{grid-template-columns:auto 1fr;gap:1rem 1.2rem;row-gap:1rem}
  .webinar-banner__btn{grid-column:1/-1;justify-self:start}
  .webinar-banner__avatars{grid-column:1/-1;justify-content:flex-start}
}
@media(max-width:560px){
  .webinar-banner__body{grid-template-columns:1fr;text-align:center}
  .webinar-banner__icon{margin-inline:auto}
  .webinar-banner__btn{justify-self:center}
  .webinar-banner__avatars{justify-content:center;gap:.4rem}
  .webinar-banner__avatars img{width:88px;height:88px}
}

/* Webinar + event extensions of the library card system */
.lib-card__date{
  text-align:center;font-family:Oswald,sans-serif;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:#9b1c20;padding:.7rem .75rem .15rem;
}
.lib-card__meta{
  text-align:center;font-size:.78rem;color:#4a4a4a;
  padding:0 1rem .55rem;line-height:1.5;
}
.lib-card__meta strong{color:#1a1a1a}
.lib-sub__body ul{margin:0;padding-left:1.2rem;text-align:left}
.lib-sub__body ul li{margin:.25rem 0}

/* 2-column grid variant: forces 2 cards per row on desktop instead of 3.
   The existing .lib-grid 880px/580px breakpoints still apply naturally
   (already drop to 2 then 1 column on smaller screens). */
.lib-grid--2col>*{width:calc((100% - 1.4rem) / 2)}

/* ============================================================
   HERO TYPOGRAPHY & CTA NORMALISATION (site-wide)
   Every hero: sage bg, left-aligned, big bold uppercase Oswald h1
   with tight leading, white eyebrow, white lead, ghost-card .route CTAs.
   ============================================================ */
.hero .eyebrow{
  display:inline-block;font-family:var(--ff-display);
  text-transform:uppercase;letter-spacing:.22em;
  font-size:1.4rem;color:#fff !important;
  font-weight:500;margin-bottom:1rem;
}
.hero h1{
  font-size:5.2rem;
  font-weight:700;line-height:.95;letter-spacing:-.005em;
  color:#fff;text-transform:uppercase;
  margin:0 0 1.4rem;
}
.hero .lead{
  color:#fff;font-family:var(--ff-body);
  font-size:1.18rem;line-height:1.55;
  font-weight:400;max-width:46ch;margin:0 0 1.5rem;
}
.hero .lead strong{color:#fff;font-weight:700}
.hero p{color:rgba(255,255,255,.92)}

/* Single-CTA route variant (services / partnerships) */
.route--single{grid-template-columns:1fr;max-width:280px;margin-inline:auto}

/* Hero ghost-card route: subtler bg, more visible border for contrast */
.hero .route a{
  background:transparent;border:1.5px solid rgba(255,255,255,.55);
  padding:1.1rem 1.3rem;
}
.hero .route a:hover{background:rgba(255,255,255,.1);border-color:#fff}
.hero .route__lab{font-size:.95rem;font-weight:600;letter-spacing:.07em}
.hero .route__sub{font-size:.78rem;color:rgba(255,255,255,.85);line-height:1.4;font-family:var(--ff-body);font-weight:400}

/* ===================== Academy page — MUV-ACADEMY-* photo sections =====================
   center/cover preserves aspect ratio — image is cropped to fit the section, never deformed.
   min-height matches the image's native 1920:H ratio so the photo isn't truncated on wide screens. */

/* Course 2 Waitlist section — replaces the flat sage fill with the MUV-ACADEMY-course-2-waitinglist.jpg backdrop. Sage retained as fallback. */
.section--course2-photo{background:#94a187 url("../MUV-ACADEMY-course-2-waitinglist.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 830 / 1920)}
@media (max-width:640px){
  .section--course2-photo{
    background-image:url("../MUV-ACADEMY-course-2-waitinglist-MOBILE.jpg?v=20260628B");
    background-size:100% auto;
    background-position:top center;
    background-repeat:no-repeat;
    background-color:#be932d;
    /* Image natural aspect + 150px yellow padding below, color matched
       to the image's background. */
    min-height:calc(100vw * 1200 / 450 + 150px);
    padding-bottom:150px;
  }
}

/* Academy 'Where to next' closing CTA — replaces flat ink with MUV-ACADEMY-where-to-next.jpg. Ink retained as fallback. Placed AFTER .section--ink so equal-specificity rule wins. */
.section--academy-next-photo{background:#1c1f22 url("../MUV-ACADEMY-where-to-next.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 525 / 1920)}
@media (min-width:641px){
  .section--academy-next-photo{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
  .section--academy-next-photo > .container{width:100%;text-align:center}
}
@media (max-width:640px){.section--academy-next-photo{background-image:url("../MUV-ACADEMY-where-to-next-MOBILE.jpg?v=20260628i");min-height:calc(100vw * 1000 / 600)}}

/* ===================== Academy 'Pick your route' chooser cards =====================
   Sage / peach coloured tiles per Marshall's 2026-06-06 reference. M logomark sits
   INLINE with the red eyebrow on a single header row. Headline is heavy Montserrat
   (not condensed Oswald) to match the wider letterforms in the reference. */
.card--route{padding:clamp(28px,3.6vw,44px);border:0;border-radius:18px;display:flex;flex-direction:column;gap:.9rem;color:#fff}
.card--route__head{display:flex;align-items:center;gap:.75rem;margin-bottom:.1rem}
.card--route__head img{height:34px;width:auto;display:block}
.card--route .eyebrow{color:#fff;font-weight:700;letter-spacing:.22em;font-size:1.4rem;margin:0}
.card--route h2{margin:.2rem 0 0;color:#fff;text-transform:uppercase;font-family:var(--ff-display);font-weight:700;line-height:1.02;font-size:2.4rem;letter-spacing:.005em}
.card--route p{color:rgba(255,255,255,.94);margin:.3rem 0 0}
.card--route .btn-row{margin-top:auto}
.card--route .btn{background:var(--ink);border-color:transparent;color:#fff;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem}
.card--route .btn:hover,.card--route .btn:focus-visible{background:var(--red);border-color:var(--red);color:#fff}
.card--route--charity{background:#94a187}
.card--route--sme{background:#e8a78a}

/* Academy-Charities — photo backgrounds on the four story bands.
   Each modifier overrides the existing sage/dark fill with cover-fit imagery.
   Mobile drops the photo and falls back to the parent's solid background. */
.aud__ribbon--photo-charities{background:#94a187 url("../MUV-COURSES-CHARITIES-stop-running-campaigns-build-supporter-movements.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 525 / 1920)}
@media (max-width:640px){.aud__ribbon--photo-charities{background:#94a187 url("../MUV-COURSES-CHARITIES-stop-running-campaigns-build-supporter-movements-MOBILE.jpg?v=20260628i") center/cover no-repeat;min-height:calc(100vw * 1000 / 600)}}

.aud__felix--photo-charities{background:#94a187 url("../MUV-COURSES-CHARITIES-100-meals-through-felix.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 525 / 1920)}
@media (max-width:640px){.aud__felix--photo-charities{background:#94a187 url("../MUV-COURSES-CHARITIES-100-meals-through-felix-MOBILE.jpg?v=20260628t") center/cover no-repeat;min-height:calc(100vw * 1000 / 600)}}

.aud__mod1--photo-charities{background:#1c1f22 url("../MUV-COURSES-CHARITIES-module-one-of-the-muvist-academy-is-now-open.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 525 / 1920)}
@media (max-width:640px){.aud__mod1--photo-charities{background:#1c1f22 url("../MUV-COURSES-CHARITIES-module-one-of-the-muvist-academy-is-now-open-MOBILE.jpg?v=20260628i") center/cover no-repeat;min-height:calc(100vw * 1000 / 600)}}

.section--charities-course-photo{background:#1c1f22 url("../MUV-COURSES-CHARITIES-see-the-course-in-full.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 600 / 1920)}
@media (max-width:640px){.section--charities-course-photo{background-image:url("../MUV-COURSES-CHARITIES-see-the-course-in-full-MOBILE.jpg?v=20260628i");min-height:calc(100vw * 1000 / 600)}}

/* Academy-Charities photo bands — vertical-center the content only. NO scrim,
   NO panel, NO tint behind text. Brand rule (Marshall, hard rule): nothing
   transparent or dark goes over an image, ever — not even a contained panel. */
.aud__ribbon--photo-charities,
.aud__felix--photo-charities,
.aud__mod1--photo-charities,
.section--charities-course-photo{
  display:flex;align-items:center;justify-content:center;
}
@media (max-width:640px){
  .aud__ribbon--photo-charities,
  .aud__felix--photo-charities,
  .section--charities-course-photo{display:block}
  .aud__mod1--photo-charities{
    display:flex;align-items:center;justify-content:center;
    text-align:center;
  }
  .aud__mod1--photo-charities .container{width:100%;text-align:center}
}

/* Module 1 band on academy-charities: centered single-column stack that mirrors
   the Felix-band style. Scoped to the --photo-charities modifier so the
   default .aud__mod1 grid layout on other pages is untouched. */
.aud__mod1--photo-charities{text-align:center}
.aud__mod1--photo-charities .aud__eyebrow{
  display:inline-block;margin:0 0 .5rem;color:rgba(255,255,255,.9);
  font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;
}
.aud__mod1--photo-charities .aud__mod1-h{
  font-family:var(--ff-display);font-weight:700;text-transform:uppercase;
  font-size:2.5rem;line-height:1.1;letter-spacing:.02em;
  color:#fff;margin:0 auto 1rem;max-width:22ch;
}
.aud__mod1--photo-charities p{
  max-width:62ch;margin:0 auto 1.1rem;
  font-size:1.02rem;color:rgba(255,255,255,.95);line-height:1.6;
}
.aud__mod1--photo-charities p:last-of-type{margin-bottom:1.6rem}
.aud__mod1--photo-charities .aud__mod1-btn{margin-top:.2rem}

/* Academy-SMEs — photo backgrounds on the three story bands + retention section.
   Same center/cover pattern as the charity variants. Mobile drops the photo. */
.aud__ribbon--photo-smes{background:#e8a78a url("../MUV-COURSES-SMES-stop-renting-attention-build-a-customer-movement.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 525 / 1920)}
@media (max-width:640px){.aud__ribbon--photo-smes{background:#e8a78a url("../MUV-COURSES-SMES-stop-renting-attention-build-a-customer-movement-MOBILE.jpg?v=20260628t") center/cover no-repeat;min-height:calc(100vw * 1000 / 600);display:flex;flex-direction:column;justify-content:center;padding:60px 0}}

.section--smes-course-photo{background:#1c1f22 url("../MUV-COURSES-SMES-see-the-course-in-full.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 600 / 1920)}
@media (max-width:640px){.section--smes-course-photo{background-image:url("../MUV-COURSES-SMES-see-the-course-in-full-MOBILE.jpg?v=20260628i");min-height:calc(100vw * 1000 / 600)}}

/* Retention section: photo background under the whole section. Native 1920x1250
   close-matches the natural section height so cover-fit barely crops. */
.section--smes-retention-photo{background:#1f2326 url("../MUV-COURSES-SMES-what-keeping-your-customers-is-actually-worth.jpg?v=20260625zf") center/cover no-repeat !important}
@media (max-width:640px){.section--smes-retention-photo{background-image:url("../MUV-COURSES-SMES-what-keeping-your-customers-is-actually-worth-MOBILE.jpg?v=20260628i") !important}}

/* Non-boxed text inside the retention section: section eyebrow / h2 / lead /
   the closing rationale paragraphs. Boxed content (.retain__panel, year cards,
   bars) keeps its existing colors. */
.section--smes-retention-photo .section-head .eyebrow,
.section--smes-retention-photo .section-head h2,
.section--smes-retention-photo .section-head .lead,
.section--smes-retention-photo .retain__why,
.section--smes-retention-photo .retain__why p,
.section--smes-retention-photo .retain__why b,
.section--smes-retention-photo .retain__why strong{
  color:#fff !important;
  text-shadow:none !important;
}

/* Academy-SMEs photo bands — vertical-center the content with balanced
   padding/margins. Same pattern as the charity variants. */
.aud__ribbon--photo-smes,
.section--smes-course-photo{
  display:flex;align-items:center;justify-content:center;
}
@media (max-width:640px){
  .aud__ribbon--photo-smes,
  .section--smes-course-photo{display:block}
}

/* About-Us page — additional photo backgrounds wired from MUV-WEBSITE-FINAL */
.section--about-believe-photo{background:#94a187 url("../MUV-ABOUT-US-what-we-believe-and-how-we-work.jpg?v=20260625zf") center/cover no-repeat}
@media (max-width:640px){.section--about-believe-photo{background-image:url("../MUV-ABOUT-US-what-we-believe-and-how-we-work-MOBILE.jpg?v=20260628i");background-position:top center}}

.section--about-reset-photo{background:#1c1f22 url("../MUV-ABOUT-US-Ready-to-move-beyond-campaigns-that-reset-to-zero.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 525 / 1920)}
@media (max-width:640px){.section--about-reset-photo{background-image:url("../MUV-ABOUT-US-Ready-to-move-beyond-campaigns-that-reset-to-zero-MOBILE.jpg?v=20260628A");background-size:100% auto;background-position:top center;background-repeat:no-repeat;min-height:calc(100vw * 1000 / 450);display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 60px 0}.section--about-reset-photo > .container{padding-top:0;padding-bottom:0}}

/* Brand-rule extension: white text inside these two new photo bands */
.section--about-believe-photo :is(.eyebrow, h1, h2, h3, .lead, p, a),
.section--about-reset-photo :is(.eyebrow, h1, h2, h3, .lead, p){
  color:#fff !important;
}

/* Growth-by-Giving page — additional photo backgrounds */
.section--gbg-formula-photo{background:#f6f1e6 url("../MUV-GROWTH-BY-GIVING-the-growth-by-giving-formula.jpg?v=20260625zf") center/cover no-repeat}
@media (max-width:640px){.section--gbg-formula-photo{background-image:url("../MUV-GROWTH-BY-GIVING-the-growth-by-giving-formula-MOBILE.jpg?v=20260628i");min-height:calc(100vw * 1000 / 600)}}

.section--gbg-felix-photo{background:#937d71 url("../MUV-GROWTH-BY-GIVING-every-enrolment-funds-100-meals-through-felix.jpg?v=20260625zf") center/cover no-repeat;color:#fff}
@media (max-width:640px){.section--gbg-felix-photo{background-color:#937d71;background-image:url("../MUV-GROWTH-BY-GIVING-every-enrolment-funds-100-meals-through-felix-MOBILE.jpg?v=20260628i");min-height:calc(100vw * 1000 / 600);display:flex;flex-direction:column;justify-content:flex-end;padding:0 0 60px 0}}

.section--gbg-practice-photo{background:#f6f1e6 url("../MUV-GROWTH-BY-GIVING-Put-Growth-by-Giving-into-practice.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 525 / 1920)}
@media (max-width:640px){.section--gbg-practice-photo{background-image:url("../MUV-GROWTH-BY-GIVING-Put-Growth-by-Giving-into-practice-MOBILE.jpg?v=20260628i");min-height:calc(100vw * 1000 / 600)}}

/* White text over felix photo bg */
.section--gbg-felix-photo :is(.eyebrow, h1, h2, h3, .lead, p, a, b, strong){color:#fff !important}
.section--gbg-felix-photo :is(.counter__num, .counter__lab){color:#fff !important}

/* Events page closing CTA */
.section--events-next-photo{background:#1c1f22 url("../MUV-LEARING-HUB-EVENTS-want-to-meet-between-events.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 525 / 1920)}
@media (max-width:640px){.section--events-next-photo{background-image:url("../MUV-LEARING-HUB-EVENTS-want-to-meet-between-events-MOBILE.jpg?v=20260628i");min-height:calc(100vw * 1000 / 600)}}
.section--events-next-photo :is(.eyebrow, h2, .lead, p, a){color:#fff !important}

/* Webinars page additional photo backgrounds */
.section--webinars-howitworks-photo{background:#f6f1e6 url("../MUV-LEARING-HUB-FREE-LIVE-WEBINARS-Everything-you-need-to-know-before-you-join.jpg?v=20260625zf") center/cover no-repeat}
@media (max-width:640px){.section--webinars-howitworks-photo{background-image:url("../MUV-LEARING-HUB-FREE-LIVE-WEBINARS-Everything-you-need-to-know-before-you-join-MOBILE.jpg?v=20260628i")}}

.section--webinars-stayintheloop-photo{background:#f6f1e6 url("../MUV-LEARING-HUB-FREE-LIVE-WEBINARS-Stay-in-the-loop.jpg?v=20260625zf") center/cover no-repeat}
@media (max-width:640px){.section--webinars-stayintheloop-photo{background-image:url("../MUV-LEARING-HUB-FREE-LIVE-WEBINARS-Stay-in-the-loop-MOBILE.jpg?v=20260628i")}}

.section--webinars-notready-photo{background:#1c1f22 url("../MUV-LEARING-HUB-FREE-LIVE-WEBINARS-Not-ready-to-wait-for-a-date.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 525 / 1920)}
@media (max-width:640px){.section--webinars-notready-photo{background-image:url("../MUV-LEARING-HUB-FREE-LIVE-WEBINARS-Not-ready-to-wait-for-a-date-MOBILE.jpg?v=20260628i");min-height:calc(100vw * 1000 / 600)}}
.section--webinars-notready-photo :is(.eyebrow, h2, .lead, p, a){color:#fff !important}

/* Resources page additional photo backgrounds */
.section--resources-leadmag-photo{background:#f6f1e6 url("../MUV-LEARING-HUB-RESOURCE-LIBRARY-Using-external-research-in-your-marketing.jpg?v=20260625zf") center/cover no-repeat}
@media (max-width:640px){.section--resources-leadmag-photo{background-image:url("../MUV-LEARING-HUB-RESOURCE-LIBRARY-Using-external-research-in-your-marketing-MOBILE.jpg?v=20260628f")}}

.section--resources-research-photo{background:#1c1f22 url("../MUV-LEARING-HUB-RESOURCE-LIBRARY-from-research-to-a-real-movement.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 525 / 1920)}
@media (max-width:640px){.section--resources-research-photo{background-image:url("../MUV-LEARING-HUB-RESOURCE-LIBRARY-from-research-to-a-real-movement-MOBILE.jpg?v=20260628i");min-height:calc(100vw * 1300 / 600)}}
.section--resources-research-photo :is(.eyebrow, h2, .lead, p, a){color:#fff !important}

/* CFG-academy page additional photo backgrounds */
.section--cfg-mission-photo{background:#94a187 url("../MUV-WORK-WITH-US-CFG-Get-the-free-guide.jpg?v=20260625zf") center/cover no-repeat;color:#fff}
@media (max-width:640px){.section--cfg-mission-photo{background-image:url("../MUV-WORK-WITH-US-CFG-Get-the-free-guide-MOBILE.jpg?v=20260628i")}}
.section--cfg-mission-photo :is(.eyebrow, h2, .lead, p, a){color:#fff !important}

.section--cfg-explore-photo{background:#f6f1e6 url("../MUV-WORK-WITH-US-CFG-Explore-before-you-enrol.jpg?v=20260625zf") center/cover no-repeat}
@media (max-width:640px){.section--cfg-explore-photo{background-image:url("../MUV-WORK-WITH-US-CFG-Explore-before-you-enrol-MOBILE.jpg?v=20260628i")}}

/* Services / Content Cleaning page additional photo backgrounds */
.section--services-creation-photo{background:#f6f1e6 url("../MUV-COURSES-CONTENT-CLEANING-Content-Creation-Marketing-Service.jpg?v=20260625zf") center/cover no-repeat}
@media (max-width:640px){.section--services-creation-photo{background-image:url("../MUV-COURSES-CONTENT-CLEANING-Content-Creation-Marketing-Service-MOBILE.jpg?v=20260628i")}}

.section--services-readtomato-photo{background:#1c1f22 url("../MUV-COURSES-CONTENT-CLEANING-content-services-backed-by-a-dedicated-content-team.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 525 / 1920)}
@media (max-width:640px){.section--services-readtomato-photo{background-image:url("../MUV-COURSES-CONTENT-CLEANING-content-services-backed-by-a-dedicated-content-team-MOBILE.jpg?v=20260628i");min-height:calc(100vw * 1000 / 600)}}

.section--services-grow-photo{background:#1c1f22 url("../MUV-COURSES-CONTENT-CLEANING-Where-to-next-grow-with-muvist.jpg?v=20260625zf") center/cover no-repeat;min-height:calc(100vw * 525 / 1920)}
@media (max-width:640px){.section--services-grow-photo{background-image:url("../MUV-COURSES-CONTENT-CLEANING-Where-to-next-grow-with-muvist-MOBILE.jpg?v=20260628i");min-height:calc(100vw * 1000 / 600)}}
.section--services-readtomato-photo :is(.eyebrow, h2, .lead, p, a),
.section--services-grow-photo :is(.eyebrow, h2, .lead, p, a){color:#fff !important}

/* Text-only partner-row brand mark (used where partner has no logo file in the canonical repo) */
.partner-row__logo--text{font-family:var(--ff-display);font-weight:700;letter-spacing:.04em;font-size:1.6rem;color:var(--ink);text-transform:none;line-height:1.1;margin-bottom:.8rem}

/* Webinars hero — push content down so "THE LEARNING HUB" eyebrow sits just below
   the chin of the woman on the left of the hero photo (per Marshall, 2026-06-24). */
.hero--photo-webinars .hero__inner{padding-top:calc(100vw * 240 / 1920)}
@media (max-width:640px){.hero--photo-webinars .hero__inner{padding-top:calc(100vw * 600 / 800)}}

/* 2026-06-24 batch: white text + anchor-top bg on multiple photo bands */

/* Webinars - Everything you need to know before you join: white text on photo bg */
.section--webinars-howitworks-photo > .container > .section-head :is(.eyebrow, h2, .lead){color:#fff !important}

/* Webinars - Stay in the loop: white text on photo bg */
.section--webinars-stayintheloop-photo :is(.eyebrow, h2, .lead, p){color:#fff !important}

/* Webinars - Not ready to wait for a date: full bg image (anchor top, image is 1920x725) */
.section--webinars-notready-photo{background-position:top center;min-height:calc(100vw * 725 / 1920)}
@media (max-width:640px){.section--webinars-notready-photo{background-position:top center}}

/* GBG - The Formula: white text on photo bg */
.section--gbg-formula-photo > .container > .section-head :is(.eyebrow, h2, .lead){color:#fff !important}

/* GBG - Felix band: anchor top so full bg shows (image refreshed to 1920x1105) + center content vertically/horizontally */
.section--gbg-felix-photo{background-position:top center;min-height:calc(100vw * 1105 / 1920);display:flex;align-items:center;justify-content:center}

/* GBG - Put GbG into practice: white text + correct min-height (image is 1920x600) */
.section--gbg-practice-photo :is(.eyebrow, h2, .lead, p){color:#fff !important}
.section--gbg-practice-photo{min-height:calc(100vw * 600 / 1920);background-position:top center}

/* Academy-charities Felix band: anchor top for full bg (image is 1920x525, already matches min-height) */
.aud__felix--photo-charities{background-position:top center}

/* Services - Content Creation: white text on section-head + left column of split; leave the .takeaway box and .btn alone */
.section--services-creation-photo > .container > .section-head :is(.eyebrow, h2, .lead, p),
.section--services-creation-photo > .container > .split > div:first-child :is(h3, p, li, strong){color:#fff !important}

/* 2026-06-24 batch-2 */

/* (a) Webinars 'Not ready to wait': push eyebrow + heading below woman's arm/watch */
.section--webinars-notready-photo{padding-top:calc(100vw * 350/1920)}

/* (c) cfg-academy 'Explore before you enrol' closing CTA: white text on photo bg */
.section--cfg-explore-photo :is(.eyebrow, h2, .lead, p){color:#fff !important}

/* (f) GBG Felix band: split columns become flex columns so the button stays at the bottom of each */
.section--gbg-felix-photo .split > div{display:flex;flex-direction:column}
.section--gbg-felix-photo .split > div > .btn-row,
.section--gbg-felix-photo .split > div:last-child > .btn-row--center{margin-top:auto}

/* (g) Academy-charities ribbon: push headline below grey-haired woman's chin */
.aud__ribbon--photo-charities{align-items:flex-start;padding-top:calc(100vw * 230/1920)}

/* (j) SME hero: narrow left text column ~15% so 'business' and 'they can' wrap */
.hero--photo-smes .hero__grid > div:first-child{max-width:85%}

/* (k) services 'Content services backed by a dedicated content team': anchor top + match image aspect (1920x900) */
.section--services-readtomato-photo{background-position:top center;min-height:calc(100vw * 900 / 1920)}
@media (max-width:640px){.section--services-readtomato-photo{background-position:top center}}

/* 2026-06-24 batch-3 */

/* (1) Resources lead-magnet section: white text on photo bg */
.section--resources-leadmag-photo :is(.eyebrow, h2, .lead, p){color:#fff !important}

/* (2) Resources closing CTA 'From research to a real movement': allow headline on a single line */
.section--resources-research-photo h2{white-space:nowrap}
@media (max-width:760px){.section--resources-research-photo h2{white-space:normal}}

/* 2026-06-24 batch-4 */

/* Services 'CONTENT SERVICES BACKED BY...' band: push content down so the
   'DELIVERED BY READTOMATO' eyebrow lines up with the top of the seated
   man's head (image is 1920x900) */
.section--services-readtomato-photo{padding-top:calc(100vw * 320/1920)}

/* GBG 'PUT GROWTH BY GIVING INTO PRACTICE' closing CTA: push content down so
   the 'WHERE TO NEXT' eyebrow lands below the green-jacket woman's chin
   (image is 1920x600) */
.section--gbg-practice-photo{padding-top:calc(100vw * 290/1920)}

/* Events 'WANT TO MEET BETWEEN EVENTS?' closing CTA: push content down so the
   'WHERE TO NEXT' eyebrow lands below the woman's chin (image is 1920x525) */
.section--events-next-photo{padding-top:calc(100vw * 220/1920)}

/* CFG-academy 'Get the free guide' section: photo bg + white text on left
   column (form on the right keeps its existing styling). Image 1920x1100. */
.section--cfg-getguide-photo{background:#f6f1e6 url("../MUV-WORK-WITH-US-CFG-Get-the-free-guide.jpg?v=20260625zf") center/cover no-repeat;background-position:top center;min-height:calc(100vw * 1100/1920)}
.section--cfg-getguide-photo > .container > .split > div:first-child :is(.eyebrow, h2, .lead, p, strong){color:#fff !important}

/* 2026-06-24 batch-5 */

/* CFG-academy 'Get the free guide' section: vertically center content on bg */
.section--cfg-getguide-photo{display:flex;align-items:center}
.section--cfg-getguide-photo > .container{width:100%}

/* Academy-charities Module-1 band: bump typography to match other photo bands
   (eyebrow + headline + paragraph were visibly smaller than the ribbon/felix
   bands directly above) */
.aud__mod1--photo-charities .aud__eyebrow{font-size:1.4rem;letter-spacing:.22em}
.aud__mod1--photo-charities .aud__mod1-h{font-size:3rem;max-width:24ch}
.aud__mod1--photo-charities p{font-size:1.1rem;max-width:60ch}

/* 2026-06-24 Policy pages (privacy/cookies/terms/accessibility/data-gdpr/
   disclaimers/policies) — only h1, h2, and body styles. Uniform sizing,
   balanced vertical rhythm, comfortable line-height on body copy. */
body[data-page="legal"] .section--cream{padding-block:clamp(48px,7vw,96px)}
body[data-page="legal"] .container--narrow{max-width:780px}
body[data-page="legal"] h1{font-family:var(--ff-display);font-weight:700;font-size:3.4rem;line-height:1.05;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);margin:0 0 1.5rem}
body[data-page="legal"] h2{font-family:var(--ff-display);font-weight:700;font-size:1.55rem;line-height:1.25;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);margin:2.4rem 0 .8rem}
body[data-page="legal"] p{font-family:var(--ff-body);font-size:1rem;line-height:1.65;color:var(--ink-2);margin:0 0 1rem}
body[data-page="legal"] ul,
body[data-page="legal"] ol{font-family:var(--ff-body);font-size:1rem;line-height:1.65;color:var(--ink-2);margin:0 0 1.1rem;padding-left:1.4em}
body[data-page="legal"] li{margin-bottom:.35rem}
body[data-page="legal"] li > ul,
body[data-page="legal"] li > ol{margin-top:.4rem}
body[data-page="legal"] .section--cream a:not(.btn):not(.btn--primary):not(.btn--sm){color:var(--red);text-decoration:underline}
body[data-page="legal"] .section--cream a:not(.btn):not(.btn--primary):not(.btn--sm):hover{text-decoration:none}
body[data-page="legal"] address{font-family:var(--ff-body);font-size:1rem;line-height:1.65;color:var(--ink-2);margin:0 0 1.1rem}
body[data-page="legal"] .form-note{margin:-.6rem 0 1.6rem;color:var(--ink-2);opacity:.75;font-style:italic}

/* 2026-06-24 — 55-character readable line length on body copy sitewide.
   Constrains paragraphs + leads + lists so no line wraps wider than ~55ch.
   Centered text columns keep their visual centering via margin-inline:auto.
   Headings, buttons, form fields, navigation and form-notes are unaffected. */
.section p:not(.form-note),
.section .lead,
.section ul:not(.checklist):not(.aud__pills):not(.pf__list):not(.pc__list):not(.lib-acc):not(.faq-grid):not(.formula):not(.mod__chips):not(.retain__years),
.section ol{
  max-width:55ch;
}
.section .center p:not(.form-note),
.section .center .lead,
.section p.center:not(.form-note),
.section .lead.center,
.section-head.center p,
.section-head.center .lead,
.container.center > p,
.container.center > .lead,
.container--narrow > p,
.container--narrow > .lead{
  max-width:55ch;margin-inline:auto;
}
/* Policy pages: cap body text + lists */
body[data-page="legal"] .section--cream p,
body[data-page="legal"] .section--cream ul,
body[data-page="legal"] .section--cream ol,
body[data-page="legal"] .section--cream address{
  max-width:55ch;
}
/* Hero leads in 2-column hero__grid keep their existing max-width:46ch */

/* Testimonials sitewide: center the constrained paragraph block within .tstack
   (the earlier 55ch max-width rule was left-aligning them by default). */
.tstmnl p,
.tstmnl figcaption{margin-inline:auto;max-width:55ch}
.tstack{align-items:center}

/* ---------- ReadTomato Case Studies — services.html ----------
   Each card stacks: eyebrow (red, full width) -> headline (full width)
   -> mid row (image-pair LEFT | subhead+stats RIGHT)
   -> foot row (quote LEFT | CTA RIGHT). */
.cs-section .section-head{margin-bottom:clamp(36px,5vw,64px)}
.cs-row{
  background:#fdfcf5;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:clamp(28px,4vw,44px);
  margin-bottom:clamp(28px,4vw,40px);
}
.cs-row:last-child{margin-bottom:0}
.cs-eyebrow{display:block;margin-bottom:.6rem}
.cs-headline{font-size:1.95rem;line-height:1.2;margin:0 0 1.4rem;max-width:none}
.cs-mid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:start;margin-bottom:1.4rem}
.cs-imgs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cs-imgs img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;display:block;box-shadow:0 6px 24px rgba(0,0,0,.08);transition:transform .25s ease}
.cs-imgs img:hover{transform:translateY(-3px)}
.cs-content{display:flex;flex-direction:column;gap:1rem}
.cs-sub{font-size:1.02rem;color:var(--ink-2);margin:0;max-width:none}
.cs-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.cs-stats li{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:10px;padding:.8rem .85rem;text-align:left}
.cs-stats b{display:block;font-family:var(--ff-display);font-weight:700;color:var(--red);font-size:1.3rem;line-height:1.1;margin-bottom:.25rem}
.cs-stats span{display:block;font-size:.76rem;color:var(--ink-2);line-height:1.3}
.cs-foot{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,auto);gap:clamp(20px,3vw,36px);align-items:center}
.cs-quote{margin:0;padding:0;font-style:italic;color:var(--ink-2);font-size:1rem;line-height:1.55}
.cs-quote cite{display:block;font-style:normal;font-size:.8rem;letter-spacing:.04em;text-transform:none;color:var(--ink-2);opacity:.75;margin-top:.5rem;text-align:center}
.cs-cta{display:flex;justify-content:flex-end}
@media (max-width:840px){
  .cs-mid,.cs-foot{grid-template-columns:1fr;gap:18px}
  .cs-cta{justify-content:flex-start}
  .cs-quote cite{text-align:left}
  .cs-stats{grid-template-columns:1fr 1fr}
  .cs-headline{font-size:1.35rem}
}
@media (max-width:480px){
  .cs-stats{grid-template-columns:1fr}
  .cs-imgs{grid-template-columns:1fr 1fr}
}

/* ============================================================
   MOBILE — universal alignment & layout pass (2026-06-25)
   Addresses Marshall's 12-point sweep for mobile-first cleanup:
   1.  Hero text/buttons bottom-anchored 75px from edge
   2.  No single-word orphan lines (text-wrap: pretty + balance)
   3.  Boxed content (takeaway, stats) center-aligned
   4.  Arrow-bullet lists stay LEFT-justified (carve-out)
   5.  Dot bullets centered inside their boxes
   6.  Pull-quote identifiers (cite) center-aligned
   7.  Case-study stat boxes centered, content centered
   8.  Awkward 2-word line breaks fixed via wrap rules
   9.  Form inputs + labels center-aligned
   10. Consent (radio + disclaimer) stacked + centered
   11. FAQ summary left-justified (consistent gaps)
   12. Photo-bg section content bottom-anchored 75px
   ============================================================ */
@media (max-width:640px){

  /* 2 + 8 — Prevent single-word orphans and balance heading lines */
  h1,h2,h3,h4,.hero h1,.cs-headline,.section-head h2,.section-head h3,.eyebrow{text-wrap:balance}
  p,.lead,.cs-sub,.cs-quote,.takeaway p,.section p:not(.form-note){text-wrap:pretty}

  /* 1 + 12 — Hero + photo-bg section content bottom-anchored 75px
     Heroes: flex column, content pushed to the bottom edge with breathing room.
     Photo-bg sections (any .section--*-photo): same treatment so content
     never sits over the focal subject of the image. */
  .hero{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:75px;padding-top:24px}
  .hero > .container{width:100%;flex:0 0 auto}
  .hero__inner{padding-top:0;padding-bottom:0}
  .hero__grid{padding-top:0;padding-bottom:0;align-items:end}
  /* keep the homepage hero's earlier video bottom-alignment intact */
  body[data-page="home"] .hero__grid{align-items:stretch}

  [class*="section--"][class*="-photo"]{
    display:flex;flex-direction:column;justify-content:flex-end;
    padding-bottom:75px;
  }
  [class*="section--"][class*="-photo"] > .container{width:100%}
  /* Override per-page top-offset hacks that pushed content DOWN from the top */
  .hero--charities-photo > .container,
  .section--stats-photo > .container,
  .section--gbg-photo > .container,
  .section--cta-photo-hp > .container{padding-top:0}

  /* 3 + 5 — Boxed content (takeaway etc.) centered inside the box.
     Dot-bullet lists centered, list-style-position:inside so the
     dot rides with the centered text instead of hanging in the gutter. */
  .takeaway{text-align:center}
  .takeaway ul,.takeaway ol{list-style-position:inside;padding-inline-start:0;text-align:center}
  .takeaway li{text-align:center}

  /* 4 — Arrow-bullet carve-out: KEEP LEFT-justified, max text per line.
     The .checklist family uses ::before icons, not native list markers,
     so list-style overrides don't change the arrow position. */
  .checklist,.checklist--arrow,.checklist--orange,.checklist--green{
    text-align:left;display:inline-block;max-width:100%;
  }
  .checklist li,.checklist--arrow li,.checklist--orange li,.checklist--green li{
    text-align:left;text-wrap:pretty;
  }

  /* 6 — Pull-quote identifiers (cite) center-aligned, sitewide */
  blockquote cite,.cs-quote cite{display:block;text-align:center;margin-inline:auto}
  /* Override the 840-breakpoint left-align rule for cs-quote cite */
  .cs-foot .cs-quote cite{text-align:center}

  /* 7 — Case-study stat boxes: centered content AND boxes centered in card.
     Red number (b) + sub-label stack and center. Boxes constrained so the
     1-col layout doesn't span edge-to-edge. */
  .cs-stats{justify-content:center;margin-inline:auto;max-width:340px}
  .cs-stats li{text-align:center;max-width:300px;margin-inline:auto;width:100%}
  .cs-stats b{text-align:center}
  .cs-stats span{text-align:center}
  /* CS foot: quote on top, CTA centered below */
  .cs-foot{text-align:center}
  .cs-cta{justify-content:center}
  .cs-quote{text-align:center}

  /* 9 — Form inputs + labels center-aligned */
  .field{text-align:center}
  .field label{text-align:center}
  .field input,.field select,.field textarea{text-align:center}
  .field input::placeholder,.field textarea::placeholder{text-align:center}
  .field select{text-align-last:center}

  /* 10 — Consent (radio/checkbox + disclaimer) stacked and centered.
     Was flex row with checkbox left + text wrapping right. */
  .consent{flex-direction:column;align-items:center;text-align:center;gap:.5rem}
  .consent input{margin-top:0;margin-bottom:.2rem}
  .consent span{text-align:center}

  /* 11 — FAQ summaries left-justified so closed/short summaries don't
     visually center-orphan compared to wrapped longer ones. Equal vertical
     rhythm between rows is already controlled by .faq-col gap; this fixes
     the perceptual gap discrepancy. */
  details.faq > summary{text-align:left}
  details.faq[open] > summary{text-align:left}
  .faq__body{text-align:left}

  /* CTA buttons inside boxes/sections: center as default (already mostly
     done globally), but ensure btn-row inside boxed contexts doesn't go
     left-jammed. */
  .cs-row .btn-row,.takeaway .btn-row{justify-content:center}
}

/* ============================================================
   MOBILE — academy.html targeted fixes (2026-06-25)
   1.  Pick-Your-Route cards: M logo stacks ABOVE eyebrow, centered
   2.  Four modules cards: one per row, full-width on mobile
   3.  Module 1 pricing bullets (.pf__list): center-justified
   4.  FAQ grid: equal row-gap so cross-column gaps match intra-column
   5.  "Still weighing it up?" section: content 200px from bottom
   ============================================================ */
@media (max-width:640px){

  /* 1 — Route card head: stack icon above eyebrow, both centered */
  .card--route__head{
    flex-direction:column;align-items:center;text-align:center;
    gap:.5rem;margin-bottom:.4rem;
  }
  .card--route__head img{height:42px;margin-inline:auto}
  .card--route .eyebrow{display:block;text-align:center;margin-inline:auto}
  .card--route h2{text-align:center}
  .card--route p{text-align:center}

  /* 2 — Modules: one full-width card per row.
     Overrides the .lib-grid--2col rule that pinned them at 2-up. */
  .lib-grid--2col > *{width:100%}

  /* 3 — Module 1 pricing card bullets: center-justified.
     The mobile fallback at .pf__list (line ~541) had it left-aligned. */
  .pf__list{align-items:center;text-align:center}
  .pf__list li{padding-left:0;text-align:center}
  .pf__list li::before{position:static;margin-right:.4rem}

  /* 4 — FAQ grid equal vertical rhythm.
     The 1-col layout below 680px stacked .faq-col blocks but the cross-
     column row-gap inherited from grid defaults made the seam between
     the last item of col1 and the first item of col2 bigger than the
     intra-col gap. Force a uniform row-gap matching .faq-col's gap. */
  .faq-grid{row-gap:.85rem}

  /* 5 — "Where to next / Still weighing it up?" section needs 200px of
     breathing room from the bottom (the universal 75px rule was too tight
     against the dense people-mix bg image here). */
  .section--academy-next-photo{padding-bottom:200px}
}

/* ============================================================
   MOBILE — academy-charities.html: bottom-anchor content 150px
   for the 3 photo-bg sections (.aud__ribbon, .aud__felix, .aud__mod1
   variants with the --photo-charities modifier). These don't match
   the [class*="section--"][class*="-photo"] selector used in the
   universal 75px rule, so they need their own anchor.
   ============================================================ */
@media (max-width:640px){
  .aud__ribbon--photo-charities,
  .aud__felix--photo-charities,
  .aud__mod1--photo-charities{
    display:flex;flex-direction:column;justify-content:flex-end;
    padding-top:24px;padding-bottom:150px;
  }
  .aud__ribbon--photo-charities > .container,
  .aud__felix--photo-charities > .container,
  .aud__mod1--photo-charities > .container{width:100%}
}

/* ============================================================
   MOBILE — academy-smes.html targeted fixes (2026-06-25)
   1. Hero centered vertically (override universal bottom-anchor)
   2. .aud__pills (green-arrow list) text left-justified
   3. .aud__ribbon--photo-smes content 150px from bottom
   4. .section--smes-course-photo content 150px from bottom
   ============================================================ */
@media (max-width:640px){
  /* 1 — Hero on data-page="academy" + .hero--photo-smes: centre vertically.
     The universal mobile rule for .hero is justify-content:flex-end with
     75px padding-bottom; this overrides only on the SMEs hero.
     Also: the desktop rule at line ~1593 sets max-width:85% on the inner
     div without margin auto, which left-pins it. Re-center horizontally. */
  body[data-page="academy"] .hero--photo-smes,
  body[data-page="academy"] .hero--photo-academy,
  body[data-page="academy"] .hero--photo-charities,
  body[data-page="courses"] .hero{
    justify-content:center;padding-top:24px;padding-bottom:24px;
  }
  body[data-page="academy"] .hero--photo-smes .hero__grid > div:first-child,
  body[data-page="academy"] .hero--photo-academy .hero__grid > div:first-child,
  body[data-page="academy"] .hero--photo-charities .hero__grid > div:first-child,
  body[data-page="courses"] .hero .hero__grid > div:first-child{
    max-width:none;margin-inline:auto;
  }

  /* 2 — Arrow-pill list (.aud__pills): left-justify text. The icon sits
     absolutely at left:1rem so left-align keeps a clean visual edge. */
  .aud__pills{text-align:left}
  .aud__pills li{text-align:left}

  /* 3 — Stop Renting Attention ribbon: 150px from bottom */
  .aud__ribbon--photo-smes{
    display:flex;flex-direction:column;justify-content:flex-end;
    padding-top:24px;padding-bottom:150px;
  }
  .aud__ribbon--photo-smes > .container{width:100%}

  /* 4 — See the Course in Full (Where to Next): 150px from bottom.
     This section IS [class*="section--"][class*="-photo"], so it already
     picks up the universal 75px rule; bump padding-bottom to 150px. */
  .section--smes-course-photo{padding-bottom:150px}
}

/* ============================================================
   MOBILE — academy-smes.html: stack the module tabs vertically
   so all 4 modules are visible (the horizontal-scroll strip
   was hiding Module 04 off-screen on phones).
   ============================================================ */
@media (max-width:640px){
  .mod__tabs{
    flex-direction:column;flex-wrap:nowrap;overflow-x:visible;
    border-bottom:0;
  }
  .mod__tab{
    min-width:0;width:100%;flex-direction:row;align-items:center;
    justify-content:flex-start;gap:.7rem;
    border-right:0;border-top:0;border-bottom:1px solid var(--line);
    padding:.85rem 1rem;text-align:left;
  }
  .mod__tab:last-child{border-bottom:0}
  .mod__tab.is-on{background:#fff}
}

/* ============================================================
   MOBILE — services.html targeted fixes (2026-06-25)
   1+2. .takeaway boxes: bullet list cleanly center-justified
        (the universal list-style:inside left awkward bullet
        floats on wrapped lines).
   3.   Case-study stat boxes (.cs-stats): red number AND the
        identifier label below each get +50% font size.
   ============================================================ */
@media (max-width:640px){
  /* 1 + 2 — Takeaway ('Key benefits for your organisation') bullets
     centered, each li centered. Black-dot prefix removed; a small middle-dot
     separator appears BETWEEN items (above each item except the first). */
  .takeaway ul,.takeaway ol{
    list-style:none;padding:0;margin-inline:auto;
    display:flex;flex-direction:column;align-items:center;gap:1.1rem;
    text-align:center;max-width:none;
  }
  .takeaway ul li,.takeaway ol li{
    padding-left:0;text-align:center;max-width:92%;
  }
  .takeaway ul li::before,.takeaway ol li::before{content:none}
  .takeaway ul li:not(:first-child)::before,
  .takeaway ol li:not(:first-child)::before{
    content:"·";
    display:block;
    color:var(--ink-2);
    line-height:.3;
    margin-bottom:.9rem;
  }

  /* Same separator-dot pattern for other black-dot lists on mobile:
     .pf__list (plan-feature bullets) + any generic section <ul> that
     would otherwise render with the default disc marker. Custom-marker
     lists (.checklist, .price__list, .aud__pills, etc.) are excluded. */
  .pf__list{
    list-style:none;padding:0;
    display:flex;flex-direction:column;align-items:center;gap:1.1rem;
    text-align:center;
  }
  .pf__list li{padding-left:0;text-align:center;max-width:92%;position:relative}
  .pf__list li::before{content:none !important}
  .pf__list li:not(:first-child)::before{
    content:"·" !important;
    display:block !important;
    position:static !important;
    color:var(--ink-2) !important;
    line-height:.3 !important;
    margin-bottom:.9rem !important;
  }
  section ul:not(.nav__menu):not(.nav__drop):not(.aud__pills):not(.checklist):not(.price__list):not(.pf__list):not(.reslist):not(.cs-stats):not(.mod__chips),
  main  ul:not(.nav__menu):not(.nav__drop):not(.aud__pills):not(.checklist):not(.price__list):not(.pf__list):not(.reslist):not(.cs-stats):not(.mod__chips){
    list-style:none;padding:0;
    display:flex;flex-direction:column;align-items:center;gap:1.1rem;
    text-align:center;
  }
  section ul:not(.nav__menu):not(.nav__drop):not(.aud__pills):not(.checklist):not(.price__list):not(.pf__list):not(.reslist):not(.cs-stats):not(.footer__policies):not(.mod__chips) > li,
  main  ul:not(.nav__menu):not(.nav__drop):not(.aud__pills):not(.checklist):not(.price__list):not(.pf__list):not(.reslist):not(.cs-stats):not(.footer__policies):not(.mod__chips) > li{
    padding-left:0;text-align:center;max-width:92%;
  }
  section ul:not(.nav__menu):not(.nav__drop):not(.aud__pills):not(.checklist):not(.price__list):not(.pf__list):not(.reslist):not(.cs-stats):not(.footer__policies):not(.mod__chips) > li:not(:first-child)::before,
  main  ul:not(.nav__menu):not(.nav__drop):not(.aud__pills):not(.checklist):not(.price__list):not(.pf__list):not(.reslist):not(.cs-stats):not(.footer__policies):not(.mod__chips) > li:not(:first-child)::before{
    content:"·";
    display:block;
    color:var(--ink-2);
    line-height:.3;
    margin-bottom:.9rem;
  }
}

/* ============================================================
   MOBILE — webinar-banner avatar pair: tight-center even inside
   <section> (universal section img { margin-inline:auto } was
   pushing the two avatar photos to opposite ends of their flex
   container, e.g. on services.html).
   ============================================================ */
@media (max-width:640px){
  .webinar-banner__avatars img{margin:0 !important}
}

/* ============================================================
   MOBILE — webinars 'Not ready to wait for a date?' band:
   show the FULL mobile image (no cropping) with content overlaid
   150px from the bottom. background-size:100% auto preserves the
   image's natural aspect; background-position:bottom keeps it
   anchored so any extra height is dark sage above the image.
   ============================================================ */
@media (max-width:640px){
  .section--webinars-notready-photo{
    background-size:100% auto !important;
    background-position:bottom center !important;
    background-repeat:no-repeat;
    min-height:calc(100vw * 1000 / 600);
    padding-bottom:150px !important;
  }
}

/* ============================================================
   MOBILE — Hero images: show 100% vertically (no horizontal crop).
   Was background-size:cover which scales image to fill BOTH dims,
   cropping horizontally when content makes the section taller than
   image aspect. Switch to background-size:100% auto so the image
   spans full viewport width at its natural aspect, anchored at top.
   Content (eyebrow / h1 / lead / buttons) still overlays via the
   universal mobile flex-end + padding-bottom rules.
   ============================================================ */
@media (max-width:640px){
  .hero--photo-events,
  .hero--photo-resources,
  .hero--photo-webinars,
  .hero--photo-cfg,
  .hero--photo-partnerships,
  .hero--photo-academy,
  .hero--photo-charities,
  .hero--photo-smes,
  body[data-page="academy"] .hero--photo-academy,
  body[data-page="academy"] .hero--photo-charities,
  body[data-page="academy"] .hero--photo-smes,
  body[data-page="home"] .hero--charities-photo,
  body[data-page="about"] .hero,
  body[data-page="gbg"] .hero,
  body[data-page="courses"] .hero{
    background-size:100% auto !important;
    background-position:top center !important;
    background-repeat:no-repeat !important;
  }
}

/* ============================================================
   MOBILE — Hero bg color matched to each image bottom edge so
   the section extends seamlessly when content makes it taller
   than the image (replaces the sage #94a187 default that was
   visible below the image on mobile).
   ============================================================ */
@media (max-width:640px){
  .hero--photo-academy{background-color:#65727b !important}
  .hero--photo-charities{background-color:#20201f !important}
  .hero--photo-smes{background-color:#020f05 !important}
  .hero--photo-events{background-color:#608082 !important}
  .hero--photo-resources{background-color:#3d2409 !important}
  .hero--photo-webinars{background-color:#98908d !important}
  .hero--photo-cfg{background-color:#57584a !important}
  .hero--photo-partnerships{background-color:#5e4a2f !important}
  body[data-page="home"] .hero--charities-photo{background-color:#061106 !important}
  body[data-page="about"] .hero{background-color:#7b6048 !important}
  body[data-page="gbg"] .hero{background-color:#685f4e !important}
  body[data-page="courses"] .hero{background-color:#4f575b !important}
}

/* ============================================================
   DESKTOP — cfg-academy.html pricing pair: center as a unit.
   .pc-grid is shared with academy.html which has 3 cards, so the
   default repeat(3,1fr) made the 2 CFG cards sit in the first
   two columns and left-pin instead of centering. Override on
   data-page="work" (cfg-academy is the only page that combines
   data-page="work" with .pc-grid). 880px stack rule below still
   collapses to 1-col on mobile.
   ============================================================ */
@media (min-width:881px){
  body[data-page="work"] .pc-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    max-width:920px;margin-inline:auto;
  }
}

/* ============================================================
   MOBILE — cfg-academy 'Explore before you enrol' band:
   show the FULL mobile image (no cropping), content 150px above
   the section bottom. Mirror of the webinars 'Not ready' fix.
   bg-color sampled from image bottom (#484744 - dark earth tone)
   so the section extends seamlessly when content makes it taller.
   ============================================================ */
@media (max-width:640px){
  .section--cfg-explore-photo{
    background-size:100% auto !important;
    background-position:bottom center !important;
    background-repeat:no-repeat;
    background-color:#484744 !important;
    min-height:calc(100vw * 1000 / 600);
    padding-bottom:150px !important;
  }
}

/* ============================================================
   MOBILE — About 'What we believe / How we work' band:
   collapse the 2-column layout to a single column. The inline
   style on the wrapper sets column-count:2 and text-align:left;
   override on mobile so paragraphs stack 1,2,3,4 sequentially
   and the whole block reads centered.
   ============================================================ */
@media (max-width:640px){
  .section--about-believe-photo > .container > div[style*="column-count"]{
    column-count:1 !important;
    text-align:center !important;
  }
  .section--about-believe-photo > .container > div[style*="column-count"] > p{
    text-align:center !important;
  }
}

/* ============================================================
   MOBILE — Main nav drawer: center items vertically + horizontally.
   Font sizes are governed by the html=70% root scale and the desktop
   .nav__link / .nav__drop a values cascading down — no font-size
   overrides here. */
@media (max-width:860px){
  .nav__menu{
    align-items:center !important;
    justify-content:center !important;
    text-align:center;
    gap:.6rem !important;
  }
  .nav__menu > li{width:100%;max-width:520px;text-align:center}
  .nav__menu .nav__link{
    text-align:center;
    justify-content:center;
    padding:.5em .6em !important;
    border-bottom:0 !important;
  }
  /* Restore the desktop-style ▾ arrow on mobile dropdown parents,
     placed inline right after the label so the text stays put. */
  .nav__menu .has-drop > .nav__link::after{
    content:"▾";
    display:inline-block;
    margin-left:.4em;
    opacity:.7;
  }
  .nav__menu .has-drop.is-open > .nav__link::after{transform:rotate(180deg)}
  .nav__menu .nav__drop{
    text-align:center;
    padding:.4rem 0 .6rem !important;
    border-bottom:0 !important;
  }
  .nav__menu .nav__drop a{text-align:center}
  .nav__menu .nav__drop small{text-align:center}
  .nav__menu .nav__cta{margin:1rem 0 0 !important;display:flex;justify-content:center}
  /* Mobile dropdowns are collapsed by default; tap-to-expand handled in site.js */
  .nav__menu .has-drop > .nav__drop{display:none}
  .nav__menu .has-drop.is-open > .nav__drop{display:block}
  .nav__menu .has-drop > .nav__link{cursor:pointer}
}