/* ============================================
   STEKELBAARS - Full Site
   ============================================ */

:root {
    --geel: #FEDB00;
    --zwart: #000000;
    --wit: #FFFFFF;
    --grijs: #808080;
    --lichtgrijs: #f5f5f5;
    --content-max: 1200px;
    --content-wide: 1400px;
    --nav-height: 70px;
}

/* Reset */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: auto;
}

/* Full-height sections */
.snap-page {
    /* no snap, free scroll */
}

.snap-container {
    /* no snap, just a wrapper */
}

.snap-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.snap-section--half {
    min-height: 50vh;
}

body {
    font-family: Calibri, 'Segoe UI', sans-serif;
    color: var(--zwart);
    background: var(--wit);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4 {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.1;
}

h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }

p {
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.85;
    color: #1a1a1a;
}

/* ============================================
   LAYOUT
   ============================================ */

.container {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 4rem);
}

.container--wide {
    max-width: var(--content-wide);
}

.section {
    padding: clamp(5rem, 10vw, 9rem) 0;
}

.section--geel { background: var(--geel); }
.section--zwart { background: var(--zwart); color: var(--wit); }
.section--grijs { background: var(--grijs); }
.section--lichtgrijs { background: var(--lichtgrijs); }

/* ============================================
   NAVIGATION
   ============================================ */

.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    transition: none;
}

.nav--ready {
    transition: background 0.3s, box-shadow 0.3s;
}

.nav--scrolled {
    background: var(--wit);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.nav--scrolled .nav-logo {
    filter: brightness(0);
    transition: filter 0.3s;
}

.nav--scrolled a:hover .nav-logo {
    filter: none;
}

.nav--scrolled .nav-links a {
    color: var(--zwart);
}

.nav--scrolled .nav-links a::after {
    background: var(--zwart);
}

.nav--scrolled .nav-links .nav-crisis {
    color: var(--wit);
}


.nav-inner {
    max-width: var(--content-wide);
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 4rem);
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    height: 22px;
    width: auto;
    flex-shrink: 0;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(1.2rem, 2.5vw, 2.5rem);
    list-style: none;
}

.nav-links a {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--geel);
    text-decoration: none;
    position: relative;
    padding: 0.3rem 0;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--geel);
    transition: width 0.3s;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

/* Dropdown */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--zwart);
    list-style: none;
    padding: 0.6rem 0;
    min-width: 160px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.22s ease-out, transform 0.22s ease-out, visibility 0s linear 0.22s;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.22s ease-out, transform 0.22s ease-out, visibility 0s linear 0s;
}

.nav-dropdown-menu li a {
    display: block;
    padding: 0.5rem 1.2rem;
    font-size: 0.8rem;
    color: var(--wit) !important;
    white-space: nowrap;
}

.nav-dropdown-menu li a::after {
    display: none !important;
}

.nav-dropdown-menu li a:hover {
    color: var(--geel) !important;
}

.nav--scrolled .nav-dropdown-menu {
    background: var(--wit);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.nav--scrolled .nav-dropdown-menu li a {
    color: var(--zwart) !important;
}

.nav--scrolled .nav-dropdown-menu li a:hover {
    color: var(--geel) !important;
}

/* Mobile nav sub-links */
.nav-mobile-sub {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding-left: 1.5rem;
}

.nav-mobile-sub a {
    font-size: clamp(1rem, 3.5vw, 1.5rem) !important;
    opacity: 0.7;
}

.nav-mobile-sub a:hover {
    opacity: 1;
}

/* Crisis link special styling */
.nav-links .nav-crisis {
    background: var(--geel);
    color: var(--zwart);
    padding: 0.5rem 1rem;
    letter-spacing: 0.08em;
}

.nav-links .nav-crisis::after {
    display: none;
}

.nav-links .nav-crisis:hover {
    background: #222;
    color: var(--geel);
}


/* Hamburger */
.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 0.5rem;
    background: none;
    border: none;
    z-index: 101;
}

.nav-hamburger span {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--zwart);
    transition: transform 0.3s, opacity 0.3s;
}

.nav-hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-hamburger.active span:nth-child(2) {
    opacity: 0;
}

.nav-hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile nav */
.nav-mobile {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--wit);
    z-index: 99;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.nav-mobile.open {
    display: flex;
}

.nav-mobile a {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--zwart);
    text-decoration: none;
}

.nav-mobile a:hover {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 3px;
}

/* ============================================
   HERO (Home)
   ============================================ */

.hero-stroom-wrapper {
    position: relative;
}

.hero {
    position: sticky;
    top: 0;
    z-index: 1;
    min-height: 100vh;
    width: 100%;
    background: var(--geel);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    padding-top: var(--nav-height);
    overflow: hidden;
}

.hero-content {
    width: 100%;
    max-width: var(--content-wide);
    padding: 0 clamp(1.5rem, 4vw, 4rem);
    padding-bottom: 2rem;
    position: relative;
    z-index: 2;
}

/* Video hero variant */
.hero--video {
    background: var(--zwart);
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.hero--video .hero-tagline {
    position: relative;
    z-index: 2;
    color: var(--geel);
}

.hero-sub {
    font-family: Calibri, sans-serif;
    font-size: clamp(1rem, 1.8vw, 1.4rem);
    color: var(--wit);
    margin-top: 1.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

.hero--video .hero-tagline .line-barcode {
    opacity: 0;
    filter: brightness(0) saturate(100%) invert(85%) sepia(60%) saturate(1000%) hue-rotate(5deg) brightness(105%);
}

.hero--video .hero-tagline .line-barcode.left {
    animation: barcodeFromLeftGeel 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.hero--video .hero-tagline .line-barcode.right {
    animation: barcodeFromRightGeel 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes barcodeFromLeftGeel {
    0% { opacity: 0; transform: translateX(-100%); }
    60% { opacity: 0.35; transform: translateX(5%); }
    100% { opacity: 0.3; transform: translateX(0); }
}

@keyframes barcodeFromRightGeel {
    0% { opacity: 0; transform: translateX(100%); }
    60% { opacity: 0.35; transform: translateX(-5%); }
    100% { opacity: 0.3; transform: translateX(0); }
}

.hero--video .hero-barcode-top,
.hero--video .hero-barcode-bottom {
    position: relative;
    z-index: 2;
}

.hero--video .hero-barcode-top img,
.hero--video .hero-barcode-bottom img {
    filter: brightness(0) saturate(100%) invert(85%) sepia(60%) saturate(1000%) hue-rotate(5deg) brightness(105%);
}

.hero--video .scroll-indicator {
    z-index: 3;
}

.hero-tagline {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: clamp(2.8rem, 8vw, 8rem);
    text-transform: uppercase;
    color: var(--zwart);
    letter-spacing: -0.02em;
    line-height: 0.95;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 2rem;
}

.hero-tagline .line {
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
    justify-content: flex-start;
}

.hero-tagline .line-text {
    display: block;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(40px);
    animation: lineSlideUp 0.7s ease-out forwards;
    flex-shrink: 0;
    text-align: left;
    padding: 0;
}

.hero-tagline .line:nth-child(1) .line-text { animation-delay: 0.5s; }
.hero-tagline .line:nth-child(2) .line-text { animation-delay: 0.7s; }
.hero-tagline .line:nth-child(3) .line-text { animation-delay: 0.9s; }
.hero-tagline .line:nth-child(4) .line-text { animation-delay: 1.1s; }

.hero-tagline .line:nth-child(4) {
    margin-top: 0.15em;
}

/* Hero logo — fades in first */
.hero-logo-flicker {
    height: 0.60em;
    width: auto;
    display: block;
    object-fit: contain;
    opacity: 0;
    animation: logoFadeIn 1.2s ease-out forwards;
}

@keyframes logoFadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* Logo line spacing */
.hero-tagline--delayed .line:nth-child(4) {
    margin-top: 0.15em;
}

/* Delayed tagline — text appears 1s after logo starts */
.hero-tagline--delayed .line:nth-child(1) .line-text { animation-delay: 1.5s; }
.hero-tagline--delayed .line:nth-child(2) .line-text { animation-delay: 1.7s; }
.hero-tagline--delayed .line:nth-child(3) .line-text { animation-delay: 1.9s; }
/* Logo line: no slide-up, just the flicker */
.hero-tagline--delayed .line:nth-child(4) .line-text {
    animation: none;
    opacity: 1;
    transform: none;
}

.hero-sub--delayed {
    opacity: 0;
    animation: lineSlideUp 0.7s ease-out 2.2s forwards;
}

@keyframes lineSlideUp {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Barcode/streepjes lines */
.hero-tagline .line-barcode {
    overflow: hidden;
    opacity: 0;
    min-width: 0;
    height: 7rem;
    background-image: url('../Huisstijl/stekelbaars_streepjes.png');
    background-repeat: no-repeat;
    background-size: auto 400%;
}

.hero-tagline .barcode-alt .line-barcode {
    background-image: url('../Huisstijl/stekelbaars_barcode.png');
}

.hero-tagline .line-barcode.left {
    width: 30%;
    flex-shrink: 0;
    background-position: right center;
    animation: barcodeFromLeft 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.hero-tagline .line-barcode.right {
    flex: 1;
    background-position: left center;
    background-repeat: repeat-x;
    animation: barcodeFromRight 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.hero-tagline .line:nth-child(1) .line-barcode { animation-delay: 1.0s; }
.hero-tagline .line:nth-child(2) .line-barcode { animation-delay: 1.2s; }
.hero-tagline .line:nth-child(3) .line-barcode { animation-delay: 1.4s; }
.hero-tagline .line:nth-child(4) .line-barcode { animation-delay: 1.6s; }

@keyframes barcodeFromLeft {
    0% { opacity: 0; transform: translateX(-100%); }
    60% { opacity: 0.18; transform: translateX(5%); }
    100% { opacity: 0.15; transform: translateX(0); }
}

@keyframes barcodeFromRight {
    0% { opacity: 0; transform: translateX(100%); }
    60% { opacity: 0.18; transform: translateX(-5%); }
    100% { opacity: 0.15; transform: translateX(0); }
}

/* Mobile barcodes */
.hero-barcode-top,
.hero-barcode-bottom {
    display: none;
}

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    z-index: 3;
    opacity: 0;
    animation: fadeIn 1s ease-out 2s forwards;
}

.scroll-indicator img {
    height: 35px;
    width: auto;
    animation: arrowBounce 2s ease-in-out infinite;
}

@keyframes arrowBounce {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    50% { transform: translateX(8px); opacity: 0.8; }
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* ============================================
   GRAPHIC HEADINGS - Poster-style met streepjes
   ============================================ */

.graphic-heading {
    position: relative;
    margin-bottom: 2.5rem;
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.graphic-heading h2 {
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 2;
}

/* Barcode achter de kop */
.graphic-heading-barcode {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 45%;
    height: 120%;
    background: url('../Huisstijl/stekelbaars_barcode.png') no-repeat right center;
    background-size: auto 100%;
    opacity: 0.1;
    pointer-events: none;
    z-index: 1;
}

/* Streepjes variant (smaller, naast kop) */
.graphic-heading-streepjes {
    position: absolute;
    top: 50%;
    left: -2rem;
    transform: translateY(-50%);
    width: 110%;
    height: 80%;
    background: url('../Huisstijl/stekelbaars_streepjes.png') no-repeat left center;
    background-size: auto 100%;
    opacity: 0.08;
    pointer-events: none;
    z-index: 1;
}

/* Gele pijl als accent naast kop */
.graphic-heading-pijl {
    position: absolute;
    right: 0;
    bottom: 0;
    height: clamp(40px, 6vw, 70px);
    width: auto;
    z-index: 2;
    opacity: 0.85;
}

/* Light variant (voor donkere achtergronden) */
.graphic-heading--light h2 {
    color: var(--wit);
}

.graphic-heading--light .graphic-heading-barcode {
    opacity: 0.06;
}

/* Kleine variant */
.graphic-heading--small {
    margin-bottom: 2rem;
    padding: 0.5rem 0;
}

.graphic-heading--small h2 {
    font-size: clamp(2rem, 4.5vw, 3.5rem);
}

/* ============================================
   HOME SECTIONS
   ============================================ */

/* Intro */
.intro {
    text-align: left;
    padding: clamp(5rem, 10vw, 9rem) 0;
}

.intro p {
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    line-height: 1.8;
    max-width: 750px;
    color: #1a1a1a;
}

/* Model preview (home) */
.model-preview {
    background: var(--zwart);
    color: var(--wit);
    padding: clamp(5rem, 10vw, 9rem) 0;
    position: relative;
    overflow: hidden;
}

.model-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../Huisstijl/stekelbaars_streepjes.png') repeat-x center;
    background-size: auto 80%;
    opacity: 0.03;
    pointer-events: none;
}

.model-preview-label {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--geel);
    margin-bottom: 1rem;
}

.model-preview h2 {
    margin-bottom: 2rem;
}

.model-preview p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 650px;
    margin-bottom: 2.5rem;
}

.model-steps-preview {
    display: flex;
    gap: 2rem;
    position: relative;
    margin-top: 3rem;
}

.model-steps-preview::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--geel);
    opacity: 0.3;
    transform: translateY(-50%);
}

.model-step-dot {
    position: relative;
    z-index: 1;
    flex: 1;
    text-align: center;
}

.model-step-dot .dot {
    width: 50px;
    height: 50px;
    background: var(--geel);
    color: var(--zwart);
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.model-step-dot span {
    display: block;
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wit);
}

/* Who we are (home) */
.wie-zijn-wij {
    padding: clamp(5rem, 10vw, 9rem) 0;
}

.wie-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 0 clamp(2.5rem, 5vw, 5rem);
    align-items: stretch;
}

.wie-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
}

.wie-tekst h2 {
    margin-bottom: 2rem;
}

.wie-tekst p {
    margin-bottom: 1.5rem;
}

.wie-tekst p:last-of-type {
    margin-bottom: 0;
}

/* Who we help (home) */
.wie-helpen {
    background: var(--zwart);
    padding: clamp(5rem, 8vw, 8rem) 0;
    position: relative;
    overflow: hidden;
}

.wie-helpen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../Huisstijl/stekelbaars_streepjes.png') repeat-x bottom;
    background-size: auto 60%;
    opacity: 0.03;
    pointer-events: none;
}

.wie-helpen .container {
    position: relative;
    z-index: 1;
}

.wie-helpen h2 {
    color: var(--wit);
    margin-bottom: 3rem;
    text-align: center;
}

.doelgroep-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
}

.doelgroep-card {
    background: var(--wit);
    padding: clamp(2rem, 3vw, 3rem);
    position: relative;
    overflow: hidden;
    transition: background 0.4s ease;
}

.doelgroep-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--geel);
    transition: height 0.4s ease;
}

.doelgroep-card:hover::after {
    height: 6px;
}

.doelgroep-card h3 {
    color: var(--geel);
    letter-spacing: 0.06em;
    margin-bottom: 1.2rem;
}

.doelgroep-card p {
    color: #333;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
}

/* Testimonials */
.testimonials {
    padding: clamp(5rem, 10vw, 9rem) 0;
    background: var(--lichtgrijs);
}

.testimonials h2 {
    text-align: center;
    margin-bottom: 3rem;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
}

.testimonial-card {
    background: var(--wit);
    padding: clamp(2rem, 3vw, 3rem);
    position: relative;
}

.testimonial-card::before {
    content: '\201C';
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-size: 5rem;
    color: var(--geel);
    position: absolute;
    top: 0.5rem;
    left: 1.5rem;
    line-height: 1;
}

.testimonial-card blockquote {
    font-size: clamp(1rem, 1.3vw, 1.1rem);
    line-height: 1.8;
    color: #333;
    margin-bottom: 1.5rem;
    padding-top: 1.5rem;
    font-style: italic;
}

.testimonial-author {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--zwart);
}

.testimonial-role {
    font-size: 0.85rem;
    color: var(--grijs);
    margin-top: 0.2rem;
}

/* ============================================
   PAGE HEADERS
   ============================================ */

.page-header {
    background: var(--zwart);
    color: var(--wit);
    padding: clamp(8rem, 15vw, 12rem) 0 clamp(4rem, 8vw, 6rem);
    position: relative;
    overflow: hidden;
}

.page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../Huisstijl/stekelbaars_barcode.png') no-repeat right center;
    background-size: auto 120%;
    opacity: 0.05;
    pointer-events: none;
}

.page-header h1 {
    position: relative;
    z-index: 1;
}

.page-header p {
    position: relative;
    z-index: 1;
    margin-top: 1.5rem;
    max-width: 650px;
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
    color: rgba(255, 255, 255, 0.6);
}

/* Wrapper: compact black page-header + photo-hero that together fill 100vh */
.page-head-block {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.page-head-block .page-header {
    padding: clamp(6rem, 10vw, 8rem) 0 clamp(1.5rem, 3vw, 2.5rem);
    flex-shrink: 0;
}
.page-head-block .page-header h1 {
    font-size: clamp(2rem, 3.5vw, 3rem);
    margin: 0;
}

.page-photo-hero {
    flex: 1;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
}
.page-photo-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/foto 8.jpg") center / cover no-repeat;
    animation: contactSubtleZoom 24s ease-in-out infinite;
    will-change: transform;
    z-index: -2;
}
.page-photo-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.65);
    z-index: -1;
}
.page-photo-hero-inner {
    width: 100%;
    padding-top: clamp(3rem, 6vw, 5rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}
.page-photo-hero-heading {
    color: var(--geel);
    font-size: clamp(2.75rem, 5.5vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.005em;
    max-width: 900px;
    margin: 0;
}
.page-photo-hero-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.3em);
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.page-photo-hero-heading.visible .page-photo-hero-word {
    opacity: 1;
    transform: translateY(0);
}
.page-photo-hero-heading.visible .page-photo-hero-word:nth-of-type(1) { transition-delay: 0.05s; }
.page-photo-hero-heading.visible .page-photo-hero-word:nth-of-type(2) { transition-delay: 0.15s; }
.page-photo-hero-heading.visible .page-photo-hero-word:nth-of-type(3) { transition-delay: 0.25s; }
.page-photo-hero-heading.visible .page-photo-hero-word:nth-of-type(4) { transition-delay: 0.35s; }
.page-photo-hero-heading.visible .page-photo-hero-word:nth-of-type(5) { transition-delay: 0.45s; }
.page-photo-hero-heading.visible .page-photo-hero-word:nth-of-type(6) { transition-delay: 0.55s; }
.page-photo-hero-heading.visible .page-photo-hero-word:nth-of-type(7) { transition-delay: 0.65s; }
.page-photo-hero-heading.visible .page-photo-hero-word:nth-of-type(8) { transition-delay: 0.75s; }
.page-photo-hero-heading.visible .page-photo-hero-word:nth-of-type(9) { transition-delay: 0.85s; }
.page-photo-hero-heading.visible .page-photo-hero-word:nth-of-type(10) { transition-delay: 0.95s; }
.page-photo-hero-heading.visible .page-photo-hero-word:nth-of-type(11) { transition-delay: 1.05s; }
.page-photo-hero-heading.visible .page-photo-hero-word:nth-of-type(12) { transition-delay: 1.15s; }
.page-photo-hero-heading.visible .page-photo-hero-word:nth-of-type(13) { transition-delay: 1.25s; }
.page-photo-hero-heading.visible .page-photo-hero-word:nth-of-type(14) { transition-delay: 1.35s; }

/* Photo-hero modifiers */
.page-photo-hero--85 {
    min-height: 85vh;
    flex: none;
}

.page-photo-hero--foto6::before {
    background-image: url("../img/foto 6.JPG");
}

.page-photo-hero--foto6::after {
    background: rgba(0, 0, 0, 0.6);
}

.page-photo-hero--foto6 .page-photo-hero-eyebrow {
    color: var(--wit);
}

.page-photo-hero--foto6 .page-photo-hero-eyebrow::after {
    background: var(--geel);
}

.page-photo-hero--foto6 .page-photo-hero-text {
    color: rgba(255, 255, 255, 0.92);
}

/* Legal pages (algemene voorwaarden, AI-beleid) */
.legal-page {
    padding: clamp(7rem, 12vw, 11rem) 0 clamp(5rem, 9vw, 8rem);
    background: var(--wit);
}

.legal-title {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(2.5rem, 5.5vw, 5rem);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--zwart);
    margin: 0 0 0.5rem;
}

.legal-updated {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: var(--grijs);
    margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}

.legal-body {
    max-width: 820px;
}

.legal-body h2 {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(1.25rem, 1.7vw, 1.5rem);
    letter-spacing: -0.005em;
    color: var(--zwart);
    margin: 2.5rem 0 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--geel);
    display: inline-block;
}

.legal-body p {
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.75;
    color: var(--zwart);
    margin: 0 0 1rem;
}

.legal-body .legal-intro {
    font-size: clamp(1.05rem, 1.25vw, 1.2rem);
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.legal-body a {
    color: var(--zwart);
    text-decoration: none;
    border-bottom: 2px solid var(--geel);
}

.legal-body a:hover {
    background: var(--geel);
}

.legal-body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.legal-body ul li {
    position: relative;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.75;
    color: var(--zwart);
    padding: 0.5rem 0 0.5rem 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.legal-body ul li:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.legal-body ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.1rem;
    width: 0.7rem;
    height: 2px;
    background: var(--geel);
}

.legal-body ul li strong {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--zwart);
    margin-right: 0.35rem;
}

/* Dark overlay variant — gebruikt op voor-wie subpagina's */
.page-photo-hero--dark::after {
    background: rgba(0, 0, 0, 0.5);
}

.page-photo-hero--dark .page-photo-hero-eyebrow {
    color: var(--wit);
}

.page-photo-hero--dark .page-photo-hero-eyebrow::after {
    background: var(--geel);
}

.page-photo-hero--dark .page-photo-hero-text {
    color: rgba(255, 255, 255, 0.92);
}

.page-photo-hero--foto7::before {
    background-image: url("../img/foto 7.jpg");
}

.page-photo-hero--foto10::before {
    background-image: url("../img/foto 10.jpg");
}

.page-photo-hero--foto11::before {
    background-image: url("../img/foto 11.jpg");
    background-position: center top;
}

.page-photo-hero-eyebrow {
    margin: 0 0 1rem;
    color: var(--zwart);
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    line-height: 1;
}

.page-photo-hero-eyebrow::after {
    content: "";
    display: block;
    width: 54px;
    height: 1px;
    background: var(--zwart);
    margin-top: 0.9rem;
    opacity: 0.5;
}

/* Nav variant: zwarte bg bovenin (wisselt naar scrolled-stijl bij scrollen) */
.nav--zwart:not(.nav--scrolled) {
    background: var(--zwart);
}

.page-photo-hero-text {
    color: var(--zwart);
    margin: 1.5rem 0 0;
    max-width: 720px;
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    line-height: 1.6;
}

.page-photo-hero-cta {
    margin-top: 2rem;
}

/* ============================================
   MODEL PAGE - Horizontal Scroll
   ============================================ */

.model-page {
    padding-top: var(--nav-height);
    height: 100vh;
    overflow: hidden;
}

.model-horizontal {
    height: 100%;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.model-horizontal::-webkit-scrollbar {
    display: none;
}

.model-slide {
    min-width: 80vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: clamp(2rem, 4vw, 6rem);
    padding-top: var(--nav-height);
}

.model-slide--intro {
    min-width: 100vw;
}

/* Full-bleed photo-background slide */
.model-slide.model-slide--photo-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--wit);
    position: relative;
}

.model-slide--photo-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.25) 100%);
    pointer-events: none;
    z-index: 0;
}

.model-slide--photo-bg .model-slide-text {
    position: relative;
    z-index: 1;
    max-width: 720px;
    width: 100%;
}

.model-slide--photo-bg h2 {
    color: var(--wit);
}

.model-slide--photo-bg .model-slide-number {
    color: var(--geel);
    opacity: 1;
}

.model-slide--photo-bg p {
    color: rgba(255, 255, 255, 0.9);
}

.stroom-letter {
    display: inline-block;
    color: var(--geel);
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 800;
    font-size: 1.7em;
    line-height: 0.85;
    letter-spacing: -0.02em;
    vertical-align: -0.06em;
    margin-right: 0.02em;
}

.model-slide:nth-child(even):not(.model-slide--photo-bg) .stroom-letter {
    color: var(--zwart);
}

.model-slide:nth-child(odd) {
    background: var(--zwart);
    color: var(--wit);
}

.model-slide:nth-child(even) {
    background: var(--geel);
    color: var(--zwart);
}

/* Intro slide */
.model-slide--intro {
    background: var(--zwart) !important;
    color: var(--wit) !important;
    overflow: hidden;
}

.model-intro-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.model-intro-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 0;
    pointer-events: none;
}

.model-slide--intro .model-slide-content {
    position: relative;
    z-index: 1;
}

.model-slide--intro .model-slide-content {
    max-width: 1300px;
    display: flex;
    gap: clamp(3rem, 5vw, 6rem);
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.model-slide--intro .model-intro-body {
    max-width: 720px;
}

.model-slide--intro .model-slide-content h2 {
    flex: 0 0 auto;
    color: var(--geel);
    font-size: clamp(4rem, 10vw, 9rem);
    line-height: 0.95;
    white-space: nowrap;
}

.model-intro-body {
    flex: 1;
}

.model-slide--intro .model-slide-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.85;
    margin-bottom: 1rem;
}

.model-intro-accent {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
    text-transform: uppercase;
    color: var(--geel) !important;
    margin: 1.5rem 0 !important;
}

/* Scharnierpunt slides */
.model-slide-inner {
    display: flex;
    gap: clamp(2rem, 4vw, 5rem);
    align-items: center;
    max-width: 1100px;
    width: 100%;
}

.model-slide-inner--reverse {
    flex-direction: row-reverse;
}

.model-slide-text {
    flex: 1;
    position: relative;
    z-index: 1;
}

.model-slide-number {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: clamp(0.8rem, 1vw, 0.9rem);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.5;
    margin-bottom: 0.8rem;
}

.model-slide h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 1.2rem;
}

.model-slide p {
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.85;
    margin-bottom: 0.8rem;
}

/* Slide content enter animation — triggered when slide becomes active */
.model-slide .model-slide-number,
.model-slide h2,
.model-slide p {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.model-slide.is-active .model-slide-number,
.model-slide.is-active h2,
.model-slide.is-active p {
    opacity: 1;
    transform: translateY(0);
}

.model-slide.is-active .model-slide-number { transition-delay: 0.05s; }
.model-slide.is-active h2 { transition-delay: 0.12s; }
.model-slide.is-active p:nth-of-type(1) { transition-delay: 0.22s; }
.model-slide.is-active p:nth-of-type(2) { transition-delay: 0.32s; }
.model-slide.is-active p:nth-of-type(3) { transition-delay: 0.42s; }
.model-slide.is-active p:nth-of-type(4) { transition-delay: 0.52s; }
.model-slide.is-active p:nth-of-type(5) { transition-delay: 0.62s; }

@media (prefers-reduced-motion: reduce) {
    .model-slide .model-slide-number,
    .model-slide h2,
    .model-slide p {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.model-slide:nth-child(odd) p {
    color: rgba(255, 255, 255, 0.85);
}

/* Slide foto */
.model-slide-foto {
    flex: 0 0 35%;
    position: relative;
    overflow: hidden;
}

.model-slide-foto--lg {
    flex: 0 0 50%;
}

.model-slide-foto--xl {
    flex: 0 0 58%;
}

/* Laptop-range: --xl foto's smaller zodat tekst-kolom (R-slide) volledig leesbaar blijft */
@media (max-width: 1280px) and (min-width: 901px) {
    .model-slide-foto--xl {
        flex: 0 0 42%;
    }
}

/* Tussenstap voor 13-15" laptops (1281-1440px) — foto net iets kleiner dan default 58% */
@media (max-width: 1440px) and (min-width: 1281px) {
    .model-slide-foto--xl {
        flex: 0 0 50%;
    }
}

/* Gele balk-inset: foto neemt ~helft sectie, gele ruimte boven/rechts/onder
   Linkerkant blijft tegen tekstkolom (geen margin) */
.model-slide-foto--inset-yellow {
    margin: clamp(1.5rem, 4vh, 3.5rem) clamp(1.5rem, 3vw, 3.5rem) clamp(1.5rem, 4vh, 3.5rem) 0;
}

/* Wide inner: max-width opheffen zodat foto groter kan worden */
.model-slide-inner--wide {
    max-width: none;
}

.model-foto-img {
    width: 100%;
    height: 100%;
    min-height: 350px;
    object-fit: cover;
    filter: grayscale(100%);
    display: block;
}

.model-foto-placeholder {
    width: 100%;
    min-height: 350px;
    background: var(--grijs);
    opacity: 0.25;
}

/* Flow indicator */
.model-flow-indicator {
    position: fixed;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

.model-flow-dot {
    width: 12px;
    height: 12px;
    background: var(--grijs);
    opacity: 0.4;
    transition: opacity 0.3s, background 0.3s, transform 0.3s;
}

.model-flow-dot.active {
    opacity: 1;
    background: var(--geel);
    transform: scale(1.3);
}

.model-flow-indicator.on-yellow .model-flow-dot {
    background: rgba(0, 0, 0, 0.35);
}

.model-flow-indicator.on-yellow .model-flow-dot.active {
    background: var(--wit);
}

/* Scroll hint */
.model-scroll-hint {
    position: fixed;
    bottom: 3rem;
    right: 3rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--geel);
    opacity: 0.8;
    transition: opacity 0.5s;
}

.model-scroll-hint img {
    height: 25px;
    width: auto;
}

/* ============================================
   WAT WE DOEN PAGE
   ============================================ */

.diensten-detail {
    padding: clamp(5rem, 10vw, 9rem) 0;
}

.dienst-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 5vw, 6rem);
    align-items: center;
    margin-bottom: clamp(5rem, 8vw, 8rem);
}

.dienst-block:last-child {
    margin-bottom: 0;
}

.dienst-block:nth-child(even) {
    direction: rtl;
}

.dienst-block:nth-child(even) > * {
    direction: ltr;
}

.dienst-block-img img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
}

.dienst-block-tekst h3 {
    color: var(--geel);
    margin-bottom: 1.5rem;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.dienst-block-tekst p {
    margin-bottom: 1rem;
}

/* ============================================
   DIENSTEN — nieuwe opbouw
   ============================================ */

/* Page-header met eyebrow (reuse page-header) */
.page-header-eyebrow {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--geel);
    font-size: clamp(0.75rem, 1vw, 0.85rem);
    margin-bottom: 1.5rem;
}
.page-header h1 {
    line-height: 0.92;
}

/* --- Manifest sectie (filosofie) --- */
.diensten-manifest {
    background: #fff;
    padding: clamp(6rem, 10vw, 10rem) 0;
    position: relative;
}
.diensten-manifest::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 1px; height: 80px;
    background: #000;
}
.manifest-grid {
    max-width: 900px;
    margin: 0 auto;
    text-align: left;
}
.manifest-eyebrow {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #000;
    font-size: 0.8rem;
    margin-bottom: 3rem;
    padding-left: 2.5rem;
    position: relative;
}
.manifest-eyebrow::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 1.75rem; height: 2px;
    background: var(--geel);
    transform: translateY(-50%);
}
.manifest-lead {
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.3;
    margin-bottom: 2rem;
    color: #000;
    font-weight: 400;
}
.manifest-lead em {
    font-style: italic;
    color: var(--geel);
    background: #000;
    padding: 0 0.3em;
}
.manifest-sub {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.6;
    color: #444;
    max-width: 620px;
}

/* --- Pijlers sectie --- */
.diensten-pijlers {
    background: #fff;
    padding: clamp(4rem, 8vw, 8rem) 0 clamp(6rem, 10vw, 10rem);
}
.diensten-pijlers--continued {
    padding-top: 0;
}
.pijlers-head {
    margin-bottom: clamp(5rem, 8vw, 8rem);
    text-align: center;
}
.pijlers-eyebrow {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 1.5rem;
}
.pijlers-head h2 {
    font-size: clamp(3rem, 6vw, 5.5rem);
    line-height: 0.92;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pijler-block {
    display: grid;
    grid-template-columns: 0.2fr 1fr 1fr;
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: center;
    margin-bottom: clamp(5rem, 8vw, 8rem);
    padding-top: 3rem;
    border-top: 1px solid #000;
}
.pijler-block:last-child { margin-bottom: 0; }

.pijler-block--flip {
    grid-template-columns: 1fr 1fr 0.2fr;
}
.pijler-block--flip .pijler-num { order: 3; }
.pijler-block--flip .pijler-body { order: 1; }
.pijler-block--flip .pijler-visual { order: 2; }

.pijler-num {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    color: var(--geel);
    line-height: 1;
    -webkit-text-stroke: 2px #000;
    text-stroke: 2px #000;
}
.pijler-body h3 {
    font-size: clamp(2.25rem, 4vw, 3.4rem);
    line-height: 0.95;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}
.pijler-body p {
    font-size: clamp(1rem, 1.1vw, 1.1rem);
    line-height: 1.65;
    margin-bottom: 1.2rem;
    color: #222;
}
.pijler-body em {
    font-style: italic;
    color: #000;
    font-weight: 500;
}
.pijler-body strong {
    font-weight: 700;
    background: var(--geel);
    padding: 0 0.25em;
}
.pijler-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 0.75rem;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.95rem;
    color: #000;
    text-decoration: none;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid #000;
    transition: color .25s ease, border-color .25s ease, transform .3s ease;
}
.pijler-cta:hover { color: var(--geel); border-color: var(--geel); }
.pijler-cta .pijler-arrow {
    display: inline-block;
    width: 28px; height: 2px;
    background: currentColor;
    position: relative;
    transition: transform .3s ease;
}
.pijler-cta .pijler-arrow::after {
    content: '';
    position: absolute;
    right: 0; top: 50%;
    width: 8px; height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}
.pijler-cta:hover .pijler-arrow { transform: translateX(6px); }

.pijler-visual {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #000;
}
.pijler-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.1);
    transition: transform .8s ease;
}
.pijler-block:hover .pijler-visual img { transform: scale(1.04); }
.pijler-barcode {
    position: absolute;
    left: 0; bottom: 0;
    width: 40%;
    height: 6px;
    background-image: repeating-linear-gradient(
        to right,
        var(--geel) 0 2px,
        transparent 2px 5px,
        var(--geel) 5px 9px,
        transparent 9px 14px,
        var(--geel) 14px 17px,
        transparent 17px 22px
    );
}

/* --- Organic specialismen --- */
.organic-specialismen {
    background: #000;
    color: #fff;
    padding: clamp(6rem, 10vw, 10rem) 0;
    position: relative;
    overflow: hidden;
}
.organic-specialismen::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 5%;
    right: 5%;
    height: 8px;
    background-image: repeating-linear-gradient(
        to right,
        var(--geel) 0 3px,
        transparent 3px 8px,
        var(--geel) 8px 12px,
        transparent 12px 20px,
        var(--geel) 20px 23px,
        transparent 23px 30px
    );
    opacity: 0.5;
}
.org-head {
    text-align: center;
    margin-bottom: clamp(4rem, 7vw, 6rem);
}
.org-eyebrow {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--geel);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}
.org-head h2 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 0.95;
    text-transform: uppercase;
    color: #fff;
}
.org-head h2 em {
    font-style: italic;
    color: var(--geel);
}

.org-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.12);
}
.org-card {
    background: #000;
    padding: clamp(2.5rem, 4vw, 3.5rem);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: background .3s ease;
}
.org-card:hover { background: #0c0c0c; }
.org-card-label {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.85rem;
    color: #000;
    background: var(--geel);
    padding: 0.4rem 0.8rem;
    align-self: flex-start;
}
.org-card h3 {
    font-size: clamp(1.4rem, 2vw, 1.75rem);
    line-height: 1.15;
    color: #fff;
    text-transform: none;
    font-weight: 700;
    margin: 0;
    text-wrap: pretty;
}
.org-card p {
    font-size: clamp(0.95rem, 1vw, 1.05rem);
    line-height: 1.65;
    color: rgba(255,255,255,0.72);
    margin: 0;
}

/* --- Diensten editorial lijst --- */
.diensten-lijst {
    background: var(--wit);
    padding: clamp(4rem, 7vw, 7rem) 0 clamp(5rem, 8vw, 8rem);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.diensten-lijst::before {
    content: "";
    position: absolute;
    top: 12%;
    right: -5%;
    width: clamp(420px, 50vw, 780px);
    height: clamp(420px, 50vw, 780px);
    background: url('../Huisstijl/baars_1_geel.png') no-repeat center center;
    background-size: contain;
    opacity: 0.04;
    pointer-events: none;
    z-index: -1;
    transform: rotate(-8deg);
}
.diensten-lijst::after {
    content: "";
    position: absolute;
    bottom: 8%;
    left: -8%;
    width: clamp(360px, 42vw, 640px);
    height: clamp(360px, 42vw, 640px);
    background: url('../Huisstijl/baars_2_geel.png') no-repeat center center;
    background-size: contain;
    opacity: 0.035;
    pointer-events: none;
    z-index: -1;
    transform: rotate(12deg) scaleX(-1);
}

.diensten-lijst-intro {
    margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
    max-width: 880px;
}

.dienst-row {
    display: grid;
    grid-template-columns: clamp(100px, 12vw, 160px) 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    padding: clamp(3rem, 5vw, 5rem) 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
    transition: background-color 0.4s ease;
    scroll-margin-top: calc(var(--nav-height) + 1.5rem);
}

.dienst-sub-item {
    scroll-margin-top: calc(var(--nav-height) + 1.5rem);
}

/* ---------- Dienst jump-menu (in vw-body-wrap intro) ---------- */
.dienst-jump {
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
    padding-top: clamp(1.75rem, 2.5vw, 2.25rem);
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.dienst-jump-label {
    display: inline-block;
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.78rem;
    color: var(--zwart);
    margin-bottom: 1.1rem;
    position: relative;
    padding-left: 3rem;
}

.dienst-jump-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 2.25rem;
    height: 2px;
    background: var(--geel);
    transform: translateY(-50%);
}

.dienst-jump-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.7rem;
}

.dienst-jump-list a {
    display: inline-block;
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    color: var(--zwart);
    text-decoration: none;
    padding: 0.55rem 1rem;
    border: 1.5px solid var(--zwart);
    background: transparent;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
    line-height: 1.1;
}

.dienst-jump-list a:hover,
.dienst-jump-list a:focus-visible {
    background: var(--geel);
    color: var(--zwart);
    transform: translateY(-2px);
    outline: none;
}

@media (max-width: 600px) {
    .dienst-jump-list a {
        font-size: 0.82rem;
        padding: 0.5rem 0.85rem;
    }
}

.dienst-row::before {
    content: "";
    position: absolute;
    left: -9999px;
    right: -9999px;
    top: 0;
    bottom: 0;
    background: rgba(254, 219, 0, 0.04);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
    pointer-events: none;
}

.dienst-row:hover::before {
    opacity: 1;
}

.dienst-row:last-of-type {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.dienst-row--no-border {
    border-bottom: none;
}

.dienst-num {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 800;
    font-size: clamp(3rem, 5.5vw, 5.5rem);
    color: var(--geel);
    line-height: 0.9;
    letter-spacing: -0.01em;
    perspective: 900px;
    height: 1em;
}

.dienst-num-flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
    transform: rotateX(0deg);
}

.dienst-num-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.dienst-num-face--fish {
    transform: rotateX(180deg);
}

.dienst-num-face--fish img {
    height: 0.85em;
    width: auto;
    display: block;
}

.dienst-row.is-fish .dienst-num-flipper {
    transform: rotateX(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .dienst-num-flipper,
    .dienst-row.is-fish .dienst-num-flipper {
        transition: none;
        transform: rotateX(0deg);
    }
    .dienst-num-face--fish { display: none; }
}

.dienst-body {
    position: relative;
    z-index: 2;
}

.dienst-body h3 {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 800;
    font-size: clamp(1.75rem, 3.2vw, 2.75rem);
    text-transform: uppercase;
    color: var(--zwart);
    letter-spacing: -0.005em;
    line-height: 1;
    margin: 0 0 1.25rem;
    position: relative;
    display: inline-block;
    padding-bottom: 0.45rem;
}

.dienst-body h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 2.5rem;
    height: 4px;
    background: var(--geel);
    transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.dienst-row:hover .dienst-body h3::after {
    width: 100%;
}

.dienst-body p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--zwart);
    margin: 0 0 1rem;
    max-width: 720px;
}

.dienst-body p:last-of-type {
    margin-bottom: 0;
}

.dienst-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 1.5rem;
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--zwart);
    text-decoration: none;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--geel);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.dienst-cta:hover {
    color: var(--geel);
    border-color: var(--zwart);
}

.dienst-cta-arrow {
    width: 28px;
    height: 14px;
    background: url('../Huisstijl/stekelbaars_pijl.png') no-repeat right center;
    background-size: contain;
    filter: brightness(0);
    transition: transform 0.2s ease;
}

.dienst-cta:hover .dienst-cta-arrow {
    transform: translateX(5px);
}

/* Organic sub-specialismen — editorial nested list onder pijler 03 */
.dienst-sub {
    position: relative;
    padding: clamp(2rem, 3.5vw, 3.25rem) 0 clamp(2.5rem, 4vw, 3.75rem);
    margin: 0;
    /* tab-indent: sub-list start uitgelijnd onder de "Organic" titel
       (= breedte nummerkolom + gap uit .dienst-row) */
    padding-left: calc(clamp(100px, 12vw, 160px) + clamp(2rem, 4vw, 4rem));
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.dienst-sub-eyebrow {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--grijs);
    margin: 0 0 clamp(1.5rem, 2.5vw, 2.25rem);
    position: relative;
    padding-left: 3.5rem;
}

.dienst-sub-eyebrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 2.5rem;
    height: 2px;
    background: var(--geel);
    transform: translateY(-50%);
}

.dienst-sub-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dienst-sub-item {
    display: grid;
    grid-template-columns: clamp(60px, 7vw, 100px) 1fr;
    gap: clamp(1.5rem, 3vw, 2.75rem);
    padding: clamp(1.5rem, 2.5vw, 2.25rem) 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    align-items: baseline;
}

.dienst-sub-item:first-child {
    border-top: none;
    padding-top: 0;
}

.dienst-sub-marker {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    color: var(--geel);
    text-transform: lowercase;
    letter-spacing: 0.02em;
    line-height: 1;
    font-style: italic;
}

.dienst-sub-content {
    min-width: 0;
}

.dienst-sub-title {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 800;
    font-size: clamp(1.35rem, 2.1vw, 1.85rem);
    text-transform: uppercase;
    color: var(--zwart);
    letter-spacing: -0.005em;
    line-height: 1;
    margin: 0 0 0.9rem;
}

.dienst-sub-content p {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--zwart);
    margin: 0;
    max-width: 720px;
}

/* Placeholder foto binnen dienst-body (tussen alinea's) */
.dienst-photo {
    position: relative;
    aspect-ratio: 16 / 10;
    max-width: 720px;
    width: 100%;
    margin: clamp(2rem, 3.5vw, 3rem) 0;
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(0, 0, 0, 0.04),
            rgba(0, 0, 0, 0.04) 16px,
            rgba(0, 0, 0, 0.07) 16px,
            rgba(0, 0, 0, 0.07) 18px
        ),
        #ededea;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
}

.dienst-photo::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: var(--geel);
    z-index: 2;
}

.dienst-photo--filled {
    background: var(--zwart);
    overflow: hidden;
}

.dienst-photo--filled img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dienst-photo-label {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    color: var(--zwart);
    background: var(--wit);
    padding: 0.65rem 1.25rem;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* --- Extra diensten (legacy) --- */
.diensten-extra {
    background: #fff;
    padding: clamp(6rem, 10vw, 10rem) 0;
}
.extra-head {
    text-align: center;
    margin-bottom: clamp(4rem, 7vw, 6rem);
}
.extra-eyebrow {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #888;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}
.extra-head h2 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 0.95;
    text-transform: uppercase;
    color: #000;
}

.extra-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1.5rem;
}
.extra-card {
    padding: clamp(2.5rem, 4vw, 3.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    position: relative;
    min-height: 400px;
}
.extra-card--zwart {
    background: #000;
    color: #fff;
}
.extra-card--zwart h3 { color: #fff; }
.extra-card--zwart p { color: rgba(255,255,255,0.72); }
.extra-card--geel {
    background: var(--geel);
    color: #000;
}
.extra-card--geel .extra-num { color: #000; }
.extra-card--geel h3 { color: #000; }
.extra-card--geel p { color: #000; }
.extra-num {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.8rem;
    color: var(--geel);
}
.extra-card h3 {
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-weight: 700;
    margin: 0;
}
.extra-card p {
    font-size: clamp(0.95rem, 1vw, 1.05rem);
    line-height: 1.6;
    margin: 0;
    flex: 1;
}
.extra-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1rem;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    color: #000;
    text-decoration: none;
    border-bottom: 2px solid #000;
    align-self: flex-start;
    transition: transform .3s ease;
}
.extra-cta .extra-arrow {
    display: inline-block;
    width: 24px; height: 2px;
    background: currentColor;
    position: relative;
}
.extra-cta .extra-arrow::after {
    content: '';
    position: absolute;
    right: 0; top: 50%;
    width: 7px; height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}
.extra-cta:hover { transform: translateX(4px); }

/* Diensten CTA sectie */
.diensten-cta {
    text-align: center;
}

.diensten-cta h2 {
    font-size: clamp(2.5rem, 5vw, 4.2rem);
    line-height: 0.95;
    text-transform: uppercase;
}

/* ============================================
   VOOR WIE PAGE
   ============================================ */

.doelgroepen-detail {
    padding: clamp(5rem, 10vw, 9rem) 0;
}

.doelgroep-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 5vw, 6rem);
    align-items: center;
    padding: clamp(3rem, 5vw, 5rem) 0;
    border-bottom: 1px solid #e0e0e0;
}

.doelgroep-block:last-child {
    border-bottom: none;
}

.doelgroep-block:nth-child(even) {
    direction: rtl;
}

.doelgroep-block:nth-child(even) > * {
    direction: ltr;
}

.doelgroep-block-img img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
}

.doelgroep-block-tekst h3 {
    color: var(--zwart);
    margin-bottom: 1rem;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.doelgroep-block-tekst .label {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--geel);
    margin-bottom: 0.5rem;
    display: block;
}

.doelgroep-block-tekst p {
    margin-bottom: 1rem;
}

/* ============================================
   VOOR WIE — OVERVIEW + SUBPAGES
   ============================================ */

/* Overview grid — 3 big clickable cards */
.vw-overview {
    padding: clamp(4rem, 7vw, 7rem) 0 clamp(5rem, 9vw, 9rem);
    background: var(--wit);
}

.vw-overview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 3vw, 3rem);
}

.vw-card {
    display: grid;
    grid-template-columns: minmax(280px, 420px) 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: stretch;
    padding: clamp(1.5rem, 2.5vw, 2.5rem);
    background: #f8f5ec;
    text-decoration: none;
    color: var(--zwart);
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.45s ease, box-shadow 0.45s ease;
    position: relative;
    overflow: hidden;
}

.vw-card:hover {
    background: var(--geel);
    transform: translateY(-4px);
    box-shadow: 0 24px 50px rgba(0,0,0,0.12);
}

.vw-card-visual {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.vw-card-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.vw-card:hover .vw-card-visual img {
    transform: scale(1.04);
}

.vw-card-num {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    letter-spacing: 0.02em;
    color: var(--geel);
    line-height: 1;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.vw-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1rem, 2vw, 2rem) 0;
}

.vw-card-label {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.8rem;
    color: #808080;
    margin-bottom: 0.8rem;
}

.vw-card:hover .vw-card-label {
    color: var(--zwart);
}

.vw-card h3 {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
    line-height: 1.05;
    letter-spacing: -0.005em;
    margin-bottom: 1.2rem;
    color: var(--zwart);
}

.vw-card h3 em {
    font-style: normal;
    color: var(--geel);
    transition: color 0.3s ease;
}

.vw-card:hover h3 em {
    color: var(--zwart);
}

.vw-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: #333;
    margin-bottom: 1.4rem;
}

.vw-card-cta {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--zwart);
    margin-top: auto;
}

.vw-card-arrow {
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--zwart);
    position: relative;
    transition: width 0.3s ease;
}

.vw-card-arrow::after {
    content: '';
    position: absolute;
    right: -1px;
    top: -4px;
    border-left: 9px solid var(--zwart);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

.vw-card:hover .vw-card-arrow {
    width: 44px;
}

/* Subpage body — straight paragraphs + embedded card/checklist blocks */
.vw-body {
    background: var(--wit);
    padding: clamp(4rem, 7vw, 6rem) 0 clamp(4rem, 7vw, 6rem);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Decoratief baars-silhouet op de achtergrond — voor wie subpagina's */
.vw-body:not(.vw-body--diensten)::before {
    content: "";
    position: absolute;
    top: 8%;
    right: -7%;
    width: clamp(360px, 42vw, 620px);
    height: clamp(360px, 42vw, 620px);
    background: url('../Huisstijl/baars_2_geel.png') no-repeat center center;
    background-size: contain;
    opacity: 0.045;
    pointer-events: none;
    z-index: -1;
    transform: rotate(-10deg);
}

.vw-body:not(.vw-body--diensten)::after {
    content: "";
    position: absolute;
    bottom: 4%;
    left: -8%;
    width: clamp(280px, 36vw, 520px);
    height: clamp(280px, 36vw, 520px);
    background: url('../Huisstijl/baars_3_geel.png') no-repeat center center;
    background-size: contain;
    opacity: 0.035;
    pointer-events: none;
    z-index: -1;
    transform: rotate(8deg) scaleX(-1);
}

.vw-body-wrap {
    max-width: 820px;
    margin: 0 auto;
}

.vw-body-wrap p {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.8;
    color: #222;
    margin-bottom: 1.2rem;
}

.vw-body-wrap p:last-child {
    margin-bottom: 0;
}

/* Intro lede + decoratief streepje (diensten pagina) */
.vw-body--diensten {
    position: relative;
    padding-top: clamp(4rem, 7vw, 6rem);
    padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}

.vw-body--diensten + .diensten-lijst {
    padding-top: clamp(2rem, 3.5vw, 3rem);
}

.vw-body--diensten::before {
    content: "";
    position: absolute;
    top: clamp(2rem, 4vw, 3.5rem);
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 4px;
    background: var(--geel);
}

.vw-body--diensten .vw-body-wrap > p:first-child {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 600;
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    line-height: 1.4;
    color: var(--zwart);
    letter-spacing: -0.005em;
    margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
    text-wrap: pretty;
}

.vw-body .vw-mix-grid,
.vw-body .vw-programma-grid {
    max-width: 820px;
    margin: clamp(2rem, 3.5vw, 3.5rem) auto;
}

.vw-body-wrap .dienst-photo {
    max-width: 100%;
    aspect-ratio: 4 / 3;
}

.vw-body-photo {
    margin: clamp(2rem, 4vw, 3rem) 0;
}
.vw-body-photo img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.05);
}

.vw-body-wrap .vw-body-intro {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: clamp(1.15rem, 1.5vw, 1.35rem);
    color: var(--zwart);
    margin-top: 1.5rem;
    margin-bottom: 0;
}

/* Subpage intro — two-column lede + body */
.vw-intro {
    background: var(--wit);
    padding: clamp(4rem, 7vw, 6rem) 0 clamp(3rem, 5vw, 4.5rem);
}

.vw-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

.vw-intro-lede p {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    line-height: 1.25;
    color: var(--zwart);
    letter-spacing: -0.005em;
    text-transform: none;
}

.vw-intro-lede strong {
    color: var(--zwart);
    background: var(--geel);
    padding: 0 6px;
}

.vw-intro-body p {
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: 1.8;
    color: #222;
    margin-bottom: 1.1rem;
}

.vw-intro-body p:last-child {
    margin-bottom: 0;
}

/* Middelenmix section — 3 numbered cards */
.vw-mix {
    background: #f8f5ec;
    padding: clamp(4rem, 8vw, 7rem) 0;
    position: relative;
    overflow: hidden;
}

.vw-mix::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../Huisstijl/stekelbaars_barcode.png') no-repeat left top;
    background-size: auto 40%;
    opacity: 0.04;
    pointer-events: none;
}

.vw-mix-head {
    max-width: 760px;
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
    position: relative;
    z-index: 1;
}

.vw-mix-eyebrow {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 0.8rem;
    color: var(--zwart);
    margin-bottom: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.vw-mix-eyebrow::before {
    content: '';
    width: 36px;
    height: 2px;
    background: var(--geel);
}

.vw-mix-head h2 {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--zwart);
    margin-bottom: 1rem;
}

.vw-mix-head h2 em {
    font-style: normal;
    color: var(--geel);
    background: var(--zwart);
    padding: 0 0.2em;
    display: inline-block;
}

.vw-mix-head p {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.7;
    color: #333;
    max-width: 620px;
}

/* Editorial vertical stack — labels left, body right, horizontal dividers */
.vw-mix-grid {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.vw-mix-card {
    display: grid;
    grid-template-columns: clamp(180px, 28%, 280px) 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    padding: clamp(1.75rem, 3vw, 2.5rem) 0;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    align-items: start;
    position: relative;
    transition: padding-left 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.vw-mix-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 0;
    background: var(--geel);
    transform: translate(-1.5rem, -50%);
    transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), height 0.4s ease;
    pointer-events: none;
}

.vw-mix-card:hover {
    padding-left: 1.5rem;
}

.vw-mix-card:hover::before {
    width: 0.75rem;
    height: 0.75rem;
}

.vw-mix-card:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.vw-mix-card h3 {
    justify-self: start;
    align-self: start;
    margin: 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--geel);
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-size: clamp(1.1rem, 1.4vw, 1.35rem);
    line-height: 1.1;
    color: var(--zwart);
    transition: color 0.3s ease;
}

.vw-mix-card p {
    margin: 0;
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.7;
    color: var(--zwart);
}

.vw-mix-num {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.25em;
    color: #808080;
    margin-bottom: 0.6rem;
}

.vw-mix-card h3 {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(1.2rem, 1.6vw, 1.45rem);
    letter-spacing: -0.005em;
    margin-bottom: 0.9rem;
    color: var(--zwart);
}

.vw-mix-card p {
    font-size: 0.98rem;
    line-height: 1.65;
    color: #333;
}

/* Pull-quote block */
.vw-pull {
    background: var(--wit);
    padding: clamp(4rem, 8vw, 7rem) 0;
}

.vw-pull-inner {
    max-width: 920px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 2vw, 2rem);
}

.vw-pull-mark {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: var(--geel);
    margin-bottom: 1rem;
    letter-spacing: -0.1em;
}

.vw-pull-quote {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.25;
    color: var(--zwart);
    letter-spacing: -0.005em;
    margin-bottom: 1.5rem;
}

.vw-pull-quote em {
    font-style: normal;
    color: var(--geel);
    background: var(--zwart);
    padding: 0 0.2em;
}

.vw-pull-body {
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.75;
    color: #333;
    max-width: 720px;
    margin: 0 auto;
}

/* Credentials block — photo + body */
.vw-creds {
    background: var(--zwart);
    color: var(--wit);
    padding: clamp(4rem, 8vw, 7rem) 0;
}

.vw-creds-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
}

.vw-creds-visual {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.vw-creds-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) brightness(0.85) contrast(1.1);
}

.vw-creds-barcode {
    position: absolute;
    inset: 0;
    background: url('../Huisstijl/stekelbaars_barcode.png') no-repeat right bottom;
    background-size: auto 60%;
    opacity: 0.15;
    mix-blend-mode: screen;
    pointer-events: none;
}

.vw-creds-eyebrow {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 0.8rem;
    color: var(--geel);
    margin-bottom: 1rem;
}

.vw-creds-body h3 {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.05;
    letter-spacing: -0.005em;
    margin-bottom: 1.4rem;
    color: var(--wit);
}

.vw-creds-body h3 em {
    font-style: normal;
    color: var(--geel);
}

.vw-creds-body p {
    font-size: clamp(1rem, 1.15vw, 1.1rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
}

.vw-creds-body strong {
    color: var(--wit);
    font-weight: 700;
}

/* Programma (B&W page) — 4-item checklist */
.vw-programma {
    background: #f8f5ec;
    padding: clamp(4rem, 8vw, 7rem) 0;
    position: relative;
    overflow: hidden;
}

.vw-programma::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../Huisstijl/stekelbaars_barcode.png') no-repeat right center;
    background-size: auto 70%;
    opacity: 0.04;
    pointer-events: none;
}

.vw-programma-head {
    max-width: 800px;
    margin-bottom: clamp(2.5rem, 4vw, 4rem);
    position: relative;
    z-index: 1;
}

.vw-programma-badge {
    display: inline-block;
    background: var(--geel);
    color: var(--zwart);
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.8rem;
    padding: 6px 14px;
    margin-bottom: 1.2rem;
}

.vw-programma-head h2 {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--zwart);
    margin-bottom: 1.2rem;
}

.vw-programma-head h2 em {
    font-style: normal;
    color: var(--geel);
    background: var(--zwart);
    padding: 0 0.2em;
    display: inline-block;
}

.vw-programma-lede {
    font-size: clamp(1.1rem, 1.4vw, 1.3rem);
    line-height: 1.55;
    color: #333;
    max-width: 620px;
}

.vw-programma-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.2rem, 2vw, 2rem);
    position: relative;
    z-index: 1;
}

.vw-programma-item {
    background: var(--wit);
    padding: clamp(1.6rem, 2.3vw, 2.2rem) clamp(1.6rem, 2.3vw, 2.2rem) clamp(1.6rem, 2.3vw, 2.2rem) clamp(3.8rem, 5vw, 5rem);
    position: relative;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.vw-programma-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.08);
}

.vw-programma-check {
    position: absolute;
    left: clamp(1.2rem, 1.8vw, 1.8rem);
    top: clamp(1.8rem, 2.5vw, 2.4rem);
    width: 28px;
    height: 28px;
    background: var(--geel);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vw-programma-check::after {
    content: '';
    width: 12px;
    height: 6px;
    border-left: 2.5px solid var(--zwart);
    border-bottom: 2.5px solid var(--zwart);
    transform: rotate(-45deg) translate(2px, -1px);
}

.vw-programma-item h3 {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    letter-spacing: -0.005em;
    color: var(--zwart);
    margin-bottom: 0.7rem;
    line-height: 1.15;
}

.vw-programma-item p {
    font-size: 0.97rem;
    line-height: 1.65;
    color: #333;
}

/* CTA footer-blok (voor subpages + overview) */
.vw-cta {
    text-align: center;
    padding: clamp(4rem, 8vw, 7rem) 0;
    position: relative;
    overflow: hidden;
}

.vw-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../Huisstijl/stekelbaars_barcode.png') no-repeat center;
    background-size: auto 90%;
    opacity: 0.04;
    pointer-events: none;
}

.vw-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}

.vw-cta h2 {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    line-height: 1;
    letter-spacing: -0.01em;
    margin-bottom: 1.2rem;
    color: var(--wit);
}

.vw-cta h2 em {
    font-style: normal;
    color: var(--geel);
}

.vw-cta p {
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.65;
    max-width: 560px;
    margin: 0 auto 2rem;
}

.vw-cta-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.vw-cta-back {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.85rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.vw-cta-back:hover {
    color: var(--geel);
}

/* Witte variant (subpagina's voor-wie) */
.vw-cta:not(.section--zwart) {
    background: var(--wit);
}
.vw-cta:not(.section--zwart) h2 { color: var(--zwart); }
.vw-cta:not(.section--zwart) h2 em { color: var(--geel); }
.vw-cta:not(.section--zwart) p { color: var(--zwart); }
.vw-cta:not(.section--zwart) .vw-cta-back { color: rgba(0, 0, 0, 0.55); }
.vw-cta:not(.section--zwart) .vw-cta-back:hover { color: var(--zwart); }
.vw-cta:not(.section--zwart)::before { filter: invert(1); opacity: 0.04; }

/* Gele variant (overview voor-wie + voor-wie-bw) — matched met diensten-cta */
.vw-cta.section--geel { background: var(--geel); }
.vw-cta.section--geel::before { display: none; }
.vw-cta.section--geel h2 em { color: var(--wit); }
.vw-cta.section--geel .vw-cta-back { color: rgba(0, 0, 0, 0.55); }
.vw-cta.section--geel .vw-cta-back:hover { color: var(--zwart); }

@media (max-width: 900px) {
    .vw-card {
        grid-template-columns: 1fr;
    }
    .vw-intro-grid,
    .vw-creds-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .vw-mix-grid,
    .vw-programma-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   CRISIS PAGE
   ============================================ */

.crisis-hero {
    background: var(--zwart);
    color: var(--wit);
    padding: clamp(10rem, 18vw, 14rem) 0 clamp(5rem, 10vw, 8rem);
    position: relative;
    overflow: hidden;
}

.crisis-hero::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: url('../Huisstijl/stekelbaars_barcode.png') no-repeat right center;
    background-size: auto 150%;
    opacity: 0.05;
    pointer-events: none;
}

.crisis-hero .crisis-label {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--geel);
    margin-bottom: 1.5rem;
}

.crisis-hero h1 {
    font-size: clamp(3rem, 8vw, 7rem);
    margin-bottom: 2rem;
}

.crisis-hero p {
    color: rgba(255, 255, 255, 0.85);
    max-width: 650px;
    font-size: clamp(1.1rem, 1.5vw, 1.3rem);
}

.crisis-content {
    padding: clamp(5rem, 10vw, 9rem) 0;
}

.crisis-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-top: 3rem;
}

.crisis-intro {
    padding: clamp(4rem, 8vw, 7rem) 0 0;
}

.crisis-intro p {
    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    line-height: 1.7;
    color: var(--zwart);
    max-width: 880px;
    margin: 0 auto 1.5rem;
}

.crisis-intro p:last-child {
    margin-bottom: 0;
}

.crisis-card {
    padding: clamp(2rem, 3vw, 3rem);
    border-left: 4px solid var(--geel);
}

.crisis-card h3 {
    margin-bottom: 1rem;
}

.crisis-card p {
    color: #333;
}

.crisis-cta {
    background: var(--geel);
    padding: clamp(4rem, 8vw, 6rem) 0;
    text-align: center;
}

.crisis-cta h2 {
    margin-bottom: 1.5rem;
}

.crisis-cta p {
    max-width: 600px;
    margin: 0 auto 2rem;
}

/* ============================================
   WIE WE ZIJN PAGE
   ============================================ */

/* Team page: full black background */
.team-page {
    background: var(--geel);
    color: var(--zwart);
    padding: clamp(4rem, 7vw, 7rem) 0 clamp(5rem, 8vw, 8rem);
    position: relative;
    overflow: hidden;
}

.team-page--no-hero {
    padding-top: clamp(7rem, 11vw, 10rem);
}

.team-page-visie {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.team-visie-sectie {
    background: var(--wit);
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.team-visie-sectie .wie-visie-content p {
    color: var(--zwart);
}

.wie-visie-content--centered {
    text-align: center;
    margin: 0 auto;
}

.wie-visie-content--centered h2 {
    color: var(--geel);
    margin-bottom: 1.5rem;
}

.wie-visie-visje {
    height: 2.5rem;
    width: auto;
    margin-top: 2rem;
    opacity: 0.6;
}

/* Visje fade: zwart → geel als in beeld */
.wie-visje-fade {
    position: relative;
    display: inline-block;
    margin-top: 2rem;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
.wie-visje-fade .wie-visie-visje {
    margin-top: 0;
    display: block;
}
.wie-visje-fade .wie-visje-fade-geel {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1.2s ease-out;
}
.wie-visje-fade .wie-visje-fade-zwart {
    transition: opacity 1.2s ease-out;
}
.wie-visje-fade.visible .wie-visje-fade-zwart { opacity: 0; }
.wie-visje-fade.visible .wie-visje-fade-geel { opacity: 0.6; }

.wie-visie-content {
    max-width: 550px;
}

.wie-visie-content p {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.85;
    margin-bottom: 1.5rem;
    color: var(--zwart);
}

.wie-visie-content p:last-child {
    margin-bottom: 0;
}

/* Decoratieve baarzen */
.wie-visie-baars {
    position: absolute;
    right: -22%;
    top: 12%;
    transform: translateY(-50%);
    width: 48%;
    height: auto;
    pointer-events: none;
    opacity: 0.08;
    z-index: 0;
}

.wie-visie-baars--left {
    right: auto;
    left: -22%;
    top: 70%;
    transform: translateY(-50%) scaleX(-1);
}

/* Team grid: 2 kaarten per rij op desktop */
.team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(3rem, 5vw, 5rem) clamp(2rem, 3vw, 3rem);
    position: relative;
    z-index: 1;
    max-width: 1120px;
    margin: 0 auto;
}

/* Team member card */
.team-member {
    display: flex;
    flex-direction: column;
    background: transparent;
    margin-bottom: 0;
}

.team-member-img {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: visible;
    background: #000;
}

.team-member-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.05);
}

/* Per-foto inzoom (bv. Wilmar): wrapper klipt, img schaalt — nameplate blijft buiten clip */
.team-img-zoom {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.team-img-zoom img {
    transform: scale(1.4);
}

.team-member-img--placeholder {
    background: #1a1a1a;
    background-image: repeating-linear-gradient(
        45deg,
        #1a1a1a 0,
        #1a1a1a 10px,
        #222 10px,
        #222 20px
    );
}

.team-member-name {
    position: absolute;
    left: 0;
    bottom: -18px;
    background: var(--zwart);
    color: var(--geel);
    margin: 0;
    padding: 12px clamp(18px, 2.5vw, 28px);
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 800;
    font-size: clamp(1.2rem, 1.9vw, 1.7rem);
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    z-index: 2;
    max-width: calc(100% - 40px);
}

.team-member-tekst {
    background: var(--wit);
    padding: clamp(2rem, 3vw, 2.5rem);
    padding-top: calc(18px + clamp(1.75rem, 3vw, 2.5rem));
    flex: 1;
    display: flex;
    flex-direction: column;
}

.team-member-tekst p {
    color: var(--zwart);
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.65;
}

.team-member-rol {
    display: inline-block;
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--zwart);
    margin: 0 0 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--geel);
}

.team-member-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 2px solid var(--geel);
}

.team-member-tekst > p:last-of-type {
    margin-bottom: 1.5rem;
}

.team-member-contact a {
    color: var(--zwart);
    text-decoration: none;
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.team-member-contact a:hover {
    border-bottom-color: var(--zwart);
}

.team-values {
    background: var(--zwart);
    color: var(--wit);
    padding: clamp(5rem, 10vw, 9rem) 0;
}

.team-values h2 {
    text-align: center;
    margin-bottom: 3rem;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.value-card {
    text-align: center;
    padding: 2rem;
}

.value-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    color: var(--geel);
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
}

.value-card h3 {
    color: var(--geel);
    margin-bottom: 1rem;
}

.value-card p {
    color: rgba(255, 255, 255, 0.85);
}

/* ============================================
   NIEUWS PAGE
   ============================================ */

.nieuws-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    padding: clamp(5rem, 10vw, 9rem) 0;
}

.nieuws-card {
    background: var(--wit);
    border: 1px solid #e0e0e0;
    overflow: hidden;
    transition: box-shadow 0.3s;
}

.nieuws-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.nieuws-card-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
}

.nieuws-card-body {
    padding: 1.5rem;
}

.nieuws-card-date {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--grijs);
    margin-bottom: 0.5rem;
}

.nieuws-card-body h3 {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    text-transform: none;
    letter-spacing: normal;
}

.nieuws-card-body p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.7;
}

.nieuws-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 0;
    color: var(--grijs);
}

/* ============================================
   CONTACT PAGE
   ============================================ */

.contact-content {
    padding: clamp(7rem, 12vw, 11rem) 0 clamp(5rem, 10vw, 9rem);
    min-height: 70vh;
    background: var(--geel);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.contact-content .wz-floaters {
    z-index: 0;
}

.contact-content .container {
    position: relative;
    z-index: 2;
}

@keyframes contactFishFloat {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(10px, -16px); }
}

@keyframes contactFishFloatFlip {
    0%, 100% { transform: translate(0, 0) scaleX(-1); }
    50%      { transform: translate(-10px, -16px) scaleX(-1); }
}

.contact-content .wz-floaters img {
    animation: contactFishFloat 7s ease-in-out infinite;
    will-change: transform, translate;
    transition: translate 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.contact-content .wz-floaters img.wz-fish-flip {
    animation-name: contactFishFloatFlip;
}

.contact-content .wz-floaters img:nth-child(1) { animation-duration: 7.5s; animation-delay: 0s; }
.contact-content .wz-floaters img:nth-child(2) { animation-duration: 9s;   animation-delay: -3s; }
.contact-content .wz-floaters img:nth-child(3) { animation-duration: 8s;   animation-delay: -5s; }

.contact-content .contact-animated-heading {
    color: var(--zwart);
    position: relative;
    z-index: 3;
}

/* Gele halo achter de letters zodat zwemmende visjes niet door de tekst snijden */
.contact-content .contact-animated-heading .contact-word {
    text-shadow:
        0 0 14px var(--geel),
        0 0 14px var(--geel),
        0 0 22px var(--geel),
        0 0 22px var(--geel),
        0 0 30px var(--geel);
}

.contact-content .contact-detail-label {
    color: var(--wit);
    background: var(--zwart);
    padding: 0.35rem 0.7rem;
    display: inline-block;
    margin-bottom: 0.6rem;
}

.contact-content .contact-detail a {
    border-bottom-color: var(--zwart);
}

@keyframes contactSubtleZoom {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 5vw, 6rem);
    align-items: start;
}

.contact-details {
    /* Compenseer Barlow cap-leading zodat eerste detail-label gelijk staat met cap-top van h2 */
    padding-top: 0.15em;
}

.contact-details .contact-detail:first-child {
    margin-top: 0;
}

.contact-info h2 {
    margin-bottom: 2rem;
}

.contact-animated-heading {
    color: var(--geel);
    font-size: clamp(2.75rem, 5.5vw, 5rem);
    line-height: 0.95;
    letter-spacing: -0.005em;
}

.contact-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.3em);
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}

.contact-animated-heading.visible .contact-word {
    opacity: 1;
    transform: translateY(0);
}

.contact-animated-heading.visible .contact-word:nth-of-type(1) { transition-delay: 0.05s; }
.contact-animated-heading.visible .contact-word:nth-of-type(2) { transition-delay: 0.15s; }
.contact-animated-heading.visible .contact-word:nth-of-type(3) { transition-delay: 0.25s; }

.contact-info p {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.contact-detail {
    margin-bottom: 2rem;
}

.contact-detail-label {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--grijs);
    margin-bottom: 0.3rem;
}

.contact-detail a,
.contact-detail p {
    font-size: 1.1rem;
    color: var(--zwart);
    text-decoration: none;
}

.contact-detail a {
    border-bottom: 2px solid var(--geel);
    transition: background 0.3s;
}

.contact-detail a:hover {
    background: var(--geel);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-grid > .contact-animated-heading {
    grid-column: 1 / -1;
    margin-bottom: 0.6rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.form-group input,
.form-group textarea {
    padding: 1rem;
    border: 2px solid #e0e0e0;
    font-family: Calibri, 'Segoe UI', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s;
    background: var(--wit);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--geel);
}

.form-group textarea {
    min-height: 150px;
    resize: vertical;
}

.form-hp {
    position: absolute;
    left: -9999px;
}

.form-group--recaptcha {
    margin-top: 0.5rem;
}

.form-feedback {
    margin-top: 1.25rem;
    padding: 1rem 1.2rem;
    font-family: Calibri, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    border-left: 4px solid var(--zwart);
    background: rgba(0, 0, 0, 0.08);
    color: var(--zwart);
}

.form-feedback--success {
    border-left-color: var(--zwart);
    background: rgba(0, 0, 0, 0.12);
}

.form-feedback--error {
    border-left-color: #c0392b;
    background: rgba(192, 57, 43, 0.10);
    color: #8b1e14;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
    display: inline-block;
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 1rem 2.5rem;
    text-decoration: none;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
}

.btn--geel {
    background: var(--geel);
    color: var(--zwart);
}

.btn--geel:hover {
    background: var(--wit);
    color: var(--zwart);
}

.btn--zwart {
    background: var(--zwart);
    color: var(--wit);
}

.btn--zwart:hover {
    background: var(--geel);
    color: var(--zwart);
}

.btn--outline {
    background: transparent;
    border: 2px solid var(--zwart);
    color: var(--zwart);
}

.btn--outline:hover {
    background: var(--zwart);
    color: var(--wit);
}

.btn--wit {
    background: var(--wit);
    color: var(--zwart);
}

.btn--wit:hover {
    background: var(--zwart);
    color: var(--wit);
}

/* ============================================
   LINKS
   ============================================ */

.link-geel {
    color: var(--geel);
    text-decoration: none;
    font-weight: 700;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s;
}

.link-geel:hover {
    border-bottom-color: var(--geel);
}

.link-zwart {
    color: var(--zwart);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--geel);
    transition: background 0.3s;
}

.link-zwart:hover {
    background: var(--geel);
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
    background: var(--zwart);
    color: var(--wit);
    padding: clamp(3rem, 5vw, 5rem) 0;
}

.footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.footer-brand .footer-logo {
    height: 20px;
    width: auto;
    margin-bottom: 1rem;
}

.footer-brand p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 250px;
}

.footer-nav h4 {
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.footer-nav ul {
    list-style: none;
}

.footer-nav ul li {
    margin-bottom: 0.5rem;
}

.footer-nav ul a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.95rem;
    transition: opacity 0.3s;
}

.footer-nav ul a:hover {
    opacity: 0.6;
}

.footer-contact h4 {
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
    text-transform: uppercase;
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
}

.footer-contact a {
    color: var(--geel);
    text-decoration: none;
    border-bottom: 2px solid var(--geel);
    font-weight: 700;
    transition: opacity 0.3s;
}

.footer-contact a:hover {
    opacity: 0.7;
}

.footer-bottom {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   HOME SNAP SECTIONS (NEW)
   ============================================ */

/* Section 3: Onze methode */
.section-methode {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--geel);
}

.methode-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 clamp(1.5rem, 4vw, 4rem);
    max-width: var(--content-max);
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 1;
}

.methode-heading {
    margin-bottom: clamp(2rem, 4vh, 4rem);
    color: var(--zwart);
}

.methode-body {
    flex: 1;
    max-width: 500px;
    position: relative;
    z-index: 3;
}

.methode-foto {
    position: absolute;
    top: 0;
    left: 55vw;
    width: 35vw;
    height: 100%;
    overflow: hidden;
}

.methode-foto-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
}

.methode-body p {
    font-family: Calibri, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.85;
    margin-bottom: 1.2rem;
    color: var(--zwart);
}

.methode-body p:last-child {
    margin-bottom: 0;
}

.methode-arrow-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

/* Section 2: WIJ ZIJN WIJ */
.section-stroom {
    background: var(--geel);
    padding: 0 0 clamp(4rem, 7vh, 6rem);
    position: relative;
    min-height: 100vh;
    display: block;
    overflow: clip;
    z-index: 2;
}

.stroom-baars-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 900px;
    filter: brightness(0);
    opacity: 0.03;
    pointer-events: none;
    will-change: transform;
    z-index: 0;
}

.stroom-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(5rem, 11vh, 9rem) clamp(1.5rem, 4vw, 4rem) 0;
    gap: clamp(2rem, 5vh, 4rem);
    max-width: var(--content-wide);
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: center;
}

.stroom-heading {
    flex: 0 0 auto;
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: clamp(3.5rem, 9.25vw, 8.75rem);
    text-transform: uppercase;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--wit);
    white-space: nowrap;
    margin: 0;
    will-change: transform, opacity;
    text-align: center;
    opacity: 0;
}

/* Word-reveal stagger uitgeschakeld: heading schuift als blok in via JS */
.stroom-word-anim,
.stroom-heading.visible .stroom-word-anim {
    display: inline-block;
    opacity: 1;
    transform: none;
    transition: none;
    margin-right: 0.2em;
}
.stroom-word-anim:last-child { margin-right: 0; }

.stroom-cta {
    margin-top: 1.5rem;
    background: var(--wit);
    padding: 0.7rem 1.2rem;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s ease;
}
.stroom-cta:hover { background: var(--zwart); }
.stroom-cta:hover h3 { color: var(--geel); }

.stroom-cta h3 {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--zwart);
    margin: 0;
    line-height: 1.2;
}

.stroom-tekst {
    flex: 0 0 auto;
    max-width: clamp(20rem, 50vw, 36rem);
    padding: 0;
    text-align: center;
    will-change: transform, opacity;
    opacity: 0;
}

.stroom-tekst p {
    font-family: Calibri, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.85;
    margin-bottom: 1.2rem;
    color: var(--zwart);
}

.stroom-tekst p:last-child {
    margin-bottom: 0;
}

/* Partners onderin sectie 2 — logo-rij ipv testimonials */
.stroom-partners {
    position: relative;
    z-index: 1;
    max-width: var(--content-wide);
    margin: 14vh auto 0;
    padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 4rem) 0;
    border-top: 2px solid rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.stroom-partners-label {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--zwart);
    margin: 0;
    text-align: center;
}

.stroom-partners-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 5vw, 4.5rem);
    width: 100%;
}

.stroom-partner-logo {
    height: clamp(40px, 5vw, 60px);
    width: auto;
    max-width: 160px;
    object-fit: contain;
    filter: grayscale(100%) brightness(0);
    opacity: 0.78;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.stroom-partner-logo:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* JPG-logos met witte achtergrond: multiply laat wit samenvallen met geel */
.stroom-partner-logo--multiply {
    filter: none;
    mix-blend-mode: multiply;
}

.stroom-partner-logo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    border: 2px dashed rgba(0, 0, 0, 0.35);
    background: transparent;
    color: rgba(0, 0, 0, 0.5);
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    filter: none;
    opacity: 1;
}

.stroom-partner-logo--placeholder:hover {
    opacity: 1;
    transform: none;
}

@media (max-width: 900px) {
    .stroom-partners-logos {
        gap: 2rem 2.5rem;
    }
}

/* Section 4: Voor wie werken we (licht drijvend) */
.section-watzoek {
    background: var(--geel);
    padding: 100px 0;
    min-height: 100vh;
    align-items: stretch;
    position: relative;
    overflow: hidden;
}
.section-watzoek .container {
    max-width: var(--content-wide);
    position: relative; z-index: 2;
    display: flex; flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 200px);
    pointer-events: none;
}
.section-watzoek .wz-head,
.section-watzoek .wz-grid {
    pointer-events: none;
}
.section-watzoek .wz-title,
.section-watzoek .wz-eyebrow,
.section-watzoek .wz-card {
    pointer-events: auto;
}
.wz-floaters { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.wz-floaters img {
    position: absolute; width: 220px; opacity: 0.9;
    will-change: transform, translate;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,0.06));
    transform: translate(0, 0) scaleX(1);
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
                translate 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.wz-floaters img.wz-fish-flip { transform: translate(0, 0) scaleX(-1); }
.wz-floaters img.wz-fish-hovered { transform: translate(14px, -6px) scaleX(1); }
.wz-floaters img.wz-fish-flip.wz-fish-hovered { transform: translate(-14px, -6px) scaleX(-1); }
.wz-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 40px; flex-wrap: wrap;
    margin-bottom: 70px;
}
.wz-eyebrow {
    font-family: "Barlow Semi Condensed", Calibri, sans-serif;
    font-weight: 700; text-transform: uppercase;
    font-size: 13px; letter-spacing: 0.25em; color: #000;
}
.wz-eyebrow { display: none; }
.wz-eyebrow::before { content: "— "; }
.wz-title {
    font-family: "Barlow Semi Condensed", Calibri, sans-serif;
    font-weight: 800; text-transform: uppercase;
    font-size: clamp(56px, 7.5vw, 120px); line-height: 0.95;
    color: #000; max-width: none; letter-spacing: -0.005em;
    white-space: nowrap;
}
.wz-title-mobile-br { display: none; }
.cb-mobile-hyphen, .cb-mobile-br { display: none; }
@media (max-width: 900px) {
    .cb-mobile-hyphen { display: inline; }
    .cb-mobile-br { display: inline; }
}
.wz-word-anim {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.3em);
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.wz-head.visible .wz-word-anim { opacity: 1; transform: translateY(0); }
.wz-head.visible .wz-word-anim:nth-child(1)  { transition-delay: 0.05s; }
.wz-head.visible .wz-word-anim:nth-child(2)  { transition-delay: 0.15s; }
.wz-head.visible .wz-word-anim:nth-child(3)  { transition-delay: 0.25s; }
.wz-head.visible .wz-word-anim:nth-child(4)  { transition-delay: 0.35s; }
.wz-head.visible .wz-word-anim:nth-child(5)  { transition-delay: 0.45s; }
.wz-head.visible .wz-word-anim:nth-child(6)  { transition-delay: 0.55s; }
.wz-head.visible .wz-word-anim:nth-child(7)  { transition-delay: 0.65s; }
.wz-head.visible .wz-word-anim:nth-child(8)  { transition-delay: 0.75s; }
.wz-head.visible .wz-word-anim:nth-child(9)  { transition-delay: 0.85s; }
.wz-head.visible .wz-word-anim:nth-child(10) { transition-delay: 0.95s; }
.wz-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
}
.wz-card {
    background: rgba(255,255,255,0.78);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid transparent;
    padding: 44px 36px 38px;
    text-decoration: none; color: #000;
    display: flex; flex-direction: column; gap: 20px;
    min-height: 380px;
    transform: translateY(0) scale(1);
    transition: transform 0.45s cubic-bezier(0.34, 1.3, 0.64, 1), border-color 0.4s ease, background 1.2s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease, opacity 0.8s ease !important;
    box-shadow: 0 2px 0 rgba(0,0,0,0);
}
.wz-card.reveal { opacity: 0; transform: translateY(40px) scale(0.96); }
.wz-card.reveal.visible { opacity: 1; transform: translateY(0) scale(1); }
.wz-card.reveal.visible:hover { border-color: transparent; transform: translateY(-5px) scale(1.025); background: var(--wit); box-shadow: 0 18px 40px rgba(0,0,0,0.12); }
.wz-card:hover { border-color: transparent; transform: translateY(-5px) scale(1.025); background: var(--wit); box-shadow: 0 18px 40px rgba(0,0,0,0.12); }
.wz-card-num {
    font-family: "Barlow Semi Condensed", Calibri, sans-serif;
    font-weight: 700; text-transform: uppercase;
    font-size: 13px; letter-spacing: 0.18em;
}
.wz-card h3 {
    font-family: "Barlow Semi Condensed", Calibri, sans-serif;
    font-weight: 800; text-transform: uppercase;
    font-size: 30px; line-height: 1.05; letter-spacing: -0.005em;
}
.wz-card p {
    font-family: Calibri, 'Segoe UI', sans-serif;
    font-size: 16px; line-height: 1.65; color: #333; flex: 1;
}
.wz-card-cta {
    font-family: "Barlow Semi Condensed", Calibri, sans-serif;
    font-weight: 700; text-transform: uppercase;
    font-size: 12px; letter-spacing: 0.18em;
    padding-top: 12px; border-top: 1px solid #e6e0d0;
    display: inline-flex; align-items: center; gap: 12px;
    color: #000;
    transition: color 0.2s ease;
}
.wz-card-cta::after {
    content: "";
    width: 28px;
    height: 14px;
    background: url('../Huisstijl/stekelbaars_pijl.png') no-repeat right center;
    background-size: contain;
    transition: transform 0.25s ease;
}
.wz-card:hover .wz-card-cta { color: #000; }
.wz-card:hover .wz-card-cta::after { transform: translateX(4px); }
@media (max-width: 900px) {
    .wz-grid { grid-template-columns: 1fr; }
    .wz-floaters img { width: 130px; }
}

/* (legacy .section-watzoek / .watzoek-* styles removed) */

/* Section 5: Waar zijn we goed in — foto + tekst overlay */
.section-wie {
    background: var(--wit);
    padding: 0;
    position: relative;
}

.wie-split {
    display: grid;
    grid-template-columns: 45% 55%;
    min-height: 100vh;
}

.wie-split .wie-split-text { order: 1; }
.wie-split .wie-split-photo { order: 2; }

.wie-split-photo {
    position: relative;
    overflow: hidden;
    display: block;
    text-decoration: none;
    color: inherit;
}

.wie-split-photo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.05);
    animation: wieSubtleZoom 22s ease-in-out infinite;
    will-change: transform;
}

@keyframes wieSubtleZoom {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

.wie-split-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    text-align: right;
    padding: clamp(2rem, 5vw, 5rem);
    background: var(--wit);
}

.wie-intro-heading {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 800;
    font-size: clamp(3.5rem, 7.5vw, 7.5rem);
    text-transform: uppercase;
    letter-spacing: -0.005em;
    color: var(--geel);
    margin-bottom: 1.5rem;
    line-height: 0.95;
}

/* Hotspots on wie-split photo (per-person hover reveal) */
.wie-split-photo .foto-hotspot {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
.wie-split-photo .foto-hotspot-ring {
    position: absolute;
    width: 240px;
    height: 240px;
    border: 18px solid rgba(254, 219, 0, 0.55);
    opacity: 0;
    transition: opacity 0.3s ease-out;
    pointer-events: auto;
    cursor: pointer;
}
.wie-split-photo .foto-hotspot-naam {
    position: absolute;
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--geel);
    opacity: 0;
    white-space: nowrap;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    transition: opacity 0.3s ease-out;
    pointer-events: none;
}
.wie-split-photo .foto-hotspot:hover .foto-hotspot-ring,
.wie-split-photo .foto-hotspot:hover .foto-hotspot-naam {
    opacity: 1;
}
.wie-word-anim {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.3em);
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.wie-intro-heading.visible .wie-word-anim { opacity: 1; transform: translateY(0); }
.wie-intro-heading.visible .wie-word-anim:nth-of-type(1) { transition-delay: 0.1s; }
.wie-intro-heading.visible .wie-word-anim:nth-of-type(2) { transition-delay: 0.25s; }
.wie-intro-heading.visible .wie-word-anim:nth-of-type(3) { transition-delay: 0.4s; }
.wie-intro-heading.visible .wie-word-anim:nth-of-type(4) { transition-delay: 0.55s; }
.wie-intro-heading.visible .wie-word-anim:nth-of-type(5) { transition-delay: 0.7s; }

.wie-intro-tekst {
    max-width: min(100%, 540px);
}

.wie-intro-tekst p {
    margin-bottom: 1rem;
    font-size: clamp(1rem, 1.1vw, 1.1rem);
    line-height: 1.7;
    color: var(--zwart);
}

.wie-intro-tekst p:last-child {
    margin-bottom: 0;
}

.wie-cta {
    display: inline-flex;
    align-self: flex-end;
    align-items: center;
    gap: 14px;
    margin-top: 1.75rem;
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #000;
    background: var(--geel);
    padding: 14px 20px;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.wie-cta:hover {
    transform: translateX(6px);
    background: #000;
    color: var(--geel);
}

.wie-cta-arrow {
    width: 28px;
    height: 14px;
    flex-shrink: 0;
    background: url('../Huisstijl/stekelbaars_pijl.png') no-repeat right center;
    background-size: contain;
    filter: brightness(0);
    transition: filter 0.2s ease;
}

.wie-cta:hover .wie-cta-arrow {
    filter: brightness(1);
}

/* Section 6: Testimonials (50vh) */
.section-testimonials {
    background: var(--lichtgrijs);
    padding: 0;
}

.section-testimonials .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.testimonial-slider {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.testimonial-slider-window {
    flex: 1;
    overflow: hidden;
}

.testimonial-slider-track {
    display: flex;
    gap: 2rem;
    transition: transform 0.5s ease;
}

.testimonial-nav {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.testimonial-nav:hover {
    opacity: 1;
}

.testimonial-nav img {
    height: 60px;
    width: auto;
}

.testimonial-nav--prev img {
    transform: scaleX(-1);
}

.testimonial-nav--next img {
    /* fish naturally faces right */
}

.testimonial-card-mini {
    min-width: 320px;
    max-width: 320px;
    background: var(--wit);
    padding: 2rem;
    flex-shrink: 0;
    position: relative;
}

.testimonial-card-mini::before {
    content: '\201C';
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-size: 4rem;
    color: var(--geel);
    position: absolute;
    top: 0.3rem;
    left: 1rem;
    line-height: 1;
}

.testimonial-card-mini blockquote {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #333;
    font-style: italic;
    padding-top: 1.2rem;
    margin-bottom: 1rem;
}

/* Slider replaces old ticker animation */

/* Section 7: Contact CTA (50vh) */
.section-contact {
    background: var(--wit);
    color: var(--zwart);
    padding: 0;
}

.section-contact .container {
    display: flex;
    align-items: center;
    height: 100%;
}

.contact-cta-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(3rem, 5vw, 6rem);
    align-items: center;
    width: 100%;
}

.contact-cta-tekst h2 {
    color: var(--wit);
    margin-bottom: 1.5rem;
}

.contact-cta-tekst p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2rem;
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
}

.contact-cta-info {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.contact-cta-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.contact-cta-label {
    font-family: 'Barlow Semi Condensed', Calibri, sans-serif;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--grijs);
}

.contact-cta-item a {
    color: var(--geel);
    text-decoration: none;
    font-weight: 700;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s;
}

.contact-cta-item a:hover {
    border-bottom-color: var(--geel);
}

/* Footer 4-column variant */
.footer-inner--4col {
    grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr 0.8fr;
}

.footer-adres {
    margin-top: 1rem;
}

.footer-adres p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin-bottom: 0;
}

.footer-adres strong {
    color: rgba(255, 255, 255, 0.8);
}

.footer-contact a {
    font-size: 0.9rem;
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 900px) {
    .nav-links {
        display: none;
    }

    .nav-hamburger {
        display: flex;
    }

    /* Hamburger streepjes geel als header transparant is (hero index, nav--zwart subpagina's bovenin).
       Wisselt automatisch terug naar zwart zodra .nav--scrolled actief wordt (witte achtergrond). */
    .nav:not(.nav--scrolled) .nav-hamburger span {
        background: var(--geel);
    }

    /* Mobiel menu links-uitgelijnd ipv gecentreerd */
    .nav-mobile {
        align-items: flex-start;
        padding-left: clamp(1.5rem, 6vw, 3rem);
    }

    /* Hero logo: max-width 90vw zodat het nooit van het scherm valt op smalle telefoons.
       Browser past hoogte automatisch aan om aspect-ratio te behouden (geen height: auto nodig). */
    .hero-logo-flicker {
        max-width: 90vw;
    }

    .wie-grid,
    .team-intro-grid,
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .team-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .team-member-name {
        font-size: clamp(1.2rem, 5vw, 1.6rem);
    }

    .doelgroep-grid,
    .crisis-grid,
    .values-grid,
    .nieuws-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .testimonial-grid {
        grid-template-columns: 1fr;
    }

    .dienst-block,
    .doelgroep-block {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .dienst-block:nth-child(even),
    .doelgroep-block:nth-child(even) {
        direction: ltr;
    }

    /* Diensten editorial lijst */
    .dienst-row {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 2.5rem 0;
    }
    .dienst-row::before {
        display: none;
    }
    .dienst-body h3::after {
        width: 1.5rem;
    }
    .dienst-row:hover .dienst-body h3::after {
        width: 1.5rem;
    }
    .diensten-lijst::before,
    .diensten-lijst::after {
        width: clamp(220px, 50vw, 360px);
        height: clamp(220px, 50vw, 360px);
        opacity: 0.025;
    }

    /* Vw-mix-card op mobiel: stack (titel boven, tekst onder), geen hover */
    .vw-mix-card {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
    .vw-mix-card:hover {
        padding-left: 0;
    }
    .vw-mix-card::before { display: none; }

    /* Voor-wie baars-decoratie: kleiner op mobiel */
    .vw-body:not(.vw-body--diensten)::before,
    .vw-body:not(.vw-body--diensten)::after {
        width: clamp(200px, 50vw, 320px);
        height: clamp(200px, 50vw, 320px);
        opacity: 0.025;
    }
    .dienst-num {
        font-size: clamp(2.25rem, 10vw, 3.25rem);
    }
    .dienst-sub {
        padding-left: 0;
    }
    .dienst-sub-eyebrow {
        padding-left: 0;
    }
    .dienst-sub-eyebrow::before {
        display: none;
    }
    .dienst-sub-item {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 2rem 0;
    }
    .dienst-sub-marker {
        font-size: 1.4rem;
    }
    .dienst-photo {
        aspect-ratio: 4 / 3;
    }
    /* Legacy pijler/extra/org rules (verouderd) */
    .pijler-block,
    .pijler-block--flip {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .pijler-block--flip .pijler-num { order: 1; }
    .pijler-block--flip .pijler-body { order: 2; }
    .pijler-block--flip .pijler-visual { order: 3; }
    .org-grid { grid-template-columns: 1fr; }
    .extra-grid { grid-template-columns: 1fr; }
    .manifest-lead { font-size: 1.4rem; }
    .pijlers-head h2,
    .org-head h2,
    .extra-head h2 { font-size: 2.5rem; }

    .footer-inner,
    .footer-inner--4col {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .model-steps-preview {
        flex-direction: column;
    }

    .model-steps-preview::before {
        top: 0;
        left: 50%;
        width: 3px;
        height: 100%;
        transform: translateX(-50%);
    }

    .stroom-layout {
        flex-direction: column;
        padding: clamp(3rem, 8vw, 5rem) clamp(1.5rem, 4vw, 3rem);
    }

    .stroom-heading {
        margin-bottom: 1.5rem;
    }

    .stroom-tekst {
        flex: none;
        width: 100%;
        padding-right: 0;
    }

    .watzoek-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .wie-split {
        flex-direction: column;
    }

    .wie-split-foto {
        flex: 0 0 auto;
        min-height: 50vh;
    }

    .wie-split-tekst {
        max-width: none;
    }

    .contact-cta-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .snap-section {
        min-height: 100vh;
    }

    .snap-section--half {
        min-height: 50vh;
    }
}

/* Medium monitors (901-1280px): hele team-cards iets kleiner zodat ze beter in beeld vallen */
@media (max-width: 1280px) and (min-width: 901px) {
    .team-grid {
        max-width: 900px;
        gap: clamp(2.5rem, 4vw, 4rem) clamp(1.5rem, 2.5vw, 2.5rem);
    }
    .team-member {
        max-width: 380px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .team-member-tekst {
        padding: clamp(1.5rem, 2.2vw, 2rem);
        padding-top: calc(18px + clamp(1.4rem, 2.2vw, 2rem));
    }
    .team-member-tekst p {
        font-size: 0.95rem;
    }
    .team-member-name {
        font-size: clamp(1rem, 1.7vw, 1.3rem);
        padding: 10px clamp(14px, 2vw, 22px);
    }
    .team-member-rol {
        font-size: 0.78rem;
    }
}

@media (max-width: 600px) {
    .hero {
        padding: 1.5rem;
        justify-content: center;
        padding-top: calc(var(--nav-height) + 10vh);
    }

    .hero-tagline {
        font-size: clamp(3rem, 15vw, 5rem);
        margin-top: 0;
    }

    .hero-tagline .line-barcode {
        display: none;
    }

    .hero-barcode-top,
    .hero-barcode-bottom {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        width: 100%;
        overflow: hidden;
    }

    .hero-barcode-top img,
    .hero-barcode-bottom img {
        width: 100%;
        height: clamp(1.5rem, 5vw, 3rem);
        object-fit: cover;
        opacity: 0;
    }

    .hero-barcode-top img:nth-child(1) {
        animation: mobileBarcodeFromLeft 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0.3s forwards;
    }
    .hero-barcode-top img:nth-child(2) {
        animation: mobileBarcodeFromRight 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0.5s forwards;
    }
    .hero-barcode-top img:nth-child(3) {
        animation: mobileBarcodeFromLeft 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 0.7s forwards;
    }

    .hero-barcode-bottom img:nth-child(1) {
        animation: mobileBarcodeFromRight 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 1.4s forwards;
    }
    .hero-barcode-bottom img:nth-child(2) {
        animation: mobileBarcodeFromLeft 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 1.6s forwards;
    }
    .hero-barcode-bottom img:nth-child(3) {
        animation: mobileBarcodeFromRight 1.2s cubic-bezier(0.25, 0.1, 0.25, 1) 1.8s forwards;
    }

    @keyframes mobileBarcodeFromLeft {
        0% { opacity: 0; transform: translateX(-100%); }
        60% { opacity: 0.18; transform: translateX(5%); }
        100% { opacity: 0.15; transform: translateX(0); }
    }

    @keyframes mobileBarcodeFromRight {
        0% { opacity: 0; transform: translateX(100%); }
        60% { opacity: 0.18; transform: translateX(-5%); }
        100% { opacity: 0.15; transform: translateX(0); }
    }

    .hero-barcode-top {
        margin-bottom: 1rem;
    }

    .hero-barcode-bottom {
        margin-top: 1rem;
    }

    .scroll-indicator img {
        height: 25px;
    }

    .page-header h1 {
        font-size: clamp(2rem, 10vw, 3.5rem);
    }

    .crisis-hero h1 {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    /* Model page: vertical on mobile */
    .model-horizontal {
        height: auto;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .model-slide {
        min-width: unset;
        width: 100%;
        height: auto;
        min-height: 80vh;
    }

    .model-slide--intro .model-slide-content {
        flex-direction: column;
    }

    .model-slide-inner,
    .model-slide-inner--reverse {
        flex-direction: column;
    }

    .model-slide-foto {
        flex: none;
        width: 100%;
    }

    .model-flow-indicator,
    .model-scroll-hint {
        display: none;
    }

    .nieuws-grid {
        grid-template-columns: 1fr;
    }

    .snap-section {
        min-height: 100vh;
        padding: clamp(4rem, 8vw, 6rem) 0;
    }

    .snap-section--half {
        min-height: auto;
        padding: clamp(3rem, 6vw, 5rem) 0;
    }

    .testimonial-card-mini {
        min-width: 260px;
        max-width: 260px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-tagline .line-text,
    .hero-tagline .line-barcode {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .hero-logo-flicker {
        animation: none;
        opacity: 1;
    }

    .hero-sub--delayed {
        animation: none;
        opacity: 1;
    }

    .hero-tagline .line-barcode {
        opacity: 0.15;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .stroom-baars-bg {
        transform: translate(-50%, -50%) !important;
    }

    .watzoek-baars {
        opacity: 1;
    }

    .scroll-indicator {
        animation: none;
        opacity: 0.7;
    }

    .scroll-indicator img {
        animation: none;
    }
}

/* ============================================
   SECTION 3 — STROOMMODEL (kinetische barcode-stroom)
   ============================================ */
.section-methode-v2 {
    position: relative;
    width: 100%; min-height: 90vh;
    background: var(--zwart); color: #fff; overflow: hidden;
    /* Twee-fase scroll-driven reveal — vars set via JS:
       Fase 1: smalle middenkolom (--x-inset ~42%) knalt snel naar de randen (~5%)
       Fase 2: rustige finish naar 0 inset met top-relief afbouw */
    --x-inset: 42%;
    --top-inset: 50px;
    clip-path: inset(var(--top-inset) var(--x-inset) 0 var(--x-inset));
    will-change: clip-path;
}
@media (prefers-reduced-motion: reduce) {
    .section-methode-v2 {
        --x-inset: 0%;
        --top-inset: 0px;
    }
}

/* Section 3 — 50/50 split: foto links, tekst+bars rechts */
.methode-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 90vh;
}

.methode-photo {
    position: relative;
    overflow: hidden;
}

/* Foto via ::before zodat kinderelementen (gele balken) eigen kleur behouden */
.methode-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../img/foto 9.jpg") center / cover no-repeat;
    z-index: 0;
}

/* Vier gele balken (~30px, 25% opacity) — overlappen op hoeken zodat daar 50% ontstaat */
.methode-photo-bar {
    position: absolute;
    background: rgba(254, 219, 0, 0.25);
    pointer-events: none;
    z-index: 1;
}
.methode-photo-bar--top    { top: 0;    left: 0;  right: 0;  height: 30px; }
.methode-photo-bar--bottom { bottom: 0; left: 0;  right: 0;  height: 30px; }
.methode-photo-bar--left   { top: 0;    bottom: 0; left: 0;  width: 30px; }
.methode-photo-bar--right  { top: 0;    bottom: 0; right: 0; width: 30px; }

/* Stroommodel — zwemmende zwarte visjes op gele slides (1 per slide, decoratief, achter content) */
.model-fish {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
.model-fish img {
    display: block;
    width: clamp(75px, 7vw, 110px);
    opacity: 0.13;
    filter: brightness(0);
    animation: contactFishFloat 8s ease-in-out infinite;
    will-change: transform;
}
.model-fish--flip img {
    animation-name: contactFishFloatFlip;
}

/* Gele variant voor donkere achtergronden (photo-bg slides) */
.model-fish--yellow img {
    filter: none;
    opacity: 0.22;
}

/* Grootte-modifiers voor wat variatie tussen visjes */
.model-fish--lg img { width: clamp(110px, 10vw, 160px); }
.model-fish--xl img { width: clamp(140px, 13vw, 210px); }

.methode-pane {
    position: relative;
    background: var(--zwart);
    overflow: hidden;
    display: flex;
    align-items: center;
}

.methode-bars {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.methode-bars span {
    position: absolute;
    left: -30%;
    height: 12px;
    width: 60%;
    background: var(--geel);
    opacity: 0.10;
    transform: translateX(0);
    animation: methodeBarSlide 22s linear infinite;
}

.methode-bars span:nth-child(1)  { top: 6%;  width: 55%; animation-duration: 26s; animation-delay: -2s; }
.methode-bars span:nth-child(2)  { top: 13%; width: 70%; animation-duration: 19s; animation-delay: -6s; opacity: 0.08; }
.methode-bars span:nth-child(3)  { top: 21%; width: 50%; animation-duration: 24s; animation-delay: -10s; }
.methode-bars span:nth-child(4)  { top: 28%; width: 65%; animation-duration: 28s; animation-delay: -1s; opacity: 0.07; }
.methode-bars span:nth-child(5)  { top: 36%; width: 75%; animation-duration: 21s; animation-delay: -14s; }
.methode-bars span:nth-child(6)  { top: 44%; width: 58%; animation-duration: 25s; animation-delay: -4s; opacity: 0.09; }
.methode-bars span:nth-child(7)  { top: 52%; width: 68%; animation-duration: 27s; animation-delay: -8s; }
.methode-bars span:nth-child(8)  { top: 60%; width: 53%; animation-duration: 20s; animation-delay: -12s; opacity: 0.08; }
.methode-bars span:nth-child(9)  { top: 68%; width: 72%; animation-duration: 23s; animation-delay: -3s; }
.methode-bars span:nth-child(10) { top: 76%; width: 60%; animation-duration: 26s; animation-delay: -7s; opacity: 0.07; }
.methode-bars span:nth-child(11) { top: 84%; width: 65%; animation-duration: 22s; animation-delay: -11s; }
.methode-bars span:nth-child(12) { top: 92%; width: 55%; animation-duration: 24s; animation-delay: -5s; opacity: 0.10; }

@keyframes methodeBarSlide {
    0%   { transform: translateX(0); }
    100% { transform: translateX(220%); }
}

.methode-text {
    position: relative;
    z-index: 2;
    padding: clamp(3rem, 7vw, 6rem) clamp(2rem, 5vw, 5rem);
    max-width: 720px;
}

.methode-heading-split {
    font-size: clamp(56px, 7.5vw, 120px);
    line-height: 0.9;
    margin-bottom: 3vh;
}

@media (max-width: 900px) {
    .methode-split {
        grid-template-columns: 1fr;
    }
    .methode-photo {
        min-height: 50vh;
    }
}
.methode-watzoek-wrapper { position: relative; background: var(--geel); }
.methode-watzoek-wrapper .section-watzoek { position: relative; }
.vb-photo {
    display: none;
    position: absolute; inset: 0;
    background-color: #000;
    background-image: url("../img/foto 1.jpg");
    background-size: cover; background-position: center;
    filter: grayscale(1) contrast(1.15) brightness(0.55);
    clip-path: inset(0 50% 0 50%);
    will-change: clip-path;
}
.vb-photo::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0) 80%);
}
.vb-bars {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden;
    clip-path: inset(0 50% 0 50%);
    will-change: clip-path;
}
.vb-bar {
    position: absolute; left: 0; height: 14px;
    background: var(--geel); opacity: 0.15;
    will-change: transform; transform: translate3d(0,0,0);
}
.vb-content {
    position: relative; z-index: 3;
    max-width: var(--content-wide);
    margin: 0 auto;
    display: grid; grid-template-columns: minmax(420px, 540px) 1fr; align-items: stretch;
    padding: 12vh clamp(1.5rem, 4vw, 4rem) 0; gap: clamp(3rem, 6vw, 6rem);
}
.vb-left { order: 2; max-width: 640px; padding-left: 0; }
.vb-placeholder-photo {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    margin-top: 0;
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity 1.6s ease-out, transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.vb-placeholder-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #000;
    background-image: url("../img/foto 4.jpg");
    background-size: cover;
    background-position: center;
    filter: grayscale(1) contrast(1.1);
    z-index: 0;
}
.vb-placeholder-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 6px rgba(254, 219, 0, 0.25);
    pointer-events: none;
    z-index: 1;
}
.vb-placeholder-photo:hover {
    transform: scale(1.025);
}
.vb-eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; text-transform: uppercase;
    font-size: 13px; letter-spacing: 0.3em; color: var(--geel);
    margin-bottom: 24px;
}
.vb-eyebrow::before { content: ""; width: 36px; height: 2px; background: var(--geel); }
.vb-title {
    font-family: "Barlow Semi Condensed", sans-serif; font-weight: 800; text-transform: uppercase;
    font-size: clamp(48px, 6.2vw, 100px); line-height: 0.9; letter-spacing: -0.01em;
    margin-bottom: 3vh; color: var(--geel);
}
.vb-title em { font-style: normal; display: block; color: var(--geel); }
.vb-word-anim {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.3em);
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
}
.vb-title.visible .vb-word-anim { opacity: 1; transform: translateY(0); }
.vb-title.visible .vb-word-anim:nth-of-type(1) { transition-delay: 0.05s; }
.vb-title.visible .vb-word-anim:nth-of-type(2) { transition-delay: 0.15s; }
.vb-title.visible .vb-word-anim:nth-of-type(3) { transition-delay: 0.25s; }
.vb-title.visible .vb-word-anim:nth-of-type(4) { transition-delay: 0.35s; }
.vb-title.visible .vb-word-anim:nth-of-type(5) { transition-delay: 0.45s; }
.vb-title.visible .vb-word-anim:nth-of-type(6) { transition-delay: 0.55s; }
.vb-lede {
    font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.6; color: rgba(255,255,255,0.85);
    max-width: 520px; margin-bottom: 4vh;
}
.vb-right {
    order: 1;
    position: relative;
    display: flex; flex-direction: column;
    max-width: 540px;
    padding-top: 0;
}
.vb-steps-vertical {
    display: flex; flex-direction: column; gap: 14px;
    padding: 22px 24px 22px 26px;
    border-left: 2px solid var(--geel);
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(3px);
}
.vb-step-row {
    display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 16px;
}
.vb-step-letter {
    font-family: "Barlow Semi Condensed", sans-serif; font-weight: 800;
    font-size: 32px; color: var(--geel); line-height: 1;
}
.vb-step-word {
    font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; text-transform: uppercase;
    font-size: 15px; letter-spacing: 0.1em; color: #fff;
}
.vb-cta {
    display: inline-flex; align-items: center; gap: 14px;
    font-family: "Barlow Semi Condensed", sans-serif; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; font-size: 14px;
    color: #000; background: var(--geel);
    padding: 16px 24px; text-decoration: none;
    transition: transform 0.2s ease;
}
.vb-cta:hover { transform: translateX(6px); }
.vb-cta-arrow { width: 22px; height: 2px; background: #000; position: relative; }
.vb-cta-arrow::after {
    content: ""; position: absolute; right: -1px; top: -4px;
    border-left: 8px solid #000; border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}

@media (max-width: 900px) {
    .vb-content { grid-template-columns: 1fr; padding: 80px 6vw; gap: 4vh; align-items: start; }
    .vb-title { font-size: clamp(48px, 12vw, 90px); }
    .vb-right { padding-top: 0; max-width: 320px; }
    .vb-left { padding-left: 0; order: 2; }
    .vb-placeholder-photo { max-width: 320px; height: auto; aspect-ratio: 3 / 4; margin-top: 0; }
}

/* ============================================
   MOBILE — comprehensive overrides (< 900px)
   Niets boven 900px wordt hier aangeraakt.
   ============================================ */
@media (max-width: 900px) {
    /* --- Container padding iets tighter --- */
    .container,
    .container--wide {
        padding: 0 1.25rem;
    }

    /* --- Header logo kleiner --- */
    .nav-logo {
        height: 14px;
    }

    /* --- Hero (home) — disable sticky, kleinere kop --- */
    .hero {
        position: relative;
        top: auto;
    }
    .hero-content {
        padding: 0 1.25rem;
    }
    .hero-tagline {
        font-size: clamp(2rem, 9vw, 4rem);
    }
    .hero-sub,
    .hero-sub--delayed {
        font-size: 0.95rem;
    }

    /* --- Home sectie 2 (stroom): gecentreerd, grotere kop, baars zichtbaar --- */
    .section-stroom {
        min-height: auto;
        padding: 4rem 0;
    }
    .stroom-layout {
        min-height: auto;
        padding: 3rem 1.25rem;
        align-items: center;
        text-align: center;
    }
    .stroom-heading {
        font-size: clamp(3rem, 14vw, 5.5rem);
        margin-top: 0;
        margin-bottom: 1.5rem;
        text-align: center;
    }
    .stroom-tekst {
        flex: none;
        padding-right: 0;
        text-align: left;
    }
    .stroom-tekst p {
        font-size: 1rem;
    }
    .stroom-baars-bg {
        display: block;
        opacity: 0.05;
    }

    /* --- Home sectie 3 (methode-v2): desktop-achtige animatie op mobiel --- */
    /* .vb-photo en .vb-bars blijven zichtbaar (sticky-scroll animatie werkt) */
    .methode-arrow-svg {
        display: none;
    }

    /* --- Home sectie 4 (watzoek) --- */
    .section-watzoek {
        min-height: auto;
        padding: 4rem 0;
    }
    .section-watzoek .container {
        min-height: auto;
    }
    .wz-title {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }
    .wz-card {
        padding: 32px 26px;
        min-height: auto;
    }
    .wz-card h3 {
        font-size: 22px;
    }
    .wz-card p {
        font-size: 15px;
    }
    .wz-floaters img {
        width: 110px;
        opacity: 0.7;
    }

    /* --- Home sectie 5 (wie): split 60/40 → 1-koloms op mobiel --- */
    .wie-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .wie-split-photo {
        min-height: 50vh;
    }
    .wie-split-text {
        padding: 2rem 1.5rem;
    }
    .wie-intro-heading {
        font-size: clamp(1.8rem, 7vw, 2.5rem);
        margin-bottom: 1rem;
    }
    .wie-intro-tekst p {
        font-size: 0.95rem;
        line-height: 1.65;
    }
    .wie-intro-tekst {
        max-width: 100%;
    }

    /* --- Testimonials --- */
    .section-testimonials {
        padding: 3rem 0;
    }

    /* --- Model page: vertical, no snake, no scroll-hint --- */
    .model-page {
        height: auto;
        overflow: visible;
        padding-top: var(--nav-height);
    }
    .model-horizontal {
        flex-direction: column;
        height: auto;
        overflow-x: hidden;
        overflow-y: visible;
        width: 100%;
    }
    .model-slide {
        min-width: 0;
        width: 100%;
        height: auto;
        min-height: 70vh;
        padding: 4rem 1.5rem;
    }
    .model-slide--intro {
        min-width: 0;
    }
    .model-slide--intro .model-slide-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
        max-width: 100%;
    }
    .model-slide--intro .model-slide-content h2 {
        font-size: clamp(3rem, 13vw, 5rem);
        white-space: normal;
    }
    .model-slide-inner,
    .model-slide-inner--reverse {
        flex-direction: column;
        max-width: 100%;
    }
    .model-slide-foto {
        flex: none;
        width: 100%;
    }
    .model-slide h2 {
        font-size: clamp(2rem, 8vw, 3rem);
    }
    .model-slide p {
        font-size: 0.95rem;
    }
    .model-flow-indicator,
    .model-scroll-hint {
        display: none;
    }
    /* Hide snake-arrow SVG on model page (direct child of .model-page) */
    .model-page > svg {
        display: none;
    }
    /* Photo-bg slides: reasonable overlay on small screens */
    .model-slide--photo-bg::before {
        background: rgba(0, 0, 0, 0.6);
    }
    .model-intro-video {
        /* keep playing on mobile */
    }
    /* Mobile: tekst altijd zichtbaar — .is-active triggert niet op verticale stack */
    .model-slide .model-slide-number,
    .model-slide h2,
    .model-slide p {
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* --- Diensten pijler-block photo sizing --- */
    .pijler-visual img {
        max-height: 280px;
        width: 100%;
        object-fit: cover;
    }
    .pijler-num {
        font-size: 3.5rem;
    }
    .pijler-body h3 {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    /* --- Voor wie sub pages: extra tuning --- */
    .vw-body {
        padding: 3rem 0;
    }
    .vw-body-wrap p {
        font-size: 0.98rem;
    }
    .vw-cta {
        padding: 3.5rem 0;
    }
    .vw-cta h2 {
        font-size: clamp(1.8rem, 7vw, 2.5rem);
    }
    .vw-mix-card {
        padding: 1.6rem;
    }
    .vw-programma-item {
        padding: 1.4rem 1.4rem 1.4rem 3.5rem;
    }

    /* --- Crisis hero --- */
    .crisis-hero {
        padding: clamp(7rem, 15vw, 10rem) 0 clamp(3rem, 6vw, 5rem);
    }

    /* --- Page headers (algemeen) --- */
    .page-header {
        padding: clamp(7rem, 14vw, 10rem) 0 clamp(3rem, 6vw, 5rem);
    }

    /* --- Diensten manifest --- */
    .manifest-grid {
        padding: 2rem 0;
    }
    .manifest-lead {
        font-size: 1.2rem;
    }
}

/* ============================================
   MOBILE — phone tweaks (< 600px)
   ============================================ */
@media (max-width: 600px) {
    .hero-tagline {
        font-size: clamp(2.4rem, 14vw, 4.5rem);
    }
    .stroom-heading {
        font-size: clamp(2.5rem, 14vw, 4rem);
    }
    .wz-card h3 {
        font-size: 20px;
    }
    .wz-floaters img {
        width: 85px;
    }
    .pijler-num {
        font-size: 2.8rem;
    }
    .model-slide--intro .model-slide-content h2 {
        font-size: clamp(2.8rem, 16vw, 4rem);
    }
    .vw-card {
        padding: 1rem;
    }
    .vw-card-body {
        padding: 0.5rem 0;
    }
    .vw-card h3 {
        font-size: clamp(1.4rem, 6vw, 1.8rem);
    }
    .wie-intro-heading {
        font-size: clamp(1.6rem, 8vw, 2.2rem);
    }
    .testimonial-card-mini {
        min-width: 80vw;
        max-width: 80vw;
    }
}

/* ============================================
   INDEX MOBIEL (≤900px) — sectie-specifieke aanpassingen
   ============================================ */
@media (max-width: 900px) {
    /* Hero: content lager (~75% verticaal), tagline + logo 30% kleiner */
    .hero--video {
        justify-content: flex-end;
        padding-top: 0;
        padding-bottom: 0;
    }
    .hero--video .hero-content {
        padding-bottom: clamp(15vh, 22vh, 26vh);
    }
    .hero--video .hero-tagline {
        font-size: clamp(2.1rem, 10.5vw, 3.5rem);
    }

    /* Sectie 2: heading groter + links uitlijnen, body links, CTA gecentreerd */
    .section-stroom .stroom-layout {
        align-items: flex-start;
        text-align: left;
    }
    .section-stroom .stroom-heading {
        text-align: left;
        font-size: clamp(3.5rem, 17vw, 5.5rem);
        white-space: normal;
    }
    .section-stroom .stroom-tekst {
        text-align: left;
        align-self: stretch;
        max-width: 100%;
    }
    .section-stroom .stroom-tekst p {
        text-align: left;
    }
    .section-stroom .stroom-cta {
        align-self: center;
    }

    /* Sectie 4: titel mag wrappen, <br> wordt zichtbaar */
    .wz-title {
        white-space: normal;
    }
    .wz-title-mobile-br {
        display: inline;
    }

    /* Sectie 5: tekst + button LINKS uitlijnen */
    .wie-split .wie-split-text {
        align-items: flex-start;
        text-align: left;
    }
    .wie-intro-heading,
    .wie-intro-tekst,
    .wie-intro-tekst p {
        text-align: left;
    }
    .wie-cta {
        align-self: flex-start;
    }
}