/* Overgenomen uit het goedgekeurde conceptontwerp.
 * Merkkleuren en lettertypen verwijzen naar theme.json, zodat de
 * merkhandleiding de enige bron van waarheid blijft.
 */

  *{margin:0;padding:0;box-sizing:border-box}
  [hidden]{display:none!important}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
  body{font-family:var(--font-body);color:var(--ink);background:var(--surface);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
  img{max-width:100%}
  a{color:var(--cyan-tx)}
  :focus-visible{outline:2px solid var(--orange-lg);outline-offset:2px;border-radius:4px}
  .skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 14px;z-index:200}
  .skip:focus{left:8px;top:8px}
  .logo img{display:block;height:38px;width:auto}
  .logo.sm img{height:30px}
  
  .prefoot .m-icon{height:56px;width:auto;margin-bottom:14px}
  
  nav.main .links a{transition:background .16s ease,color .16s ease}
  nav.main .links a:hover{background:var(--paper)}
  nav.main{flex:1}
  nav.main .links{display:flex;gap:10px;align-items:center;flex:1;margin-left:22px}
  nav.main .actions{display:flex;gap:10px;align-items:center;margin-left:auto;padding-left:16px}
  .navitem{position:relative}
  .navitem>a{display:inline-flex;align-items:center;gap:5px}
  .caret{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.55}
  .dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(26,26,26,.13);padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;z-index:120}
  .navitem:hover .dropdown,.navitem:focus-within .dropdown{opacity:1;visibility:visible;transform:none}
  .dropdown a{display:block;padding:9px 12px;border-radius:8px;font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none}
  .dropdown a:hover{background:var(--paper)}
  .btn-soft{font-weight:800;border-radius:9px;text-decoration:none;white-space:nowrap;transition:background .16s ease,transform .16s ease}
  .btn-soft:hover{background:#CFE9F0;transform:translateY(-1px)}
  .btn-solid{background:var(--orange);color:var(--ink);font-weight:800;border-radius:9px;text-decoration:none;white-space:nowrap;transition:background .16s ease,transform .16s ease,box-shadow .16s ease}
  .btn-solid:hover{background:var(--orange-lg);transform:translateY(-1px);box-shadow:0 6px 16px rgba(226,121,7,.28)}
  .icon-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);color:var(--ink);text-decoration:none;flex:none;transition:background .16s ease,border-color .16s ease,color .16s ease}
  .icon-link:hover{background:var(--wp--preset--color--teal-licht);border-color:var(--cyan);color:var(--cyan-tx)}
  .icon-link svg{width:19px;height:19px}
  @media(max-width:1000px){nav.main .links{display:none}}
  @media(max-width:560px){.btn-soft{display:none}}
  .hero{background:none;position:relative;overflow:visible}
  .hero::after{display:none}
  
  .herogrid{display:grid;grid-template-columns:1fr;gap:0}
  @media(min-width:900px){.herogrid{grid-template-columns:1.28fr .72fr;align-items:stretch}}
  
  @media(min-width:900px){.herotext{align-self:center}}
  
  
  
  .heroimg{position:relative;min-height:270px}
  .heroimg img{width:100%;height:100%;object-fit:cover;display:block}
  @media(max-width:899px){.heroimg{order:-1;min-height:220px;max-height:280px}}
  
  @media(min-width:660px){.searchcard{grid-template-columns:1.15fr 1fr auto;align-items:stretch}}
  .sfield{flex-direction:column;justify-content:center}
  @media(min-width:660px){
    .sfield+.sfield::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:1px;background:var(--line)}
  }
  @media(max-width:659px){.sfield+.sfield{border-top:1px solid var(--line)}}
  .sfield label{display:block;font-family:var(--font-head);font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:1px;letter-spacing:-.005em}
  .sfield input{font:inherit;line-height:1.35}
  
  .sfield .ico{right:18px}
  .searchcard .go{margin:0;border:0;background:var(--ink);color:var(--surface);font:inherit;font-family:var(--font-head);font-weight:800;font-size:15.5px;cursor:pointer;white-space:nowrap;transition:background .16s ease}
  .searchcard .go:hover{background:#0D2A31}
  @media(max-width:659px){.searchcard .go{margin-top:7px;padding:16px 20px}}
  .popular{margin-top:18px;font-size:14px}
  .popular b{font-family:var(--font-head);font-weight:700}
  .popular a{text-decoration:none;font-weight:600}
  .popular a:hover{text-decoration:underline}
  .burger{display:none;flex:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:var(--surface);cursor:pointer;align-items:center;justify-content:center;padding:0}
  .burger span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink)}
  .burger span::before{top:-6px}.burger span::after{top:6px}
  .mobmenu{display:none;border-top:1px solid var(--line);background:var(--surface);padding:10px 18px 16px}
  .mobmenu.open{display:block}
  .mobmenu a{display:block;padding:12px 4px;border-bottom:1px solid var(--paper);font-weight:700;color:var(--ink);text-decoration:none}
  .mobmenu a.sub{padding-left:18px;font-weight:600;color:var(--grey);font-size:14.5px}
  .mobmenu a:last-child{border-bottom:0}
  @media(max-width:1000px){.burger{display:flex}}
  .hero{padding:14px 0 0}
  .hero .wrap{max-width:var(--paginabreedte,1280px);padding:0 30px}
  .herobox{position:relative;border-radius:26px;overflow:visible;background:none}
  .heromedia{position:relative;border-radius:26px;overflow:hidden}
  
  .heromedia>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
  .heromedia::after{content:"";position:absolute;inset:0;z-index:1}
  .herotext{position:relative;z-index:2;color:#fff}
  
  .herotext .eyebrow{color:var(--cyan)}
  .herotext h1{color:#fff;margin:12px 0 14px}
  .herotext .sub{color:#E4E7E9;font-size:17px}
  .popular{color:#D2D6D9}
  .popular b{color:#fff}
  .popular a{color:var(--cyan)}
  
  
  
  
  
  
  
  
  
  @keyframes cvspin{to{transform:rotate(360deg)}}
  
  
  
  
  
  
  
  
  
  
  
  .modal-back{position:fixed;inset:0;background:rgba(12,12,12,.72);backdrop-filter:blur(3px);z-index:900;display:none;align-items:center;justify-content:center;padding:20px}
  .modal-back.open{display:flex}
  .modal{background:#EEF2EE;border-radius:8px;width:100%;max-width:620px;max-height:92vh;overflow:auto;position:relative;padding:30px 34px 32px}
  @media(max-width:600px){.modal{padding:24px 20px 24px}}
  .modal h2{font-size:clamp(21px,3.2vw,27px);font-weight:700;letter-spacing:-.015em;line-height:1.15;color:#111;margin-bottom:6px}
  .modal .lead{color:#444;font-size:15px;margin-bottom:16px}
  .modal .close{position:absolute;top:14px;right:16px;width:36px;height:36px;border:0;background:none;cursor:pointer;color:#777;padding:0}
  .modal .close svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.8;fill:none}
  .mf{border-bottom:1px solid #C9CFC9;padding:2px 0 9px;margin-bottom:12px}
  .mf label{display:block;font-size:14.5px;color:#111;margin-bottom:5px}
  .mf label b{font-weight:700}
  .mf input[type=text],.mf input[type=email]{width:100%;font:inherit;font-size:15px;border:0;background:none;outline:none;color:#111;padding:4px 0}
  .mf.err{border-bottom-color:#B3261E}
  .mf .msg{display:none;color:#B3261E;font-size:13.5px;margin-top:6px}
  .mf.err .msg{display:block}
  .filerow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .filebtn{font:inherit;font-family:var(--font-head);font-weight:700;transition:background .16s ease,color .16s ease}
  .filebtn:hover{background:#111;color:#fff}
  .filename{color:#333;font-size:14px}
  .mconsent{display:flex;gap:10px;align-items:flex-start;margin:2px 0 16px;font-size:14.5px;color:#111}
  .mconsent input{width:17px;height:17px;margin-top:3px;accent-color:var(--orange);flex:none}
  .mconsent a{color:#F4551E;text-decoration:none}
  .msubmit{width:100%;border:0;border-radius:999px;background:#F4551E;color:#fff;font-family:var(--font-head);font-weight:700;font-size:16.5px;padding:15px;cursor:pointer;box-shadow:0 6px 18px rgba(244,85,30,.28)}
  .msubmit:hover{background:#E04A16}
  .mdone{display:none;background:#E7F3EC;border:1px solid #1E7A46;color:#155C34;border-radius:8px;padding:14px;margin-top:18px;font-size:15px}
  .mdone.show{display:block}
  
  .cats .head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
  .cats h2{margin:0}
  .cats .sub{color:var(--grey);font-size:15.5px;margin-top:8px}
  .cats .all{color:var(--cyan-tx);font-weight:700;font-size:15.5px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding-bottom:4px}
  
  .cats .all svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.4;fill:none}
  .chips{display:flex;flex-wrap:wrap;gap:16px;margin-top:26px}
  .chip{display:inline-flex;align-items:center;gap:14px;background:var(--paper);border:1px solid transparent;border-radius:999px;padding:12px 30px 12px 12px;text-decoration:none;color:var(--ink);transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
  .chip:hover,.chip:focus-visible{background:var(--wp--preset--color--teal-licht);border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 10px 24px rgba(26,26,26,.10)}
  .chip .ic{flex:none;width:54px;height:54px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(26,26,26,.06)}
  .chip .ic svg{width:26px;height:26px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .chip .lab{font-family:var(--font-head);font-weight:700;font-size:18px;line-height:1.15}
  .chip .lab small{display:block;font-family:var(--font-body);font-weight:500;font-size:13px;color:var(--grey);margin-top:2px}
  @media(max-width:560px){
    .chips{gap:12px}
    .chip{padding:10px 22px 10px 10px;gap:11px}
    .chip .ic{width:46px;height:46px}
    .chip .ic svg{width:22px;height:22px}
    .chip .lab{font-size:16px}
  }
  
  
  .routes h2{margin:0 0 10px}
  .routes .intro{color:var(--grey);font-size:16.5px;line-height:1.65;max-width:68ch;margin-bottom:34px}
  .routegrid{display:grid;grid-template-columns:1fr}
  @media(min-width:760px){.routegrid{grid-template-columns:repeat(3,1fr);align-items:stretch}}
  .route{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:14px}
  .rhead{display:flex;align-items:center}
  .route .ic{flex:none;display:flex;align-items:center;justify-content:center}
  .route .ic svg{fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .route .ic .line{stroke:var(--ink)}
  .route .ic .acc{stroke:var(--orange-lg)}
  .route h3{font-family:var(--font-head);font-weight:700;line-height:1.25;margin:0}
  .route ul{list-style:none;padding:0}
  .route li{display:flex;gap:10px;align-items:flex-start;font-weight:400}
  .route li svg{flex:none;stroke:var(--cyan-lg);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
  .rbtns{align-items:center;gap:9px;margin-top:auto}
  .rbtn{background:var(--orange);color:var(--ink);font-family:var(--font-head);font-weight:800;border:0;border-radius:9px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;transition:background .18s ease}
  .rbtn svg{stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .rbtn:hover{background:var(--orange-lg)}
  .rarrow{flex:none;width:52px;height:52px;border-radius:50%;background:var(--orange);border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:background .18s ease,transform .18s ease}
  .rarrow:hover{background:var(--orange-lg);transform:translate(2px,-2px)}
  .rarrow svg{width:20px;height:20px;stroke:var(--ink);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
  .latest.wrap{padding-top:62px;padding-bottom:56px}
  .latest h2{margin:0 0 10px}
  .latest .lead{color:var(--grey);font-size:16.5px;margin:0 0 30px;max-width:56ch}
  .tabs2{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:30px}
  .tab2{font:inherit;font-family:var(--font-head);font-weight:700;font-size:15.5px;border:0;background:none;color:var(--grey);padding:11px 24px;border-radius:999px;cursor:pointer}
  .tab2[aria-selected="true"]{background:var(--ink);color:#fff}
  .tab2:hover:not([aria-selected="true"]){color:var(--ink);background:var(--paper)}
  .jobrow{display:flex;text-align:left;border:1px solid transparent;border-radius:14px;margin-bottom:16px;text-decoration:none;color:var(--ink);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
  .jobrow:hover{transform:translateY(-2px)}
  .jobrow .thumb{box-shadow:0 2px 6px rgba(26,26,26,.07)}
  .jobrow .thumb svg{stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  
  .jobtop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .jobtop h3{font-family:var(--font-head);font-weight:700;font-size:19px;margin:0}
  .badge-new{font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--cyan-tx)}
  .badge-video{font-size:12.5px;font-weight:800;color:var(--orange-tx);display:inline-flex;align-items:center;gap:4px}
  .badge-video i{width:0;height:0;border-left:7px solid var(--orange-tx);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
  .jobmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin-top:9px;color:var(--grey);font-size:14.5px}
  .jobmeta span{display:inline-flex;align-items:center;gap:7px}
  .jobmeta svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .jobmeta .sal{color:var(--ink);font-weight:700}
  .jobmeta .ntb{font-size:11px}
  .tagpill{background:var(--wp--preset--color--teal-licht);color:var(--cyan-tx);font-weight:700;font-size:13px;border-radius:999px;padding:5px 13px;white-space:nowrap}
  .jobact{flex:none;display:flex;align-items:center;gap:12px}
  .jobshare{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--grey);padding:0}
  .jobshare:hover{color:var(--cyan-tx);border-color:var(--cyan)}
  .jobshare svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .jobcta{border-radius:10px;font-family:var(--font-head);color:var(--ink);white-space:nowrap}
  .jobrow:hover .jobcta{background:var(--orange);border-color:var(--orange)}
  .latest .more{margin-top:26px}
  @media(max-width:840px){
    .jobrow{flex-wrap:wrap;gap:14px}
    .jobact{width:100%;justify-content:flex-start}
    .jobcta{flex:1;text-align:center}
  }
  .reviews{background:var(--paper)}
  .reviews .inner{padding:66px 0 70px;text-align:center;position:relative}
  .reviews h2{margin:0 0 10px}
  .reviews .lead{color:var(--grey);font-size:16.5px;margin:0 auto 46px;max-width:52ch}
  .quotebox{position:relative;max-width:900px;margin:0 auto;min-height:190px;display:flex;align-items:center;justify-content:center}
  .quotebox .mark{position:absolute;top:-26px;font-family:Georgia,'Times New Roman',serif;font-size:190px;line-height:1;color:rgba(26,26,26,.055);user-select:none;pointer-events:none}
  .quotebox .mark.l{left:-6px}
  .quotebox .mark.r{right:-6px;top:auto;bottom:-96px}
  @media(max-width:980px){.quotebox .mark{display:none}}
  .quotetext{position:relative;z-index:1;font-size:clamp(17px,2.1vw,21px);line-height:1.68;color:var(--ink);padding:0 14px;transition:opacity .22s ease}
  .quotetext.fade{opacity:0}
  .revpills{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:44px}
  .revpill{display:inline-flex;align-items:center;gap:10px;background:var(--surface);border:2px solid transparent;border-radius:999px;padding:9px 20px 9px 9px;cursor:pointer;font:inherit;text-align:left;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
  .revpill:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(26,26,26,.09)}
  .revpill[aria-selected="true"]{border-color:var(--cyan);box-shadow:0 10px 26px rgba(26,26,26,.10)}
  .revpill .initial{flex:none;width:36px;height:36px;border-radius:50%;background:var(--wp--preset--color--teal-licht);color:var(--cyan-tx);font-family:var(--font-head);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
  .revpill[aria-selected="true"] .initial{background:var(--cyan);color:var(--ink)}
  .revpill .who{font-family:var(--font-head);font-weight:700;font-size:16px;line-height:1}
  @media (prefers-reduced-motion:reduce){.quotetext{transition:none}}
  .sectorgrid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:26px}
  @media(min-width:820px){.sectorgrid{grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}}
  .sectorcard{display:flex;gap:16px;border:1px solid transparent;border-radius:14px;padding:22px;text-decoration:none;color:var(--ink);transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease}
  .sectorcard:hover{transform:translateY(-3px)}
  .sectorcard .ic{flex:none;width:52px;height:52px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(26,26,26,.07)}
  .sectorcard .ic svg{width:25px;height:25px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
  .sectorcard .txt{display:flex;flex-direction:column;min-width:0}
  .sectorcard .txt b{font-family:var(--font-head);font-weight:700;font-size:18px;line-height:1.2}
    .sectorcard .desc{font-size:15px;line-height:1.6;color:var(--grey);margin-top:8px}
  .sectorcard .go{font-weight:700;font-size:14.5px;color:var(--cyan-tx)}
  .wrap.breed{max-width:1400px}
  .vachead{position:relative;overflow:hidden;background:var(--paper);border-bottom:1px solid var(--line);padding:52px 0 44px}
  .vachead::before,.vachead::after{content:"";position:absolute;border-radius:50%;pointer-events:none}
  .vachead::before{width:320px;height:320px;left:-120px;top:-150px;background:radial-gradient(circle at 60% 60%, rgba(99,199,215,.30), rgba(99,199,215,0) 70%)}
  .vachead::after{width:420px;height:420px;right:-140px;bottom:-230px;background:radial-gradient(circle at 40% 40%, rgba(249,157,57,.28), rgba(249,157,57,0) 70%)}
  .vachead .wrap{position:relative;z-index:1}
  .vachead h1{margin:0}
  .vacpage{display:grid;grid-template-columns:1fr;gap:26px}
  @media(min-width:980px){.vacpage{grid-template-columns:250px 1fr;gap:40px;align-items:start}}
  .filterpanel{background:none;border:0;border-radius:0;padding:0}
  
  .filterpanel h2{font-size:19px;margin:0 0 4px}
  .fb-groep{padding:14px 0;border-bottom:1px solid var(--line)}
  .fb-groep:last-of-type{border-bottom:0;padding-bottom:0}
  .fb-groep .lab{display:block;font-family:var(--font-head);font-weight:700;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--wp--preset--color--grijs);margin-bottom:8px}
  .fb-groep .chips{display:flex;flex-wrap:wrap;gap:6px}
  .fchip{font:inherit;font-weight:700;border:1.5px solid var(--line);background:var(--surface);color:var(--grey);border-radius:999px;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease}
  .fchip:hover{color:var(--cyan-tx);border-color:var(--cyan)}
  .fchip[aria-pressed="true"]{background:var(--ink);color:#fff}
  .fsearch{position:relative}
  .fsearch input{width:100%;font:inherit;font-size:14.5px;background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:10px 40px 10px 16px;color:var(--ink)}
  .fsearch input::placeholder{color:#8A8A8A}
  .fsearch svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--grey);fill:none;stroke-width:2;stroke-linecap:round}
  .resetf{display:inline-flex;align-items:center;gap:7px;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--grey)}
  .resetf:hover{color:var(--orange-tx)}
  .resetf svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .vacresults{min-width:0}
  .vacpage.wrap{padding-top:48px;padding-bottom:96px}
  .vacresults .telling{font-size:14.5px;color:var(--grey);margin:0 0 16px}
  
  
  
  
  
  .vaccard{background:var(--surface);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
  .vaccard:hover{border-color:var(--cyan);box-shadow:0 12px 30px rgba(26,26,26,.10);transform:translateY(-2px)}
  
  
  .vaccard .datum{color:var(--grey)}
  .vaccard h3{font-family:var(--font-head);font-weight:700;font-size:clamp(22px,2.4vw,30px);line-height:1.15;margin:8px 0 14px}
  .vacmeta{flex-wrap:wrap;align-items:center;margin-bottom:14px}
  .vacmeta span{font-weight:700;color:var(--cyan-tx);padding:0 12px}
  .vacmeta span:first-child{padding-left:0}
  .vacmeta span+span{border-left:1px solid var(--line)}
  
  .vaccard .sal{font-family:var(--font-head);font-weight:800}
  
  
  
  
  .vaccard .pijl svg{stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  
  .vacleeg{border:1.5px dashed var(--line);border-radius:14px;padding:34px 22px;text-align:center}
  .vacleeg p{color:var(--grey);margin-bottom:16px}
  @media (prefers-reduced-motion:reduce){.marquee .track{transform:none!important}}
  .wrap{margin:0 auto;padding:0 18px}
  .eyebrow{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--cyan-tx)}
  .lead-text{color:var(--grey);font-size:16.5px;line-height:1.65;max-width:68ch;margin-top:8px}
  .eyebrow.or{color:var(--orange-tx)}
  h1,h2,h3,h4,h5,.heading{font-family:var(--font-head);font-weight:700;letter-spacing:-.01em}
  h1{font-size:clamp(28px,5.4vw,46px);line-height:1.12}
  h2{font-size:clamp(22px,3.6vw,30px);line-height:1.2}
  h3{font-size:18px}
  .ntb{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);background:var(--paper);border:1px dashed var(--line);border-radius:5px;padding:2px 7px;display:inline-block}
  
  
  .prefoot{background:var(--wp--preset--color--teal-licht);color:var(--ink);padding:52px 0;text-align:center}
  .prefoot h2{max-width:22ch;margin:0 auto}
  .prefoot p{color:var(--grey);font-size:16.5px;line-height:1.65;margin:10px auto 22px;max-width:62ch}
  .prefoot .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .feat{padding-top:40px;padding-bottom:6px}
  .feat .qp{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
  .feat .more{margin:6px 0 10px}
  /* Het sjabloononderdeel om de header heen heeft geen eigen vlak meer.
   Een sticky element plakt alleen zolang zijn ouder in beeld is, en die
   ouder was net zo hoog als de balk zelf. Nu is de ouder de hele pagina. */
/* Hoogte van de menubalk: logohoogte plus de padding boven en onder.
   Een plek; de vaste zijkolommen en de beeldkop rekenen hiermee. */
body{--balk-hoogte:100px}
@media(max-width:900px){body{--balk-hoogte:92px}}
@media(max-width:600px){body{--balk-hoogte:66px}}

header.wp-block-template-part{display:contents}
/* De lijn onder de balk is een schaduw, geen rand. Een rand telt mee in de
   hoogte van de balk; het beeld op de vacaturepagina schuift precies een
   balkhoogte omhoog en dan bleef die ene pixel zichtbaar. Een schaduw neemt
   geen ruimte in. */
header.site{position:sticky;top:0;z-index:100;background:var(--surface);box-shadow:0 1px 0 var(--line)}
  /* Meer lucht boven dan onder: als de balk vastzit tegen de bovenrand van
   het scherm staat de inhoud anders krap tegen die rand aan. */
header.site .bar{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:24px 30px;max-width:var(--paginabreedte,1280px);margin:0 auto}
/* De meegeschoven balk krijgt vijf pixels extra boven. De balk zoals hij
   bovenaan de pagina staat blijft ongewijzigd. */
header.site.is-vast .bar{padding-top:45px}

/* Op de homepage sluit de header rechtstreeks aan op de hero. Daar staat
   de lijn eronder in de weg. Alleen op brede schermen: op smalle schermen
   valt de balk wel samen met lichte inhoud en helpt de lijn juist. */
@media(min-width:1001px){
	body.home header.site{box-shadow:none}
}
  .logo{display:inline-flex;flex-direction:column;line-height:.92;font-weight:900;text-decoration:none}
  nav.main{display:flex;gap:2px;align-items:center}
  nav.main .links a{font-size:14.5px;font-weight:700;color:var(--ink);text-decoration:none;padding:9px 11px;border-radius:8px}
  nav.main .links a[aria-current="page"]{background:var(--paper)}
  nav.main .links a.cta{background:var(--orange);color:var(--ink);font-weight:800;margin-left:6px}
  @media(max-width:760px){
    nav.main .links a{padding:8px 8px;font-size:13px}
    nav.main .links a.hide-m{display:none}
  }
  main{min-height:60vh}
  section.view{display:none}
  section.view.active{display:block}
  .btn{display:inline-block;font:inherit;font-weight:800;font-size:15.5px;padding:13px 22px;border-radius:9px;border:0;cursor:pointer;text-decoration:none;text-align:center}
  .btn.orange{background:var(--orange);color:var(--ink)}
  
  .btn.line{color:#fff}
  
  .btn.wa{background:none;border:2px solid var(--ink);color:var(--ink);display:flex;align-items:center;justify-content:center;gap:8px}
  .btn:disabled{opacity:.6;cursor:not-allowed}
  .usps{background:var(--ink-2);color:#C4D2DA;font-size:14px}
  .usps .wrap{display:flex;flex-wrap:wrap;gap:6px 26px;padding:12px 18px}
  .usps b{color:#fff;font-weight:800}
  .sectors{padding:44px 0 8px}
  .sectors .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:18px}
  .sector{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:18px;text-decoration:none;color:var(--ink);background:var(--surface)}
  .sector .bar{height:6px;border-radius:3px;margin-bottom:12px}
  .sector h3{margin-bottom:4px}
  .sector p{font-size:14px;color:var(--grey)}
  .sector .go{font-size:13.5px;font-weight:800;color:var(--cyan-tx);margin-top:10px;display:inline-block}
  .band{padding:40px 0}
  .band.paper{background:var(--paper)}
  .split2{display:grid;grid-template-columns:1fr;gap:22px}
  @media(min-width:820px){.split2{grid-template-columns:1.1fr .9fr;align-items:center}}
  .videoblock{background:var(--ink);border-radius:var(--r);color:#fff;padding:34px 22px;text-align:center}
  .videoblock .play{width:58px;height:58px;border-radius:50%;background:var(--orange);margin:0 auto 12px;display:flex;align-items:center;justify-content:center}
  .videoblock .play i{width:0;height:0;border-left:18px solid var(--ink);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
  .videoblock small{color:#AFC3CC;display:block;margin-top:8px;font-size:12.5px}
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:18px}
  .step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px}
  .step .n{width:28px;height:28px;border-radius:50%;background:var(--orange);color:var(--ink);font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
  .step b{font-size:14px;display:block}
  .step small{font-size:12.5px;color:var(--grey)}
  .urlbar{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:12.5px;color:var(--grey);font-family:ui-monospace,Menlo,Consolas,monospace;overflow-x:auto;white-space:nowrap}
  .filters{display:flex;flex-wrap:wrap;gap:8px;padding:16px 0 4px}
  .fgroup{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
  .fgroup .lab{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);margin-right:2px}
  .pill{font:inherit;font-size:13px;font-weight:700;border:1.5px solid var(--line);background:var(--surface);border-radius:99px;padding:7px 13px;cursor:pointer;color:var(--grey)}
  .pill[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
  .count{font-size:14px;color:var(--grey);padding:8px 0 2px}
  .vlist{display:grid;grid-template-columns:1fr;gap:12px;padding:10px 0 44px}
  @media(min-width:760px){.vlist{grid-template-columns:1fr 1fr}}
  .vc{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:var(--surface);display:block;text-decoration:none;color:var(--ink)}
  .vc:hover{border-color:var(--cyan-lg)}
  .vc .top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:5px}
  .vc .br{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-tx)}
  .vc .vid{font-size:11.5px;font-weight:800;color:var(--orange-tx);display:flex;align-items:center;gap:5px}
  .vc .vid i{width:0;height:0;border-left:8px solid var(--orange-tx);border-top:5px solid transparent;border-bottom:5px solid transparent}
  .vc h3{font-size:18px}
  .vc .sal{font-size:18px;font-weight:900;margin-top:6px}
  .vc .sal small{font-size:12.5px;font-weight:600;color:var(--grey)}
  .vc .sal.none{font-size:14px;font-weight:600;color:var(--grey)}
  .vc .meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
  .vc .meta span{font-size:12px;font-weight:600;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:3px 8px}
  .vc .ex{margin-top:9px}
  .empty{border:1.5px dashed var(--line);border-radius:var(--r);padding:26px 18px;text-align:center;margin:14px 0 40px}
  .empty p{color:var(--grey);margin-bottom:14px}
  .empty .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  .detail{display:grid;grid-template-columns:1fr;gap:22px;padding:26px 0 50px}
  @media(min-width:880px){.detail{grid-template-columns:1fr 340px}}
  
  
  
  
  
  
  
  
  
  .recruiter{display:flex;gap:13px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin:18px 0}
  .recruiter .ph{flex:none;width:54px;height:54px;border-radius:50%;background:var(--cyan);color:var(--ink);font-weight:900;display:flex;align-items:center;justify-content:center}
  .recruiter b{display:block}
  .recruiter small{color:var(--grey);font-size:13px}
  .formwrap{max-width:520px;padding:28px 0 50px}
  .formwrap p.intro{color:var(--grey);margin:8px 0 4px}
  form .field{margin-top:16px}
  form label{display:block;font-size:14px;font-weight:800;margin-bottom:5px}
  form label small{font-weight:600;color:var(--grey)}
  form input[type=text],form input[type=tel],form input[type=email],form textarea{width:100%;font:inherit;font-size:16px;padding:13px;border:1.5px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);transition:border-color .16s ease}
form input[type=text]:focus,form input[type=tel]:focus,form input[type=email]:focus,form textarea:focus{border-color:var(--cyan-lg);outline:2px solid var(--cyan-lg);outline-offset:1px}
form input::placeholder,form textarea::placeholder{color:#8A8A8A}
.field label{display:block;font-family:var(--font-head);font-weight:700;font-size:14.5px;color:var(--ink)}
.field label small{font-family:var(--font-body);font-weight:400;color:var(--grey)}
  form textarea{min-height:90px;resize:vertical}
  .cvbox{border:1.5px dashed var(--line);border-radius:9px;padding:14px;font-size:14px;color:var(--grey);margin-top:16px}
  .consent{display:flex;gap:10px;font-size:13px;color:var(--grey);margin-top:16px;align-items:flex-start}
  .consent input{width:18px;height:18px;margin-top:1px;accent-color:var(--cyan-lg)}
  form .btn{width:100%;margin-top:18px}
  .or{display:flex;align-items:center;gap:12px;color:var(--grey);font-size:12.5px;font-weight:700;margin:14px 0}
  .or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
  /* Melding onder een formulier. Ook de statusregel van het aanvraagformulier
   (.sjr-aanvraag__status) gebruikt deze opmaak. */
.demo-ok{
	display:none;
	margin-top:18px;
	padding:14px 16px;
	background:var(--paper);
	border-left:3px solid var(--orange);
	border-radius:0 8px 8px 0;
	color:var(--ink);
	font-size:14.5px;
	line-height:1.55;
}
  .demo-ok.show{display:block}
  
  
  
  
  

/* ==========================================================
   Correcties na visuele controle
   ========================================================== */

/* Het veld Waar: keuzelijst zonder browserrandjes, gelijk aan het tekstveld */
.sfield select{appearance:none;-webkit-appearance:none;-moz-appearance:none;border:0;background:none;box-shadow:none;outline:none;font:inherit;font-size:15px;color:var(--ink);padding:0 34px 0 0;line-height:1.35;width:100%;border-radius:0;cursor:pointer}
.sfield select:focus-visible{outline:2px solid var(--orange-lg);outline-offset:3px;border-radius:4px}
.sfield select::-ms-expand{display:none}

/* De cv-cirkel is een link: geen onderstreping */

/* Hero vijf procent lager */

@media(max-width:700px){.heromedia{min-height:532px}}

/* Solliciteer op jouw manier: eigen sectie over de volle breedte, compacter */
.routes{padding:0}

.routegrid{gap:16px}
@media(min-width:760px){.routegrid{gap:16px}}
.route{padding:18px}
.rhead{gap:11px;margin-bottom:11px}
.route .ic{width:38px;height:38px}
.route .ic svg{width:34px;height:34px}
.route h3{font-size:16.5px}
.route ul{margin:0 0 14px}
.route li{font-size:14.5px;padding:2px 0}
.route li svg{width:16px;height:16px}

.rbtn svg{width:14px;height:14px}
/* ==========================================================
   Volle breedte afdwingen binnen de blokstructuur
   ========================================================== */
.routes,.mt-reviews,.mt-cta{width:100%;max-width:100%;margin-left:0;margin-right:0;display:block;box-sizing:border-box}

/* ==========================================================
   Reviews als schuifbare rij
   ========================================================== */
.mt-reviews{position:relative;overflow:hidden}

.mt-reviews__top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.mt-reviews__kop{max-width:56ch}
.mt-reviews__kop h2{margin:0 0 8px}
.mt-reviews__kop p{color:var(--grey);font-size:16px;line-height:1.6;margin:0}

.mt-reviews__rij{display:flex;gap:16px;margin-top:26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 4px 10px;scrollbar-width:none}
.mt-reviews__rij::-webkit-scrollbar{display:none}
/* De rij loopt links en rechts weg in de witte achtergrond, zodat zichtbaar
   is dat er meer kaarten staan dan er in beeld passen. */
.mt-reviews__rij{
	-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 96px),transparent 100%);
	mask-image:linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 96px),transparent 100%);
}
.mt-reviews__rij:focus-visible{outline:2px solid var(--orange-lg);outline-offset:4px;border-radius:12px}

.mt-review{flex:0 0 300px;scroll-snap-align:start;border:1px solid var(--line);border-top:3px solid var(--cyan);border-radius:14px;padding:22px 22px 18px;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s ease;opacity:0;transform:translateY(14px)}
@media(min-width:760px){.mt-review{flex-basis:340px}}
.mt-review.zichtbaar{opacity:1;transform:none}
.mt-review:hover{transform:translateY(-4px);box-shadow:0 14px 32px rgba(26,26,26,.12)}
.mt-review__mark{font-family:Georgia,'Times New Roman',serif;font-size:46px;line-height:.8;color:var(--cyan-lg);opacity:.6;margin-bottom:4px;transition:opacity .3s ease,color .3s ease}
.mt-review:nth-child(even) .mt-review__mark{color:var(--orange-lg)}
.mt-review:hover .mt-review__mark{opacity:1}
.mt-review__tekst{color:var(--ink);font-size:15px;line-height:1.65;margin:0 0 16px}
.mt-review__naam{margin-top:auto;display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:700;font-size:15px}
.mt-review__streep{width:22px;height:2px;background:var(--cyan-lg);border-radius:2px;flex:none;transition:width .3s ease,background .3s ease}
.mt-review:nth-child(even) .mt-review__streep{background:var(--orange-lg)}
.mt-review:hover .mt-review__streep{width:36px;background:var(--orange)}
@media (prefers-reduced-motion:reduce){
	.mt-review{opacity:1;transform:none;transition:none}
	.mt-review:hover{transform:none}
	.mt-reviews__rij{scroll-behavior:auto}
}

/* ==========================================================
   Afsluitende oproep, duidelijk onderscheiden van de reviews
   ========================================================== */
.mt-cta{text-align:center}
.mt-cta h2{margin:0 0 12px}
.mt-cta p{font-size:16.5px;line-height:1.65;max-width:62ch;margin:0 auto}
.mt-cta__knoppen{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ==========================================================
   Veld Waar: vrij intikken met suggesties
   ========================================================== */
.sfield input,.sfield select{font-family:var(--font-body);font-weight:400;font-size:15px;color:var(--ink)}
.sfield input::placeholder{font-weight:400}
/* ==========================================================
   Suggesties bij het typen
   ========================================================== */

.sugg{position:absolute;z-index:40;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 34px rgba(26,26,26,.16);max-height:260px;overflow:auto}
.sugg li{padding:9px 12px;border-radius:8px;font-size:14.5px;color:var(--ink);cursor:pointer;line-height:1.35}
.sugg li strong{font-weight:800;color:var(--cyan-tx)}
.sugg li:hover,.sugg li.is-actief{background:var(--wp--preset--color--teal-licht)}

/* ==========================================================
   Uitgelichte vacature valt op
   ========================================================== */
.jobrow.is-uitgelicht{position:relative;background:var(--surface);border-color:var(--orange);box-shadow:0 10px 28px rgba(226,121,7,.16)}
.jobrow.is-uitgelicht::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--orange)}
.jobrow.is-uitgelicht:hover{border-color:var(--orange-lg);box-shadow:0 16px 36px rgba(226,121,7,.24)}
.jobrow__lint{position:absolute;top:-1px;left:22px;display:inline-flex;align-items:center;gap:6px;background:var(--orange);color:var(--ink);font-family:var(--font-head);font-weight:800;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:0 0 8px 8px}
.jobrow__lint svg{width:13px;height:13px;fill:var(--ink);stroke:none}
.jobrow.is-uitgelicht .thumb{background:var(--wp--preset--color--teal-licht)}

/* ==========================================================
   Sectieritme: licht, rustig, steeds afwisselend
   hero (donker beeld) - sectoren (wit) - vacatures (grijs)
   - routes (wit) - reviews (grijs) - oproep (teal licht) - footer (donker)
   ========================================================== */
.cats.wrap{padding:56px 30px}

.latest.wrap{padding:56px 30px}
.latest{background:none}

.routes .inner{padding:56px 30px}

.mt-reviews{border-top:0}

.mt-cta{color:var(--ink)}

.mt-cta h2{color:var(--ink)}
.mt-cta p{color:var(--grey)}

/* ==========================================================
   Witte stroken tussen de secties weghalen
   WordPress zet standaard 24px marge tussen blokken op het
   hoogste niveau; onze secties regelen hun eigen ruimte.
   ========================================================== */
:where(.wp-site-blocks) > *{margin-block-start:0;margin-block-end:0}
.wp-site-blocks{padding-top:0;padding-bottom:0}
main.wp-block-group > *{margin-block-start:0;margin-block-end:0}
main.wp-block-group{margin:0}

/* ==========================================================
   Uitgelicht als smalle chip achter de titel
   ========================================================== */
.chip-uitgelicht{display:inline-block;background:var(--orange);color:var(--ink);font-family:var(--font-head);font-weight:800;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;line-height:1.5;white-space:nowrap}
.jobrow.is-uitgelicht{padding-top:20px}
.jobrow.is-uitgelicht::before{border-radius:14px 0 0 14px}

/* ==========================================================
   Afsluitende oproep: meer lucht tussen tekst en knoppen
   ========================================================== */
.mt-cta{padding:64px 0 68px}
.mt-cta p{margin-bottom:0}
.mt-cta__knoppen{margin-top:34px}

/* ==========================================================
   Footer
   ========================================================== */

/* ==========================================================
   Correcties ronde 2
   ========================================================== */

/* Uitgelicht: gewone tekst in oranje, geen chip */
.chip-uitgelicht{all:unset}
.jobrow .badge-new{font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--orange-tx);background:none;padding:0;border-radius:0;text-transform:none;letter-spacing:0}

/* De witte strook tussen de laatste sectie en de footer.
   WordPress plaatst zijn eigen regel na onze stylesheet, dus hier met
   hogere specificiteit en nadruk, anders wint de standaardregel. */
body .wp-site-blocks > *{margin-block-start:0 !important;margin-block-end:0 !important}
body .wp-site-blocks{padding-top:0 !important;padding-bottom:0 !important}
body main.wp-block-group > *{margin-block-start:0 !important;margin-block-end:0 !important}
/* Volle-breedte secties sluiten op elkaar aan. WordPress zet standaard 24
   pixels tussen twee blokken in een flow-indeling; tussen twee gekleurde
   banden levert dat een witte streep op. */
.beeldkop,.wgintro,.wgdiensten,.wgform,.openso,.artikel,.vergelijkbaar,
.paginakop,.tekstpagina,.slotcta,.homediensten,.vierhonderdvier,.feitbalk,
.overintro,.contactform,.stappen{margin-block-start:0;margin-block-end:0}
body main.wp-block-group{margin-top:0 !important;margin-bottom:0 !important}
body footer.site{margin-top:0 !important}

/* Knoppen bij de oproep: de algemene alinearegel overschreef de marge */
.mt-cta p.mt-cta__knoppen{margin:36px auto 0;max-width:none}

/* Footer: contactgegevens horizontaal en compact */

/* ==========================================================
   Meer lucht tussen de header en het herobeeld
   ========================================================== */
.hero{padding-top:30px}
@media(max-width:700px){.hero{padding-top:22px}}

/* ==========================================================
   Footer: vier kolommen, geen logo, contact rechts
   ========================================================== */

/* oude footerstijlen die niet meer gebruikt worden */

/* ==========================================================
   Cv-knop: huisstijlknop in plaats van een cirkel
   ========================================================== */

/* de oude cirkelstijlen uitschakelen */

/* ==========================================================
   Knoppen: een systeem voor de hele site
   Drie soorten, overal dezelfde maatvoering en hetzelfde gedrag.
   Dit blok staat bewust als laatste zodat het altijd wint.
   ========================================================== */

/* Gemeenschappelijk: maatvoering en overgang */
.btn,
.rbtn,
.cvknop,
.btn-solid,
.btn-soft,
.searchcard .go,
.jobcta,
.filebtn{font-family:var(--font-head);font-weight:800;line-height:1.2;border-radius:9px;text-decoration:none;text-align:center;transition:background .18s ease, color .18s ease, border-color .18s ease,
		transform .18s ease, box-shadow .18s ease}

.btn,
.rbtn,
.cvknop,
.searchcard .go,
.jobcta{font-size:15.5px;padding:13px 22px}

/* Hoofdknop: oranje vlak, donkere tekst */
.btn.orange,
.rbtn,
.cvknop,
.btn-solid,
.searchcard .go{background:var(--ink);color:var(--surface);border:0}
.btn.orange:hover,.btn.orange:focus-visible,
.rbtn:hover,.rbtn:focus-visible,
.btn-solid:hover,.btn-solid:focus-visible,
.searchcard .go:hover,.searchcard .go:focus-visible{background:#0D2A31;color:var(--surface);transform:translateY(-2px);box-shadow:0 8px 20px rgba(26,26,26,.28)}

/* De cv-knop staat al verschoven, dus die krijgt de lift apart */

/* Tweede knop: alleen een lijn */
.btn.line{background:none;border:2px solid currentColor;padding:11px 20px}
.btn.line.dark{border-color:var(--ink);color:var(--ink)}
.btn.line.dark:hover,.btn.line.dark:focus-visible{background:var(--ink);color:var(--surface);border-color:var(--ink);transform:translateY(-2px);box-shadow:0 8px 20px rgba(26,26,26,.22)}
/* Op een donkere ondergrond keert de lijnknop om */
.mt-cta .btn.line.dark{border-color:var(--ink);color:var(--ink)}
.mt-cta .btn.line.dark:hover{background:var(--ink);color:var(--surface)}

/* Derde knop: zacht, in teal */
/* Donkere tekst, zoals deze knop feitelijk werd weergegeven toen nav.main a
   de kleur nog overschreef. De ontworpen kleur was var(--cyan-tx), wat op dit
   vlak 4,08:1 geeft; ink geeft 15:1. Bewust zo gelaten. */
.btn-soft{background:var(--wp--preset--color--teal-licht);color:var(--ink);font-size:14.5px;padding:11px 18px;border:0}
.btn-soft:hover,.btn-soft:focus-visible{background:#CFE9F0;color:var(--ink);transform:translateY(-2px);box-shadow:0 8px 18px rgba(37,129,144,.20)}
.btn-solid{font-size:14.5px;padding:11px 18px}
/* De knoppen in de header zijn componenten, geen navigatielinks.
   De kleurregels van de navigatie zijn daarom gescoped op .links:
   nav.main a (0,1,2) won anders van .btn-solid (0,1,0), waardoor
   color:var(--surface) nooit landde en het label in de vlakkleur verdween. */

/* Knop binnen een klikbare rij: reageert op de hele rij */
.jobcta{background:var(--surface);border:1.5px solid var(--line);font-weight:700;font-size:15px;padding:12px 20px}
.jobrow:hover .jobcta,.jobrow:focus-visible .jobcta{background:var(--orange);border-color:var(--orange);color:var(--ink)}

/* Bestand kiezen in het formulier volgt de lijnknop */
.filebtn{background:none;border:2px solid var(--ink);color:var(--ink);font-size:14px;padding:9px 18px;border-radius:999px;cursor:pointer}
.filebtn:hover,.filebtn:focus-visible{background:var(--ink);color:var(--surface);transform:translateY(-2px)}

/* Tekstlinks die als knop aanvoelen */
.cats .all,.sectorcard .go{transition:color .18s ease, gap .18s ease}
.cats .all:hover{color:var(--orange-tx);text-decoration:none;gap:10px}
.sectorcard:hover .go{color:var(--orange-tx)}

/* Volledige breedte binnen smalle blokken */
.btn.breed{display:block;width:100%}

@media (prefers-reduced-motion:reduce){
	.btn,.rbtn,.cvknop,.btn-solid,.btn-soft,.searchcard .go,.jobcta,.filebtn{transition:none}
	.btn:hover,.rbtn:hover,.cvknop:hover,.btn-solid:hover,.btn-soft:hover,
	.searchcard .go:hover,.filebtn:hover{transform:none}
}
/* Vierde variant: teal vlak, gebruikt op de werkgeverspagina */
.btn.cyan{background:var(--cyan);color:var(--ink);border:0}
.btn.cyan:hover,.btn.cyan:focus-visible{background:var(--cyan-lg);color:var(--ink);transform:translateY(-2px);box-shadow:0 8px 20px rgba(46,162,181,.28)}
@media (prefers-reduced-motion:reduce){.btn.cyan:hover{transform:none}}
/* ==========================================================
   Cv-blok rechts in de hero
   ========================================================== */
.heromedia{min-height:520px}
@media(min-width:1024px){
	.heromedia{grid-template-columns:1.25fr .75fr;gap:34px;padding-right:56px}
}

@media(min-width:1024px){.herotext{padding:64px 10px 64px 56px}}

/* ==========================================================
   Dialoogvenster: halve breedte, midden, vervaagde site
   ========================================================== */
.sjr-dialoog{border:0;padding:0;width:min(50vw, 720px);min-width:min(92vw, 460px);max-width:92vw;max-height:88vh;border-radius:18px;background:var(--surface);color:var(--ink);box-shadow:0 30px 90px rgba(10,10,10,.42);overflow:auto}
.sjr-dialoog::backdrop{background:rgba(12,12,12,.55);backdrop-filter:blur(8px)}
.sjr-dialoog__inhoud{padding:0}
.sjr-dialoog .formwrap-inner{background:none;padding:40px 44px 44px}
@media(max-width:700px){.sjr-dialoog .formwrap-inner{padding:30px 22px 28px}}
.sjr-dialoog .formtitel{font-size:clamp(24px,3vw,30px);margin-bottom:8px}
.sjr-dialoog .intro{font-size:16px;margin-bottom:26px}

.sjr-dialoog__sluiten:hover{background:var(--ink);color:var(--surface)}

/* oude cirkel- en knopplaatsing uitschakelen */

/* ==========================================================
   Cv-cirkel rechtsonder, half over de rand van de hero
   Maatvoering via padding, niet via een vaste breedte.
   ========================================================== */
.heromedia{grid-template-columns:none;padding-right:0}
.herotext{padding:52px 26px 76px}
@media(min-width:900px){.herotext{padding:70px 30px 84px 60px}}

/* het witte blok van de vorige versie uitschakelen */

/* ==========================================================
   Zoekbalk: een breed veld met knop, huisstijlmaatvoering
   ========================================================== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.searchcard{display:flex;align-items:center;gap:8px;padding:8px;background:var(--surface);border-radius:999px;grid-template-columns:none;box-shadow:0 16px 44px rgba(10,10,10,.22);margin-top:26px}
.sfield{position:relative;flex:1;min-width:0;display:block;padding:0;min-height:0}
.sfield .ico{position:absolute;left:20px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--cyan-lg);pointer-events:none}
.sfield input{width:100%;font-family:var(--font-body);font-size:15.5px;font-weight:400;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:15px 22px 15px 52px;outline:none}
.sfield input::placeholder{color:#8A8A8A}
.sfield input:focus{border-color:var(--cyan);background:var(--surface)}
.searchcard .go{border-radius:999px;padding:15px 32px;align-self:stretch;flex:none}
@media(max-width:660px){
	.searchcard{flex-direction:column;border-radius:20px;align-items:stretch}
	.searchcard .go{width:100%}
}
.sugg{left:0;right:0;top:calc(100% + 8px);border-radius:14px}

/* ==========================================================
   Cv-blok: rechthoek met huisstijlpadding, rechtsonder
   ========================================================== */

/* ==========================================================
   Dialoogvenster: midden in beeld
   ========================================================== */

/* ==========================================================
   Formulieronderdelen in de huisstijl
   ========================================================== */
.field input[type=file]{font-family:var(--font-body);color:var(--grey)}
.field input[type=file]::file-selector-button{font-family:var(--font-head);font-weight:700;background:none;color:var(--ink);border:2px solid var(--ink);border-radius:999px;cursor:pointer;transition:background .16s ease,color .16s ease}
.field input[type=file]::file-selector-button:hover{background:var(--ink);color:var(--surface)}

.field.consent label{display:flex;gap:12px;align-items:flex-start;font-family:var(--font-body);font-weight:400;font-size:15px;line-height:1.55;cursor:pointer}
.field.consent input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;margin:1px 0 0;border:2px solid var(--line);border-radius:6px;background:var(--surface);cursor:pointer;display:grid;place-content:center;transition:background .16s ease,border-color .16s ease}
.field.consent input[type=checkbox]::before{content:'';width:11px;height:6px;border-left:2.5px solid var(--surface);border-bottom:2.5px solid var(--surface);transform:rotate(-45deg) scale(0);transition:transform .16s ease;margin-top:-2px}
.field.consent input[type=checkbox]:checked{background:var(--cyan-lg);border-color:var(--cyan-lg)}
.field.consent input[type=checkbox]:checked::before{transform:rotate(-45deg) scale(1)}
.field.consent input[type=checkbox]:focus-visible{outline:2px solid var(--orange-lg);outline-offset:2px}
/* Het tweede, vrijwillige vinkje. Rustiger dan het verplichte erboven,
   zodat het verschil tussen moeten en mogen zichtbaar is. */
.field.consent-extra{margin-top:14px}
.field.consent-extra label{font-size:14px;color:var(--grey)}
.veldhulp{margin:6px 0 0 34px;font-size:12.5px;line-height:1.5;color:var(--grey)}
/* ==========================================================
   Popup: sluitknop duidelijk rechtsboven, hulptekst kleiner
   ========================================================== */
.sjr-dialoog{position:fixed;inset:0;margin:auto}

.sjr-dialoog__sluiten{position:absolute;top:18px;right:18px;z-index:10;width:42px;height:42px;border-radius:50%;background:var(--surface);border:2px solid var(--ink);color:var(--ink);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:background .16s ease,color .16s ease,transform .16s ease}
.sjr-dialoog__sluiten svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.sjr-dialoog__sluiten:hover,.sjr-dialoog__sluiten:focus-visible{background:var(--ink);color:var(--surface);transform:rotate(90deg)}

/* ruimte vrijhouden zodat de kop niet onder de knop loopt */
.sjr-dialoog .formtitel{padding-right:56px}

/* hulptekst onder het cv-veld kleiner */
.field .hulp{line-height:1.45;color:var(--grey)}

@media (prefers-reduced-motion:reduce){
	.sjr-dialoog__sluiten:hover{transform:none}
}
/* ==========================================================
   Zoekbalk breder, zodat de volledige tekst leesbaar blijft
   ========================================================== */

.sfield input{min-width:0;padding-right:26px;text-overflow:ellipsis}
@media(min-width:1200px){
	.sfield input{font-size:16px}
	.searchcard .go{padding:15px 38px}
}
/* ==========================================================
   Sectieritme zonder grijs

   hero (donker beeld) - sectoren (wit) - vacatures (warm)
   - routes (wit) - reviews (teal licht) - oproep (warm) - footer (donker)

   De warme tint is een lichte afleiding van de merkkleur oranje.
   Er staat geen tekst in die kleur, dus contrast blijft in orde.
   ========================================================== */
:root{--cyan:var(--wp--preset--color--teal);--cyan-lg:var(--wp--preset--color--teal-donker);--cyan-tx:var(--wp--preset--color--teal-tekst);--orange:var(--wp--preset--color--oranje);--orange-lg:var(--wp--preset--color--oranje-donker);--orange-tx:var(--wp--preset--color--oranje-tekst);--ink:var(--wp--preset--color--ink);--ink-2:#333333;--grey:var(--wp--preset--color--grijs);--surface:var(--wp--preset--color--wit);--paper:var(--wp--preset--color--papier);--line:var(--wp--preset--color--lijn);--r:10px;--font-head:var(--wp--preset--font-family--heading);--font-body:var(--wp--preset--font-family--body);--mt-warm:#FDF5EC}

.cats.wrap{background:none}

.sectorcard:hover{box-shadow:0 10px 24px rgba(26,26,26,.10)}

.jobrow:hover{border-color:var(--orange);box-shadow:0 10px 26px rgba(226,121,7,.14)}

.mt-review:hover .mt-review__mark{color:var(--orange)}

/* De lichtgrijze vlakken die nog los voorkwamen, meenemen in het ritme */
.band.paper,.mt-vlak{background:var(--wp--preset--color--teal-licht)}

/* ==========================================================
   Footer: adres klikbaar, credit in oranje
   ========================================================== */

/* ==========================================================
   Hero: alles op dezelfde breedte

   De tekstkolom was een flexitem zonder groeiwaarde, waardoor hij
   samenkromp tot de breedte van de langste regel. De zoekbalk kon
   daardoor nooit breder worden dan de subtekst erboven.
   ========================================================== */
.heromedia{display:flex;align-items:center}
.herotext{flex:1 1 100%;width:100%;max-width:1120px;box-sizing:border-box}

.herotext h1{max-width:22ch}
.herotext .sub{max-width:76ch}
.searchcard{max-width:100%}
.popular{max-width:100%}

/* op grote schermen blijft er rechts ruimte vrij voor het cv-blok */
@media(min-width:1100px){
	.herotext{padding-right:270px}
}
@media(min-width:1500px){
	.herotext{padding-right:300px}
}
/* ==========================================================
   Achtergrondvideo in de hero

   De video ligt over het posterbeeld. Laadt de video niet, dan blijft
   het beeld staan. De donkere gradient eroverheen komt uit .heromedia::after
   en houdt de tekst leesbaar.
   ========================================================== */
.heromedia > .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

.heromedia > .bg--video.is-actief{opacity:1}

/* Iets meer dekking dan bij een foto: bewegend beeld leidt sterker af */

/* Bij minder beweging blijft de video zichtbaar maar staat hij stil op
   het eerste beeld (site.js pauzeert hem). Verbergen gaf een zwart vlak. */
/* ==========================================================
   Overlay op de hero: lichter nu er een compacte video onder ligt
   Links blijft het donkerst, want daar staat de tekst.
   ========================================================== */
.heromedia::after{background:linear-gradient(100deg,
		rgba(16,16,16,.80) 0%,
		rgba(16,16,16,.62) 42%,
		rgba(16,16,16,.30) 70%,
		rgba(16,16,16,.18) 100%)}
/* ==========================================================
   Achtergrondvideo laadt direct, geen posterbeeld ervoor
   ========================================================== */
.heromedia{background:#101010}
.heromedia > .bg--video{opacity:1;transition:none}
/* ==========================================================
   Footer: compactere afstanden
   ========================================================== */

/* ==========================================================
   Hero: tweede zin als aparte, iets kleinere regel
   ========================================================== */
.herotext .sub--klein{font-size:15.5px;color:#CDD2D5;margin-top:8px;max-width:66ch}

/* ==========================================================
   Formulier: bestandskeuze compacter
   ========================================================== */

.field input[type=file]::file-selector-button{font-size:13.5px;padding:8px 16px;margin-right:10px}
.field .optioneel{font-weight:400;font-size:13px;color:var(--grey)}
.field .hulp{font-size:12.5px;margin-top:6px}

/* ==========================================================
   Bevestiging na verzenden
   ========================================================== */
.bevestiging{text-align:left}
.bevestiging__vink{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--wp--preset--color--teal-licht);margin-bottom:18px}
.bevestiging__vink svg{width:28px;height:28px;stroke:var(--cyan-lg);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.bevestiging__stappen{list-style:none;margin:22px 0 24px;padding:0;display:grid;gap:10px}
.bevestiging__stappen li{display:flex;align-items:flex-start;gap:11px;font-size:15px;color:var(--ink)}
.bevestiging__stappen svg{flex:none;width:17px;height:17px;margin-top:3px;stroke:var(--cyan-lg);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.bevestiging__verder{color:var(--grey);font-size:15px;margin-bottom:16px}
.bevestiging .rbtn{width:auto}

/* ==========================================================
   Footer: copyright en credit op een regel
   ========================================================== */

/* ==========================================================
   Rustiger homepage: witte secties, kleur alleen waar het telt

   hero (video) - sectoren (wit) - vacatures (wit) - routes (wit)
   - reviews (wit, met een ingesprongen vlak) - oproep (licht blauw)
   - footer (donker)
   ========================================================== */
.mt-latest-vlak{background:var(--surface)}
.routes{background:var(--surface)}
.mt-reviews{background:var(--surface)}

/* Kaarten houden hun eigen vlak, zodat er nog steeds structuur is */
.sectorcard{background:var(--paper)}
.sectorcard:hover{background:var(--wp--preset--color--teal-licht);border-color:var(--cyan)}
.route{background:var(--paper);border-color:transparent}
.route:hover{background:var(--surface);border-color:var(--cyan)}
.jobrow{background:var(--surface);border-color:var(--line)}

/* ==========================================================
   Reviews: ingesprongen vlak in plaats van volle breedte
   ========================================================== */
.mt-reviews{padding:64px 0 72px}
.mt-reviews__inner{margin:0 auto;padding:0 30px}
@media(max-width:760px){
	.mt-reviews{padding:40px 0 44px}
}
.mt-review{background:var(--surface)}
.mt-review:nth-child(even){border-top-color:var(--orange)}


/* De zachte oranje gloed hoort nu bij het ingesprongen vlak */
.mt-reviews::before{display:none}

/* ==========================================================
   Afsluitende oproep: licht blauw
   ========================================================== */
.mt-cta{background:var(--wp--preset--color--teal-licht)}
/* ==========================================================
   Het menu blijft in beeld tijdens het scrollen
   Op de hele site. Het schuift niet meer weg bij naar beneden
   scrollen; header.site is sticky en blijft dat.
   ========================================================== */

/* ==========================================================
   Secties breder: meer inhoud, nog steeds marge aan de zijkant
   ========================================================== */
/* Een breedte voor de hele site: menubalk, secties en footer. */
:root{--paginabreedte:1280px}
.wrap{max-width:var(--paginabreedte)}
.mt-cta .wrap{max-width:1280px;padding:0 30px}
.latest.wrap{max-width:1280px}
.routes .inner{max-width:1280px}

/* ==========================================================
   Knoppen: overal dezelfde maat, tenzij de tekst te lang is
   ========================================================== */
.rbtn,
.mt-cta .btn{min-width:210px;justify-content:center;text-align:center}
.rbtns{display:flex}
.rbtn{font-size:15px;padding:12px 20px;gap:8px}
.mt-cta .btn{font-size:15px;padding:12px 20px}
.mt-cta .btn.line{padding:10px 18px}

/* ==========================================================
   Footer: credit blijft aan elkaar, adres zonder onderstreping
   ========================================================== */

/* ==========================================================
   MOBIELE LAAG

   Een samenhangende set regels voor kleine schermen. Bewust als laatste
   blok, zodat het altijd wint van de losse regels die eerder zijn ontstaan.
   Twee breekpunten: tot 900 pixels (tablet en kleiner) en tot 600 pixels
   (telefoon). Later kunnen we per onderdeel verfijnen.
   ========================================================== */

/* Niets mag horizontaal buiten beeld vallen */
/* Geen overflow-x:hidden hier: dat maakt van de pagina een scrollcontainer
   en daarmee werkt position:sticky op de header niet meer. overflow-x:clip
   knipt wel af maar maakt geen scrollcontainer. */
html,body{max-width:100%;overflow-x:clip}
img,video,svg{max-width:100%}

/* Aanraken vraagt grotere trefvlakken dan een muis */
@media (pointer:coarse){
	
}

@media(max-width:900px){
	/* Secties: minder lucht, zelfde ritme */
	.cats.wrap,.latest.wrap,.routes .inner{padding-top:40px;padding-bottom:40px}
	.mt-cta{padding:44px 0 48px}
	.mt-reviews{padding:32px 0 36px}

	/* Hero */
	.heromedia{min-height:0}
	.herotext{padding:44px 22px 60px}
	.herotext h1{max-width:none}
	.herotext .sub{max-width:none}

	/* Vacaturerij wordt een blok in plaats van een rij */
	.jobrow{flex-wrap:wrap}
	
	.jobrow .body{flex:1 1 100%;min-width:0}
	
	.jobcta{width:100%;text-align:center}

	/* Vacaturekaart op het overzicht */
	.vaccard-body{grid-template-columns:1fr}
	.vaccard .info{padding:24px 22px}
	
	

	/* Detailpagina: zijkolom onder de tekst */
	
	
	

	/* Filterpaneel niet meer meescrollend */
	.filterpanel{position:static;max-height:none}
}

@media(max-width:600px){
	/* Typografie een tandje kleiner, maar niet te klein om te lezen */
	h1{font-size:clamp(26px,7.4vw,34px)}
	h2{font-size:clamp(21px,5.6vw,26px)}
	.lead-text,.mt-reviews__kop p,.routes .intro{font-size:15.5px}

	/* Header */
	header.site .bar{padding:26px 14px 14px;gap:10px}
	
	.btn-solid{font-size:13.5px;padding:10px 14px}

	/* Hero en zoekbalk */
	.hero .wrap{padding:0 14px}
	.herotext{padding:36px 18px 54px}
	.searchcard{padding:6px;gap:6px}
	.sfield input{font-size:16px;padding:14px 16px 14px 46px}
	.sfield .ico{left:16px}
	.searchcard .go{padding:14px 20px;font-size:15px}
	.popular{font-size:13.5px}

	/* Cv-blok: iets kleiner en netjes gecentreerd */
	
	
	
	

	/* Sectorkaarten en routes */
	.sectorcard{padding:18px;gap:13px}
	.sectorcard .ic{width:44px;height:44px}
	.route{padding:16px}
	.rbtn,.mt-cta .btn{min-width:0;width:100%}
	.rbtns{width:100%}
	.mt-cta__knoppen{flex-direction:column;align-items:stretch;gap:10px}

	/* Metaregels: geen scheidingsstreepjes die halverwege afbreken */
	.jobmeta,.vacmeta{gap:4px 12px}
	.jobmeta span,.vacmeta span{padding:0;border-left:0}
	.jobmeta span+span::before,.vacmeta span+span::before{content:'\00b7';margin-right:8px;color:var(--line)}

	/* Reviews */
	.mt-review{flex-basis:82vw;padding:20px 18px 16px}
	.mt-reviews__top{gap:14px}

	/* Formulier en dialoogvenster als schermvullend paneel */
	.sjr-dialoog{width:100%;min-width:0;max-width:100%;max-height:92vh;border-radius:16px 16px 0 0;margin:auto auto 0}
	.sjr-dialoog .formwrap-inner{padding:26px 18px 24px}
	.sjr-dialoog__sluiten{top:12px;right:12px;width:38px;height:38px}
	.field input[type=text],.field input[type=tel]{font-size:16px}

	/* Footer */
	
	
	
}
/* ==========================================================
   Vacatureoverzicht: kaart, uitgelichte band en meescrollend filter
   ========================================================== */

/* De kaart is een raster met twee kolommen: tekst en beeld. */
.vaccard{display:grid;grid-template-columns:1fr;overflow:hidden;position:relative}

.vaccard .info{min-width:0;display:flex;flex-direction:column;justify-content:center}

/* De band hoort bij het omhulsel, niet bij het raster van de kaart. */
.featwrap{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface)}
.featwrap .vaccard{margin:0;border:0;border-radius:0}
.featwrap:hover{border-color:var(--orange);box-shadow:0 12px 30px rgba(226,121,7,.16)}
.marquee{background:var(--cyan);overflow:hidden}
.marquee .track{display:flex;white-space:nowrap;will-change:transform}
.marquee span{font-family:var(--font-head);font-weight:800;color:var(--ink);letter-spacing:.02em;flex:none}

/* De oranje markering van een uitgelichte vacature zit nu op het omhulsel. */
.vaccard.is-uitgelicht{border:0;box-shadow:none;padding-top:0}
.vaccard.is-uitgelicht::before{display:none}

/* Filter blijft in beeld zolang er resultaten naast staan. */
@media(min-width:901px){
	.vacpage{align-items:start}
	.filterpanel{scrollbar-width:none}
	.filterpanel::-webkit-scrollbar{display:none}
}
/* ==========================================================
   Vacatureoverzicht: compactere kaarten
   ========================================================== */
@media(min-width:900px){
	.vaccard{min-height:0}
}
.vaccard{margin-bottom:16px}

/* Titel is een link, maar leest als een kop: geen onderstreping */
.vactitel a{color:var(--ink);text-decoration:none}
.vactitel a:hover,.vactitel a:focus-visible{color:var(--cyan-tx);text-decoration:none}
.vaccard:hover .vactitel a{color:var(--cyan-tx)}

.vacmeta{gap:4px 0}

.vaccard .exc{max-width:60ch}

.featwrap{margin-bottom:16px}
.marquee span{font-size:12.5px;padding:6px 20px}

/* ==========================================================
   Pijl: vierkant met afgeronde hoeken, zoals de containers
   ========================================================== */

.vaccard .pijl svg{width:20px;height:20px}

/* ==========================================================
   Filterpaneel: zoekveld en chips in de huisstijl
   ========================================================== */

.filterpanel .fb-groep:last-child{border-bottom:0}
.filterpanel .lab{display:block;font-family:var(--font-head);font-weight:700;text-transform:uppercase}

/* Het zoekveld in het filter, gelijk aan de rest van de site */
.filterpanel input[type=search],
.filterpanel input[type=text]{width:100%;font-family:var(--font-body);font-size:14.5px;font-weight:400;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:10px 16px;outline:none}
.filterpanel input[type=search]:focus{border-color:var(--cyan)}
.filterpanel input[type=search]::placeholder{color:#8A8A8A}
.fzoekknop{font-family:var(--font-head);font-weight:700;background:var(--paper);border:0;border-radius:999px;cursor:pointer;color:var(--ink);transition:background .16s ease,color .16s ease}
.fzoekknop:hover{background:var(--wp--preset--color--teal-licht);color:var(--cyan-tx)}

/* Chips zijn links: geen onderstreping */
.fchip,.fchip:hover,.fchip:focus{text-decoration:none}
.resetf,.resetf:hover{text-decoration:none}
.filterpanel-titel{font-family:var(--font-head);font-weight:700}

/* ==========================================================
   Vacaturekaart: echt compacter
   ========================================================== */
@media(min-width:900px){
	.vaccard{grid-template-columns:1fr 300px}
}

.vaccard .datum{font-size:12.5px}

.vacmeta{margin:0 0 8px}
.vacmeta span{font-size:13px}

/* Samenvatting op twee regels, zodat de hoogte voorspelbaar blijft */

.vaccard .sal{font-size:16px;margin-top:8px}

/* Het beeld bepaalt niet langer de hoogte */

/* ==========================================================
   Vacaturekaart: sector, titel, feiten, samenvatting
   ========================================================== */
.vaccard .info{padding:22px 26px;gap:0}

/* Sector als klein label boven de titel */
.vacsector{display:inline-block;font-family:var(--font-head);font-weight:800;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan-tx);background:var(--wp--preset--color--teal-licht);border-radius:999px;padding:4px 10px;margin-bottom:10px}

.vactitel{font-size:clamp(19px,1.7vw,23px);margin:0 0 12px;line-height:1.15}

/* De feiten netjes onder elkaar, elk met een icoon */
.vacfeiten{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:7px}
@media(min-width:1100px){
	.vacfeiten{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 18px}
	.vacfeiten .is-salaris{grid-column:1 / -1}
}
.vacfeiten li{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--grey);min-width:0}
.vacfeiten li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vacfeiten svg{flex:none;width:16px;height:16px;stroke:var(--cyan-lg);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Het salaris is het belangrijkste feit */

.vaccard .exc{font-size:14.5px;line-height:1.55;color:var(--grey);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* De oude losse metaregel is vervangen */
.vacmeta{display:none}
/* ==========================================================
   Sectorkaarten: smaller vlak en overal dezelfde hoogte
   ========================================================== */
.cats.wrap{max-width:1280px}
.sectorgrid{align-items:stretch}
.sectorcard{height:100%}

/* De beschrijving op drie regels: de lengte van de tekst bepaalt niet langer
   de hoogte van de kaart. */
.sectorcard .desc{min-height:calc(4 * 1.6em)}
.sectorcard .go{margin-top:auto;padding-top:14px}

/* ==========================================================
   Salaris op de vacaturekaart: gelijk aan de andere feiten
   ========================================================== */
.vacfeiten .is-salaris{font-family:var(--font-body);font-weight:400;font-size:14.5px;color:var(--grey)}
.vacfeiten .is-salaris svg{stroke:var(--cyan-lg);stroke-width:1.8}

/* ==========================================================
   Filterpaneel: geen eigen schuifbalk, compact, en pas
   meebewegen zodra het paneel uit beeld zou lopen
   ========================================================== */
@media(min-width:901px){
	.filterpanel{top:calc(var(--balk-hoogte) + 26px)}
}

.resetf{font-size:13.5px}

.filterpanel input[type=search]{font-size:14px;padding:9px 14px}
.fzoekknop{margin-top:6px;font-size:12.5px;padding:8px 14px}
/* ==========================================================
   Filterpaneel: rustiger, zonder lijnen, met meer lucht
   ========================================================== */
.filterpanel-titel{font-size:18px;margin:0 0 4px}
.filterpanel .fb-groep{padding:0;border-bottom:0;margin-bottom:22px}
.filterpanel .fb-groep:last-child{margin-bottom:0}
.filterpanel .lab{font-size:11px;letter-spacing:.1em;margin-bottom:9px;color:var(--wp--preset--color--grijs)}
.filterpanel .chips{gap:6px}
.fchip{font-size:12px;padding:6px 12px;border-width:1px}
.resetf{margin-bottom:18px}

/* De sticky-positie wordt door het script bepaald: bij een kort filter blijft
   het onder de header hangen, bij een lang filter pas zodra de laatste optie
   in beeld is. */
@media(min-width:901px){
	.filterpanel{position:sticky;align-self:start;max-height:none;overflow:visible}
}

/* ==========================================================
   Sectorlabel op de vacaturekaart: niet breder dan de tekst
   ========================================================== */
.vacsector{align-self:flex-start;width:auto;max-width:100%}
/* ==========================================================
   Vacaturepagina: kop met beeld, feiten en salaris
   ========================================================== */

/* De feiten naast de titel, met een lijn ervoor zoals in het voorbeeld */

/* Het salaris als opvallend vlak, half over de rand van het paneel */

/* ==========================================================
   Inhoud met meescrollende zijbalk
   ========================================================== */

/* ==========================================================
   Bekijk ook deze vacatures
   ========================================================== */

/* Eigen sectie op een warm vlak, zodat hij losstaat van de witte
   vacaturetekst erboven. Dezelfde tint als de vacaturesectie op de
   homepage. De kaarten staan naast elkaar zodra er ruimte voor is. */
.vergelijkbaar{background:var(--mt-warm)}
.vergelijkbaar > .wrap{padding:48px 30px 56px}
.vergelijkbaar h2{font-size:clamp(21px,2.4vw,27px);margin:0 0 20px}
.vergelijkbaar__meer{margin:26px 0 0}
.simgrid{display:grid;grid-template-columns:1fr;gap:16px}
.simgrid .vaccard{grid-template-columns:1fr;margin:0;height:100%}
.simgrid .vaccard .beeld{display:none}
.simgrid .vaccard .info{padding:20px}
.simgrid .vactitel{font-size:18px}
.simgrid .exc{display:none}
/* Uitgelicht als stil label in de kaart. De bewegende band hoort bij het
   overzicht; hier zou die de kaart uit het raster tillen en de kolommen
   ongelijk van hoogte maken. */
.vacmerk{
	align-self:flex-start;
	margin:0 0 10px;
	padding:4px 10px;
	border-radius:999px;
	background:var(--orange);
	color:var(--ink);
	font-family:var(--font-head);
	font-size:11.5px;
	font-weight:800;
	letter-spacing:.08em;
	text-transform:uppercase;
	line-height:1.4;
}
/* Gelijke hoogte: elke kaart is zelf het rasteritem en vult de rij */
.simgrid{align-items:stretch}
.simgrid > .vaccard{height:100%}

@media(min-width:700px){
	.simgrid{grid-template-columns:repeat(2,1fr)}
}

@media(min-width:900px){
	.vergelijkbaar > .wrap{padding:56px 30px 72px}
	.simgrid{grid-template-columns:repeat(3,1fr)}
}
/* ==========================================================
   Filterpaneel: zoekveld, uitklapbare groepen, mobiele knop
   ========================================================== */

/* Zoekveld bovenaan */
.fb-zoek{margin-bottom:20px}
.fb-zoek .lab{display:block;font-family:var(--font-head);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--wp--preset--color--grijs);margin-bottom:9px}
.fb-zoek input[type=search]{width:100%;font-family:var(--font-body);font-size:14px;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:10px 16px;outline:none}
.fb-zoek input[type=search]:focus{border-color:var(--cyan)}

/* De knop Filters is alleen op kleine schermen nodig */
.filtertoggle{display:none}

/* Uitklapbare groepen */
.fb-groep{margin-bottom:20px}
.fb-groep > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px}
.fb-groep > summary::-webkit-details-marker{display:none}

.fb-groep > .chips{margin-top:9px}

@media(min-width:901px){
	/* Op desktop staan alle groepen open en is er niets uit te klappen */
	.fb-groep > summary{cursor:default;pointer-events:none}
}

@media(max-width:900px){
	.filterpanel{background:var(--paper)}
	.filterpanel-titel{display:none}
	.resetf{margin-bottom:14px}

	.fb-zoek input[type=search]{font-size:16px;padding:13px 18px;background:var(--surface)}
	.fzoekknop{width:100%;background:var(--orange);color:var(--ink);font-family:var(--font-head);font-weight:800;font-size:15.5px;padding:13px 22px;border-radius:999px;margin-top:10px}
	.fzoekknop:hover{background:var(--orange-lg);color:var(--ink)}

	/* De knop die de filters open- en dichtklapt */
	.filtertoggle{display:flex;align-items:center;justify-content:center;width:100%;background:var(--orange);color:var(--ink);border:0;border-radius:999px;cursor:pointer;font-family:var(--font-head);font-weight:800;transition:background .16s ease}
	.filtertoggle:hover{background:var(--orange-lg)}
	.filtertoggle svg{stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

	/* De groepen zijn dicht tot de knop wordt ingedrukt */
	.filtergroepen{display:none}
	.filtergroepen.is-open{display:block}

	/* Elke groep als een eigen rij, zoals in het voorbeeld */
	.fb-groep{padding:0}
	
	
	
	.fb-groep > .chips{margin-top:2px}
	
}
/* ==========================================================
   Mobiel filter: pijl rechts, opties als aanvinklijst
   Alleen op kleine schermen; op desktop blijven het chips.
   ========================================================== */
@media(max-width:900px){

	/* De rij zelf: huisstijlpadding en een duidelijke pijl uiterst rechts */
	.fb-groep{background:var(--surface);border-radius:14px;margin-bottom:10px;border:1px solid var(--line);overflow:hidden}
	.fb-groep[open]{border-radius:14px;padding-bottom:6px}

	.fb-groep > summary{padding:15px 20px;font-family:var(--font-body);font-weight:600;font-size:15.5px;color:var(--ink);letter-spacing:0;text-transform:none}
	
	
	.fb-groep > summary:hover{background:var(--paper)}

	/* De opties als aanvinklijst in plaats van chips */
	.fb-groep > .chips{display:block;margin:0;padding:0 20px 8px}

	.fchip{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:13px 0 13px 34px;margin:0;border:0;border-radius:0;border-top:1px solid var(--line);background:none;font-family:var(--font-body);font-weight:400;font-size:15.5px;color:var(--ink);text-align:left}
	.fchip:first-child{border-top:0}
	.fchip:hover{background:none;color:var(--ink)}

	/* Het vakje */
	.fchip::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:22px;height:22px;border:2px solid var(--line);border-radius:6px;background:var(--surface);transition:background .16s ease,border-color .16s ease}
	.fchip.is-actief{background:none;color:var(--ink);font-weight:600}
	.fchip.is-actief::before{background:var(--cyan-lg);border-color:var(--cyan-lg)}

	/* Het vinkje */
	.fchip.is-actief::after{content:'';position:absolute;left:5px;top:50%;width:11px;height:6px;border-left:2.4px solid var(--surface);border-bottom:2.4px solid var(--surface);transform:translateY(-72%) rotate(-45deg)}
}
/* ==========================================================
   Filtergroepen: pijl als icoon in plaats van een CSS-driehoek

   De driehoek werd op sommige schermen als een streep weergegeven.
   Een icoon in de code is voorspelbaar; de pseudo-elementen worden
   daarom uitgezet.
   ========================================================== */
.fb-groep > summary::after,
.fb-groep[open] > summary::after{content:none;border:0;width:0;height:0;margin:0}

.fb-groep > summary .chev{display:none}

@media(max-width:900px){
	.fb-groep > summary{display:flex;align-items:center;justify-content:space-between;gap:12px}
	.fb-groep > summary .chev{display:block;flex:none;width:20px;height:20px;stroke:var(--orange);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease}
	.fb-groep[open] > summary .chev{transform:rotate(180deg)}
}
/* ==========================================================
   Mobiel filter: kopregel naast elkaar

   De regel .filterpanel .lab weegt zwaarder dan .fb-groep > summary
   en zette de kopregel op blokweergave, waardoor de pijl eronder viel.
   Hier met hogere specificiteit gecorrigeerd.
   ========================================================== */
@media(max-width:900px){
	.filterpanel .fb-groep > summary.lab{display:flex;align-items:center;justify-content:space-between;margin:0;font-family:var(--font-body);font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
	.filterpanel .fb-groep > summary.lab .chev{display:block;flex:none;margin-left:auto}
	.filterpanel .fb-groep > summary.lab > span{min-width:0}
}
/* ==========================================================
   Mobiel filter: compacter, zowel dicht als open

   Alleen tot 900 pixels. De trefvlakken blijven minimaal 40 pixels hoog,
   zodat aantikken met een vinger betrouwbaar blijft.
   Het zoekveld houdt 16 pixels tekst: bij een kleinere maat zoomt iOS
   automatisch in zodra je het veld aantikt.
   ========================================================== */
@media(max-width:900px){

	.filterpanel{padding:14px 12px;border-radius:14px}
	.filterpanel .resetf{margin-bottom:10px;font-size:13px}

	/* Zoekveld en knoppen */
	.filterpanel .fb-zoek{margin-bottom:12px}
	.filterpanel .fb-zoek .lab{margin-bottom:6px;font-size:10.5px}
	.filterpanel .fb-zoek input[type=search]{padding:11px 16px;font-size:16px}
	.filterpanel .fzoekknop{padding:11px 20px;font-size:15px;margin-top:8px}
	.filtertoggle{padding:11px 20px;font-size:15px;margin-top:8px;gap:9px}
	.filtertoggle svg{width:18px;height:18px}
	.filtergroepen{margin-top:10px}

	/* De rijen zelf */
	.filterpanel .fb-groep{margin-bottom:6px;border-radius:12px}
	.filterpanel .fb-groep[open]{padding-bottom:2px}
	.filterpanel .fb-groep > summary.lab{padding:11px 16px;font-size:14.5px;gap:10px}
	.filterpanel .fb-groep > summary.lab .chev{width:17px;height:17px;stroke-width:2.6}

	/* De opties */
	.filterpanel .fb-groep > .chips{padding:0 16px 6px}
	.filterpanel .fchip{padding:9px 0 9px 30px;font-size:14.5px;min-height:40px}
	.filterpanel .fchip::before{width:19px;height:19px;border-radius:5px;border-width:2px}
	.filterpanel .fchip.is-actief::after{left:4.5px;width:9px;height:5px;border-width:0 0 2.2px 2.2px}
}

/* Trefvlakken op een aanraakscherm minimaal 44 pixels hoog. Hoort bij de
   toegankelijkheidseis uit de scope. */
@media (pointer:coarse){
	.fchip,.sjr-chip,.tab2,.nav.main a,.mobmenu a,.jobshare{min-height:44px;display:inline-flex;align-items:center}
}

/* De algemene regel voor trefvlakken mag het filter niet oprekken */
@media (pointer:coarse){
	.filterpanel .fchip{min-height:40px}
}
/* ==========================================================
   Nieuwste vacatures: dezelfde opbouw als het overzicht
   sector - titel - feiten met iconen - knop
   ========================================================== */
.jobrow{align-items:center;gap:18px;padding:20px 22px}
.jobrow .thumb{flex:none;width:52px;height:52px;border-radius:14px;background:var(--wp--preset--color--teal-licht);display:flex;align-items:center;justify-content:center}
.jobrow .thumb svg{width:24px;height:24px}
.jobrow .body{min-width:0;flex:1}

.jobrow .jobtop{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-bottom:8px}
.jobrow .jobtop h3{font-size:19px;line-height:1.2;margin:0}
.jobrow .vacsector{margin:0}

.jobrow .vacfeiten{margin:0;gap:6px 20px}
@media(min-width:900px){
	.jobrow .vacfeiten{grid-template-columns:repeat(3,auto);justify-content:start}
	.jobrow .vacfeiten .is-salaris{grid-column:auto}
}
.jobrow .vacfeiten li{font-size:14px}
.jobrow .vacfeiten svg{width:15px;height:15px}

/* ==========================================================
   Nieuwste vacatures op mobiel: alles onder elkaar, rustig
   ========================================================== */
@media(max-width:900px){
	.jobrow{display:grid;grid-template-columns:44px 1fr;grid-template-areas:'icoon kop' 'feiten feiten' 'actie actie';align-items:start;gap:12px 14px;padding:18px}
	.jobrow .thumb{grid-area:icoon;width:44px;height:44px;border-radius:12px}
	.jobrow .thumb svg{width:21px;height:21px}

	.jobrow .body{grid-area:kop;display:contents}
	.jobrow .jobtop{grid-area:kop;margin:0;align-items:flex-start;flex-direction:column;gap:6px}
	.jobrow .jobtop h3{font-size:17.5px}

	.jobrow .vacfeiten{grid-area:feiten;display:grid;grid-template-columns:1fr;gap:7px;padding-top:12px;border-top:1px solid var(--line)}
	.jobrow .vacfeiten li{font-size:14px}

	.jobrow .jobact{grid-area:actie;width:100%}
	.jobrow .jobcta{width:100%;padding:11px 18px;font-size:14.5px}

	.jobrow .badge-new{font-size:12px}
}
/* ==========================================================
   Sollicitatiepagina: ruimte aan de zijkanten en tussen de velden

   De regel .formwrap zette de zijkantpadding op nul en overschreef
   daarmee die van .wrap, waardoor de tekst tegen de schermrand liep.
   ========================================================== */
.formwrap{max-width:620px;padding:44px 18px 70px}
.formwrap > h1{margin-bottom:10px}
.formwrap > .intro{color:var(--grey);font-size:16.5px;line-height:1.65;margin-bottom:26px}

/* Het formulier als eigen vlak, zodat het losstaat van de paginatekst */
.formwrap .formwrap-inner{
	background:var(--paper);
	border-radius:16px;
	padding:26px 24px 28px;
}

.field{margin-top:20px}
.field:first-child{margin-top:0}
.field label{margin-bottom:7px}
.field input[type=text],.field input[type=tel]{padding:13px 15px}
.field.consent{margin-top:22px}
.formwrap .btn.orange.breed{margin-top:22px}

@media(max-width:600px){
	.formwrap{padding:32px 16px 56px}
	.formwrap > .intro{font-size:15.5px;margin-bottom:20px}
	.formwrap .formwrap-inner{padding:22px 18px 24px;border-radius:14px}

	.field{margin-top:18px}
	.field label{font-size:14px}
	.field input[type=text],.field input[type=tel]{font-size:16px;padding:13px 14px}

	/* Bestand kiezen op een eigen regel, anders loopt de tekst ernaast klem */
	.field input[type=file]{display:block;width:100%;margin-top:2px}
	.field input[type=file]::file-selector-button{margin-right:10px;padding:9px 16px}

	.field.consent label{gap:11px;font-size:14.5px;line-height:1.5}
	.field .optioneel{display:block;margin-top:2px;font-size:12.5px}
}
/* ==========================================================
   Uploadvlak voor het cv: label, status en bestandstypen in een blok
   ========================================================== */
.field-cv{margin-top:22px}

.cvdrop{
	position:relative;
	display:flex;align-items:center;gap:14px;
	padding:16px 18px;
	border:2px dashed var(--line);
	border-radius:14px;
	background:var(--surface);
	cursor:pointer;
	transition:border-color .16s ease,background .16s ease;
}
.cvdrop:hover{border-color:var(--cyan);background:var(--wp--preset--color--teal-licht)}
.cvdrop:focus-within{border-color:var(--orange-lg);border-style:solid;
	outline:2px solid var(--orange-lg);outline-offset:2px}
.cvdrop.is-gevuld{border-style:solid;border-color:var(--cyan-lg);background:var(--wp--preset--color--teal-licht)}

.cvdrop__icoon{flex:none;display:flex;align-items:center;justify-content:center;
	width:44px;height:44px;border-radius:12px;background:var(--paper)}
.cvdrop.is-gevuld .cvdrop__icoon{background:var(--surface)}
.cvdrop__icoon svg{width:22px;height:22px;stroke:var(--cyan-tx);fill:none;stroke-width:1.8;
	stroke-linecap:round;stroke-linejoin:round}

.cvdrop__tekst{display:grid;gap:2px;min-width:0}
.cvdrop__tekst b{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink)}
.cvdrop__status{font-size:13px;line-height:1.45;color:var(--grey);
	overflow:hidden;text-overflow:ellipsis}
.cvdrop.is-gevuld .cvdrop__status{color:var(--cyan-tx);font-weight:600}

/* Het echte veld ligt onzichtbaar over het vlak, zodat slepen blijft werken */
.cvdrop__invoer{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}

@media(max-width:600px){
	.cvdrop{padding:14px 14px;gap:12px}
	.cvdrop__icoon{width:40px;height:40px;border-radius:10px}
	.cvdrop__tekst b{font-size:14.5px}
	.cvdrop__status{font-size:12.5px}
}

/* ==========================================================
   Cv-knop in de hero: slepen kan niet op een telefoon
   ========================================================== */

/* ==========================================================
   Werkgevers en Over ons: ruimte aan de zijkanten

   De regel .band zet padding:40px 0 en overschreef daarmee de
   zijkantpadding van .wrap. Hier met hogere specificiteit hersteld.
   ========================================================== */
.wrap.band{padding:44px 18px}

@media(max-width:700px){
	.wrap{padding:0 16px}
	.wrap.band{padding:30px 16px}


	.band h2{font-size:clamp(20px,5.6vw,25px)}
	.band p{font-size:15.5px}
}
/* ==========================================================
   Mobiel menu: schermvullend paneel met een rustige animatie
   ========================================================== */
.mobmenu[hidden]{display:none}

.mobmenu{
	position:fixed;inset:0;z-index:200;
	display:flex;flex-direction:column;
	background:var(--surface);
	padding:18px 20px calc(24px + env(safe-area-inset-bottom));
	overflow-y:auto;
	opacity:0;
	transform:translateY(-10px);
	transition:opacity .22s ease, transform .22s ease;
	border-top:0;
}
.mobmenu.open{display:flex;opacity:1;transform:none}

.mobmenu__top{display:flex;align-items:center;justify-content:space-between;
	padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:8px}
.mobmenu__titel{font-family:var(--font-head);font-weight:700;font-size:12px;
	letter-spacing:.12em;text-transform:uppercase;color:#8A8A8A}
.mobmenu__sluit{width:44px;height:44px;border-radius:50%;border:2px solid var(--ink);
	background:none;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
	transition:background .16s ease,color .16s ease,transform .16s ease}
.mobmenu__sluit svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.mobmenu__sluit:hover{background:var(--ink);color:var(--surface);transform:rotate(90deg)}

/* De links komen een voor een in beeld */
.mobmenu__nav{display:flex;flex-direction:column;padding:6px 0}
.mobmenu__nav a{
	display:block;padding:13px 2px;
	font-family:var(--font-head);font-weight:700;font-size:21px;color:var(--ink);
	text-decoration:none;border-bottom:1px solid var(--paper);
	opacity:0;transform:translateY(8px);
}
.mobmenu__nav a.sub{font-family:var(--font-body);font-weight:500;font-size:16px;
	color:var(--grey);padding:9px 2px 9px 16px}
.mobmenu__nav a:last-child{border-bottom:0}
.mobmenu.open .mobmenu__nav a{animation:mobin .3s ease forwards}
.mobmenu.open .mobmenu__nav a:nth-child(1){animation-delay:.04s}
.mobmenu.open .mobmenu__nav a:nth-child(2){animation-delay:.07s}
.mobmenu.open .mobmenu__nav a:nth-child(3){animation-delay:.1s}
.mobmenu.open .mobmenu__nav a:nth-child(4){animation-delay:.13s}
.mobmenu.open .mobmenu__nav a:nth-child(5){animation-delay:.16s}
.mobmenu.open .mobmenu__nav a:nth-child(6){animation-delay:.19s}
.mobmenu.open .mobmenu__nav a:nth-child(7){animation-delay:.22s}
.mobmenu.open .mobmenu__nav a:nth-child(8){animation-delay:.25s}
@keyframes mobin{to{opacity:1;transform:none}}

.mobmenu__acties{display:grid;gap:10px;margin-top:auto;padding-top:22px}
.mobmenu__acties .btn{width:100%;text-align:center}

.mobmenu__contact{display:flex;flex-wrap:wrap;gap:6px 20px;padding-top:18px;margin-top:16px;
	border-top:1px solid var(--line)}
.mobmenu__contact a{font-size:14.5px;font-weight:600;color:var(--cyan-tx);text-decoration:none}

/* Achtergrond niet meescrollen zolang het menu open is */
body.menu-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
	.mobmenu{transition:none;transform:none}
	.mobmenu.open .mobmenu__nav a{animation:none;opacity:1;transform:none}
	.mobmenu__sluit:hover{transform:none}
}

@media(min-width:1001px){
	.mobmenu{display:none}
}
/* ==========================================================
   Footer: kolommen die op mobiel openklappen

   De links staan gewoon in de HTML, ook als een groep dicht staat.
   Zoekmachines lezen ze dus normaal; alleen de weergave verandert.
   ========================================================== */

/* Merk, socials en onderbalk gecentreerd onder de kolommen */

/* ==========================================================
   Mobiel: zoekveld leesbaar, vacaturerijen zonder icoon
   ========================================================== */
@media(max-width:600px){
	.sfield input{font-size:15px;padding:13px 14px 13px 44px;text-overflow:ellipsis}
	.sfield .ico{left:15px;width:18px;height:18px}
	.searchcard .go{padding:13px 18px;font-size:14.5px}
}

@media(max-width:900px){
	/* Het sectoricoon voegt op een smal scherm weinig toe en kost breedte */
	.jobrow .thumb{display:none}
	.jobrow{
		grid-template-columns:1fr;
		grid-template-areas:'kop' 'feiten' 'actie';
		gap:10px;
	}
}
/* ==========================================================
   Footer: het logo alleen op mobiel

   Op desktop staan de kolommen al onder de header met het logo;
   een tweede logo voegt daar niets toe.
   ========================================================== */

/* ==========================================================
   Footer onderbalk: op desktop copyright links, links rechts
   ========================================================== */

/* ==========================================================
   Footer: iconen bij de contactgegevens, in de merkkleur oranje
   ========================================================== */

/* ==========================================================
   Footer onderbalk op desktop: drie delen
   copyright links, credit in het midden, privacybeleid rechts
   ========================================================== */

/* ==========================================================
   Footer op desktop: drie blokken
   Vacatures links, Over ons met Voor werkgevers eronder, Contact rechts.
   ========================================================== */

/* ==========================================================
   Reviews: doorlopende rij, slepen en vegen

   Vastklikken per kaart hoort niet bij een doorlopende beweging,
   dus dat staat uit. Vegen op een telefoon regelt de browser zelf.
   ========================================================== */
.mt-reviews__rij{
	scroll-snap-type:none;
	scroll-behavior:auto;
	cursor:grab;
	-webkit-overflow-scrolling:touch;
	overscroll-behavior-x:contain;
}
.mt-reviews__rij.is-slepen{cursor:grabbing;user-select:none}
.mt-reviews__rij.is-slepen a{pointer-events:none}
.mt-review{scroll-snap-align:none}

/* De kopie draagt geen eigen betekenis */
.mt-review.is-kopie{opacity:1;transform:none}
/* ==========================================================
   FOOTER - een definitie, van klein naar groot

   Dit blok is de enige plek waar de footer wordt opgemaakt.
   Voeg hier geen losse correcties onderaan de stylesheet aan toe,
   maar pas de regel hieronder aan. Anders ontstaat opnieuw een
   stapel regels die elkaar tegenspreken.
   ========================================================== */

footer.site{background:var(--ink);color:#B9B9B9}
.foot-inner{padding:8px 18px 20px}

/* --- Kolommen ------------------------------------------------ */
.foot-grid{display:block}

.foot-kol{border-bottom:1px solid rgba(255,255,255,.14)}
.foot-kol > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
	justify-content:space-between;gap:12px;padding:16px 2px}
.foot-kol > summary::-webkit-details-marker{display:none}
.foot-kol > summary h2{margin:0;font-family:var(--font-head);font-size:14px;font-weight:800;
	letter-spacing:.09em;text-transform:uppercase;color:var(--surface)}
.foot-kol > summary .chev{display:block;flex:none;width:20px;height:20px;
	stroke:var(--surface);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
	transition:transform .18s ease}
.foot-kol[open] > summary .chev{transform:rotate(180deg)}

.foot-kol ul{list-style:none;margin:0;padding:2px 2px 18px;display:grid;gap:12px}
.foot-kol a{color:#B9B9B9;text-decoration:none;font-size:15.5px;
	transition:color .16s ease,padding-left .16s ease}
.foot-kol a:hover{color:var(--surface)}

/* --- Contactkolom -------------------------------------------- */
.foot-contactblok{display:grid;gap:14px;padding:2px 2px 18px}
.foot-adres{color:#DADADA;font-size:15.5px;line-height:1.6;margin:0}
.foot-adres a{color:#DADADA;text-decoration:none}
.foot-adres a:hover{color:var(--surface)}

.foot-direct{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-direct li{display:block}
.foot-direct a{display:flex;align-items:center;gap:10px;
	color:var(--orange);font-size:15.5px;font-weight:600;text-decoration:none}
.foot-direct a:hover{color:var(--orange-lg);text-decoration:underline}
.foot-direct a svg{flex:none;width:17px;height:17px;stroke:var(--orange);fill:none;
	stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.foot-direct a:hover svg{stroke:var(--orange-lg)}

/* --- Merk en socials ----------------------------------------- */
.foot-merk{display:flex;justify-content:center;padding-top:30px;margin-top:26px}
.foot-logo{width:150px;height:auto;display:block}

.foot-social{display:flex;justify-content:center;gap:12px;margin-top:22px}
.foot-social a{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
	border-radius:50%;background:rgba(255,255,255,.08);color:#C9C9C9;
	transition:background .16s ease,color .16s ease,transform .16s ease}
.foot-social a:hover{background:var(--orange);color:var(--ink);transform:translateY(-2px)}
.foot-social svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;
	stroke-linecap:round;stroke-linejoin:round}

/* --- Onderbalk ----------------------------------------------- */
.foot-onder{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
	margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.foot-onder p{margin:0;font-size:14px;color:#8F8F8F}
.foot-onder a{color:#8F8F8F;text-decoration:none}
.foot-onder a:hover{color:var(--surface);text-decoration:underline}
.credit-blok{white-space:nowrap}
.foot-onder .credit{color:var(--orange);font-weight:700;text-decoration:none}
.foot-onder .credit:hover{color:var(--orange-lg);text-decoration:underline}

/* --- Vanaf tablet en groter ---------------------------------- */
@media(min-width:901px){
	.foot-inner{padding:56px 30px 24px}

	.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;align-items:start}

	.foot-kol{border-bottom:0}
	.foot-kol > summary{cursor:default;pointer-events:none;padding:0;margin-bottom:18px}
	.foot-kol > summary h2{font-size:13px}
	.foot-kol > summary .chev{display:none}
	.foot-kol ul{padding:0;gap:10px}
	.foot-kol a:hover{padding-left:4px}
	.foot-contactblok{padding:0}

	/* Het logo staat al in de header */
	.foot-merk{display:none}
	.foot-social{margin-top:0;padding-top:34px;border-top:1px solid rgba(255,255,255,.14)}

	.foot-onder{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
		text-align:left;gap:14px 26px;margin-top:22px;padding-top:20px}
	.foot-onder .foot-copy{justify-self:start}
	.foot-onder .foot-credit{justify-self:center;text-align:center}
	.foot-onder p:last-child{justify-self:end;text-align:right}
}
/* ==========================================================
   Achtergrondvideo: geen eigen compositielaag forceren
   translateZ, will-change, backface-visibility en contain:paint op een
   video binnen een afgeronde container met overflow:hidden laten WebKit
   op iOS (Safari en Chrome) een zwart vlak tekenen. Bewust weggelaten.
   ========================================================== */
/* ==========================================================
   CV-KNOP IN DE HERO - een definitie

   Pas hier aan; niet onderaan de stylesheet een correctie toevoegen.
   ========================================================== */
.cvwrap{position:absolute;right:30px;bottom:0;transform:translateY(50%);z-index:6}

.cvcircle{
	display:flex;align-items:center;gap:14px;
	text-decoration:none;text-align:left;
	padding:22px 28px;
	border-radius:16px;
	background:var(--orange);
	color:var(--ink);
	box-shadow:0 16px 38px rgba(16,16,16,.32);
	transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
/* De knop ademt rustig door, zodat hij opvalt zonder te knipperen. Bij
   aanwijzen of slepen stopt het: dan heeft de bezoeker hem al gevonden. */
@keyframes sjr-puls{
	0%{box-shadow:0 16px 38px rgba(16,16,16,.32),0 0 0 0 rgba(249,157,57,.55)}
	70%{box-shadow:0 16px 38px rgba(16,16,16,.32),0 0 0 18px rgba(249,157,57,0)}
	100%{box-shadow:0 16px 38px rgba(16,16,16,.32),0 0 0 0 rgba(249,157,57,0)}
}
.cvcircle{animation:sjr-puls 2.4s ease-out infinite}
.cvcircle:hover,.cvcircle:focus-visible,.cvcircle.is-sleep{animation:none}
@media (prefers-reduced-motion:reduce){
	.cvcircle{animation:none}
}

.cvcircle:hover,.cvcircle:focus-visible{
	background:var(--orange-lg);color:var(--ink);
	transform:translateY(-3px);
	box-shadow:0 20px 46px rgba(16,16,16,.40);
}
.cvcircle.is-sleep{
	background:var(--orange-lg);transform:translateY(-3px);
	box-shadow:0 0 0 5px rgba(249,157,57,.38),0 20px 46px rgba(16,16,16,.40);
}

/* Icoon en tekst op een lijn; de tweede regel staat eronder */
.cvface{display:flex;align-items:center;gap:14px;pointer-events:none}
.cvface svg{flex:none;width:28px;height:28px;stroke:var(--ink);fill:none;
	stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cvface__kop{font-family:var(--font-head);font-weight:800;font-size:16px;line-height:1.15;
	text-transform:uppercase;letter-spacing:.04em;display:block}
.cvface__hulp{font-family:var(--font-body);font-weight:500;font-size:12.5px;line-height:1.2;
	opacity:.82;display:block;margin-top:2px}

.cvspacer{height:64px}

@media(max-width:900px){
	.cvwrap{right:50%;transform:translate(50%,50%)}
	/* Slepen kan niet op een telefoon */
	.cvface__hulp{display:none}
	/* Groter vlak, zodat de knop opvalt */
	.cvcircle{padding:20px 30px;gap:13px;border-radius:16px}
	.cvface svg{width:26px;height:26px}
	.cvface__kop{font-size:17px}
	.cvspacer{height:70px}
}

@media(max-width:420px){
	.cvcircle{padding:18px 24px}
	.cvface__kop{font-size:16px}
}
/* Logo in de header: kleiner op een telefoon */
@media(max-width:900px){
	.logo img{height:30px}
}
@media(max-width:600px){
	.logo img{height:26px}
	header.site .bar{padding:26px 14px 14px;gap:8px}
	header.site.is-vast .bar{padding-top:31px}
}
/* ==========================================================
   Filterpaneel op desktop: een rustig eigen vlak
   ========================================================== */
@media(min-width:901px){
	.filterpanel{
		background:var(--paper);
		border:1px solid var(--line);
		border-radius:16px;
		padding:22px 20px 24px;
	}
	.filterpanel-titel{font-size:17px;margin:0 0 2px}
	.filterpanel .resetf{margin-bottom:16px;display:inline-block}
	.filterpanel .fb-zoek input[type=search]{background:var(--surface)}
	.filterpanel .fb-groep{margin-bottom:18px}
	.filterpanel .fb-groep:last-child{margin-bottom:0}
	.fchip{background:var(--surface)}
	.fchip:hover{background:var(--wp--preset--color--teal-licht);border-color:var(--cyan)}
	.fchip.is-actief{background:var(--cyan-lg);border-color:var(--cyan-lg);color:var(--surface)}
}

/* ==========================================================
   Vier feiten per vacaturekaart: twee kolommen op breed scherm
   ========================================================== */
@media(min-width:1100px){
	.vacfeiten{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px}
	.vacfeiten .is-salaris{grid-column:auto}
}
.vacfeiten .is-sector svg{stroke:var(--cyan-lg)}

@media(min-width:900px){
	.jobrow .vacfeiten{grid-template-columns:repeat(4,auto);justify-content:start;gap:6px 20px}
}
/* ==========================================================
   BEELD OP DE VACATUREKAART - een definitie

   De foto's zijn vierkant. Op mobiel wordt de kaart een brede strook,
   en dan snijdt een uitsnede vanuit het midden precies de gezichten weg.
   Daarom ligt het zwaartepunt iets boven het midden.
   ========================================================== */
.vaccard .beeld{position:relative;background:var(--paper);min-height:0}
.vaccard .beeld img{
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:50% 32%;
	display:block;
}

@media(max-width:899px){
	.vaccard .beeld{order:-1;min-height:170px;max-height:210px;overflow:hidden}
	.vaccard .beeld img{height:100%;min-height:170px;max-height:210px;object-position:50% 28%}
}
/* ==========================================================
   PIJLKNOP OP DE VACATUREKAART - een definitie

   Alleen op desktop. Op een telefoon is de hele kaart al aantikbaar,
   dus daar voegt de knop niets toe en kost hij alleen ruimte.
   ========================================================== */
.vaccard .pijl{display:none}

@media(min-width:900px){
	.vaccard .pijl{
		position:absolute;
		left:-26px;
		top:50%;
		transform:translateY(-50%);
		z-index:2;
		display:flex;align-items:center;justify-content:center;
		padding:14px;
		border-radius:12px;
		background:var(--orange);
		box-shadow:0 6px 18px rgba(16,16,16,.18);
		transition:background .16s ease,transform .16s ease;
	}
	.vaccard .pijl svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2.2;
		stroke-linecap:round;stroke-linejoin:round}
	.vaccard:hover .pijl{background:var(--orange-lg);transform:translateY(-50%) translateX(3px)}
}
/* ==========================================================
   De hele vacaturekaart is klikbaar

   Geen tweede link om de kaart heen: dat mag niet binnen een link die
   er al is, en het zou de vacature twee keer aankondigen bij een
   schermlezer. In plaats daarvan rekt de titellink zich uit over de
   hele kaart. Er blijft dus precies een link, met de functietitel als
   naam, en overal klikken leidt naar de vacature.
   ========================================================== */
.vaccard{position:relative;cursor:pointer}
.vactitel a::after{
	content:'';
	position:absolute;
	inset:0;
	z-index:1;
}

/* Bij een uitgelichte vacature telt ook de gekleurde band mee */
.featwrap{position:relative;cursor:pointer}
.featwrap .vaccard{position:static}

/* De pijl ligt erboven, zodat hij zichtbaar blijft reageren */
.vaccard .pijl{z-index:2}

/* De kaart reageert als geheel */
.vaccard:hover{border-color:var(--orange)}
.vaccard:focus-within{outline:2px solid var(--orange-lg);outline-offset:2px}
.featwrap:focus-within{outline:2px solid var(--orange-lg);outline-offset:2px}
.vactitel a:focus-visible{outline:none}
/* ==========================================================
   KOP VAN DE VACATUREPAGINA - een definitie

   Het beeld vult het scherm en loopt door onder het menu. Titel, feiten
   en actie staan gecentreerd op het beeld. Een verloop over het beeld
   houdt witte tekst en een doorzichtig menu leesbaar, ongeacht welke
   foto er staat.
   Pas hier aan; niet onderaan de stylesheet een correctie toevoegen.
   ========================================================== */

/* Het beeld schuift precies onder de menubalk door */
body.heeft-beeldkop{--kop-hoogte:var(--balk-hoogte)}

/* De kop begint bovenaan de pagina. Dat gaat vanzelf: de menubalk staat op
   deze paginas buiten de tekstopmaak, zie de regel verderop. Er wordt dus
   niets meer omhoog geschoven met een negatieve marge, en de uitkomst hangt
   niet meer af van de precieze hoogte van die balk. */
body.heeft-beeldkop .beeldkop{margin-block-start:0}

.beeldkop{
	position:relative;
	isolation:isolate;
	display:flex;
	align-items:center;
	/* Zeventig procent van de schermhoogte. Schermvullend duwde de tekst die
	   eronder staat helemaal uit beeld; nu zie je meteen dat er meer is. */
	min-height:70vh;
	min-height:70svh;
	background:var(--ink);
}

.beeldkop__bg{
	position:absolute;
	inset:0;
	z-index:-2;
	width:100%;
	height:100%;
	object-fit:cover;
	/* Zonder brandpunt valt hij terug op het midden; met brandpunt wint de
	   inline stijl die per afbeelding is berekend. */
	object-position:50% 50%;
}

/* Vlakke donkere laag over het hele beeld. Welke foto er ook staat, het
   menu en de tekst erop blijven zichtbaar. */
.beeldkop::before{
	content:'';
	position:absolute;
	inset:0;
	z-index:-1;
	pointer-events:none;
	background:rgba(12,20,24,.32);
}

/* Daarbovenop een verloop dat naar onderen toe donkerder wordt, voor de
   titel, de feiten en de knoppen. Samen met de vlakke laag komt dat
   bovenin op ongeveer een derde en onderin op tweederde dekking. */
.beeldkop::after{
	content:'';
	position:absolute;
	inset:0;
	z-index:-1;
	pointer-events:none;
	background:linear-gradient(180deg,
		rgba(12,20,24,0) 0%,
		rgba(12,20,24,.08) 18%,
		rgba(12,20,24,.34) 48%,
		rgba(12,20,24,.50) 100%);
}

/* Onder de knoppen ruimte tot de golf. Die golf ligt veertig pixels over het
   beeld heen, dus de ruimte die je ziet is deze waarde min veertig. */
body.single-sjr_vacature .beeldkop__midden{padding-top:calc(var(--kop-hoogte, 0px) + 55px);padding-bottom:96px}

.beeldkop__midden{
	width:100%;
	padding:calc(var(--kop-hoogte, 0px) + 40px) 0 52px;
	text-align:center;
	color:#fff;
}
.beeldkop__midden > .wrap{max-width:900px;padding-left:30px;padding-right:30px}

.beeldkop__lab{
	margin:0 0 10px;
	font-size:12px;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--cyan);
}
.beeldkop h1{
	margin:0;
	color:#fff;
	font-size:clamp(28px,5vw,52px);
	line-height:1.12;
}
.beeldkop__intro{
	margin:16px auto 0;
	max-width:58ch;
	color:rgba(255,255,255,.92);
	font-size:clamp(15.5px,1.6vw,18px);
	line-height:1.6;
}

/* Feiten naast elkaar, met icoon */
.beeldkop__feiten{
	list-style:none;
	margin:26px 0 0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:10px 28px;
}
.beeldkop__feiten li{display:inline-flex;align-items:center;gap:9px;font-size:15.5px;font-weight:600;color:#fff}
.beeldkop__feiten svg{flex:none;width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;
	stroke-linecap:round;stroke-linejoin:round}

.beeldkop__acties{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 18px;margin-top:30px}
.beeldkop__acties .btn.orange{min-width:230px;padding:15px 34px;font-size:16.5px;justify-content:center}
.beeldkop__wa{
	color:#fff;
	font-family:var(--font-head);
	font-weight:700;
	font-size:14.5px;
	text-decoration:none;
	border-bottom:1px solid rgba(255,255,255,.55);
	padding-bottom:2px;
	white-space:nowrap;
}
.beeldkop__wa:hover,.beeldkop__wa:focus-visible{color:var(--orange);border-color:var(--orange)}


@media(max-width:600px){
	.beeldkop__midden{padding-bottom:44px}
	body.single-sjr_vacature .beeldkop__midden{padding-bottom:84px}
	.beeldkop__acties{width:100%}
	.beeldkop__acties .btn.orange{width:100%;min-width:0;padding:14px 24px;font-size:16px}
	.beeldkop__wa{font-size:13.5px}
}

/* ==========================================================
   Menu boven een doorlopend beeld

   Zonder eigen achtergrond, met witte tekst en het witte logo. Zodra de
   bezoeker scrollt zet het script de klasse is-vast en wordt het menu
   weer een gewone balk.
   ========================================================== */
/* Buiten de opmaakstroom, zodat het beeld eronder doorloopt tot de
   bovenrand van het scherm. De balk is hier het eerste element van de
   pagina, dus vast en plakkend komen op hetzelfde neer. */
body.heeft-beeldkop header.site{
	position:fixed;
	left:0;
	right:0;
	top:0;
	background:transparent;
	box-shadow:none;
	transition:background .25s ease,box-shadow .25s ease;
}
body.heeft-beeldkop header.site.is-vast{background:var(--surface);box-shadow:0 1px 0 var(--line)}

/* De beheerbalk van WordPress duwt de pagina omlaag met een marge op html.
   Een vaste balk trekt zich daar niets van aan en begint dus hoger dan op
   de overige paginas. Alleen zolang er niet gescrolld is: zodra de balk
   meeschuift hoort hij op nul, want daar staat hij elders ook.
   Alleen zichtbaar voor wie is ingelogd. Onder 601 pixels scrollt de
   beheerbalk gewoon mee en valt er niets te verrekenen. */
@media screen and (min-width:783px){
	body.admin-bar.heeft-beeldkop header.site:not(.is-vast){top:32px}
}
@media screen and (min-width:601px) and (max-width:782px){
	body.admin-bar.heeft-beeldkop header.site:not(.is-vast){top:46px}
}

/* Geen verrekening voor de beheerbalk van WordPress. Op de overige paginas
   plakt de balk bij het scrollen ook op nul en dus deels onder die
   beheerbalk; hier verrekenen zou dit de enige pagina maken die het anders
   doet. Een bezoeker heeft die balk niet en ziet overal hetzelfde. */

/* Zolang de balk doorzichtig is staat de menutekst op de foto. Wit dus,
   en een gekleurd vlak onder het belicoon zodat dat niet wegvalt.
   Alleen de bovenste laag: de links in de uitklapmenu's staan op een wit
   vlak en houden hun donkere kleur. Zodra de balk wit wordt, valt dit
   allemaal weg. */
body.heeft-beeldkop header.site:not(.is-vast) .links .navitem > a{color:#fff}
body.heeft-beeldkop header.site:not(.is-vast) .links .navitem > a:hover,
body.heeft-beeldkop header.site:not(.is-vast) .links .navitem > a:focus-visible{
	background:rgba(255,255,255,.18);
	color:#fff;
}
body.heeft-beeldkop header.site:not(.is-vast) .icon-link{
	background:var(--cyan);
	border-color:var(--cyan);
	color:var(--ink);
}
body.heeft-beeldkop header.site:not(.is-vast) .icon-link:hover,
body.heeft-beeldkop header.site:not(.is-vast) .icon-link:focus-visible{
	background:var(--cyan-lg);
	border-color:var(--cyan-lg);
	color:var(--ink);
}

/* Alleen de balk wordt doorzichtig. Logo, navigatie en knoppen houden hun
   eigen kleuren. */

/* Het menu blijft ook hier in beeld. Het script zet is-vast zodra er
   gescrolld wordt, waarna de balk wit is. */

@media (prefers-reduced-motion:reduce){
	body.heeft-beeldkop header.site{transition:none}
}
/* --- Inhoud met zijbalk -------------------------------------- */
/* Hoogte en ondermarge van de terugknop staan hier, zodat de zijkolom er
   precies mee kan rekenen. */
.wrap.detail{--terug-hoogte:40px;--terug-marge:18px}
.wrap.detail{display:grid;grid-template-columns:1fr;gap:34px;
	padding:44px 30px 16px}
/* De weg terug boven de functieomschrijving: donkere tekst op wit */
.terugknop{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin:0 0 var(--terug-marge, 18px);
	height:var(--terug-hoogte, 40px);
	box-sizing:border-box;
	padding:0 15px;
	border:1.5px solid var(--line);
	border-radius:9px;
	background:transparent;
	color:var(--ink);
	font-family:var(--font-head);
	font-weight:700;
	font-size:14.5px;
	line-height:1.2;
	text-decoration:none;
	transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.terugknop:hover,.terugknop:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.terugknop svg{flex:none;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
	stroke-linecap:round;stroke-linejoin:round}
.detailkop{font-size:clamp(21px,2.4vw,27px);margin:0 0 14px;color:var(--ink)}
.dmain h2{font-size:clamp(19px,2vw,23px);margin:28px 0 10px;color:var(--ink)}
.dmain p{color:var(--grey);line-height:1.7}
/* Opsommingen krijgen een vinkje in plaats van een bolletje */
.dmain ul{margin:0 0 8px;padding-left:0;list-style:none}
.dmain li{position:relative;color:var(--grey);line-height:1.65;padding:3px 0 3px 30px}
.dmain li::before{
	content:'';
	position:absolute;
	left:3px;
	top:1.05em;
	width:11px;
	height:6px;
	border-left:2.4px solid var(--cyan-lg);
	border-bottom:2.4px solid var(--cyan-lg);
	transform:translateY(-50%) rotate(-45deg);
}
.dmain ol{color:var(--grey)}
.dmain ol li{padding-left:0}
.dmain ol li::before{content:none}

@media(min-width:900px){
	.wrap.detail{grid-template-columns:1fr 340px;gap:48px;align-items:start;padding:52px 30px 16px}
	.dside{
		position:sticky;
		top:calc(var(--balk-hoogte) + 26px);
		align-self:start;
		/* De tekstkolom begint met de terugknop; die ruimte moet de kaart ook
		   nemen. Daarvan gaat de eigen bovenlucht van de kaart weer af, zodat
		   de kop erin op dezelfde lijn staat als Functieomschrijving. */
		margin-top:calc(var(--terug-hoogte) + var(--terug-marge) - var(--kaart-lucht));
	}
}

/* De vacaturetekst staat op wit: rustiger te lezen dan op een kleurvlak */
.wrap.detail{background:var(--surface)}
/* Uitlijning van de vacaturepagina: alles op dezelfde lijn als de kop.
   Basis eerst, daarna het bredere scherm. */
.wrap.detail{padding:44px 30px 48px}

@media(min-width:900px){
	.wrap.detail{padding:52px 30px 64px}
}
/* ==========================================================
   Zijkolom van de vacaturepagina: alles in een kaart

   Een naslagblok, geen tweede plek voor dezelfde actie. De knoppen
   staan in de kop van de pagina en in de zwevende knop.
   Pas hier aan; geen correctie onderaan de stylesheet.
   ========================================================== */
.dside{--kaart-lucht:20px}
/* Vijftien pixels onder de kaart, zodat de sectie niet tegen wat eronder
   komt aanplakt. */
.dside-card{margin-bottom:15px}
.dside-card{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--r);
	padding:var(--kaart-lucht,20px) 22px 22px;
	box-shadow:0 10px 30px rgba(26,26,26,.06);
}
.kort-titel{
	margin:0 0 14px;
	font-family:var(--font-head);
	font-size:clamp(21px,2.4vw,27px);
	font-weight:800;
	line-height:1.2;
	color:var(--ink);
}
.dside-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;column-gap:16px}
.dside-card dt{padding:10px 0;font-size:13.5px;color:var(--grey);border-top:1px solid var(--line)}
.dside-card dd{margin:0;padding:10px 0;font-size:14.5px;font-weight:700;color:var(--ink);text-align:right;border-top:1px solid var(--line)}
.dside-card dt:first-of-type,.dside-card dd:first-of-type{border-top:0;padding-top:0}

/* Actie in de kaart: de knop staat onder de feiten, boven het delen */
.dside-actie{margin:24px 0 0;padding-top:22px;border-top:1px solid var(--line);display:grid;gap:14px}
.dside-wa{
	text-align:center;
	font-family:var(--font-head);
	font-weight:700;
	font-size:13.5px;
	color:var(--cyan-tx);
	text-decoration:none;
}
.dside-wa:hover,.dside-wa:focus-visible{color:var(--ink)}

/* Deelknoppen onder een haarlijn, met icoon en tekst */
.share{margin:24px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.deel-label{
	display:block;
	margin:0 0 10px;
	font-size:11.5px;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--cyan-tx);
}
.deellijst{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.deellijst a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:42px;
	height:42px;
	border:1.5px solid var(--line);
	border-radius:10px;
	color:var(--ink);
	text-decoration:none;
	transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.deellijst a:hover,.deellijst a:focus-visible{
	border-color:var(--cyan-lg);
	background:var(--wp--preset--color--teal-licht);
	color:var(--cyan-tx);
}
.deellijst svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media (prefers-reduced-motion:reduce){
	.deellijst a{transition:none}
}

/* ==========================================================
   Open sollicitatie: verhaal links, formulier rechts

   Warme band zoals de vacaturesectie op de homepage, met het formulier
   in een witte kaart ernaast. Een definitie plus een aanpassing per
   schermbreedte; pas hier aan.
   ========================================================== */
.openso{background:var(--mt-warm)}
.openso__grid{
	display:grid;
	grid-template-columns:1fr;
	gap:28px;
	max-width:1180px;
	padding:52px 30px 64px;
}
.openso__lab{
	margin:0;
	font-size:12px;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--cyan-tx);
}
.openso h1{
	margin:8px 0 0;
	font-size:clamp(26px,3.4vw,40px);
	line-height:1.15;
	color:var(--ink);
}
.openso .intro{
	margin:14px 0 0;
	max-width:46ch;
	color:var(--grey);
	font-size:16.5px;
	line-height:1.65;
}
/* Dezelfde vinkjes als in de vacaturetekst */
.openso__punten{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.openso__punten li{position:relative;padding-left:30px;color:var(--ink);font-weight:600;line-height:1.5}
.openso__punten li::before{
	content:'';
	position:absolute;
	left:3px;
	top:.75em;
	width:11px;
	height:6px;
	border-left:2.4px solid var(--cyan-lg);
	border-bottom:2.4px solid var(--cyan-lg);
	transform:translateY(-50%) rotate(-45deg);
}
.openso__kaart{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--r);
	padding:26px 24px 28px;
	box-shadow:0 12px 34px rgba(26,26,26,.07);
}
.openso__kaartkop{
	margin:0 0 16px;
	font-family:var(--font-head);
	font-size:19px;
	font-weight:800;
	color:var(--ink);
}
/* Het formulierblok brengt zijn eigen vlak mee; hier is de kaart dat al */
.openso .formwrap-inner{background:none;padding:0}

@media(min-width:900px){
	.openso__grid{
		grid-template-columns:1fr 1fr;
		gap:56px;
		align-items:start;
		padding:76px 44px 92px;
	}
	.openso__kaart{padding:30px 30px 32px}
}

/* ==========================================================
   Werkgeverspagina

   Vier banden in het ritme van de site: donkere kop, wit, warm met de
   diensten, en teal-licht met het formulier. Een definitie plus een
   aanpassing per schermbreedte; pas hier aan.
   ========================================================== */

.wgintro > .wrap{padding:56px 30px 48px;max-width:var(--paginabreedte,1280px)}
.wgintro h2{margin:0;font-size:clamp(21px,2.6vw,30px);line-height:1.2;max-width:22ch}
.wgintro p{margin:16px 0 0;max-width:70ch;color:var(--grey);font-size:16.5px;line-height:1.7}

.wgdiensten{background:var(--mt-warm)}
.wgdiensten > .wrap{padding:56px 30px 64px;max-width:var(--paginabreedte,1280px)}
.wgdiensten h2{margin:0;font-size:clamp(21px,2.6vw,30px);line-height:1.2}
.diensten{display:grid;grid-template-columns:1fr;gap:14px;margin-top:26px}
/* Elke kaart een accentlijn boven, om en om in de twee merkkleuren */
.dienst{
	background:var(--surface);
	border:1px solid var(--line);
	border-top:3px solid var(--cyan);
	border-radius:var(--r);
	padding:22px 22px 24px;
}
.dienst:nth-child(even){border-top-color:var(--orange)}
/* Reactie op de muis: de kaart komt iets omhoog en de rand kleurt mee.
   Geen kaart is een link, dus dit is een teken van aandacht, niet van
   klikbaarheid; daarom subtiel gehouden. */
.dienst,.kpi{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.dienst:hover,.kpi:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(26,26,26,.10);border-color:var(--cyan)}
@media (prefers-reduced-motion:reduce){
	.dienst,.kpi{transition:none}
	.dienst:hover,.kpi:hover{transform:none}
}
.dienst h3{margin:0;font-size:17px;font-weight:800;color:var(--ink);line-height:1.3}
.dienst p{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:var(--grey)}
.wgnoot{margin:22px 0 0;font-size:13.5px;color:var(--grey)}

/* De knop in de kop springt hierheen. Met een vaste menubalk zou de kop van
   deze sectie anders onder die balk verdwijnen. */
.wgform{background:var(--wp--preset--color--teal-licht);scroll-margin-top:calc(var(--balk-hoogte) + 20px)}
/* Bij een sprong naar de diensten mag de vaste balk de kop niet afdekken. */
.wgdiensten{scroll-margin-top:calc(var(--balk-hoogte) + 20px)}
.wgform > .wrap{max-width:var(--paginabreedte,1280px);padding:56px 30px 68px}

.wgform h2{margin:8px 0 0;font-size:clamp(21px,2.6vw,30px);line-height:1.2}
.wgform .intro{margin:16px 0 0;max-width:52ch;color:var(--grey);font-size:16.5px;line-height:1.65}
.wgform__kaart{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--r);
	padding:26px 24px 28px;
	box-shadow:0 12px 34px rgba(26,26,26,.07);
}
.wgform__kaart .btn{margin-top:20px}

@media(min-width:700px){
	.diensten{grid-template-columns:repeat(2,1fr)}
}

@media(min-width:1000px){
	.wgintro > .wrap{padding:72px 30px 60px}
	.wgdiensten > .wrap{padding:72px 30px 84px}
	.diensten{grid-template-columns:repeat(4,1fr);gap:16px}
	.wgform > .wrap{padding:76px 30px 88px}
	.wgform__kaart{padding:30px 30px 32px}
}

/* ==========================================================
   Kengetallen

   Drie kaarten naast elkaar, accentlijn om en om in de twee
   merkkleuren. Gebruikt op Over ons en op Werkgevers.
   ========================================================== */
.kpis{display:grid;grid-template-columns:1fr;gap:14px;margin-top:26px}
.kpi{
	background:var(--surface);
	border:1px solid var(--line);
	border-top:3px solid var(--cyan);
	border-radius:var(--r);
	padding:22px 22px 24px;
}
.kpi:nth-child(even){border-top-color:var(--orange)}
.kpi b{
	display:block;
	margin-bottom:10px;
	font-family:var(--font-head);
	font-size:38px;
	font-weight:800;
	line-height:1;
	color:var(--ink);
}
.kpi span{display:block;color:var(--grey);font-size:14.5px;line-height:1.55}
.kpis__lab{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-tx)}

@media(min-width:700px){
	.kpis{grid-template-columns:repeat(3,1fr);gap:16px}
}

/* ==========================================================
   Paginakop met beeld

   In gebruik op Over ons. Zelfde opbouw als de werkgeverskop: foto,
   donkere laag, witte tekst.
   ========================================================== */


@media(min-width:1000px){
}

/* ==========================================================
   Artikelpagina

   Een pagina, geen blog. Smalle kolom voor leesbaarheid: regellengte
   onder de 75 tekens, zoals in de design tokens staat.
   ========================================================== */
.artikel__in{max-width:760px;padding:52px 30px 72px}
.artikel__datum{margin:0;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--cyan-tx)}
.artikel h1{margin:10px 0 0;font-size:clamp(27px,3.6vw,40px);line-height:1.15;color:var(--ink)}
.artikel__intro{margin:18px 0 0;font-size:18px;line-height:1.6;color:var(--ink)}
.artikel__beeld{display:block;width:100%;height:auto;margin:30px 0 0;border-radius:var(--r)}
.artikel__tekst{margin-top:30px}
.artikel__tekst p{margin:0 0 18px;color:var(--grey);font-size:16.5px;line-height:1.75}
.artikel__tekst h2{margin:34px 0 12px;font-size:clamp(19px,2.2vw,24px);line-height:1.25;color:var(--ink)}
/* Zelfde vinkjes als in de vacaturetekst */
.artikel__tekst ul{margin:0 0 18px;padding:0;list-style:none}
.artikel__tekst li{position:relative;padding:3px 0 3px 30px;color:var(--grey);line-height:1.65}
.artikel__tekst li::before{
	content:'';
	position:absolute;
	left:3px;
	top:1.05em;
	width:11px;
	height:6px;
	border-left:2.4px solid var(--cyan-lg);
	border-bottom:2.4px solid var(--cyan-lg);
	transform:translateY(-50%) rotate(-45deg);
}
.artikel__slot{margin:34px 0 0;padding-top:28px;border-top:1px solid var(--line)}

@media(min-width:900px){
	.artikel__in{padding:72px 30px 92px}
}

/* ==========================================================
   Paginakop zonder beeld, tekstpagina en slotoproep

   Gebruikt op contact, de dienstpagina's en de juridische pagina's.
   De sectorpagina's gebruiken de beeldkop hierboven.
   ========================================================== */
.paginakop{background:var(--ink);color:#fff}
.paginakop > .wrap{max-width:var(--paginabreedte,1280px);padding:60px 30px 64px}
.paginakop__lab{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.paginakop h1{margin:10px 0 0;color:#fff;font-size:clamp(27px,4.2vw,42px);line-height:1.14;max-width:20ch}
.paginakop__intro{margin:18px 0 0;max-width:58ch;color:rgba(255,255,255,.86);font-size:16.5px;line-height:1.65}
.paginakop__acties{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:26px}
.paginakop__bel{color:#fff;font-family:var(--font-head);font-weight:700;font-size:14.5px;text-decoration:none;
	border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:2px}
.paginakop__bel:hover,.paginakop__bel:focus-visible{color:var(--orange);border-color:var(--orange)}

/* Leeskolom voor lopende tekst. Gebruikt dezelfde typografie als het
   artikel, dus daar staan de regels voor koppen en opsommingen. */
.tekstpagina > .wrap{max-width:var(--paginabreedte,1280px);padding:52px 30px 68px}
.tekstpagina .artikel__tekst{max-width:74ch}
/* Een regel boven de kop die zegt waar de pagina over gaat. Zelfde opzet als
   het label boven de sectiekoppen elders, zodat het overal hetzelfde leest. */
/* Het bovenkopje boven een sectiekop. Drie klassen omdat ze in de opmaak zo
   heten; de omliggende secties staan erbij omdat hun alinearegel anders
   wint op kleur en grootte. */
.overintro .tekstpagina__tagline,
.wgintro .wgdiensten__lab,
.wgform .wgdiensten__lab,
.wgdiensten .wgdiensten__lab,
.artikel__tekst .tekstpagina__tagline,
.wgdiensten__lab,
.wgform__lab,
.tekstpagina__tagline{
	margin:0 0 10px;
	font-family:var(--font-body);
	font-weight:700;
	font-size:12px;
	letter-spacing:.08em;
	text-transform:uppercase;
	line-height:1.6;
	color:var(--cyan-tx);
}
.artikel__tekst .tekstpagina__tagline + h2,
.tekstpagina__tagline + h2{margin-top:0}
.tekstpagina .artikel__tekst > h2:first-child{
	margin-top:0;
	font-size:clamp(21px,2.6vw,30px);
	line-height:1.2;
}
.tekstpagina .artikel__tekst{margin-top:0}

/* Slotoproep onder aan een pagina */
.slotcta{background:var(--wp--preset--color--teal-licht);text-align:center}
.slotcta > .wrap{max-width:760px;padding:56px 30px 64px}
.slotcta h2{margin:0;font-size:clamp(21px,2.6vw,30px);line-height:1.2}
.slotcta p{margin:14px auto 0;max-width:56ch;color:var(--grey);font-size:16.5px;line-height:1.65}
.slotcta__knoppen{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;margin-top:26px}

@media(min-width:1000px){
	.paginakop > .wrap{padding:84px 30px 88px}
	.tekstpagina > .wrap{padding:72px 30px 88px}
	.slotcta > .wrap{padding:72px 30px 80px}
}

/* ==========================================================
   Diensten op de homepage: een compacte index

   Alleen de naam en een pijl. De omschrijving staat op de
   werkgeverspagina en op de dienstpagina zelf; die twee keer herhalen
   maakt de homepage lang zonder iets toe te voegen.
   ========================================================== */
/* Wit vlak, een kop, links uitgelijnd. De link naar de volledige
   dienstverlening staat ernaast en zakt eronder als de ruimte op is. */
/* Zelfde breedte en zijmarge als de reviews eronder, zodat de koppen op
   een lijn staan */
.homediensten > .wrap{max-width:1280px;padding:56px 30px 64px}
.homediensten h2{margin:0;font-size:clamp(21px,2.6vw,30px);line-height:1.2;text-align:left}
.dienstkop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px;text-align:left}
.dienstkop .all{
	font-family:var(--font-head);
	font-weight:700;
	font-size:14.5px;
	color:var(--cyan-tx);
	text-decoration:none;
	border-bottom:1px solid var(--cyan);
	padding-bottom:2px;
}
.dienstkop .all:hover,.dienstkop .all:focus-visible{color:var(--ink);border-color:var(--ink)}

.dienstlinks{display:grid;grid-template-columns:1fr;gap:10px;margin-top:24px}
.dienstlink{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:14px;
	padding:16px 18px;
	background:var(--surface);
	border:1px solid var(--line);
	border-left:3px solid var(--cyan);
	border-radius:var(--r);
	font-family:var(--font-head);
	font-weight:700;
	font-size:15.5px;
	color:var(--ink);
	text-decoration:none;
	transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease;
}
.dienstlink:nth-child(even){border-left-color:var(--orange)}
.dienstlink svg{flex:none;width:18px;height:18px;margin-top:2px;stroke:var(--cyan-tx);fill:none;stroke-width:2;
	stroke-linecap:round;stroke-linejoin:round;transition:transform .16s ease}
.dienstlink:hover,.dienstlink:focus-visible{border-color:var(--cyan-lg);box-shadow:0 8px 20px rgba(26,26,26,.08)}
.dienstlink:hover svg,.dienstlink:focus-visible svg{transform:translateX(3px)}

@media(min-width:700px){
	.dienstlinks{grid-template-columns:repeat(2,1fr);gap:12px}
}

@media(min-width:1000px){
	.dienstlinks{grid-template-columns:repeat(4,1fr)}
	.homediensten > .wrap{padding:64px 30px 72px}
}

@media (prefers-reduced-motion:reduce){
	.dienstlink,.dienstlink svg{transition:none}
	.dienstlink:hover svg{transform:none}
}

/* ==========================================================
   Secties op de homepage: een breedte, een linkerlijn

   Alles staat op 1280 breed met dezelfde zijmarge, zodat de koppen
   van alle secties onder elkaar op dezelfde lijn beginnen. De hero is
   de uitzondering: die loopt bewust breder door.
   ========================================================== */
.cats.wrap,.latest.wrap,.routes .inner,.homediensten > .wrap,.mt-cta .wrap,
.mt-reviews__inner{max-width:1280px}

@media(max-width:700px){
	/* Op een smal scherm is 30 pixels te veel weggegooide ruimte */
	.cats.wrap,.latest.wrap,.routes .inner,.homediensten > .wrap,.mt-cta .wrap,
	.mt-reviews__inner{padding-left:18px;padding-right:18px}
}

/* ==========================================================
   Diensten op de werkgeverspagina

   Geen acht omkaderde blokken naast elkaar: dat werd een muur van
   tekst in smalle kolommen. Twee brede kolommen, een icoon als anker
   en verder alleen wit eromheen. De kaarten met rand blijven voor de
   voordelen op de sectorpaginas, waar de teksten kort zijn.
   ========================================================== */
.dienstblokken{display:grid;grid-template-columns:1fr;gap:32px;margin-top:30px}
/* De blokken vullen de hoogte van hun rij en de verwijzing zakt naar
   onderen. Zonder dat staat een blok met verwijzing hoger dan een blok
   zonder, en loopt de rij scheef. */
.dienstblok{display:flex;gap:16px;align-items:stretch;height:100%}
.dienstblok__tekst{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.dienstblok__icoon{
	flex:none;
	align-self:flex-start;
	width:46px;
	height:46px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:12px;
	background:var(--surface);
	border:1px solid var(--line);
	color:var(--cyan-tx);
}
.dienstblok:nth-child(even) .dienstblok__icoon{color:var(--orange-tx)}
.dienstblok__icoon{transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
.dienstblok:hover .dienstblok__icoon{
	background:var(--wp--preset--color--teal-licht);
	border-color:var(--cyan);
	transform:translateY(-2px);
}
.dienstblok:nth-child(even):hover .dienstblok__icoon{
	background:#FDF1E3;
	border-color:var(--orange);
}
.dienstblok:hover .dienstblok__meer{color:var(--ink);border-color:var(--ink)}
@media (prefers-reduced-motion:reduce){
	.dienstblok__icoon{transition:none}
	.dienstblok:hover .dienstblok__icoon{transform:none}
}
.dienstblok__icoon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;
	stroke-linecap:round;stroke-linejoin:round}
.dienstblok h3{margin:3px 0 0;font-family:var(--font-head);font-size:17px;font-weight:800;line-height:1.3;color:var(--ink)}
.dienstblok p{margin:8px 0 0;font-size:14.5px;line-height:1.65;color:var(--grey)}
.dienstblok__meer{
	align-self:flex-start;
	margin-top:auto;
	padding-top:12px;
	font-family:var(--font-head);
	font-weight:700;
	font-size:13.5px;
	color:var(--cyan-tx);
	text-decoration:none;
	border-bottom:1px solid var(--cyan);
	padding-bottom:1px;
}
.dienstblok__meer:hover,.dienstblok__meer:focus-visible{color:var(--ink);border-color:var(--ink)}

@media(min-width:820px){
	.dienstblokken{grid-template-columns:repeat(2,1fr);gap:36px 52px;margin-top:34px}
}

/* ==========================================================
   404

   Een doodlopende pagina is een verloren kandidaat. Daarom geen kale
   melding maar vier wegen terug: de drie sectoren en de open
   sollicitatie, plus telefoon en mail.
   ========================================================== */
.vierhonderdvier{background:var(--surface)}
.vierhonderdvier > .wrap{max-width:1280px;padding:64px 30px 80px}
.vierhonderdvier__code{
	margin:0;
	font-family:var(--font-head);
	font-weight:700;
	font-size:13px;
	letter-spacing:.14em;
	color:var(--cyan-tx);
}
.vierhonderdvier h1{margin:10px 0 0;font-size:clamp(28px,4.6vw,46px);line-height:1.12;max-width:16ch}
.vierhonderdvier__intro{margin:16px 0 0;max-width:56ch;color:var(--grey);font-size:16.5px;line-height:1.65}
.vierhonderdvier__acties{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:26px}

.vierhonderdvier__wegen{display:grid;grid-template-columns:1fr;gap:10px;margin-top:40px}
.vierhonderdvier__wegen a{
	display:flex;
	flex-direction:column;
	gap:3px;
	padding:16px 18px;
	background:var(--surface);
	border:1px solid var(--line);
	border-left:3px solid var(--cyan);
	border-radius:var(--r);
	text-decoration:none;
	transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.vierhonderdvier__wegen a:nth-child(even){border-left-color:var(--orange)}
.vierhonderdvier__wegen span{font-family:var(--font-head);font-weight:700;font-size:15.5px;color:var(--ink)}
.vierhonderdvier__wegen small{font-size:13.5px;color:var(--grey);line-height:1.5}
.vierhonderdvier__wegen a:hover,.vierhonderdvier__wegen a:focus-visible{
	border-color:var(--cyan-lg);
	box-shadow:0 8px 20px rgba(26,26,26,.08);
	transform:translateY(-2px);
}
.vierhonderdvier__hulp{margin:30px 0 0;color:var(--grey);font-size:15px}
.vierhonderdvier__hulp a{color:var(--cyan-tx);font-weight:600}

@media(min-width:700px){
	.vierhonderdvier__wegen{grid-template-columns:repeat(2,1fr);gap:12px}
}

@media(min-width:1000px){
	.vierhonderdvier > .wrap{padding:88px 30px 100px}
	.vierhonderdvier__wegen{grid-template-columns:repeat(4,1fr)}
}

@media (prefers-reduced-motion:reduce){
	.vierhonderdvier__wegen a{transition:none}
	.vierhonderdvier__wegen a:hover{transform:none}
}

/* ==========================================================
   Feitenbalk onder de beeldkop van een vacature

   Salaris, uren, dienstverband, opleiding en plaats. Wat ontbreekt komt
   er niet te staan, dus het aantal vakken verschilt per vacature; daarom
   een flexrij en geen vast raster.
   ========================================================== */
.feitbalk{background:var(--wp--preset--color--teal-licht);position:relative;z-index:1}

/* De golven. Boven loopt de band het beeld in, onder snijdt hij af tegen de
   witte tekstsectie. Vormen in de opmaak en geen achtergrondafbeelding, dus
   ze schalen mee met elke schermbreedte. */
.feitbalk__golf{display:block;width:100%;height:40px}
.feitbalk__golf--boven{margin-top:-40px;fill:var(--wp--preset--color--teal-licht)}
.feitbalk__golf--onder{margin-bottom:-1px;fill:var(--surface)}
.feitbalk > .wrap{max-width:1280px;padding:24px 30px 20px}
.feitbalk__binnen{
	display:flex;
	flex-wrap:wrap;
	/* De ruimte gaat tussen de feiten in plaats van erin, zodat de eerste
	   links en de laatste rechts op de lijn van de pagina staat. */
	justify-content:space-between;
	gap:14px 24px;
}
.feitbalk__feit{flex:0 1 auto;min-width:0}
.feitbalk__tekst{display:flex;flex-direction:column;gap:7px;min-width:0}
.feitbalk__label{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:rgba(26,26,26,.66);white-space:nowrap}
.feitbalk__waarde{font-family:var(--font-head);font-weight:700;font-size:14.5px;line-height:1.3;color:var(--ink)}

@media(max-width:1000px){
	.feitbalk__binnen{justify-content:flex-start}
	.feitbalk__feit{flex:1 1 30%}
}

@media(max-width:620px){
	.feitbalk > .wrap{padding:24px 18px}
	.feitbalk__binnen{gap:14px 20px;justify-content:flex-start}
	/* Twee per rij. De salarisregel is de langste en krijgt daarom de
	   volle breedte, anders breekt die midden in het bedrag af. */
	.feitbalk__feit{flex:1 1 calc(50% - 10px);min-width:0}
	.feitbalk__feit:first-child{flex:1 1 100%}
}

/* Twee banden onder elkaar met dezelfde opzet: de tweede op wit, zodat er
   verschil blijft tussen de kernwaarden en de cijfers. */
.wgdiensten.paper{background:var(--surface)}

/* De adviessectie is een oproep geworden in plaats van een formulier naast
   tekst; het formulier zit nu in het venster. Gecentreerd, want er staat
   niets meer naast. */
.wgform__mid{max-width:620px;margin:0 auto;text-align:center}
.wgform__mid h2{margin:0;font-size:clamp(21px,2.6vw,30px);line-height:1.2}
.wgform__mid .intro{margin:14px auto 0;max-width:58ch;color:var(--grey);font-size:16.5px;line-height:1.7}
.wgform__acties{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 20px;margin-top:26px}
.wgform__bel{
	font-family:var(--font-head);
	font-weight:700;
	font-size:14.5px;
	color:var(--ink);
	text-decoration:none;
	border-bottom:1px solid var(--line);
	padding-bottom:2px;
}
.wgform__bel:hover,.wgform__bel:focus-visible{color:var(--orange-tx);border-color:var(--orange)}

/* Invoervelden in het venster iets minder hoog; vier velden onder elkaar
   werden anders een lange kolom. */
.sjr-dialoog .field input[type=text],
.sjr-dialoog .field input[type=tel],
.sjr-dialoog .field input[type=email]{padding:10px 12px;font-size:15.5px}
.sjr-dialoog .field textarea{padding:10px 12px;font-size:15.5px;min-height:88px}
.sjr-dialoog .field{margin-bottom:12px}
.sjr-dialoog .field label{margin-bottom:5px}

/* Algemene voorwaarden en privacybeleid onderaan, naast de copyright.
   Daar zoekt een bezoeker ze, en in de kolom Over ons stonden ze tussen
   links die wel over het bedrijf gaan. */
.foot-juridisch{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0}
.foot-juridisch a{white-space:nowrap}

/* Een regel onder de naam, zodat je op de homepage al ziet waar een dienst
   over gaat. De tekst komt van de dienstpagina zelf. */
.dienstlink__tekst{display:flex;flex-direction:column;gap:4px;min-width:0}
.dienstlink__naam{font-family:var(--font-head);font-weight:700;font-size:15.5px;line-height:1.25}
.dienstlink__sub{font-family:var(--font-body);font-weight:400;font-size:13px;line-height:1.5;color:var(--grey)}

/* Het beeld van de vacature in plaats van een sectoricoon. Breder dan het
   icoonvlak, want een foto op 52 bij 52 is geen foto meer. */
.jobrow .thumb--beeld{
	flex:none;
	width:104px;
	height:78px;
	border-radius:12px;
	overflow:hidden;
	background:var(--paper);
	box-shadow:none;
}
.jobrow .thumb--beeld img{width:100%;height:100%;object-fit:cover;display:block}
.jobrow.is-uitgelicht .thumb--beeld{background:var(--paper)}

@media(max-width:900px){
	.jobrow .thumb--beeld{width:84px;height:64px;border-radius:10px}
}

@media(max-width:600px){
	/* Het icoon verdwijnt hier, maar een foto is juist op een telefoon het
	   snelste onderscheid tussen twee vacatures. */
	.jobrow .thumb--beeld{display:block;grid-area:icoon;width:64px;height:52px}
}

/* Bij scrollen naar beneden schuift de balk weg, bij scrollen omhoog komt
   hij terug. De overgang is kort: langer voelt als vertraging. */
header.site{transition:transform .22s ease}
header.site.is-weg{transform:translateY(-100%)}
/* De witte achtergrond hoort bij een balk die in beeld staat. Tijdens het
   wegschuiven vervaagt hij mee, anders licht hij nog even op. */
header.site{transition:transform .26s ease,background-color .2s ease,box-shadow .2s ease}
header.site.is-weg{transition-duration:.16s}
header.site.is-weg{background:transparent;box-shadow:none}
@media (prefers-reduced-motion:reduce){
	header.site{transition:none}
}

/* Bekijk ook deze vacatures: de chip Uitgelicht duwde de titel van die ene
   kaart omlaag, zodat de drie titels en daarmee alle feiten eronder niet
   meer op een lijn stonden. Elke kaart reserveert nu dezelfde hoogte,
   ook zonder chip. */
.simgrid .vaccard .info{--chiphoogte:27px}
.simgrid .vacmerk{margin:0 0 10px;height:var(--chiphoogte)}
.simgrid .vaccard .info > .vactitel:first-child{margin-top:calc(var(--chiphoogte) + 10px)}

/* ==========================================================
   Sollicitatieformulier in een venster
   ========================================================== */

/* Cv-vak compacter: de uitleg staat naast het icoon in plaats van eronder,
   zodat het vak niet hoger is dan een invoerveld. */
/* Zonder icoon, en naam en bestandstypen naast elkaar: het vak is nu even
   hoog als een invoerveld en het venster past zonder scrollen. */
.cvdrop{padding:13px 16px;gap:10px;align-items:baseline;flex-wrap:wrap}
.cvdrop__tekst{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.cvdrop__tekst b{font-size:14.5px;line-height:1.3}
.cvdrop__status{font-size:12.5px;line-height:1.4;font-weight:400}

/* De twee akkoorden horen bij elkaar: een omkaderd blok in plaats van twee
   losse regels die tussen het formulier en de knop zweven. */
.akkoorden{
	margin:20px 0 0;
	padding:16px 18px;
	border:1px solid var(--line);
	border-radius:12px;
	background:var(--paper);
}
.akkoorden .field.consent{margin:0}
.akkoorden .field.consent + .field.consent{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.akkoorden .field.consent label{font-size:14.5px;line-height:1.5;align-items:flex-start}
.akkoorden .field.consent-extra label{font-size:14px}
/* De uitleg hoort onder het vinkje waar hij over gaat, niet ernaast. */
.akkoorden .veldhulp{margin:6px 0 0 34px;font-size:12.5px}

/* De WhatsApp-regel stond tegen de knop aan. */
.formwrap-inner .formalt{margin:18px 0 0;text-align:center;font-size:14px}
.formwrap-inner .formalt a{color:var(--cyan-tx);font-weight:600}
.formwrap-inner .formalt a:hover{color:var(--orange-tx)}
.formwrap-inner form .btn.breed{margin-top:20px}

/* Sterretje bij een verplicht veld. Oranje-tekstkleur haalt 4,51 op wit;
   de lichte merkoranje zou hier onder de contrasteis zakken. */
.field label .moet{margin-left:3px;color:var(--orange-tx);font-weight:700}

/* ==========================================================
   Vragen op een dienstpagina

   De pagina was een witte lap tekst met vier koppen. De eerste kop blijft
   de leeskolom; de rest staat als kaarten in een band, zodat er iets te
   scannen valt in plaats van te lezen.
   ========================================================== */
.vraagkaarten{
	display:grid;
	grid-template-columns:1fr;
	gap:16px;
	margin-top:26px;
}
.vraagkaart{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:16px;
	padding:22px 24px;
}
.vraagkaart{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.vraagkaart:hover{border-color:var(--cyan);box-shadow:0 12px 30px rgba(26,26,26,.10);transform:translateY(-2px)}
.vraagkaart h3{
	margin:0 0 10px;
	font-family:var(--font-head);
	font-weight:700;
	font-size:17px;
	line-height:1.3;
	color:var(--ink);
}
.vraagkaart p{margin:0 0 10px;color:var(--grey);font-size:15.5px;line-height:1.7}
.vraagkaart p:last-child{margin-bottom:0}
.vraagkaart ul{margin:0;padding:0;list-style:none}
.vraagkaart li{position:relative;padding:3px 0 3px 26px;color:var(--grey);font-size:15.5px;line-height:1.7}
.vraagkaart li::before{
	content:'';
	position:absolute;
	left:2px;
	top:1.15em;
	width:10px;
	height:6px;
	border-left:2px solid var(--cyan-lg);
	border-bottom:2px solid var(--cyan-lg);
	transform:translateY(-50%) rotate(-45deg);
}

@media(min-width:820px){
	/* Twee naast elkaar. Bij drie kaarten staat de laatste dus alleen op de
	   tweede rij; dat leest rustiger dan drie smalle kolommen tekst. */
	.vraagkaarten{grid-template-columns:repeat(2,1fr);gap:20px}
	.vraagkaart{padding:26px 28px}
	.vraagkaart:last-child:nth-child(odd){grid-column:1 / -1}
	.vraagkaart:last-child:nth-child(odd) p,
	.vraagkaart:last-child:nth-child(odd) ul{max-width:80ch}
}

/* ==========================================================
   Over ons: cijferband en kernwaarden
   ========================================================== */

/* Dezelfde golfband als op een vacature, maar met het getal groot en het
   label eronder. Drie cijfers met een hele zin erbij, dus meer ruimte per
   vak dan bij de vijf feiten van een vacature. */
.feitbalk--cijfers > .wrap{padding:34px 30px 30px}
.feitbalk--cijfers .feitbalk__binnen{gap:26px 40px}
.feitbalk--cijfers .feitbalk__feit{flex:1 1 220px;min-width:0}
.feitbalk--cijfers .feitbalk__tekst{gap:6px}
.feitbalk__waarde--groot{
	font-family:var(--font-head);
	font-weight:800;
	font-size:clamp(26px,3vw,32px);
	line-height:1.05;
	color:var(--cyan-tx);
}
.feitbalk--cijfers .feitbalk__label{
	font-size:14.5px;
	font-weight:400;
	letter-spacing:0;
	text-transform:none;
	line-height:1.55;
	color:var(--ink);
	white-space:normal;
}

/* Kernwaarden als kaarten. Ze stonden in de dienstenopmaak, die voor een
   lijst met links is gemaakt; hier is geen link en wel meer tekst. */
.waarden{display:grid;grid-template-columns:1fr;gap:16px;margin-top:26px}
.waarde{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:16px;
	padding:24px;
	border-top:3px solid var(--cyan);
}
.waarde{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.waarde:hover{border-color:var(--cyan);box-shadow:0 12px 30px rgba(26,26,26,.10);transform:translateY(-2px)}
.waarde:hover{border-top-color:var(--cyan-lg)}
.waarde h3{margin:0 0 10px;font-family:var(--font-head);font-weight:700;font-size:18px;line-height:1.25;color:var(--ink)}
.waarde p{margin:0;color:var(--grey);font-size:15.5px;line-height:1.7}

@media(min-width:820px){
	.waarden{grid-template-columns:repeat(3,1fr);gap:20px}
	.waarde{padding:28px 26px}
}

@media(max-width:620px){
	.feitbalk--cijfers .feitbalk__feit{flex:1 1 100%}
}

/* ==========================================================
   Over ons: het verhaal met een zijkolom

   Vier alineas onder elkaar in een kolom is een muur. De eerste alinea is
   nu een lead, en naast de tekst staat waar je verder kunt kijken.
   ========================================================== */
.overintro{background:var(--surface)}
.overintro > .wrap{max-width:var(--paginabreedte,1280px);padding:56px 30px 64px}
/* De kop hangt aan de tagline, niet aan de sectie. */
.overintro .tekstpagina__tagline + h2{margin-top:0}
.overintro__grid{display:grid;grid-template-columns:1fr;gap:32px}
.overintro__hoofd{max-width:74ch}
.overintro__hoofd h2{margin:0 0 14px;font-family:var(--font-head);font-weight:700;
	font-size:clamp(21px,2.6vw,30px);line-height:1.2;color:var(--ink)}
.overintro__lead{margin:0 0 18px;font-size:19px;line-height:1.6;color:var(--ink);font-weight:500}
.overintro__hoofd p{margin:0 0 16px;color:var(--grey);font-size:16.5px;line-height:1.75}
.overintro__hoofd p:last-child{margin-bottom:0}

.overintro__zij{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:var(--r);
	padding:22px;
	box-shadow:0 10px 30px rgba(26,26,26,.06);
	align-self:start;
}
.overintro__zijlab{
	margin:0 0 10px;
	font-family:var(--font-body);
	font-size:12px;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	line-height:1.6;
	color:var(--cyan-tx);
}
.overintro__sectoren{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:8px}
.overintro__sectoren a{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:12px 14px;
	background:var(--paper);
	border:1px solid var(--line);
	border-radius:10px;
	font-family:var(--font-head);
	font-weight:700;
	font-size:15px;
	color:var(--ink);
	text-decoration:none;
}
.overintro__sectoren a::after{content:'';width:8px;height:8px;border-top:2px solid var(--cyan-lg);
	border-right:2px solid var(--cyan-lg);transform:rotate(45deg)}
.overintro__sectoren a:hover{border-color:var(--ink)}
.overintro__adres{margin:0 0 18px;color:var(--grey);font-size:15.5px;line-height:1.7}
.overintro__zij .btn{width:100%;justify-content:center;margin-top:4px}
.overintro__adres{margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid var(--line)}

@media(min-width:900px){
	.overintro__grid{grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
	/* Beide kolommen plakken. De langste bepaalt de hoogte van de rij en
	   schuift gewoon mee; de kortste blijft in beeld tot de rij ophoudt. Zo
	   staat er nooit een lege kolom naast een lange, welke van de twee dat
	   ook is. */
	.overintro__hoofd,
	.overintro__zij{position:sticky;top:calc(var(--balk-hoogte) + 26px)}
	.overintro > .wrap{padding:72px 30px 84px}
}

@media (prefers-reduced-motion:reduce){
	.waarde,.vraagkaart{transition:none}
	.waarde:hover,.vraagkaart:hover{transform:none}
}

/* Een afbreking die alleen telt als er ruimte voor is. Op een smal scherm
   breekt de kop vanzelf op de goede plek en zou een vaste afbreking een
   rare korte regel geven. */
br.opbreed{display:none}
@media(min-width:700px){
	br.opbreed{display:inline}
}

/* ==========================================================
   Contact: manieren om contact op te nemen in de golfband
   ========================================================== */
.feitbalk--contact > .wrap{padding:30px}
.contactwegen{display:grid;grid-template-columns:1fr;gap:12px}
.contactweg{
	display:flex;
	align-items:center;
	gap:14px;
	padding:16px 18px;
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:14px;
	text-decoration:none;
	transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.contactweg:hover,.contactweg:focus-visible{
	border-color:var(--cyan);
	box-shadow:0 12px 30px rgba(26,26,26,.10);
	transform:translateY(-2px);
}
.contactweg__icoon{
	flex:none;width:42px;height:42px;border-radius:12px;
	display:flex;align-items:center;justify-content:center;
	background:var(--wp--preset--color--teal-licht);color:var(--cyan-tx);
}
.contactweg__icoon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;
	stroke-linecap:round;stroke-linejoin:round}
.contactweg__tekst{display:flex;flex-direction:column;gap:2px;min-width:0}
.contactweg__lab{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan-tx)}
.contactweg__waarde{font-family:var(--font-head);font-weight:700;font-size:15px;line-height:1.3;color:var(--ink);
	overflow-wrap:anywhere}

/* Het formulier gecentreerd, als enige blok op de pagina. */
.contactform{background:var(--mt-warm)}
.contactform > .wrap{max-width:var(--paginabreedte,1280px);padding:56px 30px 72px}
.contactform__mid{max-width:620px;margin:0 auto;text-align:center}
.contactform__mid h2{margin:0;font-family:var(--font-head);font-weight:700;
	font-size:clamp(21px,2.6vw,30px);line-height:1.2;color:var(--ink)}
.contactform__mid .intro{margin:14px auto 26px;max-width:56ch;color:var(--grey);font-size:16.5px;line-height:1.7}
/* De velden zelf blijven links uitgelijnd; een gecentreerd label boven een
   invoerveld leest niet. */
.contactform__mid form{text-align:left}

@media(min-width:760px){
	.contactwegen{grid-template-columns:repeat(2,1fr);gap:14px}
}
@media(min-width:1100px){
	.contactwegen{grid-template-columns:repeat(4,1fr)}
	.contactform > .wrap{padding:72px 30px 88px}
}

/* De golf erboven krijgt de kleur van deze sectie, anders staat er een
   witte boog tussen de twee. Verder is niets omgekleurd: op deze warme
   tint houden teal en oranje hun contrast. */
.feitbalk--contact .feitbalk__golf--onder{fill:var(--mt-warm)}
.contactform__mid .field input,
.contactform__mid .field textarea{background:var(--surface)}

/* ==========================================================
   De zes stappen naar een nieuwe baan
   ========================================================== */
.stappen{background:var(--paper)}
.stappen > .wrap{max-width:var(--paginabreedte,1280px);padding:56px 30px 64px}
/* Onder de 1000 pixels gewoon kaarten onder elkaar: alle zes open, want
   daar is ruimte genoeg in de hoogte. */
.stappen__lijst{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:14px}
.stap{
	background:var(--surface);
	border:1px solid var(--line);
	border-radius:16px;
	overflow:hidden;
	transition:border-color .2s ease,box-shadow .2s ease;
}
.stap__knop{
	display:flex;
	align-items:center;
	gap:14px;
	width:100%;
	padding:18px 20px;
	background:none;
	border:0;
	text-align:left;
	cursor:pointer;
	font:inherit;
}
.stap__nr{
	flex:none;width:34px;height:34px;border-radius:50%;
	display:flex;align-items:center;justify-content:center;
	background:var(--orange);color:var(--ink);
	font-family:var(--font-head);font-weight:800;font-size:15px;
	transition:background-color .25s ease,color .25s ease;
}
.stap__titel{font-family:var(--font-head);font-weight:700;font-size:16px;line-height:1.3;color:var(--ink)}
.stap__uit{padding:0 20px 18px 68px}
.stap__uit p{margin:0;color:var(--grey);font-size:15px;line-height:1.65}
.stap:hover{border-color:var(--orange)}

@media(min-width:1000px){
	/* Alle zes naast elkaar. De actieve stap neemt de ruimte, de rest blijft
	   als smalle kolom staan met nummer en titel: je ziet dus altijd wat er
	   komt. */
	.stappen__lijst{display:flex;gap:10px;min-height:320px}
	.stap{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
		transition:flex-grow .4s ease,border-color .25s ease,box-shadow .25s ease}
	.stap.is-actief{flex-grow:4;border-color:var(--orange);box-shadow:0 14px 34px rgba(26,26,26,.10)}
	.stap.is-volgende{border-color:var(--cyan)}
	.stap__knop{flex-direction:column;align-items:flex-start;gap:16px;height:100%;padding:20px 16px}
	.stap__titel{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;font-size:15.5px}
	.stap.is-actief .stap__knop{flex-direction:row;align-items:center;gap:14px;height:auto;padding:22px 24px 12px}
	.stap.is-actief .stap__titel{writing-mode:horizontal-tb;transform:none;font-size:19px}
	.stap.is-actief .stap__nr{background:var(--ink);color:var(--surface)}
	.stap__uit{display:none;padding:0 24px 24px 24px}
	.stap.is-actief .stap__uit{display:block;animation:stap-in .35s ease both}
	.stap.is-actief .stap__uit p{font-size:16px;line-height:1.7}
	.stappen > .wrap{padding:72px 30px 84px}
}

@keyframes stap-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
	.stap,.stap__nr{transition:none}
	.stap.is-actief .stap__uit{animation:none}
}

/* ==========================================================
   Menubalk: eigen compositielaag
   De balk ligt sticky boven de afspelende herovideo en schuift met
   transform weg. Zonder eigen laag tekent Chrome hem bij elk videobeeld
   opnieuw, wat flikkert. De laag zit op de balk, niet op de video: een
   geforceerde laag op de video gaf op iOS een zwart vlak.
   ========================================================== */
header.site{will-change:transform;backface-visibility:hidden}
.heromedia{isolation:isolate}

/* ==========================================================
   Blog: overzicht
   ========================================================== */
.blog__in{max-width:var(--paginabreedte,1280px);padding:52px 30px 88px}
.blog__titel{margin:0;font-size:clamp(28px,3.8vw,44px);line-height:1.12;color:var(--ink)}
.blog__lijst{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:26px;grid-template-columns:1fr}
@media(min-width:700px){.blog__lijst{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.blog__lijst{grid-template-columns:repeat(3,1fr)}}
.blog__lijst > li{margin:0}
.blogkaart{height:100%;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.blogkaart:hover,.blogkaart:focus-within{border-color:var(--cyan);box-shadow:0 12px 28px rgba(18,59,69,.12);transform:translateY(-2px)}
.blogkaart__beeld{margin:0}
.blogkaart__beeld a{display:block}
.blogkaart__beeld img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.blogkaart__tekst{flex:1;display:flex;flex-direction:column;gap:8px;padding:20px 22px 22px}
.blogkaart__cat{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.blogkaart__cat a{color:var(--cyan-tx);text-decoration:none}
.blogkaart__titel{margin:0;font-size:20px;line-height:1.3}
.blogkaart__titel a{color:var(--ink);text-decoration:none}
.blogkaart__titel a:hover,.blogkaart__titel a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.blogkaart__samenvatting p{margin:0;color:var(--grey);font-size:15px;line-height:1.6}
.blogkaart__datum{margin-top:auto;padding-top:6px;font-size:13px;color:var(--grey)}
.blog__paginering{margin-top:40px;gap:10px;font-weight:700}
.blog__paginering a{color:var(--ink)}
.blog__leeg{margin:30px 0 0;color:var(--grey)}

/* ==========================================================
   Blog: artikel (bouwt op de bestaande artikelpagina)
   ========================================================== */
.artikel__intro p{margin:0;font:inherit;color:inherit}
.artikel .wp-block-post-title{margin:10px 0 0;font-size:clamp(27px,3.6vw,40px);line-height:1.15;color:var(--ink)}
.artikel__beeld{margin:30px 0 0;max-width:560px}
.artikel__beeld img{display:block;width:100%;height:auto;border-radius:var(--r)}
.artikel__tekst a{color:var(--cyan-tx);font-weight:600}
.artikel__nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 28px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line);font-size:15px}
.artikel__nav a{color:var(--ink);font-weight:700;text-decoration:none}
.artikel__nav a:hover,.artikel__nav a:focus-visible{color:var(--cyan-tx);text-decoration:underline}
.artikel__nav .post-navigation-link-next{margin-left:auto;text-align:right}

/* Fouten en bevestigingen bij formulieren: sollicitatie en aanvraag.
   De rode tint haalt 6,4:1 op wit en ruim 5:1 op de vlakkleuren. */
.field.is-fout input,.field.is-fout textarea,.field.is-fout .cvdrop{border-color:#B3261E}
.field .msg{color:#B3261E;font-size:13.5px;line-height:1.45;margin:6px 0 0}
.melding{margin:0 0 16px;padding:14px 16px;background:var(--paper);border-left:3px solid var(--orange);border-radius:0 8px 8px 0;color:var(--ink);font-size:14.5px;line-height:1.55}
.melding p{margin:0}
.melding-fout,.sjr-aanvraag__status.is-fout{border-left-color:#B3261E}
.melding-ok,.sjr-aanvraag__status.is-ok{border-left-color:var(--wp--preset--color--teal-tekst)}
.sjr-aanvraag__privacy{margin:12px 0 0;padding-left:0;text-indent:0}

/* Videovacature op de vacaturepagina. Posterbeeld, nooit autoplay; ook een
   staande video past, door de maximale hoogte. */
.sjr-vacaturevideo{margin:0 0 28px}
.sjr-vacaturevideo video{display:block;width:100%;height:auto;max-height:75vh;object-fit:contain;background:var(--ink);border-radius:14px}
.sjr-vacaturevideo figcaption{margin-top:8px;font-size:13.5px;color:var(--wp--preset--color--grijs)}
.vaccard .vacvideo{margin:6px 0 2px}

/* ==========================================================
   Dienstpaginas: wat de dienst omvat

   Dezelfde kaarten als de kernwaarden op Over ons. Drie naast elkaar is
   de standaard. Bij vier staan ze twee aan twee, bij vijf staan de
   laatste twee gecentreerd onder de eerste drie: zo blijft er geen losse
   kaart op een rij achter.
   ========================================================== */
.dienstitems__intro{margin:12px 0 0;max-width:70ch;color:var(--grey);font-size:16.5px;line-height:1.7}
.dienstitems__noot{margin:26px 0 0;max-width:70ch;color:var(--grey);font-size:15.5px;line-height:1.7}

/* Links in lopende tekst: zelfde gewicht als in een artikel. */
.overintro__hoofd p a,.waarde p a,.vraagkaart p a,.stap__uit p a,
.dienstitems__noot a,.dienstuitleg p a{font-weight:600;text-underline-offset:3px}

/* Toelichting tussen twee banden, op wit. De kop mag hier de volle breedte. */
.dienstuitleg{background:var(--surface)}
.dienstuitleg h2{max-width:none}

@media(min-width:820px){
	.waarden--twee{grid-template-columns:repeat(2,1fr)}
	.waarden--vijf{grid-template-columns:repeat(6,1fr)}
	.waarden--vijf > .waarde{grid-column:span 2}
	.waarden--vijf > .waarde:nth-child(4){grid-column:2 / span 2}
}

/* Witte tekst op een foto. Een zachte donkere rand rond de letters houdt de
   tekst leesbaar op lichte plekken in het beeld, zoals een wit bord, een helm
   of een raam, zonder de foto zelf donkerder te maken. */
.beeldkop h1,.beeldkop__intro,.beeldkop__wa{text-shadow:0 1px 2px rgba(12,20,24,.5),0 0 14px rgba(12,20,24,.45)}

/* ==========================================================
   Blog: categorieen, oproep onder een artikel, volgen op LinkedIn
   ========================================================== */
.beeldkop__intro a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.beeldkop__intro a:hover,.beeldkop__intro a:focus-visible{text-decoration-thickness:2px}
.beeldkop__intro p{margin:0}

/* Een kaart mag niet breder worden dan zijn kolom. Zonder dit maakt een beeld
   dat niet laadt de kaart 3000 pixels breed: WordPress geeft afbeeldingen met
   sizes=auto die maat als voorlopige grootte. */
.blog__lijst > li{min-width:0}
.blogkaart__beeld img{width:100%}

/* Categorieen boven het overzicht. Gewone links; de huidige is donker. */
.blogcats__lijst{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.blogcats__link{
	display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;
	border:1.5px solid var(--line);border-radius:999px;background:var(--surface);
	font-family:var(--font-head);font-weight:700;font-size:14.5px;color:var(--ink);text-decoration:none;
	transition:border-color .16s ease,background .16s ease;
}
.blogcats__link:hover,.blogcats__link:focus-visible{border-color:var(--cyan-lg);background:var(--wp--preset--color--teal-licht)}
.blogcats__link[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}

/* Oproep onder een artikel, gekozen op categorie in inc/blog.php. */
.berichtoproep{margin-top:36px;padding:28px 28px 30px;background:var(--wp--preset--color--teal-licht);border-radius:16px}
.berichtoproep__titel{margin:0;font-size:clamp(20px,2.2vw,24px);line-height:1.25;color:var(--ink)}
.berichtoproep__tekst{margin:10px 0 0;color:var(--grey);font-size:16px;line-height:1.7}
.berichtoproep__knoppen{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 0}

/* Volgen op LinkedIn, onder het blogoverzicht en onder elke categorie. */
.blogvolgen-deel{margin-block:0}
.blogvolgen{background:var(--wp--preset--color--teal-licht)}
.blogvolgen > .wrap{max-width:var(--paginabreedte,1280px);padding:48px 30px 52px}
.blogvolgen__in{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.blogvolgen__icoon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:52px;height:52px;border-radius:14px;background:var(--surface);color:var(--cyan-tx)}
.blogvolgen__icoon svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.blogvolgen h2{margin:0;font-size:clamp(21px,2.6vw,30px);line-height:1.2}
.blogvolgen p{margin:8px 0 0;max-width:60ch;color:var(--grey);font-size:16.5px;line-height:1.65}
@media(min-width:820px){
	.blogvolgen__in{flex-direction:row;align-items:center;gap:24px}
	.blogvolgen__tekst{flex:1}
}
@media (prefers-reduced-motion:reduce){
	.blogcats__link{transition:none}
}