/* =========================================================
   LinkLeader — gedeelde stylesheet
   Tokens uit linkleader-design-system.md, dark-first
   ========================================================= */

@font-face{
  font-family:'Univia Pro Ultra';
  src:url('fonts/UniviaPro-Ultra.woff2') format('woff2'),
      url('fonts/UniviaPro-Ultra.otf') format('opentype');
  font-weight:900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Univia Pro Black';
  src:url('fonts/UniviaPro-Black.woff2') format('woff2'),
      url('fonts/UniviaPro-Black.otf') format('opentype');
  font-weight:800;font-style:normal;font-display:swap;
}

:root{
  /* surface */
  --navy:#0a1837;
  --navy-deep:#060f26;
  --navy-lift:#0e1f45;

  /* Surface scale. One page colour across the whole site, with anything that
     should read as a card sitting a step above it. Cards used to be painted
     in the page colour, which only worked while some pages were lighter. */
  --surface-0:#060f26;  /* the page itself */
  --surface-1:#0b1a3d;  /* cards, panels, form fields */
  --surface-2:#12244d;  /* hover / stacked on top of a card */

  /* brand */
  --pink:#C1007C;
  --pink-soft:#E38CC4;
  --blue:#0073ff;
  --white:#ffffff;

  /* Per-service accent, one token pair per "...Link" product plus the
     staffing sector solution. Single source of truth: service-accents.css
     (page accent) and the .svc-card component (listing-page cards) both
     read from these instead of repeating hex values. FlowLink keeps the
     house magenta above; staffing takes the structural blue since it is a
     sector solution rather than one of the six "...Link" products. */
  --acc-flow:var(--pink);          --acc-flow-soft:var(--pink-soft);
  --acc-software:#00BE8A;          --acc-software-soft:#7FE3C6;
  --acc-mind:#7B4DFF;              --acc-mind-soft:#B9A2FF;
  --acc-data:#22D3EE;              --acc-data-soft:#8FE9F7;
  --acc-tech:#F0B429;              --acc-tech-soft:#F8D77E;
  --acc-growth:#FF5C39;            --acc-growth-soft:#FF9F8A;
  --acc-staffing:var(--blue);      --acc-staffing-soft:#7DB6FF;

  /* text */
  --muted:#93939f;
  --slate:#75758a;
  --t-80:rgba(255,255,255,.80);
  --t-70:rgba(255,255,255,.70);
  --t-62:rgba(255,255,255,.62);

  /* rules */
  --rule:rgba(255,255,255,.10);
  --rule-strong:rgba(255,255,255,.18);

  /* radius */
  --r-xs:4px; --r-sm:8px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:32px;

  /* layout */
  --shell:1180px;
  --gut:32px;
  /* One fluid vertical rhythm for the whole site. .band, .band--tight and
     .fl-section all derive from this instead of each carrying their own
     fixed step. */
  --pad-section:clamp(76px,9vw,128px);
  --band:var(--pad-section);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--surface-0);
  color:var(--white);
  font-family:'Plus Jakarta Sans',Inter,ui-sans-serif,system-ui,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit}
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gut)}

/* ---------------- typografie ---------------- */
.eyebrow{
  font-size:14px;font-weight:500;letter-spacing:.28px;text-transform:uppercase;
  color:var(--pink);margin:0 0 20px;
}
.eyebrow--blue{color:var(--blue)}
h1,h2,h3,h4{margin:0;font-weight:600}
.h-hero{font-size:clamp(44px,7vw,96px);line-height:1;letter-spacing:-1.92px;font-weight:700}
.h-product{font-size:clamp(40px,5.6vw,72px);line-height:1;letter-spacing:-1.44px;font-weight:700}
.h-section{font-size:clamp(32px,4vw,48px);line-height:1.1;letter-spacing:-.48px}
.h-card{font-size:clamp(22px,2.2vw,32px);line-height:1.2;letter-spacing:-.32px}
.h-feature{font-size:20px;line-height:1.3}
.lead{font-size:18px;line-height:1.55;color:var(--t-80)}
.body-muted{color:var(--t-62)}
.caption{font-size:14px;line-height:1.4;color:var(--muted)}
.micro{font-size:12px;line-height:1.4;color:var(--slate)}
.prose p{margin:0 0 22px;color:var(--t-70);font-size:17px;line-height:1.6}
.prose p:last-child{margin-bottom:0}
.prose strong{color:#fff;font-weight:600}

/* ---------------- knoppen ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:14px;font-weight:600;line-height:1.71;
  padding:14px 28px;border-radius:var(--r-pill);
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease;
}
.btn--primary{background:var(--pink);color:#fff}
.btn--primary:hover{background:#ff6bc7;transform:translateY(-1px)}
.btn--ghost{background:transparent;color:#fff;border-color:var(--rule-strong)}
.btn--ghost:hover{border-color:var(--pink);color:var(--pink-soft)}
.btn--white{background:#fff;color:var(--navy)}
.btn--white:hover{transform:translateY(-1px)}
.btn--full{width:100%}

/* Quiet outline pair — same weight as each other, told apart by accent only.
   Used where two routes are equally valid and neither should shout. */
.btn--line{
  background:transparent;color:var(--t-80);
  padding:10px 20px;font-size:13px;font-weight:600;letter-spacing:.04em;
  border-color:var(--rule-strong);
}
.btn--line:hover{transform:none}
.btn--line-pink:hover{border-color:var(--pink);color:#fff;background:rgba(193,0,124,.10)}
.btn--line-blue:hover{border-color:var(--blue);color:#fff;background:rgba(0,115,255,.10)}
.link-under{
  color:#fff;text-decoration:none;font-size:16px;
  border-bottom:1px solid var(--pink);padding-bottom:3px;
  transition:color .18s ease;
}
.link-under:hover{color:var(--pink-soft)}
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:14px;font-weight:600;color:var(--pink);
  transition:gap .18s ease;
}
.link-arrow:hover{gap:14px}

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

/* ---------------- navigatie ----------------
   Bovenaan de pagina staat de balk transparant over de hero heen: geen
   vlak, geen raster, alleen het merk en drie woorden. Zodra je scrollt
   trekt hij samen tot een smalle balk met een achtergrond, zodat hij
   leesbaar blijft boven willekeurige inhoud.

   --nav-h is de bron van waarheid voor de hoogte; de vaste balk op de
   casepagina hangt eraan, zodat die vanzelf meebeweegt. */
:root{--nav-h:78px}
.nav{
  position:sticky;top:0;z-index:60;
  background:transparent;
  border-bottom:1px solid transparent;
  overflow:hidden;
  transition:background-color .3s ease,border-color .3s ease,backdrop-filter .3s ease;
}
.nav.is-stuck{
  background:rgba(6,15,38,.82);backdrop-filter:blur(16px);
  border-bottom-color:var(--rule);
}
/* Het raster hoorde bij de oude, gevulde balk. Het blijft, maar alleen
   als hij is samengetrokken, en zachter dan eerst. */
.nav::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 60% 100% at 0% 0%, #000 30%, transparent 80%);
  mask-image:radial-gradient(ellipse 60% 100% at 0% 0%, #000 30%, transparent 80%);
  opacity:0;transition:opacity .35s ease;
}
.nav.is-stuck::before{opacity:1}
.nav__inner{
  position:relative;display:flex;align-items:center;gap:40px;
  height:var(--nav-h);
  transition:height .3s var(--ease-out,cubic-bezier(.22,.61,.36,1));
}
html.nav-stuck{--nav-h:60px}

/* Het merk krimpt mee en schuift een tikje op. Subtiel genoeg om niet
   op te vallen als beweging, groot genoeg om de overgang te voelen. */
.brand-link__logo{
  transition:width .3s var(--ease-out,cubic-bezier(.22,.61,.36,1)),
             height .3s var(--ease-out,cubic-bezier(.22,.61,.36,1));
}
.nav.is-stuck .brand-link__logo{width:34px;height:34px}
.nav.is-stuck .nav__links{margin-left:2px}
.nav__links{transition:margin-left .3s var(--ease-out,cubic-bezier(.22,.61,.36,1))}
.nav__links{display:flex;gap:0;margin-left:8px}
.nav__links a{
  text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t-80);transition:color .16s;padding:0 22px;border-right:1px solid var(--rule);
}
.nav__links a:first-child{padding-left:0}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:#fff}
.nav__links a[aria-current="page"]{color:var(--pink)}
.nav__cta{
  margin-left:auto;align-self:stretch;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  padding:0 36px;background:var(--pink);color:#fff;
  text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.02em;
  transition:background-color .2s ease;
}
.nav__cta:hover{background-color:#d4118c}
.nav__cta{transition:background-color .2s ease,padding .3s var(--ease-out,cubic-bezier(.22,.61,.36,1))}
.nav.is-stuck .nav__cta{padding:0 26px}
.nav__cta span{position:relative;z-index:1}
.card-grid__canvas{position:absolute;inset:0;z-index:0;pointer-events:none}

/* The mark carries the brand on its own — no wordmark in nav or footer. */
.brand-link{display:flex;align-items:center;text-decoration:none}
.brand-link__logo{display:block;width:46px;height:46px;object-fit:contain;flex:none}
.nav__toggle{
  display:none;margin-left:auto;background:none;border:1px solid var(--rule-strong);
  border-radius:var(--r-sm);width:44px;height:40px;align-items:center;justify-content:center;
}
.nav__toggle span{display:block;width:18px;height:1.5px;background:#fff;position:relative}
.nav__toggle span::before,.nav__toggle span::after{
  content:"";position:absolute;left:0;width:18px;height:1.5px;background:#fff;
}
.nav__toggle span::before{top:-6px}
.nav__toggle span::after{top:6px}
/* Uitgeklapt: effen donkerblauw. Geen verloop en geen doorschijnende
   laag, want dan zie je de pagina eronder door het menu heen meedoen. */
.nav:has(.nav__panel.is-open){
  background:var(--surface-1);
  backdrop-filter:none;
  border-bottom-color:var(--rule);
}
.nav:has(.nav__panel.is-open)::before{opacity:0}
.nav__panel{display:none;border-top:1px solid var(--rule);padding:20px 0 28px;background:var(--surface-1)}
.nav__panel.is-open{display:block}
.nav__panel a{display:block;text-decoration:none;padding:12px 0;font-size:17px;border-bottom:1px solid var(--rule)}
.nav__panel .btn{margin-top:20px}

/* ---------------- secties ---------------- */
.band{padding:var(--band) 0}
.band--tight{padding:calc(var(--pad-section) * .78) 0}
.band--top{padding-top:96px}
.band__head{max-width:760px;margin-bottom:84px}
.band__head p{margin:20px 0 0}
.divider{height:1px;background:var(--rule);border:0;margin:0}

/* ---------------- pagina-hero ---------------- */
.phero{padding:110px 0 88px}
.phero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:72px;align-items:center}
.phero__sub{color:var(--pink);font-size:20px;font-weight:600;margin:22px 0 26px;letter-spacing:-.2px}
.phero__actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:38px}
.phero__media{
  border:1px solid rgba(0,115,255,.55);border-radius:var(--r-lg);
  background:linear-gradient(160deg,#050c1f 0%,#0a1837 100%);overflow:hidden;
}

/* ---------------- volledig-scherm hero met raster-animatie ---------------- */
.hero-grid{
  min-height:100svh;position:relative;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:var(--surface-1);
}
.hero-grid__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.hero-grid__content{position:relative;z-index:1;text-align:center;max-width:760px;padding:48px 24px}
.hero-grid__content .h-product{margin:0}
.hero-grid__lead{margin:26px auto 38px;color:var(--t-70);max-width:620px}
.hero-grid__actions{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:6px}

/* ---------------- kaarten ---------------- */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:30px 28px 32px;background:var(--surface-1);
  transition:border-color .2s ease,transform .2s ease;
  display:flex;flex-direction:column;
}
.card:hover{border-color:rgba(0,115,255,.5);transform:translateY(-2px)}
.card h3{margin:0 0 12px}
.card p{margin:0 0 22px;font-size:15px;color:var(--t-62)}
.card .link-arrow{margin-top:auto}
.card__mark{width:34px;height:34px;margin-bottom:22px;color:var(--blue)}
.card--feature{border-color:rgba(193,0,124,.4);background:linear-gradient(180deg,rgba(193,0,124,.07),var(--navy-deep) 70%)}
.card__tag{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.28px;text-transform:uppercase;
  color:var(--pink);border:1px solid rgba(193,0,124,.5);border-radius:var(--r-xl);
  padding:5px 12px;margin-bottom:20px;
}

/* ---------------- diensten (gestapeld, met raster-effect) ---------------- */
.service-grid{display:flex;flex-direction:column;gap:18px}
.service-item{
  position:relative;overflow:hidden;
  border:1px solid rgba(0,115,255,.35);border-radius:var(--r-md);
  background:var(--surface-1);padding:36px 32px;
  display:flex;flex-direction:column;gap:14px;
  transition:border-color .2s;cursor:default;
}
.service-item:hover{border-color:rgba(0,115,255,.65)}
.service-item__grid{position:absolute;inset:0;z-index:0;pointer-events:none}
.service-item__num{position:relative;z-index:1;font-size:12px;font-weight:600;letter-spacing:.28px;color:var(--pink)}
.service-item h3{position:relative;z-index:1;font-size:20px;font-weight:600;margin:0;letter-spacing:-.2px}
.service-item p{position:relative;z-index:1;font-size:15px;color:var(--t-62);margin:0;line-height:1.55}
.service-item .link-arrow{position:relative;z-index:1;margin-top:auto;padding-top:8px}
.service-item--feature{
  background:linear-gradient(150deg,rgba(193,0,124,.12),var(--navy-deep) 60%);
  flex-direction:row;align-items:center;gap:40px;
}
.service-item--feature .svc-text{position:relative;z-index:1;flex:1}
.service-item--feature .svc-cta{position:relative;z-index:1;flex-shrink:0}

/* ---------------- genummerde rijen ---------------- */
.rows{border-top:1px solid var(--rule)}
.row{
  display:grid;grid-template-columns:56px 260px 1fr;gap:32px;align-items:start;
  padding:38px 0;border-bottom:1px solid var(--rule);
}
.row__num{font-size:14px;font-weight:600;letter-spacing:.28px;color:var(--pink)}
.row h3{letter-spacing:-.2px}
.row p{margin:0;color:var(--t-62)}

/* ---------------- proces ---------------- */
.rail{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;border-top:1px solid var(--rule);padding-top:32px}
.rail__step span{font-size:13px;font-weight:600;letter-spacing:.28px;color:var(--pink);display:block;margin-bottom:14px}
.rail__step h4{font-size:16px;margin:0 0 8px;color:#fff}
.rail__step p{margin:0;font-size:14px;line-height:1.45;color:var(--t-62)}

/* ---------------- team ---------------- */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.member{border:1px solid var(--rule);border-radius:var(--r-lg);padding:32px 26px;background:var(--surface-1)}
.member__avatar{
  width:64px;height:64px;border-radius:9999px;margin-bottom:26px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:19px;color:#fff;
  background:linear-gradient(140deg,var(--pink),var(--blue));
}
.member h3{font-size:19px;margin:0 0 6px}
.member__role{font-size:13px;letter-spacing:.28px;text-transform:uppercase;color:var(--pink);margin:0 0 16px;font-weight:500}
.member p{margin:0;font-size:14px;line-height:1.5;color:var(--t-62)}

/* ---------------- CTA-blok ---------------- */
.cta{
  border:1px solid var(--rule-strong);border-radius:var(--r-lg);
  background:linear-gradient(135deg,#0c1c40 0%,#0a1837 60%,#160f2e 100%);
  padding:72px 64px;display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center;
}
.cta p{margin:22px 0 0;max-width:520px}
.person{display:flex;align-items:center;gap:22px;margin-bottom:26px}
.person__avatar{
  width:120px;height:120px;border-radius:9999px;flex:none;
  object-fit:cover;display:block;
}
.person__avatar--initials{
  background:linear-gradient(140deg,var(--pink),var(--blue));
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:26px;color:#fff;
}
.person__name{font-weight:600;font-size:16px}
.person__role{font-size:14px;color:var(--muted)}

/* ---------------- formulier ---------------- */
.form-card{
  border:1px solid var(--rule);border-radius:var(--r-lg);
  background:var(--surface-1);padding:44px 40px;
}
.field{margin-bottom:22px}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field label{display:block;font-size:14px;font-weight:500;margin-bottom:9px;color:var(--t-80)}
.field input,.field textarea,.field select{
  width:100%;background:rgba(255,255,255,.03);
  border:1px solid var(--rule-strong);border-radius:var(--r-xs);
  padding:14px 16px;color:#fff;font-family:inherit;font-size:15px;
  transition:border-color .18s ease;
}
.field input::placeholder,.field textarea::placeholder{color:var(--slate)}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--pink);outline:none}
.field textarea{min-height:130px;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field select option{background:var(--surface-1)}

/* ---------------- lijsten ---------------- */
.arrow-list{list-style:none;margin:0;padding:0}
.arrow-list li{position:relative;padding:0 0 14px 28px;color:var(--t-70);font-size:17px}
.arrow-list li:last-child{padding-bottom:0}
.arrow-list li::before{content:"→";position:absolute;left:0;top:0;color:var(--pink)}
.check-list{list-style:none;margin:0;padding:0}
.check-list li{position:relative;padding:0 0 16px 30px;color:var(--t-70);font-size:15px}
.check-list li:last-child{padding-bottom:0}
.check-list li::before{
  content:"";position:absolute;left:0;top:8px;width:10px;height:10px;border-radius:2px;border:1px solid var(--pink);
}

/* ---------------- footer ---------------- */
.footer{border-top:1px solid var(--rule);padding:72px 0 40px;margin-top:40px}
/* Vier kolommen sinds de diensten en de sectoren gescheiden staan:
   merk, Diensten, Sectoren, Bedrijf. */
.footer__grid{display:grid;grid-template-columns:1.5fr .8fr .9fr .6fr;gap:44px}
@media (max-width:900px){.footer__grid{grid-template-columns:1fr 1fr;gap:36px}}
@media (max-width:560px){.footer__grid{grid-template-columns:1fr}}
/* Sectoren die nog niet bestaan: wel tonen, niet klikbaar. */
.foot-soon{color:var(--slate);font-size:15px}
.footer p{margin:0 0 18px;max-width:420px;color:var(--t-62)}
.footer-brand{display:flex;align-items:center;margin-bottom:22px}
.footer-brand img{width:58px;height:58px;object-fit:contain}
.footer h4{font-size:14px;letter-spacing:.28px;text-transform:uppercase;margin:0 0 18px;color:#fff;font-weight:500}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:12px}
.footer ul a{color:var(--muted);text-decoration:none;font-size:15px}
.footer ul a:hover{color:#fff}
.footer__bottom{margin-top:64px;padding-top:24px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ---------------- reveal ---------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.card,.link-arrow{transition:none}
}

/* ---------------- responsive ---------------- */
@media (max-width:1024px){
  :root{--gut:24px}
  .phero{padding:72px 0 64px}
  .phero__grid{grid-template-columns:1fr;gap:48px}
  .grid3{grid-template-columns:1fr 1fr}
  .team{grid-template-columns:1fr 1fr}
  .rail{grid-template-columns:repeat(2,1fr);gap:28px}
  .cta{grid-template-columns:1fr;padding:52px 40px}
  .nav__links,.nav__cta{display:none}
  .nav__toggle{display:flex}
  .row{grid-template-columns:44px 1fr;gap:20px}
  .row p{grid-column:2}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  :root{--gut:20px}
  .brand-link__logo{width:40px;height:40px}
  .grid2,.grid3,.team{grid-template-columns:1fr}
  .rail{grid-template-columns:1fr}
  .service-item--feature{flex-direction:column;gap:20px}
  .cta{padding:40px 26px}
  .form-card{padding:32px 24px}
  .field--row{grid-template-columns:1fr;gap:0}
  .footer__grid{grid-template-columns:1fr}
  .phero{padding:56px 0 56px}
}

/* Honeypot in het contactformulier: uit beeld voor mensen, wel
   invulbaar voor bots. display:none zou het veld bij sommige bots
   juist overslaan, vandaar wegpositioneren in plaats van verbergen. */
.is-hidden{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------------- case-teaser ----------------
   Staat alleen op de sectorpagina uitzendbureaus.html, direct na het
   voorbeeldscenario: eerst de illustratie, dan de klant. Het hele blok
   is één link. De hover tilt de kaart en zet de rand aan, zodat er geen
   twijfel is dat er een pagina achter zit. */
.caseteaser{
  position:relative;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:
    radial-gradient(120% 150% at 85% 0%, rgba(0,115,255,.20), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%),
    var(--surface-1);
  transition:background-color .35s ease;
}
.caseteaser::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 60% 100% at 100% 0%, #000 20%, transparent 78%);
  mask-image:radial-gradient(ellipse 60% 100% at 100% 0%, #000 20%, transparent 78%);
}
.caseteaser__in{
  position:relative;display:grid;text-decoration:none;color:inherit;
  max-width:var(--shell);margin:0 auto;padding:clamp(52px,6vw,86px) var(--gut);
  grid-template-columns:1.25fr .75fr;gap:clamp(34px,5vw,72px);align-items:center;
}
.caseteaser__body{
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.caseteaser__in:hover .caseteaser__body{transform:translateY(-3px)}

.caseteaser__k{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc-staffing-soft);
  border:1px solid rgba(0,115,255,.32);border-radius:20px;padding:6px 14px;
  transition:border-color .35s ease,background-color .35s ease;
}
.caseteaser__k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}
.caseteaser__in:hover .caseteaser__k{border-color:var(--blue);background:rgba(0,115,255,.12)}

.caseteaser h2{
  font-family:'Plus Jakarta Sans',Inter,ui-sans-serif,system-ui,sans-serif;font-weight:700;
  font-size:clamp(24px,2.9vw,38px);line-height:1.12;letter-spacing:-.028em;
  color:#fff;margin:0 0 18px;text-wrap:balance;
}
.caseteaser h2 em{font-style:normal;color:var(--blue)}
.caseteaser__lead{margin:0 0 26px;color:var(--t-70);font-size:16.5px;line-height:1.65;max-width:54ch}

/* Verticale stack, geen drie smalle kokers. Het getal krijgt de ruimte
   die het verdient en het label leest door op één regel. */
.caseteaser__stats{
  list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);
}
.caseteaser__stats li{
  display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:18px;
  padding:18px 2px;border-bottom:1px solid var(--rule);
  transition:border-color .35s ease;
}
.caseteaser__in:hover .caseteaser__stats li{border-color:rgba(0,115,255,.28)}
.caseteaser__stats b{
  font-family:'Plus Jakarta Sans',Inter,ui-sans-serif,system-ui,sans-serif;font-weight:700;
  font-size:clamp(26px,3vw,36px);line-height:1;letter-spacing:-.03em;color:#fff;
  font-variant-numeric:tabular-nums;min-width:3.4ch;
}
.caseteaser__stats span{font-size:13.5px;color:var(--t-62);line-height:1.45}

/* Ziet eruit als een knop, is het niet: de hele kaart is de link. */
.caseteaser__cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;border-radius:var(--r-pill);
  background:var(--blue);color:#fff;
  font-size:14px;font-weight:700;letter-spacing:.01em;
  transition:background-color .3s ease,box-shadow .3s ease;
}
.caseteaser__in:hover .caseteaser__cta{background:#2f8bff;box-shadow:0 10px 30px rgba(0,115,255,.28)}
.caseteaser__cta span{transition:transform .3s ease}
.caseteaser__in:hover .caseteaser__cta span{transform:translateX(4px)}
.caseteaser__in:focus-visible{outline:2px solid var(--blue);outline-offset:-6px;border-radius:var(--r-md)}

@media (max-width:900px){
  .caseteaser__in{grid-template-columns:1fr;gap:32px}
}
@media (prefers-reduced-motion:reduce){
  .caseteaser__body,.caseteaser__cta,.caseteaser__cta span{transition:none}
  .caseteaser__in:hover .caseteaser__body{transform:none}
  .caseteaser__in:hover .caseteaser__cta span{transform:none}
}

/* ---------------- casebalk en case-dock ----------------
   De case is het sterkste argument op de sectorpagina, dus hij moet
   niet pas halverwege opduiken. De balk staat direct onder de hero;
   de dock loopt daarna mee en verdwijnt zodra het volledige caseblok
   in beeld komt, zodat hij nooit náást zijn eigen inhoud staat. */
.casebar{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,2.4vw,34px);
  max-width:var(--shell);margin:0 auto;padding:13px var(--gut);
  text-decoration:none;color:inherit;
}
.casebar__band{
  position:relative;z-index:2;
  border-top:1px solid var(--rule);
  background:
    radial-gradient(90% 300% at 82% 50%, rgba(0,115,255,.22), transparent 62%),
    var(--surface-1);
}
.casebar__k{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc-staffing-soft);border:1px solid rgba(0,115,255,.34);border-radius:20px;padding:6px 12px;
  white-space:nowrap;transition:background-color .25s ease,border-color .25s ease;
}
.casebar__k::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);
  animation:case-pulse 2.4s ease-out infinite;
}
@keyframes case-pulse{
  0%{box-shadow:0 0 0 0 rgba(0,115,255,.6)}
  70%{box-shadow:0 0 0 8px rgba(0,115,255,0)}
  100%{box-shadow:0 0 0 0 rgba(0,115,255,0)}
}
.casebar__txt{min-width:0;font-size:15.5px;line-height:1.45;color:var(--t-80)}
.casebar__txt b{color:#fff;font-weight:600}
.casebar__txt em{font-style:normal;color:var(--blue);font-weight:700;font-variant-numeric:tabular-nums}
.casebar__go{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  padding:11px 22px;border-radius:var(--r-pill);background:var(--blue);color:#fff;
  font-size:13.5px;font-weight:700;
  transition:background-color .25s ease,box-shadow .25s ease;
}
.casebar:hover .casebar__go{background:#2f8bff;box-shadow:0 8px 24px rgba(0,115,255,.3)}
.casebar:hover .casebar__k{background:rgba(0,115,255,.14);border-color:var(--blue)}
.casebar__go span{transition:transform .25s ease}
.casebar:hover .casebar__go span{transform:translateX(4px)}
@media (max-width:860px){
  .casebar{grid-template-columns:1fr;gap:14px;text-align:left}
  .casebar__go{justify-self:start}
}

/* De meelopende versie. */
.casedock{
  position:fixed;right:22px;bottom:22px;z-index:70;
  display:flex;align-items:center;gap:14px;
  max-width:min(380px,calc(100vw - 44px));
  padding:14px 16px 14px 18px;
  border:1px solid var(--acc-staffing,#0073ff);border-radius:var(--r-md);
  background:rgba(11,26,61,.96);backdrop-filter:blur(14px);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  text-decoration:none;color:inherit;
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .3s ease,transform .3s cubic-bezier(.22,.61,.36,1);
}
.casedock.is-on{opacity:1;transform:none;pointer-events:auto}
.casedock__k{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc-staffing-soft,#7DB6FF);margin-bottom:5px;
}
.casedock__t{display:block;font-size:14px;line-height:1.4;color:#fff;font-weight:600}
.casedock__t em{font-style:normal;color:var(--blue);font-variant-numeric:tabular-nums}
.casedock__go{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:var(--blue);color:#fff;font-size:15px;
  transition:transform .25s ease;
}
.casedock:hover .casedock__go{transform:translateX(3px)}
.casedock__x{
  position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--rule-strong);background:var(--surface-2);color:var(--t-70);
  display:grid;place-items:center;font-size:13px;line-height:1;cursor:pointer;padding:0;
}
.casedock__x:hover{color:#fff;border-color:var(--rule-strong);background:var(--surface-1)}
@media (max-width:560px){
  .casedock{right:12px;left:12px;bottom:12px;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .casebar__k::before{animation:none}
  .casedock{transition:none}
  .casebar__go span,.casedock__go{transition:none}
}