@charset "UTF-8";
/* ==========================================================================
   YK CARDETAILING — STIJLBLAD  (demo 2 · "Atelier")
   --------------------------------------------------------------------------
   Strak rasterontwerp: rechte hoeken, haarlijnen, veel zwart en een
   spaarzaam gouden accent.

   1.  Ontwerptokens
   2.  Reset en basis
   3.  Typografie
   4.  Layout en raster
   5.  Knoppen en kleine onderdelen
   6.  Header en navigatie
   7.  Hero
   8.  Loopbalk
   9.  Diensten-index
   10. Secties, werkwijze, kerncijfers
   11. Voor & na
   12. Galerij
   13. Formulieren
   14. Footer
   15. Animaties
   16. Toegankelijkheid en print
   ========================================================================== */


/* ==========================================================================
   1. ONTWERPTOKENS
   ========================================================================== */
:root {
  --black:      #000000;
  --panel:      #0a0a0a;
  --panel-2:    #101010;
  --panel-3:    #171717;

  --gold:       #d4af6a;
  --gold-soft:  #eacd97;
  /* Lichter dan een puur decoratief goud: deze tint wordt ook voor kleine
     tekst gebruikt (sectienummers, index, vraagnummers) en haalt zo het
     minimale contrast van 4,5:1 op zwart. */
  --gold-dim:   #9a7c42;
  --gold-grad:  linear-gradient(100deg, #7d6434 0%, #eacd97 40%, #d4af6a 65%, #7d6434 100%);

  --white:      #ffffff;
  --text:       #e6e6e6;
  --text-soft:  #b0b0b0;
  --muted:      #838383;

  --line:       rgba(255, 255, 255, .1);
  --line-2:     rgba(255, 255, 255, .18);
  --line-gold:  rgba(212, 175, 106, .38);

  --danger:     #e96a6a;
  --success:    #6fc98a;

  --font: "Space Grotesk", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --fs-hero:  clamp(2.4rem, 8.4vw, 5.6rem);
  --fs-h1:    clamp(2rem, 5.4vw, 3.6rem);
  --fs-h2:    clamp(1.7rem, 4vw, 2.85rem);
  --fs-h3:    clamp(1.1rem, 2vw, 1.35rem);
  --fs-lead:  clamp(1rem, 1.6vw, 1.15rem);
  --fs-body:  .98rem;
  --fs-sm:    .875rem;
  --fs-xs:    .74rem;

  --gap:           clamp(1rem, 2.2vw, 1.5rem);
  --section-y:     clamp(3.5rem, 8vw, 7.5rem);
  --section-y-sm:  clamp(2.75rem, 5.5vw, 4.75rem);
  --container:     1420px;
  --pad:           clamp(1.1rem, 4vw, 3.5rem);

  --ease:      cubic-bezier(.25, .6, .3, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur:       .5s;
  --dur-fast:  .22s;

  --header-h: 66px;
}

@media (min-width: 1000px) {
  :root { --header-h: 78px; }
}


/* ==========================================================================
   2. RESET EN BASIS
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 14px);
  overflow-x: clip;
}

body {
  min-height: 100vh;
  background: var(--black);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
ul, ol { list-style: none; padding: 0; }

::selection { background: var(--gold); color: var(--black); }

:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--black); }
::-webkit-scrollbar-thumb { background: var(--panel-3); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }


/* ==========================================================================
   3. TYPOGRAFIE
   ========================================================================== */
h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--white);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -.01em; }

p { text-wrap: pretty; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--text-soft);
}

.muted { color: var(--muted); }
.gold  { color: var(--gold); }

strong, b { font-weight: 700; color: var(--white); }

/* Monospace-achtig label — typerend voor dit ontwerp */
.label {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  font-feature-settings: "tnum";
}

.label::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  flex: none;
}

.label--plain::before { display: none; }

/* Sectienummer linksboven */
.section-index {
  display: block;
  font-size: var(--fs-xs);
  letter-spacing: .22em;
  color: var(--gold-dim);
  margin-bottom: .9rem;
}


/* ==========================================================================
   4. LAYOUT EN RASTER
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.container--narrow { max-width: 880px; }

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--sm    { padding-block: var(--section-y-sm); }
.section--panel { background: var(--panel); }
.section--rule  { border-top: 1px solid var(--line); }

/* Sectiekop: label links, titel groot, tekst ernaast */
.head {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2rem, 4.5vw, 3.5rem);
}

@media (min-width: 900px) {
  .head {
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 3rem;
  }
  .head--single { grid-template-columns: 1fr; }
}

.head__title { max-width: 20ch; }

.head__text {
  color: var(--text-soft);
  font-size: var(--fs-lead);
  max-width: 52ch;
}

.head__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .head__aside { align-items: flex-start; }
}

.grid { display: grid; gap: var(--gap); }

@media (min-width: 620px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--text  { grid-template-columns: 1.1fr .9fr; }
  .split--media { grid-template-columns: .9fr 1.1fr; }
  .split--flip > *:first-child { order: 2; }
}

/* Voortgangsbalk bovenaan het scherm */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  background: var(--gold-grad);
  pointer-events: none;
}


/* ==========================================================================
   5. KNOPPEN EN KLEINE ONDERDELEN
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .9rem 1.5rem;
  min-height: 48px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.btn .icon { width: 17px; height: 17px; flex: none; transition: transform var(--dur) var(--ease-out); }
.btn:hover .icon { transform: translateX(4px); }

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold);
  transform: translateY(101%);
  transition: transform var(--dur) var(--ease-out);
}

.btn:hover::before,
.btn:focus-visible::before { transform: translateY(0); }
.btn:hover { color: var(--black); border-color: var(--gold); }

.btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--black);
  font-weight: 700;
}

.btn--gold::before { background: var(--white); }
.btn--gold:hover { color: var(--black); border-color: var(--white); }

.btn--sm { padding: .65rem 1.1rem; min-height: 40px; }
.btn--lg { padding: 1.1rem 1.9rem; min-height: 56px; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

@media (max-width: 419px) { .btn-row .btn { width: 100%; } }

/* Tekstlink met onderlijn die opent */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding-bottom: 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--line-gold);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), gap var(--dur) var(--ease-out);
}

.tlink .icon { width: 16px; height: 16px; }
.tlink:hover { color: var(--gold-soft); border-color: var(--gold-soft); gap: .95rem; }

.icon { width: 21px; height: 21px; flex: none; }
.icon--xs { width: 14px; height: 14px; }
.icon--sm { width: 17px; height: 17px; }

/* Lijst met streepjes in plaats van vinkjes — past bij het strakke raster */
.list { display: grid; }

.list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  align-items: start;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-soft);
  font-size: var(--fs-sm);
}

.list li:first-child { border-top: 1px solid var(--line); }

.list .icon {
  width: 16px;
  height: 16px;
  margin-top: .42rem;
  color: var(--gold);
  stroke-width: 2;
}

/* Definitielijst */
.specs { display: grid; border-top: 1px solid var(--line); }

.specs > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}

.specs dt {
  font-size: var(--fs-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.specs dd { font-size: var(--fs-sm); font-weight: 600; color: var(--white); text-align: right; }

/* Kader om een beeld */
.frame {
  position: relative;
  overflow: hidden;
  background: var(--panel-2);
}

.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--4x3 img { aspect-ratio: 4 / 3; }
.frame--3x4 img { aspect-ratio: 3 / 4; }
.frame--16x9 img { aspect-ratio: 16 / 9; }
.frame--1x1 img { aspect-ratio: 1 / 1; }

/* Hoekmarkeringen — subtiel technisch detail */
.frame--marks::before,
.frame--marks::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--gold);
  pointer-events: none;
  z-index: 2;
}

.frame--marks::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.frame--marks::after  { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

.caption {
  margin-top: .75rem;
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}


/* ==========================================================================
   6. HEADER EN NAVIGATIE
   ========================================================================== */
/* De header staat bewust bóven het menu (z-index 250). Anders ligt het
   menupaneel over de sluitknop heen en kan de bezoeker het menu niet meer
   wegklikken. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 260;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.site-header.is-stuck {
  background: rgba(0, 0, 0, .96);
  border-bottom-color: var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand { display: inline-flex; align-items: center; gap: .75rem; min-width: 0; }

.brand__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.brand:hover .brand__mark { background: var(--gold); color: var(--black); }

.brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }

.brand__name {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}

.brand__tag {
  font-size: .6rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* Pas op de allersmalste toestellen (320 px) wordt de naam weggelaten;
   op elke gangbare telefoon (360 px en breder) blijft hij staan. */
@media (max-width: 359px) { .brand__text { display: none; } }

.nav { display: none; }

@media (min-width: 1040px) {
  .nav { display: block; }
  .nav ul { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
}

.nav a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  padding: .45rem 0;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.nav a sup {
  font-size: .55rem;
  letter-spacing: 0;
  color: var(--gold-dim);
  transition: color var(--dur-fast) var(--ease);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur) var(--ease-out);
}

.nav a:hover,
.nav a.is-active { color: var(--white); }
.nav a:hover sup,
.nav a.is-active sup { color: var(--gold); }

.nav a:hover::after,
.nav a.is-active::after { transform: scaleX(1); transform-origin: left center; }

.header-actions { display: flex; align-items: center; gap: .6rem; }
.header-actions .btn { display: none; }

@media (min-width: 1140px) { .header-actions .btn { display: inline-flex; } }

.burger {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-2);
  transition: border-color var(--dur-fast) var(--ease);
}

.burger:hover { border-color: var(--gold); }

@media (min-width: 1040px) { .burger { display: none; } }

.burger span { display: grid; gap: 5px; width: 18px; }

.burger i {
  display: block;
  height: 1.5px;
  background: var(--white);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease);
}

.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Zonder JavaScript werkt het uitklapmenu niet. In dat geval verbergen we de
   knop en schrijven we de navigatie gewoon uit, zodat de bezoeker op elk
   toestel verder kan. */
.no-js .burger { display: none; }

.no-js .site-header__inner { flex-wrap: wrap; row-gap: .5rem; }

.no-js .nav { display: block; width: 100%; }

.no-js .nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  padding-bottom: .6rem;
}

/* --- Mobiel menu: volledig scherm, van boven ---------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: calc(var(--header-h) + 2rem) var(--pad) 2rem;
  background: var(--black);
  overflow-y: auto;
  overscroll-behavior: contain;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease-out);
}

.menu[hidden] { display: none; }
.menu.is-open { clip-path: inset(0 0 0 0); }

.menu__list { display: grid; }

.menu__list li { border-bottom: 1px solid var(--line); }

.menu__list a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  font-size: clamp(1.5rem, 7vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--text);
}

.menu__list a sup { font-size: .6rem; letter-spacing: .1em; color: var(--gold); }
.menu__list a:hover,
.menu__list a.is-active { color: var(--gold); }

.menu__foot { display: grid; gap: 1.25rem; }

.menu__contact { display: grid; gap: .7rem; font-size: var(--fs-sm); }
.menu__contact a { display: inline-flex; align-items: center; gap: .65rem; color: var(--text-soft); }
.menu__contact .icon { color: var(--gold); }
.menu__contact a:hover { color: var(--white); }

@media (prefers-reduced-motion: no-preference) {
  .menu__list li { opacity: 0; transform: translateY(16px); }
  .menu.is-open .menu__list li {
    opacity: 1;
    transform: none;
    transition: opacity .45s var(--ease-out) calc(var(--i) * 60ms + 120ms),
                transform .45s var(--ease-out) calc(var(--i) * 60ms + 120ms);
  }
}

body.menu-open { overflow: hidden; }

/* Terwijl het menu openstaat, gaat de header op in het paneel: alleen het
   logo en de sluitknop blijven zichtbaar. */
body.menu-open .site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}


/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero {
  position: relative;
  border-bottom: 1px solid var(--line);
}

.hero__grid { display: grid; }

@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: 1fr 1fr;
    /* Eerst zonder svh, voor oudere Safari-versies die die eenheid niet
       kennen en de hele regel anders zouden overslaan. */
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
  }
}

/* --- Linkerhelft: tekst ------------------------------------------------- */
.hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding: clamp(2.5rem, 7vw, 5rem) var(--pad) clamp(2.5rem, 6vw, 4rem);
  order: 2;
}

@media (min-width: 1000px) {
  .hero__content {
    order: 1;
    padding-left: max(var(--pad), calc((100vw - var(--container)) / 2 + var(--pad)));
    padding-right: clamp(2rem, 4vw, 4rem);
  }
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.045em;
  color: var(--white);
}

/* De regel uit de briefing onder de bedrijfsnaam. Kleiner dan de naam zelf,
   zodat de hiërarchie klopt: eerst wie, dan wat. */
.hero__title em {
  display: block;
  margin-top: .45em;
  font-style: normal;
  font-size: .42em;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--gold);
}

.hero__text { max-width: 44ch; color: var(--text-soft); font-size: var(--fs-lead); }

.hero__meta {
  display: grid;
  gap: 0;
  margin-top: .75rem;
  border-top: 1px solid var(--line);
}

.hero__meta li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  align-items: center;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--text-soft);
}

.hero__meta .icon { color: var(--gold); }
.hero__meta strong { color: var(--white); font-weight: 600; }

/* --- Rechterhelft: beeld/video ------------------------------------------ */
.hero__media {
  position: relative;
  order: 1;
  min-height: clamp(300px, 52vh, 520px);
  min-height: clamp(300px, 52svh, 520px);
  overflow: hidden;
  background: var(--panel-2);
}

@media (min-width: 1000px) {
  .hero__media { order: 2; min-height: 0; border-left: 1px solid var(--line); }
}

.hero__media img,
.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media video { opacity: 0; transition: opacity 1s var(--ease); z-index: 1; }
.hero__media video.is-ready { opacity: 1; }

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .55) 100%);
  pointer-events: none;
}

/* Pauzeknop — verplicht voor bewegende inhoud (WCAG 2.2.2) */
.media-toggle {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .48rem .85rem;
  border: 1px solid var(--line-2);
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.media-toggle:hover { border-color: var(--gold); color: var(--gold); }

/* --- Compacte kop voor binnenpagina's ----------------------------------- */
.page-head {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
  padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2.5rem, 6vw, 4rem);
}

.page-head__media { position: absolute; inset: 0; z-index: -2; }
.page-head__media img { width: 100%; height: 100%; object-fit: cover; }

.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .62) 50%, var(--black) 100%),
    linear-gradient(100deg, rgba(0, 0, 0, .92) 5%, rgba(0, 0, 0, .28) 70%);
}

.page-head__inner { max-width: 820px; }
.page-head h1 { margin-block: 1rem .9rem; }
.page-head p { color: var(--text-soft); font-size: var(--fs-lead); max-width: 58ch; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.crumbs li { display: inline-flex; align-items: center; }
.crumbs li:not(:last-child)::after { content: "—"; margin-left: .45rem; color: var(--gold-dim); }
.crumbs a:hover { color: var(--gold); }
.crumbs [aria-current] { color: var(--text-soft); }


/* ==========================================================================
   8. LOOPBALK
   ========================================================================== */
.ticker {
  position: relative;
  display: flex;
  overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--panel);
  padding-block: .9rem;
  user-select: none;
}

.ticker__track {
  display: flex;
  flex: none;
  gap: 2.5rem;
  padding-right: 2.5rem;
  align-items: center;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .ticker__track { animation: tickerScroll 38s linear infinite; }
  .ticker:hover .ticker__track { animation-play-state: paused; }
}

@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Zonder beweging: gewoon een leesbare rij die horizontaal schuifbaar is */
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; }
  /* Bij uitgezette beweging volstaat één rij; de tweede is enkel een
     kopie om de lus naadloos te laten lijken. */
  .ticker__track + .ticker__track { display: none; }
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.ticker__item::after {
  content: "";
  width: 6px;
  height: 6px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
  flex: none;
}

.ticker__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(30px, 6vw, 90px);
  z-index: 2;
  pointer-events: none;
}

.ticker__fade--l { left: 0;  background: linear-gradient(90deg, var(--panel), transparent); }
.ticker__fade--r { right: 0; background: linear-gradient(270deg, var(--panel), transparent); }


/* ==========================================================================
   9. DIENSTEN-INDEX
   ========================================================================== */
.index { position: relative; border-top: 1px solid var(--line); }

/* isolation maakt van de rij een eigen stapelcontext. Zonder die regel
   verdwijnt de hover-vulling hieronder (z-index -1) achter de achtergrond
   van de sectie en zie je er niets van. */
.index__row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem 1rem;
  align-items: center;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
  transition: padding var(--dur) var(--ease-out);
}

@media (min-width: 900px) {
  .index__row {
    grid-template-columns: 72px minmax(230px, 1fr) 1.15fr auto;
    gap: 1.5rem;
    padding: 1.7rem 0;
  }
  .index__row:hover { padding-inline: 1.25rem; }
}

/* Gouden vulling die vanaf links inschuift */
.index__row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--panel-2);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out);
}

.index__row:hover::before,
.index__row:focus-visible::before { transform: scaleX(1); }

.index__nr {
  font-size: var(--fs-xs);
  letter-spacing: .18em;
  color: var(--gold-dim);
  transition: color var(--dur-fast) var(--ease);
}

.index__row:hover .index__nr { color: var(--gold); }

.index__title {
  font-size: clamp(1.15rem, 3.2vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--white);
  grid-column: 2;
}

@media (min-width: 900px) { .index__title { grid-column: auto; } }

.index__desc {
  grid-column: 2;
  font-size: var(--fs-sm);
  color: var(--muted);
}

@media (min-width: 900px) { .index__desc { grid-column: auto; max-width: 46ch; } }

.index__go {
  display: none;
  color: var(--gold);
  transition: transform var(--dur) var(--ease-out);
}

@media (min-width: 900px) { .index__go { display: block; } }
.index__row:hover .index__go { transform: translateX(6px); }

/* Miniatuur op mobiel — daar bestaat de zwevende voorvertoning niet */
.index__thumb {
  grid-column: 1 / -1;
  margin-top: .85rem;
  overflow: hidden;
  background: var(--panel-2);
}

.index__thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

@media (min-width: 900px) { .index__thumb { display: none; } }

/* Zwevende voorvertoning die de muis volgt */
.index__preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 300px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(-50%, -50%) scale(.94);
  transition: opacity .35s var(--ease), transform .35s var(--ease-out);
  border: 1px solid var(--line-gold);
  display: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .index__preview { display: block; }
  .index__preview.is-active { opacity: 1; transform: translate3d(var(--x, 0), var(--y, 0), 0) translate(-50%, -50%) scale(1); }
}

.index__preview img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .index__preview { display: none !important; }
}


/* ==========================================================================
   10. SECTIES, WERKWIJZE, KERNCIJFERS
   ========================================================================== */

/* --- Kaart met beeld ---------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.card:hover,
.card:focus-within { border-color: var(--line-gold); background: var(--panel-2); }

.card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--panel-2); }

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.35) contrast(1.05);
  transition: transform 1s var(--ease-out), filter var(--dur) var(--ease);
}

.card:hover .card__media img { transform: scale(1.05); filter: grayscale(0) contrast(1.05); }

.card__nr {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: .35rem .6rem;
  background: var(--black);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: .66rem;
  letter-spacing: .18em;
  color: var(--gold);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  flex: 1;
  padding: clamp(1.15rem, 2.4vw, 1.6rem);
}

.card__body p { color: var(--text-soft); font-size: var(--fs-sm); flex: 1; }

.card__icon { color: var(--gold); }

.card__link::after { content: ""; position: absolute; inset: 0; z-index: 3; }

/* --- Werkwijze: genummerde rijen ---------------------------------------- */
.steps { border-top: 1px solid var(--line); }

.step {
  display: grid;
  gap: .5rem 1.75rem;
  padding: clamp(1.35rem, 3vw, 2.1rem) 0;
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}

@media (min-width: 800px) {
  .step { grid-template-columns: 100px minmax(200px, 1fr) 1.4fr; align-items: start; }
}

.step:hover { background: var(--panel); }

.step__nr {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-dim);
  transition: -webkit-text-stroke-color var(--dur) var(--ease);
}

.step:hover .step__nr { -webkit-text-stroke-color: var(--gold); }

/* Kent de browser text-stroke niet, dan zou een transparante letter
   onzichtbaar blijven. In dat geval tonen we het cijfer gewoon gevuld. */
@supports not (-webkit-text-stroke: 1px currentColor) {
  .step__nr { color: var(--gold-dim); -webkit-text-stroke: 0; }
  .step:hover .step__nr { color: var(--gold); }
  .footer-word span { color: rgba(212, 175, 106, .22); -webkit-text-stroke: 0; }
}
.step p { color: var(--text-soft); font-size: var(--fs-sm); max-width: 62ch; }

/* --- Sterkte ------------------------------------------------------------ */
.strength {
  display: grid;
  gap: .85rem;
  height: 100%;
  padding: clamp(1.2rem, 2.5vw, 1.7rem);
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}

.strength:hover { border-color: var(--line-gold); }

.strength__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line-gold);
  color: var(--gold);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.strength:hover .strength__icon { background: var(--gold); color: var(--black); }
.strength h3 { font-size: 1rem; }
.strength p { font-size: var(--fs-sm); color: var(--text-soft); }

/* --- Doelgroep ---------------------------------------------------------- */
.audience {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(260px, 40vw, 400px);
  padding: clamp(1.2rem, 2.6vw, 1.7rem);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line);
}

.audience img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.5) brightness(.7);
  transition: transform 1.1s var(--ease-out), filter var(--dur) var(--ease);
}

.audience::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .05) 30%, rgba(0, 0, 0, .93) 100%);
}

.audience:hover img { transform: scale(1.05); filter: grayscale(0) brightness(.82); }
.audience h3 { margin-bottom: .45rem; }
.audience p { font-size: var(--fs-sm); color: var(--text-soft); max-width: 36ch; }

/* --- Kerncijfers -------------------------------------------------------- */
.facts { display: grid; border-top: 1px solid var(--line); }

@media (min-width: 620px)  { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .facts { grid-template-columns: repeat(4, 1fr); } }

.fact {
  padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 620px) {
  .fact { border-right: 1px solid var(--line); }
  .fact:nth-child(2n) { border-right: 0; }
}

@media (min-width: 1000px) {
  .fact { border-right: 1px solid var(--line); }
  .fact:nth-child(2n) { border-right: 1px solid var(--line); }
  .fact:last-child { border-right: 0; }
}

.fact__value {
  display: block;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--gold);
  margin-bottom: .65rem;
  font-variant-numeric: tabular-nums;
}

.fact__label { font-size: var(--fs-sm); color: var(--text-soft); max-width: 24ch; }

/* --- Video in een blok --------------------------------------------------- */
.video-block { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }

.video-block__media { position: relative; aspect-ratio: 16 / 10; }

.video-block__media img,
.video-block__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-block__media video { z-index: 1; opacity: 0; transition: opacity .9s var(--ease); }
.video-block__media video.is-ready { opacity: 1; }

.video-block__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(1.1rem, 3vw, 2rem);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .9));
  pointer-events: none;
}

.video-block__cap h3 { font-size: clamp(1.1rem, 2.6vw, 1.7rem); margin-bottom: .35rem; }
.video-block__cap p { color: var(--text-soft); font-size: var(--fs-sm); max-width: 48ch; }

/* --- Citaat -------------------------------------------------------------- */
.pull {
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border: 1px solid var(--line-gold);
  background: var(--panel);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  line-height: 1.45;
  letter-spacing: -.02em;
  color: var(--white);
}

.pull .icon { width: 26px; height: 26px; color: var(--gold); margin-bottom: 1rem; }

/* --- Oproep tot actie ---------------------------------------------------- */
.cta { position: relative; overflow: hidden; isolation: isolate; border-top: 1px solid var(--line); }

.cta__media { position: absolute; inset: 0; z-index: -2; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.45); }

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--black) 0%, rgba(0, 0, 0, .72) 45%, var(--black) 100%);
}

.cta__inner { display: grid; gap: 1.75rem; justify-items: start; max-width: 900px; }

.cta__title {
  font-size: clamp(2rem, 6vw, 4.2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.045em;
}

.cta p { color: var(--text-soft); font-size: var(--fs-lead); max-width: 54ch; }

/* --- FAQ ----------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  width: 100%;
  padding: 1.3rem 0;
  text-align: left;
  font-size: clamp(.98rem, 1.9vw, 1.12rem);
  font-weight: 600;
  color: var(--text);
  transition: color var(--dur-fast) var(--ease);
}

.faq__q .faq__nr { font-size: var(--fs-xs); letter-spacing: .18em; color: var(--gold-dim); }
.faq__q:hover,
.faq__item.is-open .faq__q { color: var(--gold); }
.faq__q:hover .faq__nr,
.faq__item.is-open .faq__nr { color: var(--gold); }

.faq__q .icon { color: var(--gold); transition: transform var(--dur) var(--ease-out); }
.faq__item.is-open .faq__q .icon { transform: rotate(45deg); }

/* visibility: hidden haalt een dichtgeklapt antwoord ook uit de
   toegankelijkheidsboom. Zonder die regel leest een schermlezer álle
   antwoorden voor, ook de gesloten. */
.faq__a {
  overflow: hidden;
  height: 0;
  visibility: hidden;
  transition: height var(--dur) var(--ease-out), visibility 0s linear var(--dur);
}

.faq__item.is-open .faq__a {
  visibility: visible;
  transition: height var(--dur) var(--ease-out), visibility 0s;
}

.faq__a-inner { padding: 0 0 1.4rem calc(var(--fs-xs) + 2.4rem); max-width: 74ch; color: var(--text-soft); font-size: var(--fs-sm); }

.no-js .faq__a { height: auto; visibility: visible; }
.no-js .faq__q { cursor: default; }
.no-js .faq__q .icon { display: none; }


/* ==========================================================================
   11. VOOR & NA
   ========================================================================== */
.ba { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }

.ba__item { display: grid; gap: 1.25rem; }

@media (min-width: 1000px) {
  .ba__item { grid-template-columns: 1fr 300px; gap: 2.5rem; align-items: center; }
}

.ba__viewer {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel-2);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}

.ba__viewer:focus-within { outline: 2px solid var(--gold-soft); outline-offset: 2px; }

.ba__layer { position: absolute; inset: 0; }
.ba__layer img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.ba__layer--before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }

/* Demoweergave: simuleert doffe, ongepoetste lak.
   Verwijder deze regel zodra je echte voor-foto's gebruikt. */
.ba__viewer[data-simulated="true"] .ba__layer--before img {
  filter: saturate(.3) contrast(.85) brightness(.8);
}

.ba__viewer[data-simulated="true"] .ba__layer--before::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(125, 122, 112, .25), rgba(55, 54, 50, .3));
  mix-blend-mode: soft-light;
}

.ba__tag {
  position: absolute;
  top: 0;
  z-index: 3;
  padding: .35rem .7rem;
  background: var(--black);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-soft);
  pointer-events: none;
}

.ba__tag--before { left: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ba__tag--after  { right: 0; color: var(--gold); border-left: 1px solid var(--line-gold); border-bottom: 1px solid var(--line-gold); }

.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  z-index: 4;
  width: 1px;
  margin-left: -.5px;
  background: var(--gold);
  pointer-events: none;
}

.ba__handle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  background: var(--black);
  border: 1px solid var(--gold);
}

.ba__handle .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  /* De greep is maar 1px breed; zonder deze regel knijpt de algemene
     max-width: 100% op svg's het pictogram plat. */
  max-width: none;
  color: var(--gold);
}

.ba__range {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.ba__info h3 { margin-bottom: .6rem; }
.ba__info p { color: var(--text-soft); font-size: var(--fs-sm); }

.ba__hint {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.ba__hint .icon { width: 15px; height: 15px; color: var(--gold); }


/* ==========================================================================
   12. GALERIJ
   ========================================================================== */
.gallery { display: grid; gap: var(--gap); grid-template-columns: 1fr; }

@media (min-width: 620px)  { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(4, 1fr); } }

.gallery__item {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  background: var(--panel-2);
}

/* Ritme via de beeldverhouding per rij, niet via items die over meerdere
   kolommen lopen: dat laatste laat onvermijdelijk gaten achter zodra het
   aantal foto's niet exact opgaat. Een afwijkende verhouding verandert
   alleen de rijhoogte en vult altijd netjes. */
@media (min-width: 1000px) {
  .gallery__item:nth-child(-n+4) { aspect-ratio: 3 / 4; }
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.4) brightness(.85);
  transition: transform 1.1s var(--ease-out), filter var(--dur) var(--ease);
}

.gallery__item:hover img { transform: scale(1.05); filter: grayscale(0) brightness(1); }

.gallery__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: .45rem .8rem;
  background: var(--black);
  border-top: 1px solid var(--line-gold);
  border-right: 1px solid var(--line-gold);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}


/* ==========================================================================
   13. FORMULIEREN
   ========================================================================== */
.form-panel { padding: clamp(1.25rem, 3.5vw, 2.5rem); border: 1px solid var(--line); background: var(--panel); }

.form-grid { display: grid; gap: 1.1rem; }

@media (min-width: 700px) {
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid .field--full { grid-column: 1 / -1; }
}

.field { display: grid; gap: .4rem; }

.field label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.field label .req { color: var(--gold); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .85rem .95rem;
  background: var(--black);
  border: 1px solid var(--line);
  color: var(--white);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) var(--ease);
}

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

.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 19px) center, calc(100% - 13px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.6rem;
}

.field select option { background: var(--black); color: var(--white); }
/* Lichter dan het oorspronkelijke ontwerp: de vorige tint haalde het
   minimale contrast van 4,5:1 bij lange na niet. */
.field input::placeholder,
.field textarea::placeholder { color: #7a7a7a; }

.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); }

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--danger); }

.field__error { display: flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); color: var(--danger); }
.field__hint { font-size: var(--fs-xs); color: var(--muted); }

.checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  font-size: var(--fs-sm);
  color: var(--text-soft);
  cursor: pointer;
}

.checkbox input {
  appearance: none;
  -webkit-appearance: none;
  width: 19px;
  height: 19px;
  margin-top: .22rem;
  border: 1px solid var(--line-2);
  background: var(--black);
  display: grid;
  place-items: center;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.checkbox input::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  transform: rotate(-45deg) scale(0);
  transition: transform var(--dur-fast) var(--ease-out);
}

.checkbox input:checked { background: var(--gold); border-color: var(--gold); }
.checkbox input:checked::after { transform: rotate(-45deg) scale(1); }
.checkbox a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alert {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .85rem;
  align-items: start;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  background: var(--panel-2);
  margin-bottom: 1.6rem;
  font-size: var(--fs-sm);
}

.alert .icon { margin-top: .2rem; }
.alert strong { display: block; margin-bottom: .2rem; }
.alert--success { border-color: rgba(111, 201, 138, .45); }
.alert--success .icon { color: var(--success); }
.alert--error { border-color: rgba(233, 106, 106, .45); }
.alert--error .icon { color: var(--danger); }

/* Contactblokken */
.contact-grid { display: grid; border-top: 1px solid var(--line); }

@media (min-width: 620px)  { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .contact-grid { grid-template-columns: repeat(4, 1fr); } }

.contact-item {
  display: grid;
  gap: .4rem;
  align-content: start;
  padding: clamp(1.2rem, 2.6vw, 1.75rem) clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}

@media (min-width: 620px) {
  .contact-item { border-right: 1px solid var(--line); }
  .contact-item:nth-child(2n) { border-right: 0; }
}

@media (min-width: 1080px) {
  .contact-item { border-right: 1px solid var(--line); }
  .contact-item:nth-child(2n) { border-right: 1px solid var(--line); }
  .contact-item:last-child { border-right: 0; }
}

.contact-item:hover { background: var(--panel); }
.contact-item__icon { color: var(--gold); margin-bottom: .3rem; }
.contact-item__label { font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.contact-item__value { font-size: 1rem; font-weight: 600; color: var(--white); word-break: break-word; }
a.contact-item__value:hover { color: var(--gold); }


/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.site-footer { border-top: 1px solid var(--line); background: var(--panel); }

.footer-top {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

@media (min-width: 760px)  { .footer-top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .footer-top { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }

.footer-col h2 {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 1.1rem;
}

.footer-col h2.spaced { margin-top: 1.9rem; }

.footer-text { color: var(--muted); font-size: var(--fs-sm); max-width: 44ch; margin-top: 1.2rem; }

.footer-links { display: grid; gap: .6rem; font-size: var(--fs-sm); }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--gold); }

.footer-contact { display: grid; gap: .8rem; font-size: var(--fs-sm); }

.footer-contact li { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; color: var(--muted); }
.footer-contact .icon { margin-top: .22rem; color: var(--gold); }
.footer-contact a:hover { color: var(--gold); }

.footer-hours { display: grid; gap: .5rem; font-size: var(--fs-sm); }

.footer-hours li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  padding-bottom: .45rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.footer-hours li.is-closed span:last-child { color: #7c7c7c; }

.socials { display: flex; gap: .5rem; margin-top: 1.4rem; }

.socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  color: var(--text-soft);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.socials a:hover { color: var(--gold); border-color: var(--gold); }

/* Groot woordmerk als afsluiter */
.footer-word {
  border-top: 1px solid var(--line);
  padding-block: clamp(1.5rem, 4vw, 2.75rem);
  overflow: hidden;
}

.footer-word span {
  display: block;
  font-size: clamp(2.2rem, 13vw, 11rem);
  font-weight: 700;
  line-height: .85;
  letter-spacing: -.05em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(212, 175, 106, .35);
  white-space: nowrap;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-xs);
}

@media (min-width: 900px) {
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

.footer-bottom ul { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom a:hover { color: var(--gold); }

.to-top {
  position: fixed;
  right: clamp(.9rem, 2.5vw, 1.75rem);
  bottom: clamp(.9rem, 2.5vw, 1.75rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-gold);
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--gold);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out), visibility var(--dur);
}

.to-top .icon { transform: rotate(180deg); }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gold); color: var(--black); }


/* ==========================================================================
   15. ANIMATIES
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  .js [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
    transition-delay: var(--delay, 0ms);
  }

  .js [data-reveal="left"]  { transform: translateX(-22px); }
  .js [data-reveal="right"] { transform: translateX(22px); }
  .js [data-reveal="none"]  { transform: none; }

  /* Onder 900px staan die blokken toch onder elkaar; zijwaarts schuiven
     zou daar buiten het scherm vallen. */
  @media (max-width: 899px) {
    .js [data-reveal="left"],
    .js [data-reveal="right"] { transform: translateY(22px); }
  }

  .js [data-reveal].is-visible { opacity: 1; transform: none; }

  /* Regel voor regel oplopend onthullen — typerend voor de index.
     Elementen met data-reveal-skip blijven buiten schot: dat zijn
     hulpelementen zoals de zwevende voorvertoning, die hun eigen
     zichtbaarheid regelen. */
  .js [data-reveal-rows] > *:not([data-reveal-skip]) {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
  }

  .js [data-reveal-rows].is-visible > *:not([data-reveal-skip]) { opacity: 1; transform: none; }
  .js [data-reveal-rows].is-visible > *:not([data-reveal-skip]):nth-child(1) { transition-delay: 40ms; }
  .js [data-reveal-rows].is-visible > *:not([data-reveal-skip]):nth-child(2) { transition-delay: 100ms; }
  .js [data-reveal-rows].is-visible > *:not([data-reveal-skip]):nth-child(3) { transition-delay: 160ms; }
  .js [data-reveal-rows].is-visible > *:not([data-reveal-skip]):nth-child(4) { transition-delay: 220ms; }
  .js [data-reveal-rows].is-visible > *:not([data-reveal-skip]):nth-child(5) { transition-delay: 280ms; }
  .js [data-reveal-rows].is-visible > *:not([data-reveal-skip]):nth-child(6) { transition-delay: 340ms; }
  .js [data-reveal-rows].is-visible > *:not([data-reveal-skip]):nth-child(7) { transition-delay: 400ms; }

  /* Beeldonthulling met een schuivend gordijn.

     Let op: de onthulling én de parallax willen allebei de transform van
     dezelfde afbeelding aansturen. Zouden ze elk hun eigen transform-regel
     schrijven, dan wint de specifiekste en valt de andere stilzwijgend weg.
     Daarom regelen ze samen één transform en sturen ze alleen hun eigen
     variabele aan: --img-scale voor de onthulling, --shift voor de parallax. */
  .js [data-reveal-image] { position: relative; overflow: hidden; }

  .js [data-reveal-image]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--black);
    transform-origin: right center;
    transition: transform 1s var(--ease-out);
  }

  .js [data-reveal-image].is-visible::after { transform: scaleX(0); }

  .js [data-reveal-image] > img { --img-scale: 1.1; transition: transform 1.4s var(--ease-out); }
  .js [data-reveal-image].is-visible > img { --img-scale: 1; }

  /* De schaal geeft de speling die nodig is om te kunnen schuiven zonder
     dat de randen vrijkomen. */
  [data-parallax] > img { --img-scale: 1.12; will-change: transform; }

  /* Draagt een beeld beide effecten, dan houden we de schaal vast en laten
     we alleen het gordijn bewegen. Zou de transform hier meebewegen, dan
     zou de trage overgang van de onthulling ook op elke parallaxstap gaan
     zitten en schuift het beeld met een seconde vertraging mee. */
  .js [data-reveal-image][data-parallax] > img {
    --img-scale: 1.12;
    transition: none;
  }

  [data-parallax] > img,
  .js [data-reveal-image] > img {
    transform: translate3d(0, var(--shift, 0px), 0) scale(var(--img-scale, 1));
  }

  /* Lichte 3D-kanteling, enkel met een muis */
  @media (hover: hover) and (pointer: fine) {
    [data-tilt] {
      transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
      transition: transform .5s var(--ease-out), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
    }
    [data-tilt].is-tilting { transition: transform .08s linear, border-color var(--dur) var(--ease); }
  }
}


/* ==========================================================================
   16. TOEGANKELIJKHEID EN PRINT
   ========================================================================== */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 400;
  transform: translate(-50%, -140%);
  padding: .75rem 1.3rem;
  background: var(--gold);
  color: var(--black);
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: transform var(--dur) var(--ease-out);
}

.skip-link:focus { transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .hero__media video,
  .video-block__media video { opacity: 1; }
  .progress { display: none; }
}

@media print {
  body { background: #fff; color: #000; }
  .site-header, .menu, .to-top, .ticker, .progress,
  .hero__media, .cta__media, .site-footer { display: none !important; }
  a { color: #000; text-decoration: underline; }
}