/* ==========================================================================
   Willem Parel Draaiorgel Amusements B.V. -- 2027 design system
   One stylesheet for the entire website. Consolidates the former
   wp-2027.css / willem-correct.css / style.css layers, which remain on disk
   unchanged for reference and rollback.

   Palette : deep navy, warm gold, ivory/white, discreet red CTA
   Type    : Georgia serif display headings + system sans body (no webfonts)

   Contents
     1 Tokens          5 Buttons         9 Hero
     2 Reset           6 Topbar         10 Page header
     3 Layout          7 Masthead/nav   11 Cards and galleries
     4 Typography      8 Mobile drawer  12 Bands, forms, footer, responsive
   ========================================================================== */

/* ------------------------------------------------------------- 1. Tokens */
:root{
  --navy:#061727;
  --navy-2:#0b2740;
  --navy-3:#123c5c;
  --gold:#bf9a44;
  --gold-2:#e6c877;
  --gold-3:#f5e8c8;
  /* Goud als *tekst* op een lichte ondergrond. Het gewone goud (#bf9a44) haalt
     op wit maar 2,65:1 en is daarmee te licht voor leesbare tekst; deze
     diepere tint haalt 5,35:1 op wit, 5,05:1 op ivoor en 4,67:1 op de
     papierkleur. Voor randen, lijnen en vlakken blijft het gewone goud staan:
     die zijn decoratief en geen tekst. */
  --gold-ink:#8a6420;
  --red:#c22b25;
  --red-2:#9d1c17;
  --ivory:#fbf8f2;
  --white:#ffffff;
  --ink:#122029;
  --muted:#66727d;
  --line:#e6dfd3;
  --shell:1280px;
  --gutter:clamp(18px,4vw,48px);
  /* Hoogte van de plakkende kop; het mobiele menu begint daaronder. app.js zet
     hier de gemeten waarde, de waarden hieronder zijn de terugval zonder JS. */
  --wp-head-h:92px;
  --r-sm:4px;
  --r-md:10px;
  --r-pill:999px;
  --shadow-1:0 10px 30px rgba(6,23,39,.08);
  --shadow-2:0 26px 60px rgba(6,23,39,.16);
  --serif:Georgia,"Times New Roman",Times,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Vaste leesbaarheidskleuren op donkerblauw - zie sectie 21 onderaan */
  --on-dark:#d7e0e8;
  --gold-on-dark:#d8ad4c;
}

/* -------------------------------------------------------------- 2. Reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:500;line-height:1.06;letter-spacing:-.02em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
ul{margin:0;padding:0;list-style:none}
figure{margin:0}
button{font:inherit}
table{border-collapse:collapse}
:focus-visible{outline:3px solid var(--gold-ink);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--navy);color:#fff;
  padding:12px 18px;font-size:.8rem;font-weight:700}
.skip:focus{left:12px;top:12px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------------------------------------------------------------- 3. Layout */
.shell{width:min(var(--shell),calc(100% - var(--gutter)*2));margin-inline:auto}
.shell--narrow{max-width:940px}
.section{padding:clamp(56px,7vw,104px) 0}
.section--tight{padding:clamp(38px,5vw,64px) 0}
.section--white{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section--navy{background:var(--navy);color:#dbe5ec}
.section--navy h1,.section--navy h2,.section--navy h3{color:#fff}
.section--paper{background:linear-gradient(180deg,var(--ivory),#f4efe4)}
.grid{display:grid;gap:clamp(12px,1.6vw,22px)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.stack>*+*{margin-top:16px}
.flow>*+*{margin-top:clamp(20px,3vw,34px)}

/* --------------------------------------------------------- 4. Typography */
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:.7rem;font-weight:800;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold-ink)}
.kicker::before{content:"";width:34px;height:1px;background:var(--gold-ink);opacity:.7}
.kicker--light{color:var(--gold-2)}
.kicker--light::before{background:var(--gold-2)}
.h1{font-size:clamp(34px,5.4vw,68px);letter-spacing:-.03em}
.h2{font-size:clamp(27px,3.5vw,48px)}
.h3{font-size:clamp(20px,2vw,27px)}
.h4{font-family:var(--sans);font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.lead{font-size:clamp(1rem,1.15vw,1.12rem);color:var(--muted);max-width:62ch}
.section--navy .lead{color:#b6c5d0}
.accent{font-style:normal;color:var(--gold-ink)}
.section--navy .accent{color:var(--gold-2)}
.rule{width:64px;height:2px;background:var(--gold);margin:22px 0}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(20px,4vw,60px);
  margin-bottom:clamp(26px,3.4vw,44px)}
.head__lead{max-width:46ch;color:var(--muted);font-size:.97rem;margin:0}
.meta{color:var(--muted);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700}


/* ------------------------------------------------------------ 5. Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;
  padding:0 24px;border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;
  font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),
    background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn__arrow{font-size:1rem;line-height:1;transition:transform .25s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(3px)}
.btn--red{background:var(--red);color:#fff;box-shadow:0 12px 26px rgba(194,43,37,.22)}
.btn--red:hover{background:var(--red-2)}
.btn--gold{background:var(--gold-2);color:var(--navy)}
.btn--gold:hover{background:var(--gold-3)}
.btn--ghost{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.07)}
.btn--ghost:hover{background:rgba(255,255,255,.14)}
.btn--outline{border-color:var(--line);background:var(--white);color:var(--navy)}
.btn--outline:hover{border-color:var(--gold-ink);color:var(--gold-ink)}
.btn--sm{min-height:44px;padding:0 18px;font-size:.68rem}
.btn--block{width:100%}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}
.textlink{display:inline-flex;align-items:center;gap:8px;padding-bottom:5px;
  font-size:.76rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--navy);border-bottom:1px solid var(--gold)}
.textlink:hover{color:var(--gold-ink)}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* ------------------------------------------------------------- 6. Topbar */
.topbar{background:var(--navy);color:#c3d0da;font-size:.74rem;letter-spacing:.04em}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:40px}
.topbar__label{color:var(--gold-2);font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.topbar__group{display:flex;align-items:center;gap:clamp(12px,2vw,26px);flex-wrap:wrap}
.topbar a{transition:color .2s var(--ease)}
.topbar a:hover{color:#fff}

/* ------------------------------------------------------ 7. Masthead/nav */
.masthead{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease)}
.masthead.is-stuck{box-shadow:var(--shadow-1)}
.masthead__inner{display:flex;align-items:center;gap:clamp(14px,2vw,28px);
  min-height:92px;padding-block:6px}
.brandmark{display:flex;align-items:center;flex:0 0 auto;max-width:100%}
/* Het naamplaatlogo op maat: 200-216 px breed op desktop, altijd de volledige
   tekening in beeld (geen crop) en nooit vervormd, want de hoogte volgt de
   verhouding van het bestand (800 x 295); 216 px past binnen de kop van 92 px. */
.brandmark img{display:block;width:clamp(200px,15vw,216px);height:auto;max-width:100%}
.nav{display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.3vw,20px);flex:1 1 auto}
.nav__link{position:relative;padding:12px 2px;color:#41505b;font-size:.73rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.nav__link::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__link:hover{color:var(--navy)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav__link.is-active{color:var(--navy)}
/* margin-left:auto houdt de knoppen rechts, ook wanneer het gewone menu op
   smalle schermen verdwijnt en alleen de hamburger overblijft. */
.masthead__actions{display:flex;align-items:center;gap:clamp(10px,1.2vw,14px);flex:0 0 auto;margin-left:auto}
/* Hamburger: 48 x 48 px klikgebied, rechts uitgelijnd via .masthead__actions,
   verticaal gecentreerd en met een rustige kaartlook in plaats van een kale knop. */
.navtoggle{display:none;flex:0 0 auto;width:48px;height:48px;align-items:center;justify-content:center;
  padding:0;border:1px solid rgba(6,23,39,.16);border-radius:12px;
  background:linear-gradient(180deg,var(--white),#f5f0e7);
  color:var(--navy);cursor:pointer;box-shadow:0 2px 8px rgba(6,23,39,.06);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.navtoggle:hover{border-color:var(--gold);box-shadow:0 8px 20px rgba(6,23,39,.13)}
.navtoggle:active{transform:translateY(1px)}
.navtoggle[aria-expanded="true"]{color:#fff;border-color:var(--gold);
  background:linear-gradient(180deg,var(--navy-2),var(--navy))}
.navtoggle__bars{position:relative;width:20px;height:2px;background:currentColor}
.navtoggle__bars::before,.navtoggle__bars::after{content:"";position:absolute;left:0;width:20px;
  height:2px;background:currentColor;transition:transform .25s var(--ease)}
.navtoggle__bars::before{top:-6px}
.navtoggle__bars::after{top:6px}
.navtoggle[aria-expanded="true"] .navtoggle__bars{background:transparent}
.navtoggle[aria-expanded="true"] .navtoggle__bars::before{transform:translateY(6px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .navtoggle__bars::after{transform:translateY(-6px) rotate(-45deg)}


/* ------------------------------------------------------ 8. Mobile drawer */
/* Het menu hangt onder de kop in plaats van eroverheen: logo en hamburger
   blijven zichtbaar en de hamburger sluit het menu ook weer. .drawer zelf
   vangt geen klikken op, anders zou de kop onbereikbaar worden. */
.drawer{position:fixed;inset:0;z-index:200;pointer-events:none}
.drawer[hidden]{display:none}
.drawer__scrim{position:absolute;left:0;right:0;bottom:0;top:var(--wp-head-h,92px);
  width:100%;padding:0;border:0;cursor:pointer;pointer-events:auto;
  background:rgba(4,16,28,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.drawer__panel{position:absolute;top:var(--wp-head-h,92px);right:0;width:min(420px,100%);
  max-height:calc(100vh - var(--wp-head-h,92px));overflow-y:auto;pointer-events:auto;
  border-radius:0 0 var(--r-md) var(--r-md);
  background:var(--navy);color:#fff;padding:20px 24px 34px;box-shadow:var(--shadow-2);
  animation:wp-drop .32s var(--ease)}
@keyframes wp-drop{from{transform:translateY(-16px);opacity:.4}to{transform:none;opacity:1}}
.drawer__top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.drawer__title{font-family:var(--serif);font-size:1.08rem;color:var(--gold-2)}
.drawer__close{width:42px;height:42px;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-sm);
  background:none;color:#fff;font-size:1.15rem;line-height:1;cursor:pointer}
.drawer__close:hover{background:rgba(255,255,255,.1)}
.drawer__nav a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.9rem;font-weight:700}
.drawer__nav a::after{content:"\2192";color:var(--gold-2);opacity:.6}
.drawer__nav a:hover,.drawer__nav a.is-active{color:var(--gold-2)}
.drawer__cta{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.drawer__meta{margin-top:24px;color:#a3b3c0;font-size:.82rem;line-height:1.9}
.drawer__meta strong{display:block;margin-bottom:6px;color:#fff;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase}
.drawer__meta a:hover{color:#fff}
body.is-locked{overflow:hidden}


/* --------------------------------------------------------------- 9. Hero */
.hero{position:relative;display:flex;align-items:center;overflow:hidden;
  background:var(--navy);color:#fff;min-height:clamp(460px,36vw,540px)}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(6,23,39,.95) 0%,rgba(6,23,39,.88) 32%,rgba(6,23,39,.5) 60%,rgba(6,23,39,.2) 100%),
  linear-gradient(180deg,rgba(6,23,39,.25),rgba(6,23,39,.6))}
.hero__inner{position:relative;z-index:2;padding:clamp(44px,5.4vw,68px) 0}
.hero__content{max-width:660px}
.hero h1{font-size:clamp(32px,4.3vw,58px)}
.hero__lead{margin-top:16px;color:#d2dde5;font-size:clamp(1rem,1.08vw,1.06rem);max-width:56ch}
.hero__actions{margin-top:26px}
.hero__facts{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:28px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.16)}
.hero__facts li{display:flex;align-items:center;gap:9px;color:#c3d0da;font-size:.76rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hero__facts li::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--gold-2);flex:0 0 auto}
.hero__credit{position:absolute;right:var(--gutter);bottom:14px;z-index:2;color:rgba(255,255,255,.55);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}

/* ------------------------------------------------------- 10. Page header */
.pagehead{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  background:var(--navy-2);color:#fff;padding:clamp(52px,7vw,92px) 0;
  min-height:clamp(300px,33vw,380px)}
.pagehead::before{content:"";position:absolute;inset:0;background-image:var(--ph-img,none);
  background-size:cover;background-position:center 34%;opacity:.45}
.pagehead::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(6,23,39,.95),rgba(6,23,39,.72) 52%,rgba(6,23,39,.35)),
  linear-gradient(180deg,rgba(6,23,39,.35),rgba(6,23,39,.75))}
.pagehead__inner{position:relative;z-index:2;width:min(var(--shell),calc(100% - var(--gutter)*2));
  margin-inline:auto}
.pagehead h1{font-size:clamp(32px,4.6vw,58px)}
.pagehead__lead{margin-top:16px;color:#c9d6e0;max-width:58ch}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;color:#93a5b2;font-size:.72rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.crumbs a:hover{color:#fff}
.crumbs__sep{color:var(--gold-2)}

/* -------------------------------------------------- 11. Trust bar / stats */
.trustbar{position:relative;z-index:5;margin-top:clamp(-78px,-6vw,-44px)}
.trustbar__card{display:grid;grid-template-columns:repeat(4,1fr);background:var(--white);
  border-top:3px solid var(--gold);box-shadow:var(--shadow-2)}
.trustbar__item{padding:clamp(18px,2.4vw,30px);border-right:1px solid var(--line)}
.trustbar__item:last-child{border-right:0}
.trustbar__num{display:block;font-family:var(--serif);font-size:clamp(21px,2.3vw,30px);
  line-height:1.15;color:var(--navy)}
.trustbar__label{display:block;margin-top:8px;color:var(--muted);font-size:.68rem;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14)}
.stats__item{background:var(--navy);padding:clamp(22px,3vw,34px)}
.stats__num{display:block;font-family:var(--serif);font-size:clamp(26px,3vw,40px);color:var(--gold-2)}
.stats__label{display:block;margin-top:6px;color:#b6c5d0;font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}

/* ------------------------------------------------------------- 12. Media */
.figure{position:relative;overflow:hidden;background:var(--navy-2)}
.figure img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.figure--43{aspect-ratio:4/3}
.figure--32{aspect-ratio:3/2}
.figure--11{aspect-ratio:1/1}
.figure--34{aspect-ratio:3/4}
.figure--169{aspect-ratio:16/9}
.figure--fill{height:100%}
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(26px,4.6vw,68px);align-items:center}
.split__media{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.split__media--stack{grid-template-columns:1fr}
.split__media--offset>*:first-child{margin-top:clamp(18px,3vw,44px)}


/* ------------------------------------------------------- 13. Cards, lists */
.card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:#dbd1bd}
.card:hover .figure img{transform:scale(1.05)}
.card__body{display:flex;flex:1 1 auto;flex-direction:column;gap:12px;
  padding:clamp(20px,2.2vw,28px)}
.card__title{font-size:clamp(19px,1.7vw,23px);color:var(--navy)}
.card__text{margin:0;color:var(--muted);font-size:.92rem}
.card__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:8px}
.card__tag{display:inline-block;padding:6px 12px;background:var(--gold-3);color:#7a5f1c;
  font-size:.65rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.card--bare{background:transparent}
.spec,.checklist{display:grid;gap:9px;margin:0}
.spec li,.checklist li{display:flex;align-items:flex-start;gap:11px;color:var(--muted);font-size:.92rem}
.spec li::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:8px;
  border-radius:50%;background:var(--gold)}
.checklist li{color:var(--ink);font-size:.95rem}
.checklist li::before{content:"\2713";flex:0 0 auto;color:var(--gold-ink);font-weight:800;line-height:1.5}

/* ------------------------------------------- 14. Photo cards and gallery */
.photocard{position:relative;display:block;overflow:hidden;background:var(--navy-2);color:#fff}
.photocard img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.photocard::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(6,23,39,0) 40%,rgba(6,23,39,.55) 68%,rgba(6,23,39,.92))}
.photocard__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(16px,2vw,24px)}
.photocard__cap h3{font-size:clamp(17px,1.6vw,21px)}
.photocard__cap p{margin:5px 0 0;color:rgba(255,255,255,.76);font-size:.82rem}
.photocard__cap .meta{color:var(--gold-2)}
.photocard:hover img{transform:scale(1.06)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,14px)}
.gallery__item{position:relative;display:block;overflow:hidden;background:var(--navy-2);
  aspect-ratio:1/1}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gallery__item::after{content:"";position:absolute;inset:0;background:rgba(6,23,39,0);
  transition:background .3s var(--ease)}
.gallery__item:hover::after{background:rgba(6,23,39,.3)}
.gallery__item:hover img{transform:scale(1.05)}
.gallery__item--wide{grid-column:span 2}
.gallery__item--tall{grid-row:span 2;aspect-ratio:auto}
.gallery__zoom{position:absolute;right:12px;bottom:12px;z-index:2;display:flex;
  align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;
  background:rgba(6,23,39,.6);color:#fff;font-size:.85rem;opacity:0;
  transition:opacity .3s var(--ease)}
.gallery__item:hover .gallery__zoom{opacity:1}
.gallery__hint{margin-top:18px;color:var(--muted);font-size:.82rem;text-align:center}

/* ------------------------------------------- 15. Features, steps, quotes */
.featuregrid{display:grid;gap:clamp(16px,2.2vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.feature{padding:clamp(22px,2.6vw,32px);background:var(--white);
  border:1px solid var(--line);border-top:3px solid var(--gold)}
.feature__num{display:block;margin-bottom:12px;color:var(--gold-ink);font-family:var(--serif);
  font-size:.95rem;letter-spacing:.12em}
.feature h3{font-size:clamp(18px,1.6vw,22px);color:var(--navy);margin-bottom:10px}
.feature p{margin:0;color:var(--muted);font-size:.92rem}
/* Ankerspringen: ruimte vrijhouden onder de plakkende kop. */
:target{scroll-margin-top:124px}

.steps{counter-reset:wpstep;display:grid;gap:clamp(14px,2vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));list-style:none}
.steps li{position:relative;padding-top:34px;border-top:1px solid rgba(255,255,255,.2)}
.steps li::before{counter-increment:wpstep;content:counter(wpstep,decimal-leading-zero);
  position:absolute;top:12px;left:0;color:var(--gold-2);font-family:var(--serif);font-size:1rem}
.steps h3{font-size:1.05rem;margin-bottom:8px}
.steps p{margin:0;color:#b6c5d0;font-size:.9rem}
.quote{text-align:center;max-width:900px;margin-inline:auto}
.quote blockquote{margin:0;font-family:var(--serif);font-size:clamp(21px,2.9vw,36px);
  line-height:1.32;color:#fff}
.quote__source{display:block;margin-top:22px;color:var(--gold-2);font-size:.72rem;
  font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.timeline{margin:0;padding-left:clamp(18px,3vw,34px);border-left:1px solid var(--line);list-style:none}
.timeline li{position:relative;padding-bottom:clamp(22px,3vw,36px)}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;top:9px;
  left:calc(-1 * clamp(18px,3vw,34px) - 5px);width:9px;height:9px;border-radius:50%;
  background:var(--gold)}
.timeline__year{display:block;font-family:var(--serif);font-size:1.3rem;color:var(--navy)}
.timeline__text{margin:6px 0 0;color:var(--muted);font-size:.94rem}


/* --------------------------------- 16. Forms, notices, contact details */
.form{display:grid;gap:16px}
.form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.field{display:grid;gap:7px}
.field label{color:var(--muted);font-size:.68rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase}
.field input,.field select,.field textarea{width:100%;padding:13px 15px;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  font-family:inherit;font-size:.95rem;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(191,154,68,.15);outline:none}
.field textarea{min-height:150px;resize:vertical}
.field--check{display:flex;flex-direction:row;align-items:flex-start;gap:10px}
.field--check input{width:auto;margin-top:4px}
.field--check label{text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:600;
  color:var(--ink)}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.form__note{margin:0;color:var(--muted);font-size:.78rem}
.infocard{padding:clamp(20px,2.4vw,30px);background:var(--white);border:1px solid var(--line)}
.infocard h3{margin-bottom:14px;font-size:1.05rem;color:var(--navy)}
.infocard__list{display:grid;gap:10px;color:var(--muted);font-size:.93rem}
.infocard__list a:hover{color:var(--gold-ink)}
.notice{display:flex;gap:14px;padding:16px 20px;border-left:3px solid var(--gold);
  background:var(--gold-3);color:#4a3a12;font-size:.9rem}
.notice--ok{border-left-color:#2f7d4f;background:#e8f5ec;color:#1e5233}
.notice--err{border-left-color:var(--red);background:#fbeceb;color:#7c1d19}
.notice strong{display:block;margin-bottom:2px}

/* ------------------------------------------------------------- 17. Footer */
.sitefoot{background:var(--navy);color:#a9b8c4;font-size:.9rem;padding-top:clamp(46px,6vw,80px)}
.footgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;
  gap:clamp(24px,3.4vw,52px);padding-bottom:clamp(34px,4vw,56px)}
.sitefoot__logo{display:inline-flex;align-items:center}
.sitefoot__logo img{display:block;width:clamp(200px,15vw,216px);height:auto;max-width:100%}
.sitefoot__intro{margin-top:20px;max-width:34ch;line-height:1.75}
.sitefoot__title{margin-bottom:18px;color:var(--gold-2);font-family:var(--sans);font-size:.68rem;
  font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.sitefoot__list{display:grid;gap:10px}
.sitefoot__list a{transition:color .2s var(--ease)}
.sitefoot__list a:hover{color:#fff}
.sitefoot__contact{display:grid;gap:10px}
.sitefoot__contact dt{color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase}
.sitefoot__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;padding:20px 0;border-top:1px solid rgba(255,255,255,.12);
  color:#8b9ba8;font-size:.78rem}
.sitefoot__bottom a:hover{color:#fff}
.sitefoot__bottom ul{display:flex;flex-wrap:wrap;gap:18px}

/* -------------------------------------------- 18. Lightbox and utilities */
.lightbox{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,4vw,50px);background:rgba(4,14,24,.94)}
.lightbox[hidden]{display:none}
.lightbox img{width:auto;max-width:100%;max-height:82vh;object-fit:contain;box-shadow:var(--shadow-2)}
.lightbox__btn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  color:#fff;background:rgba(6,23,39,.5);border:1px solid rgba(255,255,255,.3);
  border-radius:50%;font-size:1.15rem;line-height:1;cursor:pointer}
.lightbox__btn:hover{background:rgba(255,255,255,.16)}
.lightbox__prev{left:clamp(10px,2vw,30px)}
.lightbox__next{right:clamp(10px,2vw,30px)}
.lightbox__close{top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);transform:none}
.lightbox__cap{position:absolute;left:0;right:0;bottom:clamp(12px,3vw,28px);padding:0 72px;
  text-align:center;color:#c9d6e0;font-size:.85rem}
.totop{position:fixed;right:clamp(12px,2vw,26px);bottom:clamp(12px,2vw,26px);z-index:80;
  display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  color:#fff;background:var(--navy);border-radius:50%;box-shadow:var(--shadow-1);
  opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.totop.is-visible{opacity:1;pointer-events:auto}
.totop:hover{transform:translateY(-3px)}
html.js [data-reveal],html.js .js-reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js [data-reveal].is-in,html.js .js-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js [data-reveal],html.js .js-reveal{opacity:1;transform:none;transition:none}
  .card:hover,.totop:hover{transform:none}
  .hero__media img,.photocard img{transition:none}
}


/* ------------------------------------------------- 19. Content utilities */
.prose{max-width:70ch;color:#3c4a54;font-size:1.02rem}
.prose h2{margin:40px 0 14px;font-size:clamp(22px,2.6vw,32px);color:var(--navy)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:28px 0 10px;font-size:1.18rem;color:var(--navy)}
.prose ul{display:grid;gap:9px;margin:0 0 20px}
.prose ul li{display:flex;gap:11px}
.prose ul li::before{content:"";flex:0 0 auto;width:6px;height:6px;margin-top:9px;
  border-radius:50%;background:var(--gold)}
.prose blockquote{margin:0 0 22px;padding-left:20px;border-left:2px solid var(--gold);
  font-family:var(--serif);font-size:1.14rem;color:var(--navy)}
.prose a{border-bottom:1px solid var(--gold)}
.sidegrid{display:grid;grid-template-columns:1.62fr 1fr;gap:clamp(26px,4vw,64px);align-items:start}
.sidegrid__aside{display:grid;gap:20px}
.sticky{position:sticky;top:116px}
.dl{display:grid;gap:14px;margin:0}
.dl div{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.dl dt{color:var(--muted);font-size:.72rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase}
.dl dd{margin:0;font-weight:600}
.page-image{margin-top:-64px}

/* --------------------------------------------------- 20. Responsive */
@media (max-width:1140px){
  .nav{display:none}
  .navtoggle{display:inline-flex}
  .masthead__actions .btn--red{display:none}
  .footgrid{grid-template-columns:1.4fr 1fr 1fr}
  .sidegrid{grid-template-columns:1fr}
  .sticky{position:static}
}
@media (max-width:960px){
  .grid--4,.grid--3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .split__media--offset>*:first-child{margin-top:0}
  .trustbar{margin-top:0}
  .trustbar__card{grid-template-columns:repeat(2,1fr)}
  .trustbar__item:nth-child(2n){border-right:0}
  .trustbar__item:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .head{flex-direction:column;align-items:flex-start;gap:16px}
  .hero{min-height:clamp(400px,62vw,500px)}
  .hero__media img{object-position:center 40%}
  .pagehead{min-height:270px}
  .footgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .grid--4,.grid--3,.grid--2{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery__item--tall{grid-row:span 1}
  .split__media{grid-template-columns:1fr}
  .topbar__group li:nth-child(n+2),.topbar__group a:nth-child(n+2){display:none}
  .topbar__inner{justify-content:center}
  .topbar__label{display:none}
  .trustbar__card{grid-template-columns:1fr}
  .trustbar__item{border-right:0;border-bottom:1px solid var(--line)}
  .footgrid{grid-template-columns:1fr}
  .btn{padding:0 18px}
  .hero__facts{gap:8px 18px}
  .hero__credit{display:none}
  .timeline{padding-left:20px}
  .lightbox__cap{padding:0 16px}
  .sidegrid{gap:30px}
}
/* -------- 20b. Kop, logo en mobiel menu op tablet en mobiel --------
   Tot 768 px wordt de kop lager en het logo kleiner, zodat er tussen het logo
   en de hamburger ruimte overblijft. Onder 420 px blijft het logo op 145 px
   staan. De hamburger houdt overal 48 x 48 px als klikgebied. */
@media (max-width:768px){
  :root{--wp-head-h:72px}
  .masthead__inner{min-height:72px;gap:14px}
  .brandmark img{width:clamp(145px,40vw,155px)}
  .sitefoot__logo img{width:clamp(145px,40vw,155px)}
  .drawer__panel{padding:18px 20px 30px}
}
@media (max-width:420px){
  .masthead__inner{gap:12px}
  .brandmark img{width:clamp(145px,40vw,155px)}
}
@media print{
  .topbar,.masthead,.drawer,.totop,.lightbox,.skip{display:none !important}
  body{background:#fff;color:#000}
  .hero{min-height:auto;background:#fff;color:#000}
  .hero__media,.hero__scrim,.pagehead::before,.pagehead::after{display:none}
  .section{padding:18px 0}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}


/* ==========================================================================
   21. Contrast op donkerblauw
   De donkerblauwe secties gebruikten dezelfde grijstinten als de witte
   secties: lopende tekst viel weg en de checklist was op donker bijna
   onleesbaar. Hieronder staat alles wat op donker staat vast op lichte
   kleuren. Contrast op #061727: wit 18,4:1 - #d7e0e8 13,6:1 - #d8ad4c 8,6:1
   (ruim boven WCAG AA van 4,5:1 voor normale tekst).
   ========================================================================== */
.section--navy .prose,
.section--navy .prose p,
.section--navy .prose ul li,
.section--navy .lead,
.section--navy .head__lead,
.section--navy .card__text,
.section--navy .feature p,
.section--navy .steps p,
.section--navy .timeline__text,
.section--navy .gallery__hint{color:var(--on-dark)}
.section--navy .prose h2,.section--navy .prose h3,.section--navy .prose strong,
.section--navy .prose b,.section--navy .timeline__year{color:#fff}
.section--navy .prose a{color:var(--gold-on-dark);border-bottom:1px solid currentColor}
.section--navy .checklist li,.section--navy .spec li{color:var(--on-dark)}
.section--navy .checklist li::before{color:var(--gold-on-dark)}
.section--navy .spec li::before{background:var(--gold-on-dark)}
.section--navy .timeline{border-left-color:rgba(255,255,255,.22)}
.section--navy .timeline li::before{background:var(--gold-on-dark)}
/* Het goudaccent op donker wordt één rustige, vaste tint (#d8ad4c) */
.kicker--light,.section--navy .accent,.pagehead .accent,.hero .accent,.stats__num,
.sitefoot__title,.topbar__label,.drawer__title,.drawer__nav a::after,
.steps li::before,.quote__source,.photocard__cap .meta{color:var(--gold-on-dark)}
.kicker--light::before{background:var(--gold-on-dark)}
/* Een goudaccent dat op donkerblauw belandt, houdt de lichte tint: het
   donkere goud van --gold-ink zou daar juist wegvallen. */
.hero .kicker,.section--navy .kicker,.pagehead .kicker,.sitefoot .kicker,
.drawer__panel .kicker{color:var(--gold-on-dark)}
.hero .kicker::before,.section--navy .kicker::before,.pagehead .kicker::before,
.sitefoot .kicker::before,.drawer__panel .kicker::before{background:var(--gold-on-dark)}
/* De focusrand staat op lichte én donkere vlakken; op donker is de lichte
   goudtint nodig om zichtbaar te blijven. */
.hero :focus-visible,.section--navy :focus-visible,.pagehead :focus-visible,
.sitefoot :focus-visible,.topbar :focus-visible,.drawer :focus-visible{
  outline-color:var(--gold-on-dark)}


/* ==========================================================================
   22. Page-load animatie
   Rustige opener in pure CSS: de pagina komt binnen met een korte fade,
   waarna kop, loopptekst, knoppen en pas daarna de beelden volgen. Alles
   bij elkaar onder één seconde, zonder spinner en zonder layoutverschuiving
   (er wordt alleen met opacity en transform gewerkt). De klasse html.js
   komt uit header.php; zonder JavaScript staat alles direct stil.
   ========================================================================== */
@keyframes wp-page-in{from{opacity:0}to{opacity:1}}
@keyframes wp-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

html.js body{animation:wp-page-in .5s var(--ease) backwards}
html.js .pagehead,.html.js .hero__media img{animation:wp-page-in .55s var(--ease) backwards}
html.js .figure img{animation:wp-page-in .7s var(--ease) .22s backwards}

html.js .hero__content>*,
html.js .pagehead__inner>*{animation:wp-rise .55s var(--ease) backwards}
html.js .hero__content>*:nth-child(2),
html.js .pagehead__inner>*:nth-child(2){animation-delay:.07s}
html.js .hero__content>*:nth-child(3),
html.js .pagehead__inner>*:nth-child(3){animation-delay:.17s}
html.js .hero__content>*:nth-child(4),
html.js .pagehead__inner>*:nth-child(4){animation-delay:.27s}
html.js .hero__content>*:nth-child(n+5){animation-delay:.36s}


/* ==========================================================================
   23. Cookievoorkeuren
   Compacte balk onderaan met Accepteren, Weigeren en Voorkeuren. Zonder
   keuze blijft de balk staan (geen stilzwijgende toestemming); de keuze
   wordt lokaal in de browser bewaard (localStorage, wp-cookie-keuze-2027).
   ========================================================================== */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:170;pointer-events:none;
  display:flex;justify-content:center;padding:clamp(10px,1.5vw,18px)}
.cookiebar[hidden]{display:none}
.cookiebar__panel{pointer-events:auto;width:min(1120px,100%);max-height:min(80vh,560px);overflow:auto;
  background:rgba(255,255,255,.98);border:1px solid var(--line);border-top:3px solid var(--gold);
  border-radius:var(--r-md);box-shadow:0 26px 70px rgba(6,23,39,.28);
  padding:clamp(18px,2.2vw,26px);display:grid;gap:16px;align-items:center;
  grid-template-columns:minmax(0,1.7fr) auto;animation:wp-rise .5s var(--ease) backwards}
.cookiebar__title{margin:0 0 6px;font-family:var(--serif);font-size:1.06rem;color:var(--navy)}
.cookiebar__text{margin:0;max-width:76ch;color:var(--muted);font-size:.88rem;line-height:1.62}
.cookiebar__text a{color:var(--navy);border-bottom:1px solid var(--gold)}
.cookiebar__actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end}
.cookiebar__more{padding:8px 2px;border:0;border-bottom:1px solid var(--gold);background:none;
  color:var(--navy);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;white-space:nowrap}
.cookiebar__more:hover{color:var(--gold-ink)}
.cookieprefs{grid-column:1/-1;display:grid;gap:14px;padding-top:16px;border-top:1px solid var(--line)}
.cookieprefs[hidden]{display:none}
.cookieprefs__row{display:flex;gap:12px;align-items:flex-start}
.cookieprefs__row input{flex:0 0 auto;width:18px;height:18px;margin-top:3px;accent-color:var(--gold)}
.cookieprefs__row input:disabled{opacity:.75}
.cookieprefs__row label{display:grid;gap:3px;cursor:pointer}
.cookieprefs__row strong{color:var(--navy);font-size:.92rem}
.cookieprefs__row span{color:var(--muted);font-size:.85rem;line-height:1.55}
.cookieprefs__foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
body.is-cookiebar .totop{opacity:0;pointer-events:none}
/* De knop in de voettekst ziet er hetzelfde uit als de links ernaast */
.sitefoot__cookiebtn{padding:0;border:0;background:none;color:inherit;font:inherit;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sitefoot__cookiebtn:hover{color:#fff}
@media (max-width:900px){
  .cookiebar__panel{grid-template-columns:1fr;gap:14px}
  .cookiebar__actions{justify-content:flex-start}
}
@media (max-width:520px){
  .cookiebar__panel{padding:16px;gap:12px}
  .cookiebar__actions .btn,.cookieprefs__foot .btn{flex:1 1 auto}
}


/* ==========================================================================
   24. Verhuur glass-card, honeypot en formulierdetails
   ========================================================================== */
.glasscard{position:relative;padding:clamp(22px,3vw,38px);border-radius:var(--r-md);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 24px 60px rgba(0,0,0,.18)}
.glasscard .grid--2{gap:clamp(10px,1.4vw,24px) clamp(20px,3vw,48px)}
.glasscard .checklist li{font-size:.95rem;line-height:1.6}
.glasscard__note{margin:clamp(18px,2.4vw,26px) 0 0;padding-top:18px;
  border-top:1px solid rgba(255,255,255,.12);color:var(--on-dark);font-size:.9rem}
/* Honeypot: buiten beeld voor mensen, vindbaar voor bots */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
  opacity:0;pointer-events:none}
select{max-width:100%}


/* ==========================================================================
   25. Reduced motion: laatste woord
   Staat bewust onderaan, zodat deze regels alle animaties hierboven
   overschrijven voor bezoekers die beweging hebben uitgezet.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  html.js body,html.js .pagehead,html.js .hero__media img,html.js .figure img,
  html.js .hero__content>*,html.js .pagehead__inner>*,.cookiebar__panel,.drawer__panel{animation:none}
  html.js [data-reveal],html.js .js-reveal{opacity:1;transform:none;transition:none}
}