/* Fitfabriek De Baard - Concept v6-b "Mono Brutal" (zwart/wit + blauw, brutalist/dicht)
   Token discipline via --sb-* + band-context. Full-bleed hero, numbered list-rows. */

:root {
  --sb-ink: #0a0b0e; --sb-paper: #ffffff; --sb-blue: #1fa85c; --sb-blue-bright: #2bc06e; --sb-wa: #25d366;
  --sb-radius-card: 2px; --sb-radius-button: 2px;
  --sb-section-y: clamp(58px, 7vw, 112px); --sb-pad-x: 24px; --sb-container: 1280px;
  --sb-font-display: "Space Grotesk", "Hanken Grotesk", "DM Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  --sb-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Hoogte van de servicebalk boven de navigatie. Alles wat onder de vaste header
     begint rekent hierop, dus aanpassen op één plek volstaat. */
  --topbar-h: 34px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--sb-paper); color: var(--sb-ink); font-family: var(--sb-font-body); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1,h2,h3 { font-family: var(--sb-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.04em; margin: 0; line-height: 0.98; }
.sr-only, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.skip-link:focus { position: fixed; z-index: 90; top: 12px; left: 12px; background: var(--sb-blue); color: #fff; padding: 10px 14px; }
:focus-visible { outline: 2px solid var(--sb-blue); outline-offset: 3px; }
.hl { color: var(--sb-blue); }
.label { margin: 0 0 16px; font-family: var(--sb-font-body); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sb-blue); }
.muted { color: var(--muted); } .small { font-size: 13px; }
.lead { font-size: clamp(17px, 1.6vw, 21px); color: var(--muted); }
.wrap { width: min(var(--sb-container), calc(100% - 2*var(--sb-pad-x))); margin-inline: auto; }

.band { padding: var(--sb-section-y) 0; }
.band-paper { background: var(--sb-paper); color: var(--sb-ink); --muted: #4f5862; --line: rgba(10,11,14,.18); --card-bg: #f4f5f7; --body-text: rgba(10,11,14,.86); }
.band-ink { background: var(--sb-ink); color: var(--sb-paper); --muted: rgba(255,255,255,.64); --line: rgba(255,255,255,.20); --card-bg: #14161b; --body-text: rgba(255,255,255,.86); }
.block-head { max-width: 800px; margin-bottom: clamp(30px, 4vw, 50px); }
h2 { font-size: clamp(32px, 6.2vw, 78px); }
/* Secundaire kop-schaal: voor secties die geen volledige hero-schaal verdienen (meeste content-secties) */
.h2-md { font-size: clamp(26px, 4vw, 46px); }

/* Herbruikbare centrerende afsluit-CTA-band (i.p.v. losse inline style-stacks per pagina) */
.cta-band { text-align: center; }
.cta-band .block-head { margin-inline: auto; }
.cta-band .label { justify-content: center; display: flex; }
.cta-band .lead { margin-top: 16px; }
.cta-band .actions { justify-content: center; }

/* Herbruikbare kaart-titel/-tekst (i.p.v. herhaalde inline font-size/line-height overrides) */
.card-title { font-size: 24px; text-transform: none; letter-spacing: 0; margin-bottom: 12px; }
.card-copy { color: var(--muted); line-height: 1.65; margin: 0 0 14px; font-size: 15px; }
.card-copy:last-child { margin-bottom: 0; }
.signature { margin-top: 22px; font-family: var(--sb-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; }

.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; background: transparent; }
.scroll-progress span { display: block; height: 100%; width: 0; background: var(--sb-blue); }
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }

.duo-blue { position: relative; overflow: hidden; }
.duo-blue img, .duo-blue video { filter: none; }

/* Buttons */
.button, .nav-cta, .lead-form button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 24px; font-family: var(--sb-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; font-size: 14px; text-decoration: none; cursor: pointer; border-radius: var(--sb-radius-button); border: 2px solid transparent; transition: transform .15s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.button-primary, .nav-cta { background: var(--sb-blue); color: #fff; }
.button-primary:hover, .nav-cta:hover { background: var(--sb-blue-bright); }
.button-line { background: transparent; color: inherit; border-color: currentColor; }
.button-line:hover { border-color: var(--sb-blue-bright); color: var(--sb-blue-bright); }
.wa-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sb-wa); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(37,211,102,.5);}70%{box-shadow:0 0 0 8px rgba(37,211,102,0);}100%{box-shadow:0 0 0 0 rgba(37,211,102,0);} }

/* Header */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; }
/* Servicebalk: inloggen en aanmelden horen bij het ledengedeelte, niet bij de
   wervende CTA. Eigen strook boven de navigatie, klein en rustig, met normale
   blend-modus zodat hij niet meelift op de difference-truc van de hoofdnav. */
.topbar { background: rgba(10,11,14,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(255,255,255,.12); }
.topbar-inner {
  width: min(var(--sb-container), calc(100% - 2*var(--sb-pad-x))); margin-inline: auto;
  height: var(--topbar-h); display: flex; align-items: center; justify-content: flex-end; gap: 22px;
}
.topbar-link {
  font-size: 12.5px; letter-spacing: .02em; text-decoration: none;
  color: rgba(255,255,255,.72); transition: color .15s var(--ease);
}
.topbar-link:hover { color: #fff; }
.topbar-link--sterk { color: #fff; font-weight: 600; position: relative; padding-left: 23px; }
.topbar-link--sterk::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 13px;
  transform: translateY(-50%); background: rgba(255,255,255,.22);
}
.nav { width: min(var(--sb-container), calc(100% - 2*var(--sb-pad-x))); margin-inline: auto; display: flex; align-items: center; gap: 18px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sb-font-display); font-weight: 700; font-size: 16px; text-decoration: none; color: #fff; mix-blend-mode: difference; }
.brand em { font-style: normal; opacity: .72; font-weight: 500; font-size: .82em; }
.brand-dot { width: 11px; height: 11px; background: currentColor; flex: none; }
.nav-menu { display: flex; align-items: center; gap: 24px; margin-left: auto; font-size: 14px; font-weight: 500; color: #fff; mix-blend-mode: difference; }
.nav-menu a { text-decoration: none; opacity: .9; } .nav-menu a:hover { opacity: 1; }
.nav-cta { margin-left: 4px; min-height: 44px; padding: 0 18px; }
.nav-toggle { display: none; }

/* Mega-menu */
.nav-item { position: relative; display: flex; align-items: center; height: 72px; }
.nav-item-toggle { display: none; }
.mega-panel { position: fixed; top: calc(72px + var(--topbar-h)); left: 50%; z-index: 49; width: min(var(--sb-container), calc(100% - 2*var(--sb-pad-x))); background: var(--sb-ink); color: var(--sb-paper); mix-blend-mode: normal; --muted: rgba(255,255,255,.64); --line: rgba(255,255,255,.16); --card-bg: #14161b; border-radius: 0 0 14px 14px; box-shadow: 0 32px 64px rgba(10,11,14,.45); opacity: 0; visibility: hidden; transform: translate(-50%, -10px); transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; }
.mega-panel::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 2px; background: linear-gradient(90deg, var(--sb-blue) 0%, var(--sb-blue-bright) 50%, var(--sb-blue) 100%); }
.nav-item:hover .mega-panel, .nav-item.is-open .mega-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega-panel-inner { padding: 44px 56px; display: flex; justify-content: center; gap: 64px; align-items: stretch; }
.mega-cols { display: flex; gap: 56px; }
.mega-col { display: flex; flex-direction: column; min-width: 200px; counter-reset: mega-n; opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.nav-item:hover .mega-col, .nav-item.is-open .mega-col { opacity: 1; transform: none; }
.mega-cols .mega-col:nth-child(1) { transition-delay: .04s; }
.mega-cols .mega-col:nth-child(2) { transition-delay: .09s; }
.mega-col-label { font-family: var(--sb-font-display); font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--sb-blue-bright); margin: 0 0 14px; }
.mega-link { display: block; position: relative; padding: 11px 0 11px 30px; color: var(--sb-paper); text-decoration: none; font-size: 15.5px; border-top: 1px solid var(--line); transition: color .15s var(--ease), padding .15s var(--ease); counter-increment: mega-n; }
.mega-col .mega-link:first-of-type { border-top: 0; }
.mega-link::before { content: counter(mega-n, decimal-leading-zero); position: absolute; left: 0; top: 11px; font-family: var(--sb-font-display); font-weight: 700; font-size: 11px; color: var(--sb-blue); opacity: .7; }
.mega-link:hover { color: var(--sb-blue-bright); padding-left: 35px; }
.mega-feature { flex: none; width: 260px; display: flex; flex-direction: column; text-decoration: none; color: inherit; position: relative; opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease) .12s, transform .3s var(--ease) .12s; }
.nav-item:hover .mega-feature, .nav-item.is-open .mega-feature { opacity: 1; transform: none; }
.mega-feature::before { content: ""; position: absolute; left: -32px; top: 0; bottom: 0; width: 1px; background: var(--line); z-index: 3; }
.mega-feature-media { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; margin-bottom: 14px; }
.mega-feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.mega-feature:hover .mega-feature-media img { transform: scale(1.06); }
.mega-feature-label { display: block; font-family: var(--sb-font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sb-blue-bright); margin-bottom: 6px; }
.mega-feature-title { display: block; font-family: var(--sb-font-display); font-weight: 700; font-size: 21px; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 8px; color: var(--sb-paper); }
.mega-feature-cta { display: block; font-size: 12.5px; opacity: .85; color: var(--sb-paper); }
.mega-cards { display: flex; gap: 14px; margin-top: 2px; counter-reset: mega-card-n; opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease) .04s, transform .3s var(--ease) .04s; }
.nav-item:hover .mega-cards, .nav-item.is-open .mega-cards { opacity: 1; transform: none; }
.mega-card { counter-increment: mega-card-n; display: flex; flex-direction: column; width: 128px; flex: none; text-decoration: none; color: var(--sb-paper); }
.mega-card-media { position: relative; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden; margin-bottom: 9px; }
.mega-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.mega-card:hover .mega-card-media img { transform: scale(1.08); }
.mega-card-media::before { content: counter(mega-card-n, decimal-leading-zero); position: absolute; left: 8px; top: 8px; z-index: 2; font-family: var(--sb-font-display); font-weight: 700; font-size: 11px; color: var(--sb-blue-bright); background: rgba(10,11,14,.55); padding: 3px 7px; border-radius: 4px; backdrop-filter: blur(2px); }
.mega-card-title { display: block; font-family: var(--sb-font-display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.25; color: var(--sb-paper); transition: color .15s var(--ease); }
.mega-card:hover .mega-card-title { color: var(--sb-blue-bright); }
/* Grotere kaarten voor een paneel zonder uitgelicht blok: de kaarten dragen het paneel zelf.
   Het paneel krimpt mee naar de inhoud, anders staat het merendeel leeg. */
.mega-panel:has(.mega-cards--groot) { width: auto; }
.mega-cards--groot { gap: 20px; }
.mega-cards--groot .mega-card { width: 224px; }
.mega-cards--groot .mega-card-media { aspect-ratio: 4 / 4.6; border-radius: 10px; margin-bottom: 13px; }
.mega-cards--groot .mega-card-media::before { left: 10px; top: 10px; font-size: 12px; }
.mega-cards--groot .mega-card-title { font-size: 17px; }

/* Account-links onderin het mobiele menu (de servicebalk is daar verborgen) */
.nav-account { display: none; }
@media (max-width: 960px) {
  .nav-account { display: flex; gap: 10px; padding: 22px 0 0; margin-top: 6px; }
  .nav-account a {
    flex: 1; text-align: center; text-decoration: none; color: #fff;
    border: 1px solid rgba(255,255,255,.32); padding: 13px 10px; font-size: 15px;
  }
  .nav-account a:last-child { background: rgba(255,255,255,.10); border-color: transparent; font-weight: 600; }
}
.mega-card[aria-current="page"] .mega-card-media { box-shadow: 0 0 0 2px var(--sb-blue-bright); }
.mega-card[aria-current="page"] .mega-card-title { color: var(--sb-blue-bright); }

/* Hero full-bleed */
.hero { position: relative; min-height: 94vh; display: grid; align-items: end; background: var(--sb-ink); color: var(--sb-paper); overflow: hidden; --muted: rgba(255,255,255,.66); }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 25%; }
.hero-bg video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(58% 52% at 26% 82%, rgba(8,9,12,.8) 0%, rgba(8,9,12,0) 72%),
    linear-gradient(0deg, rgba(10,11,14,.88) 0%, rgba(10,11,14,.3) 48%, rgba(10,11,14,.5) 100%);
}
.hero-inner { position: relative; z-index: 2; padding: calc(130px + var(--topbar-h)) 0 56px; }
.hero h1 { font-size: clamp(40px, 7.5vw, 104px); text-shadow: 0 4px 28px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.85); }
.hero .label { text-shadow: 0 1px 10px rgba(0,0,0,.65); }
.hero .lead { max-width: 50ch; margin: 24px 0 0; color: rgba(255,255,255,.9); text-shadow: 0 1px 14px rgba(0,0,0,.6); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 30px 0 0; }
.hero .small { margin: 16px 0 0; text-shadow: 0 1px 8px rgba(0,0,0,.6); }

/* Marquee */
.marquee { overflow: hidden; background: var(--sb-ink); border-block: 2px solid var(--sb-blue); }
.marquee-track { display: inline-flex; align-items: center; gap: 22px; white-space: nowrap; padding: 12px 0; font-family: var(--sb-font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(15px,2vw,22px); color: var(--sb-paper); animation: marquee 22s linear infinite; }
.marquee-track b { color: var(--sb-blue); }
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* Pains */
.pains-grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(28px,5vw,64px); align-items: start; }
.pains { list-style: none; padding: 0; margin: 0; }
.pains li { font-family: var(--sb-font-display); font-weight: 600; font-size: clamp(19px,2.6vw,30px); line-height: 1.15; padding: 24px 0 24px 44px; border-top: 1px solid var(--line); position: relative; }
.pains li:first-child { border-top: 0; } .pains li::before { content: "→"; position: absolute; left: 0; top: 24px; color: var(--sb-blue); }

/* Voor wie */
.vw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); }
.vw-col { padding: clamp(24px,3vw,40px); border-right: 1px solid var(--line); }
.vw-col:last-child { border-right: 0; }
.vw-head { font-family: var(--sb-font-display); font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .04em; margin: 0 0 18px; }
.vw-head.wel { color: var(--sb-blue); } .vw-head.niet { color: var(--muted); }
.vw-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.vw-col li { position: relative; padding-left: 30px; color: var(--muted); font-size: 16px; }
.vw-head.wel ~ ul li::before { content: "✓"; position: absolute; left: 0; color: var(--sb-blue); font-weight: 700; }
.vw-head.niet ~ ul li::before { content: "×"; position: absolute; left: 0; color: var(--muted); font-weight: 700; }

/* Traject-kaarten (met foto) */
.traject-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.4vw, 44px); }
.traject-media { aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 22px; }
.traject-media img, .traject-media video { width: 100%; height: 100%; object-fit: cover; }

/* Lessen-bento (1 uitgelicht + 3 compact) */
.lessen-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(16px, 2.4vw, 26px); align-items: stretch; }
.lessen-feature { position: relative; overflow: hidden; min-height: 420px; display: block; text-decoration: none; color: #fff; }
.lessen-feature img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.lessen-feature:hover img { transform: scale(1.05); }
.lessen-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,11,14,.92) 0%, rgba(10,11,14,.2) 55%, rgba(10,11,14,0) 78%); }
.lessen-feature-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(24px, 3.2vw, 40px); color: #fff; }
.lessen-feature-idx { font-family: var(--sb-font-display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--sb-blue-bright); display: block; margin-bottom: 10px; }
.lessen-feature-body h3 { font-size: clamp(28px, 3.2vw, 42px); margin: 0 0 12px; }
.lessen-feature-body p { color: rgba(255,255,255,.85); max-width: 46ch; margin: 0; font-size: 15px; line-height: 1.6; }
.lessen-list { display: grid; gap: clamp(10px, 1.4vw, 14px); }
.lessen-item { display: grid; grid-template-columns: 100px 1fr; gap: 16px; align-items: center; padding: clamp(14px, 1.8vw, 18px); border: 1px solid var(--line); transition: background .2s var(--ease); text-decoration: none; color: inherit; }
.lessen-item:hover { background: var(--card-bg); }
.lessen-item-media { aspect-ratio: 1 / 1; overflow: hidden; }
.lessen-item-media img { width: 100%; height: 100%; object-fit: cover; }
.lessen-item-meta { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sb-blue); margin: 0 0 4px; }
.lessen-item h3 { font-size: 18px; text-transform: none; letter-spacing: 0; margin: 0 0 5px; }
.lessen-item p { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: 0; }

/* Aanbod list-rows */
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: auto 132px 1fr auto; gap: clamp(18px,3vw,44px); align-items: center; padding: clamp(20px,3vw,38px) 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; transition: background .2s var(--ease); }
.row:hover { background: var(--card-bg); }
.row-idx { font-family: var(--sb-font-display); font-weight: 700; font-size: clamp(28px,4.4vw,60px); color: var(--sb-blue); }
.row-media { width: 132px; height: 88px; overflow: hidden; border: 1px solid var(--line); }
.row-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.row:hover .row-media img { transform: scale(1.07); }
.row-body h3 { font-size: clamp(24px,3.2vw,44px); } .row-body p { color: var(--muted); margin: 6px 0 0; max-width: 64ch; font-size: 16px; }
.row-arrow { font-family: var(--sb-font-display); font-size: 28px; color: var(--sb-blue); transition: transform .25s var(--ease); }
.row:hover .row-arrow { transform: translateX(8px); }

/* Pijler-kaarten ("Kies je richting") - grote poster-cards i.p.v. dunne rijen */
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); }
.pillar-card { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--sb-radius-card); display: block; text-decoration: none; color: #fff; border: 1px solid var(--line); }
.pillar-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pillar-card:hover img { transform: scale(1.06); }
.pillar-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,11,14,.94) 0%, rgba(10,11,14,.55) 42%, rgba(10,11,14,.05) 72%); pointer-events: none; }
.pillar-card__content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(20px, 2.6vw, 30px); }
.pillar-card__idx { display: block; font-family: var(--sb-font-display); font-weight: 700; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sb-blue); margin-bottom: 10px; }
.pillar-card__title { font-size: clamp(26px, 3vw, 36px); margin-bottom: 10px; }
.pillar-card__desc { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.8); margin: 0 0 16px; max-width: 42ch; }
.pillar-card__cta { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sb-font-display); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .02em; transition: gap .2s var(--ease); }
.pillar-card:hover .pillar-card__cta { gap: 14px; }

/* Wat je krijgt */
.krijg-grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: clamp(28px,5vw,64px); align-items: start; }
.krijg { list-style: none; padding: 0; margin: 0; }
.krijg li { font-size: clamp(18px,2vw,24px); padding: 18px 0 18px 44px; border-top: 1px solid var(--line); position: relative; }
.krijg li:first-child { border-top: 0; }
.krijg li::before { content: "✓"; position: absolute; left: 0; top: 18px; width: 28px; height: 28px; display: grid; place-items: center; background: var(--sb-blue); color: #fff; font-size: 15px; font-weight: 700; }

/* Image band */
.imgband { position: relative; height: clamp(240px, 38vw, 520px); border-block: 2px solid var(--sb-blue); }
/* Hogere variant: voor beelden waar de gezichten anders net buiten de uitsnede vallen */
.imgband--tall { height: clamp(320px, 48vw, 680px); }
.imgband img, .imgband video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.imgband-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: clamp(20px,3vw,32px) var(--sb-pad-x); font-family: var(--sb-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; font-size: clamp(20px,3vw,34px); color: #fff; background: linear-gradient(0deg, rgba(10,11,14,.78) 0%, rgba(10,11,14,0) 100%); }

/* Methode - editorial ghost-nummer i.p.v. gesloten kaartjes (zelfde taal als .fases-list) */
.methode { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px,3vw,40px); }
.methode li { border-top: 1px solid var(--line); padding-top: clamp(22px,2.6vw,30px); }
.methode-num { font-family: var(--sb-font-display); font-weight: 700; font-size: clamp(48px,5.4vw,72px); line-height: .85; color: var(--sb-blue); display: block; margin-bottom: 14px; }
.methode h3 { font-size: 20px; text-transform: none; letter-spacing: 0; margin-bottom: 10px; } .methode p { color: var(--muted); margin: 0; font-size: 15px; line-height: 1.6; }

/* Ralf */
.ralf-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(28px,5vw,64px); align-items: center; }
.ralf-media { aspect-ratio: 4 / 5; border: 1px solid var(--line); }
.ralf-media img { width: 100%; height: 100%; object-fit: cover; }
.ralf-media--wide { aspect-ratio: 4 / 3; }
.ralf-body h2 { margin-bottom: 16px; }
/* Marge onder én boven: de losse regel '.quote + p' ving alleen een volgende alinea op,
   waardoor een lijst of kop direct tegen de quote plakte. */
.quote { margin: 26px 0; padding-left: 20px; border-left: 4px solid var(--sb-blue); font-family: var(--sb-font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(18px,2vw,26px); letter-spacing: -0.02em; }
/* Zachtere quote-variant: voor langere, reflectieve eerste-persoonscitaten (niet de korte, krachtige one-liners) */
.quote--soft { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.5; }
/* Grotere variant: als het citaat de kernboodschap van het blok is en niet de toelichting. */
.quote--groot { font-size: clamp(20px, 2.4vw, 27px); line-height: 1.4; }

/* Carousel (sfeerbeelden) */
.carousel { display: grid; gap: clamp(14px, 2vw, 22px); }
.carousel-row { overflow: hidden; }
.carousel-track { display: flex; width: max-content; animation: carousel-scroll 74s linear infinite; }
.carousel-row--reverse .carousel-track { animation-name: carousel-scroll-reverse; animation-duration: 83s; }
.carousel-group { display: flex; gap: clamp(14px, 2vw, 22px); padding-inline: 2px; }
.carousel-track img { width: clamp(220px, 24vw, 340px); aspect-ratio: 4 / 3; object-fit: cover; flex: 0 0 auto; }
.carousel-row:hover .carousel-track, .carousel-row:focus-within .carousel-track { animation-play-state: paused; }
@keyframes carousel-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes carousel-scroll-reverse { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Gezichtenraster: portretten van leden i.p.v. een enkele sfeerfoto (trajecten.html) */
.gezichten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; align-self: start; }
.gezichten a { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; text-decoration: none; }
.gezichten img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.gezichten a:hover img { transform: scale(1.04); }
.gezichten span {
  position: absolute; inset: auto 0 0 0; padding: 30px 14px 12px; color: #fff;
  font-family: var(--sb-font-display); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(to top, rgba(0,0,0,.78), transparent);
}

/* Beeldrij: vier staande beelden in een verspringend ritme (lopen.html) */
.beeldrij { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 18px); }
.beeldrij figure { margin: 0; overflow: hidden; aspect-ratio: 3 / 4; }
.beeldrij figure:nth-child(even) { margin-top: clamp(24px, 5vw, 64px); }
.beeldrij img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Seizoenen: aaneengesloten raster met bijschrift in beeld (trailblazers.html) */
.seizoenen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.seizoenen figure { margin: 0; position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.seizoenen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.seizoenen figcaption {
  position: absolute; inset: auto 0 0 0; padding: 34px 16px 14px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.78), transparent);
}

/* Beeldpaar: twee beelden, ongelijke breedte (basepacers.html) */
.beeldpaar { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(12px, 2vw, 24px); align-items: center; }
.beeldpaar figure { margin: 0; overflow: hidden; }
.beeldpaar img { width: 100%; display: block; }

/* Breedbeeld: een enkel cinematisch beeld met bijschrift (trail-en-looptrajecten.html) */
.breedbeeld { margin: 0; }
.breedbeeld img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.breedbeeld figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }

@media (max-width: 860px) {
  .beeldrij { grid-template-columns: repeat(2, 1fr); }
  .seizoenen { grid-template-columns: repeat(2, 1fr); }
  .beeldpaar { grid-template-columns: 1fr; }
}

/* FAQ */
.faq-list { display: grid; gap: 0; border: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); padding: 20px 24px; }
details:last-child { border-bottom: 0; }
summary { cursor: pointer; font-family: var(--sb-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; font-size: 17px; list-style: none; }
summary::-webkit-details-marker { display: none; } summary::after { content: "+"; float: right; color: var(--sb-blue); } details[open] summary::after { content: "-"; }
details p { color: var(--muted); margin: 14px 0 0; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,64px); align-items: start; }
.contact-meta { display: grid; gap: 12px; margin-top: 24px; } .contact-meta span { color: var(--muted); font-size: 15px; } .contact-meta strong { color: inherit; }
.lead-form { position: relative; background: var(--card-bg); border: 1px solid var(--line); border-top: 4px solid var(--sb-blue); padding: clamp(24px,4vw,34px); display: grid; gap: 9px; }
.lead-form::before { content: "// Plan mijn kennismaking"; display: block; font-family: var(--sb-font-display); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--sb-blue); margin-bottom: 6px; }
.lead-form label { font-weight: 600; font-size: 14px; }
.lead-form input, .lead-form select, .lead-form textarea { width: 100%; min-height: 48px; border: 1px solid var(--line); border-radius: var(--sb-radius-button); padding: 11px 13px; font: inherit; background: transparent; color: inherit; }
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus { border-color: var(--sb-blue); outline: none; }
.lead-form textarea { resize: vertical; }
.checkbox { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--muted); font-weight: 400; } .checkbox input { width: auto; min-height: auto; margin-top: 4px; }
.lead-form button { border: 0; background: var(--sb-blue); color: #fff; margin-top: 6px; } .lead-form button:hover { background: var(--sb-blue-bright); }
.form-note { min-height: 22px; margin: 4px 0 0; color: var(--sb-blue); font-size: 14px; }

/* Footer */
.footer { padding: 40px 0; } .footer-grid { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .footer .brand { color: var(--sb-paper); mix-blend-mode: normal; }

/* Responsive */
@media (max-width: 960px) {
  /* Op mobiel kost een aparte balk te veel hoogte: verbergen en de twee links
     onderin het uitklapmenu zetten. --topbar-h op 0 laat alle offsets meeschuiven. */
  :root { --topbar-h: 0px; }
  .topbar { display: none; }
  .nav-toggle { display: inline-flex; flex-direction: column; gap: 6px; background: transparent; border: 0; padding: 8px; cursor: pointer; margin-left: auto; z-index: 55; color: #fff; mix-blend-mode: difference; }
  .nav-toggle span:not(.sr-only) { width: 28px; height: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .3s var(--ease); }
  /* Twee streepjes, dus ze moeten allebei kantelen om een kruis te vormen.
     De vorige regel verborg de tweede, waardoor er maar een streep overbleef.
     Streepjes zijn 2px hoog met 6px ertussen: elk 4px naar het midden. */
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  /* Boven het open menu is difference-blending onvoorspelbaar: vaste witte kleur. */
  .nav-toggle[aria-expanded="true"] { mix-blend-mode: normal; color: #fff; }
  .nav-menu { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; flex-direction: column; align-items: stretch; justify-content: flex-start; overflow-y: auto; gap: 0; background: var(--sb-ink); color: var(--sb-paper); mix-blend-mode: normal; font-size: 22px; padding: 110px 28px 48px; transform: translateX(100%); transition: transform .4s var(--ease); margin: 0; } .nav-menu.is-open { transform: none; } .nav-cta { display: none; }
  .nav-item { height: auto; flex-direction: column; align-items: stretch; border-bottom: 1px solid rgba(255,255,255,.14); padding: 16px 0; }
  .nav-item:first-child { padding-top: 0; }
  .nav-link { flex: 1; padding: 4px 0; }
  .nav-item-toggle { display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 8px; width: 40px; height: 40px; background: transparent; border: 0; color: inherit; cursor: pointer; }
  .nav-item-toggle span { width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s var(--ease); margin-top: -4px; }
  .nav-item-toggle[aria-expanded="true"] span { transform: rotate(225deg); margin-top: 4px; }
  .mega-panel { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; color: inherit; box-shadow: none; border-radius: 0; --muted: rgba(255,255,255,.6); --line: rgba(255,255,255,.16); max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
  .nav-item:hover .mega-panel, .nav-item.is-open .mega-panel { transform: none; }
  .mega-panel::before { display: none; }
  .nav-item.is-open .mega-panel { max-height: 600px; }
  .mega-panel-inner { width: auto; margin: 0; padding: 14px 0 4px; display: block; }
  .mega-cols { flex-direction: column; gap: 20px; }
  .mega-col { opacity: 1; transform: none; transition: none; }
  .mega-col-label { font-size: 12px; }
  .mega-link { font-size: 16px; color: inherit; opacity: .78; }
  .mega-link:hover { color: var(--sb-blue-bright); opacity: 1; }
  .mega-feature { display: none; }
  .mega-cards { opacity: 1; transform: none; transition: none; overflow-x: auto; padding-bottom: 6px; margin-top: 10px; }
  .mega-card { width: 108px; }
  .pains-grid, .vw-grid, .krijg-grid, .methode, .ralf-grid, .contact-grid, .pillar-grid, .traject-grid, .lessen-grid { grid-template-columns: 1fr; }
  .lessen-feature { min-height: 300px; }
  .pillar-card { aspect-ratio: 4 / 3; }
  .vw-col { border-right: 0; border-bottom: 1px solid var(--line); } .vw-col:last-child { border-bottom: 0; }
  .row { grid-template-columns: auto 1fr; } .row-media { display: none; } .row-arrow { display: none; }
  .ralf-media { order: -1; }
}
@media (min-width:961px) and (max-width:1160px){ .methode{grid-template-columns:repeat(3,1fr);} }
@media (min-width:641px) and (max-width:960px) { .pillar-grid { grid-template-columns: repeat(2, 1fr); } .pillar-card { aspect-ratio: 1 / 1; } }
@media (max-width: 540px) { .actions { flex-direction: column; align-items: stretch; } .button { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .marquee-track, .wa-dot { animation: none !important; } .row:hover .row-media img { transform: none; }
  .carousel-track { animation: none !important; }
  .carousel-row { overflow-x: auto; }
  .carousel-group[aria-hidden] { display: none; }
}

/* Ruimte onder de vaste header bij het springen naar een anker. Was 84px voor een
   header van 72px; met de servicebalk erboven schuift dit mee via --topbar-h. */
html { scroll-padding-top: calc(84px + var(--topbar-h)); }

/* Header transparant bovenaan, krijgt achtergrond bij scroll (alle resoluties) */
.site-header { transition: background .3s ease, border-color .3s ease; }
.site-header.is-scrolled, .site-header:has(.nav-item:hover), .site-header:has(.nav-item.is-open) { background: rgba(10,11,14,0.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.10); }
.site-header.is-scrolled .brand, .site-header.is-scrolled .nav-menu, .site-header.is-scrolled .nav-toggle,
.site-header:has(.nav-item:hover) .brand, .site-header:has(.nav-item:hover) .nav-menu, .site-header:has(.nav-item:hover) .nav-toggle,
.site-header:has(.nav-item.is-open) .brand, .site-header:has(.nav-item.is-open) .nav-menu, .site-header:has(.nav-item.is-open) .nav-toggle { mix-blend-mode: normal; color: #fff; }
.nav-menu a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* Subtiele scheiding tussen opeenvolgende donkere secties */
.band-ink { border-top: 1px solid rgba(255,255,255,0.08); }
.band-paper + .band-paper { border-top: 1px solid rgba(10,11,14,0.08); }

/* ============================================================
   SITE-UITBREIDING - gedeelde onderdelen voor de meerpagina-site
   ============================================================ */

/* Kleinere hero-variant voor binnenpagina's (niet de home) */
.hero--sub { min-height: 62vh; }
.hero--sub .hero-inner { padding: calc(118px + var(--topbar-h)) 0 56px; }
.hero--sub h1 { font-size: clamp(38px, 7vw, 88px); }

/* Rustige hero-variant voor ledenverhalen: de h1 IS een citaat, geen billboard-slogan */
/* Verhaal-hero: schermvullend, links zwart met de tekst, rechts de foto.
   De foto wordt ingepast (contain) in plaats van bijgesneden, dus hij blijft heel.
   Een horizontaal verloop laat de linkerrand in het zwart oplopen, zodat er geen
   harde naad tussen de twee helften staat. */
.hero-story {
  position: relative; overflow: hidden;
  background: var(--sb-ink); color: var(--sb-paper);
  --muted: rgba(255,255,255,.66); --line: rgba(255,255,255,.20);
  min-height: min(52vh, 460px);
  /* ruimte voor de vaste header, anders loopt de foto eronderdoor en snijdt hij een hoofd af */
  padding-top: calc(72px + var(--topbar-h));
  display: grid; align-items: stretch;
}
.hero-story-grid { display: grid; align-items: center; width: 100%; }
.hero-story-grid:has(.hero-story-media) { grid-template-columns: 1fr 1fr; }

.hero-story-body {
  padding: 56px clamp(28px, 4vw, 56px) 64px
           max(var(--sb-pad-x), calc((100vw - var(--sb-container)) / 2));
  position: relative; z-index: 3;
}
.hero-story-body h1 {
  font-size: clamp(28px, 3.6vw, 48px); text-transform: none; letter-spacing: -0.01em;
  line-height: 1.2; padding-left: 20px; border-left: 4px solid var(--sb-blue);
}
.hero-story-body .lead { max-width: 42ch; margin: 24px 0 0; color: rgba(255,255,255,.86); }
.hero-story-body .small { margin: 16px 0 0; }

/* De hoogte volgt de foto, met een plafond. Een liggende foto vult de kolom dan
   helemaal (geen zwarte banden) en een staande wordt op het plafond ingepast,
   rechts uitgelijnd, met het verloop over de vrijgekomen ruimte links. */
.hero-story-media { position: relative; margin: 0; }
.hero-story-media img {
  width: 100%; height: auto; max-height: min(84vh, 760px); display: block;
  object-fit: contain; object-position: right center;
}
.hero-story-media::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg,
    var(--sb-ink) 0%, rgba(10,11,14,.92) 14%, rgba(10,11,14,.45) 34%, rgba(10,11,14,0) 58%);
}

/* Zonder foto (portret nog niet aangeleverd): tekst over de volle containerbreedte */
.hero-story-grid:not(:has(.hero-story-media)) .hero-story-body {
  padding-right: max(var(--sb-pad-x), calc((100vw - var(--sb-container)) / 2));
}

@media (max-width: 860px) {
  .hero-story { min-height: 0; }
  .hero-story-grid:has(.hero-story-media) { grid-template-columns: 1fr; }
  .hero-story-body { padding: 32px var(--sb-pad-x) 8px; }
  .hero-story-media { height: auto; min-height: 0; padding: 0 var(--sb-pad-x) 44px; }
  /* breedte volgt de foto, anders staat er zwart naast een staand portret */
  .hero-story-media img { width: auto; max-width: 100%; height: auto; max-height: 62vh; margin-inline: auto; }
  .hero-story-media::before { display: none; }
}


/* Footer secundaire navigatie */
.footer-grid { justify-content: space-between; }
.footer-links { list-style: none; display: flex; gap: clamp(14px, 3vw, 26px); flex-wrap: wrap; padding: 0; margin: 0; font-size: 14px; }
.footer-links a { text-decoration: none; opacity: .72; } .footer-links a:hover { opacity: 1; }
.footer-copy { color: inherit; }

/* Badge voor nog-niet-bevestigde content (bijv. Kickboksen) */
.tag-nieuw { display: inline-block; font-family: var(--sb-font-display); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sb-ink); background: var(--sb-blue); padding: 4px 10px; border-radius: var(--sb-radius-button); margin-left: 10px; vertical-align: middle; }

/* Rustige placeholder-notitie (bijv. contactgegevens die nog volgen) */
.note-box { border: 1px dashed var(--line); padding: 18px 22px; border-radius: var(--sb-radius-card); background: var(--card-bg); margin-top: 26px; max-width: 62ch; }
.note-box p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* Timeline (bijv. Over ons - jaaroverzicht) */
.timeline { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.timeline li { padding: clamp(22px,3vw,32px) 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 120px 1fr; gap: clamp(16px,3vw,32px); }
.timeline-year { font-family: var(--sb-font-display); font-weight: 700; font-size: clamp(30px,3.4vw,46px); color: var(--sb-blue); line-height: 1; }
.timeline h3 { font-size: clamp(19px,2vw,24px); margin-bottom: 8px; text-transform: none; letter-spacing: 0; }
.timeline p { color: var(--muted); margin: 0; font-size: 15px; line-height: 1.6; }

/* Info-tabel (bijv. Trailblazers - wat is inbegrepen) */
.info-table { border: 1px solid var(--line); }
.info-row { display: grid; grid-template-columns: 220px 1fr; gap: 18px; padding: clamp(18px,2.2vw,24px) clamp(18px,3vw,24px); border-bottom: 1px solid var(--line); transition: background .2s var(--ease); }
.info-row:last-child { border-bottom: 0; }
.info-row:hover { background: var(--card-bg); }
.info-row dt { font-family: var(--sb-font-display); font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: .02em; margin: 0; color: var(--sb-blue); padding-left: 22px; position: relative; }
.info-row dt::before { content: "✓"; position: absolute; left: 0; top: 1px; }
.info-row dd { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }

/* Detaillijst binnen een .methode-stap (bijv. Focus/Groei/Kracht/Support) */
.methode-detail { list-style: none; padding: 14px 0 0; margin: 14px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.methode-detail li { font-size: 14px; color: var(--muted); line-height: 1.5; }
.methode-detail strong { color: inherit; font-weight: 700; }

/* Fases-lijst (editorial rijen met ghost-nummer + tags, i.p.v. gesloten kaarten) */
.fases-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.fases-item { display: grid; grid-template-columns: 128px 1fr; gap: clamp(20px, 3vw, 44px); padding: clamp(30px, 4vw, 48px) 0; border-bottom: 1px solid var(--line); }
.fases-num { font-family: var(--sb-font-display); font-weight: 700; font-size: clamp(52px, 6vw, 88px); line-height: .85; color: var(--sb-blue); }
.fases-item h3 { font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 14px; }
.fases-item .fases-desc { color: var(--muted); line-height: 1.65; max-width: 62ch; margin: 0 0 20px; }
.fases-tags { display: flex; flex-wrap: wrap; gap: 9px; padding: 0; margin: 0; list-style: none; }
.fases-tags li { font-size: 13px; font-weight: 600; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
.fases-tags strong { color: var(--sb-blue); font-weight: 700; }

/* Ledenverhalen - hub-grid */
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line); }
.hub-card { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(22px,2.6vw,30px); display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; transition: background .2s var(--ease); }
.hub-card:nth-child(3n) { border-right: 0; }
/* Kolomvarianten: kies het aantal dat past bij het aantal kaarten, zodat er geen losse rest-kaart overblijft */
.hub-grid--2 { grid-template-columns: repeat(2, 1fr); }
.hub-grid--2 .hub-card:nth-child(3n) { border-right: 1px solid var(--line); }
.hub-grid--2 .hub-card:nth-child(2n) { border-right: 0; }
.hub-grid--4 { grid-template-columns: repeat(4, 1fr); }
.hub-grid--4 .hub-card:nth-child(3n) { border-right: 1px solid var(--line); }
.hub-grid--4 .hub-card:nth-child(4n) { border-right: 0; }
.hub-grid--4 .hub-card { padding: clamp(18px,1.8vw,24px); }
.hub-grid--4 .hub-card h3 { font-size: 19px; }
#meer-verhalen .hub-card:nth-last-child(-n+2) { border-bottom: 0; }
a.hub-card:hover { background: var(--card-bg); }
.hub-photo { aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line); }
.hub-photo--empty { background: var(--card-bg); border-style: dashed; }
.hub-photo img { width: 100%; height: 100%; object-fit: cover; }
.hub-card h3 { font-size: 21px; margin: 0; }
/* Zonder eyebrow (.hub-role) plakt de kop tegen de foto: de flex-gap van 14px alleen is te krap. */
.hub-card .hub-photo + h3 { margin-top: 10px; }
.hub-role { font-size: 12.5px; color: var(--sb-blue); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.hub-teaser { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0; flex: 1; }
.hub-link { font-family: var(--sb-font-display); font-weight: 700; text-transform: uppercase; font-size: 13px; color: var(--sb-blue); }
.hub-card--teaser { opacity: .82; }
.hub-card--teaser .hub-link { color: var(--muted); }

/* Verhaal-pagina (individuele ledenverhalen) */
.story-body { max-width: 74ch; }
.story-body--solo { margin-inline: auto; }
.story-section { margin-bottom: clamp(28px, 4vw, 44px); }
.story-section:last-child { margin-bottom: 0; }
.story-section h2 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 14px; text-transform: none; letter-spacing: 0; }
.story-section p { color: var(--body-text, var(--muted)); font-size: 16px; line-height: 1.7; margin: 0 0 14px; }
.story-section p:last-child { margin-bottom: 0; }
.story-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 22px; }
.story-intro { font-size: clamp(17px, 1.6vw, 21px); color: var(--body-text, var(--muted)); margin: 0 0 clamp(28px, 4vw, 44px); }
/* Geen vaste verhouding: liggende foto's verloren hier bijna de helft van het beeld. */
.story-media { overflow: hidden; border: 1px solid var(--line); }
.story-media img { width: 100%; height: auto; display: block; }
.story-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px,5vw,64px); align-items: start; }
@media (min-width: 961px) { .story-grid .story-media { position: sticky; top: 100px; } }
.story-cta { margin-top: clamp(30px, 4vw, 46px); padding-top: clamp(24px, 3vw, 34px); border-top: 1px solid var(--line); }
.story-cta p { color: var(--muted); margin: 0 0 18px; font-size: 16px; }
.story-photos { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 6px; margin: 8px 0 32px; }
.story-photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.story-photos--wide img { aspect-ratio: 16 / 10; }
/* Vrije strook: bij groepen met zowel staande als liggende foto's is een gedeelde
   verhouding altijd fout voor de helft. Gelijke hoogte, eigen breedte, niets bijgesneden. */
.story-photos--vrij { display: flex; flex-wrap: wrap; align-items: flex-start; }
.story-photos--vrij img { height: clamp(170px, 21vw, 290px); width: auto; max-width: 100%; aspect-ratio: auto; object-fit: contain; }

@media (max-width: 960px) {
  .hero--sub .hero-inner { padding: calc(108px + var(--topbar-h)) 0 44px; }
  .timeline li, .info-row, .fases-item { grid-template-columns: 1fr; }
  .fases-num { margin-bottom: -8px; }
  .hub-grid, .hub-grid--2, .hub-grid--4 { grid-template-columns: 1fr; }
  .hub-card { border-right: 0; }
  /* Even zwaar wegen als .hub-grid--2/--4 .hub-card:nth-child(3n) hierboven (0,3,0),
     anders houdt elke derde kaart een rand in de eenkoloms-weergave. */
  .hub-grid--2 .hub-card:nth-child(n), .hub-grid--4 .hub-card:nth-child(n) { border-right: 0; }
  #meer-verhalen .hub-card:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  #meer-verhalen .hub-card:last-child { border-bottom: 0; }
  .story-grid { grid-template-columns: 1fr; }
  .story-media { order: -1; }
  .story-photos { grid-template-columns: repeat(min(2, var(--cols, 3)), 1fr); }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .hub-grid { grid-template-columns: repeat(2, 1fr); }
  .hub-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .hub-grid--4 .hub-card:nth-child(2n) { border-right: 0; }
  .hub-grid--4 .hub-card:nth-child(4n) { border-right: 0; }
  .hub-card:nth-child(3n) { border-right: 1px solid var(--line); }
  .hub-card:nth-child(2n) { border-right: 0; }
}

/* Evenementen - polaroids (naar het magazine-spreadontwerp) */
.polas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.8vw, 38px); }
.pola { position: relative; background: #f4f3f0; padding: 12px 12px 30px; box-shadow: 0 16px 30px rgba(0,0,0,.45); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pola:nth-child(4n+1) { transform: rotate(-2.6deg); }
.pola:nth-child(4n+2) { transform: rotate(1.9deg); }
.pola:nth-child(4n+3) { transform: rotate(-1.3deg); }
.pola:nth-child(4n+4) { transform: rotate(2.7deg); }
.pola:hover { transform: rotate(0deg) translateY(-7px); box-shadow: 0 26px 44px rgba(0,0,0,.58); z-index: 2; }
.pola-media { aspect-ratio: 4 / 3; overflow: hidden; background: #000; }
.pola-media img { width: 100%; height: 100%; object-fit: cover; }
/* Placeholder zolang de foto per evenement nog moet worden aangeleverd. */
.pola-media--leeg { display: grid; place-items: center; background: #e6e4e0; }
.pola-media--leeg::after { content: "Foto volgt"; font-family: var(--sb-font-body); font-size: 12.5px; letter-spacing: .04em; color: #8b8781; }

/* Juridische pagina's: lange doorlopende tekst, dus een smallere maatregel en
   ruimere regelafstand dan de rest van de site. */
.juridisch { max-width: 78ch; }
.juridisch h2 { font-size: clamp(20px, 2.2vw, 27px); text-transform: none; letter-spacing: -0.01em; margin: 44px 0 14px; }
.juridisch h2:first-child { margin-top: 0; }
.juridisch h3 { font-size: 18px; text-transform: none; letter-spacing: 0; margin: 28px 0 10px; }
.juridisch p { margin: 0 0 15px; line-height: 1.7; }
.juridisch a { color: var(--sb-blue); }
.juridisch .punten { margin: 0 0 18px; }
.pola-title { font-family: var(--sb-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 14.5px; line-height: 1.25; color: #15171b; margin: 14px 0 4px; }
.pola-sub { font-size: 13px; line-height: 1.45; color: #5a5d62; margin: 0; }
@media (max-width: 1100px) { .polas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .polas { grid-template-columns: 1fr; } .polas .pola, .polas .pola:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .polas .pola, .polas .pola:hover { transform: none; transition: none; } }

/* ── Signature: tabata-ritme (total-body-power-methode) ───────────── */
.ritme { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; grid-template-columns: 2fr 1fr 2fr 1fr; }
.ritme li { position: relative; padding: 18px 14px 16px; border-radius: 6px; }
.ritme li.work { background: var(--sb-blue); color: var(--sb-ink); }
.ritme li.rest { background: var(--card-bg); border: 1px solid var(--line); color: var(--muted); }
.ritme .t { display: block; font-family: var(--sb-font-display); font-weight: 700; font-size: clamp(20px, 2.4vw, 30px); line-height: 1; letter-spacing: -0.02em; }
.ritme .w { display: block; font-size: 12px; margin-top: 7px; line-height: 1.35; }
.ritme li.work .w { opacity: .75; }
.ritme-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; font-size: 13.5px; color: var(--muted); }
.ritme-meta strong { color: var(--sb-blue); font-family: var(--sb-font-display); font-weight: 700; }
.ritme-loop { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px); }
.ritme-loop div { display: flex; flex-direction: column; gap: 5px; }
.ritme-loop dt { font-family: var(--sb-font-display); font-weight: 700; font-size: clamp(30px, 4vw, 46px); line-height: .9; color: var(--sb-ink); letter-spacing: -0.03em; }
.band-ink .ritme-loop dt { color: var(--sb-paper); }
.ritme-loop dd { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 720px) { .ritme { grid-template-columns: 1fr 1fr; } .ritme-loop { grid-template-columns: 1fr; gap: 16px; } }

/* ── Signature: wissel zak/grond (freaky-friday) ──────────────────── */
.wissel { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.wissel li { display: grid; grid-template-columns: 96px 1fr; gap: clamp(16px, 2.4vw, 32px); align-items: start; padding: clamp(20px, 2.6vw, 30px) 0; border-top: 1px solid var(--line); }
.wissel li:last-child { border-bottom: 1px solid var(--line); }
.wissel-tag { font-family: var(--sb-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; padding: 6px 0; border-top: 3px solid currentColor; }
.wissel li.zak .wissel-tag { color: var(--sb-blue); }
.wissel li.grond .wissel-tag { color: var(--muted); }
.wissel h3 { font-size: clamp(19px, 2vw, 24px); text-transform: none; letter-spacing: -0.01em; margin: 0 0 8px; }
.wissel p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 15px; max-width: 62ch; }
.wissel-ex { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.wissel-ex li { display: block; border: 0; padding: 6px 12px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--line); font-size: 13px; color: var(--muted); grid-template-columns: none; }
.wissel-heen { display: flex; align-items: center; gap: 12px; margin-top: 26px; font-family: var(--sb-font-display); font-weight: 700; text-transform: uppercase; font-size: 13px; color: var(--sb-blue); }
.wissel-heen::before, .wissel-heen::after { content: ""; height: 1px; background: var(--line); flex: 1; }
@media (max-width: 640px) { .wissel li { grid-template-columns: 1fr; gap: 10px; } .wissel-tag { justify-self: start; padding-right: 30px; } }

/* ── Signature: los opsommen zonder nummers (basepacers, fysio, trailblazers) ── */
.punten { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(22px, 3vw, 34px); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.punten li { position: relative; padding-left: 20px; }
.punten li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--sb-blue); }
.punten strong { display: block; font-family: var(--sb-font-display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; margin-bottom: 6px; }
.punten span { color: var(--muted); line-height: 1.6; font-size: 15px; }
/* Manifest: waarden als uitspraken, niet als stappen */
.manifest { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.manifest li { padding: clamp(24px, 3vw, 36px) 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(16px, 3vw, 48px); align-items: baseline; }
.manifest h3 { font-size: clamp(24px, 3.4vw, 40px); letter-spacing: -0.03em; margin: 0; }
.manifest p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 15.5px; }
@media (max-width: 720px) { .manifest li { grid-template-columns: 1fr; gap: 10px; } }

/* ── Signature: rondestructuur (circuit-saturday) ─────────────────── */
.ronde { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin: 0 0 18px; padding: 0; list-style: none; }
.ronde li { aspect-ratio: 1; border-radius: 3px; background: var(--sb-blue); position: relative; }
.ronde li::after { content: attr(data-n); position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--sb-font-display); font-weight: 700; font-size: 11px; color: var(--sb-ink); }
.ronde-uitleg { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13.5px; color: var(--muted); margin: 0 0 30px; }
.ronde-uitleg strong { color: var(--sb-blue); font-family: var(--sb-font-display); font-weight: 700; }
.stapel { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stapel li { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 18px; padding: 14px 18px; border-radius: 4px; background: var(--card-bg); border: 1px solid var(--line); }
.stapel li.accent { background: var(--sb-blue); border-color: var(--sb-blue); color: var(--sb-ink); }
.stapel b { font-family: var(--sb-font-display); font-weight: 700; font-size: 15px; }
.stapel span { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
.stapel li.accent span { color: rgba(10,11,14,.78); }
@media (max-width: 560px) { .ronde { grid-template-columns: repeat(6, 1fr); } .stapel li { grid-template-columns: 60px 1fr; gap: 12px; } }

/* ── Signature: groot getal als statement (wicked-series) ─────────── */
.claim { display: grid; grid-template-columns: auto 1fr; gap: clamp(22px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 48px); background: var(--card-bg); border: 1px solid var(--line); border-left: 4px solid var(--sb-blue); }
.claim-n { font-family: var(--sb-font-display); font-weight: 700; font-size: clamp(64px, 11vw, 140px); line-height: .8; letter-spacing: -0.05em; color: var(--sb-blue); }
.claim-t { font-size: clamp(17px, 1.8vw, 22px); line-height: 1.5; margin: 0; }
.claim-t small { display: block; margin-top: 10px; font-size: 14.5px; color: var(--muted); line-height: 1.6; }
@media (max-width: 620px) { .claim { grid-template-columns: 1fr; gap: 12px; } }

/* ── Doorleesloop: wayfinding tussen interessegebieden (over-ons) ─── */
.routes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(24px, 4vw, 56px); border-top: 1px solid var(--line); }
.routes li { border-bottom: 1px solid var(--line); }
.routes a { display: block; padding: clamp(18px, 2.2vw, 26px) 0; text-decoration: none; color: inherit; }
.routes-q { display: block; font-size: 14px; color: var(--muted); margin-bottom: 7px; line-height: 1.45; }
.routes-a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--sb-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(17px, 1.8vw, 21px); }
.routes-a::after { content: "\2192"; color: var(--sb-blue); transition: transform .2s var(--ease); }
.routes a:hover .routes-a { color: var(--sb-blue); }
.routes a:hover .routes-a::after { transform: translateX(6px); }
@media (max-width: 700px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .footer-bottom .footer-made { margin-left: 0; }
 .routes { grid-template-columns: 1fr; } }

/* ── Signature: verwachting vs werkelijkheid (kickboksen-pt) ──────── */
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--line); }
.contrast > div { padding: clamp(24px, 3.2vw, 40px); }
.contrast > div + div { border-left: 1px solid var(--line); }
.contrast .c-tag { display: block; font-family: var(--sb-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; margin-bottom: 14px; color: var(--muted); }
.contrast .is-real .c-tag { color: var(--sb-blue); }
.contrast p { margin: 0; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55; color: var(--muted); }
.contrast .is-real p { color: var(--body-text); }
.contrast .is-myth { opacity: .62; }
@media (max-width: 700px) { .contrast { grid-template-columns: 1fr; } .contrast > div + div { border-left: 0; border-top: 1px solid var(--line); } }
/* Kleur i.p.v. opacity: opacity op de regel drukte ook het groen van de link plat.
   Zelfde tint als de copyright-regel eromheen. */
/* Onderste footerregel: copyright links, juridische links ernaast, credit rechts,
   zodat de rechterhelft niet leeg blijft. */
.footer-bottom { width: 100%; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px;
  font-size: 12.5px; color: rgba(255,255,255,.45); }
.footer-bottom p { margin: 0; }
.footer-juridisch { display: flex; gap: 22px; }
.footer-juridisch a { color: inherit; text-decoration: none; }
.footer-juridisch a:hover { color: var(--sb-blue-bright); }
.footer-bottom .footer-made { margin-left: auto; }
.footer-made { color: inherit; }
.footer-made a { color: var(--sb-blue-bright); text-decoration: none; }
.footer-made a:hover { text-decoration: underline; }
.hub-photo--empty { position: relative; display: grid; place-items: center; }
.hub-photo--empty::after { content: "(foto nog aanleveren)"; font-family: var(--sb-font-body); font-size: 12.5px; color: var(--muted); letter-spacing: .02em; }

/* Trailblazers-embleem */
.embleem { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); flex-wrap: wrap; }
.embleem img { width: clamp(110px, 14vw, 170px); height: auto; flex: none; }
.band-ink .embleem img { filter: invert(1); }
.embleem-tekst { flex: 1; min-width: 260px; }