:root{
    color-scheme:dark;

    /* grond, niet zwart maar een zachte houtskool met groenzweem */
    --paper:#101413;
    --paper-2:#1A201F;
    --ink:#E9EDEA;
    --ink-soft:#8E9A95;
    --line:#262E2C;
    --line-soft:#1B2221;

    /* labels en accenten */
    --brand:#84C6B2;
    --accent:#E2673A;
    --accent-ink:#140D09;

    /* de diepgroene vlakken */
    --band-bg:#14211D;
    --band-ink:#E9EDEA;
    --band-soft:#8C9B96;
    --band-line:rgba(233,237,234,.13);
    --band-raise:rgba(233,237,234,.05);
    --band-hover:rgba(233,237,234,.09);
    --glass:rgba(233,237,234,.09);
    --glass-edge:rgba(233,237,234,.22);

    --font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
    --font-body:"Source Sans 3","Helvetica Neue",Arial,sans-serif;

    --maxw:1120px;
    --gutter:clamp(16px,5vw,64px);
    --ease:cubic-bezier(.22,.68,.28,1);
  }

  /* overflow-x:clip in plaats van hidden, zodat uitstekende elementen de
     pagina niet breder maken dan het scherm zonder een scrollcontainer te
     worden. Alleen op body was niet genoeg. */
  html{scroll-behavior:smooth;scroll-padding-top:84px;overflow-x:clip;}
  *{box-sizing:border-box;}
  /* basis, zodat elke pagina ook los van de voorbeeldomgeving hetzelfde oogt */
  body{margin:0;}
  img{max-width:100%;}
  [hidden]{display:none !important;}

  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:17px;
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
    overflow-x:clip;
  }

  h1,h2,h3,h4{
    font-family:var(--font-display);
    font-weight:800;
    letter-spacing:-.022em;
    line-height:1.06;
    text-wrap:balance;
    overflow-wrap:break-word;
    margin:0;
  }

  p{margin:0;}
  a{color:inherit;}

  .wrap{
    width:100%;
    max-width:var(--maxw);
    margin-inline:auto;
    padding-inline:var(--gutter);
  }

  .eyebrow{
    font-family:var(--font-display);
    font-weight:600;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--brand);
    margin:0;
  }

  :where(a,button,input,textarea,select):focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
    border-radius:2px;
  }

  /* ---------- lichtgevende cursor ---------- */
  .cursor-orb,.cursor-core{
    position:fixed;
    top:0;left:0;
    border-radius:50%;
    pointer-events:none;
    z-index:90;
    opacity:0;
    will-change:transform;
  }
  .cursor-orb{
    width:34px;height:34px;
    margin:-17px 0 0 -17px;
    background:radial-gradient(circle at 50% 50%,
      color-mix(in srgb,var(--accent) 48%,transparent) 0%,
      color-mix(in srgb,var(--accent) 16%,transparent) 55%,
      transparent 72%);
    box-shadow:0 0 26px 4px color-mix(in srgb,var(--accent) 26%,transparent);
    transition:width .26s var(--ease),height .26s var(--ease),margin .26s var(--ease),opacity .2s linear;
  }
  .cursor-core{
    width:6px;height:6px;
    margin:-3px 0 0 -3px;
    background:var(--accent);
    box-shadow:0 0 10px 2px color-mix(in srgb,var(--accent) 60%,transparent);
    transition:opacity .2s linear;
  }
  body.cursor-on .cursor-orb,
  body.cursor-on .cursor-core{opacity:1;}
  body.cursor-on,
  body.cursor-on *{cursor:none !important;}
  body.cursor-on.cursor-hot .cursor-orb{
    width:58px;height:58px;
    margin:-29px 0 0 -29px;
  }

  /* ---------- beweging ---------- */
  .reveal{transition:opacity .8s var(--ease), transform .8s var(--ease);}
  .reveal.is-pre{opacity:0;transform:translateY(26px);}
  .reveal.is-in{opacity:1;transform:none;}

  .reveal-item{transition:opacity .62s var(--ease), transform .62s var(--ease);}
  .reveal-group.is-pre .reveal-item{opacity:0;transform:translateY(20px);}
  .reveal-group.is-in .reveal-item:nth-child(1){transition-delay:0ms;}
  .reveal-group.is-in .reveal-item:nth-child(2){transition-delay:70ms;}
  .reveal-group.is-in .reveal-item:nth-child(3){transition-delay:140ms;}
  .reveal-group.is-in .reveal-item:nth-child(4){transition-delay:210ms;}
  .reveal-group.is-in .reveal-item:nth-child(5){transition-delay:280ms;}
  .reveal-group.is-in .reveal-item:nth-child(6){transition-delay:350ms;}

  .mask{
    display:block;
    overflow:hidden;
    padding-bottom:.09em;
    margin-bottom:-.09em;
  }
  .mask .mask-inner{display:block;transition:transform .9s var(--ease), opacity .9s var(--ease);}
  .mask.is-pre .mask-inner{transform:translateY(104%);opacity:0;}

  @keyframes riseIn{
    from{opacity:0;transform:translateY(20px);}
    to{opacity:1;transform:none;}
  }
  .intro{animation:riseIn .62s var(--ease) both;}
  .intro-1{animation-delay:.02s;}
  .intro-2{animation-delay:.10s;}
  .intro-3{animation-delay:.18s;}
  .intro-4{animation-delay:.26s;}
  .intro-5{animation-delay:.16s;}

  /* ---------- knoppen ---------- */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:.55em;
    font-family:var(--font-display);
    font-weight:700;
    font-size:16px;
    letter-spacing:-.01em;
    text-decoration:none;
    padding:14px 22px;
    border-radius:3px;
    border:1.5px solid transparent;
    cursor:pointer;
    transition:transform .16s var(--ease), background-color .16s var(--ease), border-color .16s var(--ease);
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--accent);color:var(--accent-ink);}
  .btn-primary:hover{background:color-mix(in srgb,var(--accent) 88%,#000);}
  .btn-ghost{
    background:transparent;
    color:var(--ink);
    border-color:var(--line);
    font-size:15px;
    padding:12px 18px;
    font-weight:600;
  }
  .btn-ghost:hover{border-color:var(--ink);}

  /* ---------- header ---------- */
  .site-header{
    position:sticky;
    top:env(safe-area-inset-top,0px);
    z-index:40;
    background:color-mix(in srgb,var(--paper) 86%,transparent);
    backdrop-filter:blur(12px);
    border-bottom:1px solid transparent;
    transition:border-color .3s var(--ease);
  }
  .site-header.is-stuck{border-bottom-color:var(--line-soft);}
  .progress{
    position:absolute;
    left:0;bottom:-1px;
    height:2px;
    width:0%;
    background:var(--accent);
    pointer-events:none;
  }
  .header-inner{
    display:flex;
    align-items:center;
    gap:24px;
    min-height:76px;
    transition:min-height .3s var(--ease);
  }
  .site-header.is-stuck .header-inner{min-height:62px;}
  .logo{
    display:flex;
    align-items:center;
    text-decoration:none;
    margin-right:auto;
    color:var(--ink);
  }
  .logo-svg{
    display:block;
    height:25px;
    width:auto;
    transition:height .3s var(--ease);
  }
  .site-header.is-stuck .logo-svg{height:21px;}
  @media (max-width:520px){
    .logo-svg{height:21px;}
  }
  .nav{display:flex;gap:26px;align-items:center;}
  .nav a{
    font-family:var(--font-display);
    font-weight:500;
    font-size:15px;
    text-decoration:none;
    color:var(--ink-soft);
    transition:color .16s var(--ease);
  }
  .nav a:hover{color:var(--ink);}

  /* ---------- hamburger en mobiel menu ---------- */
  .menu-btn{
    display:none;
    width:44px;height:44px;
    margin-right:-10px;
    place-items:center;
    border:0;
    background:transparent;
    color:var(--accent);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .menu-bars{
    display:block;
    width:24px;height:16px;
    position:relative;
  }
  .menu-bars i{
    position:absolute;
    left:0;right:0;
    height:2px;
    border-radius:2px;
    background:currentColor;
    transition:transform .3s var(--ease), opacity .2s linear;
  }
  .menu-bars i:nth-child(1){top:0;}
  .menu-bars i:nth-child(2){top:7px;}
  .menu-bars i:nth-child(3){top:14px;}
  body.menu-open .menu-bars i:nth-child(1){transform:translateY(7px) rotate(45deg);}
  body.menu-open .menu-bars i:nth-child(2){opacity:0;}
  body.menu-open .menu-bars i:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .mobile-nav{
    display:none;
    position:absolute;
    left:0;right:0;
    top:100%;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    overflow:hidden;
    max-height:0;
    opacity:0;
    visibility:hidden;
    transition:max-height .34s var(--ease), opacity .22s linear, visibility 0s linear .34s;
  }
  body.menu-open .mobile-nav{
    max-height:360px;
    opacity:1;
    visibility:visible;
    transition:max-height .34s var(--ease), opacity .22s linear, visibility 0s;
  }
  .mobile-nav-inner{
    display:flex;
    flex-direction:column;
    padding-block:8px 22px;
  }
  .mobile-nav a{
    font-family:var(--font-display);
    font-weight:600;
    font-size:19px;
    letter-spacing:-.015em;
    text-decoration:none;
    color:var(--ink);
    padding:15px 2px;
    border-bottom:1px solid var(--line-soft);
  }
  .mobile-nav .btn{
    margin-top:20px;
    border-bottom:0;
    justify-content:center;
    padding-block:15px;
  }

  @media (max-width:880px){
    .nav{display:none;}
    .header-cta{display:none;}
    .menu-btn{display:grid;}
    .mobile-nav{display:block;}
    /* de header dekt het menu af, dus ligt hij boven de pagina-inhoud */
    .hero .portrait{display:none;}
  }

  /* ---------- hero ---------- */
  .hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) clamp(186px,23vw,258px);
    gap:clamp(26px,4.5vw,56px);
    align-items:end;
    padding-block:clamp(48px,7vw,84px) clamp(40px,5vw,62px);
  }
  .hero-copy{will-change:transform;}
  .hero h1{
    font-size:clamp(34px,5.3vw,60px);
    margin-block:18px 0;
  }
  .hero h1 em{
    font-style:normal;
    color:var(--brand);
  }
  .hero-sub{
    font-size:clamp(17px,1.5vw,19.5px);
    color:var(--ink-soft);
    max-width:52ch;
    margin-top:22px;
  }
  .hero-cta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:14px;
    margin-top:32px;
  }

  .portrait{
    position:relative;
    aspect-ratio:4/5;
    width:100%;
    max-width:100%;
    margin-left:auto;
    border-radius:4px;
    overflow:hidden;
    background:transparent;
  }
  .portrait-inner{
    position:absolute;
    inset:-12% 0;
    background-image:url("nick-foto.webp");
    background-size:cover;
    background-position:50% 50%;
    background-repeat:no-repeat;
  }

  /* kader zonder foto */
  .portrait-empty{
    background:var(--paper-2);
    border:1px solid var(--line);
    display:flex;
    align-items:flex-end;
    padding:16px;
  }
  .portrait-empty .portrait-inner{
    background-image:repeating-linear-gradient(135deg,var(--line-soft) 0 2px,transparent 2px 13px);
  }
  .portrait-note{
    position:relative;
    font-family:var(--font-display);
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--ink-soft);
    background:var(--paper);
    border:1px solid var(--line);
    padding:6px 10px;
    border-radius:2px;
  }
  @media (max-width:880px){
    /* zonder foto valt er op mobiel een gat tussen de knoppen en de
       groene band, waardoor de kop eronder er afgekapt uitziet in plaats
       van als het begin van een volgende sectie */
    .hero{
      grid-template-columns:1fr;
      align-items:start;
      padding-block:clamp(40px,6vw,84px) 26px;
    }
    .focus-band{padding-block:72px clamp(84px,11vw,152px);}
    .hero .portrait{max-width:250px;margin-left:0;}
  }

  /* ---------- functieband ---------- */
  .band{
    position:relative;
    z-index:0;
    background:var(--band-bg);
    color:var(--band-ink);
  }
  /* randen oplossen in de lichte secties ervoor en erna */
  .band::before,
  .band::after{
    content:"";
    position:absolute;
    left:0;right:0;
    height:clamp(72px,9vh,120px);
    pointer-events:none;
    z-index:0;
  }
  .band::before{top:0;background:linear-gradient(to bottom, var(--paper), transparent);}
  .band::after{bottom:0;background:linear-gradient(to top, var(--paper), transparent);}
  .band > *{position:relative;z-index:1;}
  .focus-band{padding-block:clamp(104px,10.5vw,146px) clamp(108px,11vw,152px);}
  .focus-head{
    max-width:64ch;
    transition:transform .4s var(--ease);
  }
  .focus-head h2{font-size:clamp(23px,2.6vw,31px);}
  .focus-foot{
    margin-top:44px;
    font-size:15.5px;
    color:var(--band-soft);
  }
  .focus-foot a{
    color:var(--band-ink);
    text-decoration-color:var(--accent);
    text-underline-offset:3px;
    text-decoration-thickness:1.5px;
  }
  .focus-foot a:hover{color:var(--accent);}

  .roles{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:28px;
  }
  .role-row{display:flex;flex-wrap:wrap;gap:10px;}
  .role{
    position:relative;
    flex:1 1 auto;
    white-space:nowrap;
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(15px,1.75vw,20px);
    letter-spacing:-.012em;
    color:var(--band-ink);
    background:transparent;
    border:1px solid var(--band-line);
    border-radius:999px;
    padding:11px 20px;
    cursor:pointer;
    text-align:center;
    transition:background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), opacity .22s var(--ease);
  }
  /* Op een telefoon passen de langste titels niet op één regel. Zonder
     deze regel dwingen ze de hele pagina breder dan het scherm, waardoor
     de browser alles uitzoomt. */
  @media (max-width:620px){
    .role{
      white-space:normal;
      min-width:0;
      font-size:15px;
      padding:10px 16px;
      line-height:1.25;
    }
    .role-row{gap:8px;}
    .roles{gap:8px;}
  }
  .roles.has-open .role:not(.is-open){opacity:.45;}
  .role.is-open{
    border-color:transparent;
    color:transparent;
  }

  .role-pop{
    position:absolute;
    top:50%;
    left:var(--pop-x,0px);
    width:var(--pop-w,320px);
    transform:translateY(-50%) scale(.86);
    transform-origin:var(--pop-ox,50%) center;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:6;
    text-align:left;
    white-space:normal;
    border-radius:20px;
    border:1px solid var(--glass-edge);
    background:linear-gradient(148deg,
      rgba(233,237,234,.17) 0%,
      rgba(233,237,234,.055) 48%,
      rgba(233,237,234,.10) 100%);
    padding:20px 22px;
    display:flex;
    flex-direction:column;
    gap:8px;
    transition:opacity .26s var(--ease), transform .34s var(--ease), visibility 0s linear .34s;
  }
  .role.is-open{z-index:7;}
  .role.is-open .role-pop{
    opacity:1;
    visibility:visible;
    transform:translateY(-50%) scale(1);
    backdrop-filter:blur(24px) saturate(170%) brightness(1.07);
    -webkit-backdrop-filter:blur(24px) saturate(170%) brightness(1.07);
    box-shadow:
      0 24px 54px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -1px 0 rgba(255,255,255,.06);
    transition:opacity .26s var(--ease), transform .34s var(--ease), visibility 0s;
  }
  .pop-title{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(17px,1.7vw,20px);
    letter-spacing:-.018em;
    line-height:1.14;
    color:var(--band-ink);
  }
  .pop-text{
    font-family:var(--font-body);
    font-weight:400;
    font-size:15.5px;
    line-height:1.5;
    letter-spacing:0;
    color:var(--band-soft);
  }

  /* ---------- secties ---------- */
  .section{padding-block:clamp(56px,7vw,94px);}
  .section-head{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:flex-end;
    gap:18px 32px;
    margin-bottom:38px;
  }
  .section-head h2{font-size:clamp(28px,3.5vw,42px);}
  .section-head .eyebrow{margin-bottom:12px;}

  .draft-flag{
    display:inline-block;
    font-family:var(--font-display);
    font-size:11px;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--ink-soft);
    border:1px dashed var(--line);
    padding:5px 9px;
    border-radius:2px;
  }

  /* ---------- vacature carousel ---------- */
  .carousel-tools{display:flex;align-items:center;gap:10px;}
  .arrow{
    width:44px;height:44px;
    flex:none;
    display:grid;
    place-items:center;
    border:1.5px solid var(--line);
    border-radius:50%;
    background:transparent;
    color:var(--ink);
    cursor:pointer;
    transition:border-color .16s var(--ease), background-color .16s var(--ease), opacity .16s var(--ease);
  }
  .arrow:hover:not(:disabled){border-color:var(--ink);background:var(--paper-2);}
  .arrow:disabled{opacity:.3;cursor:default;}
  .arrow svg{width:17px;height:17px;display:block;}

  .rail{
    --edge:max(var(--gutter), calc(50vw - var(--maxw) / 2 + var(--gutter)));
    --edge-fade:min(26px, var(--edge));
    position:relative;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    /* kaarten die naar links wegschuiven lossen op bij de rand van de
       content in plaats van half afgekapt in de marge te blijven staan */
    -webkit-mask-image:linear-gradient(to right,
      transparent 0,
      transparent calc(var(--edge) - var(--edge-fade)),
      #000 var(--edge));
    mask-image:linear-gradient(to right,
      transparent 0,
      transparent calc(var(--edge) - var(--edge-fade)),
      #000 var(--edge));
  }
  .track{
    display:flex;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding-inline:var(--edge);
    scroll-padding-inline:var(--edge);
    padding-block:4px 20px;
    scrollbar-width:none;
    cursor:grab;
  }
  .track::-webkit-scrollbar{display:none;}
  .track.is-dragging{
    cursor:grabbing;
    scroll-snap-type:none;
    scroll-behavior:auto;
    user-select:none;
  }
  .job{
    flex:0 0 clamp(262px,30vw,336px);
    scroll-snap-align:start;
    background:var(--paper-2);
    border:1px solid var(--line);
    border-radius:4px;
    padding:26px 24px 24px;
    display:flex;
    flex-direction:column;
    gap:14px;
    text-decoration:none;
    transition:border-color .18s var(--ease), transform .18s var(--ease);
  }
  .job:hover{border-color:var(--ink-soft);transform:translateY(-3px);}
  .track.is-dragging .job{transform:none;}
  .job-sector{
    font-family:var(--font-display);
    font-size:12px;
    font-weight:600;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--brand);
  }
  .job h3{
    font-size:23px;
    font-weight:700;
    letter-spacing:-.018em;
    line-height:1.16;
  }
  .job-meta{
    list-style:none;
    margin:0;padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  .job-meta li{
    font-size:13.5px;
    color:var(--ink-soft);
    border:1px solid var(--line);
    border-radius:2px;
    padding:3px 8px;
  }
  .job-salary{
    margin-top:auto;
    padding-top:14px;
    border-top:1px solid var(--line);
    font-family:var(--font-display);
    font-weight:700;
    font-size:17px;
    font-variant-numeric:tabular-nums;
  }
  .job-salary small{
    display:block;
    font-family:var(--font-body);
    font-weight:400;
    font-size:13px;
    letter-spacing:0;
    color:var(--ink-soft);
  }
  .jobs-foot{
    margin-top:22px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:16px;
  }

  /* ---------- over ---------- */
  .about{
    display:grid;
    grid-template-columns:minmax(0,.64fr) minmax(0,1.36fr);
    grid-template-areas:
      "side head"
      "side copy";
    gap:20px clamp(28px,5vw,60px);
    align-items:start;
  }
  .about-side{grid-area:side;}
  /* de uitsnede heeft lege ruimte boven zijn hoofd, dus we ankeren het
     beeld onderaan en maken het kader iets minder hoog. Zo begint zijn
     hoofd op dezelfde hoogte als de kop ernaast. */
  .about .portrait{max-width:292px;margin-left:0;aspect-ratio:5/6;}
  .about .portrait-inner{inset:0;background-position:50% 100%;}
  .about-head{grid-area:head;}
  .about-copy{grid-area:copy;}
  .about-head h2{font-size:clamp(26px,3.2vw,38px);}
  .about-head .eyebrow{margin-bottom:12px;}
  .about-side{display:flex;flex-direction:column;gap:18px;}
  .portrait-quote p{margin:0;}
  .portrait-quote cite{
    display:block;
    margin-top:9px;
    font-family:var(--font-body);
    font-style:normal;
    font-weight:400;
    font-size:14px;
    letter-spacing:0;
    color:var(--ink-soft);
  }
  .portrait-quote{
    margin:0;
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(16px,1.45vw,18.5px);
    line-height:1.34;
    letter-spacing:-.014em;
    color:var(--ink);
    border-left:2px solid var(--accent);
    padding-left:15px;
    max-width:36ch;
  }
  .about-copy{display:flex;flex-direction:column;gap:20px;}
  .about-copy p{color:var(--ink-soft);max-width:58ch;}
  .about-copy p.lead{color:var(--ink);font-size:19.5px;}
  @media (max-width:880px){
    /* op mobiel de kop, dan de tekst, en de foto met citaat als afsluiter */
    .about{
      grid-template-columns:1fr;
      grid-template-areas:"head" "copy" "side";
      gap:22px;
    }
    .about-side{margin-top:-4px;}
    .about .portrait{max-width:200px;margin-left:0;}
    .portrait-quote{max-width:46ch;}
  }

  /* ---------- werkwijze, vastgezette presentatie ---------- */
  .switch{
    display:inline-flex;
    padding:4px;
    gap:4px;
    background:var(--band-raise);
    border:1px solid var(--band-line);
    border-radius:3px;
    flex:none;
  }
  .switch button{
    font-family:var(--font-display);
    font-weight:600;
    font-size:15px;
    padding:9px 18px;
    border:0;
    border-radius:2px;
    background:transparent;
    color:var(--band-soft);
    cursor:pointer;
    transition:background-color .18s var(--ease), color .18s var(--ease);
  }
  .switch button:hover{color:var(--band-ink);}
  .switch button[aria-selected="true"]{
    background:var(--band-ink);
    color:var(--band-bg);
  }

  .werkwijze{
    padding-block:0;
    color:var(--band-ink);
    background-color:var(--band-bg);
  }
  .werkwijze{position:relative;z-index:0;}
  /* randen oplossen in de sectie ervoor en erna */
  .werkwijze::before,
  .werkwijze::after{
    content:"";
    position:absolute;
    left:0;right:0;
    height:clamp(150px,20vh,280px);
    pointer-events:none;
    z-index:2;
  }
  .werkwijze::before{
    top:0;
    background:linear-gradient(to bottom, var(--paper) 6%, transparent);
  }
  .werkwijze::after{
    bottom:0;
    background:linear-gradient(to top, var(--paper) 6%, transparent);
  }
  .pin-inner{z-index:1;}
  .werkwijze .eyebrow{color:var(--brand);}
  .pin{
    --pin-scroll:200vh;
    position:relative;
    height:calc(100vh + var(--pin-scroll));
  }
  .pin-inner{
    position:sticky;
    top:0;
    height:100vh;
    display:flex;
    align-items:stretch;
    overflow:hidden;
    padding-block:clamp(94px,11vh,124px) clamp(30px,4.5vh,56px);
  }
  .stage{
    width:100%;
    max-height:760px;
    margin-block:auto;
    display:flex;
    flex-direction:column;
    gap:clamp(18px,3vh,36px);
  }
  .stage-head{flex:none;}
  .track-set{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:clamp(20px,3.2vh,40px);
  }
  .stage-head{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:flex-end;
    gap:14px 32px;
  }
  .stage-head h2{font-size:clamp(23px,2.7vw,33px);}
  .stage-head .eyebrow{margin-bottom:10px;}

  /* de glazen fasekaart */
  .phases{
    position:relative;
    flex:none;
    min-height:clamp(168px,22vh,248px);
  }
  .phase{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    column-gap:clamp(22px,3.4vw,52px);
    padding:clamp(20px,2.6vh,32px) clamp(22px,2.6vw,38px);
    border-radius:24px;
    border:1px solid var(--glass-edge);
    background:linear-gradient(148deg,
      rgba(233,237,234,.16) 0%,
      rgba(233,237,234,.05) 48%,
      rgba(233,237,234,.095) 100%);
    box-shadow:
      0 26px 60px rgba(0,0,0,.45),
      inset 0 1px 0 rgba(255,255,255,.20),
      inset 0 -1px 0 rgba(255,255,255,.055);
    opacity:0;
    transform:translateY(16px) scale(.985);
    pointer-events:none;
    transition:opacity .5s var(--ease), transform .5s var(--ease);
  }
  .phase.is-current{
    opacity:1;
    transform:none;
    pointer-events:auto;
    backdrop-filter:blur(24px) saturate(170%) brightness(1.07);
    -webkit-backdrop-filter:blur(24px) saturate(170%) brightness(1.07);
  }
  .phase-body{
    display:flex;
    flex-direction:column;
    gap:clamp(7px,1.2vh,13px);
  }
  .phase-no{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(26px,4.2vh,42px);
    line-height:1;
    letter-spacing:-.03em;
    color:var(--accent);
    font-variant-numeric:tabular-nums;
  }
  .phase-no em{
    display:block;
    font-style:normal;
    font-size:.3em;
    font-weight:700;
    letter-spacing:.06em;
    color:var(--band-soft);
    margin-top:.5em;
  }
  .phase h3{font-size:clamp(19px,2.4vh,24px);font-weight:700;letter-spacing:-.02em;color:var(--band-ink);}
  .phase p{
    font-size:clamp(14.5px,1.9vh,16.5px);
    color:var(--band-soft);
    max-width:66ch;
  }

  /* de golvende rail */
  .proc-rail{position:relative;flex:none;}
  .rail-svg{
    display:block;
    width:100%;
    height:clamp(48px,8vh,84px);
    overflow:visible;
  }
  .rail-track{fill:none;stroke:var(--band-line);stroke-width:2;stroke-linecap:round;}
  .rail-live{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;}
  .rail-dot{
    fill:var(--band-bg);
    stroke:var(--band-line);
    stroke-width:1.5;
    transition:fill .35s var(--ease), stroke .35s var(--ease), r .35s var(--ease);
  }
  .rail-dot.is-done{fill:var(--accent);stroke:var(--accent);}
  .rail-glow{fill:color-mix(in srgb,var(--accent) 26%,transparent);opacity:0;}
  .rail-head{fill:var(--accent);opacity:0;}
  .rail-labels{position:relative;height:20px;margin-top:2px;}
  .rail-label{
    position:absolute;
    top:0;
    transform:translateX(-50%);
    white-space:nowrap;
    font-family:var(--font-display);
    font-size:11px;
    font-weight:600;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--band-soft);
    opacity:.6;
    transition:color .3s var(--ease), opacity .3s var(--ease);
  }
  .rail-label.is-current{color:var(--accent);opacity:1;}

  .stage-note{
    flex:none;
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:4px 18px;
    padding-top:clamp(14px,2.2vh,26px);
    border-top:1px solid var(--band-line);
  }
  .stage-note h4{
    font-family:var(--font-display);
    font-weight:700;
    font-size:11px;
    letter-spacing:.11em;
    text-transform:uppercase;
    color:var(--band-ink);
    opacity:.72;
    flex:none;
  }
  .stage-note p{
    font-size:14.5px;
    color:var(--band-soft);
    max-width:80ch;
  }

  /* mobiel, geen vastzetten maar gewoon onder elkaar */
  @media (max-width:860px){
    .pin{height:auto;}
    /* de overloop naar de vorige en volgende sectie is hier korter, en de
       inhoud begint eronder zodat kop en voetnoot niet vervagen */
    .werkwijze::before,
    .werkwijze::after{height:88px;}
    .pin-inner{
      position:static;
      height:auto;
      display:block;
      overflow:visible;
      padding-block:clamp(96px,14vw,150px);
    }
    .phases{
      min-height:0;
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .phase{
      position:static;
      opacity:1;
      transform:none;
      pointer-events:auto;
      grid-template-columns:minmax(0,1fr);
      row-gap:10px;
      align-items:start;
    }
    .phase-no{font-size:34px;}
    .phase-no em{display:inline;font-size:.4em;margin:0 0 0 .3em;}
    .proc-rail{display:none;}
    .stage{max-height:none;margin-block:0;}
    .track-set{display:block;}
    .phases{flex:none;}
    .stage-note{margin-top:22px;padding-top:18px;}
  }
  /* ---------- aanbevelingen ---------- */
  #aanbevelingen{padding-block:clamp(74px,8vw,112px);}
  .aanb-kader{
    font-family:var(--font-display);
    font-weight:600;
    font-size:14px;
    letter-spacing:-.01em;
    color:var(--ink-soft);
    max-width:30ch;
  }

  /* de baan loopt over de volle breedte, net als de vacaturecarousel */
  .aanb-rail{
    position:relative;
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    margin-top:38px;
    touch-action:pan-y;
  }
  /* het masker zit op de binnenkant, zodat de pijltjes aan de randen wel
     vol in beeld blijven */
  .aanb-venster{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 92px,
      #000 calc(100% - 92px),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 92px,
      #000 calc(100% - 92px),transparent 100%);
  }
  .aanb-spoor{
    display:flex;
    gap:16px;
    width:max-content;
    padding-block:4px;
    will-change:transform;
  }
  .aanb-rail.is-sleep{cursor:grabbing;}
  .aanb-rail.is-sleep .aanb{cursor:grabbing;}

  /* De pijltjes aan de randen. Ze verschijnen zodra je met de muis in de
     baan komt en laten zien waar je terug of vooruit kunt spoelen. */
  .aanb-hint{
    position:absolute;
    top:50%;
    width:36px;
    height:36px;
    margin-top:-18px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:var(--ink);
    background:rgba(16,20,18,.5);
    -webkit-backdrop-filter:blur(10px) saturate(150%);
    backdrop-filter:blur(10px) saturate(150%);
    border:1px solid rgba(233,237,234,.16);
    pointer-events:none;
    opacity:0;
    transform:scale(.86);
    transition:opacity .2s var(--ease), transform .2s var(--ease),
      background-color .2s var(--ease);
    z-index:3;
  }
  .aanb-hint svg{width:17px;height:17px;display:block;}
  .aanb-hint-links{left:20px;}
  .aanb-hint-rechts{right:20px;}
  .aanb-rail.is-wijs .aanb-hint{opacity:.5;transform:scale(1);}
  .aanb-rail.is-wijs .aanb-hint.is-aan{
    opacity:1;
    background:rgba(16,20,18,.72);
    border-color:rgba(233,237,234,.3);
  }
  @media (hover:none){
    .aanb-hint{display:none;}
  }

  .aanb{
    flex:0 0 clamp(268px,25vw,320px);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    margin:0;
    text-align:left;
    border:1px solid var(--line);
    border-radius:4px;
    background:var(--paper-2);
    padding:22px 20px 18px;
    position:relative;
    transition:border-color .2s var(--ease), transform .2s var(--ease);
  }
  .aanb.is-meer{cursor:pointer;font:inherit;color:inherit;}
  .aanb.is-meer:hover{border-color:var(--ink-soft);transform:translateY(-3px);}
  .aanb.is-meer:hover .aanb-lees{color:var(--accent);}
  .aanb::before{
    content:"\201C";
    font-family:var(--font-display);
    font-weight:800;
    font-size:38px;
    line-height:.7;
    color:var(--accent);
    opacity:.55;
  }
  .aanb-kort{
    font-family:var(--font-display);
    font-weight:500;
    font-size:16.5px;
    line-height:1.42;
    letter-spacing:-.012em;
    color:var(--ink);
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .aanb-lees{
    font-family:var(--font-display);
    font-weight:600;
    font-size:13.5px;
    color:var(--ink-soft);
    margin-top:-4px;
    transition:color .16s var(--ease);
  }
  .aanb-wie{
    display:flex;
    align-items:center;
    gap:11px;
    margin-top:auto;
    padding-top:15px;
    border-top:1px solid var(--line-soft);
  }
  .aanb-ini{
    width:34px;height:34px;
    flex:none;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--band-bg);
    border:1px solid var(--line);
    font-family:var(--font-display);
    font-weight:700;
    font-size:12.5px;
    color:var(--brand);
  }
  .aanb-naam{
    display:flex;
    flex-direction:column;
    font-size:13px;
    line-height:1.35;
    color:var(--ink-soft);
    min-width:0;
    text-align:left;
  }
  .aanb-naam b{
    font-family:var(--font-display);
    font-weight:700;
    font-size:14px;
    letter-spacing:-.012em;
    color:var(--ink);
  }

  /* het glazen paneel, zelfde behandeling als de functiebubbels */
  .aanb-paneel{
    position:fixed;
    inset:0;
    z-index:80;
    display:grid;
    place-items:center;
    padding:var(--gutter);
  }
  .aanb-paneel[hidden]{display:none;}
  .aanb-scherm{
    position:absolute;
    inset:0;
    background:rgba(8,11,10,.66);
    opacity:0;
    transition:opacity .28s var(--ease);
  }
  body.aanb-open .aanb-scherm{opacity:1;}
  .aanb-glas{
    position:relative;
    width:min(520px,100%);
    margin:0;
    border-radius:22px;
    border:1px solid var(--glass-edge);
    background:linear-gradient(148deg,
      rgba(233,237,234,.17) 0%,
      rgba(233,237,234,.055) 48%,
      rgba(233,237,234,.10) 100%);
    backdrop-filter:blur(26px) saturate(170%) brightness(1.07);
    -webkit-backdrop-filter:blur(26px) saturate(170%) brightness(1.07);
    box-shadow:
      0 28px 64px rgba(0,0,0,.5),
      inset 0 1px 0 rgba(255,255,255,.22),
      inset 0 -1px 0 rgba(255,255,255,.06);
    padding:30px 30px 26px;
    display:flex;
    flex-direction:column;
    gap:20px;
    opacity:0;
    transform:translateY(12px) scale(.96);
    transition:opacity .28s var(--ease), transform .34s var(--ease);
  }
  body.aanb-open .aanb-glas{opacity:1;transform:none;}
  .aanb-glas blockquote{margin:0;position:relative;padding-top:24px;}
  .aanb-glas blockquote::before{
    content:"\201C";
    position:absolute;
    top:-8px;left:-2px;
    font-family:var(--font-display);
    font-weight:800;
    font-size:48px;
    line-height:1;
    color:var(--accent);
    opacity:.6;
  }
  .aanb-glas p{
    font-family:var(--font-display);
    font-weight:500;
    font-size:clamp(16.5px,1.7vw,18.5px);
    line-height:1.46;
    letter-spacing:-.012em;
    color:var(--ink);
  }
  .aanb-glas figcaption{
    display:flex;
    align-items:center;
    gap:12px;
    padding-top:18px;
    border-top:1px solid var(--glass-edge);
  }
  .aanb-glas .aanb-ini{
    background:rgba(8,11,10,.4);
    border-color:var(--glass-edge);
  }
  .aanb-sluit{
    position:absolute;
    top:12px;right:14px;
    width:36px;height:36px;
    display:grid;
    place-items:center;
    font-size:26px;
    line-height:1;
    color:var(--ink);
    background:transparent;
    border:0;
    border-radius:50%;
    cursor:pointer;
    opacity:.65;
    transition:opacity .16s var(--ease), background-color .16s var(--ease);
  }
  .aanb-sluit:hover{opacity:1;background:rgba(233,237,234,.1);}

  .aanb-voet{
    margin-top:32px;
    font-size:14.5px;
    color:var(--ink-soft);
  }
  .aanb-voet a{
    color:var(--ink);
    text-decoration-color:var(--accent);
    text-underline-offset:3px;
    text-decoration-thickness:1.5px;
  }
  .aanb-voet a:hover{color:var(--accent);}

  @media (max-width:620px){
    .aanb-venster{
      -webkit-mask-image:linear-gradient(to right,transparent 0,#000 34px,
        #000 calc(100% - 34px),transparent 100%);
      mask-image:linear-gradient(to right,transparent 0,#000 34px,
        #000 calc(100% - 34px),transparent 100%);
    }
    .aanb-glas{padding:26px 22px 22px;border-radius:18px;}
  }
  @media (prefers-reduced-motion: reduce){
    .aanb-venster{
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      -webkit-mask-image:none;
      mask-image:none;
    }
    .aanb-hint{display:none;}
  }

  /* ---------- contact ---------- */
  .contact{padding-block:clamp(80px,8.4vw,110px) clamp(84px,8.8vw,116px);}
  .band.contact::after{display:none;}
  .contact h2{font-size:clamp(30px,4vw,48px);max-width:16ch;}
  .contact .eyebrow{color:var(--brand);}
  .contact-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      "intro form"
      "chan  form";
    gap:0 clamp(30px,5vw,64px);
    align-items:start;
    align-content:start;
    margin-top:30px;
  }
  .contact-intro{grid-area:intro;}
  .contact-grid .form-slot{grid-area:form;}
  .contact-grid .channels{grid-area:chan;}
  .contact-lead{color:var(--band-soft);max-width:44ch;margin-top:18px;}
  .channels{
    list-style:none;
    margin:28px 0 0;
    padding:0;
    border-top:1px solid var(--band-line);
  }
  .channels a{
    display:flex;
    align-items:center;
    gap:14px;
    padding:15px 2px;
    border-bottom:1px solid var(--band-line);
    text-decoration:none;
  }
  .channels a:hover .ch-value{color:var(--accent);}
  .ch-label{
    font-family:var(--font-display);
    font-size:12px;
    font-weight:600;
    letter-spacing:.11em;
    text-transform:uppercase;
    color:var(--band-soft);
    width:92px;
    flex:none;
  }
  .ch-value{
    font-family:var(--font-display);
    font-weight:700;
    font-size:19px;
    letter-spacing:-.015em;
    transition:color .16s var(--ease);
  }
  .form-slot{
    border:1px solid var(--band-line);
    border-radius:3px;
    padding:26px 24px;
    background:var(--band-raise);
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .form-slot h3{font-size:22px;}
  .form-slot p{color:var(--band-soft);font-size:15.5px;}

  /* ---------- open sollicitatie ---------- */
  .open-form{display:flex;flex-direction:column;gap:16px;}
  .form-fields{display:flex;flex-direction:column;gap:9px;}
  .vh{
    position:absolute;
    width:1px;height:1px;
    margin:-1px;padding:0;border:0;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .form-fields input,
  .form-fields textarea{
    width:100%;
    font-family:var(--font-body);
    font-size:15px;
    line-height:1.4;
    color:var(--band-ink);
    background:transparent;
    border:1px solid var(--band-line);
    border-radius:2px;
    padding:11px 13px;
    transition:border-color .16s var(--ease);
    -webkit-appearance:none;
    appearance:none;
  }
  .form-fields input{height:42px;}
  .form-fields textarea{min-height:78px;resize:vertical;}
  .form-fields input::placeholder,
  .form-fields textarea::placeholder{color:var(--band-soft);opacity:1;}
  .form-fields input:hover,
  .form-fields textarea:hover{border-color:rgba(233,237,234,.26);}
  .form-fields input:focus,
  .form-fields textarea:focus{border-color:var(--brand);}
  .form-fields input[aria-invalid="true"],
  .form-fields textarea[aria-invalid="true"]{border-color:var(--accent);}
  .form-note{
    font-size:13px;
    color:var(--band-soft);
    margin-top:-4px;
  }
  .field-error{
    font-size:13px;
    line-height:1.35;
    color:var(--accent);
    margin:-5px 0 2px;
  }
  .field-error[hidden]{display:none;}
  .honing-veld{
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .form-slot .btn{align-self:flex-start;}
  .form-switch{
    background:transparent;
    align-self:flex-start;
    max-width:100%;
    margin-bottom:-2px;
  }
  .form-switch button{font-size:14.5px;padding:8px 15px;}
  @media (max-width:440px){
    .form-switch{width:100%;}
    .form-switch button{flex:1 1 0;padding-inline:8px;}
  }
  .form-status{
    font-size:14.5px;
    line-height:1.45;
    color:var(--band-ink);
    border-left:2px solid var(--brand);
    padding-left:13px;
  }
  .form-status.is-error{border-left-color:var(--accent);}
  @media (max-width:880px){
    /* op mobiel eerst de uitnodiging, dan het formulier, dan de gegevens */
    .contact-grid{
      grid-template-columns:1fr;
      grid-template-areas:"intro" "chan" "form";
    }
    .contact-grid .form-slot{margin-top:26px;}
    .contact-grid .channels{margin-top:26px;}
  }

  /* ---------- footer ---------- */
  .site-footer{
    border-top:2px solid var(--accent);
    padding-block:34px 40px;
    font-size:14.5px;
    color:var(--ink-soft);
  }
  .footer-inner{
    display:flex;
    flex-wrap:wrap;
    gap:16px 32px;
    align-items:center;
    justify-content:space-between;
  }
  .footer-links{display:flex;flex-wrap:wrap;gap:20px;}
  .footer-links a{text-decoration:none;}
  .footer-links a:hover{color:var(--ink);}

  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{transition-duration:.01ms !important;animation-duration:.01ms !important;}
    .btn:hover,.job:hover{transform:none;}
    .reveal.is-pre{opacity:1;transform:none;}
    .reveal-group.is-pre .reveal-item{opacity:1;transform:none;}
    .mask.is-pre .mask-inner{transform:none;opacity:1;}
    .track{scroll-behavior:auto;}
  }

  /* ============================================================
     VACATUREPAGINA'S
     ============================================================ */

  /* ---------- pagina-kop ---------- */
  .page-head{padding-block:clamp(40px,6vw,72px) clamp(26px,3.4vw,40px);}
  .page-head h1{font-size:clamp(34px,5vw,56px);}
  .page-head .eyebrow{margin-bottom:14px;}
  .page-lead{
    color:var(--ink-soft);
    font-size:clamp(17px,1.5vw,19.5px);
    max-width:56ch;
    margin-top:20px;
  }

  /* ---------- filters ---------- */
  .filters{
    display:flex;
    flex-wrap:wrap;
    gap:22px 40px;
    align-items:flex-start;
    padding-block:26px;
    border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line-soft);
  }
  .filter-group{display:flex;flex-direction:column;gap:11px;min-width:0;}
  .filter-label{
    font-family:var(--font-display);
    font-weight:600;
    font-size:11.5px;
    letter-spacing:.13em;
    text-transform:uppercase;
    color:var(--ink-soft);
  }
  .filter-pills{display:flex;flex-wrap:wrap;gap:8px;}
  .filter-pill{
    font-family:var(--font-display);
    font-weight:600;
    font-size:14.5px;
    letter-spacing:-.01em;
    color:var(--ink-soft);
    background:transparent;
    border:1px solid var(--line);
    border-radius:999px;
    padding:8px 15px;
    cursor:pointer;
    white-space:nowrap;
    transition:color .16s var(--ease), border-color .16s var(--ease), background-color .16s var(--ease);
  }
  .filter-pill:hover{color:var(--ink);border-color:var(--ink-soft);}
  .filter-pill[aria-pressed="true"]{
    background:var(--ink);
    border-color:var(--ink);
    color:var(--paper);
  }
  .filter-meta{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:22px;
    font-size:14.5px;
    color:var(--ink-soft);
  }
  .filter-reset{
    font-family:var(--font-display);
    font-weight:600;
    font-size:14px;
    color:var(--ink-soft);
    background:none;
    border:0;
    border-bottom:1px solid var(--line);
    padding:2px 0;
    cursor:pointer;
    transition:color .16s var(--ease), border-color .16s var(--ease);
  }
  .filter-reset:hover{color:var(--accent);border-color:var(--accent);}
  .filter-reset[hidden]{display:none;}

  /* ---------- vacaturelijst ---------- */
  .vac-list{
    display:flex;
    flex-direction:column;
    gap:0;
    margin-top:8px;
  }
  .vac-card{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:20px 34px;
    padding-block:clamp(24px,3vw,32px);
    border-bottom:1px solid var(--line-soft);
    text-decoration:none;
    color:inherit;
    transition:border-color .18s var(--ease);
  }
  .vac-card:hover{border-bottom-color:var(--ink-soft);}
  .vac-card:hover .vac-title{color:var(--brand);}
  .vac-card[hidden]{display:none;}
  .vac-main{display:flex;flex-direction:column;gap:11px;min-width:0;}
  .vac-sector{
    font-family:var(--font-display);
    font-size:12px;
    font-weight:600;
    letter-spacing:.11em;
    text-transform:uppercase;
    color:var(--brand);
  }
  .vac-title{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(22px,2.6vw,29px);
    letter-spacing:-.02em;
    line-height:1.12;
    margin:0;
    transition:color .18s var(--ease);
  }
  .vac-teaser{
    color:var(--ink-soft);
    font-size:16px;
    max-width:62ch;
  }
  .vac-tags{
    list-style:none;
    margin:0;padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  .vac-tags li{
    font-size:13.5px;
    color:var(--ink-soft);
    border:1px solid var(--line);
    border-radius:2px;
    padding:3px 8px;
  }
  .vac-side{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:12px;
    text-align:right;
    flex:none;
  }
  .vac-salary{
    font-family:var(--font-display);
    font-weight:700;
    font-size:18px;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }
  .vac-salary small{
    display:block;
    font-family:var(--font-body);
    font-weight:400;
    font-size:13px;
    color:var(--ink-soft);
  }
  .vac-go{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-display);
    font-weight:600;
    font-size:15px;
    color:var(--ink);
    white-space:nowrap;
  }
  .vac-go svg{width:15px;height:15px;transition:transform .2s var(--ease);}
  .vac-card:hover .vac-go svg{transform:translateX(4px);}

  .vac-empty{
    padding-block:60px;
    color:var(--ink-soft);
    text-align:center;
  }
  .vac-empty[hidden]{display:none;}
  .vac-empty strong{
    display:block;
    font-family:var(--font-display);
    font-weight:700;
    font-size:21px;
    color:var(--ink);
    margin-bottom:8px;
    letter-spacing:-.015em;
  }

  @media (max-width:720px){
    .vac-card{grid-template-columns:1fr;align-items:start;gap:14px;}
    .vac-side{align-items:flex-start;text-align:left;flex-direction:row;
      justify-content:space-between;width:100%;align-items:center;}
  }

  /* ---------- kruimelpad ---------- */
  .crumb{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-display);
    font-weight:600;
    font-size:14.5px;
    color:var(--ink-soft);
    text-decoration:none;
    padding-top:clamp(26px,4vw,44px);
    transition:color .16s var(--ease);
  }
  .crumb:hover{color:var(--ink);}
  .crumb svg{width:15px;height:15px;transition:transform .2s var(--ease);}
  .crumb:hover svg{transform:translateX(-4px);}

  /* ---------- vacature, kop ---------- */
  .vac-hero{padding-block:clamp(22px,3vw,34px) clamp(30px,4vw,48px);}
  .vac-hero h1{font-size:clamp(30px,4.4vw,50px);margin-block:14px 0;}
  .vac-facts{
    list-style:none;
    margin:26px 0 0;padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
  }
  .vac-facts li{
    font-size:14.5px;
    color:var(--ink-soft);
    border:1px solid var(--line);
    border-radius:2px;
    padding:6px 11px;
  }
  .vac-facts li.accent{
    color:var(--ink);
    border-color:var(--line);
    font-family:var(--font-display);
    font-weight:700;
    font-variant-numeric:tabular-nums;
  }

  /* ---------- vacature, inhoud ---------- */
  .vac-body{
    display:grid;
    grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);
    gap:clamp(30px,5vw,64px);
    align-items:start;
    padding-bottom:clamp(50px,7vw,86px);
  }
  .vac-content{display:flex;flex-direction:column;gap:30px;}
  .vac-content h2{
    font-size:clamp(20px,2.2vw,25px);
    margin-bottom:12px;
  }
  .vac-content p{color:var(--ink-soft);max-width:64ch;}
  .vac-content p + p{margin-top:12px;}
  .vac-content ul{
    list-style:none;
    margin:0;padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
    max-width:64ch;
  }
  .vac-content ul li{
    position:relative;
    padding-left:22px;
    color:var(--ink-soft);
  }
  .vac-content ul li::before{
    content:"";
    position:absolute;
    left:0;top:.66em;
    width:7px;height:2px;
    background:var(--accent);
  }

  .vac-aside{
    position:sticky;
    top:104px;
    display:flex;
    flex-direction:column;
    gap:16px;
    border:1px solid var(--line);
    border-radius:4px;
    background:var(--paper-2);
    padding:24px 22px;
  }
  .vac-aside h2{font-size:19px;}
  .fact-list{
    list-style:none;
    margin:0;padding:0;
    display:flex;
    flex-direction:column;
  }
  .fact-list li{
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:11px 0;
    border-bottom:1px solid var(--line-soft);
    font-size:15px;
  }
  .fact-list li:last-child{border-bottom:0;}
  .fact-list dt,.fact-list .k{color:var(--ink-soft);flex:none;}
  .fact-list .v{
    font-family:var(--font-display);
    font-weight:600;
    text-align:right;
    letter-spacing:-.01em;
  }
  .vac-aside .btn{justify-content:center;}
  .aside-or{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    font-size:14px;
    color:var(--ink-soft);
    text-align:center;
    margin-top:-2px;
  }
  .aside-or a{
    font-family:var(--font-display);
    font-weight:700;
    font-size:17px;
    letter-spacing:-.015em;
    color:var(--ink);
    text-decoration:none;
    font-variant-numeric:tabular-nums;
    transition:color .16s var(--ease);
  }
  .aside-or a:hover{color:var(--accent);}
  .aside-channels{
    list-style:none;
    margin:0;padding:0;
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .aside-channels a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:9px 0;
    text-decoration:none;
    font-size:15px;
    color:var(--ink-soft);
    border-bottom:1px solid var(--line-soft);
    transition:color .16s var(--ease);
  }
  .aside-channels li:last-child a{border-bottom:0;}
  .aside-channels a:hover{color:var(--accent);}
  .aside-channels b{
    font-family:var(--font-display);
    font-weight:600;
    color:var(--ink);
    letter-spacing:-.01em;
  }
  .aside-channels a:hover b{color:var(--accent);}

  @media (max-width:880px){
    .vac-body{grid-template-columns:1fr;}
    .vac-aside{position:static;}
  }

  /* ---------- solliciteren onderaan de vacature ---------- */
  .apply{padding-block:clamp(60px,8vw,96px);}
  .apply .contact-grid{margin-top:26px;}
  .apply h2{font-size:clamp(26px,3.4vw,40px);}
  .apply .contact-lead{max-width:46ch;}
  .vac-picked{
    display:flex;
    align-items:baseline;
    gap:10px;
    flex-wrap:wrap;
    font-size:14.5px;
    color:var(--band-soft);
    border-left:2px solid var(--accent);
    padding-left:13px;
    margin-bottom:2px;
  }
  .vac-picked b{
    font-family:var(--font-display);
    font-weight:700;
    color:var(--band-ink);
    letter-spacing:-.01em;
  }

  /* ---------- keuze kandidaat of werkgever in het formulier ---------- */
  .form-switch{
    background:transparent;
    align-self:flex-start;
    max-width:100%;
    margin-bottom:-2px;
  }
  .form-switch button{font-size:14.5px;padding:8px 15px;}
  @media (max-width:440px){
    .form-switch{width:100%;}
    .form-switch button{flex:1 1 0;padding-inline:8px;}
  }

  /* ---------- filters in een zijkolom ---------- */
  .vac-layout{
    display:grid;
    grid-template-columns:248px minmax(0,1fr);
    gap:clamp(30px,4.5vw,58px);
    align-items:start;
    padding-bottom:clamp(20px,3vw,34px);
  }
  .vac-filters{
    position:sticky;
    top:104px;
    display:flex;
    flex-direction:column;
    gap:30px;
    padding-top:4px;
  }
  .vac-filters .filter-group{gap:10px;}
  .filter-panel{display:flex;flex-direction:column;gap:30px;}
  .filter-rows{display:flex;flex-direction:column;gap:1px;}
  .filter-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    width:100%;
    font-family:var(--font-display);
    font-weight:600;
    font-size:14.5px;
    letter-spacing:-.01em;
    text-align:left;
    color:var(--ink-soft);
    background:transparent;
    border:0;
    border-radius:3px;
    padding:8px 10px;
    margin-inline:-10px;
    cursor:pointer;
    transition:color .15s var(--ease), background-color .15s var(--ease);
  }
  .filter-row:hover{color:var(--ink);background:var(--paper-2);}
  .filter-row[aria-pressed="true"]{color:var(--ink);background:var(--paper-2);}
  .filter-row .tel{
    font-family:var(--font-body);
    font-weight:400;
    font-size:13.5px;
    line-height:1.3;
    color:var(--ink-soft);
    opacity:.7;
    flex:none;
  }
  .filter-row[aria-pressed="true"] .tel{opacity:1;}
  .filter-row.is-leeg{opacity:.4;}
  .filter-row .dot{
    width:7px;height:7px;
    margin-top:.34em;
    border-radius:50%;
    background:var(--accent);
    flex:none;
    opacity:0;
    transition:opacity .15s var(--ease);
  }
  .filter-row[aria-pressed="true"] .dot{opacity:1;}
  .filter-row .naam{
    display:flex;
    align-items:baseline;
    gap:9px;
    min-width:0;
    line-height:1.3;
  }
  .vac-toolbar{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    padding-bottom:16px;
    border-bottom:1px solid var(--line-soft);
    font-size:14.5px;
    color:var(--ink-soft);
  }
  .filters-toggle{display:none;}

  @media (max-width:880px){
    .vac-layout{grid-template-columns:1fr;gap:0;}
    .vac-filters{
      position:static;
      gap:0;
      border-top:1px solid var(--line-soft);
      border-bottom:1px solid var(--line-soft);
      margin-bottom:20px;
      padding-top:0;
    }
    .filters-toggle{
      display:flex;
      align-items:center;
      justify-content:space-between;
      width:100%;
      gap:12px;
      font-family:var(--font-display);
      font-weight:600;
      font-size:15.5px;
      color:var(--ink);
      background:transparent;
      border:0;
      padding:17px 0;
      cursor:pointer;
    }
    .filters-toggle .telop{
      font-family:var(--font-body);
      font-weight:400;
      font-size:14px;
      color:var(--ink-soft);
      margin-left:auto;
    }
    .filters-toggle svg{
      width:16px;height:16px;
      flex:none;
      transition:transform .26s var(--ease);
    }
    .vac-filters.is-open .filters-toggle svg{transform:rotate(180deg);}
    .filter-panel{
      gap:22px;
      overflow:hidden;
      max-height:0;
      opacity:0;
      visibility:hidden;
      transition:max-height .3s var(--ease), opacity .2s linear,
                 visibility 0s linear .3s, padding-bottom .3s var(--ease);
    }
    .vac-filters.is-open .filter-panel{
      max-height:760px;
      opacity:1;
      visibility:visible;
      padding-bottom:22px;
      transition:max-height .3s var(--ease), opacity .2s linear,
                 visibility 0s, padding-bottom .3s var(--ease);
    }
  }

  /* ---------- cv toevoegen ---------- */
  .file-field{position:relative;}
  .file-drop{
    display:flex;
    align-items:center;
    gap:12px;
    width:100%;
    min-height:54px;
    padding:12px 14px;
    border:1px dashed var(--band-line);
    border-radius:2px;
    cursor:pointer;
    color:var(--band-soft);
    font-size:15px;
    line-height:1.3;
    transition:border-color .16s var(--ease), color .16s var(--ease);
  }
  .file-drop:hover{border-color:rgba(233,237,234,.30);color:var(--band-ink);}
  .file-drop svg{width:19px;height:19px;flex:none;}
  .file-text{min-width:0;}
  .file-text small{
    display:block;
    font-size:12.5px;
    color:var(--band-soft);
    margin-top:2px;
  }
  .file-field input:focus-visible + .file-drop{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }
  .file-field.is-set .file-drop{
    border-style:solid;
    border-color:var(--brand);
    color:var(--band-ink);
    padding-right:46px;
  }
  .file-field.is-set .file-text{
    font-family:var(--font-display);
    font-weight:600;
    letter-spacing:-.01em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .file-field.is-set .file-text small{
    font-family:var(--font-body);
    font-weight:400;
    letter-spacing:0;
  }
  .file-field.is-fout .file-drop{border-style:solid;border-color:var(--accent);}
  .file-clear{
    position:absolute;
    right:9px;
    top:50%;
    transform:translateY(-50%);
    width:28px;height:28px;
    display:grid;
    place-items:center;
    font-size:21px;
    line-height:1;
    color:var(--band-soft);
    background:transparent;
    border:0;
    border-radius:50%;
    cursor:pointer;
    transition:color .16s var(--ease), background-color .16s var(--ease);
  }
  .file-clear:hover{color:var(--accent);background:var(--band-raise);}
  .file-clear[hidden]{display:none;}

  /* ---------- lopende tekst, zoals de privacyverklaring ---------- */
  .prose{
    max-width:72ch;
    padding-bottom:clamp(60px,8vw,100px);
  }
  .prose h2{
    font-size:clamp(21px,2.3vw,27px);
    margin-top:clamp(38px,4.6vw,58px);
    scroll-margin-top:100px;
  }
  .prose h3{
    font-size:clamp(17px,1.7vw,19px);
    margin-top:26px;
    color:var(--brand);
  }
  .prose p{
    color:var(--ink-soft);
    margin-top:13px;
  }
  .prose ul{
    list-style:none;
    margin:14px 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:9px;
  }
  .prose ul li{
    position:relative;
    padding-left:22px;
    color:var(--ink-soft);
  }
  .prose ul li::before{
    content:"";
    position:absolute;
    left:0;top:.66em;
    width:7px;height:2px;
    background:var(--accent);
  }
  .prose a{
    color:var(--ink);
    text-decoration-color:var(--accent);
    text-underline-offset:3px;
    text-decoration-thickness:1.5px;
  }
  .prose a:hover{color:var(--accent);}
  .prose strong{color:var(--ink);font-weight:inherit;}
  .prose .kader{
    border:1px solid var(--line);
    border-left:2px solid var(--brand);
    border-radius:3px;
    background:var(--paper-2);
    padding:20px 22px;
    margin-top:22px;
  }
  .prose .kader p:first-child{margin-top:0;}
  .prose .datum{
    font-family:var(--font-display);
    font-size:13px;
    font-weight:600;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-top:clamp(38px,5vw,60px);
    padding-top:20px;
    border-top:1px solid var(--line-soft);
  }
  .prose dl{margin:16px 0 0;}
  .prose dt{
    font-family:var(--font-display);
    font-weight:700;
    letter-spacing:-.01em;
    color:var(--ink);
    margin-top:16px;
  }
  .prose dd{margin:5px 0 0;color:var(--ink-soft);}

  /* het onzichtbare veld dat bots invullen en mensen nooit zien */
  .honing-veld{
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }

  /* ================= werkgeverspagina ================= */
  .wg-head .page-lead{max-width:50ch;}
  .wg-cta{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-top:30px;
  }

  /* het vertrekpunt, gewoon lopende tekst */
  .wg-intro{
    padding-block:clamp(34px,4.6vw,58px);
    border-top:1px solid var(--line-soft);
  }
  .wg-intro-grid{
    display:grid;
    grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
    gap:18px clamp(28px,5vw,64px);
    align-items:start;
  }
  .wg-intro h2{font-size:clamp(23px,2.6vw,31px);max-width:16ch;}
  .wg-intro-copy{display:flex;flex-direction:column;gap:18px;}
  .wg-intro-copy p{color:var(--ink-soft);max-width:60ch;}
  .wg-intro-copy p:first-child{color:var(--ink);font-size:19px;}

  /* de vier pijlers */
  .pijlers{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:1px;
    margin-top:34px;
    background:var(--band-line);
    border:1px solid var(--band-line);
    border-radius:3px;
    overflow:hidden;
  }
  .pijler{
    background:var(--band-bg);
    padding:26px 24px 28px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .pijler h3{
    font-size:19px;
    font-weight:700;
    letter-spacing:-.018em;
    color:var(--band-ink);
  }
  .pijler p{font-size:15.5px;color:var(--band-soft);}
  .pijler-no{
    font-family:var(--font-display);
    font-weight:700;
    font-size:12px;
    letter-spacing:.11em;
    color:var(--accent);
  }

  /* de functietitels */
  .rollen{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:28px;
    padding:0;
    list-style:none;
  }
  .rollen li{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(15px,1.6vw,18px);
    letter-spacing:-.012em;
    border:1px solid var(--line);
    border-radius:999px;
    padding:10px 19px;
    color:var(--ink);
  }
  .rollen-noot{
    margin-top:24px;
    font-size:15.5px;
    color:var(--ink-soft);
    max-width:56ch;
  }
  .rollen-noot a{
    color:var(--ink);
    text-decoration-color:var(--accent);
    text-underline-offset:3px;
    text-decoration-thickness:1.5px;
  }
  .rollen-noot a:hover{color:var(--accent);}

  /* de zes stappen, hier statisch onder elkaar in plaats van vastgezet */
  .fasen{
    list-style:none;
    margin:34px 0 0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
    gap:16px;
  }
  .fase{
    border:1px solid var(--line);
    border-radius:4px;
    background:var(--paper-2);
    padding:24px 22px 22px;
    display:flex;
    flex-direction:column;
    gap:9px;
  }
  .fase-no{
    font-family:var(--font-display);
    font-weight:800;
    font-size:15px;
    letter-spacing:-.02em;
    color:var(--accent);
    font-variant-numeric:tabular-nums;
  }
  .fase h3{font-size:19px;font-weight:700;letter-spacing:-.018em;}
  .fase p{font-size:15.5px;color:var(--ink-soft);}

  /* voor wie ik werk */
  .voorwie{
    list-style:none;
    margin:30px 0 0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
    gap:0 clamp(26px,4vw,52px);
  }
  .voorwie li{
    padding-block:20px;
    border-top:1px solid var(--line);
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .voorwie h3{
    font-size:17px;
    font-weight:700;
    letter-spacing:-.016em;
    color:var(--ink);
  }
  .voorwie p{font-size:15.5px;color:var(--ink-soft);}

  /* afspraken */
  .afspraak{
    margin-top:36px;
    border:1px solid var(--line);
    border-left:2px solid var(--brand);
    border-radius:3px;
    background:var(--paper-2);
    padding:24px 26px;
    display:flex;
    flex-direction:column;
    gap:10px;
    max-width:74ch;
  }
  .afspraak h3{font-size:18px;font-weight:700;letter-spacing:-.016em;}
  .afspraak p{font-size:15.5px;color:var(--ink-soft);}

  @media (max-width:820px){
    .wg-intro-grid{grid-template-columns:1fr;gap:16px;}
    .wg-intro h2{max-width:22ch;}
    .voorwie li:first-child{border-top:1px solid var(--line);}
  }
  @media (max-width:440px){
    .wg-cta{flex-direction:column;align-items:stretch;}
    .wg-cta .btn{justify-content:center;}
  }

  /* het label boven de sectie over zoeken */
  .wg-intro .eyebrow{margin-bottom:12px;}

  /* de functies, onderdeel van voor wie ik werk */
  .wg-functies{margin-top:clamp(36px,4.5vw,52px);}
  .wg-functies h3{
    font-size:clamp(19px,2vw,22px);
    font-weight:700;
    letter-spacing:-.018em;
  }
  .wg-functies .rollen{margin-top:18px;}

  /* wie je spreekt, foto met de aanbevelingen ernaast */
  /* De foto loopt van de bovenkant van het blok tot precies de bovenkant
     van de aanbevelingen, en schaalt mee met de tekst ernaast. */
  .wie-grid{
    display:grid;
    grid-template-columns:clamp(170px,17vw,210px) minmax(0,1fr);
    grid-template-areas:
      "foto tekst"
      ".    quotes";
    gap:0 clamp(28px,5vw,60px);
    align-items:start;
  }
  .wie-foto{grid-area:foto;align-self:stretch;position:relative;}
  .wie .portrait{
    position:absolute;
    top:0;bottom:0;left:0;
    height:100%;
    width:auto;
    max-width:100%;
    aspect-ratio:5/6;
    margin:0;
  }
  .wie .portrait-inner{inset:0;background-position:50% 100%;}
  .wie-tekst{
    grid-area:tekst;
    display:flex;
    flex-direction:column;
    gap:16px;
    padding-bottom:30px;
  }
  .wie-tekst .eyebrow{margin-bottom:12px;}
  .wie-tekst h2{font-size:clamp(28px,3.5vw,42px);}
  .wie-intro{color:var(--ink-soft);max-width:56ch;}
  .wie-link{
    align-self:flex-start;
    font-family:var(--font-display);
    font-weight:600;
    font-size:15px;
    color:var(--ink);
    text-decoration-color:var(--accent);
    text-underline-offset:3px;
    text-decoration-thickness:1.5px;
  }
  .wie-link:hover{color:var(--accent);}
  .wie-quotes{
    grid-area:quotes;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:16px;
  }
  .wie-quote{
    margin:0;
    border:1px solid var(--line);
    border-radius:4px;
    background:var(--paper-2);
    padding:22px 22px 18px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .wie-quote::before{
    content:"\201C";
    font-family:var(--font-display);
    font-weight:800;
    font-size:38px;
    line-height:.7;
    color:var(--accent);
    opacity:.55;
  }
  .wie-quote blockquote{margin:0;}
  .wie-quote blockquote p{
    font-family:var(--font-display);
    font-weight:500;
    font-size:16px;
    line-height:1.45;
    letter-spacing:-.012em;
    color:var(--ink);
  }
  .wie-quote figcaption{
    margin-top:auto;
    padding-top:14px;
    border-top:1px solid var(--line-soft);
    display:flex;
    flex-direction:column;
    font-size:13px;
    line-height:1.35;
    color:var(--ink-soft);
  }
  .wie-quote figcaption b{
    font-family:var(--font-display);
    font-weight:700;
    font-size:14px;
    letter-spacing:-.012em;
    color:var(--ink);
  }
  @media (max-width:720px){
    /* op mobiel een rond fotootje naast de kop, daaronder tekst en aanbevelingen */
    .wie-grid{
      grid-template-columns:auto minmax(0,1fr);
      grid-template-areas:
        "foto   kop"
        "intro  intro"
        "link   link"
        "quotes quotes";
      gap:16px 18px;
    }
    .wie-tekst{display:contents;}
    .wie-tekst > div{grid-area:kop;align-self:center;}
    .wie-intro{grid-area:intro;}
    .wie-link{grid-area:link;justify-self:start;}
    .wie-quotes{margin-top:14px;}
    .wie-foto{align-self:center;}
    .wie .portrait{
      position:relative;
      top:auto;bottom:auto;left:auto;
      width:88px;height:88px;
      max-width:none;
      aspect-ratio:1/1;
      border-radius:50%;
      margin:1px;
      /* een dun lijntje, net als de randen van de kaarten op de site */
      box-shadow:0 0 0 1px rgba(233,237,234,.16);
    }
    .wie .portrait-inner{background-size:133% auto;background-position:50% 20%;}
  }

  /* ---------- uitklaplijsten op mobiel ----------
     Werkwijze, service en samenwerking op de werkgeverspagina. Het script
     zet de klasse is-lijst en de knoppen alleen op kleine schermen. */
  .uk-knop{
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    padding:16px 18px;
    margin:0;
    background:none;
    border:0;
    border-radius:4px;
    color:inherit;
    font:inherit;
    letter-spacing:inherit;
    text-align:left;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .uk-knop[data-no]::before{
    content:attr(data-no);
    flex:none;
    min-width:2ch;
    font-weight:800;
    font-size:20px;
    letter-spacing:-.03em;
    color:var(--accent);
    font-variant-numeric:tabular-nums;
  }
  .uk-knop::after{
    content:"";
    flex:none;
    width:8px;height:8px;
    margin-left:auto;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    opacity:.55;
    transform:translateY(-2px) rotate(45deg);
    transition:transform .25s var(--ease);
  }
  .uk-knop[aria-expanded="true"]::after{transform:translateY(2px) rotate(225deg);}

  .fasen.is-lijst{gap:8px;}
  .fasen.is-lijst .fase{padding:0;gap:0;}
  .fasen.is-lijst .fase-no{display:none;}
  .fasen.is-lijst .fase h3{font-size:17px;}
  .fasen.is-lijst .fase p{padding:0 18px 18px calc(18px + 2ch + 22px);}

  .pijlers.is-lijst .pijler{padding:0;gap:0;}
  .pijlers.is-lijst .pijler-no{display:none;}
  .pijlers.is-lijst .pijler h3{font-size:17px;}
  .pijlers.is-lijst .pijler p{padding:0 18px 18px calc(18px + 2ch + 22px);}

  .voorwie.is-lijst{border-bottom:1px solid var(--line);}
  .voorwie.is-lijst li{padding-block:0;gap:0;}
  .voorwie.is-lijst .uk-knop{padding:16px 0;}
  .voorwie.is-lijst li p{padding-bottom:18px;}

  @media (max-width:620px){
    /* de functies net als op de homepage, gelijkmatig over de breedte */
    .rollen{gap:8px;}
    .rollen li{
      flex:1 1 auto;
      text-align:center;
      font-size:15px;
      padding:10px 16px;
      line-height:1.25;
    }
  }

  /* ---------- op een telefoon staat alles stil ----------
     De kop krimpt daar niet bij het scrollen, anders schuift de hele
     pagina een stukje extra mee omhoog. */
  @media (max-width:880px){
    .header-inner,
    .site-header.is-stuck .header-inner{min-height:62px;}
  }

  /* ---------- op een telefoon iets minder lucht tussen de secties ---------- */
  @media (max-width:620px){
    .section:not(.band){padding-block:44px;}
    .contact{padding-block:72px 64px;}
  }