:root{
    --forest:#6D7961;
    --forest-deep:#555E4D;
    --sage:#6D7961;
    --yellow:#E0B330;
    --yellow-soft:#F2D98A;
    --cream:#F8FBF6;
    --cream-2:#F7F0DA;
    --cream-3:#F0E6C6;
    --paper:#FCF4DC;
    --beige:#F7F0DA;
    --ink:#2B3126;
    --line:#E6DDC0;
    --line-soft:#EFE8D2;
    --white:#F8FBF6;
    --radius:2px;
    --maxw:1180px;
    --shadow:0 1px 2px rgba(43,49,38,.05), 0 12px 34px rgba(43,49,38,.08);
    --shadow-soft:0 10px 30px rgba(85,94,77,.1);
    --display:"Playfair Display", Georgia, serif;
    --cond:"Barlow Condensed", "Arial Narrow", sans-serif;
    --body:"Karla", system-ui, -apple-system, sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--white);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
  img{max-width:100%;display:block}
  a{color:inherit}
  button{font-family:inherit;cursor:pointer}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  .eyebrow{font-family:var(--body);text-transform:uppercase;letter-spacing:.1em;font-weight:400;font-size:13px;color:var(--sage)}
  h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.08;margin:0;color:var(--ink)}
  .hidden{display:none !important}
  .logo-svg{height:23px;width:auto;display:block;color:inherit}
  .nav .brand .logo-svg{height:25px}

  /* ---------- Buttons ---------- */
  .btn{display:inline-flex;align-items:center;gap:9px;border:none;border-radius:var(--radius);
    font-family:var(--cond);text-transform:uppercase;letter-spacing:.09em;font-weight:600;font-size:15.5px;
    padding:14px 24px;transition:transform .12s ease, background .15s ease, color .15s ease, border-color .15s, box-shadow .15s}
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--forest);color:var(--cream);box-shadow:var(--shadow-soft)}
  .btn-primary:hover{background:var(--forest-deep)}
  .btn-yellow{background:var(--yellow);color:var(--ink);box-shadow:0 8px 22px rgba(224,179,48,.28)}
  .btn-yellow:hover{background:#cfa326}
  .btn-cream{background:var(--cream);color:var(--forest)}
  .btn-cream:hover{background:#fff}
  .btn-sm{padding:9px 15px;font-size:13.5px}
  .arrow{font-family:var(--body);font-weight:700}

  /* ---------- Header ---------- */
  header.site{position:sticky;top:0;z-index:40;background:rgba(255,250,237,.9);backdrop-filter:blur(9px);border-bottom:1px solid var(--line-soft)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:72px}
  .brand{display:flex;align-items:center;cursor:pointer;user-select:none;color:var(--yellow)}
  .nav-links{display:flex;align-items:center;gap:28px}
  .nav-right{display:flex;align-items:center;gap:26px}
  .hdr-cta{flex:none}
  .nav-links a{font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-weight:500;font-size:15px;text-decoration:none;color:var(--ink);opacity:.78}
  .nav-links a:hover{opacity:1}
  .nav-links a.active{opacity:1;color:var(--forest);position:relative}
  .nav-links a.active:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--yellow)}

  /* ---------- Section shells ---------- */
  section{scroll-margin-top:84px}
  .pad{padding:58px 0}
  .pad-sm{padding:38px 0}
  .band-cream2{background:var(--cream-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
  .sec-head{margin-bottom:32px}
  .sec-head h2{font-size:clamp(31px,3.6vw,46px);margin-top:5px}
  .sec-head p{margin:8px 0 0;color:var(--sage);max-width:42em;font-size:16.5px}
  .pill{font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;font-weight:500;font-size:14px;
    background:var(--white);border:1px solid var(--line);color:var(--ink);padding:9px 16px;border-radius:var(--radius);transition:.12s}
  .pill:hover{border-color:var(--sage)}
  .pill.active{background:var(--forest);border-color:var(--forest);color:var(--cream)}
  .vaccount{font-size:14px;color:var(--sage);margin-bottom:18px}

  /* ---------- Vacancy cards ---------- */
  .vac-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(335px,1fr));gap:20px}
  .vac{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:28px 28px 24px;display:flex;flex-direction:column;transition:.16s;cursor:pointer;position:relative;overflow:hidden}
  .vac:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--yellow);transform:scaleY(0);transform-origin:top;transition:transform .2s ease}
  .vac:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line)}
  .vac:hover:before{transform:scaleY(1)}
  .vac .cat{font-family:var(--body);text-transform:uppercase;letter-spacing:.12em;font-size:12.5px;font-weight:600;color:var(--forest);margin-bottom:11px}
  .vac h3{font-size:26px;margin-bottom:11px;line-height:1.12}
  .vac .sum{color:#4a5043;font-size:15px;flex:1}
  .vac .cities{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 18px}
  .vac .city{font-family:var(--cond);text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;color:var(--sage);background:var(--cream-2);padding:4px 10px;border-radius:var(--radius)}
  .vac .foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line-soft);padding-top:17px;margin-top:auto}
  .vac .foot .type{font-family:var(--cond);text-transform:uppercase;letter-spacing:.07em;font-size:13px;color:var(--sage)}
  .vac .open{font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;font-size:13.5px;color:var(--forest);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
  .vac:hover .open{gap:11px}
  .empty{grid-column:1/-1;text-align:center;color:var(--sage);padding:54px 0;border:1px dashed var(--line);border-radius:var(--radius);background:var(--paper)}

  /* ---------- Perks / values ---------- */
  .perks{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .perk{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px}
  .perk .pn{font-family:var(--display);font-size:36px;color:var(--forest);line-height:1}
  .perk .pl{font-family:var(--body);text-transform:uppercase;letter-spacing:.08em;font-size:13.5px;color:var(--ink);margin-top:10px;font-weight:500}
  .perk .pd{font-size:13.5px;color:var(--sage);margin-top:5px;line-height:1.45}

  /* ---------- Detail view ---------- */
  .detail-hero{background:
      radial-gradient(700px 360px at 90% 0%, rgba(242,217,138,.4), transparent 60%),
      var(--cream);border-bottom:1px solid var(--line-soft);padding:34px 0 40px}
  .back{display:inline-flex;align-items:center;gap:8px;font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;font-size:14px;color:var(--sage);background:none;border:none;padding:0;margin-bottom:22px}
  .back:hover{color:var(--ink)}
  .detail-hero h1{font-size:clamp(34px,4.6vw,58px);letter-spacing:-.01em;max-width:16em}
  .detail-hero .lead{font-size:19px;color:#3a3f33;max-width:36em;margin:0}
  .jobbody{font-size:16.5px}
  .jobbody > p:first-of-type{font-size:18px;color:#33372c}
  .jobbody h4{font-family:var(--display);font-size:24px;margin:34px 0 14px;position:relative;padding-top:14px}
  .jobbody h4:before{content:"";position:absolute;top:0;left:0;width:34px;height:3px;background:var(--yellow)}
  .jobbody p{margin:0 0 14px;color:#3a3f33}
  .jobbody ul{list-style:none;margin:12px 0 30px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 34px}
  .jobbody li{position:relative;padding-left:40px;color:#3a3f33;font-size:15.5px;line-height:1.5}
  .jobbody li:before{content:"";position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFAED' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center/13px no-repeat}
  .jobbody li b{color:var(--ink);font-weight:700}

  /* film band on detail page */
  .film{background:var(--forest);color:var(--cream)}
  .film .eyebrow{color:var(--yellow-soft)}
  .film h2{color:var(--cream);font-size:clamp(28px,3.4vw,40px);margin-top:6px}
  .film p{color:#d8e0d2;margin:12px 0 0;font-size:16.5px;max-width:34em}
  .film-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:46px;align-items:center;padding-top:60px;padding-bottom:60px}
  .video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;box-shadow:0 22px 54px rgba(0,0,0,.28)}
  .video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .field{display:flex;flex-direction:column;margin-bottom:18px}
  .field:last-child{margin-bottom:0}
  .field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=number],.field select{
    font-family:var(--body);font-size:15.5px;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--cream);color:var(--ink);outline:none}
  .field input:focus,.field select:focus{border-color:var(--forest);background:var(--white)}
  .field input[type=number]{-moz-appearance:textfield}
  .field input[type=number]::-webkit-outer-spin-button,.field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .cb{width:23px;height:23px;border:1px solid var(--sage);border-radius:var(--radius);background:var(--white);margin:0 auto;display:flex;align-items:center;justify-content:center;transition:.1s}
  .cb:hover{border-color:var(--forest)}
  .cb.on{background:var(--forest);border-color:var(--forest)}
  .cb.on:after{content:"";width:9px;height:5px;border-left:2px solid var(--cream);border-bottom:2px solid var(--cream);transform:rotate(-45deg) translateY(-1px)}
  .submit-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px}
  .submit-row .btn{padding:16px 36px;font-size:16px}
  .err{color:#9a2b18;font-size:14px;margin-top:12px;font-weight:600}

  /* ---------- Footer ---------- */
  footer.site{background:var(--forest-deep);color:#cdd6c7;padding:44px 0}
  footer.site .frow{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px}
  footer.site .brand{color:var(--yellow)}
  footer.site .tag{font-size:13.5px;margin-top:12px;max-width:24em;color:#aebaa6}
  footer.site .fright{display:flex;flex-direction:column;align-items:flex-end;gap:24px;margin-left:auto}
  footer.site .links{display:flex;gap:24px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
  footer.site a{color:#cdd6c7;text-decoration:none;font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;font-size:13.5px;opacity:.85}
  footer.site a:hover{opacity:1;color:var(--yellow-soft)}
  footer.site .fbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;border-top:1px solid rgba(255,255,255,.1);margin-top:28px;padding-top:18px;font-size:12.5px;color:#9aa792}
  footer.site .fbar a{font-size:12px;opacity:.5;text-transform:none;letter-spacing:.02em}
  footer.site .fbar a:hover{opacity:.9}

  /* ---------- Backoffice ---------- */
  .bo-gate{max-width:420px;margin:84px auto;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:36px;text-align:center;box-shadow:var(--shadow)}
  .bo-gate h2{font-size:28px;margin-bottom:6px}
  .bo-gate p{color:var(--sage);font-size:14.5px;margin:0 0 20px}
  .bo-gate input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius);font-family:var(--body);font-size:15px;text-align:center;margin-bottom:14px;background:var(--cream)}
  .bo-hint{font-size:12.5px;color:var(--sage);margin-top:14px}
  .bo-top{background:var(--ink);color:var(--cream)}
  .bo-top .exit{font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--cream);background:none;border:1px solid rgba(255,255,255,.25);border-radius:var(--radius);padding:8px 15px}
  .bo-top .exit:hover{background:rgba(255,255,255,.1)}
  .bo-tabs{background:var(--cream-2);border-bottom:1px solid var(--line)}
  .bo-tab{font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;font-size:15px;font-weight:600;background:none;border:none;padding:17px 18px;color:var(--sage);border-bottom:2px solid transparent}
  .bo-tab.active{color:var(--forest);border-bottom-color:var(--yellow)}
  .bo-body{padding:32px 0 72px}
  .bo-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
  .bo-filters select{font-family:var(--body);font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);color:var(--ink)}

  /* ---------- Detail: Gall-opzet ---------- */
  .vbar{position:sticky;top:71px;z-index:35;background:var(--cream);border-bottom:1px solid var(--line-soft)}
  .vbar-in{display:flex;align-items:center;gap:16px;height:58px}
  .vbar .back{margin:0}
  .vbar-title{font-family:var(--display);font-size:18px;font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vmeta{list-style:none;margin:18px 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:22px}
  .vmeta li{display:flex;align-items:center;gap:9px;font-size:15.5px;color:#3a3f33}
  .mi{width:19px;height:19px;color:var(--forest);flex:none}
  .hero-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
  .share{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
  .share .sl{font-family:var(--body);text-transform:uppercase;letter-spacing:.1em;font-size:13px;color:var(--sage)}
  .share a{font-family:var(--cond);text-transform:uppercase;letter-spacing:.06em;font-size:13.5px;color:var(--forest);text-decoration:none}
  .share a:hover{color:var(--forest-deep);text-decoration:underline}

  .hl-row{padding:10px 0 18px}
  .hl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
  .hl-col{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
  .hl-col h4{font-family:var(--body);text-transform:uppercase;letter-spacing:.1em;font-size:15px;color:var(--sage);font-weight:600;margin-bottom:16px}
  .hl-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
  .hl-col li{position:relative;padding-left:22px;font-size:15px;color:#3a3f33;line-height:1.45}
  .hl-col li:before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--yellow)}

  .story{background:var(--cream)}
  .story-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:44px;align-items:start;padding-top:58px;padding-bottom:58px}
  .story-grid h2{font-size:clamp(28px,3.4vw,42px);margin-top:6px}
  .story-grid p{font-size:17px;color:#3a3f33;margin:0;line-height:1.7}

  .block-h{font-size:clamp(26px,3vw,36px);margin-bottom:20px}

  .process{padding:58px 0}
  .process .sec-head{margin-bottom:30px}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .step-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
  .step-card .sn{font-family:var(--display);font-size:42px;color:var(--yellow);line-height:1;display:block;margin-bottom:12px}
  .step-card h4{font-size:21px;margin-bottom:9px}
  .step-card p{font-size:14.5px;color:#3a3f33;margin:0;line-height:1.5}

  .jobalert-in{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;padding-top:50px;padding-bottom:50px}
  .jobalert-in h2{font-size:clamp(26px,3vw,36px);margin-top:5px}
  .jobalert-in p{color:var(--sage);margin:8px 0 0}
  .ja-form input,.ja-form select{font-family:var(--body);font-size:15px;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);color:var(--ink);min-width:210px}

  /* ---------- Filterbalk ---------- */
  .filterbar{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin-bottom:24px}
  .fgroup{display:flex;flex-direction:column;gap:9px}
  .fglabel{font-family:var(--body);text-transform:uppercase;letter-spacing:.1em;font-size:12.5px;color:var(--sage);font-weight:600}
  .fpills{display:flex;flex-wrap:wrap;gap:8px}

  /* ---------- Collega's ---------- */
  .col-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
  .col-card{margin:0;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
  .col-photo{width:100%;aspect-ratio:4/5;background-size:cover;background-position:center;background-color:var(--cream-3)}
  .col-photo-ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--forest-deep),var(--forest))}
  .col-photo-ph span{font-family:var(--display);font-size:64px;color:var(--cream);opacity:.9}
  .col-quote{font-family:var(--display);font-style:italic;font-size:17px;line-height:1.4;color:var(--ink);margin:0;padding:20px 22px 14px;flex:1}
  .col-quote:before{content:"“";color:var(--yellow);font-size:22px;margin-right:2px}
  .col-who{padding:0 22px 20px;font-family:var(--body);text-transform:uppercase;letter-spacing:.07em;font-size:14px;font-weight:600;color:var(--ink);display:flex;flex-direction:column;gap:2px}
  .col-who span{color:var(--sage);font-weight:500;letter-spacing:.05em}

  /* ---------- FAQ ---------- */
  .faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
  .faq-item{border-bottom:1px solid var(--line)}
  .faq-q{width:100%;text-align:left;background:none;border:none;padding:20px 44px 20px 0;font-family:var(--display);font-size:19px;color:var(--ink);position:relative;line-height:1.3}
  .faq-ic{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:16px;height:16px}
  .faq-ic:before,.faq-ic:after{content:"";position:absolute;background:var(--forest);border-radius:2px}
  .faq-ic:before{left:0;right:0;top:7px;height:2px}
  .faq-ic:after{top:0;bottom:0;left:7px;width:2px;transition:opacity .2s}
  .faq-item.open .faq-ic:after{opacity:0}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .28s ease}
  .faq-item.open .faq-a{max-height:320px}
  .faq-a p{margin:0;padding:0 44px 22px 0;color:#3a3f33;font-size:15.5px;line-height:1.6}

  /* ---------- Beeld ---------- */
  .imgslot{width:100%;background-size:cover;background-position:center;border-radius:var(--radius);background-color:var(--cream-3);overflow:hidden}
  .imgslot-ph{background:linear-gradient(150deg,var(--forest-deep),var(--forest));display:flex;align-items:center;justify-content:center}
  .ph-in{display:flex;flex-direction:column;align-items:center;gap:9px;color:rgba(255,250,237,.82)}
  .ph-in svg{width:34px;height:34px}
  .ph-in span{font-family:var(--body);text-transform:uppercase;letter-spacing:.12em;font-size:13px}
  .verhaal-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
  .verhaal-grid h2{font-size:clamp(28px,3.4vw,44px);margin-top:6px}
  .verhaal-grid p{font-size:17px;color:#3a3f33;line-height:1.7;margin:0 0 22px}

  /* ---------- Contentpagina header met foto ---------- */
  .phero-cta{display:flex;gap:14px;flex-wrap:wrap}

  /* ---------- Navigatiekaarten ---------- */
  .area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .area-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:.16s;display:flex;flex-direction:column}
  .area-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
  .area-card .imgslot{border-radius:0}
  .area-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
  .area-body h3{font-size:26px;margin:6px 0 8px}
  .area-body p{color:#4a5043;font-size:15px;margin:0 0 16px;flex:1}
  .area-link{font-family:var(--cond);text-transform:uppercase;letter-spacing:.08em;font-size:14px;font-weight:600;color:var(--forest);display:inline-flex;align-items:center;gap:7px}
  .area-card:hover .area-link{gap:11px}

  /* ---------- Missie ---------- */
  .mission{max-width:820px;display:grid;gap:18px}
  .mission-row{display:grid;grid-template-columns:110px 1fr;gap:20px;align-items:baseline;border-top:1px solid var(--line);padding-top:18px}
  .mission-row .mk{font-family:var(--display);font-style:italic;font-size:28px;color:var(--yellow)}
  .mission-row p{margin:0;font-size:17px;color:#3a3f33;line-height:1.6}

  /* ---------- Tijdlijn ---------- */
  .timeline{position:relative;max-width:820px;margin-top:8px}
  .timeline:before{content:"";position:absolute;left:82px;top:12px;bottom:12px;width:2px;background:var(--line)}
  .tl-item{position:relative;display:grid;grid-template-columns:66px 1fr;gap:34px;padding:15px 0}
  .tl-marker{text-align:right;padding-top:2px}
  .tl-year{font-family:var(--display);font-size:23px;color:var(--forest);font-weight:600}
  .tl-item:before{content:"";position:absolute;left:77px;top:24px;width:12px;height:12px;border-radius:50%;background:var(--yellow);border:2px solid var(--cream);z-index:1}
  .tl-body{padding-top:3px;padding-left:6px}
  .tl-body p{margin:0;font-size:16px;color:#3a3f33;line-height:1.6}
  .footer-slogan{max-width:150px;height:auto;align-self:flex-end;opacity:.92}

  /* ---------- Responsive ---------- */
  @media(max-width:900px){
    .hero-grid{grid-template-columns:1fr;gap:34px}
    .detail-grid{grid-template-columns:1fr;gap:30px}
    .detail-aside{position:static}
    .film-grid{grid-template-columns:1fr;gap:26px}
    .perks{grid-template-columns:repeat(2,1fr)}
    .stats{grid-template-columns:repeat(2,1fr)}
    .grid2{grid-template-columns:1fr}
    .hl-grid{grid-template-columns:1fr}
    .steps{grid-template-columns:repeat(2,1fr)}
    .story-grid{grid-template-columns:1fr;gap:18px;padding-top:42px;padding-bottom:42px}
    .col-grid{grid-template-columns:repeat(2,1fr)}
    .sfeer-grid{grid-template-columns:1fr 1fr}
    .verhaal-grid{grid-template-columns:1fr;gap:22px}
    .area-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media(max-width:620px){
    .mission-row{grid-template-columns:1fr;gap:6px;padding-top:14px}
    .timeline:before{left:0}
    .tl-item{grid-template-columns:1fr;gap:2px;padding-left:22px}
    .tl-item:before{left:-5px;top:8px}
    .tl-marker{text-align:left}
    .timeline{padding-left:0}
    .wrap{padding:0 18px}
    .perks{grid-template-columns:1fr}
    .steps{grid-template-columns:1fr}

    .filterbar{grid-template-columns:1fr}
    .jobbody ul{grid-template-columns:1fr}
    .vbar-title{display:none}
  }


  /* ---------- Aanvulling voor de servergerenderde site ----------
     In het prototype waren dit knoppen en artikels. Nu zijn het
     echte links, dus we halen de standaard linkopmaak weg. */
  a.btn, a.area-card, a.pill, a.brand, a.open, .nav-links a, .fbar a{text-decoration:none}
  a.btn{cursor:pointer}
  a.area-card{color:inherit}
  a.area-card:hover{text-decoration:none}
  .ja-form{display:flex;gap:10px;flex-wrap:wrap}

  /* ---------- Vacaturepagina zonder JavaScript ---------- */
  a.back, .share a, .vbar a{text-decoration:none}
  summary.faq-q{cursor:pointer;display:block;list-style:none;padding:20px 44px 20px 0}
  summary.faq-q::-webkit-details-marker{display:none}
  summary.faq-q::marker{content:""}
  details.faq-item[open] .faq-a{max-height:400px}
  details.faq-item[open] .faq-ic:after{opacity:0}

  /* ---------- Sollicitatieformulier ---------- */
  .solform{max-width:820px;margin:0 auto}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .formmelding{max-width:820px;margin:0 auto 26px;padding:15px 18px;border-radius:var(--radius);font-size:15.5px;line-height:1.5}
  .formmelding-fout{background:#FBEDE6;border:1px solid #E3B7A2;color:#7A3B1E}
  .fs{border:none;border-top:1px solid var(--line);padding:26px 0 0;margin:0 0 30px}
  .fs legend{font-family:var(--body);text-transform:uppercase;letter-spacing:.09em;font-size:13px;font-weight:600;color:var(--sage);padding:0 14px 0 0}
  .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .fveld{display:flex;flex-direction:column}
  .fveld-breed{grid-column:1/-1;margin-bottom:20px}
  .fveld-breed:last-child{margin-bottom:0}
  .fveld > span{font-family:var(--body);text-transform:uppercase;letter-spacing:.07em;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:8px}
  .fveld > span em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;color:var(--sage);font-size:13px}
  .fveld input[type=text],.fveld input[type=email],.fveld input[type=tel],.fveld input[type=number],.fveld select,.fveld textarea{
    font-family:var(--body);font-size:15.5px;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius);
    background:var(--cream);color:var(--ink);outline:none;width:100%}
  .fveld textarea{resize:vertical;line-height:1.55}
  .fveld input:focus,.fveld select:focus,.fveld textarea:focus{border-color:var(--forest);background:var(--white)}
  /* Uitleg onder een veld. Zachter dan de invoer zelf, want het is hulp
     en geen invulinstructie. */
  .fveld-hint{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--sage)}
  .fveld input[type=file]{font-family:var(--body);font-size:15px;padding:12px 0;color:#3a3f33}
  .fveld input[type=number]{-moz-appearance:textfield}
  .fveld input[type=number]::-webkit-outer-spin-button,.fveld input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
  .fveld.fout input,.fveld.fout select,.fveld.fout textarea{border-color:#C2643C;background:#FDF6F2}
  .veldfout{display:block;margin-top:7px;font-size:13.5px;color:#A34A24;line-height:1.4}
  .fvraag{margin-bottom:22px}
  .fvraag:last-child{margin-bottom:0}
  .vraagtekst{margin:0 0 10px;font-size:16px;color:var(--ink)}
  .keuzes{display:flex;gap:10px;flex-wrap:wrap}
  .keuze{display:inline-flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:15px;color:#3a3f33;line-height:1.5}
  .keuzes .keuze{background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:11px 20px;min-width:88px;align-items:center}
  .keuzes .keuze:hover{border-color:var(--sage)}
  .fvraag.fout .keuzes .keuze{border-color:#C2643C}
  .fakkoord{max-width:820px;margin:0 auto 26px;padding:18px;background:var(--cream-2);border-radius:var(--radius)}
  .fakkoord.fout{background:#FDF6F2;border:1px solid #C2643C}
  .fakkoord input[type=checkbox]{margin-top:3px;flex:none}
  .redenen{max-width:640px;margin:0 0 22px;padding:14px 18px 14px 40px;list-style-position:outside;
           background:var(--cream-2);border-left:3px solid var(--yellow);border-radius:var(--radius);
           color:#3a3f33;font-size:16px;line-height:1.6}
  .redenen li{margin-bottom:7px}
  @media(max-width:620px){
    .fgrid{grid-template-columns:1fr}
  }


  /* ---------- Nagekomen correcties ----------
     De vacaturekaart is nu in zijn geheel een link, dus de standaard
     linkopmaak moet eraf en de tekstkleuren moeten blijven staan. */
  a.vac{text-decoration:none;color:inherit}
  a.vac:hover{text-decoration:none}
  a.vac h3{color:var(--ink)}
  a.vac .sum{color:#4a5043}
  /* Toetsenbordgebruikers moeten zien waar ze zijn */
  a.vac:focus-visible, a.pill:focus-visible, a.area-card:focus-visible{outline:2px solid var(--forest);outline-offset:3px}

  /* ---------- Foto die de kolom vult ----------
     Bij stretch wordt de foto precies zo hoog als de tekst ernaast.
     Wat niet past wordt bijgesneden, want background-size staat op cover.
     De ondergrens vangt korte teksten en de smalle weergave op, want
     daar staan de twee onder elkaar en is er geen tekst om naar te meten. */
  .verhaal-grid-vul{align-items:stretch}
  .imgslot-vul{min-height:460px}
  @media(max-width:900px){
    .imgslot-vul{min-height:320px}
  }


  /* ---------- Meer lucht op de berichtpagina's ----------
     Dit zijn de pagina's waar iemand landt na een sollicitatie of een
     jobalert. Daar staat weinig, dus dat mag ademen. De eyebrow, de kop
     en de tekst zaten tegen elkaar aan. */
  .melding-hero{padding:64px 0 66px}
  .melding-hero .eyebrow{display:block;margin-bottom:16px}
  .melding-hero h1{margin:0 0 22px;max-width:14em}
  .melding-hero .lead{margin:0 0 8px;max-width:34em;line-height:1.65}
  .melding-hero .lead + .lead{margin-top:18px}
  .melding-hero .redenen{margin-top:22px}
  .melding-hero .hero-actions{margin-top:34px}
  @media(max-width:620px){
    .melding-hero{padding:44px 0 46px}
    .melding-hero h1{margin-bottom:18px}
  }


  /* ---------- Sla het menu over ----------
     Voor wie met een toetsenbord of een schermlezer werkt. Onzichtbaar
     tot je Tab indrukt, dan springt hij tevoorschijn. */
  .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--forest-deep);
        color:var(--cream);padding:12px 20px;font-family:var(--cond);text-transform:uppercase;
        letter-spacing:.08em;font-size:14px;text-decoration:none}
  .skip:focus{left:8px;top:8px}

  /* Een quote die er nog niet is. Zichtbaar leeg, zodat niemand
     per ongeluk verzonnen woorden onder een echte naam laat staan. */
  .col-quote-ph{font-style:normal;font-family:var(--cond);text-transform:uppercase;
                letter-spacing:.08em;font-size:13px;color:var(--sage);opacity:.65}
  .col-quote-ph:before{content:none}

  /* =============================================================
     MOBIEL MENU

     Het prototype had een uitschuifmenu op JavaScript. Bij de
     omzetting naar PHP is dat JavaScript eruit gegaan en het menu
     nooit teruggekomen. Dit is de vervanger, gebouwd op details en
     summary: dat klapt de browser zelf open en dicht. Geen script
     dat kan falen, en hij werkt met het toetsenbord.

     Let op bij het aanpassen: .nav is hetzelfde element als .wrap.
     Gebruik hier nooit de korte schrijfwijze padding, want die gooit
     de zijmarge van .wrap weg en dan plakt de hele koptekst tegen
     de rand van het scherm. Dat is precies wat hier misging.
     ============================================================= */

  .mnav{display:none}
  @media(max-width:900px){
    .nav-right{display:none}

    .nav{height:64px}
    .mnav{display:block}

    .mnav > summary{
      list-style:none;cursor:pointer;width:44px;height:44px;
      display:flex;align-items:center;justify-content:center;
      border:1px solid var(--line);border-radius:var(--radius);
      background:var(--white)}
    .mnav > summary::-webkit-details-marker{display:none}
    .mnav > summary::marker{content:""}
    .mnav > summary:focus-visible{outline:2px solid var(--forest);outline-offset:2px}

    /* Drie streepjes die een kruis worden als hij openstaat */
    .mnav-icoon{position:relative;display:block;width:20px;height:2px;
                background:var(--ink);border-radius:2px;transition:background .15s}
    .mnav-icoon:before,.mnav-icoon:after{
      content:"";position:absolute;left:0;width:20px;height:2px;
      background:var(--ink);border-radius:2px;transition:transform .15s, top .15s}
    .mnav-icoon:before{top:-6px}
    .mnav-icoon:after{top:6px}
    .mnav[open] .mnav-icoon{background:transparent}
    .mnav[open] .mnav-icoon:before{top:0;transform:rotate(45deg)}
    .mnav[open] .mnav-icoon:after{top:0;transform:rotate(-45deg)}

    /* Het paneel hangt onder de balk, over de pagina heen */
    .mnav-paneel{
      position:absolute;left:0;right:0;top:100%;
      background:var(--cream);border-bottom:1px solid var(--line);
      padding:6px 18px 20px;display:flex;flex-direction:column;
      box-shadow:0 16px 26px rgba(43,49,38,.11)}
    .mnav-paneel a{
      font-family:var(--cond);text-transform:uppercase;letter-spacing:.09em;
      font-size:16px;font-weight:500;color:var(--ink);text-decoration:none;
      padding:16px 2px;border-bottom:1px solid var(--line-soft)}
    .mnav-paneel a.active{color:var(--forest)}
    .mnav-paneel a:hover{color:var(--forest)}
    .mnav-cta{
      margin-top:16px;border-bottom:none;justify-content:center;
      padding:15px 20px;font-size:15px}
  }


  /* ---------- Lucht en maatvoering op smalle schermen ----------
     Let op: .phero-in en .jobalert-in delen hun element met .wrap.
     Daarom hier padding-top en padding-bottom los, nooit de korte
     schrijfwijze padding, want die gooit de zijmarge van .wrap weg. */
  @media(max-width:900px){
    /* De knop in de header sloot gelijk aan op de sectie eronder */

    /* De jobalert zat te strak tegen de voettekst */
    .jobalert-in{gap:22px;padding-top:54px;padding-bottom:64px}
  }

  @media(max-width:620px){
    .jobalert-in{padding-top:44px;padding-bottom:56px}

    /* ---------- Twee collega's naast elkaar ----------
       Eentje per rij gaf vier kaarten van 650 px, samen 2600 px
       scrollen door een sectie die niemand daarvoor uitzit. Twee
       naast elkaar maakt de kaart 171 px breed, en dan past die
       cursieve letter van 17 px niet meer: dat werd twaalf regels
       van vijftien tekens. Op 14 px zijn het er negen. */
    .col-grid{grid-template-columns:repeat(2,1fr);gap:12px}
    .col-quote{font-size:14px;line-height:1.45;padding:14px 13px 10px}
    .col-quote:before{font-size:17px}
    .col-who{padding:0 13px 15px;font-size:12px;letter-spacing:.05em}
    .col-who span{font-size:11px}
  }

  /* =============================================================
     PAGINAHEADER

     Twee gedaantes, dezelfde HTML.

     Breed scherm: de tekst valt over de foto, zoals het altijd was.
     De foto en de tekst liggen in hetzelfde grid-vakje, dus over
     elkaar heen. De rij groeit mee met wat het hoogst is, dus lange
     tekst duwt de foto vanzelf hoger in plaats van eroverheen.

     Smal scherm: de foto staat los bovenaan, de tekst eronder op
     papier. Daar loopt de tekst over de volle breedte en steekt dus
     altijd in het lichte deel van de foto, hoe je het waas ook draait.
     Vandaar dat we het daar niet proberen.

     Let op: .phero-in deelt zijn element met .wrap. Gebruik hier
     nooit de korte schrijfwijze padding, dat gooit de zijmarge weg.
     ============================================================= */

  .phero{display:grid;background:var(--cream)}

  .phero-foto{
    grid-area:1/1;position:relative;min-height:440px;
    background-size:cover;background-position:center;
    background-color:var(--cream-3)}
  .phero-ph{background:linear-gradient(150deg,var(--forest-deep),var(--forest))}

  /* Het donkere waas onder de tekst. Alleen op breed nodig. */
  .phero-foto:after{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(to right,rgba(28,33,24,.94),rgba(28,33,24,.76) 30%,rgba(28,33,24,.46) 54%,rgba(28,33,24,.16) 74%,rgba(28,33,24,0)),
      linear-gradient(to top,rgba(28,33,24,.55),rgba(28,33,24,0) 52%)}

  .phero-note{
    position:absolute;top:16px;right:20px;z-index:2;display:flex;align-items:center;gap:8px;
    color:rgba(255,250,237,.8);background:rgba(28,33,24,.35);
    border:1px solid rgba(255,250,237,.25);border-radius:var(--radius);padding:7px 12px}
  .phero-note svg{width:20px;height:20px}
  .phero-note span{font-family:var(--body);text-transform:uppercase;letter-spacing:.1em;font-size:12px}

  .phero-tekst{grid-area:1/1;align-self:end;position:relative;z-index:1}
  .phero-in{padding-top:70px;padding-bottom:60px;color:var(--cream)}
  .phero .eyebrow{color:var(--yellow-soft)}
  .phero h1{color:var(--cream);font-size:clamp(34px,4.2vw,58px);letter-spacing:-.01em;max-width:15em;margin-top:8px;text-shadow:0 2px 24px rgba(0,0,0,.25)}
  .phero-lead{color:#eef1e9;font-size:18px;max-width:33em;margin:16px 0 24px;text-shadow:0 1px 12px rgba(0,0,0,.3)}
  .phero-cta{display:flex;gap:14px;flex-wrap:wrap}

  /* ---------- Smal: foto los, tekst eronder op papier ---------- */
  @media(max-width:900px){
    .phero{display:block}
    .phero-foto{height:320px;min-height:0}
    .phero-foto:after{display:none}

    .phero-tekst{background:var(--cream);border-bottom:1px solid var(--line-soft)}
    .phero-in{padding-top:38px;padding-bottom:44px;color:var(--ink)}
    .phero .eyebrow{color:var(--sage)}
    .phero h1{color:var(--ink);text-shadow:none;margin-top:10px}
    .phero-lead{color:#3a3f33;text-shadow:none;font-size:17px;max-width:38em;margin-bottom:26px}
  }
  @media(max-width:620px){
    .phero-foto{height:230px}
    .phero-in{padding-top:30px;padding-bottom:36px}
  }

  /* ---------- Vacatureknop altijd in beeld ----------
     Op smal staat hij naast de hamburger. Het logo mag krimpen als het
     krap wordt, zo hebben we geen apart knikpunt nodig voor kleine
     telefoons: onder de 360 px schuift hij gewoon netjes in elkaar. */
  .hdr-vac{display:none}

  @media(max-width:900px){
    .brand{flex:0 1 auto;min-width:0}
    .brand .logo-svg{max-width:100%;height:auto}
    .nav .brand .logo-svg{height:25px}

    .hdr-vac{
      display:inline-flex;flex:none;margin-left:auto;margin-right:10px;
      padding:11px 14px;font-size:13px;letter-spacing:.07em;white-space:nowrap}
  }

  /* ---------- Vier richtingen in plaats van drie ----------
     Winkels, horeca, kantoor en ons verhaal. Op een breed scherm
     naast elkaar, op een tablet twee bij twee, op een telefoon
     onder elkaar. Bij vier kaarten wordt de kolom smal, dus de
     kop mag daar een maat kleiner. */
  @media(min-width:901px){
    .area-grid{grid-template-columns:repeat(4,1fr);gap:18px}
    .area-body{padding:20px 20px 22px}
    .area-body h3{font-size:22px}
    .area-body p{font-size:14.5px}
  }

  /* Op een telefoon passen vier kaarten met een foto van 16:10 niet
     naast elkaar zonder dat je niks meer ziet. Dus onder elkaar. */
  @media(max-width:620px){
    .area-grid{grid-template-columns:1fr}
  }

/* ---------- Gated interessepagina ----------
   Een wervende pagina voor een MT-vacature. Smallere leeskolom dan de
   rest, want dit is leestekst, geen brede layout. Een forest-blok dat
   uitnodigt om de vacature aan te vragen, en een ruim formulier. */

.wrap-smal{max-width:780px;margin:0 auto}

.intro-lees{padding-top:52px;padding-bottom:52px}

.band-forest{background:var(--forest);color:var(--cream)}
.band-cream{background:var(--cream-2)}
.eyebrow-licht{color:var(--cream-3)}

.intro-lok{padding:46px 0}
.intro-lok-in{text-align:center;max-width:620px;margin:0 auto}
.intro-lok-in h2{color:var(--cream);margin:6px 0 12px}
.intro-lok-in p{color:var(--cream);opacity:.92;line-height:1.6}

.intro-groot{font-size:19px;line-height:1.6;max-width:600px;margin:14px auto 18px}

.intform{max-width:620px;margin:0 auto}
.fverstuur{margin-top:24px;text-align:center}
.fverstuur .btn{min-width:260px}
.fverstuur .bo-fijndruk{margin-top:12px}

@media(max-width:620px){
  .intro-lees{padding-top:36px;padding-bottom:36px}
  .fverstuur .btn{min-width:0;width:100%}
}

/* Een gated vacature (MT-rol) in de lijst: subtiel accent zodat hij zich
   onderscheidt van de gewone vacatures. Linkt naar de interessepagina. */
.vac-gated{border-color:var(--goud,#C8A24B);border-left-width:3px}

/* De dagenkeuze bij de winkelmedewerker: de zeven dagen in een net raster
   dat meebuigt naar de schermbreedte. */
.fveld-kop{display:block;font-weight:600;margin-bottom:10px}
.keuzes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px 18px}
.keuzes-grid .keuze{margin:0}

/* Het invulveld bij "Anders" onder de vraag waar ken je ons van. */
.bron-anders-veld{margin-top:12px}
.bron-anders-veld[hidden]{display:none}