@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/Montserrat-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: light;
    --color-black: #111111;
    --color-dark: #1A1A1A;
    --color-mid: #777777;
    --color-silver: #D8D8D8;
    --color-accent: #C6A582;
    --color-light: #F4F4F2;
    --color-white: #FFFFFF;
    --color-text: #262626;
    --color-border: #383838;
    --font-family: "Montserrat", Arial, sans-serif;
    --container-width: 87.5rem;
    --content-width: 50rem;
    --gutter: clamp(1.25rem, 4vw, 4rem);
    --transition: 180ms ease;
}

/* Centrale publieke typografie met lokale Montserrat-fonts. */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--color-light); color: var(--color-text); font-family: var(--font-family); font-size: 1rem; line-height: 1.8; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: 0.3em; transition: color var(--transition), text-decoration-color var(--transition); }
a:hover { color: var(--color-accent); }
h1, h2, h3 { font-weight: 400; line-height: 1.2; }
.site-shell { width: min(calc(100% - var(--gutter) * 2), var(--container-width)); margin-inline: auto; }
.site-main { flex: 1; min-width: 0; }

/* Smalle infobalk boven de sticky header. */
.site-info-bar { background: var(--color-black); color: var(--color-silver); }
.site-info-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.5rem; }
.site-info-inner p { min-width: 0; overflow-wrap: anywhere; margin: 0; padding-block: 0.5rem; font-size: 0.6875rem; letter-spacing: 0.08em; line-height: 1.6; }
/* Klikvlak 32px breed; zichtbare iconafstand (12px) en uitlijning blijven gelijk. */
.social-icons { display: flex; align-items: center; gap: 0; margin-inline: -6px; }
.social-icons .social-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; min-height: 2.75rem; padding: 0; color: inherit; text-decoration: none; transition: color var(--transition); }
.social-icons .social-icon svg { display: block; flex-shrink: 0; width: 20px; height: 20px; }
.social-icons .social-icon:hover, .social-icons .social-icon:focus-visible { color: var(--color-accent); }
.social-icons .social-icon:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.info-social-links { flex-shrink: 0; margin-left: auto; }
.home-social-icons { justify-content: center; }

/* Logo blijft onvervormd, met zijn bestaande transparantie. */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--color-dark); color: var(--color-white); border-bottom: 1px solid var(--color-border); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 6.5rem; padding-block: 1rem; }
.site-brand { display: inline-flex; flex-shrink: 0; align-items: center; text-decoration: none; }
.site-brand img { width: auto; height: auto; max-width: 200px; max-height: 56px; object-fit: contain; }
.site-navigation { display: flex; align-items: center; min-width: 0; max-width: 100%; }
.navigation-list { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 2.2vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.navigation-item { position: relative; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.navigation-item > a, .submenu-toggle { position: relative; display: inline-flex; align-items: center; gap: 0.65rem; min-height: 2.75rem; padding: 0.75rem 0; background: transparent; border: 0; color: var(--color-silver); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.09em; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; text-decoration: none; cursor: pointer; transition: color var(--transition); }
.navigation-item.is-active > a, .navigation-item.is-active > .submenu-toggle { color: var(--color-white); }
.navigation-item > a:hover, .submenu-toggle:hover, .has-submenu.is-open > .submenu-toggle { color: var(--color-accent); }
.navigation-item.is-active > a::after, .navigation-item.is-active > .submenu-toggle::after { position: absolute; right: 0; bottom: 0.25rem; left: 0; height: 1px; background: var(--color-accent); content: ''; }
.navigation-arrow { width: 0.35rem; height: 0.35rem; margin-top: -0.2rem; color: var(--color-accent); border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform var(--transition); }
.has-submenu.is-open > .submenu-toggle .navigation-arrow { margin-top: 0.15rem; transform: rotate(225deg); }
.navigation-submenu { position: absolute; top: 100%; right: 0; left: auto; z-index: 25; display: none; width: max-content; min-width: min(15.5rem, calc(100vw - var(--gutter) * 2)); max-width: min(20rem, calc(100vw - var(--gutter) * 2)); margin: 0; padding: 0.5rem 1.25rem; list-style: none; background: var(--color-dark); border: 1px solid var(--color-border); }
/* Zonder JS werken desktopdropdowns nog steeds met hover en focus. */
.site-header:not(.dropdown-ready) .has-submenu:hover > .navigation-submenu,
.site-header:not(.dropdown-ready) .has-submenu:focus-within > .navigation-submenu,
.has-submenu.is-open > .navigation-submenu { display: block; }
.navigation-item:last-child .navigation-submenu { left: auto; right: 0; }
.navigation-submenu li + li { border-top: 1px solid var(--color-border); }
.navigation-submenu a { display: block; min-height: 2.75rem; padding-block: 0.85rem; color: var(--color-white); font-size: 0.6875rem; letter-spacing: 0.06em; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; text-decoration: none; }
.navigation-submenu a[aria-current="page"] { color: var(--color-silver); text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; }
.navigation-submenu a:hover, .navigation-submenu a:focus-visible { color: var(--color-accent); }

/* Mobiel menu: progressieve verbetering naar een donker fullscreenpaneel. */
.menu-toggle, .mobile-menu-top { display: none; }
.menu-toggle, .menu-close { width: 3rem; height: 3rem; flex-shrink: 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.menu-toggle-lines { position: relative; display: block; width: 1.5rem; height: 1px; margin: auto; background: currentColor; }
.menu-toggle-lines::before, .menu-toggle-lines::after { position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; content: ''; }
.menu-toggle-lines::before { top: -6px; }
.menu-toggle-lines::after { top: 6px; }
.menu-close { position: relative; }
.menu-close span::before, .menu-close span::after { position: absolute; top: 50%; left: 25%; width: 50%; height: 1px; background: currentColor; content: ''; transform: rotate(45deg); }
.menu-close span::after { transform: rotate(-45deg); }
.mobile-menu-logo { width: auto; height: auto; max-width: 150px; max-height: 42px; object-fit: contain; }
body.menu-is-open { overflow: hidden; }

/* Gedeelde publieke page-hero: compacte typografie en een rustig accent. */
.page-hero { display: flex; align-items: center; min-height: 260px; padding-block: clamp(3.5rem, 5vw, 4.5rem); background: var(--color-dark); color: var(--color-white); text-align: left; }
.page-hero > .site-shell { min-width: 0; }
.page-eyebrow { display: flex; align-items: center; gap: .75rem; margin: 0 0 .75rem; color: var(--color-accent); font-size: .6875rem; letter-spacing: .18em; line-height: 1.5; overflow-wrap: anywhere; }
.page-eyebrow::before { flex: 0 0 1.75rem; height: 1px; background: var(--color-accent); content: ''; }
.page-title { max-width: min(100%, 24ch); margin: 0; font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -.025em; line-height: 1.15; overflow-wrap: anywhere; hyphens: none; text-wrap: balance; }
.page-hero .collections-intro, .page-error-text { max-width: 42rem; margin: 1rem 0 0; color: var(--color-silver); font-size: 1rem; line-height: 1.75; overflow-wrap: anywhere; }
.page-error-text { margin-bottom: 1.25rem; }
.home-link, .outline-button, .instagram-button { max-width: 100%; overflow-wrap: anywhere; text-align: center; display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.85rem 1.75rem; border: 1px solid var(--color-accent); background: transparent; color: var(--color-white); font-size: 0.75rem; letter-spacing: 0.09em; line-height: 1.5; text-decoration: none; transition: color var(--transition), background var(--transition), border-color var(--transition); }
.home-link:hover, .outline-button:hover, .instagram-button:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-black); }
.page-figure { position: relative; margin-block: 0; padding-bottom: 0; }
.page-media { background: linear-gradient(to bottom, var(--color-dark) 15%, var(--color-light)); }
.page-image { width: 100%; height: auto; max-height: 52rem; object-fit: cover; }

/* WYSIWYG-inhoud blijft ongewijzigd gerenderd op circa 800px breedte. */
.page-content { width: min(calc(100% - var(--gutter) * 2), var(--content-width)); margin-inline: auto; padding-block: clamp(3rem, 6vw, 6rem) clamp(4rem, 8vw, 8rem); font-size: 1.0625rem; line-height: 1.9; overflow-wrap: anywhere; }
.page-content p { margin: 0 0 1.6rem; }
.page-content h2 { margin: 3.5rem 0 1.4rem; color: var(--color-black); font-size: clamp(1.75rem, 3vw, 2.4rem); letter-spacing: -0.025em; }
.page-content h3 { margin: 2.5rem 0 1.1rem; color: var(--color-black); font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -0.015em; }
.page-content ul, .page-content ol { margin: 0 0 1.6rem; padding-left: 1.5rem; }
.page-content li { padding-left: 0.3rem; margin-block: 0.5rem; }
.page-content blockquote { margin: 2.5rem 0; padding: 0.5rem 0 0.5rem 1.75rem; border-left: 1px solid var(--color-mid); color: var(--color-black); font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.7; }
.page-content a { color: var(--color-black); text-decoration-color: var(--color-mid); text-decoration-thickness: 1px; }
.page-content a:hover { color: var(--color-mid); }
.page-content img { height: auto; margin-block: 2rem; }
.page-content > :first-child { margin-top: 0; }
.page-content > :last-child, .page-content blockquote > :last-child { margin-bottom: 0; }
.page-content:empty { padding-top: 0; }

/* Voorbereiding voor toekomstige secties, zonder feed of homepage-inhoud.
   Gebruik: VOLG ONS OP INSTAGRAM met de gedeelde social-iconen
   Gebruik: PRIVATE SHOPPING @ SKIFF & SHOPPING @ HOME / EXCLUSIEVE MERKEN */
.instagram-section { padding-block: clamp(3rem, 6vw, 6rem); background: var(--color-dark); color: var(--color-white); text-align: center; }
.instagram-heading, .section-heading { margin: 0 0 1.75rem; font-size: clamp(1.25rem, 2.8vw, 2.25rem); font-weight: 400; letter-spacing: 0.1em; line-height: 1.4; }
.instagram-button { min-width: 11rem; }

/* Footer met de bestaande informatieblokken, een compacte kaart en fijne lijnen. */
.site-footer { padding-top: clamp(3rem, 6vw, 5rem); background: var(--color-black); color: var(--color-silver); border-top: 1px solid var(--color-border); }
.footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem); padding-bottom: clamp(3rem, 5vw, 5rem); }
.footer-heading { margin: 0 0 1.5rem; color: var(--color-white); font-size: 0.75rem; letter-spacing: 0.14em; line-height: 1.5; }
.footer-column { overflow-wrap: anywhere; min-width: 0; font-size: 0.875rem; }
.footer-column p { margin: 0; }
.footer-column address { font-style: normal; }
.footer-column .footer-vat { margin-top: .65rem; font-size: .8rem; }
.site-location-icon { display: inline-block; flex: none; width: 20px; height: 20px; color: #D64545; vertical-align: middle; margin-right: .3rem; }
.footer-social-icons { margin-top: 11px; }
.footer-column a { display: inline-block; min-height: 2.75rem; padding-block: 0.5rem; text-decoration: none; overflow-wrap: anywhere; }
/* Alleen de contactregels: compacte afstanden, ook op smartphone. */
.footer-column .footer-email { min-height: 0; padding-block: 0; }
.footer-column .footer-phone a { min-height: 0; padding-block: 0; }
.footer-column .footer-email + .footer-phone { margin-top: 12px; }
.footer-column .footer-phone + .footer-phone { margin-top: 5px; }
.footer-column .footer-phone + .footer-social-icons { margin-top: 14px; }
.footer-column a:hover, .footer-bottom a:hover { color: var(--color-accent); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 2rem; padding-block: 1.25rem; border-top: 1px solid var(--color-border); font-size: 0.6875rem; letter-spacing: 0.025em; }
.footer-bottom p { min-width: 0; max-width: 100%; overflow-wrap: anywhere; margin: 0; }
.footer-bottom a { max-width: 100%; overflow-wrap: anywhere; display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.footer-bottom .footer-credit--mobile { display: none; }
.footer-legal-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.footer-credit--desktop a { color: var(--color-accent); }
.footer-map { min-width: 0; margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.footer-map .footer-heading { margin-bottom: .75rem; }
.footer-map-container { width: 100%; height: 320px; overflow: hidden; border: 1px solid var(--color-border); border-radius: .75rem; background: var(--color-dark); }
.footer-map-frame { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.9) brightness(.9) contrast(.9) sepia(.12); }
.footer-map-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.25rem; margin-top: .5rem; padding-block: .25rem; color: var(--color-accent); font-size: .75rem; text-decoration: none; }
.footer-map-link:hover { color: var(--color-white); }

/* Dit breakpoint blijft gelijk aan site.js. */
@media (max-width: 63.99rem) {
    .site-header-inner { flex-wrap: wrap; gap: 0; min-height: 5.5rem; }
    .site-brand img { height: 48px; }
    .site-navigation { width: 100%; padding-top: 1rem; }
    .navigation-list { flex-wrap: wrap; gap: 0.5rem 1.5rem; }
    .navigation-submenu { position: static; display: block; width: auto; max-width: 100%; min-width: 0; margin-top: 0.25rem; border: 0; border-left: 1px solid var(--color-border); }
    .mobile-menu-ready .site-header-inner { flex-wrap: nowrap; padding-block: 0.75rem; }
    .mobile-menu-ready .menu-toggle { display: block; margin-right: -0.5rem; }
    .mobile-menu-ready .site-navigation { overflow-x: hidden; position: fixed; inset: 0; z-index: 30; display: block; width: 100%; height: 100vh; height: 100dvh; padding: 1rem var(--gutter) max(2rem, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--color-dark); }
    .mobile-menu-ready .mobile-menu-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
    .menu-close { margin-right: -0.5rem; }
    .mobile-menu-ready .navigation-list { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding-block: 1.5rem; }
    .mobile-menu-ready .navigation-item { border-bottom: 1px solid var(--color-border); }
    .mobile-menu-ready .navigation-item > a, .mobile-menu-ready .submenu-toggle { display: flex; width: 100%; justify-content: space-between; padding-block: 1rem; font-size: clamp(1.25rem, 3.5vw, 2rem); letter-spacing: 0.03em; white-space: normal; }
    .mobile-menu-ready .navigation-item.is-active > a::after, .mobile-menu-ready .navigation-item.is-active > .submenu-toggle::after { right: auto; bottom: 0.6rem; width: 2rem; }
    .mobile-menu-ready .navigation-submenu { display: none; margin: 0 0 1rem; padding: 0 0 0 1.25rem; }
    .mobile-menu-ready .has-submenu.is-open > .navigation-submenu { display: block; }
    .mobile-menu-ready .navigation-submenu a { padding-block: 0.8rem; font-size: 0.8125rem; white-space: normal; }
    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
    .footer-map-container { height: 280px; }
}
@media (max-width: 39.99rem) {
    .site-info-inner { gap: 0.75rem; }
    .site-info-inner p { max-width: 40ch; font-size: 0.5625rem; letter-spacing: 0.04em; }
    .site-header-inner { min-height: 4.75rem; }
    .site-brand img, .mobile-menu-logo { height: auto; max-width: 150px; max-height: 42px; }
    .page-hero { min-height: 0; padding-block: clamp(55px, 14vw, 64px); }
    .page-title { font-size: clamp(2.125rem, 9vw, 2.75rem); hyphens: auto; }
    .page-eyebrow { font-size: .65625rem; letter-spacing: .16em; }
    .page-eyebrow::before { flex-basis: 1.5rem; }
    .page-hero .collections-intro, .page-error-text { font-size: .9375rem; line-height: 1.7; }
    .page-content { padding-block: 2.5rem 3.5rem; font-size: 1rem; line-height: 1.85; }
    .page-content h2 { margin-top: 2.5rem; }
    .page-content blockquote { padding-left: 1.2rem; }
    .site-footer { padding-top: 1.5rem; }
    .footer-map { margin-bottom: 1.25rem; }
    .footer-map-container { height: 220px; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; padding-bottom: 1.25rem; }
    .footer-column { font-size: .8125rem; line-height: 1.6; }
    .footer-column--hours { grid-column: 1 / -1; }
    .footer-heading { margin-bottom: .5rem; font-size: .6875rem; letter-spacing: .1em; }
    .footer-column a { min-height: 2.25rem; padding-block: .25rem; }
    .footer-column .footer-email { min-height: 1.5rem; padding: 0; }
    .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; padding-block: .75rem; font-size: .625rem; line-height: 1.5; letter-spacing: 0; }
    .footer-bottom > p:first-child { flex: 0 1 auto; }
    .footer-bottom p, .footer-bottom a { overflow-wrap: normal; word-break: normal; hyphens: none; }
    .footer-bottom a { min-height: 2.25rem; padding-block: .25rem; }
    .footer-bottom > a, .footer-bottom .footer-legal-links { flex: 0 0 auto; white-space: nowrap; }
    .footer-bottom .footer-credit { flex: 0 0 100%; text-align: center; }
    .footer-bottom .footer-credit--desktop { display: none; }
    .footer-bottom .footer-credit--mobile { display: block; padding-block: .5rem; }
    .footer-bottom .footer-credit--mobile a { display: inline; min-height: 0; padding: 0; color: var(--color-accent); font-weight: 600; white-space: nowrap; }
    .footer-bottom .footer-credit--mobile a:hover,
    .footer-bottom .footer-credit--mobile a:focus-visible { color: var(--color-white); text-decoration: underline; text-decoration-thickness: 1px; }
    .footer-bottom .footer-credit--mobile a:focus-visible { outline-offset: 3px; }
}

/* Toegankelijkheid */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 5px; }
.page-content :focus-visible { outline-color: var(--color-mid); }
.site-main:focus { outline: none; }
.skip-link { position: fixed; top: -10rem; left: var(--gutter); z-index: 40; padding: 0.75rem 1rem; background: var(--color-white); color: var(--color-black); }
.skip-link:focus { top: 0.75rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Publieke homepage: zwart/wit/grijs, editorial beeldvlakken en rustige CTA's. */
.home-main { background: var(--color-dark); color: var(--color-white); }
.home-eyebrow { margin: 0 0 1.5rem; color: var(--color-accent); font-size: 0.6875rem; letter-spacing: 0.22em; line-height: 1.5; }
.home-section-title { margin: 0 0 1.5rem; font-size: clamp(1.75rem, 3.2vw, 3rem); letter-spacing: 0.035em; line-height: 1.2; overflow-wrap: anywhere; }
.home-main .outline-button { max-width: 100%; text-align: center; }
.home-main .outline-button:focus-visible, .home-main .instagram-button:focus-visible { outline-offset: 6px; }
.editorial-media { position: relative; overflow: hidden; background: #242424; }
.editorial-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.35) contrast(1.08); }
/* Neutrale placeholders; geen nagebootste foto's, merklogo's of externe assets. */
.media-placeholder { background: linear-gradient(135deg, #353535, #202020 55%, #171717); }
.media-placeholder--hero-1 { background: radial-gradient(ellipse at 76% 35%, #565656 0%, #2c2c2c 30%, #161616 75%); }
.media-placeholder--hero-2 { background: linear-gradient(115deg, #171717 20%, #444444 72%, #242424); }
.media-placeholder--hero-3 { background: radial-gradient(ellipse at 65% 58%, #4b4b4b, #202020 55%, #171717); }
.media-placeholder--welcome { background: linear-gradient(120deg, #202020, #494949 55%, #242424); }

/* Split hero: links een rustig wandpaneel met de tekst, rechts de foto (geen tekst over beeld).
   Zonder JS blijft de eerste slide met CTA beschikbaar. */
.home-hero { --hero-panel-width: 40%; position: relative; isolation: isolate; background: var(--color-dark); }
.hero-slide { position: relative; display: none; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); min-height: clamp(26rem, 38vw, 46rem); }
.hero-slide.is-active { display: grid; }
/* Luxe winkelwand: mat paneel, zacht licht van boven en een dunne accentlijst (klantfeedback: geen verticale naden). */
.hero-panel {
    position: relative; display: flex; align-items: center; min-width: 0;
    padding: clamp(3rem, 5vw, 5rem) clamp(1.5rem, 3vw, 3.5rem) 5.5rem var(--gutter);
    background:
        radial-gradient(ellipse 90% 55% at 35% 0%, rgb(255 255 255 / 6%), transparent 72%),
        linear-gradient(180deg, #1e1e1e, #161616);
    box-shadow: inset -1px 0 0 rgb(255 255 255 / 6%);
}
.hero-panel::before { position: absolute; inset: clamp(.75rem, 1.4vw, 1.5rem); content: ''; border: 1px solid rgb(198 165 130 / 24%); pointer-events: none; }
.hero-content { position: relative; min-width: 0; max-width: 38rem; }
.hero-content::before { display: block; width: 2.5rem; height: 1px; margin-bottom: clamp(1.25rem, 2vw, 2rem); background: var(--color-accent); content: ''; }
.hero-title { margin: 0; font-size: clamp(1.75rem, 2.5vw, 3rem); font-weight: 400; letter-spacing: 0.02em; line-height: 1.2; overflow-wrap: break-word; }
.hero-title span { display: block; }
.hero-text { max-width: 36ch; margin: 1.25rem 0 2rem; color: var(--color-silver); font-size: 0.8125rem; letter-spacing: 0.16em; line-height: 1.9; }
.hero-cta { color: var(--color-white); }
.hero-media { position: relative; min-width: 0; overflow: hidden; }
.hero-media img { position: absolute; inset: 0; display: block; object-position: center; }
.hero-slider-ready .hero-slides { display: grid; }
.hero-slider-ready .hero-slide { display: grid; grid-area: 1 / 1; width: 100%; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 800ms ease, visibility 800ms; }
.hero-slider-ready .hero-slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 1; }
/* Bediening onderaan in het paneel, nooit over de foto. */
.hero-controls { position: absolute; bottom: clamp(1.25rem, 2vw, 2rem); left: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: var(--hero-panel-width); padding-inline: var(--gutter) clamp(1.5rem, 3vw, 3.5rem); }
.hero-dots { display: flex; gap: 0.25rem; }
.hero-dot { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: transparent; color: var(--color-mid); cursor: pointer; }
.hero-dot span { width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; transition: background var(--transition), transform var(--transition); }
.hero-dot[aria-pressed="true"] span { background: var(--color-accent); border-color: var(--color-accent); transform: scale(1.3); }
/* Pauzeknop als icoon: twee streepjes tijdens afspelen, een afspeeldriehoek wanneer gepauzeerd. */
.hero-pause { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid rgb(216 216 216 / 30%); background: transparent; color: var(--color-silver); cursor: pointer; transition: color var(--transition), border-color var(--transition); }
.hero-pause:hover { color: var(--color-accent); border-color: var(--color-accent); }
.hero-pause-icon { display: block; width: 8px; height: 10px; border-inline: 2px solid currentColor; }
.hero-pause[data-state="paused"] .hero-pause-icon { width: 8px; border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
@media (forced-colors: active) { .hero-pause-icon { forced-color-adjust: none; border-color: ButtonText; } .hero-pause[data-state="paused"] .hero-pause-icon { background: ButtonText; } }

/* Vier compacte USP's sluiten aan op de donkere hero. */
.home-usps { padding-block: clamp(2rem, 4vw, 3.5rem); background: var(--color-dark); }
.usp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.usp-item { min-width: 0; padding: 2rem clamp(1rem, 2vw, 2rem); text-align: center; }
.usp-item + .usp-item { border-left: 1px solid var(--color-border); }
.usp-item svg { display: block; margin: 0 auto 1.25rem; color: var(--color-accent); }
.usp-item h2 { overflow-wrap: anywhere; margin: 0 0 0.75rem; font-size: 0.75rem; letter-spacing: 0.09em; line-height: 1.5; }
.usp-item p { overflow-wrap: anywhere; max-width: 30ch; margin: 0 auto; color: var(--color-silver); font-size: 0.8125rem; line-height: 1.8; }

/* Beeld/tekst 60/40; de beeldranden lopen over in de sectie. */
.home-welcome { padding-block: clamp(2rem, 4vw, 4rem) clamp(3rem, 6vw, 6rem); }
.home-split { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; }
.split-media { min-height: 32rem; height: 100%; }
/* Welkomstfoto in originele kleuren (klantfeedback): geen gedempte editorial-filter en geen donkere overlay. */
.split-media > img { filter: none; }
.split-copy { position: relative; padding: clamp(2rem, 4vw, 4rem) 0 clamp(2rem, 4vw, 4rem) clamp(2rem, 4vw, 4rem); }
.split-copy > p:not(.home-eyebrow), .private-copy > p:not(.home-eyebrow) { max-width: 48ch; margin: 0 0 2rem; color: var(--color-silver); font-size: 1rem; line-height: 1.9; }

/* Gepubliceerde merken: een flexibel grid, ook bij één merk zonder logo. */
.home-brands { padding-block: clamp(3rem, 5vw, 5rem); background: var(--color-black); border-block: 1px solid var(--color-border); }
.home-section-intro { max-width: 48rem; margin: 0 auto 2.5rem; text-align: center; }
.home-section-intro::after, .home-instagram .instagram-heading::after { display: block; width: 3rem; height: 1px; margin: 1.75rem auto 0; background: var(--color-accent); content: ''; }
.home-section-intro p { margin: 0; color: var(--color-silver); }
.brand-grid { display: grid; grid-template-columns: repeat(var(--brand-columns, 5), minmax(0, 1fr)); align-items: stretch; gap: 0; margin: 0; padding: 0; list-style: none; background: transparent; }
.brand-grid li { display: flex; min-width: 0; }
/* Iedere scheidingslijn hoort bij precies één tegel; geen buitenkaders. */
.brand-grid li + li { border-left: 1px solid var(--color-border); }
.brand-grid li:nth-child(5n+1) { border-left: 0; }
.brand-grid li:nth-child(n+6) { border-top: 1px solid var(--color-border); }
.brand-grid a, .brand-grid .brand-tile-static { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: center; min-height: 7rem; padding: 1.25rem 1rem; border: 0; color: var(--color-silver); line-height: 1.6; text-align: center; text-decoration: none; overflow-wrap: anywhere; transition: color 200ms ease, background-color 200ms ease; }
.brand-grid a:hover, .brand-grid a:focus-visible { color: var(--color-accent); background: rgb(198 165 130 / 4%); }
.brand-grid a:focus-visible { outline-offset: -6px; }
.brand-grid-logo { width: auto; height: auto; max-width: 100%; max-height: 4rem; object-fit: contain; filter: brightness(0) invert(1); opacity: .85; transition: opacity 200ms ease, transform 200ms ease; }
.brand-grid a:hover .brand-grid-logo, .brand-grid a:focus-visible .brand-grid-logo { opacity: 1; transform: scale(1.025); }
.brand-name { font-size: clamp(0.8rem, 1.1vw, 1rem); letter-spacing: 0.04em; }

/* Private shopping: tekst links, optionele afbeelding rechts. */
.home-private { padding-block: clamp(3rem, 6vw, 6rem); background: linear-gradient(var(--color-black), var(--color-dark) 35%); }
.home-private-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
.home-private-inner--text-only { grid-template-columns: minmax(0, 1fr); }
.private-copy { position: relative; z-index: 1; min-width: 0; }
.private-copy .home-section-title { max-width: 22ch; font-size: clamp(1.65rem, 2.8vw, 2.75rem); }
.home-private-inner--text-only .private-copy .home-section-title,
.home-private-inner--text-only .private-copy > p:not(.home-eyebrow) { max-width: none; }
.private-media { width: 100%; min-width: 0; aspect-ratio: 4 / 3; border: 1px solid var(--color-border); border-radius: .75rem; }
.private-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.home-instagram { padding-top: clamp(2rem, 4vw, 4rem); }
.instagram-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; margin-top: clamp(2rem, 4vw, 3.5rem); }
.instagram-tile { display: block; min-width: 0; aspect-ratio: 4 / 5; }
.instagram-tile img { position: absolute; inset: 0; display: block; object-position: center top; transform-origin: center top; }
.instagram-tile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.instagram-tile:nth-child(even) { background: linear-gradient(35deg, #1c1c1c, #444444); }
.instagram-tile:nth-child(3n) { background: linear-gradient(145deg, #3f3f3f, #222222); }
.instagram-tile::after { position: absolute; inset: 0; content: ''; pointer-events: none; background: linear-gradient(to top, rgb(26 26 26 / 45%), transparent 65%); }

@media (max-width: 74.99rem) {
    .brand-grid a, .brand-grid .brand-tile-static { min-height: 6rem; }
}
@media (max-width: 63.99rem) {
    .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .brand-grid li:nth-child(n) { border-left: 0; border-top: 0; }
    .brand-grid li:nth-child(even) { border-left: 1px solid var(--color-border); }
    .brand-grid li:nth-child(n+3) { border-top: 1px solid var(--color-border); }
    .brand-grid li:last-child:nth-child(odd) { grid-column: 1 / -1; }
    /* Tablet en smartphone: foto bovenaan, daaronder het tekstpaneel. */
    .home-hero { --hero-panel-width: 100%; }
    .hero-slide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 0; }
    .hero-media { order: -1; aspect-ratio: 16 / 9; }
    /* Tekst onderaan uitlijnen: de knop staat bij elke slide vlak boven de bolletjes. */
    .hero-panel { align-items: flex-end; padding: clamp(1.75rem, 4vw, 2.5rem) var(--gutter) 4.25rem; box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%); }
    .hero-text { margin: .875rem 0 1.5rem; }
    .hero-controls { bottom: 1rem; }
    .hero-content { max-width: 40rem; }
    .hero-title { font-size: clamp(1.6rem, 5.2vw, 2.5rem); }
    .usp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .usp-item:nth-child(3) { border-left: 0; }
    .usp-item:nth-child(n+3) { border-top: 1px solid var(--color-border); }
    .home-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .split-media { min-height: 27rem; }
    .split-copy { padding-left: 2rem; }
    .instagram-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
    .home-split, .home-private-inner { grid-template-columns: minmax(0, 1fr); }
    .split-media { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
    .split-copy { padding: 1.5rem 0 0; }
    .home-private-inner { gap: 1.5rem; }
    .instagram-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Oneven laatste beeld gecentreerd in plaats van een leeg vak ernaast. */
    .instagram-tile:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .375rem); }
}
@media (max-width: 39.99rem) {
    /* Smartphone: compact tekstpaneel; bolletjes vlak onder de knop. */
    .hero-panel { padding-block: 1.25rem 3.25rem; }
    .hero-panel::before { inset: .5rem; }
    .hero-content::before { width: 1.75rem; margin-bottom: .75rem; }
    .hero-title { font-size: clamp(1.3rem, 5.8vw, 1.75rem); letter-spacing: 0.01em; line-height: 1.15; }
    .hero-text { margin-block: .5rem .875rem; font-size: 0.6875rem; letter-spacing: 0.1em; line-height: 1.6; }
    .hero-cta { min-height: 2.5rem; padding: .45rem 1.1rem; font-size: 0.65rem; letter-spacing: 0.08em; }
    .hero-controls { bottom: .375rem; }
    .hero-dot { width: 2.25rem; height: 2.25rem; }
    .hero-pause { width: 2.25rem; height: 2.25rem; }
    .home-eyebrow { margin-bottom: 1rem; font-size: 0.625rem; }
    .home-section-title { font-size: clamp(1.5rem, 6vw, 2rem); }
    .usp-item { padding: 1.5rem 0.75rem; }
    .usp-item svg { width: 28px; height: 28px; margin-bottom: 1rem; }
    .usp-item h2 { font-size: 0.625rem; letter-spacing: 0.045em; }
    .usp-item p { font-size: 0.75rem; line-height: 1.7; }
    .split-copy > p:not(.home-eyebrow), .private-copy > p:not(.home-eyebrow) { font-size: 0.9375rem; }
    .brand-grid a, .brand-grid .brand-tile-static { min-height: 5.5rem; padding: 1rem .75rem; }
    .private-copy .home-section-title { font-size: clamp(1.5rem, 5.8vw, 2rem); }
    .instagram-grid { gap: 0.5rem; }
    .instagram-tile:last-child:nth-child(odd) { width: calc(50% - .25rem); }
}
@media (max-width: 22rem) {
    .usp-grid { grid-template-columns: minmax(0, 1fr); }
    .usp-item + .usp-item { border-left: 0; border-top: 1px solid var(--color-border); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-slider-ready .hero-slide { transition: none; }
    .brand-grid a, .brand-grid-logo { transition: none; }
    .brand-grid a:hover .brand-grid-logo, .brand-grid a:focus-visible .brand-grid-logo { transform: none; }
}

/* Publieke merkdetailpagina: dezelfde typografie en donkere editorial huisstijl. */
.brand-main { background: var(--color-dark); color: var(--color-white); }
.brand-featured-media { background: var(--color-dark); }
.brand-featured-image { width: 100%; height: auto; max-height: 52rem; object-fit: cover; filter: saturate(0.35) contrast(1.08); mask-image: linear-gradient(to bottom, #000 80%, transparent); }
.brand-content-wrap { padding-bottom: clamp(3rem, 6vw, 6rem); }
.beauty-detail-main .beauty-content-wrap { background: var(--color-light); color: var(--color-text); }
.beauty-content-wrap > .page-content { padding-block: clamp(2rem, 4vw, 4rem) 0; }
.beauty-content-wrap .brand-website-button { color: var(--color-text); }
.brand-content { padding-bottom: 3rem; }
.brand-content h2, .brand-content h3 { color: var(--color-white); }
.brand-content blockquote { color: var(--color-silver); border-left-color: var(--color-accent); }
.brand-content a { color: var(--color-silver); text-decoration-color: var(--color-accent); }
.brand-content a:hover { color: var(--color-accent); }
.brand-content :focus-visible { outline-color: var(--color-accent); }
.brand-details { display: flex; flex-direction: column; align-items: flex-start; gap: 2.5rem; width: min(calc(100% - var(--gutter) * 2), var(--content-width)); margin-inline: auto; padding-top: clamp(2.5rem, 5vw, 5rem); }
.brand-content + .brand-details { padding-top: 0; }
.brand-logo { width: auto; height: auto; max-width: min(100%, 320px); max-height: 9rem; object-fit: contain; }
.brand-website-button { max-width: 100%; text-align: center; }
@media (max-width: 39.99rem) {
    .brand-grid-logo { max-height: 3rem; }
    .brand-name { font-size: 0.75rem; hyphens: auto; }
    .brand-content { padding-bottom: 2rem; }
    .brand-details { gap: 1.75rem; }
    .brand-logo { max-height: 7rem; }
}

/* Merkenoverzicht /collections: open editorial rijen met optionele beelden. */
.collections-section { padding-bottom: clamp(3rem, 7vw, 7rem); }
.collections-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2rem; margin: 0; padding: 0; list-style: none; }
.collections-grid li { min-width: 0; }
.collection-link { display: flex; flex-direction: column; height: 100%; border-bottom: 1px solid var(--color-border); color: var(--color-white); text-decoration: none; transition: color var(--transition), border-color var(--transition); }
.collection-link:hover { color: var(--color-accent); border-color: var(--color-accent); }
.collection-media { aspect-ratio: 4 / 3; }
.collection-media::after { position: absolute; inset: 0; content: ''; pointer-events: none; background: linear-gradient(to top, var(--color-dark), transparent 35%); }
.collection-caption { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: 1.5rem 0 2rem; }
.collection-logo { width: auto; height: auto; max-width: min(100%, 240px); max-height: 5rem; object-fit: contain; }
.collection-name { margin: 0; font-size: clamp(1.25rem, 2vw, 1.75rem); letter-spacing: .025em; line-height: 1.3; overflow-wrap: anywhere; }
.collection-cta { flex-wrap: wrap; max-width: 100%; overflow-wrap: anywhere; display: flex; align-items: center; gap: .75rem; margin-top: auto; color: var(--color-silver); font-size: .6875rem; letter-spacing: .09em; }
.collection-link:hover .collection-cta { color: var(--color-accent); }
.collection-link:focus-visible .collection-cta { text-decoration: underline; }
.collections-empty { margin: 0; padding-block: 2rem; border-block: 1px solid var(--color-border); color: var(--color-silver); }
@media (max-width: 63.99rem) { .collections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; } }
@media (max-width: 39.99rem) { .collections-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; } .collection-caption { padding-block: 1rem 1.5rem; } }

/* Beauty deelt de bestaande merken- en collectiecomponenten. */
.navigation-dropdown-heading { display: flex; align-items: center; }
.navigation-parent-link { min-width: 0; overflow-wrap: anywhere; position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding: .75rem 0; color: var(--color-silver); font-size: .75rem; letter-spacing: .09em; line-height: 1.5; text-decoration: none; }
.navigation-parent-link:hover, .has-submenu.is-open .navigation-parent-link { color: var(--color-accent); }
.navigation-item.is-active .navigation-parent-link::after { position: absolute; right: 0; bottom: .25rem; left: 0; height: 1px; background: var(--color-accent); content: ''; }
.submenu-toggle--arrow { justify-content: center; width: 2.75rem; min-height: 2.75rem; padding: 0; flex: none; }
.has-submenu.is-open .navigation-dropdown-heading .navigation-arrow { margin-top: .15rem; transform: rotate(225deg); }
/* Desktop: één vaste afstand tussen alle hoofditems; de chevron telt mee als deel van zijn item. */
@media (min-width: 64rem) {
    .navigation-list { gap: clamp(1.5rem, 3.3vw, 2.125rem); }
    .navigation-dropdown-heading { gap: .5rem; }
    .submenu-toggle--arrow { width: auto; min-width: 0; }
    /* Onzichtbare klikzone rond de smalle chevron, zonder extra layoutbreedte. */
    .submenu-toggle--arrow::before { position: absolute; top: 0; right: -.75rem; bottom: 0; left: -.5rem; content: ''; }
    .submenu-toggle--arrow .navigation-arrow { margin-top: -.08rem; }
}
@media (max-width: 63.99rem) {
    .mobile-menu-ready .navigation-parent-link { flex: 1; padding-block: 1rem; font-size: clamp(1.25rem, 3.5vw, 2rem); letter-spacing: .03em; }
    .mobile-menu-ready .submenu-toggle--arrow { width: 3rem; min-height: 3rem; padding: 0; justify-content: center; }
    .mobile-menu-ready .navigation-item.is-active .navigation-parent-link::after { right: auto; bottom: .6rem; width: 2rem; }
}

/* Fotogalerij en contact delen de bestaande SKIFF-breedtes, kleuren en typografie. */
.photo-gallery-section { max-width: 1360px; margin-inline: auto; padding-block: clamp(2rem, 4vw, 4rem) clamp(3rem, 6vw, 6rem); }
.photo-gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.5vw, 1.25rem); margin: 0; padding: 0; list-style: none; }
.photo-gallery-grid li { min-width: 0; }
.photo-gallery-main .photo-gallery-pagination { margin-top: clamp(1.75rem, 4vw, 3rem); }
.photo-gallery-main .photo-gallery-pagination ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4rem; margin: 0; padding: .25rem; list-style: none; }
.photo-gallery-main .photo-gallery-pagination li { min-width: 0; max-width: 100%; }
.photo-gallery-main .photo-gallery-pagination :is(a, [aria-current="page"]) { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.5rem; max-width: 100%; padding: .4rem .7rem; border: 1px solid var(--color-silver); border-radius: .55rem; color: var(--color-text); font-size: .875rem; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; }
.photo-gallery-main .photo-gallery-pagination a:hover { border-color: #C6A582; background: var(--color-light); }
.photo-gallery-main .photo-gallery-pagination a:focus-visible { outline: 2px solid #C6A582; outline-offset: 3px; }
.photo-gallery-main .photo-gallery-pagination [aria-current="page"] { border-color: #C6A582; background: #C6A582; color: var(--color-black); font-weight: 600; }
.photo-gallery-main .photo-gallery-pagination-gap { padding-inline: .2rem; color: var(--color-mid); }
.brand-collection-gallery { background: var(--color-light); color: var(--color-text); padding-block: clamp(2rem, 4vw, 4rem) clamp(3rem, 6vw, 6rem); }
.brand-collection-gallery .photo-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.photo-gallery-link { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--color-white); }
.photo-gallery-link img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition), opacity var(--transition); }
.photo-gallery-link:hover img { transform: scale(1.025); opacity: .92; }
.photo-gallery-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
.gallery-lightbox { width: min(1200px, calc(100vw - 2rem)); max-width: 100%; max-height: 92vh; max-height: 92svh; padding: 0; border: 1px solid var(--color-accent); background: var(--color-black); color: var(--color-white); }
.gallery-lightbox::backdrop { background: rgba(0, 0, 0, .85); }
.gallery-lightbox-content { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: .5rem; padding: 3.25rem .75rem 1rem; }
.gallery-lightbox figure { min-width: 0; margin: 0; }
/* Ook in liggende smartphonestand past foto + bijschrift binnen de lightbox. */
.gallery-lightbox figure img { width: 100%; height: min(72vh, 800px, calc(92vh - 7rem)); height: min(72svh, 800px, calc(92svh - 7rem)); object-fit: contain; }
.gallery-lightbox figcaption { min-height: 1.5em; margin-top: .75rem; color: var(--color-silver); font-size: .85rem; text-align: center; overflow-wrap: anywhere; }
.gallery-lightbox button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-border); background: var(--color-dark); color: var(--color-white); font-size: 1.25rem; cursor: pointer; }
.gallery-lightbox button:hover { border-color: var(--color-accent); color: var(--color-accent); }
.gallery-lightbox button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.gallery-lightbox-close { position: absolute; top: .5rem; right: .75rem; }
.contact-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(2rem, 4vw, 4rem) clamp(3rem, 6vw, 6rem); }
.contact-information, .contact-form-panel { min-width: 0; }
.contact-information h2, .contact-form-panel h2 { margin-top: 0; font-size: clamp(1.5rem, 2vw, 2rem); }
.contact-info-block { margin-top: 2rem; overflow-wrap: anywhere; }
.contact-info-block h3 { margin: 0 0 .6rem; color: var(--color-mid); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.contact-info-block p { margin: 0; }
.contact-map-link { display: inline-block; margin-top: .75rem; }
.contact-map-container { width: min(100%, 320px); height: 170px; margin-top: .75rem; overflow: hidden; border: 1px solid var(--color-silver); border-radius: .75rem; background: var(--color-dark); }
.contact-information .contact-social-links { margin-top: 2rem; }
@media (max-width: 700px) { .contact-map-container { width: 100%; } }
.contact-form-panel { padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid var(--color-silver); background: var(--color-white); }
.contact-field { margin-top: 1.25rem; }
.contact-field label { display: block; margin-bottom: .4rem; font-size: .9rem; }
.contact-field input:not([type="checkbox"]), .contact-field textarea { width: 100%; min-width: 0; padding: .8rem; border: 1px solid var(--color-silver); border-radius: 0; background: var(--color-light); color: var(--color-text); font: inherit; }
.contact-field textarea { resize: vertical; }
.contact-field input:focus-visible, .contact-field textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.contact-field [aria-invalid="true"] { border-color: #9C3930; }
.contact-field .contact-consent { display: flex; align-items: flex-start; gap: .75rem; margin: 0; font-size: .85rem; }
.contact-consent span { min-width: 0; overflow-wrap: anywhere; }
.contact-consent input { flex: none; margin-top: .4rem; accent-color: var(--color-accent); }
.contact-submit { margin-top: 1.5rem; background: var(--color-black); color: var(--color-white); cursor: pointer; }
.contact-notice { padding: 1rem; border: 1px solid var(--color-accent); overflow-wrap: anywhere; }
.contact-notice-error, .contact-field-error { color: #87362E; }
.contact-field-error { margin: .35rem 0 0; font-size: .85rem; }
.contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 1100px) { .photo-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px) { .brand-collection-gallery .photo-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .brand-collection-gallery .photo-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .brand-collection-gallery .photo-gallery-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .photo-gallery-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .photo-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } }
@media (max-width: 700px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } .contact-submit { width: 100%; } .gallery-lightbox-content { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: .25rem; padding-inline: .35rem; } .gallery-lightbox-prev, .gallery-lightbox-next { width: 36px !important; } }
@media (prefers-reduced-motion: reduce) { .photo-gallery-link img { transition: none; } .photo-gallery-link:hover img { transform: none; } }

/* Mobiele header: compacte bovenbalk en rustige menu-overgangen. */
@media (max-width: 63.99rem) {
    .mobile-menu-ready .site-navigation {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 240ms ease, transform 240ms ease, visibility 0s linear 240ms;
    }
    .menu-is-open .mobile-menu-ready .site-navigation {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition-delay: 0s;
    }
    .mobile-menu-ready :is(.menu-toggle, .menu-close) .menu-toggle-lines {
        position: relative;
        display: block;
        width: 22px;
        height: 2px;
        margin: auto;
        border-radius: 2px;
        background: currentColor;
        transition: background-color 200ms ease;
    }
    .mobile-menu-ready :is(.menu-toggle, .menu-close) .menu-toggle-lines::before,
    .mobile-menu-ready :is(.menu-toggle, .menu-close) .menu-toggle-lines::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transform: translateY(-6px);
        transform-origin: center;
        transition: transform 240ms ease, width 240ms ease;
    }
    .mobile-menu-ready :is(.menu-toggle, .menu-close) .menu-toggle-lines::after {
        width: 16px;
        transform: translateY(6px);
    }
    .mobile-menu-ready .menu-toggle[aria-expanded="true"] .menu-toggle-lines,
    .menu-is-open .mobile-menu-ready .menu-close .menu-toggle-lines { background: transparent; }
    .mobile-menu-ready .menu-toggle[aria-expanded="true"] .menu-toggle-lines::before,
    .menu-is-open .mobile-menu-ready .menu-close .menu-toggle-lines::before {
        width: 22px;
        transform: rotate(45deg);
    }
    .mobile-menu-ready .menu-toggle[aria-expanded="true"] .menu-toggle-lines::after,
    .menu-is-open .mobile-menu-ready .menu-close .menu-toggle-lines::after {
        width: 22px;
        transform: rotate(-45deg);
    }
}
@media (max-width: 39.99rem) {
    .site-info-inner { min-height: 30px; gap: 6px; }
    /* Leesbaar en volledig: mag op smalle schermen naar twee regels lopen. */
    .site-info-inner p {
        flex: 1;
        min-width: 0;
        max-width: none;
        padding-block: 5px;
        font-size: .5625rem;
        letter-spacing: .02em;
        line-height: 1.4;
        text-align: left;
    }
    .site-info-inner .social-icon { min-height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .mobile-menu-ready .site-navigation { transition: none; transform: none; }
    .mobile-menu-ready :is(.menu-toggle, .menu-close) .menu-toggle-lines,
    .mobile-menu-ready :is(.menu-toggle, .menu-close) .menu-toggle-lines::before,
    .mobile-menu-ready :is(.menu-toggle, .menu-close) .menu-toggle-lines::after { transition: none; }
}

/* Op schermen smaller dan 320px mogen ook de privacywoorden natuurlijk wrappen. */
@media (max-width: 19.99rem) {
    .footer-bottom > a, .footer-bottom .footer-legal-links { flex-shrink: 1; white-space: normal; }
}

/* Centrale consentlaag; kaartformaten en bestaande footerindeling blijven intact. */
.consent-map-placeholder { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .65rem; width: 100%; height: 100%; padding: .75rem; box-sizing: border-box; overflow: auto; color: #eee; background: #171717; text-align: center; }
.consent-map-placeholder p { margin: 0; max-width: 38rem; font-size: .8rem; line-height: 1.45; }
.consent-map-placeholder strong { color: #C6A582; font-weight: 600; }
.consent-map-placeholder[hidden], #cookie-consent [hidden] { display: none; }
.footer-bottom .footer-legal-links { flex: 0 1 auto; flex-wrap: wrap; white-space: normal; min-width: 0; max-width: 100%; gap: .25rem .65rem; }
.cookie-banner, .cookie-dialog { box-sizing: border-box; color: #eee; background: #171717; border: 1px solid #514539; border-radius: .75rem; font-family: inherit; font-size: .875rem; line-height: 1.6; }
.cookie-banner { position: fixed; z-index: 50; inset: auto 1rem 1rem; width: min(48rem, calc(100% - 2rem)); margin-inline: auto; padding: 1.5rem; max-height: 65vh; max-height: 65dvh; overflow-y: auto; box-shadow: 0 12px 50px #0008; }
.cookie-banner h2, .cookie-dialog h2 { margin: 0 0 .65rem; color: #fff; font-size: 1.35rem; line-height: 1.3; font-weight: 500; }
.cookie-banner p, .cookie-dialog p { margin: 0 0 1rem; }
.consent-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin-block: 1rem; }
.consent-button { box-sizing: border-box; max-width: 100%; min-height: 44px; padding: .65rem .85rem; border: 1px solid #C6A582; border-radius: .3rem; background: transparent; color: #eee; font: inherit; font-size: .8125rem; font-weight: 500; line-height: 1.35; cursor: pointer; }
.consent-button:hover { color: #171717; background: #C6A582; }
.consent-button:focus-visible, .consent-info-link:focus-visible, .consent-category input:focus-visible, [data-consent-open]:focus-visible { outline: 2px solid #C6A582; outline-offset: 4px; }
.consent-info-link { color: #C6A582; text-underline-offset: .2em; }
.cookie-dialog { width: min(40rem, calc(100% - 2rem)); max-height: 90vh; max-height: 90dvh; margin: auto; padding: 1.5rem; overflow-y: auto; }
.cookie-dialog::backdrop { background: #000a; }
.cookie-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.consent-close { flex: 0 0 44px; padding: .25rem; font-size: 1.5rem; }
.consent-category { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1rem; border-top: 1px solid #ffffff24; }
.consent-category > div { min-width: 0; }
.consent-category h3, .consent-category label { display: block; margin: 0 0 .35rem; color: #fff; font-size: 1rem; font-weight: 500; }
.consent-category p { margin: 0; font-size: .8125rem; color: #c3c3c3; }
.consent-always { flex: 0 0 auto; color: #C6A582; font-size: .75rem; }
.consent-category input { appearance: none; flex: 0 0 44px; width: 44px; height: 26px; margin: 0; border: 1px solid #aaa; border-radius: 20px; background: #333; cursor: pointer; }
.consent-category input::before { content: ''; display: block; width: 18px; height: 18px; margin: 3px; border-radius: 50%; background: #fff; }
.consent-category input:checked { background: #C6A582; border-color: #C6A582; }
.consent-category input:checked::before { transform: translateX(18px); background: #171717; }
.consent-storage-status { position: fixed; z-index: 51; bottom: 1rem; left: 1rem; right: 1rem; width: fit-content; max-width: calc(100% - 2rem); margin: auto; padding: .75rem 1rem; box-sizing: border-box; background: #171717; color: #eee; border: 1px solid #C6A582; border-radius: .3rem; font-size: .8125rem; }
.menu-is-open .cookie-banner { visibility: hidden; }
@media (max-width: 39.99rem) {
    .cookie-banner, .cookie-dialog { padding: 1rem; }
    .consent-actions { gap: .5rem; grid-template-columns: 1fr; }
    .cookie-banner .consent-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cookie-banner [data-consent-open] { grid-column: 1 / -1; grid-row: 2; }
    .consent-category { gap: .75rem; }
}
/* Gedeelde afwerking van publieke foto-items; bestaande rasters bepalen de maat. */
.site-main :is(.photo-gallery-link, .instagram-tile, .split-media, .private-media, .collection-media, .page-image, .brand-featured-image, .page-content img) {
    border: 1px solid rgb(198 165 130 / 26%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgb(0 0 0 / 10%);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.site-main :is(.photo-gallery-link, .instagram-tile, .split-media, .private-media, .collection-media) > img {
    transition: transform 220ms ease, opacity 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
    .site-main :is(.photo-gallery-link, .instagram-tile, .split-media, .private-media, .collection-media, .page-image, .brand-featured-image, .page-content img):hover {
        transform: translateY(-3px);
        border-color: rgb(198 165 130 / 45%);
        box-shadow: 0 10px 28px rgb(0 0 0 / 16%);
    }
    .site-main :is(.photo-gallery-link, .instagram-tile, .split-media, .private-media, .collection-media):hover > img { transform: scale(1.025); }
}
.site-main :is(.photo-gallery-link, .collection-link):focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}
/* Alleen JS markeert items voor reveal; zonder JS blijft alles zichtbaar. */
.site-main .scroll-reveal {
    opacity: 1;
    translate: 0 0;
    transition: opacity 500ms ease, translate 500ms ease, transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.site-main .scroll-reveal:not(.is-revealed) { opacity: 0; translate: 0 14px; }
.site-main .scroll-reveal:focus-within { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
    .site-main :is(.photo-gallery-link, .instagram-tile, .split-media, .private-media, .collection-media, .page-image, .brand-featured-image, .page-content img),
    .site-main :is(.photo-gallery-link, .instagram-tile, .split-media, .private-media, .collection-media) > img,
    .site-main .scroll-reveal { transition: none; transform: none; }
    .site-main .scroll-reveal:not(.is-revealed) { opacity: 1; translate: 0 0; }
    .site-main :is(.photo-gallery-link, .instagram-tile, .split-media, .private-media, .collection-media):hover > img { transform: none; }
    .site-main :is(.photo-gallery-link, .instagram-tile, .split-media, .private-media, .collection-media, .page-image, .brand-featured-image, .page-content img):hover { transform: none; }
}

@media (forced-colors: active) {
    .consent-category input { appearance: auto; }
    .consent-category input::before { display: none; }
}

/* The Journal: PDF-magazines op de Collection-detailpagina; sluit aan op de lichte collectiegalerij. */
.brand-journal { padding-block: clamp(3rem, 6vw, 6rem); background: var(--color-light); color: var(--color-text); }
/* Journal en galerij delen dezelfde lichte achtergrond: geen dubbele sectiemarge ertussen. */
.brand-journal + .brand-collection-gallery { padding-top: 0; }
.brand-journal-intro { max-width: 64rem; margin: 0 auto clamp(2rem, 4vw, 3.5rem); }
.brand-journal-intro .page-eyebrow { margin-bottom: .6rem; }
.brand-journal-heading { margin: 0; color: var(--color-black); font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: .14em; line-height: 1.25; }
.brand-journal-list { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); max-width: 64rem; margin: 0 auto; padding: 0; list-style: none; }
.brand-journal-item { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 4.5rem); min-width: 0; }
.brand-journal-item + .brand-journal-item { padding-top: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--color-silver); }
.brand-journal-cover { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid rgb(198 165 130 / 26%); border-radius: 16px; background: var(--color-white); box-shadow: 0 10px 30px rgb(0 0 0 / 10%); }
.brand-journal-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.brand-journal-cover--placeholder { background: linear-gradient(160deg, #262626, var(--color-black) 70%); }
.brand-journal-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1.5rem, 4vw, 2.25rem); color: var(--color-white); }
.brand-journal-placeholder::before { position: absolute; inset: .75rem; border: 1px solid rgb(198 165 130 / 35%); border-radius: 10px; content: ''; pointer-events: none; }
.brand-journal-placeholder-brand { color: var(--color-accent); font-size: .75rem; font-weight: 600; letter-spacing: .4em; }
.brand-journal-placeholder-line { width: 2.5rem; height: 1px; margin-top: auto; margin-bottom: 1rem; background: var(--color-accent); }
.brand-journal-placeholder-title { font-size: clamp(1.1rem, 2.2vw, 1.45rem); letter-spacing: .04em; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }
.brand-journal-copy { min-width: 0; }
.brand-journal-title { margin: 0; color: var(--color-black); font-size: clamp(1.5rem, 2.6vw, 2.25rem); letter-spacing: .02em; line-height: 1.2; overflow-wrap: anywhere; }
.brand-journal-subtitle { margin: .85rem 0 0; color: var(--color-mid); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; overflow-wrap: anywhere; }
.brand-journal-title::after { display: block; width: 3rem; height: 1px; margin-top: 1.25rem; background: var(--color-accent); content: ''; }
.brand-journal-subtitle + .brand-journal-actions, .brand-journal-title + .brand-journal-actions { margin-top: 2rem; }
.brand-journal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.brand-journal .brand-journal-view { color: var(--color-text); }
.brand-journal .brand-journal-view:hover { color: var(--color-black); }
.brand-journal-download { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--color-text); font-size: .75rem; letter-spacing: .09em; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; }
.brand-journal-download:hover { color: var(--color-mid); }
@media (max-width: 47.99rem) {
    .brand-journal-item { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.5rem; }
    .brand-journal-cover { width: min(100%, 20rem); }
}
@media (max-width: 39.99rem) {
    .brand-journal-actions { flex-direction: column; align-items: stretch; gap: .5rem; }
    .brand-journal-download { justify-content: center; }
}