/* ============================================================================
   All4Trade — Design System
   Importeur & groothandel in Arabische en Perzische voedingsmiddelen
   ----------------------------------------------------------------------------
   1. Tokens            6. Buttons           11. Story / heritage
   2. Reset & base      7. Header / nav      12. Logistics
   3. Typography        8. Hero              13. Brands / marquee
   4. Layout            9. Stats             14. CTA / footer / float
   5. Decoration       10. Cards            15. Contact  16. Brand pages
                                             17. Animations  18. Responsive
   ========================================================================== */

/* ============================== 1. TOKENS ================================= */
:root {
  /* ── Huisstijl: Palm Green · Desert Ochre · Sand Beige ──
     Eén vaste merkgroen + één vaste oker. Donkerdere tinten
     uitsluitend voor achtergrond-verlopen/diepte. */
  --green-950: #081a0d;
  --green-900: #0b2613;
  --green-850: #0f3019;
  --green-800: #143f22;
  --green-700: #19502a;   /* PALM GREEN — primaire merkgroen */
  --green-650: #19502a;
  --green-600: #19502a;
  --green-500: #19502a;
  --lime-600: #19502a;
  --lime-500: #19502a;
  --lime-300: #19502a;

  /* Gold — Desert Ochre */
  --gold-700: #a87d36;   /* donkerder, voor randen/diepte */
  --gold-600: #c08f3e;
  --gold-500: #daa751;   /* DESERT OCHRE — primaire accent */
  --gold-400: #daa751;
  --gold-300: #daa751;
  --gold-100: #E3D5C1;

  /* Neutrals — Sand Beige + wit/zwart */
  --sand: #E3D5C1;       /* SAND BEIGE */
  --cream: #E3D5C1;
  --cream-200: #d7c7ae;
  --cream-300: #cbb89a;
  --paper: #F4EEE3;
  --ink: #16271C;
  --ink-soft: #4A5A4F;
  --ink-faint: #7C887F;
  --white: #ffffff;

  /* Category palette — afgestemd op de huisstijl (groen/oker/aardetinten) */
  --cat-dranken: #19502a;
  --cat-dadels: #9a6a2f;
  --cat-groenten: #3a7a48;
  --cat-koffie: #b07d35;
  --cat-melk: #c79a4a;
  --cat-rijst: #7e4f2a;

  /* Type */
  --font-display: "Ramadhan Mubarok", "Roboto Slab", "Georgia", serif;
  --font-serif: "Roboto Slab", Georgia, "Times New Roman", serif;
  --font-sans: "Roboto Slab", Georgia, "Times New Roman", serif;

  /* Spacing */
  --space-section: clamp(4rem, 9vw, 8rem);
  --container: 1200px;
  --container-wide: 1320px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);

  /* Radius / shape */
  --radius-sm: 3px;
  --radius: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --chamfer: 10px;

  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(7, 33, 15, 0.08);
  --shadow: 0 14px 38px -16px rgba(7, 33, 15, 0.28);
  --shadow-lg: 0 34px 70px -28px rgba(7, 33, 15, 0.45);
  --shadow-gold: 0 18px 40px -18px rgba(186, 132, 58, 0.55);

  --ring: 0 0 0 3px rgba(218, 167, 81, 0.55);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 84px;
}

/* ============================== 2. RESET & BASE =========================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  overflow-x: clip;
}
body {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; }
svg { width: 1.15em; height: 1.15em; } /* base icon size; overridden by context rules */
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--gold-400); color: var(--green-900); }
hr { border: none; height: 1px; background: rgba(0,0,0,.1); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 200;
  background: var(--gold-500); color: var(--green-900);
  padding: .7rem 1.1rem; border-radius: 0 0 10px 10px; font-family: var(--font-sans); font-weight: 700;
  transition: top .25s var(--ease);
}
.skip-link:focus { top: 0; }

/* ============================== 3. TYPOGRAPHY ============================= */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: .5px;
  color: var(--gold-500);
}
h1.display { font-size: clamp(2.9rem, 6.4vw, 5.4rem); }
h2.display { font-size: clamp(2.3rem, 4.8vw, 3.9rem); }
h3.display { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-sans); font-weight: 700;
  font-size: .8rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-700);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: currentColor; opacity: .8;
}
.eyebrow--center::after {
  content: ""; width: 26px; height: 2px; background: currentColor; opacity: .8;
}
.eyebrow--light { color: var(--gold-400); }

.lead {
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  line-height: 1.62; font-weight: 300; color: var(--ink-soft);
}
.muted { color: var(--ink-soft); }
.on-dark { color: var(--cream); }
.on-dark .lead, .on-dark .muted { color:#E3D5C1; }
.text-gold { color: var(--gold-500); }
.text-center { text-align: center; }
.balance { text-wrap: balance; }
strong { font-weight: 600; }

.section-head { max-width: 660px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 1rem; }
.section-head p { margin-top: 1rem; }

/* Arabic accent (subtitle in logo/headers) */
[lang="ar"] { font-family: "Segoe UI", "Noto Naskh Arabic", "Traditional Arabic", serif; }

/* ============================== 4. LAYOUT ================================ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: var(--container-wide); }
.container-narrow { max-width: 820px; }

.section { position: relative; padding-block: var(--space-section); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--green { background: var(--green-700); color: var(--cream); }
.section--green-deep { background: var(--green-700); color: var(--cream); }
/* Eén lichte sectie-tint door de hele site (paper). De .section--cream-klasse
   blijft bestaan voor bestaande pagina's, maar krijgt dezelfde tint als paper
   zodat lichte blokken consistent zijn. --cream blijft voor tekst/randen/kaarten. */
.section--cream { background: var(--paper); }
.section--paper { background: var(--paper); }

.grid { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split {
  display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center;
  grid-template-columns: 1fr 1fr;
}
.split--wide-left { grid-template-columns: 1.05fr .95fr; }
.stack-sm > * + * { margin-top: .75rem; }
.stack > * + * { margin-top: 1.15rem; }
.stack-lg > * + * { margin-top: 1.8rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

/* ============================== 5. DECORATION ============================ */
.pattern-bg { position: relative; }
.pattern-bg > * { position: relative; z-index: 1; }
.pattern-layer {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("../img/patterns/star-pattern.svg");
  background-size: 120px; opacity: .06;
}
.pattern-layer--fine { background-image: url("../img/patterns/star-pattern.svg"); background-size: 72px; opacity: .05; }
.pattern-layer--gold { opacity: .09; }

.gold-rule {
  display: flex; align-items: center; gap: 1rem; color: var(--gold-500);
}
.gold-rule::before, .gold-rule::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, currentColor, transparent); opacity: .5; }
.gold-rule svg { width: 22px; height: 22px; flex: none; }

/* Chamfered (Middle-Eastern octagon) — non-interactive accents */
.chamfer {
  --c: var(--chamfer);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

/* Pills / badges */
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-sans); font-weight: 600; font-size: .82rem;
  padding: .5rem .95rem; border-radius: 999px;
  background: rgba(218,167,81,.14); color: var(--gold-700);
  border: 1px solid #daa751;
}
.pill svg { width: 16px; height: 16px; }
.pill--solid { background: var(--gold-500); color: var(--green-900); border-color: transparent; }
.pill--light { background: rgba(248,242,231,.12); color: var(--cream); border-color: #E3D5C1; }
.pill--halal { background: rgba(111,168,56,.16); color: #4f7d28; border-color: #19502a; }

.icon { width: 24px; height: 24px; flex: none; }
.icon-lg { width: 30px; height: 30px; }

/* Organic image frames (filled with gradient + pattern + illustration) */
.frame {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(150deg, var(--green-650), var(--green-850));
  box-shadow: var(--shadow);
}
.frame::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url("../img/patterns/star-pattern.svg"); background-size: 120px; opacity: .08;
}
.frame > * { position: relative; z-index: 1; }
.frame--blob { border-radius: 58% 42% 52% 48% / 56% 50% 50% 44%; }
.frame--blob-2 { border-radius: 44% 56% 48% 52% / 46% 44% 56% 54%; }
.frame--leaf { border-radius: 46% 8% 46% 8%; }
.frame--arch { border-radius: 48% 48% 16px 16px / 36% 36% 5% 5%; }
.frame--rounded { border-radius: var(--radius-xl); }
.frame--gold { background: var(--gold-500); }
.frame--gold::after { opacity: .14; }
.frame-ring { padding: 12px; }
.frame-ring > .frame { width: 100%; height: 100%; }

.aspect-43 { aspect-ratio: 4/3; }
.aspect-11 { aspect-ratio: 1/1; }
.aspect-45 { aspect-ratio: 4/5; }

/* Curved section transitions */
.curve-bottom { position: relative; }
.curve-bottom::after {
  content: ""; position: absolute; left: -5%; right: -5%; bottom: -1px; height: clamp(40px, 6vw, 90px);
  background: var(--curve-color, var(--paper));
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.curve-top { position: relative; }
.curve-top::before {
  content: ""; position: absolute; left: -5%; right: -5%; top: -1px; height: clamp(40px, 6vw, 90px);
  background: var(--curve-color, var(--paper));
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

/* ============================== 6. BUTTONS ===============================
   Gegraveerde Arabische achthoek: gouden randlijst + vulling + hover-wipe.
   Goudrand via ::before-vulling die 2px naar binnen ligt; ::after is de
   kleur-"wipe" die bij hover van onderen omhoog schuift. */
:root{ --grad-gold: linear-gradient(108deg,#FBD56E 0%,#EFA52A 46%,#B8651A 100%);
  /* Knop-goud: standaard één solide toon; alleen Zinè behoudt de gradient */
  --btn-gold: var(--gold-500); --btn-gold-frame: var(--gold-700); }
.theme-zine{ --btn-gold: var(--grad-gold); --btn-gold-frame: var(--grad-gold); }
.btn {
  --frame: var(--btn-gold-frame);
  --fill:  var(--btn-gold);
  --fg:    #2a2113;
  --hover-bg: var(--green-700);
  --hover-fg: #fff;
  --oct: 11px;
  --clip: polygon(var(--oct) 0, calc(100% - var(--oct)) 0, 100% var(--oct), 100% calc(100% - var(--oct)), calc(100% - var(--oct)) 100%, var(--oct) 100%, 0 calc(100% - var(--oct)), 0 var(--oct));
  position: relative; z-index: 0; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 2.1rem; border-radius: 0;
  background: var(--frame); color: var(--fg);
  clip-path: var(--clip); box-shadow: none;
  font-family: var(--font-sans); font-weight: 700; font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; line-height: 1; white-space: nowrap;
  filter: drop-shadow(0 8px 16px rgba(16,42,26,.16));
  transition: transform .4s var(--ease), filter .4s var(--ease), color .45s var(--ease);
}
.btn svg { width: 18px; height: 18px; position: relative; }
.btn::before { content:""; position:absolute; inset:2px; z-index:-2; border:0; opacity:1;
  background: var(--fill); clip-path: var(--clip); transition:none; }
.btn::after { content:""; position:absolute; inset:2px; z-index:-1;
  background: var(--hover-bg); clip-path: var(--clip);
  transform: translateY(calc(100% + 6px)); transition: transform .55s var(--ease); }
.btn:hover { transform: translateY(-3px); filter: drop-shadow(0 14px 26px rgba(16,42,26,.30)); box-shadow:none; }
.btn:hover, .btn:focus-visible { color: var(--hover-fg); }
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }
.btn:active { transform: translateY(-1px); }
.btn:focus-visible { outline: 2px dashed var(--gold-300); outline-offset: 4px; }
.btn--lg { padding: 1.12rem 2.5rem; font-size: .82rem; --oct: 13px; }
.btn--block { display: flex; width: 100%; }
.btn--mini { --oct: 8px; padding: .55rem 1.15rem; font-size: .7rem; letter-spacing: .12em; }
/* varianten: alleen de kleur-variabelen wisselen */
.btn--primary { --frame: var(--btn-gold-frame); --fill: var(--btn-gold); --fg: #2a2113; --hover-bg: var(--green-700); --hover-fg: #fff; }
.btn--ghost, .btn--cream { --fill: var(--cream); --fg: var(--green-800); --hover-bg: var(--btn-gold); --hover-fg: #2a2113; }
.btn--ghost-gold { --fill: var(--green-700); --fg: #fff; --hover-bg: var(--btn-gold); --hover-fg: #2a2113; }
.btn--dark { --fill: var(--green-800); --fg: var(--cream); --hover-bg: var(--btn-gold); --hover-fg: #2a2113; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-sans); font-weight: 700; font-size: .93rem; color: var(--gold-700);
}
.link-arrow svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
.on-dark .link-arrow { color: var(--gold-400); }

/* ============================== 7. HEADER / NAV ========================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background .35s var(--ease), height .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(7,33,15,.55), transparent);
  opacity: 1; transition: opacity .35s var(--ease);
}
.site-header.scrolled {
  height: 70px; background: var(--green-800);
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.5);
  border-bottom-color: #daa751;
}
.site-header.scrolled::before { opacity: 0; }
.header-inner { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

/* Logo */
.logo { display: flex; align-items: center; gap: .7rem; }
.logo__mark { width: 46px; height: 46px; flex: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.3)); transition: transform .4s var(--ease); }
.logo:hover .logo__mark { transform: rotate(-6deg) scale(1.05); }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name { font-family: var(--font-sans); font-weight: 800; font-size: 1.5rem; color: var(--cream); letter-spacing: .01em; }
.logo__name b { color: var(--gold-500); font-weight: 800; }
.logo__ar { font-size: .82rem; color: var(--gold-400); letter-spacing: 2px; margin-top: 3px; opacity: .9; }

/* Primary nav */
.nav { display: flex; align-items: center; gap: .3rem; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-sans); font-weight: 600; font-size: .95rem;
  color: var(--cream); padding: .6rem .85rem; border-radius: 8px;
  transition: color .2s, background .2s;
}
.nav__link svg { width: 16px; height: 16px; opacity: .8; transition: transform .25s var(--ease); }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--gold-400); }
.nav__link:hover svg { transform: translateY(2px); }

/* Dropdown */
.nav__panel {
  position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 248px; padding: .6rem; border-radius: 16px;
  background: var(--green-850); border: 1px solid #daa751;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.nav__panel::before { content: ""; position: absolute; top: -18px; left: -10px; right: -10px; height: 18px; }
.nav__item:hover .nav__panel, .nav__item:focus-within .nav__panel, .nav__item.open .nav__panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav__panel a {
  display: flex; align-items: center; gap: .7rem; padding: .65rem .8rem; border-radius: 10px;
  font-family: var(--font-sans); font-size: .92rem; font-weight: 500; color: var(--cream);
  transition: background .2s, color .2s;
}
.nav__panel a svg { width: 18px; height: 18px; color: var(--gold-500); }
.nav__panel a:hover { background: rgba(218,167,81,.12); color: var(--gold-300); }

/* ---- Mega & wide dropdown panels ---- */
.nav__panel--mega { left: 0; right: auto; transform: translateX(0) translateY(8px); width: min(880px, 94vw); padding: 1rem 1rem .8rem; }
.nav__item:hover .nav__panel--mega, .nav__item:focus-within .nav__panel--mega, .nav__item.open .nav__panel--mega { transform: translateX(0) translateY(0); }
.nav__panel--wide { min-width: 452px; }
.nav__panel--right { left: auto; right: 0; transform: translateX(0) translateY(8px); }
.nav__item:hover .nav__panel--right, .nav__item:focus-within .nav__panel--right, .nav__item.open .nav__panel--right { transform: translateX(0) translateY(0); }
.megacat { display: grid; grid-template-columns: repeat(4, 1fr); gap: .05rem .5rem; }
.megacat__col { display: flex; flex-direction: column; }
.megacat__hd, .nav__hd { font-family: var(--font-sans); font-weight: 700; font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gold-500); padding: .5rem .7rem .3rem; }
.megacat a { font-size: .82rem; padding: .38rem .7rem; gap: .5rem; }
.megacat a svg { width: 17px; height: 17px; }
.nav__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
.megacat__foot { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; padding: .7rem .3rem 0; border-top: 1px solid rgba(218,167,81,.22); }
.megacat__all { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-sans); font-weight: 700; font-size: .82rem; color: var(--gold-300); padding: .35rem .5rem; }
.megacat__all svg { width: 16px; height: 16px; color: var(--gold-500); }
.megacat__all:hover { color: var(--cream); }
.megacat__promo { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; font-family: var(--font-sans); font-weight: 700; font-size: .8rem; color: var(--cream); padding: .4rem .7rem; border-radius: 9px; background: rgba(218,167,81,.14); border: 1px solid rgba(218,167,81,.4); }
.megacat__promo svg { width: 16px; height: 16px; color: var(--gold-400); }
.megacat__promo span { font-size: .56rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--gold-500); color: #2a2113; padding: .12rem .36rem; border-radius: 4px; }
.megacat__promo:hover { background: rgba(218,167,81,.24); }
.nav__panel em { font-style: normal; font-size: .58rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #2a2113; background: var(--gold-400); padding: .08rem .32rem; border-radius: 4px; margin-left: .2rem; }

/* Merken-dropdown: compacte 2-koloms lijst met alle merken */
.nav__panel--brands { min-width: 536px; }
.nav__panel--brands .nav__cols { gap: 0 1rem; }
.nav__panel--brands .nav__cols a { padding: .4rem .7rem; gap: .6rem; font-size: .9rem; }
.nav__panel--brands .nav__cols a svg { width: 18px; height: 18px; padding: 0; background: none; border-radius: 0; }
.nav__panel--brands .nav__cols a:hover svg { background: none; transform: translateX(2px); }
.nav__all-link { color: var(--gold-300); font-weight: 700; margin-top: .15rem; }

/* Actions */
.header-actions { display: flex; align-items: center; gap: .8rem; }
.lang { display: flex; align-items: center; gap: .3rem; }
.lang button {
  width: 30px; height: 22px; border-radius: 4px; overflow: hidden; opacity: .55;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: opacity .2s, transform .2s;
  display: grid; place-items: center;
}
.lang button:hover { opacity: 1; transform: translateY(-1px); }
.lang button[aria-pressed="true"] { opacity: 1; outline: 2px solid var(--gold-500); outline-offset: 1px; }
.flag { width: 100%; height: 100%; display: block; }

.menu-toggle { display: inline-flex; }
.menu-toggle svg { width: 18px; height: 18px; }

/* Mobile drawer */
.drawer-backdrop { position: fixed; inset: 0; z-index: 110; background: rgba(7,33,15,.6); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; transition: opacity .3s; }
.drawer-backdrop.open { opacity: 1; visibility: visible; }
.drawer {
  position: fixed; top: 0; right: 0; z-index: 120; height: 100dvh; width: min(360px, 86vw);
  background: var(--green-850); border-left: 1px solid #daa751;
  padding: 1.4rem; overflow-y: auto; transform: translateX(102%); transition: transform .35s var(--ease);
  display: flex; flex-direction: column; gap: .3rem;
}
.drawer.open { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.drawer__close { width: 44px; height: 44px; border-radius: 10px; color: var(--cream); background: rgba(248,242,231,.08); display: grid; place-items: center; }
.drawer a.nav__link, .drawer button.nav__link { font-size: 1.05rem; padding: .85rem .6rem; width: 100%; justify-content: space-between; border-radius: 10px; }
.drawer a.nav__link:hover { background: rgba(218,167,81,.1); }
.drawer__sub { padding-left: .8rem; margin: .1rem 0 .4rem; border-left: 2px solid #daa751; }
.drawer__sub a { display: block; padding: .55rem .7rem; font-family: var(--font-sans); font-size: .92rem; color:#E3D5C1; border-radius: 8px; }
.drawer__sub a:hover { color: var(--gold-300); background: rgba(218,167,81,.08); }
.drawer__cta { margin-top: 1rem; display: grid; gap: .7rem; }
.drawer__foot { margin-top: auto; padding-top: 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* ============================== 8. HERO ================================== */
.hero {
  position: relative; background: var(--green-700); color: var(--cream);
  padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4.5rem));
  padding-bottom: clamp(3.5rem, 7vw, 7rem);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .07;
  background-image: url("../img/patterns/star-pattern.svg"); background-size: 130px;
}
.hero::after {
  content: ""; position: absolute; z-index: 0; width: 60vw; height: 60vw; max-width: 720px; max-height: 720px;
  right: -12vw; top: -16vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(218,167,81,.22), transparent 62%);
}
.hero__inner { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero h1 { margin: 1.1rem 0 1.3rem; color: var(--gold-500); }
.hero h1 .cream { color: var(--cream); }
.hero h1 .gold { color: var(--gold-500); display: block; }
.hero__lead { font-size: clamp(1.1rem, 1.7vw, 1.35rem); color:#E3D5C1; font-weight: 300; max-width: 36ch; }
.hero__trust { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; align-items: center; }
.hero__trust-item { display: flex; align-items: center; gap: .6rem; font-family: var(--font-sans); font-size: .9rem; color:#E3D5C1; }
.hero__trust-item svg { width: 22px; height: 22px; color: var(--gold-400); }

/* Hero collage */
.hero-collage { position: relative; aspect-ratio: 1/1; }
.hero-collage__main {
  position: absolute; inset: 6% 0 6% 8%; display: grid; place-items: center;
}
.hero-collage__tile {
  position: absolute; display: grid; place-items: center;
  box-shadow: var(--shadow-lg);
}
.hero-collage__tile svg.illu { width: 64%; height: 64%; }
.tile-a { width: 40%; aspect-ratio: 1/1; top: 4%; left: 4%; }
.tile-b { width: 34%; aspect-ratio: 1/1; bottom: 2%; right: 6%; }
.chip {
  position: absolute; display: inline-flex; align-items: center; gap: .5rem;
  background: var(--cream); color: var(--green-900); font-family: var(--font-sans); font-weight: 700;
  font-size: .85rem; padding: .6rem .9rem; border-radius: 12px; box-shadow: var(--shadow);
}
.chip svg { width: 18px; height: 18px; color: var(--gold-600); }
.chip--1 { top: 8%; right: 2%; }
.chip--2 { bottom: 10%; left: 0; }
.chip--halal { color: var(--green-700); }
.chip--halal svg { color: var(--lime-600); }

/* ============================== 9. STATS ================================= */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.stat { text-align: center; }
.stat__num { font-family: var(--font-sans); font-weight: 800; letter-spacing: -.02em; font-size: clamp(2.6rem, 5vw, 3.7rem); color: var(--gold-500); line-height: 1; }
.stat__label { font-family: var(--font-sans); font-weight: 600; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-top: .6rem; color: var(--ink-soft); }
.on-dark .stat__label { color:#E3D5C1; }
.stats--bar {
  background: var(--green-850); color: var(--cream); border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 2.8rem); box-shadow: var(--shadow);
  border: 1px solid #daa751; position: relative; overflow: hidden;
}
.stats--bar .stat + .stat { border-left: 1px solid #daa751; }

/* ============================== 10. CARDS =============================== */
.card {
  background: var(--white); border-radius: var(--radius-lg); padding: clamp(1.5rem, 2.5vw, 2rem);
  box-shadow: var(--shadow-sm); border: 1px solid #3a4a40;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  height: 100%;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: #daa751; }

/* (ongebruikte .feature-kaartvariant verwijderd) */

/* Value card variant (dark, from template Kernwaarden) */
.value-card {
  background: var(--green-800); border-radius: var(--radius); padding: 1.6rem 1.3rem; text-align: center;
  border: 1.5px solid #daa751; height: 100%;
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.value-card:hover { transform: translateY(-5px); border-color: #daa751; background: var(--green-800); }
.value-card .vc-icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(218,167,81,.12); color: var(--gold-500); border: 1px solid #daa751; }
.value-card .vc-icon svg { width: 30px; height: 30px; }
.value-card h3 { font-family: var(--font-sans); font-weight: 700; font-size: 1rem; color: var(--cream); }
.value-card p { font-size: .9rem; color:#E3D5C1; margin-top: .4rem; }
/* #waarden krijgt de stijl/kleur van de oude statement-band: rijker groen verloop + sterpatroon */
#waarden { background: linear-gradient(160deg, var(--green-700), var(--green-850)); }
#waarden > .container { position: relative; z-index: 1; }

/* Category cards */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.cat-card {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  min-height: 200px; padding: 1.6rem; display: flex; flex-direction: column; justify-content: space-between;
  color: var(--white); background: var(--cat-color, var(--green-700)); isolation: isolate;
  box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.cat-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .12;
  background-image: url("../img/patterns/star-pattern.svg"); background-size: 90px;
}
.cat-card::after {
  content: ""; position: absolute; right: -30px; bottom: -30px; width: 150px; height: 150px; z-index: -1;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 65%);
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.cat-card__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(255,255,255,.16); color: #fff; }
.cat-card__icon svg { width: 28px; height: 28px; }
.cat-card h3 { font-family: var(--font-sans); font-weight: 600; font-size: 1.4rem; line-height: 1.12; letter-spacing: .005em; }
.cat-card .cat-card__meta { display: flex; align-items: center; justify-content: space-between; }
.cat-card .cc-go { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; transition: background .25s, transform .25s; }
.cat-card .cc-go svg { width: 18px; height: 18px; }
.cat-card:hover .cc-go { background: rgba(255,255,255,.32); transform: translateX(3px); }

/* Category directory — alle 24 categorieën, uitklappend op hover */
.catdir { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.9rem, 1.7vw, 1.35rem); }
@media (max-width: 1040px){ .catdir { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px){ .catdir { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px){ .catdir { grid-template-columns: 1fr; } }
.catdir__tile {
  position: relative; overflow: hidden; border-radius: 16px; min-height: 202px;
  padding: 1.6rem 1.5rem; background: var(--white); border: 1px solid rgba(20,60,35,.10);
  box-shadow: var(--shadow-sm); isolation: isolate;
  display: flex; flex-direction: column; gap: 1.1rem;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s var(--ease);
}
.catdir__tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: var(--cat-color, var(--green-700)); transition: opacity .4s var(--ease);
}
.catdir__tile::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--cat-color, var(--green-700)); transform: scaleY(0); transform-origin: top; opacity: .95;
  transition: transform .4s var(--ease);
}
.catdir__tile:hover, .catdir__tile:focus-visible {
  transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--cat-color, var(--green-700));
}
.catdir__tile:hover::before, .catdir__tile:focus-visible::before { opacity: .08; }
.catdir__tile:hover::after, .catdir__tile:focus-visible::after { transform: scaleY(1); }
.catdir__ic {
  width: 60px; height: 60px; border-radius: 17px; display: grid; place-items: center;
  background: var(--cat-color, var(--green-700)); color: #fff; flex: none;
  box-shadow: 0 7px 18px -8px rgba(7,33,15,.55); transition: transform .45s var(--ease);
}
.catdir__ic svg { width: 31px; height: 31px; }
.catdir__tile:hover .catdir__ic, .catdir__tile:focus-visible .catdir__ic { transform: rotate(-7deg) scale(1.08); }
.catdir__body { margin-top: auto; display: flex; flex-direction: column; gap: .35rem; padding-right: 1.4rem; }
.catdir__name {
  font-family: var(--font-sans); font-weight: 700; font-size: 1.2rem; line-height: 1.16;
  color: var(--green-850); letter-spacing: .005em;
}
.catdir__desc { font-family: var(--font-serif); font-size: .9rem; line-height: 1.4; color: var(--ink-soft); }
.catdir__tile:hover .catdir__name, .catdir__tile:focus-visible .catdir__name { color: var(--cat-color, var(--green-850)); }
.catdir__go {
  position: absolute; top: 1.1rem; right: 1.1rem; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: var(--cat-color, var(--green-700));
  opacity: 0; transform: translate(9px,-9px) scale(.6);
  transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.catdir__go svg { width: 16px; height: 16px; }
.catdir__tile:hover .catdir__go, .catdir__tile:focus-visible .catdir__go { opacity: 1; transform: none; }
.catdir__tile:focus-visible { outline: 2px solid var(--cat-color, var(--green-700)); outline-offset: 3px; }

/* Uitgelichte categorieën (homepage): vergrote variant van de categorietegel */
.catdir--featured { grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.catdir__tile--lg { min-height: 210px; padding: 1.7rem 1.6rem 1.5rem; gap: 1.2rem; }
.catdir__tile--lg .catdir__ic { width: 62px; height: 62px; border-radius: 17px; }
.catdir__tile--lg .catdir__ic svg { width: 32px; height: 32px; }
.catdir__body { margin-top: auto; }
.catdir__kicker { display: block; font-family: var(--font-sans); font-weight: 700; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cat-color, var(--gold-700)); }
.catdir__tile--lg .catdir__name { display: block; font-size: 1.34rem; margin-top: .35rem; padding-right: 0; }
.catdir__desc { font-size: .95rem; color: var(--ink-soft); line-height: 1.5; margin-top: .45rem; padding-right: .6rem; }
.catdir__tile--lg .catdir__go { top: 1.4rem; right: 1.4rem; }
@media (max-width: 1080px) { .catdir--featured { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .catdir--featured { grid-template-columns: 1fr; } .catdir__tile--lg { min-height: 172px; } }
@media (max-width: 680px) {
  .catdir { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
  .catdir__tile { min-height: 128px; padding: 1.05rem 1rem; }
  .catdir__ic { width: 42px; height: 42px; }
  .catdir__ic svg { width: 22px; height: 22px; }
  .catdir__name { font-size: .94rem; }
}
/* ------------------------------------------------------------------
   TELEFOON — uitgelicht assortiment compact: alle 6 categorieën in
   één oogopslag als icoon + naam (kicker/omschrijving weg om ruimte
   te sparen). Hogere specificiteit dan de generieke .catdir-regels. */
@media (max-width: 640px) {
  .catdir.catdir--featured { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .catdir--featured .catdir__tile--lg {
    min-height: 132px; padding: 1.05rem .95rem; gap: .6rem;
    flex-direction: column; align-items: flex-start; justify-content: center;
  }
  .catdir--featured .catdir__tile--lg .catdir__kicker,
  .catdir--featured .catdir__tile--lg .catdir__desc,
  .catdir--featured .catdir__tile--lg .catdir__go { display: none; }
  .catdir--featured .catdir__tile--lg .catdir__ic { width: 46px; height: 46px; border-radius: 13px; }
  .catdir--featured .catdir__tile--lg .catdir__ic svg { width: 24px; height: 24px; }
  .catdir--featured .catdir__tile--lg .catdir__name {
    font-size: 1.02rem; line-height: 1.2; margin-top: 0; padding-right: 0;
  }
}

/* Testimonial / quote */
.quote-card { background: var(--white); border-radius: var(--radius-lg); padding: clamp(1.8rem,3vw,2.6rem); box-shadow: var(--shadow-sm); border: 1px solid #3a4a40; position: relative; }
.quote-card .q-mark { color: var(--gold-400); width: 44px; height: 44px; margin-bottom: .4rem; }
.quote-card blockquote { font-size: 1.15rem; line-height: 1.6; color: var(--green-800); font-weight: 300; }
.quote-card .q-author { margin-top: 1.2rem; display: flex; align-items: center; gap: .8rem; }
.quote-card .q-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--gold-500); color: var(--green-900); display: grid; place-items: center; font-family: var(--font-sans); font-weight: 800; }
.quote-card .q-name { font-family: var(--font-sans); font-weight: 700; color: var(--green-800); }
.quote-card .q-role { font-size: .85rem; color: var(--ink-faint); }

/* ============================== 11. STORY / HERITAGE ==================== */
.heritage { position: relative; background: var(--green-700); color: var(--cream); overflow: hidden; }
.heritage::before { content: ""; position: absolute; inset: 0; opacity: .06; background-image: url("../img/patterns/star-pattern.svg"); background-size: 130px; }
.heritage__inner { position: relative; z-index: 1; }
.timeline { position: relative; margin-top: 2.4rem; }
.timeline::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--gold-500), transparent); }
.tl-item { position: relative; padding-left: 3rem; }
.tl-item + .tl-item { margin-top: 1.6rem; }
.tl-item::before { content: ""; position: absolute; left: 4px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold-500); box-shadow: 0 0 0 5px rgba(218,167,81,.18); }
.tl-year { font-family: var(--font-sans); font-weight: 800; letter-spacing: .02em; font-size: 1.3rem; color: var(--gold-500); line-height: 1; }
.tl-item h4 { font-family: var(--font-sans); font-weight: 700; margin: .35rem 0 .3rem; color: var(--cream); }
.tl-item p { color:#E3D5C1; font-size: .97rem; }
/* Tijdlijn op lichte achtergrond */
.timeline--light .tl-year { color: var(--gold-700); }
.timeline--light .tl-item h4 { color: var(--green-800); }
.timeline--light .tl-item p { color: var(--ink-soft); }
/* twee losse verhaal-alinea's kregen door de globale margin-reset geen tussenruimte */
.heritage p + p { margin-top: 1.05rem; }
/* ---- Scroll-getekende tijdlijn (ons verhaal) — progressive enhancement ---- */
.timeline.js-tl::before { background: rgba(218,167,81,.22); }
.timeline.js-tl::after { content:""; position:absolute; left:11px; top:6px; width:2px;
  height:var(--tl,0px); max-height:calc(100% - 12px);
  background:linear-gradient(var(--gold-300),var(--gold-500));
  box-shadow:0 0 9px rgba(239,213,160,.55); }
.timeline.js-tl .tl-item { opacity:.44; transform:translateX(10px);
  transition:opacity .55s var(--ease), transform .55s var(--ease); }
.timeline.js-tl .tl-item.lit { opacity:1; transform:none; }
.timeline.js-tl .tl-item::before { background:rgba(218,167,81,.3); box-shadow:0 0 0 5px rgba(218,167,81,.06);
  transition:background .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease); }
.timeline.js-tl .tl-item.lit::before { background:var(--gold-400);
  box-shadow:0 0 0 5px rgba(218,167,81,.2), 0 0 14px rgba(239,213,160,.75); transform:scale(1.15); }
@media (prefers-reduced-motion: reduce){
  .timeline.js-tl .tl-item { opacity:1; transform:none; }
  .timeline.js-tl::after { display:none; }
  .timeline.js-tl::before { background:linear-gradient(var(--gold-500), transparent); }
}
/* Telefoon: hele tijdlijn direct leesbaar, geen scroll-dimming (die op een
   klein scherm eerder als vage/kapotte tekst overkomt dan als effect). */
@media (max-width: 640px){
  .timeline.js-tl .tl-item { opacity:1; transform:none; }
  .timeline.js-tl::after { display:none; }
  .timeline.js-tl::before { background:linear-gradient(var(--gold-500), transparent); }
}

/* Collage for heritage */
.collage { position: relative; aspect-ratio: 4/5; }
.collage__tile { position: absolute; box-shadow: var(--shadow-lg); display: grid; place-items: center; }
.collage__tile svg.illu { width: 60%; height: 60%; }
.collage__tile.big { inset: 0 14% 26% 0; }
.collage__tile.mid { width: 46%; aspect-ratio: 4/5; right: 0; bottom: 8%; }
.collage__tile.sm { width: 33%; aspect-ratio: 1/1; left: 8%; bottom: 0; }
.collage__badge { position: absolute; top: 6%; right: 4%; z-index: 3; background: var(--cream); color: var(--green-900); border-radius: 16px; padding: .8rem 1rem; text-align: center; box-shadow: var(--shadow); }
.collage__badge .cb-num { font-family: var(--font-sans); font-weight: 800; font-size: 1.7rem; color: var(--gold-600); line-height: 1; }
.collage__badge .cb-txt { font-family: var(--font-sans); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }

/* ============================== 12. LOGISTICS ========================== */
.logi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem,2vw,1.5rem); counter-reset: step; }
.logi-step {
  position: relative; background: var(--white); border-radius: var(--radius-lg); padding: 2rem 1.5rem 1.7rem;
  border: 1px solid #3a4a40; box-shadow: var(--shadow-sm); height: 100%;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.logi-step:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.logi-step__n { counter-increment: step; position: absolute; top: -18px; left: 1.5rem;
  width: 40px; height: 40px; border-radius: 12px; background: var(--gold-500);
  color: var(--green-900); display: grid; place-items: center; font-family: var(--font-sans); font-weight: 800; box-shadow: var(--shadow-sm); }
.logi-step__n::before { content: counter(step, decimal-leading-zero); }
.logi-step .li-icon { color: var(--green-600); margin: .4rem 0 1rem; }
.logi-step .li-icon svg { width: 38px; height: 38px; }
.logi-step h3 { font-family: var(--font-sans); font-weight: 700; font-size: 1.1rem; color: var(--green-800); margin-bottom: .45rem; }
.logi-step p { font-size: .95rem; color: var(--ink-soft); }

/* ============================== 13. BRANDS / MARQUEE ==================== */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; gap: clamp(2rem,5vw,4.5rem); width: max-content; animation: marquee 36s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.brand-logo {
  display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 .5rem;
  font-family: var(--font-sans); font-weight: 800; font-size: 1.5rem; letter-spacing: .02em;
  color: var(--green-700); opacity: .8; transition: opacity .25s, transform .25s; white-space: nowrap;
}
.brand-logo:hover { opacity: 1; transform: translateY(-2px); }
.on-dark .brand-logo { color: var(--cream); }

/* Brand grid (merken overview) */
.brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem,2vw,1.4rem); }
.brand-tile {
  position: relative; aspect-ratio: 16/10; border-radius: var(--radius); overflow: hidden;
  background: var(--white); border: 1px solid #3a4a40; box-shadow: var(--shadow-sm);
  display: grid; place-items: center; padding: 1.2rem; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.brand-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #daa751; }
.brand-tile__name { font-family: var(--font-sans); font-weight: 800; font-size: 1.4rem; color: var(--green-700); text-align: center; }
.brand-tile__cat { position: absolute; top: .7rem; left: .7rem; font-family: var(--font-sans); font-weight: 600; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-700); background: rgba(218,167,81,.12); padding: .25rem .55rem; border-radius: 6px; }
.brand-tile__go { position: absolute; bottom: .7rem; right: .7rem; opacity: 0; transform: translateX(-4px); transition: opacity .3s, transform .3s; color: var(--gold-600); }
.brand-tile:hover .brand-tile__go { opacity: 1; transform: none; }
.brand-tile--logo { align-content: center; justify-items: center; row-gap: .8rem; }
.brand-tile__logo { max-height: 54px; max-width: 66%; object-fit: contain; }
.brand-tile--logo .brand-tile__title { font-family: var(--font-sans); font-weight: 700; font-size: .9rem; color: var(--green-800); }

/* Merkenoverzicht (/merken): het logo is de knop, groter en zonder naamlabel eronder */
.brand-grid--all .brand-tile { border-color: #ece3d2; padding: clamp(1.1rem,2.2vw,1.7rem); }
.brand-grid--all .brand-tile:hover { border-color: #daa751; }
.brand-grid--all .brand-tile--logo { row-gap: 0; }
.brand-grid--all .brand-tile__logo { max-height: clamp(76px,9vw,108px); max-width: 84%; }
.brand-grid--all .brand-tile__title { display: none; }
.brand-grid--all .brand-tile__name { font-size: clamp(1.5rem,2.6vw,2.1rem); }

/* Gerelateerde-merken op merkpagina's: centreer de tegels wanneer de rij niet
   vol is (meestal 2-3 tegels i.p.v. 4), i.p.v. links uitlijnen met een gat
   rechts. Tegelbreedtes gelijk aan het raster; het merkenoverzicht
   (.brand-grid--all) behoudt zijn volledige raster. */
.brand-grid:not(.brand-grid--all){ display:flex; flex-wrap:wrap; justify-content:center; }
.brand-grid:not(.brand-grid--all) .brand-tile{ flex:0 1 calc((100% - 3 * clamp(1rem,2vw,1.4rem)) / 4); }
@media (max-width:1080px){ .brand-grid:not(.brand-grid--all) .brand-tile{ flex-basis:calc((100% - 2 * clamp(1rem,2vw,1.4rem)) / 3); } }
@media (max-width:680px){ .brand-grid:not(.brand-grid--all) .brand-tile{ flex-basis:calc((100% - clamp(1rem,2vw,1.4rem)) / 2); } }
@media (max-width:460px){ .brand-grid:not(.brand-grid--all) .brand-tile{ flex-basis:100%; } }

/* Merkenoverzicht: hover-reveal met merkinfo (in merkkleur) — alleen /merken */
.brand-tile__info { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: .5rem; padding: 1.35rem;
  color: #fff; background: linear-gradient(158deg, var(--tc1, #15512C), var(--tc2, #0f3019));
  opacity: 0; visibility: hidden; transform: scale(1.02);
  transition: opacity .34s var(--ease), visibility .34s var(--ease), transform .34s var(--ease); }
.brand-tile__info::before { content: ""; position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background: url("../img/patterns/star-pattern.svg") center/104px; }
.brand-tile:hover .brand-tile__info,
.brand-tile:focus-visible .brand-tile__info { opacity: 1; visibility: visible; transform: none; }
.brand-tile__info-t { position: relative; font-family: var(--font-sans); font-weight: 800; font-size: 1.12rem; letter-spacing: .01em; }
.brand-tile__info-d { position: relative; font-size: .85rem; line-height: 1.5; color: rgba(255,255,255,.92); max-width: 32ch; }
.brand-tile__info-go { position: relative; margin-top: .2rem; display: inline-flex; align-items: center; gap: .42rem;
  font-family: var(--font-sans); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gold-300); }
.brand-tile__info-go svg { width: 15px; height: 15px; }
@media (hover: none) { .brand-tile__info { transition: none; } }

/* Foto-hero: full-bleed beeld met tekst erop (template voor contentpagina's) */
.photo-hero { position: relative; min-height: clamp(520px, 74vh, 780px); display: flex; align-items: flex-end; overflow: hidden; color: var(--cream); background: var(--green-850); }
.photo-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, rgba(8,22,12,.6), rgba(8,22,12,.24) 50%, rgba(8,22,12,0) 76%),
  linear-gradient(to bottom, rgba(10,26,15,.5), rgba(10,26,15,.1) 38%, rgba(8,22,12,.88)); }
.photo-hero__inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(7rem, 14vh, 10rem) clamp(3rem, 7vh, 4.5rem); }
.photo-hero .hero__lead { color: rgba(248,242,231,.94); max-width: 56ch; }
/* Zonder kruimelpad staat de kopij wat hoger in het beeld. */
.photo-hero--lift .photo-hero__inner { padding-block: clamp(6rem, 12vh, 8.5rem) clamp(5rem, 12vh, 8rem); }
.photo-hero .breadcrumb a { color: rgba(248,242,231,.8); }
@media (prefers-reduced-motion: no-preference) {
  .photo-hero__img { animation: heroPhotoZoom 7s var(--ease) both; }
}

/* Groot videoblok (over-ons) */
.video-band { position: relative; width: 100%; aspect-ratio: 16/9; min-height: 360px; border-radius: var(--radius-xl); overflow: hidden;
  display: grid; place-items: center; cursor: pointer; background: var(--green-850) center/cover no-repeat;
  box-shadow: 0 0 0 3px var(--gold-500), var(--shadow-lg); }
.video-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,33,17,.28), rgba(9,33,17,.74)); }
.video-band::after { content: ""; position: absolute; inset: 0; background: url("../img/patterns/star-pattern.svg") center/150px; opacity: .06; }
.video-band__play { position: relative; z-index: 2; width: clamp(76px,8vw,110px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  color: var(--green-900); background: var(--gold-400); box-shadow: 0 16px 40px rgba(0,0,0,.45); transition: transform .3s var(--ease), background .3s var(--ease); }
.video-band__play svg { width: 40%; height: 40%; margin-left: 7%; }
.video-band__play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold-400); animation: pulse 2.6s ease-out infinite; }
.video-band:hover .video-band__play, .video-band:focus-visible .video-band__play { transform: scale(1.08); background: var(--gold-500); }
.video-band__cap { position: absolute; z-index: 2; left: clamp(1.4rem,3vw,2.6rem); bottom: clamp(1.3rem,3vw,2rem); right: clamp(1.4rem,3vw,2.6rem); }
.video-band__t { font-family: var(--font-display); font-weight: 400; color: var(--cream); font-size: clamp(1.6rem,3.4vw,2.7rem); line-height: 1.1; margin-top: .4rem; }
.video-band__tag { position: absolute; z-index: 2; top: clamp(1.2rem,2.5vw,1.7rem); right: clamp(1.2rem,2.5vw,1.7rem);
  font-family: var(--font-sans); font-weight: 700; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--green-900); background: var(--gold-400); padding: .42rem .85rem; border-radius: 999px; }
@media (max-width: 640px){ .video-band{ aspect-ratio: 4/3; } }

/* Familie-quote (over-ons) */
.fam-quote { position: relative; margin: 1.8rem 0 0; padding: 1.4rem 1.6rem 1.4rem 3.4rem;
  background: linear-gradient(150deg, rgba(218,167,81,.1), rgba(218,167,81,.03));
  border: 1px solid #daa751; border-left: 4px solid var(--gold-500); border-radius: 12px; }
.fam-quote svg { position: absolute; top: 1.3rem; left: 1.2rem; width: 26px; height: 26px; color: var(--gold-500); }
.fam-quote p { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem,2.4vw,1.75rem); line-height: 1.28; color: var(--green-800); }
.fam-quote cite { display: block; margin-top: .7rem; font-family: var(--font-sans); font-weight: 700; font-style: normal; font-size: .82rem; letter-spacing: .04em; color: var(--gold-700); }

/* MENA-herkomstkaart (over-ons): interactieve SVG-kaart */
.menamap { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid #3a4a40; box-shadow: var(--shadow);
  background: linear-gradient(160deg, #f3ecdd, #e9e0cd); }
.menamap::before { content: ""; position: absolute; inset: 0; background: url("../img/patterns/star-pattern.svg") center/150px; opacity: .05; pointer-events: none; }
.menamap__bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .95rem 1.4rem; background: var(--green-850); color: var(--cream); }
.menamap__bar::after { content: ""; position: absolute; inset: 0; background: url("../img/patterns/star-pattern.svg") center/90px; opacity: .09; }
.menamap__bar-l { position: relative; display: flex; align-items: center; gap: .7rem; font-family: var(--font-sans); font-weight: 800; font-size: .96rem; }
.menamap__bar-l svg { width: 20px; height: 20px; color: var(--gold-400); }
.menamap__bar-code { position: relative; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .74rem; letter-spacing: .22em; color: var(--gold-300); text-transform: uppercase; }
.menamap__canvas { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.menamap__canvas .ctx { fill: #dcd6c6; stroke: #ece5d6; stroke-width: .3; }
.menamap__canvas .mena { fill: #2f6d43; stroke: #f3ecdd; stroke-width: .45; cursor: pointer;
  transition: fill .25s var(--ease), transform .25s var(--ease); transform-box: fill-box; transform-origin: center; }
.menamap__canvas .mena:hover, .menamap__canvas .mena.is-active { fill: var(--gold-500); }
.menamap__dot { fill: var(--gold-500); stroke: #fff; stroke-width: .5; }
.menamap__tip { position: absolute; z-index: 5; top: 0; left: 0; pointer-events: none; opacity: 0; transform: translate(-50%, -118%) scale(.96);
  transition: opacity .18s var(--ease), transform .18s var(--ease); background: var(--green-900); color: var(--cream);
  border: 1px solid var(--gold-600); border-radius: 10px; padding: .55rem .8rem; box-shadow: var(--shadow-lg); white-space: nowrap; }
.menamap__tip.show { opacity: 1; transform: translate(-50%, -128%) scale(1); }
.menamap__tip b { font-family: var(--font-sans); font-weight: 800; font-size: .92rem; color: var(--cream); display: block; }
.menamap__tip span { font-size: .78rem; color: var(--gold-300); }
.menamap__tip::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; background: var(--green-900);
  border-right: 1px solid var(--gold-600); border-bottom: 1px solid var(--gold-600); transform: translateX(-50%) rotate(45deg); }

/* Legenda onder de kaart: landen per regio als inline chips */
.menamap-legend { display: grid; gap: .9rem; margin-top: 1.5rem; }
.menareg { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .7rem; }
.menareg__t { font-family: var(--font-sans); font-weight: 800; font-size: .82rem; letter-spacing: .04em; color: var(--green-800); margin-right: .3rem; }
.menachip { font-family: var(--font-sans); font-weight: 600; font-size: .86rem; color: var(--green-850); background: var(--white);
  border: 1px solid #e4dbc8; border-radius: 999px; padding: .3rem .8rem; cursor: default;
  transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease); }
.menachip:hover, .menachip.is-active { border-color: var(--gold-500); background: rgba(218,167,81,.12); color: var(--green-900); }

/* Herkomst-manifest (over-ons): douane-/vrachtdocument — industrieel maar warm */
.origins-lead { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.4rem,3vw,2.6rem); align-items: center; margin-bottom: clamp(1.8rem,3vw,2.6rem); }
.origins-stat { text-align: center; padding-right: clamp(1.4rem,3vw,2.6rem); border-right: 1px solid #e4dbc8; }
.origins-stat__n { font-family: var(--font-display); font-weight: 400; font-size: clamp(3.4rem,7vw,5.2rem); line-height: .9; color: var(--gold-600); }
.origins-stat__l { font-family: var(--font-sans); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green-700); margin-top: .4rem; }
@media (max-width: 640px){ .origins-lead{ grid-template-columns: 1fr; } .origins-stat{ border-right: 0; border-bottom: 1px solid #e4dbc8; padding: 0 0 1.2rem; } }

.origins-doc { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid #3a4a40; box-shadow: var(--shadow); background: var(--white); }
.origins-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .95rem 1.4rem; background: var(--green-850); color: var(--cream); position: relative; overflow: hidden; }
.origins-bar::after { content: ""; position: absolute; inset: 0; background: url("../img/patterns/star-pattern.svg") center/90px; opacity: .09; }
.origins-bar__l { position: relative; display: flex; align-items: center; gap: .7rem; font-family: var(--font-sans); font-weight: 800; font-size: .96rem; letter-spacing: .01em; }
.origins-bar__l svg { width: 20px; height: 20px; color: var(--gold-400); }
.origins-bar__code { position: relative; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .74rem; letter-spacing: .22em; color: var(--gold-300); text-transform: uppercase; }
.origins-region { padding: 1.3rem 1.4rem; border-top: 1px solid #ece3d2; }
.origins-region:first-of-type { border-top: 0; }
.origins-region__h { display: flex; align-items: baseline; gap: .7rem; margin-bottom: 1rem; }
.origins-region__t { font-family: var(--font-sans); font-weight: 800; font-size: 1.02rem; color: var(--green-800); }
.origins-region__n { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .72rem; letter-spacing: .12em; color: var(--gold-700); }
.origins-region__rule { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, #e4dbc8 0 6px, transparent 6px 12px); }
.origins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: .7rem; }
.origin { display: flex; gap: .8rem; align-items: center; padding: .72rem .8rem; border: 1px solid #ece3d2; border-radius: 11px; background: var(--paper);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
.origin:hover { transform: translateY(-3px); background: var(--white); border-color: var(--gold-500); box-shadow: var(--shadow-sm); }
.origin__code { flex: none; min-width: 2.5rem; text-align: center; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-weight: 700; font-size: .82rem; letter-spacing: .05em; color: var(--green-900); background: rgba(218,167,81,.18); border: 1px solid #daa751; border-radius: 7px; padding: .34rem .3rem; }
.origin__name { font-family: var(--font-sans); font-weight: 700; font-size: .93rem; color: var(--green-850); line-height: 1.12; }
.origin__goods { display: block; font-size: .72rem; color: var(--ink-soft); margin-top: .18rem; letter-spacing: .01em; }

/* Merkpagina-template: hero-visual + merkband (kleuren per merk via --bv1/--bv2 en --bb1/--bb2) */
.brand-visual { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1/1; max-width: 460px; margin-inline: auto; display: grid; place-items: center; background: linear-gradient(150deg, var(--bv1, #19502a), var(--bv2, #0f3019)); box-shadow: var(--shadow-lg); }
.brand-visual::before { content: ""; position: absolute; inset: 0; background: url("../img/patterns/star-pattern.svg") center/120px; opacity: .12; }
.brand-visual__logo { position: relative; background: #fff; padding: clamp(1.2rem,3vw,2rem) clamp(1.6rem,4vw,2.6rem); border-radius: 10px; box-shadow: var(--shadow); max-width: 72%; }
.brand-visual__logo img { display: block; max-width: 100%; max-height: 110px; margin-inline: auto; }
.brand-visual__foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; padding: 1.1rem 1rem; background: linear-gradient(transparent, rgba(0,0,0,.3)); }
.brand-visual__chip { font-family: var(--font-sans); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #fff; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.14); padding: .34rem .75rem; border-radius: 999px; }
.brand-band { position: relative; overflow: hidden; text-align: center; color: #fff; background: linear-gradient(150deg, var(--bb1, #19502a), var(--bb2, #0f3019)); }
.brand-band::before { content: ""; position: absolute; inset: 0; background: url("../img/patterns/star-pattern.svg") center/130px; opacity: .1; }
.brand-band__inner { position: relative; z-index: 1; max-width: 780px; margin-inline: auto; }
.brand-band__q { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem,4.6vw,3.4rem); line-height: 1.14; }
.brand-band__s { margin-top: 1.1rem; color: rgba(255,255,255,.88); font-size: 1.06rem; }

/* ============================== 14. CTA / FOOTER / FLOAT ================ */
.cta-band { position: relative; background: var(--green-700); color: var(--cream); overflow: hidden; text-align: center; }
.cta-band::before { content: ""; position: absolute; inset: 0; opacity: .08; background-image: url("../img/patterns/star-pattern.svg"); background-size: 120px; }
.cta-band__inner { position: relative; z-index: 1; max-width: 720px; margin-inline: auto; }
.cta-band .display { color: var(--gold-500); }

.site-footer { background: var(--green-900); color: var(--cream); position: relative; overflow: hidden; padding-top: clamp(3.5rem,6vw,5rem); }
.site-footer::before { content: ""; position: absolute; right: -4%; bottom: -10%; width: 420px; height: 420px; opacity: .05; background: url("../img/icon-all4trade.svg") center/contain no-repeat; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: clamp(1.6rem,3vw,2.5rem); position: relative; z-index: 1; padding-bottom: 2.5rem; }
.footer-brand .logo__name { font-size: 1.6rem; }
.footer-about { color:#E3D5C1; font-size: .95rem; margin-top: 1rem; max-width: 32ch; }
.footer-socials { display: flex; gap: .6rem; margin-top: 1.3rem; }
.footer-socials a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--cream);
  border: 1px solid #daa751; transition: background .25s, color .25s, transform .25s; }
.footer-socials a:hover { background: var(--gold-500); color: var(--green-900); transform: translateY(-3px); }
.footer-col h4 { font-family: var(--font-display); font-size: 1.45rem; color: var(--gold-500); margin-bottom: 1rem; font-weight: 400; }
.footer-col ul { display: grid; gap: .6rem; }
.footer-col a, .footer-contact a, .footer-contact span { color:#E3D5C1; font-size: .95rem; transition: color .2s; }
.footer-col a:hover { color: var(--gold-300); }
.footer-contact { display: grid; gap: .75rem; }
.footer-contact li { display: flex; gap: .7rem; align-items: flex-start; }
.footer-contact svg { width: 19px; height: 19px; color: var(--gold-500); flex: none; margin-top: 3px; }
.footer-bottom { border-top: 1px solid #daa751; padding: 1.4rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; position: relative; z-index: 1; }
.footer-bottom p, .footer-bottom a { font-family: var(--font-sans); font-size: .85rem; color:#E3D5C1; }
.footer-bottom a:hover { color: var(--gold-300); }
.footer-legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* Floating WhatsApp */
.wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; align-items: center;
  height: 58px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(150deg, #2BB673, #128C7E); color: #fff;
  box-shadow: 0 0 0 2px var(--gold-500), 0 0 0 5px rgba(218,167,81,.16), 0 16px 32px -12px rgba(7,33,15,.55);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.wa-float__txt { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  font-family: var(--font-sans); font-weight: 700; font-size: .84rem; letter-spacing: .05em; text-transform: uppercase;
  transition: max-width .5s var(--ease), opacity .3s var(--ease), padding .5s var(--ease); }
.wa-float__ic { width: 58px; height: 58px; flex: none; display: grid; place-items: center; }
.wa-float__ic svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 4px rgba(7,33,15,.25)); }
.wa-float:hover, .wa-float:focus-visible { transform: translateY(-3px);
  box-shadow: 0 0 0 2px var(--gold-400), 0 0 0 6px rgba(218,167,81,.22), 0 20px 38px -12px rgba(7,33,15,.6); }
.wa-float:hover .wa-float__txt, .wa-float:focus-visible .wa-float__txt { max-width: 200px; opacity: 1; padding-left: 1.15rem; }
@media (max-width:820px){ .wa-float{ height:52px; right:16px; bottom:16px; } .wa-float__ic{ width:52px; height:52px; } .wa-float__ic svg{ width:26px; height:26px; } .wa-float__txt{ display:none; } }
.wa-badge { position: absolute; top: -2px; right: -2px; width: 22px; height: 22px; border-radius: 50%; background: #ED4956; color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: .72rem; display: grid; place-items: center; border: 2px solid var(--paper); }

/* ============================== 15. CONTACT ============================= */
.page-hero { position: relative; background: var(--green-700); color: var(--cream); overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(2.5rem,5vw,4rem)); padding-bottom: clamp(3rem,6vw,5rem); }
.page-hero::before { content: ""; position: absolute; inset: 0; opacity: .07; background-image: url("../img/patterns/star-pattern.svg"); background-size: 130px; }
.page-hero::after { content: ""; position: absolute; right: -10vw; top: -14vw; width: 50vw; height: 50vw; max-width: 560px; max-height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(218,167,81,.2), transparent 62%); }
/* page-hero inhoud lijnt links uit met de secties eronder (zelfde container,
   niet gecentreerd); tekstbreedte wordt per element begrensd (lead = 60ch) */
.page-hero__inner { position: relative; z-index: 1; }
.page-hero__inner .breadcrumb,
.page-hero__inner > .eyebrow,
.page-hero__inner > h1 { max-width: 760px; }
.breadcrumb { display: flex; align-items: center; gap: .5rem; font-family: var(--font-sans); font-size: .85rem; color:#E3D5C1; margin-bottom: 1.2rem; }
.breadcrumb a:hover { color: var(--gold-300); }
.breadcrumb svg { width: 15px; height: 15px; opacity: .6; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,3.5rem); align-items: stretch; }
.contact-grid > div { display: flex; flex-direction: column; }
.contact-grid > div > .wk-card, .contact-grid > div > .contact-panel { flex: 1 1 auto; }

/* Compacte contactpagina */
.contact-panel { background: var(--white); border-radius: var(--radius-lg); border: 1px solid #3a4a40; box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
.contact-rows { display: grid; flex: 1 1 auto; }
.contact-row { display: flex; gap: 1rem; align-items: flex-start; padding: 1.05rem 1.3rem; border-bottom: 1px solid #ece3d2; transition: background .25s var(--ease); }
.contact-row:last-child { border-bottom: 0; }
.contact-row:hover { background: rgba(218,167,81,.06); }
.contact-row__ic { width: 42px; height: 42px; flex: none; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(150deg, rgba(218,167,81,.16), rgba(218,167,81,.05)); color: var(--gold-700); border: 1px solid #daa751; }
.contact-row__ic svg { width: 21px; height: 21px; }
.contact-row__k { font-family: var(--font-sans); font-weight: 700; font-size: .72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--gold-700); margin-bottom: .2rem; }
.contact-row__v { font-size: .98rem; color: var(--green-850); line-height: 1.45; }
.contact-row__v a { color: var(--green-850); }
.contact-row__v a:hover { color: var(--gold-700); }
.contact-social { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; background: var(--green-850); color: var(--cream); }
.contact-social__lbl { font-family: var(--font-sans); font-weight: 600; font-size: .9rem; color: var(--cream); }
.contact-social .footer-socials a { color: var(--cream); border-color: rgba(218,167,81,.35); }
.contact-map { margin-top: 1.2rem; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid #3a4a40; box-shadow: var(--shadow-sm); position: relative; aspect-ratio: 16/9; background: var(--green-850); }
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.12); }
/* (ongebruikte .info-card-variant verwijderd) */

.form { background: var(--white); border-radius: var(--radius-lg); padding: clamp(1.6rem,3vw,2.4rem); box-shadow: var(--shadow); border: 1px solid #3a4a40; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.field label { font-family: var(--font-sans); font-weight: 600; font-size: .85rem; color: var(--green-800); }
.field label .req { color: #c0492f; }
.field input, .field select, .field textarea {
  padding: .85rem 1rem; border-radius: 10px; border: 1.5px solid #3a4a40; background: var(--paper);
  font-family: var(--font-sans); font-size: .95rem; transition: border-color .2s, box-shadow .2s; width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(218,167,81,.18); }
.form-note { font-size: .82rem; color: var(--ink-faint); margin-top: .3rem; }
.form-success { display: none; padding: 1rem 1.2rem; border-radius: 12px; background: rgba(111,168,56,.14); border: 1px solid #19502a; color: #3f6a20; font-family: var(--font-sans); font-weight: 600; margin-bottom: 1.2rem; }
.form-success.show { display: flex; gap: .6rem; align-items: center; }
.form-success svg { width: 22px; height: 22px; }
.form-error { display: none; padding: 1rem 1.2rem; border-radius: 12px; background: rgba(192,73,47,.10); border: 1px solid rgba(192,73,47,.45); color: #8d2f1c; font-family: var(--font-sans); font-weight: 600; margin-bottom: 1.2rem; }
.form-error.show { display: flex; gap: .6rem; align-items: flex-start; }
.form-error svg { width: 22px; height: 22px; flex: none; margin-top: .1rem; }
.form-error a { color: inherit; text-decoration: underline; }
/* Onzichtbaar lokveld tegen geautomatiseerde invullers, blijft weg voor mens en schermlezer. */
.veld-vangnet { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn.is-busy { opacity: .65; pointer-events: none; }

.map-wrap { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid #3a4a40; box-shadow: var(--shadow-sm); position: relative; background: var(--green-850); aspect-ratio: 21/8; }
.map-wrap iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.1); }

/* Accordion (FAQ) */
.accordion { max-width: 820px; margin-inline: auto; }
.acc-item { border-bottom: 1px solid #3a4a40; }
.acc-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 0; text-align: left; font-family: var(--font-sans); font-weight: 700; font-size: 1.08rem; color: var(--green-800); }
.acc-trigger .acc-ico { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1.5px solid #daa751; color: var(--gold-700); display: grid; place-items: center; transition: transform .3s var(--ease), background .3s; }
.acc-trigger[aria-expanded="true"] .acc-ico { background: var(--gold-500); color: var(--green-900); transform: rotate(45deg); border-color: var(--gold-500); }
.acc-panel { overflow: hidden; max-height: 0; transition: max-height .35s var(--ease); }
.acc-panel__inner { padding: 0 0 1.4rem; color: var(--ink-soft); }

/* ============================== 16. BRAND PAGES ======================== */
.brand-hero { position: relative; overflow: hidden; color: var(--cream);
  padding-top: calc(var(--header-h) + clamp(2.5rem,5vw,4rem)); padding-bottom: clamp(3rem,6vw,5rem);
  background: var(--brand-bg, var(--green-700)); }
.brand-hero::before { content: ""; position: absolute; inset: 0; opacity: .08; background-image: url("../img/patterns/star-pattern.svg"); background-size: 130px; }
.brand-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(1.4rem,3vw,2.6rem); align-items: center; }
.brand-badge { display: inline-flex; align-items: center; gap: .6rem; background: var(--white); color: var(--green-900); font-family: var(--font-sans); font-weight: 800; font-size: 1.6rem; padding: .7rem 1.4rem; border-radius: 14px; box-shadow: var(--shadow); }
.brand-hero h1 { margin: 1.2rem 0; color: var(--cream); }
.brand-hero h1 .gold { color: var(--gold-400); }


/* alternating brand story rows */
.brand-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.brand-row--rev .brand-row__media { order: 2; }
.brand-row__media { position: relative; }

/* product range chips */
.range-list { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.range-chip { font-family: var(--font-sans); font-weight: 600; font-size: .88rem; padding: .55rem 1rem; border-radius: 999px; background: rgba(218,167,81,.16); color: var(--green-800); border: 1px solid #c08f3e; }
.on-dark .range-chip { background: rgba(248,242,231,.1); color: var(--cream); border-color: #E3D5C1; }

.illu-xl { width: min(420px, 80%); height: auto; }

/* ============================== 17. ANIMATIONS ========================= */
.reveal { opacity: 0; transform: translateY(28px); filter: blur(5px);
  transition: opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease); }
.reveal.in { opacity: 1; transform: none; filter: blur(0); }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; } .reveal-d4 { transition-delay: .32s; }
.float-y { animation: floatY 6s ease-in-out infinite; }
.float-y.alt { animation-delay: -3s; }
.spin-slow { animation: spin 26s linear infinite; }

@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes pulse { 0% { transform: scale(1); opacity: .5; } 70%,100% { transform: scale(1.7); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================== 18. RESPONSIVE ========================= */
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats--bar .stat:nth-child(3) { border-left: none; }
  .logi-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.4rem; }
  .brand-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 920px) {
  .nav, .header-actions .lang, .header-actions .btn:not(.menu-toggle) { display: none; }
  .menu-toggle { display: inline-flex; }
  .hero-grid, .split, .contact-grid, .brand-hero__inner, .brand-row { grid-template-columns: 1fr; }
  .hero-collage { max-width: 460px; margin-inline: auto; }
  .brand-row--rev .brand-row__media { order: 0; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  :root { --header-h: 72px; }
  .grid-2, .grid-3, .grid-4, .form-row { grid-template-columns: 1fr; }
  .cat-grid, .brand-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
  .footer-top { grid-template-columns: 1fr; }
  .logo__ar { display: none; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .hero__trust { gap: 1rem 1.4rem; }
}
@media (max-width: 460px) {
  .cat-grid, .brand-grid { grid-template-columns: 1fr; }
  .logi-grid { grid-template-columns: 1fr; }
}

/* ============================== A11Y / MOTION ========================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
}

/* ====================================================================
   v2 — FULLSCREEN · LINKS UITGELIJND · ARABISCHE STIJL · FOTO-PLEKKEN
   (laatst geladen — overruled de basis waar nodig)
   ==================================================================== */

/* --- Volledige breedte: gebruik de hele muur op grootbeeld --- */
:root{
  --container: 1640px;
  --container-wide: 1800px;
  --gutter: clamp(1.15rem, 2.6vw, 3rem);
  /* gedeelde uitlijnrail: linkerrand van .container — zo staan alle
     sectietitels (ook de full-bleed hero & Zinè-band) op één verticale lijn */
  --rail: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
}
@media (min-width:1600px){ :root{ --gutter: clamp(2.4rem, 3.2vw, 4.5rem); } }

/* --- Alles links tegen de muur --- */
.section-head--center{ text-align:left; margin-inline:0; max-width:860px; }
.eyebrow--center::after{ display:none; }
.cta-band, .cta-band__inner{ text-align:left; }
.cta-band__inner{ margin-inline:0; max-width:920px; }
.cta-band .cta-row{ justify-content:flex-start; }
.statement-band, .statement-band__inner{ text-align:left; }
.statement-band__inner{ margin-inline:0; }
.statement-band__star{ margin-inline:0; }
/* full-bleed banden: tekst op dezelfde uitlijnrail als de containersecties */
.cta-band__inner, .statement-band__inner{ padding-left: var(--rail); }
.stat{ text-align:left; }
.stats--bar .stat + .stat{ border-left:0; }

/* --- Sterkere Arabische patroon-aanwezigheid --- */
.hero::before,.heritage::before,.page-hero::before,.brand-hero::before,.cta-band::before{ opacity:.14; background-size:160px; }
.section--green .pattern-layer,.section--green-deep .pattern-layer{ opacity:.13; }
.cat-card::before{ opacity:.16; }

/* gouden boord boven groene secties + sierband-divider */
.ornament{ display:flex; align-items:center; justify-content:center; gap:1.1rem; padding:1.6rem 0 .4rem; color:var(--gold-500); }
.ornament::before,.ornament::after{ content:""; height:1px; width:min(160px,26vw); background:linear-gradient(90deg,transparent,currentColor); opacity:.55; }
.ornament::after{ background:linear-gradient(90deg,currentColor,transparent); }
.ornament svg{ width:20px; height:20px; }

/* --- FOTO-PLAATSHOUDERS (nep-foto's voor de visie) --- */
.photo{
  position:relative; overflow:hidden; isolation:isolate; display:grid; place-items:center;
  background: radial-gradient(125% 100% at 28% 0%, #19502a 0%, #143f22 52%, #0b2613 100%);
  color:var(--cream); box-shadow:var(--shadow); min-height:240px; width:100%;
}
.photo::before{ content:""; position:absolute; inset:0; z-index:0; background:url("../img/patterns/star-pattern.svg") center/120px; opacity:.13; }
.photo::after{ content:""; position:absolute; inset:14px; z-index:1; border:1.5px dashed #daa751; border-radius:inherit; pointer-events:none; }
.photo__body{ position:relative; z-index:2; display:grid; gap:.75rem; justify-items:center; text-align:center; padding:1.6rem; }
.photo__ic{ width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(218,167,81,.18);border:1px solid #daa751;color:var(--gold-400); }
.photo__ic svg{ width:27px;height:27px; }
.photo__cap{ font-family:var(--font-sans); font-weight:600; font-size:.94rem; color:#E3D5C1; max-width:26ch; line-height:1.45; }
.photo__tag{ position:absolute; top:14px; left:14px; z-index:3; display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-sans); font-weight:800; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green-900); background:var(--gold-500); padding:.34rem .62rem; border-radius:6px; }
.photo__tag svg{ width:13px;height:13px; }
.photo__hint{ font-family:var(--font-sans); font-weight:800; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-400); padding:.28rem .7rem; border:1px solid #daa751; border-radius:999px; margin-top:.2rem; }
.photo--arch{ border-radius:49% 49% 18px 18px / 27% 27% 4% 4%; }
.photo--arch .photo__tag{ top:auto; bottom:14px; }
/* afgeschuind (gegraveerd) fotovak — industrieel, professioneel */
.photo--cut{ border-radius:0; --pc:clamp(14px,2.4vw,22px);
  clip-path: polygon(var(--pc) 0, 100% 0, 100% calc(100% - var(--pc)), calc(100% - var(--pc)) 100%, 0 100%, 0 var(--pc)); }
.photo--cut.photo__has, .photo--cut:has(.photo__img){ box-shadow:var(--shadow-lg); }
/* fotovakken-raster */
.shot-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.6rem); }
.shot-grid .photo{ min-height:200px; }
@media (max-width:820px){ .shot-grid{ grid-template-columns:1fr 1fr; } }
/* tablet: 3-koloms rasters -> 2 koloms, eenzame laatste kaart vult de rij */
@media (min-width:681px) and (max-width:900px){ .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-3 > :last-child:nth-child(odd){ grid-column:1 / -1; } }
@media (min-width:681px) and (max-width:1080px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:820px){ .shot-grid > :last-child:nth-child(odd){ grid-column:1 / -1; } }
@media (max-width:560px){ .shot-grid{ grid-template-columns:1fr; } }
/* levering & specificaties — industrieel datablok */
.spec-head{ display:flex; flex-wrap:wrap; gap:1.4rem 2rem; align-items:flex-end; justify-content:space-between; margin-bottom:2.4rem; }
/* Flex i.p.v. een vast raster: de laatste rij vult zichzelf op, zodat er nooit
   een leeg vak overblijft bij 5 items (of een ander aantal). */
.spec-grid{ display:flex; flex-wrap:wrap; gap:1px;
  background:rgba(218,167,81,.2); border:1px solid #daa751; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.spec{ display:flex; gap:1rem; align-items:center; padding:1.35rem 1.5rem; background:var(--green-850);
  flex:1 1 45%; min-width:0; }
.spec__ic{ width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center; background:rgba(218,167,81,.14); color:var(--gold-400); }
.spec__ic svg{ width:23px; height:23px; }
.spec__k{ display:block; font-family:var(--font-sans); font-size:.72rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-400); }
.spec__v{ display:block; font-family:var(--font-sans); font-weight:700; color:var(--cream); margin-top:.18rem; }
@media (max-width:820px){ .spec{ flex-basis:45%; } }
@media (max-width:520px){ .spec{ flex-basis:100%; } }
/* distributiecentrum: kaart + pand naast elkaar */
.dc-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(1rem,2vw,1.6rem); align-items:stretch; }
.dc-grid .map-wrap{ aspect-ratio:auto; min-height:380px; height:100%; }
.dc-grid .photo{ min-height:380px; }
@media (max-width:820px){ .dc-grid{ grid-template-columns:1fr; } .dc-grid .map-wrap, .dc-grid .photo{ min-height:280px; } }
.photo--blob{ border-radius:58% 42% 52% 48% / 56% 50% 50% 44%; }
.photo--blob2{ border-radius:44% 56% 48% 52% / 46% 44% 56% 54%; }
.photo--rounded{ border-radius:var(--radius-xl); }
.photo--full{ position:absolute; inset:0; min-height:0; height:100%; }

/* --- HERO: full-bleed, tekst links, foto tegen de rechtermuur --- */
.hero{ padding:0; }
.hero__inner{ max-width:none; padding:0; }
.hero-grid{
  grid-template-columns: minmax(0,1.04fr) minmax(0,0.96fr);
  gap:0; align-items:stretch;
  min-height:clamp(560px, 92svh, 1000px);
}
.hero__copy{
  align-self:center; max-width:880px;
  padding: calc(var(--header-h) + clamp(1.6rem,4.5vh,4rem)) clamp(1.6rem,4vw,4.5rem) clamp(2rem,4.5vh,4rem) var(--gutter);
}
.hero .cta-row{ margin-top:1.4rem; }
/* Korte schermen (kleine laptops): comprimeer de hero zodat alles in beeld past */
@media (min-width:921px) and (max-height:820px){
  .hero-grid{ min-height:100svh; }
  .hero__title{ font-size:clamp(2.3rem,4.6vw,3.6rem); margin:.45rem 0 .6rem; }
  .hero__lead{ font-size:1.02rem; }
  .hero .cta-row{ margin-top:1.05rem; }
  .hero__stats{ margin-top:1.1rem; padding-top:.9rem; }
}
@media (min-width:921px) and (max-height:700px){
  .hero__copy{ padding-top:calc(var(--header-h) + .55rem); }
  .hero__title{ font-size:clamp(1.95rem,4vw,2.9rem); margin:.3rem 0 .45rem; }
  .hero__lead{ font-size:.95rem; max-width:40ch; }
  .hero .cta-row{ margin-top:.85rem; }
  .hero__stats{ margin-top:.8rem; padding-top:.7rem; gap:.5rem 1.7rem; }
  .hero__stats .hstat b{ font-size:clamp(1.5rem,2.3vw,2rem); }
}
.hero__media{ position:relative; }
.hero__media .photo{ position:absolute; inset:0; min-height:0; border-radius: clamp(60px,9vw,150px) 0 0 0; }
.hero__media .chip{ z-index:4; }

/* ====================================================================
   HERO — gesplitst: foto rechts, groen paneel links met sier-embleem
   Laadanimatie: eerst alleen de foto, dan schuift het groene paneel
   vanuit de linkermuur naar binnen en eindigt als de composietfoto.
   ==================================================================== */
.hero--split{
  position:relative; padding:0; overflow:hidden;
  min-height:clamp(560px, 84svh, 900px);
  background:var(--green-700);
}
.hero--split::before, .hero--split::after{ content:none; display:none; } /* basis-hero glans/patroon uit */
/* Laag 1 — de feesttafel-foto (vult de hele hero, eerst zichtbaar) */
.hero-split__photo{
  position:absolute; inset:0; z-index:0;
  background:var(--green-850) url("../img/hero-food.webp") center right / cover no-repeat;
}
.hero-split__photo::after{ /* subtiele verdieping rechtsonder */
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 55%, rgba(18,51,32,.28));
}
/* Homepage-hero: de staande feesttafel-foto. Zelfde truc als de categoriehero:
   op desktop beslaat de foto alleen het zichtbare rechtervlak, zodat 'cover' de
   staande foto veel minder hoeft te vergroten en het beeld scherp blijft. */
@media (min-width:821px){
  .home-hero .hero-split__photo{ left:48%; background-position:center; }
}
/* Video-hero (Over ons): gouden play-knop in het rechter (video)vlak,
   zodat het rechterbeeld leest als een filmpje naast de tekst. */
.hero-split__play{ position:absolute; top:50%; left:78%; transform:translate(-50%,-50%); z-index:4;
  width:clamp(72px,6vw,104px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  color:var(--green-900); background:var(--gold-400); box-shadow:0 16px 40px rgba(0,0,0,.45); }
.hero-split__play svg{ width:38%; height:38%; margin-left:6%; }
@media (prefers-reduced-motion:no-preference){
  .hero-split__play{ animation:filmPulse 2.6s var(--ease) infinite; }
}
@media (max-width:820px){
  .hero-split__play{ left:50%; }
}
/* Laag 2 — het groene paneel dat vanuit links binnenschuift.
   Het patroon staat viewport-vast (fixed) zodat het naadloos doorloopt
   over het bloem-embleem: paneel + embleem lezen als één groen vlak. */
.hero-split__panel{
  position:relative; z-index:1;
  width:clamp(500px, 55%, 1120px);
  min-height:clamp(560px, 84svh, 900px);
  background:var(--green-700); color:var(--cream);
  display:flex; align-items:center;
  /* Iets meer top-ruimte zodat de titel optisch dichter bij het midden valt */
  padding-top:calc(var(--header-h) + clamp(1rem, 5vh, 3.4rem));
}
/* Categoriepagina's houden dezelfde paneelbreedte als de homepage (55%). Met een
   smaller paneel stak het embleem te ver over de foto, waardoor de bloemvormen
   los van het paneel leken te zweven met foto ertussen. Alleen de bovenmarge
   wijkt af: zonder kruimelpad mag de kopij een tikje hoger. */
.cat-hero .hero-split__panel{ padding-top:calc(var(--header-h) + clamp(.4rem, 2.2vh, 1.5rem)); }
.hero-split__panel::before{ /* fijn sterpatroon zoals de rest van de site */
  content:""; position:absolute; inset:0; z-index:0; opacity:.08; pointer-events:none;
  background:url("../img/patterns/star-pattern.svg") 0 0 / 130px fixed;
}
/* Het bloem-embleem = onderdeel van het paneel: zelfde groen én hetzelfde
   (viewport-vaste) sterpatroon, met zijn hart op de rechterrand van het paneel.
   De rechterhelft loopt sierlijk over de foto; links versmelt het met het paneel. */
.hero-split__emblem{
  position:absolute; right:0; top:0; z-index:1;
  height:100%; aspect-ratio:1 / 1; width:auto; max-width:none;
  transform:translateX(50%);
  pointer-events:none;
  background:var(--green-700);
  -webkit-mask:url("../img/hero-emblem.svg") center / contain no-repeat;
          mask:url("../img/hero-emblem.svg") center / contain no-repeat;
}
.hero-split__emblem::before{ /* identiek patroon, sluit naadloos aan op het paneel */
  content:""; position:absolute; inset:0; opacity:.08;
  background:url("../img/patterns/star-pattern.svg") 0 0 / 130px fixed;
}
.hero-split__copy{
  position:relative; z-index:3;
  width:100%; max-width:none;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(.9rem, 2vh, 1.35rem);
  padding:clamp(1rem,3vh,2.2rem) clamp(1.6rem,4%,3rem) clamp(1rem,3vh,2.2rem) var(--rail);
}
.hero-split__copy > *{ position:relative; margin:0; }
[dir="rtl"] .hero-split__copy{ text-align:right; align-items:flex-end; }
/* Ruimere typografie zodat de kopij ademt */
.hero--split .hero__title{ font-size:clamp(2.1rem, 4vw, 3.7rem); line-height:1.06; margin:0; max-width:19ch; }
.hero--split .hero__subtitle{
  font-family:var(--font-sans); font-weight:600; color:var(--cream);
  font-size:clamp(1.2rem, 1.7vw, 1.6rem); line-height:1.32; max-width:60ch; margin:0;
}
.hero--split .hero__lead{ font-size:clamp(1.05rem, 1.3vw, 1.28rem); line-height:1.58; max-width:58ch; margin:0; }
.hero-split__copy .cta-row{ margin:0; align-self:stretch; }
.hero-split__copy .cta-row .btn{ white-space:nowrap; }
.hero-split__copy .hero__stats{ margin:0; gap:1rem 1.8rem; }
/* keyword-dragende ondertitel binnen de H1 (SEO): grote titel + fijne regel */
.hero--split .hero__title .hero__title-sub{
  display:block; font-family:var(--font-sans); font-weight:600;
  font-size:clamp(1rem, 1.5vw, 1.45rem); color:var(--cream);
  margin-top:.55rem; line-height:1.32; letter-spacing:.01em; max-width:26ch;
}

/* --- Laadanimatie: eerst de foto, dan schuift het groene paneel binnen ---
   De hero wacht tot de merk-intro (.intro splash) is weggevallen.
   Eerste bezoek: intro speelt ~2.85s, dan pas de hero.
   Al gezien / .intro-skip: hero speelt vrijwel meteen. */
@keyframes heroPhotoZoom{ from{ transform:none; } to{ transform:none; } }
@keyframes heroPanelSlide{ from{ transform:translateX(calc(-100% - 560px)); } to{ transform:translateX(0); } }
/* Vloeiende, snelle glide-in (expo-out) */
@media (prefers-reduced-motion: no-preference){
  .hero-split__photo{ animation:heroPhotoZoom 1.8s ease-out 2.55s both; }
  .hero-split__panel{ animation:heroPanelSlide .8s cubic-bezier(.16,1,.3,1) 2.85s both; }
  .hero-split__copy > *{ animation:fadeUp .5s cubic-bezier(.16,1,.3,1) both; }
  .hero-split__copy > *:nth-child(1){ animation-delay:3.45s; }
  .hero-split__copy > *:nth-child(2){ animation-delay:3.51s; }
  .hero-split__copy > *:nth-child(3){ animation-delay:3.57s; }
  .hero-split__copy > *:nth-child(4){ animation-delay:3.63s; }
  .hero-split__copy > *:nth-child(5){ animation-delay:3.69s; }

  /* Terugkerende bezoekers (geen splash): snappy, meteen afspelen */
  .intro-skip .hero-split__photo{ animation-delay:0s; }
  .intro-skip .hero-split__panel{ animation-delay:.28s; }
  .intro-skip .hero-split__copy > *:nth-child(1){ animation-delay:.86s; }
  .intro-skip .hero-split__copy > *:nth-child(2){ animation-delay:.92s; }
  .intro-skip .hero-split__copy > *:nth-child(3){ animation-delay:.98s; }
  .intro-skip .hero-split__copy > *:nth-child(4){ animation-delay:1.04s; }
  .intro-skip .hero-split__copy > *:nth-child(5){ animation-delay:1.1s; }
}
@media (prefers-reduced-motion: reduce){
  .hero-split__photo, .hero-split__panel{ animation:none; transform:none; }
  .hero-split__copy > *{ animation:none; opacity:1; transform:none; }
}
/* Categoriepagina's: geen inschuivend paneel en geen inzoom op de foto.
   Het paneel staat meteen goed; alleen de tekst faadt rustig omhoog.
   Zo staat de foto stabiel en kunnen we hem beter plaatsen. */
@media (prefers-reduced-motion: no-preference){
  .cat-hero .hero-split__panel{ animation:none; }
  /* De kopij cascadeert rustig en gelijkmatig in, iets ruimer en zachter dan
     standaard, zodat de hero als één bedoelde beweging leest. */
  .cat-hero .hero-split__copy > *{ animation-duration:.72s; animation-timing-function:var(--ease); }
  .cat-hero .hero-split__copy > *:nth-child(1){ animation-delay:.18s; }
  .cat-hero .hero-split__copy > *:nth-child(2){ animation-delay:.28s; }
  .cat-hero .hero-split__copy > *:nth-child(3){ animation-delay:.38s; }
  .cat-hero .hero-split__copy > *:nth-child(4){ animation-delay:.48s; }
  .cat-hero .hero-split__copy > *:nth-child(5){ animation-delay:.58s; }
}
/* Warme onderkleur i.p.v. donkergroen: terwijl de foto laadt zie je een warme
   cream-toon die naadloos overgaat in de (warm belichte) productfoto.
   Zo geen groene flits meer voordat de foto klaar is. */
.cat-hero{ background:var(--cream); }
.cat-hero .hero-split__photo{ background-color:var(--cream); }
/* Foto beslaat alleen het zichtbare rechtervlak i.p.v. de hele hero,
   waardoor 'cover' de (staande) productfoto veel minder hoeft te vergroten. */
@media (min-width:821px){
  .cat-hero .hero-split__photo{ left:48%; background-position:center; }
}
/* Bewuste, vloeiende reveal zodra de foto écht geladen is (main.js zet
   .is-loaded): een zachte focus-pull. De foto komt licht uitgezoomd in beeld en
   settelt daarna rustig op zijn plek. De easing is een gelijkmatige uitloop
   (geen snap), zodat de beweging als bedoeld leest en niet als een pop. De
   transform loopt iets langer door dan de fade zodat hij natuurlijk uitdempt.
   De cream-onderlaag op .cat-hero blijft staan tijdens het laden, dus geen
   groene flits. De keyframe is een vangnet dat de foto sowieso toont zonder JS.
   --reveal-ease: gelijkmatige deceleratie (easeOutCubic). */
@media (prefers-reduced-motion: no-preference){
  .cat-hero .hero-split__photo{
    --reveal-ease:cubic-bezier(.215,.61,.355,1);
    opacity:0;
    transform:none;
    will-change:opacity, transform;
    transition:opacity 1.15s var(--reveal-ease), transform 1.7s var(--reveal-ease);
    animation:catHeroReveal 1s var(--reveal-ease) 2.6s forwards; /* vangnet zonder JS */
  }
  .cat-hero .hero-split__photo.is-loaded{
    opacity:1; transform:none; animation:none;
  }
  /* De focus-pull (soft blur die scherp wordt) alleen op desktop: goedkoper voor
     mobiele GPU's en geen randbleed in de gestapelde foto-band. */
  @media (min-width:821px){
    .cat-hero .hero-split__photo{
      filter:blur(9px);
      transition:opacity 1.15s var(--reveal-ease), transform 1.7s var(--reveal-ease), filter 1.25s var(--reveal-ease);
    }
    .cat-hero .hero-split__photo.is-loaded{ filter:blur(0); }
  }
}
@keyframes catHeroReveal{ to{ opacity:1; transform:none; filter:blur(0); } }

/* Opvallende, on-brand laad-indicator: zolang de foto merkbaar laadt beweegt er
   een warme glans over het cream-vlak (skeleton-shimmer), zodat fijn zichtbaar is
   dat de foto nog laadt. main.js zet .is-loading pas na ~140ms (geen flits bij
   cache) en haalt hem weg zodra de foto klaar is: de glans faadt dan rustig weg
   terwijl de foto scherp in beeld pullt. Ligt onder paneel/embleem (z-index 0). */
.cat-hero::after{
  content:""; display:block; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity .55s var(--ease);
  background:
    linear-gradient(105deg,
      rgba(255,251,244,0) 30%, rgba(255,251,244,.92) 50%, rgba(255,251,244,0) 70%),
    linear-gradient(rgba(227,213,193,.8), rgba(227,213,193,.8)),
    url("../img/patterns/star-pattern.svg");
  background-repeat:no-repeat, no-repeat, repeat;
  background-size:220% 100%, 100% 100%, 120px 120px;
  background-position:-60% 0, 0 0, center;
}
@media (min-width:821px){ .cat-hero::after{ left:48%; } }
@media (prefers-reduced-motion: no-preference){
  .cat-hero.is-loading::after{ opacity:1; animation:catHeroShimmer 1.2s linear infinite; }
}
@keyframes catHeroShimmer{
  from{ background-position:-60% 0, 0 0, center; }
  to{   background-position:160% 0, 0 0, center; }
}

/* --- Responsive: onder 820px stapelen (tekst boven, foto-band onder) --- */
@media (max-width:820px){
  .hero--split{ display:flex; flex-direction:column; min-height:0; }
  .hero-split__photo{ position:relative; order:2; height:clamp(210px, 48vw, 320px); }
  .hero-split__photo::after{ background:linear-gradient(0deg, transparent 70%, rgba(18,51,32,.25)); }
  .hero-split__panel{
    position:relative; order:1; width:100%; min-height:auto;
    padding-bottom:clamp(2.4rem,9vw,3.4rem);
  }
  .hero-split__emblem{
    top:auto; bottom:0; right:50%; height:auto;
    width:clamp(120px, 26vw, 176px);
    transform:translate(50%,50%);
  }
  .hero-split__copy{ max-width:none; padding-right:max(var(--gutter),4vw); }
  @media (prefers-reduced-motion: no-preference){
    /* op mobiel geen zijwaartse slide; rustig omhoog faden */
    .hero-split__panel{ animation:fadeUp .8s var(--ease) both; }
    .hero-split__photo{ animation:softIn 1s var(--ease) .1s both; }
  }
}

/* --- Categorie-kaart met productfoto-plek (zoals oude site) --- */
.cat-card{ display:grid; grid-template-columns: 1fr clamp(120px,32%,190px); grid-template-rows:auto 1fr; gap:1rem 1.3rem; align-items:start; min-height:210px; }
.cat-card__icon{ grid-column:1; grid-row:1; }
.cat-card__meta{ grid-column:1; grid-row:2; align-self:end; }
.cat-card__photo{ grid-column:2; grid-row:1 / span 2; position:relative; border-radius:12px; overflow:hidden; display:grid; place-items:center; padding:.9rem; min-height:140px; background:rgba(255,255,255,.10); border:1.5px dashed rgba(255,255,255,.55); text-align:center; }
.cat-card__photo .pc-cap{ font-family:var(--font-sans); font-weight:400; font-size:.72rem; color:#fff; line-height:1.4; display:grid; gap:.5rem; justify-items:center; }
.cat-card__photo .pc-cap svg{ width:26px; height:26px; opacity:.8; }
.cat-card__photo .pc-tag{ position:absolute; top:8px; left:8px; font-family:var(--font-sans); font-weight:700; font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; background:rgba(255,255,255,.9); color:#143f23; padding:.18rem .42rem; border-radius:4px; }

/* --- Full-bleed fotoband (logistiek / contact) --- */
/* De productbanner is 4:1 en toont negen verpakkingen naast elkaar. In een
   smaller kader vallen de buitenste eraf, dus de band volgt die verhouding. */
.photo-band{ position:relative; width:100%; aspect-ratio:4/1; height:auto;
  min-height:200px; max-height:460px; }
.photo-band .photo{ position:absolute; inset:0; min-height:0; border-radius:0; }
.photo-band .photo::after{ inset:24px; }
.photo-band .photo__cap{ font-size:1.05rem; max-width:34ch; }

/* --- Heritage collage met foto's --- */
.collage__tile{ overflow:visible; }
.collage__tile .photo{ position:absolute; inset:0; min-height:0; box-shadow:var(--shadow-lg); }
.collage__tile.big .photo{ border-radius:46% 46% 20px 20px / 24% 24% 5% 5%; }
.collage__tile.mid .photo{ border-radius:44% 56% 48% 52% / 46% 44% 56% 54%; }
.collage__tile.sm  .photo{ border-radius:46% 8% 46% 8%; }

/* --- Brand hero: breder + gebogen foto --- */
.brand-hero__inner{ align-items:center; }
.brand-hero .brand-row__media .photo{ min-height:360px; max-width:none; }

/* --- Responsive --- */
@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; min-height:0; }
  .hero__copy{ padding-right:var(--gutter); }
  .hero__media{ min-height:58vh; }
  .hero__media .photo{ border-radius:0; }
  .hero__media .photo--hero{ inset:0; box-shadow:none; }
}
@media (max-width:680px){
  .cat-card{ grid-template-columns:1fr; grid-template-rows:auto auto auto; }
  .cat-card__icon{ grid-row:1; } .cat-card__photo{ grid-column:1; grid-row:2; min-height:120px; } .cat-card__meta{ grid-row:3; }
  /* Op een telefoon zou 4:1 een streepje van 97 px opleveren. Iets voller,
     met de middelste producten in beeld. */
  .photo-band{ aspect-ratio:2/1; min-height:170px; max-height:300px; }
}


/* ============ REAL LOGO + REAL PHOTOS ============ */
.logo__img{ height:48px; width:auto; display:block; transition:height .35s var(--ease); }
.site-header .logo__img{ height:58px; }
.site-header.scrolled .logo__img{ height:48px; }
.logo:hover .logo__img{ transform:translateY(-1px); }
@media (max-width:680px){ .logo__img{ height:40px; } .site-header .logo__img{ height:46px; } }

/* Placeholder-variant van de split-hero-foto (categoriebeeld nog aan te leveren).
   Fijn sterpatroon + een gouden 'Fotovak'-tag in de hoek, boven het embleem. */
.hero-split__photo--ph{ background:var(--green-850); }
.hero-split__photo--ph::before{ content:""; position:absolute; inset:0; z-index:0; background:url("../img/patterns/star-pattern.svg") center / 120px; opacity:.12; }
.hero-ph{ position:absolute; right:clamp(16px,3vw,40px); bottom:clamp(16px,3vw,40px); z-index:4; display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-sans); font-weight:800; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green-900); background:var(--gold-500); padding:.42rem .72rem; border-radius:8px; box-shadow:var(--shadow); }
.hero-ph svg{ width:15px; height:15px; }
@media (max-width:820px){ .hero-ph{ right:14px; bottom:14px; } }

.photo__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; border-radius:inherit; display:block; }
/* Echte productfoto's (packshots) volledig tonen op wit, niet croppen */
.bb-card__img img[src*="/producten/"]{ object-fit:contain; background:#fff; padding:7%; box-sizing:border-box; }
.bb-card__img img[src*="/producten/"].is-scene{ object-fit:cover; padding:0; background:transparent; }
.photo--logo{ background:#fff; }
.photo--logo::before{ opacity:.05; }
.photo--logo::after{ display:none; }
.photo--logo .photo__img{ object-fit:contain; padding:9%; }
.site-footer::before{ opacity:.06; }

/* ====================================================================
   CATEGORIE- / BRANCHEPAGINA'S
   ==================================================================== */
.cat-hero__ic{ display:inline-grid; place-items:center; width:74px; height:74px; border-radius:20px; margin-bottom:1.1rem;
  background:var(--cat-color,#19502a); box-shadow:0 10px 26px -10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.18); }
.cat-hero__ic svg{ width:38px; height:38px; color:#fff; }

/* Categorie-hero met eigen kleur- + icoonsignatuur (per categoriepagina uniek).
   Alleen op assortiment-categoriepagina's (.cat-hero--sig), niet op de overige
   page-hero's (recepten, ramadan, nieuws, …) die het neutrale groen houden. */
/* Tekstzone (links) blijft altijd diepgroen zodat de crème-tekst leesbaar is
   bij elke categoriekleur; de categoriekleur leeft rechts (glow + motief). */
.page-hero.cat-hero--sig{
  background:
    radial-gradient(85% 115% at 100% 32%, color-mix(in srgb, var(--cat-color) 70%, transparent) 0%, transparent 60%),
    linear-gradient(100deg, #0b2c16 0%, #0e361b 46%, color-mix(in srgb, var(--cat-color) 50%, #0e361b) 100%);
}
@supports not (color: color-mix(in srgb, red, blue)){
  .page-hero.cat-hero--sig{ background:linear-gradient(100deg, #0b2c16 0%, #0e361b 55%, var(--cat-color) 115%); }
}
/* Categorie-hero met foto als achtergrond: de kleursignatuur wordt een tint
   óver het beeld — tekstzone links blijft diepgroen en leesbaar. */
.page-hero.cat-hero--photo{ position:relative; overflow:hidden; min-height:clamp(480px,64vh,660px); display:flex; align-items:flex-end; }
.cat-hero--photo .photo-hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.cat-hero--photo::before{ content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to bottom, transparent 58%, rgba(8,22,12,.5) 100%),
    radial-gradient(85% 115% at 100% 32%, color-mix(in srgb, var(--cat-color) 42%, transparent) 0%, transparent 62%),
    linear-gradient(100deg, rgba(9,33,17,.96) 0%, rgba(10,38,20,.9) 34%, rgba(11,44,22,.62) 60%, color-mix(in srgb, var(--cat-color) 26%, rgba(10,26,15,.3)) 100%);
}
@supports not (color: color-mix(in srgb, red, blue)){
  .cat-hero--photo::before{ background:linear-gradient(100deg, rgba(9,33,17,.93) 0%, rgba(11,44,22,.8) 45%, rgba(10,26,15,.35) 100%); }
}
.cat-hero--photo .cat-hero__motif{ z-index:2; }
.cat-hero--photo .page-hero__inner, .cat-hero--photo .hero-rail{ position:relative; z-index:3; }
.cat-hero--photo .hero__lead{ color:rgba(248,242,231,.96); font-weight:400; text-shadow:0 1px 16px rgba(8,22,12,.6); }
.cat-hero--photo .display{ text-shadow:0 2px 24px rgba(8,22,12,.45); }

/* groot categorie-icoon als subtiel watermerk rechtsonder */
.cat-hero__motif{
  position:absolute; z-index:0; right:clamp(-3.5rem,-1vw,-.5rem); bottom:-15%;
  width:min(44vw,500px); aspect-ratio:1; pointer-events:none;
  color:color-mix(in srgb, var(--cat-color) 22%, #F8F2E7);
  opacity:.16; filter:drop-shadow(0 18px 38px rgba(0,0,0,.28));
}
.cat-hero__motif svg{ width:100%; height:100%; stroke-width:1.1; }
@media (max-width:900px){ .cat-hero__motif{ width:66vw; right:-3rem; bottom:-8%; opacity:.11; } }

.cat-meta{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin-top:1.6rem; font-family:var(--font-sans); font-weight:600; color:#E3D5C1; }
.cat-meta span{ display:inline-flex; align-items:center; gap:.5rem; }
.cat-meta svg{ width:18px; height:18px; color:var(--gold-400); }
/* merk-kaart binnen een categorie */
.cat-brand{ display:flex; flex-direction:column; gap:1rem; }
.cat-badge{ width:100%; height:124px; border-radius:var(--radius-lg); display:grid; place-items:center;
  background:#fff; border:1px solid rgba(20,60,35,.08); box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.cat-badge::before{ content:""; position:absolute; inset:0; background:var(--cat-color,#19502a); opacity:.07; }
.cat-badge svg{ width:50px; height:50px; color:var(--cat-color,#19502a); position:relative; }
.cat-badge img{ max-height:66px; max-width:74%; object-fit:contain; position:relative; }
.cat-brand h3{ font-family:var(--font-sans); font-weight:800; font-size:1.3rem; color:var(--green-800); }
/* cross-link mini-kaarten naar andere categorieën */
.cat-mini-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1rem; }
.cat-mini{ display:flex; align-items:center; gap:1rem; padding:1.05rem 1.2rem; border-radius:var(--radius-lg);
  background:var(--paper); border:1px solid rgba(20,60,35,.09); box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.cat-mini:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.cat-mini__ic{ flex:none; display:grid; place-items:center; width:46px; height:46px; border-radius:13px; background:var(--cat-color,#19502a); }
.cat-mini__ic svg{ width:24px; height:24px; color:#fff; }
.cat-mini__name{ font-family:var(--font-sans); font-weight:700; color:var(--green-850); flex:1; }
.cat-mini__go{ flex:none; color:var(--gold-600); transition:transform .25s var(--ease); }
.cat-mini:hover .cat-mini__go{ transform:translate(3px,-3px); }
.cat-mini__go svg{ width:18px; height:18px; }
/* definitie-/kennisraster: redactionele 2-koloms tekst (geen kaarten) */
.def-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem 2.6rem; }
.def-grid > div{ padding-left:1.1rem; border-left:2px solid rgba(218,167,81,.5); }
.def-grid h3{ font-family:var(--font-sans); font-weight:800; font-size:1.06rem;
  color:var(--green-800); margin-bottom:.35rem; }
.def-grid p{ color:var(--ink-soft); line-height:1.6; font-size:.95rem; }
@media (max-width:820px){ .def-grid{ grid-template-columns:1fr; gap:1.3rem; } }


/* ====================================================================
   AFTELKLOK — Ramadan-hero. Sober: cijfers, labels, een dunne scheiding.
   Logische randen (inline-start), dus in het Arabisch klopt hij vanzelf.
   ==================================================================== */
.aftelklok{ margin-top:clamp(1.5rem,3.2vw,2.2rem); }
.aftelklok__kop{ margin:0 0 .8rem; font-family:var(--font-sans); font-weight:700;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-400); }
.aftelklok__cijfers{ display:flex; flex-wrap:wrap; align-items:flex-start; }
.aftelklok__deel{ display:flex; flex-direction:column; align-items:center; gap:.3rem;
  padding-inline:clamp(.95rem,2.6vw,1.9rem); }
.aftelklok__deel:first-child{ padding-inline-start:0; }
.aftelklok__deel + .aftelklok__deel{ border-inline-start:1px solid rgba(227,213,193,.28); }
.aftelklok__deel b{ font-family:var(--font-serif); font-weight:700; line-height:1;
  font-size:clamp(1.9rem,4.4vw,2.9rem); color:var(--cream);
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.aftelklok__deel span{ font-family:var(--font-sans); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(248,242,231,.72); }
.aftelklok__datum{ margin:1rem 0 0; font-size:.86rem; color:rgba(248,242,231,.68); }
.aftelklok__nb::before{ content:"\00B7"; margin-inline:.5rem; opacity:.65; }

@media (max-width:520px){
  .aftelklok__deel{ padding-inline:.7rem; }
  .aftelklok__deel b{ font-size:1.7rem; }
  .aftelklok__deel span{ font-size:.62rem; letter-spacing:.08em; }
  /* De regel eronder brak halverwege de toelichting af. Nu twee nette regels. */
  .aftelklok__datum{ font-size:.78rem; line-height:1.5; }
  .aftelklok__nb{ display:block; }
  .aftelklok__nb::before{ content:none; }
}

/* ====================================================================
   FLIPBOEK — de digitale catalogus op /catalog/
   Een blad met een voor- en een achterkant draait om de rug van het boek.
   Breed scherm: twee pagina's naast elkaar. Telefoon: één.
   ==================================================================== */
/* Vaste hoogte, geen min-height: alleen dan heeft "height:100%" op het boek
   iets om zich aan te meten en blijft alles binnen het scherm. */
.cat-hoofd{ padding-top:var(--header-h); background:var(--green-900);
  height:100vh; height:100svh; min-height:560px; display:flex; flex-direction:column; }

.fb{ position:relative; z-index:1; flex:1; min-height:0; display:flex; flex-direction:column;
  gap:clamp(.9rem,2vh,1.4rem); padding:clamp(1rem,2.4vh,1.8rem) var(--gutter) clamp(1.2rem,3vh,2rem); }

/* kopregel met titel en acties */
.fb__balk{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.8rem 1.2rem; }
.fb__titel{ margin:0; font-family:var(--font-display); font-weight:400; color:var(--gold-400);
  font-size:clamp(1.5rem,3.4vw,2.4rem); line-height:1.1; }
.fb__acties{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }

.fb-werk{ flex:1; display:flex; flex-direction:column; gap:clamp(.8rem,2vh,1.3rem); min-height:0; }
.fb-werk[hidden]{ display:none; }

/* het toneel: hier zit het perspectief */
.fb-toneel{ position:relative; flex:1; display:grid; place-items:center;
  perspective:2600px; min-height:0; }

/* Het boek vult wat er na de balk en de voetregel overblijft, zodat de
   miniaturen altijd in beeld staan en de pagina niet gaat schuiven. */
.fb-boek{ position:relative; display:flex; transform-style:preserve-3d;
  height:100%; max-height:100%; width:auto; max-width:100%;
  aspect-ratio:calc(var(--fb-w,1) / var(--fb-h,1.414));
  filter:drop-shadow(0 26px 50px rgba(0,0,0,.55)); }
.fb-boek--dubbel{ aspect-ratio:calc(var(--fb-w,1) * 2 / var(--fb-h,1.414)); }

/* een vaste helft */
.fb-vel{ position:relative; flex:1 1 50%; min-width:0; background:#fff; overflow:hidden; }
.fb-boek:not(.fb-boek--dubbel) .fb-vel{ flex-basis:100%; }
.fb-vel--links{ border-radius:6px 0 0 6px; }
.fb-vel--rechts{ border-radius:0 6px 6px 0; }
.fb-boek:not(.fb-boek--dubbel) .fb-vel{ border-radius:6px; }
.fb-vel--leeg{ background:transparent; }
/* Absoluut, anders bepaalt de eigen hoogte van de scan hoe hoog het boek
   wordt en loopt het over de voetregel heen. */
.fb-vel__img{ position:absolute; inset:0; display:block; width:100%; height:100%;
  object-fit:contain; background:#fff; -webkit-user-select:none; user-select:none; }
.fb-vel[data-pagina]{ cursor:grab; }
.fb-boek.is-slepend, .fb-boek.is-slepend .fb-vel{ cursor:grabbing; }
.fb-boek{ -webkit-user-select:none; user-select:none; }
/* de rug: een zachte schaduw waar de twee helften samenkomen */
.fb-boek--dubbel .fb-vel--links::after,
.fb-boek--dubbel .fb-vel--rechts::after{ content:""; position:absolute; top:0; bottom:0; width:34px;
  pointer-events:none; }
.fb-boek--dubbel .fb-vel--links::after{ right:0;
  background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.20)); }
.fb-boek--dubbel .fb-vel--rechts::after{ left:0;
  background:linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,.20)); }

/* het draaiende blad */
.fb-blad{ position:absolute; top:0; bottom:0; right:0; width:50%;
  transform-origin:left center; transform-style:preserve-3d; z-index:3; will-change:transform; }
.fb-boek:not(.fb-boek--dubbel) .fb-blad{ width:100%; }
.fb-blad.is-draaiend{ transition:transform .78s cubic-bezier(.52,.02,.28,1); }
.fb-blad__kant{ position:absolute; inset:0; overflow:hidden; background:#fff;
  -webkit-backface-visibility:hidden; backface-visibility:hidden; }
.fb-blad__kant--voor{ border-radius:0 6px 6px 0; }
.fb-blad__kant--achter{ transform:rotateY(180deg); border-radius:6px 0 0 6px; }
.fb-blad__kant img{ position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; background:#fff; }
/* schaduw langs de rug, zodat het blad rond lijkt te lopen */
.fb-blad__kant::after{ content:""; position:absolute; top:0; bottom:0; width:44px; pointer-events:none; }
.fb-blad__kant--voor::after{ left:0; background:linear-gradient(to right, rgba(0,0,0,.22), rgba(0,0,0,0)); }
.fb-blad__kant--achter::after{ right:0; background:linear-gradient(to left, rgba(0,0,0,.22), rgba(0,0,0,0)); }

/* bladeren */
.fb-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:rgba(248,242,231,.92); color:var(--green-900); border:1px solid var(--gold-500);
  box-shadow:0 10px 26px rgba(0,0,0,.4); cursor:pointer;
  transition:background .25s var(--ease), transform .25s var(--ease); }
.fb-nav:hover:not(:disabled){ background:var(--gold-400); transform:translateY(-50%) scale(1.06); }
.fb-nav:disabled{ opacity:.32; cursor:default; }
.fb-nav svg{ width:22px; height:22px; }
.fb-nav--vorige{ left:clamp(.2rem,1.6vw,1.4rem); }
.fb-nav--volgende{ right:clamp(.2rem,1.6vw,1.4rem); }
[dir="rtl"] .fb-nav svg{ transform:scaleX(-1); }

/* voetregel met teller en miniaturen */
.fb__voet{ display:flex; flex-direction:column; gap:.7rem; align-items:center; }
.fb__telrij{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; justify-content:center; }
.fb__telrij label{ font-family:var(--font-sans); font-size:.82rem; color:rgba(248,242,231,.7); }
.fb-teller{ font-family:var(--font-sans); font-size:.88rem; color:rgba(248,242,231,.82);
  font-variant-numeric:tabular-nums; }
.fb-spring{ width:4.4rem; padding:.34rem .5rem; border-radius:8px; text-align:center;
  border:1px solid rgba(227,213,193,.35); background:rgba(248,242,231,.08); color:var(--cream);
  font-family:var(--font-sans); font-size:.88rem; }
.fb-strip{ display:flex; gap:.5rem; overflow-x:auto; max-width:100%; padding:.35rem .2rem .8rem;
  overscroll-behavior-x:contain; cursor:grab; }
.fb-strip.is-slepend{ cursor:grabbing; scroll-behavior:auto; }
.fb-strip{ -webkit-user-select:none; user-select:none; }
.fb-strip__k img{ -webkit-user-drag:none; user-select:none; pointer-events:none; }
/* De systeembalk is grijs, en op sommige systemen een overlay die opmaak
   negeert. Daarom verbergen we hem en tekenen we er zelf een onder de strip. */
.fb-strip{ scrollbar-width:none; -ms-overflow-style:none; }
.fb-strip::-webkit-scrollbar{ display:none; height:0; width:0; }
.fb-balk{ position:relative; width:min(100%,760px); height:8px; border-radius:999px;
  background:rgba(248,242,231,.13); cursor:pointer; }
.fb-balk[hidden]{ display:none; }
.fb-balk__duim{ position:absolute; top:0; bottom:0; left:0; min-width:34px; border-radius:999px;
  background:var(--gold-600); transition:background .2s var(--ease); }
.fb-balk:hover .fb-balk__duim, .fb-balk.is-slepend .fb-balk__duim{ background:var(--gold-400); }
.fb-balk.is-slepend{ cursor:grabbing; }
.fb-strip__k{ flex:0 0 auto; position:relative; width:54px; padding:0; cursor:pointer;
  border:2px solid transparent; border-radius:5px; overflow:hidden; background:#fff;
  transition:border-color .2s var(--ease), transform .2s var(--ease); }
.fb-strip__k img{ display:block; width:100%; height:auto; }
.fb-strip__k span{ position:absolute; inset:auto 0 0 0; font-family:var(--font-sans);
  font-size:.6rem; font-weight:700; color:#fff; background:rgba(8,26,13,.66); padding:1px 0; }
.fb-strip__k:hover{ transform:translateY(-2px); border-color:var(--gold-400); }
.fb-strip__k.is-hier{ border-color:var(--gold-400); box-shadow:0 0 0 2px rgba(218,167,81,.4); }

/* vergroten */
.fb-loep{ position:fixed; inset:0; z-index:1200; background:rgba(6,18,10,.94);
  display:grid; grid-template-rows:auto 1fr; }
.fb-loep[hidden]{ display:none; }
.fb-loep__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.8rem clamp(.9rem,3vw,1.6rem); color:var(--cream); }
.fb-loep__nr{ font-family:var(--font-sans); font-size:.9rem; color:rgba(248,242,231,.85); }
.fb-loep__knoppen{ display:flex; gap:.5rem; }
.fb-loep button{ width:42px; height:42px; border-radius:10px; display:grid; place-items:center;
  background:rgba(248,242,231,.12); color:var(--cream); border:1px solid rgba(227,213,193,.3);
  cursor:pointer; font-family:var(--font-sans); font-size:1.1rem; font-weight:700; }
.fb-loep button:hover{ background:rgba(248,242,231,.22); }
.fb-loep__kader{ overflow:auto; display:grid; place-items:center; padding:0 0 1rem; }
.fb-loep__kader.is-groot{ place-items:start center; cursor:grab; }
.fb-loep__beeld{ max-width:100%; max-height:100%; transform-origin:top center;
  transition:transform .25s var(--ease); background:#fff; }

/* nog geen catalogus geplaatst */
.fb-melding{ margin:auto; max-width:46ch; text-align:center; color:rgba(248,242,231,.86); }
.fb-melding h2{ color:var(--gold-400); }

@media (max-width:899px){
  .fb-nav{ width:44px; height:44px; }
  .fb-strip__k{ width:44px; }
}
@media (prefers-reduced-motion:reduce){
  .fb-blad.is-draaiend{ transition:none; }
  .fb-nav, .fb-strip__k, .fb-loep__beeld{ transition:none; }
}

/* ====================================================================
   PORTAL TRANSITIE (Merken -> La Vache) — rustig, smooth, duidelijk
   ==================================================================== */
.portal{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 50% 50%, #19502a, #0b2613 60%, #081a0d);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease; }
.portal.active{ opacity:1; visibility:visible; pointer-events:all; }
.portal__bg{ position:absolute; inset:-12%; background:url("../img/patterns/star-pattern.svg") center/130px; opacity:0; }
.portal.active .portal__bg{ animation:pBg 1.1s ease forwards; }
.portal__bg.fine{ background:url("../img/patterns/star-pattern.svg") center/82px; }
.portal.active .portal__bg.fine{ animation:pBg2 1.1s ease forwards; }
.portal__flash{ position:absolute; inset:0; background:radial-gradient(circle,#ED2A20,#B0140F); opacity:0; }
.portal.active .portal__flash{ animation:pFlash 1.1s ease forwards; }
.portal__rings{ position:absolute; inset:0; display:grid; place-items:center; }
.portal__rings span{ position:absolute; width:210px; height:210px; border:1.5px solid #daa751; border-radius:50%; opacity:0; }
.portal.active .portal__rings span{ animation:pRing 2.4s ease-out infinite; }
.portal.active .portal__rings span:nth-child(2){ animation-delay:.8s; border-color:#ffffff; }
.portal.active .portal__rings span:nth-child(3){ animation-delay:1.6s; }
.portal__core{ position:relative; width:min(42vw,210px); aspect-ratio:1; display:grid; place-items:center; z-index:3; }
.portal__core::after{ content:""; position:absolute; inset:-22%; border-radius:50%; background:radial-gradient(circle, rgba(248,242,231,.16), transparent 68%); }
.portal__logo{ position:absolute; width:84%; height:84%; object-fit:contain; filter:drop-shadow(0 8px 22px rgba(0,0,0,.35)); }
.portal__logo--to{ opacity:0; background:#fff; border-radius:50%; padding:9%; }
.portal.active .portal__logo--from{ animation:pFrom 1.1s ease forwards; }
.portal.active .portal__logo--to{ animation:pTo 1.1s ease forwards; }
.portal__label{ position:absolute; bottom:15%; width:100%; text-align:center; font-family:var(--font-sans); font-weight:600; letter-spacing:.18em; text-transform:uppercase; font-size:.78rem; color:#E3D5C1; opacity:0; z-index:4; }
.portal.active .portal__label{ animation:pLabel 1.1s ease forwards; }
.portal__label b{ display:block; margin-top:.5rem; font-family:var(--font-display); font-weight:400; font-size:1.9rem; letter-spacing:.02em; text-transform:none; color:var(--gold-400); }
@keyframes pBg{ 0%{opacity:0;transform:scale(1.05)} 35%{opacity:.18} 100%{opacity:.13;transform:scale(1)} }
@keyframes pBg2{ 0%{opacity:0;transform:scale(.95)} 100%{opacity:.07;transform:scale(1)} }
@keyframes pFlash{ 0%,26%{opacity:0} 72%,100%{opacity:1} }
@keyframes pRing{ 0%{transform:scale(.55);opacity:.5} 100%{transform:scale(1.85);opacity:0} }
@keyframes pFrom{ 0%{opacity:0;transform:scale(.94)} 18%{opacity:1;transform:scale(1)} 40%{opacity:1} 54%{opacity:0} 100%{opacity:0} }
@keyframes pTo{ 0%,40%{opacity:0;transform:scale(.97)} 60%{opacity:1;transform:scale(1)} 100%{opacity:1;transform:scale(1)} }
@keyframes pLabel{ 0%,32%{opacity:0;transform:translateY(8px)} 54%{opacity:1;transform:none} 100%{opacity:1} }

/* arrival overlay op de La Vache pagina */
.lvqr-enter{ position:fixed; inset:0; z-index:9998; display:none; place-items:center; will-change:opacity;
  background:radial-gradient(circle,#ED2A20,#B0140F); }
/* .show (legacy) of de pre-paint klasse lv-entering tonen 'm meteen, vóór de eerste paint */
.lvqr-enter.show, .lv-entering .lvqr-enter{ display:grid; }
.lvqr-enter img{ width:min(42vw,200px); border-radius:50%; background:#fff; padding:16px; box-shadow:0 18px 50px rgba(0,0,0,.4); }
@media (prefers-reduced-motion: no-preference){
  /* sluit naadloos aan op het eindbeeld van de portal (rood + wit logo), houdt
     heel even vast en zoomt dan zacht door terwijl het rood wegfadet → onthult de pagina */
  .lv-entering .lvqr-enter{ animation:lvReveal .6s var(--ease) .4s forwards; }
  .lv-entering .lvqr-enter img{ animation:lvLand .95s var(--ease) forwards; }
}
@media (prefers-reduced-motion: reduce){ .lv-entering .lvqr-enter{ display:none; } }
@keyframes lvReveal{ to{ opacity:0; visibility:hidden; } }
@keyframes lvLand{ 0%,44%{ transform:scale(1); opacity:1; } 100%{ transform:scale(1.32); opacity:0; } }

@media (prefers-reduced-motion: reduce){
  .portal.active .portal__bg,.portal.active .portal__bg.fine,.portal.active .portal__rings span,.portal.active .portal__logo--from,
  .portal.active .portal__logo--to,.portal.active .portal__flash,.portal.active .portal__label{ animation-duration:.001ms !important; }
  .portal__logo--to{ opacity:1; } .portal__logo--from{ opacity:0; } .portal__flash{ opacity:1; }
}

/* ====================================================================
   LA VACHE QUI RIT — huisstijl (eigen wereld: rood/crème/speels)
   ==================================================================== */
.theme-lvqr{ --lv-red:#E2231A; --lv-red-dark:#C2150B; --lv-red-deep:#8E0C06;
  --lv-blue:#1B79C4; --lv-blue-dark:#125A92; --lv-sky:#E8F3FC;
  --lv-cream:#ffffff; --lv-cream2:#E8F3FC; --lv-ink:#2B2620;
  --lv-script:"Pacifico","Comic Sans MS",cursive; }
.theme-lvqr .site-header.scrolled{ background:var(--lv-red-dark); border-bottom-color:#ffffff; }
.lv-section{ position:relative; padding-block:var(--space-section); overflow:hidden; }
.lv-section--cream{ background:var(--lv-cream); color:var(--lv-ink); }
.lv-section--cream2{ background:var(--lv-cream2); color:var(--lv-ink); }
.lv-section--red{ background:var(--lv-red); color:#fff; }
.lv-section--white{ background:#fff; color:var(--lv-ink); }
/* lichtblauwe secties: dikke diagonale strepen — zoals op de La Vache-verpakking */
.theme-lvqr .lv-section--cream2, .theme-lvqr .lv-bel{
  background:repeating-linear-gradient(-45deg, #E8F3FC 0 30px, #A9CDEB 30px 60px); }
.lv-h{ font-family:var(--lv-script); font-weight:400; letter-spacing:0; line-height:1.12; color:var(--lv-red); }
.lv-section--red .lv-h, .lv-hero .lv-h{ color:#fff; }
.lv-h--xl{ font-size:clamp(2.7rem,6.2vw,5rem); }
.lv-h--l{ font-size:clamp(2rem,4.2vw,3.4rem); }
.lv-eyebrow{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-sans); font-weight:600; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--lv-blue); }
.lv-section--red .lv-eyebrow, .lv-hero .lv-eyebrow{ color:#ffe1ad; }
.lv-eyebrow::before{ content:""; width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 36% 34%, currentColor 0 46%, transparent 48%); }
.lv-lead{ font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.6; color:#46413a; font-family:var(--font-sans); font-weight:400; }
.lv-section--red .lv-lead, .lv-hero .lv-lead{ color:#ffffff; }

/* playful dotted/pattern */
.lv-dots{ position:absolute; inset:-6%; z-index:0; pointer-events:none; }
/* hero: speelse polka dots (zoals gewenst) */
.lv-hero .lv-dots{ opacity:.9; background:radial-gradient(rgba(255,255,255,.18) 5px, transparent 6px); background-size:46px 46px; }
/* secties eronder: geen achtergrond-doodles meer (schoon) */
.lv-section .lv-dots{ display:none; }
.lv-wrap{ position:relative; z-index:1; }

/* ---- Handgetekende achtergrond-doodles uit (schone secties); krijt-woorden blijven ---- */
.lv-doodle{ display:none; }
.lv-doodle use{ filter:url(#dood-rough); }
.lv-section--red .lv-doodle, .lv-hero .lv-doodle{ color:#fff; }
.lv-doodle--blue{ color:var(--lv-blue) !important; }
.lv-doodle--arrow{ width:clamp(78px,8.5vw,128px); }
.lv-doodle--star{ width:clamp(20px,2.4vw,34px); }
.lv-doodle--squiggle{ width:clamp(74px,8vw,116px); }
@media (max-width:820px){ .lv-doodle{ display:none; } }   /* op mobiel alleen de subtiele textuur */
/* posities per plek (op groot scherm) */
.lv-d-story-arrow{ left:41%; top:48%; transform:rotate(-6deg); }
.lv-d-story-star{ right:7%; bottom:12%; }
.lv-d-prod-squiggle{ left:2%; bottom:6%; transform:rotate(-8deg); }
.lv-d-prod-star{ right:4%; bottom:12%; }
.lv-d-gal-star{ left:4%; bottom:10%; }
.lv-d-usp-arrow{ left:49%; top:3%; transform:rotate(108deg); }
.lv-d-usp-star{ left:5%; top:46%; }
.lv-d-usp-star2{ right:6%; bottom:16%; }
.lv-d-cta-arrow{ left:16%; bottom:22%; transform:rotate(26deg); }
.lv-d-cta-star{ right:17%; top:20%; }
.lv-d-cta-squiggle{ left:11%; top:24%; transform:rotate(-10deg); }
/* gekrijte tekst: handgetekende onderstreping onder een woord (reflow-veilig) */
.lv-chalk{ position:relative; display:inline-block; line-height:1; white-space:nowrap; }
.lv-chalk--underline::after{ content:""; position:absolute; left:-.04em; right:-.04em; bottom:-.16em; height:.34em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 26' fill='none' stroke='%23E2231A' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M8 13C60 4 165 4 212 12'/%3E%3Cpath d='M16 21C70 14 160 15 198 20'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.lv-chalk--blue.lv-chalk--underline::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 26' fill='none' stroke='%231B79C4' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M8 13C60 4 165 4 212 12'/%3E%3Cpath d='M16 21C70 14 160 15 198 20'/%3E%3C/svg%3E"); }
.lv-section--red .lv-chalk--underline::after, .lv-hero .lv-chalk--underline::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 26' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M8 13C60 4 165 4 212 12'/%3E%3Cpath d='M16 21C70 14 160 15 198 20'/%3E%3C/svg%3E"); }

/* HERO */
.lv-hero{ position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(125% 135% at 82% 0%, #F4312A, #C2150B 70%);
  padding-top:calc(var(--header-h) + clamp(2rem,5vw,4rem)); padding-bottom:clamp(4.5rem,8vw,7.5rem); }
/* groot zacht "kaaswiel" op de achtergrond */
.lv-hero::before{ content:""; position:absolute; right:-7vw; top:-7vw; width:46vw; height:46vw; max-width:620px; max-height:620px;
  border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.16), transparent 66%); z-index:0; pointer-events:none; }
/* witte golf-divider onderaan, naar de witte sectie eronder */
.lv-hero__wave{ position:absolute; left:0; right:0; bottom:-1px; height:clamp(38px,5vw,68px); z-index:2; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,46 C220,86 430,8 720,34 C1010,60 1230,90 1440,42 L1440,80 L0,80 Z' fill='%23ffffff'/%3E%3C/svg%3E") bottom/100% 100% no-repeat; }
.lv-hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.lv-cobrand{ display:inline-flex; align-items:center; gap:.7rem; background:rgba(255,255,255,.16); border:1px solid #ffffff;
  padding:.5rem .95rem; border-radius:999px; font-family:var(--font-sans); font-weight:600; font-size:.82rem; color:#fff; }
.lv-cobrand img{ height:20px; width:auto; }
.lv-hero__logo{ width:min(74%,420px); filter:drop-shadow(0 14px 30px rgba(0,0,0,.3)); margin-bottom:1.2rem; }
.lv-hero__media{ position:relative; }
.lv-photo{ position:relative; overflow:hidden; background:#fff; box-shadow:var(--shadow-lg); }
.lv-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.lv-photo--blob{ border-radius:46% 54% 48% 52%/52% 46% 54% 48%;
  box-shadow:0 0 0 9px #fff, 0 0 0 16px var(--lv-blue), var(--shadow-lg); }
.lv-photo--round{ border-radius:28px; box-shadow:0 0 0 6px #fff, var(--shadow-lg); }
.lv-hero__badge{ position:absolute; bottom:-16px; left:-16px; background:var(--lv-blue); color:#fff; border-radius:50%; width:120px; height:120px;
  display:grid; place-items:center; text-align:center; box-shadow:var(--shadow); transform:rotate(-8deg); border:4px solid #fff; z-index:3; }
.lv-hero__badge b{ font-family:var(--lv-script); font-weight:400; font-size:1.8rem; line-height:1; }
.lv-hero__badge span{ font-family:var(--font-sans); font-weight:600; font-size:.6rem; text-transform:uppercase; letter-spacing:.1em; }

/* factbar */
.lv-facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.7rem,1.5vw,1rem); }
.lv-fact{ background:var(--lv-red); padding:1.5rem 1rem; text-align:center; border-radius:20px; border:3px solid #fff;
  box-shadow:0 0 0 2px rgba(226,35,26,.16), var(--shadow-sm); }
.lv-fact:nth-child(2), .lv-fact:nth-child(4){ background:var(--lv-blue); box-shadow:0 0 0 2px rgba(27,121,196,.18), var(--shadow-sm); }
.lv-fact b{ display:block; font-family:var(--lv-script); font-weight:400; font-size:clamp(1.9rem,3.2vw,2.7rem); color:#fff; line-height:1.06; }
/* Alleen het label eronder. Zonder > raakte deze regel ook het telspan
   binnen <b>, waardoor '120+' en '100+' als klein bijschrift werden
   getekend terwijl '1921' en 'Bel' groot stonden. */
.lv-fact > span{ font-family:var(--font-sans); font-weight:500; font-size:.82rem; color:#fff; }

/* product cards */
.lv-prods{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,1.8rem); }
.lv-prod{ background:#fff; border-radius:26px; overflow:hidden; box-shadow:var(--shadow-sm); border:2px solid var(--lv-sky);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); display:flex; flex-direction:column; }
.lv-prod:hover{ transform:translateY(-9px) rotate(-.7deg); box-shadow:var(--shadow); border-color:var(--lv-red); }
.lv-prod__img{ aspect-ratio:4/3; background:var(--lv-sky); display:grid; place-items:center; overflow:hidden; position:relative; }
.lv-prod__img img{ width:100%; height:100%; object-fit:cover; }
.lv-prod__tag{ position:absolute; top:12px; left:12px; background:var(--lv-red); color:#fff; font-family:var(--font-sans); font-weight:600; font-size:.68rem; letter-spacing:.05em; text-transform:uppercase; padding:.34rem .75rem; border-radius:999px; box-shadow:var(--shadow-sm); }
.lv-prod:nth-child(2) .lv-prod__tag{ background:var(--lv-blue); }
.lv-prod__b{ padding:1.4rem 1.5rem 1.6rem; }
.lv-prod h3{ font-family:var(--lv-script); font-weight:400; font-size:1.55rem; color:var(--lv-red); margin-bottom:.45rem; line-height:1.1; }
.lv-prod p{ font-size:.95rem; color:#46413a; }

/* feature/usp row */
.lv-usp{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,1.8rem); }
.lv-usp__c{ background:#fff; border-radius:24px; padding:1.8rem; box-shadow:var(--shadow-sm); border:2px solid #fff;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.lv-usp__c:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.lv-usp__ic{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:var(--lv-red); color:#fff;
  margin-bottom:1.1rem; box-shadow:0 0 0 5px rgba(226,35,26,.14); }
.lv-usp__c:nth-child(2) .lv-usp__ic{ background:var(--lv-blue); box-shadow:0 0 0 5px rgba(27,121,196,.16); }
.lv-usp__ic svg{ width:30px; height:30px; }
.lv-usp__c h3{ font-family:var(--lv-script); font-weight:400; font-size:1.4rem; color:var(--lv-ink); margin-bottom:.4rem; line-height:1.12; }
.lv-usp__c p{ font-size:.95rem; color:#46413a; }

/* partnership bridge (terug naar All4Trade groen) */
.lv-partner{ position:relative; overflow:hidden; background:var(--green-800); color:var(--cream); }
.lv-partner::before{ content:""; position:absolute; inset:0; opacity:.08; background:url("../img/patterns/star-pattern.svg") center/130px; }
.lv-partner__x{ display:inline-flex; align-items:center; gap:1rem; margin-bottom:1.4rem; }
.lv-partner__x img{ height:46px; width:auto; background:#fff; border-radius:10px; padding:6px; }
.lv-partner__x span{ font-family:var(--font-display); font-size:2rem; color:var(--gold-400); }

.lv-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-family:var(--font-sans); font-weight:600;
  padding:.95rem 1.9rem; border-radius:999px; background:#fff; color:var(--lv-red); box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s; }
.lv-btn svg{ width:19px; height:19px; }
.lv-btn:hover{ transform:translateY(-3px) scale(1.03); box-shadow:var(--shadow); }
.lv-btn--red{ background:var(--lv-red); color:#fff; }
.lv-btn--blue{ background:var(--lv-blue); color:#fff; }
.lv-btn--ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.7); }
.lv-btn--ghost:hover{ background:rgba(255,255,255,.14); }

/* --- La Vache productpagina's --- */
.lv-photo--ph{ background:var(--lv-cream2); display:grid; place-items:center; }
.lv-ph{ display:grid; justify-items:center; gap:.7rem; text-align:center; padding:1.6rem; color:var(--lv-red); }
.lv-ph svg{ width:46px; height:46px; }
.lv-ph > span:not(.lv-ph__hint){ font-family:var(--font-sans); font-weight:700; font-size:.98rem; color:#4a332e; max-width:22ch; line-height:1.4; }
.lv-ph__hint{ font-family:var(--font-sans); font-weight:800; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--lv-red); border:1px solid rgba(226,35,26,.4); border-radius:999px; padding:.3rem .75rem; }
.lv-ph--sm{ padding:0; } .lv-ph--sm svg{ width:32px; height:32px; }
.lv-uses{ list-style:none; display:grid; gap:.85rem; margin-top:1.5rem; }
.lv-uses li{ display:flex; align-items:center; gap:.75rem; font-family:var(--font-sans); font-weight:600; color:var(--lv-ink); }
.lv-uses svg{ width:24px; height:24px; flex:none; color:var(--lv-red); }
a.lv-prod{ display:block; text-decoration:none; color:inherit; }
.lv-prod__go{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; font-family:var(--font-sans); font-weight:800; font-size:.9rem; color:var(--lv-red); }
.lv-prod__go svg{ width:17px; height:17px; transition:transform .25s var(--ease); }
.lv-prod:hover .lv-prod__go svg{ transform:translateX(3px); }

@media (max-width:920px){
  .lv-hero__grid{ grid-template-columns:1fr; }
  .lv-prods, .lv-usp{ grid-template-columns:1fr 1fr; }
  .lv-facts{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){ .lv-prods, .lv-usp{ grid-template-columns:1fr; } }

/* ====================================================================
   SUBTIELE ANIMATIES (site-breed)
   ==================================================================== */
@keyframes fadeUp{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes softIn{ from{opacity:0} to{opacity:1} }
@keyframes heroPhotoIn{ from{ opacity:0; transform:translateX(48px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: no-preference){
  /* hero-inhoud laadt rustig gestaffeld in */
  :is(.hero__copy, .page-hero__inner, .brand-hero__inner > div:first-child, .lv-hero .lv-wrap:first-child) > *{
    animation:fadeUp .7s var(--ease) both; }
  :is(.hero__copy, .page-hero__inner, .brand-hero__inner > div:first-child, .lv-hero .lv-wrap:first-child) > *:nth-child(2){ animation-delay:.06s; }
  :is(.hero__copy, .page-hero__inner, .brand-hero__inner > div:first-child, .lv-hero .lv-wrap:first-child) > *:nth-child(3){ animation-delay:.12s; }
  :is(.hero__copy, .page-hero__inner, .brand-hero__inner > div:first-child, .lv-hero .lv-wrap:first-child) > *:nth-child(4){ animation-delay:.18s; }
  :is(.hero__copy, .page-hero__inner, .brand-hero__inner > div:first-child, .lv-hero .lv-wrap:first-child) > *:nth-child(5){ animation-delay:.24s; }
  :is(.hero__copy, .page-hero__inner, .brand-hero__inner > div:first-child, .lv-hero .lv-wrap:first-child) > *:nth-child(6){ animation-delay:.30s; }
  .lv-hero__media, .brand-hero__inner > .brand-row__media{ animation:softIn 1s var(--ease) both; animation-delay:.18s; }
  /* homepage-hero: foto schuift rustig uit de rechtermuur naar binnen (eenmalige laadanimatie) */
  .hero__media .photo--hero{ animation:heroPhotoIn 1.05s var(--ease) .12s both; }
}
/* zachte beeld-zoom bij hover */
.photo, .frame, .lv-photo, .lv-prod__img, .cat-card__photo{ overflow:hidden; }
.photo__img, .lv-photo img, .lv-prod__img img{ transition:transform .6s var(--ease); will-change:transform; }
.card:hover .photo__img, .lv-prod:hover .lv-prod__img img, .lv-photo:hover img{ transform:scale(1.05); }
/* nav-onderstreping schuift in */
.nav__link{ position:relative; }
.nav__link::after{ content:""; position:absolute; left:.85rem; right:.85rem; bottom:.4rem; height:2px; border-radius:2px;
  background:currentColor; opacity:.85; transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after{ transform:scaleX(1); }

/* ====================================================================
   HEADER — verfijnd met een rustige Arabische sfeer
   ==================================================================== */
.header-inner{ position:relative; z-index:2; }
/* fijne geometrische sluier — alleen wanneer gescrold, heel subtiel */
.site-header::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../img/patterns/star-pattern.svg") center/220px; opacity:0; transition:opacity .45s var(--ease); }
.site-header.scrolled::after{ opacity:.06; }
/* nav-links: rustige gouden pill bij hover + verfijnde onderstreping */
.nav__link{ position:relative; z-index:1; transition:color .2s var(--ease), background .25s var(--ease); }
.nav__link:hover{ background:rgba(218,167,81,.09); }
.nav__link[aria-current="page"]{ background:rgba(218,167,81,.06); }
.nav__link::after{ left:1rem; right:1rem; bottom:.32rem; height:2px; opacity:1;
  background:var(--gold-500); }
/* dropdown: arabesk-sluier, gouden accent en verfijnde icoon-chips */
.nav__panel{ overflow:hidden; padding:.7rem; border-radius:18px; border-color:#daa751;
  box-shadow:0 26px 64px -30px rgba(0,0,0,.72), inset 0 1px 0 rgba(218,167,81,.2); }
.nav__panel::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../img/patterns/star-pattern.svg") top -20px right -20px/160px; opacity:.05; }
.nav__panel a{ position:relative; z-index:1; gap:.85rem; padding:.6rem .7rem; }
.nav__panel a svg{ width:34px; height:34px; flex:none; box-sizing:border-box; padding:8px; border-radius:10px;
  background:rgba(218,167,81,.12); color:var(--gold-500); transition:background .22s var(--ease), transform .25s var(--ease); }
.nav__panel a:hover{ background:rgba(218,167,81,.1); color:var(--gold-300); }
.nav__panel a:hover svg{ background:rgba(218,167,81,.26); transform:translateX(2px); }
/* mobiel menu: dezelfde rustige geometrische sluier */
.drawer::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../img/patterns/star-pattern.svg") top right/200px; opacity:.05; }
.drawer > *{ position:relative; z-index:1; }

/* ====================================================================
   ALLES LINKS UITGELIJND — consistent op elke pagina
   ==================================================================== */
.text-center{ text-align:left; }
.cta-band .cta-row, .cta-row[style*="center"]{ justify-content:flex-start !important; }
.stat{ text-align:left; }
.value-card{ text-align:left; }
.value-card .vc-icon{ margin-left:0; margin-right:auto; }

/* ====================================================================
   MERK-WOORDMERK — nette "logo"-look voor merken zonder eigen logo
   ==================================================================== */
.wordmark{ display:grid; justify-items:center; gap:.55rem; padding:0 1.1rem; text-align:center; }
.wordmark__name{ font-family:var(--font-sans); font-weight:800; font-size:clamp(1.4rem,2.4vw,1.7rem);
  letter-spacing:.005em; color:var(--green-800); line-height:1.05; }
.wordmark__rule{ width:34px; height:3px; border-radius:3px; background:var(--cat-color,#19502a); }

/* ====================================================================
   VERFIJNDE 'PRINT' — subtiele achtergrondpatronen die elegant uitvagen
   ==================================================================== */
.hero::before, .cta-band::before, .page-hero::before, .brand-hero::before,
.heritage::before, .lv-partner::before{
  opacity:.10; background-size:160px;
  -webkit-mask-image: radial-gradient(150% 125% at 50% -22%, #000 42%, transparent 86%);
          mask-image: radial-gradient(150% 125% at 50% -22%, #000 42%, transparent 86%);
}
/* een fluisterzachte print op de lichte secties — bindt de pagina samen */
.section--cream, .section--paper{ position:relative; }
.section--cream > .container, .section--paper > .container{ position:relative; z-index:1; }
.section--cream::before, .section--paper::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../img/patterns/star-pattern.svg") center/160px; opacity:.04;
  -webkit-mask-image: radial-gradient(130% 120% at 50% 0%, #000 35%, transparent 88%);
          mask-image: radial-gradient(130% 120% at 50% 0%, #000 35%, transparent 88%);
}
/* Ook hier: geen halve sterren tegen de bovenrand. Waar de browser maskers kan
   snijden, dooft het patroon aan beide randen uit binnen de radiale gloed. */
@supports (mask-composite: intersect) or (-webkit-mask-composite: source-in){
  .section--cream::before, .section--paper::before{
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 72px, #000 calc(100% - 40px), transparent 100%),
      radial-gradient(130% 120% at 50% 0%, #000 35%, transparent 88%);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(180deg, transparent 0, #000 72px, #000 calc(100% - 40px), transparent 100%),
      radial-gradient(130% 120% at 50% 0%, #000 35%, transparent 88%);
            mask-composite:intersect;
  }
}
/* icoon-medaillons liften subtiel bij card-hover */
.feat-icon, .vc-icon, .li-icon, .info-card .ic-icon, .lv-usp__ic{ transition:transform .35s var(--ease); }
.feature:hover .feat-icon, .value-card:hover .vc-icon, .logi-step:hover .li-icon, .info-card:hover .ic-icon, .lv-usp__c:hover .lv-usp__ic{ transform:translateY(-3px); }
/* link-pijl & knoppen al subtiel; reveal iets verfijnd */
.reveal{ transition:opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease); }

/* ====================================================================
   FLARE — ken burns, reveal-varianten, parallax, merk-chips, galerij
   ==================================================================== */
img.kenburns{ transform-origin:center; }
@keyframes kenburns{ from{transform:scale(1.02)} to{transform:scale(1.13)} }

.reveal-left,.reveal-right,.reveal-scale{ opacity:0; transition:opacity .85s var(--ease), transform .85s var(--ease); }
.reveal-left{ transform:translateX(-34px); } .reveal-right{ transform:translateX(34px); } .reveal-scale{ transform:scale(.92); }
.reveal-left.in,.reveal-right.in,.reveal-scale.in{ opacity:1; transform:none; }

[data-parallax]{ will-change:transform; }

/* merk-marquee: witte chips met echte logo's */
/* Logo's staan los op het groen (geen witte kaart). Een zachte slagschaduw
   maakt ze los van de achtergrond; alle logo's zijn transparant. */
.section--green .brand-logo, .brand-logo{ background:transparent; color:var(--cream); border-radius:14px;
  width:clamp(158px,16vw,196px); height:104px; min-width:0; padding:.4rem 1rem; box-shadow:none;
  justify-content:center; font-size:1.5rem; opacity:.96;
  transition:transform .3s var(--ease), opacity .3s var(--ease); }
.section--green .brand-logo:hover, .brand-logo:hover{ transform:translateY(-5px); opacity:1; }
/* uniforme (symmetrische) logogrootte: gelijk begrensd in hoogte én breedte */
.brand-logo img{ max-height:66px; max-width:148px; width:auto; object-fit:contain;
  filter:drop-shadow(0 5px 15px rgba(0,0,0,.4)); transition:transform .3s var(--ease); }
.brand-logo:hover img{ transform:scale(1.06); }
.marquee__track{ align-items:center; }

/* La Vache galerij */
.lv-gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:clamp(.6rem,1.4vw,1rem); }
.lv-gallery figure{ position:relative; overflow:hidden; border-radius:16px; aspect-ratio:1; box-shadow:var(--shadow-sm); margin:0; background:var(--lv-cream2); }
.lv-gallery figure.wide{ grid-column:span 2; aspect-ratio:2/1; }
.lv-gallery figure.tall{ grid-row:span 2; aspect-ratio:1/2; }
.lv-gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.lv-gallery figure:hover img{ transform:scale(1.08); }
.lv-gallery figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1rem .9rem .8rem; color:#fff;
  font-family:var(--font-sans); font-weight:700; font-size:.85rem; background:linear-gradient(transparent,rgba(126,13,10,.78)); opacity:0; transform:translateY(8px); transition:.35s var(--ease); }
.lv-gallery figure:hover figcaption{ opacity:1; transform:none; }

/* La Vache: onderdeel van Bel */
.lv-bel{ background:var(--lv-cream2); }
.lv-bel__row{ display:flex; align-items:center; justify-content:center; gap:clamp(1.4rem,4vw,3rem); flex-wrap:wrap; margin-top:1.4rem; }
.lv-bel__row img{ height:46px; width:auto; opacity:.92; }
.lv-bel__row .lv-bel-pill{ font-family:var(--font-sans); font-weight:600; color:var(--lv-red); background:#fff; padding:.6rem 1.2rem; border-radius:999px; box-shadow:var(--shadow-sm); border:2px solid var(--lv-sky); }
.lv-bel__row .lv-bel-pill:nth-child(even){ color:var(--lv-blue); }

/* speelse bob op de hero-badge */
.lv-hero__badge{ animation:bob 5.5s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:rotate(-8deg) translateY(0)} 50%{transform:rotate(-8deg) translateY(-9px)} }

@media (max-width:760px){ .lv-gallery{ grid-template-columns:repeat(2,1fr); } .lv-gallery figure.wide{ grid-column:span 2; } }
@media (prefers-reduced-motion: reduce){ img.kenburns,.lv-hero__badge{ animation:none; } [data-parallax]{ transform:none !important; } }

/* categorie-kaart met echte foto */
.cat-card__photo:has(img){ border:none; padding:0; background:transparent; }
.cat-card__photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.cat-card:hover .cat-card__photo img{ transform:scale(1.06); }

/* ====================================================================
   REVAMP — traditioneel B2B fundament (Roboto Slab + strakke hoeken)
   Stijl ontleend aan de oude Elementor-template: serieus, gesorteerd,
   met de Arabische signatuur in goud.
   ==================================================================== */
/* La Vache houdt bewust zijn eigen moderne sans in de rode wereld */
.theme-lvqr{ --font-sans:"Fredoka", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif:"Fredoka", "Manrope", system-ui, sans-serif; }

/* strakkere, gesorteerde navigatie */
.nav{ gap:.15rem; }
.nav__link{ text-transform:uppercase; letter-spacing:.09em; font-size:.76rem; font-weight:600; padding:.6rem .8rem; }
.nav__panel{ border-radius:4px; min-width:262px; }
.nav__panel a{ border-radius:3px; letter-spacing:.01em; }
.nav__panel a svg{ border-radius:3px; }
.header-actions .btn{ text-transform:uppercase; letter-spacing:.14em; font-size:.74rem;
  height:46px; padding-top:0; padding-bottom:0; }

/* strakke hoeken op componenten met expliciete radius */
.spec-grid{ border-radius:5px; }
.spec__ic{ border-radius:4px; }
.cat-badge, .cat-mini, .cat-mini__ic{ border-radius:4px; }
.brand-logo{ border-radius:4px; }
.stat{ border-radius:0; }
.range-chip{ border-radius:3px; }
.photo__hint, .lv-ph__hint{ border-radius:3px; }
.info-card, .quote-card, .value-card, .feature.card, .card{ border-radius:5px; }
.cat-card{ border-radius:5px; }

/* eyebrow nog iets dichter bij de template (13px, breed gespatieerd goud) */
.eyebrow::before{ width:30px; height:2px; opacity:.9; }

/* nav nooit laten afbreken; eerder inklappen naar het hamburgermenu */
.nav__link{ white-space:nowrap; }
@media (max-width:1080px){
  .nav, .header-actions .lang, .header-actions .btn:not(.menu-toggle){ display:none; }
  .menu-toggle{ display:inline-flex; }
}
/* knoppen in template-stijl: uppercase, breed gespatieerd */
.btn{ text-transform:uppercase; letter-spacing:.18em; font-weight:600; }
/* statsbalk als nette datarij met gouden scheidingslijnen */
.stats--bar .stat{ padding-inline:clamp(1rem,2.4vw,2.2rem); }
.stats--bar .stat + .stat{ border-left:1px solid #daa751; }
@media (max-width:680px){ .stats--bar .stat + .stat{ border-left:0; border-top:1px solid #daa751; } }

/* ====================================================================
   MERK-WERELDEN (brand worlds) — herbruikbaar themasysteem
   Durra: rood/goud Levantijns erfgoed · Zinè: groen/goud Damasceens
   ==================================================================== */
.theme-durra{ --bw-primary:#C0241E; --bw-deep:#7E120D; --bw-cream:#FBF3E6; --bw-cream2:#F2E3C9; --bw-ink:#3A211D; }
.theme-zine{ --bw-primary:#19502a; --bw-deep:#0f3019; --bw-cream:#F4EEE3; --bw-cream2:#E3D5C1; --bw-ink:#16271C; }
.theme-durra .site-header.scrolled, .theme-zine .site-header.scrolled{ background:var(--bw-deep); border-bottom-color:#daa751; }

.bw-section{ position:relative; padding-block:var(--space-section); }
.bw-section--cream{ background:var(--bw-cream); color:var(--bw-ink); }
.bw-section--cream2{ background:var(--bw-cream2); color:var(--bw-ink); }
.bw-section--primary{ background:var(--bw-primary); color:#fff; }
.bw-section--white{ background:#fff; color:var(--bw-ink); }
.bw-wrap{ position:relative; z-index:1; }

.bw-h{ font-family:var(--font-sans); font-weight:700; line-height:1.06; color:var(--bw-primary); }
.bw-h--display{ font-family:var(--font-display); font-weight:400; letter-spacing:.5px; line-height:1; color:var(--gold-500); }
.bw-section--primary .bw-h, .bw-hero .bw-h{ color:#fff; }
.bw-section--primary .bw-h--display, .bw-hero .bw-h--display{ color:var(--gold-400); }
.bw-h--xl{ font-size:clamp(2.7rem,6vw,4.8rem); }
.bw-h--l{ font-size:clamp(2rem,3.7vw,3.1rem); }
.bw-eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-sans); font-weight:700; font-size:.8rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-600); }
.bw-section--primary .bw-eyebrow, .bw-hero .bw-eyebrow{ color:var(--gold-300); }
.bw-eyebrow::before{ content:""; width:30px; height:2px; background:currentColor; }
.bw-section--cream .bw-eyebrow, .bw-section--cream2 .bw-eyebrow{ color:#8a6326; }
.bw-lead{ font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.65; font-weight:300; color:#4a332e; }
.theme-zine .bw-lead{ color:#3a4a40; }
.bw-section--primary .bw-lead, .bw-hero .bw-lead{ color:#ffffff; }

/* subtiele erfgoed-print (arabesk, geen speelse stippen) */
.bw-pat{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.06;
  background:url("../img/patterns/star-pattern.svg") center/150px;
  -webkit-mask-image:radial-gradient(140% 120% at 50% 0%, #000 40%, transparent 86%);
          mask-image:radial-gradient(140% 120% at 50% 0%, #000 40%, transparent 86%); }
.bw-section--cream .bw-pat, .bw-section--cream2 .bw-pat{ opacity:.05; }

/* HERO */
.bw-hero{ position:relative; overflow:hidden; color:#fff; background:linear-gradient(155deg, var(--bw-primary), var(--bw-deep));
  padding-top:calc(var(--header-h) + clamp(2rem,5vw,4rem)); padding-bottom:clamp(3rem,6vw,5rem); }
.bw-hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(1.4rem,3vw,2.6rem); align-items:center; }
.bw-cobrand{ display:inline-flex; align-items:center; gap:.7rem; background:#fff; border:1px solid #fff;
  padding:.5rem .9rem; border-radius:3px; font-family:var(--font-sans); font-weight:700; font-size:.76rem; letter-spacing:.04em; color:var(--green-800); }
.bw-cobrand img{ height:18px; width:auto; }
.bw-hero__logo{ background:#fff; border-radius:4px; padding:.7rem 1.05rem; display:inline-block; margin-bottom:1.2rem; box-shadow:var(--shadow); }
.bw-hero__logo img{ height:44px; width:auto; display:block; }
.bw-hero__media{ position:relative; }
.bw-photo{ position:relative; overflow:hidden; background:#fff; box-shadow:var(--shadow-lg); border-radius:4px; }
.bw-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.bw-photo--arch{ border-radius:46% 46% 4px 4px / 30% 30% 3% 3%; }
.bw-hero__badge{ position:absolute; bottom:-16px; right:-16px; background:var(--gold-500); color:var(--bw-deep); width:106px; height:106px; border-radius:50%;
  display:grid; place-items:center; text-align:center; box-shadow:var(--shadow); border:3px solid #fff; }
.bw-hero__badge b{ font-family:var(--font-sans); font-weight:700; font-size:1.5rem; line-height:1; }
.bw-hero__badge span{ font-family:var(--font-sans); font-weight:600; font-size:.58rem; text-transform:uppercase; letter-spacing:.1em; margin-top:.1rem; }

/* facts */
.bw-facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(218,167,81,.32); border-radius:5px; overflow:hidden; box-shadow:var(--shadow); }
.bw-fact{ background:var(--bw-deep); padding:1.4rem 1.4rem; }
.bw-fact b{ display:block; font-family:var(--font-sans); font-weight:700; font-size:clamp(1.5rem,2.7vw,2.1rem); color:var(--gold-400); }
.bw-fact span{ font-family:var(--font-sans); font-size:.76rem; color:#ffffff; }

/* product cards */
.bw-prods{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,1.8rem); }
.bw-prod{ display:block; text-decoration:none; color:inherit; background:#fff; border-radius:5px; overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid rgba(0,0,0,.07);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.bw-prod:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.bw-prod__img{ aspect-ratio:4/3; background:var(--bw-cream2); display:grid; place-items:center; overflow:hidden; position:relative; }
.bw-prod__img img{ width:100%; height:100%; object-fit:cover; }
.bw-prod__tag{ position:absolute; top:10px; left:10px; background:var(--bw-primary); color:#fff; font-family:var(--font-sans); font-weight:700; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; padding:.3rem .6rem; border-radius:3px; }
.bw-prod__b{ padding:1.3rem 1.4rem 1.5rem; }
.bw-prod h3{ font-family:var(--font-sans); font-weight:700; font-size:1.2rem; color:var(--bw-primary); margin-bottom:.4rem; }
.bw-prod p{ font-size:.95rem; color:#4a332e; }
.theme-zine .bw-prod p{ color:#3a4a40; }
.bw-prod__go{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; font-family:var(--font-sans); font-weight:700; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--bw-primary); }
.bw-prod__go svg{ width:17px; height:17px; transition:transform .25s var(--ease); }
.bw-prod:hover .bw-prod__go svg{ transform:translateX(3px); }

/* usp */
.bw-usp{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2.5vw,1.8rem); }
.bw-usp__c{ background:#fff; border-radius:5px; padding:1.7rem; box-shadow:var(--shadow-sm); border:1px solid rgba(0,0,0,.07); }
.bw-usp__ic{ width:54px; height:54px; border-radius:4px; display:grid; place-items:center; background:rgba(218,167,81,.16); color:var(--bw-primary); margin-bottom:1rem; }
.bw-usp__ic svg{ width:27px; height:27px; }
.bw-usp__c h3{ font-family:var(--font-sans); font-weight:700; font-size:1.1rem; color:var(--bw-ink); margin-bottom:.4rem; }
.bw-usp__c p{ font-size:.95rem; color:#4a332e; }
.theme-zine .bw-usp__c p{ color:#3a4a40; }

/* uses checklist */
.bw-uses{ list-style:none; display:grid; gap:.85rem; margin-top:1.5rem; }
.bw-uses li{ display:flex; align-items:center; gap:.75rem; font-family:var(--font-sans); font-weight:500; color:var(--bw-ink); }
.bw-uses svg{ width:24px; height:24px; flex:none; color:var(--bw-primary); }

/* fotovak-placeholder */
.bw-photo--ph{ background:var(--bw-cream2); display:grid; place-items:center; }
.bw-ph{ display:grid; justify-items:center; gap:.7rem; text-align:center; padding:1.6rem; color:var(--bw-primary); }
.bw-ph svg{ width:46px; height:46px; }
.bw-ph > span:not(.bw-ph__hint){ font-family:var(--font-sans); font-weight:700; font-size:.98rem; color:#4a332e; max-width:22ch; line-height:1.4; }
.theme-zine .bw-ph > span:not(.bw-ph__hint){ color:#3a4a40; }
.bw-ph__hint{ font-family:var(--font-sans); font-weight:700; font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--bw-primary); border:1px solid currentColor; border-radius:999px; padding:.3rem .75rem; }
.bw-ph--sm{ padding:0; } .bw-ph--sm svg{ width:32px; height:32px; }

/* themed buttons */
.bw-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-family:var(--font-sans); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:.84rem;
  padding:.95rem 1.7rem; border-radius:3px; background:var(--gold-500); color:var(--bw-deep); box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.bw-btn svg{ width:18px; height:18px; }
.bw-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.bw-btn--ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.5); }
.bw-btn--ghost:hover{ background:rgba(255,255,255,.1); }

@media (max-width:920px){ .bw-hero__grid{ grid-template-columns:1fr; } .bw-prods, .bw-usp{ grid-template-columns:1fr 1fr; } .bw-facts{ grid-template-columns:1fr 1fr; } }
@media (min-width:601px) and (max-width:920px){ .bw-prods > :last-child:nth-child(odd){ grid-column:1 / -1; } }
@media (max-width:600px){ .bw-prods, .bw-usp{ grid-template-columns:1fr; } .bw-facts{ grid-template-columns:1fr; } }

/* ====================================================================
   MERKWERELD-TRANSITIE — kalme kleurwash + logo (Durra, Zinè)
   ==================================================================== */
.wt{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(circle at 50% 50%, #19502a, #0b2613 60%, #081a0d);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease; }
.wt.active{ opacity:1; visibility:visible; pointer-events:all; }
.wt__bg{ position:absolute; inset:-12%; background:url("../img/patterns/star-pattern.svg") center/130px; opacity:0; }
.wt.active .wt__bg{ animation:pBg 1.1s ease forwards; }
.wt__flash{ position:absolute; inset:0; background:var(--wt-bg,#19502a); opacity:0; }
.wt.active .wt__flash{ animation:pFlash 1.1s ease forwards; }
.wt__rings{ position:absolute; inset:0; display:grid; place-items:center; }
.wt__rings span{ position:absolute; width:210px; height:210px; border:1.5px solid #daa751; border-radius:50%; opacity:0; }
.wt.active .wt__rings span{ animation:pRing 2.4s ease-out infinite; }
.wt.active .wt__rings span:nth-child(2){ animation-delay:.8s; border-color:#ffffff; }
.wt.active .wt__rings span:nth-child(3){ animation-delay:1.6s; }
.wt__core{ position:relative; width:min(42vw,210px); aspect-ratio:1; display:grid; place-items:center; z-index:3; }
.wt__core::after{ content:""; position:absolute; inset:-22%; border-radius:50%; background:radial-gradient(circle, rgba(248,242,231,.16), transparent 68%); }
.wt__logo{ position:absolute; width:84%; height:84%; object-fit:contain; filter:drop-shadow(0 8px 22px rgba(0,0,0,.35)); }
.wt__logo--to{ opacity:0; background:#fff; border-radius:10px; padding:9%; }
.wt.active .wt__logo--from{ animation:pFrom 1.1s ease forwards; }
.wt.active .wt__logo--to{ animation:pTo 1.1s ease forwards; }
.wt__label{ position:absolute; bottom:15%; width:100%; text-align:center; font-family:var(--font-sans); font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:.76rem; color:#E3D5C1; opacity:0; z-index:4; }
.wt.active .wt__label{ animation:pLabel 1.1s ease forwards; }
.wt__label b{ display:block; margin-top:.5rem; font-family:var(--font-display); font-weight:400; font-size:1.7rem; letter-spacing:.02em; text-transform:none; color:var(--gold-400); }
.wt-enter{ position:fixed; inset:0; z-index:9998; display:none; background:var(--bw-deep,#0f3019); }
.wt-enter.show{ display:block; }
.wt-enter.out{ animation:wtOut .6s var(--ease) forwards; }
@keyframes wtOut{ to{ opacity:0; visibility:hidden; } }
@media (prefers-reduced-motion:reduce){
  .wt.active .wt__bg,.wt.active .wt__flash,.wt.active .wt__rings span,.wt.active .wt__logo--from,
  .wt.active .wt__logo--to,.wt.active .wt__label{ animation-duration:.001ms !important; }
  .wt__logo--to{ opacity:1; } .wt__logo--from{ opacity:0; } .wt__flash{ opacity:1; }
}

/* ====================================================================
   MERKWERELD-KAARTEN (uitgelicht op de merkenpagina)
   ==================================================================== */
.world-card{ display:flex; flex-direction:column; background:#fff; border-radius:6px; overflow:hidden; text-decoration:none; color:inherit;
  border:1px solid rgba(20,60,35,.1); box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.world-card:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lg); }
.world-card__top{ position:relative; aspect-ratio:16/10; display:grid; place-items:center; background:linear-gradient(150deg, var(--wc,#19502a), var(--wc2,#0f3019)); }
/* De foto vult de hele kop van de kaart. Specifieker dan de logoregel
   hierboven, die het beeld anders tot 60 px op wit zou terugbrengen. */
.world-card__top img.world-card__foto{ position:absolute; inset:0; width:100%; height:100%;
  max-width:none; max-height:none; padding:0; background:none; border-radius:0;
  box-shadow:none; object-fit:cover; display:block; }
.world-card__top::after{ content:""; position:absolute; inset:0; background:url("../img/patterns/star-pattern.svg") center/110px; opacity:.1; }
.world-card__top img{ position:relative; max-height:60px; max-width:60%; object-fit:contain; background:#fff; padding:12px 18px; border-radius:5px; box-shadow:var(--shadow); }
.world-card__b{ padding:1.4rem 1.5rem 1.6rem; }
.world-card__cat{ font-family:var(--font-sans); font-weight:700; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-700); }
.world-card h3{ font-family:var(--font-sans); font-weight:700; font-size:1.35rem; color:var(--green-800); margin:.5rem 0 .45rem; }
.world-card p{ font-size:.96rem; color:var(--ink-soft); line-height:1.55; }
.world-card__go{ display:inline-flex; align-items:center; gap:.45rem; margin-top:1.1rem; font-family:var(--font-sans); font-weight:700; font-size:.76rem; text-transform:uppercase; letter-spacing:.09em; color:var(--wc,#19502a); }
.world-card__go svg{ width:17px; height:17px; transition:transform .25s var(--ease); }
.world-card:hover .world-card__go svg{ transform:translateX(4px); }

/* Arabische merknaam-accent in de merkwerelden */
.bw-arabic{ direction:rtl; font-size:clamp(1.5rem,3.4vw,2.4rem); line-height:1; color:var(--gold-300); margin:.6rem 0 0; font-weight:500; }
.bw-section--cream .bw-arabic, .bw-section--cream2 .bw-arabic, .bw-section--white .bw-arabic{ color:var(--gold-700); }

/* ====================================================================
   HERO HERZIENING — "Sharing the Middle East" + groothandel
   ==================================================================== */
.hero__title{ color:var(--gold-500); line-height:.9; margin:.65rem 0 .85rem;
  font-size:clamp(3rem,6.4vw,5.6rem); letter-spacing:.005em; }
.hero__title-lead{ display:block; font-family:var(--font-display); color:var(--cream);
  font-size:.46em; line-height:1; margin-bottom:.04em; }
.hero__facts{ list-style:none; margin:1.7rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.7rem 1.9rem; }
.hero__facts li{ display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--font-sans); font-weight:600; font-size:.92rem; color:#E3D5C1; }
.hero__facts svg{ width:20px; height:20px; color:var(--gold-400); flex:none; }
/* gegraveerd zegel op de herofoto — versterkt "Sharing the Middle East" */
.hero__seal{ position:absolute; z-index:4; bottom:clamp(1.4rem,4vw,2.8rem); right:clamp(1.2rem,2.6vw,2.2rem);
  display:grid; gap:.3rem; text-align:center; padding:.95rem 1.15rem;
  background:rgba(14,54,27,.84); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  box-shadow:0 0 0 1px rgba(218,167,81,.55), 0 14px 30px -16px rgba(0,0,0,.6);
  --c:9px; clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c)); }
.hero__seal b{ font-family:var(--font-display); font-weight:400; font-size:1.1rem; line-height:.98;
  letter-spacing:.02em; color:var(--gold-400); }
.hero__seal i{ font-style:normal; font-family:var(--font-sans); font-weight:700; font-size:.58rem;
  letter-spacing:.24em; text-transform:uppercase; color:#E3D5C1; }
@media (max-width:920px){ .hero__seal{ bottom:1rem; right:1rem; } }
@media (max-width:560px){ .hero__seal{ display:none; } }

/* ====================================================================
   EIGEN MERK ZINÈ — logokaart (echt rond logo, scherp, niet opgerekt)
   ==================================================================== */
.zine-card{ position:relative; max-width:460px; margin-inline:auto; aspect-ratio:4/3;
  display:grid; place-content:center; justify-items:center; gap:.15rem; text-align:center;
  padding:2.4rem; border-radius:var(--radius-xl); overflow:hidden; color:var(--cream);
  background:linear-gradient(160deg,#19502a,#0f3019 72%);
  box-shadow:0 0 0 1px rgba(218,167,81,.4), var(--shadow-lg); }
.zine-card::before{ content:""; position:absolute; inset:0; opacity:.09;
  background-image:url("../img/patterns/star-pattern.svg"); background-size:120px; }
.zine-card::after{ content:""; position:absolute; inset:13px; pointer-events:none;
  border:1px solid #daa751; border-radius:calc(var(--radius-xl) - 4px); }
/* zachte ronde gloed precies achter het logo (geen wit blok meer) */
.zine-card__glow{ position:absolute; top:44%; left:50%; transform:translate(-50%,-50%);
  width:84%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(239,213,160,.34),rgba(218,167,81,.12) 46%,transparent 70%); }
/* het Zinè-logo zelf is de held: groot, vrij zwevend met een diepe schaduw */
.zine-card__disc{ position:relative; display:grid; place-items:center;
  width:clamp(200px,64%,256px); aspect-ratio:1; }
.zine-card__disc img{ width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.5)); }
.zine-card__tag{ position:relative; font-family:var(--font-sans); font-weight:700; font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; color:#E3D5C1; margin-top:1.4rem; }

/* ====================================================================
   ZINÈ-BAND — full-bleed: tekst links op ons bloempatroon, foto rechts
   (naar het aangeleverde voorbeeld, maar met onze eigen achtergrond)
   ==================================================================== */
.zine-band{ padding:0; overflow:hidden; }
.zine-band::before{ content:none; }            /* schakel het vage sectiepatroon uit */
.zine-band__inner{
  display:grid; grid-template-columns:minmax(0,50fr) minmax(0,50fr);
  align-items:stretch; min-height:clamp(660px, 70vh, 720px);
}
.zine-band__copy{
  position:relative; z-index:1; background:var(--cream);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:clamp(.8rem, 1.8vh, 1.25rem);
  padding:clamp(2.6rem,6vh,4.6rem) clamp(1.9rem,5%,3.6rem) clamp(2.6rem,6vh,4.6rem) var(--rail);
}
.zine-band__copy::before{                       /* ons ster/bloem-patroon i.p.v. de crème bloemen */
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../img/patterns/star-pattern.svg") center / 160px; opacity:.12;
  -webkit-mask-image:linear-gradient(100deg, #000 68%, transparent 100%);
          mask-image:linear-gradient(100deg, #000 68%, transparent 100%);
}
.zine-band__copy > *{ position:relative; z-index:1; margin:0; }
.zine-band__logo{ width:clamp(92px,8.5vw,124px); height:auto; margin-bottom:.15rem;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.18)); }
.zine-band__tagline{ font-family:var(--font-display); color:var(--gold-600);
  font-size:clamp(2.2rem, 3.9vw, 3.7rem); line-height:1; letter-spacing:.4px; }
.zine-band__copy .muted{ max-width:52ch; }
[dir="rtl"] .zine-band__copy{ align-items:flex-end; text-align:right; }

/* rechterhelft: mozaïek van sfeerfoto's ("foto vakjes") op een groen Zinè-paneel */
.zine-band__gallery{
  position:relative; z-index:0; align-self:stretch;
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  gap:clamp(.5rem,.9vw,.85rem); padding:clamp(.9rem,2vw,1.6rem);
  min-height:clamp(360px,46vh,600px); background:var(--cream);
}
.zine-band__gallery::before{                     /* subtiel patroon achter de tegels */
  content:""; position:absolute; inset:0; opacity:.1; pointer-events:none;
  background:url("../img/patterns/star-pattern.svg") center / 120px;
}
.zine-tile{ position:relative; z-index:1; border-radius:var(--radius-lg);
  background-size:cover; background-position:center; background-color:var(--green-850);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.55), inset 0 0 0 1px rgba(227,213,193,.14); }
/* de productfoto van Zinè ligt over de volle breedte, de sfeertegels eronder */
.zine-tile--wide{ grid-column:1 / -1; }
img.zine-tile{ display:block; width:100%; height:100%; min-width:0; min-height:0;
  object-fit:cover; object-position:center; }

@media (max-width:920px){
  .zine-band__inner{ grid-template-columns:1fr; min-height:0; }
  .zine-band__gallery{ order:-1; min-height:clamp(360px,68vw,470px); grid-template-rows:auto 1fr; }
  /* smal scherm: de foto op ware verhouding, zodat het logo links niet wegvalt */
  .zine-tile--wide{ aspect-ratio:2 / 1; height:auto; }
  .zine-band__copy{ padding:clamp(2rem,7vw,3rem) var(--gutter); }
  .zine-band__copy::before{ -webkit-mask-image:none; mask-image:none; opacity:.16; }
}

/* ====================================================================
   ZO WORD JE KLANT — proces in 3 stappen (vervangt testimonial)
   ==================================================================== */
.steps{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:1.4rem; }
.step{ position:relative; z-index:1; padding:2rem 1.5rem 1.7rem;
  background:var(--white); border:1px solid #3a4a40; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); height:100%; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.step:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.step__n{ position:absolute; z-index:2; top:-18px; left:1.5rem; width:40px; height:40px;
  border-radius:12px; display:grid; place-items:center; font-family:var(--font-sans); font-weight:800;
  color:var(--green-900); background:var(--gold-500); box-shadow:var(--shadow-sm); }
.step__ic{ color:var(--green-600); margin:.4rem 0 1rem; }
.step__ic svg{ width:38px; height:38px; }
.step h3{ font-family:var(--font-sans); font-weight:700; font-size:1.1rem; color:var(--green-800); margin-bottom:.45rem; }
.step p{ color:var(--ink-soft); font-size:.95rem; line-height:1.55; }
.proces-cta{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:2.8rem; }
@media (max-width:780px){
  .steps{ grid-template-columns:1fr; gap:2.2rem; }
  .step__n{ top:-18px; }
  .proces-cta{ justify-content:flex-start; }
}


/* ====================================================================
   MERKPAGINA — sterke, foto-arme opbouw voor merken zonder eigen logo
   (gegraveerd merkwapen + assortimentsgrid + kenmerken)
   ==================================================================== */
/* Gegraveerd merkwapen (identiteit voor logoloze merken) */
.brand-crest{ position:relative; display:grid; justify-items:center; gap:.95rem; text-align:center;
  padding:clamp(2.4rem,5vw,3.6rem); border-radius:var(--radius-lg); overflow:hidden; color:var(--cream);
  background:linear-gradient(160deg,#19502a,#0f3019 72%);
  box-shadow:0 0 0 1px rgba(218,167,81,.4), var(--shadow-lg); }
.brand-crest::before{ content:""; position:absolute; inset:0; opacity:.09;
  background-image:url("../img/patterns/star-pattern.svg"); background-size:118px; }
.brand-crest::after{ content:""; position:absolute; inset:13px; pointer-events:none;
  border:1px solid #daa751; border-radius:calc(var(--radius-lg) - 3px); }
.brand-crest__mono{ position:relative; display:grid; place-items:center; width:122px; height:122px;
  font-family:var(--font-sans); font-weight:800; font-size:3.1rem; line-height:1; color:var(--green-900);
  background:var(--gold-500);
  box-shadow:0 12px 30px -12px rgba(120,79,42,.7);
  --c:14px; clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c)); }
.brand-crest__name{ position:relative; font-family:var(--font-display); font-size:2.5rem; line-height:1; color:var(--gold-400); }
.brand-crest__rule{ position:relative; width:52px; height:2px; background:var(--gold-600); border:0; }
.brand-crest__meta{ position:relative; font-family:var(--font-sans); font-weight:700; font-size:.68rem;
  letter-spacing:.2em; text-transform:uppercase; color:#E3D5C1; line-height:1.7; }

/* Kenmerken-grid (merksterktes) */
.kenmerk-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.kenmerk{ padding:1.7rem 1.5rem; background:#fff; border:1px solid #3a4a40;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.kenmerk:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.kenmerk__ic{ display:block; color:var(--green-600); margin:.4rem 0 1rem; }
.kenmerk__ic svg{ width:38px; height:38px; }
.kenmerk h3{ font-family:var(--font-sans); font-weight:800; font-size:1.05rem; color:var(--green-800); margin-bottom:.4rem; }
.kenmerk p{ font-size:.92rem; color:var(--ink-soft); line-height:1.55; }
@media (max-width:900px){ .kenmerk-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .kenmerk-grid{ grid-template-columns:1fr; } }

/* Assortiment-grid (producttypes als kaarten) */
.prange{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
.prange__item{ display:flex; align-items:center; gap:1rem; padding:1.15rem 1.3rem;
  background:var(--paper); border:1px solid rgba(20,60,35,.09); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.prange__item:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.prange__ic{ flex:none; width:46px; height:46px; display:grid; place-items:center; border-radius:12px;
  background:var(--green-700); color:#fff; }
.prange__ic svg{ width:24px; height:24px; }
.prange__t{ font-family:var(--font-sans); font-weight:700; color:var(--green-850); line-height:1.2; }
.prange__d{ display:block; font-size:.82rem; color:var(--ink-faint); font-weight:500; margin-top:.15rem; }
@media (max-width:820px){ .prange{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .prange{ grid-template-columns:1fr; } }

/* Merkwapen met echt logo (A-merken) i.p.v. monogram */
.brand-crest__plate{ position:relative; display:grid; place-items:center; background:#fff;
  border-radius:10px; padding:1.15rem 1.5rem; min-width:158px; min-height:104px;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.5), 0 0 0 6px rgba(255,255,255,.1); }
.brand-crest__plate img{ max-width:188px; max-height:82px; width:auto; height:auto; object-fit:contain; display:block; }

/* ====================================================================
   MERKPAGINA — PREMIUM AFWERKING  (geldt automatisch voor élke merkpagina)
   Hero-gloed · zwevend merkvenster · kenmerk-accenten
   · assortiment-hover · merkband-flourish · signatuur-showcase
   ==================================================================== */

/* — Hero: rustige warme diepte + kalme, consistente kop (als de andere hero's) — */
.brand-hero{ isolation:isolate; }
.brand-hero::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(56% 64% at 84% 46%, rgba(218,167,81,.14), transparent 64%),
    linear-gradient(0deg, rgba(6,20,11,.22), transparent 30%); }
.brand-hero__inner{ z-index:1; }
.brand-hero .eyebrow{ margin-bottom:1.15rem; }
.brand-hero .hero__title{ margin:0 0 1.15rem; color:var(--gold-400); line-height:1.04;
  font-size:clamp(2.1rem,4.4vw,3.6rem); letter-spacing:.006em; }
.brand-hero .hero__title .hero__title-sub{ display:block; font-family:var(--font-sans); font-weight:600;
  font-size:clamp(1rem,1.5vw,1.4rem); color:var(--cream); margin-top:.62rem; line-height:1.34;
  letter-spacing:.01em; max-width:30ch; }

/* — Merkvenster: rustige gloedring en fijne glans (geen beweging) — */
.brand-visual{ box-shadow:0 0 0 1px rgba(218,167,81,.3), 0 40px 82px -34px rgba(0,0,0,.62); }
.brand-visual::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(150deg, rgba(255,255,255,.14), transparent 46%); }
.brand-visual__logo{ z-index:2; }
.brand-visual__foot{ z-index:2; }

/* — Kenmerk-kaarten: gouden accentbalk + icoon dat invult bij hover — */
.kenmerk{ position:relative; overflow:hidden; }
.kenmerk::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--gold-500),var(--gold-300));
  transform:scaleX(0); transform-origin:left; transition:transform .38s var(--ease); }
.kenmerk:hover{ border-color:rgba(218,167,81,.5); }
.kenmerk:hover::before{ transform:scaleX(1); }
.kenmerk__ic{ transition:transform .3s var(--ease), color .3s var(--ease); }
.kenmerk:hover .kenmerk__ic{ color:var(--green-800); transform:translateY(-2px); }

/* — Assortiment-rijen: gouden randaccent + icoon-kanteling bij hover — */
.prange__item{ position:relative; overflow:hidden; }
.prange__item::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--gold-500); transform:scaleY(0); transform-origin:top; transition:transform .3s var(--ease); }
.prange__item:hover::before{ transform:scaleY(1); }
.prange__ic{ transition:transform .3s var(--ease); }
.prange__item:hover .prange__ic{ transform:rotate(-6deg) scale(1.06); }

/* — Merkband: fijne gouden regel boven de belofte — */
.brand-band__inner::before{ content:""; display:block; width:46px; height:2px; margin:0 auto 1.5rem;
  background:linear-gradient(90deg,transparent,var(--gold-400),transparent); }

/* — Fotovakken (indien gebruikt): rijkere merkgetinte lijst — */
.shot-grid .photo{ background:linear-gradient(162deg,#1c5531,#0e2c19); box-shadow:var(--shadow); }
.shot-grid .photo__ic{ box-shadow:0 0 0 6px rgba(218,167,81,.08), 0 12px 26px -10px rgba(0,0,0,.55); }

/* — Signatuur-showcase: immersief merkkleur-paneel met logo + pijlers — */
.brand-showcase{ position:relative; overflow:hidden; border-radius:var(--radius-xl,28px);
  display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(1.8rem,4vw,3.6rem); align-items:center;
  padding:clamp(2rem,4.6vw,3.8rem); color:var(--cream);
  background:linear-gradient(150deg,var(--bs1,#19502a),var(--bs2,#0f3019) 74%);
  box-shadow:0 0 0 1px rgba(218,167,81,.32), var(--shadow-lg); }
.brand-showcase::before{ content:""; position:absolute; inset:0; opacity:.1; pointer-events:none;
  background:url("../img/patterns/star-pattern.svg") center/128px; }
.brand-showcase::after{ content:""; position:absolute; inset:14px; pointer-events:none;
  border:1px solid rgba(218,167,81,.4); border-radius:calc(var(--radius-xl,28px) - 6px); }
.brand-showcase__plate{ position:relative; z-index:1; display:grid; place-items:center; background:var(--plate,#fff);
  border-radius:16px; padding:clamp(1.6rem,3.2vw,2.6rem); min-height:clamp(150px,20vw,200px);
  box-shadow:0 30px 66px -26px rgba(0,0,0,.62); }
.brand-showcase__plate::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.brand-showcase__plate img{ max-width:80%; max-height:118px; width:auto; object-fit:contain; display:block; }
.brand-showcase__body{ position:relative; z-index:1; }
.brand-showcase__body .display{ color:#fff; }
.brand-showcase__pillars{ display:grid; gap:1.05rem; margin-top:1.7rem; }
.pillar{ display:flex; gap:1.1rem; align-items:flex-start;
  padding-top:1.05rem; border-top:1px solid rgba(218,167,81,.26); }
.pillar:first-child{ border-top:0; padding-top:0; }
.pillar__n{ flex:none; min-width:1.7em; font-family:var(--font-display); font-weight:400; font-size:1.5rem;
  line-height:1.05; color:var(--gold-400); }
.pillar__t{ display:block; font-family:var(--font-sans); font-weight:800; font-size:1.02rem; color:#fff; }
.pillar__d{ display:block; font-size:.9rem; color:rgba(248,242,231,.76); line-height:1.5; margin-top:.2rem; }
@media (max-width:760px){ .brand-showcase{ grid-template-columns:1fr; } }

/* ====================================================================
   CERTIFICERINGSSTROOK — vertrouwensband in de footer (alle pagina's)
   Familiebedrijf · importeur & groothandel · levering door heel Europa
   ==================================================================== */
.cert-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:.7rem 1.1rem;
  padding:1.25rem 0; border-top:1px solid #E3D5C1; }
.cert-strip__lbl{ font-family:var(--font-sans); font-weight:800; font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-400); margin-right:.4rem; }
.cert-badge{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-sans);
  font-weight:700; font-size:.82rem; color:#E3D5C1;
  padding:.45rem .85rem; border:1px solid #daa751; border-radius:999px;
  background:rgba(218,167,81,.06); }
.cert-badge svg{ width:16px; height:16px; color:var(--gold-400); flex:none; }
@media (max-width:560px){ .cert-strip{ gap:.55rem .7rem; } .cert-badge{ font-size:.76rem; padding:.4rem .7rem; } }

/* About: compacte 2-koloms specificatieblok (responsive) */
.spec-grid--2{ grid-template-columns:1fr 1fr; }
@media (max-width:520px){ .spec-grid--2{ grid-template-columns:1fr; } }

/* Contact: routebeschrijving-knop op de kaart */
.map-wrap{ position:relative; }
.map-link{ position:absolute; right:14px; bottom:14px; z-index:2;
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-sans);
  font-weight:700; font-size:.84rem; color:var(--green-900);
  background:var(--cream); padding:.6rem 1rem; border-radius:var(--radius);
  box-shadow:var(--shadow); --c:8px;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));
  transition:transform .2s var(--ease); }
.map-link:hover{ transform:translateY(-2px); }
.map-link svg{ width:17px; height:17px; color:var(--gold-600); }

/* ====================================================================
   MEERTALIGHEID — RTL + Arabische typografie
   Het display-font (Ramadhan Mubarok) is Latijns; voor Arabisch wijzen we
   de font-variabelen naar echte Arabische fonts (geen "nep-Arabisch").
   ==================================================================== */
[lang="ar"]{
  --font-display:"Amiri","Noto Naskh Arabic","Ramadhan Mubarok","Roboto Slab",serif;
  --font-sans:"Cairo","Noto Sans Arabic","Manrope","Roboto Slab","Segoe UI",sans-serif;
  --font-serif:"Amiri","Noto Naskh Arabic","Roboto Slab",serif;
}
[lang="ar"] body{ text-align:right; }
[dir="rtl"] .breadcrumb{ direction:rtl; }
/* Arabisch verdraagt geen letterspatiëring of hoofdletter-transform */
[lang="ar"] .eyebrow,[lang="ar"] .nav__link,[lang="ar"] .btn,[lang="ar"] .cert-strip__lbl,
[lang="ar"] .stat__label,[lang="ar"] .spec__k,[lang="ar"] .world-card__cat,[lang="ar"] .world-card__go,
[lang="ar"] .brand-tile__cat,[lang="ar"] .prange__d,[lang="ar"] .footer-col h4,[lang="ar"] .cert-badge,
[lang="ar"] .kenmerk h3,[lang="ar"] .hero__facts li,[lang="ar"] .brand-crest__meta,[lang="ar"] .hero__seal i,
[lang="ar"] .header-actions .btn,[lang="ar"] .step h3,[lang="ar"] .logi-step h3,[lang="ar"] .value-card h3{
  letter-spacing:0 !important; text-transform:none !important;
}
/* Arabische kaart-koppen netjes rechts uitgelijnd (RTL). */
[lang="ar"] .step h3, [lang="ar"] .kenmerk h3, [lang="ar"] .cat-brand h3,
[lang="ar"] .logi-step h3, [lang="ar"] .value-card h3, [lang="ar"] .feature.card h3{
  direction:rtl; text-align:right; }
/* directionele pijlen spiegelen in RTL (niet de logo's/social-iconen) */
[dir="rtl"] .btn svg,[dir="rtl"] .link-arrow svg,[dir="rtl"] .cc-go svg,[dir="rtl"] .step__ic + h3,
[dir="rtl"] .brand-tile__go svg,[dir="rtl"] .world-card__go svg,[dir="rtl"] .breadcrumb svg,
[dir="rtl"] .cat-mini__go svg,[dir="rtl"] .cat-card__meta .cc-go svg,[dir="rtl"] .catdir__go svg{ transform:scaleX(-1); }
/* hover-verschuiving van pijlen meespiegelen */
[dir="rtl"] .link-arrow:hover svg{ transform:scaleX(-1) translateX(4px); }

/* Hero behoudt in RTL zijn opzet: de foto blijft tegen de rechtermuur "uit de muur komen",
   alleen de tekst wordt rechts uitgelijnd. Zo geen gespiegelde/kapotte vorm. */
[dir="rtl"] .hero-grid{ direction:ltr; }
[dir="rtl"] .hero__copy{ direction:rtl; text-align:right; }

/* Taalwisselaar: Arabisch krijgt een net taal-icoon (globe = officieel i18n-symbool;
   bewust geen nationale vlag, want één land staat niet voor de Arabische taal) */
.lang button[data-lang="ar"]{ background:transparent; border:0; }
.lang button[data-lang="ar"] .flag{ object-fit:cover; }
.flag--ar{ display:grid; place-items:center; width:100%; height:100%; border-radius:4px;
  background:#0b0f0c; color:#fff; font-family:var(--font-sans); font-weight:800;
  font-size:.66rem; letter-spacing:.08em; line-height:1; }
.lang__ic{ width:15px; height:15px; display:block; color:var(--gold-300); }

/* ====================================================================
   ZINÈ-MERKWERELD — sfeer van het eigen Zinè-merk (kufische randen,
   cirkelpatroon, kernwaarden met streepcirkel + hoekhaken, golfscheiding)
   ==================================================================== */
.zw-band{ position:absolute; left:0; right:0; height:30px; z-index:3; pointer-events:none;
  background:url("../img/patterns/kufic-border.svg") repeat-x center / auto 30px; opacity:.5; }
.zw-band--top{ top:0; } .zw-band--bottom{ bottom:0; }
.theme-zine .bw-hero .bw-pat{ background-image:url("../img/patterns/circles.svg"); background-size:150px; opacity:.11; }
/* genoeg ruimte voor de kufische randstroken én de header vrijhouden */
.theme-zine .bw-hero{ padding-top:calc(var(--header-h) + clamp(2.4rem,4vw,3.6rem)); padding-bottom:clamp(3rem,5vw,4.5rem); }
/* nette merk-lockup: logo als eigen blok, geen overlap */
.theme-zine .bw-hero__logo{ display:block; width:max-content; margin:0 0 1.1rem; }
/* Arabische 'tasting'-tagline boven de H1 */
.zw-taste{ display:block; direction:rtl; font-family:"Noto Naskh Arabic","Amiri",serif;
  font-size:clamp(1.05rem,2.1vw,1.45rem); color:var(--gold-300); margin-bottom:.5rem; }

/* Kernwaarden-sectie (groen, met patroon) */
.zw-values{ position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(168deg,var(--bw-primary),var(--bw-deep)); }
.zw-values .bw-pat{ background-image:url("../img/patterns/circles.svg"); background-size:160px; opacity:.07; }
.zw-vhead{ text-align:center; max-width:640px; margin:0 auto 2.8rem; position:relative; z-index:1; }
.zw-vgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; position:relative; z-index:1; }
.zw-vcard{ position:relative; padding:2.7rem 1.8rem 2.3rem; text-align:center; border-radius:8px;
  background:rgba(255,255,255,.045); border:1px solid #daa751;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.zw-vcard:hover{ transform:translateY(-6px); border-color:#daa751; box-shadow:0 26px 50px -24px rgba(0,0,0,.6); }
.zw-vcard::before, .zw-vcard::after{ content:""; position:absolute; width:20px; height:20px; pointer-events:none;
  border:2px solid var(--gold-400); opacity:0; transition:opacity .3s var(--ease); }
.zw-vcard::before{ top:11px; left:11px; border-right:0; border-bottom:0; }
.zw-vcard::after{ bottom:11px; right:11px; border-left:0; border-top:0; }
.zw-vcard:hover::before, .zw-vcard:hover::after{ opacity:1; }
.zw-vic{ width:86px; height:86px; margin:0 auto 1.4rem; display:grid; place-items:center; border-radius:50%;
  border:1.5px dashed #daa751; position:relative; }
.zw-vic::before{ content:""; position:absolute; inset:10px; border-radius:50%; background:rgba(218,167,81,.09); }
.zw-vic svg{ width:34px; height:34px; color:var(--gold-400); position:relative; }
.zw-vcard h3{ font-family:var(--font-display); font-weight:400; font-size:1.75rem; color:var(--gold-400); margin-bottom:.7rem; }
.zw-vcard p{ color:#ffffff; font-size:.97rem; line-height:1.6; }
.zw-rule{ width:44px; height:2px; background:var(--gold-500); opacity:.7; margin:1.1rem auto 0; }
/* golvende scheiding */
.zw-wave{ position:relative; line-height:0; margin-top:clamp(2.4rem,5vw,4rem); }
.zw-wave svg{ display:block; width:100%; height:clamp(36px,5vw,72px); }
@media (max-width:900px){ .zw-vgrid{ grid-template-columns:1fr; max-width:430px; margin-inline:auto; } }

/* Knoppen op mobiel: smaller en netjes stapelen i.p.v. overlopen */
@media (max-width:560px){
  .btn{ letter-spacing:.1em; padding:.82rem 1.35rem; font-size:.74rem; white-space:normal; text-align:center; }
  .btn--lg{ padding:.95rem 1.6rem; font-size:.76rem; }
  .cta-row .btn{ flex:1 1 100%; }
}

/* ====================================================================
   HERO — rustiger: gegraveerde boog aan de fotozijde + 3 kerncijfers
   ==================================================================== */
/* Hero-foto in de sier-poortvorm (linkerhelft van de SVG), tegen de rechtermuur.
   Geen gouden rand meer: de vorm is puur het masker; de foto vult hem volledig en
   staat flush rechts ("komt uit de muur"), de geschulpte rand wijst naar links. */
.hero__media .photo--hero{ position:absolute; inset:0; min-height:0; width:auto; height:auto;
  background:none; box-shadow:none; border-radius:0;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.30)); }
.hero__media .photo--hero::before{ display:none; }
.hero__media .photo--hero::after{ display:none; }
.hero__media .photo--hero .photo__img{ border-radius:0;
  -webkit-mask:url("../img/hero-portal.svg") right center / 100% 100% no-repeat;
          mask:url("../img/hero-portal.svg") right center / 100% 100% no-repeat; }

/* kerncijfers onder de knoppen */
.hero__stats{ display:flex; flex-wrap:wrap; gap:1.4rem 2.6rem; margin-top:1.55rem;
  padding-top:1.2rem; border-top:1px solid #daa751; }
.hero__stats .hstat b{ display:block; font-family:var(--font-sans); font-weight:800;
  font-size:clamp(2.1rem,3.2vw,2.9rem); color:var(--gold-400); line-height:1; letter-spacing:-.01em; }
.hero__stats .hstat b i{ font-style:normal; font-size:.58em; }
.hero__stats .hstat span{ font-family:var(--font-sans); font-weight:600; font-size:.8rem;
  color:#E3D5C1; }
@media (max-width:560px){ .hero__stats{ gap:1rem 1.8rem; } }
/* het optel-cijfer in het grote gouden display-lettertype (niet de label-stijl) */
.hero__stats .hstat b span{ font:inherit; color:inherit; letter-spacing:inherit; }
/* subtiele gouden scheiding tussen de kerncijfers */
.hero__stats .hstat{ position:relative; }
.hero__stats .hstat + .hstat::before{ content:""; position:absolute; top:50%; left:-1.3rem;
  transform:translateY(-50%); width:1px; height:58%;
  background:linear-gradient(rgba(218,167,81,0), var(--gold-500), rgba(218,167,81,0)); opacity:.55; }
[dir="rtl"] .hero__stats .hstat + .hstat::before{ left:auto; right:-1.3rem; }
@media (max-width:560px){ .hero__stats .hstat + .hstat::before{ display:none; } }

/* ---- Intro-blok onder de hero: tekst + video-vierkant (poster nu, echte video later) ---- */
.intro-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,4vw,4.5rem); align-items:center; }
.intro-grid__text .lead{ max-width:56ch; }
.video-ph{ position:relative; aspect-ratio:16/10; width:100%; border-radius:var(--radius-xl); overflow:hidden;
  background:var(--green-850) url("../img/intro-video-poster.webp") 30% center / cover no-repeat;
  display:grid; place-items:center; cursor:pointer; box-shadow:0 0 0 1px rgba(20,60,35,.1), var(--shadow-lg); }
.video-ph::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,38,19,.12), rgba(11,38,19,.62)); }
.video-ph__play{ position:relative; z-index:1; width:clamp(66px,7vw,90px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; color:var(--green-900); background:var(--gold-400);
  box-shadow:0 14px 34px rgba(0,0,0,.4); transition:transform .3s var(--ease), background .3s var(--ease); }
.video-ph__play svg{ width:42%; height:42%; margin-left:6%; }
.video-ph:hover .video-ph__play{ transform:scale(1.08); background:var(--gold-500); }
.video-ph__tag{ position:absolute; z-index:1; left:clamp(1rem,2vw,1.4rem); bottom:clamp(1rem,2vw,1.4rem);
  font-family:var(--font-sans); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); }
@media (max-width:820px){
  .intro-grid{ grid-template-columns:1fr; gap:clamp(1.6rem,5vw,2.6rem); }
  .video-ph{ aspect-ratio:16/10; max-width:560px; }
}

/* ---- Filmblok (Over ons): groot videovlak met het verhaal ernaast ---- */
.filmblock{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(1.8rem,4vw,3.6rem); align-items:center; }
.filmblock__copy p + p{ margin-top:1rem; }
.filmblock__media{ position:relative; }
.filmblock__video{ position:relative; aspect-ratio:16/9; width:100%;
  border-radius:var(--radius-xl); overflow:hidden; display:grid; place-items:center;
  background:var(--green-950) url("../img/sfeer-tafel.webp") center / cover no-repeat;
  box-shadow:0 0 0 1px rgba(218,167,81,.35), var(--shadow-lg); }
.filmblock__video::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,26,13,.12), rgba(8,26,13,.62)); }
.filmblock__play{ position:relative; z-index:1; width:clamp(74px,7vw,104px); aspect-ratio:1;
  border-radius:50%; display:grid; place-items:center;
  color:var(--green-900); background:var(--gold-400); box-shadow:0 16px 40px rgba(0,0,0,.45); }
.filmblock__play svg{ width:40%; height:40%; margin-left:6%; }
.filmblock__tag{ position:absolute; z-index:1; left:clamp(1rem,2vw,1.5rem); bottom:clamp(1rem,2vw,1.5rem);
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--font-sans); font-weight:700; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cream); }
.filmblock__tag::before{ content:""; width:9px; height:9px; border-radius:50%;
  background:var(--gold-400); box-shadow:0 0 0 4px rgba(218,167,81,.22); }
@media (prefers-reduced-motion:no-preference){
  .filmblock__play{ animation:filmPulse 2.6s var(--ease) infinite; }
}
@keyframes filmPulse{
  0%,100%{ box-shadow:0 16px 40px rgba(0,0,0,.45), 0 0 0 0 rgba(218,167,81,.5); }
  55%{ box-shadow:0 16px 40px rgba(0,0,0,.45), 0 0 0 18px rgba(218,167,81,0); }
}
@media (max-width:860px){
  .filmblock{ grid-template-columns:1fr; gap:clamp(1.5rem,5vw,2.4rem); }
  .filmblock__media{ order:-1; }
}

/* ── CINEMA — full-bleed videoblok onder de hero, bioscoopgevoel ── */
.film-cinema{ position:relative; padding:clamp(1.1rem,3.4vw,2.6rem) 0;
  background:var(--paper); overflow:hidden; }
.film-cinema::before{ content:""; position:absolute; inset:0; opacity:.05; pointer-events:none;
  background:url("../img/patterns/star-pattern.svg") center/150px; }
.film-cinema__stage{ position:relative; z-index:1; width:100%; margin-inline:auto;
  aspect-ratio:16/9; max-height:82vh; border-radius:var(--radius-lg); overflow:hidden; display:grid; place-items:center;
  background:var(--green-950) url("../img/sfeer-tafel.webp") center/cover no-repeat;
  box-shadow:0 0 0 1px rgba(218,167,81,.45), 0 30px 70px rgba(8,26,13,.26); }
.film-cinema__stage::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,26,13,.20), rgba(8,26,13,.66)); }
.film-cinema__play{ position:relative; z-index:2; width:clamp(84px,8vw,124px); aspect-ratio:1;
  border-radius:50%; display:grid; place-items:center; color:var(--green-900);
  background:var(--gold-400); box-shadow:0 18px 46px rgba(0,0,0,.5); }
.film-cinema__play svg{ width:38%; height:38%; margin-left:6%; }
@media (prefers-reduced-motion:no-preference){
  .film-cinema__play{ animation:filmPulse 2.6s var(--ease) infinite; }
}
/* Op smalle schermen iets voller beeld (minder thin-strip) */
@media (max-width:640px){
  .film-cinema__stage{ aspect-ratio:4/3; }
}

/* ── vierkante fotovakken + warm foto-mozaiek ────────────────────── */
.photo--square{ border-radius:var(--radius-lg); aspect-ratio:1/1; }
.mosaic{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,1.6vw,1.3rem);
  margin-top:clamp(2rem,4vw,3.2rem); }
.mosaic__tile{ margin:0; }
.mosaic__tile .photo{ min-height:0; box-shadow:0 0 0 2px rgba(218,167,81,.55), var(--shadow-lg); }
.mosaic__tile:hover .photo__img{ transform:scale(1.06); }
@media (max-width:760px){ .mosaic{ grid-template-columns:1fr 1fr; } }

/* ====================================================================
   MERK-INTRO — eenmalige splash bij het eerste bezoek (daarna verborgen)
   ==================================================================== */
.intro{ position:fixed; inset:0; z-index:2000; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(125% 125% at 50% 32%, var(--green-700), var(--green-900) 72%); }
.intro::before{ content:""; position:absolute; inset:0; opacity:.10;
  background:url("../img/patterns/star-pattern.svg") center/150px; }
.intro::after{ content:""; position:absolute; left:50%; top:40%; transform:translate(-50%,-50%);
  width:82vw; height:82vw; max-width:760px; max-height:760px; border-radius:50%;
  background:radial-gradient(circle, rgba(218,167,81,.22), transparent 62%); }
.intro__inner{ position:relative; z-index:1; display:grid; justify-items:center; gap:1.15rem; padding:2rem; }
.intro__logo{ width:min(72vw,440px); height:auto; }
.intro__line{ display:block; width:min(58vw,320px); height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold-500),transparent); }
.intro__tag{ font-family:var(--font-display); font-weight:400; letter-spacing:.02em;
  font-size:clamp(1.05rem,2.4vw,1.55rem); color:var(--gold-300); }
.intro-skip .intro{ display:none; }
@media (prefers-reduced-motion: no-preference){
  .intro{ animation:introOut .8s var(--ease) 2.05s forwards; }
  .intro__logo{ animation:introLogoIn 1.1s var(--ease) .18s both; }
  .intro__line{ animation:introLine .9s var(--ease) .85s both; transform-origin:center; }
  .intro__tag{ animation:introTag .8s var(--ease) 1.12s both; }
  .intro.is-skipping{ animation:introOut .45s var(--ease) forwards; }
}
@keyframes introLogoIn{ from{opacity:0; transform:translateY(16px) scale(.9)} to{opacity:1; transform:none} }
@keyframes introLine{ from{transform:scaleX(0); opacity:0} to{transform:scaleX(1); opacity:1} }
@keyframes introTag{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
@keyframes introOut{ to{opacity:0; visibility:hidden} }

/* Arabische merknaam links uitlijnen met de overige hero-tekst (niet zwevend rechts) */
.bw-hero .bw-arabic{ text-align:left; }

/* ====================================================================
   HUISSTIJL-STER — hangende ornamenten + accenten (zoals de Eid-brochure)
   ==================================================================== */
/* herbruikbaar sterglyph (krijgt kleur via currentColor) */
.a4t-star{ display:inline-block; width:1em; height:1em; background:currentColor;
  -webkit-mask:url("../img/star.svg") center/contain no-repeat; mask:url("../img/star.svg") center/contain no-repeat; }

/* hangende ornamenten: gestippelde koordjes met ster / ruit / maan */
.hangers{ position:absolute; top:0; left:0; right:0; z-index:1; pointer-events:none;
  display:flex; justify-content:center; align-items:flex-start; gap:clamp(36px,7vw,92px); }
.hanger{ position:relative; width:1.6px;
  background:repeating-linear-gradient(to bottom, var(--gold-500) 0 5px, transparent 5px 12px); opacity:.9; }
.hanger > i{ position:absolute; left:50%; bottom:0; color:var(--gold-500); }
.hanger > i.s-star{ width:30px; height:30px; background:currentColor; transform:translate(-50%,52%);
  -webkit-mask:url("../img/star.svg") center/contain no-repeat; mask:url("../img/star.svg") center/contain no-repeat; }
.hanger > i.s-diamond{ width:13px; height:13px; background:currentColor; border-radius:2px; transform:translate(-50%,52%) rotate(45deg); }
.hanger > i.s-crescent{ width:20px; height:20px; border-radius:50%; box-shadow:inset -7px 1px 0 1.5px var(--gold-500); transform:translate(-50%,52%) rotate(18deg); }
@media (max-width:560px){ .hanger > i.s-star{ width:24px; height:24px; } }

/* gecentreerde ster-flourish boven sectiekoppen — site-brede huisstijl */
.section-head--center::before{ content:""; display:block; width:34px; height:34px; margin:0 auto 1.1rem;
  background:var(--gold-500); -webkit-mask:url("../img/star.svg") center/contain no-repeat; mask:url("../img/star.svg") center/contain no-repeat; }
.section--green-deep .section-head--center::before, .cta-band .section-head--center::before{ background:var(--gold-400); }

/* repeterend sterpatroon als blok-achtergrond (kleur via currentColor-laag) */
.star-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; background:var(--gold-500); opacity:.032;
  -webkit-mask:url("../img/star.svg") 0 0 / 74px 74px repeat; mask:url("../img/star.svg") 0 0 / 74px 74px repeat; }
.star-bg--dense{ -webkit-mask-size:52px 52px; mask-size:52px 52px; }
.section--green-deep .star-bg, .cta-band .star-bg, .hero .star-bg, .bw-section--primary .star-bg{ background:var(--gold-400); opacity:.045; }
/* zorg dat inhoud bovenop het patroon ligt */
.cta-band__inner, .section-head, .steps, .proces-cta{ position:relative; z-index:1; }

/* hero-ornamenten: koordjes onder de header laten beginnen, inhoud erboven */
.hero .hangers{ top:calc(var(--header-h) - 4px); }
.hero .hero__inner{ position:relative; z-index:2; }
.hero{ position:relative; }

/* ---- INGETOGEN: ster als subtiel eyebrow-merkteken, niet overal ---- */
/* geen losse flourish boven elke kop (was niet uitgelijnd + te veel) */
.section-head--center::before{ display:none; }
/* het streepje vóór de eyebrow wordt de huisstijl-ster (klein, uitgelijnd) */
.eyebrow::before, .bw-eyebrow::before{ width:1.05em; height:1.05em; border-radius:0; opacity:1;
  background:currentColor;
  -webkit-mask:url("../img/star.svg") center/contain no-repeat; mask:url("../img/star.svg") center/contain no-repeat; }

/* hero-koordjes: ingetogen, links in de groene ruimte (niet over de foto) */
.hero .hangers{ justify-content:flex-start; padding-left:clamp(1.4rem,5vw,4.5rem); gap:clamp(30px,3.5vw,52px); }
.hero .hanger{ opacity:.7; }

/* ====================================================================
   FOOTER — sterrenrand bovenaan (klein, om en om groen/goud)
   ==================================================================== */
.site-footer::after{ content:""; position:absolute; top:0; left:0; right:0; height:24px; z-index:2;
  pointer-events:none; background:url("../img/patterns/star-border.svg") repeat-x left center / 44px 24px; opacity:.92; }
.site-footer{ padding-top:calc(clamp(3.5rem,6vw,5rem) + 24px); border-top:1px solid #daa751; }

/* ====================================================================
   VERTICALE HUISSTIJL-RAND — ster + bloem op de linkerrand van een hero
   (rustig accent: gouden ster pop, groene bloem als subtiele textuur)
   ==================================================================== */
.hero-rail{ position:absolute; top:0; bottom:0; left:0; width:40px; z-index:1; pointer-events:none;
  background:url("../img/patterns/border-v.svg") repeat-y left top / 40px auto; opacity:.85;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%); }
/* inhoud vrijhouden van de rand op desktop */
@media (max-width:900px){ .hero-rail{ display:none; } }

/* ====================================================================
   STATEMENT-BAND — full-width groene band (vervangt low-res fotoband)
   ==================================================================== */
.statement-band{ position:relative; overflow:hidden; text-align:center; color:var(--cream);
  background:linear-gradient(160deg,var(--green-700),var(--green-850));
  padding-block:clamp(3.2rem,6vw,5.2rem); }
.statement-band__inner{ position:relative; z-index:1; max-width:920px; }
.statement-band__star{ display:block; width:40px; height:40px; color:var(--gold-400); margin:0 0 1.2rem; }
.statement-band__line{ font-family:var(--font-display); font-weight:400; line-height:1.08; color:var(--gold-400);
  font-size:clamp(1.9rem,4vw,3.1rem); }
.statement-band__sub{ font-family:var(--font-sans); font-weight:600; color:#E3D5C1;
  margin-top:1rem; font-size:clamp(.92rem,1.4vw,1.06rem); letter-spacing:.01em; }

/* ====================================================================
   MICRO-INTERACTIES — scrollvoortgang, terug-naar-boven, link-onderlijn
   ==================================================================== */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:200; transform:scaleX(0);
  transform-origin:0 50%; background:var(--gold-500); will-change:transform;
  transition:transform .12s linear; }
/* Terug-naar-boven: schone ronde knop met dezelfde gouden ring als de
   WhatsApp-knop, zodat de twee zwevende knoppen een net paar vormen. */
.to-top{ position:fixed; right:25px; bottom:92px; z-index:90; width:52px; height:52px; display:grid; place-items:center;
  border:0; cursor:pointer; border-radius:50%;
  background:linear-gradient(150deg, var(--green-700), var(--green-850)); color:var(--gold-300);
  box-shadow:0 0 0 2px var(--gold-500), 0 0 0 5px rgba(218,167,81,.16), 0 16px 30px -12px rgba(7,33,15,.55);
  opacity:0; transform:translateY(12px) scale(.92); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), box-shadow .35s var(--ease), color .25s var(--ease); }
.to-top.show{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover, .to-top:focus-visible{ transform:translateY(-3px) scale(1.04); color:#F2DFB0; outline:none;
  box-shadow:0 0 0 2px var(--gold-400), 0 0 0 6px rgba(218,167,81,.22), 0 20px 36px -12px rgba(7,33,15,.6); }
.to-top:active{ transform:translateY(-1px) scale(1); }
.to-top svg{ width:22px; height:22px; }
@media (max-width:820px){ .to-top{ width:48px; height:48px; bottom:80px; right:18px; } }

/* geanimeerde gouden onderlijn op footer-tekstlinks */
.footer-col a, .footer-legal a{ position:relative; }
.footer-col a::after, .footer-legal a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1.5px;
  width:100%; background:var(--gold-400); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.footer-col a:hover::after, .footer-legal a:hover::after{ transform:scaleX(1); }

/* product-/merkfoto's: zachte zoom bij hover */
.bw-prod__img{ overflow:hidden; }
.bw-prod__img img{ transition:transform .6s var(--ease); }
.bw-prod:hover .bw-prod__img img{ transform:scale(1.06); }
.brand-tile, .world-card, .cat-mini, .info-card, .feature.card, .kenmerk, .prange__item, .step{
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); }

@media (prefers-reduced-motion: reduce){
  .scroll-progress{ display:none; }
  .to-top{ transition:opacity .2s; }
}

/* ====================================================================
   HEADER HERZIENING — strakke header + MENU-knop + mega-menu
   ==================================================================== */
/* inline nav weg; navigatie zit nu volledig in het mega-menu */
.site-header .nav{ display:none; }
/* MENU-knop: altijd zichtbaar, octagon-vibe naast Inloggen */
/* MENU-knop = exact dezelfde stijl als de overige knoppen (.btn in de HTML) */
.menu-toggle{ display:inline-flex; }
.menu-toggle svg{ width:18px; height:18px; }
@media (max-width:440px){ .menu-toggle__txt{ display:none; } .btn.menu-toggle{ padding-inline:1.2rem; } }

/* ====================================================================
   MENU — rechts-verankerd paneel dat naar links uitklapt (flyout)
   ==================================================================== */
.drawer{ position:fixed; top:0; right:0; height:100dvh; width:auto; max-width:100vw; margin:0; padding:0;
  display:flex; flex-direction:row; align-items:stretch; color:var(--cream);
  transform:translateX(101%); pointer-events:none; z-index:120; transition:transform .42s var(--ease); }
.drawer.open{ transform:none; pointer-events:auto; }

/* Hoofdkolom: staat rechts tegen de muur */
.mm{ position:relative; z-index:2; flex:none; width:min(87vw,360px); max-width:none; height:100%; margin:0;
  overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column;
  padding:clamp(1.2rem,3vh,2rem) clamp(1.2rem,4.5vw,1.9rem) clamp(1.6rem,4vh,2.4rem);
  background:linear-gradient(165deg,#19502a,#0b2613 82%); border-left:1px solid #daa751;
  box-shadow:-26px 0 64px -22px rgba(0,0,0,.55); }
.mm::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.05; pointer-events:none;
  background:url("../img/patterns/star-pattern.svg") center/150px; }
.mm > *{ position:relative; z-index:1; }
.mm__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:clamp(1rem,2.5vh,1.6rem); }
.mm__head .logo__img{ height:38px; width:auto; }
.drawer .drawer__close{ width:44px; height:44px; border-radius:0; --oct:8px;
  clip-path:polygon(var(--oct) 0,calc(100% - var(--oct)) 0,100% var(--oct),100% calc(100% - var(--oct)),calc(100% - var(--oct)) 100%,var(--oct) 100%,0 calc(100% - var(--oct)),0 var(--oct));
  color:var(--cream); background:rgba(248,242,231,.06); box-shadow:inset 0 0 0 1.5px rgba(218,167,81,.5); display:grid; place-items:center; }
.drawer .drawer__close svg{ width:20px; height:20px; }

/* Hoofdmenu-lijst */
.mm-root{ display:flex; flex-direction:column; }
.mm-root__link, .mm-root__item{ display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%;
  padding:.95rem .1rem; font-family:var(--font-serif); font-size:1.2rem; color:var(--cream);
  text-align:left; border:0; border-bottom:1px solid rgba(218,167,81,.16); background:none; cursor:pointer;
  transition:color .2s var(--ease); }
.mm-root__link:hover, .mm-root__item:hover, .mm-root__item[aria-expanded="true"]{ color:var(--gold-300); }
.mm-root__chev{ width:19px; height:19px; color:var(--gold-500); flex:none; transform:rotate(90deg);
  transition:transform .3s var(--ease), color .2s var(--ease); }
.mm-root__item[aria-expanded="true"] .mm-root__chev{ color:var(--gold-300); }
.mm-root__cta{ margin-top:1.3rem; display:grid; gap:.6rem; }
.mm-root__cta .btn{ display:flex; width:100%; }
.mm__contact{ margin-top:1.1rem; display:grid; gap:.3rem; }
.mm__contact a{ font-family:var(--font-sans); font-weight:600; font-size:.92rem; color:var(--gold-300); }
.mm__contact a:hover{ color:var(--gold-400); }
.mm__foot{ margin-top:auto; padding-top:clamp(1.2rem,3vh,2rem); display:flex; align-items:center; gap:1rem; }

/* Flyout: opent naar links van de hoofdkolom */
.mm-fly{ position:relative; z-index:1; flex:none; width:0; height:100%; overflow:hidden;
  background:linear-gradient(165deg,#143f22,#08200f 84%); transition:width .42s var(--ease); }
.drawer.fly-open .mm-fly{ width:min(85vw,340px); border-left:1px solid rgba(218,167,81,.55);
  box-shadow:-20px 0 50px -24px rgba(0,0,0,.5); }
.mm-fly__panel{ position:absolute; inset:0; width:min(85vw,340px); height:100%; overflow-y:auto;
  padding:clamp(1.2rem,3vh,2rem) clamp(1.1rem,4.5vw,1.6rem); display:none; }
.mm-fly__panel.active{ display:block; }
.mm-fly__back{ display:inline-flex; align-items:center; gap:.4rem; color:var(--gold-300); cursor:pointer;
  font-family:var(--font-sans); font-weight:700; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.2rem 0 .9rem; background:none; border:0; }
.mm-fly__back svg{ width:18px; height:18px; transform:rotate(90deg); }
.mm-fly__hd{ display:block; font-family:var(--font-display); color:var(--gold-400); font-size:1.85rem; line-height:1; margin-bottom:.9rem; }
.mm-fly__grp{ display:block; font-family:var(--font-sans); font-weight:800; font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-500); margin:1rem 0 .3rem; }
.mm-fly__grp:first-of-type{ margin-top:0; }
.mm-fly a{ display:flex; align-items:center; gap:.7rem; padding:.55rem .35rem;
  font-family:var(--font-sans); font-size:.97rem; color:#E3D5C1; border-radius:8px;
  transition:color .2s var(--ease), background .2s var(--ease), padding-left .2s var(--ease); }
.mm-fly a svg{ width:19px; height:19px; color:var(--gold-500); flex:none; }
.mm-fly a:hover{ color:var(--gold-300); background:rgba(218,167,81,.08); padding-left:.65rem; }
.mm-fly a em{ font-style:normal; font-size:.58rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--green-900); background:var(--gold-400); padding:.1rem .38rem; border-radius:4px; margin-left:.4rem; }
/* "Alle merken" en "Alle categorieën" staan boven de lijst, niet eronder:
   je hoeft niet eerst langs vijftig merken te scrollen om er te komen.
   Daarom leest hij als knop en niet als zoveelste regel in de lijst. */
.mm-fly__all{ --oct:9px; justify-content:space-between; margin:0 0 1rem;
  padding:.78rem 1rem; background:var(--gold-500); color:var(--green-900)!important;
  border-radius:0; font-family:var(--font-sans); font-weight:800;
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase;
  clip-path:polygon(var(--oct) 0, calc(100% - var(--oct)) 0, 100% var(--oct),
    100% calc(100% - var(--oct)), calc(100% - var(--oct)) 100%, var(--oct) 100%,
    0 calc(100% - var(--oct)), 0 var(--oct));
  transition:background .25s var(--ease), transform .25s var(--ease); }
.mm-fly__all svg{ color:var(--green-900)!important; }
.mm-fly a.mm-fly__all:hover{ background:var(--gold-600); padding-left:1rem;
  transform:translateY(-1px); }
[dir="rtl"] .mm-fly__all svg{ transform:scaleX(-1); }
[lang="ar"] .mm-fly__all{ letter-spacing:0; text-transform:none; }

/* entree-animatie */
.mm-root, .mm-root__cta, .mm__foot{ opacity:0; transform:translateX(12px);
  transition:opacity .45s .06s var(--ease), transform .45s .06s var(--ease); }
.drawer.open .mm-root, .drawer.open .mm-root__cta, .drawer.open .mm__foot{ opacity:1; transform:none; }

.soon-badge{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-sans); font-weight:700; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--green-800); background:rgba(218,167,81,.16); border:1px solid #c08f3e; padding:.45rem .9rem; border-radius:999px; }
.soon-badge svg{ width:16px; height:16px; color:var(--gold-600); }

/* ====================================================================
   OVER ONS + RUSTIGE SPLIT-HERO — eigen componenten
   (lead-hero · about-hero · manifest · about-stats · journey ·
    about-quote · keten · creds · join)
   ==================================================================== */

/* --- Lead-hero: rustige split (groen paneel + gouden kop links, foto rechts) --- */
.lead-hero{ position:relative; overflow:hidden; color:var(--cream); background:var(--green-700);
  padding-top:calc(var(--header-h) + clamp(.9rem,2vw,1.7rem)); padding-bottom:clamp(1.3rem,2.4vw,2rem); }
.lead-hero::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.12;
  background:url("../img/patterns/star-pattern.svg") left center/140px; }
.lead-hero::after{ content:""; position:absolute; right:-6vw; top:50%; width:38vw; height:38vw;
  max-width:440px; max-height:440px; border-radius:50%; z-index:0; transform:translateY(-50%);
  background:radial-gradient(circle, rgba(218,167,81,.16), transparent 62%); }
.lead-hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr auto;
  gap:clamp(1.6rem,4vw,3.6rem); align-items:center; }
.lead-hero__copy{ max-width:640px; }
.lead-hero__copy > *{ opacity:0; animation:leadUp .8s var(--ease) both; }
.lead-hero__copy .breadcrumb{ color:rgba(248,242,231,.8); margin-bottom:.3rem; animation-delay:.04s; }
.lead-hero h1{ color:var(--gold-400); margin:.55rem 0 .8rem; font-size:clamp(2rem,4.2vw,3.5rem); line-height:1.05; animation-delay:.14s; }
.lead-hero .hero__lead{ max-width:48ch; animation-delay:.26s; }
.lead-hero__media{ position:relative; opacity:0; animation:leadIn 1s var(--ease) .18s both; }
.lead-hero__media img{ display:block; width:auto; height:clamp(190px,24vw,280px); aspect-ratio:1/1; object-fit:cover;
  border-radius:var(--radius-lg); box-shadow:0 0 0 1px rgba(218,167,81,.5), var(--shadow-lg);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease); }
.lead-hero__media img:hover{ transform:scale(1.025); box-shadow:0 0 0 1px rgba(218,167,81,.7), var(--shadow-lg); }
@keyframes leadUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes leadIn{ from{ opacity:0; transform:translateX(26px); } to{ opacity:1; transform:none; } }
@media (max-width:920px){
  .lead-hero__grid{ grid-template-columns:1fr; gap:clamp(1.3rem,4vw,1.9rem); }
  .lead-hero__media img{ width:100%; height:clamp(180px,40vw,260px); aspect-ratio:auto; }
}
@media (prefers-reduced-motion: reduce){
  .lead-hero__copy > *, .lead-hero__media{ opacity:1 !important; animation:none !important; }
}

/* --- About-hero: full-bleed pandfoto met groene verdieping --- */
.about-hero{ position:relative; overflow:hidden; color:var(--cream); display:flex; align-items:flex-end;
  min-height:clamp(440px,66vh,640px);
  padding-top:calc(var(--header-h) + clamp(2rem,5vw,4rem)); padding-bottom:clamp(2.4rem,5vw,4rem); }
.about-hero__bg{ position:absolute; inset:0; z-index:0; background-position:center; background-size:cover;
  transform:scale(1.06); animation:aboutPan 24s ease-in-out infinite alternate; }
.about-hero::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,38,19,.30) 0%, rgba(11,38,19,.68) 52%, rgba(8,26,15,.94) 100%); }
.about-hero__inner{ position:relative; z-index:2; width:100%; }
.about-hero__inner .breadcrumb{ color:rgba(248,242,231,.8); }
.about-hero h1{ color:var(--cream); margin:1rem 0 .9rem; max-width:19ch; }
.about-hero h1 .gold{ color:var(--gold-400); }
.about-hero__lead{ max-width:58ch; color:rgba(248,242,231,.9); font-size:clamp(1.06rem,1.6vw,1.3rem); line-height:1.62; }
@keyframes aboutPan{ from{ transform:scale(1.06) translate3d(0,0,0); } to{ transform:scale(1.12) translate3d(-2%,-2%,0); } }

/* --- Manifest: krachtige openingszin met gouden rail --- */
.manifest{ display:grid; grid-template-columns:auto 1fr; gap:clamp(1.3rem,3vw,2.4rem); align-items:stretch; max-width:1040px; }
.manifest__rule{ width:4px; border-radius:3px; background:linear-gradient(var(--gold-500),rgba(218,167,81,.05)); }
.manifest__text{ font-family:var(--font-display); font-weight:400; line-height:1.26;
  font-size:clamp(1.55rem,3.5vw,2.7rem); color:var(--green-800); letter-spacing:.01em; }
.manifest__text b{ color:var(--gold-600); font-weight:inherit; }
.manifest__sub{ margin-top:1.3rem; max-width:64ch; color:var(--ink-soft); }

/* --- About-stats: lichte feitenrij (vervangt de oude factbar) --- */
.about-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:clamp(2.4rem,4vw,3.4rem);
  background:rgba(168,125,54,.3); border:1px solid rgba(168,125,54,.42); border-radius:var(--radius-lg); overflow:hidden; }
.astat{ background:var(--white); padding:1.4rem 1.2rem; text-align:center; }
.astat__n{ display:block; font-family:var(--font-sans); font-weight:800; letter-spacing:-.01em; font-size:clamp(1.7rem,3vw,2.3rem); color:var(--gold-600); line-height:1; }
.astat__l{ display:block; font-family:var(--font-sans); font-size:.82rem; color:var(--ink-soft); margin-top:.45rem; }
@media (max-width:680px){ .about-stats{ grid-template-columns:1fr 1fr; } }

/* --- Journey: horizontaal verhaal in mijlpalen --- */
.journey{ position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(.9rem,1.8vw,1.6rem); margin-top:2.8rem; }
.journey::before{ content:""; position:absolute; left:8px; right:8px; top:23px; height:2px; z-index:0;
  background:repeating-linear-gradient(90deg, rgba(168,125,54,.55) 0 9px, transparent 9px 17px); }
.jstep{ position:relative; z-index:1; }
.jstep__dot{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  background:var(--green-700); color:var(--gold-400);
  box-shadow:0 0 0 6px var(--cream), 0 0 0 7px rgba(218,167,81,.45); margin-bottom:1.15rem; }
.jstep__dot svg{ width:23px; height:23px; }
.jstep__yr{ font-family:var(--font-sans); font-weight:800; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--gold-700); }
.jstep h3{ font-family:var(--font-sans); font-weight:700; font-size:1.04rem; color:var(--green-800); margin:.3rem 0 .5rem; line-height:1.25; }
.jstep p{ font-size:.92rem; color:var(--ink-soft); line-height:1.58; }

/* --- About-quote: manifestzin op groen --- */
.about-quote__inner{ position:relative; z-index:1; max-width:1000px; display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem,3vw,2.4rem); align-items:start; }
.about-quote__mark{ font-family:var(--font-display); font-size:clamp(4.5rem,10vw,8rem); color:var(--gold-500); line-height:.62; }
.about-quote blockquote{ font-family:var(--font-display); font-weight:400; color:var(--cream);
  font-size:clamp(1.55rem,3.4vw,2.7rem); line-height:1.28; letter-spacing:.01em; }
.about-quote cite{ display:block; margin-top:1.3rem; font-family:var(--font-sans); font-style:normal;
  font-weight:700; font-size:.86rem; letter-spacing:.05em; color:var(--gold-400); }

/* --- Keten: compacte keten 'zo werken wij' --- */
.keten{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.85rem,1.6vw,1.4rem); margin-top:2.6rem; }
.keten__step{ position:relative; background:var(--white); border:1px solid rgba(168,125,54,.28); border-radius:var(--radius-lg);
  padding:clamp(1.3rem,2vw,1.7rem); box-shadow:var(--shadow-sm); }
.keten__n{ font-family:var(--font-sans); font-weight:800; font-size:.74rem; letter-spacing:.16em; color:var(--gold-700); }
.keten__ic{ display:grid; place-items:center; width:46px; height:46px; margin:.75rem 0 .95rem; border-radius:13px;
  background:var(--green-700); color:var(--gold-400); }
.keten__ic svg{ width:25px; height:25px; }
.keten__step h3{ font-family:var(--font-sans); font-weight:700; font-size:1.06rem; color:var(--green-800); margin-bottom:.45rem; }
.keten__step p{ font-size:.92rem; color:var(--ink-soft); line-height:1.56; }

/* ---- Herkomst-regio's (Over ons): waar onze smaken vandaan komen ---- */
.origin{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(1rem,1.8vw,1.4rem); margin-top:clamp(2.2rem,3.5vw,3rem); }
.origin-card{ position:relative; background:var(--white); border:1px solid rgba(168,125,54,.28);
  border-radius:var(--radius-lg); padding:clamp(1.4rem,2.1vw,1.75rem); box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.origin-card:hover{ transform:translateY(-4px); border-color:var(--gold-500); box-shadow:var(--shadow); }
.origin-card__ic{ display:grid; place-items:center; width:46px; height:46px; margin-bottom:1rem;
  border-radius:13px; background:linear-gradient(150deg,#f6efe1,#ebdcc2); color:var(--gold-700); border:1px solid rgba(168,125,54,.25); }
.origin-card__ic svg{ width:24px; height:24px; }
.origin-card h3{ font-family:var(--font-sans); font-weight:700; font-size:1.14rem; color:var(--green-800); }
.origin-card__geo{ font-family:var(--font-sans); font-weight:600; font-size:.8rem; letter-spacing:.02em;
  color:var(--gold-700); margin:.35rem 0 1rem; line-height:1.5; }
.origin-card__tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.origin-card__tags span{ font-size:.8rem; color:var(--green-850); background:rgba(25,80,42,.06);
  border:1px solid rgba(25,80,42,.13); border-radius:999px; padding:.22rem .62rem; }

/* --- Creds: geborgd & verantwoord --- */
.creds{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.8rem,4vw,3.4rem); align-items:center; }
.creds__badges{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.cred{ display:inline-flex; align-items:center; gap:.6rem; background:var(--white); border:1px solid rgba(168,125,54,.32);
  border-radius:999px; padding:.65rem 1.1rem; font-family:var(--font-sans); font-weight:700; font-size:.92rem; color:var(--green-800); }
.cred svg{ width:21px; height:21px; color:var(--gold-600); }
.creds__note{ margin-top:1.8rem; font-size:.96rem; color:var(--ink-soft); }
.creds__aside{ position:relative; padding:clamp(1.6rem,2.6vw,2.2rem); border-radius:var(--radius-lg); color:var(--cream);
  background:linear-gradient(160deg,#19502a,#0f3019 74%); box-shadow:0 0 0 1px rgba(218,167,81,.35), var(--shadow); overflow:hidden; }
.creds__aside::before{ content:""; position:absolute; inset:0; opacity:.1; background:url("../img/patterns/star-pattern.svg") center/108px; }
.creds__aside > *{ position:relative; z-index:1; }
.creds__aside h3{ font-family:var(--font-display); font-weight:400; font-size:1.6rem; color:var(--gold-400); margin-bottom:.5rem; }
.creds__aside p{ color:#E3D5C1; font-size:.95rem; margin-bottom:1.2rem; }

/* --- Join: werken bij + eigen merk, twee compacte kaarten --- */
.join{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2vw,1.5rem); }
.join__card{ position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:clamp(1.6rem,2.6vw,2.2rem);
  display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; }
.join__card--dark{ color:var(--cream); background:linear-gradient(160deg,#19502a,#0f3019 74%);
  box-shadow:0 0 0 1px rgba(218,167,81,.35), var(--shadow); }
.join__card--paper{ background:var(--white); border:1px solid rgba(168,125,54,.3); box-shadow:var(--shadow-sm); }
.join__ic{ display:grid; place-items:center; width:44px; height:44px; border-radius:12px; margin-bottom:.4rem; }
.join__card--dark .join__ic{ background:rgba(218,167,81,.18); color:var(--gold-400); }
.join__card--paper .join__ic{ background:var(--green-700); color:var(--gold-400); }
.join__ic svg{ width:24px; height:24px; }
.join__card h3{ font-family:var(--font-sans); font-weight:700; font-size:1.18rem; }
.join__card--dark h3{ color:var(--cream); }
.join__card--paper h3{ color:var(--green-800); }
.join__card p{ font-size:.95rem; line-height:1.55; margin-bottom:.4rem; }
.join__card--dark p{ color:#E3D5C1; }
.join__card--paper p{ color:var(--ink-soft); }

/* --- Responsive --- */
@media (max-width:900px){
  .journey{ grid-template-columns:1fr 1fr; row-gap:2.2rem; }
  .journey::before{ display:none; }
  .keten{ grid-template-columns:1fr 1fr; }
  .creds{ grid-template-columns:1fr; }
  .join{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .manifest{ grid-template-columns:1fr; }
  .manifest__rule{ width:100%; height:4px; }
  .journey{ grid-template-columns:1fr; }
  .keten{ grid-template-columns:1fr; }
  .about-quote__inner{ grid-template-columns:1fr; gap:.4rem; }
  .about-quote__mark{ font-size:4rem; }
}

/* --- Story-hero: fotoloze, typografische hero (Over ons) --- */
.story-hero{ position:relative; overflow:hidden; color:var(--cream);
  background:linear-gradient(155deg, var(--green-700) 0%, var(--green-900) 90%);
  padding-top:calc(var(--header-h) + clamp(2.6rem,6vw,5rem));
  padding-bottom:clamp(2.8rem,6vw,5rem); }
.story-hero::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.14;
  background:url("../img/patterns/star-pattern.svg") center/170px; }
.story-hero::after{ content:""; position:absolute; right:-8vw; top:-30%; width:56vw; height:56vw;
  max-width:680px; max-height:680px; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(218,167,81,.18), transparent 62%); }
.story-hero__inner{ position:relative; z-index:1; max-width:860px; }
.story-hero__inner .breadcrumb{ color:rgba(248,242,231,.78); }
.story-hero__badge{ display:inline-grid; place-items:center; width:64px; height:64px; border-radius:50%;
  color:var(--gold-400); border:1.5px solid rgba(218,167,81,.55); background:rgba(218,167,81,.08);
  box-shadow:0 0 0 7px rgba(218,167,81,.05); margin:.4rem 0 1.4rem; }
.story-hero__badge svg{ width:30px; height:30px; }
.story-hero h1{ color:var(--gold-400); font-family:var(--font-display); font-weight:400;
  font-size:clamp(2.7rem,6.4vw,5.2rem); line-height:1.02; letter-spacing:.01em; margin:1rem 0; }
.story-hero__lead{ max-width:58ch; font-size:clamp(1.1rem,1.7vw,1.36rem); line-height:1.62; color:rgba(248,242,231,.9); }
.story-hero__motto{ display:inline-flex; align-items:center; gap:.85rem; margin-top:2.2rem;
  font-family:var(--font-display); font-weight:400; font-size:clamp(1.3rem,2.6vw,2.1rem); color:var(--cream); letter-spacing:.02em; }
.story-hero__motto::before{ content:""; width:46px; height:2px; background:var(--gold-500); flex:none; }
.story-hero__motto svg{ width:24px; height:24px; color:var(--gold-400); flex:none; }

/* --- Word klant-kaart op de contactpagina (registratie via B2B) --- */
/* ---- Contactpagina: B2B-keuze, contacttegels en de kaartband boven de footer ---- */
.ct-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,1.4rem); }
.ct-tile{ display:flex; flex-direction:column; gap:.6rem; background:var(--white);
  border:1px solid #e6ded0; border-radius:var(--radius-lg); padding:clamp(1.3rem,2.4vw,1.7rem);
  box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), border-color .3s var(--ease); }
.ct-tile:hover{ transform:translateY(-4px); border-color:var(--gold-500); }
.ct-tile__ic{ display:grid; place-items:center; width:46px; height:46px; border-radius:13px;
  background:rgba(21,81,44,.08); color:var(--green-700); }
.ct-tile__ic svg{ width:22px; height:22px; }
.ct-tile__k{ font-family:var(--font-sans); font-weight:700; font-size:.74rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--gold-700); }
.ct-tile__v{ color:var(--ink); line-height:1.6; font-size:.98rem; }
.ct-tile__v a{ color:var(--green-700); font-weight:600; }
.ct-tile__v a:hover{ color:var(--gold-700); }
.ct-social{ display:flex; align-items:center; justify-content:center; gap:1.1rem; margin-top:clamp(1.8rem,3vw,2.4rem); }
.ct-social .contact-social__lbl{ font-family:var(--font-sans); font-weight:700; font-size:.78rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--gold-700); }

/* Kaartband: volle breedte, direct boven de footer, met adreskaart erover. */
.map-band{ position:relative; min-height:clamp(340px,42vh,460px); background:var(--green-850);
  display:grid; place-items:center; overflow:hidden; }
/* Huisstijlpatroon achter de kaart: laadt de kaart niet, dan oogt de band nog steeds bedoeld. */
.map-band::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../img/patterns/star-pattern.svg") 0 0 / 130px; opacity:.06; }
.map-band iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; filter:grayscale(.15); }
.map-band__card{ position:relative; z-index:1; justify-self:start;
  margin:clamp(1.4rem,3vw,2.6rem); margin-inline-start:max(var(--gutter), calc((100vw - var(--container)) / 2));
  background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  padding:clamp(1.4rem,2.6vw,2rem); max-width:22rem;
  display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; }
.map-band__adr{ margin:0; color:var(--ink); line-height:1.65; font-size:1.02rem; }
@media (max-width:820px){
  .ct-tiles{ grid-template-columns:1fr 1fr; }
  .map-band__card{ justify-self:stretch; margin-inline:var(--gutter); max-width:none; }
}
@media (max-width:520px){ .ct-tiles{ grid-template-columns:1fr; } }

.wk-card{ background:var(--white); border-radius:var(--radius-lg); border:1px solid #3a4a40;
  box-shadow:var(--shadow-sm); padding:clamp(1.6rem,3vw,2.3rem); }
.wk-card > p{ color:var(--ink-soft); line-height:1.62; }
.wk-list{ list-style:none; margin:1.4rem 0 1.7rem; padding:0; display:grid; gap:.72rem; }
.wk-list li{ display:flex; align-items:flex-start; gap:.7rem; font-size:.98rem; color:var(--green-850); }
.wk-list svg{ width:20px; height:20px; flex:none; color:var(--gold-600); margin-top:.15rem; }
.wk-help{ margin-top:1.3rem; font-size:.9rem; color:var(--ink-soft); }
.wk-help a{ color:var(--gold-700); font-weight:600; }

/* ============================================================
   CONSISTENTE VIERKANTE FOTOVAKKEN (content-secties)
   Alle sier-fotovakken in content krijgen dezelfde strakke vierkante
   vorm: 1:1 met --radius-lg. Hero-foto's blijven ongemoeid.
   ============================================================ */
/* Assortiment: boog + 4:3 -> vierkant */
.photo--arch{ border-radius:var(--radius-lg); }
.photo--arch.aspect-43{ aspect-ratio:1/1; }
/* Uitzondering: een foto die een opstelling van verpakkingen naast elkaar
   toont, past niet in een vierkant. De buitenste verpakkingen vallen er dan
   half af, en juist die merken zijn de reden dat de foto er staat. */
.photo--arch.aspect-43.photo--opstelling{ aspect-ratio:1600/1126; }
/* Merk (bw), content-secties: boog -> vierkant (hero blijft boog) */
.bw-section .bw-photo--arch{ border-radius:var(--radius-lg); aspect-ratio:1/1; }
/* La Vache qui rit, content-secties: blob/rond -> vierkant (hero blijft) */
.lv-section .lv-photo--blob,
.lv-section .lv-photo--round{ border-radius:var(--radius-lg); aspect-ratio:1/1; }

/* Collage (home + ramadan): overlappende vierkanten i.p.v. blobs */
.collage__tile.big .photo,
.collage__tile.mid .photo,
.collage__tile.sm  .photo{ border-radius:var(--radius-lg); }
.collage__tile.big{ inset:auto; top:0; left:0; width:62%; aspect-ratio:1/1; z-index:1; }
.collage__tile.mid{ inset:auto; top:28%; right:0; width:50%; aspect-ratio:1/1; z-index:2; }
.collage__tile.sm { inset:auto; bottom:0; left:8%; width:44%; aspect-ratio:1/1; z-index:3; }

/* ============================================================
   OVER ONS — video-hero (tekstblok + videoblok), missie, verhaal-tijdlijn
   ============================================================ */
/* Hero: links tekstblok, rechts videoblok (schoon; geen embleem/patroon rechts) */
.hero-duo{ display:grid; grid-template-columns:minmax(0,0.94fr) minmax(0,1.06fr);
  min-height:clamp(500px,76vh,800px); background:var(--green-700); }
.hero-duo__panel{ position:relative; overflow:hidden; background:var(--green-700); color:var(--cream);
  display:flex; align-items:center;
  padding-block:calc(var(--header-h) + clamp(1rem,4vh,2.4rem)) clamp(2rem,5vh,3.4rem);
  padding-inline:clamp(1.6rem,4vw,3rem);
  padding-inline-start:max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }
/* Zelfde patroon als alle andere hero's. Het masker uit .star-bg moet hier uit:
   dat legt een tweede sterraster (74px) over het patroon (130px), waardoor het
   patroon in stukken werd geknipt. */
.hero-duo__panel .star-bg{ background:url("../img/patterns/star-pattern.svg") 0 0 / 130px fixed; opacity:.08;
  -webkit-mask:none; mask:none; }
.hero-duo__copy{ position:relative; z-index:1; max-width:35rem;
  display:flex; flex-direction:column; align-items:flex-start; gap:clamp(.85rem,2vh,1.3rem); }
.hero-duo__copy > *{ margin:0; }
.hero-duo__copy .hero__title{ font-size:clamp(2.3rem,4.4vw,4rem); line-height:1.04; max-width:none; }
.hero-duo__copy .hero__lead{ font-size:clamp(1.02rem,1.25vw,1.24rem); line-height:1.6; color:rgba(248,242,231,.9); }
.hero-duo__copy .cta-row{ margin-top:.4rem; }
.hero-duo__video{ position:relative; overflow:hidden; display:grid; place-items:center;
  background:var(--green-950) url("../img/sfeer-tafel.webp") center / cover no-repeat; }
.hero-duo__video::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,26,13,.10), rgba(8,26,13,.44)); }
.hero-duo__play{ position:relative; z-index:1; width:clamp(78px,7vw,112px); aspect-ratio:1;
  border-radius:50%; display:grid; place-items:center; color:var(--green-900);
  background:var(--gold-400); box-shadow:0 16px 40px rgba(0,0,0,.45); }
.hero-duo__play svg{ width:38%; height:38%; margin-left:6%; }
@media (prefers-reduced-motion:no-preference){ .hero-duo__play{ animation:filmPulse 2.6s var(--ease) infinite; } }
@media (max-width:820px){
  .hero-duo{ grid-template-columns:1fr; min-height:0; }
  .hero-duo__panel{ order:1; padding-inline:var(--gutter);
    padding-block:calc(var(--header-h) + 1.4rem) clamp(2rem,7vw,2.8rem); }
  .hero-duo__video{ order:2; min-height:clamp(240px,56vw,360px); }
}

/* Onze missie: verzorgd, gecentreerd statement */
.mission{ max-width:820px; margin-inline:auto; text-align:center; display:flex; flex-direction:column; align-items:center; }
.mission__mark{ width:66px; height:66px; border-radius:50%; display:grid; place-items:center; margin-bottom:1.3rem;
  color:var(--gold-600); background:rgba(218,167,81,.14); border:1px solid var(--gold-500); }
.mission__mark svg{ width:30px; height:30px; }
.mission__text{ font-size:clamp(1.16rem,2.05vw,1.5rem); line-height:1.6; color:var(--green-900); max-width:58ch; margin:1.05rem auto 0; }
.mission::after{ content:""; width:64px; height:3px; border-radius:2px; background:var(--gold-500); margin-top:1.7rem; }

/* Ons verhaal: alternerende foto-tijdlijn met middenlijn (compact) */
.story-tl{ position:relative; margin-top:clamp(2.2rem,4vw,3rem); }
.story-tl::before{ content:""; position:absolute; left:50%; top:6px; bottom:6px; width:2px; transform:translateX(-50%);
  background:linear-gradient(var(--gold-500), rgba(218,167,81,.12)); z-index:0; }
.story-row{ position:relative; display:grid; grid-template-columns:1fr 58px 1fr; align-items:center; gap:clamp(1rem,2.4vw,2rem); }
.story-row + .story-row{ margin-top:clamp(1.3rem,2.8vw,2rem); }
.story-row__media{ grid-column:1; grid-row:1; display:flex; justify-content:flex-end; }
.story-row--flip .story-row__media{ grid-column:3; justify-content:flex-start; }
.story-row__media .photo{ min-height:0; width:100%; max-width:clamp(190px,24vw,246px);
  box-shadow:0 0 0 3px var(--gold-500), var(--shadow-lg); }
.story-row__mark{ grid-column:2; grid-row:1; position:relative; z-index:2; display:grid; place-items:center; }
.story-row__yr{ display:grid; place-items:center; width:58px; height:58px; border-radius:50%; text-align:center;
  background:var(--green-950); border:2px solid var(--gold-500); color:var(--gold-400);
  font-family:var(--font-sans); font-weight:800; font-size:.82rem; line-height:1; box-shadow:0 0 0 6px rgba(8,26,13,.5); }
.story-row__text{ grid-column:3; grid-row:1; }
.story-row--flip .story-row__text{ grid-column:1; text-align:right; }
.story-row__text h3{ font-family:var(--font-sans); font-weight:700; font-size:clamp(1.12rem,1.6vw,1.4rem); color:var(--cream); margin:0 0 .4rem; }
.story-row__text p{ color:#E3D5C1; font-size:.95rem; line-height:1.55; margin:0; max-width:46ch; }
.story-row--flip .story-row__text p{ margin-left:auto; }
@media (max-width:820px){
  .story-tl::before{ left:23px; }
  .story-row{ grid-template-columns:48px minmax(0,1fr); grid-template-rows:auto auto; column-gap:1rem; row-gap:.7rem; align-items:start; }
  .story-row__mark{ grid-column:1; grid-row:1; }
  .story-row__media, .story-row--flip .story-row__media{ grid-column:2; grid-row:1; justify-content:flex-start; }
  /* De foto was smaller dan de tekstkolom ernaast, waardoor beide randen
     niet uitlijnden. Op telefoon de volle kolombreedte. */
  .story-row__media .photo{ max-width:100%; }
  .story-row__text, .story-row--flip .story-row__text{ grid-column:2; grid-row:2; text-align:left; }
  .story-row--flip .story-row__text p{ margin-left:0; }
  .story-row__yr{ width:48px; height:48px; font-size:.72rem; }
  .story-row + .story-row{ margin-top:1.8rem; }
}

/* Duurzaamheid: lichte feature-kaarten */
.sus-card{ background:var(--white); border:1px solid #3a4a40; border-radius:var(--radius-lg);
  padding:2rem 1.5rem 1.7rem; box-shadow:var(--shadow-sm); }
.sus-card__ic{ display:block; color:var(--green-600); margin:.4rem 0 1rem; }
.sus-card__ic svg{ width:38px; height:38px; }
.sus-card h3{ font-family:var(--font-sans); font-weight:700; font-size:1.06rem; color:var(--green-800); margin:0 0 .4rem; }
.sus-card p{ color:var(--ink-soft); font-size:.94rem; line-height:1.55; margin:0; }

/* Wereldkaart-regio (home): de kaart is deel van de achtergrond (geen kader) */
.worldmap{ margin:0; }
/* De SVG draagt alleen een viewBox, geen width/height. Zonder vaste
   beeldverhouding is de hoogte nul tot het bestand binnen is en springt
   alles eronder 255 px omlaag. 244 bij 176 is de viewBox. */
.worldmap__img{ display:block; width:100%; max-width:440px; margin-inline:auto; height:auto; aspect-ratio:244 / 176; }
#regio{ padding-block:clamp(3rem,6vw,5.5rem); }
#regio .split{ align-items:center; }
.worldmap__legend{ display:flex; flex-wrap:wrap; gap:.8rem 1.9rem; justify-content:center; margin-top:1.4rem; }
.wm-key{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-sans); font-weight:600; font-size:.9rem; color:var(--green-850); }
.wm-key::before{ content:""; width:15px; height:15px; border-radius:4px; flex:none; }
.wm-key--on::before{ background:#19502a; box-shadow:inset 0 0 0 1.5px #e8be70; }
.wm-key--off::before{ background:rgba(21,48,29,.12); border:1px solid rgba(21,48,29,.22); }

/* ============================================================
   PAGINA-OVERGANGEN  (cross-document View Transitions)
   Zachte fade + lichte lift tussen elke pagina, heen en terug.
   Progressive enhancement: browsers zonder ondersteuning
   navigeren gewoon normaal, zonder effect en zonder breuk.
   ============================================================ */
@view-transition { navigation: auto; }

/* Header en footer blijven visueel staan; alleen de inhoud beweegt. */
.site-header{ view-transition-name: site-header; }
.site-footer{ view-transition-name: site-footer; }

@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root),
  ::view-transition-new(root){
    animation-duration:.46s;
    animation-timing-function:cubic-bezier(.22,1,.36,1);
    animation-fill-mode:both;
  }
  ::view-transition-old(root){ animation-name:a4t-page-out; }
  ::view-transition-new(root){ animation-name:a4t-page-in; }

  @keyframes a4t-page-out{
    to{ opacity:0; transform:translateY(-10px) scale(.994); }
  }
  @keyframes a4t-page-in{
    from{ opacity:0; transform:translateY(14px) scale(.994); }
    to{ opacity:1; transform:none; }
  }

  /* Header en footer: korte, rustige cross-fade zonder verspringen. */
  ::view-transition-old(site-header),
  ::view-transition-new(site-header),
  ::view-transition-old(site-footer),
  ::view-transition-new(site-footer){
    animation-duration:.32s;
    animation-timing-function:ease;
  }
}

/* Reduced motion: directe wissel, geen beweging. */
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important; }
}

/* ============================================================
   KERNWAARDEN-ICONEN — subtiele, doorlopende loop-beweging
   (zachte 'ademhaling' + lichte zweving), zoals op de oude site.
   Geldt voor alle .value-card iconen; per kaart iets verschoven
   zodat ze niet gelijk bewegen. Uit bij reduced motion.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .value-card .vc-icon svg{
    animation: vc-icon-loop 4.2s ease-in-out infinite;
    transform-origin: 50% 62%;
    will-change: transform;
  }
  .value-card:nth-child(2) .vc-icon svg{ animation-delay:-.7s; }
  .value-card:nth-child(3) .vc-icon svg{ animation-delay:-1.4s; }
  .value-card:nth-child(4) .vc-icon svg{ animation-delay:-2.1s; }
  .value-card:nth-child(5) .vc-icon svg{ animation-delay:-2.8s; }
  .value-card:nth-child(6) .vc-icon svg{ animation-delay:-3.5s; }

  @keyframes vc-icon-loop{
    0%,100%{ transform:translateY(0) scale(1); }
    50%{ transform:translateY(-4px) scale(1.07); }
  }

  /* Zachte gloed op de icooncirkel, meebewegend met de puls. */
  .value-card .vc-icon{ animation: vc-icon-glow 4.2s ease-in-out infinite; }
  .value-card:nth-child(2) .vc-icon{ animation-delay:-.7s; }
  .value-card:nth-child(3) .vc-icon{ animation-delay:-1.4s; }
  .value-card:nth-child(4) .vc-icon{ animation-delay:-2.1s; }
  .value-card:nth-child(5) .vc-icon{ animation-delay:-2.8s; }
  .value-card:nth-child(6) .vc-icon{ animation-delay:-3.5s; }

  @keyframes vc-icon-glow{
    0%,100%{ box-shadow:0 0 0 0 rgba(218,167,81,0); }
    50%{ box-shadow:0 0 0 6px rgba(218,167,81,.06); }
  }
  /* Hover heeft voorrang: pauzeer de zweving zodat de lift schoon is. */
  .value-card:hover .vc-icon svg{ animation-play-state:paused; }
}

/* Logistiek: sfeerbeeld van de eigen bezorgwagen (Sharing the Middle East) */
.logi-hero{ margin:0 0 clamp(2rem,4vw,3rem); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow); border:1px solid rgba(21,48,29,.12); position:relative; }
.logi-hero img{ display:block; width:100%; aspect-ratio:21/9; object-fit:cover; object-position:center 58%; }
@media (max-width:680px){ .logi-hero img{ aspect-ratio:16/11; } }

/* ============================================================
   ALL4NEWS — nieuwsblokken met pdf-download
   ============================================================ */
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.4vw,1.9rem); }
@media (max-width:900px){ .news-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .news-grid{ grid-template-columns:1fr; } }
.news-card{ display:flex; flex-direction:column; background:var(--white);
  border:1px solid rgba(21,48,29,.12); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.news-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.news-card__doc{ position:relative; display:grid; place-items:center; aspect-ratio:16/9;
  background:linear-gradient(150deg,var(--green-700),var(--green-950)); }
.news-card__doc::before{ content:""; position:absolute; inset:0;
  background:url("../img/patterns/star-pattern.svg") center/120px; opacity:.08; pointer-events:none; }
.news-card__badge{ position:relative; display:inline-flex; flex-direction:column; align-items:center; gap:.45rem;
  color:var(--gold-400); font-family:var(--font-sans); font-weight:800; letter-spacing:.14em; font-size:.86rem; }
.news-card__badge svg{ width:38px; height:38px; }
.news-card__body{ display:flex; flex-direction:column; gap:.5rem; flex:1;
  padding:clamp(1.1rem,2vw,1.5rem); }
.news-card__date{ font-family:var(--font-sans); font-weight:700; font-size:.72rem;
  text-transform:uppercase; letter-spacing:.12em; color:var(--gold-700); }
.news-card__title{ font-family:var(--font-sans); font-weight:800; font-size:1.14rem;
  color:var(--green-800); line-height:1.28; }
.news-card__text{ font-size:.92rem; color:#4a5a4e; line-height:1.55; flex:1; }
.news-card .btn{ align-self:flex-start; margin-top:.5rem; }

/* ============================================================
   MENU-SCROLLBARS — huisstijl (gouden 'pill' op donkergroen)
   Geldt voor de hoofdkolom (.mm) en de uitklap-panelen (.mm-fly__panel).
   ============================================================ */
.mm, .mm-fly__panel{ scrollbar-width:thin; scrollbar-color:var(--gold-500,#daa751) rgba(8,26,13,.5); }

.mm::-webkit-scrollbar,
.mm-fly__panel::-webkit-scrollbar{ width:11px; }

.mm::-webkit-scrollbar-track,
.mm-fly__panel::-webkit-scrollbar-track{
  background:rgba(8,26,13,.5);
  border-radius:20px;
  margin:10px 0;
  box-shadow:inset 0 0 0 1px rgba(218,167,81,.12);
}

.mm::-webkit-scrollbar-thumb,
.mm-fly__panel::-webkit-scrollbar-thumb{
  border-radius:20px;
  border:3px solid transparent;            /* padding zodat de pill 'zweeft' */
  background:linear-gradient(180deg,var(--gold-400,#e8c07a),var(--gold-500,#daa751) 55%,#c4923f) padding-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.15);
}
.mm::-webkit-scrollbar-thumb:hover,
.mm-fly__panel::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#f2d296,var(--gold-500,#daa751) 55%,#cf9c47) padding-box;
}
.mm::-webkit-scrollbar-thumb:active,
.mm-fly__panel::-webkit-scrollbar-thumb:active{
  background:linear-gradient(180deg,var(--gold-500,#daa751),#b9873a) padding-box;
}
.mm::-webkit-scrollbar-corner,
.mm-fly__panel::-webkit-scrollbar-corner{ background:transparent; }

/* ============================================================
   PAGINA-SCROLLBAR — huisstijl (gouden 'pill' die zweeft)
   Zelfde taal als de menu-scrollbar, maar goud leest goed op zowel
   de lichte als de donkergroene secties. De drawer (.mm) houdt via
   hogere specificiteit zijn eigen stijl.
   ============================================================ */
::-webkit-scrollbar{ width:14px; height:14px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  border-radius:20px;
  border:3px solid transparent;                 /* padding zodat de pill 'zweeft' */
  background:linear-gradient(180deg,#e8c07a,var(--gold-500,#daa751) 55%,#c08f3e) padding-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.15);
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#f2d296,var(--gold-500,#daa751) 55%,#cf9c47) padding-box;
}
::-webkit-scrollbar-thumb:active{
  background:linear-gradient(180deg,var(--gold-500,#daa751),#b9873a) padding-box;
}
::-webkit-scrollbar-corner{ background:transparent; }

/* Firefox (en engines zonder ::-webkit-scrollbar): dunne gouden balk.
   Alleen hier gezet, zodat Chrome de -webkit-'pill' blijft tonen. */
@supports not (selector(::-webkit-scrollbar)){
  html{ scrollbar-width:thin; scrollbar-color:var(--gold-500,#daa751) transparent; }
}

/* Fotovak met een echte foto: verberg de placeholder-inhoud eronder.
   Valt automatisch terug op het merk-fotovak als de foto (nog) ontbreekt. */
.photo:has(.photo__img) .photo__body{ display:none; }

/* ====================================================================
   POLISH — kalmere, vloeiendere reveals + subtiele diepte (huisstijl)
   ==================================================================== */
:root{ --reveal-ease: cubic-bezier(.215,.61,.355,1); }

@media (prefers-reduced-motion: no-preference){
  /* lichtere blur + zachtere opkomst + gelijkmatige deceleratie = rustiger */
  .reveal{
    transform: translateY(20px); filter: blur(2px);
    transition: opacity .95s var(--reveal-ease), transform .95s var(--reveal-ease), filter .95s var(--reveal-ease);
    will-change: opacity, transform;
  }
  .reveal.in{ transform: none; filter: blur(0); }
  .reveal-left, .reveal-right, .reveal-scale{
    transition: opacity .95s var(--reveal-ease), transform .95s var(--reveal-ease);
    will-change: opacity, transform;
  }
  .reveal-left{ transform: translateX(-24px); }
  .reveal-right{ transform: translateX(24px); }
  .reveal-scale{ transform: scale(.95); }
  /* geef de GPU rust zodra het klaar is */
  .reveal.in, .reveal-left.in, .reveal-right.in, .reveal-scale.in{ will-change: auto; }
}

/* Subtiele, warme diepte in de donkergroene secties: minder vlak, rustiger voor het oog */
.section--green-deep, .heritage{ position: relative; }
.section--green-deep::after, .heritage::after{
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(115% 80% at 50% -6%, rgba(218,167,81,.05), transparent 60%);
}
.section--green-deep > .container, .heritage > .container{ position: relative; z-index: 1; }

/* Reduced-motion houdt altijd voorrang */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-left, .reveal-right, .reveal-scale{
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
  }
}

/* ====================================================================
   NADEN — donkergroen en zand vloeien zachter in elkaar over
   ==================================================================== */
/* Lichte sectie ná een donkere: vangt een fluisterzachte schaduw van de
   sectie erboven, zodat de overgang zacht wegvalt in plaats van een harde lijn. */
.heritage + .section--cream,      .heritage + .section--paper,
.section--green + .section--cream,      .section--green + .section--paper,
.section--green-deep + .section--cream, .section--green-deep + .section--paper{
  box-shadow: inset 0 22px 28px -30px rgba(8, 26, 13, .24);
}
/* Donkere sectie ná een lichte: een fijne, warme haarlijn markeert de
   overgang rustig, zonder scherpe rand. */
.section--cream + .heritage,           .section--paper + .heritage,
.section--cream + .section--green,      .section--paper + .section--green,
.section--cream + .section--green-deep, .section--paper + .section--green-deep{
  box-shadow: inset 0 1px 0 rgba(218, 167, 81, .15);
}

/* ====================================================================
   CONSISTENTE DONKERE SECTIES
   Eén merkgroen (Palm Green) voor alle donkere blokken, plus hetzelfde
   subtiele sterpatroon op dezelfde schaal. Zo zien heritage, .section--green
   en .section--green-deep er identiek uit i.p.v. drie verschillende groenen
   met twee verschillende texturen.
   ==================================================================== */
.section--green, .section--green-deep, .heritage, .cta-band{ position: relative; }
.section--green::before, .section--green-deep::before, .heritage::before, .cta-band::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../img/patterns/star-pattern.svg") center / 160px;
  opacity:.09;
  /* Elke sectie centreert het patroon op zijn eigen hoogte. Aan de randen werd
     een ster daardoor halverwege afgekapt, en bij de naad tussen twee secties
     sloten de tegels nooit op elkaar aan. Laat het patroon voor de rand rustig
     uitdoven, dan bestaat er geen zichtbare snede meer. */
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 clamp(56px,9vh,96px),
      #000 calc(100% - clamp(56px,9vh,96px)), transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 clamp(56px,9vh,96px),
      #000 calc(100% - clamp(56px,9vh,96px)), transparent 100%);
}
/* inhoud boven het patroon */
.section--green > *, .section--green-deep > *, .heritage > *, .cta-band > *{ position:relative; z-index:1; }
/* geen dubbele textuur: de losse gouden star-bg in deze secties valt weg,
   het sterpatroon hierboven neemt het over (één schoon patroon per blok) */
.section--green > .star-bg, .section--green-deep > .star-bg, .cta-band > .star-bg{ display:none; }

/* ====================================================================
   BEDRIJFSVIDEO — ingeladen <video> na klik op de facade
   ==================================================================== */
.video-ph, .hero-duo__video{ cursor:pointer; }
.video-el{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  background:#000; z-index:3; border:0; display:block; }
/* De film is 16:9, het heropaneel op Over ons is bijna vierkant. De randen
   boven en onder krijgen ons diepe groen, dan leest de hero als één vlak met
   de film erin, in plaats van als een zwarte speler. Bijsnijden kan hier niet:
   dan valt de ondertiteling links en rechts weg. */
.hero-duo__video .video-el{ background:var(--green-950); }

/* ====================================================================
   TELEFOON — gerichte correcties voor kleine schermen
   Alles hieronder staat in een mediaquery en raakt de desktop niet.
   ==================================================================== */

@media (max-width:820px){
  /* Het bloem-embleem zit met zijn hart op de rand van het groene paneel.
     Op desktop is die rand verticaal en loopt het embleem sierlijk over de
     foto. Op telefoon stapelt de hero, wordt de rand horizontaal en zie je
     alleen de onderste helft: losse groene scherven op de foto. Weg ermee. */
  .hero-split__emblem{ display:none; }

  /* background-attachment:fixed is op iOS onbetrouwbaar: het patroon springt
     of verdwijnt bij het scrollen. Op telefoon gewoon meescrollen. Het
     embleem is hier toch verborgen, dus naadloos aansluiten hoeft niet. */
  .hero-split__panel::before,
  .hero-duo__panel .star-bg{ background-attachment:scroll; }

  /* Het paneel was hoger dan het scherm, waardoor de foto pas na een volledig
     scherm scrollen in beeld kwam. Compacter, en de foto wat royaler. */
  .hero-split__panel{ padding-bottom:clamp(2rem,7vw,2.8rem); }
  .hero-split__photo{ height:clamp(240px,56vw,340px); }

  /* Letters onder de 11 px zijn op een telefoon niet te lezen. */
  .spec__k{ font-size:.78rem; }
  .bb-card__tag, .lv-prod__tag, .hb-card__tag{ font-size:.79rem; }
  .bb-herofig__since, .brand-visual__chip, .story-row__yr,
  .video-ph__tag, .ct-tile__k{ font-size:.78rem; }
  .lv-hero__badge span{ font-size:.77rem; }

  /* iOS zoomt de pagina in zodra je een veld met minder dan 16 px aantikt.
     Dat verspringen is het meest storende dat een formulier kan doen. */
  .field input, .field select, .field textarea,
  input[type="email"], input[type="text"], input[type="number"],
  input[type="tel"], select, textarea{ font-size:16px; }
}

@media (max-width:560px){
  /* De drie kerncijfers vielen uiteen in twee plus een losse. Nu drie naast
     elkaar, zoals bedoeld. */
  .hero__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem .9rem; }
  .hero__stats .hstat b{ font-size:clamp(1.5rem,6.6vw,2rem); }
  /* alleen het label eronder, niet het telspan binnen <b> */
  .hero__stats .hstat > span{ display:block; font-size:.77rem; line-height:1.25; }
}

@media (max-width:520px){
  /* Links in de voettekst en het kruimelpad waren 20 tot 23 px hoog. Te klein
     om met een duim te raken; het aanraakvlak groeit, de opmaak niet. */
  .footer-col ul li a,
  .footer-contact li a,
  .footer-legal a{ display:inline-flex; align-items:center; min-height:44px; }
  .breadcrumb a{ display:inline-flex; align-items:center; min-height:40px; }
}

/* Pagina's die meteen met een cremekleurig blok beginnen (contact, privacy,
   voorwaarden) hebben geen donkere hero waar de kopbalk overheen kan liggen.
   De donkere verloopsluier die het logo daar leesbaar houdt, leest op creme
   als een vuile veeg. Op die pagina's dus meteen de dichte kopbalk. */
.pagina-lichte-kop .site-header{
  background:var(--green-800);
  border-bottom-color:#daa751;
  box-shadow:0 10px 30px -14px rgba(0,0,0,.5);
}
.pagina-lichte-kop .site-header::before{ opacity:0; }
/* En ruimte onder die dichte balk, anders plakt de eerste regel eraan vast. */
.pagina-lichte-kop main{ padding-top:var(--header-h); }

@media (max-width:820px){
  /* De taalvlaggen in het menu waren 30 bij 22 px. Met een duim niet te doen. */
  .lang button{ width:44px; height:32px; }

  /* Pijl-links ("Lees het merkverhaal") waren 26 px hoog. */
  .link-arrow{ min-height:40px; }

  /* De merkpagina's dragen hun eigen stijlblok in de pagina zelf, en dat wint
     van dit stylesheet bij gelijke specificiteit. Vandaar een extra klasse
     ervoor, anders blijven deze labels op 10,9 en 11,5 px staan. */
  .bb-card .bb-card__tag,
  .hb-card .hb-card__tag{ font-size:.79rem; }
  .bb-herofig .bb-herofig__since,
  .hb-herofig .hb-herofig__since{ font-size:.76rem; }
  .lv-prod .lv-prod__tag{ font-size:.79rem; }
  .world-card .world-card__cat{ font-size:.79rem; }
}

@media (max-width:820px){
  /* Het kerncijfer en het plusteken horen op één regel. In een smalle kolom
     brak "30" en "+" uit elkaar, met de "+" op een eigen regel. */
  .hero__stats .hstat b{ white-space:nowrap; }

  /* De zwevende WhatsApp- en naar-boven-knop dekken de laatste regels van de
     voettekst af. Ruimte eronder, zodat niets meer onbereikbaar wordt. */
  /* De naar-boven-knop staat op bottom:80px en is 48 px hoog, dus de
     voettekst moet 128 px vrijhouden, niet 68. Met 68 lag die knop nog
     over de link "Vacatures", die daardoor half onaantikbaar was. */
  .footer-bottom{ padding-bottom:calc(1.4rem + 128px); }
}

/* Twee groene secties op elkaar (op de Ramadanpagina sinds de fotoband daar
   weg is) lezen als één lang leeg vlak: de grens is onzichtbaar en er staat
   een dubbele marge tussen. Een dunne gouden lijn markeert de overgang. */
.heritage + .cta-band,
.section--green-deep + .cta-band,
.section--green + .cta-band{ border-top:1px solid rgba(218,167,81,.30); }

@media (max-width:820px){
  /* Telefoonnummer en e-mailadres in het menu waren 25 px hoog. */
  .mm-root a[href^="tel:"], .mm-root a[href^="mailto:"],
  .drawer a[href^="tel:"], .drawer a[href^="mailto:"],
  .ct-tile a{ display:inline-flex; align-items:center; min-height:40px; }
}

@media (max-width:460px){
  /* Het volledige merkenraster viel terug naar één kolom. Met 53 logotegels
     werd de pagina 15.000 px lang, zo'n achttien schermen. Twee kolommen. */
  .brand-grid--all{ grid-template-columns:1fr 1fr; }
}

/* Een kop die direct door een alinea wordt gevolgd, kreeg op sommige plekken
   geen ondermarge mee, waardoor kop en tekst tegen elkaar plakten. Dit staat
   op de alinea, zodat marges samenvallen: waar de kop al ruimte meebrengt,
   verandert er niets. */
h2.display + p, h2.lv-h + p, h3.display + p{ margin-top:.8rem; }

@media (max-width:820px){
  /* Het gouden label op de fotoband stond op 10,56 px. */
  .photo__tag{ font-size:.78rem; }

  /* Knoppen in het menu bleven net onder de 40 px, en de "Terug"-knop in het
     uitklapmenu is de enige weg terug. */
  .mm-root .btn, .drawer .btn,
  .mm-root .mm-back, .drawer .mm-back{ min-height:44px; }

  /* De vlaggen zijn 3:2 en werden in een 32x30-vak uitgerekt. */
  .lang button{ height:40px; }
  .lang button img, .flag{ object-fit:contain; }
}

/* In het Arabisch staat de pagina op dir="rtl". Een telefoonnummer is een
   reeks losse cijfergroepen, die de bidi-afhandeling dan omdraait: er stond
   "8653 549 36(0) 31+" in plaats van "+31 (0)36 549 8653". Het nummer als
   eigen tekstrichting isoleren lost dat op, zonder de rest te raken. */
[dir="rtl"] a[href^="tel:"]{ direction:ltr; unicode-bidi:isolate; }

/* De badge bevat <b>1921</b><span>Sinds</span>, wat als "1921Sinds" op één
   regel uitkwam. Omgekeerd stapelen leest als "Sinds" boven "1921", zonder
   de opmaak in de pagina zelf te hoeven wijzigen. */
.lv-hero__badge > div{ display:flex; flex-direction:column-reverse; align-items:center; line-height:1.15; }
.lv-hero__badge b{ display:block; }

/* ====================================================================
   TEKSTVARIANT PER SCHERMFORMAAT
   Twee versies van dezelfde zin naast elkaar in de opmaak: eentje voor
   telefoon, eentje voor grotere schermen. Er wordt alleen display:none
   gezet op de versie die weg moet, nooit een display op de zichtbare, zodat
   die zijn eigen opmaak houdt. display:none haalt de verborgen versie ook
   uit de voorleesvolgorde, dus een schermlezer hoort er precies één.
   ==================================================================== */
@media (min-width:821px){ .tekst-telefoon{ display:none !important; } }
@media (max-width:820px){ .tekst-breed{ display:none !important; } }

/* Een logo in een fotokader hoort helemaal zichtbaar te zijn, niet bijgesneden
   zoals een foto. Vandaar een licht vlak eromheen en ruimte aan de randen. */
.photo--logo{ background:var(--cream); }
.photo--logo .photo__img{ object-fit:contain; padding:clamp(1.2rem,7%,2.4rem); box-sizing:border-box; }
.photo--logo .photo__img.kenburns{ animation:none; }

/* ====================================================================
   IN DE MEDIA, perspagina
   Drie blokken met een eigen ritme: een lijst met verwijzingen naar
   externe publicaties, een strook met kerngegevens op groen en een
   raster met onze eigen kanalen.
   ==================================================================== */
.pers-lijst{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(.9rem,1.6vw,1.2rem); }
@media (min-width:880px){ .pers-lijst{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.pers-item{ display:flex; }

.pers-item__link{ display:flex; flex-direction:column; gap:.6rem; width:100%;
  padding:clamp(1.35rem,2.4vw,1.9rem);
  background:var(--white); border:1px solid #3a4a40; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); text-decoration:none; color:inherit;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.pers-item__link:hover, .pers-item__link:focus-visible{ transform:translateY(-4px);
  border-color:var(--gold-500); box-shadow:var(--shadow); }

.pers-item__meta{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.pers-item__bron{ font-family:var(--font-sans); font-weight:700; font-size:.74rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--gold-700); }
.pers-item__soort{ font-family:var(--font-sans); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; padding:.24rem .58rem; border-radius:999px;
  background:rgba(25,80,42,.08); border:1px solid rgba(25,80,42,.16); color:var(--green-700); }

.pers-item__titel{ font-family:var(--font-serif); font-weight:700;
  font-size:clamp(1.08rem,1.8vw,1.28rem); line-height:1.32; color:var(--green-850); }
.pers-item__tekst{ color:var(--ink-soft); line-height:1.6; font-size:.97rem; }
.pers-item__go{ margin-top:auto; padding-top:.55rem; display:inline-flex; align-items:center;
  gap:.45rem; font-family:var(--font-sans); font-weight:700; font-size:.9rem; color:var(--green-700); }
.pers-item__go svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.pers-item__link:hover .pers-item__go{ color:var(--gold-700); }
.pers-item__link:hover .pers-item__go svg{ transform:translate(2px,-2px); }

/* Kerngegevens: een strakke definitielijst op het groene vlak. */
.pers-feiten{ margin:0; display:grid; gap:1px; background:rgba(227,213,193,.2);
  border:1px solid rgba(227,213,193,.28); border-radius:var(--radius-lg); overflow:hidden; }
@media (min-width:640px){ .pers-feiten{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:960px){ .pers-feiten{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.pers-feit{ background:var(--green-700); padding:clamp(1.1rem,2vw,1.5rem); }
.pers-feit dt{ font-family:var(--font-sans); font-weight:700; font-size:.72rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold-400); margin-bottom:.35rem; }
.pers-feit dd{ margin:0; color:var(--cream); font-size:1.04rem; line-height:1.45; }

/* Eigen kanalen. */
.pers-kanalen{ display:grid; gap:clamp(.9rem,1.6vw,1.2rem);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.pers-kanaal{ display:flex; flex-direction:column; gap:.5rem;
  padding:clamp(1.2rem,2.2vw,1.6rem); background:var(--white);
  border:1px solid #3a4a40; border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  text-decoration:none; color:inherit;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.pers-kanaal:hover, .pers-kanaal:focus-visible{ transform:translateY(-4px);
  border-color:var(--gold-500); box-shadow:var(--shadow); }
.pers-kanaal__ic{ width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(218,167,81,.16), rgba(218,167,81,.05));
  color:var(--gold-700); border:1px solid var(--gold-500); }
.pers-kanaal__ic svg{ width:21px; height:21px; }
.pers-kanaal__k{ font-family:var(--font-sans); font-weight:700; font-size:1.02rem; color:var(--green-850); }
.pers-kanaal__v{ color:var(--ink-soft); font-size:.94rem; line-height:1.55; }