/*
Theme Name:   Blik&Bocht
Theme URI:    https://blikenbocht.nl
Author:       Blik&Bocht
Author URI:   https://blikenbocht.nl
Description:  Maatwerkthema voor Blik&Bocht — fotografie & videografie. Video-landingspagina, portfolio met filters (video/foto) en een contactpagina met formulier en social media. Alle bedrijfsgegevens, hero-video en portfolio-items zijn te beheren vanuit het WordPress-dashboard. Geen plugins vereist.
Version:      1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  blikenbocht

Palet: donkergrijs / wit / rood.
*/

/* =========================================================
   Blik&Bocht — fotografie & videografie
   ========================================================= */

:root {
    --grijs-900: #0e0f11;
    --grijs-800: #16181b;
    --grijs-700: #1d2024;
    --grijs-600: #26292e;
    --grijs-500: #3a3e44;
    --grijs-400: #6b7178;
    --grijs-300: #9aa1a9;

    --wit:       #f4f5f6;
    --wit-zacht: #c9ced4;

    --rood:      #e01b24;
    --rood-fel:  #ff2d37;
    --rood-diep: #9e1219;

    --wrap:      1240px;
    --header-h:  84px;

    --soepel:    cubic-bezier(.22, .61, .36, 1);
    --scherp:    cubic-bezier(.65, 0, .35, 1);

    --font-kop:  'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-tekst:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    color-scheme: dark;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h);
}

body {
    margin: 0;
    background: var(--grijs-900);
    color: var(--wit);
    font-family: var(--font-tekst);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img,
video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--font-kop);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin: 0 0 .5em;
    text-wrap: balance;
}

h1 { font-size: clamp(2.8rem, 7vw, 5.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

p { margin: 0 0 1.2em; }

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: 24px;
}

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--rood);
    color: #fff;
    padding: 12px 20px;
}
.skip-link:focus { left: 0; }

:focus-visible {
    outline: 2px solid var(--rood-fel);
    outline-offset: 3px;
}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    background: rgba(14, 15, 17, 0);
    backdrop-filter: blur(0px);
    transition: background .45s var(--soepel),
                backdrop-filter .45s var(--soepel),
                box-shadow .45s var(--soepel);
}

.site-header.is-vast {
    background: rgba(14, 15, 17, .88);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06),
                0 18px 40px -28px rgba(0, 0, 0, .9);
}

.header-inner {
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    transition: height .45s var(--soepel);
}

.site-header.is-vast .header-inner { height: 66px; }

.header-lijn {
    display: block;
    height: 2px;
    width: var(--voortgang, 0%);
    background: linear-gradient(90deg, var(--rood-diep), var(--rood-fel));
    transition: width .1s linear;
}

.logo {
    font-family: var(--font-kop);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.logo img { max-height: 40px; width: auto; }

.logo-amp {
    color: var(--rood);
    display: inline-block;
    transition: transform .5s var(--soepel);
}

.logo:hover .logo-amp { transform: rotate(-12deg) scale(1.15); }

.hoofdnav ul {
    display: flex;
    align-items: center;
    gap: 34px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hoofdnav .menu-item > a,
.nav-link {
    position: relative;
    display: inline-block;
    font-family: var(--font-kop);
    font-size: 1.05rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--wit-zacht);
    padding: 6px 0;
    transition: color .3s var(--soepel);
}

.hoofdnav .menu-item > a::after,
.nav-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    height: 2px; width: 100%;
    background: var(--rood);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .4s var(--soepel);
}

.hoofdnav .menu-item > a:hover,
.nav-link:hover { color: var(--wit); }

.hoofdnav .menu-item > a:hover::after,
.hoofdnav .current-menu-item > a::after,
.nav-link:hover::after,
.nav-link.is-actief::after {
    transform: scaleX(1);
    transform-origin: left;
}

.hoofdnav .current-menu-item > a,
.nav-link.is-actief { color: var(--wit); }

.hoofdnav .cta-item > a {
    padding: 10px 20px;
    border: 1px solid var(--grijs-500);
    background: var(--rood);
    border-color: var(--rood);
    color: #fff;
    font-size: .9rem;
    letter-spacing: .1em;
}
.hoofdnav .cta-item > a::after { display: none; }

.nav-toggle {
    display: none;
    position: relative;
    width: 44px; height: 44px;
    background: none;
    border: 1px solid var(--grijs-500);
    cursor: pointer;
    padding: 0;
}

.nav-toggle-balk,
.nav-toggle-balk::before,
.nav-toggle-balk::after {
    position: absolute;
    left: 50%;
    width: 20px; height: 2px;
    background: var(--wit);
    transform: translateX(-50%);
    transition: transform .35s var(--scherp), opacity .2s linear;
}

.nav-toggle-balk { top: 50%; margin-top: -1px; }
.nav-toggle-balk::before { content: ''; left: 0; transform: translateY(-6px); }
.nav-toggle-balk::after  { content: ''; left: 0; transform: translateY(6px); }

.nav-toggle[aria-expanded="true"] .nav-toggle-balk { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-balk::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-balk::after  { transform: rotate(-45deg); }

/* ---------------------------------------------------------
   Knoppen
   --------------------------------------------------------- */

.knop {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    padding: 15px 34px;
    font-family: var(--font-kop);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    border: 1px solid var(--grijs-500);
    color: var(--wit);
    background: transparent;
    cursor: pointer;
    transition: color .35s var(--soepel), border-color .35s var(--soepel);
}

.knop::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--rood);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .4s var(--scherp);
}

.knop > * { position: relative; z-index: 1; }

.knop:hover {
    border-color: var(--rood);
    color: #fff;
}

.knop:hover::before {
    transform: scaleY(1);
    transform-origin: top;
}

.knop-rood {
    background: var(--rood);
    border-color: var(--rood);
    color: #fff;
}

.knop-rood::before { background: var(--wit); }
.knop-rood:hover { color: var(--grijs-900); }

.knop-klein {
    padding: 10px 20px;
    font-size: .9rem;
    letter-spacing: .1em;
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.hero {
    position: relative;
    min-height: 92svh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

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

.hero-poster {
    background:
        radial-gradient(1200px 600px at 20% 15%, rgba(224, 27, 36, .28), transparent 60%),
        radial-gradient(900px 700px at 85% 80%, rgba(58, 62, 68, .8), transparent 65%),
        linear-gradient(160deg, var(--grijs-700), var(--grijs-900) 70%);
    background-size: cover;
    background-position: center;
    animation: hero-drift 24s var(--soepel) infinite alternate;
}

@keyframes hero-drift {
    from { transform: scale(1.06) translate3d(0, 0, 0); }
    to   { transform: scale(1.14) translate3d(-2%, -1.5%, 0); }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(to right, rgba(14, 15, 17, .92) 0%, rgba(14, 15, 17, .6) 45%, rgba(14, 15, 17, .25) 100%),
        linear-gradient(to top, rgba(14, 15, 17, .95) 0%, transparent 45%);
}

.hero-grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: .5;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, .02) 0 1px,
        transparent 1px 3px
    );
}

.hero-inner {
    position: relative;
    z-index: 3;
    padding-block: calc(var(--header-h) + 60px) 120px;
    max-width: 880px;
}

.hero-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-kop);
    font-size: 1rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--wit-zacht);
    margin-bottom: 26px;
}

.hero-label::before {
    content: '';
    width: 52px; height: 2px;
    background: var(--rood);
    transform-origin: left;
    animation: lijn-in 1s var(--scherp) .2s both;
}

@keyframes lijn-in {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.hero h1 { margin-bottom: .3em; }

.regel {
    display: block;
    overflow: hidden;
}

.regel > span {
    display: block;
    transform: translateY(105%);
    animation: regel-op 1s var(--soepel) forwards;
}

.regel:nth-child(1) > span { animation-delay: .25s; }
.regel:nth-child(2) > span { animation-delay: .4s; }
.regel:nth-child(3) > span { animation-delay: .55s; }

@keyframes regel-op {
    to { transform: translateY(0); }
}

.hero .accent { color: var(--rood); }

.hero-moto {
    max-width: 520px;
    font-size: 1.1rem;
    color: var(--wit-zacht);
    animation: fade-op 1s var(--soepel) .8s both;
}

.hero-acties {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 34px;
    animation: fade-op 1s var(--soepel) 1s both;
}

@keyframes fade-op {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero-scroll {
    position: absolute;
    left: 50%; bottom: 32px;
    z-index: 3;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-family: var(--font-kop);
    font-size: .8rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--grijs-300);
    animation: fade-op 1s var(--soepel) 1.3s both;
}

.hero-scroll span.streep {
    width: 1px; height: 54px;
    background: linear-gradient(to bottom, var(--rood), transparent);
    animation: streep-puls 2.2s var(--soepel) infinite;
}

@keyframes streep-puls {
    0%, 100% { transform: scaleY(.4); opacity: .4; transform-origin: top; }
    50%      { transform: scaleY(1);  opacity: 1;  transform-origin: top; }
}

.video-knop {
    position: absolute;
    right: 24px; bottom: 32px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: rgba(14, 15, 17, .6);
    border: 1px solid var(--grijs-500);
    color: var(--wit-zacht);
    font-family: var(--font-kop);
    font-size: .85rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: border-color .3s var(--soepel), color .3s var(--soepel);
}

.video-knop:hover { border-color: var(--rood); color: var(--wit); }

/* ---------------------------------------------------------
   Secties
   --------------------------------------------------------- */

.sectie { padding-block: clamp(80px, 11vw, 140px); }
.sectie-grijs { background: var(--grijs-800); }
.sectie-diep  { background: var(--grijs-900); }

.sectie-kop {
    max-width: 720px;
    margin-bottom: 64px;
}

.sectie-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-kop);
    font-size: .9rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--rood);
    margin-bottom: 18px;
}

.sectie-label::before {
    content: '';
    width: 34px; height: 2px;
    background: var(--rood);
}

.sectie-kop p {
    color: var(--wit-zacht);
    font-size: 1.05rem;
    margin-bottom: 0;
}

.sectie-kop-rij {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    max-width: none;
}

/* ---------------------------------------------------------
   Diensten
   --------------------------------------------------------- */

.dienst-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1px;
    background: var(--grijs-600);
    border: 1px solid var(--grijs-600);
}

.dienst {
    position: relative;
    background: var(--grijs-800);
    padding: 44px 36px 52px;
    overflow: hidden;
    transition: background .45s var(--soepel);
}

.dienst::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 3px;
    background: var(--rood);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s var(--scherp);
}

.dienst:hover { background: var(--grijs-700); }
.dienst:hover::after { transform: scaleX(1); }

.dienst-nummer {
    font-family: var(--font-kop);
    font-size: 3rem;
    line-height: 1;
    color: var(--grijs-500);
    margin-bottom: 20px;
    transition: color .45s var(--soepel);
}

.dienst:hover .dienst-nummer { color: var(--rood); }

.dienst p {
    color: var(--wit-zacht);
    font-size: .98rem;
    margin-bottom: 0;
}

/* ---------------------------------------------------------
   Cijfers
   --------------------------------------------------------- */

.cijfer-rij {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 40px;
    border-top: 1px solid var(--grijs-600);
    padding-top: 48px;
}

.cijfer strong {
    display: block;
    font-family: var(--font-kop);
    font-size: clamp(2.6rem, 5vw, 4rem);
    line-height: 1;
    color: var(--wit);
    font-variant-numeric: tabular-nums;
}

.cijfer strong::after {
    content: attr(data-suffix);
    color: var(--rood);
}

.cijfer span {
    font-size: .9rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--grijs-300);
}

/* ---------------------------------------------------------
   Portfolio
   --------------------------------------------------------- */

.pagina-kop {
    padding-block: calc(var(--header-h) + 80px) 70px;
    background:
        radial-gradient(900px 420px at 15% 0%, rgba(224, 27, 36, .16), transparent 65%),
        var(--grijs-900);
    border-bottom: 1px solid var(--grijs-600);
}

.pagina-kop h1 { max-width: 16ch; }

.pagina-kop p {
    max-width: 560px;
    color: var(--wit-zacht);
    font-size: 1.1rem;
    margin-bottom: 0;
}

.vak {
    border-bottom: 1px solid var(--grijs-600);
    padding-block: clamp(70px, 9vw, 120px);
}

.vak-video { background: var(--grijs-800); }
.vak-foto  { background: var(--grijs-900); }

.vak-titel {
    display: flex;
    align-items: baseline;
    gap: 18px;
    flex-wrap: wrap;
}

.vak-titel .telling {
    font-family: var(--font-kop);
    font-size: 1rem;
    letter-spacing: .2em;
    color: var(--grijs-400);
}

.vak-leeg {
    color: var(--grijs-400);
    font-style: italic;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 28px;
}

.video-kaart {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--grijs-700);
    border: 1px solid var(--grijs-600);
    padding: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

.video-kaart .beeld {
    position: absolute;
    inset: 0;
    transition: transform .8s var(--soepel), filter .6s var(--soepel);
    filter: grayscale(.55) contrast(1.05);
    background-size: cover;
    background-position: center;
}

.video-kaart:hover .beeld,
.video-kaart:focus-visible .beeld {
    transform: scale(1.07);
    filter: grayscale(0) contrast(1.05);
}

.video-kaart .beeld::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(14, 15, 17, .92), rgba(14, 15, 17, .05) 70%);
}

.video-kaart .speel {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(.85);
    width: 68px; height: 68px;
    display: grid;
    place-items: center;
    border: 2px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    opacity: 0;
    transition: opacity .4s var(--soepel), transform .4s var(--soepel), background .4s var(--soepel);
}

.video-kaart .speel::before {
    content: '';
    width: 0; height: 0;
    margin-left: 5px;
    border-left: 16px solid #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

.video-kaart:hover .speel,
.video-kaart:focus-visible .speel {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    background: var(--rood);
    border-color: var(--rood);
}

.kaart-info {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 24px 26px;
}

.kaart-info .tag {
    display: inline-block;
    font-family: var(--font-kop);
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--rood);
    margin-bottom: 8px;
}

.kaart-info h3 { margin-bottom: 4px; }

.kaart-info .meta {
    font-size: .85rem;
    color: var(--grijs-300);
    margin: 0;
}

.foto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-auto-rows: 220px;
    gap: 18px;
}

.foto {
    position: relative;
    overflow: hidden;
    background: var(--grijs-700);
    border: 1px solid var(--grijs-600);
    margin: 0;
}

.foto.breed { grid-column: span 2; }
.foto.hoog  { grid-row: span 2; }

.foto .beeld {
    position: absolute;
    inset: 0;
    filter: grayscale(.6);
    transition: transform .9s var(--soepel), filter .6s var(--soepel);
    background-size: cover;
    background-position: center;
}

.foto:hover .beeld {
    transform: scale(1.08);
    filter: grayscale(0);
}

.foto-bijschrift {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 20px;
    margin: 0;
    background: linear-gradient(to top, rgba(14, 15, 17, .9), transparent);
    transform: translateY(100%);
    opacity: 0;
    transition: transform .45s var(--soepel), opacity .45s var(--soepel);
}

.foto:hover .foto-bijschrift,
.foto:focus-within .foto-bijschrift {
    transform: translateY(0);
    opacity: 1;
}

.foto-bijschrift strong {
    display: block;
    font-family: var(--font-kop);
    font-size: 1.15rem;
    text-transform: uppercase;
}

.foto-bijschrift span {
    font-size: .82rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rood);
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 36px;
}

.filter {
    padding: 9px 20px;
    background: transparent;
    border: 1px solid var(--grijs-500);
    color: var(--wit-zacht);
    font-family: var(--font-kop);
    font-size: .9rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .3s var(--soepel);
}

.filter:hover { border-color: var(--rood); color: var(--wit); }

.filter.is-actief {
    background: var(--rood);
    border-color: var(--rood);
    color: #fff;
}

.item-verborgen {
    display: none;
}

.vuller-1 { background: linear-gradient(135deg, #2a2d33, #16181b 60%), radial-gradient(circle at 30% 30%, rgba(224,27,36,.35), transparent 60%); }
.vuller-2 { background: linear-gradient(200deg, #33363d, #101214 70%); }
.vuller-3 { background: linear-gradient(45deg, #1b1e22, #3a3e44); }
.vuller-4 { background: linear-gradient(160deg, #3d2023, #16181b 65%); }
.vuller-5 { background: linear-gradient(120deg, #202429, #0e0f11); }
.vuller-6 { background: linear-gradient(300deg, #2f333a, #191c1f); }

/* ---------------------------------------------------------
   Video-lightbox
   --------------------------------------------------------- */

.bnb-lightbox {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(14, 15, 17, .92);
    backdrop-filter: blur(6px);
}

.bnb-lightbox.is-open { display: flex; }

.bnb-lightbox-venster {
    position: relative;
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 16 / 9;
    background: #000;
    border: 1px solid var(--grijs-600);
}

.bnb-lightbox-venster iframe,
.bnb-lightbox-venster video {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: 0;
}

.bnb-lightbox-sluit {
    position: absolute;
    top: -46px; right: 0;
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid var(--grijs-500);
    color: var(--wit);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: border-color .3s var(--soepel), color .3s var(--soepel);
}

.bnb-lightbox-sluit:hover { border-color: var(--rood); color: var(--rood-fel); }

/* ---------------------------------------------------------
   Contact
   --------------------------------------------------------- */

.contact-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    align-items: start;
}

.contact-kanaal {
    display: flex;
    gap: 22px;
    padding: 28px 0;
    border-bottom: 1px solid var(--grijs-600);
    transition: padding-left .4s var(--soepel);
}

.contact-kanaal:hover { padding-left: 12px; }

.contact-kanaal .icoon {
    flex: 0 0 48px;
    width: 48px; height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid var(--grijs-500);
    font-family: var(--font-kop);
    font-size: 1.1rem;
    color: var(--rood);
    transition: background .4s var(--soepel), border-color .4s var(--soepel), color .4s var(--soepel);
}

.contact-kanaal:hover .icoon {
    background: var(--rood);
    border-color: var(--rood);
    color: #fff;
}

.contact-kanaal h3 { margin-bottom: 2px; }

.contact-kanaal p {
    margin: 0;
    color: var(--wit-zacht);
}

.contact-kanaal .sub {
    font-size: .85rem;
    color: var(--grijs-400);
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--grijs-600);
    border: 1px solid var(--grijs-600);
}

.social {
    position: relative;
    display: block;
    background: var(--grijs-800);
    padding: 30px 26px;
    overflow: hidden;
    transition: background .4s var(--soepel);
}

.social::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--rood);
    transform: translateY(101%);
    transition: transform .45s var(--scherp);
}

.social:hover::before { transform: translateY(0); }
.social > * { position: relative; z-index: 1; }

.social strong {
    display: block;
    font-family: var(--font-kop);
    font-size: 1.3rem;
    text-transform: uppercase;
}

.social span {
    font-size: .88rem;
    color: var(--grijs-300);
    transition: color .4s var(--soepel);
}

.social:hover span { color: rgba(255, 255, 255, .85); }

.social .pijl {
    position: absolute;
    top: 26px; right: 26px;
    font-size: 1.1rem;
    color: var(--grijs-400);
    transition: transform .4s var(--soepel), color .4s var(--soepel);
}

.social:hover .pijl {
    transform: translate(4px, -4px);
    color: #fff;
}

.formulier {
    background: var(--grijs-800);
    border: 1px solid var(--grijs-600);
    padding: clamp(28px, 4vw, 44px);
}

.veld { margin-bottom: 22px; }

.veld label {
    display: block;
    font-family: var(--font-kop);
    font-size: .9rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--wit-zacht);
    margin-bottom: 8px;
}

.veld input,
.veld select,
.veld textarea {
    width: 100%;
    padding: 14px 16px;
    background: var(--grijs-900);
    border: 1px solid var(--grijs-500);
    color: var(--wit);
    font-family: var(--font-tekst);
    font-size: 1rem;
    transition: border-color .3s var(--soepel), background .3s var(--soepel);
}

.veld textarea { resize: vertical; min-height: 140px; }

.veld input:focus,
.veld select:focus,
.veld textarea:focus {
    outline: none;
    border-color: var(--rood);
    background: var(--grijs-700);
}

.veld-rij {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.melding {
    padding: 16px 20px;
    margin-bottom: 26px;
    border-left: 3px solid var(--rood);
    background: var(--grijs-700);
    font-size: .95rem;
}

.melding-goed { border-left-color: #2fb765; }

.melding ul { margin: 8px 0 0; padding-left: 18px; }

.honing { position: absolute; left: -9999px; }

/* ---------------------------------------------------------
   CTA-band
   --------------------------------------------------------- */

.cta {
    position: relative;
    background: var(--rood);
    padding-block: clamp(60px, 8vw, 96px);
    overflow: hidden;
}

.cta::before {
    content: '';
    position: absolute;
    inset: -40% -10%;
    background: radial-gradient(circle at 70% 50%, rgba(255, 255, 255, .12), transparent 55%);
    animation: cta-zwenk 14s linear infinite;
}

@keyframes cta-zwenk {
    to { transform: rotate(360deg); }
}

.cta-inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.cta h2 { color: #fff; margin: 0; max-width: 16ch; }

.cta p { color: rgba(255, 255, 255, .85); margin: 8px 0 0; }

.cta .knop {
    background: var(--grijs-900);
    border-color: var(--grijs-900);
    color: #fff;
}

.cta .knop::before { background: #fff; }
.cta .knop:hover { color: var(--grijs-900); border-color: #fff; }

/* ---------------------------------------------------------
   Standaardpagina (page.php)
   --------------------------------------------------------- */

.pagina-inhoud {
    padding-block: calc(var(--header-h) + 80px) 100px;
}

.pagina-inhoud .wrap { max-width: 780px; }

.pagina-inhoud article > *:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.site-footer {
    background: var(--grijs-800);
    border-top: 1px solid var(--grijs-600);
    padding-top: 70px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 40px;
    padding-bottom: 54px;
}

.logo-footer { font-size: 1.6rem; display: inline-block; }

.footer-moto {
    margin-top: 14px;
    max-width: 30ch;
    color: var(--grijs-300);
    font-style: italic;
}

.footer-kolom h3 {
    font-size: .95rem;
    letter-spacing: .2em;
    color: var(--grijs-400);
    margin-bottom: 18px;
}

.footer-kolom ul {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    gap: 10px;
}

.footer-kolom a {
    color: var(--wit-zacht);
    transition: color .3s var(--soepel), padding-left .3s var(--soepel);
}

.footer-kolom a:hover {
    color: var(--rood);
    padding-left: 5px;
}

.footer-onder {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding-block: 22px;
    border-top: 1px solid var(--grijs-600);
    font-size: .85rem;
    color: var(--grijs-400);
}

.footer-onder p { margin: 0; }

/* ---------------------------------------------------------
   Scroll-animaties
   --------------------------------------------------------- */

.onthul {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity .9s var(--soepel), transform .9s var(--soepel);
}

.onthul.is-zichtbaar {
    opacity: 1;
    transform: none;
}

.onthul[data-vertraag="1"] { transition-delay: .1s; }
.onthul[data-vertraag="2"] { transition-delay: .2s; }
.onthul[data-vertraag="3"] { transition-delay: .3s; }
.onthul[data-vertraag="4"] { transition-delay: .4s; }
.onthul[data-vertraag="5"] { transition-delay: .5s; }

/* ---------------------------------------------------------
   Responsief
   --------------------------------------------------------- */

@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; gap: 50px; }
    .footer-grid  { grid-template-columns: 1fr 1fr; }
    .foto.breed   { grid-column: span 1; }
}

@media (max-width: 760px) {
    .nav-toggle { display: block; }

    .hoofdnav {
        position: fixed;
        inset: var(--header-h) 0 auto 0;
        background: rgba(14, 15, 17, .97);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--grijs-600);
        clip-path: inset(0 0 100% 0);
        transition: clip-path .5s var(--scherp);
        max-height: calc(100svh - var(--header-h));
        overflow-y: auto;
    }

    .hoofdnav.is-open { clip-path: inset(0 0 0 0); }

    .hoofdnav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 12px 24px 28px;
    }

    .hoofdnav li {
        width: 100%;
        border-bottom: 1px solid var(--grijs-600);
    }

    .hoofdnav li:last-child { border-bottom: none; padding-top: 18px; }

    .hoofdnav .menu-item > a,
    .nav-link {
        display: block;
        padding: 16px 0;
        font-size: 1.3rem;
        width: 100%;
    }

    .video-knop { right: 16px; bottom: 96px; }
    .foto-grid  { grid-auto-rows: 200px; }
    .foto.hoog  { grid-row: span 1; }
}

@media (max-width: 560px) {
    .veld-rij    { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .hero-acties .knop { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .onthul { opacity: 1; transform: none; }
    .regel > span { transform: none; }
}