/* Montserrat staat op de eigen site (public/assets/fonts), zodat er bij een bezoek niets naar Google gaat. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/montserrat-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/montserrat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/*
  Dreambody Lab — stylesheet.
  Eén vorm draagt de hele site: de zeshoek van de lampen boven de Booty Builder Zone. Hij omlijst de foto's, snijdt de
  knoppen, is het opsommingsteken en telt de acht plekken van een groep. Geen verlopen, geen schaduwen, geen lijntjes.
*/
:root {
  /* kleur: één grond, één inkt, één accent (merk) */
  --ground: #0e0f1e;
  --surface: #17182c;
  --surface-2: #23253f;
  --ink: #f3f1f2;
  --ink-soft: #c4c6d4;
  --accent: #d92a69;
  --accent-press: #c21f59;
  --accent-deep: #9e1446;
  --bronze: #c9a08a;
  --bronze-deep: #a98069;
  --paper: #ebe7e6;
  --paper-ink: #15162a;
  --paper-soft: #4a4c60;
  --field-line: #3a3c5c;
  --ok: #8fe0b0;
  --err: #ff9cbc;

  /* type: vijf maten */
  --font: Montserrat, system-ui, sans-serif;
  --t-display: clamp(2.6rem, 6.2vw, 6rem);
  --t-head: clamp(1.625rem, 3.6vw, 3.4rem);
  --t-lead: clamp(1.25rem, 1.9vw, 1.75rem);
  --t-body: 1.0625rem;
  --t-small: .875rem;

  /* ruimte */
  --margin: clamp(1rem, 3vw, 2rem);
  --wide: 1320px;
  --gap-section: clamp(6rem, 12vw, 11rem);
  --nav-h: 76px;

  /* de vorm */
  --hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  --hex-ratio: 1.1547;
  --cut: .9em;
  --btn-hex: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%);

  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 var(--t-body)/1.6 var(--font);
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .2em; }
h1, h2, h3, h4 { font-family: var(--font); margin: 0 0 .5em; overflow-wrap: break-word; }
h1 { font-size: var(--t-display); font-weight: 700; line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
h2 { font-size: var(--t-head); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
h3 { font-size: var(--t-lead); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
h4 { font-size: var(--t-body); font-weight: 700; }
p { margin: 0 0 1.1em; }
strong { font-weight: 700; }
figure { margin: 0; }
[hidden] { display: none !important; }
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 3px solid var(--bronze); outline-offset: 3px; }

.container { width: min(var(--wide), 100% - 2 * var(--margin)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--ground); padding: .7rem 1rem; z-index: 100; font-weight: 700; }
.skip:focus { left: 1rem; top: 1rem; }
.lead { font-size: var(--t-lead); line-height: 1.35; max-width: 34ch; color: var(--ink); }
.tabular { font-variant-numeric: tabular-nums; }

/* De vorm als masker voor elke foto */
.hex { clip-path: var(--hex); aspect-ratio: var(--hex-ratio); overflow: hidden; background: var(--surface-2); }
.hex img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Navigatie: een gewone balk ---------- */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: var(--ground); color: var(--ink); }
.nav__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; text-decoration: none; }
.brand img { height: 44px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav__links a:not(.btn) { text-decoration: none; font-size: var(--t-body); font-weight: 500; color: var(--ink-soft); padding: .4rem 0; transition: color .2s; }
.nav__links a:not(.btn):hover { color: var(--ink); }
.nav__links a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.nav__toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; margin-right: -10px; cursor: pointer; }
.nav__toggle span { display: block; height: 2px; background: var(--ink); margin: 6px 0; transition: transform .25s var(--ease), opacity .25s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Knoppen: gesneden als de zeshoek ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: .85rem calc(var(--cut) + 1.1rem);
  clip-path: var(--btn-hex); border: 0; cursor: pointer; text-decoration: none; text-align: center;
  font: 700 var(--t-body)/1.2 var(--font); letter-spacing: -.005em;
  background: var(--surface-2); color: var(--ink);
  transition: background-color .2s, color .2s, transform .15s var(--ease);
}
.btn:hover { background: #30334f; }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 0; background: var(--ink); color: var(--ground); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-press); }
.btn--ghost, .btn--outline { background: var(--surface-2); color: var(--ink); }
.btn--sm { min-height: 2.6rem; padding: .55rem calc(var(--cut) + .8rem); font-size: var(--t-small); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.btn-row--center { justify-content: center; }
.section--cream .btn--ghost, .section--cream .btn--outline { background: var(--paper-ink); color: var(--paper); }
.section--cream .btn--ghost:hover, .section--cream .btn--outline:hover { background: #2b2d48; }

/* Opsommingsteken: een kleine zeshoek */
.checks { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .75rem; max-width: 46ch; }
.checks li { position: relative; padding-left: 1.75rem; }
.checks li::before { content: ""; position: absolute; left: 0; top: .42em; width: .95em; height: calc(.95em / var(--hex-ratio)); clip-path: var(--hex); background: var(--accent); }

/* ---------- Secties ---------- */
.section { padding: calc(var(--gap-section) / 2) 0; background: var(--ground); }
.section--cream { background: var(--paper); color: var(--paper-ink); }
.section--cream .lead, .section--cream p { color: var(--paper-ink); }
.section--dark { background: var(--surface); }
.section--dark2 { background: var(--surface); }
.section__head { max-width: 62ch; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section__head--center { text-align: center; margin-inline: auto; }
.section__head--center .lead { margin-inline: auto; }
.section__actions { margin-top: 2.5rem; }
.section--aansluitend { padding-bottom: 0; }
.section--foto { padding-top: 0; }
.optioneel { font-weight: 400; color: var(--ink-soft); }
.note { margin-top: 2.5rem; max-width: 62ch; color: var(--ink-soft); font-size: var(--t-small); }
.note--smal { max-width: 70ch; }
.section--cream .note { color: var(--paper-soft); }

/* ---------- Home: hero met de vorm op ware grootte ---------- */
.hero { position: relative; overflow: hidden; min-height: calc(100svh - var(--nav-h)); display: flex; align-items: center; padding: 3rem 0 4rem; }
.hero__shape {
  position: absolute; left: 78%; top: 52%; width: min(118vh, 64vw); aspect-ratio: var(--hex-ratio);
  transform: translate(-50%, -50%); clip-path: var(--hex); background: var(--accent); overflow: hidden;
}
.hero__shape img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.hero__content { position: relative; z-index: 1; }
.hero__text { max-width: min(44vw, 640px); }
.hero h1 { margin-bottom: 2rem; }
.hero__lead { font-size: var(--t-lead); line-height: 1.35; max-width: 34ch; margin: 0; }
.hero__collab { margin: 2.5rem 0 0; font-size: var(--t-small); color: var(--ink-soft); }
.hero__collab a { color: var(--ink); }

/* Statement met drie uitsneden van de zaal in de regel */
.statement { padding: clamp(7rem, 18vh, 12rem) 0; }
.statement__in { max-width: 60rem; margin-inline: auto; text-align: center; }
.statement__zin { font-size: clamp(1.375rem, 2.5vw, 2.25rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 2rem; text-wrap: balance; }
.statement__duim { display: inline-block; height: 1.3em; aspect-ratio: var(--hex-ratio); vertical-align: -.3em; margin: 0 .1em; clip-path: var(--hex); overflow: hidden; background: var(--surface-2); }
.statement__duim img { width: 100%; height: 100%; object-fit: cover; }
.statement__lead { max-width: 60ch; margin: 0 auto; color: var(--ink); }

/* Twee kolommen met een zeshoekige foto */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.split--rev > :first-child { order: 2; }
.split--top { align-items: start; }
.media { clip-path: var(--hex); aspect-ratio: var(--hex-ratio); overflow: hidden; background: var(--surface-2); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--tall, .media--badge { aspect-ratio: var(--hex-ratio); }
.media--badge { display: grid; place-items: center; padding: 14%; }
.media--badge img { object-fit: contain; }

/* De band: acht plekken per groep */
.acht { background: var(--accent); color: #fff; padding: clamp(3.5rem, 7vw, 5.5rem) 0; }
.acht__in { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; align-items: center; }
.acht h2 { margin: 0 0 .4em; max-width: 16ch; }
.acht p { margin: 0; font-size: var(--t-lead); line-height: 1.35; max-width: 36ch; }
.acht__raat { display: grid; grid-template-columns: repeat(4, minmax(0, 8.5rem)); gap: .5rem; justify-content: end; padding-right: 4.5rem; }
.acht__raat span { aspect-ratio: var(--hex-ratio); clip-path: var(--hex); background: var(--ground) url("../assets/img/toestellen-roze.jpg") no-repeat; background-size: 460% 230%; }
.acht__raat span:nth-child(4n+1) { background-position-x: 0; }
.acht__raat span:nth-child(4n+2) { background-position-x: 33%; }
.acht__raat span:nth-child(4n+3) { background-position-x: 66%; }
.acht__raat span:nth-child(4n) { background-position-x: 100%; }
.acht__raat span:nth-child(-n+4) { background-position-y: 15%; }
.acht__raat span:nth-child(n+5) { background-position-y: 85%; }
.acht__raat span:nth-child(n+5) { transform: translateX(calc(50% + .25rem)); margin-top: -12%; }

/* De zone: één frame, de inhoud wisselt */
.zone__in { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.zone__frame { position: relative; width: 100%; aspect-ratio: var(--hex-ratio); cursor: pointer; }
.zone__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; display: grid; grid-template-rows: 1fr auto; }
.zone__slide.is-on { opacity: 1; position: relative; }
.zone__slide .hex { width: 100%; }
.zone__slide figcaption { margin-top: 1rem; font-size: var(--t-small); color: var(--ink-soft); text-align: center; }
.zone__slide figcaption strong { color: var(--ink); }
.zone__frame:focus-visible { outline-offset: 8px; }
.zone .stations { margin-top: 2rem; }

/* ---------- Tarieven: tegels die oplopen ---------- */
.prijzen__kop { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: end; margin-bottom: 2rem; }
.prijzen__kop h2 { margin: 0; }
.kies { margin: 0; }
.kies h3 { font-size: var(--t-body); margin: 0 0 .75rem; }
.kies__knoppen { display: flex; flex-wrap: wrap; gap: .5rem; }
.kies__knoppen button { font: 600 var(--t-body)/1.2 var(--font); min-height: 2.75rem; padding: .55rem calc(var(--cut) + .8rem); clip-path: var(--btn-hex); border: 0; cursor: pointer; background: var(--surface-2); color: var(--ink); transition: background-color .2s, transform .15s var(--ease); }
.kies__knoppen button:hover { background: #30334f; }
.kies__knoppen button:active { transform: scale(.97); }
.kies__knoppen button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.kies__knoppen button:focus-visible { outline: 0; background: var(--bronze); color: var(--ground); }
.kies__uitleg { margin: .9rem 0 0; min-height: 1.6em; color: var(--ink-soft); }

.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end; }
.price { position: relative; display: flex; flex-direction: column; padding: 1.75rem 1.75rem 0; background: var(--surface-2); color: var(--ink); min-height: 400px; transition: opacity .3s, transform .3s var(--ease); }
.price:nth-child(2) { min-height: 500px; background: var(--bronze); color: var(--ground); }
.price:nth-child(3) { min-height: 600px; background: var(--accent); color: #fff; }
.price h3 { font-size: var(--t-lead); margin: 0 0 .25rem; }
.price__amount { font-size: var(--t-head); font-weight: 700; line-height: 1; letter-spacing: -.03em; margin: .5rem 0 .5rem; }
.price__amount small { font-size: var(--t-body); font-weight: 600; margin-left: .35rem; letter-spacing: 0; }
.price__meta { font-weight: 700; margin-bottom: 1rem; }
.price__per { font-weight: 600; margin: 0 0 1rem; }
.price p, .price li { font-size: var(--t-body); color: inherit; }
.price p { flex: 1; }
.price ul.checks { margin: 0 0 1rem; flex: 1; gap: .55rem; align-content: start; }
.price:nth-child(3) .checks li::before { background: var(--ground); }
.price__tag { display: none; }
.price .btn { margin: auto -1.75rem 0; width: calc(100% + 3.5rem); clip-path: none; justify-content: flex-start; min-height: 64px; padding: 0 1.75rem; background: rgba(0, 0, 0, .28); color: inherit; }
.price .btn:hover { background: rgba(0, 0, 0, .4); }
.price .btn:focus-visible { background: var(--ink); color: var(--ground); }
.pricing.is-gekozen .price:not(.is-gekozen) { opacity: .45; }
.pricing.is-gekozen .price.is-gekozen { transform: translateY(-8px); }
/* Op de pagina lidmaatschap staan de tegels in de volgorde rittenkaart, traject, experience */
.price--featured { order: 0; }

/* ---------- Ervaringen: citaten verspringen ---------- */
#ervaringen .grid-3 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3rem 1.5rem; }
.ervaring { grid-column: 2 / span 6; margin: 0; }
.ervaring:nth-child(2n) { grid-column: 6 / span 6; margin-top: 4rem; }
.ervaring blockquote { margin: 0 0 1rem; font-size: clamp(1.4rem, 2.3vw, 2rem); font-weight: 500; line-height: 1.25; letter-spacing: -.015em; }
.ervaring figcaption { font-weight: 700; color: var(--bronze); }
.section--cream .ervaring figcaption { color: var(--accent-deep); }

/* ---------- Afsluiting: de actietegel ---------- */
.cta { position: relative; overflow: hidden; padding: calc(var(--gap-section) / 2) 0; background: var(--ground); }
.cta .container {
  position: relative; background: var(--accent); color: #fff; min-height: 360px; padding: clamp(2rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: center; width: min(900px, 100% - 2 * var(--margin));
}
.cta .container::before, .cta .container::after { content: ""; position: absolute; top: 0; bottom: 0; width: 100vw; }
.cta .container::before { right: calc(100% + 10px); background: var(--bronze); }
.cta .container::after { left: calc(100% + 10px); background: var(--surface-2); }
.cta h2 { max-width: 18ch; margin: 0 0 .6rem; }
.cta p { max-width: 46ch; margin: 0; }
.cta .btn-row { margin-top: 1.75rem; }
.cta .btn--primary { background: #fff; color: var(--accent-deep); }
.cta .btn--primary:hover { background: var(--paper); }
.cta .btn--primary:focus-visible { background: var(--ground); color: #fff; }
.cta--foto .container::before { background: var(--surface-2) url("../assets/img/plate-loaded-donker.jpg") 60% 50% / cover no-repeat; }

/* ---------- Subpagina's: kop met de vorm ---------- */
.page-hero { position: relative; overflow: hidden; padding: clamp(4rem, 10vw, 8rem) 0 clamp(3.5rem, 8vw, 6rem); background: var(--ground); }
.page-hero__shape {
  position: absolute; right: calc(-1 * min(14vw, 220px)); top: 50%; width: min(50vw, 700px); aspect-ratio: var(--hex-ratio);
  transform: translateY(-50%); clip-path: var(--hex); background: var(--accent); overflow: hidden;
}
.page-hero__shape img { width: 100%; height: 100%; object-fit: cover; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero__shape ~ .container > * { max-width: min(58%, 46rem); }
.page-hero h1 { font-size: clamp(1.875rem, 5vw, 4.5rem); max-width: 18ch; }
.page-hero--form .lead { font-size: var(--t-body); max-width: 52ch; }
.form-foto { margin-top: 2.5rem; max-width: 440px; }
.page-hero--form .form-wrap > * > * { animation: rijs .7s var(--ease) both; }
.page-hero--form .form-wrap > * > :nth-child(2) { animation-delay: 80ms; }
.page-hero--form .form-wrap > * > :nth-child(3) { animation-delay: 160ms; }
.page-hero--form .form-wrap > * > :nth-child(n+4) { animation-delay: 240ms; }
#team .section__head { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem clamp(2rem, 6vw, 6rem); align-items: start; }
#team .section__head h2 { margin: 0; }
.page-hero .lead { max-width: 40ch; }
.page-hero--form { padding-bottom: clamp(4rem, 9vw, 7rem); }
.legal__meta { margin: 0; font-size: var(--t-small); color: var(--ink-soft); }
.legal__meta a { color: var(--ink); }
.legal__acties { margin: 0 0 1rem; }

/* ---------- Kaarten en rasters (subpagina's): vlakken in een toonstap, geen lijnen ---------- */
.grid-2, .grid-3, .grid-4 { display: grid; gap: 8px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--surface); padding: 2rem; }
.section--dark .card, .section--dark2 .card { background: var(--surface-2); }
.section--cream .card { background: #dfdad8; }
.card h3 { font-size: var(--t-lead); }
.card p:last-child { margin-bottom: 0; }
.card::before { content: ""; display: block; width: 2.2rem; aspect-ratio: var(--hex-ratio); clip-path: var(--hex); background: var(--accent); margin-bottom: 1.25rem; }
.card.partner::before { display: none; }
.partner { display: flex; flex-direction: column; align-items: flex-start; }
.partner__logo { height: 84px; display: flex; align-items: center; margin-bottom: 1rem; }
.partner__logo img { height: 46px; width: auto; }
.partner__logo img.is-hrm { height: 84px; }
.partner__tag { font-weight: 700; color: var(--bronze); margin-bottom: .75rem; }
.partner p { flex: 1; margin-bottom: 1.5rem; }

.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.strip img { width: 100%; aspect-ratio: var(--hex-ratio); object-fit: cover; clip-path: var(--hex); }
.shot { position: relative; }
.shot img { width: 100%; aspect-ratio: var(--hex-ratio); object-fit: cover; clip-path: var(--hex); }
.shot figcaption { margin-top: .75rem; text-align: center; }
.shot figcaption strong { display: block; }
.shot figcaption span { color: var(--ink-soft); font-size: var(--t-small); }

/* Stappen van een training en de acht stations: zeshoek als teken, de volgorde zit in de lijst zelf */
.steps, .stations, .boekstappen { list-style: none; margin: 1.75rem 0; padding: 0; display: grid; gap: .5rem; }
.steps li, .stations li { position: relative; padding: .85rem 1rem .85rem 2.75rem; background: var(--surface); font-weight: 600; }
.section--cream .steps li { background: #dfdad8; }
.section--dark .stations li { background: var(--surface-2); }
.steps li::before, .stations li::before { content: ""; position: absolute; left: 1rem; top: 50%; width: 1rem; aspect-ratio: var(--hex-ratio); transform: translateY(-50%); clip-path: var(--hex); background: var(--accent); }
.stations { grid-template-columns: 1fr 1fr; }
.boekstappen { gap: 1.1rem; margin-top: 2rem; }
.boekstappen li { position: relative; padding-left: 2.25rem; }
.boekstappen li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1.2rem; aspect-ratio: var(--hex-ratio); clip-path: var(--hex); background: var(--accent); }
.boekstappen strong { display: block; }
.boekstappen span { color: var(--ink-soft); }
.experience-tip { margin: 1.5rem 0 0; color: var(--ink-soft); }

/* Info naast het formulier */
.info-list { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; }
.info-list strong { display: block; }
.info-list span, .info-list a { color: var(--ink-soft); }

/* ---------- Coaches (uit het admin panel) ---------- */
.coaches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 2.5rem; }
.coach { display: grid; grid-template-columns: 160px 1fr; gap: 1.5rem; background: var(--surface); padding: 1.5rem; align-items: start; }
.coach__foto { width: 160px; aspect-ratio: var(--hex-ratio); clip-path: var(--hex); overflow: hidden; background: var(--surface-2); display: grid; place-items: center; }
.coach__foto img { width: 100%; height: 100%; object-fit: cover; }
.coach__foto span { font-size: 2.5rem; font-weight: 700; color: var(--bronze); }
.coach h3 { margin-bottom: .2rem; font-size: var(--t-lead); }
.coach__rol { font-weight: 700; color: var(--bronze); margin-bottom: .75rem; }
.coach p { margin-bottom: .7rem; }
.coach__quote { font-style: italic; color: var(--ink); }

/* ---------- Adres ---------- */
.adres { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.adres address { font-style: normal; font-size: var(--t-body); line-height: 1.6; margin: 0 0 1.6rem; }
.adres address strong { display: block; color: var(--bronze); margin-bottom: .3rem; }

/* ---------- Lopende tekst (voorwaarden, privacy) ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: var(--t-lead); letter-spacing: -.015em; margin-top: 2.6rem; }
.prose a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.prose ul { padding-left: 1.2rem; }
.section--cream .prose a { color: var(--paper-ink); }
.prose--legal h2 { scroll-margin-top: calc(var(--nav-h) + 1rem); }
.prose--legal ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.prose--legal li { margin-bottom: .6rem; padding-left: .3rem; }
.prose--legal li::marker { font-weight: 700; color: var(--accent); }
.legal__aanvulling { margin-top: 3rem; padding: 1.75rem 2rem; background: var(--surface); }
.section--cream .legal__aanvulling { background: #dfdad8; }
.legal__aanvulling h2 { margin-top: 0; }

/* ---------- FAQ: vlakken in plaats van lijnen ---------- */
.faq { max-width: 860px; margin-inline: auto; display: grid; gap: 6px; }
.faq details { background: var(--surface); }
.section--cream .faq details { background: #dfdad8; }
.faq summary { cursor: pointer; list-style: none; padding: 1.25rem 3.5rem 1.25rem 1.5rem; position: relative; font-weight: 700; font-size: var(--t-body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 1.5rem; top: 50%; width: 1rem; aspect-ratio: var(--hex-ratio); transform: translateY(-50%) rotate(0); clip-path: var(--hex); background: var(--accent); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(90deg); }
.faq summary:hover { background: rgba(255, 255, 255, .03); }
.faq details p { padding: 0 1.5rem 1.4rem; margin: 0; max-width: 65ch; }
.faq__meer { max-width: 860px; margin: 2rem auto 0; }
.faq__meer a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* ---------- Rooster ---------- */
#rooster .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 6vw, 6rem); }
#rooster .container > * { grid-column: 2; }
#rooster .section__head { grid-column: 1; grid-row: 1 / span 6; }
.rooster { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 900px; }
.rooster__item { display: grid; grid-template-columns: 9rem 10rem 1fr auto; align-items: center; gap: 1rem; background: var(--surface); padding: 1.1rem 1.4rem; }
.section--cream .rooster__item { background: #dfdad8; }
.rooster__dag { font-weight: 700; }
.rooster__tijd { font-weight: 600; font-variant-numeric: tabular-nums; }
.rooster__naam { color: var(--ink-soft); }
.section--cream .rooster__naam { color: var(--paper-soft); }
.rooster__plek { font-size: var(--t-small); font-weight: 700; padding: .35rem .9rem; clip-path: var(--btn-hex); background: var(--accent); color: #fff; white-space: nowrap; }
.rooster__plek.is-vol { background: var(--surface-2); color: var(--ink-soft); }

/* ---------- Formulieren ---------- */
.form-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.form { background: var(--surface); padding: clamp(1.5rem, 4vw, 2.5rem); color: var(--ink); }
.section--cream .form { background: var(--surface); color: var(--ink); }
.section--cream .form p, .section--cream .form .form__small { color: var(--ink-soft); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { margin-bottom: 1.1rem; }
.field label, .field legend { display: block; font-weight: 600; margin-bottom: .45rem; padding: 0; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea, .field select {
  width: 100%; padding: .85rem 1rem; border: 1.5px solid var(--field-line); border-radius: 0; font: inherit; color: var(--ink); background: var(--ground);
  transition: border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: var(--accent); }
.field small { display: block; margin-top: .35rem; font-size: var(--t-small); }
fieldset.field { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.choices--twee { grid-template-columns: 1fr 1fr; }
.choices--dagen { grid-template-columns: 1fr; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: block; text-align: center; padding: .85rem .6rem; background: var(--surface-2); font-weight: 600; transition: background-color .2s, color .2s; }
.choice:hover span { background: #30334f; }
.choice input:checked + span { background: var(--accent); color: #fff; }
.choice input:focus-visible + span { outline: 3px solid var(--bronze); outline-offset: 2px; }
.choices--dagen .choice span { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; padding: .85rem 1rem; }
.choice__plek { flex-shrink: 0; font-size: var(--t-small); font-weight: 700; color: var(--bronze); }
.choice input:checked + span .choice__plek { color: #fff; }
.choice__plek.is-vol { color: var(--ink-soft); }
.consent { display: flex; align-items: flex-start; gap: .7rem; margin: 0 0 1.2rem; line-height: 1.5; cursor: pointer; }
.consent input { width: 1.2rem; height: 1.2rem; margin: .2rem 0 0; flex-shrink: 0; accent-color: var(--accent); }
.consent a, .form__small a, .agenda__leeg a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.hp { position: absolute; left: -9999px; }
.form__small { font-size: var(--t-body); color: var(--ink-soft); margin: 1rem 0 0; }
.form__status { margin-top: 1rem; padding: .9rem 1rem; font-weight: 600; display: none; }
.form__status.is-ok { display: block; background: #143326; color: var(--ok); }
.form__status.is-err { display: block; background: #3a1222; color: var(--err); }

/* Agenda met momenten (experience, rittenkaart) */
.agenda { display: grid; gap: 1.25rem; }
.agenda__kop { font-weight: 700; color: var(--bronze); margin: 0 0 .5rem; }
.agenda__dagen { display: grid; gap: 6px; }
.agenda__leeg { margin: 0; color: var(--ink-soft); }
.agenda__teller { margin: 0 0 .9rem; font-weight: 700; color: var(--bronze); }
.agenda__teller.is-compleet { color: var(--ink); }
.agenda__teller.is-compleet::after { content: ""; display: inline-block; width: .9em; aspect-ratio: var(--hex-ratio); margin-left: .45em; clip-path: var(--hex); background: var(--accent); }
.slot { position: relative; display: block; }
.slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.slot__in { display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center; gap: .3rem .8rem; padding: .85rem 1rem; background: var(--surface-2); transition: background-color .2s; }
.slot:hover .slot__in { background: #30334f; }
.slot__dag { font-weight: 700; }
.slot__tijd { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.slot__plek { font-size: var(--t-small); font-weight: 700; color: var(--bronze); white-space: nowrap; }
.slot__plek.is-vol { color: var(--ink-soft); }
.slot input:checked + .slot__in { background: var(--accent); color: #fff; }
.slot input:checked + .slot__in .slot__tijd, .slot input:checked + .slot__in .slot__plek { color: #fff; }
.slot input:focus-visible + .slot__in { outline: 3px solid var(--bronze); outline-offset: 2px; }
.slot.is-vol .slot__in, .slot.is-dicht .slot__in { opacity: .5; }
.slot.is-vol input, .slot.is-dicht input { cursor: not-allowed; }
.wachtlijst { max-width: 680px; }
.wachtlijst .section__head { margin-bottom: 1.8rem; }

/* ---------- Footer: het merk groot ---------- */
.footer { background: var(--surface); color: var(--ink-soft); padding: clamp(4rem, 8vw, 6rem) 0 2rem; }
.footer__mark { display: block; width: 100%; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.footer__mark img { width: 100%; height: auto; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; }
.footer h4 { color: var(--ink); margin: 0 0 1rem; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer a { text-decoration: none; transition: color .2s; }
.footer a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); }
.footer address { font-style: normal; line-height: 1.8; }
.footer__about { max-width: 38ch; }
.footer__about a { color: var(--ink); }
.footer__partners { display: flex; align-items: center; gap: 1.8rem; margin-top: 1.4rem; }
.footer__partners img { height: 26px; width: auto; }
.footer__partners img.is-hrm { height: 48px; }
.brand--footer { display: none; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; font-size: var(--t-small); background: var(--surface); }
.footer__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }

/* ---------- Beweging ---------- */
/* Delen van een blok komen na elkaar binnen; zonder script of met minder beweging staat alles er meteen. */
.js .reveal > * { opacity: 0; transform: translateY(16px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.js .reveal.is-in > * { opacity: 1; transform: none; }
.js .reveal > :nth-child(2) { transition-delay: 50ms; }
.js .reveal > :nth-child(n+3) { transition-delay: 100ms; }
@keyframes rijs { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.page-hero .container > * { animation: rijs .7s var(--ease) both; }
.page-hero .container > :nth-child(2) { animation-delay: 80ms; }
.page-hero .container > :nth-child(3) { animation-delay: 160ms; }
.page-hero .container > :nth-child(n+4) { animation-delay: 240ms; }
.page-hero__shape img { animation: sluiter 1.1s var(--ease) both; }
/* Lange pagina's (voorwaarden, privacy, FAQ, rooster): blokken schuiven in beeld tijdens het scrollen. Alleen waar de browser
   scrollgestuurde animatie kent; anders staat alles er gewoon. */
@supports (animation-timeline: view()) {
  .prose > *, .faq details, .rooster__item, .legal__aanvulling, .steps li {
    animation: rijs linear both; animation-timeline: view(); animation-range: entry 0% entry 35%;
  }
}
/* Het handtekeningmoment: de foto in de grote zeshoek schuift open en komt tot rust */
@keyframes sluiter { from { clip-path: inset(0 0 0 100%); transform: scale(1.12); } to { clip-path: inset(0); transform: scale(1); } }
@keyframes drijf { from { transform: scale(1); } to { transform: scale(1.06) translateX(-1.5%); } }
.js .hero__shape img { animation: sluiter 1.1s var(--ease) both, drijf 18s ease-in-out 1.1s infinite alternate; }
.js .zone__slide.is-on .hex img { animation: drijf 6s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal > * { opacity: 1; transform: none; transition: none; }
  .js .hero__shape img, .js .zone__slide.is-on .hex img, .page-hero .container > *, .page-hero__shape img, .page-hero--form .form-wrap > * > *,
  .prose > *, .faq details, .rooster__item, .legal__aanvulling, .steps li { animation: none; }
  .zone__slide { transition: none; }
  .btn:active, .kies__knoppen button:active { transform: none; }
  .pricing.is-gekozen .price.is-gekozen { transform: none; }
}

/* ---------- Afdrukken ---------- */
@media print {
  .nav, .footer, .skip, .legal__acties, .cta { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .page-hero { background: #fff; color: #000; padding: 0 0 1rem; }
  .page-hero__shape { display: none; }
  .page-hero .lead, .legal__meta, .legal__meta a { color: #333; }
  .section { padding: 0; background: #fff; color: #000; }
  .prose { max-width: none; }
  .prose p, .prose li, .prose a { color: #000; }
  .legal__aanvulling { background: #fff; }
}

/* ---------- Kleinere schermen ---------- */
/* Zeven menu-items passen pas vanaf ruim 1100px naast het logo. */
@media (max-width: 1140px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ground); padding: .5rem var(--margin) 1.5rem;
    max-height: calc(100vh - var(--nav-h)); overflow-y: auto; display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a:not(.btn) { display: block; padding: .95rem 0; font-size: 1.125rem; }
  .nav__links .btn { margin-top: 1rem; }
}
@media (max-width: 900px) {
  .split, .form-wrap, .zone__in, .adres, .prijzen__kop, #team .section__head { grid-template-columns: 1fr; }
  .form-foto { display: none; }
  #rooster .container { grid-template-columns: 1fr; }
  #rooster .container > *, #rooster .section__head { grid-column: 1; grid-row: auto; }
  .split--rev > :first-child { order: 0; }
  .stations, .coaches, .grid-2, .grid-3, .strip { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .pricing { grid-template-columns: 1fr; align-items: stretch; gap: 1.5rem; }
  .price, .price:nth-child(2), .price:nth-child(3) { min-height: 0; }
  .price { padding-top: 1.5rem; }
  .price .btn { margin-top: 1.5rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
  .acht__in { grid-template-columns: 1fr; }
  /* De tweede rij schuift een halve zeshoek op; de ruimte rechts houdt hem binnen het scherm. */
  .acht__raat { justify-content: start; padding-right: 0; grid-template-columns: repeat(4, minmax(0, 5rem)); max-width: 88%; }
  .statement { padding: 6rem 0; }
  .statement__in { text-align: left; }
  .statement__lead { margin: 0; }
  #ervaringen .grid-3 { grid-template-columns: 1fr; }
  .ervaring, .ervaring:nth-child(2n) { grid-column: 1; margin-top: 0; }
  .page-hero__shape { width: 56vw; right: -18vw; }
  .page-hero__shape ~ .container > * { max-width: 64%; }

  /* Home op telefoon: de vorm schuift naar onderen */
  .hero { align-items: flex-start; min-height: calc(100svh - var(--nav-h)); padding: 9vh 0 0; }
  .hero__shape { left: 50%; top: auto; bottom: calc(-1 * 130vw / var(--hex-ratio) * .22); width: 130vw; transform: translateX(-50%); }
  .hero__text { max-width: none; }
  .hero__content { padding-bottom: calc(130vw / var(--hex-ratio) * .8); }
  .hero__lead { font-size: 1.0625rem; }
}
@media (max-width: 560px) {
  .form__row, .choices, .grid-4 { grid-template-columns: 1fr; }
  .btn-row .btn { width: 100%; }
  .slot__in { grid-template-columns: 1fr auto; }
  .slot__tijd { grid-column: 1 / -1; grid-row: 2; }
  .rooster__item { grid-template-columns: 1fr auto; gap: .3rem 1rem; }
  .rooster__naam { grid-column: 1 / -1; }
  .coach { grid-template-columns: 1fr; }
  .coach__foto { width: 60%; }
  .cta .container { min-height: 300px; padding: 2rem 1.5rem; }
  .cta h2 { font-size: var(--t-lead); }
  .statement__zin { font-size: 1.375rem; }
  .cta .container::before, .cta .container::after { display: none; }
  .page-hero { padding-top: calc(52vw / var(--hex-ratio) + 1.5rem); }
  .page-hero__shape { width: 52vw; right: -8vw; top: 1rem; transform: none; }
  .page-hero__shape ~ .container > * { max-width: none; }
  .page-hero--form { padding-top: 3rem; }
  .footer__grid { grid-template-columns: 1fr; }
}