/* ============================================================
   CHICKITO LANDINGSPAGINA — mobile-first hi-fi styling
   Additief bovenop virtualbite.css + brand-detail.css.
   Mobile = basis; tablet/desktop = progressive enhancements.
   ============================================================ */

/* ---------- Hide eyebrows globally when toggled off ---------- */
[data-hide-eyebrows] .eyebrow {
  display: none;
}

/* ---------- Chickito brand color override ---------- */
html,
html[data-palette="mono"] {
  --accent: #D62616;
}

/* ---------- Hero title — kleinere mobile font zodat "Chickito Chicken" op 1 regel past ---------- */
.hero__title-line { white-space: nowrap; }
.hero .hero__title.h-display {
  font-size: clamp(40px, 9vw, 112px);
}
@media (max-width: 480px) {
  .hero .hero__title.h-display {
    font-size: clamp(42px, 11vw, 52px);
  }
  .hero__eyebrow {
    font-size: 11px;
    padding: 7px 12px;
    letter-spacing: .13em;
  }
}
[data-hide-eyebrows] .section__head .h-1,
[data-hide-eyebrows] .bdetail-head .h-1,
[data-hide-eyebrows] .bdetail-head--center .h-1 {
  margin-top: 0;
}

/* Override h-1--fit specifically voor lange titels die op 1 regel moeten */
.h-1.h-1--fit {
  font-size: clamp(20px, 5.6vw, 64px);
}
.cl-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--accent);
  z-index: 100;
  transition: width .08s linear;
  pointer-events: none;
}

/* Uniforme eyebrow-tilt — virtualbite alterneert per nth-of-type maar mijn
   section-volgorde verschilt, dus forceer dezelfde tilt overal zodat eyebrows
   1-op-1 matchen met virtualbite's hoofd-secties. */
.section .eyebrow,
.section:nth-of-type(2n) .eyebrow {
  transform: rotate(var(--eyebrow-rotation));
}

/* ---------- Sticky bottom CTA — mobile-only duim-bereik ---------- */
.cl-sticky-cta {
  position: fixed;
  left: 12px; right: 12px;
  bottom: 12px;
  z-index: 45;
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  /* safe-area inset voor notch-phones */
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.cl-sticky-cta.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cl-sticky-cta__main {
  /* gebruikt .btn .btn--primary styling — alleen flex-uitlijning hier */
  flex: 1;
}
.cl-sticky-cta__icon {
  width: 48px; height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-size: 20px;
  text-decoration: none;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 12px 28px rgba(0, 0, 0, .18);
  border: 1.5px solid transparent;
  transition: transform .15s ease;
}
.cl-sticky-cta__icon:hover { transform: translateY(-2px); }
.cl-sticky-cta__icon:active { transform: translateY(1px); }

/* Verberg sticky bar op tablet+ (nav is altijd zichtbaar) */
@media (min-width: 768px) {
  .cl-sticky-cta { display: none; }
}

/* ---------- Nav — Chickito logo ipv virtualbite tekst ---------- */
.cl-nav__logo {
  height: 56px;
  display: inline-flex;
  align-items: center;
}
.cl-nav__logo img {
  height: 100%;
  width: auto;  display: block;
}
@media (min-width: 768px) {
  :root { --nav-h: 104px; }
  .cl-nav__logo { height: 84px; }
}
@media (min-width: 1024px) {
  :root { --nav-h: 116px; }
  .cl-nav__logo { height: 100px; }
}

/* ---------- Hero — mobile-first, alles vol breedte ---------- */
.cl-hero {
  min-height: auto;
  padding: calc(var(--nav-h) + 16px) 0 32px;
}
.cl-hero .container { padding-bottom: 0; }

.cl-hero__brandbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.cl-hero__brandlogo {
  width: 48px; height: 48px;
  background: #fff;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  padding: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.cl-hero__brandlogo img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
.cl-hero__brandinitials {
  font-family: var(--font-head);
  font-size: 18px;
  color: var(--brand-color, var(--accent));
}
.cl-hero__brandmeta { flex: 1; min-width: 0; }
.cl-hero__brandname {
  font-family: var(--font-head);
  font-size: 14px;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.05;
  text-transform: uppercase;
}
.cl-hero__brandsub {
  font-size: 11px;
  color: rgba(255, 255, 255, .6);
  margin-top: 3px;
}
.cl-hero__brandsub .dot { color: var(--accent); }
.cl-hero__open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .9);
}
.cl-hero__opendot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #65D08F;
  box-shadow: 0 0 8px rgba(101, 208, 143, .8);
}

.cl-hero__title {
  font-size: clamp(36px, 10vw, 88px);
  line-height: 0.95;
  margin-bottom: 12px;
}
.cl-hero__sub {
  margin: 0 0 18px;
  font-size: 15px;
}
.cl-hero__title em {
  font-style: normal;
  color: var(--accent);
  display: inline-block;
}
.cl-hero__title em::after { display: none; } /* underline weg op hero ivm density */
.cl-hero__script {
  display: inline-block;
}

.cl-hero__sub {
  margin: 14px 0 22px;
  max-width: 100%;
  font-size: 16px;
}

.cl-hero__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.cl-hero__cta .btn { width: 100%; }

.cl-hero__social {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, .8);
  margin-bottom: 22px;
}
.cl-hero__social b { color: #fff; }
.cl-hero__stars {
  color: #F2C94C;
  font-size: 12px;
  letter-spacing: .04em;
}

.cl-hero__platforms { margin-top: 4px; }

/* ---------- Display fonts voor brand-naam ---------- */
html .cl-font-lilita,
html[data-accent="highlight-block"] .cl-font-lilita {
  font-family: 'Lilita One', var(--font-head), sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  -webkit-text-stroke: 0;
}
html .cl-font-genty,
html[data-accent="highlight-block"] .cl-font-genty {
  font-family: 'Bagel Fat One', var(--font-head), sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  -webkit-text-stroke: 0;
}
.cl-hero__logo {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  margin: 0 0 20px;
}
.cl-hero__logo--inline {
  display: inline-block;
  vertical-align: middle;
  width: auto;
  max-width: 100%;
  height: 1.4em;
  margin: -0.1em 0.18em 0 0;
}
@media (min-width: 768px) {
  .cl-hero__logo:not(.cl-hero__logo--inline) { max-width: 300px; }
}

.cl-hero__bold-second {
  display: block;
  margin-top: 12px;
}

/* ---------- Hero BOLD (Gochu-style) — big caps headline + foto overlay ---------- */
.cl-hero--bold {
  color: #fff;
  overflow: hidden;
  padding: calc(var(--nav-h) + 20px) 0 0;
  position: relative;
  min-height: calc(100svh + 40px);
}
.cl-hero__bold-grid {
  position: relative;
  display: block;
  min-height: 580px;
}
.cl-hero__bold-copy {
  position: relative;
  z-index: 2;
  padding-bottom: 24px;
  padding-right: 0;
  max-width: 100%;
}
.cl-hero--bold .cl-hero__kicker {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .25);
  color: #fff;
  margin-bottom: 28px;
}
.cl-hero__bold-title {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(36px, 9vw, 112px);
  line-height: 1.05;
  letter-spacing: -.035em;
  color: #fff;
  margin: 0 0 22px;
  text-wrap: balance;
}
.cl-hero__bold-em {
  color: var(--cream, #fff5e1);
}
.cl-hero__bold-sub {
  font-size: clamp(15px, 1.6vw, 19px);
  line-height: 1.5;
  color: rgba(255, 255, 255, .92);
  margin: 0 0 28px;
  max-width: 540px;
}
.cl-hero__bold-sub b { color: #fff; font-weight: 700; }
.cl-hero__bold-cta {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(22px, 5vw, 32px);
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border-bottom: 4px solid #fff;
  padding-bottom: 4px;
  margin-bottom: 28px;
  transition: gap .2s ease, opacity .15s ease;
}
.cl-hero__bold-cta:hover { opacity: .85; }
.cl-hero__bold-btn { margin-bottom: 28px; }
.cl-hero__bold-platforms {
  margin-top: 8px;
}
.cl-hero--bold .hero__platforms .lbl { color: rgba(255, 255, 255, .6); }
.cl-hero--bold .hero__platforms .plat {
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
.cl-hero__bold-photo {
  position: absolute;
  bottom: 0;
  right: -12px;
  width: 54%;
  max-width: 280px;
  z-index: 1;
  pointer-events: none;
}
.cl-hero__bold-photo img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .4));
}

@media (min-width: 768px) {
  .cl-hero--bold {
    padding: calc(var(--nav-h) + 32px) 0 0;
    min-height: 660px;
  }
  .cl-hero__bold-grid {
    min-height: 580px;
  }
  .cl-hero__bold-copy {
    padding-top: 32px;
    padding-bottom: 80px;
    padding-right: 0;
    max-width: none;
  }
  .cl-hero__bold-photo {
    right: -24px;
    bottom: 0;
    width: 42%;
    max-width: 480px;
  }
}
@media (min-width: 1024px) {
  .cl-hero__bold-copy { padding-right: 38%; }
  .cl-hero__bold-photo { width: 40%; max-width: 560px; right: -24px; }
}
.cl-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}
.cl-hero__copy {
  display: flex;
  flex-direction: column;
}
.cl-hero__kicker {
  margin-bottom: 16px;
  align-self: flex-start;
  max-width: 100%;
  white-space: normal;
  font-size: 10.5px;
  padding: 6px 12px;
}
.cl-hero__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.35);
}
.cl-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cl-hero__title {
  font-size: clamp(36px, 10vw, 88px);
  line-height: 0.95;
  margin-bottom: 12px;
}
.cl-hero__sub {
  margin: 0 0 18px;
  font-size: 15px;
}

/* ---------- Concept — story + grid (mobile = grid onder copy) ---------- */
.cl-concept {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
.cl-concept__copy { max-width: 640px; }

/* FAQ vragen lichter qua gewicht — Archivo Black @900 voelt te zwaar bij 9 items.
   Switch naar Archivo @700 voor balans tussen leesbaar en bold. */
.faq__q {
  font-family: "Archivo", "Inter", system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
}
.step__link {
  color: var(--accent, #D62616);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.step__link:hover { opacity: 0.8; }
.cl-concept__hl {
  display: inline-block;
  background: var(--accent, #D62616);
  color: #fff;
  padding: 0.02em 0.18em 0.06em;
  border-radius: 8px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.cl-concept__more {
  max-height: 3.4em;
  overflow: hidden;
  transition: max-height .45s ease;
  position: relative;
}
.cl-concept__more:not(.is-open)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.8em;
  background: linear-gradient(to bottom, transparent, var(--bg, #FAF5EC));
  pointer-events: none;
}
.cl-concept__more.is-open { max-height: 800px; }
.cl-concept__more > * { min-height: 0; }
.cl-concept__toggle {
  background: transparent;
  border: none;
  padding: 8px 0 0;
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cl-concept__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ---------- Concept visual — 3 layouts (stack / hero / fan) ---------- */
.cl-cv {
  position: relative;
}
.cl-cv__photo {
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.cl-cv__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cl-cv__photo::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.18), transparent 40%);
  pointer-events: none;
  z-index: 1;
}
.cl-cv__photo::after { display: none; }
.cl-cv__label {
  position: relative;
  z-index: 2;
  margin: 10px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, .55);
  color: rgba(255, 255, 255, .95);
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

/* === Layout 1: STACK === diagonal cascade, light tilt, overlap */
.cl-cv--stack {
  aspect-ratio: 4 / 5;
  max-width: 420px;
}
.cl-cv--stack .cl-cv__photo {
  position: absolute;
  width: 64%;
  aspect-ratio: 1;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
}
.cl-cv--stack .cl-cv__photo--0 { top: 0;   left: 0;   transform: rotate(-3deg); z-index: 1; }
.cl-cv--stack .cl-cv__photo--1 { top: 28%; right: 0;  transform: rotate(2deg);  z-index: 2; }
.cl-cv--stack .cl-cv__photo--2 { top: 55%; left: 14%; transform: rotate(-2deg); z-index: 3; }
.cl-cv--stack:hover .cl-cv__photo--0 { transform: rotate(-5deg) translate(-4%, -4%); }
.cl-cv--stack:hover .cl-cv__photo--2 { transform: rotate(-4deg) translate(0, 4%); }

/* === Layout 2: HERO === 1 big + 2 small stacked */
.cl-cv--hero {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 10px;
  aspect-ratio: 5 / 4;
}
.cl-cv--hero .cl-cv__photo {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}
.cl-cv--hero .cl-cv__photo--0 {
  grid-row: span 2;
}
.cl-cv--hero:hover .cl-cv__photo--0 { transform: translateY(-3px); }
.cl-cv--hero:hover .cl-cv__photo--1 { transform: translateY(-3px); }
.cl-cv--hero:hover .cl-cv__photo--2 { transform: translateY(-3px); }

/* === Layout: ROW === horizontale cascade, 3 photos overlap zijdelings */
.cl-cv--row {
  aspect-ratio: 16 / 7;
  max-width: 100%;
}
.cl-cv--row .cl-cv__photo {
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  top: 50%;
  transform-origin: center;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
}
.cl-cv--row .cl-cv__photo--0 { left: 0;             transform: translateY(-50%) rotate(-4deg); z-index: 1; }
.cl-cv--row .cl-cv__photo--1 { left: 50%;           transform: translate(-50%, -50%) rotate(2deg); z-index: 3; }
.cl-cv--row .cl-cv__photo--2 { right: 0;            transform: translateY(-50%) rotate(-2deg); z-index: 2; }
.cl-cv--row:hover .cl-cv__photo--0 { transform: translateY(-50%) rotate(-6deg) translateX(-3%); }
.cl-cv--row:hover .cl-cv__photo--2 { transform: translateY(-50%) rotate(-4deg) translateX(3%); }

/* === Layout: STRIP === 3 photos op een rij, geen overlap, lichte tilt */
.cl-cv--strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  aspect-ratio: 16 / 6;
}
.cl-cv--strip .cl-cv__photo {
  position: relative;
  aspect-ratio: 1;
  align-self: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
}
.cl-cv--strip .cl-cv__photo--0 { transform: rotate(-2deg) translateY(-4%); }
.cl-cv--strip .cl-cv__photo--1 { transform: rotate(1deg) translateY(4%); }
.cl-cv--strip .cl-cv__photo--2 { transform: rotate(-1deg) translateY(-2%); }

/* === Layout: TRIO === 3 photos met variërende grootte op een rij */
.cl-cv--trio {
  aspect-ratio: 16 / 8;
  max-width: 100%;
}
.cl-cv--trio .cl-cv__photo {
  position: absolute;
  top: 50%;
  aspect-ratio: 1;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .18);
}
.cl-cv--trio .cl-cv__photo--0 { left: 0;     width: 30%; transform: translateY(-50%) rotate(-3deg); z-index: 1; }
.cl-cv--trio .cl-cv__photo--1 { left: 50%;   width: 42%; transform: translate(-50%, -50%) rotate(2deg); z-index: 3; }
.cl-cv--trio .cl-cv__photo--2 { right: 0;    width: 32%; transform: translateY(-50%) rotate(-2deg); z-index: 2; }
.cl-cv--trio:hover .cl-cv__photo--1 { transform: translate(-50%, -54%) rotate(3deg); }

/* === Layout 3: FAN === middle largest, 2 sides tilted behind */
.cl-cv--fan {
  aspect-ratio: 5 / 4;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cl-cv--fan .cl-cv__photo {
  position: absolute;
  width: 55%;
  aspect-ratio: 1;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
}
.cl-cv--fan .cl-cv__photo--0 {
  transform: translateX(-32%) rotate(-9deg);
  z-index: 1;
  filter: brightness(.92);
}
.cl-cv--fan .cl-cv__photo--1 {
  z-index: 3;
  transform: scale(1.08);
  width: 58%;
}
.cl-cv--fan .cl-cv__photo--2 {
  transform: translateX(32%) rotate(9deg);
  z-index: 1;
  filter: brightness(.92);
}
.cl-cv--fan:hover .cl-cv__photo--0 { transform: translateX(-42%) rotate(-14deg); filter: brightness(1); }
.cl-cv--fan:hover .cl-cv__photo--2 { transform: translateX(42%) rotate(14deg); filter: brightness(1); }

@media (min-width: 768px) {
  .cl-cv--stack { max-width: 100%; }
}
.cl-photo {
  aspect-ratio: 1;
  border-radius: 14px;
  border: 1.5px solid var(--ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.cl-photo::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 6px);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.cl-photo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 35%, rgba(255, 255, 255, .14) 0 14px, transparent 22px),
    radial-gradient(circle at 70% 65%, rgba(255, 255, 255, .10) 0 10px, transparent 16px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.cl-photo__label {
  position: relative;
  margin: 10px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, .5);
  color: rgba(255, 255, 255, .92);
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

/* ---------- Pull quote ---------- */
.cl-pullquote {
  margin-top: 24px;
  padding: 16px 18px;
  border-left: 4px solid var(--accent);
  background: var(--cream);
  border-radius: 10px;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .05);
}

/* ---------- Menu accordion ---------- */
.cl-menu {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cl-menu-cat {
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 22px rgba(0, 0, 0, .06);
}
.cl-menu-cat__head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--ink);
  min-height: 56px;
  transition: background .15s ease;
}
.cl-menu-cat__head:hover { background: rgba(0, 0, 0, .02); }
.cl-menu-cat__num {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
}
.cl-menu-cat__title {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -.01em;
  flex: 1;
}
.cl-menu-cat__count {
  font-size: 12px;
  color: var(--ink-mute);
  font-family: var(--font-display);
  font-weight: 500;
}
.cl-menu-cat__chev {
  font-size: 18px;
  color: var(--ink-soft);
  transition: transform .25s ease;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.cl-menu-cat.is-open .cl-menu-cat__chev { transform: rotate(180deg); }

.cl-menu-cat__list {
  list-style: none;
  margin: 0;
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
}
.cl-menu-cat.is-open .cl-menu-cat__list {
  max-height: 500px;
  padding: 0 18px 14px;
}
.cl-menu-cat__list li {
  padding: 8px 0;
  font-size: 15px;
  color: var(--ink-soft);
  border-top: 1px dashed var(--rule);
}
.cl-menu-cat__list li:first-child { border-top: 1.5px dashed var(--rule); margin-top: 4px; padding-top: 12px; }

/* ---------- Menu chips (gestackt, full-width) + 2-up dish grid ---------- */
.cl-chips-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 22px;
}
.cl-chip-stack {
  width: 100%;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  padding: 16px 22px;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  cursor: pointer;
  text-align: center;
  transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .15s ease;
  min-height: 56px;
  text-align: left;
  position: relative;
}
.cl-chip-stack:hover {
  background: rgba(0, 0, 0, .04);
  transform: translateY(-1px);
}
.cl-chip-stack.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08),
              0 12px 28px color-mix(in oklab, var(--accent) 32%, transparent);
}
/* Glow uit specifiek voor de Sides-tab — die staat vlak boven de productfoto's en
   creëert anders een zichtbare lichtband naar de grid. */
.cl-chip-stack.is-active[data-chip="sides"] {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

.cl-dish-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@keyframes clDishFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.cl-dish {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cl-dish__photo {
  aspect-ratio: 1;
  border-radius: 14px;
  border: 1.5px solid var(--ink);
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255, 90, 58, 0.65) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(255, 170, 68, 0.5) 0%, transparent 45%),
    radial-gradient(ellipse at center, #d62616 0%, #6a0e08 90%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}
.cl-dish__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.cl-dish__photo:has(img) {
  background: #fff;
}
.cl-dish__photo:has(img)::before,
.cl-dish__photo:has(img)::after {
  display: none;
}
.cl-dish__photo::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 6px);
  mix-blend-mode: multiply;
}
.cl-dish__photo::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 25% 35%, rgba(255, 255, 255, .14) 0 14px, transparent 22px),
    radial-gradient(circle at 70% 65%, rgba(255, 255, 255, .10) 0 10px, transparent 16px);
  mix-blend-mode: screen;
}
.cl-dish__photo-label {
  position: relative;
  margin: 10px;
  padding: 3px 7px;
  background: rgba(0, 0, 0, .5);
  color: rgba(255, 255, 255, .9);
  border-radius: 3px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.cl-dish__name {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: -.01em;
  line-height: 1.15;
  text-align: left;
  color: var(--ink);
  text-wrap: balance;
}

@media (min-width: 768px) {
  .cl-chips-stack { gap: 12px; }
  .cl-chip-stack { font-size: 18px; padding: 18px 26px; min-height: 64px; }
  .cl-dish-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  .cl-dish__name { font-size: 16px; }
}

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

/* ---------- Stats: 1 hero stat + 3 mini ---------- */
.cl-hero-stat {
  border: 1.5px solid var(--ink);
  border-radius: 18px;
  padding: 28px 22px;
  text-align: center;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08),
              0 16px 40px color-mix(in oklab, var(--brand-color, var(--accent)) 28%, transparent);
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.cl-hero-stat::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .15), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(0, 0, 0, .2), transparent 55%);
  pointer-events: none;
}
.cl-hero-stat__lbl {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .9;
  margin-bottom: 8px;
  position: relative;
}
.cl-hero-stat__arrow { margin-right: 6px; }
.cl-hero-stat__v {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(36px, 9vw, 64px);
  letter-spacing: -.02em;
  line-height: 1;
  position: relative;
}

.cl-mini-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.cl-mini-stat {
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 14px rgba(0, 0, 0, .05);
}
.cl-mini-stat__v {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.cl-mini-stat__arrow {
  color: var(--brand-color, var(--accent));
  font-size: 11px;
  margin-right: 3px;
}
.cl-mini-stat__l {
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 4px;
  letter-spacing: .02em;
}

/* ---------- Stat grid — clean equal cards, één primary card uitgelicht ---------- */
.cl-statgrid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cl-statgrid__card {
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 130px;
  justify-content: center;
  text-align: left;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 22px rgba(0, 0, 0, .04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cl-statgrid__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 14px 32px rgba(0, 0, 0, .08);
}
.cl-statgrid__card.is-primary {
  grid-column: 1 / -1;
  border-color: transparent;
  padding: 32px 24px;
  min-height: 170px;
  gap: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08),
              0 20px 44px color-mix(in oklab, var(--accent) 28%, transparent);
  position: relative;
  overflow: hidden;
  margin-bottom: 4px;
}
.cl-statgrid__card.is-primary::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 20% 20%, rgba(255, 255, 255, .18), transparent 55%),
    radial-gradient(60% 80% at 80% 80%, rgba(0, 0, 0, .18), transparent 55%);
  pointer-events: none;
}
.cl-statgrid__v {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(24px, 5.5vw, 32px);
  letter-spacing: -.025em;
  line-height: 1;
  position: relative;
  white-space: nowrap;
}
.cl-statgrid__card.is-primary .cl-statgrid__v {
  font-size: clamp(42px, 11vw, 64px);
  letter-spacing: -.03em;
  line-height: .95;
}
.cl-statgrid__l {
  font-size: 13px;
  color: var(--ink-mute);
  letter-spacing: .01em;
  line-height: 1.35;
  position: relative;
  font-weight: 500;
}
.cl-statgrid__card.is-primary .cl-statgrid__l {
  color: rgba(255, 255, 255, .9);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .cl-statgrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 32px;
  }
  .cl-statgrid__card.is-primary {
    grid-column: 1 / -1;
    padding: 44px 36px;
    min-height: 220px;
  }
  .cl-statgrid__l { font-size: 14px; }
}
@media (min-width: 1024px) {
  .cl-statgrid__card { padding: 30px 26px; min-height: 160px; }
  .cl-statgrid__card.is-primary { padding: 56px 40px; }
}

/* ---------- Cijfers sectie als rode anchor — uitgeschakeld ---------- */
.cl-stats-ed {
  margin-top: 24px;
  max-width: 640px;
  margin-left: 0;
  margin-right: auto;
}
.cl-stats-ed__primary {
  text-align: left;
  padding: 8px 0 22px;
  margin-bottom: 22px;
  border-bottom: 1.5px dashed var(--rule);
}
.cl-stats-ed__big {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(36px, 10vw, 56px);
  letter-spacing: -.03em;
  line-height: .95;
  color: var(--accent);
  white-space: nowrap;
}
.cl-stats-ed__bigl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 12px;
}
.cl-stats-ed__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 18px;
}
.cl-stats-ed__cell {
  text-align: left;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cl-stats-ed__v {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-stats-ed__l {
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 6px;
  line-height: 1.3;
}

/* ---------- Stats STRIP — alle stats op een rij met hairlines ---------- */
.cl-stats-strip {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
}
.cl-stats-strip__cell {
  background: var(--bg);
  padding: 22px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 110px;
}
.cl-stats-strip__cell.is-primary {
  grid-column: 1 / -1;
  background: var(--bg);
  padding: 30px 22px;
  min-height: 140px;
}
.cl-stats-strip__v {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: clamp(22px, 5vw, 28px);
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}
.cl-stats-strip__cell.is-primary .cl-stats-strip__v {
  font-size: clamp(40px, 10vw, 64px);
  color: var(--accent);
  letter-spacing: -.03em;
}
.cl-stats-strip__l {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 8px;
  letter-spacing: .02em;
  line-height: 1.3;
}
.cl-stats-strip__cell.is-primary .cl-stats-strip__l {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 12px;
}

@media (min-width: 768px) {
  .cl-stats-ed__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  .cl-stats-strip { grid-template-columns: repeat(3, 1fr); }
  .cl-stats-strip__cell.is-primary { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .cl-stats-ed { max-width: 760px; }
  .cl-stats-strip { grid-template-columns: repeat(6, 1fr); }
}

/* ---------- Reqs — kalm tekst-blok met checklist ---------- */
.cl-reqs-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
}
.cl-reqs-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}
.cl-reqs-item__check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 900;
  margin-top: 2px;
}
.cl-reqs-item__h { color: var(--ink); }
.cl-reqs-item__p { color: var(--ink-soft); }

/* OLD carousel rules kept but unused */
.cl-reqs-section { overflow: hidden; }

/* ---------- Reqs cards — uitgebreid met icon + reassurance footer ---------- */
.cl-reqs-grid {
  grid-template-columns: 1fr !important;
  gap: 12px;
}
.cl-req-card {
  padding: 20px 22px;
  gap: 10px;
  flex-direction: column;
  align-items: flex-start;
}
/* Hover-effect uit (was lift + grotere shadow vanuit .benefit) */
.cl-req-card:hover {
  transform: none;
  box-shadow: var(--card-shadow);
}
.cl-req-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-bottom: 4px;
}
.cl-req-card__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  border-radius: 10px;
}
.cl-req-card__icon svg {
  width: 22px;
  height: 22px;
}
.cl-req-card .benefit__num {
  margin-bottom: 0;
}
.cl-req-card .benefit__title {
  font-size: 18px;
  line-height: 1.1;
  margin: 0;
}
.cl-req-card .benefit__copy {
  font-size: 14px;
  line-height: 1.45;
  margin: 2px 0 0;
}
.cl-req-card__check { display: none; }

@media (min-width: 768px) {
  .cl-reqs-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 16px; }
  .cl-req-card {
    padding: 22px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .cl-req-card__top { width: auto; align-items: flex-start; }
  .cl-req-card .benefit__title { font-size: 20px; }
  .cl-req-card .benefit__copy { font-size: 14px; }
}
.cl-swipe-hint {
  margin-left: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--ink-mute);
}
.cl-reqs-scroll {
  margin-top: 28px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0 16px;
  /* hide scrollbar (zachte UX) */
  scrollbar-width: none;
}
.cl-reqs-scroll::-webkit-scrollbar { display: none; }
.cl-reqs-scroll__inner {
  display: flex;
  gap: 14px;
  padding-right: 22px;
}
.cl-req {
  flex: 0 0 78%;
  max-width: 320px;
  scroll-snap-align: start;
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 22px rgba(0, 0, 0, .06);
}
.cl-req__num {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.cl-req__title { margin: 0 0 8px; }
.cl-req__p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* ---------- Contact — 2-paden + trust strip ---------- */
.cl-paths {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.cl-path {
  background: var(--cream);
  border: 1.5px solid var(--ink);
  border-radius: 18px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 10px 28px rgba(0, 0, 0, .06);
}
.cl-path--callback {
  background: #fff;
  position: relative;
}

/* Featured-treatment verhuist van callback naar Calendly (per user-verzoek:
   Plan afspraak is het primary CTA en staat bovenaan). */
.cl-path--calendly {
  position: relative;
}
@media (min-width: 768px) {
  .cl-path--calendly {
    border-width: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 18px 40px rgba(214, 38, 22, 0.08);
  }
  .cl-path--calendly::before {
    content: "Aanbevolen";
    position: absolute;
    top: -10px;
    right: 22px;
    background: var(--accent, #D62616);
    color: #fff;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 5px 10px 4px;
    border-radius: 999px;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(214, 38, 22, 0.25);
  }
}
.cl-path__head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cl-path__ico {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border-radius: 12px;
  flex-shrink: 0;
}
.cl-path__ico svg { width: 26px; height: 26px; }
.cl-path__ico--wa {
  color: #fff;
  background: #25D366;
}
.cl-path__t {
  margin: 0;
  line-height: 1.1;
}
.cl-path__s {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.cl-path__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cl-path__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.cl-path__bullets li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 900;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}
.cl-path__form {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  gap: 12px;
}
.cl-path__form .form__note {
  margin-top: 0;
  font-size: 11px;
}

/* TRUST STRIP */
.cl-trust {
  margin-top: 32px;
  padding: 22px 22px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
  font-size: 13px;
  line-height: 1.4;
}
.cl-trust__item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, .82);
}
.cl-trust__item b {
  color: #fff;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 16px;
}
.cl-trust__stars {
  color: #F2C94C;
  letter-spacing: .03em;
  font-size: 13px;
}

@media (min-width: 768px) {
  .cl-paths {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 14px 16px;
    align-items: start;
  }
  .cl-path { padding: 24px 20px; }
  /* Plan afspraak: featured banner bovenaan, full-width */
  .cl-path--calendly {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  /* 3 alternatieven daaronder in een rij, top-aligned zodat form
     vrij naar beneden kan groeien zonder lege ruimte bij anderen */
  .cl-path--wa       { grid-column: 1; grid-row: 2; }
  .cl-path--callback { grid-column: 2; grid-row: 2; }
  .cl-path--mail     { grid-column: 3; grid-row: 2; }
  .cl-trust {
    grid-template-columns: repeat(4, 1fr);
    padding: 24px 28px;
    justify-content: center;
  }
}
@media (min-width: 1100px) {
  .cl-paths {
    gap: 16px 22px;
  }
}

.cl-cta-paths {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 28px 0 32px;
}
.cl-cta-path {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 22px rgba(0, 0, 0, .06);
  text-decoration: none;
  color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease;
  min-height: 64px;
}
.cl-cta-path:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 14px 32px rgba(0, 0, 0, .1);
}
.cl-cta-path__ico {
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: 20px;
  flex-shrink: 0;
}
.cl-cta-path--wa .cl-cta-path__ico { background: #25D366; }
.cl-cta-path--call .cl-cta-path__ico { background: var(--ink); }
.cl-cta-path__body { flex: 1; min-width: 0; }
.cl-cta-path__t {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -.01em;
}
.cl-cta-path__s {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.cl-cta-path .arrow {
  font-size: 18px;
  color: var(--ink-mute);
  transition: transform .15s ease;
}
.cl-cta-path:hover .arrow { transform: translateX(3px); color: var(--ink); }

.cl-form {
  max-width: 540px;
  margin: 0 auto;
}
.cl-form__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--rule);
}
.cl-form__lbl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}
.cl-form__sub {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 4px;
}
.cl-form__expand {
  background: transparent;
  border: 1.5px dashed var(--rule);
  border-radius: 10px;
  padding: 10px 14px;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-mute);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cl-form__expand:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
  background: rgba(0, 0, 0, .02);
}

/* ---------- Tablet ---------- */
@media (min-width: 768px) {
  .cl-hero { padding-bottom: 80px; }
  .cl-hero__brandbar { gap: 16px; }
  .cl-hero__brandlogo { width: 64px; height: 64px; }
  .cl-hero__brandname { font-size: 16px; }
  .cl-hero__cta { flex-direction: row; align-items: center; }
  .cl-hero__cta .btn { width: auto; }

  .cl-hero__grid {
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
  }
  .cl-hero__photo { aspect-ratio: 4 / 5; }

  .cl-concept {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }
  .cl-concept__grid { gap: 14px; }

  .cl-cta-paths {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
  }
  .cl-cta-path { flex-direction: column; align-items: flex-start; padding: 22px 20px; text-align: left; }
  .cl-cta-path__body { width: 100%; }
  .cl-cta-path .arrow { align-self: flex-end; margin-top: -22px; }

  .cl-reqs-scroll { overflow: visible; padding: 0; margin-top: 32px; }
  .cl-reqs-scroll__inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 18px;
    padding-right: 0;
  }
  .cl-req { flex: 1; max-width: none; }
  .cl-swipe-hint { display: none; }

  .cl-hero-stat { padding: 36px 28px; }
  .cl-hero-stat__v { font-size: clamp(48px, 5vw, 64px); }
}

/* ---------- Desktop ---------- */
@media (min-width: 1024px) {
  .cl-hero { min-height: clamp(820px, 100vh, 1100px); padding: calc(var(--nav-h) + 60px) 0 120px; }
  .cl-hero__inner { max-width: 1040px; }
  .cl-hero__title { font-size: clamp(64px, 9vw, 112px); }
  .cl-hero__sub { max-width: 580px; font-size: 19px; }

  .cl-concept { gap: 72px; }
}

/* Menu section — white background + frameless photos */
#menu.section { background: #fff; }
#menu .cl-dish__photo {
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
#menu .cl-dish__photo:has(img) { background: transparent; }
#menu .cl-dish__photo img { object-fit: contain; }

/* Zebra rhythm — menu is the white "interlude"; shift alt after it so alternation keeps working */
#cijfers.section,
#werkwijze.section,
#contact.section { background: var(--bg-alt); }
#keuken.section,
#faq.section { background: var(--bg); }

/* ---------- Desktop centering (≥1024) ----------
   Per user-verzoek: alle sectie-koppen centraal uitlijnen op desktop.
   Mobile blijft links-uitgelijnd (default). Concept gaat van 2-kolom
   (copy links, photos rechts) naar 1-kolom (copy gecentreerd bovenaan,
   photos gecentreerd eronder) — past mooi bij stack-layout. */
@media (min-width: 768px) {
  .section__head {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  /* Stats (Cijfers) editorial: centreer ook het body-gedeelte */
  .cl-stats-ed {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .cl-stats-ed__primary { text-align: center; }
  .cl-stats-ed__big,
  .cl-stats-ed__bigl { text-align: center; }
  .cl-stats-ed__cell {
    text-align: center;
    align-items: center;
  }
  .cl-stats-ed__v,
  .cl-stats-ed__l { text-align: center; width: 100%; }
}

/* ---------- Hero text alignment fix
   Hero__inner had max-width 1040 (uit virtualbite.css desktop @media),
   terwijl de nav .container max-width 1200 gebruikt. Daardoor zat hero-tekst
   80px inset aan elke kant tov de logo (links) en plan-afspraak knop (rechts).
   Forceer hero__inner naar dezelfde max-width als de nav. */
@media (min-width: 768px) {
  .hero .hero__inner {
    max-width: var(--container, 1200px);
  }
}

/* ---------- Hero eyebrow: rood doorzichtig op de photo-bg (alleen mobile)
   Subtiele rode tint ipv default wit-transparant — past beter bij de
   warme peachy hero photo en geeft de eyebrow brand-presence.
   Op desktop blijft de eyebrow wit-transparant (default). */
@media (max-width: 767px) {
  .hero[data-hero-bg="photo"] .hero__eyebrow {
    background: rgba(214, 38, 22, 0.22);
    border-color: rgba(214, 38, 22, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
  }
  .hero[data-hero-bg="photo"] .hero__eyebrow .dot {
    background: #D62616;
    box-shadow: 0 0 6px rgba(214, 38, 22, 0.6);
  }
}

/* ---------- Hero title highlight block (photo bg)
   "Chickito Chicken" krijgt een rood highlight-blok, "in jouw keuken"
   blijft wit. Eerste regel als anchor, tweede regel als statement. */
.hero[data-hero-bg="photo"] .hero__title { color: #fff; }
.hero[data-hero-bg="photo"] .hero__title-line:first-child {
  display: inline-block;
  background: #D62616;
  color: #fff;
  font-family: "Lilita One", "Archivo Black", system-ui, sans-serif;
  padding: 0.04em 0.22em 0.08em;
  border-radius: 10px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  letter-spacing: -0.02em;
}
/* Op mobile: bump "Chickito Chicken" zodat het rode highlight-block
   helemaal doorloopt tot de rechterkant van de hamburger-knop.
   Breakpoint = 480px om ook iPhone Pro Max (430-440px) te dekken. */
/* Bump "Chickito Chicken" + verklein "in jouw keuken" zodat de brand-naam
   dominant blijft en het rode highlight-block visueel uitlijnt met de tweede regel.
   Werkt op alle viewports. */
.hero[data-hero-bg="photo"] .hero__title-line:first-child {
  font-size: 1.10em;
}
.hero[data-hero-bg="photo"] .hero__title-line:nth-child(2) {
  font-size: 0.92em;
}
@media (max-width: 480px) {
  .hero[data-hero-bg="photo"] .hero__title-line:first-child {
    font-size: 1.09em;
    padding: 0.04em 0.18em 0.08em;
    line-height: 1;
  }
  .hero[data-hero-bg="photo"] .hero__title-line:nth-child(2) {
    font-size: 0.94em;
  }
}
.hero[data-hero-bg="photo"] .hero__title-line:nth-child(2) {
  margin-top: 0.16em;
  display: inline-block;
}
.hero[data-hero-bg="photo"] .hero__title em {
  color: #fff;
  font-style: normal;
  position: relative;
  display: inline-block;
  isolation: isolate;
}
/* Rode underline accent onder "jouw keuken" — verbindt visueel met het
   rode highlight-block op de eerste regel zonder de hele tekst rood te maken.
   z-index: -1 zorgt dat de descender van "j" VOOR de underline staat. */
.hero[data-hero-bg="photo"] .hero__title em::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.04em;
  height: 6px;
  background: #D62616;
  border-radius: 3px;
  opacity: 0.95;
  z-index: -1;
}

/* Hero secondary CTA "Bekijk het concept": geen witte hover (rest blijft default) */
.hero__cta .btn--ghost:hover {
  background: transparent;
  color: #fff;
}

/* ---------- Hero content position op mobile met photo-bg
   De foto heeft de subject (man + tender) in de bovenste helft en dark
   gradient + cream in de onderste helft. Door content omlaag te zetten
   sits-ie op het donkere/cream gedeelte → veel betere leesbaarheid. */
@media (max-width: 767px) {
  .hero[data-hero-bg="photo"] {
    align-items: flex-end;
    padding-bottom: 88px;
    /* Iets korter dan full screen — laat zien dat er meer is */
    min-height: 88svh;
  }
  /* Spacing tussen hero blokken: meer ademing tov default */
  .hero__eyebrow { margin-bottom: 28px; }
  .hero__title { margin-bottom: 28px; }
  .hero__sub { margin-bottom: 28px; }
  .hero__cta { gap: 12px; }

  /* Secondary CTA "Bekijk het concept" — compact link, géén underline. */
  .hero__cta .btn--ghost {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 6px 0;
    height: auto;
    min-height: 0;
    width: auto;
    align-self: center;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }
  .hero__cta .btn--ghost:hover { color: #fff; background: transparent !important; }
  /* Pijl-svg in "Bekijk het concept" verbergen op mobile; de bouncing
     scroll-cue onderaan de hero is de visuele "naar het concept"-aanwijzing. */
  .hero__cta .btn--ghost svg { display: none; }

  /* Bouncing scroll cue ↓ onderaan de hero. Donker gekleurd zodat het
     visible blijft als het cream-fade onderaan in werking komt (smooth
     transition naar de volgende sectie). */
  .hero[data-hero-bg="photo"]::after {
    content: "↓";
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(27, 24, 21, 0.65);
    font-size: 22px;
    line-height: 1;
    animation: cl-hero-cue-bounce 1.8s ease-in-out infinite;
    z-index: 2;
    pointer-events: none;
  }
}
@keyframes cl-hero-cue-bounce {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.7; }
  50%      { transform: translate(-50%, 6px); opacity: 1; }
}