/*
 * Dienst pagina — Junto Media
 * Alleen stijlen die NIET in style.css staan.
 * Hergebruikt: .btn-primary, .btn-ghost, .sec-num, .sec-lbl, .sec-title,
 *              .sec-header, .container, .fade-up, .slide-left, .slide-right,
 *              .cases, .cases-grid, .case-card, .case-img, .case-line,
 *              .case-info, .case-cat, .case-title, .case-arrow,
 *              .cta-bg, .cta-content, .cta-lbl, .cta-title
 */

/* ==========================================================================
 * BUTTON VARIANTS
 * ========================================================================== */
.btn-primary--lg {
  font-size: 15px;
  padding: 18px 44px;
}
.btn-primary--sm {
  font-size: 12px;
  padding: 12px 24px;
}
.btn-primary--inline {
  display: inline-block;
  margin-bottom: 12px;
}

/* ==========================================================================
 * SHARED HELPERS
 * ========================================================================== */
.sec-header__sub {
  font-size: 14px;
  color: var(--text-faint);
  max-width: 280px;
  line-height: 1.7;
}
.faq__title {
  margin-bottom: 48px;
}

/* ==========================================================================
 * BTN-WHITE
 * ========================================================================== */
.btn-white {
  background: #fff;
  color: var(--pink);
  padding: 14px 28px;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  border: none;
  font-family: inherit;
}
.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

/* ==========================================================================
 * SCROLL CURSOR (aanpak sectie)
 * ========================================================================== */
#cursorScroll {
  position: fixed;
  pointer-events: none;
  z-index: 99997;
  transform: translate(0, -50%);
  opacity: 0;
  transition: opacity 0.25s;
  white-space: nowrap;
}
#cursorScroll span {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text);
  background: var(--pink);
  padding: 6px 14px;
  border-radius: 2px;
  display: block;
}
body.cursor-scroll #cursorScroll { opacity: 1; }
body.cursor-scroll .cursor-dot { opacity: 0; }
body.cursor-scroll .cursor-ring { opacity: 0; }

/* Breadcrumb verhuisd naar components.css (universeel component) */

/* Varianten (subnav) gebruiken nu de gedeelde .dwa-spec kaarten — zelfde
   patroon als webapplicaties Drie specialisaties. Geen aparte chip-strip
   styling meer nodig. */

/* ==========================================================================
 * INTRO (onze aanpak — boven de stappen)
 * ========================================================================== */
.intro {
  padding: var(--section-pad-y) 0;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.intro__foto {
  position: absolute;
  top: 0;
  right: 0;
  width: 38%;
  height: 100%;
  overflow: hidden;
}
.intro__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5) grayscale(20%);
}
.intro__foto::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  background: linear-gradient(to right, var(--dark), transparent);
  z-index: 2;
}
.intro__foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--dark) 0%, transparent 60%);
  z-index: 2;
}
.intro__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 180px 1fr;
  align-items: start;
  position: relative;
  z-index: 3;
}
.intro__content {
  max-width: 600px;
}
.intro__big {
  font-family: var(--font-heading);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -2px;
  text-transform: uppercase;
  margin-bottom: 32px;
}
.intro__big .dim {
  color: var(--text-dim);
}
.intro__big .accent {
  color: var(--pink);
}
.intro__body {
  font-size: 17px;
  line-height: 1.9;
  color: var(--muted);
  margin-bottom: 20px;
}
.intro__body strong {
  color: var(--text);
}

/* ==========================================================================
 * AANPAK (pinned scroll)
 * ========================================================================== */
.aanpak {
  padding: var(--section-pad-y) 0;
  border-bottom: 1px solid var(--border);
  background: var(--dark);
  z-index: 1;
}
.aanpak__stats {
  display: flex;
  align-items: center;
  gap: 0;
}
.aanpak__stat {
  padding: 0 32px;
}
.aanpak__stat:first-child {
  padding-left: 0;
}
.aanpak__stat-val {
  font-family: var(--font-heading);
  font-size: clamp(32px, 3.5vw, 44px);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--text);
}
.aanpak__stat-val span {
  color: var(--pink);
  margin-left: 4px;
}
.aanpak__stat-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-num);
  margin-top: 6px;
}
.aanpak__stat-divider {
  width: 1px;
  height: 48px;
  background: var(--border);
  flex-shrink: 0;
}
/* Layout past zich aan op aantal stappen:
   - 4 stappen → 4 koloms in 1 rij (websites)
   - 5 stappen → 3+2 ritme via :has() (webapplicaties)
   - 3 stappen → 3 koloms
   Conditional met :has() — supported in alle moderne browsers. */
.aanpak__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 64px;
  overflow: visible;
}
.aanpak__stap {
  background: var(--dark-card);
  padding: 40px 32px;
  position: relative;
  overflow: visible;
  border-right: 1px solid var(--border);
  transition: background 0.3s;
}
.aanpak__stap:last-child {
  border-right: none;
}

/* 3 stappen — 3 koloms */
.aanpak__grid:has(.aanpak__stap:nth-child(3)):not(:has(.aanpak__stap:nth-child(4))) {
  grid-template-columns: repeat(3, 1fr);
}

/* 5 stappen — 3+2 ritme (6 col grid, items 1-3 span 2, items 4-5 span 3) */
.aanpak__grid:has(.aanpak__stap:nth-child(5)) {
  grid-template-columns: repeat(6, 1fr);
}
.aanpak__grid:has(.aanpak__stap:nth-child(5)) > .aanpak__stap {
  grid-column: span 2;
}
.aanpak__grid:has(.aanpak__stap:nth-child(5)) > .aanpak__stap:nth-child(n+4) {
  grid-column: span 3;
  /* Subtieler dan --border / --light-border — een zachte tussenrij-lijn
     ipv harde scheiding. Hybrid override hieronder maakt 'm nog zachter. */
  border-top: 1px solid var(--muted2);
}
.homepage-v2.is-hybrid .aanpak__grid:has(.aanpak__stap:nth-child(5)) > .aanpak__stap:nth-child(n+4) {
  border-top-color: var(--light-bg3);
}
.aanpak__grid:has(.aanpak__stap:nth-child(5)) > .aanpak__stap:nth-child(3) {
  border-right: none;
}
.aanpak__grid:has(.aanpak__stap:nth-child(5)) > .aanpak__stap:nth-child(3) .aanpak__connector {
  display: none;
}

/* Static variant (zonder pinned scroll / GSAP) — stappen meteen volledig
   zichtbaar. Grid past zich aan op het aantal stappen (auto-fit). De
   grote stapnummers krijgen --text-num (in plaats van bijna-zwart) zodat
   ze ook zonder scroll-animatie leesbaar blijven. */
.aanpak--static .aanpak__stap {
  opacity: 1;
  filter: none;
}
.aanpak--static .aanpak__stap-num {
  color: var(--text-num);
}
.aanpak--static .aanpak__grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.is-hybrid .aanpak--static .aanpak__stap {
  background: #fff;
  border-right-color: var(--light-border);
}
.is-hybrid .aanpak--static .aanpak__stap-num   { color: var(--light-text-num); }
.is-hybrid .aanpak--static .aanpak__stap-name  { color: var(--light-text); }
.is-hybrid .aanpak--static .aanpak__stap-desc  { color: var(--light-muted); }

/* Aanpak sectie (scroll-pinned variant, dezelfde als websites + webapp) in
   light mode. Stappen worden wit met subtiele borders; grote stap-nummers
   gaan van bijna-zwart naar light-text-num (grijs) — anders worden ze
   onleesbaar zwart op witte kaart. */
.homepage-v2.is-hybrid .aanpak {
  background: var(--light-bg);
  border-bottom-color: var(--light-border);
}
.homepage-v2.is-hybrid .aanpak .sec-num   { color: var(--light-text-num); }
.homepage-v2.is-hybrid .aanpak .sec-title { color: var(--light-text); }
.homepage-v2.is-hybrid .aanpak__stat-val      { color: var(--light-text); }
.homepage-v2.is-hybrid .aanpak__stat-val span { color: var(--pink); }
.homepage-v2.is-hybrid .aanpak__stat-lbl      { color: var(--light-text-num); }
.homepage-v2.is-hybrid .aanpak__stat-divider  { background: var(--light-border); }
.homepage-v2.is-hybrid .aanpak__stap {
  background: #fff;
  border-right-color: var(--light-border);
  border-top-color: var(--light-border);
}
.homepage-v2.is-hybrid .aanpak__stap:hover {
  background: var(--light-bg2);
}
.homepage-v2.is-hybrid .aanpak__stap-num  { color: var(--light-text-num); }
.homepage-v2.is-hybrid .aanpak__stap-name { color: var(--light-text); }
.homepage-v2.is-hybrid .aanpak__stap-desc { color: var(--light-muted); }
/* .aanpak__stap-result blijft pink (--pink) in beide modi */
.aanpak__stap:last-child {
  border-right: none;
}
.aanpak__stap:hover {
  background: var(--dark2);
}
.aanpak__stap-num {
  font-family: var(--font-heading);
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -2px;
  color: #181818;
  line-height: 1;
  margin-bottom: 24px;
}
.aanpak__stap-name {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 12px;
}
.aanpak__stap-desc {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-faint);
  margin-bottom: 16px;
}
.aanpak__stap-result {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pink);
}
.aanpak__connector {
  position: absolute;
  top: 40px;
  right: 32px;
  z-index: 10;
  opacity: 0.9;
}
.aanpak__stap:last-child .aanpak__connector {
  display: none;
}

/* ==========================================================================
 * DELIVERABLES (wat je krijgt)
 * ========================================================================== */
.deliverables {
  padding: var(--section-pad-y) 0;
  border-bottom: 1px solid var(--border);
}
.deliverables__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 10px;
}
.deliverables__desc {
  font-size: 14px;
  color: var(--text-faint);
  max-width: 320px;
  line-height: 1.7;
}
.deliverables__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  margin-top: 64px;
}
.deliverables__foto {
  position: relative;
}
.deliverables__foto-wrap {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.deliverables__foto-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.65) grayscale(15%);
}
.deliverables__foto::before {
  content: '';
  position: absolute;
  top: 0;
  left: -3px;
  width: 3px;
  height: 80px;
  background: var(--pink);
  z-index: 2;
}
.deliverables__quote {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 32px;
  background: linear-gradient(to top, rgba(10,10,10,0.95) 0%, transparent 100%);
  z-index: 2;
}
.deliverables__quote-text {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 8px;
}
.deliverables__quote-text span {
  color: var(--pink);
}
.deliverables__quote-sub {
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.deliverables__stat {
  position: absolute;
  top: 32px;
  right: -24px;
  background: var(--pink);
  padding: 20px 24px;
  z-index: 3;
}
.deliverables__stat-num {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  color: #fff;
}
.deliverables__stat-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
}
.deliverables__list {
  display: flex;
  flex-direction: column;
}
.deliverable-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid var(--border);
  align-items: start;
  opacity: 0;
  filter: blur(3px);
}
.deliverable-item:last-child {
  border-bottom: 1px solid var(--border);
}
.deliverable-item__check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.deliverable-item__check svg {
  width: 12px;
  height: 12px;
}
.deliverable-item__name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}
.deliverable-item__desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-faint);
}

/* ==========================================================================
 * VERGELIJKING (maatwerk vs standaard)
 * ========================================================================== */
.vergelijking {
  padding: var(--section-pad-y) 0;
  border-bottom: 1px solid var(--border);
}
.vergelijking__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 10px;
}
.vergelijking__desc {
  font-size: 14px;
  color: var(--text-faint);
  max-width: 320px;
  line-height: 1.7;
}
.verg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--border);
  margin-top: 64px;
}
.verg-col {
  background: var(--dark);
  padding: 48px 40px;
}
.verg-col--featured {
  background: var(--dark2);
}
.verg-col__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-num);
  margin-bottom: 24px;
  display: block;
}
.verg-col--featured .verg-col__tag {
  color: var(--pink);
}
.verg-col__title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 32px;
  letter-spacing: -0.5px;
}
.verg-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.verg-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.verg-item--good {
  color: var(--text-muted);
}
.verg-item--bad {
  color: var(--text-num);
}
.verg-dot--good {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
  flex-shrink: 0;
}
.verg-dot--bad {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
}

/* ==========================================================================
 * CALCULATOR TUSSENSECTIE
 * ========================================================================== */
.calc-mid {
  border-bottom: 1px solid var(--border);
}
.calc-mid__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.calc-mid__block {
  background: var(--pink);
  padding: 72px 80px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.calc-mid__block::before {
  content: '';
  position: absolute;
  top: -80px;
  right: 200px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}
.calc-mid__title {
  font-family: var(--font-heading);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 16px;
}
.calc-mid__sub {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  max-width: 560px;
}
.calc-mid__right {
  flex-shrink: 0;
  text-align: left;
  min-width: 260px;
}
.calc-mid__steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}
.calc-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}
.calc-step__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

/* ==========================================================================
 * CASES — dienst-specifieke toevoegingen
 * Basis .cases, .cases-grid, .case-card etc. komen uit style.css
 * ========================================================================== */
.case-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: var(--pink);
  padding: 8px 14px;
  z-index: 3;
}
.case-badge span {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}
.case-card:not(.featured) .case-badge {
  bottom: 12px;
  left: 16px;
  padding: 6px 12px;
}
.case-card:not(.featured) .case-badge span {
  font-size: 12px;
}

/* CTA FINAL styling verhuisd naar components.css (universeel patroon) */
.intro__link {
  margin-top: 16px;
}

/* ==========================================================================
 * RESPONSIVE — DIENST
 * ========================================================================== */
@media (max-width: 1024px) {
  /* Op tablet/mobile: 2-koloms voor 3 en 4 stappen (symmetrisch). 5 stappen
     wordt 1-koloms — anders krijg je een asymmetrische 2+2+1 indeling. */
  .aanpak__grid,
  .aanpak__grid:has(.aanpak__stap:nth-child(3)):not(:has(.aanpak__stap:nth-child(4))) {
    grid-template-columns: repeat(2, 1fr);
  }
  .aanpak__grid:has(.aanpak__stap:nth-child(5)) {
    grid-template-columns: 1fr;
  }
  .aanpak__grid > .aanpak__stap,
  .aanpak__grid:has(.aanpak__stap:nth-child(5)) > .aanpak__stap,
  .aanpak__grid:has(.aanpak__stap:nth-child(5)) > .aanpak__stap:nth-child(n+4) {
    grid-column: auto;
  }
  /* 2-koloms varianten: borders + stack-volgorde */
  .aanpak__grid:not(:has(.aanpak__stap:nth-child(5))) .aanpak__stap:nth-child(2n) {
    border-right: none;
  }
  .aanpak__grid:not(:has(.aanpak__stap:nth-child(5))) .aanpak__stap:nth-child(n+3) {
    border-top: 1px solid var(--border);
  }
  /* 1-koloms variant (5 stappen): elke stap onder elkaar met bottom-border */
  .aanpak__grid:has(.aanpak__stap:nth-child(5)) .aanpak__stap {
    border-right: none;
    border-top: none;
    border-bottom: 1px solid var(--border);
  }
  .aanpak__grid:has(.aanpak__stap:nth-child(5)) .aanpak__stap:last-child {
    border-bottom: none;
  }
  .homepage-v2.is-hybrid .aanpak__grid:has(.aanpak__stap:nth-child(5)) .aanpak__stap {
    border-bottom-color: var(--light-border);
  }
  .intro__foto {
    width: 100%;
    opacity: 0.25;
  }
  .intro__inner {
    grid-template-columns: 1fr;
  }
  .deliverables__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .deliverables__stat {
    right: 0;
  }
  .verg-grid {
    grid-template-columns: 1fr;
  }
  .calc-mid__block {
    grid-template-columns: 1fr;
    padding: 48px;
    gap: 40px;
  }
}

@media (max-width: 640px) {
  .breadcrumb__inner {
    padding: 0 var(--pad);
  }
  .intro {
    padding: var(--section-pad-y-sm) 0;
  }
  .intro__big {
    font-size: clamp(28px, 8vw, 44px);
  }
  .intro__big .dim {
    color: var(--text-faint);
  }
  .intro__body {
    font-size: 15px;
  }
  .aanpak {
    padding: var(--section-pad-y-sm) 0;
  }
  .aanpak__grid {
    grid-template-columns: 1fr;
  }
  .aanpak__stap {
    border-right: none;
    border-bottom: 1px solid var(--border);
    opacity: 1;
    filter: none;
  }
  .aanpak__stap:last-child {
    border-bottom: none;
  }
  .aanpak__connector {
    display: none;
  }
  .sec-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .aanpak__stats {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }
  .aanpak__stat-divider {
    display: none;
  }
  .aanpak__stat {
    padding: 0;
  }
  .deliverables {
    padding: var(--section-pad-y-sm) 0;
  }
  .deliverables__foto-wrap {
    aspect-ratio: 4/3;
  }
  .deliverables__stat {
    right: 0;
    top: 16px;
    padding: 14px 18px;
  }
  .deliverables__stat-num {
    font-size: 22px;
  }
  .deliverables__quote {
    padding: 24px 20px;
  }
  .deliverables__quote-text {
    font-size: 14px;
  }
  .vergelijking {
    padding: var(--section-pad-y-sm) 0;
  }
  .verg-col {
    padding: 32px 24px;
  }
  .calc-mid__block {
    padding: 32px 24px;
  }
  .calc-mid__title {
    font-size: clamp(22px, 5vw, 30px);
  }
  .cta-final {
    padding: 64px var(--pad);
  }
  .cta-final .cta-title {
    font-size: clamp(36px, 10vw, 64px);
    letter-spacing: -2px;
  }
  .cta-final .cta-bg {
    color: #1a1a1a;
    top: 32%;
  }
  .cta-final .cta-buttons {
    flex-direction: column;
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aanpak__stap {
    opacity: 1 !important;
    filter: none !important;
  }
  .deliverable-item {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
 * SUBDIENST — Hero variant
 * ========================================================================== */
.hero--subdienst {
  display: block;
  min-height: auto;
  padding: 100px 0 80px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.hero--subdienst .hero__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.hero--subdienst .hero-img {
  position: relative;
  inset: auto;
  background: none;
}
.hero--subdienst .hero-img::before,
.hero--subdienst .hero-img::after {
  display: none;
}
.hero--subdienst .hero-img-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
}
.hero--subdienst .hero-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) grayscale(15%);
}
.hero--subdienst .hero-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--dark) 0%, transparent 40%);
  z-index: 2;
}
.hero--subdienst .hero-headline {
  font-size: clamp(44px, 5.5vw, 80px);
  margin-bottom: 28px;
}
.hero--subdienst .hero-sub {
  font-size: 17px;
  color: var(--text-subtle);
  margin-bottom: 40px;
  max-width: 480px;
}
.hero-badge {
  position: absolute;
  bottom: -20px;
  left: 32px;
  background: var(--pink);
  padding: 20px 28px;
  z-index: 3;
}
.hero-badge-num {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  color: #fff;
}
.hero-badge-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 4px;
}

/* ==========================================================================
 * SUBDIENST — Intro (hergebruikt .intro maar met subdienst-specifiek)
 * ========================================================================== */
.intro-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.intro-content h2 {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 900;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
  line-height: 1.2;
}
/* 2e h2 in intro-content krijgt extra ruimte boven (sectie-pauze) */
.intro-content h2 + .intro-body + h2,
.intro-content h2.intro-content__h2--gap {
  margin-top: 40px;
}
.intro-content h2 span {
  color: var(--pink);
}
.intro-body {
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-subtle);
  margin-bottom: 20px;
}
.intro-body strong {
  color: var(--text);
}
.intro-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0 32px;
}
.intro-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--text-subtle);
}
.intro-list-item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
  flex-shrink: 0;
  margin-top: 8px;
}
.intro-foto {
  position: relative;
}
.intro-foto-wrap {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
}
.intro-foto-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.65) grayscale(15%);
}
.intro-foto::before {
  content: '';
  position: absolute;
  top: 0;
  left: -3px;
  width: 3px;
  height: 80px;
  background: var(--pink);
  z-index: 2;
}

/* Subdienst sec-header: kleinere label margin dan homepage */
.voor-wie .sec-lbl,
.aanpak .sec-lbl,
.cases .sec-lbl {
  margin-bottom: 16px;
}

/* ==========================================================================
 * SUBDIENST — Twijfel
 * ========================================================================== */
.twijfel {
  padding: 80px 0;
  border-bottom: 1px solid var(--border);
  background: var(--dark-card);
  text-align: center;
}
.twijfel-title {
  font-family: var(--font-heading);
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.2;
  margin-bottom: 12px;
}
.twijfel-title span {
  color: var(--pink);
}
.twijfel-sub {
  font-size: 15px;
  color: var(--text-faint);
  margin-bottom: 32px;
}

/* ==========================================================================
 * SUBDIENST — Voor wie
 * ========================================================================== */
.voor-wie {
  padding: var(--section-pad-y) 0;
  border-bottom: 1px solid var(--border);
}
.vw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--border);
  margin-top: 0;
}
.vw-card {
  /* Button reset (was div) */
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  text-align: left;
  border: none;
  border-radius: 0;
  /* Component styling */
  position: relative;
  background: var(--dark-card);
  padding: 40px 32px;
  cursor: pointer;
  transition: background 0.3s;
  border-left: 3px solid transparent;
}
.vw-card:hover {
  background: #111;
}
.vw-card.vw-active {
  background: #111;
  border-left-color: var(--pink);
}
/* "+" indicator in rechterbovenhoek — maakt zichtbaar dat de kaart
   klikbaar is (click toggles open/dicht). Verandert naar "×" bij actief. */
.vw-card::after {
  content: '+';
  position: absolute;
  top: 24px;
  right: 24px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(196, 0, 88, 0.12);
  color: var(--pink);
  font-size: 22px;
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, transform 0.3s;
}
.vw-card:hover::after {
  background: rgba(196, 0, 88, 0.22);
}
.vw-card.vw-active::after {
  content: '×';
  background: var(--pink);
  color: #fff;
}
/* In light mode subtieler ringetje */
.is-hybrid .vw-card::after {
  background: rgba(196, 0, 88, 0.08);
}
.is-hybrid .vw-card:hover::after {
  background: rgba(196, 0, 88, 0.18);
}
.is-hybrid .vw-card.vw-active::after {
  background: var(--pink);
  color: #fff;
}
.vw-card-num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 16px;
}
.vw-card-title {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.3px;
  margin-bottom: 0;
  line-height: 1.2;
  color: var(--text);
}
.vw-detail {
  display: none;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.vw-card.vw-active .vw-detail {
  display: block;
}
.vw-detail p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text-subtle);
  margin-bottom: 12px;
}
.vw-detail p strong {
  color: var(--text);
}

/* ==========================================================================
 * SUBDIENST — Aanpak stappen (niet-GSAP variant)
 * ========================================================================== */
.aanpak-steps {
  display: flex;
  flex-direction: column;
  margin-top: 64px;
}
.aanpak-step {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 32px 0;
  border-top: 1px solid var(--border);
  transition: background 0.3s, padding 0.3s;
}
.aanpak-step:last-child {
  border-bottom: 1px solid var(--border);
}
.aanpak-step-num {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -2px;
  color: var(--text-dim);
  line-height: 1;
}
.aanpak-step-name {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}
.aanpak-step-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-faint);
  max-width: 560px;
}
.aanpak-step-result {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pink);
  white-space: nowrap;
}

/* Tijdlijn trigger */
.tl-trigger-wrap {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 24px;
}
.tl-trigger-wrap p {
  font-size: 14px;
  color: var(--text-faint);
}
.tl-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text);
  background: none;
  border: 1px solid var(--border);
  padding: 12px 24px;
  cursor: pointer;
  border-radius: 2px;
  transition: border-color 0.2s;
  font-family: inherit;
}
.tl-trigger-btn:hover {
  border-color: var(--pink);
}
.tl-trigger-btn span {
  color: var(--pink);
}

/* ==========================================================================
 * SUBDIENST — Tijdlijn overlay
 * ========================================================================== */
.tl-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.tl-overlay.open {
  display: flex;
}
.tl-modal {
  background: var(--dark);
  border: 1px solid var(--border);
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tl-head {
  padding: 32px 40px 28px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-shrink: 0;
}
.tl-head-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 8px;
}
.tl-head-title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.tl-head-sub {
  font-size: 13px;
  color: var(--text-faint);
  margin-top: 4px;
}
.tl-close {
  background: none;
  border: none;
  color: var(--text-num);
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}
.tl-close:hover {
  color: var(--text);
}
.tl-nav {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
}
.tl-tab {
  flex: 1;
  min-width: 90px;
  padding: 16px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-num);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  text-align: center;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.tl-tab:hover {
  color: var(--text-subtle);
}
.tl-tab.active {
  color: var(--pink);
  border-bottom-color: var(--pink);
}
.tl-body {
  padding: 40px;
  flex: 1;
  overflow-y: auto;
}
.tl-week {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 10px;
}
.tl-titel {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
  line-height: 1.1;
}
.tl-tekst {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-subtle);
  margin-bottom: 28px;
  max-width: 580px;
}
.tl-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-bottom: 28px;
}
.tl-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--dark-card);
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-muted);
}
.tl-item-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
  flex-shrink: 0;
}
.tl-resultaat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(196,0,88,0.08);
  border: 1px solid rgba(196,0,88,0.2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--pink);
}
.tl-foot {
  padding: 20px 40px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.tl-dots {
  display: flex;
  gap: 8px;
}
.tl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1e1e1e;
  cursor: pointer;
  transition: background 0.2s;
}
.tl-dot.active {
  background: var(--pink);
}
.tl-btns {
  display: flex;
  gap: 8px;
}
.tl-btn-prev {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-faint);
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: border-color 0.2s, color 0.2s;
  font-family: inherit;
}
.tl-btn-prev:hover {
  border-color: var(--text-faint);
  color: var(--text);
}
.tl-btn-next {
  background: var(--pink);
  border: 1px solid var(--pink);
  color: #fff;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: transform 0.2s, box-shadow 0.2s;
  font-family: inherit;
}
.tl-btn-next:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(196,0,88,0.3);
}

/* ==========================================================================
 * SUBDIENST — Prijs
 * ========================================================================== */
.prijs {
  padding: var(--section-pad-y) 0;
  border-bottom: 1px solid var(--border);
}
.prijs-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.prijs-content h2 {
  font-family: var(--font-heading);
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 900;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
  line-height: 1.2;
}
.prijs-content h2 span {
  color: var(--pink);
}
.prijs-body {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text-subtle);
  margin-bottom: 20px;
}
.prijs-body strong {
  color: var(--text);
}
.prijs-calc-block {
  background: var(--dark-card);
  border: 1px solid var(--border);
  padding: 32px;
  margin: 32px 0;
}
.prijs-calc-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 12px;
  display: block;
}
.prijs-calc-title {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.5px;
  margin-bottom: 8px;
}
.prijs-calc-sub {
  font-size: 14px;
  color: var(--text-faint);
  line-height: 1.7;
  margin-bottom: 24px;
}
.prijs-calc-meta {
  font-size: 11px;
  color: var(--text-num);
  margin-top: 12px;
}
.prijs-cta-block {
  background: var(--dark-card);
  border: 1px solid var(--border);
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 400px;
}
.prijs-cta-block h3 {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
  line-height: 1.2;
}
.prijs-cta-block h3 span {
  color: var(--pink);
}
.prijs-cta-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-faint);
  margin-bottom: 32px;
}
.prijs-meta {
  font-size: 11px;
  color: var(--text-num);
  margin-top: 12px;
}

/* ==========================================================================
 * SUBDIENST — Gerelateerde diensten
 * ========================================================================== */
.gerelateerd {
  padding: 80px 0;
  border-bottom: 1px solid var(--border);
}
.gerelateerd-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-num);
  margin-bottom: 24px;
}
.gerelateerd-links {
  display: flex;
  gap: 2px;
}
.gerelateerd-link {
  flex: 1;
  padding: 24px 28px;
  background: var(--dark-card);
  border: 1px solid var(--border);
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.3s, border-color 0.3s;
}
.gerelateerd-link:hover {
  background: #111;
  border-color: var(--text-faint);
}
.gerelateerd-link-name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.gerelateerd-link-sub {
  font-size: 12px;
  color: var(--text-faint);
}
.gerelateerd-link-arrow {
  font-size: 18px;
  color: var(--text-faint);
  transition: color 0.2s;
}
.gerelateerd-link:hover .gerelateerd-link-arrow {
  color: var(--pink);
}

/* ==========================================================================
 * SUBDIENST — Responsive
 * ========================================================================== */
@media (max-width: 1024px) {
  .hero--subdienst .hero__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .intro-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .vw-grid {
    grid-template-columns: 1fr;
  }
  .aanpak-step {
    grid-template-columns: 60px 1fr;
    gap: 20px;
  }
  .aanpak-step-result {
    grid-column: 2;
  }
  .prijs-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .gerelateerd-links {
    flex-direction: column;
  }
  .tl-items {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero--subdienst {
    padding: 80px 0 60px;
  }
  .hero-badge {
    bottom: -12px;
    left: 16px;
    padding: 14px 20px;
  }
  .hero-badge-num {
    font-size: 22px;
  }
  .voor-wie {
    padding: 80px 0;
  }
  .vw-card {
    padding: 28px 20px;
  }
  .aanpak-step {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .aanpak-step-num {
    font-size: 24px;
  }
  .aanpak-step-result {
    grid-column: 1;
  }
  .tl-trigger-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
  .tl-head {
    padding: 24px 20px 20px;
  }
  .tl-body {
    padding: 24px 20px;
  }
  .tl-foot {
    padding: 16px 20px;
  }
  .prijs-cta-block {
    padding: 32px;
    min-height: auto;
  }
}

/* ==========================================================================
 * TEAM — Hero variant
 * ========================================================================== */
.hero--team {
  display: block;
  min-height: auto;
  padding: 100px 0 80px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.hero--team .hero__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.hero--team .hero-headline {
  font-size: clamp(52px, 7vw, 96px);
  line-height: 0.92;
  letter-spacing: -3px;
  margin-bottom: 40px;
}
.hero--team .hero-img {
  display: none;
}
.hero--team .hero-img::before,
.hero--team .hero-img::after {
  display: none;
}
.hero-sub-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.hero-stat {
  text-align: right;
}
.hero-stat-num {
  font-family: var(--font-heading);
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 900;
  letter-spacing: -3px;
  line-height: 1;
}
.hero-stat-num span {
  color: var(--pink);
}
.hero-stat-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-num);
  margin-top: 6px;
}

/* ==========================================================================
 * TEAM — Grid
 * ========================================================================== */
.team {
  padding: 0 0 120px;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--border);
}
.team-row-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  background: var(--border);
  max-width: calc(66.666% + 2px);
  margin: 2px auto 0;
}

/* ==========================================================================
 * TEAM — Card
 * ========================================================================== */
.team-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--dark);
  aspect-ratio: 3/4;
}
.team-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) brightness(0.75);
  transition: filter 0.6s cubic-bezier(0.25,0.46,0.45,0.94), transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
  transform-origin: center;
}
.team-card:hover .team-card-img {
  filter: grayscale(0%) brightness(0.85);
  transform: scale(1.04);
}

/* Base — altijd zichtbaar */
.team-card-base {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 32px;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
  transition: opacity 0.3s;
}
.team-card:hover .team-card-base {
  opacity: 0;
}
.team-card-name-sm {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: var(--text);
  margin-bottom: 4px;
}
.team-card-role-sm {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pink);
}

/* Overlay */
.team-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px 32px;
}
.team-card:hover .team-card-overlay {
  opacity: 1;
}

/* Overlay elementen — staggered */
.team-card-name {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--text);
  margin-bottom: 4px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-slow) 0.05s, transform var(--t-slow) 0.05s;
}
.team-card:hover .team-card-name {
  opacity: 1;
  transform: translateY(0);
}
.team-card-role {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-slow) 0.08s, transform var(--t-slow) 0.08s;
}
.team-card:hover .team-card-role {
  opacity: 1;
  transform: translateY(0);
}
.team-card-quote {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-slow) 0.1s, transform var(--t-slow) 0.1s;
}
.team-card:hover .team-card-quote {
  opacity: 1;
  transform: translateY(0);
}
.team-card-quote::before {
  content: '\201C';
  color: var(--pink);
  font-size: 24px;
  line-height: 0;
  vertical-align: -8px;
  margin-right: 4px;
}
.team-card-bio {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-slow) 0.15s, transform var(--t-slow) 0.15s;
}
.team-card:hover .team-card-bio {
  opacity: 1;
  transform: translateY(0);
}
.team-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-slow) 0.2s, transform var(--t-slow) 0.2s;
}
.team-card:hover .team-card-tags {
  opacity: 1;
  transform: translateY(0);
}
.team-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: var(--pink);
  padding: 4px 10px;
  border-radius: 2px;
}

/* ==========================================================================
 * TEAM — Vacatures
 * ========================================================================== */
.vacatures {
  padding: var(--section-pad-y) 0;
  border-bottom: 1px solid var(--border);
}
.vacatures-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.vacatures-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 16px;
  display: block;
}
.vacatures-title {
  font-family: var(--font-heading);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 900;
  letter-spacing: -2px;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 24px;
}
.vacatures-title .outline {
  -webkit-text-stroke: 2px var(--text);
  color: transparent;
}
.vacatures-sub {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-subtle);
  margin-bottom: 40px;
  max-width: 440px;
}
.vacatures-open {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vacature-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 28px;
  background: var(--dark-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--pink);
  text-decoration: none;
  transition: background 0.3s, border-color 0.3s;
}
.vacature-item:hover {
  background: #111;
  border-top-color: var(--text-faint);
  border-right-color: var(--text-faint);
  border-bottom-color: var(--text-faint);
}
.vacature-naam {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.vacature-type {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.vacature-arrow {
  color: var(--text-faint);
  transition: color 0.2s;
}
.vacature-item:hover .vacature-arrow {
  color: var(--pink);
}

/* ==========================================================================
 * TEAM — Responsive
 * ========================================================================== */
@media (max-width: 1024px) {
  .hero--team .hero__inner {
    padding: 0 var(--pad);
  }
  .hero-sub-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .hero-stat {
    text-align: left;
  }
  .team-grid {
    grid-template-columns: 1fr;
  }
  .team-row-2 {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .vacatures-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 640px) {
  .hero--team {
    padding: 80px 0 60px;
  }
  .team-card-overlay {
    padding: 24px 20px;
  }
  .team-card-base {
    padding: 20px;
  }
}

/* ==========================================================================
 * OVER ONS — Hero variant
 * ========================================================================== */
/* Over-ons hero gebruikt de homepage hero baseline (.hero / .hero-left /
   .hero-right / .hero-img / .hero-video). Enige verschil: geen hero-stats
   balk onderin, dus iets minder padding-bottom. */
.hero--over-ons .hero-left {
  padding-bottom: 80px;
}

/* ==========================================================================
 * OVER ONS — Stats
 * ========================================================================== */
.stats {
  border-bottom: 1px solid var(--border);
}
.stats-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stat {
  padding: 56px 0;
  border-right: 1px solid var(--border);
  padding-right: 48px;
  padding-left: 48px;
}
.stat:first-child {
  padding-left: 0;
}
.stat:last-child {
  border-right: none;
}
.stat-num {
  font-family: var(--font-heading);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 900;
  letter-spacing: -2px;
  line-height: 1;
  color: var(--text);
  margin-bottom: 8px;
}
.stat-num span {
  color: var(--pink);
}
.stat-lbl {
  font-size: 13px;
  color: var(--text-faint);
  line-height: 1.5;
}

/* ==========================================================================
 * OVER ONS — Verhaal gebruikt de homepage .statement structuur
 * (zie style.css). Eigen modifier .statement--verhaal is alleen een
 * naam-hook voor eventuele toekomstige kleuraanpassingen.
 *
 * ==========================================================================
 * OVER ONS — Statement
 * Eigen modifier .statement--page om collision met homepage .statement
 * te voorkomen. Beide componenten hebben totaal andere structuur.
 * ========================================================================== */
.statement--page {
  padding: var(--section-pad-y) 0;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.statement-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-heading);
  font-size: clamp(80px, 16vw, 220px);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--ghost-text);
  white-space: nowrap;
  letter-spacing: -8px;
  user-select: none;
  pointer-events: none;
  line-height: 1;
}
.statement-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  position: relative;
  z-index: 2;
}
.statement-title {
  font-family: var(--font-heading);
  font-size: clamp(48px, 7vw, 100px);
  font-weight: 900;
  letter-spacing: -3px;
  text-transform: uppercase;
  line-height: 0.95;
}
.statement-title .dim {
  color: var(--text-dim);
}
.statement-title .accent {
  color: var(--pink);
}
.statement-sub {
  font-size: 16px;
  color: var(--text-faint);
  margin-top: 32px;
  max-width: 480px;
  line-height: 1.8;
}

/* ==========================================================================
 * OVER ONS — Team preview
 * ========================================================================== */
.team-preview {
  padding: var(--section-pad-y) 0;
  border-bottom: 1px solid var(--border);
}
.team-preview__list-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.team-preview-header {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
}
.team-preview-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 12px;
}
.team-preview-title {
  font-family: var(--font-heading);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 900;
  letter-spacing: -2px;
  text-transform: uppercase;
  line-height: 1;
}
.team-preview-sub {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-num);
  max-width: 320px;
  line-height: 1.5;
  text-align: right;
  letter-spacing: -0.3px;
}
.team-preview-sub span {
  color: var(--text);
}
.team-preview-sub em {
  color: var(--pink);
  font-style: normal;
}
.team-preview .team-grid {
  grid-template-columns: repeat(5, 1fr);
}

.team-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2/3;
  background: var(--dark-card);
}
.team-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) brightness(0.7);
  transition: filter 0.5s ease, transform 0.5s ease;
}
.team-thumb:hover img {
  filter: grayscale(0%) brightness(0.85);
  transform: scale(1.04);
}
.team-thumb-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
}
.team-thumb-name {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.team-thumb-role {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pink);
}
.team-cta {
  max-width: var(--max);
  margin: 0 auto;
  padding: 40px var(--pad) 0;
  display: flex;
  justify-content: center;
}

/* ==========================================================================
 * OVER ONS — Reviews
 * ========================================================================== */
.reviews {
  padding: var(--section-pad-y) 0;
  border-bottom: 1px solid var(--border);
}
.reviews-header {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 64px;
}
.reviews-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 12px;
}
.reviews-title {
  font-family: var(--font-heading);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 900;
  letter-spacing: -2px;
  text-transform: uppercase;
  line-height: 1;
}
/* Reviews grid op over-ons gebruikt de homepage .review-card styling
   (zie style.css). Hier alleen de container layout: grid 3-koloms met
   gap, en width auto op de card (homepage gebruikt vaste 380px voor
   horizontale scroll). */
.reviews-grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.reviews-grid .review-card {
  width: auto;
}

/* ==========================================================================
 * OVER ONS — Voor wie
 * ========================================================================== */
.voor-wie-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.voor-wie-lbl {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 16px;
  display: block;
}
.voor-wie-title {
  font-family: var(--font-heading);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 900;
  letter-spacing: -2px;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 32px;
}
.voor-wie-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 32px;
}
.voor-wie-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--dark-card);
  border: 1px solid var(--border);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  transition: background 0.3s, color 0.2s;
}
.voor-wie-item:hover {
  background: #111;
  color: var(--text);
}
.voor-wie-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
  flex-shrink: 0;
}
.voor-wie-foto {
  position: relative;
}
.voor-wie-foto-wrap {
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
}
.voor-wie-foto-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.65) grayscale(15%);
}
.voor-wie-foto::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, var(--dark) 0%, transparent 100%);
  z-index: 2;
}
.voor-wie-quote {
  position: absolute;
  bottom: 28px;
  left: 28px;
  right: 28px;
  z-index: 3;
}
.voor-wie-quote-text {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 6px;
}
.voor-wie-quote-text span {
  color: var(--pink);
}
.voor-wie-quote-sub {
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ==========================================================================
 * OVER ONS — Responsive
 * ========================================================================== */
@media (max-width: 1024px) {
  .stats-inner {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat:nth-child(2) {
    border-right: none;
  }
  .team-preview-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .team-preview-sub {
    text-align: left;
  }
  .team-preview .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .reviews-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .voor-wie-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 640px) {
  .stats-inner {
    grid-template-columns: 1fr;
  }
  .stat {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 32px 0;
  }
  .stat:last-child {
    border-bottom: none;
  }
  .team-preview .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
 * HYBRID THEME — Team pagina (lichte secties)
 * ========================================================================== */

/* Team grid sectie — lichte achtergrond */
.is-hybrid .team {
  background: var(--light-bg);
}
.is-hybrid .team-grid,
.is-hybrid .team-row-2 {
  background: var(--light-border);
}
.is-hybrid .team-card {
  background: var(--light-bg);
}
.is-hybrid .team-card-img {
  filter: grayscale(20%) brightness(0.95);
}
.is-hybrid .team-card:hover .team-card-img {
  filter: grayscale(0%) brightness(1);
}

/* Vacatures sectie — lichte achtergrond, donkere items voor contrast */
.is-hybrid .vacatures {
  background: var(--light-bg);
  border-bottom-color: var(--light-border);
}
.is-hybrid .vacatures-title { color: var(--light-text); }
.is-hybrid .vacatures-title .outline {
  -webkit-text-stroke: 2px var(--light-text);
}
.is-hybrid .vacatures-sub { color: var(--light-muted); }

/* Vacature items — wit op licht voor card-effect. Border-left (pink stripe)
   blijft staan in light; alleen de overige 3 kanten krijgen de licht-border. */
.is-hybrid .vacature-item {
  background: #fff;
  border-top-color: var(--light-border);
  border-right-color: var(--light-border);
  border-bottom-color: var(--light-border);
}
.is-hybrid .vacature-item:hover {
  background: var(--light-bg2);
  border-top-color: var(--light-text-num);
  border-right-color: var(--light-text-num);
  border-bottom-color: var(--light-text-num);
}
.is-hybrid .vacature-naam { color: var(--light-text); }
.is-hybrid .vacature-type { color: var(--light-text-faint); }
.is-hybrid .vacature-arrow { color: var(--light-text-num); }

/* Smooth transitions tussen donker en licht */
.is-hybrid .team,
.is-hybrid .vacatures {
  transition: background var(--t-slow), border-color var(--t-slow);
}
.is-hybrid .team-card-img,
.is-hybrid .vacature-item {
  transition: filter 0.6s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.6s cubic-bezier(0.25,0.46,0.45,0.94),
              background var(--t-slow), border-color var(--t-slow);
}

/* ==========================================================================
 * HYBRID THEME — Over ons pagina (lichte secties)
 * ========================================================================== */

/* Verhaal: gebruikt nu de homepage .statement classes (.is-hybrid .statement
   regels in style.css regelen kleuren in light). Geen aparte overrides meer.

   .statement--page (apart statement-blok op over-ons) krijgt in light een
   anthracite rust-zone bg — voelt als de CTA-final boven de footer. Scope
   .homepage-v2.is-hybrid om gelijke specificity te halen met de homepage
   .homepage-v2.is-hybrid .statement override in style.css. */
.homepage-v2.is-hybrid .statement--page {
  background: var(--anthracite);
  border-bottom-color: transparent;
}
.homepage-v2.is-hybrid .statement--page .statement-bg { color: #252a2e; }
.homepage-v2.is-hybrid .statement--page .statement-title { color: var(--text); }
.homepage-v2.is-hybrid .statement--page .statement-title .outline {
  -webkit-text-stroke-color: var(--text);
  color: transparent;
}
.homepage-v2.is-hybrid .statement--page .statement-title .dim { color: var(--text-dim); }
.homepage-v2.is-hybrid .statement--page .statement-title .accent { color: var(--pink); }
.homepage-v2.is-hybrid .statement--page .statement-sub { color: var(--text-muted); }

/* Voor-wie sectie op over-ons in light — items wit met pink dot, foto-blok
   blijft dark zodat de witte quote leesbaar over de foto valt. */
.homepage-v2.is-hybrid .voor-wie {
  background: var(--light-bg);
  border-bottom-color: var(--light-border);
}
.homepage-v2.is-hybrid .voor-wie-title { color: var(--light-text); }
.homepage-v2.is-hybrid .voor-wie-list .voor-wie-item {
  background: #fff;
  border-color: var(--light-border);
  color: var(--light-muted);
}
.homepage-v2.is-hybrid .voor-wie-list .voor-wie-item:hover {
  background: var(--light-bg2);
  color: var(--light-text);
}

/* Stats sectie op over-ons — borders subtiel in light (waren --border = dark). */
.homepage-v2.is-hybrid .stats {
  border-bottom-color: var(--light-border);
}
.homepage-v2.is-hybrid .stat {
  border-right-color: var(--light-border);
  border-bottom-color: var(--light-border);
}
.homepage-v2.is-hybrid .stat-num { color: var(--light-text); }
.homepage-v2.is-hybrid .stat-lbl { color: var(--light-text-num); }

/* Team-preview — analoog aan team grid */
.is-hybrid .team-preview {
  background: var(--light-bg);
  border-bottom-color: var(--light-border);
}
.is-hybrid .team-preview-title { color: var(--light-text); }
.is-hybrid .team-preview-sub { color: var(--light-muted); }
.is-hybrid .team-preview-sub span { color: var(--light-text); }
.is-hybrid .team-preview .btn-ghost { color: var(--light-text); }
.is-hybrid .team-preview .team-grid { background: var(--light-border); }
.is-hybrid .team-thumb { background: var(--light-bg); }
.is-hybrid .team-thumb img {
  filter: grayscale(20%) brightness(0.95);
}
.is-hybrid .team-thumb:hover img {
  filter: grayscale(0%) brightness(1);
}

/* Reviews sectie — lichte achtergrond, donkere cards blijven voor contrast */
.is-hybrid .reviews {
  background: var(--light-bg);
  border-bottom-color: var(--light-border);
}
.is-hybrid .reviews-title { color: var(--light-text); }
/* Cards blijven --dark-card achtergrond met hun donkere styling */
/* Over-ons .statement--page heeft eigen modifier class — geen leakage meer
   van homepage .statement hybride styling, dus geen override-band-aid nodig. */

/* Hero accent feedback bij toggle (team hero — dienst hero's gebruiken nu
   .hero--dienst-v2 met homepage hero baseline, die heeft zijn eigen
   transitions via .homepage-v2.is-hybrid scope in style.css). */
.is-hybrid .hero--team .hero-sub {
  color: #999;
}
.is-hybrid .hero--team {
  border-bottom-color: var(--light-border);
}
.is-hybrid .hero-stat-lbl { color: var(--text-muted); }
.hero--team,
.hero--team .hero-sub,
.hero-stat-lbl {
  transition: border-color var(--t-slow), color var(--t-slow);
}

/* Logos slider — lichte achtergrond, logos worden zichtbaarder */
.is-hybrid .logos {
  background: var(--light-bg);
  border-bottom-color: var(--light-border);
  /* Mask weghalen op .logos zelf — anders zie je de donkere body
     doorheen aan de zijkanten. Mask wordt op .logos-track-wrap gezet. */
  -webkit-mask-image: none;
          mask-image: none;
}
.is-hybrid .logos-track-wrap {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.is-hybrid .logos-lbl { color: var(--light-text-faint); }
.is-hybrid .logo-item { color: var(--light-text); opacity: 0.6; }
.is-hybrid .logo-item:hover { opacity: 1; color: var(--pink); }

/* Smooth transitions over-ons */
.is-hybrid .team-preview,
.is-hybrid .reviews,
.is-hybrid .logos {
  transition: background var(--t-slow), border-color var(--t-slow);
}
.is-hybrid .team-thumb img {
  transition: filter 0.6s cubic-bezier(0.25,0.46,0.45,0.94),
              transform 0.5s ease;
}

/* ==========================================================================
 * HYBRID THEME — Dienst Websites pagina (lichte secties)
 * Cases en FAQ werken al via homepage hybride CSS (.is-hybrid .cases en
 * .is-hybrid .faq in style.css). Hier alleen intro + deliverables.
 * ========================================================================== */

/* Intro sectie — lichte achtergrond, foto warmer, gradients aanpassen */
.is-hybrid .intro {
  background: var(--light-bg);
  border-bottom-color: var(--light-border);
}
.is-hybrid .intro__big { color: var(--light-text); }
.is-hybrid .intro__big .dim { color: var(--light-text-dim); }
.is-hybrid .intro__body { color: var(--light-muted); }
.is-hybrid .intro__body strong { color: var(--light-text); }
.is-hybrid .intro .btn-ghost { color: var(--light-text); }
.is-hybrid .intro__foto img {
  filter: brightness(0.85) grayscale(15%);
}
.is-hybrid .intro__foto::before {
  background: linear-gradient(to right, var(--light-bg), transparent);
}
.is-hybrid .intro__foto::after {
  background: linear-gradient(to top, var(--light-bg) 0%, transparent 60%);
}

/* Deliverables sectie — lichte achtergrond, lijst items leesbaar */
.is-hybrid .deliverables {
  background: var(--light-bg);
  border-bottom-color: var(--light-border);
}
.is-hybrid .deliverables .sec-num { color: var(--light-text-num); }
.is-hybrid .deliverables .sec-title { color: var(--light-text); }
.is-hybrid .deliverables__desc { color: var(--light-muted); }
.is-hybrid .deliverables__foto-wrap img {
  filter: brightness(0.85) grayscale(15%);
}
/* Quote overlay blijft donker (zit op donkere foto) */
.is-hybrid .deliverable-item {
  border-top-color: var(--light-border);
}
.is-hybrid .deliverable-item:last-child {
  border-bottom-color: var(--light-border);
}
.is-hybrid .deliverable-item__name { color: var(--light-text); }
.is-hybrid .deliverable-item__desc { color: var(--light-muted); }
/* deliverables__stat blijft pink */

/* Smooth transitions */
.is-hybrid .intro,
.is-hybrid .deliverables {
  transition: background var(--t-slow), border-color var(--t-slow);
}
.is-hybrid .intro__foto img,
.is-hybrid .deliverables__foto-wrap img {
  transition: filter 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ==========================================================================
 * HYBRID THEME — Subdienst pagina (lichte secties)
 * Cases en FAQ werken al via homepage hybride CSS.
 * .intro background werkt al via dienst-websites hybride CSS.
 * Voor-wie body class scope om over-ons niet te raken.
 * ========================================================================== */

/* Intro (subdienst variant) — content classes verschillen van dienst-websites */
/* Algemene h2 vangnet binnen intro — pakt alle headings die anders wit (van body) erven */
.is-hybrid .intro h2 { color: var(--light-text); }
.is-hybrid .intro h2 span { color: var(--pink); }
.is-hybrid .intro-content h2 { color: var(--light-text); }
.is-hybrid .intro-body { color: var(--light-muted); }
.is-hybrid .intro-body strong { color: var(--light-text); }
.is-hybrid .intro-list-item { color: var(--light-muted); }
.is-hybrid .intro-foto-wrap img {
  filter: brightness(0.85) grayscale(15%);
}

/* Twijfel — tussen-CTA blok */
.is-hybrid .twijfel {
  background: var(--light-bg);
  border-bottom-color: var(--light-border);
}
.is-hybrid .twijfel-title { color: var(--light-text); }
.is-hybrid .twijfel-sub { color: var(--light-muted); }

/* Voor-wie (subdienst variant) — modifier class .voor-wie--subdienst
   zodat over-ons .voor-wie donker blijft (gebruikt geen modifier) */
.is-hybrid .voor-wie--subdienst {
  background: var(--light-bg);
  border-bottom-color: var(--light-border);
}
.is-hybrid .voor-wie--subdienst .sec-num { color: var(--light-text-num); }
.is-hybrid .voor-wie--subdienst .sec-title { color: var(--light-text); }
.is-hybrid .voor-wie--subdienst .sec-header__sub { color: var(--light-muted); }
.is-hybrid .voor-wie--subdienst .vw-grid { background: var(--light-border); }
.is-hybrid .voor-wie--subdienst .vw-card { background: #fff; }
.is-hybrid .voor-wie--subdienst .vw-card:hover { background: var(--light-bg2); }
.is-hybrid .voor-wie--subdienst .vw-card.vw-active {
  background: var(--light-bg2);
  border-left-color: var(--pink);
}
.is-hybrid .voor-wie--subdienst .vw-card-num { color: var(--light-text-faint); }
.is-hybrid .voor-wie--subdienst .vw-card-title { color: var(--light-text); }
.is-hybrid .voor-wie--subdienst .vw-detail { border-top-color: var(--light-border); }
.is-hybrid .voor-wie--subdienst .vw-detail p { color: var(--light-muted); }
.is-hybrid .voor-wie--subdienst .vw-detail p strong { color: var(--light-text); }

/* Gerelateerd — links naar andere diensten */
.is-hybrid .gerelateerd {
  background: var(--light-bg);
  border-bottom-color: var(--light-border);
}
.is-hybrid .gerelateerd-lbl { color: var(--light-text-faint); }
.is-hybrid .gerelateerd-link {
  background: #fff;
  border-color: var(--light-border);
}
.is-hybrid .gerelateerd-link:hover {
  background: var(--light-bg2);
  border-color: var(--light-text-num);
}
.is-hybrid .gerelateerd-link-name { color: var(--light-text); }
.is-hybrid .gerelateerd-link-sub { color: var(--light-text-faint); }
.is-hybrid .gerelateerd-link-arrow { color: var(--light-text-num); }

/* Smooth transitions */
.is-hybrid .twijfel,
.is-hybrid .voor-wie--subdienst,
.is-hybrid .gerelateerd {
  transition: background var(--t-slow), border-color var(--t-slow);
}
.is-hybrid .intro-foto-wrap img {
  transition: filter 0.6s cubic-bezier(0.25,0.46,0.45,0.94);
}
.is-hybrid .vw-card,
.is-hybrid .gerelateerd-link {
  transition: background var(--t-slow), border-color var(--t-base);
}

/* ==========================================================================
 * WEBAPPLICATIES — Hero cinematic + specialisaties + voor-wie + techniek
 * Voor page-dienst-webapplicaties.php (en herbruikbaar voor toekomstige
 * dienst-pagina's zonder prijscalculator).
 * ========================================================================== */

/* Dienst hero variant 2 — homepage-stijl layout (.hero met .hero-left /
   .hero-right / .hero-img / .hero-video uit style.css). Enige overrides:
   tier 2 H1 ipv tier 1, en minder padding-bottom omdat dienst-hero's geen
   hero-stats balk hebben.

   H1 staat default in één kleur: outline/accent/dim/dot spans uit de
   homepage-baseline worden geneutraliseerd zodat de tekst overal de
   normale text-color erft. (Eventuele opt-in per woord kan met inline
   style of een nieuwe span-class — niet via .accent want die is hier
   geneutraliseerd voor consistency.) */
.hero--dienst-v2 .hero-headline {
  font-size: clamp(44px, 5.5vw, 80px);
}
.hero--dienst-v2 .hero-headline .outline,
.hero--dienst-v2 .hero-headline .accent,
.hero--dienst-v2 .hero-headline .dim,
.hero--dienst-v2 .hero-headline .dot,
/* Hogere specificity-variant zodat we ook in light mode winnen van de
   .homepage-v2.is-hybrid .hero-headline .accent regel in style.css. */
.homepage-v2.is-hybrid .hero--dienst-v2 .hero-headline .outline,
.homepage-v2.is-hybrid .hero--dienst-v2 .hero-headline .accent,
.homepage-v2.is-hybrid .hero--dienst-v2 .hero-headline .dim,
.homepage-v2.is-hybrid .hero--dienst-v2 .hero-headline .dot {
  color: inherit;
  -webkit-text-stroke: 0;
}
.hero--dienst-v2 .hero-left {
  padding-bottom: 80px;
}

/* Sectie-titels op dienst-pagina's ook in één kleur — zelfde regel als
   hero H1. Span-classes (outline/accent/dim/dot/sec-dot) erven de normale
   text-color. Body-scope geeft ons net iets hogere specificity zodat we
   ook in light mode winnen van de bestaande .is-hybrid overrides. */
body :is(
  .intro__big,
  .aanpak .sec-title,
  .dwa-spec .sec-title,
  .dwa-vw .sec-title,
  .dwa-tech .sec-title
) :is(.outline, .accent, .dim, .dot, .sec-dot) {
  color: inherit;
  -webkit-text-stroke: 0;
}

/* Sectie-header reuse voor dwa secties */
.dwa-spec,
.dwa-vw,
.dwa-tech {
  padding: var(--section-pad-y) 0;
  border-bottom: 1px solid var(--border);
  background: var(--dark);
}
.dwa-spec .sec-header,
.dwa-vw .sec-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  margin-bottom: 64px;
}
.dwa-spec__intro,
.dwa-vw__intro {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-faint);
  max-width: 420px;
  text-align: right;
}

/* Specialisaties: 3 grote kaarten */
/* Grid in homepage-stijl: gap tussen kaarten, geen flush trick. Cards
   krijgen radius + shadow + hover lift (zelfde patroon als svc-card,
   review-card, vw-scroll__tegel). */
.dwa-spec__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.dwa-spec__item {
  position: relative;
  overflow: hidden;
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 40px 32px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  min-height: 280px;
  transition: var(--card-transition);
}
.dwa-spec__item--link:hover {
  background: var(--dark2);
  transform: var(--card-lift);
  box-shadow: var(--card-shadow-hover);
}
/* Pink hover-line onderaan (zelfde patroon als svc-card / vw-scroll__tegel),
   alleen op linkable items want het suggereert een actie. */
.dwa-spec__item--link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow);
}
.dwa-spec__item--link:hover::after {
  transform: scaleX(1);
}
.dwa-spec__item-label {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--text);
  margin-bottom: 16px;
  transition: color var(--t-base);
}
.dwa-spec__item--link:hover .dwa-spec__item-label {
  color: var(--pink);
}
.dwa-spec__item-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-faint);
  margin: 0;
}
.dwa-spec__item-arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  color: var(--pink);
  display: inline-flex;
  transition: color var(--t-fast), transform var(--t-fast);
}
.dwa-spec__item--link:hover .dwa-spec__item-arrow {
  transform: translate(4px, -4px);
}

/* Voor wie: lijst met checkmarks */
.dwa-vw {
  background: var(--dark2);
}
.dwa-vw__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 48px;
}
.dwa-vw__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
}
.dwa-vw__item:nth-last-child(-n+2) {
  border-bottom: 1px solid var(--border);
}
.dwa-vw__check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(196, 0, 88, 0.12);
  color: var(--pink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.dwa-vw__text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

/* Techniek: titel + body links, tags rechts */
.dwa-tech__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}
.dwa-tech__body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-faint);
  margin: 24px 0 0;
}
.dwa-tech__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dwa-tech__tag {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  background: var(--dark-card);
  color: var(--text);
  border-radius: 2px;
  transition: border-color 0.2s, color 0.2s;
}
.dwa-tech__tag:hover {
  border-color: var(--pink);
  color: var(--pink);
}

/* Responsive */
@media (max-width: 1024px) {
  .dwa-spec__grid {
    grid-template-columns: 1fr;
  }
  .dwa-vw__list {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .dwa-vw__item {
    border-top: 1px solid var(--border);
  }
  .dwa-vw__item:last-child {
    border-bottom: 1px solid var(--border);
  }
  .dwa-tech__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .dwa-spec .sec-header,
  .dwa-vw .sec-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .dwa-spec__intro,
  .dwa-vw__intro {
    text-align: left;
  }
}
@media (max-width: 640px) {
  .dwa-spec, .dwa-vw, .dwa-tech { padding: 72px 0; }
}

/* Hybrid mode — alles meekleuren met de lichte modus.
   Hero kleuren in light komen al van .homepage-v2.is-hybrid .hero scope
   in style.css (zelfde mechaniek als homepage + over-ons hero). */

.is-hybrid .dwa-spec {
  background: var(--light-bg);
  border-bottom-color: var(--light-border);
}
.is-hybrid .dwa-spec .sec-num    { color: var(--light-text-num); }
.is-hybrid .dwa-spec .sec-title  { color: var(--light-text); }
.is-hybrid .dwa-spec__intro      { color: var(--light-muted); }
/* Cards in light: wit met subtiele schaduw + lichte border, lift bij hover */
.is-hybrid .dwa-spec__item {
  border-color: var(--light-border);
  box-shadow: var(--card-shadow-light);
}
.is-hybrid .dwa-spec__item--link:hover {
  box-shadow: var(--card-shadow-light-hover);
}

/* Calc-mid + vergelijking borders in light verzachten (waren --border =
   donker, te hard op cream achtergrond). */
.homepage-v2.is-hybrid .vergelijking,
.homepage-v2.is-hybrid .calc-mid {
  border-bottom-color: var(--light-border);
}
.is-hybrid .dwa-spec__item       { background: #fff; }
.is-hybrid .dwa-spec__item--link:hover { background: var(--light-bg2); }
.is-hybrid .dwa-spec__item-label { color: var(--light-text); }
.is-hybrid .dwa-spec__item-desc  { color: var(--light-muted); }
/* Arrow blijft pink in beide modes — geen light override meer. */

.is-hybrid .dwa-vw {
  background: var(--light-bg2);
  border-bottom-color: var(--light-border);
}
.is-hybrid .dwa-vw .sec-num   { color: var(--light-text-num); }
.is-hybrid .dwa-vw .sec-title { color: var(--light-text); }
.is-hybrid .dwa-vw__intro     { color: var(--light-muted); }
.is-hybrid .dwa-vw__item      { border-top-color: var(--light-border); }
.is-hybrid .dwa-vw__item:nth-last-child(-n+2) { border-bottom-color: var(--light-border); }
.is-hybrid .dwa-vw__text      { color: var(--light-text); }

.is-hybrid .dwa-tech {
  background: var(--light-bg);
  border-bottom-color: var(--light-border);
}
.is-hybrid .dwa-tech .sec-num   { color: var(--light-text-num); }
.is-hybrid .dwa-tech .sec-title { color: var(--light-text); }
.is-hybrid .dwa-tech__body      { color: var(--light-muted); }
.is-hybrid .dwa-tech__tag {
  background: #fff;
  border-color: var(--light-border);
  color: var(--light-text);
}

/* Hybrid: smooth transitions ook hier */
.is-hybrid .dwa-spec,
.is-hybrid .dwa-vw,
.is-hybrid .dwa-tech,
/* dwa-spec__item is hier expres weggelaten: de baseline transition
   bevat al alles dat nodig is voor de hover (background/transform/box-shadow).
   Een aparte is-hybrid override zonder transform/box-shadow zou de
   hover-lift "instant" maken in light mode. */
.is-hybrid .dwa-tech__tag {
  transition: background var(--t-slow), border-color var(--t-slow), color var(--t-slow);
}

/* ==========================================================================
 * PRINCIPES sectie (branding-pagina vervanger voor aanpak)
 * Editorial manifesto-stijl: genummerde rijen met grote pink italic
 * cijfers. Geen card-boxen, meer leeswerk en typografische rust.
 * ========================================================================== */

.principes {
  background: var(--dark);
  padding: var(--section-pad-y) 0;
  border-bottom: 1px solid var(--border);
}

.principes__intro {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-faint);
  max-width: 420px;
  margin: 0;
}

.principes__lijst {
  list-style: none;
  margin: 64px 0 0;
  padding: 0;
}

.principe-rij {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 40px;
  padding: 40px 0;
  border-top: 1px solid var(--border);
  align-items: start;
  transition: padding-left var(--t-base);
}

.principe-rij:last-child {
  border-bottom: 1px solid var(--border);
}

.principe-rij:hover {
  padding-left: 12px;
}

.principe-rij__num {
  font-family: var(--font-heading);
  font-size: clamp(48px, 5vw, 72px);
  font-weight: 900;
  letter-spacing: -3px;
  color: var(--pink);
  line-height: 1;
  font-style: italic;
}

.principe-rij__body {
  padding-top: 8px;
}

.principe-rij__titel {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text);
  margin: 0 0 14px;
  line-height: 1.15;
}

.principe-rij__tekst {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-faint);
  margin: 0;
  max-width: 640px;
}

/* Light mode */
.homepage-v2.is-hybrid .principes {
  background: var(--light-bg);
  border-bottom-color: var(--light-border);
}
.homepage-v2.is-hybrid .principes .sec-num   { color: var(--light-text-num); }
.homepage-v2.is-hybrid .principes .sec-title { color: var(--light-text); }
.homepage-v2.is-hybrid .principes__intro     { color: var(--light-muted); }
.homepage-v2.is-hybrid .principe-rij        { border-top-color: var(--light-border); }
.homepage-v2.is-hybrid .principe-rij:last-child { border-bottom-color: var(--light-border); }
.homepage-v2.is-hybrid .principe-rij__titel  { color: var(--light-text); }
.homepage-v2.is-hybrid .principe-rij__tekst  { color: var(--light-muted); }

/* Mobile */
@media (max-width: 768px) {
  .principe-rij {
    grid-template-columns: 60px 1fr;
    gap: 20px;
    padding: 32px 0;
  }
  .principe-rij__num {
    font-size: 40px;
    letter-spacing: -2px;
  }
  .principe-rij:hover { padding-left: 0; }
}

@media (max-width: 640px) {
  .principes { padding: var(--section-pad-y-sm) 0; }
}

/* ==========================================================================
 * DISCIPLINES sectie (branding "Wat we maken" — 2x2 grid)
 * Eigen variant van specialisaties, omdat branding 4 disciplines heeft
 * (vs 3 op websites/webshops) en de cards geen URLs hebben.
 * ========================================================================== */

.disciplines {
  background: var(--dark);
  padding: var(--section-pad-y) 0;
  border-bottom: 1px solid var(--border);
}

.disciplines__intro {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-faint);
  max-width: 420px;
  margin: 0;
}

.disciplines__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 64px;
}

.discipline {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: 48px 40px;
  position: relative;
  overflow: hidden;
  transition: var(--card-transition);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 240px;
}

/* Link-variant: cursor pointer + text-decoration weg op <a>-versie */
a.discipline {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.discipline__arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  color: var(--pink);
  display: inline-flex;
  transition: color var(--t-fast), transform var(--t-fast);
}

a.discipline:hover .discipline__arrow {
  transform: translate(4px, -4px);
}

.discipline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--pink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-slow);
}

.discipline:hover {
  background: var(--dark2);
  transform: var(--card-lift);
  box-shadow: var(--card-shadow-hover);
}

.discipline:hover::after {
  transform: scaleX(1);
}

.discipline__num {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--pink);
  margin-bottom: 24px;
}

.discipline__naam {
  font-family: var(--font-heading);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text);
  margin: 0 0 14px;
  line-height: 1.2;
}

.discipline__desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-faint);
  margin: 0;
}

/* Light mode */
.homepage-v2.is-hybrid .disciplines {
  background: var(--light-bg);
  border-bottom-color: var(--light-border);
}
.homepage-v2.is-hybrid .disciplines .sec-num   { color: var(--light-text-num); }
.homepage-v2.is-hybrid .disciplines .sec-title { color: var(--light-text); }
.homepage-v2.is-hybrid .disciplines__intro     { color: var(--light-muted); }
.homepage-v2.is-hybrid .discipline {
  background: var(--card-bg-light);
  border-color: var(--light-border);
  box-shadow: var(--card-shadow-light);
}
.homepage-v2.is-hybrid .discipline:hover {
  background: #fff;
  box-shadow: var(--card-shadow-light-hover);
}
.homepage-v2.is-hybrid .discipline__naam { color: var(--light-text); }
.homepage-v2.is-hybrid .discipline__desc { color: var(--light-muted); }

/* Mobile */
@media (max-width: 900px) {
  .disciplines__grid {
    grid-template-columns: 1fr;
    margin-top: 48px;
  }
  .discipline { padding: 36px 28px; }
}

@media (max-width: 640px) {
  .disciplines { padding: var(--section-pad-y-sm) 0; }
}