/* =========================================================
   PIGMENT PAINT & SIP — Stylesheet
   Geinspireerd op mindmarket.com structuur, Pigment branding.
   Tokens direct vertaalbaar naar Webflow Variables.
   ========================================================= */

/* ---------- 1. FONTS ---------- */

@font-face {
  font-family: 'KC Ill Hand';
  src: url('assets/fonts/KCIllHand.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Euroteken uit Barlow Bold halen wanneer de display-font (KC Ill Hand) gebruikt
   wordt — KC Ill Hand mist een €-glyph. Zelfde familienaam + unicode-range
   zorgt dat ENKEL het €-glyph (U+20AC) uit Barlow Bold komt, de rest blijft KC. */
@font-face {
  font-family: 'KC Ill Hand';
  src: url('assets/fonts/Barlow-Bold.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20AC;
}
@font-face {
  font-family: 'KC Ill Hand';
  src: url('assets/fonts/Barlow-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20AC;
}

@font-face {
  font-family: 'BN Bergen';
  src: url('assets/fonts/BNBergenSt-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BN Bergen';
  src: url('assets/fonts/BNBergenSt.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BN Bergen';
  src: url('assets/fonts/BNBergenSt-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BN Bergen';
  src: url('assets/fonts/BNBergenSt-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. DESIGN TOKENS ---------- */

:root {
  /* Brand primary — Crayola Blue */
  --color-primary-50:  #EAF0FF;
  --color-primary-100: #D4E0FF;
  --color-primary-200: #BED3FF;
  --color-primary-300: #95B3FF;
  --color-primary-400: #6794FF;
  --color-primary-500: #4874FF;
  --color-primary-600: #3875FF;
  --color-primary-700: #004AFF;
  --color-primary-800: #0035E0;
  --color-primary-900: #0027A6;

  /* Accent — Plum (roze) */
  --color-plum-50:  #FFF5FC;
  --color-plum-100: #FFE9FA;
  --color-plum-200: #FFBFF3;
  --color-plum-500: #FF91E8;
  --color-plum-600: #FF50DA;
  --color-plum-700: #FF00CC;
  --color-plum-900: #C8008C;

  /* Accent — Scarlet Fire (rood) */
  --color-scarlet-50:  #FFF3EE;
  --color-scarlet-100: #FFBFB5;
  --color-scarlet-200: #FFAC9F;
  --color-scarlet-500: #FF2000;
  --color-scarlet-600: #D90000;
  --color-scarlet-700: #9D0000;
  --color-scarlet-900: #230200;

  /* Accent — Lavender (lila) */
  --color-lavender-50:  #F8F4FF;
  --color-lavender-100: #EBE2FF;
  --color-lavender-500: #EBE2FF;
  --color-lavender-600: #C2A9FF;
  --color-lavender-700: #9A71FF;
  --color-lavender-800: #7237FF;
  --color-lavender-900: #4600FF;

  /* Accent — Strong Cyan */
  --color-cyan-50:  #E6FBFB;
  --color-cyan-100: #C5F2F4;
  --color-cyan-200: #9DEBEB;
  --color-cyan-500: #00D1D3;
  --color-cyan-600: #00B6B8;
  --color-cyan-700: #00888A;
  --color-cyan-900: #003032;

  /* Neutrals */
  --color-ink:     #0E0546;       /* Base — deep navy (vervangt zwart sitewide) */
  --color-ink-60:  rgba(14, 5, 70, 0.6);
  --color-ink-40:  rgba(14, 5, 70, 0.4);
  --color-ink-10:  rgba(14, 5, 70, 0.1);
  --color-cream:   #FFFCF8;       /* Eggshell — page bg */
  --color-cream-2: #F8F2E5;
  --color-line:    #E5DFD2;
  --color-white:   #FFFFFF;

  /* Type families */
  /* Fallback op de body-sans ipv 'cursive': KC Ill Hand mist enkele glyphs
     (o.a. het euroteken €). Met 'cursive' koos iOS Snell Roundhand → een
     krullerig schuin €. Via BN Bergen/system-ui valt zo'n ontbrekende glyph
     nu overal terug op een strakke sans. */
  --font-display: 'KC Ill Hand', 'BN Bergen', system-ui, sans-serif;
  --font-body:    'BN Bergen', system-ui, sans-serif;

  /* Type scale (fluid clamps) */
  --text-sm:    clamp(0.75rem, 0.7rem + 0.22vw, 0.875rem);    /* 12 → 14 */
  --text-base:  clamp(1rem, 0.98rem + 0.11vw, 1.0625rem);     /* 16 → 17 */
  --text-lg:    clamp(1.125rem, 1.1rem + 0.1vw, 1.1875rem);   /* 18 → 19 */
  --text-xl:    clamp(1.25rem, 1.18rem + 0.32vw, 1.4375rem);  /* 20 → 23 */
  --text-h-xs:  clamp(1.5rem, 1.41rem + 0.43vw, 1.75rem);     /* 24 → 28 */
  --text-h-sm:  clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);       /* 28 → 40 */
  --text-h-md:  clamp(2.25rem, 1.78rem + 1.74vw, 3.5rem);     /* 36 → 56 */
  --text-h-lg:  clamp(3rem, 2.05rem + 3.48vw, 5rem);          /* 48 → 80 */
  --text-h-xl:  clamp(3.5rem, 2.02rem + 7.07vw, 7.5rem);      /* 56 → 120 */

  /* Spacing scale */
  --space-2xs: 4px;
  --space-xs:  9.5px;
  --space-sm:  19px;
  --space-md:  28px;
  --space-lg:  76px;
  --space-xl:  70px;
  --space-2xl: 190px;

  /* Witruimte BOVEN de eerste eyebrow/titel van elke sectie. Sitewide gelijk:
     pas dit ene getal aan om overal meer of minder ruimte te krijgen. Schaalt
     mee tussen klein en groot scherm (min 80px, max 120px). Wil je een vaste
     waarde, vervang de clamp door bv. 96px. */
  --section-pad-top: clamp(80px, 8vw, 120px);

  /* Radius */
  --radius-sm:   10px;
  --radius-md:   20px;
  --radius-lg:   50px;
  --radius-full: 9999px;

  /* Borders */
  --border-ink: 1px solid var(--color-ink);
  --border-line: 1px solid var(--color-line);

  /* Motion */
  --ease-spring: cubic-bezier(0.17, 0.67, 0.3, 1.33);
  --ease-inout:  cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-mobile: cubic-bezier(0.5, 0, 0, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.4s;
  --dur-slow: 0.6s;

  /* Layout */
  --grid-cols: 16;
  --grid-gutter: 20px;
  --grid-margin: 20px;
  --container-max: 1400px;
  --nav-height: 76px;
  --nav-top: 19px;
}

/* ---------- 3. RESET / BASE ---------- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Voorkomt horizontale scroll-reservation door grote absolute SVGs
     (zoals de upscaled swirl). overflow-x: clip i.p.v. hidden zodat
     er geen scrolling-context op html ontstaat — anders werkt
     position: sticky niet meer correct (dan sticky relative aan html
     i.p.v. viewport). */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-ink);
  background: var(--color-cream);
  /* overflow-x: clip i.p.v. hidden — clipt horizontale overflow zonder
     een scrolling-context te creëren, zodat position: sticky in
     descendants gewoon relatief aan de viewport werkt. */
  overflow-x: clip;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-inout);
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: 0;
}

h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.2;
}

p { line-height: 1.5; }

/* ---------- 4. UTILITIES ---------- */

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

.section {
  padding-top: var(--section-pad-top);
  padding-bottom: clamp(80px, 10vw, var(--space-2xl));
}

.section--cream { background: var(--color-cream); }
.section--white { background: var(--color-white); }
.section--ink { background: var(--color-ink); color: var(--color-cream); }
.section--primary { background: var(--color-primary-500); }

/* PILL sections — full-bleed, afgeronde top + bottom hoeken.
   Body cream toont door de corner-bites tussen sections heen. */
.section--pill {
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* GEEN margin — full width */
}

/* "cream" pill = zelfde Eggshell als body, dus visueel blendt het in.
   De class blijft bestaan voor consistentie maar voegt geen kleur toe. */
.section--pill-cream {
  background: var(--color-cream);
  color: var(--color-ink);
}

/* Eggshell-secties krijgen exact dezelfde top-ruimte als alle andere secties,
   sitewide (via --section-pad-top). Geldt voor zowel pill-cream als plain cream.
   Onderkant blijft gewoon op de default padding-block clamp staan. */
.section--cream,
.section--pill-cream {
  padding-top: var(--section-pad-top);
}

/* Grid-pattern variant: warme egg-tint (#FFE6BB @ 30%) als achtergrond met
   1px lijntjes in #FFE6BB elke 20px (horizontaal + verticaal). Gebruik deze
   klasse op de outer section samen met section--pill-cream. */
.section--grid-bg {
  background-color: rgba(255, 230, 187, 0.3);
  background-image:
    linear-gradient(to right, #FFE6BB 1px, transparent 1px),
    linear-gradient(to bottom, #FFE6BB 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0;
}

/* Solid-bg variant — voor de "Hoe werkt het?" sectie op Praktisch.
   Volle achtergrondkleur #FFF5E5 i.p.v. de 30% tint, zelfde #FFE6BB grid. */
.section--grid-bg-solid {
  background-color: #FFF5E5;
  background-image:
    linear-gradient(to right, #FFE6BB 1px, transparent 1px),
    linear-gradient(to bottom, #FFE6BB 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0;
}

/* Lichte variant — JUST de achtergrond laten doorlopen achter de footer,
   zonder de flex-centering die .section--bleed-to-footer ook toepast. Voor
   secties met hun eigen interne layout (bv. reviews-klanten met marquee). */
.section--bleed-bg-only {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-bottom: calc(-1 * var(--radius-lg));
}

/* Bleed naar de footer toe — sectie loopt door tot achter de afgeronde
   bovenhoeken van de footer. Onderhoeken plat, negative margin-bottom van
   --radius-lg zodat de sectie 50px overlapt met de footer-top. De footer is
   position:relative en stack dus boven de sectie.

   Padding boven en onder zijn gebalanceerd zodat het content-blok visueel
   exact in het midden van het zichtbare deel van de sectie staat (de 50px
   bleed achter de footer wordt gecompenseerd op de bottom-padding):
     visual-top    = padding-top
     visual-bottom = padding-bottom - radius-lg (= bleed)
   Beide gelijk → padding-top = padding-bottom - 50.
   Totale sectiehoogte blijft gelijk (oude som 80 + 240 = 320 → 135 + 185). */
.section--bleed-to-footer {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-bottom: calc(-1 * var(--radius-lg));
  padding-top: 135px;
  padding-bottom: calc(135px + var(--radius-lg));   /* 135 + 50 = 185 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
/* Small phone (≤480) en kleiner: compactere padding-top en -bottom
   (60px i.p.v. 135px) zodat de bleed-to-footer-sectie minder ruimte
   inneemt op kleine schermen. */
@media (max-width: 480px) {
  .section--bleed-to-footer {
    padding-top: 60px;
    padding-bottom: calc(60px + var(--radius-lg));
  }
}
.section--bleed-to-footer > .container {
  width: 100%;
}

/* Een .section--pill direct na een .c-hero (HERO heeft geen rondingen) trekt
   zichzelf 50px omhoog zodat zijn afgeronde bovenhoeken de rechte onderkant
   van de hero verbergen. Sitewide regel — alleen pill-secties (de class die
   border-radius geeft) krijgen de pull-up. */
.c-hero + .section--pill {
  position: relative;
  margin-top: calc(-1 * var(--radius-lg));
  z-index: 2;
}

/* Alle secties die volgen op een sticky HERO krijgen position: relative + een
   hogere z-index dan de hero. Zo paint elke sectie BOVEN de hero — dus ook
   de rounded-corner bites tonen geen hero-kleur meer maar de body cream
   eronder. Geldt voor zowel .c-hero (homepage/praktisch) als .c-collection-hero
   (landing pages). */
.c-hero ~ section,
.c-collection-hero ~ section,
.c-hero ~ .c-cream-back,
.c-collection-hero ~ .c-cream-back {
  position: relative;
  z-index: 2;
}

/* Eggshell "seam" — een 200px hoog cream blokje precies op de overgang tussen
   de tweede en derde sectie na de hero. 100px overlapt de bottom van sectie 2
   en 100px overlapt de top van sectie 3.

   z-index: 1 → zelfde laag als de hero (z-1) maar later in DOM, dus paint
   bóven de hero. De secties (z-2) paint daar weer overheen in hun rounded
   shape, wat betekent dat de seam alleen zichtbaar is in de corner-bites van
   de aangrenzende secties. Geen cream strook over de bgs van de secties zelf. */
.c-section-seam {
  position: relative;
  z-index: 1;
  height: 200px;
  background: var(--color-cream);
  margin-top: -100px;
  margin-bottom: -100px;
  pointer-events: none;
}
.section--pill-lavender {
  background: var(--color-lavender-500);
  color: var(--color-ink);
}
.section--pill-cyan {
  background: var(--color-cyan-500);
  color: var(--color-ink);
}
.section--pill-plum {
  background: var(--color-plum-500);
  color: var(--color-ink);
}
/* Licht blauw pill — voor "Voor elke gelegenheid" op /praktisch. */
.section--pill-blue-soft {
  background: var(--color-primary-100);
  color: var(--color-ink);
}
.section--pill-scarlet {
  background: var(--color-scarlet-500);
  color: var(--color-cream);
}
.section--pill-scarlet-200 {
  background: var(--color-scarlet-200);
  color: var(--color-ink);
}
.section--pill-primary {
  background: var(--color-primary-500);
  color: var(--color-white);
}
.section--pill-ink {
  background: var(--color-ink);
  color: var(--color-cream);
}

@media (max-width: 600px) {
  .section--pill { border-radius: 32px; }
}

.text-display { font-family: var(--font-display); font-weight: 400; line-height: 1.0; }
.text-body { font-family: var(--font-body); }
.text-light { font-weight: 300; }
.text-medium { font-weight: 500; }
.text-bold { font-weight: 700; }

.text-h-xl { font-size: var(--text-h-xl); }
.text-h-lg { font-size: var(--text-h-lg); }
.text-h-md { font-size: var(--text-h-md); }
.text-h-sm { font-size: var(--text-h-sm); }
.text-h-xs { font-size: var(--text-h-xs); }
.text-lg { font-size: var(--text-lg); }
.text-base { font-size: var(--text-base); }
.text-sm { font-size: var(--text-sm); }

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

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

.grid { display: grid; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* ---------- 5. BUTTONS ---------- */
/* Mindmarket-style — Mary herontwerpt deze in Webflow */

.c-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11.875px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-lg);
  border: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-inout),
              color var(--dur-base) var(--ease-inout),
              transform var(--dur-base) var(--ease-spring);
  cursor: pointer;
}

.c-button__label {
  display: inline-block;
  padding: 0 11.875px;
  transition: transform var(--dur-base) var(--ease-spring);
}

.c-button__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-500);
  color: var(--color-white);
  transition: background var(--dur-base) var(--ease-inout);
  flex-shrink: 0;
}

.c-button__icon svg { width: 18px; height: 18px; }

/* Primary variants */
.c-button--primary {
  background: var(--color-primary-500);
  color: var(--color-white);
}
.c-button--primary:hover { background: var(--color-primary-600); }
.c-button--primary .c-button__icon { background: var(--color-ink); }

.c-button--scarlet {
  background: var(--color-scarlet-500);
  color: var(--color-cream);
}
.c-button--scarlet:hover { background: var(--color-scarlet-600); }

.c-button--cyan {
  background: var(--color-cyan-500);
  color: var(--color-ink);
}

/* Quote / Boek nu — signature button (witte pill + accent cirkel) */
.c-button--quote {
  background: var(--color-white);
  color: var(--color-ink);
  border: 1px solid var(--color-ink-10);
}

.c-button--quote:hover .c-button__label {
  transform: translateX(4px);
}

.c-button--quote:hover .c-button__icon {
  background: var(--color-plum-500);
  color: var(--color-ink);
}

/* Shop "In winkelmandje"-knoppen (product + cadeaubon) + "Afrekenen" in het
   mandje: knop blijft beige, tekst blijft op zijn plaats. Het ronde +-icoon
   (blauw) wordt roze op hover via .c-button--quote:hover .c-button__icon. */
.c-product-card__buy:hover .c-button__label,
.c-giftcard__btn:hover .c-button__label,
.cart-drawer__checkout:hover .c-button__label {
  transform: none;
}

/* Secondary — transparant met border */
.c-button--secondary {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
}
.c-button--secondary:hover {
  background: var(--color-ink);
  color: var(--color-cream);
}

/* ---------- 6. NAVBAR ---------- */

.c-navbar {
  position: fixed;
  top: var(--nav-top);
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  gap: var(--grid-gutter);
  padding: 0 var(--grid-margin);
}

.c-navbar__pill {
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 11.875px 19px;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  box-shadow: 0 2px 12px rgba(12, 5, 56, 0.06);
}

/* "Boek nu"-pill in de navbar: geen randje (de .c-button--quote-border weg). */
.c-navbar__pill.c-button--quote {
  border: none;
}

.c-navbar__pill--main {
  flex: 1 1 auto;
  max-width: 1000px;
  justify-content: space-between;
  padding-right: 11px;
}

/* Winkelmand-pill in de navbar (alleen op de shop pagina). Erft alle base
   .c-navbar__pill stijlen (white bg, radius-sm, box-shadow, padding) zodat
   hij visueel overeenkomt met de andere pills in de navbar — Boek nu, links,
   etc. Iets compactere horizontal padding omdat hij icoon-only is.
   Standaard verborgen via display:none — verschijnt zodra data-count > 0
   (er iets in het mandje zit). */
.c-navbar__cart {
  display: none;
  padding: 11.875px 16px;
  position: relative;
  color: var(--color-ink);
  text-decoration: none;
  flex: 0 0 auto;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.c-navbar__cart[data-count]:not([data-count="0"]) {
  display: inline-flex;
  transform-origin: left center;
}
/* De fly-in pop speelt ALLEEN bij het toevoegen van een item (JS voegt
   .is-popping toe), niet bij elke paginalading. */
.c-navbar__cart.is-popping {
  animation: cartPopFromBoekNu 0.7s var(--ease-spring) both;
}

/* Cart vliegt uit de Boek-nu knop tevoorschijn — Boek nu staat nu links van
   de cart, dus de cart vertrekt vanuit links (translateX negatief), klein en
   geroteerd, en bouncet naar zijn eigen plek met een springy easing. */
@keyframes cartPopFromBoekNu {
  0% {
    transform: translateX(-120px) scale(0.4) rotate(25deg);
    opacity: 0;
  }
  55% {
    transform: translateX(10px) scale(1.12) rotate(-8deg);
    opacity: 1;
  }
  78% {
    transform: translateX(-3px) scale(0.95) rotate(3deg);
  }
  100% {
    transform: translateX(0) scale(1) rotate(0);
    opacity: 1;
  }
}

/* Badge bumpt elke keer dat de count verandert (via JS class toggle). */
.c-navbar__cart-count.is-bumping {
  animation: countBump 0.4s var(--ease-spring);
}
@keyframes countBump {
  0% { transform: scale(1); }
  40% { transform: scale(1.45); }
  70% { transform: scale(0.92); }
  100% { transform: scale(1); }
}
.c-navbar__cart:hover {
  background: var(--color-ink);
  color: var(--color-cream);
}
.c-navbar__cart:active {
  transform: scale(0.96);
}
.c-navbar__cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--color-scarlet-500);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

.c-navbar__logo {
  height: 40px;
  width: auto;
}

.c-navbar__brand {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  color: var(--color-ink);
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.c-navbar__links {
  display: flex;
  gap: var(--space-xs);
  margin: 0 var(--space-sm) 0 var(--space-sm);
  margin-right: 0;
}

.c-navbar__link {
  padding: 8px 14px;
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-base);
  color: var(--color-ink);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-inout),
              color var(--dur-fast) var(--ease-inout);
}

.c-navbar__link:hover {
  background: var(--color-primary-500);
  color: var(--color-cream);
}

/* Mobile menu toggle: cirkel met pijltje naar rechts. Bij open roteert het
   pijltje 90deg naar onder (matcht de "click to expand" mental model) en
   verschijnt het menu in een dropdown onder de pill. */
.c-navbar__burger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-primary-500);
  color: var(--color-cream);
  border: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.c-navbar__burger:hover { background: var(--color-ink); }
.c-navbar__burger svg {
  width: 18px;
  height: 18px;
  transition: transform 0.4s var(--ease-spring);
}
.c-navbar.is-menu-open .c-navbar__burger svg { transform: rotate(180deg); }

@media (max-width: 900px) {
  .c-navbar__burger { display: flex; }

  /* Cart-pill actief: 3 pills moeten samen passen. Kleinere gap + compactere
     paddings, en de PIGMENT-pill mag krimpen (min-width:0) zodat de cart
     niet meer over de andere pills valt. */
  .c-navbar { gap: 8px; }
  .c-navbar__pill--main { min-width: 0; padding-right: 8px; }
  .c-navbar__cart { padding: 11.875px 12px; }

  /* Symmetrische padding op mobiel — linker- en rechterkant beide
     var(--grid-margin) (20px) zodat de navbar gecentreerd staat in
     het venster (oude 25px-left zorgde voor zichtbare asymmetrie). */
  .c-navbar { padding-left: var(--grid-margin); padding-right: var(--grid-margin); }

  /* Brand + burger blijven op één rij — geen flex-wrap binnen de pill. */
  .c-navbar__pill--main {
    position: relative;
  }

  /* Menu wordt een absolute dropdown ONDER de pill, niet binnen de pill.
     Zo blijven brand + burger naast elkaar en zakt het menu netjes uit. */
  .c-navbar__links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0 8px;
    gap: 2px;
    background: var(--color-white);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 32px rgba(14, 5, 70, 0.12);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s var(--ease-inout),
                opacity 0.3s var(--ease-inout),
                padding 0.3s var(--ease-inout);
  }
  .c-navbar.is-menu-open .c-navbar__links {
    max-height: 400px;
    opacity: 1;
    padding: 8px;
  }
  .c-navbar__link {
    padding: 14px 18px;
    border-radius: var(--radius-md);
    font-size: var(--text-lg);
    text-align: left;
  }

  /* Boek-nu pill in de navbar — alleen het tekst-label op mobiel, het
     icoon-pijltje wordt verborgen. Hoogte matcht de PIGMENT pill. */
  .c-button.c-navbar__pill {
    padding: 11.875px 14px;
    gap: 0;
  }
  .c-button.c-navbar__pill .c-button__label {
    white-space: nowrap;
    padding: 0;
    font-size: var(--text-base);
  }
  .c-button.c-navbar__pill .c-button__icon { display: none; }

  /* Hover-effecten uit op mobiel — touch devices gebruiken geen hover,
     het nav-link pill effect + Boek-nu shift voelt vreemd na een tap. */
  .c-navbar__link:hover {
    background: transparent;
    color: var(--color-ink);
  }
  .c-button.c-navbar__pill:hover { background: var(--color-white); }
  .c-button.c-navbar__pill:hover .c-button__label { transform: none; }
}

/* ---------- 7. HERO ---------- */

.c-hero {
  /* Ruimte boven de hero-titel = navbar + 22vh — schaalt mee met
     viewport-hoogte i.p.v. een vaste pixelwaarde, zodat de titel op
     elk scherm proportioneel onder de fold uitkomt. */
  padding-top: calc(var(--nav-height) + var(--nav-top) + 22vh);
  padding-bottom: var(--space-lg);
  text-align: center;
  background: var(--color-primary-500);
  color: var(--color-white);
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* HERO sections krijgen NOOIT afgeronde hoeken — niet boven, niet onder.
     De rounding zit in de sectie eronder die als pill omhoog komt. */
  border-radius: 0;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.c-hero .container {
  width: 100%;
  margin-block: auto;
}

.c-hero__title {
  /* Hero-titel op dezelfde size als andere h2's (text-h-lg) i.p.v.
     het oude text-h-xl. Op Phone Wide en kleiner blijft de @media-
     override actief en kan deze afwijken. */
  font-size: var(--text-h-lg);
  line-height: 1.0;
  color: var(--color-white);
  max-width: 1400px;
  margin: 0 auto;
  text-wrap: balance;
}

.c-hero__tagline {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-xl);
  color: var(--color-white);
  opacity: 0.95;
  margin-top: var(--space-md);
  max-width: 700px;
  margin-inline: auto;
  line-height: 1.4;
  text-wrap: balance;
}

.c-hero__cta {
  margin-top: var(--space-md);
  display: inline-flex;
}

.c-hero__illustration {
  margin-top: var(--space-lg);
  max-width: 600px;
  margin-inline: auto;
}

.c-hero__illustration img,
.c-hero__illustration svg {
  width: 100%;
  height: auto;
}

/* Gestapeld: persoon eronder, brush erboven met wiggle */
.c-hero__illustration--layered {
  position: relative;
}

.c-hero__illustration-person {
  display: block;
  width: 100%;
  height: auto;
}

.c-hero__illustration-brush {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  animation: brushWiggle 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes brushWiggle {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .c-hero__illustration-brush { animation: none; }
}

/* ---------- 8. SECTION HEADERS ---------- */

.c-section-header {
  text-align: center;
  /* Wrapper geen eigen max-width — kinderen bepalen zelf hun breedte. Anders
     overschrijft de wrapper de title's `min(80vw, 1160px)` rule. */
  max-width: none;
  margin: 0 auto var(--space-md);
}

.c-section-header__eyebrow {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
}

.c-section-header__title {
  font-size: var(--text-h-lg);
  color: var(--color-ink);
  text-wrap: balance;
  /* Tekstkader: 80% van het venster, gecapt op 1160px (zelfde rule als hero). */
  max-width: min(80vw, 1160px);
  margin-inline: auto;
}

.c-section-header__sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-lg);
  color: var(--color-ink-60);
  margin-top: var(--space-sm);
  max-width: min(80vw, 1160px);
  margin-inline: auto;
}

/* ---------- 9. GROUP SIZE CALLOUT ---------- */

.c-group-callout {
  background: var(--color-primary-500);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
}

.c-group-callout__number {
  font-family: var(--font-display);
  font-size: var(--text-h-xl);
  line-height: 1.0;
}

.c-group-callout__sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-lg);
  margin-top: var(--space-xs);
}

/* ---------- 10. OCCASION GRID — "Wat vier je?" ---------- */

.c-occasions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

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

.c-occasion-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  min-height: 320px;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-ink);
  transition: transform var(--dur-base) var(--ease-spring);
}

.c-occasion-card:hover {
  transform: translateY(-4px);
}

.c-occasion-card--vrijgezellen { background: var(--color-plum-200); }
.c-occasion-card--verjaardag   { background: var(--color-scarlet-200); color: var(--color-ink); }
.c-occasion-card--teambuilding { background: var(--color-primary-200); }
.c-occasion-card--babyborrel   { background: var(--color-lavender-100); }
.c-occasion-card--familiefeest { background: var(--color-cyan-200); }
.c-occasion-card--more         { background: var(--color-cream-2); border: var(--border-ink); }

.c-occasion-card__illustration {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 50%;
  max-width: 200px;
  opacity: 0.95;
}

.c-occasion-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h-sm);
  line-height: 1.0;
}

.c-occasion-card__arrow {
  margin-top: var(--space-xs);
  font-size: var(--text-xl);
  font-weight: 500;
  font-family: var(--font-body);
}

/* ---------- 10B. FLOATING CHARACTER — boven Hoe werkt het ---------- */

.c-floating-character {
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 0 auto var(--space-md);
  aspect-ratio: 329.6 / 301.4;
  animation: floatUpDown 3.5s ease-in-out infinite;
}

.c-floating-character__person,
.c-floating-character__brush {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.c-floating-character__brush {
  transform-origin: 50% 100%;
  animation: brushWiggle 2.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  .c-floating-character,
  .c-floating-character__brush { animation: none; }
}

/* ---------- 10C. SCROLL CONNECTOR — Hero → Hoe werkt het ---------- */
/* Grote swirl op achtergrond + floating elementen + 3 stappen.
   Scroll-driven via JS (.is-progress var op de connector) zodat het overal werkt. */

/* Scroll connector — multi-viewport tall section.
   De swirl mag naar BOVEN bleeden over de blauwe hero achtergrond
   (overflow:visible + clip-path die alleen onderaan en zijkanten clipt).
   z-index hoger dan hero zodat de swirl op de hero komt te liggen. */
.c-scroll-connector {
  position: relative;
  z-index: 2;
  background: var(--color-cream);
  height: 2800px;
  padding: 0;
  overflow: visible;
  /* Afgeronde bovenhoeken + pull-up zodat de eggshell sectie als pill
     bovenop de blauwe hero komt. In de corner-bites links/rechts boven
     toont het blauw van de hero — zoals praktisch / overige pages. */
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-top: calc(-1 * var(--radius-lg));
  /* Geen clip-path meer — de swirl SVG bleed via overflow:visible. De
     vorige clip-path: inset(-500px ...) creëerde ook upward-bleed wat
     de rounded corners onzichtbaar maakte. */
  --snake-progress: 0;
}

@media (max-width: 900px) {
  .c-scroll-connector { height: 2200px; }
}
@media (max-width: 600px) {
  .c-scroll-connector { height: 1800px; }
}

.c-scroll-connector__pin {
  position: relative;
  width: 100%;
  /* Op brede schermen wordt de pin (en daarmee de swirl-SVG, kaarten, header
     en callout) gecentreerd binnen container-max breedte. De cream bg van
     .c-scroll-connector blijft full-width, dus de section voelt nog steeds
     "groot" maar de animatie + tekst vervormen niet langer op grote monitoren. */
  max-width: var(--container-max);
  margin: 0 auto;
  height: 100%;
}

/* Inline SVG swirl. Origineel pad uit swirl 1.svg, geroteerd -90° via SVG
   transform zodat hij portrait staat (zoals in Figma). viewBox tight gecropt
   rond de geroteerde path-bounds. Bewust groter dan de sectie zodat de
   swirl uit het venster komt (overflow:hidden op de sectie clipt het). */
/* Swirl: nieuwe SVG (viewBox 1512×3143). Width 100% = Figma-schaal.
   Top -14% (= -392px op 2800 sectie) — ~200px hoger dan de vorige -7%. */
.c-scroll-connector__svg {
  position: absolute;
  /* Desktop: swirl 150px lager dan oorspronkelijke -14% (op 2800 section
     was dat -392, + 150 = -242). */
  top: calc(-14% + 150px);
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

/* Mid (901-1650): swirl-section volgt volledig desktop — geen overrides.

   Tablet (901-1300): swirl SVG volgt desktop (geen override), maar de
   snake kaartjes worden in pixel-tops geplaatst zodat ze exact 40px uit
   elkaar staan (i.p.v. desktop's wijde percentage-spreiding). Card-height
   ~400px aangenomen; bij overlap of grote gap kunnen tops bijgesteld worden. */
/* Tablet snake-cards: !important nodig omdat de desktop-regels (op
   regel ~2068) verderop staan in source-order en dus zonder !important
   zouden winnen ondanks deze media query. Gap 80px tussen kaartjes;
   callout uitgelijnd met onderkant card 3; sectie-hoogte beperkt tot
   1690px zodat er max 280px ruimte onder card 3 is. */
@media (min-width: 901px) and (max-width: 1300px) {
  /* Sectie: 200px ruimte onder card 3 (eindigt ~1410) → totale hoogte 1610. */
  .c-scroll-connector { height: 1610px; }
  /* Cta-emerge desktop default heeft margin-top: -500px wat de cards opeet
     op tablet. !important nodig om de regel verderop te overschrijven. */
  #cta-emerge { margin-top: 0 !important; }

  /* Snake-cards: 80px gap tussen elk. */
  .c-snake-card--1 { top: 50px   !important; right: 7%; }
  .c-snake-card--2 { top: 530px  !important; left: 9%; }
  .c-snake-card--3 { top: 1010px !important; bottom: auto !important; right: 7%; }
  /* Callout: links uitgelijnd met card 2 (left 9%) en onderkant uitgelijnd
     met onderkant van card 3 (~1410). top = 1410 - callout_h ~150 = 1260. */
  .c-snake-callout {
    top: 1260px !important;
    bottom: auto !important;
    left: 9% !important;
  }

  /* Connector floaters: positioneren rond de kaarten i.p.v. erover/onder.
     Card 1 staat rechtsboven (top 50-450 right 7%), card 2 linksmiddels
     (top 530-930 left 9%), card 3 rechtsonder (top 1010-1410 right 7%).
     Floaters verspreiden over de empty corners. */
  .c-floater--f1  { top: 100px !important; right: 38% !important; left: auto !important; } /* lightning boven card 1 */
  .c-floater--f3  { top: 250px !important; left: 5%   !important; right: auto !important; } /* partyhat linksboven naast card 1 */
  .c-floater--f4  { top: 380px !important; left: 30%  !important; right: auto !important; } /* corkscrew links onder card 1 */
  .c-floater--f5  { top: 400px !important; right: 4%  !important; left: auto !important; } /* palette: 200px omhoog t.o.v. eerder (van 600 → 400) */
  .c-floater--f6  { top: 750px !important; right: 8%  !important; left: auto !important; } /* discoball rechts van card 2 onder palette */
  .c-floater--f7  { top: 480px !important; left: 45%  !important; right: auto !important; } /* sparkle midden tussen card 1 en 2 */
  .c-floater--f8  { top: 970px !important; left: 25%  !important; right: auto !important; } /* apron tussen card 2 en card 3 */
  .c-floater--f9  { top: 1000px !important; right: 2% !important; left: auto !important; } /* wine glass: 360px naar rechts (was 35% → 2%) en 150px naar beneden (was 850 → 1000) */
  .c-floater--f10 { top: 1430px !important; left: 30% !important; right: auto !important; } /* drink hand onder card 3 in lege ruimte */
}

@media (max-width: 900px) {
  .c-scroll-connector__svg {
    /* Phone-versie: 800px breed, rechts geankerd, 20px hoger dan -8%
       basis. Het breakpoint waar de 800px-swirl in zit krijgt dus de
       gevraagde 20px omhoog. */
    width: 800px;
    max-width: none;
    left: auto;
    right: -20px;
    top: calc(-8% - 20px);
  }
}

/* Small phone (≤ 480): swirl iets verder naar rechts geschoven zodat de
   shape op kleine schermen niet te ver naar links uitsteekt. Negatieve
   right-waarde maakt de SVG verder buiten de rechter viewport-rand
   uitvallen, waardoor het zichtbare gedeelte rechts van het scherm zit. */
@media (max-width: 480px) {
  .c-scroll-connector__svg {
    right: -80px;
  }
}

/* Volgende sectie (Plan jouw activiteit, scarlet) ligt BOVENOP de swirl.
   Margin-top -500px = -300 (basis) + -200 (om mee te schuiven met de swirl
   die ook 200px omhoog ging). Daardoor blijft de swirl-eind ↔ CTA-top
   verhouding gelijk. */
#cta-emerge {
  position: relative;
  z-index: 3;
  margin-top: -500px;
  /* Even veel padding boven en onder — 140px (mobile 95px). */
  padding-top: 140px;
  padding-bottom: 140px;
  --emerge: 0;
  clip-path: circle(calc(var(--emerge) * 160%) at 52% 0%);
  will-change: clip-path;
}
@media (max-width: 900px) {
  #cta-emerge {
    margin-top: -380px;
    padding-top: 95px;
    padding-bottom: 95px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #cta-emerge { clip-path: none; }
}

/* Numbers-sectie: overflow visible nodig zodat position:sticky op de kaartjes
   werkt (de algemene .section--pill heeft overflow:hidden voor de pill-corners,
   wat sticky breekt). De cards blijven binnen de .container, dus geen risico
   op overflow buiten de sectie. */
#numbers-section {
  overflow: visible;
  /* Padding-bottom op 0: het cards-container heeft al 200px padding-bottom
     wat de gevraagde max afstand is tussen het laatste kaartje en de
     volgende sectie. Default section-padding zou hier nog ~152px bovenop
     stapelen, wat te veel is. */
  padding-bottom: 0;
}
/* Mobile (≤900) en kleiner: 60px padding-bottom op de numbers-section
   voor wat ademruimte tot de volgende lavender-sectie. */
@media (max-width: 900px) {
  #numbers-section { padding-bottom: 60px; }
}

/* ---------- PRAKTISCH PAGINA ---------- */

/* Hero variant — blue compact (gebruikt op /pages/praktisch).
   Hoogte 800px voor wat meer ademruimte, achtergrond #3875FF (praktisch-blauw
   uit Figma). Bovenhoeken blijven plat (zie .c-hero). Content gecentreerd.
   STICKY — blijft tegen de top van het venster terwijl de rest eroverheen
   scrollt. De homepage (.c-hero zonder modifier) blijft zonder sticky-gedrag. */
/* Foto-hero variant: vervangt de blauwe achtergrond door een achtergrondfoto
   met gradient-overlay zodat de witte tekst leesbaar blijft. Wordt
   gecombineerd met .c-hero--scarlet voor de hoogte + paddings. */
.c-hero--photo {
  background-size: cover !important;
  background-position: center 35%;
  background-repeat: no-repeat;
  /* sticky (niet relative) zodat de foto-hero net als de gewone scarlet-hero
     tegen de top blijft plakken en wegfadet bij scroll. */
  position: sticky;
  top: 0;
  isolation: isolate;
}
.c-hero--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 5, 70, 0.55) 0%, rgba(14, 5, 70, 0.35) 50%, rgba(14, 5, 70, 0.45) 100%);
  z-index: 0;
  pointer-events: none;
}
.c-hero--photo > .container { position: relative; z-index: 1; }

/* CMS-gestuurde foto-hero — dezelfde behandeling als .c-hero--photo maar
   wordt door cms-loader toegevoegd zodra hero_image_url is ingevuld. */
.c-hero.c-hero--has-photo {
  background-size: cover !important;
  background-position: center 35%;
  background-repeat: no-repeat;
  /* sticky (niet relative) - anders overschrijft deze regel de sticky van
     .c-hero--scarlet en scrollt de hero-tekst mee weg. Zie Praktisch/Team. */
  position: sticky;
  top: 0;
  isolation: isolate;
}
.c-hero.c-hero--has-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 5, 70, 0.55) 0%, rgba(14, 5, 70, 0.35) 50%, rgba(14, 5, 70, 0.45) 100%);
  z-index: 0;
  pointer-events: none;
}
.c-hero.c-hero--has-photo > .container { position: relative; z-index: 1; }
.c-hero.c-hero--has-photo .c-hero__title,
.c-hero.c-hero--has-photo .c-section-header__title,
.c-hero.c-hero--has-photo .c-hero__tagline { color: var(--color-cream); }

.c-hero--scarlet {
  background: #3875FF;
  color: var(--color-cream);
  /* Hero-hoogte vh-gebonden zodat hij meeschaalt met viewport-hoogte
     i.p.v. een vaste 800px (op kleine schermen ineens dominant en op
     grote schermen ineens te klein). */
  min-height: 75vh;
  height: 75vh;
  /* Ruimte boven de hero-titel = navbar + 6vh, viewport-hoogte gebonden. */
  padding-top: calc(var(--nav-height) + var(--nav-top) + 6vh);
  padding-bottom: var(--space-md);
  justify-content: center;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 1;
  /* Geen permanente clip — .c-cream-back wrapper achter de eerste 2 secties
     verbergt de hero-kleur achter hun corner-bites. */
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
  transition: opacity 0.55s var(--ease-inout),
              -webkit-clip-path 0.7s var(--ease-inout),
                      clip-path 0.7s var(--ease-inout);
}

/* Klasse die JS toggelt als de hero "uitgewist" moet zijn — clip-path eet de
   onderkant naar boven toe weg (bottom 0% → 100% inset), opacity fade in parallel.
   De clip-path duurt iets langer dan de opacity, dus de onderkant verdwijnt
   visueel sneller dan de bovenkant.                                     */
.c-collection-hero.is-hero-faded,
.c-hero--scarlet.is-hero-faded {
  opacity: 0;
  -webkit-clip-path: inset(0 0 100% 0);
          clip-path: inset(0 0 100% 0);
}
.c-hero--scarlet .c-hero__title,
.c-hero--scarlet .c-section-header__title { color: var(--color-cream); }
.c-hero--scarlet .c-hero__tagline { color: var(--color-cream); opacity: 0.9; }
@media (max-width: 700px) {
  .c-hero--scarlet { padding-top: calc(var(--nav-height) + var(--nav-top)); }
  /* Hero titel-overrides verwijderd — hero h2 gebruikt nu op ELK
     breakpoint dezelfde size als de andere h2's (var(--text-h-lg)
     uit de default .c-section-header__title rule). */
  .c-footer__big { font-size: var(--text-h-md); }
  /* "In 3 stappen op je doek" header in de swirl-sectie — override
     wordt nu gezet binnen het max-width: 900px blok hieronder, na de
     base rule op regel 1956 (anders verliest de override door source
     order ondanks de media query). */
  /* Hero tagline iets kleiner op mobiel zodat de intro-tekst niet te
     dominant is naast de titel. text-xl (20px) → text-lg (18px). */
  .c-hero__tagline { font-size: var(--text-lg); }

  /* Algemene buttons compacter op mobiel: minder padding, kleinere tekst
     (16px ipv 18px), kleinere icoon-cirkel (32px ipv 40px). De navbar
     Boek-nu pill heeft eigen overrides via .c-button.c-navbar__pill (2-class
     specificiteit) en wordt dus niet door deze regels overschreven. */
  .c-button {
    padding: 9px;
    font-size: var(--text-base);
    gap: 8px;
  }
  .c-button__label { padding: 0 8px; }
  .c-button__icon { width: 32px; height: 32px; }
  .c-button__icon svg { width: 14px; height: 14px; }
}
@media (max-width: 480px) {
  .c-hero--scarlet { min-height: 65vh; height: 65vh; }
}

/* "In 3 stappen op je doek" — simpele 3-kolom variant zonder swirl */
.c-steps--simple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}
@media (max-width: 900px) {
  .c-steps--simple { grid-template-columns: 1fr; }
}
.c-step-simple {
  text-align: center;
  padding: var(--space-md) var(--space-sm);
}
.c-step-simple__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: 30px;
  margin-bottom: var(--space-md);
  color: var(--color-cream);
}
.c-step-simple__num--blue    { background: var(--color-primary-500); color: var(--color-cream); }
.c-step-simple__num--plum    { background: var(--color-plum-500);    color: var(--color-cream); }
.c-step-simple__num--cyan    { background: var(--color-cyan-500);    color: var(--color-cream); }
.c-step-simple__num--scarlet { background: var(--color-scarlet-500); color: var(--color-cream); }
.c-step-simple__title {
  font-family: var(--font-display);
  font-size: var(--text-h-sm);
  margin-bottom: var(--space-xs);
}
.c-step-simple__body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-base);
  color: var(--color-ink);
  line-height: 1.4;
  max-width: 360px;
  margin: 0 auto;
}

/* Soorten workshops sectie — eigen pastel-cyan kleur, kaders iets lichter */
#what-to-paint {
  color: var(--color-ink);
}
/* Kadertjes (foto-boxen) houden een subtiele tint zodat het pictogram
   in een frame staat; de sectie zelf heeft geen achtergrondkleur meer. */
#what-to-paint .c-article-card__image {
  background: #D9F7F6 !important;
}
/* Foto-carrousel binnen het kadertje: pictogram eerst, daarna de
   CMS-foto's die aan de workshop gekoppeld zijn. */
.c-article-card__slides {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform 0.4s var(--ease-inout);
}
.c-article-card__slide {
  flex: 0 0 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.c-article-card__slide--pictogram {
  background-size: 70%;
}
.c-article-card__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: rgba(255, 252, 247, 0.9);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--color-ink);
  z-index: 2;
  transition: background 0.2s ease;
}
.c-article-card__nav:hover { background: #fff; }
.c-article-card__nav--prev { left: 8px; }
.c-article-card__nav--next { right: 8px; }

/* Drinkformules — drie kaarten, middelste highlighted (blauw) */
.c-formula-note {
  text-align: center;
  margin-top: var(--space-lg);
  font-size: var(--text-base);
  color: var(--color-ink-60);
  max-width: 600px;
  margin-inline: auto;
}
/* Mobile (≤900): formula-note iets smaller (550px max-width) en
   compactere margin-top (20px i.p.v. var(--space-lg)). */
@media (max-width: 900px) {
  .c-formula-note { max-width: 550px; margin-top: 20px; }
}

/* Locaties — sectie achtergrond (BED3FF), kader EAF0FF */
#where {
  background: #BED3FF;
  color: var(--color-ink);
}

.c-locations {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.c-locations__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Stedenlijst als filter-tabs — alleen kleurwissel, geen pill-bg */
.c-locations__cities {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.c-locations__city {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--text-h-sm);
  color: var(--color-ink);
  opacity: 0.4;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  line-height: 1.0;
}
.c-locations__city:hover,
.c-locations__city.is-active {
  opacity: 1;
  background: transparent;
}

/* Outer wrapper: heeft de rondingen + uniforme 40px padding rondom.
   Hoeken blijven mooi rond want overflow:hidden clipt de scrollbar binnen. */
.c-locations__list-wrap {
  background: #EAF0FF;
  border-radius: var(--radius-md);
  padding: 34px 40px;
  max-height: 360px;
  overflow: hidden;
  display: flex;
}

/* Inner scrollable list: vult de wrapper, heeft de scrollbar.
   Geen gap tussen items zodat de eerste/laatste exact tegen de wrapper
   padding aansluiten — alle ademruimte komt nu uit de item padding-bottom
   (die op de laatste 0 wordt om symmetrisch met de top te zijn). */
.c-locations__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Padding-right zorgt dat de scrollbar niet tegen de tekst aanklemt */
  padding-right: 12px;
  /* Custom scrollbar in BED3FF */
  scrollbar-width: thin;
  scrollbar-color: #BED3FF transparent;
}
.c-locations__list::-webkit-scrollbar {
  width: 8px;
}
.c-locations__list::-webkit-scrollbar-track {
  background: transparent;
}
.c-locations__list::-webkit-scrollbar-thumb {
  background: #BED3FF;
  border-radius: 4px;
}
.c-locations__list::-webkit-scrollbar-thumb:hover {
  background: #A6BFF5;
}

.c-locations__item {
  display: flex;
  flex-direction: column;
  padding: 0 0 var(--space-sm) 0;
  border-bottom: 1px solid rgba(12, 5, 56, 0.08);
}
.c-locations__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.c-locations__item.is-hidden {
  display: none;
}
.c-locations__name {
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-ink);
  margin: 0;
  line-height: 1.3;
}
.c-locations__addr {
  font-size: var(--text-sm);
  color: var(--color-ink);
  opacity: 0.7;
  margin: 2px 0 0;
  line-height: 1.3;
}

/* Mobile en kleiner: layout switcht naar 1 kolom op het bovenste
   niveau, maar binnen de sidebar staan stedenlijst + adressen-lijst
   naast elkaar (flex-row, beide width 50%). De kaart komt eronder,
   full-width. Deze @media staat NA alle default rules zodat hij
   correct doorklinkt — anders verloor hij van later-defined defaults. */
/* Dropdown-filter — enkel op gsm zichtbaar (zie mobile @media hieronder). */
.c-locations__select {
  display: none;
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--text-h-sm);
  color: var(--color-ink);
  background: #EAF0FF;
  border: 0;
  border-radius: var(--radius-sm);
  padding: 14px 44px 14px 18px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* Chevron als achtergrond-SVG rechts */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%230E0546' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

@media (max-width: 900px) {
  /* minmax(0,1fr) i.p.v. 1fr: anders duwt de min-content van de Leaflet-kaart
     de grid-track breder dan het scherm → horizontale overflow. */
  .c-locations {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
  }
  .c-locations__sidebar {
    flex-direction: row;
    gap: var(--space-md);
  }
  .c-locations__cities,
  .c-locations__list-wrap {
    width: 50%;
  }
}

/* Gsm: stedenlijst wordt een dropdown, en alles stapelt op volle breedte —
   eerst de dropdown, dan de lijst, dan de kaart. Deze block staat NA de
   900px-block zodat hij wint op smalle schermen. */
@media (max-width: 600px) {
  .c-locations__sidebar {
    flex-direction: column;
    gap: var(--space-sm);
  }
  .c-locations__cities {
    display: none; /* verticale knoppenlijst verbergen */
  }
  .c-locations__select {
    display: block;
  }
  .c-locations__cities,
  .c-locations__list-wrap {
    width: 100%;
  }
  /* Kaart nooit breder dan het scherm */
  .c-locations__map {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  .c-locations__map .leaflet-container,
  #praktisch-map {
    max-width: 100%;
  }
}

/* Kaart van Vlaanderen placeholder */
.c-locations__map {
  background: #EAF0FF;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  padding: var(--space-md);
}
.c-locations__map-text {
  font-family: var(--font-display);
  font-size: var(--text-h-sm);
  color: var(--color-ink);
  opacity: 0.3;
  text-align: center;
  max-width: 280px;
  line-height: 1.1;
}

/* Zigzag bridge — scroll-driven SVG path animatie tussen Drinkformules
   en Locaties. Gebruikt stroke-dasharray two-number trick zoals de swirl. */
.c-zigzag-bridge {
  position: relative;
  height: 350px;
  background: var(--color-cream);
  overflow: visible;
  z-index: 4;
}
.c-zigzag-bridge__svg {
  position: absolute;
  top: 50%;
  right: -8%;
  /* 150px omhoog, 200px naar rechts t.o.v. de oorspronkelijke center-positie */
  transform: translate(200px, calc(-50% - 150px));
  height: 1200px;
  width: auto;
  pointer-events: none;
  overflow: visible;
}
/* Tablet (901-1300): zigzag-bridge compactere height (170px i.p.v.
   350px), en svg iets meer naar rechts (230 i.p.v. 200) zodat hij
   in de smallere kolombreedte goed gepositioneerd zit. */
@media (min-width: 901px) and (max-width: 1300px) {
  .c-zigzag-bridge { height: 170px; }
  .c-zigzag-bridge__svg { transform: translate(230px, calc(-50% - 150px)); }
}
@media (max-width: 900px) {
  .c-zigzag-bridge { height: 70px; scale: 1.4; }
  .c-zigzag-bridge__svg {
    height: 800px;
    right: 0%;
    transform: translate(100px, calc(-46% - 150px));
  }
}
/* Phone (≤600) en kleiner: zigzag-bridge zonder eigen hoogte (svg
   bepaalt visueel zelf de plek via translate) en 1.4x opgeschaald. */
@media (max-width: 600px) {
  .c-zigzag-bridge { height: 0; scale: 1.4; }
  .c-zigzag-bridge__svg { transform: translate(70px, calc(-40% - 150px)); }
}
.c-zigzag-path {
  fill: none;
  stroke: #4874FF;
  stroke-width: 58.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .c-zigzag-path { stroke-dasharray: none !important; }
}

/* ---------- COLLECTION-PAGE TEMPLATE (vrijgezellen, verjaardag, etc.) ----------
   CSS-variabelen op <body>:
   --theme-color       (achtergrond hero)
   --theme-color-dark  (achtergrond features sectie, één shade donkerder)
   --theme-text        (tekstkleur op theme — cream of ink afhankelijk van bg)
   --theme-text-muted  (subtekst, iets minder opaak)
*/

/* Hero — bijna 100vh maar net genoeg ruimte zodat je het begin van de
   volgende sectie ziet (rondingen). */
.c-collection-hero {
  /* STICKY — blijft tegen de top van het venster terwijl de features +
     volgende secties eroverheen scrollen. Geen permanente bottom-clip:
     in plaats daarvan zit er een .c-cream-back wrapper achter de eerste
     twee secties die de hero-kleur uit corner-bites houdt.
     Faded-state animeert clip-path bottom inset 0 → 100% (onderkant
     verdwijnt sneller dan bovenkant). */
  position: sticky;
  top: 0;
  z-index: 1;
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
  transition: opacity 0.55s var(--ease-inout),
              -webkit-clip-path 0.7s var(--ease-inout),
                      clip-path 0.7s var(--ease-inout);
  min-height: calc(100vh - 80px);
  background: var(--theme-color, var(--color-plum-500));
  color: var(--theme-text, var(--color-cream));
  /* Geen ronde hoeken — features-sectie eronder vangt de rounding op */
  border-radius: 0;
  /* Title staat 26vh van de top van de viewport — vh-gebonden zodat
     het meeschaalt met viewport-hoogte i.p.v. een vaste 300px. */
  padding: 26vh 0 var(--space-xl);
  overflow: hidden;
}
.c-collection-hero .container {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 0;
}

.c-collection-hero__content {
  text-align: center;
  width: 100%;
  /* Geen interne max-width — title regelt zelf zijn breedte (80vw / 1160px). */
  max-width: none;
  margin: 0 auto;
}
.c-collection-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-h-lg);
  line-height: 1.0;
  color: var(--theme-text, var(--color-cream));
  margin: 0 auto var(--space-md);
  /* Tekstkader: 80% van het venster, gecapt op 1160px. */
  max-width: min(80vw, 1160px);
  width: 100%;
  text-align: center;
  text-wrap: balance;
}
.c-collection-hero__sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  color: var(--theme-text-muted, rgba(255,252,247,0.85));
  max-width: 600px;
  margin: 0 auto var(--space-md);
  line-height: 1.5;
}
.c-collection-hero__cta {
  display: inline-flex;
}

/* Hero illustratie — wiebelt zachtjes rond eigen as.
   Positie: t.o.v. de hero-sectie zelf (illustratie staat buiten .container).
   right: 25px (was 75; 50px naar rechts geschoven per feedback), bottom: 75px. */
.c-collection-hero__illustration {
  position: absolute;
  right: 25px;
  bottom: 75px;
  margin: 0;
  padding: 0;
  /* Width vh-gebonden i.p.v. vw zodat de illustratie meeschaalt met
     viewport-hoogte. min 200px, target/max 22vh. */
  width: clamp(200px, 22vh, 22vh);
  pointer-events: none;
  z-index: 1;
  transform-origin: center center;
  animation: heroIllustrationWiggle 6s ease-in-out infinite;
}
.c-collection-hero__illustration img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}
@keyframes heroIllustrationWiggle {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .c-collection-hero__illustration { animation: none; }
}
@media (max-width: 900px) {
  .c-collection-hero__illustration {
    right: 30px;
    bottom: 100px;
    width: clamp(140px, 22vh, 22vh);
  }
}
/* Gsm: illustratie in de flow ONDER de knop (gecentreerd). De hero krijgt
   auto-hoogte en de container een 0-min-height (geforceerd) zodat de
   illustratie direct onder de content valt i.p.v. onderaan een schermhoge
   hero. De features-sectie mag hier NIET meer over de hero heen, anders
   bedekt ze de illustratie. */
@media (max-width: 600px) {
  .c-collection-hero { min-height: auto; }
  .c-collection-hero .container { min-height: 0 !important; }
  .c-collection-hero__illustration {
    position: static;
    right: auto;
    bottom: auto;
    margin: var(--space-lg) auto var(--space-md);
    width: clamp(150px, 42vw, 210px);
  }
  .c-collection-features { margin-top: 0; }
}

/* Features sectie — één shade donkerder dan de hero, komt over de hero
   met rounded TOP corners. Negative margin-top trekt 'm omhoog. */
.c-collection-features {
  position: relative;
  background: var(--theme-color-dark, var(--color-plum-600));
  color: var(--theme-text, var(--color-cream));
  /* Padding-bottom +100px om de overlap van .c-gallery-section
     (margin-top: -100px) te compenseren, zodat de zichtbare top- en
     bottom-padding op deze sectie gelijk zijn. Anders staat de inhoud
     visueel "naar boven" geduwd. */
  padding-top: var(--space-2xl);
  padding-bottom: calc(var(--space-2xl) + 100px);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin-top: -60px;
  z-index: 2;
}
.c-collection-features .c-section-header__eyebrow,
.c-collection-features .c-section-header__title,
.c-collection-features .c-section-header__sub {
  color: var(--theme-text, var(--color-cream));
}
.c-collection-features .c-section-header__sub {
  color: var(--theme-text-muted, rgba(255,252,247,0.85));
}
/* Expliciet center-uitlijnen van de section-header content binnen
   .c-collection-features (de title, eyebrow en sub blokken).
   Flexbox-aanpak voorkomt dat margin-inline overrules ergens anders de
   block-elementen uit lijn duwen — flex items zijn altijd echt gecentreerd. */
.c-collection-features .c-section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.c-collection-features .c-section-header__title,
.c-collection-features .c-section-header__sub,
.c-collection-features .c-section-header__eyebrow {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.c-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
@media (max-width: 900px) { .c-features-grid { grid-template-columns: 1fr; } }
/* Phone wide en kleiner: kleinere margin-top (70px i.p.v. --space-xl
   = 152px) zodat de features-grid compacter aansluit op de hero. */
@media (max-width: 700px) { .c-features-grid { margin-top: 70px; } }

.c-feature {
  text-align: center;
}
.c-feature__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background: var(--theme-color, var(--color-plum-500));
  margin: 0 auto var(--space-md);
}
/* Per-icon achtergrondkleur — Figma:
   1) party hat → lavender (#EBE2FF)
   2) ring      → cyan-500 (#00D1D3)
   3) corkscrew → primary blauw (#004AFF)        */
.c-feature:nth-child(1) .c-feature__icon { background: var(--color-lavender-100); }
.c-feature:nth-child(2) .c-feature__icon { background: var(--color-cyan-500); }
.c-feature:nth-child(3) .c-feature__icon { background: var(--color-primary-500); }
.c-feature__icon img {
  display: block;
  width: auto;
  height: auto;
  /* Veiligheidsnet: niets mag uit de cirkel vallen. */
  max-width: 64px;
  max-height: 64px;
}
/* Cirkels 80px, iconen per-item — diagonaal moet binnen radius 40px van het
   midden vallen, dus de bounding-box-grootte is bewust kleiner dan 80.
   - party hat: 60px hoog
   - ring: kleiner (≈ even visueel als party hat)
   - corkscrew: ~60px breed (was 76, kwam buiten de cirkel)                  */
.c-feature:nth-child(1) .c-feature__icon img { height: 60px; }                 /* party hat */
.c-feature:nth-child(2) .c-feature__icon img { height: 42px; }                 /* ring (kleiner, ~zelfde visueel als hoedje) */
.c-feature:nth-child(3) .c-feature__icon img { width: 44px; height: auto; }    /* corkscrew (tikkeltje kleiner + viewBox gecentreerd) */
.c-feature__title {
  font-family: var(--font-display);
  font-size: var(--text-h-sm);
  color: var(--theme-text, var(--color-cream));
  margin-bottom: var(--space-xs);
}
.c-feature__body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  color: var(--theme-text-muted, rgba(255,252,247,0.85));
  line-height: 1.5;
  max-width: 360px;
  margin: 0 auto;
}

/* Gallery sectie — 4 expandable cards in 2x2 grid.
   padding-top wordt door .section--pill-cream rule op 80px gezet (sitewide).
   Stevige pull-up van -100px zodat de afgeronde top-hoeken duidelijk over
   de flat-bottom van .c-collection-features hangen.
   Eggshell achtergrond, alleen BOVENAAN afgeronde hoeken (override van de
   all-corners radius op .section--pill). De curves zijn zichtbaar als
   pink-naar-cream overgangen tegen de features-sectie. */
.c-gallery-section {
  padding-bottom: var(--space-xl);
  position: relative;
  z-index: 2;
  margin-top: -100px;
  background: var(--color-cream);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* Phone (≤600) en kleiner: kleinere padding-bottom (--space-xl
   = 70px i.p.v. --space-2xl = 190px) zodat de gallery-sectie
   compacter aansluit op wat eronder komt. */
@media (max-width: 600px) {
  .c-gallery-section { padding-bottom: var(--space-xl); }
}
.c-gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Column-gap blijft op space-md (~38px), row-gap 90px zodat er ademruimte
     zit tussen de groene pill van een kaart en de gallery-afbeelding van de
     kaart eronder. */
  column-gap: var(--space-md);
  row-gap: 52px;
  margin-top: var(--space-xl);
}
/* Tablet (≤1300) en kleiner: kleinere row-gap. */
@media (max-width: 1300px) { .c-gallery-grid { row-gap: 40px; } }
@media (max-width: 700px) { .c-gallery-grid { grid-template-columns: 1fr; } }

.c-gallery-card {
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: grid-row 0.3s;
}
/* Wanneer een card open is: hij behoudt zijn breedte (1 kolom) maar groeit
   in hoogte. Door de grid auto-rows groeien beide cards in dezelfde rij mee
   in hoogte; de rij eronder schuift naar beneden — niets wordt verkleind. */
.c-gallery-card[open] {
  /* breedte ongewijzigd, hoogte groeit door content */
}
.c-gallery-card__summary {
  list-style: none;
  cursor: pointer;
  display: block;
}
.c-gallery-card__summary::-webkit-details-marker { display: none; }
.c-gallery-card__summary::marker { display: none; }

/* Image-area van de gallery card — blijft gelijke hoogte ongeacht open/closed.
   Stock foto's leven in .c-gallery-card__slides; pijlen zweven absolute eroverheen. */
.c-gallery-card__image {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--color-cyan-100);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.c-gallery-card__slides {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform 0.4s var(--ease-inout);
}
.c-gallery-card__slide {
  flex: 0 0 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--color-cyan-100);
}
/* Visuele variatie tussen placeholders zolang er nog geen stock foto's zijn —
   geeft hint van meerdere slides en helpt de pijlen te tonen. */
.c-gallery-card__slide:nth-child(1) { background-color: var(--color-cyan-100); }
.c-gallery-card__slide:nth-child(2) { background-color: var(--color-cyan-200); }
.c-gallery-card__slide:nth-child(3) { background-color: var(--color-cyan-50); }
/* Pictogram-slide: illustratie 'contained' als eerste beeld; de geüploade
   foto's (cover) komen erna. */
.c-gallery-card__slide--pictogram { background-size: 55%; }
/* Navigatie-pijlen — circulair, links/rechts gecentreerd, zachte hover */
.c-gallery-card__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255, 252, 247, 0.85);
  border: none;
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 12px rgba(12, 5, 56, 0.12);
}
.c-gallery-card__nav:hover {
  background: var(--color-cream);
  transform: translateY(-50%) scale(1.05);
}
.c-gallery-card__nav--prev { left: 12px; }
.c-gallery-card__nav--next { right: 12px; }

/* De pill is één container die bar + expanded omsluit. Constante border-radius
   zodat closed → open één continue vorm is: bovenhoeken blijven rond, onderkant
   zakt naar beneden. Geen tussenstaat met een 'rechthoek onder een pill'. */
.c-gallery-card__pill {
  background: var(--color-cyan-200);  /* #9DEBEB */
  color: var(--color-ink);
  border-radius: var(--radius-lg);
  margin-top: var(--space-sm);
  overflow: hidden;
}
.c-gallery-card__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  cursor: pointer;
  user-select: none;
  /* Geen border-radius hier — de wrapper-pill regelt de vorm */
}
.c-gallery-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.c-gallery-card__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: rgba(12, 5, 56, 0.1);
  color: var(--color-ink);
  /* Synced met bar/expanded transitions (0.45s ease-inout) */
  transition: transform 0.45s var(--ease-inout), background 0.2s ease;
}
.c-gallery-card[open] .c-gallery-card__chevron {
  transform: rotate(180deg);
  background: var(--color-ink);
  color: var(--color-cyan-200);
}
/* Expanded panel — zit binnen de pill (deelt zijn achtergrond + radius), dus
   geen eigen background of border-radius. Begint op height: 0 (closed) en groeit
   naar scrollHeight via JS bij openen — de onderkant van de pill zakt mee. */
.c-gallery-card__expanded {
  height: 0;
  overflow: hidden;
  transition: height 0.45s var(--ease-inout);
}
.c-gallery-card__expanded-inner {
  /* Tekst loopt netjes door onder de titelbalk (geen grote lege ruimte). */
  padding: var(--space-md);
  color: var(--color-ink);
  font-size: var(--text-base);
  line-height: 1.55;
}
.c-gallery-card__expanded p {
  margin: 0 0 var(--space-sm);
  max-width: 760px;
  margin-inline: auto;
}
.c-gallery-card__list {
  margin: var(--space-sm) auto;
  padding-left: var(--space-md);
  max-width: 720px;
  list-style: disc;
}
.c-gallery-card__list li {
  margin-bottom: var(--space-2xs);
}
.c-gallery-card__link {
  color: var(--color-primary-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.c-gallery-card__link:hover {
  color: var(--color-ink);
}

/* ---------- 404 PAGINA ----------
   Layout volgens ontwerp: titel "Verloren?" boven gecentreerd,
   het 404-cijfer staat groot links onderaan, links en onder over de rand. */
.c-404 {
  position: relative;
  min-height: 100vh;
  /* Ruimte boven de 404-titel = navbar + 18vh, vh-gebonden. */
  padding-top: calc(var(--nav-height) + var(--nav-top) + 18vh);
  overflow: hidden;
}
.c-404__title {
  font-family: var(--font-display);
  font-size: var(--text-h-lg);
  color: var(--color-ink);
  line-height: 1.0;
  text-align: center;
  margin: 0 auto;
  /* Zelfde tekstkader-rule als de hero/section titles: 80vw / 1160px max. */
  max-width: min(80vw, 1160px);
  text-wrap: balance;
}
/* "4" karakter geplakt tegen linkeronderkant van het venster.
   SVG-content X start = 178/1434 = 12.4% van breedte (lege ruimte links).
   SVG-content Y end = 632/740 = 85.4% van hoogte (15% empty onderaan).
   Compensatie via margin/positie zodat de "4" zelf de hoeken raakt.
   Daarnaast +55px omhoog t.o.v. de vorige positie zodat de cijfers iets
   hoger op de pagina zitten. */
.c-404__graphic {
  position: absolute;
  bottom: calc(-12.4vw + 55px);
  left: -12.4vw;
  width: 100vw;
  height: auto;
  pointer-events: none;
}
.c-404__graphic img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 700px) {
  .c-404__graphic { bottom: -12vw; left: -12vw; width: 140vw; }
}

/* Ghost button — transparant met outline + cirkel-icoon */
.c-button--ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1.5px solid var(--color-ink);
  padding-right: 8px; /* icon zit dicht tegen rand */
}
.c-button--ghost .c-button__icon {
  background: var(--color-ink);
  color: var(--color-cream);
}
.c-button--ghost:hover {
  background: var(--color-ink);
  color: var(--color-cream);
}
.c-button--ghost:hover .c-button__icon {
  background: var(--color-cream);
  color: var(--color-ink);
}

/* Reviews + Klanten gecombineerd: lavender (EBE2FF) achtergrond met pill-rondingen.
   180px padding-bottom zodat de onderste marquee-rij ruim onder de tweede titel
   staat en netjes ademruimte heeft tot de sectie-onderkant. */
#reviews-klanten {
  background: #EBE2FF;
  color: var(--color-ink);
  padding-bottom: 180px;
}

/* Marquee binnen de gecombineerde reviews+klanten sectie:
   pill-achtergrond eggshell @ 50% opacity, logo-cirkels in 100% eggshell. */
#reviews-klanten .c-marquee__item {
  background: rgba(255, 252, 247, 0.5); /* --color-cream @ 50% */
  color: var(--color-ink);
}
#reviews-klanten .c-marquee__logo {
  background: var(--color-cream); /* 100% eggshell */
}

/* Video explainer sectie: 120px padding-top (boven eyebrow) en 100px
   marge tussen de titel en de video. */
#video-section {
  padding-top: 120px;
  padding-bottom: 120px;
}
#video-section .c-video {
  margin-top: 100px;
}
@media (max-width: 900px) {
  #video-section { padding-top: 80px; padding-bottom: 80px; }
  #video-section .c-video { margin-top: 60px; }
}

/* Boek nu (quote) knop binnen de scarlet CTA-sectie: pijl-cirkel in
   scarlet kleur ipv default blauw; hover wordt plum/roze. */
#cta-emerge .c-button--quote .c-button__icon {
  background: var(--color-scarlet-500);
  color: var(--color-white);
}
#cta-emerge .c-button--quote:hover .c-button__icon {
  background: var(--color-plum-500);
  color: var(--color-ink);
}

/* Bekijk kalender (secondary) knop binnen de scarlet CTA: witte tekst en
   witte outline, hover wordt volledige witte achtergrond met donkere tekst. */
#cta-emerge .c-button--secondary {
  color: var(--color-white);
  border-color: var(--color-white);
}
#cta-emerge .c-button--secondary:hover {
  background: var(--color-white);
  color: var(--color-ink);
  border-color: var(--color-white);
}

.c-snake-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: var(--color-scarlet-500);
  /* stroke-width is set as a presentation attribute on the <path> itself
     so it can vary per shape — don't override here.
     dasharray gets set inline via JS using getTotalLength() */
}

/* Header linksboven — eyebrow "Hoe werkt het?" + title "In 3 stappen op je doek" */
.c-scroll-connector__header {
  position: absolute;
  top: 3%;
  left: calc(var(--grid-margin) + 100px);
  z-index: 4;
  max-width: 720px;
}
.c-scroll-connector__header .c-section-header__eyebrow {
  margin-bottom: var(--space-2xs);
  text-align: left;
}
.c-scroll-connector__header .c-section-header__title {
  text-align: left;
  font-size: var(--text-h-lg);
  margin: 0;
  line-height: 0.95;
  /* Was text-wrap: nowrap → forceerde 1 lijn na de cms-loader het <br> stripte.
     Nu balance + smalle max-width zodat de titel op ~2 lijnen wrapt
     ongeacht of Simon de tekst aanpast in de CMS. */
  text-wrap: balance;
  max-width: min(560px, 56vw);
}

/* Step cards — groot, gecentreerde content, zoals Figma (575×442).
   Standaard onzichtbaar; .is-visible wordt toegevoegd door JS op
   scroll-progress thresholds. */
.c-snake-card {
  position: absolute;
  width: clamp(300px, 38%, 575px);
  min-height: clamp(320px, 30vw, 442px);
  padding: var(--space-lg) var(--space-md);
  border-radius: 50px;
  text-align: center;
  pointer-events: auto;
  z-index: 2;
  box-shadow: 0 12px 32px rgba(12, 5, 56, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(28px) scale(0.95);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.c-snake-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .c-snake-card { opacity: 1; transform: none; transition: none; }
}

.c-snake-card__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(64px, 6vw, 94px);
  height: clamp(64px, 6vw, 94px);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: clamp(36px, 3.5vw, 59px);
  margin-bottom: var(--space-md);
  background: var(--color-cream);
}

.c-snake-card__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 64px);
  line-height: 0.95;
  margin-bottom: var(--space-sm);
}

.c-snake-card__body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.4;
  max-width: 430px;
}

/* Card variants — colors from Figma */
.c-snake-card--blue {
  background: var(--color-primary-500);
  color: var(--color-white);
}
.c-snake-card--blue .c-snake-card__num { color: var(--color-primary-500); }

.c-snake-card--plum {
  background: var(--color-plum-500);
  color: var(--color-white);
}
.c-snake-card--plum .c-snake-card__num { color: var(--color-plum-500); }

.c-snake-card--cyan {
  background: var(--color-cyan-500);
  color: var(--color-white);
}
.c-snake-card--cyan .c-snake-card__num { color: var(--color-cyan-500); }

/* Card placements — alle drie wat hoger zodat de volgende sectie dichter
   bij de swirl komt staan. Card 3 én callout via bottom-positie zodat ze
   onderaan netjes uitgelijnd zijn. */
.c-snake-card--1 { top: 12%; right: 7%; }
.c-snake-card--2 { top: 36%; left: 9%; }
.c-snake-card--3 { top: auto; bottom: 26%; right: 7%; }

/* "5 tot 100 mensen" callout — links onder, bottom-aligned met kaart 3
   zodat beide blokjes onderaan netjes op dezelfde hoogte staan. */
.c-snake-callout {
  position: absolute;
  left: calc(var(--grid-margin) + 100px);
  top: auto;
  bottom: 26%;
  z-index: 4;
  max-width: 420px;
}
.c-snake-callout__big {
  font-family: var(--font-display);
  font-size: var(--text-h-sm);
  line-height: 1.0;
  color: var(--color-ink);
  margin-bottom: var(--space-2xs);
}
.c-snake-callout__sub {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(14px, 1vw, 16px);
  color: var(--color-ink);
  line-height: 1.4;
}

@media (max-width: 900px) {
  /* Vanaf 900px en lager (alleen phone): sectie wordt auto-height, en de
     pin een flex-column met 40px gap tussen elementen. Swirl SVG blijft
     absoluut op de achtergrond. Padding-top en padding-bottom 50px. */
  .c-scroll-connector {
    height: auto;
    padding-top: 50px;
    padding-bottom: 50px;
  }
  /* Cta-emerge mag op mobiel niet meer overlappen — anders wordt de
     callout door de scarlet sectie opgeslokt. */
  #cta-emerge { margin-top: 0; }
  /* Swirl-sectie titel "In 3 stappen op je doek" naar text-h-lg (48px).
     Deze override staat NA de base rule (regel ~1956), zodat hij wint
     van de unscoped base. Homepage hero titel hier ook 48px herhaald
     zodat het in de 700-900px range ook geldt (anders pakt hij nog
     text-h-xl base). */
  .c-scroll-connector__header .c-section-header__title {
    font-size: var(--text-h-lg);
  }
  .c-hero__title { font-size: var(--text-h-lg); }
  .c-scroll-connector__pin {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    height: auto;
    padding: 0 var(--grid-margin);
  }

  /* Header in de flow, gecentreerd. */
  .c-scroll-connector__header {
    position: static;
    text-align: center;
    margin-bottom: 24px;
    max-width: none;
  }
  .c-scroll-connector__header .c-section-header__eyebrow,
  .c-scroll-connector__header .c-section-header__title {
    text-align: center;
  }

  /* Kaarten in normale flow (niet meer absolute). De flex-gap van 20px
     verzorgt de tussenruimte. Reveal-animatie blijft werken. */
  .c-snake-card {
    position: static;
    width: 100%;
    max-width: 420px;
    padding: 28px 22px;
    min-height: 0;
    border-radius: 32px;
    transform: translateY(20px) scale(0.97);
  }
  .c-snake-card.is-visible {
    transform: translateY(0) scale(1);
  }
  .c-snake-card--1,
  .c-snake-card--2,
  .c-snake-card--3 {
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
  }

  /* Compactere card-content. */
  .c-snake-card__num {
    width: 56px;
    height: 56px;
    font-size: 32px;
    margin-bottom: 14px;
  }
  .c-snake-card__title {
    font-size: 26px;
    margin-bottom: 10px;
  }
  .c-snake-card__body {
    font-size: 14px;
  }

  /* Callout in de flow onder card 3, dezelfde max-width als de kaarten
     zodat de tekst links uitlijnt met de linker rand van de kaarten. */
  .c-snake-callout {
    position: static;
    margin-top: 8px;
    width: 100%;
    max-width: 420px;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-snake-card { opacity: 1; transform: none; }
}

/* Floating elementen — z-index 3 zodat ze BOVEN de kaarten (z-index 2) liggen.
   In de connector-section: floaters tonen partly OP de kaarten zoals in Figma. */
.c-floaters {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.c-floater {
  position: absolute;
  width: clamp(40px, 6vw, 90px);
  height: auto;
  --parallax-y: 0px;
  animation: floatBob ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(12, 5, 56, 0.12));
  will-change: transform;
}

/* Original 10 floater positions (used in footer + andere kleine plekken) */
.c-floater--1  { top: 5%;  left: 5%;   animation-duration: 5s;   animation-delay: 0s; }
.c-floater--2  { top: 12%; right: 8%;  animation-duration: 6s;   animation-delay: 0.4s; width: clamp(35px, 4.5vw, 65px); }
.c-floater--3  { top: 30%; left: 3%;   animation-duration: 7s;   animation-delay: 1.2s; }
.c-floater--4  { top: 22%; right: 4%;  animation-duration: 5.5s; animation-delay: 0.8s; }
.c-floater--5  { top: 50%; left: 7%;   animation-duration: 6.5s; animation-delay: 1.6s; width: clamp(30px, 3.5vw, 55px); }
.c-floater--6  { top: 45%; right: 10%; animation-duration: 7.5s; animation-delay: 0.2s; width: clamp(30px, 3.5vw, 55px); }
.c-floater--7  { top: 68%; left: 12%;  animation-duration: 5s;   animation-delay: 2s; }
.c-floater--8  { top: 75%; right: 6%;  animation-duration: 6s;   animation-delay: 0.6s; width: clamp(40px, 5vw, 70px); }
.c-floater--9  { top: 88%; left: 4%;   animation-duration: 7s;   animation-delay: 1s; }
.c-floater--10 { top: 90%; right: 15%; animation-duration: 5.5s; animation-delay: 1.4s; width: clamp(30px, 4vw, 55px); }

/* Connector floaters — exacte pixel-grootes uit Figma (1512px frame),
   met +50% extra om groter te zijn dan basis-Figma (gebruiker wil ze flink
   prominenter zien). Geschaald via vw zodat ze proportioneel blijven. */
/* Float-iconen: fixed pixel-formaten. De swirl-sectie zit op een vaste
   max-width (1400px), dus de iconen blijven proportioneel. Geen vw of
   clamp meer nodig — gewoon pure px-waarden. */
.c-floater--f1  { top: 2%;  right: 30%; width: 155px; animation-duration: 6s;   animation-delay: 0s; }    /* lightning */
.c-floater--f2  { top: 14%; left: 10%;  width: 160px; animation-duration: 7s;   animation-delay: 0.6s; }   /* heart */
.c-floater--f3  { top: 10%; right: 28%; width: 155px; animation-duration: 5.5s; animation-delay: 1.2s; }   /* partyhat */
.c-floater--f4  { top: 24%; left: 28%;  width: 135px; animation-duration: 6.5s; animation-delay: 1.8s; }   /* corkscrew */
.c-floater--f5  { top: 27%; right: 4%;  width: 155px; animation-duration: 5s;   animation-delay: 0.3s; --base-rot: -25deg; }  /* paint palette */
.c-floater--f6  { top: 34%; right: 32%; width: 185px; animation-duration: 7.5s; animation-delay: 1s; }     /* discoball */
.c-floater--f7  { top: 40%; left: 38%;  width: 105px; animation-duration: 5.5s; animation-delay: 0.8s; }   /* sparkle/X */
.c-floater--f8  { top: 54%; left: 18%;  width: 175px; animation-duration: 6s;   animation-delay: 1.4s; }   /* apron */
.c-floater--f9  { top: 49%; right: 12%; width: 145px; animation-duration: 5s;   animation-delay: 2.2s; }   /* wine glass */
.c-floater--f10 { top: 67%; left: 38%;  width: 155px; animation-duration: 7s;   animation-delay: 1.6s; }   /* hand met drankje */

/* Floater-sizes vanaf het breakpoint waar de kaartjes stacken
   (max-width: 900px): ~50% van de desktop-waarden zodat de iconen
   de smalle viewport niet domineren. Voorheen stond dit op 700px,
   maar tussen 700-900px (waar de kaartjes al gestapeld staan) zagen
   de iconen er te groot uit. */
@media (max-width: 900px) {
  .c-floater--f1  { width: 75px; }
  .c-floater--f2  { width: 80px; }
  .c-floater--f3  { width: 75px; }
  .c-floater--f4  { width: 65px; }
  .c-floater--f5  { width: 75px; }
  .c-floater--f6  { width: 90px; }
  .c-floater--f7  { width: 50px; }
  .c-floater--f8  { width: 85px; }
  .c-floater--f9  { width: 70px; }
  .c-floater--f10 { width: 75px; }
}

/* Vanaf het breakpoint waar de 3 stappen-kaartjes in 1 column komen
   (max-width: 900px) verschuiven we de "centraal" geplaatste connector-
   floaters naar de zijranden. Op desktop is er ruimte tussen kaarten,
   op mobiel komen de iconen anders bovenop de gestackte kaartjes. */
@media (max-width: 900px) {
  .c-floater--f1  { right: 2%; left: auto; }                            /* lightning, was right 30% */
  .c-floater--f3  { right: 0%; left: auto; }                            /* partyhat,  was right 28% */
  .c-floater--f4  { left: 2%;  right: auto; }                           /* corkscrew, was left 28%  */
  .c-floater--f6  { right: 4%; left: auto; }                            /* discoball, was right 32% */
  .c-floater--f7  { left: 4%;  right: auto; }                           /* sparkle,   was left 38%  */
  /* palette, wijnglas, schort en bierglas 200px naar beneden zodat ze
     niet meer op de bovenste kaartjes komen liggen. Schort (f8) -80px
     (netto +120) en bierglas (f10) -15px (netto +185) om hoger te staan.
     Partyhat (f3) blijft waar hij is. */
  .c-floater--f5  { top: calc(27% + 200px); }                           /* paint palette */
  .c-floater--f8  { top: calc(54% + 120px); left: 0%;  right: auto; }   /* apron / schort */
  .c-floater--f9  { top: calc(49% + 200px); }                           /* wine glass */
  .c-floater--f10 { top: calc(67% + 185px); left: 4%; right: auto; }    /* hand met drankje */
}

@keyframes floatBob {
  0%, 100% { transform: translateY(calc(0px + var(--parallax-y)))    rotate(calc(var(--base-rot, 0deg) + 0deg)); }
  25%      { transform: translateY(calc(-14px + var(--parallax-y))) rotate(calc(var(--base-rot, 0deg) + 4deg)); }
  50%      { transform: translateY(calc(-20px + var(--parallax-y))) rotate(calc(var(--base-rot, 0deg) - 3deg)); }
  75%      { transform: translateY(calc(-10px + var(--parallax-y))) rotate(calc(var(--base-rot, 0deg) + 2deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .c-floater {
    animation: none !important;
  }
}

/* ---------- 11. HOW IT WORKS — 3 STEPS ---------- */

.c-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 900px) {
  .c-steps { grid-template-columns: 1fr; }
}

.c-step {
  text-align: center;
  padding: var(--space-md);
}

.c-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background: var(--color-primary-500);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-h-md);
  margin-bottom: var(--space-sm);
}

.c-step:nth-child(2) .c-step__number { background: var(--color-plum-500); }
.c-step:nth-child(3) .c-step__number { background: var(--color-scarlet-500); }

.c-step__title {
  font-family: var(--font-display);
  font-size: var(--text-h-sm);
  margin-bottom: var(--space-xs);
}

.c-step__body {
  font-weight: 300;
  color: var(--color-ink-60);
  line-height: 1.5;
}

/* ---------- 12. NUMBERS — STICKY SCROLL STACK ---------- */

.c-numbers-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}

/* Mobile-text staat in de cards-container (zie HTML). Op desktop is
   hij verborgen — daar gebruiken we de buitenste .c-numbers-stack__text. */
.c-numbers-stack__text--mobile { display: none; }

.c-numbers-stack__text {
  position: sticky;
  top: 125px;
  align-self: start;
  /* 100px ademruimte onder de description-paragraaf zodat de tekst niet
     meer tegen de bovenkant van de volgende lavender sectie plakt op
     desktop/mid views. Matcht ongeveer de breathing-room onder het
     laatste kaartje aan de rechterkant. */
  padding-bottom: 100px;
}

.c-numbers-stack__cards {
  display: flex;
  flex-direction: column;
  /* Padding-bottom: 200px — minimale ademruimte tussen het laatste
     kaartje en de volgende sectie. Section padding-bottom wordt
     op 0 gezet zodat het niet wordt opgestapeld. Mobile heeft een
     eigen override (160px) verderop. */
  padding-bottom: 200px;
}

/* Geen card-specifieke margin-top meer — alle 3 kaartjes hebben nu
   gelijke spacing (40vh via margin-bottom op niet-laatste cards) zodat
   de timing tussen 1→2 en 2→3 symmetrisch aanvoelt. */

.c-numbers-stack__card {
  position: sticky;
  /* Alle 3 cards delen dezelfde sticky-top (125px) zodat de bovenkant
     van card 1 visueel uitlijnt met de eyebrow tekst links (de eyebrow
     zit ~5px lager dan de container top door zijn line-height). Cards
     releasen tesamen wanneer parent's bottom hit deze waarde. Peek-stack
     via translateY-offset hieronder. */
  top: 125px;
  --y-offset: 0px;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  /* min-height 52vh — schaalt mee met viewport-hoogte zodat de cards
     proportioneel blijven op verschillende schermen. */
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Transform combineert de visuele y-offset (peek-stack) met de
     scroll-tied rotatie. translateY EERST zodat de rotatie rond de
     verschoven positie gebeurt. */
  transform: translateY(var(--y-offset)) rotate(var(--tilt, 0deg));
  transform-origin: center center;
  transition: none;
}

/* 50px peek-stack: card 2 stickt 50px onder card 1, card 3 stickt 50px
   onder card 2. Kleinere peek = kleiner unstick-venster, dus de drie
   kaartjes scrollen visueel "tesamen" weg. Het 50px peek is genoeg om
   alle drie te zien liggen op het einde, en de unstick-stagger is
   maar 100px scroll wat amper merkbaar is naast het ~200vh+ stuk
   waar alles stilstaat. */
/* Visuele peek-stack via translateY — alle cards delen sticky-top: 100px
   (gezet in base regel hierboven). Card 2 visueel 50px omlaag, card 3
   100px omlaag. Bij release gaan alle 3 tesamen omhoog terwijl de
   translateY-offsets de peek-structuur behouden. */
.c-numbers-stack__card:nth-of-type(1) { --y-offset: 0;     }
.c-numbers-stack__card:nth-of-type(2) { --y-offset: 50px;  }
.c-numbers-stack__card:nth-of-type(3) { --y-offset: 100px; }

.c-numbers-stack__card:not(:last-child) {
  /* Margin-bottom 0 (was 40vh) — cards staan nu vlak na elkaar in flow,
     waardoor card 3 zijn sticky-positie veel sneller bereikt nadat card 2
     stickt. Effect: card 1 stickt → card 2 landt direct erop → card 3
     landt direct erop → en pas DAN scroll je verder met de hele stack
     samen. Voorheen zat er 40vh "lege ruimte" in flow tussen elk pair,
     waardoor je lang scrolde met alleen card 1 + card 2 op het scherm
     en card 3 nog ver onderaan stond te wachten. */
  margin-bottom: 0;
}

/* Tablet (901-1300): cards minder lang/langwerpig dan desktop omdat
   de cards-kolom op tablet smaller is, waardoor 60vh hoogte een
   te smalle, lange verhouding geeft. 45vh maakt ze breder dan hoog
   en sluit beter aan bij de desktop-verhouding. */
@media (min-width: 901px) and (max-width: 1300px) {
  .c-numbers-stack__card {
    /* Tablet: zelfde fixed pixel-hoogte als desktop voor consistente
       look (geen viewport-scaling). */
    min-height: 480px;
  }
}

.c-numbers-stack__card--primary { background: var(--color-primary-500); color: var(--color-cream); }
.c-numbers-stack__card--plum    { background: var(--color-plum-500); color: var(--color-cream); }
.c-numbers-stack__card--cyan    { background: var(--color-cyan-500); color: var(--color-cream); }
.c-numbers-stack__card--scarlet { background: var(--color-scarlet-500); color: var(--color-cream); }

.c-numbers-stack__icon {
  align-self: flex-end;
  width: clamp(80px, 8vw, 130px);
  height: auto;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}

/* Per-kaart aanpassingen:
   - Alle drie icons 30px naar rechts (translateX, eet in op padding)
   - Heart specifiek: 40px extra naar rechts (totaal 70) én 40px omhoog
   - Star specifiek: 50px extra naar rechts (totaal 80) én 10px omhoog
   - Heart en star aanzienlijk groter dan de palette */
.c-numbers-stack__icon {
  transform: translateX(30px);
}
.c-numbers-stack__card--plum .c-numbers-stack__icon {
  transform: translate(70px, -40px);
  width: clamp(180px, 14vw, 220px);
}
.c-numbers-stack__card--cyan .c-numbers-stack__icon {
  transform: translate(58px, -20px);
  width: clamp(180px, 14vw, 220px);
}

.c-numbers-stack__big {
  font-family: var(--font-display);
  font-size: var(--text-h-xl);
  line-height: 1.0;
  margin-top: auto;
}

.c-numbers-stack__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-lg);
  margin-top: var(--space-sm);
  max-width: 380px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .c-numbers-stack { grid-template-columns: 1fr; gap: 0; }
  /* Op mobiel: desktop-text verborgen, mobile-text getoond binnen
     cards-container. */
  .c-numbers-stack > .c-numbers-stack__text {
    display: none;
  }
  /* Mobile-text als eerste sticky element binnen cards-container.
     Sticky top:110 met min-height = (top_card - top_text) + card_h
     = (443 - 110) + 32vh = 333px + 32vh. Hierdoor bereikt het
     bottom-edge tegelijk met het laatste kaartje het einde van
     z'n sticky-parent → text en cards releasen synchroon.
     z-index: 1 = lager dan cards (default 0 maar met transform
     krijgen ze hun eigen stacking-context BOVEN de text op basis
     van source-order). */
  .c-numbers-stack__text--mobile {
    display: block;
    position: sticky;
    top: 110px;
    z-index: 0;
    /* Spacer = (card-top - 110) + card-hoogte = 200 + 320. Houdt tekst en
       kaartjes in sync nu de kaartjes een vaste hoogte van 320px hebben. */
    min-height: 520px;
    background: var(--color-cream);
  }
  /* Op mobiel: grijze subtitle verbergen (geeft de titel + kaartjes meer
     ademruimte en houdt alles leesbaar). */
  .c-numbers-stack__text--mobile .c-section-header__sub { display: none; }
  /* Titel links uitlijnen (geen centreer-indent) en iets compacter zodat hij
     boven de kaartjes past en goed leesbaar blijft. */
  .c-numbers-stack__text--mobile .c-section-header,
  .c-numbers-stack__text--mobile .c-section-header__title {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    text-align: left;
  }
  .c-numbers-stack__text--mobile .c-section-header__title {
    font-size: clamp(2rem, 8.5vw, 2.6rem);
  }
  /* Cards op mobiel: vh-gebonden hoogte (32vh) en sticky-top 470px
     zodat de tekst boven de cards leesbaar blijft als ze beginnen
     te plakken. */
  /* Vaste, GELIJKE hoogte voor alle 3 de kaartjes op mobiel. Cruciaal: met
     min-height in vh worden kaartjes met een langer label hoger, waardoor ze
     niet meer tegelijk loslaten en de bovenste (blauwe) als eerste verdwijnt.
     Een vaste hoogte die het langste label bevat houdt ze gelijk -> ze
     scrollen samen weg met de peek-structuur intact. */
  .c-numbers-stack__card {
    min-height: 320px;
    height: 320px;
    top: 310px;
  }
  /* Hart- en ster-icoon op mobiel even klein als het palet-icoon (desktop is
     180-220px). Anders pakt het grote icoon te veel verticale ruimte, duwt het
     de tekst over de vaste kaarthoogte heen en plakt het label tegen de
     onderkant. Klein icoon = inhoud past = consistente padding onderaan. */
  .c-numbers-stack__card--plum .c-numbers-stack__icon,
  .c-numbers-stack__card--cyan .c-numbers-stack__icon {
    width: 100px;
    transform: translate(18px, -8px);
  }
  .c-numbers-stack__card:nth-of-type(2) { --y-offset: 70px; }
  .c-numbers-stack__card:nth-of-type(3) { --y-offset: 140px; }
  /* Op mobiel: 160px max afstand tussen laatste kaartje en volgende
     sectie. */
  .c-numbers-stack__cards {
    padding-bottom: 160px;
  }
  /* padding-bottom: 100vh staat nu in de base regel, geldt ook hier. */

  /* "Honderden activiteiten, duizenden tevreden gasten" links-uitlijnen
     op de eyebrow ("Een paar cijfers") — base rule heeft margin-inline:auto
     wat het blok centreert; hier expliciet 0 zodat hij echt links plakt. */
  .c-numbers-stack__text .c-section-header__title {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
  }

  /* "Bedrijven die kozen voor Pigment" — inline style op de tweede header
     zegt margin-top: 250px (desktop). Op mobiel willen we 145px tussen
     de laatste review en de eyebrow. */
  #reviews-klanten .c-review-grid + .c-section-header {
    margin-top: 145px !important;
  }

  /* Onder "Onze klanten" header: 60px tot aan de marquee-pills. */
  #reviews-klanten .c-marquee {
    margin-top: 60px;
    padding-top: 0;
  }

  /* Marquee pills op mobiel — middenweg tussen desktop (groot) en
     het eerdere kleine mobile-formaat. Hogere specificity nodig om
     desktop base-rules te overschrijven. */
  #reviews-klanten .c-marquee__item {
    padding: 8px 17px 8px 8px;
    font-size: var(--text-sm);
    gap: 10px;
  }
  #reviews-klanten .c-marquee__logo {
    width: 40px;
    height: 40px;
  }

  /* Current page in navbar: inline style geeft hem op desktop een
     primary-500 pill. Op mobiel: geen pill (transparante background)
     maar de titel zelf in primary-500 blauw zodat hij visueel opvalt
     in het hamburger-menu. */
  .c-navbar__link[style*="primary-500"],
  .c-navbar__link[style*="background"] {
    background: transparent !important;
    color: var(--color-primary-500) !important;
  }

  /* ---------- FOOTER (mobiel) ---------- */
  /* De grid-template-columns: 1fr 1fr override + intro full-row + 100% width
     voor newsletter en CTA staan verderop in dit bestand (na de .c-footer__top
     base rule), zodat ze de earlier-source 1fr-mobile-rule overschrijven. */

  /* Pigment-logo + "Heel België" naast elkaar in 2 kolommen, Contact eronder
     full-width op rij 2. Identieke grid-template als .c-footer__top zodat
     col-2 op exacte x-positie start als "Info" erboven. */
  .c-footer__addresses {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-md);
  }
  .c-footer__addresses > :nth-child(1) { grid-column: 1; grid-row: 1; }     /* logo */
  .c-footer__addresses > :nth-child(2) { grid-column: 2; grid-row: 1; }     /* Heel België */
  .c-footer__addresses > :nth-child(3) { grid-column: 1 / -1; grid-row: 2; }/* Contact */
  /* Logo: vaste pixel-hoogte (80px) + auto width, zodat de variable
     em-based hoogte niet de kolombreedte beïnvloedt en de kolom-grid
     deterministisch gerenderd wordt. */
  .c-footer__logo {
    height: 80px;
    max-height: 80px;
    width: auto;
  }

  /* Copyright op mobiel: flex column ipv 2 kolommen. Opacity uit op de
     container zodat we de Mary-balk hieronder volledig opaak kunnen
     maken; de eerste © regel krijgt de opacity individueel. */
  .c-footer__copyright {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    opacity: 1;
  }
  .c-footer__copyright p:first-child {
    opacity: 0.7;
    margin-bottom: var(--space-sm);
  }
  /* Mary-credit op zwarte balk helemaal onderaan, ECHT full-bleed via
     100vw + de centering-truc (margin-left/right calc(50% - 50vw)).
     Dit overschrijft elke parent-padding/max-width zodat de balk altijd
     viewport-breed is, eggshell tekst, full opacity. */
  .c-footer__copyright p:last-child {
    background: #000;
    color: var(--color-cream);
    opacity: 1;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: calc(-1 * var(--space-md));
    padding: 4px var(--grid-margin);
    text-align: center;
    font-size: var(--text-sm);
    line-height: 1.2;
    box-sizing: border-box;
  }
  .c-footer__copyright p:last-child a {
    color: var(--color-cream);
  }

  /* Onder de pills (marquee) 60px tot aan de volgende sectie. Sitewide
     zit de section-padding-bottom rond 80-120px, dus we klemmen 'm hier
     naar 60px voor #reviews-klanten. */
  #reviews-klanten {
    padding-bottom: 60px;
  }
  /* Boek-nu pagina specifiek: meer padding-bottom (110px) onder de
     reviews-klanten sectie omdat de footer-hero daar extra ruimte
     vraagt op mobile. */
  body.c-page-boek #reviews-klanten {
    padding-bottom: 110px;
  }
}

/* ---------- 12B. REVIEW CARDS — 3-col grid (oude number-card stijl) ---------- */

.c-review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

/* Tablet (≤1300) en mobile (≤900): reviews onder elkaar in 1 kolom,
   maar links/rechts geschrankd voor een speels-gestapeld effect i.p.v.
   strak in een kolom. Cards krijgen een desktop-achtige verhouding
   (smaller width zoals op desktop in een 3-koloms grid) met alternerende
   left/right alignment via margin-left/right auto. */
@media (max-width: 1300px) {
  .c-review-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .c-review-card {
    /* ~33% width = vergelijkbaar met desktop's 3-col grid waarbij elk
       kaartje ongeveer een derde inneemt. clamp zorgt dat ze leesbaar
       blijven op smallere viewports. */
    max-width: clamp(280px, 38%, 450px);
  }
  .c-review-card:nth-child(odd) {
    margin-right: auto;
    margin-left: 0;
  }
  .c-review-card:nth-child(even) {
    margin-left: auto;
    margin-right: 0;
  }
}

/* Tablet only (901-1300): 2 kolommen met 20px gap tussen links/rechts
   en extra padding aan de zijkanten. Cards alle 3 EXACT 450px hoog
   (fixed height) zodat ze 100% identiek zijn — eerder min-height liet
   blue groter worden door langere tekst. Card 2 (pink) krijgt 100px
   stagger-offset naar onder. */
@media (min-width: 901px) and (max-width: 1300px) {
  .c-review-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 0 var(--space-lg);
  }
  .c-review-card {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: 360px;
  }
  .c-review-card:nth-child(2) {
    margin-top: 100px;
  }
}

/* Mobile (≤900): cards iets breder voor leesbaarheid op smaller viewports.
   Fixed height 320px zodat de drie reviews even groot ogen, niet
   variabel met content. */
@media (max-width: 900px) {
  .c-review-card {
    max-width: 75%;
    height: 320px;
  }
}

/* Small phone (≤480): geen stagger meer, reviews recht onder elkaar
   op 100% width — leesbaarder op het smalste scherm. Height auto
   zodat content gewoon flowt zonder lege ruimte. */
@media (max-width: 480px) {
  .c-review-card {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    height: auto;
  }
}

.c-review-card {
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: 320px;
}

.c-review-card--primary { background: var(--color-primary-500); color: var(--color-cream); }
.c-review-card--plum    { background: var(--color-plum-500);    color: var(--color-cream); }
.c-review-card--cyan    { background: var(--color-cyan-500);    color: var(--color-cream); }
.c-review-card--lavender { background: var(--color-lavender-500); color: var(--color-ink); }
.c-review-card--cream   { background: var(--color-cream-2, #FFF7E8); color: var(--color-ink); border: 1px solid rgba(12, 5, 56, 0.08); }
.c-review-card--ink     { background: var(--color-ink); color: var(--color-cream); }
/* Sterren-rij in alle review-cards: eggshell zodat ze opvallen tegen de
   gekleurde achtergronden. */
.c-review-card--primary .c-review-card__rating,
.c-review-card--plum    .c-review-card__rating,
.c-review-card--cyan    .c-review-card__rating { color: var(--color-cream); }

.c-review-card__rating {
  font-size: var(--text-h-md);
  letter-spacing: 0;
  line-height: 1;
}

.c-review-card__quote {
  font-size: var(--text-lg);
  line-height: 1.4;
  font-weight: 500;
  flex: 1;
}

.c-review-card__author {
  font-size: var(--text-base);
  opacity: 0.85;
  font-weight: 500;
}

/* ---------- 13. ARTICLE / REVIEW CARD ---------- */

.c-articles {
  display: grid;
  /* 4 even kolommen voor de 4 Paint & Sip soorten op /praktisch. */
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}

@media (max-width: 1100px) {
  .c-articles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .c-articles { grid-template-columns: 1fr; }
}

.c-article-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  text-decoration: none;
  color: var(--color-ink);
}

.c-article-card__image {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--color-cream-2);
  position: relative;
}

.c-article-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-inout);
}

.c-article-card:hover .c-article-card__image img {
  transform: scale(1.04);
}

.c-article-card__tag {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  background: var(--color-white);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
}

.c-article-card__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-h-xs);
  line-height: 1.2;
}

/* ---------- Expandable variant (gebruikt als <details>) ---------- */
.c-article-card--expandable {
  display: flex;
  flex-direction: column;
  gap: 0;
  /* details default styling resetten */
  border: none;
  background: transparent;
}
.c-article-card--expandable > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.c-article-card--expandable > summary::-webkit-details-marker { display: none; }
.c-article-card--expandable > summary::marker { content: ''; }

.c-article-card__toggle {
  margin-top: var(--space-xs);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-primary-700);
  font-weight: 500;
  align-self: flex-start;
  transition: color var(--dur-fast);
}
.c-article-card--expandable > summary:hover .c-article-card__toggle { color: var(--color-primary-900); }
.c-article-card__toggle svg { transition: transform var(--dur-base) var(--ease-inout); }
.c-article-card--expandable[open] > summary .c-article-card__toggle svg { transform: rotate(180deg); }
.c-article-card--expandable[open] > summary .c-article-card__toggle-label::after {
  content: 'inklappen';
}
.c-article-card--expandable[open] > summary .c-article-card__toggle-label { font-size: 0; }
.c-article-card--expandable[open] > summary .c-article-card__toggle-label::after { font-size: var(--text-sm); }

.c-article-card__details {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-cream);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-ink);
}
.c-article-card__details p {
  margin: 0 0 var(--space-xs);
}
.c-article-card__details ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.c-article-card__details li {
  padding-left: 18px;
  position: relative;
}
.c-article-card__details li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-ink);
  opacity: 0.4;
}
/* Op /praktisch: tekst zonder linker-inspringing (container-padding + bullet-indent weg). */
#what-to-paint .c-article-card__details { padding-left: 0; }
#what-to-paint .c-article-card__details li { padding-left: 0; }
#what-to-paint .c-article-card__details li::before { display: none; }

/* ---------- 14. MARQUEE — klantenlogo's ---------- */

.c-marquee {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  overflow: hidden;
  padding: var(--space-md) 0;
  user-select: none;
}

.c-marquee__row {
  display: flex;
  /* GEEN row-gap — de gap wordt verzorgd door margin-right op elk item.
     Reden: voor een seamless loop met translateX(-50%) moet de totale
     breedte exact 2× de eerste-helft breedte zijn. Met flex-gap mist de
     trailing gap na het laatste item, waardoor 50% in het midden van de
     virtuele "gap-na-laatste" valt en je een micro-jump ziet bij elke
     loop. Met margin-right per item zit de trailing gap ingebakken. */
  width: max-content;
  animation: marquee 40s linear infinite;
}

.c-marquee__row--reverse {
  animation: marquee-reverse 35s linear infinite;
}

/* 3 kopieën van de items i.p.v. 2 → animatie translateert exact 1 set
   (= 33.33%) zodat set-2 op de positie van set-1 belandt en de loop
   visueel identiek herstart. Met 3 kopieën blijft er altijd content
   rechts in beeld, ook op brede monitoren waar de set-breedte alleen
   te smal zou zijn voor een -50% loop. */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-33.3333%); }
}

@keyframes marquee-reverse {
  from { transform: translateX(-33.3333%); }
  to { transform: translateX(0); }
}

.c-marquee__item {
  background: var(--color-scarlet-100);
  border-radius: var(--radius-full);
  padding: 12px 24px 12px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  font-weight: 500;
  color: var(--color-ink);
  /* Trailing gap zit op elk item — incl. het laatste — zodat de eerste
     helft van de rij exact half-totaal is en de loop seamless aanvoelt. */
  margin-right: var(--space-sm);
}

.c-marquee__logo {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-ink);
  overflow: hidden;
  flex-shrink: 0;
}

.c-marquee__logo img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

/* ---------- 15. INSTAGRAM GRID ---------- */

.c-instagram {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2xs);
}

/* Instagram tiles blijven 4-naast-elkaar op alle viewports inclusief
   mobile en small phone — gebruiker wil de 4 beelden behouden in 1 rij
   ipv 2x2 grid. Tiles schalen mee met viewport-breedte. */

.c-instagram__tile {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-cyan-500);
}

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

/* Eens Behold (of een andere embed) is gekoppeld via de admin,
   krijgt .c-instagram de modifier --connected en gedraagt zich als
   single-column container — de embedded widget regelt zelf zijn 4-kolom layout. */
.c-instagram--connected {
  display: block;
}
.c-instagram--connected behold-widget {
  display: block;
  width: 100%;
}

/* ---------- 16. VIDEO EXPLAINER ---------- */

.c-video {
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: var(--color-ink);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.c-video__placeholder {
  color: var(--color-cream);
  font-family: var(--font-display);
  font-size: var(--text-h-md);
  text-align: center;
}

.c-video__play {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: var(--radius-full);
  background: var(--color-scarlet-500);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-base) var(--ease-spring);
}

.c-video:hover .c-video__play {
  transform: scale(1.1);
}

/* ---------- 17. FOOTER ---------- */

.c-footer {
  background: var(--color-primary-500);
  color: var(--color-white);
  padding: var(--space-xl) var(--grid-margin) var(--space-md);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: relative;
  overflow: hidden;
  /* z-index 3 zorgt dat de footer BOVEN de bleed-to-footer sectie (z-2) paint.
     Zo zijn de afgeronde blauwe bovenhoeken van de footer mooi zichtbaar over
     de cream/grid sectie eronder ipv andersom. */
  z-index: 3;
}

/* Floaters scoped to footer — sit behind text, ignore pointer events */
.c-footer .c-floaters {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.c-footer .c-footer__inner { position: relative; z-index: 1; }
.c-footer .c-floater {
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.15));
  opacity: 0.9;
}

@media (max-width: 600px) {
  .c-footer { border-radius: 32px 32px 0 0; }
}

.c-footer__inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.c-footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-md);
  /* Verlaagd van --space-xl (152px) → 60px: minder lege ruimte boven de
     "Liever bellen?" big-title in de footer. */
  margin-bottom: 60px;
}

@media (max-width: 900px) {
  /* Mobiele footer-grid: intro full-width op rij 1, dan Ontdek + Info
     naast elkaar in 2 kolommen op rij 2. minmax(0, 1fr) gebruikt
     zodat columns identiek zijn aan c-footer__addresses hieronder
     (en "Info" + "Heel België" perfect uitlijnen). */
  .c-footer__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: var(--space-md);
    margin-bottom: 40px;
  }
  .c-footer__intro {
    grid-column: 1 / -1;
  }
  /* Newsletter, intro paragraaf en CTA-knop full-width binnen hun kolom. */
  .c-footer__intro p,
  .c-footer__newsletter {
    max-width: 100%;
    width: 100%;
  }
  .c-footer__intro .c-button--quote {
    width: 100%;
    justify-content: space-between;
  }
}

.c-footer__intro p {
  font-size: var(--text-lg);
  font-weight: 300;
  margin-bottom: var(--space-sm);
  max-width: 460px;
}

/* Newsletter signup — onder de "Boek je activiteit" CTA in de footer.
   Geen pill, gewoon een onderlijn met placeholder als tekst en een klein
   cirkel-knopje rechts om te versturen. Minimalistisch, sluit qua stijl aan
   bij de rest van de footer-typografie. */
.c-footer__newsletter {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-sm);
  /* Even breed als de intro-paragraaf erboven (max-width 460px). */
  max-width: 460px;
}
.c-footer__newsletter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 252, 248, 0.45);
  padding: 8px 0;
  transition: border-color 0.2s ease;
}
.c-footer__newsletter-row:focus-within {
  border-bottom-color: var(--color-cream);
}
.c-footer__newsletter-input {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--color-cream);
  padding: 0;
  font: inherit;
  font-size: var(--text-base);
  outline: none;
  min-width: 0;
}
.c-footer__newsletter-input::placeholder {
  color: rgba(255, 252, 248, 0.55);
  font-weight: 300;
}
.c-footer__newsletter-submit {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-cream);
  color: var(--color-ink);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.c-footer__newsletter-submit:hover {
  background: var(--color-ink);
  color: var(--color-cream);
}
.c-footer__newsletter-submit:active {
  transform: scale(0.95);
}
.c-footer__newsletter-submit svg {
  width: 14px;
  height: 14px;
}
.c-footer__newsletter-success {
  display: none;
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-cream);
  opacity: 0.95;
}
.c-footer__newsletter.is-success .c-footer__newsletter-success {
  display: block;
}

.c-footer__col h4 {
  font-family: var(--font-display);
  font-size: var(--text-h-xs);
  margin-bottom: var(--space-sm);
  font-weight: 400;
  color: var(--color-cream);
}

.c-footer__col ul li {
  margin-bottom: var(--space-2xs);
}

.c-footer__col a {
  font-size: var(--text-base);
  opacity: 0.85;
}
.c-footer__col a:hover { opacity: 1; text-decoration: underline; }

.c-footer__big {
  font-family: var(--font-display);
  font-size: var(--text-h-xl);
  line-height: 1.0;
  color: var(--color-cream);
  margin-bottom: var(--space-md);
  text-wrap: balance;
}

.c-footer__addresses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 700px) {
  .c-footer__addresses { grid-template-columns: 1fr; }
}

.c-footer__address strong {
  font-weight: 700;
  display: block;
  margin-bottom: var(--space-2xs);
}

/* Footer logo (vervangt het oude Gent-adres-blok). Hoogte = 6em wat
   ongeveer overeenkomt met 4 regels tekst (line-height 1.5 × 4 lines).
   Tekstblok ernaast = "Heel België" + 3 regels = 4 lines, dus ~6em hoog. */
.c-footer__address--logo {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.c-footer__logo {
  width: auto;
  height: 6em;
  max-height: 6em;
  object-fit: contain;
  object-position: left center;
  display: block;
}
@media (max-width: 700px) {
  .c-footer__logo { height: 5em; max-height: 5em; }
}

.c-footer__address {
  font-size: var(--text-base);
  opacity: 0.85;
  line-height: 1.5;
}

.c-footer__copyright {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  opacity: 0.7;
}

@media (max-width: 600px) {
  .c-footer__copyright { flex-direction: column; gap: var(--space-xs); }
}

/* ---------- 18. ANIMATIONS / IN-VIEW ---------- */

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-slow) var(--ease-inout),
              transform var(--dur-slow) var(--ease-inout);
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 19. FORMS ---------- */

.c-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 700px;
  margin: 0 auto;
}

.c-form {
  /* min-width:0 zodat een intrinsiek-breed veld (iOS date/number) de
     flex-container niet breder dan het scherm kan trekken. */
  min-width: 0;
}

.c-form__row {
  display: grid;
  /* minmax(0, 1fr) i.p.v. 1fr: laat de kolom krimpen onder de min-content
     van native date/number-inputs, anders overflow op gsm. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-sm);
}

@media (max-width: 600px) {
  .c-form__row { grid-template-columns: minmax(0, 1fr); }
}

.c-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.c-form__label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-ink);
}

.c-form__input,
.c-form__textarea,
.c-form__select {
  width: 100%;
  /* min-width:0 + max-width:100%: native date/number-inputs op iOS krimpen
     anders niet mee en veroorzaken horizontale overflow. */
  min-width: 0;
  max-width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease-inout),
              box-shadow var(--dur-fast) var(--ease-inout);
}

.c-form__textarea { min-height: 140px; resize: vertical; }

/* iOS Safari geeft native date/number-inputs een intrinsieke breedte die
   niet meekrimpt. appearance:none + block-display dwingt ze binnen het veld. */
.c-form__input[type="date"],
.c-form__input[type="number"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
}

/* Native <select> rendert op sommige browsers hoger/lager dan een tekstveld
   omdat het zijn eigen chrome tekent. appearance:none dwingt hetzelfde
   box-model (padding/height) als .c-form__input af; custom chevron als arrow. */
.c-form__select {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none' stroke='%230A1A3C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 7l4.5 4.5L13.5 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.c-form__input:focus,
.c-form__textarea:focus,
.c-form__select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(72, 116, 255, 0.2);
}

.c-form__check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.c-form__check input {
  width: 20px;
  height: 20px;
  accent-color: var(--color-primary-500);
}

.c-form__submit { align-self: flex-start; }

.c-form__hint {
  font-size: var(--text-sm);
  color: var(--color-ink-60);
}

/* ---------- 20. FAQ ACCORDION ---------- */

.c-faq {
  max-width: 800px;
  margin: 0 auto;
}

.c-faq__item {
  border-top: 1px solid var(--color-line);
}
.c-faq__item:last-child { border-bottom: 1px solid var(--color-line); }

.c-faq__summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-sm) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-ink);
}

.c-faq__summary::-webkit-details-marker { display: none; }

.c-faq__summary::after {
  content: '+';
  font-size: var(--text-h-xs);
  font-weight: 400;
  transition: transform var(--dur-fast) var(--ease-inout);
}

.c-faq__item[open] .c-faq__summary::after {
  content: '–';
}

.c-faq__body {
  padding: 0 0 var(--space-sm);
  color: var(--color-ink-60);
  line-height: 1.6;
  max-width: 700px;
}

/* ----- Legal / prose pages — privacy, algemene voorwaarden, cookies ----- */

.c-prose {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-ink);
}
.c-prose h2 {
  font-family: var(--font-display);
  font-size: var(--text-h-md);
  margin-top: var(--space-md);
  margin-bottom: var(--space-2xs);
  line-height: 1.05;
}
.c-prose h2:first-child { margin-top: 0; }

/* Legal pages (algemene voorwaarden, privacy, cookies) — meer ademruimte
   tussen secties + de paragraaf boven elke h2-titel. Gescoped via
   [data-cms-legal] zodat dit alleen op de 3 legal-pages werkt. */
.c-prose[data-cms-legal] section {
  margin-top: 64px;
}
.c-prose[data-cms-legal] section:first-of-type {
  margin-top: 40px;
}
.c-prose[data-cms-legal] section h2 {
  margin-top: 0;
  margin-bottom: 18px;
}
.c-prose[data-cms-legal] header + section {
  margin-top: 48px;
}
.c-prose h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-lg);
  margin-top: var(--space-sm);
  margin-bottom: var(--space-2xs);
}
.c-prose p { margin-bottom: var(--space-sm); }
.c-prose ul, .c-prose ol {
  margin-bottom: var(--space-sm);
  padding-left: 1.4em;
}
.c-prose ul { list-style: disc; }
.c-prose ol { list-style: decimal; }
.c-prose li { margin-bottom: 0.4em; }
.c-prose a {
  color: var(--color-primary-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.c-prose strong { font-weight: 700; }
.c-prose .c-prose__placeholder {
  display: inline-block;
  background: rgba(255, 230, 187, 0.5);
  padding: 0 6px;
  border-radius: 4px;
  font-style: italic;
  color: rgba(14, 5, 70, 0.65);
}
.c-prose .c-prose__updated {
  display: block;
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  color: rgba(14, 5, 70, 0.55);
}

/* ----- Bewaartermijnen / data-tabel in privacy.html ----- */
.c-prose .c-prose__table {
  width: 100%;
  margin: var(--space-md) 0;
  border-collapse: collapse;
  font-size: var(--text-sm);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  overflow: hidden;
}
.c-prose .c-prose__table thead {
  background: var(--color-cream-2);
}
.c-prose .c-prose__table th,
.c-prose .c-prose__table td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-line);
}
.c-prose .c-prose__table th {
  font-weight: 700;
  color: var(--color-ink);
}
.c-prose .c-prose__table tbody tr:last-child td {
  border-bottom: 0;
}
.c-prose .c-prose__table tbody tr:nth-child(even) {
  background: rgba(248, 242, 229, 0.4);
}
@media (max-width: 640px) {
  .c-prose .c-prose__table { font-size: 13px; }
  .c-prose .c-prose__table th,
  .c-prose .c-prose__table td { padding: 8px 10px; }
}

/* ----- Cookie banner — GDPR opt-in (België-conform) -----

   Standaard worden er GEEN niet-essentiële cookies geplaatst. De banner
   blijft in beeld tot de gebruiker een keuze maakt (Akkoord of Alleen
   essentieel). Pas bij "Akkoord" wordt Google Analytics geladen. Keuze
   wordt opgeslagen in localStorage onder "pigment-cookie-choice". */

/* ============== Schilderijen GRID-cards op landing ============== */
.c-collection-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  /* Extra ruimte onder de section-header (Onze collecties / Kies een stijl)
     zodat het ademt zoals op de andere pagina's met section-header + content. */
  margin-top: var(--space-lg);
}
.c-collection-card {
  position: relative; display: block;
  aspect-ratio: 4/5; border-radius: 24px;
  overflow: hidden; text-decoration: none;
  background: var(--color-ink);
  transition: transform 250ms var(--ease-spring), box-shadow 250ms;
}
.c-collection-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(14,5,70,0.25); }
.c-collection-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-collection-card__placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--color-cream);
  background: var(--color-primary-500);
}
.c-collection-card:has(img:not([hidden])) .c-collection-card__placeholder { display: none; }
/* Mix single-image: 1 centered image without lightbox */
.c-mix-image-wrapper {
  max-width: 720px; margin: var(--space-md) auto 0;
  border-radius: 24px; overflow: hidden;
}
.c-mix-image-wrapper img {
  width: 100%; height: auto; display: block;
}

/* ============== Detail-page Gallery Hero (Classic/Portret/Puzzel) ==============
   Volgt het patroon van c-hero--scarlet (sticky + fade-on-scroll), maar
   gebruikt de geüploade categorie-afbeelding als full-bleed cover i.p.v.
   het blauwe vlak. De c-hero--scarlet kleur staat als fallback achter het
   image-element, voor het korte moment voordat de afbeelding geladen is. */
.c-hero--gallery {
  position: relative; overflow: hidden; padding: 0;
  /* Centreer de fallback-titel verticaal én horizontaal in het hero-vlak. */
  align-items: center; justify-content: center;
}
.c-hero--gallery .c-hero--gallery__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Hidden-attribuut moet altijd winnen van bovenstaande display-regels,
   anders verschijnt de broken-image icoon van de lege <img>. */
.c-hero--gallery .c-hero--gallery__img[hidden] { display: none; }

/* Fallback-titel — getoond wanneer er nog geen hero-afbeelding ingesteld
   is voor deze categorie. Cms-loader.js verbergt deze zodra de img
   geladen is. Stijl volgt de andere display-titels op de site. */
.c-hero--gallery .c-hero--gallery__title {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-size: var(--text-h-lg);
  color: var(--color-cream);
  text-transform: uppercase;
  text-align: center;
  margin: 0; padding: 0 var(--space-md);
  letter-spacing: 0.02em;
  line-height: 1.05;
}

.c-hero--gallery .c-hero--gallery__back {
  position: absolute; z-index: 2;
  top: calc(var(--nav-height) + var(--nav-top) + 16px);
  left: 24px;
  display: inline-flex; align-items: center;
  padding: 10px 18px;
  background: rgba(14, 5, 70, 0.55);
  color: var(--color-cream);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 200ms;
}
.c-hero--gallery .c-hero--gallery__back:hover {
  background: rgba(14, 5, 70, 0.85);
}
@media (max-width: 700px) {
  .c-hero--gallery .c-hero--gallery__back {
    left: 16px;
    font-size: 13px;
    padding: 8px 14px;
  }
}

/* Instagram-callout centered variant: gebruikt onder de c-section-header
   eyebrow+titel, knop staat alleen gecentreerd zonder de paragraph. */
.c-instagram-callout--center {
  display: flex; justify-content: center;
  margin-top: var(--space-md);
}

/* Galerij met extra margin onder de section-header eyebrow+titel. */
.c-collection-gallery--spaced {
  margin-top: var(--space-lg);
}

/* ============== Detail-pagina hero (oude variant, nog steeds geldig) ============== */
.c-detail-hero {
  position: relative;
  padding: var(--space-md);
  max-width: 1400px; margin: 0 auto;
}
.c-detail-hero__back {
  display: inline-block; margin-bottom: var(--space-sm);
  color: var(--color-ink); text-decoration: none;
  font-size: var(--text-sm); font-weight: 600;
}
.c-detail-hero__back:hover { text-decoration: underline; }
.c-detail-hero__media {
  position: relative; margin: 0; border-radius: 28px;
  overflow: hidden; aspect-ratio: 16/8; background: var(--color-ink);
}
.c-detail-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-detail-hero__title {
  position: absolute; bottom: var(--space-lg); left: var(--space-lg);
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  color: var(--color-cream);
  text-shadow: 0 6px 24px rgba(14,5,70,0.5);
  margin: 0;
}

/* ============== Schilderijen-pagina (QR-code landing) ============== */
.c-instagram-callout {
  display: flex; flex-wrap: wrap; gap: var(--space-md);
  align-items: center; justify-content: center;
  max-width: 720px; margin: 0 auto;
  text-align: center;
}
.c-instagram-callout__text {
  font-family: var(--font-display);
  font-size: var(--text-h-md);
  color: var(--color-ink);
  margin: 0;
}
.c-collection-block { margin-bottom: var(--space-xl); }
.c-collection-block:last-child { margin-bottom: 0; }
.c-collection-block__hero {
  position: relative; margin: 0 0 var(--space-md);
  border-radius: 24px; overflow: hidden;
  aspect-ratio: 16/7; background: var(--color-cream-2);
}
.c-collection-block__hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-collection-block__title {
  position: absolute; bottom: var(--space-md); left: var(--space-md);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  color: var(--color-cream);
  text-shadow: 0 4px 16px rgba(14, 5, 70, 0.4);
  margin: 0;
}
.c-collection-block__video {
  margin: 0 0 var(--space-md); aspect-ratio: 16/9;
  border-radius: 18px; overflow: hidden; background: var(--color-ink);
}
.c-collection-block__video iframe { width: 100%; height: 100%; border: 0; display: block; }
.c-collection-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-sm);
}
.c-collection-gallery__item {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 14px; overflow: hidden;
  background: var(--color-cream-2);
  cursor: pointer;
  transition: transform 200ms var(--ease-spring);
}
.c-collection-gallery__item:hover { transform: scale(1.02); }
.c-collection-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-thema-quote {
  font-family: var(--font-display);
  font-size: var(--text-h-md);
  color: var(--color-ink);
  text-align: center;
  max-width: 800px; margin: 0 auto;
  line-height: 1.4;
}
/* ----- Lightbox ----- */
.c-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(14, 5, 70, 0.92);
  display: flex; align-items: center; justify-content: center;
}
.c-lightbox[hidden] { display: none; }
.c-lightbox__img {
  max-width: 90vw; max-height: 90vh; object-fit: contain;
  border-radius: 8px; box-shadow: 0 12px 60px rgba(0,0,0,0.5);
}
.c-lightbox__close, .c-lightbox__prev, .c-lightbox__next {
  position: absolute; background: transparent; border: 0;
  color: var(--color-cream); font-size: 48px; line-height: 1;
  cursor: pointer; padding: 12px 18px; transition: opacity 150ms;
}
.c-lightbox__close { top: 16px; right: 16px; font-size: 32px; }
.c-lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.c-lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
.c-lightbox__close:hover, .c-lightbox__prev:hover, .c-lightbox__next:hover { opacity: 0.7; }

.c-cookie-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  z-index: 200;
  background: var(--color-ink);
  color: var(--color-cream);
  padding: 14px 14px 14px 24px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: calc(100vw - 32px);
  width: max-content;
  box-shadow: 0 12px 40px rgba(14, 5, 70, 0.25);
  font-size: var(--text-sm);
  opacity: 0;
  transform: translate(-50%, 20px);
  transition: opacity 0.4s var(--ease-inout), transform 0.4s var(--ease-inout);
  pointer-events: none;
}
.c-cookie-banner.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.c-cookie-banner.is-hidden {
  opacity: 0;
  transform: translate(-50%, 20px);
  pointer-events: none;
}
.c-cookie-banner__text {
  margin: 0;
  line-height: 1.5;
  max-width: 380px;
}
.c-cookie-banner__text a {
  color: var(--color-cream);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.c-cookie-banner__buttons {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.c-cookie-banner__btn {
  border: 0;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font: inherit;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}
.c-cookie-banner__btn--decline {
  background: transparent;
  color: var(--color-cream);
  border: 1px solid rgba(255, 252, 248, 0.4);
}
.c-cookie-banner__btn--decline:hover {
  background: rgba(255, 252, 248, 0.1);
  border-color: var(--color-cream);
}
.c-cookie-banner__btn--accept {
  background: var(--color-cream);
  color: var(--color-ink);
}
.c-cookie-banner__btn--accept:hover {
  background: var(--color-primary-500);
  color: var(--color-cream);
}
@media (max-width: 700px) {
  .c-cookie-banner {
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radius-md);
    padding: 16px;
    bottom: 12px;
    left: 12px;
    right: 12px;
    transform: translateY(20px);
    max-width: none;
    width: auto;
  }
  .c-cookie-banner.is-visible { transform: translateY(0); }
  .c-cookie-banner.is-hidden { transform: translateY(20px); }
  .c-cookie-banner__text { max-width: none; }
  .c-cookie-banner__buttons { justify-content: flex-end; }
}

/* ----- Contact section — sticky info-kolom links, formulier rechts ----- */

.c-contact-section {
  /* Section--pill heeft overflow:hidden (voor zijn rounded corners) wat
     position:sticky op descendants kan blokkeren. overflow:clip clipt wel
     maar maakt geen scroll-container, dus sticky werkt vrij. */
  overflow: clip;
  padding-top: var(--section-pad-top);
  padding-bottom: clamp(80px, 10vw, var(--space-2xl));
}

.c-contact-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

@media (max-width: 900px) {
  .c-contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

.c-contact-layout__info {
  position: sticky;
  top: calc(var(--nav-height) + var(--nav-top) + 30px);
}

@media (max-width: 900px) {
  /* Mobile: info aside in 2 gelijke kolommen — Atelier links,
     E-mail + Instagram rechts gestackt. h2 spant beide kolommen. */
  .c-contact-layout__info {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-md);
    row-gap: var(--space-sm);
  }
  /* h2 (Pigment Paint & Sip) full-width op rij 1, gecentreerd op
     mobile met font-size --text-h-lg (zelfde als .c-section-header__title). */
  .c-contact-layout__info > h2 {
    grid-column: 1 / -1;
    font-size: var(--text-h-lg) !important;
    text-align: center !important;
    margin-inline: auto !important;
  }
  /* Atelier (eerste p) op rij 2, kolom 1, spant rij 2 + 3 zodat hij
     even hoog blijft als de E-mail + Instagram stack rechts. */
  .c-contact-layout__info > p:nth-of-type(1) {
    grid-column: 1;
    grid-row: 2 / span 2;
  }
  /* E-mail (tweede p) op rij 2, kolom 2. */
  .c-contact-layout__info > p:nth-of-type(2) {
    grid-column: 2;
    grid-row: 2;
  }
  /* Instagram (derde p) op rij 3, kolom 2. */
  .c-contact-layout__info > p:nth-of-type(3) {
    grid-column: 2;
    grid-row: 3;
  }
}

.c-contact-layout__form {
  /* Formulier vult zijn kolom — geen aparte centrering meer want het
     staat al in een eigen grid-kolom rechts. */
  margin: 0;
  max-width: none;
}

/* ----- FAQ section v2 (boek-nu) — sticky title links + losse grid-pills rechts -----

   Layout-keuze: de titel staat op exact 120px van de viewport-rand (matchend
   met de homepage "Hoe werkt het? — In 3 stappen op je doek" header die op
   left: calc(var(--grid-margin) + 100px) staat). Realisatie via CSS grid
   waarbij de titel-kolom 100px padding-left krijgt — de container heeft al
   20px padding, dus 20 + 100 = 120px van de viewport. De vragen-kolom blijft
   vlak tegen zijn columnstart (geen pad-left) zodat alleen de titel verschoven
   is, niet de pills.

   Elke vraag-pill heeft ZELF het grid-pattern als achtergrond (#EAF0FF +
   #BED3FF 20px squares). De ruimte tussen pills toont gewoon de section bg.
   Bij open zakt het antwoord smooth open, in solide #BED3FF — het grid in de
   bar verdwijnt visueel achter het antwoord. */

.c-faq-section {
  padding-top: var(--section-pad-top);
  padding-bottom: clamp(80px, 10vw, var(--space-2xl));
  /* section--pill heeft overflow:hidden voor zijn rounded corners — dat
     blokkeert position:sticky op descendants in sommige browsers. */
  overflow: clip;
}

/* FAQ-layout krijgt zelf max-width + horizontale padding, zoals .container,
   zodat hij netjes gecentreerd is op brede schermen en perfect uitlijnt met
   de contact-section erboven (zelfde grid-template, gap en max-width). */
.c-faq-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}

@media (max-width: 900px) {
  .c-faq-layout {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* Sticky titel — blijft staan terwijl je door de vragen scrollt. */
.c-faq-layout__title {
  position: sticky;
  top: calc(var(--nav-height) + var(--nav-top) + 30px);
}
@media (max-width: 900px) {
  .c-faq-layout__title { position: static; }
}
.c-faq-layout__title .c-section-header__eyebrow {
  text-align: left;
  margin-left: 0;
  margin-bottom: var(--space-2xs);
}
.c-faq-layout__title .c-section-header__title {
  text-align: left;
  /* Zelfde grootte als "Pigment Paint & Sip" h2 in de contact-info kolom
     erboven, zodat de FAQ-titel daarmee qua schaal in de pas loopt. */
  font-size: var(--text-h-md);
  margin: 0;
  line-height: 1;
}

/* Vragen-stack — geen eigen achtergrond, gewoon een flex container. Elke
   pill brengt ZIJN eigen grid-pattern mee. */
.c-faq-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Vraag-pill — grid-pattern als achtergrond. Overflow hidden zodat de open-
   animatie netjes binnen de afgeronde vorm blijft. */
.c-faq-q {
  background-color: #EAF0FF;
  background-image:
    linear-gradient(to right, #BED3FF 1px, transparent 1px),
    linear-gradient(to bottom, #BED3FF 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.c-faq-q__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: 0;
  cursor: pointer;
  user-select: none;
  font: inherit;
  color: var(--color-ink);
  text-align: left;
}

.c-faq-q__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-lg);
}

.c-faq-q__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: #BED3FF;
  color: var(--color-ink);
  flex-shrink: 0;
  transition: transform 0.45s var(--ease-inout), background 0.2s ease;
}
.c-faq-q__chevron svg { width: 14px; height: 14px; }

.c-faq-q.is-open .c-faq-q__chevron {
  transform: rotate(180deg);
  background: var(--color-ink);
  color: #BED3FF;
}

/* Expanded panel — solide #BED3FF achtergrond zodat de antwoord-area visueel
   afsteekt van de grid-pill erboven. Animeert via height 0 → scrollHeight. */
.c-faq-q__expanded {
  height: 0;
  overflow: hidden;
  background: #BED3FF;
  transition: height 0.45s var(--ease-inout);
}
.c-faq-q__expanded-inner {
  padding: var(--space-sm) var(--space-md) var(--space-md);
  color: var(--color-ink);
  font-size: var(--text-base);
  line-height: 1.6;
  max-width: 760px;
}
.c-faq-q__link {
  color: var(--color-primary-700, #003BCC);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- 21. PRODUCT / SHOP CARDS ---------- */

.c-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 900px) { .c-product-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .c-product-grid { grid-template-columns: 1fr; } }

.c-product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.c-product-card__image {
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-cream-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}

.c-product-card__image img {
  max-width: 60%;
  max-height: 70%;
  width: auto;
  height: auto;
}
/* Echte geüploade foto vult het hele kader (geen cream-ruimte errond). */
.c-product-card__image--photo {
  padding: 0;
}
.c-product-card__image--photo img {
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-product-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h-xs);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: var(--space-xs);
  color: var(--color-ink);
}

.c-product-card__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink);
  line-height: 1.5;
}

/* Price tag pills onder het kaartje. Eén of meerdere tags (zoals de €25/€50/€75
   keuze op de Cadeaubon kaart). De cream-2 achtergrond met ink tekst blends
   in met de eggshell sectie maar is nog onderscheidbaar als pill. */
.c-product-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: auto;
  padding-top: var(--space-xs);
}
/* Echte buttons — klikbaar, met hover state. Reset wat browsers default doen
   met <button> (font, border, etc.) en gebruik onze cream-2 pill styling. */
.c-product-card__tag {
  background: var(--color-cream-2);
  color: var(--color-ink);
  border: 1px solid var(--color-cream-2);
  border-radius: var(--radius-md);
  padding: 14px 24px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-base);
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.c-product-card__tag:hover {
  background: var(--color-ink);
  color: var(--color-cream);
  border-color: var(--color-ink);
}
.c-product-card__tag:active {
  transform: scale(0.98);
}
.c-product-card__tag:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}
.c-product-card__tag--full {
  flex-basis: 100%;
}
/* Statische prijs-weergave: geen knop, niet klikbaar, geen hover.
   Zelfde hoekradius als de "In winkelmandje"-knop eronder (--radius-sm). */
.c-product-card__tag--static {
  cursor: default;
  border-radius: var(--radius-sm);
}
.c-product-card__tag--static:hover {
  background: var(--color-cream-2);
  color: var(--color-ink);
  border-color: var(--color-cream-2);
}

/* ---------- 22. TEAM CARDS ---------- */

.c-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Column-gap blijft op space-md (~38px), row-gap 70px tussen
     "Functie" onderaan kaartje rij 1 en de foto bovenaan kaartje rij 2. */
  column-gap: var(--space-md);
  row-gap: 70px;
}

@media (max-width: 900px) { .c-team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .c-team-grid { grid-template-columns: 1fr; } }

.c-team-card { text-align: center; }

.c-team-card__photo {
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-cream-2);   /* eggshell placeholder zolang er geen foto in zit */
  background: var(--color-cream-2);
  margin-bottom: var(--space-xs);
}

.c-team-card__photo img {
  width: 100%; height: 100%; object-fit: cover;
}
/* Team-foto als mini-carrousel: hoofdfoto + extra werk-foto's. */
.c-team-card__photo { position: relative; }
.c-team-card__slides {
  position: absolute;
  inset: 0;
  display: flex;
  transition: transform 0.4s var(--ease-inout);
}
.c-team-card__slide {
  flex: 0 0 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.c-team-card__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  background: rgba(255, 252, 247, 0.85);
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--color-ink);
  z-index: 2;
  transition: background 0.2s ease;
}
.c-team-card__nav:hover { background: #fff; }
.c-team-card__nav--prev { left: 8px; }
.c-team-card__nav--next { right: 8px; }

.c-team-card__name {
  font-family: var(--font-display);
  font-size: var(--text-h-xs);
  margin-bottom: 4px;
}

.c-team-card__role {
  font-size: var(--text-base);
  color: var(--color-ink-60);
  margin-bottom: 16px;
}

/* ---------- 23. PRACTICAL — drink formula cards ---------- */

.c-formula-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

@media (max-width: 900px) { .c-formula-grid { grid-template-columns: 1fr; } }

.c-formula-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  border: 1px solid var(--color-line);
}

.c-formula-card--featured {
  background: var(--color-primary-500);
  color: var(--color-white);
  border-color: transparent;
}

.c-formula-card__name {
  font-family: var(--font-display);
  font-size: var(--text-h-sm);
  margin-bottom: var(--space-xs);
}

.c-formula-card__price {
  font-family: var(--font-display);
  font-size: var(--text-h-md);
  margin-bottom: var(--space-sm);
}

.c-formula-card__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--space-md);
}

.c-formula-card__list li {
  padding-left: 24px;
  position: relative;
  font-size: var(--text-base);
}

.c-formula-card__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  font-weight: 700;
}

/* ---------- 24. KALENDER PLACEHOLDER ---------- */

.c-calendar-placeholder {
  background: var(--color-white);
  border: 2px dashed var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
  height: 46vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.c-calendar-placeholder__title {
  font-family: var(--font-display);
  font-size: var(--text-h-md);
  color: var(--color-ink);
  margin-bottom: var(--space-xs);
}

.c-calendar-placeholder__sub {
  color: var(--color-ink-60);
  margin-bottom: var(--space-sm);
}

/* ---------- 24b. BOEK NU DRINKS PANEL ----------
   Side-panel die opens vanaf rechts wanneer de gebruiker op de "DRANKEN"
   tab klikt. Bevat een lijst drank-categorieën waaruit ze kunnen selecteren.
   Selecteren werkt als spotlight: zodra er één geselecteerd is, fade-en de
   niet-geselecteerde naar 40% opacity. */

/* Inline trigger-knop in het form (naast "Ik wil zelf drank meebrengen").
   Vervangt de oude fixed sidebar-tab — de knop staat nu fysiek bij de
   drank-keuze in het form, dus volgt de gebruiker niet meer over de hele
   pagina. */
.c-drinks-trigger {
  background: var(--color-scarlet-500);
  color: var(--color-cream);
  border: 0;
  padding: 11.875px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-base);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.c-drinks-trigger:hover {
  background: var(--color-scarlet-600);
}
.c-drinks-trigger:active {
  transform: scale(0.98);
}

/* (Oude side-tab — niet meer in gebruik, behouden voor backwards compat) */
.c-drink-tab {
  position: fixed;
  right: 0;
  top: 50%;
  background: var(--color-scarlet-500);
  color: var(--color-cream);
  padding: 18px 22px;
  border: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-h-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 90;
  writing-mode: vertical-rl;
  box-shadow: -4px 0 20px rgba(12, 5, 56, 0.15);
  /* Default: verborgen (uit beeld geschoven naar rechts) */
  transform: translate(100%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s var(--ease-spring), opacity 0.3s ease, background 0.2s ease;
}
.c-drink-tab.is-active {
  transform: translate(0, -50%);
  opacity: 1;
  pointer-events: auto;
}
.c-drink-tab:hover {
  background: var(--color-scarlet-600);
}

/* Het slide-out panel. Standaard verschoven (translateX 100%) buiten beeld;
   krijgt de class .is-open via JS om in te schuiven. */
.c-drink-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(720px, 90vw);
  background: var(--color-lavender-500);
  /* Onder de navbar (z-100), zodat de pills boven het paneel zichtbaar
     blijven. De lavender achtergrond start nog steeds bij top:0 en loopt
     visueel tot helemaal boven achter de navbar. */
  z-index: 95;
  transform: translateX(100%);
  transition: transform 0.5s var(--ease-inout);
  overflow-y: auto;
  /* GEEN interne padding meer — elk kind-element regelt zijn eigen padding.
     Zo kan de sticky header zonder margin-trucs schoon zijn volledige breedte
     pakken en de drank-items onder zich verbergen wanneer je scrollt. */
  padding: 0;
  box-shadow: -16px 0 40px rgba(12, 5, 56, 0.2);
}
.c-drink-panel.is-open {
  transform: translateX(0);
}
/* Sticky header binnen het panel — blijft zichtbaar bovenaan ook als de
   gebruiker door de drank-categorieën scrollt. De panel heeft padding:0 dus
   de header pakt z'n eigen padding (geen negative-margin trucs nodig) en
   spant schoon de volledige breedte met lavender achtergrond. */
.c-drink-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: calc(var(--space-lg) + 30px) var(--space-md) var(--space-sm);
  position: sticky;
  top: 0;
  background: var(--color-lavender-500);
  z-index: 5;
}
.c-drink-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-h-md);
  text-transform: uppercase;
  color: var(--color-scarlet-500);
  letter-spacing: 0.02em;
  margin: 0;
}
.c-drink-panel__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Phone wide en kleiner: panel iets smaller (85vw i.p.v. 90vw) en
   actions in flex-column met gap 0. */
@media (max-width: 700px) {
  .c-drink-panel { width: min(720px, 85vw); }
  .c-drink-panel__actions {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
}
/* Small phone (≤480): panel-btn icon boven label (column-reverse),
   gecentreerd. Count-bubble vaste 20px width. */
@media (max-width: 480px) {
  .c-drink-panel__btn {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }
  .c-drink-panel__btn-count {
    width: 20px;
  }
}
.c-drink-panel__btn {
  background: transparent;
  border: 0;
  color: var(--color-scarlet-500);
  font-family: var(--font-display);
  font-size: var(--text-base);
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  transition: background 0.2s ease;
}
.c-drink-panel__btn:hover {
  background: rgba(255, 32, 0, 0.12);
}
.c-drink-panel__btn--close {
  color: var(--color-ink-60);
}
.c-drink-panel__btn--close:hover {
  background: rgba(12, 5, 56, 0.08);
}

/* Korte intro onder de header — "duid aan wat je graag zou willen,
   het is maar een suggestie". */
.c-drink-panel__intro {
  margin: 0 0 var(--space-md);
  padding: 0 var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-ink-60);
  line-height: 1.5;
  max-width: 540px;
}

.c-drink-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-lg);
  padding: 0 var(--space-md) var(--space-lg);
}
@media (max-width: 600px) { .c-drink-cats { grid-template-columns: 1fr; gap: 70px; } }

.c-drink-cat__title {
  font-family: var(--font-display);
  font-size: var(--text-h-sm);
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 var(--space-sm);
}
.c-drink-cat__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.c-drink-item {
  cursor: pointer;
  user-select: none;
  transition: opacity 0.25s ease;
}
.c-drink-item__name {
  font-family: var(--font-display);
  font-size: var(--text-h-xs);
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0;
  letter-spacing: 0.02em;
}
.c-drink-item__sub {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-ink-60);
  margin: 2px 0 0;
}

/* Spotlight states:
   1. Niets geselecteerd + hover op panel → alle items dimmen, gehoverd blijft helder
   2. Eén of meer geselecteerd → alle niet-geselecteerde dimmen, MAAR hover
      maakt ze nog steeds helder zodat je ook na 1e selectie verder kan kiezen
   3. Geselecteerde items → altijd helder + scarlet kleur als visuele marker  */
.c-drink-panel:not(.has-selection):hover .c-drink-item {
  opacity: 0.55;
}
.c-drink-panel:not(.has-selection):hover .c-drink-item:hover {
  opacity: 1;
  transform: translateX(4px);
}
.c-drink-panel.has-selection .c-drink-item {
  opacity: 0.55;
}
.c-drink-panel.has-selection .c-drink-item:hover {
  opacity: 1;
  transform: translateX(4px);
}
.c-drink-panel.has-selection .c-drink-item.is-selected {
  opacity: 1;
}
.c-drink-item {
  transition: opacity 0.25s ease, transform 0.2s ease;
}
/* Scarlet kleur op de naam van geselecteerde items — duidelijke visuele
   marker dat het aangeduid is, zelfs als je niet hovert. */
.c-drink-item.is-selected .c-drink-item__name {
  color: var(--color-scarlet-500);
}

/* Backdrop achter de panel — moet ONDER het panel (z-95) liggen anders
   vangt de backdrop alle kliks op de drank-items op en gaat het paneel
   dicht zodra je iets probeert aan te duiden. */
.c-drink-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(12, 5, 56, 0.4);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.c-drink-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Klein count-bolletje binnenin de "Opslaan" knop — toont aantal aangeduide
   dranken zodat je in het paneel zelf ook ziet hoeveel je geselecteerd hebt. */
.c-drink-panel__btn-count {
  display: inline-block;
  margin-left: 6px;
  background: var(--color-scarlet-500);
  color: var(--color-cream);
  border-radius: var(--radius-full);
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  line-height: 20px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}
/* Verbergen wanneer count = 0 */
.c-drink-panel__btn-count[data-count="0"] { display: none; }

/* Klein "Gekopieerd!" tooltip-bubbeltje dat boven een geklikt e-mail/IG link
   verschijnt — kort zichtbaar (~1.5s) na een succesvolle clipboard-write. */
.c-copy-toast {
  position: fixed;
  background: var(--color-ink);
  color: var(--color-cream);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  z-index: 200;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.25s var(--ease-spring);
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(12, 5, 56, 0.25);
}
.c-copy-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 16px));
}
.c-copy-toast::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-ink);
  border-bottom: 0;
}

/* Drank-pill naast de Verstuur-aanvraag knop. Dubbelrol: opent altijd het
   drank-paneel én toont na selectie het aantal aangeduide drankjes tussen
   haakjes ("Dranken (3)"). Volgt dezelfde structuur als .c-button + .c-button--quote
   (label + cirkel-icoon met pijl), maar met scarlet vulling i.p.v. wit. */
.c-form__drink-summary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11.875px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-scarlet-500);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-lg);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-inout),
              color var(--dur-base) var(--ease-inout),
              transform var(--dur-base) var(--ease-spring);
}
.c-form__drink-summary:hover {
  background: var(--color-scarlet-600);
}
.c-form__drink-summary:hover .c-button__label {
  transform: translateX(4px);
}
/* Pijltje zonder cirkel — gewoon de witte SVG. Container is 40×40 (zelfde
   formaat als .c-button__icon) zodat deze pill exact dezelfde hoogte heeft
   als de Verstuur-aanvraag knop ernaast. */
.c-form__drink-summary__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-cream);
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-spring);
}
.c-form__drink-summary__arrow svg { width: 18px; height: 18px; }
.c-form__drink-summary:hover .c-form__drink-summary__arrow {
  transform: translateX(4px);
}
.c-form__drink-summary:active {
  transform: scale(0.98);
}
/* Disabled-state — wanneer "ik wil zelf drank meebrengen" aan staat. Pill
   blijft zichtbaar (zodat de gebruiker snapt dat de optie er is) maar is
   niet klikbaar en visueel uitgegrijsd. */
.c-form__drink-summary.is-disabled,
.c-form__drink-summary[disabled] {
  background: var(--color-ink-10);
  color: var(--color-ink-50, rgba(14, 5, 70, 0.4));
  cursor: not-allowed;
  pointer-events: none;
}
.c-form__drink-summary.is-disabled .c-form__drink-summary__arrow,
.c-form__drink-summary[disabled] .c-form__drink-summary__arrow {
  color: var(--color-ink-50, rgba(14, 5, 70, 0.4));
}

/* ---------- 25. STICKY CTA (mobile) ---------- */

.c-sticky-cta {
  display: none;
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 90;
  background: var(--color-primary-500);
  color: var(--color-white);
  padding: 14px 20px;
  border-radius: var(--radius-md);
  text-align: center;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(12, 5, 56, 0.2);
}

/* Sticky CTA blijft uitgeschakeld — de Boek-nu pill in de navbar +
   de "Boek je activiteit" knop in de footer dekken al die functie af. */

/* ---------- 27. FOOTER v4 (Figma design — exacte replica) ---------- */

/* Footer container override via directe modifier-klasse — meer betrouwbaar
   dan :has() in alle browsers. Marges 20px langs randen, geen padding-top
   zodat M op zijn translateY(-10) echt 10px boven het kader uitkomt.
   Overflow visible zodat M niet geclipt wordt door de rounded corners. */
.c-footer.c-footer--v4 {
  padding: 0 20px 20px !important;
  overflow: visible !important;
}

.c-footer__inner--v4 {
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* Geen gap — we gebruiken individuele margins per blok zodat we per
     paar exact de gewenste spacing kunnen zetten (legal moet 50px van
     het bottom-blok, niet 80 zoals een uniforme gap zou geven). */
}
/* Exacte spacing per Figma:
   - 28px tussen brush+P&S en Boek-nu knop
   - 180px tussen Boek-nu en "Klaar om te schilderen?" tagline
   - 50px tussen tagline-rij en legal-rij */
/* Spacing rond de Boek-nu pill schaalt nu mee met viewport-breedte
   i.p.v. fixed pixels. Op desktop (1700px) komen de waardes uit op
   ~29 / ~187, vergelijkbaar met de oude vaste 28 / 180. Op grotere
   schermen ademt de footer mee zodat de verhoudingen kloppen. */
.c-footer__inner--v4 > .c-footer__nav-row { margin-top: clamp(20px, 1.7vw, 50px); }
.c-footer__inner--v4 > .c-footer__bottom  { margin-top: clamp(120px, 11vw, 280px); }
.c-footer__inner--v4 > .c-footer__legal   { margin-top: 50px; }

/* Brand-blok: PIGMENT op een boog, newsletter onder M, brush + Paint & Sip.
   --letter-h is een CSS-variabele die de letter-hoogte exposed zodat de
   newsletter en brush hun positie precies kunnen berekenen relatief aan M.
   28vw zodat het brand-blok echt dominant is zoals in de Figma. */
.c-footer__brand {
  position: relative;
  text-align: center;
  /* Cap omhoog naar 1100px zodat het PIGMENT-ontwerp ook bij grote
     schermen (> 2150px) blijft schalen i.p.v. te plafonneren met
     extra ruimte tussen de letters. */
  --letter-h: clamp(200px, 28vw, 1100px);
  /* Boog-parameters in % van letter-h — zo schaalt de stickout van
     de M boven het kader proportioneel mee met de letter-grootte
     i.p.v. een vaste pixelwaarde (anders steekt M op desktop wel
     boven het kader maar verdwijnt op grotere schermen erin). */
  --arc-base: calc(var(--letter-h) * -0.17); /* M-translateY ≈ -80 op desktop (letter-h=476) */
  --arc-step: calc(var(--letter-h) * 0.139); /* stap tussen letterparen ≈ 66 op desktop */
}

/* PIGMENT wordmark: flex-row met justify-content space-between zodat de
   letters van rand-tot-rand verdeeld zijn. Letters zijn vh-gesized voor
   stabiele schaal onafhankelijk van viewport-breedte. align-items: flex-start
   zodat translateY waardes voorspelbaar werken (M -10 → boven, anderen +). */
.c-footer__wordmark {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-cream);
  line-height: 1;
  /* user-select en pointer-events bewust NIET op none gezet — anders
     kan je de PIGMENT-letters niet selecteren (dubbelklik / tekst-
     highlight werkt dan niet). */
  /* Variabele margins (vw-based) zodat de overhang van P en T mee-
     schaalt met viewport-breedte i.p.v. vaste pixels. -5vw rechts,
     -4.1vw links. */
  margin: 0 -5vw 0 -4.1vw;
}

/* Letter sizing via CSS-variabele (vw-based) — schaalt mee met viewport
   breedte zodat de letters altijd evenredig over de footer verdeeld zijn. */
.c-footer__letter {
  display: inline-block;
  font-size: var(--letter-h);
  line-height: 1;
}

/* Boog-effect — translateY in % van letter-h zodat de boog ook bij
   grotere schermen proportioneel werkt (M blijft visueel boven het
   kader uitkomen). Op desktop (letter-h=476) komen de waarden uit
   op de oorspronkelijke -80 / -14 / 52 / 118 px. */
.c-footer__letter--p { transform: translateY(calc(var(--arc-base) + var(--arc-step) * 3)); }
.c-footer__letter--i { transform: translateY(calc(var(--arc-base) + var(--arc-step) * 2)); }
.c-footer__letter--g { transform: translateY(calc(var(--arc-base) + var(--arc-step) * 1)); }
.c-footer__letter--m { transform: translateY(var(--arc-base)); }
.c-footer__letter--e { transform: translateY(calc(var(--arc-base) + var(--arc-step) * 1)); }
.c-footer__letter--n { transform: translateY(calc(var(--arc-base) + var(--arc-step) * 2)); }
.c-footer__letter--t { transform: translateY(calc(var(--arc-base) + var(--arc-step) * 3)); }

/* Newsletter: nu in normale flow met negative margin-top zodat hij
   visueel onder de M zit (M visible bottom is op ~0.78*letter-h - 80
   van de wordmark-top, en met margin-top -0.22*letter-h - 50 zit de
   newsletter ~80px daaronder). Width = M-breedte, gemeten via JS in
   pigment.js (--m-width var) zodat de input altijd exact onder de M
   uitkomt onafhankelijk van viewport. */
.c-footer__brand .c-footer__newsletter {
  margin: calc(var(--letter-h) * -0.22 + 30px) auto 0;
  /* Variabele breedte op alle breakpoints via clamp() — schaalt mee
     met viewport-breedte. Min 320px op smalle schermen, max 520px op
     hele brede. ~28vw als sweet spot ertussenin (was 22vw, te smal
     op tablet). Vervangt de oude JS-gemeten --m-width approach. */
  width: clamp(320px, 28vw, 520px);
  max-width: none;
  z-index: 2;
  position: relative;
}

/* Paint & Sip sublabel: brush boven "PAINT & SIP" met 5px overlap.
   margin-top: 80px zorgt voor exact 80px tussen newsletter-bottom en
   brush-top (newsletter zit nu in flow). line-height: 1 zodat de
   ascent-slack van de display font de overlap-berekening niet
   verpest. */
.c-footer__sublabel {
  /* --sublabel-w is de single source of truth voor zowel de brush-
     breedte (100% van de container) als de font-size (~17% ervan). Zo
     schalen brush en "PAINT & SIP" altijd samen i.p.v. dat één van
     de twee uit z'n proportie loopt. clamp(220, 18vw, 360) → op
     desktop 1700 ≈ 306px, op mobile 360 hits min, op grote schermen
     cap op 360. */
  --sublabel-w: clamp(220px, 18vw, 360px);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 80px auto 0;
  width: var(--sublabel-w);
  color: var(--color-cream);
  font-family: var(--font-display);
  font-size: calc(var(--sublabel-w) * 0.17);
  line-height: 1;
  letter-spacing: 0.05em;
}
.c-footer__sublabel-icon {
  width: 100%;
  height: auto;
  /* -10px: dankzij line-height: 1 op de container is de ascent-slack
     van de "PAINT & SIP" tekst ~5px. -10 margin-bottom geeft dus
     visueel 5px overlap tussen brush-bristles en P-top. */
  margin-bottom: -10px;
  position: relative;
  z-index: 2;
}
.c-footer__sublabel-text {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* Forceer 1 regel — was anders wrapping op smalle viewports */
  white-space: nowrap;
}

/* T-decoratie: sparkle + paintbrush rechts-bovenaan in het brand-blok,
   bij de T-letter. Beide gebruiken de bestaande .c-floater base voor
   de floatBob animatie (lichtjes op-en-neer wiebelen) — we overschrijven
   alleen de positie en width. --base-rot zet de rust-rotatie van de
   brush zodat hij schuin staat. */
.c-footer__t-brush {
  /* .c-floater geeft position: absolute en animation */
  top: calc(var(--letter-h) * 0.04 + 120px);
  right: 2%;
  width: clamp(50px, 4.5vw, 90px);
  --base-rot: 25deg;
  animation-duration: 5.5s;
  animation-delay: 0.8s;
  z-index: 3;
}
.c-footer__t-sparkle {
  top: calc(var(--letter-h) * 0.02 + 120px);
  right: calc(2% + clamp(60px, 5.5vw, 110px));
  width: clamp(40px, 3.6vw, 70px);
  animation-duration: 6s;
  animation-delay: 0.4s;
  z-index: 3;
}

/* Nav-rij gecentreerd met Boek nu pill mee. */
.c-footer__nav-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 56px;
  font-family: var(--font-body);
  font-weight: 500;
  /* Kleiner lettertype — even groot als email/instagram links eronder */
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.c-footer__nav-row a {
  color: var(--color-cream);
}
.c-footer__nav-row a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Boek nu pill: outlined eggshell border. */
/* Rechthoekig met afgeronde hoeken (zelfde radius als de navbar Boek-nu
   pill) i.p.v. een volledig ronde pill. Transparante bg, eggshell stroke. */
.c-footer__boek-pill {
  border: 1.5px solid var(--color-cream);
  border-radius: var(--radius-sm);
  padding: 14px 32px;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease;
}
.c-footer__boek-pill:hover {
  background: var(--color-cream);
  color: var(--color-primary-500) !important;
}

/* ============================================================
   GLOBALE footer-layout:
   - Boek-nu pill absoluut gepositioneerd OVER de M-letter
   - Sublabel (brush + "PAINT & SIP" gecombineerd in remaining.svg)
     boven de newsletter via flex-order
   - Newsletter onderaan het brand-blok
   ============================================================ */
.c-footer__nav-row {
  position: absolute;
  top: calc(var(--letter-h) * 1.27);
  left: 48%;
  transform: translate(-50%, 6vw);
  width: calc(var(--m-width, calc(var(--letter-h) * 0.85)) * 0.6);
  margin: 0;
  z-index: 4;
}
.c-footer__nav-row .c-footer__boek-pill {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--color-primary-500);
  border-color: var(--color-cream);
  padding: 1vw 8vw;
}
.c-footer__nav-row .c-footer__boek-pill:hover {
  background: var(--color-cream);
  color: var(--color-primary-500) !important;
}

/* Volgorde-swap: sublabel boven newsletter (in plaats van onder).
   .c-footer__brand is een normale block-container, dus we kunnen via
   flex order's de visuele volgorde wisselen zonder HTML te verbouwen. */
.c-footer__brand {
  display: flex;
  flex-direction: column;
}
.c-footer__brand .c-footer__wordmark { order: 1; }
.c-footer__brand .c-footer__sublabel { order: 2; }
.c-footer__brand .c-footer__newsletter { order: 3; }
.c-footer__brand .c-footer__t-brush,
.c-footer__brand .c-footer__t-sparkle { order: 0; }

/* Met de swap moet de newsletter-margin niet meer NEGATIEF onder de
   wordmark trekken — die plaatste hem juist boven, wat we nu niet
   meer willen. Reset naar een rustige margin-top zodat hij gewoon
   onder de sublabel valt. */
.c-footer__brand .c-footer__newsletter {
  margin: 13px auto 60px 33vw;
}
.c-footer__brand .c-footer__sublabel {
  margin-top: calc(var(--letter-h) * -0.2 + 50px);
  margin-left: 48%;
  transform: translate(-50%, -50%);
}
/* Mobile (≤900): newsletter iets verder naar links (27vw i.p.v. 33vw)
   omdat de wordmark daar smaller staat. */
@media (max-width: 900px) {
  .c-footer__brand .c-footer__newsletter {
    margin: 13px auto 60px 27vw;
  }
}
/* Phone wide (≤700): newsletter nog wat verder naar links (23vw). */
@media (max-width: 700px) {
  .c-footer__brand .c-footer__newsletter {
    margin: 13px auto 60px 23vw;
  }
}
/* Phone (≤600): newsletter nog verder naar links (17vw). */
@media (max-width: 600px) {
  .c-footer__brand .c-footer__newsletter {
    margin: 13px auto 60px 17vw;
  }
}
/* Small phone (≤480): newsletter full-width zonder linker margin. */
@media (max-width: 480px) {
  .c-footer__brand .c-footer__newsletter {
    margin: 13px 0 60px 0;
    min-width: 100%;
  }
}
/* Phone (≤600): boek-pill kleiner — font 12px, padding 7×27.
   Nav-row Y-translate iets kleiner (4vw i.p.v. 6vw). */
@media (max-width: 600px) {
  .c-footer__nav-row {
    transform: translate(-50%, 4vw);
  }
  .c-footer__nav-row .c-footer__boek-pill {
    font-size: 12px;
    padding: 7px 27px;
  }
}

/* Bottom: tagline links + contact rechts. Grid met auto-rechts zodat
   het contact-blok zijn natuurlijke breedte heeft en zijn rechter-rand
   netjes uitlijnt met de footer-padding (20px van viewport-rand).
   align-items: last baseline zodat de tekst-BASELINE van de laatste
   regel van de tagline gelijk valt met die van de Instagram-handle. */
.c-footer__bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: last baseline;
}
.c-footer__bottom .c-footer__big {
  font-family: var(--font-display);
  font-weight: 400;
  /* Iets kleiner — was te groot in vorige iteratie. */
  font-size: clamp(60px, 9vw, 160px);
  line-height: 0.95;
  color: var(--color-cream);
  margin: 0;
  /* Geen max-width meer — tagline wraps natuurlijk binnen de 1fr
     grid-kolom. Op brede schermen blijft hij op 1 regel, op smallere
     viewports wrapt hij als de tekst te breed wordt voor de kolom. */
  text-transform: uppercase;
}

/* Desktop en groter (≥1651px): tagline iets kleiner (6vw i.p.v. 9vw)
   en sublabel-spacing wat compacter (50px i.p.v. 80px) zodat de
   verhoudingen op brede schermen kloppen. */
@media (min-width: 1651px) {
  .c-footer__bottom .c-footer__big {
    font-size: clamp(60px, 6vw, 160px);
  }
  .c-footer__sublabel {
    margin-top: 50px;
  }
}
/* Contact-blok: vaste breedte 300px, content links uitgelijnd, blok rechts
   in zijn grid-kolom tegen de viewport-rechterrand. */
.c-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  flex-shrink: 0;
  text-align: left;
  width: 300px;
}
.c-footer__contact-item {
  align-items: flex-start;
}
.c-footer__contact-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.c-footer__contact-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-base);
  color: var(--color-cream);
  /* Tight line-height zodat de layout-bottom van het label/link gelijk
     valt met de visible tekst-bottom — anders staat de Instagram-handle
     visueel hoger dan de tagline-bottom. */
  line-height: 1.2;
}
.c-footer__contact-item a {
  color: var(--color-cream);
  text-decoration: none;
  text-underline-offset: 3px;
  font-size: var(--text-sm);
  line-height: 1.3;
}
.c-footer__contact-item a:hover { text-decoration: underline; }

/* Socials (het laatste contact-item met Instagram/Facebook/LinkedIn/TikTok):
   op grote schermen de links in 2 kolommen, met het label over beide kolommen.
   Op kleinere schermen valt dit terug op één kolom (zie media-query hieronder). */
.c-footer__contact-item:last-child {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 24px;
  row-gap: 2px;
  align-items: start;
  justify-content: start;
}
.c-footer__contact-item:last-child .c-footer__contact-label { grid-column: 1 / -1; }

/* Legal rij: copyright links, Mary credit rechts. Auto-rechts kolom
   zodat de Mary-credit naturalweise tegen de viewport-rechterrand
   plakt (20px footer-padding). Tekst binnen elk grid-item is
   left-aligned. */
.c-footer__legal {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  /* align-items: end zodat de bottoms van beide regels uitlijnen — anders
     staat de Mary-credit (1 regel) visueel hoger dan het copyright-blok
     dat op smalle viewports naar 2 regels wrapt. */
  align-items: end;
  font-size: var(--text-sm);
  color: var(--color-cream);
  margin-top: 50px;
}
.c-footer__legal > p {
  text-align: left;
}
.c-footer__legal p {
  margin: 0;
  opacity: 0.9;
}
.c-footer__legal a {
  color: var(--color-cream);
  text-decoration: none;
}
.c-footer__legal a:hover { text-decoration: underline; }

/* Mobile: kleinere boog, newsletter onder de letters, bottom-blok stacked.
   gap: 0 op de inner zodat de individuele margin-top regels exact
   doorklinken (anders kwam er nog 48px bovenop elke gap). De
   margin-top tussen "Klaar om te schilderen?" en de legal-rij wordt
   hier overschreven naar 40px voor een strakke mobile footer. */
@media (max-width: 900px) {
  .c-footer__inner--v4 { gap: 0; }
  .c-footer__inner--v4 > .c-footer__legal { margin-top: 40px; }
  /* Wordmark op mobile: links -32 (P steekt 12px voorbij viewport-rand),
     rechts -20 (T tegen viewport-rand). Op desktop is links -60 voor
     een agressievere overhang van 40px. */
  .c-footer__wordmark { margin: 0 -20px 0 -32px; }
  /* Letters net iets dichter tegen elkaar op mobile zodat de T iets
     meer in beeld komt. -1px per kant = 2px overlap per letterpaar. */
  .c-footer__letter { margin: 0 -1px; }
  .c-footer__brand .c-footer__newsletter {
    width: 100%;
    max-width: 320px;
    margin: 24px auto 0;
  }
  .c-footer__nav-row { gap: 24px; }
  .c-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
  .c-footer__legal {
    /* Mobile: kleinere gap zodat de 2 regels minder ver van elkaar
       staan. Grid blijft 1fr auto (zie hieronder voor de switch naar
       1fr 1fr op echt kleine schermen). */
    gap: 20px;
  }
  /* Mary-credit (tweede <p>) right-aligned i.p.v. de default left. */
  .c-footer__legal > p:last-child { text-align: right; }
}
/* Phone-narrow: pas op echt smalle viewports switchen we naar twee
   gelijke kolommen. Daarboven blijft de desktop 1fr auto layout zodat
   de copyright-regel zoveel mogelijk op 1 regel kan blijven en pas
   wrapt als er echt geen plaats meer is. */
@media (max-width: 600px) {
  .c-footer__legal {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 700px) {
  /* Phone wide en kleiner: PIGMENT-letters variabel met viewport-
     BREEDTE. clamp(80, 29vw, 200) — min lager (80) zodat de letters
     ook onder ~414px viewport blijven scalen i.p.v. te plafonneren
     op de min cap. Schaal-bereik: 80px (op ~275 viewport) tot 200px
     (cap op ~690+). */
  .c-footer__brand { --letter-h: clamp(80px, 29vw, 200px); }
  /* Wordmark margins op phone wide en kleiner: links -7.1vw (P-overhang
     schaalt mee met viewport-breedte i.p.v. een vaste pixelwaarde),
     rechts -13 (T 7px binnen viewport-rand). */
  .c-footer__wordmark { margin: 0 -13px 0 -7.1vw; }
  /* Newsletter op vaste 10px afstand van de wordmark layout-bottom —
     niet meer afhankelijk van --letter-h zodat de positie consistent
     blijft ongeacht hoe de letters schalen. Sublabel volgt mee via
     margin-top in flow. */
  .c-footer__brand .c-footer__newsletter {
    margin-top: 10px;
  }
  .c-footer__sublabel { margin-top: 50px; }
  .c-footer__nav-row { font-size: var(--text-sm); }
  /* Variabele spacing tussen Boek-nu en de "Klaar om te schilderen?"
     tagline op phone wide, max 100px. clamp(60, 23vw, 100) schaalt
     mee met viewport-breedte. */
  .c-footer__inner--v4 > .c-footer__bottom { margin-top: clamp(60px, 23vw, 100px); }
  /* Iets meer ademruimte tussen E-mail/Instagram contact-rij en de
     legal-rij eronder. */
  .c-footer__inner--v4 > .c-footer__legal { margin-top: 56px; }
  /* Tagline + contact stacken op phone wide en kleiner: tagline
     bovenaan full-width, contact eronder in 2 gelijke kolommen
     (E-mail links, Instagram rechts). */
  .c-footer__bottom {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .c-footer__contact {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
  }
  /* Socials terug onder elkaar (1 kolom) op kleinere schermen. */
  .c-footer__contact-item:last-child {
    display: flex;
    flex-direction: column;
  }
}

/* Small phone (≤480px): brush + sparkle decoratie iets hoger trekken
   zodat ze bij de kleinere PIGMENT-letters blijven hangen i.p.v. te
   ver onder de boog. Multipliers verlaagd op de letter-h component.
   De wordmark margin (-7.1vw) cascadeert vanuit de 700px regel —
   schaalt automatisch mee voor smaller phones. */
@media (max-width: 480px) {
  .c-footer__t-brush {
    top: calc(var(--letter-h) * -0.5 + 120px);
  }
  .c-footer__t-sparkle {
    top: calc(var(--letter-h) * 0 + 120px);
  }
  /* E-mail / Instagram label en link op exact dezelfde font-size als
     de legal-rij ("© 2026 Pigment Paint & Sip · Privacy · ..."). De
     legal gebruikt --text-sm, dus we matchen daarmee. !important om
     specificity-issues uit te sluiten en zeker te zijn dat dit wint
     van de --text-base default op .c-footer__contact-item a. */
  .c-footer__contact-label,
  .c-footer__contact-item a {
    font-size: var(--text-sm) !important;
  }
  /* Instagram-blok (tweede contact-item) krijgt vaste 150px breedte
     zodat de @-handle lekker compact blijft op small phone. */
  .c-footer__contact-item:last-child {
    width: 150px;
  }
}

/* ---------- 26. BREAKPOINT INDICATOR (dev/design helper) ----------
   Kleine fixed badge rechtsonder die altijd toont in welke breakpoint
   je momenteel zit. Naam komt uit ::before content die per media query
   wijzigt. Handig tijdens design-iteraties — gebruik exact de naam in
   het badge wanneer je iets wil aanpassen aan een specifiek breakpoint. */
.c-bp-indicator {
  /* Tijdelijk uitgeschakeld — re-enable door display: none weg te halen */
  display: none !important;
  position: fixed;
  bottom: 12px;
  right: 12px;
  z-index: 9999;
  background: var(--color-ink);
  color: var(--color-cream);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(12, 5, 56, 0.25);
  opacity: 0.85;
}
.c-bp-indicator::before {
  content: 'desktop · ≥1651';
}
@media (max-width: 1650px) {
  .c-bp-indicator::before { content: 'mid · 901–1650'; }
}
@media (max-width: 1300px) {
  .c-bp-indicator::before { content: 'tablet · 901–1300'; }
}
@media (max-width: 900px) {
  .c-bp-indicator::before { content: 'mobile · ≤900'; }
}
@media (max-width: 700px) {
  .c-bp-indicator::before { content: 'phone wide · ≤700'; }
}
@media (max-width: 600px) {
  .c-bp-indicator::before { content: 'phone · ≤600'; }
}
@media (max-width: 480px) {
  .c-bp-indicator::before { content: 'small phone · ≤480'; }
}

/* =========================================================
   INTRO-VIDEO (fullscreen splash) — home
   ========================================================= */
.c-intro {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  cursor: pointer;
  z-index: 200;
  /* Geanimeerde huisstijl-gradient als achtergrond. Zichtbaar tot Simon een
     Vimeo-video toevoegt (die legt zich er dan bovenop). */
  background: linear-gradient(125deg,
    var(--color-primary-600) 0%,
    var(--color-lavender-800) 28%,
    var(--color-plum-600) 52%,
    var(--color-cyan-600) 76%,
    var(--color-primary-600) 100%);
  background-size: 300% 300%;
  animation: intro-gradient 20s ease-in-out infinite;
}
@keyframes intro-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .c-intro { animation: none; }
}
/* Terwijl de intro actief is: navbar verbergen (linsayscool-stijl). */
body.is-intro-active .c-navbar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity 0.5s var(--ease-inout), transform 0.5s var(--ease-inout);
}
.c-navbar {
  transition: opacity 0.5s var(--ease-inout), transform 0.5s var(--ease-inout);
}
.c-intro__video {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* Vimeo-iframe schaalt om de viewport te vullen (object-fit: cover-simulatie
   voor 16:9-video). */
.c-intro__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw;      /* 16:9 */
  min-height: 100vh;
  min-width: 177.78vh;  /* 16:9 */
  border: 0;
  pointer-events: none; /* klikken gaat naar de .c-intro (door-scroll) */
}
/* Subtiele donkere gradient zodat het witte wordmark leesbaar blijft. */
.c-intro__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(14,5,70,0.18) 0%, rgba(14,5,70,0.42) 100%);
}
.c-intro__center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.c-intro__wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 120px);  /* groot hero-formaat, schaalt mee */
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--color-white);
  text-shadow: 0 2px 24px rgba(14,5,70,0.35);
}
.c-intro__continue {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  color: var(--color-white);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.9;
}
.c-intro__continue-chevron {
  display: inline-flex;
  animation: intro-bounce 1.8s var(--ease-inout) infinite;
}
.c-intro__continue-chevron svg { width: 22px; height: 22px; }
@keyframes intro-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .c-intro__continue-chevron { animation: none; }
}
@media (max-width: 600px) {
  .c-intro__wordmark { font-size: clamp(40px, 13vw, 64px); }
}

/* =========================================================
   FOTO-BAND (gallerij met center-focus) — home
   Vervangt de video in "Bekijk wat je mag verwachten".
   ========================================================= */
.c-gallery-band {
  position: relative;
  max-width: 1100px;
  margin: 100px auto 0;
  /* Hoog genoeg voor de grotere centrale foto (68% breed, 4:3) zodat die
     nooit boven/onder wordt afgeclipt. */
  height: clamp(320px, 52vw, 620px);
  /* Percentage van de centrale foto-breedte, zodat de zij-previews op elke
     schermbreedte binnen de band blijven (geen overflow, geen harde snede). */
  --band-shift: 34%;
}
.c-gallery-band__track {
  position: absolute;
  inset: 0;
}
.c-gallery-band__slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(68%, 780px);
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-ink-10);
  box-shadow: 0 18px 50px rgba(14,5,70,0.18);
  transform: translate(-50%, -50%) scale(0.72);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.55s var(--ease-spring), opacity 0.45s var(--ease-inout);
  will-change: transform, opacity;
}
.c-gallery-band__slide img,
.c-gallery-band__color {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.c-gallery-band__slide.is-active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 3;
  pointer-events: none;
}
.c-gallery-band__slide.is-prev,
.c-gallery-band__slide.is-next {
  opacity: 0.5;
  z-index: 2;
  pointer-events: auto;
  cursor: pointer;
}
.c-gallery-band__slide.is-prev { transform: translate(calc(-50% - var(--band-shift)), -50%) scale(0.72); }
.c-gallery-band__slide.is-next { transform: translate(calc(-50% + var(--band-shift)), -50%) scale(0.72); }
.c-gallery-band__slide.is-prev:hover,
.c-gallery-band__slide.is-next:hover { opacity: 0.72; }

.c-gallery-band__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  border: 0;
  background: var(--color-white);
  color: var(--color-ink);
  box-shadow: 0 6px 20px rgba(14,5,70,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s var(--ease-inout), color 0.2s var(--ease-inout), transform 0.2s var(--ease-spring);
}
.c-gallery-band__nav:hover {
  background: var(--color-primary-500);
  color: var(--color-white);
  transform: translateY(-50%) scale(1.06);
}
.c-gallery-band__nav svg { width: 20px; height: 20px; }
.c-gallery-band__nav--prev { left: 6px; }
.c-gallery-band__nav--next { right: 6px; }

.c-gallery-band__dots {
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5;
}
.c-gallery-band__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--color-ink-10);
  cursor: pointer;
  transition: background 0.2s var(--ease-inout), transform 0.2s var(--ease-inout);
}
.c-gallery-band__dot.is-active {
  background: var(--color-primary-500);
  transform: scale(1.25);
}
@media (max-width: 900px) {
  .c-gallery-band { margin-top: 60px; }
  .c-gallery-band__slide { width: min(74%, 520px); }
  .c-gallery-band__nav { width: 44px; height: 44px; }
}
/* Telefoon: de foto-band mag écht 100% breed. Zelfde center-focus als desktop:
   centrale foto op 75vw, met langs beide kanten een kleine hint naar de vorige/
   volgende foto + de pijltjes. */
@media (max-width: 700px) {
  .c-gallery-band {
    max-width: none;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: 48px;
    height: 62vw;
    --band-shift: 20vw;
  }
  .c-gallery-band__track {
    /* Clip + fade samen: de schaduwen/randen worden binnen de fade-zone
       weggeveegd, dus geen harde afsnede tegen de schermrand. */
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }
  /* Geen schaduw op mobiel: die werd hard tegen de schermrand afgesneden. */
  .c-gallery-band__slide { width: 75vw; box-shadow: none; }
  /* Kleinere pijltjes op mobiel. */
  .c-gallery-band__nav { width: 38px; height: 38px; }
  .c-gallery-band__nav svg { width: 16px; height: 16px; }
  .c-gallery-band__nav--prev { left: 6px; }
  .c-gallery-band__nav--next { right: 6px; }
}