:root {
      --bg: #f6f0e6;
      --paper: #fffaf2;
      --ink: #171717;
      --deep: #142033;
      --muted: #625d54;
      --soft: #eee3d2;
      --line: #d8cdbb;
      --gold: #9b7944;
      --white: #fff;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font-family: Inter, "Helvetica Neue", Arial, sans-serif;
      line-height: 1.62;
      letter-spacing: -0.01em;
    }

    a { color: inherit; text-decoration: none; }

    header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(246,240,230,.92);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--line);
    }

    .nav {
      max-width: 1180px;
      margin: 0 auto;
      padding: 18px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }

    .brand {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 23px;
      letter-spacing: -.04em;
      color: var(--deep);
    }

    .links {
      display: flex;
      align-items: center;
      gap: 24px;
      font-size: 12px;
      letter-spacing: .11em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .links a:hover { color: var(--ink); }

    .nav-cta {
      border: 1px solid var(--ink);
      padding: 9px 14px;
      color: var(--ink);
    }

    .nav-cta:hover {
      background: var(--ink);
      color: var(--paper) !important;
    }

    section {
      max-width: 1180px;
      margin: 0 auto;
      padding: 92px 28px;
    }

    h1, h2, h3 {
      font-family: Georgia, "Times New Roman", serif;
      color: var(--deep);
      font-weight: 400;
      letter-spacing: -.055em;
      margin: 0;
    }

    h1 {
      font-size: clamp(52px, 8vw, 110px);
      line-height: .9;
      max-width: 980px;
    }

    h2 {
      font-size: clamp(40px, 5.4vw, 76px);
      line-height: .98;
      max-width: 880px;
    }

    h3 {
      font-size: 30px;
      line-height: 1.08;
    }

    p {
      font-size: 18px;
      color: var(--muted);
      margin: 0 0 22px;
      max-width: 720px;
    }

    .eyebrow {
      font-size: 12px;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--gold);
      font-weight: 700;
      margin: 0 0 24px;
    }

    .hero {
      min-height: calc(100vh - 70px);
      display: grid;
      grid-template-columns: 1.08fr .92fr;
      gap: 70px;
      align-items: center;
      padding-top: 105px;
      padding-bottom: 78px;
    }

    .hero-lead {
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(23px, 2.6vw, 35px);
      line-height: 1.25;
      color: #312f2a;
      letter-spacing: -.035em;
      margin-top: 36px;
      max-width: 760px;
    }

    .hero-support {
      margin-top: 28px;
      font-size: 18px;
      color: var(--muted);
    }

    .button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 38px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      padding: 15px 22px;
      border: 1px solid var(--ink);
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .1em;
      transition: .18s ease;
    }

    .btn.primary {
      background: var(--ink);
      color: var(--paper);
    }

    .btn:hover {
      background: var(--deep);
      border-color: var(--deep);
      color: var(--paper);
    }

    .hero-card {
      background: var(--deep);
      color: var(--paper);
      padding: 38px;
      min-height: 560px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 0 26px 80px rgba(20,32,51,.18);
    }

    .hero-card small {
      color: #d3bc91;
      font-size: 12px;
      letter-spacing: .15em;
      text-transform: uppercase;
    }

    .hero-card h2 {
      color: var(--paper);
      font-size: 48px;
      margin: 20px 0;
    }

    .hero-card p {
      color: #d9d0c1;
      font-size: 17px;
    }

    .btn.light {
      border-color: var(--paper);
      color: var(--paper);
    }

    .btn.light:hover {
      background: var(--paper);
      color: var(--deep);
      border-color: var(--paper);
    }

    .strip {
      max-width: none;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: 0;
    }

    .strip-inner {
      max-width: 1180px;
      margin: 0 auto;
      padding: 34px 28px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    .strip-item {
      border-left: 1px solid var(--line);
      padding-left: 22px;
      color: var(--muted);
      font-size: 15px;
    }

    .strip-item strong {
      display: block;
      color: var(--deep);
      font-family: Georgia, "Times New Roman", serif;
      font-size: 22px;
      letter-spacing: -.035em;
      margin-bottom: 8px;
      font-weight: 400;
    }

    .recognition {
      background: var(--paper);
      max-width: none;
      padding-left: max(28px, calc((100vw - 1180px) / 2 + 28px));
      padding-right: max(28px, calc((100vw - 1180px) / 2 + 28px));
    }

    .section-intro {
      max-width: 1180px;
      margin: 0 auto 58px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: end;
    }

    .cards {
      max-width: 1180px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }

    .card {
      min-height: 275px;
      padding: 28px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .card .num {
      color: var(--gold);
      font-size: 12px;
      letter-spacing: .15em;
      text-transform: uppercase;
      font-weight: 700;
    }

    .card h3 {
      margin-top: 32px;
      font-size: 28px;
    }

    .card p {
      margin-top: 18px;
      font-size: 16px;
    }

    .essay-block {
      border-bottom: 1px solid var(--line);
    }

    .essay-grid {
      display: grid;
      grid-template-columns: .75fr 1.25fr;
      gap: 78px;
      align-items: start;
    }

    .essay-grid h2 {
      position: sticky;
      top: 110px;
    }

    .essay-copy p {
      font-size: 22px;
      line-height: 1.55;
      color: #33312d;
      margin-bottom: 28px;
    }

    .pull {
      max-width: 1010px;
      text-align: center;
      padding-top: 120px;
      padding-bottom: 120px;
    }

    .pull blockquote {
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(42px, 7vw, 98px);
      line-height: .94;
      color: var(--deep);
      letter-spacing: -.055em;
    }

    .method {
      display: grid;
      grid-template-columns: .88fr 1.12fr;
      gap: 75px;
      align-items: start;
    }

    .method-left {
      position: sticky;
      top: 110px;
    }

    .steps {
      border-top: 1px solid var(--line);
    }

    .step {
      display: grid;
      grid-template-columns: 74px 1fr;
      gap: 24px;
      padding: 30px 0;
      border-bottom: 1px solid var(--line);
    }

    .step span {
      font-family: Georgia, "Times New Roman", serif;
      color: var(--gold);
      font-size: 30px;
      line-height: 1;
    }

    .step h3 {
      font-size: 29px;
      margin-bottom: 10px;
    }

    .step p {
      font-size: 16px;
      margin: 0;
    }

    .dossier {
      max-width: none;
      background: #eadfce;
      padding-left: max(28px, calc((100vw - 1180px) / 2 + 28px));
      padding-right: max(28px, calc((100vw - 1180px) / 2 + 28px));
    }

    .dossier-inner {
      max-width: 1180px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: .88fr 1.12fr;
      gap: 80px;
      align-items: center;
    }

    .cover {
      background: #111b2b;
      color: var(--paper);
      min-height: 620px;
      padding: 40px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: 0 30px 86px rgba(20,32,51,.18);
    }

    .cover small {
      color: #d3bc91;
      text-transform: uppercase;
      letter-spacing: .15em;
      font-size: 12px;
    }

    .cover-number {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 92px;
      line-height: .9;
      color: #d3bc91;
    }

    .cover h2 {
      color: var(--paper);
      font-size: 50px;
      line-height: 1.02;
      margin-top: 18px;
    }

    .dossier-copy ul {
      padding: 0;
      margin: 30px 0;
      list-style: none;
      display: grid;
      gap: 14px;
    }

    .dossier-copy li {
      border-top: 1px solid rgba(20,32,51,.2);
      padding-top: 14px;
      color: #34322e;
      font-size: 17px;
    }

    .quote-band {
      max-width: none;
      background: var(--deep);
      color: var(--paper);
      padding: 104px 28px;
    }

    .quote-inner {
      max-width: 940px;
      margin: 0 auto;
      text-align: center;
    }

    .quote-inner blockquote {
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(35px, 5.5vw, 72px);
      line-height: 1.02;
      color: var(--paper);
      letter-spacing: -.045em;
    }

    .quote-inner p {
      color: #d9d0c1;
      margin: 28px auto 0;
      font-size: 14px;
      text-transform: uppercase;
      letter-spacing: .12em;
    }

    .session {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 74px;
      align-items: start;
    }

    .session-box {
      background: var(--soft);
      border: 1px solid var(--line);
      padding: 38px;
    }

    .session-box ul {
      padding: 0;
      margin: 0;
      list-style: none;
      display: grid;
      gap: 15px;
    }

    .session-box li {
      border-top: 1px solid var(--line);
      padding-top: 15px;
      color: #3d3932;
    }

    .about {
      border-top: 1px solid var(--line);
      display: grid;
      grid-template-columns: .75fr 1.25fr;
      gap: 80px;
    }

    .final {
      max-width: none;
      background: var(--deep);
      color: var(--paper);
      text-align: center;
      padding: 110px 28px;
    }

    .final h2 {
      color: var(--paper);
      margin: 0 auto 26px;
    }

    .final p {
      color: #d9d0c1;
      margin-left: auto;
      margin-right: auto;
      font-size: 20px;
    }

    footer {
      background: #0e1725;
      color: #d9d0c1;
      padding: 45px 28px;
    }

    .footer-inner {
      max-width: 1180px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      gap: 24px;
      font-size: 14px;
    }

    .footer-links {
      display: flex;
      gap: 20px;
    }

    @media (max-width: 900px) {
      .links { display: none; }

      .hero,
      .section-intro,
      .essay-grid,
      .method,
      .dossier-inner,
      .session,
      .about {
        grid-template-columns: 1fr;
        gap: 45px;
      }

      section { padding: 72px 22px; }

      .hero { min-height: auto; padding-top: 80px; }

      .strip-inner,
      .cards {
        grid-template-columns: 1fr;
      }

      .essay-grid h2,
      .method-left {
        position: static;
      }

      .cover,
      .hero-card {
        min-height: auto;
      }

      .footer-inner {
        flex-direction: column;
      }
    }

/* ===== toevoegingen voor tekst-/inhoudspagina's ===== */
.narrow{max-width:820px}
.lead{font-family:Georgia,"Times New Roman",serif;font-size:clamp(23px,2.6vw,35px);line-height:1.25;color:#312f2a;letter-spacing:-.035em;margin:28px 0;max-width:820px}
.prose p{font-size:20px;line-height:1.55;color:#33312d;max-width:760px}
.prose h1{margin-bottom:26px}
.prose h2{margin-top:64px}
.prose h3{margin-top:44px;font-size:30px}
.prose ul{padding:0;margin:24px 0;list-style:none;max-width:760px}
.prose li{border-top:1px solid #d8cdbb;padding:16px 0;color:#33312d;font-size:18px}
.prose li strong{color:#142033}
.band{max-width:none;background:#142033;color:#fffaf2;padding:104px 28px;text-align:center}
.band-in{max-width:940px;margin:0 auto}
.band h2{color:#fffaf2}
.band p{color:#d9d0c1;margin:26px auto 0;font-size:14px;text-transform:uppercase;letter-spacing:.12em}
.band blockquote{margin:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(30px,4.6vw,58px);line-height:1.05;color:#fffaf2;letter-spacing:-.045em}
.footer-in{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;gap:24px;font-size:14px;flex-wrap:wrap}
/* mobiel: menu-tekst weg, maar knop blijft (op ALLE pagina's gelijk) */
@media(max-width:900px){ .links{display:flex} .links a:not(.nav-cta){display:none} .band{padding:72px 22px} }

/* ===== opt-in formulier (dossier) ===== */
.optin{display:grid;gap:14px;max-width:460px;margin-top:36px}
.optin input[type=text],.optin input[type=email]{border:1px solid #d8cdbb;background:#fffaf2;padding:15px 16px;font-size:16px;font-family:inherit;color:#171717;width:100%}
.optin input:focus{outline:none;border-color:#142033}
.optin .btn{cursor:pointer}

/* ===== leestypografie voor artikel-/inhoudspagina's (kleiner dan de landingskoppen) ===== */
.narrow h1{font-size:clamp(32px,4.2vw,46px);line-height:1.12;letter-spacing:-.03em;margin-bottom:18px}
.narrow.prose{padding-top:8px}
.narrow:has(+ .narrow.prose){padding-bottom:20px}
.narrow .lead{font-size:clamp(20px,2.1vw,26px);line-height:1.35;margin:18px 0 8px}
.prose p{font-size:18px;line-height:1.72;color:#33312d;margin:0 0 20px}
.prose h2{font-size:clamp(24px,2.6vw,31px);line-height:1.2;letter-spacing:-.02em;margin-top:50px}
.prose h3{font-size:22px;line-height:1.25;margin-top:34px}
.prose li{font-size:18px;line-height:1.55}
.prose ol{max-width:760px;margin:22px 0;padding-left:22px}
.prose ol li{border:0;padding:0;margin:10px 0;font-size:18px;line-height:1.6;color:#33312d}
.prose blockquote{margin:24px 0;padding:18px 22px;background:#fffaf2;border-left:3px solid #9b7944;color:#33312d;font-size:17px;line-height:1.65;max-width:760px}
.cta-block{margin-top:56px;padding:30px 32px;background:#fffaf2;border:1px solid #d8cdbb;max-width:760px}
.cta-block h2{margin-top:0;font-size:clamp(23px,2.5vw,29px)}
.cta-block .btn{margin-top:6px}
.prose .fineprint{font-size:14px;line-height:1.55;color:#7a7268;font-style:italic;max-width:760px;margin:4px 0 0}
.faq-list{list-style:none;padding:0;margin:26px 0 0;max-width:820px;border-top:1px solid var(--line)}
.faq-list li{border-bottom:1px solid var(--line)}
.faq-list a{display:block;padding:17px 0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(18px,2vw,22px);line-height:1.3;letter-spacing:-.02em;color:var(--deep);transition:.15s ease}
.faq-list a:hover{color:var(--gold)}
@media(max-width:900px){
  .narrow h1{font-size:clamp(27px,7vw,34px)}
  .prose h2{font-size:23px;margin-top:40px}
  .cta-block{padding:24px}
}