/*
Theme Name: Ruben Meijer Recruitment & Coaching
Theme URI: https://rmc.thegreensurfer.com
Author: The Green Surfer
Description: Maatwerkthema voor Ruben Meijer Recruitment & Coaching. Alle teksten zijn aanpasbaar in de backend en via "Snel bewerken" op de site zelf.
Version: 4.39.0
Requires at least: 6.0
Requires PHP: 8.0
Text Domain: rmc
*/

/* ============================================================
   RUBEN MEIJER CONSULTANCY — monochroom: inkt #292929, papier #f3f4f0, wit
   ============================================================ */

:root{
  /* De drie merkkleuren, neutraal. Het oranje accent is de enige warme kleur;
     warme grijzen ernaast lezen als bruin en dat was niet de bedoeling. */
  --wit:#ffffff;
  --papier:#f2f2f0;
  --zand:#e2e2e0;   /* derde tint: geeft de secties onderscheid (papier vs wit was 1,12:1) */
  --inkt:#292929;

  
  /* Oranje in drie rollen, alle drie op tint 23°. Eén waarde volstaat niet: het
     merkoranje #eb7327 haalt op een lichte ondergrond maar 2,7:1, en donkerder
     oranje ziet er op een donkere ondergrond uit als koper. Vandaar:
       --koper-vlak  gevulde vlakken (knoppen, pillen) — de merkkleur zelf
       --koper       tekst en iconen op de donkere banden
       --koper-tekst tekst en links op de lichte secties                        */
  --koper-vlak:#eb7327; /* als vlak, met inkt erop: 4,9:1 */
  --koper:#ee8542;      /* tekst op donker: 5,6:1 op inkt, 4,5:1 op het lichtste paneel */
  /* De merkkleur zelf, als referentie. Niet gebruiken voor tekst of randen op een
     lichte ondergrond: daar haalt hij 2,7:1 en dat is onder de norm. De rgba's
     hieronder (--lijn-sterk, --accent-zacht, --rook) zijn hiervan afgeleid. */
  --koper-merk:#eb7327;
  /* Op verzoek de merkkleur ook als tekst op de lichte secties. Let op: dit is
     2,7:1 op papier en 2,3:1 op zand, tegen een norm van 4,5:1. Bewuste keuze
     van de opdrachtgever; #a4490f was de leesbare variant (5,3:1). */
  --koper-tekst:#eb7327;

  /* rollen op een lichte ondergrond */
  --bg:var(--papier);
  --bg-2:var(--wit);
  --bg-3:var(--wit);
  --bg-4:#e8e8e6;
  --ink:var(--inkt);
  --accent:var(--koper-tekst);
  --muted:rgba(41,41,41,.68); /* .67 haalde 4,43:1 op het neutrale zand; .68 haalt 4,56:1 */
  /* --zacht haalt bewust geen 4,5:1 en is dus alleen voor plekhouders,
     scheidingstekens en invulhulp, nooit voor lopende tekst. */
  --zacht:rgba(41,41,41,.46);
  --lijn:rgba(41,41,41,.14);
  --lijn-sterk:rgba(235,115,39,.42);
  --accent-zacht:rgba(235,115,39,.10);
  --accent-hover:#a4490f; /* hover wordt donkerder: 5,3:1, dus dan wél leesbaar */
  --op-accent:var(--papier);
  --knop:var(--inkt);
  --knop-hover:#1a1a1a;
  --op-knop:var(--papier);

  /* "Rook": gestapelde radiale verlopen die het gevlekte studiodoek uit de hero
     nabootsen. Onregelmatig geplaatst, want een symmetrisch verloop verraadt zich. */
  --rook:
    radial-gradient(62% 78% at 16% 8%, rgba(235,115,39,.15), transparent 62%),
    radial-gradient(52% 66% at 84% 26%, rgba(235,115,39,.10), transparent 64%),
    radial-gradient(48% 58% at 92% 84%, rgba(242,242,240,.055), transparent 62%),
    radial-gradient(74% 62% at 48% 104%, rgba(0,0,0,.40), transparent 66%),
    radial-gradient(38% 44% at 30% 72%, rgba(0,0,0,.22), transparent 68%);
  --rook-voet:
    radial-gradient(78% 58% at 34% -6%, rgba(0,0,0,.34), transparent 62%),
    radial-gradient(56% 66% at 80% 96%, rgba(235,115,39,.10), transparent 64%),
    radial-gradient(40% 50% at 12% 84%, rgba(242,242,240,.035), transparent 62%);
  --rook-licht:
    radial-gradient(58% 70% at 10% 6%, rgba(235,115,39,.055), transparent 64%),
    radial-gradient(46% 58% at 90% 90%, rgba(235,115,39,.045), transparent 62%),
    radial-gradient(60% 50% at 52% 50%, rgba(41,41,41,.028), transparent 70%);

  --schaduw:0 16px 40px -28px rgba(41,41,41,.4);
  --schaduw-lg:0 30px 60px -34px rgba(41,41,41,.45);
  --radius:14px; --maxw:1200px;

  /* fluïde type- en ruimteschaal */
  /* Onder body-formaat: vier stappen in plaats van negentien losse waarden.
     Alles wat kleiner is dan de lopende tekst hoort op een van deze vier. */
  --fs-klein:clamp(.9rem,.87rem + .13vw,.99rem); /* secundaire tekst, navigatie, footerlinks — schaalt mee met body */
  --fs-label:.8rem;    /* labels, kruimelpad, kleine letters */
  --fs-mini:.7rem;     /* tags en micro-labels in kapitalen   */

  --fs-eyebrow:var(--fs-label);   /* was een eigen clamp op 0,13px van --fs-label */
  --fs-body:clamp(1rem,.96rem + .18vw,1.09rem);
  --fs-btn:var(--fs-klein);       /* was een eigen clamp op 0,67px van --fs-klein */
  --fs-lead:clamp(1.14rem,.99rem + .36vw,1.26rem); /* ondergrens omhoog: liep op mobiel tot 1px van --fs-body */
  --fs-h4:var(--fs-lead);         /* had vrijwel hetzelfde bereik als --fs-lead */
  --fs-h3:clamp(1.2rem,1rem + .85vw,1.7rem);
  --fs-h2:clamp(1.65rem,1.25rem + 2vw,2.9rem);
  --fs-h1:clamp(1.9rem,1.3rem + 2.8vw,3.5rem);
  --fs-hero:clamp(2.2rem,1.4rem + 4vw,4.6rem);
  --fs-tagline:clamp(1.05rem,.97rem + .45vw,1.3rem);

  /* Twee ontbrekende stappen die eerder als eigen clamp() waren ingetypt */
  --fs-h2s:clamp(1.45rem,1.15rem + 1.5vw,2.3rem);  /* tussen h3 en h2 */
  --fs-cijfer:clamp(1.5rem,1.1rem + 1.3vw,2.3rem); /* genummerde rijen */
  --fs-cijfer-xl:clamp(3.6rem,2.4rem + 3.4vw,5.6rem); /* stapcijfers */
  /* Optische uitlijning: een tekstkolom die met een bovenregel (.eyebrow) begint,
     heeft de bovenkant van zijn letters 12,6px onder de kolomrand liggen. Dat is
     de halve regelafstand plus het verschil tussen regelvak en kapitaalhoogte.
     Beeld ernaast krijgt dezelfde verschuiving, zodat het op de kop uitlijnt en
     niet op een regelvak dat je niet ziet. */
  --kop-optiek:.79rem;
  --wrap-pad:clamp(20px,4vw,32px); /* zijmarge van .wrap; de slider bloedt hier tot de rand mee */
  --sp-section:clamp(56px,7vw,116px);
  --nav-h:84px;   /* ruimte die de vaste navigatie inneemt */
}

/* Omgekeerde blokken: donker vlak met lichte tekst. De rollen worden hier
   omgedraaid, zodat elk onderdeel binnenin vanzelf meekleurt. */
.nav,.hero,.page-header,.paden-band,.cta-band,.footer{
  --bg:var(--inkt);
  --bg-2:#313131;
  --bg-3:#383838;
  --bg-4:#404040;
  --ink:var(--papier);
  --accent:var(--koper);
  --muted:rgba(242,242,240,.70);
  --zacht:rgba(242,242,240,.48);
  --lijn:rgba(242,242,240,.16);
  --lijn-sterk:rgba(235,118,44,.52);
  --accent-zacht:rgba(235,118,44,.14);
  --accent-hover:#f2a372;
  --op-accent:var(--inkt);
  --knop:var(--koper-vlak);
  --knop-hover:#f2a372;
  --op-knop:var(--inkt);
  background:var(--inkt);
  color:var(--papier);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* html en body staan hier bewust apart.
   Op body maakt overflow-x:hidden er volgens de spec een scrollbox van
   (overflow-y wordt dan auto) en dat breekt elke position:sticky eronder;
   daar snijdt "clip" hetzelfde weg zonder scrollbox. Op html mag clip juist
   NIET: dat propageert naar de viewport, en clip staat geen scrollen toe, dus
   dan scrollt de pagina niet meer. Daar blijft het dus hidden.
   De hidden-regel op body blijft als terugval voor browsers zonder clip. */
html{overflow-x:hidden;max-width:100%}
body{overflow-x:hidden;overflow-x:clip;max-width:100%}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:var(--fs-body);color:var(--ink);background:var(--bg);line-height:1.7;-webkit-font-smoothing:antialiased;font-feature-settings:"kern","liga"}

h1,h2,h3{font-family:'Oswald','Arial Narrow',sans-serif;font-weight:600;line-height:1.06;letter-spacing:.008em;text-transform:uppercase;overflow-wrap:break-word}
h4{font-family:'Inter',sans-serif;font-weight:700;line-height:1.3;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
::selection{background:var(--koper-vlak);color:var(--inkt)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--wrap-pad)}
.section{padding:var(--sp-section) 0;position:relative}
.section h2{font-size:var(--fs-h2);margin-bottom:20px}
.center{text-align:center}
/* afwisselende sectie: iets lichtere ondergrond met randen */
.section--alt{background:var(--zand)}
/* Afspraak: elk blok tekent alléén een bovenlijn, plus een zachte lichtval eronder.
   Zo staan er nooit twee haarlijnen op dezelfde naad. */
.section--alt{border-top:1px solid var(--lijn);border-bottom:0;box-shadow:inset 0 70px 90px -90px var(--lijn)}

/* bovenregel: normale breedte, ruime spatiëring */
.eyebrow{font-family:'Inter',sans-serif;font-weight:600;font-size:var(--fs-eyebrow);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:14px;margin-bottom:18px}
.eyebrow::before{content:"";width:clamp(20px,3vw,34px);height:1px;background:var(--lijn-sterk);flex:none}

.lead{font-size:var(--fs-lead);color:var(--muted);max-width:62ch;line-height:1.65}
.section > .wrap > p:not(.lead):not(.eyebrow){color:var(--muted);max-width:66ch}

/* het uitgelichte woord in een kop */
.mark{color:var(--accent)}

/* streepje onder een kop */
.hero-streep{display:block;width:64px;height:2px;background:var(--koper-vlak);margin:30px 0}

/* ------------------------------------------------------------ knoppen */
.btn{display:inline-flex;align-items:center;gap:.6em;font-family:'Inter',sans-serif;font-weight:600;font-size:var(--fs-btn);letter-spacing:.01em;padding:15px 30px;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:transform .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease}
.btn .pijl{transition:transform .25s ease}
.btn:hover .pijl{transform:translateX(4px)}

.btn-outline{background:transparent;color:var(--ink);border-color:var(--lijn-sterk)}
.btn-outline:hover{background:var(--knop);border-color:var(--knop);color:var(--op-knop);transform:translateY(-2px)}

.btn-primary{background:var(--knop);color:var(--op-knop);border-color:var(--knop)}
.btn-primary:hover{background:var(--knop-hover);border-color:var(--knop-hover);transform:translateY(-2px)}

.btn-ghost{background:transparent;color:var(--ink);border-color:var(--lijn-sterk)}
.btn-ghost:hover{border-color:var(--ink);background:var(--accent-zacht);transform:translateY(-2px)}

.btn-dark{background:var(--bg-4);color:var(--ink);border-color:var(--lijn)}
.btn-dark:hover{background:var(--knop);color:var(--op-knop);border-color:var(--knop);transform:translateY(-2px)}

.btn-link{display:inline-flex;align-items:center;gap:.4em;font-weight:600;color:var(--accent);border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease}
.btn-link:hover{color:var(--accent-hover);border-color:var(--accent-hover)}

/* De rooklaag ligt achter de inhoud van een blok. Alleen decoratief, dus
   pointer-events uit — hij mag klikken en het inline bewerken niet blokkeren. */
.page-header,.paden-band,.cta-band,.contact-band,.footer,.section--alt{position:relative;isolation:isolate}
.page-header::before,.paden-band::before,.cta-band::before,.footer::before,.section--alt::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--rook)}
.footer::before{background:var(--rook-voet)}
.section--alt::before{background:var(--rook-licht)}
.page-header > .wrap,.paden-band > .wrap,.cta-band > .wrap,.contact-band > .wrap,.footer > .wrap,.section--alt > .wrap{position:relative}

/* ------------------------------------------------------------ navigatie */
.nav{background:transparent;position:fixed;top:0;left:0;right:0;z-index:900;transition:background-color .35s ease,box-shadow .35s ease,backdrop-filter .35s ease}
/* De balk krijgt zijn achtergrond en waas via een pseudo-element, niet via
   .nav zelf. backdrop-filter maakt van een element een containing block voor
   position:fixed nakomelingen; het mobiele menupaneel klapte daardoor zodra je
   gescrold had in tot de hoogte van de balk (80px) in plaats van het scherm. */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:transparent;transition:background-color .35s ease}
.nav.scrolled::before{background:rgba(41,41,41,.94);backdrop-filter:blur(12px)}
.nav.scrolled{box-shadow:0 1px 0 var(--lijn)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:20px;padding-bottom:20px}

.logo{display:flex;align-items:center;gap:clamp(9px,1vw,14px)}
.logo-naam{display:flex;flex-direction:column;line-height:1.1}
.logo-naam b{font-family:'Inter',sans-serif;font-weight:700;font-size:var(--fs-lead);letter-spacing:-.01em}
.logo-naam span{font-size:var(--fs-mini);letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-top:3px}

.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,30px);list-style:none}
.nav-links a{font-size:var(--fs-klein);font-weight:500;color:rgba(243,244,240,.78);padding:8px 2px;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink);border-color:var(--accent)}
.nav-links a.nav-cta{border:1px solid var(--lijn-sterk);border-radius:8px;padding:9px 20px;color:var(--ink)}
.nav-links a.nav-cta:hover{background:var(--koper-vlak);color:var(--inkt);border-color:var(--koper-vlak)}
.nav-links a.nav-cta.active{background:var(--koper-vlak);color:var(--inkt)}

.hamburger{display:none;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.hamburger span{width:26px;height:2px;background:var(--ink);border-radius:2px;transition:.3s}
.nav-overlay{position:fixed;inset:0;background:rgba(41,41,41,.62);opacity:0;visibility:hidden;transition:.3s;z-index:850}
body.nav-open .nav-overlay{opacity:1;visibility:visible}
body.nav-open{overflow:hidden}

/* ------------------------------------------------------------ hero */
.hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:center;background:var(--bg);overflow:hidden;padding:calc(var(--nav-h) + var(--sp-section) * .6) 0 var(--sp-section)}

.hero-media{position:absolute;inset:0 0 0 auto;width:min(74%,1180px);z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:64% 22%}
/* de foto vloeit links weg in de achtergrond, zoals in het ontwerp */
.hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--inkt) 0%,var(--inkt) 14%,rgba(41,41,41,.92) 30%,rgba(41,41,41,.62) 48%,rgba(41,41,41,.24) 68%,rgba(41,41,41,0) 86%),
  linear-gradient(0deg,var(--inkt) 0%,rgba(41,41,41,.72) 9%,rgba(41,41,41,0) 42%)}
.hero-ph{width:100%;height:100%;display:grid;place-content:center;gap:8px;text-align:center;background:
  repeating-linear-gradient(45deg,var(--bg-2),var(--bg-2) 14px,var(--bg-3) 14px,var(--bg-3) 28px);color:var(--zacht);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase}
.hero-ph .klein{font-size:var(--fs-mini);letter-spacing:.04em;text-transform:none;color:var(--zacht)}

.hero-inner{position:relative;z-index:1;width:100%}
.hero-inner > *{max-width:min(58ch,620px)}
.hero h1{font-size:var(--fs-hero);margin:0}
.hero .tagline{font-size:var(--fs-tagline);color:var(--muted);max-width:34ch;line-height:1.55}
.hero .sub{margin-top:16px;color:var(--muted);max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.hero-badge{display:inline-block;margin-top:32px;font-size:var(--fs-label);letter-spacing:.06em;color:var(--muted);border-left:2px solid var(--lijn-sterk);padding-left:14px}

/* ------------------------------------------------------------ paginakop (binnenpagina's) */
.page-header{background:var(--bg-2);padding:calc(var(--nav-h) + var(--sp-section) * .55) 0 calc(var(--sp-section) * .7);position:relative}
.page-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--lijn-sterk),var(--lijn) 45%,transparent 88%)}
.page-header h1{font-size:var(--fs-h1);margin-bottom:20px}
.page-header .inner > p{color:var(--muted);max-width:62ch;font-size:var(--fs-lead)}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:var(--fs-label);color:var(--muted);margin-bottom:22px}
.crumbs a{color:var(--muted);transition:color .2s ease}
.crumbs a:hover{color:var(--accent)}
.crumbs span{color:var(--zacht)}

/* ------------------------------------------------------------ kaarten */
/* geen rij identieke boxjes maar een genummerde lijst, zoals in een tijdschrift */
.cards-3{counter-reset:kaart;display:grid;grid-template-columns:1fr;gap:0;margin-top:clamp(38px,5vw,64px);border-top:1px solid var(--lijn)}
.card{counter-increment:kaart;position:relative;display:grid;grid-template-columns:auto minmax(190px,.85fr) minmax(0,1.5fr);gap:6px clamp(22px,4.5vw,68px);align-items:start;background:none;border:0;border-bottom:1px solid var(--lijn);border-radius:0;padding:clamp(26px,3.4vw,46px) 0;transition:border-color .4s ease}
.card::before{content:counter(kaart,decimal-leading-zero);grid-column:1;font-family:'Oswald',sans-serif;font-weight:500;font-size:var(--fs-cijfer);line-height:1;color:transparent;-webkit-text-stroke:1px var(--lijn-sterk);transition:color .45s cubic-bezier(.22,.61,.36,1)}
/* hover: het cijfer loopt vol en de titel schuift een tikje op — via transform,
   dus zonder dat de rij herberekend wordt en zonder grijze band. */
.card h3,.card .card-title{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
/* de onderlijn wordt donkerder door er een tweede lijn overheen te vegen,
   van links naar rechts — een pseudo-element, zodat de reveal-animatie
   op de rij zelf er niet mee botst */
.card::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--lijn-sterk);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.card:hover::after{transform:scaleX(1)}
.card:hover::before{color:var(--accent)}
.card:hover h3,.card:hover .card-title{transform:translateX(9px)}
/* Kicker en titel samen in .card-kop: zo kan een lange tekst in kolom 3 de
   rijen niet meer oprekken en blijft de titel vlak onder de kicker staan. */
.card .card-kop{grid-column:2}
.card h3{margin-bottom:6px;font-size:var(--fs-mini);letter-spacing:.2em;color:var(--accent);font-family:'Inter',sans-serif;font-weight:600;text-transform:uppercase;line-height:1.3}
.card .card-title{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:var(--fs-h3);line-height:1.08;margin:0}
/* Op de klasse mikken, niet op het element: de tekst is soms een <p> en soms
   een <div> met alinea's. Op het element mikken kost de tekst zijn plek in het
   raster en dan rekt rij 1 op tot de volle teksthoogte. */
.card .card-tekst{grid-column:3;color:var(--muted);font-size:var(--fs-klein);margin:0}
.card .card-tekst p{margin-bottom:10px}
.card .card-tekst p:last-child{margin-bottom:0}

/* ------------------------------------------------------------ twee paden */
/* Twee routes: geen losse kaarten maar twee kolommen in dezelfde haarlijn-taal
   als de genummerde lijst erboven, gescheiden door een verticale lijn.
   Iets uit balans (1,04 / 0,96) zodat het geen spiegelbeeld is. */
.paths{display:grid;grid-template-columns:1.04fr .96fr;gap:0}
.path{background:none;border:0;border-radius:0;position:relative;
  display:flex;flex-direction:column;
  padding:0 clamp(30px,4vw,72px) 0 0}
.path + .path{padding-right:0;padding-left:clamp(30px,4vw,72px)}
.path + .path::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--lijn)}
.path h3{font-size:var(--fs-h2s);line-height:1.04;margin-bottom:16px}
.path p{color:var(--muted);margin-bottom:26px;max-width:38ch}
/* de link zakt naar de onderkant, zodat beide kolommen op dezelfde regel eindigen
   ook als de ene kop wel afbreekt en de andere niet */
.path .btn-link{margin-top:auto;align-self:flex-start}

/* ------------------------------------------------------------ split (tekst + beeld) */
/* Bovenaan uitlijnen in plaats van centreren. Centreren liet het beeld per pagina
   ergens anders beginnen: afhankelijk van de lengte van de tekst ernaast liep dat
   uiteen van 159px te hoog tot 59px te laag. */
.split{display:grid;grid-template-columns:minmax(280px,1.12fr) minmax(260px,.88fr);gap:clamp(28px,4.5vw,76px);align-items:start}
/* Los beeld krijgt de optische verschuiving; een kader (.scenario-box) niet, want
   daarvan is de rand zelf de lijn die je ziet. */
.split:has(.eyebrow) > .img-real,.split:has(.eyebrow) > .img-ph{margin-top:var(--kop-optiek)}
/* Variant voor een blok met een korte tekst: dan mag het beeld de ruimte pakken
   die de tekst niet nodig heeft. Onder de stapelgrens verandert er niets. */
.split--beeld-ruim{grid-template-columns:minmax(260px,1fr) minmax(300px,1.2fr)}
/* Staat er een .scenario-box naast een tekstkolom, dan kleeft die tekstkolom.
   De kaart is met de volledige foto erin ruim 600px langer dan de opsomming
   ernaast, en met align-items:start bleef daaronder een gat van diezelfde
   hoogte staan. Nu blijven kop en opsomming in beeld terwijl je de kaart
   doorleest, en lopen de twee kolommen samen op.

   De top-afstand is de vaste navigatie plus wat lucht, anders schuift de kop
   er straks onder. Sticky doet automatisch niets zodra de tekstkolom zelf de
   langste van de twee is (zoals op een vacaturepagina), want dan valt er niets
   te kleven. Onder 900px is het één kolom en vervalt de regel. */
@media (min-width:901px){
  .split:has(> .scenario-box) > :first-child{
    position:sticky;
    top:calc(var(--nav-h) + clamp(16px,2vw,32px));
  }
}

.img-ph{position:relative;overflow:hidden;background:repeating-linear-gradient(45deg,var(--bg-2),var(--bg-2) 14px,var(--bg-3) 14px,var(--bg-3) 28px);border:1px solid var(--lijn);display:grid;place-items:center;text-align:center;color:var(--zacht);min-height:260px}
.img-ph .ph-inner{display:grid;place-items:center;gap:8px;padding:24px}
.img-ph svg{opacity:.5}
.img-ph .ph-label{font-weight:600;font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase}
.img-ph .ph-sub{font-size:var(--fs-label);opacity:.75}
.img-ph.round{border-radius:50%;aspect-ratio:1;min-height:0;width:210px;margin:0 auto}
.img-ph.ratio-43{aspect-ratio:4/3;min-height:0}

/* Afspraak: beeld heeft rechte hoeken. De hero en de paginakoppen lopen ook
   zonder afronding door, en de lijsten werken met haarlijnen in plaats van kaders. */
.img-real{overflow:hidden;box-shadow:var(--schaduw)}
.img-real img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.img-real.ratio-43{aspect-ratio:4/3}
.img-real.round{border-radius:50%;aspect-ratio:1;width:210px;margin:0 auto;box-shadow:var(--schaduw-lg)}

/* ------------------------------------------------------------ stappen */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(20px,2.6vw,34px);margin:46px 0}
/* Vaste rijen: cijfer, kop, tekst. Zo begint elke alinea op dezelfde hoogte,
   ook als de ene kop over twee regels loopt en de andere over één. */
.step{position:relative;display:grid;grid-template-rows:auto auto 1fr;align-content:start;padding-top:24px;border-top:1px solid var(--lijn)}
/* Kleiner en zonder negatieve marge: het cijfer botste met koppen van twee regels. */
.step-num{font-family:'Oswald',sans-serif;font-weight:500;font-size:clamp(2.4rem,1.8rem + 1.9vw,3.6rem);line-height:1;color:transparent;-webkit-text-stroke:1px var(--lijn-sterk);margin-bottom:10px;user-select:none}
/* Twee regels ruimte gereserveerd, zodat de tekst eronder overal gelijk begint. */
.step h4{position:relative;font-size:var(--fs-h4);line-height:1.3;min-height:2.6em;margin-bottom:10px}
.step p{color:var(--muted);font-size:var(--fs-klein)}

/* eerlijkheidsblok */
.honesty{position:relative;background:var(--bg-3);border-left:2px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;padding:clamp(28px,3.4vw,44px);margin:44px 0;max-width:76ch}
.honesty .qmark{position:absolute;top:6px;left:20px;font-family:Georgia,'Times New Roman',serif;font-size:6.5rem;line-height:1;color:var(--accent);opacity:.28;user-select:none}
.honesty p{position:relative;color:var(--ink);font-size:var(--fs-lead);line-height:1.55}

/* ------------------------------------------------------------ checklist */
.checklist{list-style:none;display:grid;gap:20px;margin:32px 0}
.checklist li{display:flex;gap:16px;align-items:flex-start}
.checklist .tick{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--accent-zacht);color:var(--accent);font-size:var(--fs-mini);margin-top:3px}
.checklist strong{display:block;font-weight:600;margin-bottom:3px}
.checklist span:not(.tick){color:var(--muted);font-size:var(--fs-klein)}

/* ------------------------------------------------------------ scenario/zijkader */
.scenario-box{background:var(--bg-3);border:1px solid var(--lijn);border-radius:var(--radius);padding:clamp(28px,3.4vw,44px);box-shadow:var(--schaduw)}
.scenario-box p{color:var(--muted);margin-bottom:16px}
.scenario-box .target{color:var(--ink);font-weight:600;font-size:var(--fs-lead);line-height:1.4;border-left:2px solid var(--accent);padding-left:16px;margin:22px 0}

/* ------------------------------------------------------------ vacatures */
/* vacaturelijst: rijen met haarlijnen, geen raster van identieke tegels */
.vac-grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--lijn)}
.vac{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto;grid-template-rows:auto auto;gap:8px clamp(20px,4vw,60px);align-items:center;background:none;border:0;border-bottom:1px solid var(--lijn);border-radius:0;padding:clamp(22px,2.8vw,36px) 0;transition:border-color .4s ease}
.vac h3,.vac .vac-tags{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.vac .btn-link{transition:transform .45s cubic-bezier(.22,.61,.36,1),color .25s ease}
.vac::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--lijn-sterk);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.vac:hover::after{transform:scaleX(1)}
.vac:hover{transform:none}
.vac:hover h3,.vac:hover .vac-tags{transform:translateX(9px)}
.vac:hover .btn-link{transform:translateX(6px);color:var(--accent)}
.vac .vac-tags{grid-column:1;grid-row:1}
.vac h3{grid-column:1;grid-row:2;font-size:var(--fs-h3);line-height:.98}
.vac p{grid-column:2;grid-row:1/3;color:var(--muted);font-size:var(--fs-klein);align-self:center;margin:0}
.vac .btn-link{grid-column:3;grid-row:1/3;justify-self:end;align-self:center}
.vac-tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:var(--fs-mini);font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:5px 12px;border-radius:999px;border:1px solid var(--lijn)}
.tag-loc{color:var(--accent);border-color:var(--lijn-sterk)}
.tag-lvl{color:var(--muted)}

/* ------------------------------------------------------------ over mij */
.over-grid{display:grid;grid-template-columns:minmax(210px,300px) 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.portrait-cap{margin-top:18px;text-align:center;font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.interview{display:grid;gap:34px}
.qa .q{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;font-size:var(--fs-h3);line-height:1.12;color:var(--ink);margin-bottom:12px}
.qa .a{color:var(--muted);max-width:68ch}

/* ------------------------------------------------------------ contact */
.contact-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(28px,4vw,64px);align-items:start}
.form{display:grid;gap:20px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:8px}
/* het invoerveld zit ín het label (geen id-botsingen bij twee formulieren),
   dus het label stapelt zelf label-tekst boven veld */
.field label{display:grid;gap:8px}
.field label{font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
/* 1rem = 16px is hier bewust: onder 16px zoomt iOS in zodra een veld focus krijgt */
.field input,.field textarea{font-family:inherit;font-size:1rem;color:var(--ink);background:var(--bg-2);border:1px solid var(--lijn);border-radius:8px;padding:14px 16px;transition:border-color .2s ease,background-color .2s ease}
.field input::placeholder,.field textarea::placeholder{color:var(--zacht)}
.field input:focus,.field textarea:focus{border-color:var(--accent);background:var(--bg-3)}
/* Muisfocus krijgt alleen de randkleur; toetsenbordfocus houdt de omlijning,
   anders is er voor wie tabt geen zichtbaar verschil met een gewoon veld. */
.field input:focus:not(:focus-visible),.field textarea:focus:not(:focus-visible){outline:none}
/* Veld met een fout: rand en melding horen bij elkaar. */
.field [aria-invalid="true"]{border-color:rgba(190,80,60,.75)}
.veld-fout{font-size:var(--fs-label);font-weight:600;color:#a33f2c;margin:0}
.field textarea{min-height:170px;resize:vertical}
.form-note{font-size:var(--fs-label);color:var(--muted);max-width:56ch}
.form-ok{background:var(--accent-zacht);border:1px solid var(--lijn-sterk);color:var(--ink);padding:15px 18px;border-radius:8px;font-weight:600}
.form-err{background:rgba(190,80,60,.16);border:1px solid rgba(190,80,60,.5);color:var(--ink);padding:15px 18px;border-radius:8px;font-weight:600}

.contact-aside{background:var(--bg-2);border:1px solid var(--lijn);border-radius:var(--radius);padding:clamp(26px,3vw,38px)}
.contact-aside h3{font-size:var(--fs-h3);margin-bottom:10px}
.contact-aside .promise{color:var(--accent);font-weight:600;margin-bottom:26px;font-size:var(--fs-klein)}
.ci{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--lijn)}
.ci-icon{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--accent-zacht);color:var(--accent)}
.ci a{font-weight:500;transition:color .2s ease}
.ci a:hover{color:var(--accent)}

/* ------------------------------------------------------------ CTA-band */
/* loopt van iets lichter naar precies de footerkleur, zodat beide samen één vlak vormen */
.cta-band{background:linear-gradient(180deg,#363636 0%,#313131 38%,var(--inkt) 92%);padding:calc(var(--sp-section) * .78) 0;position:relative;overflow:hidden}
/* Contactblok: licht en vlak. Geen kleurvlak, geen rook — de donkere footer
   eronder levert de scheiding, dus het blok hoeft zelf niets te doen. */
.contact-band{background:var(--wit);border-top:1px solid var(--lijn)}
/* Twee kolommen die onderaan uitlijnen: de laatste regel van de kop staat op
   dezelfde hoogte als de knop. Zo blijft er geen leeg kwadrant onder de kop,
   ongeacht of die over één of drie regels loopt. */
.cta-band > .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(22px,4vw,72px);align-items:end}
.cta-band .cta-tekst h2{margin:0}
.cta-band .cta-actie p{color:var(--muted);max-width:46ch;margin:0 0 26px}
.cta-knoppen{display:flex;flex-wrap:wrap;gap:14px;justify-content:flex-start}

/* ------------------------------------------------------------ footer */
.footer{background:var(--inkt);border-top:1px solid var(--lijn);padding:calc(var(--sp-section) * .6) 0 calc(var(--sp-section) * .32)}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:28px;padding-bottom:34px;border-bottom:1px solid var(--lijn)}
.footer-links{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,30px)}
.footer-links a{font-size:var(--fs-klein);color:var(--muted);transition:color .2s ease}
.footer-links a:hover{color:var(--accent)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 26px;padding-top:26px;font-size:var(--fs-label);color:var(--muted)}
/* Bedrijfsgegevens links, juridische links rechts. Zonder deze twee groepen
   spreidt space-between vier losse items over de volle breedte uit. */
.footer-bedrijf,.footer-juridisch{display:flex;flex-wrap:wrap;gap:12px 26px}
.footer-juridisch a{border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.footer-juridisch a:hover{color:var(--accent);border-color:var(--accent)}
/* Credit onderaan. Kleur is --muted en niet --zacht: dit is lopende tekst die
   gelezen wordt, en --zacht haalt bewust geen 4,5:1. */
.footer-credit{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--lijn);font-size:var(--fs-label);color:var(--muted)}
.footer-credit a{color:var(--accent);font-weight:600;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
.footer-credit a:hover{color:var(--accent-hover);border-color:var(--accent-hover)}

/* ------------------------------------------------------------ losse WP-inhoud */

/* ------------------------------------------------------------ toegankelijkheid + formulierbeveiliging */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed!important;top:12px;left:12px;width:auto;height:auto;clip:auto;z-index:100000;background:var(--koper-vlak);color:var(--inkt);padding:12px 20px;border-radius:8px;font-weight:600}

/* admin-balk niet over de vaste navigatie heen */
body.admin-bar .nav{top:32px}
@media (max-width:782px){body.admin-bar .nav{top:46px}}

/* ------------------------------------------------------------ responsive */
@media (max-width:900px){
  /* genummerde rijen, vacaturelijst en slotblok stapelen op smalle schermen */
  .card{grid-template-columns:auto 1fr;gap:6px clamp(16px,3vw,28px)}
  .card::before{grid-row:1/3}
  .card .card-kop{grid-column:2;grid-row:1}
  .card .card-tekst{grid-column:2;grid-row:2;margin-top:10px}
  .vac{grid-template-columns:1fr;gap:10px}
  .vac .vac-tags,.vac h3,.vac p,.vac .btn-link{grid-column:1}
  .vac .vac-tags{grid-row:1}
  .vac h3{grid-row:2}
  .vac p{grid-row:3}
  .vac .btn-link{grid-row:4;justify-self:start}
  .cta-band > .wrap{grid-template-columns:1fr;gap:18px}
  .split{grid-template-columns:1fr}
  /* Gestapeld staat er geen kop meer naast, dus valt de optische verschuiving weg. */
  .split:has(.eyebrow) > .img-real,.split:has(.eyebrow) > .img-ph{margin-top:0}
  .paths{grid-template-columns:1fr}
  .path{padding:0 0 28px}
  .path + .path{padding:28px 0 0;border-top:1px solid var(--lijn)}
  .path + .path::before{display:none}
}

@media (max-width:1000px){
  .contact-grid{grid-template-columns:1fr}
  .over-grid{grid-template-columns:1fr;gap:40px}
  .img-ph.round,.img-real.round{width:190px}
}

@media (max-width:860px){
  .hamburger{display:flex}
  .nav-links{position:fixed;top:0;right:0;bottom:0;width:min(84vw,340px);flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;background:var(--bg-2);border-left:1px solid var(--lijn);padding:40px;opacity:0;visibility:hidden;pointer-events:none;transform:translateX(24px);transition:.35s ease;z-index:900}
  .nav-toggle:checked ~ .nav-links{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .nav-links a{font-size:var(--fs-lead)}
  .nav-links a.nav-cta{padding:12px 24px}
  .nav.menu-open{background:rgba(41,41,41,.97)}

  /* hero: foto boven, tekst eronder */
  .hero{min-height:0;display:block;padding-top:calc(var(--nav-h) + var(--sp-section) * .5)}
  .hero-media{position:relative;width:100%;height:clamp(280px,52vw,420px);margin-bottom:34px}
  .hero-media::after{background:linear-gradient(0deg,var(--bg) 2%,rgba(41,41,41,.2) 55%,rgba(41,41,41,.35) 100%)}
  .hero-inner > *{max-width:none}
  .hero .tagline{max-width:44ch}
}

@media (max-width:560px){
  .form .row{grid-template-columns:1fr}
  .footer-top{flex-direction:column;align-items:flex-start}
  .hero-cta .btn{width:100%;justify-content:center}
}

/* ------------------------------------------------------------ scroll-reveal */
@media (prefers-reduced-motion: no-preference){
  .js .wa-reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease-out,transform .8s ease-out;will-change:opacity,transform}
  .js .wa-reveal.wa-in{opacity:1;transform:none}
  .js .wa-stagger > *{opacity:0;transform:translateY(22px);transition:opacity .8s ease-out,transform .8s ease-out;will-change:opacity,transform}
  .js .wa-stagger.wa-in > *{opacity:1;transform:none}
  .js .wa-stagger.wa-in > *:nth-child(2){transition-delay:.09s}
  .js .wa-stagger.wa-in > *:nth-child(3){transition-delay:.18s}
  .js .wa-stagger.wa-in > *:nth-child(4){transition-delay:.27s}
  .js .wa-stagger.wa-in > *:nth-child(5){transition-delay:.36s}
  .js .wa-stagger.wa-in > *:nth-child(6){transition-delay:.45s}
}

/* Wie beweging liever beperkt houdt, krijgt alleen de kleurwissel. */
@media (prefers-reduced-motion: reduce){
  .card:hover h3,.card:hover .card-title,
  .vac:hover h3,.vac:hover .vac-tags,.vac:hover .btn-link{transform:none}
  .card::after,.vac::after{transition:none}
  .btn:hover{transform:none}
}

/* ------------------------------------------------------------ Snel bewerken */
.rmc-editmode [data-rmc-ed],
.rmc-editmode [data-rmc-edit] [data-rmc-field]{outline:1px dashed var(--accent);outline-offset:3px;border-radius:3px;cursor:text;position:relative;z-index:5}
.rmc-editmode [data-rmc-ed]:hover,.rmc-editmode [data-rmc-ed]:focus,
.rmc-editmode [data-rmc-edit] [data-rmc-field]:hover,.rmc-editmode [data-rmc-edit] [data-rmc-field]:focus{outline-style:solid;background:var(--accent-zacht)}
[data-rmc-ed].is-saving,[data-rmc-field].is-saving{opacity:.55}
[data-rmc-ed].is-saved,[data-rmc-field].is-saved{animation:rmc-saved 1.2s ease}
@keyframes rmc-saved{0%{background:var(--accent-zacht)}100%{background:transparent}}

.rmc-editmode [data-rmc-edit]{pointer-events:none;position:relative}
.rmc-editmode [data-rmc-edit] [data-rmc-field],
.rmc-editmode [data-rmc-edit] .rmc-fulllink{pointer-events:auto}
.rmc-editmode a:has([data-rmc-ed]){pointer-events:none}
.rmc-editmode [data-rmc-ed]{pointer-events:auto}

.rmc-fulllink{display:none}
.rmc-editmode .rmc-fulllink{display:inline-flex;position:absolute;top:10px;right:12px;z-index:7;font-size:var(--fs-mini);font-weight:600;text-transform:uppercase;letter-spacing:.1em;background:var(--koper-vlak);color:var(--inkt);border-radius:999px;padding:5px 12px}
.rmc-editmode .rmc-fulllink:hover{background:var(--accent-hover)}

.rmc-editfab{position:fixed;right:20px;bottom:20px;z-index:99990;font-family:'Inter',sans-serif;font-weight:600;font-size:var(--fs-klein);background:var(--koper-vlak);color:var(--inkt);border:0;border-radius:999px;padding:13px 24px;box-shadow:0 10px 30px rgba(0,0,0,.5);cursor:pointer;transition:background-color .2s ease}
.rmc-editfab:hover,.rmc-editmode .rmc-editfab{background:var(--accent-hover)}

/* ------------------------------------------------------------
   Mobiel: ruimte terugbrengen.
   De clamp()-waarden hierboven hebben ondergrenzen die op desktop zijn
   afgestemd; op een klein scherm blijven die te royaal staan. Hieronder
   zetten we de maatvoering echt kleiner, in plaats van te wachten tot
   vw-eenheden vanzelf krimpen.
   ------------------------------------------------------------ */
@media (max-width:720px){
  :root{--sp-section:42px;--nav-h:72px}

  /* regelafstand en kopmarges: op een smal scherm mag alles dichter op elkaar */
  body{line-height:1.6}
  .lead,.page-header .inner > p{line-height:1.55}
  .eyebrow{margin-bottom:12px}
  .crumbs{margin-bottom:16px}
  .page-header h1{margin-bottom:14px}
  .card .card-tekst,.vac p{line-height:1.55}
  .checklist span:not(.tick){line-height:1.5}

  .hero{padding-bottom:calc(var(--sp-section) * .8)}
  .hero-media{height:clamp(240px,46vw,340px);margin-bottom:26px}
  .hero-streep{margin:20px 0}
  .hero-cta{margin-top:26px;gap:10px}
  .hero-badge{margin-top:22px}

  .section h2{margin-bottom:14px}
  .split{gap:24px}
  .over-grid{gap:26px}

  .cards-3{margin-top:24px}
  .card{padding:20px 0}
  .vac{padding:18px 0}

  .steps{margin:28px 0;gap:24px}
  .honesty{margin:26px 0;padding:22px 20px}
  .honesty .qmark{font-size:3.6rem;top:4px;left:14px}
  .checklist{gap:16px;margin:22px 0}
  .interview{gap:26px}
  .scenario-box{padding:24px 20px}
  .contact-aside{padding:24px 20px}
  .form{gap:16px}
  .btn{padding:13px 24px}

  .cta-band > .wrap{gap:0}
  .cta-band p{margin-bottom:22px}
  .footer{padding:32px 0 24px}
  .footer-top{padding-bottom:24px;gap:18px}
  .footer-bottom{padding-top:20px}
}

@media (max-width:480px){
  :root{--sp-section:36px}
  .steps{margin:24px 0;gap:20px}
  .honesty{margin:22px 0}
}

/* logobestand in de balken (valt terug op de getypte naam als er geen bestand staat) */
.logo-beeld{height:clamp(30px,3.4vw,42px);width:auto;display:block}
.footer .logo-beeld{height:clamp(28px,3vw,38px)}
@media (max-width:720px){.logo-beeld{height:30px}}

/* ------------------------------------------------------------
   Persoonlijke accenten: Ruben in beeld op de plekken waar
   iemand besluit contact op te nemen.
   ------------------------------------------------------------ */

/* foto bovenin een kader (Ik zoek personeel) */
/* Geen vast kader: de opname is staand (2:3) en werd in een 5:4-kader voor
   bijna de helft weggesneden. Het beeld houdt nu zijn eigen verhouding, dus
   je ziet de hele foto. De img heeft width/height, dus de browser reserveert
   de ruimte en er verschuift niets tijdens het laden. */
.scenario-box .box-foto{margin:-4px 0 22px;overflow:hidden;border-radius:calc(var(--radius) - 6px)}
.scenario-box .box-foto img{width:100%;height:auto;display:block}

/* klein rond portret in het vacature-kader */
.scenario-box .box-portret{width:64px;height:64px;border-radius:50%;overflow:hidden;margin-bottom:16px;border:1px solid var(--lijn)}
.scenario-box .box-portret img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}

/* portret in de contactzijkolom */
.contact-aside .aside-foto{aspect-ratio:5/4;overflow:hidden;margin:-4px 0 14px}
.contact-aside .aside-foto img{width:100%;height:100%;object-fit:cover;object-position:center 26%;display:block}
.contact-aside .aside-cap{font-size:var(--fs-label);letter-spacing:.06em;color:var(--accent);margin-bottom:20px}

/* ondertekening onder het citaat */
.honesty .naam{margin-top:16px;font-size:var(--fs-klein);font-weight:600;letter-spacing:.04em;color:var(--accent)}

@media (max-width:720px){
  /* .box-foto staat hier niet meer bij: die volgt de foto zelf, ook op mobiel.
     Een liggend 3:2-kader sneed een staande opname juist het hardst af. */
  .contact-aside .aside-foto{aspect-ratio:3/2}
  .scenario-box .box-portret{width:54px;height:54px}
}

/* ------------------------------------------------------------
   Foto in de paginakop en achter de twee routes.
   Bronbestanden zijn staand, dus smallere kolommen dan bij de hero —
   een staande foto in een brede band levert alleen een strookje op.
   ------------------------------------------------------------ */
/* De foto is sfeer, geen onderwerp. Hij gaat op in de kop en vervaagt aan alle
   vier de randen, zodat er geen rechthoek en geen afgesneden gezicht ontstaat.
   De bronbestanden zijn staande portretten; groot uitgesneden in een brede band
   levert dat altijd een half hoofd op. */
/* Geen opacity op dit blok. Dat maakt er één samengestelde laag van, en die
   krijgt over de volle rechthoek een andere tint dan de omgeving — zichtbaar als
   een verticale lijn bij de beeldrand. De subtiliteit zit nu in het verloop
   hieronder, dat per pixel mengt en dus geen rand kan opleveren. */
.page-header .kop-media{position:absolute;inset:0 0 0 auto;width:min(46%,680px);z-index:-2}
.page-header .kop-media img{width:100%;height:100%;object-fit:cover;object-position:center 26%}
/* Het verloop moet uitkomen op de achtergrondkleur van de kop zelf (--bg-2),
   niet op --inkt. Anders staat er aan de rand van het beeld een andere tint dan
   ernaast en zie je een harde verticale lijn. */
.page-header .kop-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--bg-2) 0%,rgba(49,49,49,.88) 18%,rgba(49,49,49,.64) 48%,rgba(49,49,49,.58) 80%,var(--bg-2) 100%),
  linear-gradient(180deg,var(--bg-2) 0%,rgba(49,49,49,.30) 20%,rgba(49,49,49,.30) 76%,var(--bg-2) 100%)}

@media (max-width:900px){
  .page-header .kop-media{width:58%}
}
@media (max-width:720px){
  .page-header .kop-media{width:100%}
}

/* ------------------------------------------------------------
   Contactblok onderaan de homepage: kop, formulier en gegevens
   in één donkere band, in plaats van alleen een knop.
   ------------------------------------------------------------ */
.contact-band-kop{max-width:52ch;margin-bottom:clamp(24px,3vw,36px)}
.contact-band-kop h2{margin-bottom:14px}
.contact-band-kop p{color:var(--muted);max-width:56ch}

.contact-band-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,80px);align-items:start}
/* Op de contactpagina staat er geen kop boven het formulier; dan is er ook niets
   om op uit te lijnen en blijft de zijkolom gewoon bovenaan. */
.contact-band-grid:has(.contact-band-kop) .contact-band-info{margin-top:var(--kop-optiek)}
.contact-band-info{border-left:1px solid var(--lijn);padding-left:clamp(28px,4vw,60px)}
/* Staand kader: uit een staande bron zie je in een liggend kader maar de helft
   van de hoogte, en dan zit de uitsnede strak om het gezicht. */
.contact-band-info .aside-foto{aspect-ratio:4/5;overflow:hidden;margin-bottom:14px}
.contact-band-info .aside-foto img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block}
/* Geen onderlijn: de eerste contactregel tekent al een bovenlijn, anders staan
   er twee haarlijnen onder elkaar. */
.contact-band-info .aside-cap{font-size:var(--fs-label);letter-spacing:.06em;color:var(--accent);margin:0 0 4px}
.contact-band-info .klein-info{margin-top:20px;font-size:var(--fs-label);color:var(--muted)}
.contact-band .form{gap:18px}
.contact-band .field label{gap:6px}
.contact-band .field input,.contact-band .field textarea{background:transparent;border-radius:4px;padding:11px 13px}
.contact-band .field textarea{min-height:112px}
.contact-band .form-note{color:var(--muted);font-size:var(--fs-label)}
.contact-band .btn-primary{padding:12px 26px}

@media (max-width:900px){
  .contact-band-grid{grid-template-columns:1fr;gap:34px}
  .contact-band-grid:has(.contact-band-kop) .contact-band-info{margin-top:0}
  .contact-band-info{border-left:0;border-top:1px solid var(--lijn);padding-left:0;padding-top:28px}
  /* Volle kolombreedte, zodat de foto uitlijnt met de contactregels eronder.
     Verhouding blijft 4:5, gelijk aan desktop. */
  .contact-band-info .aside-foto{aspect-ratio:4/5}
}

/* doorverwijzing naar de vacatures in de zijkolom van de vaste afsluiter */
.contact-band-info .slot-vac{display:inline-flex;margin-top:18px;padding-top:16px;border-top:1px solid var(--lijn);width:100%}

/* Contactgegevens onderin het uitklapmenu — alleen op mobiel, waar je
   direct wilt kunnen bellen of mailen zonder eerst door te klikken. */
.nav-gegevens{display:none}
@media (max-width:860px){
  .nav-gegevens{display:grid;gap:14px;width:100%;margin-top:22px;padding-top:22px;border-top:1px solid var(--lijn)}
  .nav-gegevens a{display:flex;align-items:center;gap:12px;font-size:var(--fs-klein);color:var(--muted)}
  .nav-gegevens a:hover{color:var(--accent)}
  .nav-gegevens .ci-icon{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent-zacht);color:var(--accent)}
}

/* Slotzin na de stappen, en de persoonlijke P.S. onderaan een pagina */
/* Uitspraken krijgen één vorm: koperen streep links, groter dan de lopende
   tekst en in inktkleur. Zo is meteen te zien dat het een statement is en
   geen doorlopende alinea. */
.stap-slot{max-width:44ch;margin:0;padding-left:clamp(18px,2vw,28px);border-left:2px solid var(--accent);color:var(--ink);font-size:var(--fs-h3);line-height:1.35}
.ps-tekst{max-width:66ch;margin-top:clamp(28px,3.4vw,44px);padding-top:20px;border-top:1px solid var(--lijn);color:var(--muted);font-size:var(--fs-klein)}
.ps-tekst span{font-weight:600;color:var(--accent);letter-spacing:.06em}
.honesty h4{margin-bottom:12px;font-size:var(--fs-h4)}
.honesty p{margin-bottom:12px}
.honesty p:last-child{margin-bottom:0}

@media (max-width:720px){
  /* onder elkaar hoeft de kop geen twee regels te reserveren */
  .step h4{min-height:0}
}

/* de ondertekening onder een citaat hoort bij het citaat, niet bij de alinea's */
/* Ondertekening met portretje: een citaat met een naam eronder wint aan
   geloofwaardigheid als je het gezicht erbij ziet. */
.honesty .naam-rij{display:flex;align-items:center;gap:14px;margin-top:20px;padding-top:16px;border-top:1px solid var(--lijn)}
.honesty .naam-foto{flex:none;width:48px;height:48px;border-radius:50%;overflow:hidden;border:1px solid var(--lijn)}
.honesty .naam-foto img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.honesty .naam{margin:0}
@media (max-width:720px){
  .stap-slot{font-size:var(--fs-lead);padding-left:16px}
  .honesty .qmark{font-size:4.4rem;top:2px;left:14px}
}

/* Filter op categorie boven de vacaturelijst */
.vac-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,40px)}
.vac-filter a{font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 18px;border:1px solid var(--lijn);border-radius:999px;color:var(--muted);
  transition:border-color .25s ease,color .25s ease,background-color .25s ease}
.vac-filter a:hover{border-color:var(--lijn-sterk);color:var(--ink)}
.vac-filter a.is-actief{background:var(--inkt);border-color:var(--inkt);color:var(--papier)}
.tag-cat{color:var(--accent);border-color:var(--lijn-sterk)}
@media (max-width:720px){
  .vac-filter{gap:6px}
  .vac-filter a{padding:7px 14px}
}

/* tweede foto in de smalle kolom op Over mij */
/* De bovenmarge hield afstand tot het portret dat erboven stond. Staat de foto
   bovenaan de kolom, dan moet hij op één lijn beginnen met de tekst ernaast. */
/* Geen vast kader: de opname is staand (2:3) en werd in een 4:5-kader
   onderaan afgesneden, precies waar de voeten en de board staan. Het beeld
   houdt nu zijn eigen verhouding, dus je ziet de hele foto. De img krijgt
   width en height van rmc_img_maat(), dus de browser reserveert de ruimte en
   er verschuift niets tijdens het laden. */
.over-foto-2{aspect-ratio:auto}
.over-foto-2:not(:first-child){margin-top:clamp(24px,3vw,40px)}
.over-foto-2 img{width:100%;height:auto;display:block}
@media (max-width:1000px){.over-foto-2{max-width:280px}}

/* Sluitknop in het uitklapmenu — alleen daar zichtbaar */
.nav-sluit{display:none}
@media (max-width:860px){
  .nav-sluit{display:block;position:absolute;top:18px;right:18px}
  .nav-sluit label{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
    border:1px solid var(--lijn);color:var(--ink);cursor:pointer;
    transition:border-color .2s ease,background-color .2s ease,color .2s ease}
  .nav-sluit label:hover,.nav-sluit label:focus-visible{border-color:var(--accent);color:var(--accent);background:var(--accent-zacht)}
}

/* ------------------------------------------------------------ blog */
/* Kaartenraster. Drie op een brede kolom, daarna vanzelf minder. De kaarten
   zijn net als de vacatures geen dozen: het beeld draagt de kaart, de rest is
   tekst op de ondergrond. Rechte hoeken, zoals al het beeld op deze site. */
.posts{--posts-gap:clamp(26px,3vw,44px);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--posts-gap)}
.post{display:flex;flex-direction:column;position:relative;background:none;border:0;padding:0}
/* De portretten zijn staand (2:3). In een 16:10-kader bleef daar 42% van de
   hoogte over en viel het hoofd erbuiten; 4:5 snijdt nog 17% weg en dat zit
   onderaan. De uitsnede staat op 22% en niet op het midden, want in alle
   opnamen zit het hoofd in de bovenste derde. */
.post-beeld{display:block;aspect-ratio:4/5;overflow:hidden;margin-bottom:18px;background:var(--bg-4)}
.post-beeld img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.post:hover .post-beeld img{transform:scale(1.045)}
/* Zonder uitgelichte afbeelding blijft de hoogte gelijk, zodat de rij niet
   gaat schoppen. Hetzelfde streepjespatroon als de andere beeldplekhouders. */
.post-beeld--leeg{background:
  repeating-linear-gradient(45deg,var(--bg-2),var(--bg-2) 14px,var(--bg-4) 14px,var(--bg-4) 28px);
  border:1px solid var(--lijn)}
.post-meta{font-size:var(--fs-mini);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px}
.post-meta .post-punt{margin:0 .45em;color:var(--zacht)}
.post h3{font-size:var(--fs-h3);line-height:1.06;margin-bottom:10px;transition:color .25s ease}
.post:hover h3{color:var(--accent)}
.post .post-cap{color:var(--muted);font-size:var(--fs-klein);margin-bottom:16px}
.post .btn-link{margin-top:auto;align-self:flex-start}

/* Blogblok op de homepage: knop eronder, gecentreerd zoals de andere slotknoppen. */
.blog-band .posts{margin-top:clamp(30px,3.5vw,48px)}
.blog-meer{margin-top:clamp(30px,3.5vw,48px);text-align:center}
.blog-band{border-top:1px solid var(--lijn)}

/* ============================================================
   REVIEWS
   Drie citaten naast elkaar. Ze staan op het lichtste paneel zodat ze uit de
   pagina naar voren komen, met een aanhalingsteken als merkteken in koper.
   ============================================================ */
.reviews{
  list-style:none;margin:clamp(30px,3.5vw,48px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px);
  /* start en niet stretch: de langste review is hier bijna drie keer de
     kortste, en even hoge kaarten leveren dan een gat van een paar honderd
     pixels onder de korte citaten op. Elke kaart eindigt nu onder zijn eigen
     tekst. De onderrand loopt daardoor niet gelijk, en dat leest bij losse
     kaarten met een rand eromheen beter dan lege ruimte. */
  align-items:start;
}
.review{margin:0;display:flex}
.review figure{
  margin:0;display:flex;flex-direction:column;
  background:var(--bg-2);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:clamp(24px,2.4vw,34px);box-shadow:var(--schaduw);
  position:relative;isolation:isolate;
}
/* Het aanhalingsteken is decoratie, dus aria-hidden via ::before en niet in de
   tekst zelf: een schermlezer hoort het citaat al als blockquote. */
/* Het aanhalingsteken staat binnen de kaart en niet over de rand: een glyph
   van dit formaat heeft veel loze ruimte boven de baseline, dus de plaatsing
   gaat op een eigen regelhoogte in plaats van op top:0. */
.review figure::before{
  content:"\201C";position:absolute;top:clamp(10px,1.2vw,16px);left:clamp(16px,1.8vw,24px);
  font-family:'Oswald',sans-serif;font-weight:600;font-size:4.5rem;line-height:.8;
  height:2.2rem;overflow:hidden;
  color:var(--accent-zacht);z-index:-1;pointer-events:none;
}
.review blockquote{margin:0;flex:1 1 auto;quotes:none}
.review blockquote p{color:var(--muted);margin-bottom:12px}
.review blockquote p:last-child{margin-bottom:0}
.review .review-titel{
  font-family:'Oswald',sans-serif;font-weight:600;font-size:var(--fs-h4);
  line-height:1.2;color:var(--ink);margin-bottom:10px;
}
/* "Lees verder": lange citaten tonen ongeveer acht regels.

   De volledige tekst staat in de HTML en wordt alleen visueel beperkt, dus
   zoekmachines en bezoekers zonder JavaScript zien alles. De klasse hieronder
   wordt door site.js gezet: zonder JS blijft het citaat dus heel, in plaats
   van half afgekapt zonder knop om het uit te klappen.

   De uitfade gebruikt een mask en geen gradient-overlay: een overlay zou de
   kaartkleur moeten kennen, en die is via Weergave > Kleuren instelbaar. Een
   mask maakt de tekst zelf doorzichtig en werkt dus bij elke kleur. */
.review--inkort blockquote{
  max-height:13.6em;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent);
  mask-image:linear-gradient(to bottom,#000 62%,transparent);
}
.review--open blockquote{
  max-height:none;
  -webkit-mask-image:none;mask-image:none;
}
.review-meer{
  margin-top:16px;align-self:flex-start;
  background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:var(--fs-klein);
}

.review figcaption{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--lijn);
  display:flex;flex-direction:column;gap:2px;
}
.review .review-naam{font-weight:600;color:var(--ink)}
.review .review-functie{font-size:var(--fs-klein);color:var(--zacht)}

@media (max-width:1000px){
  /* Drie kolommen worden hier te smal voor een citaat van deze lengte: bij
     minder dan ongeveer 300px per kaart vallen er twee woorden per regel. */
  .reviews{grid-template-columns:1fr 1fr}
  /* Met drie kaarten in twee kolommen valt de derde alleen in een nieuwe rij
     en blijft er rechts een gat naast. Die laatste loopt daarom over de volle
     breedte. De :has-voorwaarde beperkt dit tot precies drie reviews: bij vier
     vullen ze de twee rijen zelf en moet deze regel juist niet gelden. */
  .reviews:has(> :nth-child(3):last-child) > :last-child{grid-column:1 / -1}
}
@media (max-width:700px){
  .reviews{grid-template-columns:1fr}
}

/* Paginering onder het overzicht. */
.paginering{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin-top:clamp(34px,4vw,56px);border-top:1px solid var(--lijn);padding-top:24px}
.paginering .page-numbers{display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;
  font-size:var(--fs-klein);font-weight:600;color:var(--muted);border:1px solid var(--lijn);
  transition:border-color .2s ease,color .2s ease,background-color .2s ease}
.paginering a.page-numbers:hover{border-color:var(--lijn-sterk);color:var(--ink)}
.paginering .page-numbers.current{background:var(--inkt);border-color:var(--inkt);color:var(--papier)}
.paginering .page-numbers.dots{border-color:transparent}

/* ------------------------------------------------------------ artikel */
.artikel{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,.85fr);
  gap:clamp(30px,4.5vw,74px);align-items:start}
.artikel-zij{display:grid;gap:clamp(20px,2.4vw,30px);position:sticky;top:calc(var(--nav-h) + 20px)}

/* Lopende tekst van een artikel. Ruimer dan de rest van de site, want dit is
   het enige blok waar iemand echt gaat zitten lezen. */
.artikel-tekst,.prose{max-width:66ch;font-size:var(--fs-lead);line-height:1.72}
.artikel-tekst > div > * + *,.prose > * + *{margin-top:1.1em}
.artikel-tekst h2,.prose h2{font-size:var(--fs-h2s);line-height:1.1;margin-top:1.7em}
.artikel-tekst h3,.prose h3{font-size:var(--fs-h3);line-height:1.15;margin-top:1.5em}
.artikel-tekst h4,.prose h4{font-size:var(--fs-h4);margin-top:1.4em}
.artikel-tekst a,.prose a{color:var(--accent);border-bottom:1px solid var(--lijn-sterk)}
.artikel-tekst a:hover,.prose a:hover{color:var(--accent-hover);border-color:var(--accent-hover)}
.artikel-tekst ul,.artikel-tekst ol,.prose ul,.prose ol{padding-left:1.3em}
.artikel-tekst li + li,.prose li + li{margin-top:.5em}
.artikel-tekst li::marker,.prose li::marker{color:var(--accent)}
.artikel-tekst img,.artikel-tekst figure img,.prose img,.prose figure img{width:100%;height:auto;display:block}
.artikel-tekst figcaption,.prose figcaption{font-size:var(--fs-label);color:var(--muted);margin-top:8px}
.artikel-tekst blockquote,.prose blockquote{border-left:2px solid var(--accent);padding-left:clamp(18px,2vw,28px);
  font-family:'Oswald',sans-serif;font-weight:500;font-size:var(--fs-h3);line-height:1.2;
  text-transform:uppercase;letter-spacing:.005em}
.artikel-tekst blockquote p + p,.prose blockquote p + p{margin-top:.5em}
.artikel-tekst hr,.prose hr{border:0;border-top:1px solid var(--lijn);margin:2em 0}
.artikel-tekst code,.prose code{font-size:.92em;background:var(--bg-4);padding:2px 6px}

/* Lijstje met andere artikelen in de zijkolom. */
.zij-meer{border-top:1px solid var(--lijn);padding-top:20px}
.zij-meer h4{font-size:var(--fs-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px}
.zij-meer ul{list-style:none}
.zij-meer li + li{margin-top:14px;border-top:1px solid var(--lijn);padding-top:14px}
.zij-meer a{display:grid;gap:3px}
.zij-meer time{font-size:var(--fs-mini);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.zij-meer span{font-weight:600;font-size:var(--fs-klein);line-height:1.3;transition:color .2s ease}
.zij-meer a:hover span{color:var(--accent)}

.artikel-terug{margin-top:clamp(38px,4vw,60px);border-top:1px solid var(--lijn);padding-top:26px}

@media (max-width:860px){
  .artikel{grid-template-columns:1fr;gap:clamp(34px,5vw,52px)}
  .artikel-zij{position:static}
  .artikel-tekst,.prose{font-size:var(--fs-body)}
}

/* ------------------------------------------------------- blogslider
   Boven 960px passen er drie kaarten naast elkaar en blijft het een raster.
   Daaronder wordt het een horizontale slider met scroll-snap: native scrollen,
   dus vegen op een telefoon werkt zonder een regel JavaScript. De knoppen zijn
   er voor muis en toetsenbord en worden pas getoond als er echt iets te
   schuiven valt (zie site.js). */
.posts-slider{position:relative}
.posts-nav{display:none;gap:8px;justify-content:flex-end;margin-bottom:18px}
.posts-knop{display:grid;place-items:center;width:44px;height:44px;cursor:pointer;
  background:none;color:var(--ink);border:1px solid var(--lijn);border-radius:50%;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease,opacity .2s ease}
.posts-knop:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-zacht)}
.posts-knop:disabled{opacity:.32;cursor:default}

@media (max-width:960px){
  /* De JS zet het hidden-attribuut; zonder JS blijven de knoppen weg en blijft
     het schuiven met een veeg gewoon werken. */
  .posts-nav:not([hidden]){display:flex}
  .posts{display:flex;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-behavior:smooth;
    /* De rij loopt door tot de schermrand: de halve kaart die dan uitsteekt is
       het duidelijkste teken dat er meer staat. */
    margin-inline:calc(var(--wrap-pad) * -1);
    padding-inline:var(--wrap-pad);
    scroll-padding-inline:var(--wrap-pad);
    /* Schuifbalk weg; het schuiven blijft gewoon werken. */
    scrollbar-width:none;-ms-overflow-style:none}
  .posts::-webkit-scrollbar{display:none}
  .posts > .post{flex:0 0 calc((100% - var(--posts-gap)) / 2);scroll-snap-align:start}
}

@media (max-width:640px){
  /* Eén kaart tegelijk, met een strook van de volgende in beeld. */
  .posts > .post{flex-basis:82%}
}

/* Wie beweging beperkt houdt, krijgt een directe sprong in plaats van glijden. */
@media (prefers-reduced-motion: reduce){
  .posts{scroll-behavior:auto}
}