@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)}}


/* Gestapelde hero (09-10, verzoek Virgil 07-10): belofte, video, zin, knop. */
.hero--stapel .stapel{max-width:1100px;margin-inline:auto;text-align:center}
.hero--stapel .eyebrow{justify-content:center}
.hero--stapel .h-display{font-size:clamp(2.1rem,4.6vw,3.9rem)}
.hero--stapel .h-display span{display:block}
.stapel__media{position:relative;margin:clamp(26px,3.4vw,40px) auto 0;max-width:900px;border-radius:var(--radius);overflow:hidden}
.stapel__media>picture,.stapel__media>picture img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.stapel__media>picture img{object-position:50% 12%}
.stapel__media .hero-split__tag{pointer-events:none;top:16px;bottom:auto}
.stapel__media:has(.vid.is-aan) .hero-split__tag{display:none}
.hero--stapel .stapel__zin{margin:22px auto 0;max-width:58ch}
.hero--stapel .btn-row{justify-content:center;margin-top:22px}

/* ------------------------------------------------------------------
   ELEVATE30. Drie dingen wijken bewust af van de standaardengine, en
   alle drie komen uit zijn eigen academy-dia's:
   1. koppen in zinsvorm, niet in hoofdletters
   2. de ringen en de kruisjes als terugkerend vormmotief
   3. een warme gloed onderin het beeld in plaats van een koude screen
   Punt 1 is meteen wat deze site het sterkst onderscheidt van de andere
   zes coachsites, die allemaal Archivo Black in hoofdletters draaien.
   ------------------------------------------------------------------ */
.h1,.h2,.h3,.h-display,.brand,.member h4,.mobnav a{text-transform:none;letter-spacing:-.025em}
.h1,.h-display{line-height:.98}
.brand{letter-spacing:.02em}
.brand span small{letter-spacing:.3em;font-size:.58rem}

/* de engine zet .btn--primary hard in een inline <style> in de head; die wint
   van css/site.css. Vandaar de dubbele class, die weegt zwaarder.
   Staat zo ook in reference-coachsite-engine beschreven. */
.btn.btn--primary{background:#EC9F4D;color:#0A0A0C}
.btn.btn--primary:hover{
  filter:brightness(1.07);transform:translateY(-2px);
  box-shadow:0 14px 38px -12px color-mix(in srgb,#F26A21 55%,transparent);
}

/* het beeldmerk in de kop- en voettekst. De engine zet er width/height 34 op;
   dat is krap voor een merk met een ring eromheen, dus hier iets ruimer en
   met de ademruimte die bij de lockup hoort. */
.brand img{width:42px;height:42px;margin-right:2px}
.ftr .brand img{width:46px;height:46px}

/* ---------------- taalpoort: "choose your journey" ---------------- */
.poort{
  position:fixed;inset:0;z-index:9998;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(1100px 700px at 50% 8%,#171310,#08080A 70%);
}
.poort.aan{display:flex;animation:poortin .5s var(--ease) both}
@keyframes poortin{from{opacity:0}to{opacity:1}}
.poort__in{width:min(860px,100%);text-align:center}
.poort__merk{
  font-family:var(--display);font-size:clamp(1.6rem,4.6vw,2.6rem);
  letter-spacing:-.02em;color:var(--text);margin:0 0 6px;
}
.poort__merk b{color:var(--cyan);font-weight:inherit}
.poort__sub{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.26em;
  font-size:.72rem;color:var(--muted);margin:0 0 clamp(28px,5vw,46px);
}
.poort__kaarten{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,20px)}
@media(max-width:620px){.poort__kaarten{grid-template-columns:1fr}}
.poort__kaart{
  position:relative;overflow:hidden;display:block;padding:clamp(26px,4vw,40px) 20px;
  border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  cursor:pointer;text-align:center;transition:.32s var(--ease);
  animation:poortkaart .6s var(--ease) both;
}
.poort__kaart:nth-child(2){animation-delay:.09s}
@keyframes poortkaart{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.poort__kaart::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  transform:scaleX(0);transition:transform .4s var(--ease);
}
.poort__kaart:hover{border-color:color-mix(in srgb,var(--cyan) 48%,transparent);transform:translateY(-4px)}
.poort__kaart:hover::after{transform:scaleX(1)}
.poort__vlag{
  width:58px;height:40px;border-radius:5px;margin:0 auto 16px;display:block;
  box-shadow:0 8px 22px -8px rgba(0,0,0,.75);
}
.poort__taal{
  display:block;font-family:var(--display);font-size:1.35rem;
  letter-spacing:-.02em;color:var(--text);margin-bottom:5px;
}
.poort__reis{
  display:block;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.16em;font-size:.72rem;color:var(--cyan);
}
.poort__voet{
  margin-top:clamp(22px,4vw,34px);font-size:.83rem;color:var(--muted);
}
.poort__voet button{
  background:none;border:none;color:var(--muted);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;font:inherit;padding:0;
}
.poort__voet button:hover{color:var(--text)}

/* ---------------- vaste taalschakelaar in de header ---------------- */
.taal{
  display:inline-flex;align-items:center;gap:1px;flex:none;
  border:1px solid var(--line);border-radius:999px;padding:3px;margin-left:14px;
}
.taal a{
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:.7rem;color:var(--muted);
  padding:5px 11px;border-radius:999px;line-height:1;transition:.22s var(--ease);
}
.taal a:hover{color:var(--text)}
.taal a.is-nu{background:var(--cyan);color:#0A0A0C}
@media(max-width:980px){.taal{margin-left:auto;margin-right:10px}}
@media(max-width:420px){.taal a{padding:5px 8px;font-size:.64rem}}

/* ---------------- merkband: de naam moet altijd zichtbaar zijn ----------
   De engine vult .merkband__woord met een verloop dat op de tekst geknipt is
   (background-clip:text), terwijl elke letter los een blur en een transform
   krijgt voor de opbouw. Die twee gaan in WebKit niet samen: een letter met
   een filter krijgt zijn eigen laag en het verloop van de ouder komt er niet
   doorheen. Gevolg: ELEVATE30 bleef volledig onzichtbaar in de browser.

   Hier dus geen geknipt verloop. De kleurverloop-indruk komt uit negen vaste
   letterkleuren, en de metaalglans uit een gloed die letter voor letter
   aanslaat. Allebei alleen kleur en schaduw, dus het kan niet meer stuk op
   een laag of een filter. Raakt theme.css niet, want de andere zes sites
   draaien daar ook op. */
.merkband__woord{
  background:none !important;
  -webkit-text-fill-color:currentColor !important;
  animation:none !important;
}
/* ELEVATE30 is negen tekens: licht amber links, dieper oranje naar rechts. */
.merkband__woord span:nth-child(1){color:#F7CD9A}
.merkband__woord span:nth-child(2){color:#F5C083}
.merkband__woord span:nth-child(3){color:#F2B26F}
.merkband__woord span:nth-child(4){color:#EFA65C}
.merkband__woord span:nth-child(5){color:#EC9F4D}
.merkband__woord span:nth-child(6){color:#E9913F}
.merkband__woord span:nth-child(7){color:#F08434}
.merkband__woord span:nth-child(8){color:#F2762A}
.merkband__woord span:nth-child(9){color:#F26A21}

/* de opbouw iets ruimer uit elkaar, zodat je hem ziet gebeuren */
.merkband__woord span{transition-delay:calc(var(--i) * 78ms)}

/* en dan loopt er licht overheen, letter voor letter. Eerst één keer vlak na
   de opbouw, daarna om de elf seconden nog eens zodat de band leeft zonder
   te gaan zeuren. Alleen text-shadow, dus geen nieuwe laag en geen conflict
   met de blur van de opbouw. */
@keyframes e30glans{
  0%,100%{text-shadow:0 0 0 rgba(255,214,160,0)}
  40%{text-shadow:0 0 9px rgba(255,228,196,.30)}
}
.merkband__in.is-in .merkband__woord span{
  animation:e30glans 11s ease-in-out infinite;
  animation-delay:calc(1s + var(--i) * 105ms);
}
@media(prefers-reduced-motion:reduce){
  .merkband__in.is-in .merkband__woord span{animation:none}
}

/* de band zelf gloeide ook mee vanuit theme.css; die halveren */
.merkband{background:
  radial-gradient(1400px 700px at 50% 50%,color-mix(in srgb,var(--cyan) 3%,transparent),transparent 70%),
  var(--bg) !important;}

/* de stofdeeltjes duidelijker en echt omhoog: groter, feller, en ze stijgen
   ruim twee keer zo ver als eerst. Dat is het "er gaat iets omhoog"-gevoel. */
.stof i{filter:none;opacity:0;box-shadow:0 0 6px color-mix(in srgb,var(--cyan) 70%,transparent)}
@keyframes zweef{
  0%{opacity:0;transform:translate3d(0,40px,0) scale(.5)}
  12%{opacity:1}
  75%{opacity:.7}
  100%{opacity:0;transform:translate3d(var(--dx),-260px,0) scale(1.25)}
}

/* ---------------- ringen en kruisjes, zijn eigen vormmotief -------- */
.ring{
  position:absolute;border-radius:50%;pointer-events:none;
  border:clamp(18px,3.4vw,38px) solid;border-color:var(--cyan) transparent transparent var(--cyan);
  opacity:.12;transform:rotate(-38deg);
}
.kruisjes{display:flex;gap:9px;color:var(--cyan);opacity:.85}
.kruisjes i{width:13px;height:13px;position:relative;display:block}
.kruisjes i::before,.kruisjes i::after{
  content:"";position:absolute;inset:0;background:currentColor;
  clip-path:polygon(14% 0,50% 36%,86% 0,100% 14%,64% 50%,100% 86%,86% 100%,50% 64%,14% 100%,0 86%,36% 50%,0 14%);
}
.kruisjes i::after{display:none}

/* ---------------- "waarom het misgaat" ---------------- */
.misgaat{
  position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);
  padding:clamp(28px,4.4vw,54px);
}
.misgaat .ring{right:-9%;top:-38%;width:clamp(260px,32vw,440px);aspect-ratio:1}
.misgaat__rij{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,54px);align-items:center}
@media(max-width:900px){.misgaat__rij{grid-template-columns:1fr}}
.fouten{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:11px}
.fouten li{
  position:relative;padding:13px 16px 13px 46px;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);
  font-size:.98rem;
}
.fouten li::before{
  content:"";position:absolute;left:17px;top:50%;margin-top:-6px;
  width:12px;height:12px;background:#F2624A;
  clip-path:polygon(14% 0,50% 36%,86% 0,100% 14%,64% 50%,100% 86%,86% 100%,50% 64%,14% 100%,0 86%,36% 50%,0 14%);
}
.slotregel{
  margin-top:30px;padding-top:24px;border-top:1px solid var(--line);
  font-family:var(--display);font-size:clamp(1.15rem,2.4vw,1.7rem);
  letter-spacing:-.02em;line-height:1.25;
}
.slotregel b{color:var(--cyan);font-weight:inherit}

/* ---------------- het drie-fasensysteem ---------------- */
.fases{display:grid;gap:clamp(14px,2vw,20px)}
.fase{
  position:relative;overflow:hidden;display:grid;
  grid-template-columns:clamp(78px,9vw,124px) 1fr;gap:clamp(18px,3vw,34px);
  padding:clamp(22px,3.2vw,38px);border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);
  transition:.36s var(--ease);
}
.fase:hover{border-color:color-mix(in srgb,var(--cyan) 44%,transparent);transform:translateY(-3px)}
.fase::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--cyan),transparent);
  opacity:.65;
}
@media(max-width:760px){.fase{grid-template-columns:1fr;gap:14px}}
.fase__bol{
  width:clamp(66px,8vw,104px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(150deg,var(--cyan),#F26A21);
  color:#0A0A0C;font-family:var(--display);font-size:clamp(1.5rem,3vw,2.3rem);
  letter-spacing:-.04em;box-shadow:0 16px 40px -16px color-mix(in srgb,#F26A21 70%,transparent);
}
.fase__kop{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-bottom:6px}
.fase__titel{font-family:var(--display);font-size:clamp(1.3rem,2.7vw,1.95rem);letter-spacing:-.025em;margin:0}
.fase__week{
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.15em;font-size:.76rem;color:var(--cyan);
  border:1px solid color-mix(in srgb,var(--cyan) 40%,transparent);
  border-radius:999px;padding:4px 12px;
}
.fase__lead{color:var(--muted);margin:0 0 16px;font-size:1rem}
.fase__punten{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.fase__punten li{
  display:inline-flex;align-items:center;gap:8px;
  background:color-mix(in srgb,var(--cyan) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--cyan) 30%,transparent);
  border-radius:999px;padding:7px 14px 7px 11px;font-size:.88rem;
}
.fase__punten li::before{
  content:"";width:14px;height:14px;flex:none;border-radius:50%;
  background:var(--cyan);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/78% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/78% no-repeat;
}

/* ---------------- resultatengalerij ---------------- */
.tf{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(10px,1.4vw,16px)}
.tf figure{
  position:relative;margin:0;overflow:hidden;border-radius:14px;
  border:1px solid var(--line);background:var(--surface);
}
.tf img{display:block;width:100%;height:auto;transition:transform .7s var(--ease)}
.tf figure:hover img{transform:scale(1.035)}
.tf figure::after{
  content:"";position:absolute;left:50%;top:6%;bottom:6%;width:1px;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--cyan) 65%,transparent),transparent);
}
.tf__labels{
  position:absolute;left:0;right:0;bottom:0;display:flex;
  font-family:var(--cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:.66rem;
}
.tf__labels span{
  flex:1;text-align:center;padding:9px 4px;
  background:linear-gradient(0deg,rgba(6,6,8,.9),transparent);color:#fff;
}
.tf__labels span:last-child{color:var(--cyan)}

/* ---------------- videobewijs ---------------- */
.vbewijs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:clamp(10px,1.5vw,16px)}
.vbewijs figure{
  margin:0;position:relative;overflow:hidden;border-radius:14px;
  border:1px solid var(--line);aspect-ratio:3/4;
}
.vbewijs img{width:100%;height:100%;object-fit:cover;display:block}
.vbewijs figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:30px 14px 13px;
  background:linear-gradient(0deg,rgba(6,6,8,.94),transparent);
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.13em;
  font-size:.7rem;color:#fff;
}

/* ---------------- cijferband ---------------- */
.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:clamp(14px,2vw,24px)}
.cijfer{text-align:center;padding:clamp(18px,2.6vw,28px) 12px;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface)}
.cijfer b{
  /* 23-09: "Wekelijks" (het vervangende check-in-label, zie de cijfers-tuple
     hieronder) liep bij 3.1rem over de rand van de kaart. Kleiner max, en
     "Check-in" staat nu dikgedrukt (korter) met "Wekelijks" als klein label
     eronder; gemeten op 390/768/1024/1440px dat niets meer overloopt. */
  display:block;font-family:var(--display);font-size:clamp(1.7rem,4.2vw,2.7rem);
  letter-spacing:-.035em;line-height:1;
  background:linear-gradient(140deg,var(--cyan),#F26A21);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cijfer span{
  display:block;margin-top:9px;font-family:var(--cond);text-transform:uppercase;
  letter-spacing:.15em;font-size:.72rem;color:var(--muted);
}

/* ---------------- retreat ---------------- */
.retreat{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line)}
.retreat__beeld{position:relative}
.retreat__beeld img{display:block;width:100%;height:auto}
.retreat__beeld::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,var(--surface) 4%,rgba(10,10,12,.45) 52%,transparent);
}
.retreat__in{position:relative;background:var(--surface);padding:clamp(24px,3.6vw,44px);margin-top:-1px}
.retreat__strook{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:24px}
.retreat__strook img{width:100%;height:100%;object-fit:cover;border-radius:12px;aspect-ratio:4/5;display:block}

/* de engine zet merk.ondertitel twee keer in de voet: als klein label onder het
   woordmerk en nog eens als losse alinea eronder. Dat leest als "COACHING
   COACHING". De alinea eruit, het label blijft. */
.ftr__grid > div:first-child > p.muted{display:none}

/* ---------------- citaten ---------------- */
.citaten{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(14px,2vw,20px)}
.citaat{
  position:relative;padding:clamp(24px,3vw,34px);border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface);
}
.citaat::before{
  content:"\201C";position:absolute;top:6px;left:18px;
  font-family:var(--display);font-size:4.6rem;line-height:1;
  color:var(--cyan);opacity:.2;
}
.citaat h3{
  font-family:var(--display);font-size:1.1rem;letter-spacing:-.02em;
  margin:0 0 12px;position:relative;
}
.citaat p{color:var(--muted);font-size:.95rem;margin:0 0 16px}
.citaat cite{
  font-family:var(--cond);font-style:normal;text-transform:uppercase;
  letter-spacing:.15em;font-size:.72rem;color:var(--cyan);
}

/* ---------------- retreatpagina: THE BALI ESCAPE ---------------- */
.ret-citaat{max-width:30ch;margin:0 auto;text-align:center}
.ret-citaat p{font-family:var(--font-display);font-size:clamp(1.35rem,3.1vw,2.05rem);
  line-height:1.24;letter-spacing:-.02em;margin:0 0 .28em;color:var(--text)}
.ret-citaat p:last-of-type{color:var(--cyan)}
.ret-citaat cite{display:block;margin-top:22px;font-style:normal;font-size:.85rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ret-strook{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.ret-strook picture{display:block;width:100%;height:100%}
.ret-strook img{width:100%;height:100%;object-fit:cover;border-radius:12px;
  aspect-ratio:4/5;display:block}
/* team(): beeld() zet een <picture> tussen .member__ph en de img. Die is
   inline en geeft geen hoogte door, dus het portret werd een lege cirkel.
   Hoort in theme.css, staat hier omdat theme.css de andere zes sites draagt. */
.member__ph picture{display:block;width:100%;height:100%}
.ret-terug{display:inline-flex;align-items:center;gap:8px;margin:22px 0 -26px;
  font-size:.9rem;letter-spacing:.04em;color:var(--muted);text-decoration:none}
.ret-terug:before{content:"";width:16px;height:1px;background:currentColor;
  transition:width .2s ease}
.ret-terug:hover{color:var(--cyan)}
.ret-terug:hover:before{width:26px}

/* de feitenbalk onder de hero */
.ret-feiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden}
.ret-feit{background:var(--surface);padding:22px 20px}
.ret-feit dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px}
.ret-feit dd{margin:0;font-family:var(--font-display);font-size:1.12rem;
  letter-spacing:-.02em;color:var(--text)}
.ret-feit dd small{display:block;font-family:inherit;font-size:.8rem;
  letter-spacing:0;color:var(--muted);margin-top:4px}

/* wel en niet inbegrepen, naast elkaar */
.ret-bij{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.ret-bij>div{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(22px,2.6vw,30px)}
.ret-bij h3{margin:0 0 16px}
.ret-bij ul{list-style:none;margin:0;padding:0}
.ret-bij li{position:relative;padding-left:26px;margin-bottom:11px;
  font-size:.95rem;line-height:1.5;color:var(--text)}
.ret-bij li:before{position:absolute;left:0;top:0;font-weight:700}
.ret-bij--wel li:before{content:"+";color:var(--cyan)}
.ret-bij--niet li{color:var(--muted)}
.ret-bij--niet li:before{content:"–";color:var(--muted)}

/* wat deelnemers zeiden */
.ret-quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px}
.ret-quote{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(22px,2.6vw,30px);display:flex;
  flex-direction:column;gap:14px}
.ret-quote h4{margin:0;font-size:1.02rem;color:var(--cyan)}
.ret-quote p{margin:0;font-size:.94rem;line-height:1.62;color:var(--text)}
.ret-quote cite{margin-top:auto;font-style:normal;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* team() staat in theme.css op vijf kolommen. Met twee hosts hingen ze scheef
   in de linkerhoek en waren de portretten onnodig klein. */
#hosts .team{grid-template-columns:1fr;max-width:300px}
@media(min-width:760px){#hosts .team{grid-template-columns:1fr}}

/* ---------------- Bali-kaart ----------------
   Tweede ronde, 21-09. De eerste versie was een vlak silhouet met streepjes
   en dat zag eruit als een kleurplaat. Wat het nu draagt:
   1. het land heeft een verloop en een schaduw, dus het ligt IN de zee
   2. dieptecontouren rond de kust, zoals op een zeekaart
   3. routelijnen vanaf Canggu naar elke plek, want dat maakt het een reis
   4. de actieve route en het actieve punt lichten op
   Geen enkele externe bron, alles is svg in het merk.                      */
.kaart{display:grid;gap:clamp(16px,2.4vw,28px)}
@media(min-width:900px){.kaart{grid-template-columns:1.06fr 1fr;align-items:start}}
.kaart__map{position:relative;border-radius:var(--radius);overflow:hidden;
  padding:clamp(14px,2vw,26px);border:1px solid var(--line);
  background:radial-gradient(120% 90% at 62% 44%,
    color-mix(in srgb,var(--cyan) 9%,var(--bg2)) 0%, var(--bg2) 58%, var(--bg) 100%)}
.kaart__map svg{display:block;width:100%;height:auto}

.kaart__contour{fill:none;stroke:var(--cyan);stroke-width:1.2}
.kaart__land{fill:url(#landvul);stroke:var(--cyan);stroke-width:1.6;stroke-opacity:.55;
  filter:url(#landschaduw)}
.kaart__eiland{fill:url(#landvul);stroke:var(--cyan);stroke-width:1.4;stroke-opacity:.55;
  filter:url(#landschaduw)}
.kaart__naam{font-family:var(--disp);font-size:26px;letter-spacing:.36em;
  fill:var(--muted);opacity:.32;text-transform:uppercase}

.kaart__route{fill:none;stroke:var(--cyan);stroke-width:1.6;stroke-dasharray:5 7;
  stroke-linecap:round;opacity:.22;transition:opacity .3s ease,stroke-width .3s ease}
.kaart__route.is-aan{opacity:.95;stroke-width:2.4;stroke-dasharray:6 6}

.kaart__punt{cursor:pointer}
.kaart__punt circle,.kaart__punt line{transition:r .25s ease,opacity .25s ease,
  stroke-width .2s ease}
.kaart__punt .ring{fill:none;stroke:var(--cyan);stroke-width:1.2;opacity:.34}
.kaart__punt .stip{fill:var(--cyan);stroke:var(--bg);stroke-width:2.5}
.kaart__punt .lijn{stroke:var(--cyan);stroke-width:1;opacity:.35}
.kaart__punt text{font-family:var(--cond);font-size:21px;letter-spacing:.11em;
  text-transform:uppercase;fill:var(--muted);transition:fill .25s ease}
.kaart__punt:hover .stip{r:9.5}
.kaart__punt.is-aan .stip{r:11}
.kaart__punt:hover .ring{opacity:.7;r:19}
.kaart__punt.is-aan .ring{opacity:1;r:22;stroke-width:2}
.kaart__punt:hover .lijn,.kaart__punt.is-aan .lijn{opacity:.85}
.kaart__punt:hover text,.kaart__punt.is-aan text{fill:var(--text)}
.kaart__punt.is-aan .stip{filter:url(#puntgloed)}
/* Een <g> met tabindex krijgt van de browser een blauw kader om zijn hele
   omhullende rechthoek. Dat stond bij een muisklik dwars over de kaart.
   Weg bij elke vorm van focus; de zichtbare markering voor toetsenbord-
   gebruikers zit in de ring hieronder, dus er gaat niets verloren. */
.kaart__punt:focus,.kaart__punt:focus-visible{outline:none}
.kaart__punt:focus{outline:0}
.kaart__map svg :focus{outline:none}
.kaart__punt:focus-visible .ring{opacity:1;stroke-width:3;r:22}
.kaart__punt--basis .stip{fill:var(--text)}
.kaart__punt--basis .ring{stroke:var(--text);opacity:.22}
.kaart__punt--basis text{letter-spacing:.16em}

.kaart__paneel{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.kaart__beeld{position:relative;aspect-ratio:4/3;background:var(--surface2)}
.kaart__beeld picture,.kaart__beeld img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.kaart__leeg{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;padding:26px;
  background:repeating-linear-gradient(135deg,var(--surface2) 0 14px,var(--surface) 14px 28px)}
.kaart__leeg b{font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:.8rem;color:var(--cyan)}
.kaart__leeg span{font-size:.88rem;color:var(--muted);max-width:32ch;line-height:1.5}
.kaart__tekst{padding:clamp(20px,2.4vw,28px)}
.kaart__tekst .eyebrow{margin:0 0 10px}
.kaart__tekst h3{margin:0 0 8px}
.kaart__tekst p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.6}
/* Alle vakken op dezelfde rasterplek, zodat de hoogte van het paneel niet
   meer verspringt als er een langere tekst in komt. */
.kaart__paneel{display:grid}
.kaart__vak{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .25s ease}
.kaart__vak.is-aan{visibility:visible;opacity:1}
.kaart__hint{margin:14px 0 0;font-size:.84rem;color:var(--muted)}
.kaart__credit{margin:8px 0 0;font-size:.72rem;line-height:1.5;color:var(--muted);
  opacity:.65}
.kaart__credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* De omgekeerde variant. Alleen wat op een lichte ondergrond anders moet. */
.thema-licht .ret-feiten{background:var(--line)}
.thema-licht .ret-feit{background:var(--surface)}
.thema-licht .ret-citaat p:last-of-type{color:var(--cyan)}
.thema-licht .ret-quote,.thema-licht .ret-bij>div{background:var(--surface);
  box-shadow:0 1px 2px rgba(20,20,26,.05),0 8px 24px rgba(20,20,26,.05)}
.thema-licht .hero__grain{opacity:.5}
/* De hero staat op een foto, dus daar blijft de tekst wit. */
.thema-licht .hero .h-display,.thema-licht .hero .eyebrow{color:#fff}
.thema-licht .hero .lead{color:#EDEAE4}
/* Kaart op licht: de zee krijgt kleur, anders is wit land op wit karton
   onzichtbaar. Gemeten op 21-09, het land verdween volledig. */
.thema-licht .kaart__map{background:radial-gradient(120% 90% at 62% 44%,
  #E4EDF2 0%, #DCE7EE 55%, #D2DEE7 100%)}
.thema-licht .kaart__land,.thema-licht .kaart__eiland{stroke-opacity:.75}
.thema-licht .kaart__contour{stroke:#6E8DA0}
.thema-licht .kaart__route{stroke:#B4661C;opacity:.3}
.thema-licht .kaart__route.is-aan{opacity:1}
.thema-licht .kaart__naam{fill:#6E8DA0;opacity:.55}
.thema-licht .kaart__punt text{fill:#4A5A66}
.thema-licht .kaart__punt .lijn{stroke:#4A5A66;opacity:.5}
/* 23-09, Virgil: "die foto op de achtergrond [...] daardoor wordt de tekst
   een beetje onduidelijk." De engine legt via .hero__media::after al een
   donker verloop over elke hero_beeld()-foto (zie theme.css), maar deze
   thema-licht-regel had een veel zwakkere versie ervoor in de plaats gezet
   (max .62 opacity, tegen bijna dekkend in het donkere thema). Dat was het
   probleem, geen ontbrekende laag: hier gewoon zo donker gemaakt als het
   donkere thema, niet een extra laag erbovenop. */
.thema-licht .hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,12,.62) 0%,rgba(10,10,12,.38) 34%,rgba(10,10,12,.90) 78%,rgba(10,10,12,.97) 100%)}
/* 25-09. Zelfde klacht, andere plek. Virgil 22-09 19:06 over de retreat-
   header: "de tekst daardoor iets minder zichtbaar wordt. Daarboven zeg maar,
   al die..." Bovenaan de pagina is de header doorzichtig, en in dit lichte
   thema zijn menu, woordmerk en taalschakelaar donker. Over de (nu donkere)
   herofoto was het menu daardoor vrijwel onleesbaar. Hier staat de header
   altijd in zijn vaste, lichte stand, zoals hij er na scrollen al uitzag. */
.thema-licht .hdr{background:var(--scrim-9);backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);border-bottom-color:var(--line)}
/* 25-09. De tweede heroknop "Bekijk het programma" / "See the programme"
   was onzichtbaar: .btn--ghost pakt var(--text), en dat is in dit thema
   bijna zwart, op een foto die sinds 23-09 donker is gemaakt. Gemeten op de
   live pagina, desktop en mobiel. Op de herofoto dus lichte tekst. */
.thema-licht .hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.08)}
.thema-licht .hero .btn--ghost:hover{color:#fff;border-color:#fff}