@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=Merriweather:wght@700;900&family=Mulish:ital,wght@0,400;0,600;0,700;0,800;0,900;1,600;1,700&display=swap');/* BC color tokens — scoped to .bc-cm to avoid Blocksy theme bleed.
   All 12 keys mirror brand.config.json v2 (commit efe299c, 2026-05-08).
   OQ-2 resolved: primary = #ee7336 (reference HTML wins over old config #e96d2e).
   Hover convention: primaryHover swaps brand bicolor (orange↔teal) — interaction
   signal, not shade variation. Do NOT derive hover via color-mix() or hsl() darken.

   Brand 2.0 (locked, 2026-07-02): --bc-primary en --bc-white geflipt naar de
   nieuwe hexen; --bc-dark en --bc-green toegevoegd. --bc-dark bestond al als
   donkerbruin (#1e140c, gebruikt door o.a. offer-bar.css); dat token is nu
   Brand 2.0 diepgroen. Oude waarden staan als rollback-referentie hieronder.
   Rollback: --bc-primary #ee7336, --bc-cream #fdf6ec, --bc-white #ffffff,
   --bc-dark (oud, donkerbruin) #1e140c. */.bc-cm {
  /* Brand orange */
  --bc-primary: #ee7437;
  --bc-primary-hover: #047158;
  --bc-primary-light: #f4a039;

  /* Backgrounds */
  --bc-cream: #ffeaca;

  /* Dark palette */
  --bc-dark: #242422;
  --bc-dark-alt: #1a1a2e;

  /* Brand teal */
  --bc-teal: #0f8069;

  /* Brand 2.0 alias: zelfde hex als --bc-teal (#0f8069), toegevoegd als
     nieuw semantisch token per Brand 2.0-plan. --bc-teal blijft bestaan
     voor bestaande component-referenties (o.a. faq.css hover). */
  --bc-green: #0f8069;

  /* Text scale */
  --bc-text: #1a1a1a;
  --bc-text-medium: #333333;
  --bc-text-light: #231f20;
  --bc-text-muted: #999999;

  /* Utility */
  --bc-white: #fff9f0;

  /* Dark-overlay semantic tokens: alpha-varianten van --bc-dark. v0.9.2:
     gemigreerd naar de Brand 2.0 --bc-dark-basis (#242422, rich black) — was
     eerder bewust losstaand gelaten van het oude donkerbruin (#1e140c) tijdens
     de flip zelf, nu meegenomen als restpunt-cleanup. */
  --bc-overlay-strong: rgba(36, 36, 34, 0.92);
  --bc-overlay-medium: rgba(36, 36, 34, 0.60);
}/* External @import url(...) is NOT inlined by postcss-import — passes through to dist/. Correct behavior. *//* Caveat 600 = handschrift-captions (polaroid-stack, FB-ronde C E2). */.bc-cm {
  /* iteration-3 (Bram FB 2026-06-15): headings → Mulish (sans). All-Merriweather read as "bloggy"; live BC uses bold sans. Skill: serif-everywhere = #1 AI-tell. */
  --bc-font-heading: 'Mulish', system-ui, sans-serif;
  --bc-font-body: 'Mulish', system-ui, sans-serif;

  /* Text sizes */
  --bc-text-base: 1rem;
  --bc-text-sm: 0.875rem;
  --bc-text-lg: 1.0625rem;
  --bc-text-h3: 1.1875rem;
  --bc-text-h2: 2.125rem;
  --bc-text-h1: 2.75rem;

  /* Line heights */
  --bc-leading-tight: 1.35;
  --bc-leading-snug: 1.45;
  --bc-leading-relaxed: 1.6;
  --bc-leading-loose: 1.75;

  /* Letter spacing */
  --bc-tracking-tight: -0.0625rem;
  --bc-tracking-wide: 0.09375rem;
}/* 12-step spacing scale per D-08. --bc-space-12 = 6.25rem = 100px (OQ-3 resolved). */.bc-cm {
  --bc-space-1: 0.25rem;
  --bc-space-2: 0.5rem;
  --bc-space-3: 0.75rem;
  --bc-space-4: 1rem;
  --bc-space-5: 1.25rem;
  --bc-space-6: 1.5rem;
  --bc-space-7: 2rem;
  --bc-space-8: 2.5rem;
  --bc-space-9: 3rem;
  --bc-space-10: 4rem;
  --bc-space-11: 4.5rem;
  --bc-space-12: 6.25rem;

  /* Horizontal page gutter shared by every block's inner container
     (.bc-*-inner { padding: 0 var(--bc-gutter) }). One source of truth so the
     mobile gutter can be tuned in one place instead of per block. */
  --bc-gutter: 32px;
}/* Mobile: tighter side gutter so content sits closer to the screen edge
   (Bram 2026-06-23: 32px felt too wide on phones). Desktop stays 32px. */@media (max-width: 768px) {
  .bc-cm {
    --bc-gutter: 18px;
  }
}/* 4 border-radius tokens: sm/md/lg from reference HTML + full for pill/circle shapes. */.bc-cm {
  --bc-radius-sm: 4px;
  --bc-radius-md: 20px;
  --bc-radius-lg: 24px;
  --bc-radius-full: 9999px;
}/* Layered shadows extracted from reference HTML (cocktail-workshop-teambuilding-styled.html). */.bc-cm {
  --bc-shadow-card: 0 4px 6px rgba(0,0,0,0.04), 0 12px 40px rgba(0,0,0,0.08);
  --bc-shadow-lift: 0 8px 40px rgba(0,0,0,0.12);
}/* BC scoped reset — minimal, only box-sizing + media defaults.
   Do NOT add typography margin resets here (Phase 9 component CSS owns those). */.bc-cm,
.bc-cm * {
  box-sizing: border-box;
}.bc-cm img,
.bc-cm video {
  height: auto;
  display: block;
}/* NOTE: do NOT add `max-width: 100%` to .bc-cm img — bc-hero__bg +
   bc-hero__overlay intentionally extend beyond parent (width 130% / 120%)
   to match REF decorative-overflow pattern. Components needing clip-to-parent
   must declare max-width per-rule. *//* === Brand 2.0 — Blakson Hustle display font === *//* Brand 2.0 — Blakson Hustle display font.
   Font files leven in src/fonts/, gekopieerd naar dist/fonts/ door
   build-assets.mjs. Woff2 eerst (kleiner, brede support), woff als fallback. */@font-face {
  font-family: 'Blakson Hustle';
  src: url('fonts/BlaksonHustle-Regular.woff2') format('woff2'),
       url('fonts/BlaksonHustle-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}/* === Brand 2.0 — pagina-ritme (proof-bands, slants, swoosh-ankers) ===
 * Moet vóór de components staan zodat component-specifieke overrides
 * (hero-patch, related-pages-slider, text-image-accent) kunnen winnen. *//* bc-rhythm: Brand 2.0 pagina-ritme, proof-bands, slant-connectors,
 * band-swoosh-ankers en scanbaarheid-generics.
 *
 * Bron: bc-content-machine/configs/north-star-move1.mjs (toggle-preview),
 * gelockte toggles (2026-07-02): t1, t2, s1, s2, s4, br2, br3, br6, br7,
 * br8 (structuur-restje), br9, br10. Rejected toggles (t3, b1-b4, s3, br1,
 * br4, br5, br11) zijn NIET geport.
 *
 * De preview-config draaide op scoped `.t1-on`/`.br2-on`-parent-classes; in
 * de echte pipeline zijn deze toggles allemaal permanent AAN, dus de
 * `.tX-on`/`.brX-on`-prefixes vervallen. De targetclasses komen uit
 * scripts/render-blocks.mjs (`applyPresentation`, Task 3):
 *   .bc-rx--tone-cream | .bc-rx--tone-dark   op het sectie-root-element
 *   .bc-rx--slant-in   | .bc-rx--slant-out   op het sectie-root-element
 *   <div class="bc-swx bc-swx--stats|--gallery|--footer"> vlak voor het blok
 *
 * Component-specifieke stukken (hero-patch/breed, related-pages-slider,
 * text-image-fotohoek-accent) staan in hun eigen component-CSS, niet hier.
 *//* ── overflow-clip op de pagina-wrapper: band-swooshes mogen breed uitwaaieren
 *    zonder een horizontale scrollbar te veroorzaken (br2). ── */.bc-cm {
  overflow-x: clip;
  /* Brand 2.0 paginawit als ondergrond van de hele content-area (Bram-keuze
     2026-07-02 bij de publish-flip); banden (cream/dark) en blokken met
     eigen bg liggen hier gewoon overheen. */
  background: var(--bc-white);
}/* ════════════════════════════════════════════════════════════════════════
   t1: Toon-ritme, proof-band (stats + logo-strip) cream, gallery-band donker

   Specificity-note: rhythm.css importeert VOOR de components (zie index.css),
   dus bij gelijke specificity wint de later-geimporteerde component-regel
   (bv. .bc-stats{background:var(--bc-white)} in stats.css). Elke tone-regel
   die een bestaande component-achtergrond moet overrulen is daarom
   gecompound met de eigen block-class (.bc-stats.bc-rx--tone-cream,
   .bc-gallery.bc-rx--tone-dark) zodat hij op source-order-onafhankelijke
   specificity wint, in plaats van op de kale .bc-rx--tone-* te vertrouwen.
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-rx--tone-cream {
  background: var(--bc-cream);
}.bc-cm .bc-stats.bc-rx--tone-cream {
  background: var(--bc-cream);
}/* logo-strip-specifieke padding-regel (t1): full-bleed cream band net als de
 * preview, met dezelfde box-shadow-vrije breedte-truc (max-width:none +
 * gecentreerde padding via max(gutter, helft van de resterende ruimte)). */.bc-cm .bc-logo-strip.bc-rx--tone-cream {
  max-width: none;
  margin: 0;
  padding: 4px max(var(--bc-gutter), calc((100% - 1300px) / 2)) 52px;
  background: var(--bc-cream);
}/* proof-band is een doorlopend blok: logo-strip niet apart in-animeren na de
 * stats (Bram-fb: "vertrouwd door" komt anders later in dan de USP-balk). */.bc-cm .bc-logo-strip.bc-rx--tone-cream {
  opacity: 1;
  transform: none;
  transition: none;
}/* Donkere gallery-band (t1). Hex #0e211c is de gelockte toggle-waarde, teal-
 * zwart in lijn met --bc-teal, NIET hetzelfde als --bc-dark (#242422). */.bc-cm .bc-rx--tone-dark {
  background: #0e211c;
}.bc-cm .bc-gallery.bc-rx--tone-dark {
  background: #0e211c;
  padding: 72px 0;
}/* ════════════════════════════════════════════════════════════════════════
   t2: Slant-connectors, zelfde diagonale taal als related-pages (56px, hier
   48px), op de band-randen. slant-in is instap, slant-out is uitstap.
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-rx--slant-in {
  clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 100%);
  margin-top: -48px;
}.bc-cm .bc-rx--slant-out {
  clip-path: polygon(0 0, 100% 48px, 100% 100%, 0 100%);
  margin-top: -48px;
  position: relative;
}/* Per-sectie padding-compensatie (t2, verbatim uit de preview): de slant
 * "eet" 48px hoogte op, dus elke sectie compenseert met haar eigen
 * basis-padding + 48px zodat de content niet onder de diagonaal schuift. */.bc-cm .bc-stats.bc-rx--slant-in {
  padding-top: 104px;
}.bc-cm .bc-text-image.bc-rx--slant-out {
  background: var(--bc-white);
  padding-top: calc(64px + 48px);
}.bc-cm .bc-gallery.bc-rx--slant-in {
  padding-top: calc(72px + 48px);
}.bc-cm .bc-reviews.bc-rx--slant-out {
  padding-top: calc(64px + 48px);
}/* .bc-cta.bc-rx--slant-in draagt geen eigen padding-compensatie in de bron
 * (de cta-achtergrond is een bg-image, geen vlakke kleur die de slant-hap
 * zichtbaar maakt): alleen clip-path + margin-top uit de generieke regel. *//* Blog-band (fase 2 blog-pass, e3): op page_type blog geeft de composer de
 * cream text-image-sectie tone:cream + slant:in met een bc-swx--stats
 * swoosh-anker op de band-grens, en het blok erna (de faq) slant:out.
 * Zelfde compensatie-formule als hierboven (basis-padding 64px + 48px
 * slant-hap). Money-pages verschuiven niet: de composer geeft text-image
 * daar nooit slant-in en de faq nooit slant-out, dus deze selectors matchen
 * daar niet. bc-faq heeft al een eigen witte achtergrond (faq.css), die de
 * exit-diagonaal zichtbaar maakt, zoals .bc-text-image.bc-rx--slant-out. */.bc-cm .bc-text-image.bc-rx--slant-in {
  padding-top: calc(64px + 48px);
}.bc-cm .bc-faq.bc-rx--slant-out {
  padding-top: calc(64px + 48px);
}/* ════════════════════════════════════════════════════════════════════════
   br2: Swoosh-ankers, losse anker-divs op de sectie-grens (bc-swx, Task 3),
   met een eigen stacking-context zodat de swoosh over BEIDE aangrenzende
   secties heen ligt zonder door een slant-clip te worden afgesneden.
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-swx {
  height: 0;
  position: relative;
  z-index: 6;
}.bc-cm .bc-swx::before {
  content: "";
  position: absolute;
  pointer-events: none;
  background: url("assets/swoosh-orange-mid.png") no-repeat center / contain;
}/* Hero/stats-grens: rechts van de rand af, over beide vlakken.
 * right via min(): op groot scherm -150px, op laptop schuift hij verder naar
 * buiten zodat hij nooit over het 100-stat-cijfer op de content-rand valt. */.bc-cm .bc-swx--stats::before {
  right: min(-150px, calc(-560px + max(185px, (100vw - 1160px) / 2)));
  top: -160px;
  width: 560px;
  height: 307px;
  transform: rotate(178deg);
}/* Gallery/reviews-grens: linksonder, over de foto's en de cream heen. */.bc-cm .bc-swx--gallery::before {
  left: -130px;
  top: -215px;
  width: 480px;
  height: 262px;
  background-image: url("assets/swoosh-orange-full.png");
}/* Faq/footer-grens: groter, valt maar deels in de footer.
 * Zelfde min()-mechaniek: klaart de gecentreerde cta-titel (circa 820px zone). */.bc-cm .bc-swx--footer::before {
  right: min(-160px, calc(-640px + max(220px, (100vw - 900px) / 2)));
  top: -170px;
  width: 640px;
  height: 352px;
  transform: rotate(174deg);
}/* tablet/mobiel: swooshes meeschalen, anders domineren ze de smalle viewport */@media (max-width: 1024px) {
  .bc-cm .bc-swx--stats::before { width: 380px; height: 209px; right: -140px; top: -110px; }
  .bc-cm .bc-swx--gallery::before { width: 340px; height: 186px; left: -100px; top: -155px; }
  .bc-cm .bc-swx--footer::before { width: 440px; height: 242px; right: -130px; top: -120px; }
}@media (max-width: 768px) {
  .bc-cm .bc-swx--stats::before { width: 280px; height: 154px; right: -110px; top: -80px; }
  .bc-cm .bc-swx--gallery::before { width: 260px; height: 143px; left: -90px; top: -120px; }
  .bc-cm .bc-swx--footer::before { display: none; } /* Bram: op mobiel valt hij over de cta-titel */
}/* ════════════════════════════════════════════════════════════════════════
   s1: Lees-verder, pill-styled toggle-knop (markup + gedrag: Task 5)
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-more-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  cursor: pointer;
  font: 700 15px Mulish, sans-serif;
  color: var(--bc-primary);
  border: 2px solid var(--bc-primary);
  border-radius: 999px;
  padding: 9px 20px;
}/* Markup (Task 5): bc-more-cta is a <summary> inside <details class="bc-more-wrap">
 * (native no-JS disclosure widget). Suppress the browser-default marker
 * triangle so the pill above is the only visible affordance. */.bc-cm .bc-more-wrap > summary.bc-more-cta {
  list-style: none;
}.bc-cm .bc-more-wrap > summary.bc-more-cta::-webkit-details-marker {
  display: none;
}/* Open-gedrag (Bram-fb 2026-07-02): na openen verdwijnt de pill en loopt de
 * content gewoon door; overflow:hidden draagt de uitklap-animatie uit
 * rhythm.js. */.bc-cm .bc-more {
  overflow: hidden;
}/* overflow:hidden maakt een BFC en blokkeert margin-collapse met de alinea
 * erboven; zonder deze reset oogt de naad na openen als een dubbele
 * alinea-afstand. */.bc-cm .bc-more > :first-child {
  margin-top: 0;
}.bc-cm .bc-more-wrap.bc-more-opened > summary.bc-more-cta {
  display: none;
}/* Teaser-fade over de laatste zichtbare alinea zolang de toggle dicht is;
 * verdwijnt vanzelf bij open via :not([open]). Mask vervaagt de tekst zelf
 * in plaats van een kleur-overlay eroverheen, dus dit werkt op elke
 * achtergrond (wit, paginawit, cream) zonder kleur-mismatch. */.bc-cm .bc-text-image__text p:has(+ .bc-more-wrap:not([open])) {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 35%, rgba(0, 0, 0, 0) 100%);
}/* ════════════════════════════════════════════════════════════════════════
   s2: Pull-quote, uitgelichte klantzin binnen de body (markup: Task 5)
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-pq {
  display: block;
  margin: 28px 0;
  padding: 6px 0 6px 22px;
  border-left: 4px solid var(--bc-primary);
  font-family: 'Merriweather', Georgia, serif;
  font-size: 24px;
  line-height: 1.4;
  color: var(--bc-text);
}/* ════════════════════════════════════════════════════════════════════════
   s4: Key-highlights, vette sleutel-frase per alinea (markup: Task 5)
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-hl {
  font-weight: 800;
  color: var(--bc-text);
}/* ════════════════════════════════════════════════════════════════════════
   br7: Script-accent (gelockt, permanent), laatste woord van de hero-H1 en
   van de "Ook interessant"-heading in Blakson Hustle (Task 1 font), heel
   spaarzaam ingezet (markup: Task 5/6, .bc-script span om het laatste woord).
   Bron-config schrijft de font-family als 'Blackston Hustle' (typo); de
   brief corrigeert dit naar de echte Task-1 font-naam 'Blakson Hustle'.
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-script {
  font-family: 'Blakson Hustle', 'Damion', cursive;
  color: var(--bc-primary);
  font-weight: 400;
  /* 1.72em was getuned op de Damion-fallback in de toggle-preview; het echte
     Blakson Hustle heeft veel grotere glyphs per em, dus kleiner voor de
     mockup-proportie (Bram-fb 2026-07-02). */
  font-size: 1.05em;
  line-height: .5;
  letter-spacing: .01em;
}/* === Phase 9 — components + shared utilities === *//* BC shared button utility — scoped under .bc-cm.
   Source: output/html/cocktail-workshop-teambuilding-styled.html lines 68–84.
   Tokenized per D-06. D-20: tokens win over any reference deltas.
   Used by: bc-hero, bc-cta, bc-pricing blocks (Wave 1).

   Token map applied:
     background    → var(--bc-primary)
     color         → var(--bc-white)
     padding-y     → var(--bc-space-4)
     padding-x     → var(--bc-space-7)
     border-radius → var(--bc-radius-full)
     font-size     → var(--bc-text-base)
     hover-bg      → var(--bc-primary-hover) [D-20 intentional teal-swap]
     transition    → 0.3s ease literal (timing not tokenized in Phase 8)

   Local vars below: border-width + focus-offset (no Phase-8 token for these)
*//* Local structural vars — no Phase-8 equivalent tokens */.bc-cm {
  --bc-btn-border-width: 2px; /* border literal — no Phase-8 token */
  --bc-btn-focus-offset: 3px; /* offset literal — no Phase-8 token */
}.bc-cm .bc-btn {
  display: inline-block;
  background: var(--bc-primary);
  color: var(--bc-white);
  padding: 14px 32px; /* literal — matches styled HTML reference, tighter than space-4 (16px) */
  border-radius: var(--bc-radius-full);
  text-decoration: none;
  font-family: var(--bc-font-body);
  font-weight: 700;
  font-size: var(--bc-text-base);
  line-height: 1.2; /* literal — button-specific, body-leading was too tall */
  transition: background 0.3s ease; /* timing literal — not tokenized in Phase 8 */
  border: none;
  cursor: pointer;
}@media (max-width: 768px) { /* intentional literal — breakpoint constant */
  .bc-cm .bc-btn { padding: 12px 28px; font-size: 14px; }
}.bc-cm .bc-btn:hover {
  background: var(--bc-primary-hover); /* brand bicolor swap — D-20 intentional */
}.bc-cm .bc-btn:focus-visible {
  outline: var(--bc-btn-border-width) solid var(--bc-primary);
  outline-offset: var(--bc-btn-focus-offset);
}/* Secondary variant — inverted fill */.bc-cm .bc-btn--secondary {
  background: transparent;
  color: var(--bc-primary);
  border: var(--bc-btn-border-width) solid var(--bc-primary);
}.bc-cm .bc-btn--secondary:hover {
  background: var(--bc-primary);
  color: var(--bc-white);
}/* Text variant — borderless link-style CTA (iteration-4). No fill, no border. */.bc-cm .bc-btn--text {
  background: transparent;
  color: var(--bc-primary);
  border: none;
  padding: 14px 8px;
  font-weight: 700;
}.bc-cm .bc-btn--text::after {
  content: " \2192";
  transition: transform 0.25s ease;
  display: inline-block;
}.bc-cm .bc-btn--text:hover {
  background: transparent;
  color: var(--bc-primary-hover);
  text-decoration: underline;
  text-underline-offset: 4px;
}.bc-cm .bc-btn--text:hover::after {
  transform: translateX(4px);
}/* Glow variant — Brand 2.0 homepage-knop (bouwbestek fb-ronde 12): iets
   compacter en vetter dan de basis-knop, oranje glow-shadow, hover swapt naar
   Brand 2.0-groen (--bc-green, niet het oude --bc-primary-hover teal).
   Gebruikt door de home-familie: site-header, home-hero, review-spotlight,
   site-footer. */.bc-cm .bc-btn--glow {
  font-weight: 800;
  font-size: 15px;
  padding: 13px 24px;
  box-shadow: 0 10px 24px rgba(238, 116, 55, 0.32);
  transition: 0.25s;
  white-space: nowrap;
}.bc-cm .bc-btn--glow:hover {
  background: var(--bc-green);
  box-shadow: 0 10px 24px rgba(15, 128, 105, 0.32);
}/* Donkere spiegel van de glow-knop (review-spotlight "Meer referenties"). */.bc-cm .bc-btn--glow.bc-btn--dark {
  background: var(--bc-dark);
  box-shadow: 0 10px 24px rgba(36, 36, 34, 0.32);
}.bc-cm .bc-btn--glow.bc-btn--dark:hover {
  background: var(--bc-green);
  box-shadow: 0 10px 24px rgba(15, 128, 105, 0.32);
}/* BC decorative icon utility — scoped under .bc-cm.
   Source: output/html/cocktail-workshop-teambuilding-styled.html lines 224–250.
   Tokenized per D-06. Icon widths and rotation angles are design-intent literals
   with no Phase-8 token equivalent; defined as local vars below.
   Used by: bc-hero, bc-text-image, bc-pricing blocks (Wave 1).
*//* Local icon-size vars — no Phase-8 spacing token maps to icon dimensions */.bc-cm {
  --bc-deco-size-default: 48px; /* icon size literal — no Phase-8 token */
  --bc-deco-size-lg: 72px;      /* icon size literal — no Phase-8 token */
  --bc-deco-size-sm: 32px;      /* icon size literal — no Phase-8 token */
}.bc-cm .bc-deco-icon {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  width: var(--bc-deco-size-default);
  height: auto;
  transition: transform 0.4s ease; /* timing literal — no token in Phase 8 */
}.bc-cm .bc-deco-icon--lg {
  width: var(--bc-deco-size-lg);
}.bc-cm .bc-deco-icon--sm {
  width: var(--bc-deco-size-sm);
}/* Rotation helpers — rotation literal — no token */.bc-cm .bc-deco-rot-15   { transform: rotate(15deg); }.bc-cm .bc-deco-rot-n20  { transform: rotate(-20deg); }.bc-cm .bc-deco-rot-35   { transform: rotate(35deg); }.bc-cm .bc-deco-rot-n10  { transform: rotate(-10deg); }.bc-cm .bc-deco-rot-45   { transform: rotate(45deg); }.bc-cm .bc-deco-rot-n30  { transform: rotate(-30deg); }.bc-cm .bc-deco-rot-180  { transform: rotate(180deg); }.bc-cm .bc-deco-rot-n45  { transform: rotate(-45deg); }/* bc-hero — money-page LCP block (BLK-01)
 * Plan 10 Task 1: literal-precision migration from styled HTML.
 *
 * Source: output/html/cocktail-workshop-teambuilding-styled.html
 *   - desktop rules: lines 13-122
 *   - mobile breakpoint (max-width: 768px): lines 1141-1153
 *
 * Token policy (per Plan 10 Task 1):
 *   - var(...) ONLY for colors + fonts (canonical brand tokens)
 *       colors: --bc-primary (#ee7336), --bc-text (#1a1a1a),
 *               --bc-text-light (#555), --bc-text-muted (#999),
 *               --bc-white (#fff), --bc-primary-hover (D-20 teal swap)
 *       fonts:  --bc-font-heading (Merriweather), --bc-font-body (Mulish)
 *   - ALL other values literal-copy from styled HTML (px, %, unitless).
 *
 * Selectors match pipeline render output (templates/blocks/hero.js):
 *   .bc-hero, .bc-hero-inner, .bc-hero-text   (kebab)
 *   .bc-hero__lead, .bc-hero__visual, .bc-hero__bg,
 *   .bc-hero__photo, .bc-hero__overlay        (BEM __)
 *   .bc-breadcrumb, .bc-btn (.bc-btn in base/buttons.css)
 *
 * All selectors scoped under .bc-cm (Phase 9 convention).
 *
 * DO NOT redeclare .bc-btn here — shared utility in bc-design-system/src/base/buttons.css
 *//* ── Base hero ── */.bc-cm .bc-hero {
  position: relative;
  padding: 0 0 80px;
  overflow: hidden;
  background: var(--bc-white);
}.bc-cm .bc-hero-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
  display: grid;
  grid-template-columns: 50% 50%;
  gap: 40px;
  align-items: start;
  position: relative;
  z-index: 1;
}/* ── Breadcrumb ── */.bc-cm .bc-breadcrumb {
  font-family: var(--bc-font-body);
  font-size: 14px;
  color: var(--bc-text-muted);
  margin-bottom: 48px;
  padding-top: 24px;
}.bc-cm .bc-breadcrumb a {
  color: var(--bc-primary);
  text-decoration: none;
}.bc-cm .bc-breadcrumb a:hover {
  text-decoration: underline;
}/* ── Hero text column ── */.bc-cm .bc-hero-text {
  padding-top: 32px;
  position: relative;
  z-index: 2;
}.bc-cm .bc-hero-text h1 {
  font-family: 'Merriweather', Georgia, serif;
  font-size: clamp(2.05rem, 1.2rem + 2.6vw, 3rem);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--bc-text);
  margin-bottom: 24px;
  /* B2: safe-zone tegen de ~20px linkse bleed van .bc-hero__overlay (right:-60px,
     width:120%). Zonder padding-right vult een lange H1 de hele tekstkolom en
     loopt onder de overlay. Mobiel gereset (zie breakpoint). */
  padding-right: 40px;
}/* iteration-6: more breathing above the hero CTA */.bc-cm .bc-hero-text .bc-btn { margin-top: 10px; }/* P5: dual-CTA row (primary filled + optional ghost "Lees verder").
   Mirror of .bc-text-image__ctas so both blocks share the same flex layout. */.bc-cm .bc-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}/* P5: smooth-scroll for the "Lees verder" -> #bc-hero-next jump.
   Scoped via html:has(.bc-cm) so it ONLY applies on pages that embed a BC block
   (no global side-effect on the host WP page). Honour prefers-reduced-motion.
   scroll-margin-top keeps the anchor clear of a potential sticky header. */@media (prefers-reduced-motion: no-preference) {
  html:has(.bc-cm) { scroll-behavior: smooth; }
}.bc-cm #bc-hero-next {
  scroll-margin-top: 24px;
}/* Lead paragraph — pipeline emits .bc-hero__lead.
   Mirror styled-html `.bc-hero-text p` selector for legacy markup. */.bc-cm .bc-hero__lead,
.bc-cm .bc-hero-text p {
  font-family: var(--bc-font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--bc-text-light);
  margin-bottom: 32px;
  max-width: 460px;
}/* ── Visual column (3-layer composition) ── */.bc-cm .bc-hero__visual {
  position: relative;
  margin-top: -24px;
}/* iteration-9 (Bram FB 2026-06-17, 4th): removed the ::before cream block
   (iter-8) — it read as a separate slab behind the photo and looked off. Per
   Bram: align ONLY the existing bg blob image to the top, nothing more. The
   blob's top edge sits at the visual-column top (cancels the -24px margin so it
   starts at the hero content top); overflow:hidden on .bc-hero clips the bleed. */.bc-cm .bc-hero__bg {
  position: absolute;
  top: 0;
  right: -99px;
  width: 130%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
  z-index: 0;
}.bc-cm .bc-hero__photo {
  position: relative;
  z-index: 1;
  width: 92%;
  margin-left: auto;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
}.bc-cm .bc-hero__photo img {
  width: 100%;
  display: block;
}.bc-cm .bc-hero__overlay {
  position: absolute;
  top: 9px;
  right: -60px;
  width: 120%;
  height: 130%;
  z-index: 2;
  pointer-events: none;
}/* ── Brand 2.0 (br3, gelockt, permanent): patch VERVANGT de oude "In Good
 * Company"-badge in de header. Geen toggle-klasse, geen fallback: de oude
 * overlay-badge verdwijnt by design (incl. de gele mini-arc uit dat SVG). ── */.bc-cm .bc-hero__overlay {
  display: none;
}.bc-cm .bc-hero__visual {
  position: relative;
}/* Patch op de fotorand-hoek (__photo clipt met overflow:hidden, dus de patch
 * hangt aan __visual). Foto-linksonder-hoek gemeten op x=48/bottom=0 binnen
 * visual; patch-centrum op die hoek. */.bc-cm .bc-hero__visual::after {
  content: "";
  position: absolute;
  left: -33px;
  bottom: -50px;
  width: 150px;
  height: 150px;
  background: url("assets/patch-bc-black-orangetext.svg") no-repeat center / contain;
  transform: rotate(-10deg);
  z-index: 4;
}/* Schaduw als losse cirkel (::before) onder de patch. Eerder stond hier
 * filter:drop-shadow op de ::after, maar Chrome rendert die op background-SVG
 * bij display-scaling (dpr boven 1) als een afgekapte lichte rechthoek
 * (Bram-fb 2026-07-02). Geometrische box-shadow op een ronde box heeft dat
 * artefact niet. Zelfde maat/positie als de patch, cirkel dus rotate-loos. */.bc-cm .bc-hero__visual::before {
  content: "";
  position: absolute;
  left: -33px;
  bottom: -50px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
  z-index: 3;
}@media (max-width: 768px) {
  .bc-cm .bc-hero__visual::after,
  .bc-cm .bc-hero__visual::before {
    width: 104px;
    height: 104px;
    left: -14px;
    bottom: -30px;
  }
}/* ── Brand 2.0 (br10, gelockt, permanent): hero-container wat breder dan de
 * andere blokken. ── */@media (min-width: 1100px) {
  .bc-cm .bc-hero-inner {
    max-width: 1420px;
  }
}/* ── Variant: --image-right (alias of base — explicit class for HTML consistency) ── */.bc-cm .bc-hero--image-right .bc-hero-inner {
  grid-template-columns: 50% 50%;
}/* ── Variant: --centered (text centered, no image column) ── */.bc-cm .bc-hero--centered .bc-hero-inner {
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}.bc-cm .bc-hero--centered .bc-hero__lead,
.bc-cm .bc-hero--centered .bc-hero-text p {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}.bc-cm .bc-hero--centered .bc-hero__visual {
  display: none;
}/* ── Variant: --compact (reduced padding + smaller h1) ── */.bc-cm .bc-hero--compact {
  padding-top: 32px;
  padding-bottom: 32px;
}.bc-cm .bc-hero--compact .bc-hero-text h1 {
  font-size: 34px;
}/* ── Mobile breakpoint — styled HTML lines 1141-1153 ── */@media (max-width: 768px) {
  .bc-cm .bc-hero {
    padding-bottom: 40px;
  }

  .bc-cm .bc-hero-inner {
    display: flex;
    flex-direction: column-reverse;
    gap: 24px;
  }

  .bc-cm .bc-hero-text {
    margin-bottom: 0;
    padding-top: 0;
  }

  .bc-cm .bc-hero-text h1 {
    font-size: 26px;
    margin-bottom: 16px;
    padding-right: 0; /* B2: geen overlay-overlap in mobiel column-reverse */
  }

  .bc-cm .bc-hero__lead,
  .bc-cm .bc-hero-text p {
    font-size: 15px;
    margin-bottom: 20px;
  }

  .bc-cm .bc-hero__visual {
    min-height: auto;
    margin-top: 0;
    margin-left: 20px;
    margin-right: -32px;
  }

  .bc-cm .bc-hero__photo {
    width: 88%;
    margin-left: auto;
    margin-right: 0;
    margin-top: -20px;
    border-radius: 20px 0 0 20px;
  }

  .bc-cm .bc-hero__bg {
    right: -40px;
    width: 120%;
  }

  .bc-cm .bc-hero__overlay {
    right: -3px;
    top: -7px;
    width: 100%;
  }

  .bc-cm .bc-breadcrumb {
    padding-top: 12px;
    margin-bottom: 20px;
    font-size: 12px;
  }

  .bc-cm .bc-btn {
    padding: 12px 28px;
    font-size: 14px;
  }
}/* ── Page-type modifier: --blog (fase 2 blog-pass, e1 editorial kop) ──────
 * GEEN schema-variant: render.mjs stapelt bc-hero--blog op de gewone
 * variant-class (in de praktijk bc-hero--image-right) op basis van de
 * render-time `_pageType`-transient, alleen op page_type blog. Money/local/
 * sea-hero's dragen deze class nooit en verschuiven dus niet.
 * Markup-volgorde in de tekstkolom: breadcrumb (stille kruimel), eyebrow
 * (script), h1, meta-regel (auteur + leestijd), lead, cta's.
 * Bron: configs/fase2-blog.mjs e1 (bc-content-machine), Bram-gelockt. */.bc-cm .bc-hero--blog .bc-hero-text h1 {
  font-size: clamp(2.3rem, 1.3rem + 3.2vw, 3.55rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  /* e1 had 20px met de meta als ::after IN de h1-box (16px gap); als echte
   * elementen: 16px h1 -> meta, en de meta draagt de 20px naar de lead. */
  margin-bottom: 16px;
}/* Script-eyebrow boven de titel: zelfde Blakson-taal als .bc-script
 * (base/rhythm.css, font-face in base/fonts-brand20.css), spaarzaam en
 * warm. De tekst komt uit de breadcrumb-parent ("Nieuws"), geen copy. */.bc-cm .bc-hero--blog .bc-hero__eyebrow {
  display: block;
  font-family: 'Blakson Hustle', 'Damion', cursive;
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--bc-primary);
  margin-bottom: 10px;
}/* Strakke meta-regel onder de titel: auteur + leestijd (render-time data
 * uit de _authorName/_readingMinutes transients; datum bestaat niet). */.bc-cm .bc-hero--blog .bc-hero__meta {
  font-family: var(--bc-font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--bc-text-muted);
  margin: 0 0 20px;
}/* Breadcrumb wordt stille kruimel: kleiner, meer tracking, dichter op de
 * kop; de herhaalde paginatitel (span) de-emphasized maar NIET verborgen. */.bc-cm .bc-hero--blog .bc-breadcrumb {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 26px;
}.bc-cm .bc-hero--blog .bc-breadcrumb span {
  opacity: 0.55;
}/* Lead iets voller op leesmaat. */.bc-cm .bc-hero--blog .bc-hero__lead {
  font-size: 19px;
  line-height: 1.65;
  max-width: 54ch;
}@media (max-width: 768px) {
  .bc-cm .bc-hero--blog .bc-hero-text h1 { font-size: 30px; }
  .bc-cm .bc-hero--blog .bc-hero__eyebrow { font-size: 1.6rem; }
  .bc-cm .bc-hero--blog .bc-hero__meta { font-size: 11px; letter-spacing: 0.09em; }
}/* bc-stats — money-page metrics block (BLK-02)
 * Variants: inline-strip (=base) | --card-grid
 * Source: output/html/cocktail-workshop-teambuilding-styled.html .bc-usp-* selectors
 * Literal-precision rewrite (Plan 10 Task 2) — only colors + fonts via var().
 * Class-name mapping: .bc-usp-bar → .bc-stats, .bc-usp-bar-inner → .bc-stats-inner,
 * .bc-usp-stats → .bc-stats__items, .bc-usp-stat → .bc-stats__item,
 * .bc-usp-num (+ inner .bc-usp-plus) → .bc-stats__num (+ .bc-stats__plus).
 * Pipeline render has NO .bc-usp-number wrapper — .bc-stats__num itself carries
 * the typography that styled HTML applied to .bc-usp-number.
 *//* ── Base: inline-strip (flex row, 4 stats) ──────────────────────────────── */.bc-cm .bc-stats {
  padding: 56px 0;
  background: var(--bc-white);
  position: relative;
  overflow: hidden;
}.bc-cm .bc-stats-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}.bc-cm .bc-stats__items {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 24px;
}.bc-cm .bc-stats__item {
  flex: 1;
  min-width: 140px;
  text-align: center;
  position: relative;
}.bc-cm .bc-stats__num {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 52px;
  font-weight: 900;
  color: var(--bc-text);
  line-height: 1;
  letter-spacing: -1px;
  position: relative;
  display: inline-block;
}.bc-cm .bc-stats__num .bc-stats__plus {
  color: var(--bc-primary);
  font-weight: 700;
}.bc-cm .bc-stats__label {
  font-family: var(--bc-font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--bc-text-muted);
  margin-top: 10px;
  letter-spacing: 0.3px;
  text-transform: lowercase;
}/* ── Variant: card-grid — 4-up cream cards met decorative svg corner ─── */.bc-cm .bc-stats--card-grid .bc-stats__items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}.bc-cm .bc-stats--card-grid .bc-stats__item {
  background: var(--bc-cream);
  padding: 24px 22px 22px;
  border-radius: 14px;
  text-align: left;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
}/* Op een cream rhythm-band vallen cream kaarten weg (Bram-fb 2026-07-03:
   "ik zie geen kaart"): tone-aware naar echt wit + zachte lift-shadow. */.bc-cm .bc-stats--card-grid.bc-rx--tone-cream .bc-stats__item {
  background: #fff;
  box-shadow: 0 1px 2px rgba(36, 36, 34, 0.04), 0 14px 40px rgba(36, 36, 34, 0.07);
}/* Decorative svg corner per card, brand-varied (subtle) */.bc-cm .bc-stats--card-grid .bc-stats__item::after {
  content: "";
  position: absolute;
  top: -22px;
  right: -22px;
  width: 80px;
  height: 80px;
  background: url("https://www.barcompany.nl/wp-content/uploads/2021/07/svg-orange.svg") no-repeat center / contain;
  opacity: 0.45;
  transform: rotate(-15deg);
  pointer-events: none;
}/* Fase 2 stap 2 knop 2 (Bram-gelockt 2026-07-03): alle hoekjes in de
   orange-arc familie (zelfde asset als author-byline); lightGreen + gold
   (oude merk-kleuren) vervallen, variatie via rotatie + opacity. */.bc-cm .bc-stats--card-grid .bc-stats__item:nth-child(2)::after {
  transform: rotate(25deg);
  opacity: 0.4;
}.bc-cm .bc-stats--card-grid .bc-stats__item:nth-child(3)::after {
  transform: rotate(-30deg);
  opacity: 0.38;
}.bc-cm .bc-stats--card-grid .bc-stats__item:nth-child(4)::after {
  transform: rotate(40deg);
  opacity: 0.4;
}.bc-cm .bc-stats--card-grid .bc-stats__num {
  font-family: var(--bc-font-heading);
  font-style: normal;
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  display: block;
  position: relative;
  z-index: 1;
}.bc-cm .bc-stats--card-grid .bc-stats__plus {
  font-style: normal;
}.bc-cm .bc-stats--card-grid .bc-stats__label {
  font-family: var(--bc-font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--bc-primary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 10px;
  position: relative;
  z-index: 1;
}@media (max-width: 768px) {
  .bc-cm .bc-stats--card-grid .bc-stats__items {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}/* ── Responsive: 768px ───────────────────────────────────────────────────── */@media (max-width: 768px) {
  .bc-cm .bc-stats {
    padding: 48px 0;
  }

  .bc-cm .bc-stats__items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px 16px;
  }

  .bc-cm .bc-stats__num {
    font-size: 36px;
  }

  .bc-cm .bc-stats__label {
    font-size: 12px;
    margin-top: 6px;
  }
}/* bc-text-image — money-page split layout (BLK-03)
 * Plan 10 Task 3: literal-precision rewrite — match styled HTML 1:1.
 * Source: output/html/cocktail-workshop-teambuilding-styled.html
 *   - Lines 180-305 (desktop base: .bc-content-section + .bc-content-wrap + .bc-split + .bc-split__*)
 *   - Lines 457-470 (scroll-reveal initial/end states)
 *   - Lines 1097-1112 (≤900px responsive)
 *   - Lines 1163-1168 (≤768px responsive)
 *
 * Selector mapping (styled HTML → pipeline BEM emitted by templates/blocks/text-image.js):
 *   .bc-content-section            → .bc-cm .bc-text-image
 *   .bc-content-section--cream     → .bc-cm .bc-text-image--cream-bg
 *   .bc-content-wrap + .bc-split   → .bc-cm .bc-text-image-wrap   (collapsed: pipeline emits no inner wrap, so max-width + flex live on the same element)
 *   .bc-split--reverse             → .bc-cm .bc-text-image-wrap--reverse
 *   .bc-split__media               → .bc-cm .bc-text-image__media
 *   .bc-split__text                → .bc-cm .bc-text-image__text
 *   .bc-split__img-frame img       → .bc-cm .bc-text-image__img-frame img
 *   .bc-content-section.bc-visible → .bc-cm .bc-text-image.bc-visible (scroll-reveal end state)
 *
 * Token policy per Plan 10 Step 4: var() ONLY for colors + fonts. All spacing,
 * sizing, padding, margin, gap, line-height, font-size, border-radius use literals.
 *//* ── Base section ─────────────────────────────────────────────────────── */.bc-cm .bc-text-image {
  padding: 64px 0;
  position: relative;
}/* ── Variant: cream background ────────────────────────────────────────── */.bc-cm .bc-text-image--cream-bg {
  background-color: var(--bc-cream);
}/* ── Wrapper: combines styled .bc-content-wrap (max-width + gutter) with
 *    styled .bc-split (flex grid) — pipeline emits a single element. ──── */.bc-cm .bc-text-image-wrap {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
  display: flex;
  align-items: center;
  gap: 72px;
}/* ── Variant: image-right (flip flex direction) ───────────────────────── */.bc-cm .bc-text-image-wrap--reverse {
  flex-direction: row-reverse;
}/* ── Media column ─────────────────────────────────────────────────────── */.bc-cm .bc-text-image__media {
  flex: 0 0 48%;
  position: relative;
}/* ── Text column ──────────────────────────────────────────────────────── */.bc-cm .bc-text-image__text {
  flex: 1;
  min-width: 0;
}/* ── Image frame ──────────────────────────────────────────────────────── *
 * Plan 10 Task 10: deterministic image-slot — wrap locks aspect-ratio so
 * different source photos render identically; img fills + crops via cover. */.bc-cm .bc-text-image__img-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.04),
    0 12px 40px rgba(0, 0, 0, 0.08);
}.bc-cm .bc-text-image__img-frame img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}/* ── Heading H2 ───────────────────────────────────────────────────────── */.bc-cm .bc-text-image__text h2 {
  font-family: var(--bc-font-heading);
  font-size: 34px;
  font-weight: 900;
  color: var(--bc-text);
  line-height: 1.45;
  margin-bottom: 24px;
}/* ── Subheading H3 (every h3 gets the orange accent bar, matches styled HTML) ── */.bc-cm .bc-text-image__text h3 {
  font-family: var(--bc-font-heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--bc-text);
  line-height: 1.35;
  margin-top: 32px;
  margin-bottom: 8px;
  position: relative;
  padding-left: 20px;
}/* Accent bar left of H3 */.bc-cm .bc-text-image__text h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 4px;
  height: calc(100% - 8px);
  background: var(--bc-primary);
  border-radius: 2px;
}.bc-cm .bc-text-image__text h3:first-of-type {
  margin-top: 0;
}/* ── Body paragraph ───────────────────────────────────────────────────── */.bc-cm .bc-text-image__text p {
  font-family: var(--bc-font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--bc-text-light);
  margin-bottom: 14px;
}/* ── Inline links (exclude .bc-btn so button keeps its own white color) ── */.bc-cm .bc-text-image__text a:not(.bc-btn) {
  color: var(--bc-primary);
  text-decoration: none;
  font-weight: 600;
}.bc-cm .bc-text-image__text a:not(.bc-btn):hover {
  color: #d4621e;
  text-decoration: underline;
}/* ── Scroll-reveal initial state (BCReveal toggles .bc-visible on parent) ── */.bc-cm .bc-text-image__media,
.bc-cm .bc-text-image__text {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}.bc-cm .bc-text-image__text {
  transition-delay: 0.15s;
}/* Scroll-reveal end state */.bc-cm .bc-text-image.bc-visible .bc-text-image__media,
.bc-cm .bc-text-image.bc-visible .bc-text-image__text {
  opacity: 1;
  transform: translateY(0);
}/* ── Responsive: ≤900px — stack columns vertically ────────────────────── */@media (max-width: 900px) {
  .bc-cm .bc-text-image-wrap,
  .bc-cm .bc-text-image-wrap--reverse {
    flex-direction: column;
    gap: 40px;
  }
  .bc-cm .bc-text-image__media {
    flex: none;
    width: 100%;
  }
  .bc-cm .bc-text-image {
    padding: 60px 0;
  }
  .bc-cm .bc-text-image__text h2 {
    font-size: 26px;
  }
}/* ── Responsive: ≤768px — tighter spacing + smaller type ──────────────── */@media (max-width: 768px) {
  .bc-cm .bc-text-image {
    padding: 48px 0;
  }
  .bc-cm .bc-text-image-wrap {
    gap: 28px;
  }
  .bc-cm .bc-text-image__text h2 {
    font-size: 24px;
    margin-bottom: 16px;
  }
  .bc-cm .bc-text-image__text h3 {
    font-size: 16px;
    padding-left: 16px;
    margin-top: 24px;
  }
  .bc-cm .bc-text-image__text p {
    font-size: 15px;
    margin-bottom: 10px;
  }
}/* ── iteration-2: bullet body lists render as teal check-list ── */.bc-cm .bc-text-image__text ul {
  list-style: none;
  margin: 4px 0 18px;
  padding: 0;
  display: grid;
  gap: 12px;
}.bc-cm .bc-text-image__text ul li {
  position: relative;
  padding-left: 36px;
  font-family: var(--bc-font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--bc-text-light);
}.bc-cm .bc-text-image__text ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background-color: var(--bc-teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.1l2.2 2.2 4.6-5' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}/* ── iteration-3: dual-CTA row + off-white highlight (==text==) ── */.bc-cm .bc-text-image__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 20px;
}.bc-cm .bc-mark {
  color: inherit;
  font-weight: 700;
  background: none;
}/* iteration: key benefits BOLD + scannable in body text (Bram FB money page).
   Body font inherited; just ensure <strong> renders bold so the writer can bold
   key terms and they read as USPs. */.bc-cm .bc-text-image__text strong {
  font-weight: 700;
}/* iteration-4: editorial story heading in Merriweather serif (hero + "Waarom BC") */.bc-cm .bc-text-image--serif .bc-text-image__text h2 {
  font-family: 'Merriweather', Georgia, serif;
  line-height: 1.3;
  letter-spacing: -0.01em;
}/* iteration-6: per-block image aspect */.bc-cm .bc-text-image--img-portrait .bc-text-image__img-frame {
  aspect-ratio: 3 / 4;
}.bc-cm .bc-text-image--img-natural .bc-text-image__img-frame {
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}.bc-cm .bc-text-image--img-natural .bc-text-image__img-frame img {
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}/* iteration-7: media bleeds to left viewport edge + larger (Waarom-BC) */.bc-cm .bc-text-image--bleed-left {
  padding-top: 56px;
  padding-bottom: 0;
}.bc-cm .bc-text-image--bleed-left .bc-text-image-wrap {
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 48px;
  align-items: center;
}.bc-cm .bc-text-image--bleed-left .bc-text-image__media {
  flex: 0 0 52%;
}.bc-cm .bc-text-image--bleed-left .bc-text-image__text {
  padding-left: 0;
  padding-right: max(32px, calc((100vw - 1180px) / 2 + 16px));
}@media (max-width: 900px) {
  .bc-cm .bc-text-image--bleed-left .bc-text-image-wrap { padding: 0 24px; gap: 32px; }
  .bc-cm .bc-text-image--bleed-left .bc-text-image__media { flex: none; width: 100%; }
  .bc-cm .bc-text-image--bleed-left .bc-text-image__text { padding-right: 0; }
}/* ── Brand 2.0 (br2, gelockt, permanent): foto-hoek accent, klein linksonder
 * op de eerste story-sectie. De text-image render zet de modifier-klasse
 * bc-text-image--rx-accent wanneer het blok presentation.slant 'out' heeft
 * (rhythm-composer). Verticaal blijft de accent binnen de foto
 * (position:relative op __media clipt niet zelf, maar de accent is bewust
 * klein en laag genoeg om niet over een blok-grens te lopen). ── */.bc-cm .bc-text-image__media {
  position: relative;
  z-index: 0;
}.bc-cm .bc-text-image--rx-accent .bc-text-image__media::before {
  content: "";
  position: absolute;
  left: -34px;
  bottom: 12px;
  width: 190px;
  height: 104px;
  background: url("assets/swoosh-orange-small.png") no-repeat center / contain;
  transform: rotate(-8deg);
  z-index: 2;
  pointer-events: none;
}/* De bc-text-image--rx-accent klasse wordt door de render functie gezet bij presentation.slant 'out'. */@media (max-width: 768px) {
  .bc-cm .bc-text-image--rx-accent .bc-text-image__media::before {
    width: 150px;
    height: 82px;
  }
}/* bc-waarom-team — dedicated "Waarom Bar Company + team" block.
   The TEXT column lives in the standard page container (max-width 1200 + 32px
   padding), so its right edge aligns EXACTLY with the blocks above/below. The
   team photo breaks out of the container to the LEFT viewport edge via a
   negative margin with matching width-growth (50vw includes the scrollbar, so
   the photo overshoots the viewport edge by ~half the scrollbar and is clipped
   by overflow:hidden — invisible, and it keeps the text alignment pixel-exact).
   Colors + fonts via tokens; all spacing/sizing literals per BC convention. */.bc-cm .bc-waarom-team {
  padding-top: 56px;
  padding-bottom: 56px;
  overflow: hidden;
}.bc-cm .bc-waarom-team__wrap {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
  display: flex;
  align-items: center;
  gap: 48px;
}/* Media column — breaks out to the left viewport edge, keeps its right edge at
   the natural ~46% column boundary by growing width to match the negative margin. */.bc-cm .bc-waarom-team__media {
  flex: 0 0 auto;
  width: calc(46% + (50vw - 50%));
  margin-left: calc(-1 * (50vw - 50%));
  position: relative;
}/* Fase 2 FB (Bram 2026-07-03): vaste 16/11-ratio + cover cropte de teamfoto
   aan de bovenkant; frame volgt nu de natuurlijke foto-hoogte zodat het beeld
   volledig zichtbaar is. Radius zit op de img (bij transparante cut-outs
   onzichtbaar, bij gewone foto's gelijk aan de oude look); drop-shadow volgt
   de contour en geeft cut-outs diepte. */.bc-cm .bc-waarom-team__img-frame {
  width: 100%;
}.bc-cm .bc-waarom-team__img-frame img {
  width: 100%;
  height: auto;
  display: block;
  /* flat on the bleeding (left) edge, rounded on the inner (right) corners */
  border-radius: 0 8px 8px 0;
  filter: drop-shadow(0 18px 36px rgba(36, 36, 34, 0.16));
}/* Text column — plain container child, so its right edge is the container edge. */.bc-cm .bc-waarom-team__text {
  flex: 1 1 46%;
  min-width: 0;
}.bc-cm .bc-waarom-team__title {
  /* editorial serif accent — same as hero H1 + text-image "Waarom BC" H2 */
  font-family: 'Merriweather', Georgia, serif;
  font-size: 2.4rem;
  line-height: 1.25;
  margin: 0 0 20px;
  color: var(--bc-text);
}.bc-cm .bc-waarom-team__text p {
  font-family: var(--bc-font-body);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 16px;
  color: var(--bc-text-light);
}/* Proof strip */.bc-cm .bc-waarom-team__stats {
  list-style: none;
  margin: 28px 0 24px;
  padding: 0;
  display: flex;
  gap: 44px;
  flex-wrap: wrap;
}.bc-cm .bc-waarom-team__stat {
  display: flex;
  flex-direction: column;
}.bc-cm .bc-waarom-team__stat-value {
  /* same serif + dark color as the bc-stats numbers (not orange) */
  font-family: 'Merriweather', Georgia, serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--bc-text);
}.bc-cm .bc-waarom-team__stat-label {
  font-family: var(--bc-font-body);
  font-size: 14px;
  line-height: 1.3;
  margin-top: 6px;
  color: var(--bc-text-muted);
}.bc-cm .bc-waarom-team__ctas {
  margin-top: 8px;
}@media (max-width: 900px) {
  .bc-cm .bc-waarom-team__wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
    padding: 0 24px;
  }
  .bc-cm .bc-waarom-team__media {
    width: 100%;
    margin-left: 0;
  }
  .bc-cm .bc-waarom-team__img-frame {
    border-radius: 8px;
    aspect-ratio: 16 / 10;
  }
  .bc-cm .bc-waarom-team__title {
    font-size: 1.9rem;
  }
}/* Inline body links (bare <a> from the content pipeline) — brand-orange,
   consistent with text-image/article/prose (Wessel FB 2026-06-22). */.bc-cm .bc-waarom-team__text a:not(.bc-btn) {
  color: var(--bc-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}.bc-cm .bc-waarom-team__text a:not(.bc-btn):hover {
  color: var(--bc-primary-hover);
}/* bc-cta — money-page conversion block (BLK-04)
 * Variants: concierge (=base) | --phone | --inline-button
 * Source: output/html/cocktail-workshop-teambuilding-styled.html lines 952-1094 + 1211-1221
 * --phone and --inline-button: authored from spec (no reference CSS)
 * Scroll-reveal: triggered via [data-bc-reveal] + window.BCReveal
 *//* ── Base: .bc-cta (concierge variant is the default layout) ── */.bc-cm .bc-cta {
  position: relative;
  padding: 80px 0 64px; /* reduced from 120/100 — W3 spacing (Wessel-fb) */
  overflow: hidden;
  margin-top: 0;
}/* ── WP-footer overlap (Bram 2026-07-03): de WordPress-footer heeft een
   schuine donkere top; zonder overlap blijft er op desktop een licht vlak
   tussen de donkere cta en die footer-slant. De footer-cta (herkenbaar aan de
   bc-swx--footer anker-div ervoor) krijgt extra bottom-padding en trekt de
   WP-footer met een negatieve margin over zijn onderrand. Alleen desktop:
   op mobiel/tablet sluit de footer al goed aan. Alleen de laatste (footer-)
   cta: mid-page cta's zouden met -180px het volgende blok overlappen. ── */@media (min-width: 1025px) { /* intentional literal — desktop-only per Bram-gate */
  .bc-cm .bc-swx--footer + .bc-cta {
    padding: 80px 0 244px;
    margin-bottom: -180px;
  }
}.bc-cm .bc-cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Fase 2 D1 knop 1 (Bram-gelockt 2026-07-03): radius-taal consistent met
     de 2.0-kaarten, geen hard-rechthoekige onderrand meer tegen de slant. */
  border-radius: 0 0 20px 20px;
  overflow: hidden;
}.bc-cm .bc-cta__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0 0 20px 20px;
}.bc-cm .bc-cta__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Fase 2 D1 knop 1 (Bram-gelockt 2026-07-03): warmere rich-black overlay
     i.p.v. het oude bruin — custom alphas, not standard overlay tokens. */
  background: linear-gradient(
    180deg,
    rgba(36, 36, 34, 0.88) 0%,
    rgba(15, 15, 14, 0.95) 100%
  );
}.bc-cm .bc-cta-inner {
  max-width: 700px; /* intentional literal — CTA max-width spec */
  margin: 0 auto;
  padding: 0 var(--bc-space-8);
  text-align: center;
  position: relative;
  z-index: 2;
}.bc-cm .bc-cta h2 {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 2.5rem; /* CTA h2 — between text-h1 and text-h2; intentional literal */
  font-weight: 900;
  color: var(--bc-white);
  line-height: 1.25;
  margin-bottom: var(--bc-space-5);
}.bc-cm .bc-cta p {
  font-family: 'Mulish', sans-serif;
  font-size: 1.125rem; /* 18px — no exact token; intentional literal */
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.65); /* overlay text — intentional rgba */
  margin-bottom: var(--bc-space-4);
}/* Plan 28-07 (Bug F): CTA body content links inherit brand color (orange→teal hover).
 * Excludes .bc-btn so primary-button links keep their existing brand styling.
 * .bc-cta__tel a and .bc-cta__links a remain untouched by virtue of higher specificity. */.bc-cm .bc-cta a:not(.bc-btn) {
  color: var(--bc-primary, #ee7437);
  text-decoration: underline;
}.bc-cm .bc-cta a:not(.bc-btn):hover {
  color: var(--bc-primary-hover, #0f8069); /* hover swap to opposite brand color — feedback_bc_hover_semantic.md */
}.bc-cm .bc-cta .bc-btn {
  font-size: 1.125rem; /* 18px — no exact token; intentional literal */
  padding: 18px 48px; /* intentional literal — CTA btn padding spec */
  margin-top: var(--bc-space-4);
}/* ── Collega layout (default; legacy alias: __concierge) ── */.bc-cm .bc-cta__concierge,
.bc-cm .bc-cta__collega {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0;
}.bc-cm .bc-cta__avatar {
  width: 84px; /* intentional literal — avatar diameter spec */
  border-radius: var(--bc-radius-full);
  margin-bottom: var(--bc-space-4);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); /* avatar-specific shadow — intentional literal */
}.bc-cm .bc-cta__invite {
  font-family: 'Mulish', sans-serif;
  font-size: 1.0625rem; /* 17px — between base and lg; intentional literal */
  color: rgba(255, 255, 255, 0.7); /* overlay text — intentional rgba */
  margin-bottom: var(--bc-space-6);
  text-align: center;
}.bc-cm .bc-cta__invite strong {
  color: var(--bc-white);
}/* ── Frame: cut-out avatar (bc-has-cutout, set by cta.js when rotating a
   CTA-specific cut-out pool). Full transparent figure standing on a brand glow,
   instead of the circle photo. CSS-only on the existing <img> so already-published
   pages upgrade via the shared bundle. ── */.bc-cm .bc-cta__concierge.bc-has-cutout .bc-cta__avatar,
.bc-cm .bc-cta__collega.bc-has-cutout .bc-cta__avatar {
  width: auto;
  height: 130px; /* intentional literal — cut-out height */
  max-width: 90%;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.38)); /* intentional literal — figure lift */
  margin-bottom: var(--bc-space-5);
}/* CTA-specific button modifier.
 * Fase 2 D1 knop 3 (Bram-gelockt 2026-07-03, C4-richting): groene hoofdknop
 * in de cta; hover swapt naar oranje — omgekeerd t.o.v. de rest van de site,
 * bewust: hier is groen de hoofdkleur dus de brand-swap wisselt naar het
 * andere merk-accent (site-brede oranje<->groen hover-semantiek). */.bc-cm .bc-btn--cta {
  font-size: 1.125rem; /* 18px — intentional literal */
  padding: 18px 52px; /* intentional literal — CTA-specific wider padding */
  background: var(--bc-green, #0f8069);
  border-color: var(--bc-green, #0f8069);
  box-shadow: 0 4px 20px rgba(15, 128, 105, 0.35); /* CTA-specific shadow with green alpha — intentional literal */
  margin-bottom: var(--bc-space-4);
}.bc-cm .bc-btn--cta:hover {
  background: var(--bc-primary, #ee7437);
  border-color: var(--bc-primary, #ee7437);
  box-shadow: 0 6px 28px rgba(238, 116, 55, 0.4); /* CTA hover shadow with primary alpha — intentional literal */
  transform: translateY(-2px); /* intentional literal — micro-interaction lift */
}.bc-cm .bc-cta__tel {
  font-family: 'Mulish', sans-serif;
  font-size: 0.9375rem; /* 15px — intentional literal */
  color: rgba(255, 255, 255, 0.4); /* tel secondary — intentional rgba */
  text-align: center;
  margin: 0;
}.bc-cm .bc-cta__tel a {
  color: rgba(255, 255, 255, 0.4); /* tel link — intentional rgba */
  text-decoration: none;
}.bc-cm .bc-cta__tel strong {
  color: rgba(255, 255, 255, 0.7); /* tel strong — intentional rgba */
  font-size: 1rem;
}.bc-cm .bc-cta__tel a:hover strong {
  color: var(--bc-white);
}.bc-cm .bc-cta__links {
  font-family: 'Mulish', sans-serif;
  font-size: 0.875rem; /* 14px — intentional literal */
  color: rgba(255, 255, 255, 0.3); /* links secondary — intentional rgba */
  margin-top: 0;
}.bc-cm .bc-cta__links a {
  color: var(--bc-primary);
  text-decoration: none;
}.bc-cm .bc-cta__links a:hover {
  text-decoration: underline;
}/* ── Scroll-reveal (shared BCReveal pattern) ── */.bc-cm .bc-cta {
  opacity: 0;
  transition: opacity 0.9s ease; /* intentional literal — animation timing */
}.bc-cm .bc-cta.bc-visible {
  opacity: 1;
}/* ── Variant: --phone (phone number only, no avatar/collega) ── */.bc-cm .bc-cta--phone .bc-cta__concierge,
.bc-cm .bc-cta--phone .bc-cta__collega,
.bc-cm .bc-cta--phone .bc-cta__avatar,
.bc-cm .bc-cta--phone .bc-cta__invite,
.bc-cm .bc-cta--phone .bc-btn--cta,
.bc-cm .bc-cta--phone .bc-cta__links {
  display: none;
}.bc-cm .bc-cta--phone .bc-cta__tel {
  font-size: 1.125rem; /* phone variant — prominent tel; intentional literal */
  color: rgba(255, 255, 255, 0.85); /* intentional rgba — brighter for phone-only */
  margin-top: var(--bc-space-6);
}.bc-cm .bc-cta--phone .bc-cta__tel a {
  color: rgba(255, 255, 255, 0.85); /* intentional rgba */
}.bc-cm .bc-cta--phone .bc-cta__tel strong {
  color: var(--bc-white);
  font-size: 1.5rem; /* phone variant — large dial; intentional literal */
  display: block;
  margin-top: var(--bc-space-2);
}/* ── Variant: --inline-button — solid cream background (no bg image) ── */.bc-cm .bc-cta--inline-button .bc-cta__concierge,
.bc-cm .bc-cta--inline-button .bc-cta__collega,
.bc-cm .bc-cta--inline-button .bc-cta__avatar,
.bc-cm .bc-cta--inline-button .bc-cta__invite,
.bc-cm .bc-cta--inline-button .bc-cta__tel,
.bc-cm .bc-cta--inline-button .bc-cta__links {
  display: none;
}.bc-cm .bc-cta--inline-button {
  padding: 72px 0;
  background: var(--bc-cream);
}/* Hide the dark gradient + bg-image layer entirely for inline-button */.bc-cm .bc-cta--inline-button .bc-cta__bg,
.bc-cm .bc-cta--inline-button .bc-cta__bg::after {
  display: none;
}.bc-cm .bc-cta--inline-button .bc-cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}/* Dark text on cream */.bc-cm .bc-cta--inline-button h2 {
  color: #1a1a1a;
  text-shadow: none;
}.bc-cm .bc-cta--inline-button p {
  color: #555;
}/* ── Responsive: 900px breakpoint (matches styled-HTML reference) ── */@media (max-width: 900px) { /* intentional literal — reference mobile breakpoint */
  .bc-cm .bc-cta {
    padding: 44px 0 36px; /* intentional literal — mobile CTA compact padding */
  }

  .bc-cm .bc-cta h2 {
    font-size: 22px; /* intentional literal — mobile h2 spec */
    margin-bottom: 10px; /* intentional literal — mobile h2 margin */
  }

  .bc-cm .bc-cta p {
    font-size: 14px; /* intentional literal — mobile p spec */
    margin-bottom: 6px; /* intentional literal — mobile p margin */
  }

  .bc-cm .bc-btn--cta {
    padding: 13px 28px; /* intentional literal — mobile btn compact */
    font-size: 14px; /* intentional literal */
  }

  .bc-cm .bc-cta__concierge,
  .bc-cm .bc-cta__collega {
    margin: 24px 0 20px; /* intentional literal — mobile collega margin */
  }

  .bc-cm .bc-cta__avatar {
    width: 56px; /* intentional literal — mobile avatar spec */
    margin-bottom: 10px; /* intentional literal — mobile avatar margin */
  }

  .bc-cm .bc-cta__concierge.bc-has-cutout .bc-cta__avatar,
  .bc-cm .bc-cta__collega.bc-has-cutout .bc-cta__avatar {
    width: auto;
    height: 110px; /* intentional literal — mobile cut-out height (<= desktop 130) */
    margin-bottom: 10px; /* intentional literal — mobile avatar margin */
  }

  .bc-cm .bc-cta__invite {
    font-size: 13px; /* intentional literal — mobile invite */
    margin-bottom: 14px; /* intentional literal — mobile invite margin */
  }

  .bc-cm .bc-cta__tel {
    font-size: 12px; /* intentional literal — mobile tel */
  }

  .bc-cm .bc-cta__tel strong {
    font-size: 13px; /* intentional literal — mobile tel strong */
  }

  .bc-cm .bc-cta__links {
    font-size: 11px; /* intentional literal — mobile links */
    margin-top: 14px; /* intentional literal — mobile links margin */
  }
}/* bc-pricing — money-page price block (BLK-05)
 * Variants: card-right (=base) | --inline
 * Source: output/html/cocktail-workshop-teambuilding-styled.html (literal-precision rewrite, Plan 10 Task 4).
 * --inline variant: authored from spec (no reference CSS).
 * Scroll-reveal: triggered via [data-bc-reveal] + window.BCReveal.
 * Class names: pipeline render emits __price-from / __price-amount / __price-vat (matches styled HTML verbatim).
 * var() usage: colors + fonts only; spacing/sizing/breakpoints kept literal to match reference. */.bc-cm .bc-pricing {
  padding: 64px 0;
  background: var(--bc-white);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}.bc-cm .bc-pricing.bc-visible {
  opacity: 1;
  transform: translateY(0);
}.bc-cm .bc-pricing-wrap {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
  display: flex;
  gap: 72px;
  align-items: start;
}.bc-cm .bc-pricing__copy {
  flex: 1;
  min-width: 0;
  padding-top: 20px;
}.bc-cm .bc-pricing__copy h2 {
  font-family: var(--bc-font-heading);
  font-size: 34px;
  font-weight: 900;
  color: var(--bc-text);
  line-height: 1.45;
  margin-bottom: 20px;
}.bc-cm .bc-pricing__copy p {
  font-family: var(--bc-font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--bc-text-light);
  margin-bottom: 14px;
}/* Inline bold inside copy (e.g. "- **Het model**: ...") — keep body font so the
   opsomming reads consistent, not in a fallback serif. */.bc-cm .bc-pricing__copy strong {
  font-family: var(--bc-font-body);
  font-weight: 700;
}/* Body bullet list ("- **bold**: ..." opsomming) — body font + clean spacing. */.bc-cm .bc-pricing__copy ul {
  margin: 4px 0 16px;
  padding-left: 22px;
  list-style: disc;
}.bc-cm .bc-pricing__copy li {
  font-family: var(--bc-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--bc-text-light);
  margin-bottom: 8px;
}.bc-cm .bc-pricing__copy .bc-btn {
  margin-top: 12px;
}.bc-cm .bc-pricing__card {
  flex: 0 0 420px;
  background: var(--bc-cream);
  border-radius: 24px;
  padding: 48px 40px 44px;
  position: relative;
}/* ── Fase 2 D2 knop 1 (Bram-gelockt 2026-07-03): br3-patch-hoek rechtsboven op
   de kaart, zelfde asset/positie/rotatie als de north-star-ronde (hero-patch).
   Card-radius 24px blijft bewust ongemoeid. ── */.bc-cm .bc-pricing__card::after {
  content: "";
  position: absolute;
  top: -34px;
  right: -20px;
  width: 92px;
  height: 92px;
  background: url("assets/patch-bc-black-orangetext.svg") no-repeat center / contain;
  transform: rotate(10deg);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
  z-index: 3;
}/* kaart stackt op mobiel vol-breed; kleinere patch-offset zodat 'm binnen
   beeld blijft */@media (max-width: 768px) {
  .bc-cm .bc-pricing__card::after {
    width: 64px;
    height: 64px;
    top: -22px;
    right: -12px;
  }
}.bc-cm .bc-pricing__price {
  font-family: var(--bc-font-heading);
  font-weight: 900;
  color: var(--bc-text);
  margin-bottom: 2px;
}.bc-cm .bc-pricing__price-from {
  font-family: var(--bc-font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--bc-text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: block;
  margin-bottom: 4px;
}.bc-cm .bc-pricing__price-amount {
  font-size: 56px;
  line-height: 1;
  display: block;
}.bc-cm .bc-pricing__price-amount span {
  color: var(--bc-primary);
}.bc-cm .bc-pricing__price-vat {
  font-family: var(--bc-font-body);
  font-size: 14px;
  color: var(--bc-text-muted);
  margin-top: 4px;
  display: block;
}/* ── Variant: --offerte — calmer price block for "Op aanvraag" cards ──
   No 56px amount: a small label + soft note so the card is rustig and the CTA
   leads. Scoped via the bc-pricing--offerte modifier on the <section>. */.bc-cm .bc-pricing--offerte .bc-pricing__price--offerte {
  margin-bottom: 6px;
}.bc-cm .bc-pricing--offerte .bc-pricing__price-label {
  font-family: var(--bc-font-heading);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--bc-text);
  display: block;
}.bc-cm .bc-pricing--offerte .bc-pricing__price-note {
  font-family: var(--bc-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--bc-text-muted);
  margin-top: 4px;
  display: block;
}/* ── Offerte-form embed — Gravity Form in the card column (offerte-only) ──
   When a concept has a configured GF form_id, the card renders the form
   shortcode instead of the "Prijs op maat" block. The container keeps the form
   inside the cream card width and gives the GF output room to breathe. GF's own
   field styling renders inside [gravityform]; these rules just frame it. */.bc-cm .bc-pricing__form {
  width: 100%;
  max-width: 100%;
  margin: 0;
}.bc-cm .bc-pricing__form .gform_wrapper,
.bc-cm .bc-pricing__form form {
  margin: 0;
  max-width: 100%;
}.bc-cm .bc-pricing__form .gform_wrapper .gform_fields {
  display: grid;
  gap: 12px;
}.bc-cm .bc-pricing__form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.bc-cm .bc-pricing__form select,
.bc-cm .bc-pricing__form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--bc-font-body);
}.bc-cm .bc-pricing__form .gform_footer {
  margin-top: 16px;
  padding-top: 0;
}/* When the form replaces the price block, the includes list sits below the
   form as supporting reassurance — add a touch of separation. */.bc-cm .bc-pricing--offerte .bc-pricing__form + .bc-pricing__includes {
  margin-top: 24px;
}.bc-cm .bc-pricing__divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.06), transparent);
  margin: 28px 0;
  border: none;
}.bc-cm .bc-pricing__includes {
  list-style: none;
  padding: 0;
  margin: 0;
}.bc-cm .bc-pricing__includes li {
  font-family: var(--bc-font-body);
  font-size: 15px;
  color: var(--bc-text);
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}.bc-cm .bc-pricing__includes li:last-child {
  border-bottom: none;
}.bc-cm .bc-pricing__check {
  width: 22px;
  height: 22px;
  background: var(--bc-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}.bc-cm .bc-pricing__check svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--bc-white);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}/* ── Variant: --inline — flat cream banner, 3-column horizontal ── */.bc-cm .bc-pricing--inline {
  background: #fff;
}.bc-cm .bc-pricing--inline .bc-pricing-wrap {
  flex-direction: column;
  gap: 32px;
}.bc-cm .bc-pricing--inline .bc-pricing__copy {
  flex: none;
  max-width: 720px;
}.bc-cm .bc-pricing--inline .bc-pricing__copy h2 { margin-bottom: 8px; }.bc-cm .bc-pricing--inline .bc-pricing__card {
  background: var(--bc-cream);
  padding: 28px 36px;
  box-shadow: none;
  flex: none;
  width: 100%;
  border-radius: 16px;
  display: grid;
  grid-template-columns: minmax(170px, max-content) 1fr auto;
  align-items: center;
  gap: 40px;
  overflow: visible;
  position: relative;
}/* Price column — flat, italic Merriweather number */.bc-cm .bc-pricing--inline .bc-pricing__price {
  background: transparent;
  color: #1a1a1a;
  padding: 0;
  border-right: 1px solid rgba(0,0,0,0.1);
  padding-right: 32px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}.bc-cm .bc-pricing--inline .bc-pricing__from {
  font-family: var(--bc-font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bc-primary);
  margin: 0;
}.bc-cm .bc-pricing--inline .bc-pricing__amount {
  font-family: var(--bc-font-heading);
  font-style: italic;
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #1a1a1a;
  margin: 4px 0 2px;
}.bc-cm .bc-pricing--inline .bc-pricing__vat {
  font-family: var(--bc-font-body);
  font-size: 12px;
  font-weight: 500;
  color: #888;
  margin: 0;
}/* Includes — compact 2-col list, no card chrome */.bc-cm .bc-pricing--inline .bc-pricing__includes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
  padding: 0;
  margin: 0;
  list-style: none;
  align-content: center;
}.bc-cm .bc-pricing--inline .bc-pricing__includes li {
  font-family: var(--bc-font-body);
  font-size: 14px;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #1a1a1a;
}.bc-cm .bc-pricing--inline .bc-pricing__check {
  width: 14px;
  height: 14px;
  background: var(--bc-primary);
  border-radius: 50%;
  flex: 0 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}.bc-cm .bc-pricing--inline .bc-pricing__check svg {
  width: 8px;
  height: 8px;
  display: block;
  stroke: #fff;
  stroke-width: 2;
  fill: none;
}/* CTA — right column */.bc-cm .bc-pricing--inline .bc-pricing__card > .bc-btn {
  white-space: nowrap;
  justify-self: end;
}@media (max-width: 900px) {
  .bc-cm .bc-pricing--inline .bc-pricing__card {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .bc-cm .bc-pricing--inline .bc-pricing__price {
    border-right: 0;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-right: 0;
    padding-bottom: 16px;
  }
  .bc-cm .bc-pricing--inline .bc-pricing__includes {
    grid-template-columns: 1fr;
  }
  .bc-cm .bc-pricing--inline .bc-pricing__card > .bc-btn {
    justify-self: stretch;
    text-align: center;
  }
}/* ── Responsive: 900px (flex wrap, from styled HTML 900px breakpoint) ── */@media (max-width: 900px) {
  .bc-cm .bc-pricing-wrap {
    flex-direction: column;
    gap: 40px;
  }
  .bc-cm .bc-pricing__card {
    flex: none;
    width: 100%;
  }
  .bc-cm .bc-pricing__price-amount {
    font-size: 44px;
  }
}/* ── Responsive: 768px (mobile, from styled HTML 768px breakpoint) ── */@media (max-width: 768px) {
  .bc-cm .bc-pricing { padding: 48px 0; }
  .bc-cm .bc-pricing__copy h2 { font-size: 24px; }
  .bc-cm .bc-pricing__copy p { font-size: 15px; }
  .bc-cm .bc-pricing__card { padding: 32px 24px 28px; }
  .bc-cm .bc-pricing__price-amount { font-size: 40px; }
  .bc-cm .bc-pricing__includes li { font-size: 14px; padding: 8px 0; }
}/* Inline body links (bare <a> from the content pipeline) — brand-orange,
   consistent with text-image/article/prose (Wessel FB 2026-06-22). */.bc-cm .bc-pricing__copy a:not(.bc-btn) {
  color: var(--bc-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}.bc-cm .bc-pricing__copy a:not(.bc-btn):hover {
  color: var(--bc-primary-hover);
}/* === v1.2 Phase 11 — social-proof + content blocks === *//* bc-reviews — social-proof block (BLK-06)
 * Source: output/html/cocktail-workshop-teambuilding-styled.html (literal-precision rewrite, Plan 10 Task 5).
 * Scroll-reveal: triggered via [data-bc-reveal] + window.BCReveal.
 * var() usage: colors + fonts only; spacing/sizing/breakpoints kept literal to match reference. */.bc-cm .bc-reviews {
  padding: 64px 0 56px;
  background: var(--bc-cream);
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}.bc-cm .bc-reviews.bc-visible {
  opacity: 1;
  transform: translateY(0);
}.bc-cm .bc-reviews-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
  position: relative;
  z-index: 1;
}.bc-cm .bc-reviews__header {
  text-align: center;
  margin-bottom: 60px;
}.bc-cm .bc-reviews__header h2 {
  font-family: var(--bc-font-heading);
  font-size: 36px;
  font-weight: 900;
  color: var(--bc-text);
  margin-bottom: 12px;
}.bc-cm .bc-reviews__header p {
  font-family: var(--bc-font-body);
  font-size: 16px;
  color: var(--bc-text-muted);
}.bc-cm .bc-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 64px;
}.bc-cm .bc-review-card {
  background: var(--bc-white);
  border-radius: 20px;
  padding: 36px 32px 32px;
  position: relative;
  box-shadow: 0 2px 16px rgba(0,0,0,0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}.bc-cm .bc-review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}.bc-cm .bc-review-card:nth-child(1) { transform: rotate(-0.5deg); }.bc-cm .bc-review-card:nth-child(2) { transform: rotate(0.3deg); margin-top: 20px; }.bc-cm .bc-review-card:nth-child(3) { transform: rotate(-0.4deg); }.bc-cm .bc-review-card:nth-child(1):hover { transform: rotate(-0.5deg) translateY(-4px); }.bc-cm .bc-review-card:nth-child(2):hover { transform: rotate(0.3deg) translateY(-4px); }.bc-cm .bc-review-card:nth-child(3):hover { transform: rotate(-0.4deg) translateY(-4px); }.bc-cm .bc-review-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 32px;
  right: 32px;
  height: 3px;
  background: linear-gradient(90deg, var(--bc-primary), var(--bc-primary-light));
  border-radius: 0 0 3px 3px;
}.bc-cm .bc-review-card__stars {
  display: flex;
  gap: 3px;
  margin-bottom: 20px;
}.bc-cm .bc-review-card__stars svg {
  width: 18px;
  height: 18px;
  fill: var(--bc-primary);
}.bc-cm .bc-review-card__quote {
  font-family: var(--bc-font-heading);
  font-size: 15px;
  font-style: italic;
  line-height: 1.7;
  color: var(--bc-text-medium);
  margin-bottom: 28px;
  position: relative;
}.bc-cm .bc-review-card__quote::before {
  content: '\201C';
  font-family: Georgia, serif;
  font-size: 64px;
  color: var(--bc-primary);
  opacity: 0.12;
  position: absolute;
  top: -20px;
  left: -4px;
  line-height: 1;
  pointer-events: none;
}.bc-cm .bc-review-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.05);
}.bc-cm .bc-review-card__avatar {
  width: 40px;
  height: 40px;
  background: var(--bc-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bc-white);
  font-family: var(--bc-font-body);
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}.bc-cm .bc-review-card__author-info {
  font-family: var(--bc-font-body);
}.bc-cm .bc-review-card__author-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--bc-text);
  display: block;
}.bc-cm .bc-review-card__author-role {
  font-size: 12px;
  color: var(--bc-text-muted);
  display: block;
  margin-top: 1px;
}.bc-cm .bc-reviews__score-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}.bc-cm .bc-reviews__score-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bc-white);
  padding: 14px 28px;
  border-radius: 50px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}.bc-cm .bc-reviews__score-num {
  font-family: var(--bc-font-heading);
  font-size: 36px;
  font-weight: 900;
  color: var(--bc-primary);
  line-height: 1;
}.bc-cm .bc-reviews__score-label {
  font-family: var(--bc-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--bc-text);
}.bc-cm .bc-reviews__score-sub {
  font-family: var(--bc-font-body);
  font-size: 12px;
  color: var(--bc-text-muted);
}.bc-cm .bc-reviews__all-link {
  font-family: var(--bc-font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--bc-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.3s ease;
}.bc-cm .bc-reviews__all-link:hover { gap: 10px; }.bc-cm .bc-reviews__all-link::after { content: '\2192'; font-size: 18px; }.bc-cm .bc-reviews__logos {
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 40px;
  text-align: center;
}.bc-cm .bc-reviews__logos-label {
  font-family: var(--bc-font-body);
  font-size: 14px;
  color: var(--bc-text-muted);
  margin-bottom: 28px;
}.bc-cm .bc-reviews__logos-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  opacity: 0.4;
  filter: grayscale(100%);
}.bc-cm .bc-reviews__logos-row img {
  height: 28px;
  max-width: 120px;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}/* ── Responsive: 900px (grid collapses to 1 col) ── */@media (max-width: 900px) {
  .bc-cm .bc-reviews__grid {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 48px;
  }
  .bc-cm .bc-review-card:nth-child(1),
  .bc-cm .bc-review-card:nth-child(2),
  .bc-cm .bc-review-card:nth-child(3) { transform: none; margin-top: 0; }
  .bc-cm .bc-review-card:nth-child(1):hover,
  .bc-cm .bc-review-card:nth-child(2):hover,
  .bc-cm .bc-review-card:nth-child(3):hover { transform: translateY(-4px); }
}/* ── Responsive: 768px (mobile) — swipe carousel met peek volgende card ── */@media (max-width: 768px) {
  .bc-cm .bc-reviews { padding: 48px 0; }
  .bc-cm .bc-reviews-inner { padding-right: 0; padding-left: 24px; }
  .bc-cm .bc-reviews__header { margin-bottom: 36px; padding-right: 24px; }
  .bc-cm .bc-reviews__header h2 { font-size: 24px; }
  .bc-cm .bc-reviews__header p { font-size: 14px; }

  /* Convert grid to horizontal swipe carousel */
  .bc-cm .bc-reviews__grid {
    display: flex;
    grid-template-columns: none;
    max-width: none;
    margin: 0 0 48px;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;
    -webkit-overflow-scrolling: touch;
    padding-right: 24px;
    scrollbar-width: none;
  }
  .bc-cm .bc-reviews__grid::-webkit-scrollbar { display: none; }
  .bc-cm .bc-review-card {
    flex: 0 0 82%;
    max-width: 82%;
    scroll-snap-align: start;
    padding: 28px 24px 24px;
  }
  .bc-cm .bc-review-card__quote { font-size: 14px; }

  /* Restore center alignment for score/logos rows (carousel only affects grid) */
  .bc-cm .bc-reviews__score-row,
  .bc-cm .bc-reviews__logos-label,
  .bc-cm .bc-reviews__logos-row { padding-right: 24px; }

  .bc-cm .bc-reviews__score-row { gap: 16px; margin-bottom: 36px; }
  .bc-cm .bc-reviews__score-badge { padding: 10px 20px; }
  .bc-cm .bc-reviews__score-num { font-size: 28px; }
  .bc-cm .bc-reviews__score-label { font-size: 13px; }
  .bc-cm .bc-reviews__all-link { font-size: 13px; }
  .bc-cm .bc-reviews__logos-row { gap: 20px; }
  .bc-cm .bc-reviews__logos-row img { height: 20px; max-width: 80px; }
  .bc-cm .bc-reviews__logos-label { font-size: 12px; margin-bottom: 20px; }
}/* ── iteration-5 (Bram FB): centered cards, quote-first + bigger, no avatar, no top-stripe, chic (less round, no tilt) ── */.bc-cm .bc-review-card {
  border-radius: 8px;
  padding: 42px 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}.bc-cm .bc-review-card:nth-child(1) { transform: rotate(-0.6deg); margin-top: 0; }.bc-cm .bc-review-card:nth-child(2) { transform: rotate(0.4deg); margin-top: 18px; }.bc-cm .bc-review-card:nth-child(3) { transform: rotate(-0.5deg); margin-top: 0; }.bc-cm .bc-review-card:nth-child(1):hover { transform: rotate(-0.6deg) translateY(-4px); }.bc-cm .bc-review-card:nth-child(2):hover { transform: rotate(0.4deg) translateY(-4px); }.bc-cm .bc-review-card:nth-child(3):hover { transform: rotate(-0.5deg) translateY(-4px); }.bc-cm .bc-review-card::before { display: none; }.bc-cm .bc-review-card__quote {
  order: 1;
  font-family: var(--bc-font-heading);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;
  color: var(--bc-text);
  margin: 0 0 20px;
  padding-top: 34px;
}.bc-cm .bc-review-card__quote::before {
  content: '\201C';
  font-family: Georgia, serif;
  font-size: 58px;
  color: var(--bc-primary);
  opacity: 0.85;
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  line-height: 1;
}.bc-cm .bc-review-card__stars { order: 2; margin: 0 0 12px; justify-content: center; }.bc-cm .bc-review-card__author { order: 3; border-top: none; padding-top: 0; flex-direction: column; align-items: center; gap: 2px; }.bc-cm .bc-review-card__avatar { display: none; }.bc-cm .bc-review-card__author-name { font-size: 15px; }.bc-cm .bc-review-card__author-role { font-size: 13px; }/* Inline body links (bare <a> from the content pipeline) — brand-orange,
   consistent with text-image/article/prose (Wessel FB 2026-06-22). */.bc-cm .bc-review-card__quote a:not(.bc-btn) {
  color: var(--bc-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}.bc-cm .bc-review-card__quote a:not(.bc-btn):hover {
  color: var(--bc-primary-hover);
}/* Bram-fb 2026-07-03: quote-tekst op mobiel een maat kleiner. Staat NA de
   Brand 2.0 card-restyle hierboven (18px) omdat die anders op file-volgorde
   wint van een eerdere media-regel. */@media (max-width: 768px) {
  .bc-cm .bc-review-card__quote {
    font-size: 15px;
    line-height: 1.55;
    padding-top: 30px;
    margin-bottom: 16px;
  }
  .bc-cm .bc-review-card__quote::before {
    font-size: 48px;
  }
}/* bc-faq — FAQ accordion block (BLK-07)
 * Source: output/html/cocktail-workshop-teambuilding-styled.html (literal-precision rewrite, Plan 10 Task 6).
 * Scroll-reveal: triggered via [data-bc-reveal] + window.BCReveal.
 * var() usage: colors + fonts only; spacing/sizing/breakpoints kept literal to match reference. */.bc-cm .bc-faq {
  padding: 64px 0;
  background: var(--bc-white);
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}.bc-cm .bc-faq.bc-visible {
  opacity: 1;
  transform: translateY(0);
}.bc-cm .bc-faq-wrap {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
  position: relative;
}.bc-cm .bc-faq-wrap > h2 {
  font-family: var(--bc-font-heading);
  font-size: 34px;
  font-weight: 900;
  color: var(--bc-text);
  margin-bottom: 48px;
  text-align: center;
}.bc-cm .bc-faq__item {
  background: var(--bc-cream);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}.bc-cm .bc-faq__item:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}.bc-cm .bc-faq__summary {
  padding: 22px 28px;
  font-family: var(--bc-font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--bc-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}.bc-cm .bc-faq__summary::-webkit-details-marker { display: none; }.bc-cm .bc-faq__num {
  width: 36px;
  height: 36px;
  background: var(--bc-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bc-white);
  font-family: var(--bc-font-body);
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}.bc-cm .bc-faq__item[open] .bc-faq__num { transform: scale(1.1); }.bc-cm .bc-faq__question { flex: 1; }.bc-cm .bc-faq__toggle {
  font-size: 22px;
  color: var(--bc-primary);
  flex-shrink: 0;
  transition: transform 0.3s ease;
  line-height: 1;
}.bc-cm .bc-faq__item[open] .bc-faq__toggle { transform: rotate(45deg); }.bc-cm .bc-faq__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}.bc-cm .bc-faq__item[open] .bc-faq__answer-wrap {
  grid-template-rows: 1fr;
}.bc-cm .bc-faq__answer { overflow: hidden; }.bc-cm .bc-faq__answer-inner {
  padding: 0 28px 24px 82px;
  font-family: var(--bc-font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--bc-text-light);
}/* ── Responsive: 768px (mobile) ── */@media (max-width: 768px) {
  .bc-cm .bc-faq { padding: 48px 0; }
  .bc-cm .bc-faq-wrap > h2 { font-size: 24px; margin-bottom: 32px; }
  .bc-cm .bc-faq__summary { padding: 18px 20px; font-size: 15px; gap: 14px; }
  .bc-cm .bc-faq__num { width: 30px; height: 30px; font-size: 13px; }
  .bc-cm .bc-faq__answer-inner { padding: 0 20px 20px 20px; font-size: 14px; }
}/* iteration-6: styled toggle answers — bold words + teal-check list (like live) */.bc-cm .bc-faq__answer-inner strong { color: var(--bc-text); font-weight: 800; }.bc-cm .bc-faq__answer-inner ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}.bc-cm .bc-faq__answer-inner ul li {
  position: relative;
  padding-left: 30px;
}.bc-cm .bc-faq__answer-inner ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--bc-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.1l2.2 2.2 4.6-5' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 11px;
}/* Inline body links (bare <a> from the content pipeline) — brand-orange,
   consistent with text-image/article/prose (Wessel FB 2026-06-22). */.bc-cm .bc-faq__answer a:not(.bc-btn) {
  color: var(--bc-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}.bc-cm .bc-faq__answer a:not(.bc-btn):hover {
  color: var(--bc-primary-hover);
}/* bc-gallery — horizontal infinite-scroll image strip block (BLK-08)
 * Source: output/html/cocktail-workshop-teambuilding-styled.html (literal-precision rewrite, Plan 10 Task 7).
 * Lightbox CSS deferred to Task 11 (JS preservation will inject markup).
 * var() usage: colors + fonts only; spacing/sizing/breakpoints kept literal to match reference. */.bc-cm .bc-gallery {
  padding: 20px 0;
  background: var(--bc-white);
  overflow: hidden;
}.bc-cm .bc-gallery__strip {
  display: flex;
  /* No flex `gap`: with duplicateForLoop the track is 2N images and the
   * keyframe ends at translateX(-50%). A flex `gap` adds (2N-1) gaps to the
   * track width, so the first half is NOT exactly 50% -> the -50% landing
   * misses the image boundary by ~one gap -> a visible jump/seam mid-loop.
   * Fix: carry the inter-image spacing as margin-right on EVERY image (incl.
   * the last), so the track width = 2N * (imgW + gap) and the first N images
   * span exactly 50%. translateX(-50%) then lands precisely on image N+1. */
  animation: bc-gallery-scroll 30s linear infinite;
  width: -moz-max-content;
  width: max-content;
}.bc-cm .bc-gallery__strip:hover { animation-play-state: paused; }.bc-cm .bc-gallery__img {
  width: 360px;
  height: 240px;
  margin-right: 16px;
  border-radius: 16px;
  -o-object-fit: cover;
     object-fit: cover;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.3s ease;
}.bc-cm .bc-gallery__img:hover { transform: scale(1.03); }@keyframes bc-gallery-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}/* ── Responsive: 768px (mobile) ── */@media (max-width: 768px) {
  .bc-cm .bc-gallery__img { width: 260px; height: 175px; margin-right: 12px; }
}/* Respect reduced motion */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-gallery__strip { animation: none; }
}/* ── Lightbox (BLK-08 sub-component; DOM injected by gallery.js IIFE) ── */.bc-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.92);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.3s ease;
}.bc-lightbox.bc-lightbox--active {
  display: flex;
  opacity: 1;
}.bc-lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 20px 80px rgba(0,0,0,0.5);
  -o-object-fit: contain;
     object-fit: contain;
}.bc-lightbox__close {
  position: absolute;
  top: 24px;
  right: 32px;
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}.bc-lightbox__close:hover { background: rgba(255,255,255,0.2); }.bc-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  background: #0f8069;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, transform 0.3s;
  padding: 0;
}.bc-lightbox__nav img {
  width: 28px;
  height: auto;
  filter: brightness(10);
}.bc-lightbox__nav--prev img { transform: rotate(90deg); }.bc-lightbox__nav--next img { transform: rotate(-90deg); }.bc-lightbox__nav:hover {
  background: var(--bc-primary);
  transform: translateY(-50%) scale(1.1);
}.bc-lightbox__nav--prev { left: 24px; }.bc-lightbox__nav--next { right: 24px; }/* === v1.4.5 — expanded block library === *//* bc-testimonial — single prominent quote (v1.4.5)
 * Distinct from bc-reviews (aggregate card grid). Used to highlight ONE
 * customer voice with optional photo + role/company.
 * Variants: default (quote left, photo right) | centered (vertical stack).
 *
 * Fase 2 D3 (Bram-gelockt 2026-07-03):
 * - Bug-fix: glyph positioneert/schaalt in em t.o.v. de quote-font-size i.p.v.
 *   vaste px t.o.v. de sectie — geen losschietende glyph meer bij lange
 *   (meerregelige) quotes of smalle kolommen.
 * - Signature-quote-taal (knop 2): editorial serif, oranje glyph, paginawit bg.
 */.bc-cm .bc-testimonial {
  padding: 56px 0;
  background: var(--bc-white, #fff9f0);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}.bc-cm .bc-testimonial.bc-visible {
  opacity: 1;
  transform: none;
}.bc-cm .bc-testimonial-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}/* Large editorial quote with decorative orange opening mark (signature-taal) */.bc-cm .bc-testimonial__quote {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.38;
  letter-spacing: -0.01em;
  color: var(--bc-text, #1a1a1a);
  margin: 0;
  position: relative;
  padding-left: 2em; /* em i.p.v. 56px vast: schaalt mee met de quote-font-size */
}.bc-cm .bc-testimonial__quote::before {
  content: "\201C"; /* left double quotation mark */
  position: absolute;
  left: 0;
  top: -0.15em; /* em i.p.v. -16px vast: blijft boven de eerste regel hangen */
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: 3.4em; /* em i.p.v. 96px vast: schaalt mee met de quote */
  line-height: 0.8; /* voorkomt dat het glyph zelf regelhoogte opeet bij wrap */
  color: var(--bc-primary, #ee7437);
  opacity: 0.9;
  font-style: normal;
}/* Author row: photo + name/role meta */.bc-cm .bc-testimonial__author {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 56px;
}.bc-cm .bc-testimonial__photo {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: #f5f5f5;
}.bc-cm .bc-testimonial__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}.bc-cm .bc-testimonial__author-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}.bc-cm .bc-testimonial__name {
  font-family: 'Merriweather', Georgia, serif; /* signature-taal: serif naam */
  font-size: 17px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}.bc-cm .bc-testimonial__role {
  font-family: var(--bc-font-body);
  font-size: 14px;
  color: #999;
  margin: 0;
}/* Variant: centered — vertical stack centered, no left padding */.bc-cm .bc-testimonial--centered .bc-testimonial-inner {
  max-width: 800px;
  text-align: center;
}.bc-cm .bc-testimonial--centered .bc-testimonial__quote {
  padding-left: 0;
  padding-top: 48px;
}.bc-cm .bc-testimonial--centered .bc-testimonial__quote::before {
  left: 50%;
  top: -8px;
  transform: translateX(-50%);
}.bc-cm .bc-testimonial--centered .bc-testimonial__author {
  padding-left: 0;
  justify-content: center;
}/* Mobile breakpoint */@media (max-width: 768px) {
  .bc-cm .bc-testimonial {
    padding: 48px 0;
  }
  .bc-cm .bc-testimonial__quote {
    font-size: 22px;
    padding-left: 1.8em;
  }
  .bc-cm .bc-testimonial__quote::before {
    font-size: 3.2em;
    top: -0.1em;
  }
  .bc-cm .bc-testimonial__author {
    padding-left: 36px;
  }
}/* bc-prose — long-form editorial text (v1.4.5)
 * Substitutes ad-hoc text-image when you want pure copy without image column.
 * Variants: default (700px max-width comfort-read) | wide (900px).
 */.bc-cm .bc-prose {
  padding: 64px 0;
  background: #fff;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}.bc-cm .bc-prose.bc-visible {
  opacity: 1;
  transform: none;
}.bc-cm .bc-prose-inner {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}.bc-cm .bc-prose--wide .bc-prose-inner {
  max-width: 900px;
}.bc-cm .bc-prose__heading {
  font-family: var(--bc-font-heading);
  font-size: 36px;
  font-weight: 900;
  line-height: 1.3;
  color: #1a1a1a;
  margin: 0 0 24px;
}.bc-cm .bc-prose p {
  font-family: var(--bc-font-body);
  font-size: 17px;
  line-height: 1.75;
  color: #333;
  margin: 0 0 20px;
}.bc-cm .bc-prose p:last-child {
  margin-bottom: 0;
}/* Inline links in prose (exclude .bc-btn) */.bc-cm .bc-prose a:not(.bc-btn) {
  color: var(--bc-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}.bc-cm .bc-prose a:not(.bc-btn):hover {
  color: #d4621e;
}@media (max-width: 768px) {
  .bc-cm .bc-prose {
    padding: 48px 0;
  }
  .bc-cm .bc-prose__heading {
    font-size: 26px;
    margin-bottom: 16px;
  }
  .bc-cm .bc-prose p {
    font-size: 16px;
    margin-bottom: 16px;
  }
}/* bc-features — icon + heading + body grid (v1.4.5)
 * Variants: cols-3 (default, 3-up) | cols-2 (2-up) | cols-4 (4-up).
 * Items stack vertically @ mobile breakpoint.
 *
 * Fase 2 FB-ronde A (Bram-gelockt 2026-07-03), kaart 2.0 + cream+patch netto:
 * omgekeerde tonen (cream kaarten op paginawit), oranje top-rand weg, radius 16
 * met de gelockte shadow-taal, de drie multi-kleur deco-arcs vervangen door EEN
 * orange-arc familie-icoon (::before, rotatie-variatie), serif item-headings,
 * br3-patch-sticker op kaart 1 als enige accent.
 */.bc-cm .bc-features {
  padding: 64px 0;
  /* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): paginawit, de kaarten dragen de cream-toon. */
  background: var(--bc-white);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}.bc-cm .bc-features.bc-visible {
  opacity: 1;
  transform: none;
}.bc-cm .bc-features-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}.bc-cm .bc-features__heading {
  font-family: var(--bc-font-heading);
  font-size: 32px;
  font-weight: 900;
  line-height: 1.3;
  color: #1a1a1a;
  margin: 0 0 40px;
  text-align: center;
}.bc-cm .bc-features__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}.bc-cm .bc-features--cols-2 .bc-features__items {
  grid-template-columns: repeat(2, 1fr);
}.bc-cm .bc-features--cols-4 .bc-features__items {
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}/* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): cream 2.0-kaart, top-rand weg,
   radius 16, gelockte shadow-taal. position:relative ankert de patch op kaart 1. */.bc-cm .bc-features__item {
  list-style: none;
  margin: 0;
  position:relative;
  padding:32px 30px;
  background:var(--bc-cream);
  border-top:0;
  border-radius:16px;
  box-shadow:0 1px 2px rgba(36,36,34,.04),0 14px 40px rgba(36,36,34,.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}.bc-cm .bc-features__item:hover {
  transform:translateY(-5px);
  box-shadow:0 1px 2px rgba(36,36,34,.04),0 22px 54px rgba(26,26,26,.12);
}/* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): de gedateerde multi-kleur
   deco-arc-iconen gaan uit; EEN orange-arc familie-icoon via ::before vervangt
   ze (zelfde asset als author-byline/related-pages, variatie via rotatie). */.bc-cm .bc-features__icon{display:none}.bc-cm .bc-features__item::before{
  content:"";width:58px;height:38px;flex:0 0 auto;margin-bottom:6px;
  background:url("https://www.barcompany.nl/wp-content/uploads/2021/07/svg-orange.svg") no-repeat left center/contain;
  transform-origin:left center;
}.bc-cm .bc-features__item:nth-child(2)::before{transform:rotate(7deg)}.bc-cm .bc-features__item:nth-child(3)::before{transform:rotate(-9deg)}.bc-cm .bc-features__item-heading {
  /* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): serif item-headings. */
  font-family:'Merriweather', Georgia, serif;
  font-size:19px;
  font-weight:700;
  line-height:1.35;
  color: #1a1a1a;
  margin: 0;
}.bc-cm .bc-features__item-body {
  font-family: var(--bc-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}/* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03), cream+patch: br3-patch-sticker
   op kaart 1 als enige accent (zelfde asset als hero/pricing, repo-pad i.p.v.
   het preview-relatieve pad). */.bc-cm .bc-features__item:first-child::after{
  content:"";position:absolute;top:-26px;right:-14px;width:78px;height:78px;
  background:url("assets/patch-bc-black-orangetext.svg") no-repeat center/contain;
  transform:rotate(9deg);filter:drop-shadow(0 8px 16px rgba(26,26,26,.20));
  z-index:2;pointer-events:none;
}@media (max-width:560px){
  .bc-cm .bc-features__item:first-child::after{width:58px;height:58px;top:-20px;right:-8px}
}@media (max-width: 768px) {
  .bc-cm .bc-features {
    padding: 48px 0;
  }
  .bc-cm .bc-features__heading {
    font-size: 24px;
    margin-bottom: 24px;
  }
  .bc-cm .bc-features__items,
  .bc-cm .bc-features--cols-2 .bc-features__items,
  .bc-cm .bc-features--cols-4 .bc-features__items {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  /* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): kaart-padding blijft 32/30,
     de oude mobiele 20px-verdichting hoorde bij de vervangen kaart-look. */
}/* ── iteration-2: bullet lists inside a feature cell render as teal check-list.
   renderMarkdownInline emits <ul> hoisted out of the body <p>, so the list is a
   sibling within .bc-features__item. ── */.bc-cm .bc-features__item ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}.bc-cm .bc-features__item ul li {
  position: relative;
  padding-left: 28px;
  font-family: var(--bc-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: #555;
}.bc-cm .bc-features__item ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--bc-teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.1l2.2 2.2 4.6-5' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}/* Inline body links (bare <a> from the content pipeline) — brand-orange,
   consistent with text-image/article/prose (Wessel FB 2026-06-22). */.bc-cm .bc-features__item-body a:not(.bc-btn) {
  color: var(--bc-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}.bc-cm .bc-features__item-body a:not(.bc-btn):hover {
  color: var(--bc-primary-hover);
}/* bc-related-pages — image + centered caption cards (iteration-5, matches live BC).
 * No card container: rounded image on cream, centered title + excerpt, small orange
 * BC-arc accent below (replaces the v4 circular arrow). 4-item -> 2x2, 2-item -> 2-up;
 * both groups sit on a cream band with diagonal entry (services) + exit (lees-ook).
 */.bc-cm .bc-related-pages {
  padding: 64px 0;
  background: #fff;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}.bc-cm .bc-related-pages.bc-visible { opacity: 1; transform: none; }.bc-cm .bc-related-pages-inner { max-width: 1260px; margin: 0 auto; padding: 0 var(--bc-gutter); }.bc-cm .bc-related-pages__heading {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 32px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--bc-text);
  margin: 0 0 36px;
  letter-spacing: -0.01em;
}.bc-cm .bc-related-pages__items {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px 36px;
}.bc-cm .bc-related-pages__item { list-style: none; margin: 0; }/* 4-item group -> 2x2, 2-item group -> 2-up */.bc-cm .bc-related-pages__items:has(> .bc-related-pages__item:nth-child(4):last-child),
.bc-cm .bc-related-pages__items:has(> .bc-related-pages__item:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}/* Card = rounded image + centered caption, no white container */.bc-cm .bc-related-pages__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: var(--bc-text);
}.bc-cm .bc-related-pages__image {
  position: relative;
  width: 100%;
  aspect-ratio: 7 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 32px rgba(36,36,34,0.10);
}.bc-cm .bc-related-pages__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
}.bc-cm .bc-related-pages__link:hover .bc-related-pages__image img { transform: scale(1.05); }.bc-cm .bc-related-pages__body {
  padding: 16px 8px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}.bc-cm .bc-related-pages__title {
  font-family: var(--bc-font-heading);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--bc-text);
  margin: 0;
  letter-spacing: -0.005em;
}.bc-cm .bc-related-pages__excerpt {
  font-family: var(--bc-font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--bc-text-light);
  margin: 0;
}/* Small BC orange-arc accent below the caption (like live), replaces the circular arrow */.bc-cm .bc-related-pages__link::after {
  content: "";
  display: block;
  width: 30px;
  height: 16px;
  margin: 12px auto 0;
  background: url("https://www.barcompany.nl/wp-content/uploads/2021/07/svg-orange.svg") no-repeat center / contain;
  transition: transform 0.3s ease;
}.bc-cm .bc-related-pages__link:hover::after { transform: translateY(3px); }/* Cream diagonal band: services (4-item) = diagonal entry; lees-ook (2-item) = diagonal exit */.bc-cm .bc-related-pages:has(.bc-related-pages__item:nth-child(4):last-child) {
  background: var(--bc-cream);
  margin-top: 28px;
  margin-bottom: 0;
  padding-top: 120px;
  padding-bottom: 64px;
  clip-path: polygon(0 56px, 100% 0, 100% 100%, 0 100%);
}.bc-cm .bc-related-pages:has(.bc-related-pages__item:nth-child(2):last-child) {
  background: var(--bc-cream);
  margin-top: 0;
  margin-bottom: 28px;
  padding-top: 56px;
  padding-bottom: 120px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 56px));
}/* Inline variant — compact pill list */.bc-cm .bc-related-pages--inline .bc-related-pages__items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  grid-template-columns: none;
}.bc-cm .bc-related-pages--inline .bc-related-pages__link {
  flex-direction: row;
  background: var(--bc-cream);
  border-radius: 999px;
  padding: 10px 18px;
  gap: 10px;
}.bc-cm .bc-related-pages--inline .bc-related-pages__image,
.bc-cm .bc-related-pages--inline .bc-related-pages__link::after { display: none; }.bc-cm .bc-related-pages--inline .bc-related-pages__title { font-size: 14px; font-weight: 700; }.bc-cm .bc-related-pages--inline .bc-related-pages__excerpt { display: none; }/* iteration-6: high-end card hover — lift + zoom + light-sweep + title accent + arc nudge */.bc-cm .bc-related-pages__link { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }.bc-cm .bc-related-pages__link:hover { transform: translateY(-4px); }.bc-cm .bc-related-pages__image { transition: box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); }.bc-cm .bc-related-pages__link:hover .bc-related-pages__image { box-shadow: 0 14px 34px rgba(36, 36, 34, 0.14); }.bc-cm .bc-related-pages__image img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }.bc-cm .bc-related-pages__link:hover .bc-related-pages__image img { transform: scale(1.03); }.bc-cm .bc-related-pages__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, 0.16) 50%, transparent 64%);
  transform: translateX(-130%);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}.bc-cm .bc-related-pages__link:hover .bc-related-pages__image::after { transform: translateX(130%); }.bc-cm .bc-related-pages__title { transition: color 0.3s ease; }.bc-cm .bc-related-pages__link:hover .bc-related-pages__title { color: var(--bc-primary); }@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-related-pages__link,
  .bc-cm .bc-related-pages__link:hover,
  .bc-cm .bc-related-pages__image img,
  .bc-cm .bc-related-pages__image::after { transition: none; transform: none; }
}@media (max-width: 900px) {
  .bc-cm .bc-related-pages__items { grid-template-columns: repeat(2, 1fr); }
}@media (max-width: 768px) {
  .bc-cm .bc-related-pages { padding: 56px 0; }
  .bc-cm .bc-related-pages__items,
  .bc-cm .bc-related-pages__items:has(> .bc-related-pages__item:nth-child(4):last-child),
  .bc-cm .bc-related-pages__items:has(> .bc-related-pages__item:nth-child(2):last-child) {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .bc-cm .bc-related-pages__heading { font-size: 26px; }
}/* ════════════════════════════════════════════════════════════════════════
   br6: Ook interessant 2.0 (gelockt, permanent), grotere foto's (4/3 i.p.v.
   de korte 7/3), card-vlak met diepe schaduw, serif titels.
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-related-pages__image {
  aspect-ratio: 4 / 3;
  height: auto;
}.bc-cm .bc-related-pages__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}.bc-cm .bc-related-pages__item {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(26, 26, 26, 0.12);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s;
  padding-bottom: 26px;
}.bc-cm .bc-related-pages__image {
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}.bc-cm .bc-related-pages__item:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 60px rgba(26, 26, 26, 0.18);
}.bc-cm .bc-related-pages__body {
  padding: 20px 22px 28px;
}.bc-cm .bc-related-pages__title {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 23px;
}.bc-cm .bc-related-pages__heading {
  font-size: clamp(30px, 2.9vw, 40px);
}/* ════════════════════════════════════════════════════════════════════════
   br9: Impressie-slider (gelockt, permanent), variant "slider" van
   related-pages, sfeer-fotokaarten op een cream band i.p.v. het cards-grid.
   Markup-klassen (Task 6): .bc-related-pages--slider (root) met
   .bc-imp-head / .bc-imp-eyebrow / .bc-imp-hint / .bc-imp-track /
   .bc-imp-card. `ns-imp-*` uit de preview-config wordt hier `bc-imp-*`;
   `ns-impressie` (root) wordt `.bc-related-pages--slider`. De drag-JS leeft
   in rhythm.js (Task 6), niet hier.
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-related-pages--slider {
  background: var(--bc-cream);
  padding: 96px 0 104px;
  overflow: hidden;
}/* Als direct na de slider een slant-in blok komt (cta, evt. met bc-swx
 * anker ertussen): cream band 48px laten doorlopen achter de clip-wig,
 * anders toont de wig de paginawit-ondergrond als los vakje tussen twee
 * gekleurde banden (Bram-fb 2026-07-02). Het latere blok schildert door
 * DOM-volgorde gewoon over de uitloop heen, behalve in de geclipte wig. */.bc-cm .bc-related-pages--slider:has(+ .bc-rx--slant-in),
.bc-cm .bc-related-pages--slider:has(+ .bc-swx + .bc-rx--slant-in) {
  margin-bottom: -48px;
  padding-bottom: 152px;
}.bc-cm .bc-related-pages--slider .bc-imp-head {
  max-width: 1260px;
  margin: 0 auto 44px;
  padding: 0 var(--bc-gutter);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}.bc-cm .bc-related-pages--slider h2 {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.4px;
  color: var(--bc-text);
  margin: 0;
}.bc-cm .bc-related-pages--slider .bc-imp-eyebrow {
  font: 700 13px/1 Mulish, sans-serif;
  letter-spacing: 0.22em;
  color: var(--bc-primary);
  text-transform: uppercase;
  margin: 0 0 16px;
}.bc-cm .bc-related-pages--slider .bc-imp-hint {
  font: 700 12px Mulish, sans-serif;
  letter-spacing: 0.18em;
  color: #6b665f;
  white-space: nowrap;
  padding-bottom: 8px;
}/* Track loopt bewust BREDER dan de content-kolom (start links van de
 * wrap-lijn, loopt rechts uit beeld) zodat het blok groter oogt dan de
 * andere blokken. margin-left i.p.v. padding-left: dan begint de scrollbar
 * op de kaart-lijn en is hij even breed als de slider zelf. */.bc-cm .bc-related-pages--slider .bc-imp-track {
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 32px 26px 0;
  margin-left: max(14px, calc((100vw - 1260px) / 2 - 56px));
  scrollbar-width: thin;
  scrollbar-color: var(--bc-primary) transparent;
}.bc-cm .bc-related-pages--slider .bc-imp-track::-webkit-scrollbar {
  height: 6px;
}.bc-cm .bc-related-pages--slider .bc-imp-track::-webkit-scrollbar-thumb {
  background: var(--bc-primary);
  border-radius: 3px;
}.bc-cm .bc-related-pages--slider .bc-imp-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  text-decoration: none;
  display: block;
}.bc-cm .bc-related-pages--slider .bc-imp-card:nth-child(even) {
  margin-top: 28px;
}.bc-cm .bc-related-pages--slider .bc-imp-card img {
  aspect-ratio: 3 / 4;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 22px 50px rgba(36, 36, 34, 0.16);
  display: block;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s;
}.bc-cm .bc-related-pages--slider .bc-imp-card:hover img {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 30px 64px rgba(36, 36, 34, 0.22);
}.bc-cm .bc-related-pages--slider .bc-imp-card p {
  font: 700 12px Mulish, sans-serif;
  letter-spacing: 0.16em;
  color: #4a463f;
  margin: 14px 0 0;
}.bc-cm .bc-related-pages--slider .bc-imp-card:hover p {
  color: var(--bc-primary);
}.bc-cm .bc-related-pages--slider .bc-imp-sub {
  display: block;
  font: 400 14px/1.5 Mulish, sans-serif;
  letter-spacing: 0;
  color: #6b665f;
  margin-top: 5px;
}.bc-cm .bc-related-pages--slider .bc-imp-track {
  cursor: grab;
}.bc-cm .bc-related-pages--slider .bc-imp-track.bc-imp-dragging {
  cursor: grabbing;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}.bc-cm .bc-related-pages--slider .bc-imp-track.bc-imp-dragging .bc-imp-card {
  pointer-events: none;
}@media (max-width: 768px) {
  .bc-cm .bc-related-pages--slider { padding: 64px 0 72px; }
  .bc-cm .bc-related-pages--slider .bc-imp-card { flex-basis: 240px; }
  .bc-cm .bc-related-pages--slider .bc-imp-card:nth-child(even) { margin-top: 16px; }
  .bc-cm .bc-related-pages--slider .bc-imp-hint { display: none; }
}/* count-adaptief (niet altijd 6 forceren): bij minder dan 5 kaarten is er
 * niks te slepen -> statische rij binnen de content-kolom, sleep-hint weg,
 * kaarten groeien mee; bij 1-3 vullen ze de rij. */@media (min-width: 769px) {
  .bc-cm .bc-related-pages--slider:not(:has(.bc-imp-card:nth-child(5))) .bc-imp-hint {
    display: none;
  }
  .bc-cm .bc-related-pages--slider:not(:has(.bc-imp-card:nth-child(5))) .bc-imp-track {
    overflow-x: visible;
    margin: 0 auto;
    max-width: 1260px;
    padding-left: var(--bc-gutter);
    padding-right: var(--bc-gutter);
  }
  .bc-cm .bc-related-pages--slider:not(:has(.bc-imp-card:nth-child(4))) .bc-imp-card {
    flex: 1 1 0;
  }
  .bc-cm .bc-related-pages--slider:not(:has(.bc-imp-card:nth-child(4))) .bc-imp-card:nth-child(even) {
    margin-top: 0;
  }
}/* bc-case-result — case-study editorial spread (BC v1.4.5 v3)
 * Magazine 2-page-spread feel:
 *   LEFT — narrative: "CASE STUDY" tag + heading + intro paragraph
 *   RIGHT — metrics: vertical list, hairline rules, number + label + desc
 *
 * Fase 2 FB-ronde A (Bram-gelockt 2026-07-03), editorial: de cream card-spread
 * is weg. Magazine-stijl met een zware hairline-regel bovenaan (person-stats/
 * numbered-usp-taal), oranje serif-cijfers (Merriweather, tabular-nums),
 * donkere labels.
 */.bc-cm .bc-case-result {
  padding: 64px 0;
  background: #fff;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}.bc-cm .bc-case-result.bc-visible {
  opacity: 1;
  transform: none;
}/* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03), editorial: cream card-bg
   (::before) en de z-index-lift zijn verwijderd; de spread opent met een
   zware hairline-regel. */.bc-cm .bc-case-result-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding:36px var(--bc-gutter) 0;
  border-top:2px solid rgba(36,36,34,.85);
}.bc-cm .bc-case-result-inner::before{display:none}.bc-cm .bc-case-result__heading {
  font-family: var(--bc-font-heading);
  font-size: 32px;
  font-weight: 900;
  line-height: 1.2;
  color: #1a1a1a;
  margin: 0 0 12px;
  max-width: 480px;
  letter-spacing: -0.01em;
  position: relative;
  padding-top: 28px;
}/* "CASE STUDY" tag above heading */.bc-cm .bc-case-result__heading::before {
  content: "Case study";
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--bc-font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bc-primary);
}.bc-cm .bc-case-result__intro {
  font-family: var(--bc-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: #555;
  max-width: 480px;
  margin: 0;
}/* Metrics list — vertical stacked rows on right column.
   Implement via grid spanning intro + items: intro left, items right. */.bc-cm .bc-case-result__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}/* Layout: convert section to grid via grid-template-rows trick is hard.
   Cleaner: use CSS grid on inner with heading+intro spanning left col,
   items spanning right col. Done via grid + child placement. */.bc-cm .bc-case-result-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}.bc-cm .bc-case-result__heading {
  grid-column: 1;
  grid-row: 1;
}.bc-cm .bc-case-result__intro {
  grid-column: 1;
  grid-row: 2;
}.bc-cm .bc-case-result__items {
  grid-column: 2;
  /* FB-ronde C (E1): span ook de badge- (3) en ghost-rij (4) links. */
  grid-row: 1 / 5;
}.bc-cm .bc-case-result__item {
  list-style: none;
  padding: 20px 0;
  /* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): hairline in de warme alpha-tint. */
  border-bottom:1px solid rgba(36,36,34,.12);
  display: grid;
  grid-template-columns: auto 1fr;
  -moz-column-gap: 24px;
       column-gap: 24px;
  row-gap: 4px;
  align-items: baseline;
}.bc-cm .bc-case-result__item:first-child {
  padding-top: 0;
}.bc-cm .bc-case-result__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}/* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): oranje serif-cijfers met vaste
   maatvoering (tabular-nums), labels donker. */.bc-cm .bc-case-result__value {
  grid-column: 1;
  grid-row: 1 / 3;
  font-family:'Merriweather', Georgia, serif;
  font-style: normal;
  font-size:54px;
  font-weight: 900;
  line-height: 1;
  color:var(--bc-primary);
  letter-spacing:-0.02em;
  min-width:130px;
  font-variant-numeric:tabular-nums;
}.bc-cm .bc-case-result__label {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--bc-font-body);
  font-size: 12px;
  font-weight: 700;
  color:var(--bc-text);
  text-transform: uppercase;
  letter-spacing:.14em;
  margin: 0;
}.bc-cm .bc-case-result__item-desc {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--bc-font-body);
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  margin: 0;
}@media (max-width: 900px) {
  .bc-cm .bc-case-result { padding: 56px 24px; }
  /* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): geen card-padding-overrides
     meer; de editorial inner-padding (36px gutter 0) geldt op elke breedte. */
  .bc-cm .bc-case-result-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .bc-cm .bc-case-result__heading,
  .bc-cm .bc-case-result__intro,
  .bc-cm .bc-case-result__items {
    grid-column: 1;
    grid-row: auto;
  }
  .bc-cm .bc-case-result__intro { max-width: none; }
}@media (max-width: 600px) {
  .bc-cm .bc-case-result { padding: 48px 20px; }
  .bc-cm .bc-case-result__heading { font-size: 24px; }
  .bc-cm .bc-case-result__intro { font-size: 15px; }
  /* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): editorial cijfer-maat mobiel. */
  .bc-cm .bc-case-result__value{font-size:42px;min-width:96px}
  .bc-cm .bc-case-result__item-desc { font-size: 13px; }
}/* Inline body links (bare <a> from the content pipeline) — brand-orange,
   consistent with text-image/article/prose (Wessel FB 2026-06-22). */.bc-cm .bc-case-result__intro a:not(.bc-btn) {
  color: var(--bc-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}.bc-cm .bc-case-result__intro a:not(.bc-btn):hover {
  color: var(--bc-primary-hover);
}.bc-cm .bc-case-result__item-desc a:not(.bc-btn) {
  color: var(--bc-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}.bc-cm .bc-case-result__item-desc a:not(.bc-btn):hover {
  color: var(--bc-primary-hover);
}/* ── FB-ronde C (E1, Bram-GO 2026-07-03): live cijfers ──────────────────────
   Count-up enhancement (src/components/case-result.js). Gate-class .bc-cr-js
   komt uit JS (patroon bc-nusp-js): verborgen startstates gelden ALLEEN met
   draaiende JS, zonder JS staat alles op eindstand. .bc-cr-in = in beeld
   (op de sectie: badge + ghost; per stat: reveal + vul-lijn synchroon met de
   count-up). De decoratieve arc uit het concept is bewust NIET geport. *//* stempel-badge "Gemeten resultaat" (render-constant): groen, dubbelrand,
   licht gekanteld. Rij 3 links; -26px compenseert de 56px row-gap -> netto
   30px onder de intro (concept-maat). */.bc-cm .bc-case-result__badge {
  grid-column: 1;
  grid-row: 3;
  justify-self: start;
  margin-top: -26px;
  padding: 10px 16px 9px;
  border: 2px solid var(--bc-green);
  border-radius: 10px;
  color: var(--bc-green);
  font-family: var(--bc-font-body);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: rotate(-6deg);
  position: relative;
}.bc-cm .bc-case-result__badge::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(15, 128, 105, 0.45);
  border-radius: 6px;
  pointer-events: none;
}/* ghost-cijfer: waarde van stat 1 als outline op de achtergrond; de count-up
   telt 'm mee. Rij 4 links; -10px -> netto 46px onder de badge. */.bc-cm .bc-case-result__ghost {
  grid-column: 1;
  grid-row: 4;
  margin: -10px 0 0 -5px;
  font-family: 'Merriweather', Georgia, serif;
  font-size: clamp(110px, 12vw, 168px);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -4px;
  color: transparent;
  -webkit-text-stroke: 2px rgba(238, 116, 55, 0.32);
  -webkit-user-select: none;
          -moz-user-select: none;
       user-select: none;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow: hidden;
}@supports not (-webkit-text-stroke: 2px black) {
  .bc-cm .bc-case-result__ghost { color: rgba(238, 116, 55, 0.12); }
}/* oranje vul-lijn: ::after over de bestaande hairline heen, vult (1.15s)
   synchroon met de count-up (~1.1s). Eindstand zonder JS = gevulde lijn. */.bc-cm .bc-case-result__item {
  position: relative;
}.bc-cm .bc-case-result__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--bc-primary);
  transform-origin: left;
}/* de laatste stat krijgt (net als in het concept) ook een lijn; geef 'm de
   lijn-lucht van de andere stats terug (ronde A zette die op 0 zonder lijn) */.bc-cm .bc-case-result__item:last-child {
  padding-bottom: 20px;
}/* startstates (alleen met JS actief) + in-states */.bc-cm .bc-cr-js .bc-case-result__item {
  opacity: 0;
  transform: translateY(26px);
}.bc-cm .bc-cr-js .bc-case-result__item.bc-cr-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-cr-js .bc-case-result__item::after {
  transform: scaleX(0);
}.bc-cm .bc-cr-js .bc-case-result__item.bc-cr-in::after {
  transform: scaleX(1);
  transition: transform 1.15s cubic-bezier(0.33, 1, 0.68, 1) 0.1s;
}.bc-cm .bc-cr-js .bc-case-result__badge {
  opacity: 0;
  transform: rotate(-14deg) scale(0.72);
}.bc-cm .bc-cr-js.bc-cr-in .bc-case-result__badge {
  opacity: 1;
  transform: rotate(-6deg) scale(1);
  transition: opacity 0.35s ease 0.95s, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.95s;
}.bc-cm .bc-cr-js .bc-case-result__ghost {
  opacity: 0;
  transform: translateY(20px);
}.bc-cm .bc-cr-js.bc-cr-in .bc-case-result__ghost {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s ease 0.2s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}/* mobiel rustig houden: cijfers zijn de show (concept: ghost weg <940px) */@media (max-width: 940px) {
  .bc-cm .bc-case-result__ghost { display: none; }
}/* single-column collapse: expliciete rijen loslaten, badge-marge terug */@media (max-width: 900px) {
  .bc-cm .bc-case-result__badge,
  .bc-cm .bc-case-result__ghost {
    grid-column: 1;
    grid-row: auto;
  }
  .bc-cm .bc-case-result__badge { margin-top: 0; }
}/* reduced-motion failsafe (JS zet de gate-class dan al niet; belt & braces) */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-cr-js .bc-case-result__item,
  .bc-cm .bc-cr-js .bc-case-result__badge,
  .bc-cm .bc-cr-js .bc-case-result__ghost {
    opacity: 1;
    transition: none;
  }
  .bc-cm .bc-cr-js .bc-case-result__item { transform: none; }
  .bc-cm .bc-cr-js .bc-case-result__ghost { transform: none; }
  .bc-cm .bc-cr-js .bc-case-result__badge { transform: rotate(-6deg); }
  .bc-cm .bc-cr-js .bc-case-result__item::after {
    transform: none;
    transition: none;
  }
}/* bc-image — standalone image (BC v1.4.5)
 * Variants:
 *   contained (default, 820px max — comfortable feature image)
 *   full      (full viewport breakout)
 *   duo       (two side-by-side, 50/50, captions per image)
 */.bc-cm .bc-image {
  padding: 56px 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}.bc-cm .bc-image.bc-visible {
  opacity: 1;
  transform: none;
}.bc-cm .bc-image-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}.bc-cm .bc-image--full .bc-image-inner {
  max-width: none;
  padding: 0;
}.bc-cm .bc-image__link {
  display: block;
}.bc-cm .bc-image__img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}.bc-cm .bc-image--full .bc-image__img {
  border-radius: 0;
  box-shadow: none;
}.bc-cm .bc-image__caption {
  font-family: var(--bc-font-heading);
  font-style: italic;
  font-size: 14px;
  line-height: 1.55;
  color: #777;
  text-align: center;
  margin: 14px auto 0;
  max-width: 640px;
}/* Duo variant — two images side by side */.bc-cm .bc-image--duo .bc-image-inner--duo {
  max-width: 1100px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 0 var(--bc-gutter);
}.bc-cm .bc-image__pair-item {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}.bc-cm .bc-image__caption--small {
  font-size: 13px;
  text-align: left;
  margin: 0;
  max-width: none;
}@media (max-width: 768px) {
  .bc-cm .bc-image {
    padding: 40px 0;
  }
  .bc-cm .bc-image-inner {
    padding: 0 20px;
  }
  .bc-cm .bc-image--duo .bc-image-inner--duo {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 20px;
  }
  .bc-cm .bc-image__caption {
    font-size: 13px;
  }
}/* bc-article — blog-magazine layout met sticky reading-guide (v1.4.5) */.bc-cm .bc-article {
  padding: 64px 0;
  background: #fff;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}.bc-cm .bc-article.bc-visible {
  opacity: 1;
  transform: none;
}.bc-cm .bc-article-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  align-items: start;
}/* ── Sidebar TOC — sticky reading guide ───────────────────────────────── */.bc-cm .bc-article__sidebar {
  position: sticky;
  top: 32px;
  align-self: start;
  border-left: 2px solid var(--bc-primary);
  padding-left: 20px;
}.bc-cm .bc-article__sidebar-label {
  font-family: var(--bc-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bc-primary);
  margin: 0 0 14px;
}.bc-cm .bc-article__toc {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: none;
}.bc-cm .bc-article__toc-item {
  list-style: none;
  margin: 0;
}.bc-cm .bc-article__toc-link {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  color: #555;
  text-decoration: none;
  font-family: var(--bc-font-body);
  font-size: 14px;
  line-height: 1.4;
  transition: color 0.2s ease;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}.bc-cm .bc-article__toc-item:last-child .bc-article__toc-link {
  border-bottom: 0;
}.bc-cm .bc-article__toc-link:hover,
.bc-cm .bc-article__toc-link:focus-visible {
  color: var(--bc-primary);
}.bc-cm .bc-article__toc-link:hover .bc-article__toc-num {
  color: var(--bc-primary);
}.bc-cm .bc-article__toc-num {
  font-family: var(--bc-font-heading);
  font-style: italic;
  font-weight: 700;
  color: #bbb;
  font-size: 16px;
  transition: color 0.2s ease;
}.bc-cm .bc-article__toc-text {
  font-weight: 600;
}/* ── Main column — prose body ─────────────────────────────────────────── */.bc-cm .bc-article__main {
  max-width: 720px;
}.bc-cm .bc-article__lead {
  font-family: var(--bc-font-heading);
  font-style: italic;
  font-size: 21px;
  line-height: 1.55;
  color: #1a1a1a;
  margin: 0 0 40px;
  padding-left: 20px;
  border-left: 3px solid var(--bc-primary);
}.bc-cm .bc-article__section {
  margin-bottom: 48px;
  scroll-margin-top: 24px;
}.bc-cm .bc-article__section:last-child {
  margin-bottom: 0;
}.bc-cm .bc-article__heading {
  font-family: var(--bc-font-heading);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.3;
  color: #1a1a1a;
  margin: 0 0 16px;
}.bc-cm .bc-article__main p {
  font-family: var(--bc-font-body);
  font-size: 17px;
  line-height: 1.75;
  color: #333;
  margin: 0 0 18px;
}.bc-cm .bc-article__main p:last-child {
  margin-bottom: 0;
}.bc-cm .bc-article__main a:not(.bc-btn) {
  color: var(--bc-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 600;
}.bc-cm .bc-article__main a:not(.bc-btn):hover {
  color: #d4621e;
}@media (max-width: 900px) {
  .bc-cm .bc-article {
    padding: 56px 0;
  }
  .bc-cm .bc-article-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .bc-cm .bc-article__sidebar {
    position: static;
    border-left: 0;
    border-top: 2px solid var(--bc-primary);
    padding-left: 0;
    padding-top: 16px;
  }
  .bc-cm .bc-article__main {
    max-width: none;
  }
  .bc-cm .bc-article__heading {
    font-size: 22px;
  }
  .bc-cm .bc-article__lead {
    font-size: 18px;
    padding-left: 16px;
  }
}/* === v0.5.2 — ritmebreker / key-takeaway === *//* bc-callout — ritmebreker / key-takeaway box (v0.5.2)
 *
 * Een editorial "pull-out": breekt het ritme tussen twee text-image rijen met
 * een uitgelichte takeaway. Bewust GEEN generieke alert-box.
 *
 * 3 variants:
 *   accent  (default-emit) — editorial PULL-QUOTE: clean off-white surface met een
 *                            groot decoratief oranje aanhalingsteken linksboven; de
 *                            takeaway in serif (Merriweather), groter + near-black.
 *                            Bewust GEEN tick/alert-look.
 *   quiet                  — zelfde vorm, zachter: cream-surface + dunne border,
 *                            geen oranje accent.
 *   stat                   — 1 groot getal (oranje) + ondersteunende regel eronder.
 *
 * Reveal: [data-bc-reveal] start op opacity 0 + translateY, .bc-visible = eind-state
 *         (BCReveal IIFE, Phase 9). Reduced-motion failsafe onderaan.
 *
 * Tokens: var(--bc-*) voor kleur + font; spacing/radii/sizing literals (Plan 10 policy).
 * Anti-slop: geen gradient, geen glow, geen pure-zwarte schaduw (alpha-tint i.p.v.).
 *//* ── Outer aside: layout-container, geneste reveal-state ── */.bc-cm .bc-callout {
  max-width: 760px;
  margin: 56px auto;
  padding: 0 var(--bc-gutter);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}.bc-cm .bc-callout.bc-visible {
  opacity: 1;
  transform: translateY(0);
}/* ── Inner wrap: de zichtbare kaart ── */.bc-cm .bc-callout-wrap {
  position: relative;
  border-radius: 8px;
  padding: 36px 40px;
  background: var(--bc-white);
  /* subtiele tint-shadow, geen pure zwart */
  box-shadow:
    0 1px 2px rgba(36, 36, 34, 0.04),
    0 14px 40px rgba(36, 36, 34, 0.07);
}/* ── Takeaway-regels: near-black, ruime leading, iets groter dan body ── */.bc-cm .bc-callout__line {
  font-family: var(--bc-font-body);
  font-size: 1.1875rem; /* 19px — net boven body, leest als pull-out */
  font-weight: 500;
  line-height: 1.5;
  color: var(--bc-text-light);
  margin: 0;
}.bc-cm .bc-callout__line + .bc-callout__line {
  margin-top: 14px;
}.bc-cm .bc-callout__line strong {
  font-weight: 800;
}.bc-cm .bc-callout__line a {
  color: var(--bc-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 200ms ease;
}.bc-cm .bc-callout__line a:hover {
  color: var(--bc-primary-hover); /* orange -> teal swap (BC hover-semantiek) */
}/* ════════════════════════════════════════════════════════════════════════
   Variant: accent (default-emitted) — editorial PULL-QUOTE
   Clean off-white surface, groot decoratief oranje aanhalingsteken linksboven,
   takeaway in serif. Geen tick, geen alert-look.
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-callout--accent .bc-callout-wrap {
  background: #fffdfb; /* off-white, een tikje warmer dan zuiver wit */
  padding: 52px 44px 40px;
  /* iets warmere tint-shadow zodat de kaart als pull-quote "zweeft" */
  box-shadow:
    0 1px 2px rgba(36, 36, 34, 0.04),
    0 16px 44px rgba(36, 36, 34, 0.08);
}/* groot decoratief openings-aanhalingsteken in BC-oranje, linksboven, mag licht
   over de rand bleeden — leest als een gepulde quote, niet als een alert. */.bc-cm .bc-callout--accent .bc-callout-wrap::before {
  content: "\201C"; /* " left double quotation mark */
  position: absolute;
  top: -0.18em;
  left: 18px;
  font-family: 'Merriweather', Georgia, serif;
  font-size: 6rem; /* groot, decoratief */
  font-weight: 900;
  line-height: 1;
  color: var(--bc-primary);
  pointer-events: none;
}/* matchend decoratief sluitings-aanhalingsteken in BC-oranje, rechtsonder, mag
   licht over de rand bleeden — samen met de opening leest de takeaway als een
   echte gepulde quote (open + close), niet als een alert. */.bc-cm .bc-callout--accent .bc-callout-wrap::after {
  content: "\201D"; /* " right double quotation mark */
  position: absolute;
  bottom: -0.42em;
  right: 22px;
  font-family: 'Merriweather', Georgia, serif;
  font-size: 6rem; /* zelfde grootte als de opening */
  font-weight: 900;
  line-height: 1;
  color: var(--bc-primary);
  pointer-events: none;
}/* takeaway als pulled quote: serif, groter, near-black, ruime leading */.bc-cm .bc-callout--accent .bc-callout__line {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 1.375rem; /* 22px */
  font-weight: 700;
  line-height: 1.6;
  color: var(--bc-text-light);
}/* ════════════════════════════════════════════════════════════════════════
   Variant: quiet — zachte cream-surface + dunne border, geen oranje bar
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-callout--quiet .bc-callout-wrap {
  background: var(--bc-cream);
  border: 1px solid rgba(36, 36, 34, 0.08);
  box-shadow: none;
}.bc-cm .bc-callout--quiet .bc-callout__line {
  font-weight: 400;
  color: var(--bc-text-medium);
}/* ════════════════════════════════════════════════════════════════════════
   Variant: stat — 1 groot getal + ondersteunende regel
   Eerste .bc-callout__line = de grote figuur; volgende regels = context.
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-callout--stat .bc-callout-wrap {
  background: var(--bc-cream);
  text-align: center;
  padding: 44px 40px;
}.bc-cm .bc-callout--stat .bc-callout__line:first-child {
  font-family: var(--bc-font-heading);
  font-size: 4rem; /* 64px — de grote figuur */
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bc-primary);
  margin-bottom: 8px;
}.bc-cm .bc-callout--stat .bc-callout__line:not(:first-child) {
  font-size: 1.0625rem; /* 17px supporting line */
  font-weight: 500;
  color: var(--bc-text-medium);
  margin-top: 0;
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
}/* ── Emphasis: high — grotere takeaway voor accent/quiet ── */.bc-cm .bc-callout--high .bc-callout__line {
  font-size: 1.4375rem; /* 23px */
  font-weight: 600;
  line-height: 1.4;
}.bc-cm .bc-callout--stat.bc-callout--high .bc-callout__line:first-child {
  font-size: 4.75rem; /* 76px */
}.bc-cm .bc-callout--stat.bc-callout--high .bc-callout__line:not(:first-child) {
  font-size: 1.0625rem;
  font-weight: 500;
}/* ── Responsive ── */@media (max-width: 768px) {
  .bc-cm .bc-callout {
    margin: 40px auto;
    padding: 0 20px;
  }
  .bc-cm .bc-callout-wrap {
    padding: 28px 24px;
  }
  .bc-cm .bc-callout--accent .bc-callout-wrap {
    padding: 44px 24px 28px;
  }
  .bc-cm .bc-callout--accent .bc-callout-wrap::before {
    left: 12px;
    font-size: 4.5rem;
  }
  .bc-cm .bc-callout--accent .bc-callout-wrap::after {
    right: 14px;
    font-size: 4.5rem;
  }
  .bc-cm .bc-callout--accent .bc-callout__line {
    font-size: 1.1875rem; /* 19px op mobiel */
  }
  .bc-cm .bc-callout__line {
    font-size: 1.0625rem;
  }
  .bc-cm .bc-callout--high .bc-callout__line {
    font-size: 1.25rem;
  }
  .bc-cm .bc-callout--stat .bc-callout__line:first-child {
    font-size: 3rem;
  }
  .bc-cm .bc-callout--stat.bc-callout--high .bc-callout__line:first-child {
    font-size: 3.25rem;
  }
}/* ── Reduced-motion failsafe ── */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-callout {
    transition: none;
    opacity: 1;
    transform: none;
  }
}/* === v1.6/v1.7 — promotional / cross-brand blocks === *//* bc-cross-link-cta — cross-brand doorverwijzing (v1.6/v1.7) — clean rewrite 2026-06-02
 *
 * Visual DNA: GEEN card. Zit direct in cream sectie zonder wrapper-chrome.
 * Pattern reuse: reviews "all-link" (text + arrow, gap 6→10 op hover, arrow-nudge),
 * article body-link underline (1px @ 3px offset), reviews author-role muted eyebrow.
 *
 * Hierarchy (Wessel guardrail):
 *   - Parent CTA (eigen brand) blijft baas — full .bc-btn--primary, visueel dominant
 *   - Cross-link (zuster brand) = subtle text-link met arrow, GEEN tweede knop
 *   - Korte hairline-divider scheidt parent van cross-row
 *   - Geen card, geen shadow, geen accent-bar, geen pill, geen reveal-animatie
 *
 * Hover: orange ↔ teal swap per feedback_bc_hover_semantic.md
 * Tokens: exclusief var(--bc-*); button reuses .bc-btn vocabulaire
 *//* ── Outer aside — geen visual chrome, alleen layout-container ── */.bc-cm .bc-cross-link-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bc-space-4);
  margin: var(--bc-space-7) auto var(--bc-space-6);
  padding: 0 var(--bc-space-4);
  max-width: 640px; /* intentional literal — matches BC content-column max */
  text-align: center;
}/* ── Parent CTA (dominant, eigen brand) ──
 * Visuals fully inherited from .bc-btn .bc-btn--primary .bc-cta-primary.
 * Geen extra styling — parent IS de prominent knop.
 *//* ── Divider tussen parent CTA en cross-row ──
 * Korte centrale hairline (geen full-width) — markeert overgang naar subordinate area.
 */.bc-cm .bc-cross-link-cta__divider {
  border: 0;
  height: 1px;
  width: 80px; /* intentional literal — short central divider, niet full-width */
  background: rgba(36, 36, 34, 0.12); /* intentional rgba — subtle BC divider tone */
  margin: var(--bc-space-2) auto 0;
}/* ── Cross-row: badge + link inline (horizontal) ── */.bc-cm .bc-cross-link-cta__row {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--bc-space-2);
  flex-wrap: wrap;
}/* ── Badge / eyebrow: "Van onze zusjes:" ──
 * Mulish uppercase tracked, muted — reviews author-role pattern reuse maar dan
 * met BC tracked-uppercase signature (12px / 0.1em letter-spacing).
 */.bc-cm .bc-cross-link-cta__badge {
  font-family: 'Mulish', sans-serif;
  font-size: 0.75rem; /* intentional literal — 12px small-caps eyebrow */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em; /* intentional literal — slightly tighter dan 0.12em card-eyebrow */
  color: var(--bc-text-muted, #777);
}/* ── Cross-link: text-link met arrow (reviews all-link pattern reuse) ──
 * Inline-flex met gap 6px (matches .bc-reviews__all-link), gap groeit 6→10 op hover.
 * BC primary kleur + body-prose underline (1px @ 3px offset, article.css pattern).
 */.bc-cm .bc-cross-link-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* intentional literal — matches .bc-reviews__all-link gap */
  font-family: 'Mulish', sans-serif;
  font-size: 0.9375rem; /* intentional literal — 15px matches reviews all-link */
  font-weight: 700;
  color: var(--bc-primary, #ee7437);
  text-decoration: none;
  transition: gap 200ms ease, color 200ms ease;
}/* Label krijgt de underline (zoals article body-prose links) */.bc-cm .bc-cross-link-cta__label {
  text-decoration: underline;
  text-decoration-thickness: 1px; /* intentional literal — article body-link weight */
  text-underline-offset: 3px; /* intentional literal — article body-link offset */
}/* Arrow nudge — micro-shift voor hover-feedback */.bc-cm .bc-cross-link-cta__arrow {
  display: inline-block;
  font-weight: 400;
  transition: transform 200ms ease;
}/* Hover/focus: orange → teal swap + gap expansion (reviews all-link) + arrow-nudge */.bc-cm .bc-cross-link-cta__link:hover,
.bc-cm .bc-cross-link-cta__link:focus-visible {
  color: var(--bc-primary-hover, #0f8069); /* opposite-color swap per BC hover semantic */
  gap: 10px; /* intentional literal — matches .bc-reviews__all-link:hover gap */
}.bc-cm .bc-cross-link-cta__link:hover .bc-cross-link-cta__arrow,
.bc-cm .bc-cross-link-cta__link:focus-visible .bc-cross-link-cta__arrow {
  transform: translateX(2px); /* intentional literal — micro-nudge, gap doet al meeste werk */
}/* ── Note caption ── kleine muted regel onder de row */.bc-cm .bc-cross-link-cta__note {
  font-family: 'Mulish', sans-serif;
  font-size: 0.8125rem; /* intentional literal — 13px caption */
  line-height: 1.55;
  color: var(--bc-text-muted, #777);
  margin: 0;
  max-width: 480px; /* intentional literal — note readability cap */
}/* ── Brand-accent modifier: alleen subtle eyebrow tint ──
 * BCK krijgt teal eyebrow voor visuele brand-hint; bc + casinohuren behouden
 * muted default (eyebrow is informatief, niet decoratief).
 */.bc-cm .bc-cross-link-cta--brand-bck .bc-cross-link-cta__badge {
  color: var(--bc-teal, #0f8069);
}/* NOTE: GEEN scroll-reveal pattern. Cross-link is footer-subtle per Wessel
 * guardrail; render.mjs zet geen data-bc-reveal attribuut.
 *//* ── Responsive: 768px breakpoint matches BC hero/article mobile flip ── */@media (max-width: 768px) { /* intentional literal — BC mobile breakpoint */
  .bc-cm .bc-cross-link-cta {
    margin: var(--bc-space-6) auto;
    padding: 0 var(--bc-space-3);
    gap: var(--bc-space-3);
  }

  .bc-cm .bc-cross-link-cta__row {
    flex-direction: column;
    gap: 4px; /* intentional literal — tight stack op mobile */
  }

  .bc-cm .bc-cross-link-cta__badge {
    font-size: 0.6875rem; /* intentional literal — 11px mobile eyebrow */
  }

  .bc-cm .bc-cross-link-cta__link {
    font-size: 0.875rem; /* intentional literal — 14px mobile link */
  }

  .bc-cm .bc-cross-link-cta__note {
    font-size: 0.75rem; /* intentional literal — 12px mobile note */
  }
}/* Inline body links (bare <a> from the content pipeline) — brand-orange,
   consistent with text-image/article/prose (Wessel FB 2026-06-22). */.bc-cm .bc-cross-link-cta__note a:not(.bc-btn) {
  color: var(--bc-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}.bc-cm .bc-cross-link-cta__note a:not(.bc-btn):hover {
  color: var(--bc-primary-hover);
}/* bc-offer-bar — SEA promotional strip boven hero (v1.6/v1.7) — 2026-06-02
 *
 * Visual DNA: full-width oranje strip met message-match copy uit ad_angle/usp.
 * Doel: directe visuele bevestiging dat de pagina matcht met de ad — bezoeker
 * mag NOOIT twijfelen of ze op de juiste page zijn geland.
 *
 * Hierarchy:
 *   - Strip zit BOVEN hero, full-width, compact (40–60px desktop / 32–44px mobile)
 *   - bg = bc-primary (oranje) voor default, bc-dark voor countdown variant
 *   - text = bc-white, CTA = white pill met bc-primary text (inverted)
 *   - Countdown timer in eigen pill, monospace, accent-tint
 *
 * GEEN reveal-pattern (ad-driven traffic moet 'm IMMEDIATE zien — message-match).
 * Hover: subtle darken op CTA via opposite-brand swap (orange↔teal) per BC semantic.
 * Tokens: exclusief var(--bc-*); button reuses .bc-btn vocabulaire.
 *//* ── Outer section — full-width strip ── */.bc-cm .bc-offer-bar {
  width: 100%;
  background: var(--bc-primary, #ee7437);
  color: var(--bc-white, #ffffff);
  border-bottom: 1px solid rgba(36, 36, 34, 0.08); /* intentional rgba — hairline scheiding van hero */
}/* Countdown variant: zwarte strip met oranje accents (urgency framing) */.bc-cm .bc-offer-bar--countdown {
  background: var(--bc-dark, #242422);
}/* ── Inner container — max-width + flex tussen __text en __cta ── */.bc-cm .bc-offer-bar__inner {
  max-width: 1260px; /* intentional literal — matches BC hero/article container cap */
  margin: 0 auto;
  padding: var(--bc-space-3) var(--bc-space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bc-space-5);
  min-height: 48px; /* intentional literal — compact strip target ~40-60px desktop */
}/* ── Text column (eyebrow + message + optional countdown) ── */.bc-cm .bc-offer-bar__text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bc-space-2) var(--bc-space-4);
  flex: 1 1 auto;
  min-width: 0;
}/* Primary message — ad_angle + usp punch */.bc-cm .bc-offer-bar__message {
  font-family: 'Mulish', sans-serif;
  font-size: 1rem; /* intentional literal — 16px primary strip copy */
  font-weight: 800;
  line-height: 1.3;
  color: var(--bc-white, #ffffff);
}/* Subtitle — secundaire usp / social-proof regel */.bc-cm .bc-offer-bar__subtitle {
  font-family: 'Mulish', sans-serif;
  font-size: 0.875rem; /* intentional literal — 14px secondary */
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85); /* intentional rgba — readable but subordinate */
}/* Countdown — inline pill, monospace voor stabiele cijfer-width */.bc-cm .bc-offer-bar__countdown {
  font-family: 'Mulish', sans-serif;
  font-size: 0.8125rem; /* intentional literal — 13px compact pill */
  font-weight: 700;
  letter-spacing: 0.05em; /* intentional literal — pseudo-mono tracking */
  text-transform: uppercase;
  color: var(--bc-primary-light, #f4a039);
  background: rgba(255, 255, 255, 0.1); /* intentional rgba — subtle inset op oranje strip */
  padding: 2px var(--bc-space-2); /* intentional literal — tight pill rhythm */
  border-radius: var(--bc-radius-sm, 4px);
  white-space: nowrap;
}/* Op dark countdown-variant: pill gets primary tint i.p.v. transparent white */.bc-cm .bc-offer-bar--countdown .bc-offer-bar__countdown {
  background: rgba(238, 116, 55, 0.15); /* intentional rgba — primary-tinted op dark */
  color: var(--bc-primary-light, #f4a039);
}/* ── CTA button — inverted: white bg + primary text ── */.bc-cm .bc-offer-bar__cta.bc-btn--primary {
  background: var(--bc-white, #ffffff);
  color: var(--bc-primary, #ee7437);
  border-color: var(--bc-white, #ffffff);
  flex-shrink: 0;
  white-space: nowrap;
}/* Hover: orange↔teal swap — inverted CTA krijgt teal text op white (opposite swap) */.bc-cm .bc-offer-bar__cta.bc-btn--primary:hover,
.bc-cm .bc-offer-bar__cta.bc-btn--primary:focus-visible {
  background: var(--bc-white, #ffffff);
  color: var(--bc-primary-hover, #0f8069);
  border-color: var(--bc-white, #ffffff);
}/* Op countdown-variant CTA hover blijft consistent (white blijft white, color flipt) */.bc-cm .bc-offer-bar--countdown .bc-offer-bar__cta.bc-btn--primary {
  background: var(--bc-primary, #ee7437);
  color: var(--bc-white, #ffffff);
  border-color: var(--bc-primary, #ee7437);
}.bc-cm .bc-offer-bar--countdown .bc-offer-bar__cta.bc-btn--primary:hover,
.bc-cm .bc-offer-bar--countdown .bc-offer-bar__cta.bc-btn--primary:focus-visible {
  background: var(--bc-primary-hover, #0f8069);
  color: var(--bc-white, #ffffff);
  border-color: var(--bc-primary-hover, #0f8069);
}/* NOTE: GEEN reveal-pattern. Strip is ALWAYS visible vanaf eerste paint —
 * message-match met ad mag niet wachten op scroll of JS-hook. Render.mjs
 * zet bewust geen data-bc-reveal attribuut op .bc-offer-bar.
 *//* ── Responsive: 768px breakpoint matches BC mobile flip ── */@media (max-width: 768px) { /* intentional literal — BC mobile breakpoint */
  .bc-cm .bc-offer-bar__inner {
    padding: var(--bc-space-2) var(--bc-space-4);
    gap: var(--bc-space-3);
    min-height: 36px; /* intentional literal — mobile target ~32-44px */
    flex-wrap: wrap;
  }

  .bc-cm .bc-offer-bar__text {
    gap: 4px var(--bc-space-3); /* intentional literal — tighter mobile rhythm */
    flex: 1 1 100%;
  }

  .bc-cm .bc-offer-bar__message {
    font-size: 0.875rem; /* intentional literal — 14px mobile primary */
    line-height: 1.25;
  }

  .bc-cm .bc-offer-bar__subtitle {
    font-size: 0.75rem; /* intentional literal — 12px mobile secondary */
  }

  .bc-cm .bc-offer-bar__countdown {
    font-size: 0.6875rem; /* intentional literal — 11px mobile pill */
    padding: 1px 6px; /* intentional literal — tighter mobile pill */
  }

  .bc-cm .bc-offer-bar__cta.bc-btn--primary {
    flex: 1 1 100%;
    text-align: center;
    font-size: 0.875rem; /* intentional literal — 14px mobile CTA */
    padding: var(--bc-space-2) var(--bc-space-4);
  }
}/* === v1.7 SEA — conversion blocks === *//* bc-sticky-cta — mobile-first sticky conversion bar voor SEA landingpages (v1.6/v1.7)
 *
 * Visual DNA: bc-primary background (oranje), white text, full-width bottom-bar op mobile.
 * Desktop: floating pill rechts-onder (max-width capped, niet full-width).
 * Hover/active: orange ↔ teal swap per feedback_bc_hover_semantic.md.
 *
 * K-5 mobile-CTA visibility rule (LOCKED 2026-06-02):
 *   Sticky-cta is ALTIJD direct visible op mobile — geen scroll-trigger, geen reveal opacity:0.
 *   data-show-after-viewport blijft optioneel JS-hook (bc-design-system handelt af) maar
 *   default CSS state = visible. Maximaliseert conversion op SEA traffic.
 *
 * Touch-target: min-height 56px op mobile (Apple HIG 44pt + BC marge), bc-btn--primary
 *               binnen krijgt automatisch correct padding via bestaande button CSS.
 *
 * Variants:
 *   default — telefoon-link links + primary CTA rechts (split 50/50 mobile)
 *   single  — alleen primary CTA, full-width binnen inner
 *
 * Tokens: exclusief var(--bc-*); button reuses .bc-btn vocabulaire.
 *//* ── Root: fixed bottom bar (mobile-first) ──
 * z-index 50 zit boven content maar onder modals/dialogs (typisch 100+).
 * Background bc-primary maakt 'm onmiddellijk leesbaar tegen elke pagina-bg.
 * Box-shadow upward voor depth-separatie van de page content.
 */.bc-cm .bc-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50; /* intentional literal — boven content, onder modals */
  background: var(--bc-primary, #ee7437);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12); /* intentional rgba — upward depth shadow */
  padding: var(--bc-space-3) var(--bc-space-4);
  /* GEEN opacity:0 — direct visible per K-5 mobile-CTA always-visible rule */
}/* ── Inner: flex container, split tussen tel + cta ── */.bc-cm .bc-sticky-cta__inner {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--bc-space-3);
  max-width: 640px; /* intentional literal — matches BC content-column cap */
  margin: 0 auto;
  min-height: 56px; /* intentional literal — Apple HIG touch-target + BC marge */
}/* ── Telefoon-link: links, transparent op primary bg met white border ──
 * Flex tussen icon + text, voldoende touch-area.
 */.bc-cm .bc-sticky-cta__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bc-space-2);
  flex: 1 1 0;
  padding: var(--bc-space-2) var(--bc-space-3);
  border: 2px solid var(--bc-white, #ffffff); /* intentional literal — 2px outline op primary bg */
  border-radius: var(--bc-radius-md, 8px);
  background: transparent;
  color: var(--bc-white, #ffffff);
  font-family: 'Mulish', sans-serif;
  font-weight: 700;
  font-size: 0.9375rem; /* intentional literal — 15px matches body-link size */
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}.bc-cm .bc-sticky-cta__tel-icon {
  font-size: 1.125rem; /* intentional literal — 18px phone glyph */
  line-height: 1;
}.bc-cm .bc-sticky-cta__tel-text {
  white-space: nowrap;
}/* Hover/focus tel: invert naar white bg + primary text, geen kleur-swap (tel is secundair) */.bc-cm .bc-sticky-cta__tel:hover,
.bc-cm .bc-sticky-cta__tel:focus-visible {
  background: var(--bc-white, #ffffff);
  color: var(--bc-primary, #ee7437);
  transform: translateY(-2px); /* intentional literal — micro-lift voor feedback */
}/* ── Primary CTA: rechts, full bc-btn--primary ──
 * Visuals fully inherited from .bc-btn .bc-btn--primary; alleen flex-grow override.
 * Hover orange↔teal swap is al gedekt door bc-btn--primary CSS — niet dupliceren.
 */.bc-cm .bc-sticky-cta__primary {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
}/* ── Single variant: alleen CTA, full-width binnen inner ── */.bc-cm .bc-sticky-cta--single .bc-sticky-cta__inner {
  justify-content: stretch;
}.bc-cm .bc-sticky-cta--single .bc-sticky-cta__primary {
  flex: 1 1 100%;
  width: 100%;
}/* ── Desktop (boven 768px): floating pill rechts-onder, niet full-width ──
 * SEA conversion blijft top-of-mind ook op desktop, maar minder agressief.
 * Optional sticky_cta:false in frontmatter hide't 'm via render.mjs (geen output).
 */@media (min-width: 769px) { /* intentional literal — BC mobile breakpoint + 1 */
  .bc-cm .bc-sticky-cta {
    left: auto;
    right: var(--bc-space-6);
    bottom: var(--bc-space-6);
    max-width: 420px; /* intentional literal — floating pill cap desktop */
    border-radius: var(--bc-radius-lg, 12px);
    padding: var(--bc-space-3);
    box-shadow: var(--bc-shadow-lift, 0 8px 40px rgba(0,0,0,0.12));
  }

  .bc-cm .bc-sticky-cta__inner {
    min-height: 48px; /* intentional literal — kleinere touch op desktop, mouse-driven */
  }
}/* ════════════════════════════════════════════════════════════════════════
   Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): offerte-first + groen
   ════════════════════════════════════════════════════════════════════════
   Met een usp in de block-data rendert render.mjs bc-sticky-cta--usp: GEEN
   tel-element, wel een span.bc-sticky-cta__usp met groene check-glyph. De
   container wordt een premium witte kaart en de knop is groen conform het
   cta-blok (hover swapt terug naar oranje, site-brede oranje<->groen
   semantiek). Zonder usp: bestaand gedrag hierboven (backward compat). */.bc-cm .bc-sticky-cta--usp{
  background:#fff;box-shadow:0 -8px 30px rgba(26,26,26,.14);
  border-top:1px solid rgba(36,36,34,.06);padding:14px 18px;
}.bc-cm .bc-sticky-cta--usp .bc-sticky-cta__inner{flex-direction:column;align-items:stretch;gap:10px;min-height:0}.bc-cm .bc-sticky-cta__usp{
  display:block;padding-left:24px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%230f8069'/%3E%3Cpath d='M3.4 6.2l1.8 1.8 3.6-4' fill='none' stroke='%23fff9f0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center/16px 16px;
  font-family:'Mulish',sans-serif;font-size:13px;font-weight:700;line-height:1.3;
  color:var(--bc-text-medium);letter-spacing:.01em;
}.bc-cm .bc-sticky-cta--usp .bc-sticky-cta__primary{
  width:100%;min-height:0;font-weight:800;
  background:var(--bc-green, #0f8069);
  box-shadow:0 4px 18px rgba(15,128,105,.30);
}.bc-cm .bc-sticky-cta--usp .bc-sticky-cta__primary:hover{
  background:var(--bc-primary);
  box-shadow:0 6px 22px rgba(238,116,55,.35);
}@media (min-width:769px){
  .bc-cm .bc-sticky-cta--usp{
    border-radius:18px;padding:18px;max-width:332px;
    border:1px solid rgba(36,36,34,.06);
    box-shadow:0 10px 24px rgba(26,26,26,.10),0 22px 54px rgba(26,26,26,.16);
  }
}/* Bram-fb 2026-07-03: op mobiel niet full-width vast onderin maar zwevend,
   rechts uitgelijnd, als compacte kaart (zelfde taal als desktop). */@media (max-width:768px){
  .bc-cm .bc-sticky-cta--usp{
    left:auto;right:12px;bottom:12px;
    max-width:280px;border-radius:16px;padding:12px 14px;
    border:1px solid rgba(36,36,34,.06);
    box-shadow:0 8px 20px rgba(26,26,26,.12),0 18px 44px rgba(26,26,26,.18);
  }
  .bc-cm .bc-sticky-cta--usp .bc-sticky-cta__usp{font-size:12px}
  .bc-cm .bc-sticky-cta--usp .bc-sticky-cta__primary{font-size:14px;padding:11px 20px}
}/* === palette wave 1 — steps, comparison, video, tabs === *//* bc-comparison — keuzehulp / decision-helper (v0.5.3)
 *
 * Weegt twee (of meer) opties tegen elkaar af. Bewust GEEN generieke pricing-table:
 * de aanrader-kolom leest als een keuze, niet als een upsell.
 *
 * 2 variants:
 *   two-col — gebalanceerde optie-kaarten naast elkaar; accent-kolom = aanrader.
 *   table   — kaart-paar layout (kader-parity): beide kolommen een eigen kader;
 *             accent-kolom tint kop + check-glyphs oranje.
 *
 * Fase 2 FB-ronde A (Bram-gelockt 2026-07-03), parity+glyph + premium netto:
 * (1) glyph-fix: de niet-accent kolom toont een neutrale dash i.p.v. een groene
 *     check (geen semantisch rare checks bij nadelen, geen hard rood kruis);
 * (2) kader-parity: de table-variant is een kaart-paar, geen gedeelde tabel-rand;
 * (3) premium: de aanrader komt omhoog (diepe shadow + subtiele oranje rand),
 *     de andere kolom wordt quiet (paginawit, gedempte tekst);
 * (4) badge patch-achtig: rich-black pill met oranje tekst, lichte rotatie.
 *
 * Reveal: [data-bc-reveal] start op opacity 0 + translateY, .bc-visible = eind-state
 *         (BCReveal IIFE, Phase 9). Reduced-motion failsafe onderaan.
 *
 * Tokens: var(--bc-*) voor kleur + font; spacing/radii/sizing literals (Plan 10 policy).
 * Anti-slop: geen gradient-vlakken, geen glow-spam, geen pure-zwarte schaduw
 *            (alpha-tint i.p.v.), check = teal (BC-signature), hover = orange↔teal swap.
 *//* ── Outer section: layout-container + reveal-state ── */.bc-cm .bc-comparison {
  max-width: 1080px;
  margin: 64px auto;
  padding: 0 var(--bc-gutter);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}.bc-cm .bc-comparison.bc-visible {
  opacity: 1;
  transform: translateY(0);
}.bc-cm .bc-comparison-inner {
  margin: 0 auto;
}/* ── Header ── */.bc-cm .bc-comparison__heading {
  font-family: var(--bc-font-heading);
  font-size: var(--bc-text-h2);
  font-weight: 800;
  line-height: var(--bc-leading-tight);
  color: var(--bc-text-light);
  text-align: center;
  margin: 0 0 12px;
}.bc-cm .bc-comparison__intro {
  font-family: var(--bc-font-body);
  font-size: var(--bc-text-lg);
  line-height: var(--bc-leading-relaxed);
  color: var(--bc-text-medium);
  text-align: center;
  max-width: 60ch;
  margin: 0 auto 40px;
}/* drop the intro→grid gap onto the header block when there is no intro */.bc-cm .bc-comparison__heading:last-child {
  margin-bottom: 40px;
}/* ════════════════════════════════════════════════════════════════════════
   Shared card internals (title / subtitle / rows / badge / cta)
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-comparison__title {
  font-family: var(--bc-font-heading);
  font-size: 1.375rem; /* 22px */
  font-weight: 800;
  line-height: 1.25;
  color: var(--bc-text-light);
  margin: 0;
}.bc-cm .bc-comparison__subtitle {
  font-family: var(--bc-font-body);
  font-size: 0.9375rem; /* 15px */
  font-weight: 500;
  line-height: 1.45;
  color: var(--bc-text-muted);
  margin: 6px 0 0;
}.bc-cm .bc-comparison__rows {
  list-style: none;
  margin: 20px 0 8px;
  padding: 0;
}.bc-cm .bc-comparison__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--bc-font-body);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.5;
  color: var(--bc-text-light);
  padding: 11px 0;
  border-bottom: 1px solid rgba(36, 36, 34, 0.07);
}.bc-cm .bc-comparison__row:last-child {
  border-bottom: none;
}.bc-cm .bc-comparison__row-text strong {
  font-weight: 800;
}.bc-cm .bc-comparison__row-text a {
  color: var(--bc-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 200ms ease;
}.bc-cm .bc-comparison__row-text a:hover {
  color: var(--bc-primary-hover); /* orange → teal swap */
}/* check glyph — teal BC-signature, accent column flips it orange */.bc-cm .bc-comparison__check {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--bc-primary-hover); /* teal */
}/* 'Aanrader' badge — pill, sits above the title.
   Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): patch-achtig, rich-black pill
   met oranje tekst en lichte rotatie (br3-taal). */.bc-cm .bc-comparison__badge {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--bc-font-body);
  font-size: 0.75rem; /* 12px */
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 9999px;
  margin-bottom: 14px;
  background:var(--bc-dark);color:var(--bc-primary);transform:rotate(-3deg);
  box-shadow:0 8px 18px rgba(26,26,26,.28);padding:6px 14px;letter-spacing:.06em;
}/* per-column CTA — full-width primary, sticks to the card bottom.
   Comfortable gap to the last row above so the button breathes. */.bc-cm .bc-comparison__cta {
  margin-top: 32px;
  width: 100%;
  justify-content: center;
}/* ════════════════════════════════════════════════════════════════════════
   Variant: two-col — balanced option-cards
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-comparison__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: stretch;
}.bc-cm .bc-comparison__cards[data-cols="3"] {
  grid-template-columns: repeat(3, 1fr);
}.bc-cm .bc-comparison__cards[data-cols="4"] {
  grid-template-columns: repeat(2, 1fr);
}/* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): kaart-basis is structureel;
   look (rand/radius/bg/shadow) komt uit de premium-sectie onderaan, per
   accent/niet-accent. De oude generieke card-hover en de oranje top-rail
   (accent::before) zijn bewust verwijderd. */.bc-cm .bc-comparison__card {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 32px 30px;
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 350ms cubic-bezier(0.16, 1, 0.3, 1);
}/* CTA hugs the bottom even when row counts differ between cards */.bc-cm .bc-comparison__card .bc-comparison__cta {
  margin-top: auto;
}.bc-cm .bc-comparison__card--accent .bc-comparison__check {
  color: var(--bc-primary); /* orange checks in the recommended card */
}/* ════════════════════════════════════════════════════════════════════════
   Variant: table — compact row-by-row columns
   ════════════════════════════════════════════════════════════════════════ *//* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03), kader-parity: geen gedeelde
   tabel-rand meer; de kolommen zijn losse kaarten met een gap. */.bc-cm .bc-comparison__table {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border:0;border-radius:0;background:transparent;overflow:visible;gap:24px;
}.bc-cm .bc-comparison__table[data-cols="3"] {
  grid-template-columns: repeat(3, 1fr);
}.bc-cm .bc-comparison__table[data-cols="4"] {
  grid-template-columns: repeat(4, 1fr);
}/* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): kolom = eigen kaart (parity);
   de oude border-right kolom-scheiders zijn weg. Accent-look komt uit de
   premium-sectie onderaan. */.bc-cm .bc-comparison__col {
  display: flex;
  flex-direction: column;
  border:1px solid rgba(36,36,34,.06);border-radius:16px;background:var(--bc-white);
  padding:30px 28px;box-shadow:none;
}.bc-cm .bc-comparison__col-head {
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 2px solid rgba(36, 36, 34, 0.10);
  min-height: 64px;
}/* accent column in the table: orange head-underline + orange checks (surface
   komt uit de premium-sectie onderaan; de oude cream-tint is vervangen). */.bc-cm .bc-comparison__col--accent .bc-comparison__col-head {
  border-bottom-color: var(--bc-primary);
}.bc-cm .bc-comparison__col--accent .bc-comparison__check {
  color: var(--bc-primary);
}.bc-cm .bc-comparison__col .bc-comparison__cta {
  margin-top: auto;
}/* ════════════════════════════════════════════════════════════════════════
   Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): parity+glyph + premium netto
   ════════════════════════════════════════════════════════════════════════ *//* glyph-fix: de niet-accent kolom ("nadelen"/zonder-optie) toont een neutrale
   dash i.p.v. een groene check; bewust subtiel, geen hard rood kruis. */.bc-cm .bc-comparison__card:not(.bc-comparison__card--accent) .bc-comparison__check,
.bc-cm .bc-comparison__col:not(.bc-comparison__col--accent) .bc-comparison__check{display:none}.bc-cm .bc-comparison__card:not(.bc-comparison__card--accent) .bc-comparison__row::before,
.bc-cm .bc-comparison__col:not(.bc-comparison__col--accent) .bc-comparison__row::before{
  content:"";flex:0 0 14px;width:14px;height:2px;border-radius:9999px;
  background:rgba(36,36,34,.30);margin-top:11px;
}/* premium: de niet-aanrader wordt quiet (warm paginawit, geen schaduw,
   gedempte tekst); geen hover-lift op de quiet kaart. */.bc-cm .bc-comparison__card:not(.bc-comparison__card--accent){
  background:var(--bc-white);border:1px solid rgba(36,36,34,.06);border-radius:16px;box-shadow:none;
}.bc-cm .bc-comparison__card:not(.bc-comparison__card--accent):hover{transform:none;box-shadow:none}.bc-cm .bc-comparison__card:not(.bc-comparison__card--accent) .bc-comparison__title,
.bc-cm .bc-comparison__col:not(.bc-comparison__col--accent) .bc-comparison__title{color:var(--bc-text-medium)}.bc-cm .bc-comparison__card:not(.bc-comparison__card--accent) .bc-comparison__row,
.bc-cm .bc-comparison__col:not(.bc-comparison__col--accent) .bc-comparison__row{color:var(--bc-text-medium)}/* premium: de aanrader komt omhoog met diepe shadow + subtiele oranje rand
   (geldt voor de two-col kaart EN de table-kolom). */.bc-cm .bc-comparison__card--accent,
.bc-cm .bc-comparison__col--accent{
  background:#fff;border:1px solid rgba(238,116,55,.5);border-radius:16px;
  transform:translateY(-6px);
  box-shadow:0 2px 4px rgba(36,36,34,.05),0 22px 54px rgba(26,26,26,.14);
}.bc-cm .bc-comparison__card--accent:hover{
  transform:translateY(-10px);
  /* cascade-netto uit de preview: de parity-knop leverde deze hover-shadow */
  box-shadow:0 2px 4px rgba(36,36,34,.05),0 22px 54px rgba(26,26,26,.12);
}.bc-cm .bc-comparison__card--accent::before{display:none}@media (max-width:768px){
  .bc-cm .bc-comparison__card--accent,
  .bc-cm .bc-comparison__col--accent{transform:none}
  .bc-cm .bc-comparison__card--accent:hover{transform:none}
}/* ── Responsive: stack to one column on narrow screens ── */@media (max-width: 768px) {
  .bc-cm .bc-comparison {
    margin: 44px auto;
    padding: 0 20px;
  }
  .bc-cm .bc-comparison__heading {
    font-size: 1.75rem;
  }
  .bc-cm .bc-comparison__cards,
  .bc-cm .bc-comparison__cards[data-cols="3"],
  .bc-cm .bc-comparison__cards[data-cols="4"],
  .bc-cm .bc-comparison__table,
  .bc-cm .bc-comparison__table[data-cols="3"],
  .bc-cm .bc-comparison__table[data-cols="4"] {
    grid-template-columns: 1fr;
  }
  /* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): gestapelde kolommen blijven
     losse kaarten (kader-parity + gap); geen border-scheiders meer. */
  .bc-cm .bc-comparison__card {
    padding: 26px 22px;
  }
}/* ── Reduced-motion failsafe ── */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-comparison {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .bc-cm .bc-comparison__card {
    transition: none;
  }
  .bc-cm .bc-comparison__card:hover {
    transform: none;
  }
}/* bc-steps — proces / hoe-werkt-het block (v0.5.3)
 *
 * Genummerde processtappen met een groot oranje cijferbadge, titel en body.
 * Bewust een "proces-spoor", geen generieke icon-grid: het oranje cijfer +
 * de verbindingslijn dragen de "stap-voor-stap"-leesrichting.
 *
 * 2 variants:
 *   vertical    (default-emit) — stappen onder elkaar, dunne verbindingslijn
 *                                tussen de cijferbadges (timeline-spoor).
 *   horizontal                 — 3-4 stappen naast elkaar; de verbindingslijn
 *                                loopt horizontaal tussen de badges. Valt op
 *                                mobiel terug op de verticale layout.
 *
 * Reveal: [data-bc-reveal] start op opacity 0 + translateY, .bc-visible =
 *         eind-state (BCReveal IIFE, Phase 9). Reduced-motion failsafe onderaan.
 *
 * Tokens: var(--bc-*) voor kleur + font; spacing/radii/sizing literals.
 * Anti-slop: geen gradient, geen glow, geen pure-zwarte schaduw (alpha-tint),
 *            badge is platte oranje cirkel (geen 3D / bevel).
 *//* ── Outer section: layout-container + reveal-state ── */.bc-cm .bc-steps {
  max-width: 860px;
  margin: 64px auto;
  padding: 0 var(--bc-gutter);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}.bc-cm .bc-steps.bc-visible {
  opacity: 1;
  transform: translateY(0);
}/* iteration-3 (Bram FB 2026-06-17): de verticale steps stonden links/off-center
   in een te brede container. We centreren de inner-kolom als blok: de intro is
   gecentreerde tekst, de stappen-lijst is een smallere kolom met margin:0 auto.
   De badge + tekst per stap blijven links-uitgelijnd binnen die gecentreerde
   kolom (leesrichting links-naar-rechts). De horizontal variant reset de
   inner-breedte hieronder weer naar vol. */.bc-cm .bc-steps-inner {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}/* ── Optionele intro-lead boven de stappen ── */.bc-cm .bc-steps__intro {
  font-family: var(--bc-font-body);
  font-size: 1.125rem; /* 18px */
  line-height: 1.6;
  color: var(--bc-text-medium);
  margin: 0 auto 40px;
  max-width: 48ch;
  text-align: center;
}/* ── De lijst: reset list-styling, dragen we zelf ── */.bc-cm .bc-steps__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
}/* ════════════════════════════════════════════════════════════════════════
   Item — gedeelde basis (vertical layout): badge links, content rechts
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-steps__item {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  -moz-column-gap: 24px;
       column-gap: 24px;
  padding-bottom: 36px;
}.bc-cm .bc-steps__item:last-child {
  padding-bottom: 0;
}/* ── Marker-kolom: badge + optioneel icoon ── */.bc-cm .bc-steps__marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1; /* badge boven de verbindingslijn */
}/* ── Het grote oranje cijferbadge ── */.bc-cm .bc-steps__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 9999px; /* perfecte cirkel, in lijn met badge-vorm BC */
  background: var(--bc-primary);
  color: var(--bc-white);
  font-family: var(--bc-font-heading);
  font-size: 1.625rem; /* 26px */
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  /* zachte tint-shadow, geen pure zwart */
  box-shadow: 0 6px 18px rgba(238, 116, 55, 0.28);
}/* ── Optioneel decoratief icoon onder het cijfer ── */.bc-cm .bc-steps__icon {
  width: 28px;
  height: 28px;
  margin-top: 12px;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0.85;
}/* ── Verbindingslijn (vertical): loopt van badge naar badge ── */.bc-cm .bc-steps__item:not(:last-child) .bc-steps__marker::after {
  content: "";
  position: absolute;
  top: 56px; /* onderkant badge */
  bottom: -36px; /* tot bovenkant volgende badge (= padding-bottom item) */
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(
    to bottom,
    rgba(238, 116, 55, 0.45) 0,
    rgba(238, 116, 55, 0.45) 6px,
    transparent 6px,
    transparent 12px
  );
}/* ── Content-kolom ── */.bc-cm .bc-steps__content {
  padding-top: 4px; /* optisch uitlijnen met het cijfer */
}.bc-cm .bc-steps__title {
  font-family: var(--bc-font-heading);
  font-size: 1.25rem; /* 20px */
  font-weight: 800;
  line-height: 1.3;
  color: var(--bc-text-light);
  margin: 0 0 8px;
}.bc-cm .bc-steps__body {
  font-family: var(--bc-font-body);
  font-size: 1rem; /* 16px */
  line-height: 1.6;
  color: var(--bc-text-medium);
  margin: 0;
}.bc-cm .bc-steps__body + .bc-steps__body {
  margin-top: 10px;
}.bc-cm .bc-steps__body strong {
  font-weight: 800;
  color: var(--bc-text-light);
}.bc-cm .bc-steps__body a {
  color: var(--bc-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 200ms ease;
}.bc-cm .bc-steps__body a:hover {
  color: var(--bc-primary-hover); /* orange -> teal swap (BC hover-semantiek) */
}/* ════════════════════════════════════════════════════════════════════════
   Variant: horizontal — stappen naast elkaar, horizontale verbindingslijn
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-steps--horizontal {
  max-width: 1080px;
}/* Horizontal: de smalle gecentreerde inner-kolom van de vertical-variant maakt
   geen zin voor naast-elkaar stappen — reset naar vol-breedte. De intro blijft
   gecentreerd (text-align uit de basis), de rij vult de hele container. */.bc-cm .bc-steps--horizontal .bc-steps-inner {
  max-width: none;
}.bc-cm .bc-steps--horizontal .bc-steps__list {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}.bc-cm .bc-steps--horizontal .bc-steps__item {
  flex: 1 1 0;
  display: block;
  text-align: center;
  padding-bottom: 0;
}.bc-cm .bc-steps--horizontal .bc-steps__marker {
  align-items: center;
  margin-bottom: 18px;
}/* Horizontale verbindingslijn: loopt rechts vanaf elke badge naar de volgende */.bc-cm .bc-steps--horizontal .bc-steps__item:not(:last-child) .bc-steps__marker::after {
  content: "";
  position: absolute;
  top: 28px; /* midden van de 56px badge */
  bottom: auto;
  left: calc(50% + 28px + 12px); /* rand badge + halve gap */
  right: auto;
  width: calc(100% + 24px - 56px - 24px); /* tot de volgende badge-rand */
  height: 2px;
  transform: none;
  background: repeating-linear-gradient(
    to right,
    rgba(238, 116, 55, 0.45) 0,
    rgba(238, 116, 55, 0.45) 6px,
    transparent 6px,
    transparent 12px
  );
}.bc-cm .bc-steps--horizontal .bc-steps__content {
  padding-top: 0;
}.bc-cm .bc-steps--horizontal .bc-steps__body {
  max-width: 30ch;
  margin-left: auto;
  margin-right: auto;
}/* ════════════════════════════════════════════════════════════════════════
   Scroll-fill (FB-ronde B D2a/D2b) — JS-gate .bc-steps-js op de sectie
   ════════════════════════════════════════════════════════════════════════
   De outline-rust-staat van de badges bestaat ALLEEN als steps.js draait
   (het script zet .bc-steps-js, bc-nusp-js patroon): zonder JS blijven alle
   badges gewoon gevuld oranje (de basis hierboven) — geen lege/onzichtbare
   content. Met JS start elke badge als outline-cirkel (border, transparant
   gevulde achtergrond, oranje cijfer) en kleurt hij in zodra de stap de
   onderste derde van het scherm voorbij is (is-filled op het item). */.bc-cm .bc-steps-js .bc-steps__num {
  background: var(--bc-white);
  border: 2px solid rgba(36, 36, 34, 0.28);
  color: var(--bc-primary);
  box-shadow: none;
  transition: background 0.5s ease, border-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}.bc-cm .bc-steps-js .bc-steps__item.is-filled .bc-steps__num {
  background: var(--bc-primary);
  border-color: var(--bc-primary);
  color: var(--bc-white);
  box-shadow: 0 12px 26px rgba(238, 116, 55, 0.35);
}/* Lijn-vulling (vertical + mobiele fallback): een solide oranje lijn vult
   het streepjes-spoor van boven naar beneden zodra de stap is ingekleurd.
   ::before naast het bestaande ::after-spoor, zelfde geometrie. */.bc-cm .bc-steps-js .bc-steps__item:not(:last-child) .bc-steps__marker::before {
  content: "";
  position: absolute;
  top: 56px;
  bottom: -36px;
  left: 50%;
  width: 2px;
  border-radius: 2px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  background: var(--bc-primary);
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}.bc-cm .bc-steps-js .bc-steps__item.is-filled:not(:last-child) .bc-steps__marker::before {
  transform: translateX(-50%) scaleY(1);
}/* Horizontal single-row: het spoor loopt horizontaal — de verticale
   lijn-vulling slaat daar niet op, badges vullen wel gewoon in. */.bc-cm .bc-steps--horizontal .bc-steps__item .bc-steps__marker::before {
  display: none;
}/* ════════════════════════════════════════════════════════════════════════
   Variant: multi-row (FB-ronde B D2b) — horizontal met >3 stappen,
   3 per rij + runtime SVG-snake-lijn (steps.js). Render append de klasse
   automatisch naast bc-steps--horizontal wanneer steps.length > 3.
   ════════════════════════════════════════════════════════════════════════ */@media (min-width: 769px) {
  .bc-cm .bc-steps--multi-row .bc-steps__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    -moz-column-gap: 44px;
         column-gap: 44px;
    row-gap: 170px;
  }
  .bc-cm .bc-steps--multi-row .bc-steps__item {
    flex: none;
    position: relative;
    z-index: 2; /* badges + tekst boven de snake-lijn */
  }
  /* Het rechte streepjes-spoor tussen de badges vervalt: de snake-lijn
     (SVG, steps.js) neemt de verbinding over. Zonder JS is er geen lijn —
     bewuste degradatie, de 3x2 grid met gevulde badges blijft compleet. */
  .bc-cm .bc-steps--multi-row .bc-steps__item:not(:last-child) .bc-steps__marker::after {
    display: none;
  }
}/* Snake-SVG (door steps.js in .bc-steps-inner voor de lijst geplaatst en
   runtime exact over de lijst gepositioneerd/gemeten). Track = gestippeld
   spoor; fill = oranje inkt via stroke-dashoffset. */.bc-cm .bc-steps__snake {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}.bc-cm .bc-steps__snake .bc-steps__snake-track {
  fill: none;
  stroke: rgba(36, 36, 34, 0.3);
  stroke-width: 2;
  stroke-dasharray: 5 9;
  stroke-linecap: round;
}.bc-cm .bc-steps__snake .bc-steps__snake-fill {
  fill: none;
  stroke: var(--bc-primary);
  stroke-width: 3.5;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}/* ════════════════════════════════════════════════════════════════════════
   Responsive — horizontal valt terug op vertical onder 768px
   ════════════════════════════════════════════════════════════════════════ */@media (max-width: 768px) {
  .bc-cm .bc-steps {
    margin: 44px auto;
    padding: 0 20px;
  }
  .bc-cm .bc-steps__intro {
    margin-bottom: 28px;
  }

  /* horizontal -> vertical fallback */
  .bc-cm .bc-steps--horizontal .bc-steps__list {
    display: block;
  }
  .bc-cm .bc-steps--horizontal .bc-steps__item {
    display: grid;
    grid-template-columns: 56px 1fr;
    -moz-column-gap: 20px;
         column-gap: 20px;
    text-align: left;
    padding-bottom: 32px;
  }
  .bc-cm .bc-steps--horizontal .bc-steps__item:last-child {
    padding-bottom: 0;
  }
  .bc-cm .bc-steps--horizontal .bc-steps__marker {
    margin-bottom: 0;
  }
  /* terug naar de verticale verbindingslijn-geometrie */
  .bc-cm .bc-steps--horizontal .bc-steps__item:not(:last-child) .bc-steps__marker::after {
    top: 56px;
    bottom: -32px;
    left: 50%;
    right: auto;
    width: 2px;
    height: auto;
    transform: translateX(-50%);
    background: repeating-linear-gradient(
      to bottom,
      rgba(238, 116, 55, 0.45) 0,
      rgba(238, 116, 55, 0.45) 6px,
      transparent 6px,
      transparent 12px
    );
  }
  /* lijn-vulling volgt de verticale fallback-geometrie (scroll-fill, D2a) */
  .bc-cm .bc-steps--horizontal.bc-steps-js .bc-steps__item:not(:last-child) .bc-steps__marker::before {
    display: block;
    top: 56px;
    bottom: -32px;
  }
  .bc-cm .bc-steps--horizontal .bc-steps__content {
    padding-top: 4px;
  }
  .bc-cm .bc-steps--horizontal .bc-steps__body {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  .bc-cm .bc-steps__num {
    width: 48px;
    height: 48px;
    font-size: 1.375rem; /* 22px */
  }
  .bc-cm .bc-steps__item {
    grid-template-columns: 48px 1fr;
  }
  .bc-cm .bc-steps__item:not(:last-child) .bc-steps__marker::after {
    top: 48px;
  }
  .bc-cm .bc-steps-js .bc-steps__item:not(:last-child) .bc-steps__marker::before {
    top: 48px;
  }
  .bc-cm .bc-steps__title {
    font-size: 1.125rem; /* 18px */
  }
  /* snake-lijn is desktop-only; steps.js ziet display:none en meet niets */
  .bc-cm .bc-steps__snake {
    display: none;
  }
}/* ── Reduced-motion failsafe ── */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-steps {
    transition: none;
    opacity: 1;
    transform: none;
  }
  /* Scroll-fill failsafe: alles direct gevuld, geen outline-rust-staat,
     geen lijn-animatie. steps.js skipt init al bij reduced-motion; deze
     CSS-kant dekt de rand af waarin de klasse toch gezet zou zijn. */
  .bc-cm .bc-steps-js .bc-steps__num {
    background: var(--bc-primary);
    border-color: var(--bc-primary);
    color: var(--bc-white);
    transition: none;
  }
  .bc-cm .bc-steps-js .bc-steps__item:not(:last-child) .bc-steps__marker::before {
    transform: translateX(-50%) scaleY(1);
    transition: none;
  }
  .bc-cm .bc-steps__snake .bc-steps__snake-fill {
    transition: none;
  }
}/* bc-tabs — dense-info tabs, CRAWLABLE + JS-FREE (v0.5.3)
 *
 * Show/hide is PURE CSS. The pattern:
 *   .bc-tabs__set holds, in order:
 *     1. N radio <input>s (one shared name = the block group), visually hidden
 *     2. .bc-tabs__bar with N <label>s (the clickable tab buttons)
 *     3. .bc-tabs__panels with N panels (ALL rendered in the DOM = crawlable)
 *   Selecting radio #k (via its label) reveals panel #k through the
 *   `input:nth-of-type(k):checked ~ .bc-tabs__panels .bc-tabs__panel:nth-child(k)`
 *   sibling combinator. No JavaScript on click. First tab is `checked` server-side
 *   so content shows on first paint and without JS.
 *
 * 2 variants:
 *   horizontal — tab bar on top, panels below.
 *   vertical   — tab rail on the left, panel on the right (collapses to
 *                horizontal under 768px).
 *
 * Reveal: [data-bc-reveal] starts at opacity 0 + translateY; .bc-visible = end
 *         state (BCReveal IIFE, Phase 9). Reduced-motion failsafe at the bottom.
 *
 * Tokens: var(--bc-*) for color + font; spacing/radii/sizing literals (Plan 10).
 * Anti-slop: no gradient, no glow, no pure-black shadow (alpha-tint instead),
 *            hover = orange->teal swap (BC hover-semantiek).
 *//* ── Outer section: layout-container + reveal-state ── */.bc-cm .bc-tabs {
  max-width: 920px;
  margin: 56px auto;
  padding: 0 var(--bc-gutter);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}.bc-cm .bc-tabs.bc-visible {
  opacity: 1;
  transform: translateY(0);
}.bc-cm .bc-tabs__heading {
  font-family: var(--bc-font-heading);
  font-size: 1.625rem; /* 26px */
  font-weight: 800;
  line-height: 1.25;
  color: var(--bc-text-light);
  margin: 0 0 20px;
}/* ── The toggle set ── */.bc-cm .bc-tabs__set {
  position: relative;
}/* Radios drive the :checked state but are never seen. Kept in-flow-free so they
   do not affect layout; not display:none so :checked + label[for] still work and
   keyboard focus can land on them (accessible without JS). */.bc-cm .bc-tabs__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}/* ── Tab bar ── */.bc-cm .bc-tabs__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 2px solid rgba(36, 36, 34, 0.10);
  margin-bottom: 28px;
}/* ── Tab button (the label) ── */.bc-cm .bc-tabs__tab {
  display: inline-flex;
  align-items: center;
  font-family: var(--bc-font-heading);
  font-size: 1.0625rem; /* 17px */
  font-weight: 700;
  line-height: 1.2;
  color: var(--bc-text-medium);
  padding: 12px 20px;
  cursor: pointer;
  border: none;
  background: transparent;
  border-radius: 8px 8px 0 0;
  /* the active underline sits on the bottom edge; transparent by default */
  border-bottom: 3px solid transparent;
  margin-bottom: -2px; /* overlap the bar's own border so the active bar aligns */
  transition: color 200ms ease, background-color 200ms ease,
    border-color 200ms ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}.bc-cm .bc-tabs__tab:hover {
  color: var(--bc-primary);
  background: rgba(238, 116, 55, 0.06);
}/* Keyboard focus ring on the hidden radio shows on its label (accessible, JS-free). */.bc-cm .bc-tabs__radio:focus-visible + .bc-tabs__bar .bc-tabs__tab,
.bc-cm .bc-tabs__radio:focus-visible ~ .bc-tabs__bar .bc-tabs__tab {
  /* fallback — overridden by the per-index focus rule below */
}/* ── Panels: all in the DOM; inactive ones hidden by CSS (crawlable) ── */.bc-cm .bc-tabs__panel {
  display: none;
}.bc-cm .bc-tabs__line {
  font-family: var(--bc-font-body);
  font-size: 1.0625rem; /* 17px */
  font-weight: 400;
  line-height: 1.65;
  color: var(--bc-text-light);
  margin: 0;
}.bc-cm .bc-tabs__line + .bc-tabs__line {
  margin-top: 14px;
}.bc-cm .bc-tabs__line strong {
  font-weight: 800;
}.bc-cm .bc-tabs__line a {
  color: var(--bc-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 200ms ease;
}.bc-cm .bc-tabs__line a:hover {
  color: var(--bc-primary-hover); /* orange -> teal swap */
}/* teal check-list when a body string is a bullet block (markdown-inline -> <ul>) */.bc-cm .bc-tabs__panel ul {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}.bc-cm .bc-tabs__panel li {
  position: relative;
  padding-left: 28px;
  margin: 0 0 10px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--bc-text-light);
}.bc-cm .bc-tabs__panel li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 12px;
  height: 7px;
  border-left: 2.5px solid var(--bc-primary-hover); /* teal check */
  border-bottom: 2.5px solid var(--bc-primary-hover);
  transform: rotate(-45deg);
}/* ════════════════════════════════════════════════════════════════════════
   THE TOGGLE — pure CSS, per index. Source order in .bc-tabs__set:
     [radio*N] -> .bc-tabs__bar -> .bc-tabs__panels
   radio:nth-of-type(k):checked reveals:
     - the matching label (active styling) in the bar
     - the matching panel in the panels wrapper
   Supports up to 8 tabs (schema maxItems 8).
   ════════════════════════════════════════════════════════════════════════ *//* Active label styling per index */.bc-cm .bc-tabs__radio:nth-of-type(1):checked ~ .bc-tabs__bar .bc-tabs__tab:nth-child(1),
.bc-cm .bc-tabs__radio:nth-of-type(2):checked ~ .bc-tabs__bar .bc-tabs__tab:nth-child(2),
.bc-cm .bc-tabs__radio:nth-of-type(3):checked ~ .bc-tabs__bar .bc-tabs__tab:nth-child(3),
.bc-cm .bc-tabs__radio:nth-of-type(4):checked ~ .bc-tabs__bar .bc-tabs__tab:nth-child(4),
.bc-cm .bc-tabs__radio:nth-of-type(5):checked ~ .bc-tabs__bar .bc-tabs__tab:nth-child(5),
.bc-cm .bc-tabs__radio:nth-of-type(6):checked ~ .bc-tabs__bar .bc-tabs__tab:nth-child(6),
.bc-cm .bc-tabs__radio:nth-of-type(7):checked ~ .bc-tabs__bar .bc-tabs__tab:nth-child(7),
.bc-cm .bc-tabs__radio:nth-of-type(8):checked ~ .bc-tabs__bar .bc-tabs__tab:nth-child(8) {
  color: var(--bc-primary);
  border-bottom-color: var(--bc-primary);
  background: transparent;
}/* Active panel per index */.bc-cm .bc-tabs__radio:nth-of-type(1):checked ~ .bc-tabs__panels .bc-tabs__panel:nth-child(1),
.bc-cm .bc-tabs__radio:nth-of-type(2):checked ~ .bc-tabs__panels .bc-tabs__panel:nth-child(2),
.bc-cm .bc-tabs__radio:nth-of-type(3):checked ~ .bc-tabs__panels .bc-tabs__panel:nth-child(3),
.bc-cm .bc-tabs__radio:nth-of-type(4):checked ~ .bc-tabs__panels .bc-tabs__panel:nth-child(4),
.bc-cm .bc-tabs__radio:nth-of-type(5):checked ~ .bc-tabs__panels .bc-tabs__panel:nth-child(5),
.bc-cm .bc-tabs__radio:nth-of-type(6):checked ~ .bc-tabs__panels .bc-tabs__panel:nth-child(6),
.bc-cm .bc-tabs__radio:nth-of-type(7):checked ~ .bc-tabs__panels .bc-tabs__panel:nth-child(7),
.bc-cm .bc-tabs__radio:nth-of-type(8):checked ~ .bc-tabs__panels .bc-tabs__panel:nth-child(8) {
  display: block;
}/* Keyboard focus: ring on the active label when its radio has focus (JS-free a11y) */.bc-cm .bc-tabs__radio:nth-of-type(1):focus-visible ~ .bc-tabs__bar .bc-tabs__tab:nth-child(1),
.bc-cm .bc-tabs__radio:nth-of-type(2):focus-visible ~ .bc-tabs__bar .bc-tabs__tab:nth-child(2),
.bc-cm .bc-tabs__radio:nth-of-type(3):focus-visible ~ .bc-tabs__bar .bc-tabs__tab:nth-child(3),
.bc-cm .bc-tabs__radio:nth-of-type(4):focus-visible ~ .bc-tabs__bar .bc-tabs__tab:nth-child(4),
.bc-cm .bc-tabs__radio:nth-of-type(5):focus-visible ~ .bc-tabs__bar .bc-tabs__tab:nth-child(5),
.bc-cm .bc-tabs__radio:nth-of-type(6):focus-visible ~ .bc-tabs__bar .bc-tabs__tab:nth-child(6),
.bc-cm .bc-tabs__radio:nth-of-type(7):focus-visible ~ .bc-tabs__bar .bc-tabs__tab:nth-child(7),
.bc-cm .bc-tabs__radio:nth-of-type(8):focus-visible ~ .bc-tabs__bar .bc-tabs__tab:nth-child(8) {
  outline: 2px solid var(--bc-primary);
  outline-offset: 2px;
}/* ════════════════════════════════════════════════════════════════════════
   Variant: vertical — tab rail left, panel right.
   The __set becomes a grid; the panels wrapper spans the right column and the
   active panel inside it shows via the same per-index toggle (the panels
   wrapper participates as a grid item, panels stack within it).
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-tabs--vertical .bc-tabs__set {
  display: grid;
  grid-template-columns: 220px 1fr;
  -moz-column-gap: 36px;
       column-gap: 36px;
  align-items: start;
}.bc-cm .bc-tabs--vertical .bc-tabs__bar {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 2px;
  border-bottom: none;
  border-right: 2px solid rgba(36, 36, 34, 0.10);
  margin-bottom: 0;
  padding-right: 8px;
}.bc-cm .bc-tabs--vertical .bc-tabs__tab {
  border-radius: 8px 0 0 8px;
  border-bottom: none;
  border-right: 3px solid transparent;
  margin-bottom: 0;
  margin-right: -2px; /* overlap the rail border */
  text-align: left;
  width: 100%;
}/* vertical active label: right-border accent instead of bottom-underline */.bc-cm .bc-tabs--vertical .bc-tabs__radio:nth-of-type(1):checked ~ .bc-tabs__bar .bc-tabs__tab:nth-child(1),
.bc-cm .bc-tabs--vertical .bc-tabs__radio:nth-of-type(2):checked ~ .bc-tabs__bar .bc-tabs__tab:nth-child(2),
.bc-cm .bc-tabs--vertical .bc-tabs__radio:nth-of-type(3):checked ~ .bc-tabs__bar .bc-tabs__tab:nth-child(3),
.bc-cm .bc-tabs--vertical .bc-tabs__radio:nth-of-type(4):checked ~ .bc-tabs__bar .bc-tabs__tab:nth-child(4),
.bc-cm .bc-tabs--vertical .bc-tabs__radio:nth-of-type(5):checked ~ .bc-tabs__bar .bc-tabs__tab:nth-child(5),
.bc-cm .bc-tabs--vertical .bc-tabs__radio:nth-of-type(6):checked ~ .bc-tabs__bar .bc-tabs__tab:nth-child(6),
.bc-cm .bc-tabs--vertical .bc-tabs__radio:nth-of-type(7):checked ~ .bc-tabs__bar .bc-tabs__tab:nth-child(7),
.bc-cm .bc-tabs--vertical .bc-tabs__radio:nth-of-type(8):checked ~ .bc-tabs__bar .bc-tabs__tab:nth-child(8) {
  border-bottom-color: transparent;
  border-right-color: var(--bc-primary);
  background: rgba(238, 116, 55, 0.06);
}/* ── Responsive: vertical collapses to a top bar under 768px ── */@media (max-width: 768px) {
  .bc-cm .bc-tabs {
    margin: 40px auto;
    padding: 0 20px;
  }
  .bc-cm .bc-tabs--vertical .bc-tabs__set {
    display: block;
  }
  .bc-cm .bc-tabs--vertical .bc-tabs__bar {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 2px solid rgba(36, 36, 34, 0.10);
    margin-bottom: 24px;
    padding-right: 0;
  }
  .bc-cm .bc-tabs--vertical .bc-tabs__tab {
    border-radius: 8px 8px 0 0;
    border-right: none;
    border-bottom: 3px solid transparent;
    margin-right: 0;
    margin-bottom: -2px;
    width: auto;
  }
  .bc-cm .bc-tabs__tab {
    font-size: 1rem;
    padding: 10px 14px;
  }
}/* ── Reduced-motion failsafe ── */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-tabs {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .bc-cm .bc-tabs__tab {
    transition: none;
  }
}/* bc-video — beweging / visueel bewijs (v0.5.3)
 *
 * Een video-blok in twee smaken:
 *   embed  (default-emit) — YouTube/Vimeo facade: poster-thumbnail + oranje
 *                           play-knop; de echte iframe laadt pas op klik
 *                           (geen third-party LCP-hit, geen autostart).
 *   inline                — self-hosted <video> met poster + native controls.
 *
 * Vorm = de BC-taal van de andere blocks: 8px radius op het frame, cream
 * surround, near-black tekst, tint-shadow (geen pure zwart). Play-knop volgt de
 * BC hover-semantiek (oranje -> teal swap, nooit een donkerder tint van zichzelf).
 *
 * Reveal: [data-bc-reveal] start op opacity 0 + translateY, .bc-visible = eind-state
 *         (BCReveal IIFE, Phase 9). Reduced-motion failsafe onderaan.
 *
 * Tokens: var(--bc-*) voor kleur + font; spacing/radii/sizing literals (Plan 10 policy).
 * Anti-slop: geen gradient-glow, geen neon, 1 vlak accent (oranje knop). Het 16:9
 *            wrapper gebruikt aspect-ratio (geen padding-top hack nodig).
 *//* === Outer section: layout-container + geneste reveal-state === */.bc-cm .bc-video {
  max-width: 880px;
  margin: 56px auto;
  padding: 0 var(--bc-gutter);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}.bc-cm .bc-video.bc-visible {
  opacity: 1;
  transform: translateY(0);
}.bc-cm .bc-video-inner {
  margin: 0 auto;
}/* === Het 16:9 frame === */.bc-cm .bc-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #1c1a17; /* warme near-black backdrop achter poster/iframe */
  box-shadow:
    0 1px 2px rgba(36, 36, 34, 0.05),
    0 18px 50px rgba(36, 36, 34, 0.12);
}/* iframe (embed, ingespoten op klik), video (inline) en poster vullen het frame */.bc-cm .bc-video__iframe,
.bc-cm .bc-video__media,
.bc-cm .bc-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}.bc-cm .bc-video__media,
.bc-cm .bc-video__poster {
  -o-object-fit: cover;
     object-fit: cover;
}/* === Embed-facade: poster + play-knop, met zachte donker-veil voor contrast === */.bc-cm .bc-video__frame[data-bc-video-facade] {
  cursor: pointer;
}.bc-cm .bc-video__frame[data-bc-video-facade]::after {
  content: "";
  position: absolute;
  inset: 0;
  /* subtiele donker-tint zodat de witte/oranje knop altijd leest, geen zware overlay */
  background: rgba(20, 14, 8, 0.22);
  transition: background 220ms ease;
  pointer-events: none;
}.bc-cm .bc-video__frame[data-bc-video-facade]:hover::after {
  background: rgba(20, 14, 8, 0.10);
}/* === Play-knop: oranje cirkel, wit pictogram, hover -> teal (BC swap) === */.bc-cm .bc-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: var(--bc-primary);
  color: var(--bc-white);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(20, 14, 8, 0.35);
  transition:
    background 200ms ease,
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 200ms ease;
  z-index: 1;
}.bc-cm .bc-video__play-icon {
  display: flex;
  /* optische centrering: een play-driehoek hangt visueel iets te ver links */
  margin-left: 4px;
  line-height: 0;
}.bc-cm .bc-video__frame:hover .bc-video__play,
.bc-cm .bc-video__play:hover,
.bc-cm .bc-video__play:focus-visible {
  background: var(--bc-primary-hover); /* oranje -> teal swap */
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 12px 30px rgba(20, 14, 8, 0.40);
}.bc-cm .bc-video__play:focus-visible {
  outline: 3px solid var(--bc-white);
  outline-offset: 3px;
}/* noscript-failsafe: gewoon een tekstlink op de poster */.bc-cm .bc-video__noscript {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bc-white);
  font-family: var(--bc-font-body);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: rgba(20, 14, 8, 0.35);
}/* === Caption onder het frame === */.bc-cm .bc-video__caption {
  margin: 16px 0 0;
  font-family: var(--bc-font-body);
  font-size: 0.9375rem; /* 15px */
  line-height: 1.5;
  color: var(--bc-text-medium);
  text-align: center;
}/* === Variant: inline (self-hosted) — zelfde frame, geen play-facade ===
   De native controls verzorgen de play-affordance; geen oranje knop nodig. */.bc-cm .bc-video--inline .bc-video__media {
  background: #1c1a17;
}/* === Responsive === */@media (max-width: 768px) {
  .bc-cm .bc-video {
    margin: 40px auto;
    padding: 0 20px;
  }
  .bc-cm .bc-video__play {
    width: 68px;
    height: 68px;
  }
  .bc-cm .bc-video__play-icon svg {
    width: 28px;
    height: 28px;
  }
}/* === Reduced-motion failsafe === */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-video {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .bc-cm .bc-video__play,
  .bc-cm .bc-video__frame[data-bc-video-facade]::after {
    transition: none;
  }
  .bc-cm .bc-video__frame:hover .bc-video__play,
  .bc-cm .bc-video__play:hover,
  .bc-cm .bc-video__play:focus-visible {
    transform: translate(-50%, -50%);
  }
}/* === palette wave 2 — logo-strip, quote, service-area === *//* bc-logo-strip — trust-bar / "vertrouwd door" (v0.5.0)
 *
 * Een rustige social-proof-strip: een rij client-logo's, optioneel met een
 * kleine eyebrow erboven. Bewust kalm, geen kaarten-spam: de logo's dragen
 * de boodschap, niet de container.
 *
 * Logo-assets zijn AUTHOR-supplied (echte klant-logo's); geen image-library
 * pool-afhankelijkheid in dit block.
 *
 * 2 variants:
 *   mono  (default-emit) — logo's in grijswaarden + verlaagde opacity; lichten
 *                          op naar vol kleur + opacity bij hover (per logo).
 *   card                 — elk logo in een klein off-white kaartje met dunne
 *                          border + zachte tint-shadow; hover licht 't kaartje.
 *
 * Reveal: [data-bc-reveal] start op opacity 0 + translateY, .bc-visible =
 *         eind-state (BCReveal IIFE, Phase 9). Reduced-motion failsafe onderaan.
 *
 * Tokens: var(--bc-*) voor kleur + font; spacing/radii/sizing literals.
 * Anti-slop: geen gradient, geen glow, geen pure-zwarte schaduw (alpha-tint).
 *//* ── Outer section: layout-container + reveal-state ── */.bc-cm .bc-logo-strip {
  max-width: 1300px;
  margin: 56px auto;
  padding: 0 var(--bc-gutter);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}.bc-cm .bc-logo-strip.bc-visible {
  opacity: 1;
  transform: translateY(0);
}.bc-cm .bc-logo-strip-inner {
  text-align: center;
}/* ── Optionele eyebrow / heading boven de rij ── */.bc-cm .bc-logo-strip__heading {
  font-family: var(--bc-font-heading);
  font-size: 0.8125rem; /* 13px — kleine eyebrow */
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bc-text-muted);
  margin: 0 0 28px;
}/* ── De rij zelf: wrappende, gecentreerde flex ── */.bc-cm .bc-logo-strip__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px 56px; /* row-gap kleiner dan column-gap */
}.bc-cm .bc-logo-strip__item {
  display: flex;
  align-items: center;
  justify-content: center;
}/* ── Het logo-beeld: begrensde hoogte, intrinsieke breedte ── */.bc-cm .bc-logo-strip__img {
  display: block;
  height: 60px;
  width: auto;
  max-width: 210px;
  -o-object-fit: contain;
     object-fit: contain;
}/* ════════════════════════════════════════════════════════════════════════
   Variant: mono (default-emit) — grijswaarden, licht op naar kleur bij hover
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-logo-strip .bc-logo-strip__img {
  filter: grayscale(100%);
  opacity: 0.55;
  transition: filter 240ms ease, opacity 240ms ease;
}.bc-cm .bc-logo-strip .bc-logo-strip__item:hover .bc-logo-strip__img {
  filter: grayscale(0%);
  opacity: 1;
}/* Rotate mode (per-slot crossfade) heeft geen __item maar __slot/__layer.
   Hover-kleur is gescope'd op het INDIVIDUELE slot dat je aanwijst: alleen dat
   logo gaat naar echte kleur (grayscale eraf) + vol opaak; de rest blijft grijs.
   De rotatie loopt gewoon door tijdens hover (geen pauze). */.bc-cm .bc-logo-strip--rotate .bc-logo-strip__slot:hover .bc-logo-strip__img {
  filter: grayscale(0%);
  opacity: 1;
}/* ════════════════════════════════════════════════════════════════════════
   Variant: card — elk logo in een klein off-white kaartje
   Overruled de mono-filter: kaart-logo's tonen vol kleur.
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-logo-strip--card .bc-logo-strip__items {
  gap: 20px;
}.bc-cm .bc-logo-strip--card .bc-logo-strip__item {
  background: #fffdfb; /* off-white, tikje warmer dan zuiver wit */
  border: 1px solid rgba(36, 36, 34, 0.08);
  border-radius: 8px;
  padding: 20px 28px;
  /* zachte tint-shadow, geen pure zwart */
  box-shadow: 0 1px 2px rgba(36, 36, 34, 0.04);
  transition: box-shadow 240ms ease, transform 240ms ease;
}.bc-cm .bc-logo-strip--card .bc-logo-strip__img {
  filter: none;
  opacity: 1;
}.bc-cm .bc-logo-strip--card .bc-logo-strip__item:hover {
  box-shadow:
    0 1px 2px rgba(36, 36, 34, 0.04),
    0 12px 30px rgba(36, 36, 34, 0.08);
  transform: translateY(-2px);
}/* ════════════════════════════════════════════════════════════════════════
   Rotate mode (data.rotate + data.slots) — per-SLOT staggered crossfade
   Een VAST aantal slots (posities) blijft op z'n plek staan. Elk slot is een
   vaste box (vaste hoogte + max-width) waarin meerdere logo-LAGEN absoluut over
   elkaar liggen en om de beurt rustig in/uit-faden. De slots starten gestaggerd
   (slot 1, dan slot 2 een tel later, ...) via een negatieve animation-delay per
   laag, zodat het "een voor een" en chic oogt i.p.v. een harde set-swap.
   Vaste slot-box + object-fit:contain = brede en smalle logo's ogen even groot,
   GEEN size-jump bij de wissel. CSS-only, pauzeert bij hover, reduced-motion
   toont enkel de eerste laag per slot.
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-logo-strip__slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;        /* alle slots op EEN regel (geen wrap naar 2 rijen) */
  align-items: center;
  justify-content: center;
  gap: 32px;                /* kleinere gap zodat 6 slots + 5 gaps in ~1300px passen */
}/* Het slot = een box met VASTE hoogte; de breedte verdeelt gelijkmatig over de
   rij (flex 1 1 0, met een max zodat brede schermen niet uitlubberen). De breedte
   wordt 1x door de container bepaald en verandert NIET tijdens de animatie (de
   logo-lagen zijn absoluut en beinvloeden de box-breedte niet) -> geen size-jump. */.bc-cm .bc-logo-strip__slot {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 200px;
  height: 60px;   /* vaste hoogte = geen layout-shift, geen size-jump */
}/* Een logo-laag vult de slot-box en centreert het logo. */.bc-cm .bc-logo-strip__layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* SCHONE BASE-staat (pre-animatie / first paint): variant 1 = vol, variant 2 =
     uit, zodat er op t=0 al precies EEN logo per slot staat, geen overlap. */
  opacity: 1;
  /* alle lagen delen dezelfde cyclus + keyframe; hun fase verschilt via inline
     animation-delay. De render geeft ALLE lagen een NEGATIEVE delay (zie
     render.mjs): zo is er GEEN delay-/wacht-fase -> de animatie loopt al op t=0
     en de complementaire som (~1) geldt vanaf het eerste frame (geen load-overlap
     waarbij een layer-startframe boven een andere zichtbare layer hangt). De
     -cycle/4 in de delay zet t=0 midden in een HOLD: variant 1 op 1, variant 2 op
     0 -> exact 1 logo bij load. COMPLEMENTAIRE crossfade (zie keyframe): lange
     hold + korte crossover (linear: A 1->0 + B 0->1 = exact 1). Geen fill-mode
     nodig want geen positieve delay. */
  animation: bc-logo-slot-fade var(--bc-logo-cycle, 14s) linear infinite;
}/* Base voor de tweede variant-laag = uit (matcht de t=0 animatie-staat). */.bc-cm .bc-logo-strip__layer:nth-child(2) {
  opacity: 0;
}/* Het logo binnen een laag: begrensd door de slot-box -> elk logo "even groot". */.bc-cm .bc-logo-strip__layer .bc-logo-strip__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}/* Geen hover-pauze: de rotatie loopt door, ook tijdens hover (Bram 2026-06-23).
   Hover doet alleen nog kleur-op-het-gehoverde-slot (zie mono-blok hierboven). *//* COMPLEMENTAIRE crossfade-keyframe per slot-laag (2 varianten/slot, delay = halve
   cyclus). De 2 lagen lopen 50% uit fase; deze curve is zo gevormd dat opacityA +
   opacityB ~= 1 op ELK moment: lange HOLD op 1, dan een KORTE crossover (~0.56s)
   waarin de ene laag 1->0 gaat terwijl de andere 0->1 gaat (kruisen op 0.5). Zo is
   het slot NOOIT leeg (som nooit ~0) en NOOIT lang dubbel-vol (de beide-hoog-periode
   = alleen het korte crossover-venster, geen geparkeerd dubbelbeeld). De crossover
   ligt gecentreerd op de 50%- en de wrap-grens; 0% == 100% (=0.5) => naadloze wrap.
   Per logo: ~6s vol zichtbaar, ~0.56s snelle dissolve, dan ~6s uit. */@keyframes bc-logo-slot-fade {
  0%   { opacity: 0.5; }  /* == 100% -> midden van de wrap-crossover, naadloos rond */
  2%   { opacity: 1; }    /* crossover-up klaar */
  48%  { opacity: 1; }    /* lange hold op vol (~6.4s) */
  50%  { opacity: 0.5; }  /* midden van de crossover op de 50%-grens */
  52%  { opacity: 0; }    /* crossover-down klaar (~0.56s totaal 48%->52%) */
  98%  { opacity: 0; }    /* lange hold uit (~6.4s) */
  100% { opacity: 0.5; }  /* start van de wrap-crossover, == 0% */
}/* ── Responsive ── */@media (max-width: 768px) {
  .bc-cm .bc-logo-strip {
    margin: 40px auto;
    padding: 0 20px;
  }
  .bc-cm .bc-logo-strip__heading {
    margin-bottom: 22px;
  }
  .bc-cm .bc-logo-strip__items {
    gap: 28px 36px;
  }
  .bc-cm .bc-logo-strip__img {
    height: 44px;
    max-width: 160px;
  }
  /* Rotate-slots op mobiel: 3 slots NAAST elkaar op 1 rij die roteren met
     dezelfde staggered crossfade. Slot 4-6 verbergen (de 3 zichtbare slots faden
     gewoon door hun 2 varianten). nowrap = nooit 2 rijen. */
  .bc-cm .bc-logo-strip__slots {
    gap: 20px;
    flex-wrap: nowrap;
  }
  .bc-cm .bc-logo-strip__slot {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    height: 44px;          /* kleinere vaste hoogte, nog steeds no-jump */
  }
  /* Toon enkel de eerste 3 slots op mobiel; verberg slot 4-6. */
  .bc-cm .bc-logo-strip__slot:nth-child(n+4) {
    display: none;
  }
  /* In een rotate-slot bepaalt de box de grootte, niet de img height-regel. */
  .bc-cm .bc-logo-strip__layer .bc-logo-strip__img {
    height: auto;
    max-width: 100%;
  }
  .bc-cm .bc-logo-strip--card .bc-logo-strip__item {
    padding: 16px 22px;
  }
}/* ── Reduced-motion failsafe ── */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-logo-strip {
    transition: none;
    opacity: 1;
    transform: none;
  }
  /* Geen crossfade: toon per slot enkel de eerste laag statisch, verberg de rest.
     De slot-box houdt z'n vaste hoogte, dus geen layout-shift. */
  .bc-cm .bc-logo-strip__layer {
    animation: none;
    opacity: 0;
  }
  .bc-cm .bc-logo-strip__layer:first-child {
    opacity: 1;
  }
}/* bc-quote — offerte-aanvraag op de pagina via Gravity Forms (v0.5.4)
 *
 * Het offerteformulier staat OP de pagina (Gravity Forms shortcode). De render
 * emit de shortcode als platte tekst; WordPress vervangt 'm runtime door het
 * echte formulier. Deze CSS stijlt de omhulling (heading + verwachtingsregel +
 * formulier-slot), niet de GF-velden zelf (die erft het WP-thema).
 *
 * 2 variants:
 *   inline (default-emit) — heading + verwachting + formulier in een rustige
 *                           sectie, gecentreerde leeskolom.
 *   card                  — korte copy + verwachtingsregel naast/boven een
 *                           uitgelichte room-kaart met het formulier erin.
 *
 * Reveal: [data-bc-reveal] start op opacity 0 + translateY, .bc-visible =
 *         eind-state (BCReveal IIFE, Phase 9). Reduced-motion failsafe onderaan.
 *
 * Tokens: var(--bc-*) voor kleur + font; spacing/radii/sizing literals.
 * Anti-slop: geen gradient, geen glow, geen pure-zwarte schaduw (alpha-tint),
 *            radius 8px, oranje verwachtings-tick als subtiel BC-signature.
 *//* ── Outer section: layout-container + reveal-state ── */.bc-cm .bc-quote {
  max-width: 860px;
  margin: 64px auto;
  padding: 0 var(--bc-gutter);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}.bc-cm .bc-quote.bc-visible {
  opacity: 1;
  transform: translateY(0);
}.bc-cm .bc-quote-inner {
  position: relative;
}/* ── Heading ── */.bc-cm .bc-quote__heading {
  font-family: var(--bc-font-heading);
  font-size: 1.75rem; /* 28px */
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--bc-text-light);
  margin: 0 0 12px;
}/* ── Verwachtingsregel: oranje tick + korte geruststelling ── */.bc-cm .bc-quote__expectation {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--bc-font-body);
  font-size: 1rem; /* 16px */
  font-weight: 600;
  line-height: 1.4;
  color: var(--bc-text-medium);
  margin: 0 0 24px;
}.bc-cm .bc-quote__expectation-tick {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: var(--bc-primary);
  /* witte check-glyph, geen image — pure CSS-mask via inline SVG data-URI */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / 13px no-repeat,
          linear-gradient(#000, #000);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / 13px no-repeat;
  /* fallback voor browsers zonder mask: gewoon de oranje cirkel */
}/* ── Beloftes-lijst (card variant): label + checks-lijst ── */.bc-cm .bc-quote__promises {
  margin: 24px 0 0;
}.bc-cm .bc-quote__promises-label {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 1.1875rem; /* 19px — serif heading, leest als kop boven de checklist */
  font-weight: 700;
  line-height: 1.3;
  color: var(--bc-text-light);
  margin: 0 0 16px;
}.bc-cm .bc-quote__promises-list {
  list-style: none;
  margin: 0;
  padding: 0;
}/* schone checklist: ruime regelafstand, GEEN divider-lijnen tussen items */.bc-cm .bc-quote__promise {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--bc-font-body);
  font-size: 1rem; /* 16px */
  font-weight: 500;
  line-height: 1.45;
  color: var(--bc-text-medium);
  padding: 0;
}.bc-cm .bc-quote__promise + .bc-quote__promise {
  margin-top: 16px; /* ruime verticale tussenruimte, geen scheidingslijn */
}.bc-cm .bc-quote__promise-text {
  flex: 1;
}/* bold keyword binnen de regel (komt via **markdown** uit de data) */.bc-cm .bc-quote__promise-text strong {
  font-weight: 800;
  color: var(--bc-text-light);
}/* oranje CIRKEL-OUTLINE check: dunne oranje ring met een check erin.
   De ring = de span met border; de check-glyph = ::before via CSS-mask. */.bc-cm .bc-quote__promise-tick {
  position: relative;
  flex-shrink: 0;
  margin-top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  border: 1.5px solid var(--bc-primary);
  background: transparent;
}.bc-cm .bc-quote__promise-tick::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bc-primary);
  /* check-glyph, geen image — pure CSS-mask via inline SVG data-URI */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center / 12px no-repeat;
}/* ── Formulier-slot: omhulling om de GF-shortcode ── */.bc-cm .bc-quote__form {
  margin: 0;
}/* De platte-tekst shortcode (zichtbaar in non-WP preview; WP vervangt 'm). */.bc-cm .bc-quote__shortcode {
  display: block;
  font-family: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.5;
  color: var(--bc-text-medium);
  background: var(--bc-cream);
  border: 1px dashed rgba(36, 36, 34, 0.18);
  border-radius: 8px;
  padding: 12px 14px;
  word-break: break-word;
}/* ════════════════════════════════════════════════════════════════════════
   Variant: inline (default-emit) — rustige gecentreerde leeskolom
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-quote:not(.bc-quote--card) .bc-quote-inner {
  max-width: 640px;
  margin: 0 auto;
}/* ════════════════════════════════════════════════════════════════════════
   Variant: card — korte copy naast een uitgelichte room-kaart met formulier
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-quote--card {
  max-width: 1040px;
}.bc-cm .bc-quote--card .bc-quote-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 40px;
  align-items: start;
}.bc-cm .bc-quote--card .bc-quote__copy {
  padding-top: 8px;
}.bc-cm .bc-quote--card .bc-quote__expectation {
  margin-bottom: 0;
}/* De uitgelichte kaart: room-surface, 8px radius, zachte tint-shadow ── */.bc-cm .bc-quote--card .bc-quote__card {
  background: var(--bc-cream);
  border-radius: 8px;
  padding: 32px;
  box-shadow:
    0 1px 2px rgba(36, 36, 34, 0.04),
    0 14px 40px rgba(36, 36, 34, 0.07);
}/* In de kaart staat de shortcode op wit (contrast met de room-kaart). */.bc-cm .bc-quote--card .bc-quote__shortcode {
  background: var(--bc-white);
}/* ── Responsive ── */@media (max-width: 768px) {
  .bc-cm .bc-quote {
    margin: 44px auto;
    padding: 0 20px;
  }
  .bc-cm .bc-quote__heading {
    font-size: 1.5rem; /* 24px */
  }
  .bc-cm .bc-quote--card .bc-quote-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .bc-cm .bc-quote--card .bc-quote__expectation {
    margin-bottom: 0;
  }
  .bc-cm .bc-quote--card .bc-quote__card {
    padding: 24px;
  }
}/* ── Reduced-motion failsafe ── */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-quote {
    transition: none;
    opacity: 1;
    transform: none;
  }
}/* Inline body links (bare <a> from the content pipeline) — brand-orange,
   consistent with text-image/article/prose (Wessel FB 2026-06-22).
   Note: task specified .bc-quote__copy but that class does not exist in this
   component; .bc-quote is the correct content container. */.bc-cm .bc-quote a:not(.bc-btn) {
  color: var(--bc-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}.bc-cm .bc-quote a:not(.bc-btn):hover {
  color: var(--bc-primary-hover);
}/* bc-service-area — bediende plaatsen / regio's overzicht (v0.1.0)
 *
 * Local page-type block: een scanbaar overzicht van plaatsen of regio's waar
 * Bar Company komt. Bewust een "dekkings-kaart in tekst", geen generieke
 * link-lijst: de plaatsnamen lezen als een gids, met een dunne oranje tick
 * voor het regio-gevoel.
 *
 * 2 variants:
 *   list  (default-emit) — plaatsnamen als witte pill-chips (radius-full),
 *                          gelinkte chips hoveren naar oranje.
 *   grid                 — witte kaarten per regio met een orange-arc
 *                          hoek-accent, geschikt als de naam ook een link is.
 *
 * Fase 2 FB-ronde A (Bram-gelockt 2026-07-03), chips: de kale lijst met
 * streepjes en de gele cream-kaartjes zijn vervangen. De renderer zet
 * bc-service-area__item--linked op items met een link zodat alleen gelinkte
 * chips een hover-state hebben (geen :has() nodig).
 *
 * Link-regel: een item dat een live URL heeft rendert als <a>; een item zonder
 * href is platte tekst (geen anchor, geen hover) zodat er nooit een broken link
 * naar een planned-not-live page staat.
 *
 * Reveal: [data-bc-reveal] start op opacity 0 + translateY, .bc-visible =
 *         eind-state (BCReveal IIFE, Phase 9). Reduced-motion failsafe onderaan.
 *
 * Tokens: var(--bc-*) voor kleur + font; spacing/radii/sizing literals.
 * Anti-slop: geen gradient, geen glow, geen pure-zwarte schaduw (alpha-tint),
 *            geen drie-gelijke-kaarten-default — de tick draagt het accent.
 *//* ── Outer section: layout-container + reveal-state ── */.bc-cm .bc-service-area {
  max-width: 920px;
  margin: 56px auto;
  padding: 0 var(--bc-gutter);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}.bc-cm .bc-service-area.bc-visible {
  opacity: 1;
  transform: translateY(0);
}.bc-cm .bc-service-area-inner {
  position: relative;
}/* ── Optionele heading boven het overzicht ── */.bc-cm .bc-service-area__heading {
  font-family: var(--bc-font-heading);
  font-size: 1.625rem; /* 26px */
  font-weight: 800;
  line-height: 1.3;
  color: var(--bc-text-light);
  margin: 0 0 28px;
}/* ════════════════════════════════════════════════════════════════════════
   Variant: list (default-emit) — witte pill-chips
   Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): chip-look staat in de Fase
   2-sectie onderaan; hier alleen de structurele basis. De oude tick-metriek,
   hairlines en underline-stijl zijn vervangen.
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-service-area__list {
  list-style: none;
  margin: 0;
  padding: 0;
}.bc-cm .bc-service-area__item {
  position: relative;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  font-family: var(--bc-font-body);
  line-height: 1.4;
}/* per-variant marker: chips zetten 'm uit, de grid-kaart tekent er de
   orange-arc mee (beide in de Fase 2-sectie onderaan) */.bc-cm .bc-service-area__item::before {
  content: "";
  position: absolute;
}/* Platte plaatsnaam (geen href) — geen anchor, geen hover */.bc-cm .bc-service-area__name {
  color: var(--bc-text-medium);
}/* Plaats met live link — oranje, orange->teal hover-swap */.bc-cm .bc-service-area__link {
  color: var(--bc-primary);
  transition: color 200ms ease;
}.bc-cm .bc-service-area__link:hover {
  color: var(--bc-primary-hover); /* orange -> teal swap (BC hover-semantiek) */
}/* ════════════════════════════════════════════════════════════════════════
   Variant: grid — witte kaarten per regio met orange-arc hoek-accent
   Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): cream-kaartjes + streepje zijn
   vervangen door een witte 2.0-kaart; het arc-accent staat in de Fase
   2-sectie onderaan (het deelt de ::before basis).
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-service-area--grid .bc-service-area__list {
  -moz-columns: auto;
       columns: auto; /* reset multi-column */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}.bc-cm .bc-service-area--grid .bc-service-area__item {
  background:#fff;border:1px solid rgba(36,36,34,.08);border-radius:14px;
  box-shadow:0 1px 2px rgba(36,36,34,.04),0 14px 40px rgba(36,36,34,.07);
  padding:24px;overflow:hidden;
  font-size: 1.125rem; /* 18px */
  font-weight: 600;
  transition: transform 200ms ease, box-shadow 200ms ease;
}/* kaart-hover alleen zinvol als de hele kaart een link draagt: subtiele lift */.bc-cm .bc-service-area--grid .bc-service-area__item:hover {
  transform: translateY(-2px);
  box-shadow:0 2px 4px rgba(36,36,34,.05),0 18px 44px rgba(36,36,34,.10);
}.bc-cm .bc-service-area--grid .bc-service-area__link {
  text-decoration: none; /* in de kaart leest de naam als titel, niet als losse link */
}.bc-cm .bc-service-area--grid .bc-service-area__link:hover {
  color: var(--bc-primary-hover);
}/* ════════════════════════════════════════════════════════════════════════
   Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): chips + arc-accent
   ════════════════════════════════════════════════════════════════════════ *//* steden als witte pill-chips; wrap-layout i.p.v. kolommen */.bc-cm .bc-service-area:not(.bc-service-area--grid) .bc-service-area__list{
  -moz-columns:auto;
       columns:auto;display:flex;flex-wrap:wrap;gap:12px;
}.bc-cm .bc-service-area:not(.bc-service-area--grid) .bc-service-area__item{
  padding:11px 22px;border:1px solid rgba(36,36,34,.12);border-radius:9999px;background:#fff;
  box-shadow:0 1px 2px rgba(36,36,34,.04),0 8px 22px rgba(36,36,34,.06);
  font-size:1rem;font-weight:600;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease;
}.bc-cm .bc-service-area:not(.bc-service-area--grid) .bc-service-area__item::before{display:none}.bc-cm .bc-service-area:not(.bc-service-area--grid) .bc-service-area__name{color:var(--bc-text-medium)}.bc-cm .bc-service-area:not(.bc-service-area--grid) .bc-service-area__link{text-decoration:none}/* hover alleen op gelinkte chips: render zet bc-service-area__item--linked
   op items met een link (wire-vervanger van de :has() uit de preview) */.bc-cm .bc-service-area:not(.bc-service-area--grid) .bc-service-area__item--linked:hover{
  background:var(--bc-primary);border-color:var(--bc-primary);transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(238,116,55,.15),0 12px 28px rgba(238,116,55,.28);
}.bc-cm .bc-service-area:not(.bc-service-area--grid) .bc-service-area__item--linked:hover .bc-service-area__link{
  color:var(--bc-white);
}/* regio-grid: orange-arc hoek-accent op de witte kaart (deelt de ::before
   basis met content:"" + position:absolute hierboven) */.bc-cm .bc-service-area--grid .bc-service-area__item::before{
  top:-16px;right:-16px;left:auto;width:58px;height:58px;border-radius:0;
  background:url("https://www.barcompany.nl/wp-content/uploads/2021/07/svg-orange.svg") no-repeat center/contain;
  opacity:.32;transform:rotate(-14deg);
}/* ════════════════════════════════════════════════════════════════════════
   Responsive
   ════════════════════════════════════════════════════════════════════════ */@media (max-width: 768px) {
  .bc-cm .bc-service-area {
    margin: 40px auto;
    padding: 0 20px;
  }
  .bc-cm .bc-service-area__heading {
    font-size: 1.375rem; /* 22px */
    margin-bottom: 22px;
  }
  /* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): chips wrappen zelf; de oude
     kolom-overrides (columns:2 / columns:1) zijn met de lijst-look vervallen. */
  .bc-cm .bc-service-area--grid .bc-service-area__list {
    grid-template-columns: 1fr;
  }
}/* ── Reduced-motion failsafe ── */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-service-area {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .bc-cm .bc-service-area--grid .bc-service-area__item {
    transition: none;
  }
}/* === authors — E-E-A-T author attribution === *//* bc-author-byline — E-E-A-T author attribution as a proper CARD (FB-05 elevation).
 * Was a bare flush-left flex row (no container, no shadow) that "floated" next to
 * the other blocks. Now a designed card: white surface + soft tint-shadow, a BC
 * orange-arc swoosh popping from the top-right corner (same asset as
 * related-pages), photo (or neutral initials-avatar) left, meta right, and a
 * "Meer over <voornaam>" team-page link when a url exists.
 *
 * Tokens reused verbatim from callout/reviews (no invented colors/fonts/sizes).
 * 1 variant: default.
 *//* Outer section: page gutter + content container + scroll-reveal (BCReveal). */.bc-cm .bc-author-byline {
  max-width: 760px;
  margin: 40px auto;
  padding: 0 var(--bc-gutter);
  font-family: var(--bc-font-body);
  /* scroll-reveal (shared BCReveal IIFE via data-bc-reveal) */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}.bc-cm .bc-author-byline.bc-visible {
  opacity: 1;
  transform: none;
}/* Inner card: the visible surface. overflow stays visible so the swoosh pops out
   of the corner. */.bc-cm .bc-author-byline__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  background: #fff; /* echt wit, niet paginawit: kaart moet loskomen van de page-bg (Bram-fb 2026-07-03) */
  border-radius: 8px;
  padding: 22px 26px;
  box-shadow: 0 1px 2px rgba(36, 36, 34, 0.04), 0 14px 40px rgba(36, 36, 34, 0.07);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}.bc-cm .bc-author-byline__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(36, 36, 34, 0.05), 0 22px 50px rgba(36, 36, 34, 0.10);
}/* BC orange-arc swoosh popping from the top-right corner (same SVG as
   related-pages). Decorative: sits above the card with its own drop-shadow. */.bc-cm .bc-author-byline__card::after {
  content: "";
  position: absolute;
  top: -24px;
  right: -18px;
  width: 124px;
  height: 58px;
  background: url("https://www.barcompany.nl/wp-content/uploads/2021/07/svg-orange.svg") no-repeat center / contain;
  transform: rotate(-15deg);
  filter: drop-shadow(0 6px 12px rgba(36, 36, 34, 0.20));
  pointer-events: none;
  z-index: 1;
}/* Photo wrapper: 60px round, holds either an <img> or the initials-avatar */.bc-cm .bc-author-byline__photo {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bc-cream);
}.bc-cm .bc-author-byline__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  /* Bias the crop to the face: the team headshots are tall portraits, so a
     centered crop cuts the head off. 50% 20% keeps the face in the circle.
     (FB-05; see project_author_photo_swap for the photo-set spec.) */
  -o-object-position: 50% 20%;
     object-position: 50% 20%;
  display: block;
}/* Neutral initials-avatar (no-photo degrade): cream circle + orange initials */.bc-cm .bc-author-byline__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--bc-font-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--bc-primary);
  letter-spacing: 0.02em;
}/* Text column */.bc-cm .bc-author-byline__meta {
  min-width: 0;
}.bc-cm .bc-author-byline__label {
  display: block;
  font-family: var(--bc-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bc-text-muted);
  line-height: 1;
  margin: 0 0 5px;
}.bc-cm .bc-author-byline__name {
  display: block;
  font-family: var(--bc-font-heading);
  font-size: 16px;
  font-weight: 800;
  color: var(--bc-text);
  line-height: 1.25;
  margin: 0;
}.bc-cm .bc-author-byline__role {
  display: block;
  font-family: var(--bc-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--bc-text-medium);
  line-height: 1.35;
  margin: 3px 0 0;
}.bc-cm .bc-author-byline__bio {
  font-family: var(--bc-font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--bc-text-light);
  line-height: 1.55;
  margin: 9px 0 0;
}/* "Meer over <voornaam>" team-page link: orange, arrow grows + swaps to teal on
   hover (BC bicolor interaction). */.bc-cm .bc-author-byline__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
  font-family: var(--bc-font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--bc-primary);
  text-decoration: none;
  transition: gap 0.3s ease, color 0.2s ease;
}.bc-cm .bc-author-byline__more::after {
  content: "\2192";
  font-size: 16px;
}.bc-cm .bc-author-byline__more:hover,
.bc-cm .bc-author-byline__more:focus {
  gap: 11px;
  color: var(--bc-primary-hover);
}/* Mobile: stack photo on top, swoosh shrinks so it does not crowd the corner */@media (max-width: 600px) {
  .bc-cm .bc-author-byline__card {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .bc-cm .bc-author-byline__card::after {
    width: 96px;
    height: 45px;
    top: -18px;
    right: -8px;
  }
}/* Reduced-motion failsafe (also covered globally by base/reveal.css) */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-author-byline {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .bc-cm .bc-author-byline__card {
    transition: none;
  }
}/* Inline body links (bare <a> from the content pipeline) — brand-orange,
   consistent with text-image/article/prose (Wessel FB 2026-06-22). */.bc-cm .bc-author-byline__bio a:not(.bc-btn) {
  color: var(--bc-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}.bc-cm .bc-author-byline__bio a:not(.bc-btn):hover {
  color: var(--bc-primary-hover);
}/* ════════════════════════════════════════════════════════════════════════
   Variant: figure (FB-05) — cut-out portrait standing on a BC orange-arc.
   Requires a transparent cut-out photo (author.photoCutout in the roster);
   the mapper emits variant 'figure' only then. Reuses the card + corner-swoosh
   and adds a left figure-strip: the swoosh sits behind, the cut-out crops to
   the card bottom (overflow hidden on the strip).
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-author-byline--figure .bc-author-byline__card {
  min-height: 156px;
}.bc-cm .bc-author-byline__figure {
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 138px;
  overflow: hidden;
  border-radius: 8px 0 0 8px;
  pointer-events: none;
}.bc-cm .bc-author-byline__swoosh {
  position: absolute;
  left: 50%;
  bottom: 11px;
  transform: translateX(-50%) rotate(-6deg);
  width: 144px;
  height: 71px;
  background: url("https://www.barcompany.nl/wp-content/uploads/2021/07/svg-orange.svg") no-repeat center / contain;
  z-index: 1;
}.bc-cm .bc-author-byline__cutout {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 168px;
  width: auto;
  z-index: 2;
  display: block;
}.bc-cm .bc-author-byline--figure .bc-author-byline__meta {
  margin-left: 150px;
}@media (max-width: 600px) {
  .bc-cm .bc-author-byline--figure .bc-author-byline__card { min-height: 142px; }
  .bc-cm .bc-author-byline__figure { width: 112px; }
  .bc-cm .bc-author-byline__swoosh { width: 120px; height: 60px; }
  .bc-cm .bc-author-byline__cutout { height: 150px; }
  .bc-cm .bc-author-byline--figure .bc-author-byline__meta { margin-left: 120px; }
}/* === persoon — editorial author-profile blocks === *//* bc-author-hero v3 — "Kinetic Cinematic" editorial author-profile hero for a
 * 'persoon' page. Distinct from the money bc-hero (no breadcrumb / CTA / 3-layer
 * LCP comp). 1 variant: default. Scoped under .bc-cm (Phase 9 convention).
 *
 * Composition (back -> front):
 *   z0  solid first-name watermark (cream) + a big BC swoosh arc BEHIND the figure
 *   z2  visual column: transparent cut-out portrait standing on the swoosh
 *   z3  text column: role kicker, XL serif name, tagline, direct-contact line
 *   z4  outline first-name watermark + BC patch seal over the figure
 *
 * Scroll watermark (Bram FB): the giant first name drifts RIGHT on scroll; the
 * solid cream copy fades out and the ORANGE OUTLINE copy fades in over the
 * portrait, so you "see the outlined name scroll through the photo". Driven by
 * --p from the scroll-progress helper ([data-bc-scroll]).
 *
 * Degrade: no photo -> initials monogram; no-JS / pre-init -> --p:1 keeps the
 * watermark static + legible. Swoosh + patch are real BC brand assets, decorative
 * (aria-hidden + pointer-events:none); a failed load leaves no gap.
 *//* ── persoon editorial type-contrast (shared) ──
 * Money + blog headings are Mulish (sans) globally (--bc-font-heading, iteration-3
 * Bram FB 2026-06-15: serif-everywhere reads as an AI-tell). The persoon page is the
 * deliberate exception: an editorial "kinetic cinematic" profile where the display
 * type (name, big numbers, quote, section headings) is Merriweather (serif) to read
 * as a magazine portrait. We do NOT touch the global --bc-font-heading token
 * (money/blog depend on it). Instead we define a SCOPED --bc-font-display ON the
 * persoon block roots, and point only the editorial elements at var(--bc-font-display).
 * Body copy on these blocks stays Mulish via var(--bc-font-body).
 */.bc-cm .bc-author-hero,
.bc-cm .bc-person-stats,
.bc-cm .bc-author-expertise,
.bc-cm .bc-signature-quote,
.bc-cm .bc-journey-timeline,
.bc-cm .bc-author-articles {
  --bc-font-display: 'Merriweather', Georgia, serif;
}.bc-cm .bc-author-hero {
  position: relative;
  overflow: hidden; /* clips the watermark as it drifts off the right edge */
  background: var(--bc-white);
  /* no bottom padding: the cut-out figure runs down into the next section (Bram FB) */
  padding: 96px 0 0;
  /* no-JS / pre-init fallback for the scroll-progress helper: assume fully shown */
  --p: 1;
  /* scroll-reveal (shared BCReveal IIFE via data-bc-reveal) */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}.bc-cm .bc-author-hero.bc-visible {
  opacity: 1;
  transform: none;
}.bc-cm .bc-author-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;
  align-items: center;
}/* ── Oversized first-name watermark — two layers driven by --p ──
 * Both copies share the same place + drift right by --p. The solid (cream) copy
 * fades OUT as the page scrolls; the outline (orange stroke) copy fades IN over
 * the portrait. At rest (--p:1 no-JS, or --p≈0.5 at load) the solid copy shows. */.bc-cm .bc-author-hero__watermark {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: -2%;
  font-family: var(--bc-font-display); /* editorial serif (Merriweather) */
  font-size: 18vw;
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: var(--bc-cream);
  white-space: nowrap;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  /* drift right as you scroll past the hero (centred at load, then travels) */
  transform: translateY(-52%) translateX(calc((var(--p) - 0.5) * 55vw));
  will-change: transform, opacity;
}/* solid copy: fully shown at rest, fades out by --p ~0.8 */.bc-cm .bc-author-hero__watermark:not(.bc-author-hero__watermark--outline) {
  opacity: clamp(0, calc((0.8 - var(--p)) / 0.3), 1);
}/* outline copy: hidden at rest, fades in OVER the portrait but BEHIND the name.
 * z-index 3 == the text column; since the watermark precedes .bc-author-hero__text
 * in the DOM, the black name paints on top of it, while it still sits above the
 * visual column (z2) so it reads as scrolling through the photo (Bram FB). */.bc-cm .bc-author-hero__watermark--outline {
  z-index: 3;
  color: transparent;
  -webkit-text-stroke: 2px var(--bc-primary);
  opacity: clamp(0, calc((var(--p) - 0.5) / 0.3), 1);
}/* ── Text column — above the visual ── */.bc-cm .bc-author-hero__text {
  position: relative;
  z-index: 3;
  /* directional reveal: slide in from the left, settle on .bc-visible */
  transform: translateX(-28px);
  opacity: 0;
  transition: opacity 0.7s ease 0.05s, transform 0.7s ease 0.05s;
}/* Fase 2 stap 2 knop 4 (Bram-gelockt 2026-07-03): byline-arc familie-accent
   op de tekst-kolom (zelfde SVG + schaduw-taal als author-byline corner). */.bc-cm .bc-author-hero__text::after {
  content: "";
  position: absolute;
  top: -30px;
  right: -8px;
  width: 124px;
  height: 58px;
  background: url("https://www.barcompany.nl/wp-content/uploads/2021/07/svg-orange.svg") no-repeat center / contain;
  transform: rotate(-15deg);
  filter: drop-shadow(0 6px 12px rgba(36, 36, 34, 0.20));
  pointer-events: none;
  z-index: 1;
}.bc-cm .bc-author-hero.bc-visible .bc-author-hero__text {
  transform: none;
  opacity: 1;
}.bc-cm .bc-author-hero__role {
  font-family: var(--bc-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--bc-primary);
  margin: 0 0 20px;
}.bc-cm .bc-author-hero__name {
  font-family: var(--bc-font-display); /* editorial serif (Merriweather) masthead */
  font-size: clamp(3.2rem, 2rem + 7vw, 8.5rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--bc-text);
  margin: 0;
  position: relative;
}.bc-cm .bc-author-hero__tagline {
  font-family: var(--bc-font-body);
  font-size: 20px;
  line-height: 1.7;
  color: var(--bc-text-light);
  margin: 28px 0 0;
  max-width: 22em;
}/* ── Direct-contact line (phone / email) ── */.bc-cm .bc-author-hero__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  margin: 22px 0 0;
  font-family: var(--bc-font-body);
  font-size: 15px;
  color: var(--bc-text-light);
}.bc-cm .bc-author-hero__contact-label {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: var(--bc-primary);
  margin-right: 10px;
}.bc-cm .bc-author-hero__contact-link {
  color: var(--bc-text);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}.bc-cm .bc-author-hero__contact-link:hover,
.bc-cm .bc-author-hero__contact-link:focus {
  color: var(--bc-primary-hover); /* orange -> teal swap (BC hover-semantiek) */
}.bc-cm .bc-author-hero__contact-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bc-text-muted);
  margin: 0 12px;
}/* ── Visual column — transparent cut-out standing on a swoosh arc ── */.bc-cm .bc-author-hero__visual {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  /* directional reveal: scale up from a touch smaller */
  transform: scale(0.94);
  opacity: 0;
  transition: opacity 0.7s ease 0.1s, transform 0.7s ease 0.1s;
}.bc-cm .bc-author-hero.bc-visible .bc-author-hero__visual {
  transform: none;
  opacity: 1;
}/* big BC swoosh arc behind the figure's lower body (real brand asset) */.bc-cm .bc-author-hero__swoosh-behind {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 2%;
  width: 122%;
  height: auto;
  transform: translateX(-50%);
  opacity: 0.95;
  pointer-events: none;
}/* the transparent cut-out: free figure, no frame, no duotone */.bc-cm .bc-author-hero__cutout {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center bottom;
     object-position: center bottom;
  filter: drop-shadow(0 22px 32px rgba(36, 36, 34, 0.22));
}/* No-photo degrade: large initials monogram circle (orange ring + serif glyph). */.bc-cm .bc-author-hero__monogram {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}.bc-cm .bc-author-hero__monogram span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(78%, 320px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--bc-cream);
  border: 4px solid var(--bc-primary);
  font-family: var(--bc-font-display); /* editorial serif (Merriweather) initials */
  font-size: clamp(3rem, 1.5rem + 6vw, 7rem);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--bc-primary);
  box-shadow: 0 24px 60px rgba(36, 36, 34, 0.14);
}/* ── BC patch seal (real "In Good Company" badge SVG) over the figure base ── */.bc-cm .bc-author-hero__patch {
  position: absolute;
  z-index: 3;
  bottom: 2%;
  left: -4%;
  width: clamp(120px, 11vw, 168px);
  height: auto;
  transform: rotate(-8deg);
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgba(36, 36, 34, 0.28));
}/* ── Mobile: stacks, text first then figure, no overlap ── */@media (max-width: 768px) {
  .bc-cm .bc-author-hero {
    padding: 56px 0 0;
  }
  .bc-cm .bc-author-hero-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .bc-cm .bc-author-hero__text::after {
    width: 88px;
    height: 42px;
    top: -18px;
    right: 0;
  }
  /* watermark crowds the small-screen stack — pull it small + faint, no drift */
  .bc-cm .bc-author-hero__watermark {
    font-size: 30vw;
    top: 2%;
    transform: translateY(0);
  }
  .bc-cm .bc-author-hero__watermark--outline {
    display: none; /* one watermark on mobile (the solid) keeps the stack calm */
  }
  .bc-cm .bc-author-hero__name {
    font-size: clamp(2.6rem, 1.6rem + 8vw, 4rem);
    line-height: 1.0;
  }
  .bc-cm .bc-author-hero__tagline {
    font-size: 17px;
    margin-top: 22px;
  }
  .bc-cm .bc-author-hero__visual {
    max-width: 320px;
    transform: none;
  }
  .bc-cm .bc-author-hero__text {
    transform: none;
  }
}/* ── Reduced-motion: no watermark drift; solid copy static + visible ── */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-author-hero__watermark {
    transform: translateY(-52%);
  }
  .bc-cm .bc-author-hero__watermark--outline {
    display: none;
  }
}/* bc-person-stats — editorial big-number strip for a 'persoon' page.
 * Serif numbers with muted lowercase labels, open strip on page-white.
 * Distinct from the money bc-stats block (no count-up, no card-grid,
 * not the HR-02 BC-feiten contract). 1 variant: default.
 * Scoped under .bc-cm (Phase 9 convention).
 *
 * Fase 2 FB-ronde A (Bram-gelockt 2026-07-03), open strip: uitlijnings-fix
 * ("geen uitlijning" fb) via een strakke 4-koloms grid ZONDER kaart op
 * paginawit; rustiger cijfer-clamp met tabular-nums, oranje streepje onder
 * het cijfer weg, lowercase gedempte labels. Mobiel netjes 2x2.
 */.bc-cm .bc-person-stats {
  padding: 56px 0;
  /* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): open strip op paginawit. */
  background:var(--bc-white);
  /* scroll-reveal (shared BCReveal IIFE via data-bc-reveal) */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}.bc-cm .bc-person-stats.bc-visible {
  opacity: 1;
  transform: none;
}.bc-cm .bc-person-stats-inner {
  position: relative; /* anchors the decorative swoosh accent */
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}/* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): strakke 4-koloms grid met
   gelijke kolommen, geen witte kaart meer (open strip). */.bc-cm .bc-person-stats__items {
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  background:transparent;border-radius:0;box-shadow:none;padding:16px 0;
}.bc-cm .bc-person-stats__item {
  position: relative;
  padding:0 26px;min-width:0;
  text-align: center;
  /* clean centred numbers: vertical dividers + a left-to-right staggered reveal.
     No ghost-digit, no baseline offset (kept calm per Bram FB). */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}.bc-cm .bc-person-stats__item:not(:last-child) {
  border-right: 1px solid rgba(36, 36, 34, 0.12);
}/* stagger the reveal so the numbers tick in left-to-right */.bc-cm .bc-person-stats.bc-visible .bc-person-stats__item {
  opacity: 1;
  transform: none;
}.bc-cm .bc-person-stats.bc-visible .bc-person-stats__item:nth-child(2) { transition-delay: 0.08s; }.bc-cm .bc-person-stats.bc-visible .bc-person-stats__item:nth-child(3) { transition-delay: 0.16s; }.bc-cm .bc-person-stats.bc-visible .bc-person-stats__item:nth-child(4) { transition-delay: 0.24s; }.bc-cm .bc-person-stats.bc-visible .bc-person-stats__item:nth-child(n+5) { transition-delay: 0.32s; }/* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): rustiger cijfer-clamp met
   tabular-nums; het oranje streepje onder het cijfer is weg. */.bc-cm .bc-person-stats__value {
  position: relative;
  z-index: 1;
  display: block;
  font-family:'Merriweather', Georgia, serif; /* editorial serif big numbers */
  font-size:clamp(2.4rem, 1.8rem + 2vw, 3.4rem);
  font-variant-numeric:tabular-nums;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bc-primary);
}.bc-cm .bc-person-stats__value::after{display:none}/* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): lowercase gedempte labels
   (inline-strip-taal). */.bc-cm .bc-person-stats__label {
  position: relative;
  z-index: 1;
  margin:12px 0 0;
  font-family: var(--bc-font-body);
  font-size:14px;
  font-weight:400;
  text-transform:lowercase;
  letter-spacing:.3px;
  color:var(--bc-text-muted);
  line-height: 1.4;
}/* Reduced-motion failsafe: per-item reveal must not hide content if the shared
   BCReveal IIFE never fires. */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-person-stats__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}@media (max-width: 768px) {
  .bc-cm .bc-person-stats {
    padding: 44px 0;
  }
  /* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): mobiel netjes 2x2. */
  .bc-cm .bc-person-stats__items{grid-template-columns:1fr 1fr;gap:32px 0}
  .bc-cm .bc-person-stats__item{padding:0 18px}
  /* dividers only between columns; the right-edge item per row has none */
  .bc-cm .bc-person-stats__item:nth-child(even) {
    border-right: none;
  }
}/* bc-author-expertise — editorial "waar <iemand> in uitblinkt" panel for a
 * 'persoon' page (Kinetic Cinematic). Serif heading + the expertise items as a
 * STACKED list of orange-accented chips that alternate left/right and fall into
 * view on scroll (data-bc-reveal per chip, staggered). No marquee (Bram FB).
 * 1 variant: default. Scoped under .bc-cm (Phase 9 convention).
 */.bc-cm .bc-author-expertise {
  padding: 56px 0;
  background: var(--bc-cream);
  /* scroll-reveal (shared BCReveal IIFE via data-bc-reveal) */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}.bc-cm .bc-author-expertise.bc-visible {
  opacity: 1;
  transform: none;
}.bc-cm .bc-author-expertise-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}.bc-cm .bc-author-expertise__heading {
  font-family: var(--bc-font-display); /* editorial serif (Merriweather) */
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bc-text);
  margin: 0 0 40px;
}/* ── Stacked chips that fall into view, alternating left/right ── */.bc-cm .bc-author-expertise__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}.bc-cm .bc-author-expertise__item {
  position: relative;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 16px 28px 16px 54px;
  border-radius: 999px;
  background: var(--bc-white);
  border: 1px solid rgba(238, 116, 55, 0.25);
  font-family: var(--bc-font-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--bc-text);
  box-shadow: 0 8px 22px rgba(36, 36, 34, 0.07);
  /* fall in: drop from above with a slight tilt, settle on reveal */
  opacity: 0;
  transform: translateY(-22px) rotate(-3deg);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}/* alternate: even chips hug the right edge + tilt the other way */.bc-cm .bc-author-expertise__item:nth-child(even) {
  align-self: flex-end;
  transform: translateY(-22px) rotate(3deg);
}/* settled (BCReveal adds .bc-visible per chip as it enters the viewport) */.bc-cm .bc-author-expertise__item.bc-visible {
  opacity: 1;
  transform: translateY(0) rotate(-1.2deg);
}.bc-cm .bc-author-expertise__item:nth-child(even).bc-visible {
  transform: translateY(0) rotate(1.2deg);
}/* small extra stagger when several enter together */.bc-cm .bc-author-expertise__item:nth-child(2).bc-visible { transition-delay: 0.06s; }.bc-cm .bc-author-expertise__item:nth-child(3).bc-visible { transition-delay: 0.12s; }.bc-cm .bc-author-expertise__item:nth-child(4).bc-visible { transition-delay: 0.18s; }.bc-cm .bc-author-expertise__item:nth-child(n+5).bc-visible { transition-delay: 0.24s; }/* BC-orange round check marker */.bc-cm .bc-author-expertise__item::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--bc-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.1l2.2 2.2 4.6-5' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}/* Links inside expertise items: orange, hover swaps to BC teal */.bc-cm .bc-author-expertise__item a {
  color: var(--bc-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}.bc-cm .bc-author-expertise__item a:hover,
.bc-cm .bc-author-expertise__item a:focus {
  color: var(--bc-primary-hover);
  text-decoration: underline;
}/* Reduced-motion failsafe: chips sit static + straight (no drop, no tilt) */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-author-expertise__item,
  .bc-cm .bc-author-expertise__item:nth-child(even),
  .bc-cm .bc-author-expertise__item.bc-visible,
  .bc-cm .bc-author-expertise__item:nth-child(even).bc-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}@media (max-width: 768px) {
  .bc-cm .bc-author-expertise {
    padding: 48px 0;
  }
  .bc-cm .bc-author-expertise__heading {
    margin-bottom: 28px;
  }
  .bc-cm .bc-author-expertise__item {
    font-size: 15px;
    padding: 13px 20px 13px 46px;
  }
}/* bc-signature-quote — editorial licht statement voor de persoon-page.
 * Full-bleed band op paginawit met de quote in oranje serif (Merriweather),
 * het grote quote-teken als zachte oranje ghost erachter, en een orange-arc
 * als byline-accent boven de attributie.
 * 1 variant: default. Scoped under .bc-cm (Phase 9 convention).
 *
 * Fase 2 FB-ronde A (Bram-gelockt 2026-07-03), licht: het schreeuwerige
 * vol-oranje vlak is weg ("echt lelijk" fb). Patch uit (te hard op licht;
 * het element wordt nog gerenderd, CSS verbergt het).
 */.bc-cm .bc-signature-quote {
  position: relative;
  overflow: hidden; /* clips the oversized glyph */
  /* full-bleed band: span the viewport regardless of parent column */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): paginawit i.p.v. vol-oranje. */
  background:var(--bc-white);padding:76px 0;
  /* scroll-reveal (shared BCReveal IIFE via data-bc-reveal) */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}.bc-cm .bc-signature-quote.bc-visible {
  opacity: 1;
  transform: none;
}.bc-cm .bc-signature-quote-inner {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
  text-align: center;
}/* Oversized faded opening-quote graphic shape, sitting BEHIND the statement
   (decorative, not an alert).
   Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): zachte oranje ghost op licht. */.bc-cm .bc-signature-quote-inner::before {
  content: "\201C"; /* left double quotation mark */
  position: absolute;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--bc-font-display); /* editorial serif (Merriweather) glyph */
  font-weight: 900;
  line-height: 0.7;
  pointer-events: none;
  color:rgba(238,116,55,.14);font-size:11rem;top:-0.3em;
}/* The statement: oversized serif in brand-oranje op licht.
   Fase 2 FB-ronde A (Bram-gelockt 2026-07-03). */.bc-cm .bc-signature-quote__quote {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  color:var(--bc-primary);font-family:'Merriweather', Georgia, serif;
  font-size:clamp(1.8rem, 1.3rem + 2.6vw, 3rem);line-height:1.32;
}/* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): het losse sluit-glyph is weg
   (de ghost draagt het quote-gebaar alleen). */.bc-cm .bc-signature-quote-inner::after{display:none}/* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): patch uit op de lichte variant
   (te hard op licht); render emit het element nog, CSS verbergt het. */.bc-cm .bc-signature-quote__patch{display:none}/* Inline markdown inside the statement stays on-brand. */.bc-cm .bc-signature-quote__quote strong {
  font-weight: 900;
}.bc-cm .bc-signature-quote__quote em {
  font-style: italic;
}/* Links in de oranje quote op licht: cream had hier geen contrast meer.
   Fase 2 FB-ronde A wire-consequentie (geen aparte preview-knop): oranje
   erft mee met de quote, underline-gebaar blijft. */.bc-cm .bc-signature-quote__quote a {
  color: var(--bc-primary);
  text-decoration: none;
  border-bottom: 2px solid rgba(238, 116, 55, 0.5);
  transition: border-color 0.2s ease;
}.bc-cm .bc-signature-quote__quote a:hover,
.bc-cm .bc-signature-quote__quote a:focus {
  border-bottom-color: var(--bc-primary);
}/* Attribution: gedempte small caps met een orange-arc als byline-accent
   erboven. Fase 2 FB-ronde A (Bram-gelockt 2026-07-03). */.bc-cm .bc-signature-quote__attribution {
  position: relative;
  z-index: 1;
  font-family: var(--bc-font-body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.4;
  color:var(--bc-text-medium);margin-top:24px;
}.bc-cm .bc-signature-quote__attribution::before{
  content:"";display:block;width:46px;height:26px;margin:0 auto 12px;
  background:url("https://www.barcompany.nl/wp-content/uploads/2021/07/svg-orange.svg") no-repeat center/contain;
}@media (max-width: 768px) {
  .bc-cm .bc-signature-quote {
    padding: 64px 0;
  }
  /* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): de ghost blijft 11rem op
     elke breedte (netto uit de preview); de oude mobiele downscales hoorden
     bij het vervangen oranje vlak. */
}/* bc-journey-timeline — editorial "about this team member" section for a
 * 'persoon' page (Kinetic Cinematic). Asymmetric 2-col on desktop: a serif
 * heading STICKY in the left column while the story PROSE sits in the wider
 * right column. Reads as a short about-paragraph set (bold serif lead-in + body
 * sentence), not a dated timeline (Bram FB 2026-06-18). Single column on mobile.
 * 1 variant: default. Scoped under .bc-cm (Phase 9 convention).
 */.bc-cm .bc-journey-timeline {
  padding: 64px 0;
  background: var(--bc-white); /* was cream; Bram-fb 2026-07-03: "Het verhaal" hoort op BC-wit */
  /* scroll-reveal (shared BCReveal IIFE via data-bc-reveal) */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}.bc-cm .bc-journey-timeline.bc-visible {
  opacity: 1;
  transform: none;
}.bc-cm .bc-journey-timeline-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
  /* asymmetric 2-col: narrow sticky heading rail + wider prose column */
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 56px;
  align-items: start;
}/* sticky heading column: parks the title while the prose scrolls past it */.bc-cm .bc-journey-timeline__head {
  position: sticky;
  top: 120px;
}.bc-cm .bc-journey-timeline__heading {
  font-family: var(--bc-font-display); /* editorial serif (Merriweather) */
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.2rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--bc-text);
  margin: 0;
}/* ── Story prose (right column) ── */.bc-cm .bc-journey-timeline__prose {
  margin: 0;
  max-width: 60ch;
}.bc-cm .bc-journey-timeline__para {
  margin: 0 0 22px;
  font-family: var(--bc-font-body);
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.2rem);
  line-height: 1.75;
  color: var(--bc-text-light);
  /* per-paragraph staggered reveal */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}.bc-cm .bc-journey-timeline__para:last-child {
  margin-bottom: 0;
}.bc-cm .bc-journey-timeline__para.bc-visible {
  opacity: 1;
  transform: none;
}.bc-cm .bc-journey-timeline__para:nth-child(2).bc-visible { transition-delay: 0.08s; }.bc-cm .bc-journey-timeline__para:nth-child(3).bc-visible { transition-delay: 0.16s; }.bc-cm .bc-journey-timeline__para:nth-child(n+4).bc-visible { transition-delay: 0.24s; }/* bold serif lead-in (the step title) opening each about-paragraph */.bc-cm .bc-journey-timeline__lead {
  font-family: var(--bc-font-display); /* editorial serif (Merriweather) */
  font-weight: 800;
  color: var(--bc-text);
}/* links inside the prose (orange -> teal swap = BC hover-semantiek) */.bc-cm .bc-journey-timeline__para a {
  color: var(--bc-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}.bc-cm .bc-journey-timeline__para a:hover,
.bc-cm .bc-journey-timeline__para a:focus {
  color: var(--bc-primary-hover);
}@media (max-width: 768px) {
  .bc-cm .bc-journey-timeline {
    padding: 56px 0;
  }
  /* back to a single column: heading on top, prose below (no sticky) */
  .bc-cm .bc-journey-timeline-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .bc-cm .bc-journey-timeline__head {
    position: static;
  }
  .bc-cm .bc-journey-timeline__para {
    font-size: 1.0625rem;
  }
}/* Reduced-motion failsafe: per-paragraph reveal must not hide content if the
   shared BCReveal IIFE never fires. */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-journey-timeline__para {
    opacity: 1;
    transform: none;
    transition: none;
  }
}/* bc-author-articles — "Artikelen van <naam>" card grid for a 'persoon' page.
 * Heading + responsive card grid (3-up desktop, 2-up tablet, 1-up mobile) of
 * article cards: optional cover image, linked title (orange -> teal hover),
 * optional muted clamped excerpt. Distinct from bc-related-pages.
 * 1 variant: default. Scoped under .bc-cm (Phase 9 convention).
 */.bc-cm .bc-author-articles {
  padding: 64px 0;
  background: var(--bc-white);
  /* scroll-reveal (shared BCReveal IIFE via data-bc-reveal) */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}.bc-cm .bc-author-articles.bc-visible {
  opacity: 1;
  transform: none;
}.bc-cm .bc-author-articles-inner {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}/* Big decorative BC swoosh above the section heading (background image, no extra
   markup). A failed load just shows nothing — no gap, no broken layout. */.bc-cm .bc-author-articles-inner::before {
  content: "";
  display: block;
  width: clamp(320px, 34vw, 520px);
  height: 74px;
  margin: 0 0 14px -6px;
  background: url("https://www.barcompany.nl/wp-content/uploads/2026/06/swoosh-orange-small-gradient.png") left center / contain no-repeat;
  opacity: 0.95;
  pointer-events: none;
}.bc-cm .bc-author-articles__heading {
  font-family: var(--bc-font-display); /* editorial serif (Merriweather) */
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bc-text);
  margin: 0 0 40px;
}.bc-cm .bc-author-articles__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}.bc-cm .bc-author-articles__item {
  display: flex;
  /* per-card staggered scroll-reveal */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}.bc-cm .bc-author-articles.bc-visible .bc-author-articles__item {
  opacity: 1;
  transform: none;
}.bc-cm .bc-author-articles.bc-visible .bc-author-articles__item:nth-child(2) { transition-delay: 0.08s; }.bc-cm .bc-author-articles.bc-visible .bc-author-articles__item:nth-child(3) { transition-delay: 0.16s; }.bc-cm .bc-author-articles.bc-visible .bc-author-articles__item:nth-child(n+4) { transition-delay: 0.24s; }.bc-cm .bc-author-articles__card {
  position: relative; /* anchors the stretched-link ::after (whole card clickable) */
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--bc-white);
  /* a real contained card surface (Bram: the old borderless hover looked unfinished) */
  border: 1px solid rgba(36, 36, 34, 0.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(36, 36, 34, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}.bc-cm .bc-author-articles__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(36, 36, 34, 0.14);
  border-color: rgba(238, 116, 55, 0.35);
}.bc-cm .bc-author-articles__image {
  overflow: hidden;
  aspect-ratio: 16 / 10;
}.bc-cm .bc-author-articles__image img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s ease;
}.bc-cm .bc-author-articles__card:hover .bc-author-articles__image img {
  transform: scale(1.05);
}.bc-cm .bc-author-articles__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* padding gives the card real interior space; pushes the CTA to the bottom */
  padding: 22px 24px 26px;
  flex: 1;
}.bc-cm .bc-author-articles__title {
  font-family: var(--bc-font-display); /* editorial serif (Merriweather) card heading */
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--bc-text);
  margin: 0;
}.bc-cm .bc-author-articles__link {
  color: var(--bc-text);
  text-decoration: none;
  transition: color 0.2s ease;
}/* stretched link: the title <a> covers the whole card so the entire card (image,
   excerpt, "Lees artikel") is clickable, with a single tab-stop (Bram FB). */.bc-cm .bc-author-articles__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}.bc-cm .bc-author-articles__link:hover,
.bc-cm .bc-author-articles__link:focus {
  color: var(--bc-primary-hover); /* orange -> teal swap (BC hover-semantiek) */
}.bc-cm .bc-author-articles__excerpt {
  font-family: var(--bc-font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--bc-text-light);
  margin: 0;
  /* clamp the teaser to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}/* small orange "Lees artikel" label with the BC orange->teal hover-swap. The
   card hover drives the colour swap + a small arrow nudge (decorative). */.bc-cm .bc-author-articles__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--bc-font-body);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--bc-primary);
  transition: color 0.2s ease;
}.bc-cm .bc-author-articles__more::after {
  content: "\2192"; /* rightwards arrow */
  transition: transform 0.2s ease;
}.bc-cm .bc-author-articles__card:hover .bc-author-articles__more {
  color: var(--bc-primary-hover); /* orange -> teal swap (BC hover-semantiek) */
}.bc-cm .bc-author-articles__card:hover .bc-author-articles__more::after {
  transform: translateX(4px);
}@media (max-width: 980px) {
  .bc-cm .bc-author-articles__items {
    grid-template-columns: repeat(2, 1fr);
  }
}@media (max-width: 600px) {
  .bc-cm .bc-author-articles {
    padding: 56px 0;
  }
  .bc-cm .bc-author-articles__heading {
    margin-bottom: 28px;
  }
  .bc-cm .bc-author-articles__items {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}/* Reduced-motion failsafe: per-card reveal must not hide content if the shared
   BCReveal IIFE never fires; drop the hover-lift + arrow-nudge motion too. */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-author-articles__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .bc-cm .bc-author-articles__card:hover {
    transform: none;
  }
  .bc-cm .bc-author-articles__card:hover .bc-author-articles__more::after {
    transform: none;
  }
}/* === persoon v2 — kinetic-cinematic editorial blocks === *//* bc-outline-text-image — editorial split statement for a 'persoon' page.
 * 1 variant: default. Scoped under .bc-cm (Phase 9 convention).
 *
 * Fase 2 FB-ronde A (Bram-gelockt 2026-07-03), split: de outline-look is weg
 * ("werkt niet, slecht leesbaar" fb). Editorial split met de foto als nette
 * kaart links en een gevulde donkere serif-kop rechts op cream, eyebrow in
 * het oranje script-accent (.bc-script taal). Sticky-scroll, scrim en swoosh
 * staan uit in deze compositie; de markup (incl. scrim/swoosh-elementen en
 * data-bc-scroll) is ongewijzigd voor byte-stabiliteit, CSS neutraliseert ze.
 *
 * Degrade: --p/--parallax defaults blijven staan voor de (uitgeschakelde)
 * scroll-helper; niets in deze compositie hangt nog aan JS.
 */.bc-cm .bc-outline-text-image {
  position: relative;
  background: var(--bc-cream); /* light backdrop blends with neighbours (no black void) */
  /* no-JS / pre-init fallback for the scroll-progress helper */
  --p: 1;
  --parallax: 0px;
  --bc-font-display: 'Merriweather', Georgia, serif;
  /* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): geen viewport-hoge stage meer. */
  min-height:0;padding:84px 0;
}/* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): 2-koloms editorial split. */.bc-cm .bc-outline-text-image-inner {
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
  max-width:1260px;margin:0 auto;padding:0 var(--bc-gutter);
}/* ── Foto als nette kaart links (was: sticky viewport-stage) ── */.bc-cm .bc-outline-text-image__media {
  position:static;height:auto;padding:0;display:block;
  width: 100%;
  box-sizing: border-box;
}.bc-cm .bc-outline-text-image__frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): kaart-maat + gelockte shadow-taal. */
  height:440px;max-width:none;border-radius:16px;
  box-shadow:0 1px 2px rgba(36,36,34,.04),0 22px 54px rgba(26,26,26,.14);
}.bc-cm .bc-outline-text-image__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
}/* scrim + swoosh horen bij de vervangen outline-compositie; de elementen
   worden nog gerenderd maar staan uit. */.bc-cm .bc-outline-text-image__scrim{display:none}.bc-cm .bc-outline-text-image__swoosh{display:none}/* ── Tekstkolom rechts (was: absolute overlay die over de foto reisde) ── */.bc-cm .bc-outline-text-image__text {
  display: flex;
  flex-direction: column;
  position:static;height:auto;transform:none;align-items:flex-start;justify-content:center;
  text-align:left;padding:0;pointer-events:auto;
}/* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): eyebrow in het oranje
   script-accent (.bc-script taal) i.p.v. uppercase kicker. */.bc-cm .bc-outline-text-image__eyebrow {
  display: block;
  color: var(--bc-primary);
  font-family:'Blakson Hustle','Damion',cursive;font-size:2.1rem;font-weight:400;
  text-transform:none;letter-spacing:.01em;line-height:.9;margin-bottom:16px;
}/* Fase 2 FB-ronde A (Bram-gelockt 2026-07-03): gevulde donkere serif-kop
   i.p.v. outlined glyphs (leesbaarheid). */.bc-cm .bc-outline-text-image__heading {
  font-family: var(--bc-font-display); /* editorial serif (Merriweather) */
  font-weight: 900;
  margin: 0;
  color:var(--bc-text);-webkit-text-stroke:0;text-shadow:none;
  font-size:clamp(1.9rem, 1.3rem + 2.4vw, 3.3rem);line-height:1.14;max-width:none;
  letter-spacing:-0.01em;
}/* ── Mobile: gestapelde split, compactere kaart ── */@media (max-width:768px){
  .bc-cm .bc-outline-text-image{min-height:0;padding:56px 0}
  .bc-cm .bc-outline-text-image-inner{grid-template-columns:1fr;gap:28px}
  .bc-cm .bc-outline-text-image__frame{height:300px}
}/* Inline body links (bare <a> from the content pipeline) — brand-orange,
   consistent with text-image/article/prose (Wessel FB 2026-06-22). */.bc-cm .bc-outline-text-image__text a:not(.bc-btn) {
  color: var(--bc-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}.bc-cm .bc-outline-text-image__text a:not(.bc-btn):hover {
  color: var(--bc-primary-hover);
}/* bc-polaroid-stack — polaroid-PRIKBORD voor een 'persoon' page.
 * Photos as POLAROIDS: wit papier (padding + soft shadow), nth-based rotatie,
 * handschrift-caption (Caveat). Desktop = overlappende prikbord-collage met
 * gemixte aspect-ratio's; mobiel 2x2 -> 1 kolom. Eén polaroid draagt een BC
 * patch sticker.
 *
 * FB-ronde C (E2, Bram-GO 2026-07-03), prikbord-upgrade:
 *   - echte CSS-punaises per polaroid (::before radial-gradient bolletje,
 *     ::after slagschaduw op het papier; kleuren oranje/groen/dark nth-based)
 *   - tape-variatie op nummer 3(n) via clip-path (vervangt de punaise)
 *   - val-binnen entrance via @keyframes (van boven + extra rotatie naar
 *     rust-rotatie, bounce) — bewust een ANIMATIE i.p.v. transition zodat de
 *     nth-based stagger-delay de hover niet vertraagt (de "nette route");
 *     punaise/tape popt NA de landing (transition-delay op de pseudo's)
 *   - hover = polaroid oppakken (recht + omhoog, diepere schaduw), de rest
 *     zakt subtiel weg (:has)
 *   - triggering blijft de bestaande data-bc-reveal/.bc-visible infra
 *     (BCReveal), netto-0 nieuwe JS
 * 1 variant: default. Scoped under .bc-cm (Phase 9 convention).
 */.bc-cm .bc-polaroid-stack {
  padding: 88px 0 96px;
  background: var(--bc-cream);
  /* clip horizontally (no page scroll from the rotated scatter) but allow a
     generous bleed so the val-animatie (-52px) en hover-lift buiten de rand
     kunnen bewegen zonder afgekapt te worden */
  overflow: clip;
  overflow-clip-margin: 140px;
  /* scroll-reveal (shared BCReveal IIFE via data-bc-reveal) */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  --bc-font-display: 'Merriweather', Georgia, serif;
}.bc-cm .bc-polaroid-stack.bc-visible {
  opacity: 1;
  transform: none;
}.bc-cm .bc-polaroid-stack-inner {
  /* FB-ronde C: 980 -> 1060 zodat de concept-collage (4 polaroids, samen
     ~960px met overlap) op desktop niet hoeft te wrappen */
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}.bc-cm .bc-polaroid-stack__heading {
  font-family: var(--bc-font-display); /* editorial serif (Merriweather) */
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bc-text);
  margin: 0 0 52px;
}/* ── Desktop: overlappend prikbord ── */.bc-cm .bc-polaroid-stack__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 8px 0;
}/* ── A single polaroid ── */.bc-cm .bc-polaroid-stack__item {
  position: relative;
  margin: 0;
  width: clamp(180px, 22vw, 260px);
  /* rust-transform; de val-binnen entrance komt uit @keyframes bc-pol-fall.
     De transition (ZONDER delay) is er puur voor de hover — losgekoppeld van
     de gestaggerde entrance. */
  opacity: 0;
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
  --fall-delay: 0.12s;
}/* val-binnen: van licht boven + extra rotatie naar rust-rotatie, met bounce.
   backwards-fill houdt de startstand vast tijdens de nth-based delay. */@keyframes bc-pol-fall {
  from {
    opacity: 0;
    transform: translateY(var(--fall-y, -52px)) rotate(calc(var(--rot, 0deg) + var(--fall-rot, 8deg))) scale(1.03);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(var(--rot, 0deg)) scale(1);
  }
}.bc-cm .bc-polaroid-stack__item.bc-visible {
  opacity: 1;
  animation: bc-pol-fall 0.78s cubic-bezier(0.3, 1.45, 0.45, 1) var(--fall-delay, 0.12s) backwards;
}/* gestaggerde val (delay zit in de animatie, niet in de hover-transition) */.bc-cm .bc-polaroid-stack__item:nth-child(2) { --fall-delay: 0.27s; }.bc-cm .bc-polaroid-stack__item:nth-child(3) { --fall-delay: 0.42s; }.bc-cm .bc-polaroid-stack__item:nth-child(4) { --fall-delay: 0.57s; }.bc-cm .bc-polaroid-stack__item:nth-child(5) { --fall-delay: 0.72s; }.bc-cm .bc-polaroid-stack__item:nth-child(6) { --fall-delay: 0.87s; }/* wit papier: foto + handschrift-lip (concept: puur wit papier op warm cream) */.bc-cm .bc-polaroid-stack__frame {
  background: #fff;
  padding: 13px 13px 0;
  border-radius: 2px;
  box-shadow: 0 12px 26px rgba(36, 36, 34, 0.16);
  transition: box-shadow 0.45s ease;
}.bc-cm .bc-polaroid-stack__img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}.bc-cm .bc-polaroid-stack__caption {
  /* handschrift-caption (Caveat 600 via tokens/typography.css fonts-import) */
  background: #fff;
  padding: 10px 17px 13px;
  margin: 0;
  font-family: 'Caveat', 'Bradley Hand', 'Segoe Script', 'Comic Sans MS', cursive;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: #453f37;
  border-radius: 0 0 2px 2px;
  box-shadow: 0 12px 26px rgba(36, 36, 34, 0.16);
  /* fly in just after the polaroid lands (per Bram FB) */
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease calc(var(--fall-delay, 0.12s) + 0.3s),
              transform 0.45s ease calc(var(--fall-delay, 0.12s) + 0.3s),
              box-shadow 0.45s ease;
}.bc-cm .bc-polaroid-stack__item.bc-visible .bc-polaroid-stack__caption {
  opacity: 1;
  transform: none;
}/* ── Rotatie + gemixte aspect-ratio's (nth-based, 4-cyclus uit het concept) ── */.bc-cm .bc-polaroid-stack__item:nth-child(4n+1) { --rot: -4deg; }.bc-cm .bc-polaroid-stack__item:nth-child(4n+2) { --rot: 2.5deg; }.bc-cm .bc-polaroid-stack__item:nth-child(4n+3) { --rot: -2deg; }.bc-cm .bc-polaroid-stack__item:nth-child(4n)   { --rot: 3.5deg; }.bc-cm .bc-polaroid-stack__item:nth-child(4n+1) .bc-polaroid-stack__img { aspect-ratio: 4 / 5; }.bc-cm .bc-polaroid-stack__item:nth-child(4n+2) .bc-polaroid-stack__img { aspect-ratio: 5 / 4; }.bc-cm .bc-polaroid-stack__item:nth-child(4n+3) .bc-polaroid-stack__img { aspect-ratio: 4 / 5; }.bc-cm .bc-polaroid-stack__item:nth-child(4n)   .bc-polaroid-stack__img { aspect-ratio: 1 / 1; }/* desktop-collage: verspringend, hoeken over elkaar (concept-maten) */@media (min-width: 821px) {
  .bc-cm .bc-polaroid-stack__item:nth-child(4n+1) { width: 252px; margin-top: 30px; z-index: 1; }
  .bc-cm .bc-polaroid-stack__item:nth-child(4n+2) { width: 296px; margin-left: -34px; z-index: 2; }
  .bc-cm .bc-polaroid-stack__item:nth-child(4n+3) { width: 250px; margin-left: -30px; margin-top: 54px; z-index: 3; }
  .bc-cm .bc-polaroid-stack__item:nth-child(4n)   { width: 262px; margin-left: -36px; margin-top: 10px; z-index: 4; }
}/* ── PUNAISE: bolletje met highlight (licht linksboven) via ::before,
      slagschaduw op het papier via ::after. Popt NA de landing. ── */.bc-cm .bc-polaroid-stack__item::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  z-index: 5;
  background: radial-gradient(circle at 33% 28%, #ffb98f 0 16%, var(--bc-primary) 42%, #b8511b 88%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35), 0 2px 3px rgba(36, 36, 34, 0.35);
  opacity: 0;
  transform: translateX(-50%) scale(0.4) translateY(-6px);
}.bc-cm .bc-polaroid-stack__item.bc-visible::before {
  opacity: 1;
  transform: translateX(-50%) scale(1) translateY(0);
  transition: opacity 0.22s ease calc(var(--fall-delay, 0.12s) + 0.42s),
              transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--fall-delay, 0.12s) + 0.42s);
}.bc-cm .bc-polaroid-stack__item::after {
  content: "";
  position: absolute;
  top: 20px;
  left: calc(50% - 5.5px);
  width: 19px;
  height: 8px;
  border-radius: 50%;
  background: rgba(36, 36, 34, 0.28);
  filter: blur(3px);
  z-index: 4;
  transform: rotate(-18deg);
  opacity: 0;
}.bc-cm .bc-polaroid-stack__item.bc-visible::after {
  opacity: 1;
  transition: opacity 0.22s ease calc(var(--fall-delay, 0.12s) + 0.42s);
}/* kleur- en positie-variatie (concept: 1 oranje/links, 2 groen, 4 dark/rechts) */.bc-cm .bc-polaroid-stack__item:nth-child(4n+1)::before { left: 46%; }.bc-cm .bc-polaroid-stack__item:nth-child(4n+1)::after  { left: calc(46% - 5.5px); }.bc-cm .bc-polaroid-stack__item:nth-child(4n+2)::before {
  background: radial-gradient(circle at 33% 28%, #7fd0bf 0 16%, var(--bc-green) 45%, #07463a 90%);
}.bc-cm .bc-polaroid-stack__item:nth-child(4n)::before {
  left: 55%;
  top: 7px;
  background: radial-gradient(circle at 33% 28%, #8a8a85 0 14%, var(--bc-dark) 48%, #000 92%);
}.bc-cm .bc-polaroid-stack__item:nth-child(4n)::after { left: calc(55% - 5.5px); top: 22px; }/* ── TAPE-variatie op nummer 3(n): doorschijnend randje met gescheurde einden
      (vervangt de punaise; komt NA de punaise-rules zodat 3n wint) ── */.bc-cm .bc-polaroid-stack__item:nth-child(3n)::before {
  top: -13px;
  left: 50%;
  width: 104px;
  height: 30px;
  border-radius: 0;
  background: linear-gradient(105deg, rgba(255, 249, 240, 0.62), rgba(255, 249, 240, 0.40) 55%, rgba(255, 249, 240, 0.62));
  box-shadow: 0 2px 4px rgba(36, 36, 34, 0.12);
  clip-path: polygon(2% 0, 98% 0, 100% 18%, 97% 32%, 100% 50%, 97% 68%, 100% 84%, 98% 100%, 2% 100%, 0 84%, 3% 68%, 0 50%, 3% 32%, 0 18%);
  transform: translateX(-50%) rotate(-5deg);
}.bc-cm .bc-polaroid-stack__item:nth-child(3n).bc-visible::before {
  transform: translateX(-50%) rotate(-5deg);
  transition: opacity 0.3s ease calc(var(--fall-delay, 0.12s) + 0.42s);
}.bc-cm .bc-polaroid-stack__item:nth-child(3n)::after { display: none; }/* ── Hover: polaroid oppakken (recht, omhoog, diepere schaduw), rest zakt
      subtiel weg. Transition zit delay-vrij op de item-base. ── */@media (hover: hover) {
  .bc-cm .bc-polaroid-stack__item:hover {
    z-index: 9;
    transform: translateY(-12px) rotate(0deg) scale(1.05);
  }
  .bc-cm .bc-polaroid-stack__item:hover .bc-polaroid-stack__frame,
  .bc-cm .bc-polaroid-stack__item:hover .bc-polaroid-stack__caption {
    box-shadow: 0 30px 60px rgba(36, 36, 34, 0.28);
  }
  .bc-cm .bc-polaroid-stack__grid:has(.bc-polaroid-stack__item:hover) .bc-polaroid-stack__item:not(:hover) {
    opacity: 0.84;
  }
}/* ── BC patch sticker (concept: rechtsonder op het papier) ── */.bc-cm .bc-polaroid-stack__sticker {
  position: absolute;
  z-index: 6;
  right: 14px;
  bottom: -16px;
  width: 76px;
  height: auto;
  transform: rotate(-8deg);
  filter: drop-shadow(0 4px 8px rgba(36, 36, 34, 0.25));
  pointer-events: none;
}/* ── Mobiel: 2x2 prikbord, subtiele rotatie + zachtere val ── *//* Bram-fb 2026-07-03: mobiel veel kleiner, 2 a 3 naast elkaar, beetje random
   (was: 2 grote kolommen en 1-kolom onder 440 = lange stapel). Verspringende
   verticale offsets + rotaties houden het prikbord-gevoel op klein scherm. */@media (max-width: 820px) {
  .bc-cm .bc-polaroid-stack__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 14px;
    max-width: 560px;
    margin: 0 auto;
  }
  .bc-cm .bc-polaroid-stack__item {
    width: auto;
    margin: 0;
    --fall-y: -20px;
    --fall-rot: 4deg;
  }
  .bc-cm .bc-polaroid-stack__item:nth-child(4n+1) { --rot: -2.5deg; translate: 0 0; }
  .bc-cm .bc-polaroid-stack__item:nth-child(4n+2) { --rot: 2deg; translate: 0 14px; }
  .bc-cm .bc-polaroid-stack__item:nth-child(4n+3) { --rot: -1.5deg; translate: 0 6px; }
  .bc-cm .bc-polaroid-stack__item:nth-child(4n)   { --rot: 2.5deg; translate: 0 18px; }
  .bc-cm .bc-polaroid-stack__caption { font-size: 12px; }
  .bc-cm .bc-polaroid-stack__sticker { width: 40px; bottom: -8px; }
}@media (max-width: 440px) {
  .bc-cm .bc-polaroid-stack__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px;
    max-width: 340px;
  }
  .bc-cm .bc-polaroid-stack__caption { font-size: 11px; }
}/* ── Reduced-motion failsafe: alles direct op eindstand (geen val, geen pop);
      polaroids statisch maar wel gedraaid. .bc-visible-varianten expliciet
      meegenomen zodat de animation/transition ook daar uitstaat. ── */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-polaroid-stack,
  .bc-cm .bc-polaroid-stack__item,
  .bc-cm .bc-polaroid-stack__item.bc-visible,
  .bc-cm .bc-polaroid-stack__caption,
  .bc-cm .bc-polaroid-stack__item.bc-visible .bc-polaroid-stack__caption {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
  .bc-cm .bc-polaroid-stack__item,
  .bc-cm .bc-polaroid-stack__item.bc-visible {
    transform: rotate(var(--rot, 0deg));
  }
  .bc-cm .bc-polaroid-stack__item::before,
  .bc-cm .bc-polaroid-stack__item.bc-visible::before,
  .bc-cm .bc-polaroid-stack__item::after,
  .bc-cm .bc-polaroid-stack__item.bc-visible::after {
    opacity: 1;
    transition: none;
    transform: translateX(-50%);
  }
  .bc-cm .bc-polaroid-stack__item::after,
  .bc-cm .bc-polaroid-stack__item.bc-visible::after {
    transform: rotate(-18deg);
  }
  .bc-cm .bc-polaroid-stack__item:nth-child(3n)::before,
  .bc-cm .bc-polaroid-stack__item:nth-child(3n).bc-visible::before {
    transform: translateX(-50%) rotate(-5deg);
  }
}/* === Brand 2.0 fase 2 stap 3 — C1 statement + C3 numbered-usp === *//* bc-statement — Brand 2.0 C1 "statement" block.
 * 1-op-1 port van concept C1 in bc-content-machine
 * output/preview/brand20-concepts.html (Bram-approved 2026-07-02):
 * vaste 460px staand-beeld-kolom (4/5, radius 16, zware shadow) naast
 * eyebrow + serif-H2 (laatste woord bc-script) + body + tekst-link met
 * onderstreping. Decoratieve swoosh rechtsboven (zelfde asset-familie als
 * bc-swx, opacity .32). Radius 16px is een bewuste afwijking van de
 * 8px-standaard: "grote-hero-beeld-radius", net als pricing.
 * Colors + fonts via tokens; spacing/sizing literals per BC-conventie.
 * Body-kleur #3d3a36 is byte-verbatim uit het concept (geen token). */.bc-cm .bc-statement {
  position: relative;
  overflow: hidden;
  background: var(--bc-white);
  padding: 110px 0;
}/* Decoratieve swoosh rechtsboven (concept: swoosh-orange-full-gradient;
   library-asset uit dezelfde familie, zie bc-swx--gallery).
   top: 0 (concept had -60px): de sectie heeft overflow:hidden, een negatieve
   top sneed de boog hard af (Bram-fb 2026-07-03); binnen de rand starten
   toont de volledige arc, de rechter-uitloop clipt bewust wel. */.bc-cm .bc-statement__swoosh {
  position: absolute;
  right: -240px;
  top: 0;
  width: 640px;
  height: 352px;
  background: url("assets/swoosh-orange-full.png") no-repeat center / contain;
  opacity: 0.32;
  pointer-events: none;
}.bc-cm .bc-statement__wrap {
  position: relative;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 84px;
  align-items: center;
}.bc-cm .bc-statement__img-frame {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(36, 36, 34, 0.18);
}.bc-cm .bc-statement__img-frame img {
  width: 100%;
  aspect-ratio: 4 / 5;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
}.bc-cm .bc-statement__eyebrow {
  font: 700 13px/1 var(--bc-font-body);
  letter-spacing: 0.22em;
  color: var(--bc-primary);
  text-transform: uppercase;
  margin: 0 0 18px;
}.bc-cm .bc-statement__title {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(44px, 4.6vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--bc-text);
}/* Script-accent op het laatste woord: licht gedraaid, los van de regel.
   font-size erft van de globale .bc-script (1.05em, getuned op het echte
   Blakson Hustle; het prototype-1.14em was op de Damion-stand-in). */.bc-cm .bc-statement__title .bc-script {
  display: inline-block;
  transform: rotate(-2deg);
  margin-left: 6px;
}/* Body-paragrafen (eyebrow is ook een <p>, dus expliciet uitsluiten). */.bc-cm .bc-statement__text > p:not(.bc-statement__eyebrow) {
  font-family: var(--bc-font-body);
  font-size: 17px;
  line-height: 1.65;
  max-width: 34em;
  color: #3d3a36;
  margin: 17px 0;
}.bc-cm .bc-statement__title + p {
  margin-top: 26px;
}.bc-cm .bc-statement__link {
  display: inline-block;
  margin-top: 10px;
  font: 700 16px var(--bc-font-body);
  color: var(--bc-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--bc-primary);
  padding-bottom: 3px;
}.bc-cm .bc-statement__link::after {
  content: " \2192";
}.bc-cm .bc-statement__link:hover {
  color: var(--bc-green);
  border-color: var(--bc-green);
}/* ── Scroll-reveal initial state (BCReveal toggles .bc-visible on parent) ── */.bc-cm .bc-statement__img-frame,
.bc-cm .bc-statement__text {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}.bc-cm .bc-statement__text {
  transition-delay: 0.15s;
}/* Scroll-reveal end state */.bc-cm .bc-statement.bc-visible .bc-statement__img-frame,
.bc-cm .bc-statement.bc-visible .bc-statement__text {
  opacity: 1;
  transform: translateY(0);
}/* ── Responsive: ≤900px — stack kolommen (concept-breakpoint) ─────────── */@media (max-width: 900px) {
  .bc-cm .bc-statement__wrap {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}/* ── Variant shapes (homepage 2.0 S3, fb-ronde 12) ───────────────────────
   Speelse shapes-cluster OP het beeld: mustard-arc linksonder, groene arc
   rechtsonder, gedraaide swoosh rechtsboven met drop-shadow. H2 een maat
   kleiner dan default (bouwbestek clamp 38-60). Mustard #dca618 is een
   byte-verbatim bouwbestek-accent (geen token; enige plek in het systeem). */.bc-cm .bc-statement--shapes {
  overflow: visible;
}.bc-cm .bc-statement--shapes .bc-statement__media {
  position: relative;
}.bc-cm .bc-statement--shapes .bc-statement__img-frame {
  box-shadow: 0 26px 60px rgba(36, 36, 34, 0.16);
}.bc-cm .bc-statement--shapes .bc-statement__arc {
  position: absolute;
  left: -34px;
  bottom: -30px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #dca618;
  z-index: 1;
}.bc-cm .bc-statement--shapes .bc-statement__arc2 {
  position: absolute;
  right: 26px;
  bottom: -42px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bc-green);
  z-index: 3;
}.bc-cm .bc-statement--shapes .bc-statement__swoosh-over {
  position: absolute;
  right: -74px;
  top: -46px;
  width: 190px;
  aspect-ratio: 1804 / 996;
  background: url("assets/swoosh-orange-small.png") no-repeat center / contain;
  transform: rotate(-14deg);
  z-index: 3;
  filter: drop-shadow(0 12px 26px rgba(36, 36, 34, 0.22));
  pointer-events: none;
}.bc-cm .bc-statement--shapes .bc-statement__title {
  font-size: clamp(38px, 4.2vw, 60px);
}.bc-cm .bc-statement--shapes .bc-statement__title .bc-script {
  font-size: 1.14em; /* bouwbestek-maat op echte Blakson Hustle */
  margin-left: 4px;
}/* Reveal: bij shapes zit het img-frame in __media; laat de hele cluster
   samen opkomen (zelfde curve als de default img-frame-reveal). */.bc-cm .bc-statement--shapes .bc-statement__img-frame {
  opacity: 1;
  transform: none;
  transition: none;
}.bc-cm .bc-statement--shapes .bc-statement__media {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}.bc-cm .bc-statement--shapes.bc-visible .bc-statement__media {
  opacity: 1;
  transform: none;
}@media (max-width: 960px) {
  .bc-cm .bc-statement--shapes {
    padding: 80px 0;
  }

  .bc-cm .bc-statement--shapes .bc-statement__wrap {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .bc-cm .bc-statement--shapes .bc-statement__swoosh-over {
    width: 130px;
    right: -30px;
  }
}/* bc-numbered-usp — Brand 2.0 C3 "numbered-USP met hover-foto-reveal".
 * 1-op-1 port van concept C3 in bc-content-machine
 * output/preview/brand20-concepts.html (Bram-approved 2026-07-02):
 * intro-rij (eyebrow + 2-regelige serif-H2 + inleidende alinea) gevolgd door
 * 2-4 rijen met groot outlined cijfer (-webkit-text-stroke, transparante
 * fill, zelfde techniek als outline-text-image) + eyebrow + H3 + body + een
 * foto die op :hover van de rij inschuift (opacity/translateY/rotate).
 *
 * Hover-guard (audit-aandachtspunt): de verborgen-tot-hover-state staat in
 * @media (hover:hover), zodat touch-devices (tablet/telefoon in
 * desktop-grid) de foto gewoon altijd tonen — geen dode hover-state.
 * numbered-usp.js upgrade't dat op touch naar een in-view reveal per rij
 * (.bc-nusp-js/.bc-nusp-inview); zonder JS blijft de foto daar statisch
 * zichtbaar. Outlined-cijfer-stroke = var(--bc-text) (niet de prototype
 * --b2-black-var). Colors + fonts via tokens; spacing/sizing literals;
 * body-kleur #3d3a36 byte-verbatim uit het concept. */.bc-cm .bc-numbered-usp {
  position: relative;
  overflow: hidden;
  background: var(--bc-white);
  padding: 110px 0;
  /* scroll-reveal (shared BCReveal IIFE via data-bc-reveal) */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}.bc-cm .bc-numbered-usp.bc-visible {
  opacity: 1;
  transform: translateY(0);
}.bc-cm .bc-numbered-usp__wrap {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}/* ── Intro-rij ────────────────────────────────────────────────────────── */.bc-cm .bc-numbered-usp__intro {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 26px;
}.bc-cm .bc-numbered-usp__eyebrow {
  font: 700 13px/1 var(--bc-font-body);
  letter-spacing: 0.22em;
  color: var(--bc-primary);
  text-transform: uppercase;
  margin: 0 0 18px;
}.bc-cm .bc-numbered-usp__title {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(40px, 4.2vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--bc-text);
}.bc-cm .bc-numbered-usp__intro-text {
  font-family: var(--bc-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: #3d3a36;
  max-width: 30em;
  margin: 0 0 10px;
}/* ── USP-rijen ────────────────────────────────────────────────────────── */.bc-cm .bc-numbered-usp__row {
  display: grid;
  grid-template-columns: 220px 1fr 260px;
  gap: 60px;
  padding: 58px 0;
  border-top: 1px solid rgba(36, 36, 34, 0.18);
  align-items: center;
}/* Groot outlined cijfer: transparante fill + stroke in --bc-text. */.bc-cm .bc-numbered-usp__num {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: 120px;
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.6px var(--bc-text);
  letter-spacing: -0.02em;
}/* Fallback: geen -webkit-text-stroke support -> solide donker cijfer
   (zelfde @supports-guard als outline-text-image). */@supports not ((-webkit-text-stroke: 1px var(--bc-text)) or (text-stroke: 1px var(--bc-text))) {
  .bc-cm .bc-numbered-usp__num {
    color: var(--bc-text);
    -webkit-text-stroke: 0;
  }
}.bc-cm .bc-numbered-usp__row h3 {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: 30px;
  line-height: 1.15;
  margin: 10px 0 14px;
  color: var(--bc-text);
}.bc-cm .bc-numbered-usp__row .bc-numbered-usp__eyebrow {
  margin-bottom: 0;
}.bc-cm .bc-numbered-usp__body > p:not(.bc-numbered-usp__eyebrow) {
  font-family: var(--bc-font-body);
  font-size: 17px;
  line-height: 1.65;
  max-width: 38em;
  color: #3d3a36;
  margin: 0;
}/* ── Foto-slot ────────────────────────────────────────────────────────── *
 * Base (touch-first): foto gewoon zichtbaar. De verborgen-tot-hover-state
 * leeft in de (hover:hover)-guard hieronder. */.bc-cm .bc-numbered-usp__img {
  pointer-events: none;
}.bc-cm .bc-numbered-usp__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: 12px;
  box-shadow: 0 24px 54px rgba(36, 36, 34, 0.22);
  display: block;
}@media (hover: hover) {
  .bc-cm .bc-numbered-usp__img {
    opacity: 0;
    transform: translateY(26px) rotate(2deg);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .bc-cm .bc-numbered-usp__row:hover .bc-numbered-usp__img {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
  .bc-cm .bc-numbered-usp__row:hover .bc-numbered-usp__num {
    -webkit-text-stroke-color: var(--bc-primary);
    transition: 0.3s;
  }
}/* JS in-view reveal op touch (numbered-usp.js zet .bc-nusp-js op de sectie
   alleen onder (hover:none); zonder JS blijft de base-state zichtbaar). */.bc-cm .bc-nusp-js .bc-numbered-usp__img {
  opacity: 0;
  transform: translateY(26px) rotate(2deg);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}.bc-cm .bc-nusp-js .bc-numbered-usp__row.bc-nusp-inview .bc-numbered-usp__img {
  opacity: 1;
  transform: translateY(0) rotate(0);
}/* a11y-failsafe: reduced-motion toont de foto's meteen, statisch. */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-numbered-usp__img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}/* ── Responsive: ≤900px — stack (concept-breakpoint) ──────────────────── */@media (max-width: 900px) {
  .bc-cm .bc-numbered-usp__intro {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .bc-cm .bc-numbered-usp__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .bc-cm .bc-numbered-usp__num {
    font-size: 80px;
  }
  .bc-cm .bc-numbered-usp__img {
    opacity: 1;
    transform: none;
    margin-top: 18px;
  }
}/* === FB-ronde B — D1 expanding hover-gallery (steps-upgrade D2 zit in steps.css) === *//* bc-expanding-gallery — FB-ronde B D1 "expanding hover-gallery".
 * 1-op-1 port van concept D1 in bc-content-machine
 * output/preview/fb-interactie-concepts.html (Bram-approved, FB-ronde B):
 * head-rij (eyebrow + serif-H2 met bc-script accent + hover-hint) gevolgd
 * door 3-4 foto-panelen in een flex-rij. Het actieve/gehoverde paneel groeit
 * (flex-grow 7) en toont zijn caption; de andere panelen klappen in tot
 * smalle stroken met een verticale zijlabel.
 *
 * Interactie is pure CSS: :hover / :focus-visible winnen van de rust-staat
 * (.is-active, server-side op paneel 1) via :has() op de rij. Zonder JS is
 * er dus altijd een uitgeklapt paneel met caption; expanding-gallery.js
 * verplaatst alleen de rust-staat bij klik/tik en toetsenbord-focus.
 *
 * Mobiel <768px stackt de rij (geen expansie, alle captions zichtbaar,
 * zijlabels + hint verborgen). prefers-reduced-motion: geen transities,
 * reveal-failsafe direct zichtbaar.
 *
 * Tokens: var(--bc-*) voor kleur + body-font; serif = Merriweather literal
 * (Brand 2.0 patroon, zie numbered-usp.css); spacing/sizing literals en de
 * rgba(36,36,34,…)-schaduwen/gradients byte-verbatim uit het concept;
 * hint-kleur #6b665f byte-verbatim concept. */.bc-cm .bc-expanding-gallery {
  position: relative;
  overflow: hidden;
  background: var(--bc-white);
  padding: 110px 0;
  /* scroll-reveal (shared BCReveal IIFE via data-bc-reveal) */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}.bc-cm .bc-expanding-gallery.bc-visible {
  opacity: 1;
  transform: translateY(0);
}.bc-cm .bc-expanding-gallery__wrap {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}/* ── Head-rij: eyebrow + serif-titel links, hover-hint rechts ─────────── */.bc-cm .bc-expanding-gallery__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 42px;
}.bc-cm .bc-expanding-gallery__eyebrow {
  font: 700 13px/1 var(--bc-font-body);
  letter-spacing: 0.22em;
  color: var(--bc-primary);
  text-transform: uppercase;
  margin: 0 0 18px;
}.bc-cm .bc-expanding-gallery__title {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(36px, 3.8vw, 54px);
  line-height: 1.06;
  letter-spacing: -0.5px;
  color: var(--bc-text);
  margin: 0;
}/* Script-accent op het laatste woord (wrapLastWord render-transform);
   basis-styling van .bc-script komt uit rhythm.css, hier de concept-tuning. */.bc-cm .bc-expanding-gallery__title .bc-script {
  font-size: 1.12em;
  display: inline-block;
  transform: rotate(-2deg);
}.bc-cm .bc-expanding-gallery__hint {
  font: 700 12px var(--bc-font-body);
  letter-spacing: 0.18em;
  color: #6b665f;
  white-space: nowrap;
  padding-bottom: 10px;
}/* ── De panelen-rij ───────────────────────────────────────────────────── */.bc-cm .bc-expanding-gallery__row {
  display: flex;
  gap: 12px;
  height: 552px;
}.bc-cm .bc-expanding-gallery__panel {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  outline: none;
  transition: flex-grow 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-expanding-gallery__panel:focus-visible .bc-expanding-gallery__media {
  outline: 3px solid var(--bc-primary);
  outline-offset: 3px;
}.bc-cm .bc-expanding-gallery__media {
  position: relative;
  flex: 1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(36, 36, 34, 0.15);
}.bc-cm .bc-expanding-gallery__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}/* Leesbaarheids-gradient onderin het beeld (voor de witte zijlabel) */.bc-cm .bc-expanding-gallery__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(36, 36, 34, 0.42), transparent 46%);
  pointer-events: none;
}/* ── Verticale zijlabel op het ingeklapte paneel ──────────────────────── */.bc-cm .bc-expanding-gallery__side {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  display: flex;
  justify-content: center;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.35s ease;
  pointer-events: none;
}.bc-cm .bc-expanding-gallery__side span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 800 12px/1 var(--bc-font-body);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 12px rgba(36, 36, 34, 0.55);
}/* ── Caption onder het uitgeklapte paneel ─────────────────────────────── */.bc-cm .bc-expanding-gallery__cap {
  height: 96px;
  padding-top: 16px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease 0.1s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
  pointer-events: none;
}.bc-cm .bc-expanding-gallery__cap-label {
  font: 800 12px var(--bc-font-body);
  letter-spacing: 0.2em;
  color: var(--bc-primary);
  text-transform: uppercase;
  margin: 0 0 7px;
}.bc-cm .bc-expanding-gallery__cap-text {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.42;
  color: var(--bc-text);
  margin: 0;
}/* ── Desktop: expansie-logica (rust-staat is-active; hover/focus wint) ── */@media (min-width: 768px) {
  .bc-cm .bc-expanding-gallery__cap {
    width: min(560px, 56vw);
  }

  /* actieve staat: is-active (rust) of hover/focus wint */
  .bc-cm .bc-expanding-gallery__panel.is-active,
  .bc-cm .bc-expanding-gallery__panel:hover,
  .bc-cm .bc-expanding-gallery__panel:focus-visible {
    flex: 7;
  }
  .bc-cm .bc-expanding-gallery__row:has(.bc-expanding-gallery__panel:hover) .bc-expanding-gallery__panel.is-active:not(:hover),
  .bc-cm .bc-expanding-gallery__row:has(.bc-expanding-gallery__panel:focus-visible) .bc-expanding-gallery__panel.is-active:not(:focus-visible) {
    flex: 1;
  }

  .bc-cm .bc-expanding-gallery__panel.is-active .bc-expanding-gallery__cap,
  .bc-cm .bc-expanding-gallery__panel:hover .bc-expanding-gallery__cap,
  .bc-cm .bc-expanding-gallery__panel:focus-visible .bc-expanding-gallery__cap {
    opacity: 1;
    transform: none;
  }
  .bc-cm .bc-expanding-gallery__row:has(.bc-expanding-gallery__panel:hover) .bc-expanding-gallery__panel.is-active:not(:hover) .bc-expanding-gallery__cap,
  .bc-cm .bc-expanding-gallery__row:has(.bc-expanding-gallery__panel:focus-visible) .bc-expanding-gallery__panel.is-active:not(:focus-visible) .bc-expanding-gallery__cap {
    opacity: 0;
    transform: translateY(10px);
  }

  .bc-cm .bc-expanding-gallery__panel.is-active .bc-expanding-gallery__side,
  .bc-cm .bc-expanding-gallery__panel:hover .bc-expanding-gallery__side,
  .bc-cm .bc-expanding-gallery__panel:focus-visible .bc-expanding-gallery__side {
    opacity: 0;
  }
  .bc-cm .bc-expanding-gallery__row:has(.bc-expanding-gallery__panel:hover) .bc-expanding-gallery__panel.is-active:not(:hover) .bc-expanding-gallery__side,
  .bc-cm .bc-expanding-gallery__row:has(.bc-expanding-gallery__panel:focus-visible) .bc-expanding-gallery__panel.is-active:not(:focus-visible) .bc-expanding-gallery__side {
    opacity: 1;
  }

  .bc-cm .bc-expanding-gallery__panel.is-active .bc-expanding-gallery__media img,
  .bc-cm .bc-expanding-gallery__panel:hover .bc-expanding-gallery__media img {
    transform: scale(1.04);
  }
}/* ── Mobiel: stack, geen expansie, alle captions zichtbaar ────────────── *//* Bram-fb 2026-07-03: mobiel was een platte stapel; nu een VERTICALE
   accordion, de mobiele vertaling van de desktop-interactie. Inactieve
   panelen zijn dunne foto-balkjes met het label leesbaar (horizontale
   __side), tik klapt open (bestaande is-active JS werkt al op touch). */@media (max-width: 767px) {
  .bc-cm .bc-expanding-gallery {
    padding: 80px 0;
  }
  .bc-cm .bc-expanding-gallery__head {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 30px;
  }
  .bc-cm .bc-expanding-gallery__hint {
    display: none;
  }
  .bc-cm .bc-expanding-gallery__row {
    flex-direction: column;
    height: auto;
    gap: 12px;
  }
  .bc-cm .bc-expanding-gallery__panel {
    flex: none;
  }
  .bc-cm .bc-expanding-gallery__media {
    flex: none;
    height: 64px;
    transition: height 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .bc-cm .bc-expanding-gallery__panel.is-active .bc-expanding-gallery__media {
    height: 300px;
  }
  /* label horizontaal op de dunne balk, verdwijnt bij openklappen */
  .bc-cm .bc-expanding-gallery__side {
    display: flex;
    align-items: center;
    inset: auto 0 0 0;
    padding: 10px 16px;
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  .bc-cm .bc-expanding-gallery__side > span {
    writing-mode: horizontal-tb;
    transform: none;
  }
  .bc-cm .bc-expanding-gallery__panel.is-active .bc-expanding-gallery__side {
    opacity: 0;
  }
  .bc-cm .bc-expanding-gallery__cap {
    opacity: 0;
    transform: none;
    height: 0;
    overflow: hidden;
    padding-top: 0;
    transition: opacity 0.35s ease 0.2s;
  }
  .bc-cm .bc-expanding-gallery__panel.is-active .bc-expanding-gallery__cap {
    opacity: 1;
    height: auto;
    padding-top: 12px;
  }
}/* ── Reduced-motion failsafe ──────────────────────────────────────────── */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-expanding-gallery,
  .bc-cm .bc-expanding-gallery * {
    transition: none !important;
    animation: none !important;
  }
  .bc-cm .bc-expanding-gallery {
    opacity: 1;
    transform: none;
  }
}/* === Homepage 2.0 — home-blokken familie (bouwbestek fb-ronde 12) === *//* bc-site-header — homepage 2.0 chrome: donkere sticky balk die bij scroll
 * morpht naar een zwevende pill (JS toggelt .bc-hdr--min op de root), met
 * fullscreen <details>-menu-overlay op <=1080px en een creme USP-strip
 * (.bc-usp-strip) direct onder de balk.
 * 1-op-1 port van het homepage 2.0 bouwbestek (fb-ronde 12, Bram-akkoord
 * 2026-07-05); class-rename s-hdr -> bc-site-header, tokens per de EXACT
 * token map. Container-breedte 1400 (balk-inhoud) is bewust breder dan de
 * 1260-standaard: chrome-familie, zelfde uitzonderingsklasse als logo-strip.
 * Spacing/sizing literals byte-verbatim uit het bouwbestek. */.bc-cm .bc-site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  padding: 0;
  transition: padding 0.65s cubic-bezier(0.33, 1, 0.4, 1);
}.bc-cm .bc-hdr__shell {
  background: var(--bc-dark);
  max-width: 100vw;
  margin: 0 auto;
  border-radius: 0;
  transition: max-width 0.65s cubic-bezier(0.33, 1, 0.4, 1),
    border-radius 0.65s cubic-bezier(0.33, 1, 0.4, 1),
    box-shadow 0.65s ease, background 0.45s ease;
}.bc-cm .bc-hdr__wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px var(--bc-gutter);
  transition: padding 0.65s cubic-bezier(0.33, 1, 0.4, 1);
}.bc-cm .bc-hdr__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}.bc-cm .bc-hdr__logo img {
  height: 33px;
  width: auto;
  transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-hdr__nav {
  flex: 1;
  min-width: 0;
}.bc-cm .bc-hdr__nav ul {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(14px, 1.6vw, 26px);
  margin: 0;
  padding: 0;
}.bc-cm .bc-hdr__nav li {
  white-space: nowrap;
}.bc-cm .bc-hdr__nav a {
  font: 700 14.5px/1 var(--bc-font-body);
  text-decoration: none;
  color: var(--bc-white);
  padding: 6px 2px;
  transition: color 0.2s;
}.bc-cm .bc-hdr__nav a:hover {
  color: var(--bc-primary);
}.bc-cm .bc-hdr__extra {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: opacity 0.35s ease, max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-hdr__flag {
  border-radius: 3px;
  overflow: hidden;
  display: block;
  line-height: 0;
}.bc-cm .bc-hdr__soc {
  display: flex;
  gap: 8px;
}.bc-cm .bc-hdr__soc a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--bc-white);
  transition: 0.25s;
}.bc-cm .bc-hdr__soc a:hover {
  background: rgba(255, 249, 240, 0.14);
  color: var(--bc-primary);
}.bc-cm .bc-hdr__soc svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}.bc-cm .bc-hdr__cta {
  flex: 0 0 auto;
}/* ── Morph-staat: zwevende pill (desktop) ──────────────────────────────── */@media (min-width: 1081px) {
  .bc-cm .bc-site-header.bc-hdr--min {
    padding: 12px 18px;
  }

  .bc-cm .bc-site-header.bc-hdr--min .bc-hdr__shell {
    max-width: 1300px;
    border-radius: 999px;
    box-shadow: 0 20px 55px rgba(36, 36, 34, 0.38);
    background: rgba(36, 36, 34, 0.97);
    backdrop-filter: blur(8px);
  }

  .bc-cm .bc-site-header.bc-hdr--min .bc-hdr__wrap {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .bc-cm .bc-site-header.bc-hdr--min .bc-hdr__logo img {
    height: 25px;
  }

  .bc-cm .bc-site-header.bc-hdr--min .bc-hdr__extra {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    pointer-events: none;
  }

  .bc-cm .bc-site-header.bc-hdr--min .bc-hdr__cta {
    padding: 11px 22px;
    font-size: 14px;
  }
}/* ── Fullscreen menu (<=1080px): nav + extra weg, details-overlay erin ──── */.bc-cm .bc-nav-menu {
  display: none;
}@media (max-width: 1080px) {
  /* morph naar pill werkt ook op tablet/mobiel: compacte variant */
  .bc-cm .bc-site-header.bc-hdr--min {
    padding: 10px 12px;
  }

  .bc-cm .bc-site-header.bc-hdr--min .bc-hdr__shell {
    border-radius: 999px;
    box-shadow: 0 16px 44px rgba(36, 36, 34, 0.36);
    background: rgba(36, 36, 34, 0.97);
  }

  .bc-cm .bc-site-header.bc-hdr--min .bc-hdr__wrap {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .bc-cm .bc-site-header.bc-hdr--min .bc-hdr__logo img {
    height: 21px;
  }

  .bc-cm .bc-hdr__nav {
    display: none;
  }

  .bc-cm .bc-hdr__extra {
    display: none;
  }

  .bc-cm .bc-nav-menu {
    display: block;
    margin-left: auto;
  }

  .bc-cm .bc-nav-menu summary {
    list-style: none;
    cursor: pointer;
    font: 800 15px var(--bc-font-body);
    color: var(--bc-white);
    padding: 10px 16px;
    border: 2px solid rgba(255, 249, 240, 0.5);
    border-radius: 999px;
  }

  .bc-cm .bc-nav-menu summary::-webkit-details-marker {
    display: none;
  }

  /* fullscreen menu-overlay (fb-ronde 12): BC-zwart, grote serif-links,
     CTA + telefoon + socials onderin */
  .bc-cm .bc-nm__panel {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: linear-gradient(165deg, #2b2723 0%, var(--bc-dark) 58%, #1e1c1a 100%);
    color: var(--bc-white);
    display: flex;
    flex-direction: column;
    padding: 16px 22px 30px;
    overflow-y: auto;
  }

  .bc-cm .bc-nav-menu[open] .bc-nm__panel {
    animation: bcNmIn 0.3s ease;
  }

  @keyframes bcNmIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .bc-cm .bc-nm__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: min(5vh, 38px);
  }

  .bc-cm .bc-nm__top img {
    height: 23px;
    width: auto;
  }

  .bc-cm .bc-nm__close {
    background: none;
    border: 2px solid rgba(255, 249, 240, 0.4);
    color: var(--bc-white);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 0;
    transition: 0.25s;
  }

  .bc-cm .bc-nm__close:hover {
    border-color: var(--bc-primary);
    color: var(--bc-primary);
  }

  .bc-cm .bc-nm__close svg {
    width: 15px;
    height: 15px;
  }

  .bc-cm .bc-nm__panel ul {
    list-style: none;
    margin: auto 0;
    padding: 0;
  }

  .bc-cm .bc-nm__panel li {
    opacity: 0;
    transform: translateY(20px);
  }

  .bc-cm .bc-nav-menu[open] .bc-nm__panel li {
    animation: bcNmLi 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  @keyframes bcNmLi {
    to { opacity: 1; transform: none; }
  }

  .bc-cm .bc-nav-menu[open] .bc-nm__panel li:nth-child(1) { animation-delay: 0.06s; }
  .bc-cm .bc-nav-menu[open] .bc-nm__panel li:nth-child(2) { animation-delay: 0.1s; }
  .bc-cm .bc-nav-menu[open] .bc-nm__panel li:nth-child(3) { animation-delay: 0.14s; }
  .bc-cm .bc-nav-menu[open] .bc-nm__panel li:nth-child(4) { animation-delay: 0.18s; }
  .bc-cm .bc-nav-menu[open] .bc-nm__panel li:nth-child(5) { animation-delay: 0.22s; }
  .bc-cm .bc-nav-menu[open] .bc-nm__panel li:nth-child(6) { animation-delay: 0.26s; }
  .bc-cm .bc-nav-menu[open] .bc-nm__panel li:nth-child(7) { animation-delay: 0.3s; }
  .bc-cm .bc-nav-menu[open] .bc-nm__panel li:nth-child(8) { animation-delay: 0.34s; }

  .bc-cm .bc-nm__panel ul a {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 11px 0;
    font: 900 clamp(25px, 5.6vw, 33px)/1.12 'Merriweather', Georgia, serif;
    letter-spacing: -0.4px;
    color: var(--bc-white);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 249, 240, 0.12);
    transition: color 0.2s;
  }

  .bc-cm .bc-nm__panel ul a i {
    font: 700 12px/1 var(--bc-font-body);
    font-style: normal;
    color: var(--bc-primary);
    letter-spacing: 0.1em;
    min-width: 26px;
  }

  .bc-cm .bc-nm__panel ul a:hover {
    color: var(--bc-primary);
  }

  .bc-cm .bc-nm__foot {
    margin-top: auto;
    padding-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
  }

  .bc-cm .bc-nm__tel {
    font: 700 16px var(--bc-font-body);
    color: var(--bc-cream);
    text-decoration: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.35);
    padding-bottom: 2px;
  }

  .bc-cm .bc-nm__soc {
    display: flex;
    gap: 10px;
  }

  .bc-cm .bc-nm__soc a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    color: #efe9df;
    transition: 0.25s;
  }

  .bc-cm .bc-nm__soc a:hover {
    border-color: var(--bc-primary);
    color: var(--bc-primary);
  }

  .bc-cm .bc-nm__soc svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
  }
}@media (max-width: 1080px) and (min-width: 641px) {
  /* tablet: menu-links iets groter + meer lucht */
  .bc-cm .bc-nm__panel {
    padding: 20px 40px 40px;
  }

  .bc-cm .bc-nm__panel ul a {
    font-size: 34px;
    padding: 13px 0;
  }
}/* ── USP-strip onder de header: licht, eigen kleur, ruime spacing ────────── */.bc-cm .bc-usp-strip {
  background: var(--bc-cream);
  border-bottom: 1px solid rgba(36, 36, 34, 0.06);
  position: relative;
}@media (max-width: 900px) {
  .bc-cm .bc-usp-strip::before,
  .bc-cm .bc-usp-strip::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    z-index: 2;
    pointer-events: none;
  }

  .bc-cm .bc-usp-strip::before {
    left: 0;
    background: linear-gradient(to right, var(--bc-cream), transparent);
  }

  .bc-cm .bc-usp-strip::after {
    right: 0;
    background: linear-gradient(to left, var(--bc-cream), transparent);
  }
}.bc-cm .bc-usp-strip ul {
  list-style: none;
  display: flex;
  gap: 72px;
  justify-content: center;
  margin: 0 auto;
  padding: 15px 24px;
  max-width: 1400px;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}.bc-cm .bc-usp-strip ul::-webkit-scrollbar {
  display: none;
}.bc-cm .bc-usp-strip li {
  display: flex;
  gap: 11px;
  align-items: center;
  font: 700 13.5px/1 var(--bc-font-body);
  color: #2f2c29;
}.bc-cm .bc-usp-strip svg {
  flex: 0 0 19px;
}/* ── Mobiel (<=640px) ─────────────────────────────────────────────────── */@media (max-width: 640px) {
  .bc-cm .bc-hdr__logo img {
    height: 19px;
  }

  .bc-cm .bc-hdr__wrap {
    gap: 10px;
  }

  .bc-cm .bc-hdr__cta {
    padding: 10px 13px;
    font-size: 12.5px;
    margin-left: auto;
  }

  .bc-cm .bc-nav-menu summary {
    padding: 8px 13px;
    font-size: 13px;
  }

  .bc-cm .bc-site-header.bc-hdr--min .bc-hdr__logo img {
    height: 17px;
  }

  .bc-cm .bc-site-header.bc-hdr--min {
    padding: 8px 8px;
  }

  .bc-cm .bc-usp-strip ul {
    gap: 34px;
    justify-content: flex-start;
  }
}/* ── Reduced motion: geen morph-transities, geen menu-stagger ────────────── */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-site-header,
  .bc-cm .bc-hdr__shell,
  .bc-cm .bc-hdr__wrap,
  .bc-cm .bc-hdr__logo img,
  .bc-cm .bc-hdr__extra {
    transition: none;
  }

  .bc-cm .bc-nav-menu[open] .bc-nm__panel,
  .bc-cm .bc-nav-menu[open] .bc-nm__panel li {
    animation: none;
  }

  .bc-cm .bc-nm__panel li {
    opacity: 1;
    transform: none;
  }
}/* bc-home-hero — homepage 2.0 hero (S1 uit het bouwbestek, fb-ronde 12).
 * Grid 1.06fr/1fr: gestaggerde serif-H1 (script-accent via .bc-script) + lead
 * + CTA-rij links, cut-out foto met arcs + zwevende badge rechts, en de
 * Feedback Company widget als derde grid-cel (kolom 2, rechts uitgelijnd).
 * Mobiel (<=960): foto EERST (strak tegen de USP-strip), dan tekst, dan de
 * widget gecentreerd ONDER de tekst. Container 1300 = home-familie-breedte.
 * H1-rise is pure CSS-animatie (geen JS-afhankelijkheid); reduced-motion
 * zet alles direct aan. Spacing/sizing literals byte-verbatim bouwbestek. */.bc-cm .bc-home-hero {
  background: var(--bc-white);
  padding: 72px 0 84px;
  overflow: hidden;
}.bc-cm .bc-home-hero__wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  gap: 20px 56px;
  align-items: center;
}.bc-cm .bc-home-hero h1 {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.09;
  letter-spacing: -0.8px;
  margin: 0 0 24px;
  margin-right: -90px;
  position: relative;
  z-index: 3;
  color: var(--bc-text);
}@media (max-width: 1180px) {
  .bc-cm .bc-home-hero h1 {
    margin-right: 0;
  }
}.bc-cm .bc-home-hero__hl {
  display: inline-block;
  opacity: 0;
  transform: translateY(34px);
  animation: bcHeroRise 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}.bc-cm .bc-home-hero__hl:nth-child(2) { animation-delay: 0.14s; }.bc-cm .bc-home-hero__hl:nth-child(3) { animation-delay: 0.24s; }.bc-cm .bc-home-hero__hl:nth-child(4) { animation-delay: 0.3s; }.bc-cm .bc-home-hero__hl:nth-child(5) { animation-delay: 0.38s; }.bc-cm .bc-home-hero__hl:nth-child(6) { animation-delay: 0.44s; }@keyframes bcHeroRise {
  to { opacity: 1; transform: none; }
}/* Script-accent: iets groter en gedraaid, los van de regel (glyph-maat is
   getuned op het echte Blakson Hustle via de globale .bc-script). */.bc-cm .bc-home-hero h1 .bc-script {
  font-size: 1.16em; /* bouwbestek-maat op echte Blakson Hustle */
  display: inline-block;
  transform: rotate(-2deg);
  padding: 0 0.06em;
}.bc-cm .bc-home-hero__lead {
  font-family: var(--bc-font-body);
  font-size: 17px;
  line-height: 1.65;
  max-width: 33em;
  color: #3d3a36;
  margin: 0 0 32px;
}.bc-cm .bc-home-hero__lead a {
  color: var(--bc-primary);
  font-weight: 700;
  text-decoration: none;
}.bc-cm .bc-home-hero__lead a:hover {
  color: var(--bc-green);
}.bc-cm .bc-home-hero__ctas {
  display: flex;
  gap: 26px;
  align-items: center;
  flex-wrap: wrap;
}.bc-cm .bc-home-hero__alt {
  font: 700 16px var(--bc-font-body);
  color: var(--bc-text);
  text-decoration: none;
  border-bottom: 2px solid var(--bc-primary);
  padding-bottom: 3px;
  transition: 0.2s;
}.bc-cm .bc-home-hero__alt:hover {
  color: var(--bc-primary);
}/* ── Visual rechts: cut-out foto + arcs + zwevende badge ─────────────────── */.bc-cm .bc-home-hero__visual {
  position: relative;
}.bc-cm .bc-home-hero__media {
  position: relative;
  margin-left: 48px;
  margin-right: -48px;
}.bc-cm .bc-home-hero__arc {
  position: absolute;
  top: -48px;
  right: -48px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: var(--bc-cream);
  z-index: 1;
}.bc-cm .bc-home-hero__arc2 {
  position: absolute;
  left: 26px;
  top: -26px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bc-green);
  z-index: 1;
}.bc-cm .bc-home-hero__photo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  border-radius: 26px;
  display: block;
}.bc-cm .bc-home-hero__badge {
  position: absolute;
  z-index: 3;
  left: -28px;
  bottom: 38px;
  width: 118px;
  height: 118px;
  background: url("assets/patch-bc-black-orangetext.svg") no-repeat center / contain;
  filter: drop-shadow(0 14px 30px rgba(36, 36, 34, 0.3));
  animation: bcBadgeFloat 5.5s ease-in-out infinite;
}@keyframes bcBadgeFloat {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-12px) rotate(-4deg); }
}/* ── Feedback Company widget: iframe van FC, binnenkant niet te stylen;
     de container wel (rechts uitgelijnd onder de foto) ─────────────────── */.bc-cm .bc-home-hero__fbcw {
  grid-column: 2;
  margin-top: 0;
  display: flex;
  justify-content: flex-end;
  min-height: 96px;
}.bc-cm .bc-home-hero__fbcw #feedback-widget-container {
  min-width: 280px;
}/* ── Mobiel/tablet (<=960): foto eerst, dan tekst, widget onder de tekst ── */@media (max-width: 960px) {
  .bc-cm .bc-home-hero {
    padding: 0 0 66px;
  }

  .bc-cm .bc-home-hero__wrap {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .bc-cm .bc-home-hero__visual {
    order: -1;
  }

  .bc-cm .bc-home-hero__badge {
    width: 92px;
    height: 92px;
    left: auto;
    right: 14px;
    bottom: auto;
    top: 14px;
  }

  .bc-cm .bc-home-hero__arc {
    width: 160px;
    height: 160px;
    top: auto;
    bottom: -30px;
    right: -30px;
  }

  .bc-cm .bc-home-hero__arc2 {
    left: 12px;
    top: auto;
    bottom: -18px;
  }

  .bc-cm .bc-home-hero__media {
    margin: 0 -18px;
    border-radius: 0;
  }

  .bc-cm .bc-home-hero__photo {
    border-radius: 0 0 26px 26px;
  }

  .bc-cm .bc-home-hero__fbcw {
    grid-column: auto;
    justify-content: center;
    margin-top: 0;
    min-height: 0;
  }

  .bc-cm .bc-home-hero__fbcw #feedback-widget-container {
    min-width: 0;
  }
}/* ── Reduced motion: alles direct zichtbaar, badge stil ──────────────────── */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-home-hero__hl {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .bc-cm .bc-home-hero__badge {
    animation: none;
  }
}/* bc-logo-marquee — homepage 2.0 logo-band (S2 uit het bouwbestek, fb-ronde
 * 12): creme band, kicker met count-up-accent, oneindige marquee binnen de
 * 1300-container met fade op de randen (geen lege balk-look). Hover pauzeert.
 * Reduced-motion: statische scrollbare strip, duplicaat-lijsten verborgen.
 * Kick-reveal volgt het statement-patroon (data-bc-reveal op de section).
 * Spacing/sizing literals byte-verbatim bouwbestek. */.bc-cm .bc-logo-marquee {
  background: var(--bc-cream);
  padding: 54px 0 58px;
}.bc-cm .bc-logo-marquee__kick {
  text-align: center;
  font: 700 14px/1.5 var(--bc-font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b665f;
  margin: 0 0 32px;
  padding: 0 var(--bc-gutter);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-logo-marquee.bc-visible .bc-logo-marquee__kick {
  opacity: 1;
  transform: none;
}.bc-cm .bc-logo-marquee__kick b {
  color: var(--bc-primary);
  font-variant-numeric: tabular-nums;
}.bc-cm .bc-logo-marquee__mask {
  position: relative;
  max-width: 1300px;
  margin: 0 auto;
  overflow: hidden;
}.bc-cm .bc-logo-marquee__mask::before,
.bc-cm .bc-logo-marquee__mask::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 140px;
  z-index: 3;
  pointer-events: none;
}.bc-cm .bc-logo-marquee__mask::before {
  left: 0;
  background: linear-gradient(to right, var(--bc-cream) 16%, transparent);
}.bc-cm .bc-logo-marquee__mask::after {
  right: 0;
  background: linear-gradient(to left, var(--bc-cream) 16%, transparent);
}.bc-cm .bc-logo-marquee__track {
  display: flex;
  gap: 0;
  width: -moz-max-content;
  width: max-content;
  animation: bcMarq 34s linear infinite;
}.bc-cm .bc-logo-marquee__track:hover {
  animation-play-state: paused;
}@keyframes bcMarq {
  to { transform: translateX(-33.3333%); }
}.bc-cm .bc-logo-marquee__track ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 78px;
  margin: 0;
  padding: 0 39px;
}.bc-cm .bc-logo-marquee__track img {
  height: 42px;
  width: auto;
  max-width: 145px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: grayscale(1);
  opacity: 0.68;
  transition: 0.3s;
}.bc-cm .bc-logo-marquee__track img:hover {
  filter: none;
  opacity: 1;
}@media (max-width: 640px) {
  .bc-cm .bc-logo-marquee__mask::before,
  .bc-cm .bc-logo-marquee__mask::after {
    width: 60px;
  }
}@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-logo-marquee__track {
    animation: none;
  }

  .bc-cm .bc-logo-marquee__mask {
    overflow-x: auto;
  }

  .bc-cm .bc-logo-marquee__track ul + ul {
    display: none;
  }

  .bc-cm .bc-logo-marquee__kick {
    opacity: 1;
    transform: none;
  }
}/* bc-check-usp — homepage 2.0 "Waarom Bar Company?" (S4 bouwbestek, fb-ronde
 * 12): creme band, intro-kolom naast 2-koloms checklist. Checks vullen groen
 * in via .is-filled (check-usp.js staggert; stroke-dashoffset tekent het
 * vinkje na). Reduced-motion: alles direct gevuld. Reveal op de section
 * (statement-patroon). Spacing/sizing literals byte-verbatim bouwbestek. */.bc-cm .bc-check-usp {
  background: var(--bc-cream);
  padding: 84px 0;
}.bc-cm .bc-check-usp__wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 70px;
  align-items: center;
}.bc-cm .bc-check-usp__eyebrow {
  font: 700 13px/1 var(--bc-font-body);
  letter-spacing: 0.22em;
  color: var(--bc-primary);
  text-transform: uppercase;
  margin: 0 0 18px;
}.bc-cm .bc-check-usp__title {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin: 0 0 20px;
  color: var(--bc-text);
}.bc-cm .bc-check-usp__body {
  font-family: var(--bc-font-body);
  color: #3d3a36;
  max-width: 28em;
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
}.bc-cm .bc-check-usp__body b,
.bc-cm .bc-check-usp__body strong {
  color: var(--bc-primary);
  font-weight: 700;
}/* ── Checklist: 2 kolommen, subtiele rijen, dot vult groen ──────────────── */.bc-cm .bc-check-usp__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 44px;
}.bc-cm .bc-check-usp__list li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(36, 36, 34, 0.12);
  font: 700 15px/1.35 var(--bc-font-body);
  color: var(--bc-text);
  opacity: 0.55;
  transition: opacity 0.45s ease;
}.bc-cm .bc-check-usp__list li.is-filled {
  opacity: 1;
}.bc-cm .bc-check-usp__dot {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(36, 36, 34, 0.22);
  background: var(--bc-cream);
  display: grid;
  place-items: center;
  transition: background 0.45s ease, border-color 0.45s ease,
    box-shadow 0.45s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}.bc-cm .bc-check-usp__dot svg {
  width: 12px;
  height: 12px;
}.bc-cm .bc-check-usp__dot path {
  stroke: var(--bc-green);
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.4s ease 0.2s;
}.bc-cm .bc-check-usp__list li.is-filled .bc-check-usp__dot {
  background: var(--bc-green);
  border-color: var(--bc-green);
  box-shadow: 0 8px 20px rgba(15, 128, 105, 0.32);
  transform: scale(1.08);
}.bc-cm .bc-check-usp__list li.is-filled .bc-check-usp__dot path {
  stroke: #fff;
  stroke-dashoffset: 0;
}/* ── Reveal: intro komt op met de section (statement-patroon) ───────────── */.bc-cm .bc-check-usp__intro {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-check-usp.bc-visible .bc-check-usp__intro {
  opacity: 1;
  transform: none;
}/* ── Mobiel ──────────────────────────────────────────────────────────────── */@media (max-width: 960px) {
  .bc-cm .bc-check-usp {
    padding: 66px 0;
  }

  .bc-cm .bc-check-usp__wrap {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .bc-cm .bc-check-usp__list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .bc-cm .bc-check-usp__list li {
    font-size: 15px;
    padding: 12px 0;
  }

  .bc-cm .bc-check-usp__dot {
    flex-basis: 32px;
    height: 32px;
  }
}/* ── Reduced motion: alles direct gevuld en zichtbaar ────────────────────── */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-check-usp__list li {
    opacity: 1;
  }

  .bc-cm .bc-check-usp__list li .bc-check-usp__dot {
    background: var(--bc-green);
    border-color: var(--bc-green);
  }

  .bc-cm .bc-check-usp__list li .bc-check-usp__dot path {
    stroke: #fff;
    stroke-dashoffset: 0;
  }

  .bc-cm .bc-check-usp__intro {
    opacity: 1;
    transform: none;
  }
}/* bc-concept-grid — homepage 2.0 concept-kiezer (S5 bouwbestek, fb-ronde 12).
 * 6-koloms grid: wide-kaarten span 3 (cocktails + koffie groot bovenaan),
 * standaard-kaarten span 2. Scrim van onderaf voor leesbaarheid; tablet en
 * mobiel krijgen een stevigere scrim + grotere tekst (fb-ronde 12, anders
 * onleesbaar op lichte foto's). Hover: kaart lift, foto zoomt, pijl-cirkel
 * swapt naar groen en veert naar rechts. Reveal via section (statement-
 * patroon) met nth-child stagger. Literals byte-verbatim bouwbestek. */.bc-cm .bc-concept-grid {
  background: var(--bc-white);
  padding: 110px 0;
  scroll-margin-top: 90px;
}.bc-cm .bc-concept-grid__wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}.bc-cm .bc-concept-grid__eyebrow {
  font: 700 13px/1 var(--bc-font-body);
  letter-spacing: 0.22em;
  color: var(--bc-primary);
  text-transform: uppercase;
  margin: 0 0 18px;
}.bc-cm .bc-concept-grid__title {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--bc-text);
}.bc-cm .bc-concept-grid__title .bc-script {
  font-size: 1.12em; /* bouwbestek-maat op echte Blakson Hustle */
  display: inline-block;
  transform: rotate(-2deg);
}.bc-cm .bc-concept-grid__intro {
  font-family: var(--bc-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: #3d3a36;
  max-width: 44em;
  margin: 14px 0 46px;
}.bc-cm .bc-concept-grid__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 26px;
}.bc-cm .bc-concept-grid__card {
  position: relative;
  grid-column: span 2;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  display: block;
  box-shadow: 0 20px 44px rgba(36, 36, 34, 0.14);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}.bc-cm .bc-concept-grid__card.is-wide {
  grid-column: span 3;
}.bc-cm .bc-concept-grid__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 66px rgba(36, 36, 34, 0.22);
}.bc-cm .bc-concept-grid__card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 4 / 4.4;
  display: block;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-concept-grid__card.is-wide img {
  aspect-ratio: 16 / 9.2;
}.bc-cm .bc-concept-grid__card:hover img {
  transform: scale(1.06);
}.bc-cm .bc-concept-grid__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(24, 23, 22, 0.78), rgba(24, 23, 22, 0.12) 52%, transparent 74%);
}.bc-cm .bc-concept-grid__num {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 2;
  font: 900 44px/1 'Merriweather', Georgia, serif;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 249, 240, 0.55);
}.bc-cm .bc-concept-grid__body {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  z-index: 2;
}.bc-cm .bc-concept-grid__body h3 {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: 26px;
  margin: 0 0 6px;
  color: #fff;
  text-shadow: 0 2px 14px rgba(24, 23, 22, 0.4);
}.bc-cm .bc-concept-grid__body p {
  margin: 0 0 14px;
  font: 600 15px/1.5 var(--bc-font-body);
  color: rgba(255, 249, 240, 0.95);
  max-width: 30em;
  text-shadow: 0 1px 10px rgba(24, 23, 22, 0.5);
}.bc-cm .bc-concept-grid__go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 800 13px/1 var(--bc-font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}.bc-cm .bc-concept-grid__go span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bc-primary);
  transition: background 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}.bc-cm .bc-concept-grid__go svg {
  width: 16px;
  height: 16px;
}.bc-cm .bc-concept-grid__card:hover .bc-concept-grid__go span {
  background: var(--bc-green);
  transform: translateX(6px);
}/* ── Reveal: kop + kaarten getrapt (statement-patroon) ───────────────────── */.bc-cm .bc-concept-grid__eyebrow,
.bc-cm .bc-concept-grid__title,
.bc-cm .bc-concept-grid__intro,
.bc-cm .bc-concept-grid__card {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-concept-grid__intro,
.bc-cm .bc-concept-grid__card:nth-child(2),
.bc-cm .bc-concept-grid__card:nth-child(4) {
  transition-delay: 0.12s;
}.bc-cm .bc-concept-grid__card:nth-child(5) {
  transition-delay: 0.24s;
}.bc-cm .bc-concept-grid.bc-visible .bc-concept-grid__eyebrow,
.bc-cm .bc-concept-grid.bc-visible .bc-concept-grid__title,
.bc-cm .bc-concept-grid.bc-visible .bc-concept-grid__intro,
.bc-cm .bc-concept-grid.bc-visible .bc-concept-grid__card {
  opacity: 1;
  transform: none;
}/* ── Tablet (641-960): 2 kolommen, grote concepten vol-breed ─────────────── */@media (max-width: 960px) and (min-width: 641px) {
  .bc-cm .bc-concept-grid {
    padding: 80px 0;
  }

  .bc-cm .bc-concept-grid__grid {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }

  .bc-cm .bc-concept-grid__card {
    grid-column: auto;
  }

  .bc-cm .bc-concept-grid__card.is-wide {
    grid-column: span 2;
  }

  .bc-cm .bc-concept-grid__card img {
    aspect-ratio: 4 / 4;
  }

  .bc-cm .bc-concept-grid__card.is-wide img {
    aspect-ratio: 16 / 8.5;
  }

  .bc-cm .bc-concept-grid__num {
    font-size: 38px;
  }

  /* donkerder scrim: tekst leesbaar op lichte foto's */
  .bc-cm .bc-concept-grid__card::after {
    background: linear-gradient(to top, rgba(24, 23, 22, 0.88), rgba(24, 23, 22, 0.38) 54%, rgba(24, 23, 22, 0.04) 80%);
  }
}/* ── Mobiel (<=640): 1 kolom, stevige scrim + grotere tekst ──────────────── */@media (max-width: 640px) {
  .bc-cm .bc-concept-grid {
    padding: 72px 0;
  }

  .bc-cm .bc-concept-grid__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .bc-cm .bc-concept-grid__card,
  .bc-cm .bc-concept-grid__card.is-wide {
    grid-column: auto;
  }

  .bc-cm .bc-concept-grid__card img,
  .bc-cm .bc-concept-grid__card.is-wide img {
    aspect-ratio: 16 / 10.5;
  }

  .bc-cm .bc-concept-grid__num {
    font-size: 34px;
  }

  .bc-cm .bc-concept-grid__body {
    left: 18px;
    right: 18px;
    bottom: 16px;
  }

  .bc-cm .bc-concept-grid__body h3 {
    font-size: 23px;
    text-shadow: 0 2px 12px rgba(24, 23, 22, 0.6);
  }

  .bc-cm .bc-concept-grid__card::after {
    background: linear-gradient(to top, rgba(24, 23, 22, 0.94), rgba(24, 23, 22, 0.5) 56%, rgba(24, 23, 22, 0.08) 84%);
  }

  .bc-cm .bc-concept-grid__body p {
    font-size: 15.5px;
    color: #fff;
    margin-bottom: 12px;
  }
}/* ── Reduced motion ──────────────────────────────────────────────────────── */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-concept-grid__eyebrow,
  .bc-cm .bc-concept-grid__title,
  .bc-cm .bc-concept-grid__intro,
  .bc-cm .bc-concept-grid__card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}/* bc-impression — homepage 2.0 impressie-strip (S6 bouwbestek, fb-ronde 12).
 * Full-bleed drag-strip: staande kaarten (3/4, radius 14) steken boven en
 * onder uit een creme band (::before). Even kaarten verspringen 34px.
 * Drag-to-scroll in impression-slider.js; de vlieg-choreografie naar het
 * videokader (video-scene.js) kloont deze kaarten naar een fixed laag
 * BINNEN .bc-cm (z-index 60, onder de sticky header op 80).
 * Literals byte-verbatim bouwbestek. */.bc-cm .bc-impression {
  position: relative;
  padding: 44px 0 6px;
  background: transparent;
}.bc-cm .bc-impression::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 120px;
  bottom: 120px;
  background: var(--bc-cream);
}.bc-cm .bc-impression__track {
  position: relative;
  display: flex;
  gap: 26px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 0 4px;
  scrollbar-width: none;
}.bc-cm .bc-impression__track::-webkit-scrollbar {
  display: none;
}.bc-cm .bc-impression__card {
  flex: 0 0 300px;
  scroll-snap-align: center;
}.bc-cm .bc-impression__card:nth-child(even) {
  margin-top: 34px;
}.bc-cm .bc-impression__card img {
  aspect-ratio: 3 / 4;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(36, 36, 34, 0.13);
  display: block;
}@media (max-width: 640px) {
  .bc-cm .bc-impression {
    padding: 32px 0;
  }

  .bc-cm .bc-impression::before {
    top: 80px;
    bottom: 80px;
  }

  .bc-cm .bc-impression__card {
    flex-basis: 220px;
  }
}/* bc-video-scene — homepage 2.0 video-scene (S7 bouwbestek, fb-ronde 12).
 * Donkere gradient-sectie met afgeronde topcorners over de impressie-band.
 * Statisch: poster + oranje play-knop (hover groen). Met .bc-vs-js (desktop,
 * motion-ok, impression-slider aanwezig) wordt de sectie 250vh hoog en pint
 * __sticky op 100vh: video-scene.js stuurt de vlieg-choreografie en fade
 * van kader + lead. Mobiel: statisch met mini-collage van 3 schuine foto's.
 * Literals byte-verbatim bouwbestek. */.bc-cm .bc-video-scene {
  position: relative;
  background: linear-gradient(180deg, #28241f 0%, var(--bc-dark) 55%, #1e1c1a 100%);
  border-radius: 48px 48px 0 0;
  margin-top: 0;
  overflow: clip;
}.bc-cm .bc-video-scene.bc-vs-js {
  height: 250vh;
}.bc-cm .bc-video-scene__sticky {
  position: relative;
  padding: 88px 0 96px;
}.bc-cm .bc-vs-js .bc-video-scene__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 60px 0;
}.bc-cm .bc-video-scene__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(54% 46% at 74% 16%, rgba(238, 116, 55, 0.15), transparent 70%);
  pointer-events: none;
}.bc-cm .bc-video-scene__lead {
  position: relative;
  text-align: center;
  color: var(--bc-cream);
  font: 700 20px/1.5 var(--bc-font-body);
  max-width: 30em;
  margin: 0 auto 34px;
}.bc-cm .bc-vs-js .bc-video-scene__lead {
  opacity: 0;
}.bc-cm .bc-video-scene__frame {
  position: relative;
  width: min(880px, 82vw);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 36px 80px rgba(0, 0, 0, 0.5);
  z-index: 2;
}.bc-cm .bc-vs-js .bc-video-scene__frame {
  opacity: 0.25;
  transform: scale(0.86);
}.bc-cm .bc-video-scene__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}.bc-cm .bc-video-scene__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 0;
  background: linear-gradient(to top, rgba(14, 13, 12, 0.35), transparent 55%);
  padding: 0;
}.bc-cm .bc-video-scene__play span {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--bc-primary);
  display: grid;
  place-items: center;
  box-shadow: 0 18px 44px rgba(238, 116, 55, 0.5);
  transition: 0.3s;
}.bc-cm .bc-video-scene__play:hover span {
  background: var(--bc-green);
  transform: scale(1.07);
}.bc-cm .bc-video-scene__play svg {
  width: 29px;
  height: 29px;
  margin-left: 5px;
}.bc-cm .bc-video-scene__mini {
  display: none;
}/* ── Mobiel/tablet (<=960): statisch + mini-collage ─────────────────────── */@media (max-width: 960px) {
  .bc-cm .bc-video-scene {
    border-radius: 32px 32px 0 0;
  }

  .bc-cm .bc-video-scene__sticky {
    padding: 64px 0 76px;
  }

  .bc-cm .bc-video-scene.bc-vs-js {
    height: auto;
  }

  .bc-cm .bc-vs-js .bc-video-scene__sticky {
    position: relative;
    height: auto;
    overflow: visible;
    display: block;
  }

  .bc-cm .bc-vs-js .bc-video-scene__frame {
    opacity: 1 !important;
    transform: none !important;
  }

  .bc-cm .bc-vs-js .bc-video-scene__lead {
    opacity: 1 !important;
  }

  .bc-cm .bc-video-scene__play span {
    width: 62px;
    height: 62px;
  }

  .bc-cm .bc-video-scene__play svg {
    width: 22px;
    height: 22px;
  }

  .bc-cm .bc-video-scene__frame {
    border-radius: 16px;
  }

  /* mini-collage: zelfde slider-foto's, statisch schuin boven het kader */
  .bc-cm .bc-video-scene__mini {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 0 auto 26px;
    position: relative;
  }

  .bc-cm .bc-video-scene__mini img {
    width: 86px;
    aspect-ratio: 3 / 4;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4);
  }

  .bc-cm .bc-video-scene__mini img:nth-child(1) {
    transform: rotate(-7deg) translateY(8px);
  }

  .bc-cm .bc-video-scene__mini img:nth-child(2) {
    transform: rotate(3deg) translateY(-4px);
    z-index: 2;
  }

  .bc-cm .bc-video-scene__mini img:nth-child(3) {
    transform: rotate(8deg) translateY(10px);
  }
}/* bc-team-intro — homepage 2.0 "Wij zijn Bar Company" (S8 bouwbestek,
 * fb-ronde 12). Team cut-out foto full-bleed links, onderkant strak op de
 * sectie-rand (align-end + padding-bottom 0); tekstkolom rechts binnen de
 * 1300-container. Outline ghost-counter tussen de alinea's; oranje swoosh
 * steekt linksboven over de sectiegrens (V4-feature).
 * Left-bleed via het waarom-team patroon: kolom groeit met (50vw - 50%) en
 * schuift even ver naar links; de ~halve-scrollbar overshoot wordt
 * horizontaal geclipt met overflow-x: clip, terwijl overflow-y visible
 * blijft zodat de swoosh over de sectiegrens kan steken (100vw-calc zou
 * ~7.5px scheef staan, zie bc-design-decisions "EXACT token map").
 * Literals byte-verbatim bouwbestek. */.bc-cm .bc-team-intro {
  position: relative;
  background: var(--bc-white);
  padding: 96px 0 0;
  overflow-x: clip;
  overflow-y: visible;
}.bc-cm .bc-team-intro__swoosh {
  position: absolute;
  left: -84px;
  top: -128px;
  width: min(400px, 34vw);
  aspect-ratio: 2380 / 1253;
  background: url("assets/swoosh-orange-full.png") no-repeat center / contain;
  transform: rotate(9deg);
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 16px 34px rgba(36, 36, 34, 0.25));
}.bc-cm .bc-team-intro__wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
  display: flex;
  align-items: flex-end;
  gap: 56px;
}/* Media-kolom: breekt uit naar de linker viewport-rand (waarom-team patroon). */.bc-cm .bc-team-intro__media {
  flex: 0 0 auto;
  width: calc(46% + (50vw - 50%));
  margin-left: calc(-1 * (50vw - 50%));
  min-width: 0;
  align-self: flex-end;
}.bc-cm .bc-team-intro__media img {
  width: 100%;
  max-width: 820px;
  margin-left: auto;
  display: block;
}/* Tekst-kolom: gewone container-child, rechterrand = containerrand. */.bc-cm .bc-team-intro__text {
  flex: 1 1 54%;
  min-width: 0;
  padding-bottom: 88px;
}.bc-cm .bc-team-intro__text-inner {
  max-width: 620px;
}.bc-cm .bc-team-intro__eyebrow {
  font: 700 13px/1 var(--bc-font-body);
  letter-spacing: 0.22em;
  color: var(--bc-primary);
  text-transform: uppercase;
  margin: 0 0 18px;
}.bc-cm .bc-team-intro__title {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(36px, 3.8vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin: 0 0 24px;
  color: var(--bc-text);
}.bc-cm .bc-team-intro__title .bc-script {
  font-size: 1.14em; /* bouwbestek-maat op echte Blakson Hustle */
  display: inline-block;
  transform: rotate(-2deg);
}.bc-cm .bc-team-intro__text p {
  font-family: var(--bc-font-body);
  font-size: 17px;
  line-height: 1.65;
  max-width: 38em;
  color: #3d3a36;
  margin: 0 0 17px;
}.bc-cm .bc-team-intro__text p b,
.bc-cm .bc-team-intro__text p strong {
  color: var(--bc-primary);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}/* Outline ghost-counter (2.500+ evenementen per jaar) */.bc-cm .bc-team-intro__ghost {
  margin: 6px 0 -4px -3px;
  font: 900 clamp(60px, 7vw, 112px)/0.9 'Merriweather', Georgia, serif;
  letter-spacing: -2px;
  color: transparent;
  -webkit-text-stroke: 2px rgba(238, 116, 55, 0.32);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}.bc-cm .bc-team-intro__ghost small {
  -webkit-text-stroke: 0;
  color: rgba(36, 36, 34, 0.35);
  font: 800 13px/1 var(--bc-font-body);
  letter-spacing: 0.22em;
  display: block;
  margin: 12px 0 0 6px;
  text-transform: uppercase;
}.bc-cm .bc-team-intro__link {
  display: inline-block;
  margin-top: 14px;
  font: 700 16px var(--bc-font-body);
  color: var(--bc-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--bc-primary);
  padding-bottom: 3px;
}.bc-cm .bc-team-intro__link:hover {
  color: var(--bc-green);
  border-color: var(--bc-green);
}/* ── Reveal (statement-patroon): media + tekst getrapt ───────────────────── */.bc-cm .bc-team-intro__media,
.bc-cm .bc-team-intro__text-inner {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-team-intro__text-inner {
  transition-delay: 0.12s;
}.bc-cm .bc-team-intro.bc-visible .bc-team-intro__media,
.bc-cm .bc-team-intro.bc-visible .bc-team-intro__text-inner {
  opacity: 1;
  transform: none;
}/* ── Mobiel (<=960): tekst eerst, foto eronder tegen de sectie-rand ──────── */@media (max-width: 960px) {
  .bc-cm .bc-team-intro {
    padding: 76px 0 0;
  }

  .bc-cm .bc-team-intro__wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .bc-cm .bc-team-intro__media {
    order: 2;
    width: 100%;
    margin-left: 0;
  }

  .bc-cm .bc-team-intro__media img {
    margin-left: 0;
  }

  .bc-cm .bc-team-intro__text {
    order: 1;
    padding-bottom: 0;
  }
}/* ── Reduced motion ──────────────────────────────────────────────────────── */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-team-intro__media,
  .bc-cm .bc-team-intro__text-inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}/* bc-review-spotlight — homepage 2.0 reviews (S9 bouwbestek, fb-ronde 12).
 * Creme band: kop-rij (serif-heading + donkere score-chip met halfgevulde
 * sterren + FC/Google merkje), 3 grote quote-kaarten tegelijk (editorial:
 * middelste -22px, laatste +26px, oranje glyph, sterren + klantlogo) en een
 * donkere Meer-referenties knop. <=1000: gestapeld; <=700: swipe-slider met
 * scroll-snap (fb-ronde 12), padding-top 30 vangt de -20px glyph.
 * Literals byte-verbatim bouwbestek. */.bc-cm .bc-review-spotlight {
  background: var(--bc-cream);
  padding: 110px 0 150px;
}.bc-cm .bc-rs__wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}.bc-cm .bc-rs__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  flex-wrap: wrap;
  margin-bottom: 64px;
}.bc-cm .bc-rs__title {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--bc-text);
}.bc-cm .bc-rs__title .bc-script {
  font-size: 1.12em; /* bouwbestek-maat op echte Blakson Hustle */
  display: inline-block;
  transform: rotate(-2deg);
}/* ── Score-chip (donker, met halfgevulde sterren) ────────────────────────── */.bc-cm .bc-rs__chip {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: var(--bc-dark);
  color: #fff;
  border-radius: 18px;
  padding: 16px 24px;
  box-shadow: 0 18px 44px rgba(36, 36, 34, 0.22);
}.bc-cm .bc-rs__num {
  font: 900 32px/1 'Merriweather', Georgia, serif;
}.bc-cm .bc-rs__num small {
  font: 700 14px var(--bc-font-body);
  color: #8f887c;
  margin-left: 2px;
}.bc-cm .bc-rs__mid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}.bc-cm .bc-rs__sub {
  font: 700 12.5px/1.2 var(--bc-font-body);
  color: #cfc8bc;
}.bc-cm .bc-rs__src {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding-left: 18px;
}/* halfgevulde sterren: grijze basis + oranje overlay op breedte */.bc-cm .bc-rs__stars-duo {
  position: relative;
  display: inline-block;
  font-size: 15px;
  letter-spacing: 2.5px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.26);
  white-space: nowrap;
}.bc-cm .bc-rs__stars-duo > i {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--bc-primary);
  font-style: normal;
  pointer-events: none;
}/* Feedback Company merkje (widget-stijl; geen los logo-bestand) */.bc-cm .bc-rs__src {
  display: flex;
  align-items: center;
  gap: 9px;
}.bc-cm .bc-rs__fc-ic {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #25b34b;
  display: grid;
  place-items: center;
}.bc-cm .bc-rs__fc-ic svg {
  width: 15px;
  height: 15px;
}.bc-cm .bc-rs__fc-tx {
  font: 800 11.5px/1.25 var(--bc-font-body);
  color: #e8e2d7;
  text-align: left;
}.bc-cm .bc-rs__g-ic {
  width: 24px;
  height: 24px;
}/* ── Quote-kaarten: 3 tegelijk, editorial offsets ────────────────────────── */.bc-cm .bc-rs__grid {
  display: grid;
  grid-template-columns: 1fr 1.12fr 1fr;
  gap: 36px;
  align-items: start;
}.bc-cm .bc-rs__quote {
  position: relative;
  margin: 0;
  background: #fff;
  border-radius: 18px;
  padding: 48px 32px 34px;
  box-shadow: 0 22px 50px rgba(36, 36, 34, 0.11);
  display: flex;
  flex-direction: column;
}.bc-cm .bc-rs__glyph {
  position: absolute;
  top: -24px;
  left: 24px;
  font: 900 96px/1 'Merriweather', Georgia, serif;
  color: var(--bc-primary);
  height: 50px;
  overflow: hidden;
  pointer-events: none;
}.bc-cm .bc-rs__quote blockquote {
  margin: 0 0 24px;
  font: 700 20px/1.5 'Merriweather', Georgia, serif;
  color: var(--bc-text);
  flex: 1;
}.bc-cm .bc-rs__quote:nth-child(2) {
  transform: translateY(-22px);
}.bc-cm .bc-rs__quote:nth-child(2) blockquote {
  font-size: 23px;
}.bc-cm .bc-rs__quote:nth-child(3) {
  transform: translateY(26px);
}.bc-cm .bc-rs__quote figcaption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}.bc-cm .bc-rs__quote figcaption img {
  height: 46px;
  width: auto;
  max-width: 160px;
  -o-object-fit: contain;
     object-fit: contain;
}.bc-cm .bc-rs__stars {
  color: var(--bc-primary);
  letter-spacing: 3px;
  font-size: 15px;
}.bc-cm .bc-rs__foot {
  display: flex;
  justify-content: center;
  margin-top: 74px;
}/* ── Reveal (statement-patroon): kop, kaarten getrapt, foot ──────────────── */.bc-cm .bc-rs__head,
.bc-cm .bc-rs__quote,
.bc-cm .bc-rs__foot {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-rs__head,
.bc-cm .bc-rs__foot {
  transform: translateY(26px);
}/* kaarten hebben al een offset-transform; reveal alleen via opacity zodat
   nth-child offsets intact blijven */.bc-cm .bc-rs__quote:nth-child(2) {
  transition-delay: 0.12s;
}.bc-cm .bc-rs__quote:nth-child(3) {
  transition-delay: 0.24s;
}.bc-cm .bc-review-spotlight.bc-visible .bc-rs__head,
.bc-cm .bc-review-spotlight.bc-visible .bc-rs__quote,
.bc-cm .bc-review-spotlight.bc-visible .bc-rs__foot {
  opacity: 1;
}.bc-cm .bc-review-spotlight.bc-visible .bc-rs__head,
.bc-cm .bc-review-spotlight.bc-visible .bc-rs__foot {
  transform: none;
}/* ── <=1000: gestapeld, offsets eruit ────────────────────────────────────── */@media (max-width: 1000px) {
  .bc-cm .bc-review-spotlight {
    padding: 80px 0 100px;
  }

  .bc-cm .bc-rs__grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .bc-cm .bc-rs__quote:nth-child(2),
  .bc-cm .bc-rs__quote:nth-child(3) {
    transform: none;
  }

  .bc-cm .bc-rs__quote {
    padding: 40px 24px 28px;
  }

  .bc-cm .bc-rs__quote:nth-child(2) blockquote {
    font-size: 21px;
  }
}/* ── <=700: swipe-slider (fb-ronde 12) ───────────────────────────────────── */@media (max-width: 700px) {
  .bc-cm .bc-review-spotlight {
    padding: 72px 0 90px;
  }

  .bc-cm .bc-rs__grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--bc-gutter));
    padding: 30px var(--bc-gutter) 12px;
    scrollbar-width: none;
  }

  .bc-cm .bc-rs__grid::-webkit-scrollbar {
    display: none;
  }

  .bc-cm .bc-rs__quote {
    flex: 0 0 82%;
    max-width: 340px;
    scroll-snap-align: center;
  }

  .bc-cm .bc-rs__quote blockquote,
  .bc-cm .bc-rs__quote:nth-child(2) blockquote {
    font-size: 18px;
    line-height: 1.5;
  }

  .bc-cm .bc-rs__glyph {
    font-size: 80px;
    top: -20px;
  }

  .bc-cm .bc-rs__foot {
    margin-top: 40px;
  }
}/* ── Reduced motion ──────────────────────────────────────────────────────── */@media (prefers-reduced-motion: reduce) {
  .bc-cm .bc-rs__head,
  .bc-cm .bc-rs__quote,
  .bc-cm .bc-rs__foot {
    opacity: 1;
    transition: none;
  }

  .bc-cm .bc-rs__head,
  .bc-cm .bc-rs__foot {
    transform: none;
  }
}/* bc-site-footer — homepage 2.0 footer (bouwbestek, fb-ronde 12). BC-zwart,
 * afgeronde topcorners over de reviews-band (margin-top -2 dicht de naad),
 * oranje swoosh over de sectiegrens rechtsboven, script-merkregel + CTA/tel,
 * 4 kolommen en een creme copyright-strip (mobiel gecentreerd, fb-ronde 12).
 * Geen overflow-clip op de footer zelf: de swoosh steekt bewust boven de
 * sectie uit; horizontale overflow wordt door html/body overflow-x geclipt.
 * Literals byte-verbatim bouwbestek. */.bc-cm .bc-site-footer {
  background: var(--bc-dark);
  color: #efe9df;
  padding: 0;
  border-radius: 48px 48px 0 0;
  margin-top: -2px;
  position: relative;
}.bc-cm .bc-sf__bigswoosh {
  position: absolute;
  top: -150px;
  right: -90px;
  width: min(460px, 38vw);
  aspect-ratio: 2380 / 1253;
  background: url("assets/swoosh-orange-full.png") no-repeat center / contain;
  transform: rotate(-9deg);
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 18px 40px rgba(36, 36, 34, 0.28));
}.bc-cm .bc-sf__wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}/* ── Kop: script-merkregel + CTA/tel ─────────────────────────────────────── */.bc-cm .bc-sf__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  flex-wrap: wrap;
  padding: 70px 0 50px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}.bc-cm .bc-sf__mark {
  font-family: 'Blakson Hustle', 'Damion', cursive;
  font-weight: 400;
  font-size: clamp(38px, 4.4vw, 56px);
  color: var(--bc-primary);
  transform: rotate(-3deg);
  display: inline-block;
  line-height: 1;
}.bc-cm .bc-sf__cta {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}.bc-cm .bc-sf__tel {
  color: #efe9df;
  font: 700 16px var(--bc-font-body);
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 2px;
  transition: 0.2s;
}.bc-cm .bc-sf__tel:hover {
  color: var(--bc-primary);
  border-color: var(--bc-primary);
}/* ── Grid: 4 kolommen ────────────────────────────────────────────────────── */.bc-cm .bc-sf__grid {
  display: grid;
  grid-template-columns: 1.2fr 1.1fr 1.3fr 1fr;
  gap: 56px;
  padding-bottom: 70px;
}.bc-cm .bc-site-footer h5 {
  font: 800 13px/1 var(--bc-font-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bc-cream);
  margin: 0 0 22px;
}.bc-cm .bc-site-footer p {
  margin: 0 0 6px;
  font-family: var(--bc-font-body);
  font-size: 15px;
  line-height: 1.65;
  color: #cfc8bc;
}.bc-cm .bc-sf__note {
  color: #efe9df;
}.bc-cm .bc-sf__contact-lines {
  margin-top: 14px;
}.bc-cm .bc-site-footer a {
  color: #efe9df;
  text-decoration: none;
}.bc-cm .bc-site-footer a:hover {
  color: var(--bc-primary);
}.bc-cm .bc-site-footer .bc-btn:hover {
  color: #fff;
}/* ── Review-regels: editorial i.p.v. kaartjes ────────────────────────────── */.bc-cm .bc-sf__rev {
  max-width: 330px;
}.bc-cm .bc-sf__rev-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 15px 0;
}.bc-cm .bc-sf__rev-row + .bc-sf__rev-row {
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}.bc-cm .bc-sf__rnum {
  font: 900 34px/1 'Merriweather', Georgia, serif;
  color: #fff;
  flex: 0 0 auto;
  min-width: 86px;
}.bc-cm .bc-sf__rnum small {
  font: 700 13px var(--bc-font-body);
  color: #8f887c;
  margin-left: 2px;
}.bc-cm .bc-sf__rmid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}.bc-cm .bc-sf__rsub {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 12.5px/1.3 var(--bc-font-body);
  color: #cfc8bc;
}.bc-cm .bc-sf__fc-dot {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: #25b34b;
  display: grid;
  place-items: center;
}.bc-cm .bc-sf__fc-dot svg {
  width: 10px;
  height: 10px;
}.bc-cm .bc-sf__g-ic {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}/* halfgevulde sterren: grijze basis + oranje overlay op breedte */.bc-cm .bc-sf__stars-duo {
  position: relative;
  display: inline-block;
  font-size: 15px;
  letter-spacing: 2.5px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.26);
  white-space: nowrap;
}.bc-cm .bc-sf__stars-duo > i {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--bc-primary);
  font-style: normal;
  pointer-events: none;
}/* ── Handige links ───────────────────────────────────────────────────────── */.bc-cm .bc-sf__links {
  list-style: none;
  margin: 0;
  padding: 0;
}.bc-cm .bc-sf__links li {
  padding: 5px 0;
  font-family: var(--bc-font-body);
  font-size: 15px;
}/* ── Social + Instagram-grid ─────────────────────────────────────────────── */.bc-cm .bc-sf__socrow {
  display: flex;
  gap: 10px;
  margin: 0 0 18px;
}.bc-cm .bc-sf__socrow a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  color: #efe9df;
  transition: 0.25s;
}.bc-cm .bc-sf__socrow a:hover {
  border-color: var(--bc-primary);
  color: var(--bc-primary);
}.bc-cm .bc-sf__socrow svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}.bc-cm .bc-sf__insta-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 14px var(--bc-font-body);
  margin-bottom: 14px;
}.bc-cm .bc-sf__insta-head img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}.bc-cm .bc-sf__insta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 16px;
  max-width: 280px;
}.bc-cm .bc-sf__insta img {
  width: 100%;
  aspect-ratio: 1;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  opacity: 0.85;
  transition: 0.3s;
  display: block;
}.bc-cm .bc-sf__insta img:hover {
  opacity: 1;
  transform: scale(1.04) rotate(-1deg);
}.bc-cm .bc-sf__ghostbtn {
  display: inline-block;
  background: none;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #efe9df;
  font: 700 13px var(--bc-font-body);
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: 0.25s;
  margin-right: 10px;
}.bc-cm .bc-sf__ghostbtn:hover {
  border-color: var(--bc-primary);
  color: var(--bc-primary);
}/* ── Copyright-strip (creme) ─────────────────────────────────────────────── */.bc-cm .bc-sf__bottom {
  background: var(--bc-cream);
}.bc-cm .bc-sf__bottom-wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 18px var(--bc-gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  font: 700 13px var(--bc-font-body);
  color: var(--bc-dark);
}.bc-cm .bc-sf__blogo {
  height: 30px;
  width: auto;
}.bc-cm .bc-sf__bottom-wrap nav {
  margin-left: auto;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}.bc-cm .bc-sf__bottom-wrap a {
  color: var(--bc-dark);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(36, 36, 34, 0.3);
}.bc-cm .bc-sf__bottom-wrap a:hover {
  color: var(--bc-primary);
  border-color: var(--bc-primary);
}/* ── Tablet (<=960) ──────────────────────────────────────────────────────── */@media (max-width: 960px) {
  .bc-cm .bc-site-footer {
    border-radius: 32px 32px 0 0;
  }

  .bc-cm .bc-sf__bigswoosh {
    width: 240px;
    right: -20px;
    top: -70px;
  }

  .bc-cm .bc-sf__head {
    padding: 54px 0 40px;
    margin-bottom: 46px;
  }

  .bc-cm .bc-sf__grid {
    grid-template-columns: 1fr 1fr;
    gap: 44px;
  }
}/* ── Mobiel (<=640): copyright-strip gecentreerd (fb-ronde 12) ───────────── */@media (max-width: 640px) {
  .bc-cm .bc-sf__grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .bc-cm .bc-sf__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .bc-cm .bc-sf__rev {
    max-width: none;
  }

  .bc-cm .bc-sf__bigswoosh {
    width: 170px;
    top: -52px;
    right: -30px;
  }

  .bc-cm .bc-sf__bottom-wrap {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 8px;
  }

  .bc-cm .bc-sf__bottom-wrap nav {
    margin-left: 0;
    justify-content: center;
  }
}/* === a11y — globale scroll-reveal failsafe (prefers-reduced-motion); laatst zodat hij wint === *//* base/reveal.css — globale a11y-failsafe voor scroll-reveal (data-bc-reveal).
 *
 * Component-CSS zet reveal-blokken op opacity:0 + translateY tot het BCReveal
 * IIFE (base/reveal.js) de .bc-visible class toevoegt zodra het blok in beeld
 * scrollt. Deze regel is de gedeelde a11y-failsafe:
 *
 *   prefers-reduced-motion: toon elk [data-bc-reveal] blok meteen, statisch,
 *   geen schuif/fade. Dekt ALLE reveal-blokken in een keer (de meeste
 *   component-CSS heeft geen eigen @media-failsafe). P17 deel 1.
 *
 * NB: de no-JS-failsafe (blokken blijven onzichtbaar als de JS helemaal niet
 * draait) is P17 deel 2 — bewust geparkeerd; vereist een .js-class-gate over
 * alle component-CSS heen.
 */@media (prefers-reduced-motion: reduce) {
  .bc-cm [data-bc-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}