/* ============================================================
   ROOT — kleur tokens & CSS-variabelen
   Light mode is de standaard.
   Dark mode wordt toegepast via body:has(#toggleDark:checked)
   ============================================================ */

:root {
    /* Merk-kleuren */
    --Primary:   #c51d4a;
    --Secondary: #0a92d2;
    --Tertiary:  #F7DF00;
    --Quaternary: #1C1C1CE1;
    --Quinary:   #32316A;
    --Senary:    #519DA0;

    /* Light mode UI tokens */
    --color-bg:         #ffffff;
    --color-text:       #1a1a1a;
    --color-text-muted: #555555;
    --color-bar-bg:     rgba(255, 255, 255, 0.52);
    --color-bar-top:    rgba(255, 255, 255, 0.28);
    --color-border:     rgba(0, 0, 0, 0.08);

    /* Typografie */
    --font-fallback: BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
                     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
                     "Helvetica Neue", sans-serif;
    --font-display:  'Playfair Display', Georgia, serif;

    /* Navigatie achtergrond — pas hier aan voor een andere kleur */
    --color-nav-bg:  hsl(336 85% 26%);

    /* Animatie snelheid nav */
    --speed: 1;

    /* Sectie-achtergronden — light mode = volledige merk-kleur */
    --section-yellow:  var(--Tertiary);
    --section-magenta: var(--Primary);
    --section-cyan:    var(--Secondary);

    /* Tekst op gekleurde secties */
    --on-yellow:  #111;
    --on-magenta: #fff;
    --on-cyan:    #fff;
}

/* Dark mode: sectie-achtergronden dempen, geel herkenbaar houden */
body:has(#toggleDark:checked) {
    --section-yellow:  color-mix(in srgb, var(--Tertiary) 75%, #111);
    --section-magenta: color-mix(in srgb, var(--Primary)  70%, #000);
    --section-cyan:    color-mix(in srgb, var(--Secondary) 65%, #000);
}

html {
    scroll-behavior: smooth;
    color-scheme: light dark;
}

/* Curtain-effect: header + main scrollen over de vaste footer heen */
body > header,
body > main {
    position: relative;
    z-index: 1;
}

/* Voorkomt dat de fixed footer zichtbaar is terwijl afbeeldingen laden */
body > main {
    min-height: 100vh;
    background: var(--color-bg, #fff);
}

/* CSS-fallback voor footer-hoogte (JS overschrijft met exacte waarde) */
body {
    padding-bottom: 320px;
}

.skip-link {
    display: none;
}

@font-face {
    font-family: 'roboto';
    src: url('../fonts/roboto/Roboto-Regular-webfont.woff') format('woff'),
        url('../fonts/roboto/Roboto-Regular-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-display/PlayfairDisplay-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-display/PlayfairDisplay-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-display/PlayfairDisplay-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-display/PlayfairDisplay-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-display/PlayfairDisplay-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/playfair-display/PlayfairDisplay-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}


/* ============================================================
   BODY — basis stijlen
   ============================================================ */

body {
    margin: 0;
    padding: 0;
    font-size: 1.05rem;
    line-height: 1.55;
    font-family: "roboto", var(--font-fallback);
    -webkit-text-size-adjust: 100%;
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
    overflow-x: clip;
    background: var(--color-bg);
    color: var(--color-text);
    transition: background 0.35s ease, color 0.25s ease;
}

/* ============================================================
   KEYFRAMES — alle animaties centraal
   @supports wrappers zijn verwijderd: keyframes werken altijd,
   de animatie-properties zelf bepalen of ze actief zijn.
   ============================================================ */

@keyframes parallax-scrolling {
    from {
        transform: scale(1.3);
        transform-origin: center 40%;
    }
    to {
        transform: scale(1);
        transform-origin: bottom;
    }
}

@keyframes background-parallax {
    from { transform: translateY(0); }
    to   { transform: translateY(55vh); }
}

@keyframes text-parallax {
    from { transform: translateY(0); }
    to   { transform: translateY(37.5svh); }
}

@keyframes text-fade {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes background-darken {
    from { background: rgba(0, 0, 0, 0); }
    to   { background: rgba(0, 0, 0, 1); }
}

@keyframes fadeSlide {
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

@keyframes heroRevealCircle {
    to {
        clip-path: circle(150% at 50% 50%);
        opacity: 1;
    }
}

@keyframes portfolioRevealSwipe {
    to { clip-path: inset(0 0 0 0); }
}

@keyframes heroRevealZoom {
    from { scale: 1.5; }
    to   { scale: 1; }
}

@keyframes heroRevealZoomMobile {
    0%   { scale: 2.2; }
    48%  { scale: 0.93; }
    63%  { scale: 1.05; }
    76%  { scale: 0.98; }
    88%  { scale: 1.01; }
    100% { scale: 1.0; }
}

@keyframes cardReveal {
    from {
        opacity: 0;
        translate: 0 28px;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}


@keyframes grootStretch {
0%   { transform: scaleY(1); }
    10%  { transform: scaleY(1.7); }

    /* 10% tot 25%: EVEN VASTHOUDEN (Korte spanning) */
    25%  { transform: scaleY(1.7); }

    /* 25% tot 35%: DE SNAP (Heel fel loslaten + bounce) */
    28%  { transform: scaleY(0.7); }  /* De klap omlaag */
    32%  { transform: scaleY(1.1); }  /* Korte bounce omhoog */
    35%  { transform: scaleY(1); }    /* Direct weer stil */

    /* 35% tot 100%: PAUZE (Niet te lang, niet te kort) */
    100% { transform: scaleY(1); }
}

@keyframes gradientMove {
    0%   { background-position: 0% center; }
    50%  { background-position: 100% center; }
    100% { background-position: 0% center; }
}

@keyframes btnShimmer {
    0%   { transform: translateX(-200%) skewX(-15deg); }
    100% { transform: translateX(400%) skewX(-15deg); }
}

@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

@keyframes hfxGlow {
    0%, 100% { opacity: 0.35; transform: translateY(-50%) scale(1); }
    50%       { opacity: 1;    transform: translateY(-50%) scale(1.12); }
}

@keyframes hfxFloat {
    0%   { opacity: 0.40; transform: translateY(0)      translateX(0)                          scale(0.75); }
    22%  { opacity: 0.85; transform: translateY(-18svh) translateX(calc(var(--hdx,5px)*0.28)) scale(1.35); }
    68%  { opacity: 0.55; transform: translateY(-54svh) translateX(calc(var(--hdx,5px)*0.72)) scale(0.95); }
    100% { opacity: 0.38; transform: translateY(-84svh) translateX(var(--hdx,5px))            scale(0.70); }
}

@keyframes hfxColor {
    0%   { background: #7de8ff; } /* pastel cyaan  */
    28%  { background: #ff7db4; } /* pastel magenta */
    55%  { background: #ffe54d; } /* pastel geel   */
    78%  { background: #ffffff; } /* wit           */
    100% { background: #7de8ff; } /* terug cyaan   */
}

@keyframes hfxGlowPulse {
    0%, 100% { box-shadow: 0 0 0px 0px rgba(255,255,255,0); }
    50%      { box-shadow: 0 0 6px 2px rgba(255,255,255,0.32); }
}

@keyframes hfxShimmer {
    0%        { background-position: 250% 0; opacity: 0; }
    8%        { opacity: 1; }
    45%       { background-position: -150% 0; opacity: 1; }
    55%, 100% { opacity: 0; background-position: -150% 0; }
}

@keyframes scrollBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%       { transform: translateX(-50%) translateY(8px); }
}

@keyframes cubeFlip {
    from { transform: rotateX(0deg); }
    to   { transform: rotateX(90deg); }
}

@keyframes ctaReveal {
    from {
        opacity: 0;
        transform: translateY(56px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes servicesReveal {
    from {
        opacity: 0;
        transform: translateY(72px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes eyebrowReveal {
    from {
        opacity: 0;
        transform: translateY(72px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rippleWave {
    0%   { width:  0px;   height:  0px;   border-width: 5px; opacity: 1.2; }
    100% { width:  120px; height:  120px; border-width: 0px; opacity: 0;   }
}

@keyframes iconFloat {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(-7px); }
    100% { transform: translateY(0); }
}

@keyframes statLand {
    0%   { transform: scale(1.22); }
    45%  { transform: scale(0.91); }
    72%  { transform: scale(1.06); }
    88%  { transform: scale(0.98); }
    100% { transform: scale(1); }
}

@keyframes cubeShadowPulse {
    0%   { --cube-shadow: 0; }
    50%  { --cube-shadow: 1; }
    100% { --cube-shadow: 0; }
}

@keyframes barbgChange {
    0% {
        background: var(--color-bar-top);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }
    100% {
        background: var(--color-bar-bg);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 1px 0 var(--color-border);
    }
}

@keyframes numBounce {
    0%   { transform: translateX(0);    }
    28%  { transform: translateX(16px); }
    50%  { transform: translateX(1px);  }
    68%  { transform: translateX(10px); }
    82%  { transform: translateX(5px);  }
    92%  { transform: translateX(7px);  }
    100% { transform: translateX(6px);  }
}

/* ============================================================
   REDUCED MOTION — respecteer systeemvoorkeur
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

    *, *::before, *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        animation-delay:           0.01ms !important;
        transition-duration:       0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }

    /* Scroll-driven animaties (timeline-based) apart uitzetten */
    .home header .hero::before,
    .home header .hero::after,
    .home header .hero .hero-text,
    .home header .hero .hero-badge-wrap,
    .home header .portfolio img {
        animation: none !important;
    }
}

/* ── Terugkeer-toast ── */
#return-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    z-index: 99990;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #111;
    color: #fff;
    padding: 12px 16px;
    border-radius: 40px;
    font-size: 0.875rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.28);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
    pointer-events: none;
}

#return-toast.return-toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

#return-toast-yes {
    background: var(--Tertiary);
    color: #111;
    border: none;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

#return-toast-no {
    background: none;
    border: none;
    color: rgba(255,255,255,0.55);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}


/* Water-rimpel — verschijnt via ripple.js, fixed zodat het nooit geclipped wordt */
.ripple-wave {
    position: fixed;
    width: 0px;
    height: 0px;
    border-radius: 50%;
    border: 5px solid;
    background-color: white;
    opacity: 0.5;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    animation: rippleWave 1.2s ease-out forwards;
}

/* ── Tekstselectie in merkkeur ── */
::selection {
    background: var(--Primary);
    color: #fff;
}

/* ── :target — shake bij binnenkomst via directe link ── */
@keyframes targetShake {
    0%   { transform: translateX(0)     scale(1);     }
    8%   { transform: translateX(0)     scale(1.05);  }
    16%  { transform: translateX(-16px) scale(1.045); }
    26%  { transform: translateX( 16px) scale(1.038); }
    36%  { transform: translateX(-13px) scale(1.028); }
    46%  { transform: translateX( 13px) scale(1.020); }
    56%  { transform: translateX( -9px) scale(1.012); }
    66%  { transform: translateX(  9px) scale(1.007); }
    76%  { transform: translateX( -5px) scale(1.003); }
    86%  { transform: translateX(  5px) scale(1);     }
    94%  { transform: translateX( -2px) scale(1);     }
    100% { transform: translateX(0)     scale(1);     }
}

section[id]:target,
header[id]:target {
    animation: targetShake 1.1s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1s both;
}

/* Compenseer vaste topbar zodat scroll-to-anchor niet achter de bar belandt */
section[id],
header[id] {
    scroll-margin-top: 72px;
}

/* ── Design kit: eyebrow / sectielabel ── */
.eyebrow {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--Primary);
    margin: 0 0 16px 0;
}

.eyebrow--light {
    color: rgba(255, 255, 255, 0.65);
}

/* ── Design kit: abbr stijl ── */
abbr[title] {
    text-decoration: underline dotted var(--Primary);
    text-underline-offset: 3px;
    cursor: help;
    border-radius: 3px;
    transition: background-color 0.18s ease, text-decoration-color 0.18s ease;
}

abbr[title]:hover {
    background-color: color-mix(in srgb, var(--Tertiary) 38%, transparent);
    text-decoration-color: transparent;
}

.wrapper {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 50px 15px;
    box-sizing: border-box;
}

/* Voorkomt dat de vaste navbar de bovenkant van de sectie afdekt bij anchor-links */
main#main {
    scroll-margin-top: 64px;
}
@media (min-width: 769px) {
    .wrapper {
        padding: 0 20px; /* secties bepalen zelf hun verticale ruimte op desktop */
    }
}


/* Verborgen tekst, maar zichtbaar voor screenreaders */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.hide{
    display: none;
}


/* ── Design kit: knoppensysteem ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    border: 1.5px solid transparent;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    line-height: 1;
}

.btn--primary {
    background: #fff;
    color: var(--Primary, #c51d4a);
    border-color: #fff;
}

.btn--primary::after {
    content: '';
    position: absolute;
    top: -10%;
    left: 0;
    height: 120%;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
    animation: btnShimmer 3s ease-in-out infinite;
    animation-delay: 1s;
    pointer-events: none;
}

.btn--ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

.btn--ghost::after {
    content: '';
    position: absolute;
    top: -10%;
    left: 0;
    height: 120%;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-200%);
    pointer-events: none;
    transition: none;
}

.btn--glass {
    background: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(255, 255, 255, 0.22);
    border-radius: 100px;
    color: rgba(255, 255, 255, 0.90);
    font-size: 0.85rem;
    padding: 9px 18px;
    letter-spacing: 0.03em;
}

.btn--glass::after {
    content: '';
    position: absolute;
    top: -10%;
    left: 0;
    height: 120%;
    width: 40%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    animation: btnShimmer 3s ease-in-out infinite;
    animation-delay: 2s;
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .btn--primary:hover {
        background: rgba(255, 255, 255, 0.88);
        border-color: rgba(255, 255, 255, 0.88);
    }
    .btn--ghost:hover {
        border-color: rgba(255, 255, 255, 0.7);
    }
    .btn--ghost:hover::after {
        transform: translateX(400%);
        transition: transform 0.65s ease;
    }
    .btn--glass:hover {
        background: rgba(197, 29, 74, 0.55);
        border-color: rgba(197, 29, 74, 0.70);
        color: #fff;
    }
}

/* ── Design kit: sectie-critter ── */
.section-critter {
    position: absolute;
    top: 0;
    left: calc(50% + 150px);
    transform: translateX(-50%) translateY(-64%);
    z-index: 10;
}

.section-critter img {
    display: block;
    width: 180px;
    height: auto;
    mix-blend-mode: multiply;
}

body:has(#toggleDark:checked) .section-critter img {
    mix-blend-mode: normal;
    filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.5));
}

/* ── Toegankelijkheid: verminder beweging ── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (min-width: 769px)
{
    .tooltip::before {
        content: attr(data-tooltip);
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(8px);
        background: #222;
        color: #fff;
        padding: 6px 12px;
        border-radius: 6px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
        white-space: nowrap;
        font-size: 12px;
        letter-spacing: 0.3px;
        font-family: inherit;
        z-index: 9999;
        pointer-events: none;
    }

    .tooltip::after {
        content: "";
        position: absolute;
        top: calc(100% - 3px);
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-bottom-color: #222;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.18s ease, visibility 0.18s ease;
        z-index: 9999;
        pointer-events: none;
    }

    .tooltip:hover::before,
    .tooltip:focus-visible::before {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(4px);
    }
    .tooltip:hover::after,
    .tooltip:focus-visible::after {
        opacity: 1;
        visibility: visible;
    }

    /* tooltip-up: slide omlaag bij hover */
    .tooltip-up:hover::before {
        transform: translateX(-50%) translateY(-4px);
    }

    /* Tooltip boven het element (voor knoppen onderaan scherm) */
    .tooltip-up::before {
        top: auto;
        bottom: 100%;
        transform: translateX(-50%) translateY(-8px);
    }
    .tooltip-up::after {
        top: auto;
        bottom: calc(100% - 3px);
        border-bottom-color: transparent;
        border-top-color: #333;
    }
}


/* ============================================================
   FSNW — Sticky bar, navigatie-cirkel, actie-knoppen
   ============================================================ */

/* ── Sticky bar ── */
@layer fsnw {

    /* Verberg de toggle-checkboxes */
    #toggle,
    #toggleDark {
        display: none;
    }

/* ── Wrapper-zijpadding buiten @layer ──────────────────────────────────────
   globals.css heeft een unlayered .wrapper { padding: 0 20px } die altijd
   wint van @layer nav { ... }, ongeacht specificiteit. Door dit blok ook
   buiten een layer te plaatsen, wint de hogere selector.
   ────────────────────────────────────────────────────────────────────────── */
input#toggle:checked ~ .nav-main .wrapper {
    padding-left:   clamp(48px, 8vw, 120px) !important;
    padding-right:  clamp(48px, 8vw, 120px) !important;
    padding-top:    96px !important;
    padding-bottom: 48px !important;
}
@media (max-width: 768px) {
    input#toggle:checked ~ .nav-main .wrapper {
        padding-left:  28px !important;
        padding-right: 28px !important;
        padding-top:   120px !important;
    }
}

    .bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 300;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        padding-block: 10px;
        transition: padding-block 0.25s ease;

        animation-name: barbgChange;
        animation-duration: 1s;
        animation-timeline: scroll();
        animation-range: 0 75dvh;
        animation-fill-mode: forwards;
    }

    .bar .wrap {
        width: 100%;
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 10px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .logo {
        height: 50px;
        width: 48px;
        overflow: hidden;
        transition: height 0.4s ease, width 0.4s ease;
    }

    @media (min-width: 501px) {
        .logo { width: 255px; }
    }

    @media (min-width: 1000px) {
        .logo { height: 60px; width: 255px; }
    }

    .logo img,
    .logo svg {
        height: 100%;
        width: auto;
        margin: 0;
        padding: 0;
        display: block;
    }
}


/* ── Navigatie-cirkel ── */
@layer nav {

    .nav-main {
        box-shadow: 0px 0px 0px 0px yellow, 0px 0px 0px 0px var(--Primary);
        background: var(--Primary);
        color: white;
        position: fixed;
        height: 60px;
        width: 60px;
        top: 0;
        right: 0;
        overflow: hidden;
        border-radius: 100vw;
        transform: translate(0, 0) scale(0.5);
        display: flex;
        align-items: center;
        align-content: center;
        padding: 0;
        z-index: 200;
        transition:
            top          calc(var(--speed) * 0.375s) ease calc(var(--speed) * 0.225s),
            right        calc(var(--speed) * 0.375s) ease calc(var(--speed) * 0.225s),
            transform    calc(var(--speed) * 0.375s) ease calc(var(--speed) * 0.225s),
            height       calc(var(--speed) * 0.375s) ease calc(var(--speed) * 0.075s),
            width        calc(var(--speed) * 0.375s) ease calc(var(--speed) * 0.112s),
            box-shadow   calc(var(--speed) * 0.375s) ease 0s,
            border-radius calc(var(--speed) * 0.375s) ease 0s,
            background   calc(var(--speed) * 0.75s)  ease 0s;
    }

    /* TV-ruis via ::after — opacity los van de inhoud */
    .nav-main::after {
        content: '';
        display: none;
        position: absolute;
        inset: 0;
        background-image: url('/assets/images/noise.gif');
        background-size: 100px 100px;
        background-repeat: repeat;
        opacity: .05;
        z-index: -1;
        pointer-events: none;
    }

    input#toggle:checked ~ .nav-main::after {
        display: block;
    }

    input#toggle:checked ~ .nav-main {
        box-shadow: 0px 0px 0px 20px var(--Secondary), 0px 0px 0px 100px var(--Primary);
        background: var(--color-nav-bg);
        height: 100svh;
        width: 100vw;
        top: 50%;
        right: 50%;
        transform: translate(50%, -50%) scale(1);
        border-radius: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition:
            top          calc(var(--speed) * 0.5s) ease 0s,
            right        calc(var(--speed) * 0.5s) ease 0s,
            transform    calc(var(--speed) * 0.5s) ease 0s,
            height       calc(var(--speed) * 0.5s) ease calc(var(--speed) * 0.20s),
            width        calc(var(--speed) * 0.5s) ease calc(var(--speed) * 0.15s),
            box-shadow   calc(var(--speed) * 0.5s) ease 0s,
            border-radius calc(var(--speed) * 0.5s) ease calc(var(--speed) * 0.25s),
            background   calc(var(--speed) * 1s)   ease 0s;
    }

    input#toggle:checked ~ .bar {
        background: var(--color-bar-bg);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 1px 0 var(--color-border);
        animation: none;
    }

    input#toggle:checked ~ .bar .btn_menu {
        opacity: 1;
    }

    .nav-main .wrapper {
        padding-top: 0;
    }

    input#toggle:checked ~ .nav-main .wrapper {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        scrollbar-width: none;
        padding-top: 96px;
        padding-bottom: 48px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    input#toggle:checked ~ .nav-main .wrapper::-webkit-scrollbar {
        display: none;
    }

    @media (min-width: 769px) {
        input#toggle:checked ~ .nav-main .wrapper {
            justify-content: center;
        }
    }

    @media (max-width: 768px) {
        input#toggle:checked ~ .nav-main .wrapper {
            justify-content: flex-start;
            padding-top: 120px;
        }
    }

    /* ── Decoratieve achtergrond-letter ── */
    .nav-deco-c {
        position: absolute;
        right: 30px;
        bottom: 8%;
        font-family: var(--font-display);
        font-style: italic;
        font-size: 450px;
        font-weight: 900;
        color: rgba(255, 255, 255, 0.08);
        line-height: 1;
        pointer-events: none;
        user-select: none;
        letter-spacing: -0.05em;
        z-index: 0;
        display: none;
    }

    input#toggle:checked ~ .nav-main .nav-deco-c {
        display: block;
    }

    /* ── Nav-grid: 3 kolommen ── */
    .nav-grid {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        position: relative;
        z-index: 1;
        margin-bottom: 32px;
    }

    @media (min-width: 769px) {
        .nav-grid {
            grid-template-columns: 1.6fr 1.8fr 1.2fr;
        }
    }

    .nav-col {
        padding: 20px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    @media (min-width: 769px) {
        .nav-col {
            padding: 0 36px;
            border-top: none;
            border-left: 1px solid rgba(255, 255, 255, 0.12);
        }
        .nav-col:first-child {
            padding-left: 0;
            border-left: none;
        }
        .nav-col:last-child {
            padding-right: 0;
        }
    }

    /* Kleine kolomlabel */
    .nav-col-head {
        display: block;
        font-family: "roboto", var(--font-fallback);
        font-size: 0.6rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
        margin-bottom: 14px;
    }

    /* Grote hoofd-paginalinks */
    .nav-main-links {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .nav-main-links li a {
        display: block;
        font-family: var(--font-display);
        font-style: italic;
        font-size: clamp(1.4rem, 3vw, 1.9rem);
        font-weight: 700;
        color: rgba(255, 255, 255, 0.9);
        letter-spacing: -0.025em;
        padding: 5px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        text-decoration: none;
        line-height: 1.15;
        transition: color 0.12s ease;
    }

    .nav-main-links li:last-child a {
        border-bottom: none;
    }

    @media (hover: hover) and (pointer: fine) {
        .nav-main-links li a:hover {
            color: var(--Tertiary);
        }
    }

    /* Dienst-categorie labels */
    .nav-svc-cat {
        display: block;
        font-family: "roboto", var(--font-fallback);
        font-size: 0.58rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.35);
        margin: 14px 0 5px;
    }

    .nav-col-services .nav-svc-cat:first-of-type {
        margin-top: 0;
    }

    /* Dienst-links */
    .nav-service-links {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .nav-service-links li a {
        display: flex;
        align-items: center;
        gap: 7px;
        font-family: "roboto", var(--font-fallback);
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.75);
        text-decoration: none;
        padding: 5px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        transition: color 0.12s ease;
        line-height: 1.3;
    }

    .nav-service-links li:last-child a {
        border-bottom: none;
    }

    .nav-service-links li a::before {
        content: '';
        width: 3px;
        height: 3px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        flex-shrink: 0;
        transition: background 0.12s ease;
    }

    @media (hover: hover) and (pointer: fine) {
        .nav-service-links li a:hover {
            color: var(--Tertiary);
        }
        .nav-service-links li a:hover::before {
            background: var(--Tertiary);
        }
    }

    /* Contact kolom */
    .nav-tel-big {
        display: block;
        font-family: var(--font-display);
        font-style: italic;
        font-size: clamp(1.4rem, 2.8vw, 1.9rem);
        font-weight: 700;
        color: white;
        letter-spacing: -0.02em;
        text-decoration: none;
        line-height: 1.2;
        margin-bottom: 4px;
        transition: opacity 0.2s ease;
    }

    .nav-email-sm {
        display: block;
        font-family: "roboto", var(--font-fallback);
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.55);
        text-decoration: none;
        margin-bottom: 20px;
        transition: opacity 0.2s ease;
    }

    @media (hover: hover) and (pointer: fine) {
        .nav-tel-big:hover,
        .nav-email-sm:hover { opacity: 0.7; }
    }

    .nav-cta-btn {
        display: inline-block;
        font-family: "roboto", var(--font-fallback);
        font-size: 0.85rem;
        font-weight: 700;
        background: var(--Tertiary);
        color: #111;
        padding: 10px 20px;
        border-radius: 100vw;
        text-decoration: none;
        letter-spacing: 0.02em;
        transition: background 0.15s ease;
    }

    @media (hover: hover) and (pointer: fine) {
        .nav-cta-btn:hover {
            background: white;
        }
    }

    /* ── Stagger-animaties: link voor link ── */

    /* Hoofd-paginalinks — starten na nav-opening (~0.75s) */
    input#toggle:checked ~ .nav-main .nav-main-links li {
        animation: fadeSlide 0.28s ease-out both;
        opacity: 0;
        filter: blur(4px);
        transform: translateY(18px);
    }
    input#toggle:checked ~ .nav-main .nav-main-links li:nth-child(1) { animation-delay: 0.80s; }
    input#toggle:checked ~ .nav-main .nav-main-links li:nth-child(2) { animation-delay: 0.88s; }
    input#toggle:checked ~ .nav-main .nav-main-links li:nth-child(3) { animation-delay: 0.96s; }
    input#toggle:checked ~ .nav-main .nav-main-links li:nth-child(4) { animation-delay: 1.04s; }

    /* Dienst-links */
    input#toggle:checked ~ .nav-main .nav-service-links li {
        animation: fadeSlide 0.24s ease-out both;
        opacity: 0;
        filter: blur(4px);
        transform: translateY(14px);
    }
    input#toggle:checked ~ .nav-main .nav-col-services .nav-service-links:nth-of-type(1) li:nth-child(1) { animation-delay: 0.84s; }
    input#toggle:checked ~ .nav-main .nav-col-services .nav-service-links:nth-of-type(1) li:nth-child(2) { animation-delay: 0.92s; }
    input#toggle:checked ~ .nav-main .nav-col-services .nav-service-links:nth-of-type(1) li:nth-child(3) { animation-delay: 1.00s; }
    input#toggle:checked ~ .nav-main .nav-col-services .nav-service-links:nth-of-type(2) li:nth-child(1) { animation-delay: 1.08s; }
    input#toggle:checked ~ .nav-main .nav-col-services .nav-service-links:nth-of-type(2) li:nth-child(2) { animation-delay: 1.16s; }

    /* Contact kolom items */
    input#toggle:checked ~ .nav-main .nav-tel-big  { animation: fadeSlide 0.28s ease-out 0.82s both; opacity: 0; filter: blur(4px); transform: translateY(14px); }
    input#toggle:checked ~ .nav-main .nav-email-sm { animation: fadeSlide 0.28s ease-out 0.90s both; opacity: 0; filter: blur(4px); transform: translateY(14px); }
    input#toggle:checked ~ .nav-main .nav-cta-btn  { animation: fadeSlide 0.28s ease-out 0.98s both; opacity: 0; filter: blur(4px); transform: translateY(14px); }

    /* ── Nav footer: balk onderaan het menu — spiegelt de topbar ── */
    .nav-footer {
        display: none;
    }

    .nav-footer::before {
        content: '';
        display: block;
        height: 4px;
        background: linear-gradient(to right,
            color-mix(in srgb, var(--Secondary) 55%, transparent) 25%,
            color-mix(in srgb, var(--Primary)   55%, transparent) 25% 50%,
            color-mix(in srgb, var(--Tertiary)  55%, transparent) 50% 75%,
            rgba(0, 0, 0, 0.88)                                    75%
        );
    }

    input#toggle:checked ~ .nav-main .nav-footer {
        display: block;
        flex-shrink: 0;
        width: 100%;
        background: var(--color-bar-bg);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        z-index: 10;
        opacity: 0;
        transform: translateY(100px);
        animation: fadeSlide 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards;
        will-change: transform, opacity;
    }

    .nav-footer-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        padding: 14px clamp(20px, 5vw, 60px) 16px;
        box-sizing: border-box;
    }

    /* Contact info verborgen op desktop (staat al in kolom 3) */
    .nav-footer-contact {
        display: none;
    }

    .nav-footer-tel {
        font-family: var(--font-display);
        font-size: clamp(1.5rem, 2.8vw, 2.4rem);
        font-weight: 700;
        color: var(--color-text);
        text-decoration: none;
        letter-spacing: -0.02em;
        line-height: 1;
        transition: opacity 0.2s ease;
    }

    .nav-footer-email {
        font-size: 0.82rem;
        color: var(--color-text-muted);
        text-decoration: none;
        letter-spacing: 0.01em;
        transition: opacity 0.2s ease;
    }

    @media (hover: hover) and (pointer: fine) {
        .nav-footer-tel:hover,
        .nav-footer-email:hover { opacity: 0.7; }
    }

    .nav-footer-meta {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 5px;
    }

    .nav-footer-legal {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .nav-footer-legal a {
        font-size: 0.75rem;
        color: var(--color-text);
        text-decoration: none;
        transition: opacity 0.2s ease;
    }

    @media (hover: hover) and (pointer: fine) {
        .nav-footer-legal a:hover { opacity: 0.6; }
    }

    .nav-footer-dot {
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--color-text-muted);
        flex-shrink: 0;
    }

    .nav-footer-copy {
        font-size: 0.68rem;
        color: var(--color-text-muted);
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .nav-footer-cta { display: none; }

    @media (max-width: 768px) {
        /* Op mobiel: alleen de actieknoppen, rest staat al in de pagina-footer */
        .nav-footer-contact,
        .nav-footer-meta {
            display: none;
        }

        .nav-footer-inner {
            padding: 12px 20px 14px;
        }

        .nav-footer-cta {
            display: flex;
            justify-content: center;
            gap: 8px;
            width: 100%;
        }

        .nav-footer-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 7px;
            text-decoration: none;
            flex: 1;
            max-width: 72px;
        }

        .nav-footer-btn-circle {
            width: 54px;
            height: 54px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: transform 0.15s ease;
        }

        .nav-footer-btn-label {
            font-size: 0.62rem;
            font-weight: 600;
            letter-spacing: 0.03em;
            text-align: center;
            color: var(--color-text);
            line-height: 1.2;
        }

        /* CMYK kleuren */
        .nav-cmyk-c .nav-footer-btn-circle { background: var(--Secondary); color: white; }
        .nav-cmyk-m .nav-footer-btn-circle { background: var(--Primary);   color: white; }
        .nav-cmyk-y .nav-footer-btn-circle { background: var(--Tertiary);  color: #111;  }
        .nav-cmyk-k .nav-footer-btn-circle { background: #111;             color: white; }

        @media (hover: hover) and (pointer: fine) {
            .nav-footer-btn:hover .nav-footer-btn-circle { transform: scale(1.1); }
        }
    }
}


/* ── Actie-knoppen ── */
@layer option {

    .bar .options {
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .btn_icon {
        width: 32px;
        height: 32px;
        padding: 3px 5px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 18px;
        background-color: transparent;
        text-decoration: none;
        border: none;
        cursor: pointer;
        opacity: 0.65;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: opacity 0.25s, transform 0.25s;
        position: relative;
    }

    @media (hover: hover) and (pointer: fine) {
        .btn_icon:hover {
            opacity: 1;
            transform: scale(1.25);
        }
    }

    .btn_download  { background-image: url("/assets/images/btn_download.svg"); }
    .btn_fullscreen { background-image: url("/assets/images/btn_fullscreen.svg"); }
    .btn_darkmode  { background-image: url("/assets/images/btn_darkmode.svg"); }
    .btn_print     { background-image: url("/assets/images/btn_print.svg"); }

    .btn_menu {
        overflow: visible;
        background-image: url("/assets/images/btn_menu.svg");
    }

    .btn_menu::before {
        content: '';
        position: absolute;
        width: 20px;
        height: 3px;
        background: transparent;
        border-radius: 2px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: none;
        transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    }

    .btn_menu::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 3px;
        background: transparent;
        border-radius: 2px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: transform 0.3s ease, background 0.3s ease;
    }

    input#toggle:checked ~ .bar .btn_menu {
        background-image: none;
    }

    input#toggle:checked ~ .bar .btn_menu::before {
        transform: translate(-50%, -50%) rotate(45deg);
        box-shadow: none;
        background: rgba(0, 0, 0, 0.80);
    }

    input#toggle:checked ~ .bar .btn_menu::after {
        transform: translate(-50%, -50%) rotate(-45deg);
        background: rgba(0, 0, 0, 0.80);
    }
}

/* Geen dubbele scrollbar als menu open is.
   padding-right compenseert de scrollbar-breedte zodat content niet verschuift. */
html:has(input#toggle:checked) {
    overflow: hidden;
    padding-right: var(--scrollbar-w, 0px);
}

/* ============================================================
   HEADER — hero sectie en portfolio strip
   ============================================================ */

@layer header {

    .home header {
        margin-top: 0;
    }

    @media (min-width: 1000px) {
        .home header {
            margin-top: 0;
        }
    }

    /* ── Hero ── */
    .home header .hero {
        height: 75svh;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: clip;
        color: white;
        view-timeline: --hero-scroll block;
    }

    /* Achtergrond foto + leesbaarheids-gradient als tweede laag */
    .home header .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(
                to right,
                rgba(0, 0, 0, 0.72)  0%,
                rgba(0, 0, 0, 0.72) 35%,
                rgba(0, 0, 0, 0.06) 58%,
                rgba(0, 0, 0, 0)    80%
            ),
            url('/assets/images/hero-home.jpg');
        filter: saturate(110%);   
        background-size: cover, cover;
        background-repeat: no-repeat, no-repeat;
        background-position: center center, center center;
        z-index: 0;
        will-change: transform;
        animation-name: background-parallax;
        animation-timeline: --hero-scroll;
        animation-range: exit;
        animation-duration: 1s;
        animation-fill-mode: both;
        animation-timing-function: linear;
    }

    /* Scroll-driven donkerder worden — transparant → donker */
    .home header .hero::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        animation-name: background-darken;
        animation-timeline: scroll(root block);
        animation-range: entry exit;
        animation-duration: 1s;
        animation-fill-mode: both;
        animation-timing-function: ease-out;
          pointer-events: none;
    }

    /* ── Fluid canvas — boven scroll-overlay, onder tekst ── */
    .home header .hero #fluid {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        pointer-events: none;
    }

    /* ── Hero tekst — WOW typografie ── */
    .home header .hero .hero-text {
        position: relative;
        will-change: transform;
        animation-name: text-parallax, text-fade;
        animation-timeline: --hero-scroll, --hero-scroll;
        animation-range: exit 0% exit 100%, exit 20% exit 90%;
        animation-duration: 1s, 1s;
        animation-fill-mode: both, both;
        animation-timing-function: linear, ease-in;
        z-index: 10;
        text-align: left;
    }

    /* Eyebrow — zacht wit, display-lettertype via variabele */
    .home header .hero .h-eyebrow {
        display: block;
        font-family: var(--font-display);
        font-size: clamp(1.5rem, 3.5vw, 2.4rem);
        font-weight: 400;
        font-style: normal;
        color: var(--Tertiary);
        letter-spacing: 0.04em;
        text-shadow: 0 0 20px rgba(0, 0, 0, 0.75), 0 1px 6px rgba(0, 0, 0, 0.90);
        margin-bottom: 0.15em;
    }

    /* Hoofdregel — Bold Italic */
    .home header .hero .h-main {
        display: block;
        font-family: var(--font-display);
        font-size: clamp(3rem, 7.5vw, 5.5rem);
        font-weight: 700;
        font-style: italic;
        color: #ffffff;
        line-height: 0.95;
        letter-spacing: 0.02em;
        text-shadow:
            0 0 60px rgba(0, 0, 0, 0.90),
            0 2px 4px rgba(0, 0, 0, 0.98),
            0 8px 32px rgba(0, 0, 0, 0.70);
        margin-top: 24px;
        margin-bottom: 0.2em;
    }

    /* Subregel + typeable tekst */
    .home header .hero .h-sub-wrap {
        display: block;
        margin: 0;
        padding: 0;
    }

    .home header .hero .h-sub {
        display: inline;
        font-family: var(--font-display);
        font-size: clamp(1.7rem, 4vw, 2.8rem);
        font-weight: 400;
        font-style: normal;
        color: rgba(255, 255, 255, 0.80);
        letter-spacing: 0.02em;
        text-shadow: 0 0 40px rgba(0, 0, 0, 0.85), 0 1px 8px rgba(0, 0, 0, 0.98);
        outline: none;
        caret-color: transparent;
        transition: color 0.25s ease;
    }

    .home header .hero .h-sub:focus {
        color: #ffffff;
    }

    /* Blinkende typecursor */
    .home header .hero .h-blink {
        display: inline;
        color: var(--Tertiary);
        font-family: var(--font-display);
        font-size: clamp(1.7rem, 4vw, 2.8rem);
        font-weight: 400;
        line-height: 1;
        animation: blink-cursor 1.1s step-end infinite;
        pointer-events: none;
        user-select: none;
    }

    @media (min-width: 769px) {
        .home header .hero .hero-text {
            width: 65%;
        }
    }

    /* ── Scroll-indicator ── */
    .home header .hero .scroll-hint {
        position: absolute;
        bottom: 28px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: scrollBounce 2s ease-in-out infinite;
        transition: color 0.2s ease;
    }

    @media (hover: hover) and (pointer: fine) {
        .home header .hero .scroll-hint:hover {
            color: rgba(255, 255, 255, 0.95);
        }
    }

    /* ── Hero reveal animaties ── */
    .home .heroRevealZoom {
        animation: heroRevealZoom 1s cubic-bezier(0.35, 1.2, 0.65, 1) forwards;
        animation-delay: 0.1s;
        will-change: transform;
    }

    @media (max-width: 768px) {
        .home header .hero {
            clip-path: circle(0% at 50% 50%);
            animation: heroRevealCircle 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
            animation-delay: 0.1s;
            will-change: clip-path;
        }

        /* Grotere beginschaal + springveer op mobiel */
        .home .heroRevealZoom {
            animation-name: heroRevealZoomMobile;
            animation-duration: 1.1s;
            animation-timing-function: ease-out;
        }

        /* Grotere begingrootte op mobiel — visueel indrukwekkender entree */
        .home header .hero .h-main {
            font-size: clamp(3.2rem, 17vw, 5rem);
        }
        .home header .hero .h-sub {
            font-size: clamp(1.6rem, 8vw, 2.5rem);
        }
        .home header .hero .h-eyebrow {
            font-size: clamp(1rem, 5vw, 1.6rem);
        }
    }

    /* ── Portfolio strip ── */
    .home header .portfolio {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 1fr;
        height: 25svh;
        gap: 0;
        background: #f0f0f0;
    }

    @media (min-width: 769px) {
        .home header .portfolio {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    .home header .portfolio > * {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    .home header .portfolio img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        will-change: transform;
        animation-name: parallax-scrolling;
        animation-timeline: scroll(root block);
        animation-range: entry 0% entry 75%;
        animation-duration: 1s;
        animation-fill-mode: both;
        animation-timing-function: cubic-bezier(0.35, 1.05, 0.65, 1);
    }

    /* Portfolio reveal: swipe van links naar rechts */
    .home header .portfolio picture {
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        clip-path: inset(0 100% 0 0);
        animation: portfolioRevealSwipe 0.7s ease forwards;
        will-change: clip-path;
    }

    /* Afbeeldingen donker standaard, oplichten bij hover */
    .home header .portfolio picture img {
        filter: brightness(0.50);
        transition: filter 0.4s ease;
    }
    .home header .portfolio .p-item:hover picture img {
        filter: brightness(1);
    }

    /* Namen: verborgen, zichtbaar bij hover met vertraging */
    .home header .portfolio .p-cap {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 3;
        padding: 28px 16px 14px;
        background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 100%);
        color: #ffffff;
        display: flex;
        flex-direction: column;
        gap: 3px;
        pointer-events: none;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.45s ease, transform 0.45s ease;
    }
    .home header .portfolio .p-item:hover .p-cap {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.45s ease 0.3s, transform 0.45s ease 0.3s;
    }

    /* Mobiel: geen hover → altijd volledig licht, namen verborgen */
    @media (hover: none) {
        .home header .portfolio picture img {
            filter: brightness(1);
            transition: none;
        }
        .home header .portfolio .p-cap {
            display: none;
        }
    }

    /* Mobiel tap: tap op item onthult naam */
    @media (hover: none) {
        .home header .portfolio .p-item.is-tapped .p-cap {
            display: flex;
            opacity: 1;
            transform: translateY(0);
            transition: none;
        }
        .home header .portfolio .p-item.is-tapped picture img {
            filter: brightness(0.65);
        }
    }
    .home header .portfolio .p-cap strong {
        font-family: var(--font-display);
        font-size: clamp(0.95rem, 1.5vw, 1.15rem);
        font-weight: 400;
        font-style: italic;
        letter-spacing: 0.02em;
        line-height: 1.2;
        color: var(--Tertiary);
        text-shadow: 0 1px 8px rgba(0,0,0,0.95), 0 0 24px rgba(0,0,0,0.80);
    }
    .home header .portfolio .p-cap span {
        font-family: var(--font-display);
        font-size: clamp(0.78rem, 1.1vw, 0.90rem);
        font-weight: 400;
        letter-spacing: 0.06em;
        color: rgba(255,255,255,0.85);
        text-shadow: 0 1px 6px rgba(0,0,0,0.95);
    }

    .home header .portfolio .p-item:nth-child(1) picture { animation-delay: 0.6s; }
    .home header .portfolio .p-item:nth-child(2) picture { animation-delay: 0.7s; }
    .home header .portfolio .p-item:nth-child(3) picture { animation-delay: 0.8s; }
    .home header .portfolio .p-item:nth-child(4) picture { animation-delay: 0.9s; }

}

/* ── Portfolio strip: licht in light mode, donker in dark mode ── */
body:has(#toggleDark:checked) .home header .portfolio {
    background: #111;
}

/* ── Hero sfeer-animaties: A=glow B=deeltjes C=shimmer ── */
.home header .hero .hero-fx {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

/* Stofdeeltjes — cinema effect */
.home header .hero .hfx-dot {
    position: absolute;
    width: var(--hz, 2px);
    height: var(--hz, 2px);
    border-radius: 50%;
    background: #7de8ff;
    mix-blend-mode: screen;
    opacity: 0;
    left: var(--hx);
    bottom: -4px;
    animation:
        hfxFloat     var(--hs,  13s) linear      var(--hd,  0s) infinite,
        hfxColor     var(--hcs,  8s) linear      var(--hcd, 0s) infinite,
        hfxGlowPulse var(--hgs,  7s) ease-in-out var(--hgd, 0s) infinite;
}

/* ── Scroll-hint duidelijker ── */
.home header .hero .scroll-hint {
    color: rgba(255, 255, 255, 0.90);
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.70));
}
.home header .hero .scroll-hint svg {
    width: 32px;
    height: 32px;
}

/* ── Hero gradient breder op mobiel — tekst loopt verder naar rechts ── */
@media (max-width: 768px) {
    .home header .hero::before {
        background-image:
            linear-gradient(
                to right,
                rgba(0, 0, 0, 0.45)  0%,
                rgba(0, 0, 0, 0.38) 60%,
                rgba(0, 0, 0, 0.18) 85%,
                rgba(0, 0, 0, 0.08) 100%
            ),
            url('/assets/images/hero-home-480.jpg');
    }
}

/* ── Hero achtergrond middelgroot scherm (tablet) ── */
@media (min-width: 769px) and (max-width: 1280px) {
    .home header .hero::before {
        background-image:
            linear-gradient(
                to right,
                rgba(0, 0, 0, 0.72)  0%,
                rgba(0, 0, 0, 0.72) 35%,
                rgba(0, 0, 0, 0.06) 58%,
                rgba(0, 0, 0, 0)    80%
            ),
            url('/assets/images/hero-home-1080.jpg');
    }
}

/* ── Hero wrapper padding — buiten layer, wint van globals.css ── */
.home header .hero .wrapper {
    padding-left:  clamp(32px, 7vw, 100px);
    padding-right: clamp(32px, 7vw, 100px);
}

/* ── Print-decoraties: snijmarkers + CMYK-strip ── */
.home header .hero .hero-print {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

/* Snijmarkers — 32×32px, elk hoek expliciet (geen transforms, anders spiegelt tekst) */
.home header .hero .hp-mark {
    position: absolute;
    display: block;
    width: 32px;
    height: 32px;
}
.home header .hero .hp-mark::before,
.home header .hero .hp-mark::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.50);
}
.home header .hero .hp-mark::before { height: 1px; width: 100%; }
.home header .hero .hp-mark::after  { width: 1px;  height: 100%; }

.home header .hero .hp-mark--tl { top: 96px;    left: 16px; }
.home header .hero .hp-mark--tl::before { top: 0;    left: 0; }
.home header .hero .hp-mark--tl::after  { top: 0;    left: 0; }

.home header .hero .hp-mark--tr { top: 96px;    right: 16px; }
.home header .hero .hp-mark--tr::before { top: 0;    right: 0; }
.home header .hero .hp-mark--tr::after  { top: 0;    right: 0; }

.home header .hero .hp-mark--bl { bottom: 16px; left: 16px; }
.home header .hero .hp-mark--bl::before { bottom: 0; left: 0; }
.home header .hero .hp-mark--bl::after  { bottom: 0; left: 0; }

.home header .hero .hp-mark--br { bottom: 16px; right: 16px; }
.home header .hero .hp-mark--br::before { bottom: 0; right: 0; }
.home header .hero .hp-mark--br::after  { bottom: 0; right: 0; }

/* Hoekgetal */
.home header .hero .hp-num {
    position: absolute;
    font-style: normal;
    font-family: 'Courier New', monospace;
    font-size: 8px;
    letter-spacing: 0.10em;
    color: rgba(255, 255, 255, 0.48);
    white-space: nowrap;
}
.home header .hero .hp-mark--tl .hp-num { bottom: -14px; left: 0; }
.home header .hero .hp-mark--tr .hp-num { bottom: -14px; right: 0; }
.home header .hero .hp-mark--bl .hp-num { top: -14px;    left: 0; }
.home header .hero .hp-mark--br .hp-num { top: -14px;    right: 0; }

/* CMYK kleurblokjes — verticaal, vóór de bestandsnaam (in leesrichting: onder → boven) */
.home header .hero .hp-cmyk {
    position: absolute;
    bottom: 100px;
    right: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}
.home header .hero .hp-cmyk span {
    display: block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
.home header .hero .hp-c { background: #0a92d2; }
.home header .hero .hp-m { background: #c51d4a; }
.home header .hero .hp-y { background: #F7DF00; }
.home header .hero .hp-k { background: #111111; outline: 1px solid rgba(255,255,255,0.30); }

/* Bestandsnaam label — verticaal omhoog, prepress annotatie */
.home header .hero .hp-filename {
    position: absolute;
    bottom: 168px;
    right: 10px;
    font-size: 12px;
    font-family: 'Courier New', monospace;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.10em;
    white-space: nowrap;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

@media (max-width: 768px) {
    .home header .hero .hp-mark--tl,
    .home header .hero .hp-mark--tr { top: 86px; }
}

/* ── Hero badge wrapper: positie + scroll-parallax ── */
.home header .hero .hero-badge-wrap {
    position: absolute;
    right: max(7%, calc(50% - 570px));
    top: 18%;
    z-index: 10;
    animation-name: badgeScrollDown;
    animation-timeline: --hero-scroll;
    animation-range: exit;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-timing-function: linear;
}

@keyframes badgeScrollDown {
    from { translate: 0 0; }
    to   { translate: 0 37.5svh; }
}
/* ── Hero badge: 25 jaar ervaring ── */
.home header .hero .hero-badge {
    width: 152px;
    height: 152px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    box-shadow:
        0 0 40px rgba(197, 29, 74, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    text-align: center;
    /* fade-in via scale (individueel property → conflicteert niet met JS transform) */
    opacity: 0;
    scale: 0.85;
    animation: badgeFadeIn 0.8s ease 1.2s both, badgeFloat 4s ease-in-out 2.2s infinite;
}

/* Draaiende stippelring */
.home header .hero .hero-badge::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1.5px dashed rgba(197, 29, 74, 0.45);
    animation: badgeRingRotate 18s linear infinite;
}

.home header .hero .hero-badge-num {
    display: block;
    font-family: var(--font-display);
    font-size: 3.6rem;
    font-weight: 700;
    font-style: italic;
    color: #fff;
    line-height: 1;
    text-shadow: 0 0 28px rgba(197, 29, 74, 0.9), 0 2px 8px rgba(0, 0, 0, 0.8);
}

.home header .hero .hero-badge-unit {
    display: block;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 400;
    font-style: italic;
    color: rgba(255, 255, 255, 0.80);
    line-height: 1;
    margin-top: 6px;
}

.home header .hero .hero-badge-sub {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.50);
    margin-top: 5px;
}

/* Float gebruikt translate (individueel) → combineert met JS transform */
@keyframes badgeFadeIn {
    from { opacity: 0; scale: 0.85; }
    to   { opacity: 1; scale: 1; }
}

@keyframes badgeFloat {
    0%, 100% { translate: 0 0px; }
    50%       { translate: 0 -9px; }
}

@keyframes badgeRingRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .home header .hero .hero-badge-wrap {
        display: none;
    }
}

/* ── Hero: context-override voor .btn--glass ── */
.home header .hero .btn--glass {
    margin-top: 22px;
    z-index: 10;
}

/* Hint "klik & typ" — verdwijnt na eerste interactie */
.home header .hero .h-hint {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    font-family: inherit;
    transition: opacity 0.4s ease;
    pointer-events: none;
    user-select: none;
}

.home header .hero .h-sub-wrap.is-editing .h-hint {
    opacity: 0;
}

/* ── Hero: subtiele "Bekijk alle projecten" link linksonder ── */
.home header .hero .portfolio-all-link {
    position: absolute;
    bottom: 24px;
    left: clamp(32px, 7vw, 100px);
    z-index: 10;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.40);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
    .home header .hero .portfolio-all-link:hover {
        color: rgba(255, 255, 255, 0.90);
    }
}

/* ============================================================
   ABOUT — over mij teaser
   ============================================================ */

@layer about {

    .about-teaser {
        padding: 80px 0;
        background-color: #f7f5f0;
    }

    .about-teaser-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 48px;
        align-items: center;
    }

    @media (min-width: 769px) {
        .about-teaser-grid {
            grid-template-columns: 5fr 7fr;
            gap: 80px;
        }
    }

    .about-teaser-photo {
        aspect-ratio: 3 / 4;
        border-radius: 3px;
        overflow: visible;
        position: relative;
        rotate: -1deg;
        animation: cardReveal 0.6s ease-out both;
        animation-timeline: view();
        animation-range: entry 0% entry 50%;
    }

    .about-teaser-photo picture {
        display: block;
        height: 100%;
        overflow: hidden;
        border-radius: 3px;
        position: relative;
    }

    /* Light leak — analoog film-effect, verschijnt bij hover samen met de kleur */
    .about-teaser-photo picture::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 3px;
        background:
            radial-gradient(ellipse 65% 85% at -8% 12%, rgba(255,160,40,0.62) 0%, transparent 60%),
            radial-gradient(ellipse 45% 55% at 112% 88%, rgba(255,85,115,0.32) 0%, transparent 55%);
        mix-blend-mode: screen;
        opacity: 0;
        transition: opacity 0.7s ease;
        pointer-events: none;
    }

    @media (hover: hover) and (pointer: fine) {
        .about-teaser-photo:hover picture::after {
            opacity: 1;
        }
    }

    /* Mobiel/touch: light leak verschijnt kort als de foto in beeld scrollt */
    @media (hover: none) {
        .about-teaser-photo picture::after {
            animation: lightLeakScroll 2s ease-out both;
            animation-timeline: view();
            animation-range: entry 5% entry 65%;
        }
    }

    @keyframes lightLeakScroll {
        0%   { opacity: 0; }
        45%  { opacity: 0.9; }
        100% { opacity: 0; }
    }

    /* Hoekvinjet: donkere hoeken als een fysieke foto-afdruk */
    .about-teaser-photo::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        border-radius: 3px;
        background:
            radial-gradient(ellipse 75% 65% at   0%   0%, rgba(0,0,0,0.55) 0%, transparent 100%),
            radial-gradient(ellipse 75% 65% at 100%   0%, rgba(0,0,0,0.55) 0%, transparent 100%),
            radial-gradient(ellipse 75% 65% at   0% 100%, rgba(0,0,0,0.55) 0%, transparent 100%),
            radial-gradient(ellipse 75% 65% at 100% 100%, rgba(0,0,0,0.55) 0%, transparent 100%);
        pointer-events: none;
    }

    /* Gebogen schaduw: sterk aan zijkanten, weg in midden */
    .about-teaser-photo::after {
        content: '';
        position: absolute;
        z-index: -1;
        top: 98%;
        left: 16px;
        right: 16px;
        height: 22px;
        background:
            radial-gradient(ellipse 60% 100% at 3%  0%, rgba(0,0,0,0.82) 0%, transparent 100%),
            radial-gradient(ellipse 60% 100% at 97% 0%, rgba(0,0,0,0.82) 0%, transparent 100%);
        filter: blur(3px);
        pointer-events: none;
    }

    /* Standaard: kleur (mobiel/touch — geen hover mogelijk) */
    .about-teaser-photo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        transition: filter 0.5s ease;
    }

    /* Desktop met muis: zwart-wit, hover naar kleur */
    @media (hover: hover) and (pointer: fine) {
        .about-teaser-photo img {
            filter: grayscale(100%) contrast(1.1);
        }
        .about-teaser-photo:hover img {
            filter: grayscale(0%);
        }
    }

    .about-teaser-text .eyebrow,
    .about-teaser-text .about-teaser-heading,
    .about-teaser-text p,
    .about-teaser-text .about-teaser-link {
        opacity: 0;
        translate: 0 18px;
        transition: opacity 0.65s ease-out, translate 0.65s ease-out;
    }

    .about-teaser-text.in-view .eyebrow           { opacity: 1;    translate: 0 0; transition-delay: 0s; }
    .about-teaser-text.in-view .about-teaser-heading { opacity: 1; translate: 0 0; transition-delay: 0.12s; }
    .about-teaser-text.in-view p:nth-of-type(1)   { opacity: 0.75; translate: 0 0; transition-delay: 0.28s; }
    .about-teaser-text.in-view p:nth-of-type(2)   { opacity: 0.75; translate: 0 0; transition-delay: 0.44s; }
    .about-teaser-text.in-view .about-teaser-link  { opacity: 1;   translate: 0 0; transition-delay: 0.58s; }

    .about-teaser-heading {
        font-family: var(--font-display);
        font-size: clamp(2rem, 5vw, 3.5rem);
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -0.02em;
        margin: 0 0 28px 0;
        overflow: visible;
    }

    .about-teaser-heading .stretch {
        display: inline-block;
        transform-origin: bottom center;
        animation: grootStretch 4s ease-in-out infinite;
        animation-delay: 1s;
    }

    .about-teaser-text p {
        font-size: 1rem;
        line-height: 1.75;
        opacity: 0.75;
        margin: 0 0 16px 0;
    }

    .about-teaser-text p:last-of-type {
        margin-bottom: 32px;
    }

    .about-teaser-link {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-size: 0.88rem;
        font-weight: 600;
        text-decoration: none;
        border-radius: 2em;
        padding: 12px 24px;
        position: relative;
        background: linear-gradient(90deg, var(--Primary), var(--Secondary), var(--Primary));
        background-size: 200% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: gradientMove 5s ease infinite;
        transition: gap 0.5s ease-out, scale 0.5s ease-out;
    }

    /* Geanimeerde gradient rand */
    .about-teaser-link::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 2em;
        padding: 1.5px;
        background: linear-gradient(90deg, var(--Primary), var(--Secondary), var(--Primary));
        background-size: 200% auto;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        animation: gradientMove 5s ease infinite;
        pointer-events: none;
    }



    body:has(#toggleDark:checked) .about-teaser {
        background-color: #1a1714;
    }

    body:has(#toggleDark:checked) .about-teaser-text p {
        opacity: 0.65;
    }

}

/* ============================================================
   CUBE — scroll-driven 3D flip balk
   ============================================================ */

@property --cube-shadow {
    syntax: '<number>';
    inherits: false;
    initial-value: 0;
}

@layer cube {

    /* Perspectief op de wrapper, overflow clipped de 3D-rotatie */
    .cube-wrap {
        perspective: 6000px;
        perspective-origin: 50% 100%;
        overflow: clip;
        view-timeline-name: --cube-view;
        view-timeline-axis: block;
    }

    .cube-block {
        --face-h: 280px;
        width: 100%;
        height: var(--face-h);
        position: relative;
        transform-style: preserve-3d;
        animation: cubeFlip linear both;
        animation-timeline: view();
        animation-range: cover 40% cover 60%;
    }

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

    .cube-face--front {
        transform: translateZ(calc(var(--face-h) / 2));
        background:
            linear-gradient(180deg, transparent 20%, rgb(0 0 0 / calc(0.65 * var(--cube-shadow))) 100%),
            var(--Secondary, #0a92d2);
        color: #fff;
        animation: cubeShadowPulse linear both;
        animation-timeline: --cube-view;
        animation-range: cover 40% cover 60%;
    }

.cube-face--bottom {
        transform: rotateX(-90deg) translateZ(calc(var(--face-h) / 2));
        background:
            radial-gradient(ellipse 70% 45% at 50% -5%, rgb(255 255 255 / calc(0.45 * var(--cube-shadow))) 0%, transparent 65%),
            var(--Primary, #c51d4a);
        color: #fff;
        animation: cubeShadowPulse linear both;
        animation-timeline: --cube-view;
        animation-range: cover 40% cover 60%;
    }

    /* Mobile: 2×2 grid — 4 kolommen passen niet op smalle schermen */
    .cube-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .cube-stat {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px 12px;
        text-align: center;
        border-right: 1px solid rgba(255, 255, 255, 0.15);
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* Rechterkolom: geen rechterrand */
    .cube-stat:nth-child(even) { border-right: none; }

    /* Onderste rij: geen onderrand */
    .cube-stat:nth-child(3),
    .cube-stat:nth-child(4) { border-bottom: none; }

    /* Desktop: 4 kolommen naast elkaar, kleinere blok-hoogte volstaat */
    @media (min-width: 600px) {
        .cube-block  { --face-h: 240px; }
        .cube-stats  { display: flex; }
        .cube-stat   { border-bottom: none; flex: 1; }
        .cube-stat:nth-child(even) { border-right: 1px solid rgba(255, 255, 255, 0.15); }
        .cube-stat:last-child      { border-right: none; }
    }

    .cube-stat-num.stat-landed {
        animation: statLand 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }

    .cube-stat-num {
        display: block;
        font-family: var(--font-display);
        font-size: clamp(2rem, 5vw, 3rem);
        font-weight: 900;
        line-height: 1;
        letter-spacing: -0.03em;
        color: #fff;
        margin-bottom: 8px;
    }

    .cube-stat-label {
        display: block;
        font-size: 1rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.65);
    }

    .cube-quote {
        margin: 0 auto;
        padding: 0 24px;
        max-width: 70ch;
        text-align: center;
    }

    .cube-quote p {
        font-family: var(--font-display);
        font-size: clamp(1.6rem, 3vw, 2.2rem);
        font-weight: 400;
        font-style: italic;
        line-height: 1.55;
        color: rgba(255, 255, 255, 0.95);
        margin: 0 0 16px 0;
    }

    .cube-quote cite {
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        letter-spacing: 0.01em;
        text-transform: none;
        color: rgba(255, 255, 255, 0.60);
    }

}

/* ============================================================
   SERVICES — editoriaal strip-ontwerp
   ============================================================ */

@layer services {

    .services {
        background: #f8f8f8;
        background-image: radial-gradient(rgba(0, 0, 0, 0.09) 1px, transparent 1px);
        background-size: 22px 22px;
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .services .eyebrow {
        margin-bottom: 10px;
        opacity: 0;
        transform: translateY(48px);
        will-change: opacity, transform;
    }

    .services-heading {
        font-family: var(--font-display);
        font-size: clamp(2.4rem, 5vw, 3.8rem);
        font-weight: 700;
        letter-spacing: -0.03em;
        line-height: 1.1;
        margin: 0 0 52px 0;
        opacity: 0;
        transform: translateY(40px);
        will-change: opacity, transform;
    }

    body:has(#toggleDark:checked) .services-heading {
        color: #fff;
    }

    /* ── Kleurvarianten ── */
    .services-item--cyan    { --svc: var(--Secondary); }
    .services-item--magenta { --svc: var(--Primary); }
    .services-item--yellow  { --svc: var(--Tertiary); }
    .services-item--dark    { --svc: #606060; }

    /* ── Strip ── */
    .services-item {
        display: grid;
        grid-template-columns: 1fr;
        padding: 36px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
        position: relative;
        overflow: hidden;
        opacity: 0;
        transform: translateY(64px);
        will-change: opacity, transform;
        transition: padding-left 0.35s ease, background 0.35s ease;
    }

    @media (min-width: 769px) {
        .services-item {
            grid-template-columns: 160px 1fr;
            align-items: center;
            gap: 48px;
        }
    }

    .services-item::before {
        content: '';
        position: absolute;
        left: 0; top: 0; bottom: 0;
        width: 0;
        background: var(--svc);
        transition: width 0.35s ease;
        border-radius: 0 2px 2px 0;
    }

    .services-item:hover {
        padding-left: 20px;
        background: color-mix(in srgb, var(--svc) 6%, transparent);
    }

    .services-item:hover::before {
        width: 4px;
    }

    /* ── Icoon ── */
    .services-item-icon {
        position: absolute;
        top: 28px;
        right: 0;
        color: var(--svc);
        opacity: 0.14;
        transition: opacity 0.35s ease, transform 0.35s ease;
        pointer-events: none;
    }

    .services-item:hover .services-item-icon {
        opacity: 0.38;
        transform: scale(1.12);
    }

    /* ── Getal ── */
    .services-item-num {
        font-family: var(--font-display);
        font-size: clamp(5rem, 9vw, 9rem);
        font-weight: 900;
        line-height: 0.9;
        color: var(--svc);
        opacity: 0.13;
        letter-spacing: -0.04em;
        user-select: none;
        transition: opacity 0.35s ease, transform 0.35s ease;
    }

    .services-item:hover .services-item-num {
        opacity: 0.28;
        transform: translateX(6px);
    }

    .services-item-num.num-bounce {
        animation: numBounce 0.55s ease-out both;
    }

    /* ── Content ── */
    .services-item-content {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .services-item-heading {
        font-family: var(--font-display);
        font-size: clamp(1.8rem, 3.2vw, 2.8rem);
        font-weight: 700;
        letter-spacing: -0.025em;
        line-height: 1.1;
        margin: 0;
    }

    .services-item-desc {
        font-size: 1rem;
        line-height: 1.7;
        opacity: 0.65;
        margin: 0;
        max-width: 58ch;
    }

    /* ── Tags ── */
    .services-item-tags {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .services-item-tags li {
        font-size: 0.78rem;
        font-weight: 500;
        padding: 3px 9px;
        border-radius: 4px;
        border: 1px solid var(--svc);
        color: var(--svc);
        opacity: 0.8;
        transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
        cursor: grab;
        user-select: none;
    }

    .services-item-tags li:active {
        cursor: grabbing;
        opacity: 0.7;
        transform: scale(0.96);
    }

    .services-item-tags li.tag-dragging {
        opacity: 0.15;
        transform: scale(0.85);
        box-shadow: none;
        transition: none;
    }

    .services-item--yellow .services-item-tags li {
        color: #7a6500;
        border-color: #b89800;
    }

    /* ── Item klikbaar als pakket-selector ── */
    .services-item {
        cursor: pointer;
    }

    .services-item.is-selected {
        padding-left: 20px;
        background: color-mix(in srgb, var(--svc) 8%, transparent);
    }

    .services-item.is-selected::before {
        width: 4px;
    }

    .services-item.is-selected .services-item-num {
        opacity: 0.38;
    }

    /* ── Pakket-balk ── */
    .services-pakket {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        margin-top: 0;
        transition: max-height 0.4s ease, opacity 0.35s ease, margin-top 0.4s ease;
        pointer-events: none;
    }

    .services-pakket.has-items {
        max-height: 80px;
        opacity: 1;
        margin-top: 28px;
        pointer-events: auto;
    }

    .services-pakket-info {
        font-size: 0.9rem;
        font-weight: 500;
        opacity: 0.7;
    }

    .services-pakket-info strong {
        font-weight: 700;
        opacity: 1;
    }

    .services-pakket-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.88rem;
        font-weight: 600;
        text-decoration: none;
        border-radius: 2em;
        padding: 10px 22px;
        background: var(--Primary);
        color: #fff;
        transition: opacity 0.2s ease;
        white-space: nowrap;
    }

    @media (hover: hover) and (pointer: fine) {
        .services-pakket-btn:hover {
            opacity: 0.85;
        }
    }

    body:has(#toggleDark:checked) .services-pakket-info {
        color: #fff;
    }

    /* ── Secundaire diensten ── */
    .services-secondary {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        padding-top: 32px;
    }

    .services-secondary-label {
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        opacity: 0.45;
        white-space: nowrap;
    }

    .services-secondary-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .services-secondary-list li {
        font-size: 0.82rem;
        padding: 4px 12px;
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.12);
        opacity: 0.55;
    }

    /* ── Dark mode ── */
    body:has(#toggleDark:checked) .services {
        background-color: #161616;
        background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    }

    body:has(#toggleDark:checked) .services-item {
        border-color: rgba(255, 255, 255, 0.07);
    }

    body:has(#toggleDark:checked) .services-secondary-list li {
        border-color: rgba(255, 255, 255, 0.12);
    }

}

/* ============================================================
   LOGOS — referenties & erkenning
   ============================================================ */

.logos {
    background: #fff;
    padding: 64px 0 0;
    position: relative;
    z-index: 1;
}

.logos-podium {
    position: relative;
    height: 6px;
    margin-top: 160px;
}

.logos-podium img {
    position: absolute;
    bottom: -68px;
    left: calc(50% + 150px);
    transform: translateX(-50%);
    width: 180px;
    height: auto;
    z-index: 10;
    mix-blend-mode: normal;
}


.logos-eyebrow {
    text-align: center;
    margin-bottom: 44px;
}

.logos-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 32px 52px;
}

/* ── Eén item ── */
.logos-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.6;
    filter: grayscale(1);
    transition: opacity 0.25s ease, filter 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
    .logos-item:hover {
        opacity: 1;
        filter: grayscale(0);
    }
}

/* Awards iets prominenter in rust */
.logos-item--award {
    opacity: 0.55;
}

/* ── Logo + naam naast elkaar ── */
.logos-mark {
    display: flex;
    align-items: center;
    gap: 8px;
}

.logos-name {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #111;
    white-space: nowrap;
}

/* ── Label onder het logo ── */
.logos-badge {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
    white-space: nowrap;
}

.logos-badge--award {
    color: #888;
}

/* ── Dark mode ── */
body:has(#toggleDark:checked) .logos {
    background: #161616;
}

body:has(#toggleDark:checked) .logos-name {
    color: #fff;
}

body:has(#toggleDark:checked) .logos-badge {
    color: #666;
}

/* ============================================================
   CTA — call to action sectie
   ============================================================ */


@layer cta {

    .cta {
        padding: 100px 0 0;
        background: var(--section-yellow);
        color: var(--on-yellow);
        position: relative;
        box-shadow: inset 0 10px 28px rgba(0, 0, 0, 0.07),
                    0 8px 28px rgba(0, 0, 0, 0.14);
    }

    /* ── Flamingo: steekt iets onder de gele sectie uit ── */
    .cta-flamingo {
        position: absolute;
        bottom: -37px;
        left: calc(50% - 330px);
        transform: translateX(-50%);
        pointer-events: none;
        z-index: 2;
    }

    .cta-flamingo img {
        display: block;
        width: 200px;
        height: auto;
        pointer-events: auto;
    }

    /* ── CMYK-strip: kleurovergang naar footer ── */
    .cta-cmyk-strip {
        height: 5px;
        background: linear-gradient(to right,
            #00AEEF   0%  25%,
            #EC008C  25%  50%,
            #FFF200  50%  75%,
            #231F20  75% 100%
        );
    }

    /* ── Gecentreerde layout ── */
    .cta-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .cta-content {
        text-align: center;
        padding-bottom: 80px;
        max-width: 560px;
    }

    /* ── Koptekst ── */
    .cta-heading {
        font-family: var(--font-display);
        font-size: clamp(3rem, 7vw, 6rem);
        font-weight: 700;
        font-style: italic;
        letter-spacing: -0.03em;
        line-height: 0.95;
        margin: 0 0 24px 0;
        color: #111;
    }

    .cta-sub {
        font-size: 1rem;
        opacity: 0.55;
        margin: 0 0 48px 0;
        line-height: 1.7;
    }

    /* ── Knoppen ── */
    .cta-actions {
        display: flex;
        gap: 16px;
        justify-content: center;
        flex-wrap: wrap;
    }


    /* ── Beschikbaarheid / meta ── */
    .cta-meta {
        list-style: none;
        padding: 0;
        margin: 48px 0 0 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 28px;
        font-size: 0.82rem;
        opacity: 0.6;
        letter-spacing: 0.02em;
    }

    .cta-meta li {
        display: flex;
        align-items: center;
        gap: 7px;
    }


    .cta-dot {
        display: inline-block;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--Primary);
        box-shadow: 0 0 6px var(--Primary);
        flex-shrink: 0;
        animation: ctaDotPulse 2.4s ease-in-out infinite;
    }

    @keyframes ctaDotPulse {
        0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--Primary); }
        50%       { opacity: 0.55; box-shadow: 0 0 2px var(--Primary); }
    }

}

/* ── CTA: context-overrides voor gele achtergrond (buiten layer — wint van globals) ── */
.cta .eyebrow--light {
    color: rgba(0, 0, 0, 0.5);
}

.cta .btn--primary {
    background: #111;
    color: #fff;
    border-color: #111;
}

.cta .btn--ghost {
    border-color: rgba(0, 0, 0, 0.3);
    color: #111;
}

@media (hover: hover) and (pointer: fine) {
    .cta .btn--primary:hover {
        background: #333;
        border-color: #333;
    }

    .cta .btn--ghost:hover {
        border-color: rgba(0, 0, 0, 0.6);
    }
}

/* Dark mode: CTA-achtergrond blijft geel-achtig → tekst en knoppen donker houden */
body:has(#toggleDark:checked) .cta .eyebrow--light {
    color: rgba(0, 0, 0, 0.45);
}

body:has(#toggleDark:checked) .cta .btn--primary {
    background: #111;
    color: #fff;
    border-color: #111;
}

body:has(#toggleDark:checked) .cta .btn--ghost {
    border-color: rgba(0, 0, 0, 0.3);
    color: #111;
}

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

/* Curtain-effect: footer staat vast achter de scrollende content */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}


@layer footer {

    footer {
        background: #fafaf8;
        color: #111;
        position: relative;
    }

    /* ── Hoofd-footer ── */
    .footer-main-inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: 48px;
        padding-top: 64px;
        padding-bottom: 64px;
    }

    @media (min-width: 640px) {
        .footer-main-inner {
            grid-template-columns: 1fr 1fr;
            gap: 48px 56px;
        }
    }

    @media (min-width: 960px) {
        .footer-main-inner {
            grid-template-columns: 2fr 1fr 1fr;
            gap: 0 72px;
        }
    }

    /* ── Merk ── */
    .footer-brand-logo {
        display: inline-block;
        margin-bottom: 20px;
    }

    .footer-tagline {
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.3;
        color: #111;
        margin: 0 0 4px 0;
    }

    .footer-location {
        font-size: 0.85rem;
        color: #999;
        margin: 0 0 20px 0;
    }

    .footer-desc {
        font-size: 0.875rem;
        line-height: 1.8;
        color: #777;
        margin: 0;
        max-width: 280px;
    }

    /* ── Nav-kolommen ── */
    .footer-nav-title {
        display: block;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        color: #111;
        margin-bottom: 20px;
    }

    .footer-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .footer-nav a {
        color: #555;
        text-decoration: none;
        font-size: 0.9rem;
        transition: color 0.2s ease;
    }

    @media (hover: hover) and (pointer: fine) {
        .footer-nav a:hover {
            color: #111;
        }
    }

    /* ── Contact ── */
    address {
        font-style: normal;
        display: flex;
        flex-direction: column;
        gap: 11px;
    }

    .footer-contact-item {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #555;
        text-decoration: none;
        font-size: 0.9rem;
        transition: color 0.2s ease;
    }

    .footer-contact-location {
        color: #888;
    }

    @media (hover: hover) and (pointer: fine) {
        a.footer-contact-item:hover {
            color: #111;
        }
    }

    /* ── Juridische balk (donker) ── */
    .footer-legal {
        background: #111;
        color: rgba(255, 255, 255, 0.45);
    }

    .footer-legal-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        font-size: 0.82rem;
    }

    .footer-legal-inner p {
        margin: 0;
    }

    .footer-kvk {
        opacity: 0.7;
    }

    .footer-legal-inner nav {
        display: flex;
        gap: 20px;
    }

    .footer-legal-inner a {
        color: inherit;
        text-decoration: none;
    }

    @media (hover: hover) and (pointer: fine) {
        .footer-legal-inner a:hover {
            text-decoration: underline;
        }
    }

    /* ── Dark mode ── */
    body:has(#toggleDark:checked) footer {
        background: #161616;
        color: #fff;
    }

    body:has(#toggleDark:checked) .footer-tagline {
        color: #fff;
    }

    body:has(#toggleDark:checked) .footer-location {
        color: rgba(255, 255, 255, 0.4);
    }

    body:has(#toggleDark:checked) .footer-desc {
        color: rgba(255, 255, 255, 0.35);
    }

    body:has(#toggleDark:checked) .footer-nav-title {
        color: #fff;
    }

    body:has(#toggleDark:checked) .footer-nav a {
        color: rgba(255, 255, 255, 0.55);
    }

    @media (hover: hover) and (pointer: fine) {
        body:has(#toggleDark:checked) .footer-nav a:hover {
            color: #fff;
        }
    }

    body:has(#toggleDark:checked) .footer-contact-item {
        color: rgba(255, 255, 255, 0.55);
    }

    body:has(#toggleDark:checked) .footer-contact-location {
        color: rgba(255, 255, 255, 0.35);
    }

    @media (hover: hover) and (pointer: fine) {
        body:has(#toggleDark:checked) a.footer-contact-item:hover {
            color: #fff;
        }
    }

    body:has(#toggleDark:checked) .footer-legal {
        background: #0a0a0a;
    }

}

/* ── Unlayered: wint van .wrapper's padding shorthand ── */
.footer-main-inner {
    padding-top: 72px;
    padding-bottom: 72px;
}

footer .footer-legal-inner {
    padding-top: 24px;
    padding-bottom: 32px;
}

/* Brand-kolom: interne afstand */
.footer-brand-logo  { margin-bottom: 24px; }
.footer-tagline     { margin-bottom: 6px;  }
.footer-location    { margin-bottom: 20px; }

/* Nav-kolom: titel-afstand */
.footer-nav-title,
.footer-contact > .footer-nav-title { margin-bottom: 22px; }

/* ============================================================
   DARK MODE
   Techniek: body:has(#toggleDark:checked)
   - Geen JavaScript nodig
   - Staat houdt niet vast na page reload (concept-fase, prima)
   ============================================================ */

/* ── Kleur-tokens overschrijven ── */
body:has(#toggleDark:checked) {
    --color-bg:         #0f0f0f;
    --color-text:       #e8e8e8;
    --color-text-muted: #999999;
    --color-bar-bg:     rgba(20, 20, 20, 0.92);
    --color-bar-top:    rgba(20, 20, 20, 0.82);
    --color-border:     rgba(255, 255, 255, 0.10);
}

/* Links */
body:has(#toggleDark:checked) a {
    color: var(--color-text);
}

/* Tooltip in dark mode */
body:has(#toggleDark:checked) .tooltip::before {
    background: #e8e8e8;
    color: #111;
}
body:has(#toggleDark:checked) .tooltip::after {
    border-bottom-color: #e8e8e8;
}

/* ── Icons: donkere SVGs → wit via invert ── */
/* Simpele zwarte icons worden wit; werkt voor enkelvoudige kleur-SVGs */
body:has(#toggleDark:checked) .btn_icon {
    filter: invert(1) opacity(0.92);
}

/* Dark mode-knop: zelfde opacity als overige iconen */
body:has(#toggleDark:checked) .btn_darkmode {
    filter: invert(1) opacity(0.75);
}

/* Logo: inline SVG kleur wisselt via fill */
#compured-logo .logo-bg,
#compured-logo .logo-text path { fill: #08181d; }

body:has(#toggleDark:checked) #compured-logo .logo-bg,
body:has(#toggleDark:checked) #compured-logo .logo-text path { fill: #e8e8e8; }

/* Darkmode-knop: maan → zon (iets groter weergegeven) */
body:has(#toggleDark:checked) .btn_darkmode {
    background-image: url("/assets/images/btn_lightmode.svg");
    background-size: 22px;
}

/* Afbeeldingen: licht dimmen — comfortabeler voor ogen in dark mode */
body:has(#toggleDark:checked) img {
    filter: brightness(0.82) contrast(1.02);
}

/* Portfolio strip: alleen dimmen als hover beschikbaar is (niet op touch/mobiel) */
@media (hover: hover) and (pointer: fine) {
    body.home:has(#toggleDark:checked) header .portfolio picture img {
        filter: brightness(0.50);
    }
    body.home:has(#toggleDark:checked) header .portfolio .p-item:hover picture img {
        filter: brightness(1);
    }
}

/* About portretfoto: niet dimmen — heeft eigen grijs/kleur effect */
body:has(#toggleDark:checked) .about-teaser-photo img {
    filter: none;
}

/* Desktop: grayscale zonder dimmen, hover → kleur */
@media (hover: hover) and (pointer: fine) {
    body:has(#toggleDark:checked) .about-teaser-photo img {
        filter: grayscale(100%) contrast(1.1);
    }
    body:has(#toggleDark:checked) .about-teaser-photo:hover img {
        filter: none;
    }
}

/* Pagina-footer: lichte aanpassing in dark mode */
body:has(#toggleDark:checked) footer {
    background-color: #0a0a0a;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Nav-footer: witte balk onderaan het menu → donker in dark mode */
body:has(#toggleDark:checked) .nav-footer {
    background: #111 !important;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.40);
}

body:has(#toggleDark:checked) .nav-footer-sub {
    border-top-color: rgba(255, 255, 255, 0.08);
}

body:has(#toggleDark:checked) .nav-footer-copy {
    color: rgba(255, 255, 255, 0.35);
}

/* Knoppen: darkmode a { color } override herstellen */
body:has(#toggleDark:checked) .btn--primary {
    color: var(--Primary, #c51d4a);
}

body:has(#toggleDark:checked) .btn--ghost {
    color: #fff;
}

body:has(#toggleDark:checked) .ripple-wave {
    background-color: black;
}

@layer testimonials {

    .testimonials {
        padding: 80px 0 96px;
        background: #111;
    }

    .testimonials-heading {
        font-family: var(--font-display);
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 700;
        font-style: italic;
        letter-spacing: -0.03em;
        margin: 0 0 60px 0;
        color: #fff;
    }

    .testimonials-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 48px;
        align-items: start;
    }

    @media (min-width: 769px) {
        .testimonials-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; }
        .tq--offset { padding-top: 52px; }
    }

    .tq { margin: 0; padding: 0; }

    /* Communicatieballon */
    .tq-bubble {
        background: rgba(255, 255, 255, 0.07);
        border-radius: 18px;
        border-bottom-left-radius: 4px;
        padding: 22px 24px;
        position: relative;
        margin-bottom: 18px;
    }

    /* Staartje van de ballon */
    .tq-bubble::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 18px;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 14px solid transparent;
        border-top: 11px solid rgba(255, 255, 255, 0.07);
    }

    .tq-text {
        font-size: 0.975rem;
        font-style: italic;
        line-height: 1.82;
        color: rgba(255, 255, 255, 0.80);
        margin: 0;
    }

    .tq--zinger .tq-text {
        font-size: 1.2rem;
        line-height: 1.55;
    }

    /* Avatar + naam naast elkaar */
    .tq-author {
        display: flex;
        align-items: center;
        gap: 12px;
        padding-left: 4px;
    }

    .tq-avatar {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--Primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        flex-shrink: 0;
        user-select: none;
        overflow: hidden;
    }

    .tq-avatar img {
        width: 42px;
        height: 42px;
        object-fit: cover;
        display: block;
    }

    .tq-cite {
        display: block;
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 700;
        color: var(--Primary);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        line-height: 1.7;
    }

    /* ── Indienformulier ── */
    .tq--submit .tq-bubble {
        background: rgba(255, 255, 255, 0.04);
        border: 1.5px dashed rgba(255, 255, 255, 0.14);
    }

    .tq--submit .tq-bubble::after {
        border-top-color: rgba(255, 255, 255, 0.04);
    }

    .tq-textarea {
        width: 100%;
        background: none;
        border: none;
        outline: none;
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.975rem;
        font-style: italic;
        font-family: inherit;
        line-height: 1.82;
        resize: none;
    }

    .tq-textarea::placeholder { color: rgba(255, 255, 255, 0.22); }

    .tq-avatar--add {
        background: transparent;
        border: 1.5px dashed rgba(255, 255, 255, 0.18);
        color: rgba(255, 255, 255, 0.28);
        font-size: 1.3rem;
        font-style: normal;
    }

    .tq-submit-fields {
        display: flex;
        flex-direction: column;
        gap: 5px;
        flex: 1;
    }

    .tq-input {
        background: none;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
        outline: none;
        color: rgba(255, 255, 255, 0.65);
        font-size: 0.72rem;
        font-family: inherit;
        padding: 3px 0;
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }

    .tq-input::placeholder {
        color: rgba(255, 255, 255, 0.22);
        text-transform: uppercase;
        letter-spacing: 0.07em;
    }

    .tq-input:focus { border-bottom-color: var(--Primary); }

    .tq-btn {
        margin-top: 14px;
        background: var(--Primary);
        color: #fff;
        border: none;
        border-radius: 100px;
        padding: 7px 18px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
        display: inline-block;
        transition: opacity 0.15s ease;
    }

    .tq-btn:hover { opacity: 0.85; }

    .tq-company {
        display: block;
        font-weight: 400;
        font-size: 0.72rem;
        color: rgba(255, 255, 255, 0.30);
        text-transform: none;
        letter-spacing: 0.02em;
    }

}

/* ============================================================
   FAQ — accordion via <details> / <summary>
   ============================================================ */

@layer faq {

    .faq {
        padding: 100px 0;
        background: #fafaf8;
    }

    .faq-heading {
        font-family: var(--font-display);
        font-size: clamp(2rem, 4vw, 3.2rem);
        font-weight: 700;
        font-style: italic;
        letter-spacing: -0.03em;
        margin: 0 0 56px 0;
        color: #111;
    }

    .faq-list {
        max-width: 760px;
    }

    .faq-item {
        border-bottom: 1px solid rgba(0,0,0,0.09);
    }

    .faq-item:first-child {
        border-top: 1px solid rgba(0,0,0,0.09);
    }

    .faq-question {
        font-size: 1rem;
        font-weight: 600;
        color: #111;
        padding: 20px 48px 20px 0;
        cursor: pointer;
        list-style: none;
        position: relative;
        display: block;
        user-select: none;
        transition: color 0.15s ease;
    }

    .faq-question::-webkit-details-marker { display: none; }
    .faq-question::marker { display: none; }

    /* + wordt × bij open */
    .faq-question::after {
        content: '+';
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.5rem;
        font-weight: 300;
        color: var(--Primary);
        line-height: 1;
        transition: transform 0.2s ease;
    }

    .faq-item[open] > .faq-question::after {
        transform: translateY(-50%) rotate(45deg);
    }

    @media (hover: hover) and (pointer: fine) {
        .faq-question:hover { color: var(--Primary); }
    }

    .faq-answer {
        padding: 4px 48px 24px 0;
    }

    .faq-answer p {
        font-size: 0.925rem;
        line-height: 1.85;
        color: #555;
        margin: 0;
    }

    .faq-answer a {
        color: var(--Primary);
    }

    /* ── Dark mode ── */
    body:has(#toggleDark:checked) .faq             { background: #161616; }
    body:has(#toggleDark:checked) .faq-heading     { color: #fff; }
    body:has(#toggleDark:checked) .faq-item        { border-color: rgba(255,255,255,0.1); }
    body:has(#toggleDark:checked) .faq-question    { color: #fff; }
    body:has(#toggleDark:checked) .faq-answer p    { color: rgba(255,255,255,0.55); }

}

/* ============================================================
   SEASONAL — subtiele seizoensaccenten per datum
   Klasse op <html> gezet via seasonal.js
   ============================================================ */

/* ── Koningsdag (27 april) — oranje ── */
.season-kingsday {
    --Tertiary:      #FF6B00;
    --section-yellow: #FF6B00;
    --on-yellow:     #fff;
}

/* ── Kerst (december) — donkerrood ── */
.season-christmas {
    --Tertiary:      #c41e3a;
    --section-yellow: #c41e3a;
    --on-yellow:     #fff;
}

/* ── Valentijn (14 feb) — magenta-roze ── */
.season-valentine {
    --Tertiary:      #e91e8c;
    --section-yellow: #e91e8c;
    --on-yellow:     #fff;
}

/* ── Nieuwjaar (1–7 jan) — goud ── */
.season-newyear {
    --Tertiary:      #D4AF37;
    --section-yellow: #D4AF37;
    --on-yellow:     #111;
}

/* ── TT Assen (eind jun – begin jul) — rood-zwart racing ── */
.season-tt {
    --Tertiary:      #e30613;
    --section-yellow: #e30613;
    --on-yellow:     #fff;
}

/* ── Lente / Pinksteren — fris groen ── */
.season-spring {
    --Tertiary:      #4caf50;
    --section-yellow: #4caf50;
    --on-yellow:     #fff;
}

/* ── Zomer — warm oranje-geel ── */
.season-summer {
    --Tertiary:      #FF9900;
    --section-yellow: #FF9900;
    --on-yellow:     #111;
}

/* ── Kleine badge linksboven in de hero ── */
.season-christmas  .hero-seasonal::before { content: '🎄'; }
.season-newyear    .hero-seasonal::before { content: '🎆'; }
.season-valentine  .hero-seasonal::before { content: '💝'; }
.season-kingsday   .hero-seasonal::before { content: '🧡'; }
.season-tt         .hero-seasonal::before { content: '🏁'; }
.season-spring     .hero-seasonal::before { content: '🌸'; }
.season-summer     .hero-seasonal::before { content: '☀️'; }

.hero-seasonal {
    display: none;
}

html[class*="season-"] .hero-seasonal {
    display: inline-block;
    position: absolute;
    top: 24px;
    left: 24px;
    font-size: 1.6rem;
    z-index: 20;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
    animation: seasonFloat 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes seasonFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50%       { transform: translateY(-6px) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-seasonal { animation: none !important; }
}

/* ============================================================
   PRINT — universele A4-lay-out
   Werkt op home, dienst-pagina's, cases, blog, etc.
   ============================================================ */

@media print {

    /* ── Pagina-marges ── */
    @page {
        margin: 20mm 18mm;
        size: A4 portrait;
    }

    /* ── Basis reset ── */
    *, *::before, *::after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        animation: none !important;
        transition: none !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body {
        padding: 0 !important;
        margin: 0 !important;
        font-size: 11pt;
        line-height: 1.6;
        background: #fff !important;
        color: #000 !important;
    }

    /* ── Verberg navigatie, UI en decoratie ── */
    .bar,
    nav,
    footer,
    input#toggle,
    input#toggleDark,
    .btn_icon,
    .btn_menu,
    .options,
    .skip-link,
    .scroll-hint,
    .tts-btn,
    #return-toast,
    .nav-deco-c,
    .hero-badge-wrap,
    .hero-seasonal,
    .hero-fx,
    .cta-flamingo,
    .cta-cmyk-strip,
    .logos-podium,
    .critter,
    .cube,
    .cube-wrap,
    .services-pakket,
    .services-item-tags,
    .services-secondary,
    header .portfolio,
    header .plx { display: none !important; }

    /* Compacte sectie-afstand voor print */
    main > section,
    main > div {
        padding-top: 24pt !important;
        padding-bottom: 16pt !important;
    }

    /* ── Typografie ── */
    h1 { font-size: 26pt !important; page-break-after: avoid; break-after: avoid; }
    h2 { font-size: 18pt !important; page-break-after: avoid; break-after: avoid; }
    h3 { font-size: 13pt !important; page-break-after: avoid; break-after: avoid; }
    h4, h5, h6 { page-break-after: avoid; break-after: avoid; }

    p, blockquote, ul, ol { orphans: 3; widows: 3; }

    /* ── Hero / page header — generiek voor elke pagina ── */
    .hero,
    .page-hero,
    header .hero {
        height: auto !important;
        min-height: 0 !important;
        padding: 20pt 0 12pt !important;
    }

    .hero::before,
    .hero::after,
    .page-hero::before,
    .page-hero::after { display: none !important; }

    .h-eyebrow { color: #555 !important; font-size: 10pt !important; }
    .h-main    { font-size: 26pt !important; }
    .h-sub     { font-size: 14pt !important; color: #333 !important; }
    .h-blink   { display: none !important; }

    /* ── Afbeeldingen ── */
    img {
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .about-teaser-grid {
        display: block !important;
    }

    .about-teaser-photo,
    .about-teaser-photo picture {
        width: 100pt !important;
        max-width: 100pt !important;
        height: auto !important;
        float: left;
        margin: 0 16pt 8pt 0;
    }

    .about-teaser-photo img {
        width: 100% !important;
        height: auto !important;
    }

    /* ── Lay-out: verwijder grid/flex beperkingen ── */
    .wrapper,
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* ── Knoppen als tekst ── */
    .btn,
    [class*="-btn"],
    [class*="-cta"] {
        border: 0.5pt solid #000 !important;
        padding: 3pt 8pt !important;
        border-radius: 2pt !important;
        font-size: 9pt !important;
        color: #000 !important;
        background: none !important;
        display: inline-block !important;
        text-decoration: none !important;
    }

    /* ── Links: toon URL achter externe links ── */
    a[href^="http"]::after,
    a[href^="https"]::after {
        content: ' (' attr(href) ')';
        font-size: 8pt;
        color: #555 !important;
        word-break: break-all;
        font-weight: normal;
    }
    a[href^="#"]::after { content: none !important; }

    a[href^="tel"]::after    { content: ' (' attr(href) ')'; font-size: 8pt; color: #555 !important; }
    a[href^="mailto"]::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #555 !important; }

    /* ── Logo's ── */
    .logos-list {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8pt;
    }

    /* ── Paginaomloop ── */
    .services-item,
    .portfolio-item,
    .case-item,
    article,
    .card,
    section { page-break-inside: avoid; break-inside: avoid; }

    /* ── Paginakoptekst in browser (alleen print) ── */
    body::before {
        content: 'compured.nl — Code & Design in Assen';
        display: block;
        font-size: 8pt;
        color: #aaa !important;
        border-bottom: 0.5pt solid #ddd;
        padding-bottom: 4pt;
        margin-bottom: 16pt;
    }

    /* ── Voettekst ── */
    body::after {
        content: 'Afgedrukt van compured.nl';
        display: block;
        text-align: center;
        font-size: 8pt;
        color: #aaa !important;
        margin-top: 24pt;
        border-top: 0.5pt solid #ddd;
        padding-top: 6pt;
    }

}