/* ============================================
   3HTS · Werken bij X
   Cinematic careers-pagina: hero + waarom + vacatures + open sollicitatie
   Zelfde DNA als about-x / svc-hero-x (blobs, mesh, beams, sparkles, chamfer)
   ============================================ */

/* ============================================
   HERO
   ============================================ */
.car-hero-x{position:relative;padding:108px 0 64px;background:linear-gradient(180deg,#0d1117 0%,#161b22 60%,#0d1117 100%);color:#fff;overflow:hidden}
.car-hero-x-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.car-hero-x-bg span{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45}
.car-hero-x-bg span:nth-child(1){width:540px;height:540px;background:radial-gradient(circle,rgba(232,100,26,.55),transparent 70%);top:-130px;left:-110px;animation:carFloat1 22s ease-in-out infinite}
.car-hero-x-bg span:nth-child(2){width:430px;height:430px;background:radial-gradient(circle,rgba(80,140,200,.4),transparent 70%);top:22%;right:-110px;animation:carFloat2 26s ease-in-out infinite}
.car-hero-x-bg span:nth-child(3){width:340px;height:340px;background:radial-gradient(circle,rgba(180,80,200,.3),transparent 70%);bottom:-110px;left:38%;animation:carFloat3 20s ease-in-out infinite}
@keyframes carFloat1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(140px,80px) scale(1.2)}}
@keyframes carFloat2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-120px,-90px) scale(1.15)}}
@keyframes carFloat3{0%,100%{transform:translate(0,0) scale(.9)}50%{transform:translate(-180px,-100px) scale(1.1)}}

.car-hero-x-mesh{position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/72px 72px,linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/72px 72px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 30%,transparent 90%);mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 30%,transparent 90%);opacity:.5;animation:carMesh 50s linear infinite}
@keyframes carMesh{0%{background-position:0 0,0 0}100%{background-position:72px 72px,72px 72px}}

.car-hero-x-beam{position:absolute;width:1px;height:160%;background:linear-gradient(180deg,transparent,rgba(232,100,26,.55) 50%,transparent);z-index:1;pointer-events:none}
.car-hero-x-beam:nth-of-type(1){left:16%;top:-30%;transform:rotate(14deg);animation:carBeam 8s ease-in-out infinite}
.car-hero-x-beam:nth-of-type(2){left:84%;top:-30%;transform:rotate(-12deg);animation:carBeam 10s ease-in-out infinite 1.5s}
@keyframes carBeam{0%,100%{opacity:.15}50%{opacity:.65}}

.car-hero-x-sparkles{position:absolute;inset:0;pointer-events:none;z-index:1}
.car-hero-x-sparkles i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.9),0 0 12px rgba(232,100,26,.7);opacity:0}
.car-hero-x-sparkles i:nth-child(1){top:14%;left:12%;animation:carTwinkle 3s ease-in-out infinite}
.car-hero-x-sparkles i:nth-child(2){top:24%;left:88%;animation:carTwinkle 4s ease-in-out infinite .8s}
.car-hero-x-sparkles i:nth-child(3){top:60%;left:6%;animation:carTwinkle 3.5s ease-in-out infinite 1.6s}
.car-hero-x-sparkles i:nth-child(4){top:72%;left:94%;animation:carTwinkle 4.5s ease-in-out infinite 2.4s}
.car-hero-x-sparkles i:nth-child(5){top:42%;left:52%;animation:carTwinkle 3.2s ease-in-out infinite 3.2s}
.car-hero-x-sparkles i:nth-child(6){top:84%;left:30%;animation:carTwinkle 4s ease-in-out infinite .4s}
@keyframes carTwinkle{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1.4)}}

.car-hero-x-shapes{position:absolute;inset:0;pointer-events:none;z-index:1}
.car-hero-x-shapes svg{position:absolute;fill:none;stroke-width:1.4}
.car-hero-x-shapes svg:nth-child(1){top:11%;left:5%;width:140px;height:140px;stroke:rgba(232,100,26,.22);animation:carRotate 28s linear infinite}
.car-hero-x-shapes svg:nth-child(2){bottom:9%;right:5%;width:118px;height:118px;stroke:rgba(80,160,255,.22);animation:carRotate 22s linear infinite reverse}
.car-hero-x-shapes svg:nth-child(3){top:56%;right:11%;width:90px;height:90px;stroke:rgba(232,100,26,.18);animation:carRotate 20s linear infinite}
@keyframes carRotate{to{transform:rotate(360deg)}}

.car-hero-x-inner{position:relative;z-index:5;max-width:1200px;width:100%;margin:0 auto;padding:0 clamp(20px,5vw,64px);text-align:center}
.car-hero-x-kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono,'JetBrains Mono',monospace);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--orange-light);border:1px solid rgba(232,100,26,.35);background:rgba(232,100,26,.08);padding:8px 16px;border-radius:99px;margin-bottom:26px}
.car-hero-x-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange)}
.car-hero-x h1{font-family:var(--f-display,'Barlow Condensed',sans-serif);font-weight:800;font-size:clamp(30px,3.2vw,48px);line-height:.94;letter-spacing:-.01em;text-transform:uppercase;margin:0 0 22px;color:#fff}
.car-hero-x h1 em{font-family:var(--f-serif,'Instrument Serif',serif);font-style:italic;font-weight:400;text-transform:none;color:var(--orange);letter-spacing:0}
.car-hero-x-lead{max-width:62ch;margin:0 auto 34px;font-size:16px;line-height:1.66;color:rgba(255,255,255,.75)}
.car-hero-x-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.car-hero-x-actions .btn-outline:not(.nav-cta .btn-outline){color:#fff !important;border-color:rgba(255,255,255,.4) !important}
.car-hero-x-actions .btn-outline:not(.nav-cta .btn-outline):hover{border-color:#fff !important;background:rgba(255,255,255,.08);color:#fff !important}
.car-hero-x-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(28px,6vw,72px);margin-top:54px;padding-top:38px;border-top:1px solid rgba(255,255,255,.1)}
.car-hero-x-stat-num{font-family:var(--f-display,'Barlow Condensed',sans-serif);font-weight:800;font-size:clamp(22px,2.2vw,34px);color:#fff;line-height:1}
.car-hero-x-stat-lbl{font-family:var(--f-mono,monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:8px;max-width:18ch}

/* ============================================
   WAAROM 3HTS — lichte band met pijlers
   ============================================ */
.car-why{position:relative;padding:clamp(64px,8vw,104px) 0;background:linear-gradient(180deg,#f4f1ec,#fffdf9)}
.car-why-inner{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.car-why-head{max-width:640px;margin:0 0 52px}
.car-why-head .kicker{margin-bottom:18px}
.car-why-head h2{font-family:var(--f-display,'Barlow Condensed',sans-serif);font-weight:800;font-size:clamp(22px,2.2vw,34px);line-height:1.02;text-transform:uppercase;color:#14110d;margin:0}
.car-why-head h2 em{font-family:var(--f-serif,'Instrument Serif',serif);font-style:italic;font-weight:400;text-transform:none;color:#B53F00}
.car-why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:18px}
.car-why-card{position:relative;background:#fff;border:1px solid rgba(20,17,13,.1);border-radius:16px;padding:28px 26px;overflow:hidden;transition:transform .35s cubic-bezier(.23,1,.32,1),box-shadow .35s,border-color .35s;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.car-why-card:hover{transform:translateY(-6px);box-shadow:0 26px 60px -28px rgba(181,63,0,.4);border-color:rgba(232,100,26,.4)}
.car-why-card-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--orange),#B53F00);color:#fff;margin-bottom:18px}
.car-why-card-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8}
.car-why-card h3{font-family:var(--f-display,'Barlow Condensed',sans-serif);font-weight:700;font-size:21px;text-transform:uppercase;letter-spacing:.01em;color:#14110d;margin:0 0 9px}
.car-why-card p{font-size:15px;line-height:1.62;color:#5c554c;margin:0}

/* ============================================
   VACATURES
   ============================================ */
.car-vac{position:relative;padding:clamp(64px,8vw,104px) 0;background:linear-gradient(180deg,#0d1117,#161b22);color:#fff;overflow:hidden}
.car-vac-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(232,100,26,.16),transparent 70%);top:-200px;right:-160px;pointer-events:none;filter:blur(40px)}
.car-vac-inner{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.car-vac-head{text-align:center;max-width:620px;margin:0 auto 48px}
.car-vac-head .kicker{margin-bottom:18px;color:var(--orange-light);border-color:rgba(232,100,26,.35);background:rgba(232,100,26,.08)}
.car-vac-head h2{font-family:var(--f-display,'Barlow Condensed',sans-serif);font-weight:800;font-size:clamp(22px,2.2vw,34px);line-height:1.02;text-transform:uppercase;margin:0 0 14px;color:#fff}
.car-vac-head h2 em{font-family:var(--f-serif,'Instrument Serif',serif);font-style:italic;font-weight:400;text-transform:none;color:var(--orange)}
.car-vac-head p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.66);margin:0}

.car-vac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.car-vac-card{position:relative;display:flex;flex-direction:column;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:26px;overflow:hidden;transition:transform .35s cubic-bezier(.23,1,.32,1),border-color .35s,box-shadow .35s;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px))}
.car-vac-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(232,100,26,.1),transparent 55%);opacity:0;transition:opacity .35s;pointer-events:none}
.car-vac-card:hover{transform:translateY(-6px);border-color:rgba(232,100,26,.45);box-shadow:0 30px 70px -36px rgba(232,100,26,.55)}
.car-vac-card:hover::before{opacity:1}
.car-vac-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}
.car-vac-tag{font-family:var(--f-mono,monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-light);background:rgba(232,100,26,.12);border:1px solid rgba(232,100,26,.3);padding:5px 11px;border-radius:99px}
.car-vac-voorbeeld{font-family:var(--f-mono,monospace);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#0d1117;background:#ffd24d;padding:4px 9px;border-radius:6px;font-weight:700}
.car-vac-card h3{font-family:var(--f-display,'Barlow Condensed',sans-serif);font-weight:700;font-size:25px;line-height:1.05;text-transform:uppercase;margin:0 0 10px;color:#fff}
.car-vac-meta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:14px;font-family:var(--f-mono,monospace);font-size:11.5px;letter-spacing:.04em;color:rgba(255,255,255,.55)}
.car-vac-meta span{display:inline-flex;align-items:center;gap:6px}
.car-vac-meta svg{width:14px;height:14px;fill:none;stroke:var(--orange);stroke-width:1.8}
.car-vac-card p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.74);margin:0 0 20px;flex:1}
.car-vac-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.car-vac-card-foot .btn{flex:1}

/* Empty-state */
.car-vac-empty{max-width:600px;margin:0 auto;text-align:center;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px dashed rgba(255,255,255,.18);border-radius:18px;padding:54px 36px}
.car-vac-empty-icon{width:62px;height:62px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;background:rgba(232,100,26,.12);border:1px solid rgba(232,100,26,.3);color:var(--orange)}
.car-vac-empty-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6}
.car-vac-empty h3{font-family:var(--f-display,'Barlow Condensed',sans-serif);font-weight:700;font-size:26px;text-transform:uppercase;margin:0 0 12px;color:#fff}
.car-vac-empty p{font-size:15.5px;line-height:1.62;color:rgba(255,255,255,.66);margin:0 0 24px}

/* ============================================
   OPEN SOLLICITATIE — formulier
   ============================================ */
.car-apply{position:relative;padding:clamp(64px,8vw,108px) 0;background:linear-gradient(180deg,#161b22,#0d1117);color:#fff;overflow:hidden}
.car-apply-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,64px);display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(32px,5vw,64px);align-items:start}
@media(max-width:880px){.car-apply-inner{grid-template-columns:1fr;gap:40px}}

.car-apply-aside .kicker{margin-bottom:20px;color:var(--orange-light);border-color:rgba(232,100,26,.35);background:rgba(232,100,26,.08)}
.car-apply-aside h2{font-family:var(--f-display,'Barlow Condensed',sans-serif);font-weight:800;font-size:clamp(22px,2.2vw,34px);line-height:1.02;text-transform:uppercase;margin:0 0 18px;color:#fff}
.car-apply-aside h2 em{font-family:var(--f-serif,'Instrument Serif',serif);font-style:italic;font-weight:400;text-transform:none;color:var(--orange)}
.car-apply-aside p{font-size:16px;line-height:1.66;color:rgba(255,255,255,.72);margin:0 0 26px}
.car-apply-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.car-apply-points li{display:flex;align-items:flex-start;gap:13px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.82)}
.car-apply-points li svg{flex-shrink:0;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--orange);stroke-width:2}

.car-apply-form{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:clamp(26px,3vw,40px);overflow:hidden}
.car-apply-form::before{content:"";position:absolute;top:-1px;left:24px;right:24px;height:2px;background:linear-gradient(90deg,transparent,var(--orange),transparent)}
.car-apply-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.car-apply-row{grid-template-columns:1fr}}
.car-field{margin-bottom:18px}
.car-field label{display:block;font-family:var(--f-mono,monospace);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:8px}
.car-field label .req{color:var(--orange)}
.car-field input,.car-field textarea,.car-field select{width:100%;box-sizing:border-box;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:13px 15px;color:#fff;font-family:var(--f-body,'Barlow',sans-serif);font-size:16px;outline:none;transition:border-color .2s,background .2s}
.car-field textarea{resize:vertical;min-height:130px;line-height:1.55}
.car-field input:focus,.car-field textarea:focus,.car-field select:focus{border-color:rgba(232,100,26,.7);background:rgba(255,255,255,.07)}
.car-field input::placeholder,.car-field textarea::placeholder{color:rgba(255,255,255,.5)}

/* CV upload */
.car-file{position:relative;display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.2);border-radius:12px;padding:14px 16px;cursor:pointer;transition:border-color .2s,background .2s}
.car-file:hover{border-color:rgba(232,100,26,.5);background:rgba(232,100,26,.06)}
.car-file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.car-file-icon{flex-shrink:0;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(232,100,26,.14);color:var(--orange)}
.car-file-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}
.car-file-text{font-size:15px;color:rgba(255,255,255,.7);line-height:1.4}
.car-file-text b{color:#fff;font-weight:600}
.car-file.has-file{border-style:solid;border-color:rgba(232,100,26,.5);background:rgba(232,100,26,.07)}

.car-apply-actions{display:flex;align-items:center;gap:16px;margin-top:6px;flex-wrap:wrap}
.car-apply-actions .btn{flex:1;min-width:200px;justify-content:center}
.car-apply-note{font-size:12px;color:rgba(255,255,255,.55);line-height:1.5;margin-top:14px}
.car-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* status */
.car-form-msg{display:none;margin-top:18px;padding:14px 16px;border-radius:11px;font-size:15px;line-height:1.5}
.car-form-msg.ok{display:block;background:rgba(47,182,115,.14);border:1px solid rgba(47,182,115,.4);color:#7be0a8}
.car-form-msg.err{display:block;background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.4);color:#ff9c9c}
.car-field input.car-invalid,.car-field textarea.car-invalid{border-color:rgba(255,80,80,.7)}

@media(max-width:640px){
  .car-hero-x{padding:92px 0 48px}
  .car-hero-x-stats{gap:24px}
}

/* ============================================
   VACATURE DETAIL (vacature.html) — één template
   ============================================ */
.vac-detail-hero{position:relative;padding:120px 0 72px;background:linear-gradient(180deg,#0d1117 0%,#161b22 65%,#0d1117 100%);color:#fff;overflow:hidden}
.vac-detail-hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.vac-detail-hero-bg span{position:absolute;border-radius:50%;filter:blur(80px);opacity:.42}
.vac-detail-hero-bg span:nth-child(1){width:520px;height:520px;background:radial-gradient(circle,rgba(232,100,26,.55),transparent 70%);top:-140px;left:-120px;animation:carFloat1 22s ease-in-out infinite}
.vac-detail-hero-bg span:nth-child(2){width:400px;height:400px;background:radial-gradient(circle,rgba(80,140,200,.36),transparent 70%);top:18%;right:-120px;animation:carFloat2 26s ease-in-out infinite}
.vac-detail-hero-bg span:nth-child(3){width:320px;height:320px;background:radial-gradient(circle,rgba(180,80,200,.26),transparent 70%);bottom:-120px;left:30%;animation:carFloat3 20s ease-in-out infinite}
.vac-detail-hero-mesh{position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/72px 72px,linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/72px 72px;-webkit-mask-image:radial-gradient(ellipse 75% 65% at 40% 40%,#000 30%,transparent 90%);mask-image:radial-gradient(ellipse 75% 65% at 40% 40%,#000 30%,transparent 90%);opacity:.5;animation:carMesh 50s linear infinite}
.vac-detail-hero-beam{position:absolute;width:1px;height:160%;background:linear-gradient(180deg,transparent,rgba(232,100,26,.55) 50%,transparent);z-index:1;pointer-events:none;left:14%;top:-30%;transform:rotate(13deg);animation:carBeam 8s ease-in-out infinite}
.vac-detail-hero-beam + .vac-detail-hero-beam{left:88%;transform:rotate(-11deg);animation:carBeam 10s ease-in-out infinite 1.5s}
.vac-detail-hero-sparkles{position:absolute;inset:0;pointer-events:none;z-index:1}
.vac-detail-hero-sparkles i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.9),0 0 12px rgba(232,100,26,.7);opacity:0}
.vac-detail-hero-sparkles i:nth-child(1){top:18%;left:10%;animation:carTwinkle 3s ease-in-out infinite}
.vac-detail-hero-sparkles i:nth-child(2){top:30%;left:90%;animation:carTwinkle 4s ease-in-out infinite .8s}
.vac-detail-hero-sparkles i:nth-child(3){top:66%;left:8%;animation:carTwinkle 3.5s ease-in-out infinite 1.6s}
.vac-detail-hero-sparkles i:nth-child(4){top:74%;left:92%;animation:carTwinkle 4.5s ease-in-out infinite 2.4s}
.vac-detail-hero-shape{position:absolute;right:6%;top:16%;width:210px;height:210px;fill:none;stroke:rgba(232,100,26,.16);stroke-width:1.2;z-index:1;pointer-events:none;animation:carRotate 30s linear infinite}
.vac-detail-hero-inner{position:relative;z-index:5;max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.vac-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono,monospace);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55);text-decoration:none;margin-bottom:26px;transition:color .2s}
.vac-back:hover{color:var(--orange-light)}
.vac-back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.vac-detail-hero h1{font-family:var(--f-display,'Barlow Condensed',sans-serif);font-weight:800;font-size:clamp(30px,3.2vw,48px);line-height:.98;letter-spacing:-.01em;text-transform:uppercase;color:#fff;margin:0 0 20px;max-width:18ch}
.vac-voorbeeld-badge{display:inline-block;font-family:var(--f-mono,monospace);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#0d1117;background:#ffd24d;padding:5px 10px;border-radius:6px;font-weight:700;vertical-align:middle;margin-left:12px}
.vac-meta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.vac-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono,monospace);font-size:12px;letter-spacing:.04em;color:rgba(255,255,255,.82);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);padding:9px 15px;border-radius:99px}
.vac-chip svg{width:15px;height:15px;fill:none;stroke:var(--orange);stroke-width:1.8}
.vac-detail-lead{max-width:62ch;font-size:clamp(16px,1.6vw,18px);line-height:1.7;color:rgba(255,255,255,.78);margin:0 0 30px}
.vac-detail-hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.vac-detail-hero .btn-outline:not(.nav-cta .btn-outline){color:#fff !important;border-color:rgba(255,255,255,.4) !important}
.vac-detail-hero .btn-outline:not(.nav-cta .btn-outline):hover{border-color:#fff !important;background:rgba(255,255,255,.08);color:#fff !important}

/* BODY — donker cinematic met genummerde panelen */
.vac-detail-body{position:relative;padding:clamp(60px,7.5vw,96px) 0;background:linear-gradient(180deg,#0d1117,#11151c);color:#fff;overflow:hidden}
.vac-detail-body-glow{position:absolute;width:620px;height:620px;border-radius:50%;background:radial-gradient(circle,rgba(232,100,26,.12),transparent 70%);top:6%;right:-200px;filter:blur(50px);pointer-events:none}
.vac-detail-grid{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,64px);display:grid;grid-template-columns:1.55fr .85fr;gap:clamp(26px,4vw,52px);align-items:start}
@media(max-width:880px){.vac-detail-grid{grid-template-columns:1fr;gap:24px}.vac-aside{position:static}}
.vac-block{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:32px 30px 28px;margin-bottom:18px;overflow:hidden;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));transition:border-color .3s}
.vac-block:last-child{margin-bottom:0}
.vac-block:hover{border-color:rgba(232,100,26,.35)}
.vac-block-num{position:absolute;top:-20px;right:14px;font-family:var(--f-display,'Barlow Condensed',sans-serif);font-weight:800;font-size:clamp(86px,13vw,150px);line-height:1;color:rgba(255,255,255,.045);z-index:0;pointer-events:none}
.vac-block-head{position:relative;z-index:1;display:flex;align-items:center;gap:15px;margin-bottom:20px}
.vac-block-icon{flex-shrink:0;width:52px;height:52px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--orange),#B53F00);color:#fff;box-shadow:0 10px 26px -6px rgba(232,100,26,.6)}
.vac-block-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8}
.vac-block-label{font-family:var(--f-mono,monospace);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-light);margin-bottom:5px}
.vac-block h2{font-family:var(--f-display,'Barlow Condensed',sans-serif);font-weight:800;font-size:clamp(23px,2.8vw,32px);text-transform:uppercase;color:#fff;margin:0;line-height:1}
.vac-list{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.vac-list li{display:flex;align-items:flex-start;gap:14px;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.84)}
.vac-li-ic{flex-shrink:0;width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;background:rgba(232,100,26,.14);border:1px solid rgba(232,100,26,.32);margin-top:1px}
.vac-li-ic svg{width:13px;height:13px;fill:none;stroke:var(--orange);stroke-width:2.6}

.vac-aside{position:sticky;top:96px}
.vac-card{position:relative;background:linear-gradient(160deg,#212a37,#13171f);border:1px solid rgba(232,100,26,.5);border-radius:18px;padding:28px 26px;overflow:hidden;box-shadow:0 26px 64px -34px rgba(232,100,26,.6);clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px))}
.vac-card::before{content:"";position:absolute;top:-1px;left:22px;right:22px;height:2px;background:linear-gradient(90deg,transparent,var(--orange),transparent)}
.vac-card h3{font-family:var(--f-display,'Barlow Condensed',sans-serif);font-weight:700;font-size:18px;text-transform:uppercase;color:#fff;margin:0 0 18px;letter-spacing:.02em}
.vac-facts{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:14px}
.vac-facts li{display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:13px}
.vac-facts li:last-child{border-bottom:0;padding-bottom:0}
.vac-fact-ic{flex-shrink:0;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(232,100,26,.12);border:1px solid rgba(232,100,26,.28)}
.vac-fact-ic svg{width:16px;height:16px;fill:none;stroke:var(--orange);stroke-width:1.8}
.vac-facts .k{font-family:var(--f-mono,monospace);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);display:block;margin-bottom:1px}
.vac-facts .v{font-size:15px;color:#fff;font-weight:600;line-height:1.25}
.vac-card .btn{width:100%;justify-content:center}
.vac-card-note{margin-top:12px;font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.55);text-align:center}

.vac-cta{position:relative;padding:clamp(60px,7.5vw,96px) 0;background:linear-gradient(180deg,#11151c,#0d1117);color:#fff;text-align:center;overflow:hidden}
.vac-cta-glow{position:absolute;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(232,100,26,.18),transparent 70%);bottom:-220px;left:50%;transform:translateX(-50%);filter:blur(40px);pointer-events:none}
.vac-cta-sparkles{position:absolute;inset:0;pointer-events:none}
.vac-cta-sparkles i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.9),0 0 12px rgba(232,100,26,.7);opacity:0}
.vac-cta-sparkles i:nth-child(1){top:24%;left:18%;animation:carTwinkle 3.4s ease-in-out infinite}
.vac-cta-sparkles i:nth-child(2){top:34%;left:82%;animation:carTwinkle 4.2s ease-in-out infinite 1s}
.vac-cta-sparkles i:nth-child(3){top:70%;left:30%;animation:carTwinkle 3.8s ease-in-out infinite 2s}
.vac-cta-inner{position:relative;z-index:2;max-width:700px;margin:0 auto;padding:0 24px}
.vac-cta h2{font-family:var(--f-display,'Barlow Condensed',sans-serif);font-weight:800;font-size:clamp(22px,2.2vw,34px);text-transform:uppercase;margin:0 0 14px;color:#fff;line-height:1.02}
.vac-cta h2 em{font-family:var(--f-serif,'Instrument Serif',serif);font-style:italic;font-weight:400;text-transform:none;color:var(--orange)}
.vac-cta p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.7);margin:0 0 26px}
.vac-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.vac-cta .btn-outline:not(.nav-cta .btn-outline){color:#fff !important;border-color:rgba(255,255,255,.35) !important}
.vac-cta .btn-outline:not(.nav-cta .btn-outline):hover{border-color:#fff !important;background:rgba(255,255,255,.08);color:#fff !important}

.vac-notfound{position:relative;z-index:5;max-width:560px;margin:0 auto;text-align:center;padding:80px 24px;color:rgba(255,255,255,.75)}
.vac-notfound h1{font-family:var(--f-display,'Barlow Condensed',sans-serif);font-size:clamp(22px,2.2vw,34px);text-transform:uppercase;color:#fff;margin:0 0 14px}
.vac-notfound p{font-size:16px;line-height:1.6;margin:0 0 24px}

/* ============================================
   SOLLICITATIE-MODAL — CV upload + foutmelding
   (hergebruikt .kn-modal basis uit modals.css)
   ============================================ */
.kn-file-drop{position:relative;display:flex;align-items:center;gap:13px;padding:14px;background:rgba(255,255,255,.03);border:1.5px dashed rgba(255,255,255,.18);cursor:pointer;transition:border-color .2s var(--ease-out),background .2s var(--ease-out)}
.kn-file-drop:hover{border-color:rgba(232,100,26,.6);background:rgba(232,100,26,.06)}
.kn-file-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.kn-file-ic{flex-shrink:0;width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(232,100,26,.14);border:1px solid rgba(232,100,26,.3)}
.kn-file-ic svg{width:18px;height:18px;fill:none;stroke:var(--orange);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kn-file-txt{font-size:15px;line-height:1.4;color:rgba(255,255,255,.6)}
.kn-file-txt b{color:#fff;font-weight:600}
.kn-file-drop.has-file{border-style:solid;border-color:rgba(52,208,88,.5);background:rgba(52,208,88,.06)}
.kn-file-drop.has-file .kn-file-ic{background:rgba(52,208,88,.14);border-color:rgba(52,208,88,.4)}
.kn-file-drop.has-file .kn-file-ic svg{stroke:#34d058}
.kn-modal-error{margin-top:2px;padding:11px 14px;background:rgba(255,71,71,.1);border:1px solid rgba(255,71,71,.35);color:#ff9b9b;font-size:13px;line-height:1.45}
.kn-submit:disabled{opacity:.6;cursor:wait;transform:none}


/* ------------------------------------------------------------------
   Tekstblok Wat wij zoeken en Wat wij bieden. Tekst aangeleverd door Tim
   op 15-09-2026, geplaatst 17-09-2026. Zelfde kleuren als de rest van
   dit lichte blok.
   ------------------------------------------------------------------ */
.car-tekst{max-width:760px}
.car-tekst p{font-size:16px;line-height:1.72;color:#5c554c;margin:0 0 18px}
.car-tekst h3{
  font-family:var(--f-display,'Barlow Condensed',sans-serif);font-weight:800;
  font-size:clamp(19px,1.7vw,25px);line-height:1.05;text-transform:uppercase;
  letter-spacing:.01em;color:#14110d;margin:36px 0 14px;
}
.car-tekst ul{list-style:none;margin:0 0 18px;padding:0}
.car-tekst li{position:relative;padding-left:24px;font-size:16px;line-height:1.72;color:#5c554c;margin:0 0 7px}
.car-tekst li::before{content:"";position:absolute;left:2px;top:.78em;width:9px;height:2px;background:var(--orange,#E8641A)}
.car-tekst a{color:#B53F00;text-decoration:underline;text-underline-offset:3px}
.car-tekst a:hover{color:var(--orange,#E8641A)}