/* ==========================================================================
   DroneStars — stylesheet
   Opzet: tokens, basis, layout, componenten, blokken, pagina's, responsive.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
    --paper:        #ffffff;
    --mist:         #f4f7fa;
    --mist-deep:    #eaf0f6;
    --ink:          #0b1a2b;
    --ink-soft:     #24384c;

    /*
     * De kleur van de donkere vlakken: de balk bovenaan, de cookiemelding,
     * de kop van de assistent en dergelijke. Losgehouden van --ink, want dat
     * is óók de kleur van de gewone tekst; die samen verschuiven zou de
     * leesbaarheid aantasten. In te stellen in het beheer.
     */
    --vlak:         #0b1a2b;
    --knop-tekst:   #ffffff;
    --slate:        #56697d;
    --line:         #e2e9f0;
    --signal:       #0b5fd0;
    --signal-dark:  #084aa4;
    --signal-tint:  #eaf1fc;

    --font-display: 'Archivo', system-ui, sans-serif;
    --font-body:    'IBM Plex Sans', system-ui, sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

    --wrap:         1200px;
    --gutter:       24px;
    --radius:       4px;
    --radius-lg:    10px;

    --shadow-sm:    0 1px 2px rgba(11, 26, 43, .05);
    --shadow-md:    0 8px 28px -14px rgba(11, 26, 43, .28);
    --shadow-lg:    0 24px 60px -30px rgba(11, 26, 43, .35);

    --ease:         cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------------ basis */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 0 0 .5em;
    font-weight: 700;
}

h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--signal-dark); }

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

ul, ol { margin: 0; padding: 0; }

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--vlak); color: #fff; padding: 12px 20px;
    font-family: var(--font-mono); font-size: .8rem;
}
.skip-link:focus { left: 0; }

/* ----------------------------------------------------------------- layout */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section { padding-block: clamp(56px, 8vw, 104px); }
.section--tint { background: var(--mist); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }

/* Signature: mono-label met tickrule, ontleend aan hoogte-aanduidingen
   op luchtvaartkaarten. Wordt boven elke sectiekop gebruikt. */
.eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--signal);
    margin: 0 0 14px;
}
.eyebrow::after {
    content: '';
    flex: 1;
    height: 7px;
    background-image: linear-gradient(to right, var(--line) 1px, transparent 1px);
    background-size: 7px 100%;
    background-position: bottom left;
    border-bottom: 1px solid var(--line);
}

.section-head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head p { color: var(--slate); font-size: 1.06rem; margin-top: -.2em; }

.lede { font-size: clamp(1.06rem, 1.6vw, 1.24rem); color: var(--ink-soft); }

.prose { max-width: 68ch; }
.prose p { color: var(--slate); }
.prose p strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- usp-balk */
.usp-bar {
    background: var(--vlak);
    color: rgba(255, 255, 255, .72);
    font-size: .8rem;
}
.usp-bar__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding-block: 8px;
}
.usp-bar__list { display: flex; flex-wrap: wrap; gap: 8px 26px; list-style: none; }
.usp-bar__list li { position: relative; padding-left: 16px; }
.usp-bar__list li::before {
    content: '';
    position: absolute; left: 0; top: 50%;
    width: 6px; height: 6px; margin-top: -3px;
    background: var(--signal);
    border-radius: 50%;
}
.usp-bar__contact { display: flex; gap: 20px; font-family: var(--font-mono); font-size: .76rem; }
.usp-bar__contact a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.usp-bar__contact a:hover { color: #fff; text-decoration: underline; }

/* -------------------------------------------------------------- masthead */
.masthead {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: saturate(1.6) blur(10px);
    border-bottom: 1px solid var(--line);
}
.masthead__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 76px;
}

.brand {
    display: inline-flex; align-items: center; gap: 11px;
    text-decoration: none; color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.22rem; font-weight: 500;
    letter-spacing: -.02em;
}
.brand__mark { color: var(--signal); display: flex; }
.brand__name strong { font-weight: 700; }
.brand--footer { color: var(--ink); }

/* Eigen logo uit het CMS. Hoogte vast, breedte volgt, zodat elk formaat past. */
/*
 * De hoogte staat als variabele, zodat hij vanuit het beheer kan worden
 * ingesteld. De breedte volgt vanzelf, dus het logo vervormt nooit.
 */
.brand__logo { height: var(--logo-kop, 38px); width: auto; display: block; }
.brand--footer .brand__logo { height: var(--logo-voet, 32px); }

/* ------------------------------------------------------------------- nav */
.nav__list { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav__item { position: relative; }

.nav__link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 12px;
    font-size: .93rem; font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    border: 0; background: none; cursor: pointer;
    font-family: inherit;
    border-radius: var(--radius);
    transition: color .18s var(--ease), background .18s var(--ease);
}
.nav__link:hover { color: var(--signal); background: var(--signal-tint); }
.nav__link[aria-current="page"] { color: var(--signal); }
.nav__chevron { transition: transform .2s var(--ease); }
.nav__link--toggle[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.submenu {
    position: absolute; top: calc(100% + 8px); left: 0;
    min-width: 268px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    list-style: none;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
/* Onzichtbare brug over de ruimte tussen knop en menu. Zonder deze strook
   verliest de muis de hover zodra hij het gat kruist. */
.submenu::before {
    content: '';
    position: absolute;
    top: -10px; left: 0; right: 0;
    height: 10px;
}
.nav__item--has-children:hover .submenu,
.nav__item--has-children:focus-within .submenu,
.submenu.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

.submenu a {
    display: block;
    padding: 9px 12px;
    font-size: .9rem;
    color: var(--ink-soft);
    text-decoration: none;
    border-radius: var(--radius);
}
.submenu a:hover { background: var(--mist); color: var(--signal); }
/*
 * De huidige pagina alleen in kleur aanduiden, zonder gevuld vlak. Met die
 * vulling leek zo'n item permanent aangewezen te zijn, en dat wijkt af van de
 * items in de hoofdbalk, die alleen van tekstkleur veranderen.
 */
.submenu a[aria-current="page"] { color: var(--signal); background: transparent; font-weight: 600; }

.nav-toggle {
    display: none;
    align-items: center; gap: 9px;
    background: none; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 9px 13px;
    font-family: var(--font-mono); font-size: .76rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink);
    cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 3.5px; }
.nav-toggle__bars i { display: block; width: 17px; height: 1.8px; background: var(--ink); transition: transform .2s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(5.3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-5.3px) rotate(-45deg); }

/* --------------------------------------------------------------- buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px 24px;
    font-family: var(--font-body);
    font-size: .94rem; font-weight: 600;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
    transition: background .18s var(--ease), color .18s var(--ease),
                border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }

/*
 * De tekstkleur volgt de knopkleur. Kiest iemand een lichte kleur, dan wordt
 * de tekst donker; anders zou witte tekst op geel onleesbaar zijn.
 */
.btn--primary { background: var(--signal); color: var(--knop-tekst, #fff); }
.btn--primary:hover { background: var(--signal-dark); color: var(--knop-tekst, #fff); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--mist); }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--mist); color: var(--ink); }

.btn--sm { padding: 10px 18px; font-size: .88rem; }

.arrow-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: .94rem;
    text-decoration: none;
}
.arrow-link::after {
    content: '→';
    transition: transform .18s var(--ease);
}
.arrow-link:hover::after { transform: translateX(4px); }

/* ------------------------------------------------------------------ hero */
.hero {
    position: relative;
    padding-block: clamp(56px, 8vw, 108px);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
/* Fijn meetraster, verwijzing naar luchtvaartkaarten. */
.hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, var(--line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--line) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(120% 90% at 78% 8%, #000 0%, transparent 68%);
            mask-image: radial-gradient(120% 90% at 78% 8%, #000 0%, transparent 68%);
    opacity: .8;
    pointer-events: none;
}
.hero > .wrap { position: relative; }

.hero__inner { max-width: 46rem; }
.hero__title { margin-bottom: .35em; }
.hero__intro { font-size: clamp(1.06rem, 1.8vw, 1.28rem); color: var(--slate); max-width: 40rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.hero--home .hero__inner { max-width: 52rem; }

/* Hoogtebalk rechts in de hero op de homepage. */
.hero__tape {
    position: absolute; right: var(--gutter); top: 50%;
    transform: translateY(-50%);
    display: grid; gap: 10px;
    font-family: var(--font-mono); font-size: .68rem;
    letter-spacing: .1em; color: var(--slate);
    text-align: right;
    pointer-events: none;
}
.hero__tape span { display: block; opacity: .75; }
.hero__tape span::after {
    content: '';
    display: inline-block;
    width: 26px; height: 1px;
    background: var(--line);
    margin-left: 10px; vertical-align: middle;
}

/* ---------------------------------------------------------------- blokken */
.checklist { list-style: none; display: grid; gap: 2px; }
.checklist li {
    position: relative;
    padding: 14px 18px 14px 46px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink-soft);
}
.checklist li::before {
    content: '';
    position: absolute; left: 18px; top: 21px;
    width: 13px; height: 8px;
    border-left: 2px solid var(--signal);
    border-bottom: 2px solid var(--signal);
    transform: rotate(-45deg);
}
.section--tint .checklist li { background: var(--paper); }

.block-note {
    margin-top: 18px;
    font-size: .9rem;
    color: var(--slate);
    padding-left: 16px;
    border-left: 2px solid var(--signal);
}

.taglist { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.taglist li {
    font-family: var(--font-mono);
    font-size: .84rem;
    padding: 9px 15px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
}

.numbered { list-style: none; display: grid; gap: 4px; counter-reset: step; }
.numbered__item {
    counter-increment: step;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 8px 24px;
    padding: 28px 0;
    border-top: 1px solid var(--line);
}
.numbered__item:last-child { border-bottom: 1px solid var(--line); }
.numbered__item::before {
    content: counter(step, decimal-leading-zero);
    grid-row: 1 / span 2;
    font-family: var(--font-mono);
    font-size: .84rem;
    color: var(--signal);
    padding-top: 4px;
}
/*
 * Alles behalve het nummer hoort in de tweede kolom. Vroeger vertrouwden wij
 * erop dat de browser dat vanzelf goed deed, maar zodra er een element bij
 * kwam schoof de tekst naar de smalle nummerkolom.
 */
.numbered__item > h3,
.numbered__item > .numbered__tekst { grid-column: 2; }

.numbered__item h3 { margin: 0; }
.numbered__item p { color: var(--slate); margin: 0 0 10px; }
.numbered__item p:last-child { margin-bottom: 0; }
.numbered__tekst { color: var(--slate); }
.numbered__tekst ul,
.numbered__tekst ol { margin: 0 0 10px; padding-left: 20px; }

.specs { display: grid; gap: 0; }
.specs__row {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: 8px 28px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
}
.specs__row:last-child { border-bottom: 1px solid var(--line); }
.specs__row dt {
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
    padding-top: 3px;
}
.specs__row dd { margin: 0; color: var(--slate); }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 16px;
}
.card {
    display: flex; flex-direction: column;
    gap: 10px;
    padding: 26px 24px 24px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.card:hover {
    border-color: rgba(11, 95, 208, .38);
    color: inherit;
}
.card__title { font-size: 1.1rem; margin: 0; }
.card__text { font-size: .94rem; color: var(--slate); margin: 0; flex: 1; }
.card__more {
    font-family: var(--font-mono); font-size: .74rem;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--signal);
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 16px;
}
.gallery figure { margin: 0; }
.gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
}
.gallery figcaption {
    font-family: var(--font-mono);
    font-size: .74rem;
    color: var(--slate);
    margin-top: 9px;
}

.cta-panel {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: 24px;
    padding: clamp(30px, 4vw, 46px);
    background: var(--vlak);
    border-radius: var(--radius-lg);
    color: #fff;
}
.cta-panel h2 { color: #fff; margin: 0 0 .35em; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.cta-panel p { color: rgba(255, 255, 255, .74); margin: 0; max-width: 46ch; }

/* ------------------------------------------------------------ home: hero */
.hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}
.hero--home .hero__copy { max-width: none; }

.hero__visual {
    position: relative;
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    background: var(--mist);
}
.hero__visual img,
.hero__visual video {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/*
 * Een video houdt zijn eigen verhouding. Die staat als stijl op het element
 * zelf, uit het bestand gelezen. Zonder vaste verhouding zou hij bijgesneden
 * worden, en dat is bij een breed filmpje meteen zichtbaar.
 */
.hero__visual video.hero__video {
    height: auto;
    /* Geen vaste verhouding: die komt uit het bestand, of anders van de
       browser zodra de video binnen is. */
    aspect-ratio: auto;
    object-fit: contain;
    background: var(--mist);

    /*
     * Plafond voor een sterk staande video. Zonder dit zou een filmpje van
     * 1080 bij 1920 het hele scherm vullen en de tekst wegdrukken. Het beeld
     * wordt daarbij niet bijgesneden; er komt hooguit wat lucht naast.
     */
    max-height: 70vh;
}

/* Signature: aflezing van vluchtcategorieën over het beeld heen. */
.hero__readout {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: 4px;
    padding: 12px 16px;
    background: linear-gradient(to top, rgba(11, 26, 43, .88), rgba(11, 26, 43, 0));
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .82);
}
.hero__readout span { position: relative; padding-top: 12px; }
.hero__readout span::before {
    content: '';
    position: absolute; top: 0; left: 50%;
    width: 1px; height: 6px;
    background: rgba(255, 255, 255, .45);
}

/* -------------------------------------------- hero: animatie volle breedte */
.hero--anim {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(480px, 68vh, 720px);
    padding-block: clamp(40px, 6vw, 88px) clamp(56px, 7vw, 96px);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
/* Het meetraster uit de oude hero geldt hier niet; de animatie is de achtergrond. */
.hero--anim::before { content: none; }

.hero__anim {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    /* Loopt door tot de rand van het scherm, zonder kader. De linkerhelft
       blijft vrij voor de tekst. */
    left: 47%;
    z-index: 0;
}
.hero__canvas,
.hero__poster {
    display: block;
    width: 100%;
    height: 100%;
    /* Contain, niet cover: de drone moet in zijn geheel zichtbaar blijven.
       De achtergrond van de frames is wit, dus dat valt samen met de pagina. */
    object-fit: contain;
    object-position: 62% 50%;
}
.hero__canvas {
    opacity: 0;                 /* pas zichtbaar zodra frame 1 getekend is */
    transition: opacity .3s var(--ease);
}
.hero__anim.is-ready .hero__canvas { opacity: 1; }

.hero__poster { position: absolute; inset: 0; transition: opacity .3s var(--ease); }
.hero__anim.is-ready .hero__poster { opacity: 0; }

/* Witte sluier zodat de tekst leesbaar blijft over het beeld heen. */
.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, .9) 0%,
        rgba(255, 255, 255, .6) 38%,
        rgba(255, 255, 255, 0) 54%
    );
    pointer-events: none;
}

.hero__content {
    position: relative;
    z-index: 2;
}
/* De breedte op de kinderen zetten, niet op .hero__content zelf: die erft
   margin-inline: auto van .wrap en zou zichzelf anders centreren. */
.hero__content > * { max-width: 34rem; }
.hero--anim .hero__title { margin-bottom: .35em; }
.hero--anim .hero__intro { max-width: 32rem; }

/* Aflezing als lijn onderin de header, over de volle breedte. */
.hero--anim .hero__readout {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    background: none;
    border-top: 1px solid var(--line);
    padding: 0;
}
.hero__readout-inner {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    padding-block: 12px 14px;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .14em;
    color: var(--slate);
}
.hero__readout-inner span { position: relative; padding-top: 12px; }
.hero__readout-inner span::before {
    content: '';
    position: absolute; top: 0; left: 50%;
    width: 1px; height: 6px;
    background: var(--line);
}

/* ------------------------------------------------------- home: bewijsbalk */
.proof {
    background: var(--vlak);
    color: #fff;
}
.proof__inner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
}
.proof__item {
    padding: 26px 20px;
    position: relative;
}
.proof__item + .proof__item::before {
    content: '';
    position: absolute; left: 0; top: 26px; bottom: 26px;
    width: 1px;
    background: rgba(255, 255, 255, .14);
}
.proof__item b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
}
.proof__item span {
    display: block;
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

/* ---------------------------------------------------------- home: tegels */
.tiles { display: grid; gap: 16px; }
.tiles--featured { grid-template-columns: repeat(2, 1fr); margin-bottom: 16px; }
.tiles--rest { grid-template-columns: repeat(3, 1fr); }

.tile {
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background: var(--vlak);
    isolation: isolate;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.tile:hover { color: #fff; }

.tile__media { display: block; }
/* Tegel zonder eigen beeld: effen vlak, zodat de tekst leesbaar blijft. */
.tile--plain .tile__media { min-height: 210px; background: var(--vlak); }
.tile--plain.tile--lg .tile__media { min-height: 260px; }
.tile__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.tile--lg .tile__media img { aspect-ratio: 16 / 10; }

/*
 * De sluier over de foto. De donkerte is instelbaar in het CMS, algemeen of
 * per tegel, via --tile-o (een waarde tussen 0 en 1). De tussenstops volgen
 * die waarde, zodat het verloop zijn vorm houdt.
 */
.tile__media::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
        to top,
        rgba(11, 26, 43, var(--tile-o, .72)) 12%,
        rgba(11, 26, 43, calc(var(--tile-o, .72) * .38)) 55%,
        rgba(11, 26, 43, calc(var(--tile-o, .72) * .14)) 100%
    );
    transition: opacity .3s var(--ease);
}
/* Hoeveel de sluier bij aanwijzen oplicht, hangt af van het gekozen
   animatietype; zie de blokken onderaan deze stylesheet. */

.tile__body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: block;
    padding: 22px 24px;
}
.tile__title {
    display: block;
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.tile--lg .tile__title { font-size: 1.5rem; }
.tile__text {
    display: block;
    margin-top: 6px;
    font-size: .92rem;
    color: rgba(255, 255, 255, .78);
    max-width: 40ch;
}
.tile__more {
    display: inline-block;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    padding-bottom: 2px;
}

/* ------------------------------------------- hero met beeld (subpagina's) */
.hero--media { padding-block: clamp(44px, 5.5vw, 76px); }
.hero--media .hero__inner { max-width: none; }
.hero--media .hero__visual img,
.hero--media .hero__visual video { aspect-ratio: 3 / 2; }
.hero--media .hero__intro { max-width: 34rem; }

/* ------------------------------------------------------------- kerncijfers */
.figures {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.figure-item { background: var(--paper); padding: 24px 22px; }
.figure-item b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--ink);
}
.figure-item span {
    display: block;
    margin-top: 9px;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--slate);
}

/* Kaart zonder link: zelfde vorm, geen hover-gedrag. */
.card--static { cursor: default; }
.card--static:hover { transform: none; box-shadow: none; border-color: var(--line); }

/* Beeld links in plaats van rechts. */
.feature--flip .feature__media { order: 2; }

/* ------------------------------------------------------ home: uitgelicht */
.features { display: grid; gap: clamp(32px, 5vw, 64px); }

.feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}
/* Om en om spiegelen, zodat de reeks ritme krijgt. */
.feature:nth-child(even) .feature__media { order: 2; }

.feature__media { margin: 0; }
.feature__media img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
}
.feature__title { font-size: clamp(1.4rem, 2.4vw, 1.85rem); margin-bottom: .4em; }
.feature__text { color: var(--slate); }

.feature__meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 22px;
}
.feature__meta li {
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .06em;
    padding: 6px 12px;
    background: var(--mist);
    border-radius: 999px;
    color: var(--ink-soft);
}

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}

/* ---------------------------------------------------------------- casussen */
.case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
}
.case {
    display: flex; flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.case:hover { border-color: rgba(11, 95, 208, .38); }
.case__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--mist); }
.case__media img { width: 100%; height: 100%; object-fit: cover; }
.case__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.case__meta {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--font-mono); font-size: .72rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--slate);
}
.case__tag { color: var(--signal); }
.case__title { font-size: 1.12rem; margin: 0; }
.case__title a { color: inherit; text-decoration: none; }
.case__title a:hover { color: var(--signal); }
.case__excerpt { font-size: .94rem; color: var(--slate); margin: 0; flex: 1; }

/* -------------------------------------------------------- uitgelichte case */
.case--featured {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: stretch;
}
.case--featured:hover { transform: none; box-shadow: none; border-color: var(--line); }
.case--featured .case__media { aspect-ratio: auto; height: 100%; min-height: 300px; }
.case--featured .case__body { padding: clamp(28px, 3.5vw, 44px); justify-content: center; }
.case--featured .case__title { font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.case--featured .case__excerpt { font-size: 1rem; flex: 0 0 auto; }
.case--featured .arrow-link { margin-top: 8px; align-self: flex-start; }


/* -------------------------------------------------------------- opleidingen */
.course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 22px;
}
.course {
    display: flex; flex-direction: column;
    padding: clamp(26px, 3vw, 36px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.course__name { font-size: 1.45rem; margin-bottom: .3em; }
.course__lead { color: var(--ink-soft); font-weight: 500; }
.course__body { color: var(--slate); font-size: .96rem; }
.course .specs { margin-top: 6px; }
.course .btn { margin-top: 26px; align-self: flex-start; }

/* ----------------------------------------------------------------- team */
/*
 * Het raster paste precies zes kolommen. Bij zeven of meer personen kwam er
 * een losse rij achter, en dat oogt als een fout. Nu verdeelt het raster zich
 * over de beschikbare breedte: negen personen worden vanzelf twee nette rijen.
 */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
}
@media (min-width: 1040px) {
    /* Nooit smaller dan leesbaar, en hoogstens zes op een rij. */
    .team-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}
.member figure { margin: 0; }
.member img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
}
.member__name { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin-top: 14px; }
.member__role { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); margin-top: 3px; }

.pullquote {
    margin: 0;
    padding: clamp(28px, 4vw, 44px);
    background: var(--mist);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--signal);
}
.pullquote p {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, 1.42rem);
    line-height: 1.4;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: -.01em;
}
.pullquote footer {
    font-family: var(--font-mono); font-size: .76rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--slate);
    margin-top: 16px;
}

/* ---------------------------------------------------------------- contact */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label {
    font-family: var(--font-mono);
    font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink);
}
.field input, .field select, .field textarea {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    padding: 13px 15px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
    width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--signal);
    box-shadow: 0 0 0 3px var(--signal-tint);
}
.field textarea { min-height: 150px; resize: vertical; }
.field--error input, .field--error textarea { border-color: #c0392b; }
.field__error { font-size: .84rem; color: #c0392b; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field--hidden { position: absolute; left: -9999px; }

.alert {
    padding: 16px 20px;
    border-radius: var(--radius);
    font-size: .95rem;
    border: 1px solid;
}
.alert--ok    { background: var(--signal-tint); border-color: rgba(11, 95, 208, .3); color: var(--signal-dark); }
.alert--error { background: #fdf0ee; border-color: #eecfc9; color: #a5382a; }
.alert ul { margin: 8px 0 0; padding-left: 18px; }

.info-panel {
    padding: clamp(26px, 3vw, 34px);
    background: var(--mist);
    border-radius: var(--radius-lg);
}
.info-panel + .info-panel { margin-top: 18px; }
.info-panel h2 { font-size: 1.15rem; }
.info-panel .address-list { margin-top: 6px; }

/* ------------------------------------------------------------------ shop */
.shop-note {
    padding: clamp(26px, 3vw, 36px);
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
    background: var(--mist);
}
.shop-note h2 { font-size: 1.25rem; }
.shop-note p { color: var(--slate); }

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 18px;
    margin-bottom: 34px;
}
.product {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--paper);
}
.product__media {
    aspect-ratio: 4 / 3;
    background: repeating-linear-gradient(45deg, var(--mist) 0 10px, var(--mist-deep) 10px 20px);
}
.product__body { padding: 18px 20px 22px; }
.product__name { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.product__price { font-family: var(--font-mono); font-size: .86rem; color: var(--slate); margin-top: 6px; }

/* ---------------------------------------------------------------- footer */
.footer {
    background: var(--mist);
    border-top: 1px solid var(--line);
    padding-block: clamp(48px, 6vw, 76px) 32px;
    font-size: .93rem;
}
.footer__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: clamp(28px, 4vw, 52px);
}
.footer__heading {
    font-family: var(--font-mono);
    font-size: .74rem; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 18px;
}
.footer__pitch { color: var(--slate); margin-top: 18px; max-width: 32ch; }
.footer__direct { margin-top: 16px; font-family: var(--font-mono); font-size: .86rem; }
.footer__direct a { text-decoration: none; }
.footer__direct a:hover { text-decoration: underline; }

.social { display: flex; gap: 16px; list-style: none; margin-top: 18px; }
.social a { font-size: .86rem; color: var(--slate); text-decoration: none; }
.social a:hover { color: var(--signal); }

.address-list { list-style: none; display: grid; gap: 16px; }
.address__name { display: block; font-weight: 600; color: var(--ink); }
.address__lines { display: block; color: var(--slate); font-size: .9rem; }

.hours { margin: 0; }
.hours__row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.hours__row dt { color: var(--ink-soft); }
.hours__row dd { margin: 0; font-family: var(--font-mono); font-size: .84rem; color: var(--slate); }
.hours__row--closed dd { opacity: .6; }

.footer__menu { list-style: none; display: grid; gap: 9px; }
.footer__menu a { color: var(--slate); text-decoration: none; }
.footer__menu a:hover { color: var(--signal); }

.footer__bar {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: 12px 24px;
    margin-top: clamp(36px, 5vw, 60px);
    padding-top: 22px;
    border-top: 1px solid var(--line);
}
.footer__legal-info { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; font-family: var(--font-mono); font-size: .74rem; color: var(--slate); }
.footer__legal-links { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; font-size: .82rem; }
.footer__legal-links a { color: var(--slate); text-decoration: none; }
.footer__legal-links a:hover { color: var(--signal); }


/* ------------------------------------------------------- beeld in beweging */
/*
 * Uitgangspunten voor soepel bewegen:
 *
 * 1. Alleen transform en opacity animeren. Dat zijn de twee eigenschappen die
 *    de browser aan de grafische kaart kan overlaten. Schaduw, filter of
 *    kleuren meebewegen dwingt hem elke beeldwissel opnieuw te tekenen, en
 *    dat is precies wat schokkerig aanvoelt.
 * 2. De schaduw zit daarom op een aparte laag die alleen van doorzichtigheid
 *    verandert, niet op de tegel zelf.
 * 3. will-change alleen tijdens het bewegen, niet permanent. Anders houdt de
 *    browser voor elk element geheugen apart, wat op een lange pagina juist
 *    averechts werkt.
 * 4. Opkomen bij het scrollen en reageren op de muis schrijven wij in eigen
 *    variabelen en tellen we op, zodat ze niet om dezelfde eigenschap vechten.
 */

.tile,
.feature,
.case,
.member,
.gallery figure,
.card-grid > .card {
    --rev-y: 0px;
    --hov-y: 0px;
    transform: translate3d(0, calc(var(--rev-y) + var(--hov-y)), 0);
    transition: transform .5s var(--ease), opacity .6s var(--ease),
                box-shadow .35s var(--ease), border-color .35s var(--ease);
    backface-visibility: hidden;
}

/* ------------------------------------------------ opkomen bij het scrollen */
.js-reveal [data-reveal] {
    opacity: 0;
    --rev-y: 18px;
    will-change: transform, opacity;
}
.js-reveal [data-reveal].is-in {
    opacity: 1;
    --rev-y: 0px;
    will-change: auto;
}
.js-reveal [data-reveal] img { opacity: 0; transition: opacity .8s var(--ease); }
.js-reveal [data-reveal].is-in img { opacity: 1; }

/* --------------------------------------------------------------- schaduw
 * Een aparte schaduwlaag zou netter zijn voor de prestaties, maar de tegels
 * knippen alles binnen hun rand weg en dan is er niets te zien. Daarom hier
 * wel gewoon een overgang op de schaduw zelf, met een korte duur zodat het
 * niet in de weg zit.
 */
.tile, .case, .card-grid > .card { transition-property: transform, opacity, box-shadow, border-color; }
.tile:hover { box-shadow: var(--shadow-lg); }
.case:hover, .card-grid > .card:hover { box-shadow: var(--shadow-md); }

/* ------------------------------------------------------------ aanwijzen */
.tile:hover,
.case:hover,
.card-grid > .card:hover { --hov-y: -5px; }

.feature__media,
.gallery figure,
.member figure { overflow: hidden; border-radius: var(--radius-lg); }

.tile__media img,
.feature__media img,
.gallery figure img,
.case__media img,
.member img {
    transform: translate3d(0, 0, 0) scale(1);
    transition: transform .5s var(--ease);
    backface-visibility: hidden;
}
.tile:hover .tile__media img,
.feature:hover .feature__media img,
.gallery figure:hover img,
.case:hover .case__media img,
.member:hover img { will-change: transform; }

/* Tekst schuift mee. */
.tile__body { transition: transform .5s var(--ease); }

/* Het streepje onder BEKIJKEN tekent zichzelf. */
.tile__more { position: relative; border-bottom-color: transparent; }
.tile__more::after {
    content: '';
    position: absolute; left: 0; bottom: -1px;
    width: 100%; height: 1px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease);
}
.tile:hover .tile__more::after { transform: scaleX(1); }

/* De sluier over de tegel. */
.tile__media::after { transition: opacity .4s var(--ease); }

/* ================================================= 1. inzoomen (standaard) */
.anim-zoom .tile:hover .tile__media img,
.anim-zoom .feature:hover .feature__media img,
.anim-zoom .gallery figure:hover img,
.anim-zoom .case:hover .case__media img,
.anim-zoom .member:hover img {
    transform: translate3d(0, 0, 0) scale(1.06);
    transition-duration: .8s;
}
.anim-zoom .tile:hover .tile__media::after { opacity: .84; }
.anim-zoom .tile:hover .tile__body { transform: translate3d(0, -4px, 0); }

/* ============================================== 2. langzaam schuiven (pan) */
/* De foto staat al iets ingezoomd, zodat er ruimte is om te schuiven zonder
   dat er een rand zichtbaar wordt. */
.anim-pan .tile__media img,
.anim-pan .feature__media img,
.anim-pan .gallery figure img,
.anim-pan .case__media img {
    transform: translate3d(0, 0, 0) scale(1.06);
}
.anim-pan .tile:hover .tile__media img,
.anim-pan .feature:hover .feature__media img,
.anim-pan .gallery figure:hover img,
.anim-pan .case:hover .case__media img {
    transform: translate3d(-2.5%, -1.5%, 0) scale(1.1);
    transition-duration: 2.4s;
    transition-timing-function: linear;
}
.anim-pan .tile:hover .tile__media::after { opacity: .86; }

/* ======================================================= 3. oplichten (fade) */
.anim-fade .tile__media::after { transition: opacity .45s var(--ease); }
.anim-fade .tile:hover .tile__media::after { opacity: .55; }
.anim-fade .tile:hover .tile__body { transform: translate3d(0, -3px, 0); }
.anim-fade .feature__media img,
.anim-fade .gallery figure img,
.anim-fade .case__media img,
.anim-fade .member img { transition: opacity .45s var(--ease); }
.anim-fade .feature:hover .feature__media img,
.anim-fade .gallery figure:hover img,
.anim-fade .case:hover .case__media img { opacity: .86; }

/* ========================================================= 4. optillen (lift) */
.anim-lift .tile:hover,
.anim-lift .case:hover,
.anim-lift .card-grid > .card:hover { --hov-y: -9px; }
.anim-lift .tile:hover .tile__media::after { opacity: .88; }

/* ============================================================= 5. geen */
.anim-geen .tile:hover .tile__media img,
.anim-geen .feature:hover .feature__media img,
.anim-geen .gallery figure:hover img,
.anim-geen .case:hover .case__media img,
.anim-geen .member:hover img { transform: none; }
.anim-geen .tile:hover,
.anim-geen .case:hover,
.anim-geen .card-grid > .card:hover { --hov-y: 0px; }

/* Portretten kleuren in, ongeacht het gekozen type. */
.member img { filter: grayscale(1); transition: transform .5s var(--ease), filter .4s var(--ease); }
.member:hover img { filter: grayscale(0); }

@media (prefers-reduced-motion: reduce) {
    .tile, .feature, .case, .member, .gallery figure, .card-grid > .card {
        transform: none;
        transition: none;
    }
    .js-reveal [data-reveal],
    .js-reveal [data-reveal] img { opacity: 1; }
    .tile:hover .tile__media img,
    .feature:hover .feature__media img,
    .gallery figure:hover img,
    .case:hover .case__media img,
    .member:hover img,
    .tile:hover .tile__body { transform: none; }
    .tile:hover .tile__more::after { transform: scaleX(1); }
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .contact-layout { grid-template-columns: 1fr; }
    .split { grid-template-columns: 1fr; }
    .hero__tape { display: none; }

    .hero__layout { grid-template-columns: 1fr; }
    .hero__visual { order: -1; }
    .hero__visual img,
    .hero__visual video { aspect-ratio: 16 / 9; }

    /* Minder breedte beschikbaar: animatie achter de tekst, sluier sterker. */
    .hero__anim { left: 0; }
    .hero__canvas, .hero__poster { object-position: 88% 50%; }
    .hero__scrim {
        background: linear-gradient(to right,
            rgba(255,255,255,.97) 0%, rgba(255,255,255,.9) 44%,
            rgba(255,255,255,.5) 64%, rgba(255,255,255,0) 80%);
    }

    .proof__inner { grid-template-columns: repeat(3, 1fr); }
    .proof__item:nth-child(4)::before,
    .proof__item:nth-child(3n+1)::before { display: none; }

    .tiles--rest { grid-template-columns: repeat(2, 1fr); }

    .feature { grid-template-columns: 1fr; }
    .feature:nth-child(even) .feature__media,
    .feature--flip .feature__media { order: 0; }

    .figures { grid-template-columns: repeat(2, 1fr); }
    .case--featured { grid-template-columns: 1fr; }
    .case--featured .case__media { min-height: 0; aspect-ratio: 16 / 9; }
}

@media (max-width: 860px) {
    .nav-toggle { display: inline-flex; }

    .nav {
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
        max-height: 0;
        overflow: hidden;
        transition: max-height .28s var(--ease);
    }
    .nav.is-open { max-height: 80vh; overflow-y: auto; }

    .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px var(--gutter) 24px;
    }
    .nav__link { padding: 14px 4px; font-size: 1rem; justify-content: space-between; width: 100%; }
    .nav__item + .nav__item { border-top: 1px solid var(--line); }

    .submenu {
        position: static;
        opacity: 1; visibility: visible; transform: none;
        pointer-events: auto;
        background: none; box-shadow: none; border: 0; border-radius: 0;
        padding: 0 0 8px 14px;
        max-height: 0; overflow: hidden;
        transition: max-height .25s var(--ease);
    }
    .submenu::before { display: none; }

    /*
     * Op een aanraakscherm blijft :hover hangen na een tik. De regel die het
     * submenu dichthoudt bij hover was specifieker dan de regel die het opent,
     * waardoor het menu direct weer dichtklapte zodra je het aantikte.
     *
     * Daarom staat de hover-regel nu alleen aan op apparaten met een echte
     * muis, en is de open-regel zwaarder gemaakt zodat hij hoe dan ook wint.
     */
    @media (hover: hover) and (pointer: fine) {
        .nav__item--has-children:hover .submenu:not(.is-open) { max-height: 0; }
    }

    .nav__item--has-children .submenu.is-open { max-height: 420px; }

    .nav__item--cta { border-top: 0; margin-top: 16px; }
    .nav__item--cta .btn { width: 100%; padding: 14px; }

    .usp-bar__list li:nth-child(n+3) { display: none; }
    .usp-bar__contact a:last-child { display: none; }
}

@media (max-width: 620px) {
    body { font-size: 16px; }
    .footer__grid { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; }
    .numbered__item { grid-template-columns: 1fr; gap: 6px; }
    .numbered__item::before { grid-row: auto; }
    .numbered__item > h3,
    .numbered__item > .numbered__tekst { grid-column: 1; }
    .specs__row { grid-template-columns: 1fr; gap: 4px; }
    .cta-panel { flex-direction: column; align-items: flex-start; }
    .hero__actions .btn { width: 100%; }

    .tiles--featured,
    .tiles--rest { grid-template-columns: 1fr; }
    .tile__media img,
    .tile--lg .tile__media img { aspect-ratio: 16 / 10; }

    .proof__inner { grid-template-columns: repeat(2, 1fr); }
    .proof__item::before { display: none !important; }
    .proof__item { padding: 20px 16px; border-top: 1px solid rgba(255, 255, 255, .14); }
    .proof__item:last-child { grid-column: 1 / -1; }
    .proof__item b { font-size: 1.4rem; }

    .hero__readout span:nth-child(n+4) { display: none; }
    .figures { grid-template-columns: 1fr; }

    /* Op mobiel staat de tekst boven en de animatie eronder, niet erachter. */
    .hero--anim {
        display: block;
        min-height: 0;
        padding-block: clamp(32px, 8vw, 48px) 0;
    }
    .hero__anim { position: static; }
    .hero__canvas, .hero__poster {
        height: auto;
        aspect-ratio: 860 / 577;
        object-position: center;
        margin-top: 28px;
    }
    .hero__poster { position: absolute; inset: auto 0 auto 0; }
    /*
     * Bij de gewone kop staat de tekst op een smal scherm ONDER het beeld, dus
     * daar is een sluier overbodig. Bij de brede kop staat hij er juist
     * overheen; die moet dus blijven, anders is de tekst onleesbaar.
     */
    .hero:not(.hero--breed) .hero__scrim { display: none; }
    .hero--anim .hero__readout { position: static; }
    .hero__readout-inner span:nth-child(n+4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .btn:hover, .card:hover, .case:hover { transform: none; }
}

/* ==========================================================================
   Webshop
   ========================================================================== */

/* ------------------------------------------------------- winkelwagen-knop */
.cartlink {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    transition: border-color .18s var(--ease), color .18s var(--ease);
}
.cartlink:hover { border-color: var(--signal); color: var(--signal); }
.cartlink__aantal {
    position: absolute; top: -7px; right: -7px;
    min-width: 19px; height: 19px;
    display: grid; place-items: center;
    padding: 0 5px;
    background: var(--signal); color: #fff;
    border-radius: 999px;
    font-family: var(--font-mono); font-size: .66rem; line-height: 1;
}

/* ------------------------------------------------------------- overzicht */
.shopbar {
    display: flex; flex-wrap: wrap; gap: 16px;
    align-items: flex-end; justify-content: space-between;
    margin-bottom: clamp(24px, 3vw, 36px);
}
.shopbar__zoek { display: flex; gap: 8px; }
.shopbar__zoek input {
    width: 240px; padding: 9px 12px; font-size: .93rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    font-family: var(--font-body);
}
.shopbar__zoek input:focus {
    outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-tint);
}

.product { display: flex; flex-direction: column; }
.product__link { display: flex; flex-direction: column; text-decoration: none; color: inherit; flex: 1; }
.product__media {
    display: block; aspect-ratio: 4 / 3; overflow: hidden;
    background: repeating-linear-gradient(45deg, var(--mist) 0 10px, var(--mist-deep) 10px 20px);
}
.product__media img { width: 100%; height: 100%; object-fit: cover; }
.product__body { display: flex; flex-direction: column; gap: 5px; padding: 18px 20px; flex: 1; }
.product__sku {
    font-family: var(--font-mono); font-size: .7rem;
    letter-spacing: .08em; color: var(--slate);
}
.product__name { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.02rem; }
.product__text { font-size: .89rem; color: var(--slate); flex: 1; }
.product__price {
    font-family: var(--font-display); font-weight: 700; color: var(--ink);
    font-size: 1.05rem; margin-top: 6px;
}
.product__price small {
    display: block; font-family: var(--font-mono); font-size: .68rem;
    font-weight: 400; color: var(--slate); letter-spacing: .06em;
}
.product__foot {
    display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center; justify-content: space-between;
    padding: 0 20px 18px;
}
.arrow-link--sm { font-size: .85rem; }
.tag--uit { background: var(--mist-deep); color: var(--slate); }

/* -------------------------------------------------------- productpagina */
.kruimels {
    display: flex; gap: 8px; align-items: center;
    font-family: var(--font-mono); font-size: .74rem;
    letter-spacing: .06em; color: var(--slate);
}
.kruimels a { color: var(--slate); text-decoration: none; }
.kruimels a:hover { color: var(--signal); }

.pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.pdp__hoofd { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--mist); }
.pdp__hoofd img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.pdp__hoofd--leeg { aspect-ratio: 4 / 3; background: repeating-linear-gradient(45deg, var(--mist) 0 12px, var(--mist-deep) 12px 24px); }
.pdp__strip { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pdp__mini {
    width: 72px; padding: 0; border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden; background: none; cursor: pointer;
}
.pdp__mini img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pdp__mini.is-actief { border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal-tint); }

.pdp__naam { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: .3em; }
.pdp__lead { color: var(--slate); font-size: 1.04rem; }
.pdp__prijs { display: flex; align-items: baseline; gap: 10px; margin: 20px 0; }
.pdp__prijs strong { font-family: var(--font-display); font-size: 1.9rem; color: var(--ink); letter-spacing: -.02em; }
.pdp__prijs span { font-family: var(--font-mono); font-size: .74rem; color: var(--slate); }
.pdp__bestel .field { margin-bottom: 14px; }
.pdp__acties { display: flex; gap: 12px; align-items: flex-end; margin-top: 4px; }
.aantal input { width: 84px; }
.pdp__voorraad { font-family: var(--font-mono); font-size: .74rem; color: var(--slate); margin-top: 12px; }
.pdp__usps { list-style: none; display: grid; gap: 8px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.pdp__usps li { position: relative; padding-left: 24px; font-size: .93rem; color: var(--slate); }
.pdp__usps li::before {
    content: ''; position: absolute; left: 0; top: 7px;
    width: 11px; height: 7px;
    border-left: 2px solid var(--signal); border-bottom: 2px solid var(--signal);
    transform: rotate(-45deg);
}

/* --------------------------------------------------------- winkelwagen */
.cart { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 4vw, 44px); align-items: start; }
.cart__regels { display: grid; gap: 12px; }
.cartline {
    display: grid; grid-template-columns: 92px 1fr 90px 110px 32px;
    gap: 16px; align-items: center;
    padding: 14px; background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.cartline__beeld { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--mist-deep); }
.cartline__beeld img { width: 100%; height: 100%; object-fit: cover; }
.cartline__naam { font-family: var(--font-display); font-weight: 600; color: var(--ink); text-decoration: none; }
.cartline__naam:hover { color: var(--signal); }
.cartline__opties { list-style: none; margin: 5px 0 0; font-size: .84rem; color: var(--slate); }
.cartline__stuk { font-family: var(--font-mono); font-size: .74rem; color: var(--slate); margin: 6px 0 0; }
.cartline__aantal input { width: 74px; text-align: center; }
.cartline__bedrag { font-family: var(--font-display); font-weight: 700; color: var(--ink); text-align: right; }
.cartline__weg button {
    background: none; border: 0; color: var(--slate);
    font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.cartline__weg button:hover { color: #c0392b; }
.cart__acties { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.cart__totaal { background: var(--mist); border-radius: var(--radius-lg); padding: 24px; position: sticky; top: 100px; }

.totalen { margin: 16px 0 20px; }
.totalen > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: .94rem; }
.totalen dt { color: var(--slate); }
.totalen dd { margin: 0; font-family: var(--font-mono); font-size: .88rem; color: var(--ink); }
.totalen__eind {
    border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px !important;
}
.totalen__eind dt { color: var(--ink); font-weight: 600; }
.totalen__eind dd { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }

/* ------------------------------------------------------------ afrekenen */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(24px, 4vw, 44px); align-items: start; }
.checkout__velden { display: grid; gap: 18px; }
.checkout__overzicht { position: sticky; top: 100px; }
.checkout .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.checkout .card h2 { font-size: 1.1rem; margin-bottom: 16px; }
.checkout .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.field--fout input, .field--fout textarea { border-color: #c0392b; }
.fout { color: #c0392b; }
.check--fout { color: #c0392b; }

.mini-regels { list-style: none; display: grid; gap: 10px; margin-bottom: 4px; }
.mini-regels li { display: grid; grid-template-columns: 30px 1fr auto; gap: 8px; font-size: .9rem; align-items: start; }
.mini-regels__aantal { font-family: var(--font-mono); font-size: .8rem; color: var(--slate); }
.mini-regels__naam small { display: block; color: var(--slate); font-size: .8rem; }
.mini-regels__bedrag { font-family: var(--font-mono); font-size: .84rem; }

/* --------------------------------------------------------- klantportaal */
.smallform { max-width: 460px; margin-inline: auto; }
.smallform .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; }
.smallform .field { margin-bottom: 16px; }
.smallform .field__label,
.checkout .field__label,
.pdp .field__label {
    display: block; font-family: var(--font-mono); font-size: .7rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px;
}
.smallform input, .checkout input, .checkout textarea, .checkout select,
.pdp select, .pdp input {
    width: 100%; padding: 11px 13px; font-family: var(--font-body); font-size: .96rem;
    border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--paper);
}
.smallform input:focus, .checkout input:focus, .checkout textarea:focus,
.checkout select:focus, .pdp select:focus, .pdp input:focus {
    outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-tint);
}
.checkout .field, .pdp .field { margin-bottom: 16px; }
.checkout .check, .smallform .check { display: flex; gap: 9px; align-items: flex-start; font-size: .92rem; margin: 12px 0; }
.checkout .check input, .smallform .check input { width: auto; margin-top: 3px; }

@media (max-width: 980px) {
    .pdp, .cart, .checkout { grid-template-columns: 1fr; }
    .cart__totaal, .checkout__overzicht { position: static; }
}
@media (max-width: 620px) {
    .cartline { grid-template-columns: 64px 1fr 32px; grid-template-areas: "beeld info weg" "aantal aantal bedrag"; }
    .cartline__beeld { grid-area: beeld; }
    .cartline__info { grid-area: info; }
    .cartline__weg { grid-area: weg; }
    .cartline__aantal { grid-area: aantal; }
    .cartline__bedrag { grid-area: bedrag; }
    .checkout .grid2 { grid-template-columns: 1fr; }
    .shopbar__zoek input { width: 100%; }
}

/* ------------------------------------------------------------- verhuur */
.huurtarieven {
    list-style: none;
    margin: 0 0 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.huurtarieven li {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 10px 16px;
    font-size: .93rem;
}
.huurtarieven li + li { border-top: 1px solid var(--line); }
.huurtarieven span { color: var(--slate); }
.huurtarieven strong { font-family: var(--font-mono); font-size: .9rem; color: var(--ink); }

.huurdatums { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.huurmelding {
    margin: 0 0 14px;
    padding: 11px 14px;
    background: #fdf0ee;
    border: 1px solid #eecfc9;
    border-radius: var(--radius);
    color: #a5382a;
    font-size: .9rem;
}

.huurbezet { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.huurbezet ul { list-style: none; display: grid; gap: 4px; margin-top: 8px; }
.huurbezet li {
    font-family: var(--font-mono); font-size: .8rem; color: var(--slate);
}

.cartline__periode { margin: 6px 0 0; font-size: .89rem; color: var(--ink-soft); }
.cartline__periode span { color: var(--slate); }
.cartline__een { font-family: var(--font-mono); font-size: .78rem; color: var(--slate); }

@media (max-width: 620px) {
    .huurdatums { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- bezorgen of ophalen */
.lever-keuze { display: grid; gap: 10px; margin-bottom: 4px; }

.lever {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    grid-template-areas: "radio kop prijs" ". tekst tekst";
    gap: 2px 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color .18s var(--ease), background .18s var(--ease);
}
.lever:hover { border-color: var(--slate); }
.lever.is-actief { border-color: var(--signal); background: var(--signal-tint); }
.lever input { grid-area: radio; width: auto; margin-top: 3px; }
.lever__kop { grid-area: kop; font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.lever__tekst { grid-area: tekst; font-size: .88rem; color: var(--slate); }
.lever__prijs { grid-area: prijs; font-family: var(--font-mono); font-size: .82rem; color: var(--ink); }

.afhaalinfo {
    margin-top: 16px;
    padding: 16px;
    background: var(--mist);
    border-radius: var(--radius-lg);
}
.afhaalinfo__adres { margin: 0 0 14px; font-size: .93rem; }
.afhaalinfo__uren dl { display: grid; gap: 3px; margin: 8px 0 14px; }
.afhaalinfo__uren dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; }
.afhaalinfo__uren dt { color: var(--slate); }
.afhaalinfo__uren dd { margin: 0; font-family: var(--font-mono); font-size: .8rem; }

@media (max-width: 620px) {
    .lever { grid-template-columns: 22px 1fr; grid-template-areas: "radio kop" ". tekst" ". prijs"; }
}

/* ------------------------------------------------ korting en retouren */
.couponblok { margin: 18px 0; padding-top: 16px; border-top: 1px solid var(--line); }
.coupon { display: flex; gap: 8px; }
.coupon input[type=text] { flex: 1; text-transform: uppercase; }
.coupon--actief {
    align-items: center; justify-content: space-between;
    padding: 10px 14px; background: var(--signal-tint);
    border: 1px solid var(--signal); border-radius: var(--radius);
}
.coupon--actief span { display: grid; }
.coupon--actief strong { font-family: var(--font-mono); font-size: .85rem; color: var(--signal-dark); }
.coupon--actief small { color: var(--slate); font-size: .8rem; }
.coupon--actief button {
    background: none; border: 0; cursor: pointer;
    font-size: 1.2rem; line-height: 1; color: var(--slate);
}
.coupon--actief button:hover { color: var(--ink); }
.totalen__korting dd { color: var(--signal-dark); }

.retourblok { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.retourblok summary { cursor: pointer; color: var(--signal); font-size: .93rem; }
.retourblok h3 { font-size: 1rem; margin-bottom: 6px; }
.retourform { margin-top: 16px; display: grid; gap: 12px; max-width: 460px; }

/* ------------------------------------------------------- filmbanner */
/*
 * Smalle band met de frame-animatie. Standaard op contentbreedte, zodat hij
 * in dezelfde kolom staat als de tekst eronder. De hoogte volgt de verhouding
 * van de beelden (1600 x 292).
 */
/*
 * Krappe ruimte eromheen: de band hoort tegen de hero en de tekst aan te
 * liggen, niet als los blok in het midden te zweven.
 */
.bannerfilm-band { padding-block: clamp(10px, 1.4vw, 16px); }

/*
 * De sectie direct onder de band mag ook krapper: anders staat er alsnog een
 * flinke witruimte tussen de drone en de tekst.
 */
.bannerfilm-band + .section { padding-top: clamp(24px, 3vw, 40px); }

.bannerfilm {
    position: relative;
    width: 100%;
    aspect-ratio: 1600 / 292;
    overflow: hidden;
    background: var(--mist);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}

/* Variant over de volle schermbreedte: geen randen en hoeken, wel lijnen. */
.bannerfilm-band--vol { padding-block: 0; }
.bannerfilm--vol {
    border-inline: 0;
    border-radius: 0;
    border-block: 1px solid var(--line);
    background: var(--paper);
}

.bannerfilm__canvas,
.bannerfilm__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Het canvas ligt boven de poster en neemt het over zodra JavaScript draait. */
.bannerfilm__canvas { opacity: 0; transition: opacity .25s var(--ease); z-index: 1; }
.bannerfilm.is-ready .bannerfilm__canvas { opacity: 1; }
.bannerfilm.is-ready .bannerfilm__poster { opacity: 0; transition: opacity .3s var(--ease); }

/*
 * Op een smal scherm is er geen muis, en bijsnijden zou de drone buiten beeld
 * duwen: hij begint links en het beeld is vijf keer zo breed als hoog. Daarom
 * tonen wij daar het hele frame, met wat lucht erboven en eronder.
 */
@media (max-width: 700px) {
    .bannerfilm { aspect-ratio: auto; height: 110px; }
    .bannerfilm__canvas,
    .bannerfilm__poster { object-fit: contain; }
}

/* --------------------------------------------------- Over ons: zijkolom */
.overons__zij { display: grid; gap: 24px; align-content: start; }

.fotoblok {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--mist);
}
.fotoblok img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.fotoblok figcaption {
    padding: 11px 16px;
    font-size: .85rem;
    color: var(--slate);
    border-top: 1px solid var(--line);
}

/*
 * Video in het fotoblok houdt de verhouding van het bestand zelf; die staat
 * als stijl op het element. Lukt uitlezen niet, dan bepaalt de browser hem
 * zodra de video geladen is. Een vaste 4:3 opleggen deden wij eerder, maar
 * dan krijgt een breed filmpje balken links en rechts.
 */
.fotoblok video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    background: var(--mist);
    max-height: 560px;   /* zodat een staande video de kolom niet overneemt */
}

/* Voorbeeld van een video in het beheer. */
.videoveld__preview {
    display: block;
    width: 100%;
    max-height: 200px;
    margin-bottom: 10px;
    border-radius: var(--radius);
    background: #000;
}

/* ------------------------------------------------ inloglink als pictogram */
.accountlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink-soft);
    transition: border-color .18s var(--ease), color .18s var(--ease);
}
.accountlink:hover { border-color: var(--signal); color: var(--signal); }
.accountlink.is-ingelogd { border-color: var(--signal); color: var(--signal); }
.accountlink__tekst { display: none; }

/* ------------------------------------------------------------ taalkeuze */
/*
 * Taalkeuze: alleen een wereldbol met de taalcode. De volledige namen namen te
 * veel breedte in naast het menu; die staan nu in het uitklaplijstje.
 */
.taalkeuze { position: relative; }

.taalkeuze__knop {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 40px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: none;
    color: var(--slate);
    cursor: pointer;
    transition: border-color .18s var(--ease), color .18s var(--ease);
}
.taalkeuze__knop:hover,
.taalkeuze.is-open .taalkeuze__knop { border-color: var(--signal); color: var(--signal); }

.taalkeuze__code {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .04em;
}

.taalkeuze__lijst {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 60;
    min-width: 150px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}
.taalkeuze__lijst[hidden] { display: none; }

.taalkeuze__lijst button {
    display: block;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius);
    background: none;
    text-align: left;
    font-size: .88rem;
    color: var(--ink-soft);
    cursor: pointer;
}
.taalkeuze__lijst button:hover { background: var(--mist); color: var(--signal); }
.taalkeuze__lijst button.is-actief { color: var(--signal); font-weight: 600; }

@media (max-width: 900px) {
    /* In het uitgeklapte mobiele menu staat de keuze in de rij, niet zwevend;
       anders valt het lijstje buiten beeld. */
    .taalkeuze__lijst { position: static; box-shadow: none; margin-top: 6px; min-width: 0; }
}

.visueel-verborgen {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* De balk die Google er standaard bovenop zet hoort hier niet. */
#google_translate_element { display: none; }
.goog-te-banner-frame, .skiptranslate { display: none !important; }
body { top: 0 !important; }

@media (max-width: 900px) {
    /* In het uitgeklapte menu is een los pictogram raadselachtig, dus daar
       komt de tekst er weer bij en loopt het item mee in de lijst. */
    .accountlink {
        width: 100%;
        height: auto;
        justify-content: flex-start;
        border: 0;
        border-radius: 0;
        padding: 14px 4px;
        font-size: 1rem;
        color: var(--ink);
    }
    .accountlink__tekst { display: inline; }

    .taalkeuze {
        width: 100%;
        justify-content: flex-start;
        border: 0;
        border-radius: 0;
        padding: 14px 4px;
        height: auto;
    }
    .taalkeuze__lijst button { font-size: 1rem; }
}

/* ------------------------------------------------- ingesloten media */
.hero__embed {
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--vlak);
}
.hero__embed iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;   /* wordt overschreven als de code een eigen maat meegeeft */
    border: 0;
}

/* ------------------------------------------------------------ mediablok */
.mediablok__figuur { margin: 0; }

.mediablok__inhoud {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--mist);
    border: 1px solid var(--line);
}
.mediablok--volledig .mediablok__inhoud { border-radius: 0; border-inline: 0; }

.mediablok__inhoud img,
.mediablok__inhoud video {
    display: block;
    width: 100%;
    height: auto;
}
.mediablok__inhoud iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

.mediablok__figuur figcaption {
    margin-top: 10px;
    font-size: .88rem;
    color: var(--slate);
}

/* Breder dan de tekst, maar niet tot de rand: geeft lucht bij een foto of
   filmpje zonder dat het blok de pagina overneemt. */
.mediablok--breed .mediablok__figuur { max-width: min(100%, 1000px); margin-inline: auto; }
.mediablok--tekst .mediablok__figuur  { max-width: min(100%, 740px); }

/* Videoveld in de blokeditor. */
.videopick { display: grid; gap: 8px; }

/* Ingesloten venster in het fotoblok naast de tekst. */
.fotoblok iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* --------------------------------------------------- casus in detail */
.hero--case { padding-block: clamp(36px, 4vw, 60px) clamp(20px, 2.5vw, 32px); }

/* Kop: tekst links, beeld rechts. */
.casuskop {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: center;
}

/*
 * Kleiner dan een gewone paginakop. Op een casus is de titel geen wervende
 * kreet maar een omschrijving, en die mag rustiger staan.
 */
.casuskop h1 {
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    line-height: 1.2;
    max-width: 22ch;
}
.casuskop .hero__lede { font-size: 1rem; max-width: 46ch; margin-top: 12px; }
.case__datum { margin-top: 14px; font-family: var(--font-mono); font-size: .78rem; color: var(--slate); }

.casuskop__beeld { margin: 0; }
.casuskop__beeld img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
}

/*
 * Een tekstsectie gebruikt de volle kolom. Standaard houdt .prose een
 * leesbreedte van 68 tekens aan; die heffen wij hier op, want u kiest
 * bewust voor volle breedte.
 */
.casus-sectie--tekst .casus-sectie__tekst { max-width: none; }

/*
 * Bij de zij-indelingen blijft die leesbreedte staan: daar staat de tekst
 * al in een halve kolom en zou opheffen niets veranderen.
 */
.casus-sectie--links .casus-sectie__tekst,
.casus-sectie--rechts .casus-sectie__tekst,
.casus-sectie--beeld .casus-sectie__tekst { max-width: 68ch; }
.casus-sectie__tekst h2 { margin-bottom: 12px; }

/* Beeld en tekst naast elkaar. De volgorde wisselt met de keuze in het
   beheer; op een smal scherm staat het beeld altijd boven. */
.casus-sectie__duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 3vw, 48px);
    align-items: start;
}
.casus-sectie--rechts .casus-sectie__media { order: 2; }

.casus-sectie__media { margin: 0; }
.casus-sectie__media img,
.casus-sectie__media video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    background: var(--mist);
}
.casus-sectie__media iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--radius-lg);
}
.casus-sectie__media figcaption {
    margin-top: 10px;
    font-size: .85rem;
    color: var(--slate);
}

.casus-sectie--beeld .casus-sectie__tekst { margin-top: 28px; }

/* Beeld onder een tekstsectie: volle breedte, met lucht ertussen. */
.casus-sectie__media--onder { margin-top: clamp(20px, 2.5vw, 32px); }

/*
 * Krappere ruimte tussen de secties van een casus.
 *
 * De gewone sectieruimte is bedoeld om losse onderwerpen op een pagina uit
 * elkaar te houden: tot 104 px boven en onder, dus ruim 200 px ertussen. Een
 * casus is één doorlopend verhaal, en dan valt de tekst uit elkaar.
 */
.casus-sectie { padding-block: clamp(22px, 2.6vw, 34px); }

/* Ook de inleiding erboven mag krapper, zodat het geheel doorloopt. */
.casus-sectie--inleiding { padding-block: clamp(20px, 2.4vw, 30px); }

/* --------------------------------------------- casussen als tegels */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/*
 * Kleinere tegels onder een casus. Het gaat om een verwijzing naar ander
 * werk, niet om het hoofdgerecht, dus alles een maatje kleiner.
 */
.cases--tegels { gap: 18px; }
.cases--tegels .case__media { aspect-ratio: 16 / 9; }
.cases--tegels .case__body { padding: 14px 16px 18px; gap: 7px; }
.cases--tegels .case__meta { font-size: .66rem; gap: 8px; }
.cases--tegels .case__title { font-size: .98rem; }
.cases--tegels .case__excerpt {
    font-size: .86rem;
    /*
     * Hooguit drie regels, zodat de tegels even hoog blijven en de tekst niet
     * over de rand loopt. De flex-groei van de gewone kaart moet hier uit,
     * anders rekt de alinea alsnog op en telt de begrenzing niet.
     */
    flex: 0 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 960px) {
    .cases { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
    .casuskop { grid-template-columns: 1fr; }
    .casuskop__beeld { order: -1; }
    .casus-sectie__duo { grid-template-columns: 1fr; }
    .casus-sectie--rechts .casus-sectie__media { order: 0; }
}

@media (max-width: 620px) {
    .cases { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ tabellen in tekst */
/*
 * Tabellen die uit een spreadsheet zijn geplakt. Zij krijgen de stijl van de
 * site; de opmaak uit het rekenblad is bij het opslaan al verwijderd.
 */
.prose table,
.casus-sectie__tekst table,
.numbered__tekst table {
    width: 100%;
    margin: 18px 0;
    border-collapse: collapse;
    font-size: .94rem;
}

.prose table th,
.prose table td,
.casus-sectie__tekst table th,
.casus-sectie__tekst table td,
.numbered__tekst table th,
.numbered__tekst table td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
    color: var(--slate);
}

.prose table th,
.casus-sectie__tekst table th,
.numbered__tekst table th {
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--ink-soft);
}

/* De eerste rij als kop, ook als er geen th's in staan: dat is wat een
   spreadsheet meestal oplevert. */
.prose table tr:first-child td,
.casus-sectie__tekst table tr:first-child td,
.numbered__tekst table tr:first-child td {
    color: var(--ink);
    font-weight: 600;
    border-bottom-color: var(--ink-soft);
}

.prose table tr:last-child td,
.casus-sectie__tekst table tr:last-child td { border-bottom: 0; }

/* Op een smal scherm mag de tabel schuiven in plaats van te persen. */
@media (max-width: 700px) {
    .prose table,
    .casus-sectie__tekst table,
    .numbered__tekst table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ------------------------------------------------------- cookiemelding */
.cookiemelding {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 90;
    background: var(--vlak);
    color: #fff;
    box-shadow: 0 -8px 30px rgba(11, 26, 43, .22);
}
.cookiemelding[hidden] { display: none; }

.cookiemelding__binnen {
    max-width: var(--wrap);
    margin-inline: auto;
    padding: 20px clamp(16px, 4vw, 32px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(16px, 3vw, 40px);
    align-items: center;
}

.cookiemelding h2 { font-size: 1.02rem; margin-bottom: 6px; color: #fff; }
.cookiemelding p { font-size: .88rem; color: rgba(255, 255, 255, .78); margin: 0 0 6px; }
.cookiemelding__klein { font-size: .82rem; }
.cookiemelding a { color: #fff; text-decoration: underline; }

.cookiemelding__knoppen { display: flex; gap: 10px; flex-wrap: wrap; }
.cookiemelding__knoppen .btn:not(.btn--primary) {
    background: transparent;
    border-color: rgba(255, 255, 255, .4);
    color: #fff;
}

@media (max-width: 760px) {
    .cookiemelding__binnen { grid-template-columns: 1fr; }
    .cookiemelding__knoppen .btn { flex: 1; justify-content: center; }
}

/* Plek van geblokkeerde inhoud, met een knop om hem alsnog te laden. */
.embedslot {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--mist);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.embedslot iframe { display: block; width: 100%; height: 100%; border: 0; }

.embedslot__melding {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;
    padding: 20px;
    text-align: center;
    background: var(--mist);
}
.embedslot__melding p { max-width: 40ch; font-size: .88rem; color: var(--slate); margin: 0; }

/* ------------------------------------------- keurmerk in de voettekst */
/*
 * Het keurmerk heeft een witte achtergrond en de voettekst een lichte tint.
 * Een wit vlak met een dunne rand eromheen zet het beeld af tegen die tint,
 * in plaats van dat het er vaag in wegvalt.
 */
.footer__col--keurmerk { align-self: start; }

.keurmerk { margin: 0; display: grid; justify-items: start; gap: 10px; }

.keurmerk img {
    display: block;
    width: 118px;
    height: auto;
}

/* Het witte vlak is een keuze in het beheer, voor beelden zonder doorzichtige
   achtergrond. */
.keurmerk--vlak img {
    padding: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.keurmerk a { display: inline-block; transition: opacity .18s var(--ease); }
.keurmerk a:hover { opacity: .84; }

.keurmerk figcaption {
    font-size: .82rem;
    color: var(--slate);
    max-width: 22ch;
}

/* ------------------------------------------------------------- assistent */
.agent { position: fixed; right: 20px; bottom: 20px; z-index: 80; }

.agent__knop {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    background: var(--signal);
    color: var(--knop-tekst, #fff);
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(11, 26, 43, .24);
    transition: transform .18s var(--ease), background .18s var(--ease);
}
.agent__knop:hover { background: var(--signal-dark); transform: translateY(-2px); }
.agent.is-open .agent__knop { background: var(--vlak); }

.agent__venster {
    position: absolute;
    right: 0;
    bottom: 66px;
    width: min(380px, calc(100vw - 40px));
    max-height: min(560px, calc(100vh - 120px));
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 50px rgba(11, 26, 43, .18);
    overflow: hidden;
}
.agent__venster[hidden] { display: none; }

.agent__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--vlak);
    color: #fff;
}
.agent__kop strong { display: block; font-size: .95rem; }
.agent__kop small { color: rgba(255, 255, 255, .7); font-size: .78rem; }
.agent__sluit {
    border: 0; background: none; color: rgba(255, 255, 255, .8);
    font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.agent__sluit:hover { color: #fff; }

.agent__gesprek {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: grid;
    gap: 10px;
    align-content: start;
}

.agent__bericht {
    max-width: 88%;
    padding: 10px 13px;
    border-radius: var(--radius-lg);
    font-size: .89rem;
    line-height: 1.5;
    white-space: pre-wrap;
}
.agent__bericht--assistent { background: var(--mist); color: var(--ink-soft); justify-self: start; }
.agent__bericht--bezoeker  { background: var(--signal); color: var(--knop-tekst, #fff); justify-self: end; }
.agent__bericht--fout      { background: #fdeaea; color: #8d2b2b; justify-self: start; }

/* Drie stipjes terwijl er op antwoord wordt gewacht. */
.agent__wacht { display: inline-flex; gap: 4px; }
.agent__wacht span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--slate);
    animation: agentstip 1.1s infinite;
}
.agent__wacht span:nth-child(2) { animation-delay: .18s; }
.agent__wacht span:nth-child(3) { animation-delay: .36s; }

@keyframes agentstip {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
}

.agent__invoer {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding: 12px 12px 8px;
    border-top: 1px solid var(--line);
}
.agent__invoer textarea {
    flex: 1;
    resize: none;
    max-height: 110px;
    padding: 9px 12px;
    font-family: var(--font-body);
    font-size: .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.agent__verstuur {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border: 0; border-radius: var(--radius);
    background: var(--signal); color: var(--knop-tekst, #fff); cursor: pointer;
}
.agent__verstuur:disabled { opacity: .5; cursor: default; }

.agent__voet {
    margin: 0;
    padding: 0 14px 12px;
    font-size: .76rem;
    color: var(--slate);
}

@media (max-width: 620px) {
    .agent { right: 14px; bottom: 14px; }
    .agent__venster { bottom: 62px; max-height: calc(100vh - 100px); }
}

/* Links in een antwoord van de assistent. */
.agent__link {
    color: var(--signal-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.agent__bericht--assistent .agent__link:hover { color: var(--ink); }

/* Dealerprijs: de gewone prijs erbij, doorgestreept. */
.prijs__was {
    display: inline-block;
    margin-right: 8px;
    color: var(--slate);
    text-decoration: line-through;
    font-size: .92rem;
}
.prijs__groep {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--signal-tint);
    color: var(--signal-dark);
    font-size: .74rem;
    font-weight: 600;
    vertical-align: middle;
}

/* ------------------------------------------------ ervaringen van klanten */
.ervaringen {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 2.5vw, 32px);
    align-items: start;
}

.ervaring {
    margin: 0;
    padding: clamp(22px, 2.6vw, 32px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ervaring__tekst {
    margin: 0;
    font-size: .96rem;
    line-height: 1.65;
    color: var(--ink-soft);
}

/* De aanhalingstekens zet de opmaak; zo staan ze er altijd en altijd gelijk. */
.ervaring__tekst::before { content: '\201C'; }
.ervaring__tekst::after  { content: '\201D'; }

/* Een lang citaat tonen wij ingekort; de knop klapt het open. */
.ervaring--lang .ervaring__tekst {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ervaring--lang.is-open .ervaring__tekst {
    display: block;
    overflow: visible;
}

.ervaring__meer {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--signal);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
}
.ervaring__meer:hover { color: var(--signal-dark); text-decoration: underline; }

.ervaring__wie {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.ervaring__wie strong { display: block; color: var(--ink); font-size: .95rem; }
.ervaring__wie span { color: var(--slate); font-size: .86rem; }

@media (max-width: 820px) {
    .ervaringen { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- partnerbadge */
/*
 * Zweeft over de kop van de homepage. Binnen de hero geplaatst en niet
 * vastgezet in het scherm: een badge die meescrollt legt beslag op de hele
 * site en botst met de assistent rechtsonder.
 */
.partnerbadge {
    position: absolute;
    top: clamp(90px, 12vh, 150px);
    z-index: 5;
    width: var(--badge-breedte, 150px);
    filter: drop-shadow(0 10px 26px rgba(11, 26, 43, .28));
    transition: transform .25s var(--ease);
}
.partnerbadge--rechts { right: clamp(16px, 5vw, 64px); }
.partnerbadge--links  { left: clamp(16px, 5vw, 64px); }

.partnerbadge img { display: block; width: 100%; height: auto; }

/* Alleen bewegen als hij ergens naartoe leidt. */
.partnerbadge a { display: block; }
.partnerbadge a:hover { transform: translateY(-3px); }

@media (max-width: 900px) {
    /*
     * Op een smal scherm staat het beeld boven de tekst en is er rechts geen
     * ruimte meer. De badge gaat dan mee naar boven, over de hoek van het
     * beeld: eerder probeerde ik hem onderaan te zetten, maar daar viel hij
     * half buiten beeld en liep hij door de titel heen.
     */
    .partnerbadge {
        top: clamp(96px, 14vh, 150px);
        bottom: auto;
        right: 12px;
        left: auto;
        width: min(var(--badge-breedte, 150px), 96px);
    }

    /* Ook een badge die links stond, gaat rechts staan: links botst hij met
       de tekst die daaronder begint. */
    .partnerbadge--links { right: 12px; left: auto; }
}

@media (max-width: 620px) {
    .partnerbadge {
        top: clamp(84px, 12vh, 120px);
        width: min(var(--badge-breedte, 150px), 78px);
    }
}

/* ----------------------------------------------------- teamlid in detail */
/* De aanklikbare kaart is een knop; die moet er niet als knop uitzien. */
.member--klikbaar {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: inherit;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.member--klikbaar figure { position: relative; }
.member--klikbaar img { transition: transform .3s var(--ease); }
.member--klikbaar:hover img { transform: scale(1.03); }

/* Plusje rechtsonder op de foto, zodat zichtbaar is dat er meer is. */
.member__meer {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--signal);
    color: var(--knop-tekst, #fff);
    box-shadow: 0 4px 14px rgba(11, 26, 43, .28);
    transition: background .18s var(--ease);
}
.member--klikbaar:hover .member__meer { background: var(--signal-dark); }

.teamvenster {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: clamp(16px, 4vw, 40px);
}
.teamvenster[hidden] { display: none; }

.teamvenster__vlak {
    position: absolute;
    inset: 0;
    background: rgba(11, 26, 43, .55);
}

.teamvenster__kaart {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
    gap: clamp(20px, 3vw, 36px);
    width: min(760px, 100%);
    max-height: 88vh;
    overflow-y: auto;
    padding: clamp(20px, 3vw, 34px);
    background: var(--paper);
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 70px rgba(11, 26, 43, .3);
}

.teamvenster__sluit {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 0;
    background: none;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--slate);
    cursor: pointer;
}
.teamvenster__sluit:hover { color: var(--ink); }

.teamvenster__foto { margin: 0; }
.teamvenster__foto img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

.teamvenster__tekst h3 { margin: 0 0 2px; font-size: 1.3rem; }
.teamvenster__rol { margin: 0 0 14px; color: var(--slate); font-size: .92rem; }
.teamvenster__bio { margin: 0 0 18px; color: var(--ink-soft); line-height: 1.65; white-space: pre-wrap; }

.teamvenster__contact { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.teamvenster__contact div { display: flex; gap: 10px; padding: 4px 0; }
.teamvenster__contact dt { min-width: 74px; color: var(--slate); font-size: .88rem; }
.teamvenster__contact dd { margin: 0; font-size: .92rem; }
.teamvenster__contact a { color: var(--signal); }

@media (max-width: 700px) {
    /* Foto boven de tekst; naast elkaar wordt allebei te smal. */
    .teamvenster__kaart { grid-template-columns: 1fr; }
    .teamvenster__foto img { max-height: 34vh; object-fit: cover; }
}

/* ------------------------------------------------- zwevende webshopknop */
/*
 * Onder de kopbalk, niet erover: die balk blijft plakken bovenaan met de
 * winkelwagen, het account en de contactknop erin. De precieze afstand zet
 * het script, want de hoogte hangt af van de ingestelde logogrootte.
 */
.webshopknop {
    position: fixed;
    top: 90px;
    right: clamp(14px, 3vw, 28px);
    z-index: 95;

    /* Verborgen tot de bezoeker voorbij de kop is; anders ligt hij over de
       knoppen die daar al staan. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.webshopknop.is-zichtbaar,
.webshopknop.is-altijd {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.webshopknop__knop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--signal);
    color: var(--knop-tekst, #fff);
    font-family: var(--font-body);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(11, 26, 43, .26);
    transition: background .18s var(--ease);
}
.webshopknop__knop:hover { background: var(--signal-dark); }

.webshopknop__pijl { transition: transform .2s var(--ease); }
.webshopknop.is-open .webshopknop__pijl { transform: rotate(180deg); }

.webshopknop__lijst {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 44px rgba(11, 26, 43, .2);
}
.webshopknop__lijst[hidden] { display: none; }

.webshopknop__lijst a {
    display: block;
    padding: 9px 12px;
    border-radius: var(--radius);
    font-size: .9rem;
    color: var(--ink-soft);
    text-decoration: none;
}
.webshopknop__lijst a:hover { background: var(--mist); color: var(--signal); }

@media (max-width: 620px) {
    /* Alleen het icoon; de tekst kost te veel breedte naast het menu. */
    .webshopknop__knop { height: 38px; padding: 0 11px; }
    .webshopknop__knop span { display: none; }
}

/* ------------------------------------------- kopen op rekening, portaal */
.rekeningmelding {
    padding: 10px 14px;
    margin: 0 0 16px;
    border-radius: var(--radius);
    background: var(--signal-tint);
    color: var(--ink-soft);
    font-size: .9rem;
}
.rekeningmelding--laat  { background: #fdeaea; color: #8d2b2b; }
.rekeningmelding--bijna { background: #fff6ed; color: #92400e; }
.rekeningmelding--ok    { background: #eaf6ee; color: #1a7f37; }

.openstaand__totaal { margin: 0 0 12px; color: var(--slate); }
.openstaand__totaal strong { font-size: 1.3rem; color: var(--ink); }
.openstaand__laat { color: #8d2b2b; font-weight: 600; }

/* ------------------------------------------- kop over de volle breedte */
/*
 * Tweede kopstijl: de beeldenreeks loopt over de hele breedte en de tekst
 * staat eroverheen. De beweging is dezelfde als bij de standaardkop; alleen
 * de indeling verschilt.
 */
.hero--breed { min-height: min(76vh, 720px); display: grid; align-items: end; }

.hero--breed .hero__anim {
    left: 0;                      /* niet alleen de rechterhelft */
    right: 0;
    top: 0;
    bottom: 0;
}

.hero--breed .hero__canvas,
.hero--breed .hero__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;            /* vult het vlak, ongeacht de verhouding */
}

/*
 * Twee sluiers over elkaar: een donkere hoek linksonder waar de tekst staat,
 * en een lichte verdonkering van onderaf.
 *
 * Een sluier van onderaf alleen was niet genoeg: de titel viel dan precies
 * over het toestel en dat leest rommelig. Zo houdt de tekst links zijn eigen
 * rustige vlak en blijft de drone rechts goed zichtbaar.
 */
.hero--breed .hero__scrim {
    background:
        linear-gradient(
            to right,
            rgba(11, 26, 43, .88) 0%,
            rgba(11, 26, 43, .72) 26%,
            rgba(11, 26, 43, .32) 50%,
            rgba(11, 26, 43, .06) 72%
        ),
        linear-gradient(
            to top,
            rgba(11, 26, 43, .55) 0%,
            rgba(11, 26, 43, .12) 45%,
            rgba(11, 26, 43, 0) 75%
        );
}

/*
 * De breedte beperken op de losse elementen en niet op het omhullende vak.
 * Dat vak is de gewone inhoudsbreedte, die zichzelf centreert; zou ik dáár de
 * breedte beperken, dan schuift het geheel naar het midden en staat de tekst
 * alsnog over het toestel.
 */
.hero--breed .hero__content { padding-block: clamp(40px, 7vw, 92px); }
.hero--breed .hero__content > * { max-width: 600px; }

@media (max-width: 900px) {
    /*
     * Op een smal scherm staat de tekst óp het beeld en niet ernaast. Het
     * beeld is licht van boven, dus witte tekst verdwijnt erin; daarom hier
     * een flink donkerder sluier over het geheel.
     */
    .hero--breed .hero__scrim {
        background:
            linear-gradient(
                to top,
                rgba(11, 26, 43, .92) 0%,
                rgba(11, 26, 43, .78) 40%,
                rgba(11, 26, 43, .62) 75%,
                rgba(11, 26, 43, .5) 100%
            );
    }
    .hero--breed .hero__content > * { max-width: none; }
}
.hero--breed .eyebrow      { color: #9ec4f5; }
.hero--breed .hero__title  { color: #fff; }
.hero--breed .hero__intro  { color: rgba(255, 255, 255, .88); }

/* De tweede knop moet leesbaar blijven op het donkere beeld. */
.hero--breed .btn--ghost {
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}
.hero--breed .btn--ghost:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #fff;
    color: #fff;
}

/* De partnerbadge staat bij deze kop lager, anders valt hij over de rand. */
.hero--breed .partnerbadge { top: clamp(80px, 10vh, 130px); }

@media (max-width: 700px) {
    /*
     * Op een smal scherm wordt het beeld in de gewone kop een blok bovenaan.
     * Bij deze kopstijl mag dat niet: de tekst staat er wit overheen en zou
     * dan op een witte achtergrond belanden, dus onleesbaar zijn.
     *
     * Daarom blijft het beeld hier de hele kop vullen, met de tekst eroverheen.
     */
    .hero--breed {
        min-height: min(72vh, 600px);
        display: grid;
        align-items: end;
        padding-block: 0;
    }

    .hero--breed .hero__anim {
        position: absolute;
        inset: 0;
    }

    .hero--breed .hero__canvas,
    .hero--breed .hero__poster {
        height: 100%;
        aspect-ratio: auto;
        margin-top: 0;
        object-fit: cover;
        object-position: center;
    }
}


/* ------------------------------------------- kop met de explosiereeks */
.hero--explode { background: #fff; }

/*
 * KOP 3 — het toestel op de rechterhelft.
 *
 * Het beeldvlak begint op de helft van de kop, zodat de tekst links vrij
 * blijft. "contain" houdt het hele toestel in beeld; met "cover" zou de
 * browser hem opschalen en de zijkanten wegsnijden.
 */
.hero--explode-half .hero__anim {
    left: 50%;
    right: 0;
    top: 0;
    bottom: 0;
}

.hero--explode-half .hero__canvas,
.hero--explode-half .hero__poster {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background: #fff;
}

/* Geen sluier nodig: de tekst staat naast het beeld, niet erop. */
.hero--explode-half .hero__scrim { background: none; }

/*
 * KOP 4 — het beeld over de volle breedte, tekst eroverheen.
 */
.hero--explode-vol .hero__anim {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.hero--explode-vol .hero__canvas,
.hero--explode-vol .hero__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background: #fff;
}

/* Hier staat de tekst wél op het beeld, dus een lichte sluier van links. */
.hero--explode-vol .hero__scrim {
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, .96) 0%,
        rgba(255, 255, 255, .82) 32%,
        rgba(255, 255, 255, .34) 58%,
        rgba(255, 255, 255, 0) 78%
    );
}

@media (max-width: 900px) {
    /* Op een smal scherm past niets naast elkaar; dan beide over de breedte. */
    .hero--explode-half .hero__anim { left: 0; }
    .hero--explode-half .hero__scrim,
    .hero--explode-vol .hero__scrim {
        background: linear-gradient(
            to top,
            rgba(255, 255, 255, .96) 0%,
            rgba(255, 255, 255, .86) 45%,
            rgba(255, 255, 255, .5) 100%
        );
    }
}

/*
 * Kop 3 en 4. De reeks staat op een lichte studio-achtergrond, dus hier een
 * lichte sluier van links — een donkere zou het beeld wegdrukken.
 */
.hero--explode .hero__scrim {
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, .95) 0%,
        rgba(255, 255, 255, .8) 30%,
        rgba(255, 255, 255, .32) 56%,
        rgba(255, 255, 255, 0) 76%
    );
}
.hero--explode .eyebrow     { color: var(--signal); }
.hero--explode .hero__title { color: var(--ink); }
.hero--explode .hero__intro { color: var(--ink-soft); }
.hero--explode .btn--ghost  { border-color: var(--line); color: var(--ink); }
.hero--explode .btn--ghost:hover { background: var(--mist); border-color: var(--ink); color: var(--ink); }



/* ------------------------------------------- aanpak: van vraag naar oplossing */
/*
 * De afstanden en de breedte komen van .section en .wrap, net als bij de
 * andere secties. Eerder zette ik hier een eigen max-width op de wrap; dan
 * schoof het blok naar binnen en liep de linkerrand niet meer gelijk met de
 * rest van de pagina.
 */
.aanpak { position: relative; background: #fff; border-bottom: 1px solid var(--line); }

/*
 * De accentlijn over de VOLLE breedte, dus op de sectie en niet in de wrap.
 * Met een rand op de wrap zou hij mee inspringen en bij de paginamarge
 * ophouden; hier loopt hij van rand tot rand.
 */
.aanpak--lijn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--signal);
}

/* ------------------------------------------------------ tekst naast beeld */
/* De keten staat onder het raster, dus over de volle breedte van de pagina. */
.aanpak .keten { margin-top: clamp(26px, 4vw, 40px); }

.aanpak__raster--beeld {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}

.aanpak__beeld { margin: 0; }

.aanpak__beeld img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

@media (max-width: 900px) {
    /* Onder elkaar; het beeld onder de tekst, want de tekst draagt de boodschap. */
    .aanpak__raster--beeld { grid-template-columns: 1fr; }
}

/* Leesbare regellengte, zonder het blok zelf te verschuiven. */
/* Leesbare regellengte als de tekst alleen staat. Naast een foto is de kolom
   al smal genoeg; dan zou deze grens hem onnodig verder inperken. */
.aanpak__titel,
.aanpak__lead,
.aanpak__tekst { max-width: 62ch; }

.aanpak__raster--beeld .aanpak__titel,
.aanpak__raster--beeld .aanpak__lead,
.aanpak__raster--beeld .aanpak__tekst { max-width: none; }

.aanpak__titel {
    margin: 0 0 14px;
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    line-height: 1.2;
    color: var(--ink);
}

.aanpak__lead {
    margin: 0 0 18px;
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    font-weight: 600;
    color: var(--ink);
}

.aanpak__tekst {
    color: var(--ink-soft);
    line-height: 1.7;
}
.aanpak__tekst br + br { content: ''; display: block; height: 10px; }

/* ---------------------------------------------------------------- de keten */
/*
 * Een rij stappen met een pijl ertussen. De pijl staat in de opmaak en niet in
 * de tekst: zo staat hij nooit aan het eind van een regel als de rij afbreekt,
 * en hoeft u hem niet mee te typen in het beheer.
 */
.keten {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 4px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: keten;
}

.keten__stap { display: flex; align-items: center; }

/*
 * De pijl achter de stap, niet ervoor. Breekt de rij af, dan begint de
 * volgende regel met een stap in plaats van met een losse pijl.
 */
.keten__stap:not(:last-child)::after {
    content: '→';
    margin: 0 6px 0 8px;
    color: var(--slate);
    font-size: .95rem;
}

.keten__link {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    transition: background .15s, border-color .15s, color .15s;
}

a.keten__link:hover {
    background: var(--signal);
    border-color: var(--signal);
    color: #fff;
}

/* Zonder adres is het geen knop; dan ook niet als knop laten aanvoelen. */
.keten__link--dood {
    background: var(--mist);
    color: var(--ink-soft);
    font-weight: 500;
}

@media (max-width: 620px) {
    .keten { gap: 6px 2px; }
    .keten__link { padding: 7px 11px; font-size: .86rem; }
    .keten__stap:not(:last-child)::after { margin: 0 3px 0 5px; }
}

/*
 * Vaste hoogte voor de foto in de aanpaksectie.
 *
 * Met object-fit: cover wordt hij bijgesneden in plaats van uitgerekt; anders
 * worden mensen en toestellen op de foto vervormd zodra de verhouding niet
 * precies klopt.
 */
.aanpak__beeld--vast img {
    object-fit: cover;
    object-position: center;
}

@media (max-width: 900px) {
    /* Op een smal scherm een vaste hoogte laten varen: het beeld is dan al
       smal, en bijsnijden zou er weinig van overlaten. */
    .aanpak__beeld--vast img { height: auto !important; }
}

/* ------------------------------------------------------------ partnerlogo's */
.partners__kop { margin-bottom: 20px; }

/*
 * Vier naast elkaar op een breed scherm; heeft u er meer, dan lopen ze door op
 * de volgende regel. Met auto-fit hoeft u niets in te stellen als er een
 * partner bij komt.
 */
.partners__rij {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: clamp(18px, 3vw, 40px);
    align-items: center;
}

.partners__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--slate);
    text-decoration: none;
    font-size: .82rem;
    text-align: center;
    background: #fff;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

/* Alleen een link voelt aan als een link. */
a.partners__item:hover {
    border-color: var(--signal);
    box-shadow: 0 6px 18px rgba(11, 26, 43, .08);
    transform: translateY(-2px);
}

.partners__item img {
    max-width: 100%;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
}

@media (max-width: 520px) {
    .partners__rij { grid-template-columns: repeat(2, 1fr); }
    .partners__item img { max-height: 44px; }
}

/*
 * Scheidingslijn tussen twee secties.
 *
 * Een los blokje en geen rand op een van de twee secties: zo hoort hij bij
 * geen van beide en kan hij overal worden neergezet zonder dat de opvulling
 * van die secties verandert.
 */
.scheidslijn {
    height: 2px;
    background: var(--signal);
}

/*
 * Split-blok zonder afbeelding: tekst over de hele beschikbare breedte.
 *
 * Eerder begrensde ik de regellengte hier, maar dan blijft er rechts een
 * gat staan waar niets komt — precies wat u niet wilde.
 */
.feature--breed { display: block; }
.feature--breed .feature__body { max-width: none; }

/*
 * Ruimte tussen de blokken van een pagina.
 *
 * De maat zit op de secties binnen de wikkel, niet op de wikkel zelf: alleen
 * dan verandert de afstand tussen de blokken en niet die tot de kop of de
 * voettekst.
 */
.blokken--compact > .section { padding-block: clamp(34px, 4.5vw, 56px); }
.blokken--krap    > .section { padding-block: clamp(20px, 2.8vw, 32px); }
.blokken--ruim    > .section { padding-block: clamp(72px, 10vw, 128px); }

/*
 * Het afsluitende oproepblok houdt zijn eigen lucht: dat hoort los te staan
 * van de rij erboven, anders plakt het tegen de laatste alinea aan.
 */
.blokken--compact > .section:last-child,
.blokken--krap > .section:last-child { padding-block: clamp(44px, 6vw, 72px); }

/*
 * Foto's in paginablokken: standaard hun eigen verhouding.
 *
 * Eerder werd elke foto in een kader van 3:2 geduwd en bijgesneden. Dat oogt
 * rustig bij een rij gelijke foto's, maar bij een brede of staande foto snijdt
 * het er te veel vanaf — precies waar u tegenaan liep.
 *
 * Dit geldt alleen binnen .blokken, dus voor de blokken van een pagina. De
 * uitgelichte blokken op de homepage staan daarbuiten en houden hun vaste
 * kader, zodat die rij gelijk blijft.
 */
.blokken .feature__media img {
    aspect-ratio: auto;
    height: auto;
    object-fit: fill;
}

/* Wie de oude, strak uitgelijnde rij wil, kiest het vaste kader terug. */
.blokken--kader .feature__media img {
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
}

/* --------------------------------------------- Over ons: tekst en foto */
/*
 * Tekst over de volle breedte, met de foto en het citaat eronder in plaats
 * van ernaast. Eerder lag de tweedeling vast, ook als er geen foto stond.
 */
.split--breed { display: block; }
.split--breed .overons__zij { margin-top: clamp(28px, 4vw, 48px); }

/*
 * De tekst krijgt hier de volle breedte. Normaal begrenzen wij een lap tekst
 * op 68 tekens omdat dat prettiger leest, maar u vroeg juist om de hele
 * breedte — en zonder foto ernaast staat er anders een gat rechts.
 */
.split--breed .prose { max-width: none; }

/*
 * De foto eronder niet over de hele breedte uitrekken. Een liggende foto van
 * 1150 px breed wordt anders zo hoog dat hij het halve scherm vult, terwijl
 * hij hier een illustratie is en niet het onderwerp.
 */
.split--breed .fotoblok { max-width: 720px; }

/* Naast elkaar blijft het beeld naast de tekst; alleen de kant wisselt. */
.split--flip .prose { order: 2; }
.split--flip .overons__zij { order: 1; }

/* ------------------------------------------- partners: schuifbare rij */
/*
 * Vanaf vijf partners schuift de rij opzij in plaats van door te lopen op een
 * tweede regel. Er passen er vier tegelijk in beeld; de rest haalt u met de
 * pijlen, met een veegbeweging of met de pijltjestoetsen.
 */
.partners__vak { position: relative; }

.partners__rij--schuif {
    display: grid;
    /*
     * De kolomindeling van de gewone rij uitschakelen. Die plaatst alle logo's
     * in kolommen die samen precies passen, en dan valt er niets te schuiven:
     * de browser perst ze gewoon allemaal in beeld.
     */
    grid-template-columns: none;
    grid-auto-flow: column;
    /* Precies vier in beeld, met de tussenruimte meegerekend. */
    grid-auto-columns: calc((100% - 3 * clamp(18px, 3vw, 40px)) / 4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}
.partners__rij--schuif::-webkit-scrollbar { display: none; }
.partners__rij--schuif > * { scroll-snap-align: start; }

/* De pijlen zweven over de rand, zodat zij geen ruimte van de logo's afsnoepen. */
.partners__pijl {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(11, 26, 43, .1);
    transform: translateY(-50%);
    transition: background .15s, border-color .15s, opacity .15s;
}
.partners__pijl:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
.partners__pijl[hidden] { display: none; }
.partners__pijl--terug  { left: -20px; }
.partners__pijl--verder { right: -20px; }

@media (max-width: 900px) {
    /* Op een smal scherm passen er twee; daar veegt men liever dan te klikken. */
    .partners__rij--schuif {
        grid-auto-columns: calc((100% - clamp(18px, 3vw, 40px)) / 2);
    }
    .partners__pijl { display: none; }
}