/*
Theme Name: The New School Blocks
Theme URI: https://lomero.nl
Author: Lomero Media
Author URI: https://lomero.nl
Description: The New School thema — herbouwd met SSR Gutenberg blocks. Gebaseerd op het originele TNS thema (v4.4.7).
Version: 1.7.370
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tns-blocks
Tags: full-site-editing, block-styles, wide-blocks, custom-colors, custom-logo
*/

/* ══════════════════════════════════════════════════════════════════════════
   SITEWIDE TYPOGRAFIE — TNS The New School
   Koptitels  : Hind Bold ALL CAPS + lichte schaduw
   Subtitels  : Helvetica Now Display Bold
   Body tekst : Helvetica Now Display
   KPI cijfers: Hind Bold (in blok-CSS)
   ══════════════════════════════════════════════════════════════════════════ */

/* Body / algemeen */
body,
p,
li,
td,
th,
.wp-block-paragraph {
    font-family: 'Helvetica Now Display', 'Helvetica Now', 'Helvetica Neue',
                 HelveticaNeue, Helvetica, Arial, sans-serif;
    font-weight: 400;
}

/* ── Inline opmaak helpers ── */
.tns-gold  { font-style: normal; color: #BFA46A; }
.tns-bold  { font-weight: 700; font-style: normal; }

/* Kleuren via [kleur=naam] in een tekstveld. Alleen huisstijlkleuren, zodat
   er nooit een willekeurige waarde op de site belandt. */
.tns-c-navy  { color: var(--tns-blauw, #102F49); }
.tns-c-goud  { color: var(--tns-oker,  #BFA46A); }
.tns-c-groen { color: var(--tns-groen, #828673); }
.tns-c-grijs { color: var(--tns-grijs, #414246); }
.tns-c-wit   { color: #FFFFFF; }
.tns-c-zacht { color: var(--tns-gray, #6C757D); }

/* Grootte via [gr=NN]. De maat staat in em op het element zelf, dus hij
   schaalt mee met de clamp() van het blok en blijft op mobiel kloppen. */
.tns-fs { line-height: 1.35; }


h1, h2, h3,
.wp-block-heading:is(h1, h2, h3) {
    font-family: 'Hind', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}

/* H4 + H5 + H6 — Helvetica Now Display Bold (subtitels, geen caps) */
h4, h5, h6,
.wp-block-heading:is(h4, h5, h6) {
    font-family: 'Helvetica Now Display', 'Helvetica Now', 'Helvetica Neue',
                 HelveticaNeue, Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: none;
    text-shadow: none;
}

/* ── CTA / BUTTON HIËRARCHIE ─────────────────────────────────────────────── */

/* Primair — navy achtergrond (default) */
.wp-block-button:not(.is-style-outline):not(.is-style-fill) .wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button__link {
    background-color: #102f49;
    color: #ffffff;
    border: 2px solid transparent;
    font-family: 'Helvetica Now Display', 'Helvetica Now', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: background-color 0.25s ease, transform 0.2s ease;
}
.wp-block-button:not(.is-style-outline):not(.is-style-fill) .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button__link:hover {
    background-color: #1a4a6e;
    transform: translateY(-1px);
}

/* Secundair — outline */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    color: #102f49 !important;
    border: 2px solid #102f49 !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: #102f49 !important;
    color: #ffffff !important;
}

/* ===================================
   TNS BLOCKS — KLEURCORRECTIE
   Zorg dat WP-gegenereerde klassen (has-*-color / has-*-background-color)
   overeenkomen met de palette in theme.json.
   =================================== */
:root {
    --wp--preset--color--tns-blauw:       #102f49;
    --wp--preset--color--tns-blauw-light: #1a4a6e;
    --wp--preset--color--tns-oker:        #bfa46a;
    --wp--preset--color--tns-oker-light:  #d4bc82;
    --wp--preset--color--tns-groen:       #828673;
    --wp--preset--color--tns-groen-light: #9a9e8a;
    --wp--preset--color--tns-grijs:       #414246;
    --wp--preset--color--tns-gray:        #6C757D;
    --wp--preset--color--off-white:       #F8F9FA;
    --wp--preset--color--tns-bg:          #F4F2EE;
    --wp--preset--color--tns-light-gray:  #E9ECEF;
    --wp--preset--color--white:           #ffffff;
}



/* ===================================
   CSS RESET & BASE STYLES
   =================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* TNS Huisstijl Kleuren */
    --tns-blauw: #102f49;
    --tns-grijs: #414246;
    /* Kleur van sectie-subteksten (de introregel onder een kop). Eén token
       voor alle blokken; aan te passen via Customizer > Typografie. */
    --tns-subtekst: #102F49;
    --tns-groen: #828673;
    --tns-oker: #bfa46a;
    
    /* Afgeleide kleuren */
    --tns-blauw-light: #1a4a6e;
    --tns-oker-light: #d4bc82;
    --tns-groen-light: #9a9e8a;
    
    /* Neutral Colors */
    --tns-white: #FFFFFF;
    --tns-bg: #F4F2EE;  /* Body background - licht grijs/blauw */
    --tns-off-white: #F8F9FA;
    --tns-light-gray: #E9ECEF;
    --tns-gray: #6C757D;
    --tns-dark-gray: #414246;
    --tns-black: #414246;
    
    /* Aliassen voor backwards compatibility */
    --tns-primary: var(--tns-blauw);
    --tns-primary-light: var(--tns-blauw-light);
    --tns-secondary: var(--tns-oker);
    --tns-secondary-light: var(--tns-oker-light);
    --tns-accent: var(--tns-groen);
    --tns-accent-light: var(--tns-groen-light);
    
    /* Typography */
    --tns-font-heading: 'Hind', -apple-system, BlinkMacSystemFont, sans-serif;
    --tns-font-body: 'Helvetica Now Display', 'Helvetica Now', 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif;
    
    /* Spacing */
    --tns-container: 1200px;
    --tns-container-wide: 1400px;
    --tns-gutter: 2rem;
    /* Marge van de header: logo links en menuknop rechts gebruiken allebei
       deze waarde, zodat ze op elk schermformaat op dezelfde lijn staan.
       Los van --tns-gutter, want die bepaalt ook de breedte van de inhoud. */
    --tns-header-gutter: clamp(18px, 4vw, 32px);
    --tns-section-spacing: clamp(4rem, 8vw, 8rem);
    
    /* Transitions */
    --tns-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --tns-transition-slow: 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* Border Radius */
    --tns-radius-sm: 8px;
    --tns-radius: 12px;
    --tns-radius-lg: 20px;
    --tns-radius-full: 9999px;
}

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

body {
    font-family: var(--tns-font-body);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--tns-dark-gray);
    background-color: var(--tns-bg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}

/* ===================================
   TYPOGRAPHY — zie bovenaan dit bestand
   voor Hind / Helvetica Now Display regels
   =================================== */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1rem;
    color: var(--tns-black);
}

h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: -0.01em;
}

h3 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 600;
}

h4 {
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 600;
}

h5 {
    font-size: 1.25rem;
    font-weight: 600;
}

h6 {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* H2 Eyebrow - For split headings (SEO-friendly)
   Usage: <h2><span class="h2-eyebrow">Small text</span>Large text</h2>
   This keeps the full heading in one H2 tag for SEO while styling differently */
.h2-eyebrow {
    display: block;
    font-size: 18px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.4;
    margin-bottom: -0.15em;
    letter-spacing: 0;
}

/* Variant for light/dark backgrounds */
.has-white-color .h2-eyebrow,
.has-text-color .h2-eyebrow {
    opacity: 0.85;
}

/* Eyebrow in cover blocks with oker accent */
.wp-block-cover .h2-eyebrow {
    color: var(--tns-oker);
    opacity: 1;
}

/* ===================================
   SPEECH BUBBLE - Decorative corner element
   Usage: Add class "tns-speech-bubble" to a Group block
   Note: This class adds its own border-radius, so remove border-radius from Gutenberg settings
   =================================== */
.tns-speech-bubble {
    position: relative;
    border-radius: 40px 40px 40px 0 !important; /* top-left, top-right, bottom-right, bottom-left */
    overflow: visible !important;
}

.tns-speech-bubble::after {
    content: "";
    position: absolute;
    bottom: -90px;
    left: 0;
    width: 100px;
    height: 90px;
    background-color: var(--tns-speech-bubble-color, #ffffff);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 70'%3E%3Cpath d='M0 0 L0 70 Q0 0 80 0 Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 70'%3E%3Cpath d='M0 0 L0 70 Q0 0 80 0 Z'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    z-index: 5;
}

/* Color variants */
.tns-speech-bubble.has-white-background-color::after,
.tns-speech-bubble--white::after {
    background-color: #ffffff;
}

.tns-speech-bubble.has-tns-blauw-background-color::after,
.tns-speech-bubble--blauw::after {
    background-color: var(--tns-blauw);
}

.tns-speech-bubble.has-tns-bg-background-color::after,
.tns-speech-bubble--bg::after {
    background-color: var(--tns-bg);
}

/* Responsive: smaller on mobile */
@media (max-width: 768px) {
    .tns-speech-bubble {
        border-radius: 24px 24px 24px 0 !important;
        margin-bottom: 60px !important; /* Make room for the tail */
    }
    
    .tns-speech-bubble::after {
        width: 60px;
        height: 54px;
        bottom: -54px;
    }
}

.tns-speech-bubble-right {
    position: relative;
    border-bottom-right-radius: 0 !important;
    overflow: visible !important;
}

.tns-speech-bubble-right::after {
    content: "";
    position: absolute;
    bottom: -70px;
    right: 0;
    width: 80px;
    height: 70px;
    background-color: var(--tns-speech-bubble-color, var(--tns-blauw));
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 70'%3E%3Cpath d='M80 0 L80 70 Q80 0 0 0 Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 70'%3E%3Cpath d='M80 0 L80 70 Q80 0 0 0 Z'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    z-index: 5;
}

@media (max-width: 768px) {
    .tns-speech-bubble-right {
        margin-bottom: 50px !important;
    }
    
    .tns-speech-bubble-right::after {
        width: 50px;
        height: 44px;
        bottom: -44px;
    }
}

/* ===================================
   RESPONSIVE VISIBILITY CLASSES
   Usage: Add via "Extra CSS-klasse(n)" in Gutenberg
   =================================== */

/* Hide on specific devices */
@media (max-width: 767px) {
    .tns-hide-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .tns-hide-tablet {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .tns-hide-desktop {
        display: none !important;
    }
}

/* Binaire zichtbaarheid via data-attribuut (per-blok toggle in de editor) */
/* 'mobiel' = alles onder 1024px, 'desktop' = 1024px en breder */
@media (max-width: 1023px) {
    [data-tns-hide~="mobile"] { display: none !important; }
}
@media (min-width: 1024px) {
    [data-tns-hide~="desktop"] { display: none !important; }
}

/* Show ONLY on specific devices */
.tns-mobile-only {
    display: none !important;
}

@media (max-width: 767px) {
    .tns-mobile-only {
        display: block !important;
    }
}

.tns-tablet-only {
    display: none !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .tns-tablet-only {
        display: block !important;
    }
}

.tns-desktop-only {
    display: block !important;
}

@media (max-width: 1023px) {
    .tns-desktop-only {
        display: none !important;
    }
}

p {
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
    /* Huisstijlgrijs. Let op: --tns-grijs (#414246) is de tekstkleur,
       --tns-gray (#6C757D) is een lichtere tint voor bijzaken zoals een
       bijschrift. Die twee werden door elkaar gehaald, waardoor gewone
       alinea's lichter uitvielen dan dezelfde tekst binnen een blok. */
    color: var(--tns-grijs, #414246);
}

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

a {
    color: var(--tns-secondary);
    text-decoration: none;
    transition: color var(--tns-transition);
}

a:hover {
    color: var(--tns-secondary-light);
}

strong, b {
    font-weight: 600;
}

/* ===================================
   LAYOUT & CONTAINERS
   =================================== */
.site-content {
    padding-top: 0;
}

.container {
    max-width: var(--tns-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--tns-gutter);
    padding-right: var(--tns-gutter);
}

.container-wide {
    max-width: var(--tns-container-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--tns-gutter);
    padding-right: var(--tns-gutter);
}

/* Gutenberg Alignment Support */
.alignwide {
    max-width: var(--tns-container-wide);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ── Content breedte-controle ──────────────────────────────────────────────
   WordPress genereert layout-CSS voor .wp-block-post-content op basis van
   theme.json contentSize / wideSize. Hier vullen we dat aan voor het geval
   WordPress het niet automatisch genereert (bijv. bij cached output).
   ─────────────────────────────────────────────────────────────────────── */

.entry-content > *:not(.alignwide):not(.alignfull),
.wp-block-post-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright) {
    max-width: var(--tns-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--tns-gutter);
    padding-right: var(--tns-gutter);
}

.entry-content > .alignwide,
.wp-block-post-content > .alignwide {
    max-width: var(--tns-container-wide);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--tns-gutter);
    padding-right: var(--tns-gutter);
}

/* Full-width blokken doorbreken de container */
.entry-content > .alignfull,
.wp-block-post-content > .alignfull,
.entry-content > .full-width-breakout,
.wp-block-post-content > .full-width-breakout {
    max-width: none !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0;
    padding-right: 0;
}

/* ===================================
   HEADER & NAVIGATION - GLASS DESIGN
   =================================== */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 1rem 2rem;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    max-width: var(--tns-container-wide);
    width: 100%;
    pointer-events: auto;
}

/* Branding */
.site-branding {
    position: absolute;
    left: var(--tns-header-gutter);
    top: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 200;
    pointer-events: auto;
}

/* Toggle gespiegeld aan logo */
.header-menu-toggle-wrap {
    position: fixed;
    right: var(--tns-header-gutter);
    top: 1rem;
    height: 65px;
    display: flex;
    align-items: center;
    z-index: 1100;
    pointer-events: auto;
}

@media (max-width: 1024px) {
    .header-menu-toggle-wrap { display: none; }
}

.site-branding a {
    display: flex;
    align-items: center;
}

.site-branding img,
.custom-logo {
    max-height: 65px;
    width: auto;
    transition: all var(--tns-transition);
}

.site-logo {
    font-family: var(--tns-font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--tns-blauw);
    letter-spacing: -0.02em;
    transition: color var(--tns-transition);
}

.site-logo:hover {
    color: var(--tns-oker);
}

/* Glass Navigation Pill */
.main-navigation {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--tns-radius-full);
    padding: 0.5rem 0.75rem;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1),
                0 1px 3px rgba(0, 0, 0, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Nav Menu */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    align-items: center;
}

.nav-menu > li {
    position: relative;
}

.nav-menu > li > a {
    font-family: 'Helvetica Now Display', 'Helvetica Now', 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--tns-grijs);
    padding: 0.75rem 1.25rem;
    border-radius: var(--tns-radius-full);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all var(--tns-transition);
    position: relative;
    cursor: pointer;
}
/* Chevron op sub-menu items (hidden, wordt door menu-style CSS geregeld) */
.nav-menu > li.pill.menu-item-has-children > a::after-DISABLED {
    content: '';
    width: 6px; height: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    opacity: 0.5;
    transition: transform 0.25s ease, opacity 0.25s ease;
    flex-shrink: 0;
}


.nav-menu > li > a:hover,
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current_page_item > a,
.nav-menu > li.current-menu-ancestor > a,
.nav-menu > li.current-menu-parent > a,
.nav-menu > li.current_page_ancestor > a,
.nav-menu > li.current_page_parent > a {
    background: rgba(16, 47, 73, 0.08);
    color: var(--tns-blauw);
}

/* Dropdown arrow - desktop only, scoped via min-width */

/* Indicator dot for active dropdown - desktop only */

/* ===================================
   MEGA MENU / DROPDOWN
   =================================== */

/* ── Basis (mobiel / fallback) ─────────────────────────── */
.nav-menu .sub-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 220px;
    background: #102F49;
    border-radius: 12px;
    box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.5),
                0 8px 24px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(191, 164, 106, 0.2);
    padding: 0.625rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.22s;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    pointer-events: none;
    z-index: 9999;
}

/* Hover bridge */
.nav-menu > li.menu-item-has-children::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 0.75rem;
}

/* Geen pijltje nodig — paneel spreekt voor zich */
.nav-menu .sub-menu::before { display: none; }
.nav-menu .sub-menu::after  { display: none; }

.nav-menu > li:hover > .sub-menu,
.nav-menu > li.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.nav-menu .sub-menu li { list-style: none; }

.nav-menu .sub-menu a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.6rem 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    font-weight: 450;
    border-radius: 8px;
    transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
    position: relative;
    white-space: nowrap;
}

.nav-menu .sub-menu a::before {
    content: '';
    width: 4px;
    height: 4px;
    border-right: 1.5px solid var(--tns-oker);
    border-top: 1.5px solid var(--tns-oker);
    transform: rotate(45deg);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.nav-menu .sub-menu a:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    padding-left: 1rem;
    transform: none;
}

.nav-menu .sub-menu a:hover::before {
    opacity: 1;
    transform: rotate(45deg) translate(1px, -1px);
}

/* Active item */
.nav-menu .sub-menu .current-menu-item > a,
.nav-menu .sub-menu .current_page_item > a {
    color: var(--tns-oker);
    background: rgba(191, 164, 106, 0.08);
}
.nav-menu .sub-menu .current-menu-item > a::before,
.nav-menu .sub-menu .current_page_item > a::before { opacity: 1; }


/* ── Desktop MEGA MENU ─────────────────────────────────── */
@media (min-width: 1025px) {

    /* Breed donker paneel */
    .nav-menu .sub-menu {
        min-width: 460px;
        max-width: 560px;
        padding: 1.5rem 1.25rem 0.75rem;
        border-radius: 0 0 14px 14px;
        border-top: 2px solid var(--tns-oker);
        border-left: none;
        border-right: none;
        border-bottom: none;
        box-shadow: 0 32px 56px -12px rgba(0, 0, 0, 0.45),
                    0 0 0 1px rgba(191, 164, 106, 0.15);

        /* Goud-strip bovenaan via gradient */
        background: linear-gradient(
            180deg,
            rgba(191, 164, 106, 0.06) 0%,
            #102F49 60px
        );

        /* 2-koloms grid voor alle items */
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
        gap: 0.1rem 0.5rem;
    }

    /* Sectionlabel bovenaan het panel via ::before op het ul-element */
    .nav-menu .sub-menu::before {
        display: block;
        content: attr(aria-label);
        grid-column: 1 / -1;
        font-size: 0.5625rem;
        font-weight: 700;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--tns-oker);
        margin-bottom: 0.875rem;
        padding-left: 0.75rem;
        position: static;
        transform: none;
        border: none;
        background: none;
        top: auto;
        left: auto;
        pointer-events: none;
    }

    /* Hover bridge wat groter */
    .nav-menu > li.menu-item-has-children::after { height: 0.5rem; }

    /* Link in grid */
    .nav-menu .sub-menu a {
        padding: 0.625rem 0.875rem;
        font-size: 0.875rem;
        border-radius: 8px;
        white-space: normal;
    }

    /* Separator-lijn onderaan het panel */
    .nav-menu .sub-menu::after {
        content: '';
        display: block;
        grid-column: 1 / -1;
        height: 1px;
        background: rgba(255, 255, 255, 0.07);
        margin: 0.5rem 0 0;
    }

    /* Rechts uitlijnen voor items aan de rechterkant van de nav */
    .nav-menu > li:nth-last-child(-n+2) > .sub-menu {
        left: auto;
        right: 0;
        transform: translateY(8px);
    }
    .nav-menu > li:nth-last-child(-n+2):hover > .sub-menu,
    .nav-menu > li:nth-last-child(-n+2).is-open > .sub-menu {
        left: auto;
        right: 0;
        transform: translateY(0);
    }
}

/* CTA Button in Menu */
.nav-menu > li.nav-cta > a {
    background: var(--tns-blauw);
    color: white;
    padding: 0.75rem 1.5rem;
}

.nav-menu > li.nav-cta > a:hover {
    background: var(--tns-blauw-light);
    color: white;
}

/* ================================================
   TNS MEGA PANEL
   JS-gestuurd tweepaneel (optioneel drie met foto).
   site-header heeft position:relative nodig.
   ================================================ */

/* Sub-menu hover op desktop uitschakelen — JS panel neemt over */
/* Geen position: relative op site-header — die is al position: absolute */
@media (min-width: 1025px) {
    .nav-menu .sub-menu { display: none !important; }
}

/* ── Container ──────────────────────────────────────────── */
.tns-mega-panel {
    position: absolute;
    top: calc(100% - 0.5rem);   /* iets overlap met header voor vloeiende aansluiting */
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    width: min(1000px, 96vw);

    display: grid;
    grid-template-columns: 200px 1fr;   /* 2 kolommen standaard */

    /* Licht paneel — steekt af tegen de donkere hero */
    background: #ffffff;
    border-radius: 16px;
    border: none;
    box-shadow: 0 8px 12px -4px rgba(0, 0, 0, 0.08),
                0 24px 48px -8px rgba(0, 0, 0, 0.18),
                0 0 0 1px rgba(0, 0, 0, 0.06);
    overflow: hidden;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0.22s;
    z-index: 9999;
}

.tns-mega-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0s linear 0s;
}

/* Met foto: voeg derde kolom toe */
.tns-mega-panel.has-photo {
    grid-template-columns: 200px 1fr 240px;
}

/* ── Rail (linker nav-kolom) ────────────────────────────── */
.tns-mega-rail {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 1.25rem 0.75rem;
    background: var(--tns-blauw);  /* navy — default */
    border-right: none;
}

/* ── Stijl: Sage ────────────────────────────── */
.tns-mega-panel[data-rail="sage"] .tns-mega-rail {
    background: #828673;
}

.tns-mega-panel[data-rail="sage"] .tns-mega-rail-btn {
    color: rgba(255, 255, 255, 0.6);
}

.tns-mega-panel[data-rail="sage"] .tns-mega-rail-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.tns-mega-panel[data-rail="sage"] .tns-mega-rail-btn.is-active {
    background: rgba(191, 164, 106, 0.2);
    color: #fff;
}

/* ── Stijl: Goud ────────────────────────────── */
.tns-mega-panel[data-rail="gold"] .tns-mega-rail {
    background: #BFA46A;
}

.tns-mega-panel[data-rail="gold"] .tns-mega-rail::before {
    color: rgba(16, 47, 73, 0.4);
}

.tns-mega-panel[data-rail="gold"] .tns-mega-rail-btn {
    color: rgba(16, 47, 73, 0.65);
}

.tns-mega-panel[data-rail="gold"] .tns-mega-rail-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--tns-blauw);
}

.tns-mega-panel[data-rail="gold"] .tns-mega-rail-btn.is-active {
    background: rgba(16, 47, 73, 0.12);
    color: var(--tns-blauw);
}

/* ── Stijl: Grijs ───────────────────────────── */
.tns-mega-panel[data-rail="gray"] .tns-mega-rail {
    background: #414246;
}

.tns-mega-panel[data-rail="gray"] .tns-mega-rail-btn {
    color: rgba(255, 255, 255, 0.52);
}

.tns-mega-panel[data-rail="gray"] .tns-mega-rail-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.tns-mega-panel[data-rail="gray"] .tns-mega-rail-btn.is-active {
    background: rgba(191, 164, 106, 0.15);
    color: var(--tns-oker);
}


.tns-mega-panel[data-rail="light"] .tns-mega-rail {
    background: #f4f5f6;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.tns-mega-panel[data-rail="light"] .tns-mega-rail::before {
    color: rgba(16, 47, 73, 0.3);
}

.tns-mega-panel[data-rail="light"] .tns-mega-rail-btn {
    color: rgba(16, 47, 73, 0.55);
}

.tns-mega-panel[data-rail="light"] .tns-mega-rail-btn:hover {
    background: rgba(16, 47, 73, 0.06);
    color: var(--tns-blauw);
}

.tns-mega-panel[data-rail="light"] .tns-mega-rail-btn.is-active {
    background: rgba(191, 164, 106, 0.15);
    color: var(--tns-blauw);
}

.tns-mega-panel[data-rail="light"] .tns-mega-rail-btn.is-active .tmrb-desc {
    color: rgba(16, 47, 73, 0.45);
}

.tns-mega-panel[data-rail="light"] .tmrb-arrow {
    opacity: 0.25;
}

.tns-mega-panel[data-rail="light"] .tns-mega-rail-btn.is-active .tmrb-arrow,
.tns-mega-panel[data-rail="light"] .tns-mega-rail-btn:hover .tmrb-arrow {
    opacity: 0.7;
}

/* ── Stijl: Glazen (frosted glass) ─────────── */
.tns-mega-panel[data-rail="glass"] .tns-mega-rail {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
}

.tns-mega-panel[data-rail="glass"] .tns-mega-rail::before {
    color: rgba(16, 47, 73, 0.3);
}

.tns-mega-panel[data-rail="glass"] .tns-mega-rail-btn {
    color: rgba(16, 47, 73, 0.6);
}

.tns-mega-panel[data-rail="glass"] .tns-mega-rail-btn:hover {
    background: rgba(255, 255, 255, 0.5);
    color: var(--tns-blauw);
}

.tns-mega-panel[data-rail="glass"] .tns-mega-rail-btn.is-active {
    background: rgba(191, 164, 106, 0.15);
    color: var(--tns-blauw);
}

.tns-mega-panel[data-rail="glass"] .tmrb-arrow {
    opacity: 0.25;
}

.tns-mega-panel[data-rail="glass"] .tns-mega-rail-btn.is-active .tmrb-arrow,
.tns-mega-panel[data-rail="glass"] .tns-mega-rail-btn:hover .tmrb-arrow {
    opacity: 0.7;
}

/* Glass: panel zelf ook semi-transparant */
.tns-mega-panel[data-rail="glass"] {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* Eyebrow label boven de rail */
.tns-mega-rail::before {
    content: 'MENU';
    display: block;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.28);
    text-transform: uppercase;
    padding: 0 0.875rem;
    margin-bottom: 0.75rem;
}

.tns-mega-rail-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.875rem;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

/* Inner wrapper voor naam + beschrijving */
.tmrb-inner {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.tmrb-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tmrb-desc {
    font-size: 0.6875rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.15s ease;
}

.tns-mega-rail-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

.tns-mega-rail-btn:hover .tmrb-desc {
    color: rgba(255, 255, 255, 0.5);
}

.tns-mega-rail-btn.is-active {
    background: rgba(191, 164, 106, 0.15);
    color: var(--tns-oker);
}

.tns-mega-rail-btn.is-active .tmrb-desc {
    color: rgba(191, 164, 106, 0.55);
}

.tmrb-arrow {
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.3;
    flex-shrink: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.tns-mega-rail-btn:hover .tmrb-arrow,
.tns-mega-rail-btn.is-active .tmrb-arrow {
    opacity: 1;
    transform: translateX(2px);
}

/* ── Body (sub-items kolom, midden) ─────────────────────── */
.tns-mega-body {
    padding: 1.25rem 1.25rem 1rem;
    display: flex;
    align-items: flex-start;
    background: #ffffff;
}

.tns-mega-subs {
    display: none;
    width: 100%;
    opacity: 0;
    animation: tns-mega-fadein 0.18s ease forwards;
}

@keyframes tns-mega-fadein {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tns-mega-subs.is-active {
    display: block;
}

/* Sectie-label boven grid */
.tns-mega-subs-label {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tns-oker);
    margin: 0 0 0.75rem;
}

/* 2-koloms grid — compacter */
.tns-mega-subs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.05rem 0.5rem;
    align-content: start;
}

/* Sub-links */
.tns-mega-sub-a {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.625rem;
    border-radius: 6px;
    color: #4a4e57;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, gap 0.15s ease;
    min-width: 0; /* laat flex-item krimpen */
    overflow: hidden;
}

/* Tekst-span: ellipsis bij overflow */
.tmsa-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: 0;
}

.tns-mega-sub-a:hover {
    background: rgba(16, 47, 73, 0.05);
    color: var(--tns-blauw);
    gap: 0.55rem;
}

.tns-mega-sub-a.is-current {
    color: var(--tns-blauw);
    font-weight: 600;
}

/* Chevron — altijd zichtbaar, goud bij hover */
.tmsa-dot {
    content: '›';
    font-size: 0.875rem;
    line-height: 1;
    color: rgba(16, 47, 73, 0.2);
    flex-shrink: 0;
    transition: color 0.15s ease, transform 0.15s ease;
}

.tns-mega-sub-a:hover .tmsa-dot {
    color: var(--tns-oker);
    transform: translateX(1px);
}

.tns-mega-sub-a.is-current .tmsa-dot {
    color: var(--tns-oker);
}

/* "Bekijk alles →" CTA onderaan de sub-items */
.tns-mega-subs-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 1rem;
    padding: 0.4rem 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tns-blauw);
    text-decoration: none;
    opacity: 0.7;
    border-bottom: 1px solid transparent;
    transition: opacity 0.15s ease, border-color 0.15s ease, gap 0.15s ease;
}

.tns-mega-subs-cta:hover {
    opacity: 1;
    border-bottom-color: var(--tns-oker);
    gap: 0.6rem;
}

.tns-mega-subs-cta::after {
    content: '→';
    font-size: 0.875em;
}

/* ── Featured kaart (body zonder sub-items) ──────────────── */
.tns-mega-featured {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    width: 100%;
}

/* Optionele beschrijvingstekst */
.tmf-desc {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0 0 1rem;
    max-width: 32ch;
    line-height: 1.5;
}


.tns-mega-visual {
    position: relative;
    overflow: hidden;
    min-height: 0;
}

.tns-mega-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    transition: opacity 0.5s ease;
}

.tns-mega-img-a { opacity: 1; z-index: 1; }
.tns-mega-img-b { opacity: 0; z-index: 2; }

/* Gradient overlay links voor overgang naar body */
.tns-mega-vis-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(90deg, rgba(255,255,255,0.15) 0%, transparent 50%);
}

/* Caption linksonder in foto */
.tns-mega-vis-caption {
    position: absolute;
    bottom: 1.25rem;
    left: 1rem;
    z-index: 4;
}

.tns-mega-vis-eyebrow {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tns-oker);
    margin-bottom: 0.25rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.tns-mega-vis-label {
    font-family: var(--tns-font-heading);
    font-size: 1.125rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}



/* ===================================
   HEADER CTA BUTTON
   =================================== */
/* ── Header CTA wrapper (voor badge-positionering) ── */
.header-cta-wrap {
    display: none;
    position: relative;
    pointer-events: auto;
}

@media (min-width: 1025px) {
    .header-cta-wrap {
        display: inline-flex;
        align-items: center;
    }
}

.header-cta {
    display: inline-flex;
    align-items: center;
    font-family: var(--tns-font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    background: #22c55e; /* helder groen */
    padding: 0.75rem 1.5rem;
    border-radius: var(--tns-radius-full);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--tns-transition);
    pointer-events: auto;
}

.header-cta:hover {
    background: #16a34a;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.45);
}

/* Notificatie-badge */
.header-cta-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: white;
    font-family: var(--tns-font-body);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    pointer-events: none;
    animation: tns-badge-pulse 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes tns-badge-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.08); }
}

/* ===================================
   DESKTOP HYBRID MENU - "More" hamburger top-right
   Items 5+ hidden in pill, hamburger opens full overlay
   =================================== */
@media (min-width: 1025px) {
    /* Desktop dropdown arrow */
    .nav-menu > li.menu-item-has-children > a::after {
        content: '';
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid currentColor;
        transition: transform var(--tns-transition);
    }
    
    .nav-menu > li.menu-item-has-children:hover > a::after {
        transform: rotate(180deg);
    }
    
    /* MENU PILL SYSTEEM:
       Voeg CSS-klasse "pill" toe aan menu-items via:
       WP Admin → Weergave → Menu's → Schermopties (rechtsboven) → CSS-klassen aanzetten
       → dan per menu-item de klasse "pill" invullen.

       Items MÉT .pill  → zichtbaar in de glazen pill bovenaan
       Items ZÓNDER .pill → alleen in het hamburger-overlay menu
       Geen enkel item heeft "pill" → max 5 items zichtbaar als fallback */

    /* Fallback: als geen .pill items, verberg items 6+ */
    .nav-menu:not(:has(> li.pill)) > li:nth-child(n+5) {
        display: none;
    }

    /* Normaal systeem: verberg items zonder .pill als er WEL .pill items zijn */
    .nav-menu:has(> li.pill) > li:not(.pill) {
        display: none;
    }
    
    /* Desktop hamburger button - standalone top-right */
    .desktop-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        background: var(--tns-oker);
        border: none;
        border-radius: var(--tns-radius-full);
        cursor: pointer;
        position: fixed;
        top: 1rem;
        right: 2rem;
        z-index: 1002;
        pointer-events: auto;
        transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                    background 0.3s ease;
    }
    
    .desktop-menu-toggle:hover {
        transform: scale(1.08);
    }
    
    .desktop-menu-toggle:active {
        transform: scale(0.95);
    }
    
    .desktop-menu-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        background: white;
        position: absolute;
        left: 50%;
        border-radius: 2px;
        transition: all 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    }
    
    .desktop-menu-toggle span:nth-child(1) {
        top: 20px;
        transform: translateX(-50%);
    }
    
    .desktop-menu-toggle span:nth-child(2) {
        top: 27px;
        transform: translateX(-50%);
        width: 16px;
    }
    
    .desktop-menu-toggle span:nth-child(3) {
        top: 34px;
        transform: translateX(-50%);
        width: 19px;
    }
    
    /* Active state - morphs to X */
    .desktop-menu-toggle.active {
        background: transparent;
    }
    
    .desktop-menu-toggle.active span {
        background: white;
        width: 24px;
    }
    
    .desktop-menu-toggle.active span:nth-child(1) {
        top: 27px;
        transform: translateX(-50%) rotate(45deg);
    }
    
    .desktop-menu-toggle.active span:nth-child(2) {
        opacity: 0;
        width: 0;
        transform: translateX(-50%) translateX(20px);
    }
    
    .desktop-menu-toggle.active span:nth-child(3) {
        top: 27px;
        transform: translateX(-50%) rotate(-45deg);
    }
    
    /* When overlay is open, show ALL items in the fullscreen menu */
    .main-navigation.desktop-overlay-active .nav-menu > li:not(.pill) {
        display: block;
    }
}

/* Hide desktop toggle on mobile/tablet (mobile has its own hamburger) */
@media (max-width: 1024px) {
    .desktop-menu-toggle {
        display: none !important;
    }
}


/* ══════════════════════════════════════════════════════
   STANDAARD OVERLAY ANIMATIE (geen menu-style class nodig)
   ══════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

    /* Overlay opent als fullscreen paneel dat van onder inschuift */
    .main-navigation.desktop-overlay-active {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        border-radius: 0 !important;
        background: radial-gradient(ellipse at 50% 100%, #1a4a6e 0%, #102f49 50%, #0a1f30 100%) !important;
        backdrop-filter: blur(24px) !important;
        -webkit-backdrop-filter: blur(24px) !important;
        padding: 5.5rem 2rem 2rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 999 !important;
        box-shadow: none !important;
        border: none !important;
        /* Inschuif animatie van onderaf */
        animation: tns-overlay-in 0.55s cubic-bezier(0.4, 0, 0.15, 1) forwards;
    }

    @keyframes tns-overlay-in {
        from { transform: translateY(100%); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    .main-navigation.desktop-overlay-closing {
        animation: tns-overlay-out 0.45s cubic-bezier(0.4, 0, 0.15, 1) forwards !important;
    }

    @keyframes tns-overlay-out {
        from { transform: translateY(0);    opacity: 1; }
        to   { transform: translateY(100%); opacity: 0; }
    }

    /* Nav-items zichtbaar in overlay */
    .main-navigation.desktop-overlay-active .nav-menu {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 700px !important;
        padding: 2rem !important;
        margin: auto !important;
    }

    /* Toon verborgen items in overlay */
    .main-navigation.desktop-overlay-active .nav-menu > li {
        display: block !important;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .main-navigation.desktop-overlay-active.items-revealed .nav-menu > li {
        opacity: 1;
        transform: translateY(0);
    }
    .main-navigation.desktop-overlay-active.items-revealed .nav-menu > li:nth-child(1) { transition-delay: 0.20s; }
    .main-navigation.desktop-overlay-active.items-revealed .nav-menu > li:nth-child(2) { transition-delay: 0.27s; }
    .main-navigation.desktop-overlay-active.items-revealed .nav-menu > li:nth-child(3) { transition-delay: 0.34s; }
    .main-navigation.desktop-overlay-active.items-revealed .nav-menu > li:nth-child(4) { transition-delay: 0.41s; }
    .main-navigation.desktop-overlay-active.items-revealed .nav-menu > li:nth-child(5) { transition-delay: 0.48s; }
    .main-navigation.desktop-overlay-active.items-revealed .nav-menu > li:nth-child(6) { transition-delay: 0.55s; }
    .main-navigation.desktop-overlay-active.items-revealed .nav-menu > li:nth-child(7) { transition-delay: 0.62s; }
    .main-navigation.desktop-overlay-active.items-revealed .nav-menu > li:nth-child(8) { transition-delay: 0.69s; }

    .main-navigation.desktop-overlay-active .nav-menu > li > a {
        font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
        font-weight: 700 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        padding: 0.5rem 2rem !important;
        text-align: center !important;
        justify-content: center !important;
        background: transparent !important;
        border-radius: 0 !important;
        width: 100%;
    }
    .main-navigation.desktop-overlay-active .nav-menu > li > a:hover {
        color: #BFA46A !important;
        background: transparent !important;
    }

    /* pill-toggle-wrap verborgen zodra overlay de pill bedekt */
    .main-navigation.desktop-overlay-active .pill-toggle-wrap {
        display: none !important;
    }
}
/* ══════════════════════════════════════════════════════
   PILL TOGGLE — gouden cirkel in de nav pill
   Identiek aan de vroegere rechtsboven toggle
   ══════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

    /* Verberg de losstaande desktop toggle (nu in pill) */
    .desktop-menu-toggle:not(.pill-toggle) {
        display: none !important;
    }

    /* De toggle zit AAN HET EINDE van de pill — iOS schuif-stijl */
    .pill-toggle {
        width: 56px;
        height: 30px;
        flex-shrink: 0;
        margin-left: 0.75rem;
        background: rgba(16, 47, 73, 0.10);
        border: 2px solid rgba(16, 47, 73, 0.30);
        border-radius: 999px;
        cursor: pointer;
        position: relative;
        transition: background 0.3s ease, border-color 0.3s ease;
        overflow: hidden; /* clip de knob zodat hij niet buiten valt */
    }
    .pill-toggle:hover {
        background: rgba(16, 47, 73, 0.18);
        border-color: rgba(16, 47, 73, 0.5);
    }
    /* Verberg de bars — we gebruiken alleen de knob via ::after */
    .pill-toggle__bar { display: none; }

    /* Separator via wrapper — apart van de pseudo-elementen */
    .pill-toggle-wrap {
        display: none; /* toggle zit nu los buiten de nav */
    }

    /* ── Standalone gouden menu toggle ── (positie via global CSS) */

    .header-menu-toggle {
        width: 48px;
        height: 48px;
        padding: 0;
        border: none;
        border-radius: 50%;
        /* Gevuld vlak, zodat de knop ook boven een lichte sectie leesbaar blijft */
        background: #102F49;
        box-shadow: 0 4px 16px rgba(16, 47, 73, 0.22);
        cursor: pointer;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: background 0.3s ease;
        flex-shrink: 0;
    }
    .header-menu-toggle:hover {
        background: #1a4060;
    }
    .header-menu-toggle:focus-visible {
        outline: 2px solid #BFA46A;
        outline-offset: 3px;
    }
    .header-menu-toggle__bar {
        display: block;
        width: 24px;
        height: 2px;
        border-radius: 2px;
        background: #ffffff;
        transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
                    opacity 0.2s ease,
                    width 0.3s ease;
    }
    /* Middelste streep korter en rechts uitgelijnd — klein detail in de huisstijl */
    .header-menu-toggle__bar:nth-child(2) {
        width: 16px;
        align-self: flex-end;
        margin-right: 12px;
    }
    .header-menu-toggle:hover .header-menu-toggle__bar:nth-child(2) {
        width: 24px;
        margin-right: 12px;
    }
    /* Open: het menu is zelf navy, dus het vlak mag weg en het kruis wordt goud */
    .header-menu-toggle.active { background: transparent; box-shadow: none; }
    .header-menu-toggle.active .header-menu-toggle__bar { background: #BFA46A; }

    /* Open: de strepen vormen een kruis */
    .header-menu-toggle.active .header-menu-toggle__bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .header-menu-toggle.active .header-menu-toggle__bar:nth-child(2) {
        opacity: 0;
        transform: scaleX(0.2);
    }
    .header-menu-toggle.active .header-menu-toggle__bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
    @media (prefers-reduced-motion: reduce) {
        .header-menu-toggle__bar { transition: none; }
    }

    /* Knob — ::before = track-bg hint, ::after = de schuivende knob */
    .pill-toggle::after {
        content: '';
        position: absolute;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #102F49;
        top: 50%;
        left: 2px;
        transform: translateY(-50%);
        transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    background 0.4s ease;
        box-shadow: 0 1px 4px rgba(0,0,0,0.25);
        will-change: left;
    }

    /* Active state: knob naar rechts + goud */
    .pill-toggle.active {
        background: rgba(191, 164, 106, 0.15);
        border-color: #BFA46A;
    }
    .pill-toggle.active::after {
        left: calc(100% - 24px);
        background: #BFA46A;
    }
}

@media (max-width: 1024px) {
    .pill-toggle { display: none !important; }
}
/* ===================================
   MOBILE MENU TOGGLE - WEBFLOW STYLE
   =================================== */
/* ===================================
   MOBILE MENU TOGGLE — iOS switch stijl
   =================================== */
/* Mobiele menuknop — zelfde hamburger als op desktop */
.menu-toggle {
    display: none;
    width: 46px;
    height: 46px;
    padding: 0;
    border: none;
    border-radius: 50%;
    /* Gevuld vlak in plaats van losse streepjes: zo blijft de knop leesbaar
       boven een foto, boven de navy hero én boven een crème sectie. */
    background: #102F49;
    box-shadow: 0 4px 16px rgba(16, 47, 73, 0.22);
    cursor: pointer;
    position: fixed;
    /* Zelfde marge als het logo en de herotekst */
    right: var(--tns-header-gutter, 1.5rem);
    /* Het logo staat in een band van 65px die op 1rem begint. Deze knop is
       46px hoog, dus die zetten we in diezelfde band gecentreerd. Anders
       springt hij omhoog zodra de desktopknop op 1024px wordt vervangen. */
    top: calc(1rem + (65px - 46px) / 2);
    z-index: 1002;
    overflow: visible;
    transition: background 0.3s ease;
    pointer-events: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.menu-toggle:hover {
    background: #1a4060;
}

.menu-toggle:focus-visible {
    outline: 2px solid var(--tns-oker);
    outline-offset: 3px;
}

.menu-toggle:active {
    transform: none;
}

/* De drie streepjes. Wit met een zachte schaduw, zodat ze ook boven een
   foto leesbaar blijven; goud zodra het menu open staat. */
.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: #ffffff;
    transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
                opacity 0.2s ease,
                width 0.3s ease,
                background 0.3s ease;
}
.menu-toggle span:nth-child(2) {
    width: 16px;
    align-self: flex-end;
    margin-right: 11px;
}

/* Open: het menu is zelf navy, dus het vlak mag weg en het kruis wordt goud */
.menu-toggle.active { background: transparent; box-shadow: none; }
.menu-toggle.active span { background: var(--tns-oker); }
.menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
    .menu-toggle span { transition: none; }
}


/* ===================================
   BUTTONS
   =================================== */
.btn,
.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    font-family: var(--tns-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border-radius: var(--tns-radius-full);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--tns-transition);
}

.btn-primary,
.wp-block-button__link {
    background: var(--tns-secondary);
    color: var(--tns-white);
    border-color: var(--tns-secondary);
}

.btn-primary:hover,
.wp-block-button__link:hover {
    background: var(--tns-secondary-light);
    border-color: var(--tns-secondary-light);
    color: var(--tns-white);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(191, 164, 106, 0.4);
}

.btn-secondary {
    background: var(--tns-accent);
    color: var(--tns-black);
    border-color: var(--tns-accent);
}

.btn-secondary:hover {
    background: var(--tns-accent-light);
    border-color: var(--tns-accent-light);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(130, 134, 115, 0.4);
}

.btn-outline,
.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--tns-black);
    border-color: var(--tns-black);
}

.btn-outline:hover,
.is-style-outline .wp-block-button__link:hover {
    background: var(--tns-black);
    color: var(--tns-white);
    transform: translateY(-3px);
}

.btn-white {
    background: var(--tns-white);
    color: var(--tns-black);
    border-color: var(--tns-white);
}

.btn-white:hover {
    background: var(--tns-off-white);
    border-color: var(--tns-off-white);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}

/* ===================================
   IMAGES & MEDIA
   =================================== */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

figure {
    margin: 0;
}

.wp-block-image {
    margin: 2rem 0;
}

.wp-block-image img {
    border-radius: var(--tns-radius);
}

.wp-block-image.is-style-rounded img {
    border-radius: var(--tns-radius-full);
}

/* Video Container */
.wp-block-video video,
.wp-block-embed iframe {
    border-radius: var(--tns-radius);
    width: 100%;
}

/* ===================================
   GUTENBERG BLOCKS STYLING
   =================================== */

/* Group Block */
.wp-block-group {
    margin-bottom: 0;
}

.wp-block-group.has-background {
    padding: var(--tns-section-spacing) var(--tns-gutter);
}

/* Columns */
.wp-block-columns {
    gap: 2rem;
    margin-bottom: 2rem;
}

/* Quote */
.wp-block-quote {
    border-left: 4px solid var(--tns-secondary);
    padding-left: 2rem;
    margin: 2rem 0;
    font-style: italic;
}

.wp-block-quote p {
    font-size: 1.25rem;
    color: var(--tns-dark-gray);
}

/* Bijschrift bij een citaat mag lichter blijven dan de lopende tekst */
.wp-block-quote cite {
    display: block;
    margin-top: 1rem;
    font-size: 0.875rem;
    font-style: normal;
    color: var(--tns-gray);
}

/* Separator */
.wp-block-separator {
    border: none;
    border-top: 2px solid var(--tns-light-gray);
    margin: 3rem auto;
    max-width: 100px;
}

.wp-block-separator.is-style-wide {
    max-width: var(--tns-container);
}

/* Spacer */
.wp-block-spacer {
    margin: 0 !important;
}

/* ===================================
   COVER BLOCK
   =================================== */
.wp-block-cover {
    position: relative;
    background-size: cover;
    background-position: center;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.wp-block-cover__image-background,
.wp-block-cover__video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.wp-block-cover__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--tns-container);
    padding: var(--tns-gutter);
}

/* Cover alignment support */
.wp-block-cover.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Hero Cover (full viewport) */
/* ===================================
   HERO STICKY WRAPPER
   =================================== */
.hero-sticky-wrapper {
    position: relative;
    /* Hoogte wordt door JS gezet */
}

.wp-block-cover.hero-cover {
    min-height: 100vh;
    position: sticky;
    top: 0;
    z-index: 1;
    overflow: hidden;
    /* GSAP will handle transforms */
    will-change: transform, border-radius;
}

/* Content na hero wrapper scrollt erover heen */
.hero-sticky-wrapper + * {
    position: relative;
    z-index: 2;
}

/* ===================================
   HERO SCROLL INDICATOR (Bouncing Arrow)
   =================================== */
.hero-scroll-indicator {
    position: absolute;
    bottom: 75px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    z-index: 100;
    cursor: pointer;
    pointer-events: auto;
}

.hero-scroll-indicator__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.3s ease, border-color 0.3s ease;
    pointer-events: auto;
}

.hero-scroll-indicator__arrow:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: #ffffff;
}

.hero-scroll-indicator__arrow svg {
    width: 24px;
    height: 24px;
    stroke: #ffffff;
    fill: none;
    stroke-width: 2;
}

/* Fallback bounce animation (when GSAP not loaded) */
@keyframes heroBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(12px); }
}

.hero-scroll-indicator__arrow.css-bounce {
    animation: heroBounce 2s ease-in-out infinite;
}

/* Responsive scroll indicator */
@media (max-width: 768px) {
    .hero-scroll-indicator {
        bottom: 30px;
    }
    .hero-scroll-indicator__arrow {
        width: 46px;
        height: 46px;
    }
    .hero-scroll-indicator__arrow svg {
        width: 22px;
        height: 22px;
    }
	main#main-content {
    padding: 0 28px 0 28px;
}
}

@media (max-width: 480px) {
    .hero-scroll-indicator {
        bottom: 24px;
    }
    .hero-scroll-indicator__arrow {
        width: 42px;
        height: 42px;
    }
    .hero-scroll-indicator__arrow svg {
        width: 20px;
        height: 20px;
    }
}

/* Overlay Opacity Levels */
.wp-block-cover__background.has-background-dim { opacity: 0.5; }
.wp-block-cover__background.has-background-dim-0 { opacity: 0; }
.wp-block-cover__background.has-background-dim-10 { opacity: 0.1; }
.wp-block-cover__background.has-background-dim-20 { opacity: 0.2; }
.wp-block-cover__background.has-background-dim-30 { opacity: 0.3; }
.wp-block-cover__background.has-background-dim-40 { opacity: 0.4; }
.wp-block-cover__background.has-background-dim-50 { opacity: 0.5; }
.wp-block-cover__background.has-background-dim-60 { opacity: 0.6; }
.wp-block-cover__background.has-background-dim-70 { opacity: 0.7; }
.wp-block-cover__background.has-background-dim-80 { opacity: 0.8; }
.wp-block-cover__background.has-background-dim-90 { opacity: 0.9; }
.wp-block-cover__background.has-background-dim-100 { opacity: 1; }

/* ===================================
   CHILD PAGES OVERVIEW
   Auto-generated grid for empty parent pages
   =================================== */
.tns-child-overview {
    padding: clamp(3rem, 6vw, 5rem) 0;
}

.tns-child-overview-header {
    text-align: center;
    margin-bottom: 3rem;
}

.tns-child-overview-header h1 {
    font-family: var(--tns-font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--tns-blauw);
    margin-bottom: 0.75rem;
}

.tns-child-overview-intro {
    font-size: 1.125rem;
    color: var(--tns-grijs);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.tns-child-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.tns-child-card {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: var(--tns-radius-lg);
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tns-child-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.tns-child-card-image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, var(--tns-blauw), #1a4a6e);
}

.tns-child-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.tns-child-card:hover .tns-child-card-image img {
    transform: scale(1.05);
}

.tns-child-card-no-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tns-child-card-no-image span {
    font-family: var(--tns-font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.15);
}

.tns-child-card-content {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.tns-child-card-content h3 {
    font-family: var(--tns-font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--tns-blauw);
    margin: 0;
    line-height: 1.3;
}

.tns-child-card-content p {
    font-size: 0.875rem;
    color: var(--tns-grijs);
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tns-child-card-arrow {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tns-oker);
    margin-top: auto;
    padding-top: 0.5rem;
    transition: transform 0.3s ease;
    display: inline-block;
}

.tns-child-card:hover .tns-child-card-arrow {
    transform: translateX(4px);
}

@media (max-width: 640px) {
    .tns-child-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ===================================
   FOOTER
   =================================== */
.site-footer {
    /* Old footer styles - overridden by .tns-footer */
    background: var(--tns-black);
    color: var(--tns-white);
    padding: var(--tns-section-spacing) var(--tns-gutter) 2rem;
}

.footer-container {
    max-width: var(--tns-container-wide);
    margin: 0 auto;
}

.footer-widgets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-bottom: 4rem;
}

.footer-widget h3 {
    color: var(--tns-white);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.footer-widget p,
.footer-widget a {
    color: var(--tns-gray);
}

.footer-widget a:hover {
    color: var(--tns-secondary);
}

.footer-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-widget ul li {
    margin-bottom: 0.75rem;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--tns-gray);
}

.footer-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.footer-menu a {
    font-size: 0.875rem;
    color: var(--tns-gray);
}

.footer-menu a:hover {
    color: var(--tns-secondary);
}

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

/* Keyframe Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

/* Base state for scroll reveal elements */
.scroll-reveal {
    opacity: 0 !important;
    transform: translateY(40px) !important;
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Revealed state */
.scroll-reveal.revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Scale reveal variant */
.scale-reveal {
    transform: translateY(30px) scale(0.95) !important;
}

.scale-reveal.revealed {
    transform: translateY(0) scale(1) !important;
}

/* Stagger animation for multiple items */
.stagger-item {
    transition-delay: 0s;
}

.stagger-item:nth-child(1) { transition-delay: 0.1s; }
.stagger-item:nth-child(2) { transition-delay: 0.2s; }
.stagger-item:nth-child(3) { transition-delay: 0.3s; }
.stagger-item:nth-child(4) { transition-delay: 0.4s; }
.stagger-item:nth-child(5) { transition-delay: 0.5s; }
.stagger-item:nth-child(6) { transition-delay: 0.6s; }

/* Smooth transitions for all interactive elements */
a, button, .btn, .wp-block-button__link {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Enhanced parallax container */
.wp-block-cover {
    overflow: hidden;
}

/* Parallax */
.wp-block-cover__image-background {
    will-change: transform;
    transition: transform 0.1s ease-out;
}

/* ===================================
   UTILITY CLASSES
   =================================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-white { color: var(--tns-white) !important; }
.text-primary { color: var(--tns-primary) !important; }
.text-secondary { color: var(--tns-secondary) !important; }
.text-accent { color: var(--tns-accent) !important; }

.bg-white { background-color: var(--tns-white) !important; }
.bg-off-white { background-color: var(--tns-off-white) !important; }
.bg-primary { background-color: var(--tns-primary) !important; }
.bg-secondary { background-color: var(--tns-secondary) !important; }
.bg-accent { background-color: var(--tns-accent) !important; }

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

/* ===================================
   DESKTOP FULLSCREEN OVERLAY
   Clean centered design, dramatic hover states
   =================================== */

/* Overlay footer - hidden by default */
.overlay-footer {
    display: none;
}

@media (min-width: 1025px) {
    .main-navigation.desktop-overlay-active {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        background: var(--tns-blauw);
        background: linear-gradient(160deg, #0d2538 0%, var(--tns-blauw) 50%, #162d42 100%);
        border-radius: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        pointer-events: auto;
        backdrop-filter: none;
        box-shadow: none;
        border: none;
        z-index: 1001;
        animation: tns-overlay-slide-down 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
        overflow-y: auto;
    }
    
    @keyframes tns-overlay-slide-down {
        from { transform: translateY(-100%); }
        to { transform: translateY(0); }
    }
    
    .main-navigation.desktop-overlay-closing {
        animation: tns-overlay-slide-up 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    }
    
    @keyframes tns-overlay-slide-up {
        from { transform: translateY(0); }
        to { transform: translateY(-100%); }
    }
    
    /* Menu container - single column, centered */
    .main-navigation.desktop-overlay-active .nav-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        width: 100%;
        max-width: 700px;
        padding: 5.5rem 2rem 1.5rem;
        margin: auto 0;
    }
    
    /* Menu items */
    .main-navigation.desktop-overlay-active .nav-menu > li {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
        width: 100%;
        text-align: center;
        border-bottom: none;
    }
    
    .main-navigation.desktop-overlay-active.items-revealed .nav-menu > li {
        opacity: 1;
        transform: translateY(0);
    }
    
    .main-navigation.desktop-overlay-active.items-revealed .nav-menu > li:nth-child(1) { transition-delay: 0.30s; }
    .main-navigation.desktop-overlay-active.items-revealed .nav-menu > li:nth-child(2) { transition-delay: 0.37s; }
    .main-navigation.desktop-overlay-active.items-revealed .nav-menu > li:nth-child(3) { transition-delay: 0.44s; }
    .main-navigation.desktop-overlay-active.items-revealed .nav-menu > li:nth-child(4) { transition-delay: 0.51s; }
    .main-navigation.desktop-overlay-active.items-revealed .nav-menu > li:nth-child(5) { transition-delay: 0.58s; }
    .main-navigation.desktop-overlay-active.items-revealed .nav-menu > li:nth-child(6) { transition-delay: 0.65s; }
    .main-navigation.desktop-overlay-active.items-revealed .nav-menu > li:nth-child(7) { transition-delay: 0.72s; }
    .main-navigation.desktop-overlay-active.items-revealed .nav-menu > li:nth-child(8) { transition-delay: 0.79s; }
    
    /* Hide counter numbers */
    .main-navigation.desktop-overlay-active .nav-menu > li > a::before {
        display: none;
    }
    
    /* Menu link */
    .main-navigation.desktop-overlay-active .nav-menu > li > a {
        color: rgba(255, 255, 255, 0.2);
        font-family: var(--tns-font-heading);
        font-size: clamp(1.375rem, 2.8vw, 2rem);
        font-weight: 700;
        letter-spacing: -0.01em;
        padding: 0.6rem 1rem;
        background: transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: color 0.4s ease;
        border-radius: 0;
        position: relative;
    }
    
    /* Oker underline on hover */
    .main-navigation.desktop-overlay-active .nav-menu > li > a::after {
        content: none;
    }
    
    .main-navigation.desktop-overlay-active .nav-menu > li > a .overlay-underline {
        position: absolute;
        bottom: 0.3rem;
        left: 50%;
        transform: translateX(-50%) scaleX(0);
        width: 40%;
        height: 2px;
        background: var(--tns-oker);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        transform-origin: center;
        border-radius: 1px;
    }
    
    /* Dim siblings on hover (parent-level effect via JS) */
    .main-navigation.desktop-overlay-active .nav-menu.has-hover > li > a {
        color: rgba(255, 255, 255, 0.12);
    }
    
    .main-navigation.desktop-overlay-active .nav-menu.has-hover > li:hover > a,
    .main-navigation.desktop-overlay-active .nav-menu.has-hover > li.is-open > a {
        color: white;
    }
    
    .main-navigation.desktop-overlay-active .nav-menu > li > a:hover,
    .main-navigation.desktop-overlay-active .nav-menu > li.is-open > a {
        color: white;
        background: transparent;
    }
    
    .main-navigation.desktop-overlay-active .nav-menu > li.current-menu-item > a,
    .main-navigation.desktop-overlay-active .nav-menu > li.current_page_item > a,
    .main-navigation.desktop-overlay-active .nav-menu > li.current-menu-ancestor > a,
    .main-navigation.desktop-overlay-active .nav-menu > li.current-menu-parent > a,
    .main-navigation.desktop-overlay-active .nav-menu > li.current_page_ancestor > a,
    .main-navigation.desktop-overlay-active .nav-menu > li.current_page_parent > a {
        color: rgba(255, 255, 255, 0.5);
        background: transparent;
    }
    
    /* Dropdown chevron */
    .main-navigation.desktop-overlay-active .nav-menu > li.menu-item-has-children > a::after {
        content: '';
        width: 7px;
        height: 7px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: rotate(45deg);
        margin-left: 0.6rem;
        margin-top: -3px;
        transition: transform 0.3s ease;
        border-top: none;
        border-left: none;
        flex-shrink: 0;
    }
    
    .main-navigation.desktop-overlay-active .nav-menu > li.menu-item-has-children.is-open > a::after {
        transform: rotate(-135deg);
        margin-top: 3px;
    }
    
    /* ===== SUBMENU ===== */
    .main-navigation.desktop-overlay-active .nav-menu .sub-menu {
        position: static !important;
        transform: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
        min-width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                    padding 0.4s ease;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.25rem !important;
    }
    
    .main-navigation.desktop-overlay-active .nav-menu .sub-menu::before,
    .main-navigation.desktop-overlay-active .nav-menu .sub-menu::after {
        display: none !important;
    }

    /* Mega menu extra elementen: reset in overlay */
    .main-navigation.desktop-overlay-active .nav-menu .sub-menu > li:first-child::before {
        display: none !important;
    }
    .main-navigation.desktop-overlay-active .nav-menu .sub-menu > li:last-child {
        margin-top: 0 !important;
        border-top: none !important;
        padding: 0 !important;
    }
    .main-navigation.desktop-overlay-active .nav-menu .sub-menu a::before {
        display: none !important;
    }
    
    .main-navigation.desktop-overlay-active .nav-menu > li.is-open > .sub-menu {
        max-height: 500px;
        padding: 0.25rem 1rem 0.75rem !important;
    }
    
    .main-navigation.desktop-overlay-active .nav-menu .sub-menu li {
        display: inline-flex !important;
        list-style: none;
        border: none !important;
    }
    
    .main-navigation.desktop-overlay-active .nav-menu .sub-menu a {
        color: rgba(255, 255, 255, 0.25) !important;
        font-family: var(--tns-font-body) !important;
        font-size: 0.875rem !important;
        font-weight: 500 !important;
        padding: 0.35rem 0.875rem !important;
        text-align: center !important;
        justify-content: center !important;
        transition: color 0.3s ease, background 0.3s ease !important;
        border-radius: var(--tns-radius-full) !important;
        white-space: nowrap !important;
    }
    
    .main-navigation.desktop-overlay-active .nav-menu .sub-menu a:hover {
        color: white !important;
        background: rgba(255, 255, 255, 0.08) !important;
        transform: none !important;
    }
    
    /* Active submenu item in overlay */
    .main-navigation.desktop-overlay-active .nav-menu .sub-menu .current-menu-item > a,
    .main-navigation.desktop-overlay-active .nav-menu .sub-menu .current_page_item > a {
        color: white !important;
        background: rgba(255, 255, 255, 0.06) !important;
    }

    /* ===== OVERLAY FOOTER ===== */
    .main-navigation.desktop-overlay-active .overlay-footer {
        display: flex;
        justify-content: center;
        gap: 3.5rem;
        width: 100%;
        padding: 0 2rem 2rem;
        margin-top: auto;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.5s ease 0.9s, transform 0.5s ease 0.9s;
    }
    
    .main-navigation.desktop-overlay-active.items-revealed .overlay-footer {
        opacity: 1;
        transform: translateY(0);
    }
    
    .overlay-footer-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.1rem;
    }
    
    .overlay-footer-label {
        font-size: 0.5625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.15em;
        color: var(--tns-oker);
        margin-bottom: 0.25rem;
    }
    
    .overlay-footer-col a,
    .overlay-footer-col span {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.25);
        text-decoration: none;
        transition: color 0.3s ease;
        line-height: 1.6;
    }
    
    .overlay-footer-col a:hover {
        color: rgba(255, 255, 255, 0.6);
    }
    
    .overlay-social {
        display: flex;
        gap: 1.25rem;
    }
    
    .overlay-social a {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.25);
    }
    
    .overlay-social a:hover {
        color: rgba(255, 255, 255, 0.6);
    }
    
    /* Hide header CTA when overlay is open */
    body.desktop-menu-open .header-cta {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
}

/* ===================================
   RESPONSIVE - TABLET & MOBILE MENU
   =================================== */
@media (max-width: 1024px) {
    :root {
        /* Eén marge voor de hele mobiele weergave: logo, menuknop en de
           herotekst gebruiken allemaal deze waarde, zodat ze op elk
           schermformaat op dezelfde lijn blijven staan. */
        --tns-gutter: clamp(18px, 5vw, 32px);

    }
    
    .site-header {
        justify-content: flex-start;
        padding: 1rem var(--tns-header-gutter);
    }
    
    .header-container {
        justify-content: flex-start;
    }
    
    .site-branding {
        position: relative;
        left: 0;
    }
    
    /* ===== SLIDE DOWN FULL SCREEN MENU ===== */
    /* ═══════════════════════════════════════════════
       MOBIEL MENU — Redesign
       Architecturaal, genummerd, karaktervol
       Geïnspireerd op Locomotive/Resn/top studios
       ═══════════════════════════════════════════════ */

    .main-navigation {
        position: fixed;
        inset: 0;
        width: 100%; height: 100dvh;
        background: linear-gradient(170deg, #0a1e2e 0%, #102F49 55%, #0d2538 100%);
        border-radius: 0 !important; /* reset desktop pill-vorm */
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateY(100%);
        transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
        pointer-events: none;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 1001;
    }

    .main-navigation.active {
        transform: translateY(0);
        pointer-events: auto;
    }

    /* ── Foto-strip: smal, subtiel, bovenaan ── */
    .main-navigation.active .tns-photo-stage {
        display: block !important;
        order: -1;
        flex-shrink: 0;
        position: relative;
        width: 100%;
        height: 22vh;
        min-height: 130px;
        max-height: 200px;
        flex-shrink: 0;
        overflow: hidden;
    }
    .main-navigation.active .tns-photo-stage img {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover; object-position: center 25%;
        transition: opacity 0.55s ease, transform 0.75s ease;
    }
    .main-navigation.active .tns-photo-a { opacity: 1; transform: scale(1.06); z-index: 1; }
    .main-navigation.active .tns-photo-b { opacity: 0; transform: scale(1.0);  z-index: 2; }

    /* Navy vignette onderaan foto — naadloze overgang naar menu */
    .main-navigation.active .tns-photo-gradient {
        display: block;
        position: absolute; inset: 0; z-index: 3;
        background: linear-gradient(
            to bottom,
            rgba(10,30,46,0.15) 0%,
            rgba(10,30,46,0.0)  30%,
            rgba(10,30,46,1.0)  100%
        );
    }
    /* Verberg caption op mobiel — te druk */
    .main-navigation.active .tns-photo-caption { display: none; }

    /* ── Eyebrow: NAVIGATIE in goud ── */
    .nav-menu::before {
        content: 'NAVIGATIE';
        display: block;
        font-family: var(--tns-font-body);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.2em;
        color: var(--tns-oker);
        padding: 1.25rem 1.75rem 0;
        margin-bottom: 0.25rem;
        flex-shrink: 0;
        opacity: 0;
        transform: translateY(6px);
        transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
    }
    .main-navigation.active .nav-menu::before {
        opacity: 1; transform: translateY(0);
    }

    /* ── Nav container ── */
    .nav-menu {
        flex-direction: column;
        gap: 0;
        width: 100%;
        padding: 0 1.75rem 0;
        align-items: stretch !important;
        flex: 0 0 auto;
        overflow: visible;
        order: 1; /* na foto + balken */
    }

    /* ── Alle items zichtbaar op mobiel ── */
    .nav-menu > li {
        display: block !important;
        text-align: left !important;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        position: relative;
        overflow: hidden;
    }
    .nav-menu > li:last-child { border-bottom: none; }

    /* Item: start onzichtbaar, schuift op */
    .nav-menu > li {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .main-navigation.active .nav-menu > li { opacity: 1; transform: translateY(0); }
    .main-navigation.active .nav-menu > li:nth-child(1)  { transition-delay: 0.18s; }
    .main-navigation.active .nav-menu > li:nth-child(2)  { transition-delay: 0.23s; }
    .main-navigation.active .nav-menu > li:nth-child(3)  { transition-delay: 0.28s; }
    .main-navigation.active .nav-menu > li:nth-child(4)  { transition-delay: 0.33s; }
    .main-navigation.active .nav-menu > li:nth-child(5)  { transition-delay: 0.38s; }
    .main-navigation.active .nav-menu > li:nth-child(6)  { transition-delay: 0.43s; }
    .main-navigation.active .nav-menu > li:nth-child(7)  { transition-delay: 0.48s; }
    .main-navigation.active .nav-menu > li:nth-child(8)  { transition-delay: 0.53s; }
    .main-navigation.active .nav-menu > li:nth-child(9)  { transition-delay: 0.58s; }
    .main-navigation.active .nav-menu > li:nth-child(10) { transition-delay: 0.63s; }

    /* Huisstijlkleur accent-lijn links per item via ::after (::before is voor nummer) */
    .nav-menu > li::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0; bottom: 0;
        width: 0px; /* start onzichtbaar */
        transition: width 0.25s cubic-bezier(0.25,0.46,0.45,0.94);
    }
    .nav-menu > li:nth-child(4n+1)::after { background: #828673; }
    .nav-menu > li:nth-child(4n+2)::after { background: #BFA46A; }
    .nav-menu > li:nth-child(4n+3)::after { background: #414246; }
    .nav-menu > li:nth-child(4n+4)::after { background: #102F49; }

    /* Lijn groeit in bij tap */
    .main-navigation.active .nav-menu > li:hover::after,
    .main-navigation.active .nav-menu > li:focus-within::after { width: 3px; }

    /* ── Nav-links: groot, genummerd via counter ── */
    .nav-menu {
        counter-reset: tns-nav-counter;
    }
    .nav-menu > li {
        counter-increment: tns-nav-counter;
    }

    .nav-menu > li > a {
        color: rgba(255,255,255,0.42);
        font-family: var(--tns-font-heading);
        font-size: clamp(1.2rem, 5.5vw, 1.65rem);
        font-weight: 900;
        letter-spacing: -0.01em;
        text-transform: uppercase;
        padding: 0.7rem 0 0.7rem 2.5rem; /* ruimte voor het nummer */
        background: transparent !important;
        backdrop-filter: none !important;
        border-radius: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-start !important;
        transition: color 0.2s ease;
        width: 100%;
        position: relative;
    }

    /* Nummer als ::before op de <a> */
    .nav-menu > li > a::before {
        content: counter(tns-nav-counter, decimal-leading-zero) !important;
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-family: var(--tns-font-body) !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em !important;
        color: var(--tns-oker) !important;
        opacity: 0.55 !important;
        width: 1.8rem !important; /* vaste breedte = padding-left van de <a> */
        height: auto !important;
        border-radius: 0 !important;
        background: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        display: block !important;
        line-height: 1 !important;
    }

    /* Active/hover: link licht op */
    .nav-menu > li > a:hover,
    .nav-menu > li > a:focus,
    .nav-menu > li.current-menu-item > a,
    .nav-menu > li.current-menu-ancestor > a {
        color: white;
    }
    .nav-menu > li.current-menu-item > a::before,
    .nav-menu > li.current-menu-ancestor > a::before {
        color: var(--tns-oker) !important;
        opacity: 1 !important;
    }

    /* Dropdown pijltje */
    .nav-menu > li.menu-item-has-children > a::after {
        content: '' !important;
        width: 6px; height: 6px;
        border: none !important;
        border-right: 1.5px solid rgba(255,255,255,0.3) !important;
        border-bottom: 1.5px solid rgba(255,255,255,0.3) !important;
        transform: rotate(45deg);
        transition: transform 0.3s ease;
        margin-left: auto;
        flex-shrink: 0;
        position: static !important;
        top: auto !important; left: auto !important;
        background: none !important;
        border-left: none !important; border-top: none !important;
    }
    .nav-menu > li.menu-item-has-children.is-open > a::after { transform: rotate(-135deg); }

    /* Submenu */
    .nav-menu .sub-menu {
        position: static !important; transform: none !important;
        background: transparent !important; backdrop-filter: none !important;
        box-shadow: none !important; border: none !important;
        border-radius: 0; min-width: auto !important;
        width: 100%; padding: 0; margin: 0;
        max-height: 0; overflow: hidden; transition: max-height 0.4s ease;
        opacity: 1 !important; visibility: visible !important;
        pointer-events: auto; left: auto !important;
    }
    .nav-menu .sub-menu::before { display: none !important; }
    .nav-menu > li.is-open > .sub-menu { max-height: 400px; }
    .nav-menu .sub-menu li { border: none; }
    .nav-menu .sub-menu a {
        color: rgba(255,255,255,0.28);
        font-family: var(--tns-font-body) !important;
        font-size: 0.8rem !important; font-weight: 400;
        padding: 0.35rem 0 0.35rem 2.5rem;
        display: flex !important; align-items: center;
        transition: color 0.2s ease;
        background: transparent !important;
        border-left: none;
        margin-left: 0; text-transform: none;
        letter-spacing: 0;
    }
    .nav-menu .sub-menu a::before,
    .nav-menu .sub-menu a::after { display: none !important; }
    .nav-menu .sub-menu a:hover { color: rgba(255,255,255,0.7); }
    .nav-menu .sub-menu .current-menu-item > a { color: var(--tns-oker); }

    /* ── Huisstijlbalken onderaan — schieten één voor één omhoog ── */
    .main-navigation.active .tns-menu-bars {
        display: flex !important;
        position: relative;
        flex-shrink: 0;
        width: 100%;
        align-items: flex-end;
        height: 20px;
        overflow: hidden;
    }
    .main-navigation.active .tns-menu-bars span {
        flex: 1;
        height: 0;
        display: block;
        transition: height 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    /* Alle balken zelfde hoogte — stagger voor levendig gevoel */
    .main-navigation.active.tns-bars-in .tns-menu-bars span:nth-child(1) {
        height: 20px; transition-delay: 0.55s;
    }
    .main-navigation.active.tns-bars-in .tns-menu-bars span:nth-child(2) {
        height: 20px; transition-delay: 0.65s;
    }
    .main-navigation.active.tns-bars-in .tns-menu-bars span:nth-child(3) {
        height: 20px; transition-delay: 0.75s;
    }
    .main-navigation.active.tns-bars-in .tns-menu-bars span:nth-child(4) {
        height: 20px; transition-delay: 0.85s;
    }

    /* ── Overlay footer ── */    /* ── Overlay footer ── */
    .main-navigation.active .tns-menu-bars {
        display: flex;
        position: relative; /* in de flex-flow onderaan */
        flex-shrink: 0;
        width: 100%;
    }
    .main-navigation.active .tns-menu-bars span {
        height: 14px;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 0.55s cubic-bezier(0.77,0,0.18,1);
    }
    .main-navigation.active .tns-menu-bars span:nth-child(1) { transition-delay: 0.55s; }
    .main-navigation.active .tns-menu-bars span:nth-child(2) { transition-delay: 0.65s; }
    .main-navigation.active .tns-menu-bars span:nth-child(3) { transition-delay: 0.75s; }
    .main-navigation.active .tns-menu-bars span:nth-child(4) { transition-delay: 0.85s; }
    /* Na de wipe: volledig zichtbaar */
    .main-navigation.active.tns-bars-in .tns-menu-bars span { transform: scaleX(1); }

    .menu-toggle {
        display: flex;
    }
    
    body.menu-open {
        overflow: hidden;
    }
    
    /* Overlay footer in mobile menu */
    .overlay-footer {
        display: none;
    }
    
    .main-navigation.active .overlay-footer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1.25rem;
        padding: 0.875rem 1.75rem;
        width: 100%;
        flex-shrink: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        opacity: 0;
        transition: opacity 0.4s ease 0.9s;
    }
    .main-navigation.active.tns-bars-in .overlay-footer {
        opacity: 1;
    }
    .main-navigation.active .overlay-footer {
        flex-shrink: 0;
        order: 2;
    }
    
    .main-navigation.active .overlay-footer-col {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.125rem;
        flex: 1;
        min-width: 120px;
    }
    
    .main-navigation.active .overlay-footer-label {
        font-size: 0.625rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--tns-oker);
        margin-bottom: 0.25rem;
    }
    
    .main-navigation.active .overlay-footer-col a,
    .main-navigation.active .overlay-footer-col span {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.35);
        text-decoration: none;
        line-height: 1.5;
    }
    
    .main-navigation.active .overlay-social {
        display: flex;
        gap: 1rem;
    }
}

/* ===================================
   RESPONSIVE - MOBILE
   =================================== */
@media (max-width: 768px) {
    :root {
        --tns-gutter: 1.25rem;
    }
    
    .site-header {
        padding: 0.75rem 1rem;
    }
    
    .menu-toggle {
        right: var(--tns-header-gutter, 1.5rem);
        top: calc(1rem + (65px - 46px) / 2);
        transform: none;
    }
    
    .nav-menu {
        padding: 4.5rem 1.5rem 1.5rem;
    }
    
    .nav-menu > li > a {
        font-size: 1rem;
        padding: 0.875rem 0 0.875rem 2.5rem; /* padding-left bewaren voor nummer */
    }
    
    .wp-block-columns {
        flex-direction: column;
    }
    
    .wp-block-column {
        flex-basis: 100% !important;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-menu {
        justify-content: center;
    }
    
    .btn,
    .wp-block-button__link {
        padding: 0.875rem 1.5rem;
        font-size: 0.9375rem;
    }
}

/* ===================================
   REDUCED MOTION
   =================================== */
@media (prefers-reduced-motion: reduce) {
    /* Only apply to scroll reveal animations, not hero */
    .scroll-reveal,
    .scale-reveal,
    .stagger-item {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
    
    .scroll-reveal,
    .scale-reveal {
        opacity: 1;
        transform: none;
    }
}

/* ===== FORCE ANIMATIONS (override system reduce motion setting) ===== */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal:not(.tns-quote-block):not(.tns-quote-block *),
    .scale-reveal:not(.tns-quote-block):not(.tns-quote-block *),
    .stagger-item:not(.tns-quote-block):not(.tns-quote-block *) {
        transition: opacity 0.8s ease, transform 0.8s ease !important;
        transform: translateY(40px) !important;
        opacity: 0 !important;
    }

    .scroll-reveal.revealed:not(.tns-quote-block):not(.tns-quote-block *),
    .scale-reveal.revealed:not(.tns-quote-block):not(.tns-quote-block *),
    .stagger-item.revealed:not(.tns-quote-block):not(.tns-quote-block *) {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }
}

/* ===================================
   PRINT STYLES
   =================================== */
@media print {
    .site-header,
    .site-footer,
    .menu-toggle {
        display: none;
    }
    
    body {
        color: #414246;
        background: #fff;
    }
    
    a {
        color: #414246;
        text-decoration: underline;
    }
}

/* ===================================
   HERO ANIMATION OVERRIDE (must be last)
   Frontend only - not in editor
   =================================== */

/* Start state - verborgen (alleen op frontend, niet in editor) */
body:not(.wp-admin) .wp-block-cover.hero-cover .wp-block-cover__inner-container > * {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* End state - zichtbaar */
body:not(.wp-admin) .wp-block-cover.hero-cover.hero-loaded .wp-block-cover__inner-container > * {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Stagger delays - sneller achter elkaar */
body:not(.wp-admin) .wp-block-cover.hero-cover .wp-block-cover__inner-container > *:nth-child(1) { transition-delay: 0s !important; }
body:not(.wp-admin) .wp-block-cover.hero-cover .wp-block-cover__inner-container > *:nth-child(2) { transition-delay: 0.1s !important; }
body:not(.wp-admin) .wp-block-cover.hero-cover .wp-block-cover__inner-container > *:nth-child(3) { transition-delay: 0.2s !important; }
body:not(.wp-admin) .wp-block-cover.hero-cover .wp-block-cover__inner-container > *:nth-child(4) { transition-delay: 0.3s !important; }
body:not(.wp-admin) .wp-block-cover.hero-cover .wp-block-cover__inner-container > *:nth-child(5) { transition-delay: 0.4s !important; }
body:not(.wp-admin) .wp-block-cover.hero-cover .wp-block-cover__inner-container > *:nth-child(6) { transition-delay: 0.5s !important; }


/* ===================================
   TNS HERO ANIMATED - Text Hero Animation
   Animation is handled by JS, CSS just provides base styles
   Usage: Add class "tns-hero-animated" to a Group block
   =================================== */

/* Line styling */
.tns-hero-animated h1 .tns-line {
    display: block;
}

/* Editor: Always show content (no animation in admin) */
.editor-styles-wrapper .tns-hero-animated h1,
.editor-styles-wrapper .tns-hero-animated h1 .tns-line,
.editor-styles-wrapper .tns-hero-animated p {
    opacity: 1 !important;
    transform: none !important;
}



html, body {
    overflow-x: clip!important;
}
















/* ===================================
   FOOTER STYLES - TNS MODERN FOOTER
   =================================== */
footer.site-footer.tns-footer,
.site-footer.tns-footer,
.tns-footer {
    background: linear-gradient(180deg, var(--tns-blauw) 0%, #0a1f30 100%) !important;
    color: rgba(255, 255, 255, 0.85);
    position: relative;
    overflow: hidden;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0 !important;
}

/* Subtle decorative element */
.tns-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--tns-oker) 0%, var(--tns-groen) 50%, var(--tns-oker) 100%);
}

.tns-footer-main {
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.tns-footer-container {
    max-width: var(--tns-container-wide);
    margin: 0 auto;
    padding: 0 var(--tns-gutter);
}

.tns-footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: 2rem;
}

/* Brand Column */
.tns-footer-brand {
    padding-right: 1.5rem;
}

/* Logo Styling */
.tns-footer-logo {
    max-height: 45px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-bottom: 1.25rem;
    transition: opacity var(--tns-transition);
}

.tns-footer-logo:hover {
    opacity: 0.8;
}

.tns-footer-logo-wrap {
    margin-bottom: 1.25rem;
}

.tns-footer-logo-wrap .custom-logo-link {
    display: block;
}

.tns-footer-logo-wrap img,
.tns-footer-logo-wrap .custom-logo {
    max-height: 45px !important;
    max-width: 160px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

.tns-footer-site-title {
    font-family: var(--tns-font-heading);
    font-size: 1.375rem;
    font-weight: 700;
    color: white;
    display: block;
    margin-bottom: 1.25rem;
}

.tns-footer-description {
    font-size: 0.8125rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.25rem;
    max-width: 280px;
}

/* Social Media Icons */
.tns-footer-social {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tns-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.6);
    transition: all var(--tns-transition);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tns-footer-social a:hover {
    background: var(--tns-oker);
    color: var(--tns-blauw);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(191, 164, 106, 0.25);
}

.tns-footer-social svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

/* Footer Columns */
.tns-footer-column h4 {
    font-family: var(--tns-font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    padding-bottom: 0.75rem;
}

.tns-footer-column h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 24px;
    height: 2px;
    background: var(--tns-oker);
    border-radius: 1px;
}

/* Footer Links Menu */
.tns-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tns-footer-links li {
    margin-bottom: 0.5rem;
}

.tns-footer-links a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-size: 0.8125rem;
    display: inline-block;
    transition: all var(--tns-transition);
    position: relative;
}

.tns-footer-links a:hover {
    color: var(--tns-oker);
    padding-left: 4px;
}

.tns-footer-menu-notice {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
}

/* Contact Info */
.tns-footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tns-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.tns-footer-contact li:last-child {
    margin-bottom: 0;
}

.tns-footer-contact svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--tns-oker);
    width: 15px;
    height: 15px;
}

.tns-footer-contact a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color var(--tns-transition);
}

.tns-footer-contact a:hover {
    color: var(--tns-oker);
}

/* ── Footer: zegels (Customizer, Footer: zegels) ──
   In de merkkolom onder de social-iconen, op één rij en op gelijke hoogte.
   Zegels in hun eigen kleur, zonder bijsnijden. */
.tns-footer-zegels { margin-top: 1.75rem; }
.tns-footer-zegels__label {
    margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--tns-oker, #BFA46A);
}
.tns-footer-zegels__lijst {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
}
.tns-footer-zegels__item { margin: 0; padding: 0; }
.tns-footer-zegels__item a { display: block; transition: transform .25s ease; }
.tns-footer-zegels__item a:hover,
.tns-footer-zegels__item a:focus-visible { transform: translateY(-3px); }
.tns-footer-zegels__img {
    display: block; height: clamp(62px, 5vw, 76px); width: auto; max-width: 100%;
    object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}
@media (max-width: 380px) {
    .tns-footer-zegels__lijst { gap: 10px; }
    .tns-footer-zegels__img { height: 56px; }
}

/* Footer Bottom Bar */
.tns-footer-bottom {
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
}

.tns-footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    flex-wrap: wrap;
}

.tns-footer-copyright {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.tns-footer-credits {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.3);
    margin: 0;
}
.tns-footer-credits a {
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition: color 0.2s;
}
.tns-footer-credits a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.tns-footer-legal {
    grid-column: 4;
    display: flex;
    gap: 1.25rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.tns-footer-legal li {
    margin: 0;
}

.tns-footer-legal a {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color var(--tns-transition);
}

.tns-footer-legal a:hover {
    color: var(--tns-oker);
}

/* ===================================
   FOOTER RESPONSIVE
   =================================== */
@media (max-width: 1024px) {
    .tns-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem 1.5rem;
    }
    
    .tns-footer-brand {
        grid-column: span 2;
        padding-right: 0;
        max-width: 400px;
    }
    
    .tns-footer-description {
        max-width: none;
    }
    
    .tns-footer-bottom-inner {
        display: flex;
        justify-content: space-between;
    }
    
    .tns-footer-legal {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .tns-footer-main {
        padding: 2rem 0 1.5rem;
    }

    .tns-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.75rem 1.25rem;
    }

    /* Brand: volledige breedte, compact gestapeld */
    .tns-footer-brand {
        grid-column: span 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding-right: 0;
        padding-bottom: 0.25rem;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    /* Beschrijving verbergen */
    .tns-footer-description {
        display: none;
    }

    /* Social direct onder logo, links uitgelijnd */
    .tns-footer-social {
        justify-content: flex-start;
        gap: 8px;
    }

    /* Social icoontjes iets kleiner */
    .tns-footer-social a {
        width: 32px;
        height: 32px;
    }
    .tns-footer-social svg {
        width: 14px;
        height: 14px;
    }

    .tns-footer-column {
        text-align: left;
    }

    .tns-footer-column h4 {
        font-size: 11px;
        margin-bottom: 0.6rem;
    }

    .tns-footer-column h4::after {
        left: 0;
    }

    /* Compactere links */
    .tns-footer-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .tns-footer-links li {
        padding: 3px 0;
    }

    .tns-footer-links a {
        font-size: 13px;
    }

    .tns-footer-links a:hover {
        padding-left: 4px;
    }

    /* Contact: volledige breedte, header verbergen, compact */
    .tns-footer-contact-col {
        grid-column: span 2;
        border-top: 1px solid rgba(255,255,255,0.08);
        padding-top: 1rem;
    }

    .tns-footer-contact-col h4 {
        display: none;
    }

    .tns-footer-contact {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.4rem 1.5rem;
        align-items: flex-start;
    }

    .tns-footer-contact li {
        justify-content: flex-start;
        font-size: 12px;
    }

    .tns-footer-contact svg {
        width: 14px;
        height: 14px;
    }

    .tns-footer-bottom-inner {
        flex-direction: column;
        text-align: left;
        padding: 0.75rem 0;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .tns-footer-copyright {
        font-size: 12px;
    }

    .tns-footer-legal {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.4rem 1rem;
    }

    .tns-footer-legal a {
        font-size: 12px;
    }

    .tns-footer-credits {
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .tns-footer-social a {
        width: 34px;
        height: 34px;
    }
    
    .tns-footer-social svg {
        width: 14px;
        height: 14px;
    }
}

/* ===================================
   FOOTER FULL WIDTH FIX
   =================================== */
footer.tns-footer {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    position: relative;
    left: 0;
    right: 0;
}

/* ===================================
   RESPONSIVE MARGIN - DATA ATTRIBUTE BASED
   Set via Gutenberg "📱 Responsive Marge" panel
   =================================== */

/* Tablet (< 1024px) */
@media (max-width: 1024px) {
    [data-tns-mt-tablet="0px"] { margin-top: 0 !important; }
    [data-tns-mt-tablet="0.5rem"] { margin-top: 0.5rem !important; }
    [data-tns-mt-tablet="1rem"] { margin-top: 1rem !important; }
    [data-tns-mt-tablet="2rem"] { margin-top: 2rem !important; }
    [data-tns-mt-tablet="4rem"] { margin-top: 4rem !important; }
    [data-tns-mt-tablet="6rem"] { margin-top: 6rem !important; }
    [data-tns-mt-tablet="-0.5rem"] { margin-top: -0.5rem !important; }
    [data-tns-mt-tablet="-1rem"] { margin-top: -1rem !important; }
    [data-tns-mt-tablet="-2rem"] { margin-top: -2rem !important; }
    [data-tns-mt-tablet="-4rem"] { margin-top: -4rem !important; }
    [data-tns-mt-tablet="-6rem"] { margin-top: -6rem !important; }
    [data-tns-mt-tablet="-100px"] { margin-top: -100px !important; }
    [data-tns-mt-tablet="-150px"] { margin-top: -150px !important; }
    [data-tns-mt-tablet="-200px"] { margin-top: -200px !important; }
    
    [data-tns-mb-tablet="0px"] { margin-bottom: 0 !important; }
    [data-tns-mb-tablet="0.5rem"] { margin-bottom: 0.5rem !important; }
    [data-tns-mb-tablet="1rem"] { margin-bottom: 1rem !important; }
    [data-tns-mb-tablet="2rem"] { margin-bottom: 2rem !important; }
    [data-tns-mb-tablet="4rem"] { margin-bottom: 4rem !important; }
    [data-tns-mb-tablet="6rem"] { margin-bottom: 6rem !important; }
    [data-tns-mb-tablet="-0.5rem"] { margin-bottom: -0.5rem !important; }
    [data-tns-mb-tablet="-1rem"] { margin-bottom: -1rem !important; }
    [data-tns-mb-tablet="-2rem"] { margin-bottom: -2rem !important; }
    [data-tns-mb-tablet="-4rem"] { margin-bottom: -4rem !important; }
    [data-tns-mb-tablet="-6rem"] { margin-bottom: -6rem !important; }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
    [data-tns-mt-mobile="0px"] { margin-top: 0 !important; }
    [data-tns-mt-mobile="0.5rem"] { margin-top: 0.5rem !important; }
    [data-tns-mt-mobile="1rem"] { margin-top: 1rem !important; }
    [data-tns-mt-mobile="2rem"] { margin-top: 2rem !important; }
    [data-tns-mt-mobile="4rem"] { margin-top: 4rem !important; }
    [data-tns-mt-mobile="6rem"] { margin-top: 6rem !important; }
    [data-tns-mt-mobile="-0.5rem"] { margin-top: -0.5rem !important; }
    [data-tns-mt-mobile="-1rem"] { margin-top: -1rem !important; }
    [data-tns-mt-mobile="-2rem"] { margin-top: -2rem !important; }
    [data-tns-mt-mobile="-4rem"] { margin-top: -4rem !important; }
    [data-tns-mt-mobile="-6rem"] { margin-top: -6rem !important; }
    [data-tns-mt-mobile="-100px"] { margin-top: -100px !important; }
    [data-tns-mt-mobile="-150px"] { margin-top: -150px !important; }
    [data-tns-mt-mobile="-200px"] { margin-top: -200px !important; }
    
    [data-tns-mb-mobile="0px"] { margin-bottom: 0 !important; }
    [data-tns-mb-mobile="0.5rem"] { margin-bottom: 0.5rem !important; }
    [data-tns-mb-mobile="1rem"] { margin-bottom: 1rem !important; }
    [data-tns-mb-mobile="2rem"] { margin-bottom: 2rem !important; }
    [data-tns-mb-mobile="4rem"] { margin-bottom: 4rem !important; }
    [data-tns-mb-mobile="6rem"] { margin-bottom: 6rem !important; }
    [data-tns-mb-mobile="-0.5rem"] { margin-bottom: -0.5rem !important; }
    [data-tns-mb-mobile="-1rem"] { margin-bottom: -1rem !important; }
    [data-tns-mb-mobile="-2rem"] { margin-bottom: -2rem !important; }
    [data-tns-mb-mobile="-4rem"] { margin-bottom: -4rem !important; }
    [data-tns-mb-mobile="-6rem"] { margin-bottom: -6rem !important; }
}

/* Legacy utility classes (for manual use) */
@media (max-width: 768px) {
    .no-margin-top-mobile { margin-top: 0 !important; }
    .hide-on-mobile { display: none !important; }
}
@media (min-width: 769px) {
    .show-only-mobile { display: none !important; }
}




/* ── Eyebrow paragraaf fix ────────────────────────────────────────────────────
   In de Gutenberg editor krijgen eyebrow-paragrafen (italic, klein, boven
   een heading) een inline margin-bottom:-25px. Met text-transform:uppercase
   op headings klopt die offset niet meer. We resetten hem naar 0 en geven
   de heading een kleine negatieve margin-top mee in plaats daarvan.
   ─────────────────────────────────────────────────────────────────────────── */

/* Override inline margin-bottom op eyebrow-paragrafen */
p[style*="margin-bottom:-25px"],
p[style*="margin-bottom: -25px"] {
    margin-bottom: 0 !important;
}

/* Geef de heading die ná een eyebrow-paragraaf staat een subtiele negatieve
   margin-top, zodat het visueel aansluit zonder te overlappen */
p[style*="margin-bottom:-25px"] + h1,
p[style*="margin-bottom:-25px"] + h2,
p[style*="margin-bottom:-25px"] + h3,
p[style*="margin-bottom: -25px"] + h1,
p[style*="margin-bottom: -25px"] + h2,
p[style*="margin-bottom: -25px"] + h3,
.wp-block-heading + .wp-block-heading {
    margin-top: -0.1em;
}

.color-gradient-tns {
    background: linear-gradient(to right, #bfa46a, #828673, #414246, #102f49);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    display: block; /* was inline-block */
    line-height: 1.1;
}







.gradient-divider {
    position: relative;
}

.gradient-divider::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 25px; /* dikte van de streep */
    background: linear-gradient(to right, 
        #102f49 0%, 
        #102f49 25%, 
        #414246 25%, 
        #414246 50%, 
        #828673 50%, 
        #828673 75%, 
        #bfa46a 75%, 
        #bfa46a 100%
    );
    z-index: 3;
    pointer-events: none;
}

.gradient-divider::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 6px; /* zelfde als de hoogte van je streep */
    width: 100%;
    height: 80px;
    background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0));
    z-index: 2;
    pointer-events: none;
}
/* ── Audience selector (alignright Cover block na hero) ───────────────────────
   De [tns_audience_selector] shortcode zit in een wp:cover met align="right".
   In het oude thema verschijnt dit als een gecentreerd wit vlak onder de hero,
   NIET als een gefloat blok. We zetten de float daarom volledig uit.
   ─────────────────────────────────────────────────────────────────────────── */

.wp-block-cover.alignright {
    float: none !important;
    clear: both;
    width: 100% !important;
    max-width: var(--tns-container-wide) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 26px;
    overflow: hidden;
}


/* Losse close-knop — vervangen door header-menu-toggle, permanent verbergen */
.pill-toggle-wrap--close {
    display: none !important;
}

/* ── Device override helpers ───────────────────────────────────────────────── */
.tns-show-mobile-only { display: none !important; }
.tns-show-tablet-only { display: none !important; }
@media (max-width: 767px) {
    .tns-show-mobile-only { display: block !important; }
    /* Desktopfoto weg zodra er een mobiele foto is. De oude regel zocht de
       klasse --desktop-only, die nergens bestond: een telefoon haalde
       daardoor beide foto's op. */
    .tns-hero__image--heeft-mob { display: none !important; }
    .tns-hero__image--mob { display: block !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .tns-show-tablet-only { display: block !important; }
    .tns-hero__image--heeft-tab { display: none !important; }
    .tns-hero__image--tab { display: block !important; }
}
.tns-hero__image--mob,
.tns-hero__image--tab { display: none; }

/* ── TNS Event single pagina — full-width override ── */
.single-tns_event main#main-content,
.single-tns_event .site-content,
.single-tns_event .wp-block-post-content {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.single-tns_event .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none !important;
}

/* ── Witte achtergrond per pagina ── */
body.tns-bg-white,
body.tns-bg-white .wp-site-blocks {
    background-color: #ffffff !important;
}

/* ── Project-scenes: altijd full-bleed (los geplaatst op een pagina of binnen tns/project) ──
   100vw + negatieve marge i.p.v. width:100% — anders loopt de scene op mobiel niet door
   tot de schermrand wanneer de constrained container zijmarges heeft. overflow-x:clip
   (elders in deze stylesheet) vangt de horizontale overflue af. */
.is-layout-constrained > .tns-scene,
.wp-block-post-content > .tns-scene {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}


/* ─── Inline-opmaak in beschrijvende scene-tekst (via tns_format_text) ─── */
.tns-scene strong,
.tns-scene .tns-bold { font-weight: 700; }
.tns-scene em.tns-italic { font-style: italic; }
.tns-scene p a:not(.wp-element-button) {
    color: #BFA46A;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: opacity .2s;
}
.tns-scene p a:not(.wp-element-button):hover { opacity: .7; }


/* ═══════════════════════════════════════════════════════════════════════════
   404 — PAGINA NIET GEVONDEN
   ═══════════════════════════════════════════════════════════════════════════ */

.tns-404 {
    background: #102F49;
    position: relative;
    overflow: hidden;
}
/* Full-bleed binnen de constrained <main>, zelfde aanpak als de scenes */
.is-layout-constrained > .tns-404,
.is-layout-constrained > .tns-404__help,
.wp-block-post-content > .tns-404,
.wp-block-post-content > .tns-404__help {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

.tns-404__inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: clamp(64px, 10vh, 128px) clamp(24px, 5vw, 64px);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

/* ── Tekst ── */
.tns-404__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--tns-font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #BFA46A;
    margin-bottom: 18px;
}
.tns-404__eyebrow::before {
    content: '';
    width: 24px;
    height: 2px;
    background: #BFA46A;
    flex-shrink: 0;
}

.tns-404__title {
    font-family: var(--tns-font-heading);
    font-size: clamp(2rem, 5.5vw, 3.6rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
}
.tns-404__title em { font-style: normal; color: #BFA46A; }

.tns-404__lead {
    font-family: var(--tns-font-body);
    font-size: clamp(15px, 1.4vw, 17px);
    line-height: 1.7;
    color: rgba(255,255,255,0.72);
    margin: 20px 0 0;
    max-width: 48ch;
}

/* ── Zoekveld ── */
.tns-404__search {
    display: flex;
    margin: 30px 0 0;
    max-width: 460px;
    background: rgba(255,255,255,0.06);
    border-bottom: 2px solid rgba(255,255,255,0.25);
    transition: border-color 0.25s ease, background 0.25s ease;
}
.tns-404__search:focus-within {
    background: rgba(255,255,255,0.1);
    border-bottom-color: #BFA46A;
}
.tns-404__search input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--tns-font-body);
    font-size: 16px;
    color: #ffffff;
    -webkit-appearance: none;
    appearance: none;
}
.tns-404__search input[type="search"]::placeholder { color: rgba(255,255,255,0.45); }
.tns-404__search button {
    flex-shrink: 0;
    width: 52px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #BFA46A;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.25s ease;
}
.tns-404__search button:hover { color: #ffffff; }
.tns-404__search button svg { width: 20px; height: 20px; }

/* ── Knoppen ── */
.tns-404__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.tns-404__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 999px;
    border: 2px solid transparent;
    background: #BFA46A;
    color: #ffffff;
    font-family: var(--tns-font-body);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.25s ease, transform 0.2s ease, border-color 0.25s ease;
}
.tns-404__btn:hover { background: #cfb47a; color: #ffffff; transform: translateY(-2px); }
.tns-404__btn--ghost {
    background: transparent;
    border-color: rgba(255,255,255,0.35);
    color: #ffffff;
}
.tns-404__btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: #ffffff; }

/* ── Getal 404 ── */
.tns-404__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    user-select: none;
}
.tns-404__mark span {
    font-family: var(--tns-font-heading);
    font-size: clamp(7rem, 22vw, 16rem);
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 2px rgba(191,164,106,0.55);
    text-stroke: 2px rgba(191,164,106,0.55);
}

/* ── Vervolgstappen ── */
.tns-404__help {
    background: #F4F2EE;
}
.tns-404__help-inner {
    max-width: 1340px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(28px, 4vw, 64px);
}
.tns-404__col-label {
    display: block;
    font-family: var(--tns-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #BFA46A;
    margin-bottom: 18px;
}
.tns-404__links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tns-404__links li { border-top: 1px solid rgba(16,47,73,0.12); }
.tns-404__links li:last-child { border-bottom: 1px solid rgba(16,47,73,0.12); }
.tns-404__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    font-family: var(--tns-font-heading);
    font-size: 17px;
    font-weight: 700;
    color: #102F49;
    text-decoration: none;
    transition: color 0.25s ease, padding 0.25s ease;
}
.tns-404__links a:hover { color: #BFA46A; padding-left: 8px; }
.tns-404__links a em {
    display: block;
    font-family: var(--tns-font-body);
    font-style: normal;
    font-size: 14px;
    font-weight: 400;
    color: #828673;
    margin-top: 3px;
}
.tns-404__links svg { width: 18px; height: 18px; flex-shrink: 0; color: #BFA46A; }

/* ── Vanaf tablet ── */
@media (min-width: 860px) {
    .tns-404__inner { grid-template-columns: 1.15fr 0.85fr; }
    .tns-404__help-inner { grid-template-columns: repeat(2, 1fr); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   VULELEMENT PER APPARAAT (core/spacer)
   Klassen en variabelen komen uit assets/js/editor-spacer.js. Staat er niets
   ingesteld, dan staat er ook geen klasse op en verandert er niets.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .wp-block-spacer.tns-spacer-resp--tab {
        height: var(--tns-sp-tab) !important;
    }
}

/* Mobiel. Is er geen mobiele waarde maar wel een tabletwaarde,
   dan telt die door naar beneden. */
@media (max-width: 767px) {
    .wp-block-spacer.tns-spacer-resp--mob {
        height: var(--tns-sp-mob) !important;
    }
    .wp-block-spacer.tns-spacer-resp--tab:not(.tns-spacer-resp--mob) {
        height: var(--tns-sp-tab) !important;
    }
    .wp-block-spacer.tns-spacer-resp--hide-mob {
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MENUKNOP — achtergrond instelbaar via Customizer > Header
   De klasse staat op <body>, zodat de desktop- en de mobiele knop in één keer
   meegaan. De streepjes kleuren mee zodat er altijd genoeg contrast is.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Donkere vlakken: witte streepjes (dit is ook de standaard) */
body.tns-menuknop-blauw .header-menu-toggle,
body.tns-menuknop-blauw .menu-toggle { background: var(--tns-blauw, #102F49); }
body.tns-menuknop-groen .header-menu-toggle,
body.tns-menuknop-groen .menu-toggle { background: var(--tns-groen, #828673); }
body.tns-menuknop-grijs .header-menu-toggle,
body.tns-menuknop-grijs .menu-toggle { background: var(--tns-grijs, #414246); }

body.tns-menuknop-blauw .header-menu-toggle:hover,
body.tns-menuknop-blauw .menu-toggle:hover { background: #1a4060; }
body.tns-menuknop-groen .header-menu-toggle:hover,
body.tns-menuknop-groen .menu-toggle:hover { background: #949884; }
body.tns-menuknop-grijs .header-menu-toggle:hover,
body.tns-menuknop-grijs .menu-toggle:hover { background: #55565b; }

/* Lichte vlakken: navy streepjes voor voldoende contrast */
body.tns-menuknop-oker .header-menu-toggle,
body.tns-menuknop-oker .menu-toggle { background: var(--tns-oker, #BFA46A); }
body.tns-menuknop-wit .header-menu-toggle,
body.tns-menuknop-wit .menu-toggle { background: #ffffff; }

body.tns-menuknop-oker .header-menu-toggle:hover,
body.tns-menuknop-oker .menu-toggle:hover { background: #cfb47a; }
body.tns-menuknop-wit .header-menu-toggle:hover,
body.tns-menuknop-wit .menu-toggle:hover { background: #f2f0eb; }

body.tns-menuknop-oker .header-menu-toggle__bar,
body.tns-menuknop-oker .menu-toggle span,
body.tns-menuknop-wit .header-menu-toggle__bar,
body.tns-menuknop-wit .menu-toggle span { background: var(--tns-blauw, #102F49); }

/* Geen vlak: alleen de streepjes, met een zachte schaduw zodat ze boven een
   foto leesbaar blijven. Op desktop goud, op mobiel wit, zoals eerder. */
body.tns-menuknop-transparant .header-menu-toggle,
body.tns-menuknop-transparant .menu-toggle {
    background: transparent;
    box-shadow: none;
}
body.tns-menuknop-transparant .header-menu-toggle:hover,
body.tns-menuknop-transparant .menu-toggle:hover { background: rgba(255,255,255,0.12); }
body.tns-menuknop-transparant .header-menu-toggle__bar { background: var(--tns-oker, #BFA46A); }
body.tns-menuknop-transparant .menu-toggle span {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

/* Open menu: het vlak verdwijnt altijd, de overlay is zelf navy */
body[class*="tns-menuknop-"] .header-menu-toggle.active,
body[class*="tns-menuknop-"] .menu-toggle.active {
    background: transparent;
    box-shadow: none;
}
body[class*="tns-menuknop-"] .header-menu-toggle.active .header-menu-toggle__bar,
body[class*="tns-menuknop-"] .menu-toggle.active span {
    background: var(--tns-oker, #BFA46A);
    box-shadow: none;
}




/* ═══════════════════════════════════════════════════════════════════════════
   SCENE-BLOKKEN — zijmarge afdwingen
   De blok-CSS zet deze marge zelf al, maar in de praktijk wint daar iets
   anders van, waardoor tekst tegen de schermrand komt. Deze regels staan in
   de themastylesheet (laadt als laatste) en gebruiken element + klasse, dus
   ze wegen zwaarder dan de regel in het blok zelf.

   Alleen de scenes met lopende inhoud. Sticky en full-screen scenes
   (hero, zoom, grow, horiz, deck, steps, curtain, reveal2, fly, gallery)
   regelen hun eigen binnenmarge, en de lopende band moet juist tot de rand
   doorlopen. De vier scenes met een eigen inner-wrapper staan er ook niet
   bij, anders telt de marge dubbel.
   ═══════════════════════════════════════════════════════════════════════════ */
section.tns-scene-meta,
section.tns-scene-tekst,
section.tns-cta,
section.tns-results,
section.tns-scene-tilt {
    /* !important is hier bewust: in de praktijk bleek de padding uit de
       blok-CSS op nul te staan, ook met een zwaardere selector vanuit het
       thema. Zolang niet vaststaat welke regel dat veroorzaakt, dwingen we
       het hier af. Zodra de oorzaak bekend is mag !important eruit. */
    padding-left: clamp(24px, 5vw, 64px) !important;
    padding-right: clamp(24px, 5vw, 64px) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   ACTIE-ITEM IN HET MOBIELE MENU
   Eén menu-item springt op mobiel naar boven en krijgt een accent. Welk item,
   welke kleur en of dat accent op de tekst of op het hele vlak komt, staat in
   Customizer > Header.

   Drie variabelen op de body, zodat elke regel maar één klasse nodig heeft:
     --tns-actie-tekst  kleur van de tekst in de stand "alleen de tekst"
     --tns-actie-vlak   achtergrond in de stand "het hele vlak"
     --tns-actie-op     tekstkleur bovenop dat gekleurde vlak
   ═══════════════════════════════════════════════════════════════════════════ */

/* Standaard: geen accent. Zo valt er nooit een kleur terug die niemand koos. */
body {
    --tns-actie-tekst: rgba(255,255,255,0.42);
    --tns-actie-vlak:  transparent;
    --tns-actie-op:    rgba(255,255,255,0.42);
}

body.tns-menuactie-groen { --tns-actie-tekst: #22c55e;                --tns-actie-vlak: #22c55e;                --tns-actie-op: #ffffff; }
body.tns-menuactie-oker  { --tns-actie-tekst: var(--tns-oker,#BFA46A); --tns-actie-vlak: var(--tns-oker,#BFA46A); --tns-actie-op: #ffffff; }
body.tns-menuactie-sage  { --tns-actie-tekst: #a6aa96;                --tns-actie-vlak: var(--tns-groen,#828673); --tns-actie-op: #ffffff; }
body.tns-menuactie-grijs { --tns-actie-tekst: #9a9ba0;                --tns-actie-vlak: var(--tns-grijs,#414246); --tns-actie-op: #ffffff; }
body.tns-menuactie-wit   { --tns-actie-tekst: #ffffff;                --tns-actie-vlak: #ffffff;                --tns-actie-op: var(--tns-blauw,#102F49); }

@media (max-width: 1024px) {

    /* .nav-menu is op mobiel een flexkolom. Het label NAVIGATIE is een
       ::before van diezelfde kolom en telt dus mee als flexitem; die moet
       nog een stap hoger, anders komt het label onder het verplaatste item. */
    .nav-menu::before { order: -2; }
    .nav-menu > li.tns-menu-actie { order: -1; }

    /* Geen volgnummer bij het uitgelichte item, en de teller slaat het over:
       het staat bovenaan maar hoort niet bij de genummerde navigatie. De
       ruimte links blijft, zodat de tekst gelijk loopt met de andere items. */
    .nav-menu > li.tns-menu-actie { counter-increment: none; }
    .nav-menu > li.tns-menu-actie > a::before { content: none !important; }

    /* ── Accent op de tekst ── */
    body.tns-menuactie-tekst .nav-menu > li.tns-menu-actie > a,
    body.tns-menuactie-tekst .nav-menu > li.tns-menu-actie > a::before {
        color: var(--tns-actie-tekst);
    }

    /* ── Accent op het hele vlak ──
       De kleur staat op de rij (het li) en niet op de link. De link bevat
       namelijk het uitklappijltje met margin-left:auto en het volgnummer op
       een absolute positie; elke marge- of paddingwijziging daar verschuift
       die twee. Het li laat de inhoud ongemoeid: de negatieve marge duwt de
       kleur tot de rand en de gelijke padding zet de inhoud weer terug. */
    body.tns-menuactie-vlak .nav-menu > li.tns-menu-actie {
        background: var(--tns-actie-vlak);
        /* width:100% staat op elk li. Met een negatieve marge schuift zo'n rij
           alleen op in plaats van breder te worden, en komt hij rechts precies
           die marge tekort. Met auto rekt hij wel mee. */
        width: auto;
        margin: 0 -1.75rem;
        padding: 0.25rem 1.75rem;
        border-bottom-color: transparent;
    }
    body.tns-menuactie-vlak .nav-menu > li.tns-menu-actie > a,
    body.tns-menuactie-vlak .nav-menu > li.tns-menu-actie > a::before {
        color: var(--tns-actie-op) !important;
    }
    /* Het pijltje krijgt dezelfde kleur, maar wat rustiger */
    body.tns-menuactie-vlak .nav-menu > li.tns-menu-actie > a::after {
        border-right-color: var(--tns-actie-op) !important;
        border-bottom-color: var(--tns-actie-op) !important;
        opacity: 0.65;
    }

    /* Zonder accent blijft de regel precies als de rest, ook in de vlakstand */
    body.tns-menuactie-geen .nav-menu > li.tns-menu-actie { border-bottom-color: rgba(255,255,255,0.06); }
    body.tns-menuactie-geen .nav-menu > li.tns-menu-actie {
        background: none;
        margin: 0;
        padding: 0;
    }
}

/* Desktop: het uitgelichte menu-item staat daar al als groene knop in de
   header. In de menubalk verbergen zolang de overlay dicht is; in de overlay
   blijft het staan, want daar verbergt het thema de knop. Alleen als de knop
   er ook echt is (body.tns-heeft-cta, uit functions.php). */
@media (min-width: 1025px) {
    body.tns-heeft-cta .main-navigation:not(.desktop-overlay-active) .nav-menu > li.tns-menu-actie { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   APART MOBIEL MENU
   Staat er een menu op de locatie "Mobiel menu", dan komen er twee lijsten in
   de pagina en wisselt de CSS op 1024px. Is die locatie leeg, dan staat er
   maar één lijst en doen deze regels niets.
   ═══════════════════════════════════════════════════════════════════════════ */
.nav-menu--mobiel { display: none; }

@media (max-width: 1024px) {
    .nav-menu--desktop { display: none !important; }
    .nav-menu--mobiel  { display: flex; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SCENE-KOPPEN — vangnet tegen uitstekende tekst op mobiel
   De meeste scene-koppen passen prima op een telefoon, dus die laten we met
   rust. Maar een lang woord in een smalle kolom kan nog steeds over de rand
   lopen, en dat is precies wat er misging bij de gesplitste panelen.

   break-word grijpt alleen in als het woord anders niet zou passen. Waar het
   nu goed gaat verandert er dus niets.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .tns-scene h2,
    .tns-scene h3,
    .tns-bigword__line,
    .tns-reveal2__panel .lbl,
    .tns-dslide__h,
    .tns-step__h,
    .tns-resrow__num {
        overflow-wrap: break-word;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MENUKNOP — uitwijkkleur bij te weinig contrast
   De knop heeft één vaste kleur uit de Customizer. Boven een sectie met
   ongeveer dezelfde kleur valt hij weg. De JS meet wat er achter de knop zit
   en zet deze klasse als het verschil te klein wordt. De kleur zelf komt uit
   de Customizer, zodat hier niets hardcoded staat.
   ═══════════════════════════════════════════════════════════════════════════ */
.header-menu-toggle.tns-knop-uitwijk,
.menu-toggle.tns-knop-uitwijk {
    background: var(--tns-knop-uitwijk, #2a6086) !important;
    transition: background .25s ease;
}
.header-menu-toggle.tns-knop-uitwijk .header-menu-toggle__bar,
.menu-toggle.tns-knop-uitwijk span {
    background: #ffffff;
}


/* ═══════════════════════════════════════════════════════════════════════════
   HEADER — adminbalk meerekenen
   Het logo staat absolute en schuift dus mee met de 32px die de WordPress-
   adminbalk aan de pagina toevoegt. De twee menuknoppen staan fixed en blijven
   aan de viewport hangen, waardoor ze voor ingelogde gebruikers 32 pixels te
   hoog stonden ten opzichte van het logo. Hier duwen we ze evenveel omlaag.
   ═══════════════════════════════════════════════════════════════════════════ */
body.admin-bar .header-menu-toggle-wrap { top: calc(1rem + 32px); }
body.admin-bar .menu-toggle { top: calc(1rem + (65px - 46px) / 2 + 32px); }

@media screen and (max-width: 782px) {
    /* Onder 782px is de adminbalk 46px hoog en niet meer vastgezet, maar de
       marge op html blijft staan. */
    body.admin-bar .header-menu-toggle-wrap { top: calc(1rem + 46px); }
    body.admin-bar .menu-toggle { top: calc(1rem + (65px - 46px) / 2 + 46px); }
}

@media screen and (max-width: 1024px) and (min-width: 783px) {
    body.admin-bar .menu-toggle { top: calc(1rem + (65px - 46px) / 2 + 32px); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   APART OVERLAY MENU OP DESKTOP
   De pil heeft beperkte ruimte naast de CTA-knop. Met een apart menu op de
   locatie "Overlay menu desktop" kan de hamburger meer items tonen.

   Is die locatie leeg, dan staat er maar één lijst in de pagina en gelden
   deze regels niet: dan blijft alles zoals het was.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
    /* Standaard staat alleen de pil in beeld */
    .nav-menu--overlay { display: none; }

    /* Zodra de overlay open is wisselen ze om */
    .main-navigation.desktop-overlay-active .nav-menu--pil { display: none; }
    .main-navigation.desktop-overlay-active .nav-menu--overlay { display: flex; }
}

@media (max-width: 1024px) {
    /* Op mobiel bestaat de pil niet; daar geldt het mobiele menu of anders
       de hoofdnavigatie. Het overlaymenu blijft hier buiten beeld. */
    .nav-menu--overlay { display: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   OVERLAYMENU DESKTOP — opgebouwd naar het mobiele menu

   Links de fotostrook uit het mobiele menu, staand, met de kleurbalken als
   voet. In het midden de hoofditems met nummer, kleuraccent en chevron.
   Rechts een paneel met de subitems van het item waar je overheen gaat.
   Onderaan de contactgegevens over de volle breedte.

   De foto's komen uit Customizer > Mega menu, dezelfde als op mobiel.

   De oude overlay zat vol !important; dit blok heeft daarom een extra
   element in de selector om ervoor te gaan.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

    body .main-navigation.desktop-overlay-active {
        display: grid !important;
        grid-template-columns: minmax(280px, 30%) minmax(0, 1fr) minmax(0, .9fr) !important;
        grid-template-rows: minmax(0, 1fr) 16px auto !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0 !important;
        background: #0A1E2E !important;
        overflow-y: auto !important;
    }

    /* Onderdelen die hier niet horen */
    body .main-navigation.desktop-overlay-active .tns-stats-bg { display: none !important; }

    /* ── Fotostrook, staand ── */
    body .main-navigation.desktop-overlay-active .tns-photo-stage {
        display: block !important;
        grid-column: 1;
        grid-row: 1;
        position: relative;
        width: 100%;
        height: auto;
        min-height: 360px;
        overflow: hidden;
        /* Zonder ingestelde foto blijft er een vlak in de huisstijl staan */
        background: linear-gradient(160deg, #2a6086 0%, #102F49 100%);
    }
    body .main-navigation.desktop-overlay-active .tns-photo-stage img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 30%;
        transition: opacity .55s ease, transform .75s ease;
    }
    body .main-navigation.desktop-overlay-active .tns-photo-gradient {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 3;
        background: linear-gradient(to bottom,
            rgba(10,30,46,.15) 0%,
            rgba(10,30,46,0)   30%,
            rgba(10,30,46,.85) 100%);
    }
    body .main-navigation.desktop-overlay-active .tns-photo-caption { display: none; }

    /* ── Kleurbalken als voet onder de foto ── */
    body .main-navigation.desktop-overlay-active .tns-menu-bars {
        display: flex !important;
        grid-column: 1;
        grid-row: 2;
        position: relative !important;
        width: 100%;
        height: 16px;
    }
    body .main-navigation.desktop-overlay-active .tns-menu-bars span {
        flex: 1;
        height: 16px;
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .55s cubic-bezier(.77, 0, .18, 1);
    }
    body .main-navigation.desktop-overlay-active .tns-menu-bars span:nth-child(1) { background: #2a6086; }
    body .main-navigation.desktop-overlay-active .tns-menu-bars span:nth-child(2) { background: #828673; }
    body .main-navigation.desktop-overlay-active .tns-menu-bars span:nth-child(3) { background: #BFA46A; }
    body .main-navigation.desktop-overlay-active .tns-menu-bars span:nth-child(4) { background: #414246; }
    body .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span { transform: scaleX(1); }
    body .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(1) { transition-delay: .55s; }
    body .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(2) { transition-delay: .65s; }
    body .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(3) { transition-delay: .75s; }
    body .main-navigation.desktop-overlay-active.items-revealed .tns-menu-bars span:nth-child(4) { transition-delay: .85s; }

    /* ── Hoofditems ── */
    body .main-navigation.desktop-overlay-active .nav-menu {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding: 96px clamp(28px, 3vw, 56px) 40px clamp(40px, 5vw, 88px) !important;
        counter-reset: tns-ov-nr;
    }
    /* NAVIGATIE, zoals op mobiel */
    body .main-navigation.desktop-overlay-active .nav-menu::before {
        content: 'NAVIGATIE';
        display: block;
        font-family: var(--tns-font-body);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .2em;
        color: var(--tns-oker);
        margin: 0 0 14px;
    }

    body .main-navigation.desktop-overlay-active .nav-menu > li {
        position: relative;
        text-align: left !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(255,255,255,.06);
        counter-increment: tns-ov-nr;
    }
    body .main-navigation.desktop-overlay-active .nav-menu > li:last-child { border-bottom: 0; }

    /* Kleuraccent links, per item een andere huisstijlkleur */
    body .main-navigation.desktop-overlay-active .nav-menu > li::after {
        content: '';
        position: absolute;
        left: -18px;
        top: 14px;
        bottom: 14px;
        width: 0;
        transition: width .25s cubic-bezier(.25, .46, .45, .94);
    }
    body .main-navigation.desktop-overlay-active .nav-menu > li:nth-child(4n+1)::after { background: #828673; }
    body .main-navigation.desktop-overlay-active .nav-menu > li:nth-child(4n+2)::after { background: #BFA46A; }
    body .main-navigation.desktop-overlay-active .nav-menu > li:nth-child(4n+3)::after { background: #6b6c70; }
    body .main-navigation.desktop-overlay-active .nav-menu > li:nth-child(4n+4)::after { background: #2a6086; }
    body .main-navigation.desktop-overlay-active .nav-menu > li.is-actief::after,
    body .main-navigation.desktop-overlay-active .nav-menu > li:hover::after,
    body .main-navigation.desktop-overlay-active .nav-menu > li:focus-within::after { width: 3px; }

    body .main-navigation.desktop-overlay-active .nav-menu > li > a {
        display: flex !important;
        align-items: center;
        justify-content: flex-start !important;
        width: 100%;
        padding: 14px 0 14px 44px !important;
        color: rgba(255,255,255,.42) !important;
        background: transparent !important;
        font-family: var(--tns-font-heading);
        /* Zelfde grootte als de vorige overlay */
        font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
        font-weight: 700;
        line-height: 1.05;
        letter-spacing: -.01em;
        text-transform: uppercase;
        text-align: left !important;
        position: relative;
        transition: color .2s ease;
    }
    body .main-navigation.desktop-overlay-active .nav-menu > li > a::before {
        content: counter(tns-ov-nr, decimal-leading-zero) !important;
        display: block !important;
        position: absolute !important;
        left: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: auto !important;
        height: auto !important;
        background: none !important;
        font-family: var(--tns-font-body) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: .06em !important;
        color: var(--tns-oker) !important;
        opacity: .55 !important;
        line-height: 1 !important;
    }
    /* Chevron rechts; wijst naar het paneel als het item actief is */
    body .main-navigation.desktop-overlay-active .nav-menu > li > a::after {
        content: '' !important;
        display: block !important;
        position: static !important;
        margin-left: auto;
        width: 9px !important;
        height: 9px !important;
        border: 0 !important;
        border-right: 1.5px solid rgba(255,255,255,.3) !important;
        border-bottom: 1.5px solid rgba(255,255,255,.3) !important;
        background: none !important;
        transform: rotate(-45deg) !important;
        transition: border-color .2s ease, transform .3s ease;
        flex-shrink: 0;
        opacity: 1 !important;
    }
    body .main-navigation.desktop-overlay-active .nav-menu > li.is-actief > a,
    body .main-navigation.desktop-overlay-active .nav-menu > li > a:hover,
    body .main-navigation.desktop-overlay-active .nav-menu > li > a:focus-visible {
        color: #fff !important;
    }
    body .main-navigation.desktop-overlay-active .nav-menu > li.is-actief > a::before { opacity: 1 !important; }
    body .main-navigation.desktop-overlay-active .nav-menu > li.is-actief > a::after {
        border-color: var(--tns-oker) !important;
        transform: rotate(-45deg) translate(3px, 3px) !important;
    }

    /* De oude rij met subitems onder het hoofditem is vervangen door het paneel */
    body .main-navigation.desktop-overlay-active .nav-menu .sub-menu { display: none !important; }

    /* ── Paneel met subitems ── */
    body .main-navigation.desktop-overlay-active .tns-ov-paneel {
        display: flex;
        grid-column: 3;
        grid-row: 1 / 3;
        flex-direction: column;
        justify-content: center;
        padding: 96px var(--tns-header-gutter, 32px) 40px clamp(28px, 3.5vw, 56px);
        border-left: 1px solid rgba(255,255,255,.08);
        color: #fff;
        opacity: 0;
        transition: opacity .5s ease .4s;
    }
    body .main-navigation.desktop-overlay-active.items-revealed .tns-ov-paneel { opacity: 1; }

    .tns-ov-paneel__inhoud { animation: tns-ov-in .35s ease both; }
    @keyframes tns-ov-in {
        from { opacity: 0; transform: translateX(10px); }
        to   { opacity: 1; transform: none; }
    }
    .tns-ov-paneel__label {
        font-family: var(--tns-font-body);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .2em;
        text-transform: uppercase;
        color: var(--tns-oker);
        margin: 0 0 10px;
    }
    .tns-ov-paneel__tekst {
        font-size: 15px;
        line-height: 1.65;
        color: rgba(255,255,255,.62);
        max-width: 36ch;
        margin: 0 0 22px;
    }
    .tns-ov-paneel__sub { list-style: none; margin: 0; padding: 0; }
    .tns-ov-paneel__sub a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255,255,255,.06);
        color: rgba(255,255,255,.88);
        text-decoration: none;
        font-size: clamp(17px, 1.3vw, 20px);
        transition: color .2s ease, padding .25s ease;
    }
    .tns-ov-paneel__sub a::after {
        content: '';
        width: 7px;
        height: 7px;
        border-right: 1.5px solid var(--tns-oker);
        border-bottom: 1.5px solid var(--tns-oker);
        transform: rotate(-45deg);
        opacity: 0;
        transition: opacity .2s ease;
        flex-shrink: 0;
    }
    .tns-ov-paneel__sub a:hover,
    .tns-ov-paneel__sub a:focus-visible { color: var(--tns-oker); padding-left: 6px; outline: none; }
    .tns-ov-paneel__sub a:hover::after,
    .tns-ov-paneel__sub a:focus-visible::after { opacity: 1; }

    .tns-ov-paneel__cta {
        align-self: flex-start;
        margin-top: 22px;
        font-size: 14px;
        font-weight: 700;
        color: var(--tns-oker);
        text-decoration: none;
        border-bottom: 1px solid currentColor;
        padding-bottom: 2px;
    }
    .tns-ov-paneel__cta:hover { color: #fff; }

    .tns-ov-paneel__leeg {
        font-size: 18px;
        line-height: 1.55;
        color: rgba(255,255,255,.72);
        max-width: 30ch;
        margin: 0 0 22px;
    }
    .tns-ov-paneel__knop {
        align-self: flex-start;
        display: inline-flex;
        padding: 14px 32px;
        border-radius: 999px;
        background: var(--tns-oker);
        color: #fff;
        font-weight: 700;
        font-size: 15px;
        text-decoration: none;
        transition: background .2s ease;
    }
    .tns-ov-paneel__knop:hover { background: #cfb47a; color: #fff; }

    /* ── Contactgegevens over de volle breedte ── */
    body .main-navigation.desktop-overlay-active .overlay-footer {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-content: flex-start !important;
        gap: 16px clamp(32px, 5vw, 80px) !important;
        padding: 24px var(--tns-header-gutter, 32px) 28px !important;
        margin: 0 !important;
        border-top: 1px solid rgba(255,255,255,.08);
    }
    body .main-navigation.desktop-overlay-active .overlay-footer-col { align-items: flex-start !important; }
    body .main-navigation.desktop-overlay-active .overlay-footer-label {
        font-size: 11px !important;
        letter-spacing: .2em !important;
        color: rgba(255,255,255,.55) !important;
    }
    body .main-navigation.desktop-overlay-active .overlay-footer-col a,
    body .main-navigation.desktop-overlay-active .overlay-footer-col span {
        font-size: 14px !important;
        color: rgba(255,255,255,.55) !important;
    }
    body .main-navigation.desktop-overlay-active .overlay-footer-col a:hover { color: #fff !important; }
}

/* Het paneel bestaat alleen in de desktop-overlay */
.tns-ov-paneel { display: none; }

@media (prefers-reduced-motion: reduce) {
    .tns-ov-paneel__inhoud { animation: none; }
}