/* Typografie via Adobe Typekit (kit: hyg1uma) — geladen via layout */

    /* Lokale Acumin Pro alleen voor pijl-glyphs (Adobe versie rendert net iets anders) */
    @font-face {
      font-family: 'AcuminProArrow';
      src: url('/fonts/Acumin_Pro_Regular.otf') format('opentype');
      font-weight: 400; font-style: normal; font-display: swap;
      unicode-range: U+2190-2199;
    }
    .arrow-glyph::after,
    .arrow-glyph::before { font-family: 'AcuminProArrow', "acumin-pro", sans-serif; }

    /*
    ═══════════════════════════════════════════════════════
    DESIGN TOKENS — PIXEL PERFECT UIT FIGMA API
    ═══════════════════════════════════════════════════════
    Fonts:
      Cooper Std Black (900)   → Big Title, H1, H2 slab headings
      Acumin Pro Wide SB (600) → H1 alt, H2 alt, H3, Intro, labels, nav
      Acumin Pro Wide Rg (400) → Body, Bullet, body tekst

    Kleuren (exact uit Figma fills):
      #021edf  Hero blauw vlak
      #2b2bff  Logo / links blauw
      #563b57  Nieuws achtergrond + Footer achtergrond
      #a27a50  Video overview achtergrond
      #bba4cd  Quote lavendel achtergrond
      #7ccbbf  Quote + Button mint achtergrond
      #a8a8a8  Social media icon placeholders
      #cccccc  Borders, dividers
      #111111  Standaard tekst
      #ffffff  Wit

    Layout:
      Container: 1440px max-width
      Horizontale padding: 112px (= 1440 - 1216 inner) / 2
      Hero: 1848px totaal, blauw vlak start bij 1080px (58% van hoogte)
      Afbeelding Divider: 360px hoogte
      Nieuws: 802px hoogte
      Video: 817px hoogte
      Quote: 327px hoogte
      Content Afbeelding: 904px hoogte

    Desktop type scale:
      Big Title: Cooper Std 256px / lh 205px / ls -12.8px (-5%)
      H1:        Cooper Std  48px / lh  53px / ls 0
      H1 alt:    Acumin W SB 48px / lh  53px / ls 0
      H2:        Cooper Std  24px / lh  30px / ls 0
      H2 alt:    Acumin W SB 24px / lh  30px / ls 0
      H3:        Acumin W SB 18px / lh  25px / ls 0
      Intro:     Acumin W Rg 24px / lh  34px / ls 0
      Body:      Acumin Rg   18px / lh  25px / ls 0
      Bullet:    Acumin Rg   24px / lh  38px / ls 0
    ═══════════════════════════════════════════════════════
    */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; overflow-x: hidden; }
    body { font-family: "acumin-pro", Helvetica, sans-serif; font-weight: 400; font-size: 18px; line-height: 1.4; color: #111; background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
    img { display: block; width: 100%; height: 100%; object-fit: cover; }
    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }

    /* ── CONTAINER: 112px padding = (1440-1216)/2 ── */
    .container { max-width: 1440px; margin: 0 auto; padding: 0 clamp(24px, 7.78vw, 112px); }

    /* ── TYPOGRAFIE ── */
    .text-display  { font-family: "cooper-black-std", serif; font-weight: 400; font-size: 256px; line-height: 0.8; letter-spacing: -0.05em; }
    .text-title  { font-family: "cooper-black-std", serif; font-weight: 400; font-size: 48px; line-height: 1.1; }
    .text-title-alt  { font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 48px; line-height: 1.1; }
    .text-subtitle  { font-family: "cooper-black-std", serif; font-weight: 400; font-size: 24px; line-height: 1.25; }
    .text-subtitle-alt  { font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 24px; line-height: 1.25; }
    .text-label   { font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 18px; line-height: 1.4; }
    .text-intro{ font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 24px; line-height: 1.4; }
    .text-body { font-family: "acumin-pro", sans-serif; font-weight: 400; font-size: 18px; line-height: 1.4; }
    .text-bullet  { font-family: "acumin-pro", sans-serif; font-weight: 400; font-size: 24px; line-height: 1.6; }
    .link    { color: #2b2bff; }

    /* ── BACKGROUND KLEUR UTILITIES ──
       Redacteuren kiezen achtergrondkleur via CP Select.
       Text color licht/donker op basis van contrast. */
    .bg-blush     { background: #F8EBE5; color: #111; }
    .bg-aubergine { background: #563B57; color: #fff; }
    .bg-cognac    { background: #9C6337; color: #fff; }
    .bg-oranje    { background: #E97500; color: #fff; }
    .bg-mint      { background: #7EFFBE; color: #111; }
    .bg-violet    { background: #9F7EFF; color: #fff; }
    .bg-magenta   { background: #DF0091; color: #fff; }
    .bg-blauw     { background: #011FDF; color: #fff; }

    /* ── KNOP ── */
    .btn { display: inline-flex; align-items: center; gap: 16px; padding: 13px 22px; border: 1px solid; font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 18px; line-height: 1; cursor: pointer; background: transparent; transition: background .2s, color .2s; }
    .btn::after { content: "\2192"; font-family: 'AcuminProArrow', "acumin-pro", sans-serif; }
    .btn--dark { color: #111; border-color: #111; }
    .btn--dark:hover { background: #111; color: #fff; }
    .btn--light { color: #fff; border-color: #fff; }
    .btn--light:hover { background: #fff; color: #111; }

    /* ── DIVIDER ── */
    .divider-line { height: 1px; background: #ccc; }

    /* ════════════════════════════════
       NAV
    ════════════════════════════════ */
    .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 40px clamp(24px, 7.78vw, 112px); display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; }
    .nav__logo { display: block; width: 140px; pointer-events: all; }
    .nav__logo img, .menu-overlay__logo img, .search-overlay__logo img { display: block; width: 100%; height: auto; object-fit: initial; }
    .menu-overlay__logo img { filter: brightness(0) invert(1); }
    .nav__icons { display: flex; gap: 24px; padding-top: 4px; align-items: center; pointer-events: all; }
    .nav__icon { color: #2b2bff; cursor: pointer; }
    .nav__icon svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2; display: block; }
    .nav__icon--ham { display: flex; align-items: center; justify-content: center; }
    /* ── NAV: STICKY STATE ── */
    .nav { transition: background 0.3s, padding 0.3s, box-shadow 0.3s; }
    .nav__logo .nav__logo-small { display: none; }
    .nav--scrolled {
      background: #021edf;
      padding-top: 16px;
      padding-bottom: 16px;
      pointer-events: all;
    }
    .nav--scrolled .nav__logo-default { display: none; }
    .nav--scrolled .nav__logo-small { display: block; height: 44px; width: auto; filter: brightness(0) invert(1); }
    .nav--scrolled .nav__icon { color: #fff; }


    /* ════════════════════════════════
       BLOK 1: XXL HEADER
       Figma: foto 1440×1080 (4:3) boven, hard #021edf panel eronder.
       De h1 is absoluut gepositioneerd zodat hij de foto/panel grens overlapt:
         top: 37.5vw = 50% van foto-hoogte (foto is 4:3 op 100vw breedte)
       De panel padding-top geeft ruimte voor het stuk van de h1 dat doorloopt.
    ════════════════════════════════ */
    .hero { position: relative; background: #021edf; }
    .hero::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      top: 75vw;
      bottom: 0;
      background: #021edf;
      z-index: 2;
      pointer-events: none;
    }

    .hero__photo {
      position: relative;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: #d8d0c4;
      z-index: 1;
    }
    .hero__photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }

    .hero__eyebrow {
      position: absolute;
      top: 70%;
      left: 0; right: 0;
      z-index: 10;
      text-align: center;
      font-family: "acumin-pro-wide", sans-serif;
      font-weight: 600;
      font-size: clamp(16px, 1.67vw, 24px);
      line-height: 1.25;
      color: #fff;
    }

    .hero__title {
      display: block;
      width: 100%;
      height: auto;
      min-height: 48vw;
      position: relative;
      z-index: 5;
      margin-top: -24vw;
      margin-bottom: 40px;
      padding: 0 7.78vw;
      box-sizing: border-box;
    }

    .hero__panel {
      color: #fff;
      text-align: center;
      padding: 0 7.78vw clamp(48px, 5.5vw, 80px);
      position: relative;
      z-index: 3;
    }
    .hero__subtitle {
      font-family: "acumin-pro-wide", sans-serif;
      font-weight: 600;
      font-size: clamp(24px, 3.33vw, 48px);
      line-height: 1.1;
      margin-bottom: 40px;
    }
    .hero__body {
      font-family: "acumin-pro", sans-serif;
      font-weight: 400;
      font-size: clamp(18px, 1.67vw, 24px);
      line-height: 1.4;
      color: rgba(255,255,255,.85);
      max-width: 590px;
      margin: 0 auto;
    }

    /* ════════════════════════════════
       BLOK 2: BREADCRUMBS
    ════════════════════════════════ */
    .breadcrumbs { padding: 20px 0; }
    .breadcrumbs .container { display: flex; gap: 16px; font-family: "acumin-pro", sans-serif; font-size: 18px; color: #111; }
    .breadcrumbs__sep { color: #999; }

    /* ════════════════════════════════
       BLOK 3: MEDIUM HEADER
       Figma: 1440×540px
    ════════════════════════════════ */
    /* Medium header: alleen een afbeelding (8:3 = halve hoogte van XXL 4:3 hero) */
    .medium-header { aspect-ratio: 8 / 3; overflow: hidden; }
    /* Small header: 16:3 = halve hoogte van Medium */
    .small-header { aspect-ratio: 16 / 3; overflow: hidden; }

    /* ════════════════════════════════
       BLOK 4: CONTENT TEKST
       Figma: 1440×970px
    ════════════════════════════════ */
    .content-text { padding: 80px 0; }
    .content-text .container { max-width: 1024px; }
    .content-text__title { margin-bottom: 48px; }
    .content-text__body { margin-bottom: 48px; }
    .bullet-list { margin: 40px 0 48px; display: flex; flex-direction: column; }
    .bullet-list li { display: flex; align-items: baseline; gap: 24px; font-family: "acumin-pro", sans-serif; font-weight: 400; font-size: 24px; line-height: 1.6; }
    .bullet-list li::before { content: "\2192"; font-family: 'AcuminProArrow', "acumin-pro", sans-serif; flex-shrink: 0; }
    .link-more { font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 18px; display: inline-flex; align-items: center; gap: 12px; }
    .link-more::after { content: "\2192"; font-family: 'AcuminProArrow', "acumin-pro", sans-serif; }
    .link-back { font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 18px; display: inline-flex; align-items: center; gap: 12px; }

    /* ════════════════════════════════
       BLOK 5: FAQ
       Figma: 1440×648px
    ════════════════════════════════ */
    .faq { padding: 80px 0; }
    .faq .container { max-width: 1024px; }
    .faq__title { margin-bottom: 48px; }
    .faq__item { border-top: 1px solid #ccc; }
    .faq__item:last-child { border-bottom: 1px solid #ccc; }
    .faq__question { width: 100%; background: none; border: none; padding: 28px 0; display: flex; justify-content: space-between; align-items: center; gap: 40px; font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 18px; line-height: 1.4; cursor: pointer; text-align: left; color: #111; }
    .faq__icon { font-size: 28px; font-weight: 300; flex-shrink: 0; width: 28px; text-align: center; }
    .faq__answer { display: none; padding: 0 0 28px; font-family: "acumin-pro", sans-serif; font-size: 18px; line-height: 1.4; }
    .faq__item.open .faq__answer { display: block; }

    /* ════════════════════════════════
       BLOK 6/7: CONTENT + AFBEELDING
       Fluid CSS Grid layout: foto (altijd 3:4) naast tekst kolom.
       Figma: 592px tekst + 64px gap + 528px foto ≈ 53:47 ratio — we gebruiken
       1fr 1fr voor simpelheid; scheelt ~4% t.o.v. Figma, visueel niet merkbaar.
    ════════════════════════════════ */
    .content-image { padding: 80px 0; }
    .content-image__inner {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(24px, 7.78vw, 112px);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(40px, 4.4vw, 64px);
      align-items: center;
    }

    .content-image__photo {
      width: 100%;
      aspect-ratio: 3 / 4;
      overflow: hidden;
    }
    .content-image__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

    /* Rechts variant: tekst links, foto rechts */
    .content-image--right .content-image__text  { order: 1; }
    .content-image--right .content-image__photo { order: 2; }
    /* Links variant: foto links, tekst rechts */
    .content-image--left  .content-image__photo { order: 1; }
    .content-image--left  .content-image__text  { order: 2; }

    /* Subject label boven de tekst — matcht body gap voor consistent ritme */
    .content-image__label {
      font-family: "acumin-pro-wide", sans-serif;
      font-weight: 600;
      font-size: 18px;
      color: #111;
      display: block;
      margin-bottom: 24px;
    }
    /* Tekst body sectie: titel, body, knop */
    .content-image__body {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    /* ════════════════════════════════
       BLOK 8: AFBEELDING DIVIDER
       Figma: 1440×360px
    ════════════════════════════════ */
    .image-divider { height: 360px; overflow: hidden; }

    /* ════════════════════════════════
       BLOK 9: NIEUWS OVERVIEW
       Figma: 1440×802px, bg: #563b57
    ════════════════════════════════ */
    .news { padding: 80px 0; }
    .news__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 48px; }
    .news__more { font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 18px; display: flex; align-items: center; gap: 12px; }
    .news__more::after { content: "\2192"; font-family: 'AcuminProArrow', "acumin-pro", sans-serif; }
    .news__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
    .news-card { position: relative; overflow: hidden; cursor: pointer; }
    .news-card__photo { aspect-ratio: 3/4; overflow: hidden; position: relative; }
    .news-card__photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 35%, rgba(0,0,0,.8) 100%); }
    .news-card__photo img { transition: transform .4s; width: 100%; height: 100%; object-fit: cover; }
    .news-card:hover .news-card__photo img { transform: scale(1.04); }
    .news-card__body { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 24px; color: #fff; }
    .news-card__date { font-family: "acumin-pro", sans-serif; font-weight: 400; font-size: 18px; line-height: 1.4; margin-bottom: 8px; }
    .news-card__title { font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 24px; line-height: 1.25; margin-bottom: 16px; }
    .news-card__more { font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 18px; display: inline-flex; align-items: center; gap: 8px; }
    .news-card__more::after { content: "\2192"; font-family: 'AcuminProArrow', "acumin-pro", sans-serif; }

    /* ════════════════════════════════
       BLOK 10: VIDEO OVERVIEW
       Figma: 1440×817px, bg: #a27a50
    ════════════════════════════════ */
    .video-overview { padding: 80px 0; }
    .video-overview__title { margin-bottom: 48px; }
    .video-overview__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
    .video-card__photo { overflow: hidden; margin-bottom: 20px; }
    .video-card__photo img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform .4s; }
    .video-card:hover .video-card__photo img { transform: scale(1.04); }
    .video-card__title { color: #fff; margin-bottom: 12px; }
    .video-card__body { color: rgba(255,255,255,.85); margin-bottom: 24px; font-family: "acumin-pro", sans-serif; font-weight: 400; font-size: 18px; line-height: 1.4; }

    /* ════════════════════════════════
       BLOK 11: QUOTE (lavendel)
       Figma: 1440×327px, bg: #bba4cd
    ════════════════════════════════ */
    .quote { padding: 80px 0; text-align: center; }
            .quote .container { max-width: 900px; }
    .quote__text { font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 48px; line-height: 1.1; }
    .quote__btn { margin-top: 40px; }

    /* ════════════════════════════════
       BLOK 12: CONTACT FORM
       Figma: wit, heading Cooper Std H1
    ════════════════════════════════ */
    .contact { padding: 80px 0; }
    .contact__title { margin-bottom: 48px; }
    .contact__form { display: flex; flex-direction: column; gap: 24px; }
    .contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    .contact__field { display: flex; flex-direction: column; gap: 10px; }
    .contact__label { font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 18px; color: #111; }
    .contact__input { padding: 16px 18px; border: 1px solid #111; font-family: "acumin-pro-wide", sans-serif; font-size: 18px; color: #111; background: #fff; outline: none; border-radius: 0; -webkit-appearance: none; appearance: none; transition: border-color .2s; }
    .contact__input:focus { border-color: #111; }
    .contact__input::placeholder { color: #111; font-family: "acumin-pro", sans-serif; }top. die 
    .contact__submit { display: flex; justify-content: flex-end; padding-top: 8px; }

    /* ════════════════════════════════
       NAMEN MUUR (B) — flowing wall
    ════════════════════════════════ */
    .names-wall { padding: 80px 0; color: #fff; }
    .names-wall.bg-blush, .names-wall.bg-mint, .names-wall.bg-oranje { color: #111; }
    .names-wall__title { text-align: center; margin-bottom: 48px; color: inherit; }
    .names-wall__flow {
      display: flex; flex-wrap: wrap; justify-content: center;
      gap: clamp(8px, 1.2vw, 18px) clamp(12px, 1.5vw, 28px);
      line-height: 1.1;
    }
    .names-wall__name {
      font-family: "acumin-pro-wide", sans-serif; font-weight: 600;
      font-size: clamp(20px, 2.4vw, 44px);
      letter-spacing: 0;
      line-height: 1;
      transition: transform .2s;
    }
    .names-wall__name:hover { transform: scale(1.06); }
    .names-wall__name--0 { color: #E97500; }
    .names-wall__name--1 { color: #7EFFBE; }
    .names-wall__name--2 { color: #9F7EFF; }
    .names-wall__name--3 { color: #DF0091; }
    .names-wall__name--4 { color: #F8EBE5; }
    .names-wall__name--5 { color: #9C6337; }
    .names-wall__name--6 { color: #fff; }
    .names-wall.bg-blush .names-wall__name--4,
    .names-wall.bg-mint  .names-wall__name--1,
    .names-wall.bg-oranje .names-wall__name--0 { color: #111; }
    @media (max-width: 768px) {
      .names-wall { padding: 56px 0; }
      .names-wall__title { margin-bottom: 32px; }
      .names-wall__name { font-size: clamp(16px, 4.5vw, 24px); }
    }

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

    /* ════════════════════════════════
       BLOK 13: FOOTER
       Figma: bg #563b57 (zelfde als Nieuws)
       Social icons: #a8a8a8
    ════════════════════════════════ */
    .footer { padding: 80px 0 0; }
    .footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 64px; padding-bottom: 80px; }
    .footer__name { font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 18px; margin-bottom: 8px; }
    .footer__address { font-family: "acumin-pro", sans-serif; font-weight: 400; font-style: normal; font-size: 18px; line-height: 1.8; color: rgba(255,255,255,.85); margin-bottom: 24px; }
    .footer__contact-info { font-family: "acumin-pro", sans-serif; font-weight: 400; font-size: 18px; line-height: 1.8; color: rgba(255,255,255,.85); margin-bottom: 40px; }
    .footer__social-label { font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 18px; margin-bottom: 16px; }
    .footer__social-icons { display: flex; gap: 10px; }
    .footer__social-icon { width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.85); transition: color 0.2s; }
    .footer__social-icon:hover { color: #fff; }
    .footer__social-icon svg { width: 22px; height: 22px; fill: currentColor; }
    .footer__column-title { font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 18px; margin-bottom: 20px; }
    .footer__links { display: flex; flex-direction: column; }
    .footer__links li { display: flex; align-items: baseline; gap: 14px; font-family: "acumin-pro", sans-serif; font-weight: 400; font-size: 18px; line-height: 2; color: rgba(255,255,255,.85); }
    .footer__links li::before { content: "\2192"; font-family: 'AcuminProArrow', "acumin-pro", sans-serif; color: rgba(255,255,255,.85); }
    .footer__links a:hover { color: #fff; }
    .footer__bottom { border-top: 1px solid rgba(255,255,255,.2); padding: 24px 0; display: flex; justify-content: space-between; font-family: "acumin-pro", sans-serif; font-size: 18px; color: rgba(255,255,255,.75); }
    .footer__bottom-right { display: flex; gap: 10px; align-items: center; }
    .footer__bottom-right span { color: rgba(255,255,255,.4); }
    .footer__bottom a { color: rgba(255,255,255,.75); }
    .footer__bottom a:hover { color: #fff; }

    /* ════════════════════════════════
       DEMO NAV
    ════════════════════════════════ */
    .demo-nav { position: fixed; bottom: 20px; right: 20px; z-index: 9999; background: #fff; border: 2px solid #111; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; box-shadow: 4px 4px 0 #111; max-height: 85vh; overflow-y: auto; }
    .demo-nav h6 { font-family: "acumin-pro-wide", sans-serif; font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #666; margin-bottom: 6px; }
    .demo-nav a { font-family: "acumin-pro-wide", sans-serif; font-size: 12px; color: #111; padding: 3px 8px; transition: background .15s, color .15s; }
    .demo-nav a:hover { background: #021edf; color: #fff; }


    /* ════════════════════════════════
       TABLET (769-1024px)
    ════════════════════════════════ */
    @media (min-width: 769px) and (max-width: 1024px) {
      .news__grid { grid-template-columns: repeat(2, 1fr); }
      .video-overview__grid { grid-template-columns: repeat(2, 1fr); }
      .menu-overlay__body { grid-template-columns: 1fr; gap: 48px; }
      .menu-overlay__side { padding-left: 0; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.2); }
      .footer__grid { grid-template-columns: 1fr 1fr; gap: 48px; }
    }

    /* ════════════════════════════════
       MOBILE (≤768px)
    ════════════════════════════════ */
    @media (max-width: 768px) {
      body { font-size: 14px; }
      .text-display  { font-size: 64px; line-height: 0.80; }
      .breadcrumbs { display: none; }
      .text-title, .text-title-alt { font-size: 24px; line-height: 1.25; }
      .text-subtitle, .text-subtitle-alt { font-size: 18px; line-height: 1.20; }
      .text-label   { font-size: 14px; }
      .text-intro { font-size: 18px; }
      .text-body  { font-size: 14px; }
      .text-bullet  { font-size: 18px; line-height: 1.60; }
      .btn { font-size: 16px; padding: 10px 16px; }
      .nav { padding: 20px 24px; }
      .nav--scrolled { padding: 12px 24px; }
      .nav--scrolled .nav__logo-small { height: 34px; }
      .hero__photo { aspect-ratio: 1 / 1; }
      .hero::after { top: 99vw; }
      .hero__eyebrow { font-size: 14px; top: 75%; }
      .hero__title { margin-top: -27.5vw; min-height: 55vw; padding: 0 24px; }
      .hero__panel { padding: 0 24px 56px; }
      .hero__subtitle { font-size: 24px; margin-bottom: 20px; }
      .hero__body { font-size: 16px; }
      .content-image__inner { grid-template-columns: 1fr; gap: 32px; }
      .content-image--right .content-image__photo,
      .content-image--left  .content-image__photo { order: 0; }
      .content-image--right .content-image__text,
      .content-image--left  .content-image__text  { order: 1; }
      .image-divider { height: 220px; }
      .news__grid { grid-template-columns: 1fr; }
      .news__top { flex-direction: column; gap: 12px; }
      .video-overview__grid { grid-template-columns: 1fr; }
      .quote__text { font-size: 24px; }
      .contact__row { grid-template-columns: 1fr; }
      .footer__grid { grid-template-columns: 1fr; gap: 40px; }
      .footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
      .demo-nav { display: none; }
      .bullet-list li { font-size: 18px; }
    }

    /* ════════════════════════════════════════════════
       BACKDROP
    ════════════════════════════════════════════════ */
    .overlay-backdrop {
      position: fixed; inset: 0; z-index: 200;
      background: rgba(0,0,0,0.35);
      opacity: 0; pointer-events: none;
      transition: opacity 0.35s ease;
    }
    .overlay-backdrop.is-visible { opacity: 1; pointer-events: all; }
    body.overlay-active { overflow: hidden; }

    /* ════════════════════════════════════════════════
       MENU OVERLAY
       Full-screen, #021edf blauw, wit tekst
       Links: Cooper Std, groot
       Side: Acumin Pro Wide, klein
    ════════════════════════════════════════════════ */
    .menu-overlay {
      position: fixed; inset: 0; z-index: 300;
      background: #021edf;
      display: flex; flex-direction: column;
      transform: translateY(-100%);
      transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
      overflow-y: auto;
    }
    .menu-overlay.is-open { transform: translateY(0); }

    /* Top bar — zelfde layout als nav */
    .menu-overlay__bar {
      display: flex; justify-content: space-between; align-items: flex-start;
      padding: 40px clamp(24px, 7.78vw, 112px);
      flex-shrink: 0;
    }
    .menu-overlay__logo { display: block; width: 140px; }
    .menu-overlay__close {
      background: none; border: none; cursor: pointer;
      width: 50px; height: 50px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: opacity 0.2s;
    }
    .menu-overlay__close:hover { opacity: 0.7; }
    .menu-overlay__close svg {
      width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2.5;
    }
    .menu-overlay__close:focus-visible {
      outline: 3px solid #fff; outline-offset: 3px;
    }

    /* Body — two column layout */
    .menu-overlay__body {
      display: grid;
      grid-template-columns: 1fr 380px;
      gap: 0;
      padding: 40px clamp(24px, 7.78vw, 112px) 80px;
      flex: 1;
      align-items: start;
    }

    /* Primary nav links */
    .menu-overlay__nav ul { list-style: none; }
    /* Dividers TUSSEN top-level items — geen lijn boven het eerste of onder het laatste */
    .menu-overlay__nav > ul > li { border-top: 1px solid rgba(255,255,255,0.2); }
    .menu-overlay__nav > ul > li:first-child { border-top: none; }
    .menu-overlay__submenu li { border: none; }
    .menu-overlay__link {
      display: flex; justify-content: space-between; align-items: center;
      width: 100%;
      padding: 28px 0;
      background: none; border: none;
      font-family: "cooper-black-std", serif; font-weight: 400;
      font-size: clamp(28px, 3.33vw, 48px); line-height: 1.1;
      color: #fff;
      text-align: left; cursor: pointer;
      transition: color 0.2s, padding-left 0.2s;
      text-decoration: none;
    }
    .menu-overlay__link:hover { color: rgba(255,255,255,0.6); padding-left: 12px; }
    .menu-overlay__link:focus-visible {
      outline: none; color: rgba(255,255,255,0.6);
      padding-left: 12px; text-decoration: underline;
    }
    .menu-overlay__arrow {
      font-family: 'AcuminProArrow', "acumin-pro-wide", sans-serif;
      font-size: 24px; font-weight: 400;
      opacity: 0;
      transition: opacity 0.2s, transform 0.2s;
      transform: translateX(-8px);
    }
    .menu-overlay__link:hover .menu-overlay__arrow,
    .menu-overlay__link:focus-visible .menu-overlay__arrow {
      opacity: 1; transform: translateX(0);
    }

    /* Toggle-knop voor items met submenu */
    .menu-overlay__chevron {
      width: 28px; height: 28px;
      stroke: currentColor;
      transition: transform 0.3s ease;
      flex-shrink: 0;
    }
    .menu-overlay__item.is-open .menu-overlay__chevron { transform: rotate(180deg); }

    /* Submenu — inline accordion, dichtgeklapt by default */
    .menu-overlay__submenu {
      list-style: none;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease;
      padding: 0;
    }
    .menu-overlay__item.is-open .menu-overlay__submenu {
      max-height: 1000px;
      transition: max-height 0.6s ease;
    }
    .menu-overlay__submenu li { padding: 0; }
    .menu-overlay__sublink {
      display: block;
      padding: 14px 0 14px 24px;
      font-family: "acumin-pro-wide", sans-serif; font-weight: 400;
      font-size: 18px; line-height: 1.4;
      color: rgba(255,255,255,0.85);
      transition: color 0.15s, padding-left 0.15s;
      text-decoration: none;
    }
    .menu-overlay__sublink:hover { color: #fff; padding-left: 32px; }
    .menu-overlay__sublink:focus-visible { outline: 2px solid #fff; outline-offset: 2px; color: #fff; }

    /* Laatste subitem extra ruimte voor de border-bottom van de li */
    .menu-overlay__item.is-open .menu-overlay__submenu { padding-bottom: 16px; }

    /* Side column */
    .menu-overlay__side {
      padding-top: 8px;
      display: flex; flex-direction: column; gap: 48px;
      padding-left: 56px;
    }
    .menu-overlay__sec-title {
      font-family: "acumin-pro-wide", sans-serif; font-weight: 600;
      font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
      color: rgba(255,255,255,0.5); margin-bottom: 16px;
    }
    .menu-overlay__sec ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
    .menu-overlay__sec a {
      font-family: "acumin-pro", sans-serif; font-weight: 400;
      font-size: 18px; line-height: 1.8; color: rgba(255,255,255,0.75);
      display: flex; align-items: center; gap: 10px;
      transition: color 0.15s;
    }
    .menu-overlay__sec a::before { content: '\2192'; font-family: 'AcuminProArrow', "acumin-pro", sans-serif; opacity: 0.5; }
    .menu-overlay__sec a:hover { color: #fff; }
    .menu-overlay__sec a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    .menu-overlay__contact {
      font-family: "acumin-pro", sans-serif; font-weight: 400;
      font-size: 18px; line-height: 1.8; color: rgba(255,255,255,0.6);
      border-top: 1px solid rgba(255,255,255,0.15);
      padding-top: 32px;
    }

    /* ════════════════════════════════════════════════
       SEARCH OVERLAY
       Full-screen, wit, groot zoekveld bovenaan
    ════════════════════════════════════════════════ */
    .search-overlay {
      position: fixed; inset: 0; z-index: 300;
      background: #fff;
      display: flex; flex-direction: column;
      transform: translateY(-100%);
      transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
      overflow-y: auto;
    }
    .search-overlay.is-open { transform: translateY(0); }

    .search-overlay__bar {
      display: flex; justify-content: space-between; align-items: flex-start;
      padding: 40px clamp(24px, 7.78vw, 112px);
      flex-shrink: 0;
    }
    .search-overlay__logo { display: block; width: 140px; }
    .search-overlay__close {
      background: none; border: none; cursor: pointer;
      width: 50px; height: 50px;
      display: flex; align-items: center; justify-content: center;
    }
    .search-overlay__close:hover { opacity: 0.6; }
    .search-overlay__close svg {
      width: 26px; height: 26px; stroke: #111; fill: none; stroke-width: 2.5;
    }
    .search-overlay__close:focus-visible {
      outline: 3px solid #021edf; outline-offset: 3px;
    }

    .search-overlay__body {
      padding: 40px clamp(24px, 7.78vw, 112px) 80px;
      flex: 1;
      max-width: 1440px;
      width: 100%;
    }

    /* Input wrapper */
    .search-overlay__input-wrap {
      display: flex; align-items: center; gap: 20px;
      padding: 0 0 24px;
    }
    .search-overlay__icon {
      width: 32px; height: 32px;
      stroke: #111; fill: none; stroke-width: 2;
      flex-shrink: 0;
    }
    .search-overlay__input {
      flex: 1;
      font-family: "acumin-pro-wide", sans-serif; font-weight: 400;
      font-size: clamp(18px, 2vw, 28px); line-height: 1.4;
      color: #111; background: transparent;
      border: none; outline: none;
      -webkit-appearance: none;
      appearance: none;
    }
    .search-overlay__input::placeholder { color: #111; }
    .search-overlay__input::-webkit-search-cancel-button { display: none; }
    .search-overlay__clear {
      background: none; border: none; cursor: pointer;
      padding: 8px; color: #aaa;
      transition: color 0.15s;
    }
    .search-overlay__clear:hover { color: #111; }
    .search-overlay__clear svg {
      width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.5; display: block;
    }

    .search-overlay__divider { height: 2px; background: #111; margin-bottom: 48px; }

    /* Results label */
    .search-overlay__label {
      font-family: "acumin-pro-wide", sans-serif; font-weight: 600;
      font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
      color: #aaa; margin-bottom: 20px;
    }

    /* Suggestion links */
    .search-overlay__suggestions ul { list-style: none; display: flex; flex-direction: column; }
    .search-overlay__suggestion-link {
      display: flex; justify-content: space-between; align-items: center;
      padding: 18px 0;
      border-bottom: 1px solid #f0f0f0;
      font-family: "acumin-pro-wide", sans-serif; font-weight: 600;
      font-size: 24px; color: #111;
      transition: color 0.15s, padding-left 0.15s;
    }
    .search-overlay__suggestion-link span { font-weight: 400; color: #aaa; }
    .search-overlay__suggestion-link:hover { color: #021edf; padding-left: 8px; }
    .search-overlay__suggestion-link:focus-visible {
      outline: none; color: #021edf;
    }

    /* Live result links */
    .search-overlay__live ul { list-style: none; display: flex; flex-direction: column; }
    .search-overlay__result-link {
      display: grid;
      grid-template-columns: 120px 1fr 24px;
      align-items: center; gap: 24px;
      padding: 20px 0;
      border-bottom: 1px solid #f0f0f0;
      transition: background 0.15s, padding-left 0.15s;
    }
    .search-overlay__result-link:hover { padding-left: 8px; }
    .search-overlay__result-link:focus-visible { outline: none; padding-left: 8px; }
    .search-overlay__result-type {
      font-family: "acumin-pro-wide", sans-serif; font-weight: 600;
      font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
      color: #aaa;
    }
    .search-overlay__result-title {
      font-family: "acumin-pro-wide", sans-serif; font-weight: 600;
      font-size: 20px; color: #111;
    }
    .search-overlay__result-title mark {
      background: none; color: #021edf; font-style: normal;
    }
    .search-overlay__result-arrow { color: #aaa; font-size: 18px; text-align: right; }

    /* Empty state */
    .search-overlay__empty {
      padding: 48px 0;
      font-family: "acumin-pro", sans-serif; font-size: 18px; color: #aaa; line-height: 1.6;
    }
    .search-overlay__empty-msg { font-size: 24px; color: #111; margin-bottom: 12px; }
    .search-overlay__empty a { color: #021edf; }

    /* ─── Mobile overlay ────────────────── */
    @media (max-width: 768px) {
      .menu-overlay__bar,
      .search-overlay__bar  { padding: 20px 24px; }
      .menu-overlay__body   { grid-template-columns: 1fr; padding: 24px 24px 60px; gap: 48px; }
      .menu-overlay__side   { border-left: none; border-top: 1px solid rgba(255,255,255,0.2); padding-left: 0; padding-top: 48px; }
      .menu-overlay__link   { font-size: clamp(24px, 8vw, 36px); padding: 20px 0; }
      .menu-overlay__chevron { width: 22px; height: 22px; }
      .menu-overlay__sublink { padding: 12px 0 12px 16px; font-size: 16px; }
      .search-overlay__body { padding: 0 24px 60px; }
      .search-overlay__input { font-size: clamp(16px, 4.5vw, 22px); }
      .search-overlay__suggestion-link { font-size: 18px; }
      .search-overlay__result-link { grid-template-columns: 90px 1fr 20px; gap: 12px; }
      .search-overlay__result-title { font-size: 16px; }
    }

    /* ── prefers-reduced-motion: respect users die animaties uit hebben staan ── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      html { scroll-behavior: auto; }
      .news-card:hover .news-card__photo img,
      .video-card:hover .video-card__photo img,
      .related-card:hover .related-card__photo img { transform: none; }
    }

    /* ════════════════════════════════
       DOWNLOADS-OVERZICHTSPAGINA
    ════════════════════════════════ */
    .downloads-page { padding: 80px 0; }
    .downloads-page .container { max-width: 1024px; }
    .downloads-page__title { margin-bottom: 16px; }
    .downloads-page__intro { margin-bottom: 32px; max-width: 720px; }

    /* Filter-balk */
    .downloads-filter { display: flex; flex-direction: column; gap: 20px; margin: 32px 0 48px; }
    .downloads-filter__search { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 1px solid #111; transition: border-color 0.2s; }
    .downloads-filter__search:focus-within { border-color: #021edf; }
    .downloads-filter__icon { width: 22px; height: 22px; color: #111; flex-shrink: 0; }
    .downloads-filter__input { flex: 1; border: none; outline: none; font-family: "acumin-pro-wide", sans-serif; font-size: 18px; color: #111; background: transparent; }
    .downloads-filter__input::placeholder { color: #111; font-family: "acumin-pro", sans-serif; }
    .downloads-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .downloads-chip {
      padding: 10px 18px;
      background: none;
      border: 1px solid #111;
      font-family: "acumin-pro-wide", sans-serif;
      font-weight: 600;
      font-size: 14px;
      color: #111;
      cursor: pointer;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .downloads-chip:hover { border-color: #111; }
    .downloads-chip.is-active { background: #111; color: #fff; border-color: #111; }

    /* Categorie-secties */
    .downloads-group { margin-bottom: 48px; }
    .downloads-group__title { margin-bottom: 16px; }

    /* Downloads-lijst */
    .downloads-list { display: flex; flex-direction: column; }
    .download-item { border-top: 1px solid #ccc; }
    .downloads-list .download-item:last-child { border-bottom: 1px solid #ccc; }
    .download-item__link {
      display: grid;
      grid-template-columns: 64px 1fr auto;
      gap: 20px;
      align-items: center;
      padding: 20px 0;
      color: inherit;
      transition: padding 0.15s;
    }
    .download-item__link:hover { padding-left: 8px; padding-right: 8px; }
    .download-item__icon {
      width: 48px; height: 56px;
      object-fit: contain;
      flex-shrink: 0;
    }
    .download-item__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
    .download-item__title { font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 18px; line-height: 1.3; color: #111; }
    .download-item__desc { font-family: "acumin-pro", sans-serif; font-size: 15px; line-height: 1.4; color: #555; }
    .download-item__meta { font-family: "acumin-pro", sans-serif; font-size: 13px; color: #999; margin-top: 4px; }
    .download-item__action { font-family: 'AcuminProArrow', "acumin-pro", sans-serif; font-size: 22px; color: #2b2bff; }

    .downloads-empty {
      text-align: center;
      padding: 48px 0;
      font-family: "acumin-pro", sans-serif;
      font-size: 18px;
      color: #999;
    }

    @media (max-width: 768px) {
      .downloads-page { padding: 60px 0; }
      .download-item__link { grid-template-columns: 48px 1fr auto; gap: 14px; padding: 16px 0; }
      .download-item__icon { width: 40px; height: 48px; }
      .download-item__title { font-size: 16px; }
      .downloads-chip { padding: 8px 14px; font-size: 13px; }
    }

    /* "Gerelateerde downloads" blok — voor inzet binnen pagina's */
    .related-downloads { padding: 80px 0; }
    .related-downloads .container { max-width: 1024px; }
    .related-downloads__title { margin-bottom: 32px; }
    .related-downloads__more {
      display: inline-flex; align-items: center; gap: 10px;
      margin-top: 32px;
      font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 18px;
      color: #2b2bff;
    }
    .related-downloads__more:hover { color: #021edf; }

    /* ════════════════════════════════
       NIEUWS — INDIVIDUEEL ARTIKEL + OVERZICHT
    ════════════════════════════════ */
    .article-body { padding: 80px 0; }
    .article-body .container { max-width: 800px; }
    .article-header { margin-bottom: 48px; }
    .article-header__date { font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; color: #666; display: block; margin-bottom: 16px; }
    .article-header__title { margin-bottom: 24px; }
    .article-header__intro { font-size: 22px; line-height: 1.5; color: #111; margin-bottom: 16px; }
    .article-header__author { font-family: "acumin-pro", sans-serif; font-size: 16px; color: #666; }

    .article-content { font-family: "acumin-pro", sans-serif; font-size: 18px; line-height: 1.7; color: #111; }
    .article-content h2 { font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 28px; line-height: 1.25; margin: 48px 0 16px; }
    .article-content h3 { font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 22px; line-height: 1.3; margin: 32px 0 12px; }
    .article-content p { margin-bottom: 24px; }
    .article-content a { color: #2b2bff; }
    .article-content ul, .article-content ol { margin: 0 0 24px 24px; }
    .article-content li { margin-bottom: 8px; }
    .article-content img { width: 100%; height: auto; margin: 32px 0; }
    .article-content blockquote { border-left: 3px solid #021edf; padding-left: 24px; margin: 32px 0; font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 22px; line-height: 1.4; color: #111; }

    .article-footer { margin-top: 64px; padding-top: 32px; border-top: 1px solid #ccc; }

    /* News card op overzichtspagina — link wraps het hele kaartje */
    .news-card__link { display: block; color: inherit; }
    .news-card__link:hover .news-card__photo img { transform: scale(1.04); }

    /* Paginering */
    .news__pagination { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.2); }
    .news__pagination-link { font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 16px; color: #fff; padding: 12px 20px; border: 1px solid rgba(255,255,255,0.5); transition: background 0.15s, color 0.15s; }
    .news__pagination-link:hover { background: #fff; color: #111; }
    .news__pagination-current { font-family: "acumin-pro", sans-serif; font-size: 16px; color: rgba(255,255,255,0.85); }
    .news__empty { grid-column: 1 / -1; text-align: center; font-family: "acumin-pro", sans-serif; font-size: 18px; color: rgba(255,255,255,0.85); padding: 48px 0; }

    @media (max-width: 768px) {
      .article-body { padding: 60px 0; }
      .article-header__title { font-size: 28px; }
      .article-header__intro { font-size: 18px; }
      .article-content { font-size: 16px; }
      .article-content h2 { font-size: 24px; }
      .article-content h3 { font-size: 19px; }
    }

    /* Contact form: success/error/honeypot states + textarea */
    .contact__honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
    .contact__success { padding: 20px 24px; background: #7EFFBE; color: #111; font-family: "acumin-pro-wide", sans-serif; font-weight: 600; margin-bottom: 24px; }
    .contact__errors { padding: 20px 24px; background: #DF0091; color: #fff; font-family: "acumin-pro", sans-serif; margin-bottom: 24px; }
    .contact__errors ul { margin: 8px 0 0 20px; list-style: disc; }
    .contact__input--textarea { resize: vertical; min-height: 120px; font-family: "acumin-pro", sans-serif; }

    /* Bard-output binnen content-text — gebruikt design system typografie */
    .content-text__intro { margin-bottom: 32px; }
    .content-text__body { font-family: "acumin-pro", sans-serif; font-size: 18px; line-height: 1.6; color: #111; }
    .content-text__body h2 { font-family: "cooper-black-std", serif; font-weight: 400; font-size: 32px; line-height: 1.15; color: #111; margin: 48px 0 16px; }
    .content-text__body h3 { font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 22px; line-height: 1.3; color: #111; margin: 32px 0 12px; }
    .content-text__body p { margin-bottom: 20px; }
    .content-text__body p:last-child { margin-bottom: 0; }
    .content-text__body a { color: #2b2bff; }
    .content-text__body a:hover { color: #021edf; }
    .content-text__body strong, .content-text__body b { font-weight: 600; }
    .content-text__body em, .content-text__body i { font-style: italic; }
    .content-text__body ul, .content-text__body ol { margin: 0 0 24px 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
    .content-text__body ul li { display: flex; align-items: baseline; gap: 24px; font-family: "acumin-pro", sans-serif; font-size: 24px; line-height: 1.5; }
    .content-text__body ul li::before { content: "\2192"; font-family: 'AcuminProArrow', "acumin-pro", sans-serif; flex-shrink: 0; color: #111; }
    .content-text__body ol { counter-reset: bardlist; }
    .content-text__body ol li { display: flex; align-items: baseline; gap: 24px; counter-increment: bardlist; font-family: "acumin-pro", sans-serif; font-size: 24px; line-height: 1.5; }
    .content-text__body ol li::before { content: counter(bardlist) "."; flex-shrink: 0; font-weight: 600; min-width: 24px; }
    .content-text__body li p { margin: 0; font-size: inherit; line-height: inherit; }
    .content-text__body blockquote { border-left: 3px solid #021edf; padding-left: 24px; margin: 32px 0; font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 22px; line-height: 1.4; color: #111; }
    .content-text__body blockquote p { margin-bottom: 0; }

    /* ════════════════════════════════
       VIDEO EMBED — click-to-play (Vimeo / YouTube)
    ════════════════════════════════ */
    .video-embed { padding: 80px 0; }
    .video-embed .container { max-width: 1440px; }
    .video-embed__title { margin-bottom: 32px; }
    .video-embed__wrapper { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #000; }
    .video-embed__wrapper iframe { width: 100%; height: 100%; border: 0; position: absolute; inset: 0; }
    .video-embed__poster {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      border: none; padding: 0;
      background: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .video-embed__poster img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
    .video-embed__badge {
      position: relative; z-index: 2;
      display: inline-flex; align-items: center; gap: 14px;
      padding: 16px 32px 16px 22px;
      background: #E97500; color: #fff;
      border-radius: 9999px;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
      font-family: "acumin-pro-wide", sans-serif; font-weight: 600;
      font-size: 22px; line-height: 1;
      transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
    }
    .video-embed__poster:hover .video-embed__badge,
    .video-embed__poster:focus-visible .video-embed__badge {
      background: #c96400;
      transform: scale(1.05);
      box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
    }
    .video-embed__poster:focus-visible { outline: none; }
    .video-embed__play-icon {
      width: 36px; height: 36px;
      flex-shrink: 0;
      background: rgba(255, 255, 255, 0.18);
      border-radius: 50%;
      padding: 9px;
      box-sizing: border-box;
    }
    .video-embed__label { padding-right: 4px; }
    .video-embed__caption { margin-top: 16px; font-family: "acumin-pro", sans-serif; font-size: 16px; color: #666; text-align: center; }

    @media (max-width: 768px) {
      .video-embed { padding: 60px 0; }
      .video-embed__badge { font-size: 18px; padding: 12px 22px 12px 18px; }
    }

    /* Article featured image (16:9, in container) */
    .article-image { aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 48px; max-width: 1440px; margin-left: auto; margin-right: auto; }
    .article-image img { width: 100%; height: 100%; object-fit: cover; }
    .article-image-wrap { padding-top: 40px; padding-bottom: 0; max-width: 1440px; }


    /* Cookie banner — alleen actief als GA4 ID is ingevuld in Globals */
    .cookie-banner {
      position: fixed; bottom: 24px; left: 24px; right: 24px;
      z-index: 1000;
      max-width: 760px; margin: 0 auto;
      background: #fff;
      border: 1px solid #111;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
      animation: cookieBannerSlideUp 0.4s ease;
    }
    @keyframes cookieBannerSlideUp {
      from { transform: translateY(20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    .cookie-banner__inner { display: flex; flex-direction: column; gap: 16px; padding: 24px 28px; }
    .cookie-banner__title { font-family: "acumin-pro-wide", sans-serif; font-weight: 600; font-size: 16px; color: #111; margin-bottom: 4px; }
    .cookie-banner__text p { font-family: "acumin-pro", sans-serif; font-size: 15px; line-height: 1.5; color: #111; }
    .cookie-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; }
    .cookie-banner__actions .btn { flex: 1; justify-content: center; font-size: 15px; padding: 10px 16px; }

    @media (min-width: 700px) {
      .cookie-banner__inner { flex-direction: row; align-items: center; gap: 28px; }
      .cookie-banner__text { flex: 1; }
      .cookie-banner__actions { flex-shrink: 0; flex-wrap: nowrap; }
      .cookie-banner__actions .btn { flex: none; }
    }