/* Lettertypes staan op onze eigen server, niet bij Google.
   Reden: bij Google Fonts doet de browser van elke bezoeker een verzoek aan
   fonts.googleapis.com en fonts.gstatic.com, waarbij zijn IP-adres naar Google
   gaat. Lokaal hosten haalt die partij uit de bezoekersstroom en scheelt ook
   twee DNS-opzoekingen en twee verbindingen bij het laden.

   Instrument Sans is variabel (400-700 in één bestand) en Instrument Serif is
   als paar ontworpen; samen 74 KB. font-display: swap toont meteen tekst in de
   systeemletter en wisselt zodra het bestand er is. */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Palet "Klei": terracotta accent op warm papier.
     Alle kleuren op de site komen uit deze lijst; er staat verder nergens nog
     een kleurwaarde los in het bestand. Een richtingswijziging is dus een
     kwestie van dit blok aanpassen. */
  --color-primary: #b4451f;   /* knoppen, accenten */
  --color-primary-diep: #93381a; /* knop bij hover */
  --color-link: #8f3616;      /* linktekst: donkerder, want die heeft 4,5:1 nodig */

  --color-text: #5c534b;
  /* Net donker genoeg om ook op het zandvlak (--color-bg-alt) boven 4,5:1 te
     blijven; op #756b62 haalde de sectie-inleiding daar maar 4,34:1. */
  --color-muted: #6d635a;
  --color-dark: #1a1512;      /* koppen, voettekst, hero */
  --color-bg: #fbf7f2;        /* papier */
  --color-surface: #ffffff;   /* kaarten, die liggen op het papier */
  --color-bg-alt: #f3e9de;    /* afwisselende secties en logokaders */
  --color-line: #e7ded2;
  --color-line-diep: #d8c9b7; /* rand van een kaart bij hover */

  /* Voettekst staat op --color-dark; deze twee zijn de leesbare tinten daarop. */
  --color-op-donker: #c3b8ad;
  --color-op-donker-zacht: #9c9089;

  /* De serif is gereserveerd voor cijfers: jaartallen op de projectenpagina, de
     nummers van de basisvoorwaarden, de tijdlijn. Daar geeft hij karakter
     zonder de koppen een uitgeverslook te bezorgen. */
  --font-heading: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-kop-klein: var(--font-body);
  --max-width: 1140px;

  /* Eén gedeelde versnellingscurve en duur voor alle overgangen. Zo bewegen
     knoppen, kaarten, navigatie en de scroll-animaties op dezelfde manier. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --snel: 0.2s;
  /* Korter dan de 0,7s van voorheen. De referentiesite voelt levendig door
     korte overgangen, niet door lang binnenkomende elementen. */
  --traag: 0.45s;

  /* Verticale ademruimte per sectie, meeschalend met de vensterbreedte. */
  --sectie-ruimte: clamp(72px, 9vw, 128px);

  /* Typografische schaal: zeven stappen, en niets daarbuiten.
     Er stonden hier 23 verschillende groottes, waarvan er dertien tussen 12,8
     en 19,2px zaten - het verschil tussen twee ervan was 0,32px. Zulke sprongen
     leest niemand als hiërarchie; ze ogen alleen als onnauwkeurigheid.
     De grote stappen schalen mee met de vensterbreedte, en wel zo dat de
     onderlinge verhouding op elke breedte behouden blijft. Op 375px vielen
     paginatitel en sectietitel voordien allebei op 27,2px - dus precies weg
     op het scherm waar hiërarchie het hardst nodig is. */
  --t-1: 0.8125rem;                          /* 13px - bijschrift, meta */
  --t-2: 0.9375rem;                          /* 15px - kleine tekst in kaarten */
  --t-3: 1rem;                               /* 16px - broodtekst */
  --t-4: 1.1875rem;                          /* 19px - kaarttitel, inleiding */
  --t-5: clamp(1.375rem, 2.1vw, 1.75rem);    /* 22-28px - sectietitel */
  --t-6: clamp(1.625rem, 3vw, 2.25rem);      /* 26-36px - paginatitel */
  --t-7: clamp(2rem, 4.6vw, 3.375rem);       /* 32-54px - hero */
}

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

html {
  scroll-behavior: smooth;
  /* De site heeft maar een ontwerp: een licht. Zonder deze regel darkent de browser
     in donkere modus zelf het canvas, terwijl onze tekstkleuren donker blijven -
     dan staat bijna-zwarte tekst op een zwarte achtergrond. */
  color-scheme: only light;
  background-color: var(--color-bg);
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Expliciet, niet transparant: anders schijnt het canvas van de browser door. */
  background-color: var(--color-bg);
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Koppen staan in de schreefloze letter, niet in de serif. Een display-serif
   geeft de site een uitgeverskarakter dat vloekt met de rest; halfvet en strak
   gespatieerd sluit beter aan bij de opmaak. De serif blijft wel in gebruik,
   maar uitsluitend voor cijfers - zie .jaar-kop en .voorwaarde__nr. */
h1, h2 {
  font-family: var(--font-body);
  color: var(--color-dark);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.14;
}

/* h3 is bijna altijd een kaarttitel of een tussenkop van 17 tot 20 px. Daar
   houdt de serif niet stand; de sans in halfvet leest daar beter. */
h3 {
  font-family: var(--font-kop-klein);
  color: var(--color-dark);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--snel) var(--ease);
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(251, 247, 242, 0.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--color-line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Houdt de naam los van het menu; zonder deze gap raken ze elkaar bijna
     op de breedtes waar het menu nog horizontaal staat. */
  gap: 48px;
  height: 80px;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--color-dark);
  flex-shrink: 0;
}

.header__logo-mark {
  height: 40px;
  width: auto;
  flex-shrink: 0;
}

/* De naam naast het merkteken: de afkorting groot in de kopletter, de voluit
   geschreven naam eronder als kleinkapitaal. Zo staat er een echte lockup in
   plaats van twee regels kleine tekst. */
.header__logo-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Het merkteken leest zelf al C-O-I, dus de afkorting hoeft er niet naast.
   Wat er wel bij moet, is waar die drie letters voor staan. */
.header__logo-sub {
  font-size: var(--t-1);
  font-weight: 600;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  line-height: 1.3;
  max-width: 20ch;
  color: var(--color-muted);
}

.nav__list {
  display: flex;
  gap: 26px;
  list-style: none;
}

.nav__list a {
  color: var(--color-dark);
  font-weight: 500;
  font-size: var(--t-2);
  transition: color var(--snel) var(--ease);
}

.nav__list a:hover {
  color: var(--color-primary);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-dark);
  margin: 0 auto;
}

/* Hero. Geen foto meer: een rustig verloop in de eigen kleuren, met een
   zachte lichtplek zodat het vlak niet dood aanvoelt. Geen achtergrondbeeld
   betekent ook ruim een megabyte minder om te laden. */
.hero {
  position: relative;
  /* Bewust laag gehouden: de bezoeker moet "Wie we zijn" al zien staan zonder
     eerst een schermvullend beeld weg te scrollen. */
  min-height: min(56vh, 480px);
  display: flex;
  align-items: center;
  padding: 128px 0 72px;
  color: #fff;
  background:
    radial-gradient(115% 95% at 16% 10%, rgba(180, 69, 31, 0.34) 0%, rgba(180, 69, 31, 0) 60%),
    linear-gradient(152deg, #2a2320 0%, #1a1512 60%, #140f0d 100%);
  overflow: hidden;
}

/* LET OP: dit element draagt óók de klasse container. Zet je hier een kleinere
   max-width, dan overschrijft die de 1140px van de container, en omdat de
   container margin: 0 auto heeft schuift het blok meteen naar het midden. Zo
   stond de herotekst 190px verder naar rechts dan de rest van de pagina.
   De lijnlengte hoort dus op h1 en p, niet op dit blok. */
.hero__content {
  position: relative;
  z-index: 1;
  /* .hero is een flexbox, dus dit blok is een flex-item. Zonder width: 100%
     krimpt het tot zijn inhoud en centreren de auto-marges van .container het
     midden in het scherm - precies wat we hier niet willen. */
  width: 100%;
}

.hero h1 {
  color: #fff;
  font-size: var(--t-7);
  margin-bottom: 22px;
  max-width: 21ch;
}

.hero p {
  font-size: var(--t-4);
  margin-bottom: 32px;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.86);
}

/* De hero staat bovenaan het scherm en heeft dus geen scroll-trigger nodig;
   die komt gewoon binnen bij het laden. */
.js-reveal .hero__content > * {
  animation: hero-in 0.8s var(--ease) both;
}

.js-reveal .hero__content > *:nth-child(2) { animation-delay: 0.08s; }
.js-reveal .hero__content > *:nth-child(3) { animation-delay: 0.16s; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.btn {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 15px 34px;
  border-radius: 4px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--t-3);
  transition: background var(--snel) var(--ease),
              transform var(--snel) var(--ease),
              box-shadow var(--snel) var(--ease);
}

.btn:hover {
  background: var(--color-primary-diep);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(29, 27, 26, 0.16);
}

.btn:active {
  transform: translateY(0);
}

/* Sections */
.section {
  padding: var(--sectie-ruimte) 0;
}

.section--alt {
  background: var(--color-bg-alt);
}

/* Alles lijnt links uit. De rasters eronder (kaarten, bestuurders, projecten)
   beginnen aan de linkerrand van de container; een gecentreerde titel zou daar
   los boven zweven. Gecentreerde lopende tekst leest bovendien trager, omdat
   het oog elke regel op een andere plek moet terugvinden. */
.section__title {
  font-size: var(--t-5);
  margin-bottom: 40px;
  max-width: 24ch;
}

.section__intro {
  margin-top: -26px;
  margin-bottom: 44px;
  max-width: 62ch;
  color: var(--color-muted);
}

/* About */
.about {
  max-width: 760px;
  margin: 0 auto;
}

.about p {
  margin-bottom: 18px;
}

.about ul {
  margin: 0 0 18px 20px;
}

.about li {
  margin-bottom: 8px;
}

/* Projects */
/* Twee kolommen, geen drie. Met drie kolommen bleef 54% van het raster leeg:
   vijf van de acht jaargroepen hebben maar één project, dus geen enkele rij
   vulde zich. Een raster ontleent zijn kracht aan volle rijen; zodra de inhoud
   de kolomindeling structureel niet haalt, werkt het tegen de inhoud in.
   min(100%, ...) houdt het bruikbaar op een smal scherm. */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 28px;
}

.project-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(29, 27, 26, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform var(--snel) var(--ease),
              box-shadow var(--snel) var(--ease),
              border-color var(--snel) var(--ease);
}

/* Bewust GEEN hover-effect: er zit geen link in deze kaart, dus een lift zou
   klikbaarheid beloven die er niet is. Hover hoort te betekenen "hier kan je
   klikken"; anders is het versiering die de bezoeker op het verkeerde been zet.
   Zodra er per project een verwijzing naar de partnersite bij komt, mag de
   hover van .card hier gewoon overgenomen worden. */

/* Elk logo staat in hetzelfde lichtgrijze kader - een lichte drager, want zo
   goed als elk merk levert zijn logo in een donkere versie aan. Het grijs zet
   het kader vanzelf af tegen de witte kaart eronder, dus geen randlijn nodig. */
.project-card__logo {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  padding: 24px;
}

.project-card__logo img {
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
}

/* Voor brede woordmerken (bv. Syndicate One, 208x26): die zijn van nature laag
   en zouden anders als een streepje in het midden van het kader hangen. Laat ze
   de volle breedte nemen in plaats van hun eigen pixelbreedte. */
.project-card__logo--wide img {
  width: 100%;
  height: auto;
}

/* Drie merken leverden hun logo enkel als zuiver wit silhouet op transparant
   (gemeten: maximale verzadiging <= 0,03, dus echt monochroom). Omkeren geeft
   exact dezelfde vorm in zwart en houdt ze leesbaar op het witte kader. Gebruik
   dit uitsluitend voor monochrome logo's - bij kleur verschuift de tint. */
.project-card__logo--invert img {
  filter: invert(1);
}

.project-card__body {
  padding: 20px 24px 24px;
}

.project-card__body h3 {
  font-size: var(--t-4);
  margin-bottom: 10px;
}

/* Jaartal als tussenkop over de volle breedte van het raster. Zo leest de
   pagina als een tijdlijn van 2013 tot vandaag in plaats van als een catalogus.
   De kop staat in het raster zelf, dus er is geen extra omhullende laag nodig. */
.jaar-kop {
  grid-column: 1 / -1;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--t-5);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 22px;
}

.jaar-kop:first-child {
  margin-top: 0;
}

/* Lijn die vanaf het jaartal doorloopt tot de rechterrand. */
.jaar-kop::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-line);
}

.project-card__body p {
  font-size: var(--t-2);
  color: var(--color-text);
}

/* Oproep. Sluit de startpagina af met de vraag die nergens anders prominent
   stond: heeft u een initiatief? Donker vlak, zodat het losstaat van de rest. */
/* Op het zandvlak in plaats van donker. Donker liep naadloos over in de
   voettekst - samen 617px aaneengesloten bijna-zwart - en dan leest de bezoeker
   de enige plek waar de site iets vraagt als voettekst, dus als chroom. */
.oproep {
  background: var(--color-bg-alt);
  border-top: 3px solid var(--color-primary);
}

.oproep__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
}

.oproep__tekst {
  max-width: 56ch;
}

.oproep h2 {
  font-size: var(--t-5);
  margin-bottom: 10px;
}

.oproep p {
  color: var(--color-muted);
}

.oproep .btn {
  flex-shrink: 0;
}

/* Timeline */
/* Tijdvakken op de historiekpagina. Gebruikt dezelfde .jaar-kop als de
   projectenpagina; er waren voordien twee verschillende vormen voor hetzelfde
   idee (verticale lijn met bol tegenover doorlopende lijn), en dan is het
   geen patroon meer. */
.tijdvakken {
  display: grid;
  gap: 4px;
}

.tijdvak {
  max-width: 68ch;
  padding-bottom: 8px;
}

.tijdvak h3 {
  font-size: var(--t-4);
  margin-bottom: 8px;
}

/* Board */
/* Kleiner weergegeven dan voorheen. De bronbestanden zijn 240x240; op 196 CSS-px
   vraagt een scherm met dubbele pixeldichtheid er 392 van, en dat is zichtbaar
   zacht. Door het raster op 900px te begrenzen blijven het twee rijen van vijf,
   maar zakt de weergave naar ongeveer 157px - veel dichter bij de bron. */
.board-grid {
  display: grid;
  max-width: 900px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px;
}

.board-member {
  text-align: left;
}

.board-member img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 14px;
  background: var(--color-bg-alt);
}

.board-member h3 {
  font-size: var(--t-3);
  margin-bottom: 4px;
}

.board-member p {
  font-size: var(--t-1);
  color: var(--color-primary);
  font-weight: 600;
}

/* Het LinkedIn-teken staat als SVG in de pagina zelf, niet uit een
   iconenbibliotheek. Zo blijft het bij één bestand minder om te laden en erft
   het gewoon de tekstkleur mee. */
.board-member__li {
  display: inline-flex;
  margin-top: 9px;
  color: var(--color-muted);
  transition: color var(--snel) var(--ease), transform var(--snel) var(--ease);
}

.board-member__li svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.board-member__li:hover {
  color: var(--color-primary);
  transform: translateY(-1px);
}

/* Contact */
.contact {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
}

.contact__info h3 {
  font-size: var(--t-4);
  margin-bottom: 6px;
  margin-top: 20px;
}

.contact__info h3:first-child {
  margin-top: 0;
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact__form label {
  font-weight: 600;
  font-size: var(--t-2);
  margin-top: 10px;
}

.contact__form input,
.contact__form textarea {
  padding: 12px 14px;
  border: 1px solid var(--color-line);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: var(--t-2);
}

.contact__form input:focus,
.contact__form textarea:focus {
  outline: 2px solid var(--color-primary);
}

.contact__form .btn {
  margin-top: 16px;
  align-self: flex-start;
}

.contact__form-note {
  font-size: var(--t-1);
  color: var(--color-muted);
  margin-top: 10px;
}

/* Footer. Stond als enige blok van de hele site gecentreerd, terwijl links
   uitlijnen elders het uitgangspunt is. Nu drie kolommen die op een smal
   scherm onder elkaar vallen; dat scheelt meteen hoogte. */
.footer {
  background: var(--color-dark);
  color: #fff;
  padding: 44px 0;
  font-size: var(--t-1);
}

.footer__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 20px 48px;
}

.footer__legal {
  color: var(--color-op-donker);
  line-height: 1.7;
}

.footer__links {
  justify-self: end;
  text-align: right;
}

/* Alle links in de voettekst wit: het merkblauw haalt op de donkere
   achtergrond maar 2,2:1 en is daar praktisch onleesbaar. */
.footer a {
  color: #fff;
  text-decoration: underline;
}

/* Het auteursrecht loopt over de volle breedte onder de andere drie, met een
   dunne scheiding erboven. */
.footer__copy {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-op-donker-zacht);
}

.footer__logo {
  height: 34px;
  width: auto;
}

/* Scroll-animatie.

   De klasse js-reveal wordt door script.js op <html> gezet, en alleen wanneer
   JavaScript draait en de bezoeker geen verminderde beweging heeft gevraagd.
   Zonder die klasse staat alles gewoon zichtbaar: valt het script uit, dan
   blijft de pagina leesbaar in plaats van leeg. Dat geldt ook voor zoekmachines. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--traag) var(--ease),
              transform var(--traag) var(--ease);
  transition-delay: var(--reveal-vertraging, 0s);
}

/* Wie beweging heeft uitgezet, krijgt ook hier niets. Dubbel op met de check in
   het script, maar zo blijft het waar als iemand later de klasse anders zet. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js-reveal .reveal,
  .js-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js-reveal .hero__content > * {
    animation: none;
  }

  .btn:hover,
  .card:hover,
  .project-card:hover {
    transform: none;
  }
}

/* Page hero (binnenpagina's) - compacter dan de hero op de homepage,
   met extra ruimte bovenaan omdat de header fixed staat. */
.page-hero {
  position: relative;
  padding: 150px 0 70px;
  background: var(--color-dark);
  background-size: cover;
  background-position: center;
  color: #fff;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  /* Zelfde recept en dezelfde dosering als de hero op de startpagina. Voordien
     stond hier bijna dubbel zoveel terracotta (0,62 tegenover 0,34), waardoor
     de hero die het minst hoeft te dragen het hardst schreeuwde. */
  background:
    radial-gradient(115% 95% at 16% 10%, rgba(180, 69, 31, 0.34) 0%, rgba(180, 69, 31, 0) 60%),
    linear-gradient(152deg, #2a2320 0%, #1a1512 60%, #140f0d 100%);
}

/* Zelfde valkuil als bij .hero__content: dit is ook een container, dus geen
   max-width hier. De lijnlengte staat op de h1 en de p eronder. */
.page-hero__content {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  max-width: 20ch;
}

.page-hero p {
  max-width: 58ch;
}

.page-hero h1 {
  color: #fff;
  font-size: var(--t-6);
  margin-bottom: 14px;
}

.page-hero p {
  font-size: var(--t-4);
}

/* Breadcrumb */
.breadcrumb {
  font-size: var(--t-1);
  color: var(--color-muted);
  padding: 18px 0 0;
}

.breadcrumb a {
  color: var(--color-muted);
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

/* Actieve navigatie-link */
.nav__list a.is-active {
  color: var(--color-primary);
  font-weight: 600;
}

/* Kaartjes met doorverwijzingen (homepage) */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(29, 27, 26, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform var(--snel) var(--ease),
              box-shadow var(--snel) var(--ease),
              border-color var(--snel) var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  border-color: var(--color-line-diep);
  box-shadow: 0 14px 30px rgba(29, 27, 26, 0.10);
}

/* De hele kaart is klikbaar, niet alleen dat ene zinnetje onderaan. Het
   onzichtbare vlak van deze ::after legt zich over de kaart, zodat de hover van
   .card ook echt een klik oplevert. Zo blijft de belofte van die hover waar,
   en hoeft er niets aan de HTML te veranderen. */
.card__link {
  display: inline-block;
  transition: transform var(--snel) var(--ease);
}

.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card:hover .card__link {
  transform: translateX(4px);
}

/* Toetsenbordgebruikers zien de kaart oplichten in plaats van alleen de link. */
.card:focus-within {
  border-color: var(--color-line-diep);
  box-shadow: 0 14px 30px rgba(29, 27, 26, 0.10);
}

.card__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.card h3 {
  font-size: var(--t-4);
  margin-bottom: 10px;
}

.card p {
  font-size: var(--t-2);
  margin-bottom: 18px;
  flex-grow: 1;
}

.card__link {
  font-weight: 600;
  font-size: var(--t-2);
}

/* Identiteitskader (rechtsvorm, ondernemingsnummer, zetel) */
.identity {
  max-width: 760px;
  margin: 40px auto 0;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: 4px solid var(--color-primary);
  border-radius: 6px;
  padding: 24px 28px;
}

.identity h3 {
  font-size: var(--t-4);
  margin-bottom: 12px;
}

.identity dl {
  display: grid;
  grid-template-columns: minmax(160px, auto) 1fr;
  gap: 8px 20px;
  font-size: var(--t-2);
}

.identity dt {
  font-weight: 600;
  color: var(--color-dark);
}

.identity dd {
  margin: 0;
}

/* Lopende tekst (over ons, criteria, juridische pagina's) */
.prose {
  max-width: 68ch;
  margin: 0;
}

.prose h2 {
  font-size: var(--t-5);
  margin: 40px 0 14px;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  font-size: var(--t-4);
  margin: 28px 0 10px;
}

.prose p {
  margin-bottom: 16px;
}

.prose ul,
.prose ol {
  margin: 0 0 16px 22px;
}

.prose li {
  margin-bottom: 8px;
}

/* Brede tabellen scrollen binnen hun eigen kader; de pagina zelf mag
   nooit horizontaal scrollen op een smal scherm. */
.table-scroll {
  overflow-x: auto;
  margin-bottom: 20px;
}

.prose table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  margin-bottom: 0;
  font-size: var(--t-2);
}

.prose th,
.prose td {
  border: 1px solid var(--color-line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.prose th {
  background: var(--color-bg-alt);
  font-weight: 600;
  color: var(--color-dark);
}

.prose__updated {
  font-size: var(--t-1);
  color: var(--color-muted);
  margin-bottom: 30px;
}

/* De drie basisvoorwaarden. Als opsommingstekens onder elkaar lezen ze als een
   bijzaak; als genummerde blokken naast elkaar zie je meteen dat het er drie
   zijn en dat ze even zwaar wegen. */
.voorwaarden {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin: 34px 0 40px;
}

.voorwaarde {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  padding: 26px 24px 24px;
}

.voorwaarde__nr {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--t-6);
  line-height: 1;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.voorwaarde h3 {
  font-size: var(--t-4);
  margin-bottom: 8px;
}

.voorwaarde p {
  font-size: var(--t-2);
  color: var(--color-text);
}

/* Vormen van steun. Was een tabel van drie kolommen die op een telefoon moest
   scrollen; als blokken past dezelfde inhoud op elk scherm zonder scrollen. */
.steunvormen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
  margin: 30px 0 44px;
}

.steunvorm {
  background: var(--color-bg-alt);
  border-radius: 10px;
  padding: 26px 24px;
}

.steunvorm h3 {
  font-size: var(--t-4);
  margin-bottom: 10px;
}

.steunvorm p {
  font-size: var(--t-2);
}

.steunvorm__wanneer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-line-diep);
  color: var(--color-muted);
}

.steunvorm__wanneer span {
  font-weight: 700;
  color: var(--color-dark);
}

/* De vier werkdomeinen op de over-onspagina. Stonden als opsomming onder
   elkaar in één tekstkolom, waardoor de rechterhelft van de pagina over de
   volle hoogte leeg bleef. */
.domeinen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}

.domein {
  padding-top: 18px;
  border-top: 2px solid var(--color-primary);
}

.domein h3 {
  font-size: var(--t-4);
  margin-bottom: 8px;
}

.domein p {
  font-size: var(--t-2);
  color: var(--color-text);
}

/* Documentenlijst */
.doc-list {
  max-width: 760px;
  margin: 0;
  list-style: none;
}

.doc-list li {
  border-bottom: 1px solid var(--color-line);
  /* Negatieve marge zodat de hoverbalk iets breder is dan de tekst en de
     tekst zelf toch op de linkerrand van de pagina blijft staan. */
  padding: 18px 14px;
  margin: 0 -14px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 16px;
  transition: background var(--snel) var(--ease);
}

.doc-list li:first-child {
  border-top: 1px solid var(--color-line);
}

/* Dit zijn links, en ze moeten er ook zo uitzien. Ze stonden in dezelfde kleur
   als een gewone kop, zonder onderstreping en zonder hover - op de ene pagina
   waar alle inhoud uit verwijzingen bestaat. */
.doc-list__title {
  font-weight: 600;
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-line-diep);
  flex-grow: 1;
  transition: color var(--snel) var(--ease),
              text-decoration-color var(--snel) var(--ease);
}

.doc-list__title:hover {
  color: var(--color-primary);
  text-decoration-color: currentColor;
}

.doc-list li:hover {
  background: var(--color-bg-alt);
}

.doc-list__meta {
  font-size: var(--t-1);
  color: var(--color-muted);
}

/* Projectkaart: maatschappelijke opbrengst eerst, rol als voetregel */
.project-card__role {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-line);
  font-size: var(--t-1);
  color: var(--color-muted);
}

/* Responsive */
@media (max-width: 860px) {
  .page-hero {
    padding: 120px 0 50px;
  }

  .identity dl {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .identity dd {
    margin-bottom: 10px;
  }

  .nav {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    background: var(--color-bg);
    box-shadow: 0 6px 14px rgba(29, 27, 26, 0.10);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .nav.is-open {
    /* Ruim genoeg voor de zes menu-items (gemeten: 339px bij 375px breed). */
    max-height: 420px;
  }

  .nav__list {
    flex-direction: column;
    gap: 0;
    padding: 10px 24px;
  }

  .nav__list li {
    border-bottom: 1px solid var(--color-line);
  }

  .nav__list a {
    display: block;
    padding: 14px 0;
  }

  .nav-toggle {
    display: flex;
  }

  /* Op een smal scherm blijft alleen het merkteken staan; de voluit geschreven
     naam past er niet naast het menuknopje. */
  .header__logo-sub {
    display: none;
  }

  .contact {
    grid-template-columns: 1fr;
  }

  /* Voettekst onder elkaar in plaats van in drie kolommen. */
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .footer__links {
    justify-self: start;
    text-align: left;
  }
}