:root{
    --oranje:#F25623;
    --groen:#3ECF8E;
    --oranje-d:#C4400F;
    --op-oranje:#14182B;
    --papier:#FAF6EE;
    --r:8px;
    --schuif:1.9rem;
  }

  /* ══ Vast schema: papier met donkere secties ertussen ══ */
  :root{
    --grond:#FAF6EE; --vlak:#F1EADC; --vlak-warm:#EAE0CD; --paneel:#FFFFFF;
    --tekst:#14182B; --tekst-zacht:#5D5A50; --rand:#DCD1BC;
    --donker:#14182B; --donker-tekst:#FBF7F0; --donker-zacht:#C2C7DE; --donker-rand:#2C3252;
  }
  /* secties die omslaan naar donker: tokens lokaal herdefiniëren */
  :root .sec[data-duo]{
    --grond:#14182B; --vlak:#1D2440; --vlak-warm:#232A49; --paneel:#242C4A;
    --tekst:#FBF7F0; --tekst-zacht:#A9ADC6; --rand:#2C3252;
    background:#14182B; color:#FBF7F0;
  }

  *{box-sizing:border-box}
  html{overflow-x:clip;scroll-behavior:smooth}
  /* vangnet tegen zijwaarts schuiven op mobiel; clip maakt geen scroll-
     container, zodat de sticky navigatiebalk blijft werken */
  html,body{overflow-x:clip;max-width:100%}
  body{
    margin:0;background:var(--grond);color:var(--tekst);
    font-family:Figtree,-apple-system,"Segoe UI",Arial,sans-serif;
    font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block}
  p{margin:0}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1480px;margin:0 auto;padding:0 2.4rem}
  @media(max-width:760px){.wrap{padding:0 1.4rem}}

  .d{
    font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;
    text-transform:uppercase;letter-spacing:-.042em;line-height:1.02;
    margin:0;padding-bottom:.08em;text-wrap:balance;
  }
  h2.d{font-size:clamp(2rem,4.4vw,3.4rem)}
  .lead{color:var(--tekst-zacht);font-size:1.05rem;max-width:38ch}
  /* het bovenschrift draagt de sectie mee: groot en zwaar genoeg om te lezen,
     in de inktkleur in plaats van het zachte grijs */
  .lab{font-size:clamp(.88rem,1.05vw,1rem);letter-spacing:.15em;text-transform:uppercase;
    color:var(--tekst);font-weight:800;line-height:1.3}
  .lab i{font-style:italic;font-weight:900;font-size:1.18em;color:var(--oranje);margin-right:.1em}
  .sec{padding:6rem 0}
  /* secties lijnen uit met hero en footer: zelfde binnenmaat als .wrap,
     in plaats van de smallere standaardbreedte van de paginabouwer */
  .sec.e-con > .e-con-inner{width:100%;max-width:1480px;margin-inline:auto;
    padding-inline:2.4rem}
  @media(max-width:600px){
    .sec.e-con > .e-con-inner{padding-inline:1.4rem}
  }

  /* teamvideo: posterbeeld met afspeelknop, YouTube laadt pas bij een klik */
  .aoa-yt{position:relative;z-index:1;border-radius:var(--r);overflow:hidden;
    aspect-ratio:16/9;background:#0E1225;line-height:0}
  .aoa-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
  .aoa-yt-knop{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;cursor:pointer;
    background:none;display:block;color:#FFFFFF}
  .aoa-yt-knop img{width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .6s cubic-bezier(.16,1,.3,1)}
  .aoa-yt-knop::after{content:"";position:absolute;inset:0;
    background:linear-gradient(to top,rgba(20,24,43,.72),rgba(20,24,43,.12) 62%,rgba(20,24,43,.05))}
  .aoa-yt-knop:hover img{transform:scale(1.04)}
  .aoa-yt-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);
    width:4.4rem;height:4.4rem;border-radius:50%;background:var(--oranje);color:#FFFFFF;
    display:grid;place-items:center;box-shadow:0 18px 38px -14px rgba(20,24,43,.7);
    transition:transform .3s cubic-bezier(.34,1.4,.64,1),background .25s}
  .aoa-yt-play svg{width:1.9rem;height:1.9rem;margin-left:.14rem}
  .aoa-yt-knop:hover .aoa-yt-play{transform:translate(-50%,-50%) scale(1.08);background:#FF6B39}
  .aoa-yt-knop:focus-visible{outline:3px solid var(--oranje);outline-offset:3px}
  .aoa-yt-tekst{position:absolute;z-index:2;left:1.2rem;right:1.2rem;bottom:1.1rem;
    font-family:Figtree,Arial,sans-serif;font-size:.9rem;font-weight:700;line-height:1.35;
    text-align:left;color:#FFFFFF;text-shadow:0 1px 12px rgba(20,24,43,.6)}

  /* kennismaken: tekst links, beeld rechts */
  .cta-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
    column-gap:clamp(1.8rem,3.4vw,3.4rem);align-items:center}
  .cta-beeld{margin:0;min-width:0;line-height:0;font-size:0;position:relative;
    border-radius:var(--r);overflow:hidden;
    box-shadow:0 32px 60px -34px rgba(0,0,0,.65)}
  .cta-duo > .cta-beeld img,
  .cta-beeld img{width:100%;height:auto;display:block;aspect-ratio:3/2;object-fit:cover;
    object-position:50% 42%;border-radius:0}
  @media(max-width:900px){
    .cta-duo{grid-template-columns:1fr;row-gap:2rem}
    .cta-beeld img{aspect-ratio:16/10}
  }
  .sec.mist{background:var(--vlak)}
  .sec.zand{background:var(--vlak-warm)}
  .sec.donker{background:var(--donker);color:var(--donker-tekst)}
  .sec.donker .lab{color:#E8EBF7}
  .sec.donker .lab i{color:var(--oranje)}
  .sec.donker .lead{color:var(--donker-zacht)}

  .knop{display:inline-flex;align-items:center;gap:.5rem;background:var(--oranje);color:var(--op-oranje);font-weight:700;font-size:.95rem;padding:.85rem 1.5rem;border-radius:6px;transition:background .2s,transform .2s}
  .knop:hover{background:#FF6B39;transform:translateY(-1px)}
  .knop-l{background:transparent;color:var(--tekst);border:1px solid var(--rand)}
  .knop-l:hover{background:var(--tekst);color:var(--grond);border-color:var(--tekst)}
  .knop-w{background:transparent;color:var(--donker-tekst);border:1px solid rgba(255,255,255,.32)}
  .knop-w:hover{background:var(--donker-tekst);color:var(--donker);border-color:var(--donker-tekst)}
  .knop:focus-visible{outline:3px solid var(--oranje);outline-offset:3px}

  /* verschoven kader achter het beeld */
  .kader{position:relative;isolation:isolate}
  .kader>img{position:relative;z-index:1;border-radius:8px;width:100%}
  .kader::before{
    content:"";position:absolute;z-index:0;
    left:var(--schuif);top:var(--schuif);right:calc(-1 * var(--schuif));bottom:calc(-1 * var(--schuif));
    border:1px solid var(--rand);border-radius:8px;
  }
  .kader.links::before{left:calc(-1 * var(--schuif));right:var(--schuif)}
  .sec.donker .kader::before{border-color:var(--donker-rand)}

  /* oranje hoekhaken: sluiten een licht vlak af tegen een lichte achtergrond */
  .hoek{position:relative}
  .hoek::before,.hoek::after{
    content:"";position:absolute;width:1.35rem;height:1.35rem;
    border:2px solid var(--oranje);pointer-events:none;z-index:5;
  }
  .sec.donker .hoek::before,.sec.donker .hoek::after{width:1.7rem;height:1.7rem;border-width:3px}
  .hoek::before{top:0;left:0;border-right-color:transparent;border-bottom-color:transparent}
  .hoek::after{bottom:0;right:0;border-left-color:transparent;border-top-color:transparent}
  .hoek.spiegel::before{left:auto;right:0;border-right-color:var(--oranje);border-left-color:transparent}
  .hoek.spiegel::after{right:auto;left:0;border-left-color:var(--oranje);border-right-color:transparent}

  /* nav */
  .bar,.hero{
    --grond:var(--donker); --vlak:#1D2440; --vlak-warm:#232A49; --paneel:#242C4A;
    --tekst:var(--donker-tekst); --tekst-zacht:var(--donker-zacht); --rand:var(--donker-rand);
    background:var(--donker); color:var(--donker-tekst);
  }
  .bar{padding:1.45rem 0;position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--donker) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .bar-in{display:flex;align-items:center;justify-content:space-between;gap:2rem}
  .bar .merk{width:12.3rem;color:var(--tekst);flex:none}
  .bar .links{display:flex;gap:2.3rem;font-size:1.04rem;font-weight:600;color:#DCE0EF}
  .bar .links a{position:relative;padding:.15rem 0;transition:color .18s}
  .bar .links a:hover{color:#FFFFFF}
  /* onderstreping die bij hover uitschuift, zodat het duidelijk klikbaar is */
  .bar .links a::after{content:"";position:absolute;left:0;right:0;bottom:-.15rem;height:2px;
    background:var(--oranje);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
  .bar .links a:hover::after{transform:scaleX(1)}
  .bar .links a:focus-visible{outline:2px solid var(--oranje);outline-offset:4px;border-radius:2px}
  .bar-rechts{display:flex;align-items:center;gap:2.2rem}
  /* taalschakelaar rechtsboven */
  .taal{display:flex;align-items:center;gap:.12rem;flex:none;
    border:1px solid var(--donker-rand);border-radius:999px;padding:.2rem}
  .taal-knop{font-size:.84rem;font-weight:700;letter-spacing:.06em;color:#AEB4D4;
    padding:.3rem .72rem;border-radius:999px;line-height:1;
    transition:color .18s,background .18s}
  .taal-knop:hover{color:#FFFFFF}
  .taal-knop.aan{background:rgba(255,255,255,.13);color:#FFFFFF}
  .taal-knop:focus-visible{outline:2px solid var(--oranje);outline-offset:2px}
  @media(max-width:980px){.bar .links{display:none}.bar-rechts{gap:0}}
  @media(max-width:520px){.taal-knop{padding:.28rem .6rem;font-size:.8rem}}

  /* ── hero: zie het Hero v14-blok onderaan dit bestand ── */

  .geluid{
    position:absolute;z-index:6;right:1rem;bottom:1rem;width:2.9rem;height:2.9rem;border-radius:50%;
    border:0;cursor:pointer;background:rgba(20,24,43,.7);color:#FFFFFF;
    display:grid;place-items:center;transition:background .2s,transform .2s;
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  }
  .geluid:hover{background:var(--oranje);color:var(--op-oranje);transform:scale(1.06)}
  .geluid:focus-visible{outline:3px solid var(--oranje);outline-offset:3px}
  .geluid svg{width:1.1rem;height:1.1rem}
  .geluid .aan{display:none}
  .geluid[aria-pressed="true"] .uit{display:none}
  .geluid[aria-pressed="true"] .aan{display:block}

  /* partners */
  .partners{background:var(--vlak);padding:2.1rem 0}
  .partners-in{display:flex;gap:1.4rem 3.2rem;flex-wrap:wrap;justify-content:space-between;align-items:center}
  .partners .kop{font-size:.73rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tekst-zacht);font-weight:700;flex:none}
  .partner{display:inline-flex;align-items:center;gap:.65rem;color:var(--tekst)}
  .partner span{transition:color .2s}
  .partner:hover span{color:var(--oranje-d)}
  .partner svg{width:1.55rem;height:1.55rem;flex:none}
  .partner span{font-size:.92rem;font-weight:600;white-space:nowrap;color:var(--tekst-zacht)}
  @media(max-width:760px){.partners-in{justify-content:flex-start;gap:1.2rem 2rem}.partners .kop{width:100%}}
  /* logostreep met klantlogo's: kopje boven, logo's in een rij eronder */
  .partners.logos{padding:2.9rem 0}
  .partners.logos .partners-in{flex-wrap:wrap;justify-content:space-between;align-items:center;
    gap:1.8rem 1.2rem}
  .partners.logos .kop{width:100%;flex:none;margin-bottom:.2rem}
  .partner.klant{display:inline-flex;align-items:center;justify-content:center}
  .partner.klant img{flex:none;width:128px;height:34px;max-width:128px;object-fit:contain;object-position:center;opacity:.82;transition:opacity .25s ease}
  .partner.klant:hover img{opacity:1}
  @media(max-width:1100px){.partner.klant img{width:112px;max-width:112px;height:30px}}
  @media(max-width:820px){.partners.logos .partners-in{justify-content:space-around;gap:1.6rem 1rem}.partner.klant img{width:96px;max-width:96px;height:26px}}
  @media(max-width:560px){.partner.klant img{width:88px;max-width:88px;height:24px}}

  /* ── waarom: beeld links, tekst rechts ── */
  .waarom-g{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center}
  .waarom-beeld img{aspect-ratio:4/5;object-fit:cover}
  /* kop en intro even breed als de genummerde punten eronder.
     text-wrap:balance maakte van de kop vier korte regels midden in een
     brede kolom; de .lead stond op 38ch en brak daardoor ook te vroeg af. */
  .waarom-g h2.d{max-width:none;text-wrap:normal;margin-bottom:1.5rem;
    font-size:clamp(1.85rem,2.9vw,2.65rem);line-height:1.06}
  .waarom-g .lead{max-width:none}
  .waarom-g .lab{margin-bottom:1.1rem}
  .waarom-g .punt:first-of-type{margin-top:2.5rem}
  .waarom-g .punt{padding:1.35rem 0}
  @media(max-width:900px){
    .waarom-g h2.d{text-wrap:balance}
    .waarom-g .punt:first-of-type{margin-top:2rem}
  }
  .waarom-g-html{grid-template-columns:1.2fr 1fr;gap:4rem}
  .waarom-beeld.beeld-vrij{position:relative}
  .waarom-beeld.beeld-vrij>.beeld-html{width:100%}
  .waarom-beeld.beeld-vrij>.beeld-html>*{max-width:100%}
  @media(max-width:900px){
    .waarom-g-html{grid-template-columns:1fr;gap:2.6rem}
    .waarom-g-html>.waarom-beeld{order:2}
  }
  .waarom h2{margin-bottom:1.2rem}
  .punt{display:grid;grid-template-columns:2.4rem 1fr;gap:1rem;padding:1.2rem 0;border-top:1px solid var(--rand)}
  .punt:first-of-type{margin-top:2rem}
  .punt .n{font-weight:800;font-size:1.18rem;color:var(--oranje);padding-top:0;letter-spacing:-.02em}
  .punt b{display:block;font-weight:700;font-size:1.02rem;margin-bottom:.15rem}
  .punt p{color:var(--tekst-zacht);font-size:.97rem}
  @media(max-width:900px){.waarom-g{grid-template-columns:1fr;gap:3.4rem}}

  /* diensten */
  .diensten h2{max-width:15ch;margin-bottom:2.8rem}
  .dienst{display:grid;grid-template-columns:4.4rem 1fr 1.15fr;gap:2.4rem;align-items:start;padding:2.1rem 0;border-top:1px solid var(--rand)}
  .dienst:last-of-type{border-bottom:1px solid var(--rand)}
  .dienst .n{font-size:1.18rem;color:var(--oranje);font-weight:800;padding-top:.15rem;letter-spacing:-.02em}
  .dienst h3{font-family:Archivo,Arial,sans-serif;font-weight:700;font-style:italic;text-transform:uppercase;letter-spacing:-.035em;font-size:clamp(1.3rem,2.3vw,1.9rem);margin:0;padding-bottom:.04em}
  .dienst p{color:var(--tekst-zacht);font-size:1rem}
  .d-rechts{display:flex;flex-direction:column;gap:.8rem}
  .d-meta{margin:0;display:flex;gap:.7rem;font-size:.88rem;color:var(--tekst-zacht)}
  .d-meta b{flex:none;width:5.4rem;color:var(--oranje);font-weight:800;font-size:.71rem;text-transform:uppercase;letter-spacing:.09em;padding-top:.3em}
  @media(max-width:860px){.dienst{grid-template-columns:2.8rem 1fr;gap:.6rem 1.4rem}.dienst .d-rechts{grid-column:2}}

  /* ── AI ── */
  .ai-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
  .ai-k{background:var(--vlak);border-radius:var(--r);padding:2rem 1.9rem;position:relative;display:flex;flex-direction:column;gap:.8rem;transition:transform .45s cubic-bezier(.22,1,.36,1),background .3s}
  .ai-k:hover{transform:translateY(-4px);background:var(--vlak-warm)}
  .ai-k .n{font-size:.71rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--oranje)}
  .ai-k h3{font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;font-size:1.14rem;line-height:1.15;letter-spacing:-.03em;margin:0;padding-bottom:.06em}
  .ai-k p{font-size:.95rem;color:var(--tekst-zacht);margin:0}
  @media(max-width:900px){.ai-g{grid-template-columns:1fr}}

  /* uitspraak */
  .uitspraak-in{display:grid;grid-template-columns:1fr 19rem;gap:4rem;align-items:end}
  .uitspraak .groot{font-size:clamp(1.9rem,4.8vw,4rem);max-width:18ch}
  .uitspraak .streep{width:5rem;height:5px;background:var(--oranje);margin-bottom:1.8rem;border-radius:3px}
  .kkader{position:relative;isolation:isolate}
  .kkader .vlak{background:var(--paneel);border-radius:8px;padding:1.9rem;position:relative;z-index:1}
  .kkader::before{content:"";position:absolute;z-index:0;inset:1.3rem -1.3rem -1.3rem 1.3rem;border:1px solid var(--rand);border-radius:8px}
  .kkader b{display:block;font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;font-size:2.7rem;letter-spacing:-.05em;line-height:1;padding-bottom:.04em}
  .kkader span{display:block;margin-top:.6rem;font-size:.92rem;color:var(--tekst-zacht)}
  @media(max-width:900px){.uitspraak-in{grid-template-columns:1fr;gap:3rem}}

  /* werkwijze */
  .werkwijze h2{max-width:14ch;margin-bottom:1rem}
  .stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:3rem}
  .stap{border-top:2px solid var(--tekst);padding-top:1.3rem}
  .stap .n{font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;font-size:2.2rem;letter-spacing:-.05em;color:var(--oranje);line-height:1;margin-bottom:.8rem;display:block}
  .stap b{display:block;font-family:Archivo,Arial,sans-serif;font-weight:700;font-style:italic;text-transform:uppercase;font-size:1.05rem;letter-spacing:-.03em;margin-bottom:.5rem}
  .stap p{color:var(--tekst-zacht);font-size:.95rem}
  @media(max-width:900px){.stappen{grid-template-columns:1fr 1fr;gap:1.8rem}}
  @media(max-width:520px){.stappen{grid-template-columns:1fr}}

  /* werk */
  .werk-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:3.4rem}
  .zaken{display:grid;gap:5.5rem}
  .zaak{position:relative;display:grid;grid-template-columns:1.15fr .85fr;align-items:center}
  .zaak-beeld img{aspect-ratio:4/3;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
  .zaak:hover .zaak-beeld img{transform:scale(1.02)}
  .zaak-tekst{position:relative;z-index:3;background:var(--vlak);padding:2.2rem 1.7rem 2.2rem 2.2rem;margin-left:-5rem}
  .zaak.om .zaak-beeld{order:2}
  .zaak.om .zaak-tekst{padding:2.2rem 2.2rem 2.2rem 1.7rem;margin-left:0;margin-right:-5rem;text-align:right}
  .zaak h3{font-size:clamp(1.5rem,3vw,2.5rem);margin:.6rem 0 .8rem}
  .zaak p{color:var(--tekst-zacht);font-size:1rem}
  .zaak .uit{margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--rand);display:flex;align-items:baseline;gap:.7rem}
  .zaak.om .uit{justify-content:flex-end}
  .zaak .uit b{font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;font-size:2rem;letter-spacing:-.05em;color:var(--oranje);padding-bottom:.04em}
  .zaak .uit span{font-size:.9rem;color:var(--tekst-zacht)}
  @media(max-width:900px){
    .zaak{grid-template-columns:1fr}
    .zaak.om .zaak-beeld{order:0}
    .zaak-tekst,.zaak.om .zaak-tekst{margin:0;padding:1.8rem 0 0;text-align:left;background:none}
    .zaak.om .uit{justify-content:flex-start}
  }

  /* cijferband op navy */
  .cijfers-g{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;margin-top:2.6rem}
  .cijfer{border-top:1px solid var(--donker-rand);padding-top:1.4rem}
  .cijfer b{display:block;font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;font-size:clamp(2.6rem,5vw,4.2rem);letter-spacing:-.055em;line-height:1;padding-bottom:.04em}
  .cijfer span{display:block;margin-top:.7rem;color:var(--donker-zacht);font-size:.96rem;max-width:24ch}
  @media(max-width:760px){.cijfers-g{grid-template-columns:1fr;gap:2rem}}

  /* team */
  .team-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:3rem}
  .team h2{max-width:13ch}
  .mensen{display:grid;grid-template-columns:repeat(4,1fr);gap:2.4rem}
  .mens{--schuif:1.1rem}
  .mens img{aspect-ratio:4/5;object-fit:cover;object-position:top center}
  .mens b{display:block;margin-top:1.4rem;font-family:Archivo,Arial,sans-serif;font-weight:700;font-style:italic;text-transform:uppercase;font-size:1rem;letter-spacing:-.03em}
  .mens span{font-size:.87rem;color:var(--tekst-zacht)}
  @media(max-width:640px){.mensen{grid-template-columns:1fr 1fr;gap:2rem}}

  /* citaat */
  .citaat{text-align:center}
  .citaat .mk{width:2.8rem;margin:0 auto 1.8rem;color:var(--oranje)}
  .citaat blockquote{margin:0 auto;font-family:Archivo,Arial,sans-serif;font-weight:700;font-style:italic;font-size:clamp(1.5rem,3.6vw,2.8rem);letter-spacing:-.038em;line-height:1.14;max-width:20ch;padding-bottom:.05em}
  .citaat .bron{margin-top:1.5rem;font-size:.94rem;color:var(--tekst-zacht);font-weight:500}

  /* veelgestelde vragen */
  .vragen-g{display:grid;grid-template-columns:.85fr 1.15fr;gap:4rem;align-items:start}
  .vraag{border-top:1px solid var(--rand);padding:1.5rem 0}
  .vraag:last-of-type{border-bottom:1px solid var(--rand)}
  .vraag summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1.5rem;align-items:center;font-family:Archivo,Arial,sans-serif;font-weight:700;font-style:italic;text-transform:uppercase;font-size:1.02rem;letter-spacing:-.03em}
  .vraag summary::-webkit-details-marker{display:none}
  .vraag summary::after{content:"+";font-family:Figtree,sans-serif;font-style:normal;font-weight:600;font-size:1.6rem;color:var(--oranje);line-height:1;flex:none}
  .vraag[open] summary::after{content:"–"}
  .vraag p{margin-top:.9rem;color:var(--tekst-zacht);font-size:.98rem;max-width:52ch}
  .vraag summary:focus-visible{outline:3px solid var(--oranje);outline-offset:4px}
  @media(max-width:900px){.vragen-g{grid-template-columns:1fr;gap:2.4rem}}

  /* slot */
  .slot-in{background:var(--vlak);border-radius:12px;padding:4.2rem 3.2rem;position:relative;isolation:isolate}
  .slot-in::before{content:"";position:absolute;z-index:0;inset:1.9rem -1.9rem -1.9rem 1.9rem;border:1px solid var(--rand);border-radius:12px}
  .slot-g{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:3.4rem;align-items:center}
  .slot h2{max-width:14ch;margin-bottom:1.1rem}
  .slot-acties{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem}
  .punten{list-style:none;margin:0;padding:0}
  .punten li{display:flex;gap:.8rem;padding:.85rem 0;border-top:1px solid rgba(20,24,43,.13);font-size:.97rem}
  .punten li:first-child{border-top:0}
  .punten .v{width:1.3rem;height:1.3rem;border-radius:50%;background:var(--oranje);color:var(--op-oranje);display:grid;place-items:center;flex:none;margin-top:.2rem}
  .punten .v svg{width:.7rem;height:.7rem;stroke-width:3.4}
  @media(max-width:900px){.slot-g{grid-template-columns:1fr;gap:2.4rem}.slot-in{padding:2.6rem 1.7rem}.slot-in::before{inset:1.1rem -1.1rem -1.1rem 1.1rem}}

  /* footer op navy */
  footer.site{background:var(--tekst);color:var(--donker-zacht);padding:4.4rem 0 2.4rem}
  .voet-g{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:3rem;padding-bottom:3rem;border-bottom:1px solid var(--donker-rand)}
  .voet-g .merk{width:12rem;color:var(--donker-tekst);margin-bottom:1.2rem}
  .voet-g p{font-size:.95rem;max-width:26ch}
  .voet-kol b{display:block;color:var(--donker-tekst);font-family:Archivo,Arial,sans-serif;font-weight:700;font-style:italic;text-transform:uppercase;font-size:.86rem;letter-spacing:.02em;margin-bottom:1rem}
  .voet-kol a,.voet-kol span{display:block;font-size:.94rem;padding:.28rem 0}
  .voet-kol a:hover{color:var(--oranje)}
  .voet-onder{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-top:1.6rem;font-size:.86rem}
  @media(max-width:900px){.voet-g{grid-template-columns:1fr 1fr;gap:2.4rem}}
  @media(max-width:560px){.voet-g{grid-template-columns:1fr}}

  /* ── videosectie ── */
  .video h2{max-width:16ch;margin-bottom:2.6rem}
  .speler{position:relative;max-width:64rem;margin:0 auto;cursor:pointer}
  .speler>video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;position:relative;z-index:1;display:block;background:#000}
  .speler::before{border-color:var(--donker-rand)}
  .video-onder{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:center;max-width:64rem;margin:1.5rem auto 0;color:var(--donker-zacht);font-size:.9rem}
  .video-onder .duur{display:inline-flex;align-items:center;gap:.5rem;font-weight:600}
  .video-onder .duur i{width:.5rem;height:.5rem;border-radius:50%;background:var(--oranje);display:block;font-style:normal}


  /* ── de koopreis: het kernbeeld ── */
  .reis{margin-top:3.4rem}
  .reis-balk{display:grid;grid-template-columns:44fr 34fr 22fr;gap:4px;border-radius:var(--r);overflow:hidden}
  .reis-blok{padding:1.7rem 1.5rem 1.9rem;min-height:11rem;display:flex;flex-direction:column;justify-content:flex-end;gap:.4rem}
  .reis-blok.stil{background:var(--vlak)}
  .reis-blok.stil:nth-of-type(2){background:color-mix(in srgb,var(--vlak) 60%,var(--grond))}
  .reis-blok.actief{background:var(--oranje);color:var(--op-oranje)}
  .reis-blok b{font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;font-size:1.05rem;letter-spacing:-.03em}
  .reis-blok span{font-size:.9rem;color:var(--tekst-zacht);max-width:30ch}
  .reis-blok.actief span{color:var(--op-oranje);opacity:.82}
  .reis-as{display:grid;grid-template-columns:44fr 34fr 22fr;gap:4px;margin-top:.7rem;font-size:.76rem;font-weight:600;color:var(--tekst-zacht)}
  .reis-as span:last-child{text-align:right}
  .reis-beugels{display:grid;grid-template-columns:78fr 22fr;gap:4px;margin-top:1.6rem}
  .beugel{border-top:2px solid var(--rand);padding-top:.9rem;font-size:.95rem;color:var(--tekst-zacht)}
  .beugel b{display:block;font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;font-size:1rem;letter-spacing:-.03em;color:var(--tekst);margin-bottom:.25rem}
  .beugel.oranje{border-top-color:var(--oranje)}
  .beugel.oranje b{color:var(--oranje-d)}
  .reis-slot{margin-top:2.6rem;font-size:1.08rem;max-width:52ch;font-weight:500}
  @media(max-width:820px){
    .reis-balk,.reis-as,.reis-beugels{grid-template-columns:1fr;gap:6px}
    .reis-blok{min-height:0}
    .reis-as span:last-child{text-align:left}
  }

  /* ── de omslag: wat je meestal krijgt tegenover wat wij doen ── */
  .omslag-g{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:3rem}
  .kolom{border-radius:var(--r);padding:2.1rem 2.2rem}
  .kolom.oud{background:color-mix(in srgb,var(--tekst) 6%,transparent)}
  .kolom.nieuw{background:var(--vlak);position:relative}
  .kolom h3{font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;font-size:1.1rem;letter-spacing:-.03em;margin:0 0 1.4rem}
  .kolom.oud h3{color:var(--tekst-zacht)}
  .kolom ul{list-style:none;margin:0;padding:0}
  .kolom li{display:flex;gap:.85rem;padding:.85rem 0;border-top:1px solid var(--rand);font-size:.99rem}
  .kolom li:first-child{border-top:0}
  .kolom.oud li{color:var(--tekst-zacht)}
  .kolom .t{flex:none;width:1.3rem;height:1.3rem;border-radius:50%;display:grid;place-items:center;margin-top:.2rem;font-size:.7rem;font-weight:800}
  .kolom.oud .t{background:color-mix(in srgb,var(--tekst) 12%,transparent);color:var(--tekst-zacht)}
  .kolom.nieuw .t{background:var(--oranje);color:var(--op-oranje)}
  .kolom.nieuw .t svg{width:.72rem;height:.72rem;stroke-width:3.4}
  @media(max-width:820px){.omslag-g{grid-template-columns:1fr}}

  /* ── bezwaren ── */
  .bezwaren-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:3rem}
  .bezwaar{background:var(--vlak);border-radius:var(--r);padding:2rem 1.9rem;display:flex;flex-direction:column;gap:.9rem}
  .bezwaar .vraag-t{font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;font-size:1.12rem;line-height:1.2;letter-spacing:-.03em;padding-bottom:.9rem;border-bottom:2px solid var(--oranje)}
  .bezwaar p{font-size:.97rem;color:var(--tekst-zacht)}
  @media(max-width:900px){.bezwaren-g{grid-template-columns:1fr}}

  /* ── beweging: veert in zodra een element in beeld komt ── */
  .in{animation:opkomen .9s cubic-bezier(.22,1.12,.36,1) both}
  .in.v1{animation-delay:.1s}
  .in.v2{animation-delay:.24s}
  .in.v3{animation-delay:.38s}
  .in.v4{animation-delay:.5s}
  @keyframes opkomen{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}

  /* alleen verbergen als het script draait; zonder script blijft alles zichtbaar */
  .js-anim .rv,.js-anim .rv-traag{
    opacity:0;
    transition:opacity .7s cubic-bezier(.22,1,.36,1),
               transform .85s cubic-bezier(.22,1.14,.36,1);
    transition-delay:calc(var(--i,0) * 80ms);
  }
  .js-anim .rv{transform:translateY(38px)}
  .js-anim .rv-traag{transform:translateY(52px) scale(.975)}
  .js-anim .rv.v-links{transform:translateX(-54px)}
  .js-anim .rv.v-rechts{transform:translateX(54px)}
  .js-anim .rv.v-schaal{transform:scale(.9)}
  .js-anim .rv.zicht,.js-anim .rv-traag.zicht{opacity:1;transform:none}

  /* ── oplichten bij hover ── */
  .dienst{transition:background .28s ease,padding-left .28s cubic-bezier(.22,1,.36,1)}
  .dienst:hover{background:rgba(242,86,35,.05);padding-left:1rem}
  .dienst .n,.dienst h3{transition:transform .28s cubic-bezier(.22,1.2,.36,1)}
  .dienst:hover .n{transform:scale(1.18)}
  .dienst:hover h3{transform:translateX(.4rem)}

  .punt{transition:border-color .25s,background .25s}
  .punt:hover{border-top-color:var(--oranje);background:rgba(242,86,35,.04)}
  .punt .n{transition:transform .28s cubic-bezier(.22,1.2,.36,1)}
  .punt:hover .n{transform:scale(1.2)}

  .stap{transition:border-top-color .25s}
  .stap:hover{border-top-color:var(--oranje)}
  .stap .n{transition:transform .3s cubic-bezier(.22,1.2,.36,1)}
  .stap:hover .n{transform:translateY(-.25rem) scale(1.06)}

  .cijfer{transition:border-top-color .25s}
  .cijfer:hover{border-top-color:var(--oranje)}

  .zaak-tekst{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s}
  .zaak:hover .zaak-tekst{transform:translateY(-6px);box-shadow:0 18px 40px rgba(20,24,43,.10)}
  .zaak .hoek::before,.zaak .hoek::after{transition:width .3s cubic-bezier(.22,1.2,.36,1),height .3s cubic-bezier(.22,1.2,.36,1)}
  .zaak:hover .hoek::before,.zaak:hover .hoek::after{width:2.1rem;height:2.1rem}

  .mens .kader{transition:transform .32s cubic-bezier(.22,1.1,.36,1)}
  .mens:hover .kader{transform:translateY(-8px)}
  .mens .kader::before{transition:border-color .3s,transform .32s cubic-bezier(.22,1.1,.36,1)}
  .mens:hover .kader::before{border-color:var(--oranje);transform:translate(-.3rem,-.3rem)}
  .mens b{transition:color .22s}
  .mens:hover b{color:var(--oranje)}

  .kkader .vlak{transition:transform .3s cubic-bezier(.22,1,.36,1)}
  .kkader:hover .vlak{transform:translate(-.3rem,-.3rem)}
  .kkader::before{transition:border-color .3s}
  .kkader:hover::before{border-color:var(--oranje)}

  .vraag summary{transition:color .22s}
  .vraag:hover summary{color:var(--oranje)}
  .vraag summary::after{transition:transform .3s cubic-bezier(.22,1.2,.36,1)}
  .vraag:hover summary::after{transform:scale(1.25)}

  .punten li{transition:background .25s,padding-left .25s}
  .punten li:hover{background:rgba(242,86,35,.06);padding-left:.6rem}
  .punten .v{transition:transform .28s cubic-bezier(.22,1.2,.36,1)}
  .punten li:hover .v{transform:scale(1.18)}

  .partner{transition:opacity .22s,transform .28s cubic-bezier(.22,1.2,.36,1)}
  .partner:hover{transform:translateY(-3px)}

  .voet-kol a{transition:color .2s,padding-left .22s}
  .voet-kol a:hover{padding-left:.35rem}


  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
  @media(max-width:430px){
    :root{--schuif:1.1rem}
    .sec{padding:4rem 0}
    .hero-acties{flex-direction:column;align-items:stretch}
    .hero-acties .knop{justify-content:center}
  }

  /* kleine schermen: de knop in de balk past niet op twee regels */
  @media(max-width:620px){
    .bar{padding:1.1rem 0}
    .bar .merk{width:9.8rem}
    .bar .knop{font-size:.84rem;padding:.7rem 1rem;white-space:nowrap}
  }
  @media(max-width:380px){
    .bar .knop{font-size:.79rem;padding:.62rem .8rem}
  }

  /* ── de pijplijnradar als motor: vier fasen op één gesloten circuit ──
     Een rail loopt door de vier nummerschijfjes; bij het scrollen trekt de
     oranje stroomlijn zich erdoorheen, veren schijfjes en kaarten op in dat
     ritme, en sluit de retourlijn om de kaarten het systeem terug naar 01. */
  /* functioneel kopje direct boven de stappenrij */
  .motor-kopje{margin:2.6rem 0 0;font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;
    text-transform:uppercase;letter-spacing:-.026em;font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.1;
    color:var(--tekst);padding-bottom:1rem;border-bottom:1px solid var(--rand)}
  .motor{margin-top:2.2rem;position:relative;padding:44px 0 26px}
  .motor-kopje + .motor{margin-top:2.2rem}
  .motor-rij{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:stretch}
  .motor-rail{position:absolute;top:16px;left:-18px;right:-18px;height:2px;border-radius:1px;
    background:rgba(20,24,43,.13);overflow:hidden}
  .motor-rail i{position:absolute;inset:0;background:var(--oranje);transform-origin:0 50%}
  .motor-lus{position:absolute;pointer-events:none;left:-18px;right:-18px;top:17px;bottom:0;
    border:2px solid rgba(20,24,43,.14);border-top:0;border-radius:0 0 14px 14px}
  /* het pijlpuntje op de linkerflank: de stroom keert terug naar fase 01 */
  .motor-lus::after{content:"";position:absolute;left:-8px;top:32%;
    border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:9px solid var(--oranje-d)}
  .trap-b{background:var(--paneel);border:1px solid var(--rand);border-radius:var(--r);
    padding:1.7rem 1.6rem 1.8rem;position:relative;display:flex;flex-direction:column;gap:.55rem;
    box-shadow:0 22px 44px -32px rgba(93,74,40,.5);
    transition:background .3s,border-color .3s,transform .35s cubic-bezier(.22,1,.36,1)}
  /* oranje is een reactie op de muis, geen vaste staat van de laatste fase */
  .trap-b:hover{transform:translateY(-5px);background:var(--oranje);border-color:var(--oranje);color:#FFFFFF;z-index:2}
  .trap-b .chip{position:absolute;top:-44px;left:1.35rem;z-index:3;width:34px;height:34px;border-radius:50%;
    background:var(--tekst);color:var(--oranje);display:grid;place-items:center;
    font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;font-size:.8rem;padding-right:.06em}
  .trap-b .chip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-1px;width:2px;height:10px;
    background:rgba(20,24,43,.2)}
  /* "Fase n:" blijft voorlezen maar is visueel vervangen door het schijfje */
  .trap-b .n{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .trap-b b{font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;
    letter-spacing:-.033em;font-size:1.14rem;line-height:1.14;padding-bottom:.05em}
  .trap-b .rol{font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--oranje-d)}
  .trap-b:hover .rol{color:#FFFFFF;opacity:.92}
  .trap-b p{font-size:.93rem;color:var(--tekst-zacht);margin-top:.3rem}
  .trap-b:hover p{color:#FFFFFF;opacity:.94}
  .motor-slot{margin-top:2rem;font-size:1.06rem;max-width:56ch;font-weight:500}

  /* choreografie zodra de sectie in beeld komt; zonder script blijft alles zichtbaar.
     Onthulling via animation (niet transition) zodat de hover direct blijft reageren. */
  .js-anim .motor.rv-scene .motor-rail i{transform:scaleX(0);
    transition:transform 1.15s cubic-bezier(.6,.04,.27,.99) .15s}
  .js-anim .motor.rv-scene.zicht .motor-rail i{transform:scaleX(1)}
  .js-anim .motor.rv-scene .motor-lus{opacity:0;transition:opacity .9s ease 1.3s}
  .js-anim .motor.rv-scene.zicht .motor-lus{opacity:1}
  .js-anim .motor.rv-scene:not(.zicht) .chip{opacity:0;transform:scale(.35)}
  .js-anim .motor.rv-scene.zicht .chip{animation:chip-pop .5s cubic-bezier(.34,1.56,.64,1) backwards;
    animation-delay:calc(.16s + var(--f,0)*.27s)}
  .js-anim .motor.rv-scene:not(.zicht) .trap-b{opacity:0;transform:translateY(34px)}
  .js-anim .motor.rv-scene.zicht .trap-b{animation:opkomen .8s cubic-bezier(.22,1.12,.36,1) backwards;
    animation-delay:calc(.24s + var(--f,0)*.27s)}
  @keyframes chip-pop{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:none}}

  /* ── stappen links, staand beeld rechts ──
     De rail hoort bij één rij van vier; in het tweeluik staan de stappen als
     2x2 en dragen de nummerschijfjes zichzelf, bovenin elke kaart. */
  /* Drie rijen: kopje, de vier blokken, slotregel. Het beeld staat in de
     middelste rij, zodat het exact met het blok van vier uitlijnt. */
  .motor-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
    grid-template-rows:auto 1fr auto;
    column-gap:clamp(1.6rem,2.8vw,2.8rem);row-gap:0;margin-top:.4rem}
  /* geen marges op de items in rij 2: blokken en beeld starten op dezelfde
     lijn. De ruimte onder het kopje komt van het kopje zelf. */
  .motor-duo>.motor-kopje{grid-column:1;grid-row:1;margin-bottom:1.9rem}
  .motor-duo>.motor{grid-column:1;grid-row:2;padding:0;margin-top:0}
  .motor-duo>.motor-slot{grid-column:1;grid-row:3}
  .motor-duo>.motor-beeld{grid-column:2;grid-row:2;align-self:stretch;margin-top:0}
  .motor-duo .motor-rail,.motor-duo .motor-lus{display:none}
  .motor-duo .motor-rij{grid-template-columns:repeat(2,1fr);gap:12px;height:100%}
  .motor-duo .trap-b .chip::after{display:none}
  /* het nummer draagt de volgorde nu zelf: groter en bovenin de kaart */
  .motor-duo .trap-b .chip{position:static;margin-bottom:.5rem;
    width:3rem;height:3rem;font-size:1.22rem}
  .motor-duo .motor-slot{margin-top:1.5rem;margin-bottom:0}
  /* line-height 0 en overflow op de figure: anders piepen er witte hoekjes
     langs de afgeronde randen van het beeld */
  .motor-beeld{margin:0;min-width:0;line-height:0;font-size:0;background:transparent;
    border-radius:var(--r);overflow:hidden;position:relative;min-height:22rem}
  /* absoluut vullen: een percentage-hoogte pakt niet betrouwbaar in een
     gestrekt grid-item. De extra klasse wint van de img{height:auto}
     die het thema meelevert, anders bleef er ruimte onder het beeld. */
  .motor-duo>.motor-beeld img,
  .motor-beeld img{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:50% 50%;border-radius:0;display:block;background:transparent}
  @media(max-width:1040px){
    /* onder elkaar: kopje, blokken, beeld, slotregel */
    .motor-duo{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;row-gap:1.6rem}
    .motor-duo>.motor-kopje{grid-row:1}
    .motor-duo>.motor{grid-row:2;margin-top:0}
    .motor-duo>.motor-beeld{grid-column:1;grid-row:3;margin-top:0}
    .motor-duo>.motor-slot{grid-row:4;margin-top:0}
    .motor-beeld{min-height:0}
    .motor-duo>.motor-beeld img,
    .motor-beeld img{position:static;height:auto;aspect-ratio:16/10}
  }

  @media(max-width:980px){
    .motor{padding:0}
    .motor-rail,.motor-lus{display:none}
    .motor-rij,.motor-duo .motor-rij{grid-template-columns:1fr;gap:12px}
    .trap-b .chip{position:static;margin-bottom:.3rem}
    .trap-b .chip::after{display:none}
    .js-anim .motor.rv-scene.zicht .chip{animation-delay:calc(.06s + var(--f,0)*.1s)}
    .js-anim .motor.rv-scene.zicht .trap-b{animation-delay:calc(.1s + var(--f,0)*.1s)}
  }


  /* werk als drie tegels (uit De Diagnose) */
  .strook{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:0}
  .tegel{border-radius:var(--r);overflow:hidden;position:relative;isolation:isolate}
  .tegel img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
  .tegel:hover img{transform:scale(1.04)}
  .tegel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,24,43,.92),rgba(20,24,43,.15) 62%,transparent)}
  .tegel-t{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:1.4rem 1.5rem;color:#FBF7F0}
  .tegel-t b{display:block;font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;
    text-transform:uppercase;letter-spacing:-.032em;font-size:1.06rem;padding-bottom:.05em}
  .tegel-t span{display:block;font-size:.88rem;color:#A9ADC6;margin-top:.2rem}
  .tegel-t i{font-style:normal;color:var(--oranje);font-weight:700}
  @media(max-width:820px){.strook{grid-template-columns:1fr}}

  /* voorloperblok met beeld links (uit De Voorloper) */
  .voorop-g{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
  .voorop img{aspect-ratio:4/3;object-fit:cover}
  .voorop h2{max-width:15ch}
  .voorop .lead{margin-top:1.3rem;max-width:44ch}
  @media(max-width:900px){.voorop-g{grid-template-columns:1fr;gap:2.8rem}}

  /* de tooling per fase, overgenomen uit de kaartversie */
  .trap-b .tool{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--rand);
    font-size:.82rem;color:var(--tekst-zacht)}
  .trap-b:hover .tool{border-top-color:rgba(255,255,255,.4);color:#FFFFFF;opacity:.88}


  /* ── partnerstreep: één rechte lijn direct onder de hero ── */
  .partners{background:var(--donker);padding:1.45rem 0;border-top:1px solid #2C3252}
  .partners .kop{color:#767BA3}
  .partner{color:#FBF7F0}
  .partner span{color:#A9ADC6}
  .partner:hover span{color:var(--oranje)}
  /* zeven items moeten op één regel passen: de basisgap van 3.2rem was 4px te veel */
  .partners-in{gap:1.1rem 2.2rem}
  @media(max-width:1180px){
    .partners-in{gap:1rem 1.5rem}
    .partner svg{width:1.35rem;height:1.35rem}
    .partner span{font-size:.85rem}
  }
  @media(max-width:980px){.partners-in{justify-content:flex-start}}


  /* ── sitebrede aanvullingen ── */
  .bar .links a[aria-current]{color:#FFFFFF;font-weight:700}
  .bar .links a[aria-current]::after{transform:scaleX(1)}
  .voet-onder a:hover{color:var(--donker-tekst)}

  /* donkere kopband bovenaan elke subpagina */
  .kopband{background:var(--donker);color:var(--donker-tekst);padding:3.2rem 0 4rem}
  .kopband .lab{color:#C7CBE0}
  .kopband h1{font-size:clamp(2.1rem,4.4vw,3.4rem);max-width:20ch;margin-top:1.1rem}
  .kopband h1 em{font-style:italic;color:var(--oranje)}
  .kopband .lead{color:#A9ADC6;margin-top:1.3rem;max-width:56ch}
  .cta-rij{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem}

  /* beeld dat uit de kopband omhoog getrokken wordt */
  .sec.strak{padding-top:0}
  .haal-op{margin-top:-2.4rem;position:relative;z-index:2}
  .haal-op img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r);display:block}

  /* fasen op de werkwijzepagina */
  .dienst b{display:block;font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;
    text-transform:uppercase;letter-spacing:-.032em;font-size:1.15rem;padding-bottom:.05em}
  .dienst .rol{display:block;font-size:.84rem;color:var(--oranje);font-weight:700;margin-top:.25rem}
  .dienst .tool{display:block;font-size:.82rem;color:var(--tekst-zacht);margin-top:.9rem}
  @media(max-width:820px){.dienst{grid-template-columns:2.6rem 1fr;gap:1rem}.dienst p{grid-column:2}}

  /* resultaatkaarten */
  .resgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.8rem}
  .resgrid.vier{grid-template-columns:repeat(2,1fr)}
  /* de kaarten reageren op de muis, net als de stappenblokken */
  .res{background:var(--vlak);border:1px solid transparent;border-radius:var(--r);padding:1.7rem 1.6rem;
    transition:background .3s,border-color .3s,transform .35s cubic-bezier(.22,1,.36,1),
      box-shadow .35s cubic-bezier(.22,1,.36,1)}
  /* zodra de kaart onthuld is, geldt de korte hover-timing in plaats van de
     trage reveal-transitie met stagger */
  .js-anim .resgrid .res.zicht{transition:background .3s,border-color .3s,
    transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s cubic-bezier(.22,1,.36,1);
    transition-delay:0s}
  .res:hover{transform:translateY(-5px);background:var(--oranje);border-color:var(--oranje);
    box-shadow:0 24px 44px -28px rgba(0,0,0,.55)}
  .res:hover b{color:#FFFFFF}
  .res:hover p{color:#FFFFFF;opacity:.92}
  /* de eerste kaart staat standaard aan, zodat de rij niet dood oogt */
  .resgrid .res:first-child{background:var(--oranje);border-color:var(--oranje)}
  .resgrid .res:first-child b{color:#FFFFFF}
  .resgrid .res:first-child p{color:#FFFFFF;opacity:.92}
  /* zodra de muis op een andere kaart staat, verspringt het accent daarheen */
  .resgrid:has(.res:hover) .res:first-child:not(:hover){background:var(--vlak);border-color:transparent}
  .resgrid:has(.res:hover) .res:first-child:not(:hover) b{color:var(--oranje)}
  .resgrid:has(.res:hover) .res:first-child:not(:hover) p{color:var(--tekst-zacht);opacity:1}
  .res b{display:block;font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;
    text-transform:uppercase;letter-spacing:-.03em;font-size:1.3rem;color:var(--oranje);padding-bottom:.15em}
  .res p{font-size:.95rem;color:var(--tekst-zacht);margin-top:.45rem}
  @media(max-width:860px){.resgrid,.resgrid.vier{grid-template-columns:1fr}}

  /* klantquote */
  .quote{margin-top:3rem;border-left:3px solid var(--oranje);padding-left:1.6rem;max-width:62ch}
  .quote p{font-size:1.12rem;font-weight:500;line-height:1.6}
  .quote footer{margin-top:1rem;font-size:.9rem;color:var(--tekst-zacht)}
  .quote footer b{color:var(--tekst)}

  /* casetegels op de werkpagina */
  .werkgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;margin-top:3rem}
  @media(max-width:820px){.werkgrid{grid-template-columns:1fr}}

  /* teamgrid */
  .team-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem 1.4rem;margin-top:3rem}
  .mens-k img,.mens-k .ini{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);display:block}
  .mens-k .ini{display:grid;place-items:center;background:var(--vlak-warm);
    font-family:Archivo,Arial,sans-serif;font-style:italic;font-weight:800;font-size:2.6rem;color:var(--oranje)}
  .mens-k b{display:block;margin-top:1rem;font-family:Archivo,Arial,sans-serif;font-weight:800;
    font-style:italic;text-transform:uppercase;letter-spacing:-.03em;font-size:1.02rem;padding-bottom:.05em}
  .mens-k span{display:block;font-size:.88rem;color:var(--tekst-zacht);margin-top:.15rem}
  @media(max-width:820px){.team-g{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.team-g{grid-template-columns:1fr}}

  /* contactformulier */
  .contact-g{display:grid;grid-template-columns:1.15fr .85fr;gap:4rem;align-items:start}
  @media(max-width:900px){.contact-g{grid-template-columns:1fr;gap:2.6rem}}
  .form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:2.2rem}
  @media(max-width:700px){.form{grid-template-columns:1fr}}
  .veld{display:flex;flex-direction:column;gap:.4rem}
  .veld.breed{grid-column:1/-1}
  .veld label{font-size:.73rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tekst-zacht)}
  .veld input,.veld textarea{font:inherit;padding:.85rem 1rem;border:1px solid var(--rand);
    border-radius:6px;background:var(--paneel);color:var(--tekst)}
  .veld input:focus,.veld textarea:focus{outline:0;border-color:var(--oranje);
    box-shadow:0 0 0 3px rgba(242,86,35,.18)}
  .form .knop{justify-self:start}
  .gegeven{padding:1.1rem 0;border-top:1px solid var(--rand)}
  .gegeven:first-of-type{border-top:0}
  .gegeven b{display:block;font-size:.73rem;font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:var(--tekst-zacht);margin-bottom:.35rem}
  .gegeven a{font-weight:600;text-decoration:underline;text-underline-offset:3px;
    text-decoration-color:rgba(20,24,43,.25)}
  .gegeven a:hover{text-decoration-color:var(--oranje)}

  /* ── (hero v3 vervangen door Hero v14, onderaan dit bestand) ── */
  .bar{padding:1.25rem 0}

  /* het promptvak: je typt de vraag die jouw klant aan een AI stelt */
  /* dezelfde rechte hoeken als het beeld: de check is een blok, geen kaartje */
  .prompt{position:relative;
    background:linear-gradient(180deg,#2C3459 0%,#1B2340 72%);
    border:1px solid rgba(242,86,35,.55);border-radius:0;
    padding:1.35rem 1.5rem 1.25rem;
    box-shadow:0 30px 70px -26px rgba(0,0,0,.95),0 0 90px -24px rgba(242,86,35,.5);
    transition:border-color .25s,box-shadow .25s}
  .prompt[hidden]{display:none}
  /* de oranje rail bovenop wijst de plek aan waar je moet zijn */
  .prompt::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;
    background:var(--oranje);pointer-events:none;z-index:5}
  .prompt:focus-within{border-color:var(--oranje);
    box-shadow:0 30px 70px -26px rgba(0,0,0,.95),0 0 90px -16px rgba(242,86,35,.68),
      0 0 0 4px rgba(242,86,35,.14)}

  .prompt-kop{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem}
  .prompt-kop .puls{width:.5rem;height:.5rem;border-radius:50%;background:var(--oranje);flex:none;
    box-shadow:0 0 0 0 rgba(242,86,35,.65);animation:puls 2.2s ease-out infinite}
  @keyframes puls{70%{box-shadow:0 0 0 .5rem rgba(242,86,35,0)}100%{box-shadow:0 0 0 0 rgba(242,86,35,0)}}
  .prompt-kop b{font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;
    color:#A9ADC6;line-height:1.35}
  .prompt-vorig{margin-left:auto;flex:none;background:none;border:0;font:inherit;font-size:.76rem;
    font-weight:600;color:#A9ADC6;cursor:pointer;white-space:nowrap;border-radius:5px;
    padding:.55rem .5rem;margin:-.55rem -.5rem -.55rem auto;transition:color .2s,background .2s}
  .prompt-vorig:hover{color:#FBF7F0;background:rgba(255,255,255,.06)}
  .prompt-vorig[data-uit]{visibility:hidden;pointer-events:none}
  .prompt-tel{flex:none;font-size:.69rem;letter-spacing:.13em;font-weight:800;color:#6B7099}

  .prompt textarea{display:block;width:100%;background:none;border:0;resize:none;color:#FBF7F0;
    font:inherit;font-size:1.05rem;line-height:1.5;padding:0;min-height:1.5em}
  .prompt textarea:focus{outline:0}
  .prompt textarea::placeholder{color:#767BA3}

  .prompt-scheid{height:1px;background:var(--donker-rand);margin:.85rem 0 .8rem}
  /* ICP-box: voor wie we er zijn + mailveld */
  .icp-tekst{font-size:1.08rem;line-height:1.55;color:#F0F2FA;font-weight:600;margin:.2rem 0 0}
  .icp-vraag{font-size:1.02rem;line-height:1.55;color:#CFD4E8;margin:0 0 1rem}
  .prompt.icp textarea{font-size:1rem}
  /* twee echte invoervelden naast elkaar, duidelijk als veld herkenbaar */
  .icp-veld{display:flex;flex-direction:column;gap:.42rem;padding:0}
  .icp-label{font-size:.71rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;
    color:#AEB4D4;line-height:1.4}
  .icp-input{width:100%;background:rgba(255,255,255,.075);border:1px solid #3C4370;border-radius:6px;
    padding:.74rem .85rem;color:#FBF7F0;font:inherit;font-size:.98rem;line-height:1.3;
    -webkit-appearance:none;appearance:none;transition:border-color .18s,background .18s}
  .icp-input::placeholder{color:#9199C2;opacity:1}
  .icp-input:hover{border-color:#4E5691}
  .icp-input:focus{outline:0;border-color:var(--oranje);background:rgba(255,255,255,.11)}
  .icp-velden{display:flex;gap:1.1rem;align-items:flex-start}
  .icp-velden .icp-veld{flex:1 1 0;min-width:0}
  @media(max-width:640px){.icp-velden{flex-direction:column;gap:.85rem}}
  /* het bolletje en het bovenschrift van de ICP-box wat groter */
  .prompt.icp .prompt-kop{gap:.7rem;margin-bottom:.95rem}
  .prompt.icp .prompt-kop .puls{width:.8rem;height:.8rem;background:var(--groen);
    box-shadow:0 0 0 0 rgba(62,207,142,.6);animation:puls-groen 2.2s ease-out infinite}
  @keyframes puls-groen{70%{box-shadow:0 0 0 .75rem rgba(62,207,142,0)}100%{box-shadow:0 0 0 0 rgba(62,207,142,0)}}
  .prompt.icp .prompt-kop b{font-size:.82rem;letter-spacing:.12em}

  .icp-dank{font-size:1rem;line-height:1.55;color:#E6E9F5;font-weight:500;
    border:1px solid var(--donker-rand);background:rgba(255,255,255,.04);padding:1.5rem 1.6rem}

  .prompt-voet{display:flex;align-items:center;gap:.7rem}
  .prompt-meta{flex:1 1 auto;min-width:0;font-size:.8rem;color:#767BA3;line-height:1.4;
    min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .prompt-meta.fout{color:var(--oranje);font-weight:600}
  .prompt-ga{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:.5rem;
    background:var(--oranje);color:var(--op-oranje);border:0;border-radius:999px;
    padding:0 1.15rem;height:2.75rem;font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;
    transition:background .2s,transform .2s}
  .prompt-ga:hover{background:#FF6B39;transform:translateY(-1px)}
  .prompt-ga:focus-visible{outline:3px solid var(--oranje);outline-offset:3px}
  .prompt-ga svg{width:1rem;height:1rem;flex:none}
  .scan-fijn{margin-top:1.1rem;font-size:.84rem;color:#8A8FAF;line-height:1.5}
  .scan-fijn[hidden]{display:none}

  @media(max-width:520px){
    .prompt-voet{flex-direction:column;align-items:stretch;gap:.7rem}
    .prompt-ga{margin-left:0;width:100%;justify-content:center}
  }
  @media(max-width:430px){
    .prompt-tel{display:none}
    .prompt-meta{font-size:.76rem}
  }

  /* wat er na verzenden verschijnt */
  .uitslag[hidden]{display:none}
  .uitslag{animation:opkomen .55s cubic-bezier(.22,1,.36,1) both}
  .uitslag.prompt{border-color:var(--donker-rand);padding:1.3rem 1.35rem 1.4rem}
  .uitslag .naam{font-family:Archivo,Arial,sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;
    letter-spacing:-.033em;font-size:1.1rem;color:#FBF7F0;padding-bottom:.05em}
  .uitslag .onder{font-size:.9rem;color:#A9ADC6;margin-top:.35rem;margin-bottom:1.2rem}
  .uitslag ol{list-style:none;margin:0;padding:0;counter-reset:c;display:flex;flex-direction:column}
  .uitslag li{counter-increment:c;display:grid;grid-template-columns:1.5rem 1fr;gap:.8rem;
    padding:.75rem 0;border-top:1px solid #2C3252;font-size:.94rem;color:#C9CCDC}
  .uitslag li:first-child{border-top:0}
  .uitslag li::before{content:counter(c,decimal-leading-zero);font-family:Archivo,Arial,sans-serif;
    font-weight:800;font-style:italic;font-size:.8rem;color:var(--oranje);letter-spacing:-.02em;padding-top:.2em}
  .uitslag .slotregel{margin-top:1.3rem;padding-top:1.1rem;border-top:2px solid var(--oranje);
    font-size:.92rem;color:#A9ADC6}
  .uitslag .terug{background:none;border:0;color:var(--oranje);font:inherit;font-size:.86rem;font-weight:700;
    cursor:pointer;padding:.6rem 0 0;text-decoration:underline;text-underline-offset:3px}

  /* ── v3 · gewicht voor de check ── */
  .prompt-kop{margin-bottom:1rem}
  .prompt-kop b{color:#FBF7F0;font-size:.71rem}
  .prompt-kop .puls{width:.55rem;height:.55rem}
  .prompt textarea{font-size:1.18rem;min-height:1.6em}
  .prompt textarea::placeholder{color:#7E84AD}
  .prompt-scheid{background:#333B60}
  .prompt-meta{color:#8B90B5}
  .prompt-ga{height:3.1rem;min-width:10.5rem;justify-content:center;padding:0 1.4rem;
    font-size:.98rem;box-shadow:none}
  .scan-fijn{margin-top:.95rem;color:#8A8FAF;font-size:.79rem;line-height:1.5}
  .uitslag.prompt{background:#1D2440;border-radius:0;
    box-shadow:0 22px 54px -26px rgba(0,0,0,.9)}
  .uitslag.prompt::before{background:var(--donker-rand)}

  /* ── witte tekst op de oranje knoppen (de :not houdt de lijn- en witknop heel) ── */
  .knop:not(.knop-l):not(.knop-w){color:#FFFFFF}
  .prompt-ga{color:#FFFFFF}

  /* ── het vinkje staat los, zonder rondje ── */
  .punten .v{width:1.25rem;height:1.25rem;background:none;border-radius:0;
    color:var(--oranje);margin-top:.25rem}
  .punten .v svg{width:1.25rem;height:1.25rem;stroke-width:3}

  @media(max-width:900px){
    .prompt{padding:1.2rem 1.15rem 1.1rem}
    .prompt-kop{margin-bottom:.8rem}
    .prompt textarea{font-size:1.1rem;min-height:1.7em}
    .prompt-ga{height:2.95rem;min-width:0}
    .scan-fijn{font-size:.8rem;margin-top:.9rem}
  }
  @media(max-width:760px){.partners-in{justify-content:flex-start;gap:1rem 1.8rem}}

  /* ── v1.1 · duo als gewone klasse, voor Elementor-containers ── */
  .sec.duo{--grond:#14182B;--vlak:#1D2440;--vlak-warm:#232A49;--paneel:#242C4A;
    --tekst:#FBF7F0;--tekst-zacht:#A9ADC6;--rand:#2C3252;
    background:var(--grond);color:var(--tekst)}
  .sec.duo .lab{color:#E8EBF7}
  .sec.duo .lab i{color:var(--oranje)}
  .sec.duo .lead{color:#A9ADC6}

  /* ── v1.3.3 · Elementor Pro-formulier in huisstijl ── */
  .aoa-form .elementor-field-group{margin-bottom:.35rem}
  .aoa-form .elementor-field-label{font-size:.73rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--tekst-zacht)}
  .aoa-form .elementor-field-textual{font-family:inherit;font-size:1rem;
    padding:.85rem 1rem;border:1px solid var(--rand);border-radius:6px;
    background:var(--paneel);color:var(--tekst)}
  .aoa-form .elementor-field-textual:focus{outline:0;border-color:var(--oranje);
    box-shadow:0 0 0 3px rgba(242,86,35,.18)}
  .aoa-form .elementor-button[type=submit]{background:var(--oranje);color:#FFFFFF;
    font-weight:700;font-size:.95rem;padding:.85rem 1.5rem;border-radius:6px;
    transition:background .2s,transform .2s}
  .aoa-form .elementor-button[type=submit]:hover{background:#FF6B39;transform:translateY(-1px)}
  .aoa-form .elementor-message-success{color:var(--tekst);font-weight:600}
  .aoa-form .elementor-message-danger{color:var(--oranje-d);font-weight:600}

  /* ── v1.3.5 · kolommen op de contactpagina ──
     Elementor geeft childcontainers width:100% via de eigen --width-variabele;
     die moet expliciet naar auto voordat flex-basis iets te zeggen heeft. */
  /* Elementor leest flex uit eigen variabelen (.e-con.e-flex{flex:var(...)}),
     dus die variabelen zetten we, niet de property zelf. */
  .e-con.e-flex.aoa-kol-form{--width:auto;--flex-grow:1;--flex-shrink:1;--flex-basis:520px;min-width:0}
  .e-con.e-flex.aoa-kol-gegevens{--width:auto;--flex-grow:1;--flex-shrink:1;--flex-basis:340px;min-width:0;max-width:480px}
  @media(max-width:900px){
    .e-con.e-flex.aoa-kol-form,.e-con.e-flex.aoa-kol-gegevens{--flex-basis:100%;max-width:none}
  }

  /* == Mobiel menu ============================================= */
  .bar-tog{display:none;appearance:none;-webkit-appearance:none;background:transparent;
    border:1px solid var(--donker-rand);border-radius:8px;padding:.62rem .66rem;
    cursor:pointer;color:#EDEFF8;flex:none;transition:border-color .18s,background .18s}
  .bar-tog:hover{border-color:#495083;background:rgba(255,255,255,.05)}
  .bar-tog:focus-visible{outline:2px solid var(--oranje);outline-offset:3px}
  .bar-tog-i{display:block;width:22px;height:16px;position:relative}
  .bar-tog-i i{position:absolute;left:0;right:0;height:2px;border-radius:2px;
    background:currentColor;transition:transform .24s ease,opacity .16s ease,top .24s ease}
  .bar-tog-i i:nth-child(1){top:0}
  .bar-tog-i i:nth-child(2){top:7px}
  .bar-tog-i i:nth-child(3){top:14px}
  .bar-tog[aria-expanded="true"] .bar-tog-i i:nth-child(1){top:7px;transform:rotate(45deg)}
  .bar-tog[aria-expanded="true"] .bar-tog-i i:nth-child(2){opacity:0}
  .bar-tog[aria-expanded="true"] .bar-tog-i i:nth-child(3){top:7px;transform:rotate(-45deg)}

  .mobmenu{position:absolute;left:0;right:0;top:100%;z-index:39;background:var(--donker);
    border-top:1px solid var(--donker-rand);box-shadow:0 24px 40px -18px rgba(0,0,0,.6);
    max-height:calc(100svh - 100%);overflow-y:auto;overscroll-behavior:contain;
    transform:translateY(-6px);transition:transform .2s ease}
  .mobmenu.open{transform:none}
  .mobmenu-in{display:flex;flex-direction:column;padding-top:.4rem;padding-bottom:1.5rem}
  .mobmenu-in a{display:block;padding:1.05rem .2rem;font-size:1.24rem;font-weight:700;
    color:#EDEFF8;border-bottom:1px solid rgba(255,255,255,.09);transition:color .18s}
  .mobmenu-in a:last-child{border-bottom:0}
  .mobmenu-in a:hover,.mobmenu-in a:active{color:#FFFFFF}
  .mobmenu-in a[aria-current]{color:var(--oranje)}
  .mobmenu-in a:focus-visible{outline:2px solid var(--oranje);outline-offset:2px;border-radius:3px}
  html.menu-open{overflow:hidden}
  @media(max-width:980px){.bar-tog{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}.bar-rechts{gap:.9rem}}
  @media(min-width:981px){.mobmenu{display:none}}
  @media(prefers-reduced-motion:reduce){.mobmenu{transition:none;transform:none}.bar-tog-i i{transition:none}}
  /* vangnet: de zwevende taalbadge van TranslatePress blijft uit */
  .trp-floating-switcher,#trp-floater-ls{display:none!important}

  /* Contact als oranje knop in de balk en in het mobiele menu */
  .bar .links a.nav-knop{background:var(--oranje);color:#FFFFFF;font-weight:700;
    padding:.62rem 1.15rem;border-radius:999px;line-height:1;
    transition:background .18s,transform .18s}
  .bar .links a.nav-knop:hover{background:var(--oranje-d);color:#FFFFFF;transform:translateY(-1px)}
  .bar .links a.nav-knop::after{display:none}
  .bar .links a.nav-knop[aria-current]{color:#FFFFFF}
  .mobmenu-in a.nav-knop{margin-top:1.1rem;background:var(--oranje);color:#FFFFFF;
    border-bottom:0;border-radius:10px;text-align:center;padding:1rem 1.2rem}
  .mobmenu-in a.nav-knop[aria-current]{color:#FFFFFF}
  .mobmenu-in a.nav-knop:hover,.mobmenu-in a.nav-knop:active{background:var(--oranje-d);color:#FFFFFF}

  /* grotere taaltoetsen op mobiel */
  @media(max-width:980px){.taal-knop{padding:.5rem .78rem;font-size:.86rem}}


  /* ============================================================
     Hero v14 · navy vlak met aurora's en een toolring om de plate
     (beeld + kansenformulier). Ontwerp: aoa-homepage-hero_14.
     ============================================================ */
  .hero{position:relative;overflow:hidden;display:flex;align-items:center;padding:0;
    background:
      radial-gradient(78% 62% at 74% 6%, rgba(255,255,255,.085) 0%, rgba(255,255,255,0) 62%),
      radial-gradient(70% 55% at 2% 0%, rgba(207,212,231,.15) 0%, rgba(207,212,231,0) 64%),
      linear-gradient(176deg,#232A47 0%,#1B2138 52%,#1E2442 100%)}
  .hero::before{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
      linear-gradient(0deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:88px 88px;animation:gridDrift 60s linear infinite;
    -webkit-mask-image:radial-gradient(120% 95% at 60% 0%,#000 0%,transparent 75%);
            mask-image:radial-gradient(120% 95% at 60% 0%,#000 0%,transparent 75%)}
  @keyframes gridDrift{to{background-position:88px 88px,88px 88px}}
  .hero .fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;
    -webkit-mask-image:radial-gradient(120% 115% at 50% 50%,#000 0%,#000 68%,rgba(0,0,0,.6) 100%);
            mask-image:radial-gradient(120% 115% at 50% 50%,#000 0%,#000 68%,rgba(0,0,0,.6) 100%)}
  .aurora{position:absolute;z-index:0;pointer-events:none;border-radius:50%;filter:blur(70px);will-change:transform}
  .aurora-a{width:52vw;height:52vw;left:-14%;top:-34%;
    background:radial-gradient(circle,rgba(163,180,255,.22) 0%,rgba(163,180,255,0) 66%);
    animation:drift-a 28s ease-in-out infinite alternate}
  .aurora-b{width:46vw;height:46vw;right:-10%;bottom:-30%;
    background:radial-gradient(circle,rgba(242,86,35,.30) 0%,rgba(242,86,35,0) 66%);
    animation:drift-b 34s ease-in-out infinite alternate}
  .aurora-c{width:34vw;height:34vw;left:24%;bottom:-26%;
    background:radial-gradient(circle,rgba(207,212,231,.10) 0%,rgba(207,212,231,0) 68%);
    animation:drift-a 40s ease-in-out infinite alternate-reverse}
  @keyframes drift-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(7vw,5vh,0) scale(1.12)}}
  @keyframes drift-b{from{transform:translate3d(0,0,0) scale(1.08)}to{transform:translate3d(-6vw,-6vh,0) scale(1)}}

  .hero>.wrap{width:100%}
  .hero-grid{position:relative;z-index:2;display:grid;
    grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);
    gap:clamp(32px,3.6vw,56px);align-items:start;
    padding-block:clamp(20px,3.4vh,52px) clamp(18px,3vh,46px)}

  .hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,2.1vh,26px)}
  .eyebrow{font-family:Figtree,Arial,sans-serif;font-size:clamp(.76rem,.92vw,.88rem);font-weight:800;
    line-height:1.3;letter-spacing:.15em;text-transform:uppercase;
    display:flex;align-items:center;gap:.55em;margin:0;color:#FFFFFF;text-shadow:0 1px 14px rgba(20,24,43,.55)}
  .eyebrow::before{content:"/";color:var(--oranje);font-style:italic;font-weight:900;font-size:1.25em;line-height:1}
  .hero-copy h1{font-family:Archivo,Arial,sans-serif;font-style:italic;font-weight:800;
    text-transform:uppercase;letter-spacing:-.032em;line-height:.96;text-wrap:balance;margin:0;
    font-size:clamp(2.15rem,min(4.05vw,5.5vh),3.6rem);color:#FFFFFF;max-width:21ch;padding-bottom:.06em}
  .hero-copy h1 em{font-style:italic;color:var(--oranje)}
  /* de belofte onder de kop: groter, lichter en met een oranje streep ervoor,
     zodat hij niet wegvalt tussen kop en knoppen */
  .hero-lead{margin:0;max-width:50ch;position:relative;
    padding-left:clamp(.9rem,1.1vw,1.25rem);
    border-left:2px solid rgba(242,86,35,.55);
    font-size:clamp(1.06rem,min(1.32vw,2.15vh),1.3rem);line-height:1.58;
    font-weight:500;color:#E4E8F6}
  .hero-lead strong{color:#FFFFFF;font-weight:700}
  @media(max-width:760px){
    .hero-lead{font-size:1.06rem;padding-left:.85rem}
  }
  .hero-actions{display:flex;align-items:center;gap:clamp(14px,2vw,26px);flex-wrap:wrap}
  .btn{display:inline-flex;align-items:center;gap:.6em;font-family:Figtree,Arial,sans-serif;
    font-size:.95rem;font-weight:700;line-height:1;letter-spacing:.005em;
    padding:.85em 1.45em;border-radius:999px;border:0;text-decoration:none;cursor:pointer;
    transition:background .18s ease,transform .18s ease,color .18s ease,border-color .18s ease}
  .btn .arw{transition:transform .18s ease}
  .btn:hover .arw{transform:translateX(3px)}
  .btn-primary{background:var(--oranje);color:#FFFFFF}
  .btn-primary:hover{background:#D8461A}
  .btn-ghost{background:transparent;color:#FFFFFF;border:1px solid rgba(255,255,255,.24)}
  .btn-ghost:hover{border-color:#FFFFFF;background:rgba(255,255,255,.06)}
  .hero .tel{font-family:Figtree,Arial,sans-serif;font-size:.95rem;font-weight:500;line-height:1.4;color:#9BA1BE;margin:0}
  .hero .tel a{color:#FFFFFF;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:1px}
  .hero .tel a:hover{border-color:var(--oranje);color:var(--oranje)}
  .forwho{width:100%;max-width:54ch;border-top:1px solid rgba(255,255,255,.14);
    padding-top:clamp(12px,1.8vh,20px);display:flex;flex-direction:column;gap:.75em}
  .forwho .wie{font-family:Figtree,Arial,sans-serif;font-size:.68rem;font-weight:800;line-height:1;
    letter-spacing:.2em;text-transform:uppercase;color:#9BA1BE;white-space:nowrap;
    display:flex;align-items:center;gap:.6em;margin:0}
  .hero .dot{width:7px;height:7px;border-radius:50%;background:#3FCF8E;box-shadow:0 0 0 3px rgba(63,207,142,.18);flex:none}
  .forwho p{margin:0;font-size:.96rem;line-height:1.5;color:#D6DAEB}

  .plate{border:1px solid rgba(255,255,255,.16);border-radius:18px;overflow:hidden;background:#262E4D;
    box-shadow:0 30px 70px -38px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.09)}
  .plate-media{position:relative}
  .plate-media video,.plate-media img{width:100%;aspect-ratio:16/10;max-height:34.5vh;object-fit:cover;
    object-position:50% 40%;display:block;background:#0E1225}
  .plate-media::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(to bottom,rgba(20,24,43,0) 55%,rgba(20,24,43,.55) 100%)}
  .media-tag{position:absolute;z-index:2;left:14px;bottom:12px;display:flex;align-items:center;gap:.5em;
    font-family:Figtree,Arial,sans-serif;font-size:.62rem;font-weight:800;line-height:1;
    letter-spacing:.16em;text-transform:uppercase;color:#FFFFFF;
    background:rgba(15,19,34,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    padding:.55em .8em;border-radius:999px;border:1px solid rgba(255,255,255,.18)}
  .media-tag .dot{background:var(--oranje);box-shadow:0 0 0 3px rgba(242,86,35,.22)}
  .plate-media .geluid{top:auto;bottom:12px;right:14px;width:34px;height:34px;z-index:2;
    background:rgba(15,19,34,.55);border:1px solid rgba(255,255,255,.2)}
  .plate-media .geluid svg{width:.9rem;height:.9rem}

  .plate-form{padding:clamp(14px,2vh,24px) clamp(18px,1.8vw,28px) clamp(16px,2.2vh,26px);position:relative}
  .plate-form h2{font-family:Archivo,Arial,sans-serif;font-style:italic;font-weight:800;text-transform:uppercase;
    letter-spacing:-.018em;line-height:1.04;margin:0 0 .45em;font-size:clamp(1rem,min(1.28vw,2.15vh),1.26rem);color:#FFFFFF}
  .plate-form .sub{margin:0 0 clamp(.7em,1.7vh,1.15em);font-size:clamp(.84rem,1.55vh,.9rem);line-height:1.45;color:#9BA1BE;max-width:52ch}
  .fields{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vh,14px)}
  .field{display:flex;flex-direction:column;gap:.5em;min-width:0}
  .field label{font-family:Figtree,Arial,sans-serif;font-size:.64rem;font-weight:800;line-height:1;
    letter-spacing:.17em;text-transform:uppercase;color:#9BA1BE}
  .field input{width:100%;font-family:Figtree,Arial,sans-serif;font-size:.95rem;font-weight:500;line-height:1;color:#FFFFFF;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:10px;
    padding:clamp(.68em,1.5vh,.85em) .9em;transition:border-color .18s ease,background .18s ease}
  .field input::placeholder{color:#848AA8}
  .field input:hover{border-color:rgba(255,255,255,.26)}
  .field input:focus{outline:none;border-color:var(--oranje);background:rgba(242,86,35,.07)}
  .form-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(12px,1.8vh,16px)}
  .form-foot .fine{font-size:.78rem;color:#6E7391;margin:0}
  .form-foot .fine a{color:#9BA1BE}
  .form-note{margin:14px 0 0;font-size:.82rem;line-height:1.45;color:#3FCF8E}
  .form-note:empty{display:none}
  .form-note.fout{color:#FF8A6B}
  .plate .icp-dank{margin:0;padding:clamp(16px,2.2vh,26px) clamp(18px,1.8vw,28px);font-size:.95rem;line-height:1.55;color:#3FCF8E}
  .hero :where(a,button,input):focus-visible{outline:2px solid var(--oranje);outline-offset:3px}

  .rise{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.22,.75,.3,1) forwards}
  @keyframes rise{to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){
    .rise{opacity:1;transform:none}
    .aurora,.hero::before{animation:none}
  }

  @media(max-width:1040px){
    .hero-grid{grid-template-columns:1fr;gap:clamp(28px,4vw,44px)}
    .hero-copy h1{max-width:17ch}
  }
  @media(max-width:760px){
    .fields{grid-template-columns:1fr}
    .hero-grid{display:flex;flex-direction:column;gap:18px}
    .hero-copy{display:contents}
    .eyebrow{order:1}
    .hero-copy h1{order:2;font-size:clamp(1.95rem,8.3vw,2.45rem);max-width:none}
    /* eerst de uitleg, dan pas beeld en formulier: een invulvak direct onder
       de kop komt te vroeg */
    .hero-lead{order:3}
    .plate{order:4}
    .hero-actions{order:5}
    .forwho{order:6}
  }
  @media(min-width:761px) and (max-height:780px){
    .hero-copy{gap:clamp(11px,1.9vh,26px)}
    .eyebrow{font-size:.74rem}
  }
  @media(max-width:760px) and (max-height:820px){
    .hero-grid{gap:14px;padding-block:12px 14px}
    .hero-copy h1{font-size:7.7vw}
    .plate-form{padding:14px 16px 16px}
    .plate-form .sub{margin-bottom:.7em;font-size:.82rem}
    .fields{gap:10px}
    .field input{padding:.65em .8em}
    .field label{font-size:.6rem}
  }
  /* ondertiteling op de herovideo */
  .plate-media video::cue{background:rgba(15,19,34,.78);color:#FFFFFF;
    font-family:Figtree,Arial,sans-serif;font-size:.92rem;line-height:1.4}

  /* op mobiel geen toolring op de achtergrond: te onrustig op een klein scherm.
     display:none geeft het canvas geen maat, waardoor het script vanzelf niet start. */
  @media(max-width:760px){
    .hero .fx{display:none}
  }

/* ── Kopbalk licht, vierkante knoppen naar het voorbeeld van Marwin (7 sep 2026) ──
   Overschrijft de .bar-regels van aoa-sitekit/assets/stijl.css. Alle selectors beginnen met
   `header .bar`, zodat ze zwaarder wegen dan de plugin-regels zonder !important.
   Rondingen volgen de site: 6px voor knoppen, 4px voor de foto.
   Contact is oranje en zonder foto (7 sep 2026, Marwin). */
header .bar{
  --kb-navy:#14182B; --kb-papier:#FAF6EE; --kb-oranje:#F25623; --kb-zacht:#5D5A50;
  --kb-display:"Archivo","Arial Black",Arial,sans-serif;
  background:var(--kb-papier); color:var(--kb-navy);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  padding:0;
}
header .bar .bar-in{min-height:82px; gap:1.5rem}
header .bar .merk{color:var(--kb-navy); width:9.6rem}
header .bar-rechts{gap:.5rem}

/* de knop: 1,5px lijn, 6px, kop-letter */
header .bar .links{gap:.5rem; color:var(--kb-navy); font-size:.84rem}
header .bar .links a{
  display:inline-flex; align-items:center; gap:.7em; height:2.75rem; padding:0 1.05em;
  border:1.5px solid var(--kb-navy); border-radius:6px; color:var(--kb-navy); background:transparent;
  font-family:var(--kb-display); font-style:italic; font-weight:800; text-transform:uppercase;
  letter-spacing:.01em; line-height:1;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
header .bar .links a::after{display:none}
header .bar .links a:hover{background:var(--kb-navy); color:#fff}
header .bar .links a[aria-current]{color:var(--kb-oranje); border-color:var(--kb-oranje); font-weight:800}
header .bar .links a[aria-current]:hover{background:var(--kb-oranje); color:#fff}
header .bar .links a:focus-visible{outline:2px solid var(--kb-oranje); outline-offset:3px; border-radius:6px}

/* contact: oranje, zonder foto; hover navy */
header .bar .links a.nav-knop{
  background:var(--kb-oranje); color:#fff; border-color:var(--kb-oranje); border-radius:6px;
  padding:0 1.05em; font-weight:800; transform:none;
}
header .bar .links a.nav-knop:hover{background:var(--kb-navy); border-color:var(--kb-navy); color:#fff; transform:none}
header .bar .links a.nav-knop[aria-current]{color:#fff}

/* taalschakelaar als één knop met twee vakken */
header .bar .taal{border:1.5px solid var(--kb-navy); border-radius:6px; padding:0; gap:0; height:2.75rem; overflow:hidden}
header .bar .taal-knop{
  display:inline-flex; align-items:center; height:100%; padding:0 .8rem; border-radius:0;
  font-family:var(--kb-display); font-style:italic; font-weight:800; font-size:.8rem; letter-spacing:.02em;
  color:var(--kb-zacht); background:transparent;
}
header .bar .taal-knop:hover{color:var(--kb-navy)}
header .bar .taal-knop.aan{background:var(--kb-navy); color:#fff}

/* menuknop en uitklapmenu op mobiel */
header .bar .bar-tog{border:1.5px solid var(--kb-navy); border-radius:6px; color:var(--kb-navy)}
header .bar .bar-tog:hover{border-color:var(--kb-navy); background:rgba(20,24,43,.06)}
header .bar .mobmenu{background:var(--kb-papier); border-top:1.5px solid var(--kb-navy); box-shadow:0 24px 40px -18px rgba(20,24,43,.25)}
header .bar .mobmenu-in a{color:var(--kb-navy); border-bottom:1px solid rgba(20,24,43,.14);
  font-family:var(--kb-display); font-style:italic; font-weight:800; text-transform:uppercase; font-size:1.1rem}
header .bar .mobmenu-in a:hover,header .bar .mobmenu-in a:active{color:var(--kb-oranje)}
header .bar .mobmenu-in a.nav-knop{background:var(--kb-oranje); color:#fff; border-radius:6px; border-bottom:0; text-align:center}
header .bar .mobmenu-in a.nav-knop:hover,header .bar .mobmenu-in a.nav-knop:active{background:var(--kb-navy); color:#fff}

@media(max-width:980px){header .bar .bar-rechts{gap:.5rem}}