/*
Theme Name: Imperior
Theme URI: https://imperiormanagement.com/
Author: Virtual Knowledge
Description: Thema voor Imperior. De opmaak komt ongewijzigd uit de statische
  versie /v7/: donkere achtergrond, koperen accenten, de DNA-film als
  achtergrond in de hero en blokken die infaden bij het scrollen. Geen
  framework, geen build, geen externe afhankelijkheden.
Version: 1.8.1
Requires at least: 6.4
Requires PHP: 8.0
License: Eigendom van Imperior
Text Domain: imperior
*/

/* ── De opmaak hieronder komt uit index.html van /v7/. Wijzig hem hier, niet
      daar: de statische versie is vanaf nu een archiefkopie. ───────────── */

:root{
  --ink:        #070707;
  --ink-2:      #101011;
  --line:       rgba(244,239,229,.09);
  --line-2:     rgba(244,239,229,.17);
  --paper:      #F4EFE5;
  --paper-dim:  #AAA49A;
  --paper-faint:#8F8A82;

  --copper:      #C08A5C;
  --copper-lift: #DBA173;
  --copper-deep: #7B4B29;

  --f-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-serif:   'Cormorant Garamond', Georgia, serif;

  --pad: clamp(20px, 5vw, 72px);
  --sec: clamp(88px, 13vh, 168px);
  --ease: cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}

html{
  -webkit-text-size-adjust:100%;

  overflow-x:clip;
}
@supports not (overflow-x: clip){ html{overflow-x:hidden} }

body{
  background:var(--ink);color:var(--paper);font-family:var(--f-display);
  font-weight:300;font-size:clamp(15px,1.03vw,17px);line-height:1.62;
  letter-spacing:.004em;-webkit-font-smoothing:antialiased;
}
body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:1320px;margin:0 auto;padding-inline:var(--pad)}

h1,h2,h3{font-weight:400;letter-spacing:-.028em;line-height:1.02}
.h-xl{font-size:clamp(2.3rem,5.3vw,4.3rem)}
.h-lg{font-size:clamp(2rem,4.6vw,3.9rem);line-height:1.05}
.h-md{font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1.12;letter-spacing:-.022em}
em.s{font-family:var(--f-serif);font-style:italic;letter-spacing:-.005em;font-size:1.12em}
.lead{font-size:clamp(1.05rem,1.42vw,1.28rem);line-height:1.55;color:var(--paper-dim);max-width:56ch}
.eyebrow{
  font-size:.685rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--copper);font-weight:500;display:flex;align-items:center;gap:.85em;
}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--copper);opacity:.6;flex:none}

#hdr{
  position:fixed;top:0;left:0;right:0;z-index:100;border-bottom:1px solid transparent;
  transition:background .5s ease, backdrop-filter .5s ease, border-color .5s ease;
}
#hdr.solid{background:rgba(7,7,7,.92);border-bottom-color:var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;height:74px}
.mark{display:flex;align-items:center;gap:.72em;text-decoration:none;white-space:nowrap}
.mark img{height:24px;width:auto;display:block}
.mark span{font-size:.92rem;letter-spacing:.34em;text-transform:uppercase;font-weight:500;color:var(--paper)}
.lockup{display:block}
.lockup img{height:clamp(48px,6vw,64px);width:auto;display:block;opacity:.92}
.wa-ico{width:19px;height:19px;flex:none;border-radius:50%;display:block}
.wa-float .wa-ico{width:22px;height:22px}
.bar-r{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}
.lang{display:flex;align-items:center;gap:.5em;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase}
.lang a,.lang button{background:none;border:0;color:var(--paper-faint);cursor:pointer;padding:4px 2px;font:inherit;letter-spacing:inherit;text-decoration:none;transition:color .25s}
.lang a[aria-current="true"],.lang button[aria-pressed="true"]{color:var(--paper)}
.lang a:hover,.lang button:hover{color:var(--copper-lift)}
.lang i{width:1px;height:11px;background:var(--line-2);display:block}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  padding:1.02em 1.85em;border-radius:2px;text-decoration:none;cursor:pointer;
  border:1px solid transparent;transition:all .34s var(--ease);white-space:nowrap;
}
.btn-copper{background:var(--copper);color:var(--ink);border-color:var(--copper)}
.btn-copper:hover{background:var(--copper-lift);border-color:var(--copper-lift);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-2);color:var(--paper);background:rgba(7,7,7,.45)}
.cookie-banner{
  position:fixed;z-index:240;left:var(--pad);right:var(--pad);bottom:clamp(16px,3vw,32px);
  max-width:1120px;margin-inline:auto;background:rgba(16,16,17,.97);border:1px solid var(--line-2);
  box-shadow:0 24px 80px rgba(0,0,0,.48);backdrop-filter:blur(18px);
  padding:clamp(20px,3vw,30px);display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,4vw,48px);align-items:center;
}
.cookie-banner[hidden]{display:none}
.cookie-copy h2{font-size:clamp(1.12rem,2vw,1.45rem);letter-spacing:-.02em;margin-bottom:.35em}
.cookie-copy p{color:var(--paper-dim);font-size:.88rem;line-height:1.55;max-width:68ch}
.cookie-copy a{color:var(--paper);text-underline-offset:.2em;text-decoration-color:var(--copper)}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.cookie-actions .btn{padding:.82em 1.3em;font-size:.72rem}
.cookie-settings{font:inherit;border:0;background:none;color:var(--paper-faint);cursor:pointer;padding:0;transition:color .25s}
.cookie-settings:hover{color:var(--copper-lift)}

.btn-wa{background:#0F7A43;border-color:#0F7A43;color:var(--paper)}
.btn-wa:hover{background:#13924F;border-color:#13924F;transform:translateY(-1px)}
.btn-ghost:hover{border-color:var(--paper-dim);background:rgba(244,239,229,.06)}
.btn-sm{padding:.78em 1.35em;font-size:.72rem}
.btn svg{width:15px;height:15px;flex:none}
.btn .wa-ico{margin-block:-2px}

.nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px);margin-left:auto;margin-right:clamp(16px,2.4vw,30px)}
.nav > a,
.nav-groep__kop{
  font-size:.78rem;letter-spacing:.05em;color:var(--paper-dim);text-decoration:none;
  white-space:nowrap;transition:color .25s;position:relative;padding-block:6px;
}
.nav > a:hover,
.nav-groep__kop:hover{color:var(--paper)}
.nav > a::after,
.nav-groep__kop::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--copper);transition:right .35s var(--ease)}
.nav > a:hover::after,
.nav-groep:hover .nav-groep__kop::after{right:0}
.nav .nav-cta{display:none}
.nav .nav-cta::after{display:none}

/* ── een menu-item met kinderen ──────────────────────────────────────────
   Geen JavaScript: uitklappen gaat op :hover en :focus-within, zodat het
   ook met het toetsenbord werkt en blijft werken als een script faalt.
   De ouder blijft een gewone link — "Werken bij Imperior" gaat dus nog
   steeds naar de vacaturepagina, ook als er een submenu onder hangt. */

.nav-groep{position:relative;display:flex;align-items:center}
.nav-groep__kop{display:inline-flex;align-items:center;gap:.5em}

.nav-pijl{
  width:6px;height:6px;flex:none;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease);opacity:.7;
}
.nav-groep:hover .nav-pijl,
.nav-groep:focus-within .nav-pijl{transform:translateY(0) rotate(225deg);opacity:1}

/* De muis moet van de link naar het paneel kunnen zonder door een gat te
   gaan; deze onzichtbare strook overbrugt dat. */
.nav-groep::after{content:'';position:absolute;top:100%;left:0;right:0;height:20px}

.nav-sub{
  position:absolute;top:calc(100% + 18px);left:-14px;z-index:10;
  min-width:232px;margin:0;padding:6px;list-style:none;
  background:rgba(7,7,7,.97);border:1px solid var(--line-2);
  box-shadow:0 20px 60px rgba(0,0,0,.5);backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.nav-groep:hover .nav-sub,
.nav-groep:focus-within .nav-sub{opacity:1;visibility:visible;transform:none}

.nav-sub a{
  display:block;padding:.72em .9em;font-size:.76rem;letter-spacing:.04em;
  color:var(--paper-dim);text-decoration:none;transition:color .25s,background .25s;
}
.nav-sub a:hover,
.nav-sub a:focus-visible{color:var(--paper);background:rgba(244,239,229,.06)}

.burger{
  display:none;width:34px;height:34px;background:none;border:0;cursor:pointer;
  flex-direction:column;justify-content:center;gap:6px;padding:0;
}
.burger i{display:block;width:22px;height:1px;background:var(--paper);transition:transform .35s var(--ease),opacity .25s}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.5px) rotate(-45deg)}

@media (max-width:1100px){
  .nav{
    position:fixed;inset:0;top:0;background:rgba(7,7,7,.97);
    flex-direction:column;justify-content:center;align-items:flex-start;
    gap:.4em;padding:0 var(--pad);margin:0;
    opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
  }
  .nav.open{opacity:1;pointer-events:auto}
  .nav > a,
  .nav-groep__kop{font-size:clamp(1.5rem,5vw,2.2rem);letter-spacing:-.02em;color:var(--paper);padding-block:.32em}
  .nav > a::after,
  .nav-groep__kop::after{display:none}
  .nav .nav-cta{display:inline-flex;margin-top:1.2em;font-size:.8rem;letter-spacing:.1em}
  .burger{display:flex}
  .bar-cta{display:none}

  /* In het schermvullende menu is er ruimte zat: geen uitklap, maar de
     kinderen staan gewoon ingesprongen onder hun ouder. Scheelt een
     tikdoel dat je eerst moet vinden. */
  .nav-groep{flex-direction:column;align-items:flex-start;position:static;width:100%}
  .nav-groep::after{display:none}
  .nav-pijl{display:none}
  .nav-sub{
    position:static;opacity:1;visibility:visible;transform:none;
    background:none;border:0;box-shadow:none;backdrop-filter:none;
    min-width:0;padding:.1em 0 .5em 1.1em;border-left:1px solid var(--line-2);
    margin-left:2px;
  }
  .nav-sub a{font-size:clamp(.95rem,3.4vw,1.25rem);padding:.42em 0;color:var(--paper-dim)}
  .nav-sub a:hover,
  .nav-sub a:focus-visible{background:none;color:var(--paper)}
}
@media (max-width:720px){
  .bar-r .btn{display:none}
}

.film{position:relative}

/* De hero is een gewone sectie met de film als achtergrond. Hij loopt door,
   maar scrollen doet er niets mee: geen sticky, geen playbackRate, geen
   tekstmomenten. Alles eronder is een normale pagina. */
.film-stage{
  position:relative;overflow:hidden;background:var(--ink);
  padding-block:calc(74px + var(--sec)) var(--sec);
}
.film-poster{
  position:absolute;inset:0;
  background-image:
    var(--poster-img, none),
    radial-gradient(60% 55% at 52% 46%, rgba(192,138,92,.18), transparent 62%),
    linear-gradient(155deg,#151516 0%,#0D0D0E 58%,#070707 100%);
  background-size:cover,auto,auto;
  background-position:center,0 0,0 0;
  background-repeat:no-repeat;
}
#filmVideo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);transform-origin:center;
}
.film-veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(62% 62% at 50% 48%, rgba(7,7,7,.20), rgba(7,7,7,.78) 100%),
    linear-gradient(to bottom, rgba(7,7,7,.88) 0%, rgba(7,7,7,.42) 26%, rgba(7,7,7,.46) 68%, rgba(7,7,7,.95) 100%);
}
.film-stage > .stage-hero,
.film-stage > .facts{position:relative;z-index:2}
.vid-toggle{
  position:absolute;right:var(--pad);top:calc(74px + 18px);z-index:6;
  width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);
  background:rgba(7,7,7,.7);color:var(--paper-dim);
  cursor:pointer;display:none;align-items:center;justify-content:center;transition:all .3s;
}
.vid-toggle:hover{color:var(--paper);border-color:var(--paper-faint)}
.vid-toggle svg{width:11px;height:11px}

.stage-dna{max-width:1320px;margin-inline:auto}
.stage-hero{max-width:1320px;margin-inline:auto;padding-inline:var(--pad)}


.stage-hero h1{margin:.55em 0 .62em;max-width:24ch}
.stage-hero h1 .g{color:var(--copper)}
.stage-hero .lead{max-width:44ch;color:var(--paper-dim)}
.stage-hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.1em}

.stage-dna .eyebrow{font-size:.78rem;margin-bottom:clamp(18px,2.2vw,30px)}
.stage-dna .eyebrow::before{width:22px}
.dna-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.dna-grid article{padding:clamp(20px,2.2vw,32px) clamp(18px,2vw,30px);border-top:1px solid var(--line)}
.dna-grid article:nth-child(-n+3){border-top:0}
.dna-grid article:not(:nth-child(3n+1)){border-left:1px solid var(--line)}
.dna-grid h3{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--copper);font-weight:500;margin-bottom:1.1em}
.dna-grid p{font-size:clamp(.95rem,1.1vw,1.05rem);line-height:1.5;color:var(--paper)}
.dna-close{margin-top:clamp(26px,3vw,44px);padding-top:clamp(20px,2.4vw,32px);border-top:1px solid var(--line);text-align:center}
.dna-close p{font-size:clamp(1.15rem,1.9vw,1.65rem);line-height:1.3;letter-spacing:-.02em;color:var(--paper)}
.facts{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  max-width:1320px;margin:clamp(46px,6vh,86px) auto 0;
  background:var(--line);border-block:1px solid var(--line);
}
.facts div{background:rgba(7,7,7,.62);padding:1.15em 1.1em .95em}
.facts b{display:block;font-size:clamp(1.3rem,2.3vw,1.9rem);font-weight:400;letter-spacing:-.03em;line-height:1;color:var(--copper)}
.facts small{display:block;margin-top:.7em;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-faint)}



section{position:relative}
.sec{padding-block:var(--sec)}
.rule{height:1px;background:var(--line)}

.story{display:grid;gap:1.25em;max-width:62ch}
.story .lead{max-width:none}
.story-k{
  margin-top:1.1em;padding-top:1.7em;border-top:1px solid var(--line);
  font-size:clamp(1.15rem,1.85vw,1.6rem);line-height:1.34;letter-spacing:-.02em;
  color:var(--paper);max-width:38ch;
}

.fit{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,6vw,90px);align-items:start}
.fit-list{display:grid;gap:1.15em}
.fit-list p{display:flex;gap:1.1em;align-items:baseline;font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.44}
.fit-list p::before{content:'';width:14px;height:1px;background:var(--copper);flex:none;transform:translateY(-5px)}
.fit-note{margin-top:2.4em;padding-top:1.6em;border-top:1px solid var(--line);color:var(--paper-faint);font-size:.94rem;max-width:44ch}

.flags{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(34px,6vw,90px);align-items:start}
.flag-list{display:grid;gap:0;border-top:1px solid var(--line)}
.flag-list div{display:flex;gap:1.4em;align-items:baseline;padding:1.35em 0;border-bottom:1px solid var(--line)}
.flag-list b{font-family:var(--f-serif);font-size:1.35rem;color:var(--copper);font-weight:400;line-height:1;flex:none;min-width:1.4em}
.flag-list p{font-size:clamp(1rem,1.3vw,1.14rem);line-height:1.44}
.flag-note{margin-top:2.2em;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.4;letter-spacing:-.014em;max-width:40ch}
.flag-cta{margin-top:2em;display:flex;flex-wrap:wrap;gap:12px}

.faq{border-top:1px solid var(--line);margin-top:clamp(34px,5vw,60px)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.5em 0;display:flex;align-items:baseline;
  gap:1.2em;font-size:clamp(1.05rem,1.45vw,1.28rem);letter-spacing:-.016em;
  transition:color .3s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';margin-left:auto;color:var(--copper);font-weight:300;font-size:1.3em;line-height:1;transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--copper-lift)}
.faq .a{padding:0 0 1.9em;color:var(--paper-dim);max-width:62ch;font-size:1.02rem;line-height:1.6}
@media (max-width:900px){
  .flags{grid-template-columns:1fr;gap:30px}
}

.two{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.two > div{background:var(--ink);padding:clamp(30px,3.6vw,52px) clamp(24px,3vw,44px)}
.two h3{font-size:clamp(1.3rem,2vw,1.75rem);margin:1em 0 .6em;letter-spacing:-.024em}
.two .two-p{color:var(--paper-dim);margin-bottom:2em;max-width:44ch;font-size:.98rem;line-height:1.58}
.two-cta{display:flex;flex-wrap:wrap;gap:12px}
.two .mail{color:var(--paper-dim);font-size:.98rem;line-height:1.58}
.two .mail a{color:var(--copper);text-decoration:none;border-bottom:1px solid var(--copper-deep);transition:border-color .3s var(--ease)}
.two .mail a:hover{border-color:var(--copper)}
.legal a{color:var(--paper-dim);text-decoration:none;border-bottom:1px solid var(--line-2)}
.legal a:hover{color:var(--copper);border-color:var(--copper-deep)}
@media (max-width:900px){.two{grid-template-columns:1fr}}
#agencies{scroll-margin-top:74px}

/* ══════════════ VACATURES ══════════════
   Drie functies naast elkaar, in dezelfde opmaak als het blok .two op de
   homepage: vlakken op de donkere grond met een lijn van 1px ertussen.

   Elk vlak deelt zijn vier rijen (titel, intro, lijst, knop) met de andere
   twee via subgrid. Zo staan de knoppen op één hoogte, ook als de ene
   introductie langer is dan de andere en alleen manager en marketeer een
   noot onder de knop hebben. Een browser zonder subgrid stapelt gewoon. */

.vac-kop .h-lg{margin:.5em 0 .45em}
.vac-sec{padding-bottom:var(--sec)}

.vac-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border-block:1px solid var(--line);
}
.vac{
  background:var(--ink);padding:clamp(30px,3.6vw,52px) clamp(24px,3vw,44px);
  display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-content:start;
}
.vac h2{font-size:clamp(1.3rem,2vw,1.75rem);letter-spacing:-.024em;margin-bottom:.6em}
.vac-intro{color:var(--paper-dim);font-size:.98rem;line-height:1.58;max-width:44ch}
.vac-punten{list-style:none;margin:1.8em 0 2.2em;padding:0;display:grid;gap:.85em;align-content:start}
.vac-punten li{display:flex;gap:1em;align-items:baseline;font-size:.98rem;line-height:1.44}
.vac-punten li::before{content:'';width:14px;height:1px;background:var(--copper);flex:none;transform:translateY(-4px)}
.vac-noot{margin-top:1.4em;color:var(--paper-faint);font-size:.88rem;line-height:1.55}

/* Het adres is gewone tekst, zodat iemand zonder mailprogramma het kan
   overnemen. user-select:all: één tik of klik selecteert het hele adres. */
.vac-adres{color:var(--paper);user-select:all;-webkit-user-select:all;overflow-wrap:anywhere}
.vac-kopieer{
  margin-top:.9em;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--copper);border-bottom:1px solid var(--copper-deep);transition:color .25s,border-color .25s;
}
.vac-kopieer:hover{color:var(--copper-lift);border-color:var(--copper)}
.vac-kopieer[hidden]{display:none}

@media (max-width:900px){
  .vac-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .vac-cta .btn{width:100%;white-space:normal;text-align:center}
}

.contact{padding-block:clamp(100px,15vh,190px);text-align:center}
.contact h2{margin:.5em auto .55em;max-width:15ch}
.contact .eyebrow{justify-content:center}
.contact .lead{margin:0 auto;text-align:center;max-width:44ch}
.contact-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:2.9em}
.contact-note{margin-top:2.3em;font-size:.84rem;color:var(--paper-faint)}

body > footer{border-top:1px solid var(--line);padding-block:clamp(40px,5vw,64px) clamp(30px,4vw,44px)}
.foot{display:flex;justify-content:space-between;align-items:flex-end;gap:34px;flex-wrap:wrap}
.foot-links{display:flex;gap:1.6em;flex-wrap:wrap;font-size:.82rem}
.foot-links a{color:var(--paper-faint);text-decoration:none;transition:color .25s}
.foot-links a:hover{color:var(--copper-lift)}
.legal{margin-top:2.6em;font-size:.75rem;color:rgba(244,239,229,.22);line-height:1.8}

.wa-float{
  position:fixed;right:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);z-index:90;
  display:flex;align-items:center;gap:.7em;padding:.85em 1.25em;border-radius:100px;
  background:#0F7A43;border:1px solid #0F7A43;
  color:var(--paper);text-decoration:none;font-size:.78rem;letter-spacing:.06em;font-weight:500;
  opacity:0;transform:translateY(14px);pointer-events:none;transition:all .5s var(--ease);
}
.wa-float.on{opacity:1;transform:none;pointer-events:auto}
.wa-float:hover{background:#13924F;border-color:#13924F;color:var(--paper)}

@media (prefers-reduced-motion: no-preference){
  html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
  html.js .rv.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
  .btn:hover{transform:none}
}

@media (max-width:1040px){
  .fit{grid-template-columns:1fr;gap:34px}
}
@media (max-width:900px){
  .stage-hero h1{font-size:clamp(2rem,8.4vw,2.7rem);margin:.5em 0 .55em}
  .stage-hero .lead{font-size:1rem}
  .stage-hero .cta{margin-top:1.6em;gap:10px}
  .facts div{padding:.85em .9em .75em}
  .facts b{font-size:1.25rem}
  .facts small{margin-top:.5em;font-size:.6rem}
  .dna-grid{grid-template-columns:1fr}
  .dna-grid article{padding:clamp(.3em,1.05vh,.66em) 0;border-left:0 !important}
  .dna-grid article:nth-child(-n+3){border-top:1px solid var(--line)}
  .dna-grid article:first-child{border-top:0}
  /* Het raster ligt over de video en kan niet meescrollen: wat niet in het
     scherm past, valt weg. Vaste maten passen dus niet op elke telefoon —
     op een 812px-scherm liep het blok 3px over, op een iPhone SE ruim 80.
     Daarom schaalt de tekst met de schermhoogte in plaats van met een
     breekpunt: op een lange telefoon groter dan de rest van de site, op een
     korte automatisch een maat terug. */
  .dna-grid h3{font-size:clamp(.62rem,1.48vh,.8rem);margin-bottom:.42em}
  /* Op mobiel stond de knop midden over de film. Weg met display:none zou
     hem ook uit de toegankelijkheidsboom halen, en dan is er daar geen enkele
     manier meer om het beeld te stoppen (WCAG 2.2.2). Daarom onzichtbaar in
     plaats van afwezig: 1x1px en weggeknipt, maar wel aan te spreken door een
     schermlezer, en zichtbaar zodra hij focus krijgt. */
  .vid-toggle{
    width:1px;height:1px;padding:0;border:0;background:none;
    clip-path:inset(50%);overflow:hidden;top:calc(64px + 8px);
  }
  .vid-toggle:focus-visible{
    width:32px;height:32px;clip-path:none;
    border:1px solid var(--paper-dim);background:rgba(7,7,7,.9);
  }
  .stage-dna .eyebrow{margin-bottom:clamp(9px,1.6vh,22px)}
  .dna-grid p{font-size:clamp(.8rem,1.95vh,1.02rem);line-height:1.42}
  .dna-close{margin-top:clamp(.45em,1.4vh,.95em);padding-top:clamp(.45em,1.4vh,.95em)}
  .dna-close p{font-size:clamp(.92rem,2.3vh,1.22rem)}
}

@media (max-width:720px){
  .bar{height:64px}
  .stage-hero .cta .btn{flex:1 1 100%}
  .wa-float .lbl{display:none}
  .wa-float{padding:.95em;border-radius:50%}
  .cookie-banner{grid-template-columns:1fr;left:14px;right:14px;bottom:14px}
  .cookie-actions{justify-content:stretch}.cookie-actions .btn{flex:1 1 130px}
}

/* ══════════════ BLOG ══════════════
   Zelfde opmaaktaal als de homepage: donkere grond, koperen kopjes, dunne
   randen in plaats van kaders met schaduw. De kaarten gebruiken dezelfde
   rasterlogica als .dna-grid, zodat het een geheel blijft. */

.blog-kop{padding-block:calc(74px + var(--sec)) 0}
.blog-kop .lead{margin-top:1.1em}

.blog-lijst{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:1px;
  background:var(--line);border-block:1px solid var(--line);
  margin-top:var(--sec);
}
.blog-kaart{
  background:var(--ink);padding:clamp(26px,3vw,42px) clamp(22px,2.6vw,36px);
  display:flex;flex-direction:column;gap:.9em;
  transition:background .5s var(--ease);
}
.blog-kaart:hover{background:var(--ink-2)}
.blog-kaart a{text-decoration:none;color:inherit}

.blog-meta{
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--paper-faint);display:flex;gap:.9em;align-items:center;
}
.blog-meta i{width:14px;height:1px;background:var(--line-2);display:block;flex:none}

.blog-kaart h2{
  font-size:clamp(1.25rem,1.9vw,1.7rem);line-height:1.14;letter-spacing:-.024em;
}
.blog-kaart:hover h2{color:var(--copper-lift)}
.blog-kaart p{color:var(--paper-dim);font-size:.98rem;line-height:1.58;max-width:52ch}

.blog-beeld{
  display:block;margin:0 0 .3em;aspect-ratio:16/9;overflow:hidden;
  background:var(--ink-2);
}
.blog-beeld img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.blog-kaart:hover .blog-beeld img{transform:scale(1.03)}

.blog-verder{
  margin-top:auto;padding-top:.6em;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--copper);
}

/* paginering */
.blog-nav{display:flex;gap:12px;justify-content:center;margin-top:var(--sec)}
.blog-nav .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;
  padding:.7em .9em;border:1px solid var(--line-2);color:var(--paper-dim);
  text-decoration:none;font-size:.78rem;transition:all .3s var(--ease);
}
.blog-nav .page-numbers:hover{border-color:var(--paper-dim);color:var(--paper)}
.blog-nav .page-numbers.current{background:var(--copper);border-color:var(--copper);color:var(--ink)}

/* ── het artikel ── */
.artikel{padding-block:calc(74px + var(--sec)) var(--sec);--lees:50rem}
.artikel-kop{max-width:var(--lees);margin-inline:auto}
.artikel-kop h1{font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.06;margin:.5em 0 .5em}
.artikel-kop .lead{max-width:none}

.artikel-beeld{max-width:var(--lees);margin:clamp(34px,5vh,66px) auto 0;aspect-ratio:1200/630;overflow:hidden;background:var(--ink-2)}
.artikel-beeld img{width:100%;height:100%;object-fit:cover;display:block}

.prose{max-width:var(--lees);margin:clamp(34px,5vh,66px) auto 0;font-size:1.06rem;line-height:1.72;color:var(--paper-dim)}
.prose > * + *{margin-top:1.15em}
.prose h2{font-size:clamp(1.4rem,2.4vw,2rem);color:var(--paper);margin-top:2em;letter-spacing:-.022em}
.prose h3{font-size:clamp(1.1rem,1.6vw,1.35rem);color:var(--paper);margin-top:1.8em}
.prose strong{color:var(--paper);font-weight:500}
.prose a{color:var(--copper);text-decoration:none;border-bottom:1px solid var(--copper-deep)}
.prose a:hover{border-color:var(--copper)}
.prose blockquote{
  border-left:1px solid var(--copper);padding-left:1.4em;margin-left:0;
  font-family:var(--f-serif);font-style:italic;font-size:1.25em;
  line-height:1.4;color:var(--paper);
}
.prose ul,.prose ol{padding-left:1.3em}
.prose li + li{margin-top:.5em}
.prose .lead{max-width:none}   /* anders springt de eerste alinea in */
.prose figure{margin-block:clamp(30px,4vh,52px)}
.prose figure img{display:block;width:100%;height:auto}
.prose img,.prose video,.prose iframe{max-width:100%;height:auto}
.prose figcaption{font-size:.82rem;color:var(--paper-faint);margin-top:.7em;line-height:1.5}
.prose code{font-family:ui-monospace,Menlo,monospace;font-size:.9em;color:var(--paper)}

.artikel-voet{
  max-width:var(--lees);margin:var(--sec) auto 0;padding-top:1.6em;
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:16px;
  align-items:center;justify-content:space-between;
}

/* ── leeg of niet gevonden ── */
.leeg{padding-block:calc(74px + var(--sec)) var(--sec);text-align:center}
.leeg h1{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:.4em}
.leeg .lead{margin-inline:auto}
.leeg .btn{margin-top:2em}

@media (max-width:900px){
  .blog-lijst{grid-template-columns:1fr}
  .prose{font-size:1rem}
}

/* ══════════════ EEN AFSTAND VOOR ALLE BINNENPAGINA'S ══════════════
   De balk staat vast bovenaan, dus elke pagina die niet de homepage is moet
   daaronder beginnen. Eerder had elke template zijn eigen waarde; nu een. */

.artikel,
.blog-kop,
.vac-kop,
.leeg,
.policy-pagina .hero{padding-block:calc(74px + var(--sec)) var(--sec)}

.blog-kop{padding-bottom:var(--sec)}
.vac-kop{padding-bottom:clamp(34px,5vh,66px)}
.blog-lijst{margin-top:clamp(34px,5vh,66px)}
.blog-nav{margin-top:clamp(34px,5vh,66px)}

/* ══════════════ PRIVACYBELEID ══════════════
   De inhoud brengt zijn eigen opbouw mee: een inhoudsopgave in de zijkolom
   naast de tekst. Die CSS stond in privacy.html en is bij het overzetten naar
   WordPress niet meegekomen, waardoor het raster in elkaar zakte.

   De variabelen heten hier anders dan in privacy.html: --paper-dim en
   --paper-faint in plaats van --dim en --faint. */

.policy-pagina .hero{
  border-bottom:1px solid var(--line);position:relative;overflow:hidden;
}
.policy-pagina .hero::before{
  content:'';position:absolute;width:min(70vw,780px);aspect-ratio:1;
  right:-20%;top:-65%;border-radius:50%;
  background:radial-gradient(circle,rgba(192,138,92,.12),transparent 68%);
  pointer-events:none;
}
.policy-pagina .hero h1{margin:.45em 0 0}
.policy-pagina .hero h1 em{font-family:var(--f-serif);font-style:italic;letter-spacing:-.005em;font-size:1.12em;color:var(--copper)}
.policy-pagina .intro{
  margin-top:clamp(26px,4vw,46px);max-width:62ch;color:var(--paper-dim);
  font-size:clamp(1.03rem,1.4vw,1.25rem);
}
.policy-pagina .updated{
  margin-top:18px;color:var(--paper-faint);font-size:.76rem;
  letter-spacing:.08em;text-transform:uppercase;
}
.policy-pagina .policy{padding-block:var(--sec)}
.policy-pagina .policy-grid{
  display:grid;grid-template-columns:minmax(180px,280px) minmax(0,1fr);
  gap:clamp(48px,9vw,130px);align-items:start;
}
.policy-pagina .toc{
  position:sticky;top:110px;border-left:1px solid var(--line);padding-left:22px;
}
.policy-pagina .toc strong{
  display:block;color:var(--copper);font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:14px;
}
.policy-pagina .toc a{
  display:block;color:var(--paper-faint);text-decoration:none;font-size:.82rem;
  padding:.38em 0;transition:color .25s;
}
.policy-pagina .toc a:hover,
.policy-pagina .toc a:focus-visible{color:var(--paper)}

.policy-pagina .content section{
  scroll-margin-top:100px;
  padding-bottom:clamp(42px,6vw,70px);margin-bottom:clamp(42px,6vw,70px);
  border-bottom:1px solid var(--line);
}
.policy-pagina .content section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.policy-pagina .content h2{
  font-size:clamp(1.55rem,3.2vw,2.55rem);font-weight:400;line-height:1.12;
  letter-spacing:-.025em;margin-bottom:.8em;
}
.policy-pagina .content h3{font-size:1.02rem;font-weight:500;margin:1.8em 0 .45em}
.policy-pagina .content p,
.policy-pagina .content li{color:var(--paper-dim);max-width:68ch}
.policy-pagina .content p+p{margin-top:1em}
.policy-pagina .content ul{padding-left:1.2em}
.policy-pagina .content li+li{margin-top:.55em}
.policy-pagina .content a{
  color:var(--paper);text-decoration-color:var(--copper);text-underline-offset:.2em;
}
.policy-pagina .note{
  border:1px solid rgba(192,138,92,.3);background:rgba(192,138,92,.06);
  padding:clamp(18px,3vw,28px);margin-top:1.5em;
}

@media (max-width:760px){
  .policy-pagina .policy-grid{grid-template-columns:1fr}
  .policy-pagina .toc{display:none}
}