/* ==========================================================================
   Basis — reset, typografie, layout, toegankelijkheid
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font:var(--type-body);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  margin:0;
  color:var(--text-heading);
  font-family:var(--font-display);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-tight);
  line-height:var(--leading-snug);
  text-wrap:balance;
}
h1{font-size:var(--t-display);line-height:.96;letter-spacing:-0.035em}
h2{font-size:var(--t-h2);line-height:1;letter-spacing:-0.03em}
h3{font-size:var(--t-h3)}
h4{font-size:var(--t-h4)}

p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}

a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}

img,svg{max-width:100%;display:block}
::selection{background:var(--lime-200);color:var(--teal-900)}

:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-xs)}

/* Cijfers lopen altijd in kolommen gelijk */
.num,table,.stat__v,time{font-variant-numeric:tabular-nums}

/* ---- Layout ------------------------------------------------------------ */

.wrap{width:100%;max-width:var(--page-max);margin-inline:auto;padding-inline:var(--page-pad)}
.wrap--narrow{max-width:820px}

/* ---- Banden ------------------------------------------------------------
   Elke sectie is een band van rand tot rand. Twee banden naast elkaar hebben
   nooit dezelfde ondergrond — dat is waar het contrast vandaan komt nu de
   pagina wit is en kaarten niet meer los komen te staan.
   ---------------------------------------------------------------------- */

/* Geen overflow:hidden op .band zelf — dat breekt position:sticky binnen de
   band. Alleen de banden met een decoratieve laag klippen. */
.band{position:relative;padding-block:clamp(72px,9vw,136px);--band-bg:var(--surface-page)}
.band--pattern,.band--watermark{overflow:hidden}
.band--hero{padding-block:clamp(48px,5vw,80px) clamp(64px,7vw,104px)}
/* Paginakoppen: dichter op de header dan een gewone band */
.band--tight{padding-block:calc(var(--header-h) + clamp(28px,3.5vw,52px)) clamp(40px,5vw,72px)}
.band > .wrap{position:relative;z-index:1}

/* Donkere band. Wisselt af met wit — dat is het ritme van de site: je gaat de
   nacht in en weer uit. */
.band--dark{background:var(--teal-900);color:rgba(255,255,255,.72);--band-bg:var(--teal-900)}
.band--dark h2,.band--dark h3,.band--dark h4{color:#fff}
.band--dark .lede{color:rgba(255,255,255,.76)}
.band--dark .caption,.band--dark .muted,.band--dark .small{color:rgba(255,255,255,.5)}
.band--dark .second{color:var(--lime-300)}
.band--dark a{color:var(--lime-300)}
.band--dark a:hover{color:var(--lime-200)}
.band--deep{background:var(--gradient-teal);color:var(--text-on-inverse-muted);--band-bg:var(--teal-600)}
.band--ink{background:var(--teal-900);color:var(--text-on-inverse-muted);--band-bg:var(--teal-900)}
.band--deep h2,.band--deep h3,.band--deep h4,
.band--ink h2,.band--ink h3,.band--ink h4{color:#fff}

.band--lime{background:var(--surface-accent);color:var(--teal-800);--band-bg:var(--lime-300)}
.band--lime h2,.band--lime h3,.band--lime h4{color:var(--teal-900)}

.band--ice{background:var(--gradient-ice);--band-bg:#F1F7F8}
.band--soft{background:var(--neutral-50);--band-bg:var(--neutral-50)}

/* ---- Volvlak hero -------------------------------------------------------
   Beeld van rand tot rand, tekst linksonder onder --gradient-protect. Zolang
   er geen merkfotografie is, draagt het tealverloop de hero; zet een foto in
   .hero-full__img en het werkt zonder verdere wijziging.
   ---------------------------------------------------------------------- */

.hero-full{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(86vh,840px);display:flex;align-items:flex-end;
  /* Bovenmarge houdt de kop weg bij de zwevende header. */
  padding-block:calc(var(--header-h) + clamp(40px,6vw,88px)) clamp(56px,7vw,88px);
  background:var(--gradient-teal);color:var(--text-on-inverse-muted);
}
.hero-full__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-full::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--gradient-protect);
}
.hero-full h1{color:#fff}
.hero-full .second{color:var(--lime-300)}
.hero-full .lede{color:rgba(255,255,255,.82)}
/* ch rekent met de bodymaat; op een kop van 104px is 56ch veel te smal */
.hero-full .measure{max-width:min(100%,1020px)}

/* Het chevronpatroon uit de merkexpressie, tegel 44px. Textuur, geen dessin:
   het moet je pas opvallen als je ernaar kijkt. */
.band--pattern::before{
  content:"";position:absolute;inset:0;
  background:url("pattern-chevrons.svg") repeat;background-size:44px 44px;
  opacity:.28;pointer-events:none;
  mask-image:linear-gradient(105deg,#000 0%,transparent 62%);
}

/* De mark als aangesneden watermerk — max 240%, opaciteit ≤22% */
.band--watermark::after{
  content:"";position:absolute;top:50%;right:-6%;
  width:min(52vw,620px);aspect-ratio:1;translate:0 -50%;
  background:url("watermark-mark.svg") no-repeat center/contain;
  opacity:.075;pointer-events:none;
}
@media (max-width:900px){
  .band--watermark::after{right:-34%;width:80vw;opacity:.06}
}

.panel{
  background:var(--surface-card);
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-card);
  padding:clamp(28px,4vw,64px);
}

.grid{display:grid;gap:clamp(20px,3vw,40px)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.grid--head{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:end}
/* Hero: de kop krijgt de ruimte, de rapportagekaart houdt een vaste maat */
.grid--hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);align-items:start}

@media (max-width:980px){
  .grid--hero{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .grid--3,.grid--4,.grid--split,.grid--head{grid-template-columns:minmax(0,1fr)}
  .grid--head{align-items:start}
}

.measure{max-width:56ch}
.measure-lg{max-width:min(100%,940px)}
@media (max-width:560px){
  .grid--2{grid-template-columns:minmax(0,1fr)}
  :root{--page-pad:20px}
}

/* ---- Tekstrollen ------------------------------------------------------- */

.lede{font-size:var(--t-lede);line-height:1.5;color:var(--text-body);max-width:56ch}
.small{font-size:var(--text-sm);line-height:var(--leading-relaxed)}
.caption{font-size:var(--text-xs);line-height:var(--leading-normal);color:var(--text-muted)}
.muted{color:var(--text-muted)}

/* De tweede regel van een tweeregelige kop. Draagt de herkadering. */
.second{display:block;color:var(--teal-500)}
.band--deep .second,.band--ink .second{color:var(--lime-300)}
.band--lime .second{color:var(--teal-500)}

.stack>*+*{margin-top:var(--space-4)}
.stack-lg>*+*{margin-top:var(--space-6)}

/* ---- Toegankelijkheid -------------------------------------------------- */

.skip{
  position:absolute;left:var(--space-4);top:-100px;z-index:100;
  background:var(--teal-500);color:#fff;padding:12px 20px;
  border-radius:var(--radius-pill);font:var(--type-label);
  transition:top var(--dur-fast) var(--ease-standard);
}
.skip:focus{top:var(--space-4);color:#fff;text-decoration:none}

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---- Motion ------------------------------------------------------------ */

.js [data-reveal]{opacity:0;transform:translateY(14px)}
.js [data-reveal].is-in{
  opacity:1;transform:none;
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .js [data-reveal]{opacity:1;transform:none}
}