:root {
      --forest: #174B3A;
      --sage: #759B76;
      --ochre: #C99B42;
      --mist: #F3F5EE;
      --white: #FFFFFF;
      --ink: #18352b;
      --muted: #5f7168;
      --line: #dfe8dc;
      --shadow: 0 18px 45px rgba(23, 75, 58, .11);
      --radius: 22px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--white);
      font-family: Outfit, Arial, sans-serif;
      font-weight: 500;
      line-height: 1.6;
    }
    a { color: inherit; text-decoration: none; }
    .container { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }

    .topbar {
      background: var(--forest);
      color: var(--white);
      font-size: .9rem;
    }
    .topbar-inner { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; }
    .topbar a { color: #eaf2e6; opacity: .95; }

    header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(255,255,255,.94);
      border-bottom: 1px solid rgba(223,232,220,.9);
      backdrop-filter: blur(14px);
    }
    .nav { display: flex; align-items: center; justify-content: space-between; min-height: 82px; gap: 28px; }
    .brand { display: inline-flex; align-items: center; gap: 12px; min-width: max-content; }
    .brand-mark { width: 50px; height: 50px; }
    .brand-name { color: var(--forest); font-size: 1.28rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
    .brand-sub { display: block; margin-top: 5px; color: var(--forest); font-size: .68rem; font-weight: 500; letter-spacing: .04em; }
    nav { display: flex; align-items: center; gap: 24px; font-size: .96rem; }
    nav a { color: var(--forest); }
    nav a:hover { color: var(--ochre); }
    .nav-cta, .button { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; transition: transform .2s, box-shadow .2s, background .2s; }
    .nav-cta { padding: 11px 18px; background: var(--ochre); color: #fff; }
    .button { padding: 14px 23px; background: var(--ochre); color: #fff; box-shadow: 0 8px 20px rgba(201,155,66,.24); }
    .button:hover, .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(201,155,66,.3); }
    .button.secondary { background: transparent; color: var(--forest); border: 1px solid var(--forest); box-shadow: none; }

    .hero { overflow: hidden; background: var(--mist); }
    .hero-grid { display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 70px; min-height: 600px; padding: 78px 0 82px; }
    .eyebrow { margin: 0 0 15px; color: var(--ochre); font-size: .82rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
    h1, h2, h3 { color: var(--forest); line-height: 1.12; letter-spacing: -.035em; }
    h1 { max-width: 660px; margin: 0; font-size: clamp(2.9rem, 6vw, 5.3rem); font-weight: 800; }
    h2 { margin: 0 0 17px; font-size: clamp(2rem, 4vw, 3.35rem); font-weight: 800; }
    h3 { margin: 0 0 8px; font-size: 1.28rem; font-weight: 800; }
    .lead { max-width: 590px; margin: 25px 0 29px; color: var(--muted); font-size: 1.2rem; }
    .actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .hero-visual { position: relative; min-height: 390px; display: grid; place-items: center; }
    .hero-visual::before { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: rgba(117,155,118,.23); }
    .hero-card { position: relative; width: min(100%, 410px); padding: 30px; border-radius: 28px; background: var(--white); box-shadow: var(--shadow); transform: rotate(2deg); }
    .hero-card .official-logo { display: block; width: 100%; height: auto; margin-bottom: 10px; }
    .hero-card .logo-note { margin: 0; color: var(--muted); font-size: .85rem; }
    .hero-card::after { content: ""; position: absolute; right: -24px; bottom: -18px; width: 80px; height: 80px; border-radius: 50%; background: var(--ochre); opacity: .92; }

    section { padding: 100px 0; }
    .section-head { max-width: 690px; margin-bottom: 38px; }
    .section-head p { margin: 0; color: var(--muted); font-size: 1.08rem; }
    .values { background: var(--white); }
    .value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .value { min-height: 210px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
    .value:nth-child(2) { background: var(--mist); }
    .value:nth-child(3) { border-top: 5px solid var(--ochre); }
    .value-number { color: var(--ochre); font-size: .9rem; font-weight: 800; }
    .value p, .article p, .person p { margin: 0; color: var(--muted); }

    .split { background: var(--mist); }
    .split-grid { display: grid; grid-template-columns: .88fr 1.12fr; gap: 75px; align-items: center; }
    .statement-list { display: grid; gap: 13px; }
    .statement { display: flex; gap: 16px; padding: 18px 20px; border-radius: 15px; background: var(--white); border-left: 4px solid var(--sage); }
    .statement strong { color: var(--forest); }
    .statement span { color: var(--muted); }
    .quote { padding: 37px; border-radius: 25px; background: var(--forest); color: var(--white); box-shadow: var(--shadow); }
    .quote p { margin: 0 0 20px; font-size: 1.55rem; line-height: 1.35; font-weight: 600; }
    .quote small { color: #c9ddc9; }

    .people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .person { padding: 22px; border-radius: 18px; background: var(--mist); }
    .avatar { width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 50%; background: var(--sage); color: white; font-size: 1.2rem; font-weight: 800; }
    .person:nth-child(2) .avatar, .person:nth-child(4) .avatar { background: var(--ochre); }
    .person small { color: var(--sage); font-weight: 700; }

    .content { background: var(--mist); }
    .article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .article { overflow: hidden; border-radius: var(--radius); background: var(--white); }
    .article-image { height: 145px; background: linear-gradient(135deg, var(--sage), var(--forest)); position: relative; }
    .article:nth-child(2) .article-image { background: linear-gradient(135deg, var(--ochre), #e7c878); }
    .article:nth-child(3) .article-image { background: linear-gradient(135deg, #b7cbae, var(--sage)); }
    .article-image::after { content: ""; position: absolute; width: 100px; height: 100px; right: 25px; top: 23px; border: 2px solid rgba(255,255,255,.65); border-radius: 60% 40% 60% 40%; transform: rotate(35deg); }
    .article-body { padding: 23px; }
    .article-meta { display: block; margin-bottom: 9px; color: var(--ochre); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
    .article h3 { font-size: 1.35rem; }
    .read-more { display: inline-block; margin-top: 17px; color: var(--forest); font-weight: 800; }
    .podcasts { background: var(--white); }
    .podcast-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .podcast-card { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--mist); }
    .podcast-card h3 { margin-bottom: 7px; }
    .podcast-card p { min-height: 52px; margin: 0 0 18px; color: var(--muted); }
    .podcast-meta { display: block; margin-bottom: 8px; color: var(--ochre); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    audio { width: 100%; height: 42px; }

    .campaign { padding: 72px 0; background: var(--ochre); }
    .campaign-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
    .campaign h2 { max-width: 650px; margin: 0; color: var(--white); }
    .campaign p { max-width: 600px; margin: 12px 0 0; color: #fff8e8; }
    .campaign .button { background: var(--forest); box-shadow: none; }

    .newsletter { padding-bottom: 110px; }
    .newsletter-box { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; align-items: center; padding: 50px; border-radius: 28px; background: var(--mist); }
    .newsletter-box p { color: var(--muted); }
    form { display: flex; gap: 10px; }
    input { min-width: 0; flex: 1; padding: 15px 17px; border: 1px solid #cddccc; border-radius: 999px; background: white; font: inherit; }
    button { border: 0; cursor: pointer; font: inherit; }
    .form-note { min-height: 24px; margin: 9px 0 0; color: var(--forest); font-size: .9rem; }

    footer { padding: 38px 0; background: var(--forest); color: #dcebdd; }
    .footer-inner { display: flex; justify-content: space-between; gap: 30px; }
    footer strong { color: white; font-weight: 800; }
    footer a { color: #dcebdd; }
    .footer-links { display: flex; flex-wrap: wrap; gap: 18px; }

    @media (max-width: 850px) {
      .topbar-inner { justify-content: center; }
      .topbar-inner span:first-child { display: none; }
      nav { gap: 13px; font-size: .88rem; }
      nav a:nth-child(-n+3) { display: none; }
      .hero-grid, .split-grid, .newsletter-box { grid-template-columns: 1fr; }
      .hero-grid { gap: 20px; padding-top: 55px; }
      .hero-visual { min-height: 330px; }
      .value-grid, .article-grid, .podcast-grid { grid-template-columns: 1fr; }
      .people { grid-template-columns: repeat(2, 1fr); }
      .campaign-inner, .footer-inner { flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 520px) {
      .container { width: min(100% - 28px, 1160px); }
      .nav { min-height: 72px; gap: 10px; }
      .brand-name { font-size: 1.08rem; }
      .brand-mark { width: 42px; height: 42px; }
      .nav-cta { padding: 9px 13px; font-size: .82rem; }
      section { padding: 72px 0; }
      h1 { font-size: 3.05rem; }
      .hero-card { padding: 25px; }
      .people { grid-template-columns: 1fr; }
      .newsletter-box { padding: 27px; gap: 18px; }
      form { flex-direction: column; }
      input, form .button { width: 100%; }
    }
  
nav{flex-wrap:wrap;gap:16px}.nav{padding:12px 0}.page-body{max-width:800px;margin:auto;line-height:1.8}.page-body h2{font-size:1.8rem;margin-top:30px}.page-body a:not(.button){text-decoration:underline;text-decoration-color:var(--ochre);text-underline-offset:3px}.portrait{width:100%;height:230px;object-fit:cover;border-radius:14px;margin-bottom:20px}.detail-image{max-width:100%;max-height:480px;object-fit:contain}.statement strong{min-width:125px}.person .read-more{display:block}.article .portrait{border-radius:0}.hero-card::after{display:none}.hero-card{transform:none}.hero{padding:0}.hero-grid{padding:35px 0}.page-meta{color:#5f7168}.history-intro{max-width:760px}.timeline{display:grid;gap:0;margin-top:35px}.timeline-item{position:relative;padding:0 0 32px 34px;border-left:2px solid #c99b42}.timeline-item::before{content:"";position:absolute;left:-9px;top:5px;width:14px;height:14px;border-radius:50%;background:#174b3a;border:3px solid #f3f5ee}.timeline-item:last-child{border-left-color:transparent}.timeline-item h3{margin:4px 0 8px}.timeline-period{font-weight:800;color:#174b3a}.timeline-category{display:inline-block;margin-left:10px;color:#64766d;font-size:.85rem}.history-link{display:inline-block;margin-top:8px;font-weight:700}.podcast-archive-link{margin-top:24px}a:focus-visible{outline:3px solid #c99b42;outline-offset:4px}main>section:not(.hero){padding:78px 0;content-visibility:auto;contain-intrinsic-size:auto 720px}@media(max-width:850px){html{scroll-behavior:auto}header{backdrop-filter:none;background:#fff}nav a:nth-child(-n+3){display:inline}.nav{flex-direction:column;align-items:flex-start}.statement{flex-direction:column}.hero-visual::before{max-width:90%}main>section:not(.hero){padding:54px 0}.section-head{margin-bottom:28px}}@media(max-width:520px){main>section:not(.hero){padding:44px 0}.hero-grid{padding:28px 0}.hero-visual{min-height:260px}}
.person .portrait-frame{display:block;width:180px;height:180px;border-radius:50%;margin:0 0 20px;overflow:hidden}
.person .portrait-frame .portrait{display:block;width:100%;height:100%;margin:0;border-radius:0;object-fit:cover;object-position:var(--photo-x,50%) var(--photo-y,50%);transform:scale(var(--photo-zoom,1));transform-origin:var(--photo-x,50%) var(--photo-y,50%)}

.people{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}

@media(max-width:850px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.people{grid-template-columns:1fr}.person{text-align:center}.person .portrait-frame{margin-left:auto;margin-right:auto}}
.page-body.detail-personen .detail-image{display:block;width:220px;max-width:100%;height:auto;max-height:none;object-fit:contain}

.podcast-grid{align-items:start}
.podcast-card{display:grid;grid-template-columns:180px minmax(0,1fr);gap:18px;padding:18px}
.podcast-card.no-image{grid-template-columns:1fr}
.podcast-card .podcast-image{display:block;width:180px;height:180px;margin:0;border-radius:12px;object-fit:cover}
.podcast-content{min-width:0}
.podcast-card h3{margin:3px 0 7px}
.podcast-card .podcast-summary{min-height:0;margin:0 0 9px}
.podcast-player audio{display:block;width:100%;margin:2px 0 0}
.podcast-player a{display:inline-block;margin-top:7px}
@media(max-width:620px){.podcast-card{grid-template-columns:1fr}.podcast-card .podcast-image{width:min(100%,180px);height:auto;aspect-ratio:1}}

.hero h1{font-size:clamp(2.25rem,6vw,85px)}
.section-head h2{font-size:clamp(1.75rem,4vw,54px)}
.page-body>h1{font-size:clamp(1.75rem,5vw,42px)}
.page-body.detail-nieuws>h1{font-size:clamp(1.6rem,4vw,36px)}
.article h3{font-size:19px}
.value h3,.person h3,.podcast-card h3,.timeline-item h3{font-size:20px}
.value,.value:nth-child(2),.value:nth-child(3){background:var(--mist);border-top:1px solid var(--line)}
.archive-tools{display:flex;align-items:end;gap:18px;flex-wrap:wrap;margin:28px 0}
.archive-tools label{display:grid;gap:6px;color:var(--forest);font-weight:700}
.archive-tools select{min-width:180px;padding:11px 36px 11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--forest);font:inherit}
.archive-count{margin:0 0 11px;color:var(--muted)}
[hidden]{display:none!important}
@media(max-width:520px){.archive-tools{align-items:stretch;gap:12px}.archive-tools label,.archive-tools select{width:100%}}