/* ============================================================
   SNELLE INSTELLINGEN — de meest gebruikte knoppen op één plek
   ============================================================ */
:root{
  /* kleuren */
  --bg: oklch(0.135 0.008 75);       /* achtergrond */
  --bg-deep: oklch(0.10 0.006 75);   /* achtergrond, donkerste rand */
  --gold: oklch(0.76 0.115 82);      /* goudaccent (titels, knoppen, lijnen) */
  --ink: oklch(0.95 0.012 82);       /* hoofdtekst */
  --ink-soft: oklch(0.72 0.02 82);   /* gedempte tekst (ondertitels) */

  /* groottes */
  --logo-grootte: 45%;               /* startlogo t.o.v. de kaart */
  --kaart-breedte: min(68vw, 700px); /* grootte van de flip-kaart */
}
*{ margin:0; padding:0; box-sizing:border-box; }
body{
  background:
    radial-gradient(120vmax 90vmax at 50% 42%, var(--bg) 0%, var(--bg-deep) 68%),
    var(--bg-deep);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  overflow-x: hidden;
}
::selection{ background: var(--gold); color: oklch(0.15 0.01 75); }

/* onzichtbare "landingsbaan" die de scroll-lengte bepaalt */
.track{ height: 900vh; }

/* vast podium waarop alles gebeurt */
.stage{
  position: fixed; inset: 0;
  height: 100vh; height: 100dvh;
  overflow: hidden;
}

/* subtiele korrel over alles */
.stage::after{
  content:""; position:absolute; inset:-50%;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events:none; opacity:.5;
}

/* ================= vaste UI ================= */
.wordmark{
  position:absolute; top: clamp(18px, 3.4vh, 34px); left:50%;
  transform: translateX(-50%);
  font-family:'Marcellus', serif;
  font-size: clamp(13px, 1.5vw, 17px);
  letter-spacing:.58em; text-indent:.58em;
  color: var(--gold);
  opacity:0; transition: opacity .8s cubic-bezier(.22,1,.36,1);
  z-index:40; white-space:nowrap;
}
.wordmark.on{ opacity:1; }

.rail{
  position:absolute; right: clamp(14px,2.4vw,30px); top:50%;
  transform: translateY(-50%);
  width:1px; height:32vh;
  background: oklch(0.32 0.02 80 / .55);
  z-index:40;
}
.rail i{ display:block; width:100%; height:0%; background:var(--gold); }

.cue{
  position:absolute; bottom: clamp(22px,5vh,48px); left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  color:var(--ink-soft);
  font-size:11px; letter-spacing:.5em; text-indent:.5em;
  text-transform:uppercase;
  z-index:40;
}
.cue::after{
  content:""; width:1px; height:44px;
  background: linear-gradient(var(--gold), transparent);
  animation: cueDrop 2.1s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes cueDrop{
  0%{ transform:scaleY(0); transform-origin:top; }
  45%{ transform:scaleY(1); transform-origin:top; }
  55%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* ================= akte 1 & 2 : flipkaart ================= */
/* Drie lagen in één kaart. JS bepaalt per frame welke laag zichtbaar is:
   logo (0-90°) → dj-container (90-270°) → bar-container (270-360°). */
.flip-scene{
  position:absolute; inset:0;
  display:grid; place-items:center;
  perspective:1600px;
  z-index:10;
}
.card{
  position:relative;
  width:var(--kaart-breedte);
  aspect-ratio: 3 / 2;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.card .face{
  position:absolute; inset:0;
  display:grid; place-items:center;
  opacity:0;                       /* JS zet dit aan/uit */
}
.card .face img{
  width:100%; height:100%; object-fit:contain;
  filter: drop-shadow(0 34px 60px oklch(0 0 0 / .55));
}
/* startlogo bewust kleiner dan de containers */
.card .face-logo img{
  width:var(--logo-grootte); height:var(--logo-grootte);
  filter: drop-shadow(0 0 40px oklch(0.76 0.115 82 / .16));
}
/* dj-laag staat omgekeerd, zodat hij rechtop staat wanneer
   de kaart 180° gedraaid is */
.face-dj{ transform: rotateX(180deg); }

/* ================= hoofdstuktitel ================= */
.caption{
  position:absolute; left:50%; bottom: clamp(34px, 7.5vh, 70px);
  transform: translateX(-50%);
  text-align:center; z-index:30;
  width:min(92vw, 720px);
  will-change: transform, opacity;
}
.caption h2{
  font-family:'Marcellus', serif; font-weight:400;
  font-size: clamp(24px, 4.2vw, 46px);
  letter-spacing:.14em; text-indent:.14em;
  text-transform:uppercase;
}
.caption h2 em{ font-style:normal; color:var(--gold); }
.caption p{
  margin-top:10px;
  font-size: clamp(11px, 1.35vw, 14px);
  font-weight:300;
  letter-spacing:.22em; text-indent:.22em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
/* elke titel (.chapter uit index.html) ligt gestapeld op dezelfde plek;
   script.js vervaagt de juiste in en uit op basis van data-start/data-end */
.caption{ pointer-events:none; }
.caption .chapter{
  position:absolute; left:0; right:0; bottom:0;
  opacity:0; visibility:hidden;
  will-change: transform, opacity;
}

/* ---- "andere opstellingen mogelijk" — klikbare pill met
        mini-plattegrond die vanzelf door 3 opstellingen wisselt ---- */
.alt-pill{
  pointer-events:auto;
  margin-top:20px;
  display:inline-flex; align-items:center; gap:13px;
  padding:9px 18px 9px 12px;
  background: oklch(0.76 0.115 82 / .05);
  border:1px solid oklch(0.60 0.09 82 / .55);
  border-radius:999px;
  color:var(--gold);
  font-family:'Manrope', sans-serif;
  font-size:10px; font-weight:400;
  letter-spacing:.18em; text-indent:0;
  text-transform:uppercase;
  cursor:pointer;
  transition: background-color .35s ease, border-color .35s ease;
}
.alt-pill:hover{
  background: oklch(0.76 0.115 82 / .13);
  border-color: var(--gold);
}
.alt-pill em{ font-style:normal; color:var(--ink-soft); }
@media (max-width:560px){ .alt-pill em{ display:none; } }

/* het mini-plattegrondje: 3 blokjes (bar · dj · bar) die elke paar
   seconden naar een andere opstelling glijden */
.alt-mini{
  position:relative; width:44px; height:28px; flex:none;
  border:1px solid oklch(0.60 0.09 82 / .4); border-radius:3px;
}
.alt-mini i{
  position:absolute; left:0; top:0;
  width:14px; height:5px; border-radius:1px;
  background: var(--gold);
}
.alt-mini .m-dj{ background: oklch(0.90 0.02 85 / .85); animation: altDj 9s cubic-bezier(.6,0,.3,1) infinite; }
.alt-mini .m-b1{ animation: altB1 9s cubic-bezier(.6,0,.3,1) infinite; }
.alt-mini .m-b2{ animation: altB2 9s cubic-bezier(.6,0,.3,1) infinite; }
/* opstelling A = klassiek (dj boven, bars opzij)
   opstelling B = alles vooraan op één rij
   opstelling C = L-vorm (dj boven, bar links, bar onder) */
@keyframes altDj{
  0%, 27%  { transform: translate(15px, 3px); }
  33%, 60% { transform: translate(15px, 21px); }
  66%, 94% { transform: translate(15px, 3px); }
  100%     { transform: translate(15px, 3px); }
}
@keyframes altB1{
  0%, 27%  { transform: translate(2px, 11px) rotate(90deg); }
  33%, 60% { transform: translate(1px, 21px) rotate(0deg); }
  66%, 94% { transform: translate(2px, 8px) rotate(90deg); }
  100%     { transform: translate(2px, 11px) rotate(90deg); }
}
@keyframes altB2{
  0%, 27%  { transform: translate(28px, 11px) rotate(90deg); }
  33%, 60% { transform: translate(29px, 21px) rotate(0deg); }
  66%, 94% { transform: translate(20px, 21px) rotate(0deg); }
  100%     { transform: translate(28px, 11px) rotate(90deg); }
}
@media (prefers-reduced-motion: reduce){
  .alt-mini i{ animation:none; }
}

/* ================= akte 3 & 4 : bovenaanzicht ================= */
/* Vast tekenbord van 1000 x 780. JS schaalt het geheel passend
   (met marge) in het scherm; alle posities hieronder zijn absoluut. */
.plan-scene{
  position:absolute; inset:0;
  display:grid; place-items:center;
  perspective:1500px;
  z-index:5;
}
.board{
  /* RESPONSIEF BORD. Vroeger een vaste 1000x780 die met transform:scale()
     verkleind werd. Een transform verandert de layout niet, waardoor het bord
     op schermen smaller dan 1000px niet meer centreerde en buiten beeld schoof
     (de gsm-bug). Nu schaalt het bord zelf mee met het scherm en staat het op
     ELK toestel volledig en gecentreerd in beeld. Onderdelen hieronder in %. */
  position:relative;
  width: min(90vw, 820px);
  max-height: 76vh;
  aspect-ratio: 1000 / 780;
  will-change: opacity;
}
/* de subtiele 3D-kanteling (sfeer) alleen op grotere schermen */
@media (min-width:721px){ .board{ transform: rotateX(10deg); } }

.board .unit{ position:absolute; will-change: transform, opacity; }
.board .unit img{
  width:100%; height:100%; object-fit:contain; display:block;
  filter: drop-shadow(0 22px 34px oklch(0 0 0 / .6));
}
.unit .tag{
  position:absolute; z-index:2; left:50%; top:50%;
  transform: translate(-50%,-50%);
  font-size: clamp(10px, 2.6vw, 13px);
  letter-spacing:.42em; text-indent:.42em;
  text-transform:uppercase; color:var(--gold);
  text-shadow: 0 2px 10px oklch(0 0 0/.8);
  transition: opacity .6s ease;
}
.u-barL .tag{ transform: translate(-50%,-50%) rotate(-90deg); }
.u-barR .tag{ transform: translate(-50%,-50%) rotate(90deg); }

/* posities in % van het bord (verhouding 1000 x 780) */
.u-dj  { width:32%; height:26.54%; left:34%; top:3.85%; }
.u-barL{ width:38%; height:26.54%; left:5%;  top:48.2%; }
.u-barR{ width:38%; height:26.54%; left:57%; top:48.2%; }

/* gloed op het binnenplein, verdwijnt zodra de tent komt */
.court{
  position:absolute; left:34.4%; top:30.77%; width:31.2%; height:51.28%;
  background: radial-gradient(55% 55% at 50% 42%, oklch(0.76 0.115 82 / .10), transparent 70%);
  opacity:0; will-change:opacity;
}

/* stretchtent: portretformaat, gespannen over het binnenplein */
.tent{
  position:absolute; left:24%; top:17.05%;
  width:52%; height:75.9%;
  z-index:6;
  will-change: transform, opacity;
  filter: drop-shadow(0 34px 60px oklch(0 0 0 / .65));
}

/* Op gsm: geen zware filters in de bovenaanzicht-scene.
   Drop-shadows binnen een geschaalde/gedraaide laag kunnen op
   mobiele browsers (vooral iOS Safari) de hele laag onzichtbaar
   maken. Op klein formaat zie je die schaduwen toch amper. */
@media (max-width:720px){
  .board .unit img{ filter:none; }
  .tent{ filter:none; }
  .plan-scene{ perspective:none; }
  /* ook de flip-kaart: filters + 3D-rotatie samen zijn de boosdoener */
  .card .face img{ filter:none; }
  .card .face-logo img{ filter:none; }
}

/* ================= finale ================= */
.finale{
  position:absolute; inset:0;
  display:grid; place-items:center;
  z-index:35; pointer-events:none;
  will-change:opacity;
}
.finale-inner{ text-align:center; will-change:transform; }
.finale img{
  width: clamp(130px, 18vw, 200px);
  filter: drop-shadow(0 0 50px oklch(0.76 0.115 82 / .2));
}
.finale h3{
  margin-top:8px;
  font-family:'Marcellus', serif; font-weight:400;
  font-size: clamp(15px, 2vw, 21px);
  letter-spacing:.3em; text-indent:.3em;
  text-transform:uppercase; color:var(--gold);
}
.finale p{
  margin-top:14px;
  font-size: clamp(11px, 1.3vw, 14px);
  font-weight:300; letter-spacing:.24em; text-indent:.24em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* subtiele knoppen onder de tagline */
.finale-actions{
  margin-top:34px;
  display:flex; justify-content:center; gap:18px;
  pointer-events:auto;              /* finale zelf laat kliks door, knoppen niet */
}
.btn{
  display:inline-block;
  padding:13px 34px;
  font-size:11px; font-weight:400;
  letter-spacing:.34em; text-indent:.34em;
  text-transform:uppercase; text-decoration:none;
  color:var(--ink);
  border:1px solid oklch(0.42 0.05 82 / .7);
  border-radius:2px;
  background:transparent;
  transition: border-color .45s cubic-bezier(.22,1,.36,1),
              color .45s cubic-bezier(.22,1,.36,1),
              background-color .45s cubic-bezier(.22,1,.36,1);
}
.btn:hover{
  border-color:var(--gold);
  color:var(--gold);
  background: oklch(0.76 0.115 82 / .06);
}
.btn-primary{
  border-color: oklch(0.60 0.09 82 / .9);
  color:var(--gold);
}
.btn-primary:hover{
  background:var(--gold);
  color: oklch(0.15 0.01 75);
}

@media (max-width:640px){
  .card{ width:86vw; }
}

/* ============================================================
   NAVIGATIEBALK
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding: clamp(12px,2.2vh,20px) clamp(16px,3vw,40px);
  pointer-events:none;
}
.nav > *{ pointer-events:auto; }
.nav-brand{ display:inline-flex; }
.nav-brand img{
  height: clamp(28px,3.6vh,40px); width:auto; display:block;
  filter: drop-shadow(0 0 18px oklch(0.76 0.115 82 / .25));
}
.nav-links{ display:flex; align-items:center; gap: clamp(16px,2vw,32px); }
.nav-links a, .nav-cta{
  font-family:'Manrope', sans-serif;
  font-size:11px; font-weight:400;
  letter-spacing:.28em; text-indent:.28em;
  text-transform:uppercase; text-decoration:none;
  color:var(--ink-soft);
  background:none; border:none; cursor:pointer;
  transition: color .35s cubic-bezier(.22,1,.36,1);
}
.nav-links a:hover, .nav-cta:hover{ color:var(--gold); }
.nav-cta{
  color:var(--gold);
  padding:9px 22px;
  border:1px solid oklch(0.60 0.09 82 / .8); border-radius:2px;
  transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}
.nav-cta:hover{ background:var(--gold); color:oklch(0.15 0.01 75); border-color:var(--gold); }

/* hamburger — verborgen op desktop */
.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:6px;
}
.nav-toggle span{
  display:block; width:24px; height:2px; background:var(--gold);
  transition: transform .35s ease, opacity .35s ease;
}
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:720px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:absolute; top:100%; right:clamp(16px,3vw,40px);
    flex-direction:column; align-items:flex-start; gap:20px;
    padding:26px 30px;
    background: oklch(0.135 0.008 75 / .96);
    border:1px solid oklch(0.32 0.02 80 / .5); border-radius:4px;
    backdrop-filter: blur(10px);
    opacity:0; transform:translateY(-8px); pointer-events:none;
    transition: opacity .3s ease, transform .3s ease;
  }
  .nav-links.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
}

/* ============================================================
   VENSTERS (modals)
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:60;
  display:grid; place-items:center;
  visibility:hidden; opacity:0;
  transition: opacity .4s ease, visibility .4s ease;
}
.modal.open{ visibility:visible; opacity:1; }
.modal-backdrop{
  position:absolute; inset:0;
  background: oklch(0.10 0.006 75 / .78);
  backdrop-filter: blur(6px);
}
.modal-panel{
  position:relative; z-index:1;
  width:min(92vw, 560px);
  max-height:88vh; overflow-y:auto;
  padding: clamp(28px,4vw,48px);
  background:
    radial-gradient(120% 90% at 50% 0%, oklch(0.17 0.01 75) 0%, oklch(0.125 0.007 75) 70%);
  border:1px solid oklch(0.42 0.05 82 / .45); border-radius:6px;
  box-shadow: 0 40px 90px oklch(0 0 0 / .6);
  transform: translateY(16px) scale(.98);
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.modal.open .modal-panel{ transform: translateY(0) scale(1); }
.modal-wide{ width:min(94vw, 680px); }
.modal-close{
  position:absolute; top:16px; right:18px;
  width:38px; height:38px; line-height:1;
  font-size:26px; color:var(--ink-soft);
  background:none; border:none; cursor:pointer;
  transition: color .3s ease;
}
.modal-close:hover{ color:var(--gold); }
.modal-eyebrow{
  display:block;
  font-size:11px; letter-spacing:.4em; text-indent:.4em;
  text-transform:uppercase; color:var(--gold);
}
.modal-title{
  margin-top:12px;
  font-family:'Marcellus', serif; font-weight:400;
  font-size: clamp(22px,3.4vw,34px);
  letter-spacing:.06em; color:var(--ink);
}
.modal-sub{
  margin-top:10px; color:var(--ink-soft);
  font-size:14px; font-weight:300; letter-spacing:.02em;
}

/* ---------- concept (prose) ---------- */
.prose{ margin-top:24px; }
.prose p{
  font-size:14.5px; font-weight:300; line-height:1.75;
  color:var(--ink-soft);
}
.prose p + p{ margin-top:14px; }
.prose h3{
  margin-top:26px; margin-bottom:8px;
  font-family:'Marcellus', serif; font-weight:400;
  font-size:17px; letter-spacing:.06em; color:var(--gold);
}

/* ---------- team ---------- */
.team-grid{
  margin-top:30px;
  display:grid; grid-template-columns:1fr 1fr; gap:26px;
}
.team-card{ text-align:center; }
.team-photo{
  position:relative;
  width:clamp(96px,26vw,128px); height:clamp(96px,26vw,128px);
  margin:0 auto 16px; border-radius:50%;
  overflow:hidden;
  border:1px solid oklch(0.60 0.09 82 / .5);
  background: oklch(0.20 0.02 82 / .5);
  display:grid; place-items:center;
}
.team-photo img{ width:100%; height:100%; object-fit:cover; }
.team-mono{
  display:none;
  font-family:'Marcellus', serif; font-size:38px; color:var(--gold);
}
.team-photo.no-photo .team-mono{ display:block; }
.team-card h3{
  font-family:'Marcellus', serif; font-weight:400;
  font-size:20px; letter-spacing:.08em; color:var(--ink);
}
.team-role{
  margin-top:4px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
}
.team-bio{
  margin-top:12px;
  font-size:13.5px; font-weight:300; line-height:1.6;
  color:var(--ink-soft);
}
@media (max-width:560px){ .team-grid{ grid-template-columns:1fr; gap:32px; } }

/* ---------- contact ---------- */
.contact-list{ margin-top:28px; }
.contact-row{
  display:flex; align-items:baseline; gap:18px;
  padding:16px 0;
  border-bottom:1px solid oklch(0.32 0.02 80 / .35);
}
.contact-label{
  min-width:70px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
}
.contact-row a{ color:var(--ink); text-decoration:none; border-bottom:1px solid oklch(0.60 0.09 82 / .5); }
.contact-row a:hover{ color:var(--gold); }
.contact-offerte{ margin-top:30px; }

/* ---------- formulier ---------- */
.form{ margin-top:26px; display:flex; flex-direction:column; gap:20px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:520px){ .form-row{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:7px; }
.field > span{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft);
}
.field input, .field textarea{
  width:100%;
  padding:11px 13px;
  font-family:'Manrope', sans-serif; font-size:14px;
  color:var(--ink);
  background: oklch(0.10 0.006 75 / .6);
  border:1px solid oklch(0.32 0.02 80 / .6); border-radius:3px;
  transition: border-color .3s ease;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--gold); }
.field input[type="file"]{ padding:9px 12px; font-size:12.5px; color:var(--ink-soft); }
.field textarea{ resize:vertical; }
.hint{ font-size:11px; color:var(--ink-soft); opacity:.8; letter-spacing:.02em; }

.field-group{
  border:1px solid oklch(0.32 0.02 80 / .4); border-radius:4px;
  padding:16px 18px;
  display:flex; flex-direction:column; gap:12px;
}
.field-group legend{
  padding:0 8px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.check{ display:flex; align-items:center; gap:11px; cursor:pointer; font-size:14px; color:var(--ink); }
.check input{ width:17px; height:17px; accent-color:var(--gold); cursor:pointer; }
.choice-row{ display:flex; gap:12px; }
.pill{ position:relative; cursor:pointer; }
.pill input{ position:absolute; opacity:0; }
.pill span{
  display:inline-grid; place-items:center;
  min-width:52px; padding:9px 16px;
  border:1px solid oklch(0.32 0.02 80 / .6); border-radius:3px;
  font-size:14px; color:var(--ink-soft);
  transition: all .3s ease;
}
.pill input:checked + span{ border-color:var(--gold); color:var(--gold); background:oklch(0.76 0.115 82 / .08); }
.field input:disabled{ opacity:.4; cursor:not-allowed; }

/* verborgen elementen echt verbergen (overschrijft display:flex/grid) */
[hidden]{ display:none !important; }

/* plattegrond / schema */
.schema{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  max-width:300px; margin-top:4px;
}
.cell{
  aspect-ratio:1/1;
  display:grid; place-items:center;
  border:1px solid oklch(0.32 0.02 80 / .6); border-radius:4px;
  background: oklch(0.10 0.006 75 / .5);
  color:var(--ink-soft); cursor:pointer;
  font-family:'Manrope', sans-serif;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.cell:hover{ border-color: oklch(0.60 0.09 82 / .8); }
.cell[data-state="bar"]{ background:var(--gold); border-color:var(--gold); color:oklch(0.15 0.01 75); }
.cell[data-state="dj"]{ background: oklch(0.42 0.06 82 / .7); border-color: oklch(0.72 0.05 82); color:var(--ink); }
.schema-status{ margin-top:10px; font-size:12px; letter-spacing:.04em; color:var(--ink-soft); }

.form-submit{ margin-top:6px; align-self:flex-start; cursor:pointer; }
.form-note{ font-size:12px; color:var(--ink-soft); }
.form-note strong{ color:var(--ink); font-weight:600; }

/* de finale-knoppen zijn nu <button>: zelfde uitlijning als <a class="btn"> */
button.btn{ font-family:'Manrope', sans-serif; cursor:pointer; }