/* ronnieovergoor.com
   Basis: de huidige site (zwart + navy, Outfit dun voor koppen, Roboto Condensed voor tekst, blauwe offset-schaduw).
   Opgetild met: cursor-spotlight, scroll-gedreven animaties, view transitions tussen pagina's. */

@view-transition { navigation: auto; }

:root {
  --black: #030507;
  --navy: #001d33;
  --navy-2: #00284a;
  --navy-3: #003562;
  --blue: #0198e9;
  --blue-2: #29a9ff;
  --blue-3: #005598;
  --text: #eef4f9;
  --soft: #c3d1dd;
  --muted: #8299ab;
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .18);
  --display: "Outfit", system-ui, sans-serif;
  --body: "Roboto Condensed", system-ui, sans-serif;
  --wrap: min(1280px, 100% - 32px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header: 76px;
  /* Typografische schaal: alleen deze maten gebruiken */
  --t-hero: clamp(58px, 9.6vw, 148px);
  --t-1: clamp(40px, 5.4vw, 80px);
  --t-2: clamp(28px, 3.1vw, 44px);
  --t-3: clamp(19px, 1.55vw, 22px);
  --t-body: 18px;
  --t-small: 15px;
  --t-label: 13px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 16px); }
body { margin: 0; background: var(--black); color: var(--text); font: 400 var(--t-body)/1.6 var(--body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video, iframe { display: block; max-width: 100%; }
figure { margin: 0; }
img { height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-weight: 300; text-wrap: balance; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 3px; border-radius: 4px; }
.wrap { width: var(--wrap); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none; }
.skip:focus { top: 16px; }

/* Korrel over alles: geeft het zwart diepte */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--header); display: flex; align-items: center; view-transition-name: header; transition: background .4s, border-color .4s, backdrop-filter .4s; border-bottom: 1px solid transparent; }
.site-header.scrolled { background: color-mix(in srgb, var(--black) 72%, transparent); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 28px; }
.brand { display: block; width: 50px; height: 50px; flex: none; border-radius: 50%; }
.brand img { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255,255,255,.55), 0 4px 18px rgba(0,0,0,.5); transition: rotate 1.2s var(--ease), scale .4s var(--ease); }
.brand:hover img { rotate: 360deg; scale: 1.06; }
.menu { display: flex; align-items: center; list-style: none; margin: 0 0 0 -6px; padding: 0; }
.menu > li { position: relative; }
.menu > li + li::before { content: ""; position: absolute; left: 0; top: 50%; height: 18px; translate: 0 -50%; width: 1px; background: var(--blue-3); }
.menu a { display: block; padding: 8px 15px; font-size: var(--t-small); font-weight: 300; text-decoration: none; color: var(--soft); transition: color .2s; }
.menu a:hover, .menu a[aria-current="page"] { color: #fff; }
.menu a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 8px; text-decoration-thickness: 2px; }
.menu .sub { position: absolute; top: 100%; left: 6px; min-width: 200px; list-style: none; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--navy) 92%, transparent); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; translate: 0 6px; transition: .2s var(--ease); }
.menu .has-sub:hover .sub, .menu .has-sub:focus-within .sub { opacity: 1; visibility: visible; translate: 0 0; }
.menu .sub a { border-radius: 8px; padding: 10px 12px; }
.menu .sub a:hover { background: rgba(255,255,255,.06); }
.social { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.social .rev-link { font-size: var(--t-small); font-weight: 300; color: var(--muted); text-decoration: none; margin-right: 10px; transition: color .2s; }
.social .rev-link:hover { color: #fff; }
.icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--soft); transition: color .2s, background .2s; }
.icon:hover { color: #fff; background: rgba(255,255,255,.08); }
.icon svg { width: 18px; height: 18px; fill: currentColor; }
.icon svg.st { fill: none; stroke: currentColor; stroke-width: 1.6; }
.burger { display: none; margin-left: auto; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; }
.burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 1.5px; background: currentColor; margin: auto; position: relative; transition: .3s var(--ease); }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }

/* Mobiel menu (popover) */
#mobile-menu { inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; padding: calc(var(--header) + 24px) 16px 32px; background: var(--navy); color: var(--text); overflow: auto; }
#mobile-menu::backdrop { background: transparent; }
#mobile-menu ul { list-style: none; margin: 0; padding: 0; }
#mobile-menu a { display: block; text-decoration: none; font: 300 var(--t-2)/1.2 var(--display); letter-spacing: -.01em; padding: 7px 0; }
#mobile-menu .sub { margin: 2px 0 6px; }
#mobile-menu .sub a { font: 400 var(--t-body)/1.3 var(--body); color: var(--soft); padding: 5px 0 5px 16px; }
#mobile-menu .social { margin: 32px 0 0; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
#mobile-menu .social a { padding: 0; font: 400 var(--t-small)/1 var(--body); letter-spacing: 0; }
#mobile-menu .social a.icon { display: grid; }
#mobile-menu .close { position: absolute; top: 13px; right: 16px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); background: none; color: var(--text); font-size: 20px; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) {
  #mobile-menu:popover-open li { animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
}

/* ---------- Knoppen ---------- */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; border-radius: 99px; background: var(--text); color: var(--black); font: 500 var(--t-small)/1 var(--body); letter-spacing: .02em; text-decoration: none; border: 0; cursor: pointer; position: relative; overflow: hidden; isolation: isolate; transition: color .3s, transform .3s var(--ease); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--blue); clip-path: circle(0 at var(--bx, 50%) var(--by, 50%)); transition: clip-path .5s var(--ease); }
.btn:hover { color: #fff; }
.btn:hover::before { clip-path: circle(150% at var(--bx, 50%) var(--by, 50%)); }
.btn .arr { transition: translate .3s var(--ease); }
.btn:hover .arr { translate: 4px 0; }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }

/* ---------- Typografie ---------- */
.display { font: 300 clamp(56px, 10vw, 150px)/.92 var(--display); letter-spacing: -.035em; }
.h2 { font: 300 var(--t-2)/1 var(--display); letter-spacing: -.03em; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 400 var(--t-label)/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--blue-2); }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.split-letters .ch { display: inline-block; white-space: pre; }
@media (prefers-reduced-motion: no-preference) {
  .split-letters .ch { animation: letter 1s var(--ease) both; animation-delay: calc(var(--i) * 35ms + 120ms); }
}
@keyframes letter { from { opacity: .08; translate: 0 .35em; filter: blur(8px); } }
@keyframes rise { from { opacity: 0; translate: 0 24px; } }
@keyframes fade { from { opacity: 0; } }

/* Reveal: scroll-gedreven waar het kan, IntersectionObserver als terugval */
@media (prefers-reduced-motion: no-preference) {
  .rv { opacity: 0; translate: 0 32px; transition: opacity .9s var(--ease), translate .9s var(--ease); transition-delay: var(--d, 0ms); }
  .rv.in { opacity: 1; translate: 0 0; }
  @supports (animation-timeline: view()) {
    .rv { opacity: 1; translate: 0 0; transition: none; animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}

/* ---------- Hero (home) ---------- */
.hero { position: relative; min-height: min(100svh, 1000px); display: grid; align-items: center; overflow: hidden; isolation: isolate; background: #000; }
.hero picture, .hero .photo { position: absolute; inset: 0; z-index: -2; }
.hero .photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
/* Foto rechts, loopt naar links over in het zwart: naam en bullets staan op de muur */
@media (min-width: 901px) {
  .hero .photo { left: 26%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%); mask-image: linear-gradient(90deg, transparent, #000 32%); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero .photo img { animation: heroin 2.4s var(--ease) both; }
  @supports (animation-timeline: scroll()) {
    .hero .photo { animation: parallax linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    .hero .copy { animation: heroout linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
  }
}
@keyframes heroin { from { scale: 1.08; filter: brightness(.35); } }
@keyframes parallax { to { translate: 0 22%; scale: 1.06; } }
@keyframes heroout { to { opacity: 0; translate: 0 -12vh; } }
/* De spotlight: het licht volgt de cursor, net als op het podium */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 64%) var(--my, 42%), transparent 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.82) 100%);
  transition: background .1s; }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; z-index: -1; background: linear-gradient(transparent, var(--black)); }
.hero .copy { padding: calc(var(--header) + 40px) 0 60px; }
.hero h1 { font: 300 var(--t-hero)/.9 var(--display); letter-spacing: -.035em; max-width: 7.2ch; }
.hero .roles { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; }
.hero .roles li { font: 300 var(--t-3)/1.3 var(--body); color: var(--soft); display: flex; align-items: center; gap: 14px; }
.hero .roles li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); flex: none; }
.hero .roles li:first-child { color: var(--text); }
.hero .roles li:first-child::before { box-shadow: 0 0 0 0 rgba(1,152,233,.6); animation: pulse 2.6s infinite; }
@media (prefers-reduced-motion: no-preference) {
  .hero .roles li { animation: rise .8s var(--ease) both; animation-delay: calc(700ms + var(--i) * 140ms); }
}
@keyframes pulse { 70% { box-shadow: 0 0 0 14px rgba(1,152,233,0); } 100% { box-shadow: 0 0 0 0 rgba(1,152,233,0); } }

.down { position: absolute; left: 50%; bottom: 32px; translate: -50% 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--text); border: 1px solid var(--line-2); background: rgba(0,0,0,.25); backdrop-filter: blur(8px); transition: background .3s, border-color .3s; }
.down svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.down:hover { background: var(--blue); border-color: var(--blue); }
@media (prefers-reduced-motion: no-preference) {
  .down svg { animation: bob 2s var(--ease) infinite; }
  @supports (animation-timeline: scroll()) {
    .down { animation: downout linear both; animation-timeline: scroll(root); animation-range: 0 25vh; }
  }
}
@keyframes bob { 50% { translate: 0 4px; } }
@keyframes downout { to { opacity: 0; visibility: hidden; } }

/* ---------- Secties ---------- */
.section { padding: clamp(80px, 12vw, 160px) 0; position: relative; }
.navy { background: linear-gradient(180deg, var(--black), var(--navy) 18%, var(--navy) 82%, var(--black)); }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 64px); }

/* Over Ronnie (home) */
.over { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.over .lead { font: 300 var(--t-2)/1.12 var(--display); letter-spacing: -.025em; margin: 0; }
.over .lead .w { display: inline-block; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .over .lead .w { animation: wordlight linear both; animation-timeline: view(); animation-range: entry 60% cover 45%; }
  }
}
@keyframes wordlight { from { color: var(--muted); } }
.over .text { font-size: var(--t-body); color: var(--soft); }
.over .text p:first-child { display: none; } /* staat al als grote lead links */
.over .text .btn { margin-top: 12px; }

/* Portfolio-rail (home) */
.rail-wrap { position: relative; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; width: var(--wrap); margin-inline: auto; padding: 8px 0 28px; scrollbar-width: none; overscroll-behavior-x: contain; }
@media (max-width: 1180px) { .rail { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 700px) { .rail { grid-auto-columns: 84%; } }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-ctrl { display: flex; gap: 8px; }
.rail-ctrl button { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.rail-ctrl button:hover { background: var(--blue); border-color: var(--blue); }
.rail-ctrl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.rail-progress { width: var(--wrap); margin: 8px auto 0; height: 2px; background: var(--line); overflow: hidden; border-radius: 2px; }
.rail-progress i { display: block; height: 100%; width: 100%; background: var(--blue); transform-origin: left; scale: var(--p, .12) 1; transition: scale .2s; }
@supports (animation-timeline: scroll()) {
  .rail-wrap { timeline-scope: --rail; }
  .rail { scroll-timeline: --rail inline; }
  .rail-progress i { animation: grow linear both; animation-timeline: --rail; transition: none; }
}
@keyframes grow { from { scale: .12 1; } to { scale: 1 1; } }

/* Portfolio-kaart */
.card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.card figure { margin: 0; position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--navy-2); }
.card figure::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.card img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease), filter .6s; }
.card:hover img { scale: 1.06; }
.card .go { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; opacity: 0; scale: .6; transition: .4s var(--ease); }
.card .go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.card:hover .go { opacity: 1; scale: 1; }
.card .meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: var(--t-small); color: var(--muted); }
.card .meta .client { color: var(--blue-2); }
.card h3 { font: 400 var(--t-3)/1.25 var(--display); letter-spacing: -.01em; margin-top: 6px; }
.card.all { justify-content: center; align-items: start; gap: 20px; padding: 32px; border-radius: 14px; border: 1px solid var(--line-2); background: radial-gradient(400px circle at 100% 0, rgba(1,152,233,.25), transparent 70%), var(--navy); aspect-ratio: 4 / 3; align-self: start; }
.card.all b { font: 300 var(--t-2)/1.05 var(--display); letter-spacing: -.02em; }

/* Reviews (home): kaarten die over elkaar heen schuiven */
.reviews-home { background: radial-gradient(900px circle at 85% 10%, rgba(1,152,233,.14), transparent 60%), var(--navy); border-radius: clamp(20px, 3vw, 40px); width: min(1440px, 100% - 16px); margin-inline: auto; overflow: clip; }
.stack { display: grid; gap: 24px; max-width: 980px; margin-inline: auto; }
.stack .review { position: sticky; top: calc(var(--header) + 40px + var(--n) * 14px); }
.review { margin: 0; padding: clamp(28px, 4vw, 52px); border-radius: 22px; background: linear-gradient(160deg, var(--navy-3), var(--navy-2)); border: 1px solid var(--line); box-shadow: 0 -20px 60px rgba(0,0,0,.35); }
.review p { font: 300 var(--t-3)/1.45 var(--display); letter-spacing: -.01em; margin: 0; }
.review footer { margin-top: 28px; display: flex; align-items: center; gap: 14px; }
.review footer::before { content: ""; width: 36px; height: 2px; background: var(--blue); flex: none; }
.review cite { font-style: normal; }
.review cite b { display: block; font: 700 var(--t-body)/1.2 var(--display); }
.review cite span { color: var(--muted); font-size: var(--t-small); }
.reviews-home .more { text-align: center; margin-top: 56px; }

/* Foto's + Nieuwsbrief (home) */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.panel { position: relative; border-radius: 24px; padding: clamp(28px, 4vw, 52px); overflow: hidden; isolation: isolate; border: 1px solid var(--line); min-height: 520px; display: flex; flex-direction: column; justify-content: end; }
.panel h2 { font: 300 var(--t-2)/1 var(--display); letter-spacing: -.03em; margin-bottom: 18px; }
.panel p { color: var(--soft); }
.panel.photos > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: scale 1.4s var(--ease); }
.panel.photos::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(0,0,0,.05) 20%, rgba(0,10,20,.92)); }
.panel.photos:hover > img { scale: 1.04; }
.panel.news { background: radial-gradient(700px circle at 100% 0, rgba(1,152,233,.3), transparent 60%), var(--navy); justify-content: start; }
.credit { font-size: var(--t-small); color: var(--muted); }

/* ActiveCampaign-formulier in de huisstijl */
#inhoud .ac-form { margin-top: 12px; }
#inhoud .ac-form .g-recaptcha { border-radius: 4px; overflow: hidden; width: fit-content; }
#inhoud .ac-form form, #inhoud .ac-form form._form { background: transparent !important; padding: 0 !important; margin: 0 !important; width: 100% !important; max-width: none !important; box-shadow: none !important; border: 0 !important; font-family: var(--body) !important; color: var(--text) !important; }
#inhoud .ac-form ._form-title, #inhoud .ac-form ._html-code { color: var(--text) !important; font-family: var(--display) !important; }
#inhoud .ac-form label, #inhoud .ac-form ._form-label { color: var(--soft) !important; font: 400 var(--t-small)/1.3 var(--body) !important; margin-bottom: 6px !important; }
#inhoud .ac-form input[type=text], #inhoud .ac-form input[type=email], #inhoud .ac-form input[type=tel] { background: rgba(255,255,255,.06) !important; border: 1px solid var(--line-2) !important; border-radius: 12px !important; color: var(--text) !important; padding: 14px 16px !important; font: 400 var(--t-body) var(--body) !important; height: auto !important; }
#inhoud .ac-form input:focus { border-color: var(--blue) !important; outline: none !important; }
#inhoud .ac-form button, #inhoud .ac-form ._submit { background: var(--text) !important; color: var(--black) !important; border-radius: 99px !important; padding: 14px 26px !important; font: 500 var(--t-small) var(--body) !important; border: 0 !important; cursor: pointer; transition: background .2s, color .2s; }
#inhoud .ac-form button:hover, #inhoud .ac-form ._submit:hover { background: var(--blue) !important; color: #fff !important; }
#inhoud .ac-form ._form-thank-you { color: var(--text) !important; font-family: var(--display) !important; font-size: var(--t-3) !important; }
#inhoud .ac-form ._form-branding { display: none !important; }
#inhoud .ac-form ._error-inner { background: var(--blue-3) !important; }

/* ---------- Subpagina's ---------- */
/* Eén doorlopende achtergrond voor de hele subpagina; het licht van de kop loopt zacht uit in de inhoud */
main:has(> .page-hero), main:has(> article > .page-hero) { background: linear-gradient(180deg, var(--black) 0, var(--black) 200px, var(--navy) 900px, var(--navy) calc(100% - 300px), var(--black)); }
.page-hero { position: relative; padding: calc(var(--header) + clamp(48px, 8vw, 110px)) 0 clamp(40px, 5vw, 72px); isolation: isolate; }
.page-hero::before { content: ""; position: absolute; inset: 0 0 -60vh; z-index: -1; pointer-events: none; background: radial-gradient(700px circle at var(--mx, 80%) var(--my, 0%), rgba(1,152,233,.22), transparent 65%); -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.page-hero .top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 28px; }
.back { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-small); font-weight: 500; text-decoration: none; color: var(--soft); transition: color .2s, gap .2s; }
.back:hover { color: #fff; gap: 12px; }
.back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.page-hero h1 { font: 300 var(--t-1)/.95 var(--display); letter-spacing: -.035em; padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--blue-3); }
.page-hero h1.long { font-size: var(--t-2); line-height: 1; letter-spacing: -.028em; }

.page-body { padding-bottom: clamp(80px, 10vw, 140px); position: relative; }
.cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.aside { position: sticky; top: calc(var(--header) + 32px); }
/* Ambient light: de foto straalt een zachte gloed in zijn eigen kleuren uit */
.shadow-img { position: relative; isolation: isolate; margin: 0; }
.shadow-img::before { content: ""; position: absolute; inset: 8% 4% -2%; z-index: -1; background: var(--glow) center / cover no-repeat; filter: blur(48px) saturate(1.5); opacity: .55; border-radius: 30px; transition: opacity .6s var(--ease), inset .6s var(--ease); }
.shadow-img img { position: relative; width: 100%; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -20px rgba(0,0,0,.7), 0 0 90px -30px rgba(1,152,233,.45); }
.shadow-img::after { content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 35%); mix-blend-mode: overlay; }
.shadow-img:hover::before { opacity: .8; inset: 4% 0 -6%; }
@media (prefers-reduced-motion: no-preference) {
  .tilt { transition: transform .5s var(--ease); transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
}

.latest .eyebrow { margin-bottom: 18px; }
.latest .yt { margin: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -20px rgba(0,0,0,.7), 0 0 90px -30px rgba(1,152,233,.45); }
.latest-title { font: 400 var(--t-3)/1.3 var(--display); margin: 20px 0 10px; }
.latest-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: var(--t-small); margin: 0; }
.latest-meta a { color: var(--text); text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.latest-meta a:hover { text-decoration-color: var(--blue-2); }

/* Lopende tekst uit het oude CMS */
.rich { font-size: var(--t-body); color: var(--soft); max-width: 70ch; }
.rich strong, .rich b { color: var(--text); font-weight: 600; }
.rich > p:first-child > strong:only-child, .rich .intro { font: 300 var(--t-3)/1.4 var(--display); color: var(--text); letter-spacing: -.01em; }
/* Links in lopende tekst: overal wit met een blauw lijntje */
.rich a, .credit a, .c-cta .c-mail a { color: var(--text); text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .2s, text-decoration-color .2s; }
.rich a:hover, .credit a:hover, .c-cta .c-mail a:hover { color: #fff; text-decoration-color: var(--blue-2); }
.rich a strong, .rich a b { color: inherit; }
.rich a.back { color: var(--soft); text-decoration: none; }
.rich a.btn { color: var(--black); text-decoration: none; margin-top: 8px; }
.rich a.btn:hover { color: #fff; }
.rich hr { border: 0; height: 1px; background: var(--line-2); margin: 48px 0; }
.rich h2 { font: 300 var(--t-2)/1.1 var(--display); color: var(--text); margin: 56px 0 18px; letter-spacing: -.02em; }
.rich h3 { font: 400 var(--t-3)/1.25 var(--display); color: var(--text); margin: 0 0 8px; }
.rich img { border-radius: 10px; margin: 24px 0; }
.rich ul { padding-left: 1.1em; }
.rich iframe { width: 100%; border: 0; border-radius: 12px; margin: 16px 0; }
.rich .kicker { font: 400 var(--t-label)/1 var(--body); letter-spacing: .18em; color: var(--blue-2); margin: 64px 0 20px; display: flex; align-items: center; gap: 14px; }
.rich .kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.rich .kicker strong, .rich .kicker b { color: inherit; font-weight: 400; }
.rich .label { font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 28px 0 10px; }
.rich .label strong { color: inherit; font-weight: 500; }
.rich blockquote.quote { margin: 0 0 32px; padding: 24px 28px; border-left: 2px solid var(--blue); background: linear-gradient(90deg, rgba(1,152,233,.1), transparent); border-radius: 0 14px 14px 0; font: 300 var(--t-3)/1.45 var(--display); color: var(--text); font-style: normal; }
.rich .lines { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 8px; }
.rich .lines li { padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); color: var(--text); transition: border-color .2s, translate .3s var(--ease); }
.rich .lines li:hover { border-color: var(--blue); translate: 6px 0; }

/* Veelgestelde vragen: uitklappen met vloeiende hoogte-animatie */
.rich details { border-top: 1px solid var(--line); padding: 4px 0; interpolate-size: allow-keywords; }
.rich details:last-of-type { border-bottom: 1px solid var(--line); }
.rich summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font: 400 var(--t-3)/1.3 var(--display); color: var(--text); }
.rich summary::-webkit-details-marker { display: none; }
.rich summary::after { content: "+"; font: 300 28px/1 var(--display); color: var(--blue-2); transition: rotate .3s var(--ease); }
.rich details[open] summary::after { rotate: 45deg; }
.rich details::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; }
.rich details[open]::details-content { block-size: auto; }
.rich details { padding-bottom: 0; }
.rich details[open] { padding-bottom: 18px; }

/* Kenmerken (Dagvoorzitter, Over Ronnie) als kaarten */
.feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 32px 0; max-width: none; }
.feat { position: relative; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.025); overflow: hidden; isolation: isolate; transition: border-color .3s; }
.feat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(1,152,233,.18), transparent 65%); opacity: 0; transition: opacity .3s; }
.feat:hover { border-color: rgba(1,152,233,.5); }
.feat:hover::before { opacity: 1; }
.feat h3 { font: 400 var(--t-3)/1.25 var(--display); margin-bottom: 10px; color: var(--text); }
.feat p { margin: 0; font-size: var(--t-body); }
.rich.wide { max-width: none; }
.podcasts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.podcasts iframe { margin: 0; }

/* YouTube-gevel: pas laden na klik (sneller + geen cookies vooraf) */
.yt { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000 center / cover; cursor: pointer; margin: 24px 0; border: 0; padding: 0; width: 100%; display: block; }
.yt > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.yt > img.bars { scale: 1.34; }
.yt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0,0,0,.5)); transition: background .3s; }
.yt .play { position: absolute; z-index: 1; left: 50%; top: 50%; translate: -50% -50%; width: 78px; height: 78px; border-radius: 50%; background: rgba(1,152,233,.9); display: grid; place-items: center; transition: scale .3s var(--ease), background .3s; box-shadow: 0 0 0 0 rgba(1,152,233,.5); animation: pulse 2.6s infinite; }
.yt .play svg { width: 26px; height: 26px; fill: #fff; margin-left: 4px; }
.yt:hover .play { scale: 1.1; background: var(--blue); }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; z-index: 2; }

/* Portfolio detail */
.pf-top .nav-arrows { display: flex; gap: 8px; }
.pf-top .nav-arrows a, .pf-top .nav-arrows span { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: background .2s, border-color .2s; }
.pf-top .nav-arrows span { opacity: .3; }
.pf-top .nav-arrows a:hover { background: var(--blue); border-color: var(--blue); }
.pf-top .nav-arrows svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pf-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; padding-left: clamp(16px, 2vw, 28px); font-size: var(--t-body); color: var(--soft); }
.pf-meta .client { color: var(--blue-2); font-style: italic; }
.pf-hero { margin: 0 0 clamp(40px, 6vw, 80px); }
.pf-hero img { width: 100%; max-height: 78vh; object-fit: cover; border-radius: 4px; }
.pf-body .rich { margin-inline: auto; }
.pf-cols { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.pf-cols .rich img { width: 100%; }
.pf-body .rich img { width: 100%; }
.related { margin-top: clamp(80px, 10vw, 120px); padding-top: 48px; border-top: 1px solid var(--line); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }

/* Portfolio-overzicht */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 40px; }
.chip { padding: 10px 18px; border-radius: 99px; border: 1px solid var(--line-2); background: transparent; color: var(--soft); font: 400 var(--t-small)/1 var(--body); cursor: pointer; transition: .2s; }
.chip:hover { color: #fff; border-color: var(--soft); }
.chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
.search { margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line-2); min-width: min(280px, 100%); }
.search svg { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; flex: none; }
.search input { background: none; border: 0; color: var(--text); font: 400 var(--t-small) var(--body); padding: 11px 0; width: 100%; outline: none; }
.count { color: var(--muted); font-size: var(--t-small); margin-bottom: 20px; }
.pf-grid .card[hidden] { display: none; }

/* Reviews-pagina */
.masonry { columns: 3 320px; column-gap: 20px; margin-top: clamp(48px, 6vw, 80px); }
.masonry .review { break-inside: avoid; margin-bottom: 20px; box-shadow: none; padding: 30px; }
.masonry .review p { font-size: var(--t-3); }

/* Foto's */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 16px; }
.gallery a { display: block; border-radius: 10px; overflow: hidden; position: relative; aspect-ratio: 4 / 5; background: var(--navy-2); }
.gallery img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: scale 1s var(--ease), filter .5s; }
.gallery a:hover img { scale: 1.04; }
.gallery a::after { content: ""; position: absolute; right: 14px; top: 14px; width: 42px; height: 42px; border-radius: 50%; background: rgba(0,0,0,.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 18px no-repeat; backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; }
.gallery a:hover::after { opacity: 1; }
dialog.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0,6,12,.94); color: #fff; }
dialog.lightbox[open] { display: grid; place-items: center; animation: fade .3s; }
dialog.lightbox::backdrop { background: transparent; }
dialog.lightbox img { max-width: min(92vw, 1600px); max-height: 84dvh; width: auto; object-fit: contain; border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
dialog.lightbox button, dialog.lightbox a { position: fixed; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); color: #fff; display: grid; place-items: center; cursor: pointer; text-decoration: none; transition: background .2s; }
dialog.lightbox button:hover, dialog.lightbox a:hover { background: var(--blue); }
dialog.lightbox svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
dialog.lightbox .x { top: 16px; right: 16px; }
dialog.lightbox .dl { bottom: 16px; right: 16px; }
dialog.lightbox .prev { left: 16px; top: 50%; translate: 0 -50%; }
dialog.lightbox .next { right: 16px; top: 50%; translate: 0 -50%; }

/* Masterclass */
.mc-hero { min-height: min(92svh, 860px); display: grid; align-items: end; position: relative; isolation: isolate; overflow: hidden; padding: calc(var(--header) + 60px) 0 clamp(48px, 7vw, 96px); }
.mc-hero > img, .band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.mc-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,10,20,.9), rgba(0,10,20,.35) 70%), linear-gradient(transparent 60%, var(--black)); }
.mc-hero h1 { font: 300 var(--t-1)/1 var(--display); letter-spacing: -.035em; max-width: 12ch; }
.mc-hero h2 { font: 300 var(--t-3)/1.2 var(--body); color: var(--blue-2); margin-top: 22px; }
.mc-hero .btn { margin-top: 36px; }
.mc-offer { display: grid; grid-template-columns: 7fr 5fr; gap: 20px; align-items: stretch; }
.box { padding: clamp(28px, 4vw, 52px); border-radius: 22px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.box h3 { font: 300 var(--t-2)/1.1 var(--display); letter-spacing: -.02em; margin-bottom: 22px; }
.box p { color: var(--soft); font-size: var(--t-body); }
.box.alt { background: radial-gradient(600px circle at 100% 0, rgba(1,152,233,.4), transparent 60%), var(--navy-2); border-color: rgba(1,152,233,.35); display: flex; flex-direction: column; }
.checks { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 14px; font-size: var(--t-body); }
.checks li { display: flex; gap: 14px; align-items: center; }
.checks li::before { content: ""; width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat; }
.box.alt .btn { margin-top: auto; align-self: start; }
.mc-quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mc-quotes .review { box-shadow: none; }
.mc-quotes .review p { font-size: var(--t-3); }
.band { position: relative; isolation: isolate; overflow: hidden; padding: clamp(100px, 14vw, 200px) 0; text-align: center; }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 50% 50%, rgba(0,20,40,.55), rgba(0,10,20,.9)); }
.band h3 { font: 300 var(--t-2)/1.05 var(--display); letter-spacing: -.03em; max-width: 16ch; margin-inline: auto; }
.band h4 { font: 300 var(--t-3)/1.45 var(--body); color: var(--soft); max-width: 60ch; margin: 24px auto 0; }
.band .btn { margin-top: 36px; }
.band small { display: block; margin-top: 16px; color: var(--muted); font-size: var(--t-small); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .band > img { animation: bandpar linear both; animation-timeline: view(); scale: 1.2; }
  }
}
@keyframes bandpar { from { translate: 0 -8%; } to { translate: 0 8%; } }
.icons6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; text-align: center; }
.icons6 div { padding: 28px 12px; border: 1px solid var(--line); border-radius: 18px; transition: border-color .3s, translate .4s var(--ease); }
.icons6 div:hover { border-color: var(--blue); translate: 0 -6px; }
.icons6 img { width: 56px; height: 56px; margin: 0 auto 16px; filter: brightness(0) invert(1); opacity: .9; }
.icons6 span { font: 400 var(--t-body)/1.25 var(--display); }
.modules { display: grid; gap: 20px; counter-reset: mod; }
.module { display: grid; grid-template-columns: 5fr 7fr; gap: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: rgba(255,255,255,.025); counter-increment: mod; }
.module:nth-child(even) { grid-template-columns: 7fr 5fr; }
.module:nth-child(even) .mimg { order: 2; }
.module .mimg { min-height: 300px; overflow: hidden; }
.module .mimg img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
.module:hover .mimg img { scale: 1.05; }
.module .mtxt { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.module .mtxt::before { content: counter(mod, decimal-leading-zero); font: 300 var(--t-label)/1 var(--body); letter-spacing: .18em; color: var(--blue-2); margin-bottom: 16px; }
.module h3 { font: 300 var(--t-2)/1.1 var(--display); letter-spacing: -.02em; margin-bottom: 16px; }
.module p { color: var(--soft); margin: 0; font-size: var(--t-body); }
.garantie { display: grid; grid-template-columns: 180px 1fr; gap: 40px; align-items: center; max-width: 980px; margin-inline: auto; }
.garantie img { width: 180px; }
.garantie h3 { font: 300 var(--t-2)/1.05 var(--display); letter-spacing: -.02em; margin-bottom: 16px; }
.garantie p { color: var(--soft); font-size: var(--t-body); margin: 0; }
.garantie a { color: var(--blue-2); }

/* 404 */
.notfound { min-height: 80svh; display: grid; place-items: center; text-align: center; padding: calc(var(--header) + 40px) 16px 40px; }
.notfound b { display: block; font: 200 clamp(120px, 26vw, 340px)/.85 var(--display); letter-spacing: -.05em; background: radial-gradient(circle at 50% 40%, #fff, var(--blue) 60%, var(--navy-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.notfound h1 { font: 300 var(--t-2)/1.1 var(--display); margin: 20px 0 32px; }


/* ---------- Trainer ---------- */
.trainer .navy { background: transparent; }
.trainer .t-lead { font: 300 var(--t-3)/1.4 var(--display); letter-spacing: -.01em; max-width: 44ch; margin: 0 0 16px; }
.trainer .t-sub { color: var(--blue-2); font-size: var(--t-body); margin-bottom: clamp(40px, 6vw, 72px); }
.tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.track-card { position: relative; min-height: 440px; border-radius: 24px; overflow: hidden; isolation: isolate; text-decoration: none; display: flex; align-items: end; padding: clamp(24px, 3vw, 40px); border: 1px solid var(--line); }
.track-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: scale 1.2s var(--ease), filter .6s; filter: saturate(.85) brightness(.75); }
.track-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(transparent 25%, rgba(0,12,24,.94)); }
.track-card:hover > img { scale: 1.05; filter: saturate(1) brightness(.85); }
.track-card .n { position: absolute; top: 26px; left: clamp(24px, 3vw, 40px); font: 400 var(--t-label)/1 var(--body); letter-spacing: .18em; color: var(--blue-2); }
.track-card h2 { font: 300 var(--t-2)/1 var(--display); letter-spacing: -.03em; margin-bottom: 16px; }
.track-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.track-card li { padding: 7px 14px; border-radius: 99px; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); font-size: var(--t-small); }
.track-card .go { position: absolute; top: 20px; right: 20px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); transition: background .3s, rotate .4s var(--ease); rotate: 90deg; }
.track-card .go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.track-card:hover .go { background: var(--blue); rotate: 135deg; }

.t-sec { padding-top: clamp(80px, 11vw, 150px); }
.t-head { margin-bottom: clamp(28px, 4vw, 48px); }
.t-head .eyebrow { margin-bottom: 18px; }
.t-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 72px); align-items: start; }
.t-intro { font: 300 var(--t-3)/1.5 var(--display); color: var(--text); max-width: 40ch; margin: 0; }
.t-p { color: var(--soft); font-size: var(--t-body); max-width: 64ch; }
.t-p.strong { color: var(--text); font: 300 var(--t-3)/1.5 var(--display); max-width: 44ch; margin: 40px 0 32px; }
.voorwie { position: relative; padding: 32px; border-radius: 20px; background: radial-gradient(500px circle at 100% 0, rgba(1,152,233,.28), transparent 65%), var(--navy-2); border: 1px solid rgba(1,152,233,.35); }
.voorwie h3 { font: 400 var(--t-label)/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--blue-2); margin-bottom: 16px; }
.voorwie p { color: var(--text); font-size: var(--t-body); }
.voorwie p:last-child { margin: 0; color: var(--soft); }
.t-sub-h { font: 400 var(--t-label)/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: clamp(56px, 7vw, 88px) 0 24px; display: flex; align-items: center; gap: 16px; }
.t-sub-h::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.offer { position: relative; padding: clamp(28px, 3.4vw, 44px); border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); overflow: hidden; isolation: isolate; transition: border-color .3s, translate .5s var(--ease); }
.offer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(1,152,233,.2), transparent 65%); opacity: 0; transition: opacity .3s; }
.offer:hover { border-color: rgba(1,152,233,.5); translate: 0 -4px; }
.offer:hover::before { opacity: 1; }
.pill { display: inline-block; padding: 7px 14px; border-radius: 99px; border: 1px solid rgba(1,152,233,.5); color: var(--blue-2); font-size: var(--t-small); letter-spacing: .04em; }
.offer h3 { font: 300 var(--t-2)/1.05 var(--display); letter-spacing: -.03em; margin: 22px 0 16px; }
.offer p { color: var(--soft); font-size: var(--t-body); }
.ticks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: start; color: var(--text); font-size: var(--t-body); }
.ticks svg { width: 22px; height: 22px; flex: none; padding: 4px; border-radius: 50%; background: var(--blue); fill: none; stroke: #fff; stroke-width: 3; margin-top: 1px; }
.more { display: inline-flex; gap: 10px; margin-top: 24px; color: var(--blue-2); text-decoration: none; font-weight: 500; }
.more:hover { color: #fff; }
.more .arr { transition: translate .3s var(--ease); }
.more:hover .arr { translate: 4px 0; }

.groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
.group { padding: 32px 28px; border-radius: 20px; border-top: 2px solid var(--blue); background: rgba(255,255,255,.03); transition: background .3s; }
.group:hover { background: rgba(1,152,233,.08); }
.group .num { font: 200 var(--t-2)/1 var(--display); color: transparent; -webkit-text-stroke: 1px var(--blue-2); }
.group h4 { font: 400 var(--t-3)/1.15 var(--display); margin: 18px 0 12px; }
.group p { color: var(--soft); margin: 0; font-size: var(--t-body); }

.community { margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 5vw, 72px); padding: clamp(32px, 5vw, 64px); border-radius: 28px; background: radial-gradient(800px circle at 100% 0, rgba(1,152,233,.26), transparent 60%), var(--navy-2); border: 1px solid rgba(1,152,233,.3); }
.community .eyebrow { margin-bottom: 14px; }
.c-head { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 28px); margin-bottom: 28px; }
.c-head h3 { margin: 0; }
.c-logo { width: clamp(84px, 9vw, 120px); height: auto; flex: none; filter: drop-shadow(0 12px 30px rgba(0,0,0,.45)); transition: rotate .6s var(--ease), scale .6s var(--ease); }
.community:hover .c-logo { rotate: -8deg; scale: 1.04; }
.community h3 { font: 300 var(--t-2)/1.05 var(--display); letter-spacing: -.03em; margin-bottom: 24px; }
.community p { color: var(--soft); font-size: var(--t-body); }
.community .c-init { color: var(--text); margin: 24px 0 0; }
.community .c-list-h { color: var(--text); margin-bottom: 0; }
.community .ticks { margin-top: 16px; }
.c-cta { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line-2); }
.c-cta p { margin: 0 0 6px; color: var(--text); }
.c-cta .c-mail { color: var(--soft); margin-bottom: 22px; }
.t-quote { margin: clamp(40px, 5vw, 64px) 0 0; max-width: 860px; padding-left: clamp(20px, 3vw, 36px); border-left: 2px solid var(--blue); }
.t-quote figcaption { font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.t-quote blockquote { margin: 0; font: 300 var(--t-body)/1.5 var(--display); letter-spacing: -.01em; color: var(--soft); }

.questions { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.questions li { display: flex; gap: 14px; align-items: center; padding: 18px 22px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.03); font-size: var(--t-body); color: var(--text); transition: border-color .3s, background .3s; }
.questions li:hover { border-color: rgba(1,152,233,.5); background: rgba(1,152,233,.07); }
.questions span { font-size: var(--t-3); flex: none; }
.clients { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.clients span { color: var(--muted); font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase; margin-right: 8px; }
.clients a { font: 400 var(--t-3)/1 var(--display); color: var(--text); text-decoration: none; padding: 14px 24px; border-radius: 99px; border: 1px solid var(--line-2); transition: background .3s, border-color .3s; }
.clients a:hover { background: var(--blue); border-color: var(--blue); }

.t-mc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(32px, 5vw, 64px); border-radius: 28px; background: radial-gradient(800px circle at 0 0, rgba(1,152,233,.28), transparent 60%), var(--navy-2); border: 1px solid rgba(1,152,233,.3); }
.t-mc h2 { font: 300 var(--t-2)/1.08 var(--display); letter-spacing: -.03em; margin-bottom: 20px; }
.t-mc p { color: var(--soft); font-size: var(--t-body); margin-bottom: 28px; }
.t-mc .t-quote { margin: 0; }
.t-cta { text-align: center; max-width: 820px; }
.t-cta p { color: var(--soft); font-size: var(--t-3); margin: 24px auto 36px; max-width: 52ch; }
.t-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  .tracks, .t-grid, .offers, .groups, .questions, .t-mc, .community { grid-template-columns: 1fr; }
  .track-card { min-height: 360px; }
}


/* ---------- Reviews-pagina ---------- */
.rv-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; max-width: 980px; }
.rv-intro p { font: 300 var(--t-3)/1.5 var(--display); color: var(--text); margin: 0; max-width: 54ch; }
.spotlight { position: relative; margin-top: clamp(48px, 7vw, 96px); padding: clamp(40px, 7vw, 96px) clamp(24px, 6vw, 96px) clamp(28px, 4vw, 48px); border-radius: 32px; overflow: hidden; isolation: isolate; text-align: center;
  background: radial-gradient(60% 80% at 50% 0%, rgba(1,152,233,.32), transparent 70%), linear-gradient(180deg, var(--navy-2), var(--navy)); border: 1px solid rgba(1,152,233,.28); }
.spotlight::before { content: "\201C"; position: absolute; left: 50%; top: -0.08em; translate: -50% 0; z-index: -1; font: 300 clamp(220px, 30vw, 420px)/1 var(--display); color: rgba(255,255,255,.05); pointer-events: none; }
.slides { display: grid; min-height: clamp(260px, 26vw, 340px); align-items: center; }
.slide { grid-area: 1 / 1; margin: 0; opacity: 0; translate: 0 18px; filter: blur(6px); transition: opacity .8s var(--ease), translate .8s var(--ease), filter .8s var(--ease); pointer-events: none; }
.slide.is-on { opacity: 1; translate: 0 0; filter: none; pointer-events: auto; }
.slide blockquote { margin: 0 auto; max-width: 30ch; font: 300 var(--t-2)/1.2 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.slide figcaption { margin-top: 28px; display: grid; gap: 4px; }
.slide figcaption b { font: 700 var(--t-body)/1.2 var(--display); }
.slide figcaption span { color: var(--muted); font-size: var(--t-small); }
.spot-ctrl { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: clamp(28px, 4vw, 44px); }
.nav-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-2); background: transparent; color: var(--text); display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s; flex: none; }
.nav-btn:hover { background: var(--blue); border-color: var(--blue); }
.nav-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.dots { display: flex; gap: 6px; }
.dot { width: 26px; height: 4px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,.18); cursor: pointer; overflow: hidden; position: relative; }
.dot i { position: absolute; inset: 0; background: var(--blue-2); transform: scaleX(0); transform-origin: left; }
.dot.is-on i { transform: scaleX(1); }
.spotlight.playing .dot.is-on i { transform: scaleX(0); animation: dotfill var(--spot-ms, 7000ms) linear forwards; }
.spotlight.paused .dot.is-on i { animation-play-state: paused; }
@keyframes dotfill { to { transform: scaleX(1); } }

.wall-head { margin: clamp(72px, 9vw, 120px) 0 28px; display: flex; align-items: center; gap: 16px; }
.wall-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.wall { columns: 3 320px; column-gap: 20px; }
.rcard { break-inside: avoid; margin: 0 0 20px; padding: 28px; border-radius: 20px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); position: relative; transition: border-color .3s, background .3s; }
.rcard:hover { border-color: rgba(1,152,233,.45); background: linear-gradient(160deg, rgba(1,152,233,.1), rgba(255,255,255,.02)); }
.rc-body { position: relative; }
.rc-body p { margin: 0; font: 300 var(--t-body)/1.6 var(--display); color: var(--text); display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.rcard.open .rc-body p { -webkit-line-clamp: unset; display: block; }
.rc-more { margin-top: 12px; padding: 0; border: 0; background: none; color: var(--text); font: 500 var(--t-small)/1 var(--body); cursor: pointer; text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.rc-more:hover { text-decoration-color: var(--blue-2); }
.rcard footer { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.av { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; font: 500 var(--t-small)/1 var(--display); color: #fff; background: linear-gradient(135deg, var(--blue), var(--blue-3)); box-shadow: 0 0 0 3px rgba(1,152,233,.15); }
.rcard cite { font-style: normal; display: grid; gap: 2px; }
.rcard cite b { font: 700 var(--t-body)/1.2 var(--display); }
.rcard cite span { color: var(--muted); font-size: var(--t-small); }
.rv-end { margin-top: clamp(56px, 7vw, 96px); text-align: center; display: grid; justify-items: center; gap: 20px; }
.rv-end p { font: 300 var(--t-2)/1.15 var(--display); letter-spacing: -.02em; margin: 0; }

/* ---------- Foto's: podium + filmstrip ---------- */
.fo-intro { margin-bottom: clamp(32px, 5vw, 56px); }
.stage { position: relative; }
.stage-fig { --sh: min(74vh, 780px); position: relative; margin: 0; isolation: isolate; display: grid; place-items: center; height: var(--sh); border-radius: 24px; background: rgba(0,0,0,.25); border: 1px solid var(--line); overflow: hidden; }
.stage-fig::before { content: ""; position: absolute; inset: -10%; z-index: -1; background: var(--glow) center / cover no-repeat; filter: blur(70px) saturate(1.4) brightness(.7); opacity: .7; transition: background-image .6s; }
.stage-fig img { max-width: calc(100% - 48px); max-height: calc(var(--sh) - 48px); width: auto; height: auto; border-radius: 6px; object-fit: contain; view-transition-name: stage-img; box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); cursor: zoom-in; }
.stage-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 18px 0; }
.stage-bar .count { color: var(--muted); font-size: var(--t-small); letter-spacing: .1em; }
.stage-bar .count b { color: var(--text); font-weight: 500; }
.stage-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pill-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 99px; border: 0; background: var(--text); color: var(--black); font: 500 var(--t-small)/1 var(--body); text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.pill-btn:hover { background: var(--blue); color: #fff; }
.pill-btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.pill-btn.ghost:hover { background: rgba(255,255,255,.08); }
.pill-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pill-btn [data-size] { opacity: .65; font-weight: 400; }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.strip::-webkit-scrollbar { display: none; }
.thumb { position: relative; padding: 0; border: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 4; background: var(--navy-2); cursor: pointer; opacity: .45; filter: grayscale(.6); transition: opacity .3s, filter .3s, translate .3s var(--ease); }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.thumb:hover { opacity: .85; filter: none; translate: 0 -3px; }
.thumb.is-on { opacity: 1; filter: none; box-shadow: inset 0 0 0 2px var(--blue-2); }
.thumb.is-on::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px var(--blue-2); }
dialog.lightbox img { transition: opacity .25s var(--ease), scale .35s var(--ease); }
dialog.lightbox img.fading { opacity: 0; scale: .985; }
dialog.lightbox .lb-count { position: fixed; left: 50%; bottom: 26px; translate: -50% 0; color: var(--soft); font-size: var(--t-small); letter-spacing: .1em; }

@media (max-width: 900px) {
  .rv-intro { grid-template-columns: 1fr; }
  .spotlight::before { font-size: 220px; }
  .slides { min-height: 360px; }
  .stage-fig { --sh: calc((100vw - 32px) * 1.25); }
  .stage-fig img { max-width: calc(100% - 24px); max-height: calc(var(--sh) - 24px); }
  .strip { grid-auto-columns: 22%; }
  .stage-bar { justify-content: center; }
  .stage-bar .count { width: 100%; text-align: center; }
}

/* ---------- Footer ---------- */
.site-footer { padding: clamp(80px, 10vw, 140px) 0 40px; border-top: 1px solid var(--line); background: radial-gradient(900px circle at 10% 100%, rgba(1,152,233,.12), transparent 60%), var(--black); }
.site-footer .name { font: 300 var(--t-1)/.95 var(--display); letter-spacing: -.04em; }
.site-footer .nom { font: 300 var(--t-3)/1.3 var(--body); color: var(--soft); margin-top: 18px; }
.foot-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; margin-top: clamp(48px, 7vw, 96px); padding-top: 36px; border-top: 1px solid var(--line); }
.foot-grid h2 { font: 400 var(--t-label)/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-grid a { text-decoration: none; color: var(--soft); transition: color .2s; }
.foot-grid a:hover { color: #fff; }
.contact-lines a { display: flex; align-items: center; gap: 12px; font-size: var(--t-3); color: var(--text); }
.contact-lines svg { width: 18px; height: 18px; fill: none; stroke: var(--blue-2); stroke-width: 1.6; flex: none; }
.foot-grid address { font-style: normal; color: var(--muted); font-size: var(--t-small); margin-top: 18px; line-height: 1.5; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 56px; color: var(--muted); font-size: var(--t-small); }
.foot-bottom .social { margin: 0; }

/* ---------- Responsief ---------- */
@media (max-width: 1180px) {
  .menu, .site-header .social { display: none; }
  .burger { display: grid; place-items: center; }
}
@media (max-width: 900px) {
  :root { --header: 68px; --t-body: 17px; }
  body { font-size: var(--t-body); }
  .over, .cols, .duo, .mc-offer, .foot-grid, .garantie { grid-template-columns: 1fr; }
  .aside { position: static; max-width: 520px; }
  .feats, .grid3, .mc-quotes { grid-template-columns: 1fr; }
  .icons6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module, .module:nth-child(even) { grid-template-columns: 1fr; }
  .module:nth-child(even) .mimg { order: 0; }
  .module .mimg { min-height: 220px; aspect-ratio: 16 / 9; }
  .panel { min-height: 440px; }
  .hero .photo img { object-position: 60% 20%; }
  .hero .copy { padding-bottom: 112px; }
  .down { bottom: 28px; }
  .hero { align-items: end; }
  .hero::after { height: 60%; }
  .search { margin-left: 0; width: 100%; }
  .stack .review { position: static; }
  .garantie img { width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Getypte tekst in het nieuwsbriefformulier: wint van ActiveCampaign's color:#000 !important */
html body #inhoud .ac-form form input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { color: var(--text) !important; -webkit-text-fill-color: var(--text) !important; caret-color: var(--blue-2); background: rgba(255,255,255,.06) !important; }
html body #inhoud .ac-form form input::placeholder { color: var(--muted) !important; -webkit-text-fill-color: var(--muted) !important; }
html body #inhoud .ac-form form input:-webkit-autofill, html body #inhoud .ac-form form input:-webkit-autofill:hover, html body #inhoud .ac-form form input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text) !important; -webkit-box-shadow: 0 0 0 1000px #0b2440 inset !important; transition: background-color 9999s; }