/* BREEKPUNTEN — gebruik alleen deze waarden.
   Er stonden er tien: 520, 560, 680, 760, 800, 820, 821, 900, 980, 1024. Bij
   800-821 lagen er drie binnen 21 pixels; dat waren geen keuzes maar aanwas.
   800 en 520 zijn samengevoegd met hun buurman. Wat overblijft heeft elk een
   eigen taak, dus samenvoegen tot één schaal zou het ontwerp veranderen:

     560px   telefoon staand  — kolommen naar één, formulieren vollopen
     680px   alleen de boekmodule — stapknoppen en dienstkiezer
     820px   telefoon liggend en kleine tablet — navigatie, module, gateway
     900px   dienstkaarten en rasters klappen in
     980px   hero herschikt
    1024px   hoofdmenu wordt hamburger

   Heb je een nieuw breekpunt nodig, kijk dan eerst of een van deze past.
   Een elfde waarde toevoegen is bijna altijd het verkeerde antwoord. */

/* Culinary Crew — alle sitestijlen in één bestand.
   Samengesteld uit cc.css, improved.css, redesign.css, real-assets.css,
   in exact die volgorde, want daar hing de cascade van af.
   Wijzig dit bestand rechtstreeks; de losse bestanden bestaan niet meer.
   Aangemaakt door _bouw/css-samenvoegen.py */


/* ====================================================================
   cc.css
   ==================================================================== */

/* ============================================================
   CULINARY CREW — cinematic wireframe system
   Rhythm & feel after closdessens.com · brand per Phase 1 intake
   ============================================================ */

:root {
  /* Brand palette (Phase 1 intake) */
  --navy:        #1D3557;  /* deep navy — primary */
  --navy-tint:   #3A506B;  /* soft navy tint */
  --olive:       #9DB5B2;  /* muted olive green — accent */
  --silver:      #EAEAEA;  /* silver grey */
  --slate:       #4A4A4A;  /* slate grey — body */
  --white:       #FFFFFF;

  /* Cinematic darks derived from navy */
  --ink:         #0B1420;  /* near-black navy — film base */
  --ink-2:       #11202F;
  --line:        rgba(234,234,234,.14);
  --line-dark:   rgba(11,20,32,.12);

  /* Accessible tekstvarianten van de accenten (voor LICHTE achtergronden).
     --olive en --warm zijn bedoeld voor donkere banden; op crème/wit halen ze
     geen 4.5:1. Deze varianten wel: olive-ink 4.86:1, warm-ink 4.52:1 op crème. */
  --olive-ink:   #54706B;  /* sage, leesbaar op licht */
  --warm-ink:    #8A6A2F;  /* messing, leesbaar op licht (4.54:1 op creme) */

  /* Radius-schaal: twee waarden, geen losse getallen */
  --radius-ctl:  8px;      /* knoppen, velden, kleine controls */
  --radius-card: 12px;     /* kaarten, panelen, modals */

  /* Z-index-schaal */
  --z-base:      1;
  --z-raised:    20;
  --z-drawer:    55;
  --z-nav:       60;
  --z-float:     900;   /* zwevende knoppen */
  --z-consent:   1000;  /* cookiebalk */
  --z-modal:     1100;  /* pop-ups */

  /* Type */
  --display: "Playfair Display", Georgia, serif;
  --body:    "Open Sans", system-ui, sans-serif;
  --accent:  "Raleway", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Spacing rhythm */
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --section: clamp(5rem, 12vw, 11rem);
  --maxw: 1400px;

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

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--body);
  color: var(--slate);
  background: var(--white);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--olive); color: var(--ink); }

/* ---------- Typographic primitives ---------- */
h1,h2,h3,h4 { font-family: var(--display); font-weight: 400; margin: 0; color: var(--navy); }

.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: .98;
  letter-spacing: .01em;
}

.eyebrow {
  font-family: var(--accent);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .32em;
  font-size: .72rem;
  /* leesbaar op lichte secties; donkere banden zetten dit hieronder terug op --olive */
  color: var(--olive-ink);
}

/* Skip-link: eerste tabstop op elke pagina */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  font-family: var(--accent); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; background: var(--ink); color: var(--white);
  padding: .9rem 1.4rem; border-radius: 0 0 var(--radius-ctl) 0;
}
.skip-link:focus { left: 0; }

.lead {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.7vw, 2.15rem);
  line-height: 1.42;
  color: var(--navy);
  letter-spacing: .005em;
}

.muted { color: #6b6b6b; color: color-mix(in srgb, var(--slate) 78%, transparent); }

/* ---------- Layout helpers ---------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.center { text-align: center; }

/* ============================================================
   IMAGE PLACEHOLDERS  (wireframe — fotografie nog te leveren)
   ============================================================ */
.ph {
  position: relative;
  overflow: hidden;
  background-color: var(--ink-2);
  background-image:
    repeating-linear-gradient(135deg,
      rgba(157,181,178,.07) 0 2px,
      transparent 2px 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}
.ph::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(157,181,178,.10), transparent 60%);
}
.ph.light {
  background-color: var(--silver);
  background-image:
    repeating-linear-gradient(135deg,
      rgba(29,53,87,.06) 0 2px,
      transparent 2px 14px);
}
.ph.light::before { background: radial-gradient(120% 90% at 30% 20%, rgba(29,53,87,.05), transparent 60%); }

/* ============================================================
   NAV  (segment pages)
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem var(--gutter);
  color: var(--white);
  transition: background .4s var(--ease), padding .4s var(--ease), color .4s var(--ease);
}
.nav.scrolled {
  background: rgba(11,20,32,.92);
  backdrop-filter: blur(10px);
  padding-block: .8rem;
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: .6rem; }
.brand { flex-shrink: 0; }
.brand .mark {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
}
.brand .seg {
  font-family: var(--accent);
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--olive);
  padding-left: .6rem;
  border-left: 1px solid var(--line);
}
.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  font-family: var(--accent);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .82;
  transition: opacity .25s, color .25s;
}
.nav-links a:hover { opacity: 1; color: var(--olive); }
.nav-right { display: flex; align-items: center; gap: 1.4rem; }

.lang {
  font-family: var(--accent);
  font-size: .72rem;
  letter-spacing: .18em;
  display: flex; gap: .35rem; align-items: center;
}
.lang button,
.lang a {
  background: none; border: none; color: inherit; cursor: pointer;
  font: inherit; opacity: .5; padding: 0; letter-spacing: inherit;
  text-decoration: none;
}
.lang button.on,
.lang a.on { opacity: 1; color: var(--olive); }
.lang span { opacity: .3; }

/* Buttons */
.btn {
  font-family: var(--accent);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .85rem 1.6rem;
  border: 1px solid currentColor;
  display: inline-flex; align-items: center; gap: .7rem;
  cursor: pointer; background: none; color: inherit;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--warm); border-color: var(--warm); color: var(--ink); }
.btn--solid { background: var(--olive); border-color: var(--olive); color: var(--ink); }
.btn--solid:hover { background: transparent; color: var(--white); border-color: var(--white); }
.btn--navy { background: var(--navy); border-color: var(--navy); color: var(--white); }
.btn--navy:hover { background: var(--warm); border-color: var(--warm); color: var(--ink); }

.menu-toggle { display: none; background: none; border: none; color: inherit; cursor: pointer; font-size: 1.3rem; line-height: 1; }

.mobile-drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: rgba(11,20,32,.98);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column; justify-content: center; gap: 1.8rem;
  padding: var(--gutter);
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
}
.mobile-drawer.open { transform: none; }
.mobile-drawer a {
  font-family: var(--display); color: var(--white); font-size: 2rem; letter-spacing: .01em;
}
.mobile-drawer a:last-child { font-family: var(--accent); font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--olive); margin-top: 1rem; }
.mobile-drawer .drawer-cta {
  font-family: var(--accent); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  align-self: flex-start; margin-top: .6rem; color: var(--ink);
  background: var(--warm); border: 1px solid var(--warm); border-radius: var(--radius-ctl);
  padding: .9rem 1.6rem; font-weight: 600;
}
.mobile-drawer .drawer-cta:hover { background: var(--warm-2); border-color: var(--warm-2); color: var(--white); }

/* ============================================================
   HERO  (segment pages — full-bleed cinematic)
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
  color: var(--white);
  overflow: hidden;
}
.hero .ph { position: absolute; inset: 0; min-height: 0; align-items: flex-start; justify-content: center; }
.hero .hero-inner {
  position: relative;
  padding: clamp(7rem, 13vh, 9rem) var(--gutter) clamp(6.5rem, 12vh, 9rem);
  max-width: var(--maxw); margin-inline: auto; width: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.hero h1 {
  color: var(--white);
  font-size: clamp(2.7rem, 7.2vw, 6.6rem);
  line-height: 1.05;
  letter-spacing: .015em;
  max-width: 20ch;
  margin-inline: auto;
}
.hero h1 .thin { font-weight: 300; }
.hero h1 em { font-style: italic; color: var(--olive); }
.hero-sub {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .03em;
  font-size: clamp(1.02rem, 1.7vw, 1.45rem);
  line-height: 1.6;
  margin: 1.9rem auto 0;
  color: rgba(234,234,234,.92);
  max-width: 30ch;
}
.hero-cta { margin-top: 2.6rem; display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

/* credential row — Clos des Sens award-strip equivalent */
.hero-trust {
  position: absolute; left: 0; right: 0; bottom: clamp(1.6rem, 4vh, 3rem);
  display: flex; justify-content: center; align-items: center;
  gap: clamp(1rem, 3.5vw, 3rem); flex-wrap: wrap;
  padding-inline: var(--gutter);
  font-family: var(--accent); text-transform: uppercase;
  letter-spacing: .28em; font-size: clamp(.58rem, .85vw, .72rem);
  color: rgba(234,234,234,.62);
}
/* Vet zonder namaak.
   De site laadt van elke familie maximaal gewicht 600. <strong> en <b> vragen
   standaard om 700, dat nergens bestaat; de browser rekt dan zelf de letters
   uit tot iets wat op vet lijkt. Dat oogt vlekkerig, vooral in Playfair.
   172 plekken op de site raakt dit. Door ze op 600 te zetten gebruiken ze de
   letter die er werkelijk is. */
strong, b { font-weight: 600; }

.hero-trust b { font-weight: 500; color: rgba(234,234,234,.82); }
.hero-trust .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--olive); opacity: .8; }

@media (max-height: 760px) {
  .hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
  .hero-sub { margin-top: 1.3rem; font-size: clamp(.85rem, 1.4vw, 1rem); line-height: 1.75; }
  .hero-cta { margin-top: 1.7rem; }
  .hero-inner { padding-block: clamp(5rem, 10vh, 7rem) clamp(4rem, 8vh, 6rem); }
  .hero-trust { display: none; }
}

/* ============================================================
   INTRO statement
   ============================================================ */
.intro { text-align: center; max-width: 60ch; margin-inline: auto; }
.intro .lead { margin-top: 1.4rem; }
.rule { width: 56px; height: 1px; background: var(--olive); margin: 0 auto; }

/* ============================================================
   BRAND / CRAFT STATEMENT  + About teaser
   ============================================================ */
.statement { text-align: center; }
.statement .wrap { max-width: 68ch; }
.statement .lead { margin-top: 1.3rem; }
.statement .craft {
  margin: 1.6rem auto 0; max-width: 56ch;
  color: #5c5c5c;
  color: color-mix(in srgb, var(--slate) 85%, transparent);
}
.about-link { margin-top: 2.6rem; display: flex; justify-content: center; }
.about-link a {
  font-family: var(--accent); font-size: .74rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--navy);
  border-bottom: 1px solid var(--olive); padding-bottom: .35rem;
  display: inline-flex; gap: .6rem; align-items: center;
  transition: gap .3s var(--ease);
}
.about-link a:hover { gap: 1.1rem; }

/* ============================================================
   SAMPLE MENU DIRECTIONS  (illustrative — not actual menus)
   ============================================================ */
/* Op donkere banden is --olive juist wél leesbaar (8.5:1) — daar zetten we terug */
.hero .eyebrow,
.proc-band .eyebrow,
.menu-dir .eyebrow,
.quote .eyebrow,
.about-cine .eyebrow,
.footer .eyebrow { color: var(--olive); }

.menu-dir { background: var(--ink); color: var(--white); }
.menu-dir .eyebrow { color: var(--olive); }
.menu-dir h2 { color: var(--white); }
.menu-dir .note {
  font-family: "JetBrains Mono", monospace; font-size: .68rem;
  letter-spacing: .04em; color: rgba(234,234,234,.5); margin-top: 1rem;
}
.md-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-top: 3.2rem;
}
.md-item { background: var(--ink); padding: clamp(2rem, 3.5vw, 3rem); }
.md-item .n { font-family: var(--display); font-style: italic; font-size: 1.1rem; color: var(--olive); }
.md-item h3 { color: var(--white); font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-top: 1rem; line-height: 1.1; }
.md-item p { margin: 1rem 0 0; font-size: .95rem; color: rgba(234,234,234,.74); max-width: 42ch; }
.md-item .tags { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.md-item .tags span {
  font-family: var(--accent); text-transform: uppercase; letter-spacing: .16em;
  font-size: .62rem; color: var(--olive);
}

/* ============================================================
   FAQ  (native details/summary — robust, no JS)
   ============================================================ */
.faq-list { max-width: 860px; margin: 3.2rem auto 0; border-top: 1px solid var(--line-dark); }
.faq details { border-bottom: 1px solid var(--line-dark); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.5rem 0;
  display: flex; justify-content: space-between; gap: 2rem; align-items: center;
  font-family: var(--display); font-size: clamp(1.1rem, 2vw, 1.45rem); color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { color: var(--olive); font-size: 1.5rem; line-height: 1; flex-shrink: 0; transition: transform .3s var(--ease); }
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq .answer { padding: 0 0 1.7rem; max-width: 64ch; color: var(--slate); }
.faq .answer a { color: var(--navy); border-bottom: 1px solid var(--olive); }

/* ============================================================
   NEWSLETTER band (landing pages)
   ============================================================ */
.news-band { background: var(--silver); }
.news-band .wrap { max-width: 760px; text-align: center; }
.news-band h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--navy); }
.news-band p { margin: .8rem auto 0; max-width: 46ch; }
.news-band .news { max-width: 480px; margin: 2rem auto 0; border-color: rgba(29,53,87,.3); }
.news-band .news input { color: var(--navy); }
.news-band .news input::placeholder { color: rgba(74,74,74,.8); }
.news-band .news button { color: var(--ink); }  /* navy op messing = 3.98:1 */

/* ============================================================
   SERVICES  (alternating full-width image/text blocks)
   ============================================================ */
.svc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 58vh;
}
.svc .ph { min-height: 44vh; }
.svc-body {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 6vw, 6rem);
  background: var(--white);
}
.svc-media { overflow: hidden; }
.svc-media .ph { transition: transform 1.5s var(--ease), filter 1.5s var(--ease); }
.svc:hover .svc-media .ph { transform: scale(1.06); filter: brightness(1.08); }
.svc:nth-child(even) .svc-media { order: 2; }
.svc h3 { font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.05; }
.svc-body p { margin: 1.3rem 0 0; max-width: 46ch; }
.svc-cta { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }
.svc-cta a {
  font-family: var(--accent); font-size: .74rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--navy);
  border-bottom: 1px solid var(--olive); padding-bottom: .35rem;
  display: inline-flex; gap: .6rem; align-items: center;
  transition: gap .3s var(--ease);
}
.svc-cta a:hover { gap: 1.1rem; }
.svc-cta a.svc-primary {
  color: var(--white); background: var(--navy); border-bottom: 0;
  padding: .8rem 1.3rem; border-radius: var(--radius-ctl);
  transition: gap .3s var(--ease), background .25s, transform .2s var(--ease);
}
.svc-cta a.svc-primary:hover { background: var(--warm); color: var(--ink); transform: translateY(-2px); }

/* ============================================================
   PROCESS / werkwijze
   ============================================================ */
.proc-band { background: var(--ink); color: var(--white); }
.proc-band .eyebrow { color: var(--olive); }
.proc-band h2 { color: var(--white); }
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; margin-top: 3.5rem;
  background: var(--line);
  border: 1px solid var(--line);
}
.step { background: var(--ink); padding: 2.4rem 1.8rem; }
.step .n {
  font-family: var(--display); font-style: italic; font-size: 1.4rem;
  color: var(--olive); margin-bottom: 1.4rem;
}
.step h4 { color: var(--white); font-size: 1.25rem; letter-spacing: .01em; }
.step p { margin: .8rem 0 0; font-size: .92rem; color: rgba(234,234,234,.7); }

/* ============================================================
   CREDIBILITY / craft band
   ============================================================ */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-dark); border-block: 1px solid var(--line-dark); }
.stat { padding: 3rem var(--gutter); text-align: center; background: var(--white); }
.stat .big { font-family: var(--display); font-size: clamp(2.6rem, 5vw, 4rem); color: var(--navy); line-height: 1; }
.stat .lbl { font-family: var(--accent); text-transform: uppercase; letter-spacing: .2em; font-size: .72rem; color: var(--slate); margin-top: 1rem; }

/* ============================================================
   QUOTE / inquiry form
   ============================================================ */
.quote { background: var(--navy); color: var(--white); }
.quote h2 { color: var(--white); font-size: clamp(2rem, 4.5vw, 3.4rem); }
.quote .eyebrow { color: var(--olive); }
.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; margin-top: 3rem; }
.quote-aside p { color: rgba(234,234,234,.8); max-width: 40ch; }
.contact-line { display: flex; flex-direction: column; gap: 1rem; margin-top: 2.5rem; }
.contact-line a { font-family: var(--accent); letter-spacing: .12em; font-size: .9rem; display: flex; gap: .8rem; align-items: center; }
.contact-line a span { color: var(--olive); font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; width: 5.5rem; }

.form { display: grid; gap: 1.5rem; }
.field { display: grid; gap: .5rem; }
.field label { font-family: var(--accent); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--olive-ink); }
/* Op de donkere offertesectie mag het label wél de lichte olijftint hebben. */
.quote .field label, .quote-form .field label { color: var(--olive); }
.field input, .field select, .field textarea {
  background: transparent; border: none; border-bottom: 1px solid var(--line);
  color: var(--white); font-family: var(--body); font-size: 1rem;
  padding: .7rem 0; width: 100%;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(234,234,234,.66); }
/* Alleen de randkleur veranderen is een te zwakke focusaanwijzing: wie met het
   toetsenbord werkt moet zonder twijfel zien waar hij is, en olijf op crème
   haalt de contrasteis niet. De rand blijft als sfeer, de outline doet het werk. */
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--olive);
  outline: 3px solid var(--warm-ink);
  outline-offset: 2px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--olive); }
.field select option { color: var(--ink); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form .btn { justify-self: start; margin-top: .6rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--ink); color: var(--white); padding-block: clamp(4rem, 8vw, 7rem) 2.5rem; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 2.5rem; }
.footer .mark { font-family: var(--display); font-size: 1.4rem; letter-spacing: .12em; text-transform: uppercase; }
.footer .tag { font-family: var(--accent); letter-spacing: .26em; text-transform: uppercase; font-size: .66rem; color: var(--olive); margin-top: .8rem; }
.footer h2 { font-family: var(--accent); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--olive); margin: 0 0 1.3rem; font-weight: 600; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.footer ul a { font-size: .9rem; color: rgba(234,234,234,.82); transition: color .25s; }
.footer ul a:hover { color: var(--white); }
.news { display: flex; gap: .6rem; border-bottom: 1px solid var(--line); padding-bottom: .6rem; margin-top: 1rem; }
.news input { background: none; border: none; color: var(--white); flex: 1; font-family: var(--body); padding: .4rem 0; }
.news input:focus-visible { outline: 3px solid var(--warm-ink); outline-offset: 2px; }
.news input::placeholder { color: rgba(234,234,234,.66); }
.news button { background: none; border: none; color: var(--olive); cursor: pointer; font-family: var(--accent); letter-spacing: .2em; font-size: .7rem; text-transform: uppercase; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--line); }
.footer-bottom, .footer-bottom a { font-family: "JetBrains Mono", monospace; font-size: .68rem; letter-spacing: .03em; color: rgba(234,234,234,.72); }
.footer-bottom a:hover { color: var(--olive); }
.social { display: flex; gap: 1.4rem; }

/* ============================================================
   MOTION
   Het oude scroll-reveal-systeem is verwijderd: het werd elders met
   !important uitgeschakeld, dus het draaide nooit. Content is nu
   direct zichtbaar en er loopt geen JS-machinerie meer voor.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .svc-media .ph, .svc:hover .svc-media .ph { transition: none !important; transform: none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .menu-toggle { display: inline-flex; }
  .nav .btn { display: none; }
}
@media (max-width: 900px) {
  .svc { grid-template-columns: 1fr; min-height: 0; }
  .svc:nth-child(even) .svc-media { order: 0; }
  .svc .ph { min-height: 56vw; }
  .steps { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr; }
  .quote-grid { grid-template-columns: 1fr; }
  .md-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
}


/* ============================================================
   PRINT  (o.a. het voorstel uit de boekmodule wordt geprint/opgeslagen)
   ============================================================ */
@media print {
  *, *::before, *::after {
    background: transparent !important; color: #000 !important;
    box-shadow: none !important; text-shadow: none !important;
  }
  body { font-size: 11pt; line-height: 1.45; background: #fff !important; }
  .nav, .mobile-drawer, .menu-toggle, .hero-video, .hero-poster, .hero-scrim, .ph,
  .wa-float, .to-top, .cc-consent, .gift-pop, .skip-link,
  .news-band, .footer .social, .svc-media { display: none !important; }
  .hero { min-height: auto !important; padding-block: 0 !important; }
  .hero h1, .hero-inner .display { color: #000 !important; font-size: 20pt !important; }
  .section, .svc { padding-block: .8rem !important; min-height: 0 !important; }
  .svc { grid-template-columns: 1fr !important; }
  h1, h2, h3, h4 { page-break-after: avoid; }
  p, li { page-break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  .footer { padding-block: 1rem !important; border-top: 1px solid #ccc; }
}


/* ====================================================================
   improved.css
   ==================================================================== */

/* Culinary Crew — improved production polish */

:root {
  --cream: #f7f3eb;
  /* Antiek messing i.p.v. koper: geeft de gouden associatie zonder de
     tackiness van echt metallic goud (dat als platte kleur 1.9:1 haalt).
     Ink op --warm = 5.96:1, dus knoppen blijven leesbaar. */
  --warm: #B08D4F;
  --warm-2: #9A7C3C;
  --green-deep: #26392f;
  --card: #ffffff;
  --radius: var(--radius-card);
}

body {
  background: var(--cream);
}

:focus-visible {
  outline: 3px solid var(--warm-ink);
  outline-offset: 3px;
}

.btn,
.gw-enter,
.news button,
.quote-form button {
  border-radius: var(--radius-ctl);
  font-weight: 600;
}

.btn:hover,
.news button:hover,
.quote-form button:hover {
  transform: translateY(-1px);
}

.nav {
  text-shadow: 0 1px 20px rgba(0, 0, 0, .22);
}

.nav.scrolled {
  background: rgba(11, 20, 32, .96);
}

.brand .mark,
.gw-wordmark .mark {
  letter-spacing: .1em;
}

.ph {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.ph::before {
  background:
    linear-gradient(180deg, rgba(11, 20, 32, .08), rgba(11, 20, 32, .28)),
    radial-gradient(110% 90% at 30% 20%, rgba(157, 181, 178, .14), transparent 58%);
}


/* Inline confirmation shown after a form is submitted via AJAX */
.form-success {
  padding: 2rem 1.75rem;
  border: 1px solid rgba(157, 181, 178, .45);
  border-radius: var(--radius-ctl);
  background: rgba(157, 181, 178, .08);
  font-size: 1.05rem;
  line-height: 1.6;
}

.hero .ph::before {
  background:
    linear-gradient(90deg, rgba(11, 20, 32, .76) 0%, rgba(11, 20, 32, .42) 45%, rgba(11, 20, 32, .18) 100%),
    linear-gradient(180deg, rgba(11, 20, 32, .38) 0%, rgba(11, 20, 32, .08) 42%, rgba(11, 20, 32, .82) 100%);
}

body[data-screen-label="Particulier"] .hero .ph,
body[data-screen-label="Particulier"] .svc:nth-of-type(1) .ph {
  background-image: url("hero-particulier.webp");
}

body[data-screen-label="Zakelijk"] .hero .ph,
body[data-screen-label="Zakelijk"] .svc:nth-of-type(1) .ph {
  background-image: url("hero-zakelijk.webp");
}

body[data-screen-label="Horeca"] .hero .ph,
body[data-screen-label="Horeca"] .svc:nth-of-type(1) .ph {
  background-image: url("hero-horeca.webp");
}

body[data-screen-label="Over ons"] .hero .ph,
body[data-screen-label="Over ons"] .svc .ph,
.statement .ph,
.craft .ph {
  background-image: url("hero-workshop.webp");
}

body[data-screen-label="Particulier"] .svc:nth-of-type(2) .ph,
body[data-screen-label="Particulier"] .svc:nth-of-type(4) .ph,
body[data-screen-label="Zakelijk"] .svc:nth-of-type(2) .ph {
  background-image: url("hero-zakelijk.webp");
}

body[data-screen-label="Particulier"] .svc:nth-of-type(3) .ph,
body[data-screen-label="Horeca"] .svc:nth-of-type(2) .ph {
  background-image: url("hero-workshop.webp");
}

.gw-panel:nth-child(1) .ph {
  background-image: url("hero-particulier.webp");
}

.gw-panel:nth-child(2) .ph {
  background-image: url("hero-zakelijk.webp");
}

.gw-panel:nth-child(3) .ph {
  background-image: url("hero-horeca.webp");
}

.gw-panel .ph {
  filter: grayscale(.18) brightness(.62) saturate(1.05);
}

.gw-panel:hover .ph,
.gw-panel:focus-within .ph {
  filter: grayscale(0) brightness(.96) saturate(1.05);
}

.hero {
  min-height: min(100vh, 980px);
  min-height: min(100svh, 980px);
  align-items: flex-start;
  text-align: left;
}

.hero-inner {
  width: min(100%, 1240px);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero-inner .display {
  max-width: 11ch;
  color: var(--white);
  text-wrap: balance;
}

.hero-sub {
  max-width: 36rem;
  color: rgba(255, 255, 255, .86);
}

.hero-cta {
  justify-content: flex-start;
}

.hero-trust {
  right: var(--gutter);
  left: auto;
  width: auto;
  max-width: min(86vw, 760px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  background: rgba(11, 20, 32, .42);
  backdrop-filter: blur(12px);
}

.lead {
  text-wrap: balance;
}

.svc {
  align-items: stretch;
  background: var(--card);
}

.svc-media .ph {
  min-height: clamp(360px, 52vw, 680px);
}

.svc-body {
  align-self: center;
}

.faq,
.news-band {
  background: var(--cream);
}

.stat,
.faq details,
.quote-form,
.quote-aside {
  border-radius: var(--radius);
  box-shadow: 0 24px 70px rgba(11, 20, 32, .08);
}

.stat,
.faq details {
  background: rgba(255, 255, 255, .74);
}

.menu-dir,
.proc-band {
  background:
    radial-gradient(circle at 18% 10%, rgba(157, 181, 178, .18), transparent 30%),
    linear-gradient(135deg, var(--ink), var(--green-deep));
}

.menu-dir .md-item,
.proc-band .step {
  border-radius: var(--radius);
  background: rgba(11, 20, 32, .74);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .18);
}

.quote {
  background:
    radial-gradient(circle at 80% 10%, rgba(201, 135, 93, .18), transparent 32%),
    linear-gradient(135deg, var(--ink), var(--green-deep));
}

.quote .display,
.quote h2 {
  color: var(--white);
}

.footer {
  background:
    linear-gradient(180deg, #0b1420 0%, #17241f 100%);
}

/* Tweede nieuwsbrief-aanmelding in de footer verbergen (de witte sectie volstaat) */
.footer .news { display: none; }

/* Cookie consent banner */
.cc-consent {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: var(--z-consent);
  max-width: 700px; margin-inline: auto;
  background: rgba(11, 20, 32, .97); color: var(--white);
  border: 1px solid rgba(157, 181, 178, .3); border-radius: var(--radius-card);
  padding: 1.1rem 1.3rem; display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(14px); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.cc-consent.show { opacity: 1; transform: none; }
.cc-consent .cc-text { margin: 0; flex: 1 1 280px; font-size: .86rem; line-height: 1.55; color: rgba(234, 234, 234, .85); }
.cc-consent .cc-text a { color: var(--olive); text-decoration: underline; }
.cc-consent .cc-actions { display: flex; gap: .6rem; flex: 0 0 auto; }
.cc-consent button {
  font-family: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem;
  padding: .62rem 1.1rem; border-radius: var(--radius-ctl); cursor: pointer; border: 1px solid; transition: filter .3s, background .3s;
}
/* Alle drie de knoppen zijn identiek opgemaakt. Weigeren was hiervoor een
   doorzichtig randje en accepteren een gevulde messingkleurige knop met vette
   letters; dat is precies het duwtje waar de Autoriteit Persoonsgegevens op
   handhaaft. Toestemming die je zo verkrijgt is niet vrij gegeven. */
.cc-consent .cc-knop {
  background: var(--warm); color: var(--ink); border-color: var(--warm); font-weight: 600;
}
.cc-consent .cc-knop:hover { background: var(--warm-2); color: var(--white); }

.cc-consent .cc-body { flex: 1 1 280px; }
.cc-consent .cc-keuzes { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: .7rem; }
.cc-consent .cc-keuze { display: flex; align-items: center; gap: .45rem; cursor: pointer;
  font-size: .8rem; color: rgba(234, 234, 234, .92); }
.cc-consent .cc-keuze input { width: 1rem; height: 1rem; accent-color: var(--warm); cursor: pointer; }
@media (max-width: 560px) {
  .cc-consent { flex-direction: column; align-items: stretch; gap: .9rem; }
  .cc-consent .cc-actions { flex-wrap: wrap; }
  .cc-consent .cc-actions .cc-knop { flex: 1 1 auto; }
}

.news input,
.quote-form input,
.quote-form textarea,
.quote-form select {
  border-radius: var(--radius-ctl);
}

.news button,
.quote-form button,
.btn--solid,
.btn--navy:hover {
  background: var(--warm);
  border-color: var(--warm);
  color: var(--ink);
}

.news button:hover,
.quote-form button:hover,
.btn--solid:hover {
  background: var(--warm-2);
  border-color: var(--warm-2);
  color: var(--white);
}

@media (max-width: 980px) {
  .hero {
    text-align: center;
  }

  .hero-inner {
    display: grid;
    justify-items: center;
  }

  .hero-inner .display,
  .hero-sub {
    max-width: 100%;
  }

  .hero-cta {
    justify-content: center;
  }

  .hero-trust {
    right: var(--gutter);
    left: var(--gutter);
    max-width: none;
  }
}

@media (max-width: 820px) {
  .gw-panel {
    min-height: 58vh;
    min-height: 58svh;
  }

  .gw-panel .ph {
    filter: brightness(.74) saturate(1.05);
  }

  .nav {
    color: var(--white);
    background: rgba(11, 20, 32, .84);
    backdrop-filter: blur(10px);
  }

  .brand {
    align-items: flex-start;
    flex-direction: column;
    gap: .25rem;
  }

  .brand .seg {
    padding-left: 0;
    border-left: 0;
  }

  .menu-toggle {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: var(--radius-ctl);
  }

  .hero {
    min-height: 86vh;
    min-height: 86svh;
  }

  .hero-inner {
    padding-top: 8.5rem;
    padding-bottom: 8rem;
  }

  .hero-inner .display {
    font-size: clamp(3rem, 14vw, 4.8rem);
  }

  .hero-sub {
    font-size: 1rem;
  }

  .hero-trust {
    display: grid;
    grid-template-columns: 1fr;
    gap: .35rem;
    bottom: 1rem;
    font-size: .78rem;
  }

  .hero-trust .dot {
    display: none;
  }

  .svc-media .ph {
    min-height: 320px;
    aspect-ratio: 4 / 3;
    width: 100%;
    transform: none !important;
  }

  .svc:hover .svc-media .ph {
    transform: none;
    filter: none;
  }

  .svc-body {
    padding-block: 2.2rem;
  }
}

@media (max-width: 560px) {
  .gw-head {
    align-items: flex-start;
  }

  .gw-wordmark .mark {
    font-size: 1rem;
  }

  .gw-wordmark .tag {
    letter-spacing: .18em;
  }
}

/* Werkwijze / about-cine / menu-showcase stonden hier dubbel; redesign.css is
   nu de enige bron. Dat haalt ook de dubbele hairline bij de cijfers weg. */

/* Systematische koptekst-schaal */
.h-sec { font-size: clamp(1.8rem, 4vw, 3rem); margin-top: 1rem; }
.h-lg  { font-size: clamp(2rem, 5vw, 3.4rem); margin-top: 1rem; }


/* ====================================================================
   redesign.css
   ==================================================================== */

/* Culinary Crew — redesign sections (separate file to bypass cached improved.css) */

/* === Werkwijze: editorial giant-numeral flow (segment pages) === */
.proc-band { background: var(--ink); }
.steps--flow { background:none; border:0; box-shadow:none; grid-template-columns:repeat(4,1fr); gap:clamp(1.6rem,3vw,3rem); }
.steps--flow .step { background:none; box-shadow:none; border-radius:0; padding:0; }
.steps--flow .step .n { display:inline-block; position:relative; margin:0 0 1.4rem; padding-bottom:1.1rem; width:auto; height:auto; font-family:var(--display); font-weight:500; font-size:clamp(4.5rem,7vw,7.5rem); line-height:.8; color:transparent; -webkit-text-stroke:1px rgba(157,181,178,.45); background:none; }
.steps--flow .step .n::after { content:""; position:absolute; left:0; bottom:0; width:34px; height:1px; background:var(--olive); }
.steps--flow .step h4 { margin:0; }
.steps--flow .step p { margin:.7rem 0 0; }
@media (max-width: 900px){ .steps--flow { grid-template-columns:1fr 1fr; } }
@media (max-width: 560px){ .steps--flow { grid-template-columns:1fr; } }

/* === Cinematic 'Over Culinary Crew' band (segment pages) === */
.about-cine { position:relative; min-height:clamp(560px,82vh,800px); display:flex; align-items:center; color:var(--white); overflow:hidden; }
.about-cine .bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.about-cine::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(11,20,32,.92) 0%, rgba(11,20,32,.72) 42%, rgba(11,20,32,.34) 100%), linear-gradient(180deg, rgba(11,20,32,.45), rgba(11,20,32,.55)); }
.about-cine .wrap { position:relative; z-index:2; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); width:100%; padding-block:clamp(3rem,7vw,6rem); }
.about-cine .eyebrow { color:var(--olive); }
.about-cine .cine-statement { font-family:var(--display); font-weight:400; font-size:clamp(2rem,4.4vw,3.6rem); line-height:1.18; max-width:20ch; margin:1.2rem 0 0; color:var(--white); }
.about-cine .cine-craft { margin-top:1.6rem; max-width:52ch; color:rgba(234,234,234,.82); line-height:1.85; font-size:1.02rem; }
.about-cine .cine-link { margin-top:1.6rem; }
.about-cine .cine-link a { font-family:var(--accent); letter-spacing:.16em; text-transform:uppercase; font-size:.74rem; color:var(--white); text-decoration:none; border-bottom:1px solid var(--olive); padding-bottom:.3rem; }

/* === Menu-richtingen: interactive showcase (variant B) === */
.menu-show { color:var(--white); padding-block:clamp(4.5rem,10vw,8rem); background:var(--ink); }
.menu-show .head { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.menu-show .ms-eyebrow { font-family:var(--accent); text-transform:uppercase; letter-spacing:.3em; font-size:.72rem; color:var(--olive); }
.menu-show h2 { font-family:var(--display); font-weight:400; color:#fff; font-size:clamp(1.8rem,3.6vw,2.9rem); line-height:1.06; margin:1.1rem 0 0; max-width:18ch; }
.menu-show .ms-note { font-family:var(--accent); color:rgba(234,234,234,.5); font-size:.78rem; letter-spacing:.04em; margin-top:1.2rem; max-width:42ch; }
.menu-show .ms-grid { max-width:var(--maxw); margin:clamp(2.4rem,5vw,3.6rem) auto 0; padding-inline:var(--gutter); display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:stretch; }
.menu-show .ms-stage { position:relative; min-height:clamp(420px,66vh,620px); overflow:hidden; background:var(--ink-2); border-radius:var(--radius); }
.menu-show .ms-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04); transition:opacity .8s var(--ease), transform 1.4s var(--ease); }
.menu-show .ms-stage img.on { opacity:1; transform:scale(1); }
.menu-show .ms-stage::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(11,20,32,.5)); }
.menu-show .ms-menu { display:flex; flex-direction:column; justify-content:center; border-top:1px solid var(--line); }
.menu-show .ms-item { padding:clamp(1.1rem,2vw,1.6rem) 0; border-bottom:1px solid var(--line); cursor:pointer; }
.menu-show .ms-item .ms-top { display:flex; align-items:baseline; gap:1rem; }
.menu-show .ms-item .ms-num { font-family:var(--display); font-style:italic; color:rgba(157,181,178,.6); font-size:1.3rem; transition:color .4s var(--ease); }
.menu-show .ms-item h3 { font-family:var(--display); font-weight:400; color:rgba(255,255,255,.82); font-size:clamp(1.2rem,1.8vw,1.6rem); margin:0; transition:color .4s var(--ease); }
.menu-show .ms-item p { margin:0; color:rgba(234,234,234,.7); font-size:.94rem; line-height:1.6; max-height:0; opacity:0; overflow:hidden; transition:max-height .55s var(--ease), opacity .5s, margin .55s; max-width:50ch; }
.menu-show .ms-item .ms-meta { display:block; font-family:var(--accent); text-transform:uppercase; letter-spacing:.18em; font-size:.6rem; color:var(--olive); max-height:0; opacity:0; overflow:hidden; transition:max-height .55s var(--ease), opacity .5s, margin .55s; }
.menu-show .ms-item.active .ms-num { color:#fff; }
.menu-show .ms-item.active h3 { color:var(--olive); }
.menu-show .ms-item.active p { max-height:160px; opacity:1; margin:.7rem 0 0 2.3rem; }
.menu-show .ms-item.active .ms-meta { max-height:40px; opacity:1; margin:.8rem 0 0 2.3rem; }
@media (max-width: 900px){
  .menu-show .ms-grid { grid-template-columns:1fr; }
  .menu-show .ms-stage { min-height:46vh; order:-1; }
  .menu-show .ms-item p, .menu-show .ms-item .ms-meta { max-height:200px; opacity:1; }
  .menu-show .ms-item p { margin:.7rem 0 0 2.3rem; }
  .menu-show .ms-item .ms-meta { margin:.6rem 0 0 2.3rem; }
}

/* === FAQ: editorial full-width hairline accordion (variant A) === */
.faq-list { max-width:none; margin-top:clamp(2.6rem,5vw,4.5rem); border-top:1px solid rgba(29,53,87,.16); }
.faq details { border-bottom:1px solid rgba(29,53,87,.16); background:none; box-shadow:none; border-radius:0; margin:0; padding:0; }
.faq summary { display:flex; justify-content:space-between; align-items:center; gap:2rem; padding:clamp(1.4rem,2.3vw,2rem) 0; cursor:pointer; font-family:var(--display); font-weight:400; font-size:clamp(1.15rem,1.7vw,1.55rem); color:var(--navy); }
.faq summary .plus { position:relative; width:18px; height:18px; font-size:0; color:transparent; flex-shrink:0; transition:transform .45s var(--ease); }
.faq summary .plus::before, .faq summary .plus::after { content:""; position:absolute; background:var(--navy); }
.faq summary .plus::before { left:0; right:0; top:50%; height:1px; transform:translateY(-50%); }
.faq summary .plus::after { top:0; bottom:0; left:50%; width:1px; transform:translateX(-50%); transition:opacity .3s; }
.faq details[open] summary .plus { transform:rotate(90deg); }
.faq details[open] summary .plus::after { opacity:0; }
.faq .answer { max-width:72ch; padding:0 0 clamp(1.5rem,2.3vw,2rem); color:rgba(29,53,87,.72); line-height:1.85; font-size:1.04rem; background:none; }

/* === Nieuwsbrief: eigen witte sectie onder de FAQ === */
.news-band { background:#ffffff; }

/* === Particulier finetuning === */
/* trust-balk alleen weg op particulier (hero-eyebrow-markup is verwijderd) */
body[data-screen-label="Particulier"] .hero-trust { display:none; }
body[data-screen-label="Zakelijk"] .hero-trust { display:none; }
body[data-screen-label="Horeca"] .hero-trust { display:none; }

/* diensten: subtiel vanaf-prijsanker */
.svc-price { font-family:var(--accent); text-transform:uppercase; letter-spacing:.14em; font-size:.78rem; font-weight:600; color:var(--warm-ink); margin:1.5rem 0 0; }
/* Afbakening onder een tarief: wat er niet onder valt. Rustiger dan de
   prijsregel zodat het die niet beconcurreert, maar wel gelezen vóór het
   aanvragen. --slate is de gewone bodykleur en haalt contrast op crème. */
.svc-note { font-size:.88rem; line-height:1.55; color:var(--slate); margin:.5rem 0 0; max-width:46ch; }

/* === Cadeaubon-pagina (minimaal: hero + bon-tegels) === */
.gc-hero { position:relative; min-height:clamp(520px,82vh,780px); display:flex; align-items:flex-end; color:var(--white); overflow:hidden; }
.gc-hero .bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.gc-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,20,32,.5) 0%, rgba(11,20,32,.32) 38%, rgba(11,20,32,.92) 100%); }
.gc-hero .wrap { position:relative; z-index:1; max-width:var(--maxw); margin-inline:auto; padding:0 var(--gutter) clamp(3.5rem,7vw,6rem); width:100%; }
.gc-hero .eyebrow, .gc-options .eyebrow { font-family:var(--accent); text-transform:uppercase; letter-spacing:.3em; font-size:.72rem; color:var(--olive); }
.gc-hero h1 { font-family:var(--display); font-weight:400; font-size:clamp(2.4rem,5.5vw,4.4rem); line-height:1.04; margin:1.1rem 0 0; max-width:16ch; color:var(--white); }
.gc-hero p { margin-top:1.4rem; max-width:54ch; color:rgba(234,234,234,.85); line-height:1.75; font-size:1.05rem; }
.gc-options { background:var(--ink); color:var(--white); padding-block:clamp(4.5rem,10vw,8rem); }
.gc-options .wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.gc-options h2 { font-family:var(--display); font-weight:400; color:var(--white); font-size:clamp(1.8rem,3.4vw,2.7rem); margin:1rem 0 clamp(2.4rem,5vw,3.5rem); }
.gc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.gc-card { background:var(--ink); padding:clamp(1.8rem,2.6vw,2.6rem); display:flex; flex-direction:column; transition:background .5s var(--ease); }
.gc-card:hover { background:rgba(157,181,178,.06); }
.gc-card .amount { font-family:var(--display); font-weight:400; font-size:clamp(2.2rem,3.2vw,3rem); color:var(--white); line-height:1; }
.gc-card .gc-note { margin:.9rem 0 0; color:rgba(234,234,234,.7); font-size:.93rem; line-height:1.55; flex:1; }
.gc-card .btn-buy { margin-top:1.8rem; text-align:center; background:var(--warm); color:var(--ink); font-family:var(--accent); text-transform:uppercase; letter-spacing:.12em; font-size:.74rem; font-weight:600; padding:.85rem 1rem; border-radius:var(--radius-ctl); text-decoration:none; transition:background .3s, color .3s; }
.gc-card .btn-buy:hover { background:var(--warm-2); color:var(--white); }

/* === Cadeaubon pop-up === */
.gift-pop[hidden] { display:none; }
.gift-pop { position:fixed; inset:0; z-index:var(--z-modal,1100); display:flex; align-items:center; justify-content:center; padding:1.5rem; opacity:0; transition:opacity .35s var(--ease); }
.gift-pop.open { opacity:1; }
.gift-pop-overlay { position:absolute; inset:0; background:rgba(11,20,32,.72); backdrop-filter:blur(3px); }
.gift-pop-card { position:relative; z-index:1; max-width:440px; width:100%; background:var(--ink); color:var(--white); border:1px solid rgba(157,181,178,.3); border-radius:var(--radius-card); padding:clamp(2rem,4vw,2.8rem); box-shadow:0 40px 100px rgba(0,0,0,.5); transform:translateY(16px); transition:transform .4s var(--ease); text-align:center; }
.gift-pop.open .gift-pop-card { transform:none; }
.gift-pop-x { position:absolute; top:.8rem; right:1rem; background:none; border:0; color:rgba(255,255,255,.6); font-size:1.7rem; line-height:1; cursor:pointer; transition:color .3s; }
.gift-pop-x:hover { color:#fff; }
.gift-pop .eyebrow { font-family:var(--accent); text-transform:uppercase; letter-spacing:.3em; font-size:.7rem; color:var(--olive); }
.gift-pop h3 { font-family:var(--display); font-weight:400; font-size:clamp(1.4rem,2.4vw,1.95rem); line-height:1.15; margin:.9rem 0 0; color:#fff; }
.gift-pop .gp-text { margin:.9rem 0 0; color:rgba(234,234,234,.72); font-size:.95rem; line-height:1.6; }
.gift-pop .gp-amounts { display:flex; gap:.6rem; justify-content:center; margin-top:1.7rem; flex-wrap:wrap; }
.gift-pop .gp-amt { font-family:var(--display); font-size:1.25rem; color:var(--ink); background:var(--warm); border-radius:var(--radius-ctl); padding:.7rem 1.15rem; text-decoration:none; transition:background .3s, color .3s; }
.gift-pop .gp-amt:hover { background:var(--warm-2); color:#fff; }
.gift-pop .gp-custom { display:inline-block; margin-top:1.4rem; font-family:var(--accent); text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; color:var(--olive); text-decoration:none; border-bottom:1px solid var(--olive); padding-bottom:.25rem; }
.gift-pop .gp-custom-form { margin-top:1.5rem; }
.gift-pop .gp-custom-form label { display:block; font-family:var(--accent); text-transform:uppercase; letter-spacing:.16em; font-size:.64rem; color:rgba(234,234,234,.6); margin-bottom:.55rem; }
.gift-pop .gp-custom-row { display:flex; align-items:stretch; justify-content:center; gap:.5rem; }
.gift-pop .gp-field { display:flex; align-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(157,181,178,.3); border-radius:var(--radius-ctl); padding:0 .85rem; }
.gift-pop .gp-cur { color:rgba(234,234,234,.7); font-family:var(--display); font-size:1.15rem; }
.gift-pop .gp-custom-row input { width:96px; background:none; border:0; color:#fff; font-family:var(--display); font-size:1.15rem; padding:.65rem .4rem; outline:none; }
.gift-pop .gp-go { background:var(--warm); color:var(--ink); border:0; border-radius:var(--radius-ctl); font-family:var(--accent); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:600; padding:0 1.1rem; cursor:pointer; transition:filter .3s; }
.gift-pop .gp-go:hover { filter:brightness(1.08); }
.gift-pop .gp-min { margin:.6rem 0 0; font-size:.72rem; color:rgba(234,234,234,.5); }


/* ====================================================================
   real-assets.css
   ==================================================================== */

/* Culinary Crew — real brand/video/food asset layer */

.logo-stack {
  display: block;
  width: clamp(190px, 18vw, 280px);
  height: auto;
}

.brand {
  align-items: center;
  gap: .9rem;
}

.footer-logo {
  width: clamp(150px, 14vw, 190px);
  height: auto;
  display: block;
  margin-bottom: .2rem;
}

.brand-logo {
  display: block;
  width: clamp(120px, 12vw, 174px);
  height: auto;
}

.brand .seg {
  color: rgba(255, 255, 255, .72);
}

.nav.scrolled .brand .seg {
  color: var(--olive);
}

.gw-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ink) url("food/service-plates.webp") center / cover no-repeat;
  filter: brightness(.88) saturate(1.08);
}

.gw-video-page {
  position: relative;
  min-height: 100svh;
  background: var(--ink);
  overflow: hidden;
}

.gw-video-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11, 20, 32, .58) 0%, rgba(11, 20, 32, .24) 47%, rgba(11, 20, 32, .54) 100%),
    linear-gradient(180deg, rgba(11, 20, 32, .22) 0%, rgba(11, 20, 32, .08) 42%, rgba(11, 20, 32, .78) 100%);
}

.gw-video-page .gw-intro {
  top: clamp(9rem, 20vh, 15rem);
  text-align: left;
  width: min(100% - var(--gutter) * 2, 1180px);
  margin-inline: auto;
  padding-inline: 0;
}

.gw-video-page .gw-intro h1 {
  max-width: 11ch;
  font-size: clamp(3.8rem, 8vw, 8rem);
  line-height: .9;
  text-wrap: balance;
}

.gw-video-page .gw-intro p {
  max-width: 46rem;
  text-align: left;
  color: rgba(250, 250, 248, .78);
}

.gw-video-page .gw-panels {
  position: absolute;
  inset: auto var(--gutter) clamp(4.8rem, 8vh, 7.2rem);
  z-index: 18;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.gw-video-page .gw-panel {
  min-height: 248px;
  border: 1px solid rgba(250, 250, 248, .18);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(11, 20, 32, .42);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .26);
  backdrop-filter: blur(10px);
}

.gw-video-page .gw-panel .ph {
  opacity: .36;
  filter: saturate(1.08) brightness(.88);
}

.gw-video-page .gw-panel:hover .ph,
.gw-video-page .gw-panel:focus-within .ph {
  opacity: .72;
  filter: saturate(1.12) brightness(1);
}

.gw-video-page .gw-panel-inner {
  align-items: flex-start;
  padding: 1.6rem;
  text-align: left;
}

.gw-video-page .gw-panel .desc {
  max-height: 8rem;
  opacity: 1;
}

.gw-video-page .gw-enter {
  margin-top: .4rem;
}

.gw-locked .gw-panel:nth-child(1) .ph {
  background-image: url("hero-particulier.webp");
}

.gw-locked .gw-panel:nth-child(2) .ph {
  background-image: url("hero-zakelijk.webp");
}

.gw-locked .gw-panel:nth-child(3) .ph {
  background-image: url("hero-horeca.webp");
}

.gw-locked .logo-stack {
  width: clamp(170px, 15vw, 250px);
}

.hero-video-section {
  overflow: hidden;
  background: var(--ink);
}

.hero-video-section .hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.74) saturate(.92) contrast(1.08);
}

/* De hero-afbeelding die het poster-attribuut vervangt.
   Een poster kan geen srcset krijgen, waardoor een telefoon de volle 92 tot
   114 kB haalde van precies het beeld dat als eerste in beeld komt en dat
   Google meet als Largest Contentful Paint. Nu is het een gewone <img> met
   srcset, die in de DOM vóór de video staat. De video ligt erbovenop en dekt
   hem af zodra hij speelt (dat is na window.load, zie cc.js). Zelfde filter,
   zelfde uitsnede, dus visueel identiek. */
.hero-video-section .hero-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.74) saturate(.92) contrast(1.08);
}

.hero-video-section .ph {
  display: none;
}

.hero-video-section .hero-scrim {
  z-index: 1;
  background:
    radial-gradient(120% 90% at 55% 34%, rgba(11, 20, 32, .02) 0%, rgba(11, 20, 32, .34) 52%, rgba(0, 0, 0, .68) 100%),
    linear-gradient(90deg, rgba(11, 20, 32, .72) 0%, rgba(11, 20, 32, .26) 50%, rgba(11, 20, 32, .62) 100%),
    linear-gradient(180deg, rgba(11, 20, 32, .66) 0%, rgba(11, 20, 32, .12) 42%, rgba(11, 20, 32, .88) 100%);
}

.hero-video-section .hero-inner,
.hero-video-section .hero-trust {
  z-index: 2;
}

.hero-video-section .hero-inner {
  min-height: 100svh;
  justify-content: center;
}

.hero-video-section .hero-sub {
  color: rgba(255, 255, 255, .82);
}

body[data-screen-label="Particulier"] .hero .ph {
  background-image: url("food/dish-privediner.webp");
}

body[data-screen-label="Zakelijk"] .hero .ph {
  background-image: url("food/dish-executive.webp");
}

body[data-screen-label="Horeca"] .hero .ph {
  background-image: url("food/kitchen-freelance.webp");
}

body[data-screen-label="Over ons"] .hero .ph {
  background-image: url("food/kitchen-consulting.webp");
}

body[data-screen-label="Particulier"] #diensten .svc:nth-of-type(1) .ph {
  background-image: url("img/cc-privediner-k.webp");
  background-position: center 42%;
}

body[data-screen-label="Particulier"] #diensten .svc:nth-of-type(2) .ph {
  background-image: url("img/cc-events-k.webp");
  background-position: center 50%;
}

body[data-screen-label="Particulier"] #diensten .svc:nth-of-type(3) .ph {
  background-image: url("img/cc-workshop-k.webp");
  background-position: center 48%;
}

body[data-screen-label="Particulier"] #diensten .svc:nth-of-type(4) .ph {
  background-image: url("img/cc-private-chef-k.webp");
  background-position: center 47%;
}

body[data-screen-label="Particulier"] #diensten .svc:nth-of-type(5) .ph {
  background-image: url("img/cc-trouwerij-k.webp");
  background-position: center 47%;
}

body[data-screen-label="Particulier"] #diensten .svc:nth-of-type(6) .ph {
  background-image: url("img/cc-chefstable-k.webp");
  background-position: center 46%;
}

body[data-screen-label="Zakelijk"] #diensten .svc:nth-of-type(1) .ph {
  background-image: url("food/dish-executive.webp");
  background-position: center 42%;
}

body[data-screen-label="Zakelijk"] #diensten .svc:nth-of-type(2) .ph {
  background-image: url("food/dish-borrel.webp");
  background-position: center 48%;
}

body[data-screen-label="Zakelijk"] #diensten .svc:nth-of-type(3) .ph {
  background-image: url("img/cc-meeting-k.webp");
  background-position: center 46%;
}

body[data-screen-label="Zakelijk"] #diensten .svc:nth-of-type(4) .ph {
  background-image: url("img/cc-crew-k.webp");
  background-position: center 48%;
}

body[data-screen-label="Zakelijk"] #diensten .svc:nth-of-type(5) .ph {
  background-image: url("img/cc-walking-k.webp");
  background-position: center 46%;
}

body[data-screen-label="Horeca"] #diensten .svc:nth-of-type(1) .ph {
  background-image: url("img/cc-freelance-k.webp");
  background-position: center 44%;
}

body[data-screen-label="Horeca"] #diensten .svc:nth-of-type(2) .ph,
body[data-screen-label="Over ons"] .svc .ph {
  background-image: url("food/kitchen-consulting.webp");
  background-position: center 48%;
}

/* Chef-portret in het teamblok. Het beeld gaat IN de plaatshouder in plaats van
   ernaast, zodat de bestaande hoogte, het bijsnijden en de hover-zoom van .ph
   blijven werken. Zonder portret valt .ph terug op zijn achtergrondbeeld
   hierboven; zodra _bouw/portret-plaatsen.py gedraaid is, dekt de foto die af. */
body[data-screen-label="Over ons"] #team .ph > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 28%;
  z-index: 0;
}
body[data-screen-label="Over ons"] #team .ph::before { z-index: 1; }

body[data-screen-label="Horeca"] #diensten .svc:nth-of-type(3) .ph {
  background-image: url("hero-workshop.webp");
  background-position: center 46%;
}

body[data-screen-label="Horeca"] #diensten .svc:nth-of-type(4) .ph {
  background-image: url("img/cc-foodcost-k.webp");
  background-position: center 48%;
}

body[data-screen-label="Horeca"] #diensten .svc:nth-of-type(5) .ph {
  background-image: url("img/cc-concept-k.webp");
  background-position: center 52%;
}

body[data-screen-label="Horeca"] #diensten .svc:nth-of-type(6) .ph {
  background-image: url("img/cc-audit-k.webp");
  background-position: center 42%;
}

.hero .ph::before {
  background:
    linear-gradient(90deg, rgba(11, 20, 32, .82) 0%, rgba(11, 20, 32, .44) 48%, rgba(11, 20, 32, .24) 100%),
    linear-gradient(180deg, rgba(11, 20, 32, .32) 0%, rgba(11, 20, 32, .08) 42%, rgba(11, 20, 32, .86) 100%);
}

.hero .ph,
.svc-media .ph {
  background-position: center;
}

.svc-media .ph::before {
  background:
    linear-gradient(180deg, rgba(11, 20, 32, .02), rgba(11, 20, 32, .12)),
    radial-gradient(70% 70% at 50% 44%, transparent 42%, rgba(11, 20, 32, .18) 100%);
}

.svc-media .ph {
  filter: saturate(.96) contrast(1.08) brightness(.98);
}

@media (max-width: 980px) {
  .gw-video-page .gw-intro {
    top: 8.5rem;
    text-align: center;
    width: min(100% - 2rem, 680px);
  }

  .gw-video-page .gw-intro h1,
  .gw-video-page .gw-intro p {
    margin-inline: auto;
    text-align: center;
  }

  .gw-video-page .gw-panels {
    grid-template-columns: 1fr;
    inset: auto 1rem 1rem;
  }

  .gw-video-page .gw-panel {
    min-height: 144px;
  }
}

@media (max-width: 820px) {
  .gw-video-page {
    min-height: 100svh;
  }

  .gw-video-page .gw-head {
    position: fixed;
    background: linear-gradient(180deg, rgba(11, 20, 32, .88), rgba(11, 20, 32, .42) 68%, transparent);
    backdrop-filter: none;
  }

  .gw-video-page .gw-intro {
    position: relative;
    top: auto;
    padding: 8.5rem 1rem 28rem;
  }

  .gw-video-page .gw-intro h1 {
    font-size: clamp(2.6rem, 11.5vw, 3.7rem);
    line-height: .96;
  }

  .gw-video-page .gw-panels {
    position: absolute;
    top: auto;
    bottom: 4.4rem;
    left: 1rem;
    right: 1rem;
  }

  .gw-video-page .gw-panel .desc {
    display: none;
  }

  .gw-video-page .gw-panel-inner {
    gap: .45rem;
    padding: 1rem;
  }

  .gw-video-page .gw-panel h2 {
    font-size: 1.55rem;
  }

  .gw-video-page .gw-foot {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
  }

  .brand-logo {
    width: 130px;
  }
}

@media (max-width: 560px) {
  .logo-stack {
    width: 176px;
  }

  .gw-video-page .gw-intro {
    padding-bottom: 26rem;
  }

  .gw-video-page .gw-intro h1 {
    font-size: clamp(2.28rem, 10.2vw, 3.2rem);
    line-height: .94;
  }

  .gw-video-page .gw-panel {
    min-height: 92px;
  }

  .gw-video-page .gw-panel-inner {
    padding: .78rem .9rem;
  }

  .gw-video-page .gw-panel h2 {
    font-size: 1.32rem;
  }

  .gw-video-page .gw-enter {
    padding: .55rem .8rem;
    font-size: .62rem;
  }
}

/* ---- Lokale landingspagina's ---- */
.child-links { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.child-chip {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: .74rem; letter-spacing: .04em;
  padding: .42rem .8rem; border: 1px solid rgba(11,20,32,.16);
  border-radius: 999px; color: var(--ink); text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.child-chip:hover { background: var(--warm, #B08D4F); color: #fff; border-color: var(--warm, #B08D4F); }

.loc-svc-grid {
  margin-top: 2.4rem; display: grid; gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
}
.loc-card {
  display: block; padding: 1.6rem 1.4rem; text-decoration: none; color: var(--ink);
  border: 1px solid rgba(11,20,32,.12); border-radius: 4px; background: rgba(255,255,255,.5);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.loc-card:hover { border-color: var(--warm, #B08D4F); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(11,20,32,.08); }
.loc-num { font-family: var(--mono, "JetBrains Mono", monospace); font-size: .74rem; color: var(--warm, #B08D4F); letter-spacing: .06em; }
.loc-card h3 { margin: .5rem 0 .5rem; font-size: 1.12rem; }
.loc-card p { font-size: .9rem; line-height: 1.5; opacity: .82; margin: 0 0 .8rem; }
.loc-price { font-family: var(--mono, "JetBrains Mono", monospace); font-size: .78rem; color: var(--ink); opacity: .7; }

.wg { background: rgba(11,20,32,.03); }
.wg-grid { margin-top: 2.2rem; display: grid; gap: 1.6rem; grid-template-columns: repeat(4, 1fr); }
.wg-col h4 { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--warm-2, #9A7C3C); margin: 0 0 .8rem; font-family: var(--mono, "JetBrains Mono", monospace); }
.wg-col ul { list-style: none; padding: 0; margin: 0; }
.wg-col li { margin: .3rem 0; }
.wg-col a { text-decoration: none; color: var(--ink); font-size: .92rem; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.wg-col a:hover { color: var(--warm, #B08D4F); border-color: var(--warm, #B08D4F); }
.wg-here { font-size: .92rem; color: var(--warm-2, #9A7C3C); font-weight: 600; }

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

/* ---- Werkgebied-blok op hoofdpagina ---- */
.wg-main { background: rgba(11,20,32,.03); }
.wg-main .wg-group { margin-top: 1.5rem; }
.wg-main .wg-group h2 {
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--warm-2, #9A7C3C); margin: 0 0 .5rem;
}
.wg-main .wg-group p { margin: 0; line-height: 2; }
.wg-main .wg-group a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.wg-main .wg-group a:hover { color: var(--warm, #B08D4F); border-color: var(--warm, #B08D4F); }
.wg-main .wg-sep { opacity: .3; margin: 0 .35rem; }

/* ---- Voorbeeldmenu op lokale pagina's ---- */
.samplemenu .menu-courses { max-width: 640px; margin: 2.4rem auto 0; }
.samplemenu .mc { padding: 1.15rem 0; border-top: 1px solid rgba(11,20,32,.1); text-align: center; }
.samplemenu .mc:first-child { border-top: none; }
.samplemenu .mc-k { font-family: var(--mono, "JetBrains Mono", monospace); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--warm-2, #9A7C3C); }
.samplemenu .mc h4 { font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: 1.3rem; margin: .35rem 0 .3rem; color: var(--ink); }
.samplemenu .mc p { font-size: .9rem; opacity: .72; margin: 0; font-style: italic; }


/* ---- Visueel verborgen (voor SEO/toegankelijkheid) ---- */
.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; }

/* ---- Journal (blog) ---- */
.jr-wrap { padding-top: 7rem; }
.jr-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); margin-top: 2.6rem; }
.jr-card { display: block; text-decoration: none; color: var(--ink); border: 1px solid rgba(11,20,32,.12); border-radius: 4px; overflow: hidden; background: #fff; transition: transform .2s, box-shadow .2s, border-color .2s; }
.jr-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(11,20,32,.09); border-color: var(--warm, #B08D4F); }
.jr-img { aspect-ratio: 16/10; background-size: cover; background-position: center; }
.jr-body { padding: 1.4rem; }
.jr-cat { font-family: var(--mono, "JetBrains Mono", monospace); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--warm-ink); }
.jr-card h3 { font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: 1.28rem; margin: .5rem 0 .5rem; line-height: 1.25; }
.jr-card p { font-size: .92rem; line-height: 1.55; opacity: .78; margin: 0; }
.article-body { max-width: 68ch; }
.article-body h2 { font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: clamp(1.4rem,3vw,1.9rem); margin: 2.4rem 0 .8rem; }
.article-body p { line-height: 1.8; margin: 0 0 1.1rem; }
.article-cta { margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid rgba(11,20,32,.1); }
@media (max-width: 820px){ .jr-grid { grid-template-columns: 1fr; } }

/* ---- Prozalinks zichtbaar (UX/toegankelijkheid) ---- */
/* prozalinks zichtbaar */
/* :not(.btn) omdat deze regel anders ook knoppen raakt. Een .btn--solid in
   een <p> kreeg zo messing tekst op een messing vlak: 1.27:1, praktisch
   onzichtbaar. Gemeten met _bouw/contrast.js op horeca.html.
   --warm-2 (#9A7C3C) haalt op crème maar 3.57:1; --warm-ink (#8A6A2F) 4.54:1. */
.section .wrap > p a:not(.btn),
.article-body a:not(.btn),
.faq-list .answer a:not(.btn) {
  color: var(--warm-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .2s;
}
.section .wrap > p a:not(.btn):hover,
.article-body a:not(.btn):hover,
.faq-list .answer a:not(.btn):hover { color: var(--warm-2, #9A7C3C); }

/* ---- Terug-naar-boven knop ---- */
/* ---- Zwevende actiestapel, rechtsonder (WhatsApp onder, terug-naar-boven erboven) ---- */
.wa-float {
  position: fixed; right: 18px; bottom: 20px; z-index: var(--z-float, 900);
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--warm); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(11,20,32,.32);
  transition: transform .15s ease, background .15s ease;
}
.wa-float:hover { background: var(--warm-2); transform: scale(1.07); }
.wa-float svg { width: 30px; height: 30px; display: block; }

.to-top {
  position: fixed; right: 24px; bottom: 88px; z-index: var(--z-float, 900);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(11,20,32,.15); background: var(--cream, #f7f3eb); color: var(--ink);
  font-size: 1.15rem; line-height: 1; cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .25s, transform .25s; box-shadow: 0 8px 22px rgba(11,20,32,.18);
}
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }

/* Cookiebalk bedekt op smalle schermen de stapel: tijdelijk omhoog schuiven */
@media (max-width: 820px) {
  .wa-float { width: 52px; height: 52px; right: 12px; }
  .to-top { right: 16px; bottom: 82px; }
  body:has(.cc-consent) .wa-float { bottom: 8.5rem; }
  body:has(.cc-consent) .to-top { bottom: 13rem; }
}

/* ---- Gateway: secundaire links (Over ons / Journal / Cadeaubon) ---- */
.gw-foot .gw-links { display: flex; gap: 1.2rem; }
.gw-foot .gw-links a { color: inherit; text-decoration: none; }
.gw-foot .gw-links a:hover { color: var(--olive); }

/* ---- Breadcrumbs (wayfinding op diepe pagina's) ---- */
/* Gedempt met een vaste kleur en niet met opacity: opacity .72 bracht de
   kruimellinks op 3.91:1 en het huidige item op 3.31:1. */
.breadcrumb { font-family: var(--mono, "JetBrains Mono", monospace); font-size: .72rem; letter-spacing: .04em; color: #6E6D6C; margin-bottom: 1.5rem; }
.breadcrumb a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.breadcrumb a:hover { color: var(--warm, #B08D4F); border-color: var(--warm, #B08D4F); }
.breadcrumb .sep { color: #6E6D6C; margin: 0 .45rem; }
.breadcrumb .cur { color: var(--ink); }

/* Achtergrondbeelden kleiner op telefoons.
   Een background-image kan geen srcset krijgen; een mediaquery is het
   equivalent. Onder 820px is 960 pixels breed ruim genoeg, ook op retina. */
@media (max-width: 820px) {
  .craft .ph { background-image: url('hero-workshop-960w.webp'); }
  .gw-locked .gw-panel:nth-child(1) .ph { background-image: url('hero-particulier-960w.webp'); }
  .gw-locked .gw-panel:nth-child(2) .ph { background-image: url('hero-zakelijk-960w.webp'); }
  .gw-locked .gw-panel:nth-child(3) .ph { background-image: url('hero-horeca-960w.webp'); }
  .gw-panel:nth-child(1) .ph { background-image: url('hero-particulier-960w.webp'); }
  .gw-panel:nth-child(2) .ph { background-image: url('hero-zakelijk-960w.webp'); }
  .gw-panel:nth-child(3) .ph { background-image: url('hero-horeca-960w.webp'); }
  .gw-video-bg { background-image: url('food/service-plates-960w.webp'); }
  body[data-screen-label="Horeca"] #diensten .svc:nth-of-type(1) .ph { background-image: url('img/cc-freelance-k-960w.webp'); }
  body[data-screen-label="Horeca"] #diensten .svc:nth-of-type(2) .ph { background-image: url('food/kitchen-consulting-960w.webp'); }
  body[data-screen-label="Horeca"] #diensten .svc:nth-of-type(3) .ph { background-image: url('hero-workshop-960w.webp'); }
  body[data-screen-label="Horeca"] #diensten .svc:nth-of-type(4) .ph { background-image: url('img/cc-foodcost-k-960w.webp'); }
  body[data-screen-label="Horeca"] #diensten .svc:nth-of-type(5) .ph { background-image: url('img/cc-concept-k-960w.webp'); }
  body[data-screen-label="Horeca"] #diensten .svc:nth-of-type(6) .ph { background-image: url('img/cc-audit-k-960w.webp'); }
  body[data-screen-label="Horeca"] .hero .ph { background-image: url('food/kitchen-freelance-960w.webp'); }
  body[data-screen-label="Horeca"] .svc:nth-of-type(1) .ph { background-image: url('hero-horeca-960w.webp'); }
  body[data-screen-label="Horeca"] .svc:nth-of-type(2) .ph { background-image: url('hero-workshop-960w.webp'); }
  body[data-screen-label="Over ons"] .hero .ph { background-image: url('food/kitchen-consulting-960w.webp'); }
  body[data-screen-label="Over ons"] .svc .ph { background-image: url('food/kitchen-consulting-960w.webp'); }
  body[data-screen-label="Particulier"] #diensten .svc:nth-of-type(1) .ph { background-image: url('img/cc-privediner-k-960w.webp'); }
  body[data-screen-label="Particulier"] #diensten .svc:nth-of-type(2) .ph { background-image: url('img/cc-events-k-960w.webp'); }
  body[data-screen-label="Particulier"] #diensten .svc:nth-of-type(3) .ph { background-image: url('img/cc-workshop-k-960w.webp'); }
  body[data-screen-label="Particulier"] #diensten .svc:nth-of-type(4) .ph { background-image: url('img/cc-private-chef-k-960w.webp'); }
  body[data-screen-label="Particulier"] #diensten .svc:nth-of-type(5) .ph { background-image: url('img/cc-trouwerij-k-960w.webp'); }
  body[data-screen-label="Particulier"] #diensten .svc:nth-of-type(6) .ph { background-image: url('img/cc-chefstable-k-960w.webp'); }
  body[data-screen-label="Particulier"] .hero .ph { background-image: url('food/dish-privediner-960w.webp'); }
  body[data-screen-label="Particulier"] .svc:nth-of-type(1) .ph { background-image: url('hero-particulier-960w.webp'); }
  body[data-screen-label="Zakelijk"] #diensten .svc:nth-of-type(1) .ph { background-image: url('food/dish-executive-960w.webp'); }
  body[data-screen-label="Zakelijk"] #diensten .svc:nth-of-type(2) .ph { background-image: url('food/dish-borrel-960w.webp'); }
  body[data-screen-label="Zakelijk"] #diensten .svc:nth-of-type(3) .ph { background-image: url('img/cc-meeting-k-960w.webp'); }
  body[data-screen-label="Zakelijk"] #diensten .svc:nth-of-type(4) .ph { background-image: url('img/cc-crew-k-960w.webp'); }
  body[data-screen-label="Zakelijk"] #diensten .svc:nth-of-type(5) .ph { background-image: url('img/cc-walking-k-960w.webp'); }
  body[data-screen-label="Zakelijk"] .hero .ph { background-image: url('food/dish-executive-960w.webp'); }
  body[data-screen-label="Zakelijk"] .svc:nth-of-type(1) .ph { background-image: url('hero-zakelijk-960w.webp'); }
  body[data-screen-label="Zakelijk"] .svc:nth-of-type(2) .ph { background-image: url('hero-zakelijk-960w.webp'); }
}

/* Cadeaubon: bedragkeuze als knoppen in plaats van kale radioknoppen. */
.gb-optie {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1rem; border: 1px solid var(--olive);
  border-radius: var(--radius-ctl, 8px); cursor: pointer;
  font-family: var(--accent); font-size: .92rem;
}
.gb-optie:has(input:checked) { background: var(--navy); color: var(--white); border-color: var(--navy); }
.gb-optie:focus-within { outline: 3px solid var(--warm-ink); outline-offset: 2px; }
.gb-form .field { display: flex; flex-direction: column; gap: .3rem; }
.gb-form .field label { font-size: .84rem; }  /* opacity .8 bracht dit label op 3.31:1 */
.gb-form .field input {
  padding: .6rem .75rem; border: 1px solid rgba(157,181,178,.5);
  border-radius: var(--radius-ctl, 8px); font: inherit; background: transparent; color: inherit;
}
@media (max-width: 560px) { .gb-form .field-row { grid-template-columns: 1fr !important; } }

/* ---- Opt-in voor de opvolgmails ----
   Bewust rustig vormgegeven, maar wél leesbaar: 4.5:1 op de donkere
   offertesectie. Een toestemmingsvraag die je moet zoeken is geen
   toestemmingsvraag. */
.opt-in { display: flex; gap: .6rem; align-items: flex-start; margin: .4rem 0 1.2rem;
          font-size: .82rem; line-height: 1.5; cursor: pointer; }
.opt-in input { margin-top: .2rem; flex-shrink: 0; width: 1rem; height: 1rem; accent-color: var(--warm); }
.opt-in span { opacity: .92; }

/* De reactietermijn onder de verzendknop. Stond nergens op de site: de enige
   termijn in de hele site stond in de algemene voorwaarden, en bij de knop zelf
   stond "we reageren snel". Dat is precies de onzekerheid die iemand op het
   laatste moment laat afhaken, en het is de goedkoopste die weg te nemen is.
   Bewust rustig: het is een geruststelling, geen tweede call-to-action.

   Kleur wordt geërfd in plaats van vastgezet: deze notitie staat onder de knop
   in de donkere offertesectie, en een vaste leiskleur werd daar bijna
   onleesbaar. Overnemen van de omringende tekst met wat minder nadruk werkt op
   een lichte én een donkere achtergrond, net zoals .opt-in dat doet. */
.form-note { margin: .8rem 0 0; font-size: .82rem; line-height: 1.5;
             color: inherit; opacity: .78; }


/* --- 19-09-2026: mobiele toestemmingsbalk en voettekstregel --- */
/* Op 390px besloeg de toestemmingsbalk 54% van het scherm en bedekte hij beide
   hero-knoppen. Hij is hier compacter: kleinere letter, krappere ruimte en de
   knoppen twee-op-een-rij. De drie knoppen blijven onderling identiek opgemaakt
   — dat is een bewuste keuze en geen ruimtewinst waard. */
@media (max-width: 560px) {
  .cc-consent {
    left: .6rem; right: .6rem; bottom: .6rem;
    padding: .8rem .9rem; gap: .6rem;
  }
  .cc-consent .cc-text { font-size: .76rem; line-height: 1.45; }
  .cc-consent .cc-keuzes { gap: 1rem; margin-top: .5rem; }
  .cc-consent .cc-keuze { font-size: .74rem; }
  .cc-consent .cc-actions { gap: .45rem; }
  .cc-consent button {
    font-size: .64rem; letter-spacing: .08em; padding: .5rem .5rem;
  }
  .cc-consent .cc-actions .cc-knop { flex: 1 1 calc(50% - .25rem); }
  .cc-consent .cc-actions .cc-knop:last-child { flex: 1 1 100%; }
}

/* De rij met juridische links was 420px breed op een scherm van 390: de pagina
   schoof opzij en "Sitemap" viel buiten beeld. */
.social { flex-wrap: wrap; }
@media (max-width: 560px) {
  .social { gap: .8rem 1rem; }
}