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

/* 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}

.r7-verblijf{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:clamp(18px,2.4vw,28px)}
.r7-verblijf figure{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3}
.r7-verblijf picture,.r7-verblijf img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:760px){.r7-verblijf{grid-template-columns:1fr 1fr}}

/* ================= THE BALI ESCAPE 2027 ================= */
.r7{--donker:#0B0A09;--amber:#EC9F4D;--zand:#EFE5D7;--r:22px}
.r7 .wrap{position:relative}
.r7-h2{font-family:var(--display);font-size:clamp(2rem,5.2vw,3.6rem);line-height:1.02;
  letter-spacing:-.025em;margin:0;text-transform:none;color:var(--text)}
.r7-h2 em{font-style:normal;color:var(--cyan)}
.r7-lead{font-size:clamp(1.02rem,1.45vw,1.18rem);line-height:1.7;color:var(--muted);max-width:60ch;margin:18px 0 0}
.r7-kop{margin-bottom:clamp(30px,4.5vw,56px)}
.r7-kop.c{text-align:center}.r7-kop.c .r7-lead{margin-inline:auto}
.r7-ey{display:inline-flex;align-items:center;gap:10px;font-size:.76rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin:0 0 16px}
.r7-ey:before{content:"";width:26px;height:2px;background:currentColor}
.r7-ico{width:24px;height:24px;flex:none}
.r7-sec{padding-block:clamp(72px,10vw,140px);position:relative}
.r7-sec--zand{background:var(--zand)}
.r7-sec--wit{background:var(--bg2)}
.r7-sec--donker{background:var(--donker);color:#F4EFE8}
.r7-sec--donker .r7-h2{color:#fff}.r7-sec--donker .r7-h2 em{color:var(--amber)}
.r7-sec--donker .r7-lead{color:#BDB5AA}.r7-sec--donker .r7-ey{color:var(--amber)}
/* korrel als textuur op zand */
.r7-sec--zand:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:radial-gradient(rgba(120,90,50,.13) 1px,transparent 1px);background-size:5px 5px}

/* knoppen */
.r7-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.r7-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;
  padding:0 28px;border-radius:999px;font-weight:700;font-size:.92rem;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,color .25s;
  position:relative;overflow:hidden;font-family:inherit}
.r7-btn--p{background:var(--cyan);color:#fff;box-shadow:0 10px 30px -12px rgba(180,102,28,.8)}
.r7-btn--p:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .8s var(--ease)}
.r7-btn--p:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(180,102,28,.9)}
.r7-btn--p:hover:after{transform:translateX(120%)}
.r7-btn--g{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.55)}
.r7-btn--g:hover{border-color:#fff;transform:translateY(-2px)}
.r7-btn--d{background:transparent;color:var(--text);border-color:rgba(23,20,15,.25)}
.r7-btn--d:hover{border-color:var(--cyan);color:var(--cyan)}
.r7-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.r7-btn:focus-visible,.r7 a:focus-visible,.r7 button:focus-visible,.r7 input:focus-visible{
  outline:3px solid var(--amber);outline-offset:3px}

/* 1 HERO */
.r7-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;
  overflow:hidden;isolation:isolate;padding:calc(var(--hdr-h) + 40px) 0 clamp(70px,9vw,110px)}
.r7-hero__bg{position:absolute;inset:0;z-index:-2}
.r7-hero__bg picture,.r7-hero__bg img{width:100%;height:100%;object-fit:cover;display:block}
.r7-hero__bg img{animation:r7-kb 22s var(--ease) both}
.r7-hero:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,7,6,.55) 0%,rgba(8,7,6,.18) 32%,rgba(8,7,6,.55) 62%,rgba(8,7,6,.92) 100%)}
.r7-hero__in{max-width:980px}
.r7-hero__ey{font-size:.8rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--amber);margin:0 0 18px}
.r7-hero h1{font-family:var(--display);font-size:clamp(2.6rem,8.4vw,6.6rem);line-height:.92;
  letter-spacing:-.035em;margin:0;text-transform:uppercase}
.r7-hero h1 span{display:block;color:var(--amber)}
.r7-hero__sub{font-family:var(--display);font-size:clamp(1.25rem,2.6vw,2rem);letter-spacing:-.015em;margin:20px 0 0;line-height:1.2}
.r7-hero__lead{font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.65;color:#E7E1D8;max-width:56ch;margin:16px 0 0}
.r7-feitjes{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.r7-feitjes li{padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:.88rem;font-weight:600}
.r7-feitjes li b{color:var(--amber)}
.r7-scroll{position:absolute;left:50%;bottom:22px;width:24px;height:40px;margin-left:-12px;
  border:1.5px solid rgba(255,255,255,.6);border-radius:14px;display:block}
.r7-scroll:after{content:"";position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;
  border-radius:2px;background:var(--amber);animation:r7-cue 1.8s infinite}
.r7-in{opacity:0;transform:translateY(22px);animation:r7-up .9s var(--ease) forwards}
.r7-in.d1{animation-delay:.12s}.r7-in.d2{animation-delay:.24s}.r7-in.d3{animation-delay:.36s}.r7-in.d4{animation-delay:.48s}
@keyframes r7-up{to{opacity:1;transform:none}}
@keyframes r7-kb{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes r7-cue{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@media(max-width:700px){.r7-scroll{display:none}.r7-hero{align-items:flex-end}}

/* 2 FILM */
.r7-film{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;background:#000;
  box-shadow:0 40px 90px -40px rgba(236,159,77,.45),0 0 0 1px rgba(236,159,77,.25)}
.r7-film video,.r7-film img{width:100%;height:100%;object-fit:cover;display:block}
.r7-film .vid{position:absolute;inset:0;aspect-ratio:auto!important;border-radius:0}
.r7-film__chip{position:absolute;left:16px;top:16px;padding:7px 12px;border-radius:999px;
  background:rgba(0,0,0,.55);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;pointer-events:none}
.r7-film__speel{position:absolute;right:16px;bottom:16px;display:none;align-items:center;gap:8px;
  padding:10px 16px;border-radius:999px;border:0;background:rgba(0,0,0,.6);color:#fff;font:inherit;
  font-size:.82rem;font-weight:700;cursor:pointer}
.r7-film.is-stil .r7-film__speel{display:inline-flex}

/* 3 MEER DAN EEN RETREAT */
.r7-meer{display:grid;gap:clamp(36px,5vw,72px);align-items:center}
@media(min-width:960px){.r7-meer{grid-template-columns:1.05fr .95fr}}
.r7-collage{position:relative;aspect-ratio:1/1.05;max-width:560px;width:100%;margin-inline:auto}
.r7-collage figure{position:absolute;margin:0;border-radius:var(--r);overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(40,25,10,.55)}
.r7-collage figure img,.r7-collage picture{width:100%;height:100%;object-fit:cover;display:block}
.r7-collage .a{left:0;top:6%;width:58%;height:70%}
.r7-collage .b{right:0;top:0;width:44%;height:48%}
.r7-collage .c{right:4%;bottom:0;width:50%;height:46%;border:6px solid var(--zand)}
.r7-meer p.r7-tekst{font-size:1.06rem;line-height:1.75;color:var(--text);margin:0 0 16px;max-width:56ch}
.r7-pijlers{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:26px}
.r7-pijlers span{display:flex;align-items:center;gap:10px;padding:14px;border-radius:14px;
  background:var(--surface);font-weight:600;font-size:.92rem;color:var(--text)}
.r7-pijlers .r7-ico{color:var(--cyan)}

/* 4 ERVARINGEN */
.r7-rail{display:grid;grid-auto-flow:column;grid-auto-columns:86%;gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding-bottom:12px;margin-inline:calc(var(--pad)*-1);
  padding-inline:var(--pad);scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.r7-rail>*{scroll-snap-align:start}
@media(min-width:760px){.r7-rail--3{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);
  overflow:visible;margin-inline:0;padding-inline:0}}
.r7-quote{background:var(--surface);border-radius:var(--r);padding:clamp(24px,2.6vw,34px);display:flex;
  flex-direction:column;gap:16px;box-shadow:0 1px 2px rgba(20,14,8,.05),0 18px 40px -26px rgba(40,25,10,.35);
  transition:transform .4s var(--ease)}
.r7-quote:hover{transform:translateY(-4px)}
.r7-quote__m{font-family:var(--display);font-size:3.2rem;line-height:.6;color:var(--cyan);height:22px}
.r7-quote h3{margin:0;font-family:var(--display);font-size:1.25rem;letter-spacing:-.01em;color:var(--text)}
.r7-quote p{margin:0;font-size:.96rem;line-height:1.65;color:var(--text)}
.r7-quote cite{margin-top:auto;font-style:normal;font-size:.8rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.r7-vt{border-radius:var(--r);overflow:hidden;background:#000;position:relative}
.r7-vt .vid{aspect-ratio:9/16;border-radius:0}
.r7-vt figcaption{padding:16px 18px;background:var(--surface);color:var(--text)}
.r7-vt figcaption b{display:block;font-family:var(--display);font-size:1.05rem}
.r7-vt figcaption span{font-size:.82rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}

/* 5 PROGRAMMA-GRID */
.r7-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:900px){.r7-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;gap:16px;grid-auto-flow:dense}
  .r7-k--groot{grid-column:span 2;grid-row:span 2}.r7-k--hoog{grid-row:span 2}.r7-k--breed{grid-column:span 2}}
.r7-k{position:relative;border-radius:var(--r);overflow:hidden;min-height:200px;isolation:isolate;
  background:var(--surface);display:flex;flex-direction:column;justify-content:flex-end;padding:20px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.r7-k:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(40,25,10,.6)}
.r7-k__bg{position:absolute;inset:0;z-index:-2}
.r7-k__bg picture,.r7-k__bg img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease)}
.r7-k:hover .r7-k__bg img{transform:scale(1.07)}
.r7-k--foto{color:#fff;min-height:260px}
.r7-k--foto:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,transparent 35%,rgba(10,8,6,.82) 100%)}
.r7-k h3{margin:0;font-family:var(--display);font-size:1.18rem;letter-spacing:-.01em;line-height:1.15}
.r7-k p{margin:8px 0 0;font-size:.9rem;line-height:1.5;opacity:.88}
.r7-k--tekst{border:1px solid rgba(23,20,15,.08)}
.r7-k--tekst .r7-ico{color:var(--cyan);width:30px;height:30px;margin-bottom:auto}
.r7-k--tekst p{color:var(--muted);opacity:1}
.r7-k--bonus{background:var(--donker);color:#fff}
.r7-k--bonus .r7-ico{color:var(--amber)}.r7-k--bonus p{color:#BDB5AA}
.r7-k__tag{position:absolute;top:16px;left:16px;padding:6px 11px;border-radius:999px;font-size:.7rem;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:var(--amber);color:#1A1208}
@media(max-width:899px){.r7-k--groot{grid-column:span 2;min-height:320px}}
@media(max-width:520px){.r7-grid{grid-template-columns:1fr}.r7-k--groot{grid-column:auto}
  .r7-k{min-height:180px}.r7-k--foto{min-height:300px}}

/* 6 BALI */
.r7-bali{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding-bottom:14px;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad)}
@media(min-width:900px){.r7-bali{grid-auto-flow:row;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:280px 280px;
  overflow:visible;margin-inline:0;padding-inline:0}.r7-bali .r7-plek:first-child{grid-row:span 2}}
.r7-plek{position:relative;border-radius:var(--r);overflow:hidden;min-height:420px;scroll-snap-align:start;
  color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;isolation:isolate}
@media(min-width:900px){.r7-plek{min-height:0}}
.r7-plek .r7-k__bg img{transition:transform 1.2s var(--ease)}
.r7-plek:hover .r7-k__bg img{transform:scale(1.06)}
.r7-plek:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(8,6,4,.85) 100%)}
.r7-plek h3{margin:0;font-family:var(--display);font-size:1.4rem;letter-spacing:-.01em}
.r7-plek p{margin:8px 0 0;font-size:.92rem;line-height:1.5;color:#E9E3DA;max-width:42ch}
.r7-plek__tag{position:absolute;top:16px;left:16px;display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border-radius:999px;font-size:.7rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;background:rgba(255,255,255,.92);color:#1A1208}
.r7-plek__tag .r7-ico{width:14px;height:14px;color:var(--cyan)}
.r7-optie{display:flex;gap:14px;align-items:flex-start;margin-top:22px;padding:20px 22px;border-radius:16px;
  background:var(--surface);border:1px dashed rgba(180,102,28,.45);max-width:760px}
.r7-optie .r7-ico{color:var(--cyan);margin-top:2px}
.r7-optie p{margin:0;font-size:.95rem;line-height:1.6;color:var(--text)}
.r7-credit{margin:14px 0 0;font-size:.74rem;color:var(--muted)}
.r7-credit a{color:inherit}

/* 7 DAG */
.r7-dag{position:relative;display:grid;gap:clamp(18px,2vw,26px);max-width:880px;margin-inline:auto;padding-left:34px}
.r7-dag:before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--amber),rgba(236,159,77,.15))}
.r7-uur{position:relative;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px 18px}
.r7-uur:before{content:"";position:absolute;left:-29px;top:50%;width:12px;height:12px;margin-top:-6px;
  border-radius:50%;background:var(--donker);border:2px solid var(--amber)}
.r7-uur__foto{width:78px;height:78px;border-radius:14px;overflow:hidden;flex:none;background:rgba(236,159,77,.12);
  display:grid;place-items:center;color:var(--amber)}
.r7-uur__foto picture,.r7-uur__foto img{width:100%;height:100%;object-fit:cover;display:block}
.r7-uur time{display:block;font-family:var(--display);font-size:1.5rem;color:var(--amber);letter-spacing:-.02em}
.r7-uur b{display:block;font-size:1.05rem;color:#fff;margin-top:2px}
.r7-uur span{display:block;font-size:.9rem;color:#BDB5AA;margin-top:4px;line-height:1.5}
.r7-dag__noot{text-align:center;margin:26px auto 0;font-size:.88rem;color:#9E968B;max-width:60ch}

/* 8 THUIS */
.r7-split{display:grid;gap:clamp(30px,5vw,70px);align-items:center}
@media(min-width:900px){.r7-split{grid-template-columns:1fr 1fr}.r7-split--om>:first-child{order:2}}
.r7-foto{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 34px 70px -40px rgba(40,25,10,.6)}
.r7-foto picture,.r7-foto img{width:100%;height:100%;object-fit:cover;display:block}
.r7-foto figcaption{position:absolute;left:14px;bottom:14px;padding:6px 12px;border-radius:999px;
  background:rgba(0,0,0,.55);color:#fff;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.r7-chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.r7-chips li{padding:9px 14px;border-radius:999px;background:var(--surface);border:1px solid rgba(23,20,15,.1);
  font-size:.86rem;font-weight:600;color:var(--text)}

/* 9 VOOR WIE */
.r7-wie{display:grid;gap:18px}
@media(min-width:900px){.r7-wie{grid-template-columns:1.25fr .75fr}}
.r7-lijst{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.r7-lijst li{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:16px;background:var(--surface);
  font-size:1rem;color:var(--text);box-shadow:0 1px 2px rgba(20,14,8,.04)}
.r7-lijst .r7-ico{color:var(--cyan)}
.r7-kaart{border-radius:var(--r);padding:clamp(24px,3vw,34px);background:var(--donker);color:#F4EFE8}
.r7-kaart h3{margin:0 0 10px;font-family:var(--display);font-size:1.35rem;color:#fff}
.r7-kaart p{margin:0 0 12px;color:#C9C1B6;line-height:1.65;font-size:.96rem}
.r7-kaart .r7-niveau{display:flex;gap:6px;margin:16px 0 8px}
.r7-niveau i{width:100%;height:8px;border-radius:4px;background:rgba(255,255,255,.14)}
.r7-niveau i.aan{background:var(--amber)}

/* 10 HOST */
.r7-host .r7-foto{aspect-ratio:4/5;max-width:520px}
.r7-host blockquote{margin:24px 0 0;padding-left:18px;border-left:3px solid var(--cyan);
  font-family:var(--display);font-size:1.25rem;line-height:1.35;color:var(--text)}

/* 11 INBEGREPEN */
.r7-bij{display:grid;gap:16px}
@media(min-width:800px){.r7-bij{grid-template-columns:1.2fr .8fr}}
.r7-bij>div{border-radius:var(--r);padding:clamp(24px,3vw,36px);background:var(--surface)}
.r7-bij h3{margin:0 0 18px;font-family:var(--display);font-size:1.3rem}
.r7-bij ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.r7-bij li{display:flex;gap:12px;align-items:flex-start;line-height:1.5;font-size:.98rem}
.r7-bij .wel .r7-ico{color:var(--cyan)}
.r7-bij .niet{background:transparent;border:1px solid rgba(23,20,15,.14)}
.r7-bij .niet li{color:var(--muted)}.r7-bij .niet .r7-ico{color:var(--muted)}
.r7-bij .noot{margin:18px 0 0;font-size:.88rem;color:var(--muted)}

/* 12 PRIJS */
.r7-prijzen{display:grid;gap:18px;max-width:920px;margin-inline:auto}
@media(min-width:760px){.r7-prijzen{grid-template-columns:1fr 1fr}}
.r7-prijs{position:relative;border-radius:26px;padding:clamp(28px,3.4vw,40px);background:var(--surface);
  border:1px solid rgba(23,20,15,.1);display:flex;flex-direction:column}
.r7-prijs--top{background:var(--donker);color:#F4EFE8;border-color:rgba(236,159,77,.4);
  box-shadow:0 40px 80px -40px rgba(180,102,28,.65)}
.r7-prijs__vlag{position:absolute;top:-13px;left:28px;padding:6px 13px;border-radius:999px;background:var(--amber);
  color:#1A1208;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.r7-prijs h3{margin:0;font-size:.82rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.r7-prijs--top h3{color:var(--amber)}
.r7-prijs__bedrag{font-family:var(--display);font-size:clamp(3rem,6vw,4.2rem);letter-spacing:-.04em;line-height:1;margin:14px 0 4px}
.r7-prijs__per{font-size:.92rem;color:var(--muted)}.r7-prijs--top .r7-prijs__per{color:#BDB5AA}
.r7-prijs__aan{margin:22px 0;padding:14px 16px;border-radius:14px;background:var(--zand);font-size:.92rem;line-height:1.5}
.r7-prijs--top .r7-prijs__aan{background:rgba(255,255,255,.07)}
.r7-prijs__aan b{font-size:1.05rem}
.r7-prijs ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:9px;font-size:.94rem}
.r7-prijs li{display:flex;gap:10px;align-items:flex-start}
.r7-prijs li .r7-ico{width:18px;height:18px;color:var(--cyan);margin-top:2px}
.r7-prijs--top li .r7-ico{color:var(--amber)}
.r7-prijs .r7-btn{margin-top:auto;width:100%}
.r7-prijs--dicht{opacity:.6}
.r7-prijs--dicht .r7-prijs__bedrag{text-decoration:line-through;text-decoration-thickness:3px}
.r7-onder{text-align:center;margin:28px auto 0;max-width:640px;font-size:.95rem;color:var(--muted);line-height:1.6}
.r7-onder a{color:var(--cyan);font-weight:700}

/* BOEKEN */
.r7-boek{max-width:760px;margin-inline:auto;background:var(--surface);border-radius:28px;
  padding:clamp(24px,4vw,46px);box-shadow:0 40px 90px -50px rgba(40,25,10,.55);border:1px solid rgba(23,20,15,.07)}
.r7-boek fieldset{border:0;margin:0 0 22px;padding:0}
.r7-boek legend{font-weight:800;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.r7-tarieven{display:grid;gap:10px}
@media(min-width:600px){.r7-tarieven{grid-template-columns:1fr 1fr}}
.r7-tarief{position:relative;display:block;cursor:pointer}
.r7-tarief input{position:absolute;opacity:0;pointer-events:none}
.r7-tarief span{display:block;padding:16px 18px;border-radius:16px;border:1.5px solid rgba(23,20,15,.15);
  transition:border-color .2s,background .2s}
.r7-tarief b{display:block;font-size:1rem}
.r7-tarief small{display:block;color:var(--muted);font-size:.86rem;margin-top:3px}
.r7-tarief input:checked+span{border-color:var(--cyan);background:rgba(180,102,28,.07);box-shadow:inset 0 0 0 1px var(--cyan)}
.r7-tarief input:focus-visible+span{outline:3px solid var(--amber);outline-offset:2px}
.r7-tarief input:disabled+span{opacity:.45;cursor:not-allowed}
.r7-velden{display:grid;gap:12px}
@media(min-width:600px){.r7-velden{grid-template-columns:1fr 1fr}.r7-velden .vol{grid-column:span 2}}
.r7-veld label{display:block;font-size:.86rem;font-weight:700;margin-bottom:6px;color:var(--text)}
.r7-veld input{width:100%;min-height:52px;padding:0 16px;border-radius:14px;border:1.5px solid rgba(23,20,15,.16);
  background:var(--bg2);font:inherit;font-size:1rem;color:var(--text)}
.r7-veld input:focus{border-color:var(--cyan);outline:none}
.r7-samen{margin:22px 0;padding:18px 20px;border-radius:16px;background:var(--zand);display:grid;gap:6px;font-size:.95rem}
.r7-samen div{display:flex;justify-content:space-between;gap:12px}
.r7-samen .tot{font-weight:800;font-size:1.05rem;padding-top:8px;border-top:1px solid rgba(23,20,15,.12)}
.r7-akkoord{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;line-height:1.55;margin-bottom:20px;cursor:pointer}
.r7-akkoord input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:#B4661C}
.r7-akkoord a{color:var(--cyan);font-weight:700}
.r7-boek .r7-btn{width:100%}
.r7-boek__noot{text-align:center;font-size:.84rem;color:var(--muted);margin:12px 0 0}
.r7-boek__fout{display:none;margin:12px 0 0;padding:12px 14px;border-radius:12px;background:#FBE9E2;color:#8A2E10;font-size:.9rem}
.r7-boek__ok{display:none;text-align:center;padding:10px 0}
.r7-boek__ok h3{font-family:var(--display);font-size:1.6rem;margin:0 0 10px}
.r7-boek__ok p{color:var(--muted);line-height:1.6;margin:0 auto 20px;max-width:46ch}
.r7-boek.is-klaar form{display:none}.r7-boek.is-klaar .r7-boek__ok{display:block}
.r7-wa{display:inline-flex;align-items:center;gap:8px}

/* 13 STAPPEN */
.r7-stappen{display:grid;gap:14px;counter-reset:st}
@media(min-width:900px){.r7-stappen{grid-template-columns:repeat(4,1fr)}}
.r7-stap{position:relative;padding:26px 22px;border-radius:var(--r);background:var(--surface);counter-increment:st}
.r7-stap:before{content:counter(st);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:var(--cyan);color:#fff;font-family:var(--display);font-size:1.2rem;margin-bottom:16px}
.r7-stap h3{margin:0 0 8px;font-family:var(--display);font-size:1.12rem}
.r7-stap p{margin:0;font-size:.92rem;line-height:1.6;color:var(--muted)}

/* 14 FAQ: engine faq() krijgt een lichte rand */
.r7 .faq{max-width:860px;margin-inline:auto}

/* 15 SLOT */
.r7-slot{position:relative;min-height:min(86svh,760px);display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff;overflow:hidden;isolation:isolate;padding:100px 0}
.r7-slot .r7-k__bg img{transform:scale(1.08)}
.r7-slot:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(8,7,6,.45),rgba(8,7,6,.85))}
.r7-slot h2{font-family:var(--display);font-size:clamp(2.4rem,7vw,5.4rem);line-height:.95;letter-spacing:-.035em;margin:0}
.r7-slot p{font-size:clamp(1.05rem,1.6vw,1.3rem);color:#E9E3DA;margin:18px auto 0;max-width:46ch}
.r7-slot .r7-btns{justify-content:center}
.r7-slot__onder{margin-top:20px!important;font-size:.88rem!important;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)!important}

/* de algemene sticky-cta van de engine hoort niet op deze pagina, hier staat een eigen */
body:has(.r7) .sticky-cta{display:none!important}
@media(max-width:899px){.r7-rail>.rv,.r7-bali>.rv{opacity:1;transform:none}}
.r7-slot__onder{white-space:normal}
/* sticky mobiele CTA */
.r7-sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:80;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:10px 10px 10px 18px;border-radius:999px;background:rgba(11,10,9,.94);
  color:#fff;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);transform:translateY(140%);
  transition:transform .45s var(--ease);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.r7-sticky.is-aan{transform:none}
.r7-sticky small{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#BDB5AA}
.r7-sticky b{font-size:1rem}
.r7-sticky .r7-btn{min-height:46px;padding:0 18px;font-size:.76rem;white-space:nowrap;flex:none}
@media(min-width:900px){.r7-sticky{display:none}}
@media(max-width:899px){body.r7-body{padding-bottom:84px}}

/* parallax en reveal */
[data-px]{will-change:transform}
@media(prefers-reduced-motion:reduce){
  .r7-in{opacity:1;transform:none;animation:none}
  .r7-hero__bg img,.r7-slot .r7-k__bg img{animation:none;transform:none}
  .r7-scroll:after{animation:none}
  .r7-k,.r7-k__bg img,.r7-plek .r7-k__bg img,.r7-quote,.r7-btn,.r7-sticky{transition:none}
  .r7-k:hover .r7-k__bg img,.r7-plek:hover .r7-k__bg img{transform:none}
  [data-px]{transform:none!important}
}