/* BV Geert Vos — geertvos.be
   Bricolage Grotesque (zelf gehost), logo-geel als enige accent. De hero is donker (de lamp gaat aan en
   het licht volgt de cursor), de rest van de site is licht. De drie gele lijnen uit het logo zijn de rode draad. */

@font-face{font-family:"Bricolage";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(/fonts/bricolage-latin.woff2) format("woff2-variations");
  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:"Bricolage";font-style:normal;font-display:swap;font-weight:200 800;
  src:url(/fonts/bricolage-latin-ext.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --geel:#F2B51C;          /* logo-geel */
  --geel-diep:#D99E0B;     /* hover / lijnen op licht */
  --geel-tekst:#7A5A05;    /* geel als tekst op wit (contrast) */
  --ink:#26282A;           /* antraciet, alle tekst */
  --ink-2:#4B4E52;
  --steel:#6E7276;         /* secundaire tekst */
  --paper:#F6F4EF;         /* warm licht vlak */
  --wit:#FFFFFF;
  --line:#E3E0D8;
  --nacht:#141518;         /* hero */
  --nacht-2:#1C1D22;
  --font:"Bricolage",ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;
  --wrap:1180px;
  --pad:clamp(20px,5vw,48px);
  --r:6px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.6;color:var(--ink);background:var(--wit);font-variation-settings:"wght" 400}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.08;letter-spacing:-.015em;font-weight:700;text-wrap:balance}
h1{font-size:clamp(40px,6.2vw,76px);letter-spacing:-.03em}
h2{font-size:clamp(30px,4vw,48px);letter-spacing:-.025em}
h3{font-size:clamp(21px,2.2vw,26px)}
p{margin:0 0 1em;max-width:62ch}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--ink-2);max-width:56ch}
.muted{color:var(--steel)}
.wrap{width:min(var(--wrap),100% - 2*var(--pad));margin-inline:auto}
:focus-visible{outline:3px solid var(--geel);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--geel);color:var(--ink);padding:10px 14px;border-radius:var(--r);z-index:200}
.skip:focus{left:8px}

/* Knoppen */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:var(--r);font-weight:600;font-size:16px;text-decoration:none;border:2px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .15s;cursor:pointer;font-family:inherit;line-height:1.2}
.btn:active{transform:translateY(1px)}
.btn-geel{background:var(--geel);color:var(--ink);border-color:var(--geel)}
.btn-geel:hover{background:var(--geel-diep);border-color:var(--geel-diep)}
.btn-licht{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn-licht:hover{border-color:#fff}
.btn-ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-ink:hover{background:#000}
.btn-lijn{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-lijn:hover{background:var(--ink);color:#fff}
.tel{white-space:nowrap}
.tel-knop{flex-direction:column;align-items:flex-start;gap:2px;line-height:1.15;padding:10px 18px}
.tel-knop small{font-size:12px;font-weight:500;opacity:.75;letter-spacing:.02em}

/* Stroomlijn: de drie gele lijnen uit het logo, als sectiegrens */
.stroom{height:22px;background:
  linear-gradient(var(--geel),var(--geel)) 0 2px/100% 4px no-repeat,
  linear-gradient(var(--geel),var(--geel)) 0 9px/100% 4px no-repeat,
  linear-gradient(var(--geel),var(--geel)) 0 16px/100% 4px no-repeat}

/* Header */
.site-head{position:absolute;inset:0 0 auto 0;z-index:50;color:#fff}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:88px}
.brand{display:flex;align-items:center;text-decoration:none;color:#fff}
.brand img{height:64px;width:auto}
.nav{display:flex;gap:6px;align-items:center}
.nav a{text-decoration:none;padding:10px 12px;border-radius:var(--r);font-weight:500;font-size:16px;color:rgba(255,255,255,.86);transition:color .2s,background .2s}
.nav a:hover,.nav a[aria-current=page]{color:#fff;background:rgba(255,255,255,.08)}
.nav a.nav-cta{background:var(--geel);color:var(--ink);font-weight:600;margin-left:8px}
.nav a.nav-cta:hover{background:var(--geel-diep)}
.nav a.nav-vac{border:1.5px solid var(--geel);color:#fff;padding:8px 12px}
.nav a.nav-vac:hover,.nav a.nav-vac[aria-current=page]{background:rgba(242,181,28,.16)}
.nav-toggle{display:none;background:none;border:2px solid rgba(255,255,255,.35);color:#fff;border-radius:var(--r);width:46px;height:46px;font-size:0;cursor:pointer;position:relative}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{position:absolute;left:11px;width:20px;height:2px;background:#fff;content:"";transition:transform .2s,opacity .2s}
.nav-toggle span{top:21px}
.nav-toggle span::before{left:0;top:-6px}
.nav-toggle span::after{left:0;top:6px}
.nav-open .nav-toggle span{background:transparent}
.nav-open .nav-toggle span::before{transform:translateY(6px) rotate(45deg)}
.nav-open .nav-toggle span::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1060px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;left:var(--pad);right:var(--pad);top:80px;background:var(--nacht-2);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:10px;flex-direction:column;align-items:stretch}
  .nav-open .nav{display:flex}
  .nav a{padding:14px 16px;font-size:18px}
  .nav a.nav-cta{margin:6px 0 0}
}

/* Diensten-dropdown */
.sub{position:relative;display:flex;align-items:center}
.sub-knop{background:none;border:0;padding:0 8px 0 0;width:26px;height:40px;cursor:pointer;position:relative;color:rgba(255,255,255,.86)}
.sub-knop::after{content:"";position:absolute;left:4px;top:15px;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.sub-menu{display:none;position:absolute;left:0;top:calc(100% + 6px);min-width:280px;background:var(--nacht-2);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:8px;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.sub-menu a{display:block;padding:11px 14px;font-size:15px}
.sub-menu .sub-kop{font-weight:600;color:#fff}
.sub-menu .sub-kop:not(:first-child){margin-top:6px;border-top:1px solid rgba(255,255,255,.1);border-radius:0;padding-top:13px}
.sub-menu .sub-kind{padding:8px 14px 8px 30px;font-size:14.5px;color:rgba(255,255,255,.72)}
.sub:hover .sub-menu,.sub:focus-within .sub-menu,.sub.open .sub-menu{display:flex}
.sub:hover .sub-knop::after,.sub.open .sub-knop::after{transform:rotate(225deg);top:19px}
.sub-actief>.sub-link{color:#fff;background:rgba(255,255,255,.08)}
@media(max-width:1060px){
  .sub{flex-wrap:wrap;align-items:stretch}
  .sub>.sub-link{flex:1}
  .sub-knop{width:48px;height:auto;padding:0}
  .sub-knop::after{left:18px;top:22px}
  .sub-menu{position:static;min-width:0;width:100%;border:0;box-shadow:none;padding:0 0 6px 16px;background:transparent}
  .sub:hover .sub-menu{display:none}
  .sub.open .sub-menu,.sub:focus-within .sub-menu{display:flex}
}

/* Hero (home) — de lamp gaat aan */
.hero{position:relative;background:var(--nacht);color:#fff;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:130px 0 90px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,90px);align-items:center;position:relative;z-index:2}
.hero h1{color:#fff;max-width:19ch;font-size:clamp(38px,5vw,62px)}
.hero .lead{color:rgba(255,255,255,.78);margin-top:26px}
.hero-cta{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap}
.hero-feit{margin-top:56px;display:flex;gap:24px 36px;flex-wrap:wrap;color:rgba(255,255,255,.6);font-size:14px}
.hero-feit strong{display:block;color:#fff;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.hero-tekst{opacity:0;transform:translateY(14px);transition:opacity .9s ease .1s,transform .9s ease .1s}
.lit .hero-tekst{opacity:1;transform:none}
.lamp{position:relative;justify-self:center;width:min(100%,460px);aspect-ratio:760/850}
.lamp svg{width:100%;height:100%;color:#3a3c42;transition:color .25s}
.lamp #lb-fill,.lamp #lb-rays{opacity:0;transition:opacity .25s}
.gloed{position:absolute;inset:-40%;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 42%,rgba(242,181,28,.55) 0,rgba(242,181,28,.22) 22%,rgba(242,181,28,.06) 40%,transparent 60%)}
.hero-licht{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 70% 80% at 72% 45%,rgba(242,181,28,.18),transparent 65%)}
/* aan-stand */
.lit .lamp svg{color:#f7f3e6}
.lit .lamp #lb-fill,.lit .lamp #lb-rays{opacity:1}
.lit .gloed,.lit .hero-licht{opacity:1}
/* het flikkeren: alleen tijdens de intro (.flik), daarna staat alles vast aan */
@keyframes flik{
  0%,18%{opacity:0}
  20%,23%{opacity:1}
  24%,36%{opacity:0}
  37%,39%{opacity:.7}
  40%,52%{opacity:0}
  53%,100%{opacity:1}}
@keyframes flik-kleur{
  0%,18%{color:#3a3c42}
  20%,23%{color:#f7f3e6}
  24%,36%{color:#3a3c42}
  37%,39%{color:#d8d2bd}
  40%,52%{color:#3a3c42}
  53%,100%{color:#f7f3e6}}
.flik .lamp svg{animation:flik-kleur 1.5s steps(1,end) both}
.flik .lamp #lb-fill,.flik .lamp #lb-rays,.flik .gloed,.flik .hero-licht{animation:flik 1.5s steps(1,end) both}
.flik .hero-tekst{transition-delay:1.25s}
.hero-stroom{position:absolute;left:0;right:0;bottom:0;z-index:2}
@media(max-width:900px){
  .hero{padding:110px 0 70px}
  .hero .wrap{grid-template-columns:1fr}
  .lamp{order:-1;width:min(62vw,300px)}
  .hero h1{max-width:none}
}
@media(prefers-reduced-motion:reduce){
  .flik .lamp svg,.flik .lamp #lb-fill,.flik .lamp #lb-rays,.flik .gloed,.flik .hero-licht,.stroom.stroomt::after,.lamp.knipoog svg,.lamp.knipoog .gloed,.lamp.knipoog #lb-fill,.lamp.knipoog #lb-rays{animation:none}
  .hero-tekst{transition:none}
  html{scroll-behavior:auto}
}

/* Compacte donkere kop op subpagina's */
.kop{background:var(--nacht);color:#fff;padding:150px 0 70px;position:relative}
.kop .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:end}
.kop h1{color:#fff;font-size:clamp(36px,5.2vw,64px)}
.kop .lead{color:rgba(255,255,255,.75);margin-top:20px}
.kop .kruimel{color:rgba(255,255,255,.55);font-size:15px;margin-bottom:22px}
.kop .kruimel a{color:rgba(255,255,255,.75);text-decoration:none}
.kop .kruimel a:hover{color:#fff}
.kop .lampje{width:120px;color:#f7f3e6;filter:drop-shadow(0 0 28px rgba(242,181,28,.45))}
@media(max-width:700px){.kop{padding:120px 0 50px}.kop .wrap{grid-template-columns:1fr}.kop .lampje{display:none}}

/* Secties */
section{padding:clamp(72px,9vw,120px) 0}
.sec-paper{background:var(--paper)}
.sec-kop{max-width:62ch;margin-bottom:clamp(36px,5vw,56px)}
.sec-kop .lead{margin-top:18px}
.twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,72px);align-items:start}
.drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,48px)}
@media(max-width:820px){.twee,.drie{grid-template-columns:1fr}}

/* Foto-vlakken (placeholders tot de echte foto's er zijn) */
.foto{background:var(--paper);border-radius:10px;aspect-ratio:4/3;overflow:hidden;position:relative}
.foto img{width:100%;height:100%;object-fit:cover}
.foto-ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--steel);font-size:15px;line-height:1.4;background:
  repeating-linear-gradient(135deg,transparent 0 22px,rgba(38,40,42,.04) 22px 23px),var(--paper);border:1px dashed var(--line)}
.foto-ph span{max-width:26ch}
.foto-hoog{aspect-ratio:3/4}
.foto-breed{aspect-ratio:16/8}

/* Tijdlijn (ons verhaal is echt een reeks) */
.tijd{list-style:none;margin:0;padding:0;border-left:3px solid var(--geel);margin-left:6px}
.tijd li{position:relative;padding:0 0 36px 32px}
.tijd li:last-child{padding-bottom:0}
.tijd li::before{content:"";position:absolute;left:-10px;top:8px;width:17px;height:17px;border-radius:50%;background:var(--geel);border:3px solid var(--wit)}
.sec-paper .tijd li::before{border-color:var(--paper)}
.tijd time{display:block;font-weight:700;font-size:22px;letter-spacing:-.02em;margin-bottom:6px}
.tijd p{color:var(--ink-2)}

/* Feiten in één rij, geen tegels */
.feiten{display:flex;flex-wrap:wrap;gap:20px 40px;margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.feiten div{color:var(--steel);font-size:15px}
.feiten strong{display:block;color:var(--ink);font-size:32px;font-weight:700;letter-spacing:-.025em;line-height:1.1}

/* Waarden */
.waarden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,48px);margin-top:8px}
.waarden h3{font-size:21px;margin-bottom:8px}
.waarden p{color:var(--ink-2)}
.waarden:has(> :nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.waarden:has(> :nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.waarden,.waarden:has(> :nth-child(4)){grid-template-columns:1fr}}

/* Werkwijze: wel een reeks, dus wel nummers */
.stappen{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,48px)}
.stappen li{counter-increment:s;padding-top:18px;border-top:1px solid var(--line)}
.stappen li::before{content:counter(s);display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--geel);font-weight:700;margin-bottom:14px}
.stappen h3{font-size:20px;margin-bottom:8px}
.stappen p{color:var(--ink-2);font-size:16px}
@media(max-width:820px){.stappen{grid-template-columns:1fr}}

/* Bel ons */
.bel-kaart{background:var(--wit);border:1px solid var(--line);border-left:4px solid var(--geel);border-radius:10px;padding:26px 28px;max-width:380px}
.bel-kaart strong{display:block;font-size:20px;letter-spacing:-.01em}
.bel-kaart .rol{color:var(--steel);font-size:15px;margin:6px 0 14px}
.bel-kaart .tel{display:block;font-weight:600;font-size:18px;text-decoration:none;color:var(--ink);margin-top:8px}
.bel-kaart .tel:first-of-type{margin-top:0}
.bel-kaart .tel:hover{text-decoration:underline;text-decoration-color:var(--geel);text-decoration-thickness:3px}
@media(max-width:700px){.bel-kaart{max-width:none}}

/* Formulier */
form{display:grid;gap:16px}
.veld{display:grid;gap:6px}
.veld label{font-weight:600;font-size:15px}
.veld input,.veld textarea,.veld select{font:inherit;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--wit);color:var(--ink);width:100%}
.veld input:focus,.veld textarea:focus,.veld select:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(242,181,28,.45)}
.veld textarea{min-height:140px;resize:vertical}
.veld-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.veld-2{grid-template-columns:1fr}}
.form-noot{font-size:14px;color:var(--steel)}
.hp{position:absolute;left:-9999px}

/* CTA-band */
.cta-band{background:var(--nacht);color:#fff;padding:clamp(60px,8vw,96px) 0}
.cta-band .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.cta-band h2{color:#fff;max-width:16ch}
.cta-band p{color:rgba(255,255,255,.72);margin-top:14px}
.cta-band .knoppen{display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:820px){.cta-band .wrap{grid-template-columns:1fr}}

/* Footer */
.site-foot{background:var(--ink);color:rgba(255,255,255,.72);padding:56px 0 28px;font-size:15px}
.site-foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.site-foot img{height:70px;width:auto;margin-bottom:18px}
.site-foot .foot-kop{color:#fff;font-size:15px;font-weight:700;margin:0 0 12px}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-foot a{color:rgba(255,255,255,.8);text-decoration:none}
.site-foot a:hover{color:var(--geel)}
.site-foot address{font-style:normal;line-height:1.7}
.foot-onder{width:min(var(--wrap),100% - 2*var(--pad));margin:40px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:14px;color:rgba(255,255,255,.5)}
.foot-onder a{color:rgba(255,255,255,.6)}
@media(max-width:820px){.site-foot .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.site-foot .wrap{grid-template-columns:1fr}}

/* Tekstpagina's (privacy) */
.prose{max-width:70ch}
.prose h2{font-size:26px;margin:40px 0 12px}
.prose h3{font-size:20px;margin:26px 0 8px}
.prose ul{padding-left:20px}
.prose li{margin-bottom:6px}

/* Dienstpagina-opmaak */
.dienst-blok{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--line)}
.dienst-blok:first-of-type{border-top:0;padding-top:0}
.dienst-blok:nth-child(even) .foto{order:-1}
.dienst-blok h2{font-size:clamp(26px,3vw,36px);margin-bottom:14px}
.dienst-blok ul{padding-left:0;list-style:none;margin:18px 0 0;display:grid;gap:8px}
.dienst-blok li{padding-left:22px;position:relative;color:var(--ink-2)}
.dienst-blok li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:3px;background:var(--geel)}
@media(max-width:820px){.dienst-blok{grid-template-columns:1fr}.dienst-blok:nth-child(even) .foto{order:0}}
.punten{padding:24px 0 0;list-style:none;margin:0;display:grid;gap:8px}
.punten li{padding-left:22px;position:relative;color:var(--ink-2)}
.punten li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:3px;background:var(--geel)}
.inzet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,48px)}
.inzet>div{padding:28px;border-radius:10px;background:var(--paper)}
.inzet h3{margin-bottom:10px}
.inzet p{color:var(--ink-2)}
@media(max-width:700px){.inzet{grid-template-columns:1fr}}

/* ---------- Eigen componenten ---------- */

/* Label: klein kopje met een geel streepje (de stroomlijn in het klein) */
.label{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;line-height:1.25;margin:0 0 12px;color:var(--steel)}
.label::before{content:"";flex:none;width:22px;height:3px;background:var(--geel)}
.label-licht{color:rgba(255,255,255,.7)}
.hero .geel,.kop .geel{color:var(--geel)}
.geel{color:#8a6a06;font-weight:700}

/* Twee pijlers: donkere fotoblokken */
.pijlers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,32px);margin-top:12px}
.pijler{display:block;text-decoration:none;color:#fff;background:var(--nacht);border-radius:10px;position:relative;overflow:hidden;min-height:400px}
.pijler img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7;transition:transform .6s,opacity .3s}
.pijler:hover img{transform:scale(1.04);opacity:.8}
.pijler .in{position:absolute;inset:auto 0 0 0;padding:clamp(24px,4vw,40px);background:linear-gradient(to top,rgba(20,21,24,.96),rgba(20,21,24,.6) 60%,transparent)}
.pijler .label{color:var(--geel);margin-bottom:8px}
.pijler h3{font-size:clamp(30px,3.4vw,44px);color:#fff}
.pijler p{color:rgba(255,255,255,.85);max-width:40ch;margin-top:8px}
.pijler .meer{display:inline-block;margin-top:14px;font-weight:600;color:var(--geel)}
.pijler:hover .meer{text-decoration:underline}
@media(max-width:700px){.pijlers{grid-template-columns:1fr}.pijler{min-height:300px}}

/* Vijf facility-takken met foto */
.takken{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px clamp(14px,2vw,24px)}
.takken a{text-decoration:none;color:inherit;display:block}
.tegel{aspect-ratio:4/5;background:var(--paper);border-radius:10px;overflow:hidden;position:relative}
.tegel img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.takken .tegel{margin-bottom:14px}
.takken a:hover .tegel img{transform:scale(1.05)}
.takken a:hover h3{text-decoration:underline;text-decoration-color:var(--geel);text-decoration-thickness:3px;text-underline-offset:3px}
.takken h3{font-size:19px;margin:6px 0;line-height:1.15;border-top:3px solid var(--geel);padding-top:12px}
.takken p{color:var(--steel);font-size:15px;line-height:1.5}
.tegel .foto-ph{position:absolute;inset:0;border:0;border-radius:0}
@media(max-width:1000px){.takken{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.takken{grid-template-columns:repeat(2,minmax(0,1fr))}}
.takken-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){.takken-3{grid-template-columns:1fr}}
.takken-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
@media(max-width:600px){.takken-2{grid-template-columns:1fr}}

/* Vacature */
.vac-feiten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vac-feiten>div{background:var(--wit);border:1px solid var(--line);border-left:4px solid var(--geel);border-radius:10px;padding:18px 22px}
.vf-k{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--steel);font-weight:600;margin-bottom:4px}
.vac-feiten strong{display:block;font-size:20px;line-height:1.25;letter-spacing:-.01em}
.vac-feiten small{display:block;color:var(--ink-2);margin-top:4px;font-size:14.5px;line-height:1.4}
@media(max-width:900px){.vac-feiten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.vac-feiten{grid-template-columns:1fr}}
.waarden.waarden-3,.waarden.waarden-3:has(> :nth-child(4)){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:820px){.waarden.waarden-3,.waarden.waarden-3:has(> :nth-child(4)){grid-template-columns:1fr}}
.veld-kop{font-weight:600;font-size:15px}
.veld .checks{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px}
.veld .checks label{display:flex;align-items:center;gap:10px;font-weight:500}
.veld .checks input{width:20px;height:20px;padding:0;accent-color:var(--ink);flex:none}
@media(max-width:560px){.veld .checks{grid-template-columns:1fr}}

/* Puntenlijst */
.punten{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:10px}
.punten li{padding-left:26px;position:relative;color:var(--ink-2)}
.punten li::before{content:"";position:absolute;left:0;top:.6em;width:14px;height:3px;background:var(--geel)}

/* Foto's */
.foto{border-radius:10px}
.dienst-blok .label{margin-bottom:6px}
.inzet>div{border-left:5px solid var(--geel);background:var(--wit)}
.cta-band .label{color:var(--geel)}

/* Stroomlijn met een stroompje erdoor (wordt door JS gestart als hij in beeld komt) */
.stroom{position:relative;overflow:hidden}
.stroom::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,transparent 0,rgba(255,255,255,0) 40%,rgba(255,244,200,.95) 50%,rgba(255,255,255,0) 60%,transparent 100%) 0 2px/100% 4px no-repeat,
  linear-gradient(90deg,transparent 0,rgba(255,255,255,0) 40%,rgba(255,244,200,.95) 50%,rgba(255,255,255,0) 60%,transparent 100%) 0 9px/100% 4px no-repeat,
  linear-gradient(90deg,transparent 0,rgba(255,255,255,0) 40%,rgba(255,244,200,.95) 50%,rgba(255,255,255,0) 60%,transparent 100%) 0 16px/100% 4px no-repeat;
  background-size:38% 4px,38% 4px,38% 4px;background-position:-40% 2px,-40% 9px,-40% 16px;opacity:0}
.stroom.stroomt::after{animation:stroompje 2.4s cubic-bezier(.4,0,.2,1) 1}
@keyframes stroompje{0%{background-position:-40% 2px,-40% 9px,-40% 16px;opacity:0}10%{opacity:1}90%{opacity:1}100%{background-position:140% 2px,140% 9px,140% 16px;opacity:0}}

/* Hero: het licht volgt de cursor; de lamp knipoogt bij hover */
.hero-licht{background:radial-gradient(ellipse 70% 80% at var(--mx,72%) var(--my,45%),rgba(242,181,28,.2),transparent 62%);transition:opacity .3s}
.hero.volgt .hero-licht{transition:none}
.lamp{cursor:pointer}
.lamp.knipoog svg{animation:knipoog .9s steps(1,end) 1}
.lamp.knipoog .gloed{animation:knipoog-gloed .9s ease 1}
@keyframes knipoog{0%,100%{color:#f7f3e6}15%,30%{color:#5a5b60}}
@keyframes knipoog-gloed{0%,100%{opacity:1}15%,30%{opacity:.15}}
.lamp.knipoog #lb-fill,.lamp.knipoog #lb-rays{animation:knipoog-rays .9s steps(1,end) 1}
@keyframes knipoog-rays{0%,100%{opacity:1}15%,30%{opacity:0}}

/* Voor/na-slider */
.vergelijk{display:grid;gap:10px}
.vergelijk-beeld{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--paper);--p:50%;user-select:none}
.vergelijk-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vergelijk-voor{position:absolute;inset:0;width:var(--p);overflow:hidden}
.vergelijk-voor img{width:calc(100% / (var(--pf,0.5)));max-width:none}
.vergelijk-lijn{position:absolute;top:0;bottom:0;left:var(--p);width:3px;background:var(--geel);transform:translateX(-50%);pointer-events:none}
.vergelijk-lijn span{position:absolute;top:50%;left:50%;width:44px;height:44px;border-radius:50%;background:var(--geel);transform:translate(-50%,-50%);box-shadow:0 4px 16px rgba(0,0,0,.35)}
.vergelijk-lijn span::before,.vergelijk-lijn span::after{content:"";position:absolute;top:50%;width:8px;height:8px;border-top:2.5px solid var(--ink);border-left:2.5px solid var(--ink)}
.vergelijk-lijn span::before{left:12px;transform:translateY(-50%) rotate(-45deg)}
.vergelijk-lijn span::after{right:12px;transform:translateY(-50%) rotate(135deg)}
.vergelijk-tag{position:absolute;top:12px;padding:5px 10px;border-radius:4px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:rgba(20,21,24,.75);color:#fff}
.vergelijk-tag-voor{left:12px}.vergelijk-tag-na{right:12px}
.vergelijk-beeld input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none}
.vergelijk-beeld input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%}
.vergelijk-beeld input[type=range]::-moz-range-thumb{width:44px;height:100%;border:0}
.vergelijk-beeld input:focus-visible{opacity:0}
.vergelijk-beeld:has(input:focus-visible){outline:3px solid var(--geel);outline-offset:3px}
.voorna-cap{font-size:15px;color:var(--ink-2)}

/* Teller */
.teller{font-variant-numeric:tabular-nums}

/* FAQ */
.faq{max-width:760px}
.faq details{border-top:1px solid var(--line);padding:6px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;font-size:18px;padding:14px 36px 14px 0;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:12px;height:12px;border-right:3px solid var(--geel);border-bottom:3px solid var(--geel);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{color:var(--ink-2);padding:0 0 16px;max-width:66ch}

/* Werk in beeld */
.gal-kop{font-size:22px;margin:40px 0 16px}
.gal-kop:first-of-type{margin-top:0}
.galerij{display:grid;gap:clamp(16px,2.5vw,28px)}
.galerij-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.galerij-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.galerij-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.galerij figure{margin:0}
.galerij img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;background:var(--paper)}
.galerij figcaption{font-size:14px;color:var(--steel);margin-top:8px;line-height:1.4}
@media(max-width:900px){.galerij-2{grid-template-columns:1fr}.galerij-3,.galerij-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.galerij-3,.galerij-4{grid-template-columns:1fr}}

/* Andere diensten */
.andere{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.andere a{display:inline-block;padding:12px 18px;border:2px solid var(--ink);border-radius:var(--r);text-decoration:none;font-weight:600;font-size:15px}
.andere a:hover{background:var(--ink);color:#fff}

/* Teamstrook en foto-uitsnedes */
.team-strip{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(12px,2vw,24px);margin:0 0 56px}
.team-strip-2{grid-template-columns:2fr 1fr}
.team-strip figure{margin:0;border-radius:10px;overflow:hidden;background:var(--paper);height:clamp(260px,32vw,420px)}
.team-strip img{width:100%;height:100%;object-fit:cover}
@media(max-width:700px){.team-strip,.team-strip-2{grid-template-columns:1fr}.team-strip figure{height:280px}}
.foto-truck img{object-position:50% 30%}

/* Cv of ervaring (vacature) */
.veld-uitleg{margin:0;color:var(--ink-2);font-size:15px}
.veld .cv-upload{display:block;border:2px dashed var(--geel-diep);border-radius:10px;padding:18px 20px;background:var(--paper);cursor:pointer;font-weight:500}
.cv-titel{display:block;font-weight:700;font-size:17px}
.cv-sub{display:block;font-size:14px;color:var(--steel);margin-bottom:4px}
.veld .cv-upload input{border:0;padding:8px 0 0;background:transparent;box-shadow:none;width:100%}
.form-fout{margin:0;color:#b3261e;font-weight:600}