/* ============================================================
 * cjdeboer — CJ de Boer-huisstijl.
 * Kleuren (klant-spec): oranje #fcaf3c (252-175-59), antraciet #404041 (64-64-65).
 * Fonts: Eurostile (koppen, van cjdeboer.nl) + Söhne (body).
 * ============================================================ */
@font-face{font-family:Sohne;src:url("assets/68b027b0e8d3ada73a438bbc_soehne-web-buch.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Sohne;src:url("assets/68a6f057b33cd4ecbc79c85b_soehne-web-halbfett.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Sohne;src:url("assets/68b027af738fc57555d69e94_soehne-web-buch-kursiv.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
/* Eurostile — de echte cjdeboer-koppenfont (van cjdeboer.nl) */
@font-face{font-family:Eurostile;src:url("assets/eurostile-webfont.woff2") format("woff2"),url("assets/eurostile-webfont.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Eurostile;src:url("assets/eurostile-bold-1361505679-webfont.woff2") format("woff2"),url("assets/eurostile-bold-1361505679-webfont.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#404041;       /* antraciet 64-64-65 (bodytekst) */
  --char:#404041;      /* antraciet 64-64-65 (topbar/donkere secties) */
  --paper:#ffffff;     /* wit */
  --accent:#fcaf3c;    /* oranje 252-175-59 — enige oranje */
  --accent-deep:#fcaf3c;
  --line:rgba(64,64,65,.2);
  --head:Eurostile,"Eurostile",Arial,sans-serif;
  --ease:cubic-bezier(.19,1,.22,1);
  --gutter:clamp(1.4rem,4.5vw,5.5rem);  /* ruim van de kant af (klant-opmerking) */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper);font-size:calc(.92rem + .1vw)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Sohne,Arial,sans-serif;font-variant-ligatures:none;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.menu-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p,h1,h2,h3{margin:0;font-weight:400}
h1,h2,h3{font-family:var(--head);font-weight:700}
p{font-size:1rem;line-height:1.35}
h1,h2{letter-spacing:0;line-height:1}
h2{font-size:clamp(1.9rem,3.4vw,3.8rem)}
h3{font-size:clamp(1.1rem,1.4vw,1.5rem);line-height:1.1}
em{font-style:normal;font-weight:700;color:var(--accent)}
button,input,textarea{font:inherit}

.kicker{display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;font-weight:800;color:var(--accent)}

/* ---------- cursor label ---------- */
.cursor-label{display:none;position:fixed;left:0;top:0;z-index:1000;pointer-events:none;transform:translate3d(-50%,-50%,0);transition:opacity .25s var(--ease)}
.cursor-label span{display:block;background:var(--accent);color:var(--ink);border-radius:999px;padding:.45rem .8rem;font-size:.8rem;font-weight:800;white-space:nowrap}

/* ---------- topbar (antraciet utility) ---------- */
.topbar{position:fixed;top:0;left:0;width:100%;z-index:60;background:var(--char);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:38px;padding:.4rem var(--gutter);font-family:var(--head);font-size:.8rem;font-weight:400;letter-spacing:.02em}
.topbar .tb-left{display:flex;flex-wrap:wrap;gap:1.3rem}
.topbar .tb-right{display:flex;gap:1.4rem}
.topbar a{color:#fff}
.topbar a:hover{color:var(--accent)}

/* ---------- nav (gele header, zwart logo) ---------- */
.site-nav{position:fixed;top:38px;left:0;width:100%;z-index:50;display:flex;align-items:center;padding:.85rem var(--gutter);background:var(--accent);transition:padding .35s var(--ease)}
.site-nav.scrolled{padding-top:.55rem;padding-bottom:.55rem}
.brand{z-index:2;display:flex;align-items:center}
.brand img{height:4.4rem;width:auto;object-fit:contain;transition:height .35s var(--ease)}
.site-nav.scrolled .brand img{height:3.2rem}
.nav-menu{display:flex;align-items:center;justify-content:flex-end;gap:2.2vw;width:100%;padding-left:4vw}
.nav-menu a{position:relative;font-family:var(--head);font-size:1.06rem;color:var(--char)}
.nav-menu a:after{content:"";position:absolute;left:0;bottom:-.16rem;width:100%;height:1px;background:var(--char);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav-menu a:hover:after{transform:scaleX(1);transform-origin:left}
.nav-cta{border:1px solid var(--char);padding:.3rem 1.1rem;transition:background .3s var(--ease),color .3s var(--ease)}
.nav-cta:hover{background:var(--char);color:#fff}
.nav-cta:after{display:none!important}
/* uniforme hover-onderlijn = zelfde schuivende effect als het menu, op alle tekst-knoppen */
.link,.arrow-cta,.dienst-more,.svc-card-link,.back-link{position:relative;font-family:var(--head);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.link:after,.arrow-cta:after,.dienst-more:after,.svc-card-link:after,.back-link:after{content:"";position:absolute;left:0;bottom:-.14rem;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.link:hover:after,.arrow-cta:hover:after,.dienst-more:hover:after,.svc-card-link:hover:after,.back-link:hover:after,.dienst:hover .dienst-more:after,.svc-card:hover .svc-card-link:after{transform:scaleX(1);transform-origin:left}
/* Terug-links kleuren bij hover mee met de rest van de knoppen. */
.back-link:hover,.dienst:hover .dienst-more,.svc-card:hover .svc-card-link,.link:hover,.arrow-cta:hover{color:var(--accent)}
.nav-group{position:relative}
.subnav{position:absolute;left:0;top:calc(100% + .55rem);min-width:13.5rem;display:flex;flex-direction:column;background:var(--accent);padding:.45rem 0;opacity:0;visibility:hidden;transform:translateY(.4rem);transition:.28s var(--ease);box-shadow:0 3px 8px rgba(64,64,65,.08),0 18px 34px -14px rgba(64,64,65,.45);z-index:60}
.subnav:before{content:"";position:absolute;left:0;right:0;top:-.6rem;height:.6rem}
.nav-group:hover .subnav{opacity:1;visibility:visible;transform:translateY(0)}
.subnav a{padding:.5rem 1.3rem;font-size:.98rem;color:var(--char)}
.subnav a:after{display:none}
.subnav a:hover{color:#fff}
.mobile-extras,.menu-toggle{display:none}
section[id]{scroll-margin-top:6rem}

/* ---------- HERO (alleen foto + kop, GEEN grijze overlay) ---------- */
.hero{position:relative;min-height:780px;display:flex;flex-direction:column;justify-content:center;padding-top:8.5rem;overflow:hidden;background:var(--char)}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-inner{position:relative;z-index:2;width:100%;padding:0 var(--gutter);color:#fff}
.hero h1{text-align:left;max-width:20ch;font-size:clamp(2.8rem,5.2vw,5.7rem);font-weight:700;line-height:1.03;margin:0;text-shadow:0 2px 24px rgba(0,0,0,.32),0 1px 3px rgba(0,0,0,.35)}
/* inner-page hero (home-stijl, iets korter + subtiele scrim voor leesbaarheid) */
.hero--inner{min-height:600px}
.hero--inner:before{display:none}
.hero--inner .hero-inner{z-index:2}
.hero-inner .crumbs{margin-bottom:1.1rem}
.hero-inner .kicker{display:block;margin-bottom:.9rem;text-shadow:0 1px 10px rgba(0,0,0,.45)}

/* ---------- LEAD: amber balk (compacte CTA op 1 regel) ---------- */
.lead{background:var(--accent);color:var(--char)}
.lead--white{background:var(--paper)}
.lead-cta{display:flex;align-items:center;justify-content:space-between;gap:1.4rem 2rem;flex-wrap:wrap;padding:1.5rem var(--gutter)}
.lead-cta h2{font-size:clamp(1.1rem,1.55vw,1.4rem);line-height:1.1;margin:0;font-weight:700}
.lead-act{display:flex;align-items:center;gap:1.4rem}
.lead .phone{font-size:clamp(1rem,1.4vw,1.25rem);font-weight:700;border-bottom:1px solid var(--char);white-space:nowrap}
/* outline-knop, zelfde stijl als de Contact-knop in het menu */
.lead .btn{display:inline-block;background:transparent;border:1px solid var(--char);color:var(--char);padding:.3rem 1.1rem;font-family:var(--head);font-weight:400;white-space:nowrap;transition:background .3s var(--ease),color .3s var(--ease)}
.lead .btn:hover{background:var(--char);color:#fff}

/* ---------- INTRO 2-koloms tekst (wit) ---------- */
.intro{padding:5.5rem var(--gutter) 0}
.intro .kicker{margin-bottom:1.4rem}
.intro-cols{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem}
.intro-cols p{color:rgba(64,64,65,.78);font-size:1.02rem;line-height:1.5}

/* ---------- generieke band ---------- */
.band{padding:6.5rem var(--gutter)}
.section-head{display:flex;flex-direction:column;gap:.9rem;margin-bottom:3rem;max-width:50rem}
.section-head.wide{max-width:62rem}

/* ---------- VACATURES (Erkend Leerbedrijf) ---------- */
.vac-intro{max-width:54ch;color:rgba(64,64,65,.72);margin:.4rem 0 0}
/* lijnen even dik, alleen boven en onder de tekst (geen verticale tussenlijn) */
.vac-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 3rem}
.vac-card{display:flex;flex-direction:column;gap:.9rem;padding:1.8rem 0 1.7rem;border-top:1px solid var(--ink);min-height:13rem}
.vac-card:nth-last-child(-n+2){border-bottom:1px solid var(--ink)}
.vac-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.vac-head h3{font-size:1.35rem;font-weight:800}
.vac-head span{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--accent);white-space:nowrap}
.vac-card p{color:rgba(64,64,65,.74);margin:0}
.vac-card .link{margin-top:auto;color:var(--accent);padding-bottom:.15rem;width:max-content;transition:color .3s var(--ease)}

/* ---------- DIENSTEN: liggende kaarten, WITTE achtergrond ---------- */
.diensten{background:var(--paper);color:var(--ink);padding:5rem var(--gutter)}
.diensten .section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:2.4rem;flex-wrap:wrap}
.dienst-row{display:grid;grid-template-columns:repeat(5,1fr);gap:1.4rem}
.dienst{display:block}
.dienst-img{position:relative;overflow:hidden;aspect-ratio:1.08/.84}
.dienst-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .7s ease}
.dienst:hover .dienst-img img{filter:brightness(.96);transform:scale(1.03)}
.dienst h3{margin-top:.85rem;font-size:clamp(1.05rem,1.3vw,1.3rem);color:var(--ink)}
.dienst-more{display:inline-flex;align-items:center;margin-top:.55rem;font-family:var(--head);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);transition:color .3s var(--ease)}
.dienst:hover .dienst-more{color:var(--char)}

/* ---------- principes — AMBER sectie (grote burnt-cijfers, subtiele verticale lijntjes) ---------- */
#waarom{background:var(--accent)}
#waarom .kicker{color:#fff}
#waarom h2{color:var(--char)}
.principles{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem 0}
.principles article{display:flex;flex-direction:column;gap:.7rem;padding:0 2rem;border-right:1px solid rgba(64,64,65,.22)}
.principles article:first-child{padding-left:0}
.principles article:last-child{padding-right:0;border-right:0}
.principles article span{font-family:var(--head);font-weight:700;color:#fff;font-size:clamp(2.4rem,4.2vw,3.6rem);line-height:1}
.principles h3{font-size:1.2rem;font-weight:800;color:var(--char)}
.principles p{color:rgba(64,64,65,.82)}

/* ---------- rijdende bus op de footer-rand ---------- */
.busbaan{position:relative;width:100%;height:clamp(105px,12vw,150px);margin:-1px 0 0;overflow:hidden;z-index:2;background:var(--accent);border-bottom:5px solid var(--char)}
.busje{position:absolute;bottom:0;left:0;width:min(19%,220px);z-index:2;will-change:transform}
.busje-body{display:block;width:100%;height:auto}

/* ---------- PORTFOLIO project-slider (donker) ---------- */
.portfolio{background:#e9ecef;color:var(--char);overflow:hidden;padding:6.5rem var(--gutter)}
.portfolio .section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:2.6rem;flex-wrap:wrap}
.portfolio .section-heading h2{max-width:18ch}
.arrow-cta{display:inline-flex;align-items:center;color:var(--accent);transition:color .3s var(--ease)}
.arrow-cta:hover{color:var(--char)}
.circle-arrow{border:1.5px solid currentColor;border-radius:50%;display:inline-grid;place-items:center;height:54px;width:54px;flex:none;transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease)}
.circle-arrow:before{content:"\2197\FE0E";font-size:1.32rem;line-height:1;transform:translateY(.5px)}
.arrow-cta:hover .circle-arrow{transform:scale(.96)}
/* 'alle diensten' (diensten-sectie): geen cirkel om de pijl */
.diensten .circle-arrow{border:0;width:auto;height:auto}
.diensten .arrow-cta:hover .circle-arrow{background:transparent;color:inherit;transform:none}
.projects-track{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;padding:0 0 1rem}
.projects-track::-webkit-scrollbar{display:none}
.projects-track.is-dragging{cursor:grabbing;scroll-behavior:auto}
.project-card{scroll-snap-align:start}
.project-card a{display:block}
.project-card img{width:100%;aspect-ratio:1.08/.84;object-fit:cover;transition:transform .9s var(--ease),filter .7s ease;display:block}
.project-card a:hover img{filter:brightness(.9);transform:scale(.99)}
.project-meta{display:flex;justify-content:flex-start;align-items:center;gap:.55rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:.9rem;color:var(--char)}
.project-meta .cat{color:var(--char)}
.project-meta .bar{opacity:.35;font-weight:400}
.project-meta .loc{color:var(--char);opacity:.55}
.project-card h3{white-space:nowrap;font-size:clamp(1.08rem,1.3vw,1.28rem);margin-top:.85rem}

/* ---------- over (foto links, tekst rechts) ---------- */
.about{padding:5rem var(--gutter)}
.about-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:3.5rem;align-items:center}
.about-text{max-width:42rem}
.about-text h2{margin:.8rem 0 1.3rem}
.about-text p{color:rgba(64,64,65,.78);margin-bottom:1rem;font-size:1.05rem;line-height:1.45}
.about-text .link{display:inline-block;margin-top:.6rem;color:var(--accent);padding-bottom:.15rem;transition:color .3s var(--ease)}
.about-text .link:hover{color:var(--char)}
.about-img{position:relative;aspect-ratio:4/3;overflow:hidden}
.about-img img{width:100%;height:100%;object-fit:cover}

/* ---------- OFFERTE-sectie (GELE achtergrond) ---------- */
.offerte{padding:6rem var(--gutter);background:var(--accent);color:var(--char)}
.offerte-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:start}
.offerte-info{max-width:34rem}
.offerte .kicker{color:#fff}
.offerte-info h2{margin:.7rem 0 1.2rem}
.offerte-info p{color:rgba(64,64,65,.82);font-size:1.05rem;line-height:1.45;margin-bottom:1.6rem}
.offerte-contact{display:flex;flex-direction:column;gap:.4rem}
.offerte-contact a{font-weight:800;font-size:1.15rem}
.offerte-contact a:hover{color:#fff}
.offerte-contact p{color:rgba(64,64,65,.8);margin:0}
.offerte-form{background:transparent;border:0;padding:0}
.offerte-form label{display:grid;gap:.35rem;border-bottom:1px solid rgba(64,64,65,.4);padding:1rem 0}
.offerte-form .field-row{display:grid;grid-template-columns:1fr 1.5fr;gap:1.4rem}
.offerte-form label span{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(64,64,65,.72)}
.offerte-form input,.offerte-form textarea{border:0;background:transparent;outline:0;padding:.3rem 0;color:var(--char);resize:none;font-size:1rem}
.offerte-form input::placeholder,.offerte-form textarea::placeholder{color:rgba(64,64,65,.8);font-weight:500}
.offerte-form button{margin-top:1.3rem;border:0;background:var(--char);color:#fff;padding:.75rem 1.9rem;font-weight:700;cursor:pointer;transition:transform .3s var(--ease)}
.offerte-form button:hover{transform:translateY(-2px)}

/* ---------- DONKERE footer ---------- */
.footer{background:var(--char);color:var(--paper);padding:5rem var(--gutter) 2rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.6rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.16)}
.footer-logo{width:11rem;margin-bottom:1.4rem}
.footer h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:.9rem}
.footer-col{display:flex;flex-direction:column;gap:.45rem}
.footer a,.footer p{font-size:1rem;line-height:1.3;color:rgba(255,255,255,.82)}
.footer a:hover{color:var(--accent)}
.footer-social{display:flex;gap:.6rem;margin-top:1.1rem}
.footer-social a{display:inline-grid;place-items:center;width:2.3rem;height:2.3rem;border:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.82);transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.footer-social a:hover{background:var(--accent);border-color:var(--accent);color:var(--char)}
.footer-social svg{width:1.05rem;height:1.05rem;fill:currentColor}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;padding-top:1.6rem}
.footer-bottom .trust{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}
.footer-bottom .trust span{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.6)}
.footer-bottom .trust .badge{display:inline-grid;place-items:center}
.footer-bottom .trust .badge img{height:2.7rem;width:auto;max-width:10rem;display:block;object-fit:contain;opacity:.92}
.footer-bottom .trust .badge:last-child img{height:3.2rem}
.footer-bottom .copy{margin-left:auto;font-size:.85rem;color:rgba(255,255,255,.55)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(1rem);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:991px){
  :root{--gutter:1.2rem}
  .cursor-label{display:none!important}
  .topbar .tb-left{display:none}
  .topbar{justify-content:flex-end}
  .site-nav{padding:.7rem 1.2rem}
  .brand img{height:3.4rem}
  .menu-toggle{z-index:80;margin-left:auto;display:grid;align-content:center;justify-items:end;gap:.45rem;width:3.2rem;height:1.7rem;background:transparent;border:0}
  .menu-toggle span{display:block;width:100%;height:2px;background:var(--char);transform-origin:center;transition:.35s var(--ease)}
  body.menu-open .menu-toggle span{background:#fff!important}
  /* Open = een echt kruis: twee even lange lijnen onder 45 graden die elkaar in
     het midden snijden. Stond eerder op 15 graden over de volle 3.2rem, wat als
     een uitgerekt kruis oogde. De halve tussenruimte (.45rem + 2px lijn = 9.2px)
     is .29rem, dus zoveel schuift elke lijn naar het midden. */
  .menu-toggle[aria-expanded="true"] span{width:1.75rem}
  .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(.29rem) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-.29rem) rotate(-45deg)}
  /* Het logo viel achter het menupaneel. De header maakt een eigen stapelcontext
     (z-index 50), dus binnen die context volstaat 80 om boven het paneel (70) uit
     te komen, net als de sluitknop. Op het antracieten paneel moet het dan wel de
     lichte versie zijn. */
  body.menu-open .brand{z-index:80}
  body.menu-open .brand img{filter:brightness(0) invert(1)}
  .nav-menu{position:fixed;inset:0;z-index:70;display:none;flex-direction:column;align-items:flex-start;justify-content:flex-start;height:100dvh;padding:8.5rem 1.2rem 2rem;background:var(--char);gap:1.1rem}
  body.menu-open .nav-menu{display:flex;animation:panelIn .35s var(--ease)}
  .nav-menu a{font-size:clamp(1.5rem,5.6vw,2.1rem);line-height:1.05;color:#fff!important}
  /* Contact was net zo groot als de hoofdkoppen en het kader sloot om de letters:
     nu een echte knop met eigen tekstgrootte en lucht eromheen. */
  .nav-menu .nav-cta{margin-top:.7rem;padding:.8rem 2rem;font-size:1.05rem;line-height:1;border-color:var(--accent);color:var(--accent)!important}
  .subnav{position:static;visibility:visible;opacity:1;transform:none;display:flex;flex-wrap:wrap;margin-top:.45rem;gap:.15rem;background:transparent;box-shadow:none}
  .subnav a{padding:.3rem 0 .3rem 1.1rem;font-size:1.05rem;color:rgba(255,255,255,.72)!important}
  .mobile-extras{display:grid;gap:.7rem;margin-top:auto}
  .mobile-extras a{font-size:1.2rem;color:var(--accent)!important}
  .hero{min-height:500px;padding-top:5.5rem}
  .hero h1{max-width:none;font-size:clamp(2.15rem,5.5vw,4.2rem);line-height:1.06}
  .lead-cta{flex-direction:column;align-items:flex-start;gap:1rem}
  .intro{padding-top:3.5rem}
  .intro-cols{grid-template-columns:1fr;gap:1.4rem}
  .intro-cols p:last-child{display:none}
  .vac-list{grid-template-columns:1fr;gap:0}
  .vac-card:nth-last-child(2){border-bottom:0}
  .diensten .section-heading{flex-direction:row;justify-content:space-between;align-items:center;gap:.8rem}
  .diensten .arrow-cta{color:var(--char)}
  .diensten .arrow-cta:hover{color:var(--accent)}
  .dienst-row{grid-auto-flow:column;grid-auto-columns:74vw;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;margin:0;padding:0 0 1rem}
  .dienst-row::-webkit-scrollbar{display:none}
  .projects-track{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:74vw;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab;margin:0;padding:0 0 1rem}
  .projects-track::-webkit-scrollbar{display:none}
  .dienst{scroll-snap-align:start}
  .principles{grid-template-columns:1fr 1fr;gap:2.4rem 1.8rem}
  .principles article,.principles article:first-child,.principles article:last-child{padding:0;border-right:0}
  .about-grid,.offerte-grid{grid-template-columns:1fr}
  .about-grid{gap:2rem}
  .about-img{aspect-ratio:16/10}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .footer-bottom .copy{margin-left:0;width:100%}
  .footer-bottom .trust{width:100%;gap:.8rem .6rem}
  .footer-bottom .trust span:not(.badge){flex-basis:100%;margin-bottom:.1rem}
  .footer-bottom .trust .badge{flex:1 1 0;height:3.2rem;padding:.4rem .55rem}
  .footer-bottom .trust .badge img{max-width:100%;max-height:2rem}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .principles{grid-template-columns:1fr;gap:1.8rem}
}
@media (min-width:992px){.cursor-label.is-visible{display:block}}
@keyframes panelIn{from{opacity:0;transform:translateY(.6rem) scale(.98)}to{opacity:1;transform:none}}

/* ============================================================
 * Inner-page componenten (zelfde tokens/stijl als home).
 * ============================================================ */
.page-hero{position:relative;background:var(--char);color:#fff;padding:calc(38px + 7.5rem) var(--gutter) 3.4rem;overflow:hidden}
.page-hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.3}
.page-hero .ph-inner{position:relative;z-index:2;max-width:62rem}
.page-hero .crumbs{margin-bottom:1.2rem}
.page-hero .kicker{color:var(--accent);display:block;margin-bottom:.7rem}
.page-hero h1{font-family:var(--head);font-weight:700;font-size:clamp(2.1rem,4vw,3.7rem);line-height:1.1;margin:0}
.page-hero .lead-text{margin-top:1.3rem;max-width:48rem;color:rgba(255,255,255,.84);font-size:1.06rem;line-height:1.5}
/* card-hero: rechthoek-uitsnede met tekst, valt over hero + sectie eronder */
.page-hero--card{display:flex;align-items:flex-end;min-height:clamp(360px,52vh,560px);padding:calc(38px + 5rem) var(--gutter) 0;overflow:visible}
.page-hero--card .hero-bg{opacity:1}
.page-hero--card:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(64,64,65,.1),rgba(64,64,65,.25))}
.page-hero--card .ph-card{position:relative;z-index:3;background:var(--char);color:#fff;padding:2.3rem 2.5rem 2.5rem;max-width:39rem;margin-bottom:-4rem}
.page-hero--card .crumbs{margin-bottom:1rem}
.page-hero--card .crumbs,.page-hero--card .crumbs a{color:rgba(255,255,255,.6)}
.page-hero--card .kicker{display:block;color:var(--accent);margin-bottom:.7rem}
.page-hero--card h1{font-family:var(--head);font-weight:700;font-size:clamp(1.7rem,2.6vw,2.6rem);line-height:1.14;margin:0}

/* project-header: foto echt zichtbaar, gradient-scrim, titel onderin */
.page-hero--photo{display:flex;align-items:flex-end;min-height:clamp(500px,66vh,720px);padding-top:calc(38px + 6rem);padding-bottom:3.6rem}
.page-hero--photo .hero-bg{opacity:1}
.page-hero--photo:before{display:none}
.page-hero--photo .ph-inner{align-self:flex-end;max-width:48rem}
.page-hero--photo .crumbs{margin-bottom:1.5rem}
.page-hero--photo .kicker{display:block;margin-bottom:1rem}
.page-hero--photo h1{font-size:clamp(1.7rem,3vw,2.9rem);line-height:1.14;margin-top:0}
.page-hero--photo .ph-meta{margin:1.3rem 0 0;font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;color:rgba(255,255,255,.82)}
/* witte page-hero variant (o.a. diensten-overzicht) */
.page-hero--light{background:var(--paper);color:var(--char)}
.page-hero--light h1{color:var(--char)}
.page-hero--light .lead-text{color:rgba(64,64,65,.82)}
.page-hero--light .crumbs,.page-hero--light .crumbs a{color:rgba(64,64,65,.5)}
.page-hero--light .crumbs .here,.page-hero--light .crumbs a:hover{color:var(--accent)}
/* foto-hero zonder tekst (dienst-detail): kop komt eronder in wit */
.page-hero--bare{min-height:clamp(420px,52vh,600px)}
.svc-head{padding-bottom:5rem}
.svc-main .prose{margin-top:2rem}
.svc-head .crumbs{margin-bottom:1.1rem}
.svc-head .crumbs,.svc-head .crumbs a{color:rgba(64,64,65,.5)}
.svc-head .crumbs .here,.svc-head .crumbs a:hover{color:var(--accent)}
.svc-head .kicker{display:block;margin-bottom:.8rem}
.svc-head h1{font-family:var(--head);font-weight:700;font-size:clamp(2rem,3.6vw,3.3rem);line-height:1.1;margin:0;color:var(--char)}
.crumbs{display:flex;flex-wrap:wrap;gap:.45rem;font-family:var(--head);font-size:.82rem;letter-spacing:.02em;color:rgba(255,255,255,.55);margin-bottom:.1rem}
.crumbs a{color:rgba(255,255,255,.55);transition:color .3s var(--ease)}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{opacity:.5}
.crumbs .here{color:var(--accent)}

/* tekst-prose + service-detail layout */
.prose{max-width:44rem}
.prose p{color:rgba(64,64,65,.82);font-size:1.08rem;line-height:1.55;margin-bottom:1.2rem}
.prose p:last-child{margin-bottom:0}
.svc-layout{display:grid;grid-template-columns:1.45fr .75fr;gap:3.5rem;align-items:start}
.svc-aside{display:flex;flex-direction:column;gap:1.4rem;position:sticky;top:7.5rem}
.panel{background:#f4f5f6;padding:1.8rem}
.panel h3{font-size:1.1rem;font-weight:800;margin-bottom:.7rem;color:var(--char)}
.panel p{color:rgba(64,64,65,.8);line-height:1.45;margin-bottom:.9rem}
.panel .btn-solid{display:inline-block}
/* Alle gevulde knoppen: amber, bij hover antraciet. */
.btn-solid{background:var(--accent);color:var(--char);font-family:var(--head);padding:.7rem 1.5rem;transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.btn-solid:hover{transform:translateY(-2px);background:var(--char);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem}
.chip{font-family:var(--head);font-size:.76rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--char);border:1px solid var(--line);padding:.35rem .7rem}

/* fotogalerij (project-subs + werkplaats) */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gallery figure{margin:0;overflow:hidden;background:#e9ecef}
.gallery img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .9s var(--ease),filter .7s ease}
.gallery figure:hover img{transform:scale(1.04);filter:brightness(.96)}
.gallery .wide{grid-column:span 2}
.gallery .tall img{aspect-ratio:3/4}

/* feature-blok: foto + tekst + vierkante tags (geen border-radius) */
.feature{display:grid;grid-template-columns:1.1fr .9fr;background:var(--char);color:#fff}
.feature-media{position:relative;min-height:30rem;overflow:hidden}
.feature-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature-body{padding:4rem var(--gutter);display:flex;flex-direction:column;gap:1.1rem;justify-content:center}
.feature-body .kicker{color:var(--accent)}
.feature-body h2{font-family:var(--head);font-weight:700;font-size:clamp(1.7rem,2.6vw,2.5rem);line-height:1.12;margin:0}
.feature-meta{display:flex;flex-wrap:wrap;gap:.5rem}
.feature-meta span{border:1px solid rgba(255,255,255,.32);padding:.4rem .9rem;font-family:var(--head);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#fff}
.feature-body p{color:rgba(255,255,255,.82);line-height:1.6;max-width:34rem;margin:0}
.feature-body .link{color:#fff;font-family:var(--head);font-weight:700;align-self:flex-start}
.feature-body .link:hover{color:var(--accent)}

/* over ons: intro met cijfers */
.about-intro{display:grid;grid-template-columns:1.35fr .65fr;gap:3.5rem;align-items:start}
/* Over ons: tekst op comfortabele leesbreedte + cijfers als rij eronder (geen krappe 2-koloms) */
.about-lead{max-width:42rem}
.about-lead h2{font-family:var(--head);font-weight:700;font-size:clamp(1.6rem,2.5vw,2.3rem);line-height:1.16;margin:.7rem 0 1.2rem;text-wrap:balance}
.about-lead p{color:rgba(64,64,65,.82);font-size:1.05rem;line-height:1.62;margin:0 0 1.4rem}
.about-lead .link{display:inline-block;color:var(--accent);padding-bottom:.18rem;transition:color .3s var(--ease)}
.about-lead .link:hover{color:var(--char)}
.about-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:3.6rem;max-width:58rem}
.about-stats-row strong{display:block;font-family:var(--head);font-weight:700;font-size:clamp(1.7rem,2.6vw,2.4rem);color:var(--accent);line-height:1}
.about-stats-row span{display:block;margin-top:.35rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:rgba(64,64,65,.7)}
@media(max-width:640px){.about-stats-row{grid-template-columns:1fr 1fr;gap:1.8rem}}
.about-intro-text h2{font-family:var(--head);font-weight:700;font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.18;margin:.5rem 0 1.1rem}
.about-intro-text p{color:rgba(64,64,65,.82);line-height:1.65;margin:0 0 1.3rem;max-width:38rem}
.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1.4rem}
.about-stats strong{display:block;font-family:var(--head);font-weight:700;font-size:clamp(1.7rem,2.6vw,2.4rem);color:var(--accent);line-height:1}
.about-stats span{display:block;margin-top:.3rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:rgba(64,64,65,.7)}

/* over ons: mijlpalen-slider */
.story{background:var(--paper);color:var(--char);padding:4.5rem var(--gutter)}
.story-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;margin-bottom:2.4rem}
.story-head .kicker{color:var(--accent)}
.story-head h2{font-family:var(--head);font-weight:700;font-size:clamp(1.6rem,2.4vw,2.4rem);line-height:1.1;margin:.4rem 0 0}
.story-nav{display:flex;gap:.7rem;flex:none}
.story-btn{width:54px;height:54px;border:1.5px solid rgba(64,64,65,.35);border-radius:50%;background:transparent;color:var(--char);display:inline-grid;place-items:center;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.story-btn:hover{background:var(--char);color:#fff;border-color:var(--char)}
.story-btn:before{font-size:1.35rem;line-height:1}
[data-story-prev]:before{content:"\2190"}
[data-story-next]:before{content:"\2192"}
.story-viewport{overflow:hidden}
.story-track{display:flex;transition:transform .6s var(--ease)}
/* Hoogte, uitsnede en kaderpositie komen als custom properties uit de
   ACF-velden bij de mijlpalen (zie [cjdb_story]). Niet ingevuld = de fallback
   hieronder, dus de slider werkt ook zonder instellingen. */
.story-slide{flex:0 0 100%;display:grid;grid-template-columns:1.1fr .9fr;align-items:stretch;min-height:var(--story-h,24rem)}
.story-slide:not(:has(.story-media)){grid-template-columns:1fr}
/* De foto mag de hoogte van de slide NIET bepalen: een staande historische foto
   werd op 721px breed vanzelf 900px hoog en trok elke slide mee. Absoluut
   positioneren haalt hem uit de hoogteberekening; de rij volgt de ingestelde
   hoogte (of de tekst) en de foto vult die hoogte. */
.story-media{position:relative;overflow:hidden;background:#f4f5f6}
.story-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:var(--story-fit,cover);object-position:var(--story-pos,center);display:block}
.story-body{padding:2.6rem;display:flex;flex-direction:column;justify-content:center;gap:1rem;background:#f4f5f6}
.story-year{font-family:var(--head);font-weight:700;font-size:clamp(2.4rem,4vw,3.6rem);color:var(--accent);line-height:1}
.story-body h3{font-family:var(--head);font-weight:700;font-size:clamp(1.3rem,1.8vw,1.7rem);margin:0}
.story-body p{color:rgba(64,64,65,.82);line-height:1.6;margin:0;max-width:34rem}
.story-dots{display:flex;gap:.5rem;justify-content:center;margin-top:2rem}
.story-dot{width:10px;height:10px;border-radius:50%;border:0;background:rgba(64,64,65,.25);cursor:pointer;padding:0;transition:background .3s var(--ease),width .3s var(--ease)}
.story-dot.is-active{background:var(--accent);width:26px;border-radius:5px}

/* ===== single vacature ===== */
.vac-detail{display:grid;grid-template-columns:1.5fr .85fr;gap:3.5rem;align-items:start}
.vac-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem}
.vac-chips span{border:1px solid var(--line);padding:.4rem .9rem;font-family:var(--head);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--char)}
.vac-lead{font-size:1.12rem;line-height:1.65;color:var(--char);margin:0 0 1.2rem;max-width:42rem}
.vac-main h2{font-family:var(--head);font-weight:700;font-size:clamp(1.3rem,1.9vw,1.7rem);margin:2.2rem 0 .9rem}
.vac-main p{color:rgba(64,64,65,.85);line-height:1.7;margin:0 0 1rem;max-width:42rem}
.vac-main p a{color:var(--accent);font-weight:700}
.vac-block-intro{margin:0 0 1.1rem}
.vac-offer{list-style:none;margin:.3rem 0 0;padding:0;display:grid;gap:.75rem;max-width:42rem}
.vac-offer li{position:relative;padding-left:1.7rem;line-height:1.55;color:rgba(64,64,65,.85)}
.vac-offer li:before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;background:var(--accent)}
.vac-quote{margin:2.4rem 0;padding:1.8rem 2rem;background:#e9ecef;max-width:42rem}
.vac-quote blockquote{margin:0;font-family:var(--head);font-weight:700;font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.4;color:var(--char)}
.vac-quote figcaption{margin-top:.8rem;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:rgba(64,64,65,.6)}
.vac-apply{position:sticky;top:calc(38px + 6.5rem)}
.vac-apply-card{background:#f4f5f6;color:var(--char);padding:2.1rem}
.vac-apply-card .kicker{color:var(--accent);display:block;margin-bottom:.4rem}
.vac-apply-card h3{font-family:var(--head);font-weight:700;font-size:1.3rem;margin:0 0 1.4rem;line-height:1.2;color:var(--char)}
.vac-facts{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:.85rem}
.vac-facts li{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid rgba(64,64,65,.16);padding-bottom:.7rem;font-size:.92rem}
.vac-facts span{color:rgba(64,64,65,.6)}
.vac-facts strong{font-family:var(--head);font-weight:700;text-align:right}
.vac-apply-intro{color:rgba(64,64,65,.8);font-size:.92rem;line-height:1.55;margin:0 0 1.2rem}
.vac-apply-card .btn-solid{display:block;text-align:center;margin-bottom:.7rem}
.vac-apply-card .btn-ghost{display:block;text-align:center;color:var(--char);font-family:var(--head);font-weight:700;border:1.5px solid rgba(64,64,65,.4);padding:.75rem;transition:background .3s var(--ease),color .3s var(--ease)}
.vac-apply-card .btn-ghost:hover{background:var(--char);color:#fff}

/* ===== over-ontwerpen preview: labels + extra layout-componenten ===== */
.design-label{position:sticky;top:calc(38px + 5.7rem);z-index:40;background:var(--char);color:#fff;padding:.75rem var(--gutter);font-family:var(--head);font-weight:700;font-size:.85rem;letter-spacing:.04em;display:flex;justify-content:space-between;align-items:center;gap:1rem;border-top:3px solid var(--accent)}
/* preview-pagina: maak ruimte onder de vaste nav + minder hero-toppadding (nav is al vrij) */
.over-designs{padding-top:calc(38px + 6rem)}
.over-designs .page-hero{padding-top:2.6rem}
.over-designs .page-hero--card{padding-top:2.6rem}
.over-designs .split-hero .sh-text{padding-top:3rem}
.over-designs .design-demo:first-of-type .design-label{top:calc(38px + 5.7rem)}
.design-label .pick{color:var(--accent);font-weight:700}
/* verticale tijdlijn */
.timeline2{max-width:48rem}
.timeline2 .tl-item{display:grid;grid-template-columns:7rem 1fr;gap:1.5rem;padding:1.8rem 0;border-top:1px solid var(--line)}
.timeline2 .tl-year{font-family:var(--head);font-weight:700;font-size:1.7rem;color:var(--accent);line-height:1}
.timeline2 h3{margin:0 0 .4rem;font-family:var(--head);font-weight:700}
.timeline2 p{margin:0;color:rgba(64,64,65,.8);line-height:1.6}
/* split-hero */
.split-hero{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(420px,58vh,600px)}
.split-hero .sh-text{background:var(--char);color:#fff;padding:calc(38px + 5rem) var(--gutter) 3rem;display:flex;flex-direction:column;justify-content:center;gap:1.1rem}
.split-hero .sh-text .kicker{color:var(--accent)}
.split-hero .sh-text h1{font-family:var(--head);font-weight:700;font-size:clamp(1.9rem,3vw,3rem);line-height:1.1;margin:0}
.split-hero .sh-text p{color:rgba(255,255,255,.82);line-height:1.6;max-width:30rem;margin:0}
.split-hero .sh-photo{position:relative;overflow:hidden;min-height:20rem}
.split-hero .sh-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* horizontale mijlpalen */
.milestones{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.milestones .ms{border-top:3px solid var(--accent);padding-top:1.2rem}
.milestones .ms-year{font-family:var(--head);font-weight:700;font-size:clamp(2rem,3vw,2.8rem);color:var(--accent);line-height:1}
.milestones .ms h3{font-family:var(--head);font-weight:700;margin:.4rem 0 .5rem}
.milestones .ms p{color:rgba(64,64,65,.8);line-height:1.6;margin:0}
/* amber cijfer-band + gecentreerde intro */
.stats-band{background:var(--accent);color:var(--char);padding:3.2rem var(--gutter);display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.stats-band strong{display:block;font-family:var(--head);font-weight:700;font-size:clamp(2rem,3.4vw,3rem);line-height:1}
.stats-band span{display:block;margin-top:.4rem;font-size:.84rem;text-transform:uppercase;letter-spacing:.05em}
.center-intro{max-width:46rem;margin:0 auto;text-align:center}
.center-intro h2{font-family:var(--head);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.16;margin:.5rem 0 1rem}
.center-intro p{color:rgba(64,64,65,.82);line-height:1.7;margin:0}

/* project-detail mozaïek: vierkante tegels, 1e tegel = info i.p.v. foto */
.proj-detail{padding-top:calc(38px + 7rem)}
.proj-mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.proj-mosaic figure{margin:0;aspect-ratio:1/1;overflow:hidden;background:#e9ecef}
.proj-mosaic figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease),filter .7s ease}
.proj-mosaic figure:hover img{transform:scale(1.04);filter:brightness(.96)}
.proj-tile{aspect-ratio:1/1;background:var(--char);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:1.9rem}
.proj-tile .tile-top{min-width:0}
.proj-tile .crumbs{margin-bottom:1.2rem}
.proj-tile .crumbs,.proj-tile .crumbs a{color:rgba(255,255,255,.6)}
.proj-tile .kicker{display:block;color:var(--accent);margin-bottom:.7rem}
.proj-tile h1{font-family:var(--head);font-weight:700;font-size:clamp(1.45rem,1.9vw,2rem);line-height:1.14;margin:0}
.proj-tile .tile-desc{margin-top:.9rem;color:rgba(255,255,255,.8);font-size:.95rem;line-height:1.5}
.proj-tile .tile-meta{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.76rem;color:rgba(255,255,255,.78);margin:0 0 .7rem}
.proj-tile .tile-cta{font-family:var(--head);font-weight:700;color:#fff;transition:color .3s var(--ease)}
.proj-tile .tile-cta:hover{color:var(--accent)}

/* projecten-overzicht filter */
.proj-filter{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 2.8rem}
.proj-filter button{font-family:var(--head);cursor:pointer;border:1.5px solid rgba(64,64,65,.22);background:transparent;color:var(--char);padding:.6rem 1.15rem;border-radius:0;font-size:.82rem;font-weight:700;letter-spacing:.01em;transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.proj-filter button:hover{border-color:var(--char)}
.proj-filter button.active{background:var(--char);border-color:var(--char);color:#fff}
.proj-filter button .cnt{opacity:.5;margin-left:.4rem;font-weight:500}
.proj-filter button.active .cnt{opacity:.65}

/* projecten-overzicht grid */
.portfolio--page{background:var(--paper)}
.page-intro{max-width:52rem;font-size:1.12rem;line-height:1.55;color:rgba(64,64,65,.82);margin:0}
/* culture-intro (vacatures): home-intro-stijl, maar 2e kolom blijft zichtbaar op mobiel */
.culture{padding-top:2.6rem}
.culture .intro-cols p:last-child{display:block}
.culture-body{max-width:62rem;margin-top:2.2rem;display:grid;gap:1.3rem}
.culture-body p{margin:0;color:rgba(64,64,65,.85);line-height:1.7}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.8rem 2rem}
.proj-grid .project-card h3{color:var(--char)}
.proj-grid .project-card.is-hidden{display:none}

/* terug-link */
.back-link{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--head);font-weight:700;color:var(--accent);transition:gap .3s var(--ease)}
.back-link:hover{gap:.8rem}

/* contact-layout */
.contact-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:3.2rem;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:1.5rem}
.contact-info .row{display:flex;flex-direction:column;gap:.25rem}
.contact-info .row .lbl{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--accent)}
.contact-info .row a,.contact-info .row p{font-size:1.12rem;color:var(--char);line-height:1.35}
.map-full{width:100%;height:440px;border:0;display:block;filter:grayscale(.15) contrast(1.02)}

/* dienst-overzicht: grote rijen */
/* diensten-overzicht: compact, rustig 3-koloms raster */
.svc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.svc-card{display:flex;flex-direction:column;color:var(--char)}
.svc-card-img{aspect-ratio:4/3;overflow:hidden;margin-bottom:1.1rem;background:#e9ecef}
.svc-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.svc-card:hover .svc-card-img img{transform:scale(1.04)}
.svc-card h3{font-family:var(--head);font-weight:700;font-size:clamp(1.1rem,1.5vw,1.35rem);margin:0 0 .5rem}
.svc-card p{color:rgba(64,64,65,.78);font-size:.94rem;line-height:1.55;margin:0 0 .9rem}
.svc-card-link{align-self:flex-start;margin-top:auto;padding-top:.2rem;font-family:var(--head);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent)}
.svc-card:hover .svc-card-link{color:var(--char)}

.svc-rows{display:flex;flex-direction:column;gap:0}
.svc-rows .svc-row{display:grid;grid-template-columns:1.05fr 1fr;gap:3rem;align-items:center;padding:3.2rem 0;border-top:1px solid var(--line)}
.svc-rows .svc-row:last-child{border-bottom:1px solid var(--line)}
.svc-rows .svc-row:nth-child(even) .svc-row-img{order:2}
.svc-row-img{overflow:hidden;aspect-ratio:1.3/1}
.svc-row-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.svc-row:hover .svc-row-img img{transform:scale(1.03)}
.svc-row-text h2{margin:.5rem 0 1rem}
.svc-row-text p{color:rgba(64,64,65,.8);font-size:1.05rem;line-height:1.5;margin-bottom:1.2rem;max-width:36rem}

@media(max-width:991px){
  .page-hero{padding:calc(38px + 5.5rem) var(--gutter) 2.4rem}
  .svc-layout{grid-template-columns:1fr;gap:2rem}
  .svc-aside{position:static}
  .gallery{grid-template-columns:1fr 1fr;gap:.7rem}
  .proj-mosaic{grid-template-columns:1fr 1fr}
  .proj-detail{padding-top:calc(38px + 5.5rem)}
  .feature{grid-template-columns:1fr}
  .feature-media{min-height:15rem}
  .feature-body{padding:2.4rem var(--gutter)}
  .svc-cards{grid-template-columns:1fr 1fr;gap:1.4rem}
  .about-intro{grid-template-columns:1fr;gap:2.2rem}
  .story-head{flex-direction:column;align-items:flex-start;gap:1.4rem}
  /* gestapeld: de foto krijgt zijn eigen hoogte, de slide volgt de inhoud.
     grid-template-rows is nodig omdat alle slides even hoog worden (flexrij):
     met twee auto-rijen verdeelt de grid die extra hoogte over BEIDE rijen, en
     dan stond er een witte strook tussen de foto en het grijze tekstblok. Nu
     vangt het tekstblok (1fr) de overhoogte op. */
  .story-slide{grid-template-columns:1fr;min-height:0;grid-template-rows:auto 1fr}
  .story-slide:not(:has(.story-media)){grid-template-rows:1fr}
  /* Gestapeld werd elke slide zo hoog als de LANGSTE mijlpaal, waardoor er onder
     korte teksten een flinke lege grijze kaart overbleef. Op smalle schermen
     krijgt elke slide zijn eigen hoogte; de JS zet die van de actieve slide op
     de viewport, zodat het meeschuift in plaats van springt. */
  .story-track{align-items:flex-start}
  .story-viewport{transition:height .45s var(--ease)}
  /* width:100% is nodig naast de hoogte: met alleen een hoogte rekent
     aspect-ratio de breedte uit (300px hoog = 480px breed) en steekt de foto
     buiten de kolom. */
  .story-media{min-height:0;aspect-ratio:16/10;height:var(--story-h-t,auto);width:100%}
  .story-body{padding:2rem var(--gutter)}
  .split-hero{grid-template-columns:1fr}
  .split-hero .sh-text{padding:calc(38px + 4rem) var(--gutter) 2.4rem}
  .split-hero .sh-photo{min-height:16rem;aspect-ratio:16/10}
  .milestones{grid-template-columns:1fr;gap:1.2rem}
  .stats-band{grid-template-columns:1fr 1fr;gap:1.6rem}
  .timeline2 .tl-item{grid-template-columns:1fr;gap:.4rem}
  .vac-detail{grid-template-columns:1fr;gap:2.4rem}
  .vac-apply{position:static}
  .proj-grid{grid-template-columns:1fr 1fr;gap:1.2rem}
  .contact-layout{grid-template-columns:1fr;gap:2rem}
  .svc-rows .svc-row{grid-template-columns:1fr;gap:1.4rem;padding:2.4rem 0}
  .svc-rows .svc-row:nth-child(even) .svc-row-img{order:0}
  .svc-row-img{aspect-ratio:16/10}
}
@media(max-width:560px){
  .proj-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr;gap:.6rem}
  .gallery .wide{grid-column:span 2}
  /* infotegel volle breedte (leesbaar), foto's 2 vierkant per rij */
  .proj-tile{grid-column:1 / -1;aspect-ratio:auto;padding:1.6rem}
  .proj-tile .crumbs{margin-bottom:.8rem}
  .circle-arrow{height:48px;width:48px}
  .circle-arrow:before{font-size:1.18rem}
  .svc-cards{grid-template-columns:1fr}
  .story-media{height:var(--story-h-m,var(--story-h-t,auto))}
}

/* ---------- projectgalerij lightbox ---------- */
.proj-mosaic[data-lightbox] figure{cursor:zoom-in}
.lightbox{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:clamp(3.4rem,6vw,4.5rem);background:rgba(28,28,29,.93);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.lightbox.is-open{display:flex}
.lb-stage{margin:0;display:flex;align-items:center;justify-content:center;max-width:100%;max-height:100%}
.lb-stage img{max-width:min(1100px,84vw);max-height:82vh;width:auto;height:auto;object-fit:contain;display:block;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:1.5px solid var(--accent);background:var(--accent);color:var(--char);font-size:2rem;line-height:1;display:grid;place-items:center;cursor:pointer;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.lb-nav:hover{background:var(--char);border-color:var(--char);color:#fff}
.lb-prev{left:clamp(.6rem,3vw,2.4rem)}
.lb-next{right:clamp(.6rem,3vw,2.4rem)}
.lb-close{position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);width:48px;height:48px;border-radius:50%;border:0;background:var(--accent);color:var(--char);font-size:1.9rem;line-height:1;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease)}
.lb-close:hover{background:var(--char);color:#fff}
.lb-count{position:absolute;bottom:clamp(1rem,3vw,1.8rem);left:0;right:0;text-align:center;font-family:var(--head);font-weight:700;font-size:.85rem;letter-spacing:.05em;color:rgba(255,255,255,.75)}
@media (max-width:640px){
  .lb-nav{width:44px;height:44px;font-size:1.5rem}
  .lb-stage img{max-width:90vw;max-height:76vh}
}