/* ═══════════════════════════════════════════════════
   Monkey Moves BSO Utrecht — Static Landing Page CSS
   ═══════════════════════════════════════════════════ */

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

/* === Custom Properties === */
:root {
  --purple: #743d97;
  --purple-dark: #5c0f8b;
  --yellow: #ffcc1b;
  --yellow-cta: #ffce2d;
  --yellow-light: #fdf4d6;
  --green: #97DDC680;
  --green-text: #255847;
  --blue: #0068ff;
  --body-text: #282828;
  --white: #ffffff;
  --font-heading: 'Abyss', sans-serif;
  --font-body: 'Ubuntu', sans-serif;
  --max-page: 1440px;
  --px-mobile: 16px;
  --px-tablet: 32px;
  --px-desktop: 64px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
}

/* === Font Face === */
@font-face {
  font-family: 'Abyss';
  src: url("https://fn-regio.monkeymoves.com/assets/bso-marketing/fonts/AbyssRegular.eot");
  src: url("https://fn-regio.monkeymoves.com/assets/bso-marketing/fonts/AbyssRegular.eot#iefix") format('embedded-opentype'),
       url("https://fn-regio.monkeymoves.com/assets/bso-marketing/fonts/AbyssRegular.woff2") format('woff2'),
       url("https://fn-regio.monkeymoves.com/assets/bso-marketing/fonts/AbyssRegular.woff") format('woff'),
       url("https://fn-regio.monkeymoves.com/assets/bso-marketing/fonts/AbyssRegular.ttf") format('truetype'),
       url("https://fn-regio.monkeymoves.com/assets/bso-marketing/fonts/AbyssRegular.svg#AbyssRegular") format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  margin: 0; padding: 0;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  background: var(--white);
  color: #000;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
p { margin: 0; }
a { color: inherit; }
button { font-family: inherit; }
h1, h2, h3 { margin: 0; }

/* Richtext body paragraphs: visuele witruimte tussen alinea's */
.content-block__body p,
.active-bso__body p,
.green-card__body p,
.meet-mm__body p,
.hiring__body p,
.banner-groen__body p,
.features__intro p { margin-bottom: 20px; }
.content-block__body p:last-child,
.active-bso__body p:last-child,
.green-card__body p:last-child,
.meet-mm__body p:last-child,
.hiring__body p:last-child,
.banner-groen__body p:last-child,
.features__intro p:last-child { margin-bottom: 0; }

/* Richtext lijsten: nette bullets/nummering */
.content-block__body ul,
.content-block__body ol,
.active-bso__body ul,
.active-bso__body ol,
.meet-mm__body ul,
.meet-mm__body ol,
.hiring__body ul,
.hiring__body ol,
.banner-groen__body ul,
.banner-groen__body ol,
.features__intro ul,
.features__intro ol { padding-left: 24px; margin: 12px 0; }
.content-block__body li,
.active-bso__body li,
.meet-mm__body li,
.hiring__body li,
.banner-groen__body li,
.features__intro li { margin-bottom: 6px; }

/* === Page Wrapper === */
.page-wrapper {
  max-width: var(--max-page);
  margin: 0 auto;
  padding: 16px var(--px-mobile) 16px;
}
@media (min-width: 768px) { .page-wrapper { padding: 24px var(--px-tablet) 32px; } }
@media (min-width: 1024px) { .page-wrapper { padding: 32px var(--px-desktop) 64px; } }

/* ── Content-lijn: sectie-content uitlijnen met header-logo + footercontent ──
   De header (.nav-bar) en footer (.site-footer) hebben interne padding (desktop 48px /
   tablet 32px), waardoor hun content binnen de page-gutter valt. Sectie-content ligt tegen
   de gutter en komt daardoor links van het logo. Via een gedeelde inset-variabele lijnen we
   de sectie-content uit met die content-lijn. Op mobiel is de content gecentreerd/gestapeld,
   dus daar geen inset (variabele = 0).
   Gespiegeld in controlpanel-v2/club-page-builder/assets/css/index.css. */
.club-composed-main, .club-main { --club-content-inset: 0px; }
@media (min-width: 768px)  { .club-composed-main, .club-main { --club-content-inset: 32px; } }
@media (min-width: 1024px) { .club-composed-main, .club-main { --club-content-inset: 48px; } }
/* Elke sectie krijgt dezelfde horizontale inset als de header-/footercontent, zodat ALLE
   content (tekst én beeld) uitlijnt met het logo en de footerkolommen. De sectie-ACHTERGROND
   blijft onaangetast: full-bleed kleurbanden worden via ::before (viewport-relatief) getekend
   of via width:100vw (padding valt binnen de achtergrond).
   Uitzonderingen: gekleurde banner-secties met eigen padding (usp-banner, banner-groen, hiring),
   de full-width hero (hero-overview, header-bento), de partner-marquee (div) en secties met
   een eigen gecentreerde contentkolom (compare-table-v2, pricing-plans). */
.club-composed-main > section:not(.usp-banner):not(.banner-groen):not(.hiring):not(.hero-overview):not(.header-bento):not(.compare-table-v2):not(.pricing-plans),
.club-composed-main > .faq,
.club-main > section:not(.usp-banner):not(.banner-groen):not(.hiring):not(.hero-overview):not(.header-bento):not(.compare-table-v2):not(.pricing-plans),
.club-main > .faq {
  padding-left: var(--club-content-inset, 0px);
  padding-right: var(--club-content-inset, 0px);
}

/* === Scroll Reveal === */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-reveal="left"] { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal].revealed {
  opacity: 1;
  transform: translate(0, 0);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* === Shared Section Titles === */
.section-title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--purple-dark);
  text-align: center;
  font-size: 26px; line-height: 32px;
}
@media (min-width: 1024px) { .section-title--left { text-align: left; } }
.section-subtitle {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--purple-dark);
  text-align: center;
  font-size: 22px; line-height: 32px;
}
@media (min-width: 1024px) { .section-subtitle--left { text-align: left; } }
@media (min-width: 768px) {
  .section-title { font-size: 40px; line-height: 48px; }
  .section-subtitle { font-size: 26px; line-height: 40px; }
}
@media (min-width: 1024px) {
  .section-title { font-size: 60px; line-height: 64px; }
  .section-subtitle { font-size: 32px; line-height: 48px; }
}

/* === Shared Button === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border: none; border-radius: var(--radius-lg); cursor: pointer;
  text-decoration: none; padding: 0 10px 0 16px;
  min-height: 60px; max-height: 60px;
  transition: box-shadow 0.2s, transform 0.15s;
}
.btn:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); transform: translateY(-1px); }
.btn--yellow { background: var(--yellow); box-shadow: 0 0 12px rgba(0,0,0,0.16), 0 4px 2px rgba(0,0,0,0.04); }
.btn--gold { background: var(--yellow-cta); }
.btn--full { width: 100%; }
.btn--small { min-height: 60px; border-radius: var(--radius-md); padding: 4px 8px 4px 16px; }
.btn--purple { background: var(--purple); }
.btn--green { background: #28a745; }
.btn--white { background: #fff; box-shadow: 0 0 12px rgba(0,0,0,0.10); }
.btn--secondary {
  background: transparent; border: none; padding: 12px 8px 12px 16px;
  box-shadow: none;
}
.btn--secondary:hover { box-shadow: none; background: rgba(0,104,255,0.06); }
.btn--link-blue {
  background: transparent; border: none; padding: 12px 8px 12px 16px;
  box-shadow: none;
}
.btn--link-blue .btn__label { color: var(--blue); }
.btn--link-blue:hover { box-shadow: none; background: rgba(0,104,255,0.06); }
.btn--small-full { width: 100%; }
@media (min-width: 1024px) { .btn--small-full { width: auto; } }
.btn__label {
  font-family: var(--font-body); font-weight: 700; font-size: 20px; line-height: 30px;
  color: #5b4700;
}
.btn__icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex-shrink: 0;
}
.btn__icon img { width: 48px; height: 48px; transform: rotate(45deg); }
.btn__icon--sm { width: 48px; height: 48px; }
.btn__icon--sm img { width: 48px; height: 48px; transform: rotate(45deg); }
.btn__icon--no-rotate { width: 32px; height: 32px; }
.btn__icon--no-rotate img { width: 28px; height: 28px; transform: none; }
.btn__icon--sm.btn__icon--no-rotate { width: 32px; height: 32px; }
.btn__icon--sm.btn__icon--no-rotate img { width: 28px; height: 28px; transform: none; }
.btn__label--dark { color: #0b0b0b; }
.btn__label--blue { color: var(--blue); }
.btn__label--white { color: var(--white); }
.btn__icon .bi { font-size: 24px; color: inherit; }
.btn__icon--sm .bi { font-size: 24px; }
.btn--yellow .btn__icon .bi, .btn--gold .btn__icon .bi { color: #5b4700; }
.btn--purple .btn__icon .bi { color: var(--white); }
.btn--secondary .btn__icon .bi { color: var(--blue); }
.btn--green .btn__icon .bi { color: var(--white); }
.btn--white .btn__icon .bi { color: var(--purple-dark); }

/* === Pills / Tags === */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px 4px 4px; border-radius: 4px;
  background: rgba(92,15,139,0.1);
  font-family: var(--font-body); font-weight: 400; font-size: 14px;
  line-height: 14px; color: #5c0f8b; cursor: pointer; text-transform: uppercase;
  transition: transform 0.15s, box-shadow 0.15s;
}
.pill:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.pill__label { white-space: nowrap; }
.pill__icon {
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex-shrink: 0;
}
.pill__icon img, .pill__icon svg { width: 100%; height: 100%; }
.pill--yellow { background: var(--yellow-cta); color: var(--purple-dark); }
.pill--purple { background: var(--purple); color: var(--white); }
.pills { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* === Icon Utility === */
.icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon--16 { width: 16px; height: 16px; }
.icon--24 { width: 24px; height: 24px; }
.icon--36 { width: 36px; height: 36px; }
.icon--48 { width: 48px; height: 48px; }
.icon img, .icon svg { width: 100%; height: 100%; }

/* === Check List (for USP sections) === */
.check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.check-list__item {
  display: flex; align-items: flex-start; gap: 16px;
  font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 30px; color: var(--white);
}
@media (min-width: 1024px) { .check-list__item { font-size: 20px; } }
.check-list__item strong { font-weight: 700; }
.check-list__icon { flex-shrink: 0; width: 24px; height: 24px; margin-top: 3px; }
.check-list__icon img, .check-list__icon svg { width: 100%; height: 100%; }
.check-list--dark .check-list__item { color: var(--body-text); }

/* === Trust Badges (horizontal inline stat badges — Figma 4:813) === */
/* Desktop: 4 badges in a row, gap 32px, each flex:1 */
.trust-badges {
  display: flex; flex-wrap: wrap; gap: 12px; width: 100%;
}
@media (min-width: 768px) { .trust-badges { gap: 16px; } }
@media (min-width: 1024px) { .trust-badges { gap: 32px; flex-wrap: nowrap; } }

/* Single badge: bg #fdf4d6, rounded 12px, px 16 py 12, gap 8 */
.trust-badge {
  background: #fdf4d6; border-radius: 12px;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; flex: 1 1 calc(50% - 6px); min-width: 0;
}
@media (min-width: 1024px) { .trust-badge { flex: 1 0 0; } }

/* Icon: 36x36, rounded 8px, overflow clip */
.trust-badge__icon {
  flex-shrink: 0; width: 36px; height: 36px; display: flex;
  align-items: center; justify-content: center; border-radius: 8px;
  overflow: hidden; position: relative;
}
.trust-badge__icon img, .trust-badge__icon svg { width: 100%; height: 100%; }

/* Content row: flex, gap 12px, items center */
.trust-badge__content {
  display: flex; align-items: center; gap: 12px; flex: 1 0 0; min-width: 0;
  white-space: nowrap; line-height: normal; font-style: normal;
}

/* Number: Ubuntu Bold 34px #743d97 */
.trust-badge__number {
  font-family: 'Ubuntu', sans-serif; font-weight: 700;
  color: #743d97; font-size: 24px; line-height: normal;
  white-space: nowrap; flex-shrink: 0;
}
@media (min-width: 768px) { .trust-badge__number { font-size: 28px; } }
@media (min-width: 1024px) { .trust-badge__number { font-size: 34px; } }

/* Label: Ubuntu Regular 16px #5c0f8b */
.trust-badge__label {
  font-family: 'Ubuntu', sans-serif; font-weight: 400;
  font-size: 14px; color: #5c0f8b; white-space: nowrap;
  line-height: normal; flex-shrink: 0;
}
@media (min-width: 768px) { .trust-badge__label { font-size: 16px; } }

/* Review detail: flex-col, gap 10px */
.trust-badge__detail {
  display: flex; flex-direction: column; gap: 10px;
  align-items: flex-start; justify-content: center;
}

/* Stars: 116 × 18.889px */
.trust-badge__stars { width: 116px; height: 19px; display: block; flex-shrink: 0; }

/* Text badge: Ubuntu Regular 16px #5c0f8b */
.trust-badge__text {
  font-family: 'Ubuntu', sans-serif; font-weight: 400;
  color: #5c0f8b; font-size: 14px; line-height: normal;
  white-space: normal;
}
@media (min-width: 768px) { .trust-badge__text { font-size: 16px; } }

/* === Decorative Background Wrappers === */
.bg-purple-wave {
  position: relative; background: var(--purple-dark); overflow: hidden;
  padding: 48px var(--px-mobile) 80px;
}
@media (min-width: 768px) { .bg-purple-wave { padding: 64px var(--px-tablet) 96px; } }
@media (min-width: 1024px) { .bg-purple-wave { padding: 80px var(--px-desktop) 120px; } }
.bg-purple-wave::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
  background: var(--white);
  clip-path: ellipse(55% 100% at 50% 100%);
}
@media (min-width: 768px) { .bg-purple-wave::after { height: 80px; } }
@media (min-width: 1024px) { .bg-purple-wave::after { height: 100px; } }
.bg-purple-wave__inner { position: relative; z-index: 1; max-width: calc(var(--max-page) - 128px); margin: 0 auto; }

.bg-green-wave {
  position: relative; background: #c8ede0; overflow: hidden;
  padding: 60px var(--px-mobile) 48px;
}
@media (min-width: 768px) { .bg-green-wave { padding: 80px var(--px-tablet) 64px; } }
@media (min-width: 1024px) { .bg-green-wave { padding: 100px var(--px-desktop) 80px; } }
.bg-green-wave::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 40px;
  background: var(--white);
  clip-path: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40'%3E%3Cpath d='M0,0 Q36,40 72,0 Q108,40 144,0 Q180,40 216,0 Q252,40 288,0 Q324,40 360,0 Q396,40 432,0 Q468,40 504,0 Q540,40 576,0 Q612,40 648,0 Q684,40 720,0 Q756,40 792,0 Q828,40 864,0 Q900,40 936,0 Q972,40 1008,0 Q1044,40 1080,0 Q1116,40 1152,0 Q1188,40 1224,0 Q1260,40 1296,0 Q1332,40 1368,0 Q1404,40 1440,0 V40 H0Z' fill='white'/%3E%3C/svg%3E");
}
.bg-green-wave__inner { position: relative; z-index: 1; max-width: calc(var(--max-page) - 128px); margin: 0 auto; }

/* === Content Block (text + image, 2-column) === */
.content-block { display: flex; flex-direction: column; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .content-block { flex-direction: row; align-items: center; justify-content: space-between; } }
@media (min-width: 1024px) { .content-block--reverse { flex-direction: row-reverse; } }
.content-block__text {
  display: flex; flex-direction: column; gap: 24px; align-items: center; width: 100%;
}
@media (min-width: 1024px) { .content-block__text { width: 528px; flex-shrink: 0; align-items: flex-start; } }
.content-block__heading { display: flex; flex-direction: column; gap: 16px; text-align: center; }
@media (min-width: 1024px) { .content-block__heading { text-align: left; } }
.content-block__body {
  font-weight: 300; color: var(--body-text); font-size: 16px; line-height: 24px; text-align: center;
}
.content-block__body ul { display: inline-block; text-align: left; margin: 8px 0; padding-left: 20px; }
.content-block__body li { margin-bottom: 4px; }
@media (min-width: 768px) { .content-block__body { font-size: 18px; line-height: 28px; } }
@media (min-width: 1024px) { .content-block__body { font-size: 20px; line-height: 30px; text-align: left; } .content-block__body ul { display: block; } }
.content-block__ctas { display: flex; flex-direction: column; gap: 16px; width: 100%; }
@media (min-width: 1024px) { .content-block__ctas { flex-direction: row; width: auto; } }
.content-block__media { width: 100%; max-width: 640px; }
@media (min-width: 1024px) { .content-block__media { flex: 1; min-width: 0; } }
.content-block__media img { width: 100%; height: auto; object-fit: contain; }

/* === USP Banner (colored background + checklist + mascot) === */
.usp-banner {
  position: relative; overflow: visible; border-radius: 12px;
  padding: 24px; display: flex; flex-direction: column; gap: 24px;
  margin-top: 80px;
}
@media (min-width: 768px) { .usp-banner { margin-top: 112px; } }
@media (min-width: 1024px) { .usp-banner { margin-top: 160px; } }
@media (min-width: 768px) { .usp-banner { padding: 32px; } }
@media (min-width: 1024px) { .usp-banner { padding: 48px 48px 48px 48px; flex-direction: row; align-items: flex-end; } }
/* ── USP banner: achtergrondkleur varianten (zachte pastel gradients) ── */
.usp-banner--bg-paars { background: linear-gradient(135deg, #d8b4f8 0%, #eddcfa 50%, #f3e8ff 100%); }
.usp-banner--bg-groen { background: linear-gradient(135deg, #a3e4c1 0%, #c8f0dc 50%, #e6f9ef 100%); }
.usp-banner--bg-geel { background: linear-gradient(135deg, #f5dc6e 0%, #fae9a0 50%, #fdf6d8 100%); }
.usp-banner--bg-blauw { background: linear-gradient(135deg, #93c5fd 0%, #bfdbfe 50%, #e0effe 100%); }
.usp-banner--bg-oranje { background: linear-gradient(135deg, #fdba74 0%, #fdd4a0 50%, #fef0db 100%); }
.usp-banner--bg-roze { background: linear-gradient(135deg, #f9a8d4 0%, #fbc8e0 50%, #fee7f0 100%); }
.usp-banner--bg-donkerblauw { background: linear-gradient(135deg, #7e9cc7 0%, #a8bdd9 50%, #d4e1ef 100%); }
.usp-banner--bg-wit { background: #ffffff; border: 1px solid #e5e7eb; }
/* ── USP banner: tekst kleur varianten ── */
.usp-banner--text-licht .usp-banner__title,
.usp-banner--text-licht .usp-banner__text { color: #fff; }
.usp-banner--text-donker .usp-banner__title { color: #1a1a2e; }
.usp-banner--text-donker .usp-banner__text { color: #374151; }
.usp-banner__content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 1024px) { .usp-banner__content { flex: 1; max-width: 66%; } }
.usp-banner__title {
  font-family: var(--font-heading); font-size: 36px; line-height: 40px;
  color: #fff; margin: 0;
}
@media (min-width: 1024px) { .usp-banner__title { font-size: 60px; line-height: 64px; } }
.usp-banner__columns { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 1024px) { .usp-banner__columns { flex-direction: row; gap: 16px; } }
.usp-banner--bullets-stacked .usp-banner__columns { flex-direction: column; }
.usp-banner__col { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.usp-banner__item { display: flex; gap: 16px; align-items: flex-start; }
.usp-banner__check { width: 24px; height: 24px; flex-shrink: 0; margin-top: 2px; }
.usp-banner__text {
  font-family: var(--font-body); font-weight: 300; font-size: 16px;
  line-height: 27px; color: #fff; margin: 0;
}
.usp-banner__text strong { font-weight: 700; }
@media (min-width: 1024px) { .usp-banner__text { font-size: 20px; } }
.usp-banner__mascot { flex-shrink: 0; width: 100%; max-width: 300px; align-self: center; }
@media (min-width: 1024px) {
  .usp-banner__mascot {
    position: absolute; right: 5%; bottom: 0; width: auto; max-width: 38%;
    height: 100%; z-index: 0; pointer-events: none;
  }
}
.usp-banner__mascot img { width: 100%; height: auto; object-fit: contain; }
@media (min-width: 1024px) {
  .usp-banner__mascot img {
    height: 100%; width: auto; max-width: none; object-fit: contain;
    object-position: center bottom;
  }
}

/* === Partners Logo Slider === */
.partners {
  overflow: hidden; padding: 24px 0; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.partners__track {
  display: flex; align-items: center; gap: 48px; width: max-content; will-change: transform;
}
@media (min-width: 1024px) { .partners__track { gap: 88px; } }
/* Weinig logo's (geen overflow): geen slider -> netjes gecentreerd met wrap. */
.partners:not(.partners--marquee) .partners__track {
  width: 100%; flex-wrap: wrap; justify-content: center; gap: 40px 64px;
}
.partners--marquee .partners__track {
  animation: partners-marquee var(--marquee-duration, 40s) linear infinite;
}
.partners--marquee:hover .partners__track,
.partners--marquee:focus-within .partners__track { animation-play-state: paused; }
@keyframes partners-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.partners__logo {
  flex: 0 0 auto; height: 90px; display: flex; align-items: center; justify-content: center;
  min-width: 0; opacity: 0.7; transition: opacity 0.2s;
}
@media (min-width: 1024px) { .partners__logo { height: 140px; } }
.partners__logo:hover { opacity: 1; }
.partners__logo a { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; }
.partners__logo img { height: 100%; width: auto; max-width: 180px; object-fit: contain; }

/* === Icon Rocks Grid (icon cards with rock/bubble background) === */
.icon-rocks { display: flex; flex-direction: column; gap: 32px; align-items: center; padding-top: 40px; }
.icon-rocks__grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; width: 100%;
}
.icon-rocks__grid > .icon-rock { width: 100%; }
@media (min-width: 640px) { .icon-rocks__grid > .icon-rock { width: calc(50% - 16px); } }
@media (min-width: 1024px) { .icon-rocks__grid > .icon-rock { width: calc(33.333% - 22px); } }
.icon-rock {
  position: relative; display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 0; min-height: 320px; cursor: pointer;
}
@media (min-width: 1024px) { .icon-rock { min-height: 400px; } }
.icon-rock__blob {
  position: absolute; bottom: 0; left: 3%; right: 3%; top: 22%;
  background: linear-gradient(90deg, #E6D4E7 9%, #E6D4E7 59%);
  pointer-events: none; z-index: 0;
  transform: scale(0.6); opacity: 0;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
}
.icon-rock.revealed .icon-rock__blob { transform: scale(1); opacity: 1; }
.icon-rock__blob--1 {
  border-radius: 62% 38% 56% 44% / 52% 58% 42% 48%;
  animation: blobMorph1 10s ease-in-out infinite;
  animation-play-state: paused;
}
.icon-rock__blob--2 {
  border-radius: 44% 56% 40% 60% / 58% 42% 55% 45%;
  animation: blobMorph2 12s ease-in-out infinite;
  animation-delay: -4s;
  animation-play-state: paused;
}
.icon-rock__blob--3 {
  border-radius: 55% 45% 62% 38% / 42% 56% 44% 56%;
  animation: blobMorph3 11s ease-in-out infinite;
  animation-delay: -7s;
  animation-play-state: paused;
}
.icon-rock.revealed .icon-rock__blob { animation-play-state: running; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease; }
.icon-rock:hover .icon-rock__blob { transform: scale(1.05); }

.icon-rock__icon {
  position: relative; z-index: 1; width: 140px; height: 155px;
  object-fit: contain; flex-shrink: 0;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}
.icon-rock.revealed .icon-rock__icon { opacity: 1; transform: translateY(0); animation: iconFloat 4s ease-in-out infinite; }
.icon-rock:nth-child(2) .icon-rock__icon { animation-delay: -0.8s; }
.icon-rock:nth-child(3) .icon-rock__icon { animation-delay: -1.6s; }
.icon-rock:nth-child(4) .icon-rock__icon { animation-delay: -2.4s; }
.icon-rock:nth-child(5) .icon-rock__icon { animation-delay: -3.2s; }
.icon-rock:nth-child(6) .icon-rock__icon { animation-delay: -3.8s; }
.icon-rock:hover .icon-rock__icon { animation: iconBounce 0.6s ease; }
.icon-rock__icon--iconify::after {
  content: ''; position: absolute; inset: 10%; border-radius: 50%;
  background: radial-gradient(circle, rgba(116,61,151,0.18) 0%, transparent 70%);
  opacity: 0; transition: opacity 0.4s ease; z-index: -1;
}
.icon-rock:hover .icon-rock__icon--iconify::after { opacity: 1; }
@media (min-width: 1024px) { .icon-rock__icon { width: 140px; height: 155px; } }
.icon-rock__icon--iconify {
  width: 100px; height: 100px; color: #743d97;
  display: flex; align-items: center; justify-content: center;
  margin-top: 24px;
}
@media (min-width: 1024px) { .icon-rock__icon--iconify { width: 120px; height: 120px; margin-top: 32px; } }
.icon-rock__text {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px;
  align-items: center; text-align: center; padding: 0 16px; max-width: 302px;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s ease 0.45s, transform 0.5s ease 0.45s;
}
.icon-rock.revealed .icon-rock__text { opacity: 1; transform: translateY(0); }
.icon-rock__title {
  font-family: var(--font-body); font-weight: 400; color: var(--purple-dark);
  font-size: 24px; line-height: 28px;
}
@media (min-width: 1024px) { .icon-rock__title { font-size: 32px; line-height: normal; } }
.icon-rock__desc {
  font-weight: 300; color: #0b0b0b; font-size: 16px; line-height: 30px;
}
@media (min-width: 1024px) { .icon-rock__desc { font-size: 20px; } }

/* === Intro Section (De beweegrijke BSO pattern) === */
.intro-section {
  display: flex; flex-direction: column; gap: 32px; align-items: center;
  padding: 48px 0;
}
@media (min-width: 1024px) { .intro-section { flex-direction: row; gap: 32px; padding: 64px 0; } }
.intro-section__text {
  display: flex; flex-direction: column; gap: 24px; align-items: flex-start;
}
@media (min-width: 1024px) { .intro-section__text { width: 640px; flex-shrink: 0; } }
.intro-section__heading {
  display: flex; flex-direction: column; gap: 16px; color: var(--purple-dark);
}
.intro-section__title {
  font-family: var(--font-heading); font-weight: 700;
  font-size: 36px; line-height: 42px;
}
@media (min-width: 768px) { .intro-section__title { font-size: 48px; line-height: 56px; } }
@media (min-width: 1024px) { .intro-section__title { font-size: 60px; line-height: 64px; } }
.intro-section__subtitle {
  font-family: var(--font-body); font-weight: 400;
  font-size: 24px; line-height: 28px; color: var(--purple-dark);
}
@media (min-width: 768px) { .intro-section__subtitle { font-size: 28px; line-height: 32px; } }
@media (min-width: 1024px) { .intro-section__subtitle { font-size: 32px; line-height: 48px; } }
.intro-section__body,
.intro-section__body * {
  font-family: var(--font-body) !important;
  font-weight: 300 !important;
  color: var(--body-text) !important;
  font-size: 16px !important;
  line-height: 24px !important;
}
@media (min-width: 768px) {
  .intro-section__body,
  .intro-section__body * {
    font-size: 18px !important;
    line-height: 28px !important;
  }
}
@media (min-width: 1024px) {
  .intro-section__body,
  .intro-section__body * {
    font-size: 20px !important;
    line-height: 30px !important;
  }
}
/* Genormaliseerde richtext: blok-alinea's stromen netjes i.p.v. losse flex-items. */
.intro-section__body > div,
.intro-section__body > p { margin: 0; }
.intro-section__body > div + div,
.intro-section__body > p + p { margin-top: 16px; }
/* Lege scheidingsregels (bijv. <div><br></div>) uit de richtext-editor niet als extra witruimte tonen; de alinea-marge regelt de tussenruimte. */
.intro-section__body > div:has(> br:only-child) { display: none; }
/* Lege .intro-section__body (ontstaat doordat de editor block-alinea's búíten de
   <p> duwt) niet als onzichtbaar flex-item meetellen: anders verdubbelt de gap
   in .intro-section__text (heading→tekst wordt 24+24=48px i.p.v. 24px). */
.intro-section__body:empty { display: none; }
/* Editor-artefact: een <p> mag geen block-children bevatten, dus de contenteditable
   builder-editor duwt alinea's als losse <div>/<p>-siblings búíten een lege
   .intro-section__body. Geef die stray-blokken toch de body-typografie en nette
   alinea-afstand, zodat bestaande (opgeslagen) content correct rendert. */
.intro-section__text > div:not([class]),
.intro-section__text > p:not([class]) {
  font-family: var(--font-body) !important;
  font-weight: 300 !important;
  color: var(--body-text) !important;
  font-size: 16px !important; line-height: 24px !important;
  margin: 0;
}
@media (min-width: 768px) {
  .intro-section__text > div:not([class]),
  .intro-section__text > p:not([class]) { font-size: 18px !important; line-height: 28px !important; }
}
@media (min-width: 1024px) {
  .intro-section__text > div:not([class]),
  .intro-section__text > p:not([class]) { font-size: 20px !important; line-height: 30px !important; }
}
.intro-section__text > div:not([class]) + div:not([class]),
.intro-section__text > p:not([class]) + p:not([class]) { margin-top: 16px !important; }
.intro-section__text > div:not([class]):has(> br:only-child),
.intro-section__text > div:not([class]):empty,
.intro-section__text > p:not([class]):empty { display: none; }
/* Mobiel: compactere intro en gecentreerde, niet-overheersende media/blob. */
@media (max-width: 1023px) {
  .intro-section { padding: 32px 0; gap: 24px; }
  .intro-section__text { width: 100%; gap: 24px; }
  .intro-section__media .active-bso__shape { max-width: 420px; margin: 0 auto; }
}
.intro-section__media {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
}
.intro-section__media img {
  width: 100%; max-width: 480px; height: auto; object-fit: cover;
  border-radius: 50%; aspect-ratio: 1/1;
}
@media (min-width: 1024px) {
  .intro-section__media img { max-width: 100%; border-radius: 50%; }
}

/* === Highlight Cards (Sport BSO?! Multisport BSO! pattern) === */
.highlight-cards { display: flex; flex-direction: column; gap: 32px; align-items: center; padding: 48px 0; }
@media (min-width: 1024px) { .highlight-cards { gap: 48px; padding: 64px 0; } }
.highlight-cards__header {
  display: flex; flex-direction: column; gap: 16px; align-items: center;
  text-align: center; max-width: 864px; width: 100%;
}
.highlight-cards__title {
  font-family: var(--font-heading); font-weight: 700; color: var(--purple-dark);
  font-size: 36px; line-height: 42px;
}
@media (min-width: 768px) { .highlight-cards__title { font-size: 48px; line-height: 56px; } }
@media (min-width: 1024px) { .highlight-cards__title { font-size: 60px; line-height: 64px; } }
.highlight-cards__subtitle {
  font-family: var(--font-body); font-weight: 400; color: var(--purple-dark);
  font-size: 24px; line-height: 28px;
}
@media (min-width: 768px) { .highlight-cards__subtitle { font-size: 28px; line-height: 32px; } }
@media (min-width: 1024px) { .highlight-cards__subtitle { font-size: 32px; line-height: 32px; } }
.highlight-cards__intro {
  font-weight: 300; color: var(--body-text); font-size: 16px; line-height: 24px;
  margin-top: 8px;
}
@media (min-width: 1024px) { .highlight-cards__intro { font-size: 20px; line-height: 30px; } }
.highlight-cards__grid {
  display: grid; grid-template-columns: 1fr; gap: 16px; width: 100%;
}
@media (min-width: 640px) { .highlight-cards__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1024px) { .highlight-cards__grid { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.highlight-card {
  position: relative; overflow: hidden; border-radius: var(--radius-md);
  height: 280px; padding: 24px; display: flex; flex-direction: column;
  justify-content: space-between; text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.highlight-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.2); }
.highlight-card:hover .highlight-card__bg img { transform: scale(1.05); }
.highlight-card__bg img { transition: transform 0.4s ease; }
@media (min-width: 1024px) { .highlight-card { height: 320px; padding: 32px; } }
.highlight-card__bg { position: absolute; inset: 0; }
.highlight-card__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.highlight-card__bg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 49.62%, rgba(0,0,0,0.5) 70.55%);
  mix-blend-mode: multiply;
}
.highlight-card__icon {
  position: relative; z-index: 1; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.highlight-card__icon img { width: 100%; height: 100%; }
.highlight-card__text {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px;
  color: var(--white);
}
@media (min-width: 1024px) { .highlight-card__text { gap: 24px; } }
.highlight-card__title {
  font-family: var(--font-body); font-weight: 400; color: var(--white);
  font-size: 24px; line-height: 28px;
}
@media (min-width: 1024px) { .highlight-card__title { font-size: 32px; line-height: 32px; } }
.highlight-card__body {
  font-weight: 300; color: var(--white); font-size: 16px; line-height: 24px;
}
@media (min-width: 1024px) { .highlight-card__body { font-size: 20px; line-height: 30px; } }
.highlight-cards__footer {
  font-weight: 300; color: var(--body-text); font-size: 16px; line-height: 24px;
  text-align: center; max-width: 864px;
}
@media (min-width: 1024px) { .highlight-cards__footer { font-size: 20px; line-height: 30px; } }

/* ════════════════════ HEADER ════════════════════ */
.site-header { position: relative; width: 100%; z-index: 10; }
.nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--purple); border-radius: var(--radius-md);
  min-height: 80px; padding: 8px 16px;
}
@media (min-width: 768px) { .nav-bar { padding: 8px 32px; } }
@media (min-width: 1024px) { .nav-bar { padding: 12px 48px; } }

.nav-logo { flex-shrink: 0; width: 140px; }
.nav-logo img { width: 100%; aspect-ratio: 1634/291; }
@media (min-width: 768px) { .nav-logo { width: 200px; } }
@media (min-width: 1024px) { .nav-logo { width: 253px; } }

.nav-links { display: none; align-items: center; gap: 0; }
@media (min-width: 768px) and (max-width: 1279px) {
  .nav-links { display: flex; margin-left: auto; }
  .nav-links > :not(.nav-link--cta) { display: none; }
}
@media (min-width: 1280px) { .nav-links { display: flex; } }
.nav-link {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; font-weight: 700; font-size: 16px; color: var(--white);
  padding: 8px 10px; transition: opacity 0.2s, transform 0.2s; white-space: nowrap;
}
@media (min-width: 1100px) { .nav-link { font-size: 15px; padding: 8px 9px; } }
@media (min-width: 1280px) { .nav-link { font-size: 16px; padding: 8px 10px; } }
.nav-link:hover { opacity: 0.75; }
.nav-link.nav-link--active,
.nav-link.nav-link--active:hover { opacity: 1; }
.nav-link.nav-link--active::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px;
  height: 3px; border-radius: 3px; background: var(--yellow-cta);
}
.nav-link--cta {
  margin-left: 10px; padding: 10px 16px; border-radius: 999px;
  background: var(--yellow-cta); color: var(--purple-dark); box-shadow: 0 8px 22px rgba(255,206,45,0.22);
}
@media (min-width: 768px) and (max-width: 1279px) { .nav-link--cta { margin-left: 0; margin-right: 12px; } }
.nav-link--cta:hover { opacity: 1; transform: translateY(-1px); }
.site-header--landing .nav-bar,
.sticky-header--landing .nav-bar { justify-content: space-between; }
.site-header--landing .nav-links,
.sticky-header--landing .nav-links { display: flex; margin-left: auto; }
.site-header--landing .nav-hamburger,
.sticky-header--landing .nav-hamburger { display: none !important; }
.site-header--landing .nav-link--cta,
.sticky-header--landing .nav-link--cta { margin-left: auto; margin-right: 0; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link--has-sub { display: inline-flex; align-items: center; gap: 6px; }
.nav-sub__caret {
  width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid currentColor; transition: transform 0.2s ease;
}
.nav-item--has-sub:hover .nav-sub__caret,
.nav-item--has-sub:focus-within .nav-sub__caret { transform: rotate(180deg); }
.nav-sub {
  position: absolute; top: 100%; left: 0; min-width: 210px;
  display: flex; flex-direction: column; gap: 2px; padding: 8px;
  background: var(--white); border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(92,15,139,0.18);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 60;
}
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-item--has-sub:hover .nav-sub,
.nav-item--has-sub:focus-within .nav-sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-sub__link {
  padding: 10px 14px; border-radius: 10px; text-decoration: none; white-space: nowrap;
  font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--purple-dark);
  transition: background 0.15s ease;
}
.nav-sub__link:hover { background: rgba(116,61,151,0.10); }
.nav-sub__link--active,
.nav-sub__link--active:hover {
  background: var(--yellow-light);
  box-shadow: inset 3px 0 0 var(--yellow-cta);
}

.nav-hamburger {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: none; background: transparent;
  color: var(--white); cursor: pointer; flex-shrink: 0; padding: 0;
}
@media (min-width: 1280px) { .nav-hamburger { display: none; } }

/* === Mobile Menu === */
.mobile-menu { position: fixed; inset: 0; z-index: 50; }
.mobile-menu[hidden] { display: none; }
.mobile-menu__backdrop {
  position: absolute; inset: 0;
  background: rgba(92,15,139,0.6); backdrop-filter: blur(4px);
}
.mobile-menu__panel {
  position: absolute; top: 0; right: 0; width: 300px; max-width: 85vw;
  height: 100%; display: flex; flex-direction: column; overflow-y: auto;
  background: linear-gradient(180deg, var(--purple) 0%, var(--purple-dark) 100%);
  box-shadow: -8px 0 32px rgba(0,0,0,0.3);
  animation: slideIn 0.32s cubic-bezier(0.22,1,0.36,1);
}
.mobile-menu.closing .mobile-menu__panel { animation: slideOut 0.28s ease forwards; }
.mobile-menu.closing .mobile-menu__backdrop { animation: fadeOut 0.28s ease forwards; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; padding: 20px; }
.mobile-menu__logo { width: min(210px, calc(100% - 58px)); }
.mobile-menu__logo img { width: 100%; }
.mobile-menu__close {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; border: none; background: rgba(255,206,45,0.2); cursor: pointer;
}
.mobile-menu__divider { height: 3px; margin: 0 20px 8px; border-radius: 2px; background: linear-gradient(90deg, #ffce2d, rgba(255,206,45,0.2)); }
.mobile-menu__links { display: flex; flex-direction: column; gap: 6px; padding: 8px 20px 32px; }
.mobile-menu__link {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-radius: var(--radius-md); text-decoration: none;
  font-weight: 700; font-size: 17px; color: var(--white);
  background: rgba(255,255,255,0.08); transition: background 0.15s;
}
.mobile-menu__link:hover { background: rgba(255,206,45,0.2); }
.mobile-menu__link.nav-link--active {
  background: rgba(255,206,45,0.22); color: var(--yellow-cta);
  box-shadow: inset 3px 0 0 var(--yellow-cta);
}
.mobile-menu__link--cta { background: var(--yellow-cta); color: var(--purple-dark); justify-content: center; }
.mobile-menu__link--cta:hover { background: var(--yellow-cta); }
.mobile-menu__group { display: flex; flex-direction: column; gap: 6px; }
.mobile-menu__groupbutton,
.mobile-menu__groupbutton[type="button"] {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px;
  margin: 0; min-height: 46px; box-sizing: border-box;
  border: 0; border-radius: var(--radius-md); text-align: left; cursor: pointer;
  appearance: none !important; -webkit-appearance: none !important;
  font-family: var(--font-body); font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--white);
  background: rgba(255,255,255,0.08); transition: background 0.15s;
}
.mobile-menu__groupbutton span { min-width: 0; }
.mobile-menu__groupbutton:hover { background: rgba(255,206,45,0.2); }
.mobile-menu__groupbutton.nav-link--active {
  background: rgba(255,206,45,0.22); color: var(--yellow-cta);
  box-shadow: inset 3px 0 0 var(--yellow-cta);
}
.mobile-menu__groupicon { flex: 0 0 auto; transition: transform 0.2s ease; }
.mobile-menu__groupbutton[aria-expanded="true"] .mobile-menu__groupicon { transform: rotate(180deg); }
.mobile-menu__sub {
  width: 100%; flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 0 0 0 16px;
  max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-4px); box-sizing: border-box;
  transition: max-height 0.28s cubic-bezier(0.22,1,0.36,1), opacity 0.18s ease, transform 0.22s ease, padding 0.22s ease;
}
.mobile-menu__sub.is-open { padding: 8px 0 8px 16px; opacity: 1; transform: translateY(0); }
.mobile-menu__sublink {
  width: 100%; flex: 0 0 auto; display: flex; align-items: center; min-height: 40px; box-sizing: border-box; padding: 10px 16px; border-radius: 10px;
  text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.25; color: var(--white); white-space: normal;
  background: rgba(255,255,255,0.05); transition: background 0.15s ease;
}
.mobile-menu__sublink:hover { background: rgba(255,206,45,0.2); }
.mobile-menu__sublink--active {
  background: rgba(255,206,45,0.18); color: var(--yellow-cta);
  box-shadow: inset 3px 0 0 var(--yellow-cta);
}
.mobile-menu__bottom { margin-top: auto; padding: 0 20px 24px; }
.mobile-menu__cta {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-lg); padding: 12px; border: none;
  background: var(--yellow-cta); font-weight: 700; font-size: 16px; color: var(--purple-dark);
  text-decoration: none; cursor: pointer;
}

/* === Sticky Header === */
.sticky-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  padding: 8px 0 0;
  transform: translateY(-100%); transition: transform 0.25s ease-in;
  pointer-events: none;
}
.sticky-header.visible { transform: translateY(0); pointer-events: auto; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); }
/* Gelijk getrokken met de top-header: zelfde geometrie als .page-wrapper. */
.sticky-header__inner { max-width: var(--max-page); margin: 0 auto; padding: 0 var(--px-mobile); }
@media (min-width: 768px) { .sticky-header__inner { padding: 0 var(--px-tablet); } }
@media (min-width: 1024px) { .sticky-header__inner { padding: 0 var(--px-desktop); } }

/* ════════════════════ TOUCAN ════════════════════ */
.toucan {
  display: none; position: fixed; top: 50%; right: -40px;
  transform: translateY(-50%) translateX(110%);
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
  z-index: 40; width: 335px; height: 152px; pointer-events: none;
}
.toucan img { width: 100%; height: 100%; object-fit: contain; }
.toucan.entered { transform: translateY(-50%) translateX(0); }
.toucan.exited { transform: translateY(-50%) translateX(110%); }
@media (min-width: 1280px) { .toucan { display: block; } }

/* ════════════════════ HERO ════════════════════ */
.hero { margin-top: 24px; }
@media (min-width: 768px) { .hero { margin-top: 32px; } }
@media (min-width: 1024px) { .hero { margin-top: 48px; } }

.hero__cols { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) { .hero__cols { gap: 24px; } }
@media (min-width: 1024px) { .hero__cols { flex-direction: row; gap: 32px; align-items: flex-start; } }

.hero__media {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  width: 100%; aspect-ratio: 1/1; background: #333;
}
@media (min-width: 768px) { .hero__media { width: 50%; } }
@media (min-width: 1024px) { .hero__media { width: 752px; height: 752px; flex-shrink: 0; aspect-ratio: auto; } }

.hero__video-wrap { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius-lg); }
.hero__video-wrap iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: max(100%,177.78vh); height: max(100%,56.25vw); min-width: 100%; min-height: 100%;
  border: none;
}
.hero__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.hero__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.3); border-radius: var(--radius-lg); }
.hero__content {
  position: relative; z-index: 10; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: space-between; height: 100%;
  padding: 16px;
}
@media (min-width: 768px) { .hero__content { padding: 24px; } }
@media (min-width: 1024px) { .hero__content { padding: 48px; } }
.hero__body {
  font-weight: 300; color: var(--white); font-size: 16px; line-height: 24px;
}
@media (min-width: 768px) { .hero__body { font-size: 18px; line-height: 28px; } }
@media (min-width: 1024px) { .hero__body { font-size: 20px; line-height: 30px; } }
.hero__bottom { display: flex; align-items: center; gap: 12px; width: 100%; }
.hero-play {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px); cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
.hero-play:hover { background: rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.8); }

.hero__title {
  font-family: var(--font-heading); font-weight: normal; color: var(--white);
  font-size: 28px; line-height: 34px; text-align: center; width: 100%;
}
@media (min-width: 768px) { .hero__title { font-size: 48px; line-height: 56px; } }
@media (min-width: 1024px) { .hero__title { font-size: 72px; line-height: 84px; text-align: left; } }

.hero__right {
  display: flex; flex-direction: column; gap: 32px;
  flex: 1 0 0; min-height: 1px; min-width: 1px; align-self: stretch; width: 100%;
}
@media (min-width: 1024px) { .hero__right { width: auto; } }

/* Green Card */
.green-card {
  flex: 1 0 0; min-height: 1px; display: flex; flex-direction: column;
  gap: 16px; border-radius: var(--radius-md); padding: 16px;
  background: var(--green);
}
@media (min-width: 768px) { .green-card { padding: 24px; } }
@media (min-width: 1024px) { .green-card { padding: 32px; } }
.green-card__title {
  font-family: var(--font-heading); font-weight: normal; color: var(--green-text);
  font-size: 24px; line-height: 28px; text-align: center;
}
@media (min-width: 768px) { .green-card__title { font-size: 32px; line-height: 34px; } }
@media (min-width: 1024px) { .green-card__title { font-size: 40px; line-height: 40px; text-align: left; } }
.green-card__body {
  font-weight: 300; color: var(--green-text);
  font-size: 16px; line-height: 24px; text-align: center;
}
.green-card__body ul { display: inline-block; text-align: left; margin: 8px 0; padding-left: 20px; }
.green-card__body li { margin-bottom: 4px; }
@media (min-width: 768px) { .green-card__body { font-size: 18px; line-height: 28px; } }
@media (min-width: 1024px) { .green-card__body { font-size: 20px; line-height: 30px; text-align: left; } .green-card__body ul { display: block; } }

/* Stat Grid */
.stat-grid {
  flex: 1 0 0; min-height: 1px; display: grid; grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr; gap: 16px; width: 100%;
}
.stat-grid--4 { grid-template-rows: 1fr; }
@media (min-width: 1180px) { .stat-grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1180px) { .stat-grid--4 .stat-card { height: 172px; } }
.stat-card {
  position: relative; overflow: hidden; border-radius: var(--radius-md);
  background: var(--yellow-light); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 12px 16px;
}
.stat-card__bg-icon { position: absolute; pointer-events: none; opacity: 0.10; }
.stat-card__bg-icon[src*="person"] { opacity: 0.10; }
.stat-card__bg-icon[src*="brain"] { opacity: 0.10; }
.stat-card__number {
  position: relative; z-index: 1; font-weight: 700; color: var(--purple);
  font-size: 28px; line-height: normal;
}
@media (min-width: 640px) { .stat-card__number { font-size: 36px; } }
@media (min-width: 768px) { .stat-card__number { font-size: 48px; } }
@media (min-width: 1180px) { .stat-card__number { font-size: 60px; } }
.stat-card__number-suffix {
  display: inline; font-weight: 700; color: var(--purple);
  font-size: 0.5em; vertical-align: super; margin-left: 2px;
}
.stat-card__label { position: relative; z-index: 1; font-weight: 400; font-size: 16px; color: var(--purple-dark); }
.stat-card__stars { position: relative; z-index: 1; width: 116px; height: 19px; }
.stat-card__text-big {
  position: relative; z-index: 1; font-weight: 700; text-align: center;
  color: var(--purple-dark); font-size: 13px; line-height: normal;
}
@media (min-width: 640px) { .stat-card__text-big { font-size: 16px; } }
@media (min-width: 768px) { .stat-card__text-big { font-size: 20px; } }
@media (min-width: 1180px) { .stat-card__text-big { font-size: 24px; } }
/* Mobiel: groen vlak + factboxen op inhoud laten schalen (geen collapse door min-height:1px in de gestapelde kolom). */
@media (max-width: 1023px) {
  .hero-overview__right > .green-card,
  .hero-overview__right > .stat-grid { flex: 0 0 auto; min-height: auto; }
}

/* Stat card animations */
@keyframes stat-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  70%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
@keyframes stat-attention {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(116,61,151,0); }
  15%  { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(116,61,151,0.10); }
  30%  { transform: scale(1); box-shadow: 0 0 0 0 rgba(116,61,151,0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(116,61,151,0); }
}
.stat-card--attention { animation: stat-attention 1.6s ease; }

/* Breadcrumb */
.breadcrumb {
  margin-top: 24px; font-weight: 300; color: var(--green-text);
  font-size: 16px; line-height: 24px; text-align: center;
}
@media (min-width: 768px) { .breadcrumb { margin-top: 32px; font-size: 18px; } }
@media (min-width: 1024px) { .breadcrumb { margin-top: 48px; font-size: 20px; line-height: 30px; text-align: left; } }

/* === Hero Overview Variant === */
.hero-overview { margin-top: 24px; }
@media (min-width: 768px) { .hero-overview { margin-top: 32px; } }
@media (min-width: 1024px) { .hero-overview { margin-top: 48px; } }
.hero-overview__cols { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) { .hero-overview__cols { gap: 24px; } }
@media (min-width: 1180px) { .hero-overview__cols { flex-direction: row; gap: 32px; align-items: stretch; } }

.hero-overview__media {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  width: 100%; aspect-ratio: 1/1; background: #333;
}
@media (min-width: 1180px) { .hero-overview__media { width: 752px; height: 752px; flex-shrink: 0; aspect-ratio: auto; padding: 32px; } }
.hero-overview__media-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overview__media::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, rgba(18,15,43,0.62) 0%, rgba(18,15,43,0.34) 44%, rgba(18,15,43,0.08) 100%);
}
/* Ken Burns: subtiele, langzame in-/uitzoom op de hero-foto('s). */
@keyframes clubKenBurns {
  0%   { transform: scale(1) translate3d(0, 0, 0); }
  100% { transform: scale(1.08) translate3d(-1.5%, -1%, 0); }
}
.hero-overview__media-img.kenburns {
  transform-origin: center center;
  animation: clubKenBurns 18s ease-in-out infinite alternate;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .hero-overview__media-img.kenburns { animation: none; transform: none; }
}
.hero-overview__media-inner {
  position: relative; z-index: 3; display: flex; flex-direction: column;
  justify-content: space-between; height: 100%; padding: 16px;
}
@media (min-width: 768px) { .hero-overview__media-inner { padding: 24px; } }
@media (min-width: 1180px) { .hero-overview__media-inner { padding: 16px; } }
.hero-overview__title {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: min(100%, 560px);
  font-family: var(--font-heading); font-weight: normal; color: var(--white);
  font-size: 28px; line-height: 34px;
}
.hero-overview__title br { display: none; }
.hero-overview__title-main {
  display: block; max-width: 100%; font-size: 32px; line-height: 1.05; letter-spacing: 0.02em;
}
.hero-overview__title-locations {
  display: inline-flex; align-items: center; width: auto; max-width: 100%; padding: 8px 14px 8px 36px; border-radius: 12px;
  position: relative; font-family: var(--font-body); font-weight: 800; font-size: 15px; line-height: 1.25; letter-spacing: 0;
  background: rgba(69,48,102,0.72); color: var(--white); box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.hero-overview__title-locations::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%);
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-6.2 7-13A7 7 0 0 0 5 9c0 6.8 7 13 7 13Zm0-9.5A3.5 3.5 0 1 1 12 5a3.5 3.5 0 0 1 0 7.5Z'/%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'%3E%3Cpath d='M12 22s7-6.2 7-13A7 7 0 0 0 5 9c0 6.8 7 13 7 13Zm0-9.5A3.5 3.5 0 1 1 12 5a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (min-width: 768px) {
  .hero-overview__title { gap: 14px; max-width: 600px; font-size: 48px; line-height: 56px; }
  .hero-overview__title-main { font-size: 52px; }
  .hero-overview__title-locations { padding: 9px 16px 9px 40px; font-size: 18px; border-radius: 14px; }
  .hero-overview__title-locations::before { left: 16px; width: 15px; height: 15px; }
}
@media (min-width: 1180px) {
  .hero-overview__title { gap: 16px; max-width: 620px; font-size: 72px; line-height: 84px; }
  .hero-overview__title-main { font-size: 62px; }
  .hero-overview__title-locations { font-size: 20px; }
}
.hero-overview__bottom { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: auto; }
.hero-overview__cta {
  display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1;
  border: none; border-radius: var(--radius-lg); cursor: pointer; text-decoration: none;
  padding: 0 10px 0 16px; background: var(--yellow);
  height: 56px; max-height: 56px;
  box-shadow: 0 0 12px rgba(0,0,0,0.16), 0 4px 2px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s, transform 0.15s;
}
.hero-overview__cta:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.15); transform: translateY(-1px); }

.hero-overview__right {
  display: flex; flex-direction: column; gap: 16px; flex: 1 0 0; min-width: 0;
}
@media (min-width: 768px) { .hero-overview__right { gap: 24px; } }
@media (min-width: 1180px) { .hero-overview__right { gap: 32px; } }

/* Hero Overview — video background */
.hero-overview__video-wrap {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; pointer-events: none;
}
.hero-overview__video-wrap iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 177.78%; height: 100%; min-width: 100%; min-height: 100%; border: 0; pointer-events: none;
}
.hero-overview__video-wrap .hero-overview__media-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: -1;
}

/* Hero Overview — centered play button (reuses .promo-video__play-circle) */
.hero-overview__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2; background: none; border: none; cursor: pointer; padding: 0;
}
.hero-overview__play:hover .promo-video__play-circle { transform: scale(1.08); }

/* Stat-card pulse highlight (cycles through cards) */
@keyframes statPulse {
  0%, 100% { box-shadow: none; transform: scale(1); }
  50% { box-shadow: 0 0 0 4px rgba(116,61,151,0.18); transform: scale(1.03); }
}
.stat-card--pulse {
  animation: statPulse 1.2s ease;
}

/* Hero Overview uses existing .green-card and .stat-grid classes */

/* === Hero Landing Variant === */
.hero-landing { margin-top: 24px; }
@media (min-width: 768px) { .hero-landing { margin-top: 32px; } }
@media (min-width: 1024px) { .hero-landing { margin-top: 48px; } }
.hero-landing__page-title {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: normal; color: var(--purple-dark);
  font-size: 28px; line-height: 34px; text-align: center; margin-bottom: 24px;
}
.hero-landing__page-title br { display: none; }
.hero-landing__title-main {
  display: block; text-transform: uppercase; font-size: 34px; line-height: 1.08; letter-spacing: 0.02em;
}
.hero-landing__title-locations {
  display: block; max-width: 1040px; font-size: 18px; line-height: 1.35; letter-spacing: 0.01em;
}
@media (min-width: 768px) {
  .hero-landing__page-title { gap: 10px; margin-bottom: 32px; }
  .hero-landing__title-main { font-size: 56px; }
  .hero-landing__title-locations { font-size: 24px; }
}
@media (min-width: 1180px) {
  .hero-landing__page-title { gap: 12px; margin-bottom: 48px; }
  .hero-landing__title-main { font-size: 68px; }
  .hero-landing__title-locations { font-size: 28px; }
}
.hero-landing__cols { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) { .hero-landing__cols { gap: 24px; } }
@media (min-width: 1180px) { .hero-landing__cols { flex-direction: row; gap: 32px; align-items: stretch; } }
.hero-landing__media {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  width: 100%; aspect-ratio: 4/3; background: #333;
}
@media (min-width: 1180px) { .hero-landing__media { width: 50%; flex-shrink: 0; aspect-ratio: auto; } }
.hero-landing__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-landing__info {
  flex: 1; display: flex; flex-direction: column; gap: 24px;
}
.hero-landing__info-card {
  flex: 1; display: flex; flex-direction: column; gap: 16px;
  border-radius: var(--radius-md); padding: 24px; background: var(--green);
}
@media (min-width: 1180px) { .hero-landing__info-card { padding: 32px; } }
.hero-landing__info-title {
  font-family: var(--font-heading); font-weight: 700; color: var(--green-text);
  font-size: 24px; line-height: 28px;
}
@media (min-width: 768px) { .hero-landing__info-title { font-size: 32px; line-height: 34px; } }
@media (min-width: 1180px) { .hero-landing__info-title { font-size: 40px; line-height: 40px; } }
.hero-landing__info-subtitle {
  font-family: var(--font-body); font-weight: 400; color: var(--green-text);
  font-size: 18px; line-height: 24px;
}
@media (min-width: 1180px) { .hero-landing__info-subtitle { font-size: 24px; line-height: 32px; } }
.hero-landing__info-body {
  font-weight: 300; color: var(--body-text); font-size: 16px; line-height: 24px;
}
@media (min-width: 1180px) { .hero-landing__info-body { font-size: 20px; line-height: 30px; } }
.hero-landing__info-ctas { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1180px) { .hero-landing__info-ctas { flex-direction: row; } }

/* === Home Header Variant (hero + cards) === */
.hero-home { margin-top: 24px; }
@media (min-width: 768px) { .hero-home { margin-top: 32px; } }
@media (min-width: 1024px) { .hero-home { margin-top: 48px; } }
.hero-home__cols { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) { .hero-home__cols { gap: 24px; } }
@media (min-width: 1024px) { .hero-home__cols { flex-direction: row; gap: 32px; align-items: stretch; } }
.hero-home__left {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  width: 100%; background: #333; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 16px; min-height: 300px;
}
@media (min-width: 768px) { .hero-home__left { padding: 24px; min-height: 400px; } }
@media (min-width: 1024px) { .hero-home__left { width: 864px; flex-shrink: 0; padding: 32px; min-height: auto; } }
.hero-home__left-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-home__left-overlay {
  position: absolute; inset: 0; border-radius: var(--radius-lg);
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.45) 75%);
}
.hero-home__text {
  position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px;
  color: var(--white);
}
.hero-home__title {
  font-family: var(--font-heading); font-weight: normal; color: var(--white);
  font-size: 36px; line-height: 42px;
}
@media (min-width: 768px) { .hero-home__title { font-size: 56px; line-height: 64px; } }
@media (min-width: 1024px) { .hero-home__title { font-size: 72px; line-height: 84px; } }
.hero-home__subtitle {
  font-family: var(--font-body); font-weight: 400; color: var(--white);
  font-size: 20px; line-height: 28px;
}
@media (min-width: 1024px) { .hero-home__subtitle { font-size: 32px; line-height: 40px; } }
.hero-home__body {
  font-weight: 300; color: var(--white); font-size: 16px; line-height: 24px;
}
@media (min-width: 1024px) { .hero-home__body { font-size: 20px; line-height: 30px; } }
.hero-home__right {
  display: flex; flex-direction: column; gap: 16px; flex: 1 0 0; min-width: 0;
}
@media (min-width: 768px) { .hero-home__right { gap: 24px; } }
@media (min-width: 1024px) { .hero-home__right { gap: 32px; justify-content: center; } }

/* Header Card (used in hero-home right column) */
.header-card {
  position: relative; overflow: hidden; border-radius: var(--radius-md);
  padding: 24px; display: flex; flex-direction: column; gap: 24px; justify-content: center;
  cursor: pointer; min-height: 180px;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), box-shadow 0.35s ease;
}
@media (min-width: 1024px) { .header-card { padding: 32px; min-height: auto; flex: 1; } }
.header-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(92,15,139,0.15), 0 4px 8px rgba(0,0,0,0.06);
}
.header-card__bg { position: absolute; inset: 0; }
.header-card__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.header-card__bg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(92,15,139,0.15) 49.62%, rgba(92,15,139,0.5) 70.55%);
  mix-blend-mode: multiply;
}
.header-card__bg-wave { position: absolute; pointer-events: none; opacity: 0.3; }
.header-card__content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; }
.header-card__title {
  font-family: var(--font-heading); font-weight: normal; color: #3e320d;
  font-size: 28px; line-height: 32px;
}
@media (min-width: 1024px) { .header-card__title { font-size: 40px; line-height: 40px; } }
.header-card__body {
  font-weight: 300; color: #3e320d; font-size: 16px; line-height: 24px;
}
@media (min-width: 1024px) { .header-card__body { font-size: 20px; line-height: 32px; } }

/* ════════════════════ LOCATIONS ════════════════════ */
.locations {
  margin-top: 80px; display: flex; flex-direction: column; align-items: center; gap: 32px;
}
@media (min-width: 768px) { .locations { margin-top: 112px; } }
@media (min-width: 1024px) { .locations { margin-top: 160px; gap: 48px; } }

.locations__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; width: 100%; }
.loc-card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  border-radius: 12px; overflow: hidden; padding: 24px;
  aspect-ratio: 1/1; width: 100%; background-size: cover; background-position: center; cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease;
}
.loc-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 40px rgba(92, 15, 139, 0.18), 0 6px 12px rgba(0,0,0,0.08);
}
@media (min-width: 768px) { .loc-card { width: calc(50% - 16px); height: 320px; aspect-ratio: auto; padding: 28px; } }
@media (min-width: 1024px) { .loc-card { width: calc(33.333% - 22px); height: 380px; aspect-ratio: auto; padding: 32px; } }
/* 1 locatie: volledige breedte (2 kolommen breed) */
@media (min-width: 768px) { .locations__grid--1 .loc-card { width: calc(66.666% - 16px); height: 380px; } }
@media (min-width: 1024px) { .locations__grid--1 .loc-card { width: calc(66.666% - 22px); height: 420px; } }
/* 2 locaties: 2 kolommen naast elkaar */
@media (min-width: 1024px) { .locations__grid--2 .loc-card { width: calc(50% - 16px); } }
/* 4 locaties: 2×2 grid */
@media (min-width: 1024px) { .locations__grid--4 .loc-card { width: calc(50% - 16px); } }
.loc-card__gradient {
  position: absolute; inset: 0; border-radius: 12px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 49.62%, rgba(0,0,0,0.5) 70.55%);
  mix-blend-mode: multiply;
}
.loc-card__icon {
  position: relative; width: 36px; height: 36px; display: flex;
  align-items: center; justify-content: center; border-radius: 8px;
  overflow: hidden; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.loc-card:hover .loc-card__icon { transform: translateY(10px); }
.loc-card__icon img { width: 100%; height: 100%; }
.loc-card__text {
  position: relative; color: var(--white); display: flex; flex-direction: column;
  gap:6px; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.loc-card:hover .loc-card__text { transform: translateY(-10px); }
.loc-card__title {
  font-family: 'Ubuntu', sans-serif; font-weight: 700;
  font-size: 24px; line-height: 28px;
}
@media (min-width: 640px) { .loc-card__title { font-size: 28px; line-height: 30px; } }
@media (min-width: 1024px) { .loc-card__title { font-size: 32px; line-height: 32px; } }
.loc-card__desc {
  font-family: 'Ubuntu', sans-serif; font-weight: 300;
  font-size: 16px; line-height: 24px;
}
@media (min-width: 1024px) { .loc-card__desc { font-size: 20px; line-height: 30px; } }

/* ════════════════════ ACTIVE BSO ════════════════════ */
.active-bso { margin-top: 80px; overflow: visible; }
@media (min-width: 768px) { .active-bso { margin-top: 112px; } }
@media (min-width: 1024px) { .active-bso { margin-top: 160px; } }
.active-bso__cols { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .active-bso__cols { grid-template-columns: 1fr 1fr; gap: 32px; } }
.active-bso__text { display: flex; flex-direction: column; gap: 24px; align-items: center; max-width: 640px; }
@media (min-width: 1024px) { .active-bso__text { align-items: flex-start; } }
.active-bso__heading { display: flex; flex-direction: column; gap: 16px; }
.active-bso__body { font-weight: 300; color: var(--body-text); font-size: 16px; line-height: 24px; text-align: center; }
.active-bso__body p + p { margin-top: 24px; }
.active-bso__body ul { display: inline-block; text-align: left; margin: 8px 0; padding-left: 20px; }
.active-bso__body li { margin-bottom: 4px; }
@media (min-width: 768px) { .active-bso__body { font-size: 18px; line-height: 28px; } }
@media (min-width: 1024px) { .active-bso__body { font-size: 20px; line-height: 30px; text-align: left; } .active-bso__body ul { display: block; } }
/* Richtext in active-bso__body: forceer body-typografie op geneste elementen (zoals bij intro-section__body),
   zodat door de builder ingevoegde spans/divs niet kleiner renderen dan de rest van de bodytekst. */
.active-bso__body * {
  font-family: var(--font-body) !important;
  font-weight: 300 !important;
  color: var(--body-text) !important;
  font-size: 16px !important;
  line-height: 24px !important;
}
.active-bso__body b,
.active-bso__body strong,
.active-bso__body b *,
.active-bso__body strong * { font-weight: 700 !important; }
@media (min-width: 768px) {
  .active-bso__body * { font-size: 18px !important; line-height: 28px !important; }
}
@media (min-width: 1024px) {
  .active-bso__body * { font-size: 20px !important; line-height: 30px !important; }
}
.active-bso__cta { height: 68px; }
.active-bso__media { display: flex; justify-content: center; }
@media (min-width: 1024px) { .active-bso__media { justify-content: flex-end; } }
/* Reversed: photo left, text right */
@media (min-width: 1024px) {
  .active-bso--reversed .active-bso__cols { direction: rtl; }
  .active-bso--reversed .active-bso__cols > * { direction: ltr; }
  .active-bso--reversed .active-bso__media { justify-content: flex-start; }
}
.active-bso__shape {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  animation: morphBlob 16s ease-in-out infinite;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: border-radius;
}
@media (min-width: 768px) { .active-bso__shape { max-width: 560px; } }
@media (min-width: 1024px) { .active-bso__shape { max-width: 640px; } }
.active-bso__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}
.active-bso__img.active { opacity: 1; }

/* ── Animation variant: light purple bg + centered animation ── */
.active-bso__shape--anim {
  background: linear-gradient(135deg, #e8d5f5 0%, #d4b8e8 50%, #c9a5e0 100%);
  display: flex; align-items: center; justify-content: center;
}
.active-bso__shape--anim-green {
  background: linear-gradient(135deg, #d4f0e4 0%, #a8e0c4 50%, #8dd4b0 100%);
  display: flex; align-items: center; justify-content: center;
}
.active-bso__shape--anim-yellow {
  background: linear-gradient(135deg, #fef3d0 0%, #fce7a0 50%, #f9dc7d 100%);
  display: flex; align-items: center; justify-content: center;
}
.active-bso__shape--anim-blue {
  background: linear-gradient(135deg, #d4e5f7 0%, #a8c8ee 50%, #8db8e5 100%);
  display: flex; align-items: center; justify-content: center;
}
.active-bso__shape--anim-none {
  background: transparent;
  display: flex; align-items: center; justify-content: center;
}
.active-bso__shape--square {
  border-radius: var(--radius-md);
  animation: none;
}
.active-bso__anim-img {
  width: 80%; height: 80%; object-fit: contain;
  position: relative; z-index: 1;
}
.active-bso__anim-lottie {
  width: 80%; height: 80%;
  position: relative; z-index: 1;
}
/* Animatie mag buiten de morph-vorm uitsteken (bijv. staart toekan).
   De morph-achtergrond blijft geclipt via border-radius; foto-modus blijft geclipt. */
.active-bso__shape--anim,
.active-bso__shape--anim-green,
.active-bso__shape--anim-yellow,
.active-bso__shape--anim-blue,
.active-bso__shape--anim-none { overflow: visible; }
.active-bso__shape--anim .active-bso__anim-img,
.active-bso__shape--anim-green .active-bso__anim-img,
.active-bso__shape--anim-yellow .active-bso__anim-img,
.active-bso__shape--anim-blue .active-bso__anim-img,
.active-bso__shape--anim-none .active-bso__anim-img,
.active-bso__shape--anim .active-bso__anim-lottie,
.active-bso__shape--anim-green .active-bso__anim-lottie,
.active-bso__shape--anim-yellow .active-bso__anim-lottie,
.active-bso__shape--anim-blue .active-bso__anim-lottie,
.active-bso__shape--anim-none .active-bso__anim-lottie { width: 112%; height: 112%; }

/* ════════════════════ FEATURE CARDS ════════════════════ */
.features { margin-top: 80px; display: flex; flex-direction: column; gap: 48px; align-items: center; }
@media (min-width: 768px) { .features { margin-top: 112px; } }
@media (min-width: 1024px) { .features { margin-top: 160px; } }
.features__header { display: flex; flex-direction: column; gap: 24px; text-align: center; max-width: 864px; }
.features__intro { font-weight: 300; color: var(--body-text); font-size: 16px; line-height: 24px; }
@media (min-width: 768px) { .features__intro { font-size: 18px; line-height: 28px; } }
@media (min-width: 1024px) { .features__intro { font-size: 20px; line-height: 30px; } }
.features__grid { display: grid; gap: 16px; width: 100%; grid-template-columns: 1fr; }
@media (min-width: 640px) { .features__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .features__grid { grid-template-columns: repeat(4,1fr); gap: 32px; } }

.feature-card {
  position: relative; overflow: hidden; border-radius: 12px;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 24px; min-height: 280px; background-size: cover; background-position: center;
  cursor: pointer; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease;
}
.feature-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 40px rgba(92, 15, 139, 0.18), 0 6px 12px rgba(0,0,0,0.08);
}
@media (min-width: 640px) { .feature-card { padding: 28px; } }
@media (min-width: 1024px) { .feature-card { padding: 32px; min-height: 320px; } }
.feature-card__gradient {
  position: absolute; inset: 0; border-radius: 12px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 34%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.82) 100%);
  pointer-events: none;
}
/* Klikbare kaart: onzichtbare stretched-link over de hele kaart (alleen aanwezig
   wanneer er een link is ingesteld). Ligt boven de tekst zodat de hele kaart klikt.
   Gespiegeld uit controlpanel-v2/club-page-builder/assets/css/index.css. */
.feature-card__link {
  position: absolute; inset: 0; z-index: 2;
  border-radius: 12px; font-size: 0; color: transparent;
}
.feature-card__link:focus-visible {
  outline: 3px solid rgba(255,255,255,0.92); outline-offset: -3px;
}
/* Subtiel goud klik-icoontje rechtsonder: verschijnt pas bij hover/focus van de
   kaart en signaleert dat de kaart klikbaar is. Alleen aanwezig wanneer er een
   link is ingesteld (zit in de overlay). */
.feature-card__link-badge {
  position: absolute; bottom: 14px; right: 14px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--yellow-cta); color: var(--purple-dark);
  font-size: 15px; line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
  opacity: 0; transform: translateY(6px) scale(0.9);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
}
.feature-card__link-badge .bi { line-height: 1; }
.feature-card:hover .feature-card__link-badge,
.feature-card:focus-within .feature-card__link-badge {
  opacity: 1; transform: translateY(0) scale(1);
  box-shadow: 0 6px 16px rgba(0,0,0,0.32);
}
.feature-card__icon {
  position: relative; z-index: 1; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px; overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.feature-card:hover .feature-card__icon { transform: translateY(10px); }
.feature-card__icon img { width: 100%; height: 100%; }
.feature-card__text {
  position: relative; z-index: 1; color: var(--white);
  display: flex; flex-direction: column; gap: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.45);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: auto; /* titel + tekst altijd onderin, ook zonder icoon */
}
.feature-card:hover .feature-card__text { transform: translateY(-6px); }
.feature-card__title {
  font-family: 'Ubuntu', sans-serif; font-weight: 700;
  font-size: 24px; line-height: 28px;
}
@media (min-width: 1024px) { .feature-card__title { font-size: 32px; line-height: 32px; } }
/* Bij laden alleen de titel; op hover/focus schuift de omschrijving soepel in beeld. */
.feature-card__desc {
  font-family: 'Ubuntu', sans-serif; font-weight: 300;
  font-size: 15px; line-height: 22px;
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, margin-top 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 1024px) { .feature-card__desc { font-size: 17px; line-height: 26px; } }
.feature-card:hover .feature-card__desc,
.feature-card:focus-within .feature-card__desc {
  max-height: 320px; opacity: 1; margin-top: 20px;
}
/* Auto-rotatie (zonder hover): licht telkens één kaart uit, exact als hover. */
.feature-card--active {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 40px rgba(92, 15, 139, 0.18), 0 6px 12px rgba(0,0,0,0.08);
}
.feature-card--active .feature-card__icon { transform: translateY(10px); }
.feature-card--active .feature-card__text { transform: translateY(-6px); }
.feature-card--active .feature-card__desc { max-height: 320px; opacity: 1; margin-top: 20px; }
/* Dun voortgangsbalkje (alleen zichtbaar op de auto-actieve kaart). */
.feature-card__progress {
  position: absolute; left: 24px; right: 24px; bottom: 12px; z-index: 2;
  height: 3px; border-radius: 999px; background: rgba(255,255,255,0.25);
  overflow: hidden; opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.feature-card--active .feature-card__progress { opacity: 1; }
.feature-card:hover .feature-card__progress { opacity: 0; }
.feature-card__progress > i {
  display: block; height: 100%; width: 100%; border-radius: inherit;
  background: rgba(255,255,255,0.9); transform: scaleX(0); transform-origin: left center;
}
/* Touch-apparaten (geen hover): toon de omschrijving altijd. */
@media (hover: none) {
  .feature-card__desc { max-height: 320px; opacity: 1; margin-top: 20px; }
}
.features__footer { text-align: center; font-weight: 300; color: var(--body-text); font-size: 16px; line-height: 24px; max-width: 864px; }
@media (min-width: 1024px) { .features__footer { font-size: 20px; line-height: 30px; } }

/* ════════════════════ TESTIMONIALS ════════════════════ */
.testimonials { margin-top: 80px; display: flex; flex-direction: column; gap: 48px; align-items: center; }
@media (min-width: 768px) { .testimonials { margin-top: 112px; } }
@media (min-width: 1024px) { .testimonials { margin-top: 160px; } }
.testimonials__rows { display: flex; flex-direction: column; gap: 32px; width: 100%; }
.testimonials__row { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
@media (min-width: 1024px) { .testimonials__row { flex-direction: row; gap: 32px; } }

.review-card {
  flex: 1; border: 1px solid var(--yellow-cta); border-radius: var(--radius-md);
  padding: 16px; display: flex; flex-direction: column; gap: 16px;
  transition: transform 0.3s, box-shadow 0.3s; cursor: pointer;
}
.review-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.review-card:focus-visible { outline: 2px solid #5c0f8b; outline-offset: 3px; }
/* 'Meer'-icoon direct achter de afgekapte tekst (vervangt de losse 'Lees meer'-link) */
.review-card__more-icon-wrap { display: inline-flex; vertical-align: -3px; margin-left: 5px; color: #5c0f8b; }
.review-card__more-icon { width: 17px; height: 17px; transition: transform 0.2s; }
.review-card:hover .review-card__more-icon { transform: scale(1.12); }
@media (min-width: 1024px) { .review-card { padding: 24px; } }
.review-card--narrow { flex: none; }
@media (min-width: 1024px) { .review-card--narrow { width: 304px; } }
.review-card--flex { flex: 1; }
.review-card__stars { width: 116px; height: 19px; }
.review-card__title { font-family: var(--font-heading); font-weight: 400; color: var(--purple-dark); font-size: 20px; line-height: 26px; }
@media (min-width: 1024px) { .review-card__title { font-size: 24px; line-height: 30px; } }
.review-card__body { font-weight: 300; color: var(--body-text); font-size: 16px; line-height: 24px; }
@media (min-width: 1024px) { .review-card__body { font-size: 20px; line-height: 30px; } }
.review-card__author { font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--purple-dark); margin-top: 4px; display: flex; flex-wrap: wrap; align-items: center; }
.review-card__author:empty { display: none; }
/* Reviewer: naam bold, ' — ' + plaats regular met outline pin-icoon */
.rv-author__name { font-weight: 700; }
.rv-author__sep { font-weight: 400; opacity: 0.6; white-space: pre; }
.rv-author__place { font-weight: 400; display: inline-flex; align-items: center; gap: 3px; }
.rv-author__pin { width: 14px; height: 14px; flex-shrink: 0; }

.photo-card { flex-shrink: 0; border-radius: var(--radius-md); overflow: hidden; width: 192px; height: 263px; display: none; position: relative; }
.photo-card--323 { height: 323px; }
@media (min-width: 768px) { .photo-card { display: block; } }
/* Desktop: foto's even hoog als het hoogste kaartje in de rij (flex stretch) */
@media (min-width: 1024px) { .photo-card { height: auto; align-self: stretch; min-height: 263px; } }
.photo-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.photo-card__img.active { opacity: 1; }

.content-card {
  position: relative; flex-shrink: 0; border-radius: var(--radius-md); overflow: hidden;
  padding: 16px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; width: 100%;
}
@media (min-width: 1024px) { .content-card { width: 304px; padding: 24px; } }
.content-card__bg {
  position: absolute; inset: 0; background: rgba(255,206,45,0.5);
  border-radius: var(--radius-md);
}
.content-card__bg img {
  position: absolute; right: -15%; bottom: -10%; width: 80%; opacity: 0.25; object-fit: contain;
  transform: scale(3); transform-origin: right bottom;
}
@media (min-width: 1024px) { .content-card__bg img { transform: scale(4); } }
.content-card__text {
  position: relative; z-index: 1;
  font-family: var(--font-heading); font-weight: 400; font-size: 20px; line-height: 30px; color: #0b0b0b;
}
.content-card__stars { position: relative; z-index: 1; width: 116px; height: 19px; }

/* ════════════════════ MEET MONKEY MOVES ════════════════════ */
.meet-mm { margin-top: 80px; display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 768px) { .meet-mm { margin-top: 112px; } }
@media (min-width: 1024px) { .meet-mm { margin-top: 160px; } }
.meet-mm__cols { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 1024px) { .meet-mm__cols { flex-direction: row; align-items: stretch; } }

.meet-mm__video {
  position: relative; width: 100%; border-radius: var(--radius-lg); overflow: hidden; min-height: 280px;
}
@media (min-width: 1024px) { .meet-mm__video { width: 57%; flex-shrink: 0; } }
.meet-mm__video-wrap { position: absolute; inset: 0; overflow: hidden; }
.meet-mm__iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: max(100%,177.78vh); height: max(100%,56.25vw); min-width: 100%; min-height: 100%;
  border: none; pointer-events: none;
}
.meet-mm__photo {
  display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Alleen-foto weergave: vervang de video, overlay en afspeelknop door de foto. */
.meet-mm--foto .meet-mm__video-wrap,
.meet-mm--foto .meet-mm__overlay,
.meet-mm--foto .play-btn { display: none; }
.meet-mm--foto .meet-mm__photo { display: block; }
.meet-mm__overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 16px; pointer-events: none;
}
@media (min-width: 768px) { .meet-mm__overlay { padding: 24px; } }
@media (min-width: 1024px) { .meet-mm__overlay { padding: 32px; } }
.meet-mm__overlay-text {
  font-family: var(--font-heading); font-weight: 400; color: var(--white);
  font-size: 20px; line-height: 26px; text-shadow: 0 2px 12px rgba(0,0,0,0.4);
  opacity: 0.85;
}
@media (min-width: 768px) { .meet-mm__overlay-text { font-size: 28px; line-height: 34px; } }
@media (min-width: 1024px) { .meet-mm__overlay-text { font-size: 36px; line-height: 42px; } }

.play-btn {
  position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; pointer-events: none;
}
/* (hero-overview play button is now .hero-play inline next to CTA) */
.play-btn__circle {
  width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.85); backdrop-filter: blur(4px); transition: transform 0.2s, background 0.2s;
  pointer-events: auto; cursor: pointer;
}
.play-btn__circle:hover { transform: scale(1.1); background: rgba(255,255,255,1); }

 .play-btn--hero {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  cursor: pointer;
}

.play-btn--hero__inner {
  width: 72px;
  height: 72px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(1px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.play-btn--hero svg {
  display: block;
}

.play-btn--hero:hover .play-btn--hero__inner,
.play-btn--hero:focus-visible .play-btn--hero__inner {
  border-color: rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.14);
  transform: scale(1.08);
}

.meet-mm__panel {
  flex: 1; display: flex; flex-direction: column; gap: 24px; border-radius: var(--radius-md);
  padding: 24px; background: var(--green);
}
@media (min-width: 1024px) { .meet-mm__panel { padding: 32px; } }
.meet-mm__heading {
  font-family: var(--font-heading); font-weight: 700; color: var(--green-text);
  font-size: 28px; line-height: 34px; text-align: center;
}
@media (min-width: 1024px) { .meet-mm__heading { font-size: 40px; line-height: 40px; text-align: left; } }
.meet-mm__body { font-weight: 300; color: #255847; font-size: 16px; line-height: 24px; text-align: center; }
@media (min-width: 768px) { .meet-mm__body { font-size: 18px; line-height: 28px; } }
@media (min-width: 1024px) { .meet-mm__body { font-size: 20px; line-height: 30px; text-align: left; } }
.meet-mm__usps {
  margin: 0; padding-left: 0; list-style: none; font-weight: 300; color: #255847;
  font-size: 16px; line-height: 32px; text-align: center;
}
@media (min-width: 1024px) {
  .meet-mm__usps { list-style: disc; padding-left: 30px; font-size: 20px; line-height: 40px; text-align: left; }
}
.meet-mm__usp-icon { margin-right: 6px; font-size: 1.1em; vertical-align: -0.1em; }
@media (min-width: 1024px) { .meet-mm__usps--has-icon { list-style: none; padding-left: 0; } }
.meet-mm__fallback-img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* Layout reverse: tekst links, video rechts */
@media (min-width: 1024px) {
  .meet-mm__cols--reverse { flex-direction: row-reverse; }
}

/* Paneel kleurmodifiers */
.meet-mm__panel--paars { background: rgba(116,61,151,0.18); }
.meet-mm__panel--paars .meet-mm__heading { color: var(--purple-dark); }
.meet-mm__panel--geel { background: rgba(255,204,27,0.25); }
.meet-mm__panel--geel .meet-mm__heading { color: #6b5a00; }
.meet-mm__panel--blauw { background: rgba(0,104,255,0.12); }
.meet-mm__panel--blauw .meet-mm__heading { color: #003d99; }
.meet-mm__panel--oranje { background: rgba(255,152,0,0.18); }
.meet-mm__panel--oranje .meet-mm__heading { color: #7a4500; }
.meet-mm__panel--roze { background: rgba(233,30,99,0.12); }
.meet-mm__panel--roze .meet-mm__heading { color: #880e4f; }
.meet-mm__panel--donkerblauw { background: rgba(26,35,126,0.15); }
.meet-mm__panel--donkerblauw .meet-mm__heading { color: #1a237e; }
.meet-mm__panel--wit { background: #fff; border: 1px solid #e0e0e0; }
.meet-mm__panel--wit .meet-mm__heading { color: var(--purple-dark); }

/* Video Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(92, 15, 139, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.lightbox[hidden] { display: none; }
.lightbox__close {
  position: absolute; top: 16px; right: 16px; z-index: 50;
  border: none; background: none; color: var(--white); font-size: 36px; cursor: pointer;
}
.lightbox__inner {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  width: 100%; max-width: 960px; padding: 0 16px;
}
.lightbox__logo {
  width: 180px; animation: lightboxLogoIn 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
@media (min-width: 768px) { .lightbox__logo { width: 220px; } }
@keyframes lightboxLogoIn {
  0% { opacity: 0; transform: translateY(-40px); }
  100% { opacity: 1; transform: translateY(0); }
}
.lightbox__frame { position: relative; width: 100%; aspect-ratio: 16/9; animation: lightboxFrameIn 0.5s 0.15s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes lightboxFrameIn {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
.lightbox__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; border-radius: var(--radius-md); }

/* ════════════════════ REVIEW STERREN + SCORE + MODAL ════════════════════ */
.review-card__rating { display: flex; align-items: center; gap: 10px; }
.review-stars { position: relative; display: inline-block; width: 116px; height: 19px; flex-shrink: 0; line-height: 0; }
.review-stars__empty, .review-stars__full { position: absolute; top: 0; left: 0; height: 100%; }
.review-stars__empty { width: 100%; filter: grayscale(1); opacity: 0.22; }
.review-stars__full { overflow: hidden; width: 0; }
.review-stars img { width: 116px; height: 19px; max-width: none; display: block; }
.review-score {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 24px; padding: 0 7px; border-radius: 6px;
  background: #5c0f8b; color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 14px; line-height: 1;
}

/* Sterren sweep-fill + staggered infade van de review-kaarten */
@keyframes rvStarSweep { from { width: 0; } to { width: var(--rv-fill, 0%); } }
.testimonials__row .review-stars__full { animation: rvStarSweep 0.9s cubic-bezier(0.22,1,0.36,1) 0.35s backwards; }
@keyframes rvCardIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.testimonials__row > * { animation: rvCardIn 0.6s cubic-bezier(0.22,1,0.36,1) backwards; }
.testimonials__row > *:nth-child(1) { animation-delay: 0.05s; }
.testimonials__row > *:nth-child(2) { animation-delay: 0.16s; }
.testimonials__row > *:nth-child(3) { animation-delay: 0.27s; }
.testimonials__row > *:nth-child(4) { animation-delay: 0.38s; }
.testimonials__row > *:nth-child(5) { animation-delay: 0.49s; }
.testimonials__row > *:nth-child(6) { animation-delay: 0.60s; }
@media (prefers-reduced-motion: reduce) {
  .testimonials__row > *, .testimonials__row .review-stars__full { animation: none; }
}
.review-card__more {
  align-self: flex-start; margin-top: auto;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  color: #5c0f8b; text-decoration: underline; text-underline-offset: 3px;
  transition: color 0.2s;
}
.review-card__more:hover { color: #7a1fb0; }
.review-modal {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(92, 15, 139, 0.80);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 72px 16px 40px; overflow-y: auto;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.review-modal[hidden] { display: none; }
.review-modal__close {
  position: fixed; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%;
  border: none; background: rgba(255,255,255,0.15); color: #fff; font-size: 32px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; z-index: 2;
}
.review-modal__close:hover { background: rgba(255,255,255,0.3); }
.review-modal__head {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-bottom: 22px; text-align: center;
}
.review-modal__logo { width: 188px; height: auto; }
@media (min-width: 768px) { .review-modal__logo { width: 224px; } }
.review-modal__heading {
  font-family: var(--font-heading); font-weight: 400; color: #fff;
  font-size: 26px; line-height: 32px; margin: 0; text-shadow: 0 2px 14px rgba(0,0,0,0.25);
}
@media (min-width: 768px) { .review-modal__heading { font-size: 32px; line-height: 38px; } }
.review-modal__stage { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; max-width: 880px; }
.review-modal__nav {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
  border: none; cursor: pointer; background: rgba(255,255,255,0.18); color: #fff;
  font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
.review-modal__nav:hover { background: rgba(255,255,255,0.32); transform: scale(1.06); }
.review-modal__nav[hidden] { display: none; }
.review-modal__inner {
  flex: 1 1 auto; max-width: 760px; max-height: 78vh; overflow: hidden;
  background: #fff; border-radius: var(--radius-md); padding: 32px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  display: flex; gap: 28px; align-items: stretch;
  animation: reviewModalIn 0.35s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes reviewModalIn {
  0% { opacity: 0; transform: translateY(24px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Slide-animatie bij navigeren tussen reviews */
.review-modal__inner.rv-anim-l { animation: rvSwapL 0.34s cubic-bezier(0.22,1,0.36,1); }
.review-modal__inner.rv-anim-r { animation: rvSwapR 0.34s cubic-bezier(0.22,1,0.36,1); }
@keyframes rvSwapL { 0% { opacity: 0; transform: translateX(-30px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes rvSwapR { 0% { opacity: 0; transform: translateX(30px); } 100% { opacity: 1; transform: translateX(0); } }
.review-modal__main { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.review-modal__header { flex-shrink: 0; background: #fff; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.review-modal__header .review-modal__rating { margin-bottom: 12px; }
.review-modal__header .review-modal__title { margin: 0; }
.review-modal__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.review-modal__scroll .review-modal__body { margin-top: 0; }
.review-modal__aside {
  flex: 0 0 auto; align-self: flex-start; width: 200px; max-width: 200px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.review-modal__kv {
  width: 100%; background: #fff; border-radius: var(--radius-md);
  border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  padding: 12px 16px 8px; line-height: 0; display: flex; justify-content: center;
}
.review-modal__kv-frame { width: 185px; max-width: 100%; height: 222px; border: 0; display: block; }
.review-modal__all {
  display: inline-flex; align-items: center; gap: 6px; text-align: center;
  font-family: var(--font-body); font-weight: 700; font-size: 14px; line-height: 20px;
  color: #5c0f8b; text-decoration: none;
  transition: color 0.2s;
}
.review-modal__all:hover { color: #7a1fb0; }
.review-modal__all-icon { width: 15px; height: 15px; flex-shrink: 0; }
.review-modal__rating { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.review-modal__starsbox .review-stars__full { transition: width 0.75s cubic-bezier(0.22,1,0.36,1); }
.review-modal__title { font-family: var(--font-heading); font-weight: 400; font-size: 24px; line-height: 30px; color: #0b0b0b; margin: 0 0 12px; }
.review-modal__body { font-family: var(--font-body); font-weight: 300; font-size: 17px; line-height: 28px; color: #2b2b2b; margin: 0 0 16px; white-space: pre-line; }
.review-modal__author { font-family: var(--font-body); font-weight: 400; font-size: 15px; color: #5c0f8b; margin: 0; display: flex; flex-wrap: wrap; align-items: center; }
.review-modal__author:empty { display: none; }
.review-modal__source { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-family: var(--font-body); font-weight: 700; font-size: 14px; color: #5c0f8b; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color 0.2s; }
.review-modal__source:hover { color: #7a1fb0; }
.review-modal__source-icon { width: 15px; height: 15px; flex-shrink: 0; }
@media (max-width: 640px) {
  /* Smallere nav + minder padding zodat de review-popup breder wordt en er meer tekst in past. */
  .review-modal { padding-left: 8px; padding-right: 8px; }
  .review-modal__nav { width: 40px; height: 40px; font-size: 24px; }
  .review-modal__stage { gap: 4px; max-width: none; }
  .review-modal__inner { padding: 24px 20px; max-width: none; flex-direction: column; gap: 20px; }
  .review-modal__aside { width: 100%; max-width: none; }
  .review-modal__kv { padding: 10px 12px 6px; }
  /* Review-inhoud gecentreerd op mobiel. */
  .review-modal__rating { justify-content: center; }
  .review-modal__title, .review-modal__body { text-align: center; }
  .review-modal__author { justify-content: center; }
}
/* ── Mobiel: teksten, knoppen, cards en reviews gecentreerd voor een rustiger beeld ── */
@media (max-width: 1023px) {
  .intro-section__text { align-items: center; text-align: center; }
  .intro-section__heading { align-items: center; text-align: center; }
  .intro-section__body { text-align: center; }
  .content-block__ctas { align-items: center; }
  .highlight-card__text { align-items: center; text-align: center; }
  .review-card { align-items: center; text-align: center; }
  .review-card__rating { justify-content: center; }
  .review-card__author { justify-content: center; }
}

/* ════════════════════ INSCHRIJF MODAL (FlexKids formulier popup) ════════════════════ */
.inschrijf-modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-start; justify-content: center;
  background: rgba(92, 15, 139, 0.80); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 24px 12px;
}
.inschrijf-modal[hidden] { display: none; }
.inschrijf-modal__close {
  position: fixed; top: 12px; right: 12px; z-index: 61;
  border: none; background: rgba(255,255,255,0.15); color: var(--white);
  font-size: 28px; cursor: pointer; width: 44px; height: 44px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.inschrijf-modal__close:hover { background: rgba(255,255,255,0.3); }
@media (min-width: 768px) {
  .inschrijf-modal { padding: 40px 24px; }
  .inschrijf-modal__close { top: 16px; right: 16px; font-size: 36px; width: 48px; height: 48px; }
}
.inschrijf-modal__inner {
  width: 100%; max-width: 900px;
  background: #fdf8f0; border-radius: var(--radius-md);
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  animation: inschrijfModalIn 0.4s cubic-bezier(0.22,1,0.36,1) both;
  display: flex; flex-direction: column;
}
@keyframes inschrijfModalIn {
  0% { opacity: 0; transform: translateY(30px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.inschrijf-modal__header {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 28px 24px 16px; border-bottom: 1px solid rgba(92,15,139,0.08);
}
.inschrijf-modal__logo { width: 140px; }
@media (min-width: 768px) { .inschrijf-modal__logo { width: 170px; } }
.inschrijf-modal__title {
  font-family: var(--font-heading); font-weight: 400; color: var(--purple-dark);
  font-size: 22px; line-height: 30px; text-align: center;
}
@media (min-width: 768px) { .inschrijf-modal__title { font-size: 28px; line-height: 36px; } }
.inschrijf-modal__alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 24px; margin: 0;
  background: #e8f4fd; color: #0c5460; font-size: 14px; line-height: 22px;
  border-bottom: 1px solid rgba(92,15,139,0.06);
}
.inschrijf-modal__form {
  padding: 16px 16px 24px; flex: 1;
}
@media (min-width: 768px) { .inschrijf-modal__form { padding: 24px 32px 32px; } }
@media (min-width: 1024px) { .inschrijf-modal__form { padding: 28px 48px 40px; } }
/* Ensure embedded iframes fill available space */
.inschrijf-modal__form iframe {
  width: 100% !important; min-height: 520px; border: none; border-radius: 8px;
}
@media (min-width: 768px) { .inschrijf-modal__form iframe { min-height: 600px; } }
/* Prevent body scroll when modal is open */
body.inschrijf-modal-open { overflow: hidden; }

/* ════════════════════ TEAM ════════════════════ */
.team, .team-intro, .team-v2, .team-blob { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 1024px) { .team, .team-intro, .team-v2, .team-blob { gap: 80px; } }
.team-v2, .team-blob { text-align: center; }
.team-v2 .team__subtitle, .team-blob .team__subtitle { margin: 0 auto; }
.team__header {
  display: flex; flex-direction: column; gap: 16px; align-items: center;
  text-align: center; max-width: 864px; margin: 0 auto;
}
.team__title {
  font-family: var(--font-heading); font-size: 24px; line-height: 30px;
  color: var(--purple-dark); margin: 0;
}
@media (min-width: 768px) { .team__title { font-size: 32px; line-height: 36px; } }
@media (min-width: 1024px) { .team__title { font-size: 48px; line-height: 54px; } }
.team__body {
  font-family: var(--font-body); font-weight: 300; font-size: 16px;
  line-height: 30px; color: #0b0b0b; margin: 0;
}
@media (min-width: 1024px) { .team__body { font-size: 20px; } }
.team__subtitle {
  font-family: var(--font-heading); font-weight: normal; font-size: 24px; line-height: 28px;
  color: var(--purple-dark); margin: 0;
}
@media (min-width: 1024px) { .team__subtitle { font-size: 48px; line-height: 54px; } }
.team__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.team__grid .team-card { width: 100%; max-width: 100%; }
@media (min-width: 640px) { .team__grid .team-card { width: calc(50% - 12px); } }
@media (min-width: 1024px) { .team__grid { gap: 48px; } .team__grid .team-card { width: calc(25% - 36px); } }
.team-card {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  transition: transform 0.3s ease;
}
.team-card:hover { transform: translateY(-4px); }
.team-card:hover .team-card__photo img { transform: scale(1.15); }
.team-card__photo img {
  transition: transform 0.4s ease;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transform: translateZ(0);
}
@media (min-width: 1024px) { .team-card { gap: 24px; } }
.team-card__photo {
  width: 100%; height: 292px; border-radius: var(--radius-md);
  overflow: hidden; flex-shrink: 0;
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__info { display: flex; flex-direction: column; gap: 0; text-align: center; align-items: center; }
.team-card__name { font-weight: 700; font-size: 20px; line-height: 30px; color: var(--purple-dark); margin: 0; }
.team-card__role { font-weight: 300; font-size: 18px; line-height: 27px; color: rgba(92,15,139,0.5); margin: 0; }

/* Team Blob Photo Variants */
.team-card--blob .team-card__photo {
  width: 100%; height: auto; aspect-ratio: 1/1; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  background-color: #c9a0ea;
  animation-play-state: paused;
  will-change: border-radius;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transform: translateZ(0);
}
.team-card--blob .team-card__photo img {
  transform: scale(1.1) translateZ(0);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast;
}
.team.revealed .team-card--blob .team-card__photo,
.team-blob.revealed .team-card--blob .team-card__photo { animation-play-state: running; }

.team-card--blob-1 .team-card__photo {
  border-radius: 56% 44% 52% 48% / 48% 54% 46% 52%;
  animation: blobMorph1 10s ease-in-out infinite;
}
.team-card--blob-2 .team-card__photo {
  border-radius: 48% 52% 46% 54% / 54% 46% 52% 48%;
  animation: blobMorph2 12s ease-in-out infinite;
  animation-delay: -3s;
}
.team-card--blob-3 .team-card__photo {
  border-radius: 52% 48% 56% 44% / 46% 52% 48% 52%;
  animation: blobMorph3 11s ease-in-out infinite;
  animation-delay: -6s;
}
.team-card--blob-4 .team-card__photo {
  border-radius: 44% 56% 48% 52% / 54% 46% 50% 50%;
  animation: blobMorph4 13s ease-in-out infinite;
  animation-delay: -9s;
}

/* ── Team section: achtergrondkleur varianten ── */
.team-blob--bg-paars { background-color: #5C0F8B; }
.team-blob--bg-groen { background-color: #00a651; }
.team-blob--bg-geel  { background-color: #f5b800; }
.team-blob--bg-blauw { background-color: #1e40af; }
.team-blob--bg-oranje { background-color: #e85d04; }
.team-blob--bg-roze  { background-color: #be185d; }
.team-blob[class*="--bg-"] {
  position: relative; border-radius: 0; overflow: hidden;
  width: 100vw; margin-left: calc(-50vw + 50%);
  padding: 48px var(--px-mobile);
}
@media (min-width: 768px) { .team-blob[class*="--bg-"] { padding: 64px var(--px-tablet); } }
@media (min-width: 1024px) { .team-blob[class*="--bg-"] { padding: 80px var(--px-desktop); } }
.team-blob[class*="--bg-"] .team__subtitle,
.team-blob[class*="--bg-"] .team__grid {
  max-width: calc(var(--max-page) - 2 * var(--px-desktop)); margin-left: auto; margin-right: auto;
}
/* ── Team section: tekstkleur varianten ── */
.team-blob--text-licht .team__subtitle { color: #fff; }
.team-blob--text-licht .team-card__name { color: #fff; }
.team-blob--text-licht .team-card__role { color: rgba(255,255,255,0.7); }
/* ── Team section: boog (wave) onderaan ── */
.team-blob--boog { padding-bottom: 80px; }
@media (min-width: 768px) { .team-blob--boog { padding-bottom: 100px; } }
.team-blob--boog::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 53px;
  background: url("https://fn-regio.monkeymoves.com/assets/bso-marketing/images/team-wave-mask.svg") no-repeat center bottom;
  background-size: 100% 100%; pointer-events: none; z-index: 1;
}
@media (min-width: 768px) { .team-blob--boog::after { height: 70px; } }
@media (min-width: 1024px) { .team-blob--boog::after { height: 90px; } }

.mm-interest-locations {
  display: flex; flex-direction: column; gap: 32px; align-items: center;
  padding: 48px 20px; background: linear-gradient(180deg, #fff7d8 0%, #fff2c5 100%);
  border-radius: 28px; overflow: hidden;
}
@media (min-width: 1024px) { .mm-interest-locations { gap: 44px; padding: 64px 40px; } }
.mm-interest-locations__head { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 860px; text-align: center; }
.mm-interest-locations__eyebrow {
  display: inline-flex; align-items: center; justify-content: center; margin: 0 0 2px;
  padding: 8px 18px; border-radius: 8px; transform: rotate(-1.5deg);
  background: var(--purple-dark); color: var(--white); box-shadow: 0 8px 18px rgba(92,15,139,0.18);
  font-family: var(--font-heading); font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase;
}
.mm-interest-locations .section-title { max-width: 900px; margin: 0; }
.mm-interest-locations .section-subtitle { max-width: 760px; margin: 0 auto; color: rgba(92,15,139,0.78); }
.mm-interest-locations__intro { max-width: 680px; margin: 0 auto; color: var(--body-text); font-family: var(--font-body); font-size: 18px; line-height: 30px; }
.mm-interest-locations__intro p { margin: 0; }
.mm-interest-locations__wrap { width: 100%; max-width: 1120px; }
.mm-interest-locations__grid { display: grid; grid-template-columns: 1fr; gap: 20px; width: 100%; }
@media (min-width: 900px) { .mm-interest-locations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.mm-interest-card {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 18px; align-items: stretch;
  padding: 10px; border-radius: 18px; background: var(--white); border: 1px solid rgba(92,15,139,0.08);
  box-shadow: 0 14px 34px rgba(92,15,139,0.10); transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mm-interest-card:hover { transform: translateY(-4px); box-shadow: 0 18px 42px rgba(92,15,139,0.16); }
.mm-interest-card__media { display: block; width: 168px; height: 100%; align-self: stretch; border-radius: 12px; overflow: hidden; background: linear-gradient(135deg,#5c0f8b 0%,#743d97 100%); }
.mm-interest-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.mm-interest-card:hover .mm-interest-card__media img { transform: scale(1.06); }
.mm-interest-card__body { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 6px 6px 6px 0; }
.mm-interest-card__title { margin: 0; color: var(--purple-dark); font-family: var(--font-body); font-weight: 700; font-size: 20px; line-height: 26px; }
.mm-interest-card__text { margin: 0; color: var(--body-text); font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 24px; }
.mm-interest-card__cta { align-self: flex-start; margin-top: auto; min-height: 42px; padding: 8px 16px; font-size: 14px; }
@media (max-width: 639px) {
  .mm-interest-locations { margin-left: -12px; margin-right: -12px; border-radius: 22px; }
  .mm-interest-card { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; }
  .mm-interest-card__media { width: 112px; }
  .mm-interest-card__title { font-size: 18px; line-height: 24px; }
  .mm-interest-card__text { font-size: 15px; line-height: 22px; }
  .mm-interest-card__cta { width: 100%; justify-content: center; }
}
.mm-interest-locations__wrap--slider .mm-interest-locations__grid { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 2px 18px; }
.mm-interest-locations__wrap--slider .mm-interest-locations__grid::-webkit-scrollbar { display: none; }
.mm-interest-locations__wrap--slider .mm-interest-card { flex: 0 0 min(86vw, 480px); scroll-snap-align: start; }

.mm-interest-form-section { display: flex; flex-direction: column; align-items: center; gap: 32px; padding: 64px 20px; }
.mm-interest-form-section__head { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 820px; text-align: center; }
.mm-interest-form { width: 100%; max-width: 980px; }
.mm-interest-form__card { display: flex; flex-direction: column; gap: 24px; padding: 24px; border-radius: 28px; background: var(--white); border: 1px solid rgba(92,15,139,0.08); box-shadow: 0 18px 44px rgba(92,15,139,0.12); }
.mm-interest-form.is-submitted .mm-interest-form__card { display: none; }
@media (min-width: 768px) { .mm-interest-form__card { padding: 32px; } }
.mm-interest-form__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .mm-interest-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.mm-interest-form__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mm-interest-form__field--wide { grid-column: 1 / -1; }
.mm-interest-form__field label { color: var(--purple-dark); font-family: var(--font-body); font-weight: 700; font-size: 14px; line-height: 20px; }
.mm-interest-form__field input[type="text"], .mm-interest-form__field input[type="email"], .mm-interest-form__field input[type="tel"], .mm-interest-form__field textarea { width: 100%; border: 1px solid rgba(92,15,139,0.16); border-radius: 12px; background: #fffaf0; color: var(--body-text); font-family: var(--font-body); font-size: 16px; line-height: 24px; padding: 12px 14px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.mm-interest-form__field textarea { resize: vertical; min-height: 118px; }
.mm-interest-form__field input:focus, .mm-interest-form__field textarea:focus { border-color: var(--purple); background: var(--white); box-shadow: 0 0 0 4px rgba(116,61,151,0.12); }
.mm-interest-form__checks { display: grid; grid-template-columns: 1fr; gap: 8px; }
.mm-interest-form__check, .mm-interest-form__day { display: flex; align-items: center; gap: 8px; color: var(--body-text); font-family: var(--font-body); font-size: 15px; line-height: 22px; cursor: pointer; }
.mm-interest-form__check input, .mm-interest-form__day input { width: 18px; height: 18px; accent-color: var(--purple); flex-shrink: 0; }
.mm-interest-form__days { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-interest-form__day { padding: 9px 12px; border-radius: 999px; background: #fffaf0; border: 1px solid rgba(92,15,139,0.12); }
.mm-interest-form__submit { align-self: center; min-width: 220px; }
.mm-interest-form__submit.is-loading { opacity: 0.65; cursor: wait; }
.mm-interest-form__error { padding: 12px 14px; border-radius: 12px; background: #fee2e2; color: #991b1b; font-family: var(--font-body); font-size: 14px; line-height: 22px; }
.mm-interest-form__success { padding: 32px 24px; border-radius: 24px; background: linear-gradient(135deg,#f7efff 0%,#efe3ff 48%,#fff7df 100%); color: var(--purple-dark); text-align: center; box-shadow: 0 18px 44px rgba(92,15,139,0.14); border: 1px solid rgba(92,15,139,0.10); }
.mm-interest-form__success h3 { margin: 0 0 8px; font-family: var(--font-heading); font-size: 34px; line-height: 38px; color: var(--purple); }
.mm-interest-form__success p { margin: 0; font-family: var(--font-body); font-size: 18px; line-height: 28px; color: var(--purple-dark); }
.mm-interest-form__success-gif { display: block; width: min(220px, 70vw); height: auto; margin: 18px auto 0; }
@media (max-width: 639px) { .mm-interest-form-section { padding: 48px 0; } .mm-interest-form__card { padding: 18px; border-radius: 22px; } .mm-interest-form__submit { width: 100%; } }

section[data-tpl-id="dyn-contact"] { width: min(1120px, calc(100% - 40px)); margin-left: auto; margin-right: auto; padding: 64px 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
section[data-tpl-id="dyn-contact"] .section-title { max-width: 900px; margin: 0; }
section[data-tpl-id="dyn-contact"] .section-subtitle { max-width: 760px; margin: 0 auto 12px; color: rgba(92,15,139,0.78); }
.club-contact__methods { width: min(920px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.contact-method { position: relative; display: flex; align-items: center; gap: 16px; min-height: 86px; padding: 18px 22px; border-radius: 18px; background: var(--white); border: 1px solid rgba(92,15,139,0.10); color: var(--purple-dark); text-decoration: none; box-shadow: 0 14px 34px rgba(92,15,139,0.08); overflow: hidden; transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease; }
.contact-method:hover { transform: translateY(-3px); border-color: rgba(116,61,151,0.24); box-shadow: 0 18px 42px rgba(92,15,139,0.14); }
.contact-method__icon { flex: 0 0 42px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; color: var(--purple); }
.contact-method__icon svg { width: 34px; height: 34px; display: block; }
.contact-method__info { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.contact-method__label { color: rgba(65,64,66,0.62); font-family: var(--font-body); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.contact-method__value { color: var(--purple-dark); font-family: var(--font-body); font-size: 15px; line-height: 21px; font-weight: 700; overflow-wrap: anywhere; }
.contact-method--whatsapp { grid-column: 1 / -1; min-height: 160px; padding-right: min(300px, 34vw); border-color: rgba(37,211,102,0.22); background: linear-gradient(135deg,#ffffff 0%,#f2fff7 100%); }
.contact-method--whatsapp .contact-method__icon { color: #25d366; }
.contact-method--whatsapp .contact-method__value { color: #047857; }
.contact-method__anim { position: absolute; right: clamp(18px, 8vw, 86px); bottom: -10px; width: clamp(132px, 20vw, 220px); height: auto; max-height: 178px; object-fit: contain; pointer-events: none; }
.club-contact__empty { width: min(720px, 100%); margin: 8px auto 0; padding: 22px 24px; border-radius: 18px; background: #fff7d8; color: var(--purple-dark); font-family: var(--font-body); text-align: center; }
.club-contact__cross { width: min(920px, 100%); display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 18px 22px; border-radius: 18px; background: var(--purple-dark); color: var(--white); font-family: var(--font-body); font-weight: 700; text-decoration: none; box-shadow: 0 16px 38px rgba(92,15,139,0.16); }
.club-contact__cross-arrow { flex: 0 0 auto; color: var(--yellow); font-size: 22px; line-height: 1; }
@media (max-width: 767px) { section[data-tpl-id="dyn-contact"] { width: min(100%, calc(100% - 28px)); padding: 48px 0; } .club-contact__methods { grid-template-columns: 1fr; } .contact-method { min-height: 78px; padding: 16px; } .contact-method--whatsapp { min-height: 0; padding-right: 16px; padding-bottom: 138px; } .contact-method__anim { left: 50%; right: auto; bottom: -8px; width: min(190px, 62vw); transform: translateX(-50%); } }

.mm-loccards { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 1024px) { .mm-loccards { gap: 48px; } }
.mm-loccards .section-subtitle { margin-left: auto; margin-right: auto; }
.mm-loccards__wrap { width: 100%; }
.mm-loccards__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px; width: 100%; }
@media (min-width: 1024px) { .mm-loccards--blob .mm-loccards__grid { gap: 48px; } }
.mm-loccards--blob .mm-loccards__grid > * { flex: 0 1 100%; }
@media (min-width: 640px)  { .mm-loccards--blob .mm-loccards__grid > * { flex: 0 1 calc((100% - 24px) / 2); } }
@media (min-width: 1024px) { .mm-loccards--blob .mm-loccards__grid > * { flex: 0 1 calc((100% - 3 * 48px) / 4); } }
.mm-loc-blob { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; transition: transform 0.3s ease; }
@media (min-width: 1024px) { .mm-loc-blob { gap: 20px; } }
.mm-loc-blob:hover { transform: translateY(-8px); }
.mm-loc-blob__photo { width: 100%; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; flex-shrink: 0; background-color: #c9a0ea; box-shadow: 0 10px 26px rgba(92,15,139,0.12); transition: box-shadow 0.35s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); }
.mm-loc-blob:hover .mm-loc-blob__photo { box-shadow: 0 18px 34px rgba(92,15,139,0.20); }
.mm-loc-blob__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.05) translateZ(0); transition: transform 0.4s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.mm-loc-blob:hover .mm-loc-blob__photo img { transform: scale(1.18) translateZ(0); }
.mm-loc-blob__photo--placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#5c0f8b 0%,#743d97 100%); }
.mm-loc-blob__photo--placeholder span { color: #ffd633; font-family: 'Ubuntu', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.5px; text-align: center; padding: 0 12px; }
.mm-loc-blob__info { display: flex; flex-direction: column; gap: 0; align-items: center; }
.mm-loc-blob__name { font-family: 'Ubuntu', sans-serif; font-weight: 700; font-size: 20px; line-height: 28px; color: var(--purple-dark); margin: 0; }
.mm-loc-blob__place { font-family: 'Ubuntu', sans-serif; font-weight: 300; font-size: 18px; line-height: 26px; color: rgba(92,15,139,0.55); margin: 0; }
.mm-loc-blob--1 .mm-loc-blob__photo { border-radius: 56% 44% 52% 48% / 48% 54% 46% 52%; animation: blobMorph1 10s ease-in-out infinite; }
.mm-loc-blob--2 .mm-loc-blob__photo { border-radius: 48% 52% 46% 54% / 54% 46% 52% 48%; animation: blobMorph2 12s ease-in-out infinite; animation-delay: -3s; }
.mm-loc-blob--3 .mm-loc-blob__photo { border-radius: 52% 48% 56% 44% / 46% 52% 48% 52%; animation: blobMorph3 11s ease-in-out infinite; animation-delay: -6s; }
.mm-loc-blob--4 .mm-loc-blob__photo { border-radius: 44% 56% 48% 52% / 54% 46% 50% 50%; animation: blobMorph4 13s ease-in-out infinite; animation-delay: -9s; }
.mm-loccards--slider { --tv: 1; }
@media (min-width: 640px)  { .mm-loccards--slider { --tv: 2; } }
@media (min-width: 1024px) { .mm-loccards--slider { --tv: 4; } }
@media (min-width: 1024px) { .mm-loccards--card.mm-loccards--slider { --tv: 3; } }
.mm-loccards--slider .mm-loccards__grid { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 24px; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 14px 2px 20px; }
@media (min-width: 1024px) { .mm-loccards--slider .mm-loccards__grid { gap: 48px; } }
.mm-loccards--slider .mm-loccards__grid::-webkit-scrollbar { display: none; }
.mm-loccards--slider .mm-loccards__grid > * { flex: 0 0 calc((100% - (var(--tv) - 1) * 24px) / var(--tv)) !important; scroll-snap-align: start; }
@media (min-width: 1024px) { .mm-loccards--slider .mm-loccards__grid > * { flex-basis: calc((100% - (var(--tv) - 1) * 48px) / var(--tv)) !important; } }
.mm-loccards--slider .mm-loccards__grid--fit { justify-content: center; overflow-x: visible; }
@media (prefers-reduced-motion: reduce) { .mm-loccards--slider .mm-loccards__grid { scroll-behavior: auto; } }
@keyframes blobMorph1 {
  0%, 100% { border-radius: 56% 44% 52% 48% / 48% 54% 46% 52%; transform: scale(1); }
  33%      { border-radius: 52% 48% 48% 52% / 55% 45% 52% 48%; transform: scale(1.01); }
  66%      { border-radius: 48% 52% 55% 45% / 46% 54% 50% 50%; transform: scale(0.99); }
}
@keyframes blobMorph2 {
  0%, 100% { border-radius: 48% 52% 46% 54% / 54% 46% 52% 48%; transform: scale(1); }
  33%      { border-radius: 52% 48% 52% 48% / 46% 54% 48% 52%; transform: scale(0.99); }
  66%      { border-radius: 54% 46% 48% 52% / 52% 48% 54% 46%; transform: scale(1.01); }
}
@keyframes blobMorph3 {
  0%, 100% { border-radius: 52% 48% 56% 44% / 46% 52% 48% 52%; transform: scale(1); }
  33%      { border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%; transform: scale(1.01); }
  66%      { border-radius: 55% 45% 46% 54% / 48% 52% 53% 47%; transform: scale(0.99); }
}
@keyframes blobMorph4 {
  0%, 100% { border-radius: 44% 56% 48% 52% / 54% 46% 50% 50%; transform: scale(1); }
  33%      { border-radius: 50% 50% 44% 56% / 48% 52% 55% 45%; transform: scale(1.01); }
  66%      { border-radius: 56% 44% 52% 48% / 45% 55% 48% 52%; transform: scale(0.99); }
}

/* ════════════════════ COMPARE TABLE ════════════════════ */
.compare-table__grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; border-radius: 8px; overflow: hidden;
}
.compare-table__head {
  background: var(--purple-dark); color: #fff; padding: 12px;
  font-family: var(--font-body); font-weight: 700; font-size: 20px; line-height: 30px;
}
.compare-table__head--first { border-radius: 8px 0 0 0; }
.compare-table__head--last { border-radius: 0 8px 0 0; }
.compare-table__cell {
  padding: 12px; font-family: var(--font-body); font-weight: 300; font-size: 20px;
  line-height: 30px; color: #414042; background: #fff;
}
.compare-table__cell--alt { background: #fdf4d6; }
.compare-table__cell--last { border-radius: 0 0 0 8px; }
.compare-table__cell--last-right { border-radius: 0 0 8px 0; }
@media (max-width: 767px) {
  .compare-table__grid { grid-template-columns: 1fr; }
  .compare-table__head--first, .compare-table__head--last { border-radius: 0; }
  .compare-table__cell--last { border-radius: 0; }
  .compare-table__cell--last-right { border-radius: 0; }
  .compare-table__cell { font-size: 16px; font-weight: 400; }
}

/* ════════════════════ PRICING ════════════════════ */
.pricing__grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 768px) { .pricing__grid { grid-template-columns: 1fr 1fr; } }
.pricing__card {
  border: 1px solid var(--purple-dark); border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column; gap: 24px; align-items: center;
  padding: 0 32px 32px; text-align: center;
}
.pricing__card > .pricing__header { margin: 0 -32px; width: calc(100% + 64px); }
.pricing__header {
  background: var(--purple-dark); color: #fff; width: 100%; padding: 12px;
  font-family: var(--font-heading); font-size: 32px; line-height: 40px; text-align: center;
}
@media (min-width: 768px) { .pricing__header { font-size: 40px; } }
.pricing__header--primary { background: #743d97; }
.pricing__price {
  font-family: var(--font-body); font-weight: 700; font-size: 24px; line-height: 36px;
  color: var(--purple-dark); margin: 0;
}
@media (min-width: 768px) { .pricing__price { font-size: 32px; } }
.pricing__desc {
  font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 30px;
  color: #000; margin: 0; padding: 0;
}
@media (min-width: 768px) { .pricing__desc { font-size: 20px; line-height: 30px; } }
.pricing__list {
  list-style: disc; text-align: left; padding: 0 0 0 24px; margin: 0;
  font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 40px; color: #0b0b0b;
}
@media (min-width: 768px) { .pricing__list { font-size: 20px; } }
.pricing__card .btn { margin: 0; align-self: stretch; }
.pricing-plans { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 48px 0 72px; }
.pricing-plans__header { max-width: 820px; margin: 0 auto; text-align: center; }
.pricing-plans__title { margin: 0; color: var(--purple); font-family: var(--font-heading); font-size: clamp(38px, 5vw, 64px); line-height: .95; letter-spacing: .01em; }
.pricing-plans__intro { margin: 12px auto 0; color: var(--body-text); font-family: var(--font-body); font-size: 18px; line-height: 30px; }
.pricing-plans__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: stretch; margin-top: 118px; }
.pricing-plans__single { max-width: 360px; margin: 118px auto 0; }
.pricing-card { position: relative; display: flex; flex-direction: column; min-height: 100%; padding: 112px 24px 24px; border-radius: 28px; background: #fff; border: 1px solid rgba(92,15,139,.10); box-shadow: 0 20px 48px rgba(92,15,139,.12); text-align: center; }
.pricing-card--featured { background: linear-gradient(180deg,#f4e5ff 0%,#fff 68%); border-color: rgba(116,61,151,.22); box-shadow: 0 26px 58px rgba(92,15,139,.18); }
.pricing-card__illustration { position: absolute; left: 50%; top: -92px; width: 210px; height: 190px; transform: translateX(-50%); display: flex; align-items: flex-end; justify-content: center; pointer-events: none; z-index: 2; }
.pricing-card__img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.pricing-card__badge { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); min-height: 28px; padding: 6px 14px; border-radius: 999px; background: var(--yellow); color: var(--purple-dark); font-family: var(--font-body); font-weight: 700; font-size: 13px; line-height: 16px; white-space: nowrap; }
.pricing-card__badge:empty { display: none; }
.pricing-card__head { display: flex; flex-direction: column; gap: 4px; margin: 0 0 18px; }
.pricing-card__title { margin: 0; color: var(--purple); font-family: var(--font-heading); font-size: 34px; line-height: .95; }
.pricing-card__subtitle { margin: 0; color: var(--body-text); font-family: var(--font-body); font-size: 15px; line-height: 22px; }
.pricing-card__price { margin: 2px 0 0; color: var(--purple-dark); font-family: var(--font-body); font-size: 22px; line-height: 30px; font-weight: 700; }
.pricing-card__list { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0 0 0 20px; text-align: left; color: var(--body-text); font-family: var(--font-body); font-size: 15px; line-height: 22px; }
.pricing-card__foot { display: flex; flex-direction: column; gap: 12px; margin-top: auto; padding-top: 22px; }
.pricing-card__btn { align-self: stretch; min-height: 46px; background: var(--yellow); color: var(--purple-dark); box-shadow: 0 10px 20px rgba(255,214,51,.28); }
.pricing-card__note { min-height: 34px; margin: 0; color: rgba(65,64,66,.72); font-family: var(--font-body); font-size: 13px; line-height: 17px; }
.pricing-plans__contact { max-width: 720px; margin: 36px auto 0; text-align: center; color: var(--body-text); font-family: var(--font-body); font-size: 18px; line-height: 30px; }
.pricing-plans__contact a { color: var(--purple); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1023px) { .pricing-plans__grid { grid-template-columns: 1fr 1fr; row-gap: 116px; } .pricing-plans__single { max-width: calc(50% - 14px); } }
@media (max-width: 767px) { .pricing-plans { width: min(100%, calc(100% - 28px)); padding: 40px 0 56px; } .pricing-plans__grid { grid-template-columns: 1fr; gap: 112px; } .pricing-plans__single { max-width: none; margin-top: 112px; } .pricing-card { padding: 104px 18px 22px; border-radius: 24px; } .pricing-card__illustration { width: 190px; height: 174px; top: -86px; } .pricing-card__title { font-size: 32px; } }

/* ════════════════════ USP GRID ════════════════════ */
.usp-grid__items {
  display: grid; grid-template-columns: 1fr; gap: 32px;
}
@media (min-width: 640px) { .usp-grid__items { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .usp-grid__items { grid-template-columns: repeat(4, 1fr); } }
.usp-grid__item { display: flex; gap: 16px; align-items: flex-start; }
.usp-grid__icon { flex-shrink: 0; width: 24px; height: 24px; margin-top: 6px; }
.usp-grid__icon svg { display: block; width: 24px; height: 24px; }
.usp-grid__text { display: flex; flex-direction: column; gap: 16px; }
.usp-grid__title {
  font-family: var(--font-body); font-weight: 400; font-size: 24px; line-height: 30px;
  color: var(--purple-dark); margin: 0;
}
@media (min-width: 1024px) { .usp-grid__title { font-size: 32px; line-height: 36px; } }
.usp-grid__body {
  font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: 27px;
  color: #0b0b0b; margin: 0;
}
@media (min-width: 1024px) { .usp-grid__body { font-size: 20px; } }

/* Team CTA Banner */
.team-cta {
  background: var(--purple-dark); border-radius: 12px; padding: 24px;
  display: flex; flex-direction: column; gap: 32px;
  overflow: visible; position: relative;
}
@media (min-width: 1024px) {
  .team-cta { flex-direction: row; align-items: flex-start; justify-content: space-between; padding: 48px; }
}
.team-cta__content {
  display: flex; flex-direction: column; gap: 32px; position: relative; z-index: 1;
}
@media (min-width: 1024px) { .team-cta__content { max-width: 768px; } }
.team-cta__title {
  font-family: var(--font-heading); font-size: 32px; line-height: 40px;
  color: #fff; margin: 0;
}
.team-cta__body {
  font-family: var(--font-body); font-weight: 300; font-size: 16px;
  line-height: 27px; color: #fff; margin: 0;
}
@media (min-width: 1024px) { .team-cta__body { font-size: 20px; line-height: 27px; } }
.team-cta__buttons {
  display: flex; flex-direction: column; gap: 16px;
}
@media (min-width: 1024px) { .team-cta__buttons { flex-direction: row; max-width: 698px; } }
.team-cta__buttons .btn { flex: 1; }
.team-cta__mascot {
  flex-shrink: 0; position: relative; width: 100%; max-width: 280px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .team-cta__mascot { width: 587px; max-width: none; height: 237px; margin: 0; }
}
.team-cta__mascot img { width: 100%; height: auto; object-fit: contain; }

/* ════════════════════ HIRING BANNER ════════════════════ */
.hiring { margin-top: 80px; }
@media (min-width: 768px) { .hiring { margin-top: 112px; } }
@media (min-width: 1024px) { .hiring { margin-top: 160px; } }
.hiring__lion-mobile { display: flex; justify-content: center; margin-bottom: -20px; }
.hiring__lion-mobile img,
.hiring__lion-mobile .bso-lottie { max-width: 220px; max-height: 160px; object-fit: contain; }
@media (min-width: 480px) { .hiring__lion-mobile img, .hiring__lion-mobile .bso-lottie { max-width: 280px; max-height: 180px; } }
@media (min-width: 768px) { .hiring__lion-mobile img, .hiring__lion-mobile .bso-lottie { max-width: 300px; max-height: 200px; } }
@media (min-width: 1024px) { .hiring__lion-mobile { display: none; } }
.hiring__banner {
  position: relative; overflow: visible; border-radius: var(--radius-md);
  padding: 24px; background: var(--purple-dark);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  min-height: 0;
}
@media (min-width: 768px) { .hiring__banner { padding: 32px; } }
@media (min-width: 1024px) { .hiring__banner { padding: 48px; flex-direction: row; align-items: center; } }
.hiring__content { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 16px; max-width: 768px; align-items: center; }
@media (min-width: 1024px) { .hiring__content { align-items: flex-start; gap: 32px; flex: 1 1 auto; min-width: 0; } }
.hiring__title {
  font-family: var(--font-heading); font-weight: 400; color: var(--white);
  font-size: 24px; line-height: 32px; text-align: center;
}
@media (min-width: 1024px) { .hiring__title { font-size: 48px; line-height: 52px; text-align: left; } }
.hiring__body { font-weight: 300; color: var(--white); font-size: 16px; line-height: 24px; text-align: center; }
@media (min-width: 1024px) { .hiring__body { font-size: 20px; line-height: 27px; text-align: left; } }
.hiring__lion-desktop { display: none; }
@media (min-width: 1024px) {
  .hiring__lion-desktop { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 320px; max-height: 260px; overflow: visible; }
  .hiring__lion-desktop img,
  .hiring__lion-desktop .bso-lottie { max-width: 100%; max-height: 260px; object-fit: contain; }
  /* Karakter-positie: verschuif de karakter-slot binnen de (hogere) banner. */
  .hiring__lion-desktop:has(img.mm-char--top),
  .hiring__lion-desktop:has(.bso-lottie.mm-char--top)    { align-self: flex-start; }
  .hiring__lion-desktop:has(img.mm-char--mid),
  .hiring__lion-desktop:has(.bso-lottie.mm-char--mid)    { align-self: center; }
  .hiring__lion-desktop:has(img.mm-char--bottom),
  .hiring__lion-desktop:has(.bso-lottie.mm-char--bottom) { align-self: flex-end; }
  /* Positie via slot-uitlijning; op de media alleen het formaat, verankerd onderaan. */
  .hiring__lion-desktop img.mm-char,
  .hiring__lion-desktop .bso-lottie.mm-char { transform: scale(var(--mm-char-scale, 1)) !important; transform-origin: center bottom !important; }
  /* Ruimere schaal-range specifiek voor de (kleine) karakter-slot, zodat
     "Groot"/"Extra groot" ook echt groot oogt. */
  .hiring__lion-desktop img.mm-char--sm, .hiring__lion-desktop .bso-lottie.mm-char--sm { --mm-char-scale: 1.1; }
  .hiring__lion-desktop img.mm-char--md, .hiring__lion-desktop .bso-lottie.mm-char--md { --mm-char-scale: 1.6; }
  .hiring__lion-desktop img.mm-char--lg, .hiring__lion-desktop .bso-lottie.mm-char--lg { --mm-char-scale: 2.1; }
  .hiring__lion-desktop img.mm-char--xl, .hiring__lion-desktop .bso-lottie.mm-char--xl { --mm-char-scale: 2.8; }
}
@media (min-width: 1280px) {
  .hiring__lion-desktop { width: 400px; max-height: 300px; }
  .hiring__lion-desktop img,
  .hiring__lion-desktop .bso-lottie { max-height: 300px; }
}
@media (min-width: 1536px) {
  .hiring__lion-desktop { width: 480px; max-height: 340px; }
  .hiring__lion-desktop img,
  .hiring__lion-desktop .bso-lottie { max-height: 340px; }
}

/* ── Karakter-animatie: formaat & positie (opt-in modifiers) ── */
.mm-char { transform: translateY(var(--mm-char-y, 0)) scale(var(--mm-char-scale, 1)) !important; transform-origin: center !important; }
.mm-char--sm { --mm-char-scale: 0.7; }
.mm-char--md { --mm-char-scale: 0.85; }
.mm-char--lg { --mm-char-scale: 1; }
.mm-char--xl { --mm-char-scale: 1.3; }
.mm-char--top { --mm-char-y: -14%; }
.mm-char--mid { --mm-char-y: 0; }
.mm-char--bottom { --mm-char-y: 14%; }

/* ── Sectie-iconen: Bootstrap Icons + Iconify (solar) ── */
.icon-rock__icon.bi, .feature-card__icon .bi, .card-square__icon .bi { font-size: 44px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
iconify-icon.icon-rock__icon { display: inline-flex; align-items: center; justify-content: center; }
.feature-card__icon iconify-icon { font-size: 34px; line-height: 1; display: inline-flex; }
.card-square__icon iconify-icon { font-size: 40px; line-height: 1; display: inline-flex; }
.btn__icon iconify-icon { font-size: 1.05em; line-height: 1; vertical-align: -0.15em; }

/* ── Hiring banner: achtergrondkleur varianten (zachte pastel gradients) ── */
.hiring__banner--bg-paars { background: linear-gradient(135deg, #d8b4f8 0%, #eddcfa 50%, #f3e8ff 100%); }
.hiring__banner--bg-groen { background: linear-gradient(135deg, #a3e4c1 0%, #c8f0dc 50%, #e6f9ef 100%); }
.hiring__banner--bg-geel { background: linear-gradient(135deg, #f5dc6e 0%, #fae9a0 50%, #fdf6d8 100%); }
.hiring__banner--bg-blauw { background: linear-gradient(135deg, #93c5fd 0%, #bfdbfe 50%, #e0effe 100%); }
.hiring__banner--bg-oranje { background: linear-gradient(135deg, #fdba74 0%, #fdd4a0 50%, #fef0db 100%); }
.hiring__banner--bg-roze { background: linear-gradient(135deg, #f9a8d4 0%, #fbc8e0 50%, #fee7f0 100%); }
.hiring__banner--bg-donkerblauw { background: linear-gradient(135deg, #7e9cc7 0%, #a8bdd9 50%, #d4e1ef 100%); }
.hiring__banner--bg-wit { background: #ffffff; border: 1px solid #e5e7eb; }
/* ── Hiring banner: tekst kleur varianten ── */
.hiring__banner--text-licht .hiring__title,
.hiring__banner--text-licht .hiring__body { color: var(--white); }
.hiring__banner--text-donker .hiring__title { color: #1a1a2e; }
.hiring__banner--text-donker .hiring__body { color: #374151; }

/* ════════════════════ DISCOVERY / BSO SLIDER ════════════════════ */
.discovery { margin-top: 80px; display: flex; flex-direction: column; gap: 32px; align-items: center; overflow: hidden; }
@media (min-width: 768px) { .discovery { margin-top: 112px; } }
@media (min-width: 1024px) { .discovery { margin-top: 160px; } }
@media (min-width: 640px) { .discovery { gap: 48px; } }
.discovery__layout { display: flex; flex-direction: column; gap: 24px; width: 100%; }
@media (min-width: 1024px) { .discovery__layout { flex-direction: row; gap: 32px; align-items: flex-start; } }

.discovery__tabs { display: none; flex-direction: column; gap: 32px; width: 304px; flex-shrink: 0; }
@media (min-width: 1024px) { .discovery__tabs { display: flex; } }
.tab-label {
  display: flex; flex-direction: column; gap: 8px; border: none; background: none;
  padding: 0; text-align: left; cursor: pointer; opacity: 0.25; transition: opacity 0.3s;
}
.tab-label--active { opacity: 1; }
.tab-label__tag {
  display: inline-flex; padding: 4px 6px; border-radius: 6px; align-self: flex-start;
  background: var(--yellow-cta); border: 1px solid var(--yellow-cta); transform: rotate(5deg);
  font-family: var(--font-heading); font-weight: 700; color: var(--purple-dark);
  font-size: 14px; line-height: 20px;
}
@media (min-width: 640px) { .tab-label__tag { font-size: 18px; line-height: 26px; } }
@media (min-width: 1024px) { .tab-label__tag { font-size: 24px; line-height: 32px; } }
.tab-label__sub {
  display: inline-flex; padding: 4px 6px; border-radius: 6px; margin-left: 12px; align-self: flex-start;
  background: var(--purple); font-family: var(--font-heading); font-weight: 700;
  color: var(--white); font-size: 14px; line-height: 20px;
}
@media (min-width: 640px) { .tab-label__sub { font-size: 18px; line-height: 26px; } }
@media (min-width: 1024px) { .tab-label__sub { font-size: 24px; line-height: 32px; } }

.discovery__slider { display: flex; align-items: flex-start; gap: 4px; width: 100%; position: relative; }
@media (min-width: 1024px) { .discovery__slider { flex: 1; align-items: center; } }
.chevron {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border: none; background: none; cursor: pointer; flex-shrink: 0; padding: 0;
  margin-top: 24px;
}
@media (min-width: 1024px) { .chevron { display: none; } }

.discovery__panel {
  flex: 1; display: grid; overflow: hidden; border-radius: var(--radius-md);
  background: rgba(255,206,45,0.1); border: 1px solid var(--white);
  box-shadow: 0 0 10px 4px rgba(0,0,0,0.05); min-width: 0;
}
.slide { grid-area: 1 / 1; padding: 24px; visibility: hidden; opacity: 0; transition: opacity 0.4s ease, visibility 0s 0.4s; display: flex; flex-direction: column; align-items: center; }
@media (min-width: 1024px) { .slide { align-items: flex-start; } }
@media (min-width: 768px) { .slide { padding: 32px; } }
@media (min-width: 1024px) { .slide { padding: 48px; } }
.slide--active { visibility: visible; opacity: 1; transition: opacity 0.4s ease, visibility 0s 0s; }
.slide__tab-mobile { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-bottom: 16px; }
@media (min-width: 1024px) { .slide__tab-mobile { display: none; } }
.slide__title {
  font-family: var(--font-heading); font-weight: 700; color: var(--purple-dark);
  font-size: 36px; line-height: 42px; text-align: center;
}
@media (min-width: 768px) { .slide__title { font-size: 48px; line-height: 52px; } }
@media (min-width: 1024px) { .slide__title { font-size: 60px; line-height: 64px; text-align: left; } }
.slide__body {
  font-weight: 300; color: #0b0b0b; font-size: 16px; line-height: 24px;
  text-align: center; margin-top: 16px; max-width: 495px;
}
@media (min-width: 768px) { .slide__body { font-size: 18px; line-height: 28px; } }
@media (min-width: 1024px) { .slide__body { font-size: 20px; line-height: 30px; text-align: left; } }
.slide__cta {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 16px;
  border: none; background: none; cursor: pointer; padding: 12px 8px 12px 16px;
  font-weight: 700; font-size: 18px; color: #0068ff; border-radius: var(--radius-md);
  align-self: center;
}
@media (min-width: 1024px) { .slide__cta { align-self: flex-start; } }
@media (min-width: 1024px) { .slide__cta { font-size: 20px; } }
.slide__cta img { width: 14px; height: 14px; }

.discovery__tree { display: none; }
@media (min-width: 1024px) {
  .discovery__tree { display: block; position: absolute; right: -48px; bottom: 0; width: 541px; height: 574px; pointer-events: none; }
  .discovery__tree img { width: 100%; height: 100%; object-fit: contain; transform: scaleY(-1) rotate(180deg); }
}

.discovery__dots { display: flex; gap: 12px; align-items: center; }
.dot {
  width: 20px; height: 20px; border-radius: 50%; background: #d9d9d9; border: 1px solid #bbb;
  padding: 0; cursor: pointer; transition: all 0.2s;
}
.dot--active { width: 24px; height: 24px; background: var(--purple-dark); border: none; }

/* ════════════════════ APP PROMOTION ════════════════════ */
.app-promo { margin-top: 80px; }
@media (min-width: 768px) { .app-promo { margin-top: 112px; } }
@media (min-width: 1024px) { .app-promo { margin-top: 160px; } }
.app-promo__cols { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 1024px) { .app-promo__cols { flex-direction: row; align-items: flex-start; } }
.app-promo__text { flex: 1; display: flex; flex-direction: column; gap: 32px; align-items: center; min-width: 0; }
@media (min-width: 1024px) { .app-promo__text { align-items: flex-start; } }
.app-promo__mockup-mobile { max-width: 240px; border-radius: var(--radius-md); overflow: hidden; margin-bottom: -16px; }
@media (min-width: 1024px) { .app-promo__mockup-mobile { display: none; } }
.app-promo__body { font-weight: 300; color: var(--body-text); font-size: 16px; line-height: 24px; text-align: center; }
@media (min-width: 1024px) { .app-promo__body { font-size: 20px; line-height: 30px; text-align: left; } }
.app-promo__badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
@media (min-width: 1024px) { .app-promo__badges { justify-content: flex-start; } }
.badge img { height: 48px; width: auto; }
.badge--gp { margin-left: -6px; }
.badge--gp img { height: 70px; }
.app-promo__mockup-desktop { display: none; }
@media (min-width: 1024px) {
  .app-promo__mockup-desktop { display: block; flex-shrink: 0; width: 415px; border-radius: var(--radius-md); overflow: hidden; }
  .app-promo__mockup-desktop img { width: 100%; border-radius: var(--radius-md); object-fit: cover; }
}

/* ════════════════════ BANNER GROEN (CTA + slang mascotte) ════════════════════ */
.banner-groen { margin-top: 80px; }
@media (min-width: 768px) { .banner-groen { margin-top: 112px; } }
@media (min-width: 1024px) { .banner-groen { margin-top: 160px; } }
.banner-groen__snake-mobile { display: flex; justify-content: center; margin-bottom: -20px; }
.banner-groen__snake-mobile img { width: 260px; object-fit: contain; }
@media (min-width: 1024px) { .banner-groen__snake-mobile { display: none; } }
.banner-groen__banner {
  position: relative; overflow: hidden; border-radius: var(--radius-md);
  padding: 24px; background: #00a651;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
}
@media (min-width: 768px) { .banner-groen__banner { padding: 32px; } }
@media (min-width: 1024px) { .banner-groen__banner { padding: 48px; flex-direction: row; } }
.banner-groen__content { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 16px; max-width: 680px; align-items: center; }
@media (min-width: 1024px) { .banner-groen__content { align-items: flex-start; gap: 24px; } }
.banner-groen__title {
  font-family: var(--font-heading); font-weight: 400; color: var(--white);
  font-size: 24px; line-height: 32px; text-align: center;
}
@media (min-width: 1024px) { .banner-groen__title { font-size: 48px; line-height: 52px; text-align: left; } }
.banner-groen__body { font-weight: 300; color: var(--white); font-size: 16px; line-height: 24px; text-align: center; }
@media (min-width: 1024px) { .banner-groen__body { font-size: 20px; line-height: 30px; text-align: left; } }
.banner-groen__ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.banner-groen__link { color: var(--white); font-weight: 700; font-size: 18px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.banner-groen__link:hover { text-decoration: underline; }
.banner-groen__link-icon img { width: 20px; height: 20px; filter: brightness(0) invert(1); }
.banner-groen__link-icon .bi { font-size: 20px; filter: brightness(0) invert(1); }
.banner-groen__snake-desktop { display: none; }
@media (min-width: 1024px) {
  .banner-groen__snake-desktop { display: block; position: relative; flex-shrink: 0; width: 300px; height: 180px; overflow: visible; }
  .banner-groen__snake-desktop img { position: absolute; width: 140%; height: auto; right: -20%; top: -60%; max-width: none; }
}
/* ── CTA banner: achtergrondkleur-varianten (zachte pastel gradients; modifier op de
   sectie-root, gelijk aan de section-map + editor-preview) ── */
.banner-groen--bg-paars .banner-groen__banner { background: linear-gradient(135deg, #d8b4f8 0%, #eddcfa 50%, #f3e8ff 100%); }
.banner-groen--bg-groen .banner-groen__banner { background: linear-gradient(135deg, #a3e4c1 0%, #c8f0dc 50%, #e6f9ef 100%); }
.banner-groen--bg-geel .banner-groen__banner { background: linear-gradient(135deg, #f5dc6e 0%, #fae9a0 50%, #fdf6d8 100%); }
.banner-groen--bg-blauw .banner-groen__banner { background: linear-gradient(135deg, #93c5fd 0%, #bfdbfe 50%, #e0effe 100%); }
.banner-groen--bg-oranje .banner-groen__banner { background: linear-gradient(135deg, #fdba74 0%, #fdd4a0 50%, #fef0db 100%); }
.banner-groen--bg-roze .banner-groen__banner { background: linear-gradient(135deg, #f9a8d4 0%, #fbc8e0 50%, #fee7f0 100%); }
.banner-groen--bg-donkerblauw .banner-groen__banner { background: linear-gradient(135deg, #7e9cc7 0%, #a8bdd9 50%, #d4e1ef 100%); }
.banner-groen--bg-wit .banner-groen__banner { background: #ffffff; border: 1px solid #e5e7eb; }
/* Zachte gradients zijn licht: donkere tekst voor leesbaarheid (gele knop blijft goud). */
.banner-groen[class*="--bg-"] .banner-groen__title,
.banner-groen[class*="--bg-"] .banner-groen__body,
.banner-groen[class*="--bg-"] .banner-groen__link { color: #1a1a2e; }
/* ── CTA banner: expliciete tekstkleur donker (voor de standaard groene achtergrond) ── */
.banner-groen--text-donker .banner-groen__title,
.banner-groen--text-donker .banner-groen__body,
.banner-groen--text-donker .banner-groen__link { color: #1a1a2e; }

/* ════════════════════ PROMO VIDEO (paarse sectie + Vimeo) ════════════════════ */
.promo-video {
  position: relative; background: var(--purple-dark); padding: 0; overflow: hidden;
  width: 100vw; margin-left: calc(-50vw + 50%);
}
.promo-video__inner {
  position: relative; z-index: 1;
  max-width: var(--max-page); margin: 0 auto;
  padding: 64px var(--px-mobile);
  display: flex; flex-direction: column; align-items: center; gap: 32px;
}
@media (min-width: 768px) { .promo-video__inner { padding: 80px var(--px-tablet); } }
@media (min-width: 1024px) { .promo-video__inner { padding: 100px var(--px-desktop); } }
.promo-video__player {
  position: relative; width: 100%; max-width: 960px; aspect-ratio: 16/9;
  border-radius: var(--radius-md); overflow: hidden; background: #000;
}
.promo-video__fallback {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.promo-video__play {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.25); border: none; cursor: pointer; transition: background 0.2s;
}
.promo-video__play:hover { background: rgba(0,0,0,0.15); }
.promo-video__play-circle {
  width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(4px); transition: transform 0.2s;
}
.promo-video__play:hover .promo-video__play-circle { transform: scale(1.08); }
.promo-video__play-circle svg { margin-left: 4px; }
.promo-video__iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: none; z-index: 10;
}
.promo-video::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
  background: var(--white); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 2;
}

/* ════════════════════ BOOKING TRAININ (paarse sectie + rooster) ════════════════════ */
.booking-trainin {
  position: relative; background: var(--purple-dark); padding: 0; overflow: hidden;
  width: 100vw; margin-left: calc(-50vw + 50%);
}
.booking-trainin__inner {
  position: relative; z-index: 1;
  max-width: var(--max-page); margin: 0 auto;
  padding: 64px var(--px-mobile) 104px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
@media (min-width: 768px) { .booking-trainin__inner { padding: 80px var(--px-tablet) 128px; } }
@media (min-width: 1024px) { .booking-trainin__inner { padding: 100px var(--px-desktop) 148px; } }
.booking-trainin__title { color: #fff; text-align: center; margin: 0; }
.booking-trainin__body {
  color: rgba(255,255,255,.92); text-align: center; max-width: 720px;
  font-weight: 300; font-size: 16px; line-height: 26px;
}
@media (min-width: 1024px) { .booking-trainin__body { font-size: 18px; line-height: 28px; } }
.booking-trainin__widget { width: 100%; max-width: 960px; margin-top: 8px; }
/* Interactief leeftijdsfilter (rooster type "Volledige regio + leeftijdsfilter"):
   pill-knoppen waarmee de bezoeker live tussen "Alle groepen" en een leeftijdsgroep wisselt. */
.booking-trainin__filter {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  width: 100%; max-width: 960px; margin: 0 auto;
}
.booking-trainin__filter-btn {
  appearance: none; cursor: pointer; font: inherit; font-weight: 500; font-size: 14px; line-height: 1;
  color: #fff; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.30);
  border-radius: 999px; padding: 10px 18px;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.booking-trainin__filter-btn:hover { background: rgba(255,255,255,.20); transform: translateY(-1px); }
.booking-trainin__filter-btn:focus-visible { outline: 2px solid var(--yellow-cta); outline-offset: 2px; }
.booking-trainin__filter-btn.is-active {
  background: var(--yellow-cta); border-color: var(--yellow-cta); color: var(--purple-dark); font-weight: 700;
}
.booking-trainin__filter + .booking-trainin__frame { margin-top: 16px; }
@media (min-width: 1024px) { .booking-trainin__filter-btn { font-size: 15px; padding: 11px 22px; } }
.booking-trainin__frame {
  position: relative; width: 100%; background: #fff; border-radius: var(--radius-md);
  overflow: hidden; box-shadow: 0 16px 40px rgba(0,0,0,.22); min-height: 340px;
}
.booking-trainin__iframe {
  display: block; width: 100%; min-height: 340px; height: clamp(340px, 46vh, 600px);
  max-height: 600px; border: 0; transition: height .25s ease;
}
.booking-trainin::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
  background: var(--white); border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 2;
}

/* ════════════════════ PLAY BANNER (app-promo variant) ════════════════════ */
.play-banner { margin-top: 80px; }
@media (min-width: 768px) { .play-banner { margin-top: 112px; } }
@media (min-width: 1024px) { .play-banner { margin-top: 160px; } }
.play-banner__cols { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 1024px) { .play-banner__cols { flex-direction: row; align-items: center; } }
.play-banner__text { flex: 1; display: flex; flex-direction: column; gap: 24px; align-items: center; min-width: 0; }
@media (min-width: 1024px) { .play-banner__text { align-items: flex-start; } }
.play-banner__subtitle {
  font-family: var(--font-body); font-weight: 400; font-style: italic;
  color: var(--purple-dark); font-size: 18px; line-height: 28px; text-align: center;
  margin-top: -8px;
}
@media (min-width: 1024px) { .play-banner__subtitle { font-size: 22px; line-height: 32px; text-align: left; } }
.play-banner__body { font-weight: 300; color: var(--body-text); font-size: 16px; line-height: 24px; text-align: center; }
@media (min-width: 1024px) { .play-banner__body { font-size: 20px; line-height: 30px; text-align: left; } }
.play-banner__ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.play-banner__link { color: var(--purple-dark); font-weight: 700; font-size: 18px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.play-banner__link:hover { text-decoration: underline; }
/* Mobiel: app-knoppen gecentreerd onder elkaar i.p.v. links uitgelijnd bij wrap. */
@media (max-width: 1023px) {
  .play-banner__ctas { flex-direction: column; align-items: center; width: 100%; }
}
.play-banner__mockup-mobile { max-width: 240px; border-radius: var(--radius-md); overflow: hidden; margin-bottom: -16px; }
@media (min-width: 1024px) { .play-banner__mockup-mobile { display: none; } }
.play-banner__mockup-desktop { display: none; }
@media (min-width: 1024px) {
  .play-banner__mockup-desktop {
    display: block; position: relative; flex-shrink: 0; width: 520px;
    display: flex; align-items: center; justify-content: center; min-height: 520px;
  }
}
.play-banner__blob {
  position: absolute; width: 460px; height: 460px; background: rgba(116,61,151,0.25);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  animation: morphBlob 16s ease-in-out infinite;
  z-index: 0;
}
.play-banner__mockup-desktop img {
  position: relative; z-index: 1; width: 400px; border-radius: var(--radius-md);
  object-fit: contain; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.15));
}
@media (min-width: 1024px) { .play-banner--media-left .play-banner__cols { flex-direction: row-reverse; } }

/* ════════════════════ THREE COLUMN TEXT ════════════════════ */
.three-col-text { margin-top: 60px; }
.three-col-text__grid {
  display: grid; grid-template-columns: 1fr; gap: 32px;
}
@media (min-width: 768px) { .three-col-text__grid { grid-template-columns: 1fr 1fr 1fr; gap: 40px; } }
.three-col-text__col { display: flex; flex-direction: column; gap: 10px; text-align: center; }
@media (min-width: 768px) { .three-col-text__col { text-align: left; } }
.three-col-text__heading {
  font-family: var(--font-body); font-weight: 700; color: var(--purple-dark);
  font-size: 18px; line-height: 26px;
}
@media (min-width: 768px) { .three-col-text__heading { font-size: 22px; line-height: 30px; } }
.three-col-text__body { font-weight: 300; color: var(--body-text); font-size: 15px; line-height: 24px; }
@media (min-width: 768px) { .three-col-text__body { font-size: 16px; line-height: 26px; } }
.three-col-text__body ul { display: inline-block; text-align: left; margin: 8px 0; padding-left: 20px; }
@media (min-width: 768px) { .three-col-text__body ul { display: block; } }
.three-col-text__body li { margin-bottom: 6px; }
.three-col-text__body strong { font-weight: 700; }

/* ════════════════════ TWO COLUMN TEXT ════════════════════ */
.two-col-text { margin-top: 60px; }
.two-col-text__header { text-align: center; margin-bottom: 32px; }
.two-col-text__subtitle {
  font-family: var(--font-body); font-weight: 400; color: #00a651;
  font-size: 18px; line-height: 28px; margin-top: 12px;
}
@media (min-width: 768px) { .two-col-text__subtitle { font-size: 22px; line-height: 32px; } }
.two-col-text__grid {
  display: grid; grid-template-columns: 1fr; gap: 32px;
}
@media (min-width: 768px) { .two-col-text__grid { grid-template-columns: 1fr 1fr; gap: 48px; } }
.two-col-text__body { font-weight: 300; color: var(--body-text); font-size: 16px; line-height: 26px; text-align: center; }
.two-col-text__body ul { display: inline-block; text-align: left; margin: 8px 0; padding-left: 20px; }
.two-col-text__body li { margin-bottom: 4px; }
@media (min-width: 768px) { .two-col-text__body { text-align: left; } .two-col-text__body ul { display: block; } }
@media (min-width: 1024px) { .two-col-text__body { font-size: 18px; line-height: 28px; } }

/* ════════════════════ COMPARE TABLE V2 (groene wave variant) ════════════════════ */
.compare-table-v2 {
  position: relative; margin-top: 0; padding: 80px 0 60px;
  background: rgba(151,221,198,0.25);
  margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%);
  padding-left: max(24px, calc(50vw - 600px)); padding-right: max(24px, calc(50vw - 600px));
}
.compare-table-v2__wave {
  position: absolute; top: -1px; left: 0; right: 0; height: 50px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 50' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0 H1440 V18 Q1380,50 1320,18 Q1260,50 1200,18 Q1140,50 1080,18 Q1020,50 960,18 Q900,50 840,18 Q780,50 720,18 Q660,50 600,18 Q540,50 480,18 Q420,50 360,18 Q300,50 240,18 Q180,50 120,18 Q60,50 0,18 Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat top center;
  background-size: 100% 50px;
  z-index: 1;
}
.compare-table-v2__header { text-align: center; margin-top: 48px; margin-bottom: 32px; }
.compare-table-v2__subtitle {
  font-family: var(--font-body); font-weight: 400; color: #5c0f8b;
  font-size: 18px; line-height: 28px; margin-top: 12px;
}
@media (min-width: 768px) { .compare-table-v2__subtitle { font-size: 22px; line-height: 32px; } }
.compare-table-v2__grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; border-radius: 8px; overflow: hidden;
}
.compare-table-v2__head {
  padding: 14px 16px; font-family: var(--font-body); font-weight: 700; font-size: 18px;
  line-height: 26px; color: #fff; background: #5c0f8b;
  border-bottom: 2px solid #5c0f8b;
}
.compare-table-v2__head--first { border-radius: 8px 0 0 0; }
.compare-table-v2__head--last { border-radius: 0 8px 0 0; }
.compare-table-v2__cell {
  padding: 12px 16px; font-family: var(--font-body); font-weight: 300; font-size: 16px;
  line-height: 24px; color: #414042; background: #fff;
  border-bottom: 1px solid rgba(151,221,198,0.3);
}
/* Alternating row colors: 3 headers + 3-col grid, even data rows get cream bg */
/* Headers = children 1-3, data row 1 = 4-6 (white), row 2 = 7-9 (cream), row 3 = 10-12 (white), etc. */
.compare-table-v2__cell:nth-child(6n+7),
.compare-table-v2__cell:nth-child(6n+8),
.compare-table-v2__cell:nth-child(6n+9) { background: var(--yellow-light); }
.compare-table-v2__cell--last { border-radius: 0 0 0 8px; border-bottom: none; }
.compare-table-v2__cell--last-right { border-radius: 0 0 8px 0; border-bottom: none; }
@media (max-width: 767px) {
  .compare-table-v2__grid {
    grid-template-columns: minmax(140px,1.2fr) minmax(120px,1fr) minmax(120px,1fr);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: 8px;
  }
  .compare-table-v2__head { font-size: 13px; line-height: 18px; padding: 10px 10px; }
  .compare-table-v2__head--first { border-radius: 8px 0 0 0; }
  .compare-table-v2__head--last { border-radius: 0 8px 0 0; }
  .compare-table-v2__cell { font-size: 13px; line-height: 19px; padding: 10px 10px; font-weight: 400; }
  .compare-table-v2__cell--last { border-radius: 0 0 0 8px; border-bottom: none; }
  .compare-table-v2__cell--last-right { border-radius: 0 0 8px 0; border-bottom: none; }
}

/* ════════════════════ CONTACT PAGE ════════════════════ */
.contact-hero { text-align: center; padding-top: 24px; }
.contact-hero__inner { max-width: 640px; margin: 0 auto; }
.contact-hero__intro {
  font-weight: 300; color: var(--body-text); font-size: 16px; line-height: 26px;
  margin-top: 16px; text-align: center;
}
@media (min-width: 768px) { .contact-hero__intro { font-size: 18px; line-height: 28px; } }

/* Regio algemeen contact */
.contact-regio { margin-top: 48px; text-align: center; }
.contact-regio__inner { max-width: 720px; margin: 0 auto; }
.contact-regio__title {
  font-family: var(--font-heading); font-weight: 400; color: var(--purple-dark);
  font-size: 22px; line-height: 28px; margin: 0;
}
@media (min-width: 768px) { .contact-regio__title { font-size: 28px; line-height: 34px; } }
.contact-regio__sub {
  font-weight: 300; color: var(--body-text); font-size: 15px; line-height: 24px; margin-top: 8px;
}
.contact-regio__methods {
  display: flex; flex-direction: column; gap: 12px; margin-top: 24px;
}
@media (min-width: 600px) { .contact-regio__methods { flex-direction: row; justify-content: center; gap: 16px; } }

.contact-method {
  display: flex; align-items: center; gap: 14px; padding: 16px 20px;
  background: #fff; border: 1px solid rgba(116,61,151,0.12); border-radius: 12px;
  text-decoration: none; color: var(--body-text); transition: box-shadow 0.2s, border-color 0.2s;
}
.contact-method:hover { border-color: var(--purple); box-shadow: 0 4px 16px rgba(116,61,151,0.12); }
.contact-method--whatsapp { border-color: rgba(37,211,102,0.2); }
.contact-method--whatsapp:hover { border-color: #25d366; box-shadow: 0 4px 16px rgba(37,211,102,0.15); }
.contact-method__icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: rgba(116,61,151,0.08); color: var(--purple-dark);
}
.contact-method--whatsapp .contact-method__icon { background: rgba(37,211,102,0.1); color: #25d366; }
.contact-method__info { display: flex; flex-direction: column; text-align: left; min-width: 0; }
.contact-method__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(0,0,0,0.45); }
.contact-method__value { font-size: 15px; font-weight: 500; color: var(--purple-dark); overflow: hidden; text-overflow: ellipsis; }
.contact-method--whatsapp .contact-method__value { color: #128c7e; }

/* BSO locatie contact kaarten */
.contact-locaties { margin-top: 64px; text-align: center; }
@media (min-width: 768px) { .contact-locaties { margin-top: 80px; } }
.contact-locaties__grid {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  justify-content: center;
}
@media (min-width: 600px) { .contact-locaties__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 420px)); } }
@media (min-width: 1024px) { .contact-locaties__grid { gap: 28px; } }

.contact-card {
  background: #fff; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(116,61,151,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  transition: box-shadow 0.25s, transform 0.25s;
  display: flex; flex-direction: column;
  width: 100%; max-width: 420px;
}
.contact-card:hover { box-shadow: 0 8px 32px rgba(116,61,151,0.12); transform: translateY(-2px); }

.contact-card__photo {
  display: block; height: 180px; overflow: hidden; background: #f0e8f5;
}
@media (min-width: 768px) { .contact-card__photo { height: 200px; } }
.contact-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.contact-card:hover .contact-card__photo img { transform: scale(1.04); }
.contact-card__photo--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #f3e8ff 0%, #eddcfa 100%);
}
.contact-card__photo--placeholder img { width: 100px; height: auto; object-fit: contain; }

.contact-card__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; text-align: left; }
.contact-card__name {
  font-family: var(--font-heading); font-weight: 400; font-size: 20px; line-height: 26px;
  color: var(--purple-dark); text-decoration: none;
}
.contact-card__name:hover { text-decoration: underline; }
.contact-card__address {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 14px; line-height: 20px; color: #666; margin: 0;
}
.contact-card__address svg { flex-shrink: 0; margin-top: 2px; color: var(--purple); opacity: 0.6; }

.contact-card__links { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.contact-card__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--purple-dark); text-decoration: none; font-weight: 500;
  transition: color 0.15s;
}
.contact-card__link:hover { color: var(--purple); text-decoration: underline; }
.contact-card__link svg { flex-shrink: 0; color: var(--purple); opacity: 0.7; }
.contact-card__link--wa { color: #128c7e; }
.contact-card__link--wa:hover { color: #25d366; }
.contact-card__link--wa svg { color: #25d366; opacity: 1; }

/* ════════════════════ FOOTER ════════════════════ */
.site-footer {
  margin-top: 80px; border-radius: var(--radius-md); overflow: hidden;
  background: var(--purple); padding: 24px 20px; color: var(--white);
}
@media (min-width: 768px) { .site-footer { margin-top: 112px; } }
@media (min-width: 1024px) { .site-footer { margin-top: 160px; } }
@media (min-width: 768px) { .site-footer { padding: 28px 32px; } }
@media (min-width: 1024px) { .site-footer { padding: 32px 48px; } }
.footer__main { display: flex; flex-direction: column; gap: 24px; align-items: center; }
@media (min-width: 1024px) { .footer__main { flex-direction: row; gap: 80px; align-items: flex-start; } }
.footer__left { display: flex; flex-direction: column; gap: 16px; align-items: center; flex-shrink: 0; }
@media (min-width: 1024px) { .footer__left { align-items: flex-start; gap: 24px; } }
.footer__logo { width: 180px; }
@media (min-width: 640px) { .footer__logo { width: 220px; } }
@media (min-width: 1024px) { .footer__logo { width: 253px; } }
.footer__logo img { width: 100%; object-fit: contain; }
.footer__address { text-align: center; font-size: 14px; line-height: 1.4; }
@media (min-width: 1024px) { .footer__address { text-align: left; font-size: 20px; } }
.footer__address-title { font-weight: 700; }
.footer__contact { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
@media (min-width: 1024px) { .footer__contact { flex-direction: column; gap: 8px; align-items: flex-start; } }
.footer__contact-link { display: flex; gap: 8px; align-items: center; text-decoration: none; font-weight: 700; font-size: 16px; transition: opacity 0.2s; }
.footer__contact-link:hover { opacity: 0.7; }
@media (min-width: 1024px) { .footer__contact-link { font-size: 20px; } }
.footer__contact-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; transform: rotate(90deg); }
.footer__contact-icon img { width: 20px; height: 20px; transform: rotate(-45deg); }
.footer__divider-mobile { height: 1px; background: rgba(255,255,255,0.2); width: 100%; }
@media (min-width: 1024px) { .footer__divider-mobile { display: none; } }
.footer__columns { flex: 1; display: flex; flex-direction: column; gap: 24px; width: 100%; min-width: 0; }
@media (min-width: 1024px) { .footer__columns { gap: 32px; } }
.footer__link-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
@media (min-width: 640px) { .footer__link-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; } }
.footer__col { display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 1024px) { .footer__col { gap: 8px; } }
.footer__col-title { font-weight: 700; font-size: 14px; }
@media (min-width: 1024px) { .footer__col-title { font-size: 20px; } }
.footer__col a { text-decoration: none; font-weight: 300; font-size: 12px; color: rgba(255,255,255,0.8); line-height: 1.5; transition: opacity 0.2s; display: block; }
.footer__col a:hover { opacity: 0.7; }
@media (min-width: 1024px) { .footer__col a { font-size: 20px; } }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; font-weight: 300; font-size: 12px; line-height: 30px; margin-top: 24px; }
@media (min-width: 640px) { .footer__bottom { gap: 32px; font-size: 14px; } }
@media (min-width: 1024px) { .footer__bottom { font-size: 20px; margin-top: 32px; } }

/* === FAQ Accordion === */
.faq { display: flex; flex-direction: column; margin: 0 auto; }
.faq__item {
  border-bottom: 1px solid #d4d4d4; padding-bottom: 16px; margin-bottom: 16px;
}
.faq__header {
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  gap: 16px;
}
.faq__question {
  font-family: var(--font-body); font-weight: 700; font-size: 20px;
  line-height: 30px; color: #0b0b0b; margin: 0;
}
/* Subtiel CSS-getekend +/- (dunne lijn i.p.v. grof SVG-icoon). De verticale lijn
   verdwijnt en draait weg bij een open item, zodat het + soepel een - wordt. */
.faq__toggle { position: relative; width: 24px; height: 24px; flex-shrink: 0; }
.faq__toggle::before,
.faq__toggle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: var(--purple); border-radius: 2px;
  transform: translate(-50%, -50%);
}
.faq__toggle::before { width: 15px; height: 1.5px; }
.faq__toggle::after {
  width: 1.5px; height: 15px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.faq__item--open .faq__toggle::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .faq__toggle::after { transition: none; } }
.faq__answer {
  max-height: 0; overflow: hidden; transition: max-height 0.35s ease, opacity 0.3s ease;
  opacity: 0;
}
.faq__item--open .faq__answer { max-height: 300px; opacity: 1; padding-top: 24px; }
.faq__answer p {
  font-family: var(--font-body); font-weight: 300; font-size: 20px;
  line-height: 30px; color: #0b0b0b; margin: 0;
}

/* === Nav Menu Items === */
.nav-menu-item {
  display: flex; align-items: center; justify-content: center;
  height: 59px; padding: 12px 16px 0; position: relative;
  font-family: var(--font-body); font-weight: 700; font-size: 20px;
  color: #fff; cursor: pointer; white-space: nowrap;
  border-bottom: 3px solid transparent; transition: border-color 0.2s, color 0.2s;
}
.nav-menu-item:hover, .nav-menu-item--hover { border-bottom-color: #fff; }
.nav-menu-item--active { color: #ffce2d; border-bottom-color: #ffce2d; }

/* === Header Home === */
.header-home {
  display: flex; flex-direction: column; gap: 32px;
}
@media (min-width: 1024px) { .header-home { flex-direction: row; height: 856px; } }
.header-home__hero {
  position: relative; border-radius: 16px; overflow: hidden;
  min-height: 400px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 32px;
}
@media (min-width: 1024px) { .header-home__hero { width: 864px; flex-shrink: 0; } }
.header-home__hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.header-home__hero-overlay {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  gap: 16px; padding: 16px; color: #fff;
}
.header-home__title {
  font-family: var(--font-heading); font-size: 48px; line-height: 56px;
  color: #fff; margin: 0;
}
@media (min-width: 1024px) { .header-home__title { font-size: 72px; line-height: 84px; } }
.header-home__subtitle {
  font-family: var(--font-body); font-size: 24px; line-height: 32px;
  color: #fff; margin: 0;
}
@media (min-width: 1024px) { .header-home__subtitle { font-size: 32px; line-height: 40px; } }
.header-home__body {
  font-family: var(--font-body); font-weight: 400; font-size: 18px;
  line-height: 30px; color: #fff; margin: 0;
}
@media (min-width: 1024px) { .header-home__body { font-size: 20px; } }
.header-home__cards {
  display: flex; flex-direction: column; gap: 32px;
}
@media (min-width: 1024px) { .header-home__cards { flex: 1; justify-content: center; } }
.header-home__card {
  position: relative; border-radius: 12px; overflow: hidden;
  padding: 32px; display: flex; flex-direction: column; gap: 24px;
  min-height: 180px; background: rgba(151,221,198,0.5);
}
.header-home__card-vector {
  position: absolute; top: -91px; left: -259px; width: 879px; height: 649px;
  pointer-events: none; opacity: 0.15;
}
.header-home__card-content { position: relative; z-index: 1; }
.header-home__card-title {
  font-family: var(--font-heading); font-size: 28px; line-height: 32px;
  color: #3e320d; margin: 0 0 16px;
}
@media (min-width: 1024px) { .header-home__card-title { font-size: 40px; line-height: 40px; } }
.header-home__card-body {
  font-family: var(--font-body); font-weight: 300; font-size: 18px;
  line-height: 32px; color: #3e320d; margin: 0;
}
@media (min-width: 1024px) { .header-home__card-body { font-size: 20px; } }

/* === Header Landingspage === */
.header-lp {
  display: flex; flex-direction: column; gap: 32px;
}
@media (min-width: 1024px) { .header-lp { gap: 64px; } }
.header-lp__title {
  font-family: var(--font-heading); font-size: 48px; line-height: 56px;
  color: #5c0f8b; text-align: center; margin: 0;
}
@media (min-width: 1024px) { .header-lp__title { font-size: 72px; line-height: 84px; } }
.header-lp__cols {
  display: flex; flex-direction: column; gap: 32px;
}
@media (min-width: 1024px) { .header-lp__cols { flex-direction: row; } }
.header-lp__media {
  border-radius: 16px; overflow: hidden; flex-shrink: 0;
}
@media (min-width: 1024px) { .header-lp__media { width: 752px; height: 752px; } }
.header-lp__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.header-lp__info {
  flex: 1; display: flex; flex-direction: column; gap: 32px;
}
.header-lp__info-subtitle {
  font-family: var(--font-body); font-size: 24px; line-height: 28px;
  color: var(--green-text); margin: 0; text-align: center;
}
@media (min-width: 1024px) { .header-lp__info-subtitle { font-size: 32px; line-height: 36px; text-align: left; } }
.header-lp__ctas {
  display: flex; flex-direction: column; gap: 16px;
}

/* Rectangular hero variant (no blob, 2/3 photo + 1/3 green card) */
.header-lp--rect .header-lp__cols { align-items: stretch; }
@media (min-width: 1024px) {
  .header-lp--rect .header-lp__media { width: auto; height: auto; flex: 2 1 0; min-width: 0; }
  .header-lp--rect .header-lp__info { flex: 1 1 0; min-width: 0; }
}
.header-lp--rect .header-lp__media { position: relative; }
.header-lp--rect .header-lp__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.header-lp--rect .header-lp__slideshow { position: absolute; inset: 0; max-width: none; aspect-ratio: auto; border-radius: 16px; }
.header-lp--rect .header-lp__slideshow img { border-radius: 0; }

/* === Header Location Finder === */
.header-locfinder__cols {
  display: flex; flex-direction: column; gap: 32px;
}
@media (min-width: 1024px) { .header-locfinder__cols { flex-direction: row; } }
.header-locfinder__map {
  border-radius: 16px; overflow: hidden; flex-shrink: 0;
}
@media (min-width: 1024px) { .header-locfinder__map { width: 864px; height: 1220px; } }
.header-locfinder__map img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.header-locfinder__sidebar {
  flex: 1; display: flex; flex-direction: column; gap: 32px; justify-content: center;
}
.header-locfinder__search {
  background: #fff; border-radius: 12px; padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.header-locfinder__title {
  font-family: var(--font-heading); font-size: 48px; line-height: 56px;
  color: #5c0f8b; margin: 0;
}
@media (min-width: 1024px) { .header-locfinder__title { font-size: 72px; line-height: 84px; } }
.header-locfinder__desc {
  font-family: var(--font-body); font-weight: 300; font-size: 20px;
  line-height: 30px; color: #515151; margin: 0;
}
.header-locfinder__inputs {
  display: flex; gap: 16px;
}
.header-locfinder__input {
  width: 67px; height: 60px; border: 1px solid rgba(0,0,0,0.14);
  border-radius: 8px; text-align: center; font-family: var(--font-body);
  font-size: 24px; color: #515151; outline: none;
}
.header-locfinder__input--active { border-color: #5c0f8b; }
.header-locfinder__info { flex: 1; }

/* ════════════════════ CARD SQUARE ════════════════════ */
.card-square {
  position: relative; border-radius: 12px; overflow: hidden;
  width: 304px; height: 304px; padding: 32px;
  display: flex; flex-direction: column; gap: 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-square:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(92,15,139,0.15); }
.card-square__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 12px;
}
.card-square__overlay {
  position: absolute; inset: 0; border-radius: 12px;
  background: linear-gradient(to bottom, rgba(92,15,139,0.15) 49.62%, rgba(92,15,139,0.5) 70.55%);
  mix-blend-mode: multiply;
}
.card-square__icon {
  position: relative; z-index: 1; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.card-square__icon img { width: 100%; height: 100%; }
.card-square__content {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  gap: 24px; color: #fff; margin-top: auto;
}
.card-square__title {
  font-family: var(--font-body); font-size: 32px; line-height: 32px;
  font-weight: 400; margin: 0;
}
.card-square__body {
  font-family: var(--font-body); font-weight: 300; font-size: 20px;
  line-height: 30px; margin: 0;
}

/* ════════════════════ CARD TALL ════════════════════ */
.card-tall {
  background: var(--purple-dark); border-radius: 12px; overflow: hidden;
  width: 304px; display: flex; flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-tall:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(92,15,139,0.2); }
.card-tall__photo {
  position: relative; width: 100%; height: 320px; overflow: hidden;
  border-top-left-radius: 12px; border-top-right-radius: 12px;
  border-bottom-left-radius: 100px; border-bottom-right-radius: 200px;
  animation: cardTallWave 8s ease-in-out infinite;
}
.card-tall__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.card-tall__photo-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 49.62%, rgba(0,0,0,0.5) 70.55%);
  mix-blend-mode: multiply;
  border-bottom-left-radius: 100px; border-bottom-right-radius: 200px;
  animation: cardTallWave 8s ease-in-out infinite;
}
.card-tall__icon {
  position: absolute; top: 32px; left: 32px; z-index: 1;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.card-tall__icon img { width: 100%; height: 100%; }
.card-tall__content {
  display: flex; flex-direction: column; gap: 24px;
  padding: 24px; color: #fff;
}
.card-tall__title {
  font-family: var(--font-body); font-size: 32px; line-height: 32px;
  font-weight: 400; margin: 0;
}
.card-tall__body {
  font-family: var(--font-body); font-weight: 300; font-size: 20px;
  line-height: 30px; margin: 0;
}

/* ════════════════════ CARD MEDIUM ════════════════════ */
.card-medium {
  background: var(--purple-dark); border-radius: 12px; overflow: hidden;
  width: 304px; display: flex; flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-medium:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(92,15,139,0.2); }
.card-medium__wave {
  position: relative; width: 100%; height: 216px; overflow: hidden;
}
.card-medium__wave > img {
  width: 100%; height: 100%; display: block;
}
.card-medium__icon {
  position: absolute; top: 32px; left: 32px; z-index: 1;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
}
.card-medium__icon img { width: 100%; height: 100%; }
.card-medium__content {
  display: flex; flex-direction: column; gap: 24px;
  padding: 24px; color: #fff;
}
.card-medium__title {
  font-family: var(--font-body); font-size: 32px; line-height: 32px;
  font-weight: 400; margin: 0;
}
.card-medium__body {
  font-family: var(--font-body); font-weight: 300; font-size: 20px;
  line-height: 30px; margin: 0;
}

/* ════════════════════ CARD GRID (shared container for card sections) ════════════════════ */
.card-grid-section { padding: 64px 0; }
.card-grid-section__title {
  font-family: var(--font-heading); font-size: 48px; line-height: 1.1;
  color: var(--purple); text-align: center; margin: 0 0 48px;
}
.card-grid {
  display: grid; gap: 32px; max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--page-px);
}
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
.card-grid--4 .card-square,
.card-grid--4 .card-tall,
.card-grid--4 .card-medium { width: 100%; }
/* Card-text variant: 2/3 text + 1/3 card */
.card-text-section { padding: 64px 0; }
.card-text-section__inner {
  display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: center;
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--page-px);
}
.card-text-section__content { display: flex; flex-direction: column; gap: 24px; }
.card-text-section__title {
  font-family: var(--font-heading); font-size: 40px; line-height: 1.1;
  color: var(--purple); margin: 0;
}
.card-text-section__body {
  font-family: var(--font-body); font-size: 18px; line-height: 1.6;
  color: #333; margin: 0;
}
.card-text-section__card { display: flex; justify-content: center; }
.card-text-section__card .card-square,
.card-text-section__card .card-tall,
.card-text-section__card .card-medium { width: 100%; max-width: 360px; }
/* Kaart+tekst: knop niet full-width, witte visual-icoon, layout-varianten (positie + verdeling). */
.card-text-section__content .btn { align-self: flex-start; }
.card-square__icon img { filter: brightness(0) invert(1); }
.card-square__icon .bi, .card-square__icon iconify-icon { color: #fff; }
@media (min-width: 1025px) {
  .card-text-section--5050 .card-text-section__inner { grid-template-columns: 1fr 1fr; }
  .card-text-section--7525 .card-text-section__inner { grid-template-columns: 3fr 1fr; }
  .card-text-section--reversed .card-text-section__inner { grid-template-columns: 1fr 2fr; }
  .card-text-section--reversed.card-text-section--5050 .card-text-section__inner { grid-template-columns: 1fr 1fr; }
  .card-text-section--reversed.card-text-section--7525 .card-text-section__inner { grid-template-columns: 1fr 3fr; }
  .card-text-section--reversed .card-text-section__content { order: 2; }
  .card-text-section--reversed .card-text-section__card { order: 1; }
  /* Visual is beeldvullend binnen zijn kolom (breedte + hoogte), ongeacht de verdeling. */
  .card-text-section__card { align-items: stretch; }
  .card-text-section__card .card-square,
  .card-text-section__card .card-tall,
  .card-text-section__card .card-medium { max-width: none; width: 100%; height: 100%; min-height: 304px; }
}

@media (max-width: 1024px) {
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .card-text-section__inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .card-grid--4 { grid-template-columns: 1fr; }
  .card-grid-section__title { font-size: 32px; }
  .card-text-section__title { font-size: 28px; }
}

/* === Section Reveal Animations (staggered children) === */
/* Header Home: hero slide-in left, cards stagger from right */
.header-home__hero {
  opacity: 0; transform: translateX(-32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.header-home.revealed .header-home__hero { opacity: 1; transform: translateX(0); }
.header-home__card {
  opacity: 0; transform: translateX(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.header-home.revealed .header-home__card:nth-child(1) { transition-delay: 0.15s; opacity: 1; transform: translateX(0); }
.header-home.revealed .header-home__card:nth-child(2) { transition-delay: 0.3s; opacity: 1; transform: translateX(0); }
.header-home.revealed .header-home__card:nth-child(3) { transition-delay: 0.45s; opacity: 1; transform: translateX(0); }

/* Header LP: title fade-down, cols fade-up */
.header-lp__title {
  opacity: 0; transform: translateY(-16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.header-lp.revealed .header-lp__title { opacity: 1; transform: translateY(0); }
.header-lp__cols {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s;
}
.header-lp.revealed .header-lp__cols { opacity: 1; transform: translateY(0); }

/* Header Locfinder: map fade-in, sidebar slide from right */
.header-locfinder__map {
  opacity: 0; transform: translateX(-24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.header-locfinder.revealed .header-locfinder__map { opacity: 1; transform: translateX(0); }
.header-locfinder__sidebar {
  opacity: 0; transform: translateX(24px);
  transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
}
.header-locfinder.revealed .header-locfinder__sidebar { opacity: 1; transform: translateX(0); }

/* Stat Grid: staggered pop-in */
.stat-grid--4 .stat-card {
  opacity: 0; transform: translateY(16px) scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.stat-grid--4.revealed .stat-card:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0) scale(1); }
.stat-grid--4.revealed .stat-card:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0) scale(1); }
.stat-grid--4.revealed .stat-card:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0) scale(1); }
.stat-grid--4.revealed .stat-card:nth-child(4) { transition-delay: 0.3s; opacity: 1; transform: translateY(0) scale(1); }

/* FAQ items: stagger fade-in */
.faq[data-reveal] { transform: none; }
.faq__item {
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.faq.revealed .faq__item:nth-child(1) { transition-delay: 0s; opacity: 1; transform: translateY(0); }
.faq.revealed .faq__item:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
.faq.revealed .faq__item:nth-child(3) { transition-delay: 0.24s; opacity: 1; transform: translateY(0); }
.faq.revealed .faq__item:nth-child(4) { transition-delay: 0.36s; opacity: 1; transform: translateY(0); }
.faq.revealed .faq__item:nth-child(n+5) { transition-delay: 0.48s; opacity: 1; transform: translateY(0); }

/* Partners: rustige fade-in van de hele balk (slider-content is dynamisch). */
.partners { opacity: 0; transition: opacity 0.5s ease; }
.partners.revealed { opacity: 1; }

/* USP Banner: content slide-in, mascot bounce */
.usp-banner__content {
  opacity: 0; transform: translateX(-24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.usp-banner.revealed .usp-banner__content { opacity: 1; transform: translateX(0); }
.usp-banner__mascot {
  opacity: 0; transform: translateY(32px);
  transition: opacity 0.5s ease 0.3s, transform 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.3s;
}
.usp-banner.revealed .usp-banner__mascot { opacity: 1; transform: translateY(0); }

/* === Animations === */
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes slideOut { from { transform: translateX(0); } to { transform: translateX(100%); } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes stat-pop { 0%{transform:scale(1)} 40%{transform:scale(1.2)} 70%{transform:scale(0.95)} 100%{transform:scale(1)} }
@keyframes bsoSlideIn { 0%{opacity:0;transform:translateX(60px)} 100%{opacity:1;transform:translateX(0)} }
@keyframes btn-bob { 0%{transform:translateY(0)} 50%{transform:translateY(-2px)} 100%{transform:translateY(0)} }
@keyframes morphBlob {
  0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
  25%      { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }
  50%      { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
  75%      { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }
}
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes iconBounce {
  0% { transform: translateY(0) scale(1); }
  20% { transform: translateY(-12px) scale(1.1); }
  40% { transform: translateY(0) scale(0.95); }
  60% { transform: translateY(-5px) scale(1.03); }
  80% { transform: translateY(0) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes blobMorph1 {
  0%, 100% { border-radius: 56% 44% 52% 48% / 48% 54% 46% 52%; transform: scale(1); }
  33%      { border-radius: 52% 48% 48% 52% / 55% 45% 52% 48%; transform: scale(1.01); }
  66%      { border-radius: 48% 52% 55% 45% / 46% 54% 50% 50%; transform: scale(0.99); }
}
@keyframes blobMorph2 {
  0%, 100% { border-radius: 48% 52% 46% 54% / 54% 46% 52% 48%; transform: scale(1); }
  33%      { border-radius: 52% 48% 52% 48% / 46% 54% 48% 52%; transform: scale(0.99); }
  66%      { border-radius: 54% 46% 48% 52% / 52% 48% 54% 46%; transform: scale(1.01); }
}
@keyframes blobMorph3 {
  0%, 100% { border-radius: 52% 48% 56% 44% / 46% 52% 48% 52%; transform: scale(1); }
  33%      { border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%; transform: scale(1.01); }
  66%      { border-radius: 55% 45% 46% 54% / 48% 52% 53% 47%; transform: scale(0.99); }
}

@keyframes blobMorph4 {
  0%, 100% { border-radius: 44% 56% 48% 52% / 54% 46% 50% 50%; transform: scale(1); }
  33%      { border-radius: 50% 50% 44% 56% / 48% 52% 55% 45%; transform: scale(1.01); }
  66%      { border-radius: 56% 44% 52% 48% / 45% 55% 48% 52%; transform: scale(0.99); }
}

@keyframes cardTallWave {
  0%, 100% {
    border-radius: 12px 12px 100px 200px;
  }
  33% {
    border-radius: 12px 12px 130px 160px;
  }
  66% {
    border-radius: 12px 12px 170px 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .toucan { transition: none; }
  .mobile-menu__panel { animation: none; }
  .active-bso__shape { animation: none; }
  .icon-rock__blob { animation: none !important; opacity: 1 !important; transform: scale(1) !important; }
  .icon-rock__icon { opacity: 1 !important; transform: none !important; }
  .team-card--blob .team-card__photo { animation: none !important; }
  .card-tall__photo, .card-tall__photo-overlay { animation: none !important; }
  .header-home__hero, .header-home__card,
  .header-lp__title, .header-lp__cols,
  .header-locfinder__map, .header-locfinder__sidebar,
  .stat-grid--4 .stat-card,
  .faq__item,
  .partners,
  .usp-banner__content, .usp-banner__mascot {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .partners--marquee .partners__track { animation: none !important; }
}

/* === Full-width background (set via Page Builder section settings) === */
/* Extends section background to full viewport width via negative margins.
   Compensating padding keeps content at original width.
   Requires html,body { overflow-x: hidden } to prevent scrollbar. */
.section-full-width-bg {
  position: relative;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: calc(50vw - 50% + var(--fw-pad-left, 0px)) !important;
  padding-right: calc(50vw - 50% + var(--fw-pad-right, 0px)) !important;
  box-sizing: border-box;
}

/* === Background image on section (set via Page Builder section settings) === */
.section-bg-image {
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
}
/* Fallback: if the image is smaller than the section, tile it or show bg-color behind */
.section-bg-image.section-bg-cover {
  background-size: cover;
  background-position: center;
}
/* Animated wave background — gentle horizontal drift */
@keyframes bg-wave-drift {
  0%   { background-position: 0% top; }
  50%  { background-position: 3% top; }
  100% { background-position: 0% top; }
}
.section-bg-animate {
  background-size: 110% auto !important;
  background-repeat: repeat-x !important;
  animation: bg-wave-drift 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .section-bg-animate { animation: none; background-size: 100% auto !important; }
}

/* === Wave decoration classes (set via Page Builder section settings) === */
.wave-ellipse-bottom,
.wave-ellipse-top,
.wave-scallop-top,
.wave-scallop-bottom,
.wave-ellipse-both {
  position: relative; overflow: hidden;
}
/* Ellipse bottom — smooth curve at bottom edge (white) */
.wave-ellipse-bottom::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
  background: #fff; clip-path: ellipse(55% 100% at 50% 100%); z-index: 2; pointer-events: none;
}
@media (min-width: 768px) { .wave-ellipse-bottom::after { height: 80px; } }
@media (min-width: 1024px) { .wave-ellipse-bottom::after { height: 100px; } }

/* Ellipse top — smooth curve at top edge (white) */
.wave-ellipse-top::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 60px;
  background: #fff; clip-path: ellipse(55% 100% at 50% 0%); z-index: 2; pointer-events: none;
}
@media (min-width: 768px) { .wave-ellipse-top::before { height: 80px; } }
@media (min-width: 1024px) { .wave-ellipse-top::before { height: 100px; } }

/* Ellipse both — curves at top and bottom */
.wave-ellipse-both::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 60px;
  background: #fff; clip-path: ellipse(55% 100% at 50% 0%); z-index: 2; pointer-events: none;
}
.wave-ellipse-both::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px;
  background: #fff; clip-path: ellipse(55% 100% at 50% 100%); z-index: 2; pointer-events: none;
}
@media (min-width: 768px) { .wave-ellipse-both::before, .wave-ellipse-both::after { height: 80px; } }
@media (min-width: 1024px) { .wave-ellipse-both::before, .wave-ellipse-both::after { height: 100px; } }

/* Scallop top — rounded scallop wave at top (white, like bg-green-wave) */
.wave-scallop-top::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1440 40'%3E%3Cpath d='M0,0 Q36,40 72,0 Q108,40 144,0 Q180,40 216,0 Q252,40 288,0 Q324,40 360,0 Q396,40 432,0 Q468,40 504,0 Q540,40 576,0 Q612,40 648,0 Q684,40 720,0 Q756,40 792,0 Q828,40 864,0 Q900,40 936,0 Q972,40 1008,0 Q1044,40 1080,0 Q1116,40 1152,0 Q1188,40 1224,0 Q1260,40 1296,0 Q1332,40 1368,0 Q1404,40 1440,0 V40 H0Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 100% 100%; background-repeat: no-repeat;
  z-index: 2; pointer-events: none;
}

/* Scallop bottom — rounded scallop wave at bottom (white) */
.wave-scallop-bottom::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 1440 40'%3E%3Cpath d='M0,40 Q36,0 72,40 Q108,0 144,40 Q180,0 216,40 Q252,0 288,40 Q324,0 360,40 Q396,0 432,40 Q468,0 504,40 Q540,0 576,40 Q612,0 648,40 Q684,0 720,40 Q756,0 792,40 Q828,0 864,40 Q900,0 936,40 Q972,0 1008,40 Q1044,0 1080,40 Q1116,0 1152,40 Q1188,0 1224,40 Q1260,0 1296,40 Q1332,0 1368,40 Q1404,0 1440,40 V0 H0Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 100% 100%; background-repeat: no-repeat;
  z-index: 2; pointer-events: none;
}

/* === Sticky Toekan (gedeeld over alle BSO pagina's) === */
.toekan-sticky {
  position: fixed; right: 0; top: 28%; transform: translateY(-50%) translateX(100%);
  z-index: 90; pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.toekan-sticky.visible { opacity: 1; transform: translateY(-50%) translateX(0); }
.toekan-sticky img { width: 280px; display: block; }
.toekan-sticky.hidden { opacity: 0; transform: translateY(-50%) translateX(40px); }
@media (max-width: 1023px) {
  .toekan-sticky img { width: 180px; }
}
@media (max-width: 600px) {
  .toekan-sticky { display: none; }
}

/* === Light text utility (set via Page Builder section settings) === */
.editor-light-text,
.editor-light-text p,
.editor-light-text h1,
.editor-light-text h2,
.editor-light-text h3,
.editor-light-text h4,
.editor-light-text h5,
.editor-light-text span,
.editor-light-text li,
.editor-light-text a:not(.btn),
.editor-light-text .faq__question,
.editor-light-text .faq__answer p {
  color: #fff !important;
}

/* ════════════════════════════════════════════════════════════════════
   v26 — Club-specifieke uitbreidingen op het BSO design system
   Niet-conflicterend; alle classes hebben `club-` prefix.
   ════════════════════════════════════════════════════════════════════ */

/* Preview banner (alleen zichtbaar in afgeschermde preview-modus) */
.club-preview-banner {
  position: sticky;
  top: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(90deg, #1a1a2e 0%, var(--purple-dark) 100%);
  color: #fff;
  font-family: var(--font-body, 'Ubuntu', sans-serif);
  font-size: 13px;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.club-preview-banner__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 4px rgba(255, 204, 27, 0.25);
  animation: clubPulse 2s infinite;
}
@keyframes clubPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.8; }
}

/* Leeftijdsgroep cards grid (Club-specifiek) */
.club-groepen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  margin-top: 32px;
}
.club-groep-card {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--body-text);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.club-groep-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
  border-color: transparent;
  color: var(--body-text);
}
.club-groep-card__img {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #eee;
}
.club-groep-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.club-groep-card:hover .club-groep-card__img img { transform: scale(1.05); }
.club-groep-card__body { padding: 18px 20px 22px; }
.club-groep-card__label {
  font-family: var(--font-heading, 'Ubuntu', sans-serif);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--purple);
}
.club-groep-card__age {
  font-size: 14px;
  color: #6b6b82;
  margin: 0 0 10px;
}
.club-groep-card__cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--purple-dark);
}

/* Tegels voor "Meer voor apekoppies" sectie */
.club-tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 32px;
}
.club-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  text-decoration: none;
  color: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.club-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  color: #fff;
}
.club-tile--wide { aspect-ratio: 16 / 7; }
.club-tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75) 100%);
}
.club-tile__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 24px;
}
.club-tile__tag {
  display: inline-block;
  background: var(--yellow);
  color: var(--purple-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.club-tile__title {
  font-family: var(--font-heading, 'Ubuntu', sans-serif);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.club-tile__desc {
  font-size: 14px;
  margin: 0 0 8px;
  opacity: 0.95;
}
.club-tile__cta {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.95;
}

/* Banner CTA voor leslocaties (Club) */
.club-cta-banner {
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 36px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: 0 18px 40px rgba(116, 61, 151, 0.25);
}
.club-cta-banner__title {
  font-family: var(--font-heading, 'Ubuntu', sans-serif);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  margin: 0 0 6px;
}
.club-cta-banner__body { margin: 0; opacity: 0.9; }
@media (max-width: 720px) {
  .club-cta-banner { flex-direction: column; text-align: center; padding: 28px 24px; }
}

/* Reviews list grid */
.club-reviews-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 32px;
}
.club-reviews-footer {
  text-align: center;
  margin-top: 30px;
  color: #6b6b82;
}
.club-reviews-footer a { color: var(--purple); font-weight: 600; }