/* ==========================================================================
   ONEMANCREW - stylesheet
   Opgebouwd volgens ITCSS-achtige volgorde: tokens > reset > basis >
   layout > componenten > paginasecties > utilities > media queries.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONTS
   -------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* --------------------------------------------------------------------------
   2. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Kleuren */
  --color-light: #ffffff;
  --color-dark: #202020;
  --color-accent: #d07335;
  --color-accent-dark: #9c5322;
  --color-accent-soft: #f3ddc9;
  --color-teal: #148a8a;
  --color-teal-dark: #0e6666;
  --color-rec: #e8432f;

  --gradient-spice: linear-gradient(135deg, var(--color-teal), var(--color-accent));
  /* Donkerdere variant van de gradient, gebruikt als sectie-achtergrond zodat
     witte tekst er in elke maat voldoende contrast op houdt (WCAG AA). */
  --gradient-spice-dark: linear-gradient(135deg, #0f6e6e, var(--color-accent-dark));

  /* Oppervlakken */
  --color-dark-surface: #282828;
  --color-dark-surface-raised: #2f2f2f;
  --color-dark-border: rgba(255, 255, 255, 0.14);
  --color-light-surface: #f6f4f1;
  --color-light-surface-raised: #efece7;
  --color-light-border: rgba(32, 32, 32, 0.12);

  /* Tekst */
  --color-text-on-light: var(--color-dark);
  --color-text-on-light-muted: rgba(32, 32, 32, 0.7);
  --color-text-on-dark: var(--color-light);
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.72);

  /* Typografie */
  --font-primary: 'Poppins', 'Segoe UI', Arial, sans-serif;

  --fs-xs: clamp(0.78rem, 0.75rem + 0.15vw, 0.9rem);
  --fs-sm: clamp(0.88rem, 0.84rem + 0.2vw, 1rem);
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.15rem);
  --fs-md: clamp(1.15rem, 1.05rem + 0.45vw, 1.45rem);
  --fs-lg: clamp(1.35rem, 1.18rem + 0.85vw, 1.9rem);
  --fs-xl: clamp(1.7rem, 1.4rem + 1.3vw, 2.5rem);
  --fs-h2: clamp(2.1rem, 1.7rem + 1.9vw, 3.4rem);
  --fs-h1: clamp(2.6rem, 1.9rem + 3.4vw, 5.5rem);

  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.65;

  --ls-tight: -0.01em;
  --ls-wide: 0.05em;
  --ls-wider: 0.14em;

  /* Ruimte */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.25rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;

  --section-padding-y: clamp(4rem, 3rem + 5vw, 8rem);
  --container-width: 1280px;
  --container-width-narrow: 800px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* Schaduwen */
  --shadow-sm: 0 2px 10px rgba(32, 32, 32, 0.08);
  --shadow-md: 0 10px 30px rgba(32, 32, 32, 0.14);
  --shadow-lg: 0 20px 55px rgba(32, 32, 32, 0.2);
  --shadow-glow-accent: 0 0 0 1px rgba(208, 115, 53, 0.4), 0 8px 24px rgba(208, 115, 53, 0.35);

  /* Beweging */
  --ease-camera: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 400ms;

  /* Laagvolgorde */
  --z-header: 100;
  --z-floating: 150;
  --z-overlay: 200;
  --z-modal: 300;
  --z-transition: 500;
}

/* --------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  min-height: 100svh;
  font-family: var(--font-primary);
  font-weight: 300;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text-on-light);
  background-color: var(--color-light);
  overflow-x: hidden;
  overflow-wrap: break-word;
}

body.has-lock-scroll {
  overflow: hidden;
}

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

svg {
  fill: none;
  stroke: currentColor;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: var(--lh-heading);
  text-wrap: balance;
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 1000;
  padding: 0.85rem 1.5rem;
  background: var(--color-dark);
  color: var(--color-light);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--duration-base) var(--ease-camera);
}

.skip-link:focus {
  top: var(--space-sm);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* De felle accentkleur valt te weinig op tegen de donkere gradient-secties,
   daarom krijgt alles dat daarbinnen focus krijgt een witte outline. */
.section--gradient :focus-visible {
  outline-color: var(--color-light);
}

/* --------------------------------------------------------------------------
   5. LAYOUT
   -------------------------------------------------------------------------- */
[id] {
  scroll-margin-top: 6.5rem;
}

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

.container--narrow {
  max-width: var(--container-width-narrow);
}

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

.section--light {
  background: var(--color-light);
  color: var(--color-text-on-light);
}

.section--tint {
  background: var(--color-light-surface);
  color: var(--color-text-on-light);
}

.section--dark {
  background: var(--color-dark);
  color: var(--color-text-on-dark);
}

.section--gradient {
  background: var(--gradient-spice-dark);
  color: var(--color-light);
}

.section__head {
  max-width: 46rem;
  margin-bottom: var(--space-xl);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

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

.grid--2 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   6. TYPOGRAFIE-UTILITIES
   -------------------------------------------------------------------------- */
.h1,
h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  letter-spacing: var(--ls-tight);
}

.h2,
h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
}

.h3,
h3 {
  font-size: var(--fs-xl);
  font-weight: 700;
}

.h4,
h4 {
  font-size: var(--fs-md);
  font-weight: 700;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-accent-dark);
  margin-bottom: var(--space-sm);
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--color-accent-dark);
  flex-shrink: 0;
}

.section--dark .eyebrow {
  color: var(--color-accent-soft);
}

.section--dark .eyebrow::before {
  background: var(--color-accent-soft);
}

.section--gradient .eyebrow {
  color: var(--color-light);
}

.section--gradient .eyebrow::before {
  background: var(--color-light);
}

.lede {
  font-size: var(--fs-md);
  font-weight: 300;
  line-height: var(--lh-body);
}

.text-muted {
  color: var(--color-text-on-light-muted);
}

.section--dark .text-muted,
.section--gradient .text-muted {
  color: var(--color-text-on-dark-muted);
}

.text-center {
  text-align: center;
}

.uppercase {
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

/* --------------------------------------------------------------------------
   7. CINEMATISCHE DETAILS (herbruikbaar)
   -------------------------------------------------------------------------- */
.frame-corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.frame-corners__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--color-accent);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-camera), transform var(--duration-slow) var(--ease-camera);
}

.frame-corners__corner--tl {
  top: 12px;
  left: 12px;
  border-right: none;
  border-bottom: none;
  transform: translate(-6px, -6px);
}

.frame-corners__corner--tr {
  top: 12px;
  right: 12px;
  border-left: none;
  border-bottom: none;
  transform: translate(6px, -6px);
}

.frame-corners__corner--bl {
  bottom: 12px;
  left: 12px;
  border-right: none;
  border-top: none;
  transform: translate(-6px, 6px);
}

.frame-corners__corner--br {
  bottom: 12px;
  right: 12px;
  border-left: none;
  border-top: none;
  transform: translate(6px, 6px);
}

.has-frame-reveal:hover .frame-corners__corner,
.has-frame-reveal:focus-within .frame-corners__corner {
  opacity: 1;
  transform: translate(0, 0);
}

.has-frame-static .frame-corners__corner {
  opacity: 1;
  transform: translate(0, 0);
}

.rec-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-light);
}

.rec-tag__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-rec);
  animation: rec-pulse 1.4s ease-in-out infinite;
}

.timecode {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  font-size: var(--fs-xs);
  color: var(--color-text-on-dark-muted);
}

@keyframes rec-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.8);
  }
}

/* --------------------------------------------------------------------------
   7B. LIQUID GLASS
   Herbruikbaar "vloeibaar glas" effect: vervaagde, verzadigde achtergrond,
   een zachte specular highlight linksboven en een subtiele sheen die bij
   hover over het oppervlak trekt. Bewust een donkere, vrij dekkende tint
   (niet flinterdun glas), zodat witte tekst er altijd goed op leesbaar
   blijft, ongeacht wat voor foto of kleur erachter zit. Gebruikt op chrome
   (navigatie, bediening, zwevende knoppen, de carrousel), bewust niet op
   tekstzware vlakken waar het gewone kaartsysteem blijft leiden.
   -------------------------------------------------------------------------- */
.glass {
  position: relative;
  background: linear-gradient(155deg, rgba(18, 18, 18, 0.86), rgba(18, 18, 18, 0.68));
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 24px 48px -20px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -16px 24px -20px rgba(255, 255, 255, 0.08);
  isolation: isolate;
}

.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(130% 80% at 15% -15%, rgba(255, 255, 255, 0.45), transparent 55%);
  opacity: 0.6;
  pointer-events: none;
}

.glass--interactive {
  overflow: hidden;
  transition:
    transform var(--duration-base) var(--ease-camera),
    box-shadow var(--duration-base) var(--ease-camera),
    border-color var(--duration-base) var(--ease-camera);
}

.glass--interactive::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.28) 48%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 750ms var(--ease-camera);
  pointer-events: none;
}

.glass--interactive:hover::after,
.glass--interactive:focus-visible::after {
  transform: translateX(130%);
}

.glass--interactive:hover,
.glass--interactive:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    0 28px 56px -18px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -16px 24px -20px rgba(255, 255, 255, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .glass--interactive::after {
    display: none;
  }
  .glass--interactive:hover,
  .glass--interactive:focus-visible {
    transform: none;
  }
}

/* Lichte variant: hetzelfde vloeibare-glaseffect, maar dan een helder,
   doorschijnend wit oppervlak voor gebruik op witte of lichtgetinte
   secties, met donkere tekst. Het glaseffect zit in de kaart zelf: een
   subtiele merkkleurige tint zit gebakken in de achtergrond, dus de kaart
   oogt als glas ongeacht wat erachter staat. Backdrop-filter voegt daar
   nog net genoeg vervaging en verzadiging aan toe van wat er wel achter
   zit, een dieper schaduw-effect en lichte binnenrand geven de kaart
   verder body. */
.glass-light {
  position: relative;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.32)),
    linear-gradient(135deg, rgba(20, 138, 138, 0.12), rgba(208, 115, 53, 0.1));
  backdrop-filter: blur(24px) saturate(260%);
  -webkit-backdrop-filter: blur(24px) saturate(260%);
  border-top: 1px solid rgba(255, 255, 255, 0.95);
  border-left: 1px solid rgba(255, 255, 255, 0.65);
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(32, 32, 32, 0.14);
  box-shadow:
    0 12px 20px -14px rgba(32, 32, 32, 0.42),
    0 34px 56px -30px rgba(32, 32, 32, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  isolation: isolate;
}

.glass-light::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(130% 80% at 15% -15%, rgba(255, 255, 255, 0.7), transparent 55%);
  opacity: 0.7;
  pointer-events: none;
}

.glass-light.glass--interactive::after {
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 48%, transparent 62%);
}

.glass-light.glass--interactive:hover,
.glass-light.glass--interactive:focus-visible {
  border-top-color: rgba(255, 255, 255, 1);
  border-left-color: rgba(255, 255, 255, 0.75);
  border-right-color: rgba(255, 255, 255, 0.6);
  border-bottom-color: rgba(32, 32, 32, 0.18);
  box-shadow:
    0 16px 26px -14px rgba(32, 32, 32, 0.46),
    0 40px 64px -28px rgba(32, 32, 32, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Deze secties krijgen een heel zachte, vervaagde kleurvlek in de hoeken,
   puur als sfeertje voor backdrop-filter om mee te werken. Bewust subtiel:
   het glaseffect moet van de kaarten komen (zie .glass-light hierboven),
   niet van de sectie-achtergrond zelf. */
.section--glass-ambient {
  position: relative;
  overflow: hidden;
}

.section--glass-ambient > .container {
  position: relative;
  z-index: 1;
}

.section--glass-ambient::before,
.section--glass-ambient::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.section--glass-ambient::before {
  width: clamp(200px, 20vw, 340px);
  height: clamp(200px, 20vw, 340px);
  background: var(--color-teal);
  opacity: 0.14;
  top: -8%;
  left: -6%;
}

.section--glass-ambient::after {
  width: clamp(180px, 18vw, 300px);
  height: clamp(180px, 18vw, 300px);
  background: var(--color-accent);
  opacity: 0.14;
  bottom: -10%;
  right: -6%;
}

/* --------------------------------------------------------------------------
   8. KNOPPEN - "camera start met opnemen"
   -------------------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 1.05rem 2.1rem;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  cursor: pointer;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--duration-base) var(--ease-camera),
    background-color var(--duration-base) var(--ease-camera),
    border-color var(--duration-base) var(--ease-camera),
    transform var(--duration-fast) var(--ease-camera),
    box-shadow var(--duration-base) var(--ease-camera);
}

.btn:active {
  transform: scale(0.97);
}

.btn__label {
  display: inline-flex;
  align-items: center;
}

/* REC-indicator + lopende timecode, verschijnt bij hover/focus/tap */
.btn__rec {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition:
    max-width var(--duration-slow) var(--ease-camera),
    opacity var(--duration-fast) var(--ease-camera);
}

.btn:hover .btn__rec,
.btn:focus-visible .btn__rec,
.btn.is-touch-active .btn__rec {
  max-width: 9rem;
  opacity: 1;
}

.btn__rec-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.btn:hover .btn__rec-dot,
.btn:focus-visible .btn__rec-dot,
.btn.is-touch-active .btn__rec-dot {
  animation: rec-pulse 1.1s ease-in-out infinite;
}

.btn__rec-time {
  font-variant-numeric: tabular-nums;
  font-size: 0.82em;
  letter-spacing: 0.02em;
}

/* Viewfinder-hoekjes die naar binnen schuiven */
.btn__corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  opacity: 0;
  transition:
    opacity var(--duration-fast) var(--ease-camera),
    transform var(--duration-slow) var(--ease-camera);
  pointer-events: none;
}

.btn__corner--tl {
  top: 4px;
  left: 4px;
  border-right: none;
  border-bottom: none;
  transform: translate(-5px, -5px);
}

.btn__corner--tr {
  top: 4px;
  right: 4px;
  border-left: none;
  border-bottom: none;
  transform: translate(5px, -5px);
}

.btn__corner--bl {
  bottom: 4px;
  left: 4px;
  border-right: none;
  border-top: none;
  transform: translate(-5px, 5px);
}

.btn__corner--br {
  bottom: 4px;
  right: 4px;
  border-left: none;
  border-top: none;
  transform: translate(5px, 5px);
}

.btn:hover .btn__corner,
.btn:focus-visible .btn__corner,
.btn.is-touch-active .btn__corner {
  opacity: 1;
  transform: translate(0, 0);
}

/* Shutter-flits bij klik */
.btn__flash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 72%);
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}

.btn.is-active .btn__flash {
  animation: btn-flash 480ms var(--ease-camera);
}

@keyframes btn-flash {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  30% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

/* Varianten */
.btn--primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  /* Donkere tekst op de accentkleur haalt WCAG AA-contrast (circa 4,8:1);
     wit op #d07335 komt net onder de vereiste 4,5:1 uit. */
  color: var(--color-dark);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  box-shadow: var(--shadow-glow-accent);
}

.btn--secondary {
  background: transparent;
  border-color: var(--color-dark);
  color: var(--color-dark);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-light);
}

.btn--on-dark.btn--secondary {
  border-color: var(--color-light);
  color: var(--color-light);
}

.btn--on-dark.btn--secondary:hover,
.btn--on-dark.btn--secondary:focus-visible {
  background: var(--color-light);
  color: var(--color-dark);
  border-color: var(--color-light);
}

.btn--on-gradient {
  background: var(--color-light);
  border-color: var(--color-light);
  color: var(--color-dark);
}

.btn--on-gradient:hover,
.btn--on-gradient:focus-visible {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-light);
  box-shadow: var(--shadow-lg);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-accent-dark);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  color: var(--color-dark);
  border-color: currentColor;
  box-shadow: none;
}

.btn--on-dark.btn--ghost {
  color: var(--color-accent-soft);
}

.btn--on-dark.btn--ghost:hover,
.btn--on-dark.btn--ghost:focus-visible {
  color: var(--color-light);
}

.btn--sm {
  padding: 0.7rem 1.4rem;
  font-size: var(--fs-xs);
}

.btn--block {
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.btn-row--center {
  justify-content: center;
}

.btn__label-icon {
  width: 1em;
  height: 1em;
  margin-left: 0.4em;
  vertical-align: -0.125em;
}

.slideshow-more {
  margin-top: var(--space-xl);
}

.portfolio-cta {
  margin-top: var(--space-2xl);
  margin-bottom: 0;
}

.portfolio-cta__actions {
  margin-top: var(--space-md);
}

/* --------------------------------------------------------------------------
   9. HEADER & NAVIGATIE
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  width: 100%;
  background: transparent;
  transition: background-color var(--duration-base) var(--ease-camera), box-shadow var(--duration-base) var(--ease-camera), padding var(--duration-base) var(--ease-camera);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: 1.6rem;
  transition: padding var(--duration-base) var(--ease-camera);
}

.site-header.is-scrolled .site-header__inner,
.site-header.is-menu-open .site-header__inner {
  padding-block: 1rem;
}

.site-header.is-scrolled,
.site-header.is-menu-open {
  background: linear-gradient(180deg, rgba(18, 18, 18, 0.82), rgba(18, 18, 18, 0.68));
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.5);
}

.site-header__logo {
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: var(--ls-wide);
  color: var(--color-light);
  white-space: nowrap;
  flex-shrink: 0;
}

.site-header:not(.is-scrolled):not(.is-menu-open) .site-header__logo {
  color: var(--color-light);
}

.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav__link {
  position: relative;
  display: inline-block;
  padding-block: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-light);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-camera);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current='page']::after {
  transform: scaleX(1);
}

.nav__link[aria-current='page'] {
  color: var(--color-accent-soft);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.site-header__cta {
  display: none;
}

/* Hamburger */
.menu-toggle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  z-index: calc(var(--z-overlay) + 1);
}

.menu-toggle__bar {
  width: 24px;
  height: 2px;
  background: var(--color-light);
  transition: transform var(--duration-base) var(--ease-camera), opacity var(--duration-fast) var(--ease-camera);
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded='true'] .menu-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Fullscreen mobiel menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(155deg, rgba(18, 18, 18, 0.94), rgba(18, 18, 18, 0.86)), var(--color-dark);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  padding: var(--space-xl) var(--container-padding);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--duration-slow) var(--ease-camera), transform var(--duration-slow) var(--ease-camera), visibility var(--duration-slow);
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.mobile-menu__link {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--color-light);
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
}

.mobile-menu__link[aria-current='page'] {
  color: var(--color-accent);
}

.mobile-menu__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-dark-border);
}

.mobile-menu__contact {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-text-on-dark-muted);
  font-size: var(--fs-sm);
}

.mobile-menu__contact:hover,
.mobile-menu__contact:focus-visible {
  color: var(--color-accent-soft);
}

/* --------------------------------------------------------------------------
   10. FLOATING CONTACT BUTTON (mobiel)
   -------------------------------------------------------------------------- */
.floating-contact {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: var(--z-floating);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: var(--color-accent-soft);
  animation: floating-contact-pulse 3.2s ease-in-out infinite;
}

.floating-contact:hover,
.floating-contact:focus-visible {
  color: var(--color-light);
  transform: translateY(-3px) scale(1.06);
}

.floating-contact svg {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
}

@keyframes floating-contact-pulse {
  0%,
  100% {
    box-shadow:
      0 20px 44px -16px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(208, 115, 53, 0.35),
      0 0 22px rgba(208, 115, 53, 0.28);
  }
  50% {
    box-shadow:
      0 20px 44px -16px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(208, 115, 53, 0.55),
      0 0 34px rgba(208, 115, 53, 0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-contact {
    animation: none;
  }
}

@media (min-width: 1024px) {
  .floating-contact {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   11. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  color: var(--color-light);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--color-dark);
}

.hero__media.is-missing {
  background:
    linear-gradient(135deg, rgba(20, 138, 138, 0.5), rgba(208, 115, 53, 0.5)),
    var(--color-dark);
}

.hero__poster,
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__media.is-missing .hero__poster {
  display: none;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.55) 0%, rgba(20, 20, 20, 0.65) 50%, rgba(20, 20, 20, 0.92) 100%);
}

.hero__hud {
  /* Op smalle schermen is er te weinig ruimte om dit netjes onder de
     header te krijgen, dus laten we het daar gewoon weg: opgeruimder dan
     erop blijven puzzelen met paddingwaarden. Vanaf 1024px, waar de
     header ook zijn volledige navigatie toont, is er wel genoeg lucht. */
  display: none;
}

@media (min-width: 1024px) {
  .hero__hud {
    /* top moet altijd onder de vaste header (site-header, ongeveer
       77-82px hoog in de standaardstaat) uitkomen, anders overlapt de
       REC-indicator met het logo en de tijdcode met de header-CTA. */
    position: absolute;
    top: clamp(104px, 9vw, 132px);
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--container-padding);
    z-index: 1;
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-block: var(--space-2xl) var(--space-2xl);
}

.hero__eyebrow {
  color: var(--color-accent-soft);
}

.hero__eyebrow::before {
  background: var(--color-accent-soft);
}

.hero h1 {
  max-width: 18ch;
  text-transform: uppercase;
  letter-spacing: var(--ls-tight);
}

.hero__subtitle {
  max-width: 42rem;
  margin-top: var(--space-md);
  font-size: var(--fs-md);
  font-weight: 300;
  color: var(--color-text-on-dark-muted);
}

.hero__actions {
  margin-top: var(--space-xl);
}

.hero__scroll-cue {
  position: absolute;
  bottom: var(--space-xl);
  left: var(--container-padding);
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--color-text-on-dark-muted);
}

.hero__scroll-cue svg {
  width: 16px;
  height: 16px;
  animation: scroll-cue 1.8s ease-in-out infinite;
}

@keyframes scroll-cue {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(6px);
    opacity: 1;
  }
}

/* Kleinere hero voor binnenpagina's */
.page-hero {
  position: relative;
  padding-top: calc(6.5rem + var(--space-2xl));
  padding-bottom: var(--space-2xl);
  color: var(--color-light);
  overflow: hidden;
  min-height: 56svh;
  display: flex;
  align-items: flex-end;
}

.page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--color-dark);
}

.page-hero__media.is-missing {
  background:
    linear-gradient(135deg, rgba(20, 138, 138, 0.5), rgba(208, 115, 53, 0.5)),
    var(--color-dark);
}

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

.page-hero__media.is-missing img {
  display: none;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.45) 0%, rgba(20, 20, 20, 0.9) 100%);
}

.page-hero__inner {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  max-width: 20ch;
  text-transform: uppercase;
}

.page-hero__subtitle {
  max-width: 40rem;
  margin-top: var(--space-md);
  font-size: var(--fs-md);
  color: var(--color-text-on-dark-muted);
  font-weight: 300;
}

/* --------------------------------------------------------------------------
   12. SCROLL REVEAL
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease-camera), transform 700ms var(--ease-camera);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal-group] > * {
  transition-delay: calc(var(--reveal-index, 0) * 90ms);
}

/* --------------------------------------------------------------------------
   13. PROBLEEM / ICON CARDS
   -------------------------------------------------------------------------- */
.icon-card {
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  height: 100%;
}

.icon-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--color-light-surface);
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.icon-card__icon svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.75;
}

.icon-card__title {
  margin-bottom: var(--space-2xs);
}

/* --------------------------------------------------------------------------
   14. RESULTATENBLOKKEN
   Elke kaart toont een cijfer als ronde voortgangsring (een knipoog naar een
   cameradiafragma) plus een korte toelichting, in plaats van kaal cijfer en
   label. De ring vult zich met JavaScript zodra de kaart in beeld scrolt,
   zie initStatRings() in main.js.
   -------------------------------------------------------------------------- */
.results-note {
  margin-top: var(--space-lg);
  font-size: var(--fs-xs);
  color: var(--color-text-on-light-muted);
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  text-align: center;
}

@media (min-width: 640px) {
  .stat-card {
    flex-direction: row;
    text-align: left;
  }
}

.stat-card__body {
  min-width: 0;
  width: 100%;
}

@media (min-width: 640px) {
  .stat-card__body {
    flex: 1;
  }
}

.stat-card__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: var(--space-2xs);
}

.stat-card__ring-wrap {
  position: relative;
  flex-shrink: 0;
  width: 132px;
  height: 132px;
}

.stat-card__ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.stat-card__ring-track {
  fill: none;
  stroke: var(--color-light-border);
  stroke-width: 9;
}

.stat-card__ring-fill {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  transition: stroke-dashoffset 1.4s var(--ease-camera);
}

.stat-card__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.05em;
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}

.stat-card__unit {
  font-size: 0.65em;
}

.stat-card__value-note {
  max-width: 132px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-on-light-muted);
  text-align: center;
}

.stat-card__tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-teal-dark);
  margin-bottom: var(--space-2xs);
}

.stat-card__label {
  margin-bottom: var(--space-2xs);
}

.stat-card__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-on-light-muted);
}

/* --------------------------------------------------------------------------
   15. INVESTERING + KLANTRESULTATEN
   -------------------------------------------------------------------------- */
.invest-copy {
  max-width: 44rem;
  margin-bottom: var(--space-2xl);
}

.invest-copy > * + * {
  margin-top: var(--space-md);
}

/* --------------------------------------------------------------------------
   16. AANBOD-KAARTEN
   -------------------------------------------------------------------------- */
.offer-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
}

.offer-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: var(--gradient-spice);
  color: var(--color-light);
  margin-bottom: var(--space-md);
}

.offer-card__icon svg {
  width: 26px;
  height: 26px;
  stroke-width: 1.75;
}

.offer-card__title {
  margin-bottom: var(--space-2xs);
}

@media (min-width: 768px) and (max-width: 1199px) {
  .offer-card__title {
    /* In dit tussenliggende bereik staan de aanbod-kaarten al in 3
       kolommen, maar zijn ze nog te smal voor de volle kopgrootte:
       "Recruitment advertenties" brak dan middenin een woord af. Vanaf
       1200px is er weer genoeg ruimte voor de volle grootte. */
    font-size: calc(var(--fs-xl) * 0.6);
  }
}

.offer-card__title-suffix {
  /* Houdt "video's" bij elkaar als een eenheid. Moet de titel toch
     afbreken (op erg smalle schermen), dan gebeurt dat nu vóór dit hele
     stuk, op de natuurlijke samenstelling-grens ("Wervings" + "video's"),
     in plaats van ergens middenin een woord of net voor de losse "s". */
  white-space: nowrap;
}

.offer-card__desc {
  color: var(--color-text-on-light-muted);
  margin-bottom: var(--space-md);
}

.offer-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
}

.offer-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  font-size: var(--fs-sm);
  color: var(--color-text-on-light-muted);
}

.offer-card__list svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 0.15em;
  color: var(--color-accent);
  stroke-width: 2;
}

.offer-card__cta {
  /* Deze knop wordt door de flex-kaart uitgerekt tot de volle kaartbreedte
     (minus padding), wat op de smalste 3-koloms-breedte (rond 768px)
     maar zo'n 137px is. "Voorbeelden bekijken" paste daar niet meer op
     1 regel en brak af, waardoor de knop per schermbreedte van hoogte
     leek te wisselen. Korter label en iets minder padding lossen dat
     structureel op in plaats van de tekst nog kleiner te maken.
     white-space:nowrap voorkomt dat het ooit weer terugkomt. */
  margin-top: auto;
  padding-inline: 1rem;
  white-space: nowrap;
}

.template-flag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-teal-dark);
  background: rgba(20, 138, 138, 0.12);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   17. VIDEO PLACEHOLDER
   -------------------------------------------------------------------------- */
.video-placeholder {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(150deg, #2b2b2b, #1a1a1a);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-light);
}

.video-placeholder--tinted {
  background: linear-gradient(150deg, rgba(20, 138, 138, 0.35), rgba(32, 32, 32, 0.95));
}

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

.video-placeholder__frame {
  position: absolute;
  inset: 0;
}

.video-placeholder__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 8vw, 76px);
  height: clamp(52px, 8vw, 76px);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  transition: transform var(--duration-base) var(--ease-camera), background-color var(--duration-base) var(--ease-camera);
}

.video-placeholder__play svg {
  width: 40%;
  height: 40%;
  margin-left: 3px;
  stroke: var(--color-light);
  fill: var(--color-light);
  stroke-width: 1;
}

a.has-frame-reveal:hover .video-placeholder__play,
button.has-frame-reveal:hover .video-placeholder__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--color-accent);
}

.video-placeholder__rec {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
}

.video-placeholder__text {
  position: absolute;
  bottom: var(--space-sm);
  left: var(--space-sm);
  right: var(--space-sm);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-text-on-dark-muted);
}

.video-placeholder__timecode {
  position: absolute;
  bottom: var(--space-sm);
  right: var(--space-sm);
}

/* --------------------------------------------------------------------------
   18. CARROUSEL "LAATSTE WERK"
   Coverflow-achtige carrousel: het actieve project staat groot en scherp,
   de projecten ernaast piepen kleiner en net onscherp om de hoek, als een
   lens die even anders scherpstelt. De kaarten zijn van vloeibaar glas en
   zweven boven een traag ronddraaiende, vervaagde kleurvlek in de
   merkkleuren. JavaScript zet per kaart een eigen transform/opacity/filter
   op basis van de afstand tot de actieve slide, style.css verzorgt alleen
   de overgang daartussen.
   -------------------------------------------------------------------------- */
.carousel-section {
  position: relative;
  overflow: hidden;
}

.carousel-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.carousel-ambient__blob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1100px, 150vw);
  height: min(1100px, 150vw);
  background: conic-gradient(from 0deg, var(--color-teal), var(--color-accent), var(--color-teal-dark), var(--color-accent-dark), var(--color-teal));
  filter: blur(90px);
  opacity: 0.24;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: carousel-ambient-spin 60s linear infinite;
  animation-play-state: paused;
}

/* Draait alleen terwijl de carrousel echt in beeld is, zie main.js. */
.carousel-section.is-in-view .carousel-ambient__blob {
  animation-play-state: running;
}

.carousel-ambient__blob--b {
  width: min(650px, 90vw);
  height: min(650px, 90vw);
  opacity: 0.18;
  animation-duration: 40s;
  animation-direction: reverse;
}

@keyframes carousel-ambient-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.carousel {
  position: relative;
  z-index: 1;
  outline: none;
}

.carousel__stage {
  position: relative;
  height: clamp(540px, 145vw, 640px);
}

@media (min-width: 768px) {
  .carousel__stage {
    height: clamp(340px, 30vw, 440px);
  }
}

.carousel__card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(320px, 84vw, 760px);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-lg);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition:
    transform 650ms var(--ease-camera),
    opacity 650ms var(--ease-camera),
    filter 650ms var(--ease-camera);
}

.carousel__card[data-active='true'] {
  cursor: default;
}

@media (min-width: 768px) {
  .carousel__card {
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
  }
}

.carousel__body {
  color: var(--color-light);
}

.carousel__category {
  color: var(--color-accent-soft);
}

.carousel__client {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-sm);
}

.carousel__result {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--color-text-on-dark-muted);
  margin-bottom: var(--space-lg);
}

.carousel__controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.carousel__arrows {
  display: flex;
  gap: var(--space-2xs);
}

.carousel__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  color: var(--color-light);
  transition: background-color var(--duration-base) var(--ease-camera), color var(--duration-base) var(--ease-camera), border-color var(--duration-base) var(--ease-camera), transform var(--duration-base) var(--ease-camera);
}

.carousel__arrow:hover,
.carousel__arrow:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-light);
  transform: scale(1.08);
}

.carousel__arrow svg {
  width: 20px;
  height: 20px;
}

.carousel__progress {
  flex: 1;
  display: flex;
  gap: var(--space-2xs);
}

.carousel__dot {
  position: relative;
  flex: 1;
  max-width: 72px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-dark-border);
  overflow: hidden;
}

.carousel__dot-fill {
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(0);
  background: var(--color-accent);
}

.carousel__dot.is-active .carousel__dot-fill {
  animation: carousel-fill var(--autoplay-duration, 6000ms) linear forwards;
}

.carousel.is-paused .carousel__dot.is-active .carousel__dot-fill {
  animation-play-state: paused;
}

.carousel__dot.is-done .carousel__dot-fill {
  transform: scaleX(1);
}

@keyframes carousel-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.carousel__timecode {
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-ambient__blob {
    animation: none;
  }
  .carousel__card {
    transition: opacity 300ms linear;
  }
}

/* --------------------------------------------------------------------------
   19. WERKWIJZE / TIJDLIJN
   Vier lichte glaskaarten, verbonden door een gestippelde lijn die ze als
   een reisroute aan elkaar rijgt. Elke stap heeft een genummerde, met
   gradient gevulde node die op de lijn "staat", de kaart hangt eronder.
   -------------------------------------------------------------------------- */
.process {
  position: relative;
}

.process__list {
  position: relative;
  display: grid;
  gap: var(--space-2xl) var(--space-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .process__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .process__list::before {
    content: '';
    position: absolute;
    top: 32px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: repeating-linear-gradient(
      90deg,
      var(--color-accent),
      var(--color-accent) 10px,
      transparent 10px,
      transparent 18px
    );
    z-index: 0;
  }
}

.process__item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
  border-radius: var(--radius-lg);
}

.process__node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-md);
  border-radius: 50%;
  background: var(--gradient-spice);
  color: var(--color-light);
  font-size: var(--fs-md);
  font-weight: 800;
  box-shadow: 0 10px 24px -8px rgba(208, 115, 53, 0.55);
}

.process__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-light-surface);
  color: var(--color-accent);
}

.process__icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.75;
}

.process__title {
  width: 100%;
  font-size: var(--fs-lg);
  margin-bottom: var(--space-2xs);
}

.process__desc {
  width: 100%;
  color: var(--color-text-on-light-muted);
  font-size: var(--fs-sm);
}

/* --------------------------------------------------------------------------
   20. VERTROUWEN: LOGO'S + TESTIMONIALS
   -------------------------------------------------------------------------- */
.logo-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: center;
  margin-bottom: var(--space-2xl);
}

@media (min-width: 640px) {
  .logo-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .logo-row {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.logo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--color-light-border);
  color: var(--color-text-on-light-muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  text-align: center;
  padding: var(--space-2xs);
}

.testimonial-card {
  height: 100%;
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
}

.testimonial-card__quote {
  flex: 1;
  font-size: var(--fs-md);
  font-style: italic;
  font-weight: 300;
  line-height: var(--lh-body);
  margin-bottom: var(--space-lg);
  position: relative;
}

.testimonial-card__quote::before {
  content: '\201C';
  display: block;
  font-size: 2.5em;
  font-style: normal;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 0.1em;
}

.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.testimonial-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gradient-spice);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-light);
}

.testimonial-card__avatar svg {
  width: 20px;
  height: 20px;
}

.testimonial-card__name {
  font-weight: 700;
  font-size: var(--fs-sm);
}

.testimonial-card__role {
  font-size: var(--fs-xs);
  color: var(--color-text-on-light-muted);
}

.section--dark .testimonial-card__role,
.section--gradient .testimonial-card__role {
  color: var(--color-text-on-dark-muted);
}

/* --------------------------------------------------------------------------
   21. CTA-BAND
   -------------------------------------------------------------------------- */
.cta-band {
  text-align: center;
}

.cta-band__inner {
  max-width: 42rem;
  margin-inline: auto;
}

.cta-band h2 {
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}

.cta-band__actions {
  margin-top: var(--space-lg);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* --------------------------------------------------------------------------
   22. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--color-dark);
  color: var(--color-text-on-dark-muted);
  padding-block: var(--space-2xl) var(--space-lg);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
}

.site-footer__brand-logo {
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--color-light);
  letter-spacing: var(--ls-wide);
}

.site-footer__slogan {
  margin-top: var(--space-2xs);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  color: var(--color-accent-soft);
}

.site-footer__pitch {
  margin-top: var(--space-md);
  max-width: 32rem;
}

.site-footer__heading {
  color: var(--color-light);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--space-md);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.site-footer__list a {
  transition: color var(--duration-fast) var(--ease-camera);
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
  color: var(--color-accent-soft);
}

.site-footer__contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.site-footer__contact-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-accent);
}

.site-footer__social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.site-footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-dark-border);
  transition: border-color var(--duration-base) var(--ease-camera), color var(--duration-base) var(--ease-camera);
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent-soft);
}

.site-footer__social svg {
  width: 18px;
  height: 18px;
}

.site-footer__bottom {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-dark-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: space-between;
  font-size: var(--fs-xs);
}

/* --------------------------------------------------------------------------
   23. PORTFOLIO: FILTERS, GRID, MODAL
   -------------------------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-xl);
}

.filter-btn {
  padding: 0.6rem 1.3rem;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-light-border);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-on-light-muted);
  transition: background-color var(--duration-base) var(--ease-camera), color var(--duration-base) var(--ease-camera), border-color var(--duration-base) var(--ease-camera);
}

.filter-btn:hover,
.filter-btn:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-dark);
}

.filter-btn[aria-pressed='true'] {
  background: var(--color-dark);
  border-color: var(--color-dark);
  color: var(--color-light);
}

.portfolio-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .portfolio-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.portfolio-card {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.portfolio-card.is-filtered-out {
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
}

.portfolio-card.is-hidden {
  display: none;
}

.portfolio-card__media {
  position: relative;
  display: block;
}

.portfolio-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-md);
  text-align: left;
}

.portfolio-card__category {
  color: var(--color-accent-dark);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.portfolio-card__client {
  margin-top: var(--space-3xs);
}

.portfolio-card__summary {
  margin-top: var(--space-3xs);
  font-size: var(--fs-sm);
  color: var(--color-text-on-light-muted);
}

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: rgba(20, 20, 20, 0.82);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-camera), visibility var(--duration-base);
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 780px;
  max-height: 88svh;
  overflow-y: auto;
  background: var(--color-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transform: translateY(24px) scale(0.98);
  transition: transform var(--duration-slow) var(--ease-camera);
}

.modal-overlay.is-open .modal {
  transform: translateY(0) scale(1);
}

.modal__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-light-surface);
  z-index: 2;
}

.modal__close:hover,
.modal__close:focus-visible {
  background: var(--color-accent);
  color: var(--color-light);
}

.modal__close svg {
  width: 20px;
  height: 20px;
}

.modal__media {
  margin-bottom: var(--space-lg);
}

.modal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-md);
}

.modal__category {
  color: var(--color-accent-dark);
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.modal__case {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

@media (min-width: 640px) {
  .modal__case {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.modal__case-item h3 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-accent-dark);
  margin-bottom: var(--space-2xs);
}

.modal__case-item p {
  font-size: var(--fs-sm);
  color: var(--color-text-on-light-muted);
}

.modal__cta {
  margin-top: var(--space-lg);
}

/* --------------------------------------------------------------------------
   24. OVER ONS: KERNWAARDEN, UITRUSTING, BTS-GALERIJ
   -------------------------------------------------------------------------- */
.value-card {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-md);
}

.value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gradient-spice);
  color: var(--color-light);
  margin-bottom: var(--space-md);
}

.value-card__icon svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.75;
}

.equipment-list {
  display: grid;
  gap: var(--space-sm);
}

@media (min-width: 640px) {
  .equipment-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.equipment-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
}

.equipment-item svg {
  width: 22px;
  height: 22px;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 0.1em;
}

.equipment-item__title {
  font-weight: 600;
  margin-bottom: 0.15em;
}

.equipment-item__desc {
  font-size: var(--fs-sm);
  color: var(--color-text-on-light-muted);
}

.badge-cert {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  background: var(--color-dark);
  color: var(--color-light);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--space-lg);
}

.badge-cert svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent-soft);
}

.bts-gallery {
  columns: 2;
  column-gap: var(--space-sm);
}

@media (min-width: 768px) {
  .bts-gallery {
    columns: 3;
  }
}

.bts-item {
  position: relative;
  break-inside: avoid;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-dark-surface);
  cursor: pointer;
  border: none;
  display: block;
  width: 100%;
  padding: 0;
}

.bts-item img {
  width: 100%;
  height: auto;
  transition: transform var(--duration-slow) var(--ease-camera);
}

.bts-item:hover img,
.bts-item:focus-visible img {
  transform: scale(1.05);
}

.bts-item.is-missing {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-md);
}

.bts-item.is-missing img {
  display: none;
}

.bts-item.is-missing::after {
  content: 'Foto volgt binnenkort';
  color: var(--color-text-on-dark-muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.bts-item__zoom {
  position: absolute;
  bottom: var(--space-2xs);
  right: var(--space-2xs);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.55);
  color: var(--color-light);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-camera);
}

.bts-item:hover .bts-item__zoom,
.bts-item:focus-visible .bts-item__zoom {
  opacity: 1;
}

.bts-item__zoom svg {
  width: 16px;
  height: 16px;
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-camera), visibility var(--duration-base);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__figure {
  position: relative;
  max-width: min(90vw, 900px);
  max-height: 86svh;
}

.lightbox__figure img {
  max-height: 86svh;
  width: auto;
  margin-inline: auto;
  border-radius: var(--radius-sm);
}

.lightbox__figure.is-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(90vw, 900px);
  aspect-ratio: 16 / 10;
  background: var(--color-dark-surface);
  border-radius: var(--radius-sm);
}

.lightbox__figure.is-missing img {
  display: none;
}

.lightbox__figure.is-missing::after {
  content: 'Foto volgt binnenkort';
  color: var(--color-text-on-dark-muted);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-light);
  transition: background-color var(--duration-base) var(--ease-camera), transform var(--duration-base) var(--ease-camera), border-color var(--duration-base) var(--ease-camera);
}

.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover,
.lightbox__close:focus-visible,
.lightbox__prev:focus-visible,
.lightbox__next:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  transform: scale(1.08);
}

.lightbox__prev:hover,
.lightbox__prev:focus-visible {
  transform: translate(-100%, -50%) scale(1.08);
}

.lightbox__next:hover,
.lightbox__next:focus-visible {
  transform: translate(100%, -50%) scale(1.08);
}

.lightbox__close {
  top: -56px;
  right: 0;
}

.lightbox__prev {
  left: clamp(-8px, -6vw, 0px);
  top: 50%;
  transform: translate(-100%, -50%);
}

.lightbox__next {
  right: clamp(-8px, -6vw, 0px);
  top: 50%;
  transform: translate(100%, -50%);
}

.lightbox__close svg,
.lightbox__prev svg,
.lightbox__next svg {
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------------------------------
   25. CONTACT: FORMULIER, INFO, FAQ
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: var(--space-2xl);
}

@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: 1fr 1.15fr;
  }
}

.contact-info__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.contact-info__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-light-surface);
  color: var(--color-accent);
  flex-shrink: 0;
}

.contact-info__icon svg {
  width: 20px;
  height: 20px;
}

.contact-info__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--color-text-on-light-muted);
  margin-bottom: 0.15em;
}

.contact-info__value {
  font-weight: 600;
}

.contact-info__value a:hover,
.contact-info__value a:focus-visible {
  color: var(--color-accent-dark);
}

.contact-form {
  background: var(--color-light-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.form-row {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

@media (min-width: 640px) {
  .form-row--2 {
    grid-template-columns: 1fr 1fr;
  }
}

.form-field label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--space-2xs);
}

.form-field .is-required {
  color: var(--color-accent-dark);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-light-border);
  background: var(--color-light);
  font-size: var(--fs-base);
  transition: border-color var(--duration-fast) var(--ease-camera), box-shadow var(--duration-fast) var(--ease-camera);
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
  border-color: var(--color-accent-dark);
  box-shadow: 0 0 0 3px rgba(156, 83, 34, 0.28);
}

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

.form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23202020' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 18px;
  padding-right: 2.6rem;
}

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

.form-error {
  display: none;
  align-items: center;
  gap: 0.3em;
  margin-top: var(--space-2xs);
  font-size: var(--fs-xs);
  color: var(--color-rec);
}

.form-field.has-error .form-error {
  display: flex;
}

.form-hint {
  font-size: var(--fs-xs);
  color: var(--color-text-on-light-muted);
  margin-top: var(--space-2xs);
}

.form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.form-status {
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  font-size: var(--fs-sm);
  display: none;
  align-items: center;
  gap: var(--space-sm);
}

.form-status.is-visible {
  display: flex;
}

.form-status--success {
  background: rgba(20, 138, 138, 0.12);
  color: var(--color-teal-dark);
}

.form-status--error {
  background: rgba(232, 67, 47, 0.1);
  color: var(--color-rec);
}

.form-status svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* FAQ Accordion */
.accordion {
  border-top: 1px solid var(--color-light-border);
}

.accordion__item {
  border-bottom: 1px solid var(--color-light-border);
}

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-2xs);
  text-align: left;
  font-size: var(--fs-md);
  font-weight: 600;
}

.accordion__trigger:hover {
  color: var(--color-accent-dark);
}

.accordion__icon {
  flex-shrink: 0;
  display: flex;
  transition: transform var(--duration-base) var(--ease-camera);
}

.accordion__trigger[aria-expanded='true'] .accordion__icon {
  transform: rotate(45deg);
}

.accordion__icon svg {
  width: 22px;
  height: 22px;
  color: var(--color-accent);
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-slow) var(--ease-camera);
}

.accordion__panel-inner {
  overflow: hidden;
}

.accordion__item.is-open .accordion__panel {
  grid-template-rows: 1fr;
}

.accordion__panel p {
  padding: 0 var(--space-2xs) var(--space-md);
  color: var(--color-text-on-light-muted);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   26. OVER ONS INTRO / STORY LAYOUT
   -------------------------------------------------------------------------- */
.story-grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 1024px) {
  .story-grid {
    grid-template-columns: 0.9fr 1.1fr;
  }
}

.story-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--color-dark-surface);
}

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

.story-media.is-missing img {
  display: none;
}

.story-media.is-missing::after {
  content: 'Foto volgt binnenkort';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-on-dark-muted);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  text-align: center;
  padding: var(--space-lg);
}

.story-copy > * + * {
  margin-top: var(--space-md);
}

.story-highlight {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border-left: 3px solid var(--color-accent);
  background: var(--color-light-surface);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   27. MEDIA QUERIES: BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .hero__inner {
    padding-block: var(--space-3xl) var(--space-3xl);
  }
}

@media (min-width: 1024px) {
  /* Pas hier, niet bij 768px: bij tablet-breedte is er nog niet genoeg
     ruimte voor logo + volledige navigatie + CTA-knop op een regel, dat
     gaf lelijke tekstomloop ("Over ons" en de knoptekst braken af) en een
     te hoge header. */
  .site-nav {
    display: block;
  }

  .menu-toggle {
    display: none;
  }

  .site-header__cta {
    display: inline-flex;
  }

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

@media (min-width: 1440px) {
  :root {
    --container-width: 1360px;
  }
}

/* --------------------------------------------------------------------------
   28. PAGINA-OVERGANG (CAMERA SLUITER)
   -------------------------------------------------------------------------- */
/* Een cirkelvormig "gat" dat groot genoeg is om het hele scherm te
   bedekken (200vmax, ruim boven de schermdiagonaal op elk formaat), met
   een enorme effen box-shadow eromheen die al het overige vult. Zo sluit
   het beeld echt van de randen naar binnen toe (zoals een camerasluiter),
   in plaats van dat er een zwarte cirkel vanuit het midden naar buiten
   groeit. */
.page-transition {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200vmax;
  height: 200vmax;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 9999px var(--color-dark);
  pointer-events: none;
  z-index: var(--z-transition);
  transition:
    width var(--duration-slow) var(--ease-camera),
    height var(--duration-slow) var(--ease-camera);
}

.page-transition.is-instant {
  transition: none;
}

/* Zet, voordat main.js uberhaupt draait, het scherm al op zwart als een
   inline script in <head> merkte dat we net via de sluiter-animatie zijn
   genavigeerd (zie het scriptje bovenaan elke pagina). Zonder dit zou de
   nieuwe pagina heel even normaal in beeld komen voordat main.js hem
   alsnog abrupt afdekt, dat oogde als een lelijke flits-en-klap in plaats
   van een doorlopende sluiterbeweging. */
html.oc-transition-pending body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--color-dark);
  z-index: var(--z-transition);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   29. REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .btn__corner,
  .btn__rec {
    transition: none;
  }

  .hero__scroll-cue svg {
    animation: none;
  }
}