/* Poppins in eigen beheer. Scheelt twee verbindingen naar Google voordat
   de eerste tekst op het scherm staat; font-display:swap zorgt dat de
   tekst meteen leesbaar is en alleen van vorm verandert. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/poppins-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/poppins-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/poppins-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ==========================================================================
   Stel... energiedaden — designsysteem
   Kleuren, typografie en componenten volgens de huisstijlhandleiding v1.2
   ========================================================================== */

:root{
  /* Huisstijlkleuren — exact volgens handleiding (Pantone 5395 / 369 / 144) */
  --navy-100:#09202e;
  --navy-80:#515761;
  --navy-60:#7c8188;
  --navy-40:#a8abb0;
  --navy-20:#d3d5d7;

  --green-100:#65a812;
  --green-80:#84b941;
  --green-60:#a3cb71;
  --green-40:#c1dca0;
  --green-20:#e0eed0;

  --warm-gray:#d8d4d7;
  --orange-cta:#ed8c00;
  --orange-cta-hover:#cf7a00;

  --white:#ffffff;
  --off-white:#f6f5f4;
  --ink:var(--navy-100);

  /* Typografie */
  --font:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Aptos, Roboto, sans-serif;

  /* Ritme */
  --container:1440px;
  /* De ruimte links en rechts van de inhoud. Meebewegend: 24px op een telefoon
     (daaronder wordt de kolom te smal) tot 80px op een breed scherm. */
  --zijmarge:clamp(24px, 5vw, 80px);
  --radius-s:8px;
  --radius-m:16px;
  --radius-l:28px;
  --gap:clamp(2.5rem, 6vw, 6rem);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  font-size:16px;
}
/* margin:0 zet twee dingen van het moederthema Neve recht: dat centreert alle
   afbeeldingen (margin:0 auto) en geeft lijstitems zijmarges. */
img{max-width:100%;display:block;height:auto;margin:0;}
li{margin:0;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
/* Een <button> erft van zichzelf niets van de omliggende tekst: geen lettertype
   en geen kleur. Zonder deze regel pakt hij de kleur van het besturingssysteem,
   en dat is op iOS het systeemblauw in plaats van zwart. */
button{font-family:inherit;color:inherit;}
h1,h2,h3,h4,p{margin:0;}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--zijmarge);
}

/* ---------- Typografie ---------- */
h1,.h1{
  font-weight:800;
  font-size:clamp(2.2rem, 4.4vw, 3.6rem);
  line-height:1.12;
  letter-spacing:-0.01em;
}
h2,.h2{
  font-weight:800;
  font-size:clamp(1.8rem, 3.2vw, 2.6rem);
  line-height:1.16;
  letter-spacing:-0.01em;
}
h3,.h3{
  font-weight:700;
  font-size:clamp(1.2rem, 1.8vw, 1.45rem);
  line-height:1.3;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  font-size:0.8rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--green-100);
}
.eyebrow::before{
  content:"";
  width:18px;height:2px;
  background:var(--orange-cta);
  display:inline-block;
}
.lead{
  font-size:clamp(1.05rem, 1.4vw, 1.25rem);
  color:var(--navy-80);
  line-height:1.6;
}
.on-dark{color:var(--white);}
.on-dark .eyebrow{color:var(--green-60);}
.on-dark .lead{color:var(--navy-20);}
.text-green{color:var(--green-100);}

/* ---------- Buttons ---------- */
.btn{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  border-radius:999px;
  font-weight:700;
  font-size:0.98rem;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-cta{
  background:var(--orange-cta);
  color:var(--white);
}
.btn-cta:hover{background:var(--orange-cta-hover);}
.btn-outline{
  background:transparent;
  border-color:var(--navy-100);
  color:var(--navy-100);
}
.btn-outline:hover{background:var(--navy-100);color:var(--white);}
.btn-outline-light{
  background:transparent;
  border-color:rgba(255,255,255,.55);
  color:var(--white);
}
.btn-outline-light:hover{background:var(--white);color:var(--navy-100);border-color:var(--white);}
.btn-sm{padding:10px 18px;font-size:0.88rem;}
.btn svg{width:16px;height:16px;flex:none;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--navy-20);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:84px;
}
/* Huisstijl: het logo mag niet smaller dan 100px. Verhouding 2,07 : 1, dus
   49px hoog = 101px breed. De balk van 84px laat (84-49)/2 = 17,5px vrij,
   net boven de vereiste X-marge van 101/6 = 16,9px. */
.logo-link{display:flex;align-items:center;height:49px;}
.logo-link img{height:100%;width:auto;}

.main-nav{display:flex;align-items:center;gap:2.2rem;}
.main-nav ul{display:flex;gap:2.2rem;}
.main-nav a{
  font-weight:600;
  font-size:.98rem;
  color:var(--navy-100);
  position:relative;
  padding:6px 0;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  height:2px;width:0;
  background:var(--green-100);
  transition:width .2s ease;
}
.main-nav a:hover::after,
.main-nav a.active::after{width:100%;}
.main-nav a.active{color:var(--green-100);}

.header-actions{display:flex;align-items:center;gap:1rem;}
.nav-toggle{
  display:none;
  width:44px;height:44px;
  border:none;background:none;
  cursor:pointer;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
}
.nav-toggle span{width:24px;height:2px;background:var(--navy-100);display:block;}

@media (max-width:860px){
  /* Twee dingen opgelost:
     1) het gesloten menu werd buiten de viewport geparkeerd (translateX(100%)),
        waardoor de pagina twee keer zo breed werd en horizontaal scrollde;
     2) .site-header heeft backdrop-filter en is daarmee het containing block
        voor position:fixed kinderen — "inset:84px 0 0 0" viel dus binnen de
        header van 85px en het paneel klapte samen tot alleen zijn padding.
     Daarom nu absoluut gepositioneerd onder de (sticky) header, met een
     expliciete hoogte. */
  .main-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    /* Hier stond width:100vw. Die eenheid rekent met de layout-viewport en telt
       een schuifbalk mee; op een uitgezoomde telefoon en in een browser met een
       ruimte-innemende schuifbalk is het paneel daardoor breder dan het scherm,
       en kun je de pagina een stukje opzij slepen naar een witte strook.
       left+right nemen precies de breedte van de kopbalk, wat hetzelfde is als
       het scherm maar zonder die afwijking. */
    height:calc(100vh - 85px);
    height:calc(100dvh - 85px);
    /* Past het menu niet in de hoogte — op een kleine telefoon, of zodra het
       toestel ligt — dan moet je erin kunnen scrollen. Zonder deze regel valt
       het laatste item gewoon weg. overscroll-behavior houdt de pagina
       eronder stil. */
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    background:var(--white);
    flex-direction:column;
    align-items:flex-start;
    padding:2rem 24px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
    overflow-y:auto;
  }
  .main-nav.open{opacity:1;visibility:visible;transform:translateY(0);}
  .main-nav ul{flex-direction:column;gap:1.4rem;width:100%;}
  .main-nav ul li{width:100%;}
  .main-nav a{font-size:1.2rem;}
  .nav-toggle{display:flex;}
}
/* De Contact-knop bleef onder 860px verborgen terwijl Contact ook niet in het
   menu staat — daarmee was Contact op mobiel onbereikbaar. Hij blijft nu staan,
   iets compacter zodat logo, knop en menuknop samen passen. */
@media (max-width:520px){
  .header-actions{gap:.5rem;}
  .btn-cta-header{padding:9px 14px;font-size:.82rem;}
  .nav-toggle{width:38px;}
  /* de balk en het logo blijven hier op volle grootte: kleiner maken zou het
     logo onder de minimale breedte van 100px brengen */
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:flex-end;
  color:var(--white);
  overflow:hidden;
}
.hero.hero-compact{min-height:52vh;align-items:center;}
.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-media img,
.hero-media video{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}
/* De achtergrondvideo in de hero. De poster is dezelfde foto die er eerst
   stond: die vult het kader terwijl de video nog laadt en blijft staan als
   hij niet speelt — bijvoorbeeld in de energiebespaarstand van iOS, waar
   een browser autoplay altijd weigert. */
.hero-video{
  display:block;
  background:var(--navy-100);
  object-fit:cover;
}
/* Bij een stilstaande foto weet je precies hoe donker de achtergrond is; bij
   een video wisselt dat per beeld. Een lucht of een witte bouwhelm kan de
   tekst opeens onleesbaar maken. Daarom hier een iets sterker verloop dan bij
   de fotohero — genoeg om elk beeld aan te kunnen, zonder de video te dempen. */
.hero-media:has(video)::after{
  background:linear-gradient(180deg,
    rgba(9,32,46,.52) 0%,
    rgba(9,32,46,.68) 55%,
    rgba(9,32,46,.94) 100%);
}
@media (prefers-reduced-motion:reduce){
  /* Wie bewegende beelden liever niet ziet krijgt een stilstaand beeld; de
     video wordt in main.js gepauzeerd, waardoor de poster in beeld blijft. */
  .hero-video{pointer-events:none;}
}
.hero-media::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(9,32,46,.35) 0%, rgba(9,32,46,.55) 55%, rgba(9,32,46,.92) 100%);
}
.hero-compact .hero-media::after{
  background:linear-gradient(100deg, rgba(9,32,46,.94) 0%, rgba(9,32,46,.8) 45%, rgba(9,32,46,.55) 100%);
}
.hero-content{
  position:relative;
  z-index:1;
  /* alleen boven/onder instellen: de zijmarge komt van .container, anders valt
     de tekst op mobiel tegen de schermrand */
  padding-top:6rem;
  padding-bottom:4.5rem;
  /* Dit is hetzelfde element als .container, en dat heeft links en rechts een
     zijmarge. Met box-sizing:border-box telt die marge mee in de max-width:
     800px werd dus 800 - 2x80 = 640px tekst, en daar paste "Stel... dat het
     wél kan." op een breed scherm net niet meer op één regel. Door de marge
     erbij op te tellen is de tekstkolom echt 800px breed. */
  max-width:calc(800px + 2 * var(--zijmarge));
}
.hero-compact .hero-content{padding-top:3rem;padding-bottom:3rem;}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem;}
.hero-tagline{margin-top:1.3rem;}

/* ---------- Sections ---------- */
section{padding:var(--gap) 0;}
.section-tight{padding:clamp(2rem,4vw,3.5rem) 0;}
.bg-dark{background:var(--navy-100);color:var(--white);}
.bg-off{background:var(--off-white);}
.bg-green-tint{background:var(--green-20);}
.section-head{max-width:680px;margin-bottom:3rem;}
.section-head.center{margin-inline:auto;text-align:center;}
/* Een sectiekop over de volle breedte: kop en tekst lopen allebei van links
   naar rechts door, zonder kolommen. */
.section-head.breed{max-width:none;}
.section-foot{margin-top:3rem;}

/* ---------- Grids ---------- */
.grid{display:grid;gap:1.75rem;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-5{grid-template-columns:repeat(5,1fr);}
@media (max-width:980px){
  .grid-3,.grid-4,.grid-5{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:620px){
  .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr;}
}

.two-col{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:clamp(2rem,6vw,4.5rem);
  align-items:center;
}
@media (max-width:900px){
  .two-col{grid-template-columns:1fr;}
}

/* ---------- Cards ---------- */
.card{
  background:var(--white);
  border-radius:var(--radius-m);
  overflow:hidden;
  border:1px solid var(--navy-20);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 34px -18px rgba(9,32,46,.35);}
.card-body{padding:1.6rem;}
.card-media{aspect-ratio:4/3;overflow:hidden;position:relative;}
.card-media img{width:100%;height:100%;object-fit:cover;}
.card-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
  background:var(--green-20);
  color:var(--navy-100);
  margin-bottom:.9rem;
}
.card-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green-100);}

.value-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-m);
  padding:2rem;
}
.value-card .num{
  font-weight:800;
  font-size:.85rem;
  color:var(--green-100);
  letter-spacing:.06em;
}

.icon-tile{
  width:52px;height:52px;
  border-radius:14px;
  background:var(--green-20);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:1.1rem;
}
.icon-tile svg{width:26px;height:26px;stroke:var(--navy-100);}
.on-dark .icon-tile{background:rgba(255,255,255,.1);}
.on-dark .icon-tile svg{stroke:var(--green-100);}

/* Monogram avatar (geen gefingeerde foto's van medewerkers) */
.avatar{
  width:88px;height:88px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
  font-size:1.4rem;
  color:var(--white);
  background:linear-gradient(135deg, var(--navy-100), var(--navy-80));
  flex:none;
}
.avatar.alt{background:linear-gradient(135deg, var(--green-100), var(--green-80));}

.avatar-photo{width:88px;height:88px;border-radius:50%;overflow:hidden;flex:none;}
.avatar-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;}

/* ---------- Stats band ---------- */
.stat{text-align:left;}
.stat .num{
  font-weight:800;
  font-size:clamp(2.2rem,4vw,3rem);
  color:var(--green-100);
  line-height:1;
}
.stat .label{color:var(--navy-20);margin-top:.4rem;font-size:.95rem;}

/* ---------- Quote ---------- */
.quote{
  font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.8rem);
  line-height:1.35;
}
.quote::before{content:"“";color:var(--green-100);}
.quote::after{content:"”";color:var(--green-100);}

/* ---------- Forms ---------- */
.field{margin-bottom:1.2rem;}
.field label{
  display:block;
  font-weight:600;
  font-size:.9rem;
  margin-bottom:.4rem;
}
.field input,.field textarea{
  width:100%;
  padding:13px 16px;
  border-radius:var(--radius-s);
  border:1.5px solid var(--navy-20);
  font-family:inherit;
  font-size:.98rem;
  background:var(--white);
  color:var(--ink);
}
.field input:focus,.field textarea:focus{
  outline:none;
  border-color:var(--green-100);
}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;}
@media (max-width:560px){.field-row{grid-template-columns:1fr;}}
.form-note{font-size:.85rem;color:var(--navy-60);margin-top:.6rem;}
/* De melding onder een formulier. Hij staat er altijd (leeg), zodat een
   schermlezer hem voorleest zodra main.js er tekst in zet. */
.form-melding{
  background:var(--green-20);
  border:1px solid var(--green-60);
  color:var(--navy-100);
  padding:14px 18px;
  border-radius:var(--radius-s);
  font-weight:600;
  margin-top:1rem;
}
.form-melding:empty{padding:0;border:0;margin:0;}
.form-melding.is-fout{background:var(--white);border:1.5px solid var(--navy-100);}
.form-raster .form-melding{grid-column:1 / -1;margin-top:0;}

/* Het veld dat alleen robots invullen: buiten beeld, niet weg, want een
   veld met display:none slaan robots over. */
.veld-val{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- Filters (projecten) ---------- */
.filters{display:flex;gap:.7rem;flex-wrap:wrap;}
.filter-btn{
  /* appearance:none houdt Safari op de telefoon van de eigen knopopmaak af;
     de kleur staat er expliciet bij zodat er niets van het toestel afhangt */
  -webkit-appearance:none;
  appearance:none;
  padding:10px 18px;
  border-radius:999px;
  border:1.5px solid var(--navy-20);
  background:var(--white);
  color:var(--navy-100);
  font-weight:600;
  font-size:.9rem;
  cursor:pointer;
  transition:all .15s ease;
}
.filter-btn:hover{border-color:var(--green-100);}
.filter-btn.active{background:var(--navy-100);border-color:var(--navy-100);color:var(--white);}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy-100);color:var(--white);padding:5rem 0 0;}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1.2fr;
  gap:2.5rem;
  padding-bottom:3.5rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h4{
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--green-100);
  margin-bottom:1.1rem;
}
.footer-grid li{margin-bottom:.35rem;}
/* met wat lucht eromheen is een link op een telefoon goed te raken;
   zonder deze regel is hij maar 21px hoog */
.footer-grid a{display:inline-block;padding:.3rem 0;color:var(--navy-20);font-size:.95rem;}
.footer-grid a:hover{color:var(--white);}
.footer-logo img{height:49px;width:auto;margin-bottom:1.1rem;} /* 101px breed; 1,1rem = 17,6px vrije ruimte eronder */
.footer-grid p{color:var(--navy-20);font-size:.95rem;max-width:280px;}
.newsletter-form{display:flex;gap:.6rem;margin-top:1rem;}
.newsletter-form input{
  flex:1;
  padding:12px 14px;
  border-radius:var(--radius-s);
  border:1.5px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);
  color:var(--white);
  font-family:inherit;
}
.newsletter-form input::placeholder{color:var(--navy-40);}

/* ==========================================================================
   Nieuwsbriefformulier (MC4WP) in de footer
   ========================================================================== */
.nieuwsbrief .mc4wp-form{
  --nb-gap:.6rem;              /* één waarde voor alle tussenruimte */
  margin-top:1rem;
}
.nieuwsbrief .nb-rij{
  display:flex;
  gap:var(--nb-gap);          /* horizontale ruimte tussen de velden */
  margin-bottom:var(--nb-gap);/* verticale ruimte tot de volgende rij — zelfde waarde */
}
.nieuwsbrief .nb-rij:last-of-type{
  margin-bottom:0;            /* onder de laatste rij geen extra ruimte */
}
.nieuwsbrief .mc4wp-form input{
  flex:1;
  min-width:0;                /* anders krimpen twee velden niet naast elkaar */
  padding:12px 14px;
  border-radius:var(--radius-s);   /* de vorige, zachtere afronding */
  border:1.5px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.06);
  color:var(--white);
  font-family:inherit;
  font-size:1rem;
}
.nieuwsbrief .mc4wp-form input::placeholder{color:var(--navy-40);}
.nieuwsbrief .mc4wp-form input:focus{
  outline:none;
  border-color:var(--green-100);
}
.nieuwsbrief .mc4wp-form .btn{flex:none;}   /* de knop houdt zijn eigen breedte, het e-mailveld vult de rest */

/* MC4WP zet zelf een meldingsregel onder het formulier (succes/fout). */
.nieuwsbrief .mc4wp-response{
  margin-top:var(--nb-gap);
  font-size:.9rem;
  color:var(--navy-20);
}
.nieuwsbrief .mc4wp-response p{margin:0;}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:1rem;
  padding:1.6rem 0;
  font-size:.82rem;
  color:var(--navy-40);
}
.footer-bottom a{color:var(--navy-40);}
.footer-bottom a:hover{color:var(--white);}
.social-row{display:flex;gap:.7rem;margin-top:1.2rem;}
.social-row a{
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
}
.social-row svg{width:16px;height:16px;stroke:var(--white);fill:none;}
/* Het LinkedIn-teken is een gevulde vorm, geen lijnicoon */
.social-row .icon-linkedin{width:15px;height:15px;fill:var(--white);stroke:none;}
.social-row.on-light .icon-linkedin{fill:var(--navy-100);}
.social-row.on-light svg{stroke:var(--navy-100);}
.social-row a:hover .icon-linkedin{fill:var(--white);}
.social-row.on-light a:hover svg{stroke:var(--white);}
.social-row.on-light a:hover .icon-linkedin{fill:var(--white);}
.social-row a:hover{background:var(--green-100);border-color:var(--green-100);}

/* ---------- CTA band ---------- */
.cta-band{
  border-radius:var(--radius-l);
  background:linear-gradient(120deg, var(--navy-100), #0e2c3d);
  color:var(--white);
  padding:clamp(2.5rem,5vw,4.5rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}
.cta-band h2{max-width:520px;}
/* Een band met een inleiding erbij: zonder maat zou het tekstblok de hele rij
   pakken en vallen de knoppen eronder, met een lege rechterhelft. Met een
   bovengrens op de tekst staan de knoppen rechts op dezelfde regel, precies
   waar .cta-band met space-between voor bedoeld is. */
.cta-band .cta-tekst{flex:1 1 440px;max-width:640px;min-width:0;}
.cta-band .cta-tekst h2{max-width:none;}
.cta-band .cta-knoppen{display:flex;gap:1rem;flex-wrap:wrap;flex:0 0 auto;}
@media (max-width:860px){
  /* onder elkaar: de knoppen krijgen de volle breedte van de band */
  .cta-band .cta-knoppen{width:100%;}
}

/* ---------- utilities ---------- */
.mt-0{margin-top:0;}
/* width:100% is nodig: met alleen aspect-ratio + min-height leidt de browser
   de breedte af uit de hoogte (16/6 x 300px = 800px) en breekt het kader
   op mobiel door de containermarge heen. */
.rounded-img{border-radius:var(--radius-m);overflow:hidden;width:100%;}
.tag-row{display:flex;gap:.6rem;flex-wrap:wrap;}
.pill{
  font-size:.78rem;font-weight:700;
  padding:5px 12px;border-radius:999px;
  background:var(--navy-20);color:var(--navy-100);
}
.stat-row{display:flex;gap:clamp(1.5rem,4vw,3.5rem);flex-wrap:wrap;}
.stat-row .stat .label{color:var(--navy-60);}
.two-col.reverse{grid-template-columns:.9fr 1.1fr;}
.two-col.reverse > *:first-child{order:2;}
@media (max-width:900px){.two-col.reverse > *:first-child{order:0;}}
.media-frame{position:relative;border-radius:var(--radius-m);overflow:hidden;aspect-ratio:4/5;}
.media-frame img{width:100%;height:100%;object-fit:cover;}
.media-frame.wide{aspect-ratio:16/10;}
.badge-float{
  position:absolute;left:1.4rem;bottom:1.4rem;
  background:var(--white);
  border-radius:var(--radius-s);
  padding:.9rem 1.2rem;
  box-shadow:0 14px 30px -12px rgba(9,32,46,.35);
  display:flex;gap:.9rem;align-items:center;
}
.badge-float .num{font-weight:800;color:var(--green-100);font-size:1.3rem;line-height:1;}
.badge-float .label{font-size:.78rem;color:var(--navy-60);max-width:120px;}
/* op een smal scherm past 'Naam · Functie' niet op één regel; dan breekt
   hij af in plaats van dat de functie uit het vak loopt */
.people-line{display:flex;align-items:center;flex-wrap:wrap;gap:.2rem .9rem;margin-top:1.6rem;}
.people-line .name,.people-line .role{min-width:0;overflow-wrap:anywhere;}
.people-line .name{font-weight:700;font-size:.92rem;}
.people-line .role{font-size:.82rem;color:var(--navy-60);}

/* ==========================================================================
   Muiseffect (custom cursor) — overgenomen uit design "Website 3"
   ========================================================================== */
#cursor-dot,#cursor-ring{
  position:fixed;top:-100px;left:-100px; /* buiten beeld tot de eerste mousemove */
  pointer-events:none;
  z-index:9999;
  border-radius:50%;
  transform:translate(-50%,-50%);
}
#cursor-dot{width:6px;height:6px;background:var(--green-100);}
#cursor-ring{
  width:34px;height:34px;
  border:1.5px solid rgba(101,168,18,.55);
  transition:width .25s cubic-bezier(.16,.84,.44,1),
             height .25s cubic-bezier(.16,.84,.44,1),
             border-color .25s ease,
             background .25s ease;
}
#cursor-ring.hover{
  width:64px;height:64px;
  background:rgba(101,168,18,.08);
  border-color:var(--green-100);
}
@media (pointer:coarse){#cursor-dot,#cursor-ring{display:none;}}

/* ==========================================================================
   Fotoblokken — afbeelding vult het hele blok, titel eroverheen
   (oplossingen- en projectengrid, naar design "Website 3")
   ========================================================================== */
.photo-card{
  position:relative;
  display:block;
  border-radius:var(--radius-m);
  overflow:hidden;
  aspect-ratio:4/5;
  background:var(--navy-100);
}
.photo-card img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s cubic-bezier(.16,.84,.44,1), filter .6s ease;
}
.photo-card:hover img{transform:scale(1.05);}
.photo-card::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(9,32,46,0) 28%, rgba(9,32,46,.92) 100%);
}
.photo-card .cap{
  position:absolute;
  left:20px;right:20px;bottom:20px;
  z-index:2;
}
.photo-card .cap h3{color:var(--white);}
.photo-card .cap .tag{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--green-100); /* het felle huisstijlgroen, zelfde als de cursor */
  margin-bottom:.4rem;
}

/* Oplossingen: vijf blokken naast elkaar, alleen de titel (zoals design "Website 3") */
.solutions-grid{gap:1.25rem;}
.solutions-grid .photo-card{aspect-ratio:4/5;}
.solutions-grid .photo-card::after{
  background:linear-gradient(180deg, rgba(9,32,46,0) 30%, rgba(9,32,46,.92) 100%);
}
.solutions-grid .photo-card .cap{left:20px;right:20px;bottom:20px;}
.solutions-grid .photo-card .cap h3{
  font-size:clamp(1.3rem,2vw,1.6rem);
  font-weight:800;
  line-height:1.15;
  /* geen min-height: de titel staat onderaan het blok, dus een titel van één
     regel lijnt uit met de laatste regel van de titels van twee regels */
}

/* Projecten: groter blok, tags op één hoogte en titels op één lijn */
.projects-grid .photo-card{aspect-ratio:3/4;}
.projects-grid .photo-card .cap{left:26px;right:26px;bottom:26px;}
.projects-grid .photo-card .cap .tag{margin-bottom:.55rem;}
.projects-grid .photo-card .cap h3{
  font-size:clamp(1.3rem,1.6vw,1.7rem);
  line-height:1.25;
  min-height:2.5em; /* twee regels — houdt tag en titelregels gelijk over de kaarten */
}

/* Tussenstap voor de vijf oplossingenblokken (zoals in design "Website 3") */
@media (max-width:1180px){.solutions-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:980px){.solutions-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.solutions-grid{grid-template-columns:1fr;}}

/* ==========================================================================
   Contactblok met medewerkers — tekst + knop links, 2x2 vierkante foto's rechts
   ========================================================================== */
.cta-band.cta-contact{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,4rem);
  align-items:center;
  padding:clamp(2.2rem,4.5vw,3.8rem);
}
@media (max-width:900px){
  .cta-band.cta-contact{grid-template-columns:1fr;}
}
.cta-contact-text .lead{margin-top:1rem;max-width:46ch;}
.cta-contact-text .btn{margin-top:2.2rem;}

/* 2x2 raster met vierkante portretten */
.people-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.1rem;
}
/* Het blok staat leeg in de opmaak en komt pas in beeld zodra main.js de
   collega's uit WordPress heeft opgehaald. display:grid zou van [hidden]
   winnen, vandaar deze regel. */
.people-grid[hidden]{display:none;}
/* Hetzelfde voor een hele sectie die op inhoud uit WordPress wacht: zonder
   inhoud hoort de kop erboven er ook niet te staan. */
section[hidden]{display:none;}
.people-grid .photo-card{aspect-ratio:1/1;}
/* Bovenkant vasthouden zodat er nooit een hoofd wordt afgesneden */
.people-grid .photo-card img{object-position:50% 0%;}
.people-grid .photo-card::after{
  background:linear-gradient(180deg, rgba(9,32,46,0) 45%, rgba(9,32,46,.88) 100%);
}
.people-grid .photo-card .cap{left:16px;right:16px;bottom:14px;}
.people-grid .photo-card .cap h3{font-size:1.02rem;font-weight:700;}

/* ==========================================================================
   Storytellingblokken (voorheen de VONK-waarden)
   ========================================================================== */
.story-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-m);
  padding:2rem;
  min-height:210px;
  display:flex;
  flex-direction:column;
}
.story-card .story-index{
  font-weight:800;
  font-size:.85rem;
  letter-spacing:.06em;
  color:var(--green-100);
  margin-bottom:.7rem;
}
.story-card .story-placeholder{
  color:var(--navy-40);
  font-size:.92rem;
  margin-top:auto;
}
/* De echte verhaaltekst in een blok. Lichter dan wit maar goed leesbaar op
   navy, en met wat ruimte onder de titel. */
.story-card .story-tekst{
  margin-top:.8rem;
  color:var(--navy-20);
  font-size:.95rem;
  line-height:1.65;
}

/* ==========================================================================
   Inline woordmerk — vervangt de getypte "Stel..." in de tekst
   Schaalt mee met de omliggende tekstgrootte via em.
   ========================================================================== */
.brand-logo{
  display:inline-block;
  height:1em;
  min-height:34px; /* 34 x 2,97 = 101px: nooit onder de minimale logobreedte */
  width:auto;
  vertical-align:-0.1em;
}
/* In eyebrows (klein, uppercase, ruime letterafstand) iets compacter en
   met een marge zodat het woordmerk niet tegen de tekst aan plakt. */
.eyebrow .brand-logo{
  height:1.15em;
  vertical-align:-0.24em;
  /* alleen links ruimte: anders ontstaat er een gat voor een aansluitend
     leesteken, zoals in "Waarom wél werken bij Stel...?" */
  margin-left:.1em;
}
h1 .brand-logo,h2 .brand-logo{vertical-align:-0.06em;}

/* ==========================================================================
   Responsive — tablet en mobiel
   ========================================================================== */
@media (max-width:1024px){
  /* Contactblok: foto's onder de tekst, knop houdt zijn plek onder de tekst */
  .cta-band.cta-contact{gap:2.5rem;}
}

@media (max-width:900px){
  .cta-band.cta-contact{padding:clamp(1.6rem,4vw,2.4rem);}
  .cta-contact-text .btn{margin-top:1.6rem;}
  .people-grid{max-width:420px;}
}

@media (max-width:768px){
  .projects-grid .photo-card .cap{left:20px;right:20px;bottom:20px;}
  .cta-band{padding:clamp(1.8rem,5vw,2.6rem);}
  .cta-band h2{max-width:none;}
  .story-card{padding:1.5rem;min-height:0;}
}

@media (max-width:620px){
  /* Oplossingen: brede banners in plaats van vijf hoge blokken achter elkaar */
  .solutions-grid .photo-card{aspect-ratio:16/9;}
  .solutions-grid .photo-card .cap h3{font-size:1.35rem;}
  /* Projecten: iets minder hoog op een smal scherm; uitlijnen heeft in één
     kolom geen zin meer, dus de vaste titelhoogte kan eraf */
  .projects-grid .photo-card{aspect-ratio:4/5;}
  .projects-grid .photo-card .cap h3{min-height:0;}
  .section-head{margin-bottom:2.2rem;}
}

@media (max-width:480px){
  /* Geen tekst tegen de schermrand: alles houdt de containermarge aan */
  .hero-content{padding-top:4.5rem;padding-bottom:3rem;}
  /* .btn staat op nowrap zodat een knop midden in een zin niet afbreekt. Op
     een smal scherm is een knop hier juist zo breed als het scherm, en past een
     lange tekst als "Plan een vrijblijvend gesprek" niet op één regel. */
  .hero-actions .btn,
  .cta-knoppen .btn{width:100%;justify-content:center;white-space:normal;text-align:center;}
  .stat-row{gap:1.5rem;}
  .newsletter-form{flex-wrap:wrap;}
  .newsletter-form input{min-width:0;flex:1 1 160px;}
  .photo-card .cap{left:16px;right:16px;bottom:16px;}
  .people-grid{gap:.75rem;}
  .people-grid .photo-card .cap h3{font-size:.82rem;line-height:1.2;}
  /* naam van twee regels blijft leesbaar op een kleine vierkante foto */
  .people-grid .photo-card::after{
    background:linear-gradient(180deg, rgba(9,32,46,0) 22%, rgba(9,32,46,.92) 100%);
  }
  .quote{font-size:1.25rem;}
}

/* Lange woorden nooit door de rand heen laten breken */
h1,h2,h3,h4,p,.lead,.eyebrow{overflow-wrap:break-word;}

/* ==========================================================================
   Paginakop zonder afbeelding — links uitgelijnd
   ========================================================================== */
.page-head{
  padding-top:clamp(3rem,6vw,5.5rem);
  padding-bottom:clamp(2.2rem,4vw,3.2rem);
}
.page-head h1{margin-top:.9rem;}
.page-head .lead{margin-top:1.3rem;max-width:64ch;}
/* met .tight sluit de sectie eronder direct op de kop aan */
.page-head.tight + section{padding-top:0;}

/* ==========================================================================
   Teamportretten — de foto vult het hele blok, naam en functie links onderin
   ========================================================================== */
.team-grid .photo-card{aspect-ratio:3/4;}
/* bovenkant vasthouden zodat er geen hoofden worden afgesneden */
.team-grid .photo-card img{object-position:50% 0%;}
.team-grid .photo-card::after{
  background:linear-gradient(180deg, rgba(9,32,46,0) 45%, rgba(9,32,46,.88) 100%);
}
.team-grid .photo-card .cap{left:1.3rem;right:1.3rem;bottom:1.2rem;}
.team-grid .photo-card .cap h3{font-size:1.1rem;font-weight:700;}
.team-grid .photo-card .cap .role{
  display:block;
  margin-top:.15rem;
  font-size:.85rem;
  color:rgba(255,255,255,.78);
}
@media (max-width:620px){
  /* twee kolommen houden: acht portretten op volle breedte wordt een eindeloze rij */
  .team-grid{grid-template-columns:repeat(2,1fr);gap:.9rem;}
  .team-grid .photo-card .cap{left:.9rem;right:.9rem;bottom:.9rem;}
  .team-grid .photo-card .cap h3{font-size:.95rem;}
  .team-grid .photo-card .cap .role{font-size:.76rem;}
  /* 'Accountmanager' is langer dan het kaartje breed is op een klein
     scherm; liever afbreken dan uit het vak lopen */
  .team-grid .photo-card .cap h3,
  .team-grid .photo-card .cap .role{overflow-wrap:anywhere;}
}
/* Op de smalste telefoons is het kaartje maar 129px breed; met minder marge
   past 'Accountmanager' net wel op één regel in plaats van afgebroken. */
@media (max-width:400px){
  .team-grid .photo-card .cap{left:.6rem;right:.6rem;bottom:.7rem;}
  /* langere naam + functie beslaat op een klein blok meer regels, dus de
     gradient loopt hier verder door om leesbaar te blijven */
  .team-grid .photo-card::after{
    background:linear-gradient(180deg, rgba(9,32,46,0) 28%, rgba(9,32,46,.9) 100%);
  }
}

/* ==========================================================================
   Missie & visie — eyebrow, kop en tekst op dezelfde hoogte in beide kolommen
   Via subgrid delen de twee kolommen dezelfde drie rijen, dus de koptekst
   bepaalt samen de rijhoogte en beide alinea's beginnen op één lijn. Zonder
   subgrid-ondersteuning vallen de blokken terug op normale marges.
   ========================================================================== */
.mission-grid{grid-template-rows:auto auto auto;row-gap:0;}
.mission-grid > div{
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 3;
}
.mission-grid h2{margin-top:.7rem;}
.mission-grid .lead{margin-top:1rem;}
@media (max-width:620px){
  /* in één kolom staan de blokken onder elkaar: subgrid eraf en weer ruimte
     tussen missie en visie */
  .mission-grid{grid-template-rows:none;row-gap:2.5rem;}
  .mission-grid > div{display:block;grid-row:auto;}
}

/* ==========================================================================
   Losse portretfoto in een contactblok — geen cirkel, zelfde stijl als de
   portretten in het contactblok op de homepage
   ========================================================================== */
.contact-portrait{
  flex:none;
  width:clamp(124px,15vw,170px);
  aspect-ratio:1/1;
  border-radius:var(--radius-m);
  overflow:hidden;
}
.contact-portrait img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 0%; /* bovenkant vasthouden, dus geen afgesneden hoofd */
}

/* ==========================================================================
   Licht grijze kaarten — vallen op tegen een witte sectie
   5% van het huisstijlnavy (#09202e), op wit ongeveer #f3f4f5
   ========================================================================== */
.cards-soft .card{
  background:rgba(9,32,46,.05);
  border-color:transparent;
}
.cards-soft .card:hover{background:rgba(9,32,46,.07);}

/* --------------------------------------------------------------------------
   Logostrook met opdrachtgevers
   Logo's verschillen sterk in vorm: een liggend gemeentewapen naast een klein
   vierkant beeldmerk. Daarom krijgt elk logo hetzelfde vak met een vaste
   hoogte en past de afbeelding daarbinnen (contain), zodat ze optisch even
   groot ogen en niets wordt bijgesneden. Ze staan in grijs en kleuren bij
   aanwijzen; zo trekt de strook geen aandacht weg van de tekst eromheen.
   -------------------------------------------------------------------------- */
.logo-strip{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:clamp(1.4rem,3vw,2.6rem);
}
.logo-strip img{
  width:auto;
  height:clamp(34px,4.5vw,52px);
  max-width:150px;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.62;
  transition:filter .25s ease, opacity .25s ease;
}
.logo-strip img:hover{filter:none;opacity:1;}
@media (prefers-reduced-motion:reduce){
  .logo-strip img{transition:none;}
}

/* --------------------------------------------------------------------------
   Klikbare kaart met een "Meer info"-knop
   De hele kaart is de link (<a class="card">), dus de knop is een <span> —
   een <a> in een <a> mag niet. De kaart wordt een flexkolom zodat de knop
   onderaan uitlijnt, ook als de ene kaart meer tekst heeft dan de andere.
   -------------------------------------------------------------------------- */
a.card{display:flex;flex-direction:column;color:inherit;}
a.card > .card-body{display:flex;flex-direction:column;flex:1;}
.kaart-actie{margin-top:auto;padding-top:1.3rem;}
/* De knop reageert mee op hover van de hele kaart, niet alleen van de knop zelf */
a.card:hover .kaart-actie .btn-outline,
a.card:focus-visible .kaart-actie .btn-outline{background:var(--navy-100);color:var(--white);}
a.card:hover .kaart-actie .btn{transform:none;}

/* --------------------------------------------------------------------------
   Lange samenstellingen netjes afbreken
   "Verduurzamingsprogramma's" past op smalle schermen niet op een regel. In de
   tekst staat een zacht afbreekstreepje (&shy;); dat is onzichtbaar tot de
   regel daadwerkelijk breekt, en toont dan een streepje op die plek.
   -------------------------------------------------------------------------- */
.card h3,.page-head h1{overflow-wrap:break-word;}

/* ==========================================================================
   Contactheader met teamfoto
   De foto is 2400x900 (verhouding 8:3) met de mensen links en rechts en een
   open middenruimte. De achtergrond van de foto is exact --navy-100 (#09202e),
   dus de sectie sluit er naadloos op aan.

   Twee varianten, want de foto is erg breed:
   - standaard: de hele foto als band bovenin, tekst eronder. Met object-fit:
     cover zou de foto zo ver inzoomen dat of de buitenste twee mensen
     wegvallen, of alleen de lege middenruimte overblijft.
   - vanaf 1400px: de hero is hoog genoeg (>=525px) om de foto te vullen én de
     tekst onder de gezichten in de open middenruimte te zetten.
   ========================================================================== */
.hero.hero-team{
  min-height:0;
  align-items:flex-end;
  background:var(--navy-100);
  /* de generieke sectiemarge eraf: de afstand tussen foto en tekst wordt
     hieronder precies geregeld via de padding van .hero-content */
  padding:0;
}
/* Tekst bovenaan, foto eronder: de foto wordt onderin het kader gezet
   (object-position 100%), zodat de collega's op de onderrand van de sectie
   staan. De bovenkant van de foto is effen navy en loopt dus naadloos over in
   het navy achter de tekst. */
.hero-team .hero-media img{object-fit:contain;object-position:50% 100%;}
.hero-team .hero-media::after{background:none;}
.hero-team .hero-content{
  padding-top:2.6rem;
  padding-bottom:calc(37.5vw + 1.4rem);
}

@media (min-width:1400px){
  .hero.hero-team{min-height:min(37.5vw,640px);}
  .hero-team .hero-media img{object-fit:cover;object-position:50% 50%;}
  .hero-team .hero-media::after{
    /* de tekst staat op de navy achtergrond van de foto zelf, dus nauwelijks
       verduistering nodig; onderin iets donkerder om het beeld af te ronden */
    background:linear-gradient(180deg,
      rgba(9,32,46,.05) 0%,
      rgba(9,32,46,.12) 50%,
      rgba(9,32,46,.42) 100%);
  }
  .hero-team .hero-content{
    padding-top:4rem;
    padding-bottom:8.4rem;
    /* De foto heeft een open middenruimte van 37% van de breedte. De tekst
       bleef daar met 680px buiten vallen en liep over de lichte kleding van
       de collega's, waar wit slecht leest. Nu blijft hij binnen die ruimte. */
    max-width:calc(34vw + 80px);
    /* zachte schaduw als achtervang waar de tekst toch een persoon raakt */
    text-shadow:0 2px 16px rgba(9,32,46,.5);
  }
}

@media (max-width:620px){
  /* Op een telefoon wordt de hele foto over de volle breedte een strook van
     nog geen 150px hoog: de vier collega's zijn dan niet meer te zien. Daarom
     hier een hogere band met een uitsnede op de linker twee, zodat ze op een
     normaal formaat in beeld staan. De uitsnede is zo gekozen dat de rechter
     twee er net buiten vallen en er niemand halverwege wordt afgekapt. */
  .hero-team{--bandhoogte:min(112vw, 430px);}
  /* De foto staat onderaan en de tekst erboven. De bovenste 23% van de foto is
     effen navy, dus die loopt naadloos over in het navy achter de tekst; de
     collega's staan daardoor netjes onderaan in plaats van los in beeld. */
  .hero-team .hero-media{top:auto;bottom:0;height:var(--bandhoogte);overflow:hidden;}
  /* De linker twee collega's staan op 0,4%–29,7% van de fotobreedte; hun
     midden ligt dus op 15%. Door de foto op ware verhouding te tonen en dat
     punt op het midden van het scherm te leggen, staan ze precies gecentreerd.
     Met object-position kan dat niet: daarvoor zou de uitsnede links buiten de
     foto moeten beginnen. */
  .hero-team .hero-media img{
    position:absolute;
    bottom:0;
    left:50%;
    width:auto;
    max-width:none;
    height:100%;
    transform:translateX(-15%);
  }
  /* geen verduistering: er komt niets onder de foto, dus de onderrand hoeft
     niet weg te lopen en blijven de collega's helder */
  .hero-team .hero-media::after{background:none;}
  .hero-team .hero-content{
    padding-top:2.6rem;
    padding-bottom:calc(var(--bandhoogte) + 1.4rem);
  }
}

/* ==========================================================================
   Submenu onder Oplossingen
   Op desktop een breed paneel met dezelfde vijf fotoblokken als op de
   homepage; in het mobiele menu blijven het gewone ingesprongen tekstlinks.
   ========================================================================== */
.main-nav .has-sub{position:relative;}
/* Pijltje achter "Oplossingen". Via ::before, want ::after is al in gebruik
   voor het groene streepje onder de menu-items. */
.main-nav .has-sub > a{padding-right:18px;}
.main-nav .has-sub > a::before{
  content:"";
  position:absolute;
  right:2px;
  top:50%;
  width:6px;
  height:6px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translate(0,-75%) rotate(45deg);
  transition:transform .2s ease;
  opacity:.7;
}
.main-nav .has-sub:hover > a::before,
.main-nav .has-sub:focus-within > a::before,
.main-nav .has-sub.sub-open > a::before{
  transform:translate(0,-25%) rotate(225deg);
  opacity:1;
}
.main-nav .sub-menu{
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.main-nav .has-sub:hover .sub-menu,
.main-nav .has-sub:focus-within .sub-menu,
.main-nav .has-sub.sub-open .sub-menu{
  opacity:1;
  visibility:visible;
}

@media (min-width:861px){
  /* de menu-items lopen over de volle hoogte van de balk, zodat de muis van
     de link naar het paneel kan zonder door een gat te gaan */
  .main-nav{align-self:stretch;}
  .main-nav > ul{height:100%;align-items:stretch;}
  .main-nav > ul > li{display:flex;align-items:center;}
  /* het paneel lijnt uit op de header, niet op het menu-item */
  .main-nav .has-sub{position:static;}
  .main-nav .sub-menu{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    margin-inline:auto;
    width:min(1100px, calc(100vw - 2 * var(--zijmarge)));
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:.9rem;
    padding:1.1rem;
    background:var(--white);
    border:1px solid var(--navy-20);
    border-radius:var(--radius-m);
    box-shadow:0 26px 50px -26px rgba(9,32,46,.45);
    transform:translateY(-8px);
  }
  .main-nav .has-sub:hover .sub-menu,
  .main-nav .has-sub:focus-within .sub-menu,
  .main-nav .has-sub.sub-open .sub-menu{transform:translateY(0);}

  /* let op de selector: .main-nav a geeft elke menulink 6px padding boven en
     onder, en wint van een losse .menu-tegel. Die padding liet de donkere
     achtergrond van de tegel als rand rond de foto doorschijnen. */
  .main-nav .sub-menu .menu-tegel{padding:0;}
  .menu-tegel{
    position:relative;
    display:block;
    aspect-ratio:4/5;
    border-radius:var(--radius-s);
    overflow:hidden;
    background:var(--navy-100);
  }
  .menu-tegel img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .5s cubic-bezier(.16,.84,.44,1);
  }
  .menu-tegel:hover img{transform:scale(1.06);}
  /* dit verloop moet het groene streepje van .main-nav a::after overschrijven,
     inclusief de breedte en hoogte die daar zijn gezet */
  .main-nav .sub-menu .menu-tegel::after{
    content:"";
    position:absolute;
    inset:0;
    width:auto;
    height:auto;
    background:linear-gradient(180deg, rgba(9,32,46,0) 32%, rgba(9,32,46,.92) 100%);
    transition:none;
  }
  .menu-tegel span{
    position:absolute;
    left:14px;
    right:14px;
    bottom:12px;
    z-index:2;
    color:var(--white);
    font-weight:800;
    font-size:.98rem;
    line-height:1.15;
  }
}

@media (max-width:860px){
  /* in het mobiele paneel: geen fotoblokken maar een ingesprongen lijst */
  .main-nav .has-sub > a{padding-right:0;}
  .main-nav .has-sub > a::before{display:none;}
  .main-nav .sub-menu{
    position:static;
    opacity:1;
    /* LET OP: hier stond 'visible'. visibility erft door, dus een kind mag
       zichzelf weer zichtbaar maken binnen een verborgen ouder — en dan is het
       ook weer aanklikbaar. Het gesloten menu (.main-nav, visibility:hidden)
       liet daardoor vijf onzichtbare links van 452px breed over de hero liggen:
       op een telefoon sprong je bij een tik boven in de pagina opeens naar een
       oplossingspagina. Met 'inherit' volgt het paneel gewoon het menu. */
    visibility:inherit;
    transform:none;
    /* niet de kolom-gap van het hoofdmenu overnemen: de ruimte komt hier van
       de padding van de links zelf */
    display:block;
    gap:0;
    padding:.6rem 0 .2rem;
    /* inspringen zonder streepje: de verspringing maakt al duidelijk dat
       deze items onder Oplossingen vallen */
    margin-left:.9rem;
  }
  .menu-tegel{display:block;padding:.45rem .9rem;}
  .menu-tegel img{display:none;}
  .main-nav .sub-menu .menu-tegel::after{display:none;}
  .menu-tegel span{
    font-size:1rem;
    font-weight:500;
    color:var(--navy-80);
  }
  .menu-tegel:hover span{color:var(--green-100);}
}

/* ==========================================================================
   Krimpen op zeer smalle schermen
   Een flexitem krijgt standaard min-width:auto en wordt dus nooit smaller dan
   zijn langste woord. Bij woorden als "energievraagstuk" duwde dat de pagina
   op 320px breder dan het scherm.
   ========================================================================== */
.cta-band > div{min-width:0;}
@media (max-width:420px){
  h1,h2,h3{overflow-wrap:anywhere;}
}

/* ==========================================================================
   Kop met twee zinnen, elk op één regel
   De zinnen zijn breder dan hun kolom, dus schaalt de lettergrootte mee met de
   kolom (cqi) in plaats van met de viewport. Daardoor past elke zin altijd op
   één regel zonder dat er iets buiten de kolom valt. Zodra de kolommen onder
   elkaar staan is er ruimte genoeg en mag de tekst gewoon afbreken.
   ========================================================================== */
.claim-line{display:block;}
@supports (container-type:inline-size){
  .claim-col{container-type:inline-size;}
  @media (min-width:901px){
    .claim{font-size:min(2.6rem, 5.2cqi);}
    .claim-line{white-space:nowrap;}
  }
}

/* ==========================================================================
   Cijferrij met knop ernaast
   ========================================================================== */
.stat-row-cta{align-items:center;row-gap:1.5rem;}

/* ==========================================================================
   Contactblok: teamleden wisselen één voor één
   De kaart vervaagt kort tijdens het wisselen. Wie bewegende beelden liever
   niet ziet, krijgt een stilstaand blok (zie main.js).
   ========================================================================== */
/* De nieuwe foto komt als tweede laag over de oude heen liggen en vervaagt
   daar overheen. Zo zie je nooit de achtergrond van het blok. */
.people-grid .photo-card::after{z-index:1;}   /* verloop boven beide lagen */
.people-grid .photo-card .wissellaag{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 0%;
  z-index:0;                                   /* boven de onderste foto */
  opacity:0;
  transition:opacity .6s ease;
}
.people-grid .photo-card .wissellaag.zichtbaar{opacity:1;}
/* de naam vervaagt tegelijk met de foto: de oude naam gaat uit terwijl de
   nieuwe erover heen komt, zodat beide op hetzelfde moment wisselen */
.people-grid .photo-card .cap{transition:opacity .6s ease;}
.people-grid .photo-card .cap.vervaagt{opacity:0;}
.people-grid .photo-card .wissellaag-cap{
  z-index:3;
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
}
.people-grid .photo-card .wissellaag-cap.zichtbaar{opacity:1;}

/* ==========================================================================
   Over ons — vacaturekop en de foto bij de quote
   ========================================================================== */
/* de kop breekt bewust na "leukste"; de standaard max-width van 520px zou de
   tweede regel dan alsnog laten afbreken */
.cta-band h2.vacature-kop{max-width:none;}

/* vierkante foto naast de quote, niet groter dan nodig */
.quote-foto{aspect-ratio:1/1;max-width:400px;margin-left:auto;width:100%;}
@media (max-width:900px){
  /* De twee kolommen staan hier onder elkaar. De foto is smaller dan de kolom,
     dus zonder deze regel plakt hij tegen de linkerrand; midden onder de tekst
     staat rustiger. */
  .quote-foto{margin-inline:auto;max-width:340px;}
}

/* De kerncijfers staan naast elkaar zolang ze samen op één regel passen. Op een
   telefoon lukt dat niet: dan kwamen er twee naast elkaar en viel de derde
   eronder, wat scheef staat. Onder elkaar leest het als een lijstje. */
@media (max-width:620px){
  /* align-items werkt op de dwarsas. Die kantelt mee met flex-direction, dus
     zonder flex-start zou 'center' van .stat-row-cta de cijfers op de homepage
     opeens midden op de pagina zetten terwijl de tekst erboven links staat. */
  .stat-row{flex-direction:column;align-items:flex-start;gap:1.4rem;}
}

/* De eyebrow op de contactheader stond direct tegen de kop aan (0px), terwijl
   de hero op de homepage 21px ruimte heeft. Gelijkgetrokken. */
.hero-team .hero-content h1{margin-top:1.3rem;}
/* ==========================================================================
   Nieuwsblokken
   Afgeronde hoeken met een zachte schaduw, en bij hover komt de kaart iets
   omhoog terwijl de foto licht inzoomt.
   ========================================================================== */
.nieuws-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.75rem;
}
@media (max-width:980px){.nieuws-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.nieuws-grid{grid-template-columns:1fr;}}

.nieuws-kaart{
  display:flex;
  flex-direction:column;
  background:var(--white);
  border-radius:var(--radius-m);
  overflow:hidden;
  box-shadow:0 8px 24px -14px rgba(9,32,46,.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.nieuws-kaart:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 44px -20px rgba(9,32,46,.45);
}
.nieuws-foto{
  display:block;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--off-white);
}
.nieuws-foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s cubic-bezier(.16,.84,.44,1);
}
.nieuws-kaart:hover .nieuws-foto img{transform:scale(1.05);}

.nieuws-body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:1.5rem;
}
.nieuws-titel{
  display:block;
  font-weight:700;
  font-size:clamp(1.05rem,1.3vw,1.2rem);
  line-height:1.3;
  color:var(--navy-100);
}
.nieuws-samenvatting{
  display:block;
  margin-top:.6rem;
  color:var(--navy-80);
  font-size:.94rem;
  flex:1;                      /* duwt de knop naar de onderkant van de kaart */
}
.nieuws-body .btn{
  margin-top:1.3rem;
  align-self:flex-start;
}
/* de hele kaart is de link, dus de knop reageert mee */
.nieuws-kaart:hover .btn-outline{background:var(--navy-100);color:var(--white);}
.section-foot{margin-top:3rem;}

/* ==========================================================================
   Vacaturekaarten — de vertrouwde kaart, maar in een raster van drie, dus
   lijnen de knoppen onderling uit ongeacht de lengte van titel en tekst.
   ========================================================================== */
.vacature-grid .card{display:flex;flex-direction:column;}
.vacature-grid .card-body{display:flex;flex-direction:column;flex:1;}
.vacature-grid .card-body p{
  margin-top:.5rem;
  margin-bottom:1.2rem;
  color:var(--navy-80);
  font-size:.94rem;
}
.vacature-grid .card-body .btn{margin-top:auto;align-self:flex-start;}
/* het labeltje moet om de tekst heen vallen, niet over de volle breedte:
   in een flexkolom rekt een span standaard uit */
.vacature-grid .card-body .card-tag{align-self:flex-start;}

/* ==========================================================================
   Nieuwsbericht — de pagina van één bericht
   --------------------------------------------------------------------------
   De hele pagina is één doorlopende kolom. Niets heeft een vaste hoogte, dus
   een bericht van drie alinea's en een bericht van dertig zien er allebei
   goed uit; het verschil zit alleen in hoever je scrollt.
   ========================================================================== */

/* Een losse leeskolom, voor pagina's waarvan de tekst in WordPress zelf staat. */
.tekst-kolom{width:100%;max-width:860px;}

/* Leesbreedte. Rond de 70 tekens per regel leest het prettigst; daarboven
   raakt het oog de volgende regel kwijt. */
/* De titel loopt over de volle breedte; het raster eronder begint pas bij de
   afbeelding, zodat het blok rechts op dezelfde hoogte start. */
.artikel-kop{
  padding-top:clamp(2.2rem,4vw,3.4rem);
  padding-bottom:clamp(1.4rem,2.5vw,2rem);
}
.artikel-kop h1{
  margin-top:.9rem;
  /* iets rustiger dan een paginakop: een berichttitel is vaak lang */
  font-size:clamp(1.9rem,3.4vw,2.9rem);
}

/* De uitgelichte afbeelding mag breder dan de tekst, maar niet zo breed dat
   hij de kolom eronder loslaat. */
.artikel-beeld{
  width:100%;
  margin:0 0 clamp(2rem,3.5vw,2.8rem);
  border-radius:var(--radius-m);
  overflow:hidden;
  background:var(--off-white);
}
.artikel-beeld img{width:100%;height:auto;display:block;}
.artikel-beeld figcaption{
  padding:.9rem 1.2rem 0;
  font-size:.86rem;
  color:var(--navy-60);
}

/* De publicatiedatum, direct onder de afbeelding en boven het verhaal. Klein
   en grijs: hij hoort erbij, maar mag de eerste zin niet overstemmen. */
.artikel-datum{
  margin:0 0 clamp(1.2rem,2vw,1.8rem);
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--navy-60);
}
/* staat er geen uitgelichte afbeelding boven, dan sluit de datum aan op de
   titel in plaats van op een gat */
.artikel-beeld + .artikel-datum{margin-top:0;}

/* --------------------------------------------------------------------------
   De tekst van het bericht zelf.
   Deze regels gelden voor alles wat er vanuit WordPress in wordt gezet, dus
   ook voor koppen en lijsten die een redacteur later toevoegt. Elders op de
   site staan alle marges op nul; hier moeten ze juist terug.
   -------------------------------------------------------------------------- */
.artikel-inhoud{
  font-size:clamp(1rem,1.15vw,1.08rem);
  line-height:1.75;
  color:var(--navy-100);
  overflow-wrap:break-word;
}
.artikel-inhoud > *:first-child{margin-top:0;}
.artikel-inhoud > *:last-child{margin-bottom:0;}

.artikel-inhoud p{margin:0 0 1.3em;}

/* Een bericht opent meestal met een vetgedrukte inleiding. Die krijgt wat
   meer lucht, zodat het begin van het verhaal eruit springt. */
.artikel-inhoud > p:first-child{
  font-size:1.12em;
  line-height:1.65;
  color:var(--navy-80);
}

/* Redacteuren plakken soms een eigen h1 in de tekst. Die zou met de titel
   van de pagina concurreren, dus hij wordt hier op h2-formaat gezet. */
.artikel-inhoud h1,
.artikel-inhoud h2{
  font-weight:800;
  font-size:clamp(1.45rem,2.3vw,1.85rem);
  line-height:1.22;
  letter-spacing:-0.01em;
  margin:2.2em 0 .7em;
}
.artikel-inhoud h3{
  font-weight:700;
  font-size:clamp(1.14rem,1.6vw,1.3rem);
  line-height:1.35;
  margin:1.9em 0 .6em;
}
.artikel-inhoud h4{
  font-weight:700;
  font-size:1.02rem;
  line-height:1.4;
  margin:1.7em 0 .5em;
}

.artikel-inhoud a{
  color:var(--green-100);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.artikel-inhoud a:hover{color:var(--navy-100);}
.artikel-inhoud strong,.artikel-inhoud b{font-weight:700;}

/* Lijsten: elders op de site staan de bolletjes uit, hier horen ze wel. */
.artikel-inhoud ul,
.artikel-inhoud ol{
  margin:0 0 1.3em;
  padding-left:1.35em;
  list-style:revert;
}
.artikel-inhoud li{margin-bottom:.5em;}
.artikel-inhoud li::marker{color:var(--green-100);}
.artikel-inhoud li > ul,
.artikel-inhoud li > ol{margin:.5em 0 0;}

.artikel-inhoud blockquote{
  margin:2em 0;
  padding:.2em 0 .2em 1.4em;
  border-left:3px solid var(--green-100);
  font-size:1.1em;
  line-height:1.6;
  color:var(--navy-80);
}
.artikel-inhoud blockquote p:last-child{margin-bottom:0;}

.artikel-inhoud img,
.artikel-inhoud iframe,
.artikel-inhoud video{
  max-width:100%;
  height:auto;
  border-radius:var(--radius-m);
}
.artikel-inhoud figure{margin:2em 0;}
.artikel-inhoud figcaption{
  margin-top:.8rem;
  font-size:.86rem;
  color:var(--navy-60);
}
.artikel-inhoud hr{
  margin:2.4em 0;
  border:0;
  border-top:1px solid var(--navy-20);
}
/* Een brede tabel mag zelf schuiven in plaats van de pagina mee te trekken */
.artikel-inhoud .tabel-schuif{overflow-x:auto;margin:0 0 1.3em;}
.artikel-inhoud table{width:100%;border-collapse:collapse;font-size:.95em;}
.artikel-inhoud th,.artikel-inhoud td{
  padding:.7em .9em;
  border-bottom:1px solid var(--navy-20);
  text-align:left;
  vertical-align:top;
}
.artikel-inhoud th{font-weight:700;}
/* iconen die met geplakte tekst meekomen, nooit groter dan een regel */
.artikel-inhoud p > svg{width:1.1em;height:1.1em;vertical-align:-0.15em;}

/* --------------------------------------------------------------------------
   Delen
   -------------------------------------------------------------------------- */
.artikel-deel{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 1.2rem;
  margin-top:clamp(2.4rem,4vw,3.4rem);
  padding-top:clamp(1.6rem,3vw,2.2rem);
  border-top:1px solid var(--navy-20);
}
.artikel-deel h2{
  font-size:1rem;
  font-weight:700;
  letter-spacing:0.01em;
  margin:0;
}
.deel-knoppen{display:flex;flex-wrap:wrap;gap:.6rem;}
.deel-knop{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:50%;
  border:1.5px solid var(--navy-20);
  color:var(--navy-100);
  background:var(--white);
  cursor:pointer;
  padding:0;
  transition:background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.deel-knop svg{width:19px;height:19px;fill:currentColor;}
/* LinkedIn en WhatsApp zijn gevulde vormen, e-mail en de link zijn lijntekeningen.
   Zonder deze regel wint fill:currentColor van hun eigen fill="none" en worden
   het zwarte blokjes. */
.deel-knop svg[fill="none"]{fill:none;stroke:currentColor;}
.deel-knop:hover{
  background:var(--navy-100);
  border-color:var(--navy-100);
  color:var(--white);
  transform:translateY(-2px);
}
/* na het kopiëren even groen, zodat je ziet dat er iets gebeurd is */
.deel-knop.gelukt{background:var(--green-100);border-color:var(--green-100);color:var(--white);}
.deel-melding{
  font-size:.86rem;
  font-weight:600;
  color:var(--green-100);
  opacity:0;
  transition:opacity .2s ease;
}
.deel-melding.zichtbaar{opacity:1;}

/* --------------------------------------------------------------------------
   Meer berichten — twee naast elkaar
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   De tekst links, een vast blok rechts
   --------------------------------------------------------------------------
   De twee kolommen staan naast elkaar zolang daar ruimte voor is. Het blok
   rechts blijft bij het scrollen op zijn plek staan (position:sticky), zodat
   het meeloopt met een lang bericht in plaats van bovenaan achter te blijven.
   -------------------------------------------------------------------------- */
.artikel-raster{
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  gap:clamp(2.5rem,4vw,4rem);
  padding-bottom:clamp(2.5rem,5vw,4.5rem);
  /* zonder start zou het blok rechts uitrekken tot de hoogte van de tekst en
     is er niets meer om vast te zetten */
  align-items:start;
}
/* De tekstkolom houdt een bovengrens, ook als er ruimte over is: daarboven
   raakt het oog bij het terugspringen de volgende regel kwijt. */
.artikel-lijf{min-width:0;max-width:860px;}

.artikel-zijkant{
  position:sticky;
  /* 85px kopbalk plus wat lucht */
  top:105px;
}

.zij-blok{
  background:var(--white);
  border:1px solid var(--navy-20);
  border-radius:var(--radius-m);
  padding:1.7rem;
}
.zij-blok .eyebrow{margin-bottom:1.2rem;}

.zij-bericht{
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:1.1rem;
  align-items:start;
  padding:1.15rem 0;
  border-top:1px solid var(--navy-20);
}
.zij-bericht:first-of-type{padding-top:0;border-top:0;}
.zij-bericht:last-of-type{padding-bottom:0;}

.zij-foto{
  display:block;
  aspect-ratio:1/1;
  border-radius:var(--radius-s);
  overflow:hidden;
  background:var(--off-white);
}
.zij-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,.84,.44,1);}
.zij-bericht:hover .zij-foto img{transform:scale(1.06);}

/* De tekstkolom is een gewone span; zonder block krijgt hij zijn breedte niet
   van het raster en loopt de titel op een smal scherm uit zijn vak. */
.zij-bericht > span:not(.zij-foto){display:block;min-width:0;}

.zij-titel{
  display:block;
  overflow-wrap:anywhere;
  font-weight:700;
  font-size:1rem;
  line-height:1.35;
  color:var(--navy-100);
  transition:color .2s ease;
}
.zij-bericht:hover .zij-titel{color:var(--green-100);}
.zij-datum{
  display:block;
  margin-top:.35rem;
  font-size:.84rem;
  color:var(--navy-60);
}

.zij-alle{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.35rem 0;
  margin-top:1.1rem;
  font-size:.88rem;
  font-weight:600;
  color:var(--green-100);
  transition:gap .2s ease;
}
.zij-alle:hover{gap:.7rem;}
.zij-alle svg{width:15px;height:15px;flex:none;}

/* Onder de 1080px is er geen ruimte meer voor twee kolommen: het blok schuift
   dan onder de tekst en hoeft niet meer vast te staan. */
@media (max-width:1140px){
  .artikel-raster{grid-template-columns:1fr;gap:clamp(2rem,4vw,3rem);}
  .artikel-lijf{max-width:860px;}
  /* Op een smal scherm staat het blok onder de tekst; vastzetten heeft daar
     geen zin, het zou alleen ruimte innemen. */
  .artikel-zijkant{position:static;max-width:860px;margin-top:.5rem;}
}

@media (max-width:700px){
  .artikel-deel{gap:.8rem;}
  .artikel-deel h2{width:100%;}
  .zij-bericht{grid-template-columns:80px minmax(0,1fr);}
}

/* ==========================================================================
   Oplossingspagina's, derde niveau
   --------------------------------------------------------------------------
   Deze pagina's hangen twee stappen onder de homepage (Onze oplossingen >
   Opwek & opslag > Zon op dak). Een kruimelpad laat zien waar je bent, en de
   aanpak staat als genummerde route in plaats van als uitklaplijst: de zes
   onderdelen zijn namelijk geen losse diensten maar één traject, van eerste
   verkenning tot periodieke keuring.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Genummerde route
   -------------------------------------------------------------------------- */
/* De kop blijft links staan terwijl je langs de stappen scrollt, zodat je
   onderweg blijft zien waar deze reeks over gaat. */
.aanpak-raster{
  display:grid;
  grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(2.5rem,5vw,5rem);
  align-items:start;
}
.aanpak-kop{position:sticky;top:105px;}
.aanpak-kop .section-head{max-width:none;margin-bottom:0;}

@media (max-width:1080px){
  .aanpak-raster{grid-template-columns:1fr;gap:2rem;}
  .aanpak-kop{position:static;max-width:680px;}
}

.stappen{
  display:grid;
  gap:0;
  /* de nummerkolom is smal en vast, zodat alle teksten links uitlijnen */
  counter-reset:stap;
}
.stap{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:1.1rem;
  padding-bottom:clamp(2rem,3.5vw,2.8rem);
}
.stap:last-child{padding-bottom:0;}

/* Een groen bolletje voor elk onderdeel. Hier stonden eerst genummerde
   cirkels met een lijn ertussen; dat las als een route van 1 naar 6, terwijl
   het losse onderdelen zijn waar je uit kiest. */
.stap-merk{
  display:flex;
  justify-content:center;
  width:14px;
  flex:none;
}
.stap-bol{
  width:14px;
  height:14px;
  flex:none;
  border-radius:50%;
  background:var(--green-100);
  /* zo staat het bolletje midden op de eerste regel van de titel */
  margin-top:.62em;
}

.stap-inhoud{
  padding-top:0;
  /* zelfde leesbreedte als de rest van de pagina; zonder deze grens lopen de
     regels hier door tot de volle containerbreedte */
  max-width:800px;
}
.stap-inhoud h3{font-size:clamp(1.15rem,1.7vw,1.35rem);}
/* de korte belofte onder de titel, in het groen van de huisstijl */
.stap-claim{
  margin-top:.45rem;
  font-weight:600;
  color:var(--green-100);
}
.stap-inhoud p:not(.stap-claim){
  margin-top:.8rem;
  color:var(--navy-80);
  line-height:1.7;
}

@media (max-width:700px){
  .stap{gap:.9rem;}
  .stap-inhoud{padding-top:0;}
}

/* de regel onderaan de voettekst bevat ook een link; die was maar 19px hoog */
.footer-bottom a{display:inline-block;padding:.3rem 0;}

/* Bel- en e-maillink op de contactpagina: op een telefoon zijn dit de twee
   belangrijkste knoppen, dus die krijgen een ruimer aanraakvlak. */
.contact-actie{display:inline-block;padding:.35rem 0;font-weight:600;}

/* ==========================================================================
   Projectpagina — één project in beeld
   --------------------------------------------------------------------------
   Zelfde opzet als een nieuwsbericht: tekst links, een vast blok rechts. Daar
   staan hier de feiten van het project in, zodat je in één oogopslag ziet voor
   wie en waar het was, ook als je halverwege de tekst zit.
   ========================================================================== */

/* De tekst valt uiteen in Vraagstelling, Aanpak en Impact. Dit zijn <section>-
   elementen binnen het artikel, dus de ruime sectie-padding van de pagina zelf
   moet er hier af; de onderlinge afstand regelen we met een marge. */
.project-deel{padding:0;}
.artikel-lijf > .project-deel{margin-top:clamp(2.4rem,4vw,3.4rem);}
.project-deel > h2{
  font-weight:800;
  font-size:clamp(1.45rem,2.3vw,1.85rem);
  line-height:1.22;
  letter-spacing:-0.01em;
  margin-bottom:1.1rem;
}

/* De feiten in het vaste blok */
.feiten{margin:0;}
.feiten > div{
  padding:.9rem 0;
  border-top:1px solid var(--navy-20);
}
.feiten > div:first-child{padding-top:0;border-top:0;}
.feiten dt{
  font-size:.8rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--navy-60);
}
.feiten dd{
  margin:.3rem 0 0;
  font-weight:600;
  color:var(--navy-100);
  overflow-wrap:anywhere;
}
/* het vakgebied is een link; met wat lucht eromheen is hij op een telefoon
   goed te raken in plaats van 23px hoog */
.feiten dd a{display:inline-block;padding:.2rem 0;color:var(--green-100);}
.feiten dd a:hover{color:var(--navy-100);}
.zij-blok .btn{margin-top:1.5rem;}

/* ==========================================================================
   Medewerkerpagina — de persoon achter het werk
   --------------------------------------------------------------------------
   De kop en het portret staan naast elkaar; daaronder begint het verhaal. Zo
   is meteen duidelijk waar de introductie ophoudt en de tekst begint. Naast
   die tekst staat een compacte verwijzing naar de vacatures.
   ========================================================================== */
.persoon-kop{
  display:grid;
  /* 260 + 40 + 560 = 860: precies de breedte van de tekstkolom eronder. Het
     portret staat links, compact genoeg om de kop niet te laten uitdijen. */
  grid-template-columns:minmax(0,260px) minmax(0,560px);
  justify-content:start;
  max-width:860px;
  grid-template-areas:
    "portret tekst"
    "portret actie";
  /* twee even hoge rijen: de naam eindigt op de helft, de knop begint daar.
     Zo staat het blokje links verticaal gecentreerd tegenover het portret in
     plaats van bovenaan met een gat eronder. */
  grid-template-rows:1fr 1fr;
  gap:0 40px;
  padding-top:clamp(2.2rem,4vw,3.4rem);
  padding-bottom:clamp(2.4rem,4vw,3.6rem);
}
.persoon-kop-tekst{grid-area:tekst;align-self:end;}
/* dezelfde titelmaat als op de nieuws- en projectpagina */
.persoon-kop h1{font-size:clamp(1.9rem,3.4vw,2.9rem);}
.persoon-portret{grid-area:portret;align-self:start;}
.persoon-actie{grid-area:actie;align-self:start;margin-top:1.6rem;}

/* De functie staat direct onder de naam, in het groen van de huisstijl. */
.persoon-rol{
  margin-top:.55rem;
  font-weight:700;
  font-size:clamp(1.05rem,1.5vw,1.3rem);
  line-height:1.3;
  color:var(--green-100);
}

.persoon-portret{
  border-radius:var(--radius-m);
  overflow:hidden;
  aspect-ratio:3/4;
  background:var(--off-white);
}
.persoon-portret img{
  width:100%;
  height:100%;
  object-fit:cover;
  /* bovenkant vasthouden, dus nooit een afgesneden hoofd */
  object-position:50% 0%;
}

/* Het verhaal, met het vacatureblok ernaast. */
.persoon-raster{
  display:grid;
  /* zelfde maatvoering als de nieuws- en projectpagina */
  grid-template-columns:minmax(0,1fr) 380px;
  gap:clamp(2.5rem,4vw,4rem);
  align-items:start;
  padding-bottom:clamp(2.5rem,5vw,4.5rem);
}
.persoon-tekst{min-width:0;max-width:860px;}
.persoon-zijkant{position:sticky;top:105px;}

/* Compacte variant van de vacatureband, voor naast de tekst. */
.vacature-kaart{
  border-radius:var(--radius-m);
  background:linear-gradient(120deg, var(--navy-100), #0e2c3d);
  color:var(--white);
  padding:1.7rem;
}
.vacature-kaart h2{
  margin-top:.6rem;
  font-size:1.25rem;
  line-height:1.25;
}
.vacature-kaart p{
  margin-top:.7rem;
  font-size:.94rem;
  line-height:1.6;
  color:var(--navy-20);
}
.vacature-kaart .btn{margin-top:1.3rem;}

@media (max-width:900px){
  .persoon-kop{
    grid-template-columns:1fr;
    grid-template-areas:"tekst" "portret" "actie";
    grid-template-rows:auto;
  }
  .persoon-kop-tekst{align-self:start;}
  /* het portret mag hier kleiner: anders vult hij het hele eerste scherm */
  .persoon-portret{max-width:260px;margin-top:1.6rem;}
  .persoon-actie{margin-top:1.2rem;}

  .persoon-raster{grid-template-columns:1fr;gap:2.4rem;}
  .persoon-tekst{max-width:none;}
  /* onder de tekst hoeft het vacatureblok niet mee te lopen */
  .persoon-zijkant{position:static;}
}

/* ==========================================================================
   Vacaturepagina en het sollicitatieformulier
   ========================================================================== */

/* Formulier op een lichte achtergrond. Het nieuwsbriefformulier in de
   voettekst staat op navy en heeft daarom een eigen opmaak. */
.form-raster{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  max-width:760px;
}
.form-veld{display:flex;flex-direction:column;gap:.4rem;}
/* velden die de volle breedte pakken */
.form-veld.breed{grid-column:1 / -1;}

.form-veld label{
  font-size:.86rem;
  font-weight:600;
  color:var(--navy-80);
}
.form-veld label .verplicht{color:var(--green-100);}

.form-veld input,
.form-veld textarea{
  width:100%;
  padding:12px 14px;
  border-radius:var(--radius-s);
  border:1.5px solid var(--navy-20);
  background:var(--white);
  color:var(--navy-100);
  font-family:inherit;
  font-size:1rem;
  transition:border-color .2s ease;
}
.form-veld textarea{min-height:140px;resize:vertical;}
.form-veld input:focus,
.form-veld textarea:focus{
  outline:none;
  border-color:var(--green-100);
}
.form-veld input::placeholder,
.form-veld textarea::placeholder{color:var(--navy-40);}

/* Het bestandsveld ziet er per browser anders uit; met een eigen knop is dat
   overal hetzelfde. */
.form-veld input[type="file"]{padding:9px 14px;background:var(--off-white);}
.form-veld input[type="file"]::file-selector-button{
  margin-right:.9rem;
  padding:8px 14px;
  border:0;
  border-radius:999px;
  background:var(--navy-100);
  color:var(--white);
  font-family:inherit;
  font-weight:600;
  font-size:.86rem;
  cursor:pointer;
}
.form-veld .hint{font-size:.82rem;color:var(--navy-60);}

.form-raster .btn{grid-column:1 / -1;justify-self:start;margin-top:.4rem;}

@media (max-width:700px){
  .form-raster{grid-template-columns:1fr;}
}

/* De koppen in een vacaturetekst zijn h4'jes; die zijn hier de indeling van
   het verhaal en mogen dus groter dan een gewone tussenkop. */
.vacature-tekst h4{
  font-weight:800;
  font-size:clamp(1.15rem,1.7vw,1.35rem);
  line-height:1.3;
  margin:2em 0 .6em;
}
.vacature-tekst h3{
  font-weight:800;
  font-size:clamp(1.3rem,2vw,1.6rem);
  margin:2.2em 0 .7em;
}
/* iconen die met de tekst zijn meegekomen, nooit groter dan een regel */
.vacature-tekst svg{width:1.05em;height:1.05em;vertical-align:-0.12em;}
/* Links midden in een lopende regel (mailadres, telefoonnummer) zijn van
   zichzelf net iets lager dan 24px. Padding op een inline-element rekt het
   aanraakvlak op zonder de regelafstand te veranderen. */
.vacature-tekst a{padding-block:3px;}

/* Het sollicitatieformulier met de uitgelichte afbeelding ernaast. De
   afbeelding rekt mee met de hoogte van het formulier, zodat de twee kolommen
   onderaan gelijk eindigen. Heeft de vacature geen uitgelichte afbeelding,
   dan krijgt het raster de klasse .geen-beeld en loopt het formulier gewoon
   over de volle breedte — er blijft dan geen lege kolom staan. */
.solliciteer-raster{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,4vw,3.5rem);
  align-items:stretch;
}
.solliciteer-raster.geen-beeld{grid-template-columns:minmax(0,1fr);}
.solliciteer-velden .form-raster{max-width:none;}
.solliciteer-beeld{
  margin:0;
  border-radius:var(--radius-m);
  overflow:hidden;
  /* zonder min-height:0 rekt een grid-cel op naar de hoogte van zijn inhoud
     en negeert object-fit het beschikbare vak */
  min-height:0;
}
.solliciteer-beeld img{width:100%;height:100%;min-height:340px;object-fit:cover;}

@media (max-width:900px){
  .solliciteer-raster{grid-template-columns:minmax(0,1fr);}
  .solliciteer-beeld img{min-height:0;aspect-ratio:16/10;}
}


/* ==========================================================================
   Dienstenlijst op een oplossingspagina
   --------------------------------------------------------------------------
   Acht onderdelen die naast elkaar staan, geen route met stappen — vandaar
   geen nummers. Alles staat dicht, zodat je in één scherm ziet wát we doen en
   pas openklapt wat je nodig hebt. Het is een gewone <details>: dat werkt met
   toetsenbord en screenreader zonder een regel JavaScript, en de tekst staat
   ook in de pagina als iemand JavaScript uitzet — belangrijk voor Google.
   ========================================================================== */
.diensten{
  display:grid;
  gap:0;
  max-width:980px;
}
.dienst{
  border-top:1px solid var(--navy-20);
}
.dienst:last-child{border-bottom:1px solid var(--navy-20);}

/* De klikbare regel: titel, belofte en rechts een pijl. */
.dienst > summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:1.2rem;
  padding:1.4rem 0;
  cursor:pointer;
  list-style:none;                 /* het standaard driehoekje weg */
}
.dienst > summary::-webkit-details-marker{display:none;}
/* De titel blijft zwart, ook bij hover. Dat de regel aanklikbaar is blijkt uit
   de muisaanwijzer en uit de pijl rechts, die wel van kleur verandert. */
.dienst > summary h3{
  grid-column:1;
  font-size:clamp(1.15rem,1.7vw,1.35rem);
  line-height:1.3;
}
.dienst > summary .dienst-claim{
  grid-column:1;
  margin-top:.35rem;
  font-weight:600;
  color:var(--green-100);
}
/* De pijl staat in de tweede kolom en draait een kwartslag bij openen. */
.dienst > summary::after{
  content:"";
  grid-column:2;
  grid-row:1 / span 2;
  width:12px;
  height:12px;
  border-right:2px solid var(--navy-60);
  border-bottom:2px solid var(--navy-60);
  transform:rotate(45deg);
  transform-origin:center;
  transition:transform .2s ease, border-color .2s ease;
  margin-right:6px;
}
.dienst[open] > summary::after{transform:rotate(-135deg);border-color:var(--green-100);}
/* een zichtbare focusring, want de standaard outline valt hier weg */
.dienst > summary:focus-visible{outline:2px solid var(--green-100);outline-offset:4px;}

.dienst-inhoud{padding-bottom:1.6rem;}
.dienst-inhoud p{
  margin-top:1rem;
  /* leesbreedte, anders lopen de regels door over de volle 980px */
  max-width:78ch;
  color:var(--navy-80);
  line-height:1.7;
  font-size:.98rem;
}
.dienst-inhoud p:first-child{margin-top:0;}

/* MC4WP zet zelf een meldingsregel onder het formulier (succes/fout). */
.nieuwsbrief .mc4wp-response{
  margin-top:var(--nb-gap);
  font-size:.9rem;
  color:var(--navy-20);
}
.nieuwsbrief .mc4wp-response p{margin:0;}

/* Op smalle telefoons alles onder elkaar, met diezelfde tussenruimte. */
@media (max-width:480px){
  .nieuwsbrief .nb-rij{flex-wrap:wrap;}
  .nieuwsbrief .nb-rij input{flex:1 1 160px;}
}

/* ==========================================================================
   Adviesscan in het menu — altijd groen
   Dit item moet opvallen, dus de tekst staat standaard in het huisstijlgroen.
   Het streepje eronder gedraagt zich als bij de andere items: alleen op de
   pagina zelf en bij aanwijzen. De selector kijkt naar het adres, zodat er
   in header.php geen extra klasse nodig is.
   ========================================================================== */
.main-nav a[href$="/adviesscan/"]{color:var(--green-100);}

/* ==========================================================================
   Podcast
   ========================================================================== */
/* de citaatzin uit de aflevering, in het groen van de huisstijl */
.aflevering-quote{
  margin-top:1rem;
  font-weight:600;
  color:var(--green-100);
  line-height:1.45;
}
/* het labeltje om de tekst heen, niet over de volle breedte van de kaart */
.afleveringen-grid .card-tag{align-self:flex-start;}

/* ==========================================================================
   Rotterdam — Energiebegeleiding op maat
   ========================================================================== */
/* Paginakop met het kader "Wat krijg je?" ernaast. De kop is iets kleiner dan
   elders, want hij deelt de breedte met het kader. */
.rdam-kop{align-items:center;}
.rdam-kop h1{font-size:clamp(2.1rem,3.6vw,3.1rem);}

.pakket{
  background:var(--white);
  border:1px solid var(--navy-20);
  border-radius:var(--radius-m);
  padding:clamp(1.5rem,3vw,2.2rem);
  box-shadow:0 22px 44px -28px rgba(9,32,46,.4);
}
.pakket h2{font-size:1.25rem;line-height:1.3;}
.pakket ul{margin-top:1rem;}
.pakket li{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:.85rem 0;
  border-top:1px solid var(--navy-20);
  font-weight:600;
}
.pakket .inbegrepen{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  flex:none;
  font-size:.86rem;
  color:var(--green-100);
}
.pakket .inbegrepen::before{
  content:"";
  width:1.15rem;height:1.15rem;
  border-radius:50%;
  background:var(--green-20) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365a812' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/.7rem no-repeat;
}
/* de laatste regel is het antwoord waar het om draait: groot en groen */
.pakket li.pakket-totaal{border-top:2px solid var(--navy-100);padding-bottom:0;}
.pakket-totaal .bedrag{
  flex:none;
  font-weight:800;
  font-size:clamp(1.6rem,2.4vw,2rem);
  line-height:1;
  color:var(--green-100);
}

/* Lijstjes met een vinkje of een kruisje ervoor */
.vinklijst li{
  position:relative;
  padding-left:1.95rem;
  margin-top:.65rem;
  color:var(--navy-80);
}
.vinklijst li:first-child{margin-top:0;}
.vinklijst li::before{
  content:"";
  position:absolute;
  left:0;
  top:.2em;
  width:1.2rem;height:1.2rem;
  border-radius:50%;
  background:var(--green-20) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365a812' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/.72rem no-repeat;
}
.vinklijst.kruis li::before{
  background:rgba(9,32,46,.09) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23515761' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/.62rem no-repeat;
}
.stap-inhoud .vinklijst{margin-top:1.1rem;}

/* Begeleiders: portret naast naam, functie en contactregels. Geen .card,
   want die tilt bij aanwijzen op alsof hij klikbaar is. */
.begeleider{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:1.6rem;
  background:var(--white);
  border:1px solid var(--navy-20);
  border-radius:var(--radius-m);
  padding:clamp(1.4rem,2.5vw,2rem);
}
.begeleider-tekst{flex:1 1 200px;min-width:0;}
.begeleider-rol{margin-top:.2rem;font-weight:600;color:var(--green-100);}

/* Mail- en belregel met een icoontje; ruim aanraakvlak voor de telefoon */
.contact-regels{display:grid;justify-items:start;gap:.1rem;margin-top:.9rem;}
.contact-regels a{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.35rem 0;
  font-weight:600;
  color:var(--navy-100);
  overflow-wrap:anywhere;
  transition:color .15s ease;
}
.contact-regels a:hover{color:var(--green-100);}
.contact-regels svg{width:18px;height:18px;flex:none;stroke:var(--green-100);}
.on-dark .contact-regels a,.contact-regels.on-dark a{color:var(--white);}
.on-dark .contact-regels a:hover,.contact-regels.on-dark a:hover{color:var(--green-60);}

/* Vier voordelen op navy */
.voordeel h3{font-size:1.15rem;}
.voordeel p{margin-top:.5rem;color:var(--navy-20);font-size:.95rem;line-height:1.55;}

/* Werkgebied: kaart met legenda, de wijken ernaast */
.kaart{margin:0;}
.kaart img{border-radius:var(--radius-m);width:100%;}
.kaart-legenda{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem 2rem;
  margin-top:1.2rem;
  font-size:.9rem;
  color:var(--navy-80);
}
.kaart-legenda li{display:flex;align-items:flex-start;gap:.7rem;}
.kaart-legenda strong{display:block;color:var(--navy-100);}
/* de kleuren zijn rechtstreeks uit de kaart genomen */
.kaart-kleur{width:18px;height:18px;border-radius:5px;flex:none;margin-top:.2em;}
.kaart-kleur.in{background:#f5bfa3;}
.kaart-kleur.uit{background:#2f8a4c;}
.wijken{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem 1.2rem;margin-top:1.3rem;}
.wijken li{margin-top:0;font-weight:600;color:var(--navy-100);}

/* Wel en niet in aanmerking */
.voorwaarde{
  border-radius:var(--radius-m);
  padding:clamp(1.6rem,3vw,2.4rem);
}
.voorwaarde.wel{background:var(--green-20);}
.voorwaarde.wel .vinklijst li::before{background-color:var(--white);}
.voorwaarde.niet{background:rgba(9,32,46,.05);}
.voorwaarde h3{margin-bottom:1.3rem;}
.voorwaarde .vinklijst li{color:var(--navy-100);}

/* Direct contact in het donkere slotblok */
.direct-contact h3{color:var(--white);}
.direct-persoon{padding:1.2rem 0;border-top:1px solid rgba(255,255,255,.14);}
.direct-persoon:first-of-type{margin-top:1rem;}
.direct-persoon:last-child{padding-bottom:0;}
.direct-naam{font-weight:700;font-size:1.05rem;}
.direct-rol{font-size:.9rem;color:var(--navy-20);}
.direct-contact .contact-regels{margin-top:.5rem;}

/* Kaart breed, de wijken in een smalle kolom ernaast. Op een smaller scherm
   komen de wijken onder de kaart, verdeeld over meer kolommen. */
.werkgebied-raster{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:clamp(2rem,4vw,3.5rem);
  align-items:start;
}
.werkgebied-raster .wijken{grid-template-columns:1fr;}
@media (max-width:980px){
  .werkgebied-raster{grid-template-columns:minmax(0,1fr);}
  .werkgebied-raster .wijken{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:560px){
  .werkgebied-raster .wijken{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ==========================================================================
   Link midden in een lopende tekst
   Elders op de site zijn links kaal (a{text-decoration:none}). In een zin moet
   je wel kunnen zien dat iets een link is: groen en onderstreept, net als in
   een nieuwsbericht.
   ========================================================================== */
.tekst-link{
  color:var(--green-100);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:color .15s ease;
}
.tekst-link:hover{color:var(--navy-100);}

/* ==========================================================================
   Subsidie Flexibel elektriciteitsverbruik (Flex-e)
   ========================================================================== */
/* Contactregels iets groter, als ze de hoofdzaak van het blok zijn */
.contact-regels.groot a{font-size:1.12rem;}
.contact-regels.groot svg{width:20px;height:20px;}

/* Logo's van opdrachtgevers in een raster. Elk logo staat op een eigen vlak
   van 3:2 met witruimte eromheen, dus ze ogen even groot. In grijs, in kleur
   bij aanwijzen, zodat het raster de tekst eromheen niet overschreeuwt. */
.logo-raster{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:.4rem 1.6rem;
  align-items:center;
}
.logo-raster img{
  width:100%;
  aspect-ratio:3/2;
  object-fit:contain;
  filter:grayscale(1);
  opacity:.62;
  transition:filter .25s ease, opacity .25s ease;
}
.logo-raster img:hover{filter:none;opacity:1;}
@media (max-width:620px){
  .logo-raster{grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem .9rem;}
}
@media (prefers-reduced-motion:reduce){
  .logo-raster img{transition:none;}
}

/* ==========================================================================
   Ziekenhuizen — brochureformulier naast de tekst
   ========================================================================== */
.brochure-kaart{
  background:var(--white);
  border:1px solid var(--navy-20);
  border-radius:var(--radius-m);
  padding:clamp(1.6rem,3vw,2.4rem);
  box-shadow:0 22px 44px -28px rgba(9,32,46,.4);
  /* bij de knop "Download de brochure" in de kop: niet onder de vaste
     menubalk vallen */
  scroll-margin-top:105px;
}
.brochure-kaart h2{font-size:clamp(1.35rem,2vw,1.6rem);line-height:1.25;}
.brochure-kaart > p{margin-top:.6rem;color:var(--navy-80);}
.brochure-kaart form{margin-top:1.5rem;}
.brochure-kaart .btn{width:100%;justify-content:center;}

/* Een los vinkje met de tekst ernaast, zoals "Meld mij aan voor de nieuwsbrief" */
.vink-veld{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  margin-bottom:1.4rem;
  font-size:.92rem;
  color:var(--navy-80);
  cursor:pointer;
}
.vink-veld input{
  width:18px;height:18px;
  margin:.18em 0 0;
  flex:none;
  accent-color:var(--green-100);
  cursor:pointer;
}