/* ══════════════════════════════════════════════════
   Houtvester — Hoofdstylesheet
   Huisstijl 2026 | Officieel kleurenpalet
══════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* ── Officieel Houtvester palet 2026 ── */
:root{
  --green:   #005657;
  --green-d: #13272A;
  --green-l: #ddeaea;
  --red:     #E8423B;
  --red-d:   #D20A11;
  --snow:    #F8F8F8;
  --thunder: #ADB8BF;
  --thunder-l: #BECBD3;
  --white:   #FFFFFF;
  --text:    #13272A;
  --muted:   #6b7c7d;

  --head: 'Barlow', sans-serif;
  --cond: 'Barlow Condensed', sans-serif;
  --teko: 'Teko', sans-serif;
}

html{scroll-behavior:smooth}
body{
  background:var(--white);
  color:var(--text);
  font-family:var(--head);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
img{max-width:100%;height:auto;display:block}

/* ── LAYOUT ── */
.c{width:100%;max-width:1320px;margin-inline:auto;padding-inline:clamp(2rem,5vw,5rem)}
.s{padding-block:clamp(6rem,12vw,11rem)}

/* ── DIVIDERS ── */
hr{border:none;border-top:1px solid rgba(0,0,0,.08)}

/* ── LABELS ── */
.eyebrow{
  font-family:var(--teko);
  font-size:.78rem;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--thunder);
  display:block;margin-bottom:2.5rem;
}
.eyebrow-gold{color:var(--red-d)}
.eyebrow-w{color:rgba(255,255,255,.4)}

/* ── DISPLAY HEADINGS ── */
.d1{
  font-family:var(--cond);
  font-size:clamp(4rem,11vw,11rem);
  font-weight:900;line-height:.88;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.d2{
  font-family:var(--cond);
  font-size:clamp(2.5rem,6vw,6rem);
  font-weight:900;line-height:.9;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.d3{
  font-family:var(--cond);
  font-size:clamp(1.75rem,3.5vw,3.5rem);
  font-weight:700;line-height:.95;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.outline{-webkit-text-stroke:1.5px currentColor;color:transparent}
.italic{font-style:italic}
.light{font-weight:300}

/* Body text */
.body-l{font-size:clamp(1rem,1.4vw,1.2rem);line-height:1.8;font-weight:300;color:var(--muted)}
.body-m{font-size:.975rem;line-height:1.8;font-weight:300;color:var(--muted)}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:.75rem;
  padding:.9rem 2.5rem;
  font-family:var(--head);font-size:.875rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  border-radius:0;cursor:pointer;border:none;
  transition:all .3s cubic-bezier(.16,1,.3,1);
}
.btn-dark{background:var(--green-d);color:var(--white)}
.btn-dark:hover{background:var(--green)}
.btn-ghost{background:transparent;color:var(--green-d);border:1px solid var(--green-d)}
.btn-ghost:hover{background:var(--green-d);color:var(--white)}
.btn-ghost-w{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.4)}
.btn-ghost-w:hover{border-color:var(--white);background:rgba(255,255,255,.07)}
.btn-gold{background:var(--red);color:var(--white);font-weight:700}
.btn-gold:hover{background:var(--red-d);color:var(--white)}
.btn svg{width:16px;height:16px;transition:transform .3s}
.btn:hover svg{transform:translateX(4px)}

/* ══════════════════════════════════════════════════
   NAV
══════════════════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  padding:1.25rem 0;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(20px);
  transition:background .4s,border-color .4s;
}
.nav.dark{
  background:rgba(19,39,42,.97);
  border-bottom-color:rgba(255,255,255,.08);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:.875rem}
.logo-mark{flex-shrink:0;transition:opacity .5s cubic-bezier(.16,1,.3,1)}
.logo-mark-light{position:absolute;opacity:0}
.nav.dark .logo-mark-dark{opacity:0}
.nav.dark .logo-mark-light{position:static;opacity:1}
.logo-name{
  font-family:var(--cond);font-size:1.25rem;font-weight:900;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-d);transition:color .4s;
}
.nav.dark .logo-name{color:var(--white)}
.nav-links{display:flex;align-items:center;gap:3rem}
.nav-links a{
  font-family:var(--teko);font-size:.875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);transition:color .2s;
}
.nav-links a:hover{color:var(--green)}
.nav.dark .nav-links a{color:rgba(255,255,255,.45)}
.nav.dark .nav-links a:hover{color:var(--red)}
.nav-contact{
  font-family:var(--teko);font-size:.875rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-d);border-bottom:1px solid var(--green-d);
  padding-bottom:1px;transition:color .2s,border-color .2s;
}
.nav.dark .nav-contact{color:var(--red);border-color:var(--red)}

/* Hamburger (mobiel) */
.nav-hamburger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:.5rem;
}
.nav-hamburger span{
  display:block;width:24px;height:1.5px;
  background:var(--white);transition:all .3s;
}
.nav.dark .nav-hamburger span{background:var(--white)}
.nav:not(.dark) .nav-hamburger span{background:var(--green-d)}

/* Mobile nav */
.nav-mobile{
  display:none;flex-direction:column;
  padding:1.5rem clamp(2rem,5vw,5rem);
  background:var(--green-d);
  border-top:1px solid rgba(255,255,255,.08);
}
.nav-mobile.open{display:flex}
.nav-mobile a{
  font-family:var(--teko);font-size:1.1rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.6);padding:.75rem 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:color .2s;
}
.nav-mobile a:hover{color:var(--red)}

/* ══════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════ */
.hero{
  background:var(--green-d);
  min-height:100vh;
  display:grid;
  grid-template-rows:1fr auto;
  padding-top:5rem;
}
.hero-main{
  display:flex;flex-direction:column;
  justify-content:flex-end;
  padding-bottom:4rem;
}
.hero-headline{
  font-family:var(--cond);
  font-size:clamp(5.5rem,16vw,16rem);
  font-weight:900;line-height:.85;
  letter-spacing:-.025em;
  text-transform:uppercase;
  color:var(--white);
  overflow:hidden;
}
.hero-headline .row-2{
  -webkit-text-stroke:1.5px var(--white);
  color:transparent;display:block;
}
.hero-headline .row-3{
  color:var(--red);font-style:italic;display:block;
}
.hero-footer{
  border-top:1px solid rgba(255,255,255,.1);
  padding-block:2rem;
}
.hero-footer-inner{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:2rem;align-items:center;
}
.hero-sub{font-size:1rem;color:rgba(255,255,255,.5);line-height:1.75;font-weight:300}
.hero-btns{display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-end}
.hero-scroll{
  display:flex;align-items:center;gap:.75rem;
  font-family:var(--teko);font-size:.78rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.3);
}
.hero-scroll-line{width:40px;height:1px;background:rgba(255,255,255,.2)}

/* ══════════════════════════════════════════════════
   INTRO
══════════════════════════════════════════════════ */
.intro{background:var(--white);padding-block:clamp(7rem,13vw,12rem)}
.intro-grid{
  display:grid;grid-template-columns:5fr 4fr;
  gap:8rem;align-items:start;
}
.intro-number{
  font-family:var(--cond);
  font-size:clamp(6rem,14vw,14rem);
  font-weight:900;line-height:1;
  -webkit-text-stroke:1px rgba(0,86,87,.15);
  color:transparent;display:block;margin-bottom:-2rem;
}
.intro-h{
  font-family:var(--cond);
  font-size:clamp(3rem,6vw,6.5rem);
  font-weight:900;text-transform:uppercase;
  line-height:.9;letter-spacing:-.02em;color:var(--green-d);
}
.intro-h .italic{font-style:italic;color:var(--green)}
.intro-body{padding-top:3rem}
.intro-body p{font-size:1.075rem;line-height:1.85;font-weight:300;color:var(--muted);margin-bottom:1.5rem}
.intro-meta{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;border-top:1px solid rgba(0,0,0,.08);margin-top:3rem;
}
.intro-meta-item{padding:2rem 0;border-bottom:1px solid rgba(0,0,0,.08)}
.intro-meta-item:nth-child(odd){padding-right:2rem;border-right:1px solid rgba(0,0,0,.08)}
.intro-meta-item:nth-child(even){padding-left:2rem}
.meta-n{font-family:var(--cond);font-size:3rem;font-weight:900;color:var(--green);line-height:1}
.meta-l{font-size:.8rem;font-weight:400;color:var(--thunder);letter-spacing:.06em;margin-top:.35rem}

/* ══════════════════════════════════════════════════
   DIENSTEN — kaartgrid
══════════════════════════════════════════════════ */
.diensten{background:var(--snow);padding-block:clamp(6rem,11vw,10rem)}
.diensten-header{
  display:grid;grid-template-columns:1fr auto;
  gap:2rem;align-items:center;margin-bottom:5rem;
}
.diensten-intro{font-size:1.075rem;line-height:1.85;font-weight:300;color:var(--muted)}

.svc-cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2px;background:rgba(0,0,0,.06);
}
.svc-card{
  background:var(--white);padding:3.5rem 2.75rem;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;transition:background .3s;
}
.svc-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--red);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.svc-card:hover::before{transform:scaleX(1)}
.svc-card-num{
  font-family:var(--teko);font-size:.78rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--thunder);margin-bottom:2.5rem;display:block;
}
.svc-card-title{
  font-family:var(--cond);font-size:clamp(2.75rem,4.5vw,4.5rem);
  font-weight:900;text-transform:uppercase;
  letter-spacing:-.02em;line-height:.88;
  color:var(--green-d);margin-bottom:2rem;flex:1;
}
.svc-card-desc{
  font-size:.9rem;line-height:1.85;font-weight:300;
  color:var(--muted);margin-bottom:2rem;
}
.svc-card-tags{
  display:flex;flex-wrap:wrap;gap:.4rem .7rem;
  padding-top:1.5rem;border-top:1px solid rgba(0,0,0,.07);
}
.svc-card-tag{
  font-family:var(--teko);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--thunder);
}

/* ══════════════════════════════════════════════════
   TEAM
══════════════════════════════════════════════════ */
.team{background:var(--green);padding-block:clamp(6rem,11vw,10rem)}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center}
.team-h{color:var(--white);margin-bottom:2.5rem}
.team-h .light{
  font-family:var(--cond);font-size:clamp(2.5rem,6vw,6rem);
  font-weight:300;display:block;text-transform:uppercase;
  letter-spacing:-.01em;line-height:.95;
}
.team-h .heavy{
  font-family:var(--cond);font-size:clamp(2.5rem,6vw,6rem);
  font-weight:900;display:block;text-transform:uppercase;
  letter-spacing:-.02em;line-height:.9;font-style:italic;color:var(--red);
}
.team-txt{font-size:1rem;line-height:1.85;font-weight:300;color:rgba(255,255,255,.6);margin-bottom:2.5rem}
.team-cards{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.1)}
.team-card{background:rgba(255,255,255,.04);padding:0}
.team-img{
  aspect-ratio:3/4;background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:1rem;border-bottom:1px solid rgba(255,255,255,.08);overflow:hidden;
}
.team-img img{width:100%;height:100%;object-fit:cover}
.team-img svg{opacity:.2;width:56px;height:56px}
.team-meta{padding:1.5rem}
.team-name{font-family:var(--head);font-size:1rem;font-weight:700;color:var(--white)}
.team-role{
  font-family:var(--teko);font-size:.75rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-top:.3rem;
}

/* ══════════════════════════════════════════════════
   WERKWIJZE — stap-blokken
══════════════════════════════════════════════════ */
.werkwijze{background:var(--white);padding-block:clamp(6rem,11vw,10rem)}
.ww-header{
  display:grid;grid-template-columns:1fr 1fr;
  gap:6rem;align-items:end;margin-bottom:5rem;
}
.step-cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:2px;background:rgba(0,0,0,.06);
}
.step-card{
  background:var(--snow);padding:3.5rem 2.75rem;
  position:relative;overflow:hidden;
}
.step-bg-n{
  position:absolute;top:-1.5rem;right:1.25rem;
  font-family:var(--cond);font-size:9rem;font-weight:900;
  -webkit-text-stroke:1px rgba(0,86,87,.08);color:transparent;
  line-height:1;pointer-events:none;user-select:none;
}
.step-card-n{
  font-family:var(--teko);font-size:.78rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--red-d);margin-bottom:2.5rem;display:block;
}
.step-card-title{
  font-family:var(--cond);font-size:clamp(2.25rem,3.5vw,3.25rem);
  font-weight:900;text-transform:uppercase;
  letter-spacing:-.02em;line-height:.9;
  color:var(--green-d);margin-bottom:1.5rem;
}
.step-card-desc{font-size:.9rem;line-height:1.85;font-weight:300;color:var(--muted)}
.step-card-desc p{margin-bottom:1em}
.step-card-desc p:last-child{margin-bottom:0}

/* ══════════════════════════════════════════════════
   CASES
══════════════════════════════════════════════════ */
.cases{background:var(--snow);padding-block:clamp(6rem,11vw,10rem)}
.cases-header{
  display:grid;grid-template-columns:1fr auto;
  gap:4rem;align-items:end;margin-bottom:5rem;
}
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(0,0,0,.07)}
.case{background:var(--white);display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.case:hover{transform:scale(1.015);z-index:1}
.case-img{
  aspect-ratio:4/3;background:var(--green-l);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--teko);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--thunder);
  position:relative;overflow:hidden;transition:background .4s;
}
.case-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.case:hover .case-img img{transform:scale(1.04)}
.case:hover .case-img{background:var(--green)}
.case:hover .case-img span{color:rgba(255,255,255,.4)}
.case-img::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--red)}
.case-body{padding:2.5rem;flex:1;display:flex;flex-direction:column;gap:.75rem}
.case-tag{
  font-family:var(--teko);font-size:.72rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--thunder);
}
.case-title{
  font-family:var(--cond);font-size:1.5rem;font-weight:700;
  letter-spacing:-.01em;line-height:1.05;color:var(--green-d);text-transform:uppercase;
}
.case-title a{color:inherit}
.case-exc{font-size:.875rem;line-height:1.75;font-weight:300;color:var(--muted);flex:1}
.case-lnk{
  font-family:var(--teko);font-size:.78rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-top:1rem;
  display:inline-flex;align-items:center;gap:.5rem;
  border-bottom:1px solid var(--green-l);padding-bottom:2px;transition:border-color .2s;
}
.case-lnk:hover{border-color:var(--green)}

/* ══════════════════════════════════════════════════
   CLIENTS
══════════════════════════════════════════════════ */
.clients{background:var(--snow);padding-block:clamp(4rem,7vw,6rem);border-top:1px solid rgba(0,0,0,.08)}
.clients-inner{display:flex;align-items:center;gap:4rem;flex-wrap:wrap}
.clients-label{
  font-family:var(--teko);font-size:.78rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--thunder);
  flex-shrink:0;min-width:140px;
}
.clients-grid{display:flex;flex:1;align-items:center;gap:0;border-left:1px solid rgba(0,0,0,.08)}
.client{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:1.75rem 1.25rem;border-right:1px solid rgba(0,0,0,.08);transition:background .2s;
}
.client:hover{background:var(--green-l)}
.client span{
  font-family:var(--teko);font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--thunder);transition:color .2s;
}
.client:hover span{color:var(--green)}

/* ══════════════════════════════════════════════════
   CTA
══════════════════════════════════════════════════ */
.cta{background:var(--red);padding-block:clamp(7rem,13vw,12rem);overflow:hidden;position:relative}
.cta-inner{display:grid;grid-template-columns:1fr auto;gap:5rem;align-items:end}
.cta-big{
  font-family:var(--cond);
  font-size:clamp(5rem,13vw,13rem);
  font-weight:900;text-transform:uppercase;
  line-height:.85;letter-spacing:-.025em;color:var(--white);
}
.cta-big .outline{-webkit-text-stroke:1.5px var(--white);color:transparent;display:block}
.cta-big .solid{display:block}
.cta-right{display:flex;flex-direction:column;gap:2rem;align-items:flex-start;padding-bottom:.5rem;flex-shrink:0;max-width:320px}
.cta-sub{font-size:1rem;line-height:1.8;font-weight:300;color:rgba(255,255,255,.8)}
.cta-btns{display:flex;flex-direction:column;gap:.75rem;width:100%}
.cta-btns .btn{justify-content:center}

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
footer{background:var(--green-d);padding-block:5rem 2.5rem}
.foot-top{
  display:grid;grid-template-columns:2fr 1fr 1fr;
  gap:6rem;padding-bottom:4rem;margin-bottom:2.5rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.foot-logo{display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem}
.foot-logo-name{
  font-family:var(--cond);font-size:1.25rem;font-weight:900;
  letter-spacing:.14em;text-transform:uppercase;color:var(--white);
}
.foot-tag{font-size:.875rem;line-height:1.75;font-weight:300;color:rgba(255,255,255,.3)}
.foot-h{
  font-family:var(--teko);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.25);margin-bottom:1.5rem;display:block;
}
.foot-nav{display:flex;flex-direction:column;gap:.75rem}
.foot-nav a{font-size:.9rem;font-weight:300;color:rgba(255,255,255,.45);transition:color .2s}
.foot-nav a:hover{color:var(--red)}
.foot-contact p{font-size:.875rem;font-weight:300;color:rgba(255,255,255,.4);line-height:1.85;margin-bottom:1.25rem}
.foot-contact a:hover{color:var(--red)}
.social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:1px solid rgba(255,255,255,.12);
  font-family:var(--teko);font-size:.72rem;font-weight:500;
  color:rgba(255,255,255,.3);transition:all .2s;
}
.social a:hover{border-color:var(--red);color:var(--red)}
.foot-bot{
  display:flex;justify-content:space-between;
  font-size:.78rem;font-weight:300;color:rgba(255,255,255,.18);
}
.foot-bot a:hover{color:rgba(255,255,255,.4)}

/* ══════════════════════════════════════════════════
   INNER PAGES (page.php, single.php)
══════════════════════════════════════════════════ */
.main-content{padding-top:80px}
.page-hero{
  background:var(--green-d);
  padding-block:clamp(5rem,10vw,9rem);
  padding-top:calc(clamp(5rem,10vw,9rem) + 80px);
}
.page-hero-light{
  background:var(--white)!important;
  padding-block:clamp(4rem,8vw,7rem);
  padding-top:calc(clamp(4rem,8vw,7rem) + 80px);
}
.page-content{
  max-width:760px;
  font-size:1.05rem;line-height:1.9;font-weight:300;color:var(--muted);
}
.page-content h2,.page-content h3{
  font-family:var(--cond);font-weight:900;text-transform:uppercase;
  color:var(--green-d);margin-top:3rem;margin-bottom:1rem;letter-spacing:-.01em;
}
.page-content h2{font-size:clamp(1.75rem,3vw,3rem)}
.page-content h3{font-size:clamp(1.25rem,2vw,2rem)}
.page-content p{margin-bottom:1.5rem}
.page-content a{color:var(--green);border-bottom:1px solid var(--green-l);transition:border-color .2s}
.page-content a:hover{border-color:var(--green)}
/* De link-styling hierboven geldt alleen voor tekstlinks: knoppen houden
   hun eigen achtergrond- en tekstkleur en krijgen geen onderstreping. */
.page-content a.btn{border-bottom:0}
.page-content a.btn-gold,.page-content a.btn-dark{color:var(--white)}
.page-content a.btn-gold:hover,.page-content a.btn-dark:hover{color:var(--white)}
.page-content a.btn-ghost{color:var(--green-d)}
.page-content a.btn-ghost:hover{color:var(--white)}
.page-content a.btn-ghost-w,.page-content a.btn-ghost-w:hover{color:var(--white)}
.single-thumb{margin-bottom:4rem;aspect-ratio:16/9;overflow:hidden}
.single-thumb img{width:100%;height:100%;object-fit:cover}
.single-content{max-width:760px}

/* ── REVEAL ANIMATIES ── */
.rev{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rev.on{opacity:1;transform:none}
.rev.d1{transition-delay:.12s}
.rev.d2{transition-delay:.24s}
.rev-left{opacity:0;transform:translateX(-20px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rev-left.on{opacity:1;transform:none}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .intro-grid,.diensten-header,.team-grid,.ww-header,.cta-inner,.foot-top{grid-template-columns:1fr}
  .intro-grid{gap:3rem}
  .diensten-header{gap:2rem;margin-bottom:3rem}
  .team-grid{gap:3rem}
  .ww-header{gap:2rem;margin-bottom:3rem}
  .foot-top{gap:3rem}
  .cases-grid{grid-template-columns:1fr 1fr}
  .svc-cards{grid-template-columns:1fr}
  .step-cards{grid-template-columns:1fr}
  .hero-footer-inner{grid-template-columns:1fr 1fr}
  .hero-scroll{display:none}
  .cta-inner{gap:3rem}
  .cta-right{max-width:100%}
  .clients-inner{flex-direction:column;align-items:flex-start}
  .clients-grid{border-left:none;border-top:1px solid rgba(0,0,0,.08);flex-wrap:wrap}
  .nav-links{display:none}
  .nav-hamburger{display:flex}
}

@media(max-width:640px){
  .cases-grid{grid-template-columns:1fr}
  .team-cards{grid-template-columns:1fr 1fr}
  .hero-headline{font-size:clamp(4rem,18vw,8rem)}
  .cta-big{font-size:clamp(4rem,16vw,8rem)}
}

/* ══════════════════════════════════════════════════
   REDESIGN v2 — dichter bij de live site, vloeiender
══════════════════════════════════════════════════ */

/* NAV — zwevende afgeronde balk, altijd donker */
.nav{
  position:fixed;top:1.1rem;left:1.1rem;right:1.1rem;z-index:200;
  max-width:1400px;margin-inline:auto;
  background:var(--green-d)!important;
  border-radius:100px;
  padding:.9rem 1.75rem;
  border-bottom:none;
  backdrop-filter:none;
  box-shadow:0 12px 32px rgba(19,39,42,.16);
  transition:box-shadow .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);
}
.logo-mark-dark{display:none!important}
.logo-mark-light{position:static!important;opacity:1!important}
.logo-name,.nav.dark .logo-name{color:var(--white)!important}
.nav-links a,.nav.dark .nav-links a{color:rgba(255,255,255,.55)!important}
.nav-links a:hover,.nav.dark .nav-links a:hover{color:var(--red)!important}
.nav-contact,.nav.dark .nav-contact{color:var(--white)!important;border-bottom-color:rgba(255,255,255,.4)!important}
.nav-hamburger span{background:var(--white)}
.nav-mobile{top:5rem}

/* BUTTONS — volledig ronde pillen, iets vloeiender */
.btn{border-radius:100px;padding:.95rem 1.75rem;font-weight:700}
.btn-gold{background:var(--red)}
.btn-gold:hover{background:var(--red-d);transform:translateY(-1px)}
.btn-dark:hover,.btn-ghost:hover{transform:translateY(-1px)}
.btn{transition:all .35s cubic-bezier(.16,1,.3,1)}

/* HERO — gecentreerd, rustiger */
.hero{
  background:var(--white);
  min-height:auto;padding-block:clamp(9.5rem,13vw,12rem) 5rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hero-main{align-items:center;text-align:center;padding-bottom:0}
.hero-headline{font-size:clamp(2.75rem,6.5vw,5.5rem);text-align:center;overflow:visible}
.hero-headline .row-1,.hero-headline .row-2,.hero-headline .row-3{display:inline;-webkit-text-stroke:0}
.hero-headline .row-1{color:var(--green-d)}
.hero-headline .row-2{color:var(--white);-webkit-text-stroke:1.5px rgba(19,39,42,.55)}
.hero-headline .row-3{color:var(--red);font-style:normal}
.eyebrow-w{display:none}
.hero-footer{border-top:none;padding-block:0;margin-top:2rem;width:100%;max-width:880px}
.hero-footer-inner{grid-template-columns:1fr;text-align:center;gap:1.75rem}
.hero-sub{color:var(--muted);font-size:1.05rem}
.hero-scroll{display:none}
.hero-btns{justify-content:center}

/* AANPAK / WERKWIJZE — witte ronde kaarten op lichte sectie */
.werkwijze{background:var(--snow)}
.ww-header{grid-template-columns:1fr 1fr;align-items:start}
.step-cards{background:transparent;gap:1.75rem}
.step-card{
  background:var(--white);border-radius:20px;padding:2.75rem 2.25rem;
  box-shadow:0 2px 24px rgba(19,39,42,.05);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1);
}
.step-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(19,39,42,.09)}
.step-bg-n{display:none}
.step-card-n{color:var(--red);font-family:var(--head);font-size:.8rem;font-weight:700;letter-spacing:0;text-transform:none;margin-bottom:.5rem}
.step-card-n::before{content:'';display:none}
.step-card-title{font-family:var(--head);font-size:1.5rem;font-weight:700;text-transform:none;letter-spacing:0;color:var(--text)}

/* DIENSTEN — icoon-kaarten, lichte achtergrond */
.diensten{background:var(--white)}
.diensten-header{align-items:center}
.svc-cards{background:transparent;gap:1.5rem}
.svc-card{
  background:var(--snow);border-radius:20px;padding:2.5rem 2rem;
  align-items:center;text-align:center;
  transition:transform .4s cubic-bezier(.16,1,.3,1),background .4s;
}
.svc-card::before{display:none}
.svc-card:hover{transform:translateY(-4px);background:var(--green-l)}
.svc-card-num{display:none}
.svc-icon{width:44px;height:44px;margin-bottom:1.5rem;object-fit:contain}
.svc-card-title{font-family:var(--head);font-size:1.15rem;font-weight:700;text-transform:none;letter-spacing:0;color:var(--text);margin-bottom:.6rem;flex:none}
.svc-card-desc{text-align:center;margin-bottom:0;font-size:.9rem}
.svc-card-tags{display:none}

/* TESTIMONIAL PANEL */
.testimonial{background:var(--green-d);padding-block:clamp(5rem,9vw,8rem)}
.testimonial-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:5rem;align-items:center}
.testimonial-logo{max-width:220px;filter:brightness(0) invert(1);opacity:.92}
.testimonial-title{font-family:var(--head);font-size:1.75rem;font-weight:700;color:var(--white);margin-bottom:1.25rem}
.testimonial-quote{font-size:1.05rem;line-height:1.8;font-weight:300;color:rgba(255,255,255,.75);margin-bottom:1.5rem}
.testimonial-name{font-weight:700;color:var(--white);margin-bottom:1.75rem}
.testimonial .btn-ghost-w{border-radius:100px}

/* CASES — fotogrid met overlay-bijschrift, zoals live site */
.cases{background:var(--white)}
.cases-header{align-items:center}
.cases-grid{gap:2px;background:transparent}
.case{position:relative;border-radius:0;overflow:hidden}
.case-img{aspect-ratio:4/3.1;background:var(--green-d)}
.case-img::after{display:none}
.case-img::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(19,39,42,0) 40%,rgba(19,39,42,.88) 100%);
}
.case:hover .case-img{background:var(--green-d)}
.case:hover .case-img img{transform:scale(1.06)}
.case-body{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.75rem;gap:.4rem;flex:none;color:var(--white);
}
.case-tag{color:rgba(255,255,255,.85);position:relative;padding-bottom:.5rem}
.case-tag::after{content:'';position:absolute;left:0;bottom:0;width:28px;height:2px;background:var(--red)}
.case-title{color:var(--white);font-family:var(--head);font-weight:700;font-size:1.2rem;text-transform:none;letter-spacing:0}
.case-exc{display:none}
.case-lnk{display:none}

/* TEAM — foto's, rustige typografie */
.team-h{margin-bottom:1.5rem}
.team-h .light,.team-h .heavy{
  font-family:var(--head);font-size:clamp(2rem,4.5vw,3rem);font-weight:800;
  text-transform:none;letter-spacing:0;font-style:normal;color:var(--white);
  display:inline;line-height:1.15;
}
.team-h .heavy{color:var(--white)}
.team-cards{background:transparent;gap:1.5rem}
.team-card{border-radius:16px;overflow:hidden}
.team-img{aspect-ratio:3/4;border-radius:16px}

/* CLIENTS */
.clients-label{font-family:var(--head);font-size:1rem;letter-spacing:0;text-transform:none;color:var(--text);font-weight:700}
.client{filter:grayscale(1);opacity:.55;transition:opacity .3s}
.client img{max-height:32px;width:auto}
.client:hover{opacity:1;background:transparent}
.client img{filter:none}

/* CTA + embedded form styling refinement */
.cta{border-radius:0}
.cta-big .outline{-webkit-text-stroke:0;color:rgba(255,255,255,.35)}

/* FOOTER — 2 kolommen zoals live site */
.foot-top{grid-template-columns:2fr 1fr;gap:5rem}
.foot-logo img{filter:none}
.foot-contact{grid-column:1}

/* HERO MET ACHTERGRONDFOTO — contactpagina */
.page-hero-photo{
  position:relative;min-height:78vh;display:flex;align-items:flex-end;
  background-size:cover;background-position:center;overflow:hidden;
}
.page-hero-photo::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(19,39,42,.35) 0%,rgba(19,39,42,.93) 88%);
}
.page-hero-photo-inner{position:relative;z-index:1;padding-bottom:4rem;width:100%}

@media(max-width:1024px){
  .testimonial-grid{grid-template-columns:1fr;gap:2.5rem;text-align:center}
  .testimonial-logo{margin-inline:auto}
  .foot-top{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════
   v3 — afgestemd op houtvester.com + beweging
   Typografie volgt de live site: Barlow 600 sentence case
   (geen condensed uppercase meer), knoppen in Inter.
══════════════════════════════════════════════════ */

:root{
  /* --cond wees naar Barlow Condensed; de live site gebruikt
     overal gewoon Barlow, dus alle bestaande regels met
     var(--cond) schuiven automatisch mee. */
  --cond: 'Barlow', Helvetica, Arial, sans-serif;
  --ui:   'Inter', Helvetica, Arial, sans-serif;
  --btn:  #e94f3e;
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ── LOGO — het height-attribuut werd platgeslagen door img{height:auto} ── */
.logo-mark{height:30px;width:auto;max-width:none}
.foot-logo img{height:26px;width:auto;max-width:none}

/* ── DISPLAY TYPOGRAFIE ── */
.d1,.d2,.d3,
.hero-headline,.cta-big,.intro-h,
.page-content h2,.page-content h3,
.logo-name,.foot-logo-name{
  font-family:var(--cond);
  text-transform:none;
  letter-spacing:-.02em;
}
.d1,.hero-headline,.cta-big,.intro-h{font-weight:600;line-height:1.02}
.d2,.d3,.page-content h2,.page-content h3{font-weight:600;line-height:1.2}

.d1{font-size:clamp(2.75rem,6.2vw,5.6rem)}
.d2{font-size:clamp(1.9rem,3.4vw,2.75rem)}
.d3{font-size:clamp(1.5rem,2.4vw,2rem)}
.cta-big{font-size:clamp(2.1rem,4vw,3.25rem)}
.intro-h{font-size:clamp(2.25rem,4.4vw,3.5rem)}
.page-content h2{font-size:clamp(1.6rem,2.6vw,2.25rem)}
.page-content h3{font-size:clamp(1.25rem,1.9vw,1.6rem)}
.logo-name,.foot-logo-name{font-weight:700;letter-spacing:.08em}

/* stroke-variant, zoals .stroke-text op de live site */
.hero-headline .row-2{-webkit-text-stroke:1px rgba(19,39,42,.65);color:transparent}
.cta-big .outline{-webkit-text-stroke:1px var(--white);color:transparent}

/* ── BODY TEKST ── */
body{font-size:1.05rem;line-height:1.6}
.body-l,.hero-sub{font-size:clamp(1.05rem,1.3vw,1.25rem);line-height:1.6}
.step-card-desc,.svc-card-desc,.case-exc{font-size:1rem;line-height:1.65}
.page-content{font-size:1.125rem;line-height:1.7}

/* ── KNOPPEN — Inter 600, pill, #e94f3e ── */
.btn{
  font-family:var(--ui);
  font-size:1rem;font-weight:600;
  letter-spacing:0;text-transform:none;
  padding:.8rem 1.6rem;border-radius:100px;
  position:relative;overflow:hidden;
  transition:background .3s var(--ease),color .3s var(--ease),
             transform .35s var(--ease),box-shadow .35s var(--ease);
}
.btn-gold{background:var(--btn)}
.btn-gold:hover{background:var(--red-d);box-shadow:0 10px 26px rgba(232,66,59,.32)}
.btn-dark:hover,.btn-ghost:hover{box-shadow:0 10px 26px rgba(19,39,42,.22)}
/* glans die bij hover over de knop trekt */
.btn::after{
  content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:left .65s var(--ease);pointer-events:none;
}
.btn:hover::after{left:130%}

/* ── EYEBROWS ── */
.eyebrow{font-size:.9rem;letter-spacing:.2em;margin-bottom:1.25rem;color:var(--green)}
.eyebrow-gold{color:var(--red)}

/* ── DIENSTEN — 4 kolommen zoals de live site (et_pb_column_1_4),
      valt terug op 3 bij de teampagina die dezelfde kaarten hergebruikt ── */
@media(min-width:1025px){
  .svc-cards{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
}

/* ══════════════════════════════════════════════════
   BEWEGING
══════════════════════════════════════════════════ */

/* Fotohero (contact) — ruimte vrijhouden voor de zwevende nav */
.page-hero-photo{padding-top:9rem}

/* Scroll-voortgang bovenin */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:300;
  background:var(--red);transform:scaleX(var(--p,0));transform-origin:0 50%;
  will-change:transform;
}

/* Reveal met stagger — .rev krijgt --d mee vanuit de JS */
.rev,.rev-left{
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  transition-delay:calc(var(--d,0) * 85ms);
  will-change:opacity,transform;
}
.rev{transform:translateY(30px)}

/* Woord-voor-woord onthulling van de hero-kop */
.hero-headline .w{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.12em;margin-bottom:-.12em;
}
.hero-headline .wi{
  display:inline-block;
  transform:translateY(105%);
  transition:transform .95s var(--ease);
  transition-delay:calc(var(--d,0) * 55ms);
}
.hero-headline.on .wi{transform:none}

/* Zwevende sfeervlekken achter de hero */
.hero{position:relative;overflow:hidden}
.hero::before,.hero::after{
  content:'';position:absolute;border-radius:50%;pointer-events:none;z-index:0;
  filter:blur(70px);
}
.hero::before{
  width:44vw;height:44vw;left:-12vw;top:-14vw;
  background:radial-gradient(circle,rgba(0,86,87,.16),transparent 68%);
  animation:hv-drift-a 22s ease-in-out infinite;
}
.hero::after{
  width:38vw;height:38vw;right:-10vw;bottom:-16vw;
  background:radial-gradient(circle,rgba(232,66,59,.14),transparent 68%);
  animation:hv-drift-b 27s ease-in-out infinite;
}
.hero > *{position:relative;z-index:1}
@keyframes hv-drift-a{50%{transform:translate3d(6vw,4vw,0) scale(1.12)}}
@keyframes hv-drift-b{50%{transform:translate3d(-5vw,-4vw,0) scale(1.15)}}

/* NAV — verbergt zich bij scrollen omlaag, onderstreping op de links */
.nav{
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),
             padding .45s var(--ease);
}
.nav.hide{transform:translateY(calc(-100% - 1.6rem))}
.nav.scrolled{box-shadow:0 16px 40px rgba(19,39,42,.26);padding-block:.7rem}
.nav-links a{position:relative}
.nav-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:-4px;height:1px;
  background:var(--red);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .4s var(--ease);
}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.nav-contact::after{display:none}

/* Hamburger — de balk is altijd donkergroen, dus altijd witte streepjes */
.nav .nav-hamburger span,.nav:not(.dark) .nav-hamburger span{
  background:var(--white);
  transition:transform .35s var(--ease),opacity .25s var(--ease);
}
.nav-hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-hamburger.open span:nth-child(2){opacity:0}
.nav-hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobiel menu valt binnen de zwevende balk i.p.v. eruit te steken */
.nav.menu-open{border-radius:24px}
.nav-mobile{
  margin:.9rem -1.75rem -.9rem;
  padding:.75rem 1.75rem .5rem;
  background:transparent;
  border-top:1px solid rgba(255,255,255,.1);
  border-radius:0 0 24px 24px;
}

/* KAARTEN — iets levendiger */
.step-card,.svc-card{transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease)}
.step-card:hover,.svc-card:hover{transform:translateY(-7px)}
.svc-icon{transition:transform .45s var(--ease)}
.svc-card:hover .svc-icon{transform:translateY(-5px) scale(1.08)}
.step-card-n{transition:transform .45s var(--ease)}
.step-card:hover .step-card-n{transform:translateX(4px)}

/* CASES — parallax binnen de uitsnede + zachtere zoom */
.case-img img{
  transform:scale(1.12) translate3d(0,var(--py,0px),0);
  transition:transform .8s var(--ease);
  will-change:transform;
}
.case:hover .case-img img{transform:scale(1.18) translate3d(0,var(--py,0px),0)}
.case-body{transition:transform .5s var(--ease)}
.case:hover .case-body{transform:translateY(-6px)}
.case-tag::after{transition:width .45s var(--ease)}
.case:hover .case-tag::after{width:52px}

/* KLANTEN — doorlopende logobalk */
.clients-grid{
  overflow:hidden;position:relative;border-left:none;display:block;
  width:100%;min-width:0;align-self:stretch;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.clients-track{
  display:flex;align-items:center;width:max-content;
  animation:hv-marquee var(--dur,36s) linear infinite;
}
.clients-grid:hover .clients-track{animation-play-state:paused}
/* marge i.p.v. gap, zodat de herhaling naadloos aansluit bij -50% */
.clients-track .client{
  flex:0 0 auto;border-right:none;padding:1.25rem 0;margin-right:3.5rem;opacity:.6;
  transition:opacity .3s var(--ease),filter .3s var(--ease);
}
.clients-track .client img{max-height:42px}
.clients-track .client:hover{opacity:1;filter:grayscale(0)}
@keyframes hv-marquee{to{transform:translate3d(-50%,0,0)}}

/* TESTIMONIAL */
.testimonial-logo{transition:transform .6s var(--ease)}
.testimonial:hover .testimonial-logo{transform:scale(1.04)}

/* CTA — trage gloed */
.cta::before{
  content:'';position:absolute;inset:-30%;pointer-events:none;
  background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.16),transparent 55%);
  animation:hv-drift-a 20s ease-in-out infinite;
}
.cta-inner{position:relative;z-index:1}

/* ══════════════════════════════════════════════════
   MERKVORMEN — lijncontouren als rustige achtergrond.
   Bewust laag contrast: ze mogen de tekst nooit storen.
════════════════════════════════════════════════════ */
.intro,.werkwijze,.cta,footer{position:relative;overflow:hidden}
.intro > .c,.werkwijze > .c,footer > .c{position:relative;z-index:1}

.intro::before,.werkwijze::before,.cta::after,footer::before{
  content:'';position:absolute;pointer-events:none;z-index:0;
  background-repeat:no-repeat;background-size:cover;background-position:center;
}

/* licht op licht */
.intro::before{
  background-image:url('../img/vorm-3.svg');
  inset:0;opacity:.2;
}
.werkwijze::before{
  background-image:url('../img/vorm-2.svg');
  inset:0;background-position:right center;opacity:.2;
}

/* wit op donker — vorm inkleuren via de pseudo-laag zelf */
.cta::after{
  background-image:url('../img/vorm-1.svg');
  inset:0;
  filter:brightness(0) invert(1);opacity:.2;
}
footer::before{
  display:none;
}


/* ══════════════════════════════════════════════════
   v4 — correcties homepage
════════════════════════════════════════════════════ */

/* ── HERO → grijze sectie: zachte overloop i.p.v. harde rand ── */
.hero{background:linear-gradient(180deg,var(--white) 0%,var(--white) 50%,#FBFBFB 76%,var(--snow) 100%)}
/* de vlekken blijven binnen de sectie, zodat ze niet worden afgekapt */
.hero::before{width:40vw;height:40vw;left:-13vw;top:-11vw}
.hero::after{width:32vw;height:32vw;right:-7vw;bottom:2vw}

/* ── KLANTEN — logo's fors groter en beter leesbaar ── */
.clients-label{font-size:1.05rem}
/* de logobestanden zijn vierkant met veel witruimte, dus ruim opschalen */
.clients-track .client{margin-right:3rem;padding:.5rem 0;opacity:.72}
.clients-track .client img{max-height:92px;max-width:200px;width:auto;object-fit:contain}
.clients-track .client:hover{opacity:1;filter:grayscale(0)}
@media(max-width:768px){
  .clients-track .client{margin-right:2rem}
  .clients-track .client img{max-height:68px;max-width:150px}
}

/* ── REVIEWS — carrousel ── */
.tst{position:relative}
.tst-viewport{display:grid}
.tst-slide{
  grid-area:1/1;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease),visibility .55s;
}
.tst-slide.is-active{opacity:1;visibility:visible;transform:none}
.tst-mark{
  display:block;font-family:var(--cond);font-weight:700;
  font-size:clamp(5rem,9vw,8.5rem);line-height:.72;
  color:var(--btn);margin-bottom:clamp(1rem,2vw,1.75rem);
}
.testimonial-quote{
  font-size:clamp(1.15rem,1.9vw,1.65rem);line-height:1.6;font-weight:300;
  color:rgba(255,255,255,.88);max-width:46ch;
}
.testimonial-name{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .75rem;
  margin-bottom:0;color:var(--white);
}
.testimonial-name span{font-family:var(--ui);font-size:.88rem;font-weight:400;color:rgba(255,255,255,.5)}

.tst-controls{
  display:flex;align-items:center;flex-wrap:wrap;gap:1rem;
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.75rem;
  border-top:1px solid rgba(255,255,255,.12);
}
.tst-arrow{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.25);color:var(--white);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.tst-arrow svg{width:18px;height:18px}
.tst-arrow:hover{background:var(--btn);border-color:var(--btn);transform:translateY(-2px)}
.tst-dots{display:flex;gap:.5rem}
.tst-dot{
  width:28px;height:3px;border-radius:2px;border:none;padding:0;cursor:pointer;
  background:rgba(255,255,255,.22);transition:background .3s var(--ease);
}
.tst-dot.is-active{background:var(--btn)}
.tst-cta{margin-left:auto}
@media(max-width:1024px){
  .tst-slide{grid-template-columns:1fr;gap:1.75rem}
  .tst-cta{margin-left:0;width:100%;justify-content:center}
}

/* ── TEAM — rustiger ritme, beter leesbaar ── */
.team-grid{grid-template-columns:1fr;gap:clamp(2.5rem,5vw,3.75rem);align-items:start}
.team-h{margin-bottom:1.25rem}
.team-h .light,.team-h .heavy{
  font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.2;letter-spacing:-.02em;
}
.team-h .light{font-weight:300;color:rgba(255,255,255,.55)}
.team-h .heavy{font-weight:600;color:var(--white)}
.team-txt{
  font-size:1.0625rem;line-height:1.75;font-weight:300;
  color:rgba(255,255,255,.78);max-width:66ch;margin-bottom:0;
}
.team-cards{grid-template-columns:repeat(3,1fr);gap:1.75rem}
.team-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:18px;overflow:hidden;
  transition:transform .45s var(--ease),background .45s var(--ease);
}
.team-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.09)}
.team-img{aspect-ratio:1;border-radius:0;border-bottom:none}
.team-img img{object-position:center 20%}
.team-meta{padding:1.35rem 1.5rem 1.6rem}
.team-name{font-family:var(--cond);font-size:1.2rem;font-weight:600;letter-spacing:-.01em}
.team-role{
  font-family:var(--ui);font-size:.875rem;font-weight:500;
  letter-spacing:0;text-transform:none;color:rgba(255,255,255,.55);margin-top:.35rem;
}
@media(max-width:900px){.team-cards{grid-template-columns:1fr}}

/* ── CONTACT OP DE HOMEPAGE ── */
.home-contact{background:var(--white);padding-block:clamp(5rem,9vw,8rem)}
.hc-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2.5rem,5vw,5rem);align-items:start}
.hc-lead{font-size:1.0625rem;line-height:1.7;color:var(--muted);margin-top:1.25rem;max-width:46ch}
.hc-facts{list-style:none;margin:2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.85rem}
.hc-facts li{position:relative;padding-left:1.6rem;font-size:1rem;color:var(--text)}
.hc-facts li::before{
  content:'';position:absolute;left:0;top:.55em;
  width:8px;height:8px;border-radius:50%;background:var(--btn);
}
.hc-facts span{font-weight:600;color:var(--green-d)}
.hc-direct{display:flex;flex-wrap:wrap;gap:.5rem 2rem;margin-top:2rem}
.hc-direct a{
  font-family:var(--ui);font-weight:600;color:var(--green);text-decoration:none;
  border-bottom:1px solid rgba(0,86,87,.3);padding-bottom:2px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.hc-direct a:hover{color:var(--btn);border-color:var(--btn)}

.hc-form{
  background:var(--snow);border:1px solid rgba(0,86,87,.1);border-radius:22px;
  padding:clamp(1.75rem,3vw,2.5rem);display:flex;flex-direction:column;gap:1.1rem;
}
.hc-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.hc-field{display:flex;flex-direction:column;gap:.4rem}
.hc-field label{
  font-family:var(--ui);font-size:.78rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
}
.hc-field input,.hc-field select,.hc-field textarea{
  font-family:var(--head);font-size:1rem;font-weight:300;color:var(--text);
  background:var(--white);border:1px solid rgba(0,86,87,.18);border-radius:12px;
  padding:.7rem .9rem;width:100%;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.hc-field select{
  appearance:none;-webkit-appearance:none;padding-right:2.5rem;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005657' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:16px;
}
.hc-field textarea{resize:vertical;min-height:104px}
.hc-field input:focus,.hc-field select:focus,.hc-field textarea:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,86,87,.12);
}
.hc-field input:user-invalid{border-color:var(--btn)}
.hc-submit{align-self:flex-start;margin-top:.35rem}
.hc-note{font-size:.82rem;line-height:1.5;color:var(--muted)}
.hc-done{
  font-family:var(--cond);font-size:1.35rem;font-weight:600;letter-spacing:-.01em;
  color:var(--green-d);
}
.hc-done small{display:block;margin-top:.6rem;font-family:var(--head);font-size:.95rem;font-weight:300;color:var(--muted)}
.hc-form.is-sent > *:not(.hc-done){display:none}
@media(max-width:1024px){
  .hc-grid{grid-template-columns:1fr}
  .hc-row{grid-template-columns:1fr}
}

/* ── CTA — vollere rode vlakken, geen witte waas eroverheen ── */
.cta{background:linear-gradient(150deg,#EE4C40 0%,#E0342C 52%,#C0201A 100%)}
.cta::before{
  background:radial-gradient(circle at 26% 28%,rgba(255,255,255,.07),transparent 58%);
}
/* rode knop op rood viel weg — wit leest sterker en houdt het vlak vol */
.cta .btn-gold{background:var(--white);color:var(--green-d)}
.cta .btn-gold:hover{background:var(--green-d);color:var(--white);box-shadow:0 12px 28px rgba(0,0,0,.28)}
.cta-sub{color:rgba(255,255,255,.9)}
.cta-big .outline{-webkit-text-stroke:1px rgba(255,255,255,.85);color:transparent}
.cta::after{opacity:.2}

/* ══════════════════════════════════════════════════
   v5 — bewijs, cases en persoonlijk contact
════════════════════════════════════════════════════ */

/* ── KLANTENLOGO'S als bewijsregel direct onder de hero ── */
.hero + .clients{border-top:none;padding-block:1rem clamp(1.5rem,3vw,2.5rem)}
.hero + .clients .clients-inner{
  padding-bottom:clamp(1.5rem,3vw,2.5rem);
  border-bottom:1px solid rgba(0,86,87,.12);
}

/* ── CASES — klikbaar, met resultaatregel ── */
a.case{display:block;color:inherit;text-decoration:none}
.case-result{
  font-family:var(--ui);font-size:.9rem;font-weight:500;line-height:1.45;
  color:rgba(255,255,255,.78);margin-top:.5rem;
}
.case-more{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.9rem;
  font-family:var(--ui);font-size:.88rem;font-weight:600;color:var(--white);
  opacity:0;transform:translateY(6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.case-more svg{width:15px;height:15px}
.case:hover .case-more,.case:focus-visible .case-more{opacity:1;transform:none}
.case:focus-visible{outline:2px solid var(--btn);outline-offset:3px}

/* ── CONTACT — gezicht en direct nummer ── */
.hc-person{
  display:flex;align-items:center;gap:1.25rem;margin-top:2rem;
  padding-top:2rem;border-top:1px solid rgba(0,86,87,.12);
}
.hc-person img{
  width:84px;height:84px;flex:0 0 auto;border-radius:50%;
  object-fit:cover;object-position:center 18%;
}
.hc-person-name{
  display:block;font-family:var(--cond);font-size:1.2rem;font-weight:600;
  letter-spacing:-.01em;color:var(--green-d);
}
.hc-person-role{
  display:block;font-family:var(--ui);font-size:.85rem;
  color:var(--muted);margin-bottom:.55rem;
}
.hc-person-links{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.hc-person-links a{
  font-family:var(--ui);font-weight:600;font-size:.95rem;
  color:var(--green);text-decoration:none;
  border-bottom:1px solid rgba(0,86,87,.3);padding-bottom:1px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.hc-person-links a:hover{color:var(--btn);border-color:var(--btn)}

/* ── CASEPAGINA ── */
.case-hero{background:var(--green-d);padding-block:10rem 4.5rem;position:relative;overflow:hidden}
.case-hero > .c{position:relative;z-index:1}
.case-hero::before{
  content:'';position:absolute;pointer-events:none;z-index:0;
  background:url('../img/vorm-3.svg') no-repeat center/cover;
  inset:0;
  filter:brightness(0) invert(1);opacity:.2;
}
.case-back{
  display:inline-flex;align-items:center;gap:.45rem;margin-bottom:2rem;
  font-family:var(--ui);font-size:.9rem;font-weight:600;
  color:rgba(255,255,255,.6);text-decoration:none;
  transition:color .3s var(--ease);
}
.case-back:hover{color:var(--white)}
.case-back svg{width:16px;height:16px}
.case-hero h1{color:var(--white)}
.case-lead-in{
  font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.65;font-weight:300;
  color:rgba(255,255,255,.7);max-width:60ch;margin-top:1.25rem;
}

.case-cover{background:var(--green-d);line-height:0}
.case-cover img{width:100%;height:auto;display:block}

.case-content{background:var(--white);padding-block:clamp(4rem,8vw,7rem)}
.case-content-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:start}
.case-facts{
  background:var(--snow);border:1px solid rgba(0,86,87,.1);
  border-radius:20px;padding:1.75rem;position:sticky;top:7rem;
}
.case-facts-h{
  display:block;font-family:var(--ui);font-size:.75rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.75rem;
}
.case-facts-h + *{margin-top:0}
.case-facts ul{list-style:none;margin:0 0 1.75rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.case-facts li{
  font-family:var(--ui);font-size:.85rem;font-weight:500;
  background:var(--white);border:1px solid rgba(0,86,87,.14);
  border-radius:100px;padding:.35rem .8rem;color:var(--green-d);
}
.case-facts p{font-size:.95rem;line-height:1.6;color:var(--text)}

.case-gallery{background:var(--snow);padding-block:clamp(4rem,8vw,7rem)}
.case-shots{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2.5rem}
.case-shot{margin:0;border-radius:18px;overflow:hidden;background:var(--green-l)}
.case-shot.wide{grid-column:1/-1}
.case-shot img{width:100%;height:100%;object-fit:cover;display:block}
.case-shot-empty{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,rgba(0,86,87,.05) 0 12px,transparent 12px 24px);
  border:1px dashed rgba(0,86,87,.25);border-radius:18px;
  font-family:var(--ui);font-size:.85rem;font-weight:500;
  color:var(--muted);text-align:center;padding:1rem;
}

/* video's in een case: twee naast elkaar, altijd 16:9 */
.case-videos{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:1.5rem}
.case-video{margin:0;border-radius:18px;overflow:hidden;background:var(--green-d)}
.case-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0}

.case-next{background:var(--white);padding-block:clamp(3rem,6vw,5rem);border-top:1px solid rgba(0,86,87,.1)}
.case-next-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.case-next-label{font-family:var(--ui);font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.case-next-title{font-family:var(--cond);font-size:clamp(1.5rem,3vw,2.25rem);font-weight:600;letter-spacing:-.02em;color:var(--green-d);margin-top:.35rem}

@media(max-width:1024px){
  .case-content-grid{grid-template-columns:1fr}
  .case-facts{position:static}
  .case-hero{padding-block:8rem 3.5rem}
}
@media(max-width:768px){.case-shots,.case-videos{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════
   v6 — uitlijning sectiekoppen en tekstkolommen
   ══════════════════════════════════════════════════ */

/* sectiekop met kop links en tekst/knop rechts: onderlijn uitlijnen */
.diensten-header{grid-template-columns:1fr minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:end}
.diensten-header > *{min-width:0}
.diensten-intro{max-width:52ch;margin-bottom:0}
.diensten-header .d2{margin-bottom:0}
/* Knop rechts naast de sectiekop, maar links zodra de kolommen stapelen. */
.header-btn{justify-self:end}
@media(max-width:900px){
  .diensten-header{grid-template-columns:1fr;align-items:start}
  .diensten-intro{max-width:60ch}
  .header-btn{justify-self:start}
  .cases-header{grid-template-columns:1fr!important;justify-items:start}
}

/* twee tekstkolommen naast elkaar: bovenkant gelijk laten beginnen */
.intro-grid > .page-content > :first-child{margin-top:0}

/* logobalk onder de hero: op smalle schermen maar één scheidingslijn */
@media(max-width:1024px){
  .hero + .clients .clients-grid{border-top:none}
}

/* merkverhaal en DNA als afgekaderd resultaat op de casepagina's */
.case-outcome{
  position:relative;
  margin-top:clamp(2.5rem,5vw,3.5rem);
  padding:clamp(1.75rem,3.5vw,2.5rem);
  padding-left:calc(clamp(1.75rem,3.5vw,2.5rem) + .5rem);
  background:var(--snow);
  border:1px solid rgba(0,86,87,.12);
  border-radius:20px;
}
.case-outcome::before{
  content:"";position:absolute;left:-1px;top:1.5rem;bottom:1.5rem;
  width:4px;border-radius:4px;background:var(--btn);
}
.case-outcome h2{margin-top:2.25rem}
.case-outcome > :first-child{margin-top:0}
.case-outcome > :last-child{margin-bottom:0}

/* teamtegels op 'over': witte kaart op de grijze sectie.
   Alleen daar: op de homepage staan de tegels op donkergroen met witte tekst. */
.svc-card.team-card,.svc-card.team-card:hover{background:var(--white)}

/* ══════════════════════════════════════════════════
   v7 — donkergroene hero op de homepage
   ══════════════════════════════════════════════════ */
.hero{background:var(--green-d)}
.hero-headline .row-1{color:var(--white)}
.hero-headline .row-2{-webkit-text-stroke:1.5px rgba(255,255,255,.5);color:transparent}
.hero-sub{color:rgba(255,255,255,.72)}

/* de zachte vlekken moeten op donker juist oplichten */
.hero::before{background:radial-gradient(circle,rgba(255,255,255,.10),transparent 68%)}
.hero::after{background:radial-gradient(circle,rgba(232,66,59,.30),transparent 68%)}

.hero .c{position:relative;z-index:1}

/* casetegels: forser formaat en beter leesbare tekst op het beeld */
.case-img{aspect-ratio:4/3.4}
.case-img::before{
  background:linear-gradient(180deg,rgba(19,39,42,.22) 0%,rgba(19,39,42,.42) 38%,rgba(19,39,42,.82) 72%,rgba(19,39,42,.95) 100%);
}
.case-body{padding:2.25rem}
.case-title{font-size:clamp(1.3rem,1.7vw,1.6rem);line-height:1.15}
.case-result{font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.88)}
@media(min-width:1025px){
  .cases-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .case-body{padding:1.5rem}
}

/* binnenpagina's: kop en tekst dichter op elkaar.
   Was samen ~300px tussenruimte, nu ~110px. */
.page-hero-light{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.page-hero-light + .intro{padding-top:clamp(3rem,5vw,4.5rem)}

/* contactformulier: honeypot en terugkoppeling */
.field-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{
  margin-top:1.75rem;padding:.9rem 1.25rem;border-radius:12px;
  font-family:var(--ui);font-size:.95rem;line-height:1.5;max-width:520px;
}
.form-status.is-ok{background:rgba(255,255,255,.14);color:var(--white);border:1px solid rgba(255,255,255,.28)}
.form-status.is-fout{background:rgba(232,66,59,.18);color:var(--white);border:1px solid rgba(232,66,59,.55)}

/* ══════════════════════════════════════════════════
   KLANTENBALK — volle breedte, forse logo's
   Het label stond naast de balk en drukte die samen.
   Nu boven de balk, zodat de logo's de hele breedte krijgen.
   ══════════════════════════════════════════════════ */
.clients-inner{flex-direction:column;align-items:stretch;gap:clamp(1.25rem,2.5vw,2rem)}
.clients-label{flex:0 0 auto}

.clients-grid{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}

/* logo's in volle kleur: het zijn merken van klanten, geen decoratie */
.clients-track .client{
  margin-right:clamp(3rem,5vw,5.5rem);padding:.25rem 0;opacity:1;
  transition:transform .35s var(--ease);
}
.clients-track .client img{
  max-height:clamp(78px,7vw,120px);max-width:260px;width:auto;object-fit:contain;
}
.clients-track .client:hover{transform:scale(1.06)}

@media(max-width:768px){
  .clients-track .client{margin-right:2.5rem}
  .clients-track .client img{max-height:64px;max-width:170px}
}

/* "De wortels" op de Over-pagina: wit i.p.v. het standaard .werkwijze-grijs */
.werkwijze.wortels{background:var(--white)}

/* Voorkeur voor minder beweging respecteren */
@media (prefers-reduced-motion: reduce){
  .rev,.rev-left,.hero-headline .wi{transition:none!important;transform:none!important;opacity:1!important}
  .tst-slide{transition:none!important;transform:none!important}
  .hero::before,.hero::after,.cta::before,.clients-track{animation:none!important}
  .case-img img{transform:scale(1.02)!important}
  .btn::after{display:none}
}