/* =================================================================
   BAKSTEEN VISUALS — stylesheet
   Opgebouwd zonder externe frameworks, op basis van het officiële
   brandbook (v1.0): Playfair Display + DM Sans, geladen via Google
   Fonts zoals in de huisstijl vastgelegd.
   PAS AAN: wil je geen requests naar Google laten lopen (AVG/GDPR)?
   Download de .woff2-bestanden en host ze zelf via @font-face —
   de font-family tokens hieronder blijven dan ongewijzigd.
   ================================================================= */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
img, picture, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

/* ---------- Design tokens — Baksteen Visuals huisstijl (brandbook v1.0) ---------- */
:root{
  /* Kleur — officieel paletten uit het brandbook */
  --ink:        #1C1C1C;   /* Nacht Zwart — hoofdachtergrond, knoppen, headers */
  --ink-2:      rgba(253,250,246,.04); /* subtiel paneel op donker (brandbook-techniek), alleen voor elementen die al op een donkere achtergrond liggen */
  --ink-solid:  #242424;   /* volledig dekkende paneelkleur — voor losstaande overlays zoals de cookiebanner */
  --ink-3:      rgba(253,250,246,.08); /* rand op donker */
  --cream:      #FDFAF6;   /* Warm Wit — tekst op donker, paginakleur op licht */
  --cream-dim:  rgba(253,250,246,.6); /* gedempte tekst op donker */
  --zand:       #F5F0EA;   /* Zand — sectie-achtergronden, rustige vlakken */
  --gold:       #D4A853;   /* Goud — CTA's, labels, highlights, accenten */
  --gold-bright:#E8C97A;   /* Goud Licht — hover-state */
  --tekst-1:    #1A1A1A;   /* primaire tekst op licht — titels, koppen */
  --tekst-2:    #3A3A3A;   /* secundaire tekst op licht — bodytekst */
  --tekst-3:    #5A5A5A;   /* subtiele tekst op licht — bijschriften, meta */
  --tekst-4:    #888888;   /* meest gedempte tekst op licht */
  --lijn:       #E8E2D9;   /* borders/dividers op licht */

  /* Typografie — Playfair Display (display) + DM Sans (body), zoals brandbook */
  --font-display: "Playfair Display", ui-serif, Georgia, serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-h1: clamp(2.6rem, 1.6rem + 4.2vw, 4.6rem);
  --fs-h2: clamp(2.1rem, 1.6rem + 2vw, 3rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-lead: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-body: 1.05rem;
  --fs-small: 0.9rem;

  /* Ruimte */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: 3.5rem;
  --space-6: 5rem;
  --space-7: 7.5rem; /* ≈120px sectie-padding, conform brandbook layout-spec */

  --container: 1100px; /* brandbook: max breedte web */
  --gutter: clamp(1.5rem, 5vw, 3.75rem); /* brandbook: 24px mobiel — 60px desktop */
  --radius-sm: 3px;  /* brandbook: knoppen */
  --radius-tag: 2px; /* brandbook: labels & tags */
  --radius-md: 6px;  /* brandbook: kaarten & containers */

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

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

/* ---------- Basis ---------- */
html{ scroll-behavior: smooth; }
body{
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
main{ display:block; }

h1,h2,h3{
  font-family: var(--font-display);
  color: var(--cream);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: 0;
}
h1{ font-size: var(--fs-h1); font-weight: 900; }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); font-weight: 700; }

h1 em, h2 em{ font-style: italic; font-weight: 400; color: var(--gold); }
.on-light h1 em, .on-light h2 em{ color: var(--gold); }

p{ max-width: 62ch; font-weight: 300; }
p.lead{ font-size: var(--fs-lead); color: var(--cream); max-width: 46ch; font-weight: 300; }

a{ text-decoration: none; }

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

section{ position: relative; }

.section-pad{ padding-block: var(--space-7); }

.section-head{
  max-width: 44rem;
  margin-bottom: var(--space-5);
  position: relative;
  padding-top: var(--space-3);
}
.section-head::before{
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 48px; height: 3px;
  border-radius: 2px;
  background: var(--gold);
}
.section-head p{ color: var(--cream-dim); margin-top: var(--space-2); font-weight: 300; }
/* De titel van deze pagina staat semantisch als <h1> (één per pagina, goed voor SEO/toegankelijkheid), maar behoudt visueel dezelfde grootte als de h2-sectietitels elders op de site. */
.section-head h1{ font-size: var(--fs-h2); font-weight: 700; }

.on-light{ background: var(--zand); color: var(--tekst-2); }
.on-light h1, .on-light h2, .on-light h3{ color: var(--tekst-1); }
.on-light .section-head p{ color: var(--tekst-3); }
.on-light p{ color: var(--tekst-2); }

/* subtiele architecturale scheidingslijn tussen secties (metselvoeg) */
.mortar-line{
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-3) 15%, var(--ink-3) 85%, transparent);
}
.on-light + .mortar-line, .mortar-line.on-light{
  background: linear-gradient(90deg, transparent, var(--lijn) 15%, var(--lijn) 85%, transparent);
}

/* ---------- Skip link ---------- */
.skip-link{
  position: absolute;
  left: var(--space-2);
  top: -60px;
  background: var(--gold);
  color: var(--ink);
  padding: .7em 1.2em;
  border-radius: var(--radius-sm);
  font-weight: 500;
  z-index: 1000;
  transition: top .2s var(--ease);
}
.skip-link:focus{ top: var(--space-2); }

/* ---------- Focus ---------- */
:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 16px 36px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 0 0 rgba(212,168,83,0);
}
.btn-primary:hover{
  background: var(--gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(212,168,83,.3);
}
.btn-ghost{
  background: transparent;
  border-color: rgba(253,250,246,.25);
  color: rgba(253,250,246,.8);
  padding: 14.5px 34px;
}
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold-bright); }
.on-light .btn-ghost{ border-color: var(--gold); color: var(--gold); }
.on-light .btn-ghost:hover{ background: var(--gold); color: var(--ink); }

/* =================================================================
   HEADER / NAV
   ================================================================= */
.site-header{
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 950;
  padding-block: var(--space-3);
  transition: background-color .3s var(--ease), padding-block .3s var(--ease), box-shadow .3s var(--ease), transform .3s ease;
}
.site-header.header-hidden{
  transform: translateY(-100%);
}
.site-header.is-scrolled{
  background: rgba(28,28,28,.92);
  backdrop-filter: saturate(140%) blur(10px);
  padding-block: var(--space-2);
  box-shadow: 0 1px 0 var(--ink-3);
}
/* Op pagina's met een lichte sectie bovenaan (bv. diensten, over-mij)
   is de transparante starttoestand van de header onleesbaar — geef
   die daar meteen een solide donkere achtergrond. Zodra er gescrolld
   is neemt .is-scrolled het gewone gedrag weer over. */
body.light-page .site-header:not(.is-scrolled){
  background: #1C1C1C;
  opacity: 1;
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.brand{
  display: flex;
  align-items: center;
  gap: .65em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--cream);
  letter-spacing: 0;
  white-space: nowrap;
}
/* Ingesloten logo-SVG — kleur volgt "color" via currentColor (zie
   fill:currentColor in de paths), zodat het logo met de rest van de
   huisstijl meekleurt. De viewBox is strak om de zichtbare letters
   gecropt (het logo-bestand had van zichzelf veel lege ruimte rondom
   de tekst); de hoogte hieronder is naar rato verkleind zodat de
   letters op het scherm exact even groot blijven als voorheen. */
.logo-mark{
  height: 12px;
  width: auto;
  display: block;
  overflow: visible;
  margin: 0;
  padding: 0;
  flex: none;
}
.footer-brand{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Compenseert de laatste fractie van een pixel restmarge links in de
   gecropte viewBox, zodat de "B" precies boven de tekst eronder valt. */
.footer-brand .brand{ margin-left: -1px; }
.brand-mark{
  flex: none;
  /* Icoon ter grootte van de kapitaalhoogte van de wordmark (niet de
     volledige regelhoogte), lichtjes omhoog genudged zodat het optisch
     samenvalt met de top van de "B" en de onderkant van de letters. */
  transform: translateY(-1px);
}
.brand-mark svg{ width: .72em; height: .72em; display:block; }
.logo-dot{ color: var(--gold); margin-inline: -0.04em; }

.nav-list{
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.nav-list a{
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-dim);
  position: relative;
  padding-block: .25em;
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.nav-list a:hover, .nav-list a:focus-visible{ color: var(--cream); }
.nav-list a[aria-current="page"]{ color: var(--gold); }
/* De Contact-link is ook een gouden .btn-primary knop — gouden tekst
   zou daar onleesbaar zijn op de gouden achtergrond. Actieve staat
   krijgt daarom een witte outline i.p.v. gouden tekst. */
.nav-cta a[aria-current="page"]{
  background: transparent;
  border-color: var(--cream);
  color: var(--cream);
}
.nav-list a::after{
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--gold);
  transition: right .25s var(--ease);
}
.nav-list a:hover::after, .nav-list a:focus-visible::after{ right: 0; }
.nav-cta{ margin-left: var(--space-2); }

/* ---------- Dropdown-submenu onder "Diensten" ---------- */
.nav-dropdown{ position: relative; }
.nav-dropdown-toggle{
  display: none;
  background: none;
  border: none;
  padding: 0 0 0 .3em;
  margin: 0;
  color: inherit;
  cursor: pointer;
  vertical-align: middle;
}
.nav-dropdown-toggle svg{ width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.nav-dropdown.is-open .nav-dropdown-toggle svg{ transform: rotate(180deg); }
.nav-submenu{
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 210px;
  background: #1C1C1C;
  border: 1px solid var(--ink-3);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index: 500;
}
.nav-submenu li{ width: auto; padding: 0; text-align: left; }
.nav-submenu a{
  display: block;
  padding: .6em var(--space-3);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream-dim);
  white-space: nowrap;
}
.nav-submenu a:hover, .nav-submenu a:focus-visible{ color: var(--gold); background: rgba(212,168,83,.08); }
.nav-submenu a::after{ display: none; }
.nav-submenu a[aria-current="page"]{ color: var(--gold); }
/* Op desktop opent hover (of focus, voor toetsenbordgebruikers) het
   submenu vanzelf — de chevron-knop is daar niet nodig en verborgen.
   pointer:fine + hover:hover sluit smartphones/tablets met "sticky
   hover" bij een tik uit. */
@media (hover:hover) and (pointer:fine){
  .nav-dropdown:hover .nav-submenu,
  .nav-dropdown:focus-within .nav-submenu{
    opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
  }
}
/* Werkt op alle apparaten: de knop zelf regelt het open/dicht-klappen
   via JS, ongeacht of hover ook beschikbaar is. */
.nav-dropdown.is-open .nav-submenu{
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}

.nav-toggle{
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(253,250,246,.3);
  border-radius: var(--radius-sm);
  position: relative;
}
.nav-toggle-bar{
  position: absolute;
  left: 50%;
  top: 16px;
  width: 20px;
  height: 1.8px;
  background: var(--cream);
  border-radius: 1px;
  transform: translateX(-50%);
  transition: transform .3s var(--ease), opacity .2s var(--ease), top .3s var(--ease);
}
.nav-toggle-bar:nth-child(2){ top: 22px; }
.nav-toggle-bar:nth-child(3){ top: 28px; }
body.nav-open .nav-toggle-bar:nth-child(1){ top: 22px; transform: translateX(-50%) rotate(45deg); }
body.nav-open .nav-toggle-bar:nth-child(2){ opacity: 0; }
body.nav-open .nav-toggle-bar:nth-child(3){ top: 22px; transform: translateX(-50%) rotate(-45deg); }

@media (max-width: 860px){
  .nav-toggle{ display: inline-flex; position: relative; z-index: 950; order: 2; }
  .brand{ white-space: normal; overflow-wrap: break-word; }
  /* Voorkomt dat de "glazen" achtergrond van de gescrollde header een
     eigen containing block vormt voor de fixed-gepositioneerde
     mobiele menu — anders raakt het menu verkeerd gepositioneerd
     (en lijkt het van boven "weg te vallen") zodra er al gescrolld is. */
  .site-header.is-scrolled{ backdrop-filter: none; }
  .nav-list{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    background: #1C1C1C; /* Nacht Zwart, volledig dekkend */
    opacity: 1;
    overflow: hidden;
    padding: var(--space-3) var(--gutter);
    transform: translateX(100%);
    transition: transform .35s var(--ease);
  }
  .nav-list li{
    width: 100%;
    text-align: center;
    padding-block: var(--space-4);
  }
  .nav-list a{ font-family: var(--font-body); font-size: 1.05rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); }
  .nav-list a::after{ display: none; }
  body.nav-open .nav-list{ transform: translateX(0); }
  body.nav-open{ overflow: hidden; }
  .nav-cta{ margin-left: 0; }
  /* Op mobiel is er geen hover: de chevron-knop is hier de enige
     manier om het submenu uit te klappen, terwijl "Diensten" zelf
     nog gewoon naar de overzichtspagina linkt. */
  .nav-dropdown{ display: flex; flex-direction: column; align-items: center; width: 100%; }
  .nav-dropdown-toggle{ display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: .4em; }
  .nav-submenu{
    position: static;
    min-width: 0;
    width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-top: var(--space-2);
    transform: none;
    display: none;
    opacity: 1; visibility: visible; pointer-events: auto;
  }
  .nav-dropdown.is-open .nav-submenu{ display: block; }
  .nav-submenu li{ text-align: center; padding-block: var(--space-2); }
  .nav-submenu a{ font-size: .95rem; padding: 0; }
}

@media (prefers-reduced-motion: reduce){
  .nav-toggle-bar{ transition: opacity .2s var(--ease); }
}

/* =================================================================
   HERO
   ================================================================= */
.hero{
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 6rem;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(60% 55% at 78% 18%, rgba(198,161,91,.14), transparent 70%),
    var(--ink);
}
.hero .container{
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-5);
  position: relative;
  z-index: 2;
}
.hero-copy{ max-width: 40rem; grid-column: 1; grid-row: 1; }
.hero-frame{ grid-column: 2; grid-row: 1; align-self: center; }
.hero-trust{ grid-column: 1; grid-row: 2; }
/* Hero-entrance: staggered fade-in + translateY(20px→0), 700ms ease-out
   per element. Er is geen apart "eyebrow"-element op de pagina, dus de
   cascade start meteen met de titel (0ms), gevolgd door bodytekst
   (150ms) en de knoppen (300ms) — zelfde 150ms-ritme als gevraagd. */
.hero h1{ opacity: 0; animation: heroRise .7s ease-out 0ms forwards; }
.hero .lead{ opacity: 0; animation: heroRise .7s ease-out 150ms forwards; margin-top: var(--space-3); }
.hero-actions{
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-4);
  opacity: 0; animation: heroRise .7s ease-out 300ms forwards;
}
@keyframes heroRise{
  from{ opacity: 0; transform: translateY(20px); }
  to{ opacity: 1; transform: translateY(0); }
}

.hero-frame{
  opacity: 0; animation: heroRise .7s ease-out 150ms forwards;
}

/* =================================================================
   SCROLL-REVEAL (IntersectionObserver zet .is-visible)
   ================================================================= */
.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
/* Stagger: 80ms per item voor portfolio- en dienstkaarten */
.portfolio-item.reveal:nth-child(1){ transition-delay: 0ms; }
.portfolio-item.reveal:nth-child(2){ transition-delay: 80ms; }
.portfolio-item.reveal:nth-child(3){ transition-delay: 160ms; }
.portfolio-item.reveal:nth-child(4){ transition-delay: 240ms; }
.portfolio-item.reveal:nth-child(5){ transition-delay: 320ms; }
.portfolio-item.reveal:nth-child(6){ transition-delay: 400ms; }
.portfolio-item.reveal:nth-child(7){ transition-delay: 480ms; }
.portfolio-item.reveal:nth-child(8){ transition-delay: 560ms; }
.service-card.reveal:nth-child(1){ transition-delay: 0ms; }
.service-card.reveal:nth-child(2){ transition-delay: 80ms; }
.service-card.reveal:nth-child(3){ transition-delay: 160ms; }
.service-card.reveal:nth-child(4){ transition-delay: 240ms; }

.hero-trust{
  border-top: 1px solid var(--ink-3);
  padding-top: var(--space-3);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-4);
}
.hero-trust div{
  padding-left: var(--space-3);
  border-left: 1px solid var(--ink-3);
  color: var(--cream-dim);
  font-size: var(--fs-small);
}
.hero-trust div:nth-child(odd){ padding-left: 0; border-left: 0; }
.hero-trust strong{ color: var(--cream); font-weight: 500; }

@media (max-width: 480px){
  .hero-trust{ grid-template-columns: 1fr; }
  .hero-trust div{ padding-left: 0; border-left: 0; }
}

@media (max-width: 900px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero-copy{ grid-column: auto; grid-row: auto; }
  .hero-trust{ grid-column: auto; grid-row: auto; }
  /* Op telefoon/tablet toont de video in een compact liggend 16:9-vlak
     (i.p.v. de staande 4:5 van de portfolio-kaart op desktop), zodat
     hij niet te veel ruimte inneemt. Dubbele class voor extra
     specificiteit, want .portfolio-item's eigen 4/5 staat verderop
     in dit bestand. */
  .hero-frame.portfolio-item{ aspect-ratio: 16/9; order: -1; grid-column: auto; grid-row: auto; align-self: auto; }
}

/* =================================================================
   PORTFOLIO
   ================================================================= */
.filter-bar{
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-bottom: var(--space-4);
}
.filter-btn{
  padding: 6px 14px;
  border-radius: var(--radius-tag);
  border: 1.5px solid rgba(253,250,246,.25);
  background: transparent;
  color: var(--cream-dim);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.filter-btn:hover{ border-color: var(--gold); color: var(--cream); }
.filter-btn[aria-pressed="true"]{
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 500;
}

.portfolio-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.portfolio-item{
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--ink-3);
  aspect-ratio: 4/5;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.portfolio-item.is-hidden{ display: none; }
.portfolio-trigger{
  display: block;
  width: 100%; height: 100%;
  border: none; margin: 0; padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.portfolio-trigger:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}
.portfolio-item img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}

.portfolio-item:hover img{ transform: scale(1.03); }
.portfolio-item::after{
  content: "";
  position: absolute; inset: 0;
  background: rgba(212,168,83,.14);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.portfolio-item:hover::after{ opacity: 1; }
.portfolio-item .tag{
  position: absolute; left: var(--space-2); top: var(--space-2);
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-tag);
}
.portfolio-item .title{
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-3) var(--space-2) var(--space-2);
  background: linear-gradient(180deg, transparent, rgba(28,28,28,.92));
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--cream);
}
.play-badge{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.play-badge span{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(28,28,28,.55);
  border: 1px solid rgba(253,250,246,.5);
  display: flex; align-items: center; justify-content: center;
}
.play-badge svg{ width: 18px; height: 18px; fill: var(--cream); margin-left: 3px; }

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

.portfolio-note{
  margin-top: var(--space-4);
  font-size: var(--fs-small);
  color: var(--cream-dim);
  border-left: 2px solid var(--gold);
  padding-left: var(--space-2);
  max-width: 50rem;
}

/* =================================================================
   DIENSTEN
   ================================================================= */
.services-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--lijn);
  border: 1px solid var(--lijn);
}
.service-card{
  background: var(--cream);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.service-icon{
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-1);
}
.service-icon svg{ width: 24px; height: 24px; stroke: var(--gold); fill: none; }
.service-card h3{ margin-top: 0; font-size: 1.1rem; }
.service-card p{ color: var(--tekst-2); font-size: .96rem; }
.service-note{ font-size: .84rem; color: var(--tekst-4); margin-top: auto; padding-top: var(--space-2); }

/* ---------- Dienstenpagina's: "Wat je krijgt" en "Recent werk" ---------- */
.deliverables-list{
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .7em;
  max-width: 52ch;
}
.deliverables-list li{ display: flex; align-items: flex-start; gap: .65em; color: var(--cream-dim); }
.deliverables-list li::before{
  content: "";
  flex: none;
  width: 6px; height: 6px;
  margin-top: .55em;
  border-radius: 50%;
  background: var(--gold);
}
.case-study-list{ display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-4); }
.case-study{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-4);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius-md);
}
.case-study-media{ aspect-ratio: 16/9; border-radius: var(--radius-sm); overflow: hidden; background: var(--ink-2); position: relative; }
.case-study-placeholder{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--cream-dim);
  font-size: .85rem;
  text-align: center;
  padding: var(--space-3);
  border: 1.5px dashed var(--ink-3);
  border-radius: var(--radius-sm);
}
.case-study-embed{ position: absolute; inset: 0; }
.case-study-embed iframe{ width: 100%; height: 100%; border: 0; display: block; }
.case-study-body h3{ margin-top: var(--space-2); }
.case-study-body p{ color: var(--cream-dim); }
.case-review{
  margin: var(--space-3) 0 0;
  padding-left: var(--space-3);
  border-left: 2px solid var(--gold);
  font-style: italic;
  color: var(--cream);
}
.case-review cite{ display: block; margin-top: .4em; font-style: normal; font-size: .85rem; color: var(--cream-dim); }
@media (max-width: 760px){
  .case-study{ grid-template-columns: 1fr; }
}
.service-card .more-info-link{ color: var(--tekst-3); }
.service-card .more-info-link:hover{ color: var(--gold); }
.service-link{
  display: inline-block;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 500;
  color: var(--tekst-1);
}
.service-link:hover{ color: var(--gold); }

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

/* =================================================================
   WERKWIJZE
   ================================================================= */
.process-list{
  display: flex;
  flex-direction: column;
}
.process-step{
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: 1px solid var(--ink-3);
}
.process-step:last-child{ border-bottom: 1px solid var(--ink-3); }
.process-num{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--gold);
  line-height: 1;
}
.process-step h3{ margin-bottom: .4em; }
.process-step p{ color: var(--cream-dim); }

/* ---------- "Meer info"-trigger (opent een los venster, zie .info-modal) ---------- */
.more-info-link{
  display: inline-block;
  margin-top: .5em;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--cream-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  cursor: pointer;
  transition: color .2s var(--ease), text-decoration-color .2s var(--ease);
}
.more-info-link:hover{ color: var(--gold); text-decoration-color: var(--gold); }

/* ---------- Uitklapbaar "Meer info" per dienst/stap (zelfde plusje-patroon als de FAQ) ---------- */
.step-more{ margin-top: .6em; }
.step-more summary{
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 500;
  color: var(--gold);
}
.step-more summary::-webkit-details-marker{ display: none; }
.step-more summary .plus{
  flex: none;
  width: 16px; height: 16px;
  position: relative;
}
.step-more summary .plus::before, .step-more summary .plus::after{
  content: "";
  position: absolute; background: var(--gold);
}
.step-more summary .plus::before{ inset: 45% 0; height: 1.5px; }
.step-more summary .plus::after{ inset: 0 45%; width: 1.5px; transition: transform .2s var(--ease); }
.step-more[open] summary .plus::after{ transform: rotate(90deg); opacity: 0; }
.step-more p{ margin-top: var(--space-2); color: var(--cream-dim); max-width: 55ch; font-size: .9rem; }
.step-more ul{ margin: var(--space-2) 0 0; padding-left: 1.1em; color: var(--cream-dim); max-width: 55ch; font-size: .9rem; }
.step-more li{ margin-bottom: .35em; }
.step-more li::marker{ color: var(--gold); }
.step-more li strong{ color: var(--cream); font-weight: 500; }
.service-card .step-more p,
.service-card .step-more ul{ color: var(--tekst-2); }
.service-card .step-more li strong{ color: var(--tekst-1); }

/* ---------- Info-modal (los venster, geen fullscreen) ---------- */
.info-modal{
  border: none;
  border-radius: var(--radius-md);
  padding: 0;
  width: calc(100% - 3rem);
  max-width: 30rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  background: #1C1C1C;
  color: var(--cream);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.info-modal.is-visible{ opacity: 1; transform: translateY(0) scale(1); }
.info-modal::backdrop{
  background: rgba(28,28,28,.55);
}
.info-modal-inner{ position: relative; padding: var(--space-4); }
.info-modal-close{
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: transparent;
  color: var(--cream-dim);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color .2s var(--ease);
}
.info-modal-close:hover{ color: var(--gold); }
.info-modal h3{ margin: 0 2rem .6em 0; font-size: 1.2rem; }
.info-modal p{ color: var(--cream-dim); margin: 0; }
.info-modal ul{
  margin: var(--space-2) 0 0;
  padding-left: 1.1em;
  color: var(--cream-dim);
  font-size: .95rem;
}
.info-modal li{ margin-bottom: .4em; }
.info-modal li::marker{ color: var(--gold); }
.info-modal li strong{ color: var(--cream); font-weight: 500; }

@media (prefers-reduced-motion: reduce){
  .info-modal{ transition: none; }
}

/* ---------- Portfolio-case-venster (opent bij klikken op een item) ---------- */
.case-modal{
  border: none;
  border-radius: var(--radius-md);
  padding: 0;
  width: calc(100% - 3rem);
  max-width: 640px;
  max-height: calc(100vh - 4rem);
  overflow: auto;
  background: #1C1C1C;
  color: var(--cream);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(10px) scale(.98);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.case-modal.is-visible{ opacity: 1; transform: translateY(0) scale(1); }
.case-modal::backdrop{ background: rgba(28,28,28,.6); }
.case-modal-inner{ position: relative; }
.case-modal-close{
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(28,28,28,.55);
  color: var(--cream);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.case-modal-close:hover{ color: var(--gold); background: rgba(28,28,28,.8); }
.case-modal-media{
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--ink-2);
}
.case-modal-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.case-modal-media iframe{ width: 100%; height: 100%; display: block; border: 0; }
/* Fotoserie: een rij van alle foto's naast elkaar; alleen de actieve
   schuift in beeld. object-fit:contain zodat een foto nooit boven- of
   onderaan wordt bijgesneden, ongeacht de eigen verhouding — de hoogte
   van .case-modal-media wordt door JS gelijkgezet aan de verhouding
   van de eerste foto, zodat het venster om de foto past. */
.case-modal-track{
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.case-modal-track-inner{
  display: flex;
  height: 100%;
  transition: transform .45s var(--ease);
}
.case-modal-track-inner img{
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* PAS AAN: vervang de afbeelding + play-knop hierboven eventueel door
   een echte video-embed (bv. een YouTube/Vimeo-iframe of <video>-tag)
   zodra je opdrachtvideo's hebt. */
.case-modal-play{
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(28,28,28,.15);
  border: none;
  padding: 0;
  cursor: pointer;
}
.case-modal-play svg{
  width: 60px; height: 60px;
  fill: var(--cream);
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.45));
  transition: transform .2s var(--ease);
}
.case-modal-play:hover svg{ transform: scale(1.08); }

/* ---------- Galerij-navigatie voor cases met meerdere foto's ---------- */
.case-modal-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(28,28,28,.55);
  color: var(--cream);
  cursor: pointer;
  z-index: 2;
  transition: transform .25s var(--ease), background-color .2s var(--ease), width .25s var(--ease), height .25s var(--ease);
}
.case-modal-nav svg{ width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.case-modal-nav:hover{ background: rgba(28,28,28,.8); color: var(--gold); }
.case-modal-prev{ left: var(--space-2); }
.case-modal-next{ right: var(--space-2); }
/* Idle-hint: als er een tijdje niet geklikt wordt, wordt het pijltje naar
   rechts even groter en schuift de foto er een klein stukje onder vandaan
   — een subtiele aanwijzing dat er meer foto's te bekijken zijn. */
.case-modal-nav.is-hinting{
  width: 48px; height: 48px;
  background: rgba(28,28,28,.85);
}
.case-modal-count{
  position: absolute;
  left: 50%;
  bottom: var(--space-2);
  transform: translateX(-50%);
  display: none;
  background: rgba(28,28,28,.55);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: var(--radius-tag);
  z-index: 2;
}

.case-modal-body{ padding: var(--space-4); }
.case-modal-tag{
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-2);
}
.case-modal-body h3{ margin: 0 0 var(--space-2); font-size: 1.3rem; }
.case-modal-body p{ color: var(--cream-dim); margin: 0; }

@media (prefers-reduced-motion: reduce){
  .case-modal{ transition: none; }
  .case-modal-nav{ transition: none; }
  .case-modal-track-inner{ transition: none; }
}

@media (max-width: 640px){
  .process-step{ grid-template-columns: 3rem 1fr; }
  .process-num{ font-size: 1.6rem; }
}

/* =================================================================
   OVER MIJ
   ================================================================= */
.about-grid{
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: var(--space-5);
  align-items: center;
}
.about-photo{
  aspect-ratio: 3/4;
  border-radius: var(--radius-md);
  border: 1px solid var(--lijn);
  overflow: hidden;
  position: relative;
  /* PLACEHOLDER: vervang door een echte, ontspannen portretfoto
     van Pepijn — het liefst met camera/apparatuur in beeld,
     op locatie in Utrecht. */
  background: linear-gradient(160deg, var(--zand), var(--gold-bright) 70%);
}
.about-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.about-copy p + p{ margin-top: var(--space-2); }
.about-copy p{ max-width: 52ch; }
/* Paginatitel staat semantisch als <h1>, maar behoudt dezelfde visuele
   grootte als de h2-sectietitels elders op de site. */
.about-copy h1{ font-size: var(--fs-h2); font-weight: 700; }
.about-signoff{
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold);
}

/* ---------- Langere beleidsteksten (privacybeleid, voorwaarden) ---------- */
.legal-content{ max-width: 68ch; }
.legal-content h3{
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  font-size: 1.25rem;
}
.legal-content h4{
  margin-top: var(--space-4);
  margin-bottom: var(--space-1);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
.legal-content p{ max-width: none; color: var(--cream-dim); }
.legal-content p + p{ margin-top: var(--space-2); }
.legal-content ul{
  margin: var(--space-2) 0;
  padding-left: 1.2em;
  color: var(--cream-dim);
}
.legal-content li{ margin-bottom: .4em; }
.legal-content li::marker{ color: var(--gold); }
.legal-content a{ color: var(--gold-bright); border-bottom: 1px solid currentColor; }
.legal-content strong{ color: var(--cream); }
.legal-content .legal-meta{
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius-md);
}
.legal-content .legal-meta p{ margin: 0; }
.legal-content .legal-meta p + p{ margin-top: .3em; }
.legal-content .legal-updated{
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--ink-3);
  font-size: var(--fs-small);
  color: var(--cream-dim);
}

@media (max-width: 860px){
  .about-grid{ grid-template-columns: 1fr; }
  .about-photo{ max-width: 22rem; }
}

/* =================================================================
   TESTIMONIALS
   ================================================================= */
.reviews-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
}
.review-card{
  flex: 1 1 320px;
  max-width: 420px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: background-color .3s var(--ease);
}
.review-card:hover{ background: rgba(212,168,83,.05); }
.review-card blockquote{ color: var(--cream); font-family: var(--font-display); font-style: italic; font-size: 1.15rem; line-height: 1.5; }
.review-card footer{
  margin-top: var(--space-3);
  font-size: var(--fs-small);
  color: var(--cream-dim);
}

/* =================================================================
   FAQ
   ================================================================= */
.faq-list{ max-width: 50rem; }
.faq-item{
  border-top: 1px solid var(--lijn);
  padding-block: var(--space-3);
}
.faq-item:last-child{ border-bottom: 1px solid var(--lijn); }
.faq-item summary{
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary .plus{
  flex: none;
  width: 22px; height: 22px;
  position: relative;
}
.faq-item summary .plus::before, .faq-item summary .plus::after{
  content: "";
  position: absolute; background: var(--gold);
}
.faq-item summary .plus::before{ inset: 45% 0; height: 2px; }
.faq-item summary .plus::after{ inset: 0 45%; width: 2px; transition: transform .2s var(--ease); }
.faq-item[open] summary .plus::after{ transform: rotate(90deg); opacity: 0; }
.faq-item p{ margin-top: var(--space-2); color: var(--tekst-2); max-width: 55ch; }

/* =================================================================
   CONTACT
   ================================================================= */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.contact-info address{ font-style: normal; color: var(--cream-dim); }
.contact-info h3{ margin-bottom: var(--space-2); }
.contact-info address + h3{ margin-top: var(--space-4); }
.contact-info ul{ display: flex; flex-direction: column; gap: .6em; margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.contact-info li{ display: flex; align-items: center; gap: .65em; }
.contact-info li::before{
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
.contact-info a{ color: var(--cream); border-bottom: 1px solid transparent; transition: border-color .2s; }
.contact-info a:hover{ border-color: var(--gold); }

.field{
  display: flex; flex-direction: column; gap: .4em;
  margin-bottom: var(--space-3);
}
.field label{ font-size: .9rem; color: var(--cream-dim); }
.field input, .field select, .field textarea{
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius-sm);
  padding: .8em .9em;
  color: var(--cream);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--gold); }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.checkbox-field{
  display: flex; align-items: flex-start; gap: .6em;
  font-size: .88rem; color: var(--cream-dim);
  margin-bottom: var(--space-3);
}
.checkbox-field input{ margin-top: .3em; }
.checkbox-field label a{ color: var(--gold-bright); text-decoration: underline; text-underline-offset: 2px; }
.honeypot{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status{
  margin-top: var(--space-2);
  font-size: .92rem;
  display: none;
}
.form-status.is-success{ display: block; color: var(--gold-bright); }
.form-status.is-error{ display: block; color: #E28B76; }

@media (max-width: 860px){
  .contact-grid{ grid-template-columns: 1fr; gap: var(--space-4); }
  .field-row{ grid-template-columns: 1fr; }
}

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer{
  background: var(--ink-2);
  padding-block: var(--space-5) var(--space-3);
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  align-items: start;
}
/* De logo-viewBox is nu strak gecropt (zie .logo-mark hierboven),
   dus de oude verticale compensatie voor de lege ruimte in de SVG is
   niet meer nodig — de horizontale correctie staat bij .footer-brand. */
.footer-brand p{ color: var(--cream-dim); margin-top: var(--space-2); max-width: 30ch; }
.footer-brand .footer-tagline{ color: var(--cream); font-weight: 500; }
.footer-col h3{ font-size: 1rem; margin-bottom: var(--space-2); }
.footer-col ul{ display: flex; flex-direction: column; gap: .6em; list-style: none; margin: 0; padding: 0; }
.footer-col a{ color: var(--cream-dim); }
.footer-col a:hover{ color: var(--gold); }
.footer-col button.link-button{ background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--cream-dim); cursor: pointer; text-align: left; }
.footer-col button.link-button:hover{ color: var(--gold); }
.footer-social{ display: flex; gap: .8em; margin-top: var(--space-2); }
.footer-social a{
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--ink-3);
  display: flex; align-items: center; justify-content: center;
}
.footer-social svg{ width: 16px; height: 16px; fill: var(--cream-dim); }
.footer-social a:hover{ border-color: var(--gold); }
.footer-social a:hover svg{ fill: var(--gold); }
.footer-bottom{
  border-top: 1px solid var(--ink-3);
  padding-top: var(--space-3);
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  justify-content: space-between;
  font-size: .85rem;
  color: var(--cream-dim);
}
.footer-bottom a:hover{ color: var(--gold); }

@media (max-width: 700px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: span 2; }
}

/* =================================================================
   COOKIEBANNER (AVG)
   ================================================================= */
.cookie-banner{
  position: fixed;
  left: var(--space-3); right: var(--space-3); bottom: var(--space-3);
  max-width: 640px;
  margin-inline: auto;
  background: var(--ink-solid);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  z-index: 900;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
  transform: translateY(140%);
  transition: transform .5s var(--ease);
}
.cookie-banner.is-visible{ transform: translateY(0); }
.cookie-banner p{ font-size: .92rem; color: var(--cream-dim); max-width: none; }
.cookie-banner a{ color: var(--gold-bright); border-bottom: 1px solid currentColor; }
.cookie-actions{
  display: flex; flex-wrap: wrap; gap: .6em;
  margin-top: var(--space-2);
}
.cookie-settings{
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--ink-3);
  display: none;
}
.cookie-settings.is-open{ display: block; }
.cookie-toggle-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2);
  font-size: .9rem;
  padding-block: .5em;
}
.cookie-toggle-row small{ display:block; color: var(--cream-dim); font-weight: 400; }
.switch{
  position: relative; width: 42px; height: 24px; flex: none;
}
.switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.switch .track{
  position: absolute; inset: 0; background: var(--ink-3); border-radius: 999px; transition: background .2s;
}
.switch .track::after{
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  background: var(--cream); border-radius: 50%; transition: transform .2s;
}
.switch input:checked + .track{ background: var(--gold); }
.switch input:checked + .track::after{ transform: translateX(18px); }
.switch input:disabled + .track{ opacity: .5; }

@media (max-width: 480px){
  .cookie-banner{ left: var(--space-2); right: var(--space-2); bottom: var(--space-2); }
}

/* =================================================================
   WHATSAPP-KNOP (vast in beeld)
   ================================================================= */
.whatsapp-wrap{
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 800;
}
.whatsapp-btn{
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-btn:hover{
  transform: scale(1.08);
  box-shadow: 0 8px 26px rgba(0,0,0,.32);
}
.whatsapp-btn svg{ width: 32px; height: 32px; display: block; }
.whatsapp-btn .wa-tooltip{
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink-solid);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.whatsapp-btn:hover .wa-tooltip{ opacity: 1; }

/* Bevestigingspopup */
.wa-confirm{
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: 240px;
  background: #1C1C1C;
  color: #FDFAF6;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  padding: 16px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.wa-confirm.is-open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.wa-confirm p{
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #FDFAF6;
}
.wa-confirm-actions{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wa-confirm-actions button{
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background-color .2s ease;
}
.wa-confirm-yes{ background: #25D366; color: #FFFFFF; }
.wa-confirm-yes:hover{ background: #1fbd5a; }
.wa-confirm-no{ background: #5A5A5A; color: #FFFFFF; }
.wa-confirm-no:hover{ background: #6c6c6c; }

@media (max-width: 640px){
  .whatsapp-btn{ width: 48px; height: 48px; }
  .whatsapp-btn svg{ width: 28px; height: 28px; }
  .whatsapp-btn .wa-tooltip{ display: none; }
}

/* Op mobiel verdwijnt de knop vloeiend tijdens het naar beneden
   scrollen en verschijnt hij weer bij het naar boven scrollen —
   zelfde scrollrichting-detectie als de header hide-on-scroll. */
@media (max-width: 768px){
  .whatsapp-wrap{ transition: transform .3s ease, opacity .3s ease; }
  .whatsapp-wrap.wa-hidden{
    transform: translateY(100px);
    opacity: 0;
    pointer-events: none;
  }
}

/* Utility */
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* CTA-doorklikknoppen onder homepage-previews */
.section-cta{
  margin-top: var(--space-5);
  text-align: center;
}
.cta-banner{
  text-align: center;
  max-width: 40rem;
  margin-inline: auto;
}
.cta-banner .btn{ margin-top: var(--space-4); }