/* --- Compatibiliteitslaag ------------------------------------------------
   Het ontwerp is overgestapt op een nieuw stel tokens (--bg, --line, --blue).
   pagina.css spreekt nog de oude namen. In plaats van die stylesheet regel
   voor regel om te schrijven wijzen de oude namen hier naar de nieuwe waarden,
   zodat de subpagina's meteen hetzelfde palet gebruiken als de homepage.
   Namen die in beide stellen voorkomen (--ink, --surface, --blue, --wrap)
   staan hier bewust niet: die krijgen hun waarde al uit het nieuwe stel. */
:root{
  --black-bg-deep:   var(--bg);
  --black-bg:        var(--bg);
  --cream:           var(--bg);
  --cream-dim:       var(--bg-2);
  --surface-dim:     var(--surface-2);
  --blue-light:      var(--blue-bright);
  --gold:            var(--blue);
  --yellow:          var(--blue-bright);
  --gold-light:      var(--blue-bright);
  --on-gold:         var(--bg);
  --hairline:        var(--line);
  --hairline-invert: var(--line-strong);
  --font-display:    var(--font);
  --font-body:       var(--font);
}

  :root{
    /* Neutraal antraciet + één blauw accent */
    --bg:          #0B0C0E;
    --bg-2:        #121417;
    --surface:     #16191D;
    --surface-2:   #1C2026;
    --line:        rgba(255,255,255,0.10);
    --line-strong: rgba(255,255,255,0.18);

    --ink:         #FFFFFF;
    --ink-soft:    #9AA4AF;
    --ink-dim:     #6E7883;

    --blue:        #4BA3E3;
    --blue-bright: #6FBCF2;
    --blue-deep:   #2B7FBF;
    --blue-glow:   rgba(75,163,227,0.14);

    --font: 'Inter', system-ui, sans-serif;
    --wrap: 1400px;
    --r: 10px;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; color-scheme:dark; }
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:var(--font); font-size:16px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  ul{ margin:0; padding:0; list-style:none; }
  p{ margin:0; }
  h1,h2,h3,h4{ margin:0; font-weight:700; letter-spacing:-0.025em; line-height:1.08; }
  button{ font-family:inherit; cursor:pointer; }
  :focus-visible{ outline:2px solid var(--blue); outline-offset:3px; }

  .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 34px; }
  @media (max-width:600px){ .wrap{ padding:0 20px; } }

  .accent{ color:var(--blue); }
  .eyebrow{
    display:inline-block;
    font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    color:var(--blue); padding-bottom:14px; position:relative;
  }
  .eyebrow::after{
    content:""; position:absolute; left:0; bottom:0; width:40px; height:2px; background:var(--blue);
  }

  /* ---------- Reveal ---------- */
  .reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.is-visible{ opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    html{ scroll-behavior:auto; }
  }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 22px; border-radius:6px;
    font-size:12.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
    border:1px solid transparent; white-space:nowrap;
    transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
  }
  .btn::after{ content:"→"; font-size:14px; line-height:1; transition:transform .25s ease; }
  .btn:hover::after{ transform:translateX(4px); }
  .btn--blue{ background:var(--blue); color:#06121C; }
  .btn--blue:hover{ background:var(--blue-bright); }
  .btn--white{ background:#fff; color:#0B0C0E; }
  .btn--white:hover{ background:#E8EEF4; }
  .btn--ghost{ border-color:var(--line-strong); color:var(--ink); }
  .btn--ghost:hover{ border-color:var(--blue); color:var(--blue); }
  .btn--grey{ background:rgba(255,255,255,.16); color:var(--ink); border-color:transparent; }
  .btn--grey:hover{ background:rgba(255,255,255,.26); }
  .btn--dark{ background:rgba(10,12,15,.82); border-color:var(--line-strong); color:var(--ink); }
  .btn--dark:hover{ border-color:var(--blue); color:var(--blue); }

  /* ---------- Nav ---------- */
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:15px 0; background:var(--bg);
    border-bottom:1px solid transparent;
    transition:padding .3s ease, border-color .3s ease;
  }
  .nav.is-scrolled{
    background:rgba(11,12,14,0.96); backdrop-filter:blur(10px);
    border-bottom-color:var(--line); padding:11px 0;
  }
  .nav__row{ display:flex; align-items:center; gap:18px; }
  .nav__brand{ display:flex; align-items:center; gap:11px; margin-right:auto; flex-shrink:0; }
  .nav__word{ font-size:17px; font-weight:800; letter-spacing:.02em; line-height:1.05; white-space:nowrap; display:block; }
  .nav__word span{ font-weight:300; color:#D6DEE6; }
  .nav__sub{
    display:block; margin-top:3px;
    font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--blue); white-space:nowrap;
  }
  .nav__links{ display:flex; align-items:center; gap:19px; flex-shrink:0; }
  .nav__link{
    position:relative; padding:6px 0;
    font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft);
    white-space:nowrap; transition:color .2s ease;
  }
  .nav__link::after{
    content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
    background:var(--blue); transition:width .25s ease;
  }
  .nav__link:hover{ color:var(--ink); }
  .nav__link:hover::after{ width:100%; }
  .nav__cta{
    display:inline-flex; align-items:center; gap:9px;
    padding:13px 20px; border:1px solid rgba(255,255,255,.55); border-radius:6px; flex-shrink:0;
    font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
    transition:border-color .2s ease, color .2s ease;
  }
  .nav__cta::after{ content:"→"; }
  .nav__cta:hover{ border-color:var(--blue); color:var(--blue); background:rgba(75,163,227,.08); }
  .nav__toggle{
    display:none; width:42px; height:42px; border:1px solid var(--line-strong);
    background:none; color:var(--ink); border-radius:6px;
    align-items:center; justify-content:center; z-index:101;
  }
  .nav__toggle line{ transition:transform .25s ease, opacity .2s ease; transform-origin:center; transform-box:fill-box; }
  .nav__toggle[aria-expanded="true"] line:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] line:nth-child(2){ opacity:0; }
  .nav__toggle[aria-expanded="true"] line:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
  .nav__panel{ display:none; }
  body.nav-open{ overflow:hidden; }
  @media (max-width:1300px){
    .nav__links, .nav__cta{ display:none; }
    .nav__toggle{ display:flex; }
    .nav__panel.is-open{
      display:flex; flex-direction:column; gap:2px;
      position:fixed; inset:0; z-index:99; background:var(--bg);
      padding:96px 30px 40px;
    }
    .nav__panel .nav__link{ font-size:17px; color:var(--ink); padding:16px 0; border-bottom:1px solid var(--line); }
    .nav__panel .btn{ margin-top:24px; justify-content:center; }
  }

  /* ---------- Hero ---------- */
  .hero{ position:relative; overflow:hidden; padding:76px 0 0; }
  .hero__media{ position:absolute; top:76px; left:0; right:0; bottom:0; z-index:0; }
  .hero__media img{
    width:100%; height:100%; object-fit:cover;
    filter:grayscale(1) contrast(1.16) brightness(.62);
  }
  .hero__media::after{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(94deg, var(--bg) 12%, rgba(11,12,14,.92) 30%, rgba(11,12,14,.34) 58%, rgba(11,12,14,.5) 100%),
      linear-gradient(0deg, rgba(11,12,14,.55) 0%, transparent 26%);
  }
  .hero__inner{ position:relative; z-index:2; padding:74px 0 86px; }
  .hero__title{
    font-size:clamp(2.4rem,5.2vw,3.9rem);
    margin:26px 0 26px; max-width:640px;
  }
  .hero__title em{ display:block; font-style:normal; color:var(--blue); }
  .hero__text{ font-size:16px; color:var(--ink-soft); max-width:400px; margin-bottom:34px; line-height:1.65; }
  .hero__text strong{ color:var(--ink); font-weight:600; }
  .hero__btns{ display:flex; gap:14px; flex-wrap:wrap; max-width:640px; }

  .usps{ position:relative; z-index:2; border-top:1px solid var(--line); background:var(--bg); }
  .usps__row{ display:grid; grid-template-columns:repeat(3,1fr); }
  .usp{
    display:flex; align-items:center; gap:20px;
    padding:30px 34px 30px 0; border-right:1px solid var(--line);
  }
  .usp:last-child{ border-right:none; }
  .usp:not(:first-child){ padding-left:30px; }
  .usp__ico{
    flex-shrink:0; width:58px; height:58px; border-radius:50%;
    border:1px solid rgba(255,255,255,.28);
    display:flex; align-items:center; justify-content:center; color:var(--ink);
  }
  .usp__ico svg{ width:28px; height:28px; }
  .usp svg{ flex-shrink:0; color:var(--blue); }
  .usp__t{ font-size:16px; font-weight:600; line-height:1.3; margin-bottom:5px; max-width:190px; }
  .usp__d{ font-size:13.5px; color:var(--ink-soft); max-width:215px; line-height:1.5; }
  @media (max-width:900px){
    .hero{ padding-top:70px; }
    .hero__media{ top:70px; }
    .hero__inner{ padding:48px 0 56px; }
    .usps__row{ grid-template-columns:1fr; }
    .usp{ border-right:none; border-bottom:1px solid var(--line); padding:20px 0; }
    .usp:not(:first-child){ padding-left:0; }
    .usp:last-child{ border-bottom:none; }
  }

  /* ---------- Section shell ---------- */
  .sec{ padding:104px 0; position:relative; }
  .sec--alt{ background:var(--bg-2); }
  .sec__head{ max-width:640px; margin-bottom:52px; }
  .sec__title{ font-size:clamp(1.9rem,3.4vw,2.7rem); margin:20px 0 16px; }
  .sec__title em{ font-style:normal; color:var(--blue); }
  .sec__sub{ color:var(--ink-soft); font-size:16.5px; }
  @media (max-width:700px){ .sec{ padding:68px 0; } .sec__head{ margin-bottom:38px; } }

  /* ---------- Split: professionals / opdrachtgevers ---------- */
  .duo{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
  .duo__card{
    position:relative; overflow:hidden;
    border:1px solid var(--line); border-radius:var(--r);
    background:var(--surface); padding:38px 36px 34px;
    transition:border-color .25s ease, background .25s ease, transform .25s ease;
  }
  .duo__card:hover{ border-color:rgba(75,163,227,.45); background:var(--surface-2); transform:translateY(-3px); }
  .duo__card::before{
    content:""; position:absolute; top:0; left:0; width:70px; height:3px; background:var(--blue);
    transition:width .35s ease;
  }
  .duo__card:hover::before{ width:170px; }
  .duo__title{ font-size:26px; margin:18px 0 14px; }
  .duo__title em{ font-style:normal; color:var(--blue); display:block; }
  .duo__text{ color:var(--ink-soft); font-size:15.5px; margin-bottom:26px; }
  .duo__list{ margin-bottom:30px; }
  .duo__list li{
    display:flex; gap:13px; align-items:flex-start;
    padding:12px 0; border-top:1px solid var(--line);
    font-size:14.5px; color:var(--ink);
  }
  .duo__list li::before{
    content:""; flex-shrink:0; margin-top:8px;
    width:6px; height:6px; border-radius:50%; background:var(--blue);
  }
  @media (max-width:880px){ .duo{ grid-template-columns:1fr; } .duo__card{ padding:32px 26px 30px; } }

  /* ---------- Voor jou: 8 kaarten ---------- */
  .perks{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  .perk{
    display:grid; grid-template-columns:auto 1fr; gap:6px 16px; align-content:start;
    border:1px solid var(--line); border-radius:var(--r);
    background:var(--surface); padding:24px 22px 26px;
    transition:border-color .25s ease, transform .25s ease, background .25s ease;
  }
  .perk:hover{ border-color:rgba(75,163,227,.45); background:var(--surface-2); transform:translateY(-3px); }
  .perk__ico{ color:var(--blue); grid-column:1; grid-row:1 / span 2; }
  .perk__t{ font-size:15.5px; font-weight:700; line-height:1.3; grid-column:2; grid-row:1; align-self:center; }
  .perk__t span{ color:var(--blue); }
  .perk__rule{ display:block; width:24px; height:2px; background:var(--blue); opacity:.5; grid-column:2; grid-row:2; margin-top:9px; }
  .perk__d{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; grid-column:1 / -1; grid-row:3; margin-top:15px; }
  .perk__d b{ color:var(--blue); font-weight:500; }
  .perks__foot{
    display:flex; align-items:center; gap:28px; flex-wrap:wrap;
    margin-top:18px; padding:26px 30px;
    border:1px solid var(--line); border-radius:var(--r);
    background:linear-gradient(100deg, var(--surface-2), var(--surface));
  }
  .perks__foot svg{ color:var(--blue); flex-shrink:0; }
  .perks__claim{ font-size:21px; font-weight:700; letter-spacing:-.02em; flex-shrink:0; }
  .perks__note{
    font-size:13.8px; color:var(--ink-soft); max-width:520px;
    padding-left:28px; border-left:1px solid var(--line);
  }
  .perks__go{
    margin-left:auto; flex-shrink:0;
    width:46px; height:46px; border-radius:50%;
    border:1px solid rgba(75,163,227,.45); background:none; color:var(--blue);
    display:flex; align-items:center; justify-content:center; font-size:19px; line-height:1;
    transition:background .2s ease, transform .2s ease;
  }
  .perks__go:hover{ background:var(--blue-glow); transform:translateX(3px); }
  .perks__note b{ color:var(--blue); font-weight:500; }
  @media (max-width:1080px){ .perks{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:620px){
    .perks{ grid-template-columns:1fr; }
    .perks__foot{ gap:18px; padding:24px 22px; }
    .perks__note{ padding-left:0; border-left:none; padding-top:16px; border-top:1px solid var(--line); }
  }

  /* ---------- Diensten ---------- */
  .cards3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .svc{
    border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
    padding:32px 28px; transition:border-color .25s ease, transform .25s ease, background .25s ease;
  }
  .svc:hover{ border-color:rgba(75,163,227,.45); background:var(--surface-2); transform:translateY(-3px); }
  .svc__no{ font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--blue); }
  .svc__ico{ color:var(--blue); margin:18px 0 20px; }
  .svc__t{ font-size:21px; margin-bottom:9px; }
  .svc__lead{ font-size:14.5px; color:var(--blue); margin-bottom:14px; font-weight:500; }
  .svc__d{ font-size:14.5px; color:var(--ink-soft); margin-bottom:22px; }
  .svc__list li{
    position:relative; padding-left:20px; margin-bottom:10px;
    font-size:14px; color:var(--ink-soft);
  }
  .svc__list li::before{
    content:""; position:absolute; left:0; top:8px;
    width:6px; height:6px; border-radius:50%; background:var(--blue); opacity:.7;
  }
  @media (max-width:940px){ .cards3{ grid-template-columns:1fr; } }

  /* ---------- Specialismen ---------- */
  .specs{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .spec{
    text-align:left; width:100%; font-family:var(--font); color:inherit; cursor:pointer;
    border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
    padding:28px 26px 24px;
    transition:border-color .25s ease, transform .25s ease, background .25s ease;
  }
  .spec:hover{ border-color:rgba(75,163,227,.45); background:var(--surface-2); transform:translateY(-3px); }
  .spec__no{ font-size:11.5px; font-weight:700; letter-spacing:.14em; color:var(--blue); }
  .spec__ico{ color:var(--blue); margin:16px 0 18px; }
  .spec__t{ font-size:18px; font-weight:700; margin-bottom:9px; letter-spacing:-.02em; }
  .spec__d{ font-size:14px; color:var(--ink-soft); }
  .spec__more{
    display:inline-flex; align-items:center; gap:8px; margin-top:20px;
    font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue);
  }
  .spec__more::after{ content:"+"; font-size:15px; transition:transform .2s ease; }
  .spec:hover .spec__more::after{ transform:rotate(90deg); }
  @media (max-width:940px){ .specs{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:600px){ .specs{ grid-template-columns:1fr; } }

  /* ---------- Werkwijze ---------- */
  .steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; position:relative; }
  .steps::before{
    content:""; position:absolute; left:0; right:0; top:19px; height:1px; background:var(--line);
  }
  .step{ position:relative; padding-top:52px; }
  .step__dot{
    position:absolute; top:11px; left:0;
    width:17px; height:17px; border-radius:50%;
    border:2px solid var(--blue); background:var(--bg);
    display:flex; align-items:center; justify-content:center;
  }
  .step__dot::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--blue); }
  .step__no{ font-size:11.5px; font-weight:700; letter-spacing:.14em; color:var(--blue); }
  .step__t{ font-size:17px; font-weight:700; margin:9px 0 8px; letter-spacing:-.02em; }
  .step__d{ font-size:14px; color:var(--ink-soft); }
  @media (max-width:900px){
    .steps{ grid-template-columns:1fr; gap:0; }
    .steps::before{ left:8px; right:auto; top:8px; bottom:8px; width:1px; height:auto; }
    .step{ padding:0 0 30px 34px; }
    .step__dot{ top:2px; }
  }

  /* ---------- Vacatures ---------- */
  .filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px; }
  .filter{
    padding:10px 17px; border-radius:6px; border:1px solid var(--line-strong);
    background:none; color:var(--ink-soft);
    font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    transition:border-color .2s ease, color .2s ease, background .2s ease;
  }
  .filter:hover{ border-color:var(--blue); color:var(--ink); }
  .filter.is-on{ background:var(--blue); border-color:var(--blue); color:#06121C; }
  .jobs{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .job{
    border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
    padding:26px 24px; transition:border-color .25s ease, transform .25s ease, background .25s ease;
  }
  .job:hover{ border-color:rgba(75,163,227,.45); background:var(--surface-2); transform:translateY(-3px); }
  .job__tags{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:18px; }
  .tag{
    padding:5px 10px; border-radius:4px; border:1px solid var(--line-strong);
    font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft);
  }
  .tag--blue{ border-color:rgba(75,163,227,.5); color:var(--blue); }
  .job__t{ font-size:20px; margin-bottom:11px; }
  .job__loc{
    display:flex; align-items:center; gap:7px; margin-bottom:13px;
    font-size:13px; color:var(--ink-soft);
  }
  .job__loc svg{ color:var(--blue); flex-shrink:0; }
  .job__d{ font-size:14px; color:var(--ink-soft); margin-bottom:20px; }
  .job__link{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; font-weight:600; color:var(--blue);
  }
  .job__link::after{ content:"→"; transition:transform .2s ease; }
  .job:hover .job__link::after{ transform:translateX(4px); }
  .jobs__foot{ margin-top:34px; text-align:center; }
  @media (max-width:940px){ .jobs{ grid-template-columns:1fr 1fr; } }
  @media (max-width:640px){ .jobs{ grid-template-columns:1fr; } }

  /* ---------- Over ons ---------- */
  .about{ position:relative; overflow:hidden; }
  .about__media{ position:absolute; inset:0; z-index:0; }
  .about__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.12) brightness(.5); }
  .about__media::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(96deg, var(--bg) 6%, rgba(11,12,14,.94) 40%, rgba(11,12,14,.55) 78%, rgba(11,12,14,.7) 100%);
  }
  .about__inner{ position:relative; z-index:2; max-width:620px; }
  .about__inner p{ color:var(--ink-soft); margin-bottom:17px; font-size:15.5px; }
  .about__inner p b{ color:var(--ink); font-weight:600; }
  .philo{
    position:relative; z-index:2;
    display:grid; grid-template-columns:auto 1fr auto; gap:30px; align-items:center;
    margin-top:44px; padding:28px 32px;
    border:1px solid var(--line); border-radius:var(--r);
    background:rgba(22,25,29,.82); backdrop-filter:blur(6px);
    max-width:1000px;
  }
  .philo svg{ color:var(--blue); flex-shrink:0; }
  .philo__label{
    font-size:11.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:var(--blue);
    display:block; padding-bottom:9px; margin-bottom:13px; position:relative;
  }
  .philo__label::after{ content:""; position:absolute; left:0; bottom:0; width:28px; height:2px; background:var(--blue); }
  .philo__text{ font-size:13.8px; color:var(--ink-soft); line-height:1.6; }
  .philo__text b{ color:var(--ink); font-weight:600; }
  .philo__claim{
    display:flex; align-items:center; gap:16px;
    padding-left:30px; border-left:1px solid var(--line);
  }
  .philo__claim p{ font-size:19px; font-weight:700; letter-spacing:-.02em; line-height:1.18; }
  .philo__claim em{ font-style:normal; color:var(--blue); }
  @media (max-width:1000px){
    .philo{ grid-template-columns:1fr; gap:22px; }
    .philo__claim{ padding-left:0; border-left:none; padding-top:20px; border-top:1px solid var(--line); }
  }

  /* ---------- Kennisbank ---------- */
  .posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .post{
    display:block; border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
    padding:26px 24px; transition:border-color .25s ease, transform .25s ease, background .25s ease;
  }
  .post:hover{ border-color:rgba(75,163,227,.45); background:var(--surface-2); transform:translateY(-3px); }
  .post__meta{ display:flex; align-items:center; gap:11px; margin-bottom:16px; }
  .post__date{ font-size:12.5px; color:var(--ink-dim); }
  .post__t{ font-size:18px; font-weight:700; line-height:1.3; margin-bottom:11px; letter-spacing:-.02em; }
  .post__d{ font-size:14px; color:var(--ink-soft); margin-bottom:18px; }
  .post__link{ font-size:13px; font-weight:600; color:var(--blue); }
  @media (max-width:940px){ .posts{ grid-template-columns:1fr; } }

  /* ---------- FAQ ---------- */
  .faq{ max-width:860px; border-top:1px solid var(--line); }
  .faq__i{ border-bottom:1px solid var(--line); }
  .faq__q{
    list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
    gap:24px; padding:22px 0; font-size:17px; font-weight:600; letter-spacing:-.01em;
  }
  .faq__q::-webkit-details-marker{ display:none; }
  .faq__q::after{ content:"+"; font-size:24px; font-weight:300; color:var(--blue); transition:transform .25s ease; }
  .faq__i[open] .faq__q::after{ transform:rotate(45deg); }
  .faq__a{ padding:0 0 24px; max-width:680px; color:var(--ink-soft); font-size:15px; }

  /* ---------- Contact ---------- */
  .contact{ position:relative; overflow:hidden; padding:104px 0; }
  .contact__media{ position:absolute; inset:0; z-index:0; }
  .contact__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.15) brightness(.5); }
  .contact__media::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(96deg, var(--bg) 6%, rgba(11,12,14,.94) 38%, rgba(11,12,14,.5) 76%, rgba(11,12,14,.72) 100%);
  }
  .contact__top{ position:relative; z-index:2; max-width:620px; }
  .contact__pills{ display:flex; gap:26px; flex-wrap:wrap; margin:28px 0 30px; }
  .pill{ display:flex; align-items:center; gap:11px; font-size:13.5px; line-height:1.3; }
  .pill svg{ color:var(--blue); flex-shrink:0; }
  .contact__btns{ display:flex; gap:14px; flex-wrap:wrap; }

  .cbox{
    position:relative; z-index:2;
    display:grid; grid-template-columns:.85fr 1.4fr .75fr; gap:0;
    margin-top:46px; border:1px solid var(--line); border-radius:var(--r);
    background:rgba(22,25,29,.85); backdrop-filter:blur(6px); overflow:hidden;
  }
  .cbox__col{ padding:30px 30px 32px; border-right:1px solid var(--line); }
  .cbox__col:last-child{ border-right:none; }
  .cbox__label{
    font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue);
    display:block; padding-bottom:9px; margin-bottom:18px; position:relative;
  }
  .cbox__label::after{ content:""; position:absolute; left:0; bottom:0; width:28px; height:2px; background:var(--blue); }
  .cbox__intro{ font-size:13.8px; color:var(--ink-soft); margin-bottom:22px; }
  .cline{ display:flex; align-items:center; gap:12px; padding:11px 0; font-size:14px; }
  .cline svg{ color:var(--blue); flex-shrink:0; }
  .cline a:hover{ color:var(--blue); }
  .cform{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .cform input, .cform textarea{
    font-family:var(--font); font-size:14.5px; color:var(--ink);
    background:rgba(255,255,255,.04); border:1px solid var(--line-strong);
    border-radius:6px; padding:12px 14px; width:100%;
    transition:border-color .2s ease, background .2s ease;
  }
  .cform input::placeholder, .cform textarea::placeholder{ color:var(--ink-dim); }
  .cform input:focus, .cform textarea:focus{ outline:none; border-color:var(--blue); background:rgba(255,255,255,.07); }
  .cform .wide{ grid-column:1 / -1; }
  .cform textarea{ min-height:96px; resize:vertical; }
  .cform .btn{ justify-self:start; margin-top:2px; }
  .cform__msg{ grid-column:1 / -1; font-size:13.5px; color:var(--blue); }
  .assure{ display:flex; align-items:center; gap:12px; padding:11px 0; font-size:13.2px; color:var(--ink-soft); }
  .assure svg{ color:var(--blue); flex-shrink:0; }
  @media (max-width:1080px){
    .cbox{ grid-template-columns:1fr; }
    .cbox__col{ border-right:none; border-bottom:1px solid var(--line); }
    .cbox__col:last-child{ border-bottom:none; }
  }
  @media (max-width:560px){ .cform{ grid-template-columns:1fr; } .contact{ padding:68px 0; } }

  /* ---------- Footer ---------- */
  footer{ background:#08090B; border-top:1px solid var(--line); padding:60px 0 28px; color:var(--ink-soft); }
  .foot{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:34px; padding-bottom:40px; border-bottom:1px solid var(--line); }
  .foot__brand{ display:flex; align-items:center; margin-bottom:16px; }
  .foot__claim{ font-size:14px; font-weight:600; color:var(--ink); margin-bottom:9px; }
  .foot__claim em{ font-style:normal; color:var(--blue); }
  .foot__d{ font-size:13.5px; max-width:280px; }
  .foot__h{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); margin-bottom:16px; display:block; }
  .foot__l li{ margin-bottom:9px; font-size:13.5px; }
  .foot__l a:hover{ color:var(--blue); }
  .foot__bot{ padding-top:22px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-dim); }
  @media (max-width:860px){ .foot{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .foot{ grid-template-columns:1fr; } }

  /* ---------- Intropagina (gate) ---------- */
  .gate{
    position:fixed; inset:0; z-index:300; background:var(--bg); overflow:hidden;
    display:flex; flex-direction:column;
    transition:opacity .5s ease, visibility .5s ease;
  }
  .gate.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
  body.gate-open{ overflow:hidden; }
  .gate__media{ position:absolute; inset:0; z-index:0; }
  .gate__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.16) brightness(.6); }
  .gate__media::after{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(100deg, var(--bg) 3%, rgba(11,12,14,.9) 33%, rgba(11,12,14,.4) 63%, rgba(11,12,14,.62) 100%),
      linear-gradient(0deg, var(--bg) 1%, transparent 30%);
  }
  .gate__bar{ position:relative; z-index:2; padding:22px 0 16px; }
  .gate__brand{ display:flex; align-items:center; }
  .gate__word{ font-size:19px; font-weight:800; letter-spacing:.02em; }
  .gate__word span{ font-weight:300; color:#D6DEE6; }
  .gate__body{
    position:relative; z-index:2; flex:1;
    display:flex; align-items:flex-start; min-height:0;
    padding:10px 0 40px;
  }
  .gate__body > .wrap{ width:100%; }
  .gate__col{ max-width:660px; }
  /* Geen <h1> meer maar een <p>: één h1 per pagina hoort bij de hero.
     De koptekstopmaak staat daarom hier in plaats van via h1,h2,h3,h4. */
  .gate__title{
    font-size:clamp(2.4rem,6vw,4.2rem); margin-bottom:26px;
    font-weight:700; letter-spacing:-0.025em; line-height:1.08;
  }
  .gate__title em{ display:block; font-style:normal; color:var(--blue); }
  .gate__text{ font-size:16px; color:var(--ink-soft); max-width:500px; margin-bottom:34px; }
  .gate__text b{ color:var(--ink); font-weight:600; }
  .gate__btns{ display:flex; gap:14px; flex-wrap:wrap; }
  .gate__foot{ position:relative; z-index:2; border-top:1px solid var(--line); }
  .gate__usps{ display:grid; grid-template-columns:repeat(3,1fr); }
  .gate__usps .usp{ padding:22px 30px 22px 0; }
  .gate__skip{
    position:relative; z-index:2; align-self:center; margin:0 0 22px;
    background:none; border:none; color:var(--ink-dim);
    font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    padding:10px 14px; transition:color .2s ease;
  }
  .gate__skip:hover{ color:var(--blue); }
  @media (max-width:900px){
    .gate__body{ padding:14px 0 26px; }
    .gate__usps{ grid-template-columns:1fr; }
    .gate__usps .usp{ padding:15px 0; }
    .gate__usps .usp:not(:first-child){ padding-left:0; }
    .gate__btns .btn{ flex:1 1 auto; justify-content:center; }
  }
  @media (max-height:700px){
    .gate__foot{ display:none; }
  }

  /* ---------- Specialisme-venster ---------- */
  .modal{
    border:none; padding:0; background:transparent; overflow:visible;
    width:min(680px, calc(100% - 32px)); color:var(--ink);
  }
  .modal::backdrop{ background:rgba(5,6,8,.82); backdrop-filter:blur(4px); }
  .modal[open] .modal__card{ animation:mIn .3s ease both; }
  @keyframes mIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
  .modal__card{
    position:relative; max-height:86vh; overflow-y:auto;
    padding:38px 36px 32px; border-radius:var(--r);
    border:1px solid var(--line-strong); border-top:3px solid var(--blue);
    background:var(--surface);
  }
  .modal__x{
    position:absolute; top:16px; right:16px; width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    background:none; border:1px solid var(--line-strong); border-radius:6px;
    color:var(--ink-soft); font-size:21px; line-height:1;
    transition:color .2s ease, border-color .2s ease;
  }
  .modal__x:hover{ color:var(--blue); border-color:var(--blue); }
  .modal__no{ font-size:11.5px; font-weight:700; letter-spacing:.14em; color:var(--blue); }
  .modal__t{ font-size:27px; margin:12px 0 12px; padding-right:38px; }
  .modal__lead{ font-size:16px; font-weight:500; color:var(--blue); margin-bottom:14px; }
  .modal__d{ font-size:15.5px; color:var(--ink-soft); margin-bottom:28px; }
  .modal__label{
    display:block; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--ink-soft); padding-bottom:10px; margin-bottom:15px; border-bottom:1px solid var(--line);
  }
  .modal__block{ margin-bottom:26px; }
  .modal__list{ display:grid; grid-template-columns:1fr 1fr; gap:9px 22px; }
  .modal__list li{ position:relative; padding-left:19px; font-size:14.5px; }
  .modal__list li::before{
    content:""; position:absolute; left:0; top:8px; width:6px; height:6px;
    border-radius:50%; background:var(--blue);
  }
  .modal__tags{ display:flex; flex-wrap:wrap; gap:8px; }
  .modal__tags span{
    font-size:12px; color:var(--blue);
    border:1px solid rgba(75,163,227,.35); border-radius:4px; padding:6px 11px;
  }
  .modal__act{ display:flex; gap:12px; flex-wrap:wrap; padding-top:22px; border-top:1px solid var(--line); }
  @media (max-width:560px){
    .modal__card{ padding:32px 22px 26px; }
    .modal__t{ font-size:23px; }
    .modal__list{ grid-template-columns:1fr; }
    .modal__act .btn{ width:100%; justify-content:center; }
  }

  /* ---------- CV upload ---------- */
  .cv{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
  .cv__list{ margin-top:26px; }
  .cv__list li{
    display:flex; gap:13px; align-items:flex-start;
    padding:12px 0; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink-soft);
  }
  .cv__list li::before{ content:""; flex-shrink:0; margin-top:8px; width:6px; height:6px; border-radius:50%; background:var(--blue); }
  .cv__card{ border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:30px; }
  .cv__drop{
    border:1px dashed var(--line-strong); border-radius:8px;
    padding:38px 22px 32px; text-align:center; cursor:pointer;
    background:rgba(255,255,255,.02);
    transition:border-color .2s ease, background .2s ease;
  }
  .cv__drop:hover, .cv__drop:focus-visible, .cv__drop.is-drag{
    border-color:var(--blue); background:var(--blue-glow); outline:none;
  }
  .cv__drop svg{ color:var(--blue); margin:0 auto 14px; }
  .cv__dt{ font-size:17px; font-weight:600; margin-bottom:6px; }
  .cv__ds{ font-size:13.8px; color:var(--ink-soft); }
  .cv__ds span{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
  .cv__file{
    display:flex; align-items:center; gap:13px; padding:13px 15px;
    border:1px solid var(--line-strong); border-radius:8px; background:rgba(255,255,255,.03);
  }
  .cv__file svg{ color:var(--blue); flex-shrink:0; }
  .cv__fm{ display:flex; flex-direction:column; min-width:0; flex:1; }
  .cv__fn{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .cv__fs{ font-size:12.5px; color:var(--ink-dim); }
  .cv__rm{ background:none; border:none; color:var(--ink-dim); font-size:21px; line-height:1; padding:2px 6px; }
  .cv__rm:hover{ color:var(--blue); }
  .cv__err{ color:#E4796A; font-size:13.5px; margin-top:12px; }
  .cv__fields{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
  .cv__fields input{
    font-family:var(--font); font-size:14.5px; color:var(--ink);
    background:rgba(255,255,255,.04); border:1px solid var(--line-strong);
    border-radius:6px; padding:12px 14px;
  }
  .cv__fields input::placeholder{ color:var(--ink-dim); }
  .cv__fields input:focus{ outline:none; border-color:var(--blue); background:rgba(255,255,255,.07); }
  .cv__sub{ margin-top:18px; width:100%; justify-content:center; }
  .cv__note{ font-size:12px; color:var(--ink-dim); margin-top:14px; line-height:1.55; }
  .cv__ok{ text-align:center; padding:24px 6px; }
  .cv__ok svg{ color:var(--blue); margin:0 auto 18px; }
  .cv__ok h3{ font-size:21px; margin-bottom:10px; }
  .cv__ok p{ color:var(--ink-soft); font-size:15px; max-width:340px; margin:0 auto 22px; }
  @media (max-width:900px){ .cv{ grid-template-columns:1fr; gap:38px; } }
  @media (max-width:520px){ .cv__fields{ grid-template-columns:1fr; } .cv__card{ padding:24px; } }

  /* ---------- CTA-band ---------- */
  .band{
    background:linear-gradient(100deg, #12304A 0%, #17405F 48%, #123049 100%);
    border-top:1px solid rgba(75,163,227,.35); border-bottom:1px solid rgba(75,163,227,.35);
    position:relative; overflow:hidden;
  }
  .band__in{
    display:flex; align-items:center; justify-content:space-between; gap:30px;
    padding:38px 0; position:relative; z-index:1;
  }
  .band__e{ font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-bright); display:block; margin-bottom:8px; }
  .band__t{ font-size:clamp(1.3rem,2.3vw,1.75rem); font-weight:700; letter-spacing:-.02em; }
  @media (max-width:700px){
    .band__in{ flex-direction:column; align-items:flex-start; gap:20px; }
    .band .btn{ width:100%; justify-content:center; }
  }

  /* ---------- Opdrachtgevers-track ---------- */
  .otr{ position:relative; overflow:hidden; }
  .otr__media{ position:absolute; inset:0; z-index:0; }
  .otr__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.15) brightness(.55); }
  .otr__media::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(96deg, var(--bg) 5%, rgba(11,12,14,.95) 36%, rgba(11,12,14,.5) 72%, rgba(11,12,14,.7) 100%);
  }
  .otr__in{ position:relative; z-index:2; padding:82px 0; }
  .otr__num{
    display:flex; align-items:center; gap:12px; margin-bottom:20px;
    font-size:13px; font-weight:700; letter-spacing:.14em; color:var(--blue);
  }
  .otr__num::after{ content:""; width:24px; height:1px; background:var(--blue); opacity:.6; }
  .otr__t{ font-size:clamp(2.1rem,4.8vw,3.5rem); margin-bottom:22px; }
  .otr__t em{ display:block; font-style:normal; color:var(--blue); }
  .otr__rule{ display:block; width:34px; height:2px; background:var(--blue); margin-bottom:22px; }
  .otr__q{ font-size:17px; font-weight:600; margin-bottom:16px; }
  .otr__p{ font-size:15.5px; color:var(--ink-soft); max-width:470px; margin-bottom:30px; }
  .otr__btns{ display:flex; gap:14px; flex-wrap:wrap; }
  .otr__col{ max-width:560px; }
  @media (max-width:700px){ .otr__in{ padding:64px 0; } }

  /* 02 — waarom-kaarten */
  .why6{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; position:relative; z-index:2; }
  .why6__c{
    display:flex; gap:18px; align-items:flex-start;
    border:1px solid var(--line); border-radius:var(--r);
    background:rgba(22,25,29,.86); backdrop-filter:blur(6px);
    padding:24px 24px 26px;
    transition:border-color .25s ease, transform .25s ease;
  }
  .why6__c:hover{ border-color:rgba(75,163,227,.45); transform:translateY(-3px); }
  .why6__c svg{ color:var(--blue); flex-shrink:0; margin-top:2px; }
  .why6__t{ font-size:16.5px; font-weight:700; letter-spacing:-.02em; margin-bottom:11px; }
  .why6__r{ display:block; width:24px; height:2px; background:var(--blue); opacity:.5; margin-bottom:12px; }
  .why6__d{ font-size:13.8px; color:var(--ink-soft); line-height:1.55; }
  @media (max-width:980px){ .why6{ grid-template-columns:1fr 1fr; } }
  @media (max-width:640px){ .why6{ grid-template-columns:1fr; } }

  /* 03 — oplossingen */
  .sol{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; position:relative; z-index:2; }
  .sol__c{
    border:1px solid var(--line); border-radius:var(--r);
    background:rgba(22,25,29,.86); backdrop-filter:blur(6px);
    padding:26px 24px 22px;
    transition:border-color .25s ease, transform .25s ease;
  }
  .sol__c:hover{ border-color:rgba(75,163,227,.45); transform:translateY(-3px); }
  .sol__no{ font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--blue); }
  .sol__head{ display:flex; gap:16px; align-items:flex-start; margin:16px 0 14px; }
  .sol__head svg{ color:var(--blue); flex-shrink:0; }
  .sol__t{ font-size:19px; font-weight:700; letter-spacing:-.02em; margin-bottom:9px; }
  .sol__d{ font-size:13.8px; color:var(--ink-soft); }
  .sol__chips{ display:flex; flex-wrap:wrap; gap:8px 16px; padding-top:16px; border-top:1px solid var(--line); }
  .chip{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink-soft); }
  .chip svg{ color:var(--blue); flex-shrink:0; }
  @media (max-width:980px){ .sol{ grid-template-columns:1fr; } }

  /* 03 — disciplinebalk */
  .disc{
    position:relative; z-index:2; margin-top:18px;
    display:grid; grid-template-columns:1.15fr repeat(5,1fr); gap:0;
    border:1px solid var(--line); border-radius:var(--r);
    background:rgba(22,25,29,.86); backdrop-filter:blur(6px); overflow:hidden;
  }
  .disc__lead{ padding:22px 26px; border-right:1px solid var(--line); font-size:15px; font-weight:600; line-height:1.35; }
  .disc__lead em{ font-style:normal; color:var(--blue); display:block; }
  .disc__i{
    display:flex; flex-direction:column; align-items:center; gap:11px; text-align:center;
    padding:22px 14px; border-right:1px solid var(--line);
    font-size:11.5px; color:var(--ink-soft); line-height:1.35;
  }
  .disc__i:last-child{ border-right:none; }
  .disc__i svg{ color:var(--blue); }
  @media (max-width:1000px){
    .disc{ grid-template-columns:repeat(3,1fr); }
    .disc__lead{ grid-column:1 / -1; border-right:none; border-bottom:1px solid var(--line); }
    .disc__i:nth-child(4){ border-right:none; }
    .disc__i:nth-child(-n+4){ border-bottom:1px solid var(--line); }
  }
  @media (max-width:560px){ .disc{ grid-template-columns:1fr 1fr; } .disc__i{ border-bottom:1px solid var(--line); } }

  /* 04 — opdrachtgevercontact */
  .ocon{ display:flex; gap:34px; flex-wrap:wrap; margin-bottom:30px; }
  .ocon__i{ display:flex; align-items:center; gap:13px; }
  .ocon__i > svg{ color:var(--blue); flex-shrink:0; }
  .ocon__v{ font-size:16px; font-weight:600; }
  .ocon__s{ font-size:12.5px; color:var(--ink-dim); }
  .oform{
    position:relative; z-index:2; margin-top:12px;
    display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:start;
    border:1px solid var(--line); border-radius:var(--r);
    background:rgba(22,25,29,.86); backdrop-filter:blur(6px);
    padding:28px 30px;
  }
  .oform__intro{ display:flex; gap:16px; max-width:330px; }
  .oform__intro > svg{ color:var(--blue); flex-shrink:0; }
  .oform__t{ font-size:17px; font-weight:700; margin-bottom:9px; letter-spacing:-.02em; }
  .oform__d{ font-size:13.5px; color:var(--ink-soft); }
  .oform__d b{ color:var(--ink); font-weight:600; }
  .oform__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }
  .oform__f{ display:flex; flex-direction:column; gap:7px; }
  .oform__f label{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); }
  .oform__f input{
    font-family:var(--font); font-size:14px; color:var(--ink);
    background:rgba(255,255,255,.04); border:1px solid var(--line-strong);
    border-radius:6px; padding:11px 13px;
  }
  .oform__f input::placeholder{ color:var(--ink-dim); }
  .oform__f input:focus{ outline:none; border-color:var(--blue); background:rgba(255,255,255,.07); }
  .oform__wide{ grid-column:1 / 4; }
  .oform__grid .btn{ align-self:end; justify-content:center; }
  .oform__msg{ grid-column:1 / -1; font-size:13.5px; color:var(--blue); }
  @media (max-width:1080px){
    .oform{ grid-template-columns:1fr; gap:24px; }
    .oform__intro{ max-width:none; }
  }
  @media (max-width:760px){
    .oform__grid{ grid-template-columns:1fr 1fr; }
    .oform__wide{ grid-column:1 / -1; }
    .oform__grid .btn{ grid-column:1 / -1; }
  }
  @media (max-width:460px){ .oform__grid{ grid-template-columns:1fr; } }

  .nav__link.is-active{ color:var(--blue); }
  .nav__link.is-active::after{ width:100%; }

  /* ---------- Opdrachtgevers-track ---------- */
  .otr{ position:relative; overflow:hidden; }
  .otr__media{ position:absolute; top:0; right:0; bottom:0; left:0; z-index:0; }
  .otr__media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.14) brightness(.58); }
  .otr__media::after{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(94deg, var(--bg) 10%, rgba(11,12,14,.94) 28%, rgba(11,12,14,.34) 56%, rgba(11,12,14,.46) 100%),
      linear-gradient(0deg, var(--bg) 1%, rgba(11,12,14,.7) 16%, transparent 42%);
  }
  .otr__in{ position:relative; z-index:2; padding:60px 0 64px; }
  .otr__num{
    display:inline-flex; align-items:center; gap:12px; margin-bottom:16px;
    font-size:14px; font-weight:600; letter-spacing:.06em; color:var(--blue);
  }
  .otr__num::after{ content:""; width:22px; height:1px; background:var(--blue); opacity:.75; }
  .otr__t{ font-size:clamp(2.1rem,4.4vw,3.4rem); margin-bottom:20px; max-width:620px; }
  .otr__t em{ display:block; font-style:normal; color:var(--blue); }
  .otr__rule{ display:block; width:40px; height:2px; background:var(--blue); margin-bottom:22px; }
  .otr__q{ font-size:18px; font-weight:600; margin-bottom:18px; letter-spacing:-.01em; }
  .otr__p{ font-size:15px; color:var(--ink-soft); max-width:380px; margin-bottom:30px; line-height:1.7; }
  .otr__btns{ display:flex; gap:14px; flex-wrap:wrap; }

  /* 01 — drie kenmerken inline */
  .otr__usps{ display:flex; gap:0; flex-wrap:wrap; margin-top:40px; }
  .otr__usp{
    display:flex; align-items:center; gap:15px;
    padding:0 34px; border-right:1px solid var(--line);
  }
  .otr__usp:first-child{ padding-left:0; }
  .otr__usp:last-child{ border-right:none; }
  .otr__usp span.ico{
    flex-shrink:0; width:52px; height:52px; border-radius:50%;
    border:1px solid rgba(255,255,255,.3);
    display:flex; align-items:center; justify-content:center; color:var(--ink);
  }
  .otr__usp p{ font-size:15px; font-weight:600; line-height:1.3; max-width:110px; }
  @media (max-width:760px){
    .otr__usps{ flex-direction:column; gap:16px; }
    .otr__usp{ padding:0; border-right:none; }
  }

  /* 02 — zes kaarten */
  .why6{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; position:relative; z-index:2; margin-top:34px; }
  .why6__c{
    display:grid; grid-template-columns:auto 1fr; gap:6px 20px; align-content:start;
    border:1px solid var(--line); border-radius:var(--r);
    background:rgba(16,20,26,.86); backdrop-filter:blur(6px);
    padding:26px 26px 28px;
    transition:border-color .25s ease, transform .25s ease;
  }
  .why6__c:hover{ border-color:rgba(75,163,227,.45); transform:translateY(-3px); }
  .why6__c > svg{ color:var(--blue); grid-column:1; grid-row:1 / span 2; }
  .why6__t{ font-size:17px; font-weight:700; letter-spacing:-.02em; grid-column:2; grid-row:1; align-self:center; }
  .why6__r{ display:block; width:24px; height:2px; background:var(--blue); opacity:.55; grid-column:2; grid-row:2; margin-top:10px; }
  .why6__d{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; grid-column:2; grid-row:3; margin-top:14px; }
  @media (max-width:980px){ .why6{ grid-template-columns:1fr 1fr; } }
  @media (max-width:640px){ .why6{ grid-template-columns:1fr; } .why6__d{ grid-column:1 / -1; } }

  /* 03 — oplossingen */
  .sol{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; position:relative; z-index:2; margin-top:34px; }
  .sol__c{
    border:1px solid var(--line); border-radius:var(--r);
    background:rgba(16,20,26,.86); backdrop-filter:blur(6px);
    padding:24px 24px 20px;
    transition:border-color .25s ease, transform .25s ease;
  }
  .sol__c:hover{ border-color:rgba(75,163,227,.45); transform:translateY(-3px); }
  .sol__no{ display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:600; color:var(--blue); }
  .sol__no::after{ content:""; width:18px; height:1px; background:var(--blue); opacity:.75; }
  .sol__head{ display:grid; grid-template-columns:auto 1fr; gap:8px 20px; margin:16px 0 20px; }
  .sol__head > svg{ color:var(--blue); grid-column:1; grid-row:1 / span 3; align-self:start; }
  .sol__t{ font-size:20px; font-weight:700; letter-spacing:-.02em; grid-column:2; grid-row:1; }
  .sol__r{ display:block; width:24px; height:2px; background:var(--blue); opacity:.55; grid-column:2; grid-row:2; margin:4px 0 2px; }
  .sol__d{ font-size:14px; color:var(--ink-soft); grid-column:2; grid-row:3; line-height:1.6; }
  .sol__chips{ display:flex; flex-wrap:wrap; gap:9px 14px; padding-top:16px; border-top:1px solid var(--line); }
  .chip{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink-soft); }
  .chip svg{ color:var(--blue); flex-shrink:0; }
  @media (max-width:980px){ .sol{ grid-template-columns:1fr; } }

  /* 03 — disciplinebalk */
  .disc{
    position:relative; z-index:2; margin-top:20px;
    display:grid; grid-template-columns:1.25fr repeat(5,1fr);
    border:1px solid var(--line); border-radius:var(--r);
    background:rgba(16,20,26,.86); backdrop-filter:blur(6px); overflow:hidden;
  }
  .disc__lead{
    padding:26px 28px; border-right:1px solid var(--line);
    font-size:16px; font-weight:600; line-height:1.4; letter-spacing:-.01em;
  }
  .disc__lead em{ font-style:normal; color:var(--blue); display:block; }
  .disc__i{
    display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
    padding:24px 12px; font-size:12px; color:var(--ink-soft); line-height:1.4;
  }
  .disc__i svg{ color:var(--blue); }
  @media (max-width:1000px){
    .disc{ grid-template-columns:repeat(3,1fr); }
    .disc__lead{ grid-column:1 / -1; border-right:none; border-bottom:1px solid var(--line); }
  }
  @media (max-width:560px){ .disc{ grid-template-columns:1fr 1fr; } }

  /* 04 — contact opdrachtgevers */
  .otr__lines{ display:flex; gap:34px; flex-wrap:wrap; margin-top:30px; }
  .oline{ display:flex; align-items:center; gap:14px; }
  .oline > span.ico{
    flex-shrink:0; width:46px; height:46px; border-radius:50%;
    border:1px solid rgba(75,163,227,.45);
    display:flex; align-items:center; justify-content:center; color:var(--blue);
  }
  .oline__v{ display:block; font-size:16px; font-weight:600; }
  .oline__s{ display:block; font-size:12.5px; color:var(--ink-dim); }
  .oform{
    position:relative; z-index:2; margin-top:40px;
    display:grid; grid-template-columns:300px 1fr; gap:34px;
    border:1px solid var(--line); border-radius:var(--r);
    background:rgba(16,20,26,.88); backdrop-filter:blur(6px);
    padding:30px 32px 32px;
  }
  .oform__intro{ display:flex; gap:18px; }
  .oform__intro > span.ico{
    flex-shrink:0; width:58px; height:58px; border-radius:50%;
    border:1px solid rgba(75,163,227,.45);
    display:flex; align-items:center; justify-content:center; color:var(--blue);
  }
  .oform__t{ font-size:17px; font-weight:700; letter-spacing:-.02em; margin-bottom:8px; }
  .oform__r{ display:block; width:24px; height:2px; background:var(--blue); opacity:.55; margin-bottom:12px; }
  .oform__d{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; }
  .oform__d b{ color:var(--ink); font-weight:600; }
  .oform__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px 16px; align-content:start; }
  .of{ display:flex; flex-direction:column; gap:8px; }
  .of label{ font-size:12px; color:var(--ink-soft); }
  .of input{
    font-family:var(--font); font-size:14px; color:var(--ink);
    background:rgba(255,255,255,.05); border:1px solid var(--line-strong);
    border-radius:6px; padding:12px 14px; width:100%;
  }
  .of input::placeholder{ color:var(--ink-dim); }
  .of input:focus{ outline:none; border-color:var(--blue); background:rgba(255,255,255,.08); }
  .of--wide{ grid-column:1 / 4; }
  .oform__grid .btn{ align-self:end; justify-content:center; height:44px; }
  .oform__msg{ grid-column:1 / -1; font-size:13.5px; color:var(--blue); }
  @media (max-width:1080px){ .oform{ grid-template-columns:1fr; gap:26px; } }
  @media (max-width:760px){
    .oform__grid{ grid-template-columns:1fr 1fr; }
    .of--wide{ grid-column:1 / -1; }
    .oform__grid .btn{ grid-column:1 / -1; }
  }
  @media (max-width:460px){ .oform__grid{ grid-template-columns:1fr; } }


  /* Dynamische paginawissel professionals/opdrachtgevers */
  body[data-view="pro"] [data-view="og"]{ display:none !important; }
  body[data-view="og"] [data-view="pro"]{ display:none !important; }
  /* De balk is 76px hoog; iets meer marge houdt het nummertje
     boven de kop vrij in plaats van er half achter. */
  [data-view]{ scroll-margin-top:100px; }


  /* ---------- Responsief: laptop en mobiel ----------
     Aanvulling op de opmaak hierboven, bewust als laatste blok in de head:
     build.py plakt alle head-<style>-blokken in deze volgorde achter elkaar
     tot /assets/css/site.css, dus deze regels winnen zonder dat het ontwerp
     zelf herschreven hoeft te worden. */

  html{ -webkit-text-size-adjust:100%; }
  body{ overflow-x:hidden; }
  /* Lange woorden, e-mailadressen en URL's mogen afbreken in plaats van de
     regel op te rekken. */
  p, li, a, h1, h2, h3, h4, .gate__title, .hero__title{ overflow-wrap:break-word; }

  /* --- Zijmarge van .wrap herstellen ---
     .hero__inner en .otr__in dragen de class .wrap, maar zetten padding als
     shorthand en wissen daarmee de horizontale marge van .wrap. Hun tekst
     stond op elke breedte op x=0, op een telefoon dus tegen het glas, terwijl
     de rest van de pagina insprong. Alleen de zijmarge terugzetten; de
     verticale ruimte blijft van hun eigen regel. */
  .hero__inner, .otr__in{ padding-left:34px; padding-right:34px; }
  /* De zijmarge van .wrap was op telefoonformaat 20px. Alle tekst op de site
     landt op die marge — ook koppen van 38px — en dat staat te krap tegen de
     schermrand. 26px geeft lucht en houdt op 360px nog 308px leesbreedte
     over. Hier staan alle drie de wraps bij elkaar, zodat ze niet uit elkaar
     kunnen lopen. */
  @media (max-width:600px){
    .wrap{ padding-left:26px; padding-right:26px; }
    .hero__inner, .otr__in{ padding-left:26px; padding-right:26px; }
  }

  /* --- Navigatie op laptopbreedte ---
     Het volledige menu paste alleen boven 1300px, waardoor een laptop van
     1280 of 1366 het mobiele hamburgermenu kreeg. Tussen 1180 en 1300 wordt
     het menu nu compacter in plaats van te verdwijnen. */
  @media (min-width:1181px) and (max-width:1300px){
    .nav__row{ gap:13px; }
    .nav__links{ display:flex; gap:12px; }
    .nav__link{ font-size:10.5px; letter-spacing:.04em; }
    .nav__cta{ display:inline-flex; padding:11px 14px; font-size:10px; gap:7px; }
    .nav__sub{ font-size:8.5px; }
    .nav__toggle{ display:none; }
  }

  /* --- Uitgeklapt mobiel menu ---
     Acht items passen niet op een liggende telefoon; het paneel moet dus
     kunnen schuiven en op lage schermen wat compacter staan. */
  @media (max-width:1180px){
    .nav__panel.is-open{ overflow-y:auto; overscroll-behavior:contain; }
  }
  @media (max-width:1180px) and (max-height:620px){
    .nav__panel.is-open{ padding:74px 30px 28px; }
    .nav__panel .nav__link{ padding:11px 0; font-size:15px; }
  }

  /* --- Intropagina ---
     .gate is schermvullend met overflow:hidden; bij weinig schermhoogte
     (liggende telefoon) viel de onderkant daardoor weg. */
  @media (max-height:640px){
    .gate{ overflow-y:auto; }
    .gate__body{ padding:10px 0 20px; }
  }

  /* De claimregel in het perks-blok staat op flex-shrink:0 en kon dus niet
     meekrimpen; op een telefoon stak hij daardoor 58px buiten het scherm en
     schoof de hele homepage horizontaal. */
  @media (max-width:620px){
    .perks__claim{ flex-shrink:1; min-width:0; font-size:19px; }
  }

  /* --- Telefoons --- */
  @media (max-width:480px){
    /* Knoplabels mogen over twee regels; ze staan nu op nowrap en duwden
       daarmee de layout breder dan het scherm. */
    .btn{ white-space:normal; text-align:center; }
    .hero__btns .btn, .gate__btns .btn, .contact__btns .btn, .otr__btns .btn{
      flex:1 1 100%; justify-content:center;
    }
    .sec{ padding:56px 0; }
    /* Ruimere aanraakvlakken in de voettekst. */
    .foot__l li{ margin-bottom:2px; }
    .foot__l a{ display:inline-block; padding:9px 0; }
  }