@charset "UTF-8";
/* ===========================================================================
   DataResult — stijlblad
   Kleuren komen uit het logo: groen #97BE0D, antraciet #4B4B4D, inkt #1A171B.
   Wil je de accentkleur wijzigen? Pas hieronder --groen aan.
   ========================================================================= */

:root{
  --groen:        #97BE0D;
  --groen-tekst:  #5F7A08;   /* leesbaar groen op wit (contrast 4.9:1) */
  --groen-diep:   #46590A;
  --groen-mist:   #F4F8E8;
  --groen-rand:   #E2ECC2;

  --inkt:         #1A171B;
  --grijs:        #4B4B4D;
  --grijs-zacht:  #6A6A6C;
  --lijn:         #E4E5E0;
  --mist:         #F6F7F4;
  --wit:          #FFFFFF;

  --omhulsel:     1180px;
  --radius:       14px;
  --radius-klein: 8px;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;

  --schaduw: 0 1px 2px rgba(26,23,27,.04), 0 8px 24px rgba(26,23,27,.05);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--wit);
  color:var(--grijs);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3,h4{
  font-family:var(--serif);
  color:var(--inkt);
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.012em;
  margin:0 0 .6em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.1rem, 1.35rem + 2.6vw, 3.5rem); }
h2{ font-size:clamp(1.65rem, 1.2rem + 1.6vw, 2.4rem); }
h3{ font-size:clamp(1.15rem, 1.02rem + .45vw, 1.35rem); }
h4{ font-size:1.05rem; }

p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--groen-tekst); text-decoration-thickness:1px; text-underline-offset:.18em; }
a:hover{ color:var(--groen-diep); }

:focus-visible{
  outline:3px solid var(--groen);
  outline-offset:3px;
  border-radius:3px;
}

.overslaan{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--inkt); color:#fff; padding:.8rem 1.2rem; border-radius:0 0 var(--radius-klein) 0;
  text-decoration:none;
}
.overslaan:focus{ left:0; color:#fff; }

.omhulsel{ width:100%; max-width:var(--omhulsel); margin-inline:auto; padding-inline:24px; }

/* ---------------------------------------------------------------- Koptekst */

.kop{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--lijn);
}
.kop__binnen{ display:flex; align-items:center; gap:24px; min-height:76px; }
.kop__logo{ display:block; flex:0 0 auto; }
.kop__logo img{ width:186px; height:auto; }

.nav{ margin-left:auto; }
.nav__lijst{
  list-style:none; display:flex; align-items:center; gap:4px;
  margin:0; padding:0;
}
.nav__lijst a:not(.knop){
  display:block; padding:.55rem .8rem;
  color:var(--inkt); text-decoration:none;
  font-size:.95rem; font-weight:500;
  border-radius:var(--radius-klein);
  position:relative;
}
.nav__lijst a:not(.knop):hover{ background:var(--mist); color:var(--inkt); }
.nav__lijst a[aria-current="page"]{ color:var(--groen-diep); }
.nav__lijst a[aria-current="page"]::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.15rem;
  height:2px; background:var(--groen); border-radius:2px;
}
.nav__cta{ margin-left:10px; }

.menuknop{
  display:none; margin-left:auto;
  width:44px; height:44px; padding:10px;
  background:none; border:1px solid var(--lijn); border-radius:var(--radius-klein);
  cursor:pointer;
}
.menuknop span{
  display:block; height:2px; background:var(--inkt); border-radius:2px;
  transition:transform .22s ease, opacity .18s ease;
}
.menuknop span + span{ margin-top:5px; }
.menuknop[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menuknop[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menuknop[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1050px){
  .kop__binnen{ min-height:66px; }
  .kop__logo img{ width:154px; }
  .menuknop{ display:block; }
  .nav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--wit); border-bottom:1px solid var(--lijn);
    box-shadow:var(--schaduw);
    display:none;
  }
  .nav.open{ display:block; }
  .nav__lijst{
    flex-direction:column; align-items:stretch; gap:0;
    padding:12px 24px 20px; max-width:var(--omhulsel); margin-inline:auto;
  }
  .nav__lijst li{ border-bottom:1px solid var(--lijn); }
  .nav__lijst li:last-child{ border-bottom:0; }
  .nav__lijst a:not(.knop){ padding:.85rem .2rem; font-size:1.02rem; }
  .nav__lijst a[aria-current="page"]::after{ display:none; }
  .nav__cta{ margin:14px 0 0; }
  .nav__cta .knop{ width:100%; justify-content:center; }
}

/* ----------------------------------------------------------------- Knoppen */

.knop{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 1.5rem;
  background:var(--groen); color:var(--inkt);
  font-family:var(--sans); font-size:1rem; font-weight:600;
  border:1px solid var(--groen); border-radius:999px;
  text-decoration:none; cursor:pointer;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}
.knop:hover{ background:#87AC0B; border-color:#87AC0B; color:var(--inkt); transform:translateY(-1px); }
.knop:active{ transform:none; }
.knop--klein{ padding:.55rem 1.1rem; font-size:.92rem; }
.knop--lijn{
  background:transparent; color:var(--inkt); border-color:#CFD3C7;
}
.knop--lijn:hover{ background:var(--mist); border-color:var(--inkt); color:var(--inkt); }
.knop--licht{
  background:transparent; color:#fff; border-color:rgba(255,255,255,.4);
}
.knop--licht:hover{ background:rgba(255,255,255,.1); border-color:#fff; color:#fff; }

.knoprij{ display:flex; flex-wrap:wrap; gap:14px; margin-top:2rem; }

/* -------------------------------------------------------------- Onderdelen */

.blok{ padding:clamp(56px, 4vw + 34px, 104px) 0; }
.blok--mist{ background:var(--mist); }
.blok--groen{ background:var(--groen-mist); }
.blok--donker{ background:var(--inkt); color:#C9C9CB; }
.blok--donker h2,.blok--donker h3{ color:#fff; }
.blok--strak{ padding-top:0; }

.label{
  display:inline-flex; align-items:flex-start; gap:.6rem;
  font-family:var(--sans); font-size:.79rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--groen-diep); margin:0 0 1rem;
}
.label::before{
  content:""; flex:0 0 auto; width:26px; height:3px; margin-top:.62em;
  border-radius:3px; background:var(--groen);
}
.blok--donker .label{ color:var(--groen); }

.kopgroep{ max-width:760px; margin-bottom:clamp(32px,3vw,54px); }
.kopgroep p{ font-size:1.1rem; }

.lood{ font-size:1.15rem; color:var(--grijs); }

/* ------------------------------------------------------------------- Hero */

.hero{
  position:relative; overflow:hidden;
  padding:clamp(56px, 5vw + 30px, 116px) 0 clamp(48px, 4vw + 24px, 92px);
  background:
    radial-gradient(1100px 480px at 88% -8%, rgba(151,190,13,.16), transparent 62%),
    linear-gradient(180deg, #FCFDF9 0%, #FFFFFF 62%);
  border-bottom:1px solid var(--lijn);
}
.hero__binnen{ position:relative; z-index:2; max-width:900px; }
.hero h1{ margin-bottom:.5em; }
.hero__tekst{ font-size:clamp(1.05rem,.98rem + .38vw,1.22rem); max-width:660px; }

.hero__streep{
  position:absolute; inset:auto 0 0 0; height:4px;
  background:linear-gradient(90deg, var(--groen) 0%, var(--groen) 22%, transparent 22%);
}

/* Cijferbalk */
.cijfers{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  background:var(--lijn);
  border:1px solid var(--lijn);
  border-radius:var(--radius);
  overflow:hidden;
  margin-top:clamp(36px,4vw,60px);
}
.cijfers__item{ background:var(--wit); padding:1.6rem 1.5rem; }
.cijfers__getal{
  font-family:var(--serif); font-size:1.7rem; font-weight:600;
  color:var(--inkt); line-height:1.1; display:block; margin-bottom:.35rem;
}
.cijfers__label{ font-size:.93rem; color:var(--grijs-zacht); }

/* ------------------------------------------------------------------ Roosters */

.rooster{ display:grid; gap:clamp(20px,2.4vw,32px); }
.rooster--2{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.rooster--3{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.rooster--4{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }

.kaart{
  background:var(--wit);
  border:1px solid var(--lijn);
  border-radius:var(--radius);
  padding:clamp(24px,2.2vw,34px);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.kaart h3{ margin-bottom:.5em; }
.kaart p:last-child{ margin-bottom:0; }
.kaart--link:hover{ border-color:var(--groen); box-shadow:var(--schaduw); transform:translateY(-2px); }

.kaart__nr{
  display:inline-grid; place-items:center;
  width:34px; height:34px; margin-bottom:1rem;
  border-radius:50%; background:var(--groen-mist); border:1px solid var(--groen-rand);
  font-family:var(--sans); font-size:.85rem; font-weight:700; color:var(--groen-diep);
}

/* Dienstkaart groot */
.dienstkaart{
  display:flex; flex-direction:column;
  background:var(--wit); border:1px solid var(--lijn); border-radius:var(--radius);
  padding:clamp(26px,2.4vw,40px);
  text-decoration:none; color:inherit;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.dienstkaart:hover{ border-color:var(--groen); box-shadow:var(--schaduw); transform:translateY(-2px); color:inherit; }
.dienstkaart h3{ font-size:clamp(1.25rem,1.1rem + .5vw,1.55rem); }
.dienstkaart p{ color:var(--grijs); }
.dienstkaart__meer{
  margin-top:auto; padding-top:1.4rem;
  font-weight:600; font-size:.95rem; color:var(--groen-diep);
  display:inline-flex; align-items:center; gap:.45rem;
}
.dienstkaart__meer::after{ content:"→"; transition:transform .2s ease; }
.dienstkaart:hover .dienstkaart__meer::after{ transform:translateX(4px); }

/* --------------------------------------------------------------- Lijsten */

.vinklijst{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.vinklijst li{ position:relative; padding-left:1.9rem; }
.vinklijst li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:9px; border-radius:50%;
  background:var(--groen); box-shadow:0 0 0 4px var(--groen-mist);
}
.blok--donker .vinklijst li::before{ box-shadow:0 0 0 4px rgba(151,190,13,.14); }

.pillen{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; }
.pillen li{
  padding:.5rem 1rem; border:1px solid var(--lijn); border-radius:999px;
  background:var(--wit); font-size:.93rem; color:var(--inkt);
}
.pillen--groen li{ background:var(--groen-mist); border-color:var(--groen-rand); }

.merkenrij{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  background:var(--lijn); border:1px solid var(--lijn);
  border-radius:var(--radius); overflow:hidden;
  list-style:none; margin:0; padding:0;
}
.merkenrij li{
  background:var(--wit); padding:1.05rem 1.3rem;
  font-family:var(--serif); font-size:clamp(1rem,.94rem + .28vw,1.12rem);
  color:var(--inkt); position:relative; padding-left:2.4rem;
}
.merkenrij li::before{
  content:""; position:absolute; left:1.3rem; top:1.5rem;
  width:7px; height:7px; border-radius:50%; background:var(--groen);
}
.voetnoot{ font-size:.85rem; color:var(--grijs-zacht); margin-top:1.4rem; max-width:760px; }

/* -------------------------------------------------------------- Tijdlijn */

.stappen{ counter-reset:stap; display:grid; gap:0; }
.stap{
  display:grid; grid-template-columns:64px 1fr; gap:clamp(16px,2vw,32px);
  padding:clamp(22px,2vw,30px) 0;
  border-top:1px solid var(--lijn);
}
.stap:last-child{ border-bottom:1px solid var(--lijn); }
.stap__nr{
  counter-increment:stap;
  font-family:var(--serif); font-size:1.5rem; font-weight:600; color:var(--groen);
  line-height:1.2;
}
.stap__nr::before{ content:"0" counter(stap); }
.stap h3{ margin-bottom:.35em; }
.stap p{ max-width:70ch; }

/* ---------------------------------------------------------------- Cases */

.case{
  border:1px solid var(--lijn); border-radius:var(--radius);
  padding:clamp(24px,2.2vw,36px); background:var(--wit);
}
.case__kop{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:baseline; margin-bottom:.9rem; }
.case__opdrachtgever{ font-family:var(--serif); font-size:1.3rem; color:var(--inkt); font-weight:600; }
.case__periode{
  font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--groen-diep); background:var(--groen-mist);
  border:1px solid var(--groen-rand); border-radius:999px; padding:.2rem .7rem;
}
.case__rol{ font-weight:600; color:var(--inkt); margin-bottom:.15em; }
.case__omvang{ font-size:.92rem; color:var(--grijs-zacht); margin-bottom:1rem; }
.case__resultaten{ margin-top:1.3rem; padding-top:1.3rem; border-top:1px solid var(--lijn); }

/* ---------------------------------------------------------------- Persoon */

.persoon{ display:grid; gap:clamp(24px,3vw,48px); grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:820px){ .persoon--foto{ grid-template-columns:300px minmax(0,1fr); } }
.persoon__foto{ border-radius:var(--radius); overflow:hidden; background:var(--mist); }
.persoon__naam{ margin-bottom:.15em; }
.persoon__functie{
  font-size:.85rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--groen-diep); margin-bottom:1.3rem;
}

/* ------------------------------------------------------------- Vacatures */

.vacature{
  display:grid; gap:1rem 2rem; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  padding:clamp(22px,2vw,30px);
  border:1px solid var(--lijn); border-radius:var(--radius);
  background:var(--wit); text-decoration:none; color:inherit;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.vacature:hover{ border-color:var(--groen); box-shadow:var(--schaduw); transform:translateY(-2px); color:inherit; }
.vacature h3{ margin-bottom:.4em; }
.vacature__meta{ list-style:none; display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin:.9rem 0 0; padding:0; }
.vacature__meta li{
  font-size:.85rem; color:var(--grijs-zacht);
  background:var(--mist); border-radius:999px; padding:.24rem .75rem;
}
.vacature__pijl{ font-size:1.4rem; color:var(--groen-diep); }
@media (max-width:640px){ .vacature{ grid-template-columns:1fr; } .vacature__pijl{ display:none; } }

.vacature__feiten{
  display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  background:var(--lijn); border:1px solid var(--lijn); border-radius:var(--radius);
  overflow:hidden; margin:2rem 0;
}
.vacature__feit{ background:var(--wit); padding:1.1rem 1.25rem; }
.vacature__feit dt{
  font-size:.76rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--grijs-zacht); margin-bottom:.3rem;
}
.vacature__feit dd{ margin:0; color:var(--inkt); font-weight:500; }

/* ------------------------------------------------------------ Formulieren */

.formulier{ display:grid; gap:1.15rem; }
.veld{ display:grid; gap:.4rem; }
.veld--rij{ display:grid; gap:1.15rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.veld label, .veldkop{
  font-size:.92rem; font-weight:600; color:var(--inkt);
}
.veld .hint{ font-size:.85rem; color:var(--grijs-zacht); font-weight:400; }
.veld input[type=text],
.veld input[type=email],
.veld input[type=tel],
.veld input[type=url],
.veld input[type=file],
.veld select,
.veld textarea{
  width:100%; padding:.78rem .95rem;
  font:inherit; font-size:1rem; color:var(--inkt);
  background:var(--wit);
  border:1px solid #D3D6CD; border-radius:var(--radius-klein);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.veld textarea{ min-height:170px; resize:vertical; }
.veld input:focus, .veld select:focus, .veld textarea:focus{
  outline:none; border-color:var(--groen); box-shadow:0 0 0 3px rgba(151,190,13,.25);
}
.veld input[type=file]{ padding:.6rem .7rem; background:var(--mist); }

.akkoord{ display:flex; gap:.7rem; align-items:flex-start; font-size:.93rem; }
.akkoord input{ margin-top:.32rem; width:18px; height:18px; accent-color:var(--groen-tekst); flex:0 0 auto; }
.akkoord label{ font-weight:400; color:var(--grijs); }

.valstrik{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.melding{
  padding:1rem 1.2rem; border-radius:var(--radius-klein);
  border:1px solid var(--groen-rand); background:var(--groen-mist);
  color:var(--groen-diep); font-size:.95rem;
}
.melding--fout{ border-color:#E7C4C4; background:#FCF2F2; color:#8A2E2E; }
.melding ul{ margin:.5rem 0 0; padding-left:1.2rem; }

/* ------------------------------------------------------------------ Split */

.split{
  display:grid; gap:clamp(28px,3.5vw,64px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:start;
}
.zijblok{
  background:var(--mist); border:1px solid var(--lijn);
  border-radius:var(--radius); padding:clamp(24px,2.2vw,34px);
}
.zijblok h2{ font-size:1.3rem; }
.zijblok address{ font-style:normal; line-height:1.8; }

/* --------------------------------------------------------------- Oproep */

.oproep{
  background:var(--inkt); color:#C9C9CB;
  border-radius:var(--radius);
  padding:clamp(34px,4vw,64px);
  position:relative; overflow:hidden;
}
.oproep::after{
  content:""; position:absolute; right:-60px; top:-60px;
  width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle, rgba(151,190,13,.28), transparent 68%);
}
.oproep__binnen{ position:relative; z-index:2; max-width:640px; }
.oproep h2{ color:#fff; }

/* ------------------------------------------------------------------ Voet */

.voet{ background:var(--inkt); color:#9E9EA0; padding:clamp(48px,4vw,76px) 0 0; margin-top:0; }
.voet__binnen{
  display:grid; gap:clamp(28px,3vw,44px);
  grid-template-columns:minmax(240px,1.6fr) repeat(auto-fit,minmax(160px,1fr));
  padding-bottom:clamp(32px,3vw,48px);
}
.voet__logo{ width:190px; margin-bottom:1.2rem; }
.voet__over{ font-size:.95rem; max-width:38ch; }
.voet__kop{
  font-family:var(--sans); font-size:.79rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:#fff; margin-bottom:1rem;
}
.voet__lijst{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.voet__lijst a, .voet__adres a{ color:#C9C9CB; text-decoration:none; font-size:.95rem; }
.voet__lijst a:hover, .voet__adres a:hover{ color:var(--groen); text-decoration:underline; }
.voet__adres{ font-style:normal; font-size:.95rem; line-height:1.8; }
.voet__onder{
  border-top:1px solid rgba(255,255,255,.1);
  padding-block:1.4rem;
  display:flex; flex-wrap:wrap; gap:.4rem 1.6rem; justify-content:space-between;
  font-size:.87rem;
}
.voet__onder p{ margin:0; }

@media (max-width:760px){
  .voet__binnen{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .voet__merk{ grid-column:1 / -1; }
}
@media (max-width:430px){
  .voet__binnen{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------- Broodkruim */

.kruim{ padding:1.1rem 0 0; }
.kruim ol{ list-style:none; display:flex; flex-wrap:wrap; gap:.3rem; margin:0; padding:0; font-size:.86rem; }
.kruim li::after{ content:"/"; margin-left:.45rem; color:#BFC2B8; }
.kruim li:last-child::after{ content:""; }
.kruim a{ color:var(--grijs-zacht); text-decoration:none; }
.kruim a:hover{ color:var(--groen-diep); text-decoration:underline; }
.kruim [aria-current]{ color:var(--inkt); }

/* ------------------------------------------------------------------ Prosa */

.prosa{ max-width:74ch; }
.prosa h2{ margin-top:2.2em; }
.prosa h2:first-child{ margin-top:0; }
.prosa ul{ padding-left:1.2rem; }
.prosa li{ margin-bottom:.4rem; }

.hulplijn{ border:0; border-top:1px solid var(--lijn); margin:clamp(40px,4vw,64px) 0; }

@media print{
  .kop,.voet,.knoprij,.menuknop{ display:none !important; }
  body{ font-size:12pt; color:#000; }
}

/* Vier kaarten naast elkaar iets compacter maken */
.rooster--4 .kaart{ padding:clamp(20px,1.7vw,27px); }

/* ------------------------------------------------------- Beeld op pagina's */

/* Brede foto tussen de hero en het eerste inhoudsblok. */
.beeldband{ padding:clamp(28px,3vw,44px) 0 0; }
.beeldband__figuur{
  margin:0; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--schaduw); background:var(--mist);
}
.beeldband__figuur img{
  width:100%; aspect-ratio:5/2; object-fit:cover; display:block;
}
@media (max-width:640px){
  .beeldband__figuur img{ aspect-ratio:16/9; }
}

/* Hero met foto erachter (homepage). */
.hero--beeld{
  padding:clamp(64px,7vw,110px) 0 clamp(48px,4vw,76px);
  background:var(--inkt);
  border-bottom:none;
  isolation:isolate;
}
.hero__beeld{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  object-position:62% center;   /* houdt beide gezichten in beeld */
}
.hero--beeld::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(26,23,27,.88) 0%,
      rgba(26,23,27,.72) 42%,
      rgba(26,23,27,.30) 74%,
      rgba(26,23,27,.16) 100%),
    linear-gradient(180deg, rgba(26,23,27,.22) 0%, rgba(26,23,27,.42) 100%);
}
.hero--beeld .hero__binnen{ max-width:700px; }
.hero--beeld h1{ color:#fff; }
.hero--beeld .label{ color:#C2DC66; }
.hero--beeld .hero__tekst{ color:rgba(255,255,255,.93); max-width:620px; }
.hero--beeld .knop--lijn{ background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.hero--beeld .knop--lijn:hover{ background:rgba(255,255,255,.14); border-color:#fff; color:#fff; }

@media (max-width:900px){
  /* Op smalle schermen is er geen ruimte naast de tekst: dan een gelijkmatige
     donkere laag over de hele foto. */
  .hero--beeld::after{
    background:linear-gradient(180deg, rgba(26,23,27,.55) 0%, rgba(26,23,27,.78) 100%);
  }
  .hero__beeld{ object-position:60% center; }
}

/* =========================================================================
   Voorvertoning en concepten
   ========================================================================= */

.voorbeeldbalk{
  background:var(--inkt); color:#E6E7E2;
  font-size:.9rem; line-height:1.5;
  border-bottom:3px solid var(--groen);
}
.voorbeeldbalk__binnen{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem;
  padding-block:.7rem;
}
.voorbeeldbalk__merk{
  font-size:.72rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--inkt); background:var(--groen);
  border-radius:999px; padding:.18rem .7rem;
}
.voorbeeldbalk strong{ color:#fff; }
.voorbeeldbalk__uit{
  margin-left:auto; color:var(--groen); font-weight:600;
  text-underline-offset:.2em;
}
.voorbeeldbalk__uit:hover{ color:#fff; }

.conceptmerk{
  display:inline-block; margin:.6rem 0 0;
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#8A5A00; background:#FDF4E3; border:1px solid #EBD9B4;
  border-radius:999px; padding:.2rem .8rem;
}

/* =========================================================================
   Werkveld: klantgroepen op de pagina Opdrachten
   ========================================================================= */

.groepnav{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:clamp(28px,3vw,44px);
}
.groepnav a{
  font-size:.93rem; font-weight:500; color:var(--inkt); text-decoration:none;
  border:1px solid var(--lijn); border-radius:999px; padding:.5rem 1.1rem;
  background:var(--wit); transition:border-color .18s ease, background .18s ease;
}
.groepnav a:hover{ border-color:var(--groen); background:var(--groen-mist); color:var(--inkt); }

.groepen{ display:grid; gap:clamp(20px,2.4vw,30px); }

.groep{
  border:1px solid var(--lijn); border-radius:var(--radius); background:var(--wit);
  padding:clamp(24px,2.6vw,42px);
  scroll-margin-top:96px;
}
.groep__kop{
  border-bottom:1px solid var(--lijn);
  padding-bottom:1.1rem; margin-bottom:1.6rem;
}
.groep__kop h2{
  font-size:clamp(1.4rem,1.15rem + 1vw,1.95rem);
  margin-bottom:.25em;
}
.groep__kort{
  font-size:.85rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--groen-diep); margin:0;
}
.groep__body{ display:grid; gap:clamp(22px,2.4vw,36px); }
@media (min-width:900px){
  .groep__body{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:start; }
}
.groep__tekst p{ max-width:60ch; }
.groep__schaal{
  margin-top:1.2rem; padding:.85rem 1.1rem;
  background:var(--groen-mist); border:1px solid var(--groen-rand);
  border-radius:var(--radius-klein);
  font-size:.93rem; color:var(--inkt);
}
.groep__kolommen{ display:grid; gap:clamp(18px,2vw,26px); }
@media (min-width:560px){
  .groep__kolommen{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:900px) and (max-width:1080px){
  .groep__kolommen{ grid-template-columns:minmax(0,1fr); }
}
.groep__kolom h3{
  font-family:var(--sans); font-size:.79rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--grijs-zacht);
  margin-bottom:.9rem;
}
.groep__kolom .vinklijst li{ font-size:.97rem; }


/* =========================================================================
   Hero met de foto naast de tekst
   ========================================================================= */

.hero--naast{
  padding:clamp(40px,3.4vw + 18px,72px) 0 clamp(40px,3.4vw + 16px,68px);
}
.hero--naast .hero__binnen{
  max-width:var(--omhulsel);
  display:grid;
  gap:clamp(26px,3.2vw,52px);
  align-items:stretch;          /* tekst en foto even hoog */
}
.hero--naast .hero__woord{
  min-width:0;
  display:flex; flex-direction:column; justify-content:center;
}
.hero--naast h1{ font-size:clamp(1.85rem,1.2rem + 2vw,2.9rem); }
.hero--naast .label{ font-size:.75rem; letter-spacing:.09em; max-width:46ch; }
.hero--naast .hero__tekst{ max-width:54ch; font-size:clamp(1rem,.96rem + .28vw,1.12rem); }
.hero--naast .knoprij{ margin-top:1.7rem; }

@media (min-width:1000px){
  .hero--naast .hero__binnen{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  /* Verdeling tussen tekst en foto, in te stellen in het beheerscherm. */
  .hero--verdeling-foto  .hero__binnen{ grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr); }
  .hero--verdeling-tekst .hero__binnen{ grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr); }

  /* De foto loopt door tot de rechterrand van het scherm.
     Het tekstblok is 20% breder dan in de eerste opzet (.82 werd .98),
     zodat tekst en foto meer met elkaar in verhouding staan. */
  .hero--verdeling-rand .hero__binnen{ grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr); }
  .hero--verdeling-rand .hero__figuur{
    margin-right:calc(-1 * (50vw - min(50vw, var(--omhulsel) / 2)) - 24px);
  }
  .hero--verdeling-rand .hero__figuur img{ border-radius:var(--radius) 0 0 var(--radius); }
}

.hero__figuur{
  position:relative; margin:0; min-width:0;
}
.hero__figuur img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:var(--radius);
}

/* Vorm van het fotovak.
   'vullend' is precies zo hoog als het tekstblok ernaast en groeit alleen in
   de breedte mee met het scherm. De andere houden hun eigen verhouding vast,
   waardoor ze op brede schermen hoger worden dan de tekst. */
.hero__figuur--vullend{ min-height:clamp(260px,44vw,360px); }
@media (min-width:1000px){
  .hero__figuur--vullend{ min-height:0; height:100%; align-self:stretch; }
}
.hero__figuur--16-9,
.hero__figuur--3-2,
.hero__figuur--4-3,
.hero__figuur--1-1{ align-self:center; }
.hero__figuur--16-9{ aspect-ratio:16 / 9; }
.hero__figuur--3-2 { aspect-ratio:3 / 2; }
.hero__figuur--4-3 { aspect-ratio:4 / 3; }
.hero__figuur--1-1 { aspect-ratio:1 / 1; }

/* Welk deel van de foto in beeld blijft als er toch iets afgaat. */
.hero__figuur--midden img{ object-position:50% center; }
.hero__figuur--links  img{ object-position:18% center; }
.hero__figuur--rechts img{ object-position:82% center; }
.hero__figuur--boven  img{ object-position:50% 16%; }
.hero__figuur--onder  img{ object-position:50% 84%; }

@media (max-width:999px){
  .hero__figuur{ margin-top:.4rem; }
  .hero__figuur--vullend{ min-height:clamp(260px,52vw,400px); }
  .hero--verdeling-rand .hero__figuur{ margin-right:0; }
  .hero--verdeling-rand .hero__figuur img{ border-radius:var(--radius); }
}

/* =========================================================================
   Blok met een vaststaande achtergrondfoto
   ========================================================================= */

.parallax{
  position:relative;
  background-image:var(--parallax-beeld);
  background-attachment:fixed;      /* de foto blijft staan, de tekst schuift eroverheen */
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  background-color:var(--inkt);     /* achtervang zolang de foto nog laadt */
  color:#D6D7D1;
}
.parallax::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(26,23,27,.90) 0%, rgba(26,23,27,.80) 55%, rgba(26,23,27,.90) 100%);
}
.parallax__binnen{
  position:relative; z-index:1;
  padding-block:clamp(64px,7vw + 26px,138px);
  max-width:var(--omhulsel);
}
.parallax h2{ color:#fff; max-width:22ch; }
.parallax p{ max-width:58ch; }

/* Op telefoons en tablets negeren de meeste browsers een vaststaande
   achtergrond, of gaat het schokken. Daar tonen we de foto gewoon mee. */
@media (max-width:900px), (hover:none){
  .parallax{ background-attachment:scroll; }
}
@media (prefers-reduced-motion:reduce){
  .parallax{ background-attachment:scroll; }
}


/* =========================================================================
   Kleine varianten
   De beveiligingsregels van de site (Content Security Policy) staan geen
   stijlen in de HTML toe. Alles wat eerder met style="..." werd gezet,
   staat daarom hier als klasse.
   ========================================================================= */

.blok--klein-boven { padding-top:clamp(36px,3vw,56px); }
.blok--nauw-boven  { padding-top:clamp(28px,2.4vw,44px); }
.blok--midden-boven{ padding-top:clamp(44px,3.4vw,72px); }

.rooster--kort   { gap:16px; }
.knoprij--strak  { margin-top:0; }
.vinklijst--marge{ margin-top:1.4rem; }
.melding--marge  { margin-block:1.4rem; }
.formulier--marge{ margin-top:1.6rem; }
.hulplijn--kort  { margin-block:1.6rem; }
.voetnoot--vlak      { margin:0; }
.voetnoot--onder-kop { margin-top:-.6rem; }

.stap__titel    { font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem); }
.vacature__titel{ font-size:clamp(1.15rem,1.02rem + .5vw,1.4rem); margin-bottom:.4em; }

/* Hoogte van de vaststaande beeldbaan */
.parallax--klein .parallax__binnen{ padding-block:clamp(44px,4vw + 18px,84px); }
.parallax--groot .parallax__binnen{ padding-block:clamp(84px,9vw + 34px,190px); }

/* Baan zonder tekst: puur een brede foto die blijft stilstaan */
.parallax__binnen:empty{ padding-block:clamp(140px,20vw,320px); }