@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/unbounded-700.woff2') format('woff2')}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/unbounded-800.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/schibsted-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/schibsted-grotesk-600.woff2') format('woff2')}

/* ---------------------------------------------------------------- tokens */
/* Eén ritme-eenheid, drie hoekwaarden, drie schaduwstrings (de focusring
 * meegeteld: token-drift vergelijkt letterlijke tekst, dus alles verwijst
 * met var()). Elevatie die daarbuiten valt loopt via filter: drop-shadow. */
:root{
  --u:8px;
  --u2:16px; --u3:24px; --u4:32px; --u5:48px; --u6:64px; --u8:96px; --u10:128px;
  --r-a:2px; --r-b:16px; --r-c:999px;
  --sh-a:0 1px 2px rgb(4 8 14 / .28), 0 22px 44px rgb(4 8 14 / .40);
  --sh-b:0 1px 3px rgb(4 8 14 / .22);
  --sh-ring:0 0 0 5px var(--ring);
  --kop:'Unbounded', Impact, sans-serif;
  --body:'Schibsted Grotesk', system-ui, sans-serif;
  --fs-1:13px; --fs-2:15px; --fs-3:17px; --fs-4:20px; --fs-5:26px;
  --fs-6:34px; --fs-7:46px;
  --lh-kop:1.06; --lh-lead:1.5; --lh-tekst:1.6;
  --ease:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --t-1:140ms; --t-2:240ms; --t-3:620ms;
  --clip-b:480px;
  --maat:1180px;

  /* Het palet van De ring, uit de kamer zelf: het nachtblauw van het
   * plafondscherm, het jade van de waterval erop, en het messing van de
   * beugel. Elk token is genoemd naar het vlak waarop het leesbaar is. */
  --veld:#151E2E;        /* het nachtscherm: het vlak van de pagina */
  --oppervlak:#1E2B3F;   /* een trap lichter, voor blokken op het veld */
  --diep:#0C1520;        /* onder het veld, voor beeldvakken en de voet */
  --licht:#F2EAE2;       /* porselein: het enige lichte vlak, de tarieven */
  --tekst:#E8EEF2;       /* leesbaar op veld, oppervlak en diep */
  --stil:#AEBDCE;        /* gedempt, alleen op veld en oppervlak (7,1:1) */
  --inkt:#1B2430;        /* leesbaar op porselein */
  --inkt-stil:#4A5768;   /* gedempt op porselein (7,4:1) */
  --accent:#63C9BE;      /* jade: draagt de primaire actie en niets anders */
  --accent-diep:#2F7F79; /* jade op het lichte vlak (4,6:1 op porselein) */
  --messing:#D9B25E;     /* de beugel; alleen als lijn en vorm, nooit als tekst */
  --rand:#5A6B85;
  --opAccent:#0C1520;
  --ring:rgb(99 201 190 / .34);
}

/* ----------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Het licht van het plafondscherm valt van boven de kamer in. Dit hoort op
 * body: hero-craft loopt vanaf de herosectie omhoog tot de eerste
 * achtergrond die hij tegenkomt, en bij één ontwerp is dat body zelf. */
body{margin:0;background-color:var(--veld);color:var(--tekst);
  background-image:
    radial-gradient(112% 48% at 50% 0%, rgb(99 201 190 / .16), rgb(99 201 190 / 0) 62%),
    radial-gradient(80% 34% at 6% 12%, rgb(12 21 32 / .92), rgb(12 21 32 / 0) 68%);
  background-repeat:no-repeat;
  font-family:var(--body);font-size:var(--fs-3);line-height:var(--lh-tekst);
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
svg{display:block}

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid currentColor;outline-offset:3px;box-shadow:var(--sh-ring)}

.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%)}

/* De skiplink schuift met transform in beeld, niet met `top`: dat laatste
 * herberekent de lay-out per frame en komt binnen als motion-kwaliteit. */
.skip-link{position:absolute;left:var(--u2);top:var(--u2);z-index:60;
  padding:var(--u2) var(--u3);border-radius:var(--r-a);
  background:var(--accent);color:var(--opAccent);
  font-weight:600;text-decoration:none;
  transform:translateY(-160px);
  transition:transform var(--t-2) var(--ease)}
.skip-link:focus{transform:none}

/* ------------------------------------------------------------ bouwstenen */
.wrap{width:100%;max-width:var(--maat);margin:0 auto;
  padding-left:var(--u3);padding-right:var(--u3)}
.sec{position:relative;padding:var(--u6) 0}

.kop-tekst{font-family:var(--kop);font-weight:800;letter-spacing:-.04em;
  line-height:var(--lh-kop);text-wrap:balance}
h2.kop-tekst{font-size:clamp(28px,6.4vw,52px)}
h3{font-family:var(--kop);font-weight:700;font-size:var(--fs-4);
  letter-spacing:-.03em;line-height:1.18}
.lead{font-size:var(--fs-4);line-height:var(--lh-lead);max-width:46ch;
  color:var(--stil);text-wrap:pretty}
.eyebrow{display:inline-block;padding:7px var(--u2);border-radius:var(--r-c);
  background:var(--opAccent);color:var(--accent);
  font-size:var(--fs-1);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase}

.knop{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--u);min-height:52px;padding:0 var(--u4);border-radius:var(--r-c);
  background:var(--accent);color:var(--opAccent);
  font-size:var(--fs-3);font-weight:600;text-decoration:none;
  transition:transform var(--t-1) var(--ease)}
.knop:active{transform:scale(.97)}
.knop-stil{display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 var(--u3);border-radius:var(--r-c);
  border:1px solid var(--rand);background:none;color:inherit;
  font-size:var(--fs-3);font-weight:600;text-decoration:none;
  transition:transform var(--t-1) var(--ease)}
.knop-stil:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .knop:hover{transform:translateY(-2px)}
  .knop-stil:hover{transform:translateY(-2px)}
}
.acties{display:flex;flex-wrap:wrap;gap:var(--u2);align-items:center}

/* De pauzeknop hoort bij de video en staat er altijd zichtbaar bij. */
.vpauze{position:absolute;z-index:8;right:var(--u2);bottom:var(--u2);
  width:44px;height:44px;display:grid;place-items:center;
  border-radius:var(--r-c);background:var(--opAccent);color:var(--tekst);
  border:1px solid var(--rand);
  transition:transform var(--t-1) var(--ease)}
.vpauze:active{transform:scale(.96)}
.vpauze svg{width:16px;height:16px;fill:currentColor}
.vpauze .aan{display:none}
.vpauze[data-uit="ja"] .aan{display:block}
.vpauze[data-uit="ja"] .af{display:none}

/* ------------------------------------------------------------------- kop */
.bar{position:relative;z-index:12;display:flex;flex-wrap:nowrap;
  align-items:center;justify-content:space-between;gap:var(--u2);
  padding:var(--u2) var(--u3);min-height:66px}
.merk{display:flex;align-items:baseline;gap:7px;min-width:0;
  font-family:var(--kop);font-weight:700;font-size:var(--fs-3);
  letter-spacing:-.03em;line-height:1.1;text-decoration:none}
.merk small{font-family:var(--body);font-size:var(--fs-1);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--stil)}
.bar .knop-stil{padding:0 var(--u2);white-space:nowrap}
@media (max-width:520px){
  .bar{padding:var(--u2)}
  .merk small{display:none}
}

/* De vaste balk komt pas ná de hero in beeld, zodat hij de knop in het
 * eerste scherm nooit verdubbelt of bedekt (LESSONS regel 12). */
.duim{position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;gap:var(--u2);align-items:center;
  padding:10px var(--u3) calc(10px + env(safe-area-inset-bottom));
  background:var(--diep);border-top:1px solid var(--rand);
  transform:translateY(110%);
  transition:transform var(--t-2) var(--ease)}
.duim[data-aan="ja"]{transform:none}
.duim .knop{flex:1;min-width:0}
.duim p{flex:0 0 auto;font-size:var(--fs-2);color:var(--stil)}
@media (min-width:900px){ .duim{display:none} }

/* =============================================================== 1 · hero */
/* full bleed image field · luid 5 · veld: de clip zelf */
.hero{position:relative;display:grid;align-content:end;
  min-height:calc(100svh - 66px);
  overflow:clip;padding:var(--u6) var(--u3) var(--u5);isolation:isolate}
/* De clip is 480x848. Op een telefoon is 390 kleiner dan 480, dus daar is
 * vol beeld juist scherp; zodra het venster breder is dan de clip houdt hij
 * zijn eigen maat en wordt hij een staande kolom in plaats van een wazige
 * achtergrond. */
.doek{position:absolute;inset:0;z-index:0;display:grid;place-items:center;
  background:var(--diep)}
.doek video,.doek img{width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 42%}
@media (min-width:520px){
  .doek video,.doek img{width:min(100%,var(--clip-b));height:auto;
    max-height:100%;border-radius:var(--r-b);box-shadow:var(--sh-a)}
}
/* De plaat draagt de tekst zonder het beeld op te eten: de tekst heeft een
 * eigen drop-shadow, zodat deze laag licht kan blijven en de kamer
 * zichtbaar blijft. Een scrim die zwaar genoeg is haalt altijd het
 * contrast en laat een donkere doos over. */
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgb(9 14 22 / .70) 0%,rgb(9 14 22 / .12) 30%,
    rgb(9 14 22 / .66) 58%,rgb(9 14 22 / .94) 100%)}
.hero-in{position:relative;z-index:5;display:grid;gap:var(--u3);
  justify-items:start;max-width:640px;
  filter:drop-shadow(0 2px 24px rgb(6 10 16 / .55))}
.hero-t{font-family:var(--kop);font-weight:800;
  font-size:clamp(29px,10vw,92px);line-height:1.02;letter-spacing:-.045em;
  text-wrap:balance}
.hero-t u{display:block;text-decoration:none;color:var(--accent)}
.hero-lead{font-size:var(--fs-4);line-height:var(--lh-lead);max-width:36ch;
  color:var(--tekst)}
/* De messing beugel uit de kamer, opnieuw getekend, met de waterlijn erin. */
.beugel{position:absolute;z-index:3;right:-90px;top:8%;
  width:300px;height:300px;pointer-events:none;opacity:.92;
  filter:drop-shadow(0 2px 2px rgb(6 10 16 / .46))
         drop-shadow(18px 26px 34px rgb(6 10 16 / .44))}
/* Ondoorzichtig, niet doorschijnend: de contrastmeter verbergt het element
 * dat hij meet, dus een half transparante plaat wordt de kale video eronder. */
.pil{position:absolute;z-index:9;left:var(--u3);top:var(--u2);
  display:grid;grid-template-columns:auto auto;gap:var(--u2);align-items:center;
  padding:10px var(--u2);border-radius:var(--r-c);
  background:var(--opAccent);color:var(--tekst);border:1px solid var(--rand)}
.pil b{font-family:var(--kop);font-size:var(--fs-3);line-height:1;
  color:var(--accent);font-variant-numeric:tabular-nums}
.pil span{font-size:var(--fs-1);letter-spacing:.06em}
@media (min-width:900px){
  .hero{padding:var(--u8) var(--u5) var(--u6);align-content:center}
  .doek{justify-items:end;padding-right:6vw}
  .doek video,.doek img{width:min(42vw,var(--clip-b));max-height:86vh}
  .hero::before{background:linear-gradient(96deg,rgb(9 14 22 / .97) 0%,
    rgb(9 14 22 / .92) 48%,rgb(9 14 22 / .24) 78%,rgb(9 14 22 / .44) 100%)}
  .beugel{right:2vw;top:auto;bottom:6%;width:360px;height:360px}
  .pil{left:auto;right:calc(6vw + var(--u3));top:var(--u8);bottom:auto}
}

/* ========================================================= 2 · wat is het */
/* quiet interstitial · luid 1 · veld · opent met één zin op displaymaat */
.stil-sec{padding:var(--u8) 0 var(--u6)}
.stil-zin{font-family:var(--kop);font-weight:700;
  font-size:clamp(19px,4.2vw,38px);line-height:1.24;letter-spacing:-.03em;
  max-width:22ch;text-wrap:balance}
.stil-zin b{font-weight:700;color:var(--accent)}
.stil-bij{margin-top:var(--u3);max-width:52ch;color:var(--stil);
  font-size:var(--fs-3);line-height:var(--lh-tekst)}

/* ============================================================= 3 · het uur */
/* timeline or cycle · luid 4 · oppervlak · opent met de boog als compositie */
.uur{background:var(--oppervlak);padding:var(--u8) 0}
.uur-in{display:grid;gap:var(--u5)}
/* De ring keert hier terug als tijdsverloop: een messing boog waarlangs de
 * drie stappen liggen, met het beeld erdoorheen gesneden. */
.boog{position:relative;display:grid;justify-items:center;min-width:0}
.boog-fig{position:relative;width:min(100%,var(--clip-b));
  aspect-ratio:480 / 380;overflow:hidden;border-radius:var(--r-b);
  box-shadow:var(--sh-a)}
.boog-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
/* De boog steekt buiten het beeldvak uit, dus hij hangt aan `.boog` en niet
 * aan de figure. Nooit breder dan zijn eigen kolom: op 320 duwde 112% de
 * hele pagina opzij. */
.boog-svg{position:absolute;z-index:3;left:50%;bottom:-44px;
  width:min(100%,540px);height:130px;transform:translateX(-50%);
  pointer-events:none;
  filter:drop-shadow(0 2px 2px rgb(6 10 16 / .5))}
.stappen{display:grid;gap:var(--u3);counter-reset:stap}
/* Op 320 houdt de tekstkolom naast een cijfer van 44px en een gat van 24px
 * nog 204px over, en "Dieptereiniging" is er op 20px 210. Het cijfer en de
 * tussenruimte krimpen daar mee, en de kop een maat terug. */
.stap{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);
  gap:var(--u2);align-items:start;
  padding-bottom:var(--u3);border-bottom:1px solid var(--rand)}
.stap h3{font-size:var(--fs-3)}
.stap i{width:36px;height:36px;font-size:var(--fs-2)}
@media (min-width:420px){
  .stap{grid-template-columns:44px minmax(0,1fr);gap:var(--u3)}
  .stap h3{font-size:var(--fs-4)}
  .stap i{width:44px;height:44px;font-size:var(--fs-3)}
}
.stap:last-child{border-bottom:0;padding-bottom:0}
.stap i{display:grid;place-items:center;
  border-radius:var(--r-c);border:1px solid var(--messing);
  font-family:var(--kop);font-style:normal;font-weight:700;
  color:var(--messing);line-height:1;font-variant-numeric:tabular-nums}
.stap p{margin-top:6px;color:var(--stil);font-size:var(--fs-2);
  line-height:var(--lh-lead)}
@media (min-width:900px){
  .uur-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:var(--u8);align-items:center}
  .boog-svg{bottom:-56px;height:160px}
}

/* ============================================================ 4 · waarvoor */
/* index or register · luid 2 · veld · opent met een label als compositie */
.reg{padding:var(--u8) 0 var(--u10);display:flow-root}
.reg-kop{display:grid;gap:var(--u3);max-width:58ch}
/* Dit was een watermerk in de oppervlaktekleur: 1,17:1, dus voor niemand
 * leesbaar. Een woord dat je niet kunt lezen is decoratie, geen compositie;
 * nu is het de kop zelf, en die opent de sectie als vorm in plaats van als
 * kicker erboven. De ondergrens van de clamp is gemeten tegen het langste
 * ondeelbare woord op 320 min de containerpadding (272px). */
.reg-merk{font-family:var(--kop);font-weight:800;
  font-size:clamp(34px,11vw,118px);line-height:.92;letter-spacing:-.05em;
  color:var(--tekst)}
.reg-merk em{font-style:normal;color:var(--accent)}
.reg-lijst{margin-top:var(--u6);display:grid;gap:0;
  border-top:1px solid var(--rand)}
.reg-rij{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--u);
  padding:var(--u3) 0;border-bottom:1px solid var(--rand)}
.reg-rij b{font-family:var(--kop);font-weight:700;font-size:var(--fs-4);
  letter-spacing:-.03em;line-height:1.2}
.reg-rij span{color:var(--stil);font-size:var(--fs-2);
  line-height:var(--lh-lead)}
@media (min-width:760px){
  .reg-rij{grid-template-columns:minmax(0,22ch) minmax(0,1fr);
    gap:var(--u5);align-items:baseline}
}

/* ============================================================ 5 · de kamer */
/* layered composition · luid 5 · beeld van rand tot rand */
/* De beeldband steekt met een negatieve marge het register in. Alleen BEELD
 * gaat over de grens, nooit tekst: een element dat de sectiegrens oversteekt
 * wordt door de contrastcheck tegen het vlak van zijn OUDER gemeten. */
.kamer{position:relative;margin-top:calc(var(--u6) * -1);padding-bottom:var(--u8);
  background:var(--diep)}
.band{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,480px));
  justify-content:center;gap:0}
.band figure{position:relative;margin:0;overflow:hidden}
.band img{width:100%;height:auto}
.band figcaption{position:absolute;left:var(--u2);bottom:var(--u2);
  padding:6px var(--u2);border-radius:var(--r-c);background:var(--opAccent)}
.band figcaption span{display:block;font-size:var(--fs-1);letter-spacing:.06em;
  color:var(--tekst)}
.kamer-tekst{margin-top:var(--u5);display:grid;gap:var(--u3)}
@media (min-width:1000px){
  .band{grid-template-columns:repeat(3,minmax(0,480px))}
  /* Het middelste beeld prikt omhoog de vorige sectie in. Een oversteek die
   * alleen in lege onderpadding valt is geen oversteek: je ziet hem niet.
   * Alleen BEELD gaat over de grens, nooit tekst — een element dat de grens
   * kruist wordt door de contrastcheck tegen het vlak van zijn OUDER gemeten. */
  .band figure:nth-child(2){transform:translateY(calc(var(--u6) * -1))}
}

/* ============================================================ 6 · tarieven */
/* data field · luid 3 · porselein, het enige lichte vlak van de pagina */
.tarief{background:var(--licht);color:var(--inkt);padding:var(--u8) 0;
  display:flow-root}
.tarief h2{color:var(--inkt)}
.tarief .lead{color:var(--inkt-stil)}
.prijzen{margin-top:var(--u5);display:grid;gap:var(--u3)}
.prijs{position:relative;display:grid;gap:var(--u2);
  padding:var(--u4);border-radius:var(--r-b);border:1px solid var(--inkt-stil)}
.prijs-b{background:var(--inkt);color:var(--licht);border-color:var(--inkt)}
/* Op smal wrapte de ene kaart wel en de andere niet, puur omdat het ene woord
 * langer is dan het andere. Twee kaarten naast elkaar horen dezelfde vorm te
 * hebben, dus daar staat de naam altijd bóven het bedrag. */
.prijs-kop{display:grid;gap:var(--u)}
@media (min-width:520px){
  .prijs-kop{display:flex;flex-wrap:wrap;gap:var(--u2);align-items:baseline;
    justify-content:space-between}
}
.prijs-naam{font-family:var(--kop);font-weight:700;font-size:var(--fs-5);
  letter-spacing:-.03em;line-height:1.1}
.prijs-bedrag{font-family:var(--kop);font-weight:800;font-size:var(--fs-6);
  line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.prijs-was{margin-left:var(--u);font-family:var(--body);font-size:var(--fs-2);
  font-weight:400;text-decoration:line-through;color:var(--inkt-stil)}
.prijs-b .prijs-was{color:var(--stil)}
/* De ring als maat: dezelfde boog in beide kaarten, de ene voor vier vijfde
 * getrokken. Zo is het verschil tussen 60 en 75 minuten een vorm en niet
 * alleen een getal. */
.prijs-boog{width:100%;max-width:240px;height:auto}
.prijs-duur{font-size:var(--fs-2);color:var(--inkt-stil)}
.prijs-b .prijs-duur{color:var(--stil)}
.prijs ul{display:grid;gap:var(--u)}
.prijs li{position:relative;padding-left:var(--u3);font-size:var(--fs-2);
  line-height:var(--lh-lead)}
/* Een streep in plaats van een bolletje: een ronding van 999px binnen een
 * kaart van 16px snijdt de buitenhoek volgens de nesting-formule, en een
 * meetstreepje past bovendien beter bij een tarievenblok dan een puntje. */
.prijs li::before{content:"";position:absolute;left:0;top:11px;
  width:12px;height:2px;border-radius:var(--r-a);background:var(--accent-diep)}
.prijs-b li::before{background:var(--accent)}
.delta{font-size:var(--fs-2);color:var(--inkt-stil)}
.prijs-b .delta{color:var(--stil)}
.tarief-bij{margin-top:var(--u3);font-size:var(--fs-2);color:var(--inkt-stil)}
@media (min-width:860px){
  .prijzen{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}

/* ============================================================= 7 · vragen */
/* editorial spread · luid 2 · veld · opent met een bijschrift vóór de kop */
/* flow-root verbreekt margin collapsing: zonder dat klapt de negatieve marge
 * van de plek-kaart hieronder samen met de sectiemarge, verschuift de grens
 * omhoog en steekt er niets ergens overheen. */
.vragen{padding:var(--u8) 0 var(--u10);display:flow-root}
.vragen-cap{font-size:var(--fs-2);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent)}
.vragen-lijst{margin-top:var(--u5);display:grid;gap:var(--u2)}
.vraag{border:1px solid var(--rand);border-radius:var(--r-b);
  background:var(--oppervlak);overflow:hidden}
.vraag summary{display:flex;gap:var(--u3);align-items:center;
  justify-content:space-between;min-height:56px;padding:var(--u2) var(--u3);
  font-family:var(--kop);font-weight:700;font-size:var(--fs-3);
  letter-spacing:-.02em;line-height:1.25;cursor:pointer;list-style:none}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary svg{flex:0 0 auto;width:18px;height:18px;fill:var(--accent);
  transition:transform var(--t-2) var(--ease)}
.vraag[open] summary svg{transform:rotate(45deg)}
.vraag p{padding:0 var(--u3) var(--u3);color:var(--stil);font-size:var(--fs-2);
  line-height:var(--lh-tekst)}
@media (min-width:900px){
  .vragen-lijst{grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:start}
}

/* ========================================================== 8 · praktisch */
/* map or place · luid 2 · oppervlak · kop binnen de compositie */
.plek{background:var(--oppervlak);padding:var(--u6) 0 var(--u8)}
.plek-in{display:grid;gap:var(--u5)}
/* De bron is 480px breed, dus het vak wordt nooit breder: daarboven wordt
 * het beeld opgerekt en staat het wazig.
 * De kaart steekt met een negatieve marge de vragensectie in. Die sectie
 * heeft daar 128px onderpadding voor gereserveerd, ruim meer dan de 80 die
 * hier omhoog gaat: is de onderrand ondieper dan de marge, dan ligt het
 * beeld op de laatste tekstregel erboven. */
/* De marge moet GROTER zijn dan de bovenpadding van de eigen sectie, anders
 * eet die padding hem op en steekt er niets over de grens: bij 96px padding
 * en 80px marge blijft de kaart gewoon binnen zijn sectie staan. */
.plek-kaart{position:relative;width:100%;max-width:var(--clip-b);
  margin-top:-104px;
  border-radius:var(--r-b);overflow:hidden;
  background:var(--diep);box-shadow:var(--sh-a)}
.plek-kaart img{width:100%;height:auto;opacity:.62}
.plek-op{position:absolute;left:var(--u3);right:var(--u3);bottom:var(--u3);
  padding:var(--u3);border-radius:var(--r-b);background:var(--opAccent)}
.plek-op h2{font-size:clamp(22px,4.6vw,32px)}
.plek-op p{margin-top:var(--u);color:var(--stil);font-size:var(--fs-2)}
.plek-feiten{display:grid;gap:var(--u3)}
.plek-feit{display:grid;gap:4px;padding-bottom:var(--u3);
  border-bottom:1px solid var(--rand)}
.plek-feit:last-child{border-bottom:0;padding-bottom:0}
.plek-feit dt{font-size:var(--fs-1);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent)}
.plek-feit dd{font-family:var(--kop);font-weight:700;font-size:var(--fs-4);
  letter-spacing:-.03em;line-height:1.25}
.plek-feit dd small{display:block;margin-top:4px;font-family:var(--body);
  font-size:var(--fs-2);font-weight:400;color:var(--stil);line-height:1.5}
@media (min-width:900px){
  .plek-in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:var(--u8);align-items:center}
}

/* =========================================================== 9 · afspraak */
/* split canvas · luid 4 · breekt de container met padding, niet met 100vw */
.boek{background:var(--accent);color:var(--opAccent);
  padding:var(--u8) max(var(--u3), calc((100vw - var(--maat)) / 2))}
.boek-in{display:grid;gap:var(--u5)}
.boek h2{color:var(--opAccent)}
.boek p{max-width:44ch;color:var(--opAccent);opacity:.86;
  font-size:var(--fs-4);line-height:var(--lh-lead)}
.boek-acties{display:grid;gap:var(--u2);align-content:start}
.boek .knop{background:var(--opAccent);color:var(--accent);
  min-height:60px;font-size:var(--fs-4)}
.boek .knop-stil{border-color:var(--opAccent);color:var(--opAccent);
  min-height:60px;font-size:var(--fs-4)}
.boek-bij{font-size:var(--fs-2);opacity:.82}
@media (min-width:900px){
  .boek-in{grid-template-columns:minmax(0,1fr) minmax(0,.7fr);
    gap:var(--u8);align-items:center}
}

/* ------------------------------------------------------------------- voet */
.voet{background:var(--diep);padding:var(--u6) 0 var(--u8)}
.voet-in{display:grid;gap:var(--u3)}
.voet p{font-size:var(--fs-2);line-height:var(--lh-lead);color:var(--stil)}
.voet a{color:var(--tekst)}
.voet-links{display:flex;flex-wrap:wrap;gap:var(--u3);font-size:var(--fs-2)}
.credit{color:var(--stil)}
@media (max-width:899px){
  .voet{padding-bottom:var(--u10)}
}

/* ------------------------------------------------------------- beweging */
/* De verborgen beginstaat zit ÍN de keyframes, achter een klasse die het
 * script alleen zet bij no-preference. Zonder script of met beweging uit
 * bestaat .bm-anim niet, gelden deze regels niet, en staat er niets op nul. */
@keyframes rijzen{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes zakken{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes vallen{from{stroke-dashoffset:64}to{stroke-dashoffset:0}}
@keyframes draaien{from{transform:rotate(-7deg)}to{transform:rotate(3deg)}}
@keyframes trekken{from{stroke-dashoffset:640}to{stroke-dashoffset:0}}
@keyframes ademen{from{transform:scale(1)}to{transform:scale(1.035)}}

.bm-anim .op{animation:rijzen var(--t-3) var(--ease) both;
  animation-play-state:paused;animation-delay:calc(var(--i,0) * 90ms)}
.bm-anim .op.aan{animation-play-state:running}

.bm-anim .beugel{animation:draaien 18s var(--ease-in-out) infinite alternate}
.bm-anim .straal{stroke-dasharray:8 56;animation:vallen 2.1s linear infinite}
.bm-anim .straal-b{animation-delay:.7s}
.bm-anim .straal-c{animation-delay:1.4s}
.bm-anim .pil{animation:zakken var(--t-3) var(--ease) both;
  animation-play-state:paused;animation-delay:400ms}
.bm-anim .pil.aan{animation-play-state:running}

/* De boog trekt zichzelf zodra hij in beeld komt: de ring keert terug als
 * beweging, niet alleen als vorm. */
.bm-anim .boog-lijn{stroke-dasharray:640;
  animation:trekken 1.8s var(--ease-in-out) both;animation-play-state:paused}
.bm-anim .boog-lijn.aan{animation-play-state:running}
.bm-anim .boog-fig img{animation:ademen 26s var(--ease-in-out) infinite alternate}

@media (prefers-reduced-motion:reduce){
  /* Overschrijf de ANIMATIE, niet de transform: een keyframe schrijft in de
   * animation-origin cascade en wint van elke gewone declaratie. */
  .bm-anim .op,.bm-anim .beugel,.bm-anim .straal,.bm-anim .pil,
  .bm-anim .boog-lijn,.bm-anim .boog-fig img{animation:none}
  .knop,.knop-stil,.vpauze,.skip-link,.duim,.vraag summary svg{transition:none}
  html{scroll-behavior:auto}
}