:root{
    --teal:#2FC7CC; --teal-tint:#EBFAFA; --yellow:#F0B429; --yellow-tint:#FEF6E4;
    --pink:#E491B8; --pink-tint:#FCEEF4; --purple:#A876D6; --purple-tint:#F4EDFB;
    --blue:#4C7FD9; --blue-tint:#EAF0FC;
    --ink:#1B1620; --muted:#66606F; --paper:#FFFFFF; --line:#EBE8ED;
    --forest:#0E2E2B; --forest-2:#123933;
    --sage:#B5D3E7; --sage-2:#B5D3E7; --lime:#FF4D00;
    --lime-tint:#FFE4D6; --sage-dark:#2C6088;
  }
  *,*::before,*::after{box-sizing:border-box;}
  body{margin:0;font-family:'Inter',sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;}
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  h1,h2{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 118;font-weight:800;letter-spacing:-.005em;text-transform:uppercase;margin:0;line-height:1.14;}
  h3{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;font-weight:700;letter-spacing:0;text-transform:uppercase;margin:0;line-height:1.2;}
  .hl-orange{color:var(--lime);}
  .accent-font{font-family:'Baloo 2',sans-serif;font-weight:700;}
  p{margin:0;}
  .wrap{max-width:1160px;margin:0 auto;padding:0 32px;}
  .concept-tag{background:var(--ink);color:#fff;text-align:center;padding:9px;font-size:12.5px;font-weight:600;letter-spacing:.02em;}


  .btn{display:inline-flex;align-items:center;gap:9px;font-family:'Inter',sans-serif;font-weight:700;font-size:14.5px;padding:14px 27px;border-radius:11px;border:none;background:var(--ink);color:#fff;cursor:pointer;box-shadow:0 10px 24px -12px rgba(27,22,32,.45);transition:transform .15s ease, box-shadow .15s ease;}
  .btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -12px rgba(27,22,32,.5);}
  .btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:none;}
  .btn-teal{background:var(--teal);color:#0B2C2D;}

  .pill{display:inline-flex;align-items:center;gap:7px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:12.5px;padding:7px 15px;border-radius:999px;background:var(--teal-tint);color:#0E7478;}
  .pill i{font-size:8px;}

  nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:21px 32px;}
  .logo{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:19px;display:flex;align-items:center;gap:9px;}
  .logo-mark{width:29px;height:29px;border-radius:9px;background:var(--ink);position:relative;}
  /* ---------- Gestapelde merknaam (niet meer in gebruik) ---------- */
  .logo-stack{display:flex;flex-direction:column;line-height:1;}
  .logo-stack-top{font-family:'Inter',sans-serif;font-weight:600;font-size:10.5px;color:var(--muted);letter-spacing:.03em;margin-bottom:1px;}
  .logo-stack-bottom{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:18px;color:var(--ink);letter-spacing:-.01em;}
  .vac-topbar-brand .logo-stack-top,.vac-topbar-brand .logo-stack-bottom{color:#fff;}
  .vac-topbar-brand .logo-stack-top{color:rgba(255,255,255,.65);}
  .logo-mark::after{content:'';position:absolute;inset:8px;border-radius:3px;background:var(--teal);}
  .nav-links{display:flex;gap:34px;list-style:none;padding:0;margin:0;}
  .nav-links a{font-size:14px;font-weight:600;color:var(--muted);}
  .nav-links a:hover{color:var(--ink);}
  .nav-actions{display:flex;align-items:center;gap:16px;}

  .hero{padding:92px 0 84px;}
  .hero-grid{display:grid;grid-template-columns:1fr .88fr;gap:60px;align-items:center;}
  .hero h1{font-size:46px;margin:20px 0 22px;}
  .hero h1 .hl{color:var(--teal);}
  .hero p{font-size:16px;color:var(--muted);line-height:1.65;max-width:460px;margin-bottom:34px;}
  .hero-ctas{display:flex;gap:14px;}
  /* ================= CONCEPT G: organische golfvorm-hero (inspiratie: Learn@House-mockup) ================= */
  .organic-nav{background:var(--sage);position:relative;z-index:3;}
  .organic-nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;}
  .organic-logo{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:17px;display:flex;align-items:center;gap:9px;color:var(--ink);}
  .organic-logo .logo-mark{background:var(--lime);}
  .organic-nav-links{display:flex;gap:28px;list-style:none;margin:0;padding:0;}
  .organic-nav-links a{font-size:13.5px;font-weight:600;color:rgba(27,22,32,.72);}
  .organic-nav-links a:hover{color:var(--ink);}
  .organic-cta-pill{background:var(--lime);color:#fff;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:13px;padding:10px 22px;border-radius:999px;}

  .organic-hero{background:linear-gradient(170deg,var(--sage-2),var(--sage) 60%);position:relative;overflow:visible;padding:56px 0 130px;}
  .organic-hero-grid{display:grid;grid-template-columns:1.32fr .88fr;gap:32px;align-items:center;position:relative;z-index:2;}
  /* zonder dit rekken de kolommen op tot hun breedste inhoud en valt alles rechts weg */
  .organic-hero-grid > *{min-width:0;}
  .organic-hero-visual{max-width:100%;}
  .organic-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(27,22,32,.06);border:1px solid rgba(27,22,32,.14);color:var(--ink);font-family:'Baloo 2',sans-serif;font-weight:600;font-size:12px;padding:7px 14px;border-radius:999px;margin-bottom:20px;}
  .organic-badge .stars{color:var(--yellow);letter-spacing:1px;}
  .organic-hero h1{font-size:clamp(40px, 4.6vw, 68px);line-height:.98;color:var(--ink);margin-bottom:18px;}
  .organic-hero h1 .hl-orange{max-width:100%;white-space:nowrap;
    display:inline-block;vertical-align:top;}
  .organic-hero h1 .organic-emoji{margin-left:6px;}
  .organic-hero p.organic-sub{color:rgba(27,22,32,.68);font-size:15px;line-height:1.65;max-width:440px;margin-bottom:28px;}
  .organic-hero-ctas{display:flex;align-items:center;gap:16px;margin-bottom:38px;flex-wrap:wrap;}
  .organic-btn-dark{background:#fff;color:var(--forest);font-family:'Baloo 2',sans-serif;font-weight:700;font-size:13.5px;padding:13px 24px;border-radius:999px;display:inline-flex;align-items:center;gap:9px;}
  .organic-btn-circle-wrap{cursor:pointer;display:flex;align-items:center;gap:12px;}
  .organic-btn-circle{width:46px;height:46px;border-radius:50%;background:var(--lime);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
  .organic-btn-circle-label{color:var(--ink);font-weight:600;font-size:13px;}
  .organic-stats-row{display:flex;gap:34px;}
  .organic-stats-row div{display:flex;flex-direction:column;}
  .organic-stats-row b{font-family:'Baloo 2',sans-serif;font-size:24px;color:var(--ink);}
  .organic-stats-row span{font-size:11.5px;color:rgba(27,22,32,.56);margin-top:2px;}

  .organic-hero-visual{position:relative;min-height:340px;align-self:stretch;}
  .organic-decor-star{position:absolute;top:150px;right:6%;color:var(--lime);font-size:26px;opacity:.85;}
  .organic-decor-ring{position:absolute;bottom:60px;left:2%;width:34px;height:34px;border:2px dashed rgba(27,22,32,.25);border-radius:50%;}
  .organic-decor-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--teal);}

  /* ---------- Pop-out-badges: springen groter tevoorschijn zodra hun kaart actief wordt ---------- */
  .pop-badge{position:absolute;opacity:0;transform:translate(var(--fx,0px),var(--fy,0px)) scale(.2);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .55s cubic-bezier(.22,1,.36,1);pointer-events:none;z-index:7;}
  .badge-group.active .pop-badge{opacity:1;transform:translate(0,0) scale(1);}
  .pop-circle{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 16px 28px -10px rgba(0,0,0,.4);font-family:'Baloo 2',sans-serif;font-weight:700;font-size:16px;color:#fff;}
  .pop-circle i{font-size:24px;}
  .pop-chip{background:#fff;border-radius:12px;padding:8px 12px;box-shadow:0 14px 24px -10px rgba(0,0,0,.3);display:flex;align-items:center;gap:8px;white-space:nowrap;}
  .pop-chip span{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
  .pop-chip b{font-family:'Inter',sans-serif;font-weight:700;font-size:11px;color:var(--ink);}
  .pop-social{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 16px 28px -10px rgba(0,0,0,.4);color:#fff;font-size:23px;}
  .organic-ui-card{position:absolute;left:50%;bottom:-170px;transform:translateX(-50%);z-index:5;background:#fff;border-radius:20px;box-shadow:0 40px 70px -24px rgba(0,0,0,.45);padding:0;width:100%;max-width:380px;overflow:hidden;}

  /* ---------- Roterende visual: 5 kaarten wisselen elkaar af, blob verandert mee van kleur ---------- */
  .rotator-blob{position:absolute;left:50%;bottom:-140px;transform:translateX(-50%);width:400px;height:400px;border-radius:44% 56% 61% 39% / 51% 46% 54% 49%;background:var(--blue);opacity:.9;transition:background .7s ease;filter:blur(.5px);z-index:3;}
  .rotator-card{position:absolute;left:50%;bottom:-170px;transform:translateX(-50%) translateY(14px) scale(.94);z-index:5;width:100%;max-width:380px;opacity:0;pointer-events:none;transition:opacity .6s ease,transform .6s ease;}
  #rotCardLaptop{bottom:-92px;}
  #rotCardWeb{bottom:-77px;}
  .rotator-card.active{opacity:1;transform:translateX(-50%) translateY(0) scale(1);pointer-events:auto;}
  .rotator-card .mock-window{transform:none;filter:none;}
  .rotator-card .mock-window-inner{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 40px 70px -24px rgba(0,0,0,.45);}
  .rotator-card .mock-topbar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line);}
  .rotator-card .mock-topbar span{width:8px;height:8px;border-radius:50%;background:var(--line);}
  .rotator-card .mock-url{margin-left:8px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:auto;height:auto;border-radius:0;background:none;flex:1;min-width:0;}

  /* ATS-kanban (blauw) */
  .ats-board{display:flex;gap:12px;padding:18px;}
  .ats-col{flex:1;background:var(--paper);border-radius:10px;padding:9px;}
  .ats-col-head{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:10px;color:var(--muted);margin-bottom:8px;}
  .ats-chip{background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 8px;font-size:10px;font-weight:600;margin-bottom:6px;box-shadow:0 4px 8px -6px rgba(0,0,0,.15);}

  /* Laptop-frame (geel) */
  .mock-laptop{max-width:340px;margin:0 auto;}
  .mock-laptop-screen{background:#1A1A1A;border-radius:12px 12px 3px 3px;padding:8px 8px 0;box-shadow:0 40px 70px -24px rgba(0,0,0,.45);}
  .mock-laptop-inner{background:#fff;border-radius:5px 5px 0 0;overflow:hidden;aspect-ratio:16/10.5;}
  .mock-laptop-base{height:12px;background:linear-gradient(to bottom,#2C2C2C,#161616);border-radius:0 0 8px 8px;position:relative;}

  /* ---------- Jobboard campagnes: blauw tekstblok + scrollende laptop ---------- */
  .jobboard-section{background:var(--paper);padding:40px 0 170px;}
  .jobboard-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:0;align-items:center;}
  .jobboard-block{background:var(--sage);border-radius:26px;padding:48px 44px;position:relative;z-index:1;}
  .jobboard-block h2{font-size:30px;color:var(--ink);margin:14px 0 14px;}
  .jobboard-block h2 .hl-orange{color:var(--lime);}
  .jobboard-block p{font-size:15px;line-height:1.65;color:rgba(27,22,32,.75);margin:0 0 20px;}
  .jobboard-list-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
  .jobboard-list-check li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ink);}
  .jobboard-list-check i{width:22px;height:22px;border-radius:50%;background:var(--lime);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .jobboard-laptop{position:relative;z-index:2;margin-left:-40px;}
  .jb-laptop{max-width:100%;}
  .jb-laptop .mock-laptop-screen{border-radius:16px 16px 4px 4px;padding:12px 12px 0;}
  .jb-laptop .mock-laptop-inner{border-radius:7px 7px 0 0;aspect-ratio:16/10.5;display:flex;flex-direction:column;background:#F5F6F8;}
  .jb-laptop .mock-laptop-base{height:18px;border-radius:0 0 12px 12px;}
  .jb-laptop .mock-laptop-base::after{width:90px;height:6px;}
  .jb-top{background:#fff;padding:12px 18px;border-bottom:1px solid var(--line);flex-shrink:0;}
  .jb-logo{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15px;color:var(--ink);display:block;margin-bottom:9px;}
  .jb-logo span{color:var(--blue);}
  .jb-search{display:flex;gap:7px;}
  .jb-input{flex:1;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:7px 10px;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;}
  .jb-input i{font-size:10px;color:var(--muted);}
  .jb-btn{background:var(--blue);color:#fff;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:10.5px;padding:7px 14px;border-radius:7px;flex-shrink:0;}
  .jb-viewport{flex:1;overflow:hidden;position:relative;padding:12px 18px 0;}
  .jb-list{display:flex;flex-direction:column;gap:10px;animation:jbScroll 22s linear infinite;will-change:transform;}
  .jb-viewport:hover .jb-list{animation-play-state:paused;}
  @keyframes jbScroll{from{transform:translateY(0);}to{transform:translateY(-50%);}}
  .jb-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 13px;position:relative;box-shadow:0 4px 10px -8px rgba(27,22,32,.2);}
  .jb-card-title{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:12.5px;color:var(--ink);margin-bottom:2px;}
  .jb-card-sub{font-size:10.5px;color:var(--muted);margin-bottom:7px;}
  .jb-tags{display:flex;gap:6px;}
  .jb-tags span{background:#EEF1F5;border-radius:5px;padding:3px 7px;font-size:9.5px;font-weight:600;color:var(--ink);}
  .jb-apply{position:absolute;right:12px;bottom:11px;background:var(--blue);color:#fff;font-size:9.5px;font-weight:700;padding:5px 9px;border-radius:999px;}

  @media(max-width:900px){
    .jobboard-grid{grid-template-columns:1fr;gap:24px;}
    .jobboard-laptop{margin-left:0;}
    .jobboard-block{padding:32px 26px;}
    .jobboard-block h2{font-size:24px;}
  }

  /* ---------- Eigen werkenbij-site: paginabrede band die van links het scherm in komt ---------- */
  .werkenbij-section{padding:0 0 90px;}
  .werkenbij-band{position:relative;background:var(--sage);padding:60px 0 80px;overflow:visible;}
  .werkenbij-wave-top{position:absolute;left:0;top:-109px;width:100%;height:110px;display:block;z-index:1;pointer-events:none;line-height:0;}
  .werkenbij-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;position:relative;z-index:2;}
  .werkenbij-laptop{order:1;}
  .werkenbij-text{order:2;}
  .werkenbij-text h2{font-size:30px;color:var(--ink);margin:14px 0 14px;}
  .werkenbij-text h2 .hl-orange{color:var(--lime);}
  .werkenbij-text p{font-size:15px;line-height:1.65;color:rgba(27,22,32,.75);margin:0 0 20px;}
  .werkenbij-laptop{position:relative;z-index:3;}
  .wb-screen{background:#fff;}
  .wb-page{animation:wbScroll 16s ease-in-out infinite alternate;will-change:transform;}
  .wb-screen:hover .wb-page{animation-play-state:paused;}
  @keyframes wbScroll{0%,12%{transform:translateY(0);}88%,100%{transform:translateY(-52%);}}
  .wb-nav{display:flex;align-items:center;gap:14px;padding:11px 18px;border-bottom:1px solid var(--line);}
  .wb-logo{display:flex;align-items:center;gap:7px;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:12.5px;color:var(--ink);}
  .wb-logo-mark{width:16px;height:16px;border-radius:5px;background:var(--teal);}
  .wb-links{margin-left:auto;display:flex;gap:12px;font-size:10px;font-weight:600;color:var(--muted);}
  .wb-cta{background:var(--teal);color:#fff;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:10px;padding:6px 12px;border-radius:999px;}
  .wb-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;padding:22px 18px;background:var(--teal-tint);}
  .wb-hero-text{display:flex;flex-direction:column;gap:6px;}
  .wb-kicker{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:9.5px;color:#0E7478;letter-spacing:.08em;text-transform:uppercase;}
  .wb-hero-text b{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;font-size:17px;line-height:1.1;color:var(--ink);}
  .wb-sub{font-size:10px;color:var(--muted);line-height:1.45;}
  .wb-btn{align-self:flex-start;margin-top:4px;background:var(--ink);color:#fff;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:10px;padding:6px 13px;border-radius:999px;}
  .wb-hero-art{border-radius:12px;background:linear-gradient(135deg,var(--teal),#0E7478);min-height:110px;}
  .wb-section-title{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:11px;color:var(--ink);padding:16px 18px 8px;}
  .wb-jobs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 18px;}
  .wb-job{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 11px;display:flex;flex-direction:column;gap:2px;}
  .wb-job b{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:11px;color:var(--ink);}
  .wb-job span{font-size:9.5px;color:var(--muted);}
  .wb-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 18px 20px;}
  .wb-stats div{background:var(--teal-tint);border-radius:9px;padding:10px;text-align:center;}
  .wb-stats b{display:block;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15px;color:var(--ink);}
  .wb-stats span{font-size:8.5px;color:var(--muted);}

  @media(max-width:900px){
    .werkenbij-grid{grid-template-columns:1fr;gap:28px;}
    .werkenbij-laptop{order:2;}
    .werkenbij-text{order:1;}
    .werkenbij-text h2{font-size:24px;}
  }
  @media(max-width:600px){
    .werkenbij-wave-top{height:60px;top:-59px;}
    .werkenbij-band{padding:44px 0 50px;}
    .wb-links{display:none;}
    .wb-logo{white-space:nowrap;}
  }
  .mock-laptop-base::after{content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);width:56px;height:4px;background:#0A0A0A;border-radius:0 0 5px 5px;}
  .mock-laptop-nav{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);}
  .mock-laptop-nav .dot{width:6px;height:6px;border-radius:50%;background:var(--yellow);flex-shrink:0;}
  .mock-laptop-nav b{font-family:'Baloo 2',sans-serif;font-size:10px;}
  .mock-laptop-nav-links{margin-left:auto;display:flex;gap:9px;}
  .mock-laptop-nav-links span{width:20px;height:5px;border-radius:3px;background:var(--line);}
  .mock-laptop-hero{padding:14px 16px;}
  .mock-laptop-hero .bar-lg{width:70%;height:9px;border-radius:4px;background:var(--ink);margin-bottom:7px;}
  .mock-laptop-hero .bar-sm{width:45%;height:6px;border-radius:3px;background:var(--line);margin-bottom:12px;}
  .mock-laptop-hero .btn-fake{width:64px;height:16px;border-radius:999px;background:var(--yellow);}

  /* Webpagina-browservenster (paars) */
  .mock-web-hero{background:var(--purple-tint);padding:16px;}
  .mock-web-hero .bar-lg{width:65%;height:8px;border-radius:4px;background:var(--purple);margin-bottom:6px;}
  .mock-web-hero .bar-sm{width:40%;height:5px;border-radius:3px;background:rgba(168,118,214,.4);margin-bottom:10px;}
  .mock-web-rows{padding:12px 16px 16px;}
  .mock-web-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);}
  .mock-web-row:last-child{border-bottom:none;}
  .mock-web-row .sq{width:24px;height:24px;border-radius:7px;flex-shrink:0;}
  .mock-web-row .ln{flex:1;}
  .mock-web-row .ln .t1{width:80px;height:7px;border-radius:3px;background:var(--ink);opacity:.8;margin-bottom:5px;}
  .mock-web-row .ln .t2{width:120px;height:5px;border-radius:3px;background:var(--line);}
  .organic-ui-topbar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line);}
  .organic-ui-topbar span{width:8px;height:8px;border-radius:50%;background:var(--line);}
  .organic-ui-url{margin-left:8px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);}
  .organic-ui-body{padding:18px 18px 22px;}
  .organic-ui-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);}
  .organic-ui-row:last-of-type{border-bottom:none;}
  .organic-ui-dot{width:30px;height:30px;border-radius:9px;flex-shrink:0;}
  .organic-ui-row-title{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:13.5px;}
  .organic-ui-row-sub{font-size:11px;color:var(--muted);margin-top:2px;}
  .organic-ui-badge{margin-left:auto;background:var(--teal-tint);color:#0E7478;font-size:9.5px;font-weight:700;padding:4px 9px;border-radius:999px;flex-shrink:0;}
  .organic-ui-stats{display:flex;gap:22px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
  .organic-ui-stats div{display:flex;flex-direction:column;}
  .organic-ui-stats b{font-family:'Baloo 2',sans-serif;font-size:17px;}
  .organic-ui-stats span{font-size:10px;color:var(--muted);}
  .organic-wave{position:absolute;left:0;bottom:0;width:100%;height:96px;display:block;z-index:1;line-height:0;}

  .organic-reasons{padding:120px 0 80px;}
  .organic-reasons h2{text-align:center;font-size:28px;margin-bottom:44px;}
  .organic-cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
  .organic-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px 24px 24px;}
  .organic-card-corner{position:absolute;top:-1px;right:16px;width:30px;height:22px;border:2px solid var(--forest);border-bottom:none;border-left:none;border-top-right-radius:12px;}
  .organic-card-icon{width:46px;height:46px;border-radius:12px;background:var(--teal-tint);color:#0E7478;display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:18px;}
  .organic-card h3{font-size:16.5px;margin-bottom:8px;}
  .organic-card p{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:14px;}
  .organic-read-more{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:12.5px;color:var(--forest);display:inline-flex;align-items:center;gap:5px;}

  @media(max-width:1150px) and (min-width:901px){
    .organic-hero h1{font-size:48px;}
  }
  @media(max-width:900px){
    .organic-hero-grid{grid-template-columns:1fr;}
    .organic-hero h1{font-size:56px;}
    .organic-nav-links{display:none;}
    .organic-cards-3{grid-template-columns:1fr;}
    .organic-ui-card{margin-bottom:-60px;max-width:320px;}
    .rotator-blob{width:300px;height:300px;bottom:-90px;}
    .rotator-card{bottom:-100px;max-width:300px;}
    .pop-badge{display:none;}
  }


  /* ---------- Hero: zwevende vierkantjes ---------- */
  .hero-float-scene{position:relative;max-width:480px;height:430px;margin:0 auto;}
  .float-sq{position:absolute;border-radius:22px;box-shadow:0 24px 44px -22px rgba(27,22,32,.28);padding:16px 18px;box-sizing:border-box;}
  .float-sq.fs-center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
  .float-sq-1{top:6px;left:0;width:225px;background:#fff;border:1px solid var(--line);animation:floatA 6.5s ease-in-out infinite;}
  .float-sq-2{top:0;right:6px;width:130px;height:100px;background:var(--teal-tint);animation:floatB 5.5s ease-in-out infinite;animation-delay:.3s;}
  .float-sq-3{top:190px;right:14px;width:210px;background:#fff;border:1px solid var(--line);animation:floatC 7s ease-in-out infinite;animation-delay:.6s;}
  .float-sq-4{bottom:14px;left:14px;width:178px;background:var(--purple-tint);animation:floatA 6s ease-in-out infinite;animation-delay:1s;}
  .float-sq-5{bottom:38px;right:52px;width:104px;height:88px;background:var(--yellow-tint);animation:floatB 6.8s ease-in-out infinite;animation-delay:.4s;}
  .float-sq-6{top:118px;left:196px;width:60px;height:60px;background:var(--ink);animation:floatC 5s ease-in-out infinite;animation-delay:.8s;}
  .fs-row{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
  .fs-dot{width:26px;height:26px;border-radius:8px;flex-shrink:0;}
  .fs-label{font-size:10.5px;color:var(--muted);font-weight:600;}
  .fs-title{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:14px;color:var(--ink);}
  .fs-tags{display:flex;gap:6px;flex-wrap:wrap;}
  .fs-tag{font-size:10px;font-weight:700;padding:4px 10px;border-radius:999px;color:var(--ink);}
  .fs-stat{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:26px;color:var(--ink);line-height:1;}
  .fs-stat-label{font-size:10px;color:var(--muted);font-weight:600;margin-top:4px;}
  .fs-avatar{width:34px;height:34px;border-radius:50%;background:var(--pink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-weight:700;font-size:12px;flex-shrink:0;}
  .fs-bars{display:flex;align-items:flex-end;gap:6px;height:38px;}
  .fs-bars span{width:9px;border-radius:3px;display:block;}
  .fs-mark{color:#fff;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:13px;}
  @keyframes floatA{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-16px) rotate(-1deg);}}
  @keyframes floatB{0%,100%{transform:translateY(0) rotate(3deg);}50%{transform:translateY(-20px) rotate(5deg);}}
  @keyframes floatC{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-12px) rotate(2deg);}}
  @media(prefers-reduced-motion: reduce){.float-sq{animation:none !important;}}

  /* ---------- Voordelen: bento-grid, gehoverde tegel groeit op zijn vaste plek ---------- */
  /* Bewust géén raster-herschikking (grid-column/row wijzigen op hover): dat liet tegels */
  /* letterlijk wegschuiven onder de cursor voordat je 'm bereikte. Nu blijft elke tegel op */
  /* zijn eigen plek staan en groeit 'm via een schaal-transformatie over de buren heen. */
  /* ---------- Waarom Werfspoor: 3D-kaartencarrousel — actieve kaart vooraan, buren schuin weggedraaid ---------- */
  .benefits-cover-wrap{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:40px;}
  .benefits-cover{position:relative;width:100%;max-width:1000px;height:320px;perspective:1300px;overflow-x:clip;overflow-y:visible;}
  .benefit-cover-card{position:absolute;left:50%;top:20px;width:300px;height:260px;margin-left:-150px;border-radius:22px;padding:26px 24px;box-sizing:border-box;box-shadow:0 28px 50px -24px rgba(27,22,32,.35);transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .4s ease;cursor:pointer;will-change:transform;transform-style:preserve-3d;backface-visibility:hidden;}
  .benefit-cover-card[data-off="0"]{transform:translateX(0) rotateY(0deg) scale(1);opacity:1;z-index:10;}
  .benefit-cover-card[data-off="-1"]{transform:translateX(-70%) rotateY(30deg) scale(.86);opacity:1;z-index:9;}
  .benefit-cover-card[data-off="1"]{transform:translateX(70%) rotateY(-30deg) scale(.86);opacity:1;z-index:9;}
  .benefit-cover-card[data-off="-2"]{transform:translateX(-126%) rotateY(42deg) scale(.74);opacity:.85;z-index:8;}
  .benefit-cover-card[data-off="2"]{transform:translateX(126%) rotateY(-42deg) scale(.74);opacity:.85;z-index:8;}
  /* Rechterkaarten: tekst rechts uitlijnen, zodat de zichtbare kant leesbaar blijft */
  .benefit-cover-card[data-off="1"],.benefit-cover-card[data-off="2"]{text-align:right;}
  .benefit-cover-card[data-off="1"] .benefit-icon,.benefit-cover-card[data-off="2"] .benefit-icon{margin-left:auto;}
  .benefit-cover-card[data-off="hidden-left"]{transform:translateX(-150%) rotateY(50deg) scale(.6);opacity:0;z-index:1;pointer-events:none;}
  .benefit-cover-card[data-off="hidden-right"]{transform:translateX(150%) rotateY(-50deg) scale(.6);opacity:0;z-index:1;pointer-events:none;}
  .benefit-cover-card .cover-num{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:12px;color:var(--lime);margin-bottom:12px;letter-spacing:.04em;}
  .benefit-cover-card .benefit-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:14px;flex-shrink:0;}
  .benefit-cover-card h3{font-size:16.5px;margin:0 0 8px;}
  .benefit-cover-card p{font-size:13px;color:var(--ink);opacity:.75;line-height:1.5;margin:0;}
  .stack-nav-btn{width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;flex-shrink:0;box-shadow:0 10px 20px -14px rgba(27,22,32,.35);transition:background .2s ease,transform .15s ease;z-index:20;position:relative;}
  .stack-nav-btn:hover{background:var(--paper);transform:translateY(-1px);}
  .stack-nav-btn:active{transform:scale(.92);}
  .stack-counter{text-align:center;margin-top:16px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:13px;color:var(--muted);}

  @media(max-width:900px){
    .benefit-cover-card[data-off="-2"],.benefit-cover-card[data-off="2"]{opacity:0;pointer-events:none;}
    .benefit-cover-card[data-off="-1"]{transform:translateX(-58%) rotateY(32deg) scale(.8);}
    .benefit-cover-card[data-off="1"]{transform:translateX(58%) rotateY(-32deg) scale(.8);}
  }
  @media(max-width:600px){
    .benefits-cover-wrap{gap:8px;}
    .benefits-cover{height:300px;}
    .benefit-cover-card{width:240px;margin-left:-120px;height:250px;padding:20px 18px;}
    .benefit-cover-card[data-off="-1"]{transform:translateX(-46%) rotateY(35deg) scale(.72);}
    .benefit-cover-card[data-off="1"]{transform:translateX(46%) rotateY(-35deg) scale(.72);}
    .stack-nav-btn{width:36px;height:36px;font-size:12px;}
  }
  @media(prefers-reduced-motion: reduce){
    .benefit-cover-card{transition:none;}
  }

  @media(max-width:900px){
    .hero-float-scene{height:auto;max-width:360px;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
    .float-sq{position:static;width:auto !important;height:auto !important;}
    .float-sq-1{grid-column:1/3;}
    .float-sq-3{grid-column:1/3;}
    .float-sq-6{width:56px !important;height:56px !important;display:flex;align-items:center;justify-content:center;margin:0 auto;}
  }

  /* ---------- Hero: laptop met fictieve jobboard-campagne (ongebruikt in dit concept, staat klaar voor terugschakelen) ---------- */
  @keyframes heroBadgePulse{0%,100%{box-shadow:0 0 0 0 rgba(240,180,41,.5);}50%{box-shadow:0 0 0 8px rgba(240,180,41,0);}}
  @keyframes heroShimmer{0%{left:-60%;}100%{left:130%;}}
  .hero-laptop-photo{position:relative;max-width:480px;margin:0 auto;}
  .hero-laptop-frame{width:100%;display:block;}
  .hero-laptop-screen-overlay{position:absolute;left:16.89%;top:28.38%;width:66.08%;height:40.95%;overflow:hidden;background:#fff;display:flex;flex-direction:column;}
  .hero-laptop-bar{display:flex;align-items:center;gap:5px;padding:5px 8px;border-bottom:1px solid var(--line);flex-shrink:0;}
  .hero-laptop-bar .dot{width:5px;height:5px;border-radius:50%;}
  .hero-laptop-url{margin-left:5px;background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:2px 7px;font-size:6.5px;color:var(--muted);flex:1;display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;}
  .hero-laptop-content{padding:7px 10px 8px;flex:1;min-height:0;overflow:hidden;}
  .hero-laptop-topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
  .hero-laptop-brand{font-weight:800;font-size:7.5px;color:var(--ink);}
  .hero-laptop-nav{display:flex;gap:8px;font-size:6px;color:var(--muted);font-weight:600;}
  .hero-laptop-banner{border-radius:6px;padding:7px 9px;background:linear-gradient(120deg,var(--teal),var(--purple),var(--pink),var(--yellow));background-size:300% 300%;animation:heroShimmerBg 8s ease infinite;margin-bottom:5px;}
  @keyframes heroShimmerBg{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
  .hero-laptop-banner b{color:#fff;font-size:8.5px;display:block;margin:2px 0 1px;}
  .hero-laptop-banner span{color:rgba(255,255,255,.9);font-size:6.5px;}
  .hero-laptop-tag{display:inline-block;background:rgba(27,22,32,.85);color:#fff;font-size:5.5px;font-weight:700;padding:2px 6px;border-radius:999px;}
  .hero-laptop-listing{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:6px;padding:5px 7px;margin-bottom:3px;position:relative;}
  .hero-laptop-listing.featured{border-color:var(--yellow);animation:heroBadgePulse 2.2s infinite;}
  .hero-laptop-listing b{display:block;font-size:6.5px;color:var(--ink);}
  .hero-laptop-listing span{display:block;font-size:5.5px;color:var(--muted);margin-top:1px;}
  .hero-laptop-badge{background:var(--yellow);color:var(--ink);font-size:5px;font-weight:800;padding:1px 5px;border-radius:999px;letter-spacing:.02em;}
  .hero-laptop-listing .hero-laptop-badge{display:inline-block;width:auto;margin-top:0;margin-left:4px;}
  .hero-laptop-count{font-size:5.5px;color:var(--muted);font-weight:600;flex-shrink:0;margin-left:6px;}
  @media(max-width:640px){.hero-laptop-content{padding:5px 7px 6px;}.hero-laptop-nav{display:none;}}

  section{padding:80px 0;}
  .section-head{max-width:600px;margin-bottom:44px;}
  .section-head h2{font-size:32px;margin-top:13px;}
  .section-head p{color:var(--muted);font-size:15px;margin-top:14px;line-height:1.6;}

  .stat-strip{background:var(--teal-tint);border-radius:20px;padding:34px 38px;display:flex;align-items:center;gap:32px;}
  .stat-box{background:#fff;border-radius:14px;padding:18px 24px;text-align:center;min-width:98px;box-shadow:0 12px 26px -16px rgba(27,22,32,.25);}
  .stat-box b{display:block;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:30px;color:var(--ink);}
  .stat-box span{display:block;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-top:3px;}
  .stat-text{flex:1;font-size:14.5px;line-height:1.6;color:var(--ink);}
  .stat-text b{font-weight:700;font-size:16.5px;display:block;margin-bottom:6px;}

  .specialist-strip{background:var(--purple-tint);border-radius:20px;padding:32px 38px;display:flex;align-items:center;gap:28px;}
  .specialist-icon{width:64px;height:64px;border-radius:16px;background:#fff;color:var(--purple);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;box-shadow:0 12px 26px -16px rgba(27,22,32,.25);}
  .specialist-text{flex:1;font-size:14.5px;line-height:1.6;color:var(--ink);}
  .specialist-text b{display:block;font-family:'Baloo 2',sans-serif;font-size:19px;margin-bottom:8px;color:var(--ink);}

  .logo-marquee-wrap{background:#FF4D00;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;}
  .logo-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
  .logo-track{display:flex;align-items:center;gap:56px;width:max-content;animation:logo-scroll 60s linear infinite;}
  .logo-marquee:hover .logo-track{animation-play-state:paused;}
  .logo-item{display:inline-flex;align-items:center;gap:10px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:19px;color:#fff;white-space:nowrap;flex-shrink:0;}
  .logo-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
  @keyframes logo-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @media(prefers-reduced-motion: reduce){.logo-track{animation:none;}}
  @media(max-width:600px){.logo-item{font-size:16px;}.logo-track{gap:38px;}}

  .cards-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .kanalen-multiats-note{margin-top:26px;padding:18px 22px;background:var(--cream);border:1px solid var(--line);border-radius:14px;font-size:13.5px;color:var(--ink);line-height:1.6;}
  .kanalen-multiats-note b{font-family:'Baloo 2',sans-serif;}
  .card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px;transition:box-shadow .15s ease, transform .15s ease;}
  .card:hover{box-shadow:0 20px 40px -24px rgba(27,22,32,.3);transform:translateY(-2px);}
  .card-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:18px;}
  .card h3{font-size:17.5px;margin-bottom:10px;}
  .card ul{list-style:none;padding:0;margin:15px 0 0;display:flex;flex-direction:column;gap:8px;}
  .card li{font-size:13px;color:var(--muted);padding-left:16px;position:relative;line-height:1.5;}
  .card li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--teal);}
  .card p{font-size:13.5px;color:var(--muted);line-height:1.6;}

  .dark{background:var(--ink);color:#fff;border-radius:28px;}

  /* ---------- Multi-ATS: paginabrede zwarte band met de ATS-afbeelding in het midden ---------- */
  .ats-section{background:var(--ink);color:#fff;padding:80px 0 84px;}
  .ats-head{text-align:center;max-width:640px;margin:0 auto 40px;}
  .ats-head h2{font-size:32px;color:#fff;margin:14px 0 12px;}
  .ats-head h2 .hl-orange{color:var(--lime);}
  .ats-head p{color:#B8B2C2;font-size:15px;line-height:1.6;margin:0;}
  .ats-visual{max-width:920px;margin:0 auto;border-radius:18px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.08);}
  .ats-visual img{display:block;width:100%;height:auto;}
  .ats-checks{list-style:none;margin:40px auto 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:1000px;}
  .ats-checks li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;font-weight:600;color:#fff;line-height:1.45;}
  .ats-checks i{width:22px;height:22px;border-radius:50%;background:var(--lime);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
  .ats-cta{text-align:center;margin-top:36px;}
  @media(max-width:900px){.ats-checks{grid-template-columns:1fr 1fr;}}
  @media(max-width:600px){.ats-section{padding:52px 0 56px;}.ats-head h2{font-size:24px;}.ats-checks{grid-template-columns:1fr;}}
  .dark .wrap{padding-top:60px;padding-bottom:60px;}
  .dark .section-head p{color:#B8B2C2;}
  .showcase{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;padding:0 32px;}
  .showcase-visual{border-radius:16px;overflow:hidden;}
  .checklist{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:13px;}
  .checklist li{display:flex;gap:11px;font-size:14px;align-items:flex-start;}
  .checklist i{width:19px;height:19px;border-radius:6px;background:var(--teal);color:#0B2C2D;display:flex;align-items:center;justify-content:center;font-size:9.5px;flex-shrink:0;margin-top:2px;}

  .cta{background:var(--yellow-tint);border-radius:24px;padding:56px;text-align:center;}
  .cta h2{font-size:29px;margin-bottom:12px;}
  .cta p{color:var(--muted);font-size:14.5px;margin-bottom:27px;}

  footer{border-top:1px solid var(--line);padding:40px 0;text-align:center;font-size:13px;color:var(--muted);}

  /* ---------- Telefoon-mockups: social content met bewegend beeld ---------- */
  .phones-section{background:var(--sage);padding:64px 0 150px;position:relative;overflow:visible;}
  .phones-wave{position:absolute;left:0;bottom:-1px;width:100%;height:110px;display:block;line-height:0;z-index:1;pointer-events:none;}
  .phones-section .wrap{position:relative;z-index:2;}
  .phones-section .section-head h2{color:var(--ink);}
  .phones-section .section-head h2 .hl-orange{color:var(--lime);}
  .phones-section .section-head p{color:rgba(27,22,32,.72);}
  .phones-carousel-wrap{display:flex;align-items:center;justify-content:center;gap:16px;}
  .phones-nav-btn{position:relative;z-index:12;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.55);border:1px solid rgba(27,22,32,.18);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;flex-shrink:0;transition:background .2s ease,transform .15s ease;}
  .phones-nav-btn:hover{background:#fff;}
  .phones-nav-btn:active{transform:scale(.92);}
  .phone{
    width:220px;background:#0E0B12;border-radius:34px;padding:10px;box-shadow:0 30px 50px -22px rgba(27,22,32,.4);
    flex-shrink:0;
  }
  .phone.is-side{width:186px;margin-bottom:26px;opacity:.88;}
  /* Doorschuivende carrousel: elke post heeft een vaste telefoon, alleen de positie verandert */
  .phones-track{position:relative;flex:1;height:450px;max-width:740px;}
  .phones-track .phone{position:absolute;left:50%;top:50%;width:248px;margin:0;
    transition:transform .55s cubic-bezier(.33,1,.5,1),opacity .55s ease;will-change:transform;}
  .phones-track .phone[data-slot="0"]{transform:translate(-50%,-50%) scale(1);opacity:1;z-index:6;}
  .phones-track .phone[data-slot="-1"]{transform:translate(-50%,-50%) translateX(-248px) scale(.845);opacity:.88;z-index:5;}
  .phones-track .phone[data-slot="1"]{transform:translate(-50%,-50%) translateX(248px) scale(.845);opacity:.88;z-index:5;}
  .phones-track .phone[data-slot="far-left"]{transform:translate(-50%,-50%) translateX(-420px) scale(.7);opacity:0;z-index:1;pointer-events:none;}
  .phones-track .phone[data-slot="far-right"]{transform:translate(-50%,-50%) translateX(420px) scale(.7);opacity:0;z-index:1;pointer-events:none;}
  @media(prefers-reduced-motion: reduce){.phones-track .phone{transition:none;}}
  .phone-notch{width:70px;height:18px;background:#0E0B12;border-radius:0 0 12px 12px;margin:0 auto;position:relative;z-index:2;margin-bottom:-18px;}
  .phone-screen{background:#fff;border-radius:26px;overflow:hidden;}
  .phone-header{display:flex;align-items:center;gap:8px;padding:12px 12px 8px;}
  .phone-avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--teal),var(--purple));flex-shrink:0;}
  .phone-header span{font-size:11px;font-weight:700;color:var(--ink);}
  .phone-media{
    position:relative;aspect-ratio:9/16;overflow:hidden;
    background:linear-gradient(120deg, var(--purple), var(--teal), var(--pink), var(--purple));
    background-size:300% 300%;
    animation:phoneMove 7s ease-in-out infinite;
  }
  @keyframes phoneMove{
    0%{background-position:0% 30%;}
    50%{background-position:100% 70%;}
    100%{background-position:0% 30%;}
  }
  .phone-play{
    position:absolute;top:12px;right:12px;background:rgba(0,0,0,.45);color:#fff;border-radius:999px;
    width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:10px;
  }
  .phone-live{
    position:absolute;top:12px;left:12px;background:rgba(255,255,255,.92);color:var(--ink);border-radius:999px;
    padding:3px 9px 3px 7px;font-size:9.5px;font-weight:700;display:flex;align-items:center;gap:5px;
  }
  .phone-live::before{content:'';width:6px;height:6px;border-radius:50%;background:#E23D3D;animation:pulseDot 1.4s ease-in-out infinite;}
  @keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.35;}}

  /* ---------- Gesimuleerd vacaturefilmpje: wisselende tekst + voortgangsbalk ---------- */
  .phone-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
  .phone-media:has(.phone-video-caption)::after{content:'';position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(to top,rgba(0,0,0,.55),transparent);pointer-events:none;z-index:1;}
  /* Voortgangsbalk alleen bij eigen overlay-teksten */
  .phone-media:not(:has(.phone-video-caption)) .phone-video-progress{display:none;}
  .phone-live,.phone-play{z-index:2;}
  .phone-video-captions{position:absolute;left:12px;right:12px;bottom:22px;z-index:2;min-height:44px;}
  .phone-video-caption{position:absolute;left:0;right:0;bottom:0;color:#fff;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15px;line-height:1.2;text-shadow:0 2px 10px rgba(0,0,0,.45);opacity:0;animation:captionCycle 9s ease-in-out infinite;}
  .phone-video-caption:nth-child(2){animation-delay:3s;}
  .phone-video-caption:nth-child(3){animation-delay:6s;}
  @keyframes captionCycle{
    0%{opacity:0;transform:translateY(10px);}
    5%,27%{opacity:1;transform:translateY(0);}
    32%,100%{opacity:0;transform:translateY(-8px);}
  }
  .phone-video-progress{position:absolute;left:10px;right:10px;bottom:10px;height:3px;border-radius:2px;background:rgba(255,255,255,.35);z-index:2;overflow:hidden;}
  .phone-video-progress::after{content:'';position:absolute;left:0;top:0;bottom:0;background:#fff;border-radius:2px;animation:videoProgress 9s linear infinite;}
  @keyframes videoProgress{from{width:0;}to{width:100%;}}
  @media(prefers-reduced-motion: reduce){
    .phone-video-caption{animation:none;opacity:0;}
    .phone-video-caption:first-child{opacity:1;transform:none;}
    .phone-video-progress::after{animation:none;width:40%;}
  }
  .phone-actions{display:flex;align-items:center;gap:12px;padding:10px 12px 4px;}
  .phone-actions i{font-size:15px;color:var(--ink);}
  .phone-actions .heart{color:#E23D3D;animation:heartBeat 1.8s ease-in-out infinite;}
  @keyframes heartBeat{0%,100%{transform:scale(1);}15%{transform:scale(1.22);}30%{transform:scale(1);}}
  .phone-likes{padding:0 12px;font-size:11px;font-weight:700;color:var(--ink);}
  .phone-caption{padding:4px 12px 0;margin-bottom:14px;font-size:10.5px;color:var(--muted);line-height:1.4;height:34px;box-sizing:border-box;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .phone-caption b{color:var(--ink);}

  /* ---------- Klikbare kanaalfilters boven de homepage-carrousel ---------- */
  .hp-platform-filter{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:20px 0 8px;}
  .hp-platform-pil{border:none;box-shadow:var(--zweefschaduw);border-radius:999px;padding:8px 16px;font-size:12.5px;
    font-weight:700;cursor:pointer;background:transparent;transition:background .15s ease,color .15s ease;}
  .hp-platform-pil:hover{background:rgba(255,255,255,.6);}
  .hp-platform-pil.is-actief{background:var(--ink);color:#fff;}

  /* ---------- Eenvoudige weergave bij minder dan drie video's: naast elkaar, geen schuifcarrousel ---------- */
  .phones-track.is-simpel{position:static;display:flex;align-items:center;justify-content:center;
    flex-wrap:wrap;gap:28px;height:auto;padding:24px 0;max-width:100%;}
  .phones-track.is-simpel .phone:not([data-slot="far-left"]):not([data-slot="far-right"]){
    position:static;left:auto;top:auto;margin:0;transform:none!important;opacity:1!important;}
  .phones-track.is-simpel .phone[data-slot="far-left"],
  .phones-track.is-simpel .phone[data-slot="far-right"]{display:none!important;}

  /* ---------- TikTok-uitstraling: geen wit Instagram-kader, video vult het hele scherm ---------- */
  .phone[data-platform="tiktok"] .phone-header,
  .phone[data-platform="tiktok"] .phone-actions,
  .phone[data-platform="tiktok"] .phone-likes,
  .phone[data-platform="tiktok"] .phone-caption{display:none!important;}
  .phone[data-platform="tiktok"] .phone-screen{background:#000!important;}
  .phone[data-platform="tiktok"] .phone-media{height:100%!important;aspect-ratio:9/16!important;animation:none!important;background:#000!important;}
  .phone-media-tiktok{position:relative;}
  .phone-media-tiktok::after{content:'';position:absolute;left:0;right:0;bottom:0;height:42%;
    background:linear-gradient(to top,rgba(0,0,0,.6),transparent);pointer-events:none;z-index:1;}
  .phone-tiktok-rail{position:absolute;right:9px;bottom:64px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:14px;}
  .phone-tiktok-rail .ttr-avatar{width:28px;height:28px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,var(--teal),var(--purple));border:2px solid #fff;}
  .phone-tiktok-rail .ttr-item{display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;
    font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.55);}
  .phone-tiktok-rail .ttr-item i{font-size:18px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5));}
  .phone-tiktok-rail .ttr-item .fa-heart{color:#FE2C55;}
  .phone-tiktok-rail .ttr-disc{width:24px;height:24px;border-radius:50%;background:#0E0B12;border:2px solid #fff;
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;animation:tiktokSpin 3s linear infinite;flex-shrink:0;}
  @keyframes tiktokSpin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
  .phone-tiktok-bottom{position:absolute;left:12px;right:56px;bottom:14px;z-index:3;color:#fff;}
  .phone-tiktok-bottom .ttb-user{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:12px;
    text-shadow:0 1px 6px rgba(0,0,0,.55);}
  .phone-tiktok-bottom .ttb-caption{font-size:10.5px;line-height:1.35;margin-top:3px;text-shadow:0 1px 6px rgba(0,0,0,.55);
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .phone-tiktok-bottom .ttb-sound{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:9.5px;
    text-shadow:0 1px 6px rgba(0,0,0,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  @media(prefers-reduced-motion: reduce){.phone-tiktok-rail .ttr-disc{animation:none;}}

  @media(max-width:900px){.hero-grid,.showcase{grid-template-columns:1fr;}.cards-3{grid-template-columns:1fr;}.nav-links{display:none;}.showcase{padding:0;}}
  @media(max-width:640px){
    /* clip in plaats van hidden: houdt zijwaartse overloop tegen zonder dat
       de vastgezette navigatiebalk zijn werking verliest */
    html,body{overflow-x:clip;max-width:100vw;}
    .wrap{padding:0 20px;}
    .stat-strip{flex-direction:column;align-items:stretch;gap:14px;padding:24px 20px;}
    .specialist-strip{flex-direction:column;align-items:flex-start;gap:16px;padding:24px 20px;}
    .stat-strip>div{flex-wrap:wrap;gap:10px;}
    .stat-box{flex:1 1 auto;min-width:90px;}
    .hero h1{font-size:32px;}
    .hero-grid,.showcase,.channel-showcase{min-width:0;}
    .phones-section{padding:36px 0 110px;}
    .phones-wave{height:70px;}
    .phones-carousel-wrap{gap:6px;}
    .phones-nav-btn{width:34px;height:34px;font-size:12px;}
    .phones-track{height:430px;}
    .phones-track .phone{width:186px;}
    .phones-track .phone[data-slot="-1"]{transform:translate(-50%,-50%) translateX(-104px) scale(.62);opacity:.5;}
    .phones-track .phone[data-slot="1"]{transform:translate(-50%,-50%) translateX(104px) scale(.62);opacity:.5;}
    .phones-grid>*{flex-shrink:0;}
  }  /* ---------- Vacaturepagina (overlay) ---------- */
  #vacatures-overlay{display:none;position:fixed;inset:0;z-index:9998;background:#fff;flex-direction:column;}
  #vacatures-overlay .organic-nav,#vacatures-overlay .vac-filters{flex-shrink:0;}
  .organic-nav--overlay .organic-nav-links a.is-active{color:var(--ink);font-weight:800;border-bottom:2px solid var(--lime);padding-bottom:2px;}
  .vac-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;background:var(--ink);flex-shrink:0;}
  .vac-topbar-brand{display:flex;align-items:center;gap:10px;font-weight:800;color:#fff;font-size:15px;}
  .vac-topbar-brand .logo-mark{width:22px;height:22px;background:var(--teal);border-radius:6px;}
  .vac-close{font-family:'Inter',sans-serif;font-weight:700;font-size:13px;background:#fff;color:var(--ink);border:none;border-radius:999px;padding:8px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;}

  /* ---------- Blogoverlay ---------- */
  #blog-overlay{display:none;position:fixed;inset:0;z-index:9000;background:var(--paper);overflow-y:auto;}
  /* ---------- Contactpagina (overlay, zelfde patroon als vacatures/blog) ---------- */
  #contact-overlay{display:none;position:fixed;inset:0;z-index:9000;background:var(--paper);overflow-y:auto;}
  /* ---------- Het team ---------- */
  #team-overlay{display:none;position:fixed;inset:0;z-index:9000;background:var(--paper);overflow-y:auto;}
  .team-wrap{padding-bottom:90px;margin-top:-40px;position:relative;z-index:3;}
  .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
  /* Drie rolkaarten met ronde foto (naar voorbeeld) */
  .team-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .role-card{background:#fff;border-radius:26px;padding:30px 28px 28px;box-shadow:0 22px 44px -28px rgba(27,22,32,.3);display:flex;flex-direction:column;}
  .role-head{margin-bottom:22px;}
  .role-card h3{font-size:18px;margin:0 0 4px;}
  .role-title{display:block;font-size:14px;color:var(--sage-dark);font-weight:600;line-height:1.4;}
  .role-photo{position:relative;width:100%;aspect-ratio:1/1;border-radius:50%;background:linear-gradient(150deg,#2A2430,#151119);display:flex;align-items:center;justify-content:center;margin-bottom:24px;}
  .role-photo::after{content:attr(data-ini);font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;font-weight:800;font-size:56px;color:rgba(255,255,255,.22);}
  .role-photo .team-socials{top:8%;right:2%;}
  .role-photo--open{background:var(--sage);color:var(--lime);}
  .role-photo--open::after{content:"+";font-family:'Archivo',sans-serif;font-weight:800;font-size:64px;color:var(--lime);}
  .role-photo--open i{display:none;}
  .role-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;font-size:14.5px;color:var(--ink);}
  .role-foot a{color:var(--ink);}
  .role-foot a:hover{color:var(--lime);}
  .role-foot--open p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0 0 16px;}
  .role-foot--open .organic-cta-pill{align-self:flex-start;font-size:13.5px;}
  @media(max-width:900px){.team-roles{grid-template-columns:1fr;max-width:420px;margin:0 auto;}}
  .team-card{border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 22px 44px -28px rgba(27,22,32,.3);display:flex;flex-direction:column;}
  .team-photo{position:relative;aspect-ratio:1/1;background:linear-gradient(150deg,#2A2430,#151119);display:flex;align-items:center;justify-content:center;}
  .team-photo::after{content:attr(data-ini);font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;font-weight:800;font-size:52px;color:rgba(255,255,255,.22);letter-spacing:.02em;}
  .team-socials{position:absolute;top:12px;right:12px;display:flex;gap:8px;z-index:2;}
  .team-socials a{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;transition:transform .15s ease,background .2s ease;}
  .team-socials a:hover{transform:translateY(-2px);background:var(--lime);}
  .team-body{padding:18px 18px 18px;flex:1;display:flex;flex-direction:column;}
  .team-body h3{font-size:17px;margin:0 0 4px;}
  .team-role{font-size:12.5px;color:rgba(27,22,32,.7);font-weight:600;}
  .team-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:18px;}
  .team-tel{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
  .team-tel i{font-size:11px;}
  .team-mail{background:var(--ink);color:#fff;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:12.5px;padding:9px 16px;border-radius:999px;flex-shrink:0;transition:background .2s ease;}
  .team-mail:hover{background:var(--lime);}
  .team-cta{margin-top:40px;background:var(--sage);border-radius:22px;padding:34px 30px;text-align:center;}
  .team-cta h3{font-size:20px;margin:0 0 8px;}
  .team-cta p{font-size:14px;color:rgba(27,22,32,.75);margin:0 0 20px;}
  .team-cta .organic-cta-pill{display:inline-flex;align-items:center;gap:9px;font-size:14px;padding:13px 24px;}
  @media(max-width:1100px){.team-grid{grid-template-columns:repeat(3,1fr);}}
  @media(max-width:820px){.team-grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.team-grid{grid-template-columns:1fr;}.team-foot{flex-direction:column;align-items:flex-start;}}
  .contact-hero{position:relative;background:var(--sage);padding:64px 0 120px;overflow:hidden;}
  .contact-hero .wrap{max-width:720px;text-align:center;position:relative;z-index:2;}
  .contact-hero h1{font-size:40px;color:var(--ink);margin:16px 0 14px;}
  .contact-hero h1 .hl-orange{color:var(--lime);}
  .contact-hero p{font-size:15.5px;line-height:1.65;color:rgba(27,22,32,.75);margin:0;}
  .contact-wave{position:absolute;left:0;bottom:-1px;width:100%;height:90px;display:block;line-height:0;z-index:1;}
  .contact-grid{display:grid;grid-template-columns:1.25fr .85fr;gap:28px;align-items:start;padding-top:8px;padding-bottom:90px;margin-top:-40px;position:relative;z-index:3;}
  .contact-form-card,.contact-info-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px 30px 28px;box-shadow:0 24px 48px -30px rgba(27,22,32,.25);}
  .contact-form-card h3,.contact-info-card h3{font-size:18px;margin:0 0 18px;}
  .contact-topics{display:flex;flex-wrap:wrap;gap:8px;}
  .apply-field .contact-topics label{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;text-align:left;line-height:1.2;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:7px 12px;cursor:pointer;text-transform:none;letter-spacing:0;margin:0;}
  .apply-field .contact-topics label:has(input:checked){border-color:var(--lime);background:var(--lime-tint);}
  .contact-topics input{accent-color:var(--lime);margin:0;}
  .contact-submit{border:none;cursor:pointer;font-size:14px;padding:13px 24px;margin-top:6px;display:inline-flex;align-items:center;gap:9px;}
  .contact-privacy{font-size:11.5px;color:var(--muted);margin-top:12px;}
  .contact-aside{display:flex;flex-direction:column;gap:18px;}
  .contact-line{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink);}
  .contact-line:last-child{border-bottom:none;padding-bottom:0;}
  .contact-line i{width:38px;height:38px;border-radius:11px;background:var(--lime-tint);color:var(--lime);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
  .contact-line b{display:block;font-size:14px;}
  .contact-line small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;}
  .contact-info-card--blue{background:var(--sage);border-color:transparent;}
  .contact-info-card--blue p{font-size:13.5px;line-height:1.6;color:rgba(27,22,32,.75);margin:0 0 18px;}
  .contact-info-card--blue .organic-btn-dark{color:var(--ink);}
  #contact-success{text-align:center;padding:10px 0 6px;}
  .contact-success-icon{width:56px;height:56px;border-radius:50%;background:var(--lime);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 16px;}
  #contact-success p{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 20px;}
  #contact-success .organic-cta-pill{border:none;cursor:pointer;}
  @media(max-width:900px){.contact-grid{grid-template-columns:1fr;}.contact-hero h1{font-size:30px;}}
  @media(max-width:600px){.contact-hero{padding:44px 0 96px;}.contact-form-card,.contact-info-card{padding:22px 18px;}}
  .blog-body{max-width:1100px;margin:0 auto;padding:44px 32px 90px;}
  .blog-intro{max-width:560px;margin-bottom:36px;}
  .blog-intro h1{font-size:32px;margin:14px 0 12px;}
  .blog-intro p{color:var(--muted);font-size:15px;line-height:1.6;}
  .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .blog-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;display:flex;flex-direction:column;}
  .blog-card:hover{transform:translateY(-4px);box-shadow:0 20px 34px -22px rgba(27,22,32,.24);}
  .blog-card-cover{height:150px;background-size:cover;background-position:center;
    background-color:var(--line);}
  .blog-card-body{padding:18px 20px 22px;flex:1;display:flex;flex-direction:column;}
  /* zelfde letter als de menubalk bovenin: IBM Plex Mono in hoofdletters */
  .blog-card-tag{display:inline-flex;align-self:flex-start;
    font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:500;
    letter-spacing:.09em;text-transform:uppercase;
    padding:0;margin-bottom:9px;background:none!important;color:var(--muted)!important;}
  .blog-card h3{font-size:16.5px;margin:0 0 8px;line-height:1.3;}
  .blog-card p{font-size:13px;color:var(--muted);line-height:1.55;margin:0 0 14px;flex:1;}
  .blog-card-meta{font-size:11.5px;color:var(--taupe);font-weight:600;}
  .blog-article{max-width:680px;margin:0 auto;}
  .blog-back{background:none;border:none;font-family:'Inter',sans-serif;font-weight:700;font-size:13px;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:0;margin-bottom:26px;}
  .blog-back:hover{color:var(--ink);}
  .blog-article-tag{display:inline-flex;font-size:11px;font-weight:700;padding:5px 13px;border-radius:999px;margin-bottom:16px;}
  .blog-article h1{font-size:30px;line-height:1.25;margin:0 0 14px;}
  .blog-article-meta{font-size:12.5px;color:var(--taupe);font-weight:600;margin-bottom:30px;}
  .blog-article-body p{font-size:15px;line-height:1.75;color:var(--ink);margin:0 0 20px;}
  .blog-article-body h3{font-size:19px;margin:28px 0 12px;}
  @media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr;}}
  @media(max-width:600px){.blog-grid{grid-template-columns:1fr;}.blog-intro h1{font-size:26px;}.blog-article h1{font-size:24px;}}
  .vac-filters{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--paper);flex-wrap:wrap;}
  .vac-filter-search{display:flex;align-items:center;gap:8px;background:var(--teal-tint);border-radius:999px;padding:9px 16px;flex:1;min-width:180px;color:#0E7478;}
  .vac-filter-search input{border:none;background:none;outline:none;font-family:'Inter',sans-serif;font-size:13.5px;color:var(--ink);flex:1;min-width:0;}
  .vac-filter-search input::placeholder{color:#3F9A9D;}
  .vac-filters select{font-family:'Inter',sans-serif;font-size:13px;font-weight:600;padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;flex-shrink:0;}
  .vac-filters select:hover{border-color:var(--ink);}
  .vac-filter-reset{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:700;padding:9px 15px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;flex-shrink:0;}
  .vac-filter-reset:hover{border-color:var(--ink);color:var(--ink);}
  .vac-filter-count{font-size:12px;color:var(--muted);white-space:nowrap;margin-left:auto;flex-shrink:0;}
  .vac-body{display:flex;flex:1;min-height:0;}
  @media(max-width:860px){.vac-body{height:auto;}}
  .vac-list{width:420px;flex-shrink:0;overflow-y:auto;border-right:1px solid var(--line);padding:18px;background:var(--paper);}
  .vac-card{border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:12px;cursor:pointer;transition:border-color .15s ease, box-shadow .15s ease;}
  .vac-card:hover{box-shadow:0 10px 24px -16px rgba(27,22,32,.3);}
  .vac-card.active{border-color:var(--teal);background:var(--teal-tint);}
  .vac-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:4px;}
  .vac-card-company{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px;}
  .vac-card-title{font-weight:800;font-size:15.5px;color:var(--ink);line-height:1.3;}
  .vac-badge-new{flex-shrink:0;background:var(--ink);color:#fff;font-size:9.5px;font-weight:800;padding:4px 9px;border-radius:999px;letter-spacing:.02em;}
  .vac-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;}
  .vac-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--ink);background:var(--purple-tint);padding:4px 10px;border-radius:999px;}
  .vac-tag-sector{background:var(--yellow-tint);color:#8A5A00;}
  .vac-tag-level{background:var(--teal-tint);color:#0E7478;}
  .vac-detail{flex:1;overflow-y:auto;}
  .vac-detail-head{background:var(--teal-tint);padding:36px 40px 28px;}
  .vac-in-ontwikkeling{background:var(--yellow-tint);color:#8A5A00;padding:14px 24px;
    font-size:13.5px;text-align:center;font-weight:500;box-shadow:var(--zweefschaduw);
    margin:16px 16px 0;border-radius:10px;}
  .vac-in-ontwikkeling strong{font-weight:800;}
  .vac-detail-company{font-size:12px;font-weight:700;color:#0E7478;text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px;}
  .vac-detail-title{font-size:28px;font-weight:800;color:var(--ink);line-height:1.2;margin-bottom:16px;}
  .vac-detail-tags{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px;}
  .vac-detail-actions{display:flex;gap:12px;}
  /* ---------- Sollicitatieformulier ---------- */
  #apply-overlay{display:none;position:fixed;inset:0;z-index:10000;background:rgba(27,22,32,.5);align-items:center;justify-content:center;padding:20px;}
  #apply-overlay.open{display:flex;}
  .apply-card{background:#fff;border-radius:20px;max-width:440px;width:100%;padding:32px;position:relative;max-height:90vh;overflow-y:auto;}
  .apply-close{position:absolute;top:16px;right:16px;width:30px;height:30px;border-radius:50%;background:var(--teal-tint);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);font-size:13px;}
  .apply-card h3{font-size:19px;margin-bottom:4px;}
  .apply-card .apply-sub{font-size:13px;color:var(--muted);margin-bottom:20px;}
  .apply-field{margin-bottom:14px;}
  .apply-field label{display:block;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;}
  /* alles in het contactformulier is verplicht behalve bedrijf; dat staat erbij */
  .veld-optioneel{font-weight:500;text-transform:none;letter-spacing:0;opacity:.72;}
  .apply-field input,.apply-field textarea{width:100%;box-sizing:border-box;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;font-family:'Inter',sans-serif;font-size:13.5px;background:#fff;color:var(--ink);}
  .apply-field input:focus,.apply-field textarea:focus{outline:none;border-color:var(--ink);}
  .apply-field textarea{resize:vertical;min-height:80px;}
  .apply-row{display:flex;gap:10px;}
  .apply-row .apply-field{flex:1;}
  .apply-error{color:#D0342C;font-size:12px;margin-bottom:12px;display:none;}
  .apply-error.show{display:block;}
  .apply-submit{width:100%;margin-top:6px;justify-content:center;}
  .apply-success{text-align:center;padding:20px 0;}
  .apply-success i{font-size:34px;color:var(--teal);margin-bottom:14px;display:block;}
  .apply-success h3{margin-bottom:8px;}
  .apply-success p{font-size:13.5px;color:var(--muted);}
  .vac-share{width:46px;height:46px;border-radius:11px;border:1.5px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;}
  .vac-detail-body{padding:34px 40px 60px;max-width:760px;}
  .vac-detail-body h3{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:12px;margin-top:28px;}
  .vac-detail-body h3:first-child{margin-top:0;}
  .vac-detail-body p{font-size:14.5px;color:var(--muted);line-height:1.7;margin-bottom:14px;}
  .vac-detail-body ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;}
  .vac-detail-body li{display:flex;gap:10px;font-size:14px;color:var(--ink);align-items:flex-start;line-height:1.5;}
  .vac-detail-body li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--teal);flex-shrink:0;margin-top:7px;}
  @media(max-width:860px){.vac-body{flex-direction:column;height:auto;overflow-y:auto;}.vac-list{width:auto;border-right:none;border-bottom:1px solid var(--line);max-height:340px;}.vac-detail-head,.vac-detail-body{padding-left:20px;padding-right:20px;}.vac-detail-title{font-size:22px;}}

  /* ================= LIMITLESS-LOOK — alleen de verpakking, features ongemoeid ================= */
  :root{
    --ink:#161613; --paper:#F5F3EE; --line:#DAD6CC; --muted:#6B675E;
    --sage:#B5D3E7; --sage-2:#B5D3E7; --lime:#FF4D00;
    --zweefschaduw:0 10px 28px -10px rgba(22,22,19,.28), 0 2px 8px rgba(22,22,19,.10);
  }
  body{background:var(--paper);}

  /* ---------- Inloggen tijdelijk uitgeschakeld ----------
     Verwijder deze regel en de aria-disabled/onclick/title-toevoegingen
     bij de links zelf om het platform weer bereikbaar te maken. */
  a[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:auto;filter:grayscale(.4);}

  /* Koppen: zwarte highlight-balk op het kernwoord */
  h1,h2{font-variation-settings:'wdth' 122;letter-spacing:-.01em;}
  h3{font-variation-settings:'wdth' 112;}
  .hl-orange{background:var(--ink);color:#fff;padding:0 .16em;display:inline-block;}
  /* Wit wint van de eerdere oranje regels */
  h1 .hl-orange,h2 .hl-orange,h3 .hl-orange,
  .jobboard-block h2 .hl-orange,.werkenbij-text h2 .hl-orange,
  .phones-section .section-head h2 .hl-orange,.contact-hero h1 .hl-orange{color:#fff;}
  /* Op de zwarte band draait het om: lichte balk, donkere letters */
  .ats-section .hl-orange,.ats-head h2 .hl-orange{background:var(--paper);color:var(--ink);}

  /* Labels/kleine tekst in monospace */
  .pill{font-family:'IBM Plex Mono',monospace!important;font-weight:500!important;font-size:11px!important;
    letter-spacing:.07em;text-transform:uppercase;border-radius:0!important;border:none;box-shadow:var(--zweefschaduw);
    background:transparent!important;color:var(--ink)!important;padding:6px 12px!important;}
  .organic-badge{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
    border-radius:0;border:none;box-shadow:var(--zweefschaduw);background:transparent;color:var(--ink);}
  .organic-nav-links a{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);}
  .organic-stats-row span,.stack-counter,.contact-privacy,.mono{font-family:'IBM Plex Mono',monospace!important;}

  /* Knoppen: hoekig; oranje CTA of zwarte outline */
  .organic-cta-pill,.btn-teal,.team-mail,.contact-submit{border-radius:0!important;
    font-family:'IBM Plex Mono',monospace!important;letter-spacing:.05em;text-transform:uppercase;font-size:12px!important;
    background:var(--lime)!important;color:#fff!important;border:none;}
  .organic-btn-dark{border-radius:0;border:none;box-shadow:var(--zweefschaduw);background:transparent;color:var(--ink);
    font-family:'IBM Plex Mono',monospace;letter-spacing:.05em;text-transform:uppercase;font-size:12px;}
  .organic-btn-circle{border-radius:0;background:var(--lime);color:#fff;}
  .phones-nav-btn,.stack-nav-btn{border-radius:0;background:var(--paper);border:none;box-shadow:var(--zweefschaduw);color:var(--ink);box-shadow:none;}

  /* Nav + hero: gebroken wit met harde onderlijn; het gekleurde vlak achter de visual wordt een net kader */
  .organic-nav{background:var(--paper);}
  /* verloop van gebroken wit links naar zuiver wit rechts */
  .organic-hero{background:var(--paper);position:relative;}
  /* zelfde papierraster als op de krant, zodat de header erop aansluit */
  .organic-hero::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,.018) 0 1px, transparent 1px 3px);}
  .organic-hero > *{position:relative;z-index:1;}
  .organic-hero h1,.organic-hero p.organic-sub,.organic-stats-row b{color:var(--ink);}
  .organic-wave{display:none;}
  /* Geen kader: alleen de meekleurende vorm blijft over */
  .organic-hero-visual{background:transparent;border:none;min-height:560px;overflow:visible;}
  /* Kaarten binnen het vlak centreren i.p.v. eronder laten uitsteken */
  .rotator-card,#rotCardPhone,#rotCardLaptop,#rotCardWeb{bottom:auto!important;top:50%!important;}
  .rotator-card{transform:translate(-50%,-50%) translateY(14px) scale(.94);}
  .rotator-card.active{transform:translate(-50%,-50%) scale(1);}
  .rotator-blob{bottom:auto;top:50%;transform:translate(-50%,-50%);width:400px;height:400px;}
  /* Badges boven de blob houden en de bijschriften vrijlaten */
  .pop-badge{z-index:9;}
  #phoneBadges .pop-social:nth-child(3){bottom:126px!important;left:78px!important;}
  #phoneBadges .pop-social:nth-child(5){bottom:170px!important;right:88px!important;}
  /* Jobboard-cirkels netjes rondom de (kleinere) laptop */
  #laptopBadges .pop-circle:nth-child(1){top:118px!important;left:50%!important;margin-left:-34px;}
  #laptopBadges .pop-circle:nth-child(2){top:238px!important;right:44px!important;left:auto!important;}
  #laptopBadges .pop-circle:nth-child(3){top:392px!important;left:118px!important;}
  #laptopBadges .pop-circle:nth-child(4){top:392px!important;right:118px!important;left:auto!important;}
  #laptopBadges .pop-circle:nth-child(5){top:238px!important;left:44px!important;}
  /* Vacature-chips verspreid rondom het venster: twee boven, twee onder, één opzij */
  #webBadges .pop-chip:nth-child(1){top:118px!important;left:2px!important;right:auto!important;}
  #webBadges .pop-chip:nth-child(2){top:36px!important;left:96px!important;right:auto!important;}
  #webBadges .pop-chip:nth-child(3){top:74px!important;right:2px!important;left:auto!important;}
  #webBadges .pop-chip:nth-child(4){top:412px!important;left:36px!important;right:auto!important;}
  #webBadges .pop-chip:nth-child(5){top:466px!important;right:8px!important;left:auto!important;}
  .organic-hero-visual::before{content:none;}
  .rotator-blob{border-radius:0;opacity:1;}
  .organic-decor-ring{border-color:rgba(22,22,19,.3);}

  /* Secties: harde scheidingslijnen i.p.v. golven */
  .logo-marquee-wrap{background:var(--lime);overflow-x:clip;}
  .logo-item{display:inline-flex;align-items:center;flex-shrink:0;}
  .logo-item img{height:18px;width:auto;display:block;}
  /* Beeldmerken hebben meer hoogte nodig dan woordmerken om herkenbaar te blijven */
  .logo-item img[alt="CZ"]{height:26px;}
  @media(max-width:600px){.logo-marquee-wrap{padding:9px 0;}.logo-item img{height:15px;}.logo-item img[alt="CZ"]{height:21px;}}
  .phones-section{background:var(--sage);padding-bottom:64px;overflow-x:clip;}
  /* Sticky scrollbaan: de sectie blijft in beeld staan terwijl je scrollt, zodat je
     eerst beide carrousels te zien krijgt voordat de pagina verder gaat. De baan is
     hoger dan het scherm; die extra hoogte is precies de "scrollruimte" voor de wissel. */
  /* Deze baan was 220vh hoog en plakte vast, zodat je al scrollend de
     telefooncarrousel naar achteren zag gaan en de laptops naar voren. Nu beide
     in één carrousel staan, valt daar niets meer te wisselen: dan scroll je
     twee schermhoogtes terwijl de pagina stilstaat. Op een telefoon leest dat
     als 'hij gaat niet verder'. Dus een gewone sectiehoogte, zonder plakken. */
  .cases-baan{position:relative;}
  .cases-plakker{display:flex;flex-direction:column;justify-content:center;
    overflow:hidden;padding:8px 0 4px;}
  /* Twee carrousels op elkaar: de voorste staat scherp vooraan, de andere wacht
     kleiner en vervaagd erachter. Bij het scrollen wisselen ze van plek. */
  /* Vaste hoogte met beide lagen absoluut erin: zo veroorzaakt het hoogteverschil
     tussen telefoons en laptops geen sprong in de layout bij het wisselen. */
  /* Deze hoogte zat op 470 vast omdat .cases-plakker 100vh was en de kop er ook
     nog in moest. Dat plakken is eruit, dus de stapel mag nu meegroeien met de
     carrousel. Hij moet gelijk lopen met .phones-track verderop. */
  .cases-stapel{position:relative;height:620px;}
  .cases-stapel .cases-laag{position:absolute;inset:0;display:flex;flex-direction:column;
    justify-content:center;}
  @media(max-width:1200px){
    .cases-stapel{height:520px;}
  }
  @media(max-width:900px){
    .cases-stapel{height:430px;}
  }
  .cases-laag{transition:opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);}
  .cases-laag.is-voor{opacity:1;transform:scale(1);z-index:2;pointer-events:auto;}
  .cases-laag.is-achter{opacity:0;transform:scale(.86) translateY(26px);
    z-index:1;pointer-events:none;}
  @media(prefers-reduced-motion: reduce){
    .cases-laag{transition:none;}
  }
  .phones-section .section-head h2{color:var(--ink);}
  .phones-section .section-head p{color:rgba(22,22,19,.75);}
  .phones-wave{display:none;}
  .werkenbij-band{background:var(--sage);}
  .werkenbij-wave-top{display:none;}
  .jobboard-section{background:var(--paper);padding-bottom:80px;}
  .contact-hero{background:var(--sage);}
  .contact-wave{display:none;}
  .ats-section{background:var(--ink);}
  .ats-visual{border-radius:0;border:none;box-shadow:0 12px 30px -10px rgba(0,0,0,.4);}

  /* Kaarten/panelen: zwevend met zachte schaduw — maar NIET de apparaten zelf */
  .organic-card,.benefit-cover-card,.team-card,.role-card,.contact-form-card,.contact-info-card,
  .jobboard-block,.blog-card,.team-cta,.contact-info-card--blue{border-radius:0!important;box-shadow:var(--zweefschaduw)!important;border:none;}
  .organic-card-corner{display:none;}
  .ats-checks i,.jobboard-list-check i,.contact-line i,.team-socials a{border-radius:0;}

  /* Apparaten blijven zoals ze zijn: telefoons, laptops en browservensters houden hun ronde vorm en schaduw.
     De pop-badges blijven rond (herkenbaarheid van de kanaal-logo's). */
  /* ---------- Accent-cirkel achter de gewone muisaanwijzer ---------- */
  @media (hover:hover) and (pointer:fine){
    .cursor-ring{position:fixed;top:0;left:0;width:34px;height:34px;border-radius:50%;
      background:var(--lime);pointer-events:none;z-index:1;mix-blend-mode:multiply;
      transform:translate(-50%,-50%);transition:width .22s ease,height .22s ease,opacity .22s ease;opacity:.85;}
    /* Boven klikbare dingen groeit de cirkel */
    body.cursor-active .cursor-ring{width:52px;height:52px;}
    /* Boven tekstvelden uit beeld, zodat je het invoerpunt goed ziet */
    body.cursor-text .cursor-ring{opacity:0;}
  }
  @media (prefers-reduced-motion: reduce){
    .cursor-ring{transition:none;}
  }
  /* ===== VOORSTEL A: video vult het hele scherm, geen feed ===== */
  .phones-track .phone-header,
  .phones-track .phone-actions,
  .phones-track .phone-likes,
  .phones-track .phone-caption{display:none;}
  /* Telefoon exact op de oude maat: 220 breed, 390 hoog (midden). Video wordt bijgesneden. */
  .phones-track .phone-screen{aspect-ratio:200/370;}
  .phones-track .phone-media{height:100%;aspect-ratio:auto;}
  .phones-track .phone-video{object-fit:cover;object-position:center 55%;}
  /* Eigen overlay-teksten hoger plaatsen: het scherm is nu langer */
  .phones-track .phone-video-captions{bottom:46px;}
  .phones-track .phone-video-progress{bottom:26px;}

  /* Logo's één keer opgeslagen; in de balk hergebruikt als achtergrond */
  .lg-workon{background-image:url('../img/png-01.png');height:18px;}
  .lg-greenpeace{background-image:url('../img/png-02.png');height:18px;}
  .lg-cz{background-image:url('../img/png-03.png');height:26px;}
  .lg-ambitiebar{background-image:url('../img/png-04.png');height:26px;}
  .logo-item{display:inline-flex;align-items:center;flex-shrink:0;}
  .logo-item span{display:block;background-repeat:no-repeat;background-position:center;background-size:contain;}
  .lg-workon{width:87px;} .lg-greenpeace{width:112px;} .lg-cz{width:29px;} .lg-ambitiebar{width:71px;}
  @media(max-width:600px){.lg-workon{width:73px;height:15px;} .lg-greenpeace{width:94px;height:15px;} .lg-cz{width:23px;height:21px;} .lg-ambitiebar{width:58px;height:21px;}}
  /* Rolkaart met echte foto */
  .role-photo--foto{background-size:cover;background-position:center 22%;background-repeat:no-repeat;}
  .role-photo--foto::after{content:none;}
  .role-photo--iris{background-position:62% 30%;background-size:150%;}
  /* Echte schermopname van de werkenbij-site */
  /* Schermopname volledig tonen: laptopscherm volgt de verhouding van de opname */
  .wb-video{width:100%;height:100%;object-fit:cover;display:block;}
  .wb-screen{background:#fff;display:block;aspect-ratio:1894/982;}
  .werkenbij-laptop .mock-laptop-inner{aspect-ratio:auto;}
  /* Werkenbij: echte laptop-afbeelding met de schermopname in het scherm */
  /* Laptop 12% breder uitgerekt, zodat het scherm exact de videoverhouding krijgt */
  .wb-mock{position:relative;width:100%;max-width:620px;margin:0 auto;aspect-ratio:1.1231/1;}
  /* De band is paginabreed, dus de laptop mag links buiten de tekstmarge steken */
  .werkenbij-laptop{margin-left:0;}
  .wb-mock-frame{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:none;}
  .wb-mock-video{position:absolute;z-index:1;object-fit:cover;
    left:12.29%;   /* 43/350 */
    top:20.57%;    /* 72/350 */
    width:75.43%;  /* 264/350 */
    height:48.00%; /* 168/350 */}
  /* Team: social-knoppen in de accentkleur */
  .team-socials a{background:var(--lime);color:#fff;}
  .team-socials a:hover{background:var(--ink);}
  /* Tussenformaat: telefoons iets kleiner zodat ze binnen het venster blijven */
  @media(max-width:1200px){
    .phones-track .phone{width:210px;}
    .phones-track .phone[data-slot="-1"]{transform:translate(-50%,-50%) translateX(-204px) scale(.845);}
    .phones-track .phone[data-slot="1"]{transform:translate(-50%,-50%) translateX(204px) scale(.845);}
    .phones-track .phone[data-slot="far-left"]{transform:translate(-50%,-50%) translateX(-345px) scale(.7);}
    .phones-track .phone[data-slot="far-right"]{transform:translate(-50%,-50%) translateX(345px) scale(.7);}
    .phones-track{height:390px;}
  }
  /* Beoordelingsbalk rechtsboven de bedrijvenbalk */
  /* Verticaal gecentreerd in de ruimte tussen de schermen en de bedrijvenbalk */
  /* Beoordelingsbalk onder de kerncijfers */
  .organic-hero-grid .organic-badge{margin:26px 0 0;}
  /* Secties die tijdelijk uit de pagina zijn gehaald (blijven in de code staan) */
  .is-verborgen{display:none;}
  /* Vierkant pijltje naar beneden, net boven de bedrijvenbalk */
  /* Blijft onderaan het scherm staan tot je voorbij de bedrijvenbalk scrollt */
  .scroll-hint-rij{position:fixed;left:0;right:0;bottom:26px;display:flex;justify-content:center;
    z-index:50;pointer-events:none;transition:opacity .3s ease,transform .3s ease;}
  .scroll-hint-rij.is-weg{opacity:0;transform:translateY(14px);visibility:hidden;}
  .scroll-hint{pointer-events:auto;}
  .scroll-hint{width:44px;height:44px;border:none;box-shadow:var(--zweefschaduw);background:var(--paper);color:var(--ink);
    display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
    transition:background .2s ease,color .2s ease,transform .2s ease;
    animation:hintWip 2.4s ease-in-out infinite;}
  .scroll-hint:hover{background:var(--lime);color:#fff;border-color:var(--lime);animation:none;transform:translateY(2px);}
  @keyframes hintWip{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}
  @media(prefers-reduced-motion: reduce){.scroll-hint{animation:none;}}
  /* ---------- Mobiel menu (drie streepjes) ---------- */
  .menu-knop{display:none;width:42px;height:42px;border:none;box-shadow:var(--zweefschaduw);background:var(--paper);
    align-items:center;justify-content:center;cursor:pointer;padding:0;flex-shrink:0;margin-left:auto;margin-right:12px;}
  .menu-knop span{display:block;width:18px;height:2px;background:var(--ink);position:relative;transition:background .2s ease;}
  .menu-knop span::before,.menu-knop span::after{content:'';position:absolute;left:0;width:18px;height:2px;background:var(--ink);
    transition:transform .3s ease,top .3s ease;}
  .menu-knop span::before{top:-6px;} .menu-knop span::after{top:6px;}
  body.menu-open .menu-knop span{background:transparent;}
  body.menu-open .menu-knop span::before{top:0;transform:rotate(45deg);}
  body.menu-open .menu-knop span::after{top:0;transform:rotate(-45deg);}

  .menu-paneel{position:fixed;inset:0;background:var(--paper);z-index:99000;
    display:flex;flex-direction:column;padding:100px 34px 40px;
    transform:translateY(-100%);transition:transform .38s cubic-bezier(.22,1,.36,1);visibility:hidden;}
  body.menu-open .menu-paneel{transform:none;visibility:visible;}
  .menu-paneel a{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 118;font-weight:800;
    text-transform:uppercase;font-size:26px;color:var(--ink);padding:14px 0;border-bottom:1px solid var(--line);}
  .menu-paneel a:last-of-type{border-bottom:none;}
  .menu-paneel .menu-inloggen{margin-top:26px;background:var(--lime);color:#fff;border:none;
    text-align:center;padding:16px;font-size:15px;}
  .menu-sluit{position:absolute;top:26px;right:30px;width:42px;height:42px;border:none;box-shadow:var(--zweefschaduw);
    background:var(--paper);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;}

  @media(max-width:900px){
    .menu-knop{display:flex;}
    .organic-nav .wrap{align-items:center;}
  }
  @media(prefers-reduced-motion: reduce){
    .menu-paneel{transition:none;}
    .menu-knop span,.menu-knop span::before,.menu-knop span::after{transition:none;}
  }
  /* ---------- Dienstverleningspagina ---------- */
  #dienst-overlay{display:none;position:fixed;inset:0;z-index:9000;background:var(--paper);overflow-y:auto;}
  .dv-blok{padding:56px 0;}
  .dv-blok--blauw{background:var(--sage);}
  .dv-blok--wit{background:var(--paper);}
  .dv-blok--extra{background:var(--lime-tint);}
  .dv-blok--ats{background:var(--ink);color:var(--paper);border-bottom:none;}
  .dv-nr{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    border:none;box-shadow:var(--zweefschaduw);padding:5px 11px;display:inline-block;margin-bottom:16px;}
  .dv-blok h2{font-size:30px;margin:0 0 12px;}
  .dv-blok--ats h2{color:var(--paper);}
  .dv-blok--ats .hl-orange{background:var(--paper);color:var(--ink);}
  .dv-intro{font-size:15.5px;line-height:1.65;max-width:660px;margin:0 0 28px;color:rgba(22,22,19,.78);}
  .dv-blok--ats .dv-intro{color:#B9B5AA;}
  .kan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px;}
  .kan-kaart{background:var(--paper);border:none;box-shadow:var(--zweefschaduw);padding:18px 18px 20px;}
  .kan-kaart b{display:block;font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;
    font-weight:800;text-transform:uppercase;font-size:14px;margin-bottom:7px;}
  .kan-kaart span{font-size:13px;line-height:1.55;color:rgba(22,22,19,.75);}
  .dv-cta{margin-top:6px;}
  .dv-cta .organic-cta-pill{display:inline-block;font-size:13px;padding:14px 26px;}
  @media(max-width:600px){.dv-blok{padding:38px 0;}.dv-blok h2{font-size:23px;}}
  /* ---------- Rekenmodule op de dienstverleningspagina ---------- */
  .dv-blok--calc{background:var(--paper);}
  .calc-blok{display:grid;grid-template-columns:1.25fr .85fr;gap:22px;align-items:start;}
  .calc-invoer,.calc-uitkomst{border:none;box-shadow:var(--zweefschaduw);padding:22px 22px 24px;background:var(--paper);}
  .calc-uitkomst{background:var(--sage);position:sticky;top:20px;}
  .calc-regel{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;}
  .calc-regel label{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;font-weight:800;
    text-transform:uppercase;font-size:13px;}
  .calc-stepper{display:flex;align-items:center;border:none;box-shadow:var(--zweefschaduw);}
  .calc-stepper button{width:34px;height:34px;border:none;background:var(--paper);color:var(--ink);
    font-size:16px;line-height:1;cursor:pointer;font-family:inherit;}
  .calc-stepper button:hover{background:var(--lime);color:#fff;}
  .calc-stepper input{width:52px;height:34px;border:none;border-left:1px solid var(--line);
    border-right:1px solid var(--line);text-align:center;font-family:'IBM Plex Mono',monospace;font-size:14px;
    background:var(--paper);color:var(--ink);-moz-appearance:textfield;}
  .calc-stepper input::-webkit-outer-spin-button,.calc-stepper input::-webkit-inner-spin-button{
    -webkit-appearance:none;margin:0;}
  .calc-groep{margin-top:18px;}
  .calc-groepkop{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--muted);margin-bottom:9px;}
  .calc-kanaal{display:flex;align-items:center;gap:11px;border:1.5px solid var(--line);padding:10px 13px;
    margin-bottom:7px;cursor:pointer;transition:border-color .15s ease,background .15s ease;}
  .calc-kanaal:hover{border-color:var(--ink);}
  .calc-kanaal:has(input:checked){border-color:var(--ink);background:#fff;}
  .calc-kanaal input{accent-color:var(--lime);width:16px;height:16px;flex-shrink:0;}
  .calc-naam{font-size:13.5px;font-weight:600;}
  .calc-prijs{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:11.5px;color:var(--muted);
    white-space:nowrap;}
  .calc-uitkop{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;
    text-transform:uppercase;margin-bottom:14px;}
  .calc-rij{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
    padding:11px 0;border-bottom:1px solid rgba(22,22,19,.18);font-size:13.5px;}
  .calc-rij b{font-family:'IBM Plex Mono',monospace;font-size:14px;white-space:nowrap;}
  .calc-rij small{display:block;font-size:11px;color:rgba(22,22,19,.65);margin-top:3px;line-height:1.4;}
  .calc-rij--zacht{color:rgba(22,22,19,.72);}
  .calc-rij--totaal{border-bottom:1px solid var(--line);}
  .calc-rij--totaal b{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;font-weight:800;font-size:17px;}
  .calc-voet{font-size:11.5px;line-height:1.5;color:rgba(22,22,19,.7);margin:14px 0 16px;}
  .calc-uitkomst .organic-cta-pill{display:inline-block;font-size:13px;padding:13px 22px;}
  @media(max-width:900px){
    .calc-blok{grid-template-columns:1fr;}
    .calc-uitkomst{position:static;}
  }
  /* ---------- Uitklapmenu onder Dienstverlening ---------- */
  .organic-nav-links .heeft-sub{position:relative;}
  .sub-pijl{font-size:9px;margin-left:5px;}
  .sub-menu{position:absolute;top:100%;left:-14px;min-width:210px;background:var(--paper);
    border:none;box-shadow:var(--zweefschaduw);list-style:none;margin:0;padding:6px 0;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60;}
  .heeft-sub:hover .sub-menu,.heeft-sub:focus-within .sub-menu{opacity:1;visibility:visible;transform:none;}
  .sub-menu li{display:block;}
  .sub-menu a{display:block;padding:9px 16px;font-family:'IBM Plex Mono',monospace;font-size:11.5px;
    letter-spacing:.05em;text-transform:uppercase;color:var(--ink);white-space:nowrap;}
  .sub-menu a:hover{background:var(--lime);color:#fff;}

  /* ---------- Kanaalpagina ---------- */
  #kanaal-overlay{display:none;position:fixed;inset:0;z-index:9000;background:var(--paper);overflow-y:auto;}
  .kan-hero{background:var(--sage);padding:38px 0 44px;}
  .kan-terug{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink);margin-bottom:18px;border-bottom:1.5px solid var(--line);padding-bottom:2px;}
  .kan-hero h1{font-size:110px;line-height:.92;margin:14px 0 12px;max-width:750px;}
  @media(max-width:1100px){
    .kan-hero h1{font-size:74px;}
  }
  .kan-hero p{font-size:16px;line-height:1.6;max-width:660px;color:rgba(22,22,19,.78);margin:0;}
  .kan-body{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;
    padding-top:52px;padding-bottom:70px;}
  .kan-demo{display:flex;justify-content:center;align-items:center;min-height:340px;}
  .kan-demo .phone{width:250px;}
  .kan-tekst h2{font-size:24px;margin:0 0 18px;}
  .kan-tekst .jobboard-list-check{margin-bottom:24px;}
  .kan-platforms{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:26px;}
  .kan-platform{border:none;box-shadow:var(--zweefschaduw);padding:13px 14px;}
  .kan-platform b{display:block;font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;
    font-weight:800;text-transform:uppercase;font-size:12.5px;margin-bottom:5px;}
  .kan-platform span{font-size:12px;line-height:1.5;color:rgba(22,22,19,.75);}
  .kan-tekst .organic-cta-pill{display:inline-block;font-size:13px;padding:14px 24px;}
  @media(max-width:900px){
    .kan-body{grid-template-columns:1fr;gap:28px;}
    .kan-hero h1{font-size:44px;}
    .kan-platforms{grid-template-columns:1fr;}
    .sub-menu{position:static;opacity:1;visibility:visible;transform:none;border:none;padding:0;min-width:0;}
  }
  .menu-paneel a.menu-sub{font-size:16px;padding:10px 0 10px 18px;
    font-variation-settings:'wdth' 100;color:rgba(22,22,19,.72);}
  .kan-knop{display:inline-flex;align-items:center;gap:9px;margin-top:22px;
    border:2px solid var(--lime);background:var(--lime);color:#fff;
    font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
    padding:12px 20px;transition:background .2s ease,color .2s ease,border-color .2s ease;}
  .kan-knop:hover{background:var(--ink);border-color:var(--ink);color:#fff;}
  .kan-knop span{font-size:14px;}
  .kan-knoppen{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px;}
  .kan-knoppen .kan-knop{margin-top:0;}
  .kan-knoppen .organic-cta-pill{margin-top:0;}
  .calc-naam small{display:block;font-size:11px;font-weight:400;color:rgba(22,22,19,.6);margin-top:3px;line-height:1.4;}
  .calc-regel select{border:none;box-shadow:var(--zweefschaduw);background:var(--paper);color:var(--ink);
    font-family:'IBM Plex Mono',monospace;font-size:12.5px;padding:8px 10px;height:34px;cursor:pointer;}
  .calc-rij--soll{background:rgba(255,255,255,.55);margin:0 -22px;padding-left:22px;padding-right:22px;}
  .calc-rij--soll b{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;
    font-weight:800;font-size:17px;}
  .calc-bron{font-size:10.5px;line-height:1.5;color:rgba(22,22,19,.55);margin:-8px 0 16px;}
  /* ---------- Social-kanaalpagina: carrousel rechts, likes springen bij de wissel ---------- */
        .demo-social{position:relative;width:100%;overflow-x:clip;overflow-y:visible;}

  /* telefoons passend in de rechterkolom */
  .demo-social .phones-track{height:560px;max-width:100%;}
  .demo-social .phones-carousel-wrap{gap:6px;}
  .demo-social .phones-nav-btn{position:relative;z-index:12;}
  .demo-social .phones-track .phone{width:278px;}
  /* de schermen staan op een rij: hoe verder naar links, hoe kleiner.
     De grote preview staat rechts, de meldingen vallen links ernaast. */
  .demo-social .phones-track .phone[data-slot="0"]{transform:translate(-50%,-50%) translateX(165px) scale(1);
    z-index:6;opacity:1;}
  .demo-social .phones-track .phone[data-slot="-1"]{transform:translate(-50%,-50%) translateX(-40px) scale(.8);
    z-index:5;opacity:1;}
  .demo-social .phones-track .phone[data-slot="-2"]{transform:translate(-50%,-50%) translateX(-200px) scale(.72);
    z-index:4;opacity:1;}
  /* wat nog moet komen, wacht buiten beeld rechts */
  .demo-social .phones-track .phone[data-slot="1"],
  .demo-social .phones-track .phone[data-slot="2"]{transform:translate(-50%,-50%) translateX(360px) scale(.7);
    z-index:1;opacity:0;pointer-events:none;}

  /* volledige Instagram-opmaak: account boven, knoppen, likes en bijschrift onder */
  .demo-social .phone-screen{background:#fff;aspect-ratio:auto;}
  .demo-social .phone-header,
  .demo-social .phone-actions,
  .demo-social .phone-likes,
  .demo-social .phone-caption{display:flex;}
  .demo-social .phone-likes,
  .demo-social .phone-caption{display:block;}
  .demo-social .phone-media{height:auto;aspect-ratio:4/5;}
  .demo-social .phone-video{object-position:center 55%;}
  .demo-social .phone-caption{height:34px;}

  /* likes die bij de wissel achter het scherm vandaan springen */
  .pop-laag{position:absolute;left:50%;top:50%;width:0;height:0;z-index:1;pointer-events:none;}
  .pop-like{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity;}
  .pop-like svg{display:block;width:100%;height:auto;
    filter:drop-shadow(0 3px 9px rgba(22,22,19,.22));}
  @media(prefers-reduced-motion: reduce){
    .pop-like{display:none;}
  }
  /* tussenmaat: iets kleiner zodat de schermen binnen de kolom blijven */
  @media(max-width:1150px) and (min-width:901px){
    .demo-social .phones-track{height:500px;}
    .demo-social .phones-track .phone{width:234px;}
    .demo-social .phones-track .phone[data-slot="0"]{transform:translate(-50%,-50%) translateX(130px) scale(1);}
    .demo-social .phones-track .phone[data-slot="-1"]{transform:translate(-50%,-50%) translateX(-42px) scale(.8);}
    .demo-social .phones-track .phone[data-slot="-2"]{transform:translate(-50%,-50%) translateX(-185px) scale(.72);}
    .melding-laag{width:54%;left:5%;}
    .melding-tekst p{font-size:13px;}
  }
  @media(max-width:900px){
    .demo-social .phones-track{height:470px;}
    .demo-social .phones-track .phone{width:212px;}
    .demo-social .phones-track .phone[data-slot="0"]{transform:translate(-50%,-50%) translateX(58px) scale(1);}
    .demo-social .phones-track .phone[data-slot="-1"]{transform:translate(-50%,-50%) translateX(-92px) scale(.72);opacity:.6;}
    .demo-social .phones-track .phone[data-slot="-2"]{transform:translate(-50%,-50%) translateX(-190px) scale(.62);opacity:.35;}
  }
  /* Op een echte telefoon: klein - groot - klein, symmetrisch, zodat niets over de rand valt */
  @media(max-width:600px){
    .demo-social .phones-track{height:400px;}
    .demo-social .phones-track .phone{width:190px;}
    .demo-social .phones-track .phone[data-slot="0"]{transform:translate(-50%,-50%) translateX(0) scale(1);
      opacity:1;z-index:6;}
    .demo-social .phones-track .phone[data-slot="-1"]{transform:translate(-50%,-50%) translateX(-98px) scale(.6);
      opacity:1;z-index:5;}
    .demo-social .phones-track .phone[data-slot="1"]{transform:translate(-50%,-50%) translateX(98px) scale(.6);
      opacity:1;z-index:5;}
    .demo-social .phones-track .phone[data-slot="-2"]{opacity:0;pointer-events:none;z-index:1;}
  }
  /* ================= Eigen opmaak per kanaalpagina ================= */

  /* --- #01 Social: tekst links, carrousel rechts, chips in plaats van kaders --- */
  /* 'Social media marketing' past bij 110px niet in de max-width:750px van
     .kan-hero h1 en liep daardoor uit op drie regels. Zelfde oplossing als bij
     'content op locatie' en de hero's van 'wat we doen' en de vacatures: de
     breedtegrens eraf en de letter meeschalend met het venster, met 110px als
     bovengrens. Hij breekt dan na 'Social media', dus twee regels. */
  .is-kanaal-social .kan-hero h1{max-width:none;font-size:clamp(32px, 7.4vw, 110px);}
  .is-kanaal-social .kan-body{grid-template-columns:.82fr 1.18fr;gap:38px;}
  .is-kanaal-social .kan-tekst{order:1;}
  .is-kanaal-social .kan-demo{order:2;min-height:0;}
  .is-kanaal-social .kan-platforms{display:flex;flex-wrap:wrap;gap:8px;}
  .is-kanaal-social .kan-platform{border:none;box-shadow:var(--zweefschaduw);border-radius:999px;padding:8px 15px;
    cursor:pointer;transition:background .15s ease,color .15s ease;}
  .is-kanaal-social .kan-platform b{display:inline;font-size:12px;margin:0;}
  .is-kanaal-social .kan-platform span{display:none;}
  .is-kanaal-social .kan-platform:hover{background:var(--paper);}
  .is-kanaal-social .kan-platform.is-actief{background:var(--ink);}
  .is-kanaal-social .kan-platform.is-actief b{color:#fff;}
  .kan-platform-leeg{border:2px dashed rgba(22,22,19,.35);padding:40px 24px;text-align:center;
    font-size:13px;color:rgba(22,22,19,.6);width:100%;min-height:280px;display:flex;align-items:center;justify-content:center;}

  /* --- #02 Jobboards: licht, laptop over de volle breedte, platforms als lijst --- */
  .is-kanaal-jobboards .kan-hero{background:var(--paper);}
  .is-kanaal-jobboards .kan-body{grid-template-columns:1fr;gap:34px;}
  .is-kanaal-jobboards .kan-demo{order:1;min-height:0;border:none;box-shadow:var(--zweefschaduw);
    background:var(--sage);padding:26px 22px 8px;}
  .is-kanaal-jobboards .kan-tekst{order:2;display:grid;grid-template-columns:1fr 1.15fr;gap:38px;align-items:start;}
  .is-kanaal-jobboards .kan-tekst h2{grid-column:1;}
  .is-kanaal-jobboards .jobboard-list-check{grid-column:1;}
  .is-kanaal-jobboards .kan-platforms{grid-column:2;grid-row:1 / span 3;display:block;margin:0;}
  .is-kanaal-jobboards .kan-platform{border:none;border-top:1px solid var(--line);padding:14px 0;
    display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:baseline;}
  .is-kanaal-jobboards .kan-platform:last-child{border-bottom:1px solid var(--line);}
  .is-kanaal-jobboards .kan-knoppen{grid-column:1;}

  /* --- #03 Werkenbij: donkere kop, laptop groot en verschoven --- */
  .is-kanaal-werkenbij .kan-hero{background:var(--ink);border-bottom:none;}
  .is-kanaal-werkenbij .kan-hero h1{color:var(--paper);}
  .is-kanaal-werkenbij .kan-hero p{color:#B9B5AA;}
  .is-kanaal-werkenbij .kan-hero .dv-nr{color:var(--paper);box-shadow:none;background:rgba(255,255,255,.1);}
  .is-kanaal-werkenbij .kan-terug{color:var(--paper);border-bottom-color:var(--paper);}
  .is-kanaal-werkenbij .kan-body{grid-template-columns:1.35fr 1fr;gap:38px;
    background:var(--sage);margin-top:0;padding-top:48px;padding-bottom:56px;max-width:none;}
  .is-kanaal-werkenbij .kan-body > *{max-width:none;}
  .is-kanaal-werkenbij .kan-demo{margin-left:-90px;}
  .is-kanaal-werkenbij .kan-platforms{grid-template-columns:1fr;}
  .is-kanaal-werkenbij .kan-platform{background:var(--paper);}

  /* --- Content: warme tint, telefoon schuin, stappen genummerd --- */
  .is-kanaal-content .kan-hero{background:var(--lime-tint);}
  .is-kanaal-content .kan-body{grid-template-columns:1fr 1.1fr;gap:40px;}
  .is-kanaal-content .kan-demo{transform:rotate(-5deg);}
  .is-kanaal-content .kan-demo .phone{box-shadow:0 40px 70px -30px rgba(22,22,19,.45);}
  .is-kanaal-content .jobboard-list-check{counter-reset:stap;}
  .is-kanaal-content .jobboard-list-check li{align-items:center;gap:14px;}
  .is-kanaal-content .jobboard-list-check li i{counter-increment:stap;width:26px;height:26px;
    background:var(--lime);color:#fff;display:flex;align-items:center;justify-content:center;
    font-family:'IBM Plex Mono',monospace;font-size:11px;font-style:normal;margin-top:0;}
  .is-kanaal-content .jobboard-list-check li i::before{content:'0' counter(stap);}
  .is-kanaal-content .kan-platform{background:var(--lime-tint);border-color:var(--ink);}

  /* --- Multi-ATS: hele pagina donker, beeld over de volle breedte --- */
  #kanaal-overlay.is-kanaal-ats{background:var(--ink);}
  .is-kanaal-ats .kan-hero{background:var(--ink);text-align:center;}
  .is-kanaal-ats .kan-hero .wrap{max-width:760px;}
  .is-kanaal-ats .kan-hero h1{color:var(--paper);}
  .is-kanaal-ats .kan-hero p{color:#B9B5AA;margin:0 auto;}
  .is-kanaal-ats .kan-hero .dv-nr{color:var(--paper);box-shadow:none;background:rgba(255,255,255,.1);}
  .is-kanaal-ats .kan-terug{color:var(--paper);border-bottom-color:var(--paper);}
  .is-kanaal-ats .kan-body{grid-template-columns:1fr;gap:36px;}
  .is-kanaal-ats .kan-demo{order:1;min-height:0;}
  .is-kanaal-ats .kan-demo .ats-visual{max-width:100%;}
  .is-kanaal-ats .kan-tekst{order:2;text-align:center;}
  .is-kanaal-ats .kan-tekst h2{color:var(--paper);}
  .is-kanaal-ats .jobboard-list-check{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:left;}
  .is-kanaal-ats .jobboard-list-check li{color:var(--paper);}
  .is-kanaal-ats .kan-knoppen{justify-content:center;}

  @media(max-width:900px){
    .is-kanaal-social .kan-body,
    .is-kanaal-werkenbij .kan-body,
    .is-kanaal-content .kan-body{grid-template-columns:1fr;}
    .is-kanaal-jobboards .kan-tekst{grid-template-columns:1fr;}
    .is-kanaal-jobboards .kan-platforms{grid-column:1;grid-row:auto;}
    .is-kanaal-werkenbij .kan-demo{margin-left:0;}
    .is-kanaal-content .kan-demo{transform:none;}
    .is-kanaal-ats .jobboard-list-check{grid-template-columns:1fr 1fr;}
  }
  /* ---------- Vacaturepagina in de huisstijl ---------- */
  /* zoekveld: hoekig kader in plaats van lichtblauwe pil */
  #vacatures-overlay .vac-filter-search{background:var(--paper);border:none;box-shadow:var(--zweefschaduw);
    border-radius:0;color:var(--ink);padding:9px 14px;}
  #vacatures-overlay .vac-filter-search input{color:var(--ink);}
  #vacatures-overlay .vac-filter-search input::placeholder{color:var(--muted);}
  #vacatures-overlay .vac-filter-select{border-radius:0;border:none;box-shadow:var(--zweefschaduw);background:var(--paper);}

  /* geselecteerde vacature: wit met een oranje balk ervoor */
  #vacatures-overlay .vac-card{border-radius:0;}
  #vacatures-overlay .vac-card.active{background:#fff;border-color:var(--ink);border-width:2px;
    position:relative;box-shadow:none;}
  #vacatures-overlay .vac-card.active::before{content:'';position:absolute;left:-2px;top:-2px;bottom:-2px;
    width:6px;background:var(--lime);}

  /* kop van de gekozen vacature: gebroken wit met harde onderlijn */
  #vacatures-overlay .vac-detail-head{background:var(--paper);}
  #vacatures-overlay .vac-tag-level{background:var(--lime-tint);color:var(--ink);}
  /* laatste teal-accenten in lijn met de huisstijl */
  #vacatures-overlay .vac-detail-company{color:var(--muted);}
  #vacatures-overlay .vac-detail-body li::before{background:var(--lime);border-radius:0;width:8px;height:8px;margin-top:6px;}
  /* ---------- Foto van de opname op locatie ---------- */
  .shoot-blok{position:relative;width:100%;max-width:520px;margin:0 auto;}
  /* Hier stond een foto (jpg-01.jpg) als achtergrond. Die is eruit: dit vlak
     toont nu alleen de video. Wat overblijft is een donker vlak in het moment
     voordat de video geladen is -- hij staat op preload="none" en begint pas
     zodra het blok in beeld komt. Let op: geen overflow:hidden op .shoot-foto,
     want het label steekt er twee pixels links uit. */
  .shoot-foto{position:relative;aspect-ratio:2/3;border:none;box-shadow:var(--zweefschaduw);
    background:var(--ink);}
  .shoot-video{position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;display:block;z-index:0;}
  .shoot-label{z-index:2;}
  .shoot-label{position:absolute;left:-2px;bottom:26px;background:var(--lime);color:#fff;
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
    padding:7px 14px;}
  .shoot-telefoon{position:absolute;right:-46px;bottom:-30px;width:196px;
    filter:drop-shadow(0 26px 44px rgba(22,22,19,.4));}
  /* video van onderen bijgesneden, zodat de telefoon normale verhoudingen krijgt */
  .shoot-telefoon .phone-media{aspect-ratio:4/5;}
  .shoot-telefoon .phone-video{object-position:center 60%;}
  .shoot-telefoon .phone-caption{height:32px;overflow:hidden;}
  .shoot-telefoon .phone{width:100%;}
  .is-kanaal-content .kan-demo{transform:none;overflow:visible;padding-right:30px;}

  /* foto als kaart in het overzicht */
  .kan-kaart--foto{padding:0;position:relative;min-height:190px;overflow:hidden;
    background-image:url('../img/jpg-02.jpg');
    background-size:cover;background-position:center 35%;}
  .foto-label{position:absolute;left:0;bottom:14px;background:var(--lime);color:#fff;
    font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.07em;text-transform:uppercase;
    padding:6px 12px;}

  @media(max-width:900px){
    .shoot-telefoon{right:-10px;bottom:-20px;width:140px;}
    .is-kanaal-content .kan-demo{padding-right:0;}
  }
  /* ---------- Foto zwevend achter de contactblokken ---------- */
  #contact-overlay{position:fixed;}
  /* op brede schermen meet de foto zich aan de inhoudskolom, niet aan de vensterrand,
     zodat de overlap met het contactblok altijd gelijk blijft */
    background-image:url('../img/jpg-03.jpg');
    background-size:cover;background-position:center 32%;
    border:none;box-shadow:var(--zweefschaduw);z-index:1;pointer-events:none;
    box-shadow:0 40px 70px -34px rgba(22,22,19,.5);}
  #contact-overlay .contact-grid{position:relative;z-index:3;}
  @media(min-width:1240px){
  }

  /* ---------- Grote foto die half over de sectiegrens hangt ---------- */
  .dv-blok--extra{position:relative;}
  .dv-blok--extra .dv-intro{max-width:70%;}
  .shoot-uitsteker{position:absolute;right:5%;top:-46px;width:280px;aspect-ratio:2/3;
    background-image:url('../img/jpg-01.jpg');
    background-size:cover;background-position:center 30%;
    border:none;box-shadow:var(--zweefschaduw);z-index:4;
    box-shadow:0 44px 74px -34px rgba(22,22,19,.5);}
  .shoot-uitsteker .foto-label{left:-2px;bottom:18px;}
  @media(max-width:1200px){.shoot-uitsteker{width:230px;right:2%;top:-70px;}}
  @media(max-width:900px){
    .shoot-uitsteker{position:relative;right:auto;top:auto;width:100%;max-width:280px;
      margin:0 auto 22px;transform:none;}
    .dv-blok--extra .kan-grid,.dv-blok--extra .dv-intro{max-width:100%;}
  }
  /* ---------- Meldingen in de stijl van een telefoonbericht ---------- */
  .melding-laag{position:absolute;left:6%;top:10%;width:46%;height:74%;z-index:8;pointer-events:none;
    display:flex;flex-direction:column;justify-content:flex-end;gap:11px;overflow:hidden;}
  .melding{display:flex;align-items:flex-start;gap:9px;
    background:rgba(250,250,250,.93);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.6);border-radius:20px;padding:13px 15px;
    box-shadow:0 12px 28px -10px rgba(22,22,19,.35), 0 2px 6px rgba(22,22,19,.12);
    opacity:0;transform:translateX(-115%);}
  .melding.in{animation:meldingIn .6s cubic-bezier(.2,.9,.25,1) forwards;}
  .melding.uit{animation:meldingUit .45s ease forwards;}
  @keyframes meldingIn{
    0%{opacity:0;transform:translateX(-115%) scale(.94);}
    72%{opacity:1;transform:translateX(5px) scale(1.01);}
    100%{opacity:1;transform:translateX(0) scale(1);}
  }
  @keyframes meldingUit{
    to{opacity:0;transform:translateY(-14px) scale(.96);}
  }
  /* app-icoontje zoals op een telefoon: afgeronde vierkant */
  .melding-icoon{width:36px;height:36px;border-radius:10px;background:var(--lime);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;}
  .melding-icoon span{width:14px;height:14px;border-radius:3px;background:#fff;display:block;}
  .melding-kop{display:flex;align-items:baseline;gap:6px;margin-bottom:1px;}
  .melding-tekst{min-width:0;flex:1;}
  .melding-tekst b{font-family:-apple-system,'Inter',sans-serif;font-weight:600;font-size:12px;
    letter-spacing:.02em;text-transform:uppercase;color:rgba(22,22,19,.62);}
  .melding-tekst p{margin:0;font-size:14px;line-height:1.38;color:var(--ink);font-weight:500;}
  .melding-tijd{margin-left:auto;font-size:11.5px;color:rgba(22,22,19,.5);flex-shrink:0;padding-left:6px;}
  @media(max-width:900px){
    .melding-laag{width:72%;left:12%;top:12%;height:56%;}
    .melding-tekst p{font-size:12px;}
  }
  /* Op een echte telefoon: één breed bericht onderaan i.p.v. een smalle stapel opzij */
  @media(max-width:600px){
    .melding-laag{left:5%;right:5%;width:auto;top:auto;bottom:6%;height:auto;}
    .melding-tekst p{font-size:13px;}
  }
  /* onder de 1000 px is er te weinig ruimte naast de tekst: alles onder elkaar */
  @media(max-width:1000px){
    .is-kanaal-social .kan-body{grid-template-columns:1fr;gap:26px;}
    .is-kanaal-social .kan-tekst{order:2;}
    .is-kanaal-social .kan-demo{order:1;}
  }
  /* ---------- Echte bewijzen in de hero ---------- */
  /* de oude decoratieve bolletjes vervallen: de echte schermen spreken voor zich */
  .organic-hero-visual .badge-group{display:none!important;}
  .rotator-card .hero-bewijs{position:relative;display:flex;justify-content:center;}
  /* telefoon met echte video */
  #rotCardPhone{max-width:none;width:100%;}
  #rotCardPhone .phone{width:238px;margin:0 0 0 auto;position:relative;z-index:5;}
  /* echte telefoonverhouding: video onderaan bijgesneden */
  #rotCardPhone .phone-media{aspect-ratio:2/3;}
  #rotCardPhone .phone-video{object-position:center 58%;}
  #rotCardPhone .phone-caption{height:32px;overflow:hidden;}

  /* meldingen komen achter de telefoon vandaan en schuiven naar links naar voren */
  /* meldingen links van de telefoon, zodat ze de video vrijlaten */
  #rotCardPhone .melding-laag{left:0;right:auto;top:14%;width:52%;height:62%;z-index:9;}
  #rotCardPhone .melding{padding:11px 13px;}
  #rotCardPhone .melding-tekst p{font-size:12.5px;}
  #rotCardPhone .melding-icoon{width:32px;height:32px;}
  /* de twee laptops */
  #rotCardLaptop,#rotCardWeb{max-width:none;width:100%;}
  #rotCardLaptop .mock-laptop,#rotCardWeb .wb-mock{width:100%;max-width:470px;margin:0 auto;}
  #rotCardLaptop .mock-laptop{transform:none;filter:none;}
  @media(max-width:900px){
    /* telefoon smaller en helemaal rechts, meldingen ernaast in plaats van erover */
    #rotCardPhone .phone{width:164px;margin:0 0 0 auto;}
    #rotCardPhone .melding-laag{left:0;right:auto;top:10%;width:53%;height:76%;}
    #rotCardPhone .melding{padding:8px 9px;gap:7px;}
    #rotCardPhone .melding-icoon{width:25px;height:25px;border-radius:8px;}
    #rotCardPhone .melding-icoon span{width:10px;height:10px;}
    #rotCardPhone .melding-tekst b{font-size:10px;}
    #rotCardPhone .melding-tekst p{font-size:11px;line-height:1.32;}
    #rotCardPhone .melding-tijd{font-size:9.5px;}
    #rotCardLaptop .browser-mock{max-width:100%;}
    #rotCardWeb .wb-mock{max-width:330px;}
  }
  /* heel smalle telefoons: alles nog een maatje kleiner */
  @media(max-width:365px){
    #rotCardPhone .phone{width:142px;}
    #rotCardPhone .melding-laag{width:51%;}
    #rotCardPhone .melding{padding:7px 8px;}
    #rotCardPhone .melding-tekst p{font-size:10.5px;}
    #rotCardPhone .melding-icoon{width:22px;height:22px;}
    #rotCardPhone .melding-icoon span{width:9px;height:9px;}
  }
  /* ---------- Werkenbij in de hero: grotere laptop met vacaturescroller ---------- */
  #rotCardWeb .wb-mock{max-width:600px;}
  #rotCardWeb .hero-bewijs{flex-direction:column;align-items:stretch;gap:14px;}

  .vac-ticker{position:relative;overflow:hidden;width:100%;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
  .vac-ticker-rij{display:flex;gap:7px;width:max-content;animation:vacTicker 32s linear infinite;}
  .vac-ticker:hover .vac-ticker-rij{animation-play-state:paused;}
  @keyframes vacTicker{ to{ transform:translateX(-50%); } }
  .vac-chip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:none;box-shadow:var(--zweefschaduw);
    padding:5px 9px;white-space:nowrap;flex-shrink:0;}
  .vac-chip i{width:6px;height:6px;background:var(--lime);flex-shrink:0;}
  .vac-chip b{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;font-weight:800;
    text-transform:uppercase;font-size:10px;letter-spacing:.01em;}
  .vac-chip span{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--muted);}
  @media(max-width:900px){
    #rotCardWeb .wb-mock{max-width:340px;}
    .vac-chip b{font-size:10.5px;}
  }
  /* ---------- Jobboards die naast de vacaturezoeker langsschuiven ---------- */
  #rotCardLaptop .hero-bewijs{align-items:center;gap:14px;}
  #rotCardLaptop .browser-mock{max-width:430px;flex:1;min-width:0;}
  .jb-slider{position:relative;width:134px;height:230px;flex-shrink:0;overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
            mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);}
  .jb-slider-kolom{display:flex;flex-direction:column;gap:10px;animation:jbSlide 18s linear infinite;}
  .jb-slider:hover .jb-slider-kolom{animation-play-state:paused;}
  @keyframes jbSlide{ to{ transform:translateY(-50%); } }
  .jb-kaart{background:#fff;border:none;box-shadow:var(--zweefschaduw);padding:10px 12px;flex-shrink:0;}
  .jb-kaart b{display:block;font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;
    font-weight:800;text-transform:uppercase;font-size:11.5px;margin-bottom:3px;}
  .jb-kaart span{display:block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--muted);
    line-height:1.35;}
  .jb-kaart em{display:inline-block;font-style:normal;background:var(--lime);color:#fff;
    font-family:'IBM Plex Mono',monospace;font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;
    padding:2px 6px;margin-top:5px;}
  @media(max-width:1100px){
    .jb-slider{width:124px;height:200px;}
    #rotCardLaptop .browser-mock{max-width:330px;}
  }
  @media(max-width:900px){
    .jb-slider{display:none;}
    #rotCardLaptop .mock-laptop{max-width:340px;}
  }
  /* ---------- Drie streepjes onder de hero ---------- */
  .rot-keuze{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;
    align-items:flex-end;gap:10px;z-index:12;}
  .rot-knop{width:52px;height:10px;padding:0;border:none;box-shadow:var(--zweefschaduw);background:transparent;
    cursor:pointer;font-family:inherit;overflow:hidden;position:relative;text-align:left;
    transition:width .32s cubic-bezier(.2,.9,.25,1),height .32s cubic-bezier(.2,.9,.25,1),
               padding .32s ease,background .2s ease,color .2s ease;}
  .rot-knop.actief{background:var(--ink);}
  /* de tekst ligt klaar maar is pas bij hover te zien */
  .rot-knop b,.rot-knop span{display:block;white-space:nowrap;opacity:0;
    transition:opacity .2s ease;}
  .rot-knop b{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;font-weight:800;
    text-transform:uppercase;font-size:11px;line-height:1.2;}
  .rot-knop span{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--muted);margin-top:3px;}
  .rot-knop.actief span{color:#B9B5AA;}
  .rot-knop.actief b{color:var(--paper);}

  /* uitklappen bij hover of toetsenbordfocus */
  .rot-knop:hover,.rot-knop:focus-visible{width:154px;height:48px;padding:8px 11px;background:var(--paper);}
  .rot-knop:hover b,.rot-knop:focus-visible b{opacity:1;color:var(--ink);}
  .rot-knop:hover span,.rot-knop:focus-visible span{opacity:1;color:var(--muted);}
  .rot-knop.actief:hover,.rot-knop.actief:focus-visible{background:var(--ink);}
  .rot-knop.actief:hover b,.rot-knop.actief:focus-visible b{color:var(--paper);}
  .rot-knop.actief:hover span,.rot-knop.actief:focus-visible span{color:#B9B5AA;}

  /* streepje dat volloopt zolang de rotatie automatisch doorgaat */
  .rot-knop::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--lime);}
  .rot-knop.actief.loopt::after{animation:rotVoortgang 3.2s linear forwards;}
  @keyframes rotVoortgang{ to{ width:100%; } }

  @media(max-width:900px){
    .organic-hero-visual{display:flex;flex-direction:column;justify-content:flex-end;}
    .rot-keuze{position:static;margin-top:20px;}
  }
  @media(prefers-reduced-motion: reduce){
    .rot-knop.actief.loopt::after{animation:none;}
    .rot-knop{transition:none;}
  }
  /* tussenmaten: meldingen wat smaller, zodat ze de grote telefoon niet raken */
  @media(max-width:1150px) and (min-width:1001px){
    .demo-social .melding-laag{width:42%;left:7%;}
  }
  @media(max-width:900px){
    .scroll-hint-rij{display:none;}
  }
  @media(max-width:900px){
    .is-kanaal-jobboards .kan-demo{padding:16px 12px 6px;overflow:hidden;}
    .is-kanaal-jobboards .kan-demo .mock-laptop{width:100%;max-width:100%;transform:none;}
    .is-kanaal-jobboards .kan-demo .mock-laptop-screen{width:100%;}
  }
  /* ---------- Filters inklapbaar op mobiel ---------- */
  .vac-filter-knop{display:none;}
  @media(max-width:860px){
    .vac-filter-knop{display:flex;align-items:center;justify-content:space-between;gap:10px;
      width:100%;border:none;box-shadow:var(--zweefschaduw);background:var(--paper);color:var(--ink);
      font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
      padding:11px 14px;cursor:pointer;}
    .vac-filter-knop span{font-size:11px;}
    #vacatures-overlay .vac-filters{display:none;padding-top:10px;}
    #vacatures-overlay.filters-open .vac-filters{display:flex;}
    .vac-filterbalk{padding:10px 16px 12px;background:var(--paper);}
  }
  /* ---------- Het echte Werfspoor-logo ---------- */
  .logo-beeld{height:36px;width:69px;display:block;}  /* 362:188 */
  .organic-logo{display:flex;align-items:center;gap:0;}
    @media(max-width:600px){
    .logo-beeld{height:28px;width:54px;}
  }
  /* ---------- Browservenster met de vacaturezoeker erin ---------- */
  .browser-mock{width:100%;max-width:560px;border:none;box-shadow:var(--zweefschaduw);background:var(--paper);
    box-shadow:0 30px 60px -30px rgba(22,22,19,.45);overflow:hidden;}
  .browser-balk{display:flex;align-items:center;gap:10px;padding:9px 12px;
    background:#E9E6DF;border-bottom:1px solid var(--line);}
  .browser-stippen{display:flex;gap:5px;flex-shrink:0;}
  .browser-stippen i{width:9px;height:9px;background:var(--ink);display:block;}
  .browser-stippen i:nth-child(2){opacity:.55;}
  .browser-stippen i:nth-child(3){opacity:.3;}
  .browser-pijlen{display:flex;gap:7px;flex-shrink:0;color:var(--ink);font-size:11px;opacity:.7;}
  .browser-adres{flex:1;min-width:0;background:var(--paper);border:none;box-shadow:var(--zweefschaduw);
    padding:4px 10px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .browser-adres b{color:var(--ink);font-weight:600;}
  .browser-body{position:relative;background:#fff;}
  /* de vacaturezoeker vult het venster en past zich aan de smallere breedte aan */
  /* de laptopmaten van het gekopieerde scherm neutraliseren */
  .browser-body .jb-screen{border:none;border-radius:0;aspect-ratio:auto;height:326px;width:100%;
    display:flex;flex-direction:column;background:#F5F6F8;}
  .browser-body .jb-viewport{flex:1;padding:11px 13px 0;}
  .browser-body .jb-top{padding:10px 13px;}
  .browser-body .jb-search{flex-wrap:wrap;gap:6px;}
  .browser-body .jb-input{min-width:0;padding:6px 8px;font-size:10px;}
  /* in een smal venster past één zoekveld met de knop ernaast */
  .browser-body .jb-search > *:nth-child(2){display:none;}
  .browser-body .jb-btn{flex-shrink:0;}
  .browser-body .jb-btn{padding:6px 12px;font-size:10px;}
  @media(max-width:900px){
    .browser-mock{max-width:100%;}
    .browser-body .jb-screen{height:280px;}
    .browser-adres{font-size:9.5px;}
  }
  /* ---------- Toestemmingsbalk ---------- */
  .toestemming{position:fixed;left:0;right:0;bottom:0;z-index:98000;background:var(--ink);
    color:var(--paper);padding:16px 0;transform:translateY(100%);transition:transform .35s ease;}
  .toestemming.zichtbaar{transform:none;}
  .toestemming .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
  .toestemming-tekst{flex:1;min-width:240px;}
  .toestemming p{margin:0;font-size:13px;line-height:1.5;color:#D9D5CB;}
  .toestemming p b{color:var(--paper);}
  .toestemming a{color:var(--paper);text-decoration:underline;cursor:pointer;}
  .toestemming-detail{margin-top:8px !important;padding-top:8px;border-top:1px solid rgba(255,255,255,.15);}
  .toestemming-knoppen{display:flex;gap:9px;flex-shrink:0;}
  .toestemming button{border:1px solid rgba(255,255,255,.4);background:transparent;color:var(--paper);
    font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
    padding:10px 16px;cursor:pointer;transition:background .2s ease,color .2s ease;}
  .toestemming button.ja{background:var(--lime);border-color:var(--lime);}
  .toestemming button:hover{background:var(--paper);color:var(--ink);}
  .toestemming button.ja:hover{background:#fff;color:var(--ink);}
  @media(max-width:700px){
    .toestemming p{font-size:12px;}
    .toestemming-knoppen{width:100%;}
    .toestemming button{flex:1;}
  }
  /* ---------- Contactpagina, ontwerp B ---------- */
  #contact-overlay .contact-hero{background:var(--sage);padding:60px 0 190px;overflow:hidden;}
  #contact-overlay .contact-hero .wrap{max-width:1160px;text-align:left;}
  #contact-overlay .contact-hero .organic-badge{border-color:var(--ink);color:var(--ink);
    background:var(--paper);}
  #contact-overlay .contact-hero h1{font-size:110px;line-height:.92;color:var(--ink);
    margin:22px 0 0;max-width:820px;}
  #contact-overlay .contact-hero h1 .hl-orange{background:var(--ink);color:var(--paper);}
  #contact-overlay .contact-hero p{max-width:440px;margin:24px 0 0;font-size:15.5px;line-height:1.62;
    color:rgba(22,22,19,.75);}

  .contact-cijfers{display:flex;gap:38px;margin-top:34px;flex-wrap:wrap;}
  .contact-cijfers b{display:block;font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;
    font-weight:800;font-size:26px;color:var(--ink);line-height:1.1;}
  .contact-cijfers span{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
    letter-spacing:.05em;color:rgba(22,22,19,.6);margin-top:3px;}

  #contact-overlay .contact-grid{margin-top:-132px;padding-bottom:64px;
    grid-template-columns:1.45fr .8fr;gap:22px;}
  #contact-overlay .contact-form-card{background:var(--paper);border:none;box-shadow:var(--zweefschaduw);
    border-radius:0;box-shadow:none;padding:34px;}
  #contact-overlay .contact-form-card h3{font-size:21px;margin-bottom:22px;}
  #contact-overlay .apply-field input,#contact-overlay .apply-field textarea{
    border:none;box-shadow:var(--zweefschaduw);border-radius:0;background:#fff;}
  #contact-overlay .apply-field .contact-topics label{border:none;box-shadow:var(--zweefschaduw);border-radius:0;
    background:var(--paper);}
  #contact-overlay .apply-field .contact-topics label:has(input:checked){background:var(--ink);
    color:var(--paper);border-color:var(--ink);}

  .contact-direct{background:var(--lime-tint);border:none;box-shadow:var(--zweefschaduw);padding:30px;}
  .contact-direct .kop{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink);}
  .contact-direct .nummer{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;
    font-weight:800;font-size:30px;line-height:1.04;margin:14px 0 4px;color:var(--ink);display:block;}
  .contact-direct .tijden{font-size:12.5px;color:var(--muted);}
  .contact-direct .regel{display:block;border-top:1px solid var(--line);margin-top:20px;padding-top:16px;
    text-decoration:none;color:var(--ink);}
  .contact-direct a.regel:hover b{color:var(--lime);}
  .contact-direct .nummer:hover{color:var(--lime);}
  .contact-direct .regel b{display:block;font-family:'Archivo',sans-serif;
    font-variation-settings:'wdth' 112;font-weight:800;font-size:16px;color:var(--ink);}
  .contact-direct .regel span{display:block;font-size:12px;color:var(--muted);margin-top:2px;}

  .contact-plan{background:var(--ink);border:none;box-shadow:var(--zweefschaduw);padding:28px;margin-top:22px;}
  .contact-plan h3{font-size:17px;color:var(--paper);margin:0 0 10px;}
  .contact-plan p{font-size:13px;line-height:1.55;color:#B9B5AA;margin:0 0 18px;}
  .contact-plan a{display:inline-block;border:1px solid rgba(245,243,238,.5);color:var(--paper);
    font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
    padding:11px 18px;transition:background .2s ease,color .2s ease;}
  .contact-plan a:hover{background:var(--paper);color:var(--ink);}

  @media(max-width:1100px){
    #contact-overlay .contact-hero h1{font-size:74px;}
  }
  @media(max-width:900px){
    #contact-overlay .contact-hero{padding:38px 0 148px;}
    #contact-overlay .contact-hero h1{font-size:44px;}
    #contact-overlay .contact-grid{margin-top:-116px;grid-template-columns:1fr;}
    .contact-cijfers{gap:22px;}
    .contact-cijfers b{font-size:20px;}
  }
  /* ---------- Teampagina, ontwerp C3 ---------- */
  #team-overlay .contact-hero{background:var(--sage);padding:52px 0 150px;overflow:hidden;}
  #team-overlay .contact-hero .wrap{max-width:1160px;text-align:left;}
  #team-overlay .contact-hero .organic-badge{border-color:var(--ink);color:var(--ink);
    background:var(--paper);}
  #team-overlay .contact-hero h1{font-size:110px;line-height:.92;color:var(--ink);margin:20px 0 0;
    max-width:900px;}
  #team-overlay .contact-hero h1 .hl-orange{background:var(--ink);color:var(--paper);}
  #team-overlay .contact-hero p{max-width:560px;margin:20px 0 0;font-size:15px;line-height:1.6;
    color:rgba(22,22,19,.75);}
  #team-overlay .contact-wave{display:none;}

  /* zelfde afstand tot de voettekst als op de contactpagina */
  .team-c3{margin-top:-105px;padding-bottom:64px;position:relative;z-index:3;}
  .team-personen{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
  .persoon{background:var(--paper);border:none;box-shadow:var(--zweefschaduw);display:grid;
    grid-template-columns:170px 1fr;}
  .persoon .foto{background-size:cover;background-position:center 16%;
    border-right:1px solid var(--line);min-height:172px;}
  .persoon .info{padding:22px;display:flex;flex-direction:column;justify-content:center;}
  .persoon h3{font-size:20px;margin:0;}
  .persoon .rol{display:block;margin-top:6px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
    letter-spacing:.07em;text-transform:uppercase;color:var(--lime);}
  .persoon p{font-size:13px;line-height:1.55;color:var(--muted);margin:12px 0 14px;}
  .persoon .mail{display:block;border-top:1px solid var(--line);padding-top:12px;margin-top:14px;
    font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;font-weight:800;font-size:14px;
    color:var(--ink);}
  .persoon .mail:hover{color:var(--lime);}

  /* herkomst van de ervaring */
  .team-herkomst{border:none;box-shadow:var(--zweefschaduw);background:#fff;padding:26px 28px;margin-top:34px;}
  .team-herkomst h3{font-size:19px;margin:0;}
  .team-herkomst p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:9px 0 0;max-width:760px;}

  /* open plek voor een sollicitant */
  .team-open{margin-top:22px;border:none;box-shadow:var(--zweefschaduw);background:var(--lime-tint);
    display:grid;grid-template-columns:170px 1fr auto;gap:0;align-items:center;}
  .team-open .plek{min-height:190px;border-right:1px solid var(--line);display:flex;
    align-items:center;justify-content:center;background:
      repeating-linear-gradient(135deg,transparent,transparent 9px,rgba(22,22,19,.06) 9px,rgba(22,22,19,.06) 18px);}
  .team-open .plek span{width:54px;height:54px;border:2px dashed var(--ink);display:flex;
    align-items:center;justify-content:center;font-size:26px;color:var(--lime);line-height:1;}
  .team-open .tekst{padding:24px 26px;}
  .team-open h3{font-size:22px;margin:0;}
  .team-open p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:10px 0 0;max-width:520px;}
  .team-open .actie{padding:24px 26px;}

  @media(max-width:1000px){
    #team-overlay .contact-hero h1{font-size:74px;}
    .team-personen{grid-template-columns:1fr;}
  }
  @media(max-width:700px){
    #team-overlay .contact-hero{padding:38px 0 130px;}
    #team-overlay .contact-hero h1{font-size:44px;}
    .persoon{grid-template-columns:1fr;}
    .persoon .foto{min-height:220px;border-right:none;border-bottom:1px solid var(--line);}
    .team-open{grid-template-columns:1fr;}
    .team-open .plek{min-height:120px;border-right:none;border-bottom:1px solid var(--line);}
    .team-open .actie{padding:0 26px 24px;}
  }
  /* ---------- Wat we doen: kop, verhaalband en kanaalkolommen ---------- */
  .dv-kop{background:var(--sage);color:var(--ink);padding:54px 0 46px;}
  .dv-kop .organic-badge{border-color:var(--ink);color:var(--ink);background:var(--paper);}
  .dv-kop h1{font-size:110px;line-height:.94;color:var(--ink);margin:20px 0 0;max-width:940px;}
  .dv-kop h1 .hl-orange{background:var(--ink);color:var(--paper);}
  .dv-kop p{max-width:600px;margin:22px 0 0;font-size:15.5px;line-height:1.62;
    color:rgba(22,22,19,.75);}

  .dv-verhaal{background:var(--sage);
    padding:44px 0;}
  .dv-verhaal h2{font-size:30px;max-width:820px;line-height:1.06;}
  .dv-verhaal .kolommen{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px;}
  .dv-verhaal .kolommen > div + div{border-left:1px solid var(--line);padding-left:26px;}
  .dv-verhaal h3{font-size:19px;margin:10px 0 0;}
  .dv-verhaal .nr{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--lime);}
  .dv-verhaal p{font-size:13.5px;line-height:1.62;color:rgba(22,22,19,.75);margin:12px 0 0;}

  /* de drie kanalen naast elkaar */
  .dv-kanalen{padding:52px 0 20px;}
  .dv-kanalen .kop{display:flex;justify-content:space-between;align-items:baseline;
    padding-bottom:16px;margin-bottom:24px;}
  .dv-kanalen .kop h2{font-size:28px;}
  .dv-kanalen .rij{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
  .kanaal-kolom{border:none;box-shadow:var(--zweefschaduw);background:var(--paper);padding:26px;
    display:flex;flex-direction:column;}
  .kanaal-kolom .nr{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--lime);}
  .kanaal-kolom h3{font-size:22px;margin:10px 0 0;}
  .kanaal-kolom > p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:12px 0 16px;}
  .kanaal-kolom ul{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:7px;}
  .kanaal-kolom li{border:none;box-shadow:var(--zweefschaduw);border-radius:999px;padding:5px 11px;font-size:11.5px;
    font-weight:600;}
  .kanaal-kolom .knop{margin-top:auto;display:inline-flex;align-items:center;justify-content:space-between;
    gap:10px;background:var(--lime);border:2px solid var(--lime);color:#fff;
    font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
    padding:12px 16px;transition:background .2s ease,border-color .2s ease;}
  .kanaal-kolom .knop:hover{background:var(--ink);border-color:var(--ink);}

  @media(max-width:1000px){
    .dv-kop h1{font-size:74px;}
    .dv-verhaal .kolommen{grid-template-columns:1fr;}
    .dv-verhaal .kolommen > div + div{border-left:none;padding-left:0;
      border-top:1px solid var(--line);padding-top:20px;}
    .dv-kanalen .rij{grid-template-columns:1fr;}
  }
  @media(max-width:700px){
    .dv-kop{padding:38px 0 34px;}
    .dv-kop h1{font-size:44px;}
    .dv-verhaal h2{font-size:22px;}
  }
  /* ---------- Teamkaarten: portret boven, gekleurd vlak onder ---------- */
  .team-personen{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
  .persoon-kaart{border:none;box-shadow:var(--zweefschaduw);display:flex;flex-direction:column;overflow:hidden;
    background:var(--paper);}
  .persoon-foto{position:relative;aspect-ratio:4/3.4;background-size:cover;background-position:center 14%;
    border-bottom:1px solid var(--line);}
  .persoon-sociaal{position:absolute;right:12px;top:12px;display:flex;gap:7px;}
  .persoon-sociaal a{width:32px;height:32px;background:var(--lime);border:2px solid var(--lime);
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;
    transition:background .2s ease,color .2s ease,border-color .2s ease;}
  .persoon-sociaal a:hover{background:var(--ink);border-color:var(--ink);color:#fff;}
  .persoon-voet{flex:1;display:flex;flex-direction:column;padding:20px 20px 18px;}
  .persoon-voet h3{font-size:19px;margin:0;}
  .persoon-voet .rol{display:block;margin-top:5px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
    letter-spacing:.07em;text-transform:uppercase;color:rgba(22,22,19,.65);}
  .persoon-onder{display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin-top:20px;flex-wrap:wrap;}
  .persoon-tel{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-size:13.5px;
    font-weight:600;text-decoration:underline;text-underline-offset:3px;}
  .persoon-tel i{font-size:12px;}
  .persoon-mail{background:var(--lime);color:#fff;font-family:'IBM Plex Mono',monospace;
    font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:11px 17px;
    transition:background .2s ease;}
  .persoon-mail:hover{background:var(--ink);}
  /* kleurvlakken per kaart */
  .persoon-kaart--blauw .persoon-voet{background:var(--sage);}
  .persoon-kaart--tint .persoon-voet{background:var(--lime-tint);}
  .persoon-kaart--open .persoon-voet{background:var(--paper);}
  .persoon-kaart--open .persoon-foto{background:
      repeating-linear-gradient(135deg,transparent,transparent 10px,rgba(22,22,19,.05) 10px,rgba(22,22,19,.05) 20px);
    display:flex;align-items:center;justify-content:center;}
  .persoon-kaart--open .persoon-foto span{width:58px;height:58px;border:2px dashed var(--ink);
    display:flex;align-items:center;justify-content:center;font-size:27px;color:var(--lime);line-height:1;}
  .persoon-kaart--open .persoon-voet p{font-size:12.5px;line-height:1.5;color:var(--muted);margin:10px 0 0;}
  /* De hele open plek is aanklikbaar en leidt naar de vacatures. Dat gebeurt met
     een onzichtbare link die over de kaart heen ligt, niet door de kaart zelf
     een link te maken: er staat een knop in, en een link in een link mag niet.
     Die knop gaat naar dezelfde pagina en is de zichtbare ingang; de kaartlink
     is er alleen zodat je overal op de kaart kunt drukken. Daarom staat hij op
     aria-hidden en tabindex="-1" -- anders krijgen voorleessoftware en het
     toetsenbord twee keer dezelfde link te verwerken.
     De knop ligt er met z-index bovenop, zodat hij zelf klikbaar blijft. */
  .persoon-kaart--open{position:relative;}
  .persoon-kaart--open .kaart-link{position:absolute;inset:0;z-index:1;}
  .persoon-kaart--open .persoon-onder{position:relative;z-index:2;}
  /* laten zien dat er iets te klikken valt */
  .persoon-kaart--open:hover .persoon-foto span{border-color:var(--lime);color:var(--lime);}
  .persoon-kaart--open:hover .persoon-mail{background:var(--ink);}

  @media(max-width:1000px){ .team-personen{grid-template-columns:1fr 1fr;} }
  @media(max-width:700px){ .team-personen{grid-template-columns:1fr;} }
  /* ---------- Typemachine-effect op de contactkop ---------- */
  .ct-kop{min-height:2.05em;}                 /* ruimte vasthouden, zodat niets verspringt */
  .ct-kop #ctB:empty{padding:0;}              /* geen zwart blokje zolang er niets staat */
  .ct-kop #teamB:empty{padding:0;}            /* idem, voor de typtitel van het team */
  .ct-kop #dienstB:empty{padding:0;}          /* idem, 'wat we doen' */
  .ct-kop #vacB:empty{padding:0;}             /* idem, vacatures */
  .ct-caret{display:inline-block;width:.055em;height:.78em;background:var(--lime);
    margin-left:.06em;vertical-align:baseline;animation:ctKnipper 1s steps(1) infinite;}
  .ct-kop.klaar .ct-caret{animation:ctKnipper 1.1s steps(1) infinite;}
  @keyframes ctKnipper{0%,50%{opacity:1;}50.01%,100%{opacity:0;}}
  @media(prefers-reduced-motion: reduce){
    .ct-caret{display:none;}
  }
  /* ---------- Reviews: ballonnen met beoordelingen ---------- */
  .reviews-section{background:var(--paper);padding:64px 0 72px;}
  .reviews-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;
    flex-wrap:wrap;margin-bottom:38px;}
  .reviews-kop h2{font-size:34px;margin:10px 0 0;}
  .reviews-kop p{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:460px;}
  .reviews-score{border:none;box-shadow:var(--zweefschaduw);background:#fff;padding:16px 20px;flex-shrink:0;
    display:flex;align-items:center;gap:16px;}
  .reviews-score .cijfer{font-family:'Archivo',sans-serif;font-variation-settings:'wdth' 112;
    font-weight:800;font-size:38px;line-height:1;}
  .reviews-score .sterren{color:var(--lime);font-size:13px;letter-spacing:2px;}
  .reviews-score .bron{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;
    letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:6px;}

  .reviews-rij{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;}
  .review{display:flex;flex-direction:column;}
  .review-ballon{position:relative;border:none;box-shadow:var(--zweefschaduw);border-radius:22px;background:#fff;
    padding:24px 24px 22px;flex:1;}
  /* het puntje van de ballon, wit zodat het bij de zwevende ballon zonder rand past */
  .review-ballon::before,.review-ballon::after{content:'';position:absolute;width:0;height:0;}
  .review-ballon::before{bottom:-16px;left:34px;border-left:16px solid transparent;
    border-top:16px solid #fff;}
  .review-ballon::after{bottom:-12px;left:37px;border-left:12px solid transparent;
    border-top:12px solid #fff;}
  .review-sterren{color:var(--lime);font-size:14px;letter-spacing:2px;margin-bottom:12px;}
  .review-tekst{font-size:14px;line-height:1.62;color:var(--ink);margin:0;}
  .review-wie{display:flex;align-items:center;gap:12px;margin:28px 0 0 6px;}
  .review-wie .review-letter{width:38px;height:38px;flex-shrink:0;border:none;box-shadow:var(--zweefschaduw);border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-family:'Archivo',sans-serif;
    font-variation-settings:'wdth' 112;font-weight:800;font-size:14px;letter-spacing:0;
    color:var(--ink);margin:0;text-transform:none;}
  .review-wie b{display:block;font-size:14px;}
  .review-wie span{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
    letter-spacing:.04em;color:var(--muted);margin-top:2px;}
  /* per ballon een eigen kleurvlak achter de initiaal */
  .review:nth-child(1) .review-letter{background:var(--sage);}
  .review:nth-child(2) .review-letter{background:var(--lime-tint);}
  .review:nth-child(3) .review-letter{background:var(--paper);}

  @media(max-width:1000px){ .reviews-rij{grid-template-columns:1fr 1fr;} }
  @media(max-width:700px){
    .reviews-section{padding:44px 0 50px;}
    .reviews-kop h2{font-size:26px;}
    .reviews-rij{grid-template-columns:1fr;}
  }
  /* ---------- Doorbladeren van de reviews ---------- */
  .reviews-slider{overflow:hidden;}
  .reviews-rij{display:flex!important;gap:22px;align-items:stretch;
    transition:transform .45s cubic-bezier(.2,.9,.25,1);will-change:transform;}
  .reviews-rij .review{flex:0 0 calc((100% - 44px) / 3);min-width:0;}
  .reviews-bediening{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:34px;}
  .reviews-knop{width:44px;height:44px;border:none;box-shadow:var(--zweefschaduw);background:var(--paper);
    color:var(--ink);cursor:pointer;font-size:13px;transition:background .2s ease,color .2s ease;}
  .reviews-knop:hover{background:var(--ink);color:var(--paper);}
  .reviews-knop[disabled]{opacity:.3;cursor:default;}
  .reviews-knop[disabled]:hover{background:var(--paper);color:var(--ink);}
  .reviews-bolletjes{display:flex;gap:8px;}
  .reviews-bolletjes button{width:34px;height:8px;border:none;box-shadow:var(--zweefschaduw);background:transparent;
    padding:0;cursor:pointer;transition:background .2s ease;}
  .reviews-bolletjes button.actief{background:var(--ink);}
  @media(max-width:1000px){ .reviews-rij .review{flex:0 0 calc((100% - 22px) / 2);} }
  @media(max-width:700px){ .reviews-rij .review{flex:0 0 100%;} }
  @media(prefers-reduced-motion: reduce){ .reviews-rij{transition:none;} }
  /* ---------- Ballonnen die los van elkaar meebewegen ---------- */
  .review,.case{transform:translateY(var(--zweef,0px));will-change:transform;}
  @media(prefers-reduced-motion: reduce){
    .review,.case{transform:none;}
  }
  /* ---------- Typemachine-effect op de hero-kop ---------- */
  .hero-typ{min-height:2.05em;}
  .hero-typ #hkB:empty{padding:0;}
  /* de cursor mag nooit los van het woord op een nieuwe regel belanden */
  .hero-typ #hkB, .hero-typ #hkC, .hero-caret{white-space:nowrap;}
  .hero-caret{display:inline-block;width:.055em;height:.76em;background:var(--lime);
    margin-left:.06em;vertical-align:baseline;animation:ctKnipper 1s steps(1) infinite;}
  @media(prefers-reduced-motion: reduce){ .hero-caret{display:none;} }
  /* ---------- Stapelende dienstenpanelen op de landingspagina ---------- */
  .dienst-stapel{position:relative;background:var(--paper);}
  .tab-houder{position:sticky;top:0;z-index:60;height:0;}
  .tab-houder .wrap{padding-top:26px;padding-bottom:0;}
  .dienst-tabs{display:inline-flex;align-items:center;gap:2px;background:var(--paper);
    border:none;box-shadow:var(--zweefschaduw);border-radius:999px;padding:5px;position:relative;
    box-shadow:0 14px 30px -18px rgba(22,22,19,.5);
    transform:translateY(-14px);opacity:0;
    transition:transform .38s cubic-bezier(.2,.9,.25,1),opacity .3s ease;}
  .dienst-tabs.zichtbaar{transform:translateY(0);opacity:1;}
  .dienst-tabs .tab-label{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.07em;
    text-transform:uppercase;padding:7px 12px;color:var(--muted);position:relative;z-index:2;}
  /* op een smal scherm past het woord 'Diensten' er niet bij;
     de drie kanalen zelf zijn belangrijker */
  @media(max-width:700px){
    #dienstTabs .tab-label{display:none;}
    #dienstTabs{gap:3px;}
    #dienstTabs .tab{font-size:10px;padding-left:9px;padding-right:9px;letter-spacing:.02em;}
  }
  @media(max-width:359px){
    #dienstTabs .tab{font-size:9px;padding-left:7px;padding-right:7px;letter-spacing:0;}
  }
  .dienst-tabs .tab{position:relative;z-index:2;border:none;background:transparent;cursor:pointer;
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.05em;
    text-transform:uppercase;padding:8px 14px;border-radius:999px;color:var(--ink);
    transition:color .28s ease;white-space:nowrap;}
  .dienst-tabs .tab.aan{color:var(--paper);}
  .dienst-tabs .pil{position:absolute;top:5px;bottom:5px;left:0;width:0;background:var(--ink);
    border-radius:999px;z-index:1;transition:left .42s cubic-bezier(.2,.9,.25,1),
      width .42s cubic-bezier(.2,.9,.25,1);}

  .dv-paneel{position:sticky;top:0;height:100vh;background:var(--vlak);
    box-shadow:0 -14px 26px -18px rgba(22,22,19,.22);border-radius:26px 26px 0 0;overflow:hidden;}
  .dv-paneel.eerste{border-radius:0;}
  .dv-paneel-binnen{max-width:1160px;margin:0 auto;padding:34px 34px;height:100%;
    display:flex;flex-direction:column;justify-content:center;}
  .dv-paneel-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center;}
  .dv-paneel .nr{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--lime);}
  .dv-paneel h2{font-size:52px;margin:14px 0 0;max-width:11ch;line-height:.96;}
  .dv-paneel p{font-size:15.5px;line-height:1.62;color:rgba(22,22,19,.75);margin:20px 0 0;max-width:420px;}
  .dv-paneel ul{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px;}
  .dv-paneel li{border:none;box-shadow:var(--zweefschaduw);border-radius:999px;padding:6px 13px;font-size:12px;
    font-weight:600;}
  .dv-paneel .knop{display:inline-block;margin-top:26px;background:var(--lime);color:#fff;
    font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
    padding:13px 20px;border-radius:999px;}
  .dv-paneel .knop:hover{background:var(--ink);}
  .dv-paneel-beeld{display:flex;align-items:center;justify-content:center;min-width:0;}
  .dv-paneel.donker{color:var(--paper);}
  .dv-paneel.donker h2{color:var(--paper);}
  .dv-paneel.donker p{color:#B9B5AA;}
  .dv-paneel.donker li{border-color:var(--paper);color:var(--paper);}
  /* De verhaalbolletjes staan in het eerste paneel en waren op donker niet meer
     te lezen: het bijschrift, het telbolletje, de ring van het actieve rondje en
     de focusrand zijn allemaal in var(--ink) getekend. Die krijgen hier hun
     lichte tegenhanger. Alles hangt aan .donker, dus draai je de paneelkleur
     terug, dan gaat dit vanzelf mee. */
  .dv-paneel.donker .case-rondje b{color:var(--paper);}
  .dv-paneel.donker .case-rondje i{background:var(--paper);color:var(--ink);}
  .dv-paneel.donker .case-rondje.is-actief .ring{background:var(--paper);}
  .dv-paneel.donker .case-rondje:focus-visible{outline-color:var(--paper);}

  /* de carrousel binnen het paneel iets compacter */
  .dv-paneel-beeld .demo-social{max-width:100%;}
  .dv-paneel-beeld .demo-social .phones-track{height:470px;}
  .dv-paneel-beeld .demo-social .phones-track .phone{width:236px;}
  .dv-paneel-beeld .demo-social .phones-track .phone[data-slot="0"]{
    transform:translate(-50%,-50%) translateX(140px) scale(1);}
  .dv-paneel-beeld .demo-social .phones-track .phone[data-slot="-1"]{
    transform:translate(-50%,-50%) translateX(-34px) scale(.8);}
  .dv-paneel-beeld .demo-social .phones-track .phone[data-slot="-2"]{
    transform:translate(-50%,-50%) translateX(-170px) scale(.72);}
  /* De laag had hier de vaste hoogte van 74% uit de basisregel, met de meldingen
     onderaan uitgelijnd en overflow:hidden eromheen. Zodra vier meldingen samen
     hoger uitvielen dan die 74% -- en dat gebeurt zodra een tekst over twee
     regels loopt -- werd de bovenste afgeknipt.
     Nu groeit de laag vanaf de onderkant mee met wat erin staat, precies zoals
     het op een smal scherm al gebeurde (zie de mediaregel hieronder). De
     max-height houdt hem binnen de telefoon, mocht er ooit een vijfde bijkomen. */
  .dv-paneel-beeld .melding-laag{width:45%;left:2%;
    top:auto;bottom:8%;height:auto;max-height:90%;}
  .dv-paneel-beeld .melding-tekst p{font-size:12px;margin:0;}
  /* vanaf 900px staat de beeldkolom al over de volle breedte; vanaf daar hoort
     de actieve telefoon ook in het midden te staan in plaats van naar rechts */
  @media(max-width:900px){
    .dv-paneel-beeld .demo-social .phones-track{height:400px;}
    .dv-paneel-beeld .demo-social .phones-track .phone{width:190px;}
    .dv-paneel-beeld .demo-social .phones-track .phone[data-slot="0"]{
      transform:translate(-50%,-50%) translateX(0) scale(1);opacity:1;}
    .dv-paneel-beeld .demo-social .phones-track .phone[data-slot="-1"]{
      transform:translate(-50%,-50%) translateX(-98px) scale(.6);opacity:1;}
    .dv-paneel-beeld .demo-social .phones-track .phone[data-slot="1"]{
      transform:translate(-50%,-50%) translateX(98px) scale(.6);opacity:1;}
    .dv-paneel-beeld .demo-social .phones-track .phone[data-slot="-2"]{opacity:0;pointer-events:none;}
    .dv-paneel-beeld .melding-laag{left:5%;right:5%;width:auto;top:auto;bottom:6%;height:auto;}
  }
  .dv-paneel-beeld .browser-mock{max-width:470px;}

  @media(max-width:1100px){
    .dv-paneel h2{font-size:40px;}
    .dv-paneel-grid{gap:26px;}
  }
  @media(max-width:900px){
    .dv-paneel{height:auto;min-height:0;position:relative;top:auto;}
    .dv-paneel-binnen{padding:76px 20px 40px;}
    /* let op: een kolom van 1fr groeit alsnog mee met de inhoud; met
       minmax(0,1fr) mag hij smaller worden dan de carrousel erin */
    .dv-paneel-grid{grid-template-columns:minmax(0,1fr);}
    .dv-paneel h2{font-size:32px;max-width:none;}
    /* De balk paste hier vroeger niet en liep daarom over de volle breedte met
       zijwaarts schuiven. Nu het woord 'Diensten' weg is passen de drie kanalen
       gewoon, dus houdt de balk weer zijn eigen breedte met ronde hoeken. */
    .dienst-tabs{width:auto;max-width:100%;overflow-x:auto;justify-content:flex-start;}
    .dienst-tabs::-webkit-scrollbar{display:none;}
  }
  /* ---------- Rekenmodule op de contactpagina ---------- */
  #contact-overlay .dv-blok--calc{background:var(--paper);
    padding:56px 0 64px;margin-top:44px;}
  #contact-overlay .dv-blok--calc .wrap{max-width:1160px;}
  /* ---------- Zwarte footer ---------- */
  .site-footer{background:var(--ink);color:var(--paper);padding:56px 0 0;
    text-align:left;}
  .site-footer .wrap,.site-footer p,.site-footer li,.site-footer h4{text-align:left;}
  .site-footer .wrap{max-width:1160px;}
  .footer-top{display:grid;grid-template-columns:1.4fr .8fr .8fr 1.1fr;gap:38px;
    padding-bottom:44px;}
  .footer-merk img{height:22px;display:block;margin-bottom:18px;}
  .footer-merk p{font-size:14px;line-height:1.6;color:#B9B5AA;margin:0;max-width:300px;}
  .footer-sociaal{display:flex;gap:9px;margin-top:22px;}
  .footer-sociaal a{width:36px;height:36px;border:2px solid var(--lime);background:var(--lime);
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;
    transition:background .2s ease,border-color .2s ease;}
  .footer-sociaal a:hover{background:transparent;border-color:var(--paper);color:var(--paper);}
  .site-footer h4{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.09em;
    text-transform:uppercase;color:#8E8A82;margin:0 0 16px;font-weight:500;}
  .site-footer ul{list-style:none;margin:0;padding:0;}
  .site-footer li{margin-bottom:10px;}
  .site-footer li a{color:var(--paper);font-size:14px;text-decoration:none;
    transition:color .2s ease;}
  .site-footer li a:hover{color:var(--lime);}
  .footer-gegevens p{margin:0 0 10px;font-size:14px;line-height:1.55;color:#B9B5AA;}
  .footer-gegevens a{color:var(--paper);text-decoration:none;}
  .footer-gegevens a:hover{color:var(--lime);}
  .footer-gegevens .klein{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#8E8A82;
    margin-top:16px;line-height:1.7;}
  .footer-onder{border-top:1px solid #3A3833;padding:20px 0 26px;display:flex;
    justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;}
  .footer-onder span,.footer-onder a{font-family:'IBM Plex Mono',monospace;font-size:11px;
    color:#8E8A82;text-decoration:none;}
  .footer-onder a:hover{color:var(--paper);}
  .footer-links{display:flex;gap:20px;flex-wrap:wrap;}
  @media(max-width:900px){
    .footer-top{grid-template-columns:1fr 1fr;gap:30px;}
  }
  @media(max-width:600px){
    .site-footer{padding-top:40px;}
    .footer-top{grid-template-columns:1fr;gap:28px;}
    .footer-onder{flex-direction:column;align-items:flex-start;}
  }
  /* ---------- Kanalen en vacatures binnen de dienstenpanelen ---------- */
  #pnlJobboards{display:flex;align-items:center;justify-content:center;gap:16px;}
  #pnlJobboards .browser-mock{max-width:400px;flex:1;min-width:0;}
  #pnlJobboards .jb-slider{width:132px;height:250px;flex-shrink:0;}
  #pnlWerkenbij{flex-direction:column;gap:14px;}
  #pnlWerkenbij .wb-mock{max-width:100%;}
  #pnlWerkenbij .vac-ticker{width:100%;order:-1;}
  @media(max-width:1100px){
    #pnlJobboards .jb-slider{width:116px;height:220px;}
    #pnlJobboards .browser-mock{max-width:330px;}
  }
  @media(max-width:900px){
    #pnlJobboards{flex-direction:column;}
    #pnlJobboards .jb-slider{display:none;}
    #pnlJobboards .browser-mock{max-width:100%;}
  }
  /* ---------- Carrousel met laptops ---------- */
  .demo-laptops{position:relative;width:100%;overflow-x:clip;overflow-y:visible;}
  .laptops-kader{position:relative;height:340px;max-width:100%;}
  .laptops-kader .laptop{position:absolute;left:50%;top:50%;width:400px;
    transform:translate(-50%,-50%);transition:transform .6s cubic-bezier(.2,.9,.25,1),
      opacity .5s ease;will-change:transform;}
  .laptops-kader .laptop[data-slot="0"]{transform:translate(-50%,-50%) translateX(96px) scale(1);
    z-index:6;opacity:1;}
  .laptops-kader .laptop[data-slot="-1"]{transform:translate(-50%,-50%) translateX(-92px) scale(.82);
    z-index:5;opacity:1;}
  .laptops-kader .laptop[data-slot="-2"]{transform:translate(-50%,-50%) translateX(-224px) scale(.7);
    z-index:4;opacity:1;}
  .laptops-kader .laptop[data-slot="1"],
  .laptops-kader .laptop[data-slot="2"]{transform:translate(-50%,-50%) translateX(300px) scale(.7);
    z-index:1;opacity:0;pointer-events:none;}
  .laptops-kader .wb-mock{width:100%;max-width:none;}

  .laptops-bediening{display:flex;justify-content:center;gap:9px;margin-top:14px;}
  .laptops-knop{width:34px;height:34px;border:none;box-shadow:var(--zweefschaduw);background:transparent;
    color:var(--ink);cursor:pointer;font-size:11px;transition:background .2s ease,color .2s ease;}
  .laptops-knop:hover{background:var(--ink);color:var(--paper);}

  @media(max-width:1100px){
    .laptops-kader{height:290px;}
    .laptops-kader .laptop{width:330px;}
    .laptops-kader .laptop[data-slot="0"]{transform:translate(-50%,-50%) translateX(74px) scale(1);}
    .laptops-kader .laptop[data-slot="-1"]{transform:translate(-50%,-50%) translateX(-74px) scale(.82);}
    .laptops-kader .laptop[data-slot="-2"]{transform:translate(-50%,-50%) translateX(-180px) scale(.7);}
  }
  @media(max-width:900px){
    .laptops-kader{height:250px;}
    .laptops-kader .laptop{width:290px;}
    .laptops-kader .laptop[data-slot="0"]{transform:translate(-50%,-50%) translateX(40px) scale(1);}
    .laptops-kader .laptop[data-slot="-1"]{transform:translate(-50%,-50%) translateX(-70px) scale(.78);opacity:.55;}
    .laptops-kader .laptop[data-slot="-2"]{transform:translate(-50%,-50%) translateX(-150px) scale(.66);opacity:.3;}
  }

  /* ================= Klantcases: rondjes + casepagina ================= */
  .case-rondjes{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin:0 0 30px;}
  .case-rondje{background:none;border:0;padding:0;cursor:pointer;width:98px;text-align:center;
    font-family:inherit;position:relative;}
  .case-rondje .ring{display:block;width:88px;height:88px;border-radius:50%;padding:3px;margin:0 auto;
    background:conic-gradient(from 210deg,var(--lime),#FFA06B,var(--sage),var(--lime));
    transition:transform .18s ease;}
  .case-rondje:hover .ring{transform:scale(1.06);}
  .case-rondje:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:12px;}
  .case-rondje .foto{display:block;width:100%;height:100%;border-radius:50%;
    border:3px solid var(--paper);background-size:cover;background-position:center;}
  .case-rondje b{display:block;font-size:12.5px;margin-top:9px;font-weight:600;color:var(--ink);}
  .case-rondje i{position:absolute;top:0;right:6px;font-style:normal;background:var(--ink);color:#fff;
    font-family:'IBM Plex Mono',monospace;font-size:9.5px;min-width:19px;height:19px;border-radius:999px;
    display:flex;align-items:center;justify-content:center;}
  .case-rondje.is-actief .ring{background:var(--ink);}
  .case-rondje.leeg{cursor:pointer;opacity:.6;transition:opacity .18s ease;}
  .case-rondje.leeg:hover,.case-rondje.leeg:focus-visible{opacity:1;}
  .case-rondje.leeg:hover .ring{border-color:var(--lime);}
  .case-rondje.leeg:hover .plus{color:var(--lime);}
  .case-rondje.leeg .ring{background:none;border:2px dashed var(--muted);
    transition:border-color .18s ease;
    display:flex;align-items:center;justify-content:center;}
  .case-rondje.leeg .plus{font-family:'Archivo',sans-serif;font-weight:800;font-size:26px;
    color:var(--muted);transition:color .18s ease;}

  /* compacter in de hero: links uitgelijnd en kleiner dan op een casepagina */
  /* links uitgelijnd met de kop, op brede schermen verdeeld over de wrap */
  @media(max-width:600px){
      }
  /* rondje van een klant zonder campagne: logo op een donkere schijf */
  .case-rondje .foto.is-logo{background:var(--ink);display:flex;align-items:center;
    justify-content:center;}
  .case-rondje .foto.is-logo > span{display:block;background-size:contain;
    background-repeat:no-repeat;background-position:center;width:62%;height:42%;}
  .case-rondje.nog-leeg .ring{background:var(--line);}
  .case-rondje.nog-leeg.is-actief .ring{background:var(--ink);}
  .case-binnenkort{width:100%;max-width:340px;aspect-ratio:9/16;border:2px dashed var(--line);
    border-radius:34px;display:flex;flex-direction:column;align-items:center;
    justify-content:center;text-align:center;padding:30px;color:var(--muted);}
  .case-binnenkort .bk-icoon{color:var(--lime);font-size:15px;margin-bottom:14px;}
  .case-binnenkort b{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;
    font-size:16px;color:var(--ink);margin-bottom:8px;}
  .case-binnenkort p{font-size:13.5px;margin:0;max-width:26ch;line-height:1.55;}
  @media(max-width:900px){ .case-binnenkort{margin:0 auto;aspect-ratio:auto;min-height:230px;} }
  /* op een breed scherm de klantrondjes over de volle breedte verdelen */
  /* zelfde uitlijning als de tekst op de pagina, daarna verdeeld */
  .case-rondjes--breed{max-width:1160px;margin:0 auto;padding:0 32px;}
  @media(min-width:901px){
    .case-rondjes--breed{justify-content:space-between;gap:0;}
  }
  #case-overlay{display:none;position:fixed;inset:0;z-index:9000;
    background:var(--paper);overflow-y:auto;}
  .case-hero{background:var(--sage);padding:34px 0 30px;}
  .case-body{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:52px;
    align-items:start;padding:44px 0 70px;}
  .case-fon{position:relative;width:100%;max-width:340px;aspect-ratio:9/16;
    background:#0E0B12;border-radius:34px;padding:10px;box-shadow:0 30px 50px -22px rgba(27,22,32,.4);}
  .case-scherm{position:relative;width:100%;height:100%;border-radius:26px;overflow:hidden;background:#000;}
  .case-scherm video{width:100%;height:100%;object-fit:cover;display:block;}
  .case-balken{position:absolute;top:9px;left:9px;right:9px;display:flex;gap:4px;z-index:3;}
  .case-balk{flex:1;height:3px;background:rgba(255,255,255,.34);border-radius:2px;overflow:hidden;}
  .case-balk span{display:block;height:100%;width:0;background:#fff;}
  .case-merk{position:absolute;top:22px;left:12px;right:12px;display:flex;align-items:center;gap:8px;
    z-index:3;color:#fff;font-size:12.5px;}
  .case-merk .av{width:27px;height:27px;border-radius:50%;background-size:cover;
    background-position:center;border:2px solid #fff;}
  .case-tik{position:absolute;top:0;bottom:0;width:38%;z-index:4;background:none;border:0;cursor:pointer;}
  .case-tik.l{left:0;} .case-tik.r{right:0;}
  /* Wikkel om de video en de bediening. Standaard ligt hij over het hele scherm,
     precies zoals voorheen, zodat de merknaam en de tekst er als overlay
     overheen blijven liggen. Alleen bij Budget Thuis (zie .case-fon--beeld
     verderop) wordt het scherm in drie stukken verdeeld. */
  .case-media{position:absolute;inset:0;overflow:hidden;}
  .case-onder{position:absolute;left:0;right:0;bottom:0;padding:44px 15px 16px;z-index:3;color:#fff;
    background:linear-gradient(to top,rgba(0,0,0,.84),transparent);}
  .case-onder .kan{display:inline-block;margin-bottom:7px;font-family:'IBM Plex Mono',monospace;
    font-size:9.5px;letter-spacing:.06em;background:var(--lime);color:#fff;padding:4px 9px;border-radius:999px;}
  .case-onder h4{font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;
    font-size:17px;line-height:1.1;margin:0 0 4px;}
  .case-onder p{margin:0;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
    color:rgba(255,255,255,.75);}
  .case-geluid{position:absolute;top:20px;right:12px;z-index:5;background:rgba(0,0,0,.5);color:#fff;
    border:0;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:14px;}

  /* ---------- Telefoon als beeld in plaats van als CSS-vorm ----------
     Proef, voorlopig alleen bij Budget Thuis. De standaardtelefoon hierboven is
     een donker blok met afgeronde hoeken; deze variant legt er een uitgeknipte
     foto van een toestel overheen (png-09.png). Het schermvlak in dat beeld is
     doorzichtig, dus de video eronder valt er precies in.

     De percentages hieronder zijn opgemeten in png-09.png (415 x 846) en horen
     bij dát beeld. Vervang je de foto, meet ze dan opnieuw. Let op dat er in
     dit beeld een lege rand om het toestel zit; de percentages gaan over het
     hele bestand, niet over het toestel. */
  .case-fon--beeld{background:none;border-radius:0;padding:0;box-shadow:none;
    aspect-ratio:415/846;
    /* schaduw moet de vorm van het toestel volgen, niet die van het vak */
    filter:drop-shadow(0 26px 34px rgba(27,22,32,.38));}
  .case-fon--beeld::after{content:'';position:absolute;inset:0;z-index:6;pointer-events:none;
    background:url('../img/png-09.png') center/100% 100% no-repeat;}
  .case-fon--beeld .case-scherm{position:absolute;left:7.470%;top:2.955%;
    width:86.024%;height:93.144%;border-radius:11.2%/5.1%;
    /* Deze ring loopt zwart door tot onder de rand van het toestel. De maten
       hierboven zijn percentages, en die vallen niet bij elke vensterbreedte
       precies op een hele pixel. Zonder die ring kun je op zo'n halve pixel
       dwars door de doorzichtige schermopening naar de paginakleur kijken --
       een lichte haarlijn langs de binnenkant van het scherm. De ring volgt
       de afronding en valt weg onder de rand, dus je ziet hem nergens. */
    box-shadow:0 0 0 6px #000;}
  /* Schermvullende variant (TikTok): de tekst ligt als overlay over de video en
     de notch hangt over de bovenste 3,8% van het scherm. Balkjes, merknaam en
     geluidsknop moeten daar dus onderlangs. Bij de Instagram-variant hieronder
     is dat niet nodig, want daar zit een witte balk tussen. */
  .case-fon--beeld:not(.case-fon--post) .case-balken{top:5.2%;left:5%;right:5%;}
  .case-fon--beeld:not(.case-fon--post) .case-merk{top:7.6%;left:6%;right:6%;}
  .case-fon--beeld:not(.case-fon--post) .case-geluid{top:7%;right:6%;}

  /* ---------- Cases met de opmaak van een Instagram-bericht ----------
     Alleen voor campagnes die op Instagram liepen: een witte balk met het
     account boven de video en witte tekst eronder, net als de telefoons in de
     carrousel op de homepage. Het scherm valt daarvoor uiteen in drie stukken.

     Een TikTok-campagne krijgt dit NIET; die hoort schermvullend te zijn, en
     houdt dus de opmaak hierboven met de tekst als overlay over de video. Welke
     van de twee het wordt, bepaalt caseZetVideo() aan de hand van het platform
     van de campagne.

     Het mediavlak krijgt 9:16 als vangnet, net als bij de andere telefoons:
     valt de schermhoogte voor de browser niet als vaste waarde te gebruiken,
     dan heeft het vlak nog een eigen maat en klapt het niet in tot nul. Alleen
     dat vlak mag krimpen; de witte blokken houden hun hoogte. */
  .case-fon--post .case-scherm{background:#fff;display:flex;flex-direction:column;}
  .case-fon--post .case-media{position:relative;inset:auto;flex:1 1 auto;
    min-height:0;aspect-ratio:9/16;background:#000;}
  /* de bovenste balk: het account, op wit. De marge erboven houdt hem vrij van
     de notch, net als de kopregel in de carrousel. */
  .case-fon--post .case-merk{position:static;flex-shrink:0;
    background:#fff;color:var(--ink);padding:12% 12px 8px;text-shadow:none;}
  .case-fon--post .case-merk .av{border-color:var(--line);}
  /* de onderste blokken: kanaal, functie en plaats, op wit in plaats van over
     de video heen met een donker verloop */
  .case-fon--post .case-onder{position:static;flex-shrink:0;
    background:#fff;color:var(--ink);padding:12px 14px 14px;}
  .case-fon--post .case-onder p{color:var(--muted);}
  /* De knoppenrij en het aantal likes staan alleen bij een Instagram-campagne in
     beeld. Bij de schermvullende variant zou die rij over de video heen vallen,
     dus daar blijven ze verborgen. De opmaak komt uit .phone-actions en
     .phone-likes hierboven; die klassen worden hier hergebruikt zodat het er
     precies zo uitziet als in de carrousel. */
  .case-onder .phone-actions,
  .case-onder .phone-likes{display:none;}
  .case-fon--post .case-onder .phone-actions{display:flex;padding:0 0 4px;}
  .case-fon--post .case-onder .phone-likes{display:block;padding:0 0 8px;}
  /* De balkjes en de geluidsknop horen bij de video, dus die hangen hier aan het
     mediavlak en niet aan het hele scherm. De notch zit boven de witte balk,
     dus daar hoeven ze niet omheen. */
  .case-fon--post .case-balken{top:9px;left:9px;right:9px;}
  .case-fon--post .case-geluid{top:10px;right:10px;}

  /* ---------- PROEF: dezelfde fotolijst om de carrousel op de homepage ----------
     Alleen binnen .phones-section, en die staat alleen op index.html. De
     telefoons in de kanaaldemo's staan in #demoBronnen en blijven dus zoals ze
     waren. Bevalt dit niet, dan kan dit hele blok weg en is er verder niets
     veranderd. Maten komen uit png-09.png, net als bij .case-fon--beeld. */
  .phones-section .phones-track .phone{
    background:none;border-radius:0;padding:0;box-shadow:none;
    /* hoogte volgt de baan, breedte volgt daaruit: past zo op elk schermformaat */
    width:auto;height:96%;aspect-ratio:415/846;
    filter:drop-shadow(0 18px 24px rgba(27,22,32,.34));}
  .phones-section .phones-track .phone::after{content:'';position:absolute;inset:0;
    z-index:6;pointer-events:none;
    background:url('../img/png-09.png') center/100% 100% no-repeat;}
  /* Deze carrousel en die in de dienstverlening zijn dezelfde bouwsteen, dus ze
     horen er zoveel mogelijk hetzelfde uit te zien: dezelfde rijen in beeld en
     dezelfde schaal voor de zijtelefoons. Even groot kunnen ze niet worden, en
     dat heeft een harde reden.

     LET OP: deze baan staat niet los in de sectie. Hij zit in .cases-stapel,
     een stapel van twee lagen met een VASTE hoogte van 470 (430 onder 900px),
     binnen .cases-plakker die overflow:hidden heeft. Alles wat hoger is dan
     die stapel wordt er domweg afgeknipt -- boven en onder. De baan mag dus
     nooit hoger worden dan .cases-stapel. Wil je de telefoons groter, verhoog
     dan eerst die stapel, en let erop dat .cases-plakker maar 100vh hoog is
     en daar ook de kop boven moet passen. */
  .phones-section .phones-track{height:620px;}
  @media(max-width:1200px){
    .phones-section .phones-track{height:520px;}
  }
  @media(max-width:900px){
    .phones-section .phones-track{height:430px;}
  }
  /* Er staan twee soorten naast elkaar: telefoons en laptops. De verschuiving
     kan daarom niet in procenten van het element zelf -- dan springt een laptop
     verder opzij dan een telefoon en staat de rij scheef. Dus een vaste maat in
     pixels, gerekend op de breedste van de twee: halve laptop plus 40% van de
     laptopbreedte (de buren staan op .8).

     De rij is breder dan het venster en dat is met opzet: de buren lopen deels
     buiten beeld en worden door de overflow:hidden van .cases-plakker afgesneden.
     Alleen zo kan de laptop groot. Hield je de hele rij binnen beeld, dan is
     2,6 x de laptopbreedte de limiet en kom je niet boven de 380 uit.

     De baan groeit mee met de hoogte hierboven; .cases-stapel moet dezelfde
     hoogtes hebben, anders wordt de onderkant afgeknipt. */
  .phones-section .phones-track{max-width:100%;}
  .phones-section .phones-track .laptop-kaart{width:660px;}
  .phones-section .phones-track .phone[data-slot="-1"],
  .phones-section .phones-track .laptop-kaart[data-slot="-1"]{transform:translate(-50%,-50%) translateX(-600px) scale(.8);}
  .phones-section .phones-track .phone[data-slot="1"],
  .phones-section .phones-track .laptop-kaart[data-slot="1"]{transform:translate(-50%,-50%) translateX(600px) scale(.8);}
  .phones-section .phones-track .phone[data-slot="far-left"],
  .phones-section .phones-track .laptop-kaart[data-slot="far-left"]{transform:translate(-50%,-50%) translateX(-980px) scale(.7);}
  .phones-section .phones-track .phone[data-slot="far-right"],
  .phones-section .phones-track .laptop-kaart[data-slot="far-right"]{transform:translate(-50%,-50%) translateX(980px) scale(.7);}
  @media(max-width:1200px){
    .phones-section .phones-track .laptop-kaart{width:520px;}
    .phones-section .phones-track .phone[data-slot="-1"],
    .phones-section .phones-track .laptop-kaart[data-slot="-1"]{transform:translate(-50%,-50%) translateX(-470px) scale(.8);}
    .phones-section .phones-track .phone[data-slot="1"],
    .phones-section .phones-track .laptop-kaart[data-slot="1"]{transform:translate(-50%,-50%) translateX(470px) scale(.8);}
    .phones-section .phones-track .phone[data-slot="far-left"],
    .phones-section .phones-track .laptop-kaart[data-slot="far-left"]{transform:translate(-50%,-50%) translateX(-780px) scale(.7);}
    .phones-section .phones-track .phone[data-slot="far-right"],
    .phones-section .phones-track .laptop-kaart[data-slot="far-right"]{transform:translate(-50%,-50%) translateX(780px) scale(.7);}
  }
  @media(max-width:900px){
    .phones-section .phones-track .laptop-kaart{width:340px;}
    .phones-section .phones-track .phone[data-slot="-1"],
    .phones-section .phones-track .laptop-kaart[data-slot="-1"]{transform:translate(-50%,-50%) translateX(-300px) scale(.8);}
    .phones-section .phones-track .phone[data-slot="1"],
    .phones-section .phones-track .laptop-kaart[data-slot="1"]{transform:translate(-50%,-50%) translateX(300px) scale(.8);}
    .phones-section .phones-track .phone[data-slot="far-left"],
    .phones-section .phones-track .laptop-kaart[data-slot="far-left"]{transform:translate(-50%,-50%) translateX(-500px) scale(.7);}
    .phones-section .phones-track .phone[data-slot="far-right"],
    .phones-section .phones-track .laptop-kaart[data-slot="far-right"]{transform:translate(-50%,-50%) translateX(500px) scale(.7);}
  }

  /* De laptopkaart krijgt dezelfde opzet als een telefoon in deze baan:
     absoluut, gecentreerd, en met dezelfde overgang bij het schuiven. */
  .phones-section .phones-track .laptop-kaart{position:absolute;left:50%;top:50%;
    margin:0;z-index:5;
    transform:translate(-50%,-50%) translateX(420px) scale(.7);opacity:0;
    transition:transform .55s cubic-bezier(.33,1,.5,1),opacity .55s ease;will-change:transform;}
  .phones-section .phones-track .laptop-kaart[data-slot="0"]{transform:translate(-50%,-50%) scale(1);
    opacity:1;z-index:6;}
  .phones-section .phones-track .laptop-kaart[data-slot="-1"],
  .phones-section .phones-track .laptop-kaart[data-slot="1"]{opacity:1;z-index:5;}
  .phones-section .phones-track .laptop-kaart[data-slot="far-left"],
  .phones-section .phones-track .laptop-kaart[data-slot="far-right"]{opacity:0;z-index:1;pointer-events:none;}
  .phones-section .phones-track .laptop-kaart .wb-mock{width:100%;max-width:none;}
  @media(prefers-reduced-motion: reduce){
    .phones-section .phones-track .laptop-kaart{transition:none;}
  }
  /* De twee buitenste stonden op 88% dekking om ze naar achteren te duwen. Bij
     een vlak donker blok werkte dat, bij deze foto niet: het toestel heeft een
     zilveren metaalrand, en die wordt door de lichte achtergrond heen opgelicht.
     Zwart komt dan op 25 uit in plaats van 0 en de rand oogt wit. Het verschil
     in grootte duwt ze al genoeg naar achteren, dus volle dekking. */
  .phones-section .phones-track .phone.is-side,
  .phones-section .phones-track .phone[data-slot="-1"],
  .phones-section .phones-track .phone[data-slot="1"]{opacity:1;}
  /* Blijft er na het platformfilter minder dan drie posts over, dan zet het
     script .is-simpel op de baan: die krijgt height:auto en de telefoons
     position:static, naast elkaar in plaats van een schuivende carrousel.
     Daar loopt de opzet hierboven op stuk. De hoogte van 96% heeft dan geen
     baanhoogte meer om zich aan te meten en valt terug op auto; het scherm
     staat absoluut en geeft dus geen inhoudshoogte, waardoor de telefoon
     inklapt tot een streepje. En position:static haalt het ankerpunt weg waar
     het scherm en de fotolijst aan vastzitten. Dus: een vaste breedte, waaruit
     de hoogte via de verhouding volgt, en het ankerpunt terug. De selector
     volgt die van .is-simpel hierboven, anders wint position:static. */
  .phones-section .phones-track.is-simpel .phone:not([data-slot="far-left"]):not([data-slot="far-right"]){
    position:relative;left:auto;top:auto;
    width:min(212px,62vw);height:auto;}
  /* de getekende notch is niet meer nodig, de foto heeft er zelf een */
  .phones-section .phones-track .phone-notch{display:none;}
  .phones-section .phones-track .phone-screen{position:absolute;left:7.470%;top:2.955%;
    width:86.024%;height:93.144%;aspect-ratio:auto;border-radius:11.2%/5.1%;
    /* kopregel op natuurlijke hoogte, video vult precies de rest */
    display:flex;flex-direction:column;
    /* Beide ringen hebben de kleur van de RAND van het toestel, niet van het
       scherm. Ze liggen namelijk onder die rand. Het scherm is hier wit, en de
       rand loopt zacht uit; wit eronder maakt die rand bleek zodra de telefoon
       wordt verkleind of doorzichtiger wordt gemaakt, zoals bij de twee
       buitenste in de carrousel. Donker valt weg tegen de rand, op elk formaat.
       Buiten: vult de haarlijn op een halve pixel. Binnen: houdt het witte
       scherm weg van de zachte binnenrand. De binnenste staat als border en
       niet als inset box-shadow -- die wordt onder de inhoud geschilderd,
       waardoor de video hem afdekt en de witte delen niet, en het filmpje
       twee pixels breder oogt dan de rest van de post. */
    box-shadow:0 0 0 6px #0E0B12;border:2px solid #0E0B12;}
  /* De notch hangt over de bovenste 3,7% van het scherm. De kopregel moet daar
     onderlangs, anders bijt de notch in de gebruikersnaam. Wat erboven overblijft
     is wit scherm, net als de statusbalk op een echt toestel. */
  /* in procenten, net als bij de andere telefoons: deze carrousel verandert nu
     van formaat per breekpunt, en een vaste marge klopt dan niet overal */
  .phones-section .phones-track .phone-header{padding-top:12%;}
  .phones-section .phones-track .phone-media{height:auto;flex:1;min-height:0;}
  /* Knoppen en likes staan in deze carrousel weer in beeld, net als in de
     andere carrousels. Dat is niet alleen om het Instagram-achtig te laten
     ogen: het lost ook het bijsnijden op. Met alleen een kopregel moest het
     mediavlak de hele resthoogte vullen en kwam het op 9:17,3 uit -- smaller
     van verhouding dan de video, en dan snijdt object-fit:cover links en
     rechts bij, precies waar de tekst staat. Met deze twee regels erbij wordt
     het mediavlak korter en komt het op 9:15,1: breder dan de video, dus er
     gaat nog maar boven en onder iets af.

         alleen kopregel                        7,4% van de breedte weg
         + knoppen, likes en onderschrift        0% breedte, 10,5% hoogte

     Het onderschrift staat er sinds de telefoon op het formaat van de
     dienstverlening zit. Op de oude, smallere telefoon kostte die regel 17,8%
     van de hoogte, omdat de vaste rijen daar een veel groter deel van een
     kleiner scherm innamen; nu is dat 10,5%. Uitlijnen vanaf links is niet
     meer nodig, dus de video staat weer op de gewone uitsnede van center 55%.
     Bij TikTok blijven deze rijen verborgen; dat staat met !important vast. */
  /* De kopregel staat een eind hierboven óók in de verborgen lijst (zoek op
     '.phones-track .phone-header'); zonder deze regel blijft de witte bovenkant
     met het account weg. */
  .phones-section .phones-track .phone-header{display:flex;}
  .phones-section .phones-track .phone-actions{display:flex;}
  .phones-section .phones-track .phone-likes{display:block;}
  .phones-section .phones-track .phone-caption{display:block;height:34px;}
  /* TikTok heeft geen kopregel: de video is het enige kind van het scherm en
     hoort het helemaal te vullen. Er staat op die video echter een vaste
     aspect-ratio:9/16 met !important, uit de tijd dat het scherm ook 9:16 was.
     Dit scherm is 9:19,9, en die vaste verhouding botst met de flex-indeling:
     de video komt dan op 324 in plaats van 402 pixels uit en laat onderaan een
     zwarte strook over, met de knoppenkolom halverwege in beeld. Hier dus
     uitzetten. Uitlijnen hoeft niet; er staat geen tekst tegen de zijkant. */
  .phones-section .phones-track .phone[data-platform="tiktok"] .phone-media{
    position:absolute!important;inset:0!important;
    width:auto!important;height:auto!important;
    aspect-ratio:auto!important;flex:none;}

  /* ---------- Fotolijst op de overige telefoons ----------
     Zelfde maten en dezelfde ringen als hierboven; alleen de plekken
     verschillen. Vier dingen pakken hier anders uit dan op de homepage:

     1. Deze contexten geven de telefoon allemaal al een breedte in pixels, en
        de verschuivingen van de carrousels zijn daar met de hand op afgestemd
        (tot op tien pixels nauwkeurig, zie .dv-paneel-beeld). Die breedtes
        laat ik dus staan; alleen de hoogte volgt voortaan uit de verhouding.
        Zo blijven al die verschuivingen kloppen.
     2. Aan de dekking raak ik niets. De zichtbare standen staan hier al op 1,
        en de standen die buiten beeld wachten op 0. Dat laatste moet zo blijven,
        anders komen geparkeerde telefoons tevoorschijn.
     3. Uitlijnen vanaf links is hier niet nodig. Het mediavlak is in al deze
        contexten breder van verhouding dan de video (0,62 tot 0,73 tegen
        0,5625), dus cover snijdt boven en onder bij in plaats van links en
        rechts. De bestaande verticale uitsnedes blijven daarom staan.
     4. Het scherm en de lijst haken aan de telefoon, dus die moet een ankerpunt
        zijn. In de carrousels staat hij al absoluut, bij de losse telefoons niet.

     Laptops blijven hier buiten: .mock-laptop, .jb-laptop, .werkenbij-laptop,
     .wb-mock, .browser-mock en #rotCardLaptop komen in geen van deze regels voor. */
  .demo-social .phones-track .phone,
  .kan-demo .phone,
  .shoot-telefoon .phone,
  #rotCardPhone .phone{
    background:none;border-radius:0;padding:0;box-shadow:none;
    height:auto;aspect-ratio:415/846;
    filter:drop-shadow(0 18px 24px rgba(27,22,32,.34));}
  /* Alleen de losse telefoon die rechtstreeks in de demohouder hangt. Met een
     gewone afstammingsselector raakt dit ook de carrousel, want die staat ook
     in .kan-demo -- en dan verliezen die zes telefoons hun absolute positie,
     vallen ze uit hun stapeling en komen ze onder elkaar te staan. */
  .kan-demo > .phone,
  .shoot-telefoon .phone{position:relative;}
  /* Ook maakCarrousel() zet .is-simpel op de baan zodra er minder dan drie
     clips zijn, en dan krijgen deze telefoons position:static. Het scherm en
     de fotolijst raken daarmee hun ankerpunt kwijt. De breedte staat hier wel
     in pixels, dus anders dan op de homepage klapt de hoogte niet in; alleen
     het ankerpunt moet terug. Selector volgt die van .is-simpel, anders wint
     position:static. */
  .demo-social .phones-track.is-simpel .phone:not([data-slot="far-left"]):not([data-slot="far-right"]){
    position:relative;left:auto;top:auto;}
  /* Op het content-kanaal staat verderop nog een losse schaduw op de telefoon
     (zoek op .is-kanaal-content .kan-demo .phone). Die had hogere voorrang dan
     de box-shadow:none hierboven, en tekende een rechthoek achter een toestel
     dat juist geen rechthoek is. De schaduw loopt nu via de drop-shadow, die
     de vorm van de foto volgt. */
  .is-kanaal-content .kan-demo .phone{box-shadow:none;}

  /* ---------- Ruimte onder de dienstenbalk ----------
     De balk met Diensten / Social media / Jobboards / Werkenbij-site staat in
     .tab-houder: sticky, met height:0, dus hij zweeft over de panelen heen in
     plaats van er ruimte voor op te eisen. Hij hangt op var(--navh) plus de
     26px van .tab-houder .wrap, en de pil zelf is zo'n 39 hoog -- onderkant dus
     rond var(--navh) + 65.

     Het paneel eronder centreert zijn inhoud verticaal over de volle 100vh. Op
     een hoog scherm valt dat onder de balk uit, maar hoe lager het venster,
     hoe verder die inhoud omhoog komt -- en dan schuiven de verhaalbolletjes,
     die er als eerste in staan, achter de balk.

     Met deze bovenmarge begint het inhoudsvak altijd onder de balk. De inhoud
     blijft binnen dat vak gecentreerd, dus op een hoog scherm verandert er
     nauwelijks iets; op een laag scherm kan hij niet meer omhoog kruipen.
     Alleen boven 900px: daaronder is het paneel niet plakkend meer en staat er
     al 76px bovenmarge. */
  @media(min-width:901px){
    .dv-paneel-binnen{padding-top:calc(var(--navh,76px) + 83px);}
  }
  .demo-social .phones-track .phone::after,
  .kan-demo .phone::after,
  .shoot-telefoon .phone::after,
  #rotCardPhone .phone::after{content:'';position:absolute;inset:0;
    z-index:6;pointer-events:none;
    background:url('../img/png-09.png') center/100% 100% no-repeat;}
  .demo-social .phones-track .phone-notch,
  .kan-demo .phone-notch,
  .shoot-telefoon .phone-notch,
  #rotCardPhone .phone-notch{display:none;}
  .demo-social .phones-track .phone-screen,
  .kan-demo .phone-screen,
  .shoot-telefoon .phone-screen,
  #rotCardPhone .phone-screen{position:absolute;left:7.470%;top:2.955%;
    width:86.024%;height:93.144%;aspect-ratio:auto;border-radius:11.2%/5.1%;
    display:flex;flex-direction:column;
    /* De binnenrand staat als border en niet als inset box-shadow. Zo'n inset
       wordt namelijk onder de inhoud geschilderd: de video dekt hem af, de
       witte delen van de post niet, en dan oogt het filmpje twee pixels
       breder dan de kopregel en het onderschrift. Een border zit in het
       doosmodel (box-sizing staat globaal op border-box), dus alles binnen
       het scherm schuift er gelijk voor opzij. */
    box-shadow:0 0 0 6px #0E0B12;border:2px solid #0E0B12;}
  /* Ruimte boven de kopregel, zodat de notch er niet in bijt. Hier in procenten
     in plaats van de 22px van de homepage: deze schermen lopen van 120 tot 239
     pixels breed, en een vaste marge eet op de kleinste telefoons te veel van de
     video. De notch is 3,7% van de schermhoogte, wat bij deze verhouding op
     ruim 8% van de schermbreedte uitkomt; 12% houdt overal marge over. Op de
     breedte van de homepage komt dit op dezelfde 22 pixels uit. */
  .demo-social .phones-track .phone-header,
  .kan-demo .phone-header,
  .shoot-telefoon .phone-header,
  #rotCardPhone .phone-header{padding-top:12%;}
  /* Alleen het mediavlak mag krimpen als de inhoud niet past. Zonder dit
     krimpen de kopregel en het onderschrift evenredig mee en wordt hun tekst
     afgeknepen. */
  .demo-social .phones-track .phone-header,
  .demo-social .phones-track .phone-actions,
  .demo-social .phones-track .phone-likes,
  .demo-social .phones-track .phone-caption,
  .kan-demo .phone-header, .kan-demo .phone-actions,
  .kan-demo .phone-likes, .kan-demo .phone-caption,
  .shoot-telefoon .phone-header, .shoot-telefoon .phone-actions,
  .shoot-telefoon .phone-likes, .shoot-telefoon .phone-caption,
  #rotCardPhone .phone-header, #rotCardPhone .phone-actions,
  #rotCardPhone .phone-likes, #rotCardPhone .phone-caption{flex-shrink:0;}
  /* het mediavlak vult wat er tussen kopregel en onderkant overblijft, zodat er
     onderin geen strook wit scherm achterblijft */
  .demo-social .phones-track .phone-media,
  .kan-demo .phone-media,
  .shoot-telefoon .phone-media,
  #rotCardPhone .phone-media{height:auto;flex:1 1 auto;min-height:0;
    /* Deze verhouding is hier geen keuze maar een vangnet. Op de homepage
       krijgt de telefoon een vaste hoogte (96% van de baan); hier volgt de
       hoogte uit aspect-ratio, en het scherm meet zich met 93,144% aan die
       afgeleide hoogte. Kan de browser die niet als vaste waarde gebruiken,
       dan wordt het scherm inhoudshoog. Met flex-basis 0 (flex:1) komt dit
       vlak dan op precies nul uit en is de video weg, terwijl de kopregel en
       het onderschrift blijven staan. Met basis auto plus deze verhouding
       heeft het vlak altijd een eigen maat om op terug te vallen: is er wel
       een vaste hoogte, dan groeit het gewoon mee en vult het de resthoogte. */
    aspect-ratio:9/16;}
  /* TikTok heeft geen kopregel; de video vult het scherm. Absoluut gezet, zodat
     er niets overblijft dat kan inklappen -- zie de carrousel hierboven. */
  .demo-social .phones-track .phone[data-platform="tiktok"] .phone-media,
  .kan-demo .phone[data-platform="tiktok"] .phone-media,
  .shoot-telefoon .phone[data-platform="tiktok"] .phone-media,
  #rotCardPhone .phone[data-platform="tiktok"] .phone-media{
    position:absolute!important;inset:0!important;
    width:auto!important;height:auto!important;
    aspect-ratio:auto!important;flex:none;}

  .case-tekst h2{font-size:34px;line-height:1;margin:0 0 14px;}
  .case-tekst .intro{font-size:16.5px;color:var(--muted);margin:0 0 26px;max-width:54ch;}
  .case-vak{border-top:2px solid var(--ink);padding:18px 0;}
  .case-vak h3{font-size:15px;margin:0 0 8px;}
  .case-vak p{font-size:14.5px;color:var(--muted);margin:0;max-width:58ch;}
  .case-cijfers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0 4px;}
  .case-cijfer b{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:30px;
    line-height:1;color:var(--lime);}
  .case-cijfer span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);
    letter-spacing:.04em;}
  .case-kanalen{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;}
  .case-kanalen span{font-family:'IBM Plex Mono',monospace;font-size:11px;background:var(--sage);
    padding:5px 10px;border-radius:999px;}
  @media(max-width:900px){
    .case-body{grid-template-columns:1fr;gap:34px;}
    .case-fon{margin:0 auto;}
    .case-cijfers{grid-template-columns:1fr 1fr;}
  }


  /* ================= Krant die openscheurt als deur naar de diensten ================= */
  .krantbaan{position:relative;height:210vh;background:var(--paper);}
  .krantplak{position:sticky;top:0;height:100vh;overflow:hidden;}
  .krant-onder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    text-align:center;padding:40px 28px;}
  .krant-onder .in{max-width:640px;transform:scale(.94);opacity:0;
    transition:transform .5s ease,opacity .5s ease;}
  .krant-onder .in.zicht{transform:none;opacity:1;}
  .krant-onder span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--lime);display:block;margin-bottom:12px;}
  .krant-onder h2{font-size:clamp(26px,4.4vw,48px);line-height:1;margin-bottom:14px;}
  .krant-onder p{color:var(--muted);margin:0;font-size:16px;}
  /* bewegende achtergrond achter 'Zo werven we nu', met donker vlak voor leesbaarheid */
  .krant-onder{overflow:hidden;}
  /* licht vervaagd en iets uitvergroot, zodat het beweging geeft zonder
     dat de tekst in de campagne met de kop concurreert */
  .krant-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    object-position:center center;z-index:0;pointer-events:none;
    opacity:0;transition:opacity .5s ease;}
  .krant-video.aan{opacity:1;}
  /* lichter vlak: de opname is zelf al donker, een zwaar waas maakte de pagina somber */
  .krant-waas{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:radial-gradient(70% 60% at 50% 48%, rgba(22,22,19,.30), rgba(22,22,19,.58) 70%, rgba(22,22,19,.72));}
  .krant-onder .in{position:relative;z-index:2;}
  .krant-onder h2{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5);}
  .krant-onder p{color:rgba(255,255,255,.88);text-shadow:0 1px 12px rgba(0,0,0,.5);}
  .krant-onder span{color:var(--lime);}
  .kr-helft{position:absolute;inset:-7% -5%;z-index:3;background:var(--paper);color:#2A2722;
    will-change:transform;filter:drop-shadow(0 6px 14px rgba(22,22,19,.18));}
  .kr-helft::after{content:'';position:absolute;inset:0;pointer-events:none;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,.018) 0 1px, transparent 1px 3px);}
  .kr-links{clip-path:polygon(0% -6%, 51.37% 0.0%, 50.28% 0.67%, 48.15% 1.33%, 48.39% 2.0%, 47.75% 2.67%, 49.32% 3.33%, 48.68% 4.0%, 51.56% 4.67%, 48.92% 5.33%, 49.68% 6.0%, 52.76% 6.67%, 51.5% 7.33%, 51.52% 8.0%, 48.31% 8.67%, 49.88% 9.33%, 49.13% 10.0%, 50.1% 10.67%, 52.16% 11.33%, 47.32% 12.0%, 50.09% 12.67%, 49.07% 13.33%, 49.59% 14.0%, 47.59% 14.67%, 49.92% 15.33%, 49.9% 16.0%, 48.9% 16.67%, 48.1% 17.33%, 48.88% 18.0%, 50.08% 18.67%, 49.5% 19.33%, 51.96% 20.0%, 50.9% 20.67%, 48.35% 21.33%, 51.26% 22.0%, 48.94% 22.67%, 48.06% 23.33%, 49.92% 24.0%, 52.45% 24.67%, 49.0% 25.33%, 49.34% 26.0%, 48.78% 26.67%, 50.58% 27.33%, 49.45% 28.0%, 49.62% 28.67%, 51.41% 29.33%, 49.54% 30.0%, 48.91% 30.67%, 49.96% 31.33%, 49.86% 32.0%, 51.56% 32.67%, 50.67% 33.33%, 51.41% 34.0%, 50.8% 34.67%, 51.49% 35.33%, 48.11% 36.0%, 48.85% 36.67%, 50.23% 37.33%, 51.39% 38.0%, 49.92% 38.67%, 49.45% 39.33%, 50.27% 40.0%, 47.35% 40.67%, 50.8% 41.33%, 48.92% 42.0%, 48.91% 42.67%, 48.94% 43.33%, 47.96% 44.0%, 48.64% 44.67%, 48.85% 45.33%, 52.13% 46.0%, 49.18% 46.67%, 50.41% 47.33%, 47.02% 48.0%, 48.55% 48.67%, 52.65% 49.33%, 48.12% 50.0%, 47.21% 50.67%, 51.65% 51.33%, 48.76% 52.0%, 49.94% 52.67%, 48.99% 53.33%, 48.88% 54.0%, 49.57% 54.67%, 49.49% 55.33%, 48.7% 56.0%, 49.7% 56.67%, 49.55% 57.33%, 50.81% 58.0%, 47.81% 58.67%, 50.48% 59.33%, 48.22% 60.0%, 51.65% 60.67%, 52.06% 61.33%, 48.79% 62.0%, 49.35% 62.67%, 52.74% 63.33%, 51.07% 64.0%, 52.44% 64.67%, 50.14% 65.33%, 50.56% 66.0%, 49.85% 66.67%, 49.95% 67.33%, 49.29% 68.0%, 49.49% 68.67%, 51.38% 69.33%, 49.31% 70.0%, 47.25% 70.67%, 48.35% 71.33%, 50.89% 72.0%, 48.11% 72.67%, 50.01% 73.33%, 50.25% 74.0%, 48.72% 74.67%, 50.85% 75.33%, 52.56% 76.0%, 49.33% 76.67%, 49.32% 77.33%, 47.15% 78.0%, 49.77% 78.67%, 49.19% 79.33%, 50.63% 80.0%, 50.65% 80.67%, 50.3% 81.33%, 48.61% 82.0%, 50.14% 82.67%, 50.6% 83.33%, 52.17% 84.0%, 48.16% 84.67%, 51.09% 85.33%, 51.27% 86.0%, 51.24% 86.67%, 50.44% 87.33%, 51.68% 88.0%, 49.98% 88.67%, 51.81% 89.33%, 51.44% 90.0%, 51.86% 90.67%, 49.64% 91.33%, 51.51% 92.0%, 50.74% 92.67%, 47.73% 93.33%, 50.61% 94.0%, 49.97% 94.67%, 51.83% 95.33%, 51.14% 96.0%, 48.4% 96.67%, 51.14% 97.33%, 51.9% 98.0%, 52.11% 98.67%, 49.93% 99.33%, 50.51% 100.0%, 0% 106%);}
  .kr-rechts{clip-path:polygon(100% -6%, 51.37% 0.0%, 50.28% 0.67%, 48.15% 1.33%, 48.39% 2.0%, 47.75% 2.67%, 49.32% 3.33%, 48.68% 4.0%, 51.56% 4.67%, 48.92% 5.33%, 49.68% 6.0%, 52.76% 6.67%, 51.5% 7.33%, 51.52% 8.0%, 48.31% 8.67%, 49.88% 9.33%, 49.13% 10.0%, 50.1% 10.67%, 52.16% 11.33%, 47.32% 12.0%, 50.09% 12.67%, 49.07% 13.33%, 49.59% 14.0%, 47.59% 14.67%, 49.92% 15.33%, 49.9% 16.0%, 48.9% 16.67%, 48.1% 17.33%, 48.88% 18.0%, 50.08% 18.67%, 49.5% 19.33%, 51.96% 20.0%, 50.9% 20.67%, 48.35% 21.33%, 51.26% 22.0%, 48.94% 22.67%, 48.06% 23.33%, 49.92% 24.0%, 52.45% 24.67%, 49.0% 25.33%, 49.34% 26.0%, 48.78% 26.67%, 50.58% 27.33%, 49.45% 28.0%, 49.62% 28.67%, 51.41% 29.33%, 49.54% 30.0%, 48.91% 30.67%, 49.96% 31.33%, 49.86% 32.0%, 51.56% 32.67%, 50.67% 33.33%, 51.41% 34.0%, 50.8% 34.67%, 51.49% 35.33%, 48.11% 36.0%, 48.85% 36.67%, 50.23% 37.33%, 51.39% 38.0%, 49.92% 38.67%, 49.45% 39.33%, 50.27% 40.0%, 47.35% 40.67%, 50.8% 41.33%, 48.92% 42.0%, 48.91% 42.67%, 48.94% 43.33%, 47.96% 44.0%, 48.64% 44.67%, 48.85% 45.33%, 52.13% 46.0%, 49.18% 46.67%, 50.41% 47.33%, 47.02% 48.0%, 48.55% 48.67%, 52.65% 49.33%, 48.12% 50.0%, 47.21% 50.67%, 51.65% 51.33%, 48.76% 52.0%, 49.94% 52.67%, 48.99% 53.33%, 48.88% 54.0%, 49.57% 54.67%, 49.49% 55.33%, 48.7% 56.0%, 49.7% 56.67%, 49.55% 57.33%, 50.81% 58.0%, 47.81% 58.67%, 50.48% 59.33%, 48.22% 60.0%, 51.65% 60.67%, 52.06% 61.33%, 48.79% 62.0%, 49.35% 62.67%, 52.74% 63.33%, 51.07% 64.0%, 52.44% 64.67%, 50.14% 65.33%, 50.56% 66.0%, 49.85% 66.67%, 49.95% 67.33%, 49.29% 68.0%, 49.49% 68.67%, 51.38% 69.33%, 49.31% 70.0%, 47.25% 70.67%, 48.35% 71.33%, 50.89% 72.0%, 48.11% 72.67%, 50.01% 73.33%, 50.25% 74.0%, 48.72% 74.67%, 50.85% 75.33%, 52.56% 76.0%, 49.33% 76.67%, 49.32% 77.33%, 47.15% 78.0%, 49.77% 78.67%, 49.19% 79.33%, 50.63% 80.0%, 50.65% 80.67%, 50.3% 81.33%, 48.61% 82.0%, 50.14% 82.67%, 50.6% 83.33%, 52.17% 84.0%, 48.16% 84.67%, 51.09% 85.33%, 51.27% 86.0%, 51.24% 86.67%, 50.44% 87.33%, 51.68% 88.0%, 49.98% 88.67%, 51.81% 89.33%, 51.44% 90.0%, 51.86% 90.67%, 49.64% 91.33%, 51.51% 92.0%, 50.74% 92.67%, 47.73% 93.33%, 50.61% 94.0%, 49.97% 94.67%, 51.83% 95.33%, 51.14% 96.0%, 48.4% 96.67%, 51.14% 97.33%, 51.9% 98.0%, 52.11% 98.67%, 49.93% 99.33%, 50.51% 100.0%, 100% 106%);}
  .kr-in{position:absolute;top:7%;left:50%;transform:translateX(-50%);
    width:min(980px,94vw);height:93%;padding:96px 30px 34px;}
  .kr-mast{border-bottom:3px solid #2A2722;padding-bottom:10px;margin-bottom:6px;}
  .kr-mast h3{font-family:Georgia,'Times New Roman',serif;font-weight:700;text-transform:none;
    font-size:clamp(32px,6vw,68px);line-height:.94;letter-spacing:-.02em;text-align:center;}
  .kr-mast .regel{display:flex;justify-content:space-between;font-family:'IBM Plex Mono',monospace;
    font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding-top:8px;opacity:.75;}
  .kr-sub{border-bottom:1px solid #2A2722;padding:6px 0 10px;margin-bottom:16px;text-align:center;
    font-family:Georgia,serif;font-size:13px;font-style:italic;opacity:.8;}
  .kr-kol{column-count:4;column-gap:22px;column-rule:1px solid rgba(42,39,34,.22);
    font-family:Georgia,serif;font-size:11.5px;line-height:1.5;text-align:justify;}
  .kr-kol p{margin:0 0 9px;}
  .kr-kol h4{font-family:Georgia,serif;font-weight:700;font-size:14px;margin:0 0 5px;line-height:1.1;}
  .kr-adv{break-inside:avoid;border:2px solid #2A2722;padding:10px 11px;margin:0 0 14px;text-align:center;}
  .kr-adv .kop{font-family:Georgia,serif;font-weight:700;font-size:15px;text-transform:uppercase;
    line-height:1.05;margin-bottom:5px;}
  .kr-adv .tekst{font-size:10.5px;line-height:1.45;}
  .kr-adv .voet{margin-top:7px;font-family:'IBM Plex Mono',monospace;font-size:8.5px;
    letter-spacing:.06em;opacity:.75;}
  .kr-foto{break-inside:avoid;margin:0 0 14px;}
  .kr-foto img{width:100%;display:block;filter:grayscale(1) contrast(1.05);}
  .kr-foto .bijschrift{display:block;font-family:'IBM Plex Mono',monospace;font-size:8px;
    line-height:1.4;letter-spacing:.02em;padding-top:5px;opacity:.75;text-align:left;}
  .kr-slot{font-style:italic;opacity:.7;}
  .kr-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:5;
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
    color:#2A2722;opacity:.7;display:flex;align-items:center;gap:9px;transition:opacity .3s ease;}
  .kr-hint.weg{opacity:0;}
  .kr-hint i{display:block;width:22px;height:1px;background:currentColor;}
  @media(max-width:820px){
    .kr-kol{column-count:2;}
    .kr-in{padding:88px 20px 26px;}
  }
  @media(max-width:600px){
    /* de drie regels onder de kop passen niet naast elkaar op een smal scherm */
    .kr-mast .regel{flex-direction:column;align-items:center;gap:2px;line-height:1.5;}
    .kr-kol{column-count:1;font-size:12px;}
    .kr-in{padding:84px 18px 24px;}
  }

  /* verhaalbolletjes binnen het eerste dienstpaneel */
  /* compact en op één rij, zodat de knop eronder in beeld blijft */
  /* links uitgelijnd met de tekst eronder, op één rij */
  .dv-rondjes{margin:0 0 22px;flex-wrap:nowrap;overflow-x:auto;gap:14px;
    justify-content:flex-start;padding-bottom:4px;scrollbar-width:thin;}
  .dv-rondjes::-webkit-scrollbar{height:4px;}
  .dv-rondjes::-webkit-scrollbar-thumb{background:var(--lime);}
  .dv-rondjes .case-rondje{width:70px;flex:0 0 auto;text-align:center;}
  .dv-rondjes .case-rondje:first-child{margin-left:0;}
  .dv-rondjes .case-rondje .ring{width:62px;height:62px;padding:2.5px;}
  .dv-rondjes .case-rondje .foto{border-width:2.5px;}
  .dv-rondjes .case-rondje b{font-size:9.5px;margin-top:6px;line-height:1.15;}
  .dv-rondjes .case-rondje i{font-size:8px;min-width:15px;height:15px;right:2px;top:-1px;}
  .dv-rondjes .case-rondje.leeg .plus{font-size:20px;}



  /* ---------- Bewegende achtergrond in het blauwe teamvlak ---------- */
  .team-hero{position:relative;overflow:hidden;}
  /* De handen met de telefoon zitten op ongeveer 31% van de opnamehoogte.
     Volledig centreren vroeg 1.3x inzoomen, maar dan viel het bureau weg.
     1.15x is de middenweg: bureau en bakjes blijven in beeld en de telefoon
     zit net boven het midden. */
  .team-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    object-position:50% 0%;transform:scale(1.15);transform-origin:center top;
    z-index:0;pointer-events:none;opacity:0;transition:opacity .6s ease;}
  .team-video.aan{opacity:1;}
  /* geen kleurlaag meer: de opname is zwart-wit en houdt zijn eigen tinten.
     Wel een donkere band boven- en onderaan, anders valt de tekst weg. */
  .team-waas{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg, rgba(22,22,19,.42), rgba(22,22,19,.14) 42%, rgba(22,22,19,.5));}
  .team-hero > .wrap{position:relative;z-index:2;}
  /* de opname is licht grijs; kop en tekst daarom wit met een zachte schaduw */
  #team-overlay .team-hero .ct-kop,
  #team-overlay .team-hero .ct-kop #teamA,
  #team-overlay .team-hero .ct-kop #teamC{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5);}
  /* alleen de knipperende cursor krijgt het oranje accent */
  #team-overlay .team-hero .ct-caret{background:var(--lime);}
  #team-overlay .team-hero p{color:rgba(255,255,255,.92);
    text-shadow:0 1px 12px rgba(0,0,0,.5);}
  #team-overlay .team-hero .organic-badge{background:rgba(255,255,255,.94);
    color:var(--ink);border-color:transparent;}
  .team-hero .contact-wave{position:relative;z-index:2;}
  @media(prefers-reduced-motion: reduce){ .team-video{display:none;} }

  /* ---------- Hero's met een video erachter ----------
     Gebruikt door 'wat we doen' (.dienst-hero) en de vacaturepagina
     (.vac2-hero), naar het voorbeeld van het teamvlak: video erachter, donkere
     band eroverheen zodat de tekst leesbaar blijft, witte kop met zachte
     schaduw en het oranje accent alleen op de cursor. Anders dan bij het team
     staat hier geen zoom op de video: die opnames zijn 16:9 en vullen de band
     vanzelf.

     De omhullende klasse verschilt per pagina, want de lettergroottes lopen ver
     uiteen (110px tegen 54px). De onderdelen erbinnen heten wel hetzelfde, dus
     .hero-video en .hero-waas werken op beide plekken. */
  .dienst-hero,
  .vac2-hero{position:relative;overflow:hidden;}
  .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    object-position:50% 45%;z-index:0;pointer-events:none;
    opacity:0;transition:opacity .6s ease;}
  .hero-video.aan{opacity:1;}
  .hero-waas{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg, rgba(22,22,19,.42), rgba(22,22,19,.14) 42%, rgba(22,22,19,.5));}
  .dienst-hero > .wrap,
  .vac2-hero > .wrap{position:relative;z-index:2;}
  /* de losse stukken van de kop erven kleur en schaduw van de h1 */
  .dienst-hero .ct-kop,
  .vac2-hero .ct-kop{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5);}
  /* Het gemarkeerde woord houdt de huisstijl aan: donker vlak met witte letters,
     net als in alle andere koppen. De schaduw die de kop eromheen zet moet er
     hier af, want dit woord staat op een eigen ondergrond. */
  .dienst-hero h1 .hl-orange,
  .vac2-hero h1 .hl-orange{background:var(--ink);color:var(--paper);text-shadow:none;}

  /* De kop mag hoogstens twee regels beslaan. Twee dingen regelen dat samen.
     Ten eerste staat 'The next step' op een eigen regel en mag die niet breken;
     zonder dat viel 'step' soms om en begon 'werving' pas op een derde regel.
     Ten tweede schaalt de letter mee met het venster in plaats van in drie
     vaste stappen, zodat die eerste regel op elke breedte past en nooit buiten
     beeld loopt. De 110px blijft de bovengrens, dus op een ruim scherm ziet hij
     er hetzelfde uit als voorheen. Deze regel overrulet daarmee de drie
     lettergroottes van .dv-kop h1; dat is hier de bedoeling. */
  .dienst-hero .ct-kop{max-width:none;font-size:clamp(32px, 7.4vw, 110px);}
  .dienst-hero .ct-kop #dienstA{display:block;white-space:nowrap;}
  .dienst-hero .ct-caret,
  .vac2-hero .ct-caret{background:var(--lime);}
  .dienst-hero p,
  .vac2-hero p{color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,0,0,.5);}
  .dienst-hero .organic-badge,
  .vac2-hero .organic-badge{background:rgba(255,255,255,.94);
    color:var(--ink);border-color:transparent;}
  @media(prefers-reduced-motion: reduce){ .hero-video{display:none;} }


  /* ================= Vacaturepagina (eigen vacatures, zonder platformkoppeling) ================= */
  #vacatures-overlay{display:none;position:fixed;inset:0;z-index:9000;
    background:var(--paper);overflow-y:auto;}
  .vac2-hero{background:var(--sage);padding:44px 0 40px;}
  .vac2-hero h1{font-size:clamp(30px,5vw,54px);line-height:1;margin:14px 0 14px;max-width:16ch;}
  .vac2-hero p{max-width:60ch;color:rgba(22,22,19,.78);margin:0;font-size:16.5px;}
  .vac2-lijst{padding:34px 0 70px;display:flex;flex-direction:column;gap:16px;}

  .vac2-kaart{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
    box-shadow:0 14px 30px -24px rgba(22,22,19,.4);}
  .vac2-kop{width:100%;background:none;border:0;cursor:pointer;text-align:left;
    display:grid;grid-template-columns:1fr auto 26px;align-items:center;gap:22px;
    padding:24px 26px;font-family:inherit;}
  .vac2-kop:hover{background:var(--paper);}
  .vac2-titel h2{font-size:clamp(19px,2.3vw,26px);line-height:1.1;margin:0 0 6px;}
  .vac2-titel p{margin:0;font-size:14.5px;color:var(--muted);}
  .vac2-meta{display:flex;gap:8px;flex-wrap:wrap;}
  .vac2-meta span{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.05em;
    background:var(--sage);padding:5px 10px;border-radius:999px;white-space:nowrap;}
  .vac2-pijl{font-size:15px;color:var(--muted);transition:transform .25s ease;}
  .vac2-kaart.is-open .vac2-pijl{transform:rotate(180deg);}

  .vac2-inhoud{border-top:1px solid var(--line);padding:26px;}
  .vac2-kolommen{display:grid;grid-template-columns:1.35fr .65fr;gap:34px;align-items:start;}
  .vac2-tekst h3{font-size:15px;margin:22px 0 8px;}
  .vac2-tekst h3:first-child{margin-top:0;}
  .vac2-tekst p{margin:0;color:var(--muted);font-size:15px;line-height:1.65;}
  .vac2-tekst ul{margin:0;padding-left:20px;color:var(--muted);font-size:15px;line-height:1.7;}

  .vac2-feiten{margin:0 0 22px;border-top:2px solid var(--ink);}
  .vac2-feiten div{display:flex;justify-content:space-between;gap:14px;
    padding:10px 0;border-bottom:1px solid var(--line);}
  .vac2-feiten dt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted);margin:0;}
  .vac2-feiten dd{margin:0;font-size:14px;font-weight:600;text-align:right;}

  .vac2-solliciteer{background:var(--sage);border-radius:14px;padding:20px;}
  .vac2-solliciteer h3{font-size:15px;margin:0 0 7px;}
  .vac2-solliciteer p{margin:0 0 14px;font-size:13.5px;color:rgba(22,22,19,.72);}
  .vac2-knop{display:block;text-align:center;background:var(--ink);color:var(--paper);
    border-radius:999px;padding:11px 16px;margin-bottom:8px;text-decoration:none;
    font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;
    text-transform:uppercase;}
  .vac2-knop:last-child{margin-bottom:0;}
  .vac2-knop.is-licht{background:#fff;color:var(--ink);}

  .vac2-open{background:var(--cream, var(--paper));border:1px dashed var(--line);
    border-radius:18px;padding:26px;text-align:center;margin-top:8px;}
  .vac2-open h3{font-size:17px;margin:0 0 8px;}
  .vac2-open p{margin:0 auto 16px;max-width:52ch;color:var(--muted);font-size:14.5px;}
  .vac2-open .vac2-knop{display:inline-block;margin:0;}

  @media(max-width:860px){
    .vac2-kop{grid-template-columns:1fr 20px;gap:12px;padding:20px;}
    .vac2-meta{grid-column:1 / -1;}
    .vac2-kolommen{grid-template-columns:1fr;gap:24px;}
    .vac2-inhoud{padding:20px;}
  }


  /* ---------- Bewegende achtergrond op de contactpagina ---------- */
  .contactvideo-hero{position:relative;overflow:hidden;}
  .contact-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    z-index:0;pointer-events:none;opacity:0;transition:opacity .6s ease;}
  .contact-video.aan{opacity:1;}
  .contact-waas{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(180deg, rgba(22,22,19,.42), rgba(22,22,19,.14) 42%, rgba(22,22,19,.5));}
  .contactvideo-hero > .wrap{position:relative;z-index:2;}
  .contactvideo-hero .contact-wave{position:relative;z-index:2;}
  #contact-overlay .contactvideo-hero h1,
  #contact-overlay .contactvideo-hero .ct-kop{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5);}
  /* alleen de knipperende cursor krijgt het oranje accent */
  #contact-overlay .contactvideo-hero .ct-caret{background:var(--lime);}
  #contact-overlay .contactvideo-hero p{color:rgba(255,255,255,.92);
    text-shadow:0 1px 12px rgba(0,0,0,.5);}
  #contact-overlay .contactvideo-hero .organic-badge{background:rgba(255,255,255,.94);
    color:var(--ink);border-color:transparent;}
  #contact-overlay .contactvideo-hero .contact-cijfers b,
  #contact-overlay .contactvideo-hero .contact-cijfers span{color:#fff;
    text-shadow:0 1px 12px rgba(0,0,0,.5);}
  @media(prefers-reduced-motion: reduce){ .contact-video{display:none;} }


  /* een element met display:flex negeert het verborgen-kenmerk; hier afdwingen */
  .vac2-lijst[hidden], .vac2-detailhouder[hidden], .vac2-detail[hidden]{display:none;}

  /* duidelijke terugknop naar het vacatureoverzicht */
  .vac2-terug{display:inline-flex;align-items:center;gap:9px;
    background:var(--lime);color:#fff;text-decoration:none;
    border-radius:999px;padding:10px 20px;margin-bottom:18px;
    font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.06em;
    text-transform:uppercase;transition:transform .18s ease, filter .18s ease;}
  .vac2-terug:hover{transform:translateX(-3px);filter:brightness(1.08);}
  .vac2-terug span{font-size:14px;line-height:1;}
  .vac2-terugvoet{margin-top:34px;padding-top:24px;border-top:1px solid var(--line);}
  .vac2-terugvoet .vac2-terug{margin-bottom:0;}

  /* detailpagina per vacature */
  .vac2-kop{text-decoration:none;color:inherit;}
  .vac2-detailhouder{padding:30px 0 70px;}
  .vac2-kruimels{display:flex;gap:9px;align-items:center;margin-bottom:22px;
    font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted);}
  .vac2-kruimels a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--lime);}
  .vac2-dkop{border-bottom:2px solid var(--ink);padding-bottom:20px;margin-bottom:26px;}
  .vac2-dkop h1{font-size:clamp(28px,4.4vw,48px);line-height:1;margin:0 0 10px;}
  .vac2-dkop p{margin:0 0 14px;font-size:16.5px;color:var(--muted);max-width:60ch;}
  .vac2-dkop .vac2-pitch{color:var(--ink);font-size:17.5px;line-height:1.6;max-width:64ch;}
  .vac2-detail .vac2-tekst h2{font-size:16px;margin:24px 0 8px;}
  .vac2-detail .vac2-tekst h2:first-child{margin-top:0;}
  .vac2-detail .vac2-solliciteer h2{font-size:15px;margin:0 0 7px;}
  @media(max-width:860px){ .vac2-detailhouder{padding:22px 0 50px;} }


  /* De video stond hier eerst als los blok rechts in de hero, stekend over de
     onderrand; daarvoor stond hier overflow:visible en hield .vac2-lijst met
     120px bovenruimte plek vrij. Die video is verhuisd naar het fotovlak op
     'content op locatie' en ligt hier nu achter de hero. Daarmee vervalt de
     tweede kolom, die extra bovenruimte en dat overflow:visible, en krijgt de
     hero wat meer hoogte zodat de video ruimte heeft om te spelen.

     LET OP: deze regels staan hier omdat ze ná de oorspronkelijke .vac2-regels
     hierboven moeten komen. Het blok met de gedeelde hero-opmaak staat verder
     naar voren in dit bestand en verliest anders van de regels op 2699-2702. */
  .vac2-hero{position:relative;overflow:hidden;padding:76px 0 68px;}
  .vac2-heroraster{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;
    align-items:center;}
  .vac2-herotekst{min-width:0;}
  .vac2-herotekst .organic-badge{display:inline-block;}
  /* de tekstkleur uit het gedeelde blok, hier herhaald zodat de donkere kleur
     van .vac2-hero p hierboven hem niet terugdraait */
  .vac2-hero p{color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,0,0,.5);}
  /* Dezelfde koplettergrootte als op de contactpagina, met 110px als bovengrens.
     Niet als drie vaste stappen zoals daar, maar meeschalend met het venster --
     precies zoals de hero van 'wat we doen'. Met drie vaste stappen liep deze
     kop namelijk uit op vier regels: bij 110px past 'Kom ons team' niet in de
     820px die er stond, breekt hij zelf in tweeën, en schuift 'versterken' door.

     Twee dingen houden het nu op twee regels. 'Kom ons team' staat op een eigen
     regel en mag niet breken, en de letter schaalt mee zodat die regel overal
     past. Dat is dezelfde oplossing als op 'wat we doen', en daar is de eerste
     regel zelfs een teken langer, dus hier is de marge nog wat ruimer. */
  .vac2-hero .ct-kop{max-width:none;font-size:clamp(32px, 7.4vw, 110px);
    line-height:.92;margin:22px 0 0;}
  .vac2-hero .ct-kop #vacA{display:block;white-space:nowrap;}
  /* De video wordt bijgesneden omdat hij het hele vlak moet vullen. Standaard
     gaat dat er aan beide kanten gelijk af (50%); hier houden we de linkerkant
     volledig in beeld en snijdt alles rechts weg. De 45% voor de hoogte blijft
     zoals hij was. Terugdraaien: deze regel weghalen. */
  .vac2-hero .hero-video{object-position:0% 45%;}
  @media(max-width:900px){
    .vac2-heroraster{gap:22px;}
    .vac2-hero{padding:52px 0 48px;}
  }


  /* ---------- Content op locatie: bewegende achtergrond in de hero ---------- */
  .kan-hero{position:relative;overflow:hidden;}
  .kan-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    z-index:0;pointer-events:none;opacity:0;transition:opacity .6s ease;display:none;}
  .kan-waas{position:absolute;inset:0;z-index:1;pointer-events:none;display:none;
    background:linear-gradient(180deg, rgba(22,22,19,.5), rgba(22,22,19,.2) 42%, rgba(22,22,19,.58));}
  .kan-hero > .wrap{position:relative;z-index:2;}
  /* alleen op de pagina 'content op locatie' */
  .is-kanaal-content .kan-video,
  .is-kanaal-content .kan-waas{display:block;}
  .is-kanaal-content .kan-video.aan{opacity:1;}
  /* even hoog als de hero's op de andere pagina's */
  .is-kanaal-content .kan-hero{background:var(--ink);padding:64px 0 120px;min-height:420px;
    display:flex;align-items:center;}
  .is-kanaal-content .kan-hero .kan-terug{color:rgba(255,255,255,.75);}
  .is-kanaal-content .kan-hero .dv-nr{color:var(--lime);}
  .is-kanaal-content .kan-hero h1{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5);}
  /* 'Content op locatie' liep uit op drie regels. De oorzaak was max-width:750px
     bij een letter van 110px: daar past 'Content op' niet op één regel, dus brak
     hij zelf al en schoof 'locatie' door. Zelfde oplossing als op de hero's van
     'wat we doen' en de vacatures: de breedtegrens eraf en de letter meeschalend
     met het venster, met 110px als bovengrens zoals op de contactpagina. Daarmee
     blijft het overal twee regels of minder. Dit geldt alleen voor dit kanaal;
     de andere drie hebben een andere titellengte en zijn niet nagerekend. */
  .is-kanaal-content .kan-hero h1{max-width:none;font-size:clamp(32px, 7.4vw, 110px);}
  .is-kanaal-content .kan-hero p{color:rgba(255,255,255,.9);text-shadow:0 1px 12px rgba(0,0,0,.5);}
  /* knipperende cursor bij het typen */
  .kan-caret{display:inline-block;width:3px;height:.86em;background:var(--lime);
    margin-left:4px;vertical-align:-0.06em;animation:kanKnipper 1s steps(1) infinite;}
  .kan-kop.klaar .kan-caret{animation:none;opacity:0;}
  @keyframes kanKnipper{0%,50%{opacity:1;}51%,100%{opacity:0;}}
  @media(max-width:700px){
    .is-kanaal-content .kan-hero{padding:48px 0 84px;min-height:320px;}
  }
  @media(prefers-reduced-motion: reduce){ .kan-video{display:none!important;} }

  /* ---------- Navigatiebalk blijft bovenin staan ---------- */
  /* het logo stond acht keer als beelddata in de pagina; nu één keer als stijlregel */
  .logo-beeld{background-image:url("../img/png-05.png");background-size:contain;
    background-repeat:no-repeat;background-position:center;}
  .organic-nav{position:sticky;top:0;z-index:200;}

  /* ---------- Menubalk over de krant- en videosectie ----------
     Boven de krant blijft de balk doorzichtig met donkere letters, want het
     papier is licht. Zodra de scheur het donkere beeld eronder laat zien,
     schakelen de letters naar wit. */
  .organic-nav.op-krant{background:transparent;transition:background .35s ease;}
  .organic-nav.op-krant .organic-nav-links a,
  .organic-nav.op-krant .menu-knop{transition:color .35s ease;}
  .organic-nav.op-donker .organic-nav-links a{color:#fff;}
  .organic-nav.op-donker .organic-nav-links a::after{background:var(--lime);}
  .organic-nav.op-donker .menu-knop{color:#fff;border-color:rgba(255,255,255,.55);
    background:rgba(255,255,255,.08);}
  .organic-nav.op-donker .menu-knop span{background:#fff;}
  /* het logo is een afbeelding; op donker maken we het wit, anders valt het zwarte deel weg */
  .organic-nav.op-donker .logo-beeld{filter:brightness(0) invert(1);
    transition:filter .35s ease;}
  .organic-nav.op-krant .logo-beeld{transition:filter .35s ease;}
  .organic-nav.op-donker .nav-inloggen{border-color:rgba(255,255,255,.5);color:#fff;}

  /* de dienstentabs schuiven eronder door, niet erachter */
  .tab-houder{top:var(--navh,76px);}

/* ================= Losse pagina's =================
   De pagina's waren eerst overlays die met een script zichtbaar werden gemaakt.
   Als losse pagina staan ze gewoon in het document; deze regels zetten de
   verborgen-stand terug naar normaal. */
.als-pagina{display:block!important;position:static!important;inset:auto!important;
  z-index:auto!important;overflow:visible!important;}
/* de eigen menubalk binnen de oude overlay is niet meer nodig */
.als-pagina > .organic-nav--overlay{display:none;}


/* kop boven een groep keuzevakjes: geen label, want hij hoort niet bij één veld */
.veldkop{display:block;font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}


/* categorielabel in een blogartikel: zelfde stijl als op de kaarten, zonder gekleurd vlak */
.blog-article-tag{font-family:'IBM Plex Mono',monospace!important;font-size:9.5px!important;
  font-weight:500!important;letter-spacing:.09em;text-transform:uppercase;
  background:none!important;color:var(--muted)!important;padding:0!important;}


  /* ================= Sollicitatieformulier in de vacaturepagina =================
     Staat achteraan zodat er niets meer overheen kan komen. Let op de
     specificiteit: .apply-field input is 0-1-1 en wint het van een losse
     klasse, dus het cv-veld wordt aangesproken als .apply-field input.cv-veld. */

  .vac2-formulier{background:var(--sage);border-radius:14px;padding:30px 32px;margin-top:34px;
    scroll-margin-top:110px;}
  .vac2-form-kop h2{font-size:19px;margin:0 0 8px;}
  .vac2-form-kop p{margin:0 0 22px;font-size:13.5px;line-height:1.6;color:rgba(22,22,19,.72);}
  .vac2-form-kop a{color:var(--ink);text-decoration:underline;}
  .vac2-form{max-width:620px;}
  .vac2-form .apply-field label{color:rgba(22,22,19,.66);}
  .vac2-form-knop{margin-top:4px;}
  .vac2-form-klein{margin:14px 0 0;font-size:11.5px;line-height:1.5;color:rgba(22,22,19,.6);}

  .vac2-form-gelukt{max-width:620px;padding:8px 0 4px;}
  .vac2-form-gelukt i{font-size:30px;color:var(--ink);display:block;margin-bottom:12px;}
  .vac2-form-gelukt h3{font-size:18px;margin:0 0 8px;}
  .vac2-form-gelukt p{margin:0;font-size:14px;line-height:1.6;color:rgba(22,22,19,.75);}

  /* Het bestandsveld blijft gewoon zichtbaar. Dat is bewust: een verborgen
     veld met required erop weigert Chrome te versturen, omdat het de melding
     nergens kan tonen. Alleen de knop erin wordt bijgekleurd. */
  .apply-field input.cv-veld{width:100%;box-sizing:border-box;padding:9px 11px;
    border:1.5px dashed var(--line);border-radius:10px;background:#fff;
    font-family:'Inter',sans-serif;font-size:13px;color:var(--muted);cursor:pointer;}
  .apply-field input.cv-veld:hover{border-color:var(--ink);}
  .apply-field input.cv-veld:focus{outline:none;border-color:var(--ink);
    box-shadow:0 0 0 3px rgba(22,22,19,.12);}
  .cv-veld::file-selector-button{font-family:'IBM Plex Mono',monospace;font-size:10.5px;
    letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--paper);
    border:none;border-radius:999px;padding:8px 13px;margin-right:12px;cursor:pointer;}
  .cv-veld::file-selector-button:hover{background:var(--lime);}
  .cv-hint{display:block;font-size:11px;color:var(--muted);margin-top:6px;}

  /* Lokveld tegen invulrobots. Bewust niet display:none: dat slaan veel
     robots juist over, en dan werkt het niet. */
  .lokveld{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

  /* De foutmeldingen bevatten een mailtolink als het versturen niet lukt. */
  .apply-error{margin-top:4px;}
  .apply-error a{color:inherit;text-decoration:underline;}
  .apply-error a:hover{color:var(--lime);}

  @media(max-width:600px){
    .vac2-formulier{padding:22px 18px;border-radius:12px;}
    .apply-row{flex-direction:column;gap:0;}
  }