/* sizing guard for the width/height attributes added in the production port */
img{height:auto}
/* the footer newsletter got a live status line; it must not take space while empty */
.foot-news .msg:empty{display:none}
/* contact form honeypot: out of sight, still in the DOM for bots to trip over */
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}


/* ============================================================
   Menno Henselmans homepage redesign (VOM)
   Full dark edition, blue accent. Minimum readable text: 16px.
   ============================================================ */
:root{
  --bg:#0a0a0c; --bg-alt:#0f0f13; --bg-soft:#101015;
  --surface:#141519; --surface-2:#1b1d23; --surface-hi:#202229;
  --ink:#f4f5f7; --ink-soft:#c8cdd6; --ink-mute:#a8adb5;
  --accent:#2f86f0; --accent-2:#6aa3ee; --accent-deep:#1f5fc0;
  --accent-btn:#2674d2; --accent-btn-hi:#3a8bef;
  --link:#9cc4f7;
  --warm:#f5b929; --success:#34d27b; --tp:#00b67a;
  --border:rgba(255,255,255,.09); --border-2:rgba(255,255,255,.17);
  --r-btn:9px; --r-card:14px; --r-lg:20px; --r-pill:999px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --container:1180px;
  --shadow-card:0 1px 0 rgba(255,255,255,.03), 0 18px 44px rgba(0,0,0,.45);
  --shadow-hi:0 2px 0 rgba(255,255,255,.04), 0 30px 70px rgba(0,0,0,.6);
  --glow:0 0 0 1px rgba(47,134,240,.25), 0 18px 60px rgba(31,95,192,.35);
}
*{box-sizing:border-box}
html{overflow-x:clip; scroll-behavior:smooth; font-size:16px}
img,svg{max-width:100%; display:block}
body{margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:1.0625rem; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip}
h1,h2,h3,h4{font-family:'Hanken Grotesk',sans-serif; color:#fff; line-height:1.08; letter-spacing:-.02em; margin:0; text-wrap:balance}
h1{font-size:clamp(2.7rem, 1.9rem + 3.4vw, 4.4rem); font-weight:800; letter-spacing:-.025em}
h2{font-size:clamp(2rem, 1.4rem + 2.2vw, 2.9rem); font-weight:700}
h3{font-size:1.3rem; font-weight:700; letter-spacing:-.01em}
p{margin:0; text-wrap:pretty}
a{color:var(--link); text-decoration:none}
strong{font-weight:700}
.tnum{font-variant-numeric:tabular-nums lining-nums}
.container{max-width:var(--container); margin:0 auto; padding:0 24px}
.hero-in>*,.app-in>*,.course-in>*,.email-in>*,.router>*,.steps>*,.rev-grid>*,.feats>*,.lib-grid>*,.proof-strip>*{min-width:0}
.section{padding:88px 0}
.section--alt{background:var(--bg-alt)}
/* --bg and --bg-alt are five RGB units apart, so where the alternation collides
   the two sections read as one long unbroken block with a big blank gap in the
   middle. #career and #certification do exactly that. Draw the section break
   wherever two neighbours land on the same background. The proof strips are
   excluded on purpose: they are meant to continue the section above them. */
.section--alt + .section--alt:not(.proofblock),
.section:not(.section--alt) + .section:not(.section--alt):not(.proofblock){border-top:1px solid var(--border)}
@media(max-width:760px){.section{padding:48px 0}}
.eyebrow{display:inline-flex; align-items:center; gap:11px; font-size:1rem; font-weight:600; color:var(--accent-2); margin-bottom:20px}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--accent); border-radius:2px}
.hl{position:relative; color:#fff; white-space:nowrap; background:linear-gradient(100deg,var(--accent-2),#a9c9f5 55%,var(--accent-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hl::after{content:""; position:absolute; left:0; right:0; bottom:-.06em; height:.1em; border-radius:99px; background:linear-gradient(90deg,var(--accent-deep),var(--accent),#7db0f4); opacity:.95}

/* Trustpilot mark */
.tp{display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--ink-soft); font-size:1rem; white-space:nowrap}
.tp-sq{display:inline-flex; width:18px; height:18px; align-items:center; justify-content:center; flex:none}
.tp-sq svg{width:18px; height:18px; fill:var(--tp)}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px; padding:14px 26px; font-family:'Inter',sans-serif; font-weight:600; font-size:1.0625rem; border-radius:var(--r-btn); border:1.5px solid transparent; cursor:pointer; transition:transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); text-decoration:none}
.btn .arw{transition:transform .18s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.btn-primary{background:var(--accent-btn); color:#fff; box-shadow:0 10px 30px rgba(38,116,210,.35)}
.btn-primary:hover{background:var(--accent-btn-hi); transform:translateY(-2px); box-shadow:0 16px 40px rgba(38,116,210,.5)}
.btn-primary:active{transform:translateY(0); box-shadow:none}
.btn-primary:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.btn-ghost{background:transparent; color:#fff; border-color:var(--border-2)}
.btn-ghost:hover{border-color:var(--accent-2); background:rgba(255,255,255,.04)}
.btn-ghost:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.textlink{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--accent-2); font-size:1rem}
.textlink:hover{color:#bcd6fb; text-decoration:underline; text-underline-offset:3px}
.textlink .arw{transition:transform .18s var(--ease)}
.textlink:hover .arw{transform:translateX(3px)}
.textlink:focus-visible,.brand:focus-visible,.hero-scroll:focus-visible,.lcard:focus-visible,.pcard:focus-visible{outline:3px solid var(--accent-2); outline-offset:3px; border-radius:5px}
.skip{position:absolute; left:-9999px; top:0; z-index:200}
.skip:focus{left:16px; top:16px; padding:12px 18px; background:#fff; color:#0a0a0c; border-radius:var(--r-btn); font-weight:700}

/* NAV */
.nav{position:sticky; top:0; z-index:80; background:rgba(10,10,12,.72); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid transparent; transition:border-color .2s, background .2s, box-shadow .2s}
.nav.scrolled{border-bottom-color:var(--border); background:rgba(10,10,12,.92); box-shadow:0 10px 30px rgba(0,0,0,.5)}
.nav-in{display:flex; align-items:center; gap:14px; height:72px; max-width:var(--container); margin:0 auto; padding:0 24px; transition:height .2s var(--ease)}
.nav.scrolled .nav-in{height:62px}
.brand{display:inline-flex; align-items:center; font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:1.28rem; color:#fff; letter-spacing:-.02em; white-space:nowrap}
.brand span{color:var(--accent-2)}
.brand-logo{height:40px; width:auto; display:block}
.nav.scrolled .brand-logo{height:34px; transition:height .2s var(--ease)}
.drawer .brand-logo{height:26px}
.footer .brand-logo{height:40px}
.nav-links{display:flex; align-items:center; flex:0 0 auto; gap:0; margin:0 auto 0 10px; padding:0; list-style:none}
.nav-links>li{position:relative}
.nav-links .has-menu{display:flex; align-items:stretch}
.nav-links a,.nav-links .menu-btn{display:inline-flex; align-items:center; gap:6px; color:var(--ink-soft); font-family:inherit; font-weight:500; font-size:1rem; padding:10px 11px; border-radius:9px; background:none; border:none; cursor:pointer; white-space:nowrap; transition:background .15s, color .15s}
.nav-links a:hover,.nav-links .menu-btn:hover,.nav-links .menu-btn[aria-expanded="true"]{background:rgba(255,255,255,.06); color:#fff}
.nav-links a:focus-visible,.menu-btn:focus-visible{outline:2px solid var(--accent-2); outline-offset:1px}
.menu-btn .chev{transition:transform .2s var(--ease)}
.has-menu:hover .menu-btn .chev,.menu-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav-links .menu-link{padding-right:5px; border-radius:9px 0 0 9px}
.nav-links .menu-toggle{padding-left:2px; padding-right:10px; margin-left:0; gap:0; border-radius:0 9px 9px 0}
.has-menu:hover .menu-link,.has-menu:hover .menu-toggle,.has-menu:focus-within .menu-link,.has-menu:focus-within .menu-toggle{background:rgba(255,255,255,.06); color:#fff}
.mega{position:absolute; top:calc(100% + 4px); left:0; transform:translateY(6px); min-width:240px; background:#101116; border:1px solid var(--border-2); border-radius:14px; padding:10px; box-shadow:var(--shadow-hi); opacity:0; visibility:hidden; transition:opacity .16s var(--ease), transform .16s var(--ease); z-index:90}
.mega::before{content:""; position:absolute; top:-12px; left:0; right:0; height:12px}
.mega.wide{min-width:320px}
.mega--right{left:auto; right:0}
.has-menu:hover .mega,.has-menu:focus-within .mega,.mega.open{opacity:1; visibility:visible; transform:translateY(0)}
.mega a{display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:11px 13px; border-radius:9px; color:var(--ink-soft); font-size:1rem; font-weight:500; text-align:left}
.mega a:hover{background:rgba(255,255,255,.06); color:#fff}
.mega a small{color:var(--ink-mute); font-size:1rem; font-weight:400}
.mega .lang-row{display:grid; grid-template-columns:1fr 1fr; gap:2px}
.mega .mega-sep{height:1px; background:var(--border); margin:7px 6px}
.nav-cta{margin-left:6px; white-space:nowrap}
.nav-burger{display:none; align-items:center; justify-content:center; width:46px; height:46px; margin-left:auto; border:1px solid var(--border-2); border-radius:10px; background:rgba(255,255,255,.04); color:#fff; cursor:pointer}
.nav-burger:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
@media(max-width:1180px){.nav-links,.nav-cta,.nav-search-btn{display:none} .nav-burger{display:inline-flex}}

/* NAV SEARCH */
.nav-search-btn{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex:none; border:1px solid var(--border-2); border-radius:10px; background:rgba(255,255,255,.04); color:var(--ink-soft); cursor:pointer; transition:color .15s, border-color .15s, background .15s}
.nav-search-btn:hover,.nav-search-btn[aria-expanded="true"]{color:#fff; border-color:var(--accent-2); background:rgba(255,255,255,.06)}
.nav-search-btn:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.nav-search{position:absolute; left:0; right:0; top:100%; z-index:85; background:rgba(10,10,12,.97); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--border-2); box-shadow:0 18px 44px rgba(0,0,0,.5); padding:18px 0}
.nav-search[hidden]{display:none}
.nav-search-form{display:flex; align-items:center; gap:12px; max-width:var(--container); margin:0 auto; padding:0 24px}
.nss-field{position:relative; flex:1; min-width:0; display:flex}
.nss-field .nss-ic{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--ink-mute); display:flex; pointer-events:none}
.nss-field input{flex:1; min-width:0; font-family:inherit; font-size:1.0625rem; padding:15px 16px 15px 46px; border-radius:var(--r-btn); border:1.5px solid var(--border-2); background:rgba(255,255,255,.06); color:#fff}
.nss-field input::placeholder{color:var(--ink-mute)}
.nss-field input:focus-visible{outline:3px solid var(--accent-2); outline-offset:1px; border-color:var(--accent-2)}
.nav-search-form .btn{flex:none}
.nss-close{flex:none; width:46px; height:46px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border-2); border-radius:10px; background:rgba(255,255,255,.04); color:var(--ink-soft); cursor:pointer; transition:color .15s, border-color .15s}
.nss-close:hover{color:#fff; border-color:var(--accent-2)}
.nss-close:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.drawer-search{display:flex; margin:6px 0 4px}
.mcta-search{flex:none; width:52px; min-height:50px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border-2); border-radius:var(--r-btn); background:rgba(255,255,255,.06); color:#fff; cursor:pointer}
.mcta-search:hover{border-color:var(--accent-2)}
.mcta-search:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
@media(max-width:600px){.nav-search{position:fixed; top:0; z-index:150; padding:14px 0 16px; box-shadow:0 18px 50px rgba(0,0,0,.7)} .nav-search-form .btn{display:none}}
.drawer{position:fixed; inset:0 0 0 auto; width:min(420px,92vw); background:#0c0d11; border-left:1px solid var(--border-2); transform:translateX(100%); transition:transform .26s var(--ease), visibility .26s; z-index:120; display:flex; flex-direction:column; padding:20px 20px 28px; overflow-y:auto; visibility:hidden}
.drawer.open{transform:none; visibility:visible}
.drawer-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.drawer-close{width:44px; height:44px; border-radius:10px; border:1px solid var(--border-2); background:rgba(255,255,255,.04); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center}
.drawer-close:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.drawer .acc{border-top:1px solid var(--border); display:flex; flex-wrap:wrap; align-items:center}
.drawer .acc-link{flex:1 1 auto; min-width:0; color:#fff; font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:1.12rem; padding:16px 4px; text-decoration:none}
.drawer .acc-link:hover{color:var(--accent-2)}
.drawer .acc-q{flex:0 0 auto; width:auto; text-align:left; background:none; border:none; color:#fff; font-family:'Hanken Grotesk'; font-weight:700; font-size:1.12rem; padding:16px 8px; display:flex; justify-content:center; align-items:center; cursor:pointer}
.drawer .acc-q .pm{transition:transform .2s var(--ease); color:var(--accent-2)}
.drawer .acc-q[aria-expanded="true"] .pm{transform:rotate(45deg)}
.drawer .acc-p{flex-basis:100%; max-height:0; overflow:hidden; transition:max-height .26s var(--ease)}
.drawer .acc-p a{display:block; padding:10px 8px; color:var(--ink-soft); font-size:1rem; font-weight:500}
.drawer .acc-p a:hover{color:#fff}
.drawer .direct{display:block; color:#fff; font-family:'Hanken Grotesk'; font-weight:700; font-size:1.12rem; padding:16px 4px; border-top:1px solid var(--border)}
.drawer .btn{margin-top:18px; width:100%}
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.6); opacity:0; visibility:hidden; transition:opacity .26s; z-index:110}
.scrim.open{opacity:1; visibility:visible}

/* HERO */
.hero{position:relative; overflow:hidden; background:var(--bg)}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background:radial-gradient(ellipse 52% 48% at 82% 12%, rgba(47,134,240,.22), transparent 60%), radial-gradient(ellipse 46% 50% at 4% 96%, rgba(31,95,192,.16), transparent 62%)}
.hero::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:54px 54px; mask-image:radial-gradient(ellipse 80% 75% at 55% 35%,#000 30%,transparent 78%); -webkit-mask-image:radial-gradient(ellipse 80% 75% at 55% 35%,#000 30%,transparent 78%)}
.hero-in{position:relative; z-index:1; display:grid; grid-template-columns:1.16fr .84fr; gap:56px; align-items:center; padding:78px 24px 70px}
.hero-eyebrow{margin-bottom:22px}
.hero h1{margin-bottom:22px}
.hero-sub{font-size:1.28rem; color:var(--ink-soft); max-width:40ch; margin-bottom:30px}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:30px}
.hero-cred{display:flex; flex-wrap:wrap; gap:10px 20px; font-size:1rem; color:var(--ink-mute); border-top:1px solid var(--border); padding-top:20px; max-width:46ch}
.hero-cred span{display:inline-flex; align-items:center; gap:8px}
.hero-cred .dot{width:6px; height:6px; border-radius:50%; background:var(--accent-2); flex:none}
.hero-scroll{display:none; position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:2; align-items:center; gap:9px; font-weight:600; font-size:1rem; color:var(--ink-soft); text-decoration:none; white-space:nowrap}
.hero-scroll:hover{color:#fff}
.hero-scroll svg{animation:bob 1.8s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.hero-media{position:relative}
.hero-frame{position:relative; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-hi); background:#15161a}
.hero-frame::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(8,8,11,.78)); pointer-events:none}
.hero-photo{width:100%; height:610px; object-fit:cover; object-position:50% 14%; filter:contrast(1.04) saturate(1.02)}
.hero-glow{position:absolute; inset:-10% -8% -8% -10%; z-index:-1; background:radial-gradient(ellipse at 60% 40%, rgba(47,134,240,.5), transparent 62%); filter:blur(40px); opacity:.65; animation:pulse 6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:.8}}
.hero-chip{position:absolute; left:18px; bottom:18px; right:18px; z-index:2; background:rgba(16,17,22,.72); backdrop-filter:blur(10px); border:1px solid var(--border-2); border-radius:14px; padding:14px 16px; display:flex; align-items:center; gap:13px}
.hero-chip .ic{width:42px; height:42px; border-radius:11px; background:var(--accent-btn); color:#fff; display:flex; align-items:center; justify-content:center; flex:none}
.hero-chip b{display:block; font-size:1.02rem; color:#fff}
.hero-chip small{color:var(--ink-mute); font-size:1rem; line-height:1.35; display:block}
.hero-stat{position:absolute; top:auto; bottom:120px; right:-18px; z-index:2; background:rgba(16,17,22,.9); backdrop-filter:blur(10px); border:1px solid var(--border-2); border-radius:13px; padding:13px 18px; display:flex; flex-direction:column; align-items:center; gap:7px; box-shadow:var(--shadow-card)}
.hero-stat .stars svg{width:18px; height:18px}
.hero-stat .tp{font-size:1.02rem; justify-content:center; color:#fff}
.hero-stat .hs-count{font-size:1rem; color:var(--ink-mute)}
.hero-stat .hs-count b{color:var(--ink-soft); font-weight:700}
@media(max-width:920px){.hero-in{grid-template-columns:1fr; gap:38px; padding:52px 24px 44px} .hero-media{order:-1; max-width:460px} .hero-photo{height:440px} .hero-sub,.hero-cred{max-width:none} .hero-stat{right:8px}}

/* FEATURED IN */
.cred{background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:30px 0}
.cred-lbl{text-align:center; font-size:1rem; color:var(--ink-mute); font-weight:600; margin-bottom:20px}
/* Every anchor jump landed its heading under the sticky nav, which is 62 to 72px
   tall. Measured 10 aug: #founder lost the whole "Menno Henselmans" half of its
   h2. One global rule rather than scroll-margin on every section. */
html{scroll-padding-top:88px}
@media(max-width:600px){html{scroll-padding-top:78px}}

.marquee{position:relative; overflow:hidden}
.marquee-track{display:flex; align-items:center; justify-content:space-evenly; gap:40px; width:100%; padding:0 24px}
.marquee-track img{width:auto; max-width:210px; object-fit:contain; filter:brightness(0) invert(1); opacity:.82; transition:opacity .2s}
.marquee-track img:hover{opacity:1}
.marquee-track .l-huff{height:25px}
.marquee-track .l-times{height:28px}
.marquee-track .l-rp{height:40px}
.marquee-track .l-jeff{height:31px}
.marquee-track .l-nos{height:30px}
/* Bell Coaching is a negative mark: a black disc with the wordmark knocked out
   of it in white. The strip's brightness(0) invert(1) flattens disc and wordmark
   into one white circle, so this one keeps its own artwork. */
.marquee-track .l-bell{height:56px; filter:none; opacity:.95}
.marquee-track .l-bell:hover{opacity:1}
.marquee-track .dup{display:none}
@keyframes scrollx{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:900px){
  .marquee{mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .marquee-track{justify-content:flex-start; width:max-content; gap:54px; animation:scrollx 20s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .marquee-track .dup{display:block}
  .marquee-track img{height:30px}
}

/* ROUTER */
.router-head{max-width:680px; margin-bottom:46px}
.router-head h2{margin-bottom:14px}
.router-head p{color:var(--ink-soft); font-size:1.2rem}
.router{display:grid; grid-template-columns:1.32fr 1fr 1fr; gap:20px; align-items:stretch}
.rcard{position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-card); transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease)}
.rcard:hover{transform:translateY(-5px); box-shadow:var(--shadow-hi); border-color:var(--border-2)}
.rcard--feature{border-color:rgba(47,134,240,.4); background:linear-gradient(180deg,#16191f,#121319)}
.rcard-thumb{position:relative; height:168px; overflow:hidden; background:#0e0f13}
.rcard-thumb img{width:100%; height:100%; object-fit:cover}
.rcard-thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(16,17,22,.5)); pointer-events:none}
.rcard-body{position:relative; display:flex; flex-direction:column; flex:1; padding:24px 26px 26px}
.rtag{display:inline-flex; align-items:center; align-self:flex-start; font-size:1rem; font-weight:700; color:#bcd6fb; background:rgba(47,134,240,.16); padding:6px 12px; border-radius:var(--r-pill); margin-bottom:15px}
.rcard--feature .rtag{color:#fff; background:var(--accent-btn)}
.rcard h3{color:#fff; margin-bottom:11px; font-size:1.4rem}
.rcard p{color:var(--ink-soft); font-size:1.06rem; margin-bottom:22px}
.rcard .rfoot{margin-top:auto}
.rcard .rmicro{display:block; margin-top:12px; font-size:1rem; color:var(--ink-mute)}
.rcard .rmicro b{color:var(--ink-soft)}
.rcard .btn,.rcard .textlink{width:100%}
.rcard .textlink{justify-content:flex-start}
/* book band (4th, prominent) */
.book-band{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:40px; margin-top:22px; background:linear-gradient(120deg,#15171d,#101218); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px 40px; box-shadow:var(--shadow-card); color:inherit; text-decoration:none; transition:border-color .2s var(--ease), transform .2s var(--ease)}
.book-band:hover{border-color:var(--border-2); transform:translateY(-2px)}
/* CSS 3D hardcover (cover stays pixel-perfect, no AI distortion) */
.book3d-stage{position:relative; flex:none; width:236px; height:360px; perspective:1600px; display:flex; align-items:center; justify-content:center}
.book3d-stage::after{content:""; position:absolute; left:50%; bottom:16px; transform:translateX(-50%); width:208px; height:30px; background:radial-gradient(ellipse, rgba(0,0,0,.62), transparent 72%); filter:blur(7px); z-index:0}
.book3d{position:relative; width:0; height:0; transform-style:preserve-3d; transform:rotateX(4deg) rotateY(-29deg); transition:transform .6s var(--ease); z-index:1}
.book-band:hover .book3d{transform:rotateX(3deg) rotateY(-20deg)}
.book3d .bf{position:absolute; left:0; top:0; backface-visibility:hidden}
.book3d .b-front{width:228px; height:332px; transform:translate(-50%,-50%) translateZ(17px); border-radius:2px 5px 5px 2px; overflow:hidden; box-shadow:inset -16px 0 30px -16px rgba(0,0,0,.55)}
.book3d .b-front img{width:100%; height:100%; object-fit:cover; display:block}
.book3d .b-back{width:228px; height:332px; transform:translate(-50%,-50%) rotateY(180deg) translateZ(17px); background:#141d28; border-radius:5px 2px 2px 5px}
.book3d .b-spine{width:34px; height:332px; transform:translate(-50%,-50%) rotateY(-90deg) translateZ(114px); background:linear-gradient(90deg,#0c141d,#1d2d40 58%,#0c141d)}
.book3d .b-edge{width:34px; height:332px; transform:translate(-50%,-50%) rotateY(90deg) translateZ(114px); background:repeating-linear-gradient(90deg,#efe9db,#efe9db 1px,#d8d1c0 2px,#efe9db 3px)}
.book3d .b-top{width:228px; height:34px; transform:translate(-50%,-50%) rotateX(90deg) translateZ(166px); background:repeating-linear-gradient(90deg,#efe9db,#efe9db 1px,#dcd5c5 2px,#efe9db 3px)}
.book3d .b-bottom{width:228px; height:34px; transform:translate(-50%,-50%) rotateX(-90deg) translateZ(166px); background:#cfc8b8}
/* editable gold bestseller seal */
.book-amz{position:absolute; top:-14px; left:-20px; z-index:4; background:#fff; border-radius:11px; padding:10px 13px; box-shadow:0 12px 26px rgba(0,0,0,.5); transform:rotate(-4deg); pointer-events:none}
.book-amz img{width:108px; height:auto; display:block}
.book-band .bs-tag{font-size:1rem; color:var(--accent-2); font-weight:600; margin-bottom:9px}
.book-band h3{font-size:1.9rem; color:#fff; margin-bottom:11px}
.book-band p{color:var(--ink-soft); font-size:1.12rem; max-width:52ch}
.book-band .btn{white-space:nowrap}
@media(max-width:920px){.router{grid-template-columns:1fr} .book-band{grid-template-columns:auto 1fr; gap:28px; padding:26px} .book-band .btn{grid-column:1/-1; width:100%}}
@media(max-width:560px){.book-band{grid-template-columns:1fr; text-align:center; justify-items:center}}

/* APP BAND */
.app{position:relative; overflow:hidden; background:radial-gradient(ellipse 58% 50% at 80% -8%, rgba(47,134,240,.26), transparent 60%), radial-gradient(ellipse 50% 55% at 8% 110%, rgba(31,95,192,.16), transparent 64%), linear-gradient(180deg,#0c0e13,#0a0a0c)}
.app::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.6; background-image:linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px); background-size:52px 52px; mask-image:radial-gradient(ellipse 75% 65% at 40% 30%,#000 35%,transparent 82%); -webkit-mask-image:radial-gradient(ellipse 75% 65% at 40% 30%,#000 35%,transparent 82%)}
.app-in{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 1.1fr; gap:48px; align-items:center}
.app h2{margin-bottom:20px; max-width:18ch; font-size:clamp(2.9rem, 1.9rem + 3.6vw, 4.5rem); font-weight:800; line-height:1.03}
.app-lead{color:var(--ink-soft); font-size:1.14rem; max-width:46ch; margin-bottom:32px}
.feats{display:grid; gap:14px; margin-bottom:34px}
.feat{display:grid; grid-template-columns:auto 1fr; gap:15px; align-items:start; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:12px; padding:16px 18px}
.feat .fi{width:40px; height:40px; border-radius:11px; background:rgba(47,134,240,.14); border:1px solid rgba(47,134,240,.3); color:var(--accent-2); display:flex; align-items:center; justify-content:center; flex:none}
.feat b{color:#fff; font-weight:700; display:block; margin-bottom:3px; font-size:1.08rem}
.feat span.ft{color:var(--ink-soft); font-size:1.02rem}
/* phone-trio showcase */
.appshow{position:relative; display:flex; align-items:center; justify-content:center; min-height:600px}
.appshow .ph{position:absolute; width:236px; border-radius:36px; padding:9px; background:linear-gradient(160deg,#23262e,#0c0e13); border:1px solid rgba(255,255,255,.14); box-shadow:0 40px 90px rgba(0,0,0,.6)}
.appshow .ph::before{content:""; position:absolute; top:15px; left:50%; transform:translateX(-50%); width:78px; height:6px; border-radius:99px; background:rgba(255,255,255,.18); z-index:2}
.appshow .ph img{border-radius:28px; width:100%; display:block}
.appshow .ph1{transform:translateX(-142px) rotate(-7deg) scale(.9); z-index:1; opacity:.92}
.appshow .ph2{z-index:3; box-shadow:0 54px 110px rgba(0,0,0,.72), var(--glow)}
.appshow .ph3{transform:translateX(142px) rotate(7deg) scale(.9); z-index:1; opacity:.92}
/* one-time entrance when the section scrolls into view (no looping motion) */
.js .appshow .ph{opacity:0}
.appshow.in .ph1{animation:enterL .8s var(--ease) .14s both}
.appshow.in .ph2{animation:enterC .8s var(--ease) .04s both}
.appshow.in .ph3{animation:enterR .8s var(--ease) .24s both}
@keyframes enterL{from{opacity:0; transform:translateX(-142px) translateY(34px) rotate(-7deg) scale(.86)}to{opacity:.92; transform:translateX(-142px) translateY(0) rotate(-7deg) scale(.9)}}
@keyframes enterC{from{opacity:0; transform:translateY(42px) scale(.94)}to{opacity:1; transform:translateY(0) scale(1)}}
@keyframes enterR{from{opacity:0; transform:translateX(142px) translateY(34px) rotate(7deg) scale(.86)}to{opacity:.92; transform:translateX(142px) translateY(0) rotate(7deg) scale(.9)}}
.app-menno-chip{position:absolute; left:50%; bottom:6px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:11px; background:rgba(16,17,22,.86); backdrop-filter:blur(10px); border:1px solid var(--border-2); border-radius:999px; padding:8px 18px 8px 8px; z-index:6; box-shadow:var(--shadow-card)}
.app-menno-chip img{width:38px; height:38px; border-radius:50%; flex:none}
.app-menno-chip span{font-size:1rem; font-weight:600; color:#fff}
@media(max-width:920px){
  .app-in{grid-template-columns:1fr; gap:36px}
  .appshow{order:-1; min-height:auto; padding:10px 0 28px}
  .appshow .ph1,.appshow .ph3{display:none}
  .appshow .ph2{position:relative; transform:none; width:244px}
  .app h2,.app-lead{max-width:none}
}

/* HOW IT WORKS */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:s}
.step{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:28px; box-shadow:var(--shadow-card); overflow:hidden}
.step::before{counter-increment:s; content:"0" counter(s); position:absolute; top:22px; right:26px; font-family:'Hanken Grotesk'; font-weight:800; font-size:2.4rem; color:var(--accent-2); opacity:.22; line-height:1}
.step-ic{display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; background:rgba(47,134,240,.14); border:1px solid rgba(47,134,240,.3); color:var(--accent-2); margin-bottom:16px}
.step h3{margin-bottom:9px; color:#fff}
.step p{color:var(--ink-soft); font-size:1.04rem}
@media(max-width:760px){.steps{grid-template-columns:1fr}}

/* Gym wall. The live Dutch page ends its career block with the line "Waar onze
   gecertificeerde Personal Trainers o.a. actief zijn" and five gym logos. Four
   of the five are dark artwork on white, so they get white tiles rather than the
   knocked-out treatment the press strip uses. */
.gymwall{margin-top:34px}
.gymwall-lbl{font-size:1.06rem; font-weight:700; color:#fff; text-align:center; margin:0 0 18px}
/* Zes kaarten sinds 3 sep 2026: SportCity en TrainMore erbij, Tri-PT Studio
   eruit. Drie dingen moesten daarvoor mee.
   1. Was repeat(5,1fr). Zes logo's in vijf kolommen laat er één alleen op een
      tweede rij achter.
   2. De regel li:last-child{grid-column:1/-1} ving juist dat oneven vijfde
      blokje op in de tweekolomsweergave. Zes is even, dus die uitzondering
      moet weg: hij zou TrainMore over de volle breedte uitrekken.
   3. Zes naast elkaar wordt te smal zodra de container krimpt, dus tussen 760
      en 1100 gaat de rij naar drie kolommen. Dat is 2 x 3, geen wees. */
.gymwall-row{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; align-items:stretch; margin:0; padding:0; list-style:none}
.gymwall-row li{list-style:none; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:12px; padding:16px 18px; min-height:84px}
.gymwall-row img{width:100%; height:auto; max-height:56px; object-fit:contain}
/* Snap Fitness is the one two-line lockup, so it gets more vertical room. */
.gymwall-row li:nth-child(3) img{max-height:62px; width:auto}
@media(max-width:1100px){.gymwall-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.gymwall-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:400px){.gymwall-row{grid-template-columns:1fr}}

/* Video's & animaties. Vier stills uit de Nederlandse videocolleges.
   Geschiedenis, zodat dit niet nog een keer heen en weer gaat: dit was ooit een
   2x2 raster, werd daarna een stage met een keuzelijst ernaast om hoogte te
   besparen, en is 1 sep 2026 weer een raster geworden. De keuzelijst viel af
   omdat het blok samen maar 854px breed was in een container van 1132, waardoor
   het beeld links uit het midden hing, en omdat er zonder JavaScript maar een
   still zichtbaar bleef.
   De maatvoering: de bronbestanden zijn 575x375. Een cel is (1132 - 20) / 2 =
   556px, dus 97% van de ware grootte en daarmee scherp. Vier stills op een rij
   zou 269px per cel zijn, ruim onder de leesbaarheidsvloer van 0,60. Twee
   kolommen is dus de enige maat die past. */
.vgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:26px 0 0; padding:0; list-style:none}
.vgrid li{margin:0; min-width:0}
.vgrid figure{margin:0}
.vgrid img{display:block; width:100%; height:auto; aspect-ratio:575/375; object-fit:cover; border-radius:12px; border:1px solid var(--border); box-shadow:var(--shadow-card); background:#0e0f13}
.vgrid figcaption{margin-top:10px; color:#fff; font-family:'Hanken Grotesk',sans-serif; font-size:1.02rem; font-weight:600; line-height:1.3}
.vanim-foot{display:grid; grid-template-columns:1.6fr .9fr; gap:26px; align-items:center; margin-top:26px}
.vanim-foot .btn{justify-self:start}
@media(max-width:860px){.vanim-foot{grid-template-columns:1fr; gap:18px}}
/* Onder 900px is een cel in twee kolommen smaller dan 0,60 van de bron, dus
   daar gaat het naar een kolom en blijft de still ruim boven ware grootte. */
@media(max-width:900px){.vgrid{grid-template-columns:minmax(0,1fr); gap:22px; max-width:575px}}
/* Telefoon: over de volle breedte, anders wordt de tekst op de slide te klein.
   Zelfde ingreep als de stage hiervoor had. */
/* De bleed staat op de figure, niet op de img. Op de img zou hij niets doen:
   `img,svg{max-width:100%}` bovenin kapt een bredere width weer af op de
   containerbreedte, dus de still bleef 350px op een scherm van 390. Gemeten
   1 sep 2026. De oude stage ontliep dit al door de figure te verbreden. */
/* Telefoon: een veegrij in plaats van onder elkaar (Vince 1 sep 2026). Kost de
   hoogte van een still in plaats van die van alle stills, en de rand van de
   volgende blijft zichtbaar zodat je ziet dat er meer is. Bijschriften zijn er
   niet meer, dus de rij draagt alleen beeld. */
@media(max-width:600px){
  .vgrid{max-width:none; display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-left:calc(-1 * var(--gutter-phone, 20px)); margin-right:calc(-1 * var(--gutter-phone, 20px));
    padding:0 10px}
  .vgrid::-webkit-scrollbar{display:none}
  /* 90vw, niet 86%: de dia's dragen tekst en moeten minstens 0,60 van hun eigen
     575px breed blijven, anders is de grafiek erop niet meer te lezen. Op 390px
     is 90vw = 351px = 0,61. Er blijft net genoeg van de volgende zichtbaar om te
     laten zien dat er meer is. */
  .vgrid li{flex:0 0 90vw; scroll-snap-align:center}
}
/* Photo avatar in a quote card, same footprint as the initials circle. */
.rcard-q .who .who-av{width:50px; height:50px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--border-2)}

/* Six-item list under "Volledig, breed en diepgaand". */
.course-points{list-style:none; margin:0 0 22px; padding:0; display:grid; gap:11px; max-width:54ch}
.course-points li{position:relative; padding-left:32px; color:var(--ink); font-size:1.06rem; line-height:1.45}
.course-points li::before{content:""; position:absolute; left:0; top:2px; width:21px; height:21px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2334d27b'/%3E%3Cpath d='M17 8.5l-6.2 6.5L7 11.4' fill='none' stroke='%230a0a0c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

.scarcity{max-width:70ch; margin:0 auto 26px; text-align:center; color:var(--ink-soft); font-size:1.06rem; line-height:1.6}
.scarcity b{color:#fff}

.curric-turn{margin:16px 0; padding:14px 18px; border-left:2px solid var(--accent); background:var(--surface); border-radius:0 10px 10px 0; color:var(--ink-soft); font-size:1.04rem; line-height:1.55}

/* Career block: the two live testimonials sit under the capability strip, the
   same place the live page runs them. */
.career-quotes{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:26px}
.career-quotes .rcard-q{margin:0}
@media(max-width:820px){.career-quotes{grid-template-columns:1fr}}

/* Praktijkdagen. Dates only, no venue and no times: the venue is contested on
   the record and the times are single-sourced. */
.pdagen{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:4px 0 16px; max-width:54ch}
.pdag{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px}
.pdag b{display:block; color:#fff; font-size:1.04rem; margin-bottom:6px}
.pdag ul{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.pdag li{color:var(--ink-soft); font-size:1.04rem}
.pdag-note{font-size:1.02rem; color:var(--ink-mute)}
@media(max-width:520px){.pdagen{grid-template-columns:1fr}}

/* Two columns for the short items, so the block scans instead of running as one
   long ribbon down the page. */
.course-points--two{grid-template-columns:1fr 1fr; gap:11px 22px; max-width:none}
.course-sub2{color:#fff; font-weight:700; font-size:1.08rem; margin:0 0 12px}
@media(max-width:760px){.course-points--two{grid-template-columns:1fr}}

/* Two bios side by side. Stacked they ran 1696px, which is two screenfuls for
   what is one idea: who teaches this. */
.bios{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.bio{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-card); display:flex; flex-direction:column}
.bio-photo{width:100%; height:200px; object-fit:cover; display:block; border-bottom:1px solid var(--border)}
.bio-body{padding:20px 22px 22px}
.bio-body h3{color:#fff; font-family:'Hanken Grotesk',sans-serif; font-size:1.5rem; margin:0 0 2px}
.section p.bio-role{color:var(--accent-2); font-weight:600; font-size:1.02rem; margin:0 0 12px}
.bio-body>p{color:var(--ink-soft); font-size:1.04rem; line-height:1.55; margin:0 0 14px}
.bio-creds{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.bio-creds li{position:relative; padding-left:20px; color:var(--ink-mute); font-size:1rem; line-height:1.45}
.bio-creds li::before{content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--accent-2)}
.bio-creds i{font-style:normal}
@media(max-width:860px){.bios{grid-template-columns:1fr} .bio-photo{height:220px}}

/* Benelux inset. The world map shows where graduates work; it structurally cannot
   show a Dutch reader that there are trainers near them, because the whole country
   is 1.5 units wide at world scale. Cities, not individual trainers: the directory's
   raw markers are people's home and studio addresses. */
.bx-stage{position:relative; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:16px 16px 14px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow-card)}
.bxmap{width:100%; height:auto; display:block; flex:1; min-height:0}
.bx-neighbour{fill:#191b21; stroke:rgba(255,255,255,.10); stroke-width:.6}
.bx-core{fill:#23262d; stroke:rgba(255,255,255,.24); stroke-width:.9}
/* De donkere rand is er zodat buursteden in de Randstad los te zien blijven; zonder rand
   lopen Amsterdam, Haarlem, Hoofddorp en Amstelveen op deze schaal in elkaar over. */
.bx-dot{fill:var(--accent-2); opacity:.95; stroke:#15161b; stroke-width:.7; paint-order:stroke}

/* METHOD / WHY DIFFERENT */
.method-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.mcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:28px; box-shadow:var(--shadow-card)}
.mcard-ic{display:flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; background:rgba(47,134,240,.14); border:1px solid rgba(47,134,240,.3); color:var(--accent-2); margin-bottom:16px}
.mcard h3{margin-bottom:9px; color:#fff}
.mcard p{color:var(--ink-soft); font-size:1.04rem}
@media(max-width:760px){.method-grid{grid-template-columns:1fr}}

/* Section lead.
   The live Dutch page opens every section with its subject as the heading and a
   bold promise line underneath. This is that promise line. It used to be the h2
   on this page, with the subject demoted to an eyebrow, which inverted the
   hierarchy the Dutch reader already knows. */
/* The two-class selector is deliberate. Several section heads already style
   their own `p` (.faq-head p, .rev-head p, .lib-head p, .curric-intro p), and a
   bare .sec-lead loses to those on specificity, which left the lead line white
   and 20.8px in half the sections and grey and 17.6px in the other half. */
.section p.sec-lead,p.sec-lead{color:#fff; font-weight:700; font-size:1.3rem; line-height:1.34; margin:0 0 20px; max-width:44ch}
.section p.founder-role,p.founder-role{color:var(--accent-2); font-weight:600; font-size:1.06rem; margin:0 0 16px; max-width:none}
.section h3.course-sub{font-size:1.14rem; font-weight:700; color:#fff; margin:0 0 8px}
/* Twee kopblokken staan gecentreerd, maar de leadregel heeft een max-width en marge 0,
   dus dat blok stond links tegen de rand en de tekst erin leek scheef: 284px scheef bij
   #science, 164px bij #certification. Gemeten 10 aug 2026. */
.btc-intro p.sec-lead,.cert-head p.sec-lead{margin-inline:auto}
@media(max-width:600px){.section p.sec-lead,p.sec-lead{font-size:1.14rem; max-width:none; margin-bottom:16px}}

/* COURSE */
.course-in{display:grid; grid-template-columns:1.28fr 1fr; gap:56px; align-items:center}
/* Zigzag: three copy-left sections in a row read as one template stamped
   three times. #online-parttime takes the mirrored side. */
.course-in--rev{grid-template-columns:1fr 1.28fr}
.course-in--rev>.course-copy{order:2}
.course-in--rev>.course-media{order:1}
@media(max-width:920px){.course-in--rev>.course-copy{order:1} .course-in--rev>.course-media{order:2}}
.course h2{margin-bottom:18px}
.course-body{color:var(--ink-soft); font-size:1.16rem; margin-bottom:22px; max-width:54ch}
.proof{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:17px 20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); margin-bottom:24px}
.stars{display:inline-flex; gap:3px}
/* authentic Trustpilot rating style: white star on a green square, not orange */
.stars svg,.pw-stars svg{width:21px; height:21px; fill:#fff; background:var(--tp); border-radius:4px; padding:2.5px; box-sizing:border-box}
.proof .pscore{font-family:'Hanken Grotesk'; font-weight:800; font-size:1.6rem; color:#fff; line-height:1}
.proof .ptext{font-size:1rem; color:var(--ink-soft)}
.proof .ptext b{color:#fff}
.proof .ptext-sm{display:none; font-size:1rem; color:var(--ink-soft); white-space:nowrap}
.proof .ptext-sm b{color:#fff; font-family:'Hanken Grotesk'; font-weight:800}
.proof .tp{margin-left:auto}
.enroll-note{display:flex; align-items:flex-start; gap:12px; background:rgba(47,134,240,.08); border:1px solid rgba(47,134,240,.22); border-radius:12px; padding:15px 18px; margin-bottom:24px; font-size:1.04rem; color:var(--ink-soft)}
.enroll-note svg{color:var(--accent-2); flex:none; margin-top:2px}
.course-cta{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.course-media{position:relative}
.course-photo{border-radius:var(--r-lg); box-shadow:var(--shadow-hi); width:100%; height:auto; filter:contrast(1.03)}
.course-media figcaption{margin-top:13px; font-size:1rem; color:var(--ink-mute); text-align:center}
/* Een citaatkaart is geen bijschrift onder een foto: die tekst leest links uitgelijnd. */
.course-media figcaption.rcard-q, .course-media .rcard-q, .course-media .rcard-q figcaption,
.course-media figcaption.practical-quote{text-align:left; color:var(--ink)}
.langs{font-size:1rem; color:var(--ink-mute)}
.langs a{color:var(--accent-2); font-weight:600}
.langs a:hover{text-decoration:underline; text-underline-offset:2px}
@media(max-width:920px){.course-in{grid-template-columns:1fr; gap:36px} .course-media{max-width:380px} .course-body{max-width:none}}

/* COURSE REVIEWS */
.rev-head{max-width:680px; margin-bottom:34px}
.rev-head h2{margin-bottom:12px}
.rev-head p{color:var(--ink-soft); font-size:1.16rem}
/* cinematic graduate mosaic + glass stat panel */
.proof-wall{position:relative; height:600px; overflow:hidden; border-radius:var(--r-lg); margin-bottom:34px; background:#0b0c10}
.pw-grid{columns:6 150px; column-gap:9px}
.pw-grid figure{break-inside:avoid; margin:0 0 9px; border-radius:10px; overflow:hidden; border:1px solid var(--border); background:#0e0f13}
.pw-grid img{width:100%; display:block; filter:saturate(.95) contrast(1.02)}
.pw-vignette{position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(ellipse 78% 78% at 50% 50%, transparent 28%, rgba(10,10,12,.5) 64%, var(--bg) 100%)}
.pw-glow{position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(ellipse 42% 52% at 50% 50%, rgba(7,8,11,.72), rgba(7,8,11,.3) 52%, transparent 74%)}
.pw-panel{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3; width:min(450px,88%); text-align:center; background:rgba(14,15,20,.6); backdrop-filter:blur(15px) saturate(140%); -webkit-backdrop-filter:blur(15px) saturate(140%); border:1px solid var(--border-2); border-radius:var(--r-lg); padding:30px 32px; box-shadow:var(--shadow-hi)}
.pw-panel .tp{justify-content:center; margin-bottom:11px; color:var(--ink)}
.pw-stars{display:inline-flex; gap:3px; margin-bottom:14px}
.pw-stars svg{width:21px; height:21px}
.pw-panel h3{font-size:1.85rem; color:#fff; margin-bottom:11px; line-height:1.12}
.pw-panel p{color:var(--ink-soft); font-size:1.04rem; max-width:36ch; margin:0 auto}
.pw-meta{display:flex; justify-content:center; gap:14px; margin-top:20px; padding-top:18px; border-top:1px solid var(--border)}
.pw-meta div{flex:1}
.pw-meta b{display:block; font-family:'Hanken Grotesk'; font-weight:800; font-size:1.5rem; color:#fff; line-height:1; margin-bottom:5px; font-variant-numeric:tabular-nums}
.pw-meta span{font-size:1rem; color:var(--ink-mute)}
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.rcard-q{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:26px; box-shadow:var(--shadow-card)}
.rcard-q .stars{margin-bottom:15px}
.rcard-q blockquote{margin:0 0 22px; color:var(--ink); font-size:1.06rem; line-height:1.62}
.rcard-q .who{display:flex; align-items:center; gap:13px; margin-top:auto}
.rcard-q .who img{width:50px; height:50px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--border-2)}
.rcard-q .who b{display:block; color:#fff; font-size:1.04rem}
.rcard-q .who small{color:var(--ink-mute); font-size:1rem}
.rev-foot{margin-top:30px}
.tp-badge{display:inline-flex; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); padding:9px 17px}
/* multi-platform "independently rated" strip */
.rev-foot-lbl{display:block; font-size:1rem; font-weight:600; color:var(--ink-mute); margin-bottom:13px}
.plat-strip{display:flex; flex-wrap:wrap; gap:14px}
.plat{display:inline-flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:12px 20px 12px 13px; text-decoration:none}
a.plat{transition:border-color .2s var(--ease), transform .2s var(--ease)}
a.plat:hover{border-color:var(--border-2); transform:translateY(-2px)}
.plat-ic{width:36px; height:36px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:9px}
.plat-ic svg{width:22px; height:22px}
.plat-ic--tp{background:var(--tp)}
.plat-ic--fb{background:#1877f2}
.plat-meta{display:flex; flex-direction:column; line-height:1.25}
.plat-name{font-weight:700; color:#fff; font-size:1.04rem}
.plat-fig{font-size:1rem; color:var(--ink-mute)}
.plat-fig b{color:var(--ink-soft); font-weight:800; font-family:'Hanken Grotesk',sans-serif}
.rev-readmore{margin-top:18px}
@media(max-width:920px){.rev-grid{grid-template-columns:1fr}}
/* rev2: featured "even the experts take it" band above the proof wall.
   Verified endorsers only (name + exact credential + verbatim quote + real photo). */
.expert-band{margin-bottom:34px}
.expert-band-head{max-width:680px; margin-bottom:22px}
.expert-band-lbl{display:inline-flex; align-items:center; gap:11px; font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:1.28rem; color:#fff; margin-bottom:8px}
.expert-band-lbl::before{content:""; width:26px; height:2px; background:var(--accent); border-radius:2px}
.expert-band-head p{color:var(--ink-soft); font-size:1.06rem; line-height:1.55}
.expert-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.expert-card{display:flex; flex-direction:column; margin:0; background:var(--surface-2); border:1px solid var(--border-2); border-radius:var(--r-card); padding:24px; box-shadow:var(--shadow-card)}
.expert-card .stars{margin-bottom:13px}
.expert-card blockquote{margin:0 0 20px; color:var(--ink); font-size:1.02rem; line-height:1.6}
.expert-card .who{display:flex; align-items:center; gap:13px; margin-top:auto}
.expert-card .who img{width:52px; height:52px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--border-2)}
.expert-card .who b{display:block; color:#fff; font-size:1.04rem}
.expert-card .who small{display:block; color:var(--ink-mute); font-size:1rem; line-height:1.35}
@media(max-width:920px){.expert-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.expert-grid{grid-template-columns:1fr}}
@media(max-width:760px){.proof-wall{height:460px} .pw-grid{columns:3 120px} .pw-panel{width:90%; padding:24px 20px} .pw-panel h3{font-size:1.55rem} .pw-meta b{font-size:1.3rem}}
@media(max-width:460px){.pw-grid{columns:2 100px} .pw-meta{gap:8px}}

/* CONTENT / LIBRARY */
.lib-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:26px; flex-wrap:wrap}
.lib-head h2{margin-bottom:10px}
.lib-head .sub{color:var(--ink-soft); font-size:1.16rem; max-width:54ch}
.cats{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px}
.cats button{font-size:1rem; font-family:inherit; font-weight:600; color:var(--ink-soft); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); padding:9px 18px; cursor:pointer; transition:border-color .2s, color .2s, background .2s}
.cats button:hover{color:#fff; border-color:var(--accent-2)}
.cats button[aria-pressed="true"]{color:#fff; border-color:var(--accent-2); background:rgba(47,134,240,.14)}
.cats button:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}
.lib-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; min-height:120px}
.lib-grid.dimmed{opacity:.4; pointer-events:none; transition:opacity .2s}
.pcard{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-card); transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s}
.pcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-hi); border-color:var(--border-2)}
.pcard .cover{aspect-ratio:16/9; overflow:hidden; background:#0e0f13}
.pcard .cover img{width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease)}
.pcard:hover .cover img{transform:scale(1.04)}
.pcard .pbody{padding:18px 20px 20px}
.pcard .kind{font-size:1rem; font-weight:600; color:var(--accent-2); margin-bottom:9px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.pcard .kind .date{color:var(--ink-mute); font-weight:500}
.pcard h3{font-size:1.22rem; color:#fff; line-height:1.22}
.lib-loading{grid-column:1/-1; color:var(--ink-mute); font-size:1.04rem; padding:30px 0}
.ffmi{display:grid; grid-template-columns:1.16fr .84fr; align-items:center; gap:30px; margin-top:22px; background:radial-gradient(ellipse 56% 92% at 26% 50%, rgba(47,134,240,.15), transparent 62%), linear-gradient(120deg,#10141b,#0d0f14); border:1px solid var(--border); border-radius:var(--r-lg); padding:30px 38px; color:inherit; text-decoration:none; transition:border-color .2s var(--ease), transform .2s var(--ease)}
.ffmi:hover{border-color:var(--border-2); transform:translateY(-2px)}
/* transparent figure blends into the box + leader lines that point at the real muscle anchors */
.ffmi-figwrap{display:flex; flex-direction:column; align-items:center; min-width:0}
.ffmi-fig{position:relative; width:100%; max-width:520px; aspect-ratio:1360/1144}
.ffmi-body{position:absolute; left:22.06%; top:0; width:55.88%; height:100%; object-fit:contain; filter:drop-shadow(0 16px 34px rgba(0,0,0,.5))}
.ffmi-lines{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.ffmi-lines line{stroke:rgba(255,255,255,.30); stroke-width:2.2}
.ffmi-lines circle{stroke:rgba(255,255,255,.5); stroke-width:2}
.ffmi-lines .d-bal{fill:var(--success)}
.ffmi-lines .d-ahd{fill:var(--accent-2)}
.ffmi-lines .d-beh{fill:var(--warm)}
.cw{position:absolute; transform:translateY(-50%); white-space:nowrap}
.cw .tx{font-size:1rem; color:var(--ink-soft)}
.cw .tx b{font-family:'Hanken Grotesk'; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; margin-left:5px}
.cw.L{right:80.5%; text-align:right}
.cw.R{left:80.5%}
.ffmi-chips{display:none; flex-wrap:wrap; justify-content:center; gap:10px 18px}
.chip{display:flex; align-items:center; gap:7px; font-size:1rem; color:var(--ink-soft); white-space:nowrap}
.chip b{font-family:'Hanken Grotesk'; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; margin-left:4px}
.chip .sd{width:9px; height:9px; border-radius:50%; flex:none}
.chip .s-bal{background:var(--success)}
.chip .s-ahd{background:var(--accent-2)}
.chip .s-beh{background:var(--warm)}
/* result panel */
.ffmi-panel .eyebrow{margin-bottom:14px}
.ffmi-h{display:block; color:#fff; font-size:1.5rem; font-family:'Hanken Grotesk'; font-weight:800; line-height:1.12; margin-bottom:11px}
.ffmi-panel .lead{color:var(--ink-soft); font-size:1.04rem; margin-bottom:20px; max-width:42ch}
.ffmi-readout{background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:14px; padding:18px 20px; margin-bottom:22px}
.ffmi-eg{display:inline-block; font-size:1rem; font-weight:600; color:var(--ink-mute); margin-bottom:12px}
.ro-main{display:flex; align-items:baseline; gap:12px; font-family:'Hanken Grotesk'; font-weight:800; line-height:1; font-variant-numeric:tabular-nums}
.ro-now{font-size:2.6rem; color:#fff}
.ro-arrow{font-size:1.5rem; color:var(--ink-mute)}
.ro-ceil{font-size:2.6rem; color:var(--accent-2)}
.ro-labels{display:flex; gap:12px; margin:6px 0 14px; font-size:1rem; color:var(--ink-mute)}
.ro-labels span:first-child{min-width:calc(2.6rem + 6px)}
.ro-bar{position:relative; height:8px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; margin-bottom:11px}
.ro-bar>span{position:absolute; inset:0 auto 0 0; border-radius:99px; background:linear-gradient(90deg,var(--accent-deep),var(--accent-2))}
.ro-gap{font-size:1rem; color:var(--ink-soft)}
.ro-gap b{color:#fff; font-family:'Hanken Grotesk'; font-weight:800}
.ffmi .btn{display:inline-flex}
@media(max-width:820px){
  .ffmi{grid-template-columns:1fr; gap:24px; padding:28px 24px}
  .ffmi-panel .lead{max-width:none}
}
/* on small screens drop the gutter labels (they need the side room) and stack chips under the figure */
@media(max-width:560px){
  .ffmi-fig{max-width:262px; aspect-ratio:760/1144}
  .ffmi-body{left:0; width:100%}
  .ffmi-fig .cw, .ffmi-lines{display:none}
  .ffmi-chips{display:flex; margin-top:16px}
}
.lib-foot{margin-top:26px}
@media(max-width:920px){.lib-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lib-grid{grid-template-columns:1fr}}

/* EMAIL */
.email{position:relative; overflow:hidden; background:radial-gradient(ellipse 54% 64% at 84% 50%, rgba(47,134,240,.2), transparent 62%), linear-gradient(180deg,#0d1018,#0a0c11)}
.email-in{position:relative; z-index:1; display:grid; grid-template-columns:1.1fr 1fr; gap:50px; align-items:center}
.email h2{margin-bottom:14px; max-width:20ch}
.email p{color:var(--ink-soft); font-size:1.12rem; max-width:52ch}
.lead-form{background:rgba(255,255,255,.04); border:1px solid var(--border-2); border-radius:var(--r-lg); padding:28px}
.lead-form label{display:block; font-weight:600; color:#fff; font-size:1rem; margin-bottom:9px}
.lead-form .row{display:flex; gap:10px}
.lead-form input{flex:1; min-width:0; font-size:1.0625rem; padding:15px 16px; border-radius:var(--r-btn); border:1.5px solid var(--border-2); background:rgba(255,255,255,.06); color:#fff; font-family:inherit}
.lead-form input::placeholder{color:var(--ink-mute)}
.lead-form input:focus-visible{outline:3px solid var(--accent-2); outline-offset:1px; border-color:var(--accent-2)}
.lead-form input[aria-invalid="true"]{border-color:#ff9d9d; outline-color:#ff9d9d}
.lead-form .btn-primary{flex:none}
.lead-form .msg{min-height:22px; margin-top:12px; font-size:1rem}
.lead-form .msg.err{color:#ffc0c0}
.lead-form .msg.ok{color:#a8f0c4}
.lead-form .privacy{margin-top:15px; font-size:1rem; color:var(--ink-mute)}
@media(max-width:820px){.email-in{grid-template-columns:1fr; gap:32px} .email h2,.email p{max-width:none} .lead-form .row{flex-direction:column} .lead-form .btn-primary{width:100%}}

/* FAQ */
.faq-head{max-width:580px; margin-bottom:38px}
.faq-head h2{margin-bottom:11px}
.faq-head p{color:var(--ink-soft); font-size:1.1rem}
.faq-list{max-width:840px}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:24px 46px 24px 0; position:relative; font-family:'Hanken Grotesk'; font-weight:700; font-size:1.18rem; color:#fff; letter-spacing:-.01em}
.faq-q:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px; border-radius:4px}
.faq-q .pm{position:absolute; right:4px; top:50%; transform:translateY(-50%); width:24px; height:24px; transition:transform .2s var(--ease); color:var(--accent-2)}
.faq-q[aria-expanded="true"] .pm{transform:translateY(-50%) rotate(45deg)}
.faq-a{overflow:hidden; max-height:0; transition:max-height .28s var(--ease)}
.faq-a-in{padding:0 46px 26px 0; color:var(--ink-soft); font-size:1.06rem; line-height:1.65}
.faq-a-in p{margin:0 0 12px}
.faq-a-in p:last-child{margin-bottom:0}
.faq-a-in a{font-weight:600}

/* FOOTER */
.footer{background:#08080a; color:var(--ink-soft); padding:70px 0 32px; border-top:1px solid var(--border)}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr; gap:34px; align-items:start; padding-bottom:36px; border-bottom:1px solid var(--border); margin-bottom:38px}
.footer .brand{color:#fff; font-size:1.4rem; display:block; margin-bottom:14px}
.footer .brand span{color:var(--accent-2)}
.footer .tag{font-size:1.02rem; color:var(--ink-mute); max-width:42ch; margin-bottom:20px}
.footer-trust{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.trust-pill{display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:var(--r-pill); padding:8px 15px; font-size:1rem; font-weight:600; color:var(--ink-soft); text-decoration:none}
a.trust-pill:hover{color:#fff; background:rgba(255,255,255,.08); text-decoration:none}
.foot-news{display:flex; gap:10px; max-width:420px}
.foot-news input{flex:1; min-width:0; font-size:1.0625rem; padding:13px 15px; border-radius:var(--r-btn); border:1.5px solid var(--border-2); background:rgba(255,255,255,.05); color:#fff; font-family:inherit}
.foot-news input::placeholder{color:var(--ink-mute)}
.foot-news input:focus-visible{outline:3px solid var(--accent-2); outline-offset:1px}
.foot-news .btn{flex:none; min-height:48px; padding:12px 20px}
.foot-news-lbl{font-size:1rem; color:var(--ink-soft); margin-bottom:10px; font-weight:600}
.footer-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:32px; padding-bottom:38px; border-bottom:1px solid var(--border)}
.footer .foot-h{font-family:'Hanken Grotesk'; font-weight:700; color:#fff; font-size:1.04rem; margin:0 0 16px}
.footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.footer a{color:var(--ink-mute); font-size:1rem}
.footer a:hover{color:#fff; text-decoration:underline; text-underline-offset:3px}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:26px; flex-wrap:wrap}
.footer-bottom .legal{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.footer-bottom small,.footer-bottom .legal a{color:var(--ink-mute); font-size:1rem}
.social{display:flex; gap:10px}
.social a{width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:background .15s, color .15s}
.social a:hover{background:var(--accent-btn); color:#fff}
.social a:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}
.social svg{width:19px; height:19px}
@media(max-width:880px){.footer-top{grid-template-columns:1fr} .footer-cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-cols{grid-template-columns:1fr}}

/* sticky mobile CTA: keeps the primary action one tap away on the long phone scroll */
.mcta{position:fixed; left:0; right:0; bottom:0; z-index:100; display:flex; gap:14px; align-items:center; justify-content:center; padding:12px 24px calc(12px + env(safe-area-inset-bottom)); background:rgba(10,10,12,.86); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-top:1px solid var(--border-2); box-shadow:0 -12px 30px rgba(0,0,0,.45); transform:translateY(135%); transition:transform .28s var(--ease)}
.mcta.show{transform:none}
/* desktop: a context line on the left, actions on the right */
.mcta-in{width:100%; max-width:var(--container); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:18px}
.mcta-ctx{color:#fff; font-family:'Hanken Grotesk',sans-serif; font-size:1.06rem; font-weight:600; line-height:1.3}
.mcta-ctx b{color:var(--accent-2)}
.mcta-actions{display:flex; align-items:center; gap:10px; flex:none}
.mcta-search{display:none}
@media(max-width:900px){.mcta-out{display:none}}
@media(max-width:600px){
  .mcta{padding:11px 15px calc(11px + env(safe-area-inset-bottom)); gap:10px}
  .mcta-ctx{display:none}
  .mcta-search{display:flex}
  .mcta-in{gap:10px}
  .mcta-actions{flex:1}
  .mcta .btn{flex:1; min-width:0}
  
  /* the whole announce bar is the link, so the pill is redundant here and costs a fold line */
  .announce .ann-cta{display:none}}

.reveal{transition:opacity .6s var(--ease), transform .6s var(--ease)}
.js .reveal{opacity:0; transform:translateY(16px)}
.reveal.in{opacity:1; transform:none}
.js .hero .stagger{opacity:0; transform:translateY(18px)}
.hero.loaded .stagger{opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease)}
.hero.loaded .s1{transition-delay:.05s}.hero.loaded .s2{transition-delay:.13s}.hero.loaded .s3{transition-delay:.21s}.hero.loaded .s4{transition-delay:.29s}.hero.loaded .s5{transition-delay:.4s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal,.hero .stagger{opacity:1 !important; transform:none !important}
  .marquee-track{animation:none !important}
  .hero-glow{animation:none !important}
}

/* ===== MOBILE: full-width primary CTAs + tidy stacking on phones ===== */
@media(max-width:600px){
  .hero-actions{flex-direction:column; align-items:stretch; gap:16px}
  .hero-actions .btn{width:100%}
  .hero-scroll{display:inline-flex; justify-content:center}
  /* first-screen: lead with the proposition + CTA, let Menno's photo follow (was photo-first) */
  .hero-media{order:0}
  .hero-in{padding-top:32px; gap:30px}
  .hero h1{margin-bottom:18px}
  .hero-sub{font-size:1.18rem; margin-bottom:24px}
  .app-cta-row .btn{width:100%}
  .course-cta{flex-direction:column; align-items:stretch}
  .course-cta .btn{width:100%}
  .lib-head{flex-direction:column; align-items:stretch}
  .lib-head .btn{width:100%; justify-content:center}
  /* condense the Trustpilot proof band onto one line */
  .proof{flex-wrap:nowrap; gap:10px; padding:14px 16px}
  .proof .stars{flex:none}
  .proof .ptext{display:none}
  .proof .ptext-sm{display:inline}
  .proof .tp{display:none}
  /* cut scroll-fatigue: show 3 testimonials + 3 library cards on phones (full sets still reachable via the CTAs/links) */
  /* Drie reviews op de telefoon, maar niet zomaar de eerste drie. De DOM-volgorde is
     gekozen voor de kolombalans op desktop en zet Stefan Nillesen op plek 3; hij is de
     enige recensent zonder functie onder zijn naam, en op een telefoon waar er maar drie
     staan is dat een derde van het bewijs zonder afzender. Gemeten: elke volgorde die
     Victor Mooren naar plek 3 haalt, kost 400 tot 700px lege kaart op desktop. Dus laat
     de volgorde staan en kies hier de drie: Guy, Martijn en Victor. */
  /* 1 sep 2026: van drie naar een (Vince: "elke keer drie testimonials neemt
     superveel ruimte in, dat moet terug naar bijvoorbeeld een, zodat het op
     mobiel geen gigantisch lange scrollmuur wordt"). Drie kaarten waren hier
     samen 1837 tekens citaat en ruim 2700px, oftewel 3,3 telefoonschermen voor
     een sectie. Guy Droog blijft staan: langste staat van dienst (Men's Health
     cover model, eigen studio) en de link naar de reviewpagina erboven vangt
     de rest op. */
  .rev-grid .rcard-q:nth-child(n+2){display:none}
  .lib-grid .pcard:nth-child(n+4){display:none}
  /* condense the FFMI teaser: drop the tall example figure, keep the hook + readout + CTA */
  .ffmi{padding:24px 20px}
  .ffmi-figwrap{display:none}
  .ffmi .lead{margin-bottom:18px}
  .plat{flex:1 1 100%}
  .foot-news{flex-wrap:wrap}
  .foot-news input,.foot-news .btn{flex:1 1 100%}
  .announce{padding:10px 14px; font-size:1rem; gap:8px}
  .announce .ann-cta{padding:4px 11px}
}

/* ============================================================
   SEASONAL MODE SYSTEM
   App-mode is the default (course closed, app is the push).
   When a course cohort opens, flip ONE attribute to re-rank the
   whole page: <body data-mode="course">  (preview: ?mode=course)
   ============================================================ */
#main{display:flex; flex-direction:column}
#hero{order:1} .cred{order:2} #router{order:3} #method{order:3} #app{order:4} #how{order:5} #course{order:6} #reviews{order:7} #email{order:8} #library{order:9} #faq{order:10}

/* mode-conditional visibility */
.only-course{display:none}
[data-mode="course"] .only-app{display:none}
[data-mode="course"] .btn.only-course{display:inline-flex}
[data-mode="course"] .announce.only-course{display:flex}

/* COURSE MODE: course + its proof leapfrog the app block */
[data-mode="course"] #course{order:4}
[data-mode="course"] #reviews{order:5}
[data-mode="course"] #app{order:6}
[data-mode="course"] #how{order:7}
/* COURSE MODE: course becomes the prominent router card; app steps back */
[data-mode="course"] .r-course{order:-1; border-color:rgba(47,134,240,.4); background:linear-gradient(180deg,#16191f,#121319)}
[data-mode="course"] .r-course .rtag{color:#fff; background:var(--accent-btn)}
[data-mode="course"] .r-app{border-color:var(--border); background:var(--surface)}
[data-mode="course"] .r-app .rtag{color:#bcd6fb; background:rgba(47,134,240,.16)}

/* urgency / announcement bar (course mode only, a closed product cannot use this) */
.announce{align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding:11px 18px; background:linear-gradient(90deg,var(--accent-deep),var(--accent-btn)); color:#fff; font-size:1rem; font-weight:600; text-decoration:none; text-align:center; border-bottom:1px solid rgba(255,255,255,.16)}
.announce b{font-weight:800; color:#fff}
.ann-copy--mobile{display:none}
.announce .ann-count{font-variant-numeric:tabular-nums; opacity:.95}
.announce .ann-cta{display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.18); padding:5px 13px; border-radius:var(--r-pill); font-weight:700}
.announce:hover .ann-cta{background:rgba(255,255,255,.3)}
/* phones: the whole bar is the link, so the pill only costs a line of the fold */
@media(max-width:600px){.announce .ann-cta{display:none}}
.announce .ann-pulse{width:9px; height:9px; border-radius:50%; background:#fff; flex:none; animation:annpulse 1.8s infinite}
@keyframes annpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%{box-shadow:0 0 0 8px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* ============================================================
   Online PT Course page (VOM). Page-specific add-ons
   layered on top of the shared homepage design system.
   ============================================================ */

/* This page does not use the homepage seasonal-mode reordering system.
   The shared stylesheet sets #main{display:flex} + order: on #hero/.cred/#how/#reviews/#faq,
   which would scramble this page's section order. Force normal document flow. */
#main{display:block}
#hero,.cred,#how,#reviews,#faq{order:0}

/* sold-out status pill in the hero */

/* hero bullet list (verbatim benefit bullets) */
.hero-bullets{list-style:none; margin:0 0 28px; padding:0; display:grid; gap:12px; max-width:62ch}
/* The last two words of every bullet are bound with a non-breaking space in the
   markup, so a wrapped bullet can never end on a single word. */
/* Vaste vorm per bullet: het vette deel op regel 1, de uitleg eronder. De langste
   bullet is 78 tekens en past pas vanaf 1181px op een regel zonder onder de 16px
   ondergrens te zakken (die regel staat onderaan dit bestand). Zonder deze vorm
   breekt de ene bullet op twee regels en de andere op drie, en dat leest als
   slordig. Twee regels die er allemaal hetzelfde uitzien lezen rustig. */
.hero-bullets li{position:relative; padding-left:32px; color:var(--ink-soft); font-size:1.04rem; font-weight:400; line-height:1.45}
.hero-bullets li b{display:block; font-size:1.1rem; font-weight:700; color:#fff; margin-bottom:1px}
.hero-bullets li::before{content:""; position:absolute; left:0; top:1px; width:21px; height:21px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%2334d27b'/%3E%3Cpath d='M17 8.5l-6.2 6.5L7 11.4' fill='none' stroke='%230a0a0c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.hero-note{font-size:1rem; color:var(--ink-mute); margin-top:16px}

/* video frame variant: 16:9 instead of the tall portrait */
.hero-frame--video{aspect-ratio:16/9; background:#000}
.hero-frame--video iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* ===== rev1: hero opt-in + cinematic photo hero =====
   Item 1: the early-access opt-in moves into the hero itself (above the fold on
   desktop and on 390px phones). Item 2 (per Vince, video removed from the hero
   after an A/B test): the wow comes from typographic scale, a cinematic real
   photo of Menno with a right-edge bleed on large screens, deeper ambient glow
   and the proof band. Restraint kept: scale and depth, no gloss. */
@media(min-width:921px){
  /* rev2b: give the copy column the lion's share so the headline wraps to 2-3
     lines instead of 4, and shrink the photo's share (Vince: the big photo was
     squeezing the text column tall). Compact vertical padding so the whole hero
     lands near 60vh and the next section peeks. */
  .hero-in--cine{grid-template-columns:1.36fr .64fr; gap:52px; padding:44px 24px 40px}
}
.lead-form--hero{max-width:560px; padding:14px 20px 12px; background:rgba(20,22,28,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.lead-form--hero .privacy{margin-top:8px}
.lead-form--hero .msg{min-height:0}
.lead-form--hero .msg:empty{display:none}
/* rev2b hierarchy: title, subtitle, bullets, then the opt-in. Bullets sit
   directly above the form and are tightened so the opt-in stays above the fold. */
.hero-copy .hero-bullets{margin:0 0 20px}
.hero-actions--scroll{margin:20px 0 0}
/* De kap van 400px met justify-self:center hield de foto op 308px breed, veel kleiner
   dan op de live pagina. Die is er 27 aug 2026 uit: de foto vult nu zijn kolom.
   De foto hoort rechts en niet links: de cursist kijkt naar links, en een lezer volgt
   de kijkrichting van een model. Rechts kijkt ze de lezer de tekst in. */
.hero-media--cine{position:relative; margin:0; max-width:none; justify-self:stretch}
.hero-media--cine .hero-photo{height:560px; object-position:50% 12%}
/* rev2b: hero-scoped headline size (global h1 clamp maxes at 4.4rem which made
   the hero H1 four lines tall). Keep the mobile floor near 2.7rem. */
.hero-copy h1{font-size:1.06rem; font-weight:700; color:var(--ink-soft); line-height:1.3; margin-bottom:12px; letter-spacing:.04em}
/* rev2b: subhead sized down from 1.28rem so it does not wrap to three tall lines
   (still well above the 1rem / 16px floor at 1.14rem). */
/* HERO TYPE SCALE (deliberate 3 tiers, do not flatten)
   tier 1  proposition      clamp 40-56px / 800 / #fff        what they must read first
   tier 2  benefit bullets  19px / 500 / --ink                what they read second
   tier 3  product name     17px / 700 / --ink-soft           identification, read last
   Ratio tier1:tier2 is about 3x on purpose. The status pill and the proof row sit at
   16px, the floor. Weight and colour carry the 2-to-3 step, size carries the 1-to-2 step. */
/* max-width is 30ch, not the English 22ch. The Dutch promise line is 105
   characters against the English 68, so 22ch broke it over five lines and pushed
   the opt-in off a laptop screen. Thirty holds it to four, the same count the
   live Dutch page runs it at. */
.hero-in--cine .hero-sub{text-wrap:balance; font-family:'Hanken Grotesk',sans-serif; font-weight:800; color:#fff; font-size:clamp(2rem, 1.3rem + 1.75vw, 2.7rem); line-height:1.08; letter-spacing:-.022em; margin-bottom:26px; max-width:26ch}
.hero-copy .hero-bullets{margin:0 0 26px}
.lead-form--hero label{margin-bottom:8px}
.lead-form--hero .privacy{margin-top:8px}
.hero-proof-row{margin-top:16px}
.hero-frame--cine{border-radius:var(--r-lg); box-shadow:0 0 0 1px rgba(255,255,255,.1), var(--shadow-hi), 0 26px 90px rgba(31,95,192,.28)}
/* rev2: in-hero compact proof row directly under the CTA (above the fold on mobile) */
.hero-proof-row{display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap; margin:18px 0 0}
.hero-proof-item{display:inline-flex; align-items:center; gap:7px; font-size:1rem; font-weight:600; color:var(--ink-soft); white-space:nowrap}
.hero-proof-item svg{flex:none; opacity:.9; color:var(--success)}
.hero-media--cine .hero-glow{inset:-16% -13%; background:radial-gradient(ellipse at 28% 26%, rgba(47,134,240,.44), transparent 58%), radial-gradient(ellipse at 76% 74%, rgba(31,95,192,.36), transparent 64%); filter:blur(58px); opacity:.75}
@media(max-width:920px){
  /* copy-first at tablet too: the opt-in is the primary element, the photo follows */
  .hero-media--cine{order:1; max-width:460px}
  .hero-media--cine .hero-photo{height:440px}
}
@media(max-width:600px){
  /* rev2 phones (390x844 fold check): headline + subhead + form + CTA button
     stay fully above the fold. Vertical budget is tightened only on phones by
     trimming the stack's top padding and the gaps between blocks (no copy or
     body-font changes). The contained portrait follows below and is height-capped
     so it never pushes the CTA down. Hide the third proof chip to avoid wrapping. */
  .hero-in--cine{padding-top:22px; gap:18px}
  /* Keep the full proposition and all three benefit bullets on phones. */
  .hero-copy h1{font-size:1.06rem; line-height:1.3; margin-bottom:10px}
  .hero-in--cine .hero-sub{font-size:2rem; line-height:1.06; margin-bottom:16px; max-width:none}
  .lead-form--hero label{margin-bottom:6px}
  .lead-form--hero{padding:14px 16px 12px}
  .lead-form--hero .privacy{margin-top:6px}
  .hero-copy .hero-bullets{margin:0 0 14px; gap:11px}
  /* De maat en regelafstand komen van de vaste vorm hierboven; alleen de inspringing
     en het vinkje worden hier kleiner. */
  .hero-bullets li{padding-left:29px}
  .hero-bullets li::before{width:19px; height:19px; top:2px}
  .hero-media--cine{max-width:none; margin:8px 0 0; width:100%}
  .hero-frame--cine{aspect-ratio:4/5}
  .hero-media--cine .hero-photo{height:100%; object-position:50% 9%}
  .hero-proof-item--hidephone{display:none}
  .lead-form--hero{padding:16px 16px 12px}
}

/* rev1: the intro video's generous home in #how (moved out of the hero) */
.how{overflow:hidden} /* clips the decorative glow so it cannot widen the page */
.how h2{max-width:none; margin-bottom:18px}
.how .how-in .btn{margin-top:10px}
.how-cine{position:relative; margin:0}
.how-cine .hero-glow{inset:-8% -5%; background:radial-gradient(ellipse at 30% 25%, rgba(47,134,240,.34), transparent 58%), radial-gradient(ellipse at 74% 78%, rgba(31,95,192,.3), transparent 64%); filter:blur(64px); opacity:.55}
.video-frame--cine{box-shadow:0 0 0 1px rgba(255,255,255,.1), var(--shadow-hi), 0 30px 100px rgba(31,95,192,.26)}
@media(max-width:600px){
  /* Was -24px terwijl de telefoongoot 20px is, dus stak het kader 8px buiten
     het scherm. Volgt nu dezelfde variabele als de andere volle-breedte-
     blokken. */
  .how-cine{margin-left:calc(-1 * var(--gutter-phone, 20px)); margin-right:calc(-1 * var(--gutter-phone, 20px))}
  .video-frame--cine{border-radius:0}
}

/* language selector strip */
.langstrip{border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-alt); padding:26px 0}
.langstrip .container{display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:center}
.langstrip .ll{font-size:1rem; font-weight:600; color:var(--ink-mute)}
.lang-thumbs{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:center}
.lang-thumbs a{display:block; border-radius:9px; overflow:hidden; border:1px solid var(--border); transition:border-color .2s var(--ease), transform .2s var(--ease)}
.lang-thumbs a:hover{border-color:var(--accent-2); transform:translateY(-2px)}
.lang-thumbs img{height:62px; width:auto; display:block}

/* alumni results stat grid */
.stat-head{max-width:680px; margin-bottom:34px}
.stat-head h2{margin-bottom:12px}
.stat-head p{color:var(--ink-soft); font-size:1.16rem}
.statgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:22px}
.statcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:24px; box-shadow:var(--shadow-card)}
.statcard b{display:block; font-family:'Hanken Grotesk'; font-weight:800; font-size:2.7rem; color:var(--accent-2); line-height:1; margin-bottom:10px; font-variant-numeric:tabular-nums}
.statcard span{color:var(--ink-soft); font-size:1.02rem}
.statgrid--detail{grid-template-columns:repeat(3,1fr)}
.statgrid--detail .statcard b{color:#fff; font-size:2rem}
.statgrid--detail .statcard .sh{display:block; color:#fff; font-weight:700; font-size:1.1rem; margin:0 0 8px; font-family:'Hanken Grotesk'}
.stat-src{font-size:1rem; color:var(--ink-mute)}
@media(max-width:920px){.statgrid{grid-template-columns:repeat(2,1fr)} .statgrid--detail{grid-template-columns:1fr}}
@media(max-width:520px){.statgrid{grid-template-columns:1fr}}

/* certification: centered head, world-map tile, caption, copy row */
.cert-head{text-align:center; max-width:780px; margin:0 auto 34px}
.cert-head h2{text-wrap:balance}
.cert-head .course-body{margin:14px auto 0; max-width:56ch}
.cert-map{position:relative; background:radial-gradient(ellipse 55% 60% at 14% 12%, rgba(47,134,240,.13), transparent 60%), var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:26px 26px 20px; display:grid; grid-template-columns:1.55fr 1fr; gap:22px; align-items:stretch}
.wmap{width:100%; height:auto; display:block}
/* land moet zichtbaar van de oceaan verschillen, anders lijken kustdots (Lissabon, Manila,
   Trinidad) in het water te zweven; op #1b1d23 met .05 kustlijn was dat verschil 1.07:1 */
.wm-land{fill:#23262d; stroke:rgba(255,255,255,.13); stroke-width:.5}
.wm-halo{fill:rgba(47,134,240,.16)}
/* Vier maten, niet vier kleuren: een stad met tien cursisten hoort groter te zijn dan een
   stad met een, maar de kaart mag geen legenda nodig hebben om te lezen. gen_sales_maps.py
   zet de r per dot in de SVG (klasse wm-dot--1 t/m --4); de media query onderaan schaalt
   die maten mee als de kaart krimpt. */
.wm-dot{fill:var(--accent-2); opacity:.9}
.wm-island{fill:#23262d; stroke:rgba(255,255,255,.22); stroke-width:.7}
/* De wereldkaart is 2,7 keer zo breed als hoog, de Beneluxkaart is hoger dan breed. Zonder
   deze kolom rekte de wereldkaart-cel mee met de Benelux-cel en zakte de callout los van de
   kaart naar de onderrand van de kaart-tegel, ruim 500px onder de Verenigde Staten die hij
   aanwijst. De kolom houdt de callout op de kaart en vult de rest met het bijschrift. */
.wm-col{display:flex; flex-direction:column; justify-content:center; gap:14px; align-self:stretch; min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:16px 16px 14px}
.wm-stage{position:relative}
/* De enige tekst bij de kaart, en hij hoort bij de kaart: hij staat in de kaarttegel,
   direct onder de kaart. Als chip op de kaart zelf dekte hij 30 steden af, want de lege
   oceaan linksonder is op deze breedte niet leeg genoeg voor vier regels tekst. */
.wm-note{margin:0; color:var(--ink-soft); font-size:1rem; line-height:1.45; max-width:56ch}
/* Onder de 920px past de wereldkaart naast de Beneluxkaart niet meer: beide zakken naar
   volle breedte. Deze regel hoort hier en niet bovenaan het bestand, want de basisregel
   van .cert-map staat hierboven en wint anders op bronvolgorde. */
@media(max-width:920px){
  .cert-map{grid-template-columns:1fr}
  .bxmap{max-width:420px; margin:0 auto}
  .wm-col{align-self:stretch}
}
.cert-foot{display:grid; grid-template-columns:1fr; gap:26px 36px; align-items:start; max-width:960px; margin:38px auto 44px}
.cert-foot-copy p{color:var(--ink-soft); font-size:1.06rem; margin:0 0 14px; line-height:1.62}
.cert-foot-copy p:last-child{margin-bottom:0}
@media(max-width:760px){
  .cert-map{padding:16px 14px 14px}
  /* De wereldkaart is dan ongeveer een derde van zijn ontwerpbreedte, dus een dot van 1,8
     eenheden komt onder een halve pixel uit en verdwijnt. Elke maat gaat mee omhoog. */
  .wm-dot--1{r:3}
  .wm-dot--2{r:3.6}
  .wm-dot--3{r:4.4}
  .wm-dot--4{r:5.4}
}
@media(max-width:480px){
  .wm-dot--1{r:4}
  .wm-dot--2{r:4.6}
  .wm-dot--3{r:5.4}
  .wm-dot--4{r:6.4}
  .cert-foot{grid-template-columns:1fr; margin:30px auto 36px}
}

/* founder bio.
   The seminar photo is deliberate: a full room signals status in a way a studio portrait
   cannot. It is a 3:2 landscape, so the media column frames and crops it in CSS
   (object-position keeps Menno and the slide and drops the empty left wall) instead of
   letterboxing it into a portrait slot. */
.founder-photo{display:block; width:100%; height:auto; aspect-ratio:900/645; object-fit:cover;
  object-position:100% 36%; border-radius:var(--r-lg); border:1px solid var(--border); box-shadow:var(--shadow-hi)}
/* The rule above frames ONE photo: the object-position was measured against
   Menno's seminar shot. The Dutch page adds a second bio, and Richard's photo is
   a different frame entirely, so reusing that crop pushed the picture to a right
   edge chosen for someone else's slide. This shows his photo whole: native 3:2,
   centred, nothing cropped away. */
.founder h2{margin-bottom:8px}
.founder p{color:var(--ink-soft); font-size:1.08rem; margin-bottom:16px; max-width:54ch}
@media(max-width:900px){
  /* text first, portrait under it: a cutout reads fine at any width, so it keeps
     its full shape instead of being boxed into a letterbox crop */
  .founder p{max-width:none}
}

/* how-it-works split with YouTube */
.how-in{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
.how h2{margin-bottom:14px}
.how p{color:var(--ink-soft); font-size:1.1rem; margin-bottom:16px; max-width:54ch}
.how .video-frame{position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-hi); background:#000}
.how .video-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
@media(max-width:820px){.how-in{grid-template-columns:1fr; gap:30px} .how p{max-width:none}}

/* curriculum accordion */
.curric-intro{max-width:680px; margin-bottom:30px}
.curric-intro h2{margin-bottom:12px}
.curric-intro p{color:var(--ink-soft); font-size:1.12rem; margin-bottom:8px}
.curric-list{max-width:none; margin:0; border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; background:var(--surface)}
.curric-list .faq-item{border-bottom:1px solid var(--border); padding:0 22px}
.curric-list .faq-item:last-child{border-bottom:none}
.curric-list .faq-q{padding:20px 46px 20px 0; font-size:1.1rem}
.curric-list .wk{display:block; font-size:1rem; font-weight:700; color:var(--accent-2); letter-spacing:.02em; margin-bottom:3px}
.curric-list .faq-a-in{padding:0 46px 22px 0}
.curric-list .faq-a-in ul{margin:0; padding-left:20px; color:var(--ink-soft); font-size:1.02rem; line-height:1.6}
.curric-list .faq-a-in li{margin-bottom:5px}
.curric-foot{text-align:center; margin-top:28px}

/* practical / tested-in-the-trenches list */

/* exercise library + transformation tiles */

/* transformations: premium masonry collage of real before/after photos (native aspect, no crop) */

/* exercise library: framed as a screenshot of the in-course library (not an interactive widget) */
.exlib-browser{margin:0; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); box-shadow:var(--shadow-hi)}
.exlib-bar{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; padding:13px 18px; border-bottom:1px solid var(--border); background:rgba(255,255,255,.03)}
.exlib-dots{display:inline-flex; gap:7px}
.exlib-dots i{width:11px; height:11px; border-radius:50%; background:var(--border-2)}
.exlib-bar-title{grid-column:2; display:inline-flex; align-items:center; gap:9px; color:var(--ink-soft); font-weight:700; font-size:1.0rem; font-family:'Hanken Grotesk'; white-space:nowrap}
.exlib-bar-title svg{color:var(--accent-2)}
.exlib-cap{padding:0 18px 16px; margin:0; color:var(--ink-mute); font-size:1rem; text-align:center}
/* exam: real graduates holding their certificate */
/* rev2 item 4: compact single strip. Shorter tiles (16/10 not 4/5) so the whole
   section is roughly half the height it was, and it no longer reads as a scroll-stop. */
.exlib-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:12px}
.exlib-tiles figure{position:relative; margin:0; aspect-ratio:16/10; border-radius:9px; overflow:hidden; border:1px solid var(--border); cursor:pointer}
.exlib-tiles img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s var(--ease)}
.exlib-tiles figure::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(8,8,11,.5)); pointer-events:none}
.exlib-tiles figure:hover img{transform:scale(1.05)}
.exlib-play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; width:32px; height:32px; border-radius:50%; background:rgba(12,13,17,.55); border:1.5px solid rgba(255,255,255,.85); backdrop-filter:blur(3px)}
.exlib-play::before{content:""; position:absolute; left:53%; top:50%; transform:translate(-50%,-50%); border-style:solid; border-width:5px 0 5px 9px; border-color:transparent transparent transparent #fff}
@media(max-width:760px){
  .exlib-tiles{display:grid; grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(78vw,320px); gap:12px; padding:12px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-inline:contain; scrollbar-width:none}
  .exlib-tiles::-webkit-scrollbar{display:none}
  .exlib-tiles figure{scroll-snap-align:start}
  .exlib-play{width:36px; height:36px}
}

/* bonus / network bands (reuse book-band rhythm) */
.bonus-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
.bonus{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:26px; box-shadow:var(--shadow-card)}
.bonus img{width:74px; height:74px; object-fit:contain; border-radius:12px; margin-bottom:16px}
/* rev2: one shared equal-height media zone across all three bonus cards, so headings
   and body copy start on the same baseline regardless of the media inside. */
.bonus .bonus-media{height:260px; margin-bottom:18px; display:flex; align-items:center; justify-content:center; overflow:hidden}
.bonus .bonus-media .tkx2{margin-bottom:0; width:100%}
.bonus .bonus-media .tkx2-stage{height:250px}
.bonus .bonus-media .tkx2-card{max-width:188px}
.bonus .bonus-media .bonus-img{margin-bottom:0}
.bonus .bonus-media .bonus-img--people{width:100% !important; height:100% !important; aspect-ratio:auto; object-fit:cover !important; border-radius:10px}
.bonus h3{color:#fff; margin-bottom:9px}
.bonus p{color:var(--ink-soft); font-size:1.02rem}
.bonus ul{margin:10px 0 0; padding-left:18px; color:var(--ink-soft); font-size:1.02rem}
@media(max-width:820px){.bonus-grid{grid-template-columns:1fr} .bonus .bonus-media{height:auto; min-height:220px}}

/* research pledge band */

/* pricing */
.price-head{max-width:680px; margin-bottom:26px}
.price-head h2{margin-bottom:12px}
.price-head p{color:var(--ink-soft); font-size:1.12rem}
.price-switch{display:inline-flex; gap:4px; padding:5px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); margin-bottom:30px}
.price-switch button{font-family:inherit; font-size:1rem; font-weight:600; cursor:pointer; color:var(--ink-soft); background:none; border:none; border-radius:var(--r-pill); padding:10px 20px; transition:color .2s, background .2s}
.price-switch button[aria-pressed="true"]{color:#fff; background:var(--accent-btn)}
.price-switch button:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
.plans[hidden]{display:none}
.plan{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:30px 28px; box-shadow:var(--shadow-card)}
.plan--feature{border-color:rgba(47,134,240,.4); background:linear-gradient(180deg,#16191f,#121319); position:relative}
.plan--feature .plan-flag{position:absolute; top:-14px; left:28px; background:var(--accent-btn); color:#fff; font-size:1rem; font-weight:700; padding:5px 13px; border-radius:var(--r-pill)}
.plan .pname{font-family:'Hanken Grotesk'; font-weight:700; color:#fff; font-size:1.2rem; margin-bottom:14px}
.plan .pprice{display:flex; align-items:baseline; gap:9px; font-family:'Hanken Grotesk'; font-weight:800; margin-bottom:6px}
.plan .pprice .now{font-size:2.5rem; color:#fff; line-height:1}
.plan .pprice .per{font-size:1.04rem; color:var(--ink-mute); font-weight:600}
.plan .pprice .was{font-size:1.2rem; color:var(--ink-mute); text-decoration:line-through; font-weight:600}
.plan .pnote{font-size:1rem; color:var(--success); font-weight:600; margin-bottom:18px}
.plan .pdesc{color:var(--ink-soft); font-size:1.02rem; margin-bottom:22px; flex:1}
.plan .btn{width:100%}
.price-fine{max-width:840px; margin:30px auto 0; display:grid; gap:11px}
.price-fine li{position:relative; padding-left:28px; color:var(--ink-soft); font-size:1.02rem; line-height:1.5; list-style:none}
.price-fine li::before{content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%; background:var(--accent-2)}
.price-fine a{font-weight:600}
@media(max-width:920px){.plans{grid-template-columns:1fr}}

/* early access + guarantee + scholarship cards */
.split-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:34px 36px; box-shadow:var(--shadow-card)}
.split-card.feature{border-color:rgba(47,134,240,.4); background:linear-gradient(180deg,#16191f,#121319)}
.split-card h2,.split-card h3{margin-bottom:12px}
.split-card p{color:var(--ink-soft); font-size:1.06rem; margin-bottom:14px}
.split-card p:last-child{margin-bottom:0}

/* contact methods */
.cmethods{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.cmethod{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:20px 22px; box-shadow:var(--shadow-card); color:inherit; text-decoration:none; transition:border-color .2s var(--ease), transform .2s var(--ease)}
.cmethod:hover{border-color:var(--accent-2); transform:translateY(-2px)}
.cmethod .ci{width:46px; height:46px; border-radius:12px; background:rgba(47,134,240,.14); border:1px solid rgba(47,134,240,.3); color:var(--accent-2); display:flex; align-items:center; justify-content:center; flex:none}
.cmethod b{display:block; color:#fff; font-size:1.06rem}
.cmethod span{color:var(--ink-mute); font-size:1rem}
@media(max-width:760px){.cmethods{grid-template-columns:1fr}}

/* reviews: long-form quote cards (reuse rcard-q in a 2-col masonry-ish grid) */
.rev-grid--two{grid-template-columns:repeat(2,1fr)}
.rcard-q .who .who-init{width:50px; height:50px; border-radius:50%; background:rgba(47,134,240,.16); color:var(--accent-2); display:flex; align-items:center; justify-content:center; font-family:'Hanken Grotesk'; font-weight:800; font-size:1.04rem; flex:none; border:1px solid var(--border-2)}
@media(max-width:760px){.rev-grid--two{grid-template-columns:1fr}}

/* Klantresultaten: de voor- en nafoto's van de Engelse pagina, zelfde behandeling als de
   proof wall. Kolommen in plaats van een grid, want de foto's hebben sterk uiteenlopende
   hoogtes en zouden in een grid rijen wit laten staan. */
.tf-grid{columns:5 200px; column-gap:12px}
.tf-card{break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 14px; border-radius:12px; overflow:hidden; border:1px solid var(--border-2); background:var(--surface-2); box-shadow:var(--shadow-card); transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.tf-card img{width:100%; display:block; filter:saturate(.97) contrast(1.02)}
.tf-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-hi)}
@media(max-width:920px){.tf-grid{columns:4 160px}}
@media(max-width:560px){.tf-grid{columns:3 110px; column-gap:8px} .tf-card{margin-bottom:8px}}

/* === testimonials: masonry so varying-length quotes pack tight ===
   Two columns, not three. Measured 10 aug 2026 at 1440px: in three columns the
   four long quotes are 652-680px tall against an ideal column of 1083px, so the
   balancer put one card in the left column and left 672px of dead space under
   it. Two columns halve every card's height (the quotes get twice the width),
   which lets the balancer split 6 cards as 3 + 3 with under 30px between the
   columns. The DOM order below is the balanced one; qa/nl.mjs guards it. */
.rev-grid--mason{display:block; column-count:2; column-gap:20px}
.rev-grid--mason > .rcard-q{break-inside:avoid; -webkit-column-break-inside:avoid; width:100%; margin:0 0 20px}
@media(max-width:600px){.rev-grid--mason{column-count:1}}
/* === proof block: a USP claim plus the graduates who confirm that exact claim, as one object ===
   Editing rule: every quote under a claim must contain a phrase that proves that claim, and the
   <mark> is that phrase, verbatim from the review. If no phrase can be marked, the quote does not
   belong under that claim. Stars appear only where a real star rating exists (Trustpilot). The
   curated reviews on mennohenselmans.com/reviews carry no rating, so they carry no stars. */
.proofblock{padding:0 0 88px; margin-top:-52px}
/* Liep 122px smaller dan het blok erboven, wat als een uitlijnfout leest.
   Volgt nu gewoon de containerbreedte. */
.pb{max-width:none; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-card); overflow:hidden}
.pb-head{display:flex; align-items:center; gap:12px; padding:19px 28px; border-bottom:1px solid var(--border); background:rgba(255,255,255,.022)}
.pb-lbl{display:inline-flex; align-items:center; gap:12px; font-family:'Hanken Grotesk',sans-serif; font-weight:700; font-size:1.1rem; color:#fff; line-height:1.3}
.pb-lbl::before{content:""; width:24px; height:2px; background:var(--accent); border-radius:2px; flex:none}
.pb-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr)}
.pb-item{display:flex; flex-direction:column; gap:16px; padding:25px 26px 26px; border-left:1px solid var(--border); min-width:0}
.pb-item:first-child{border-left:0}
.pb-item blockquote{margin:0; color:var(--ink); font-size:1.04rem; line-height:1.62}
.pb-item mark{background:rgba(47,134,240,.17); color:#eaf2fd; border-radius:4px;
  /* negative margin cancels the padding so the highlight does not open a gap after a quote mark */
  padding:.13em .2em; margin:0 -.16em; box-decoration-break:clone; -webkit-box-decoration-break:clone}
.pb-item .stars svg{width:17px; height:17px; padding:2px; border-radius:3px}
.pb-foot{margin-top:auto; display:flex; flex-direction:column; gap:13px}
.pb-who{display:flex; align-items:center; gap:13px}
.pb-av{width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--border-2)}
.pb-init{width:56px; height:56px; border-radius:50%; background:rgba(47,134,240,.16); color:var(--accent-2); display:flex; align-items:center; justify-content:center; font-family:'Hanken Grotesk',sans-serif; font-weight:800; font-size:1.08rem; flex:none; border:1px solid var(--border-2)}
.pb-who b{display:block; color:#fff; font-size:1.04rem; line-height:1.32}
.pb-who small{display:block; color:var(--ink-mute); font-size:1rem; line-height:1.36}
@media(max-width:900px){
  .pb-list{grid-template-columns:1fr}
  .pb-item{border-left:0; border-top:1px solid var(--border)}
  .pb-item:first-child{border-top:0}
}
@media(max-width:760px){.proofblock{padding:0 0 48px; margin-top:-26px}}
@media(max-width:560px){.pb-head{padding:16px 20px} .pb-item{padding:21px 20px 22px}}

/* === announcement bar (course-only, always shown on this page) === */
.announce.course-bar{display:flex}

/* === logo strip: optical-size balance (equal visual mass, not equal pixels) === */
.marquee-track img{width:auto !important; max-width:128px; object-fit:contain; flex:0 0 auto}
/* NOTE: per-logo heights are set in the v3 block lower in this file (search "SINGLE SOURCE OF
   TRUTH"). Do not add per-logo heights here - this stale block used to conflict with it. */

/* === hero meta row below the video frame === */
.hero-meta-row{display:flex; align-items:center; gap:20px; margin-top:14px; flex-wrap:wrap}
.hero-meta-item{display:flex; align-items:center; gap:7px; font-size:1rem; color:var(--ink-soft); white-space:nowrap}
.hero-meta-item svg{flex:none; opacity:.8}

/* === stat card progress bars === */
.statcard .sc-bar{height:4px; border-radius:99px; background:rgba(255,255,255,.08); margin:10px 0 0; overflow:hidden}
.statcard .sc-bar span{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#1a5ec8,var(--accent-2))}

/* === guarantee chip in pricing section === */
/* rev2: pricing assurances strip, 3 equal aligned chips (replaces the old seal + run-on line) */
/* Even breed als .plans erboven, dus geen eigen max-width (Vince 1 sep 2026).
   Op 940px was een blok 302px breed en brak de tekst rond 37 tekens per regel,
   op verschillende plekken per blok. Op containerbreedte is een blok 366px en
   loopt de regel tot ongeveer 48 tekens. */
.assurances{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:30px 0 0}
/* zelfde patroon als .cred-card in de founder-sectie (Vince 2 aug 2026) */
.assure{display:grid; grid-template-columns:auto 1fr; gap:15px; align-items:start; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:16px 18px; box-shadow:var(--shadow-card)}
/* .assure span sets the body colour and is one specificity point heavier than
   a bare .assure-ic, so the icons rendered in body grey instead of the accent.
   Measured 10 aug: wanted #6aa3ee, computed #c8cdd6. Present on the English
   page too. */
.assure .assure-ic{width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(47,134,240,.14); border:1px solid rgba(47,134,240,.3); color:var(--accent-2); flex:none}
.assure b{display:block; color:#fff; font-family:'Hanken Grotesk',sans-serif; font-size:1.06rem; line-height:1.3; margin-bottom:4px; text-wrap:balance}
.assure span{display:block; color:var(--ink-soft); font-size:1rem; line-height:1.5}
@media(max-width:820px){.assurances{grid-template-columns:1fr}}
/* rev2: scholarships collapsed into a compact expandable to cut its footprint */

/* === desktop sticky nav CTA (shown after hero scrolls off) === */
.nav-cta-sticky{display:none}
@media(min-width:1180px){
  .nav.has-hero-passed .nav-cta-sticky{display:inline-flex}
  .nav.has-hero-passed .nav-cta{display:none}
}

/* === curriculum cluster overview grid === */
/* min-width:0 on the items, or a long Dutch compound sets a min-content floor
   wider than the track and the right column lands outside the viewport.
   Measured 10 aug at 390px: 234px columns inside a 370px grid. */
.cluster-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:32px}
.cluster-grid>*{min-width:0}
.cluster{min-width:0; overflow-wrap:anywhere; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); padding:20px 18px; box-shadow:var(--shadow-card)}
.cluster .cl-ic{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9px; background:rgba(47,134,240,.13); border:1px solid rgba(47,134,240,.28); color:var(--accent-2); margin-bottom:12px}
.cluster .cl-week{display:block; font-size:1rem; font-weight:700; color:var(--accent-2); letter-spacing:.02em; margin-bottom:6px}
.cluster h3,.cluster h4{color:#fff; font-size:1.04rem; margin:0 0 6px; font-family:'Hanken Grotesk'; font-weight:700}
.cluster p{color:var(--ink-mute); font-size:1rem; margin:0; line-height:1.45}
@media(max-width:760px){.cluster-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cluster-grid{grid-template-columns:1fr}}

/* === bonus cards: full-width 16:9 photo (overrides shared .bonus img rule) === */
.bonus .bonus-img{width:100% !important; height:auto !important; aspect-ratio:16/9; object-fit:cover !important; object-position:center; border-radius:10px; margin-bottom:18px; border:1px solid var(--border)}
/* per-image crop tuning */
.bonus .bonus-img--tool{object-position:center 18%; background:#0e0f13}
.bonus .bonus-img--people{object-position:center 28%}
/* tested-in-the-trenches: real coaching photo + compact graduate quote */
.practical-media .course-photo{aspect-ratio:4/3; object-fit:cover; object-position:center 30%}
.practical-quote{margin-top:16px; padding:16px 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-card); text-align:left}
.practical-quote .stars{margin-bottom:9px}
.practical-quote q{display:block; quotes:none; color:var(--ink); font-size:1.04rem; line-height:1.55; margin-bottom:9px}
.practical-quote q::before{content:'"'} .practical-quote q::after{content:'"'}
.practical-quote .pq-who{font-size:1rem; color:var(--ink-mute)}
.practical-quote .pq-who b{color:#fff}
/* discounts: partner-logo panel in place of a photo */

.btn .pdf-ic{flex:none; margin-right:2px}

/* ---------- course outline email capture ---------------------------------- */
.ogate{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:22px}
.ogate[hidden]{display:none}
.ogate-scrim{position:absolute; inset:0; background:rgba(4,5,7,.76); backdrop-filter:blur(5px)}
.ogate-card{position:relative; z-index:1; width:100%; max-width:472px; background:var(--surface); border:1px solid var(--border-2);
  border-radius:var(--r-lg); box-shadow:0 32px 80px rgba(0,0,0,.62); padding:30px 30px 26px; max-height:calc(100vh - 44px); overflow-y:auto}
.ogate-x{position:sticky; top:0; float:right; margin:-8px -8px 0 0; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; border-radius:50%; color:var(--ink-soft); cursor:pointer}
.ogate-x:hover{color:#fff; background:rgba(255,255,255,.07)}
.ogate-x:focus-visible{outline:3px solid var(--accent-2); outline-offset:2px}
.ogate-badge{display:inline-flex; align-items:center; gap:7px; font-size:1rem; font-weight:700; letter-spacing:.04em;
  color:var(--accent-2); background:rgba(47,134,240,.12); border:1px solid rgba(47,134,240,.34); border-radius:var(--r-pill); padding:5px 12px; margin-bottom:15px}
.ogate-card h2{font-size:1.6rem; line-height:1.18; margin-bottom:9px}
.ogate-card #ogate-desc{color:var(--ink-soft); font-size:1.04rem; line-height:1.55; margin-bottom:19px}
.ogate-field{margin-bottom:13px}
.ogate-field label{display:block; font-size:1rem; font-weight:600; color:var(--ink); margin-bottom:6px}
.ogate-field input{width:100%; font-family:inherit; font-size:1.0625rem; padding:14px 16px; border-radius:var(--r-btn);
  border:1.5px solid var(--border-2); background:rgba(255,255,255,.06); color:#fff}
.ogate-field input::placeholder{color:var(--ink-mute)}
.ogate-field input:focus-visible{outline:3px solid var(--accent-2); outline-offset:1px; border-color:var(--accent-2)}
.ogate-field input[aria-invalid="true"]{border-color:#ff9d9d; outline-color:#ff9d9d}
.ogate-form .btn{width:100%; justify-content:center; margin-top:4px}
.ogate-fine{font-size:1rem; color:var(--ink-mute); line-height:1.5; margin-top:11px}
@media(max-width:520px){.ogate{padding:14px} .ogate-card{padding:26px 20px 22px} .ogate-card h2{font-size:1.42rem}}

/* ---------- repeated CTA band ----------------------------------------------
   The original sales page repeats its CTA after every major block; this page
   had an 11,000px stretch between the science section and pricing with nothing
   to act on. Four bands close that gap. Each is state-aware: the primary CTA
   is wired through [data-cta="main"], so it never shows a checkout link outside
   the open state, and the secondary always opens the course-outline capture. */
.cta-band{background:linear-gradient(160deg,#15171d,#0d0e12); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.cta-band-in{max-width:var(--container); margin:0 auto; padding:34px 24px; display:flex; align-items:center; justify-content:center; gap:20px 28px; flex-wrap:wrap; text-align:center}
.cta-band p{margin:0; color:#fff; font-family:'Hanken Grotesk',sans-serif; font-size:1.32rem; font-weight:700; line-height:1.3; letter-spacing:-.01em}
.cta-band .cta-band-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center}
@media(max-width:720px){
  .cta-band-in{flex-direction:column; padding:26px 20px; gap:16px}
  .cta-band p{font-size:1.18rem}
  .cta-band .cta-band-actions{width:100%; flex-direction:column; gap:10px}
  .cta-band .btn{width:100%; justify-content:center}
}

/* ============================================================
   SALE STATE SYSTEM  (added 29 jul 2026)
   The cohort cycle has three selling states. One attribute on <body>
   drives every CTA and every date-dependent sentence on the page:

     data-sale="presale"  registration not open yet, the page collects emails
     data-sale="open"     registration open, checkout links live
     data-sale="soldout"  temporary, right after a cohort starts

   Pre-sale and "closed" are the SAME state: in both cases the page collects
   emails for the next round. Sold-out is a temporary window straight after a
   cohort starts, and once it lapses the page returns to pre-sale for the next
   round. So this is a cycle, and it needs no manual intervention ever.

   The state RESOLVES ITSELF from the COHORT round list in the page script.
   Preview any state with ?sale=open or the switcher at the bottom right
   (preview-only, remove for prod).

   HARD RULE: in presale and soldout there are ZERO checkout links on the page.
   Only data-sale="open" is allowed to emit an atc_id URL. This mirrors the
   standing closed-round policy on the concierge bots. Do not "temporarily"
   hardcode a checkout link into a presale variant.

   Markup contract:
     .sale-only  + .s-presale / .s-open / .s-soldout   variant blocks
                   (a variant may carry more than one state class)
     [data-cta="main"]   generic CTA, label + href set from SALE_COPY
     [data-cta="plan"][data-plan-key="..."]  pricing button, href from COHORT.links
   ============================================================ */
[data-sale="presale"] .sale-only:not(.s-presale),
[data-sale="open"]    .sale-only:not(.s-open),
[data-sale="soldout"]  .sale-only:not(.s-soldout){display:none !important}

/* the enrol block that replaces the hero opt-in while the cart is open.
   Het grijze kader eromheen is er 27 aug 2026 uit: het las als een formulierveld,
   trok het oog weg van de bullets en dwong de knop over de volle breedte met de
   tekst gecentreerd. Nu is het gewoon een knop, links, zoals alle lopende tekst. */
.hero-enrol{background:none; border:0; padding:0; margin:28px 0 0}
.hero-enrol .btn{width:auto; justify-content:flex-start}
/* geen prijs in de hero (Vince 2 aug 2026): eerst waarde, dan prijs; eerste prijsvermelding staat in #pricing */

/* ---- hero tier-1 guards, last in the cascade on purpose ----
   The 3-tier scale is fixed; these only stop tier 1 from wrapping into an extra line
   and pushing the opt-in or the next-section peek off the first screen. */
/* Deze reeks is 27 aug 2026 opgeschoond. De oude waarden hoorden bij een kop van
   3,5rem in een blok met een kader eromheen; die kop is nu 2,7rem en het kader is
   weg, dus de hero is uit zichzelf al lager. Elke overschrijving van de
   kopgrootte stond BOVEN de nieuwe clamp en maakte de kop op smalle of lage
   schermen juist groter dan bedoeld. Wat overblijft regelt alleen nog ruimte,
   plus een stap in de foto op echt lage schermen. */
/* 601-920px never got a tier value and fell through to the generic 52px */
@media(min-width:601px) and (max-width:920px){
  .hero-in--cine{padding-top:30px; padding-bottom:32px}
}
/* 921-995px is the tightest the two-column hero ever gets */
@media(min-width:921px) and (max-width:995px){
  .hero-in--cine{padding-bottom:10px}
  .hero-copy .hero-bullets{margin:0 0 12px}
  .hero-proof-row{margin-top:10px}
}
@media(min-width:921px) and (max-width:1140px){
  .hero-in--cine{padding-top:28px; padding-bottom:18px}
  .hero-in--cine .hero-sub{margin-bottom:20px}
  .hero-copy .hero-bullets{margin:0 0 18px}
}
/* Under 960px tall: keep 80px of the next section inside the fold. */
@media(min-width:921px) and (max-height:960px){
  .hero-in--cine{padding-top:30px; padding-bottom:24px}
  .hero-in--cine .hero-sub{margin-bottom:20px}
  .hero-copy .hero-bullets{margin:0 0 20px}
  .hero-media--cine .hero-photo{height:500px}
  .hero-proof-row{margin-top:12px}
}
/* short laptop screens (1366x768, 1280x800): the scale stays, the spacing pays */
@media(min-width:921px) and (max-height:840px){
  .hero-in--cine .hero-sub{margin-bottom:14px}
  .hero-in--cine{padding-top:20px; padding-bottom:12px}
  .hero-copy .hero-bullets{margin:0 0 14px; gap:10px}
  .hero-media--cine .hero-photo{height:430px}
  .lead-form--hero{padding:9px 18px 7px}
  .hero-enrol{margin-top:20px}
  .hero-proof-row{margin-top:8px}
}
/* Narrow and short: the photo pays, the scale stays. */
@media(min-width:921px) and (max-width:1200px) and (max-height:840px){
  .hero-media--cine .hero-photo{height:390px}
}
/* 1024x768, the narrowest screen that still gets the two-column hero. The promise
   line wraps one line wider there than on a 1366, which put the "featured in"
   strip 12px under the fold and left 45px of the next section showing. A hero
   that fills the screen to within 45px reads as the bottom of the page, which is
   the false bottom the auditor found at this exact size on 9 aug. Measured again
   2 sep 2026: this buys 46px and the strip is back inside the fold. */
@media(min-width:921px) and (max-width:1100px) and (max-height:800px){
  .hero-in--cine{padding-top:14px; padding-bottom:6px}
  /* The copy column is the tall one at this width, not the photo: taking 46px off
     the photo moved nothing at all. So the spacing in the copy pays. */
  .hero-in--cine .hero-sub{margin-bottom:10px}
  .hero-copy .hero-bullets{margin:0 0 10px; gap:8px}
  .hero-enrol{margin-top:16px}
  .hero-proof-row{margin-top:6px}
}

@media(max-width:600px){.hero-in--cine .hero-sub{text-wrap:balance}}
@media(max-width:400px){.hero-in--cine .hero-sub{font-size:1.8rem; line-height:1.08}}
/* narrow phones (360px): keep the whole opt-in above the fold */
@media(max-width:380px){
  .hero-in--cine .hero-sub{font-size:1.7rem}
  .hero-copy .hero-bullets{margin:0 0 12px}
}
/* very short laptops (1280x720): one more step down, scale intact */

@media(min-width:921px) and (max-height:760px){
  .hero-in--cine .hero-sub{font-size:2.35rem; margin-bottom:12px}
  .hero-copy .hero-bullets{margin:0 0 12px; gap:9px}
  .hero-media--cine .hero-photo{height:390px}
  .hero-in--cine{padding-top:14px; padding-bottom:8px}
  .hero-enrol{margin-top:16px}
  .lead-form--hero{padding:7px 16px 5px}
  .hero-proof-row{margin-top:6px}
}
/* Netbook-short viewports (1280x650 and down). The opt-in is the only thing on
   this screen that has to survive, so the photo gives up height first. */
@media(min-width:921px) and (max-height:700px){
  .hero-in--cine .hero-sub{font-size:2.25rem; margin-bottom:6px}
  .hero-media--cine .hero-photo{height:380px}
  .hero-bullets li{font-size:1.04rem; line-height:1.24}
  .hero-copy .hero-bullets{margin:0 0 6px; gap:7px}
  .hero-in--cine{padding-top:10px; padding-bottom:2px}
  .hero-copy h1{margin-bottom:7px}
}

/* ===== MOBILE QA PASS: 2 AUG 2026 ===== */
@media(max-width:600px){
  /* Keep the header compact and leave search inside the mobile menu. */
  .nav-in{height:64px; padding:0 20px; gap:10px}
  .nav.scrolled .nav-in{height:60px}
  .nav-search-btn{display:none}
  .brand-logo{width:min(225px,calc(100vw - 94px)); height:auto}
  .nav-burger{width:44px; height:44px; margin-left:auto; flex:none}

  /* Keep the cohort ribbon to one clear line. */
  .announce{min-height:44px; flex-wrap:nowrap; gap:8px; padding:9px 12px; white-space:nowrap; overflow:hidden}
  .ann-copy--desktop{display:none}
  .ann-copy--mobile{display:inline}
  .announce .ann-pulse{width:8px; height:8px}

  /* Use a consistent 20px page gutter and give the first viewport more room. */
  .container{padding-left:20px; padding-right:20px}
  .hero-in--cine{padding-left:20px; padding-right:20px; padding-top:16px}
  .lead-form--hero{padding:12px}
  .lead-form--hero .row,.lead-form--hero input,.lead-form--hero .btn{width:100%}

  /* Mobile actions should fill the usable width of their cards or sections. */
  .course-cta .btn,.cta-band .btn,.how .btn,.curric-foot .btn,.plan .btn,
  .ea-date .lead-form .btn,.cf-actions .btn{width:100%; justify-content:center}
  .plan{padding:24px 20px}
  .split-card{padding:24px 20px}
  .ea-date-grid{gap:20px}
  .ea-date .lead-form{width:100%; max-width:none; padding:20px 16px}

  /* One focused action in the sticky bar. */
  .mcta{padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .mcta-in,.mcta-actions{width:100%; gap:0}
  .mcta .btn{width:100%; min-height:52px}

  /* Compact cards with centered, high-contrast icons. */
  .assurances{gap:12px; margin-top:24px}
  .assure{grid-template-columns:40px minmax(0,1fr); gap:14px; padding:18px 16px}
  /* Geen color hier: .assure .assure-ic hierboven is zwaarder en wint toch, dus deze
     regel deed alleen alsof de iconen op mobiel lichter waren. */
  .assure-ic{width:40px; height:40px; border-radius:50%; background:rgba(47,134,240,.18); border-color:rgba(106,163,238,.48)}
  .assure-ic svg{width:23px; height:23px; display:block; overflow:visible; stroke-width:2.1}
}

@media(max-width:760px){
  /* Media and proof cards should use the full content width on phones and tablets. */
  .course-media{width:100%; max-width:none}
  .practical-media .course-photo{aspect-ratio:4/3; object-position:center 28%}
  .exlib-browser{width:100%}
  .exlib-bar{grid-template-columns:auto 1fr; padding:12px 14px}
  .exlib-bar-title{grid-column:2; justify-self:center; padding-right:38px}
  /* Die 38px centreert de titel tegen de stipjes links, maar onder de 400px
     duwt hij hem het kaartje uit. Daar wint passen van centreren. */
  @media(max-width:400px){.exlib-bar-title{padding-right:0; justify-self:start}}
  .exlib-cap{padding:2px 16px 16px; text-align:left}
}

@media(max-width:900px){
  /* The compact header and cohort ribbon are used across the full mobile-nav range. */
  .nav-search-btn{display:none}
  .announce{min-height:44px; flex-wrap:nowrap; gap:8px; padding:9px 12px; white-space:nowrap; overflow:hidden}
  .ann-copy--desktop{display:none}
  .ann-copy--mobile{display:inline}
  .announce .ann-cta{display:none}
  .announce .ann-pulse{width:8px; height:8px}
}


/* revealed by app.js only after the opt-in is confirmed */
.og-fallback[hidden]{display:none}
.og-fallback{width:100%; justify-content:center; margin-bottom:8px}

/* ---- bullets op één regel, bewust als laatste in de cascade ----
   Vanaf 1181px is de tekstkolom breed genoeg om de langste bullet (78 tekens) op
   één regel te zetten zonder onder de 16px ondergrens te zakken: 1.01rem is 16,2px.
   Deze regel moet later staan dan de laptop-uitzonderingen hierboven, anders zetten
   die de bullets terug op 1,1rem en breken ze alsnog. Daaronder blijft de vaste vorm
   van twee regels gelden, die bovenin dit bestand staat. */
@media(min-width:1181px){
  .hero-bullets li{font-size:1.01rem; line-height:1.5; color:var(--ink)}
  .hero-bullets li b{display:inline; font-size:inherit; color:#fff}
  .hero-copy .hero-bullets{gap:13px}
}
/* Op een smalle telefoon (360x740) viel de inschrijfknop net onder de vouw doordat
   het weggehaalde kader vervangen was door 28px marge. Gemeten: knop klaar op 760px
   bij een scherm van 740. Hier wint de ruimte, niet de maat. */
@media(max-width:600px){
  .hero-enrol{margin-top:16px}
}
@media(max-width:400px){
  .hero-enrol{margin-top:12px}
  .hero-in--cine .hero-sub{margin-bottom:14px}
  .hero-copy .hero-bullets{margin:0 0 12px; gap:9px}
}

/* ---- de hero op de telefoon, gelijkgetrokken met de Engelse pagina (4 sep 2026) ----
   Vince: de Nederlandse hero neemt op mobiel meer ruimte in dan de Engelse, dus er
   past minder op het eerste scherm. Gemeten op 415x757: de inschrijfknop eindigde op
   725 en de reviewregel op 769, dus buiten beeld; op 375x667 en 360x640 viel de knop
   zelf onder de vouw. De Engelse pagina zat daar op 593 en 717.

   Het verschil zat niet in de ruimte, die is op beide pagina's gelijk, maar in de
   bullets: vier stuks van elk drie regels tegen drie van gemiddeld 2,7. Samen 308px
   tegen 195px. Twee dingen daarvan zijn vorm, een is inhoud.

   1. Het vetgedrukte label loopt weer door in de zin. Dat is precies de vorm die
      deze pagina vanaf 1181px al voert (de regel hierboven); alleen de smallere
      maten zetten het label op een eigen regel, wat elke bullet een derde regel
      kostte zonder er iets voor terug te geven.
   2. Tekengrootte en regelhoogte gelijk aan de Engelse pagina: 1,02rem is 16,3px en
      blijft dus boven de ondergrens van 16px.
   3. De vierde bullet valt onder 600px weg. Vince, 4 sep 2026. De belofte zelf blijft
      op de pagina staan: "Wekelijks bijgewerkt met het nieuwste onderzoek" staat in
      #science, het blok direct onder de hero. Op een tablet (601-920px) is er ruimte
      genoeg en blijven alle vier staan.

   Gemeten na afloop op 415x757: knop klaar op 572, reviewregel op 616 en de foto
   begint op 642, dus daar komt nu ook 115px van de diploma-uitreiking mee. Op
   375x667 en 360x640 staan knop en reviewregel binnen de vouw. */
@media(max-width:920px){
  .hero-bullets li{font-size:1.02rem; line-height:1.36}
  .hero-bullets li b{display:inline; font-size:inherit}
}
@media(max-width:600px){
  .hero-bullets li:nth-child(4){display:none}
}

/* ---- fotobanden uit de beeldbank (27 aug 2026) ----
   Vijf blokken hadden geen enkel beeld en lazen daardoor als kale tekstvlakken.
   Dit is bewust een minimale ingreep: er komt alleen een foto bij, de opbouw van
   die blokken blijft precies zoals hij was. Echte cursisten uit de beeldbank van
   Menno, geen gegenereerd beeld. */
/* Crop herzien 1 sep 2026 (Vince: "mensen zijn half met hun hoofd afgesneden").
   Twee dingen waren fout en ze versterkten elkaar.

   1. De band was te laag. `clamp(190px, 23vw, 320px)` liet op 1440 nog maar 42%
      van de beeldhoogte zien en op 768 zelfs 40%, en die fractie veranderde per
      viewport, dus een crop die op de ene maat klopte schoof op de andere weer
      dicht. Met een vaste aspect-ratio is de zichtbare fractie op ELKE breedte
      hetzelfde: 1500/(1000*2.7) = 55,6%. Dat is genoeg voor een staand persoon
      plus het onderwerp eronder.
   2. Er stond een gedeelde object-position van 42% op vijf verschillende foto's.
      De koppen staan per foto ergens anders: gemeten (twee onafhankelijke
      lezingen per foto) op 2%, 8%, 11,5%, 12,6% en 16% van bovenaf, terwijl het
      venster pas op 24% begon. Vandaar dat op alle vijf de foto's gezichten
      werden doorgesneden. Per foto staat de waarde nu in --fb-y op de figure.

   Rekenregel als er een foto bij komt: venster_top = --fb-y * (1 - 0,556).
   Zet --fb-y op (bovenkant_haar - 0,03) / 0,444 en controleer daarna of de
   onderkant van het onderwerp nog onder venster_top + 0,556 valt. */
.fotoband{margin:30px 0 34px}
.fotoband img{display:block; width:100%; aspect-ratio:2.7; height:auto; object-fit:cover;
  object-position:50% var(--fb-y, 30%); border-radius:16px; border:1px solid var(--border); background:#0e0f13}
/* Op de telefoon is de band veel minder breed, dus valt er vanzelf weinig weg
   (88% van de hoogte blijft staan). Daar mag hij hoger staan. */
@media(max-width:600px){.fotoband{margin:22px 0 24px}
  .fotoband img{aspect-ratio:1.7}}

/* ---- telefoon: minder scrollmuur (Vince 1 sep 2026) --------------------
   "Op mobiel moeten een paar dingen verborgen worden, anders wordt het gewoon
   veel te veel." Gemeten op 390px was de pagina 52 telefoonschermen. Alles
   hieronder is opmaak of navigatie, geen verkoopargument: de prijzen, de
   garantie, de startdatum, de kleine lettertjes onder de prijskaarten en elke
   CTA blijven volledig staan. */
@media(max-width:600px){
  /* 8px per sectiegrens, over 22 secties. */
  .section{padding:40px 0}

  /* Elke knop in de pagina zelf loopt door tot de rand (Vince 1 sep 2026). Ze
     stonden op 193px in een kolom van 350px, wat leest als een half aangeraakte
     knop. De vaste balk onderin en de knop in de navigatie staan buiten <main>
     en houden hun eigen maat. */
  main .btn{width:100%; justify-content:center}
  .vanim-foot .btn{justify-self:stretch}
  .hero-enrol .btn{width:100%; justify-content:center}

  /* De wereldkaart met stippen is op 390px niet te lezen; de regel eronder zegt
     hetzelfde in woorden. De kaart van Nederland en Belgie blijft: dat is het
     enige nabijheidssignaal op de pagina. */
  .wm-stage{display:none}

  /* Twee losse CTA-banden minder. Er staat op de telefoon al een vaste balk
     onderin met dezelfde knop. LET OP: die balk verdwijnt bewust bij de prijzen,
     early access, contact en de voettekst, dus daar mag geen knop uit de pagina
     zelf weg. Deze twee staan niet in die zone. */
  #cta-after-certification,#cta-after-bonuses{display:none}

  /* Bij twijfel wil iemand chatten, niet formulieren invullen. WhatsApp en het
     adviesgesprek stonden onder een formulier met vijf velden. .contact-cols is
     een kale div zonder eigen CSS, dus die moet hier eerst een flexkolom worden
     voor `order` iets doet. */
  .contact-cols{display:flex; flex-direction:column; gap:22px}
  .cmethods{order:-1}
}

/* De bewijsmuur op de telefoon (Vince 1 sep 2026: "je ziet de foto's totaal niet
   op mobiel"). Op desktop is dit bewust textuur: achttien beelden in zes kolommen
   met een vignet eroverheen en het Trustpilot-paneel in het midden. Op 390px werd
   dat twee kolommen van ongeveer 171px, en dan is een Instagram-schermafdruk
   onleesbaar en het paneel bedekt de rest.
   Op de telefoon dus: de twaalf schermafdrukken eruit, de zes echte foto's van
   afgestudeerden in een veegrij op leesbare grootte, en het paneel eronder in
   plaats van eroverheen. Er wordt niets bijverzonnen: dit zijn dezelfde bestanden
   die op desktop ook al in de muur zitten. */
@media(max-width:600px){
  .proof-wall{height:auto; overflow:visible; background:transparent; margin-bottom:26px}
  .pw-glow,.pw-vignette{display:none}
  .pw-grid{columns:auto; display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin-left:calc(-1 * var(--gutter-phone, 20px)); margin-right:calc(-1 * var(--gutter-phone, 20px));
    padding:0 var(--gutter-phone, 20px) 18px}
  .pw-grid::-webkit-scrollbar{display:none}
  /* alleen de foto's van mensen, niet de schermafdrukken */
  .pw-grid figure{display:none}
  .pw-grid figure:nth-child(3n){display:block; flex:0 0 74%; margin:0; scroll-snap-align:center}
  /* 3/4 en niet 4/5, plus het zwaartepunt hoger: deze zes zijn staande fotos
     (760x1125 en smaller) en een gecentreerde uitsnede sneed de hoofden af,
     dezelfde fout als in de fotobanden. */
  .pw-grid img{aspect-ratio:3/4; object-fit:cover; object-position:50% 22%; filter:none}
  .pw-panel{position:static; transform:none; width:auto; text-align:left;
    backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--surface)}
  .pw-panel .tp,.pw-stars{justify-content:flex-start}
  .pw-panel p{margin:0}
}