@import url('../fonts/fonts.css');

/* ---------- tokens ---------- */
:root{
  --bg:#08090B;
  --bg2:#0D0F12;
  --surface:#13171B;
  --surface2:#191E23;
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.16);
  --text:#EEF3F6;
  --muted:#94A2AC;
  --cyan:#63CDD7;
  --cyan-dim:#3E8E99;
  --blue:#3E7CB1;
  --yellow:#FFDE59;
  --radius:18px;
  --radius-sm:12px;
  --maxw:1240px;
  --hdr-h:74px;
  --pad:clamp(20px,5vw,64px);
  --display:'Archivo Black',system-ui,sans-serif;
  --cond:'Barlow Condensed',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  /* scrims: rgba van de paginakleur, per thema overschreven */
  --scrim-9:rgba(8,9,11,.92);
  --scrim-7:rgba(8,9,11,.74);
  --scrim-5:rgba(8,9,11,.55);
  --scrim-3:rgba(8,9,11,.30);
  --glass:rgba(255,255,255,.04);
  --stroke:rgba(255,255,255,.26);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;display:block}
svg{width:1em;height:1em;flex:none}
a{color:inherit;text-decoration:none}
button{font:inherit}
::selection{background:var(--cyan);color:#04070A}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:clamp(64px,9vw,128px);position:relative}
.section--tight{padding-block:clamp(48px,6vw,80px)}
.section--alt{background:var(--bg2)}
.grid{display:grid;gap:clamp(18px,2.4vw,32px)}
@media(min-width:800px){
  .g2{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g4{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:560px) and (max-width:799px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
}

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0;line-height:1.04;letter-spacing:-.02em}
.h-display{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(2.7rem,8.2vw,6.4rem);line-height:.92;letter-spacing:-.025em;
}
.h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(2.2rem,6vw,4.4rem);line-height:.95;letter-spacing:-.02em}
.h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.8rem,4.2vw,3.2rem);line-height:1;letter-spacing:-.02em}
.h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.1rem,1.9vw,1.5rem);letter-spacing:-.01em}
.eyebrow{
  font-family:var(--cond);text-transform:uppercase;font-weight:700;
  letter-spacing:.22em;font-size:.82rem;color:var(--cyan);margin:0 0 18px;
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--cyan);flex:none}
.eyebrow--center{justify-content:center}
.lead{font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--muted);line-height:1.7;max-width:62ch}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
.muted{color:var(--muted)}
.accent{color:var(--cyan)}
.center{text-align:center}
.center .lead{margin-inline:auto}
.center .eyebrow{justify-content:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  font-size:1.02rem;padding:15px 30px;border-radius:999px;border:1.5px solid transparent;
  cursor:pointer;transition:all .3s var(--ease);white-space:nowrap;
}
.btn--primary{background:var(--cyan);color:#04070A}
.btn--primary:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 12px 32px -10px color-mix(in srgb,var(--cyan) 65%,transparent)}
.btn--ghost{border-color:var(--line2);color:var(--text);background:var(--glass)}
.btn--ghost:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
.btn--sm{padding:11px 22px;font-size:.9rem}
@media(max-width:560px){.hdr .btn--sm{display:none}.burger{margin-left:auto}}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.center .btn-row{justify-content:center}

/* ---------- header ---------- */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background .35s var(--ease),backdrop-filter .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{background:var(--scrim-9);backdrop-filter:blur(14px) saturate(150%);border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:center;gap:24px;height:var(--hdr-h);max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);text-transform:uppercase;font-size:1.02rem;letter-spacing:.01em;flex:none}
.brand img{height:34px;width:auto;max-width:200px}
.brand span small{display:block;font-family:var(--cond);font-weight:600;font-size:.62rem;letter-spacing:.28em;color:var(--cyan);line-height:1}
.nav{display:none;margin-left:auto;gap:30px;align-items:center}
@media(min-width:1000px){.nav{display:flex}}
.nav a{
  font-family:var(--cond);text-transform:uppercase;font-weight:600;letter-spacing:.13em;font-size:.92rem;
  color:var(--muted);transition:color .25s;position:relative;padding-block:4px;
}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--cyan);transition:width .3s var(--ease)}
.nav a:hover{color:var(--text)}
.nav a:hover::after,.nav a.is-active::after{width:100%}
.nav a.is-active{color:var(--text)}
.hdr .btn{margin-left:auto}
@media(min-width:1000px){.hdr .btn{margin-left:0}}
.burger{
  margin-left:12px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line2);
  background:var(--glass);display:grid;place-content:center;gap:5px;cursor:pointer;flex:none;
}
@media(min-width:1000px){.burger{display:none}}
.burger i{display:block;width:18px;height:1.8px;background:var(--text);transition:transform .3s var(--ease),opacity .2s}
.burger.is-open i:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger.is-open i:nth-child(2){opacity:0}
.burger.is-open i:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}
.mobnav{
  position:fixed;inset:74px 0 auto;z-index:99;background:var(--scrim-9);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);display:grid;gap:2px;padding:18px var(--pad) 30px;
  transform:translateY(-12px);opacity:0;pointer-events:none;transition:all .3s var(--ease);
}
.mobnav.is-open{transform:none;opacity:1;pointer-events:auto}
.mobnav a{font-family:var(--display);text-transform:uppercase;font-size:1.4rem;padding-block:11px;border-bottom:1px solid var(--line)}
.mobnav a:last-of-type{border-bottom:0}

/* ---------- hero ---------- */
/* padding-top houdt de vaste header vrij: bij een lange kop groeide de hero-inhoud
   omhoog onder de balk door (gemeten 09-09: h1 op 40px, header tot 74px). */
.hero{position:relative;min-height:min(94svh,880px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;padding-top:calc(var(--hdr-h) + 12px)}
.hero--short{min-height:min(66svh,620px)}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img,.hero__media video{width:100%;height:100%;object-fit:cover}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--scrim-7) 0%,var(--scrim-3) 34%,var(--scrim-9) 78%,var(--bg) 100%);
}
.hero__grain{
  position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 0);
  background-size:4px 4px;mix-blend-mode:overlay;
}
.hero__in{width:100%;max-width:var(--maxw);margin-inline:auto;padding:0 var(--pad) clamp(56px,8vw,104px)}
.hero__in .lead{color:#C9D4DB;max-width:52ch}
.hero .h-display span{display:block}
.hero .h-display .thin{
  font-family:var(--cond);font-weight:600;font-size:.44em;letter-spacing:.02em;
  color:var(--cyan);margin-top:.28em;
}
.scrollcue{
  position:absolute;left:50%;bottom:22px;translate:-50% 0;z-index:2;
  width:24px;height:38px;border:1.5px solid var(--line2);border-radius:14px;display:grid;place-items:start center;padding-top:7px;
}
.scrollcue i{width:3px;height:7px;border-radius:2px;background:var(--cyan);animation:cue 1.7s infinite var(--ease)}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(13px)}}
@media(max-width:700px){.scrollcue{display:none}}

/* ---------- path cards (gym vs online) ---------- */
.paths{display:grid;gap:20px}
@media(min-width:880px){.paths{grid-template-columns:1fr 1fr}}
.path{
  position:relative;border-radius:var(--radius);overflow:hidden;isolation:isolate;
  min-height:clamp(360px,46vw,470px);display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(24px,3vw,38px);border:1px solid var(--line);
  transition:transform .45s var(--ease),border-color .35s;
}
.path:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--cyan) 50%,transparent)}
.path__bg{position:absolute;inset:0;z-index:-2}
.path__bg img,.path__bg video{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);filter:saturate(.85)}
.path:hover .path__bg img,.path:hover .path__bg video{transform:scale(1.06)}
.path::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--scrim-3) 0%,var(--scrim-7) 44%,var(--scrim-9) 100%);
}
.path__tag{
  align-self:flex-start;font-family:var(--cond);text-transform:uppercase;font-weight:700;letter-spacing:.18em;
  font-size:.74rem;padding:7px 14px;border-radius:999px;border:1px solid var(--line2);
  background:var(--scrim-5);backdrop-filter:blur(6px);margin-bottom:auto;
}
.path__tag--cyan{color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 45%,transparent)}
.path h3{margin-bottom:10px}
.path p{color:#D2DBE1;max-width:42ch;font-size:.98rem;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.path__go{
  display:inline-flex;align-items:center;gap:10px;margin-top:20px;
  font-family:var(--cond);text-transform:uppercase;font-weight:700;letter-spacing:.13em;font-size:.95rem;color:var(--cyan);
}
.path__go svg{transition:transform .3s var(--ease)}
.path:hover .path__go svg{transform:translateX(6px)}

/* ---------- cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(22px,2.6vw,32px);transition:border-color .3s,transform .4s var(--ease),background .3s;
}
.card:hover{border-color:var(--line2);transform:translateY(-4px)}
.card h3{margin-bottom:10px}
.card p{color:var(--muted);font-size:.97rem}
.card__num{
  font-family:var(--display);font-size:2.4rem;line-height:1;color:transparent;
  -webkit-text-stroke:1.4px var(--cyan-dim);margin-bottom:16px;display:block;
}
.card__ico{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:18px;
  background:color-mix(in srgb,var(--cyan) 11%,transparent);border:1px solid color-mix(in srgb,var(--cyan) 24%,transparent);color:var(--cyan);
}
.card__ico svg{width:22px;height:22px}
.btn svg{width:17px;height:17px}
.path__go svg{width:19px;height:19px}

/* ---------- feature list ---------- */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.checks li{display:flex;gap:13px;align-items:flex-start;color:var(--muted);font-size:.98rem;line-height:1.55}
.checks li::before{
  content:"";flex:none;width:20px;height:20px;border-radius:50%;margin-top:2px;
  background-color:var(--cyan);border:1px solid var(--cyan);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:12px;background-repeat:no-repeat;background-position:center;
}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  font-family:var(--cond);text-transform:uppercase;font-weight:600;letter-spacing:.11em;font-size:.87rem;
  padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--muted);
  transition:all .28s var(--ease);
}
.chip:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)}
.chip--on{background:var(--cyan);border-color:var(--cyan);color:#04070A}
.chip--on:hover{color:#04070A;transform:translateY(-2px)}

/* ---------- split ---------- */
.split{display:grid;gap:clamp(30px,4.5vw,68px);align-items:center}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr}
  .split--wide{grid-template-columns:1.15fr .85fr}
  .split--flip .split__media{order:-1}
}
.split__media{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;background:var(--surface)}
.split__media--wide{aspect-ratio:4/3}
.split__media img,.split__media video{width:100%;height:100%;object-fit:cover}
.split__badge{
  position:absolute;left:18px;bottom:18px;background:var(--scrim-7);backdrop-filter:blur(10px);
  border:1px solid var(--line2);border-radius:12px;padding:12px 18px;
}
.split__badge b{display:block;font-family:var(--display);font-size:1.4rem;line-height:1;color:var(--cyan)}
.split__badge small{font-family:var(--cond);text-transform:uppercase;letter-spacing:.15em;font-size:.7rem;color:var(--muted)}

/* ---------- team ---------- */
.team{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.team{grid-template-columns:repeat(5,1fr)}}
.member{text-align:center}
.member__ph{
  position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;margin-bottom:16px;
  border:2px solid var(--line);transition:border-color .35s,transform .45s var(--ease);
}
.member:hover .member__ph{border-color:var(--cyan);transform:translateY(-5px)}
.member__ph img{width:100%;height:100%;object-fit:cover;object-position:center 22%;filter:grayscale(1) contrast(1.06);transition:filter .45s}
.member:hover .member__ph img{filter:grayscale(0) contrast(1)}
.member h4{font-family:var(--display);text-transform:uppercase;font-size:1.02rem;margin:0 0 3px}
.member small{font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;color:var(--cyan)}

/* ---------- pricing ---------- */
.price{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;transition:all .4s var(--ease);
}
.price:hover{transform:translateY(-6px);border-color:var(--line2)}
.price--hot{border-color:color-mix(in srgb,var(--cyan) 50%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--cyan) 7%,transparent),var(--surface) 42%)}
.price__flag{
  position:absolute;top:-13px;left:50%;translate:-50% 0;background:var(--cyan);color:#04070A;
  font-family:var(--cond);text-transform:uppercase;font-weight:700;letter-spacing:.15em;font-size:.72rem;
  padding:6px 16px;border-radius:999px;white-space:nowrap;
}
.price h3{margin-bottom:14px;font-size:1.05rem}
.price__amt{font-family:var(--display);font-size:clamp(1.8rem,3vw,2.3rem);line-height:1;margin-bottom:4px}
.price__amt sup{font-size:.44em;vertical-align:top;color:var(--muted);font-family:var(--cond);letter-spacing:.1em}
.price__per{font-family:var(--cond);text-transform:uppercase;letter-spacing:.13em;font-size:.78rem;color:var(--muted);margin-bottom:8px}
.price__alt{
  border-top:1px dashed var(--line);margin-top:14px;padding-top:14px;
  font-size:.86rem;color:var(--muted);
}
.price__alt b{color:var(--text);font-weight:600}
.price .checks{margin:20px 0 26px}
.price .btn{margin-top:auto;width:100%}

/* ---------- rooster ---------- */
.sched-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:26px}
.sched-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);-webkit-overflow-scrolling:touch}
table.sched{width:100%;border-collapse:collapse;min-width:840px;font-size:.86rem}
table.sched th,table.sched td{padding:13px 12px;text-align:center;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
table.sched th:last-child,table.sched td:last-child{border-right:0}
table.sched tr:last-child td{border-bottom:0}
table.sched thead th{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;
  color:var(--muted);background:var(--surface2);position:sticky;top:0;z-index:1;font-weight:700;
}
table.sched thead th.is-today{color:var(--cyan);background:color-mix(in srgb,var(--cyan) 10%,transparent)}
table.sched td.time{
  font-family:var(--cond);font-weight:700;letter-spacing:.06em;color:var(--text);
  background:var(--surface2);white-space:nowrap;font-size:.85rem;
}
table.sched td.is-today{background:color-mix(in srgb,var(--cyan) 4%,transparent)}
.slot{
  display:inline-block;padding:5px 11px;border-radius:8px;font-family:var(--cond);font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;font-size:.79rem;line-height:1.25;white-space:nowrap;
  border:1px solid transparent;transition:opacity .25s,filter .25s;
}
.slot--wod{background:color-mix(in srgb,var(--cyan) 14%,transparent);color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 30%,transparent)}
.slot--hyrox{background:rgba(255,222,89,.13);color:var(--yellow);border-color:rgba(255,222,89,.3)}
.slot--open{background:rgba(62,124,177,.16);color:#83B4DD;border-color:rgba(62,124,177,.34)}
.slot--lift{background:rgba(198,140,255,.13);color:#C79BF5;border-color:rgba(198,140,255,.3)}
.slot--kids{background:rgba(126,222,150,.12);color:#7EDE96;border-color:rgba(126,222,150,.3)}
.slot--hero{background:rgba(255,124,92,.13);color:#FF9C7C;border-color:rgba(255,124,92,.3)}
.slot--strength{background:rgba(255,255,255,.07);color:#D6E0E6;border-color:var(--line2)}
.slot.is-dim{opacity:.16;filter:grayscale(1)}
.dash{color:rgba(255,255,255,.16)}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

/* ---------- info tiles ---------- */
.info{display:grid;gap:14px}
@media(min-width:760px){.info{grid-template-columns:repeat(3,1fr)}}
.info__row{
  display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);
  font-size:.94rem;
}
.info__row:last-child{border-bottom:0}
.info__row.is-today{color:var(--cyan)}
.info__row span:first-child{font-family:var(--cond);text-transform:uppercase;letter-spacing:.13em;font-weight:600}
.info__row span:last-child{color:var(--muted);text-align:right;white-space:nowrap}
.info__row.is-today span:last-child{color:var(--cyan)}
.status{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.14em;font-size:.8rem;font-weight:700;margin-bottom:20px;
}
.status i{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.status.is-open{color:#7EDE96}
.status.is-open i{background:#7EDE96;box-shadow:0 0 0 4px rgba(126,222,150,.16);animation:pulse 2.4s infinite}
.status.is-closed{color:var(--muted)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(126,222,150,.16)}50%{box-shadow:0 0 0 8px rgba(126,222,150,.04)}}
.contact-link{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line);transition:color .25s}
.contact-link:last-child{border-bottom:0}
.contact-link:hover{color:var(--cyan)}
.contact-link svg{width:20px;height:20px;color:var(--cyan);flex:none}
.contact-link small{display:block;font-family:var(--cond);text-transform:uppercase;letter-spacing:.15em;font-size:.68rem;color:var(--muted)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{
  width:100%;background:none;border:0;color:var(--text);text-align:left;cursor:pointer;
  padding:22px 44px 22px 0;position:relative;font-size:1.03rem;font-weight:600;line-height:1.45;
}
.faq__q::after{
  content:"";position:absolute;right:6px;top:50%;translate:0 -50%;width:13px;height:13px;
  background-color:var(--cyan);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .35s var(--ease);
}
.faq__item.is-open .faq__q::after{transform:rotate(135deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{color:var(--muted);padding-bottom:22px;font-size:.97rem;max-width:72ch}

/* ---------- form ---------- */
.form{display:grid;gap:16px}
@media(min-width:700px){.form__2{grid-template-columns:1fr 1fr;display:grid;gap:16px}}
.field label{
  display:block;font-family:var(--cond);text-transform:uppercase;letter-spacing:.15em;
  font-size:.74rem;color:var(--muted);margin-bottom:8px;font-weight:600;
}
.field input,.field select,.field textarea{
  width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 16px;color:var(--text);font:inherit;font-size:.97rem;transition:border-color .25s,background .25s;
}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--cyan);background:var(--surface2)}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A2AC' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;background-size:16px;padding-right:44px}
.form__note{font-size:.84rem;color:var(--muted)}
.form__ok{
  display:none;border:1px solid rgba(126,222,150,.35);background:rgba(126,222,150,.08);
  border-radius:var(--radius-sm);padding:16px 18px;color:#7EDE96;font-size:.94rem;
}
.form__ok.is-on{display:block}

/* ---------- cta band ---------- */
.cta{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--radius);padding:clamp(38px,6vw,80px) clamp(24px,4vw,64px);text-align:center}
.cta__bg{position:absolute;inset:0;z-index:-2}
.cta__bg img{width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--scrim-7),var(--scrim-9))}

/* ---------- marquee ---------- */
.marq{overflow:hidden;border-block:1px solid var(--line);padding-block:16px;background:var(--bg2);--dur:34s}
.marq__t{display:flex;gap:44px;width:max-content;animation:marq var(--dur) linear infinite}
.marq span{
  font-family:var(--display);text-transform:uppercase;font-size:clamp(1.1rem,2.1vw,1.6rem);
  color:transparent;-webkit-text-stroke:1px var(--stroke);white-space:nowrap;letter-spacing:.01em;
}
.marq span:nth-child(even){-webkit-text-stroke-color:color-mix(in srgb,var(--cyan) 55%,transparent)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line);background:var(--bg2);padding-block:clamp(44px,5vw,72px) 30px}
.ftr__grid{display:grid;gap:34px}
@media(min-width:820px){.ftr__grid{grid-template-columns:1.6fr 1fr 1fr}}
.ftr h5{font-family:var(--cond);text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--muted);margin:0 0 16px;font-weight:700}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ftr ul a{color:var(--muted);font-size:.94rem;transition:color .25s}
.ftr ul a:hover{color:var(--cyan)}
.ftr__bot{
  margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.82rem;color:var(--muted);
}
.social{display:flex;gap:11px;margin-top:20px}
.social a{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--muted);transition:all .28s var(--ease);
}
.social a:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-3px)}
.social svg{width:18px;height:18px}

/* ---------- sticky mobile cta ---------- */
.sticky-cta{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:90;
  transform:translateY(140%);transition:transform .45s var(--ease);
}
.sticky-cta.is-on{transform:none}
.sticky-cta .btn{width:100%;box-shadow:0 14px 40px -12px rgba(0,0,0,.9)}
@media(min-width:1000px){.sticky-cta{display:none}}
/* Ruimte onderaan zodat de zwevende knop nooit over de laatste regels valt. */
@media(max-width:999px){.ftr{padding-bottom:96px}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}.rv-d4{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* ---------- a11y helper ---------- */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- split hero (online coaching) ---------- */
.hero--split{align-items:center;padding-block:clamp(104px,13vw,140px) clamp(56px,7vw,96px);min-height:auto}
.hero--split .hero__in{padding-bottom:0}
.hero--split::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(900px 620px at 78% 28%,color-mix(in srgb,var(--cyan) 16%,transparent),transparent 62%),
    radial-gradient(760px 520px at 6% 76%,rgba(62,124,177,.14),transparent 66%),
    var(--bg);
}
.hero-split{display:grid;gap:clamp(30px,4vw,60px);align-items:center}
@media(min-width:960px){.hero-split{grid-template-columns:1.06fr .94fr}}
.hero-split__media{
  position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:9/16;
  max-height:min(72svh,620px);margin-inline:auto;width:100%;
  border:1px solid var(--line);box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
}
@media(min-width:960px){.hero-split__media{margin-inline:0 0}}
.hero-split__media video,.hero-split__media img{width:100%;height:100%;object-fit:cover}
.hero-split__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 58%,var(--scrim-5) 100%);pointer-events:none}
.hero-split__tag{
  position:absolute;left:16px;bottom:16px;z-index:1;display:inline-flex;align-items:center;gap:9px;
  background:var(--scrim-7);backdrop-filter:blur(10px);border:1px solid var(--line2);border-radius:999px;
  padding:9px 16px;font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:700;
}
.hero-split__tag i{width:8px;height:8px;border-radius:50%;background:var(--cyan);flex:none;animation:pulse2 2.2s infinite}
@keyframes pulse2{0%,100%{opacity:1}50%{opacity:.35}}


/* ---------- placeholder: wat hier hoort, nog niet aangeleverd ---------- */
.ph{
  /* max-width en min-width voorkomen dat aspect-ratio in een gestrekte grid-rij
     de breedte gaat bepalen en de kolom uit laat lopen. */
  position:relative;width:100%;height:100%;min-height:180px;max-width:100%;min-width:0;
  display:grid;place-items:center;
  text-align:center;padding:clamp(18px,3vw,34px);border-radius:var(--radius);
  border:2px dashed var(--line2);background:
    repeating-linear-gradient(135deg,transparent 0 12px,var(--glass) 12px 24px),var(--surface);
  color:var(--muted);
}
.ph__ico{width:44px;height:44px;color:var(--cyan);margin:0 auto 14px;opacity:.85}
.ph__ico svg{width:44px;height:44px}
.ph b{
  display:block;font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;
  font-size:.82rem;color:var(--cyan);margin-bottom:8px;font-weight:700;
}
.ph span{display:block;font-size:.93rem;line-height:1.5;max-width:34ch;margin-inline:auto}
.ph small{
  display:block;margin-top:12px;font-family:var(--cond);letter-spacing:.14em;
  text-transform:uppercase;font-size:.68rem;opacity:.6;
}
.ph--video{aspect-ratio:16/9;min-height:0}
.ph--staand{aspect-ratio:9/16}
.ph--vierkant{aspect-ratio:1}
.ph--breed{aspect-ratio:16/10}

/* ---------- licht thema ---------- */
.thema-licht{
  --scrim-9:rgba(255,255,255,.93);
  --scrim-7:rgba(255,255,255,.76);
  --scrim-5:rgba(255,255,255,.5);
  --scrim-3:rgba(255,255,255,.22);
  --glass:rgba(0,0,0,.035);
  --stroke:rgba(0,0,0,.2);
  --line:rgba(0,0,0,.1);
  --line2:rgba(0,0,0,.18);
}
/* In het lichte thema is hero-tekst gewoon donker. Alleen wanneer er een donkere
   foto of video achter staat (klasse hero--donker) wordt hij wit. */
.thema-licht .hero__in .lead{color:var(--muted)}
.thema-licht .hero--donker .hero__in .lead{color:#E8EEF2}
.thema-licht .hero--donker .hero__media::after{
  background:linear-gradient(180deg,rgba(8,9,11,.7) 0%,rgba(8,9,11,.34) 34%,rgba(8,9,11,.82) 78%,var(--bg) 100%);
}
.thema-licht .hero--donker,.thema-licht .hero--donker .h-display{color:#fff}
.thema-licht .path::after{background:linear-gradient(180deg,rgba(8,9,11,.25) 0%,rgba(8,9,11,.7) 44%,rgba(8,9,11,.95) 100%)}
.thema-licht .path,.thema-licht .path h3{color:#fff}
.thema-licht .cta::after{background:linear-gradient(180deg,rgba(8,9,11,.74),rgba(8,9,11,.9))}
.thema-licht .cta,.thema-licht .cta .h1{color:#fff}
.thema-licht .cta .lead{color:#DCE4EA}
.thema-licht .member__ph img{filter:none}
.thema-licht .marq{background:var(--bg2)}


/* Vangrail: een placeholder hoort niet in de achtergrondlaag van een hero.
   Gebeurt het toch, dan blijft alleen het arceerpatroon over en bloedt er
   geen tekst door de kop heen. */
.hero__media .ph{border:0;border-radius:0;background:
  repeating-linear-gradient(135deg,transparent 0 14px,var(--glass) 14px 28px),var(--surface)}
.hero__media .ph b,.hero__media .ph span,.hero__media .ph small,.hero__media .ph__ico{display:none}

/* Een uitgeknipte PNG (transparante achtergrond) heeft een eigen vlak nodig,
   anders verdwijnt hij op een lichte pagina. */
.uitsnede{background:
  radial-gradient(120% 90% at 50% 8%,color-mix(in srgb,var(--cyan) 22%,transparent),transparent 62%),
  linear-gradient(180deg,var(--surface2),var(--surface));
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:grid;place-items:end center;padding-top:18px}
.uitsnede img{width:100%;height:auto;object-fit:contain;display:block}

/* ---------- stappen: van boven naar onder, één kolom, mobiel-eerst ---------- */
.stappen{position:relative;display:grid;gap:0;max-width:74ch;margin-inline:auto}
.stap{position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,3vw,32px);
  padding-block:clamp(22px,3vw,34px)}
.stap:not(:last-child)::before{
  content:"";position:absolute;left:calc(var(--bol)/2 - 1px);top:calc(var(--bol) + 14px);bottom:-14px;
  width:2px;background:linear-gradient(180deg,var(--cyan),color-mix(in srgb,var(--cyan) 12%,transparent));
}
.stappen{--bol:clamp(46px,7vw,60px)}
.stap__n{
  width:var(--bol);height:var(--bol);border-radius:50%;flex:none;display:grid;place-items:center;
  font-family:var(--display);font-size:clamp(1rem,2vw,1.25rem);
  background:color-mix(in srgb,var(--cyan) 14%,transparent);
  border:2px solid var(--cyan);color:var(--cyan);position:relative;z-index:1;
}
.stap__in h3{margin-bottom:8px}
.stap__in p{color:var(--muted);font-size:clamp(.98rem,1.4vw,1.06rem);line-height:1.65}
.stap__in .duur{
  display:inline-block;margin-top:12px;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.14em;font-size:.74rem;color:var(--cyan);
  border:1px solid color-mix(in srgb,var(--cyan) 40%,transparent);border-radius:999px;padding:5px 13px;
}

/* ---------- beeld met verloop erover ---------- */
.grad{position:relative;overflow:hidden;border-radius:var(--radius)}
.grad img,.grad video{width:100%;height:100%;object-fit:cover;display:block}
.grad::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 42%,color-mix(in srgb,var(--bg) 88%,transparent) 100%),
    linear-gradient(115deg,color-mix(in srgb,var(--cyan) 20%,transparent) 0%,transparent 46%),
    linear-gradient(300deg,color-mix(in srgb,var(--blue) 26%,transparent) 0%,transparent 52%);
  mix-blend-mode:screen;
}
.grad--zacht::after{opacity:.55}
/* Op een licht thema vreet screen-blend het beeld op: het verloop mengt met een lichte
   --bg en dan verdwijnt de foto in de achtergrond. Gemeten op de Kyra-build 21-09-2026,
   waar het onderste derde van een HYROX-foto volledig wit werd. Op licht dus geen screen,
   en het verloop pas laat laten inzetten zodat alleen de bijschrift-strook donkerder wordt. */
.thema-licht .grad::after{
  mix-blend-mode:normal;
  background:
    linear-gradient(180deg,transparent 58%,color-mix(in srgb,#1A1A1A 52%,transparent) 100%),
    linear-gradient(115deg,color-mix(in srgb,var(--cyan) 12%,transparent) 0%,transparent 48%);
}
.thema-licht .grad__op b{color:#FFFFFF}
.thema-licht .grad__op span{color:rgba(255,255,255,.88)}
.grad__op{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,2.4vw,28px);
}
.grad__op b{display:block;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.05;margin-bottom:6px}
.grad__op span{color:#D7DFE5;font-size:.94rem}

/* ---------- ruimer, vooral op mobiel ---------- */
@media(max-width:760px){
  body{font-size:17.5px;line-height:1.7}
  .section{padding-block:clamp(56px,13vw,86px)}
  .wrap{padding-inline:22px}
  .h1{font-size:clamp(2.1rem,9.4vw,3rem)}
  .h2{font-size:clamp(1.7rem,7.4vw,2.3rem)}
  .h3{font-size:1.14rem}
  .lead{font-size:1.06rem;line-height:1.72}
  .card{padding:26px 24px}
  .grid{gap:18px}
  .btn{padding:17px 28px;font-size:1.06rem;width:100%}
  .btn-row{gap:12px}
  .btn-row .btn{width:100%}
  .checks li{font-size:1.02rem;line-height:1.6}
  .price{padding:28px 24px}
}

/* ---------- merkbanner: de naam die in beeld veegt ---------- */
.merkband{
  position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(72px,13vw,150px);
  background:
    radial-gradient(1400px 700px at 50% 50%,color-mix(in srgb,var(--cyan) 6%,transparent),transparent 70%),
    var(--bg);
  border-block:1px solid var(--line);
  text-align:center;
}
.merkband__in{position:relative;z-index:2;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.merkband__woord{
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(2.2rem,10.5vw,7.4rem);line-height:.9;letter-spacing:.06em;
  white-space:nowrap;
  text-indent:.07em;margin:0;
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--cyan) 55%,#000) 0%,
    var(--cyan) 34%,
    #FFF6E2 46%,
    var(--cyan) 58%,
    color-mix(in srgb,var(--cyan) 55%,#000) 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
@keyframes veeg{0%,100%{background-position:130% 0}50%{background-position:-30% 0}}
.merkband__by{
  font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-size:clamp(1.1rem,3.4vw,2.4rem);letter-spacing:.1em;color:var(--cyan);
  margin-top:.18em;opacity:.92;
}
.merkband__regel{
  height:1px;width:min(74%,760px);margin:clamp(14px,2vw,22px) auto;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.55;
}
.merkband__onder{
  margin-top:clamp(18px,2.4vw,30px);color:var(--muted);
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.22em;font-size:.82rem;
}
/* stofdeeltjes */
.stof{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.stof i{
  position:absolute;border-radius:50%;background:var(--cyan);
  filter:blur(.4px);opacity:0;animation:zweef linear infinite;
}
@keyframes zweef{
  0%{opacity:0;transform:translate3d(0,14px,0) scale(.6)}
  14%{opacity:.85}
  70%{opacity:.5}
  100%{opacity:0;transform:translate3d(var(--dx),-110px,0) scale(1.1)}
}
@media(prefers-reduced-motion:reduce){
  .merkband__woord{animation:none;background-position:50% 0}
  .stof{display:none}
}

/* ---------- stappen die oplichten als je erover gaat ---------- */
.stap{border-radius:var(--radius);padding-inline:clamp(14px,2vw,22px);transition:background .35s var(--ease)}
.stap::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius);pointer-events:none;
  background:linear-gradient(100deg,color-mix(in srgb,var(--cyan) 11%,transparent),transparent 62%);
  opacity:0;transition:opacity .35s var(--ease);
}
.stap:hover::after{opacity:1}
.stap__n{transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease)}
.stap:hover .stap__n{
  transform:scale(1.08);
  background:var(--cyan);color:var(--bg);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--cyan) 18%,transparent),
             0 12px 34px -10px color-mix(in srgb,var(--cyan) 70%,transparent);
}
.stap:hover .stap__in h3{color:var(--cyan)}
.stap__in h3{transition:color .3s var(--ease)}
/* op een telefoon bestaat hover niet: daar licht de actieve stap op bij aanraking */
@media(hover:none){
  .stap:active::after{opacity:1}
  .stap:active .stap__n{background:var(--cyan);color:var(--bg)}
}

/* ---------- formulier centraal op de pagina ---------- */
.form--midden{max-width:760px;margin-inline:auto}
.form--midden .btn{width:100%;margin-top:6px}
.formkaart{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3.4vw,44px);
}


/* ---------- de naam zet zichzelf in elkaar zodra je erbij komt ---------- */
.merkband__woord span{
  display:inline-block;
  opacity:0;
  transform:translateY(.42em) scale(.94);
  /* GEEN filter hier. Een filter op een kind van een element met
     -webkit-background-clip:text maakt in WebKit een eigen rendering-context,
     waardoor de geknipte achtergrond niet doorkomt. Het kind erft dan wel
     -webkit-text-fill-color:transparent en is dus onzichtbaar. Dat was de
     oorzaak van "merkbanner onzichtbaar in WebKit" (ROADMAP 14-09-2026).
     blur(0) helpt niet: ook dat is een filter. Daarom opacity + transform. */
  transition:opacity .7s var(--ease),transform .8s var(--ease);
  transition-delay:calc(var(--i) * 55ms);
}
.merkband .rv.is-in .merkband__woord span,
.merkband__in.is-in .merkband__woord span{
  opacity:1;transform:none;
}
/* pas als alle letters staan, veegt het licht er één keer overheen */
.merkband__in.is-in .merkband__woord{animation:veeg 2.4s ease-in-out .75s 1 both}
.merkband__by,.merkband__regel,.merkband__onder{
  opacity:0;transform:translateY(12px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.merkband__in.is-in .merkband__by{opacity:.92;transform:none;transition-delay:.62s}
.merkband__in.is-in .merkband__regel{opacity:.55;transform:none;transition-delay:.72s}
.merkband__in.is-in .merkband__onder{opacity:1;transform:none;transition-delay:.82s}
@media(prefers-reduced-motion:reduce){
  .merkband__woord span{opacity:1;transform:none;transition:none}
  .merkband__in .merkband__by,.merkband__in .merkband__regel,.merkband__in .merkband__onder{opacity:1;transform:none}
  .merkband__in.is-in .merkband__woord{animation:none;background-position:50% 0}
}

/* ---------- resultaatkaart: beeld boven, tekst eronder ---------- */
.resultaat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;transition:border-color .3s,transform .4s var(--ease)}
.resultaat:hover{border-color:var(--line2);transform:translateY(-4px)}
.resultaat img{width:100%;height:auto;display:block}
.resultaat__tekst{padding:clamp(20px,2.4vw,28px)}
.resultaat__tekst h3{margin-bottom:6px}
.resultaat__cijfer{color:var(--cyan);font-weight:600;font-size:1rem;margin-bottom:12px}
.resultaat__citaat{color:var(--muted);font-size:.96rem;line-height:1.6;font-style:italic}

/* ---------- hero met een voor-en-na als achtergrond ---------- */
.hero--vn{position:relative;overflow:hidden;isolation:isolate;
  min-height:min(92svh,860px);display:flex;align-items:center}
.hero--vn .hero__vnbeeld{position:absolute;inset:0;z-index:-3}
.hero--vn .hero__vnbeeld img{
  width:100%;height:100%;object-fit:cover;object-position:72% center;
  filter:saturate(.92) contrast(1.04);
}
/* scrim: links bijna zwart voor de tekst, rechts blijft het beeld staan */
.hero--vn::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 42%,transparent) 0%,
    transparent 22%,transparent 74%,var(--bg) 100%);
}
/* een subtiele goudgloed die de scheiding tussen voor en na markeert */
.hero--vn::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(760px 620px at 72% 46%,
    color-mix(in srgb,var(--cyan) 13%,transparent),transparent 62%);
  mix-blend-mode:screen;
}
.hero--vn .hero__in{padding-block:clamp(60px,9vw,110px)}
.hero--vn .hero__in > div{max-width:min(56ch,50%)}
@media(max-width:900px){
  .hero--vn .hero__vnbeeld img{object-position:center top}
  .hero--vn::before{
    background:
      linear-gradient(180deg,color-mix(in srgb,var(--bg) 40%,transparent) 0%,
        color-mix(in srgb,var(--bg) 72%,transparent) 38%,var(--bg) 72%);
  }
  .hero--vn{align-items:flex-end;min-height:min(96svh,820px)}
  .hero--vn .hero__in > div{max-width:none}
}
.hero__vnlabel{
  position:absolute;right:clamp(16px,3vw,44px);bottom:clamp(16px,3vw,38px);z-index:2;
  display:flex;gap:10px;align-items:center;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;
  color:var(--cyan);background:var(--scrim-7);backdrop-filter:blur(8px);
  border:1px solid var(--line2);border-radius:999px;padding:9px 18px;
}

/* ---------- stempel bij de foto ---------- */
.stempel{
  position:absolute;z-index:3;display:grid;place-items:center;text-align:center;
  width:clamp(146px,15vw,196px);height:clamp(146px,15vw,196px);border-radius:50%;
  background:var(--cyan);color:var(--bg);
  font-family:var(--cond);text-transform:uppercase;font-weight:700;
  letter-spacing:.06em;line-height:1.2;font-size:clamp(.88rem,1.35vw,1.12rem);
  padding:14px;transform:rotate(-8deg);
  box-shadow:0 18px 46px -14px rgba(0,0,0,.85);
}
.stempel span{display:block}
.stempel--hero{left:clamp(320px,51vw,830px);bottom:clamp(150px,20vw,260px)}
@media(max-width:900px){.stempel--hero{display:none}}

/* ---------- whatsapp-bericht van een klant ---------- */
.wa{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(18px,2.2vw,26px);display:grid;gap:12px}
.wa__kop{display:flex;align-items:center;gap:10px;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:.72rem;color:var(--muted)}
.wa__kop i{width:8px;height:8px;border-radius:50%;background:#25D366;flex:none}
.wa__bel{
  background:color-mix(in srgb,var(--cyan) 12%,var(--surface2));
  border:1px solid color-mix(in srgb,var(--cyan) 22%,transparent);
  border-radius:16px 16px 16px 5px;padding:14px 17px;
  font-size:.97rem;line-height:1.6;color:var(--text);position:relative;
}
.wa__bel + .wa__bel{margin-top:-2px}
.wa__naam{font-family:var(--cond);text-transform:uppercase;letter-spacing:.13em;
  font-size:.78rem;color:var(--cyan);font-weight:700}

/* ---------- sectie met een foto als achtergrond, tekst eroverheen ---------- */
.overband{position:relative;overflow:hidden;isolation:isolate;
  padding-block:clamp(70px,11vw,140px)}
.overband__beeld{position:absolute;inset:0;z-index:-2}
.overband__beeld img{width:100%;height:100%;object-fit:cover;object-position:24% 34%}
.overband::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 94%,transparent) 26%,
      color-mix(in srgb,var(--bg) 55%,transparent) 42%,color-mix(in srgb,var(--bg) 12%,transparent) 62%,transparent 100%),
    linear-gradient(180deg,var(--bg) 0%,transparent 22%,transparent 74%,var(--bg) 100%);
}
.overband__in{max-width:min(58ch,54%)}
@media(max-width:900px){
  /* op een telefoon staat het beeld los boven de tekst, dat leest beter */
  .overband{padding-block:0}
  .overband__beeld{position:relative;inset:auto;z-index:0;height:clamp(240px,58vw,380px);
    border-radius:var(--radius);overflow:hidden;margin-bottom:clamp(24px,5vw,34px)}
  .overband::after{display:none}
  .overband__in{max-width:none}
  .overband > .wrap{padding-block:clamp(52px,11vw,74px)}
}

/* ---------- telefoon met binnenkomende berichten ---------- */
.fonewrap{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media(min-width:900px){.fonewrap{grid-template-columns:.9fr 1.1fr}}
/* Op een smal scherm eerst vertellen wát je ziet, dan pas de telefoon. */
@media(max-width:899px){.fonewrap>.foon{order:2}.fonewrap>div:not(.foon){order:1}}
.foon{
  position:relative;width:min(320px,86vw);margin-inline:auto;aspect-ratio:9/19;
  background:linear-gradient(160deg,#2a2a2e,#111);border-radius:44px;padding:11px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.07) inset;
}
.foon__scherm{
  position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;
  background:linear-gradient(180deg,#0d0f12,#0a0b0d);display:flex;flex-direction:column;
}
.foon__notch{
  position:absolute;top:9px;left:50%;translate:-50% 0;z-index:5;
  width:34%;height:22px;background:#0a0b0d;border-radius:0 0 14px 14px;
}
.foon__kop{
  flex:none;padding:26px 16px 11px;display:flex;align-items:center;gap:9px;z-index:4;
  background:linear-gradient(180deg,#15181c,#12151a);border-bottom:1px solid rgba(255,255,255,.07);
}
.foon__avatar{width:30px;height:30px;border-radius:50%;flex:none;
  background:var(--cyan);color:var(--bg);display:grid;place-items:center;
  font-family:var(--display);font-size:.78rem}
.foon__naam{font-size:.82rem;font-weight:600;color:#EAF0F4;line-height:1.2}
.foon__naam small{display:block;font-size:.62rem;color:#7CD98F;font-weight:500}
.foon__body{position:relative;flex:1;overflow:hidden;padding:0 12px}
.foon__body::before,.foon__body::after{
  content:"";position:absolute;left:0;right:0;height:56px;z-index:3;pointer-events:none;
}
.foon__body::before{top:0;background:linear-gradient(180deg,#0d0f12,transparent)}
.foon__body::after{bottom:0;background:linear-gradient(0deg,#0a0b0d,transparent)}
.foon__stroom{display:flex;flex-direction:column;gap:9px;padding-block:14px;
  animation:stroom 46s linear infinite}
@keyframes stroom{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.foon:hover .foon__stroom{animation-play-state:paused}
.bel{
  max-width:88%;align-self:flex-start;background:#1E2329;color:#E7EDF2;
  border-radius:14px 14px 14px 4px;padding:10px 12px 16px;position:relative;
  font-size:.78rem;line-height:1.5;box-shadow:0 2px 10px -4px rgba(0,0,0,.6);
}
.bel--ik{align-self:flex-end;background:color-mix(in srgb,var(--cyan) 24%,#1E2329);
  border-radius:14px 14px 4px 14px}
.bel time{position:absolute;right:9px;bottom:5px;font-size:.56rem;color:#8A97A2}
.foon__balk{flex:none;height:5px;width:36%;margin:0 auto 9px;border-radius:99px;
  background:rgba(255,255,255,.22)}
@media(prefers-reduced-motion:reduce){.foon__stroom{animation:none}}

/* ---------- naamscheiding tussen gesprekken in de telefoon ---------- */
.foon__naamchip{
  align-self:center;margin:14px 0 4px;padding:5px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--cyan) 16%,#12151a);
  border:1px solid color-mix(in srgb,var(--cyan) 26%,transparent);
  color:var(--cyan);font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.16em;font-size:.6rem;font-weight:700;white-space:nowrap;
}
.bel--ik{color:#0E1114}
.bel--ik time{color:#3d4a52}

/* ---------- afzender in de voettekst ---------- */
.ftr__door a{color:var(--cyan);border-bottom:1px solid color-mix(in srgb,var(--cyan) 40%,transparent);
  transition:border-color .25s}
.ftr__door a:hover{border-bottom-color:var(--cyan)}

/* spamval in formulieren: onzichtbaar voor mensen, zichtbaar voor bots */
.val{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- video: eerst een foto, pas na een klik de speler ---------- */
.vid{
  position:relative;width:100%;border-radius:var(--r-l);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);cursor:pointer;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9);
}
.vid--staand{max-width:min(500px,88vw);margin-inline:auto}
.vid picture,.vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--bg) 55%,transparent));
  pointer-events:none;transition:opacity .3s;
}
.vid.is-aan::after,.vid.is-aan .vid__knop{opacity:0;pointer-events:none}
.vid__knop{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:78px;height:78px;border-radius:50%;border:0;cursor:pointer;
  background:var(--cyan);display:grid;place-items:center;
  box-shadow:0 14px 40px -10px rgba(0,0,0,.8);transition:transform .3s var(--ease),opacity .3s;
}
.vid:hover .vid__knop{transform:translate(-50%,-50%) scale(1.09)}
.vid__driehoek{
  width:0;height:0;margin-left:5px;
  border-left:22px solid var(--bg);
  border-top:13px solid transparent;border-bottom:13px solid transparent;
}

/* ---------- niets mag buiten het scherm vallen ---------- */
/* Een rasterkolom is standaard nooit smaller dan zijn langste woord. Een lange
   knoptekst duwt de hele kolom dan het scherm uit, en met overflow:hidden zie
   je dat niet als een schuifbalk maar als afgesneden tekst. */
.hero-split>*,.fonewrap>*,.split>*,.grid>*{min-width:0}
@media(max-width:560px){
  .btn{white-space:normal;text-align:center;line-height:1.25;max-width:100%}
  .btn-row{flex-wrap:wrap}
  .btn-row>.btn{width:100%}
}
.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}

/* ---------- fullscreen mag nooit bijsnijden ----------
   Een pagina-regel met object-fit:cover blijft in fullscreen gewoon gelden. Het
   vak is dan niet meer het kadertje op de pagina maar het hele scherm, dus een
   16:9-video wordt opgeschaald naar bijvoorbeeld 19,5:9 en verliest ruim 20%
   boven en onder. Inline zie je daar niets van, want daar klopt de verhouding.
   Gemeld door Erik op 21-09 op Kyra's plan; zat in alle vier de plan-pagina's.
   EXTRA_CSS wordt ná dit bestand geplakt, dus zonder !important wint de pagina.
   :-webkit-full-screen staat apart: een onbekende pseudo-class in een
   selectorlijst laat browsers de hele regel weggooien. */
video:fullscreen{object-fit:contain!important}
video:-webkit-full-screen{object-fit:contain!important}

/* ---------- keuzepoort: welk pad is dit ---------- */
.path{position:relative}
.path__nr{
  position:absolute;top:clamp(16px,2vw,24px);right:clamp(16px,2vw,24px);z-index:3;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  font-size:.72rem;color:var(--bg);background:var(--cyan);
  padding:7px 14px;border-radius:999px;
}
.path__go{display:inline-flex;align-items:center;gap:9px}
.path__go svg{transition:transform .3s var(--ease)}
.path:hover .path__go svg{transform:translateX(6px)}

/* ---------- Bali: het groepsbeeld ---------- */
.bali-map{display:grid;gap:14px;margin-top:clamp(28px,4vw,44px)}
@media(min-width:860px){.bali-map{grid-template-columns:1.15fr 1fr;align-items:stretch}}
.bali-map__groot,.bali-map__klein img,.bali-map__klein picture{border-radius:var(--r-l);overflow:hidden}
.bali-map__groot{position:relative}
.bali-map__groot img{width:100%;height:100%;object-fit:cover;display:block}
.bali-map__klein{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bali-map__klein img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/5}
.bali-cijfers{
  display:grid;gap:18px;margin-top:clamp(26px,3.4vw,40px);text-align:center;
  grid-template-columns:repeat(3,1fr);
}
@media(max-width:620px){.bali-cijfers{grid-template-columns:1fr;gap:22px}}
.bali-cijfers div{padding:22px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l)}
.bali-cijfers b{display:block;font-family:var(--disp);font-size:clamp(2.4rem,5vw,3.4rem);
  line-height:1;color:var(--cyan);margin-bottom:8px}
.bali-cijfers span{color:var(--muted);font-size:.95rem;line-height:1.5}
/* Tijdens het laden blijft de foto zichtbaar, de knop verdwijnt wel meteen. */
.vid.is-laadt .vid__knop{opacity:0;pointer-events:none}
.vid.is-laadt video{opacity:0}
.vid.is-aan video{opacity:1;transition:opacity .25s}

/* ---------- lijst om een staande video ---------- */
.vidkader{
  max-width:min(940px,94vw);margin:clamp(30px,4vw,48px) auto 0;
  padding:clamp(12px,1.6vw,18px);border-radius:calc(var(--r-l) + 12px);
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95);
}
.vidkader .vid{border-radius:var(--r-l)}
@media(min-width:980px){.paths--drie{grid-template-columns:repeat(3,1fr)}}


/* sterrenrij */
.sterren{display:inline-flex;gap:3px;vertical-align:middle;margin-right:9px}
.sterren svg{width:16px;height:16px;fill:var(--cyan)}

/* certificeringen: bestaande diploma's die nu nergens staan */
.certs{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;
  margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}
/* de logo's hebben een witte of gekleurde eigen achtergrond, dus een filter op
   donker maakt er grijze blokken van. Een lichte chip eronder laat ze wél lezen. */
.certs img{height:44px;width:auto;display:block}
.certs__c{background:#F4F5F6;border-radius:6px;padding:12px 16px;display:flex;
  align-items:center;opacity:.8;transition:opacity .25s,transform .25s}
.certs__c:hover{opacity:1;transform:translateY(-2px)}
.certs__l{width:100%;text-align:center;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.14em;font-size:.82rem;color:var(--muted);margin-bottom:4px}

/* openingstijden */
.uren{width:100%;border-collapse:collapse;border:1px solid var(--line);background:var(--surface)}
.uren td{padding:13px 18px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.uren tr:last-child td{border-bottom:0}
.uren td:first-child{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:.9rem;color:var(--muted)}
.uren td:last-child{text-align:right}

/* citaat met een echt cijfer erin */
.quote{border-left:2px solid var(--cyan);padding:6px 0 6px 22px;margin-top:26px;
  color:var(--muted);line-height:1.75}
.quote b{color:var(--text);font-weight:600}
.quote cite{display:block;margin-top:12px;font-style:normal;font-family:var(--cond);
  text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;color:var(--cyan)}

/* coaches: de motor zet .team op vijf kolommen, en met drie coaches plakte de rij
   daardoor links met twee lege kolommen ernaast. Hier drie kolommen, gecentreerd,
   en niet zo breed dat de koppen uit elkaar vallen. Alleen voor deze site. */
@media(min-width:760px){
  .team{grid-template-columns:repeat(3,minmax(0,220px));justify-content:center;
    gap:clamp(26px,3.4vw,54px)}
}
/* de portretten zijn vierkante kopuitsneden, dus recht in het midden uitlijnen
   in plaats van de 22%-verschuiving die de motor voor staande foto's gebruikt */
.member__ph img{object-position:center center}
/* op de telefoon staan ze in twee kolommen en blijft de derde alleen links hangen.
   Die over de volle breedte en gecentreerd. */
@media(max-width:759px){
  .team>.member:last-child:nth-child(odd){grid-column:1/-1;max-width:58%;margin-inline:auto}
}

/* ---------- hero: video groot, wazig erachter, scherp als kaart ervoor ---------- */
.hx{position:relative;min-height:min(100svh,940px);display:flex;align-items:center;overflow:hidden;
  isolation:isolate;padding:calc(var(--hdr-h) + 36px) 0 clamp(90px,11vw,150px);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 4.2vw),0 100%)}
.hx__bg{position:absolute;inset:-40px;z-index:-3}
.hx__bg video,.hx__bg img{width:100%;height:100%;object-fit:cover;filter:blur(26px) saturate(1.15) brightness(.55);transform:scale(1.08)}
.hx__scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(100deg,rgba(10,10,11,.94) 0%,rgba(10,10,11,.78) 42%,rgba(10,10,11,.35) 100%),
             radial-gradient(800px 500px at 82% 40%,rgba(240,192,0,.16),transparent 70%)}
.hx__in{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(30px,5vw,80px);align-items:center}
.hx h1{font-family:var(--display);text-transform:uppercase;line-height:.9;letter-spacing:-.025em;
  font-size:clamp(2.9rem,6.4vw,5.3rem);margin:0}
.hx h1 span{display:block}
.hx h1 em{font-style:normal;color:var(--cyan)}
.hx__lead{color:#D4D6DA;max-width:50ch;font-size:1.04rem;line-height:1.6;margin:20px 0 0}
.hx__quotes{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 4px}
.hx__q{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid rgba(240,192,0,.35);
  background:rgba(240,192,0,.07);font-size:.92rem;line-height:1.35;color:#ECEDEF}
.hx__q b{color:var(--cyan);font-weight:700;white-space:nowrap}
.hx__q small{display:block;color:var(--muted);font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;margin-top:3px}
.hx__kaart{position:relative;justify-self:center;width:min(100%,330px);aspect-ratio:9/16;
  transform:rotate(3deg);border:3px solid var(--cyan);box-shadow:0 40px 90px -30px rgba(0,0,0,.9),-18px 18px 0 -2px rgba(240,192,0,.22);overflow:hidden;background:#000}
.hx__kaart video,.hx__kaart img{width:100%;height:100%;object-fit:cover;display:block}
.hx__badge{position:absolute;left:-14px;bottom:28px;transform:rotate(-3deg);background:var(--cyan);color:#14100A;
  font-family:var(--cond);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.86rem;padding:10px 14px;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.7);pointer-events:none}
.hx__tag{position:absolute;right:12px;top:12px;background:rgba(10,10,11,.75);color:#fff;font-family:var(--cond);
  text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;padding:6px 10px;pointer-events:none}
@media(max-width:860px){
  .hx{align-items:flex-end;min-height:100svh}
  .hx__in{grid-template-columns:1fr}
  .hx__kaart{display:none}
  .hx__bg video,.hx__bg img{filter:saturate(1.1) brightness(.5);transform:none}
  .hx__scrim{background:linear-gradient(180deg,rgba(10,10,11,.35) 0%,rgba(10,10,11,.55) 40%,rgba(10,10,11,.96) 82%)}
}

/* ---------- schuine banden (zelfde techniek als Muscles of Steel) ---------- */
.band{position:relative;transform:skewY(-2.4deg);margin-block:clamp(-30px,-3vw,-14px) clamp(40px,6vw,80px);overflow:hidden;z-index:2}
.band__in{transform:skewY(2.4deg);max-width:var(--maxw);margin-inline:auto;padding:clamp(34px,5vw,60px) var(--pad)}
.band--geel{background:var(--cyan);color:#14100A}
.band__cijfers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(16px,3vw,40px)}
.band__cijfer b{display:block;font-family:var(--display);font-size:clamp(1.9rem,4.4vw,3.2rem);line-height:1;letter-spacing:-.02em}
.band__cijfer span{display:block;font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:700;opacity:.78;margin-top:8px}
@media(max-width:760px){.band__cijfers{grid-template-columns:repeat(2,minmax(0,1fr))}.band__cijfer:last-child{grid-column:1/-1}}

.section.snede{clip-path:polygon(0 3vw,100% 0,100% 100%,0 100%);margin-top:-3vw;
  padding-top:calc(clamp(64px,9vw,128px) + 3vw)}
.section.snede-r{clip-path:polygon(0 0,100% 3vw,100% 100%,0 100%);margin-top:-3vw;
  padding-top:calc(clamp(64px,9vw,128px) + 3vw)}
.sec-licht{background:#F1EFE9;color:#121214;--text:#121214;--muted:#56585D;--line:rgba(0,0,0,.12);
  --line2:rgba(0,0,0,.22);--surface:#FFFFFF;--surface2:#F7F6F2;--glass:rgba(0,0,0,.03)}
.sec-licht .eyebrow{color:#7A5F00}
.sec-licht .btn--ghost{border-color:rgba(0,0,0,.22);color:#121214}

/* ---------- sfeer: beeldmozaiek ---------- */
.moz{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:clamp(120px,14vw,190px);gap:10px;margin-top:10px}
.moz figure{margin:0;position:relative;overflow:hidden;background:#000}
.moz figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.moz figure:hover img{transform:scale(1.05)}
.moz figcaption{position:absolute;left:0;bottom:0;right:0;padding:26px 14px 12px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.78));color:#fff;font-family:var(--cond);
  text-transform:uppercase;letter-spacing:.12em;font-size:.78rem}
.moz .m1{grid-column:span 3;grid-row:span 2}.moz .m2 img{object-position:center 60%}.moz .m2{grid-column:span 3}.moz .m3{grid-column:span 2}
.moz .m4{grid-column:span 1}.moz .m5{grid-column:span 2}.moz .m6{grid-column:span 2}.moz .m7{grid-column:span 2}
@media(max-width:760px){.moz{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px}
  .moz figure{grid-column:span 1!important;grid-row:span 1!important}.moz .m1{grid-column:1/-1!important;grid-row:span 2!important}}
.sfeer-punten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,36px);margin-top:clamp(34px,4vw,54px)}
.sfeer-punt h3{font-family:var(--display);text-transform:uppercase;font-size:1.12rem;margin:0 0 8px}
.sfeer-punt p{margin:0;color:var(--muted)}
.sfeer-punt q{display:block;margin-top:12px;font-size:.92rem;color:var(--text);quotes:"\201C" "\201D"}
.sfeer-punt cite{display:block;font-style:normal;font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;color:var(--muted);margin-top:6px}
@media(max-width:760px){.sfeer-punten{grid-template-columns:1fr}}

/* ---------- signature: de events-tijdlijn ---------- */
.tl__kop{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.tl__teller{font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:.86rem;color:var(--muted)}
.tl__teller b{display:block;font-family:var(--display);font-size:clamp(1.8rem,4vw,2.6rem);color:var(--cyan);letter-spacing:-.01em;line-height:1;margin-top:4px}
.tl{position:relative;margin-top:clamp(28px,4vw,46px)}
.tl__baan{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:40px 2px 26px;cursor:grab;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tl__baan::-webkit-scrollbar{display:none}
.tl__baan.is-sleep{cursor:grabbing;scroll-snap-type:none}
.tl__lijn{position:absolute;left:0;right:0;top:17px;height:3px;background:var(--line2);pointer-events:none}
.tl__lijn i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--cyan);transition:width .25s linear}
.ev{flex:0 0 min(78vw,320px);scroll-snap-align:start;position:relative;background:var(--surface);border:1px solid var(--line);
  padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;user-select:none}
.ev::before{content:"";position:absolute;top:-30px;left:22px;width:15px;height:15px;border-radius:50%;
  background:var(--bg);border:3px solid var(--line2)}
.ev.is-straks::before{border-color:var(--cyan);background:var(--cyan);box-shadow:0 0 0 6px rgba(240,192,0,.18)}
.ev__d{font-family:var(--cond);text-transform:uppercase;letter-spacing:.13em;font-size:.8rem;color:var(--muted)}
.ev h3{font-family:var(--display);text-transform:uppercase;font-size:1.22rem;line-height:1.05;margin:0}
.ev p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
.ev__s{align-self:flex-start;margin-top:auto;font-family:var(--cond);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:.72rem;padding:5px 9px;border:1px solid var(--line2);color:var(--muted)}
.ev.is-straks .ev__s{background:var(--cyan);border-color:var(--cyan);color:#14100A}
.ev.is-straks{border-color:rgba(240,192,0,.55)}
.tl__nav{display:flex;gap:10px;margin-top:6px}
.tl__nav button{width:46px;height:46px;border:1px solid var(--line2);background:transparent;color:var(--text);cursor:pointer;font-size:1.1rem}
.tl__nav button:hover{border-color:var(--cyan);color:var(--cyan)}
.ev.is-geweest{opacity:.55}
#proefweek .split__media{padding:clamp(22px,3vw,38px);height:auto;min-height:0;aspect-ratio:auto;align-self:start}
.ev h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
@media (min-width:900px){
  .tl__baan{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));overflow:visible;cursor:default;scroll-snap-type:none;padding-right:0}
  .ev{flex:none}
  .tl__nav,.tl__lijn{display:none}
}

/* ---------- leden aan het woord: klik om af te spelen ---------- */
.lv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.lv__k{position:relative;aspect-ratio:9/16;background:#000;overflow:hidden;border:1px solid var(--line)}
.lv__k video{width:100%;height:100%;object-fit:cover;display:block}
.lv__knop{position:absolute;inset:0;border:0;padding:0;background:transparent;cursor:pointer;display:flex;flex-direction:column;
  justify-content:flex-end;text-align:left;color:#fff}
.lv__knop::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.85));pointer-events:none}
.lv__play{position:absolute;left:50%;top:44%;translate:-50% -50%;width:66px;height:66px;border-radius:50%;background:var(--cyan);
  display:grid;place-items:center;box-shadow:0 0 0 10px rgba(240,192,0,.2);transition:transform .25s var(--ease);pointer-events:none}
.lv__play svg{width:24px;height:24px;margin-left:4px;fill:#14100A}
.lv__knop:hover .lv__play{transform:scale(1.08)}
.lv__t{position:relative;padding:18px;pointer-events:none}
.lv__t b{display:block;font-family:var(--display);text-transform:uppercase;font-size:1.1rem}
.lv__t span{display:inline-block;margin-top:8px;background:var(--cyan);color:#14100A;font-family:var(--cond);font-weight:800;
  text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;padding:4px 8px}
.lv__k.is-aan .lv__knop{display:none}
@media(max-width:900px){.lv{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- reviewmuur ---------- */
.rm__kop{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;margin-bottom:clamp(30px,4vw,48px)}
.rm__score{font-family:var(--display);font-size:clamp(3rem,7vw,5rem);line-height:.9}
.rm__meta{font-family:var(--cond);text-transform:uppercase;letter-spacing:.13em;font-size:.86rem;color:var(--muted)}
.rm__meta .sterren svg{fill:#E0A800;width:20px;height:20px}
.rm{columns:3 300px;column-gap:16px}
.rv-k{break-inside:avoid;margin:0 0 16px;background:var(--surface);border:1px solid var(--line);padding:22px}
.rv-k .sterren svg{fill:#E0A800;width:14px;height:14px}
.rv-k p{margin:12px 0 0;line-height:1.6}
.rv-k cite{display:block;margin-top:14px;font-style:normal;font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--muted)}
.rv-k--groot{background:#121214;color:#F2F3F4;border-color:#121214}
.rv-k--groot p{font-family:var(--display);text-transform:uppercase;font-size:1.25rem;line-height:1.15}
.rv-k--groot cite{color:var(--cyan)}

/* expertise-kaarten iets strakker */
.exp .card{border-top:3px solid var(--cyan)}