@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(https://cdn.barcompany.nl/design-system/latest/...) 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(https://cdn.barcompany.nl/design-system/latest/fonts/BlaksonHustle-Regular.woff2) format('woff2'),
       url(https://cdn.barcompany.nl/design-system/latest/fonts/BlaksonHustle-Regular.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}/* Mulish self-hosted (2026-07-15, "Op maat"-font-incident).
   Het hele design-system leunt op Mulish (--bc-font-body/--bc-font-heading)
   maar laadde 'm nooit zelf: op barcompany.nl kwam Mulish toevallig van het
   Blocksy-thema (Google Fonts) en in de tool-previews van een losse
   fonts-link. Thema weg (Best4U-exit) = font weg; en het thema laadt
   gewicht 800 niet eens terwijl de blokken dat veelvuldig gebruiken
   (strong-regels op 800) — dat synthetiseerde de browser stil.
   Mulish is een VARIABLE font (Google serveert per weight identieke bytes):
   één file per subset dekt 200-1000. Unicode-ranges = de standaard
   Google-subset-split (latin + latin-ext). */@font-face {
  font-family: 'Mulish';
  src: url(https://cdn.barcompany.nl/design-system/latest/fonts/Mulish-Variable.woff2) format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {
  font-family: 'Mulish';
  src: url(https://cdn.barcompany.nl/design-system/latest/fonts/Mulish-Variable-ext.woff2) format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}/* === 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);
}/* ════════════════════════════════════════════════════════════════════════
   FB-ronde 2.0 (Bram 2026-07-16, toggle-akkoord): alle offwhite banden
   lopen licht schuin door (2.2vw parallellogram, zelfde diagonale taal als
   t2 maar zachter en over de VOLLE bandbreedte). Geen padding-compensatie:
   de hap (max ~32px) valt binnen de ruime basis-padding van deze banden.
   Secties met een expliciete slant-in/out houden hun eigen 48px-taal
   (:not-guards), en de bc-swx swoosh-ankers liggen als losse divs boven de
   grens, dus die knipt deze clip niet af (br2-architectuur).
   ════════════════════════════════════════════════════════════════════════ *//* Iter 2 (Bram 2026-07-23): band-GROEP-bewust. Losse banden elk apart
   clippen gaf witte wiggen zodra twee cream-secties op elkaar staan
   (dubbele diagonaal) en een wit vlak boven de donkere footer. Regels:
   alleen de BUITENranden van een aaneengesloten cream-reeks zijn schuin;
   gedeelde randen tussen cream-secties zijn recht (naadloos); de laatste
   band voor de site-footer schuift met zijn diagonaal OVER de footer heen.

   Twee selector-lijsten (bij een nieuw band-type: op ALLE plekken in dit
   blok toevoegen):
   - CLIPBAND  = de 16 typen die de 2.2vw-parallellogram dragen;
   - CREAMBUUR = CLIPBAND + cream-secties ZONDER clip (bc-usp-strip,
     bc-logo-strip--band): grenst een clipband daaraan, dan moet de
     gedeelde rand ook recht.
   :has()-states zijn progressive enhancement: zonder :has valt een rand
   terug op de oude beide-schuin-look (wig), nooit op iets kapots. *//* Iter 3 (Bram 2026-07-24): de clip zit op een ::before-ACHTERGRONDLAAG,
   niet meer op de sectie zelf. Content, foto's en deco-arcs worden nooit
   meer door de diagonaal afgesneden (halve arcs weg); media die onder de
   bandrand uitsteekt (bv. de review-spotlight-foto) loopt visueel onder de
   VOLGENDE band door: elke band is een eigen stacking context (isolation),
   de ::before-bg ligt daarbinnen achter de eigen content maar boven alles
   van eerdere secties (DOM-volgorde). Omdat de sectie-bg naar transparent
   gaat draagt --bc-band-bg de kleur: cream default, offwhite voor
   price-cards--white (sync met de component-declaratie). .bc-cm.bc-cm is
   een bewuste specificity-bump (0,3,0) zodat transparent van elke
   component-bg (0,2,0) wint. *//* 0. Sectie-reset: bg naar de ::before-laag, eigen stacking context. */.bc-cm.bc-cm :is(.bc-rx--tone-cream, .bc-price-cards, .bc-review-spotlight, .bc-why-list, .bc-specs, .bc-concept-grid--cream, .bc-faq--serif, .bc-check-usp, .bc-logo-marquee, .bc-contact-section, .bc-profile--cream, .bc-profile--qa-duo, .bc-collega-cta--cream, .bc-author-expertise, .bc-reviews, .bc-related-pages--slider):not(.bc-rx--slant-in):not(.bc-rx--slant-out) {
  --bc-band-bg: var(--bc-cream);
  position: relative;
  isolation: isolate;
  background: transparent;
  clip-path: none;
}.bc-cm.bc-cm .bc-price-cards--white:not(.bc-rx--slant-in):not(.bc-rx--slant-out) {
  --bc-band-bg: var(--bc-white);
}/* 1. Basis: de LAAG clipt boven + onder (alleenstaande band). */.bc-cm :is(.bc-rx--tone-cream, .bc-price-cards, .bc-review-spotlight, .bc-why-list, .bc-specs, .bc-concept-grid--cream, .bc-faq--serif, .bc-check-usp, .bc-logo-marquee, .bc-contact-section, .bc-profile--cream, .bc-profile--qa-duo, .bc-collega-cta--cream, .bc-author-expertise, .bc-reviews, .bc-related-pages--slider):not(.bc-rx--slant-in):not(.bc-rx--slant-out)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bc-band-bg);
  clip-path: polygon(0 2.2vw, 100% 0, 100% calc(100% - 2.2vw), 0 100%);
}/* 2. Band direct NA een cream-buur (evt. met een bc-swx-anker ertussen):
      bovenrand recht, onderrand schuin. */.bc-cm :is(.bc-rx--tone-cream, .bc-price-cards, .bc-review-spotlight, .bc-why-list, .bc-specs, .bc-concept-grid--cream, .bc-faq--serif, .bc-check-usp, .bc-logo-marquee, .bc-contact-section, .bc-profile--cream, .bc-profile--qa-duo, .bc-collega-cta--cream, .bc-author-expertise, .bc-reviews, .bc-related-pages--slider, .bc-usp-strip, .bc-logo-strip--band) + :is(.bc-rx--tone-cream, .bc-price-cards, .bc-review-spotlight, .bc-why-list, .bc-specs, .bc-concept-grid--cream, .bc-faq--serif, .bc-check-usp, .bc-logo-marquee, .bc-contact-section, .bc-profile--cream, .bc-profile--qa-duo, .bc-collega-cta--cream, .bc-author-expertise, .bc-reviews, .bc-related-pages--slider):not(.bc-rx--slant-in):not(.bc-rx--slant-out)::before,
.bc-cm :is(.bc-rx--tone-cream, .bc-price-cards, .bc-review-spotlight, .bc-why-list, .bc-specs, .bc-concept-grid--cream, .bc-faq--serif, .bc-check-usp, .bc-logo-marquee, .bc-contact-section, .bc-profile--cream, .bc-profile--qa-duo, .bc-collega-cta--cream, .bc-author-expertise, .bc-reviews, .bc-related-pages--slider, .bc-usp-strip, .bc-logo-strip--band) + .bc-swx + :is(.bc-rx--tone-cream, .bc-price-cards, .bc-review-spotlight, .bc-why-list, .bc-specs, .bc-concept-grid--cream, .bc-faq--serif, .bc-check-usp, .bc-logo-marquee, .bc-contact-section, .bc-profile--cream, .bc-profile--qa-duo, .bc-collega-cta--cream, .bc-author-expertise, .bc-reviews, .bc-related-pages--slider):not(.bc-rx--slant-in):not(.bc-rx--slant-out)::before {
  /* -1px top-overlap: subpixel-seam (dun wit lijntje) tussen cream-buur en
     deze laag voorkomen (Bram-fb 2026-07-24, logo-band -> CTA). */
  inset: -1px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.2vw), 0 100%);
}/* 3. Band VOOR een cream-buur: bovenrand schuin, onderrand recht. */.bc-cm :is(.bc-rx--tone-cream, .bc-price-cards, .bc-review-spotlight, .bc-why-list, .bc-specs, .bc-concept-grid--cream, .bc-faq--serif, .bc-check-usp, .bc-logo-marquee, .bc-contact-section, .bc-profile--cream, .bc-profile--qa-duo, .bc-collega-cta--cream, .bc-author-expertise, .bc-reviews, .bc-related-pages--slider):not(.bc-rx--slant-in):not(.bc-rx--slant-out):has(+ :is(.bc-rx--tone-cream, .bc-price-cards, .bc-review-spotlight, .bc-why-list, .bc-specs, .bc-concept-grid--cream, .bc-faq--serif, .bc-check-usp, .bc-logo-marquee, .bc-contact-section, .bc-profile--cream, .bc-profile--qa-duo, .bc-collega-cta--cream, .bc-author-expertise, .bc-reviews, .bc-related-pages--slider, .bc-usp-strip, .bc-logo-strip--band))::before,
.bc-cm :is(.bc-rx--tone-cream, .bc-price-cards, .bc-review-spotlight, .bc-why-list, .bc-specs, .bc-concept-grid--cream, .bc-faq--serif, .bc-check-usp, .bc-logo-marquee, .bc-contact-section, .bc-profile--cream, .bc-profile--qa-duo, .bc-collega-cta--cream, .bc-author-expertise, .bc-reviews, .bc-related-pages--slider):not(.bc-rx--slant-in):not(.bc-rx--slant-out):has(+ .bc-swx + :is(.bc-rx--tone-cream, .bc-price-cards, .bc-review-spotlight, .bc-why-list, .bc-specs, .bc-concept-grid--cream, .bc-faq--serif, .bc-check-usp, .bc-logo-marquee, .bc-contact-section, .bc-profile--cream, .bc-profile--qa-duo, .bc-collega-cta--cream, .bc-author-expertise, .bc-reviews, .bc-related-pages--slider, .bc-usp-strip, .bc-logo-strip--band))::before {
  clip-path: polygon(0 2.2vw, 100% 0, 100% 100%, 0 100%);
}/* 4. Band TUSSEN twee cream-buren: helemaal geen clip (midden van de reeks). */.bc-cm :is(.bc-rx--tone-cream, .bc-price-cards, .bc-review-spotlight, .bc-why-list, .bc-specs, .bc-concept-grid--cream, .bc-faq--serif, .bc-check-usp, .bc-logo-marquee, .bc-contact-section, .bc-profile--cream, .bc-profile--qa-duo, .bc-collega-cta--cream, .bc-author-expertise, .bc-reviews, .bc-related-pages--slider, .bc-usp-strip, .bc-logo-strip--band) + :is(.bc-rx--tone-cream, .bc-price-cards, .bc-review-spotlight, .bc-why-list, .bc-specs, .bc-concept-grid--cream, .bc-faq--serif, .bc-check-usp, .bc-logo-marquee, .bc-contact-section, .bc-profile--cream, .bc-profile--qa-duo, .bc-collega-cta--cream, .bc-author-expertise, .bc-reviews, .bc-related-pages--slider):not(.bc-rx--slant-in):not(.bc-rx--slant-out):has(+ :is(.bc-rx--tone-cream, .bc-price-cards, .bc-review-spotlight, .bc-why-list, .bc-specs, .bc-concept-grid--cream, .bc-faq--serif, .bc-check-usp, .bc-logo-marquee, .bc-contact-section, .bc-profile--cream, .bc-profile--qa-duo, .bc-collega-cta--cream, .bc-author-expertise, .bc-reviews, .bc-related-pages--slider, .bc-usp-strip, .bc-logo-strip--band))::before {
  inset: -1px 0 0;
  clip-path: none;
}/* 5. Laatste band voor de site-footer (herzien 2026-07-24, Bram: de
      footer-swoosh werd afgekapt): de band loopt RECHT door tot de footer;
      de FOOTER schuift 2.2vw omhoog en draagt de diagonaal zelf op een
      eigen geclipte ::before-achtergrondlaag. Zo blijft de cream in de
      diagonale hap zichtbaar EN steekt de footer-swoosh (die boven de
      footer uitsteekt) ongesneden over de band heen: de footer ligt als
      geheel boven de band via DOM-volgorde, zonder z-index-strijd. */.bc-cm :is(.bc-rx--tone-cream, .bc-price-cards, .bc-review-spotlight, .bc-why-list, .bc-specs, .bc-concept-grid--cream, .bc-faq--serif, .bc-check-usp, .bc-logo-marquee, .bc-contact-section, .bc-profile--cream, .bc-profile--qa-duo, .bc-collega-cta--cream, .bc-author-expertise, .bc-reviews, .bc-related-pages--slider):not(.bc-rx--slant-in):not(.bc-rx--slant-out):has(+ .bc-site-footer)::before {
  clip-path: polygon(0 2.2vw, 100% 0, 100% 100%, 0 100%);
}.bc-cm.bc-cm :is(.bc-rx--tone-cream, .bc-price-cards, .bc-review-spotlight, .bc-why-list, .bc-specs, .bc-concept-grid--cream, .bc-faq--serif, .bc-check-usp, .bc-logo-marquee, .bc-contact-section, .bc-profile--cream, .bc-profile--qa-duo, .bc-collega-cta--cream, .bc-author-expertise, .bc-reviews, .bc-related-pages--slider):not(.bc-rx--slant-in):not(.bc-rx--slant-out) + .bc-site-footer {
  margin-top: -2.2vw;
  background: transparent;
  isolation: isolate;
}.bc-cm :is(.bc-rx--tone-cream, .bc-price-cards, .bc-review-spotlight, .bc-why-list, .bc-specs, .bc-concept-grid--cream, .bc-faq--serif, .bc-check-usp, .bc-logo-marquee, .bc-contact-section, .bc-profile--cream, .bc-profile--qa-duo, .bc-collega-cta--cream, .bc-author-expertise, .bc-reviews, .bc-related-pages--slider):not(.bc-rx--slant-in):not(.bc-rx--slant-out) + .bc-site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bc-dark);
  border-radius: 48px 48px 0 0;
  clip-path: polygon(0 2.2vw, 100% 0, 100% 100%, 0 100%);
}/* 6. Band als allerlaatste element (WP-context: de theme-footer volgt
      buiten .bc-cm): onderrand recht, geen zwevende witte driehoek. */.bc-cm :is(.bc-rx--tone-cream, .bc-price-cards, .bc-review-spotlight, .bc-why-list, .bc-specs, .bc-concept-grid--cream, .bc-faq--serif, .bc-check-usp, .bc-logo-marquee, .bc-contact-section, .bc-profile--cream, .bc-profile--qa-duo, .bc-collega-cta--cream, .bc-author-expertise, .bc-reviews, .bc-related-pages--slider):not(.bc-rx--slant-in):not(.bc-rx--slant-out):last-child::before {
  clip-path: polygon(0 2.2vw, 100% 0, 100% 100%, 0 100%);
}/* ── Iter 3b: het 48px-slant-systeem (t2, bc-rx--slant-in/out) clipt om
   dezelfde reden op een ::before-laag: deco-arcs (bv. de reviews-arc op de
   gallery-grens) en foto's worden niet meer door de diagonaal afgesneden.
   bc-cta uitgezonderd: die draagt een achtergrond-IMAGE op de sectie zelf
   (laag verplaatsen zou de foto clippen). De regels hieronder staan NA het
   t2-blok bovenin en winnen daar bewust van (zelfde specificity, latere
   source-order); de per-sectie padding-compensaties blijven ongemoeid.
   Kleuren sync met t2: white default, cream voor reviews/tone-cream,
   #0e211c voor tone-dark (literal zoals het t2-blok). ── */.bc-cm.bc-cm :is(.bc-rx--slant-in, .bc-rx--slant-out):not(.bc-cta) {
  --bc-band-bg: var(--bc-white);
  position: relative;
  isolation: isolate;
  background: transparent;
  clip-path: none;
}.bc-cm.bc-cm .bc-reviews:is(.bc-rx--slant-in, .bc-rx--slant-out),
.bc-cm.bc-cm .bc-rx--tone-cream:is(.bc-rx--slant-in, .bc-rx--slant-out) {
  --bc-band-bg: var(--bc-cream);
}.bc-cm.bc-cm .bc-rx--tone-dark:is(.bc-rx--slant-in, .bc-rx--slant-out) {
  --bc-band-bg: #0e211c;
}.bc-cm .bc-rx--slant-in:not(.bc-cta)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bc-band-bg);
  clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 100%);
}.bc-cm .bc-rx--slant-out:not(.bc-cta)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bc-band-bg);
  clip-path: polygon(0 0, 100% 48px, 100% 100%, 0 100%);
}/* ════════════════════════════════════════════════════════════════════════
   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: var(--wpr-bg-6eafc3bf-979b-4096-a859-9b1af9f22d5c) 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(https://cdn.barcompany.nl/design-system/latest/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', 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;
}/* ════════════════════════════════════════════════════════════════════════
   Content-links vangnet (Bram-fb 2026-07-24: browser-blauwe links op
   zuurstof/smoothies = slordig). Elke KALE tekst-link in content krijgt de
   huisstijl: oranje + dunne onderstreping; hover = tegenkleur (teal,
   BC-hover-semantiek). Blok-eigen link-stijlen (prose, article, byline)
   winnen op specificity en blijven zoals ze zijn. Belangrijk onderscheid
   (Bram): KLIKBAAR = oranje MET lijn; een oranje <b>/<strong>-accent
   blijft ZONDER lijn -> intuitief verschil.
   ════════════════════════════════════════════════════════════════════════ */.bc-cm :is(p, li, dd, figcaption) a:not([class]):not(:where(.bc-site-header, .bc-site-footer, .bc-usp-strip, nav) *) {
  color: var(--bc-primary);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}.bc-cm :is(p, li, dd, figcaption) a:not([class]):not(:where(.bc-site-header, .bc-site-footer, .bc-usp-strip, nav) *):hover {
  color: var(--bc-green);
}/* ════════════════════════════════════════════════════════════════════════
   Band -> donkere kaart-CTA (Bram-fb 2026-07-24: "gek wit vlak tussen FAQ
   en CTA-blok"). De band houdt zijn diagonaal, maar de lege strook wordt
   structureel gedicht: minder bottom-padding op de band en geen
   top-padding op de kaart-sectie erna. Geldt voor elke band uit de
   CLIPBAND-lijst gevolgd door een collega-cta die GEEN cream-band is.
   ════════════════════════════════════════════════════════════════════════ */.bc-cm.bc-cm :is(.bc-rx--tone-cream, .bc-price-cards, .bc-review-spotlight, .bc-why-list, .bc-specs, .bc-concept-grid--cream, .bc-faq--serif, .bc-check-usp, .bc-logo-marquee, .bc-contact-section, .bc-profile--cream, .bc-profile--qa-duo, .bc-collega-cta--cream, .bc-author-expertise, .bc-reviews, .bc-related-pages--slider):not(.bc-rx--slant-in):not(.bc-rx--slant-out):has(+ .bc-collega-cta:not(.bc-collega-cta--cream)) {
  padding-bottom: 56px;
}.bc-cm.bc-cm :is(.bc-rx--tone-cream, .bc-price-cards, .bc-review-spotlight, .bc-why-list, .bc-specs, .bc-concept-grid--cream, .bc-faq--serif, .bc-check-usp, .bc-logo-marquee, .bc-contact-section, .bc-profile--cream, .bc-profile--qa-duo, .bc-collega-cta--cream, .bc-author-expertise, .bc-reviews, .bc-related-pages--slider):not(.bc-rx--slant-in):not(.bc-rx--slant-out) + .bc-collega-cta:not(.bc-collega-cta--cream) {
  padding-top: 0;
}/* === 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).
   scroll-margin-top keeps the anchor clear of a potential sticky header. */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: 16px;
  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: var(--wpr-bg-44e3deb9-568c-4184-9bb4-41838feba436) 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', 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: var(--wpr-bg-257b5a01-50b9-4d45-b867-b134d3225d31) 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;
  }
}/* ════════════════════════════════════════════════════════════════════════
   Variant: serif-band — subpagina 2.0 stats-band (p-stats, page20-bouwbestek)
   Border-top lijn boven een 4-koloms grid, grote serif-cijfers (clamp) met
   oranje plus, uppercase letterspaced labels. Waarden byte-verbatim
   page20-base.css .p-stats; kleur/font via tokens alleen bij exacte match
   (#242422 = --bc-dark; #8f887c geen token = literal). Additief: staat NA de
   basis + basis-media-query zodat de variant ook op mobiel wint.
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-stats--serif-band {
  background: var(--bc-white);
  padding: 0 0 72px;
}.bc-cm .bc-stats--serif-band .bc-stats-inner {
  max-width: 1300px;
  padding: 0 var(--bc-gutter);
}.bc-cm .bc-stats--serif-band .bc-stats__items {
  padding: 34px 0 0;
  border-top: 1px solid rgba(36, 36, 34, 0.1);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}/* Center per kolom (Bram-fb 2026-07-23, zuurstof): left-align oogde
   rommelig zodra een korte stat ("4") naast een lange label-regel staat —
   gecentreerd hangt het cijfer boven zijn label en zijn de vier kolommen
   visueel in balans. */.bc-cm .bc-stats--serif-band .bc-stats__item {
  text-align: center;
  min-width: 0;
}.bc-cm .bc-stats--serif-band .bc-stats__num {
  font: 900 clamp(30px, 3vw, 44px)/1 'Merriweather', Georgia, serif;
  letter-spacing: -1px;
  color: var(--bc-dark);
  font-variant-numeric: tabular-nums;
}.bc-cm .bc-stats--serif-band .bc-stats__num .bc-stats__plus {
  color: var(--bc-primary);
  font-weight: 900;
}.bc-cm .bc-stats--serif-band .bc-stats__label {
  display: block;
  margin-top: 9px;
  font: 700 13px/1.35 var(--bc-font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8f887c;
}/* Scroll-reveal: section emit data-bc-reveal (BCReveal zet .bc-visible);
   per-item stagger volgt de preview rv/rv2/rv2/rv3 (0 / .12s / .12s / .24s). */.bc-cm .bc-stats--serif-band .bc-stats__item {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-stats--serif-band.bc-visible .bc-stats__item {
  opacity: 1;
  transform: none;
}.bc-cm .bc-stats--serif-band.bc-visible .bc-stats__item:nth-child(2),
.bc-cm .bc-stats--serif-band.bc-visible .bc-stats__item:nth-child(3) {
  transition-delay: 0.12s;
}.bc-cm .bc-stats--serif-band.bc-visible .bc-stats__item:nth-child(4) {
  transition-delay: 0.24s;
}@media (max-width: 860px) {
  .bc-cm .bc-stats--serif-band .bc-stats__items {
    grid-template-columns: 1fr 1fr;
    gap: 28px 18px;
  }
}/* ── Fix-pass 2026-07-07: serif-band data-hooks (duurzaamheid / over-ons) ──
   Eyebrow-kop (oranje kicker, preview .eyebrow), band (offwhite band + eigen
   padding), no-border (border-top uit + compacte padding-top), statement
   (grotere num-clamp + padding-top 44) en num-accent (**woord** -> <b>).
   Volledig additief: zonder de nieuwe data-velden emit de render geen
   classes/elementen en is de output byte-identiek. Waarden verbatim uit
   output/preview/page20/{duurzaamheid,over-ons}.src.html + page20-base.css.
   Tokens: --b2-offwhite #FFEACA = --bc-cream; --b2-orange = --bc-primary;
   --b2-sans (Mulish) = --bc-font-body. */.bc-cm .bc-stats__eyebrow {
  font: 700 13px/1 var(--bc-font-body);
  letter-spacing: 0.22em;
  color: var(--bc-primary);
  text-transform: uppercase;
  margin: 0 0 18px;
}/* Reveal-choreografie voor de eyebrow op de serif-band (preview .eyebrow.rv). */.bc-cm .bc-stats--serif-band .bc-stats__eyebrow {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-stats--serif-band.bc-visible .bc-stats__eyebrow {
  opacity: 1;
  transform: none;
}/* num-accent: **woord** in number -> <b> (duurzaamheid "7 <b>jaar</b>";
   preview .p-stats .num b{color:var(--b2-orange)}). */.bc-cm .bc-stats--serif-band .bc-stats__num b {
  color: var(--bc-primary);
  font-weight: 900;
}/* band: offwhite band + eigen padding (duurzaamheid inline override
   background:var(--b2-offwhite);padding:52px 0). */.bc-cm .bc-stats--serif-band.bc-stats--band {
  background: var(--bc-cream);
  padding: 52px 0;
}/* no-border: lijn uit + compacte padding (duurzaamheid ul-override
   border-top:0;padding-top:14px). */.bc-cm .bc-stats--serif-band.bc-stats--no-border .bc-stats__items {
  border-top: 0;
  padding-top: 14px;
}/* statement: dikkere cijfers + hogere padding-top (over-ons overrides
   .p-stats .num{font-size:clamp(36px,4.2vw,64px)} + .p-stats ul{padding-top:44px}). */.bc-cm .bc-stats--serif-band.bc-stats--statement .bc-stats__num {
  font-size: clamp(36px, 4.2vw, 64px);
}.bc-cm .bc-stats--serif-band.bc-stats--statement .bc-stats__items {
  padding-top: 44px;
}/* 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: var(--wpr-bg-6dc0c828-09f6-49d5-8897-e32db24c4db7) 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-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(https://cdn.barcompany.nl/design-system/latest/assets/patch-bc-black-orangetext-borderless.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;
  /* Expliciet 900: het element is een <strong>; zonder eigen weight erft het
     via de browser-default "bolder" het 900 van __price, maar een WP-thema-
     reset (strong { font-weight: 700 }) sloopte dat op live (2026-07-15).
     Ontwerp-gewicht hoort niet van UA-defaults of thema-gedrag af te hangen. */
  font-weight: 900;
}.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: 16px;
  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);
}/* ════════════════════════════════════════════════════════════════════════
   Variant: serif — subpagina 2.0 FAQ (p-faq, page20-bouwbestek)
   Creme band (of paginawit via --white), kop-blok met eyebrow + serif-H2 met
   script-accent, borderless lijst met grote serif-vragen en een draaiend
   plus-icoon (::before/::after balkjes). Waarden byte-verbatim
   page20-base.css .p-faq; kleur/font via tokens alleen bij exacte match
   (#242422 = --bc-dark; #3d3a36 geen token = literal). Additief: staat NA de
   basis + basis-media-query zodat de variant ook op mobiel wint.
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-faq--serif {
  background: var(--bc-cream);
  padding: 96px 0 104px;
}.bc-cm .bc-faq--serif.bc-faq--white {
  background: var(--bc-white);
}/* Wrap wordt de 1300-container; kop en lijst centreren zelf op 860
   (preview: .wrap 1300 met .head/.p-faq-list max-width 860). */.bc-cm .bc-faq--serif .bc-faq-wrap {
  max-width: 1300px;
  padding: 0 var(--bc-gutter);
}.bc-cm .bc-faq--serif .bc-faq__head {
  max-width: 860px;
  margin: 0 auto 40px;
  text-align: left;
}.bc-cm .bc-faq--serif .bc-faq__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-faq--serif .bc-faq__head h2 {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--bc-text);
  text-align: left;
}.bc-cm .bc-faq--serif .bc-faq__head h2 .bc-script {
  font-size: 1.12em; /* bouwbestek-maat op echte Blakson Hustle */
  display: inline-block;
  transform: rotate(-2deg);
}.bc-cm .bc-faq--serif .bc-faq__list {
  max-width: 860px;
  margin: 0 auto;
}/* Items: geen kaartjes maar een borderless lijst met scheidingslijnen. */.bc-cm .bc-faq--serif .bc-faq__item {
  background: transparent;
  border-radius: 0;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(36, 36, 34, 0.14);
}.bc-cm .bc-faq--serif .bc-faq__item:hover {
  box-shadow: none;
}.bc-cm .bc-faq--serif .bc-faq__summary {
  padding: 22px 0;
  /* FB-ronde 2.0 (Bram 2026-07-16): vraag-titels een tik kleiner, stonden
     te zwaar in de lijst (was clamp(17px, 1.6vw, 21px)). */
  font: 900 clamp(16px, 1.3vw, 18px)/1.4 'Merriweather', Georgia, serif;
  color: var(--bc-dark);
  justify-content: space-between;
  gap: 26px;
  transition: color 0.2s;
}.bc-cm .bc-faq--serif .bc-faq__summary:hover {
  color: var(--bc-primary);
}/* Plus-icoon: cirkel met twee balkjes; [open] vult oranje en draait de
   verticale balk weg (plus wordt min). */.bc-cm .bc-faq--serif .bc-faq__ic {
  flex: 0 0 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgba(36, 36, 34, 0.2);
  display: grid;
  place-items: center;
  transition: 0.3s;
  position: relative;
}.bc-cm .bc-faq--serif .bc-faq__ic::before,
.bc-cm .bc-faq--serif .bc-faq__ic::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.3s;
}.bc-cm .bc-faq--serif .bc-faq__ic::before {
  width: 12px;
  height: 2.4px;
  border-radius: 2px;
}.bc-cm .bc-faq--serif .bc-faq__ic::after {
  width: 2.4px;
  height: 12px;
  border-radius: 2px;
}.bc-cm .bc-faq--serif .bc-faq__item[open] .bc-faq__ic {
  background: var(--bc-primary);
  border-color: var(--bc-primary);
  color: #fff;
}.bc-cm .bc-faq--serif .bc-faq__item[open] .bc-faq__ic::after {
  transform: rotate(90deg);
}/* Antwoorden: preview body-prose (17px/1.65, #3d3a36, max 44em), geen
   inspring-padding; laatste alinea-marge komt uit de container-padding. */.bc-cm .bc-faq--serif .bc-faq__answer-inner {
  padding: 0 0 26px;
  font-family: var(--bc-font-body);
  font-size: 16px;
  line-height: 1.65;
  max-width: 44em;
  color: #3d3a36;
}.bc-cm .bc-faq--serif .bc-faq__answer-inner p {
  margin: 0 0 26px;
  max-width: 44em;
}.bc-cm .bc-faq--serif .bc-faq__answer-inner p:last-child {
  margin-bottom: 0;
}/* Lijsten: preview gebruikt standaard disc-bullets, geen teal-check styling. */.bc-cm .bc-faq--serif .bc-faq__answer-inner ul {
  list-style: disc;
  display: block;
  margin: 0 0 26px;
  padding-left: 22px;
  color: #3d3a36;
}.bc-cm .bc-faq--serif .bc-faq__answer-inner ul:last-child {
  margin-bottom: 0;
}.bc-cm .bc-faq--serif .bc-faq__answer-inner ul li {
  padding-left: 0;
  margin: 5px 0;
}.bc-cm .bc-faq--serif .bc-faq__answer-inner ul li::before {
  content: none;
}/* Inline links: oranje, vet, geen underline (preview); hover naar groen
   volgens de hero-familie link-conventie. */.bc-cm .bc-faq--serif .bc-faq__answer a:not(.bc-btn) {
  color: var(--bc-primary);
  font-weight: 700;
  text-decoration: none;
}.bc-cm .bc-faq--serif .bc-faq__answer a:not(.bc-btn):hover {
  color: var(--bc-green);
}/* ════════════════════════════════════════════════════════════════════════
   Show-more/less overflow (SEO-lead brief, 2026-08-11): faq-blok met >4
   vragen toont er server-side 4, de rest staat in .bc-faq__overflow (render.
   mjs splitOverflow). Gedeeld door variant default EN serif, zelfde
   class-namen in beide render-paden dus GEEN aparte variant-CSS nodig.

   JS-gate patroon, identiek aan .bc-cr-js (case-result.css) / .bc-nusp-js
   (numbered-usp.css): faq.js zet .bc-faq-js op de sectie zodra er een
   .bc-faq__more-btn gevonden is. Zonder JS: geen .bc-faq-js, dus
   .bc-faq__more blijft display:none (knop nooit zichtbaar zonder werkende
   click-handler) en .bc-faq__overflow krijgt geen grid-collapse -- item 5+
   staat gewoon in de flow, leesbaar zonder JS. Met JS: sectie start
   dichtgeklapt, knop-tekst/chevron/aria-expanded wisselen op klik (faq.js).
   Bij <=4 items emit render.mjs deze markup helemaal niet: 0 CSS-impact. */.bc-cm .bc-faq__more { display: none; }.bc-cm .bc-faq-js .bc-faq__more {
  display: flex;
  justify-content: center;
  margin: 10px 0 6px;
}.bc-cm .bc-faq__more-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: none;
  padding: 12px 10px;
  color: var(--bc-primary);
  font-family: var(--bc-font-body);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: color 0.2s ease;
}.bc-cm .bc-faq__more-btn:hover {
  color: var(--bc-primary-hover); /* brand bicolor swap, D-20 (orange -> teal, geen donkerder-van-zichzelf) */
}.bc-cm .bc-faq__more-label {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s ease;
}.bc-cm .bc-faq__more-btn:hover .bc-faq__more-label {
  text-decoration-color: currentColor;
}.bc-cm .bc-faq__more-btn:focus-visible {
  outline: var(--bc-btn-border-width) solid var(--bc-primary);
  outline-offset: var(--bc-btn-focus-offset);
  border-radius: 4px;
}/* Chevron: zelfde CSS-only hoek-techniek als bc-hdr__has-sub (site-header.css)
   en de bc-nm__acc-btn caret (border-right + border-bottom, rotate 45deg =
   omlaag, 225deg = omhoog, identieke maat/offsets als de acc-btn caret).
   currentColor volgt de knoptekst-kleur automatisch (geen losse hover-regel
   nodig voor het icoon). */.bc-cm .bc-faq__more-ic {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s ease;
}.bc-cm .bc-faq__more-btn[aria-expanded="true"] .bc-faq__more-ic {
  transform: rotate(225deg) translate(-3px, -1px);
}/* Overflow-groep animatie: zelfde grid-template-rows 0fr->1fr-truc als
   .bc-faq__answer-wrap, dus geen layout-sprong en visueel consistent met het
   accordion zelf. Dit clipt alleen VISUEEL; faq.js zet er het `inert`-
   attribuut naast (toggle(), I1-fix) zodat de geclipte vragen ook echt uit
   de tab-order + a11y-tree zijn zolang de groep dicht is. */.bc-cm .bc-faq-js .bc-faq__overflow {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}.bc-cm .bc-faq-js .bc-faq__overflow.is-open {
  grid-template-rows: 1fr;
}.bc-cm .bc-faq__overflow-inner { overflow: hidden; }@media (max-width: 768px) {
  .bc-cm .bc-faq__more-btn { font-size: 14px; padding: 10px 8px; }
}/* 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; }
}/* ── 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: 16px;
  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: 16px;
  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:var(--wpr-bg-43d771be-045b-4f60-9a06-d972d6c8a8b6) 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(https://cdn.barcompany.nl/design-system/latest/assets/patch-bc-black-orangetext-borderless.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: var(--wpr-bg-6eb69c53-46d8-467c-b9cb-0b20d5ace8d0) 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 (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;
  }
}/* === 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).
 *
 * 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;
  }
}/* === v1.6/v1.7 — promotional / cross-brand blocks === *//* === 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).
 *
 * 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;
  }
}/* 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).
 *
 * 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;
  }
}/* ════════════════════════════════════════════════════════════════════════
   Presentation: editorial (Menu-pagina's 2.0, page20 p-steps port)
   ════════════════════════════════════════════════════════════════════════
   Additief: render append .bc-steps--editorial NAAST de orientatie-variant
   wanneer data.presentation === "editorial". Verbatim geport uit
   output/preview/page20/page20-base.css (.p-steps / .p-steps--h + P13
   scroll-fill, fb-ronde 2 #9). Delta t.o.v. de default look:
   - Merriweather-serif titels (900/20px) i.p.v. Mulish 800
   - badge-font 22px/800, shadow 0 10px 24px rgba(238,116,55,.3)
   - dashed-BORDER connector op het item::before (i.p.v. het gradient-spoor
     op de marker), lijst-grid met gap i.p.v. item padding-bottom
   - scroll-fill rust-staat = ORANJE outline (i.p.v. donker) en de connector
     kleurt in ÉÉN keer solid oranje (i.p.v. progressieve scaleY-vulling)
   - horizontal = links-uitgelijnde kolommen, 4 op een rij (geen multi-row
     snake; render onderdrukt bc-steps--multi-row bij editorial)
   Bestaande selectors ongemoeid; alles hieronder scoped op --editorial. */.bc-cm .bc-steps--editorial .bc-steps-inner {
  max-width: none;
}.bc-cm .bc-steps--editorial .bc-steps__list {
  display: grid;
  gap: 34px;
  max-width: 640px;
}.bc-cm .bc-steps--editorial .bc-steps__item {
  display: flex;
  gap: 22px;
  padding-bottom: 0;
}.bc-cm .bc-steps--editorial .bc-steps__marker {
  flex: 0 0 56px;
}.bc-cm .bc-steps--editorial .bc-steps__num {
  font-size: 22px; /* preview: font:800 22px/56px var(--b2-sans) */
  font-weight: 800;
  letter-spacing: normal;
  color: #fff; /* preview literal #fff, niet --bc-white (#fff9f0) */
  box-shadow: 0 10px 24px rgba(238, 116, 55, 0.3);
}/* Het default marker-spoor (::after) + de scaleY-vullijn (::before) vervallen:
   editorial draagt de connector op het item zelf (dashed border, preview). */.bc-cm .bc-steps--editorial .bc-steps__item:not(:last-child) .bc-steps__marker::after {
  display: none;
}.bc-cm .bc-steps--editorial.bc-steps-js .bc-steps__item:not(:last-child) .bc-steps__marker::before {
  display: none;
}.bc-cm .bc-steps--editorial .bc-steps__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 60px;
  bottom: -30px;
  border-left: 2px dashed rgba(238, 116, 55, 0.45);
}.bc-cm .bc-steps--editorial .bc-steps__content {
  padding-top: 0;
}.bc-cm .bc-steps--editorial .bc-steps__title {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: 20px;
  line-height: 1.65; /* preview: geërfd van page20 body */
  color: var(--bc-dark); /* preview: geërfd --b2-text #242422 = --bc-dark */
  margin: 4px 0 8px;
}.bc-cm .bc-steps--editorial .bc-steps__body {
  font-size: 16px; /* preview: geërfd van page20 body (17px/1.65) */
  line-height: 1.65;
  color: #3d3a36; /* geen token-match (text-medium = #333) -> literal */
  max-width: 34em;
}/* Scroll-fill (P13, fb-r2 #9): oranje outline-rust-staat, in één keer vullen.
   Zelfde .bc-steps-js gate + .is-filled klassen als de default (steps.js). */.bc-cm .bc-steps--editorial.bc-steps-js .bc-steps__num {
  background: var(--bc-white);
  color: var(--bc-primary);
  border: 2px solid rgba(238, 116, 55, 0.4);
  box-shadow: none;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}.bc-cm .bc-steps--editorial.bc-steps-js .bc-steps__item.is-filled .bc-steps__num {
  background: var(--bc-primary);
  color: #fff;
  border-color: var(--bc-primary);
  box-shadow: 0 10px 24px rgba(238, 116, 55, 0.3);
}.bc-cm .bc-steps--editorial.bc-steps-js .bc-steps__item.is-filled:not(:last-child)::before {
  border-color: var(--bc-primary);
  border-top-style: solid;
  border-left-style: solid;
}/* ── editorial + horizontal: 4 links-uitgelijnde kolommen (preview p-steps--h) ── */.bc-cm .bc-steps--editorial.bc-steps--horizontal {
  max-width: 1300px; /* preview .wrap-breedte (page20 = 1300, rapport) */
}.bc-cm .bc-steps--editorial.bc-steps--horizontal .bc-steps__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  max-width: none;
}.bc-cm .bc-steps--editorial.bc-steps--horizontal .bc-steps__item {
  flex-direction: column;
  gap: 16px;
  text-align: left;
}.bc-cm .bc-steps--editorial.bc-steps--horizontal .bc-steps__marker {
  align-items: flex-start;
  margin-bottom: 0;
}.bc-cm .bc-steps--editorial.bc-steps--horizontal .bc-steps__item:not(:last-child)::before {
  left: 66px;
  right: -18px;
  top: 27px;
  bottom: auto;
  border-left: 0;
  border-top: 2px dashed rgba(238, 116, 55, 0.45);
}.bc-cm .bc-steps--editorial.bc-steps--horizontal .bc-steps__body {
  max-width: 34em;
  margin-left: 0;
  margin-right: 0;
}/* Preview-breakpoint 820px (bewust niet 768: verbatim page20) */@media (max-width: 820px) {
  .bc-cm .bc-steps--editorial.bc-steps--horizontal .bc-steps__list {
    grid-template-columns: 1fr;
    max-width: 640px;
    gap: 34px;
  }
  .bc-cm .bc-steps--editorial.bc-steps--horizontal .bc-steps__item {
    flex-direction: row;
    gap: 22px;
  }
  .bc-cm .bc-steps--editorial.bc-steps--horizontal .bc-steps__item:not(:last-child)::before {
    left: 27px;
    top: 60px;
    bottom: -30px;
    right: auto;
    border-top: 0;
    border-left: 2px dashed rgba(238, 116, 55, 0.45);
  }
}/* ════════════════════════════════════════════════════════════════════════
   Variant: icon-strip (Menu-pagina's 2.0, smoothies s-steps port)
   ════════════════════════════════════════════════════════════════════════
   4 iconen + korte labels op een rij op een wit vlak. Geen nummers, geen
   body, geen connector, geen scroll-fill-styling (de JS-gate klassen hebben
   hier geen CSS-hooks; steps.js-init is dan cosmetisch inert). */.bc-cm .bc-steps--icons {
  max-width: none;
  margin: 0;
  background: var(--bc-white); /* preview --b2-white #FFF9F0 = --bc-white */
  padding: 64px 0 72px;
}.bc-cm .bc-steps--icons .bc-steps-inner {
  max-width: 1300px; /* preview .wrap */
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}.bc-cm .bc-steps--icons .bc-steps__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin: 0;
  max-width: none;
}.bc-cm .bc-steps--icons .bc-steps__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 0;
}.bc-cm .bc-steps--icons .bc-steps__icon {
  width: 52px;
  height: 52px;
  margin-top: 0;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 1;
  flex: none;
}.bc-cm .bc-steps--icons .bc-steps__label {
  font: 700 16px/1.3 var(--bc-font-body);
  color: var(--bc-dark); /* preview --b2-text #242422 = --bc-dark */
}@media (max-width: 860px) {
  .bc-cm .bc-steps--icons .bc-steps__list {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}/* ── Sectie-kop (v0.14.1, FB-ronde 2.0: zuurstof) ─────────────────────────
   Eyebrow + serif-titel boven de stappen; property-sets uit why-list
   (EXACT token map), maat een tik onder de why-list-titel (sub-sectie). */.bc-cm .bc-steps__head {
  margin: 0 0 34px;
}.bc-cm .bc-steps__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-steps__h2 {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--bc-text);
}/* 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).
 *
 * 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;
  }
}/* === Page20 fix-pass addenda (additief) ======================================
 * anchorId (scroll-target voor hero-CTA "#video") + presentatie "framed":
 * de duurzaamheid 2.0 dz-video look. Waarden byte-verbatim uit
 * duurzaamheid.src.html r20-23: max-width 900, radius 26, schaduw
 * 0 24px 60px rgba(36,36,34,.22), poster opacity .92 ZONDER donker-veil,
 * hover play scale 1.08 zonder teal-swap. Bestaande selectors onaangetast;
 * deze rules matchen alleen bij de nieuwe data-velden. *//* anchorId gezet -> comfortabele landing onder de sticky header */.bc-cm .bc-video[id] {
  scroll-margin-top: 90px;
}/* framed: 900px frame-breedte (sectie-padding = gutter, dus gutter erbij) */.bc-cm .bc-video--framed {
  max-width: calc(900px + 2 * var(--bc-gutter));
}.bc-cm .bc-video--framed .bc-video__frame {
  border-radius: 26px;
  box-shadow: 0 24px 60px rgba(36, 36, 34, 0.22);
}.bc-cm .bc-video--framed .bc-video__poster {
  opacity: 0.92;
}/* preview heeft geen donker-veil op de poster */.bc-cm .bc-video--framed .bc-video__frame[data-bc-video-facade]::after,
.bc-cm .bc-video--framed .bc-video__frame[data-bc-video-facade]:hover::after {
  background: transparent;
}/* hover: knop blijft oranje en schaalt 1.08 (preview .dz-video:hover .play) */.bc-cm .bc-video--framed .bc-video__frame:hover .bc-video__play,
.bc-cm .bc-video--framed .bc-video__play:hover {
  background: var(--bc-primary);
  transform: translate(-50%, -50%) scale(1.08);
}/* === 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).
 *
 * 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.
   ════════════════════════════════════════════════════════════════════════ */.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;
  }
}/* ════════════════════════════════════════════════════════════════════════
   Marquee-mode (--marq, Bram-fb 2026-07-23): de statische logo-rij scrollt
   voortaan als oneindige band, zelfde track-recept als bc-logo-marquee
   (3x de set in een max-content track, translateX -33.333% = exact een
   set-breedte, keyframes bcMarq gedeeld uit logo-marquee.css). mask-image
   i.p.v. gradient-overlays zodat de fade-randen op ELKE achtergrond werken
   (default op offwhite, band op creme). Hover pauzeert zodat een logo
   aanwijsbaar blijft voor de kleur-hover.
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-logo-strip--marq .bc-logo-strip__mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 120px, #000 calc(100% - 120px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 120px, #000 calc(100% - 120px), transparent);
}.bc-cm .bc-logo-strip--marq .bc-logo-strip__track {
  display: flex;
  gap: 0;
  width: -moz-max-content;
  width: max-content;
  animation: bcMarq 34s linear infinite;
}.bc-cm .bc-logo-strip--marq .bc-logo-strip__track:hover {
  animation-play-state: paused;
}/* In de track: geen wrap en geen centrering — de set loopt op natuurlijke
   breedte door; de halve column-gap als padding aan weerszijden zorgt dat
   set-op-set dezelfde afstand houdt als logo-op-logo binnen een set. */.bc-cm .bc-logo-strip--marq .bc-logo-strip__items {
  flex-wrap: nowrap;
  justify-content: flex-start;
  padding: 0 28px;
}.bc-cm .bc-logo-strip--marq.bc-logo-strip--band .bc-logo-strip__items {
  padding: 0 clamp(14px, 2vw, 29px);
}/* ════════════════════════════════════════════════════════════════════════
   Variant: band — subpagina 2.0 klanten-logobalk (p-clients, page20-bouwbestek)
   Full-width creme band met gecentreerde uppercase kicker (oranje accent via
   <b>/<strong>) en compacte grayscale logo's (30px) die per logo opkleuren
   bij hover. STATISCH (geen marquee; dat is bc-logo-marquee). Waarden
   byte-verbatim page20-base.css .p-clients; #6b665f geen token = literal.
   Additief: staat NA de basis + basis-media-queries zodat de band-maten ook
   op mobiel winnen.
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-logo-strip--band {
  max-width: none;
  margin: 0;
  padding: 34px 0 40px;
  background: var(--bc-cream);
}.bc-cm .bc-logo-strip--band .bc-logo-strip-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}.bc-cm .bc-logo-strip--band .bc-logo-strip__heading {
  font: 700 12px/1 var(--bc-font-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6b665f;
  text-align: center;
  margin: 0 0 26px;
}.bc-cm .bc-logo-strip--band .bc-logo-strip__heading b,
.bc-cm .bc-logo-strip--band .bc-logo-strip__heading strong {
  color: var(--bc-primary);
}.bc-cm .bc-logo-strip--band .bc-logo-strip__items {
  gap: clamp(28px, 4vw, 58px);
}.bc-cm .bc-logo-strip--band .bc-logo-strip__img {
  height: 30px;
  width: auto;
  max-width: 124px;
  -o-object-fit: contain;
     object-fit: contain;
  filter: grayscale(1);
  opacity: 0.55;
  transition: 0.25s;
}.bc-cm .bc-logo-strip--band .bc-logo-strip__item:hover .bc-logo-strip__img {
  filter: grayscale(0);
  opacity: 1;
}@media (max-width: 820px) {
  .bc-cm .bc-logo-strip--band .bc-logo-strip__img {
    height: 23px;
  }

  .bc-cm .bc-logo-strip--band .bc-logo-strip__items {
    gap: 20px 28px;
  }
}/* === 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;
  }
}/* 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: var(--wpr-bg-67b82300-9764-4d5c-89d3-bdeb820e4d12) 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: 16px;
    margin-top: 22px;
  }
  .bc-cm .bc-author-hero__visual {
    max-width: 320px;
    transform: none;
  }
  .bc-cm .bc-author-hero__text {
    transform: 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;
}@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: 16px;
  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;
}@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:var(--wpr-bg-7723c306-49b4-40c3-9664-89ba08ade091) 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. */
}/* ════════════════════════════════════════════════════════════════════════
   Variant: dark-media — over-ons 2.0 s-quote (page20 port, 2026-07-07)
   Zwarte statement-band: quote links in wit serif (script-accent via
   data.quoteScript -> .bc-script), foto rechts met rotate + groene arc,
   zachte oranje radial rechtsboven. Volledig additief: alle selectors onder
   --dark-media, de default-variant blijft byte-identiek. Waarden verbatim
   uit output/preview/page20/over-ons.src.html inline \3c style> (.s-quote /
   .sq-grid / .sq-media / .sq-arc); container 1300 = preview .wrap.
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-signature-quote--dark-media {
  background: var(--bc-dark);
  padding: 110px 0;
  /* reveal verhuist naar de kinderen (preview .rv-patroon: quote eerst,
     media +0.12s); de sectie zelf blijft zichtbaar. */
  opacity: 1;
  transform: none;
}/* Zachte oranje radial rechtsboven (preview .s-quote::before). */.bc-cm .bc-signature-quote--dark-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 70% at 85% 8%, rgba(238, 116, 55, 0.16), transparent 70%);
  pointer-events: none;
}/* Geen ghost quote-glyph op de donkere band (die hoort bij default-licht). */.bc-cm .bc-signature-quote--dark-media .bc-signature-quote-inner::before {
  content: none;
}.bc-cm .bc-signature-quote--dark-media .bc-signature-quote-inner {
  max-width: 1300px;
  padding: 0 var(--bc-gutter);
  text-align: left;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
}.bc-cm .bc-signature-quote--dark-media .bc-signature-quote__quote {
  font: 900 clamp(28px, 3.6vw, 52px)/1.18 'Merriweather', Georgia, serif;
  letter-spacing: -0.8px;
  color: var(--bc-white);
  margin: 0;
}/* Script-accent in de quote (quoteScript). Base .bc-script (rhythm.css) zet
   line-height .5 voor kop-accenten; hier erft de preview de quote-regelhoogte
   (1.18), dus expliciet terug naar de paragraaf-waarde. */.bc-cm .bc-signature-quote--dark-media .bc-signature-quote__quote .bc-script {
  color: var(--bc-primary);
  font-size: 1.08em;
  line-height: 1.18;
  display: inline-block;
  transform: rotate(-2deg);
  padding: 0 0.08em;
}.bc-cm .bc-signature-quote--dark-media .bc-signature-quote__media {
  position: relative;
}.bc-cm .bc-signature-quote--dark-media .bc-signature-quote__media img {
  width: 100%;
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 22px;
  transform: rotate(2deg);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
  position: relative;
  z-index: 1;
  display: block;
}.bc-cm .bc-signature-quote--dark-media .bc-signature-quote__arc {
  position: absolute;
  right: -34px;
  top: -46px;
  width: 150px;
  height: 150px;
  border: 24px solid var(--bc-green);
  border-radius: 50%;
  z-index: 0;
}/* Getrapte kind-reveal (preview: p.rv, media.rv.rv2) op de sectie-observer. */.bc-cm .bc-signature-quote--dark-media .bc-signature-quote__quote,
.bc-cm .bc-signature-quote--dark-media .bc-signature-quote__media {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-signature-quote--dark-media .bc-signature-quote__media {
  transition-delay: 0.12s;
}.bc-cm .bc-signature-quote--dark-media.bc-visible .bc-signature-quote__quote,
.bc-cm .bc-signature-quote--dark-media.bc-visible .bc-signature-quote__media {
  opacity: 1;
  transform: none;
}@media (max-width: 960px) {
  .bc-cm .bc-signature-quote--dark-media {
    padding: 84px 0;
  }

  .bc-cm .bc-signature-quote--dark-media .bc-signature-quote-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .bc-cm .bc-signature-quote--dark-media .bc-signature-quote__arc {
    right: -20px;
    top: -30px;
    width: 110px;
    height: 110px;
    border-width: 18px;
  }
}/* ════════════════════════════════════════════════════════════════════════
   Variant: script-band — smoothies 2.0 s-quote (fix-pass port, 2026-07-07)
   Witte band met de quote gecentreerd in groen Blakson/Damion script, licht
   gedraaid (rotate -2deg). NIET de dark-media vorm. Volledig additief: alle
   selectors onder --script-band, default + dark-media blijven byte-identiek.
   Waarden verbatim uit output/preview/page20/smoothies.src.html inline
   \3c style> (.s-quote / .s-quote p); container 1300 = preview .wrap. De patch
   is op de lichte familie al display:none (Bram-lock), geldt hier ook.
   NB: staat NA de 768-media van de default-band, dus de 96px padding houdt
   ook mobiel stand (preview had geen mobiele override).
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-signature-quote--script-band {
  /* .s-quote: background var(--b2-white) = base var(--bc-white); alleen de
     padding wijkt af van de default-band (76px). */
  padding: 96px 0;
}/* Geen ghost quote-glyph op de script-band (die hoort bij default-licht). */.bc-cm .bc-signature-quote--script-band .bc-signature-quote-inner::before {
  content: none;
}.bc-cm .bc-signature-quote--script-band .bc-signature-quote-inner {
  max-width: 1300px;
}/* .s-quote p verbatim: script-font, groen, clamp(30,4vw,52)/1.25, -2deg. */.bc-cm .bc-signature-quote--script-band .bc-signature-quote__quote {
  font: 400 clamp(30px, 4vw, 52px)/1.25 'Blakson Hustle', cursive;
  letter-spacing: normal;
  color: var(--bc-green);
  text-align: center;
  transform: rotate(-2deg);
  margin: 0;
}/* 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;
  }
}/* 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: var(--wpr-bg-f06de87a-755b-4ae0-8aa9-011aed426b7b) 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;
  }
}/* === 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',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; }
}/* === 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: var(--wpr-bg-36864b22-7ea2-4cea-9d39-5e28bf72cfe7) 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: 16px;
  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);
}/* FB-ronde 2.0 (Bram 2026-07-16): solid goud/groen rondjes -> orange-arc
   familie, zelfde behandeling als profile.css __arc/__arc2. */.bc-cm .bc-statement--shapes .bc-statement__arc {
  position: absolute;
  left: -34px;
  bottom: -30px;
  width: 86px;
  height: 86px;
  background: var(--wpr-bg-ccfa4ef9-1a2b-4230-804c-1f4419b722cf) no-repeat center / contain;
  opacity: 0.5;
  transform: rotate(-14deg);
  z-index: 1;
}.bc-cm .bc-statement--shapes .bc-statement__arc2 {
  position: absolute;
  right: 26px;
  bottom: -42px;
  width: 52px;
  height: 52px;
  background: var(--wpr-bg-5376aca9-4108-42ed-8858-82b830df415d) no-repeat center / contain;
  opacity: 0.42;
  transform: rotate(24deg);
  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: var(--wpr-bg-b065c7c6-f1a9-4947-9866-0c274de23bde) 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;
  }
}/* === 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).
 *
 * 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;
  }
}/* === 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);
}/* ── WP-chrome standalone (bridge-plugin v1.5.0, live-route 2026-07-24) ──
   Op WordPress print de bridge-plugin de header als los .bc-cm-eiland
   (Blocksy blocksy:header:before hook). Die wrapper-div is exact
   header-hoog, waardoor sticky op .bc-site-header zelf nergens meer heen
   kan plakken: de sticky moet op de WRAPPER. De admin-bar-offsets houden
   de balk onder de WP-toolbar voor ingelogde marketeers. */.bc-cm.bc-wp-chrome--header {
  position: sticky;
  top: 0;
  z-index: 80;
}body.admin-bar .bc-cm.bc-wp-chrome--header { top: 32px; }@media (max-width: 782px) {
  body.admin-bar .bc-cm.bc-wp-chrome--header { top: 46px; }
}/* ── Submenu's (Bram-fb livegang 2026-07-24: "header heeft niet alle
   submenu's die de site eerst wel had"). Structuur 1-op-1 uit het oude
   Blocksy-menu; desktop = hover/focus-dropdown, in het fullscreen-menu
   staan de subs als inline lijst onder elk hoofditem. ─────────────────── */.bc-cm .bc-hdr__nav > ul > li { position: relative; }/* chevron op parents met submenu */.bc-cm .bc-hdr__nav li.bc-hdr__has-sub > a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 5px;
  margin-bottom: 1px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
  transition: transform 0.2s ease;
  vertical-align: middle;
}.bc-cm .bc-hdr__nav li.bc-hdr__has-sub:hover > a::after,
.bc-cm .bc-hdr__nav li.bc-hdr__has-sub:focus-within > a::after {
  transform: rotate(225deg) translate(-2px, -2px);
}.bc-cm .bc-hdr__sub {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 252px;
  margin: 0;
  padding: 14px;
  list-style: none;
  background: var(--bc-dark);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.38);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 90;
}/* onzichtbare hover-brug over de gap tussen link en dropdown */.bc-cm .bc-hdr__sub::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}.bc-cm .bc-hdr__nav li.bc-hdr__has-sub:hover > .bc-hdr__sub,
.bc-cm .bc-hdr__nav li.bc-hdr__has-sub:focus-within > .bc-hdr__sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}/* De generieke .bc-hdr__nav ul-flexregel (0,2,1) vangt de sub-ul ook en
   legde alle sub-items naast elkaar (945px breed): expliciet block met
   hogere specificity. */.bc-cm .bc-hdr__nav ul.bc-hdr__sub { display: block; }.bc-cm .bc-hdr__sub li { display: block; }.bc-cm .bc-hdr__sub li + li { margin-top: 2px; }.bc-cm .bc-hdr__sub a {
  display: block;
  padding: 12px 18px;
  color: #efe9df;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}.bc-cm .bc-hdr__sub a:hover {
  background: rgba(238, 116, 55, 0.14);
  color: var(--bc-white);
}/* GTranslate-plek (Bram-fb: taal-switch deed niks — statische vlag
   vervangen door de echte [gtranslate]-shortcode-output uit de plugin). */.bc-cm .bc-hdr__gt {
  display: flex;
  align-items: center;
  min-width: 22px;
}/* Fullscreen-menu: subs als inline lijst onder elk hoofditem; het panel
   wordt met alle subs lang, dus scrollbaar. */.bc-cm .bc-nm__panel { overflow-y: auto; }.bc-cm .bc-nm__subs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 6px 44px;
  padding: 0;
  list-style: none;
}.bc-cm .bc-nm__subs a {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  padding: 2px 0;
  transition: color 0.15s ease;
}.bc-cm .bc-nm__subs a:hover { color: var(--bc-primary); }.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;
  /* iets compacter sinds de submenu-chevrons (livegang 2026-07-24):
     8 items + 6 chevrons pasten anders niet meer naast het logo. */
  gap: clamp(8px, 1vw, 14px);
  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: 10px;
  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: 5px;
}.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;
  }

  /* Stagger ALLEEN op de hoofditems (> ul > li). De oude kale li-selector
     ving ook de sub-li's in .bc-nm__subs; die staan display:none (accordion)
     als de open-animatie start en iOS-WebKit start zo'n animatie niet
     alsnog bij display-toggle: sub-items bleven op opacity 0 hangen
     (iPhone-bug Bram 2026-08-17). Sub-zichtbaarheid mag NOOIT van een
     animatie afhangen; de subs-reset staat bij het accordion-blok onderin. */
  .bc-cm .bc-nm__panel > ul > li {
    opacity: 0;
    transform: translateY(20px);
  }

  .bc-cm .bc-nav-menu[open] .bc-nm__panel > ul > 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 > ul > li:nth-child(1) { animation-delay: 0.06s; }
  .bc-cm .bc-nav-menu[open] .bc-nm__panel > ul > li:nth-child(2) { animation-delay: 0.1s; }
  .bc-cm .bc-nav-menu[open] .bc-nm__panel > ul > li:nth-child(3) { animation-delay: 0.14s; }
  .bc-cm .bc-nav-menu[open] .bc-nm__panel > ul > li:nth-child(4) { animation-delay: 0.18s; }
  .bc-cm .bc-nav-menu[open] .bc-nm__panel > ul > li:nth-child(5) { animation-delay: 0.22s; }
  .bc-cm .bc-nav-menu[open] .bc-nm__panel > ul > li:nth-child(6) { animation-delay: 0.26s; }
  .bc-cm .bc-nav-menu[open] .bc-nm__panel > ul > li:nth-child(7) { animation-delay: 0.3s; }
  .bc-cm .bc-nav-menu[open] .bc-nm__panel > ul > 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;
  }
}/* ── USP-strip links (additief; usp-items {text, href}) ─────────────────
 * Verbatim page20-base.css (.s-usp a): kleur erft van het li, geen
 * onderstreping, hover naar oranje (--b2-orange -> --bc-primary per de
 * EXACT token map). Anchor-vorm conform preview partial-usp.html. */.bc-cm .bc-usp-strip a {
  color: inherit;
  text-decoration: none;
}.bc-cm .bc-usp-strip a:hover {
  color: var(--bc-primary);
}/* ══ Fullscreen-menu subs (livegang 2026-07-24, aan file-eind i.v.m.
   cascade): de grote serif-regel .bc-nm__panel ul a ving de sub-links —
   subs terug naar compacte sans-lijst onder elk hoofditem. */@media (max-width: 1080px) {
  .bc-cm .bc-nm__panel ul.bc-nm__subs {
    margin: -4px 0 10px;
    padding: 0 0 0 44px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 16px;
  }
  .bc-cm .bc-nm__panel .bc-nm__subs a {
    display: inline-block;
    font: 600 14.5px/1.5 var(--bc-font-body);
    letter-spacing: 0;
    color: rgba(255, 255, 255, 0.72);
    border-bottom: none;
    padding: 2px 0;
  }
  .bc-cm .bc-nm__panel .bc-nm__subs a:hover { color: var(--bc-primary); }
}/* ══ TranslatePress-switcher restyle (migratie GTranslate -> TP, 2026-09-07).
   Knop = alleen vlag + chevron,
   dropdown = donkere kaart in submenu-stijl. TP's v2-shortcode rendert een
   wrapper met inline css-variabelen (--bg/--text/...) plus twee kopieën:
   een in-flow "anchor" (inert, bepaalt de maat) en een absolute "overlay"
   (interactief, bevat ook de lijst). Variabelen overrulen we met !important
   omdat ze inline staan; de witte box en padding van TP gaan weg.
   (De oude GTranslate-restyle is weg sinds v0.15.11: 0 keer gt_ live, gemeten 2026-09-29.) */.bc-cm .bc-hdr__gt .trp-shortcode-switcher__wrapper {
  /* Bram-fb 07-09: knop hing 2 tot 3px te hoog. TP's anchor is een
     inline-block op de baseline en erft de 32px line-height van de balk:
     37px box om een 32px knop. Flex + line-height 1 = box == knop, en de
     .bc-hdr__gt-flex centreert 'm netjes op de iconen. */
  display: flex;
  align-items: center;
  line-height: 1;
  --bg: transparent !important;
  --bg-hover: rgba(255, 249, 240, 0.14) !important;
  --text: #efe9df !important;
  --text-hover: #fff !important;
  --border: none !important;
  --border-radius: 8px !important;
  --flag-size: 22px !important;
  --flag-radius: 4px !important;
  --font-size: 14px !important;
  font-family: var(--bc-font-body);
}.bc-cm .bc-hdr__gt .trp-shortcode-switcher {
  display: block !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  line-height: 1;
  /* overlay mag buiten de knop-maat vallen: de lijst hangt eronder */
  overflow: visible !important;
}/* TP zet z-index 9999 op de overlay; het fullscreen-menu (.bc-nm__panel,
   z 120, zelfde stacking-context als de header) zat daar dan ONDER, dus de
   knop prikte midden door het open menu (Bram-fb 07-09, screenshot 3).
   95 = zelfde laag als de oude GT-switcher: boven de content, onder het menu. */.bc-cm .bc-hdr__gt .trp-shortcode-overlay { z-index: 95 !important; }.bc-cm .bc-hdr__gt .trp-current-language-item__wrapper {
  padding: 0 !important;
  gap: 4px;
}/* knop: vlag + chevron, naam weg (ruimtewinst in de krappe balk) */.bc-cm .bc-hdr__gt .trp-current-language-item__wrapper .trp-language-item {
  gap: 0;
  min-height: 0;
  padding: 5px 6px !important;
  border-radius: 8px;
  transition: background 0.2s ease;
}.bc-cm .bc-hdr__gt .trp-current-language-item__wrapper .trp-language-item-name {
  display: none !important;
}.bc-cm .bc-hdr__gt .trp-shortcode-arrow {
  width: 14px;
  height: 14px;
  opacity: 0.7;
  transition: transform 0.2s ease;
}.bc-cm .bc-hdr__gt .trp-flag-image {
  /* vierkant zoals de oude GT-vlaggen; TP's 4/3-aspect-ratio uitzetten */
  width: 22px !important;
  height: 22px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 4px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  display: block;
}/* dropdown: zelfde kaart als de menu-submenu's (.bc-hdr__sub hierboven,
   Bram-fb 07-09 ronde 2: "padding etc. gelijk aan de rest van de dropdowns"):
   14px kaartrand, 16px radius, 1px lijn, items 12px 18px / 14.5px 600 met
   10px radius en 2px tussenruimte, gecentreerd onder de knop met 8px lucht.
   TP's css zet display:flex op de lijst en wint van het hidden-attribuut
   (dicht = alleen max-height:0), dus dicht = echt weg. */.bc-cm .bc-hdr__gt .trp-switcher-dropdown-list[hidden] { display: none !important; }.bc-cm .bc-hdr__gt .trp-switcher-dropdown-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  min-width: 200px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: var(--bc-dark);
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.38);
}.bc-cm .bc-hdr__gt .trp-switcher-dropdown-list .trp-language-item {
  gap: 10px;
  min-height: 0;
  padding: 12px 18px !important;
  border-radius: 10px;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease;
}.bc-cm .bc-hdr__gt .trp-switcher-dropdown-list .trp-language-item + .trp-language-item {
  margin-top: 2px;
}.bc-cm .bc-hdr__gt .trp-switcher-dropdown-list .trp-flag-image {
  width: 18px !important;
  height: 18px !important;
  border-radius: 3px;
}.bc-cm .bc-hdr__gt .trp-switcher-dropdown-list .trp-language-item:hover {
  background: rgba(238, 116, 55, 0.14) !important;
}.bc-cm .bc-hdr__gt .trp-language-item-name {
  font-family: var(--bc-font-body) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: #efe9df;
}.bc-cm .bc-hdr__gt .trp-switcher-dropdown-list .trp-language-item:hover .trp-language-item-name {
  color: var(--bc-white) !important;
}/* ══ Brede-range nav-fix (Bram-fb live: menu door het logo op ~1400px).
   Tussen 1280 en 1459 is de balk met 8 items + chevrons + GT-switcher nog
   te vol: gap en font een maat terug. De <=1279-query hierboven blijft de
   smalste trap (socials weg, logo 28, flex-start). */@media (max-width: 1459px) {
  .bc-cm .bc-hdr__nav ul { gap: 9px; }
  .bc-cm .bc-hdr__nav a { font-size: 14px; }
  .bc-cm .bc-hdr__extra { gap: 10px; }
}/* ══ Smalle desktop-range (livegang 2026-07-24) — AAN HET EIND van deze
   file: zelfde specificity als de basisregels hierboven, cascade-volgorde
   beslist. Nav zichtbaar tot 1081; de 8 items + submenu-chevrons
   overflowden hier de flex-kolom en schoven over het logo. Socials
   verbergen (staan ook in fullscreen-menu + footer) + strakkere maten. */@media (max-width: 1279px) {
  .bc-cm .bc-hdr__soc { display: none; }
  .bc-cm .bc-hdr__nav ul { gap: 8px; justify-content: flex-start; }
  .bc-cm .bc-hdr__nav a { font-size: 13px; }
  .bc-cm .bc-hdr__logo img { height: 28px; }
}/* ══ Submenu-maten met nav-winnende specificity (Bram-fb: "veel te dicht
   op elkaar"). De generieke .bc-hdr__nav ul/a-regels (0,2,1) wonnen stil
   van .bc-hdr__sub (0,2,0): kaart-padding werd 0 en item-padding 6px 2px.
   Hier (0,3,1): wint altijd, ongeacht volgorde. */.bc-cm .bc-hdr__nav ul.bc-hdr__sub {
  display: block;
  padding: 14px;
}.bc-cm .bc-hdr__nav .bc-hdr__sub a {
  display: block;
  padding: 12px 18px;
  font-size: 14.5px;
  line-height: 1.15;
  font-weight: 600;
  color: #efe9df;
  border-radius: 10px;
}.bc-cm .bc-hdr__nav .bc-hdr__sub a:hover {
  /* Bram-fb: hover-tekst WIT houden, alleen de oranje tint als vlak */
  background: rgba(238, 116, 55, 0.14);
  color: var(--bc-white);
}/* ══ Taal-switcher ook op tablet/mobiel (smoke-test 2026-07-24: de
   <=1080-regel verborg .bc-hdr__extra volledig, waardoor GTranslate
   onbereikbaar was — de oude site had de switcher daar wel). Alleen de
   GT-knop: socials blijven verborgen via de <=1279-regel. File-eind =
   wint op cascade van de display:none hierboven. */@media (max-width: 1080px) {
  .bc-cm .bc-hdr__extra { display: flex; }
}/* Smalle telefoons (Bram-besluit live-fb 5, iPhone 13): de balk-CTA
   paste er nooit (viel ~70px buiten beeld) — CTA uit de balk; de
   offerte-knop staat prominent in het fullscreen-menu (bc-nm__foot).
   Zo past de taal-switcher er ook bij: balk = logo + vlag + Menu. */@media (max-width: 560px) {
  .bc-cm .bc-hdr__cta { display: none; }
}/* De offerte-CTA is op kleine telefoons naar het fullscreen-menu verhuisd,
   maar de foot stond daar onder 27 sub-links: sticky onderin het
   scrollende panel zodat knop + telefoonnummer altijd in beeld zijn. */@media (max-width: 1080px) {
  .bc-cm .bc-nm__foot {
    position: sticky;
    bottom: 0;
    background: var(--bc-dark);
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    padding: 14px 0;
    margin-bottom: 0;
    border-top: 1px solid rgba(255, 249, 240, 0.12);
    z-index: 2;
  }

  /* compact: knop + bel-nummer op een regel; socials staan in de
     site-footer, hier weglaten scheelt een kwart scherm sticky-hoogte */
  .bc-cm .bc-nm__foot .bc-nm__soc { display: none; }
  .bc-cm .bc-nm__panel { padding-bottom: 0; }
}/* ══ Fullscreen-menu accordion (Bram-keuze 2026-07-27, optie 1: dicht by
   default, split-tap). JS (site-header.js) zet --acc op li's met subs en
   plaatst de caret-knop; zonder JS blijven subs zichtbaar. Aan file-eind:
   wint op cascade/specificity van de bestaande subs-regels. */@media (max-width: 1080px) {
  .bc-cm .bc-nm__panel .bc-nm__li--acc { position: relative; }

  .bc-cm .bc-nm__panel .bc-nm__li--acc .bc-nm__subs { display: none; }

  .bc-cm .bc-nm__panel .bc-nm__li--open .bc-nm__subs {
    display: flex;
    animation: bcNmSubsIn 0.22s ease;
  }

  /* Sub-items zijn ALTIJD zichtbaar zodra hun ul rendert; nooit afhankelijk
     van de panel-stagger (zie iPhone-fix bij de bcNmLi-regels). */
  .bc-cm .bc-nm__panel .bc-nm__subs li {
    opacity: 1;
    transform: none;
  }

  @keyframes bcNmSubsIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
  }

  /* caret-knop: 48dp tap-zone rechts op de kop-rij, chevron in het midden */
  .bc-cm .bc-nm__panel .bc-nm__acc-btn {
    position: absolute;
    top: 6px;
    right: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
  }

  .bc-cm .bc-nm__panel .bc-nm__acc-btn::before {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2.5px solid rgba(255, 249, 240, 0.75);
    border-bottom: 2.5px solid rgba(255, 249, 240, 0.75);
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s ease;
  }

  .bc-cm .bc-nm__panel .bc-nm__li--open .bc-nm__acc-btn::before {
    transform: rotate(225deg) translate(-3px, -1px);
    border-color: var(--bc-primary);
  }

  /* de kop-link niet onder de knop laten doorlopen */
  .bc-cm .bc-nm__panel .bc-nm__li--acc > a { padding-right: 52px; }
}/* ══ Cookiebot renew-badge vs fullscreen-menu (Bram-fb 2026-08-17): de
   fixed badge (z-index maximaal) lag over de offerte-CTA in het open menu.
   site-header.js zet body.bc-nm-open zolang <details> open is; badge dan
   weg. Buiten het menu blijft de badge gewoon bereikbaar (AVG). Bewust
   un-scoped: de widget woont buiten .bc-cm. */body.bc-nm-open #CookiebotWidget {
  display: none !important;
}/* bc-fc-widget: de reviewwidget van Feedback Company (#feedback-widget-container, nu op de home van barcompany.nl)
 * zet zelf Open Sans met !important op .__fbcw__widget * en laadt die via Google Fonts. Deze regel (id plus klasse,
 * dus sterker) zet de widget in Mulish, zodat Open Sans niet meer laadt (merk bewaken, Bram 21-10). De widget staat
 * buiten .bc-cm, dus deze regel is bewust niet gescoped. */#feedback-widget-container .__fbcw__widget,
#feedback-widget-container .__fbcw__widget * {
  font-family: 'Mulish', system-ui, sans-serif !important;
}/* 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.
 * 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;
  }
}/* 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). 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;
  }
}/* 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: 16px;
  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);
}/* Vlakker beeld op de brede solo-kaart (Bram-fb 2026-07-24, zuurstof
   "Foto's": de kaart domineerde de sectie). */.bc-cm .bc-concept-grid__card.is-wide img {
  aspect-ratio: 16 / 6.4;
}.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;
  }
}/* ── Page20 fix-pass addenda (additief) ──────────────────────────────────────
 * Nieuwe opt-in hooks: cream-achtergrond (over-ons), compact-top (cocktails),
 * multi-alinea intro (zuurstof), solo-grid 1fr/880px (zuurstof), svc-also
 * linkrij (koffie/cocktails/smoothies/zuurstof) en zwarte foot-knop (over-ons
 * rev-foot). Bestaande selectors hierboven onaangetast; deze rules matchen
 * alleen wanneer de nieuwe data-velden gezet zijn. Literals byte-verbatim uit
 * de page20-previews (page20-base.css + page-specifieke overrides). */.bc-cm .bc-concept-grid--cream {
  background: var(--bc-cream); /* preview: s-conc inline var(--b2-offwhite) */
}/* Sectie volgt direct op een andere: preview zet inline padding-top:0. Staat
 * NA de media-queries zodat hij ook de tablet/mobiel padding-shorthand wint. */.bc-cm .bc-concept-grid--compact-top {
  padding-top: 0;
}/* Tussenliggende intro-alinea's: laatste alinea houdt de 46px naar het grid. */.bc-cm .bc-concept-grid__intro--mid {
  margin-bottom: 0;
}/* Solo: 1 brede kaart (zuurstof s-conc inline grid-override). */.bc-cm .bc-concept-grid__grid--solo {
  grid-template-columns: 1fr;
  max-width: 880px;
}/* svc-also linkrij onder het grid (preview .svc-also). */.bc-cm .bc-concept-grid__also {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 30px;
}.bc-cm .bc-concept-grid__also a {
  font: 700 15.5px var(--bc-font-body);
  color: var(--bc-dark); /* preview --b2-text #242422 */
  text-decoration: none;
  border-bottom: 2px solid var(--bc-primary);
  padding-bottom: 3px;
  transition: 0.2s;
}.bc-cm .bc-concept-grid__also a:hover {
  color: var(--bc-primary);
}/* Foot-knop: .rev-foot + .btn met zwarte achtergrond (over-ons preview r267;
 * de inline style overschrijft daar alleen background, de oranje btn-shadow
 * blijft staan — hier byte-verbatim overgenomen voor parity). */.bc-cm .bc-concept-grid__foot {
  display: flex;
  justify-content: center;
  margin-top: 74px;
}.bc-cm .bc-concept-grid__foot-btn {
  display: inline-block;
  background: var(--bc-dark); /* preview var(--b2-black) #242422 */
  color: #fff;
  font: 800 15px var(--bc-font-body);
  padding: 13px 24px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(238, 116, 55, 0.32);
  transition: 0.25s;
  white-space: nowrap;
}.bc-cm .bc-concept-grid__foot-btn:hover {
  background: var(--bc-green);
  box-shadow: 0 10px 24px rgba(15, 128, 105, 0.32);
}@media (max-width: 1000px) {
  .bc-cm .bc-concept-grid__foot {
    margin-top: 40px; /* preview .rev-foot media-override */
  }
}/* Reveal voor de nieuwe elementen (preview geeft ze .rv). */.bc-cm .bc-concept-grid__also,
.bc-cm .bc-concept-grid__foot {
  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.bc-visible .bc-concept-grid__also,
.bc-cm .bc-concept-grid.bc-visible .bc-concept-grid__foot {
  opacity: 1;
  transform: 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-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: var(--wpr-bg-df957a8f-d7b0-4279-a742-94f4e3dd5628) 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);
}/* :not(__eyebrow): zelfde vang-bug als why-list — de eyebrow-<p> zit in
   __text en kreeg anders 17px i.p.v. de uniforme 13px eyebrow-maat. */.bc-cm .bc-team-intro__text p:not(.bc-team-intro__eyebrow) {
  font-family: var(--bc-font-body);
  font-size: 16px;
  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 20px -3px; /* lucht onder het ghost-cijfer (Bram-fb: plakte aan de alinea) */
  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;
  }
}/* ── Modifier: photo (over-ons 2.0 s-team, additief 2026-07-07) ──────────────
   Gewone foto i.p.v. cut-out: 4/4.2 crop met afgeronde bovenhoeken en zachte
   schaduw. Waarden verbatim uit output/preview/page20/over-ons.src.html
   inline \3c style> (.s-team-media img). Default-styling ongemoeid; alleen
   actief via data.photoFrame=true (render zet bc-team-intro--photo). */.bc-cm .bc-team-intro--photo .bc-team-intro__media img {
  aspect-ratio: 4/4.2;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 26px 60px rgba(36, 36, 34, 0.16);
}/* ── Centrale fix-pass page20 (additief 2026-07-07) ─────────────────────────
   Gemeld door champagne/koffie/cocktails fixture-rapporten. *//* Inline prose-links in de copy: oranje-bold, hover groen. Waarden verbatim
   preview .p-link (champagne.src.html: color --b2-orange, weight 700, geen
   underline; hover --b2-green); zelfde regel als profile/why-list. */.bc-cm .bc-team-intro__text p a {
  color: var(--bc-primary);
  font-weight: 700;
  text-decoration: none;
}.bc-cm .bc-team-intro__text p a:hover {
  color: var(--bc-green);
}/* Modifier: photo-card (koffie 2.0 s-team). Vrijstaande foto-kaart: natuurlijk
   aspect, alle hoeken rond. Waarden verbatim koffie.src.html inline \3c style>
   (.s-team-media img{max-width:520px;border-radius:22px}). Anders dan --photo
   (over-ons): geen crop, geen schaduw, niet strak op de sectierand. *//* photo-card oogt als los kaartje: centreer hem naast de tekstkolom
   i.p.v. bottom-align (Bram-fb 2026-07-24, koffie catering-sectie hing
   halverwege met witruimte erboven). */.bc-cm .bc-team-intro--photo-card .bc-team-intro__wrap {
  align-items: center;
}.bc-cm .bc-team-intro--photo-card .bc-team-intro__media img {
  max-width: 520px;
  border-radius: 22px;
}/* Modifier: pt-large (cocktails 2.0 s-team). Preview zet inline
   padding-top:110px waar het block 96px heeft (cocktails.src.html regel 173).
   Naamconventie = collega-cta --pt-large. */.bc-cm .bc-team-intro--pt-large {
  padding-top: 110px;
}/* Inline video-facade (koffie 2.0 .kf-video + .kf-video--inline, waarden
   verbatim koffie.src.html inline \3c style>; alleen classes hernoemd naar BEM
   en tokens gesubstitueerd bij exacte match: --b2-black -> var(--bc-dark),
   --b2-orange -> var(--bc-primary)). Klein blok (560px) in de copy-kolom;
   klik injecteert de provider-iframe (facade, markup uit render). */.bc-cm .bc-team-intro__video {
  position: relative;
  max-width: 560px;
  margin: 26px 0 8px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(36, 36, 34, 0.2);
  cursor: pointer;
  aspect-ratio: 16/9;
  background: var(--bc-dark);
}.bc-cm .bc-team-intro__video-poster {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  opacity: 0.92;
}.bc-cm .bc-team-intro__video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bc-primary);
  display: grid;
  place-items: center;
  transition: transform 0.25s ease;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #fff;
}.bc-cm .bc-team-intro__video:hover .bc-team-intro__video-play {
  transform: scale(1.08);
}.bc-cm .bc-team-intro__video-icon svg {
  width: 24px;
  height: 24px;
  display: block;
  margin-left: 5px;
}.bc-cm .bc-team-intro__video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}.bc-cm .bc-team-intro__video-noscript {
  position: absolute;
  left: 12px;
  bottom: 12px;
  color: #fff;
  font: 700 14px var(--bc-font-body);
}/* 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;
  /* expliciet: op WP kleurt Blocksy's content-css het element direct
     (#231f20) en wint dat van de chip-inheritance — 9.3 was onzichtbaar
     op de donkere chip (live-fb 3, matcha). */
  color: #fff;
}.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;
  /* Fix-pass 2026-07-07 (referenties gap B): pin de regelhoogte. Zonder
     line-height erfde de figcaption de host-waarde (~5px delta per kaart);
     de preview erft body 1.65 (page20-base). */
  line-height: 1.65;
}.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;
  }
}/* ═══ Referenties 2.0 additive extensies (page20 referenties.src.html) ═════
   Additief: nieuwe selectors, bestaande defaults ongemoeid. Dekt de
   referenties-pagina: eyebrow in de kop, tekst-auteur als caption, een brede
   4e quote over de volle grid-breedte en een gestapelde foot met Google-noot
   en meerdere review-knoppen. Waarden byte-verbatim referenties.src.html
   inline CSS + page20-base.css (.eyebrow / figcaption span / .btn--green). */.bc-cm .bc-rs__eyebrow {
  font: 700 13px/1 var(--bc-font-body);
  letter-spacing: 0.22em;
  color: var(--bc-primary);
  text-transform: uppercase;
  margin: 0 0 18px;
}/* Tekst-auteur caption (naam · bedrijf · context) i.p.v. klantlogo. */.bc-cm .bc-rs__author {
  font: 700 14px var(--bc-font-body);
  color: #8f887c;
}/* Brede quote: spant de volle grid-breedte (4e kaart op referenties). In de
   mobiele swipe-slider (flex) is grid-column betekenisloos en gedraagt de
   kaart zich als de rest. */.bc-cm .bc-rs__quote--wide {
  grid-column: 1 / -1;
}.bc-cm .bc-rs__quote--wide blockquote {
  font-size: 19px;
  line-height: 1.62;
}/* Gestapelde foot: noot-regel + rij review-knoppen, gecentreerd. */.bc-cm .bc-rs__foot--stack {
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}.bc-cm .bc-rs__note {
  margin: 0;
  font: 600 15px/1.5 var(--bc-font-body);
  color: #6b665f;
}.bc-cm .bc-rs__note a {
  color: var(--bc-primary);
}.bc-cm .bc-rs__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}/* Groene review-knop (Google): base .btn--green verbatim; hover swapt naar
   oranje (tegenkleur-conventie). Gescoped op de links-rij zodat de globale
   bc-btn familie ongemoeid blijft. */.bc-cm .bc-rs__links .bc-btn--green {
  background: var(--bc-green);
  box-shadow: 0 10px 24px rgba(15, 128, 105, 0.32);
}.bc-cm .bc-rs__links .bc-btn--green:hover {
  background: var(--bc-primary);
  box-shadow: 0 10px 24px rgba(238, 116, 55, 0.32);
}/* ── FB-ronde 2.0 (v0.14.1): rustige score-chip ───────────────────────────
   Het cijfer draagt de boodschap; de sterren-rij is dubbelop en gaat uit.
   Bron-merkje monochroom zodat Google/FC even zwaar ogen. Chip met href
   (bron-profiel) gedraagt zich als stille link. */.bc-cm .bc-rs__stars-duo {
  display: none;
}.bc-cm .bc-rs__g-ic {
  filter: grayscale(1) invert(0.92) contrast(0.85);
}/* FC-merkje ook monochroom (was merk-groen #25b34b): beide bronnen even zwaar. */.bc-cm .bc-rs__fc-ic {
  background: rgba(255, 255, 255, 0.16);
}.bc-cm .bc-rs__chip--link {
  text-decoration: none;
  color: inherit;
}.bc-cm .bc-rs__chip--link:hover .bc-rs__sub {
  color: var(--bc-primary);
}/* 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;
}/* ── WP-chrome standalone (bridge-plugin v1.5.0, live-route 2026-07-24) ──
   Op WordPress print de bc-content-machine bridge-plugin de footer als een
   LOS .bc-cm-eiland na de content-area (Blocksy blocksy:footer:before hook).
   Het rhythm.css regel-5 footer-recept (band + .bc-site-footer sibling)
   matcht daar nooit: de laatste pagina-band leeft in een ANDERE .bc-cm-div.
   Deze variant draagt hetzelfde recept zelf. De wrapper (bc-wp-chrome--footer)
   trekt -2.2vw over de content-area; de diagonale hap op de ::before-laag
   toont zo de achtergrond van de laatste pagina-sectie (cream/white, altijd
   kleur-correct) — geen sibling-kennis nodig. */.bc-cm.bc-wp-chrome {
  /* geen eigen paginawit: de hap en de swoosh kijken door de wrapper heen */
  background: transparent;
}/* Blocksy zet op sommige pagina's overflow:clip op #main-container (o.a.
   /offerte-aanvragen/, Bram-melding 2026-07-24): dat kapte de footer-swoosh
   die boven de footer uitsteekt verticaal af. Verticaal vrijgeven zodra onze
   chrome actief is; horizontaal blijft dicht (body overflow-x hidden van het
   theme + .bc-cm overflow-x clip dekken de h-scroll al). */body:has(.bc-cm.bc-wp-chrome) #main-container {
  overflow-x: clip;
  overflow-y: visible;
}/* Blocksy hangt onder POSTS een "Lees meer van onze berichten"-sectie
   (related posts) + post-chrome; op tool-pagina's met 2.0-content (matcha
   is technisch een post met categorie-permalink) breekt dat het design.
   Legacy blogposts zonder .bc-cm-content houden hun related-sectie. */body:has(.bc-cm:not(.bc-wp-chrome)) .ct-related-posts-container,
body:has(.bc-cm:not(.bc-wp-chrome)) .ct-related-posts {
  display: none;
}/* Review-rijen klikbaar (Bram-fb 2026-07-24): de hele 9.3/4,9-rij is een
   link naar Feedback Company resp. Google-reviews. Link-reset zodat de
   rij er exact uitziet als de oude div; subtiele hover op het cijfer. */.bc-cm a.bc-sf__rev-row {
  color: inherit;
  text-decoration: none;
}.bc-cm a.bc-sf__rev-row .bc-sf__rnum { transition: color 0.2s ease; }.bc-cm a.bc-sf__rev-row:hover .bc-sf__rnum { color: var(--bc-primary); }/* De -2.2vw overlap ALLEEN wanneer de pagina 2.0-content draagt (een
   content-.bc-cm naast de chrome-eilanden): daar valt de hap over de
   laatste sectie-achtergrond. Op legacy pagina's (geen .bc-cm-content)
   zou de overlap de onderste tekstregels kunnen bedekken — daar start de
   footer gewoon recht na de content en toont de hap het body-wit. */body:has(.bc-cm:not(.bc-wp-chrome)) .bc-cm.bc-wp-chrome--footer {
  margin-top: -2.2vw;
}.bc-cm .bc-site-footer--wp {
  margin-top: 0;
  background: transparent;
  isolation: isolate;
}.bc-cm .bc-site-footer--wp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bc-dark);
  border-radius: 48px 48px 0 0;
  clip-path: polygon(0 2.2vw, 100% 0, 100% 100%, 0 100%);
}.bc-cm .bc-sf__bigswoosh {
  position: absolute;
  top: -150px;
  right: -90px;
  width: min(460px, 38vw);
  aspect-ratio: 2380 / 1253;
  background: var(--wpr-bg-4036605f-02c9-4c28-9cb9-78519c5e8d20) 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', 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;
  /* expliciet: Blocksy's theme-line-height (32px) erfde hier doorheen en
     maakte de lijst ~20% luchtiger dan het bouwbestek (Bram-twijfel
     2026-07-27, gemeten 42 vs ~35px per regel). 1.65 = de body-maat
     waar het ontwerp op leunde. */
  line-height: 1.65;
}/* ── 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;
  }
}/* ── Terug-naar-boven (additief; data.backToTop=true) ───────────────────
 * Verbatim duurzaamheid.src.html: wrap (1300 + gutter, zoals preview .wrap
 * max-width:1300 / padding:0 32px) met padding-bottom:26px; link font:700
 * 14px sans, oranje, geen onderstreping (--b2-sans -> --bc-font-body,
 * --b2-orange -> --bc-primary per de EXACT token map). Smooth-scroll zonder
 * JS: anchor #top + scroll-behavior op html zodra de regel aanwezig is. */.bc-cm .bc-sf__backtop {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter) 26px;
}.bc-cm .bc-sf__backtop a {
  font: 700 14px var(--bc-font-body);
  color: var(--bc-primary);
  text-decoration: none;
}html:has(.bc-cm .bc-sf__backtop) {
  scroll-behavior: smooth;
}/* === Menu-pagina's 2.0 — concept-page familie (page20 previews, fb-rondes 1+2 + team-fb) === *//* bc-page-hero — subpagina-hero 2.0 (P1 uit het page20-bouwbestek).
 * Compactere broer van bc-home-hero: kruimelpad + serif-H1 (script-accent via
 * .bc-script) + lead + CTA-rij links, foto met arcs + zwevende badge rechts.
 * Variant compact (contact): minder verticale padding; mobiel tekst EERST
 * (default-hero toont mobiel de foto eerst, strak tegen de USP-strip).
 * Score-chips (referenties) delen de chip-anatomie met review-spotlight.
 * Container 1300 = home-familie-breedte (preview .wrap, bewust geen 1260).
 * Spacing/sizing literals byte-verbatim page20-base.css .p-hero; kleur/font
 * via tokens alleen bij exacte match (patroon home-hero.css). */.bc-cm .bc-page-hero {
  background: var(--bc-white);
  padding: 52px 0 76px;
  overflow: hidden;
}.bc-cm .bc-page-hero__wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 20px 56px;
  align-items: center;
}/* ── Kruimelpad ──────────────────────────────────────────────────────────── */.bc-cm .bc-page-hero__crumb {
  font: 400 14px/1.4 var(--bc-font-body);
  color: #8f887c;
  margin: 0 0 24px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}.bc-cm .bc-page-hero__crumb a {
  color: var(--bc-primary);
  text-decoration: none;
}.bc-cm .bc-page-hero__crumb a:hover {
  text-decoration: underline;
}.bc-cm .bc-page-hero__crumb i {
  font-style: normal;
  color: rgba(36, 36, 34, 0.3);
}/* ── H1 + script-accent ──────────────────────────────────────────────────── */.bc-cm .bc-page-hero h1 {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(29px, 3.1vw, 48px);
  line-height: 1.09;
  letter-spacing: -0.7px;
  margin: 0 0 22px;
  position: relative;
  z-index: 3;
  color: var(--bc-text);
}.bc-cm .bc-page-hero h1 .bc-script {
  font-size: 1.14em; /* bouwbestek-maat op echte Blakson Hustle (subpagina) */
  display: inline-block;
  transform: rotate(-2deg);
  padding: 0 0.06em;
}/* ── Lead + CTA-rij ──────────────────────────────────────────────────────── */.bc-cm .bc-page-hero__lead {
  font-family: var(--bc-font-body);
  font-size: 16px;
  line-height: 1.65;
  max-width: 34em;
  color: #3d3a36;
  margin: 0 0 30px;
}.bc-cm .bc-page-hero__lead a {
  color: var(--bc-primary);
  font-weight: 700;
  text-decoration: none;
}.bc-cm .bc-page-hero__lead a:hover {
  color: var(--bc-green);
}.bc-cm .bc-page-hero__ctas {
  display: flex;
  gap: 26px;
  align-items: center;
  flex-wrap: wrap;
}.bc-cm .bc-page-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-page-hero__alt:hover {
  color: var(--bc-primary);
}/* ── Visual rechts: foto + arcs + zwevende badge ─────────────────────────── */.bc-cm .bc-page-hero__visual {
  position: relative;
}.bc-cm .bc-page-hero__media {
  position: relative;
  margin-left: 40px;
  margin-right: -30px;
}.bc-cm .bc-page-hero__arc {
  position: absolute;
  top: -42px;
  right: -42px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--bc-cream);
  z-index: 1;
}/* FB-ronde 2.0 (Bram 2026-07-16): groen rondje -> orange-arc (stats-familie);
   de grote creme __arc erboven blijft (neutraal, geen merk-vreemde kleur). */.bc-cm .bc-page-hero__arc2 {
  position: absolute;
  left: 22px;
  top: -22px;
  width: 48px;
  height: 48px;
  background: url(https://www.barcompany.nl/wp-content/uploads/2021/07/svg-orange.svg) no-repeat center / contain;
  opacity: 0.5;
  transform: rotate(-10deg);
  z-index: 1;
}.bc-cm .bc-page-hero__photo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  border-radius: 26px;
  aspect-ratio: 4/3.1;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}.bc-cm .bc-page-hero__badge {
  position: absolute;
  z-index: 3;
  left: -24px;
  bottom: 30px;
  width: 104px;
  height: 104px;
  background: var(--wpr-bg-c3fcb4b1-8d0b-49a3-938a-b4fb26918a4b) no-repeat center / contain;
  filter: drop-shadow(0 14px 30px rgba(36, 36, 34, 0.3));
  animation: bcPageBadgeFloat 5.5s ease-in-out infinite;
}/* Custom badge-afbeelding (bv. CO2-neutraal op duurzaamheid): img-element,
   maat uit de preview (inline width:86px;height:auto). */.bc-cm .bc-page-hero__badge--img {
  background: none;
  width: 86px;
  height: auto;
}@keyframes bcPageBadgeFloat {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-12px) rotate(-4deg); }
}/* ── Score-chips (referenties-hero) — chip-anatomie = review-spotlight ───── */.bc-cm .bc-page-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}.bc-cm .bc-page-hero__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-page-hero__chip-num {
  font: 900 32px/1 'Merriweather', Georgia, serif;
}.bc-cm .bc-page-hero__chip-num small {
  font: 700 14px var(--bc-font-body);
  color: #8f887c;
  margin-left: 2px;
}.bc-cm .bc-page-hero__chip-mid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}.bc-cm .bc-page-hero__chip-sub {
  font: 700 12.5px/1.2 var(--bc-font-body);
  color: #cfc8bc;
}.bc-cm .bc-page-hero__chip-src {
  display: flex;
  align-items: center;
  gap: 9px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding-left: 18px;
}/* halfgevulde sterren: grijze basis + oranje overlay op breedte */.bc-cm .bc-page-hero__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-page-hero__stars-duo > i {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--bc-primary);
  font-style: normal;
  pointer-events: none;
}.bc-cm .bc-page-hero__fc-ic {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #25b34b;
  display: grid;
  place-items: center;
}.bc-cm .bc-page-hero__fc-ic svg {
  width: 15px;
  height: 15px;
}.bc-cm .bc-page-hero__fc-tx {
  font: 800 11.5px/1.25 var(--bc-font-body);
  color: #e8e2d7;
  text-align: left;
}/* Google-logo als afbeelding op wit plaatje (referenties bespoke CSS). */.bc-cm .bc-page-hero__g-img {
  height: 38px;
  width: auto;
  display: block;
  background: #fff;
  border-radius: 9px;
  padding: 5px 9px;
}/* ── Variant: compact (contact) ──────────────────────────────────────────── */.bc-cm .bc-page-hero--compact {
  padding: 44px 0 64px;
}/* ── Mobiel/tablet (<=960): foto eerst, strak tegen de USP-strip ─────────── */@media (max-width: 960px) {
  .bc-cm .bc-page-hero {
    padding: 0 0 58px;
  }

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

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

  .bc-cm .bc-page-hero__media {
    margin: 0 -18px;
  }

  .bc-cm .bc-page-hero__photo {
    border-radius: 0 0 26px 26px;
    aspect-ratio: 4/3.4;
  }

  .bc-cm .bc-page-hero__arc {
    width: 150px;
    height: 150px;
    top: auto;
    bottom: -28px;
    right: -28px;
  }

  .bc-cm .bc-page-hero__arc2 {
    left: 12px;
    top: auto;
    bottom: -16px;
  }

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

  .bc-cm .bc-page-hero__badge--img {
    height: auto;
  }

  .bc-cm .bc-page-hero__crumb {
    margin-top: 6px;
  }

  /* compact (contact): iets top-padding terug, tekst EERST op mobiel */
  .bc-cm .bc-page-hero--compact {
    padding-top: 34px;
  }

  .bc-cm .bc-page-hero--compact .bc-page-hero__visual {
    order: 2;
  }
}/* ── Centrale fix-pass page20 (additief 2026-07-07) ──────────────────────── *//* Modifier: statement (over-ons 2.0). Dikkere hero-H1; waarde verbatim
   over-ons.src.html inline \3c style> (.p-hero h1{font-size:clamp(38px,5vw,76px)}
   = 72px op 1440). Alleen actief via data.size="statement". */.bc-cm .bc-page-hero--statement h1 {
  font-size: clamp(38px, 5vw, 76px);
}/* mediaCard: contact-compositie in de rechterkolom (preview .p-hero.compact
   .p-hero-right: figure.ch-media + aside.contact-card--overlap). Waarden
   byte-verbatim contact.src.html inline \3c style>; classes hernoemd naar BEM,
   tokens gesubstitueerd bij exacte match (conventie contact-section.css:
   --b2-orange -> var(--bc-primary), --b2-green -> var(--bc-green),
   --b2-text -> var(--bc-text), --b2-sans -> var(--bc-font-body),
   --b2-serif -> literal Merriweather, --b2-script -> globale .bc-script;
   literals zonder token-match blijven: #fff kaart-wit, #3d3a36 prose,
   #8f887c muted-warm, alle schaduwen). */.bc-cm .bc-page-hero__card-media {
  margin: 0;
  position: relative;
}.bc-cm .bc-page-hero__card-img {
  width: 100%;
  aspect-ratio: 16 / 11;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 26px;
  box-shadow: 0 30px 70px rgba(36, 36, 34, 0.22);
  display: block;
}.bc-cm .bc-page-hero__card-badge {
  position: absolute;
  top: -26px;
  right: -10px;
  width: 96px;
  transform: rotate(8deg);
}.bc-cm .bc-page-hero__card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 22px 50px rgba(36, 36, 34, 0.11);
  margin: -92px 0 0 clamp(18px, 3vw, 44px);
  max-width: 400px;
  padding: 32px 32px 30px;
}.bc-cm .bc-page-hero__card h3 {
  font: 900 20px/1.2 'Merriweather', Georgia, serif;
  color: var(--bc-text);
  margin: 0 0 16px;
}.bc-cm .bc-page-hero__card address {
  font-style: normal;
  font: 400 16px/1.8 var(--bc-font-body);
  color: #3d3a36;
  margin: 0 0 10px;
}/* Script-notitie: familie + oranje via globale .bc-script; hier maat/rotatie
   (chained selector wint van .bc-cm .bc-script, patroon contact-section). */.bc-cm .bc-page-hero__card-note.bc-script {
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: normal;
  display: inline-block;
  transform: rotate(-2deg);
  margin: 0 0 24px;
}.bc-cm .bc-page-hero__card-channels {
  border-top: 1px solid rgba(36, 36, 34, 0.12);
  padding-top: 22px;
}.bc-cm .bc-page-hero__card-lbl {
  display: block;
  font: 700 12.5px/1 var(--bc-font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8f887c;
  margin-bottom: 8px;
}.bc-cm .bc-page-hero__card-tel {
  display: block;
  font: 900 clamp(24px, 2.2vw, 30px)/1.1 'Merriweather', Georgia, serif;
  color: var(--bc-text);
  text-decoration: none;
  letter-spacing: -0.3px;
  transition: color 0.2s;
}.bc-cm .bc-page-hero__card-tel:hover {
  color: var(--bc-primary);
}.bc-cm .bc-page-hero__card-mail {
  display: inline-block;
  margin-top: 12px;
  font: 700 15.5px var(--bc-font-body);
  color: var(--bc-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--bc-primary);
  padding-bottom: 2px;
  transition: 0.2s;
}.bc-cm .bc-page-hero__card-mail:hover {
  color: var(--bc-green);
  border-color: var(--bc-green);
}/* Tablet/mobiel (<=960): kaart gecentreerd, kleinere overlap (preview
   .contact-card--overlap{margin:-64px auto 0;max-width:440px}). De
   compact-variant zet de visual al op order:2 (bestaande regel). */@media (max-width: 960px) {
  .bc-cm .bc-page-hero__card {
    margin: -64px auto 0;
    max-width: 440px;
  }
}/* ── FB-ronde 2.0 (v0.14.1): rustige score-chips (referenties-hero) ───────
   Sterren-rij uit (cijfer volstaat), Google-logo monochroom en op dezelfde
   maat als het FC-merkje; chip met href = stille link naar het profiel. */.bc-cm .bc-page-hero__stars-duo {
  display: none;
}.bc-cm .bc-page-hero__g-img {
  filter: grayscale(1) invert(0.92) contrast(0.85);
  height: 26px;
  width: auto;
  background: none;
  border-radius: 0;
  padding: 0;
}/* FC-merkje ook monochroom (was merk-groen #25b34b): beide bronnen even zwaar. */.bc-cm .bc-page-hero__fc-ic {
  background: rgba(255, 255, 255, 0.16);
}.bc-cm .bc-page-hero__chip--link {
  text-decoration: none;
  color: inherit;
}.bc-cm .bc-page-hero__chip--link:hover .bc-page-hero__chip-sub {
  color: var(--bc-primary);
}/* bc-profile — Menu-pagina's 2.0 "s-prof" editorial text-image.
 * 1-op-1 port van output/preview/page20/page20-base.css .s-prof (+ per-pagina
 * inline aanvullingen: flip (duurzaamheid/koffie), prof-quote (champagne),
 * co2-badges (duurzaamheid), why-list checklist (matcha), prof-sub (zuurstof),
 * hero-ctas/hero-alt (referenties/zuurstof), p-link prose-links).
 * Familie van bc-statement--shapes (zelfde bouwbestek-DNA: 460px 4/5 beeld,
 * arc mustard + arc2 groen + swoosh, serif-H2 clamp 38-60, script 1.14em),
 * maar met flip, rijkere content-slots en 3 varianten:
 *   default  — media + tekst grid (s-prof)
 *   no-media — tekstband zonder beeld (matcha s-mark, H2 een maat kleiner)
 *   qa-duo   — 2 Q&A-fotokaarten onder een gecentreerde kop (koffie kf-duo)
 * Container 1300px verbatim uit de page20 .wrap (bewuste afwijking van 1260,
 * zelfde klasse als home-familie/logo-strip). Mustard #dca618 = literal, geen
 * token (gelockt 2026-07-05). Body-prose #3d3a36 byte-verbatim (statement-
 * precedent). Check-fill choreografie hergebruikt check-usp.js via
 * [data-bc-checkfill]/[data-bc-check] — geen eigen JS. */.bc-cm .bc-profile {
  position: relative;
  background: var(--bc-white);
  padding: 110px 0;
  overflow: hidden;
}.bc-cm .bc-profile--cream {
  background: var(--bc-cream);
}.bc-cm .bc-profile--compact-top {
  padding-top: 70px;
}.bc-cm .bc-profile--compact-bottom {
  padding-bottom: 70px;
}/* Foto-kolom 400px + beeld 4/4.6 (Bram-fb 2026-07-24: portret domineerde
   de sectie t.o.v. een korte tekst, koffie "Welke soort koffie"). */.bc-cm .bc-profile__wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 72px;
  align-items: center;
}/* ── Media: 4/5 beeld + shapes-cluster (arc mustard, swoosh, arc2 groen) ── */.bc-cm .bc-profile__media {
  position: relative;
}.bc-cm .bc-profile__img-frame {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(36, 36, 34, 0.16);
}.bc-cm .bc-profile__img-frame img {
  aspect-ratio: 4 / 4.6;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  display: block;
}/* duurzaamheid CO2-beeld: iets minder hoog (inline aspect-ratio:4/4.4). */.bc-cm .bc-profile--tall-img .bc-profile__img-frame img {
  aspect-ratio: 4 / 4.4;
}/* smoothies shakefiets-tip: liggend beeld (sm-fiets__img img aspect-ratio:4/3,
   fix-pass 2026-07-07). */.bc-cm .bc-profile--landscape-img .bc-profile__img-frame img {
  aspect-ratio: 4 / 3;
}.bc-cm .bc-profile__swoosh {
  position: absolute;
  right: -74px;
  top: -46px;
  width: 190px;
  aspect-ratio: 1804 / 996;
  background: var(--wpr-bg-1f857b23-bf56-43b2-af7e-46370a717cce) 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;
}/* FB-ronde 2.0 (Bram 2026-07-16): solid goud/groen rondjes vervallen,
   deco in de orange-arc familie (zelfde asset + behandeling als stats,
   lock 2026-07-03: lightGreen + gold zijn geen merk-kleuren meer). */.bc-cm .bc-profile__arc {
  position: absolute;
  left: -34px;
  bottom: -30px;
  width: 86px;
  height: 86px;
  background: var(--wpr-bg-e66cabed-c7c7-43cc-9256-f24cb06ce796) no-repeat center / contain;
  opacity: 0.5;
  transform: rotate(-14deg);
  z-index: 1;
}.bc-cm .bc-profile__arc2 {
  position: absolute;
  right: 26px;
  bottom: -42px;
  width: 52px;
  height: 52px;
  background: var(--wpr-bg-40f9379e-19d7-4a9b-b1a6-c4496d4e9542) no-repeat center / contain;
  opacity: 0.42;
  transform: rotate(24deg);
  z-index: 3;
}/* ── Flip: tekst in de 460px-kolom links, media breed rechts ─────────────
   Verbatim preview-mechaniek (koffie/duurzaamheid inline): eerste kind
   (media) krijgt order:2; swoosh spiegelt naar linksboven. */.bc-cm .bc-profile--flip .bc-profile__wrap > div:first-child {
  order: 2;
}/* Flip draait de kolommen om, dus daar moet de FOTO-kolom (rechts) de
   400px zijn en de tekst de 1fr — anders vult het portret de brede
   fr-kolom (764px, Bram-fb 2026-07-24 koffie "niks veranderd"). */.bc-cm .bc-profile--flip .bc-profile__wrap {
  grid-template-columns: 1fr 400px;
}.bc-cm .bc-profile--flip .bc-profile__swoosh {
  right: auto;
  left: -74px;
  transform: rotate(14deg) scaleX(-1);
}/* ── Tekstkolom ─────────────────────────────────────────────────────────── */.bc-cm .bc-profile__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-profile__title {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(38px, 4.2vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--bc-text);
}.bc-cm .bc-profile__title .bc-script {
  font-size: 1.14em; /* bouwbestek-maat op echte Blakson Hustle (statement--shapes) */
  display: inline-block;
  transform: rotate(-2deg);
  margin-left: 4px;
}/* duurzaamheid "(circulariteit)"-naklank in de H2. */.bc-cm .bc-profile__h2-suffix {
  font-size: 0.5em;
  opacity: 0.55;
  font-weight: 700;
}.bc-cm .bc-profile__text > p:not(.bc-profile__eyebrow):not(.bc-profile__sub) {
  font-family: var(--bc-font-body);
  font-size: 16px;
  line-height: 1.65;
  max-width: 34em;
  color: #3d3a36;
  margin: 16px 0 0;
}.bc-cm .bc-profile__title + p {
  margin-top: 26px;
}/* Inline prose-links: oranje-bold, hover naar groen (p-link / .s-prof p a). */.bc-cm .bc-profile__text p a {
  color: var(--bc-primary);
  font-weight: 700;
  text-decoration: none;
}.bc-cm .bc-profile__text p a:hover {
  color: var(--bc-green);
}/* Serif-subkop tussen alinea's (zuurstof .prof-sub). */.bc-cm .bc-profile__text .bc-profile__sub {
  font: 900 22px/1.25 'Merriweather', Georgia, serif;
  color: var(--bc-text);
  margin: 30px 0 0;
}/* ── Badges-rij (duurzaamheid .co2-badges) ──────────────────────────────── */.bc-cm .bc-profile__badges {
  display: flex;
  gap: 16px;
  margin-top: 26px;
}.bc-cm .bc-profile__badges img {
  width: 76px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(36, 36, 34, 0.16));
}/* ── Checklist (matcha why-list in s-prof): 2 kolommen, check-fill dots ──
   Choreografie via check-usp.js: [data-bc-check] items binnen
   [data-bc-checkfill] vullen gestaggerd .is-filled. */.bc-cm .bc-profile__list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 44px;
}.bc-cm .bc-profile__list li {
  display: block;
  position: relative;
  padding: 12px 0 12px 42px;
  border-bottom: 1px solid rgba(36, 36, 34, 0.12);
  font: 600 15px/1.45 var(--bc-font-body);
  color: var(--bc-text);
  opacity: 0.55;
  transition: opacity 0.45s ease;
}.bc-cm .bc-profile__list li.is-filled {
  opacity: 1;
}.bc-cm .bc-profile__dot {
  position: absolute;
  left: 0;
  top: 11px;
  width: 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-profile__dot svg {
  width: 12px;
  height: 12px;
}.bc-cm .bc-profile__dot path {
  stroke: var(--bc-green);
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.4s ease 0.2s;
}.bc-cm .bc-profile__list li.is-filled .bc-profile__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-profile__list li.is-filled .bc-profile__dot path {
  stroke: #fff;
  stroke-dashoffset: 0;
}/* ── Klantquote (champagne .prof-quote) ─────────────────────────────────── */.bc-cm .bc-profile__quote {
  margin: 28px 0 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--bc-primary);
  font-family: 'Merriweather', Georgia, serif;
  font-style: italic;
  font-size: 18.5px;
  line-height: 1.6;
  color: #3d3a36;
}.bc-cm .bc-profile__quote-attr {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  font-style: normal;
}.bc-cm .bc-profile__quote-attr img {
  height: 34px;
  width: auto;
  display: block;
}.bc-cm .bc-profile__quote-attr cite {
  font: 700 14px/1.4 var(--bc-font-body);
  font-style: normal;
  color: #6b665f;
  letter-spacing: 0.02em;
}/* ── CTA-rij (hero-ctas): glow-knop (shared bc-btn--glow) + alt-tekstlink ── */.bc-cm .bc-profile__ctas {
  display: flex;
  gap: 26px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 28px;
}.bc-cm .bc-profile__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-profile__alt:hover {
  color: var(--bc-primary);
}/* ── Variant no-media (matcha s-mark): tekstband zonder beeld ───────────── */.bc-cm .bc-profile--no-media {
  padding: 96px 0;
}.bc-cm .bc-profile--no-media .bc-profile__wrap {
  display: block;
}.bc-cm .bc-profile--no-media .bc-profile__title {
  font-size: clamp(32px, 3.6vw, 52px);
}.bc-cm .bc-profile--no-media .bc-profile__title .bc-script {
  font-size: 1.12em;
  margin-left: 0;
}.bc-cm .bc-profile--no-media .bc-profile__text > p:not(.bc-profile__eyebrow):not(.bc-profile__sub) {
  max-width: 44em;
  margin: 14px 0 0;
}.bc-cm .bc-profile--no-media .bc-profile__ctas {
  margin-top: 32px;
}/* ── Variant qa-duo (koffie kf-duo): 2 Q&A-fotokaarten, gecentreerde kop ── */.bc-cm .bc-profile--qa-duo {
  background: var(--bc-cream);
  padding: 96px 0 104px;
}.bc-cm .bc-profile--qa-duo .bc-profile__wrap {
  display: block;
}.bc-cm .bc-profile--qa-duo .bc-profile__head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}.bc-cm .bc-profile--qa-duo .bc-profile__title {
  font-size: clamp(32px, 3.6vw, 52px);
}.bc-cm .bc-profile--qa-duo .bc-profile__title .bc-script {
  font-size: 1.12em;
  margin-left: 0;
}.bc-cm .bc-profile__duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 46px;
}.bc-cm .bc-profile__qa {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(36, 36, 34, 0.1);
  display: flex;
  flex-direction: column;
}.bc-cm .bc-profile__qa > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}.bc-cm .bc-profile__qa-body {
  padding: 30px 32px 36px;
}.bc-cm .bc-profile__qa h3 {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(21px, 2.2vw, 26px);
  line-height: 1.22;
  margin: 0 0 12px;
  color: var(--bc-text);
}.bc-cm .bc-profile__qa p {
  font-family: var(--bc-font-body);
  color: #3d3a36;
  font-size: 16.5px;
  line-height: 1.7;
  margin: 0;
  max-width: 36em;
}.bc-cm .bc-profile__qa p a {
  color: var(--bc-primary);
  font-weight: 700;
  text-decoration: none;
}.bc-cm .bc-profile__qa p a:hover {
  color: var(--bc-green);
}/* ── Scroll-reveal (BCReveal togglet .bc-visible op de section) ──────────
   Verbatim rv-curve uit page20-base.css; rv/rv2/rv3-stagger vereenvoudigd
   naar 2 groepen (media 0s, tekst/kaarten .12s) per statement-precedent. */.bc-cm .bc-profile__media,
.bc-cm .bc-profile__text,
.bc-cm .bc-profile__duo {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-profile__text,
.bc-cm .bc-profile__duo {
  transition-delay: 0.12s;
}.bc-cm .bc-profile.bc-visible .bc-profile__media,
.bc-cm .bc-profile.bc-visible .bc-profile__text,
.bc-cm .bc-profile.bc-visible .bc-profile__duo {
  opacity: 1;
  transform: none;
}/* ── Responsive ─────────────────────────────────────────────────────────── */@media (max-width: 960px) {
  /* :not-scoping: s-mark/kf-duo hielden in de preview hun 96px op mobiel
     (geen override); zonder :not zou deze latere regel de variant-padding
     op gelijke specificiteit overschrijven. --tip idem: de preview zette
     80px 0 20px als inline style, die won ook op mobiel. */
  .bc-cm .bc-profile:not(.bc-profile--no-media):not(.bc-profile--qa-duo):not(.bc-profile--tip) {
    padding: 80px 0;
  }

  /* Compact-overrides herhaald: in de preview stond 70px als inline style en
     won dus ook op mobiel van de 80px-regel. */
  .bc-cm .bc-profile--compact-top {
    padding-top: 70px;
  }

  .bc-cm .bc-profile--compact-bottom {
    padding-bottom: 70px;
  }

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

  .bc-cm .bc-profile__swoosh {
    width: 130px;
    right: -30px;
  }

  /* Preview zette hier padding:12px 0 (why-list, s-why flex-erfenis); de dot
     staat absolute op left:0, dus de 42px linker-padding blijft bewust staan
     om tekst-over-dot overlap te voorkomen (afwijking gerapporteerd). */
  .bc-cm .bc-profile__list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .bc-cm .bc-profile__list li {
    font-size: 15px;
    padding: 12px 0 12px 42px;
  }
}@media (max-width: 860px) {
  .bc-cm .bc-profile__duo {
    grid-template-columns: 1fr;
  }
}/* ── Tip-vorm (smoothies shakefiets, sm-fiets — fix-pass 2026-07-07) ──────
   Data-modifier `tip: true`. Waarden verbatim uit
   output/preview/page20/smoothies.src.html (sectie-inline + .sm-fiets):
   compacte sectie-padding 80px 0 20px, kop in p-head-maat (clamp 32/3.6vw/52,
   script 1.12em zonder inloop), grid 1.05fr/1fr met clamp-gap, beeldframe
   radius 22 + zwaardere schaduw (.18). Combineer met flip:true, swoosh:false,
   arc:false, imageAspect:'landscape' (4/3) voor de volledige preview-vorm.
   Volledig additief: zonder `tip` wijzigt er niets. Staat NA de responsive-
   media: de wrap-regel (0,3,0) wint zo van de mobiele 1fr (0,2,0), net als de
   preview die tot 820px 2 kolommen hield; de eigen 820-query hieronder stackt
   alsnog (preview @820 .sm-fiets{grid-template-columns:1fr}). */.bc-cm .bc-profile--tip {
  padding: 80px 0 20px;
}.bc-cm .bc-profile--tip .bc-profile__wrap {
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 4.5vw, 64px);
}.bc-cm .bc-profile--tip .bc-profile__title {
  font-size: clamp(32px, 3.6vw, 52px);
}.bc-cm .bc-profile--tip .bc-profile__title .bc-script {
  font-size: 1.12em;
  margin-left: 0;
}.bc-cm .bc-profile--tip .bc-profile__img-frame {
  border-radius: 22px;
  box-shadow: 0 26px 60px rgba(36, 36, 34, 0.18);
}@media (max-width: 820px) {
  .bc-cm .bc-profile--tip .bc-profile__wrap {
    grid-template-columns: 1fr;
  }
}/* bc-why-list — menu-pagina's 2.0 "s-why" sectie (page20-base.css S4-familie,
 * fb-ronde 2 staat): creme band, intro-kolom (eyebrow + serif-heading + body
 * + CTA-rij) naast een 2-koloms checklist. Lijst-items zijn semibold (600)
 * met ALLEEN inline links oranje-bold (fb-r2); dots vullen groen in via
 * .is-filled (hergebruikt check-usp.js: [data-bc-checkfill]/[data-bc-check]).
 * Li-layout is display:block + absolute dot (fb-r2 fix, afwijkend van
 * bc-check-usp's flex-li). Waarden verbatim page20-base.css .s-why/.why-list
 * + per-pagina inline aanvullingen (zuurstof=compact, matcha=titled,
 * koffie=regular, over-ons=cols1+note). Container 1300 (page20 .wrap). */.bc-cm .bc-why-list {
  background: var(--bc-cream);
  padding: 84px 0;
}.bc-cm .bc-why-list__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-why-list__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-why-list__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);
}/* Preview .script heeft in s-why geen maat-override (1em, geen rotate);
   globale .bc-script (rhythm.css) is 1.05em — hier terug naar preview-maat. */.bc-cm .bc-why-list__title .bc-script {
  font-size: 1em;
}/* :not(__eyebrow): de eyebrow is ook een <p> in __intro en deze body-regel
   (0,2,1) won anders van de eyebrow-regel (0,2,0) -> 16px i.p.v. de
   uniforme 13px eyebrow-maat (Bram-fb 2026-07-23: kleine titels overal
   hetzelfde). */.bc-cm .bc-why-list__intro p:not(.bc-why-list__eyebrow) {
  font-family: var(--bc-font-body);
  color: #3d3a36;
  max-width: 28em;
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
}.bc-cm .bc-why-list__intro p b,
.bc-cm .bc-why-list__intro p strong {
  color: var(--bc-primary);
  font-weight: 700;
}/* ── CTA-rij (preview .hero-ctas + .btn + .hero-alt, verbatim) ──────────── */.bc-cm .bc-why-list__ctas {
  display: flex;
  gap: 26px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 28px;
}.bc-cm .bc-why-list__btn {
  display: inline-block;
  background: var(--bc-primary);
  color: #fff;
  font: 800 15px var(--bc-font-body);
  padding: 13px 24px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(238, 116, 55, 0.32);
  transition: 0.25s;
  white-space: nowrap;
}.bc-cm .bc-why-list__btn:hover {
  background: var(--bc-green);
  box-shadow: 0 10px 24px rgba(15, 128, 105, 0.32);
}.bc-cm .bc-why-list__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-why-list__alt:hover {
  color: var(--bc-primary);
}/* ── Checklist (fb-r2: block-li + absolute dot, items 600, links bold) ──── */.bc-cm .bc-why-list__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 44px;
}.bc-cm .bc-why-list__list li {
  display: block;
  position: relative;
  padding: 12px 0 12px 42px;
  border-bottom: 1px solid rgba(36, 36, 34, 0.12);
  font: 600 15px/1.45 var(--bc-font-body);
  color: var(--bc-text);
  opacity: 0.55;
  transition: opacity 0.45s ease;
}.bc-cm .bc-why-list__list li.is-filled {
  opacity: 1;
}.bc-cm .bc-why-list__list li a {
  color: var(--bc-primary);
  font-weight: 700;
  text-decoration: none;
}.bc-cm .bc-why-list__list li a:hover {
  color: var(--bc-green);
}.bc-cm .bc-why-list__dot {
  position: absolute;
  left: 0;
  top: 11px;
  width: 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-why-list__dot svg {
  width: 12px;
  height: 12px;
}.bc-cm .bc-why-list__dot path {
  stroke: var(--bc-green);
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.4s ease 0.2s;
}.bc-cm .bc-why-list__list li.is-filled .bc-why-list__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-why-list__list li.is-filled .bc-why-list__dot path {
  stroke: #fff;
  stroke-dashoffset: 0;
}/* ── Afsluitende note onder de lijst (over-ons .why-note, verbatim) ─────── */.bc-cm .bc-why-list__note {
  font-family: var(--bc-font-body);
  margin: 24px 0 0;
  color: #3d3a36;
  font-size: 16px;
  line-height: 1.65;
  max-width: 28em;
}.bc-cm .bc-why-list__note b,
.bc-cm .bc-why-list__note strong {
  color: var(--bc-primary);
}/* ── Modifier: 1-koloms lijst (over-ons inline .why-list{1fr}) ──────────── */.bc-cm .bc-why-list--cols1 .bc-why-list__list {
  grid-template-columns: 1fr;
}/* ── Variant titled (matcha .why-list.two + .why-tx): 2-regel items ─────── */.bc-cm .bc-why-list--titled .bc-why-list__tx {
  font: 400 14.5px/1.5 var(--bc-font-body);
}.bc-cm .bc-why-list--titled .bc-why-list__tx b,
.bc-cm .bc-why-list--titled .bc-why-list__tx strong {
  display: block;
  font: 800 15px/1.35 var(--bc-font-body);
  color: var(--bc-text);
  margin-bottom: 2px;
}.bc-cm .bc-why-list--titled .bc-why-list__dot {
  margin-top: 1px;
}/* ── Variant compact (zuurstof inline): smalle 1-kolom, kleine dots,
      underline-links i.p.v. oranje-bold ─────────────────────────────────── */.bc-cm .bc-why-list--compact .bc-why-list__wrap {
  align-items: start;
}.bc-cm .bc-why-list--compact .bc-why-list__list {
  grid-template-columns: 1fr;
  max-width: 560px;
}.bc-cm .bc-why-list--compact .bc-why-list__list li {
  padding: 14px 0 14px 42px;
  font-weight: 600;
  line-height: 1.5;
}.bc-cm .bc-why-list--compact .bc-why-list__dot {
  width: 22px;
  height: 22px;
}.bc-cm .bc-why-list--compact .bc-why-list__dot svg {
  width: 10px;
  height: 10px;
}.bc-cm .bc-why-list--compact .bc-why-list__list li a {
  color: inherit;
  font-weight: inherit;
  text-decoration: underline;
  text-decoration-color: var(--bc-primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: 0.2s;
}.bc-cm .bc-why-list--compact .bc-why-list__list li a:hover {
  color: var(--bc-primary);
}/* ── Modifier: regular items (koffie inline .why-list li{font-weight:400}) ─ */.bc-cm .bc-why-list--regular .bc-why-list__list li {
  font-weight: 400;
}/* ── Reveal: intro komt op met de section (check-usp/statement-patroon) ──── */.bc-cm .bc-why-list__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-why-list.bc-visible .bc-why-list__intro {
  opacity: 1;
  transform: none;
}/* ── Mobiel (preview @960; li houdt 42px links: preview-regel `12px 0` is
      een flex-tijdperk-remnant die de absolute dot over de tekst zet) ────── */@media (max-width: 960px) {
  .bc-cm .bc-why-list {
    padding: 66px 0;
  }

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

  .bc-cm .bc-why-list__list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .bc-cm .bc-why-list__list li {
    font-size: 15px;
    padding: 12px 0 12px 42px;
  }

  .bc-cm .bc-why-list__dot {
    width: 32px;
    height: 32px;
  }
}/* ── Variant: smiley (FB-ronde 2.0, Bram 2026-07-16) ──────────────────────
   Matcha-punt: drie check-lijsten op een pagina is te veel van hetzelfde;
   deze variant vervangt de vink-dot door de orange-arc smiley (zelfde asset
   als stats/profile-deco). Checkfill-observer (is-filled) wordt visueel
   geneutraliseerd: geen vulling, geen vink, alleen het merk-arcje. */.bc-cm .bc-why-list--smiley .bc-why-list__dot {
  border: 0;
  border-radius: 0;
  background: var(--wpr-bg-225c1290-9467-4643-aad0-c864a83b9b73) no-repeat center / contain;
  box-shadow: none;
}.bc-cm .bc-why-list--smiley .bc-why-list__dot svg {
  display: none;
}.bc-cm .bc-why-list--smiley .bc-why-list__list li.is-filled .bc-why-list__dot {
  border: 0;
  background: var(--wpr-bg-a79609d9-c76d-46b3-b60b-443de01f1808) no-repeat center / contain;
  box-shadow: none;
  transform: none;
}/* bc-photo-cards — menu-pagina's 2.0 "p-cards" (page20-base.css P9):
 * foto-dominante 3:4 kaarten met gradient-scrim, serif-titel OP de foto en
 * uppercase "Lees meer"-label. Gebruikt als blog-/related-kaarten (koffie
 * "Verder ontdekken", matcha "Lees meer van onze berichten"). Bewust een
 * ANDER kaart-idioom dan bc-related-pages (beeld 7/3 op creme met caption
 * eronder) — geen variant daarop. Waarden verbatim page20-base.css
 * .p-cards/.p-card + koffie inline excerpt-regel. Container 1300 (page20
 * .wrap); head-styling volgt .p-head (eyebrow + serif-H2 met script-accent
 * 1.12em rotate -2deg), titelmaat = matcha's expliciete clamp(26,3vw,38). */.bc-cm .bc-photo-cards {
  background: var(--bc-white);
  padding: 96px 0 104px;
}/* Krappe spacing-variant (matcha: sectie voor de CTA-kaart). */.bc-cm .bc-photo-cards--compact {
  padding: 70px 0 30px;
}.bc-cm .bc-photo-cards__wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}.bc-cm .bc-photo-cards__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-photo-cards__title {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--bc-text);
}.bc-cm .bc-photo-cards__title .bc-script {
  font-size: 1.12em;
  display: inline-block;
  transform: rotate(-2deg);
}.bc-cm .bc-photo-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
}/* Compact = overzichts-grid (Bram-fb 2026-07-24, koffie 8 services te
   groot): 4 kolommen, vierkante kaarten, kleinere titel. */.bc-cm .bc-photo-cards--compact .bc-photo-cards__grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 36px;
}.bc-cm .bc-photo-cards--compact .bc-photo-cards__card {
  aspect-ratio: 1 / 1;
  border-radius: 16px;
}.bc-cm .bc-photo-cards--compact .bc-photo-cards__body {
  padding: 16px 18px;
}.bc-cm .bc-photo-cards--compact .bc-photo-cards__card-title {
  font-size: 17px;
}.bc-cm .bc-photo-cards__card {
  position: relative;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  text-decoration: none;
  background: #2a2a2a;
  box-shadow: 0 22px 50px rgba(36, 36, 34, 0.18);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-photo-cards__card:hover {
  transform: translateY(-6px);
}.bc-cm .bc-photo-cards__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-photo-cards__card:hover img {
  transform: scale(1.05);
}.bc-cm .bc-photo-cards__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(36, 36, 34, 0) 36%, rgba(36, 36, 34, 0.9) 100%);
}.bc-cm .bc-photo-cards__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 24px;
  z-index: 1;
}.bc-cm .bc-photo-cards__card-title {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: 21px;
  line-height: 1.25;
  color: var(--bc-white);
  margin: 0;
}/* Optionele excerpt onder de kaart-titel (koffie inline regel, verbatim). */.bc-cm .bc-photo-cards__excerpt {
  color: #efe7da;
  font: 400 14.5px/1.55 var(--bc-font-body);
  margin: 10px 0 0;
}.bc-cm .bc-photo-cards__more {
  display: inline-block;
  margin-top: 10px;
  font: 800 12px/1 var(--bc-font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bc-primary);
}/* ── Reveal: head + kaarten komen op met de section; kaarten staggeren
      per rij-positie (preview rv/rv2/rv3-patroon: 0/.12s/.24s) ───────────── */.bc-cm .bc-photo-cards__eyebrow,
.bc-cm .bc-photo-cards__title,
.bc-cm .bc-photo-cards__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-photo-cards__card:nth-child(3n + 2) {
  transition-delay: 0.12s;
}.bc-cm .bc-photo-cards__card:nth-child(3n) {
  transition-delay: 0.24s;
}.bc-cm .bc-photo-cards.bc-visible .bc-photo-cards__eyebrow,
.bc-cm .bc-photo-cards.bc-visible .bc-photo-cards__title,
.bc-cm .bc-photo-cards.bc-visible .bc-photo-cards__card {
  opacity: 1;
  transform: none;
}/* ── Mobiel (preview @820/@560, verbatim) ────────────────────────────────── */@media (max-width: 820px) {
  .bc-cm .bc-photo-cards__grid {
    grid-template-columns: 1fr 1fr;
  }
}@media (max-width: 560px) {
  .bc-cm .bc-photo-cards__grid {
    grid-template-columns: 1fr;
  }
}/* bc-collega-cta — page20 footer-CTA: donkere afgeronde offerte-band (P4) +
 * collega-variant (P8, fb-ronde 2: cut-out BOVEN de invite in de acts-kolom,
 * compacter blok). CSS verbatim geport uit
 * bc-content-machine/output/preview/page20/page20-base.css (.p-cta familie);
 * classes hernoemd naar BEM onder .bc-cm, waarden ongewijzigd.
 *
 * Token-substituties (exacte hex-match op tokens/colors.css Brand 2.0):
 *   var(--b2-white)   #FFF9F0 -> var(--bc-white)
 *   var(--b2-black)   #242422 -> var(--bc-dark)
 *   var(--b2-orange)  #EE7437 -> var(--bc-primary)
 *   var(--b2-green)   #0F8069 -> var(--bc-green)
 *   var(--b2-offwhite)#FFEACA -> var(--bc-cream)
 *   var(--b2-sans)            -> var(--bc-font-body) (Mulish)
 *   var(--b2-serif)           -> literal 'Merriweather', Georgia, serif
 *   var(--b2-script)          -> literal 'Blakson Hustle', cursive
 * Literals bewust behouden (geen token-match): #2b2723, #cfc8bc, #efe7da,
 * #efe9df, alle rgba()-schaduwen/gradients, 28px kaart-radius.
 * Container: 1300px (preview .wrap, home-familie klasse) + var(--bc-gutter). */.bc-cm .bc-collega-cta {
  padding: 40px 0 110px;
  background: var(--bc-white);
}.bc-cm .bc-collega-cta__wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}.bc-cm .bc-collega-cta__card {
  position: relative;
  background: linear-gradient(150deg, #2b2723 0%, var(--bc-dark) 62%);
  border-radius: 28px;
  padding: clamp(40px, 5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(36, 36, 34, 0.22);
}.bc-cm .bc-collega-cta__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(46% 60% at 82% 8%, rgba(238, 116, 55, 0.22), transparent 70%);
  pointer-events: none;
}.bc-cm .bc-collega-cta__mark {
  font-family: 'Blakson Hustle', cursive;
  /* FB-ronde 2.0 (Bram 2026-07-16): script-mark een maat groter, werkt
     lekker in de CTA (was clamp(30px, 3.4vw, 44px)). */
  font-size: clamp(38px, 4.4vw, 58px);
  color: var(--bc-primary);
  transform: rotate(-2deg);
  display: inline-block;
  line-height: 1;
  margin-bottom: 14px;
}.bc-cm .bc-collega-cta__card h2 {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.5px;
  color: var(--bc-white);
  margin: 0 0 12px;
  max-width: 15em;
  position: relative;
}/* Script-staart in de titel (vacatures "Company!"): preview .script erft de
   h2-maat (geen eigen font-size/line-height binnen p-cta) — neutraliseer de
   globale .bc-script tuning (1.05em / line-height .5, rhythm.css). */.bc-cm .bc-collega-cta__card h2 .bc-script {
  font-size: 1em;
  line-height: inherit;
}/* Body-alinea's. Preview-regel is `.p-cta p`; hier gescoped op __copy zodat
   de invite (eigen kleur/marge, zie onder) er niet doorheen loopt.
   Font-pin (fix-pass 2026-07-07): de preview erfde page20-base body
   `17px/1.65 Mulish`; binnen .bc-cm erft de p anders de host-font
   (16px/normal, of het WP-theme-font). */.bc-cm .bc-collega-cta__copy p {
  font: 400 16px/1.65 var(--bc-font-body);
  color: #cfc8bc;
  margin: 0;
  max-width: 36em;
  position: relative;
}/* Tweede body-alinea + inline tel/mail-links: in de preview (matcha) inline
   styles op de p/anchors, hier genormaliseerd. Waarden verbatim. */.bc-cm .bc-collega-cta__copy p + p { margin-top: 10px; }.bc-cm .bc-collega-cta__copy p a { color: inherit; font-weight: 700; }.bc-cm .bc-collega-cta__acts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  position: relative;
}/* Telefoonlink: preview .f-tel basis-declaraties + p-cta override
   (font-size 17px) samengevoegd tot de computed waarden. */.bc-cm .bc-collega-cta__tel {
  color: #efe9df;
  font: 700 17px 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-collega-cta__tel:hover {
  color: var(--bc-primary);
  border-color: var(--bc-primary);
}@media (max-width: 760px) {
  .bc-cm .bc-collega-cta { padding: 20px 0 84px; }
  .bc-cm .bc-collega-cta__card { flex-direction: column; align-items: flex-start; }
}/* ── Collega-variant (P8, fb-ronde 2) ─────────────────────────────────── */.bc-cm .bc-collega-cta__card--collega {
  align-items: center;
  padding: clamp(36px, 4.4vw, 52px) clamp(40px, 5vw, 64px);
  -moz-column-gap: 40px;
       column-gap: 40px;
}.bc-cm .bc-collega-cta__card--collega .bc-collega-cta__copy { padding: 0; }/* Acts als nette rechter kolom naast de collega-cutout (Bram-fb
   2026-07-24): invite + knop + bel-regel rechts uitgelijnd, bel-regel
   iets kleiner dan de knop voor rust in de hierarchie. */.bc-cm .bc-collega-cta__card--collega .bc-collega-cta__acts {
  padding: 0;
  align-items: flex-end;
  text-align: right;
  gap: 12px;
}.bc-cm .bc-collega-cta__card--collega .bc-collega-cta__tel {
  font-size: 14px;
}.bc-cm .bc-collega-cta__invite {
  margin: 2px 0 4px;
  color: #efe7da;
  font-size: 16px;
  position: relative;
}.bc-cm .bc-collega-cta__invite strong { color: var(--bc-white); }.bc-cm .bc-collega-cta__cutout {
  height: 172px;
  width: auto;
  display: block;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.35));
  position: relative;
  z-index: 1;
}/* Groene knop (preview .btn--green) op de bestaande bc-btn--glow basis:
   hover swapt naar oranje (tegenkleur-conventie). Extra .bc-collega-cta in
   de selector zodat dit de .bc-btn--glow:hover uit base/buttons.css wint,
   ongeacht bundel-volgorde. */.bc-cm .bc-collega-cta .bc-collega-cta__btn--green {
  background: var(--bc-green);
  box-shadow: 0 10px 24px rgba(15, 128, 105, 0.32);
}.bc-cm .bc-collega-cta .bc-collega-cta__btn--green:hover {
  background: var(--bc-primary);
  box-shadow: 0 10px 24px rgba(238, 116, 55, 0.32);
}@media (max-width: 820px) {
  .bc-cm .bc-collega-cta__card--collega { padding: 36px 28px; }
  .bc-cm .bc-collega-cta__cutout { height: 150px; }
}/* ── Sectie-presentatie (per-pagina inline styles in de preview) ────────
   NA de 760-media geplaatst: inline styles winnen in de preview ook op
   mobiel van de media-shorthand (padding-top blijft daar 100/60px). */.bc-cm .bc-collega-cta--cream { background: var(--bc-cream); }.bc-cm .bc-collega-cta--pt-large { padding-top: 100px; }.bc-cm .bc-collega-cta--pt-medium { padding-top: 60px; }/* ════════════════════════════════════════════════════════════════════════
   Variant: collega-groot ("optie D", Bram-keuze 2026-07-24). Grote kale
   cut-out die op de kaart-onderrand staat en boven de kaart uitsteekt;
   acts-tekst (invite/knop/bel) als rechter kolom dicht tegen de foto.
   Wisselt per pagina af met de gewone collega-variant.
   ════════════════════════════════════════════════════════════════════════ */.bc-cm .bc-collega-cta--cutout-large .bc-collega-cta__wrap {
  position: relative;
}.bc-cm .bc-collega-cta--cutout-large .bc-collega-cta__card {
  padding-right: 300px;
  /* de cut-out moet boven de kaart uit kunnen steken */
  overflow: visible;
  flex-wrap: nowrap;
}/* Live-fb (matcha, WP): copy (max-width 36em) + acts + 300px foto-ruimte
   overschreden samen de kaartbreedte, waardoor de acts-kolom ONDER de
   copy wrapte. Copy mag krimpen; acts is een vaste rechter kolom. */.bc-cm .bc-collega-cta--cutout-large .bc-collega-cta__copy {
  flex: 1 1 0;
  min-width: 0;
}.bc-cm .bc-collega-cta--cutout-large .bc-collega-cta__acts {
  flex: 0 0 auto;
}@media (max-width: 820px) {
  /* mobiel stapelt de kaart weer gewoon */
  .bc-cm .bc-collega-cta--cutout-large .bc-collega-cta__card { flex-wrap: wrap; }
}/* acts is normaal position:relative — static maken zodat de absolute
   cut-out op de KAART ankert (bottom 0 = kaart-onderrand). */.bc-cm .bc-collega-cta--cutout-large .bc-collega-cta__acts {
  position: static;
}.bc-cm .bc-collega-cta--cutout-large .bc-collega-cta__cutout {
  position: absolute;
  right: 48px;
  bottom: 0;
  height: 330px;
  width: auto;
  z-index: 2;
  filter: drop-shadow(0 24px 48px rgba(36, 36, 34, 0.35));
}@media (max-width: 820px) {
  /* Mobiel: geen ruimte voor de grote vrijstaande foto; kaart terug naar
     normale padding en de cut-out verbergen (tekst + knop dragen de CTA). */
  .bc-cm .bc-collega-cta--cutout-large .bc-collega-cta__card {
    padding-right: 28px;
  }
  .bc-cm .bc-collega-cta--cutout-large .bc-collega-cta__cutout {
    display: none;
  }
}/* bc-price-cards — Menu-pagina's 2.0 pakket/prijs-sectie (p-price familie).
 * Verbatim port uit bc-content-machine/output/preview/page20/:
 *   - page20-base.css P5 (.p-price/.pp-grid/.pp-card/.pp-kick/.pp-price) +
 *     P6 (.p-head h2 groot, .pp-card p.eyebrow) + .eyebrow basis
 *   - champagne.src.html inline: 2-koloms grid (max 940) + .pp-photo +
 *     mobiel-fix minmax(0,1fr) (foto duwde de kaart anders breder dan de grid)
 *   - matcha.src.html inline: .pp-grid.duo (kaart + offerte-form) + .cf-card
 *     form-container (alleen de container; GF rendert de velden zelf)
 *   - duurzaamheid.src.html inline: .duo-grid tekstkaarten + .dz-quote
 *   - smoothies.src.html inline: .sm-price donker paneel + parts-breakdown +
 *     outro-paragraaf (was inline style op de <p>)
 * Waarden NIET veranderd; alleen classes hernoemd naar BEM onder .bc-cm.
 *
 * Token-substituties (exacte hex-match, src/tokens/colors.css):
 *   --b2-offwhite #FFEACA -> --bc-cream | --b2-white #FFF9F0 -> --bc-white
 *   --b2-orange  #EE7437 -> --bc-primary | --b2-green #0F8069 -> --bc-green
 *   --b2-black   #242422 -> --bc-dark
 *   --b2-sans -> --bc-font-body | --b2-serif -> literal 'Merriweather',
 *   Georgia, serif | --b2-script -> literal 'Blakson Hustle',cursive
 *   (conventie home-familie v0.12.0). Kop/kaart-tekstkleur = var(--bc-text)
 *   per EXACT token map (preview erfde body #242422; delta onzichtbaar).
 *   Literals gebleven (geen token-match): #fff, #3d3a36, #8f887c, #cfc8bc,
 *   #2b2723, rgba-schaduwen/borders, rgba(238,116,55,.2) glow.
 *
 * Container: 1300px (page20-base .wrap — previews delen de home-familie-
 * breedte). Gutter via var(--bc-gutter) (32px desktop = preview; preview
 * mobiel-switch zat op 640px, token switcht op 768px — bewust token).
 *
 * Cascade-notities (bewust gereproduceerd uit de preview):
 *   - .pp-card p (0,1,1) wint van .pp-kick (0,1,0): de "Vacature"-kicker
 *     rendert grijs 15px met caps/letter-spacing. Zelfde relatie hier
 *     (__card p element-selector > __kick).
 *   - .sm-price__main>p wint van .eyebrow: de "Compleet verzorgd"-kicker in
 *     het donkere paneel rendert #cfc8bc, niet oranje. Idem gereproduceerd.
 *   - reveal-eindstand zet transform:none, dus de rotate(-1.5deg) van de
 *     quote vervalt na reveal (preview .js .rv.is-in deed hetzelfde).
 *
 * Reveal: data-bc-reveal + .bc-visible (BCReveal), stagger als preview
 * rv/rv2/rv3. Geen eigen JS. */.bc-cm .bc-price-cards {
  background: var(--bc-cream);
  padding: 100px 0;
}.bc-cm .bc-price-cards--white {
  background: var(--bc-white);
}/* duurzaamheid: <section class="p-price" style="padding:64px 0 72px"> */.bc-cm .bc-price-cards--compact {
  padding: 64px 0 72px;
}.bc-cm .bc-price-cards__wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}/* ── Sectie-kop ──────────────────────────────────────────────────────────── */.bc-cm .bc-price-cards__head {
  margin-bottom: 44px;
}.bc-cm .bc-price-cards__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-price-cards__head h2 {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--bc-text);
}.bc-cm .bc-price-cards__head h2 .bc-script {
  font-size: 1.12em;
  display: inline-block;
  transform: rotate(-2deg);
}.bc-cm .bc-price-cards__intro {
  font-family: var(--bc-font-body);
  font-size: 16px;
  line-height: 1.65;
  color: #3d3a36;
  max-width: 44em;
  margin: 14px 0 0;
}/* headingLarge: .p-head-kop (smoothies + duurzaamheid gebruiken .head.p-head) */.bc-cm .bc-price-cards__head--lg h2 {
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.08;
}.bc-cm .bc-price-cards__head--lg .bc-price-cards__intro {
  margin: 14px 0 44px;
}/* ── Grid: basis = pp-grid (3 kolommen) ──────────────────────────────────── */.bc-cm .bc-price-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}@media (max-width: 960px) {
  .bc-cm .bc-price-cards__grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }
}/* grid-2 (champagne): 2 kolommen, gecentreerd op 940; mobiel-fix minmax(0,1fr)
   zodat de uitstekende pp-photo de kaart niet breder duwt dan de grid-cel */@media (min-width: 961px) {
  .bc-cm .bc-price-cards__grid--grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 940px;
    margin: 0 auto;
  }
}@media (max-width: 960px) {
  .bc-cm .bc-price-cards__grid--grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .bc-cm .bc-price-cards__grid--grid-2 .bc-price-cards__card {
    padding: 28px 24px 28px;
  }

  .bc-cm .bc-price-cards__grid--grid-2 .bc-price-cards__photo {
    width: calc(100% + 48px);
    margin: -28px -24px 22px;
    height: 210px;
  }
}/* duo (matcha): prijskaart naast offerte-form, licht asymmetrisch */.bc-cm .bc-price-cards__grid--duo {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}@media (max-width: 960px) {
  .bc-cm .bc-price-cards__grid--duo {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}/* text-duo (duurzaamheid .duo-grid): 2 tekstkaarten naast elkaar, eigen
   breakpoint 860 en GEEN 520-cap (preview-class stond los van pp-grid) */.bc-cm .bc-price-cards__grid--text-duo {
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 46px;
}@media (max-width: 960px) {
  .bc-cm .bc-price-cards__grid--text-duo {
    grid-template-columns: 1fr 1fr;
    max-width: none;
    margin: 46px 0 0;
  }
}@media (max-width: 860px) {
  .bc-cm .bc-price-cards__grid--text-duo {
    grid-template-columns: 1fr;
  }
}/* ── Kaart (pp-card) ─────────────────────────────────────────────────────── */.bc-cm .bc-price-cards__card {
  background: #fff;
  border-radius: 18px;
  padding: 36px 30px 32px;
  box-shadow: 0 22px 50px rgba(36, 36, 34, 0.1);
  display: flex;
  flex-direction: column;
  color: var(--bc-text);
}.bc-cm .bc-price-cards__card.is-hero {
  background: var(--bc-dark);
  color: var(--bc-white);
}/* pp-kick — NB: __card p (element-selector, hieronder) wint op font/color/
   margin, net als .pp-card p van .pp-kick won in de preview */.bc-cm .bc-price-cards__kick {
  font: 700 12px/1 var(--bc-font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bc-primary);
  margin: 0 0 14px;
}/* line-height-pin (fix-pass 2026-07-07): preview .pp-card h3 erfde page20-base
   body 1.65 (39.6px bij 24px); binnen .bc-cm resolvet hij anders naar normal. */.bc-cm .bc-price-cards__card h3 {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: 24px;
  line-height: 1.65;
  margin: 0 0 8px;
}/* pp-price: gedefinieerd in page20-base P5 (in de vijf previews ongebruikt,
   meegeporteerd als prijs-vorm van de familie) */.bc-cm .bc-price-cards__price {
  font: 900 34px/1 'Merriweather', Georgia, serif;
  margin: 10px 0 4px;
  font-variant-numeric: tabular-nums;
}.bc-cm .bc-price-cards__price small {
  font: 700 13px var(--bc-font-body);
  color: #8f887c;
}.bc-cm .bc-price-cards__card p {
  font: 400 15px/1.6 var(--bc-font-body);
  color: #3d3a36;
  margin: 0 0 16px;
}.bc-cm .bc-price-cards__card.is-hero p {
  color: #cfc8bc;
}/* duurzaamheid kaart-eyebrow (.pp-card p.eyebrow, fb-r2 #12): wint bewust
   van __card p, zelfde specificiteits-relatie als de preview */.bc-cm .bc-price-cards__card p.bc-price-cards__card-eyebrow {
  font: 700 13px/1 var(--bc-font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bc-primary);
  margin: 0 0 12px;
}.bc-cm .bc-price-cards__card ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  flex: 1;
}.bc-cm .bc-price-cards__card li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 7px 0;
  font: 600 14.5px/1.4 var(--bc-font-body);
  border-bottom: 1px solid rgba(36, 36, 34, 0.08);
}.bc-cm .bc-price-cards__card.is-hero li {
  border-color: rgba(255, 255, 255, 0.12);
}.bc-cm .bc-price-cards__card li::before {
  content: "\2713";
  color: var(--bc-green);
  font-weight: 900;
}.bc-cm .bc-price-cards__card.is-hero li::before {
  color: var(--bc-primary);
}/* Inline tekstlinks in kaarten + outro (champagne .p-link / matcha inline) */.bc-cm .bc-price-cards__card p a,
.bc-cm .bc-price-cards__card li a,
.bc-cm .bc-price-cards__outro a {
  color: var(--bc-primary);
  font-weight: 700;
  text-decoration: none;
}.bc-cm .bc-price-cards__card p a:hover,
.bc-cm .bc-price-cards__card li a:hover,
.bc-cm .bc-price-cards__outro a:hover {
  color: var(--bc-green);
}/* Foto bovenin de kaart (champagne .pp-photo): over de card-padding heen */.bc-cm .bc-price-cards__photo {
  display: block;
  width: calc(100% + 60px);
  max-width: none;
  height: 240px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 18px 18px 0 0;
  margin: -36px -30px 26px;
}/* Vacatures (3-koloms grid): knop onderaan vastgepind + ruimere h3 */.bc-cm .bc-price-cards__grid--grid .bc-price-cards__card .bc-btn {
  margin-top: auto;
  align-self: flex-start;
}.bc-cm .bc-price-cards__grid--grid .bc-price-cards__card h3 {
  margin-bottom: 22px;
}/* Duo (matcha): de preview wikkelt de knop in een kale <div> binnen de
   flex-column kaart (.btn = inline-block -> natuurlijke breedte); de render
   emit de bc-btn als direct flex-child, dus niet laten stretchen
   (fix-pass 2026-07-07). */.bc-cm .bc-price-cards__grid--duo .bc-price-cards__card .bc-btn {
  align-self: flex-start;
}/* is-wide (vacatures stage-rij, .pp-card.pp-wide): volle breedte, flex-row */.bc-cm .bc-price-cards__card.is-wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}.bc-cm .bc-price-cards__card.is-wide h3 {
  margin: 0;
  font-size: 28px;
}.bc-cm .bc-price-cards__card.is-wide .bc-price-cards__kick {
  margin: 0 0 8px;
}.bc-cm .bc-price-cards__card.is-wide .bc-btn {
  margin-top: 0;
}/* ── Offerte-form-cel (matcha .cf-card, alleen de container; de velden
      komen uit de Gravity Forms embed) ─────────────────────────────────── */.bc-cm .bc-price-cards__form {
  background: #fff;
  border-radius: 18px;
  padding: clamp(28px, 3.6vw, 46px);
  box-shadow: 0 22px 50px rgba(36, 36, 34, 0.11);
}.bc-cm .bc-price-cards__form-title {
  font: 900 clamp(22px, 2.4vw, 29px)/1.14 'Merriweather', Georgia, serif;
  letter-spacing: -0.4px;
  color: var(--bc-text);
  margin: 0 0 14px;
}.bc-cm .bc-price-cards__form-note {
  font: 400 13px var(--bc-font-body);
  color: #8f887c;
  margin: 0 0 24px;
}/* ── Dark variant: sm-price paneel (smoothies) ───────────────────────────── */.bc-cm .bc-price-cards__panel {
  background: linear-gradient(150deg, #2b2723 0%, var(--bc-dark) 62%);
  border-radius: 28px;
  padding: clamp(36px, 4.6vw, 56px);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  color: #fff;
  box-shadow: 0 30px 70px rgba(36, 36, 34, 0.22);
  position: relative;
  overflow: hidden;
  margin-top: 46px;
}.bc-cm .bc-price-cards__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(46% 60% at 84% 6%, rgba(238, 116, 55, 0.2), transparent 70%);
  pointer-events: none;
}.bc-cm .bc-price-cards__main,
.bc-cm .bc-price-cards__parts {
  position: relative;
}@media (max-width: 820px) {
  .bc-cm .bc-price-cards__panel {
    grid-template-columns: 1fr;
  }
}/* vegan-badge (sm-vegan) */.bc-cm .bc-price-cards__badge {
  width: 76px;
  position: absolute;
  top: -8px;
  right: 0;
  transform: rotate(6deg);
}.bc-cm .bc-price-cards__big {
  font: 900 clamp(38px, 4.4vw, 54px)/1 'Merriweather', Georgia, serif;
  margin: 2px 0 14px;
}.bc-cm .bc-price-cards__big small {
  font: 700 15px var(--bc-font-body);
  color: #cfc8bc;
  margin-right: 8px;
}/* NB: wint bewust van __eyebrow (element-tiebreak), zie header-comment */.bc-cm .bc-price-cards__main > p {
  font-family: var(--bc-font-body);
  color: #cfc8bc;
  margin: 0 0 16px;
  max-width: 30em;
}.bc-cm .bc-price-cards__incl {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 11px;
}.bc-cm .bc-price-cards__incl li {
  display: flex;
  gap: 12px;
  align-items: center;
  font: 700 15.5px/1.4 var(--bc-font-body);
  color: #fff;
}.bc-cm .bc-price-cards__incl li::before {
  content: "\2713";
  flex: 0 0 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--bc-green);
  color: #fff;
  font: 800 13px/23px var(--bc-font-body);
  text-align: center;
}/* parts-breakdown: label links, prijs rechts via grid-areas, subregel onder */.bc-cm .bc-price-cards__parts {
  display: grid;
  align-content: center;
}.bc-cm .bc-price-cards__part {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "lbl val" "sub val";
  gap: 3px 24px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}.bc-cm .bc-price-cards__part:first-child {
  padding-top: 0;
}.bc-cm .bc-price-cards__part:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}.bc-cm .bc-price-cards__part-lbl {
  grid-area: lbl;
  font: 800 12px/1 var(--bc-font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bc-primary);
}.bc-cm .bc-price-cards__part-val {
  grid-area: val;
  align-self: center;
  justify-self: end;
  text-align: right;
  font: 900 clamp(26px, 2.6vw, 32px)/1 'Merriweather', Georgia, serif;
  color: #fff;
}.bc-cm .bc-price-cards__part-sub {
  grid-area: sub;
  font: 600 14px/1.4 var(--bc-font-body);
  color: #cfc8bc;
  max-width: 20em;
}/* ── Outro (smoothies: gecentreerde slotparagraaf onder het paneel) ──────── */.bc-cm .bc-price-cards__outro {
  font-family: var(--bc-font-body);
  max-width: 840px;
  margin: 34px auto 0;
  color: #3d3a36;
  font-size: 16px;
  line-height: 1.7;
  text-align: center;
}/* ── Script-quote (duurzaamheid .dz-quote) ───────────────────────────────── */.bc-cm .bc-price-cards__quote {
  text-align: center;
  margin: 64px auto 0;
  max-width: 26em;
  font-family: 'Blakson Hustle', cursive;
  font-weight: 400;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.25;
  color: var(--bc-primary);
  transform: rotate(-1.5deg);
}/* ── Reveal (BCReveal .bc-visible; stagger = preview rv/rv2/rv3) ─────────── */.bc-cm .bc-price-cards__eyebrow,
.bc-cm .bc-price-cards__head h2,
.bc-cm .bc-price-cards__intro,
.bc-cm .bc-price-cards__card,
.bc-cm .bc-price-cards__form,
.bc-cm .bc-price-cards__panel,
.bc-cm .bc-price-cards__part,
.bc-cm .bc-price-cards__outro,
.bc-cm .bc-price-cards__quote {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-price-cards__intro,
.bc-cm .bc-price-cards__form,
.bc-cm .bc-price-cards__grid--grid .bc-price-cards__card:nth-child(3n+2),
.bc-cm .bc-price-cards__grid--grid-2 .bc-price-cards__card:nth-child(3n+2),
.bc-cm .bc-price-cards__grid--duo .bc-price-cards__card:nth-child(3n+2),
.bc-cm .bc-price-cards__grid--text-duo .bc-price-cards__card:nth-child(2),
.bc-cm .bc-price-cards__grid--text-duo .bc-price-cards__card:nth-child(3),
.bc-cm .bc-price-cards__part:nth-child(2) {
  transition-delay: 0.12s;
}.bc-cm .bc-price-cards__grid--grid .bc-price-cards__card:nth-child(3n),
.bc-cm .bc-price-cards__grid--grid-2 .bc-price-cards__card:nth-child(3n),
.bc-cm .bc-price-cards__grid--text-duo .bc-price-cards__card:nth-child(4),
.bc-cm .bc-price-cards__part:nth-child(3),
.bc-cm .bc-price-cards__outro {
  transition-delay: 0.24s;
}.bc-cm .bc-price-cards.bc-visible .bc-price-cards__eyebrow,
.bc-cm .bc-price-cards.bc-visible .bc-price-cards__head h2,
.bc-cm .bc-price-cards.bc-visible .bc-price-cards__intro,
.bc-cm .bc-price-cards.bc-visible .bc-price-cards__card,
.bc-cm .bc-price-cards.bc-visible .bc-price-cards__form,
.bc-cm .bc-price-cards.bc-visible .bc-price-cards__panel,
.bc-cm .bc-price-cards.bc-visible .bc-price-cards__part,
.bc-cm .bc-price-cards.bc-visible .bc-price-cards__outro,
.bc-cm .bc-price-cards.bc-visible .bc-price-cards__quote {
  opacity: 1;
  transform: none;
}/* bc-contact-section: contactpagina 2.0 (verbatim port van s-contact +
 * contact-card CSS uit output/preview/page20/contact.src.html inline style,
 * plus .wrap uit page20-base.css). Waarden byte-verbatim; alleen classes
 * hernoemd naar BEM en tokens gesubstitueerd bij EXACTE hex-match:
 *   --b2-offwhite #FFEACA -> var(--bc-cream)
 *   --b2-white    #FFF9F0 -> var(--bc-white)
 *   --b2-orange   #EE7437 -> var(--bc-primary)
 *   --b2-green    #0F8069 -> var(--bc-green)
 *   --b2-black    #242422 -> var(--bc-dark)  (surface, soc-cirkels)
 *   --b2-text     #242422 -> var(--bc-text)  (home-familie conventie, home-hero.css)
 *   --b2-sans     -> var(--bc-font-body); --b2-serif -> literal Merriweather
 *   --b2-script   -> globale .bc-script (base/rhythm.css)
 * Literals zonder token-match blijven staan: #fff kaart-wit, #3d3a36 prose,
 * #8f887c muted-warm, radius 18/14/12/26px, alle schaduwen.
 * Container 1300px (preview .wrap = home-familie-breedte). */.bc-cm .bc-contact-section {
  background: var(--bc-cream);
  padding: 96px 0 104px; /* preview .s-contact basis; bottom verderop overschreven naar 130px (bron-volgorde behouden) */
  scroll-margin-top: 90px;
}.bc-cm .bc-contact-section__wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter); /* preview: 32px, 18px <=640; token switcht op 768 (blueprint-regel 5) */
}.bc-cm .bc-contact-section__grid {
  display: grid;
  grid-template-columns: 1.08fr 1fr;
  gap: 64px;
  align-items: start;
}/* ── Formulier-kaart (statische mock) ────────────────────────────────────── */.bc-cm .bc-contact-section__card {
  background: #fff; /* literal: kaart-wit, bewust geen --bc-white (#fff9f0) */
  border-radius: 18px;
  padding: clamp(28px, 3.6vw, 46px);
  box-shadow: 0 22px 50px rgba(36, 36, 34, 0.11);
}.bc-cm .bc-contact-section__h {
  font: 900 clamp(24px, 2.6vw, 33px)/1.14 'Merriweather', Georgia, serif;
  letter-spacing: -0.4px;
  color: var(--bc-text);
  margin: 0 0 14px;
}.bc-cm .bc-contact-section__h .bc-script {
  font-size: 1.12em;
  display: inline-block;
  transform: rotate(-2deg);
}.bc-cm .bc-contact-section__intro {
  font-family: var(--bc-font-body); /* preview: body-basis 17px/1.65 (page20-base body) */
  font-size: 16px;
  line-height: 1.65;
  color: #3d3a36;
  margin: 0 0 10px;
  max-width: 38em;
}.bc-cm .bc-contact-section__req {
  font: 400 13px var(--bc-font-body);
  color: #8f887c;
  margin: 0 0 26px;
}.bc-cm .bc-contact-section__two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}.bc-cm .bc-contact-section__field {
  margin-bottom: 18px;
}.bc-cm .bc-contact-section__field label {
  display: block;
  font: 700 13.5px/1 var(--bc-font-body);
  color: var(--bc-text);
  margin-bottom: 9px;
}.bc-cm .bc-contact-section__field input,
.bc-cm .bc-contact-section__field textarea {
  width: 100%;
  background: var(--bc-white);
  border: 1.5px solid rgba(36, 36, 34, 0.16);
  border-radius: 12px;
  padding: 13px 16px;
  font: 400 15.5px/1.4 var(--bc-font-body);
  color: var(--bc-text);
  outline: none;
  transition: border-color 0.2s;
}.bc-cm .bc-contact-section__field input:focus,
.bc-cm .bc-contact-section__field textarea:focus {
  border-color: var(--bc-primary);
}.bc-cm .bc-contact-section__field textarea {
  min-height: 138px;
  resize: vertical;
}/* Verstuur-knop rendert als .bc-btn.bc-btn--glow (zelfde waarden als preview
   .btn: 800 15px, padding 13px 24px, pill, oranje glow, hover groen). */.bc-cm .bc-contact-section__send {
  margin-top: 4px;
}/* ── Sociaal-kolom ────────────────────────────────────────────────────────── */.bc-cm .bc-contact-section__soc {
  display: flex;
  gap: 14px;
  margin: 24px 0 36px;
}.bc-cm .bc-contact-section__soc a {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bc-dark);
  display: grid;
  place-items: center;
  transition: 0.25s;
}.bc-cm .bc-contact-section__soc a svg {
  width: 21px;
  height: 21px;
  fill: #fff;
}.bc-cm .bc-contact-section__soc a:hover {
  background: var(--bc-primary);
  transform: translateY(-3px);
}.bc-cm .bc-contact-section__imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}.bc-cm .bc-contact-section__imgs img {
  width: 100%;
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(36, 36, 34, 0.13);
}/* ── Optionele adreskaart: bussen-foto + patch-badge + overlap-kaart ──────
   Preview-bron: .ch-media + .contact-card--overlap (leefde daar in de
   hero-rechterkolom). Kaart-waarden byte-verbatim; de max-width 560px op de
   kolom is compositie-hulp (hero-kolombreedte benaderen buiten de hero),
   gerapporteerd als afwijking. Basis .contact-card (niet-overlap: padding
   40px 38px 36px, max-width 440px, margin 0 auto) is niet geport: het
   markup-pad rendert altijd de overlap-variant. */.bc-cm .bc-contact-section__address-col {
  max-width: 560px;
  margin: 0 0 64px;
}.bc-cm .bc-contact-section__media {
  margin: 0;
  position: relative;
}.bc-cm .bc-contact-section__media-img {
  width: 100%;
  aspect-ratio: 16 / 11;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 26px;
  box-shadow: 0 30px 70px rgba(36, 36, 34, 0.22);
}.bc-cm .bc-contact-section__badge {
  position: absolute;
  top: -26px;
  right: -10px;
  width: 96px;
  transform: rotate(8deg);
}.bc-cm .bc-contact-section__address {
  position: relative;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 22px 50px rgba(36, 36, 34, 0.11);
  margin: -92px 0 0 clamp(18px, 3vw, 44px);
  max-width: 400px;
  padding: 32px 32px 30px;
}.bc-cm .bc-contact-section__address h3 {
  font: 900 20px/1.2 'Merriweather', Georgia, serif;
  color: var(--bc-text);
  margin: 0 0 16px;
}.bc-cm .bc-contact-section__address address {
  font-style: normal;
  font: 400 16px/1.8 var(--bc-font-body);
  color: #3d3a36;
  margin: 0 0 10px;
}/* Script-notitie: familie + oranje via globale .bc-script; hier maat/rotatie.
   Chained selector zodat deze rule altijd wint van .bc-cm .bc-script
   (font-size 1.05em / line-height .5 / letter-spacing .01em globaal);
   preview .cc-landelijk = 28px / 1.1 / letter-spacing normal. */.bc-cm .bc-contact-section__note.bc-script {
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: normal;
  display: inline-block;
  transform: rotate(-2deg);
  margin: 0 0 24px;
}.bc-cm .bc-contact-section__channels {
  border-top: 1px solid rgba(36, 36, 34, 0.12);
  padding-top: 22px;
}.bc-cm .bc-contact-section__lbl {
  display: block;
  font: 700 12.5px/1 var(--bc-font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8f887c;
  margin-bottom: 8px;
}.bc-cm .bc-contact-section__tel {
  display: block;
  font: 900 clamp(24px, 2.2vw, 30px)/1.1 'Merriweather', Georgia, serif;
  color: var(--bc-text);
  text-decoration: none;
  letter-spacing: -0.3px;
  transition: color 0.2s;
}.bc-cm .bc-contact-section__tel:hover {
  color: var(--bc-primary);
}.bc-cm .bc-contact-section__mail {
  display: inline-block;
  margin-top: 12px;
  font: 700 15.5px var(--bc-font-body);
  color: var(--bc-primary);
  text-decoration: none;
  border-bottom: 2px solid var(--bc-primary);
  padding-bottom: 2px;
  transition: 0.2s;
}.bc-cm .bc-contact-section__mail:hover {
  color: var(--bc-green);
  border-color: var(--bc-green);
}/* ── Tablet (<=960) ──────────────────────────────────────────────────────── */@media (max-width: 960px) {
  .bc-cm .bc-contact-section {
    padding: 72px 0 84px; /* bottom verderop alsnog 130px (bron-volgorde preview) */
  }

  .bc-cm .bc-contact-section__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .bc-cm .bc-contact-section__address {
    margin: -64px auto 0;
    max-width: 440px;
  }
}/* Preview-cascade behouden: .s-contact{padding-bottom:130px} staat in de bron
   NA de 960-query en wint dus op alle breedtes (desktop en mobiel). */.bc-cm .bc-contact-section {
  padding-bottom: 130px;
}/* ── Mobiel (<=560) ──────────────────────────────────────────────────────── */@media (max-width: 560px) {
  .bc-cm .bc-contact-section__two {
    grid-template-columns: 1fr;
  }

  .bc-cm .bc-contact-section__imgs {
    grid-template-columns: 1fr;
  }
}/* ── Scroll-reveal (preview .rv/.rv2/.rv3; productie-conventie concept-grid:
     data-bc-reveal op de section, BCReveal zet .bc-visible) ────────────────
   Stagger verbatim: form-kaart + sociaal-heading 0s; intro/soc/media .12s;
   imgs/adreskaart .24s. */.bc-cm .bc-contact-section__card,
.bc-cm .bc-contact-section__media,
.bc-cm .bc-contact-section__address,
.bc-cm .bc-contact-section__aside .bc-contact-section__h,
.bc-cm .bc-contact-section__aside .bc-contact-section__intro,
.bc-cm .bc-contact-section__soc,
.bc-cm .bc-contact-section__imgs {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-contact-section__media,
.bc-cm .bc-contact-section__aside .bc-contact-section__intro,
.bc-cm .bc-contact-section__soc {
  transition-delay: 0.12s;
}.bc-cm .bc-contact-section__address,
.bc-cm .bc-contact-section__imgs {
  transition-delay: 0.24s;
}.bc-cm .bc-contact-section.bc-visible .bc-contact-section__card,
.bc-cm .bc-contact-section.bc-visible .bc-contact-section__media,
.bc-cm .bc-contact-section.bc-visible .bc-contact-section__address,
.bc-cm .bc-contact-section.bc-visible .bc-contact-section__aside .bc-contact-section__h,
.bc-cm .bc-contact-section.bc-visible .bc-contact-section__aside .bc-contact-section__intro,
.bc-cm .bc-contact-section.bc-visible .bc-contact-section__soc,
.bc-cm .bc-contact-section.bc-visible .bc-contact-section__imgs {
  opacity: 1;
  transform: none;
}/* bc-ref-cats — referenties 2.0 doelgroep-kaarten (page20 ref-cats sectie).
 * Witte band direct onder de hero: 4 klikbare categorie-kaarten (icoon +
 * excerpt-regel + vette titel) die doorlinken naar /referenties/<doelgroep>/.
 * Hover: kaart licht op (creme vlak + lift + schaduw), icoon schaalt, titel
 * kleurt oranje. Optionele kop (h2 + intro) volgt het p-head idioom van de
 * page20-previews. Reveal: section-niveau (statement-patroon); kaarten alleen
 * via opacity omdat de hover al een transform draagt (zelfde oplossing als
 * review-spotlight offset-kaarten). Waarden byte-verbatim uit
 * referenties.src.html inline CSS. */.bc-cm .bc-ref-cats {
  background: var(--bc-white);
  padding: 0 0 70px;
}/* ── Optionele kop (p-head idioom; preview-sectie is koploos) ────────────── */.bc-cm .bc-ref-cats__head {
  max-width: 1300px;
  margin: 0 auto 44px;
  padding: 0 var(--bc-gutter);
}.bc-cm .bc-ref-cats__title {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--bc-text);
}.bc-cm .bc-ref-cats__intro {
  font-family: var(--bc-font-body);
  color: #3d3a36;
  max-width: 44em;
  margin: 14px 0 0;
}/* ── Kaarten-grid ────────────────────────────────────────────────────────── */.bc-cm .bc-ref-cats__wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}.bc-cm .bc-ref-cats__cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  text-decoration: none;
  padding: 20px 14px;
  border-radius: 22px;
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}.bc-cm .bc-ref-cats__cat:hover {
  transform: translateY(-5px);
  background: var(--bc-cream);
  box-shadow: 0 16px 36px rgba(36, 36, 34, 0.13);
}.bc-cm .bc-ref-cats__cat img {
  width: 62px;
  height: 62px;
  -o-object-fit: contain;
     object-fit: contain;
  transition: transform 0.25s;
}.bc-cm .bc-ref-cats__cat:hover img {
  transform: scale(1.07);
}.bc-cm .bc-ref-cats__cat p {
  font: 600 15px/1.5 var(--bc-font-body);
  color: #6b665f;
  margin: 0;
}.bc-cm .bc-ref-cats__cat b {
  display: block;
  font: 800 16.5px var(--bc-font-body);
  color: var(--bc-text);
  transition: color 0.25s;
}.bc-cm .bc-ref-cats__cat:hover b {
  color: var(--bc-primary);
}/* ── Reveal (statement-patroon): kop met translate, kaarten opacity-only
   omdat hover al een transform draagt ─────────────────────────────────────── */.bc-cm .bc-ref-cats__head {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-ref-cats__cat {
  opacity: 0;
}.bc-cm .bc-ref-cats__cat:nth-child(2),
.bc-cm .bc-ref-cats__cat:nth-child(3) {
  transition-delay: 0.12s;
}.bc-cm .bc-ref-cats__cat:nth-child(4) {
  transition-delay: 0.24s;
}.bc-cm .bc-ref-cats.bc-visible .bc-ref-cats__head {
  opacity: 1;
  transform: none;
}.bc-cm .bc-ref-cats.bc-visible .bc-ref-cats__cat {
  opacity: 1;
}/* ── Mobiel ──────────────────────────────────────────────────────────────── */@media (max-width: 820px) {
  .bc-cm .bc-ref-cats__wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}/* bc-menu-list — matcha 2.0 menukaarten (page20 s-menu sectie).
 * Witte band met p-head kop (eyebrow + serif-H2 met script-staart) boven een
 * auto-fit grid van creme menukaartjes: script-cijfer (01, 02, ...), serif
 * dranknaam en een korte one-liner. Geen hover-gedrag (bewust rustig; het is
 * een leeskaart, geen link). Reveal: section-niveau (statement-patroon),
 * kaarten getrapt. Waarden byte-verbatim uit matcha.src.html inline CSS +
 * page20-base.css p-head. */.bc-cm .bc-menu-list {
  background: var(--bc-white);
  padding: 104px 0;
}.bc-cm .bc-menu-list__wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}.bc-cm .bc-menu-list__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-menu-list__title {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--bc-text);
}.bc-cm .bc-menu-list__title .bc-script {
  font-size: 1.12em; /* bouwbestek-maat op echte Blakson Hustle */
  display: inline-block;
  transform: rotate(-2deg);
}/* ── Menukaarten ─────────────────────────────────────────────────────────── */.bc-cm .bc-menu-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
  margin-top: 46px;
}.bc-cm .bc-menu-list__card {
  background: var(--bc-cream);
  border-radius: 16px;
  padding: 26px 22px;
}/* .bc-script (base) levert font-family + oranje; maat/regelhoogte hier
   expliciet omdat de base 1.05em / line-height .5 zet. */.bc-cm .bc-menu-list__num {
  display: block;
  font-size: 24px;
  line-height: 1;
  margin-bottom: 10px;
}.bc-cm .bc-menu-list__card h4 {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: 19px;
  margin: 0 0 6px;
  color: var(--bc-text);
}.bc-cm .bc-menu-list__card p {
  font: 400 14.5px/1.55 var(--bc-font-body);
  color: #3d3a36;
  margin: 0;
}/* ── Reveal (statement-patroon): kop, kaarten getrapt ────────────────────── */.bc-cm .bc-menu-list__head,
.bc-cm .bc-menu-list__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-menu-list__card:nth-child(2),
.bc-cm .bc-menu-list__card:nth-child(3) {
  transition-delay: 0.12s;
}.bc-cm .bc-menu-list__card:nth-child(4),
.bc-cm .bc-menu-list__card:nth-child(5) {
  transition-delay: 0.24s;
}.bc-cm .bc-menu-list.bc-visible .bc-menu-list__head,
.bc-cm .bc-menu-list.bc-visible .bc-menu-list__card {
  opacity: 1;
  transform: none;
}/* bc-specs — matcha 2.0 praktisch-checklist (page20 s-specs sectie).
 * Creme band met p-head kop (eyebrow + serif-H2 met script-staart) boven een
 * full-width 2-koloms checklist met check-fill choreografie: de dots vullen
 * een voor een groen in zodra ze in beeld komen. Het gedrag komt van
 * check-usp.js (generiek op [data-bc-checkfill] + [data-bc-check]); dit block
 * levert GEEN eigen JS. Items mogen een inline link dragen (oranje, hover
 * groen). Lijst-waarden byte-verbatim page20-base.css .why-list; kop
 * byte-verbatim p-head. Anders dan check-usp (intro-kolom naast de lijst):
 * hier staat de kop erboven en loopt de lijst over de volle breedte. */.bc-cm .bc-specs {
  background: var(--bc-cream);
  padding: 96px 0;
}.bc-cm .bc-specs__wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}.bc-cm .bc-specs__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-specs__title {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--bc-text);
}.bc-cm .bc-specs__title .bc-script {
  font-size: 1.12em; /* bouwbestek-maat op echte Blakson Hustle */
  display: inline-block;
  transform: rotate(-2deg);
}/* ── Checklist: full-width, 2 kolommen, dot vult groen (why-list verbatim) ── */.bc-cm .bc-specs__list {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 44px;
}.bc-cm .bc-specs__list li {
  display: block;
  position: relative;
  padding: 12px 0 12px 42px;
  border-bottom: 1px solid rgba(36, 36, 34, 0.12);
  font: 600 15px/1.45 var(--bc-font-body);
  color: var(--bc-text);
  opacity: 0.55;
  transition: opacity 0.45s ease;
}.bc-cm .bc-specs__list li.is-filled {
  opacity: 1;
}.bc-cm .bc-specs__list li a {
  color: var(--bc-primary);
  font-weight: 700;
  text-decoration: none;
}.bc-cm .bc-specs__list li a:hover {
  color: var(--bc-green);
}.bc-cm .bc-specs__dot {
  position: absolute;
  left: 0;
  top: 11px;
  width: 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-specs__dot svg {
  width: 12px;
  height: 12px;
}.bc-cm .bc-specs__dot path {
  stroke: var(--bc-green);
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset 0.4s ease 0.2s;
}.bc-cm .bc-specs__list li.is-filled .bc-specs__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-specs__list li.is-filled .bc-specs__dot path {
  stroke: #fff;
  stroke-dashoffset: 0;
}/* ── Reveal (statement-patroon): kop, dan lijst ──────────────────────────── */.bc-cm .bc-specs__head,
.bc-cm .bc-specs__list {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-specs__list {
  transition-delay: 0.12s;
}.bc-cm .bc-specs.bc-visible .bc-specs__head,
.bc-cm .bc-specs.bc-visible .bc-specs__list {
  opacity: 1;
  transform: none;
}/* ── Mobiel (why-list 960-regels verbatim; dot blijft op 42px inspring) ──── */@media (max-width: 960px) {
  .bc-cm .bc-specs__list {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .bc-cm .bc-specs__list li {
    font-size: 15px;
  }
}/* bc-story-panel — page20 dz-deep port (duurzaamheid.src.html, fb-r2 #13).
 *
 * Lang editorial verhaal-blok: prose-kolom links (max 760px grid-track,
 * prose zelf 768px) + sticky beeldpaneel rechts (aspect 3/3.6, zachte
 * tint-shadow) dat per verhaal wisselt op hover EN op scroll. Mobiel
 * (<=1024): paneel weg, inline beeld boven elk verhaal. Afsluitende
 * script-quote in groen (Blakson Hustle, -1.5deg) met woord-voor-woord
 * reveal via .bc-story-panel__qw spans + --i stagger.
 *
 * Waarden byte-verbatim uit de preview-CSS (inline \3c style> duurzaamheid).
 * Token-substituties (exacte hex-match): --b2-white -> --bc-white,
 * --b2-offwhite -> --bc-cream, --b2-orange -> --bc-primary,
 * --b2-green -> --bc-green, --b2-serif -> literal 'Merriweather', Georgia,
 * serif, --b2-sans -> --bc-font-body, --b2-script -> literal 'Blakson
 * Hustle', 'Damion', cursive. H2/H3 kleur = var(--bc-dark) (#242422,
 * preview erfde de body-kleur --b2-text). Prose-kleur #3d3a36 = literal
 * (geen token-match; zelfde literal als concept-grid__intro).
 *
 * Reveal: per element [data-bc-reveal] -> .bc-visible (BCReveal), zelfde
 * waarden als de preview .rv (26px / .6s / cubic-bezier(.22,1,.36,1));
 * intro-alinea's krijgen de .12s stagger (preview rv2). Quote-woorden
 * verschijnen alleen-met-JS: de verborgen rust-staat staat achter de
 * .bc-story-panel-js class (door story-panel.js gezet) zodat de quote
 * zonder JS gewoon leesbaar is.
 */.bc-cm .bc-story-panel {
  background: var(--bc-white);
  padding: 64px 0 60px;
}/* wrap = page20 .wrap (1300px) + dz-deep-grid in een: prose-track 760px,
   paneel-track de rest. Gutter via token (32px desktop / 18px mobiel). */.bc-cm .bc-story-panel__wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
  display: grid;
  grid-template-columns: minmax(0, 760px) 1fr;
  gap: clamp(36px, 4.5vw, 72px);
  align-items: start;
}/* Geen enkel verhaal met beeld -> geen paneel, prose vol-breed. */.bc-cm .bc-story-panel--no-panel .bc-story-panel__wrap {
  grid-template-columns: 1fr;
}/* preview: .dz-deep .prose{max-width:768px;margin:0 auto} +
   .dz-deep-grid .prose{margin:0} -> netto margin 0 binnen de grid. */.bc-cm .bc-story-panel__prose {
  max-width: 768px;
  margin: 0;
}.bc-cm .bc-story-panel__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-story-panel__title {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.5px;
  margin: 0 0 20px;
  color: var(--bc-dark);
}.bc-cm .bc-story-panel__story-title {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  margin: 52px 0 14px;
  color: var(--bc-dark);
}/* Verhalen met beeld sturen het paneel: hover kleurt de kop oranje. */.bc-cm .bc-story-panel__story-title[data-bc-panel-img] {
  cursor: default;
  transition: color 0.25s;
}.bc-cm .bc-story-panel__story-title[data-bc-panel-img]:hover {
  color: var(--bc-primary);
}/* preview: .dz-deep p:not(.eyebrow). font-family expliciet (token map). */.bc-cm .bc-story-panel__prose p:not(.bc-story-panel__eyebrow) {
  font-family: var(--bc-font-body);
  color: #3d3a36;
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 16px;
}/* ── Quote als statement-moment: groen script, woord-voor-woord reveal ──── */.bc-cm .bc-story-panel__quote {
  margin: clamp(40px, 5.5vw, 64px) auto 0;
  max-width: 24em;
  text-align: center;
  font-family: 'Blakson Hustle', cursive;
  font-size: clamp(30px, 4.2vw, 54px);
  line-height: 1.2;
  color: var(--bc-green);
  transform: rotate(-1.5deg);
}.bc-cm .bc-story-panel__qw {
  display: inline-block;
}/* Verborgen rust-staat alleen met JS (bc-story-panel-js op de sectie):
   zonder JS blijft de quote gewoon leesbaar. */.bc-cm .bc-story-panel-js .bc-story-panel__qw {
  opacity: 0;
  transform: translateY(0.45em) rotate(3deg);
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.15);
  transition-delay: calc(var(--i) * 60ms);
}.bc-cm .bc-story-panel__quote.is-in .bc-story-panel__qw {
  opacity: 1;
  transform: none;
}.bc-cm .bc-story-panel__qw-em {
  color: var(--bc-primary);
}/* ── Sticky beeldpaneel (desktop) ────────────────────────────────────────── */.bc-cm .bc-story-panel__stage {
  position: sticky;
  top: 100px;
  margin: 70px 0 44px;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 3 / 3.6;
  box-shadow: 0 16px 38px rgba(36, 36, 34, 0.15);
  background: var(--bc-cream);
}.bc-cm .bc-story-panel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s ease;
}.bc-cm .bc-story-panel__img.is-on {
  opacity: 1;
}/* Inline verhaal-beelden: alleen mobiel zichtbaar. */.bc-cm .bc-story-panel__mob-img {
  display: none;
}/* ── Reveal: per element, preview .rv waarden ────────────────────────────── */.bc-cm .bc-story-panel [data-bc-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-story-panel__intro {
  transition-delay: 0.12s;
}.bc-cm .bc-story-panel [data-bc-reveal].bc-visible {
  opacity: 1;
  transform: none;
}/* ── Mobiel/tablet (<=1024): paneel weg, inline beelden aan ──────────────── */@media (max-width: 1024px) {
  .bc-cm .bc-story-panel__wrap {
    grid-template-columns: 1fr;
  }
  .bc-cm .bc-story-panel__stage {
    display: none;
  }
  .bc-cm .bc-story-panel__mob-img {
    display: block;
    margin: 26px 0 6px;
    border-radius: 18px;
    box-shadow: 0 20px 46px rgba(36, 36, 34, 0.18);
    width: 100%;
    aspect-ratio: 16 / 10;
    -o-object-fit: cover;
       object-fit: cover;
  }
}/* bc-team-grid — over-ons 2.0 "BC Office-team" roster (page20 s-office,
 * fb #16.2: volledig grid, iedereen zichtbaar). 5-koloms grid van
 * teamkaarten op cream: foto grayscale die op hover kleurt + zoomt, naam +
 * rol-caption, hover-invlieg "Bekijk profiel"-label met pijl. Brand-kaart
 * (Dana): groen vlak + naam in scriptletter + smiley-watermerk. Join-kaart:
 * wit + dashed oranje rand. Join-regel onder het grid hergebruikt
 * bc-btn--glow (buttons.css), geen eigen knop-CSS.
 *
 * Waarden verbatim geport uit output/preview/page20/over-ons.src.html
 * inline \3c style> (s-office / tm-*) + page20-base.css utils (.wrap/.eyebrow/
 * .h-serif). Container 1300 (over-ons volgt de home-familie klasse).
 * Token-map: --b2-white -> --bc-white, --b2-offwhite -> --bc-cream,
 * --b2-orange -> --bc-primary, --b2-green -> --bc-green, --b2-text ->
 * --bc-text (precedent team-intro), --b2-sans -> --bc-font-body, --b2-serif
 * -> literal 'Merriweather', Georgia, serif, --b2-script -> literal
 * 'Blakson Hustle', cursive (rhythm.css .bc-script def).
 *
 * Reveal: per element [data-bc-reveal] (BCReveal observeert descendants),
 * zoals de preview per kaart een .rv had; 3-cyclus stagger via nth-child
 * (preview rv/rv2/rv3-cyclus). Net als in
 * de preview wint de reveal-eindstate (transform:none) qua specificiteit van
 * de hover-lift op de kaart; schaduw, foto-zoom en go-label dragen de hover. */.bc-cm .bc-team-grid {
  background: var(--bc-white);
  padding: 100px 0 110px;
  scroll-margin-top: 90px;
}.bc-cm .bc-team-grid__inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}.bc-cm .bc-team-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-team-grid__title {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.08;
  letter-spacing: -0.5px;
  color: var(--bc-text);
  margin: 0;
}.bc-cm .bc-team-grid__title .bc-script {
  font-size: 1.12em;
  display: inline-block;
  transform: rotate(-2deg);
}/* Optionele intro (geen preview-tegenhanger; gestyled naar team-intro body-p). */.bc-cm .bc-team-grid__intro {
  font-family: var(--bc-font-body);
  font-size: 16px;
  line-height: 1.65;
  max-width: 38em;
  color: #3d3a36;
  margin: 16px 0 0;
}.bc-cm .bc-team-grid__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 54px;
}.bc-cm .bc-team-grid__card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--bc-cream);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}.bc-cm a.bc-team-grid__card:hover,
.bc-cm a.bc-team-grid__card:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 26px 52px rgba(36, 36, 34, 0.18);
}.bc-cm a.bc-team-grid__card:focus-visible {
  outline: 3px solid var(--bc-primary);
  outline-offset: 3px;
}.bc-cm .bc-team-grid__ph {
  position: relative;
  display: block;
  aspect-ratio: 3/3.2;
  overflow: hidden;
}.bc-cm .bc-team-grid__ph img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  filter: grayscale(1);
  transform: scale(1.01);
  transition: filter 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm .bc-team-grid__card:hover .bc-team-grid__ph img {
  filter: none;
  transform: scale(1.06);
}/* PNG cut-out: contain, bottom-aligned met lucht boven/naast (preview tm-ph--cut). */.bc-cm .bc-team-grid__ph--cut img {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: bottom center;
     object-position: bottom center;
  padding: 16px 10px 0;
}.bc-cm .bc-team-grid__cap {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 16px 16px;
  border-top: 2px solid rgba(36, 36, 34, 0.08);
  text-align: left;
}.bc-cm .bc-team-grid__cap b {
  font: 800 15px/1.35 var(--bc-font-body);
  color: var(--bc-text);
}.bc-cm .bc-team-grid__cap small {
  margin-top: 3px;
  font: 700 10.5px/1.4 var(--bc-font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8f887c;
}.bc-cm .bc-team-grid__go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font: 800 11.5px/1 var(--bc-font-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bc-primary);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}.bc-cm .bc-team-grid__go svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}.bc-cm a.bc-team-grid__card:hover .bc-team-grid__go,
.bc-cm a.bc-team-grid__card:focus-visible .bc-team-grid__go {
  opacity: 1;
  transform: none;
}/* Brand-kaart (Dana-patroon): groen vlak, naam in scriptletter, smiley-watermerk. */.bc-cm .bc-team-grid__ph--brand {
  background: var(--bc-green);
  display: flex;
  align-items: center;
  justify-content: center;
}.bc-cm .bc-team-grid__ph--brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wpr-bg-72462eee-23ad-46ed-bc28-2b2c772bd5ef) center/135% no-repeat;
  opacity: 0.16;
}.bc-cm .bc-team-grid__ph--brand i {
  position: relative;
  font: 400 clamp(34px, 3.4vw, 46px)/1 'Blakson Hustle', cursive;
  font-style: normal;
  color: var(--bc-cream);
  transform: rotate(-6deg);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}.bc-cm a.bc-team-grid__card:hover .bc-team-grid__ph--brand i {
  transform: rotate(-2deg) scale(1.08);
}/* Join-kaart: wit + dashed oranje rand ("Jouw naam?"). */.bc-cm .bc-team-grid__card--join {
  background: var(--bc-white);
  border: 2px dashed rgba(238, 116, 55, 0.55);
  box-shadow: none;
}.bc-cm .bc-team-grid__card--join:hover {
  border-color: var(--bc-primary);
}.bc-cm .bc-team-grid__card--join .bc-team-grid__ph img {
  filter: none;
}.bc-cm .bc-team-grid__card--join .bc-team-grid__cap {
  border-top-color: rgba(238, 116, 55, 0.25);
}.bc-cm .bc-team-grid__card--join .bc-team-grid__cap b {
  color: var(--bc-primary);
}.bc-cm .bc-team-grid__card--join .bc-team-grid__cap small {
  color: #6b665f;
}/* Join-regel onder het grid: serif-zin + glow-knop (bc-btn--glow, buttons.css). */.bc-cm .bc-team-grid__join {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 44px;
}.bc-cm .bc-team-grid__join p {
  margin: 0;
  font: 900 21px/1.3 'Merriweather', Georgia, serif;
  color: var(--bc-text);
}/* ── Reveal: per element data-bc-reveal, 3-cyclus stagger (preview rv/rv2/rv3) ── */.bc-cm .bc-team-grid [data-bc-reveal] {
  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-grid [data-bc-reveal].bc-visible {
  opacity: 1;
  transform: none;
}.bc-cm .bc-team-grid__card:nth-child(3n + 2) {
  transition-delay: 0.12s;
}.bc-cm .bc-team-grid__card:nth-child(3n) {
  transition-delay: 0.24s;
}/* ── Responsive (verbatim preview breakpoints) ──────────────────────────── */@media (max-width: 1080px) {
  .bc-cm .bc-team-grid__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}@media (max-width: 640px) {
  .bc-cm .bc-team-grid__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .bc-cm .bc-team-grid__cap {
    padding: 12px 12px 14px;
  }

  .bc-cm .bc-team-grid {
    padding: 76px 0 84px;
  }
}/* Touch: foto in kleur en go-label altijd zichtbaar (geen hover mogelijk). */@media (hover: none) {
  .bc-cm .bc-team-grid__ph img {
    filter: none;
  }

  .bc-cm .bc-team-grid__go {
    opacity: 1;
    transform: none;
  }
}/* === Flipbook (lookbook-bars, 2026-08-12) === *//* bc-flipbook — keuzevlak + fullscreen page-flip viewer (lookbook-bars,
 * 2026-08-12). Head-styling verbatim het p-head-patroon (photo-cards.css:
 * eyebrow 700 13/1 0.22em + serif-H2 clamp 26/3vw/38); container 1300
 * (concept-page familie). Kaarten: echte boek-covers met lichte
 * perspectief-tilt + spine-schaduw die op hover rechtop komt (BC-hover:
 * lift ~4px, titel naar oranje; spring-easing). Viewer-overlay: donker
 * (--bc-text basis), chrome in Mulish, pijlen als ronde knoppen met de
 * oranje->teal tegenkleur-swap. */.bc-cm .bc-flipbook {
  background: var(--bc-white);
  padding: 96px 0 104px;
}.bc-cm .bc-flipbook__wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
}.bc-cm .bc-flipbook__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-flipbook__title {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin: 0;
  color: var(--bc-text);
}.bc-cm .bc-flipbook__title .bc-script {
  font-size: 1.12em;
  display: inline-block;
  transform: rotate(-2deg);
}.bc-cm .bc-flipbook__intro {
  font-family: var(--bc-font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--bc-text-light);
  max-width: 640px;
  margin: 18px 0 0;
}/* ── Keuzevlak ─────────────────────────────────────────────────────────── */.bc-cm .bc-flipbook__grid {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(28px, 5vw, 72px);
  margin-top: 52px;
}.bc-cm .bc-flipbook__card {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 460px;
  flex: 0 1 auto;
  font-family: var(--bc-font-body);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}.bc-cm .bc-flipbook__cover-wrap {
  display: block;
  perspective: 1200px;
}.bc-cm .bc-flipbook__cover {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
  width: auto;
  border-radius: 4px 8px 8px 4px;
  transform: rotateY(-9deg);
  transform-origin: left center;
  /* Boek-look: rug-highlight links + gelaagde, naar de achtergrond getinte
     schaduw (geen puur zwart). */
  box-shadow:
    inset 6px 0 12px -6px rgb(26 26 26 / 0.45),
    -2px 0 0 rgb(255 255 255 / 0.28),
    0 18px 36px -14px rgb(35 31 32 / 0.38),
    0 6px 14px -8px rgb(35 31 32 / 0.28);
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}/* Staand boek (brochure) naast liggend boek (lookbook): zelfde plank-hoogte,
   dus de cover schaalt binnen dezelfde max-height. */.bc-cm .bc-flipbook__card--portrait .bc-flipbook__cover {
  max-height: 340px;
}.bc-cm .bc-flipbook__card:hover,
.bc-cm .bc-flipbook__card:focus-visible {
  transform: translateY(-4px);
}.bc-cm .bc-flipbook__card:hover .bc-flipbook__cover,
.bc-cm .bc-flipbook__card:focus-visible .bc-flipbook__cover {
  transform: rotateY(0deg);
  box-shadow:
    inset 6px 0 12px -6px rgb(26 26 26 / 0.3),
    -2px 0 0 rgb(255 255 255 / 0.28),
    0 26px 44px -16px rgb(35 31 32 / 0.42),
    0 8px 18px -8px rgb(35 31 32 / 0.3);
}.bc-cm .bc-flipbook__card:focus-visible {
  outline: 3px solid var(--bc-primary);
  outline-offset: 6px;
  border-radius: 8px;
}.bc-cm .bc-flipbook__card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 26px;
}.bc-cm .bc-flipbook__card-title {
  font: 800 20px/1.25 var(--bc-font-body);
  color: var(--bc-text);
  transition: color 0.3s ease;
}.bc-cm .bc-flipbook__card:hover .bc-flipbook__card-title,
.bc-cm .bc-flipbook__card:focus-visible .bc-flipbook__card-title {
  color: var(--bc-primary);
}.bc-cm .bc-flipbook__card-tagline {
  font-family: var(--bc-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--bc-text-light);
  margin: 6px 0 0;
  max-width: 320px;
}.bc-cm .bc-flipbook__card-open {
  font: 700 13px/1 var(--bc-font-body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bc-primary);
  margin-top: 14px;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--bc-primary);
  transition: color 0.3s ease, border-color 0.3s ease;
}.bc-cm .bc-flipbook__card:hover .bc-flipbook__card-open,
.bc-cm .bc-flipbook__card:focus-visible .bc-flipbook__card-open {
  color: var(--bc-primary-hover);
  border-color: var(--bc-primary-hover);
}/* ── Viewer-overlay ───────────────────────────────────────────────────────
   BEWUST NIET onder .bc-cm gescoped: flipbook.js verplaatst de overlay bij
   de eerste open naar <body>. Reden: de sectie draagt data-bc-reveal en een
   ge-transformde/ge-opacity-de ancestor maakt position:fixed relatief aan
   die ancestor (en trok de backdrop mee in de reveal-opacity, gezien in de
   mobiele preview). De bc-flipbook__-prefix is uniek genoeg als scope;
   Backdrop volledig dicht (#1a1a1a): zelfs 3% doorschijn bleek op mobiel
   leesbare ghost-tekst te geven. */.bc-flipbook__overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  background: #1a1a1a;
  font-family: var(--bc-font-body, 'Mulish', sans-serif);
}.bc-flipbook__overlay[hidden] {
  display: none;
}.bc-flipbook__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--bc-gutter, 32px);
}.bc-flipbook__bar-title {
  font: 700 15px/1.2 var(--bc-font-body, 'Mulish', sans-serif);
  letter-spacing: 0.04em;
  color: var(--bc-cream, #fdf6ec);
}.bc-flipbook__close {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.12);
  color: #fdf6ec;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, color 0.3s ease;
}.bc-flipbook__close:hover,
.bc-flipbook__close:focus-visible {
  background: var(--bc-primary, #ee7336);
  color: #fff;
}.bc-flipbook__stage {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--bc-gutter, 32px);
}/* StPageFlip rendert een eigen block-element in de stage; pagina-beelden
   krijgen een subtiele rand-schaduw mee van de lib zelf. */.bc-flipbook__stage .stf__parent {
  margin: 0 auto;
}.bc-flipbook__nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 14px var(--bc-gutter, 32px) 22px;
}.bc-flipbook__arrow {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: var(--bc-primary, #ee7336);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, transform 0.3s ease;
}.bc-flipbook__arrow:hover,
.bc-flipbook__arrow:focus-visible {
  background: var(--bc-primary-hover, #047158);
  transform: translateY(-2px);
}.bc-flipbook__arrow:disabled {
  background: rgb(255 255 255 / 0.14);
  color: rgb(255 255 255 / 0.4);
  cursor: default;
  transform: none;
}.bc-flipbook__counter {
  font: 700 14px/1 var(--bc-font-body, 'Mulish', sans-serif);
  letter-spacing: 0.08em;
  color: #fdf6ec;
  min-width: 74px;
  text-align: center;
}/* Scroll-lock zolang de viewer open is (gezet door flipbook.js). */.bc-flipbook-lock {
  overflow: hidden !important;
}/* ── Mobiel ───────────────────────────────────────────────────────────── */@media (max-width: 768px) {
  .bc-cm .bc-flipbook {
    padding: 64px 0 72px;
  }

  .bc-cm .bc-flipbook__grid {
    flex-direction: column;
    align-items: center;
    gap: 44px;
    margin-top: 40px;
  }

  .bc-cm .bc-flipbook__cover,
  .bc-cm .bc-flipbook__card--portrait .bc-flipbook__cover {
    max-height: 300px;
    max-width: min(86vw, 420px);
  }

  .bc-flipbook__bar {
    padding: 10px 14px;
  }

  .bc-flipbook__stage {
    padding: 0 6px;
  }

  .bc-flipbook__nav {
    gap: 16px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .bc-flipbook__arrow {
    width: 42px;
    height: 42px;
  }
}/* === Bedankt-pagina (offerte-nazorg, 2026-08-17) === *//* bc-bedankt-hero — conversie-nazorg hero voor de bedankt-pagina.
 * Familie van bc-page-hero: zelfde wrap (1300 + --bc-gutter), zelfde serif-H1
 * met .bc-script accent, zelfde foto-met-arcs + zwevende badge rechts.
 * Eigen elementen: samenvattings-chips (client-side gevuld) + verticale
 * status-stepper. Spacing/kleur-literals byte-verbatim page-hero.css waar de
 * anatomie deelt; alleen de stepper/chips zijn nieuw. */.bc-cm .bc-bedankt-hero {
  background: var(--bc-white);
  padding: 52px 0 76px;
  overflow: hidden;
}.bc-cm .bc-bedankt-hero__wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--bc-gutter);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 20px 56px;
  align-items: center;
}/* ── Eyebrow (gelockte maat: 700 13px/1, ls 0.22em, uppercase) ───────────── */.bc-cm .bc-bedankt-hero__eyebrow {
  font: 700 13px/1 var(--bc-font-body);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bc-primary);
  margin: 0 0 18px;
}/* ── H1 + script-accent (page-hero maten) ────────────────────────────────── */.bc-cm .bc-bedankt-hero h1 {
  font-family: 'Merriweather', Georgia, serif;
  font-weight: 900;
  font-size: clamp(29px, 3.1vw, 48px);
  line-height: 1.09;
  letter-spacing: -0.7px;
  margin: 0 0 22px;
  position: relative;
  z-index: 3;
  color: var(--bc-text);
}.bc-cm .bc-bedankt-hero h1 .bc-script {
  font-size: 1.14em;
  display: inline-block;
  transform: rotate(-2deg);
  padding: 0 0.06em 0.12em;
}/* ── Lead (page-hero maten) ──────────────────────────────────────────────── */.bc-cm .bc-bedankt-hero__lead {
  font-family: var(--bc-font-body);
  font-size: 16px;
  line-height: 1.65;
  max-width: 34em;
  color: #3d3a36;
  margin: 0 0 24px;
}/* ── Samenvattings-chips (client-side gevuld uit query-params) ───────────── */.bc-cm .bc-bedankt-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
}.bc-cm .bc-bedankt-hero__chips[hidden] {
  display: none;
}.bc-cm .bc-bedankt-hero__chip {
  font: 700 13px/1 var(--bc-font-body);
  color: var(--bc-text);
  background: var(--bc-cream);
  border-radius: 999px;
  padding: 9px 16px;
  white-space: nowrap;
}/* ── Status-stepper ──────────────────────────────────────────────────────── */.bc-cm .bc-bedankt-hero__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 34em;
}.bc-cm .bc-bedankt-hero__step {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 0 0 22px 0;
}.bc-cm .bc-bedankt-hero__step:last-child {
  padding-bottom: 0;
}/* Verbindingslijn tussen de stappen */.bc-cm .bc-bedankt-hero__step::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 30px;
  bottom: 2px;
  width: 2px;
  background: rgba(36, 36, 34, 0.1);
}.bc-cm .bc-bedankt-hero__step:last-child::before {
  display: none;
}.bc-cm .bc-bedankt-hero__step.is-done::before {
  background: var(--bc-green, #047158);
  opacity: 0.35;
}.bc-cm .bc-bedankt-hero__step-ico {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  background: var(--bc-white);
  border: 2px solid rgba(36, 36, 34, 0.15);
  color: transparent;
}.bc-cm .bc-bedankt-hero__step.is-done .bc-bedankt-hero__step-ico {
  background: var(--bc-green, #047158);
  border-color: var(--bc-green, #047158);
  color: #fff;
}.bc-cm .bc-bedankt-hero__step.is-active .bc-bedankt-hero__step-ico {
  border-color: var(--bc-primary);
}.bc-cm .bc-bedankt-hero__step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
}.bc-cm .bc-bedankt-hero__step.is-active .bc-bedankt-hero__step-dot {
  background: var(--bc-primary);
  animation: bcBedanktPulse 1.8s ease-in-out infinite;
}@keyframes bcBedanktPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.55; }
}.bc-cm .bc-bedankt-hero__step-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 3px;
}.bc-cm .bc-bedankt-hero__step-label {
  font: 800 16px/1.3 var(--bc-font-body);
  color: var(--bc-text);
}.bc-cm .bc-bedankt-hero__step-sub {
  font: 400 14px/1.5 var(--bc-font-body);
  color: var(--bc-text-muted);
}/* ── Visual rechts (page-hero anatomie) ──────────────────────────────────── */.bc-cm .bc-bedankt-hero__visual {
  position: relative;
}.bc-cm .bc-bedankt-hero__media {
  position: relative;
  margin-left: 40px;
  margin-right: -30px;
}.bc-cm .bc-bedankt-hero__arc {
  position: absolute;
  top: -42px;
  right: -42px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: var(--bc-cream);
  z-index: 1;
}.bc-cm .bc-bedankt-hero__arc2 {
  position: absolute;
  left: 22px;
  top: -22px;
  width: 48px;
  height: 48px;
  background: var(--wpr-bg-52bcffd3-8af9-4cef-9196-1b17ec45e2d7) no-repeat center / contain;
  opacity: 0.5;
  transform: rotate(-10deg);
  z-index: 1;
}.bc-cm .bc-bedankt-hero__photo {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  border-radius: 26px;
  aspect-ratio: 4/3.1;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  /* placeholder tot bedankt-hero.js de foto zet (render heeft geen src) */
  background: var(--bc-cream);
}.bc-cm .bc-bedankt-hero__badge {
  position: absolute;
  z-index: 3;
  left: -24px;
  bottom: 30px;
  width: 104px;
  height: 104px;
  background: var(--wpr-bg-a735ed95-3e6a-4e8d-80f5-eedcf7d05154) no-repeat center / contain;
  filter: drop-shadow(0 14px 30px rgba(36, 36, 34, 0.3));
  animation: bcBedanktBadgeFloat 5.5s ease-in-out infinite;
}@keyframes bcBedanktBadgeFloat {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-10px) rotate(-4deg); }
}/* ── Mobiel ──────────────────────────────────────────────────────────────── */@media (max-width: 900px) {
  .bc-cm .bc-bedankt-hero {
    padding: 36px 0 52px;
  }

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

  .bc-cm .bc-bedankt-hero__media {
    margin-left: 0;
    margin-right: 0;
  }

  .bc-cm .bc-bedankt-hero__arc {
    top: -24px;
    right: -18px;
    width: 130px;
    height: 130px;
  }
}/* === BC 3.0 (fase 3, 2026-09-30): alles onder de versiemarker .bc-cm.bc30, na de 2.0-components
   zodat 3.0 erbovenop komt; plan bc-content-machine/docs/superpowers/plans/2026-09-30-bc30-fase3-blokbibliotheek.md === *//* BC 3.0 fundament (fase 3, plan bc-content-machine/docs/superpowers/plans/2026-09-30-bc30-fase3-blokbibliotheek.md).
 *
 * Alles in src/bc30/ staat onder de versiemarker `.bc-cm.bc30`: een pagina die de tool in 3.0 rendert
 * krijgt `<div class="bc-cm bc30">`. Live pagina's met oude HTML (`<div class="bc-cm">`) houden de
 * 2.0-opmaak tot hun eigen push. Nooit een 3.0-regel op kaal `.bc-cm`.
 * De 2.0-CSS blijft de onderlaag (net als in de 3.0-preview); deze regels komen erbovenop, met
 * DEZELFDE SPECIFICITEIT als in de preview (review run 1, bevinding 1): `.bc30 X` uit de preview
 * wordt `.bc30:where(.bc-cm) X`, `.bc-cm.cocktail-max-page X` wordt `.bc-cm.bc30 X`, zodat een
 * 2.0-blokregel die in de preview wint (eyebrows, kaartteksten) hier ook wint.
 * Bron: de 3.0-preview (tag bc30-vastgezet-2026-09-30), css/base.css, chrome.css en
 * components/service-grid.css (band), geport met scripts/port-bc30-css.mjs. Eyebrows, vinkjes en
 * de tik-veer van kaarten horen bij hun rol (runs 3 en 4), niet hier. *//* === Letters laden zonder verschuiving (reviewer 4a L14, reviewer 5 M5; eerst alleen in pricing.css). Tot de
   webletters binnen zijn, tekent de browser de kop in Georgia en het scriptwoord in een cursieve systeemletter;
   die zijn breder (gemeten 3 en 20 procent), dus breekt een kop eerst over een regel meer en springt alles
   eronder daarna (CLS tot 0,11 op de lichte kop met foto, 0,2 op de home op 700). Terugvalletters met de
   breedte van de webletter (size-adjust) houden dezelfde regels, in elk 3.0-blok.
   Batch 7 (review batch 6, M2): ook de lopende tekst (Mulish, eerst system-ui) kreeg een terugval, Arial op de
   breedte van Mulish; die wissel gaf het grootste deel van de verschuiving op de home (de inleiding brak anders).
   Per gewicht een eigen maat (kop 700 en 900 apart), gemeten over de echte tekst van vijf pagina's; de
   ascent/descent van de webletter (gedeeld door size-adjust) houden de regels even hoog. unicode-range van de
   tekst = die van Mulish, zodat een teken dat Mulish niet heeft net als eerst naar system-ui gaat. Met geladen
   letters verandert er niets; de terugval geldt alleen zolang een webletter laadt of ontbreekt. === */@font-face{font-family:'BC30 kop terugval';src:local('Georgia Bold'),local('Georgia-Bold'),local('Georgia');font-weight:400 799;size-adjust:95.5%;ascent-override:103%;descent-override:28.6%;line-gap-override:0%}@font-face{font-family:'BC30 kop terugval';src:local('Georgia Bold'),local('Georgia-Bold'),local('Georgia');font-weight:800 900;size-adjust:97.1%;ascent-override:101.3%;descent-override:28.1%;line-gap-override:0%}@font-face{font-family:'BC30 script terugval';src:local('Comic Sans MS'),local('ComicSansMS');size-adjust:83.6%;ascent-override:136.6%;descent-override:50.8%;line-gap-override:0%}@font-face{font-family:'BC30 tekst terugval';src:local('Arial'),local('ArialMT');font-weight:100 549;size-adjust:103%;ascent-override:97.6%;descent-override:24.3%;line-gap-override:0%;unicode-range:U+0000-02CC,U+02CE-02D7,U+02DA,U+02DC-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1EFF,U+2000-206F,U+20A0-20C0,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD}@font-face{font-family:'BC30 tekst terugval';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:550 749;size-adjust:99.8%;ascent-override:100.7%;descent-override:25.1%;line-gap-override:0%;unicode-range:U+0000-02CC,U+02CE-02D7,U+02DA,U+02DC-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1EFF,U+2000-206F,U+20A0-20C0,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD}@font-face{font-family:'BC30 tekst terugval';src:local('Arial Bold'),local('Arial-BoldMT');font-weight:750 1000;size-adjust:102.1%;ascent-override:98.4%;descent-override:24.5%;line-gap-override:0%;unicode-range:U+0000-02CC,U+02CE-02D7,U+02DA,U+02DC-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1EFF,U+2000-206F,U+20A0-20C0,U+2113,U+2122,U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD}/* === Tokens en paginagrond (alleen in 3.0). De grond is zwart zoals `main` in de preview; tekst
   staat altijd in een band of in een sectie met eigen achtergrond (render-blocks.mjs zet een
   standaardband als de draft er geen heeft). overflow:clip zoals `main` in de preview, zodat de
   boog van de laatste band niet over de footer uitsteekt. === */.bc-cm.bc30{
  --bc-black:#040301;          /* paginagrond en hero */
  --bc-muted:#8f887c;          /* kruimel, gedempte tekst */
  --bc-primary-dark:#d6642c;   /* hover op een oranje knop */
  --bc-dark-2:#282727;         /* donkere tweede knop (hero) */
  --bc-line-dark:#333332;      /* rand op donker */
  --bc-on-dark:#cfc8bc;        /* lopende tekst op donker */
  --bc-light:#fff9ef;          /* lichte band */
  --bc-font-serif:'Merriweather','BC30 kop terugval',Georgia,serif;
  --bc-font-script:'Blakson Hustle','BC30 script terugval',cursive;
  --bc-font-heading:'Mulish','BC30 tekst terugval',system-ui,sans-serif;
  --bc-font-body:'Mulish','BC30 tekst terugval',system-ui,sans-serif;
  --bc30-cap:1400px;
  --bc30-gutter:32px;
  background:var(--bc30-zwart);
  color:var(--bc30-donker);
  overflow:clip;
}@media(max-width:760px){.bc-cm.bc30{--bc30-gutter:24px}}/* === Stijlbibliotheek (fase 3 ronde 2, S1b). Afgeleid van de referentiepagina's home en cocktails
   (meting: bc-content-machine/docs/research/2026-10-02-bc30-stijlmeting/README.md; naslag:
   docs/DESIGN-DECISIONS.md kop "BC 3.0 stijlbibliotheek"). Blokken gebruiken alleen deze tokens voor
   lettermaat, kleur, radius, schaduw, ruimte en beweging; het lintscript (S1d) telt wat erbuiten valt.
   Keuzes van Bram op de stijlpagina (2026-10-02): 1B wit met off-white vlakken, 2B groen voor vinkjes en bellen,
   3B lichte kop als variant, 4B kaarttitels 28 en 22, 5B veegstrook met kaarten zo hoog als hun inhoud, 6B kleine
   oranje tekst donkerder, 7A op de telefoon eerst tekst; plus paginakop groter dan sectiekop (zijn vraag).
   Besluitenregister (sinds 2026-10-03, fase A): bc-content-machine/docs/design/bc30-besluiten.md. Drie maten:
   computer vanaf 1000, tablet 700 tot 999 (eigen blok hieronder; de clamp-ondergrens is de tabletmaat),
   telefoon tot 699 met de fijnafstelling van het blokkenboek van 2 oktober (paginakop 30, Bram: "de titelgrootte
   van 2 oktober is nicer op mobiel"; de cocktailkop staat dan op drie regels in plaats van vier). === */.bc-cm.bc30{
  /* Lettertypen */
  --bc30-font-kop:'Merriweather','BC30 kop terugval',Georgia,serif;
  --bc30-font-tekst:var(--bc-font-body);
  --bc30-font-script:'Blakson Hustle','BC30 script terugval',cursive;
  /* Typeschaal (computer; telefoon in de mediaquery hieronder) */
  --bc30-fs-h1:clamp(42px,3.34vw,52px);   /* altijd groter dan de sectiekop; 42 op tablet, 48 op 1440 */
  --bc30-fs-h2:clamp(34px,2.8vw,42px);    /* 34 op tablet, 40 op 1440 */
  --bc30-fs-statement:clamp(44px,4.45vw,64px); /* statementkop (over ons) */
  --bc30-fs-portret:clamp(60px,6.9vw,100px); /* naam in de portretkop (O10) */
  --bc30-fs-naamzin:var(--bc30-fs-statement); /* persoonkop: naam in de eigen zin (batch 6, A plus B) */
  --bc30-fs-handtekening:clamp(104px,10.4vw,150px); /* persoonkop: voornaam als handtekening over de foto */
  --bc30-fs-h2-paneel:32px;
  --bc30-fs-kaart-foto:28px;     /* kaarttitel op een foto */
  --bc30-fs-kaart:22px;          /* kaarttitel onder of naast beeld */
  --bc30-fs-tegel:15px;          /* titel van een dienst-tegel in een raster van twee (telefoon) */
  --bc30-fs-h4:18px;
  --bc30-fs-lead:18px;
  --bc30-fs-tekst:16px;
  --bc30-fs-kaarttekst:15px;
  --bc30-fs-klein:13px;
  --bc30-fs-eyebrow:12px;
  --bc30-fs-knop:15px;
  --bc30-fs-citaat:20px;
  --bc30-fs-cijfer:44px;
  --bc30-fs-kaartnummer:36px;     /* nummer in een fotokaart van de rij (Bram 04-10: gelijk aan de home) */
  --bc30-fs-cijferlabel:13px;
  --bc30-script:1.25em;          /* scriptwoord in een kop */
  --bc30-script-basis:1.12em;    /* scriptwoord buiten een kop */
  --bc30-lh-kop:1.15;
  --bc30-lh-tekst:1.65;
  --bc30-ls-kop:-.01em;
  --bc30-ls-eyebrow:.22em;
  /* Kleur */
  --bc30-grond:#ffffff;                   /* lichte basis is wit */
  --bc30-vlak:var(--bc-white);            /* #fff9f0: kaart, formulier, paneel op wit, zonder schaduw */
  --bc30-creme:var(--bc-cream);           /* #ffeaca */
  --bc30-donker:var(--bc-dark);           /* #242422 */
  --bc30-zwart:#040301;
  --bc30-kop:var(--bc-dark);
  --bc30-tekst:#3d3a36;                   /* 11,3:1 op wit */
  --bc30-tekst-zacht:#6f685e;             /* 5,5:1 op wit, 5,25:1 op off-white, 4,68:1 op crème */
  --bc30-op-donker-kop:var(--bc-cream);
  --bc30-op-donker-tekst:#efe9df;
  --bc30-op-donker-zacht:#cfc8bc;
  --bc30-lijn:rgba(36,36,34,.12);
  --bc30-lijn-donker:#333332;
  --bc30-oranje:var(--bc-primary);        /* #ee7437 */
  --bc30-oranje-hover:#d6642c;
  --bc30-oranje-tekst:#bb4e17;            /* kleine oranje tekst op licht (4,98:1 op wit) */
  --bc30-oranje-tekst-creme:#b04a18;      /* idem op crème (4,66:1) */
  --bc30-groen:var(--bc-green);           /* #0f8069: vinkjes (zit erbij) en bellen, nooit de hoofdactie */
  --bc30-groen-hover:#0b6654;
  /* Vorm en diepte */
  --bc30-r-kaart:24px;
  --bc30-r-band:48px;
  --bc30-r-pil:999px;
  --bc30-schaduw:0 18px 40px rgba(36,36,34,.12);  /* alleen foto's en een donkere kaart op licht */
  --bc30-schaduw-kaart:0 1px 2px rgba(36,36,34,.04),0 8px 24px rgba(36,36,34,.05); /* witte kaart op een off-white band: net loskomen (reviews, 03-10) */
  --bc30-gloed:0 10px 24px rgba(238,116,55,.32);  /* alleen de oranje hoofdknop */
  /* Ruimte (losse waarden verder alleen uit 4 8 12 16 20 24 32 40 48 64 80 96 120) */
  --bc30-breed:1300px;
  --bc30-smal:1120px;
  --bc30-lees:600px;
  --bc30-tekstkolom:640px;               /* tekst zonder beeld, kolom in het midden (O27; ronde 5: 640, rond 74 tekens) */
  --bc30-sectie:80px;
  --bc30-gap:24px;
  --bc30-kolom:80px;
  --bc30-kaart-pad:28px;
  --bc30-paneel-pad:56px;
  --bc30-knop-h:44px;
  /* Beweging */
  --bc30-ease:cubic-bezier(.215,.61,.355,1);
  --bc30-duur-snel:.2s;
  --bc30-duur:.45s;
  --bc30-duur-in:.65s;
  --bc30-duur-beeld:.75s;
  --bc30-duur-traag:1.1s;
  --bc30-vangnet:3s;           /* vangnet: na zoveel tijd zonder JS-signaal de eindstand (handtekening, teamrij) */
  --bc30-in-tekst:14px;
  --bc30-in-beeld:20px;
}/* Tablet (700 tot 999): kaarten staan hier smal naast elkaar, dus kleinere kaarttitels op een foto en cijfers;
   koppen via de clamp-ondergrens hierboven (besluitenregister, 03-10). */@media(min-width:700px) and (max-width:999px){.bc-cm.bc30{
  --bc30-fs-handtekening:88px;
  --bc30-fs-kaart-foto:22px;
  --bc30-fs-citaat:18px;
  --bc30-fs-cijfer:36px;
  --bc30-fs-cijferlabel:12px;
}}/* Telefoon: koppen en kleine tekst zoals de fijnafstelling van 2 oktober (paginakop 30 boven sectiekop 28,
   cijferlabel 10 op één regel), verder de set (besluitenregister, 03-10). */@media(max-width:699px){.bc-cm.bc30{
  --bc30-fs-h1:30px;
  --bc30-fs-h2:28px;
  --bc30-fs-statement:44px;
  --bc30-fs-portret:44px;
  --bc30-fs-naamzin:36px;
  --bc30-fs-handtekening:76px;
  --bc30-fs-h2-paneel:28px;
  --bc30-fs-kaart-foto:24px;
  --bc30-fs-kaart:19px;
  --bc30-fs-h4:16px;
  --bc30-fs-kaarttekst:14px;
  --bc30-fs-eyebrow:11px;
  --bc30-fs-citaat:18px;
  --bc30-fs-cijfer:32px;
  --bc30-fs-kaartnummer:32px;
  --bc30-fs-cijferlabel:10px;
  --bc30-r-kaart:18px;
  --bc30-r-band:28px;
  --bc30-sectie:56px;
  --bc30-gap:16px;
  --bc30-kolom:32px;
  --bc30-kaart-pad:24px;
  --bc30-paneel-pad:28px;
  --bc30-in-tekst:12px;
  --bc30-in-beeld:16px;
}}/* === Typografie en basis (preview base.css, specificiteit gelijk) === */.bc30:where(.bc-cm) *{box-sizing:border-box}.bc30:where(.bc-cm) img{max-width:100%}.bc30:where(.bc-cm) h1,.bc30:where(.bc-cm) h2,.bc30:where(.bc-cm) h3,.bc30:where(.bc-cm) p{margin:0}.bc30:where(.bc-cm) h1,.bc30:where(.bc-cm) h2,.bc30:where(.bc-cm) h3{font-family:var(--bc30-font-kop);font-weight:900;letter-spacing:-.045em;text-wrap:balance;isolation:isolate;position:relative;overflow:visible}.bc30:where(.bc-cm) h2{font-size:var(--bc30-fs-h2);line-height:1.14}.bc30:where(.bc-cm) p{font:400 var(--bc30-fs-tekst)/1.75 var(--bc30-font-tekst)}.bc30:where(.bc-cm) a{text-decoration:none}.bc30:where(.bc-cm) .bc-script{font-family:var(--bc30-font-script);font-weight:400;font-size:var(--bc30-script-basis);color:var(--bc30-oranje);letter-spacing:0;line-height:1.12}.bc30:where(.bc-cm) a:focus-visible,.bc30:where(.bc-cm) button:focus-visible{outline:3px solid var(--bc30-oranje);outline-offset:5px}/* Tikvlak (run 12, R6c): een kleine tekstknop krijgt een onzichtbaar vlak van 46 bij 46 om zijn midden (44 plus marge voor afronding); het beeld
   blijft gelijk. Teamverhaal (team-story.css) en de contactregel van de kop (hero.css) hebben een eigen maat. */.bc-cm.bc30 :is(.bc-review-spotlight__more,.bc-profile__fold,.bc-why-list__meerknop,.bc-page-hero__contact a,[data-story-slide]){position:relative}.bc-cm.bc30 :is(.bc-review-spotlight__more,.bc-profile__fold,.bc-why-list__meerknop)::after{content:"";position:absolute;inset:min(0px,calc(50% - 23px))}/* Een scriptwoord breekt nooit af met een streepje; het gaat als geheel naar de volgende regel (review A3, 03-10:
   "onverge- / lijk" in de homepagekop op 390). */.bc-cm.bc30 .bc-script{position:relative;z-index:2;hyphens:auto;hyphenate-limit-chars:18 8 8}/* alleen een woord van 18 letters of meer dat niet past breekt, met een streepje ("tevredenheids-garantie" op 360, UX-sweep batch 7) *//* Preview: `.bc30 main>section:not(.bc30-hero) h2,h3` (0,2,3); `main` bestaat op WordPress niet binnen
   .bc-cm, dus een sectie direct onder de wrapper, niet in een band (zoals in de preview). */.bc30:where(.bc-cm)>section:not(.bc-page-hero) h2,.bc30:where(.bc-cm)>section:not(.bc-page-hero) h3{letter-spacing:-.5px}/* Preview: `.bc-cm.cocktail-max-page :is(h2,h3) .bc-script:not(.bc30-team *)`; het teamverhaal heet in
   brand-bc bc-team-intro. */.bc-cm.bc30 :is(h2,h3) .bc-script:not(.bc-team-intro *){font-size:var(--bc30-script)}/* === Knoppen. Tweede actie en band-knop zoals de preview. Hover (knopregels, besluit Bram
   2026-09-21): oranje, op een oranje knop #d6642c, nooit teal. De preview deed dat alleen voor de
   bronlockknoppen (.source-action>a); in brand-bc geldt het voor elke gevulde .bc-btn. Sinds 2026-10-02
   doet de preview hetzelfde (css/stijl.css). === */.bc-cm.bc30 .bc-btn--outline{background:transparent;border:0;color:var(--bc30-oranje);box-shadow:inset 0 0 0 2px var(--bc30-oranje)}.bc-cm.bc30 .bc-btn--outline:hover{background:var(--bc30-oranje);color:var(--bc30-op-donker-kop);box-shadow:none}.bc-cm.bc30 .bc-btn--cream{background:var(--bc30-creme);border:0;color:var(--bc30-donker);box-shadow:none}.bc-cm.bc30 .bc-btn--cream:hover{background:var(--bc30-oranje);color:var(--bc30-op-donker-kop)}.bc-cm.bc30 .bc-btn:not(.bc-btn--text,.bc-btn--outline,.bc-btn--secondary,.bc-btn--cream,.bc-btn--dark,.bc-btn--green):hover{background:var(--bc30-oranje-hover);transform:none}/* === Markeerstift 9d1 "BC-swoosh doorlopend" (besluit Bram 2026-09-30). Beginstand 0% alleen onder
   scripting:enabled (anders trekt de boog zich na het laden eerst terug); src/bc30/markeerstift.js zet
   bc-mk-in bij 60% in beeld. `var(--bc-mk,100%)` voor browsers zonder @property: Safari tot 16.3
   (geen scripting-mediaquery, dus de boog staat er meteen) en Firefox 113 tot 127 (wel scripting:
   de boog verschijnt zonder animatie zodra de JS bc-mk-in zet). In 2.0-markdown wordt ==tekst== al
   een mark.bc-mark. === */@property --bc-mk{syntax:"<percentage>";inherits:false;initial-value:100%}.bc-cm.bc30 .bc-mark{background:url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27 viewBox%3D%270 0 200 16%27 preserveAspectRatio%3D%27none%27%3E%3Cpath d%3D%27M1 11.5C55 5.5 130 3.5 199 7.5C132 7 62 9.5 4 15C1.5 14.5.5 13 1 11.5Z%27 fill%3D%27%23ee7437%27%2F%3E%3C%2Fsvg%3E") no-repeat 0 100%/var(--bc-mk,100%) .5em!important;color:inherit;font-weight:inherit;padding:0 .04em .22em!important;border-radius:0!important;text-shadow:none;transition:--bc-mk 1.3s cubic-bezier(.4,0,.2,1) .1s;box-decoration-break:slice;-webkit-box-decoration-break:slice}@media(scripting:enabled){.bc-cm.bc30 .bc-mark:not(.bc-mk-in){--bc-mk:0%}}/* === Beweging: wachtstand van src/bc30/motion.js. Zonder JS wordt de klasse nooit gezet, dus alles
   blijft zichtbaar; print zet hem uit. === *//* De afstand komt uit de tokens (--bc30-in-tekst 14, --bc30-in-beeld 20; telefoon 12 en 16). */.bc-cm.bc30 .motion-ready{opacity:0!important;translate:0 var(--bc30-in-tekst)}.bc-cm.bc30 .motion-ready-image{opacity:0!important;translate:0 var(--bc30-in-beeld);scale:.99}@media(max-width:699px){.bc-cm.bc30 .motion-ready-image{scale:1}}@media print{
  .bc-cm.bc30 .motion-ready,.bc-cm.bc30 .motion-ready-image{opacity:1!important;translate:none!important;scale:none!important}
  .bc-cm.bc30 .bc-mark{--bc-mk:100%!important;transition:none!important}
}/* === Stipjes onder een mobiele veegstrook (src/bc30/mobiel.js, [data-mobiel~="veeg"]) === */.bc-cm.bc30 .bc-dots{display:none}@media(max-width:699px){
  .bc-cm.bc30 .bc-dots{display:flex;justify-content:center;gap:8px;margin:4px 0 0}
  .bc-cm.bc30 .bc-dots i{width:8px;height:8px;border-radius:var(--bc30-r-pil);background:#24242233;transition:width var(--bc30-duur-snel) var(--bc30-ease),background var(--bc30-duur-snel) var(--bc30-ease)}
  .bc-cm.bc30 .bc-dots i.is-on{width:22px;background:var(--bc30-oranje)}
}/* === Banden: render-blocks.mjs omhult opeenvolgende blokken met dezelfde presentation.band met een
   div.bc-band (wit: geen data-variant; licht: data-variant="licht"; presentation.bandNieuw begint een
   nieuwe band van dezelfde soort). Uit de preview-bandwrapper div.cocktail-max-services
   (service-grid.css, gecontroleerd na de cascade). Sinds keuze 1B (2026-10-02) zijn wit en licht allebei
   --bc30-grond; licht verschilt nog in ronding en ruimte. Ronding en ruimte uit de tokens (telefoon tot 699 px). Een band die direct op een band volgt krijgt geen
   eigen sierboog (Bram 2026-09-30, matcha); een band na een lichte sectie verliest zijn ronding. === */.bc-cm.bc30 .bc-band{position:relative;isolation:isolate;background:var(--bc30-grond);border-radius:var(--bc30-r-band) var(--bc30-r-band) 0 0;margin-top:-1px;padding-top:var(--bc30-sectie);padding-bottom:96px}.bc-cm.bc30 .bc-band:before{content:"";position:absolute;width:760px;height:400px;left:-380px;top:220px;background:var(--wpr-bg-54feb08c-0a85-433e-b88c-00770aba136c) center/contain no-repeat;transform:rotate(32deg);z-index:-1;pointer-events:none}.bc-cm.bc30 .bc-band[data-variant="licht"]{background:var(--bc30-grond);border-radius:0;padding-top:64px}.bc-cm.bc30 .bc-band[data-variant="licht"]:before{width:520px;height:270px;left:-240px;top:auto;bottom:max(0px,calc(100% - 820px));transform:rotate(32deg)}.bc-cm.bc30 .bc-band+.bc-band:before{display:none}.bc-cm.bc30 :is(.bc-logo-marquee,.bc-impression,.bc-faq,.bc-review-spotlight,.bc-case-strip,.bc-band,.bc-why-list-band)+.bc-band:not([data-variant]){border-radius:0}/* Na een lichte kop (toon licht, keuze 3B, en de portretkop, O10) geen ronde hoeken: anders toont de band in de hoeken
   de zwarte 3.0-grond (vondst schets contactpagina, 2026-10-03). Ook als het ankerdoel #bc-hero-next ertussen staat. */.bc-cm.bc30 .bc-page-hero:is([data-toon="licht"],[data-variant="portret"])+.bc-band,.bc-cm.bc30 .bc-page-hero:is([data-toon="licht"],[data-variant="portret"])+#bc-hero-next+.bc-band{border-radius:0}@media(max-width:699px){
  .bc-cm.bc30 .bc-band[data-variant="licht"]{padding-top:44px}
  .bc-cm.bc30 .bc-band[data-variant="licht"]:before{width:300px;height:200px;left:-200px;bottom:max(0px,calc(100% - 1050px))}
}@media(max-width:640px){
  .bc-cm.bc30 .bc-band{padding-bottom:48px}
  .bc-cm.bc30 .bc-band:before{width:390px;height:230px;left:-250px;top:210px}
  .bc-cm.bc30 .bc-band:not([data-variant]):has(>.bc-profile:first-child):before{top:auto;bottom:40px}
}/* Ritme tussen secties (nachtrun 05-10, punt 6): de ruimte van band en sectie telt niet op. Op de conceptpagina's stonden
   stroken wit van 130 tot 280 px, waar cocktails 75 tot 105 heeft: de laatste sectie in een band heeft zijn eigen ruimte
   onder (60 tot 110) en de band legde er 96 bij, en een band na een witte sectie of na een band legde zijn 64 of 80 boven
   op de ruimte onder die sectie. Nu neemt de sectie de ruimte: geen bandruimte onder een sectie met eigen ruimte, en geen
   bandruimte boven na een band of na de logoband, de casestrook of de reviews (die hebben 85, 80 en 96 onder); na de
   fotoreeks (50 onder) 32. De 96 onder blijft voor een belofte die over de rand schuift (overlap, cocktails en matcha).
   De home (band vlak) heeft eigen maten en verandert niet; zonder :has() blijft alles zoals het was. */.bc-cm.bc30 .bc-band:not([data-variant="vlak"]):has(>:last-child:is(.bc-profile,.bc-concept-grid,.bc-price-cards,.bc-profile-uitleg,.bc-logo-marquee,.bc-review-spotlight)):not(:has(+.bc-why-list[data-variant~="overlap"],+.bc-band>.bc-why-list[data-variant~="overlap"]:first-child)){padding-bottom:0}/* Een donkere logostrip (data-toon="donker", home) houdt zijn onderruimte in het donkere vlak: de band erna krijgt dan
   gewoon zijn eigen ruimte bovenaan (v0.21.1, Bram 15-10: "Kies jouw concept" plakte tegen de strip). */.bc-cm.bc30 .bc-band:has(>:last-child:is(.bc-profile,.bc-concept-grid,.bc-price-cards,.bc-profile-uitleg,.bc-logo-marquee:not([data-toon="donker"]),.bc-review-spotlight))+.bc-band:not([data-variant="vlak"]):not(:has(>.bc-why-list[data-variant~="overlap"]:first-child)),.bc-cm.bc30 :is(.bc-logo-marquee:not([data-toon="donker"]),.bc-case-strip,.bc-review-spotlight)+.bc-band:not([data-variant="vlak"]){padding-top:0}.bc-cm.bc30 .bc-impression+.bc-band:not([data-variant="vlak"]){padding-top:32px}/* Begint een band met tekst links (TextImage flip of zonder beeld), dan valt de boog links over de
   tekst; dan staat hij gespiegeld rechts, achter het beeld of in de lege ruimte naast de leeskolom.
   Begint de band met tekst over de volle breedte (menukaart, tegels, uitlegkolommen), dan
   is er geen plek zonder tekst: geen boog (review run 3, bevinding 1: in de preview kwam dit niet
   voor, in de prod-drafts bij 19 banden). Op de telefoon staat de boog onderaan of, bij tekst, weg. */@media(min-width:641px){
  .bc-cm.bc30 .bc-band:has(>.bc-profile:first-child:is([data-variant~="flip"],[data-variant~="no-media"])):before{left:auto;right:-380px;transform:rotate(-32deg) scaleX(-1)}
  .bc-cm.bc30 .bc-band[data-variant="licht"]:has(>.bc-profile:first-child:is([data-variant~="flip"],[data-variant~="no-media"])):before{left:auto;right:-240px}
}.bc-cm.bc30 .bc-band:has(>:is(.bc-profile:is([data-variant~="menukaart"],[data-variant~="tegels"]),.bc-profile-uitleg):first-child):before{display:none}@media(max-width:640px){
  .bc-cm.bc30 .bc-band:has(>.bc-profile:first-child[data-variant~="no-media"]):before{display:none}
}/* De boog blijft binnen zijn band, met minstens 40 px wit eronder (nachtrun 05-10, punt 8). Zat de oranje inkt tegen de
   onderrand of eronder, dan dekte de volgende sectie hem af en zag je een rechte snede (zuurstof, "Is pure zuurstof
   gezond?": 13 px boven de rand, met de zwarte grond van het teamverhaal eronder; na punt 6 ook witte banden korter dan
   640 px, tot 141 px eronder). Wit: de inkt loopt tot 381 px onder de bovenkant van de boog (telefoon 207), dus in een
   lage band schuift hij omhoog; een band van 641 px of hoger houdt 220. Licht met alleen tekst zonder beeld: 40 boven de rand. *//* Witte band lager dan 641 px (nacontrole 06-10): de boog schoof omhoog en lag dan achter de sectiekop (champagne "Een
   gegarandeerd wow effect", "Ook voor jouw gelegenheid"). Nu blijft hij op 220 en wordt hij kleiner: de inkt loopt tot 0,9525
   keer de hoogte onder de bovenkant, dus hoogte (100% - 260) x 1,05 houdt 40 px wit eronder; een hoge band houdt 760 x 400.
   Onder 400 px bandhoogte geen boog (de tweede term is dan 0): een snipper van een boog oogt als een vlek. */@media(min-width:641px){.bc-cm.bc30 .bc-band:not([data-variant]):before{top:220px;left:0;width:auto;height:min(400px,max(0px,calc((100% - 260px) * 1.05)),max(0px,calc((100% - 400px) * 1000)));aspect-ratio:19/10;transform:translateX(-50%) rotate(32deg)}}/* Geen boog in een band met de uitleg in kolommen, ook niet als die tweede staat (nacontrole 06-10: champagne, na de
   gelegenheidsstrook lag de boog achter "Een gegarandeerd wow effect"); de kolommen beginnen links en laten geen plek vrij. */.bc-cm.bc30 .bc-band:has(>.bc-profile-uitleg):before{display:none}@media(max-width:640px){.bc-cm.bc30 .bc-band:not([data-variant]):before{top:min(210px,calc(100% - 247px))}}@media(min-width:700px){.bc-cm.bc30 .bc-band[data-variant="licht"]:has(>.bc-profile:first-child[data-variant~="no-media"]):before{bottom:max(40px,calc(100% - 820px))}}/* === 2.0-ritme staat uit in 3.0 (banden nemen het over; render-blocks.mjs zet het niet meer) === */.bc-cm.bc30 .bc-swx{display:none}/* === Tekstlinks: hover donker oranje, nooit teal (Architectuur 12; review run 4, bevinding 3: links in de
   belofte en in kaarttekst werden teal via de 2.0-onderlaag). Alleen kale links (zonder klasse); knoppen en
   kaartlinks houden hun eigen hover. === */.bc-cm.bc30 a:not([class]):hover,.bc-cm.bc30 :is(p,li,dd,figcaption) a:not([class]):hover{color:var(--bc30-oranje-hover)}/* === Lange woorden in koppen (UX-sweep 2026-10-01: "onderwijsinstellingen" liep op 360 19 px buiten beeld):
   op de telefoon mogen koppen afbreken met een streepje, en anders waar het moet. Een kop waarvan de woorden
   passen verandert niet. === */@media(max-width:699px){.bc-cm.bc30 :is(h2,h3,h4){overflow-wrap:break-word;hyphens:auto;hyphenate-limit-chars:10 5 4}}/* Sectiekoppen (elke h2, een h3 als sectiekop en de kop van het teamverhaal): een streepje alleen in een woord van 18 letters
   of meer, zoals het scriptwoord; een korter woord gaat als geheel naar de volgende regel (nachtrun 05-10: "gegaran- deerd"
   in de belofte op 360, "champagne- toren" in de prijskop). Kaarttitels en tussenkoppen houden hun eigen regel. */@media(max-width:699px){.bc-cm.bc30 h2,.bc-cm.bc30 h3[class$="__title"],.bc-cm.bc30 [class$="__heading"]>h3{hyphenate-limit-chars:18 8 8}}/* === Band vlak (batch 6, lane b6home, de home zoals 8138): off-white grond waarop de secties als vlakken
   staan (presentation.band "vlak", alleen de home-draft). Ronde bovenhoeken die 32 px over de donkere
   sectie ervoor vallen; geen sierboog en geen eigen ruimte, de secties brengen die zelf mee. De ronde hoeken
   van de footer erna staan ook op off-white: in de pagina loopt de grond 48 px onder de footer door (zonder de witte
   vulling uit chrome.css), op WordPress krijgt het footer-eiland de grond. === */.bc-cm.bc30 .bc-band[data-variant="vlak"]{background:var(--bc30-vlak);border-radius:var(--bc30-r-band) var(--bc30-r-band) 0 0;margin:-32px 0 -48px;padding:0 0 48px}.bc-cm.bc30 .bc-band[data-variant="vlak"]:before{display:none}.bc-cm.bc30 .bc-band[data-variant="vlak"]+.bc-site-footer--max{position:relative;z-index:1;box-shadow:none}body:has(.bc-cm.bc30 .bc-band[data-variant="vlak"]) .bc-cm.bc-wp-chrome--footer.bc30-chrome{background:var(--bc30-vlak,#fff9f0)}/* het footer-eiland op WordPress is geen .bc30, dus het token bestaat daar niet (review batch 6, M1) *//* Tokens van de home (zelfde blokje), gemeten op 8138: het cijfer in de scorepil van de homekop (32, telefoon 28) en de
   lopende tekst van de home, die op de telefoon een maat kleiner is (16, telefoon 15). */.bc-cm.bc30{--bc30-fs-score:32px;--bc30-fs-tekst-home:16px}@media(max-width:640px){.bc-cm.bc30{--bc30-fs-score:28px;--bc30-fs-tekst-home:15px}}/* De eerste sectie van een 3.0-pagina krijgt geen ronde bovenhoeken: de wrapper is donker (--bc-black) voor de donkere kop, en een pagina
   die met een lichte sectie begint (lookbook: flipbook) toonde zwarte hoeken links- en rechtsboven (feedback Bram 2026-10-07). */.bc-cm.bc30>section:first-child{border-top-left-radius:0;border-top-right-radius:0}/* BC 3.0: Hero (basis page-hero; aliassen hero, home-hero, author-hero; apart bedankt-hero), run 2.
   Alles onder de versiemarker .bc-cm.bc30 (zie fundament.css). Bron: de 3.0-preview
   (bc-content-machine/scripts/design-compare/bc30/css/components/hero.css en stats.css, tag
   bc30-vastgezet-2026-09-30), geport met scripts/port-bc30-css.mjs en daarna met de hand:
   - preview-namen naar de 2.0-namespace: cocktail-max-hero wordt bc-page-hero, __copy wordt __text,
     __actions wordt __ctas;
   - specificiteit: in de preview raakte geen 2.0-regel de cocktail-max-hero-elementen. Na het hernoemen
     raken de 2.0-regels van page-hero.css (.bc-cm .bc-page-hero__wrap, __ctas, h1 .bc-script) ze wel.
     Daarom staan de ongescoopte preview-regels hier onder .bc-cm.bc30 (niet :where), overal even zwaar,
     zodat hun volgorde onderling gelijk blijft; en zetten ze terug wat de 2.0-regels erbij doen
     (grid op de wrap, align-items op de knoppen, draaiing en inline-block op het scriptwoord);
   - [data-variant="photo"]-regels voor de tekstkolom, kop, kruimel, lead, knoppen en cijferbalk gelden
     voor elke vorm behalve sfeer (:not([data-variant="sfeer"]), even zwaar als [data-variant="photo"]):
     de kop zonder foto (tekst) en het portret hebben dezelfde tekstkolom als de fotokop; de beeldregels
     (uitsnede, verloop) blijven bij photo;
   - bronlock weg: de kruimel als bron-p met span.separator (koffie, smoothies) en [data-type-accent].
   De vormen zonder previewvoorbeeld (tekst, compact, portret, statement, adreskaart, scorechips,
   badge, blogmeta) en bedankt-hero zijn ontwerp fase 3 in dezelfde taal (Bram beoordeelt ze).
   Stijlbibliotheek (ronde 2, S1d, 2026-10-02): de paginakop is op elke breedte en in elke vorm --bc30-fs-h1
   (48, telefoon 36; ook de brede kop), de statementkop --bc30-fs-statement. Afgerond naar de set: kruimel en
   blogmeta 14 naar 13 (--bc30-fs-klein), scriptwoord in de kop 1,22em naar 1,25em (--bc30-script), eyebrow op
   de telefoon 10 naar 11, adreskaarttitel 20 naar 22, portretfoto ronding 26 naar 24; de adreskaart en de
   badge zonder schaduw (vlak op een foto). *//* === Basis: de sfeerkop (cocktails; preview zonder data-variant) === */.bc-cm.bc30 .bc-page-hero{position:relative;isolation:isolate;background:var(--bc30-zwart);color:var(--bc30-op-donker-kop);padding:0 0 104px;overflow:hidden}.bc-cm.bc30 .bc-page-hero__art{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}.bc-cm.bc30 .bc-page-hero__art img{position:absolute;display:block;width:149.08%;max-width:none;height:auto;left:-13.88%;top:calc(-1 * min(31.67vw,570px))}/* Imagify zet op WordPress een <picture> om het beeld (WP-LIVE-LEARNINGS sectie 5): die doet niet mee. */.bc-cm.bc30 .bc-page-hero__art>picture{display:contents}/* 2.0 zet de wrap op een raster van twee kolommen (page-hero.css); in 3.0 is het een blok. */.bc-cm.bc30 .bc-page-hero__wrap{display:block;max-width:1300px;padding:80px 32px 44px;margin:auto;min-height:625px}.bc-cm.bc30 .bc-page-hero__text{position:relative;max-width:745px}.bc-cm.bc30 .bc-page-hero__crumb{color:#8f887c;font:400 var(--bc30-fs-klein)/1.5 var(--bc30-font-tekst);margin:0 0 46px}.bc-cm.bc30 .bc-page-hero__crumb a{color:var(--bc30-oranje)}.bc-cm.bc30 .bc-page-hero__crumb i{color:#8f887c;margin:0 7px}.bc-cm.bc30 .bc-page-hero .bc-page-hero__crumb-sep:before{content:'\203A'}.bc-cm.bc30 .bc-page-hero h1{color:var(--bc30-op-donker-kop);font:900 var(--bc30-fs-h1)/1.27 var(--bc30-font-kop);letter-spacing:normal;margin:0 0 30px;z-index:auto}.bc-cm.bc30 .bc-page-hero h1 .bc-script{font-size:var(--bc30-script);line-height:0;position:relative;z-index:2;white-space:nowrap;display:inline;transform:none;padding:0}/* Op de telefoon mag een lang scriptwoord afbreken (met streepje waar de taal het weet, anders waar het
   moet); zonder dit wordt een woord als "bedrijfsevenementen" op 360 afgeknipt (review run 2, bevinding 1).
   De preview deed dit met white-space:normal op de accentspan van de fotokop. */@media(max-width:699px){.bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]) h1 .bc-script{white-space:normal;hyphens:auto;hyphenate-limit-chars:10 5 4;overflow-wrap:anywhere}}.bc-cm.bc30 .bc-page-hero__lead{font:400 var(--bc30-fs-tekst)/var(--bc30-lh-tekst) var(--bc30-font-tekst);color:var(--bc30-op-donker-tekst);max-width:537px;margin:0 0 32px}.bc-cm.bc30 .bc-page-hero__lead a{color:var(--bc30-oranje);text-decoration:underline;font-weight:700}.bc-cm.bc30 .bc-page-hero__ctas{display:flex;gap:24px;flex-wrap:wrap;align-items:normal}.bc-cm.bc30 .bc-page-hero__ctas .bc-btn{font:800 var(--bc30-fs-knop)/1.2 var(--bc30-font-tekst);padding:13px 24px;min-height:var(--bc30-knop-h);text-align:center;justify-content:center;white-space:nowrap;transform:none;box-shadow:none}.bc-cm.bc30 .bc-page-hero__ctas .bc-btn--dark{background:#282727;border:1px solid var(--bc30-lijn-donker);color:var(--bc30-op-donker-kop)}.bc-cm.bc30 .bc-page-hero__ctas .bc-btn--dark:hover{background:var(--bc30-oranje)}@media(min-width:1801px){.bc-cm.bc30 .bc-page-hero__art img{width:2683px;left:calc(50% - 1150px);top:-570px}.bc-cm.bc30 .bc-page-hero__art{background:var(--bc30-zwart)}}@media(max-width:1400px) and (min-width:901px){.bc-cm.bc30 .bc-page-hero__wrap{padding-left:6%;padding-top:58px;min-height:570px}.bc-cm.bc30 .bc-page-hero__lead{max-width:470px}.bc-cm.bc30 .bc-page-hero__ctas{gap:12px}.bc-cm.bc30 .bc-page-hero__ctas .bc-btn{padding:13px 17px}.bc-cm.bc30 .bc-page-hero__text{max-width:660px}}@media(max-width:900px){
 .bc-cm.bc30 .bc-page-hero{padding-bottom:60px;display:flex;flex-direction:column}
 .bc-cm.bc30 .bc-page-hero__wrap{padding:34px 24px 0;min-height:0;order:0}
 .bc-cm.bc30 .bc-page-hero__text{max-width:680px;margin:auto}
 .bc-cm.bc30 .bc-page-hero__crumb{margin-bottom:26px}
 .bc-cm.bc30 .bc-page-hero h1{line-height:1.18;margin-bottom:26px}
 .bc-cm.bc30 .bc-page-hero__lead{max-width:610px;margin-bottom:26px}
 .bc-cm.bc30 .bc-page-hero__ctas{gap:12px}
 .bc-cm.bc30 .bc-page-hero__art{position:relative;inset:auto;z-index:0;float:none;height:clamp(260px,57vw,460px);margin-top:26px;order:1}
 .bc-cm.bc30 .bc-page-hero__art img{width:220%;left:-71%;top:-43vw}
}@media(max-width:640px){
 .bc-cm.bc30 .bc-page-hero__ctas{flex-direction:column}
 .bc-cm.bc30 .bc-page-hero__ctas .bc-btn{width:100%;white-space:normal;padding:15px 16px}
}@media(min-width:1101px) and (max-width:1800px){
 .bc-cm.bc30 .bc-page-hero__wrap{min-height:clamp(535px,34.72vw,625px);padding-top:clamp(52px,4.44vw,80px)}
 .bc-cm.bc30 .bc-page-hero__crumb{margin-bottom:clamp(26px,2.55vw,46px)}
 .bc-cm.bc30 .bc-page-hero__text{max-width:56%}
 .bc-cm.bc30 .bc-page-hero__lead{max-width:537px}
}@media(min-width:901px) and (max-width:1100px){
 .bc-cm.bc30 .bc-page-hero{display:flex;flex-direction:column;padding-bottom:65px}
 .bc-cm.bc30 .bc-page-hero__wrap{order:0;min-height:0;width:100%;padding:36px 40px 0}
 .bc-cm.bc30 .bc-page-hero__text{max-width:680px;margin:auto}
 .bc-cm.bc30 .bc-page-hero__lead{max-width:650px}
 .bc-cm.bc30 .bc-page-hero__crumb{margin-bottom:26px}
 .bc-cm.bc30 .bc-page-hero__art{position:relative;inset:auto;order:1;z-index:0;height:390px;margin-top:30px}
 .bc-cm.bc30 .bc-page-hero__art img{width:145%;left:-10%;top:-34vw}
}/* Sfeerkop op de tablet (700 tot 1100 px), besluit Bram 2026-10-07 na de proef in de portal ("dit klopt"): zoals op
   de computer en zoals de fotokop van smoothies, de tekst links met padding en de foto rechts die meeschaalt, niet
   eronder. Een donker verloop van links houdt de tekst leesbaar; de foto schuift zo dat de bartender rechts van de
   tekstkolom staat. De telefoon (onder 700) blijft gestapeld. */@media(min-width:700px) and (max-width:1100px){
 .bc-cm.bc30 .bc-page-hero[data-variant="sfeer"]{display:block;padding-bottom:56px}
 .bc-cm.bc30 .bc-page-hero[data-variant="sfeer"] .bc-page-hero__wrap{width:auto;padding:48px 40px 40px;min-height:clamp(500px,58vw,600px)}
 .bc-cm.bc30 .bc-page-hero[data-variant="sfeer"] .bc-page-hero__text{max-width:50%;margin:0}
 .bc-cm.bc30 .bc-page-hero[data-variant="sfeer"] .bc-page-hero__lead{max-width:none}
 .bc-cm.bc30 .bc-page-hero[data-variant="sfeer"] .bc-page-hero__art{position:absolute;inset:0;height:auto;margin:0;z-index:-1}
 .bc-cm.bc30 .bc-page-hero[data-variant="sfeer"] .bc-page-hero__art img{width:175%;left:-27%;top:-30vw}
 .bc-cm.bc30 .bc-page-hero[data-variant="sfeer"] .bc-page-hero__art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bc30-zwart) 0,var(--bc30-zwart) 38%,rgba(4,3,1,0) 62%)}
}/* === Fotokop (preview data-variant="photo": koffie, smoothies, champagne, matcha, zuurstof).
   Beeldregels alleen voor photo; tekstkolom, kop, kruimel, lead en knoppen voor elke vorm behalve sfeer. === */.bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]){padding-bottom:40px;min-height:0}.bc-cm.bc30 .bc-page-hero[data-variant="photo"] .bc-page-hero__art{position:absolute;inset:0;z-index:-2;pointer-events:none;height:auto;margin-top:0}.bc-cm.bc30 .bc-page-hero[data-variant="photo"] .bc-page-hero__art img{position:static;left:auto;top:auto;max-width:100%;width:74%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:57% 45%;object-position:57% 45%;margin-left:auto;display:block}.bc-cm.bc30 .bc-page-hero[data-variant="photo"] .bc-page-hero__art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#040301 6%,#040301fa 32%,#04030190 53%,transparent 76%),linear-gradient(0deg,#040301 1%,transparent 42%)}.bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]) .bc-page-hero__wrap{min-height:620px;padding-top:68px;padding-bottom:65px}.bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]) .bc-page-hero__text{max-width:570px;margin-left:0;margin-right:auto;text-align:left}.bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]) h1{line-height:1.18;max-width:540px;margin-bottom:30px}.bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]) .bc-page-hero__crumb{margin-bottom:46px}.bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]) nav.bc-page-hero__crumb{display:flex;align-items:center;gap:0;font:400 var(--bc30-fs-klein)/1.5 var(--bc30-font-tekst);color:var(--bc30-op-donker-zacht)}.bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]) .bc-page-hero__crumb a{text-decoration:none;font-weight:400}/* Telefoon: de kruimel blijft op één regel; het laatste deel (de pagina zelf, staat ook in de H1) krijgt
   puntjes, zodat er nooit een losse "Home ›" aan een regeleinde staat (review run 2, bevinding 13). */@media(max-width:699px){
 .bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]) nav.bc-page-hero__crumb{min-width:0;max-width:100%}
 .bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]) nav.bc-page-hero__crumb>:not(:last-child){flex:none;white-space:nowrap}
 .bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]) nav.bc-page-hero__crumb>:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}.bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]) .bc-page-hero__lead{max-width:535px;margin-bottom:30px}.bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]) .bc-page-hero__ctas{align-items:center;gap:16px}@media(max-width:1000px){
 .bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]) .bc-page-hero__text{max-width:510px}
}@media(min-width:700px) and (max-width:1100px){
 .bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]) .bc-page-hero__wrap{width:100%;max-width:none;margin:0;padding-inline:40px;justify-items:start}
 .bc-cm.bc30 .bc-page-hero[data-variant="photo"] .bc-page-hero__art img{width:90%;-o-object-position:55% 45%;object-position:55% 45%}
 /* Het donkere deel volgt de tekstkolom (40 tot 550 px; tot 1000 is de tekst 510 breed), daarna loopt het in 170 px naar
    de foto: de foto rechts van de tekst blijft zichtbaar (keuze Bram 05-10, v-koptablet: lichter verloop op de rechterhelft,
    geen fotostrook; eerder stond het donker tot 72 procent van de breedte). Achter de tekst blijft het donker genoeg voor
    AA, ook voor een scriptwoord op een licht stuk foto (ontwerpreview S5: champagne op 700, p10 1,5:1). Een brede kop
    (matcha, regels tot 700) houdt achter de kop 0,75 tot 600 en 0,6 tot 700 (grote tekst, 3:1). */
 .bc-cm.bc30 .bc-page-hero[data-variant="photo"] .bc-page-hero__art:after{background:linear-gradient(90deg,#040301 0,#040301fa 360px,#040301e0 520px,#04030160 600px,transparent 690px),linear-gradient(0deg,#040301 0%,transparent 40%)}
 .bc-cm.bc30 .bc-page-hero[data-variant="photo"][data-h1="breed"] .bc-page-hero__art:after{background:linear-gradient(90deg,#040301 0,#040301fa 360px,#040301e0 520px,#040301c0 600px,#04030199 700px,transparent 800px),linear-gradient(0deg,#040301 0%,transparent 40%)}
}/* Van 1001 tot 1100 is de tekst 570 breed: hetzelfde verloop 60 px verder. */@media(min-width:1001px) and (max-width:1100px){.bc-cm.bc30 .bc-page-hero[data-variant="photo"] .bc-page-hero__art:after{background:linear-gradient(90deg,#040301 0,#040301fa 420px,#040301e0 580px,#04030160 660px,transparent 750px),linear-gradient(0deg,#040301 0%,transparent 40%)}}@media(max-width:699px){
 .bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]){padding-bottom:28px}
 /* width:100% (fase 3): de wrap staat in een flexkolom met margin:auto en krimpt anders tot de tekst;
    bij een korte kop (persoon zonder tagline) kwam de tekst dan in het midden. Met lange tekst (de zes
    previews) vult hij de breedte al, dus geen verschil. */
 .bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]) .bc-page-hero__wrap{min-height:0;padding:35px 24px 300px;width:100%}
 /* Zonder cijferbalk (data-cijfers="geen", fase 3): de foto sluit onderaan aan; het verloop loopt dan door naar de
    volgende band. Strook, beeld en verloop van de fotokop op de telefoon staan bij "Kop op de telefoon" verderop. */
 .bc-cm.bc30 .bc-page-hero[data-variant="photo"][data-cijfers="geen"] .bc-page-hero__art{bottom:0}
 .bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]) .bc-page-hero__text{max-width:none}
 .bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]) h1{margin-bottom:24px}
 .bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]) .bc-page-hero__crumb{margin-bottom:26px}
 .bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]) .bc-page-hero__ctas{display:flex;flex-direction:column;align-items:stretch;gap:12px}
 .bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"]) .bc-page-hero__ctas>a{width:100%}
}/* data-h1="breed" (matcha, feedback Bram 2026-09-29, 41): een lange SEO-kop mag breder lopen dan de lead. */.bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"])[data-h1="breed"] .bc-page-hero__text{max-width:820px}.bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"])[data-h1="breed"] h1{max-width:800px}@media(max-width:1400px){.bc-cm.bc30 .bc-page-hero:not([data-variant="sfeer"])[data-h1="breed"] h1{max-width:700px}}/* === Kop zonder foto (data-variant="tekst"; hero centered en compact, page-hero zonder beeld). Ontwerp
   fase 3: de tekstkolom van de fotokop, breder omdat er geen foto rechts staat, en de oranje BC-swoosh
   als beeld rechts, gespiegeld aan de sierboog van de banden (die staat links op 32 graden). Op de
   telefoon geen swoosh (hij zou achter de knop of de cijferbalk vallen) en geen ruimte voor een foto. === */.bc-cm.bc30 .bc-page-hero[data-variant="tekst"] .bc-page-hero__wrap{position:relative;min-height:0;padding-bottom:72px}.bc-cm.bc30 .bc-page-hero[data-variant="tekst"] .bc-page-hero__wrap:after{content:"";position:absolute;z-index:-1;pointer-events:none;width:640px;height:343px;right:-300px;top:50%;margin-top:-172px;background:var(--wpr-bg-46a96db7-217f-4a60-b8f4-f336f90b94e1) center/contain no-repeat;transform:rotate(-32deg)}/* Review 4a M4: de boog mag op geen breedte achter tekst vallen. De tekstkolom houdt daarom 420 px vrij voor de boog
   (op 1440 blijft hij 720), en onder 1000 px, waar de tekst de hele breedte nodig heeft, valt de boog weg. */.bc-cm.bc30 .bc-page-hero[data-variant="tekst"] .bc-page-hero__text{max-width:min(720px,calc(100% - 420px))}.bc-cm.bc30 .bc-page-hero[data-variant="tekst"] h1{max-width:720px}.bc-cm.bc30 .bc-page-hero[data-variant="tekst"] .bc-page-hero__lead{max-width:600px}@media(max-width:1100px){.bc-cm.bc30 .bc-page-hero[data-variant="tekst"] .bc-page-hero__wrap:after{width:460px;height:246px;right:-260px;margin-top:-123px}}@media(max-width:999px){
 .bc-cm.bc30 .bc-page-hero[data-variant="tekst"] .bc-page-hero__text{max-width:720px}
 .bc-cm.bc30 .bc-page-hero[data-variant="tekst"] .bc-page-hero__wrap:after{display:none}
}@media(max-width:699px){
 .bc-cm.bc30 .bc-page-hero[data-variant="tekst"] .bc-page-hero__wrap{padding-bottom:40px}
}/* Lichte kop zonder foto (keuze 3B, O8 "ook een light variant maken?"): off-white grond, donkere tekst, de oranje boog
   blijft rechts. Sinds B 04-10 de standaard voor een kop zonder foto (Bram: blog, kennis en contact licht); donker alleen met
   data.toon "donker". */.bc-cm.bc30 .bc-page-hero[data-variant="tekst"][data-toon="licht"]{background:var(--bc30-vlak);color:var(--bc30-tekst)}.bc-cm.bc30 .bc-page-hero[data-toon="licht"] h1{color:var(--bc30-kop)}.bc-cm.bc30 .bc-page-hero[data-toon="licht"] :is(.bc-page-hero__lead,.bc-page-hero__meta,.bc-page-hero__contact){color:var(--bc30-tekst)}.bc-cm.bc30 .bc-page-hero[data-toon="licht"] .bc-page-hero__eyebrow{color:var(--bc30-oranje-tekst)}.bc-cm.bc30 .bc-page-hero[data-toon="licht"] .bc-page-hero__crumb{color:var(--bc30-tekst-zacht)}.bc-cm.bc30 .bc-page-hero[data-toon="licht"] .bc-page-hero__crumb :is(a,.bc-page-hero__crumb-meer){color:var(--bc30-oranje-tekst)}.bc-cm.bc30 .bc-page-hero[data-toon="licht"] .bc-page-hero__lead a{color:var(--bc30-oranje-tekst)}.bc-cm.bc30 .bc-page-hero[data-toon="licht"] .bc-btn--dark{background:var(--bc30-kop);color:var(--bc30-op-donker-kop)}/* === Lichte kop met foto (batch 5b, richting A "Foto hangt over de rand", Bram 04-10: "Optie a is heel dope"):
   de lichte kop met rechts een staande foto van 400 breed als object (kaartradius, lichte schaduw; schets 440, smaller zodat
   de drie kanalen van de contactpagina op 1440 naast elkaar passen) en de oranje boog erachter.
   De foto staat onderaan in de kop; de laatste 96 px van de kop zijn wit (de grond van de sectie eronder), zodat
   de foto over de rand van de lichte grond hangt zonder in de volgende sectie te steken. De boog hoort bij de
   foto en valt dus nooit achter tekst (review 4a M4). Tablet: tekst, dan de foto liggend op 80 procent, 64 px over
   de rand; telefoon: eerst de foto als strook, zoals de donkere kop (zie hieronder). === */.bc-cm.bc30 .bc-page-hero[data-variant="licht-foto"]{padding-bottom:0;background:linear-gradient(180deg,var(--bc30-vlak) calc(100% - 96px),var(--bc30-grond) 0);color:var(--bc30-tekst)}.bc-cm.bc30 .bc-page-hero[data-variant="licht-foto"] .bc-page-hero__wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);-moz-column-gap:var(--bc30-kolom);column-gap:var(--bc30-kolom);align-items:end;min-height:0;padding-bottom:0}.bc-cm.bc30 .bc-page-hero[data-variant="licht-foto"] .bc-page-hero__text{max-width:none;margin:0;align-self:start;padding-bottom:calc(var(--bc30-sectie) + 96px)}.bc-cm.bc30 .bc-page-hero__foto{position:relative;width:100%;margin:0;aspect-ratio:4/5;justify-self:stretch}.bc-cm.bc30 .bc-page-hero__foto img:not(.bc-page-hero__badge){display:block;width:100%;height:100%;max-width:none;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 40%;object-position:50% 40%;border-radius:var(--bc30-r-kaart);box-shadow:var(--bc30-schaduw-kaart)}.bc-cm.bc30 .bc-page-hero__foto>picture{display:contents}.bc-cm.bc30 .bc-page-hero__foto[data-focus="links"] img{-o-object-position:20% 40%;object-position:20% 40%}.bc-cm.bc30 .bc-page-hero__foto[data-focus="rechts"] img{-o-object-position:80% 40%;object-position:80% 40%}.bc-cm.bc30 .bc-page-hero__foto[data-focus="boven"] img{-o-object-position:50% 10%;object-position:50% 10%}.bc-cm.bc30 .bc-page-hero__foto[data-focus="onder"] img{-o-object-position:50% 90%;object-position:50% 90%}.bc-cm.bc30 .bc-page-hero__foto:before{content:"";position:absolute;z-index:-1;width:118%;aspect-ratio:1400/750;right:-46%;top:-9%;background:var(--wpr-bg-f3eef3d2-1219-4d99-abd3-c3e84cedafc8) center/contain no-repeat;transform:rotate(-62deg);pointer-events:none}.bc-cm.bc30 .bc-page-hero__foto .bc-page-hero__badge{top:auto;right:auto;left:-24px;bottom:48px}@media(min-width:1000px) and (max-width:1199px){
 .bc-cm.bc30 .bc-page-hero[data-variant="licht-foto"] .bc-page-hero__wrap{grid-template-columns:minmax(0,1fr) minmax(0,360px);-moz-column-gap:var(--bc30-gap);column-gap:var(--bc30-gap)}
}@media(max-width:999px){
 .bc-cm.bc30 .bc-page-hero[data-variant="licht-foto"]{background:linear-gradient(180deg,var(--bc30-vlak) calc(100% - 64px),var(--bc30-grond) 0)}
 .bc-cm.bc30 .bc-page-hero[data-variant="licht-foto"] .bc-page-hero__wrap{display:block}
 .bc-cm.bc30 .bc-page-hero[data-variant="licht-foto"] .bc-page-hero__text{padding-bottom:var(--bc30-gap)}
 .bc-cm.bc30 .bc-page-hero__foto{aspect-ratio:3/2;width:80%}
 .bc-cm.bc30 .bc-page-hero__foto:before{width:56%;right:-30%;top:auto;bottom:24%}
}/* Telefoon (ronde 3, Bram 04-10: "voor de lichte kop op mobiel graag de foto verwerken zoals bij de zwarte achtergrond
   dus starten met de foto"): zoals de donkere kop (7B1) eerst een fotostrook van 220 px over de hele breedte, dan
   kruimel, kop, tekst en knoppen met dezelfde afstanden (24 px tot de kruimel, 60 px onder de laatste knop), op de
   lichte grond. Hier is de foto geen object: geen ronding, schaduw of boog, en hij hangt niet over de rand. De
   laadbeweging van 8 px (motion.js, "hero") staat op de strook uit, anders kiert er bovenaan een rand van de grond. */@media(max-width:699px){
 .bc-cm.bc30 .bc-page-hero[data-variant="licht-foto"]{background:var(--bc30-vlak);padding-bottom:28px}
 .bc-cm.bc30 .bc-page-hero[data-variant="licht-foto"] .bc-page-hero__wrap{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0 24px 32px}
 .bc-cm.bc30 .bc-page-hero[data-variant="licht-foto"] .bc-page-hero__text{align-self:stretch;padding-bottom:0}
 .bc-cm.bc30 .bc-page-hero__foto{order:-1;width:auto;height:220px;aspect-ratio:auto;margin:0 -24px 24px;translate:none!important}
 .bc-cm.bc30 .bc-page-hero__foto img:not(.bc-page-hero__badge){border-radius:0;box-shadow:none}
 .bc-cm.bc30 .bc-page-hero__foto:before{display:none}
 .bc-cm.bc30 .bc-page-hero__foto .bc-page-hero__badge{top:104px;bottom:auto;left:auto;right:20px;width:74px}
}/* === Kop met het team (data-variant="team", batch 6, contactpagina richting C; Bram 04-10: "optie c is letterlijk wat
   ik bedoel"): de lichte kop met links kruimel, kop, zin, kanalen en regel, rechts de geneste teamrij (team-grid rij,
   opmaak in src/bc30/apart-team.css) die op de onderrand van de kop staat. Geen foto in de kop. Maten uit de schets
   (blokkenboek-nu/schets-b6/contactpagina/richting-c2.html); de binnenmarge is die van het formulier eronder, zodat
   tekst en formulier op één lijn staan. Tablet en telefoon: één kolom, de mensen onder de regel. === */.bc-cm.bc30 .bc-page-hero[data-variant="team"]{background:var(--bc30-vlak);color:var(--bc30-tekst);padding-bottom:0}.bc-cm.bc30 .bc-page-hero[data-variant="team"] .bc-page-hero__wrap{display:grid;grid-template-columns:minmax(0,1fr) 500px;-moz-column-gap:var(--bc30-gap);column-gap:var(--bc30-gap);align-items:end;width:100%;max-width:var(--bc30-breed);min-height:0;margin:0 auto;padding:40px 32px 0}.bc-cm.bc30 .bc-page-hero[data-variant="team"] .bc-page-hero__text{max-width:none;margin:0;align-self:start;padding-bottom:48px}.bc-cm.bc30 .bc-page-hero[data-variant="team"] .bc-page-hero__crumb{margin-bottom:32px}.bc-cm.bc30 .bc-page-hero[data-variant="team"] h1{margin-bottom:0}.bc-cm.bc30 .bc-page-hero[data-variant="team"] .bc-page-hero__lead{max-width:560px;margin:16px 0 0;font-size:var(--bc30-fs-lead);line-height:1.6}.bc-cm.bc30 .bc-page-hero[data-variant="team"] .bc-page-hero__kanalen{margin-top:24px}.bc-cm.bc30 .bc-page-hero[data-variant="team"] .bc-page-hero__regel{margin-top:16px}@media(min-width:1000px) and (max-width:1279px){.bc-cm.bc30 .bc-page-hero[data-variant="team"] .bc-page-hero__wrap{grid-template-columns:minmax(0,1fr) 440px}}/* De drie kanalen ook op 1280 tot 1339 naast elkaar, met iets compactere tegels (Bram 16-10: onder elkaar maakte de kop
   te hoog, 564 tegen 472 px; zo blijft er op 1280 48 px tot de mensen). Eerder stonden ze hier onder elkaar, omdat
   Bericht anders op een eigen regel kwam. */@media(min-width:1280px) and (max-width:1339px){
 .bc-cm.bc30 .bc-page-hero[data-variant="team"] .bc-page-hero__kanalen{gap:10px}
 .bc-cm.bc30 .bc-page-hero[data-variant="team"] .bc-page-hero__kanaal{padding:10px 16px 10px 10px;-moz-column-gap:10px;column-gap:10px}
}@media(max-width:999px){
 .bc-cm.bc30 .bc-page-hero[data-variant="team"] .bc-page-hero__wrap{display:block;padding:32px 32px 0}
 .bc-cm.bc30 .bc-page-hero[data-variant="team"] .bc-page-hero__text{padding-bottom:0}
}@media(max-width:699px){
 .bc-cm.bc30 .bc-page-hero[data-variant="team"] .bc-page-hero__wrap{padding:20px 24px 0}
 .bc-cm.bc30 .bc-page-hero[data-variant="team"] .bc-page-hero__crumb{margin-bottom:16px}
 .bc-cm.bc30 .bc-page-hero[data-variant="team"] .bc-page-hero__lead{font-size:var(--bc30-fs-tekst);margin-top:12px}
 .bc-cm.bc30 .bc-page-hero[data-variant="team"] .bc-page-hero__kanalen{margin-top:16px}
 .bc-cm.bc30 .bc-page-hero[data-variant="team"] .bc-page-hero__regel{margin-top:12px} /* links, zoals de rest van de kop (ontwerpreview S5) */
}/* De mensen staan op de rand; het formulier eronder begint dichtbij (schets: 40, telefoon 16), zonder sierboog in die band. */.bc-cm.bc30 .bc-page-hero[data-variant="team"]+.bc-band{padding-top:40px}.bc-cm.bc30 .bc-page-hero[data-variant="team"]+.bc-band:before{display:none}@media(max-width:699px){.bc-cm.bc30 .bc-page-hero[data-variant="team"]+.bc-band{padding-top:16px}}@media print{.bc-cm.bc30 .bc-page-hero[data-variant="team"]{background:none}}/* === Kanalen en regel (contactpagina, batch 5b, richting B van de contactpagina): drie witte tegels op de lichte
   kop (Bellen, Mailen, Bericht), heel de tegel klikbaar; bellen met het groene pictogram. Onder de kanalen een
   korte regel met een onderstreepte tekstlink (de offerteknop staat in de header). Vanaf 1280 naast elkaar,
   daaronder onder elkaar (hoogstens 420 breed), op de telefoon over de hele breedte. === */.bc-cm.bc30 .bc-page-hero__kanalen{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none}.bc-cm.bc30 .bc-page-hero__ctas+.bc-page-hero__kanalen{margin-top:24px}.bc-cm.bc30 .bc-page-hero__kanalen>li{margin:0;padding:0;list-style:none}.bc-cm.bc30 .bc-page-hero__kanalen>li:before{display:none}.bc-cm.bc30 .bc-page-hero__kanaal{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;-moz-column-gap:12px;column-gap:12px;align-items:center;min-height:68px;padding:12px 20px 12px 12px;background:var(--bc30-grond);border-radius:var(--bc30-r-kaart);box-shadow:var(--bc30-schaduw-kaart);color:var(--bc30-kop);text-decoration:none;transition:translate var(--bc30-duur-snel) var(--bc30-ease)}.bc-cm.bc30 .bc-page-hero__kanaal:hover{translate:0 -2px;outline:2px solid var(--bc30-oranje);outline-offset:0;color:var(--bc30-kop)}.bc-cm.bc30 .bc-page-hero__kanaal-ico{grid-row:1/3;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--bc30-creme);color:var(--bc30-kop)}.bc-cm.bc30 .bc-page-hero__kanaal[data-soort="bellen"] .bc-page-hero__kanaal-ico{background:var(--bc30-groen);color:var(--bc30-grond)}.bc-cm.bc30 .bc-page-hero__kanaal-ico svg{width:20px;height:20px}.bc-cm.bc30 .bc-page-hero__kanaal-label{align-self:end;font:800 var(--bc30-fs-eyebrow)/1.3 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);text-transform:uppercase;color:var(--bc30-tekst-zacht)}.bc-cm.bc30 .bc-page-hero__kanaal-tekst{align-self:start;display:flex;align-items:center;gap:8px;font:800 var(--bc30-fs-knop)/1.35 var(--bc30-font-tekst);white-space:nowrap}.bc-cm.bc30 .bc-page-hero__kanaal-pijl{width:16px;height:16px;flex:none;color:var(--bc30-oranje-tekst);transition:translate var(--bc30-duur) var(--bc30-ease)}.bc-cm.bc30 .bc-page-hero__kanaal:hover .bc-page-hero__kanaal-pijl{translate:0 4px}.bc-cm.bc30 .bc-page-hero__regel{font:400 var(--bc30-fs-kaarttekst)/1.6 var(--bc30-font-tekst);color:var(--bc30-op-donker-tekst);margin:16px 0 0}.bc-cm.bc30 .bc-page-hero__regel a{display:inline-block;padding:4px 0;color:var(--bc30-oranje);font-weight:800;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}.bc-cm.bc30 .bc-page-hero[data-toon="licht"] .bc-page-hero__regel{color:var(--bc30-tekst)}.bc-cm.bc30 .bc-page-hero[data-toon="licht"] .bc-page-hero__regel a{color:var(--bc30-oranje-tekst)}.bc-cm.bc30 .bc-page-hero__regel a:hover{color:var(--bc30-oranje-hover)}/* Naast elkaar alleen als de drie tegels zeker passen: zonder foto vanaf 1280, naast de foto vanaf 1401 (op 1400 en lager is de
   binnenmarge links 6 procent). */@media(max-width:1279px){.bc-cm.bc30 .bc-page-hero__kanalen{flex-direction:column;max-width:420px}}@media(max-width:1400px){.bc-cm.bc30 .bc-page-hero[data-variant="licht-foto"] .bc-page-hero__kanalen{flex-direction:column;max-width:420px}}@media(max-width:699px){
 .bc-cm.bc30 .bc-page-hero__kanalen{max-width:none;gap:8px}
 .bc-cm.bc30 .bc-page-hero__kanaal{min-height:60px;padding:8px 16px 8px 8px}
 .bc-cm.bc30 .bc-page-hero__kanaal:hover{translate:none}
}@media print{.bc-cm.bc30 .bc-page-hero__foto:before{display:none}.bc-cm.bc30 .bc-page-hero[data-variant="licht-foto"]{background:none}.bc-cm.bc30 .bc-page-hero__kanaal{box-shadow:none}}/* === Compact (contact): een lagere kop. Alleen de hoogte; de mobiele maten blijven die van de fotokop. === */@media(min-width:700px){
 .bc-cm.bc30 .bc-page-hero--compact:not([data-variant="sfeer"],[data-variant="licht-foto"],[data-variant="team"]) .bc-page-hero__wrap{min-height:480px;padding-top:56px;padding-bottom:56px}
 .bc-cm.bc30 .bc-page-hero--compact[data-variant="tekst"] .bc-page-hero__wrap{min-height:0}
}/* === Adreskaart (page-hero mediaCard, contact): een lichte kaart rechts op de foto, onder 1000px onder de
   tekst. Veldnamen en DOM als contact-section; de 2.0-opmaak van de kaart blijft de onderlaag. === */.bc-cm.bc30 .bc-page-hero[data-kaart="adres"] .bc-page-hero__wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}.bc-cm.bc30 .bc-page-hero[data-kaart="adres"] .bc-page-hero__text{flex:1 1 auto;align-self:center}.bc-cm.bc30 .bc-page-hero__card{flex:0 0 360px;max-width:360px;margin:0;background:var(--bc30-vlak);border-radius:var(--bc30-r-kaart);box-shadow:none;padding:30px 30px 28px;color:var(--bc30-donker)}.bc-cm.bc30 .bc-page-hero__card h3{font:900 var(--bc30-fs-kaart)/1.2 var(--bc30-font-kop);letter-spacing:-.02em;color:var(--bc30-kop);margin:0 0 14px}.bc-cm.bc30 .bc-page-hero__card address{font:400 var(--bc30-fs-tekst)/1.7 var(--bc30-font-tekst);color:var(--bc30-tekst);margin:0 0 8px}/* Kanalen op de adreskaart in 3.0-maten en AA (ontwerpreview S5): het label grijs van de donkere kop haalde 3,35:1 op
   off-white, de mail #ee7437 2,8:1, het nummer had een losse clamp-maat. */.bc-cm.bc30 .bc-page-hero__card-lbl{font:800 var(--bc30-fs-eyebrow)/1.4 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);color:var(--bc30-tekst-zacht)}.bc-cm.bc30 .bc-page-hero__card-tel{color:var(--bc30-kop);font:900 var(--bc30-fs-kaart-foto)/1.15 var(--bc30-font-kop);letter-spacing:var(--bc30-ls-kop)}.bc-cm.bc30 .bc-page-hero__card-mail{font:800 var(--bc30-fs-tekst)/1.4 var(--bc30-font-tekst);color:var(--bc30-oranje-tekst);border-bottom-color:currentColor}.bc-cm.bc30 .bc-page-hero__card-tel:hover,.bc-cm.bc30 .bc-page-hero__card-mail:hover{color:var(--bc30-oranje-hover);border-color:var(--bc30-oranje-hover)}@media(max-width:1000px){
 .bc-cm.bc30 .bc-page-hero[data-kaart="adres"] .bc-page-hero__wrap{display:block}
 .bc-cm.bc30 .bc-page-hero__card{max-width:420px;margin:28px 0 0}
}/* === Portret (page-hero portret, alias author-hero): de naam als kop, de functie als eyebrow, rechts de
   foto of uitsnede in een eigen kolom met de oranje swoosh erachter (zoals de bartender op cocktails).
   Een uitsnede (transparante png) staat vrij op de swoosh; een gewone foto wordt een afgeronde kaart. === */.bc-cm.bc30 .bc-page-hero[data-variant="portret"] .bc-page-hero__wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);align-items:end;gap:56px;min-height:0;padding-top:68px;padding-bottom:0;position:relative;z-index:1}.bc-cm.bc30 .bc-page-hero[data-variant="portret"] .bc-page-hero__text{max-width:none;align-self:center;padding-bottom:56px;position:relative}.bc-cm.bc30 .bc-page-hero[data-variant="portret"] .bc-page-hero__art{position:relative;inset:auto;z-index:0;float:none;order:0;height:auto;margin:0;aspect-ratio:4/5;max-height:540px;overflow:visible;pointer-events:none;background:transparent}.bc-cm.bc30 .bc-page-hero[data-variant="portret"] .bc-page-hero__art:before{content:"";position:absolute;z-index:-1;width:130%;aspect-ratio:1400/750;left:18%;top:-4%;background:var(--wpr-bg-b818d30b-a903-4d0c-ad5c-c11d7f82e054) center/contain no-repeat;transform:rotate(-90deg)}.bc-cm.bc30 .bc-page-hero[data-variant="portret"] .bc-page-hero__art img{position:relative;display:block;left:auto;top:auto;width:100%;max-width:none;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 0;object-position:50% 0;border-radius:var(--bc30-r-kaart)}@media(max-width:900px){
 .bc-cm.bc30 .bc-page-hero[data-variant="portret"] .bc-page-hero__wrap{grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:32px;padding-top:34px}
}@media(max-width:699px){
 .bc-cm.bc30 .bc-page-hero[data-variant="portret"] .bc-page-hero__wrap{display:block;padding:35px 24px 0}
 .bc-cm.bc30 .bc-page-hero[data-variant="portret"] .bc-page-hero__text{padding-bottom:36px}
 .bc-cm.bc30 .bc-page-hero[data-variant="portret"] .bc-page-hero__art{width:min(78%,320px);margin:0 auto}
}/* === Regels in de tekstkolom: eyebrow (portret, bedankt), blogmeta, contactregel === */.bc-cm.bc30 .bc-page-hero__eyebrow{font:700 var(--bc30-fs-eyebrow)/1.3 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);text-transform:uppercase;color:var(--bc30-oranje);margin:0 0 18px}.bc-cm.bc30 .bc-page-hero__meta{font:700 var(--bc30-fs-klein)/1.4 var(--bc30-font-tekst);letter-spacing:.14em;text-transform:uppercase;color:#8f887c;margin:-12px 0 24px}.bc-cm.bc30 .bc-page-hero__contact{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font:700 var(--bc30-fs-tekst)/1.5 var(--bc30-font-tekst);color:var(--bc30-op-donker-kop);margin:0 0 30px}.bc-cm.bc30 .bc-page-hero__contact-label{font:700 var(--bc30-fs-eyebrow)/1.3 var(--bc30-font-tekst);letter-spacing:.2em;text-transform:uppercase;color:#8f887c}.bc-cm.bc30 .bc-page-hero__contact a{color:var(--bc30-op-donker-kop);text-decoration:underline;text-decoration-color:var(--bc30-oranje);text-decoration-thickness:2px;text-underline-offset:5px}.bc-cm.bc30 .bc-page-hero__contact a:hover{color:var(--bc30-oranje)}.bc-cm.bc30 .bc-page-hero__contact-sep{width:4px;height:4px;border-radius:50%;background:#8f887c}@media(max-width:640px){
 .bc-cm.bc30 .bc-page-hero__eyebrow{margin-bottom:13px}
}@media(max-width:900px){
 .bc-cm.bc30 .bc-page-hero__contact{flex-direction:column;align-items:flex-start}
 .bc-cm.bc30 .bc-page-hero__contact-sep{display:none}
 /* Tikvlak 44 hoog (R6c): telefoon en mail staan 8 px onder elkaar; het vlak groeit naar buiten, niet over de ander. */
 .bc-cm.bc30 .bc-page-hero__contact a:after{content:"";position:absolute;inset:-16px 0 -4px}
 .bc-cm.bc30 .bc-page-hero__contact a:last-child:after{inset:-4px 0 -16px}
}/* === Statement (page-hero size statement, over-ons): een korte titel groter === */.bc-cm.bc30 .bc-page-hero--statement:not([data-variant="sfeer"]) h1{font-size:var(--bc30-fs-statement);line-height:1.08}/* === Scorechips (referenties): donkere pil zoals de cijferbalk, onder de knoppen. De 2.0-chip (donker,
   crème, bronmerkje) blijft de onderlaag. === */.bc-cm.bc30 .bc-page-hero__chips{gap:12px;margin-top:28px}/* O13 (Bram 03-10): hetzelfde reviewelement als de homekop en het reviewblok: cijfer met noemer, label,
   scheidingslijn en het bronlogo (Feedback Company wit op de donkere pil). Geen sterren. */.bc-cm.bc30 .bc-page-hero__chip{background:#242422cc;border:1px solid var(--bc30-lijn-donker);border-radius:var(--bc30-r-pil);box-shadow:none;align-items:center;gap:14px;padding:12px 20px}.bc-cm.bc30 .bc-page-hero__chip-num{font-size:var(--bc30-fs-kaart-foto)}.bc-cm.bc30 .bc-page-hero__chip-num small{font:400 var(--bc30-fs-klein)/1 var(--bc30-font-tekst);color:var(--bc30-op-donker-zacht)}.bc-cm.bc30 .bc-page-hero__chip-sub{font:600 var(--bc30-fs-klein)/1.2 var(--bc30-font-tekst);color:var(--bc30-op-donker-zacht);white-space:nowrap}.bc-cm.bc30 .bc-page-hero__chip-src{border-left:1px solid var(--bc30-lijn-donker);padding-left:14px;gap:0;flex:none}.bc-cm.bc30 .bc-page-hero__chip-src img{display:block;width:76px;height:24px;-o-object-fit:contain;object-fit:contain}.bc-cm.bc30 .bc-page-hero__chip-src[data-bron="feedback-company"] img{filter:grayscale(1) brightness(0) invert(1)}/* Kleine telefoon: de pil met score, zin en logo past krap; iets minder ruimte, zodat het logo niet tegen de rand
   staat (ontwerpreview S5, scores op 360). */@media(max-width:380px){.bc-cm.bc30 .bc-page-hero:not([data-variant="home"]) .bc-page-hero__chip{gap:10px;padding:10px 16px}.bc-cm.bc30 .bc-page-hero:not([data-variant="home"]) .bc-page-hero__chip-src{padding-left:10px}.bc-cm.bc30 .bc-page-hero:not([data-variant="home"]) .bc-page-hero__chip-src img{width:64px}}.bc-cm.bc30 .bc-page-hero__chip--link:hover{border-color:var(--bc30-oranje)}@media(max-width:640px){.bc-cm.bc30 .bc-page-hero__chip{gap:10px;padding:10px 16px}.bc-cm.bc30 .bc-page-hero__chip-src{padding-left:10px}.bc-cm.bc30 .bc-page-hero__chip-src img{width:62px;height:22px}}/* === Eigen badge (badgeImage, bv. CO2-neutraal): een zegel rechtsboven op de foto, zonder zweven. === */.bc-cm.bc30 .bc-page-hero__badge{position:absolute;z-index:1;left:auto;bottom:auto;top:52px;right:max(32px,calc((100% - 1300px) / 2 + 32px));width:96px;height:auto;background:none;animation:none;transform:rotate(8deg)}@media(max-width:699px){.bc-cm.bc30 .bc-page-hero__badge{top:auto;bottom:236px;right:20px;width:74px}}/* === Bedankt-pagina (bedankt-hero, apart): de fotokop, met status-stappen onder de lead. De wortel draagt
   ook bc-page-hero; de personalisatie (src/components/bedankt-hero.js) werkt op de data-bc-slot-elementen.
   De 2.0-opmaak van de stappen staat op een lichte grond; hier op zwart. Zonder JS heeft de foto nog
   geen src: dan is hij weg en staat de noscript-foto er. === */.bc-cm.bc30 .bc-bedankt-hero .bc-bedankt-hero__photo{border-radius:0;aspect-ratio:auto;background:none;z-index:auto;box-shadow:none}.bc-cm.bc30 .bc-bedankt-hero img.bc-bedankt-hero__photo:not([src]){display:none}.bc-cm.bc30 .bc-bedankt-hero .bc-bedankt-hero__chips{margin:-6px 0 28px}.bc-cm.bc30 .bc-bedankt-hero .bc-bedankt-hero__chip{background:#242422cc;border:1px solid var(--bc30-lijn-donker);color:var(--bc30-op-donker-kop)}.bc-cm.bc30 .bc-bedankt-hero .bc-bedankt-hero__steps{max-width:470px}.bc-cm.bc30 .bc-bedankt-hero .bc-bedankt-hero__step:before{background:#ffffff26}.bc-cm.bc30 .bc-bedankt-hero .bc-bedankt-hero__step.is-done:before{background:var(--bc30-groen);opacity:.6}.bc-cm.bc30 .bc-bedankt-hero .bc-bedankt-hero__step-ico{background:var(--bc30-zwart);border-color:#ffffff40}.bc-cm.bc30 .bc-bedankt-hero .bc-bedankt-hero__step.is-done .bc-bedankt-hero__step-ico{background:var(--bc30-groen);border-color:var(--bc30-groen);color:#fff}.bc-cm.bc30 .bc-bedankt-hero .bc-bedankt-hero__step.is-active .bc-bedankt-hero__step-ico{border-color:var(--bc30-oranje)}.bc-cm.bc30 .bc-bedankt-hero .bc-bedankt-hero__step-label{color:var(--bc30-op-donker-kop)}.bc-cm.bc30 .bc-bedankt-hero .bc-bedankt-hero__step-sub{color:var(--bc30-op-donker-zacht)}/* === Print: crème op zwart print als lege pagina (browsers printen geen achtergrond). === */@media print{
 .bc-cm.bc30 .bc-page-hero{background:none;color:#000;padding-bottom:12px}
 .bc-cm.bc30 .bc-page-hero:before,.bc-cm.bc30 .bc-page-hero__art,.bc-cm.bc30 .bc-page-hero__badge{display:none}
 .bc-cm.bc30 .bc-page-hero__wrap{min-height:0;padding:12px 0}
 .bc-cm.bc30 .bc-page-hero h1,.bc-cm.bc30 .bc-page-hero__lead,.bc-cm.bc30 .bc-page-hero__contact,.bc-cm.bc30 .bc-page-hero__contact a,.bc-cm.bc30 .bc-bedankt-hero .bc-bedankt-hero__step-label{color:#000}
 .bc-cm.bc30 .bc-page-hero__crumb,.bc-cm.bc30 .bc-page-hero__meta,.bc-cm.bc30 .bc-bedankt-hero .bc-bedankt-hero__step-sub{color:#444}
 .bc-cm.bc30 .bc-page-hero__ctas{display:none}
}/* === Kop op de telefoon: eerst een lage fotostrook van 220 px, dan kruimel, kop, tekst en knoppen (keuze 7B1, Bram
   2026-10-03: "ja man veel beter"; schetsen in _fase3/blokkenboek-nu/vraag-kop.html, besluitenregister). Voor de
   sfeerkop en de fotokop; de andere vormen (portret, blog, zonder foto, statement, adreskaart, scores) houden hun
   opbouw. De sfeerkop houdt zijn eigen uitsnede van de foto (de persoon groot); de fotokop vult de strook. === */@media(max-width:699px){
 .bc-cm.bc30 .bc-page-hero:is([data-variant="sfeer"],[data-variant="photo"]) .bc-page-hero__art{order:-1;position:relative;inset:auto;top:auto;bottom:auto;z-index:0;height:220px;margin:0;overflow:hidden}
 .bc-cm.bc30 .bc-page-hero[data-variant="photo"] .bc-page-hero__art img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:var(--focus,58% 40%);object-position:var(--focus,58% 40%);margin:0}
 /* beeldFocus van de donkere fotokop (run 12, R6c): welk deel van de foto in de strook blijft; zonder waarde 58% 40%. */
 .bc-cm.bc30 .bc-page-hero__art[data-focus=links]{--focus:20% 40%}
 .bc-cm.bc30 .bc-page-hero__art[data-focus=rechts]{--focus:80% 40%}
 .bc-cm.bc30 .bc-page-hero__art[data-focus=boven]{--focus:58% 10%}
 .bc-cm.bc30 .bc-page-hero__art[data-focus=onder]{--focus:58% 72%}
 .bc-cm.bc30 .bc-page-hero[data-variant="photo"] .bc-page-hero__art:after{background:linear-gradient(180deg,transparent 55%,var(--bc30-zwart))}
 .bc-cm.bc30 .bc-page-hero[data-variant="photo"] .bc-page-hero__wrap{padding:24px 24px 32px}
 .bc-cm.bc30 .bc-page-hero[data-variant="sfeer"] .bc-page-hero__wrap{padding-top:24px}
 .bc-cm.bc30 .bc-page-hero[data-variant="sfeer"] .bc-stats{margin-top:32px}
 /* Eigen zegel (badgeImage, bv. CO2-neutraal) rechtsonder op de fotostrook in plaats van boven de onderrand van de kop
    (lag na 7B1 over de introtekst). */
 .bc-cm.bc30 .bc-page-hero:is([data-variant="sfeer"],[data-variant="photo"]) .bc-page-hero__badge{top:104px;bottom:auto;right:20px;width:74px}
}/* Kruimelpad (O1; ronde 2 04-10: het midden inkorten, niet het einde): vanaf drie stappen staat het hele pad er als het
   op één regel past; anders zet hero.js data-kort: "Home › … › ouder" (tussenstappen en de huidige pagina weg; die staat in
   de H1). De knop … toont de rest (data-open); dan mag het pad over meer regels. Zonder JS: het hele pad. De kruimel telt
   niet mee voor de breedte van de tekstkolom (review B1: op de sfeerkop duwde hij kop en knoppen uit beeld, want de wrap
   is daar zo breed als zijn inhoud): width 0 en min-width 100%. De ruimte rond een pijltje komt alleen uit zijn marge. */.bc-cm.bc30 .bc-page-hero nav.bc-page-hero__crumb[data-kruimel-lang]{display:flex;align-items:center;flex-wrap:wrap;-moz-column-gap:0;column-gap:0;row-gap:2px;width:0;min-width:100%;max-width:100%}.bc-cm.bc30 .bc-page-hero nav.bc-page-hero__crumb[data-kruimel-lang] :is(.bc-page-hero__crumb-mid,.bc-page-hero__crumb-eind){display:contents}.bc-cm.bc30 .bc-page-hero nav.bc-page-hero__crumb[data-kort]{flex-wrap:nowrap;overflow:hidden;white-space:nowrap}.bc-cm.bc30 .bc-page-hero nav.bc-page-hero__crumb[data-kort] :is(.bc-page-hero__crumb-mid,.bc-page-hero__crumb-eind){display:none}.bc-cm.bc30 .bc-page-hero nav.bc-page-hero__crumb[data-kort]>*{flex:none}.bc-cm.bc30 .bc-page-hero nav.bc-page-hero__crumb[data-kort]>.bc-page-hero__crumb-ouder{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}/* Kort pad (twee stappen, geen data-kruimel-lang): altijd één regel; past de huidige pagina niet, dan puntjes aan het
   eind (lane b6kop: op 360 brak "Home › <lange titel>" over twee regels door de 2.0-regel flex-wrap). Geen overflow op
   de nav zelf, zodat de focusring van Home heel blijft. */.bc-cm.bc30 .bc-page-hero nav.bc-page-hero__crumb:not([data-kruimel-lang]){flex-wrap:nowrap;white-space:nowrap;min-width:0;max-width:100%}.bc-cm.bc30 .bc-page-hero nav.bc-page-hero__crumb:not([data-kruimel-lang])>*{flex:none}.bc-cm.bc30 .bc-page-hero nav.bc-page-hero__crumb:not([data-kruimel-lang])>:last-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}/* Meten (hero.js): alles even naast elkaar op ware breedte. */.bc-cm.bc30 .bc-page-hero nav.bc-page-hero__crumb[data-meten]{flex-wrap:nowrap!important;overflow:hidden;white-space:nowrap}.bc-cm.bc30 .bc-page-hero nav.bc-page-hero__crumb[data-meten] *{flex:none!important;min-width:auto!important;max-width:none!important}.bc-cm.bc30 .bc-page-hero .bc-page-hero__crumb-kort:not([hidden]){display:contents}/* De knop … : tikdoel 24 px, maar de negatieve marge houdt de ruimte naast de puntjes gelijk aan die bij een pijltje. */.bc-cm.bc30 .bc-page-hero .bc-page-hero__crumb-meer{font:inherit;color:var(--bc30-oranje);background:none;border:0;padding:0;margin:0 -5px;min-width:24px;min-height:24px;border-radius:var(--bc30-r-pil);cursor:pointer;letter-spacing:0}.bc-cm.bc30 .bc-page-hero .bc-page-hero__crumb-meer:hover{text-decoration:underline;text-underline-offset:3px}.bc-cm.bc30 .bc-page-hero .bc-page-hero__crumb-meer:focus-visible{outline:2px solid var(--bc30-oranje);outline-offset:2px}/* === Persoonkop A plus B (fase B batch 6; Bram 04-10 op keuzepagina ronde 3: "van optie A de geschreven naam met die
   lijn eronder is echt dope. Maar bij optie b gelijk ff wat info over de persoon ook heel leuk!"; schetsen
   blokkenboek-nu/schets-b5/persoonkop/richting-a.html en richting-b.html). Vervangt de grote naam met het watermerk van
   O10 (Bram 04-10 bij ronde 2: "vind nu de tekst LUNA groot niet meer nice"). Lichte grond (off-white, grond D). Uit B:
   de naam loopt door in de eigen zin van het teamlid, één kop in twee tinten (naam donker, zin zacht), het laatste
   woord in oranje script, ==woord== met de markeerstift; zonder eigen zin staat de tagline als tweede zin onder de naam.
   Uit A: de voornaam als handtekening in het BC-script schuin over de onderkant van de foto, met de penhaal van de
   markeerstift eronder; hij schrijft zichzelf zodra foto en letter er zijn (hero.js zet is-geschreven). Het zegel staat
   rechts op de boog. Maten: --bc30-fs-naamzin (statement: 64 op 1440, 44 op tablet; 36 op de telefoon) en
   --bc30-fs-handtekening (150, 88, 76); een lange zin (data-lang) staat op de sectiekopmaat. Zonder JS, bij minder
   beweging en bij afdrukken staat de handtekening er meteen; laadt de bundel niet, dan na 3 s. === */.bc-cm.bc30 .bc-page-hero[data-variant="portret"]{background:var(--bc30-vlak);color:var(--bc30-tekst);position:relative;overflow:hidden;isolation:isolate}.bc-cm.bc30 .bc-page-hero[data-variant="portret"] .bc-page-hero__eyebrow{color:var(--bc30-oranje-tekst)}.bc-cm.bc30 .bc-page-hero[data-variant="portret"] .bc-page-hero__contact{color:var(--bc30-tekst)}.bc-cm.bc30 .bc-page-hero[data-variant="portret"] .bc-page-hero__contact a{color:var(--bc30-kop)}.bc-cm.bc30 .bc-page-hero[data-variant="portret"] .bc-stats{background:var(--bc30-donker)}/* Geen swoosh-snippertje boven de functie (ronde 5, Bram 05-10: "check"); de boog achter de foto blijft. */.bc-cm.bc30 .bc-page-hero[data-variant="portret"] .bc-page-hero__art:after{content:"";position:absolute;z-index:2;right:-7%;bottom:30%;width:clamp(96px,10vw,140px);aspect-ratio:1;background:url(https://cdn.barcompany.nl/design-system/latest/assets/patch-bc-black-orangetext-borderless.svg) center/contain no-repeat;transform:rotate(10deg);pointer-events:none}/* Naam en zin: één kop. De h1 is alleen de naam; de zin is een alinea erachter (inline), zonder zin de tagline eronder. */.bc-cm.bc30 .bc-page-hero__naamzin{margin:0 0 32px;font:900 var(--bc30-fs-naamzin)/1.14 var(--bc30-font-kop);letter-spacing:-.025em;color:var(--bc30-tekst-zacht);hyphens:manual;text-wrap:pretty}.bc-cm.bc30 .bc-page-hero__naamzin[data-lang]{font-size:var(--bc30-fs-h2)}.bc-cm.bc30 .bc-page-hero[data-variant="portret"] .bc-page-hero__naamzin h1{display:inline;max-width:none;margin:0;font:inherit;line-height:inherit;letter-spacing:inherit;color:var(--bc30-kop)}.bc-cm.bc30 .bc-page-hero__zin{display:inline;margin:0;font:inherit;color:inherit}.bc-cm.bc30 .bc-page-hero__naamzin[data-los] :is(h1,.bc-page-hero__zin){display:block}.bc-cm.bc30 .bc-page-hero__zin .bc-script{display:inline-block;font-size:var(--bc30-script);line-height:.8;white-space:nowrap;rotate:-3deg;translate:0 .04em}.bc-cm.bc30 .bc-page-hero__zin .bc-mark{color:var(--bc30-kop);white-space:nowrap}@media(min-width:700px){.bc-cm.bc30 .bc-page-hero__slot{white-space:nowrap}}/* De handtekening: voornaam in het script schuin over de onderkant van de foto, de penhaal (de markeerstift) eronder. */.bc-cm.bc30 .bc-page-hero__handtekening{position:absolute;z-index:3;left:-30%;bottom:9%;display:block;font-size:var(--bc30-fs-handtekening);rotate:-9deg;transform-origin:0 100%;pointer-events:none}.bc-cm.bc30 .bc-page-hero__handtekening[data-lang]{scale:.8}.bc-cm.bc30 .bc-page-hero__handtekening-naam{display:block;padding:0 .18em .05em .06em;font:400 1em/1 var(--bc30-font-script);color:var(--bc30-oranje);white-space:nowrap;letter-spacing:0}.bc-cm.bc30 .bc-page-hero__handtekening-haal{position:absolute;left:.12em;right:-.1em;bottom:.02em;height:.16em;background:url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27 viewBox%3D%270 0 200 16%27 preserveAspectRatio%3D%27none%27%3E%3Cpath d%3D%27M1 11.5C55 5.5 130 3.5 199 7.5C132 7 62 9.5 4 15C1.5 14.5.5 13 1 11.5Z%27 fill%3D%27%23ee7437%27%2F%3E%3C%2Fsvg%3E") no-repeat 0 50%/100% 100%;rotate:-4deg;transform-origin:0 50%}/* Schrijven (alleen met JS; hero.js zet is-geschreven als foto en letter er zijn en de kop in
   beeld is): een zachte rand loopt van links naar rechts over de naam, daarna trekt de haal. */@media screen and (scripting:enabled){
 .bc-cm.bc30 .bc-page-hero__handtekening-naam{-webkit-mask-image:linear-gradient(90deg,#000 42%,transparent 58%);mask-image:linear-gradient(90deg,#000 42%,transparent 58%);-webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0;transition:-webkit-mask-position var(--bc30-duur-traag) var(--bc30-ease) var(--bc30-duur),mask-position var(--bc30-duur-traag) var(--bc30-ease) var(--bc30-duur)}
 .bc-cm.bc30 .bc-page-hero__handtekening-haal{background-size:0% 100%;transition:background-size var(--bc30-duur-beeld) var(--bc30-ease) calc(var(--bc30-duur) + var(--bc30-duur-traag))}
 .bc-cm.bc30 .bc-page-hero__handtekening.is-geschreven .bc-page-hero__handtekening-naam{-webkit-mask-position:0 0;mask-position:0 0}
 .bc-cm.bc30 .bc-page-hero__handtekening.is-geschreven .bc-page-hero__handtekening-haal{background-size:100% 100%}
 .bc-cm.bc30 .bc-page-hero__handtekening:not(.is-geschreven,[data-bc-wacht]) :is(.bc-page-hero__handtekening-naam,.bc-page-hero__handtekening-haal){animation-name:bc-handtekening-terugval;animation-duration:1ms;animation-delay:var(--bc30-vangnet);animation-fill-mode:both}
}/* Vangnet als de bundel niet laadt (review batch 6, L2): na 3 s staat de handtekening er toch. hero.js zet data-bc-wacht
   zodra hij draait en neemt het dan over (longhands: de minifier sloopte eerder een shorthand). */@keyframes bc-handtekening-terugval{to{-webkit-mask-position:0 0;mask-position:0 0;background-size:100% 100%}}/* Computer: de handtekening steekt links over de rand van de foto (zoals A); de tekstkolom houdt daar ruimte vrij (de
   naam begint ongeveer 70 px voor de fotokolom en draait nog 23 px verder), zodat een lange zin of het mailadres hem
   nooit raakt (UX-sweep: op 1000 raakte "Luna" het mailadres). Tablet: de tekstkolom is smal, dus daar blijft de
   handtekening op de foto. */@media(min-width:1000px){.bc-cm.bc30 .bc-page-hero[data-variant="portret"] .bc-page-hero__text{padding-right:96px}}/* Tussen 1000 en 1199 is de tekstkolom smaller: daar steekt de handtekening minder ver uit, zodat de contactregel op één
   regel past (anders bleef het puntje alleen achter het telefoonnummer staan). */@media(min-width:1000px) and (max-width:1199px){
 .bc-cm.bc30 .bc-page-hero[data-variant="portret"] .bc-page-hero__text{padding-right:64px}
 .bc-cm.bc30 .bc-page-hero__handtekening{left:-20%}
}@media(min-width:700px) and (max-width:999px){.bc-cm.bc30 .bc-page-hero__handtekening{left:-6%;bottom:6%}}/* Review B2: op de lichte gronden (portret en de lichte kop) is het grijs van de donkere kop te licht (3,35:1); daar
   --bc30-tekst-zacht voor de kruimel, het label DIRECT, de meta en het puntje ertussen. Na de regels van de fotokop,
   met dezelfde specificiteit, zodat deze wint. */.bc-cm.bc30 .bc-page-hero:is([data-toon="licht"],[data-variant="portret"]) nav.bc-page-hero__crumb,
.bc-cm.bc30 .bc-page-hero:is([data-toon="licht"],[data-variant="portret"]) :is(.bc-page-hero__contact-label,.bc-page-hero__meta){color:var(--bc30-tekst-zacht)}.bc-cm.bc30 .bc-page-hero:is([data-toon="licht"],[data-variant="portret"]) .bc-page-hero__contact-sep{background:var(--bc30-tekst-zacht)}@media(max-width:699px){
 .bc-cm.bc30 .bc-page-hero[data-variant="portret"] .bc-page-hero__art:after{right:-8%;bottom:34%;width:84px}
 .bc-cm.bc30 .bc-page-hero__naamzin{margin-bottom:24px}
 .bc-cm.bc30 .bc-page-hero__handtekening{left:-12%;bottom:7%}
}/* === Homekop (variant home, batch 6, lane b6home): de home zoals 8138 (index.html, header-optie E "tot schermrand",
   BC-element en groter script aan). Tekst links in de inhoudsbreedte, de foto rechts tot de schermrand met de boog
   achter de persoon (svg met masker, render.mjs) en het zegel rechtsonder; de scorepil in het midden eronder. Tot 760
   px (zoals 8138) eerst tekst en knoppen, dan de foto breder dan het scherm, dan de pil. Maten uit de stijlbibliotheek
   (paginakop --bc30-fs-h1, script --bc30-script); de rest gemeten op 8138. Overschrijft de algemene regels hierboven
   (zelfde gewicht, later in het bestand). === */.bc-cm.bc30 .bc-page-hero[data-variant="home"]{display:block;padding:0;overflow:hidden}.bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__wrap{position:relative;display:flex;align-items:center;max-width:var(--bc30-cap);min-height:750px;gap:12px;margin:0 auto;padding:65px var(--bc30-gutter) 55px}.bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__text{position:relative;z-index:2;flex:none;width:44%;max-width:590px;margin:0}.bc-cm.bc30 .bc-page-hero[data-variant="home"] h1{font-size:var(--bc30-fs-h1);line-height:1.02;letter-spacing:normal;max-width:565px;margin:0}.bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__lijn{display:block}.bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__lijn:has(.bc-script){padding-bottom:.07em}.bc-cm.bc30 .bc-page-hero[data-variant="home"] h1 .bc-script{white-space:nowrap;hyphens:manual;overflow-wrap:normal;vertical-align:baseline}.bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__lead{font-size:var(--bc30-fs-tekst-home);color:var(--bc30-op-donker-kop);max-width:515px;margin:26px 0}.bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__ctas{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:12px}.bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__ctas .bc-btn{flex:none;width:auto;padding:13px 20px}.bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__ctas .bc-btn--glow{box-shadow:var(--bc30-gloed)}.bc-cm.bc30 .bc-page-hero__home-beeld{position:absolute;z-index:-1;top:0;bottom:0;left:34%;right:min(0px,calc((var(--bc30-cap) - 100vw) / 2));display:flex;align-items:center}.bc-cm.bc30 .bc-page-hero__home-foto{display:block;width:100%;height:100%;min-height:750px;max-width:none;-o-object-fit:cover;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 15%),linear-gradient(180deg,transparent 0%,#000 18%,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 15%),linear-gradient(180deg,transparent 0%,#000 18%,#000 78%,transparent 100%);-webkit-mask-composite:source-in, xor;mask-composite:intersect}.bc-cm.bc30 .bc-page-hero[data-zegel] .bc-page-hero__home-beeld:after{content:"";position:absolute;right:32px;bottom:9%;width:120px;aspect-ratio:1;background:var(--wpr-bg-5312e7eb-5602-44b7-b506-991ad08a1034) center/contain no-repeat;transform:rotate(8deg);pointer-events:none}.bc-cm.bc30 .bc-page-hero__proof{display:flex;justify-content:center;padding:0 0 35px}.bc-cm.bc30 .bc-page-hero__proof .bc-page-hero__chip{gap:16px;padding:16px 24px}.bc-cm.bc30 .bc-page-hero__proof .bc-page-hero__chip-num{font-size:var(--bc30-fs-score)}@media(min-width:761px) and (max-width:1100px){
 .bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__wrap{min-height:730px;padding-top:45px;padding-bottom:45px}
 .bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__text{width:46%;max-width:565px}
 .bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__ctas{gap:8px}
 .bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__ctas .bc-btn{padding:13px 14px}
}@media(max-width:960px){.bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__wrap{gap:10px}.bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__lead{margin:22px 0}}@media(max-width:760px){
 .bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__wrap{flex-direction:column;min-height:0;padding:30px var(--bc30-gutter) 0}
 .bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__text{width:100%;max-width:none}
 .bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__ctas{flex-direction:column;align-items:stretch;gap:12px}
 .bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__ctas .bc-btn{width:100%;min-height:48px;padding:13px 12px;white-space:normal}
 .bc-cm.bc30 .bc-page-hero__home-beeld{position:relative;z-index:0;left:auto;right:auto;width:calc(100% + 100px);margin-top:8px;display:block}
 .bc-cm.bc30 .bc-page-hero__home-foto{height:auto;min-height:0;aspect-ratio:1.6;-webkit-mask-image:radial-gradient(ellipse 62% 49% at 57% 52%,#000 43%,rgba(0,0,0,.94) 60%,rgba(0,0,0,.4) 78%,transparent 98%),radial-gradient(ellipse 31% 43% at 23% 56%,#000 24%,rgba(0,0,0,.65) 50%,transparent 88%);mask-image:radial-gradient(ellipse 62% 49% at 57% 52%,#000 43%,rgba(0,0,0,.94) 60%,rgba(0,0,0,.4) 78%,transparent 98%),radial-gradient(ellipse 31% 43% at 23% 56%,#000 24%,rgba(0,0,0,.65) 50%,transparent 88%);-webkit-mask-composite:source-over;mask-composite:add}
 .bc-cm.bc30 .bc-page-hero[data-zegel] .bc-page-hero__home-beeld:after{width:70px;right:11%;bottom:3%}
 .bc-cm.bc30 .bc-page-hero__proof{padding-top:16px}
}@media(max-width:640px){
 .bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__lead{margin:20px 0}
 .bc-cm.bc30 .bc-page-hero__home-beeld{padding-top:8px}
 .bc-cm.bc30 .bc-page-hero__proof .bc-page-hero__chip{gap:12px;padding:12px 16px}
}@media print{.bc-cm.bc30 .bc-page-hero__home-beeld,.bc-cm.bc30 .bc-page-hero__proof{display:none}}/* Homekop: eigen korte lead op de telefoon (leadMobiel, Tim 20-10) en een tekstlink onder de knop (regel). */.bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__lead--mobiel{display:none}@media(max-width:699px){
 .bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__text--leadmobiel .bc-page-hero__lead:not(.bc-page-hero__lead--mobiel){display:none}
 .bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__text--leadmobiel .bc-page-hero__lead--mobiel{display:block}
}.bc-cm.bc30 .bc-page-hero[data-variant="home"] .bc-page-hero__regel{margin:14px 0 0}/* BC 3.0: Stats (basis stats; aliassen person-stats, case-result), run 2.
   Alles onder de versiemarker .bc-cm.bc30 (zie fundament.css). Bron: de 3.0-preview
   (bc-content-machine/scripts/design-compare/bc30/css/components/stats.css), geport met
   scripts/port-bc30-css.mjs; cocktail-max-hero wordt bc-page-hero, [data-variant="photo"] wordt
   :not([data-variant="sfeer"]) (even zwaar; zie hero.css).
   Twee plekken, dezelfde cijferbalk (donkere pil, crème cijfers, scheidingslijnen):
   - genest in de hero (render-blocks.mjs, _statsHtml): precies de preview;
   - los op de pagina zonder kop (.bc-stats--balk, ontwerp fase 3): dezelfde pil op de zwarte grond, voor
     pagina's met een losse cijferbalk (inline-strip, person-stats). Hij deelt de regels van de geneste balk
     (:is(.bc-page-hero .bc-stats,.bc-stats--balk) weegt even zwaar als de preview-regel) en volgt op de
     telefoon de fotokop;
   - los met kop of eyebrow (.bc-stats--verhaal, fase B batch 5b, O20): het verhaal, onderaan dit bestand.
   Het raster van de preview (1fr 1.25fr 1fr 1fr) is op vier cijfers afgestemd; bij een ander aantal zet
   de render data-aantal en worden de kolommen gelijk (telefoon: twee kolommen, een oneven laatste over
   de hele breedte). De 2.0-regels van bc-stats--serif-band blijven de onderlaag, zoals in de preview.
   Stijlbibliotheek (ronde 2, S1d, 2026-10-02): cijfer --bc30-fs-cijfer (44, telefoon 32) en label
   --bc30-fs-cijferlabel (13, telefoon 11) op elke breedte, in plaats van vijf maten per breakpoint; de pil
   --bc30-r-pil, als kaart (onder 900 px en met kop) --bc30-r-band; de kop in de balk --bc30-fs-h2-paneel;
   een lang getal --bc30-fs-kaart-foto; het accentwoord in een getal --bc30-fs-kaart-foto. *//* === De cijferbalk (preview, genest in de hero; los dezelfde regels) === */.bc-cm.bc30 :is(.bc-page-hero .bc-stats,.bc-stats--balk){width:calc(100% - 64px);max-width:1236px;margin:0 auto;padding:30px 12px;background:#242422cc;border:1px solid var(--bc30-lijn-donker);border-radius:var(--bc30-r-pil);color:var(--bc30-op-donker-kop);clip-path:none;position:relative;min-height:145px}.bc-cm.bc30 :is(.bc-page-hero .bc-stats,.bc-stats--balk):before,.bc-cm.bc30 :is(.bc-page-hero .bc-stats,.bc-stats--balk):after{display:none}.bc-cm.bc30 :is(.bc-page-hero,.bc-stats--balk) .bc-stats__items{border:0;padding:0;gap:0;max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr)}.bc-cm.bc30 :is(.bc-page-hero,.bc-stats--balk) .bc-stats__item{padding:0 12px;opacity:1;transform:none;text-align:center;min-width:0}.bc-cm.bc30 :is(.bc-page-hero,.bc-stats--balk) .bc-stats__item+.bc-stats__item{border-left:1px solid #ffffff26}.bc-cm.bc30 :is(.bc-page-hero,.bc-stats--balk) .bc-stats__num{color:var(--bc30-op-donker-kop);font:900 var(--bc30-fs-cijfer)/1 var(--bc30-font-kop);margin:0 0 14px;letter-spacing:-1px}.bc-cm.bc30 :is(.bc-page-hero,.bc-stats--balk) .bc-stats__label{color:var(--bc30-op-donker-kop);font:700 var(--bc30-fs-cijferlabel)/1.4 var(--bc30-font-tekst);letter-spacing:1.5px;opacity:1;transform:none;margin:0}@media(max-width:900px){
 .bc-cm.bc30 :is(.bc-page-hero .bc-stats,.bc-stats--balk){order:2;width:calc(100% - 48px);padding:25px 10px;border-radius:var(--bc30-r-band);min-height:0}
 .bc-cm.bc30 :is(.bc-page-hero,.bc-stats--balk) .bc-stats__items{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
 .bc-cm.bc30 :is(.bc-page-hero,.bc-stats--balk) .bc-stats__item:nth-child(3){border-left:0}
 .bc-cm.bc30 :is(.bc-page-hero,.bc-stats--balk) .bc-stats__label{letter-spacing:1px}
}@media(min-width:901px) and (max-width:1100px){
 .bc-cm.bc30 .bc-page-hero .bc-stats{order:2;margin-top:15px}
}.bc-cm.bc30 :is(.bc-page-hero:not([data-variant="sfeer"]),.bc-stats--balk) .bc-stats__label{font:700 var(--bc30-fs-cijferlabel)/1.4 var(--bc30-font-tekst);letter-spacing:1.5px;text-transform:uppercase;color:var(--bc30-op-donker-kop)}@media(max-width:699px){
 .bc-cm.bc30 :is(.bc-page-hero:not([data-variant="sfeer"]) .bc-stats,.bc-stats--balk){padding:20px 8px}
 .bc-cm.bc30 :is(.bc-page-hero:not([data-variant="sfeer"]),.bc-stats--balk) .bc-stats__label{letter-spacing:1px}
 .bc-cm.bc30 :is(.bc-page-hero:not([data-variant="sfeer"]),.bc-stats--balk) .bc-stats__items{grid-template-columns:1fr 1fr;row-gap:26px}
 .bc-cm.bc30 :is(.bc-page-hero:not([data-variant="sfeer"]),.bc-stats--balk) .bc-stats__num{margin-bottom:9px}
}/* === Los op de pagina zonder kop: 56px zwarte grond erboven en eronder (44 op de telefoon). Met kop of
   eyebrow is het het verhaal (onderaan dit bestand). === */.bc-cm.bc30 .bc-stats.bc-stats--balk{margin:56px auto}@media(max-width:900px){.bc-cm.bc30 .bc-stats.bc-stats--balk{margin:44px auto}}/* **accent** in een getal (duurzaamheid "7 jaar"): het woord in oranje, kleiner dan het cijfer. */.bc-cm.bc30 .bc-stats__num b{color:var(--bc30-oranje);font-size:var(--bc30-fs-kaart-foto);font-weight:900;letter-spacing:0}/* Lange getallen (meer dan zeven tekens, data-lengte="lang" uit de render) passen niet altijd in een kolom:
   kleiner getal. Een label breekt nooit af met een streepje (Bram 2026-10-03, besluitenregister), alleen op
   een spatie; op de telefoon is het label 10 (--bc30-fs-cijferlabel), zoals in het blokkenboek van 2 oktober. */.bc-cm.bc30 .bc-stats .bc-stats__num[data-lengte="lang"]{font-size:var(--bc30-fs-kaart-foto)}.bc-cm.bc30 .bc-stats--balk .bc-stats__label{hyphens:manual}@media(max-width:699px){.bc-cm.bc30 .bc-page-hero .bc-stats .bc-stats__label{hyphens:manual}}/* === Ander aantal dan vier (data-aantal): gelijke kolommen; telefoon twee kolommen. Een attribuut
   zwaarder dan de rasterregels hierboven. === */.bc-cm.bc30 .bc-stats[data-aantal] .bc-stats__items{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}@media(max-width:900px){
 .bc-cm.bc30 .bc-stats[data-aantal] .bc-stats__items{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
 .bc-cm.bc30 .bc-stats[data-aantal] .bc-stats__item:nth-child(odd){border-left:0}
 .bc-cm.bc30 .bc-stats[data-aantal] .bc-stats__item:nth-child(odd):last-child{grid-column:1/-1}
 .bc-cm.bc30 .bc-stats[data-aantal="1"] .bc-stats__items{grid-template-columns:minmax(0,1fr)}
}/* === Print: donkere cijfers op wit, een dunne lijn in plaats van de pil. === */@media print{
 .bc-cm.bc30 :is(.bc-page-hero .bc-stats,.bc-stats--balk){background:none;border-color:#ccc;color:#000}
 .bc-cm.bc30 :is(.bc-page-hero:not([data-variant="sfeer"]),.bc-stats--balk) :is(.bc-stats__num,.bc-stats__label,.bc-stats__heading){color:#000}
 .bc-cm.bc30 .bc-page-hero :is(.bc-stats__num,.bc-stats__label,.bc-stats__heading){color:#000}
}/* === Cijferlabels op de telefoon (2026-10-03, besluitenregister en review A3). Het langste woord van een label
   ("KLANTTEVREDENHEID", 111 px plus letterafstand) moet heel in zijn kolom passen: nooit afbreken met een streepje
   en nooit midden in een woord knippen, alleen op een spatie. Daarom op de telefoon een binnenmarge van 4 px per
   kolom en een krappere letterafstand (.5px, onder 375 geen); "TEVREDENHEIDSSCORE" (18 tekens) past dan op 360. Staat onderaan zodat hij de eerdere telefoonregels
   (letterafstand 1px) bij gelijke specificiteit wint. === */@media(max-width:699px){
 .bc-cm.bc30 :is(.bc-page-hero .bc-stats,.bc-stats--balk) .bc-stats__item{padding-left:4px;padding-right:4px}
 .bc-cm.bc30 :is(.bc-page-hero .bc-stats,.bc-stats--balk) .bc-stats__label{letter-spacing:.5px;overflow-wrap:normal;hyphens:manual}
}@media(max-width:374px){.bc-cm.bc30 :is(.bc-page-hero .bc-stats,.bc-stats--balk) .bc-stats__label{letter-spacing:0}}/* === Het verhaal: de losse cijferbalk met kop of eyebrow (fase B batch 5b, O20; Bram 04-10 koos richting A van
   _fase3/blokkenboek-nu/schets-b4/cijferbalk/, "nu nog te bulky; als het wat compacter kan zijn we er").
   Een paneel blijft staan terwijl je scrolt; per cijfer een eigen foto die invaagt, het getal telt op, met een
   teller en streepjes die vollopen (src/bc30/stats.js zet .is-spel). Compacter dan de schets: het paneel is lager
   (520 in plaats van 640 op de computer, 460 in plaats van 620 op de telefoon) en een cijfer kost een derde
   scherm scrollen in plaats van 70 procent (spoor = paneel + (n - 0,5) stappen; vier cijfers 1,2 scherm in
   plaats van 2,8). Eindstand (zonder JS, print, een of meer dan zes cijfers, geen foto's): alle
   cijfers als tegels naast elkaar, op de foto of zonder foto op off-white. Eén maat per cijfer, geen kapitalen
   onder de cijfers (O20: "druk door kapitalen eronder en veel verschillende groottes"). Kleuren en maten alleen
   tokens; het verloop is zwart naar transparant met de dekking via opacity (zoals het prijsblok).
   Kolommen (--kol) en verhouding van een fototegel (--tegel) per aantal en breedte: vier op de computer, twee op
   tablet en telefoon; op de telefoon een lang getal onder elkaar. === */.bc-cm.bc30 .bc-stats--verhaal{overflow:visible;padding:var(--bc30-sectie) 0;background:transparent;--kol:4;--tegel:4/5}.bc-cm.bc30 .bc-band>.bc-stats--verhaal{padding:0 0 var(--bc30-sectie)}.bc-cm.bc30 .bc-stats--verhaal .bc-stats-inner{max-width:var(--bc30-breed);margin:0 auto;padding:0 var(--bc30-gutter)}.bc-cm.bc30 .bc-stats--verhaal .bc-stats__kop{margin:0 0 32px}.bc-cm.bc30 .bc-stats--verhaal .bc-stats__eyebrow{margin:0 0 12px;font:800 var(--bc30-fs-eyebrow)/1.3 var(--bc30-font-tekst);color:var(--bc30-oranje-tekst)}.bc-cm.bc30 .bc-stats--verhaal .bc-stats__eyebrow:last-child{margin:0}.bc-cm.bc30 .bc-stats--verhaal .bc-stats__kop:not(:has(.bc-stats__heading)){margin-bottom:20px}.bc-cm.bc30 .bc-stats--verhaal .bc-stats__heading{margin:0;font:900 var(--bc30-fs-h2)/var(--bc30-lh-kop) var(--bc30-font-kop);letter-spacing:var(--bc30-ls-kop);color:var(--bc30-kop)}/* Los op de zwarte grond (een draft met eigen banden zonder band op de cijfers): de kop licht. */.bc-cm.bc30>.bc-stats--verhaal .bc-stats__eyebrow{color:var(--bc30-oranje)}.bc-cm.bc30>.bc-stats--verhaal .bc-stats__heading{color:var(--bc30-op-donker-kop)}.bc-cm.bc30 .bc-stats--verhaal:is([data-n="3"],[data-n="5"],[data-n="6"],[data-n="9"]){--kol:3;--tegel:1}.bc-cm.bc30 .bc-stats--verhaal[data-n="2"]{--kol:2;--tegel:4/3}.bc-cm.bc30 .bc-stats--verhaal[data-n="1"]{--kol:1;--tegel:21/9}/* Geen sierboog achter het paneel als de band met het verhaal begint (zoals de schets). */.bc-cm.bc30 .bc-band:has(>.bc-stats--verhaal:first-child):before{display:none}.bc-cm.bc30 .bc-stats--verhaal .bc-stats__items{display:grid;grid-template-columns:repeat(var(--kol),minmax(0,1fr));align-items:stretch;gap:var(--bc30-gap);margin:0;padding:0;list-style:none}.bc-cm.bc30 .bc-stats--verhaal .bc-stats__item{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;padding:var(--bc30-kaart-pad);border-radius:var(--bc30-r-kaart);overflow:hidden;background:var(--bc30-zwart);text-align:left}.bc-cm.bc30 .bc-stats--verhaal:not([data-fotos]) .bc-stats__item{aspect-ratio:var(--tegel)}.bc-cm.bc30 .bc-stats--verhaal .bc-stats__foto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 40%;object-position:50% 40%}/* Een foto die terugkomt (minder foto's dan cijfers): dichterbij, zoals de camera in de schets. */.bc-cm.bc30 .bc-stats--verhaal .bc-stats__item[data-herhaal] .bc-stats__foto{transform-origin:62% 34%;scale:1.3}/* Verloop onder cijfer en label: tot 44 procent vol en .9 dekking, zodat ook een licht voorwerp in de foto achter het label AA haalt (review batch 5, L13: "klanten" 2,4:1 op 390). */.bc-cm.bc30 .bc-stats--verhaal .bc-stats__item:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--bc30-zwart) 0,var(--bc30-zwart) 44%,transparent 88%);opacity:.9;pointer-events:none}.bc-cm.bc30 .bc-stats--verhaal .bc-stats__num{display:block;margin:0;font:900 var(--bc30-fs-cijfer)/1.05 var(--bc30-font-kop);letter-spacing:var(--bc30-ls-kop);color:var(--bc30-op-donker-kop);overflow-wrap:normal}.bc-cm.bc30 .bc-stats--verhaal .bc-stats__num b{font-size:1em;font-weight:900;letter-spacing:inherit;color:var(--bc30-oranje)}.bc-cm.bc30 .bc-stats--verhaal .bc-stats__getal{font-variant-numeric:tabular-nums}/* Twee regels label gereserveerd, zodat de cijfers in een rij tegels op één lijn staan. */.bc-cm.bc30 .bc-stats--verhaal .bc-stats__label{display:block;margin:8px 0 0;min-height:2.9em;font:400 var(--bc30-fs-kaarttekst)/1.45 var(--bc30-font-tekst);letter-spacing:0;text-transform:none;color:var(--bc30-op-donker-tekst);overflow-wrap:normal;hyphens:manual}.bc-cm.bc30 .bc-stats--verhaal .bc-stats__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.bc-cm.bc30 .bc-stats--verhaal .bc-stats__voortgang{display:none}/* Een getal van meer dan zeven tekens in het blok: alle cijfers een maat kleiner (één maat per rij). */.bc-cm.bc30 .bc-stats--verhaal[data-cijfers="lang"] .bc-stats__num{font-size:var(--bc30-fs-h2-paneel)}/* Zonder foto's op de pagina: off-white tegels zonder schaduw, donkere cijfers. */.bc-cm.bc30 .bc-stats--verhaal[data-fotos="0"] .bc-stats__item{justify-content:flex-start;background:var(--bc30-vlak)}.bc-cm.bc30 .bc-stats--verhaal[data-fotos="0"] .bc-stats__item:after{content:none}.bc-cm.bc30 .bc-stats--verhaal[data-fotos="0"] .bc-stats__num{color:var(--bc30-kop)}.bc-cm.bc30 .bc-stats--verhaal[data-fotos="0"] .bc-stats__num b{color:var(--bc30-oranje-tekst)}.bc-cm.bc30 .bc-stats--verhaal[data-fotos="0"] .bc-stats__label{color:var(--bc30-tekst)}@media(min-width:700px) and (max-width:999px){
 .bc-cm.bc30 .bc-stats--verhaal[data-n]{--kol:2;--tegel:4/3}
 .bc-cm.bc30 .bc-stats--verhaal:is([data-n="3"],[data-n="6"]){--kol:3;--tegel:1}
 .bc-cm.bc30 .bc-stats--verhaal[data-n="1"]{--kol:1;--tegel:16/9}
}@media(max-width:699px){
 .bc-cm.bc30 .bc-stats--verhaal[data-n]{--kol:2;--tegel:4/5}
 .bc-cm.bc30 .bc-stats--verhaal:is([data-n="1"],[data-cijfers="lang"]){--kol:1;--tegel:16/9}
 .bc-cm.bc30 .bc-stats--verhaal .bc-stats__kop{margin-bottom:24px}
 .bc-cm.bc30 .bc-stats--verhaal .bc-stats__item{padding:16px}
 .bc-cm.bc30 .bc-stats--verhaal .bc-stats__item:nth-child(odd):last-child{grid-column:1/-1}
 .bc-cm.bc30 .bc-stats--verhaal:not([data-fotos]) .bc-stats__item:nth-child(odd):last-child{aspect-ratio:16/9}
 .bc-cm.bc30 .bc-stats--verhaal[data-cijfers="lang"] .bc-stats__num{font-size:var(--bc30-fs-cijfer)}
}/* Het spel (stats.js, alleen op een scherm): het spoor is het paneel plus
   (n - 0,5) stappen hoog, het paneel plakt in het midden van het scherm. --n zet stats.js. Maten in svh (de kleinste
   schermhoogte, zodat de adresbalk van een telefoon niets verschuift); stats.js start het spel alleen als de
   browser svh kent. */@media screen{
 .bc-cm.bc30 .bc-stats--verhaal{--paneel-h:clamp(400px,58svh,520px);--stap:34svh}
 .bc-cm.bc30 .bc-stats--verhaal.is-spel .bc-stats__spoor{height:calc(var(--paneel-h) + (var(--n,4) - .5) * var(--stap))}
 .bc-cm.bc30 .bc-stats--verhaal.is-spel .bc-stats__paneel{position:sticky;top:max(16px,calc((100svh - var(--paneel-h)) / 2));isolation:isolate;height:var(--paneel-h);border-radius:var(--bc30-r-band);overflow:hidden;background:var(--bc30-zwart);box-shadow:var(--bc30-schaduw)}
 .bc-cm.bc30 .bc-stats--verhaal.is-spel .bc-stats__paneel:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--bc30-zwart) 0,var(--bc30-zwart) 30%,transparent 78%),linear-gradient(0deg,var(--bc30-zwart) 0,transparent 32%);opacity:.86;pointer-events:none}
 .bc-cm.bc30 .bc-stats--verhaal.is-spel .bc-stats__items{position:absolute;inset:0;display:block}
 .bc-cm.bc30 .bc-stats--verhaal.is-spel .bc-stats__item{position:absolute;inset:0;isolation:auto;aspect-ratio:auto;justify-content:center;padding:var(--bc30-paneel-pad) var(--bc30-paneel-pad) 80px;border-radius:0;overflow:visible;background:none}
 .bc-cm.bc30 .bc-stats--verhaal.is-spel .bc-stats__item:after{content:none}
 .bc-cm.bc30 .bc-stats--verhaal.is-spel .bc-stats__foto{z-index:0;opacity:0;transform:scale(1.06);transition:opacity var(--bc30-duur-beeld) var(--bc30-ease),transform var(--bc30-duur-traag) var(--bc30-ease)}
 .bc-cm.bc30 .bc-stats--verhaal.is-spel .bc-stats__item.is-aan .bc-stats__foto{opacity:1;transform:none}
 .bc-cm.bc30 .bc-stats--verhaal.is-spel .bc-stats__tekst{position:relative;z-index:2;max-width:620px;opacity:0;translate:0 var(--bc30-in-beeld);transition:opacity var(--bc30-duur-in) var(--bc30-ease),translate var(--bc30-duur-in) var(--bc30-ease)}
 .bc-cm.bc30 .bc-stats--verhaal.is-spel .bc-stats__item.is-aan .bc-stats__tekst{opacity:1;translate:0 0;transition-delay:var(--bc30-duur-snel)}
 .bc-cm.bc30 .bc-stats--verhaal.is-spel.is-wacht .bc-stats__item.is-aan .bc-stats__tekst{opacity:0;translate:0 var(--bc30-in-beeld)}
 .bc-cm.bc30 .bc-stats--verhaal.is-spel .bc-stats__num{font-size:var(--bc30-fs-portret);line-height:1}
 .bc-cm.bc30 .bc-stats--verhaal.is-spel .bc-stats__num[data-maat="lang"]{font-size:var(--bc30-fs-statement)}
 .bc-cm.bc30 .bc-stats--verhaal.is-spel .bc-stats__label{max-width:440px;margin-top:16px;min-height:0;font-size:var(--bc30-fs-lead)}
 .bc-cm.bc30 .bc-stats--verhaal.is-spel .bc-stats__voortgang{position:absolute;z-index:2;left:var(--bc30-paneel-pad);right:var(--bc30-paneel-pad);bottom:32px;display:flex;align-items:center;gap:16px}
 .bc-cm.bc30 .bc-stats--verhaal .bc-stats__teller{margin:0;font:800 var(--bc30-fs-eyebrow)/1 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--bc30-op-donker-zacht)}
 .bc-cm.bc30 .bc-stats--verhaal .bc-stats__streepjes{display:flex;flex:1;gap:8px}
 .bc-cm.bc30 .bc-stats--verhaal .bc-stats__streepjes i{position:relative;flex:1;height:3px;border-radius:var(--bc30-r-pil);overflow:hidden}
 .bc-cm.bc30 .bc-stats--verhaal .bc-stats__streepjes i:before,.bc-cm.bc30 .bc-stats--verhaal .bc-stats__streepjes i:after{content:"";position:absolute;inset:0}
 .bc-cm.bc30 .bc-stats--verhaal .bc-stats__streepjes i:before{background:var(--bc30-op-donker-kop);opacity:.25}
 .bc-cm.bc30 .bc-stats--verhaal .bc-stats__streepjes i:after{background:var(--bc30-oranje);transform:scaleX(var(--v,0));transform-origin:0 50%}
}/* Tablet en telefoon: de tekst onderin het paneel, het verloop van onderen. */@media screen and (max-width:999px){
 .bc-cm.bc30 .bc-stats--verhaal{--paneel-h:clamp(400px,50svh,520px);--stap:30svh}
 .bc-cm.bc30 .bc-stats--verhaal.is-spel .bc-stats__paneel:after{background:linear-gradient(0deg,var(--bc30-zwart) 0,var(--bc30-zwart) 34%,transparent 80%);opacity:.88}
 .bc-cm.bc30 .bc-stats--verhaal.is-spel .bc-stats__item{justify-content:flex-end}
}@media screen and (max-width:699px){
 .bc-cm.bc30 .bc-stats--verhaal{--paneel-h:clamp(360px,60svh,460px)}
 .bc-cm.bc30 .bc-stats--verhaal.is-spel .bc-stats__item{padding:var(--bc30-paneel-pad) var(--bc30-paneel-pad) 64px}
 .bc-cm.bc30 .bc-stats--verhaal.is-spel .bc-stats__label{margin-top:12px;font-size:var(--bc30-fs-tekst)}
 .bc-cm.bc30 .bc-stats--verhaal.is-spel .bc-stats__voortgang{bottom:24px;gap:12px}
}/* Print: alle cijfers in twee kolommen, zonder foto's en verloop, donker op wit. */@media print{
 .bc-cm.bc30 .bc-stats--verhaal[data-n]{--kol:2;--tegel:auto}
 .bc-cm.bc30 .bc-stats--verhaal .bc-stats__item{background:none;border:1px solid var(--bc30-lijn);-moz-column-break-inside:avoid;break-inside:avoid}
 .bc-cm.bc30 .bc-stats--verhaal .bc-stats__foto,.bc-cm.bc30 .bc-stats--verhaal .bc-stats__item:after{display:none}
 .bc-cm.bc30 .bc-stats--verhaal :is(.bc-stats__num,.bc-stats__label,.bc-stats__heading){color:var(--bc30-kop)}
}/* BC 3.0: TextImage (basis profile), fase 3 run 3.
   Alles onder de versiemarker .bc-cm.bc30 (zie fundament.css). Bron: de 3.0-preview (tag
   bc30-vastgezet-2026-09-30), css/components/text-image.css en de TextImage-regels uit css/base.css,
   geport met scripts/port-bc30-css.mjs en daarna met de hand omgezet naar de brand-bc-DOM
   (blocks/profile/render.mjs). De 2.0-CSS (components/profile.css) blijft de onderlaag, zoals in de
   preview; specificiteit gelijk aan de preview-regel, nooit hoger.

   Typografie van de tekstkolom: die van de vijf bronpagina's (champagne, koffie, matcha, smoothies,
   zuurstof). In de preview kwam die uit de bronlock (div.source-fragment om elk element, regels A1,
   A2, A3, A5, A14 in base.css); brand-bc heeft geen bronfragmenten, dus hier staat dezelfde uitkomst
   op de elementen zelf: kop 42px, alinea 16/1,7, 20px tussen twee delen, 26px onder de kop, een
   tussenkop 24px. Cocktails week in de preview af (kop 48px, alinea 16/26,4, geen bronlock); een rol
   heeft één typografie (advies analyse B: 42px, vijf van de zes pagina's).
   Stijlbibliotheek (ronde 2, S1d, 2026-10-02): kop --bc30-fs-h2 (40, telefoon 30), tekst --bc30-fs-tekst,
   tussenkoppen --bc30-fs-kaart (22 en 24 werden 22), citaat --bc30-fs-citaat (19 werd 20); vinkjes groen (keuze 2B);
   kleine oranje tekst en links op licht --bc30-oranje-tekst (6B); menukaart, tegels en vraagkaarten zijn vlakken
   zonder schaduw (1B), de kop in de menukaart --bc30-fs-h2-paneel; beeld en kaarten --bc30-r-kaart. *//* === Sectie en wrap (preview base.css: transparant, de band geeft de grond) === */.bc-cm.bc30 .bc-profile{background:transparent;clip-path:none;margin:0;padding:0 0 80px}.bc-cm.bc30 .bc-profile__wrap{max-width:var(--bc30-breed);padding-left:32px;padding-right:32px;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:80px;align-items:center}.bc-cm.bc30 .bc-profile__img-frame{border-radius:var(--bc30-r-kaart);aspect-ratio:1;transform:none}.bc-cm.bc30 .bc-profile__img-frame img{-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;width:100%;height:100%}@media(max-width:1100px){.bc-cm.bc30 .bc-profile__wrap{gap:40px}}/* Eén eigenaar per effect (plan Architectuur 11): de 2.0-reveal gaf media, tekstkolom en duo een
   CSS-transitie op opacity en transform. In 3.0 staat bc-visible vast en doet src/bc30/motion.js de
   entree (data-bc-in); zonder deze regel vervaagt de tekstkolom mee met de wachtstand van motion.js
   en loopt de transitie na afloop van de entree nog even door. */.bc-cm.bc30 :is(.bc-profile__media,.bc-profile__text){transition:none}@media(max-width:640px){
 .bc-cm.bc30 .bc-profile__wrap{padding-left:24px;padding-right:24px;display:flex;flex-direction:column;gap:26px}
 .bc-cm.bc30 .bc-profile{padding-bottom:55px}
 .bc-cm.bc30 .bc-profile__text{order:0}
 .bc-cm.bc30 .bc-profile__media{order:1;width:100%}
}/* Ruimte (review batch 7): tot 960 zet de 2.0-onderlaag padding:80px 0 op elke profile (components/profile.css, met
   drie :not() 0,5,0, dus zwaarder dan de regels hierboven). Daardoor gaven band en sectie allebei ruimte boven (160 op
   700, 136 op 390, elk ander blok 80 en 56). Hier op 0,5,0 en na de 2.0-regel: boven 0 zoals op de computer (de band of
   de sectie ervoor geeft de ruimte), onder op de telefoon de sectieruimte van 3.0 (55, tegels en menukaart 56). Voor de
   uitleg en de band vlak (home) hieronder, zodat die met dezelfde zwaarte winnen. */@media(max-width:960px){.bc-cm.bc30 .bc-profile.bc-visible[data-component]{padding-top:0}}@media(max-width:699px){
 .bc-cm.bc30 .bc-profile.bc-visible[data-component]{padding-bottom:55px}
 .bc-cm.bc30 .bc-profile.bc-visible:is([data-variant~="tegels"],[data-variant~="menukaart"]){padding-bottom:var(--bc30-sectie)}
}/* === Tekstkolom === *//* Geen lettertype op de kolom zelf (zoals de preview): de regelhoogte van de kolom bepaalt anders
   de regel waarop de inline-knoppen staan. Elk tekstelement krijgt zijn letter hieronder. */.bc-cm.bc30 .bc-profile__text{min-width:0}.bc-cm.bc30 .bc-profile__eyebrow{margin:0 0 20px;color:var(--bc30-oranje-tekst)}.bc-cm.bc30 .bc-profile__text>.bc-profile__title{font:900 var(--bc30-fs-h2)/1.18 var(--bc30-font-kop);letter-spacing:-.6px;color:inherit;margin:0 0 26px}.bc-cm.bc30 .bc-profile__text>p:not([class*="bc-"]){font:400 var(--bc30-fs-tekst)/1.7 var(--bc30-font-tekst);max-width:var(--bc30-lees);color:inherit;margin:0 0 20px}/* Tussenkoppen. `### ` wordt een echte h3 (SEO-besluit fase 3) in de stijl die de preview de
   subkop gaf (zuurstof, 2.0-klasse bc-profile__sub: 22px, 30px erboven, 20px eronder). `#### ` wordt
   een h4 als de tweede kop in een tekstkolom van de preview (besluit 4: 24px, 26px erboven, 12px
   eronder; smoothies "Lees ook meer over"). */.bc-cm.bc30 .bc-profile__text>h3.bc-profile__sub{font:900 var(--bc30-fs-kaart)/1.25 var(--bc30-font-kop);letter-spacing:normal;color:var(--bc-text);margin:30px 0 20px}.bc-cm.bc30 .bc-profile__text>h4.bc-profile__sub{font:900 var(--bc30-fs-kaart)/1.3 var(--bc30-font-kop);letter-spacing:-.3px;color:inherit;margin:26px 0 12px}/* Script-accent midden in de kop (koffie "Welke soort koffie leveren wij?"): loopt mee in de regel. */.bc-cm.bc30 .bc-profile__title .bc-script--midden{display:inline;transform:none;margin-left:0;line-height:.9}/* Een kort woord met een streepje breekt in de kop niet op dat streepje (render.mjs heleWoorden, review batch 7). */.bc-cm.bc30 .bc-profile__title .bc-heel{white-space:nowrap}.bc30:where(.bc-cm) .bc-profile__text>:is(ul,ol):not([class*="bc-"]){margin:0 0 20px;padding-left:22px;font:400 var(--bc30-fs-tekst)/1.7 var(--bc30-font-tekst);max-width:var(--bc30-lees)}.bc30:where(.bc-cm) .bc-profile__text>:is(ul,ol):not([class*="bc-"])>li{margin:0 0 6px}.bc-cm.bc30 .bc-profile__text>:is(ul,ol)>li a,.bc-cm.bc30 .bc-profile__text p a{color:var(--bc30-oranje-tekst)}.bc-cm.bc30 .bc-profile__text>:is(ul,ol)>li a{text-decoration:underline;text-decoration-thickness:auto;text-underline-offset:4px}.bc-cm.bc30 .bc-profile__text>p:not([class*="bc-"]):is(:last-child,:has(+.bc-profile__fold)),
.bc-cm.bc30 .bc-profile__text>:is(ul,ol):not([class*="bc-"]):is(:last-child,:has(+.bc-profile__fold)){margin-bottom:0}@media(max-width:699px){.bc-cm.bc30 .bc-profile__text>.bc-profile__title{line-height:1.2;margin-bottom:22px}}/* Knoppen (preview A5): de eerste oranje gevuld, de tweede oranje omlijnd, onder elkaar; op de
   telefoon over de volle breedte. Hover oranje (knopregels, besluit Bram 2026-09-21). */.bc-cm.bc30 .bc-profile__ctas{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin:20px 0 0}.bc-cm.bc30 .bc-profile__ctas>a{display:inline-flex;align-items:center;justify-content:center;background:var(--bc30-oranje);color:var(--bc-white);border:0;border-radius:var(--bc30-r-pil);padding:14px 24px;min-height:46px;font:800 var(--bc30-fs-knop)/1.25 var(--bc30-font-tekst);text-align:center;text-decoration:none;box-shadow:var(--bc30-gloed);transition:background var(--bc30-duur-snel) var(--bc30-ease);transform:none}.bc-cm.bc30 .bc-profile__ctas>a:hover{background:var(--bc30-oranje-hover);transform:none}.bc-cm.bc30 .bc-profile__ctas>a+a{background:transparent;color:var(--bc30-oranje-tekst);box-shadow:inset 0 0 0 2px var(--bc30-oranje)}.bc-cm.bc30 .bc-profile__ctas>a+a:hover{background:var(--bc30-oranje);color:var(--bc30-op-donker-kop)}@media(max-width:699px){.bc-cm.bc30 .bc-profile__ctas{align-items:stretch}.bc-cm.bc30 .bc-profile__ctas>a{width:100%}}/* Vinkjes (feedback Bram 2026-09-30, 8 en 9): bolletje met wit vinkje vanaf het begin; het item staat
   altijd vol (ook zonder JS), alleen het bolletje zwelt nog kort aan (2.0 is-filled). Groen sinds keuze 2B
   (2026-10-02): groen is wat erbij zit, oranje de actie. */.bc-cm.bc30 .bc-profile__list li{opacity:1}.bc-cm.bc30 .bc-profile__list li .bc-profile__dot{background:var(--bc30-groen);border-color:var(--bc30-groen)}.bc-cm.bc30 .bc-profile__list li.is-filled .bc-profile__dot{background:var(--bc30-groen);border-color:var(--bc30-groen);box-shadow:none}.bc-cm.bc30 .bc-profile__list li .bc-profile__dot path{stroke:#fff;stroke-dashoffset:0}/* Citaat (preview A4): oranje streep links, serif. */.bc-cm.bc30 .bc-profile__quote{margin:26px 0 0;padding:2px 0 2px 20px;border-left:3px solid var(--bc30-oranje);font:400 var(--bc30-fs-tekst)/1.7 var(--bc30-font-tekst);font-style:normal;color:inherit}.bc-cm.bc30 .bc-profile__quote>p{font:700 var(--bc30-fs-citaat)/1.5 var(--bc30-font-kop);color:inherit;margin:0 0 8px}/* Keurmerken (duurzaamheid, review batch 7): de 2.0-maat van 76 px maakte de tekst op het keurmerk 5 px hoog. 128 px
   (tekst rond 9 px hoog); op de telefoon drie gelijke naast elkaar in de kolom, hoogstens 128. */.bc-cm.bc30 .bc-profile__badges{gap:var(--bc30-gap)}.bc-cm.bc30 .bc-profile__badges img{width:128px}@media(max-width:699px){.bc-cm.bc30 .bc-profile__badges img{width:calc((100% - 2 * var(--bc30-gap)) / 3);max-width:128px}}/* Aliassen (text-image, prose, menu-list, specs, statement, outline-text-image) dragen hun eigen
   rootklasse erbij voor class-map en live-import. Wat hun 2.0-CSS op die wortel zet (achtergrond,
   padding) valt onder de sectieregel hierboven; alleen de schuine cremeband van het 2.0-ritme op
   `.bc-specs` (base/rhythm.css, ::before) moet expliciet uit. */.bc-cm.bc30 .bc-profile.bc-specs::before{content:none}/* === Varianten === *//* landscape (standaard): liggend beeld. Onder dezelfde 80 als elke sectie (review batch 7: was 100). */.bc-cm.bc30 .bc-profile[data-variant~="landscape"] .bc-profile__media{min-width:0}.bc-cm.bc30 .bc-profile[data-variant~="landscape"] .bc-profile__img-frame{aspect-ratio:1.12;width:100%}/* flip: beeld rechts, tekst links. */.bc-cm.bc30 .bc-profile[data-variant~="flip"] .bc-profile__img-frame{aspect-ratio:1.22}.bc-cm.bc30 .bc-profile[data-variant~="flip"] .bc-profile__text{grid-column:1;grid-row:1}.bc-cm.bc30 .bc-profile[data-variant~="flip"] .bc-profile__media{grid-column:2;grid-row:1;margin-bottom:24px}/* layers: productbeeld met oranje swoosh over de foto (koffie). */.bc-cm.bc30 .bc-profile[data-variant~="layers"] .bc-profile__media{isolation:isolate;position:relative}.bc-cm.bc30 .bc-profile[data-variant~="layers"] .bc-profile__media-swoosh{position:absolute;right:-72px;bottom:-65px;width:420px;height:270px;background:var(--wpr-bg-2ebab6b9-ed60-49db-9398-14bda0199731) center/contain no-repeat;transform:rotate(-27deg);z-index:1;pointer-events:none}.bc-cm.bc30 .bc-profile[data-variant~="layers"] .bc-profile__media-pack{position:absolute;right:-15px;bottom:-35px;width:165px;height:310px;overflow:hidden;transform:rotate(7deg);filter:drop-shadow(0 16px 16px #24242233);pointer-events:none;z-index:2}.bc-cm.bc30 .bc-profile[data-variant~="layers"] .bc-profile__media-pack img{position:absolute;max-width:none;width:auto;height:148%;left:50%;top:-40%;transform:translateX(-50%);-o-object-fit:contain;object-fit:contain;border-radius:0;box-shadow:none}@media(min-width:700px) and (max-width:1100px){
 .bc-cm.bc30 .bc-profile[data-variant~="layers"] .bc-profile__media-swoosh{width:270px;height:190px;right:-50px;bottom:-40px}
 .bc-cm.bc30 .bc-profile[data-variant~="layers"] .bc-profile__media-pack{width:140px;height:263px;right:-12px;bottom:-35px}
}@media(max-width:699px){
 .bc-cm.bc30 .bc-profile[data-variant~="landscape"] .bc-profile__wrap{display:flex;flex-direction:column;gap:26px;padding-inline:24px}
 .bc-cm.bc30 .bc-profile[data-variant~="landscape"] .bc-profile__text{order:0}
 .bc-cm.bc30 .bc-profile[data-variant~="landscape"] .bc-profile__media{order:1;width:100%}
 .bc-cm.bc30 .bc-profile[data-variant~="landscape"] .bc-profile__img-frame{order:1;width:100%;aspect-ratio:1.15}
 .bc-cm.bc30 .bc-profile[data-variant~="flip"] .bc-profile__media{margin-bottom:35px}
 .bc-cm.bc30 .bc-profile[data-variant~="layers"] .bc-profile__media-swoosh{width:230px;height:155px;right:-30px;bottom:-38px}
 .bc-cm.bc30 .bc-profile[data-variant~="layers"] .bc-profile__media-pack{width:110px;height:205px;right:-6px;bottom:-32px}
}/* no-media: tekst over de volle breedte, alinea's leesbaar tot 44em. */.bc-cm.bc30 .bc-profile[data-variant~="no-media"] .bc-profile__wrap{display:block;gap:0}.bc-cm.bc30 .bc-profile[data-variant~="no-media"] .bc-profile__media{display:none}.bc-cm.bc30 .bc-profile[data-variant~="no-media"] .bc-profile__text>p{max-width:44em}/* O27 (Bram 03-10): gewone tekst zonder beeld (geen tegels of menukaart) als smalle kolom in het midden
   van de pagina; kop en tekst links binnen de kolom. */.bc-cm.bc30 .bc-profile[data-variant~="no-media"]:where(:not([data-variant~="tegels"],[data-variant~="menukaart"])) .bc-profile__wrap{box-sizing:content-box;max-width:var(--bc30-tekstkolom);margin-left:auto;margin-right:auto}.bc-cm.bc30 .bc-profile[data-variant~="no-media"]:where(:not([data-variant~="tegels"],[data-variant~="menukaart"])) .bc-profile__text{max-width:none}.bc-cm.bc30 .bc-profile[data-variant~="no-media"]:where(:not([data-variant~="tegels"],[data-variant~="menukaart"])) .bc-profile__text>p{max-width:none}/* Geneste fotokaart (ServiceGrid) in een tekstkolom zonder beeld: breedte van een mediakolom, en
   ruimte eronder gelijk aan de inrijafstand van de kaart (preview Z1 en Z5). */.bc-cm.bc30 .bc-profile[data-variant~="no-media"] .bc-profile__text>.bc-concept-grid__card{max-width:600px}.bc-cm.bc30 .bc-profile__text>.bc-concept-grid__card+*{margin-top:46px}@media(max-width:699px){.bc-cm.bc30 .bc-profile__text>.bc-concept-grid__card+*{margin-top:28px}}/* portrait (nieuw in 3.0): staande foto 4:5 in een smallere kolom, tegen de tekst aan, zodat een
   staand beeld de sectie niet domineert (2.0-les, Bram 2026-07-24). */.bc-cm.bc30 .bc-profile[data-variant~="portrait"] .bc-profile__wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.08fr)}.bc-cm.bc30 .bc-profile[data-variant~="portrait"][data-variant~="flip"] .bc-profile__wrap{grid-template-columns:minmax(0,1.08fr) minmax(0,.8fr)}.bc-cm.bc30 .bc-profile[data-variant~="portrait"] .bc-profile__media{min-width:0}.bc-cm.bc30 .bc-profile[data-variant~="portrait"] .bc-profile__img-frame{aspect-ratio:4/5;width:100%;max-width:460px;margin-left:auto}.bc-cm.bc30 .bc-profile[data-variant~="portrait"][data-variant~="flip"] .bc-profile__img-frame{margin-left:0;margin-right:auto}@media(max-width:699px){
 .bc-cm.bc30 .bc-profile[data-variant~="portrait"] .bc-profile__wrap{display:flex;flex-direction:column;gap:26px;padding-inline:24px}
 .bc-cm.bc30 .bc-profile[data-variant~="portrait"] .bc-profile__text{order:0}
 .bc-cm.bc30 .bc-profile[data-variant~="portrait"] .bc-profile__media{order:1;width:100%}
 .bc-cm.bc30 .bc-profile[data-variant~="portrait"] .bc-profile__img-frame{max-width:none;margin:0}
}/* Kolommenlijst (menuItems buiten de variant menukaart): vanaf 700px twee kolommen. */.bc-cm.bc30 .bc-profile__columns{display:grid;grid-template-columns:minmax(0,1fr);gap:0 48px}@media(min-width:700px){.bc-cm.bc30 .bc-profile__columns{grid-template-columns:repeat(2,minmax(0,1fr))}}/* In menukaart en tegels staat het accent zonder inspringing (zoals de 2.0-koppen van menu-list en
   specs, die de preview daar droeg). */.bc-cm.bc30 .bc-profile:is([data-variant~="menukaart"],[data-variant~="tegels"]) .bc-profile__title .bc-script{margin-left:0}/* tegels en checklist als één ontwerp (O23 en O28 van 02-10, richting B gekozen op 04-10; specs is de alias):
   geen vakjes en geen schaduwkaders, maar één rustige kolom (groen vinkje, tekst, dunne lijnen). Met een foto staat
   die staand links (vanaf 700px), kop en lijst rechts; op de telefoon kop, lage fotostrook van 200px, lijst.
   Zonder foto de kop links (plakt mee vanaf 1000px) en de lijst rechts; op tablet en telefoon onder elkaar.
   DOM: wrap > text (kop) + media (alleen met foto) + lijst (render.mjs, renderTegels). */.bc-cm.bc30 .bc-profile[data-variant~="tegels"]{padding-bottom:96px}.bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__wrap{display:block}.bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__text{max-width:none;margin:0 0 24px}.bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__text>.bc-profile__title{margin:0}.bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__text>.bc-profile__title+*{margin-top:20px}.bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__text>:last-child{margin-bottom:0}.bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__media{margin:0 0 24px}.bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__img-frame{position:relative;overflow:hidden;aspect-ratio:4/5;width:100%;box-shadow:var(--bc30-schaduw-kaart)}.bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__img-frame img{display:block;-o-object-fit:cover;object-fit:cover}.bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__list{display:block;list-style:none;margin:0;padding:0;border-bottom:1px solid var(--bc30-lijn)}.bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:16px;align-items:start;margin:0;padding:16px 0;border:0;border-top:1px solid var(--bc30-lijn);background:none;box-shadow:none;font:400 var(--bc30-fs-tekst)/1.55 var(--bc30-font-tekst);color:var(--bc30-tekst)}.bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__list li .bc-profile__dot{position:static;width:24px;height:24px;border:0;transform:none}.bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__list li .bc-profile__dot svg{width:14px;height:14px}.bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__punt{min-width:0;overflow-wrap:break-word}.bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__punt :is(b,strong){font-weight:800;color:var(--bc30-kop)}.bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__punt a{color:var(--bc30-oranje-tekst);text-decoration:underline;text-underline-offset:4px}.bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__punt a:hover{color:var(--bc30-oranje-hover)}@media(min-width:700px){
 .bc-cm.bc30 .bc-profile[data-variant~="tegels"]:not([data-variant~="no-media"]) .bc-profile__wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"foto kop" "foto lijst";grid-template-rows:auto 1fr;-moz-column-gap:var(--bc30-kolom);column-gap:var(--bc30-kolom);row-gap:0;align-items:start}
 .bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__text{grid-area:kop;align-self:end}
 .bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__media{grid-area:foto;align-self:center;margin:0}
 .bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__lijst{grid-area:lijst;min-width:0}
}/* Tablet: de lijst is hier veel hoger dan de foto, dus de foto plakt mee (zoals het teamverhaal, B 04-10). */@media(min-width:700px) and (max-width:999px){
 .bc-cm.bc30 .bc-profile[data-variant~="tegels"]:not([data-variant~="no-media"]) .bc-profile__wrap{-moz-column-gap:var(--bc30-gap);column-gap:var(--bc30-gap)}
 .bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__media{align-self:start;position:sticky;top:120px}
}@media(min-width:1000px){
 .bc-cm.bc30 .bc-profile[data-variant~="tegels"][data-variant~="no-media"] .bc-profile__wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"kop lijst";-moz-column-gap:var(--bc30-kolom);column-gap:var(--bc30-kolom);align-items:start}
 .bc-cm.bc30 .bc-profile[data-variant~="tegels"][data-variant~="no-media"] .bc-profile__text{position:sticky;top:120px;align-self:start;margin:0}
}@media(max-width:699px){
 .bc-cm.bc30 .bc-profile[data-variant~="tegels"]{padding-bottom:56px}
 .bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__wrap{display:block;padding-inline:24px}
 .bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__text{margin-bottom:20px}
 .bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__media{margin-bottom:20px}
 .bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__img-frame{aspect-ratio:auto;height:200px}
 .bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__img-frame[data-focus="boven"] img{-o-object-position:50% 20%;object-position:50% 20%}
 .bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__img-frame[data-focus="onder"] img{-o-object-position:50% 80%;object-position:50% 80%}
 .bc-cm.bc30 .bc-profile[data-variant~="tegels"] .bc-profile__list li{grid-template-columns:24px minmax(0,1fr);gap:12px;padding:12px 0;font-size:var(--bc30-fs-kaarttekst)}
}/* uitleg (champagne, feedback Bram 2026-09-29, 10 en 16): kolommen tekst zonder beeld, vanaf 1000px
   naast elkaar. Elke kolom is een sectie met data-variant="text". Specificiteit 0,5,0 zoals de preview:
   de 2.0-regel `.bc-cm .bc-profile:not(...):not(...):not(...)` (80px onder 960px) weegt anders zwaarder. */.bc-cm.bc30 .bc-profile-uitleg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;max-width:1236px;width:calc(100% - 64px);margin:0 auto;padding:24px 0 96px}.bc-cm.bc30 .bc-profile-uitleg>.bc-profile[data-variant~="text"]{padding:0}.bc-cm.bc30 .bc-profile[data-variant~="text"] .bc-profile__media{display:none}.bc-cm.bc30 .bc-profile[data-variant~="text"] .bc-profile__wrap{display:block;max-width:none;width:auto;margin:0;padding:0}.bc-cm.bc30 .bc-profile[data-variant~="text"] .bc-profile__text{max-width:none;padding:0}.bc-cm.bc30 .bc-profile[data-variant~="text"] .bc-profile__text>:is(h2,h3){font-size:var(--bc30-fs-kaart-foto);line-height:1.2;margin:0 0 14px}.bc-cm.bc30 .bc-profile[data-variant~="text"] .bc-profile__text>p:not([class*="bc-"]){font-size:var(--bc30-fs-kaarttekst);line-height:1.7;max-width:calc(var(--bc30-lees) * 15 / 16)}/* leesbreedte bij kaarttekst 15 in plaats van tekst 16: ook rond 75 tekens *//* De knoppen van de kolommen samen onder de kolommen (render.mjs, review batch 7). */.bc-cm.bc30 .bc-profile-uitleg>.bc-profile__ctas{grid-column:1/-1;margin:0}@media(max-width:999px){.bc-cm.bc30 .bc-profile-uitleg{grid-template-columns:1fr;gap:36px;padding-bottom:72px}}@media(max-width:699px){.bc-cm.bc30 .bc-profile-uitleg{width:calc(100% - 48px);gap:32px}}/* === Inklappen op de telefoon (mobiel voorstel 5, besluit Bram 2026-09-30). Pas als
   src/bc30/mobiel.js `is-foldbaar` zet: de kop blijft, van het eerste deel na de kop twee regels die
   uitvagen, de rest dicht tot de knop. Alles blijft in de HTML (SEO). Boven 700px geen knop; bij
   printen (ook op een telefoon) altijd alles open, daarom `screen`. === */.bc-cm.bc30 .bc-profile__fold{display:none}@media screen and (max-width:699px){
 .bc-cm.bc30 .bc-profile.is-foldbaar:not(.is-open) .bc-profile__text>:not(.bc-profile__eyebrow,.bc-profile__title,.bc-profile__fold,.bc-profile__title+*,.bc-profile__ctas){display:none}
 /* 81.6px = 5.1em van de 16px-bronwrapper waarop de preview dit zette (drie regels bij 16/1,7). */
 .bc-cm.bc30 .bc-profile.is-foldbaar:not(.is-open) .bc-profile__text>.bc-profile__title+*{display:block;max-height:81.6px;overflow:hidden;margin-bottom:0!important;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
 /* Het zichtbare label (span) draagt de maat en de chevron, zodat hij valt waar in de preview de
    knop viel; het andere label staat op hidden (mobiel.js wisselt ze). */
 .bc-cm.bc30 .bc-profile.is-foldbaar .bc-profile__fold{display:inline-flex;background:none;border:0;padding:0;margin:0;color:var(--bc30-oranje-tekst);font:700 var(--bc30-fs-knop)/1.4 var(--bc30-font-tekst);cursor:pointer}
 .bc-cm.bc30 .bc-profile.is-foldbaar .bc-profile__fold>span:not([hidden]){display:inline-flex;align-items:center;gap:8px;padding-top:8px}
 .bc-cm.bc30 .bc-profile.is-foldbaar .bc-profile__fold>span:after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--bc30-duur-snel) var(--bc30-ease)}
 .bc-cm.bc30 .bc-profile.is-open .bc-profile__fold>span:after{transform:rotate(-135deg)}
}/* Citaat uit de tekst (O29, Bram 03-10): een zin uit de tekst als groot citaat, met de markeerstift (9d1)
   onder elke regel in plaats van een streep links. Eén per pagina (vlag _pq uit render-blocks.mjs). */.bc-cm.bc30 .bc-profile__pq{margin:30px 0;padding:0;max-width:32em}.bc-cm.bc30 .bc-profile__pq blockquote{margin:0;padding:0;border:0;background:none}.bc-cm.bc30 .bc-profile__pq p{font:700 var(--bc30-fs-citaat)/1.6 var(--bc30-font-kop);letter-spacing:-.2px;color:var(--bc30-kop);margin:0}.bc-cm.bc30 .bc-profile__pq .bc-mark{-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:.1em}@media(max-width:699px){.bc-cm.bc30 .bc-profile__pq{margin:24px 0}}/* === Menukaart (variant menukaart; fase B batch 4, O22 en O25, Bram 2026-10-04 richting C): Sara's kaart uit de
   offerte (blocks/profile/menukaart.mjs). Kop en tekst links, de foto van de drankjes (veld image) over de volle
   breedte eronder en de kaart schuin rechts, die --mk-dip de foto in valt; zonder foto staat de kaart naast de
   tekst. Per concept Sara's ontwerp (data-ontwerp): smoothies licht en gecentreerd met de boog linksonder,
   cocktails donker met de boog linksboven, koffie licht met de regels links in twee kolommen en de boog
   rechtsonder. Boog en logo uit haar Illustrator-bestanden (assets/menukaart-*). Beweging: foto en kaart via
   motion.js (data-bc-in="beeld"); de draaiing staat vast (rotate, los van translate en scale).
   De sectie knipt niet (2.0 zet overflow:hidden op elke profile): de kaart is meestal het hoogste deel, dus zijn
   bovenrand ligt op de bovenrand van de sectie, en de schuine hoek (zo'n 12 px) en de schaduw steken daarboven uit,
   in de ruimte onder de vorige sectie of de bovenmarge van de band. Met hidden werd die hoek recht afgeknipt (Bram
   04-10, op de computer bij alle drie de kaarten). Horizontaal knipt .bc-cm.bc30 al. === */.bc-cm.bc30 .bc-profile[data-variant~="menukaart"]{--mk-kaart:440px;--mk-foto:520px;--mk-dip:170px;--mk-draai:3.5deg;padding-bottom:96px;overflow:visible}.bc-cm.bc30 .bc-profile[data-variant~="menukaart"] .bc-profile__wrap{display:grid;grid-template-columns:minmax(0,1fr) var(--mk-kaart);grid-template-rows:auto auto;-moz-column-gap:96px;column-gap:96px;row-gap:0;align-items:center;max-width:var(--bc30-breed);margin:0 auto}.bc-cm.bc30 .bc-profile[data-variant~="menukaart"] .bc-profile__text{grid-column:1;grid-row:1;align-self:center;max-width:34em;padding:24px 0 48px}.bc-cm.bc30 .bc-profile[data-variant~="menukaart"] .bc-profile__media{display:block;grid-column:1/-1;grid-row:2;min-width:0}.bc-cm.bc30 .bc-profile[data-variant~="menukaart"] .bc-profile__img-frame{aspect-ratio:auto;height:var(--mk-foto);border-radius:var(--bc30-r-kaart);overflow:hidden}.bc-cm.bc30 .bc-profile[data-variant~="menukaart"] .bc-profile__kaart{grid-column:2;grid-row:1/3;align-self:end;margin-bottom:calc(var(--mk-foto) - var(--mk-dip));z-index:2}.bc-cm.bc30 .bc-profile[data-variant~="menukaart"][data-variant~="no-media"] .bc-profile__kaart{grid-row:1;align-self:center;margin-bottom:0}.bc-cm.bc30 .bc-profile[data-variant~="menukaart"][data-variant~="flip"] .bc-profile__wrap{grid-template-columns:var(--mk-kaart) minmax(0,1fr)}.bc-cm.bc30 .bc-profile[data-variant~="menukaart"][data-variant~="flip"] .bc-profile__text{grid-column:2}.bc-cm.bc30 .bc-profile[data-variant~="menukaart"][data-variant~="flip"] .bc-profile__kaart{grid-column:1;rotate:calc(-1 * var(--mk-draai))}/* De kaart: A5 staand zoals bij Sara (groeit mee als er meer regels op staan), zwevend object met schaduw. */.bc-cm.bc30 .bc-profile__kaart{position:relative;isolation:isolate;overflow:clip;box-sizing:border-box;width:100%;aspect-ratio:419.53/595.28;display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 40px 32px;border-radius:var(--bc30-r-kaart);background:var(--bc30-creme);color:var(--bc30-kop);box-shadow:var(--bc30-schaduw);rotate:var(--mk-draai,3.5deg)}/* Op Sara's cocktailkaart loopt de crème kop deels over de oranje boog (2,4:1, onder AA). Hier staat de boog
   heel in de hoek linksboven en begint de kaart lager, zodat label en kop op het donker staan. */.bc-cm.bc30 .bc-profile__kaart[data-ontwerp="cocktails"]{background:var(--bc30-donker);color:var(--bc30-op-donker-kop);padding-top:120px}.bc-cm.bc30 .bc-profile__kaart-boog{position:absolute;z-index:-1;pointer-events:none;background:var(--wpr-bg-ebc87253-a460-4a51-9399-6176813f094e) center/contain no-repeat;left:-18.2%;bottom:-3.2%;width:73.7%;aspect-ratio:640/594}.bc-cm.bc30 [data-ontwerp="cocktails"] .bc-profile__kaart-boog{background-image:var(--wpr-bg-9005a22e-d361-42c7-8805-bdbb8d67e861);left:-8%;top:0;bottom:auto;width:46%;aspect-ratio:607/640;translate:0 -12%}.bc-cm.bc30 [data-ontwerp="koffie"] .bc-profile__kaart-boog{background-image:var(--wpr-bg-bc2b2b92-13ee-4b52-8d4e-52e64553e273);left:auto;right:-12%;bottom:-12%;width:78%;aspect-ratio:640/577}.bc-cm.bc30 .bc-profile__kaart p{margin:0}.bc-cm.bc30 .bc-profile__kaart-label{font:800 var(--bc30-fs-eyebrow)/1.2 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);text-transform:uppercase;color:var(--bc30-oranje-tekst-creme)}.bc-cm.bc30 [data-ontwerp="koffie"] .bc-profile__kaart-label{color:var(--bc30-kop)}.bc-cm.bc30 [data-ontwerp="cocktails"] .bc-profile__kaart-label{color:var(--bc30-op-donker-kop)}.bc-cm.bc30 .bc-profile__kaart .bc-profile__kaart-kop{margin-top:12px;max-width:9em;font:900 var(--bc30-fs-h2)/1.04 var(--bc30-font-kop);letter-spacing:var(--bc30-ls-kop);color:inherit;text-wrap:balance}.bc-cm.bc30 .bc-profile__kaart-kop .bc-script{display:inline-block;font-size:var(--bc30-script);line-height:.8}.bc-cm.bc30 .bc-profile__kaart-menu{flex:1;display:flex;flex-direction:column;justify-content:center;gap:24px;width:100%;padding:32px 0 24px}.bc-cm.bc30 .bc-profile__kaart-lijst{list-style:none;margin:0;padding:0;display:grid;gap:24px}.bc-cm.bc30 .bc-profile__kaart-lijst li{margin:0;padding:0}.bc-cm.bc30 .bc-profile__kaart-lijst li::before{content:none}.bc-cm.bc30 .bc-profile__kaart .bc-profile__kaart-naam{margin:0 0 4px;font:900 var(--bc30-fs-kaart)/1.2 var(--bc30-font-kop);letter-spacing:var(--bc30-ls-kop);color:inherit}.bc-cm.bc30 .bc-profile__kaart .bc-profile__kaart-smaak{max-width:24em;margin:0 auto;font:400 var(--bc30-fs-kaarttekst)/1.45 var(--bc30-font-tekst);color:var(--bc30-tekst);text-wrap:balance}.bc-cm.bc30 [data-ontwerp="cocktails"] .bc-profile__kaart-smaak{color:var(--bc30-op-donker-tekst)}.bc-cm.bc30 .bc-profile__kaart .bc-profile__kaart-groepnaam{margin-bottom:8px;font:800 var(--bc30-fs-eyebrow)/1.2 var(--bc30-font-tekst);letter-spacing:.12em;text-transform:uppercase;color:var(--bc30-oranje-tekst-creme)}.bc-cm.bc30 [data-ontwerp="cocktails"] .bc-profile__kaart-groepnaam{color:var(--bc30-oranje)}/* Veel regels (6 of meer): kleiner, dichter op elkaar, zoals Sara's kaart met acht cocktails. */.bc-cm.bc30 .bc-profile__kaart[data-dicht] :is(.bc-profile__kaart-menu,.bc-profile__kaart-lijst){gap:12px}.bc-cm.bc30 .bc-profile__kaart[data-dicht] .bc-profile__kaart-naam{font-size:var(--bc30-fs-h4);margin-bottom:0}/* Koffie (Sara's Signature-kaart): label en kop gecentreerd, de regels links in twee kolommen met groepslabels. */.bc-cm.bc30 [data-ontwerp="koffie"] .bc-profile__kaart-menu{display:block;-moz-columns:2;columns:2;-moz-column-gap:24px;column-gap:24px;text-align:left}.bc-cm.bc30 [data-ontwerp="koffie"] .bc-profile__kaart-groep{-moz-column-break-inside:avoid;break-inside:avoid;padding-bottom:20px}.bc-cm.bc30 [data-ontwerp="koffie"] .bc-profile__kaart-lijst{gap:12px}.bc-cm.bc30 [data-ontwerp="koffie"] .bc-profile__kaart-naam{font-size:var(--bc30-fs-h4)}.bc-cm.bc30 [data-ontwerp="koffie"] .bc-profile__kaart-smaak{margin:0}.bc-cm.bc30 .bc-profile__kaart .bc-profile__kaart-noot{max-width:26em;font:400 var(--bc30-fs-klein)/1.5 var(--bc30-font-tekst);color:inherit}.bc-cm.bc30 .bc-profile__kaart-logo{display:block;flex:none;margin-top:20px;width:140px;aspect-ratio:135.43/24.02;background:currentColor;-webkit-mask:url(https://cdn.barcompany.nl/design-system/latest/assets/menukaart-logo-liggend.svg) center/contain no-repeat;mask:url(https://cdn.barcompany.nl/design-system/latest/assets/menukaart-logo-liggend.svg) center/contain no-repeat}.bc-cm.bc30 [data-ontwerp="cocktails"] .bc-profile__kaart-logo{width:108px;aspect-ratio:122.49/50.34;-webkit-mask-image:url(https://cdn.barcompany.nl/design-system/latest/assets/menukaart-logo-staand.svg);mask-image:url(https://cdn.barcompany.nl/design-system/latest/assets/menukaart-logo-staand.svg)}@media(max-width:999px){
 .bc-cm.bc30 .bc-profile[data-variant~="menukaart"]{--mk-kaart:360px;--mk-foto:420px;--mk-dip:140px}
 .bc-cm.bc30 .bc-profile[data-variant~="menukaart"] .bc-profile__wrap{-moz-column-gap:48px;column-gap:48px}
 .bc-cm.bc30 .bc-profile__kaart{padding:40px 24px 24px}
}/* Telefoon: kop en tekst, dan de foto, dan de kaart die 32 px over de foto schuift, minder schuin, zo hoog als
   zijn inhoud. */@media(max-width:699px){
 .bc-cm.bc30 .bc-profile[data-variant~="menukaart"]{--mk-draai:1.5deg;padding-bottom:var(--bc30-sectie)}
 .bc-cm.bc30 .bc-profile[data-variant~="menukaart"] .bc-profile__wrap{display:flex;flex-direction:column;align-items:stretch;gap:0;padding-inline:var(--bc30-gutter)}
 .bc-cm.bc30 .bc-profile[data-variant~="menukaart"] .bc-profile__text{padding:0 0 24px;max-width:none}
 .bc-cm.bc30 .bc-profile[data-variant~="menukaart"] .bc-profile__img-frame{height:auto;aspect-ratio:3/2}
 .bc-cm.bc30 .bc-profile[data-variant~="menukaart"] .bc-profile__kaart{order:2;width:calc(100% - 24px);margin:-32px auto 0;aspect-ratio:auto;padding:40px 20px 24px}
 .bc-cm.bc30 .bc-profile[data-variant~="menukaart"][data-variant~="no-media"] .bc-profile__kaart{margin-top:0}
 .bc-cm.bc30 .bc-profile__kaart-menu{padding:24px 0 20px}
 .bc-cm.bc30 .bc-profile[data-variant~="menukaart"] .bc-profile__kaart[data-ontwerp="smoothies"]{padding-bottom:64px}
 .bc-cm.bc30 .bc-profile[data-variant~="menukaart"] .bc-profile__kaart[data-ontwerp="cocktails"]{padding-top:96px}
}@media(max-width:399px){.bc-cm.bc30 [data-ontwerp="koffie"] .bc-profile__kaart-menu{-moz-columns:1;columns:1}}@media print{.bc-cm.bc30 .bc-profile__kaart{rotate:none;box-shadow:none;-moz-column-break-inside:avoid;break-inside:avoid}}/* === Tekst met beeld op de home (band vlak, batch 6, lane b6home; bron 8138 "Door professionals, voor genieters"):
   liggende foto links (450 hoog), tekst rechts op een kolom van 565; tot 760 px eerst de tekst, dan de foto. De sectie
   ligt boven de belofte die eronder over de rand hangt (de boog daarvan valt achter de tekst). === */.bc-cm.bc30 [data-variant=vlak] .bc-profile.bc-visible{position:relative;z-index:4;padding:68px 0 130px;background:none}.bc-cm.bc30 [data-variant=vlak] .bc-profile .bc-profile__wrap{max-width:var(--bc30-cap);padding-inline:var(--bc30-gutter);grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:80px;align-items:center}.bc-cm.bc30 [data-variant=vlak] .bc-profile .bc-profile__media{margin:0}.bc-cm.bc30 [data-variant=vlak] .bc-profile .bc-profile__img-frame{max-width:none;height:450px;margin:0;aspect-ratio:auto;border-radius:var(--bc30-r-kaart);box-shadow:var(--bc30-schaduw)}.bc-cm.bc30 [data-variant=vlak] .bc-profile .bc-profile__img-frame img{width:100%;height:100%;aspect-ratio:auto;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 55%;object-position:50% 55%}.bc-cm.bc30 [data-variant=vlak] .bc-profile .bc-profile__text{max-width:565px}.bc-cm.bc30 [data-variant=vlak] .bc-profile .bc-profile__eyebrow{font-size:var(--bc30-fs-eyebrow);margin:0 0 18px}.bc-cm.bc30 [data-variant=vlak] .bc-profile .bc-profile__title{margin:0}.bc-cm.bc30 [data-variant=vlak] .bc-profile .bc-profile__text>p:not(.bc-profile__eyebrow){font:400 var(--bc30-fs-tekst)/1.65 var(--bc30-font-tekst);color:var(--bc30-tekst);margin:22px 0 0;max-width:none}/* de home is 8138: geen leesbreedte (review batch 7) */@media(max-width:1100px){.bc-cm.bc30 [data-variant=vlak] .bc-profile .bc-profile__wrap{gap:44px}}@media(max-width:760px){
 .bc-cm.bc30 [data-variant=vlak] .bc-profile .bc-profile__wrap{grid-template-columns:minmax(0,1fr);gap:28px}
 .bc-cm.bc30 [data-variant=vlak] .bc-profile .bc-profile__media{order:1}
 .bc-cm.bc30 [data-variant=vlak] .bc-profile .bc-profile__text{max-width:none}
 .bc-cm.bc30 [data-variant=vlak] .bc-profile .bc-profile__img-frame{height:auto;aspect-ratio:1.2}
}@media(max-width:640px){
 .bc-cm.bc30 [data-variant=vlak] .bc-profile.bc-visible{padding:32px 0 135px}
 .bc-cm.bc30 [data-variant=vlak] .bc-profile .bc-profile__text>p:not(.bc-profile__eyebrow){margin-top:20px}
}/* BC 3.0: Promise (basis why-list), run 4.
   Alles onder de versiemarker .bc-cm.bc30 (zie fundament.css). Bron: de 3.0-preview
   (scripts/design-compare/bc30/css/components/promise.css), geport met scripts/port-bc30-css.mjs
   met behoud van de preview-specificiteit; de bronlockregels (.source-quote, .source-heading) zijn
   omgezet naar de DOM van het blok (blockquote.bc-why-list__quote, h2/h3.bc-why-list__title).
   De 2.0-CSS (src/components/why-list.css) blijft de onderlaag, net als in de preview.
   Kaart: creme, zwevend boven de grond; [data-variant~="overlap"] schuift hem over de rand van
   de buren (alleen als de draft het vraagt). Band: de sectie staat op div.bc-why-list-band.
   Vinkjes: groen met een wit vinkje vanaf het begin (besluit Bram 2026-09-30, groen sinds keuze 2B op 2026-10-02).
   Stijlbibliotheek (ronde 2, S1d, 2026-10-02): kop in de kaart --bc30-fs-h2-paneel (32, telefoon 28), lijst
   --bc30-fs-kaarttekst, kaart --bc30-r-kaart; kleine oranje tekst op crème --bc30-oranje-tekst-creme (6B); de band
   volgt de witte grond (1B). *//* === Kaart (geen band) ===
   De tekst ligt boven de sierboog (wrap z-index 4 tegen 3 voor de boog). De preview bedoelde dat al
   ("Tekst boven de sierboog", promise.css A9-vervolg) maar zette de boog later op z-index 3 boven de
   wrap (z-index 1), waardoor hij op cocktails "Uitsluitend A-merk dranken" bedekte. */.bc-cm.bc30 .bc-why-list{position:relative;z-index:2;max-width:1120px;width:calc(100% - 64px);margin:0 auto;padding:56px;background:var(--bc30-creme)!important;border-radius:var(--bc30-r-kaart);overflow:visible}.bc-cm.bc30 .bc-why-list:before{display:none!important}.bc-cm.bc30 .bc-why-list:after{content:"";position:absolute;left:auto;bottom:auto;right:-260px;top:-156px;width:530px;height:310px;background:var(--wpr-bg-592bf62f-f9a3-4510-ac4d-6ce255278b98) center/contain no-repeat;transform:rotate(-27deg);pointer-events:none;z-index:3}/* Overlap (cocktails, matcha): de kaart schuift 96 px over de band erboven (die onderaan 96 px leeg
   heeft) en 75 px over de sectie eronder. Omhoog alleen direct na een band of als eerste in een band
   die op een band volgt, zodat een kaart na een andere sectie nooit over tekst schuift. Omlaag is
   bedoeld voor een donkere sectie met ruime bovenkant (het teamverhaal op cocktails, 160 px) of voor
   de onderkant van de eigen band (matcha); een losse kaart op de grond toont links en rechts de
   donkere paginagrond, dus voor een lichte volgende sectie hoort de kaart in een band. */.bc-cm.bc30 .bc-why-list[data-variant~="overlap"]{margin-bottom:-75px}.bc-cm.bc30 :is(.bc-band+.bc-why-list,.bc-band+.bc-band>.bc-why-list:first-child)[data-variant~="overlap"]{margin-top:-96px}.bc-cm.bc30 .bc-why-list__wrap{position:relative;z-index:4;padding:0;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:44px}.bc-cm.bc30 .bc-why-list__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;align-content:start}.bc-cm.bc30 .bc-why-list__list li{font:500 var(--bc30-fs-kaarttekst)/1.6 var(--bc30-font-tekst);padding:16px 0 16px 42px;min-width:0;opacity:1}.bc-cm.bc30 .bc-why-list__dot{background:var(--bc30-groen);border-color:var(--bc30-groen);flex-shrink:0}.bc-cm.bc30 .bc-why-list__dot svg{stroke:#fff}.bc-cm.bc30 .bc-why-list__dot svg path{stroke:#fff;stroke-dashoffset:0}.bc-cm.bc30 .bc-why-list__list li .bc-why-list__dot{background:var(--bc30-groen);border-color:var(--bc30-groen);box-shadow:none;transform:none}.bc-cm.bc30 .bc-why-list__eyebrow,.bc-cm.bc30 .bc-why-list :is(.bc-why-list__list li,.bc-why-list__intro>p,.bc-why-list__col>p) a{color:var(--bc30-oranje-tekst-creme)}/* Batch 7 (UX-sweep): het vette accent in de tekst kwam uit 2.0 (--bc-primary, #ee7437 op 16 px haalt geen AA op licht). Zelfde kleur als de links; de lead erft. */.bc-cm.bc30 .bc-why-list :is(.bc-why-list__intro p:not(.bc-why-list__lead),.bc-why-list__note,.bc-check-usp__body) strong{color:var(--bc30-oranje-tekst-creme)}.bc-cm.bc30 .bc-why-list__intro>p:not(.bc-why-list__eyebrow){font:400 var(--bc30-fs-tekst)/var(--bc30-lh-tekst) var(--bc30-font-tekst)}.bc-cm.bc30 .bc-why-list__intro>p:not(.bc-why-list__eyebrow)+p{margin-top:20px}.bc-cm.bc30 .bc-why-list__title{font:900 var(--bc30-fs-h2-paneel)/1.15 var(--bc30-font-kop)}.bc-cm.bc30 .bc-why-list__ctas{gap:12px;flex-wrap:wrap}.bc-cm.bc30 .bc-why-list__ctas a{display:inline-flex;border:0;border-radius:var(--bc30-r-pil);background:var(--bc30-oranje);padding:13px 20px;font:800 var(--bc30-fs-knop)/1.2 var(--bc30-font-tekst);color:var(--bc-white);text-decoration:none;justify-content:center;text-align:center}.bc-cm.bc30 .bc-why-list__ctas a:not(:first-child){background:transparent;border:0;color:var(--bc30-oranje-tekst-creme);box-shadow:inset 0 0 0 2px var(--bc30-oranje)}.bc-cm.bc30 .bc-why-list__ctas a:hover{background:var(--bc30-oranje-hover);transform:none;box-shadow:var(--bc30-gloed)}.bc-cm.bc30 .bc-why-list__ctas a:not(:first-child):hover{background:var(--bc30-oranje);color:var(--bc30-op-donker-kop);box-shadow:none}@media(max-width:1100px){
 .bc-cm.bc30 .bc-why-list{padding:40px}
 .bc-cm.bc30 .bc-why-list__wrap{gap:30px;grid-template-columns:1fr 1.2fr}
 .bc-cm.bc30 .bc-why-list__list{grid-template-columns:1fr}
}/* Sierboog tot 1200 de kleine maat: de grote lag op 700 over de eerste regel van de lijst (review A3, 03-10) en op 1000
   over het paneel tegen "BOLS" (review batch 7). */@media(min-width:641px) and (max-width:1199px){.bc-cm.bc30 .bc-why-list:after{width:245px;height:150px;right:-120px;top:-86px}}@media(max-width:640px){
 .bc-cm.bc30 .bc-why-list{width:calc(100% - 48px);padding:32px 24px}
 .bc-cm.bc30 .bc-why-list[data-variant~="overlap"]{margin-bottom:-50px}
 .bc-cm.bc30 :is(.bc-band+.bc-why-list,.bc-band+.bc-band>.bc-why-list:first-child)[data-variant~="overlap"]{margin-top:-48px}
 .bc-cm.bc30 .bc-why-list__wrap{display:block}
 .bc-cm.bc30 .bc-why-list__list{margin-top:25px}
 .bc-cm.bc30 .bc-why-list:after{width:245px;height:150px;right:-120px;top:-86px}
}/* Een kaart in een band krijgt geen eigen sierboog: de band heeft er al een, en de boog lag in de
   preview over de inhoud (matcha, preview A9; Bram 2026-09-30: geen bogen vlak onder elkaar). */.bc-cm.bc30 .bc-band .bc-why-list:after{display:none}/* Links in de lijst en in de tekst: oranje met een onderstreping op 4 px, zoals elke link in de
   3.0-preview (koffie, zuurstof, champagne); 2.0 zette die onderstreping uit. */.bc-cm.bc30 .bc-why-list :is(.bc-why-list__list li,.bc-why-list__intro>p,.bc-why-list__col>p) a{text-decoration:underline;text-decoration-thickness:auto;text-underline-offset:4px}/* Ruimte onder de belofte, overal (batch 6; Bram 04-10 op keuzepagina ronde 3, "Ruimte onder de belofte, ook op de
   home?": "Ja, overal"). In een band geeft elke sectie zijn eigen ruimte onderaan (padding-bottom) en begint de volgende
   op 0; de kaart en het compacte paneel zijn zelf het crème vlak, dus zonder deze marge raakte de sectie eronder het
   vlak (gemeten: tekst met beeld, video, teamrij en de kaarten zonder foto op 0 px). Volgt er in de band nog een
   sectie, dan krijgt het vlak de sectieruimte als marge; als laatste in de band geeft de band de ruimte (ook voor een
   donkere sectie of de footer). Niet bij overlap (schuift bewust over de buur) en niet bij de band-variant (eigen
   ruimte). Vervangt de regel voor alleen de compacte belofte uit batch 5a (review 4a, M5). */.bc-cm.bc30 .bc-band>.bc-why-list:not(:last-child):not([data-variant~="overlap"],[data-variant~="band"]){margin-bottom:var(--bc30-sectie)}/* Tot 960 zet de 2.0-onderlaag 80 px boven elke tekst met beeld (src/components: .bc-cm .bc-profile:not(...) is zwaarder
   dan de 3.0-regel); direct na de belofte telde dat op tot 136 px op de telefoon. Daar geeft de marge hierboven de ruimte. */@media(max-width:960px){.bc-cm.bc30 .bc-band>.bc-why-list:not(:last-child):not([data-variant~="overlap"],[data-variant~="band"])+.bc-profile{padding-top:0}}/* Na een FAQ-band in dezelfde tint vervalt de overlap (matcha, preview A25). */.bc-cm.bc30 .bc-faq+.bc-band>.bc-why-list:first-child{margin-top:0}/* === Band: de sectie op een paginabrede band (div.bc-why-list-band, gerenderd door het blok).
   Boven- en onderkleur volgen de buren; zonder :has() (iOS < 15.4) de standaardkleuren. === */:where(.bc-cm.bc30) .bc-why-list-band{--bc30-band-boven:var(--bc30-grond);--bc30-band-onder:var(--bc30-donker);background:linear-gradient(var(--bc30-band-boven) 0 110px,var(--bc30-band-onder) 110px 100%);padding:0}.bc-cm.bc30 .bc-page-hero+.bc-why-list-band{--bc30-band-boven:var(--bc30-zwart)}.bc-cm.bc30 .bc-team-intro+.bc-why-list-band{--bc30-band-boven:var(--bc30-donker)}.bc-cm.bc30 .bc-why-list-band:has(+:is(.bc-band,.bc-faq,.bc-logo-marquee,.bc-impression,.bc-review-spotlight,.bc-collega-cta,.bc-case-strip)){--bc30-band-onder:var(--bc30-grond)}.bc30:where(.bc-cm) .bc-why-list[data-variant~="band"]{margin:0 auto;max-width:1236px;padding:56px;width:calc(100% - 64px)}.bc30:where(.bc-cm) .bc-why-list[data-variant~="band"]:after{display:none}.bc30:where(.bc-cm) .bc-why-list[data-variant~="band"] .bc-why-list__wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr);gap:55px;align-items:center}.bc30:where(.bc-cm) .bc-why-list[data-variant~="band"] .bc-why-list__eyebrow{margin-bottom:22px}.bc30:where(.bc-cm) .bc-why-list[data-variant~="band"] .bc-why-list__title{font-size:var(--bc30-fs-h2-paneel);line-height:1.18;letter-spacing:-.6px;margin:0 0 26px;color:var(--bc30-kop)}:where(.bc-cm.bc30) .bc-why-list[data-variant~="band"] ul.bc-why-list__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;list-style:none;margin:0;padding:0}.bc30:where(.bc-cm) .bc-why-list[data-variant~="band"] .bc-why-list__list li{position:relative;color:inherit;padding:16px 0 16px 42px;font:500 var(--bc30-fs-kaarttekst)/1.6 var(--bc30-font-tekst);border-bottom:1px solid var(--bc30-lijn);-moz-column-break-inside:avoid;break-inside:avoid;margin:0}:where(.bc-cm.bc30) .bc-why-list[data-variant~="band"] .bc-why-list__list li:before{content:"✓";position:absolute;left:0;top:15px;display:grid;place-items:center;background:var(--bc30-groen);color:#fff;width:28px;height:28px;border-radius:50%;font:700 var(--bc30-fs-knop)/1 Arial}@media(max-width:1100px){.bc30:where(.bc-cm) .bc-why-list[data-variant~="band"]{padding:40px}}/* Twee kolommen vanaf 1000, zoals op 1440 en zoals de belofte van cocktails (nachtrun 05-10, champagne: op 1000 een kolom
   van 640 met rechts 250 px leeg crème). */@media(max-width:999px){
 .bc30:where(.bc-cm) .bc-why-list[data-variant~="band"] .bc-why-list__wrap{grid-template-columns:1fr;gap:30px}
 .bc30:where(.bc-cm) .bc-why-list[data-variant~="band"] .bc-why-list__intro{max-width:640px}
}@media(max-width:699px){
 .bc30:where(.bc-cm) .bc-why-list[data-variant~="band"]{width:calc(100% - 48px);padding:32px 24px}
 .bc30:where(.bc-cm) .bc-why-list[data-variant~="band"] .bc-why-list__title{line-height:1.2;margin-bottom:22px}
 :where(.bc-cm.bc30) .bc-why-list[data-variant~="band"] ul.bc-why-list__list{grid-template-columns:1fr}
 .bc30:where(.bc-cm) .bc-why-list[data-variant~="band"] .bc-why-list__list li{padding-block:15px}
}/* === Citaat (koffie: handletter; quote-serif: champagne) === */.bc30:where(.bc-cm) .bc-why-list__quote{margin:0;padding:0;border:0}.bc30:where(.bc-cm) .bc-why-list .bc-why-list__intro .bc-why-list__quote p{font:400 var(--bc30-fs-h2-paneel)/1.1 var(--bc30-font-script);color:var(--bc30-oranje);margin:26px 0 0;padding:0}.bc30:where(.bc-cm) .bc-why-list[data-variant~="quote-serif"] .bc-why-list__intro .bc-why-list__quote p{font:italic 400 var(--bc30-fs-citaat)/1.6 var(--bc30-font-kop);color:var(--bc30-kop);margin-top:26px;padding-left:18px;border-left:3px solid var(--bc30-oranje)}@media(max-width:699px){
 .bc30:where(.bc-cm) .bc-why-list[data-variant~="quote-serif"] .bc-why-list__intro .bc-why-list__quote p{margin-top:16px}
}/* === titled: **Titel** als blok boven de tekst (matcha) === */.bc-cm.bc30 .bc-why-list[data-variant~="titled"] .bc-why-list__list li,
.bc-cm.bc30 .bc-why-list[data-variant~="titled"] .bc-why-list__list li .bc-why-list__tx{font:400 var(--bc30-fs-kaarttekst)/1.5 var(--bc30-font-tekst)}.bc-cm.bc30 .bc-why-list[data-variant~="titled"] .bc-why-list__list li :is(b,strong):first-child{display:block;font:800 var(--bc30-fs-kaarttekst)/1.35 var(--bc30-font-tekst);color:var(--bc30-kop);margin:0 0 2px}.bc-cm.bc30 .bc-why-list[data-variant~="titled"] .bc-why-list__list li .bc-why-list__dot{margin-top:1px}/* === Foto in de introkolom (champagne) en de lijstkolom met tekst en knop === */.bc30:where(.bc-cm) .bc-why-list__media{margin:30px 0 0;border-radius:var(--bc30-r-kaart);overflow:hidden;box-shadow:var(--bc30-schaduw);aspect-ratio:5/4}.bc30:where(.bc-cm) .bc-why-list__media img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 64%;object-position:50% 64%}@media(max-width:1100px){.bc30:where(.bc-cm) .bc-why-list__media{max-width:640px}}@media(max-width:699px){.bc30:where(.bc-cm) .bc-why-list__media{margin-top:22px;aspect-ratio:4/5}}.bc30:where(.bc-cm) .bc-why-list__col>p{font:400 var(--bc30-fs-tekst)/1.7 var(--bc30-font-tekst);margin:0 0 20px;color:inherit;max-width:var(--bc30-lees)}/* leesbreedte: op 1000 liep de tekst 856 breed, 107 tekens (review batch 7) */.bc30:where(.bc-cm) .bc-why-list__col>.bc-why-list__ctas{margin-top:20px}/* === 2.0-opties zonder previewvoorbeeld, in de 3.0-taal === */.bc-cm.bc30 .bc-why-list[data-variant~="cols1"] ul.bc-why-list__list{grid-template-columns:minmax(0,1fr)}.bc-cm.bc30 .bc-why-list[data-variant~="regular"] .bc-why-list__list li{font-weight:400}.bc30:where(.bc-cm) .bc-why-list__note{font:400 var(--bc30-fs-kaarttekst)/1.6 var(--bc30-font-tekst);color:var(--bc30-kop);margin:20px 0 0;max-width:none}/* === Waar iemand in uitblinkt (alias author-expertise, O31, Bram 03-10: "vind dit leuker" en "mag wel nog dikker"):
   de kop op sectiekopmaat met het laatste woord in het script, de punten als stevige uitspraken in de kopletter met
   grotere groene vinkjes en meer lucht. Alleen deze alias; de andere beloftes blijven gelijk. === */.bc-cm.bc30 .bc-author-expertise .bc-why-list__title{font-size:var(--bc30-fs-h2);line-height:1.1;letter-spacing:-.03em}.bc-cm.bc30 .bc-author-expertise .bc-why-list__list li{font:700 var(--bc30-fs-h4)/1.45 var(--bc30-font-kop);color:var(--bc30-kop);padding:20px 0 20px 52px;letter-spacing:-.1px}.bc-cm.bc30 .bc-author-expertise .bc-why-list__list li .bc-why-list__dot{width:34px;height:34px;top:18px}.bc-cm.bc30 .bc-author-expertise .bc-why-list__dot svg{width:18px;height:18px}@media(max-width:699px){.bc-cm.bc30 .bc-author-expertise .bc-why-list__list li{padding:16px 0 16px 46px}.bc-cm.bc30 .bc-author-expertise .bc-why-list__list li .bc-why-list__dot{width:30px;height:30px;top:15px}}/* === Compacte belofte (variant compact, O30 van 02-10, richting B gekozen op 04-10): een laag crème paneel, links
   eyebrow, kop en de openingsvraag (de volgende alinea's achter "Lees waarom"), rechts de punten in twee kolommen
   van boven naar beneden, voor elk aantal punten: het eerste punt van de tweede kolom draagt data-kol="2" en staat
   met alles erna in kolom 2, de rest in kolom 1 (grid dense; review 4a L12, eerst data-rijen tot 6). Een punt met een
   kort label is een knop met een venstertje (Popover-API) met de volledige tekst; src/bc30/promise.js doet aanwijzen,
   focus, plek en aria-expanded. Computer vanaf 1100 naast elkaar (eronder werden de kolommen te smal voor hele
   zinnen), tablet onder elkaar met twee kolommen punten, telefoon alles onder elkaar. Eigen kleine sierboog
   rechtsboven, zoals de schets; begint de band met dit paneel, dan vervalt de boog van de band (geen twee bogen).
   Het paneel is zelf het crème vlak; de ruimte eronder staat bij de kaart hierboven (batch 6, voor elke belofte). === */.bc-cm.bc30 .bc-why-list[data-variant~="compact"]{padding:48px var(--bc30-paneel-pad)}.bc-cm.bc30 .bc-why-list[data-variant~="compact"]:after{display:block;right:-196px;top:-128px;width:330px;height:193px}.bc-cm.bc30 .bc-band:has(>.bc-why-list[data-variant~="compact"]:first-child):before{display:none}.bc-cm.bc30 .bc-why-list[data-variant~="compact"] .bc-why-list__wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--bc30-kolom);align-items:start}.bc-cm.bc30 .bc-why-list[data-variant~="compact"] .bc-why-list__eyebrow{margin:0 0 16px}.bc-cm.bc30 .bc-why-list[data-variant~="compact"] .bc-why-list__title{margin:0 0 16px}.bc-cm.bc30 .bc-why-list[data-variant~="compact"] .bc-why-list__intro>p:not(.bc-why-list__eyebrow){color:var(--bc30-tekst);margin:0}.bc-cm.bc30 .bc-why-list__meer>p{font:400 var(--bc30-fs-tekst)/var(--bc30-lh-tekst) var(--bc30-font-tekst);color:var(--bc30-tekst);margin:12px 0 0}.bc-cm.bc30 .bc-why-list__meer[hidden],.bc-cm.bc30 .bc-why-list__meerknop[hidden]{display:none}.bc-cm.bc30 .bc-why-list__meerknop{display:inline-flex;align-items:center;gap:8px;min-height:32px;margin:12px 0 0;padding:0;border:0;background:none;cursor:pointer;font:800 var(--bc30-fs-knop)/1.2 var(--bc30-font-tekst);color:var(--bc30-oranje-tekst-creme);text-decoration:underline;text-underline-offset:4px}.bc-cm.bc30 .bc-why-list__meerknop:hover{color:var(--bc30-kop)}.bc-cm.bc30 .bc-why-list__meerknop svg{width:12px;height:12px;transition:transform var(--bc30-duur) var(--bc30-ease)}.bc-cm.bc30 .bc-why-list__meerknop[aria-expanded="true"] svg{transform:rotate(180deg)}.bc-cm.bc30 .bc-why-list__lead{font:800 var(--bc30-fs-kaarttekst)/1.4 var(--bc30-font-tekst);color:var(--bc30-kop);margin:0 0 12px}.bc-cm.bc30 .bc-why-list__lead :is(b,strong){color:inherit;font-weight:inherit}.bc-cm.bc30 .bc-why-list[data-variant~="compact"] ul.bc-why-list__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;gap:0 40px;margin:0;padding:0;border-bottom:1px solid var(--bc30-lijn)}.bc-cm.bc30 .bc-why-list[data-variant~="compact"] .bc-why-list__list>li{grid-column:1}@media(min-width:700px){.bc-cm.bc30 .bc-why-list[data-variant~="compact"]:not([data-variant~="cols1"]) .bc-why-list__list>:is([data-kol="2"],[data-kol="2"]~li){grid-column:2}}.bc-cm.bc30 .bc-why-list[data-variant~="compact"][data-variant~="cols1"] ul.bc-why-list__list{grid-template-columns:minmax(0,1fr)}.bc-cm.bc30 .bc-why-list[data-variant~="compact"] .bc-why-list__list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;margin:0;padding:12px 0;border:0;border-top:1px solid var(--bc30-lijn);font:500 var(--bc30-fs-kaarttekst)/1.45 var(--bc30-font-tekst);color:var(--bc30-kop)}.bc-cm.bc30 .bc-why-list[data-variant~="compact"] .bc-why-list__list li .bc-why-list__dot{position:static;width:22px;height:22px;border:0}.bc-cm.bc30 .bc-why-list[data-variant~="compact"] .bc-why-list__dot svg{width:12px;height:12px}.bc-cm.bc30 .bc-why-list__tekst{min-width:0}/* Het korte label: een knop over de hele rij die leest als tekst, met aan het eind een kleine oranje plus als teken dat
   er meer is (Bram 04-10: geen stippellijn eronder; een ring zoals in het compacte FAQ-blok kostte te veel breedte,
   de labels braken dan op 1440 op twee regels). Aanwijzen kleurt het label oranje; open wordt de plus een min. De
   plus is een ::after met twee streepjes als achtergrond, zo hoog als de eerste regel, zodat hij op die regel staat
   (net als het vinkje) en de knop alleen het label als naam heeft. */.bc-cm.bc30 .bc-why-list__punt{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;width:100%;min-height:24px;margin:0;padding:0;border:0;border-radius:var(--bc30-r-pil);background:none;cursor:pointer;text-align:left;font:700 var(--bc30-fs-kaarttekst)/1.45 var(--bc30-font-tekst);color:var(--bc30-kop);text-decoration:none;transition:color var(--bc30-duur-snel) var(--bc30-ease)}.bc-cm.bc30 .bc-why-list__punt:after{content:"";flex:none;width:12px;height:1.45em;background:linear-gradient(var(--bc30-oranje-tekst-creme) 0 0) center/12px 2px no-repeat,linear-gradient(var(--bc30-oranje-tekst-creme) 0 0) center/2px 12px no-repeat;transition:background-size var(--bc30-duur-snel) var(--bc30-ease)}@media(hover:hover){.bc-cm.bc30 .bc-why-list__punt:hover{color:var(--bc30-oranje-tekst-creme)}}.bc-cm.bc30 .bc-why-list__punt:is([aria-expanded="true"],:has(+.bc-why-list__venster:popover-open)){color:var(--bc30-oranje-tekst-creme)}.bc-cm.bc30 .bc-why-list__punt:is([aria-expanded="true"],:has(+.bc-why-list__venster:popover-open)):after{background-size:12px 2px,2px 0}/* Het venstertje (zweeft, dus schaduw). Zonder JS opent het via de Popover-API midden in beeld; promise.js zet het
   onder of boven het punt (data-kant) en het pijltje (--pijl) op het label. */.bc-cm.bc30 .bc-why-list__venster{box-sizing:border-box;width:min(340px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:visible;margin:auto;padding:20px 24px;border:0;border-radius:var(--bc30-r-kaart);background:var(--bc30-grond);color:var(--bc30-tekst);box-shadow:var(--bc30-schaduw);opacity:0;translate:0 var(--bc30-in-tekst);transition:opacity var(--bc30-duur) var(--bc30-ease),translate var(--bc30-duur) var(--bc30-ease),overlay var(--bc30-duur) allow-discrete,display var(--bc30-duur) allow-discrete}.bc-cm.bc30 .bc-why-list__venster:popover-open{opacity:1;translate:0 0}@starting-style{.bc-cm.bc30 .bc-why-list__venster:popover-open{opacity:0;translate:0 var(--bc30-in-tekst)}}.bc-cm.bc30 .bc-why-list__venster[data-kant="boven"]:not(:popover-open){translate:0 calc(var(--bc30-in-tekst) * -1)}@starting-style{.bc-cm.bc30 .bc-why-list__venster[data-kant="boven"]:popover-open{translate:0 calc(var(--bc30-in-tekst) * -1)}}.bc-cm.bc30 .bc-why-list__venster:before{content:"";position:absolute;z-index:-1;left:var(--pijl,32px);top:-6px;width:12px;height:12px;background:var(--bc30-grond);transform:rotate(45deg)}.bc-cm.bc30 .bc-why-list__venster[data-kant="boven"]:before{top:auto;bottom:-6px}.bc-cm.bc30 .bc-why-list__venster:not([data-kant]):before{display:none}.bc-cm.bc30 .bc-why-list__venster>p{font:400 var(--bc30-fs-kaarttekst)/1.6 var(--bc30-font-tekst);color:var(--bc30-tekst);margin:0}.bc-cm.bc30 .bc-why-list__venster a{color:var(--bc30-oranje-tekst);font-weight:700;text-decoration:underline;text-underline-offset:4px}.bc-cm.bc30 .bc-why-list__venster a:hover{color:var(--bc30-oranje-hover)}.bc-cm.bc30 .bc-why-list__venster-beeld{display:block;width:calc(100% + 48px);max-width:none;margin:-20px -24px 16px;aspect-ratio:16/10;-o-object-fit:cover;object-fit:cover;border-radius:var(--bc30-r-kaart) var(--bc30-r-kaart) 0 0}/* Geen Popover-API (oude browser) en print: de volledige tekst staat gewoon in de lijst, het label vervalt; de tweede
   alinea staat open. */@supports not selector(:popover-open){
 .bc-cm.bc30 .bc-why-list__punt{display:none}
 .bc-cm.bc30 .bc-why-list__venster{display:block;position:static;grid-column:2;width:auto;max-height:none;margin:0;padding:0;background:none;box-shadow:none;opacity:1;translate:none}
 .bc-cm.bc30 .bc-why-list__venster:before,.bc-cm.bc30 .bc-why-list__venster-beeld{display:none}
}@media print{
 .bc-cm.bc30 .bc-why-list__punt,.bc-cm.bc30 .bc-why-list__meerknop{display:none!important}
 .bc-cm.bc30 .bc-why-list__meer[hidden]{display:block!important}
 .bc-cm.bc30 .bc-why-list__venster{display:block!important;position:static;grid-column:2;width:auto;max-height:none;margin:0;padding:0;background:none;box-shadow:none;opacity:1;translate:none}
 .bc-cm.bc30 .bc-why-list__venster:before,.bc-cm.bc30 .bc-why-list__venster-beeld{display:none}
}@media(max-width:1099px){
 .bc-cm.bc30 .bc-why-list[data-variant~="compact"]{padding:40px}
 .bc-cm.bc30 .bc-why-list[data-variant~="compact"] .bc-why-list__wrap{grid-template-columns:minmax(0,1fr);gap:24px}
 .bc-cm.bc30 .bc-why-list[data-variant~="compact"] .bc-why-list__intro{max-width:640px}
}@media(max-width:999px){.bc-cm.bc30 .bc-why-list[data-variant~="compact"]:after{width:245px;height:150px;right:-120px;top:-86px}}@media(max-width:699px){
 .bc-cm.bc30 .bc-why-list[data-variant~="compact"]{width:calc(100% - 48px);padding:32px 24px}
 .bc-cm.bc30 .bc-why-list[data-variant~="compact"]:after{width:160px;height:94px;right:-62px;top:-58px}
 .bc-cm.bc30 .bc-why-list[data-variant~="compact"] ul.bc-why-list__list{grid-template-columns:minmax(0,1fr)}
}/* === Belofte op de home (band vlak, batch 6, lane b6home; bron 8138 "Waarom Bar Company?"): het crème vlak hangt
   90 px (telefoon 52) over de bovenrand van het teamvlak eronder, met de oranje boog rechtsboven die achter de tekst van
   de sectie erboven valt; de lijst in twee kolommen met dunne lijnen. Vinkjes groen (register; 8138 had oranje, vraag
   aan Bram: de kleur staat in één regel hieronder). Kop in een paneel --bc30-fs-h2-paneel. === */.bc-cm.bc30 [data-variant=vlak] .bc-why-list{z-index:3;width:auto;max-width:1120px;margin:0 max(var(--bc30-gutter),calc((100% - 1120px) / 2)) -90px;padding:52px 56px}.bc-cm.bc30 [data-variant=vlak] .bc-why-list:after{display:block;width:430px;height:auto;aspect-ratio:1200/556;right:-120px;top:-175px;background-image:var(--wpr-bg-f916cde2-ef3e-497b-aa1c-93fb1f94a9c3);transform:rotate(-22.57deg);z-index:2}.bc-cm.bc30 [data-variant=vlak] .bc-why-list .bc-why-list__wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:44px}.bc-cm.bc30 [data-variant=vlak] .bc-why-list .bc-why-list__eyebrow{font-size:var(--bc30-fs-eyebrow);margin:0 0 18px}.bc-cm.bc30 [data-variant=vlak] .bc-why-list .bc-why-list__title{line-height:1.13;margin:0}.bc-cm.bc30 [data-variant=vlak] .bc-why-list .bc-why-list__intro>p:not(.bc-why-list__eyebrow){line-height:1.65;max-width:none;margin:16px 0 0}.bc-cm.bc30 [data-variant=vlak] .bc-why-list .bc-why-list__intro strong{font-weight:700;color:var(--bc30-oranje-tekst-creme)}.bc-cm.bc30 [data-variant=vlak] .bc-why-list .bc-why-list__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;align-content:center}.bc-cm.bc30 [data-variant=vlak] .bc-why-list .bc-why-list__list li{font-weight:700;line-height:1.5;padding:14px 0 14px 32px;border-bottom:1px solid var(--bc30-lijn)}.bc-cm.bc30 [data-variant=vlak] .bc-why-list .bc-why-list__list li .bc-why-list__dot{top:calc(50% - 10px);width:20px;height:20px;background:var(--bc30-groen);border-color:var(--bc30-groen)}@media(max-width:1100px){
 .bc-cm.bc30 [data-variant=vlak] .bc-why-list{padding:44px 40px}
 .bc-cm.bc30 [data-variant=vlak] .bc-why-list .bc-why-list__wrap{gap:28px}
 .bc-cm.bc30 [data-variant=vlak] .bc-why-list:after{width:350px;right:-35px;top:-145px}
}@media(max-width:760px){
 .bc-cm.bc30 [data-variant=vlak] .bc-why-list .bc-why-list__wrap{display:block}
 .bc-cm.bc30 [data-variant=vlak] .bc-why-list .bc-why-list__list{margin-top:24px}
 .bc-cm.bc30 [data-variant=vlak] .bc-why-list:after{width:250px;right:-16px;top:-120px}
}@media(max-width:640px){
 .bc-cm.bc30 [data-variant=vlak] .bc-why-list{padding:40px 28px;margin-bottom:-52px}
 .bc-cm.bc30 [data-variant=vlak] .bc-why-list .bc-why-list__list{grid-template-columns:minmax(0,1fr)}
 .bc-cm.bc30 [data-variant=vlak] .bc-why-list .bc-why-list__title br{display:none}
}/* De overlap van de home wint van de sectieruimte onder een belofte in een band (lane b6vorm, ronde 3 "ja, overal"). */.bc-cm.bc30 .bc-band[data-variant=vlak]>.bc-why-list.bc-visible:not(:last-child){margin-bottom:-90px}@media(max-width:640px){.bc-cm.bc30 .bc-band[data-variant=vlak]>.bc-why-list.bc-visible:not(:last-child){margin-bottom:-52px}}/* Kleine regel onder de knop (ctaNote, Tim 20-10). */.bc-cm.bc30 .bc-why-list__ctanote{margin:10px 0 0;font:400 var(--bc30-fs-klein)/1.5 var(--bc30-font-tekst);color:var(--bc30-tekst-zacht)}/* BC 3.0: ServiceGrid en OccasionCards (basis concept-grid), run 4.
   Alles onder de versiemarker .bc-cm.bc30 (zie fundament.css). Bron: de 3.0-preview
   (scripts/design-compare/bc30/css/components/service-grid.css, related-cards.css en de
   concept-grid-regels uit css/base.css), geport met scripts/port-bc30-css.mjs met behoud van de
   preview-specificiteit; bronlockregels (.source-*) zijn omgezet naar de DOM van het blok.
   De 2.0-CSS (src/components/concept-grid.css) blijft de onderlaag, net als in de preview.
   De band om de sectie (div.bc-band) staat in fundament.css; de stipjes van de veegstrook ook.
   Stijlbibliotheek (ronde 2, S1d, 2026-10-02): sectiekop --bc30-fs-h2; kaarttitel op een foto --bc30-fs-kaart-foto
   (28, telefoon 24), onder of naast beeld --bc30-fs-kaart (22, telefoon 19), ook bij icon-body, stappen en de
   gelegenheidsstrook (keuze 4B); de kop van de strook --bc30-fs-kaart-foto; tegels in een raster --bc30-fs-tegel;
   kaarten --bc30-r-kaart, knoppen en pillen --bc30-r-pil; de gelegenheidskaart off-white zonder schaduw (1B);
   doorklikken in de strook en in een veegstrook als onderstreepte tekstlink (opmerkingen 38 en 46); op de
   telefoon elke kaart in de veegstrook zo hoog als zijn inhoud, tekst hoogstens twee regels (5B). *//* === Sectie, wrap en kop (preview base.css) === */.bc-cm.bc30 .bc-concept-grid{background:transparent;clip-path:none;margin:0;padding:0 0 80px}.bc-cm.bc30 .bc-concept-grid__wrap{max-width:1300px;padding-left:32px;padding-right:32px}/* Kaarttitels breken met een streepje (UX-sweep 2026-10-01: "ontmoetingsplaats" en "Nieuwjaarsborrel" liepen
   op 960 11 tot 12 px uit de kaart). */.bc-cm.bc30 .bc-concept-grid__body :is(h2,h3,h4,h5){font-size:var(--bc30-fs-kaart-foto);line-height:var(--bc30-lh-kop);letter-spacing:normal;overflow-wrap:break-word;hyphens:auto;hyphenate-limit-chars:10 5 4}.bc-cm.bc30 .bc-concept-grid__body p{font:400 var(--bc30-fs-tekst)/1.5 var(--bc30-font-tekst)}/* Een kaarttitel op een ander kopniveau (cardHeadingTag) krijgt de vorm van de h3 uit 2.0. */.bc-cm.bc30 .bc-concept-grid__body :is(h2,h4,h5){font-family:var(--bc30-font-kop);font-weight:900;margin:0 0 6px;color:#fff;text-shadow:0 2px 14px rgba(24,23,22,.4)}@media(max-width:640px){
 .bc-cm.bc30 .bc-concept-grid__wrap{padding-left:24px;padding-right:24px}
 .bc-cm.bc30 .bc-concept-grid{padding-bottom:55px}
}.bc-cm.bc30 .bc-concept-grid__title{font-size:var(--bc30-fs-h2);line-height:1.15;margin-bottom:24px;letter-spacing:normal;text-align:center}.bc-cm.bc30 .bc-concept-grid__eyebrow{text-align:center;color:var(--bc30-oranje-tekst)}.bc-cm.bc30 .bc-concept-grid__intro{max-width:601px;margin:0 auto 56px;text-align:center;font:400 var(--bc30-fs-tekst)/var(--bc30-lh-tekst) var(--bc30-font-tekst);color:var(--bc30-tekst)}@media(max-width:640px){
 .bc-cm.bc30 .bc-concept-grid__intro{margin-bottom:35px}
}/* Links in de inleiding: kleine oranje tekst op licht (K6B; review b7: #ee7437 haalde 2,9:1). */.bc-cm.bc30 .bc-concept-grid__intro a{color:var(--bc30-oranje-tekst)}/* Kop links (headingAlign left): als de andere koppen op de pagina links staan (preview Z4:
   zuurstof, matcha, champagne #modellen). */.bc-cm.bc30 .bc-concept-grid[data-variant~="kop-links"] :is(.bc-concept-grid__title,.bc-concept-grid__eyebrow,.bc-concept-grid__intro){text-align:start}.bc-cm.bc30 .bc-concept-grid[data-variant~="kop-links"] .bc-concept-grid__intro{margin-left:0}/* === Rooster en kaart met de foto als achtergrond (default, cocktails #services) === */.bc-cm.bc30 .bc-concept-grid__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.bc-cm.bc30 .bc-concept-grid__card,.bc-cm.bc30 .bc-concept-grid__card.is-wide{grid-column:auto;aspect-ratio:1.65;min-width:0;width:100%;max-width:100%;border-radius:var(--bc30-r-kaart)}.bc-cm.bc30 .bc-concept-grid__card:after{background:linear-gradient(0deg,#181716ed 8%,#18171630 68%,transparent),linear-gradient(225deg,#18171670,transparent 48%)}.bc-cm.bc30 .bc-concept-grid__go{display:inline-flex;align-items:center;background:var(--bc30-oranje);border-radius:var(--bc30-r-pil);padding:12px 19px;font:800 var(--bc30-fs-knop)/1.2 var(--bc30-font-tekst);color:var(--bc-white);text-transform:none;letter-spacing:normal;gap:0;margin-top:14px}.bc-cm.bc30 .bc-concept-grid__go i,.bc-cm.bc30 .bc-concept-grid__go svg,.bc-cm.bc30 .bc-concept-grid__go>span{display:none}.bc-cm.bc30 .bc-concept-grid__card:hover .bc-concept-grid__go{background:var(--bc30-oranje)}@media(max-width:640px){
 .bc-cm.bc30 .bc-concept-grid__grid{grid-template-columns:1fr;gap:20px}
 .bc-cm.bc30 .bc-concept-grid__card,.bc-cm.bc30 .bc-concept-grid__card.is-wide{aspect-ratio:1.2;min-height:275px}
}@media(hover:hover){
 .bc-cm.bc30 .bc-concept-grid__card{transition:box-shadow var(--bc30-duur) var(--bc30-ease),transform var(--bc30-duur) var(--bc30-ease);transform:none}
 .bc-cm.bc30 .bc-concept-grid__card img{transition:transform var(--bc30-duur-beeld) var(--bc30-ease)}
 .bc-cm.bc30 .bc-concept-grid__card:hover img{transform:scale(1.035)}
 .bc-cm.bc30 .bc-concept-grid__card:hover{transform:none;box-shadow:var(--bc30-schaduw)}
}/* Tik-veer op een aanraakscherm (preview base.css), niet in een veegstrook. */@media(hover:none){
 .bc-cm.bc30 .bc-concept-grid__card{transition:box-shadow var(--bc30-duur) var(--bc30-ease),transform var(--bc30-duur) var(--bc30-ease),scale var(--bc30-duur-snel) var(--bc30-ease)}
 .bc-cm.bc30 :not([data-mobiel="veeg"])>.bc-concept-grid__wrap .bc-concept-grid__card:active,.bc-cm.bc30 .bc-case-strip:not([data-mobiel="veeg"]) .bc-concept-grid__card:active{scale:.985}
}/* === photo-body en icon-body: beeld boven, tekst in een donker vlak eronder === */.bc-cm.bc30 .bc-concept-grid:is([data-variant~="photo-body"],[data-variant~="icon-body"]){padding-bottom:110px}.bc-cm.bc30 .bc-concept-grid:is([data-variant~="photo-body"],[data-variant~="icon-body"]) .bc-concept-grid__card{display:flex;flex-direction:column;aspect-ratio:auto;overflow:hidden;background:var(--bc30-donker);isolation:isolate}.bc-cm.bc30 .bc-concept-grid:is([data-variant~="photo-body"],[data-variant~="icon-body"]) .bc-concept-grid__card:after{display:none}.bc-cm.bc30 .bc-concept-grid:is([data-variant~="photo-body"],[data-variant~="icon-body"]) .bc-concept-grid__photo{height:310px;overflow:hidden}.bc-cm.bc30 .bc-concept-grid:is([data-variant~="photo-body"],[data-variant~="icon-body"]) .bc-concept-grid__photo img{position:static;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.bc-cm.bc30 .bc-concept-grid:is([data-variant~="photo-body"],[data-variant~="icon-body"]) .bc-concept-grid__body{position:static;padding:30px 32px 34px;color:var(--bc30-op-donker-kop);background:transparent;flex:1}.bc-cm.bc30 .bc-concept-grid:is([data-variant~="photo-body"],[data-variant~="icon-body"]) .bc-concept-grid__body :is(h2,h3,h4,h5){font-size:var(--bc30-fs-kaart);line-height:1.2;margin-bottom:16px;color:var(--bc30-op-donker-kop)}.bc-cm.bc30 .bc-concept-grid:is([data-variant~="photo-body"],[data-variant~="icon-body"]) .bc-concept-grid__body p{color:var(--bc30-op-donker-kop)}.bc-cm.bc30 .bc-concept-grid[data-variant~="photo-body"] .bc-concept-grid__card:last-child .bc-concept-grid__photo img{-o-object-position:center top;object-position:center top}.bc-cm.bc30 .bc-concept-grid:is([data-variant~="photo-body"],[data-variant~="icon-body"]) .bc-concept-grid__card>img{flex:none;position:static;width:100%;height:310px;aspect-ratio:auto;-o-object-fit:cover;object-fit:cover}@media(max-width:699px){
 .bc-cm.bc30 .bc-concept-grid:is([data-variant~="photo-body"],[data-variant~="icon-body"]){padding-bottom:55px}
 .bc-cm.bc30 .bc-concept-grid:is([data-variant~="photo-body"],[data-variant~="icon-body"]) .bc-concept-grid__wrap{padding-inline:24px}
 .bc-cm.bc30 .bc-concept-grid:is([data-variant~="photo-body"],[data-variant~="icon-body"]) .bc-concept-grid__grid{grid-template-columns:1fr;gap:22px}
 .bc-cm.bc30 .bc-concept-grid:is([data-variant~="photo-body"],[data-variant~="icon-body"]) .bc-concept-grid__photo{height:240px}
 .bc-cm.bc30 .bc-concept-grid:is([data-variant~="photo-body"],[data-variant~="icon-body"]) .bc-concept-grid__card>img{height:240px}
 .bc-cm.bc30 .bc-concept-grid:is([data-variant~="photo-body"],[data-variant~="icon-body"]) .bc-concept-grid__body{padding:25px 24px}
}/* De knop staat onderaan de kaart, zodat knoppen in een rij op een lijn staan (preview A11). */.bc-cm.bc30 .bc-concept-grid[data-variant~="photo-body"] .bc-concept-grid__body{display:flex;flex-direction:column}.bc-cm.bc30 .bc-concept-grid[data-variant~="photo-body"] .bc-concept-grid__go{align-self:flex-start}.bc-cm.bc30 .bc-concept-grid[data-variant~="photo-body"] .bc-concept-grid__body>.bc-concept-grid__actie{margin-top:auto;padding-top:18px}/* Eigen knop in een kaart zonder link (champagne #modellen), als de knoppen van de rol. */.bc-cm.bc30 .bc-concept-grid__cta{display:inline-flex;align-items:center;justify-content:center;background:var(--bc30-oranje);color:var(--bc-white);border:0;border-radius:var(--bc30-r-pil);padding:14px 24px;min-height:46px;font:800 var(--bc30-fs-knop)/1.25 var(--bc30-font-tekst);text-align:center;text-decoration:none;box-shadow:var(--bc30-gloed);transition:background var(--bc30-duur-snel) var(--bc30-ease);transform:none}.bc-cm.bc30 .bc-concept-grid__cta:hover{background:var(--bc30-oranje-hover);transform:none}.bc-cm.bc30 .bc-concept-grid__cta *{color:inherit}@media(max-width:699px){.bc-cm.bc30 .bc-concept-grid__cta{width:100%}}/* === icon-body: pictogram op ware grootte, gecentreerd, niet bijgesneden === */.bc-cm.bc30 .bc-concept-grid[data-variant~="icon-body"] .bc-concept-grid__photo{height:196px;padding:38px 32px 0;display:grid;place-items:center}.bc-cm.bc30 .bc-concept-grid[data-variant~="icon-body"] .bc-concept-grid__photo img{width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:auto;-o-object-fit:contain;object-fit:contain;-o-object-position:center;object-position:center}.bc-cm.bc30 .bc-concept-grid[data-variant~="icon-body"] .bc-concept-grid__body :is(h2,h3,h4,h5,h6){font-family:var(--bc30-font-kop);font-weight:900;font-size:var(--bc30-fs-kaart);line-height:1.2;letter-spacing:-.045em;margin:0 0 16px;color:var(--bc30-op-donker-kop);text-shadow:none}@media(max-width:699px){
 .bc-cm.bc30 .bc-concept-grid[data-variant~="icon-body"] .bc-concept-grid__photo{height:160px;padding:30px 24px 0}
}/* === single: een kaart over de volle breedte, beeld naast de tekst (700 px en breder) === */.bc-cm.bc30 .bc-concept-grid[data-variant~="single"] .bc-concept-grid__grid{grid-template-columns:minmax(0,1fr)}@media(min-width:700px){
 .bc-cm.bc30 .bc-concept-grid[data-variant~="single"] .bc-concept-grid__card{flex-direction:row;align-items:stretch}
 .bc-cm.bc30 .bc-concept-grid[data-variant~="single"] .bc-concept-grid__photo{position:relative;flex:0 0 46%;height:auto;min-height:340px}
 .bc-cm.bc30 .bc-concept-grid[data-variant~="single"] .bc-concept-grid__photo img{position:absolute;inset:0;width:100%;height:100%}
 .bc-cm.bc30 .bc-concept-grid[data-variant~="single"] .bc-concept-grid__body{align-self:center;padding:36px 44px}
}@media(min-width:700px) and (max-width:952px){
 .bc-cm.bc30 .bc-concept-grid[data-variant~="single"] .bc-concept-grid__card{flex-direction:column}
 .bc-cm.bc30 .bc-concept-grid[data-variant~="single"] .bc-concept-grid__photo{position:relative;flex:none;height:310px;min-height:0}
 .bc-cm.bc30 .bc-concept-grid[data-variant~="single"] .bc-concept-grid__body{align-self:auto;padding:30px 32px 34px}
}/* === tijdlijn: het spoor (fase B batch 2, O39, O43 en O47; Bram 02-10: "de huidige website veel
   toffer met dat scroll door de stappen heen, aanhouden en beter maken"). Sinds batch 5b alleen nog de tijdlijn met
   jaartallen; de processtappen hebben richting C (hieronder, .bc-stappen). De 2.0-vorm terug in 3.0-stijl:
   bolletjes op een lijn, geen kaarten. Lijn en inkt zijn een SVG die src/bc30/service-grid.js over de lijst
   legt (klasse is-spoor op de lijst); bij scrollen loopt de oranje inkt van stap naar stap en vult elk
   bolletje (is-gevuld); de tekst staat er altijd vol (review B2: zachter wachten las nauwelijks). Zonder JS en
   bij afdrukken: alle bolletjes gevuld, geen wachtstand. De 2.0-verbindingslijnen (::before en ::after op de
   marker) staan uit; het spoor neemt het over. In 3.0 staat ol.bc-steps__list alleen in deze twee varianten
   (de steps-alias rendert concept-grid), dus de gedeelde regels hangen aan de lijst zelf: .bc-cm.bc30
   .bc-steps__list wint van elke 2.0-stappenregel. === */.bc-cm.bc30 .bc-concept-grid__grid:has(>.bc-steps__list){display:block;position:relative}.bc-cm.bc30 .bc-steps__list{list-style:none;margin:0;padding:0;position:relative;z-index:1;display:grid}.bc-cm.bc30 .bc-steps__list .bc-steps__item{display:block;min-width:0;margin:0;padding:0;background:none;box-shadow:none;position:relative}.bc-cm.bc30 .bc-steps__list .bc-steps__marker{display:flex;align-items:flex-start;margin:0;z-index:auto}.bc-cm.bc30 .bc-steps__list .bc-steps__marker:before,.bc-cm.bc30 .bc-steps__list .bc-steps__marker:after{display:none}.bc-cm.bc30 .bc-steps__list .bc-steps__content{padding:0;min-width:0}.bc-cm.bc30 .bc-steps__list .bc-steps__title{font:900 var(--bc30-fs-kaart)/1.25 var(--bc30-font-kop);letter-spacing:-.02em;color:var(--bc30-kop);margin:0 0 8px}.bc-cm.bc30 .bc-steps__list .bc-steps__body{font:400 var(--bc30-fs-kaarttekst)/1.65 var(--bc30-font-tekst);color:var(--bc30-tekst);margin:0;max-width:34em}.bc-cm.bc30 .bc-steps__list .bc-steps__body+.bc-steps__body{margin-top:8px}.bc-cm.bc30 .bc-steps__list .bc-steps__body strong{color:var(--bc30-kop)}.bc-cm.bc30 .bc-steps__list .bc-steps__body a{color:var(--bc30-oranje-tekst)}/* Het bolletje: eindstand oranje met het nummer erin, donker (review B2: licht op oranje haalde 2,9:1; de knop is de
   enige plek onder AA, keuze 6B). */.bc-cm.bc30 .bc-steps__list .bc-steps__num{display:grid;place-items:center;flex:none;width:56px;height:56px;border-radius:50%;border:2px solid var(--bc30-oranje);background:var(--bc30-oranje);color:var(--bc30-donker);font:800 var(--bc30-fs-kaart)/1 var(--bc30-font-tekst);letter-spacing:normal;box-shadow:none;transition:background var(--bc30-duur) var(--bc30-ease),border-color var(--bc30-duur) var(--bc30-ease),color var(--bc30-duur) var(--bc30-ease)}/* Wachtstand (alleen met JS): wit bolletje met een lichte ring; is-gevuld = de eindstand. Alleen het bolletje wacht. */.bc-cm.bc30 .bc-steps__list.is-spoor>:not(.is-gevuld) .bc-steps__num{background:var(--bc30-grond);border-color:var(--bc30-lijn);color:var(--bc30-tekst-zacht)}/* Het spoor: een lichte lijn, de inkt oranje; de looptijd per stuk zet de JS (lengte van het stuk). */.bc-cm.bc30 .bc-stappen-spoor{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0;fill:none;stroke-linecap:round;stroke-linejoin:round}.bc-cm.bc30 .bc-stappen-spoor__baan{stroke:var(--bc30-lijn);stroke-width:2}.bc-cm.bc30 .bc-stappen-spoor__inkt{stroke:var(--bc30-oranje);stroke-width:3;transition:stroke-dashoffset var(--bc30-duur-beeld) var(--bc30-ease)}@media print{
 .bc-cm.bc30 .bc-steps__list.is-spoor>* .bc-steps__num{background:var(--bc30-oranje)!important;border-color:var(--bc30-oranje)!important;color:var(--bc30-grond)!important}
 .bc-cm.bc30 .bc-steps__list.is-spoor>* .bc-steps__content{opacity:1!important}
 .bc-cm.bc30 .bc-stappen-spoor__inkt{stroke-dashoffset:0!important}
 .bc-cm.bc30 :is(.bc-steps__list *,.bc-stappen-spoor__inkt){transition:none!important}
}/* === Processtappen C (variant steps, fase B batch 5b; schets _fase3/blokkenboek-nu/schets-b4/stappen/richting-c,
   "Beeld vouwt open"; Bram 04-10: "Optie c vind ik het mooist en meest interactief waar we mensen meenemen!").
   Batch 6 (Bram ronde 3: "zelf helemaal analyseren en dan verbeteren ... klanten informeren over de stappen en chill
   werkt"; analyse bc-content-machine/docs/research/2026-10-04-bc30-stappen/analyse.md): korter en rustiger, de tekst
   onder zijn eigen kop, de pil houdt zijn foto als duimnagel, op telefoon en tablet komt de foto onder de kop
   vandaan, zonder foto's een groot nummer.
   Eindstand (zonder JS, afdrukken): per stap kop en tekst links, de foto rechts (computer, 16:10);
   op tablet (16:9) en telefoon (3:2) de foto onder de kop. Met JS (is-live, src/bc30/service-grid.js deel
   "Processtappen C") staat de foto klein in de pil achter de kop. data-modus "podium" (computer, als het past): het
   kader plakt, links de kop en de stappen, rechts het podium; de eerste foto ligt er al, elke volgende groeit uit zijn
   pil op het podium, de tekst van de actieve stap opent onder zijn kop. data-modus "rij" (de rest): de foto schuift
   onder zijn kop vandaan naar zijn plek en de pil vervaagt. Per frame alleen transform, clip-path en opacity. De
   oranje inkt loopt per stap over de scheidingslijn mee. === */.bc-cm.bc30 .bc-stappen{position:relative}.bc-cm.bc30 .bc-stappen :is(.bc-concept-grid__title,.bc-concept-grid__eyebrow,.bc-concept-grid__intro){text-align:start}.bc-cm.bc30 .bc-stappen .bc-concept-grid__title{max-width:760px}.bc-cm.bc30 .bc-stappen .bc-concept-grid__intro{margin:0 0 40px;max-width:601px}.bc-cm.bc30 .bc-stappen__lijst{list-style:none;margin:0;padding:0}.bc-cm.bc30 .bc-stappen__stap{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"kop foto" "tekst foto";grid-template-rows:auto 1fr;-moz-column-gap:var(--bc30-kolom);column-gap:var(--bc30-kolom);margin:0;padding:24px 0;border-top:1px solid var(--bc30-lijn)}.bc-cm.bc30 .bc-stappen__kop{grid-area:kop;display:flex;align-items:center;gap:16px;min-height:56px}.bc-cm.bc30 .bc-stappen__nr{flex:none;width:32px;font:800 var(--bc30-fs-eyebrow)/1 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);color:var(--bc30-oranje-tekst)}.bc-cm.bc30 .bc-stappen__titel{min-width:0;margin:0;font:900 var(--bc30-fs-kaart-foto)/var(--bc30-lh-kop) var(--bc30-font-kop);letter-spacing:var(--bc30-ls-kop);color:var(--bc30-kop);hyphens:auto;hyphenate-limit-chars:18 8 8}/* een streepje alleen in een woord van 18 letters of meer, zoals de sectiekoppen (nachtrun 05-10: "rege- len" op 1000 en 1020, zuurstof) */.bc-cm.bc30 .bc-stappen__pil{display:none}.bc-cm.bc30 .bc-stappen__foto{grid-area:foto;position:relative;margin:0;aspect-ratio:16/10;border-radius:var(--bc30-r-kaart)}.bc-cm.bc30 .bc-stappen__beeld{position:absolute;inset:0;overflow:hidden;border-radius:var(--bc30-r-kaart);background:var(--bc30-vlak)}.bc-cm.bc30 .bc-stappen__beeld img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.bc-cm.bc30 .bc-stappen__tekst{grid-area:tekst;margin:12px 0 0 48px;max-width:32em}.bc-cm.bc30 .bc-stappen__tekst p{margin:0;font:400 var(--bc30-fs-tekst)/var(--bc30-lh-tekst) var(--bc30-font-tekst);color:var(--bc30-tekst)}.bc-cm.bc30 .bc-stappen__tekst p+p{margin-top:8px}.bc-cm.bc30 .bc-stappen__tekst strong{color:var(--bc30-kop)}.bc-cm.bc30 .bc-stappen__tekst a{color:var(--bc30-oranje-tekst)}.bc-cm.bc30 :is(.bc-stappen__inkt,.bc-stappen__podium){display:none}/* Zonder foto's: het nummer groot, zoals de kaartnummers op de home (Bram ronde 3, "Kaartnummers" aan); kop links,
   tekst rechts op de hoogte van de titel. Het nummer in --bc30-oranje-tekst (AA op wit). */.bc-cm.bc30 .bc-stappen[data-fotos="nee"] .bc-stappen__nr{width:48px;font:900 var(--bc30-fs-kaartnummer)/1 var(--bc30-font-kop);letter-spacing:-.02em}.bc-cm.bc30 .bc-stappen[data-fotos="nee"] .bc-stappen__stap{grid-template-areas:"kop tekst";grid-template-rows:auto;align-items:start}.bc-cm.bc30 .bc-stappen[data-fotos="nee"] .bc-stappen__tekst{margin:0;padding-top:16px}/* Tablet en telefoon: per stap de kop, de foto eronder (tablet 16:9, telefoon 3:2: een lager beeld, meer tekst per
   scherm), dan de tekst. Zonder foto's de tekst onder de titel. */@media(max-width:999px){
 .bc-cm.bc30 .bc-stappen__stap,.bc-cm.bc30 .bc-stappen[data-fotos="nee"] .bc-stappen__stap{grid-template-columns:minmax(0,1fr);grid-template-areas:"kop" "foto" "tekst";grid-template-rows:auto;padding:20px 0 24px}
 .bc-cm.bc30 .bc-stappen__foto{margin-top:16px;aspect-ratio:16/9}
 .bc-cm.bc30 .bc-stappen__tekst{margin:16px 0 0;max-width:36em}
 .bc-cm.bc30 .bc-stappen[data-fotos="nee"] .bc-stappen__tekst{margin:8px 0 0 64px;padding:0}
}@media(max-width:699px){
 .bc-cm.bc30 .bc-stappen__kop{gap:12px;min-height:44px}
 .bc-cm.bc30 .bc-stappen__nr{width:28px;letter-spacing:normal}
 .bc-cm.bc30 .bc-stappen__foto{aspect-ratio:3/2}
 .bc-cm.bc30 .bc-stappen[data-fotos="nee"] .bc-stappen__tekst{margin-left:0}
}/* Met JS: de foto klein in de pil achter de kop (een duimnagel, geen lege knop), de inkt op de scheidingslijn. */@media screen{
 .bc-cm.bc30 .bc-stappen.is-live .bc-stappen__pil{display:block;flex:none;position:relative;width:80px;height:48px;margin-left:auto;overflow:hidden;border-radius:var(--bc30-r-pil);background:var(--bc30-vlak);outline:2px solid transparent;outline-offset:2px;transition:outline-color var(--bc30-duur) var(--bc30-ease)}
 .bc-cm.bc30 .bc-stappen.is-live .bc-stappen__pil img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}
 .bc-cm.bc30 .bc-stappen.is-live .bc-stappen__beeld{z-index:1;overflow:visible;border-radius:0;background:none;transform-origin:0 0}
 /* Alleen tijdens de vlucht een eigen laag (zuinig met geheugen op een telefoon). */
 .bc-cm.bc30 .bc-stappen.is-live .bc-stappen__beeld.is-vlucht,.bc-cm.bc30 .bc-stappen.is-live .is-vlucht img{will-change:transform}
 .bc-cm.bc30 .bc-stappen.is-live .bc-stappen__inkt{display:block;position:absolute;z-index:1;left:0;right:0;top:-1px;height:2px;border-radius:var(--bc30-r-pil);background:var(--bc30-oranje);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
}@media screen and (max-width:699px){.bc-cm.bc30 .bc-stappen.is-live .bc-stappen__pil{width:64px;height:40px}}/* Podium (computer): het kader is zo hoog als zijn inhoud en plakt onder de menubalk (96 px van boven) zodra de
   bovenkant van de inhoud daar komt; erboven en eronder dus de gewone sectieafstand (coördinator 04-10: eerst
   ongeveer 220 px extra wit boven en 90 px onder, door een kader van een scherm hoog met de inhoud in het midden).
   De hoogte van het spoor zet de JS (--bc-stappen-h: kader plus een stuk scroll per stap), de hoogte van de
   linkerkolom ook (min-height: dicht plus de langste tekst open, zodat niets verspringt). Kop en podium staan
   bovenaan gelijk. De tekst van de actieve stap opent onder zijn kop (rijhoogte 0fr naar 1fr), de vorige sluit. */@media screen and (min-width:1000px){
 .bc-cm.bc30 .bc-stappen[data-modus="podium"]{height:var(--bc-stappen-h)}
 .bc-cm.bc30 .bc-stappen[data-modus="podium"] .bc-stappen__kader{position:sticky;top:96px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);-moz-column-gap:var(--bc30-kolom);column-gap:var(--bc30-kolom);align-items:start}
 .bc-cm.bc30 .bc-stappen[data-modus="podium"] .bc-stappen__links{position:relative}
 .bc-cm.bc30 .bc-stappen[data-modus="podium"] .bc-concept-grid__title{font-size:var(--bc30-fs-h2-paneel);margin-bottom:16px}
 .bc-cm.bc30 .bc-stappen[data-modus="podium"] .bc-concept-grid__intro{margin:0 0 24px}
 .bc-cm.bc30 .bc-stappen[data-modus="podium"] .bc-stappen__stap{position:static;grid-template-columns:minmax(0,1fr);grid-template-areas:"kop" "tekst";grid-template-rows:auto 0fr;padding:8px 0;transition:grid-template-rows var(--bc30-duur-in) var(--bc30-ease)}
 .bc-cm.bc30 .bc-stappen[data-modus="podium"] .bc-stappen__stap.is-actief{grid-template-rows:auto 1fr}
 .bc-cm.bc30 .bc-stappen[data-modus="podium"] .bc-stappen__kop{position:relative;min-height:48px}
 .bc-cm.bc30 .bc-stappen[data-modus="podium"] .bc-stappen__inkt{top:-9px}
 .bc-cm.bc30 .bc-stappen[data-modus="podium"] .bc-stappen__titel{transition:opacity var(--bc30-duur) var(--bc30-ease)}
 .bc-cm.bc30 .bc-stappen[data-modus="podium"] .bc-stappen__stap:not(.is-actief) .bc-stappen__titel{opacity:.6}
 .bc-cm.bc30 .bc-stappen[data-modus="podium"] .is-actief .bc-stappen__pil{outline-color:var(--bc30-oranje)}
 .bc-cm.bc30 .bc-stappen[data-modus="podium"] .bc-stappen__foto{position:absolute;left:var(--bc-foto-x);top:var(--bc-foto-y);width:var(--bc-foto-b);height:var(--bc-foto-h);aspect-ratio:auto;z-index:1}
 .bc-cm.bc30 .bc-stappen[data-modus="podium"] .bc-stappen__tekst{min-height:0;overflow:hidden;margin:0 0 0 48px;opacity:0;transition:opacity var(--bc30-duur-snel) var(--bc30-ease)}
 .bc-cm.bc30 .bc-stappen[data-modus="podium"] .bc-stappen__tekst p:first-child{padding-top:4px}
 .bc-cm.bc30 .bc-stappen[data-modus="podium"] .bc-stappen__tekst p:last-child{padding-bottom:12px}
 .bc-cm.bc30 .bc-stappen[data-modus="podium"] .is-actief .bc-stappen__tekst{opacity:1;transition:opacity var(--bc30-duur-in) var(--bc30-ease) var(--bc30-duur-snel)}
 .bc-cm.bc30 .bc-stappen[data-modus="podium"] .bc-stappen__podium{display:block;position:relative;height:min(calc(100vh - 168px),36vw,500px);height:min(calc(100svh - 168px),36vw,500px);border-radius:var(--bc30-r-kaart);background:var(--bc30-vlak)}
 .bc-cm.bc30 .bc-stappen[data-modus="podium"] .bc-stappen__podium:after{content:"";position:absolute;z-index:2;right:-18px;top:-22px;width:96px;aspect-ratio:1;background:var(--wpr-bg-26f03441-36bc-4ab1-a35a-961d24ca127e) center/contain no-repeat;rotate:10deg}
 /* Meten (service-grid.js): even zonder overgang, zodat de hoogtes kloppen. */
 .bc-cm.bc30 .bc-stappen.is-meten :is(.bc-stappen__stap,.bc-stappen__tekst){transition:none}
}/* Afdrukken: de eindstand, ook als de JS al een stand had gezet. */@media print{
 .bc-cm.bc30 .bc-stappen__beeld,.bc-cm.bc30 .bc-stappen__beeld img{transform:none!important;clip-path:none!important;visibility:visible!important}
 .bc-cm.bc30 .bc-stappen__links{min-height:0!important}
 .bc-cm.bc30 .bc-stappen__tekst{opacity:1!important}
 .bc-cm.bc30 .bc-stappen :is(.bc-stappen__stap,.bc-stappen__tekst){transition:none!important}
 .bc-cm.bc30 .bc-stappen__stap{-moz-column-break-inside:avoid;break-inside:avoid}
}/* Een band die begint met de stappen (tekst en bolletjes over de volle breedte), de tijdlijn of de doelgroepkaarten
   (zonder vlak): geen sierboog achter de tekst, zoals fundament.css doet voor menukaart en tegels. Hoort bij
   het samenvoegen in fundament.css (Voor Claude, batch 2). */.bc-cm.bc30 .bc-band:has(>[data-variant~="steps"]:first-child):before{display:none}/* Review B2: ook op de computer. Bij de doelgroepkaarten (kort, zonder kop) viel de boog afgeknipt onder de kaarten, bij
   de tijdlijn schoof de meeplakkende kop eroverheen. */.bc-cm.bc30 .bc-band:has(>:is([data-variant~="tijdlijn"],[data-variant~="pictogram"]):first-child):before{display:none}/* === tijdlijn: het verhaal van een persoon (journey-timeline, O43; Bram 02-10 over de 2.0-vorm: "vind dit eig
   beter, maar graag nog beter maken"). Op de computer de kop links die meeplakt en het verhaal rechts (2.0:
   .72fr tegen 1.28fr), de alinea's komen gestaffeld binnen (motion.js). Beter dan 2.0: een leesdraad links van
   de alinea's die met het lezen oranje volloopt (--bc-voortgang, service-grid.js), en bij jaartallen een echte
   tijdlijn: kleine bolletjes op dezelfde lijn die vullen als het verhaal daar is. Onder 1000 px een kolom. De wrap is
   die van elke sectie (1300), zodat de kop op de inhoudsrand staat (review b7: kop op 192 px, raster op 102). === */@media(min-width:1000px){
 .bc-cm.bc30 [data-variant~="tijdlijn"]>.bc-concept-grid__wrap:has(>.bc-concept-grid__kopkolom){display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);-moz-column-gap:var(--bc30-kolom);column-gap:var(--bc30-kolom);align-items:start}
 .bc-cm.bc30 [data-variant~="tijdlijn"] .bc-concept-grid__kopkolom{position:sticky;top:120px}
 .bc-cm.bc30 [data-variant~="tijdlijn"]>div>:is(.bc-concept-grid__also,.bc-concept-grid__foot){grid-column:2}
}@media(max-width:999px){
 .bc-cm.bc30 [data-variant~="tijdlijn"] .bc-concept-grid__kopkolom{margin:0 0 32px}
 .bc-cm.bc30 [data-variant~="tijdlijn"] .bc-concept-grid__verhaal{max-width:var(--bc30-tekstkolom)}
}.bc-cm.bc30 [data-variant~="tijdlijn"] :is(.bc-concept-grid__title,.bc-concept-grid__eyebrow){text-align:start}.bc-cm.bc30 [data-variant~="tijdlijn"] .bc-concept-grid__title{margin:0}.bc-cm.bc30 .bc-concept-grid__verhaal{position:relative;min-width:0}.bc-cm.bc30 .bc-concept-grid__alinea{font:400 var(--bc30-fs-lead)/1.75 var(--bc30-font-tekst);color:var(--bc30-tekst);margin:0 0 24px;max-width:36em}.bc-cm.bc30 .bc-concept-grid__alinea:last-child{margin-bottom:0}.bc-cm.bc30 .bc-concept-grid__aanloop{font-family:var(--bc30-font-kop);font-weight:900;color:var(--bc30-kop)}/* Leesdraad bij alinea's (geen tijdlijnlijst): een lichte lijn links, de inkt loopt mee met het lezen. Zonder JS
   (en bij afdrukken) staat hij vol. */.bc-cm.bc30 .bc-concept-grid__verhaal:not(:has(.bc-steps__list)){padding-left:40px}.bc-cm.bc30 .bc-concept-grid__verhaal:not(:has(.bc-steps__list)):before,.bc-cm.bc30 .bc-concept-grid__verhaal:not(:has(.bc-steps__list)):after{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:var(--bc30-r-pil);background:var(--bc30-lijn)}.bc-cm.bc30 .bc-concept-grid__verhaal:not(:has(.bc-steps__list)):after{background:var(--bc30-oranje);transform-origin:top;transform:scaleY(var(--bc-voortgang,1))}@media(max-width:699px){.bc-cm.bc30 .bc-concept-grid__verhaal:not(:has(.bc-steps__list)){padding-left:24px}.bc-cm.bc30 .bc-concept-grid__alinea{font-size:var(--bc30-fs-tekst)}}@media print{.bc-cm.bc30 .bc-concept-grid__verhaal:after{transform:none!important}}/* Tijdlijn met jaartallen: kleine bolletjes op de lijn, het jaartal als kapitaaltjes boven de titel. */.bc-cm.bc30 [data-variant~="tijdlijn"] .bc-steps__list{gap:40px}.bc-cm.bc30 [data-variant~="tijdlijn"] .bc-steps__item{display:grid;grid-template-columns:20px minmax(0,1fr);-moz-column-gap:24px;column-gap:24px}.bc-cm.bc30 [data-variant~="tijdlijn"] .bc-steps__num{width:20px;height:20px}.bc-cm.bc30 .bc-steps__jaar{font:800 var(--bc30-fs-eyebrow)/1.67 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);text-transform:uppercase;color:var(--bc30-oranje-tekst);margin:0 0 4px}.bc-cm.bc30 [data-variant~="tijdlijn"] .bc-steps__body{font-size:var(--bc30-fs-tekst);max-width:36em}@media(max-width:699px){.bc-cm.bc30 [data-variant~="tijdlijn"] .bc-steps__list{gap:32px}.bc-cm.bc30 [data-variant~="tijdlijn"] .bc-steps__item{-moz-column-gap:16px;column-gap:16px}}/* === Kolommen (columns 3 of 4; features en de iconenrij van steps). Geen previewvoorbeeld; in de
   3.0-taal: drie kolommen zoals posts, vier zoals steps (twee tussen 700 en 952 px, met de compacte
   maten van de stappenkaart); drie kaarten tussen 700 en 952 px onder elkaar. === */@media(min-width:953px){
 .bc-cm.bc30 .bc-concept-grid[data-variant~="cols-3"] .bc-concept-grid__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 .bc-cm.bc30 .bc-concept-grid[data-variant~="cols-4"] .bc-concept-grid__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}@media(min-width:700px) and (max-width:952px){
 .bc-cm.bc30 .bc-concept-grid[data-variant~="cols-3"] .bc-concept-grid__grid{grid-template-columns:minmax(0,1fr)}
}@media(min-width:700px){
 .bc-cm.bc30 .bc-concept-grid[data-variant~="cols-4"] .bc-concept-grid__body{padding:26px 24px 30px}
 .bc-cm.bc30 .bc-concept-grid[data-variant~="cols-4"] .bc-concept-grid__body :is(h2,h3,h4,h5,h6){font-size:var(--bc30-fs-kaart);line-height:1.3;letter-spacing:-.02em;margin-bottom:10px}
 .bc-cm.bc30 .bc-concept-grid[data-variant~="cols-4"] .bc-concept-grid__body p{font-size:var(--bc30-fs-kaarttekst);line-height:1.6}
}/* === posts: berichtkaarten, drie naast elkaar (in de photo-body-vorm) === */.bc-cm.bc30 .bc-concept-grid[data-variant~="posts"] .bc-concept-grid__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}/* Kaarttekst hoogstens twee regels, ook op computer en tablet (K5B; review b7: vier tot vijf regels); de hele tekst
   blijft in de HTML en op papier. */.bc-cm.bc30 .bc-concept-grid[data-variant~="posts"] .bc-concept-grid__body p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}@media print{.bc-cm.bc30 .bc-concept-grid[data-variant~="posts"] .bc-concept-grid__body p{display:block;-webkit-line-clamp:none;overflow:visible}}@media(max-width:699px){
 .bc-cm.bc30 .bc-concept-grid[data-variant~="posts"] .bc-concept-grid__grid{grid-template-columns:1fr;gap:22px}
}/* Previewgat opgelost (analyse C 2.5): tussen 700 en 952 px gaven drie kolommen kaarten van 194 tot
   277 px breed en tot 956 px hoog. Daar staan de berichten onder elkaar met de foto links naast de
   tekst, zoals de enkele kaart (single) vanaf 953 px; de rij blijft rustig en leesbaar. */@media(min-width:700px) and (max-width:952px){
 .bc-cm.bc30 .bc-concept-grid[data-variant~="posts"] .bc-concept-grid__grid{grid-template-columns:minmax(0,1fr);gap:22px}
 .bc-cm.bc30 .bc-concept-grid[data-variant~="posts"] .bc-concept-grid__card{flex-direction:row;align-items:stretch}
 .bc-cm.bc30 .bc-concept-grid[data-variant~="posts"] .bc-concept-grid__photo{position:relative;flex:0 0 40%;height:auto;min-height:260px}
 .bc-cm.bc30 .bc-concept-grid[data-variant~="posts"] .bc-concept-grid__photo img{position:absolute;inset:0;width:100%;height:100%}
 .bc-cm.bc30 .bc-concept-grid[data-variant~="posts"] .bc-concept-grid__body{align-self:center}
}/* === Kenmerken per kaart: korte feiten als pillen (champagne #modellen) === */.bc-cm.bc30 .bc-concept-grid__kenmerken{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 16px;padding:0}.bc-cm.bc30 .bc-concept-grid__kenmerken li{margin:0;padding:7px 13px 7px 30px;border:1px solid #fff9ef40;border-radius:var(--bc30-r-pil);font:700 var(--bc30-fs-klein)/1.2 var(--bc30-font-tekst);color:var(--bc30-op-donker-kop);position:relative}.bc-cm.bc30 .bc-concept-grid__kenmerken li:before{content:"";position:absolute;left:11px;top:50%;width:11px;height:6px;border-left:2px solid var(--bc30-oranje);border-bottom:2px solid var(--bc30-oranje);transform:translateY(-70%) rotate(-45deg)}@media(max-width:699px){.bc-cm.bc30 .bc-concept-grid__kenmerken li{padding:6px 11px 6px 27px}}/* === Mobiel (besluit Bram 2026-09-30, voorstel 4): veegstrook en raster, onder 700 px.
   Veeg: de rij loopt tot de schermrand, de volgende kaart steekt in beeld, stipjes eronder
   (src/bc30/mobiel.js). Raster: twee kolommen met alleen foto en titel; tekst en knop blijven in
   de HTML. De eerste kaart lijnt uit met de inhoud (opmerking 41, Bram 03-10 "let it breathe"): scroll-padding
   is de gutter, want een procent in scroll-padding telt tegen de strook zelf (50vw - 50% werd 0 en de strook
   snapte bij het laden 24 px op, de eerste kaart tegen de schermrand). === */@media(max-width:699px){
 .bc-cm.bc30 [data-mobiel="veeg"] :is(.bc-concept-grid__grid,.bc-case-strip__grid){display:flex!important;grid-template-columns:none!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px!important;margin-inline:calc(50% - 50vw)!important;padding:4px calc(50vw - 50%) 14px!important;scroll-padding-inline:var(--bc30-gutter);scrollbar-width:none;overscroll-behavior-x:contain;align-items:flex-start}
 .bc-cm.bc30 [data-mobiel="veeg"] :is(.bc-concept-grid__grid,.bc-case-strip__grid)::-webkit-scrollbar{display:none}
 .bc-cm.bc30 [data-mobiel="veeg"] :is(.bc-concept-grid__grid,.bc-case-strip__grid)>*{flex:0 0 84%!important;width:84%!important;max-width:none!important;margin:0!important;scroll-snap-align:start;height:auto;min-height:0}
 /* Elke kaart zo hoog als zijn inhoud, de tekst hoogstens twee regels (keuze 5B, Bram 2026-10-02: geen leeg vlak
    onder een korte kaart). */
 .bc-cm.bc30 [data-mobiel="veeg"] :is(.bc-concept-grid__body,.bc-case-strip__body) p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .bc-cm.bc30 .bc-concept-grid[data-mobiel="raster"] .bc-concept-grid__grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
 .bc-cm.bc30 .bc-concept-grid[data-mobiel="raster"] .bc-concept-grid__card{min-height:0!important;height:auto!important;aspect-ratio:4/5;width:auto!important;margin:0!important}
 .bc-cm.bc30 .bc-concept-grid[data-mobiel="raster"] .bc-concept-grid__card p{display:none!important}
 .bc-cm.bc30 .bc-concept-grid[data-mobiel="raster"] .bc-concept-grid__body{inset:auto 0 0 0!important;padding:12px!important;margin:0!important}
 .bc-cm.bc30 .bc-concept-grid[data-mobiel="raster"] .bc-concept-grid__card :is(h2,h3,h4,h5){font-size:var(--bc30-fs-tegel)!important;line-height:1.22!important;margin:0!important;max-width:none!important;hyphens:manual} /* geen streepje (gemene regel b7; nachtrun 05-10: "Koffiema- chine" op 390 en 360) */
 /* Past het langste woord (--kaart-woord letters, uit de render; Merriweather 900 is tot .62em per letter) niet in de kaart,
    dan een kleinere titel in plaats van een breuk ("Champagnetoren" op 360: 130 px in 127). */
 .bc-cm.bc30 .bc-concept-grid[data-mobiel="raster"] .bc-concept-grid__body{container-type:inline-size}
 .bc-cm.bc30 .bc-concept-grid[data-mobiel="raster"] .bc-concept-grid__card :is(h2,h3,h4,h5)[style]{--bc30-fs-tegel-past:calc(100cqi / (var(--kaart-woord,1) * .64));font-size:min(var(--bc30-fs-tegel),var(--bc30-fs-tegel-past))!important} /* zoals --bc30-fs-kop-past van de koptegel */
 .bc-cm.bc30 .bc-concept-grid[data-mobiel="raster"] .bc-concept-grid__go{display:none!important}
}/* Afdrukken: een veegstrook drukt anders alleen de zichtbare kaarten af. */@media print{
 .bc-cm.bc30 [data-mobiel="veeg"] :is(.bc-concept-grid__grid,.bc-case-strip__grid){display:grid!important;overflow:visible!important;margin-inline:0!important;padding:0!important}
 .bc-cm.bc30 [data-mobiel="veeg"] :is(.bc-concept-grid__grid,.bc-case-strip__grid)>*{width:auto!important}
 .bc-cm.bc30 .bc-dots{display:none!important}
}/* === OccasionCards: gelegenheidsstrook (variant strip), foto links en tekst rechts
   (preview related-cards.css). === */.bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"]{padding:28px 0 60px}.bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"] .bc-concept-grid__title{font-size:var(--bc30-fs-kaart-foto);line-height:1.2;text-align:left;margin-bottom:18px;letter-spacing:-.02em}.bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"] .bc-concept-grid__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"] .bc-concept-grid__card,.bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"] .bc-concept-grid__card.is-wide{display:grid;grid-template-columns:168px 1fr;aspect-ratio:auto;min-height:0;border-radius:var(--bc30-r-kaart);overflow:hidden;background:var(--bc30-vlak);box-shadow:none;isolation:auto}.bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"] .bc-concept-grid__card:after{display:none}.bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"] .bc-concept-grid__card>img{position:static;width:168px;height:100%;min-height:150px;-o-object-fit:cover;object-fit:cover}.bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"] .bc-concept-grid__body{position:static;min-width:0;padding:22px 24px;color:var(--bc30-kop);display:flex;flex-direction:column;align-items:flex-start;gap:8px}/* Titels breken niet met een streepje (gemene regel b7; op 1000 "Champagne-toren"). */.bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"] .bc-concept-grid__body :is(h2,h3,h4,h5){font-size:var(--bc30-fs-kaart);line-height:1.15;color:var(--bc30-kop);margin:0;overflow-wrap:break-word;max-width:100%;text-shadow:none;hyphens:manual}.bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"] .bc-concept-grid__body p{font-size:var(--bc30-fs-kaarttekst);line-height:1.5;color:var(--bc-text-light);margin:0;text-shadow:none}.bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"] .bc-concept-grid__go{margin-top:auto}/* Doorklikken als onderstreepte tekstlink in de strook en in een veegstrook (opmerkingen 38 en 46); de oranje knop
   blijft voor de hoofdactie. Op het lichte vlak van de strook de donkerdere oranje tekst (keuze 6B). */.bc-cm.bc30 :is([data-mobiel="veeg"],section.bc-concept-grid[data-variant~="strip"],section.bc-concept-grid[data-variant~="posts"],section.bc-concept-grid[data-variant~="staand"]) .bc-concept-grid__go,.bc-cm.bc30 :is([data-mobiel="veeg"],section.bc-concept-grid[data-variant~="strip"],section.bc-concept-grid[data-variant~="posts"],section.bc-concept-grid[data-variant~="staand"]) .bc-concept-grid__card:hover .bc-concept-grid__go{background:none;padding:0;min-height:0;height:auto;box-shadow:none;border-radius:0;color:var(--bc30-oranje);font-size:var(--bc30-fs-kaarttekst);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}.bc-cm.bc30 :is([data-mobiel="veeg"],section.bc-concept-grid[data-variant~="strip"],section.bc-concept-grid[data-variant~="posts"],section.bc-concept-grid[data-variant~="staand"]) .bc-concept-grid__go>span{display:none}.bc-cm.bc30 section.bc-concept-grid:is([data-variant~="strip"],[data-variant~="staand"]) .bc-concept-grid__go,.bc-cm.bc30 section.bc-concept-grid:is([data-variant~="strip"],[data-variant~="staand"]) .bc-concept-grid__card:hover .bc-concept-grid__go{color:var(--bc30-oranje-tekst)}/* staand: tekst onder de foto op wit (batch 7, UX-sweep) *//* Kaarten met een donker vlak (photo-body, icon-body, posts): ook de link van de kaart zelf ("Lees meer", render ctaAlsTekstlink)
   en die van een linkkaart zijn een onderstreepte tekstlink, zoals de berichtkaarten; geen oranje knop per kaart (keuze Bram
   05-10, regel 0210-38). */.bc-cm.bc30 section.bc-concept-grid:is([data-variant~="photo-body"],[data-variant~="icon-body"],[data-variant~="posts"]) :is(.bc-concept-grid__go,.bc-concept-grid__cta),.bc-cm.bc30 section.bc-concept-grid:is([data-variant~="photo-body"],[data-variant~="icon-body"],[data-variant~="posts"]) :is(.bc-concept-grid__card:hover .bc-concept-grid__go,.bc-concept-grid__cta:hover){display:inline;width:auto;min-height:0;height:auto;padding:0;background:none;box-shadow:none;border-radius:0;color:var(--bc30-oranje);font:700 var(--bc30-fs-kaarttekst)/1.4 var(--bc30-font-tekst);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}.bc-cm.bc30 section.bc-concept-grid:is([data-variant~="photo-body"],[data-variant~="icon-body"],[data-variant~="posts"]) .bc-concept-grid__go>span{display:none}@media(hover:hover){.bc-cm.bc30 section.bc-concept-grid:is([data-variant~="photo-body"],[data-variant~="icon-body"],[data-variant~="posts"]) :is(.bc-concept-grid__card:hover .bc-concept-grid__go,.bc-concept-grid__cta:hover){text-decoration-thickness:2px}}.bc-cm.bc30 .bc-concept-grid__sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media(max-width:699px){
 .bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"] .bc-concept-grid__grid{grid-template-columns:1fr}
 .bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"] .bc-concept-grid__card,.bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"] .bc-concept-grid__card.is-wide{grid-template-columns:120px 1fr;aspect-ratio:auto;min-height:0}
 .bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"] .bc-concept-grid__card>img{width:120px}
 .bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"] .bc-concept-grid__body{padding:16px 18px}
 .bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"] .bc-concept-grid__body p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}/* Gelegenheidsstrook als veegstrook op de telefoon (O37, Bram 03-10): de kaart staat dan rechtop, foto boven
   en tekst eronder, zodat een kaart van 84 procent breed geen smalle tekstkolom krijgt en een titel nooit
   midden in een woord breekt (vondst B1, "Champag- nebar"). */@media(max-width:699px){
 .bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"][data-mobiel="veeg"] :is(.bc-concept-grid__card,.bc-concept-grid__card.is-wide){display:flex;flex-direction:column;grid-template-columns:none}
 .bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"][data-mobiel="veeg"] .bc-concept-grid__card>img{width:100%;height:auto;min-height:0;aspect-ratio:16/10}
 .bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"][data-mobiel="veeg"] .bc-concept-grid__body{padding:16px 18px 18px;flex:1 1 auto}
 .bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"][data-mobiel="veeg"] .bc-concept-grid__body :is(h2,h3,h4,h5){overflow-wrap:normal}
}/* Previewgat opgelost (analyse C 2.5): op 700 px liet het tweekolomsrooster een tekstkolom van
   ~137 px over, waardoor koppen midden in een woord braken. Twee kolommen alleen als elke kaart
   minstens 420 px breed is (tekstkolom ruim 200 px); smaller een kolom, met de foto van 168 px. */@media(min-width:700px){
 .bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"] .bc-concept-grid__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
 /* Een oneven laatste kaart over beide kolommen, zoals bij de kaarten zonder foto (review b7: de vijfde kaart stond
    alleen). */
 .bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"] .bc-concept-grid__card:nth-child(odd):last-child:not(:first-child){grid-column:1/-1}
}/* Een kaart zonder foto: de tekst over de hele breedte. */.bc-cm.bc30 section.bc-concept-grid[data-variant~="strip"] .bc-concept-grid__body:first-child{grid-column:1/-1}/* === Aliassen (steps, features, related-pages, ...): de alias houdt zijn eigen wortelklasse
   (bc-<type>) naast bc-concept-grid. Een 2.0-wortelregel die de 3.0-sectie niet zelf zet, wordt
   hier teruggezet (gemeten met een render van de alias tegen dezelfde data als basisblok). === */.bc-cm.bc30 .bc-concept-grid.bc-steps{max-width:none;transform:none;transition:none}/* === Review run 4 (2026-10-01) ===
   Kaart met de foto als achtergrond (default): de tekst telt mee voor de hoogte. De vaste verhouding
   (1,65; telefoon 1,2) is een minimum; een lange titel of tekst maakt de kaart hoger in plaats van boven
   de kaart weg te vallen (bevinding 2: koffiebar-huren-op-locatie op 680 tot 720 px alle titels weg). De
   foto ligt absoluut achter de tekst; een onzichtbaar :before met de verhouding en de tekst delen dezelfde
   rastercel, zodat de cel minstens de verhouding hoog is en meegroeit met de tekst (min-height:min-content
   werkt niet op een vak met aspect-ratio). Dezelfde afstanden als de 2.0-plaatsing (24/24/22, telefoon
   18/18/16), dus bij korte tekst verandert er niets. */.bc-cm.bc30 .bc-concept-grid:where(:not([data-variant~="photo-body"],[data-variant~="icon-body"],[data-variant~="strip"],[data-variant~="steps"],[data-variant~="posts"],[data-variant~="single"],[data-variant~="tijdlijn"],[data-variant~="pictogram"])) .bc-concept-grid__card{display:grid;grid-template-columns:minmax(0,1fr);aspect-ratio:auto}.bc-cm.bc30 .bc-concept-grid:where(:not([data-variant~="photo-body"],[data-variant~="icon-body"],[data-variant~="strip"],[data-variant~="steps"],[data-variant~="posts"],[data-variant~="single"],[data-variant~="tijdlijn"],[data-variant~="pictogram"])) .bc-concept-grid__card:before{content:"";grid-area:1/1;align-self:start;width:100%;aspect-ratio:1.65}.bc-cm.bc30 .bc-concept-grid:where(:not([data-variant~="photo-body"],[data-variant~="icon-body"],[data-variant~="strip"],[data-variant~="steps"],[data-variant~="posts"],[data-variant~="single"],[data-variant~="tijdlijn"],[data-variant~="pictogram"])) .bc-concept-grid__card>img{position:absolute;inset:0;width:100%;height:100%}.bc-cm.bc30 .bc-concept-grid:where(:not([data-variant~="photo-body"],[data-variant~="icon-body"],[data-variant~="strip"],[data-variant~="steps"],[data-variant~="posts"],[data-variant~="single"],[data-variant~="tijdlijn"],[data-variant~="pictogram"])) .bc-concept-grid__body{grid-area:1/1;align-self:end;position:relative;left:auto;right:auto;bottom:auto;margin:22px 24px}@media(max-width:640px){
 .bc-cm.bc30 .bc-concept-grid:where(:not([data-variant~="photo-body"],[data-variant~="icon-body"],[data-variant~="strip"],[data-variant~="steps"],[data-variant~="posts"],[data-variant~="single"],[data-variant~="tijdlijn"],[data-variant~="pictogram"])) .bc-concept-grid__card:before{aspect-ratio:1.2}
 .bc-cm.bc30 .bc-concept-grid:where(:not([data-variant~="photo-body"],[data-variant~="icon-body"],[data-variant~="strip"],[data-variant~="steps"],[data-variant~="posts"],[data-variant~="single"],[data-variant~="tijdlijn"],[data-variant~="pictogram"])) .bc-concept-grid__body{margin:16px 18px}
 /* Kaart zonder foto of pictogram (features zonder pictogram): geen minimumhoogte van de fotokaart, dus
    geen leeg vlak onder de tekst (bevinding 12). Met een pictogram blijft de hoogte zoals de preview. */
 .bc-cm.bc30 .bc-concept-grid:is([data-variant~="photo-body"],[data-variant~="icon-body"]) .bc-concept-grid__card:not(:has(img)){min-height:0}
}/* Meerdere intro-alinea's: de grote afstand alleen onder de laatste (bevinding 12). */.bc-cm.bc30 .bc-concept-grid__intro:has(+.bc-concept-grid__intro){margin-bottom:14px}/* Hover nooit teal (Architectuur 12, bevinding 3): de knop onder het rooster wordt donker oranje. */.bc-cm.bc30 .bc-concept-grid__foot-btn:hover{background:var(--bc30-oranje-hover);box-shadow:var(--bc30-gloed)}/* Raster buiten de home (cocktailhub; review b7): tussen 641 en 1199 px was de kaart te laag (op 700 de titel tegen de
   bovenrand) en las tekst op een felle foto niet (neon, p10 2,7 tot 3,1). Daar een hogere kaart en het volle verloop van
   de telefoon. De home (band vlak) heeft eigen maten en blijft precies 8138. */@media(min-width:641px) and (max-width:1199px){
 .bc-cm.bc30 section.bc-concept-grid[data-variant~="raster"]:not([data-variant=vlak] *) .bc-concept-grid__card:before{aspect-ratio:1.25}
 .bc-cm.bc30 section.bc-concept-grid[data-variant~="raster"]:not([data-variant=vlak] *) .bc-concept-grid__card:after{background:linear-gradient(0deg,color-mix(in srgb,var(--bc30-zwart) 94%,transparent) 0%,color-mix(in srgb,var(--bc30-zwart) 82%,transparent) 38%,color-mix(in srgb,var(--bc30-zwart) 35%,transparent) 62%,transparent 84%)}
}/* Raster buiten de home (nachtrun 05-10, koffie en smoothies): een oneven laatste kaart over de hele breedte, even hoog als
   de andere (twee keer de verhouding), op computer, tablet en in het telefoonraster van twee; de kaarttekst hoogstens twee
   regels met een beletselteken (K5B; de hele tekst blijft in de HTML en op papier). */.bc-cm.bc30 section.bc-concept-grid[data-variant~="raster"]:not([data-variant=vlak] *) .bc-concept-grid__card:last-child:nth-child(odd):not(:first-child){grid-column:1/-1}.bc-cm.bc30 section.bc-concept-grid[data-variant~="raster"]:not([data-variant=vlak] *) .bc-concept-grid__card:last-child:nth-child(odd):not(:first-child):before{aspect-ratio:3.3}.bc-cm.bc30 section.bc-concept-grid[data-variant~="raster"]:not([data-variant=vlak] *) .bc-concept-grid__body p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}@media(min-width:641px) and (max-width:1199px){.bc-cm.bc30 section.bc-concept-grid[data-variant~="raster"]:not([data-variant=vlak] *) .bc-concept-grid__card:last-child:nth-child(odd):not(:first-child):before{aspect-ratio:2.5}}@media(max-width:699px){.bc-cm.bc30 section.bc-concept-grid[data-variant~="raster"][data-mobiel="raster"] .bc-concept-grid__card:last-child:nth-child(odd):not(:first-child),.bc-cm.bc30 section.bc-concept-grid[data-variant~="raster"][data-mobiel="raster"] .bc-concept-grid__card:last-child:nth-child(odd):not(:first-child):before{aspect-ratio:8/5}}@media print{.bc-cm.bc30 section.bc-concept-grid[data-variant~="raster"] .bc-concept-grid__body p{display:block;-webkit-line-clamp:none;overflow:visible}}/* Tablet (700 tot 999): titel, tekst en knop vullen de kaart tot 48 px onder de bovenrand, boven het verloop van de kaart
   ("Barista op locatie inhuren" 2,65:1 op een witte blouse). Daar loopt een zacht donker vlak met het tekstblok mee: het
   begint 48 px boven de titel en is achter de titel net zo donker als AA voor grote tekst vraagt (3:1); lager neemt het
   verloop van de kaart het over. Computer, telefoon en de home blijven gelijk (akkoord Claude, nachtrun 05-10). */@media(min-width:700px) and (max-width:999px){.bc-cm.bc30 section.bc-concept-grid[data-variant~="raster"]:not([data-variant=vlak] *) .bc-concept-grid__body:before{content:"";position:absolute;z-index:-1;inset:-48px -24px -22px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bc30-zwart) 25%,transparent) 48px,transparent 75%);pointer-events:none}}/* Pictogrammen in plaats van foto's (data.beeld "icoon", ref-cats op de referentiepagina): helemaal
   zichtbaar, kleiner, op een crème vlak; niet bijgesneden als een foto (blokkenboek 2026-10-01). */.bc-cm.bc30 section.bc-concept-grid[data-beeld="icoon"] .bc-concept-grid__card>img{-o-object-fit:contain;object-fit:contain;padding:34px;background:var(--bc30-creme)}@media(max-width:699px){.bc-cm.bc30 section.bc-concept-grid[data-beeld="icoon"] .bc-concept-grid__card>img{padding:24px}}/* === staand: fotokaarten naar blogs (photo-cards, O44; Bram 02-10 over de 2.0-kaarten: "vind dit mooier dan
   3.0"). Staand 3:4, de foto met een donker verloop van onder, de titel op de foto (kaarttitel op een foto: 28,
   tablet 22, telefoon 24), korte tekst hoogstens twee regels en "Lees meer" als onderstreepte link. Hover: de
   kaart komt 4 px los met de fotoschaduw, de foto zoomt zacht in. Compact (columns 4): vierkant, vier naast
   elkaar, titel 22. De vorm leunt op de fotokaart hierboven (foto absoluut, :before houdt de verhouding als
   minimum, zodat een lange titel de kaart hoger maakt in plaats van eruit te vallen). Tablet: twee naast
   elkaar, een losse laatste kaart over de hele breedte; telefoon: veegstrook. === */.bc-cm.bc30 [data-variant~="staand"] .bc-concept-grid__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.bc-cm.bc30 [data-variant~="staand"] .bc-concept-grid__card:before{aspect-ratio:3/4}/* Verloop voller tot boven een lange titel (review b7: op 1000 p10 2,35:1 bij vijf regels op een lichte foto). */.bc-cm.bc30 [data-variant~="staand"] .bc-concept-grid__card:after{background:linear-gradient(0deg,var(--bc30-zwart),color-mix(in srgb,var(--bc30-zwart) 85%,transparent) 40%,color-mix(in srgb,var(--bc30-zwart) 40%,transparent) 65%,transparent 85%);opacity:1}.bc-cm.bc30 [data-variant~="staand"] .bc-concept-grid__card{box-shadow:none}.bc-cm.bc30 [data-variant~="staand"] .bc-concept-grid__card>img{-o-object-fit:cover;object-fit:cover}.bc-cm.bc30 [data-variant~="staand"] .bc-concept-grid__body{margin:24px}.bc-cm.bc30 [data-variant~="staand"] .bc-concept-grid__body :is(h2,h3,h4,h5){font:900 var(--bc30-fs-kaart-foto)/1.2 var(--bc30-font-kop);letter-spacing:-.02em;color:var(--bc30-op-donker-kop);margin:0}.bc-cm.bc30 [data-variant~="staand"] .bc-concept-grid__body p{font:400 var(--bc30-fs-kaarttekst)/1.5 var(--bc30-font-tekst);color:var(--bc30-op-donker-tekst);margin:8px 0 0;max-width:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.bc-cm.bc30 [data-variant~="staand"] .bc-concept-grid__go{display:inline-block;margin-top:12px}/* Compact is altijd vierkant (O44; ronde 5, Bram: "vierkant was gewoon prima"), vier kolommen alleen bij vier of
   meer kaarten. Op de tablet houdt een losse laatste kaart over de hele breedte zijn 2:1 (die regel weegt zwaarder). */.bc-cm.bc30 [data-variant~="staand"][data-variant~="compact"] .bc-concept-grid__card:before{aspect-ratio:1}.bc-cm.bc30 [data-variant~="staand"][data-variant~="compact"] .bc-concept-grid__body :is(h2,h3,h4,h5){font-size:var(--bc30-fs-kaart)}@media(min-width:1000px){
 .bc-cm.bc30 [data-variant~="staand"][data-variant~="compact"] .bc-concept-grid__grid:has(>:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
}@media(min-width:700px) and (max-width:999px){
 .bc-cm.bc30 [data-variant~="staand"] .bc-concept-grid__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .bc-cm.bc30 [data-variant~="staand"] .bc-concept-grid__card:last-child:nth-child(odd){grid-column:1/-1}
 .bc-cm.bc30 [data-variant~="staand"] .bc-concept-grid__card:last-child:nth-child(odd):before{aspect-ratio:2}
}@media(max-width:699px){
 .bc-cm.bc30 [data-variant~="staand"] .bc-concept-grid__body{margin:20px}
}@media(hover:hover){
 .bc-cm.bc30 [data-variant~="staand"] .bc-concept-grid__card:hover{transform:translateY(-4px);box-shadow:var(--bc30-schaduw)}
 .bc-cm.bc30 [data-variant~="staand"] .bc-concept-grid__card:hover img{transform:scale(1.04)}
 .bc-cm.bc30 [data-variant~="staand"] .bc-concept-grid__card:hover .bc-concept-grid__go{text-decoration-thickness:2px}
}/* === pictogram: doelgroepkaarten (ref-cats, O45; Bram 02-10 over de 2.0-kaarten: "vind dit veel mooier dan je
   nieuwe optie"). Vier naast elkaar, zonder vlak: het pictogram op ware grootte (niet bijgesneden), de korte regel
   boven een vette titel, zodat ze samen een zin lezen. Hover: een off-white vlak, de kaart 4 px omhoog, het
   pictogram iets groter, de titel oranje. Titel in Mulish 800 (zoals 2.0) op --bc30-fs-h4: "evenementenbureaus"
   is dan 187 px en past vanaf 1000 px in vier kolommen. Tablet: twee naast elkaar. Telefoon: veegstrook (in een
   raster van twee is een kolom op 360 px 150 px breed; het woord niet). === */.bc-cm.bc30 [data-variant~="pictogram"] .bc-concept-grid__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.bc-cm.bc30 [data-variant~="pictogram"] .bc-concept-grid__card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;aspect-ratio:auto;min-height:0;overflow:visible;padding:24px 16px;border-radius:var(--bc30-r-kaart);background:transparent;box-shadow:none;color:var(--bc30-kop);isolation:auto}.bc-cm.bc30 [data-variant~="pictogram"] .bc-concept-grid__card:before,.bc-cm.bc30 [data-variant~="pictogram"] .bc-concept-grid__card:after{display:none}/* Pictogram in BC-oranje (ronde 5, Bram 05-10: "check"). De pictogrammen zijn zwarte PNG's op transparant (de vier van
   referenties-20); het filter maakt ze eerst zwart en dan precies --bc30-oranje (#ee7437, in Chromium gemeten op 238,116,55).
   Een filter in plaats van een masker: een masker met een plaatje van barcompany.nl vraagt CORS-koppen. */.bc-cm.bc30 [data-variant~="pictogram"] .bc-concept-grid__card>img{position:static;display:block;width:auto;height:64px;max-width:100%;aspect-ratio:auto;-o-object-fit:contain;object-fit:contain;padding:0;background:none;filter:brightness(0) saturate(100%) invert(49%) sepia(77%) saturate(793%) hue-rotate(338deg) brightness(98%) contrast(90%)}.bc-cm.bc30 [data-variant~="pictogram"] .bc-concept-grid__body{position:static;inset:auto;margin:16px 0 0;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px}.bc-cm.bc30 [data-variant~="pictogram"] .bc-concept-grid__boven{font:400 var(--bc30-fs-kaarttekst)/1.5 var(--bc30-font-tekst);color:var(--bc30-tekst-zacht);margin:0;text-shadow:none}.bc-cm.bc30 [data-variant~="pictogram"] .bc-concept-grid__body :is(h2,h3,h4,h5){font:800 var(--bc30-fs-h4)/1.3 var(--bc30-font-tekst);letter-spacing:normal;color:var(--bc30-kop);margin:0;text-shadow:none;hyphens:manual;overflow-wrap:normal;transition:color var(--bc30-duur) var(--bc30-ease)}@media(min-width:700px) and (max-width:999px){
 .bc-cm.bc30 [data-variant~="pictogram"] .bc-concept-grid__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}@media(max-width:699px){
 .bc-cm.bc30 [data-variant~="pictogram"]:not([data-mobiel]) .bc-concept-grid__grid{grid-template-columns:minmax(0,1fr)}
 .bc-cm.bc30 [data-variant~="pictogram"][data-mobiel="veeg"] .bc-concept-grid__grid>*{flex:0 0 240px!important;width:240px!important}
 .bc-cm.bc30 [data-variant~="pictogram"] .bc-concept-grid__card{background:var(--bc30-vlak);padding:24px 12px}
}@media(hover:hover){
 .bc-cm.bc30 [data-variant~="pictogram"] .bc-concept-grid__card{transition:background var(--bc30-duur) var(--bc30-ease),transform var(--bc30-duur) var(--bc30-ease)}
 .bc-cm.bc30 [data-variant~="pictogram"] .bc-concept-grid__card:hover{background:var(--bc30-vlak);transform:translateY(-4px);box-shadow:none}
 .bc-cm.bc30 [data-variant~="pictogram"] .bc-concept-grid__card:hover img{transform:scale(1.06)}
}.bc-cm.bc30 [data-variant~="pictogram"] .bc-concept-grid__card:is(:hover,:focus-visible) :is(h2,h3,h4,h5){color:var(--bc30-oranje-tekst)}/* === Fotokaarten (default) als rij (woord rij; fase B batch 4a, O33 richting C, Bram 04-10: "C is imo meest rustigst ivm
   daar geen knop constant inzit"). Staand 3:4, het nummer rechtsboven (36 zoals de conceptkaarten op de home, keuze ronde 2;
   telefoon 32), de titel, de tekst hoogstens twee regels met een beletselteken (de hele tekst blijft in de HTML) en "Lees
   meer" als onderstreepte tekst; geen knop, geen schaduw. Een rij die rechts doorloopt tot de schermrand: drie in beeld op
   de computer, twee op de tablet, op de telefoon de veegstrook hierboven; teller en pijlen eronder (service-grid.js). De
   sectie is een container, zodat de rij de inhoudsrand kent (--kg-zij, gelijk aan de wrap: 1300 breed, 32 rand, 24 tot
   640 px) zonder 100vw (dat telt de schuifbalk mee). Op de bestaande fotokaart hierboven: foto absoluut, :before houdt de
   verhouding als minimum. Het raster (woord raster, navigatiepagina's, batch 5a) is de fotokaart hierboven, zoals voor
   batch 4a; de regels voor de rij gelden er niet voor. Alleen als veegstrook (cocktailhub, data.mobiel veeg) valt de
   schaduw van de kaart weg: de strook knipt hem anders onderaan af. === */@media(max-width:699px){.bc-cm.bc30 [data-variant~="raster"][data-mobiel="veeg"] .bc-concept-grid__card{box-shadow:none}}.bc-cm.bc30 [data-variant~="rij"]{container-type:inline-size;--kg-zij:max(32px,calc(50cqw - 618px));--kg-zicht:3}/* Zonder JS een dunne schuifbalk, zodat een rij van vier of meer ook met de muis te schuiven is (review 4a, L15); de JS
   zet data-bc-bediend op de rij (teller en pijlen of stipjes), dan verdwijnt de balk. */.bc-cm.bc30 [data-variant~="rij"] .bc-concept-grid__grid{display:flex;gap:var(--bc30-gap);margin:0 calc(-1 * var(--kg-zij));padding:8px var(--kg-zij) 16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--kg-zij);scrollbar-width:thin;scrollbar-color:var(--bc30-tekst-zacht) transparent;overscroll-behavior-x:contain}.bc-cm.bc30 [data-variant~="rij"] .bc-concept-grid__grid[data-bc-bediend]{scrollbar-width:none}.bc-cm.bc30 [data-variant~="rij"] .bc-concept-grid__grid[data-bc-bediend]::-webkit-scrollbar{display:none}.bc-cm.bc30 [data-variant~="rij"] .bc-concept-grid__card,.bc-cm.bc30 [data-variant~="rij"] .bc-concept-grid__card:hover{flex:0 0 calc((100cqw - 2 * var(--kg-zij) - (var(--kg-zicht) - 1) * var(--bc30-gap)) / var(--kg-zicht));scroll-snap-align:start;box-shadow:none;transform:none}.bc-cm.bc30 [data-variant~="rij"] .bc-concept-grid__card:before{aspect-ratio:3/4}/* Verloop van onder en een schaduw achter het nummer, in het zwart van de tokens (review 4a, L10: was #181716). De
   kleurhints (50 en 55 procent) en de laagdekking .92 geven dezelfde dekking als het verloop van 4a (0,92 onder, 0,76 op
   30 procent, 0,35 op 54, weg op 72), iets donkerder, dus de tekst op de foto haalt minstens het contrast van 4a. */.bc-cm.bc30 [data-variant~="rij"] .bc-concept-grid__card:after{background:linear-gradient(0deg,var(--bc30-zwart),50%,transparent 72%),radial-gradient(280px 220px at 100% 0,var(--bc30-zwart),55%,transparent);opacity:.92}.bc-cm.bc30 [data-variant~="rij"] .bc-concept-grid__num{top:20px;right:24px;font:900 var(--bc30-fs-kaartnummer)/1 var(--bc30-font-kop);letter-spacing:-.02em;color:var(--bc30-op-donker-kop);-webkit-text-stroke:0}.bc-cm.bc30 [data-variant~="rij"] .bc-concept-grid__body{margin:var(--bc30-kaart-pad)}.bc-cm.bc30 [data-variant~="rij"] .bc-concept-grid__body :is(h2,h3,h4,h5){font:900 var(--bc30-fs-kaart-foto)/var(--bc30-lh-kop) var(--bc30-font-kop);letter-spacing:-.01em;color:var(--bc30-op-donker-kop);margin:0}/* Kaarttekst: hoogstens twee regels, en altijd twee regels hoog (3em bij regelhoogte 1,5), zodat de titels in de rij op een
   lijn staan als de ene kaart een regel tekst heeft en de andere twee (review 4a, M7: tot 22 px verschil). Een kaart zonder
   tekst in een rij waar andere kaarten wel tekst hebben houdt dezelfde ruimte onder de titel vrij. Zonder tekst in de hele
   rij (alleen titel en link, schets C zoals getekend) of bij een losse kaart: geen lege ruimte. */.bc-cm.bc30 [data-variant~="rij"] .bc-concept-grid__body p{margin:8px 0 0;max-width:none;font:400 var(--bc30-fs-kaarttekst)/1.5 var(--bc30-font-tekst);color:var(--bc30-op-donker-tekst);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.bc-cm.bc30 [data-variant~="rij"] .bc-concept-grid__grid:has(>:nth-child(2)) .bc-concept-grid__body p{min-height:3em}.bc-cm.bc30 [data-variant~="rij"] .bc-concept-grid__grid:has(.bc-concept-grid__body>p) .bc-concept-grid__body:not(:has(>p)) :is(h2,h3,h4,h5){margin-bottom:calc(8px + 3 * var(--bc30-fs-kaarttekst))}.bc-cm.bc30 section.bc-concept-grid[data-variant~="rij"] .bc-concept-grid__card .bc-concept-grid__go{display:inline-block;margin-top:12px;padding:0;background:none;border-radius:0;box-shadow:none;font:800 var(--bc30-fs-kaarttekst)/1.4 var(--bc30-font-tekst);color:var(--bc30-op-donker-kop);text-decoration-line:underline;text-decoration-color:var(--bc30-oranje);text-decoration-thickness:2px;text-underline-offset:5px}@media(hover:hover){.bc-cm.bc30 section.bc-concept-grid[data-variant~="rij"] .bc-concept-grid__card:hover .bc-concept-grid__go{text-decoration-thickness:3px}}/* Twee kaarten: in het midden onder de kop (er schuift niets). Een losse kaart (zuurstof "Foto's") blijft liggend en
   half zo breed als de inhoud, links, zoals ervoor (Bram 2026-07-24: een grote solo-kaart domineerde de sectie). */@media(min-width:700px){.bc-cm.bc30 [data-variant~="rij"] .bc-concept-grid__grid:has(>:nth-child(2)):not(:has(>:nth-child(3))){justify-content:center}}.bc-cm.bc30 [data-variant~="rij"] .bc-concept-grid__grid:not(:has(>:nth-child(2)))>.bc-concept-grid__card{flex-basis:calc((100cqw - 2 * var(--kg-zij) - var(--bc30-gap)) / 2)}.bc-cm.bc30 [data-variant~="rij"] .bc-concept-grid__grid:not(:has(>:nth-child(2)))>.bc-concept-grid__card:before{aspect-ratio:1.65}@media(max-width:640px){.bc-cm.bc30 [data-variant~="rij"] .bc-concept-grid__grid:not(:has(>:nth-child(2)))>.bc-concept-grid__card:before{aspect-ratio:1.2}}/* Linkkaart in de rij (alsoLinks bij minder dan drie kaarten, review b7): de fotokaart zonder foto, donker, met de oranje
   boog in de hoek zoals de kop-tegel. */.bc-cm.bc30 [data-variant~="rij"] .bc-concept-grid__card.is-tegel{background:var(--bc30-donker);isolation:isolate}.bc-cm.bc30 [data-variant~="rij"] .bc-concept-grid__card.is-tegel:after{z-index:-1;inset:auto -56px -24px auto;width:200px;height:108px;background:var(--wpr-bg-696cc91c-d1d9-4c51-b49a-b08c1b26c537) center/contain no-repeat;transform:rotate(-18deg);opacity:1}@media(min-width:700px) and (max-width:999px){.bc-cm.bc30 [data-variant~="rij"]{--kg-zicht:2}}@media(max-width:699px){
 .bc-cm.bc30 [data-variant~="rij"] .bc-concept-grid__num{top:16px;right:20px}
 /* Uitdrukkelijk onder elkaar (mobiel stapel of raster) of een enkele kaart: geen rij, en dan ook niet de staande vorm
    (review 4a, H1: in het raster van twee viel de titel uit de kaart van 4:5 en stond het nummer van 32 px in een kaart van
    165 px). Onder elkaar de liggende kaart van het raster, in het raster van twee de tegel zonder nummer. */
 .bc-cm.bc30 [data-variant~="rij"]:not([data-mobiel="veeg"]) .bc-concept-grid__grid{display:grid;margin:0;padding:0;overflow:visible}
 .bc-cm.bc30 [data-variant~="rij"]:not([data-mobiel="veeg"]) .bc-concept-grid__card:before{aspect-ratio:1.2}
 .bc-cm.bc30 [data-variant~="rij"][data-mobiel="raster"] .bc-concept-grid__card:before{aspect-ratio:4/5}
 .bc-cm.bc30 [data-variant~="rij"][data-mobiel="raster"] .bc-concept-grid__num{display:none}
}@media(max-width:640px){.bc-cm.bc30 [data-variant~="rij"]{--kg-zij:24px}}/* Teller en pijlen onder de rij (computer en tablet; op de telefoon de stipjes). Aan het eind van de rij is een pijl
   aria-disabled in plaats van disabled, zodat de focus op de knop blijft (review 4a, M2). */.bc-cm.bc30 .bc-concept-grid__bediening{display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:16px}.bc-cm.bc30 .bc-concept-grid__bediening[hidden]{display:none}.bc-cm.bc30 .bc-concept-grid__teller{min-width:48px;text-align:center;font:700 var(--bc30-fs-klein)/1 var(--bc30-font-tekst);color:var(--bc30-tekst-zacht)}.bc-cm.bc30 .bc-concept-grid__pijl{display:grid;place-items:center;width:var(--bc30-knop-h);height:var(--bc30-knop-h);padding:0;border:1px solid var(--bc30-lijn);border-radius:var(--bc30-r-pil);background:var(--bc30-grond);color:var(--bc30-donker);cursor:pointer;transition:background var(--bc30-duur-snel) var(--bc30-ease),color var(--bc30-duur-snel) var(--bc30-ease),border-color var(--bc30-duur-snel) var(--bc30-ease)}.bc-cm.bc30 .bc-concept-grid__pijl:hover:not([aria-disabled="true"]){background:var(--bc30-oranje);border-color:var(--bc30-oranje);color:var(--bc30-op-donker-kop)}.bc-cm.bc30 .bc-concept-grid__pijl[aria-disabled="true"]{opacity:.35;cursor:default}@media(max-width:699px){.bc-cm.bc30 .bc-concept-grid__bediening{display:none}}@media print{.bc-cm.bc30 .bc-concept-grid__bediening{display:none}}/* Afdrukken: alle kaarten van de rij, drie naast elkaar (ook zonder veegstrook). */@media print{.bc-cm.bc30 [data-variant~="rij"] .bc-concept-grid__grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible!important;margin:0!important;padding:0!important}}/* === Kaarten zonder foto (icon-body zonder enig beeld, woord kop-tegel; fase B batch 4a, O36 richting C, Bram 04-10:
   "Optie c is nu het beste"). De kop met scriptwoord staat in een donkere tegel met de oranje boog en het In Good
   Company-zegel (beide CSS, sier); de punten zijn rustige off-white tegels met een klein nummer, de hele tekst, geen
   schaduw. Computer: de tegel links (een derde) naast twee kolommen kaarten, de tegel zo hoog als de kaarten; een
   oneven laatste kaart over beide kolommen. Tablet: de tegel erboven. Telefoon: alles onder elkaar. B (eigen
   BC-iconen) volgt pas met een eigen iconenreeks. === */.bc-cm.bc30 .bc-concept-grid__tegels{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--bc30-gap)}.bc-cm.bc30 .bc-concept-grid__koptegel{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;padding:40px;border-radius:var(--bc30-r-kaart);background:var(--bc30-donker);container-type:inline-size}.bc-cm.bc30 .bc-concept-grid__koptegel:before{content:"";position:absolute;z-index:-1;right:-84px;bottom:-28px;width:280px;height:150px;background:var(--wpr-bg-96dce1a5-3edc-456f-b06b-035c0db18618) center/contain no-repeat;transform:rotate(-18deg);pointer-events:none}.bc-cm.bc30 .bc-concept-grid__koptegel:after{content:"";flex:none;width:96px;height:96px;margin-top:auto;padding-top:32px;box-sizing:content-box;background:var(--wpr-bg-13a3feda-230a-4a80-ba03-eca5a143d4a5) center/contain no-repeat content-box}.bc-cm.bc30 .bc-concept-grid__koptegel .bc-concept-grid__eyebrow{margin:0 0 12px;text-align:start;color:var(--bc30-oranje)}/* De kop breekt nooit met een streepje (review b7: "onderwijs-instellingen", op 1000 "onderwijsin-stellingen"): past het
   langste woord (--kop-woord letters, uit de render; Merriweather 900 is ongeveer .53em per letter) niet in de tegel, dan
   wordt de kop kleiner (--bc30-fs-kop-past: de maat waarop dat woord nog past, geen token uit de schaal; de tegel is
   daarvoor een container, container-type hierboven). */.bc-cm.bc30 .bc-concept-grid__koptegel .bc-concept-grid__title{--bc30-fs-kop-past:calc(100cqi / (var(--kop-woord,1) * .55));margin:0;text-align:start;font-size:min(var(--bc30-fs-h2-paneel),var(--bc30-fs-kop-past));color:var(--bc30-op-donker-kop);overflow-wrap:break-word;hyphens:manual}.bc-cm.bc30 .bc-concept-grid__koptegel .bc-concept-grid__intro{margin:16px 0 0;max-width:none;text-align:start;color:var(--bc30-op-donker-tekst)}.bc-cm.bc30 .bc-concept-grid[data-variant~="kop-tegel"] .bc-concept-grid__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--bc30-gap)}.bc-cm.bc30 .bc-concept-grid[data-variant~="kop-tegel"] .bc-concept-grid__card,.bc-cm.bc30 .bc-concept-grid[data-variant~="kop-tegel"] .bc-concept-grid__card:hover{background:var(--bc30-vlak);color:var(--bc30-tekst);box-shadow:none;transform:none}.bc-cm.bc30 .bc-concept-grid[data-variant~="kop-tegel"] .bc-concept-grid__card:last-child:nth-child(odd){grid-column:1/-1}.bc-cm.bc30 .bc-concept-grid[data-variant~="kop-tegel"] .bc-concept-grid__body{padding:var(--bc30-kaart-pad)}.bc-cm.bc30 .bc-concept-grid[data-variant~="kop-tegel"] .bc-concept-grid__num{position:static;display:block;margin:0 0 16px;font:800 var(--bc30-fs-eyebrow)/1 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);color:var(--bc30-oranje-tekst);-webkit-text-stroke:0}.bc-cm.bc30 .bc-concept-grid[data-variant~="kop-tegel"] .bc-concept-grid__body :is(h2,h3,h4,h5,h6){margin:0 0 8px;font:900 var(--bc30-fs-kaart)/1.25 var(--bc30-font-kop);letter-spacing:-.01em;color:var(--bc30-kop);text-shadow:none}.bc-cm.bc30 .bc-concept-grid[data-variant~="kop-tegel"] .bc-concept-grid__body p{margin:0;font:400 var(--bc30-fs-kaarttekst)/1.6 var(--bc30-font-tekst);color:var(--bc30-tekst);text-shadow:none}@media(max-width:999px){.bc-cm.bc30 .bc-concept-grid__tegels{grid-template-columns:minmax(0,1fr)}}@media(max-width:1199px){.bc-cm.bc30 [data-variant~="lang-woord"] .bc-concept-grid__tegels{grid-template-columns:minmax(0,1fr)}}@media(max-width:699px){
 .bc-cm.bc30 .bc-concept-grid__tegels,.bc-cm.bc30 .bc-concept-grid[data-variant~="kop-tegel"] .bc-concept-grid__grid{grid-template-columns:minmax(0,1fr);gap:12px}
 .bc-cm.bc30 .bc-concept-grid__koptegel{padding:var(--bc30-paneel-pad) var(--bc30-kaart-pad) 32px}
 .bc-cm.bc30 .bc-concept-grid__koptegel:before{right:-56px;bottom:-24px;width:200px;height:108px}
 .bc-cm.bc30 .bc-concept-grid__koptegel:after{width:64px;height:64px;padding-top:24px}
}/* === Fotokaarten op de home (band vlak, batch 6, lane b6home; bron 8138 index.html, "Onze 5 concepten"): een raster
   van zes kolommen, brede kaarten (wide) half, de andere een derde, dus twee plus drie; staande kaarten (1,06), brede
   liggend (1,68); nummers met data.nummers; de knop als oranje knop met gloed; een oranje boog links achter de sectie.
   Tot 640 px onder elkaar. Kaarttitel, kaarttekst en sectiekop uit het register; de rest gemeten op 8138. === */.bc-cm.bc30 [data-variant=vlak] .bc-concept-grid{position:relative;isolation:isolate;overflow:clip;padding:76px 0 45px;scroll-margin-top:32px}.bc-cm.bc30 [data-variant=vlak] .bc-concept-grid:before{content:"";position:absolute;z-index:-1;width:580px;aspect-ratio:1200/556;left:calc(50% - 900px);top:240px;background:var(--wpr-bg-898ff481-5e74-4ccb-88c5-4de59baa7903) center/contain no-repeat;transform:rotate(-150deg) scaleY(-1);pointer-events:none}.bc-cm.bc30 [data-variant=vlak] .bc-concept-grid__wrap{max-width:var(--bc30-cap);padding-inline:var(--bc30-gutter)}.bc-cm.bc30 [data-variant=vlak] .bc-concept-grid__eyebrow{font-size:var(--bc30-fs-eyebrow);margin:0 0 18px}.bc-cm.bc30 [data-variant=vlak] .bc-concept-grid__title{margin:0}.bc-cm.bc30 [data-variant=vlak] .bc-concept-grid__intro{max-width:620px;margin:22px auto 44px;font-size:var(--bc30-fs-tekst-home);line-height:1.65}.bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}.bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__card{grid-column:span 2;border-radius:var(--bc30-r-kaart);box-shadow:var(--bc30-schaduw)}.bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__card.is-wide{grid-column:span 3}.bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__card:before{aspect-ratio:1.06}.bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .is-wide:before{aspect-ratio:1.68}.bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__card:after{z-index:1;background:linear-gradient(0deg,color-mix(in srgb,var(--bc30-zwart) 93%,transparent) 0%,color-mix(in srgb,var(--bc30-zwart) 50%,transparent) 32%,transparent 70%),linear-gradient(225deg,color-mix(in srgb,var(--bc30-zwart) 44%,transparent) 0%,transparent 40%)}/* Telefoon: kop en zin staan in de onderste helft van de kaart; daar het verloop voller, zodat de tekst op elke foto AA
   haalt (review batch 6, M3: "Koffie" 1,84:1 bij de slechtste pixels, ook op 8138). Geldt voor het raster op de home en elders. */@media(max-width:699px){
 .bc-cm.bc30 .bc-concept-grid__card:after,.bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__card:after{background:linear-gradient(0deg,color-mix(in srgb,var(--bc30-zwart) 94%,transparent) 0%,color-mix(in srgb,var(--bc30-zwart) 82%,transparent) 38%,color-mix(in srgb,var(--bc30-zwart) 35%,transparent) 62%,transparent 84%)}
}/* De tekst blijft onder het nummer: een lange kaarttekst maakt de kaart hoger (ux-sweep, 680 tot 760 px). */.bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__body{z-index:2;margin:64px 23px 25px 26px}.bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__body h3{letter-spacing:-.03em;color:var(--bc30-op-donker-kop);margin:0}.bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__body p{font:400 var(--bc30-fs-kaarttekst)/1.5 var(--bc30-font-tekst);color:var(--bc30-op-donker-kop);margin:8px 0 16px}.bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__go{margin:0;padding:13px 24px;white-space:nowrap;color:var(--bc30-vlak);box-shadow:var(--bc30-gloed)}.bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__card:hover .bc-concept-grid__go{background:var(--bc30-oranje-hover)}.bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__num{position:absolute;z-index:2;top:18px;right:25px;color:var(--bc30-op-donker-kop);font:900 var(--bc30-fs-kaartnummer)/1.2 var(--bc30-font-kop)}.bc-cm.bc30 .bc-concept-grid__motion{position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;transition:opacity var(--bc30-duur-snel) var(--bc30-ease)}.bc-cm.bc30 .bc-concept-grid__motion video{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.bc-cm.bc30 .bc-concept-grid__card.is-playing .bc-concept-grid__motion{opacity:1}.bc-cm.bc30 .bc-concept-grid__card.has-motion:hover img{transform:none}@media(max-width:1200px){.bc-cm.bc30 [data-variant=vlak] .bc-concept-grid:before{left:-180px;width:470px}}@media(max-width:1100px){.bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__grid{gap:16px}.bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__body{margin:64px 16px 24px 20px}}@media(max-width:760px){.bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__go{padding:12px 28px}}@media(min-width:641px) and (max-width:760px){.bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__go{padding-inline:16px}}@media(max-width:640px){
 .bc-cm.bc30 [data-variant=vlak] .bc-concept-grid{padding:52px 0 24px}
 .bc-cm.bc30 [data-variant=vlak] .bc-concept-grid:before{width:300px;left:-155px;top:185px}
 .bc-cm.bc30 [data-variant=vlak] .bc-concept-grid__eyebrow{margin-bottom:12px}
 .bc-cm.bc30 [data-variant=vlak] .bc-concept-grid__intro{margin-bottom:32px}
 .bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__grid{grid-template-columns:minmax(0,1fr);gap:16px}
 .bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__card,.bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__card.is-wide{grid-column:auto;min-height:260px}
 .bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__card:before{aspect-ratio:1.48}
 .bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__body{margin:64px 23px 22px}
 .bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__body p{max-width:260px;margin-bottom:12px}
}/* Een band die met de kop-tegel of de stickers begint laat de sierboog van de band weg: de tegel draagt zijn eigen boog
   (anders staken twee bogen naast elkaar uit) en bij de stickers lag de boog op de computer achter de tekst van de
   eerste reden (batch 6). Hoort bij het samenvoegen in fundament.css, zoals de regel voor de stappen. */.bc-cm.bc30 .bc-band:has(>:is([data-variant~="kop-tegel"],[data-variant~="stickers"]):first-child):before{display:none}/* === USP-kaarten richting B: fotostickers (icon-body met beeld "sticker", woord stickers; fase B batch 6, Bram 04-10
   op keuzepagina ronde 3: "USP-kaarten, compact: richting B"; schets blokkenboek-nu/schets-b5/usp/richting-b.html).
   Elke reden een kleine vierkante foto als sticker: wit randje, kaartradius, de draaiing van de polaroids op het
   prikbord (gallery.css: -4, 3,5, -2 en 2 graden) en de schaduw van een zwevende foto; kop en zin eronder, alle
   redenen op één rij (vijf naast elkaar, zes in twee rijen van drie, zeven of acht in rijen van vier). Tablet: twee
   kolommen (drie bij drie redenen). Telefoon: een lijst met de sticker links. Plakken (service-grid.js, alleen wat
   onder de vouw begint): de sticker komt iets groter en recht binnen en landt scheef, daarna de tekst; zonder JS
   en bij afdrukken staat alles meteen goed. === */.bc-cm.bc30 .bc-concept-grid[data-variant~="stickers"] .bc-concept-grid__title{max-width:var(--bc30-tekstkolom);margin:0 auto 40px}.bc-cm.bc30 .bc-concept-grid__stickers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--bc30-gap) 32px;margin:0;padding:0;list-style:none}.bc-cm.bc30 .bc-concept-grid__stickers[data-aantal="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}.bc-cm.bc30 .bc-concept-grid__stickers:is([data-aantal="3"],[data-aantal="6"]){grid-template-columns:repeat(3,minmax(0,1fr))}.bc-cm.bc30 .bc-concept-grid__stickers[data-aantal="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}.bc-cm.bc30 .bc-concept-grid__reden{--draai:-4deg;min-width:0;margin:0;padding:0}.bc-cm.bc30 .bc-concept-grid__reden:nth-child(even){--draai:3.5deg}.bc-cm.bc30 .bc-concept-grid__reden:nth-child(4n+3){--draai:-2deg}.bc-cm.bc30 .bc-concept-grid__reden:nth-child(4n){--draai:2deg}.bc-cm.bc30 .bc-concept-grid__sticker{display:block;width:120px;aspect-ratio:1;margin:0 0 20px 8px;overflow:hidden;border:6px solid var(--bc30-grond);border-radius:var(--bc30-r-kaart);background:var(--bc30-grond);box-shadow:var(--bc30-schaduw);rotate:var(--draai)}.bc-cm.bc30 .bc-concept-grid__sticker img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.bc-cm.bc30 .bc-concept-grid__reden-tekst :is(h2,h3,h4,h5){margin:0;font:900 var(--bc30-fs-kaart)/1.2 var(--bc30-font-kop);letter-spacing:-.01em;color:var(--bc30-kop);text-shadow:none;hyphens:manual}.bc-cm.bc30 .bc-concept-grid__reden-tekst p{margin:8px 0 0;font:400 var(--bc30-fs-kaarttekst)/1.55 var(--bc30-font-tekst);color:var(--bc30-tekst)}@media(hover:hover){
 .bc-cm.bc30 .bc-concept-grid__sticker{transition:rotate var(--bc30-duur) var(--bc30-ease),translate var(--bc30-duur) var(--bc30-ease)}
 .bc-cm.bc30 .bc-concept-grid__reden:hover .bc-concept-grid__sticker{rotate:0deg;translate:0 -4px}
}@media screen{
 .bc-cm.bc30 .bc-concept-grid__reden[data-plak="wacht"] .bc-concept-grid__sticker{opacity:0;scale:1.12;rotate:0deg}
 .bc-cm.bc30 .bc-concept-grid__reden[data-plak="wacht"] .bc-concept-grid__reden-tekst{opacity:0;translate:0 var(--bc30-in-tekst)}
 .bc-cm.bc30 .bc-concept-grid__reden[data-plak] .bc-concept-grid__sticker{transition:opacity var(--bc30-duur-in) var(--bc30-ease) var(--plak-na,0s),scale var(--bc30-duur-in) var(--bc30-ease) var(--plak-na,0s),rotate var(--bc30-duur-in) var(--bc30-ease) var(--plak-na,0s),translate var(--bc30-duur) var(--bc30-ease)}
 .bc-cm.bc30 .bc-concept-grid__reden[data-plak] .bc-concept-grid__reden-tekst{transition:opacity var(--bc30-duur-in) var(--bc30-ease) calc(var(--plak-na,0s) + var(--bc30-duur-snel)),translate var(--bc30-duur-in) var(--bc30-ease) calc(var(--plak-na,0s) + var(--bc30-duur-snel))}
 .bc-cm.bc30 .bc-concept-grid__reden[data-plak="in"]:hover .bc-concept-grid__sticker{transition-delay:0s}
}@media(min-width:700px) and (max-width:999px){
 .bc-cm.bc30 .bc-concept-grid__stickers,.bc-cm.bc30 .bc-concept-grid__stickers:is([data-aantal="2"],[data-aantal="5"],[data-aantal="6"]){grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
}@media(max-width:699px){
 .bc-cm.bc30 .bc-concept-grid[data-variant~="stickers"] .bc-concept-grid__title{margin-bottom:32px}
 .bc-cm.bc30 .bc-concept-grid__stickers,.bc-cm.bc30 .bc-concept-grid__stickers[data-aantal]{grid-template-columns:minmax(0,1fr);gap:20px}
 /* Korte tekst staat midden naast de sticker; is de tekst hoger dan de sticker, dan staat de sticker bovenaan. */
 .bc-cm.bc30 .bc-concept-grid__reden{display:grid;grid-template-columns:76px minmax(0,1fr);gap:20px;align-items:start}
 .bc-cm.bc30 .bc-concept-grid__reden-tekst{align-self:center}
 .bc-cm.bc30 .bc-concept-grid__sticker{width:76px;margin:0 0 0 4px;border-width:4px}
 .bc-cm.bc30 .bc-concept-grid__reden-tekst p{margin-top:4px}
}/* Kaarttitel in een smalle kaart (review batch 6, L4: "Champag-netoren" op de home op 700, kaart 205 breed): de titel
   schaalt mee met de kaart in plaats van een woord af te breken; in een brede kaart blijft hij op de maat van het register. */.bc-cm.bc30 .bc-concept-grid__card{container-type:inline-size}.bc-cm.bc30 .bc-concept-grid__card .bc-concept-grid__body :is(h2,h3,h4,h5){font-size:min(var(--bc30-fs-kaart-foto),9.4cqi);hyphens:manual}/* Home (band vlak) op de telefoon: conceptkaarten ongeveer een kwart lager dan zonder band, zodat je minder scrolt
   (Tim 20-10, proef 21-10); de foto blijft de kaart vullen. */@media(max-width:699px){
 .bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__card,.bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__card.is-wide{min-height:214px}
 .bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__card:before{aspect-ratio:1.6}
 .bc-cm.bc30 [data-variant=vlak] [data-variant~=raster] .bc-concept-grid__body{margin:40px 20px 20px}
}/* BC 3.0: gelegenheden als feature (concept-grid variant gelegenheden, rol OccasionCards; proef 21-10, opdracht Bram:
   "make it really nice, echt een feature op de website, make it wow en intuïtief goed"). Render: blocks/concept-grid/
   render.mjs (renderGelegenheden). Alles onder .bc-cm.bc30 en alleen met tokens uit fundament.css; eigen klassen
   (bc-geleg), zodat de 2.0-onderlaag en de kaartregels van service-grid.css er niet op werken.
   Opbouw:
   - Kop: eyebrow en kop links, de intro rechts ernaast (computer); tablet en telefoon onder elkaar, links.
   - Kaart: de foto vult de kaart, een zwart verloop van onder, de gelegenheid groot in de serif, tekst (hoogstens twee
     regels, op de grote kaart drie) en een tekstlink met een pijl in een ring. Een kaart met href is als geheel een link.
   - Computer (1000 en breder): een mozaïek per aantal, nooit een kaart alleen op een rij. 2 = 7/5 naast elkaar,
     3 = een grote links over twee rijen plus twee gestapeld, 4 = baksteen (7/5, 5/7), 5 = 7/5 plus drie, 6 = twee rijen
     van drie, 7 = 6/3/3 plus vier, 8 = twee rijen van vier. De grote kaarten krijgen de titel op de maat van de sectiekop.
   - Tablet (700 tot 999): twee kolommen; bij een oneven aantal staat de eerste over de hele breedte.
   - Telefoon (tot 699): veegstrook met snap, de volgende kaart steekt in beeld, stipjes eronder (mobiel.js);
     met mobiel "stapel" onder elkaar.
   - Beweging: bij binnenkomst (motion.js, data-bc-in beeld) zakt de foto van 1,12 naar 1; bij aanwijzen of focus zoomt
     de foto licht, schuift de pijl en vult hij oranje, en dimmen de andere kaarten (de gelegenheid waar je naar wijst
     staat in het licht). Een titel die anders niet past wordt kleiner (--woord uit de render), nooit afgebroken. *//* === Sectie en kop === */.bc-cm.bc30 section.bc-concept-grid[data-variant~="gelegenheden"]{--geleg-rij:clamp(280px,24vw,340px)}.bc-cm.bc30 section.bc-concept-grid[data-variant~="gelegenheden"] .bc-geleg-kop{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);-moz-column-gap:var(--bc30-kolom);column-gap:var(--bc30-kolom);align-items:end;margin:0 0 48px}.bc-cm.bc30 section.bc-concept-grid[data-variant~="gelegenheden"] .bc-geleg-kop__links>:last-child{margin-bottom:0}.bc-cm.bc30 section.bc-concept-grid[data-variant~="gelegenheden"] .bc-concept-grid__eyebrow{text-align:start;margin:0 0 12px}.bc-cm.bc30 section.bc-concept-grid[data-variant~="gelegenheden"] .bc-concept-grid__title{text-align:start;margin:0;max-width:16em}.bc-cm.bc30 section.bc-concept-grid[data-variant~="gelegenheden"] .bc-concept-grid__intro{text-align:start;margin:0;max-width:var(--bc30-lees)}.bc-cm.bc30 section.bc-concept-grid[data-variant~="gelegenheden"] .bc-concept-grid__intro+.bc-concept-grid__intro{margin-top:12px}@media(max-width:999px){
 .bc-cm.bc30 section.bc-concept-grid[data-variant~="gelegenheden"] .bc-geleg-kop{grid-template-columns:minmax(0,1fr);row-gap:16px;margin-bottom:32px}
}@media(max-width:699px){
 .bc-cm.bc30 section.bc-concept-grid[data-variant~="gelegenheden"] .bc-geleg-kop{margin-bottom:24px}
}/* === Kaart === */.bc-cm.bc30 .bc-geleg{--geleg-kop:var(--bc30-fs-kaart-foto);--geleg-tekst:var(--bc30-fs-kaarttekst);--geleg-regels:2}.bc-cm.bc30 .bc-geleg__kaart{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;min-height:0;overflow:hidden;isolation:isolate;border-radius:var(--bc30-r-kaart);background:var(--bc30-donker);color:var(--bc30-op-donker-kop);text-decoration:none;container-type:inline-size;transition:scale var(--bc30-duur-snel) var(--bc30-ease)}.bc-cm.bc30 .bc-geleg__foto{position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;max-width:none;-o-object-fit:cover;object-fit:cover;transition:transform var(--bc30-duur-traag) var(--bc30-ease),scale var(--bc30-duur-traag) var(--bc30-ease),filter var(--bc30-duur) var(--bc30-ease)}/* Verloop van onder in het zwart van de tokens: onder de tekst donker genoeg voor crème tekst (AA), boven de foto vrij. */.bc-cm.bc30 .bc-geleg__kaart:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,color-mix(in srgb,var(--bc30-zwart) 90%,transparent) 0%,color-mix(in srgb,var(--bc30-zwart) 66%,transparent) 32%,color-mix(in srgb,var(--bc30-zwart) 20%,transparent) 60%,transparent 80%)}.bc-cm.bc30 .bc-geleg__tekst{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:var(--bc30-kaart-pad);max-width:40em}.bc-cm.bc30 .bc-geleg__titel{margin:0;font-family:var(--bc30-font-kop);font-weight:900;line-height:1.08;letter-spacing:-.02em;color:var(--bc30-op-donker-kop);text-wrap:balance;overflow-wrap:normal;hyphens:manual;
 font-size:min(var(--geleg-kop),calc((100cqi - 2 * var(--bc30-kaart-pad)) / (var(--woord,1) * .64)))}/* Merriweather 900 is tot .62em per letter */.bc-cm.bc30 .bc-geleg__tekst p{margin:0;max-width:36em;font:400 var(--geleg-tekst)/1.5 var(--bc30-font-tekst);color:var(--bc30-op-donker-tekst)}/* De link: crème tekst met een oranje streep eronder en een pijl in een ring; geen oranje knop per kaart (een oranje
   hoofdactie per sectie). */.bc-cm.bc30 .bc-geleg__link{display:inline-flex;align-items:center;gap:12px;margin-top:6px;font:800 var(--bc30-fs-kaarttekst)/1.3 var(--bc30-font-tekst);color:var(--bc30-op-donker-kop);text-decoration:none}.bc-cm.bc30 .bc-geleg__label{text-decoration:underline;text-decoration-color:var(--bc30-oranje);text-decoration-thickness:2px;text-underline-offset:5px}.bc-cm.bc30 .bc-geleg__pijl{display:grid;place-items:center;flex:none;width:36px;height:36px;border:2px solid color-mix(in srgb,var(--bc30-op-donker-kop) 55%,transparent);border-radius:var(--bc30-r-pil);transition:background var(--bc30-duur-snel) var(--bc30-ease),border-color var(--bc30-duur-snel) var(--bc30-ease),translate var(--bc30-duur) var(--bc30-ease)}.bc-cm.bc30 .bc-geleg__pijl svg{transition:translate var(--bc30-duur) var(--bc30-ease)}.bc-cm.bc30 .bc-geleg__kaart:focus-visible{outline:3px solid var(--bc30-oranje);outline-offset:4px}/* Kaart zonder foto: donker met de oranje boog rechtsboven, zoals de linkkaart in de rij. */.bc-cm.bc30 .bc-geleg__kaart.is-zonder-foto:after{inset:-16px -56px auto auto;width:220px;height:116px;background:var(--wpr-bg-b60c8e04-f7e7-4565-b3a4-92ff767ebb5c) center/contain no-repeat;transform:rotate(-14deg)}/* Binnenkomst: de foto zakt van 1,12 naar 1 terwijl de kaart invaagt (motion.js haalt motion-ready-image weg). */.bc-cm.bc30 .bc-geleg__kaart.motion-ready-image .bc-geleg__foto{scale:1.12}/* Aanwijzen en focus: foto licht in, pijl vult oranje en schuift, de andere kaarten dimmen. */@media(hover:hover){
 .bc-cm.bc30 .bc-geleg__kaart:hover .bc-geleg__foto{transform:scale(1.06)}
 .bc-cm.bc30 .bc-geleg__kaart:hover .bc-geleg__pijl,.bc-cm.bc30 .bc-geleg__link:hover .bc-geleg__pijl{background:var(--bc30-oranje);border-color:var(--bc30-oranje);translate:4px 0}
 .bc-cm.bc30 .bc-geleg__kaart:hover .bc-geleg__pijl svg{translate:2px 0}
 .bc-cm.bc30 .bc-geleg__kaart:hover .bc-geleg__label{text-decoration-thickness:3px}
 .bc-cm.bc30 .bc-geleg:has(>.bc-geleg__kaart:hover)>.bc-geleg__kaart:not(:hover) .bc-geleg__foto{filter:brightness(.7) saturate(.85)}
}.bc-cm.bc30 .bc-geleg__kaart:focus-visible .bc-geleg__foto{transform:scale(1.06)}.bc-cm.bc30 .bc-geleg__kaart:focus-visible .bc-geleg__pijl{background:var(--bc30-oranje);border-color:var(--bc30-oranje);translate:4px 0}.bc-cm.bc30 .bc-geleg:has(>.bc-geleg__kaart:focus-visible)>.bc-geleg__kaart:not(:focus-visible) .bc-geleg__foto{filter:brightness(.7) saturate(.85)}@media(hover:none){.bc-cm.bc30 .bc-geleg:not([data-bc-veeg])>.bc-geleg__kaart:active{scale:.985}}/* === Computer: mozaïek per aantal (12 kolommen) === */@media(min-width:1000px){
 .bc-cm.bc30 .bc-geleg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:var(--geleg-rij);gap:var(--bc30-gap)}
 .bc-cm.bc30 .bc-geleg>*{grid-column:span 4}
 .bc-cm.bc30 .bc-geleg:is([data-aantal="1"],[data-aantal="2"]){grid-auto-rows:calc(var(--geleg-rij) * 1.35)}
 .bc-cm.bc30 .bc-geleg[data-aantal="1"]>*{grid-column:1/-1}
 .bc-cm.bc30 .bc-geleg[data-aantal="2"]>:first-child,.bc-cm.bc30 .bc-geleg[data-aantal="3"]>:first-child,.bc-cm.bc30 .bc-geleg[data-aantal="4"]>:is(:nth-child(1),:nth-child(4)),.bc-cm.bc30 .bc-geleg[data-aantal="5"]>:first-child{grid-column:span 7}
 .bc-cm.bc30 .bc-geleg[data-aantal="2"]>:nth-child(2),.bc-cm.bc30 .bc-geleg[data-aantal="3"]>:not(:first-child),.bc-cm.bc30 .bc-geleg[data-aantal="4"]>:is(:nth-child(2),:nth-child(3)),.bc-cm.bc30 .bc-geleg[data-aantal="5"]>:nth-child(2){grid-column:span 5}
 .bc-cm.bc30 .bc-geleg[data-aantal="3"]>:first-child{grid-row:span 2}
 .bc-cm.bc30 .bc-geleg[data-aantal="7"]>*,.bc-cm.bc30 .bc-geleg[data-aantal="8"]>*{grid-column:span 3}
 .bc-cm.bc30 .bc-geleg[data-aantal="7"]>:first-child{grid-column:span 6}
 /* De grote kaarten: titel op de maat van de sectiekop, de tekst een maat groter en drie regels. */
 .bc-cm.bc30 .bc-geleg:is([data-aantal="1"],[data-aantal="2"])>*,.bc-cm.bc30 .bc-geleg:is([data-aantal="3"],[data-aantal="5"],[data-aantal="7"])>:first-child,.bc-cm.bc30 .bc-geleg[data-aantal="4"]>:is(:nth-child(1),:nth-child(4)){--geleg-kop:var(--bc30-fs-h2);--geleg-tekst:var(--bc30-fs-tekst);--geleg-regels:3}
 .bc-cm.bc30 .bc-geleg[data-aantal="3"]>:first-child .bc-geleg__tekst{padding:var(--bc30-paneel-pad) var(--bc30-paneel-pad) calc(var(--bc30-paneel-pad) - 8px)}
}/* === Tablet: twee kolommen, bij een oneven aantal de eerste over de hele breedte === */@media(min-width:700px) and (max-width:999px){
 .bc-cm.bc30 .bc-geleg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(280px,38vw,360px);gap:var(--bc30-gap);--geleg-kop:var(--bc30-fs-h2-paneel)}
 .bc-cm.bc30 .bc-geleg:is([data-aantal="1"],[data-aantal="3"],[data-aantal="5"],[data-aantal="7"])>:first-child{grid-column:1/-1}
}/* === Telefoon: veegstrook (standaard) of onder elkaar === */@media(max-width:699px){
 .bc-cm.bc30 .bc-geleg{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--bc30-gap)}
 .bc-cm.bc30 .bc-geleg>*{aspect-ratio:4/3}
 .bc-cm.bc30 .bc-geleg[data-bc-veeg]{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(50% - 50vw);padding:8px calc(50vw - 50%) 12px;scroll-padding-inline:var(--bc30-gutter);scrollbar-width:none;overscroll-behavior-x:contain}
 .bc-cm.bc30 .bc-geleg[data-bc-veeg]::-webkit-scrollbar{display:none}
 .bc-cm.bc30 .bc-geleg[data-bc-veeg]>*{flex:0 0 86%;aspect-ratio:4/5;scroll-snap-align:start}
}/* Smalle kaart (telefoon, en de smalle kaarten bij zeven of acht): een lang linklabel ("Cocktails op personeelsfeest")
   vult de regel; de pijl staat dan als ring rechtsboven in de kaart (op een donker rondje, leesbaar op elke foto) in
   plaats van los op een eigen regel. De kaart is zelf de container. */@container (max-width:330px){
 .bc-cm.bc30 .bc-geleg__tekst{position:static}
 .bc-cm.bc30 .bc-geleg__link{display:block;margin-top:2px}
 .bc-cm.bc30 .bc-geleg__pijl{position:absolute;top:16px;right:16px;width:40px;height:40px;background:color-mix(in srgb,var(--bc30-zwart) 40%,transparent);border-color:color-mix(in srgb,var(--bc30-op-donker-kop) 70%,transparent)}
}/* Afdrukken: alle kaarten in twee kolommen, zonder veegstrook. */@media print{
 .bc-cm.bc30 .bc-geleg{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:240px!important;overflow:visible!important;margin:0!important;padding:0!important}
 .bc-cm.bc30 .bc-geleg>*{grid-column:auto!important;grid-row:auto!important;aspect-ratio:auto!important}
}/* BC 3.0: CaseStrip (nieuw blok case-strip), run 4.
   Alles onder de versiemarker .bc-cm.bc30 (zie fundament.css). Bron: de 3.0-preview
   (scripts/design-compare/bc30/css/components/case-strip.css), geport met scripts/port-bc30-css.mjs.
   De strook staat op de lichte paginatint (#fff9ef, feedback Bram 2026-09-29: geen beige op beige);
   de donkere kaarten dragen hem. De kaart is de ServiceGrid-kaart (a.bc-concept-grid__card) in de
   photo-body-vorm; de variantregels van ServiceGrid hangen aan .bc-concept-grid, dus de kaartregels
   staan hier onder .bc-case-strip. VALKUIL: 2.0 zet .bc-concept-grid__card op opacity 0 tot een
   .bc-concept-grid.bc-visible-voorouder; die ontbreekt hier, dus opacity:1 hieronder is nodig.
   Mobiele veegstrook: service-grid.css (gedeelde regel) en src/bc30/mobiel.js.
   Stijlbibliotheek (ronde 2, S1d, 2026-10-02): de strook op de witte grond (1B), titel --bc30-fs-h2, kaarttitel
   --bc30-fs-kaart (22, telefoon 19; keuze 4B), tekst --bc30-fs-kaarttekst, kaart --bc30-r-kaart. */.bc-cm.bc30 .bc-case-strip{background:var(--bc30-grond);padding:var(--bc30-sectie) 0}.bc-cm.bc30 .bc-case-strip__wrap{max-width:1300px;margin:0 auto;padding-left:32px;padding-right:32px}.bc-cm.bc30 .bc-case-strip__title{font:900 var(--bc30-fs-h2)/1.15 var(--bc30-font-kop);letter-spacing:-.045em;color:var(--bc30-kop);text-align:left;margin:0 0 28px}.bc-cm.bc30 .bc-case-strip__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}/* Tablet: de cases onder elkaar met de foto links, zoals de berichtkaarten (review b7: in twee kolommen stond de derde
   kaart alleen). */@media(max-width:952px){
 .bc-cm.bc30 .bc-case-strip__grid{grid-template-columns:minmax(0,1fr)}
}@media(max-width:699px){
 .bc-cm.bc30 .bc-case-strip__wrap{padding-left:24px;padding-right:24px}
 .bc-cm.bc30 .bc-case-strip__grid{grid-template-columns:1fr;gap:22px}
}.bc-cm.bc30 .bc-case-strip .bc-concept-grid__card{display:flex;flex-direction:column;grid-column:auto;aspect-ratio:auto;min-width:0;width:100%;max-width:100%;border-radius:var(--bc30-r-kaart);overflow:hidden;background:var(--bc30-donker);isolation:isolate;opacity:1;transform:none}.bc-cm.bc30 .bc-case-strip .bc-concept-grid__card:after{display:none}.bc-cm.bc30 .bc-case-strip .bc-concept-grid__card>img{position:static;display:block;flex:none;width:100%;height:200px;min-height:0;aspect-ratio:auto;-o-object-fit:cover;object-fit:cover}.bc-cm.bc30 .bc-case-strip .bc-concept-grid__body{position:static;display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:26px 28px 30px;color:var(--bc30-op-donker-kop);background:transparent}.bc-cm.bc30 .bc-case-strip .bc-concept-grid__body h3{font-size:var(--bc30-fs-kaart);line-height:1.2;margin:0 0 10px;color:var(--bc30-op-donker-kop);text-shadow:none}.bc-cm.bc30 .bc-case-strip .bc-concept-grid__body p{margin:0 0 14px;font:400 var(--bc30-fs-kaarttekst)/1.6 var(--bc30-font-tekst);color:var(--bc30-op-donker-kop);text-shadow:none;max-width:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.bc-cm.bc30 .bc-case-strip .bc-concept-grid__go{margin-top:auto;align-self:flex-start}/* Doorklikken is overal een onderstreepte tekstlink, ook bij een enkele case (O38; review b7: oranje pil 2,8:1); de tekst
   hoogstens twee regels (K5B), de hele tekst in de HTML en op papier. */.bc-cm.bc30 .bc-case-strip .bc-concept-grid__go,.bc-cm.bc30 .bc-case-strip .bc-concept-grid__card:hover .bc-concept-grid__go{background:none;padding:0;min-height:0;box-shadow:none;border-radius:0;color:var(--bc30-oranje);font-size:var(--bc30-fs-kaarttekst);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}@media(hover:hover){.bc-cm.bc30 .bc-case-strip .bc-concept-grid__card:hover .bc-concept-grid__go{text-decoration-thickness:2px}}@media print{.bc-cm.bc30 .bc-case-strip .bc-concept-grid__body p{display:block;-webkit-line-clamp:none;overflow:visible}}@media(min-width:700px) and (max-width:952px){
 .bc-cm.bc30 .bc-case-strip .bc-concept-grid__card{flex-direction:row;align-items:stretch}
 .bc-cm.bc30 .bc-case-strip .bc-concept-grid__card>img{flex:0 0 40%;width:40%;height:auto;min-height:240px}
 .bc-cm.bc30 .bc-case-strip .bc-concept-grid__body{align-self:center}
}/* single: een enkele case over de volle breedte, foto links naast de tekst vanaf 700 px. */.bc-cm.bc30 .bc-case-strip[data-variant="single"] .bc-case-strip__grid{grid-template-columns:1fr}@media(min-width:700px){
 .bc-cm.bc30 .bc-case-strip[data-variant="single"] .bc-concept-grid__card{flex-direction:row;align-items:stretch}
 .bc-cm.bc30 .bc-case-strip[data-variant="single"] .bc-concept-grid__card>img{flex:0 0 46%;width:46%;height:auto;min-height:320px}
 .bc-cm.bc30 .bc-case-strip[data-variant="single"] .bc-concept-grid__body{align-self:center;padding:36px 44px}
}/* BC 3.0: Reviews (basis review-spotlight), fase 3 run 5 (lane fotos).
   Alles onder de versiemarker .bc-cm.bc30 (zie fundament.css). Bron: de 3.0-preview (tag
   bc30-vastgezet-2026-09-30), css/components/reviews.css, geport met scripts/port-bc30-css.mjs
   (bc30-review-section wordt bc-review-spotlight, bc30-review* wordt bc-review-spotlight__*,
   bc30-score wordt __score, de JS-standen reviews-enhanced en reviews-pair worden is-actief en
   is-paar) en met de hand opgeruimd: de twee bijna gelijke blokken uit de preview (onder
   .cocktail-max-page en onder :is(.cocktail-max-page,.concept-30)) zijn er één, met de uitkomst van
   de cascade (het tweede blok won, dus ook de sectiepadding 65/70 op de telefoon); bronfragment- en
   slotregels (source-quote, source-fragment, review-heading__slot, review-all-slot) en de oude
   bc30-reviews-rij zijn weg. Specificiteit gelijk aan de preview-regel, nooit hoger, behalve waar
   een 2.0-regel alleen door de vaste rootklasse op deze sectie valt (zie Ritme). DOM:
   blocks/review-spotlight/render.mjs; gedrag: src/bc30/reviews.js (lazy chunk bc-carousel.js).
   Besluit Bram 2026-10-03 (besluitenregister): off-white met witte kaarten en --bc30-schaduw-kaart, zodat de kaarten
   net loskomen ("dat reviewblok is mooier op off-white"). Het off-white is een afgerond paneel (::before, --bc30-r-band)
   binnen een witte sectie, geen band over de volle breedte: een rechte rand van #fff9f0 tegen wit of crème leest als
   een drukfout (review A3, 03-10). De variant quote heeft geen kaarten en blijft wit.
   Stijlbibliotheek (ronde 2, S1d, 2026-10-02): eerst sectie op de witte grond, kaarten off-white zonder schaduw (1B),
   kop --bc30-fs-h2, citaat --bc30-fs-citaat (20, telefoon 18), scorecijfer --bc30-fs-h2-paneel (32, telefoon
   28), kleine tekst --bc30-fs-klein en --bc30-fs-eyebrow, kaarten --bc30-r-kaart; kleine oranje tekst op licht
   --bc30-oranje-tekst (6B); de scorechip is een donkere pil op licht en houdt --bc30-schaduw. *//* === Scorechip (preview: eerst de basis uit de homepage-mockup, daarna de 3.0-chip) === */:where(.bc-cm.bc30) .bc-review-spotlight__score{display:inline-flex;align-items:center;border:1px solid #ffffff12;border-radius:var(--bc30-r-pil)}:where(.bc-cm.bc30) .bc-review-spotlight__score strong{font:900 var(--bc30-fs-h2-paneel)/1 var(--bc30-font-kop);font-style:normal;white-space:nowrap}:where(.bc-cm.bc30) .bc-review-spotlight__score small{padding-left:3px;font:700 var(--bc30-fs-klein)/1 var(--bc30-font-tekst);color:var(--bc30-op-donker-zacht)}:where(.bc-cm.bc30) .bc-review-spotlight__score>img{width:76px;height:24px;-o-object-fit:contain;object-fit:contain;border-left:1px solid #ffffff40;padding-left:12px;box-sizing:content-box}@media(max-width:640px){
 :where(.bc-cm.bc30) .bc-review-spotlight__score>img{width:62px;height:22px;padding-left:10px}
}.bc30:where(.bc-cm) .bc-review-spotlight__score{padding:17px 25px;gap:18px;font:700 var(--bc30-fs-klein)/1.2 var(--bc30-font-tekst);background:var(--bc30-donker);border-color:var(--bc30-lijn-donker);box-shadow:var(--bc30-schaduw-kaart)}:where(.bc-cm.bc30) .bc-review-spotlight__score>span{color:var(--bc30-op-donker-zacht);white-space:nowrap}.bc-cm.bc30 .bc-review-spotlight__eyebrow{font:700 var(--bc30-fs-eyebrow)/1.3 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);color:var(--bc30-oranje-tekst);text-transform:uppercase;margin:0 0 18px}.bc-cm.bc30 .bc-review-spotlight__score{flex-shrink:0;text-decoration:none;color:var(--bc-white)}.bc-cm.bc30 .bc-review-spotlight__score strong{color:var(--bc-white)}@media(max-width:640px){.bc-cm.bc30 .bc-review-spotlight__score{max-width:100%;gap:12px;padding:13px 16px}}/* Tweede regel onder het label (score.sub, bijvoorbeeld de bron en het aantal reviews uit een
   2.0-reviewsblok; review run 5, bevinding 2): kleiner en lichter dan het label, mag afbreken, in gelijke regels:
   nooit "reviews" alleen op de tweede regel (batch 7, ontwerpreviewer). */.bc-cm.bc30 .bc-review-spotlight__score-sub{display:block;margin-top:4px;font:500 var(--bc30-fs-eyebrow)/1.35 var(--bc30-font-tekst);color:var(--bc30-op-donker-zacht);white-space:normal;max-width:24ch;text-wrap:balance}/* Telefoon: met label, tweede regel en bronlogo past de chip niet op 360 (het logo stak 15 px buiten de pil); dan mag
   de tekst over meer regels lopen in plaats van het logo te duwen. */@media(max-width:640px){.bc-cm.bc30 .bc-review-spotlight__score>span{white-space:normal;min-width:0}.bc-cm.bc30 .bc-review-spotlight__score-sub{max-width:none}}/* Telefoon: geen Feedback Company-logo in de scorechip, de chip wordt kleiner (ronde 5, Bram 05-10: "logo fb company weg
   dan wordt dat blokje wat kleiner en das nicer"). Computer en tablet houden het logo; de bron staat in label en link. */@media(max-width:699px){.bc-cm.bc30 .bc-review-spotlight__score>img:not([data-variant=vlak] *){display:none}}/* de home (band vlak) blijft 8138 *//* === Sectie, kop en carrousel === */.bc-cm.bc30 .bc-review-spotlight{background:var(--bc30-grond);padding:96px 0;overflow:clip;border:0;text-align:center}.bc-cm.bc30 .bc-review-spotlight__heading{display:flex;align-items:center;justify-content:space-between;gap:32px;max-width:1300px;padding:0 32px;margin:0 auto 50px;text-align:left}.bc-cm.bc30 .bc-review-spotlight__heading h2{font:900 var(--bc30-fs-h2)/1.18 var(--bc30-font-kop);letter-spacing:0;margin:0;color:var(--bc30-kop)}.bc-cm.bc30 .bc-review-spotlight__heading .bc-review-spotlight__eyebrow{margin-bottom:22px}.bc-cm.bc30 .bc-review-spotlight__heading .bc-review-spotlight__score{flex-shrink:0}/* Inleiding onder de kop (lead, bijvoorbeeld de intro van een 2.0-reviewsblok; review run 5,
   bevinding 2), in de maat van de inleiding van ServiceGrid. */.bc-cm.bc30 .bc-review-spotlight__lead{font:400 var(--bc30-fs-tekst)/var(--bc30-lh-tekst) var(--bc30-font-tekst);color:var(--bc30-tekst);max-width:601px;margin:18px 0 0}.bc-cm.bc30 .bc-review-spotlight__lead a{color:var(--bc30-oranje-tekst);text-decoration:underline}/* Alleen een scorechip (variant quote zonder kop; bevinding 14): gecentreerd boven de quote. */.bc-cm.bc30 .bc-review-spotlight__heading--chip{justify-content:center}.bc-cm.bc30 .bc-review-spotlight__viewport{max-width:1300px;margin:auto;overflow:hidden;touch-action:pan-y;cursor:grab;padding:26px 0 30px}:where(.bc-cm.bc30) .bc-review-spotlight__viewport.is-dragging{cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;user-select:none}.bc-cm.bc30 .bc-review-spotlight__viewport:focus-visible{outline:3px solid var(--bc30-oranje);outline-offset:-3px;border-radius:var(--bc30-r-kaart)}.bc-cm.bc30 .bc-review-spotlight__track{display:flex;gap:var(--review-gap,24px);align-items:center;min-height:360px;will-change:transform;text-align:left}/* Zonder JS, of als het chunk niet laadt (html.bc-carousel-fout, zie carousel-loader.js): alle kaarten
   naast elkaar in een scrollbare rij, citaten heel, geen bediening. */@media(scripting:none){
 .bc-cm.bc30 .bc-review-spotlight:not(.is-actief) .bc-review-spotlight__track{overflow-x:auto}
 .bc-cm.bc30 .bc-review-spotlight:not(.is-actief) blockquote{display:block;max-height:none}
 .bc-cm.bc30 .bc-review-spotlight:not(.is-actief) :is(.bc-review-spotlight__more,.bc-review-spotlight__controls){display:none}
}/* Met JS, voor het chunk de carrousel start (review run 5, bevinding 11): al de vorm van daarna, zodat
   er niets verspringt. Kaartmaat zoals reviews.js hem rekent, de eerste kaart in het midden, groot en
   met vier regels, de rest twee; bediening staat er al; Meer lezen houdt zijn plek tot de JS weet of
   hij nodig is. Een of twee kaarten: alle vier regels. */@media(scripting:enabled){
 .bc-cm.bc30 .bc-review-spotlight:not(.is-actief) .bc-review-spotlight__viewport{--review-card:calc((100% - 48px) / 3)}
 .bc-cm.bc30 .bc-review-spotlight:not(.is-actief):not(.is-paar) .bc-review-spotlight__track{transform:translateX(calc((100% - var(--review-card)) / 2))}
 .bc-cm.bc30 .bc-review-spotlight:not(.is-actief) .bc-review-spotlight__more{visibility:hidden}
 .bc-cm.bc30 .bc-review-spotlight:not(.is-actief):not(.is-paar) .bc-review-spotlight__card:first-child{transform:scale(1);box-shadow:var(--bc30-schaduw-kaart)}
 .bc-cm.bc30 .bc-review-spotlight:not(.is-actief) :is(.bc-review-spotlight__card:first-child,.is-paar .bc-review-spotlight__card) blockquote{--lines:4}
}@media(scripting:enabled) and (max-width:699px){
 .bc-cm.bc30 .bc-review-spotlight:not(.is-actief) .bc-review-spotlight__viewport{--review-card:min(340px,82%);--review-gap:18px}
}/* Chunk niet geladen: zoals zonder JS (na de regels hierboven, die het anders zouden winnen). */.bc-carousel-fout .bc-cm.bc30 .bc-review-spotlight:not(.is-actief) .bc-review-spotlight__viewport{--review-card:380px;--review-gap:24px}.bc-carousel-fout .bc-cm.bc30 .bc-review-spotlight:not(.is-actief) .bc-review-spotlight__track{overflow-x:auto;transform:none}.bc-carousel-fout .bc-cm.bc30 .bc-review-spotlight:not(.is-actief) blockquote{display:block;max-height:none}.bc-carousel-fout .bc-cm.bc30 .bc-review-spotlight:not(.is-actief) :is(.bc-review-spotlight__more,.bc-review-spotlight__controls){display:none}.bc-cm.bc30 .bc-review-spotlight__card{flex:0 0 var(--review-card,380px);min-width:0;box-sizing:border-box;padding:28px 30px;background:var(--bc30-grond);border-radius:var(--bc30-r-kaart);box-shadow:var(--bc30-schaduw-kaart);opacity:1;transform:scale(.96);transition:transform var(--bc30-duur) var(--bc30-ease);text-align:left}.bc-cm.bc30 .bc-review-spotlight__card.is-center{opacity:1;transform:scale(1);box-shadow:var(--bc30-schaduw-kaart)}.bc-cm.bc30 .bc-review-spotlight__card:hover,.bc-cm.bc30 .bc-review-spotlight__card:focus-within{opacity:1}/* Sprong na een stap over de rand (reviews.js): het midden wisselt van kloon naar echte kaart zonder
   overgang. */.bc-cm.bc30 .bc-review-spotlight__track.is-sprong :is(.bc-review-spotlight__card,blockquote){transition:none}.bc-cm.bc30 .bc-review-spotlight__top{display:flex;align-items:center;justify-content:space-between;height:46px;margin-bottom:22px;gap:22px}/* Tablet: kaarten zijn hier smal (ongeveer 216 px); minder ruimte tussen logo en cijfer (review A3, 03-10). */@media(min-width:700px) and (max-width:999px){
 .bc-cm.bc30 .bc-review-spotlight__top{gap:12px}
}/* Geen afbreekstreepjes in een citaat (batch 7, ontwerpreviewer: "bedrijfs-feest" op 700, 390 en 360): het langste
   woord uit de echte reviews ("mocktailworkshop", 172 px) past in de smalste kaart (173 px binnen, op 700); alleen
   een woord dat echt niet past breekt nog, zonder streepje, in plaats van uit de kaart te vallen. */@media(max-width:999px){.bc-cm.bc30 .bc-review-spotlight__card blockquote{overflow-wrap:break-word;hyphens:auto;hyphenate-limit-chars:14 6 6}}/* korte woorden heel; een lang woord dat niet past breekt met een streepje ("gespreks-onderwerp" op 700, UX-sweep batch 7) *//* Batch 7 (UX-sweep; register: witte ruimte rond elk getint vlak): het off-white paneel ligt 24 px binnen de sectie, dus naast een getinte band (FAQ serif, belofte) bleef er 24 px wit over. Nu sectieruimte. */.bc-cm.bc30 .bc-review-spotlight:not([data-variant="quote"]):not(.bc-rx--slant-in):not(.bc-rx--slant-out)+:is(.bc-faq--serif,.bc-why-list),.bc-cm.bc30 :is(.bc-faq--serif,.bc-why-list)+.bc-review-spotlight:not([data-variant="quote"]):not(.bc-rx--slant-in):not(.bc-rx--slant-out){margin-top:calc(var(--bc30-sectie) - 24px)}/* Het logo mag smaller worden als het cijfer anders uit de kaart steekt (kaart van ongeveer 220px op
   700 tot 760px met een breed logo; review run 5, bevinding 12). */.bc-cm.bc30 .bc-review-spotlight__top img{display:block;max-width:150px;width:auto;max-height:44px;height:auto;-o-object-fit:contain;object-fit:contain;-o-object-position:left center;object-position:left center;filter:none;min-width:0;flex:0 1 auto}.bc-cm.bc30 .bc-review-spotlight__quote-mark{font:900 var(--bc30-fs-statement)/1 var(--bc30-font-kop);color:var(--bc30-oranje);height:48px}.bc-cm.bc30 .bc-review-spotlight__rating{font:900 var(--bc30-fs-kaart-foto)/1 var(--bc30-font-kop);color:var(--bc30-oranje);white-space:nowrap;flex-shrink:0}.bc-cm.bc30 .bc-review-spotlight__rating small{font:600 var(--bc30-fs-eyebrow)/1 var(--bc30-font-tekst);color:#70695f;margin-left:3px}.bc-cm.bc30 .bc-review-spotlight__card blockquote{--lines:2;font:700 var(--bc30-fs-citaat)/1.55 var(--bc30-font-kop);color:var(--bc30-kop);border:0;padding:0;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--lines);max-height:calc(var(--lines)*1.55em);overflow:hidden;quotes:none;transition:max-height var(--bc30-duur) var(--bc30-ease)}.bc-cm.bc30 .bc-review-spotlight__card blockquote:before,.bc-cm.bc30 .bc-review-spotlight__card blockquote:after{display:none}.bc-cm.bc30 .bc-review-spotlight__card.is-center blockquote{--lines:4}.bc-cm.bc30 .bc-review-spotlight__card.is-expanded blockquote{display:block;-webkit-line-clamp:unset;max-height:none;overflow:visible}.bc-cm.bc30 .bc-review-spotlight__more{background:none;border:0;border-bottom:1px solid #ed733680;border-radius:0;padding:0 0 2px;margin:12px 0 0;font:700 var(--bc30-fs-klein)/1.4 var(--bc30-font-tekst);color:var(--bc30-oranje-tekst);cursor:pointer}.bc-cm.bc30 .bc-review-spotlight__author{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:5px 12px;margin:24px 0 10px;font:500 var(--bc30-fs-klein)/1.4 var(--bc30-font-tekst);color:#777065}.bc-cm.bc30 .bc-review-spotlight__author strong{color:var(--bc30-kop);font-weight:800}.bc-cm.bc30 .bc-review-spotlight__source{font:500 var(--bc30-fs-eyebrow)/1.4 var(--bc30-font-tekst);color:#777065;text-decoration:none}.bc-cm.bc30 .bc-review-spotlight__source:hover{text-decoration:underline}.bc-cm.bc30 .bc-review-spotlight__controls{display:flex;align-items:center;justify-content:center;gap:22px;margin:6px 0 26px;font:600 var(--bc30-fs-klein)/1 var(--bc30-font-tekst);color:#72685d}.bc-cm.bc30 .bc-review-spotlight__controls button{width:46px;height:46px;display:grid;place-items:center;border:1px solid #24242235;border-radius:50%;background:transparent;color:var(--bc30-kop);font:400 var(--bc30-fs-kaart)/1 Arial,sans-serif;cursor:pointer;transition:background var(--bc30-duur-snel) var(--bc30-ease),color var(--bc30-duur-snel) var(--bc30-ease)}.bc-cm.bc30 .bc-review-spotlight__controls button:hover{background:var(--bc30-donker);color:var(--bc-white)}/* Knop Meer referenties. Hover oranje gevuld, nooit groen of teal (knopregels, besluit Bram
   2026-09-21; sinds 2026-10-02 ook in de preview). Het label op licht donkerder oranje (6B), de ring oranje. */.bc-cm.bc30 .bc-review-spotlight__all{display:inline-flex;justify-content:center;align-items:center;padding:15px 24px;background:transparent;color:var(--bc30-oranje-tekst);border:0;border-radius:var(--bc30-r-pil);text-decoration:none;font:800 var(--bc30-fs-knop)/1.3 var(--bc30-font-tekst);transform:none!important;transition:background var(--bc30-duur-snel) var(--bc30-ease);box-shadow:inset 0 0 0 2px var(--bc30-oranje)}.bc-cm.bc30 .bc-review-spotlight__all:hover{background:var(--bc30-oranje);color:var(--bc30-op-donker-kop);box-shadow:none}@media(max-width:1050px){
 .bc-cm.bc30 .bc-review-spotlight__heading{display:block}
 .bc-cm.bc30 .bc-review-spotlight__heading .bc-review-spotlight__score{margin-top:26px}
 .bc-cm.bc30 .bc-review-spotlight__card{padding:24px 22px}
}@media(max-width:640px){
 .bc-cm.bc30 .bc-review-spotlight__heading{padding:0 24px;margin-bottom:24px}
 .bc-cm.bc30 .bc-review-spotlight__card{padding:25px 24px}
 .bc-cm.bc30 .bc-review-spotlight__top img{max-width:130px}
}/* === Variant white (koffie, champagne, matcha, smoothies, zuurstof): ruime maat ook op de telefoon,
   kop naast de score, het Vermaat-logo donkerder. Ondanks de naam ook met het off-white paneel (Bram 2026-10-03). === */.bc30:where(.bc-cm) .bc-review-spotlight[data-variant="white"]{padding:96px 0;background:var(--bc30-grond)}.bc30:where(.bc-cm) .bc-review-spotlight[data-variant="white"] .bc-review-spotlight__heading{justify-content:space-between;margin-bottom:50px}.bc30:where(.bc-cm) .bc-review-spotlight[data-variant="white"] .bc-review-spotlight__top img{filter:none;opacity:1}.bc30:where(.bc-cm) .bc-review-spotlight[data-variant="white"] .bc-review-spotlight__top img[src*="Vermaat"]{filter:brightness(.3)}/* Het witte Mafico-logo donker, in elke variant. Na de regel van white (zelfde specificiteit), anders
   zet white het filter uit en staat er een wit logo op een witte kaart (review run 5, bevinding 13; in
   de preview hetzelfde, maar daar staat Mafico alleen op cocktails, variant default). */.bc-cm.bc30 .bc-review-spotlight__top img[src$="review-mafico.svg"]{filter:brightness(.2)}/* === Een of twee kaarten (de server zet is-paar, zonder bediening): naast elkaar binnen de zijmarge
   van de kop, onder 700px onder elkaar; niets te slepen. === */.bc-cm.bc30 .bc-review-spotlight.is-paar .bc-review-spotlight__viewport{padding-inline:32px;cursor:auto}/* Twee kaarten even hoog, naam en bron onderaan op één lijn (batch 7, ontwerpreviewer: 319 tegen 352 px op 1440). De
   rij krijgt geen minimumhoogte van de carrousel, anders rekken beide kaarten op tot 360. */.bc-cm.bc30 .is-paar .bc-review-spotlight__track{justify-content:center;flex-wrap:wrap;align-items:stretch;min-height:0}.bc-cm.bc30 .is-paar .bc-review-spotlight__card{flex:1 1 300px;max-width:560px;display:flex;flex-direction:column}.bc-cm.bc30 .is-paar .bc-review-spotlight__card .bc-review-spotlight__author{margin-top:auto;padding-top:24px}.bc-cm.bc30 .is-paar .bc-review-spotlight__card :is(.bc-review-spotlight__more,.bc-review-spotlight__source){align-self:flex-start}@media(max-width:699px){
 .bc-cm.bc30 .bc-review-spotlight.is-paar .bc-review-spotlight__viewport{padding-inline:24px}
 .bc-cm.bc30 .is-paar .bc-review-spotlight__card{flex:1 1 100%;max-width:none}
}/* === Bronkaart (zonder cijfer): klantlogo of citaatteken, sterren op de plek van het cijfer, en op
   de hoogte van een gewone kaart met een tweeregelig citaat (Bram 2026-09-16, keuze 2). Sterren in
   de maat van de 2.0-sterrenrij die de preview als bronfragment toonde. === */.bc-cm.bc30 .bc-review-spotlight__card[data-variant="source"] .bc-review-spotlight__stars{flex-shrink:0;white-space:nowrap;text-align:right}/* De preview had hier een bronfragment (div 16px/1,7) met de inline 2.0-sterrenrij (15px/1,65,
   letterafstand 3px, oranje); dezelfde opbouw geeft de sterren dezelfde plek. */.bc-cm.bc30 .bc-review-spotlight__stars{font:400 var(--bc30-fs-tekst)/1.7 var(--bc30-font-tekst)}.bc-cm.bc30 .bc-review-spotlight__stars>span{font-size:var(--bc30-fs-knop);line-height:1.65;letter-spacing:3px;color:var(--bc30-oranje)}.bc-cm.bc30 .bc-review-spotlight__card[data-variant="source"]{min-height:289.8px}@media(max-width:1050px){.bc-cm.bc30 .bc-review-spotlight__card[data-variant="source"]{min-height:275.5px}}@media(max-width:640px){.bc-cm.bc30 .bc-review-spotlight__card[data-variant="source"]{min-height:277.5px}}/* === Ritme: base/rhythm.css (2.0) zet op .bc-review-spotlight (en op de aliasklasse .bc-reviews) een
   transparante sectie met een cremelaag en schuine randen (0,5,0). In de preview heette de sectie
   bc30-review-section en kreeg hij die regels niet; hier vallen ze er alleen door de vaste
   rootklasse op. Daarom hier zwaarder, zoals de preview dat voor de logoband doet
   (.bc-cm.bc30.bc30 .bc-logo-marquee). === */.bc-cm.bc30.bc30 .bc-review-spotlight:not(.bc-rx--slant-in):not(.bc-rx--slant-out){background:var(--bc30-grond);--bc-band-bg:var(--bc30-grond);position:relative;isolation:isolate}.bc-cm.bc30.bc30 .bc-review-spotlight:not(.bc-rx--slant-in):not(.bc-rx--slant-out)::before{content:none}/* Het off-white paneel (03-10): 24 px binnen de sectie, op de computer 40 px buiten de inhoudsbreedte, op de telefoon
   over de volle breedte met de ronding van een band. */.bc-cm.bc30.bc30 .bc-review-spotlight:not(.bc-rx--slant-in):not(.bc-rx--slant-out):not([data-variant="quote"])::before{content:"";position:absolute;z-index:-1;inset:24px max(16px,calc((100% - var(--bc30-breed)) / 2 - 40px));border-radius:var(--bc30-r-band);background:var(--bc30-vlak);pointer-events:none;clip-path:none;transform:none;background-image:none}/* clip-path: de 2.0-ritmeregel op de alias bc-reviews knipt ::before schuin */@media(max-width:699px){.bc-cm.bc30.bc30 .bc-review-spotlight:not(.bc-rx--slant-in):not(.bc-rx--slant-out):not([data-variant="quote"])::before{inset:16px 0}}@media(max-width:699px){.bc-cm.bc30 .bc-review-spotlight:not([data-variant="quote"]){padding:72px 0}}/* === Voet met noot en meer knoppen (referenties 2.0: foot), zelfde knopvorm als Meer referenties. === */.bc-cm.bc30 .bc-review-spotlight__foot{max-width:1300px;margin:0 auto;padding:0 32px}.bc-cm.bc30 .bc-review-spotlight__note{font:400 var(--bc30-fs-tekst)/1.7 var(--bc30-font-tekst);color:#605c56;margin:0 0 20px}.bc-cm.bc30 .bc-review-spotlight__note a{color:var(--bc30-oranje-tekst);text-decoration:underline}.bc-cm.bc30 .bc-review-spotlight__links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}@media(max-width:640px){.bc-cm.bc30 .bc-review-spotlight__foot{padding:0 24px}}/* === Variant quote: een grote quote (testimonial, signature-quote). Witte sectie zoals de
   reviewsectie, de quote in de kaarttypografie maar groter; met foto twee kolommen (foto links,
   radius 24 zoals TextImage), zonder foto een gecentreerde kolom. Geen carrousel en geen JS. === */.bc-cm.bc30 .bc-review-spotlight[data-variant="quote"]{padding:80px 0 90px}.bc-cm.bc30 .bc-review-spotlight__quote{max-width:1100px;margin:0 auto;padding:0 32px;text-align:left}.bc-cm.bc30 .bc-review-spotlight__quote:not(.bc-review-spotlight__quote--foto){max-width:900px;text-align:center}/* Foto liggend (O48, Bram 03-10: "die uitsnede is hier niet nice, liever horizontaal"): 3:2 in een iets bredere kolom. */.bc-cm.bc30 .bc-review-spotlight__quote--foto{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;align-items:center}.bc-cm.bc30 .bc-review-spotlight__foto img{display:block;width:100%;aspect-ratio:3/2;-o-object-fit:cover;object-fit:cover;border-radius:var(--bc30-r-kaart)}.bc-cm.bc30 .bc-review-spotlight__quote .bc-review-spotlight__quote-mark{display:block;height:56px;margin:0 0 6px}.bc-cm.bc30 .bc-review-spotlight__quote blockquote{margin:0;padding:0;border:0;quotes:none}.bc-cm.bc30 .bc-review-spotlight__quote blockquote:before,.bc-cm.bc30 .bc-review-spotlight__quote blockquote:after{display:none}.bc-cm.bc30 .bc-review-spotlight__quote blockquote p{font:700 var(--bc30-fs-h2-paneel)/1.45 var(--bc30-font-kop);color:var(--bc30-kop);margin:0;text-wrap:pretty}.bc-cm.bc30 .bc-review-spotlight__quote figcaption{display:flex;flex-direction:column;gap:2px;margin:26px 0 0;font:500 var(--bc30-fs-klein)/1.4 var(--bc30-font-tekst);color:#777065}.bc-cm.bc30 .bc-review-spotlight__quote figcaption strong{font:800 var(--bc30-fs-kaarttekst)/1.4 var(--bc30-font-tekst);color:var(--bc30-kop)}.bc-cm.bc30 .bc-review-spotlight[data-variant="quote"] .bc-review-spotlight__all{margin-top:36px}@media(max-width:860px){
 .bc-cm.bc30 .bc-review-spotlight__quote--foto{grid-template-columns:1fr;gap:32px}
 .bc-cm.bc30 .bc-review-spotlight__foto img{aspect-ratio:3/2}
}@media(max-width:640px){
 .bc-cm.bc30 .bc-review-spotlight[data-variant="quote"]{padding:55px 0 60px}
 .bc-cm.bc30 .bc-review-spotlight__quote{padding:0 24px}
 .bc-cm.bc30 .bc-review-spotlight__quote .bc-review-spotlight__quote-mark{height:44px}
}/* === Print: geen bediening en geen klonen, alle oorspronkelijke reviews heel naast en onder elkaar. === */@media print{
 .bc-cm.bc30 .bc-review-spotlight :is(.bc-review-spotlight__controls,.bc-review-spotlight__more){display:none!important}
 .bc-cm.bc30 .bc-review-spotlight__card[aria-hidden="true"]{display:none}
 .bc-cm.bc30 .bc-review-spotlight__track{transform:none!important;flex-wrap:wrap;overflow:visible!important;min-height:0}
 .bc-cm.bc30 .bc-review-spotlight__card{transform:none!important;flex:1 1 260px;-moz-column-break-inside:avoid;break-inside:avoid}
 .bc-cm.bc30 .bc-review-spotlight__card blockquote{display:block;max-height:none;-webkit-line-clamp:unset;overflow:visible}
 .bc-cm.bc30 .bc-review-spotlight__viewport{overflow:visible}
}/* === Aliassen (reviews, testimonial, signature-quote) dragen hun eigen rootklasse voor class-map,
   live-import en de gebruikstelling. Wat hun 2.0-CSS op die wortel zet en de 3.0-regels hierboven
   niet al overschrijven, gaat uit (gemeten: alias tegen basisblok met dezelfde inhoud): de
   reveal-verschuiving en de volle schermbreedte (100vw met negatieve marge) van signature-quote. === */.bc-cm.bc30 .bc-review-spotlight:is(.bc-reviews,.bc-testimonial,.bc-signature-quote){transform:none;transition:none;width:auto;margin-left:0;margin-right:0}/* === Reviews als kaarten (data.vorm kaarten; batch 6, lane b6home; bron 8138 "Ervaringen van onze klanten"): drie
   kaarten naast elkaar zonder carrousel, de middelste 20 px lager, met aanhalingsteken, citaat, sterren en het
   klantlogo eronder; de scorepil rechts naast de kop; "Meer referenties" als omlijnde knop in het midden. Op de band
   vlak (de home) geen eigen off-white paneel: de grond is al off-white. Tot 640 px onder elkaar. === */.bc-cm.bc30 .bc-review-spotlight[data-vorm=kaarten]{padding:100px 0 80px}.bc-cm.bc30.bc30 [data-variant=vlak] .bc-review-spotlight[data-vorm]:not(.bc-rx--slant-in)::before{content:none}.bc-cm.bc30.bc30 [data-variant=vlak] .bc-review-spotlight:not(.bc-rx--slant-in){background:transparent}.bc-cm.bc30 [data-vorm=kaarten] .bc-review-spotlight__heading{display:flex;max-width:var(--bc30-cap);padding:0 var(--bc30-gutter);margin:0 auto 60px}.bc-cm.bc30 [data-vorm=kaarten] .bc-review-spotlight__heading .bc-review-spotlight__eyebrow{margin-bottom:18px}.bc-cm.bc30 [data-vorm=kaarten] .bc-review-spotlight__heading .bc-review-spotlight__score{margin-top:0}.bc-cm.bc30 .bc-review-spotlight__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:32px;max-width:var(--bc30-cap);margin:0 auto;padding:0 var(--bc30-gutter);text-align:left}.bc-cm.bc30 .bc-review-spotlight__kaart{position:relative;margin:0;padding:36px 28px 32px;background:var(--bc30-grond);border-radius:var(--bc30-r-kaart);box-shadow:var(--bc30-schaduw-kaart)}.bc-cm.bc30 .bc-review-spotlight__kaart:nth-child(2){margin-top:20px}.bc-cm.bc30 .bc-review-spotlight__kaart .bc-review-spotlight__quote-mark{position:absolute;top:-24px;left:28px;height:auto}.bc-cm.bc30 .bc-review-spotlight__kaart blockquote{margin:0 0 24px;font:700 var(--bc30-fs-citaat)/1.5 var(--bc30-font-kop);color:var(--bc30-kop)}.bc-cm.bc30 .bc-review-spotlight__kaart figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:16px}.bc-cm.bc30 .bc-review-spotlight__kaart .bc-review-spotlight__stars>span{font-size:var(--bc30-fs-citaat);line-height:1}.bc-cm.bc30 .bc-review-spotlight__kaart figcaption img{width:auto;max-width:95px;height:38px;-o-object-fit:contain;object-fit:contain;-o-object-position:left;object-position:left}.bc-cm.bc30 [data-vorm=kaarten] .bc-review-spotlight__all{margin-top:44px;padding:13px 24px}@media(max-width:960px){
 .bc-cm.bc30 .bc-review-spotlight__raster{gap:16px}
 .bc-cm.bc30 .bc-review-spotlight__kaart{padding:28px 20px}
}@media(max-width:640px){
 .bc-cm.bc30 .bc-review-spotlight[data-vorm=kaarten]{padding:64px 0 32px}
 .bc-cm.bc30 [data-vorm=kaarten] .bc-review-spotlight__heading{flex-direction:column;align-items:flex-start;gap:24px;margin-bottom:48px}
 .bc-cm.bc30 .bc-review-spotlight__raster{grid-template-columns:minmax(0,1fr);gap:36px}
 .bc-cm.bc30 .bc-review-spotlight__kaart,.bc-cm.bc30 .bc-review-spotlight__kaart:nth-child(2){margin-top:0;padding:32px 24px}
 .bc-cm.bc30 .bc-review-spotlight__kaart figcaption{flex-direction:row;align-items:center;justify-content:space-between}
}/* Ook als er een contactblok volgt (2.0-ritmeregel in base/rhythm.css zet de onderruimte dan op 56). */.bc-cm.bc30.bc30 [data-variant=vlak] .bc-review-spotlight.bc-visible[data-vorm]:not(.bc-rx--slant-in){padding-bottom:80px}@media(max-width:640px){.bc-cm.bc30.bc30 [data-variant=vlak] .bc-review-spotlight.bc-visible[data-vorm]:not(.bc-rx--slant-in){padding-bottom:32px}}/* Reviews als kaarten op de telefoon: een veegstrook, één kaart per keer met een stukje van de volgende in beeld
   (Tim 20-10, keuze Bram 21-10). De knop "Meer referenties" eronder blijft de weg naar alle reviews. */@media(max-width:699px){
 .bc-cm.bc30 [data-vorm=kaarten] .bc-review-spotlight__raster{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px var(--bc30-gutter) 14px;scroll-padding-inline:var(--bc30-gutter);margin:0}
 .bc-cm.bc30 [data-vorm=kaarten] .bc-review-spotlight__raster::-webkit-scrollbar{display:none}
 .bc-cm.bc30 [data-vorm=kaarten] .bc-review-spotlight__kaart{flex:0 0 84%;scroll-snap-align:start}
 .bc-cm.bc30 [data-vorm=kaarten] .bc-review-spotlight__all{margin-top:28px}
}/* BC 3.0: ClientLogos (basis logo-marquee), fase 3 run 5 (lane fotos).
   Alles onder de versiemarker .bc-cm.bc30 (zie fundament.css). Bron: de 3.0-preview (tag
   bc30-vastgezet-2026-09-30), css/components/client-logos.css, geport met
   scripts/port-bc30-css.mjs (bc30-logo-crop wordt bc-logo-marquee__crop) en met de hand opgeruimd:
   de preview stapelde lagen die elkaar overschreven (eerst een donkere band met oranje gloed, daarna
   wit onder `main`); hier staat de uitkomst van die cascade, met dezelfde specificiteit per
   eigenschap. De witte band hing in de preview aan `.bc-cm.cocktail-max-page main .bc-logo-marquee`;
   op WordPress staat `main` buiten `.bc-cm`, dus live werd de band zwart (analyse C). Hier zonder
   `main`. Effectief in de preview (gemeten, analyse C): padding 16/85 (tight 12/85) op elke breedte,
   want de onderpadding 85 uit de gloedlaag (0,6,0) wint van de latere 65, 70, 45 en 48.
   De 2.0-CSS (components/logo-marquee.css: animatie bcMarq, hover-pauze,
   maskerbreedte) blijft de onderlaag. DOM: blocks/logo-marquee/render.mjs; geen eigen
   JS (countup.js uit de hoofdbundel telt de kicker). *//* === Band === *//* base/rhythm.css (2.0) zet op .bc-logo-marquee een cremelaag met schuine randen (0,5,0); de preview
   zette dat met deze specificiteit uit en zette hier de onderpadding. */.bc-cm.bc30.bc30 .bc-logo-marquee:not(.bc-rx--slant-in):not(.bc-rx--slant-out){margin:0;clip-path:none;padding-bottom:85px}.bc-cm.bc30.bc30 .bc-logo-marquee:not(.bc-rx--slant-in):not(.bc-rx--slant-out)::before{display:none}.bc30:where(.bc-cm) .bc-logo-marquee{color:var(--bc30-creme)}.bc-cm.bc30 .bc-logo-marquee{background:var(--bc30-grond)!important;--bc-band-bg:var(--bc30-grond);padding:16px 0 65px}/* Fade aan de randen zoals in 2.0 (O49, Bram 03-10: "die fade was wel echt nice, graag ook in 3.0"): een echt masker
   in plaats van een kleurlaag, zodat de logo's op elke grond uitvagen; 120 px op de computer, 64 op de telefoon
   (was 24, daar werd het laatste logo hard afgesneden). */.bc-cm.bc30 .bc-logo-marquee__mask::before,.bc-cm.bc30 .bc-logo-marquee__mask::after{display:none}.bc-cm.bc30 .bc-logo-marquee__mask{--bc30-fade:120px;-webkit-mask-image:linear-gradient(to right,transparent,#000 var(--bc30-fade),#000 calc(100% - var(--bc30-fade)),transparent);mask-image:linear-gradient(to right,transparent,#000 var(--bc30-fade),#000 calc(100% - var(--bc30-fade)),transparent)}@media(max-width:640px){.bc-cm.bc30 .bc-logo-marquee__mask{--bc30-fade:64px}}/* === Kicker === */.bc30:where(.bc-cm) .bc-logo-marquee__kick{font-size:var(--bc30-fs-eyebrow);margin:4px 0 25px}/* Telefoon: de kicker zo licht als op 2 oktober (Bram 2026-10-03): de maat van een kapitaaltjeslabel
   (--bc30-fs-cijferlabel, 10 op de telefoon); past hij niet op een regel, dan twee gelijke regels. */@media(max-width:640px){.bc30:where(.bc-cm) .bc-logo-marquee__kick{letter-spacing:.12em;padding:0 20px;font-size:var(--bc30-fs-cijferlabel);text-wrap:balance}}.bc-cm.bc30 .bc-logo-marquee__kick{color:var(--bc30-donker)}/* Het getal in de kicker is kleine oranje tekst op licht: donkerder (keuze 6B, 2026-10-02; review A3, 03-10). */.bc-cm.bc30 .bc-logo-marquee__kick :is(b,strong){color:var(--bc30-oranje-tekst)}/* === Spoor en logo's === */.bc30:where(.bc-cm) .bc-logo-marquee__track{animation-duration:66s}.bc-cm.bc30 .bc-logo-marquee__track{gap:0;opacity:1}.bc-cm.bc30 .bc-logo-marquee__track ul{gap:110px;padding:0 55px;flex-shrink:0}.bc-cm.bc30 .bc-logo-marquee__track li{width:auto;flex:none;display:flex;align-items:center;justify-content:center}.bc30:where(.bc-cm) .bc-logo-marquee__track img{filter:grayscale(1);opacity:.65;max-height:52px}@media(max-width:760px){.bc-cm.bc30 .bc-logo-marquee__track ul{gap:60px;padding:0 30px}}@media(max-width:640px){
 .bc-cm.bc30 .bc-logo-marquee__track ul{gap:26px;padding:0 13px}
 .bc30:where(.bc-cm) .bc-logo-marquee__track img{max-height:37px}
}/* Uitsnede per logo (render: style uit `uitsnede`): het zichtbare logo als vak, het beeld erin
   verschoven en geschaald, zoals de preview de Figma-logo's bijsneed. Grijs en gedempt op wit. */:where(.bc-cm.bc30) .bc-logo-marquee__crop{display:block;position:relative;overflow:hidden;flex:none}.bc-cm.bc30 .bc-logo-marquee__track .bc-logo-marquee__crop img{position:absolute;max-width:none;max-height:none;-o-object-fit:fill;object-fit:fill}.bc-cm.bc30 .bc-logo-marquee__track .bc-logo-marquee__crop img[src]{opacity:.85;filter:grayscale(1) brightness(.65)}@media(max-width:640px){.bc30:where(.bc-cm) .bc-logo-marquee__crop{zoom:.75}}/* Logo zonder uitsnede (een WP-upload uit de pipeline of uit logo-strip): een vak met vaste hoogte,
   verder dezelfde behandeling als een uitgesneden logo. Geen preview-tegenhanger (de preview sneed elk
   logo bij). De WP-logo's hebben veel witruimte in het bestand (vaak een vierkant van 230x173), dus
   het vak is hoger dan een uitgesneden logo, zoals de 2.0-logorij (60px): zo komt het zichtbare logo
   op ongeveer dezelfde maat (gezien op de logo-strip van 5-redenen-voor-champagnetoren). */.bc-cm.bc30 .bc-logo-marquee__track li>img{height:60px;width:auto;max-width:120px;max-height:none;-o-object-fit:contain;object-fit:contain;opacity:.85;filter:grayscale(1) brightness(.65)}@media(max-width:640px){.bc-cm.bc30 .bc-logo-marquee__track li>img{height:45px;max-width:90px}}/* Eén logomaat en één toon (batch 7, ontwerpreviewer: "kleiner en bleker dan op de home en in reviews; één logohoogte").
   Maat: een logo zonder uitsnede is hoogstens 120 breed (telefoon 90), zoals het breedste uitgesneden logo van de home
   (Vermaat 120); daarvoor was het 170 en stonden brede logo's (Netflix, Douwe Egberts, Vermaat) een derde groter dan
   op de home. Toon: een wit logo (opLicht omgekeerd, de uitsneden uit de preview zijn wit voor de donkere band) wordt
   op een lichte band donker, de grijswaarde van de andere logo's (donkerste tiende gemeten 76, logo's onder de reviews
   52 tot 78; was 165). De
   donkere band van de home heeft eigen regels en blijft zoals hij is. */.bc-cm.bc30 .bc-logo-marquee:not([data-toon="donker"]) .bc-logo-marquee__track img[data-op-licht="omgekeerd"]{filter:grayscale(1) invert(.9)}/* === Pauzeknop (WCAG 2.2.2, review run 5 bevinding 8): klein en rond, rechtsonder in de band onder de
   logo's (in de onderpadding, dus de band wordt niet hoger), in de vorm van de galerijknoppen maar
   kleiner en lichter. Het label staat als tekst in de knop, alleen voor schermlezers; het icoon is CSS
   (twee strepen, gepauzeerd een driehoek). Zonder JS doet hij niets: dan geen knop (ook niet bij
   afdrukken). De sectie is al position:relative (base/rhythm.css),
   hier nog eens voor de zekerheid. === */.bc-cm.bc30 .bc-logo-marquee:has(>.bc-logo-marquee__pauze){position:relative}.bc-cm.bc30 .bc-logo-marquee__pauze{position:absolute;right:max(32px,calc((100% - 1300px) / 2 + 32px));bottom:28px;width:34px;height:34px;display:grid;place-items:center;padding:0;margin:0;border:1px solid #24242235;border-radius:50%;background:transparent;color:#605c56;cursor:pointer;transition:background .2s,color .2s}.bc-cm.bc30 .bc-logo-marquee__pauze:hover{background:var(--bc30-donker);color:var(--bc-white)}/* Tikvlak 44 x 44 (rond 34 zichtbaar), zodat hij op de telefoon goed te raken is. */.bc-cm.bc30 .bc-logo-marquee__pauze::after{content:"";position:absolute;inset:-5px;border-radius:50%}.bc-cm.bc30 .bc-logo-marquee__pauze:focus-visible{outline:3px solid #ee7336;outline-offset:3px}.bc-cm.bc30 .bc-logo-marquee__pauze::before{content:"";box-sizing:content-box;width:3px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor}.bc-cm.bc30 .bc-logo-marquee[data-gepauzeerd] .bc-logo-marquee__pauze::before{width:0;height:0;margin-left:3px;border-left:10px solid currentColor;border-right:0;border-top:6px solid transparent;border-bottom:6px solid transparent}.bc-cm.bc30 .bc-logo-marquee__pauze>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.bc-cm.bc30 .bc-logo-marquee:not([data-gepauzeerd]) [data-bc-pauze-aan],.bc-cm.bc30 .bc-logo-marquee[data-gepauzeerd] [data-bc-pauze-uit]{display:none}.bc-cm.bc30 .bc-logo-marquee[data-gepauzeerd] .bc-logo-marquee__track{animation-play-state:paused}@media(max-width:640px){.bc-cm.bc30 .bc-logo-marquee__pauze{right:24px;bottom:24px}}@media(scripting:none),print{.bc-cm.bc30 .bc-logo-marquee__pauze{display:none}}/* === Variant tight (koffie, champagne, matcha, smoothies, zuurstof): 12px boven in plaats van 16. === */.bc-cm.bc30 .bc-logo-marquee[data-variant="tight"]{padding-top:12px}/* === Minder dan drie logo's: geen band die rondloopt; de rij staat stil en gecentreerd. === */.bc-cm.bc30 .bc-logo-marquee[data-statisch] .bc-logo-marquee__track{animation:none;width:auto;justify-content:center}.bc-cm.bc30 .bc-logo-marquee[data-statisch] .bc-logo-marquee__mask::before,.bc-cm.bc30 .bc-logo-marquee[data-statisch] .bc-logo-marquee__mask::after{display:none}.bc-cm.bc30 .bc-logo-marquee[data-statisch] .bc-logo-marquee__mask{-webkit-mask-image:none;mask-image:none}/* === Print: één rij logo's, zonder de verborgen kopieën en zonder beweging. === */@media print{
 .bc-cm.bc30 .bc-logo-marquee__track{animation:none!important;transform:none!important;width:auto}
 .bc-cm.bc30 .bc-logo-marquee__track ul[aria-hidden="true"]{display:none}
 .bc-cm.bc30 .bc-logo-marquee__track ul{flex-wrap:wrap;justify-content:center;gap:24px 48px}
 .bc-cm.bc30 .bc-logo-marquee__mask::before,.bc-cm.bc30 .bc-logo-marquee__mask::after{display:none}
 .bc-cm.bc30 .bc-logo-marquee__mask{-webkit-mask-image:none;mask-image:none}
}/* === Alias logo-strip draagt zijn eigen rootklasse (class-map, live-import). Wat de 2.0-CSS op die
   wortel zet en hierboven niet al overschreven is, gaat uit (gemeten: alias tegen basisblok): de
   container van 1300px en de reveal-verschuiving. === */.bc-cm.bc30 .bc-logo-marquee.bc-logo-strip{max-width:none;transform:none;transition:none}/* === Toon donker (batch 6, lane b6home, de home zoals 8138): de logoband op de donkere grond onder de homekop, met
   een warme oranje gloed onderaan, de kicker in crème (het getal oranje: op donker blijft het #ee7437, 6B) en de
   logo's licht: grijs en gedempt, een donker logo wit (opDonker wit), een logo met donkere letters op een lichte vorm
   omgekeerd (opDonker omgekeerd). Kickermaat uit het register (eyebrow; 8138 had 10, telefoon 8). === */.bc-cm.bc30 .bc-logo-marquee[data-toon="donker"]{background:radial-gradient(ellipse 44% 105% at 50% 110%,rgba(238,116,55,.22),rgba(238,116,55,.08) 45%,transparent 80%),var(--bc30-zwart)!important;--bc-band-bg:var(--bc30-zwart);padding-top:14px}.bc-cm.bc30 .bc-logo-marquee[data-toon="donker"] .bc-logo-marquee__kick{color:var(--bc30-op-donker-kop)}.bc-cm.bc30 .bc-logo-marquee[data-toon="donker"] .bc-logo-marquee__kick :is(b,strong){color:var(--bc30-oranje)}.bc-cm.bc30 .bc-logo-marquee[data-toon="donker"] .bc-logo-marquee__track img[src]{filter:grayscale(1);opacity:.55}.bc-cm.bc30 .bc-logo-marquee[data-toon="donker"] .bc-logo-marquee__track img[data-op-donker="wit"]{filter:brightness(0) invert(1);opacity:.65}.bc-cm.bc30 .bc-logo-marquee[data-toon="donker"] .bc-logo-marquee__track img[data-op-donker="omgekeerd"]{filter:grayscale(1) invert(1);opacity:.8}.bc-cm.bc30 .bc-logo-marquee[data-toon="donker"] .bc-logo-marquee__pauze{border-color:var(--bc30-lijn-donker);color:var(--bc30-op-donker-zacht)}.bc-cm.bc30 .bc-logo-marquee[data-toon="donker"] .bc-logo-marquee__pauze:hover{background:var(--bc30-op-donker-kop);color:var(--bc30-donker)}@media(max-width:640px){.bc-cm.bc30 .bc-logo-marquee[data-toon="donker"]{padding-top:4px}}/* BC 3.0: Gallery (basis impression-slider), fase 3 run 5 (lane fotos).
   Alles onder de versiemarker .bc-cm.bc30 (zie fundament.css). Bron: de 3.0-preview (tag
   bc30-vastgezet-2026-09-30), css/components/gallery.css, de knophover uit css/base.css en het
   lichtbakdeel uit css/chrome.css, geport met scripts/port-bc30-css.mjs (cocktail-gallery-controls
   wordt bc-impression__controls, de lichtbak dialog.bc30-lightbox wordt
   dialog.bc-impression__lichtbak) en met de hand opgeruimd. De 2.0-CSS
   (components/impression-slider.css: cremeband ::before, verspringende even kaarten, kaartbeeld 3:4)
   en de 2.0-lichtbak (components/gallery.css, .bc-lightbox) blijven de onderlaag, zoals in de
   preview. DOM: blocks/impression-slider/render.mjs; gedrag: src/bc30/gallery.js en lichtbak.js
   (lazy chunk bc-carousel.js). *//* === Sectie, reeks, kaarten === */.bc30:where(.bc-cm) .bc-impression{background:var(--bc30-grond)}.bc-cm.bc30 .bc-impression{padding:70px 0 50px;border:0;isolation:isolate}/* Volle breedte aan beide kanten (B 04-10, Bram: "moet infinite zijn en moet niet uitmaken hoe groot je scherm is";
   vervangt het masker links van vondst B1). De huidige kaart staat op de linker inhoudsrand, gelijk met de kop (max 1300
   met 32 binnenmarge); links ervan staan de vorige kaarten gewoon tot de schermrand. gallery.js houdt genoeg kopieën in
   het spoor (een rondgang is minstens zo breed als het scherm), dus op elke breedte geen gat. --bc-rand rekent met
   100% van de sectie (de reeks is even breed). */.bc-cm.bc30 .bc-impression__track{overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scroll-padding-inline:32px;padding:0 32px 20px;cursor:grab;scroll-snap-type:none!important;scroll-behavior:auto;overflow-anchor:none;-webkit-overflow-scrolling:touch;--bc-rand:max(32px,calc((100% - 1300px)/2 + 32px));padding-inline-start:var(--bc-rand)}/* Review B2: de reeks zelf krijgt toetsenbordfocus (scrollcontainer); een ring van 3 px binnen de rand. */.bc-cm.bc30 .bc-impression__track:focus-visible{outline:3px solid var(--bc30-oranje);outline-offset:-3px}.bc-cm.bc30 .bc-impression__card{flex:0 0 280px;scroll-snap-align:none}.bc-cm.bc30 .bc-impression__card img{border-radius:var(--bc30-r-kaart)}@media(hover:hover){
 .bc-cm.bc30 .bc-impression__card img{transition:filter .35s}
 .bc-cm.bc30 .bc-impression__card:hover img{filter:brightness(1.04)}
}/* === Bediening (teller, vorige, volgende) rechts onder de reeks === */.bc-cm.bc30 .bc-impression__controls{display:flex;justify-content:flex-end;align-items:center;gap:12px;max-width:1300px;margin:18px auto 0;padding:0 32px}.bc-cm.bc30 .bc-impression__controls button{display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid #24242235;background:transparent;color:var(--bc30-kop);border-radius:50%;font:400 var(--bc30-fs-kaart)/1 Arial,sans-serif;cursor:pointer;transition:background .2s,color .2s}.bc-cm.bc30 .bc-impression__controls button:disabled{opacity:.3;cursor:default}.bc-cm.bc30 .bc-impression__controls button:hover:not(:disabled){background:var(--bc30-donker);color:var(--bc30-creme)}.bc-cm.bc30 .bc-impression__controls output{font:600 var(--bc30-fs-klein)/1 var(--bc30-font-tekst);color:#605c56;margin-right:12px}/* Zonder JS doen de knoppen niets: dan geen bediening (de rij scrollt gewoon). Met JS staan ze er
   meteen, ook voor het chunk geladen is, zodat er niets verspringt. Laadt het chunk niet
   (html.bc-carousel-fout, zie carousel-loader.js; review run 5, bevinding 10), dan ook weg. */@media(scripting:none){.bc-cm.bc30 .bc-impression__controls{display:none}}.bc-carousel-fout .bc-cm.bc30 .bc-impression__controls{display:none}@media(max-width:640px){
 .bc-cm.bc30 .bc-impression{padding:46px 0 35px}
 /* Telefoon (B 04-10): de huidige kaart in het midden, links en rechts een stuk van de buren; geen masker. */
 .bc-cm.bc30 .bc-impression__track{--bc-rand:calc((100% - min(76vw,300px)) / 2);gap:18px;padding-inline:var(--bc-rand);scroll-padding-inline:var(--bc-rand)}
 .bc-cm.bc30 .bc-impression__card{flex-basis:76vw;max-width:300px}
 .bc-cm.bc30 .bc-impression__controls{padding-inline:24px;margin-top:8px}
}/* === Kop en eyebrow (optioneel; polaroid-stack en expanding-gallery hadden een zichtbare kop, review
   run 5 bevinding 2): zoals de kop van de reviewsectie, links boven de reeks binnen 1300px. Met een kop
   hangt de cremeband aan de reeks (div.bc-impression__reeks) in plaats van aan de sectie, op dezelfde
   plek ten opzichte van de foto's (sectie 120 van boven en onder, min de sectiepadding 70 en 50; op
   de telefoon 80 min 46 en 35). === */.bc-cm.bc30 .bc-impression__kop{max-width:1300px;box-sizing:border-box;margin:0 auto 40px;padding:0 32px;text-align:left}.bc-cm.bc30 .bc-impression__eyebrow{font:700 var(--bc30-fs-eyebrow)/1.3 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);color:var(--bc30-oranje-tekst);text-transform:uppercase;margin:0 0 22px}.bc-cm.bc30 .bc-impression__kop h2{font:900 var(--bc30-fs-h2)/1.18 var(--bc30-font-kop);letter-spacing:0;margin:0;color:var(--bc30-kop);text-wrap:balance}.bc-cm.bc30 .bc-impression[data-kop]::before{content:none}.bc-cm.bc30 .bc-impression__reeks{position:relative}.bc-cm.bc30 .bc-impression__reeks::before{content:"";position:absolute;left:0;right:0;top:50px;bottom:70px;background:var(--bc30-creme)}@media(max-width:640px){
 .bc-cm.bc30 .bc-impression__kop{padding:0 24px;margin-bottom:24px}
 .bc-cm.bc30 .bc-impression__reeks::before{top:34px;bottom:45px}
}/* === Bijschrift onder een foto (optioneel; bevinding 2): klein en rustig, op de cremeband. Een kaart
   met bijschrift is een figure (marge van de browser uit, de verspringing van de even kaarten uit de
   2.0-regel blijft winnen). === */:where(.bc-cm.bc30) figure.bc-impression__card{margin:0}.bc-cm.bc30 .bc-impression__bijschrift{margin:14px 4px 0;font:500 var(--bc30-fs-klein)/1.5 var(--bc30-font-tekst);color:#605c56;text-align:left;text-wrap:pretty}.bc-cm.bc30 .bc-impression__bijschrift-label{display:block;margin:0 0 3px;font:800 var(--bc30-fs-eyebrow)/1.4 var(--bc30-font-tekst);letter-spacing:.14em;text-transform:uppercase;color:var(--bc30-kop)}.bc-cm.bc30 .bc-impression__bijschrift a{color:var(--bc30-oranje);text-decoration:underline}/* === Een of twee foto's (data-statisch; bevinding 18): een stilstaande rij in het midden, zonder
   bediening en zonder herhaling (de JS van de reeks doet niets). Centreren met automatische marges,
   zodat een rij die op de telefoon breder is dan het scherm gewoon scrollt. === */.bc-cm.bc30 .bc-impression[data-statisch] .bc-impression__track{cursor:auto;padding-inline:var(--bc-rand);-webkit-mask-image:none;mask-image:none}.bc-cm.bc30 .bc-impression[data-statisch] .bc-impression__card:first-child{margin-left:auto}.bc-cm.bc30 .bc-impression[data-statisch] .bc-impression__card:last-child{margin-right:auto}/* Zonder bediening (die neemt 64px in, op de telefoon 54px) houdt de cremeband dezelfde plek onder de
   foto's en bijschriften als met bediening: 6px boven de onderkant van de reeks, op de telefoon 9px
   eronder (anders stak de lagere foto met zijn bijschrift onder de band uit). */.bc-cm.bc30 .bc-impression[data-statisch]::before{bottom:56px}.bc-cm.bc30 .bc-impression[data-statisch] .bc-impression__reeks::before{bottom:6px}@media(max-width:640px){
 .bc-cm.bc30 .bc-impression[data-statisch]::before{bottom:26px}
 .bc-cm.bc30 .bc-impression[data-statisch] .bc-impression__reeks::before{bottom:-9px}
}/* === Lichtbak: de 2.0-lichtbak (kleuren, knoppen, beeldstijl) als dialog over het hele scherm.
   Hij staat dicht in de sectie; lichtbak.js opent hem met showModal() (bovenste laag, dus geen last
   van de overflow van .bc-cm). Foto's worden pas knoppen als de JS draait. === */.bc-cm.bc30 .bc-impression__lichtbak{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;box-sizing:border-box}.bc-cm.bc30 .bc-impression__lichtbak::backdrop{background:#0000}.bc-cm.bc30 .bc-impression__lichtbak[open]{display:flex;animation:bc-lichtbak-in .22s ease-out}.bc-cm.bc30 .bc-impression__lichtbak .bc-lightbox__img{width:auto;height:auto;max-width:calc(100vw - 180px);max-height:82dvh}.bc-cm.bc30 .bc-impression__lichtbak .bc-lightbox__nav:hover{background:#ee7336}/* Pijlen als inline SVG (render; eerder een beeld van www.barcompany.nl dat ook laadde als niemand de
   lichtbak opende, review run 5 bevinding 19): zelfde maat en draaiing als het 2.0-beeld. */.bc-cm.bc30 .bc-impression__lichtbak .bc-lightbox__nav svg{display:block;width:28px;height:auto}.bc-cm.bc30 .bc-impression__lichtbak .bc-lightbox__nav--prev svg{transform:rotate(90deg)}.bc-cm.bc30 .bc-impression__lichtbak .bc-lightbox__nav--next svg{transform:rotate(-90deg)}/* Beeld en bijschrift samen in het midden; met bijschrift wordt het beeld wat lager, zodat beide
   passen. */.bc-cm.bc30 .bc-impression__lichtbak-beeld{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:calc(100vw - 180px)}.bc-cm.bc30 .bc-impression__lichtbak-bijschrift{max-width:680px;margin:0;color:#fff9ef;font:500 var(--bc30-fs-kaarttekst)/1.55 var(--bc30-font-tekst);text-align:center;text-wrap:pretty}.bc-cm.bc30 .bc-impression__lichtbak-bijschrift .bc-impression__bijschrift-label{display:block;margin:0 0 4px;font:800 var(--bc30-fs-eyebrow)/1.4 var(--bc30-font-tekst);letter-spacing:.14em;text-transform:uppercase;color:var(--bc30-op-donker-zacht)}.bc-cm.bc30 .bc-impression__lichtbak-bijschrift a{color:#fff9ef;text-decoration:underline}.bc-cm.bc30 .bc-impression__lichtbak.met-bijschrift .bc-lightbox__img{max-height:calc(82dvh - 96px)}.bc-cm.bc30 .bc-impression__lichtbak-positie{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);color:#fff9ef;font:600 var(--bc30-fs-klein)/1.4 var(--bc30-font-tekst)}.bc-cm.bc30 .bc-impression__lichtbak button:focus-visible{outline:3px solid #ee7336;outline-offset:4px}.bc-cm.bc30 .bc-impression__card img[role=button]{cursor:zoom-in}.bc-cm.bc30 .bc-impression__card img[role=button]:focus-visible{outline:3px solid #ee7336;outline-offset:-5px}@keyframes bc-lichtbak-in{from{opacity:0}to{opacity:1}}@media(max-width:699px){
 .bc-cm.bc30 .bc-impression__lichtbak .bc-lightbox__img{max-width:calc(100vw - 32px);max-height:calc(100dvh - 190px)}
 .bc-cm.bc30 .bc-impression__lichtbak-beeld{max-width:calc(100vw - 32px)}
 .bc-cm.bc30 .bc-impression__lichtbak.met-bijschrift .bc-lightbox__img{max-height:calc(100dvh - 290px)}
 .bc-cm.bc30 .bc-impression__lichtbak .bc-lightbox__close{right:18px;top:18px}
 .bc-cm.bc30 .bc-impression__lichtbak .bc-lightbox__nav{top:auto;bottom:22px;transform:none;width:46px;height:46px}
 .bc-cm.bc30 .bc-impression__lichtbak .bc-lightbox__nav:hover{transform:none}
 .bc-cm.bc30 .bc-impression__lichtbak .bc-lightbox__nav--prev{left:calc(50% - 105px)}
 .bc-cm.bc30 .bc-impression__lichtbak .bc-lightbox__nav--next{right:calc(50% - 105px)}
 .bc-cm.bc30 .bc-impression__lichtbak-positie{bottom:35px}
}/* === Print: de eigen foto's in een raster, zonder klonen en zonder bediening. === */@media print{
 .bc-cm.bc30 .bc-impression__controls{display:none}
 .bc-cm.bc30 .bc-impression__track{overflow:visible!important;flex-wrap:wrap;padding-bottom:0}
 .bc-cm.bc30 .bc-impression__card[aria-hidden="true"]{display:none}
 .bc-cm.bc30 .bc-impression__card{flex:0 0 30%;margin-top:0!important;-moz-column-break-inside:avoid;break-inside:avoid}
}/* === Aliassen (gallery, polaroid-stack, expanding-gallery) dragen hun eigen rootklasse (class-map,
   live-import). Wat de 2.0-CSS op die wortel zet en hierboven niet al overschreven is, gaat uit
   (gemeten: alias tegen basisblok): overflow hidden of clip en de reveal-verschuiving. === */.bc-cm.bc30 .bc-impression:is(.bc-gallery,.bc-polaroid-stack,.bc-expanding-gallery){overflow:visible;transform:none;transition:none}/* === Variant uitvouwen (was expanding-gallery; fase B batch 2, Bram 03-10, opmerking 50: "2.0 is vetter,
   uitvouwen terug in 3.0-stijl"). Een rij panelen; het open paneel groeit naar 7 delen, de rest klapt in
   tot een strook met een verticaal zijlabel. Open (--open:1) is: onder de muis of met toetsenbordfocus,
   anders het paneel met is-active (de ruststand, eerst het eerste; gallery.js verplaatst hem bij klik,
   tik, focus en de muis, zodat het laatst aangewezen paneel open blijft). Zonder JS werkt het uitvouwen
   met de muis en het toetsenbord gewoon (CSS). Alles volgt uit --open, met één easing en zonder veer.
   Het bijschrift (label en zin) staat onder het open
   paneel met een vaste breedte (58% van de rij, hoogstens de leesbreedte; past onder het open paneel bij tot vijf panelen), zodat de tekst niet
   herschikt terwijl het paneel groeit; de rij is zo hoog als het langste bijschrift, dus niets
   verspringt. Een ingeklapt bijschrift steekt onzichtbaar over de buren uit; daarom vangt een bijschrift
   op de computer geen muis (zoals in 2.0). Geen schaduwkader; ronding uit de tokens. Op de telefoon een
   lijst stroken die op een tik openvouwt; zonder JS staan daar alle panelen open. === */.bc-cm.bc30 .bc-impression[data-variant]::before{content:none}.bc-cm.bc30 .bc-impression[data-variant]{padding:var(--bc30-sectie) 0}.bc-cm.bc30 .bc-impression__uitvouw{display:flex;gap:12px;max-width:1300px;margin:0 auto;padding:0 32px;container-type:inline-size;overflow-x:clip}.bc-cm.bc30 .bc-impression__paneel{--open:0;position:relative;flex:calc(1 + 6 * var(--open)) 1 0;min-width:0;margin:0;cursor:pointer;outline:0;transition:flex-grow var(--bc30-duur-beeld) var(--bc30-ease)}.bc-cm.bc30 .bc-impression__paneel-beeld{position:relative;height:clamp(400px,40vw,560px);border-radius:var(--bc30-r-kaart);overflow:hidden;background:var(--bc30-vlak)}.bc-cm.bc30 .bc-impression__paneel-beeld img{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.bc-cm.bc30 .bc-impression__paneel-beeld:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,color-mix(in srgb,var(--bc30-zwart) 60%,transparent),transparent 55%)}.bc-cm.bc30 .bc-impression__paneel-beeld:after,.bc-cm.bc30 .bc-impression__zijlabel{opacity:calc(1 - var(--open));pointer-events:none;transition:opacity var(--bc30-duur) var(--bc30-ease)}.bc-cm.bc30 .bc-impression__zijlabel{position:absolute;inset:24px 0;z-index:1;display:flex;align-items:flex-end;justify-content:center;font:700 var(--bc30-fs-eyebrow)/1 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);text-transform:uppercase;color:var(--bc30-grond)}/* Review B2: het label staat op een donkere pil, want op een lichte foto haalde het los 2,6:1 (kleine tekst vraagt 4,5:1). */.bc-cm.bc30 .bc-impression__zijlabel span{writing-mode:vertical-rl;rotate:180deg;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-height:100%;padding:12px 7px;border-radius:var(--bc30-r-pil);background:color-mix(in srgb,var(--bc30-donker) 88%,transparent)}.bc-cm.bc30 .bc-impression__paneel-bijschrift{display:grid;width:min(var(--bc30-lees),58cqi);margin:0;padding-top:20px;opacity:var(--open);translate:0 calc(8px - 8px * var(--open));pointer-events:none;transition:opacity var(--bc30-duur) var(--bc30-ease),translate var(--bc30-duur) var(--bc30-ease)}.bc-cm.bc30 .bc-impression__paneel .bc-impression__bijschrift-label{margin:0 0 8px;font-weight:700;letter-spacing:var(--bc30-ls-eyebrow);color:var(--bc30-oranje-tekst)}.bc-cm.bc30 .bc-impression__paneel-tekst{display:block;font:700 var(--bc30-fs-h4)/1.55 var(--bc30-font-kop);color:var(--bc30-kop);text-wrap:pretty}.bc-cm.bc30 .bc-impression__paneel:focus-visible .bc-impression__paneel-beeld{outline:3px solid var(--bc30-oranje);outline-offset:4px}/* Muis en toetsenbordfocus tegelijk (review B2): alleen het paneel onder de muis staat open, anders twee half. */@media(min-width:700px){.bc-cm.bc30 :is(.bc-impression__uitvouw:not(:has(>:hover,>:focus-visible))>.is-active,.bc-impression__paneel:hover,.bc-impression__uitvouw:not(:has(>:hover))>.bc-impression__paneel:focus-visible){--open:1;cursor:auto}}/* Telefoon: stroken van 72 px met het label liggend en een plusje; een tik vouwt de strook open tot een
   foto met het bijschrift eronder (dat groeit mee via grid-template-rows). Zonder JS (scripting:none) of
   als het chunk niet laadt (bc-carousel-fout) kan niemand een strook openen: dan staan ze allemaal open. */@media(max-width:699px){
 .bc-cm.bc30 .bc-impression__uitvouw{flex-direction:column;padding:0 24px}
 .bc-cm.bc30 .bc-impression__paneel{flex:none}
 .bc-cm.bc30 .bc-impression__paneel.is-active,.bc-carousel-fout .bc-cm.bc30 .bc-impression__paneel{--open:1;cursor:auto}
 .bc-cm.bc30 .bc-impression__paneel-beeld{height:calc(72px + (clamp(240px,80vw,360px) - 72px) * var(--open));transition:height var(--bc30-duur-beeld) var(--bc30-ease)}
 .bc-cm.bc30 .bc-impression__paneel-beeld:after{background:linear-gradient(90deg,color-mix(in srgb,var(--bc30-zwart) 62%,transparent),color-mix(in srgb,var(--bc30-zwart) 24%,transparent))}
 .bc-cm.bc30 .bc-impression__zijlabel{inset:0;align-items:center;justify-content:space-between;gap:16px;padding:0 20px}
 .bc-cm.bc30 .bc-impression__zijlabel span{writing-mode:horizontal-tb;rotate:none;padding:7px 12px}
 .bc-cm.bc30 .bc-impression__zijlabel:after{content:"+";display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid var(--bc30-op-donker-zacht);border-radius:50%;font:400 var(--bc30-fs-kaart)/1 var(--bc30-font-tekst)}
 .bc-cm.bc30 .bc-impression__paneel-bijschrift{grid-template-rows:0fr;width:auto;padding:0;pointer-events:auto;transition:grid-template-rows var(--bc30-duur-beeld) var(--bc30-ease),opacity var(--bc30-duur) var(--bc30-ease)}
 .bc-cm.bc30 .bc-impression__paneel.is-active .bc-impression__paneel-bijschrift,.bc-carousel-fout .bc-cm.bc30 .bc-impression__paneel-bijschrift{grid-template-rows:1fr}
 .bc-cm.bc30 .bc-impression__paneel-binnen{overflow:hidden;min-height:0;padding-bottom:4px}
 .bc-cm.bc30 .bc-impression__paneel .bc-impression__paneel-binnen>:first-child{margin-top:16px}
}@media(max-width:699px) and (scripting:none){
 .bc-cm.bc30 .bc-impression__paneel{--open:1}
 .bc-cm.bc30 .bc-impression__paneel .bc-impression__paneel-bijschrift{grid-template-rows:1fr}
}/* === Variant polaroids: het prikbord (was polaroid-stack; fase B batch 5b, Bram 04-10 op keuzepagina ronde 2:
   "ik wil optie b en c allebei"; schetsen blokkenboek-nu/schets-b4/polaroids, richting B en C). Een afgeronde
   crème band (grond en donker onderschrift: Bram 04-10) met de kop en het bord. Het bord is een raster van twaalf
   kolommen: de foto's samen (div.bc-impression__fotos, een collage met overlap, draaiing en verspringing) en het
   bordje en de kaartjes elk op een vaste plek (data-plek, gekozen door de render). Indeling naast (hoogstens drie
   foto's met iets erbij): foto's links over acht kolommen, plek 1 en 2 rechts, plek 3 en 4 onder de foto's.
   Indeling onder: foto's over de hele breedte, de dingen in een rij eronder. Tablet en telefoon: de dingen in twee
   kolommen onder de foto's; op de telefoon de foto's in twee kolommen, allemaal staand. Punaise (oneven polaroid,
   bordje, viltje, briefje) en plakband (even polaroid, kaartje) zijn getekend met verlopen in de tokenkleuren
   (geen schaduwkaders: de schaduw van een punaise is een verloop). Omdraaien: de omslag draait om de Y-as naar het
   briefje achterop; de punaise springt eruit, het plakband laat los, de sticker verdwijnt. Vullen, meeplakken,
   draad en optillen op een smalle polaroid: gallery.js. Zonder JS een vol bord met de voorkanten. === */.bc-cm.bc30 .bc-impression__band{position:relative;max-width:var(--bc30-breed);margin:0 max(var(--bc30-gutter),calc((100% - var(--bc30-breed)) / 2));padding:var(--bc30-paneel-pad);border-radius:var(--bc30-r-band);background:var(--bc30-creme);isolation:isolate}.bc-cm.bc30 .bc-impression__band>.bc-impression__kop{--bc30-oranje-tekst:var(--bc30-oranje-tekst-creme);max-width:none;margin:0;padding:0}/* kop op de crème band: eyebrow in de crème-tint (6B, R6c) */.bc-cm.bc30 .bc-impression__draaihint{display:flex;gap:8px;margin:0;font:400 var(--bc30-fs-kaart)/1 var(--bc30-font-script);color:var(--bc30-oranje-tekst-creme);rotate:-4deg;pointer-events:none;transition:opacity var(--bc30-duur-in) var(--bc30-ease)}.bc-cm.bc30 .bc-impression__draaihint svg{width:56px;height:40px;margin-top:12px;fill:none;stroke:var(--bc30-oranje);stroke-width:2.2;stroke-linecap:round}.bc-cm.bc30 .bc-impression__draaihint.is-wacht{opacity:0}.bc-cm.bc30 :is(.bc-impression__vergroot,.bc-impression__draaihint)[hidden]{display:none}/* Op de computer staat de uitnodiging rechts naast de kop, in het raster van de band (de kop houdt zo vanzelf ruimte
   vrij, review batch 5 L10: eerst een vaste 280 px); op tablet en telefoon staat hij onder de kop. */@media(min-width:1000px){
 .bc-cm.bc30 .bc-impression__band{display:grid;grid-template-columns:minmax(0,1fr) auto;-moz-column-gap:var(--bc30-gap);column-gap:var(--bc30-gap);align-items:start}
 .bc-cm.bc30 .bc-impression__band>.bc-impression__bord{grid-column:1/-1}
 .bc-cm.bc30 .bc-impression__band>.bc-impression__draaihint{grid-column:2;grid-row:1}
}@media(max-width:999px){.bc-cm.bc30 .bc-impression__draaihint{margin:8px 0 0;rotate:-2deg}}/* Het bord. Breedte van een staande polaroid (--p, deel van de fotozone) per aantal, liggend 1,25 keer; een nieuwe
   rij schuift op de telefoon 16 px over de vorige (--rij, alleen de oneven: de even liggen 24 lager); op de computer
   en tablet niet (de staande polaroid is daar langer dan de liggende, dan viel het onderschrift weg). */.bc-cm.bc30 .bc-impression__bord{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--bc30-gap);align-items:start;padding:24px 0 0;overflow:visible;cursor:auto;touch-action:auto}.bc-cm.bc30 .bc-impression__fotos{--p:30%;--rij:0px;grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start}@media(min-width:700px){
 .bc-cm.bc30 [data-fotos="1"]>.bc-impression__fotos{--p:34%}
 .bc-cm.bc30 [data-fotos="3"]>.bc-impression__fotos{--p:26%}
 .bc-cm.bc30 [data-fotos="4"]>.bc-impression__fotos{--p:23%}
 .bc-cm.bc30 [data-fotos="veel"]>.bc-impression__fotos{--p:25%}
}/* Polaroid: ritme oneven staand (punaise), even liggend en lager (plakband); draaiing wisselt. */.bc-cm.bc30 .bc-impression__polaroid{--draai:-4deg;--stap:0px;position:relative;flex:none;width:var(--p);margin:calc(var(--stap) + var(--rij)) 0 0;rotate:var(--draai)}.bc-cm.bc30 .bc-impression__polaroid+.bc-impression__polaroid{margin-left:-3%}.bc-cm.bc30 .bc-impression__polaroid:nth-child(4n+3){--draai:-2deg}.bc-cm.bc30 .bc-impression__polaroid:nth-child(even){--draai:3.5deg;--stap:32px;width:calc(var(--p) * 1.25)}.bc-cm.bc30 .bc-impression__polaroid:nth-child(4n){--draai:2deg}.bc-cm.bc30 .bc-impression__til{position:relative;translate:var(--til-x,0) 0;scale:var(--til-s,1);transform-origin:50% 0;perspective:1400px;transition:translate var(--bc30-duur-beeld) var(--bc30-ease),scale var(--bc30-duur-beeld) var(--bc30-ease)}.bc-cm.bc30 .bc-impression__omslag{position:relative;transform-style:preserve-3d;transition:transform var(--bc30-duur-beeld) var(--bc30-ease),translate var(--bc30-duur) var(--bc30-ease)}.bc-cm.bc30 .bc-impression__voor{margin:0;padding:12px 12px 0;background:var(--bc30-grond)}.bc-cm.bc30 :is(.bc-impression__voor,.bc-impression__achter){box-shadow:var(--bc30-schaduw-kaart);backface-visibility:hidden;transition:box-shadow var(--bc30-duur) var(--bc30-ease)}.bc-cm.bc30 .bc-impression__polaroid img{display:block;width:100%;aspect-ratio:4/5;-o-object-fit:cover;object-fit:cover;border-radius:0;box-shadow:none}.bc-cm.bc30 .bc-impression__polaroid:nth-child(even) img{aspect-ratio:5/4}.bc-cm.bc30 [data-focus="links"] img{-o-object-position:20%;object-position:20%}.bc-cm.bc30 [data-focus="rechts"] img{-o-object-position:80%;object-position:80%}.bc-cm.bc30 [data-focus="boven"] img{-o-object-position:50% 20%;object-position:50% 20%}.bc-cm.bc30 [data-focus="onder"] img{-o-object-position:50% 80%;object-position:50% 80%}.bc-cm.bc30 .bc-impression__voor:not(:has(figcaption)){padding-bottom:48px}.bc-cm.bc30 .bc-impression__polaroid .bc-impression__bijschrift{margin:0;padding:12px 8px 16px;font:400 var(--bc30-fs-kaart)/1.2 var(--bc30-font-script);color:var(--bc30-donker);text-align:center;text-wrap:balance}/* Achterop: off-white fotopapier met fijne stippen, een label, het briefje in schrijfletters en een stempel. Hij mag
   langer zijn dan de voorkant (een lang briefje valt nooit weg). */.bc-cm.bc30 .bc-impression__achter{position:absolute;inset:0 0 auto;min-height:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:24px 24px 48px;background:radial-gradient(var(--bc30-lijn) 1px,transparent 1.5px) 0 0/8px 8px,var(--bc30-vlak);transform:rotateY(180deg);container-type:inline-size}.bc-cm.bc30 .bc-impression__achter p{margin:0;font:400 var(--bc30-fs-h4)/1.25 var(--bc30-font-script);color:var(--bc30-donker)}@container (min-width:240px){.bc-cm.bc30 .bc-impression__achter p{font-size:var(--bc30-fs-kaart)}}.bc-cm.bc30 .bc-impression__achter .bc-impression__achter-label,.bc-cm.bc30 .bc-impression__stempel{font:800 var(--bc30-fs-eyebrow)/1.2 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);text-transform:uppercase;color:var(--bc30-oranje-tekst)}.bc-cm.bc30 .bc-impression__stempel{position:absolute;right:16px;bottom:16px;padding:4px 8px;border:1.5px solid var(--bc30-oranje);border-radius:var(--bc30-r-pil);rotate:-8deg}/* Punaise: bolle kop met lichtvlek en een zachte schaduw naar rechtsonder, in verlopen (geen box-shadow). */.bc-cm.bc30 .bc-impression__punaise{--pin:var(--bc30-oranje);--pin-kop:11px;position:absolute;z-index:3;left:50%;top:6px;width:30px;height:30px;margin:calc(var(--pin-kop) * -1) 0 0 calc(var(--pin-kop) * -1);background:radial-gradient(circle at 8px 7px,color-mix(in srgb,var(--bc30-grond) 80%,transparent) 0 2px,transparent 3.5px),radial-gradient(circle at 11px 11px,var(--pin) 0 5px,color-mix(in srgb,var(--pin) 66%,var(--bc30-zwart)) 10.5px,transparent 11px),radial-gradient(circle at 14px 16px,color-mix(in srgb,var(--bc30-donker) 34%,transparent) 0 6px,transparent 13px);pointer-events:none;transition:translate var(--bc30-duur) var(--bc30-ease),rotate var(--bc30-duur) var(--bc30-ease)}.bc-cm.bc30 .bc-impression__punaise.is-donker{--pin:var(--bc30-donker)}/* Plakband: halfdoorzichtig, rafelige uiteinden. */.bc-cm.bc30 .bc-impression__plakband{--tape-b:92px;position:absolute;z-index:3;left:14%;top:-12px;width:var(--tape-b);height:28px;margin-left:calc(var(--tape-b) / -2);background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--bc30-grond) 30%,transparent) 0 3px,transparent 3px 5px),color-mix(in srgb,var(--bc30-vlak) 70%,transparent);clip-path:polygon(0 10%,5% 0,10% 10%,90% 0,95% 10%,100% 0,98% 50%,100% 100%,95% 90%,90% 100%,10% 90%,5% 100%,0 90%,2% 50%);rotate:-24deg;transform-origin:0 50%;pointer-events:none;transition:scale var(--bc30-duur) var(--bc30-ease),translate var(--bc30-duur) var(--bc30-ease)}.bc-cm.bc30 .bc-impression__plakband+.bc-impression__plakband{left:86%;rotate:22deg;transform-origin:100% 50%}/* De BC-sticker (randloze patch) op de tweede polaroid, of op de enige; die ligt boven zijn buren. */.bc-cm.bc30 .bc-impression__polaroid:nth-child(2){z-index:1}.bc-cm.bc30 .bc-impression__polaroid:is(:nth-child(2),:only-child):after{content:"";position:absolute;z-index:3;right:-24px;bottom:40px;width:clamp(56px,6vw,76px);aspect-ratio:1;background:var(--wpr-bg-afbbe13a-ed02-4134-8e42-0c60e0eb26c2) center/contain no-repeat;rotate:10deg;pointer-events:none;transition:opacity var(--bc30-duur-snel) var(--bc30-ease)}.bc-cm.bc30 .bc-impression__polaroid:nth-child(2):not(:last-child):after{bottom:auto;top:-20px}/* Knoppen (alleen met JS): omdraaien over de hele polaroid, vergroten als rond knopje op de foto. */.bc-cm.bc30 .bc-impression__draai{position:absolute;inset:0;z-index:2;margin:0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.bc-cm.bc30 :is(.bc-impression__draai,.bc-impression__vergroot)>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.bc-cm.bc30 .bc-impression__vergroot{position:absolute;z-index:3;top:20px;right:20px;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--bc30-donker) 82%,transparent);color:var(--bc30-grond);cursor:zoom-in;transition:background var(--bc30-duur-snel) var(--bc30-ease),opacity var(--bc30-duur-snel) var(--bc30-ease)}.bc-cm.bc30 .bc-impression__vergroot:hover{background:var(--bc30-oranje)}.bc-cm.bc30 :is(.bc-impression__draai,.bc-impression__vergroot):focus-visible{outline:3px solid var(--bc30-oranje);outline-offset:4px}@media(hover:hover){
 .bc-cm.bc30 .bc-impression__polaroid:not(:hover,:focus-within) .bc-impression__vergroot{opacity:0}
 .bc-cm.bc30 .bc-impression__polaroid:is(:hover,:focus-within) .bc-impression__omslag{translate:0 -6px}
 .bc-cm.bc30 .bc-impression__polaroid:is(:hover,:focus-within) :is(.bc-impression__voor,.bc-impression__achter){box-shadow:var(--bc30-schaduw)}
}/* Aanwijzen of toetsenbordfocus tilt de polaroid boven zijn buren en het zegel van de buur (review batch 5 L8: de knop
   vergroten lag op 1440 onder de buurpolaroid, de focusring was half bedekt en een klik raakte de buur). Op de polaroid
   met het zegel bovenaan staat vergroten links, want het zegel hoort bij die polaroid en ligt erboven. */.bc-cm.bc30 .bc-impression__polaroid:is(:hover,:focus-within){z-index:4}.bc-cm.bc30 .bc-impression__polaroid:nth-child(2):not(:last-child) .bc-impression__vergroot{right:auto;left:20px}/* Omgedraaid: los van het bord (boven de rest), punaise eruit, plakband los, sticker en vergroten weg. */.bc-cm.bc30 .bc-impression__polaroid.is-om{z-index:5}.bc-cm.bc30 .is-om .bc-impression__omslag{transform:rotateY(180deg);translate:0 -8px}.bc-cm.bc30 .is-om :is(.bc-impression__voor,.bc-impression__achter){box-shadow:var(--bc30-schaduw)}.bc-cm.bc30 .is-om>.bc-impression__punaise{translate:52px -8px;rotate:30deg}.bc-cm.bc30 .is-om>.bc-impression__plakband{scale:.45 1;translate:0 -6px}.bc-cm.bc30 .is-om:after,.bc-cm.bc30 .is-om .bc-impression__vergroot{opacity:0;visibility:hidden}/* Bordje (aan een touwtje), kaartje (plakband), viltje en briefje (punaise) */.bc-cm.bc30 .bc-impression__ding{--draai:-5deg;position:relative;justify-self:center;width:clamp(170px,15vw,220px);rotate:var(--draai)}.bc-cm.bc30 .bc-impression__ding-tekst{position:relative;margin:0;background:var(--bc30-grond);box-shadow:var(--bc30-schaduw-kaart)}.bc-cm.bc30 .bc-impression__ding strong{display:block;font:900 var(--bc30-fs-cijfer)/1 var(--bc30-font-kop);color:var(--bc30-donker)}.bc-cm.bc30 .bc-impression__ding span{display:block;margin-top:4px;font:700 var(--bc30-fs-klein)/1.3 var(--bc30-font-tekst);color:var(--bc30-tekst)}.bc-cm.bc30 [data-vorm="bordje"]{--draai:-3deg;width:clamp(220px,21vw,300px);padding-top:40px}.bc-cm.bc30 [data-vorm="bordje"] .bc-impression__punaise{top:4px}.bc-cm.bc30 [data-vorm="bordje"] .bc-impression__ding-tekst{padding:20px 20px 24px;border-radius:var(--bc30-r-kaart);background:var(--bc30-donker);font:400 var(--bc30-fs-kaart-foto)/1.1 var(--bc30-font-script);color:var(--bc30-op-donker-kop);text-align:center;text-wrap:balance}.bc-cm.bc30 [data-vorm="bordje"] .bc-impression__ding-tekst:before{content:"";position:absolute;inset:6px;border:1.5px solid color-mix(in srgb,var(--bc30-creme) 35%,transparent);border-radius:var(--bc30-r-kaart)}.bc-cm.bc30 .bc-impression__touw{position:absolute;left:0;top:-42px;width:100%;height:52px;overflow:visible}.bc-cm.bc30 .bc-impression__touw path{fill:none;stroke:var(--bc30-donker);stroke-width:1.5;opacity:.7}.bc-cm.bc30 [data-vorm="kaartje"] .bc-impression__plakband{left:50%;top:-13px;rotate:-3deg;transform-origin:50%}.bc-cm.bc30 [data-vorm="kaartje"] .bc-impression__ding-tekst{padding:16px 20px;border-left:4px solid var(--bc30-oranje)}.bc-cm.bc30 [data-vorm="viltje"]{--draai:9deg;width:clamp(150px,14vw,200px)}.bc-cm.bc30 [data-vorm="viltje"] .bc-impression__punaise{top:4px}.bc-cm.bc30 [data-vorm="viltje"] .bc-impression__ding-tekst{display:grid;place-content:center;aspect-ratio:1;padding:16px;border-radius:50%;background:radial-gradient(circle closest-side,var(--bc30-grond) 0 84%,var(--bc30-oranje) 84.5% 88%,var(--bc30-grond) 88.5% 93%,color-mix(in srgb,var(--bc30-oranje) 45%,var(--bc30-grond)) 93.5% 95%,var(--bc30-grond) 95.5%);text-align:center}.bc-cm.bc30 [data-vorm="viltje"] strong{color:var(--bc30-oranje-tekst)}.bc-cm.bc30 [data-vorm="viltje"] span{max-width:9em;margin-inline:auto;font-size:var(--bc30-fs-eyebrow);font-weight:800;letter-spacing:var(--bc30-ls-eyebrow);text-transform:uppercase;color:var(--bc30-donker)}.bc-cm.bc30 [data-vorm="briefje"]{--draai:3deg;width:clamp(210px,18vw,270px)}.bc-cm.bc30 [data-vorm="briefje"] .bc-impression__ding-tekst{--r:28px;padding:32px 20px 20px;background:repeating-linear-gradient(transparent 0 calc(var(--r) - 1px),var(--bc30-lijn) 0 var(--r)) 0 32px,var(--bc30-grond);font:400 var(--bc30-fs-kaart) var(--bc30-font-script);line-height:var(--r);color:var(--bc30-donker)}.bc-cm.bc30 [data-vorm="briefje"] strong{display:inline;font:inherit;color:var(--bc30-oranje-tekst)}/* De oranje draad tussen de punaises van viltjes en briefjes (gallery.js tekent hem). */.bc-cm.bc30 .bc-impression__draad{position:absolute;inset:0;z-index:4;width:100%;height:100%;overflow:visible;pointer-events:none}.bc-cm.bc30 .bc-impression__draad path{fill:none;stroke:var(--bc30-oranje);stroke-width:2.5;stroke-linecap:round}/* Computer: plekken. Naast = foto's links (acht kolommen), plek 1 en 2 rechts, 3 en 4 onder de foto's. */@media(min-width:1000px){
 .bc-cm.bc30 [data-indeling="naast"] .bc-impression__fotos{--p:44%;grid-column:1/9;grid-row:1/3}
 .bc-cm.bc30 [data-indeling="naast"][data-fotos="1"] .bc-impression__fotos{--p:60%}
 .bc-cm.bc30 [data-indeling="naast"][data-fotos="3"] .bc-impression__fotos{--p:31%}
 .bc-cm.bc30 [data-indeling="naast"] [data-plek="1"]{grid-area:1/9/2/13}
 .bc-cm.bc30 [data-indeling="naast"] [data-plek="2"]{grid-area:2/9/3/13}
 .bc-cm.bc30 [data-indeling="naast"][data-extra="1"] [data-plek="1"]{grid-row:1/3;align-self:center}
 .bc-cm.bc30 [data-indeling="naast"] [data-plek="3"]{grid-area:3/6/4/10;margin-top:-40px}
 .bc-cm.bc30 [data-indeling="naast"] [data-plek="4"]{grid-area:3/1/4/5}
 .bc-cm.bc30 [data-indeling="onder"] .bc-impression__ding{grid-row:2;grid-column:span 3}
 .bc-cm.bc30 [data-indeling="onder"] [data-plek]:nth-child(odd){margin-top:24px}
 .bc-cm.bc30 [data-indeling="onder"][data-extra="1"] [data-plek="1"]{grid-column:5/9}
 .bc-cm.bc30 [data-indeling="onder"][data-extra="2"] [data-plek="1"]{grid-column:3/7}
 .bc-cm.bc30 [data-indeling="onder"][data-extra="2"] [data-plek="2"]{grid-column:7/11}
 .bc-cm.bc30 [data-indeling="onder"][data-extra="3"] [data-plek="1"]{grid-column:2/5}
 .bc-cm.bc30 [data-indeling="onder"][data-extra="3"] [data-plek="2"]{grid-column:5/9}
 .bc-cm.bc30 [data-indeling="onder"][data-extra="3"] [data-plek="3"]{grid-column:9/12}
}/* Tablet en telefoon: de foto's over de hele breedte, de dingen in twee kolommen eronder. */@media(max-width:999px){
 .bc-cm.bc30 .bc-impression__bord{grid-template-columns:1fr 1fr}
 .bc-cm.bc30 .bc-impression__ding{grid-column:span 1}
 .bc-cm.bc30 :is([data-extra="1"] [data-plek="1"],[data-extra="3"] [data-plek="3"]){grid-column:1/-1}
}@media(min-width:700px) and (max-width:999px){
 .bc-cm.bc30 [data-fotos="2"]>.bc-impression__fotos{--p:40%}
 .bc-cm.bc30 [data-fotos="3"]>.bc-impression__fotos{--p:29%}
 .bc-cm.bc30 :is([data-fotos="4"],[data-fotos="veel"])>.bc-impression__fotos{--p:40%}
}@media(max-width:699px){
 .bc-cm.bc30 .bc-impression__band{margin:0 16px;padding:var(--bc30-paneel-pad) 16px 32px}
 .bc-cm.bc30 .bc-impression__draaihint{font-size:var(--bc30-fs-h4)}
 .bc-cm.bc30 .bc-impression__draaihint svg{width:40px;height:28px;margin:0;rotate:40deg}
 .bc-cm.bc30 .bc-impression__bord{gap:16px 12px}
 .bc-cm.bc30 .bc-impression__fotos{--p:50%}
 .bc-cm.bc30 .bc-impression__polaroid:nth-child(n){--draai:-3deg}
 .bc-cm.bc30 .bc-impression__polaroid:nth-child(even){--draai:3deg;--stap:24px;width:calc(var(--p) * 1.04)}
 .bc-cm.bc30 .bc-impression__polaroid:nth-child(odd):nth-child(n+3){--rij:-16px}
 .bc-cm.bc30 .bc-impression__polaroid:nth-child(n) img{aspect-ratio:4/5}
 .bc-cm.bc30 .bc-impression__voor{padding:8px 8px 0}
 .bc-cm.bc30 .bc-impression__voor:not(:has(figcaption)){padding-bottom:32px}
 .bc-cm.bc30 .bc-impression__polaroid .bc-impression__bijschrift{padding:8px 4px 12px;font-size:var(--bc30-fs-h4);line-height:1.15}
 .bc-cm.bc30 .bc-impression__achter{gap:8px;padding:16px 12px 40px}
 .bc-cm.bc30 .bc-impression__stempel{right:8px;bottom:12px}
 .bc-cm.bc30 .bc-impression__plakband{--tape-b:64px;height:22px}
 .bc-cm.bc30 .bc-impression__polaroid:is(:nth-child(2),:only-child):after{right:-12px;bottom:auto;top:-20px;width:48px}
 .bc-cm.bc30 .bc-impression__vergroot{top:12px;right:12px;width:36px;height:36px}
 .bc-cm.bc30 .bc-impression__polaroid:is(:nth-child(2):not(:last-child),:nth-child(2):last-child,:only-child) .bc-impression__vergroot{right:auto;left:12px}
 .bc-cm.bc30 .is-om>.bc-impression__punaise{translate:36px -4px}
 .bc-cm.bc30 .bc-impression__ding[data-vorm]{width:100%}
 .bc-cm.bc30 [data-vorm="viltje"][data-vorm]{width:84%}
 .bc-cm.bc30 [data-vorm="bordje"] .bc-impression__ding-tekst{padding:16px 12px 20px;font-size:var(--bc30-fs-kaart)}
 .bc-cm.bc30 [data-vorm="kaartje"] .bc-impression__ding-tekst{padding:12px 12px 12px 16px}
 .bc-cm.bc30 [data-vorm="viltje"] .bc-impression__ding-tekst{padding:20px 12px 12px}
 .bc-cm.bc30 [data-vorm="viltje"] span{letter-spacing:.5px}
 .bc-cm.bc30 [data-vorm="briefje"] .bc-impression__ding-tekst{--r:20px;padding:calc(var(--r) + 8px) 12px 12px;background-position:0 calc(var(--r) + 8px);font-size:var(--bc30-fs-h4)}
}/* Meeplakken en vullen (gallery.js): de band plakt onder de header. De dingen landen van dichtbij op hun plek (review
   batch 5 L7), dus de band knipt niets meer af en niets schuift over de kop. */.bc-cm.bc30 .is-plak>.bc-impression__plak{position:sticky;top:var(--bc-plak-top,96px);z-index:1}.bc-cm.bc30 .is-vult [data-bc-ding]{will-change:transform,opacity}/* === Print: uitvouwen als raster met alle bijschriften; het prikbord vol, met het briefje achterop onder elke foto. === */@media print{
 .bc-cm.bc30 .bc-impression__uitvouw{flex-wrap:wrap}
 .bc-cm.bc30 .bc-impression__paneel{--open:1;flex:1 1 40%}
 .bc-cm.bc30 .bc-impression__paneel-beeld{height:240px!important}
 .bc-cm.bc30 .bc-impression__paneel-bijschrift{width:auto;grid-template-rows:1fr!important}
 .bc-cm.bc30 .bc-impression__plak{position:static!important}
 .bc-cm.bc30 .bc-impression__ruimte{display:none}
 .bc-cm.bc30 :is([data-bc-ding],[data-bc-ding]>*,.bc-impression__omslag){transform:none!important;opacity:1!important}
 .bc-cm.bc30 .bc-impression__achter{position:static;min-height:0;margin-top:8px;transform:none;backface-visibility:visible}
 .bc-cm.bc30 :is(.bc-impression__draaihint,.bc-impression__draai,.bc-impression__vergroot,.bc-impression__draad){display:none!important}
}/* === Fotoreeks op de home (band vlak, batch 6, lane b6home; bron 8138): kaarten van 300 (telefoon 220) op de
   off-white grond, zonder zichtbare teller en pijlen eronder, zoals 8138. De bediening blijft er voor het toetsenbord en
   de schermlezer: de reeks zelf is focusbaar (pijltjestoetsen) en de knoppen verschijnen rechtsonder zodra ze focus
   krijgen. Radius uit het register (kaart). === */.bc-cm.bc30 [data-variant=vlak] .bc-impression{position:relative;background:transparent;padding:74px 0}.bc-cm.bc30 [data-variant=vlak] .bc-impression__track{padding-bottom:4px}.bc-cm.bc30 [data-variant=vlak] .bc-impression__card{flex-basis:300px;max-width:none}.bc-cm.bc30 [data-variant=vlak] .bc-impression__controls{position:absolute;right:var(--bc30-gutter);bottom:16px;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip-path:inset(50%)}.bc-cm.bc30 [data-variant=vlak] .bc-impression__controls:focus-within{z-index:2;width:auto;height:auto;padding:4px 4px 4px 16px;overflow:visible;clip-path:none;background:var(--bc30-vlak);border-radius:var(--bc30-r-pil)}@media(max-width:640px){
 .bc-cm.bc30 [data-variant=vlak] .bc-impression{padding:45px 0}
 .bc-cm.bc30 [data-variant=vlak] .bc-impression__track{--bc-rand:calc((100% - 220px) / 2);gap:24px}
 .bc-cm.bc30 [data-variant=vlak] .bc-impression__card{flex-basis:220px}
}/* BC 3.0: Pricing (basis price-cards, onder bc-price-cards; aliassen pricing en comparison).
   Fase B batch 4a (keuze Bram 2026-10-04, schets _fase3/blokkenboek-nu/schets-prijs/): de prijskaart is
   richting C ("prijs op de foto": groot sfeerbeeld met kop, prijs als statement en knop, twee foto's
   ernaast, eronder de uitleg, wat erin zit en de uitbreiding); kaarten en pakketten naast elkaar zijn
   richting B (kolom per pakket met eigen foto, aanbevolen op off-white met etiket, doorklikken als
   tekstlink, één oranje knop onder de rij, veegstrook op de telefoon). Alles onder .bc-cm.bc30, alleen
   tokens uit fundament.css. Over het linkerdeel van de foto ligt altijd een donker verloop (Bram: "werken
   met opacity laag eroverheen iig over linkerdeel foto"), zodat de tekst op elke foto AA haalt. *//* === Sectie: geen eigen grond (de band geeft hem), ruimte zoals de zusters in de band === */.bc-cm.bc30 .bc-price-cards{background:transparent;margin:0;padding:0 0 var(--bc30-sectie)}/* 2.0-ritme (rhythm.css zet op bc-price-cards een schuine crème laag in ::before): uit in 3.0. */.bc-cm.bc30 .bc-price-cards::before{display:none}/* Aliassen pricing en comparison: de wortel draagt ook bc-pricing of bc-comparison; hun 2.0-regels uit. */.bc-cm.bc30 .bc-price-cards:is(.bc-pricing,.bc-comparison){overflow:visible;transform:none;max-width:none;transition:none}/* Sierboog van de band: niet achter een kop die over de volle breedte begint (richting B) of achter het podium. */.bc-cm.bc30 .bc-band:has(>.bc-price-cards:first-child):before{display:none}.bc-cm.bc30 .bc-price-cards__wrap{max-width:var(--bc30-breed);margin:0 auto;padding:0 var(--bc30-gutter)}/* === Gedeeld: kapitaaltjes, de oranje hoofdknop (hover donkerder oranje uit fundament, de 2.0-glow niet
   groen), de tekstlink "Lees meer" (Bram 02-10) en de groene vinkjes in elke lijst (keuze 2B) === */.bc-cm.bc30 :is(.bc-price-cards__eyebrow,.bc-price-cards__label,.bc-price-cards__kicker,.bc-price-cards__etiket){margin:0 0 12px;font:800 var(--bc30-fs-eyebrow)/1.2 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);text-transform:uppercase;color:var(--bc30-oranje-tekst)}.bc-cm.bc30 :is(.bc-price-cards__over,.bc-price-cards__actie)>.bc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;max-width:100%;padding:12px 32px;font:800 var(--bc30-fs-knop)/1.25 var(--bc30-font-tekst);text-align:center;white-space:normal;transform:none}.bc-cm.bc30 :is(.bc-price-cards__over,.bc-price-cards__actie)>.bc-btn,.bc-cm.bc30 :is(.bc-price-cards__over,.bc-price-cards__actie)>.bc-btn:hover{box-shadow:var(--bc30-gloed)}.bc-cm.bc30 .bc-price-cards__meer,.bc-cm.bc30 :is(.bc-price-cards__uitleg,.bc-price-cards__pakket-tekst,.bc-price-cards__slot) a:not([class]){color:var(--bc30-oranje-tekst);text-decoration:underline;text-underline-offset:3px}.bc-cm.bc30 .bc-price-cards__meer{display:inline-block;min-height:24px;font:700 var(--bc30-fs-kaarttekst)/1.6 var(--bc30-font-tekst)}.bc-cm.bc30 .bc-price-cards__meer:hover{color:var(--bc30-oranje-hover)}.bc-cm.bc30 .bc-price-cards__vinkjes{list-style:none;display:grid;gap:12px;margin:0;padding:0}.bc-cm.bc30 .bc-price-cards__vinkjes>li,.bc-cm.bc30 .bc-price-cards__vink{position:relative;margin:0;padding:0 0 0 32px;font:600 var(--bc30-fs-kaarttekst)/1.45 var(--bc30-font-tekst);color:var(--bc30-donker)}.bc-cm.bc30 :is(.bc-price-cards__vinkjes>li,.bc-price-cards__vink):before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--bc30-groen)}.bc-cm.bc30 :is(.bc-price-cards__vinkjes>li,.bc-price-cards__vink):after{content:"";position:absolute;left:6px;top:6px;width:8px;height:4px;border:solid var(--bc30-grond);border-width:0 0 2px 2px;transform:rotate(-45deg)}/* === Richting C: het podium. Hoofdbeeld 2/3 met de prijs erop, twee foto's 1/3 ernaast; de foto's ernaast
   tellen niet mee voor de hoogte (contain), het hoofdbeeld groeit met een lange kop. === */.bc-cm.bc30 .bc-price-cards__podium{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-auto-rows:minmax(600px,auto);gap:16px}.bc-cm.bc30 .bc-price-cards__podium:not(:has(>.bc-price-cards__stapel)){grid-template-columns:minmax(0,1fr)}.bc-cm.bc30 .bc-price-cards__podium[data-fotos="0"]{grid-auto-rows:minmax(440px,auto)}.bc-cm.bc30 .bc-price-cards__hoofd{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;overflow:hidden;border-radius:var(--bc30-r-kaart);background:var(--bc30-zwart)}.bc-cm.bc30 .bc-price-cards__foto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}/* Het verloop: zwart vanuit de hoek linksonder (waar kop, prijs en knop staan), rechtsboven vrij. Alleen tokens:
   zwart naar transparant, de dekking via opacity; gemeten op een witte foto (slechtste geval): alle tekst AA. */.bc-cm.bc30 .bc-price-cards__hoofd:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--bc30-zwart) 0,var(--bc30-zwart) 24%,transparent 68%),radial-gradient(130% 130% at 0 100%,var(--bc30-zwart) 0,var(--bc30-zwart) 46%,transparent 100%);opacity:.86;pointer-events:none}/* Zonder foto: het donkere podium met de oranje boog van de home (vanaf 1000 px). */.bc-cm.bc30 .bc-price-cards__podium[data-fotos="0"] .bc-price-cards__hoofd:before{inset:96px -400px auto auto;width:760px;height:400px;background:var(--wpr-bg-2bd8dfa2-7ca2-46c4-8ad8-327aa1641a85) center/contain no-repeat;transform:rotate(-32deg) scaleX(-1);opacity:1}/* Het IGC-zegel rechtsboven; een eigen badge uit de draft (smoothies: vegan) neemt zijn plek in. */.bc-cm.bc30 .bc-price-cards__hoofd:after,.bc-cm.bc30 .bc-price-cards__zegel{position:absolute;top:24px;right:24px;width:104px;height:104px;-o-object-fit:contain;object-fit:contain}.bc-cm.bc30 .bc-price-cards__hoofd:after{content:"";background:var(--wpr-bg-da93caf9-1bcf-43a7-a668-ed3df989da7e) center/contain no-repeat}.bc-cm.bc30 .bc-price-cards__hoofd:has(>.bc-price-cards__zegel):after{content:none}.bc-cm.bc30 .bc-price-cards__over{position:relative;max-width:min(520px,64%);padding:var(--bc30-paneel-pad);color:var(--bc30-op-donker-tekst)}/* Op de foto: de eyebrow in crème; klein oranje haalde op een lichte foto geen AA (smoothies, 4,25:1). */.bc-cm.bc30 .bc-price-cards__over .bc-price-cards__eyebrow{color:var(--bc30-op-donker-kop)}.bc-cm.bc30 .bc-price-cards__over h2{font:900 var(--bc30-fs-h2-paneel)/1.2 var(--bc30-font-kop);letter-spacing:-.4px;color:var(--bc30-op-donker-kop)}.bc-cm.bc30 .bc-price-cards__over .bc-price-cards__label{margin:24px 0 -16px;color:var(--bc30-op-donker-zacht)}/* De prijs als statement: "Vanaf" in script, het bedrag groot in de koptypografie. "Op aanvraag" op elke breedte
   even groot als een bedrag (Bram 04-10: "Groot"; op 360 past het op één regel). */.bc-cm.bc30 .bc-price-cards__bedrag{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;margin:24px 0 0;font:400 var(--bc30-fs-h2-paneel)/1 var(--bc30-font-tekst)}.bc-cm.bc30 .bc-price-cards__bedrag .bc-script{font-size:var(--bc30-script);line-height:1;transform:rotate(-4deg) translateY(-4px)}.bc-cm.bc30 .bc-price-cards__over .bc-price-cards__bedrag strong{font:900 var(--bc30-fs-statement)/.95 var(--bc30-font-kop);letter-spacing:-.035em;color:var(--bc30-op-donker-kop)}.bc-cm.bc30 .bc-price-cards__over :is(.bc-price-cards__regel,.bc-price-cards__vink){max-width:30em;margin:12px 0 0;font:600 var(--bc30-fs-tekst)/1.5 var(--bc30-font-tekst);color:inherit}.bc-cm.bc30 .bc-price-cards__over small{font-size:var(--bc30-fs-klein);color:var(--bc30-op-donker-zacht)}.bc-cm.bc30 .bc-price-cards__over a:not(.bc-btn){color:var(--bc30-op-donker-kop);text-decoration:underline}.bc-cm.bc30 .bc-price-cards__over>.bc-btn{margin-top:32px}.bc-cm.bc30 .bc-price-cards__stapel{display:grid;grid-auto-rows:minmax(0,1fr);gap:16px;contain:size}.bc-cm.bc30 .bc-price-cards__stapel-foto{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:var(--bc30-r-kaart)}/* Onder het podium: de uitleg links (2/3) op wit; wat erin zit, de onderdelen en de uitbreiding samen in één
   off-white vlak rechts (1/3), met een dunne lijn tussen de delen (batch 5a, Bram 04-10: "de uitbreiding mooi
   aansloot bij dit zit erin ... zodat het een mooi samenhangend geheel wordt"). Zonder uitleg ligt het vlak
   over de volle breedte; met een uitbreiding (data-naast) in de verdeling van het podium: de lijst links in
   kolommen, de uitbreiding rechts onder de foto's ernaast, zoals de schets. */.bc-cm.bc30 .bc-price-cards__onder{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;margin-top:48px;align-items:start}.bc-cm.bc30 .bc-price-cards__uitleg{max-width:var(--bc30-lees)}/* leesbreedte (review batch 7: 720 gaf 86 tekens) *//* Zonder vlak ernaast (geen "Dit zit erin", champagnetoren-zakelijk) lag er rechts 600 px leeg naast de uitleg (review batch
   7). Op de computer loopt de uitleg dan in twee kolommen over de volle breedte; een alinea, citaat of lijstregel breekt
   niet en een inleidende zin blijft bij zijn lijst. */@media(min-width:1000px){
 .bc-cm.bc30 .bc-price-cards__onder:not(:has(>.bc-price-cards__zij))>.bc-price-cards__uitleg{grid-column:1/-1;max-width:none;-moz-columns:2;columns:2;-moz-column-gap:var(--bc30-kolom);column-gap:var(--bc30-kolom)}
 .bc-cm.bc30 .bc-price-cards__onder:not(:has(>.bc-price-cards__zij))>.bc-price-cards__uitleg :is(p,blockquote,li,ul,ol){-moz-column-break-inside:avoid;break-inside:avoid} /* een lijst blijft heel (nachtrun 05-10, matcha: drie punten links, een rechts) */
 .bc-cm.bc30 .bc-price-cards__onder:not(:has(>.bc-price-cards__zij))>.bc-price-cards__uitleg>p:has(+ul){-moz-column-break-after:avoid;break-after:avoid}
}.bc-cm.bc30 .bc-price-cards__uitleg>*+*{margin-top:16px}.bc-cm.bc30 .bc-price-cards__uitleg p{font:400 var(--bc30-fs-tekst)/var(--bc30-lh-tekst) var(--bc30-font-tekst);color:var(--bc30-tekst)}.bc-cm.bc30 .bc-price-cards__uitleg>p+ul{margin-top:12px}.bc-cm.bc30 .bc-price-cards__uitleg .bc-price-cards__citaat-tekst p{margin:24px 0;font:900 var(--bc30-fs-citaat)/1.45 var(--bc30-font-kop);color:var(--bc30-kop)}.bc-cm.bc30 .bc-price-cards__zij{display:grid;align-items:start;border-radius:var(--bc30-r-kaart);background:var(--bc30-vlak)}.bc-cm.bc30 .bc-price-cards__zij>*{margin:0 var(--bc30-kaart-pad);padding:var(--bc30-kaart-pad) 0}.bc-cm.bc30 .bc-price-cards__zij>*+*{border-top:1px solid var(--bc30-lijn)}.bc-cm.bc30 .bc-price-cards__onder:not(:has(>.bc-price-cards__uitleg))>.bc-price-cards__zij{grid-column:1/-1}.bc-cm.bc30 .bc-price-cards__onder:not(:has(>.bc-price-cards__uitleg)) .bc-price-cards__vinkjes{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 32px}.bc-cm.bc30 .bc-price-cards__onder:not(:has(>.bc-price-cards__uitleg)) .bc-price-cards__vinkjes:has(>li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}.bc-cm.bc30 .bc-price-cards__erin-kop{margin:0 0 16px;font:900 var(--bc30-fs-h4)/1.3 var(--bc30-font-kop);color:var(--bc30-kop)}/* Onderdelen van de prijs (smoothies) en het rekenvoorbeeld: regels met het bedrag rechts. */.bc-cm.bc30 :is(.bc-price-cards__onderdelen,.bc-price-cards__voorbeeld ul){list-style:none}.bc-cm.bc30 .bc-price-cards__zij>.bc-price-cards__onderdelen{padding:8px 0}.bc-cm.bc30 .bc-price-cards__voorbeeld ul{margin:0;padding:0}.bc-cm.bc30 :is(.bc-price-cards__onderdelen,.bc-price-cards__voorbeeld ul)>li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin:0;padding:12px 0;font:400 var(--bc30-fs-kaarttekst)/1.5 var(--bc30-font-tekst);color:var(--bc30-tekst);border-bottom:1px solid var(--bc30-lijn)}.bc-cm.bc30 :is(.bc-price-cards__onderdelen,.bc-price-cards__voorbeeld ul)>li:last-child{border-bottom:0}.bc-cm.bc30 :is(.bc-price-cards__onderdelen li>span:last-child,.bc-price-cards__totaal,.bc-price-cards__erbij-prijs strong){font:900 var(--bc30-fs-h4)/1.3 var(--bc30-font-kop);color:var(--bc30-kop);white-space:nowrap}.bc-cm.bc30 .bc-price-cards__onderdelen small{display:block;font-size:var(--bc30-fs-klein);color:var(--bc30-tekst-zacht)}/* De uitbreiding: een kleine foto (geen rondje, Bram 04-10) met een oranje plus en de tekst ernaast, zoals de
   schets; is de kolom te smal, dan schuift de tekst onder de foto. */.bc-cm.bc30 .bc-price-cards__erbij{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px 20px}.bc-cm.bc30 .bc-price-cards__erbij-beeld{position:relative;flex:0 0 auto}.bc-cm.bc30 .bc-price-cards__erbij-foto{display:block;width:104px;height:104px;-o-object-fit:cover;object-fit:cover;border-radius:var(--bc30-r-kaart)}.bc-cm.bc30 .bc-price-cards__plus{position:absolute;right:-8px;bottom:-8px;width:40px;height:40px;border:4px solid var(--bc30-vlak);border-radius:var(--bc30-r-pil);background:var(--bc30-oranje)}.bc-cm.bc30 .bc-price-cards__plus:before,.bc-cm.bc30 .bc-price-cards__plus:after{content:"";position:absolute;inset:0;width:14px;height:2px;margin:auto;background:var(--bc30-grond)}.bc-cm.bc30 .bc-price-cards__plus:after{transform:rotate(90deg)}.bc-cm.bc30 .bc-price-cards__erbij-tekst{flex:1 1 180px;min-width:0}.bc-cm.bc30 :is(.bc-price-cards__erbij,.bc-price-cards__pakket) h3{font:900 var(--bc30-fs-kaart)/1.25 var(--bc30-font-kop);letter-spacing:-.3px;color:var(--bc30-kop);overflow-wrap:break-word}.bc-cm.bc30 :is(.bc-price-cards__erbij-tekst,.bc-price-cards__pakket-tekst)>p:not([class]),.bc-cm.bc30 .bc-price-cards__erbij-prijs{margin:8px 0 0;font:400 var(--bc30-fs-kaarttekst)/var(--bc30-lh-tekst) var(--bc30-font-tekst);color:var(--bc30-tekst)}.bc-cm.bc30 .bc-price-cards__erbij .bc-price-cards__meer{margin-top:12px}@media(min-width:1000px){
 .bc-cm.bc30 .bc-price-cards__zij[data-naast]{grid-template-columns:minmax(0,2fr) minmax(0,1fr);-moz-column-gap:16px;column-gap:16px}
 .bc-cm.bc30 .bc-price-cards__zij[data-naast]>*{grid-column:1}
 .bc-cm.bc30 .bc-price-cards__zij[data-naast]>.bc-price-cards__erbij{grid-column:2;grid-row:1/span 2;align-self:stretch;margin:var(--bc30-kaart-pad) 0;padding:0 var(--bc30-kaart-pad);border-top:0;border-left:1px solid var(--bc30-lijn)}
}@media(min-width:1000px) and (max-width:1199px){
 .bc-cm.bc30 .bc-price-cards__zij[data-naast] .bc-price-cards__vinkjes{grid-template-columns:repeat(2,minmax(0,1fr))}
}/* === Kop van richting B (en van een sectie met alleen een rekenvoorbeeld) === */.bc-cm.bc30 .bc-price-cards__text{max-width:760px;min-width:0}.bc-cm.bc30 .bc-price-cards__text>h2,.bc-cm.bc30 .bc-price-cards__wrap>.bc-price-cards__form-title{font:900 var(--bc30-fs-h2)/var(--bc30-lh-kop) var(--bc30-font-kop);letter-spacing:-.5px;color:var(--bc30-kop)}/* De formulierkop is een h3 onder de prijskop: nooit groter dan de prijsvraag op de foto (32, nacontrole 06-10: matcha 40 tegen 32). */.bc-cm.bc30 .bc-price-cards__wrap>.bc-price-cards__form-title{font-size:var(--bc30-fs-h2-paneel)}.bc-cm.bc30 .bc-price-cards__text>:is(p,ul):not(.bc-price-cards__eyebrow){margin-top:16px;font:400 var(--bc30-fs-lead)/1.6 var(--bc30-font-tekst);color:var(--bc30-tekst)}/* === Richting B: een kolom per pakket, geen kaders en geen schaduw. Op off-white (is-vlak, zie render.mjs):
   met een etiket alleen het aanbevolen pakket, zonder etiket elke kolom met een foto (batch 5a, Bram 04-10
   bij de twee torens: "beide de offwhite achtergrond ... zoals bij grand tower deluxe") === */.bc-cm.bc30 .bc-price-cards__rij{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:24px;margin-top:48px}.bc-cm.bc30 .bc-price-cards__rij[data-n="2"]{--n:2}.bc-cm.bc30 .bc-price-cards__rij[data-n="4"]{--n:4}.bc-cm.bc30 .bc-price-cards__pakket{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:16px 16px 32px;border-radius:var(--bc30-r-kaart)}.bc-cm.bc30 .bc-price-cards__pakket.is-vlak{background:var(--bc30-vlak)}/* Een kolom zonder foto (vacatures, maatregelen): een dunne lijn erboven, zoals een specificatiekolom. */.bc-cm.bc30 .bc-price-cards__pakket:not(:has(>.bc-price-cards__beeld)){padding-top:24px}.bc-cm.bc30 .bc-price-cards__pakket:not(.is-vlak,:has(>.bc-price-cards__beeld)){border-top:1px solid var(--bc30-lijn);border-radius:0}.bc-cm.bc30 .bc-price-cards__pakket.is-breed{grid-column:1/-1;flex-flow:row wrap;align-items:center;justify-content:space-between;gap:16px 24px}.bc-cm.bc30 .bc-price-cards__beeld{position:relative;width:100%;margin:0 0 24px}.bc-cm.bc30 .bc-price-cards__beeld-foto{display:block;width:100%;aspect-ratio:4/3;-o-object-fit:cover;object-fit:cover;border-radius:var(--bc30-r-kaart)}.bc-cm.bc30 .bc-price-cards__rij[data-n="2"] .bc-price-cards__beeld-foto{aspect-ratio:16/10}.bc-cm.bc30 .bc-price-cards__etiket{display:inline-block;padding:8px 16px;border-radius:var(--bc30-r-pil);background:var(--bc30-creme);letter-spacing:.12em;color:var(--bc30-donker)}.bc-cm.bc30 .bc-price-cards__beeld .bc-price-cards__etiket{position:absolute;left:16px;top:16px;margin:0}.bc-cm.bc30 .bc-price-cards__pakket-tekst{align-self:stretch;min-width:0;padding:0 8px}.bc-cm.bc30 .bc-price-cards__pakket .bc-price-cards__bedrag{gap:4px 8px;margin-top:12px;font:400 var(--bc30-fs-kaarttekst)/1.4 var(--bc30-font-tekst);color:var(--bc30-tekst-zacht)}.bc-cm.bc30 .bc-price-cards__pakket .bc-price-cards__bedrag strong{font:900 var(--bc30-fs-h2-paneel)/1.05 var(--bc30-font-kop);letter-spacing:-.03em;color:var(--bc30-kop)}.bc-cm.bc30 .bc-price-cards__vanaf,.bc-cm.bc30 .bc-price-cards__pakket .bc-price-cards__bedrag--tekst{font-weight:700;color:var(--bc30-kop)}.bc-cm.bc30 .bc-price-cards__pakket .bc-price-cards__vinkjes{margin-top:20px;padding-top:20px;border-top:1px solid var(--bc30-lijn)}.bc-cm.bc30 .bc-price-cards__pakket>.bc-price-cards__meer{margin:auto 8px 0;padding-top:24px}.bc-cm.bc30 .bc-price-cards__pakket.is-breed>.bc-price-cards__meer{margin:0;padding:0 8px}.bc-cm.bc30 .bc-price-cards__actie{margin-top:48px;text-align:center}/* === Rekenvoorbeeld (alleen met echte prijzen), slotregel en citaat === */.bc-cm.bc30 .bc-price-cards__voorbeeld{max-width:var(--bc30-tekstkolom);margin-top:40px;padding:var(--bc30-kaart-pad);border-radius:var(--bc30-r-kaart);background:var(--bc30-vlak)}.bc-cm.bc30 .bc-price-cards__situatie{margin:0 0 16px;font:700 var(--bc30-fs-tekst)/1.5 var(--bc30-font-tekst);color:var(--bc30-kop)}.bc-cm.bc30 .bc-price-cards__totaal{margin:16px 0 0}.bc-cm.bc30 .bc-price-cards__slot{max-width:44em;margin:40px auto 0;text-align:center;font:400 var(--bc30-fs-tekst)/1.75 var(--bc30-font-tekst);color:var(--bc30-tekst)}.bc-cm.bc30 .bc-price-cards__citaat{margin:40px 0 0;text-align:center}.bc-cm.bc30 .bc-price-cards__citaat .bc-script{display:inline-block;font-size:var(--bc30-fs-h2);transform:rotate(-2deg)}/* === Offerteformulier onder het blok (matcha, feedback 47). De ruimte boven het formulier is de 20px
   hieronder; de ingebedde kaart van de bc-offerte-plugin (vanaf 1.10.0) begint zonder eigen marge op de
   bovenrand van __formulier (zie bc-content-machine/fixtures/design/bc30/offerte-plugin/README.md). === */.bc-cm.bc30 .bc-price-cards__wrap>.bc-price-cards__form-title{margin-top:80px}.bc-cm.bc30 .bc-price-cards__wrap>.bc-price-cards__text+.bc-price-cards__form-title{margin-top:20px}.bc-cm.bc30 .bc-price-cards__form-note{margin-top:8px;font:400 var(--bc30-fs-klein)/1.5 var(--bc30-font-tekst);color:var(--bc30-tekst-zacht)}.bc-cm.bc30 .bc-price-cards__formulier{margin-top:20px}/* === Tablet en telefoon (tot 999): het podium onder elkaar (hoofdbeeld over de volle breedte, foto's als
   rij eronder); de tekst op een eigen verloop van onderen, zodat hij ook over de volle breedte AA haalt. === */@media(max-width:999px){
 .bc-cm.bc30 .bc-price-cards__podium{display:block}
 .bc-cm.bc30 .bc-price-cards__hoofd{min-height:520px}
 .bc-cm.bc30 .bc-price-cards__podium[data-fotos="0"] .bc-price-cards__hoofd{min-height:400px}
 .bc-cm.bc30 .bc-price-cards__hoofd:before{content:none}
 .bc-cm.bc30 .bc-price-cards__over{max-width:none;padding:80px 40px 40px;background:linear-gradient(transparent,color-mix(in srgb,var(--bc30-zwart) 84%,transparent) 80px,color-mix(in srgb,var(--bc30-zwart) 92%,transparent))}
 .bc-cm.bc30 .bc-price-cards__over>*{max-width:560px}
 .bc-cm.bc30 .bc-price-cards__stapel{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;margin-top:12px;contain:none}
 .bc-cm.bc30 .bc-price-cards__stapel-foto{height:220px}
 .bc-cm.bc30 .bc-price-cards__onder{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:40px}
 .bc-cm.bc30 .bc-price-cards__onder:not(:has(>.bc-price-cards__uitleg)) .bc-price-cards__vinkjes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .bc-cm.bc30 .bc-price-cards__rij{gap:12px}
 .bc-cm.bc30 .bc-price-cards__rij:not([data-bc-veeg]){--n:2}
}/* === Telefoon: kop, prijs en knop samen op het beeld (één oogopslag), de foto's als lage rij eronder;
   pakketten als veegstrook (de volgende kolom steekt uit), tekstkolommen onder elkaar === */@media(max-width:699px){
 .bc-cm.bc30 .bc-price-cards__hoofd{min-height:480px}
 .bc-cm.bc30 .bc-price-cards__podium[data-fotos="0"] .bc-price-cards__hoofd{min-height:360px}
 .bc-cm.bc30 .bc-price-cards__over{padding:80px 24px 24px}
 .bc-cm.bc30 .bc-price-cards__over h2{font-size:var(--bc30-fs-kaart-foto)}
 .bc-cm.bc30 .bc-price-cards__over :is(.bc-price-cards__regel,.bc-price-cards__vink){font-size:var(--bc30-fs-kaarttekst)}
 .bc-cm.bc30 :is(.bc-price-cards__over,.bc-price-cards__actie)>.bc-btn{width:100%;margin-top:24px}
 .bc-cm.bc30 .bc-price-cards__hoofd:after,.bc-cm.bc30 .bc-price-cards__zegel{top:16px;right:16px;width:64px;height:64px}
 .bc-cm.bc30 .bc-price-cards__stapel-foto{height:140px}
 .bc-cm.bc30 .bc-price-cards__onder:not(:has(>.bc-price-cards__uitleg)) .bc-price-cards__vinkjes{grid-template-columns:minmax(0,1fr)}
 .bc-cm.bc30 .bc-price-cards__erbij{gap:16px}
 .bc-cm.bc30 .bc-price-cards__erbij-foto{width:80px;height:80px}
 .bc-cm.bc30 .bc-price-cards__plus{width:36px;height:36px;border-width:3px}
 .bc-cm.bc30 .bc-price-cards__erbij-tekst{flex-basis:160px}
 .bc-cm.bc30 .bc-price-cards__text>:is(p,ul):not(.bc-price-cards__eyebrow){font-size:var(--bc30-fs-tekst)}
 .bc-cm.bc30 .bc-price-cards__rij[data-n]{--n:1;gap:0;margin-top:32px}
 .bc-cm.bc30 .bc-price-cards__rij[data-bc-veeg]{display:flex;gap:12px;margin:32px calc(-1 * var(--bc30-gutter)) 0;padding:0 var(--bc30-gutter);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--bc30-gutter);scrollbar-width:none;align-items:flex-start}
 .bc-cm.bc30 .bc-price-cards__rij[data-bc-veeg]>.bc-price-cards__pakket{flex:0 0 80%;scroll-snap-align:start;padding:0 0 8px}
 .bc-cm.bc30 .bc-price-cards__rij[data-bc-veeg]>.is-vlak{padding:8px 8px 20px}
 .bc-cm.bc30 .bc-price-cards__pakket.is-breed{flex-direction:column;align-items:flex-start}
}/* === Inklappen op de telefoon (lange uitleg, drie delen of meer; src/bc30/mobiel.js zet is-foldbaar): de
   eerste alinea vaagt uit, de rest dicht tot de knop. Zonder JS en bij printen alles open (screen). === */.bc-cm.bc30 .bc-price-cards__fold{display:none}@media screen and (max-width:699px){
 .bc-cm.bc30 .is-foldbaar:not(.is-open) .bc-price-cards__uitleg>:not(:first-child,.bc-price-cards__fold){display:none}
 .bc-cm.bc30 .is-foldbaar:not(.is-open) .bc-price-cards__uitleg>:first-child{max-height:132px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
 .bc-cm.bc30 .is-foldbaar .bc-price-cards__fold{display:inline-flex;align-items:center;min-height:44px;margin-top:0;padding:0;border:0;background:none;color:var(--bc30-oranje-tekst);font:700 var(--bc30-fs-knop)/1.4 var(--bc30-font-tekst);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
}/* === Print: geen foto's en geen verloop (achtergronden printen niet), de tekst donker op wit === */@media print{
 .bc-cm.bc30 :is(.bc-price-cards__foto,.bc-price-cards__stapel,.bc-price-cards__zegel),.bc-cm.bc30 .bc-price-cards__hoofd:before,.bc-cm.bc30 .bc-price-cards__hoofd:after{display:none}
 .bc-cm.bc30 :is(.bc-price-cards__hoofd,.bc-price-cards__podium,.bc-price-cards__over){display:block;min-height:0;padding:0;background:none}
 .bc-cm.bc30 .bc-price-cards__podium .bc-price-cards__over,.bc-cm.bc30 .bc-price-cards__podium .bc-price-cards__over :is(h2,p,strong,small,.bc-price-cards__eyebrow){color:var(--bc30-donker)}
}/* BC 3.0: FAQ (basis faq), run 6.
   Alles onder de versiemarker .bc-cm.bc30 (zie fundament.css). Bron: de 3.0-preview
   (bc-content-machine/scripts/design-compare/bc30/css/components/faq.css), geport met
   scripts/port-bc30-css.mjs (specificiteit zoals in de preview) en met de hand opgeruimd:
   - de dode regel op .bc-faq__wrap (bestaat niet; de wrapper heet bc-faq-wrap) is weg;
   - de doorverwijzing staat in de tool in div.bc-faq__related-tekst (in de preview een
     bronfragment, div.source-fragment); dezelfde regels op die klasse;
   - de vraag is in de tool altijd span.bc-faq__question (in de preview soms een bronkop h3/h4 in
     een div.bc-faq__question); de compacte vraagmaat staat daarom ook op de span zelf.
   De 2.0-CSS (src/components/faq.css, serifvorm) blijft de onderlaag, zoals in de preview.
   Varianten: serif (cocktails), "plain band" (de brede FAQ), "plain compact" (genest in tekst met
   beeld). De open/dicht-animatie hoort bij src/bc30/faq.js (zet .faq-motion; zonder JS de 2.0-vorm).
   Stijlbibliotheek (ronde 2, S1d, 2026-10-02): de serif- en bandvorm blijven crème (accent), de platte vorm staat
   op de witte grond (1B); kop --bc30-fs-h2; vraag in de platte vorm --bc30-fs-citaat (20, telefoon 18); bovenrand
   --bc30-r-band, kaarten --bc30-r-kaart; links in een antwoord donkerder oranje (6B). *//* === Basis (cocktails, serif) === */.bc-cm.bc30 .bc-faq{background:var(--bc30-creme);border-radius:var(--bc30-r-band) var(--bc30-r-band) 0 0;clip-path:none;padding:75px 0}.bc-cm.bc30 .bc-faq__answer{font:400 var(--bc30-fs-tekst)/var(--bc30-lh-tekst) var(--bc30-font-tekst)}.bc-cm.bc30 .bc-faq__answer-inner>p{max-width:var(--bc30-lees)}/* antwoorden waren 86 tot 89 tekens per regel vanaf 820 (UX-sweep batch 7) */.bc-cm.bc30 .bc-faq--serif .bc-faq__eyebrow{color:var(--bc30-oranje-tekst-creme)}/* 2.0 gaf #ee7437 op 13 px (UX-sweep batch 7) */.bc-cm.bc30 .bc-faq .bc-faq__head h2{font-size:var(--bc30-fs-h2)}/* In de bandvorm is de kop de sectiekop van de bronpagina's (preview: bronkop 1,18 en -0,6px), niet de 2.0-serifkop (1,1). */.bc30:where(.bc-cm) .bc-faq[data-variant~="band"] .bc-faq__head h2{line-height:1.18;letter-spacing:-.6px}.bc-cm.bc30 .bc-faq .bc-faq__answer a:not(.bc-btn){color:var(--bc30-oranje-tekst-creme)}.bc-cm.bc30 .bc-faq[data-variant~="plain"]:not([data-variant~="band"]) .bc-faq__answer a:not(.bc-btn){color:var(--bc30-oranje-tekst)}@media(max-width:640px){.bc-cm.bc30 .bc-faq{padding:50px 0}}/* === Animatie door src/bc30/faq.js: de 2.0-rijanimatie staat dan uit; tijdens het sluiten volgt
   het icoon meteen de nieuwe stand (aria-expanded op de summary). === */.bc-cm.bc30 .faq-motion{box-sizing:border-box}.bc-cm.bc30 .faq-motion .bc-faq__answer-wrap{display:block;grid-template-rows:none;transition:none;animation:none}.bc-cm.bc30 .faq-motion .bc-faq__answer{animation:none;transition:none}.bc-cm.bc30 .faq-motion summary[aria-expanded=false] .bc-faq__ic{transform:none}.bc-cm.bc30 .faq-motion summary[aria-expanded=false] .bc-faq__ic:after{transform:none;opacity:1}/* === plain: kale vragenlijst op een lichte grond === */.bc30:where(.bc-cm) .bc-faq[data-variant~="plain"]{padding:36px 0 48px}.bc30:where(.bc-cm) .bc-faq[data-variant~="plain"] details{max-width:1000px;margin:0 auto;border-bottom:1px solid var(--bc30-lijn);background:transparent;border-radius:0}.bc30:where(.bc-cm) .bc-faq[data-variant~="plain"] summary{padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;cursor:pointer;list-style:none}.bc30:where(.bc-cm) .bc-faq[data-variant~="plain"] summary::-webkit-details-marker{display:none}.bc30:where(.bc-cm) .bc-faq[data-variant~="plain"] .bc-faq__question :is(h2,h3,h4,h5,h6){font:700 var(--bc30-fs-citaat)/1.45 var(--bc30-font-tekst);margin:0;color:var(--bc30-kop)}.bc30:where(.bc-cm) .bc-faq[data-variant~="plain"] .bc-faq__answer{padding:0 48px 25px 0;animation:none;transition:none}:where(.bc-cm.bc30) .bc-faq[data-variant~="plain"] .bc-faq__related{background:var(--bc30-grond);padding:0 0 24px}:where(.bc-cm.bc30) .bc-faq[data-variant~="plain"] .bc-faq__related-tekst{max-width:1000px;margin:auto;border-left:3px solid var(--bc30-oranje);padding:15px 24px;background:#ffebca70;border-radius:0 var(--bc30-r-kaart) var(--bc30-r-kaart) 0}.bc30:where(.bc-cm) .bc-faq[data-variant~="plain"]{background:var(--bc30-grond)!important;clip-path:none;border-radius:0}.bc30:where(.bc-cm) .bc-faq[data-variant~="plain"]:before,.bc30:where(.bc-cm) .bc-faq[data-variant~="plain"]:after{display:none!important}@media(max-width:699px){
 .bc30:where(.bc-cm) .bc-faq[data-variant~="plain"] .bc-faq__answer{padding-right:0}
}/* === compact: de korte vragenlijst, genest in een tekst met beeld (A) of als eigen blok (C, `los`).
   Fase B batch 4 (O24, Bram 2026-10-04, schetsen `_fase3/blokkenboek-nu/schets-contact/faq-in-blok/`):
   dunne lijnen boven elke vraag en onder de laatste, een plus in een dunne ring die open een oranje rondje
   met een min wordt. Open volgt [open] zonder JS en aria-expanded met JS (src/bc30/faq.js), zodat het
   rondje bij het dichtklappen meteen terugspringt. In A de vraag in de tekstletter (16), in C in de
   kopletter (18). === */.bc30:where(.bc-cm) .bc-faq[data-variant~="compact"]{padding:0;margin-top:28px;background:transparent!important}.bc30:where(.bc-cm) .bc-faq[data-variant~="compact"] details{max-width:none;border-top:1px solid var(--bc30-lijn);border-bottom:0}.bc30:where(.bc-cm) .bc-faq[data-variant~="compact"] details:last-child{border-bottom:1px solid var(--bc30-lijn)}.bc30:where(.bc-cm) .bc-faq[data-variant~="compact"] summary{padding:16px 0;min-height:56px;gap:16px}.bc30:where(.bc-cm) .bc-faq[data-variant~="compact"] .bc-faq__question{font:800 var(--bc30-fs-tekst)/1.45 var(--bc30-font-tekst);letter-spacing:0;color:var(--bc30-kop);transition:color var(--bc30-duur-snel) var(--bc30-ease)}@media(hover:hover){.bc30:where(.bc-cm) .bc-faq[data-variant~="compact"] summary:hover .bc-faq__question{color:var(--bc30-oranje-tekst)}}.bc30:where(.bc-cm) .bc-faq[data-variant~="compact"] .bc-faq__ic{flex:none;position:relative;width:28px;height:28px;border:0;border-radius:var(--bc30-r-pil);box-shadow:inset 0 0 0 1.5px var(--bc30-lijn);background:transparent;color:var(--bc30-kop);transform:none;transition:background var(--bc30-duur-snel) var(--bc30-ease),box-shadow var(--bc30-duur-snel) var(--bc30-ease),color var(--bc30-duur-snel) var(--bc30-ease)}.bc30:where(.bc-cm) .bc-faq[data-variant~="compact"] .bc-faq__ic:before,.bc30:where(.bc-cm) .bc-faq[data-variant~="compact"] .bc-faq__ic:after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;translate:-50% -50%;border-radius:var(--bc30-r-pil);background:currentColor;transform:none;opacity:1}.bc30:where(.bc-cm) .bc-faq[data-variant~="compact"] .bc-faq__ic:after{width:2px;height:12px;transition:opacity var(--bc30-duur-snel) var(--bc30-ease)}.bc30:where(.bc-cm) .bc-faq[data-variant~="compact"] details[open]>summary:not([aria-expanded=false]) .bc-faq__ic{background:var(--bc30-oranje);box-shadow:none;color:var(--bc30-vlak)}.bc30:where(.bc-cm) .bc-faq[data-variant~="compact"] details[open]>summary:not([aria-expanded=false]) .bc-faq__ic:after{transform:none;opacity:0}/* Toetsenbord: dezelfde ring als links en knoppen (fundament), binnen de rij zodat hij niet buiten de kolom valt. */.bc30:where(.bc-cm) .bc-faq[data-variant~="compact"] summary:focus-visible{outline:3px solid var(--bc30-oranje);outline-offset:-3px;border-radius:var(--bc30-r-kaart)}.bc30:where(.bc-cm) .bc-faq[data-variant~="compact"] .bc-faq__answer{padding:0 48px 20px 0;color:var(--bc30-tekst)}.bc30:where(.bc-cm) .bc-faq[data-variant~="compact"] .bc-faq__answer-inner{font:400 var(--bc30-fs-kaarttekst)/1.7 var(--bc30-font-tekst);color:inherit;max-width:none}.bc30:where(.bc-cm) .bc-faq[data-variant~="compact"] .bc-faq__answer-inner p{line-height:1.7;max-width:none}/* A: de tussenkop boven de vragen in de tekstkolom van een tekst met beeld (profile, veld vragen). */.bc-cm.bc30 .bc-profile__vragen{margin-top:32px}.bc-cm.bc30 .bc-profile__vragen-kop{margin:0 0 4px;font:900 var(--bc30-fs-kaart)/1.3 var(--bc30-font-kop);letter-spacing:var(--bc30-ls-kop);color:var(--bc30-kop)}.bc-cm.bc30 .bc-profile__vragen .bc-faq[data-variant~="compact"]{margin-top:12px}.bc-cm.bc30 .bc-profile__vragen+.bc-profile__ctas{margin-top:32px}@media(max-width:699px){.bc30:where(.bc-cm) .bc-faq[data-variant~="compact"] .bc-faq__answer{padding-right:0}}/* Tussenkop in een antwoord (`### ` in de tekst, champagne "Champagnetorens 2.0"): houdt zijn kopvorm,
   niet de maat van een sectiekop. In de preview een bronkop in .source-heading (zelfde specificiteit). */.bc-cm.bc30 .bc-faq__answer-inner :is(h3,h4).bc-faq__sub{font:900 var(--bc30-fs-kaart)/1.3 var(--bc30-font-kop);letter-spacing:-.3px;margin:26px 0 12px}/* Genummerde lijst in een antwoord (`1. ` in de tekst): dezelfde maten als de opsomming van de
   2.0-serifvorm, met cijfers; in de preview inspringing 22px zoals de bronlijst. */.bc-cm.bc30 .bc-faq--serif .bc-faq__answer-inner ol{list-style:decimal;margin:0 0 26px;padding-left:22px;color:var(--bc30-tekst)}.bc-cm.bc30 .bc-faq--serif .bc-faq__answer-inner ol:last-child{margin-bottom:0}.bc-cm.bc30 .bc-faq--serif .bc-faq__answer-inner ol li{margin:5px 0}/* === band: de brede FAQ (volgorde bindend: even zware selector, later wint) === */.bc30:where(.bc-cm) .bc-faq[data-variant~="band"]{background:var(--bc30-creme)!important;padding:var(--bc30-sectie) 0}.bc30:where(.bc-cm) .bc-faq[data-variant~="band"] .bc-faq-wrap{max-width:1064px}.bc30:where(.bc-cm) .bc-faq[data-variant~="band"] summary{padding:22px 0;gap:26px}.bc30:where(.bc-cm) .bc-faq[data-variant~="band"] .bc-faq__question :is(h2,h3,h4,h5,h6){font:inherit}.bc30:where(.bc-cm) .bc-faq[data-variant~="plain"] .bc-faq__answer-inner{padding:0}.bc30:where(.bc-cm) .bc-faq[data-variant~="plain"] .bc-faq__answer-wrap{display:block;grid-template-rows:none;transition:none;animation:none}.bc30:where(.bc-cm) .bc-faq[data-variant~="compact"] .bc-faq-wrap{max-width:none;margin:0;padding:0}.bc30:where(.bc-cm) .bc-faq[data-variant~="compact"] .bc-faq__list{gap:0}:where(.bc-cm.bc30) .bc-faq[data-variant~="plain"] .bc-faq__related{padding-top:34px}@media(max-width:699px){
 .bc30:where(.bc-cm) .bc-faq[data-variant~="band"] .bc-faq-wrap{padding-inline:24px}
}/* Doorverwijzing onder de band-FAQ: witte kaart met een oranje rand links. */:where(.bc-cm.bc30) .bc-faq[data-variant~="band"] .bc-faq__related{margin:38px auto 0;max-width:860px;padding:0;background:none}:where(.bc-cm.bc30) .bc-faq[data-variant~="band"] .bc-faq__related-tekst{position:relative;padding:24px 30px;background:var(--bc30-vlak);border:0;border-left:4px solid var(--bc30-oranje);border-radius:0 var(--bc30-r-kaart) var(--bc30-r-kaart) 0;color:var(--bc30-kop)}.bc30:where(.bc-cm) .bc-faq[data-variant~="band"] .bc-faq__related a{color:var(--bc30-oranje-tekst);font-weight:800;text-decoration-thickness:1px;text-underline-offset:4px}/* De tekst in de kaart had in de preview de regelhoogte van een bronfragment (16px/1.7). */:where(.bc-cm.bc30) .bc-faq__related-tekst p{line-height:1.7}@media(max-width:699px){
 :where(.bc-cm.bc30) .bc-faq[data-variant~="band"] .bc-faq__related{margin-top:28px}
 :where(.bc-cm.bc30) .bc-faq[data-variant~="band"] .bc-faq__related-tekst{padding:20px}
}/* === Geen schuine rand in 3.0 (feedback Bram 2026-09-29, 31): de 2.0-serifvariant knipt zijn
   achtergrond schuin af; de 2.0-regel staat achter een lange :is()/:not()-keten, vandaar !important. */.bc-cm.bc30 .bc-faq::before{clip-path:none!important}/* === Hover in 3.0 nooit teal (knopregels, besluit Bram 2026-09-21): de meer-knop en links in een
   antwoord worden donkerder oranje. === *//* Kleine oranje tekst (6B, batch 7 ontwerpreviewer: #ee7437 op crème was 2,6:1), zoals de links in een antwoord: op de
   crème vormen (serif en band) --bc30-oranje-tekst-creme (4,66:1), in de platte vorm op wit --bc30-oranje-tekst (4,98:1).
   Hover houdt de kleur; de 2.0-onderstreping van het label is de hoverstand (een lichter oranje zou onder AA zakken).
   Het pijltje volgt de tekstkleur. */.bc-cm.bc30 .bc-faq .bc-faq__more-btn,.bc-cm.bc30 .bc-faq .bc-faq__more-btn:hover{color:var(--bc30-oranje-tekst-creme)}.bc-cm.bc30 .bc-faq[data-variant~="plain"]:not([data-variant~="band"]) .bc-faq__more-btn,.bc-cm.bc30 .bc-faq[data-variant~="plain"]:not([data-variant~="band"]) .bc-faq__more-btn:hover{color:var(--bc30-oranje-tekst)}.bc-cm.bc30 .bc-faq--serif .bc-faq__answer a:not(.bc-btn):hover{color:var(--bc30-oranje-hover)}/* === Meer-knop: beide labels staan als tekst in de knop (TranslatePress); welk label zichtbaar is
   volgt aria-expanded, dat src/components/faq.js (2.0) zet. Zonder JS is de knop verborgen. === *//* Tikvlak minstens 44 px hoog (op de telefoon was de knop 38 px; review run 6 contact, bevinding 17). */.bc-cm.bc30 .bc-faq__more-btn{min-height:44px}.bc-cm.bc30 .bc-faq__more-btn[aria-expanded="true"] [data-bc-faq-meer]{display:none}.bc-cm.bc30 .bc-faq__more-btn[aria-expanded="true"] [data-bc-faq-minder]{display:inline}/* === Print: alle vragen met hun antwoord onder elkaar, zonder de meer-knop. src/bc30/faq.js opent elke
   vraag bij beforeprint en zet hem bij afterprint terug; zonder JS toont Chromium een dichte vraag via
   ::details-content (review run 6 contact, bevinding 11). === */@media print{
 .bc-cm.bc30 .bc-faq__more{display:none!important}
 .bc-cm.bc30 .bc-faq-js .bc-faq__overflow{grid-template-rows:1fr}
 .bc-cm.bc30 .bc-faq__answer-wrap{grid-template-rows:1fr}
}@media print{.bc-cm.bc30 .bc-faq details::details-content{content-visibility:visible}}/* Optionele foto in een antwoord (O24, Bram 03-10): onder de tekst, liggend, in de kaartradius. */.bc-cm.bc30 .bc-faq__beeld{margin:20px 0 0;max-width:440px}.bc-cm.bc30 .bc-faq__beeld img{display:block;width:100%;height:auto;aspect-ratio:3/2;-o-object-fit:cover;object-fit:cover;border-radius:var(--bc30-r-kaart)}/* C: het compacte blok. Links kop met noot, rechts de vragen (4 tegen 8, zoals de schets); onder 1000 px
   onder elkaar. Wit (ook buiten een band), in een band doorzichtig zodat de sierboog van de band niet
   afbreekt; op de telefoon zonder sierboog (die viel achter de vragen). */.bc30:where(.bc-cm) .bc-faq[data-variant~="los"]{margin:0;padding:0 0 var(--bc30-sectie);background:var(--bc30-grond)!important}.bc-cm.bc30 .bc-band>.bc-faq[data-variant~="los"]{background:transparent!important}.bc-cm.bc30 .bc-band>.bc-faq[data-variant~="los"]:last-child{padding-bottom:0}/* Op het raster van de pagina (batch 7, ontwerpreviewer: de kop stond op 192 px, de rest op 102): de brede container,
   met het antwoord op leesbreedte zodat de regels niet langer worden dan in de smalle container. */.bc30:where(.bc-cm) .bc-faq[data-variant~="los"] .bc-faq-wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--bc30-gap) var(--bc30-kolom);align-items:start;max-width:var(--bc30-breed);margin:0 auto;padding:0 var(--bc30-gutter)}.bc30:where(.bc-cm) .bc-faq[data-variant~="los"] .bc-faq__answer-inner{max-width:var(--bc30-lees)}.bc30:where(.bc-cm) .bc-faq[data-variant~="los"] .bc-faq__head{max-width:none;margin:0;padding-top:16px}/* De lijst vult zijn kolom: de 2.0-lijst is 860 breed en gecentreerd (margin auto), in een raster krimpt hij dan. */.bc30:where(.bc-cm) .bc-faq[data-variant~="los"] .bc-faq__list{max-width:none;margin:0}.bc30:where(.bc-cm) .bc-faq[data-variant~="los"] .bc-faq__eyebrow{margin:0 0 12px;font:800 var(--bc30-fs-eyebrow)/1.4 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);color:var(--bc30-oranje-tekst)}.bc30:where(.bc-cm) .bc-faq[data-variant~="los"] .bc-faq__head h2{font-size:var(--bc30-fs-h2-paneel);line-height:var(--bc30-lh-kop);color:var(--bc30-kop)}.bc-cm.bc30 .bc-faq[data-variant~="los"] .bc-faq__noot{margin:16px 0 0;font:400 var(--bc30-fs-kaarttekst)/1.6 var(--bc30-font-tekst);color:var(--bc30-tekst)}.bc-cm.bc30 .bc-faq[data-variant~="los"] .bc-faq__noot a{color:var(--bc30-oranje-tekst);font-weight:800;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}.bc-cm.bc30 .bc-faq[data-variant~="los"] .bc-faq__noot a:hover{color:var(--bc30-oranje-hover)}.bc30:where(.bc-cm) .bc-faq[data-variant~="los"] summary{padding:20px 0;min-height:64px}.bc30:where(.bc-cm) .bc-faq[data-variant~="los"] .bc-faq__question{font:900 var(--bc30-fs-h4)/1.4 var(--bc30-font-kop);letter-spacing:var(--bc30-ls-kop)}.bc30:where(.bc-cm) .bc-faq[data-variant~="los"] .bc-faq__ic{width:32px;height:32px}.bc30:where(.bc-cm) .bc-faq[data-variant~="los"] .bc-faq__answer{padding:0 48px 24px 0}.bc30:where(.bc-cm) .bc-faq[data-variant~="los"] :is(.bc-faq__more,.bc-faq__related){grid-column:2}@media(max-width:999px){.bc30:where(.bc-cm) .bc-faq[data-variant~="los"] .bc-faq-wrap{grid-template-columns:minmax(0,1fr)}.bc30:where(.bc-cm) .bc-faq[data-variant~="los"] :is(.bc-faq__more,.bc-faq__related){grid-column:auto}.bc30:where(.bc-cm) .bc-faq[data-variant~="los"] .bc-faq__head{padding-top:0}}@media(max-width:699px){.bc-cm.bc30 .bc-band:has(>.bc-faq[data-variant~="los"]):before{display:none}}/* BC 3.0: ContactCTA (basis collega-cta, alias cta), run 6.
   Alles onder de versiemarker .bc-cm.bc30 (zie fundament.css). Bron: de 3.0-preview
   (bc-content-machine/scripts/design-compare/bc30/css/components/contact-cta.css), geport met
   scripts/port-bc30-css.mjs (specificiteit zoals in de preview) met de hernoemingen
   cocktail-max-cta -> bc-collega-cta en cocktail-max-cta__arc/__person/__advisor ->
   bc-collega-cta__arc/__person/__advisor, en met de hand opgeruimd:
   - dubbele regels samengevoegd (zelfde selector, zelfde volgorde, dus dezelfde uitkomst);
   - de regels voor de bronlock-variant `source` zijn weg (de tool heeft geen bronfragmenten; de kop
     is altijd een h2 en de knoppen staan direct in de actiekolom);
   - de sierboog is in de tool een span met de swoosh als achtergrond (in de preview een <img>, maar
     hij is sier: geen beeld in de inhoud, en onder 1001px wordt hij niet geladen); maat en plek gelijk.
   De 2.0-CSS (src/components/collega-cta.css) blijft de onderlaag, zoals in de preview. *//* === Sectie: wit, ruimte 95px (55px op de telefoon), geen 2.0-band of schuine rand === */.bc-cm.bc30 .bc-collega-cta{background:var(--bc30-grond)!important;padding:95px 0;border:0}.bc-cm.bc30 .bc-collega-cta__wrap{max-width:1184px}.bc-cm.bc30 .bc-collega-cta:before{display:none}/* === Kaart: donker verloop, persoon rechtsonder, sierboog erachter === */.bc-cm.bc30 .bc-collega-cta .bc-collega-cta__card{position:relative;isolation:isolate;overflow:visible;display:grid;grid-template-columns:1.2fr 1fr;gap:28px;padding:48px 260px 48px 48px;border-radius:var(--bc30-r-kaart);background:transparent;color:var(--bc30-op-donker-kop);box-shadow:var(--bc30-schaduw)}.bc-cm.bc30 .bc-collega-cta .bc-collega-cta__card:before{content:"";position:absolute;inset:0;background:linear-gradient(172deg,#2b2723 8%,#242422 57%,#040301 100%);border-radius:inherit;z-index:-1;pointer-events:none}.bc-cm.bc30 .bc-collega-cta .bc-collega-cta__copy h2{font:900 var(--bc30-fs-h2-paneel)/1.15 var(--bc30-font-kop);color:var(--bc30-op-donker-kop)}.bc-cm.bc30 .bc-collega-cta .bc-collega-cta__copy>p,:where(.bc-cm.bc30) .bc-collega-cta__advisor p{font:400 var(--bc30-fs-tekst)/1.6 var(--bc30-font-tekst);color:var(--bc30-op-donker-zacht)}.bc-cm.bc30 .bc-collega-cta .bc-collega-cta__acts{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0;position:relative;z-index:1}:where(.bc-cm.bc30) .bc-collega-cta__advisor img{display:none}:where(.bc-cm.bc30) .bc-collega-cta__advisor p{margin:0 0 12px}/* Een link uit een weggelaten zin met telefoon of mail (collega-cta/render.mjs) staat als losse tekstlink
   onder de tekst: zoals een link in de tekst (vet, onderstreept, kleur van de tekst), met wat ruimte erboven. */.bc-cm.bc30 .bc-collega-cta .bc-collega-cta__copy>p.bc-collega-cta__verder{margin-top:14px}.bc-cm.bc30 .bc-collega-cta .bc-collega-cta__verder a{color:inherit;font-weight:700;text-decoration:underline}.bc-cm.bc30 .bc-collega-cta .bc-collega-cta__verder a:hover{color:var(--bc30-oranje-hover)}/* === Knoppen: offerte oranje (hover donkerder oranje, fundament), bellen groen met hover oranje === */.bc-cm.bc30 .bc-collega-cta .bc-collega-cta__acts>a{font:800 var(--bc30-fs-knop)/1.2 var(--bc30-font-tekst);padding:13px 20px;border-radius:var(--bc30-r-pil);white-space:normal;text-decoration:none;text-align:center;box-shadow:none;transform:none}.bc-cm.bc30 .bc-collega-cta .bc-collega-cta__tel{background:var(--bc30-groen);color:var(--bc-white);border:0;box-shadow:none}.bc-cm.bc30 .bc-collega-cta .bc-collega-cta__tel:hover{background:var(--bc30-groen-hover);transform:none}/* === Persoon en sierboog === */:where(.bc-cm.bc30) .bc-collega-cta__person{position:absolute;bottom:0;right:25px;height:calc(100% + 40px);width:210px;-o-object-fit:contain;object-fit:contain;-o-object-position:bottom;object-position:bottom}.bc-cm.bc30 .bc-collega-cta__person{z-index:1}:where(.bc-cm.bc30) .bc-collega-cta__arc{position:absolute;right:-185px;bottom:0;width:500px;aspect-ratio:1400/737;background:var(--wpr-bg-f4f2391e-0880-47a0-ac6e-8b7a99fca63f) center/contain no-repeat;transform:rotate(-55deg);z-index:-2;pointer-events:none}.bc-cm.bc30 .bc-collega-cta__arc{max-width:none}@media(max-width:1000px){
 .bc-cm.bc30 .bc-collega-cta .bc-collega-cta__card{padding:36px;grid-template-columns:1fr 1fr}
 :where(.bc-cm.bc30) .bc-collega-cta__advisor{display:flex;align-items:center;gap:14px}
 :where(.bc-cm.bc30) .bc-collega-cta__advisor img{-o-object-fit:cover;object-fit:cover;-o-object-position:top;object-position:top;border-radius:12px;background:#3b3934}
 :where(.bc-cm.bc30) .bc-collega-cta__advisor p{margin:0}
 .bc-cm.bc30 .bc-collega-cta__person{display:none}
 .bc-cm.bc30 .bc-collega-cta__advisor img{display:block;width:64px;height:72px;flex-shrink:0}
 .bc-cm.bc30 .bc-collega-cta__arc{display:none}
}/* === Alias cta: de wortel draagt ook bc-cta, dus de 2.0-regels van src/components/cta.css raken de
   3.0-DOM. Wat de 3.0-vorm niet zelf zet, hier terug naar de waarden van het basisblok (gemeten met
   een render van de alias tegen dezelfde data als collega-cta: fixtures/bc30/pariteit/alias-cta-*). === */.bc-cm.bc30 .bc-collega-cta.bc-cta{overflow:visible;transition:none}.bc-cm.bc30 .bc-collega-cta.bc-cta .bc-collega-cta__copy h2{margin:0 0 12px}.bc-cm.bc30 .bc-collega-cta.bc-cta .bc-collega-cta__copy p{margin-bottom:0}.bc-cm.bc30 .bc-collega-cta.bc-cta .bc-collega-cta__advisor p{font:400 var(--bc30-fs-tekst)/1.6 var(--bc30-font-tekst);color:var(--bc30-op-donker-zacht);margin:0 0 12px}.bc-cm.bc30 .bc-collega-cta.bc-cta .bc-collega-cta__acts .bc-btn{margin-top:0}/* cta.css kleurt links in bc-cta oranje met een streep en op hover teal: de belknop blijft wit, een
   link in de tekst zoals in het basisblok (kleur van de tekst, onderstreept, hover donker oranje).
   De streep van cta.css blijft staan: zonder streep is een link op de donkere kaart niet te
   onderscheiden van vette tekst (WCAG 1.4.1; review run 6 contact, bevinding 1). */.bc-cm.bc30 .bc-collega-cta.bc-cta .bc-collega-cta__tel:hover{color:var(--bc-white)}.bc-cm.bc30 .bc-collega-cta.bc-cta .bc-collega-cta__copy a:not([class]){color:inherit}.bc-cm.bc30 .bc-collega-cta.bc-cta .bc-collega-cta__copy a:not([class]):hover{color:var(--bc30-oranje-hover)}@media(max-width:1000px){.bc-cm.bc30 .bc-collega-cta.bc-cta .bc-collega-cta__advisor p{margin:0}}@media(max-width:640px){
 .bc-cm.bc30 .bc-collega-cta{padding:55px 0}
 .bc-cm.bc30 .bc-collega-cta .bc-collega-cta__card{grid-template-columns:1fr;padding:28px 24px;gap:24px}
}/* === Ruimte boven het contactblok (batch 7, ontwerpreviewer: op 390 plakte de kaart aan de FAQ-band, op 1440 raakten
   hoofd en boog de logo's). De 2.0-ritmeregel (base/rhythm.css) haalt de bovenruimte weg als er een getinte sectie of
   een logoband voor staat; in 3.0 is de sectie wit en steken persoon en boog boven de kaart uit (de boog tot 141 px bij
   een kaart van 271 hoog, gemeten). Daarom na zo'n sectie (alles behalve een band, die eindigt met eigen witruimte):
   op de computer ruimte voor de boog plus lucht (twee keer de sectieruimte), daaronder de gewone sectieruimte (daar
   steekt niets boven de kaart uit). Het contactblok overlapt zo alleen wit. Specificiteit net boven de 2.0-regel
   (0,7,0) en onder die van de home (0,8,0), want de home (band vlak) blijft precies 8138. */.bc-cm.bc30 :not(.bc-band)+section.bc-collega-cta.bc-visible[data-component]:not(.bc-collega-cta--cream){padding-top:var(--bc30-sectie)}@media(min-width:1001px){.bc-cm.bc30 :not(.bc-band)+section.bc-collega-cta.bc-visible[data-component]:not(.bc-collega-cta--cream){padding-top:calc(var(--bc30-sectie) * 2)}}/* Tablet (701 tot 1000, batch 7: op 1000 was de rechterderde leeg): de kaart zoals op de home tot 960, tekst en knoppen
   onder elkaar en de persoon rechts in de kaart, in plaats van de kleine adviesfoto; zonder boog (die viel hier
   achter de kaart en bleef alleen als een randje onder de persoon over). Niet op de home (eigen regels). */@media(min-width:701px) and (max-width:1000px){
 .bc-cm.bc30 .bc-collega-cta:not([data-variant=vlak] *) .bc-collega-cta__card{grid-template-columns:minmax(0,1fr);padding:32px 215px 32px 32px}
 .bc-cm.bc30 .bc-collega-cta:not([data-variant=vlak] *) .bc-collega-cta__person{display:block;right:16px;width:185px}
 .bc-cm.bc30 .bc-collega-cta:not([data-variant=vlak] *) .bc-collega-cta__advisor img{display:none}
}/* === Contactblok op de home (band vlak, batch 6, lane b6home; bron 8138 "Cheers, kies je favoriete concept"): de
   donkere kaart van 1120 breed met drie kolommen (tekst, adviesregel en knoppen, ruimte voor Luna), Luna rechtsonder
   die boven de kaart uitsteekt en de oranje boog achter haar; tot 960 px tekst en knoppen onder elkaar met Luna rechts,
   tot 640 px Luna klein naast de adviesregel en de knoppen over de hele breedte. De belknop met telLabel. === */.bc-cm.bc30 [data-variant=vlak] .bc-collega-cta{background:transparent!important;overflow:clip}.bc-cm.bc30 [data-variant=vlak] .bc-collega-cta__wrap{max-width:var(--bc30-cap)}.bc-cm.bc30 [data-variant=vlak] .bc-collega-cta .bc-collega-cta__card{max-width:1120px;min-height:280px;margin:0 auto;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr) 205px;gap:24px;align-items:center;padding:40px}.bc-cm.bc30 [data-variant=vlak] .bc-collega-cta__mark{margin-bottom:12px}.bc-cm.bc30 [data-variant=vlak] .bc-collega-cta .bc-collega-cta__copy h2{line-height:1.18;margin:0}.bc-cm.bc30 [data-variant=vlak] .bc-collega-cta .bc-collega-cta__copy>p{max-width:365px;line-height:1.65;margin:20px 0 0}.bc-cm.bc30 [data-variant=vlak] .bc-collega-cta .bc-collega-cta__acts{gap:8px}.bc-cm.bc30 [data-variant=vlak] .bc-collega-cta .bc-collega-cta__acts>a{padding:13px 20px}.bc-cm.bc30 [data-variant=vlak] .bc-collega-cta__advisor{display:contents}.bc-cm.bc30 [data-variant=vlak] .bc-collega-cta__advisor p{line-height:1.65;margin:0 0 8px}.bc-cm.bc30 [data-variant=vlak] .bc-collega-cta__advisor img{display:none}.bc-cm.bc30 [data-variant=vlak] .bc-collega-cta__person{display:block;right:28px;width:213px;height:350px}.bc-cm.bc30 [data-variant=vlak] .bc-collega-cta__arc{display:block;right:-130px;bottom:-18px;width:510px;aspect-ratio:1200/556;background-image:var(--wpr-bg-98f74131-9f22-4ed2-9095-5dc85d42ac60);transform:rotate(141.62deg) scaleY(-1)}@media(max-width:1200px){
 .bc-cm.bc30 [data-variant=vlak] .bc-collega-cta .bc-collega-cta__card{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 170px;gap:20px;padding:32px}
 .bc-cm.bc30 [data-variant=vlak] .bc-collega-cta__person{right:16px;width:185px;height:304px}
}@media(max-width:960px){
 .bc-cm.bc30 [data-variant=vlak] .bc-collega-cta .bc-collega-cta__card{grid-template-columns:minmax(0,1fr);padding:32px 215px 32px 32px}
 .bc-cm.bc30 [data-variant=vlak] .bc-collega-cta__arc{width:380px;right:-80px;bottom:8px}
}@media(max-width:640px){
 .bc-cm.bc30 [data-variant=vlak] .bc-collega-cta .bc-collega-cta__card{display:block;min-height:0;padding:24px}
 .bc-cm.bc30 [data-variant=vlak] .bc-collega-cta .bc-collega-cta__copy>p{margin-top:16px;line-height:1.5}
 .bc-cm.bc30 [data-variant=vlak] .bc-collega-cta .bc-collega-cta__acts{align-items:stretch;margin-top:24px}
 .bc-cm.bc30 [data-variant=vlak] .bc-collega-cta .bc-collega-cta__acts>a{width:100%;min-height:46px}
 .bc-cm.bc30 [data-variant=vlak] .bc-collega-cta__advisor{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:center;margin-bottom:8px}
 .bc-cm.bc30 [data-variant=vlak] .bc-collega-cta__advisor img{display:block}
 .bc-cm.bc30 [data-variant=vlak] .bc-collega-cta__advisor p{margin:0;line-height:1.5}
 .bc-cm.bc30 [data-variant=vlak] .bc-collega-cta__person{display:none}
 .bc-cm.bc30 [data-variant=vlak] .bc-collega-cta__arc{width:190px;right:-38px;bottom:-16px}
}/* Ruimte van het contactblok op de home: de maten van 8138, met zoveel gewicht dat de 2.0-ritmeregel (base/rhythm.css:
   een kaart-CTA na een crème band zonder bovenruimte, de band erboven 56 onder) niet wint. De render zet bc-visible en
   data-component altijd en kent geen --cream meer, dus dit zijn de enige regels voor die ruimte. */.bc-cm.bc30.bc30 [data-variant=vlak] .bc-collega-cta.bc-visible[data-component]:not(.bc-collega-cta--cream){padding:90px 0 100px}@media(max-width:640px){.bc-cm.bc30.bc30 [data-variant=vlak] .bc-collega-cta.bc-visible[data-component]:not(.bc-collega-cta--cream){padding:56px 0 64px}}/* BC 3.0: TeamStory (basis team-intro; alias story-panel), run 6, lane team.
   Alles onder de versiemarker .bc-cm.bc30 (zie fundament.css). Bron: de 3.0-preview
   (bc-content-machine/scripts/design-compare/bc30/css/components/team-story.css plus de regels uit
   base.css die de rol raken, tag bc30-vastgezet-2026-09-30), geport met scripts/port-bc30-css.mjs en
   daarna met de hand:
   - preview-namen naar de 2.0-namespace: bc30-team wordt bc-team-intro, bc30-wrap __inner, bc30-team__text
     __copy, bc30-arc en bc30-team__arc samen __arc, bc30-btn __btn, bc30-eyebrow __eyebrow. __inner en
     __copy zijn nieuwe namen: de 2.0-regels van team-intro.css op __wrap (flex) en __text (smalle kolom,
     eigen alineakleur) zouden de 3.0-vorm anders raken;
   - specificiteit: gelijk aan de preview, behalve de wortel. In de preview raakte geen 2.0-regel
     .bc30-team; hier raakt `.bc-cm .bc-team-intro` (2.0: witte grond, padding 96, overflow) hem wel.
     Daarom staan de wortelregels onder .bc-cm.bc30 (0,3,0), in dezelfde volgorde, zodat de
     dark-regels (0,3,0, later in het bestand) nog steeds winnen, zoals in de preview;
   - de sierboog is een span met het beeld als CSS-achtergrond (assets/imgSmile3.png, uit de preview),
     niet een <img>: zo komt het beeld met de CSS-versie van de CDN mee en zet de render geen adres;
   - bronlock weg (.source-heading, .source-action, [data-type-accent]); de dark-kopmaat (A2, 44px)
     staat hier zonder .source-heading, het tussenkopje in het verhaal (champagne f033) en de knop in
     het verhaal (linkNaAlinea) hebben de berekende maten uit de preview;
   - het scriptwoord in de teamkop: 1,28em (licht, preview body.script-large) en 1,25em met regelhoogte
     ,9 (dark, preview koffie en smoothies). Het fundament sluit de teamkop uit van zijn 1,25em-regel. *//* === Licht (cocktails, matcha, zuurstof) === */:where(.bc-cm.bc30) .bc-team-intro__inner{margin:auto;padding:0 var(--bc-gutter,32px)}.bc30:where(.bc-cm) .bc-team-intro__inner{max-width:var(--bc30-cap);padding-left:var(--bc30-gutter);padding-right:var(--bc30-gutter);margin-left:auto;margin-right:auto}:where(.bc-cm.bc30) .bc-team-intro__arc{position:absolute;pointer-events:none;display:block;aspect-ratio:1200/556;background:var(--wpr-bg-dd32777f-2dbc-47a4-916f-ad216a173517) center/contain no-repeat;width:520px;max-width:none;right:-75px;bottom:90px;transform:rotate(-139.35deg) scaleY(-1);opacity:1;z-index:0}.bc-cm.bc30 .bc-team-intro{position:relative;border-radius:var(--bc30-r-band);padding:160px 0 88px;color:var(--bc30-op-donker-kop);overflow:clip;background:linear-gradient(180deg,#040301 0%,#161613 38%,#242422 76%);isolation:isolate}:where(.bc-cm.bc30) .bc-team-intro__photo{position:relative;border-radius:var(--bc30-r-kaart);aspect-ratio:2.05;background:var(--bc30-donker);z-index:1}:where(.bc-cm.bc30) .bc-team-intro__photo>img:first-child{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 48%;object-position:50% 48%;border-radius:var(--bc30-r-kaart)}:where(.bc-cm.bc30) .bc-team-intro__photo:after{content:"";position:absolute;inset:30% 0 0;background:linear-gradient(0deg,#080806da,transparent 85%);border-radius:0 0 var(--bc30-r-kaart) var(--bc30-r-kaart)}:where(.bc-cm.bc30) .bc-team-intro__heading{position:absolute;left:40px;bottom:32px;z-index:2}.bc30:where(.bc-cm) .bc-team-intro__heading :is(h2,h3){color:var(--bc30-op-donker-kop);font-size:var(--bc30-fs-h2)}.bc30:where(.bc-cm) .bc-team-intro__heading :is(h2,h3) .bc-script{font-size:var(--bc30-script)}.bc30:where(.bc-cm) .bc-team-intro__eyebrow{font:700 var(--bc30-fs-eyebrow)/1.3 var(--bc30-font-tekst);text-transform:uppercase;letter-spacing:var(--bc30-ls-eyebrow);color:var(--bc30-oranje);margin-bottom:18px}.bc30:where(.bc-cm) .bc-team-intro .bc-team-intro__eyebrow{color:var(--bc30-op-donker-kop)}:where(.bc-cm.bc30) .bc-team-intro__badge{position:absolute;right:-24px;top:-32px;width:145px;height:145px;z-index:2}:where(.bc-cm.bc30) .bc-team-intro__story{display:flex;justify-content:space-between;align-items:flex-start;gap:60px;margin-top:42px;position:relative;z-index:2;padding-left:40px;padding-right:40px}.bc30:where(.bc-cm) .bc-team-intro__story p{max-width:650px;color:var(--bc30-op-donker-kop);font-size:var(--bc30-fs-tekst)}@media(max-width:960px){
 :where(.bc-cm.bc30) .bc-team-intro__photo{aspect-ratio:1.65}
 :where(.bc-cm.bc30) .bc-team-intro__badge{width:100px;height:100px;right:-10px;top:-24px}
 :where(.bc-cm.bc30) .bc-team-intro__heading{left:24px;bottom:25px}
 :where(.bc-cm.bc30) .bc-team-intro__story{gap:35px}
}@media(max-width:640px){
 :where(.bc-cm.bc30) .bc-team-intro__inner{padding:0 22px}
 .bc-cm.bc30 .bc-team-intro{padding:105px 0 55px}
 :where(.bc-cm.bc30) .bc-team-intro__photo{aspect-ratio:.93}
 :where(.bc-cm.bc30) .bc-team-intro__photo>img:first-child{-o-object-fit:cover;object-fit:cover;-o-object-position:50% 42%;object-position:50% 42%}
 :where(.bc-cm.bc30) .bc-team-intro__heading{left:20px;right:12px;bottom:25px}
 :where(.bc-cm.bc30) .bc-team-intro__photo:after{inset:25% 0 0}
 :where(.bc-cm.bc30) .bc-team-intro__badge{width:80px;height:80px;right:-8px;top:-23px}
 .bc30:where(.bc-cm) .bc-team-intro__eyebrow{margin-bottom:13px}
}:where(.bc-cm.bc30) .bc-team-intro__copy{max-width:850px}.bc30:where(.bc-cm) .bc-team-intro__copy p{max-width:var(--bc30-lees);font-size:var(--bc30-fs-tekst);line-height:var(--bc30-lh-tekst)}/* leesbreedte: standaard op 1440 liep 801 breed, 94 tekens (review batch 7) */.bc-cm.bc30 [data-variant=vlak] .bc-team-intro__copy p{max-width:none}/* de home is 8138 (band vlak): zonder leesbreedte */.bc30:where(.bc-cm) .bc-team-intro__copy p:first-child{font-weight:700}/* Preview: p+p 20px (en A3: 20px tussen twee tekstdelen); hier tussen elk volgend deel van het verhaal. */.bc30:where(.bc-cm) .bc-team-intro__copy>*+*{margin-top:20px}/* Een tussenkop in het verhaal hoort bij de tekst eronder: meer ruimte erboven dan eronder (nacontrole 06-10, champagne: 20 px). */.bc30:where(.bc-cm) .bc-team-intro__copy>*+:is(h2,h3){margin-top:40px}.bc30:where(.bc-cm) .bc-team-intro__copy strong{font-weight:800;color:var(--bc30-oranje)}.bc30:where(.bc-cm) .bc-team-intro__copy a:not(.bc-btn){color:var(--bc30-oranje);text-decoration:underline;text-underline-offset:4px}.bc30:where(.bc-cm) .bc-team-intro__copy a:not(.bc-btn):hover{color:var(--bc30-oranje-hover)}/* Tussenkop in het verhaal: een h2 met de berekende maat uit de preview (champagne f033: clamp 28 tot
   42, regelhoogte 1,18, letterafstand -0,6; onder 700 30px/1,2 met 22px eronder), een h3 zoals de
   tussenkop van tekst met beeld (22px, 30px erboven; de verhalen van de alias story-panel). */.bc30:where(.bc-cm) .bc-team-intro__copy>h2.bc-team-intro__sub{font:900 var(--bc30-fs-h2)/1.18 var(--bc30-font-kop);letter-spacing:-.6px;color:inherit;margin-bottom:26px}.bc30:where(.bc-cm) .bc-team-intro__copy>h3.bc-team-intro__sub{font:900 var(--bc30-fs-kaart)/1.25 var(--bc30-font-kop);letter-spacing:normal;color:inherit;margin-top:30px;margin-bottom:0}.bc30:where(.bc-cm) .bc-team-intro__copy>h3.bc-team-intro__sub:first-child{margin-top:0}@media(max-width:699px){.bc30:where(.bc-cm) .bc-team-intro__copy>h2.bc-team-intro__sub{line-height:1.2;margin-bottom:22px}}/* Citaat (de afsluitende quote van story-panel): zoals de citaatvorm van de 3.0-tekst, een oranje lijn
   links en de serif vet. */.bc30:where(.bc-cm) .bc-team-intro__copy>blockquote{margin:34px 0 0;padding:2px 0 2px 22px;border-left:3px solid var(--bc30-oranje);background:none;quotes:none}.bc30:where(.bc-cm) .bc-team-intro__copy>blockquote>p{font:700 var(--bc30-fs-citaat)/1.5 var(--bc30-font-kop);color:var(--bc30-op-donker-kop);margin:0}.bc30:where(.bc-cm) .bc-team-intro__copy>blockquote em{font-style:normal;color:var(--bc30-oranje)}/* Kerncijfer (2.0 ghost): het getal in de stijl van de 3.0-cijferbalk (serif 900, oranje), het label
   in de eyebrowletter ernaast, met een dunne lijn erboven zodat het bij het verhaal hoort. */.bc30:where(.bc-cm) .bc-team-intro__copy>.bc-team-intro__cijfer{display:flex;flex-wrap:wrap;align-items:baseline;-moz-column-gap:16px;column-gap:16px;row-gap:6px;margin-top:30px;padding-top:24px;border-top:1px solid rgb(255 234 202 / .18);max-width:none}.bc-cm.bc30 .bc-team-intro__cijfer .bc-team-intro__getal{display:inline;color:var(--bc30-oranje);font:900 var(--bc30-fs-cijfer)/1 var(--bc30-font-kop);letter-spacing:-1px;margin:0;opacity:1;transform:none}.bc-cm.bc30 .bc-team-intro__cijfer .bc-team-intro__label{color:var(--bc30-op-donker-kop);font:700 var(--bc30-fs-eyebrow)/1.4 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);text-transform:uppercase}/* De knop in het verhaal (linkNaAlinea): een eigen regel, de maat van de knop ernaast. */.bc30:where(.bc-cm) .bc-team-intro__copy>.bc-btn{display:flex;width:-moz-fit-content;width:fit-content}:where(.bc-cm.bc30) .bc-team-intro__story>.bc-team-intro__btn{position:relative;z-index:1}@media(max-width:1200px){
 :where(.bc-cm.bc30) .bc-team-intro__copy{max-width:70%}
 :where(.bc-cm.bc30) .bc-team-intro__arc{width:420px;right:-90px}
}@media(max-width:960px){
 :where(.bc-cm.bc30) .bc-team-intro__copy{max-width:72%}
}@media(max-width:640px){
 :where(.bc-cm.bc30) .bc-team-intro__copy{max-width:none}
 :where(.bc-cm.bc30) .bc-team-intro__arc{width:230px;right:-80px;bottom:0}
 /* Buiten de home geen boog op de telefoon: achter de laatste regel haalt crème op oranje geen AA (nachtrun 05-10), en in de
    onderste marge van 55 px past hij niet, dan blijft er een afgeknipt stompje over (nacontrole 06-10). De home (band vlak) blijft 8138. */
 .bc-cm.bc30 .bc-team-intro__arc:not([data-variant=vlak] *){display:none}
 :where(.bc-cm.bc30) .bc-team-intro__story>.bc-team-intro__btn{margin-top:24px}
}@media(max-width:1100px){:where(.bc-cm.bc30) .bc-team-intro__story{padding-left:24px;padding-right:24px}}@media(min-width:961px){:where(.bc-cm.bc30) .bc-team-intro__story{padding-left:40px;padding-right:40px}}@media(max-width:640px){:where(.bc-cm.bc30) .bc-team-intro__story{display:block;margin-top:27px;padding-left:20px;padding-right:12px}}/* === Variant dark (champagne, smoothies, koffie): vlak donker, foto op vaste hoogte, verhaal in een
   raster. Volgorde en specificiteit als in de preview. === */.bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"]{padding:96px 0 82px;background:var(--bc30-donker);border-radius:0}.bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__inner{max-width:1300px;padding:0 32px;position:relative;isolation:isolate}.bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__photo{width:100%;height:480px;border-radius:var(--bc30-r-kaart)}.bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__heading{left:36px;right:36px;bottom:32px}/* A2 (preview): de kop op de foto; sinds 2026-10-02 de sectiekop --bc30-fs-h2 (40, telefoon 30) in plaats van
   44 en 31. Regelhoogte 1,18 en letterafstand -0,6px zoals de donkere previewpagina's hem tonen. */.bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__heading :is(h2,h3){max-width:720px;color:var(--bc30-op-donker-kop);font-size:var(--bc30-fs-h2);line-height:1.18;letter-spacing:-.6px;margin:0}.bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__heading :is(h2,h3) .bc-script{font-size:var(--bc30-script);line-height:.9}/* Fotowissel: de kop op de foto blijft links van de knoppen rechtsonder (148 px plus 24 rand en 16 lucht; op 820 lag "pagina" onder de knoppen, UX-sweep batch 7). */@media(min-width:641px){.bc30:where(.bc-cm) .bc-team-intro__photo[data-variant="slides"] .bc-team-intro__heading{right:188px}}.bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__story{padding:36px 36px 0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:55px;margin-top:0}.bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__copy{max-width:760px;color:var(--bc30-op-donker-kop)}/* De tekst en de knop van de donkere vorm zoals de preview ze op champagne, smoothies en koffie toont:
   alinea's 16/1,7 zonder vette eerste alinea, knop 46px hoog (padding 14 24, regelhoogte 1,25), onder
   700px over de volle breedte. */.bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__copy p{line-height:1.7}.bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__copy p:first-child{font-weight:400}.bc-cm.bc30 .bc-team-intro[data-variant="dark"] .bc-btn{display:inline-flex;align-items:center;justify-self:start;padding:14px 24px;min-height:46px;line-height:1.25;border-radius:var(--bc30-r-pil)}@media(max-width:699px){.bc-cm.bc30 .bc-team-intro[data-variant="dark"] .bc-btn{width:100%;white-space:normal;text-wrap:balance}}.bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__inner>.bc-team-intro__arc{width:520px;right:-78px;top:575px;bottom:auto;z-index:-1}@media(max-width:1100px){
 .bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__story{grid-template-columns:1fr;gap:26px}
 .bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__inner>.bc-team-intro__arc{width:420px;right:-68px;top:auto;bottom:-30px;opacity:.75}
 .bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__copy{max-width:75%}
}/* Tablet: de kleine boog (245, zoals de belofte) in de vrije kwart rechts naast de tekstkolom; de grote lag op 700 en 820
   achter de lopende tekst (nachtrun 05-10). */@media(min-width:700px) and (max-width:999px){.bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__inner>.bc-team-intro__arc{width:245px;right:-60px}}@media(max-width:699px){
 .bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"]{padding:55px 0}
 .bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__inner{padding:0 24px}
 .bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__photo{height:350px}
 .bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__heading{left:24px;right:24px;bottom:66px}
 .bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__heading :is(h2,h3){line-height:1.2}
 .bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__story{padding:28px 0 0;gap:24px}
 /* Het raster geeft de ruimte boven de knop (gap 24); de 24px van de lichte vorm (display:block) niet. */
 .bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__story>.bc-team-intro__btn{margin-top:0}
 /* Geen boog op de telefoon (zie de lichte vorm hierboven: achter de tekst geen AA, eronder een afgeknipt stompje). */
 .bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__inner>.bc-team-intro__arc:not([data-variant=vlak] *){display:none}
 .bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__copy{max-width:none}
}/* === Fotowissel (data-variant="slides" op het fotoblok; src/bc30/team-story.js). Zonder JS staat de
   eerste foto er. === */:where(.bc-cm.bc30) .bc-team-intro__photo[data-variant="slides"] .bc-team-intro__slides{position:absolute;inset:0;overflow:hidden;border-radius:inherit}:where(.bc-cm.bc30) .bc-team-intro__photo[data-variant="slides"] .bc-team-intro__slide{position:absolute;inset:0;opacity:0;transition:opacity var(--bc30-duur-traag) var(--bc30-ease);pointer-events:none}:where(.bc-cm.bc30) .bc-team-intro__photo[data-variant="slides"] .bc-team-intro__slide.is-active{opacity:1}:where(.bc-cm.bc30) .bc-team-intro__photo[data-variant="slides"] .bc-team-intro__slide img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 43%;object-position:50% 43%;display:block}:where(.bc-cm.bc30) .bc-team-intro__photo[data-variant="slides"] .bc-team-intro__slides-controls{display:flex;align-items:center;gap:6px;position:absolute;right:24px;bottom:24px;z-index:3;padding:4px 9px;background:#24242299;border-radius:var(--bc30-r-pil)}/* De letter van de knoppen staat vast (Arial, --bc30-fs-klein), zodat een thema-regel voor knoppen op
   WordPress het pauzeteken niet anders maakt; de preview gaf de browsermaat 13,33px. */:where(.bc-cm.bc30) .bc-team-intro__photo[data-variant="slides"] .bc-team-intro__slides-controls button{border:0;background:transparent;color:var(--bc30-op-donker-kop);width:28px;height:28px;padding:0;display:grid;place-items:center;cursor:pointer;font:400 var(--bc30-fs-klein)/normal Arial,sans-serif;letter-spacing:normal;text-transform:none;min-height:0;box-shadow:none}:where(.bc-cm.bc30) .bc-team-intro__photo[data-variant="slides"] .bc-team-intro__slides-controls [data-story-slide]:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45;transition:width var(--bc30-duur-snel) var(--bc30-ease),opacity var(--bc30-duur-snel) var(--bc30-ease)}:where(.bc-cm.bc30) .bc-team-intro__photo[data-variant="slides"] .bc-team-intro__slides-controls [aria-pressed=true][data-story-slide]:before{width:18px;border-radius:var(--bc30-r-pil);opacity:1}:where(.bc-cm.bc30) .bc-team-intro__photo[data-variant="slides"] .bc-team-intro__slides-controls button:focus-visible{outline:2px solid var(--bc30-oranje);outline-offset:1px;border-radius:var(--bc30-r-pil)}/* Tikvlak (R6c): onzichtbaar 34 breed en 44 hoog; 34 is de steek van de knopjes, breder viel over de buurknop. */.bc-cm.bc30 [data-story-slide]:after,.bc-cm.bc30 [data-story-pause]:before{content:"";position:absolute;inset:-8px -3px}/* Pauzeknop: vast label met aria-pressed; gepauzeerd toont hij het afspeelteken over het pauzeteken
   heen (CSS, geen tekst uit JS). */:where(.bc-cm.bc30) .bc-team-intro__photo[data-variant="slides"] .bc-team-intro__slides-controls [data-story-pause]{position:relative}:where(.bc-cm.bc30) .bc-team-intro__photo[data-variant="slides"] .bc-team-intro__slides-controls [data-story-pause][aria-pressed=true]{color:transparent}:where(.bc-cm.bc30) .bc-team-intro__photo[data-variant="slides"] .bc-team-intro__slides-controls [data-story-pause][aria-pressed=true]:after{content:'\25B7';position:absolute;inset:0;display:grid;place-items:center;color:var(--bc30-op-donker-kop)}@media(max-width:699px){
 :where(.bc-cm.bc30) .bc-team-intro__photo[data-variant="slides"] .bc-team-intro__slides-controls{right:18px;bottom:15px}
}/* === Knop: cream, zodat hij niet wegvalt op de oranje boog (Sara 9 en 17, besluit Bram 2026-09-21);
   hover oranje (knopregels). Preview: .bc-cm.bc30 .bc30-team :is(a.bc-btn,.source-action>a). === */.bc-cm.bc30 .bc-team-intro a.bc-btn{background:var(--bc30-creme);border:0;color:var(--bc30-donker);box-shadow:none}/* Letter van de knop zoals de preview op elke breedte (body[data-hero] .bc-cm.bc30 main .bc-btn; de
   2.0-knop wordt onder 768px 14px). */.bc-cm.bc30 .bc-team-intro .bc-btn{font-family:var(--bc30-font-tekst);font-size:var(--bc30-fs-knop);font-weight:800;line-height:1.2;letter-spacing:normal;text-align:center;justify-content:center}/* Een lange knoptekst ("Lees meer over onze duurzaamheidsstrategie →", over-ons-20) breekt op de telefoon
   over twee regels in plaats van uit de sectie te lopen (UX-sweep, 360 tot 400). *//* De knop mag de 12px rechtermarge van het verhaal gebruiken, zoals de preview de knop van 285px op 360
   net in die marge laat lopen (dan blijft hij op een regel): een blokknop op inhoudsbreedte met -12px
   rechts, zodat hij pas breekt als de tekst langer is dan tekstruimte plus marge. */@media(max-width:640px){
 .bc-cm.bc30 .bc-team-intro .bc-btn{white-space:normal;text-wrap:balance}
 .bc-cm.bc30 .bc-team-intro:not([data-variant="dark"]) .bc-team-intro__story>.bc-team-intro__btn{display:flex;width:-moz-fit-content;width:fit-content;max-width:none;margin-right:-12px}
}.bc-cm.bc30 .bc-team-intro a.bc-btn:hover{background:var(--bc30-oranje);color:var(--bc30-op-donker-kop)}/* === Beeldfocus (beeldFocus in de draft): welk deel van een staande foto in de brede uitsnede blijft. === */.bc-cm.bc30 .bc-team-intro__photo[data-focus="boven"] img{-o-object-position:50% 15%;object-position:50% 15%}.bc-cm.bc30 .bc-team-intro__photo[data-focus="onder"] img{-o-object-position:50% 85%;object-position:50% 85%}/* === Zonder foto (een story-panel zonder beelden): de kop staat los boven het verhaal. === */:where(.bc-cm.bc30) .bc-team-intro__inner>.bc-team-intro__heading{position:relative;left:auto;right:auto;bottom:auto;padding:0 40px}@media(max-width:1100px){:where(.bc-cm.bc30) .bc-team-intro__inner>.bc-team-intro__heading{padding:0 24px}}@media(max-width:640px){:where(.bc-cm.bc30) .bc-team-intro__inner>.bc-team-intro__heading{padding:0 12px 0 20px}}.bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__inner>.bc-team-intro__heading{padding:0 36px}@media(max-width:699px){.bc30:where(.bc-cm) .bc-team-intro[data-variant="dark"] .bc-team-intro__inner>.bc-team-intro__heading{padding:0}}/* === Inklappen op de telefoon (mobiel: inklappen; src/bc30/mobiel.js zet is-foldbaar): de eerste
   regel van het verhaal blijft, vier regels hoog en zacht weglopend, de rest komt met Lees verder.
   Zonder JS staat alles open. === */.bc-cm.bc30 .bc-team-intro__fold{display:none}@media(max-width:699px){
 .bc-cm.bc30 .bc-team-intro.is-foldbaar:not(.is-open) .bc-team-intro__copy>:not(:first-child,.bc-team-intro__fold){display:none}
 .bc-cm.bc30 .bc-team-intro.is-foldbaar:not(.is-open) .bc-team-intro__copy>:first-child{max-height:calc(4 * 1.65em);overflow:hidden;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
 .bc-cm.bc30 .bc-team-intro.is-foldbaar .bc-team-intro__fold{display:inline-flex;background:none;border:0;padding:0;margin:12px 0 0;min-height:44px;align-items:center;color:var(--bc30-oranje);font:700 var(--bc30-fs-knop)/1.4 var(--bc30-font-tekst);letter-spacing:normal;text-transform:none;cursor:pointer;box-shadow:none}
 .bc-cm.bc30 .bc-team-intro.is-foldbaar .bc-team-intro__fold>span:not([hidden]){display:inline-flex;align-items:center;gap:8px}
 .bc-cm.bc30 .bc-team-intro.is-foldbaar .bc-team-intro__fold>span:after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform var(--bc30-duur-snel) var(--bc30-ease)}
 .bc-cm.bc30 .bc-team-intro.is-open .bc-team-intro__fold>span:after{transform:rotate(-135deg)}
 .bc-cm.bc30 .bc-team-intro.is-foldbaar .bc-team-intro__fold:hover{color:var(--bc30-oranje-hover)}
}/* === Variant verhaal (alias story-panel; fase B batch 2, Bram 02-10 O58: lang verhaal op wit, de foto
   wisselt tijdens het scrollen, een slotquote met impact, op de telefoon de 3.0-vorm). Wit, in een witte
   band (bc30-banden.mjs); zonder band toch wit. Vanaf 700px: kop en verhaal in een leeskolom links, rechts
   een foto die meeplakt en per tussenkop overvloeit (src/bc30/team-story.js). Op de telefoon: de kop op
   de foto, fotowissel op tijd met stipjes, verhaal ingeklapt (mobiel.js). Daaronder, buiten het raster, het
   slotcitaat over de volle breedte. Geen sierboog (de band heeft er een). Alleen wat de lichte en de losse-kopregels
   hierboven niet al goed zetten (kop zonder foto: position, z-index; eyebrow-marge). === */.bc-cm.bc30 .bc-team-intro[data-variant=verhaal]{background:var(--bc30-grond);color:var(--bc30-tekst);padding:0 0 var(--bc30-sectie);border-radius:0}.bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__inner{max-width:var(--bc30-breed);display:grid;grid-template:"kop foto" auto "tekst foto" 1fr/minmax(0,var(--bc30-lees)) minmax(0,1fr);-moz-column-gap:var(--bc30-kolom);column-gap:var(--bc30-kolom);align-items:start}.bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__inner>.bc-team-intro__heading{grid-area:kop;padding:0;margin:0 0 24px}.bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__heading :is(h2,h3){color:var(--bc30-kop)}.bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__eyebrow{color:var(--bc30-oranje-tekst)}/* De foto plakt mee onder de vaste kopbalk; staand 4:5, nooit hoger dan het scherm. */.bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__photo{grid-area:foto;position:sticky;top:96px;width:100%;aspect-ratio:4/5;max-height:calc(100vh - 144px);overflow:hidden;background:var(--bc30-vlak);box-shadow:var(--bc30-schaduw-kaart)}.bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__photo:after,.bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__slides-controls{display:none}/* Rustige overvloei: de nieuwe foto komt op en zakt van 1,03 naar 1. */.bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__slide{transition:opacity var(--bc30-duur-beeld) var(--bc30-ease)}.bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__slide img{scale:1.03;transition:scale var(--bc30-duur-traag) var(--bc30-ease)}.bc-cm.bc30 [data-variant=verhaal] .is-active img{scale:1}/* Het verhaal: leesbare tekst op wit, de eerste alinea als inleiding, tussenkoppen met lucht erboven. */.bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__story{grid-area:tekst;display:block;margin:0;padding:0}.bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__copy{max-width:none}.bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__copy p{color:var(--bc30-tekst)}.bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__copy>p:first-child{font-size:var(--bc30-fs-lead);font-weight:400;color:var(--bc30-kop)}.bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__sub{color:var(--bc30-kop);margin-top:48px}.bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__sub+*{margin-top:12px}.bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__copy :is(strong,a:not(.bc-btn)){color:var(--bc30-oranje-tekst)}/* Slotcitaat: groot (de statementmaat, op de telefoon de sectiekop) in de serif van de koppen, het accent in
   oranje script zoals een 3.0-kop. */.bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__slot{max-width:var(--bc30-breed);margin:var(--bc30-sectie) auto 0;padding:0 var(--bc30-gutter);text-align:center}.bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__slot>p{max-width:20em;margin:auto;font:900 var(--bc30-fs-statement)/1.15 var(--bc30-font-kop);letter-spacing:var(--bc30-ls-kop);color:var(--bc30-kop);text-wrap:balance}.bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__slot .bc-script{font-size:var(--bc30-script);line-height:1}.bc-cm.bc30 .is-woorden .bc-team-intro__w{display:inline-block;opacity:0;translate:0 var(--bc30-in-tekst);transition:opacity var(--bc30-duur-in) var(--bc30-ease),translate var(--bc30-duur-in) var(--bc30-ease);transition-delay:calc(var(--i,0) * var(--bc30-duur-snel) * .3)}.bc-cm.bc30 .bc-team-intro__slot.is-in .bc-team-intro__w{opacity:1;translate:none}/* Kerncijfer en knop op wit (team-intro verhaal met ghost of link): donker cijfer en label, een dunne
   lijn, de oranje hoofdknop met lichte tekst (#fff9f0) in plaats van de crème knop van de donkere vormen. */.bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__cijfer{border-top-color:var(--bc30-lijn)}.bc-cm.bc30 [data-variant=verhaal] :is(.bc-team-intro__getal,.bc-team-intro__label){color:var(--bc30-kop)}.bc-cm.bc30 .bc-team-intro[data-variant=verhaal] a.bc-btn{background:var(--bc30-oranje);color:var(--bc30-vlak);box-shadow:var(--bc30-gloed)}.bc-cm.bc30 .bc-team-intro[data-variant=verhaal] a.bc-btn:hover{background:var(--bc30-oranje-hover);color:var(--bc30-vlak)}.bc-cm.bc30 .bc-team-intro[data-variant=verhaal] .bc-team-intro__story>.bc-team-intro__btn{margin:32px 0 0}/* Zonder foto: de kolom in het midden, zoals tekst zonder beeld (O27). */.bc-cm.bc30 [data-variant=verhaal][data-foto=geen] .bc-team-intro__inner{grid-template:"kop" "tekst"/minmax(0,var(--bc30-tekstkolom));justify-content:center}/* Tablet (700 tot 999) en smalle computer: de foto plakt mee en wisselt per verhaal zoals op de computer (keuze Bram
   2026-10-04: meeplakken, niet de telefoonvorm; gemeten op 700, 800 en 999: geen overlap met kop of tekst, de foto
   blijft binnen het verhaal en de band). De verhouding in plaats van de vaste leeskolom, zodat de foto niet te smal
   wordt. Het slotcitaat houdt hier de statementmaat (het token, op tablet 44); alleen de telefoon krijgt de sectiekop. */@media(min-width:700px) and (max-width:1199px){.bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__inner{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);-moz-column-gap:48px;column-gap:48px}}@media(max-width:699px){
 .bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__inner{grid-template:"kop" "foto" "tekst"/minmax(0,1fr)}
 .bc-cm.bc30 [data-variant=verhaal]:not([data-foto=geen]) .bc-team-intro__inner>.bc-team-intro__heading{grid-area:foto;align-self:end;margin:0 24px 24px}
 .bc-cm.bc30 [data-variant=verhaal]:has(.bc-team-intro__slides) .bc-team-intro__inner>.bc-team-intro__heading{margin-bottom:64px}
 .bc-cm.bc30 [data-variant=verhaal]:not([data-foto=geen]) :is(.bc-team-intro__heading :is(h2,h3),.bc-team-intro__eyebrow){color:var(--bc30-op-donker-kop)}
 .bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__photo{position:relative;top:auto;height:350px;aspect-ratio:auto;max-height:none;box-shadow:none}
 /* Het verloop onder de kop op de foto: dekkend genoeg voor een felle foto (review batch 7: "compensatie" in script
    op een blauwe lucht p10 2,6:1, de eyebrow 3,6:1). Over de hele foto, onderaan bijna zwart. */
 .bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__photo:after{display:block;inset:0;background:linear-gradient(0deg,color-mix(in srgb,var(--bc30-zwart) 90%,transparent),color-mix(in srgb,var(--bc30-zwart) 72%,transparent) 50%,transparent)}
 .bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__slides-controls{display:flex}
 .bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__story{margin-top:32px}
 .bc-cm.bc30 [data-variant=verhaal].is-foldbaar .bc-team-intro__fold{color:var(--bc30-oranje-tekst)}
 .bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__slot{margin-top:48px}
 .bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__slot>p{font-size:var(--bc30-fs-h2)}
}/* Zonder JS: alle foto's, vanaf 700px onder elkaar naast het verhaal, op de telefoon als veegstrook
   waarin de volgende foto uitsteekt. De tekstrij rekt op (1fr), zodat een hoge fotostapel de kop niet uit elkaar trekt. */@media(scripting:none) and (min-width:700px){
 .bc-cm.bc30 [data-variant=verhaal] [data-variant=slides]{position:relative;top:auto;aspect-ratio:auto;max-height:none;overflow:visible;background:none;box-shadow:none}
 .bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__slides{position:static;display:grid;gap:var(--bc30-gap)}
 .bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__slide{position:relative;opacity:1;aspect-ratio:4/5;border-radius:var(--bc30-r-kaart);overflow:hidden}
}@media(scripting:none) and (max-width:699px){
 .bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__slides{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
 .bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__slide{position:relative;flex:0 0 88%;opacity:1;scroll-snap-align:start}
 .bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__slides-controls{display:none}
}/* === Video onder het verhaal (rol Video, koffie): de box zelf staat in video.css. === */@media print{
 .bc-cm.bc30 .bc-team-intro__copy>:not(.bc-team-intro__cijfer,.bc-team-intro__fold){display:revert!important}
 .bc-cm.bc30 .bc-team-intro__copy>*{max-height:none!important;-webkit-mask-image:none!important;mask-image:none!important}
 .bc-cm.bc30 .bc-team-intro__fold{display:none!important}
 .bc-cm.bc30 .bc-team-intro{background:none;color:var(--bc30-donker);padding:24px 0;border-radius:0}
 .bc-cm.bc30 .bc-team-intro__photo:after,.bc-cm.bc30 .bc-team-intro__arc,.bc-cm.bc30 .bc-team-intro__slides-controls{display:none}
 .bc-cm.bc30 .bc-team-intro__photo{aspect-ratio:auto;height:auto!important}
 .bc-cm.bc30 .bc-team-intro__heading{position:static;margin-top:16px}
 .bc-cm.bc30 .bc-team-intro__photo[data-variant="slides"] .bc-team-intro__slides{position:static}
 .bc-cm.bc30 .bc-team-intro__photo[data-variant="slides"] .bc-team-intro__slide:not(.is-active){display:none}
 .bc-cm.bc30 .bc-team-intro__photo[data-variant="slides"] .bc-team-intro__slide{position:static;opacity:1}
 .bc30:where(.bc-cm) .bc-team-intro :is(h2,h3,p,li,.bc-team-intro__eyebrow,.bc-team-intro__label){color:var(--bc30-donker)!important}
 .bc-cm.bc30 .bc-team-intro__cijfer{border-top-color:#0003}
 /* Verhaal: niets plakt mee, alle foto's onder elkaar naast het verhaal, het citaat heel. */
 .bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__photo{position:relative;top:auto;aspect-ratio:auto;max-height:none;box-shadow:none}
 .bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__slides{display:grid;gap:var(--bc30-gap)}
 .bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__photo[data-variant=slides] .bc-team-intro__slide{display:block;-moz-column-break-inside:avoid;break-inside:avoid}
 .bc-cm.bc30 [data-variant=verhaal] .bc-team-intro__slide img{scale:none}
 .bc-cm.bc30 .bc-team-intro__w{opacity:1!important;translate:none!important}
}/* Knop plus tweede actie (link2, Tim 20-10): de tweede als donkere pil met een lichte rand, zodat hij ook leesbaar is
   waar de oranje sierboog achter de knoppen loopt (proef 21-10: een oranje tekstlink viel weg op de boog). */:where(.bc-cm.bc30) .bc-team-intro__story>.bc-team-intro__knoppen{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-end;gap:12px}.bc-cm.bc30 .bc-team-intro__link2{display:inline-flex;justify-content:center;padding:12px 22px;border-radius:var(--bc30-r-pil);background:var(--bc30-donker);box-shadow:inset 0 0 0 1.5px var(--bc30-op-donker-tekst);color:var(--bc30-op-donker-kop);font:800 var(--bc30-fs-knop)/1.2 var(--bc30-font-tekst);text-decoration:none}.bc-cm.bc30 .bc-team-intro__link2:hover{background:var(--bc30-oranje);box-shadow:none;color:var(--bc30-op-donker-kop)}@media(max-width:640px){:where(.bc-cm.bc30) .bc-team-intro__story>.bc-team-intro__knoppen{margin-top:24px;align-items:flex-start}}/* BC 3.0: Video (basis video; alias video-scene), run 6, lane team.
   Alles onder de versiemarker .bc-cm.bc30 (zie fundament.css). Bron: de 3.0-preview
   (bc-content-machine/scripts/design-compare/bc30/css/components/team-story.css, .bc30-team__video, en
   de poster in components/video.mjs), met de hand geport.
   De box (div.bc-video__box) heeft de maat van de preview: max 870, radius 22 (15 onder 700), 16:9,
   grond #141412; onder het teamverhaal 45px eronder (30 onder 700) en 32px (24) van de rand. De preview
   tekent poster en afspeelknop in een srcdoc-iframe; hier staan ze in de pagina (facade, zie
   blocks/video/render.mjs) met dezelfde vorm: beeld op 80% helderheid, oranje cirkel van 72px met een
   creme driehoek, schaduw 0 6px 30px. Hover: donkerder oranje (knopregels, de preview had teal). *//* === De box (zelfde specificiteit als de preview, .bc30-team__video) === */:where(.bc-cm.bc30) .bc-video__box{position:relative;z-index:1;margin:45px auto 0;width:calc(100% - 64px);max-width:870px;border-radius:var(--bc30-r-kaart);overflow:hidden;aspect-ratio:16/9;background:#141412}:where(.bc-cm.bc30) .bc-video__box iframe{border:0;width:100%;height:100%;display:block;overflow:hidden}@media(max-width:699px){:where(.bc-cm.bc30) .bc-video__box{margin-top:30px;width:calc(100% - 48px)}}/* === Facade: poster en afspeelknop (de hele box is de knop) === */.bc-cm.bc30 .bc-video__still{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;-o-object-fit:cover;object-fit:cover;filter:brightness(.8)}.bc-cm.bc30 .bc-video__start{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer}.bc-cm.bc30 .bc-video__icon{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--bc30-oranje);box-shadow:var(--bc30-gloed);transition:background-color var(--bc30-duur-snel) var(--bc30-ease)}.bc-cm.bc30 .bc-video__icon:after{content:'';margin-left:5px;border-left:19px solid var(--bc-light);border-block:12px solid transparent}.bc-cm.bc30 .bc-video__start:hover .bc-video__icon{background:var(--bc30-oranje-hover)}.bc-cm.bc30 .bc-video__start:focus-visible{outline:4px solid var(--bc30-oranje);outline-offset:-5px}.bc-cm.bc30 .bc-video__box .bc-video__iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.bc-cm.bc30 .bc-video__box .bc-video__media{position:absolute;inset:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;background:#141412}/* Zwarte balken in de still (batch 7, ontwerpreviewer): src/bc30/video.js meet ze in een YouTube-still en zet
   --bc-video-balk (deel van de hoogte per balk); de still schaalt dan zo ver dat de balken buiten de box vallen. Zonder
   JS blijven de balken staan, verder verandert er niets. */.bc-cm.bc30 .bc-video__still[data-balk]{transform:scale(calc(1 / (1 - 2 * var(--bc-video-balk))))}/* === Los blok (section.bc-video): in een band (render-blocks.mjs zet hem standaard in een witte band),
   gecentreerd, onderruimte zoals tekst met beeld in een band. De 2.0-wortel (max 880, marge 56, opacity
   0 tot bc-visible, overgang) en die van de alias video-scene (verloop, ronding, sticky) gaan uit. === */.bc-cm.bc30 .bc-video{position:relative;max-width:none;height:auto;min-height:0;margin:0;padding:0 var(--bc30-gutter) 80px;background:transparent;border-radius:0;overflow:visible;opacity:1;transform:none;transition:none;color:var(--bc-text)}.bc-cm.bc30 .bc-video:before,.bc-cm.bc30 .bc-video:after{content:none}.bc-cm.bc30 .bc-video>.bc-video__box{margin:0 auto;width:100%;box-shadow:var(--bc30-schaduw)}/* Inleiding (lead, de alias video-scene) boven en bijschrift (title) onder de video: gecentreerd op de
   breedte van de video. */.bc-cm.bc30 .bc-video__lead{max-width:870px;margin:0 auto 26px;text-align:center;font:400 var(--bc30-fs-lead)/1.6 var(--bc30-font-tekst);color:inherit;text-wrap:balance}.bc-cm.bc30 .bc-video__caption{max-width:870px;margin:16px auto 0;text-align:center;font:600 var(--bc30-fs-klein)/1.5 var(--bc30-font-tekst);font-style:normal;color:var(--bc-muted)}/* In een witte of lichte band: donkerder grijs voor contrast AA (review run 6 team, bevinding 1). */.bc-cm.bc30 .bc-band .bc-video__caption{color:#6b665f}@media(max-width:640px){
 .bc-cm.bc30 .bc-video{padding-bottom:55px}
 .bc-cm.bc30 .bc-video__lead{font-size:var(--bc30-fs-tekst);margin-bottom:20px}
}/* Zonder band (direct op de donkere 3.0-grond, zoals de alias video-scene die als eigen grond telt):
   eigen ruimte boven, lichte letter. */.bc-cm.bc30>.bc-video{padding-top:80px;color:var(--bc30-creme)}.bc-cm.bc30>.bc-video .bc-video__caption{color:var(--bc30-creme);opacity:.75}.bc-cm.bc30>.bc-video>.bc-video__box{box-shadow:none}@media(max-width:640px){.bc-cm.bc30>.bc-video{padding-top:55px}}@media print{
 .bc-cm.bc30 .bc-video__start{display:none}
 .bc-cm.bc30 .bc-video__still{filter:none}
}/* === Videoscène (data.scene, batch 6, lane b6home; bron 8138, de 2.0-scène in 3.0-stijl): donker afgerond vlak met
   een warme gloed, de zin in crème boven het grote kader. Tot 960 px zonder beweging drie schuine fotootjes erboven.
   Met beweging zet bc-scene.js is-scene op de sectie: dan is hij hoger en plakt het podium mee terwijl de foto's van de
   fotoreeks naar het kader vliegen (op de computer 250vh, tot 960 px 2,25 keer het scherm). Zonder JS, bij minder
   beweging en bij afdrukken: de eindstand. === */.bc-cm.bc30 .bc-video[data-scene]{padding:0;color:var(--bc30-op-donker-kop);background:radial-gradient(54% 46% at 74% 16%,rgba(238,116,55,.15),transparent 70%),var(--bc30-donker);border-radius:var(--bc30-r-band);overflow:clip}.bc-cm.bc30 .bc-video__podium{position:relative;padding:88px 0 96px}.bc-cm.bc30 .bc-video[data-scene] .bc-video__lead{position:relative;max-width:600px;margin:0 auto 32px;font:700 var(--bc30-fs-lead)/1.5 var(--bc30-font-tekst);color:var(--bc30-op-donker-kop)}.bc-cm.bc30 .bc-video[data-scene] .bc-video__box{width:min(1000px,82vw);max-width:none;margin:0 auto;box-shadow:var(--bc30-schaduw);z-index:2}.bc-cm.bc30 .bc-video[data-scene] .bc-video__still{filter:none}.bc-cm.bc30 .bc-video[data-scene] .bc-video__start{background:linear-gradient(to top,rgba(14,13,12,.35),transparent 55%)}.bc-cm.bc30 .bc-video[data-scene] .bc-video__icon{width:88px;height:88px}.bc-cm.bc30 .bc-video__fotos{display:none}/* De scènestand (is-scene) alleen op het scherm: afdrukken toont altijd de eindstand (review batch 6, L3). */@media screen and (min-width:961px){
 .bc-cm.bc30 .bc-video[data-scene].is-scene{height:250vh}
 .bc-cm.bc30 .is-scene .bc-video__podium{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:64px 0}
 .bc-cm.bc30 .is-scene .bc-video__lead{opacity:0}
 .bc-cm.bc30 .is-scene .bc-video__box{opacity:.25;transform:scale(.86)}
}@media(max-width:960px){
 .bc-cm.bc30 .bc-video__podium{padding:64px 0 76px}
 .bc-cm.bc30 .bc-video[data-scene] .bc-video__icon{width:64px;height:64px}
 .bc-cm.bc30 .bc-video__fotos{display:flex;justify-content:center;gap:12px;margin:0 auto 24px}
 .bc-cm.bc30 .bc-video__fotos img{width:86px;aspect-ratio:3/4;-o-object-fit:cover;object-fit:cover;border-radius:calc(var(--bc30-r-kaart) / 2);box-shadow:var(--bc30-schaduw)}
 .bc-cm.bc30 .bc-video__fotos img:nth-child(1){transform:rotate(-7deg) translateY(8px)}
 .bc-cm.bc30 .bc-video__fotos img:nth-child(2){position:relative;z-index:2;transform:rotate(3deg) translateY(-4px)}
 .bc-cm.bc30 .bc-video__fotos img:nth-child(3){transform:rotate(8deg) translateY(10px)}
}@media screen and (max-width:960px){
 .bc-cm.bc30 .bc-video[data-scene].is-scene{height:calc(var(--bc-podium,100vh) * 2.25)}
 .bc-cm.bc30 .is-scene .bc-video__podium{position:sticky;top:0;height:var(--bc-podium,100vh);display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:24px 0}
 .bc-cm.bc30 .is-scene .bc-video__fotos{display:none}
 .bc-cm.bc30 .is-scene .bc-video__lead{max-width:330px;margin-bottom:24px}
 .bc-cm.bc30 .is-scene .bc-video__box{width:calc(100% - 40px)}
}@media(max-width:640px){
 .bc-cm.bc30 .bc-video__podium{padding:44px 0 56px}
 .bc-cm.bc30 .bc-video[data-scene] .bc-video__lead{font-size:var(--bc30-fs-tekst);padding:0 24px}
 .bc-cm.bc30 .bc-video[data-scene] .bc-video__box{width:calc(100% - 40px)}
}/* De vliegende kopieën van de fotoreeks (bc-scene.js) liggen vast boven de pagina, onder de menubalk. */.bc-cm.bc30 .bc-scene-vlucht{position:fixed;left:0;top:0;z-index:60;margin:0;pointer-events:none;will-change:transform,opacity}/* Print midden in de scène: geen vliegende kopieën, alle kaarten van de fotoreeks, kader en zin zonder de inline stand
   van bc-scene.js. */@media print{.bc-cm.bc30 .bc-video[data-scene]{height:auto!important}.bc-cm.bc30 .bc-video__podium{position:relative!important;height:auto!important}.bc-cm.bc30 .bc-scene-vlucht{display:none}.bc-cm.bc30 .bc-impression__card{visibility:visible!important}.bc-cm.bc30 .bc-video[data-scene] .bc-video__box{opacity:1!important;transform:none!important}.bc-cm.bc30 .bc-video[data-scene] .bc-video__lead{opacity:1!important}}/* Telefoon (onder 700 px): geen scène en geen schuine fotootjes, alleen de zin en het stilstaande beeld met afspeelknop
   (Tim 20-10, keuze Bram 21-10; de computer houdt de scène). */@media(max-width:699px){
 .bc-cm.bc30 .bc-video[data-scene] .bc-video__fotos{display:none}
 .bc-cm.bc30 .bc-video[data-scene] .bc-video__podium{padding:40px 0 44px}
 .bc-cm.bc30 .bc-video[data-scene] .bc-video__lead{margin-bottom:20px}
}/* BC 3.0: losse blokken in 3.0-stijl bij de contactrol (sticky-cta, contact-section), run 6.
   Alles onder de versiemarker .bc-cm.bc30 (zie fundament.css). De 2.0-CSS
   (src/components/sticky-cta.css, contact-section.css) blijft de onderlaag. *//* === sticky-cta: de meescrollende offerteknop, naar de schets "1 Vaste offerteknop" uit het mobiele
   voorstel (bc-content-machine/fixtures/design/bc30/toggles/mobiel-*.json, besluit Bram 2026-09-30).
   Alleen op de telefoon (tot 699px): een donkere balk onderin met de oranje offerteknop (usp als tweede
   regel) en de ronde groene belknop, veilige ruimte onderaan op iOS. src/bc30/apart-contact.js zet
   .is-gestuurd en schuift de balk met .is-in in beeld na de hero en weer weg bij het contactblok, het
   offerteformulier en de footer; zonder JS staat hij gewoon onderin. Verborgen = ook niet bereikbaar
   met het toetsenbord (visibility na de animatie).
   Beginstand (review run 6 contact, bevinding 8): met JS aan maar nog niet gedraaid (WordPress laadt de
   bundel met defer) staat een balk die pas na de hero hoort al verborgen, zodat hij niet seconden over
   de knop van de hero staat. Komt de JS niet (laadfout), dan schuift hij na 8 s alsnog in beeld.
   Een open actiekaartje (de strook onderin van de actiebalk, z-index 9990) dekt de balk af: zolang dat
   kaartje open staat, is de balk weg; sluit de bezoeker het kaartje, dan komt hij terug (bevinding 10). === */.bc-cm.bc30 .bc-sticky-cta{display:none}@media(max-width:699px){
 .bc-cm.bc30 .bc-sticky-cta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;max-width:none;margin:0;border:0;border-top:1px solid var(--bc30-lijn-donker);border-radius:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(36,36,34,.94);backdrop-filter:blur(10px);box-shadow:none;transform:none;visibility:visible;transition-property:transform,visibility;transition-duration:.35s,0s;transition-timing-function:cubic-bezier(.2,.8,.2,1);transition-delay:0s,0s}
 /* Uitgeschreven (geen transition-shorthand): de minifier maakte van 'visibility 0s .35s' een duur van .35s zonder vertraging. */
 .bc-cm.bc30 .bc-sticky-cta.is-gestuurd:not(.is-in){transform:translateY(110%);visibility:hidden;transition-delay:0s,.35s}
 .bc-cm.bc30 .bc-sticky-cta__balk{display:flex;gap:10px;align-items:center}
 .bc-cm.bc30 .bc-sticky-cta__knop{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:54px;padding:8px 18px;border-radius:var(--bc30-r-pil);background:var(--bc30-oranje);color:var(--bc-white);font:800 var(--bc30-fs-tekst)/1.1 var(--bc30-font-tekst);text-align:center;text-decoration:none;box-shadow:var(--bc30-gloed);transition:background .25s}
 .bc-cm.bc30 .bc-sticky-cta__knop small{font:600 var(--bc30-fs-eyebrow)/1.3 var(--bc30-font-tekst);opacity:.92;margin-top:3px}
 .bc-cm.bc30 .bc-sticky-cta__knop:hover{background:var(--bc30-oranje-hover);color:var(--bc-white)}
 .bc-cm.bc30 .bc-sticky-cta__bel{flex:0 0 54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--bc30-groen);color:var(--bc-white);transition:background .25s}
 .bc-cm.bc30 .bc-sticky-cta__bel:hover{background:var(--bc30-oranje)}
 .bc-cm.bc30 .bc-sticky-cta__bel svg{width:22px;height:22px}
 .bc-cm.bc30 .bc-sticky-cta :is(.bc-sticky-cta__knop,.bc-sticky-cta__bel):focus-visible{outline:3px solid var(--bc-white);outline-offset:3px}
 body:has(.bc-actiekaart:not([hidden])) .bc-cm.bc30 .bc-sticky-cta{transform:translateY(110%);visibility:hidden;transition-delay:0s,.35s}
}/* Longhands, geen shorthand: de minifier haalde eerder een tijd uit een transition-shorthand weg. */@media(max-width:699px) and (scripting:enabled){
 .bc-cm.bc30 .bc-sticky-cta[data-show-after-viewport="true"]:not(.is-gestuurd){animation-name:bc-sticky-terugval;animation-duration:.35s;animation-delay:8s;animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
}@keyframes bc-sticky-terugval{from{transform:translateY(110%);visibility:hidden}to{transform:none;visibility:visible}}@media print{.bc-cm.bc30 .bc-sticky-cta{display:none!important}}/* === contact-section: de contactpagina in 3.0-stijl. Geen eigen grond meer (de band geeft hem), kop
   zoals de kop van tekst met beeld, kaarten radius 24 met de schaduw van de 3.0-kaarten, knoppen volgens
   de knopregels: verzenden oranje, bellen groen, mailen omlijnd, hover oranje (nooit teal of groen). === */.bc-cm.bc30 .bc-contact-section{background:transparent;padding:0 0 80px;scroll-margin-top:96px}.bc-cm.bc30 .bc-contact-section::before{display:none}.bc-cm.bc30 .bc-contact-section__wrap{max-width:1300px;padding-left:32px;padding-right:32px}.bc-cm.bc30 .bc-contact-section .bc-contact-section__h{font:900 var(--bc30-fs-h2)/1.18 var(--bc30-font-kop);letter-spacing:-.6px;color:inherit;margin:0 0 20px}.bc-cm.bc30 .bc-contact-section .bc-contact-section__intro{font:400 var(--bc30-fs-tekst)/1.7 var(--bc30-font-tekst);color:inherit;margin:0 0 14px}.bc-cm.bc30 .bc-contact-section__card{background:var(--bc30-vlak);border-radius:var(--bc30-r-kaart);padding:clamp(28px,3.4vw,48px);box-shadow:none}.bc-cm.bc30 .bc-contact-section__field :is(input,textarea):focus{outline:0;border-color:var(--bc30-oranje);box-shadow:0 0 0 3px #ee743733}.bc-cm.bc30 .bc-contact-section__send{display:inline-flex;align-items:center;justify-content:center;background:var(--bc30-oranje);color:var(--bc-white);border:0;border-radius:var(--bc30-r-pil);padding:14px 24px;min-height:46px;font:800 var(--bc30-fs-knop)/1.25 var(--bc30-font-tekst);box-shadow:var(--bc30-gloed);transform:none}.bc-cm.bc30 .bc-contact-section__send:hover{background:var(--bc30-oranje-hover);transform:none}.bc-cm.bc30 .bc-contact-section__formulier{margin-top:8px}/* Pluginformulier in de kaart: off-white zonder schaduw (Bram ronde 3, 04-10). Interne klassen van de
   bc-offerte-plugin, afgestemd met die sessie (valkuil in de plugin-README, commit d105541): .form-panel,
   .progress-bar en .sticky-final. De velden blijven wit; de plakkende verstuurbalk op de telefoon houdt zijn
   schaduw omdat hij over de velden zweeft. */.bc-cm.bc30 .bc-contact-section__card .bc-offerte :is(.form-panel,.progress-bar){background:transparent;box-shadow:none}.bc-cm.bc30 .bc-contact-section__card .bc-offerte .form-nav.sticky-final{background:var(--bc30-vlak)}.bc-cm.bc30 .bc-contact-section__card .bc-offerte.bc-offerte-embed{padding-bottom:0}/* Batch 7 (ontwerpreviewer): kleine grijze tekst in de kaart AA, en velden in de vormtaal van 3.0.
   - De regel '"*" geeft vereiste velden aan' van het formulier zonder plugin (data.requiredNote) was #8f887c op het
     off-white, 3,35:1; nu --bc30-tekst-zacht, 5,25:1. In het pluginformulier (type contact) is de privacyregel
     (.bc-privacy, #999) de tegenhanger en het sterretje bij een verplicht veld (label .required, #ee7437) kleine oranje
     tekst: allebei donkerder (interne klassen van de bc-offerte-plugin, zoals de regels hierboven).
   - Velden: de kaartradius van 3.0 (24, telefoon 18) in plaats van 12, in het formulier zonder plugin en in het
     pluginformulier in deze kaart, zodat beide vormen gelijk zijn en binnen het register blijven (kaart 24, pil 999). */.bc-cm.bc30 .bc-contact-section__req{color:var(--bc30-tekst-zacht)}.bc-cm.bc30 .bc-contact-section__card .bc-offerte .bc-privacy{color:var(--bc30-tekst-zacht)}.bc-cm.bc30 .bc-contact-section__card .bc-offerte .form-group label .required{color:var(--bc30-oranje-tekst)}.bc-cm.bc30 .bc-contact-section__field :is(input,textarea),.bc-cm.bc30 .bc-contact-section__card .bc-offerte .form-group :is(input,select,textarea){border-radius:var(--bc30-r-kaart)}.bc-cm.bc30 .bc-contact-section__imgs img{border-radius:var(--bc30-r-kaart);box-shadow:var(--bc30-schaduw)}.bc-cm.bc30 .bc-contact-section__media-img{border-radius:var(--bc30-r-kaart)}.bc-cm.bc30 .bc-contact-section__address{background:var(--bc30-vlak);border-radius:var(--bc30-r-kaart);box-shadow:none}.bc-cm.bc30 .bc-contact-section .bc-contact-section__address h3{font:900 var(--bc30-fs-kaart)/1.25 var(--bc30-font-kop);letter-spacing:-.3px}.bc-cm.bc30 .bc-contact-section__channels{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.bc-cm.bc30 .bc-contact-section__lbl{flex:1 0 100%;margin:0}.bc-cm.bc30 .bc-contact-section__tel{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:13px 20px;border-radius:var(--bc30-r-pil);background:var(--bc30-groen);color:var(--bc-white);font:800 var(--bc30-fs-knop)/1.2 var(--bc30-font-tekst);letter-spacing:0;text-decoration:none}.bc-cm.bc30 .bc-contact-section__tel:hover{background:var(--bc30-oranje);color:var(--bc-white)}.bc-cm.bc30 .bc-contact-section__mail{display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin:0;padding:13px 20px;border:0;border-radius:var(--bc30-r-pil);background:transparent;color:var(--bc30-oranje-tekst);box-shadow:inset 0 0 0 2px var(--bc30-oranje);font:800 var(--bc30-fs-knop)/1.2 var(--bc30-font-tekst);text-decoration:none;overflow-wrap:anywhere}.bc-cm.bc30 .bc-contact-section__mail:hover{background:var(--bc30-oranje);color:var(--bc30-creme);border-color:transparent}@media(max-width:699px){
 .bc-cm.bc30 .bc-contact-section{padding-bottom:56px}
 .bc-cm.bc30 .bc-contact-section__wrap{padding-left:24px;padding-right:24px}
 .bc-cm.bc30 .bc-contact-section .bc-contact-section__h{line-height:1.2}
}@media print{.bc-cm.bc30 .bc-contact-section__card{box-shadow:none}}/* === contact-section met Waar we zitten (data.waar, batch 5b, contactpagina richting B): links het formulier als
   off-white vlak, rechts de foto van het pand, het adres, de route en de vacatures, onderaan de socials op één
   regel. Met het pluginformulier (offerteFormId) geen eigen kop in de kaart: die brengt de plugin mee. Tablet: één
   kolom, het adres met de foto ernaast; telefoon: alles onder elkaar. === */.bc-cm.bc30 .bc-contact-section[data-indeling="waar"] .bc-contact-section__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--bc30-kolom)}.bc-cm.bc30 .bc-contact-section__waar-foto{margin:0 0 24px;aspect-ratio:4/3;border-radius:var(--bc30-r-kaart);overflow:hidden;box-shadow:var(--bc30-schaduw)}.bc-cm.bc30 .bc-contact-section__waar-foto img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}/* Fotowissel (waar.images, v0.22.0, Bram 16-10): de foto's liggen op elkaar en wisselen rustig om de beurt
   (apart-contact.js); zonder script staat de eerste er gewoon. Pauzeknop rechtsonder, zoals de teamrij. */.bc-cm.bc30 .bc-contact-section__waar-foto[data-bc-fotowissel]{position:relative}.bc-cm.bc30 .bc-contact-section__waar-foto[data-bc-fotowissel] img{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--bc30-ease)}.bc-cm.bc30 .bc-contact-section__waar-foto[data-bc-fotowissel] img.is-actief{opacity:1}.bc-cm.bc30 .bc-contact-section__pauze{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--bc30-lijn);border-radius:50%;background:var(--bc30-grond);color:var(--bc30-tekst-zacht);cursor:pointer;transition:color var(--bc30-duur-snel) var(--bc30-ease),border-color var(--bc30-duur-snel) var(--bc30-ease)}.bc-cm.bc30 .bc-contact-section__pauze[hidden]{display:none}.bc-cm.bc30 .bc-contact-section__pauze:hover{color:var(--bc30-oranje-tekst);border-color:var(--bc30-oranje)}.bc-cm.bc30 .bc-contact-section__pauze svg{width:12px;height:12px;fill:currentColor}.bc-cm.bc30 .bc-contact-section__ico-speel,.bc-cm.bc30 .bc-contact-section__pauze[aria-pressed="true"] .bc-contact-section__ico-pauze{display:none}.bc-cm.bc30 .bc-contact-section__pauze[aria-pressed="true"] .bc-contact-section__ico-speel{display:block}.bc-cm.bc30 .bc-contact-section__eyebrow{font:800 var(--bc30-fs-eyebrow)/1.4 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);text-transform:uppercase;color:var(--bc30-oranje-tekst);margin:0 0 8px}.bc-cm.bc30 .bc-contact-section .bc-contact-section__waar-titel{font:900 var(--bc30-fs-kaart)/var(--bc30-lh-kop) var(--bc30-font-kop);letter-spacing:var(--bc30-ls-kop);color:var(--bc30-kop);margin:0}.bc-cm.bc30 .bc-contact-section__waar address{margin:12px 0 0;font:400 var(--bc30-fs-tekst)/1.7 var(--bc30-font-tekst);font-style:normal;color:var(--bc30-tekst)}.bc-cm.bc30 .bc-contact-section__waar .bc-contact-section__note{display:block;margin:4px 0 0;font-size:var(--bc30-fs-kaart-foto);line-height:1.2;color:var(--bc30-oranje);transform:none}.bc-cm.bc30 :is(.bc-contact-section__route,.bc-contact-section__regels a){display:inline-block;padding:4px 0;font:800 var(--bc30-fs-kaarttekst)/1.4 var(--bc30-font-tekst);color:var(--bc30-oranje-tekst);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}.bc-cm.bc30 :is(.bc-contact-section__route,.bc-contact-section__regels a):hover{color:var(--bc30-oranje-hover)}.bc-cm.bc30 .bc-contact-section__regels{margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--bc30-lijn);list-style:none;font:400 var(--bc30-fs-kaarttekst)/1.6 var(--bc30-font-tekst);color:var(--bc30-tekst)}.bc-cm.bc30 .bc-contact-section__regels li{margin:0;padding:0;list-style:none}.bc-cm.bc30 .bc-contact-section__regels li:before{display:none}.bc-cm.bc30 .bc-contact-section__socrij{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}.bc-cm.bc30 .bc-contact-section__socrij-kop{font:900 var(--bc30-fs-kaart)/1.2 var(--bc30-font-kop);letter-spacing:var(--bc30-ls-kop);color:var(--bc30-kop);margin:0 auto 0 0}.bc-cm.bc30 .bc-contact-section__socrij-kop .bc-script{font-size:var(--bc30-script)}/* Met een zin bij de socials (socialIntro, v0.22.0): kop en zin samen links, de iconen rechts. */.bc-cm.bc30 .bc-contact-section__socrij-tekst{display:grid;gap:6px;flex:1 1 220px;min-width:0;margin:0 auto 0 0}.bc-cm.bc30 .bc-contact-section__socrij-tekst .bc-contact-section__socrij-kop{margin:0}.bc-cm.bc30 .bc-contact-section__socrij-intro{margin:0;font:400 var(--bc30-fs-kaarttekst)/1.6 var(--bc30-font-tekst);color:var(--bc30-tekst)}.bc-cm.bc30 .bc-contact-section__socrij .bc-contact-section__soc{margin:0;gap:12px}.bc-cm.bc30 .bc-contact-section__socrij .bc-contact-section__soc a{width:44px;height:44px}.bc-cm.bc30 .bc-contact-section__socrij .bc-contact-section__soc a svg{width:18px;height:18px}/* Hover van de social-iconen op de contactpagina (batch 6; Bram koos 04-10 stand 2 van de mockup): het rondje blijft
   donker, het icoon kleurt oranje (5,6:1 op donker) en komt een tikje omhoog. De footer is chrome en blijft zoals de home. */.bc-cm.bc30 .bc-contact-section__soc a{color:var(--bc30-grond);transition:color var(--bc30-duur-snel) var(--bc30-ease),transform var(--bc30-duur-snel) var(--bc30-ease)}.bc-cm.bc30 .bc-contact-section__soc a svg{fill:currentColor}.bc-cm.bc30 .bc-contact-section__soc a:hover{background:var(--bc30-donker);color:var(--bc30-oranje);transform:translateY(-2px)}/* Het contactformulier van de plugin is zelf een kaart (wit, eigen schaduw, eigen kop): geen off-white vlak eromheen,
   anders staat er een kaart in een kaart. */.bc-cm.bc30 .bc-contact-section__card[data-formulier="offerte"]{background:transparent;padding:0}.bc-cm.bc30 .bc-contact-section__card[data-formulier="offerte"] .bc-contact-section__formulier{margin:0}@media(max-width:999px){
 .bc-cm.bc30 .bc-contact-section[data-indeling="waar"] .bc-contact-section__grid{grid-template-columns:minmax(0,1fr);gap:48px}
 .bc-cm.bc30 .bc-contact-section__waar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);-moz-column-gap:32px;column-gap:32px;align-content:start}
 .bc-cm.bc30 .bc-contact-section__waar>*{grid-column:2}
 .bc-cm.bc30 .bc-contact-section__waar>.bc-contact-section__waar-foto{grid-column:1;grid-row:1/span 8;margin:0}
}@media(max-width:699px){
 .bc-cm.bc30 .bc-contact-section__waar{display:block}
 .bc-cm.bc30 .bc-contact-section__waar>.bc-contact-section__waar-foto{margin:0 0 24px}
 .bc-cm.bc30 .bc-contact-section__socrij-kop{flex-basis:100%}
 .bc-cm.bc30 .bc-contact-section__socrij-tekst{flex-basis:100%}
}/* BC 3.0: losse blokken in 3.0-stijl bij de teamrol en de blog (team-grid, callout, author-byline,
   flipbook-rand), run 6, lane team. Alles onder de versiemarker .bc-cm.bc30 (zie fundament.css); de
   2.0-CSS (src/components/team-grid.css, callout.css, author-byline.css, flipbook.css) blijft de
   onderlaag. Er is geen voorbeeld in de 3.0-preview: ontworpen in de 3.0-taal (serifkop 900 met
   scriptaccent, eyebrow 12px met .22em, kaarten radius 24 met zachte schaduw, crème als accentvlak,
   oranje links en knoppen met donker oranje op hover, nooit teal), zoals tekst met beeld en de kaarten
   in een witte band staan. De keuzes en schermafdrukken staan in het eindrapport van de lane. *//* === team-grid: het teamoverzicht (over-ons). In een band: de band geeft de grond en de ruimte boven;
   onder 80 (55 op de telefoon), zoals tekst met beeld. Kaarten in kleur (geen grijs tot hover: op een
   telefoon bestaat geen hover), naam in de serif, rol klein en ingetogen, "Bekijk profiel" altijd
   zichtbaar. Kolommen 5, 3 onder 1000px en 2 onder 700px. === */.bc-cm.bc30 .bc-team-grid{background:transparent;padding:0 0 80px;scroll-margin-top:90px}.bc-cm.bc30 .bc-team-grid__inner{max-width:var(--bc30-breed);padding:0 var(--bc30-gutter)}/* zelfde container als de rest van de pagina (review batch 7: raster begon op 52 tegen 102) */.bc-cm.bc30 .bc-team-grid__eyebrow{font:700 var(--bc30-fs-eyebrow)/1.3 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);text-transform:uppercase;color:var(--bc30-oranje-tekst);margin:0 0 18px}.bc-cm.bc30 .bc-team-grid__title{font:900 var(--bc30-fs-h2)/1.18 var(--bc30-font-kop);letter-spacing:-.6px;color:var(--bc30-kop);max-width:820px;margin:0}.bc-cm.bc30 .bc-team-grid__title .bc-script{display:inline;transform:none}.bc-cm.bc30 .bc-team-grid__intro{font:400 var(--bc30-fs-lead)/1.65 var(--bc30-font-tekst);color:var(--bc30-tekst);max-width:640px;margin:18px 0 0}.bc-cm.bc30 .bc-team-grid__grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;margin-top:44px}.bc-cm.bc30 .bc-team-grid__card{background:var(--bc30-vlak);border-radius:var(--bc30-r-kaart);box-shadow:none;transition:box-shadow var(--bc30-duur) var(--bc30-ease);transition-delay:0s;transform:none}.bc-cm.bc30 a.bc-team-grid__card:hover,.bc-cm.bc30 a.bc-team-grid__card:focus-visible{transform:none;box-shadow:var(--bc30-schaduw)}.bc-cm.bc30 a.bc-team-grid__card:focus-visible{outline:3px solid var(--bc30-oranje);outline-offset:3px}.bc-cm.bc30 .bc-team-grid__ph{aspect-ratio:1/1.1;background:var(--bc30-creme)}.bc-cm.bc30 .bc-team-grid__ph img{filter:none;transform:none;-o-object-position:50% 30%;object-position:50% 30%;transition:transform .6s cubic-bezier(.22,1,.36,1)}.bc-cm.bc30 .bc-team-grid__card:hover .bc-team-grid__ph img{filter:none;transform:scale(1.035)}.bc-cm.bc30 .bc-team-grid__ph--cut img{-o-object-fit:contain;object-fit:contain;-o-object-position:bottom center;object-position:bottom center;padding:16px 10px 0}.bc-cm.bc30 .bc-team-grid__cap{padding:16px 18px 18px;border-top:0;gap:0}.bc-cm.bc30 .bc-team-grid__cap b{font:900 var(--bc30-fs-h4)/1.3 var(--bc30-font-kop);color:var(--bc30-kop);overflow-wrap:break-word;hyphens:manual}/* een naam breekt nooit met een streepje ("Kay-ser", review batch 7) */.bc-cm.bc30 .bc-team-grid__cap small{margin-top:5px;font:700 var(--bc30-fs-eyebrow)/1.4 var(--bc30-font-tekst);letter-spacing:.12em;text-transform:uppercase;color:#6b665f;overflow-wrap:break-word;hyphens:auto;hyphenate-limit-chars:12 5 5}.bc-cm.bc30 .bc-team-grid__cap .bc-heel{white-space:nowrap}/* een functie met een streepje ("Co-Owner") en korte woorden breken niet (batch 7, UX-sweep) */.bc-cm.bc30 .bc-team-grid__go{margin-top:auto;padding-top:12px;font:800 var(--bc30-fs-klein)/1.2 var(--bc30-font-tekst);letter-spacing:.1em;color:var(--bc30-oranje-tekst);opacity:1;transform:none;transition:color var(--bc30-duur-snel) var(--bc30-ease)}.bc-cm.bc30 .bc-team-grid__go svg{transition:transform .25s}.bc-cm.bc30 a.bc-team-grid__card:hover .bc-team-grid__go,.bc-cm.bc30 a.bc-team-grid__card:focus-visible .bc-team-grid__go{color:var(--bc30-oranje-hover);opacity:1;transform:none}.bc-cm.bc30 a.bc-team-grid__card:hover .bc-team-grid__go svg{transform:translateX(3px)}.bc-cm.bc30 .bc-team-grid__ph--brand{background:var(--bc30-groen)}.bc-cm.bc30 .bc-team-grid__ph--brand i{font-size:var(--bc30-fs-cijfer)}.bc-cm.bc30 .bc-team-grid__card--join{background:transparent;border:2px dashed rgb(238 116 55 / .55);box-shadow:none}.bc-cm.bc30 .bc-team-grid__card--join:hover,.bc-cm.bc30 .bc-team-grid__card--join:focus-visible{border-color:var(--bc30-oranje);box-shadow:none}.bc-cm.bc30 .bc-team-grid__card--join .bc-team-grid__ph{background:transparent}.bc-cm.bc30 .bc-team-grid__card--join .bc-team-grid__cap b{color:var(--bc30-oranje-tekst)}/* "Bekijk vacatures" past onder 760 niet op een regel in een kaart van 137 px; de pijl loopt dan achter het laatste woord mee in plaats van los rechts (batch 7). */.bc-cm.bc30 .bc-team-grid__card--join .bc-team-grid__go{display:block}.bc-cm.bc30 .bc-team-grid__card--join .bc-team-grid__go svg{display:inline-block;vertical-align:-2px;margin-left:3px}.bc-cm.bc30 .bc-team-grid__go-eind{white-space:nowrap}.bc-cm.bc30 .bc-team-grid__card--join .bc-team-grid__cap small{color:#6b665f}.bc-cm.bc30 .bc-team-grid__join{gap:22px 28px;margin-top:48px}.bc-cm.bc30 .bc-team-grid__join p{font:900 var(--bc30-fs-kaart)/1.3 var(--bc30-font-kop);color:var(--bc30-kop)}.bc-cm.bc30 .bc-team-grid__join .bc-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--bc30-oranje);color:var(--bc-white);border:0;border-radius:var(--bc30-r-pil);padding:14px 24px;min-height:46px;font:800 var(--bc30-fs-knop)/1.25 var(--bc30-font-tekst);letter-spacing:normal;text-transform:none;text-align:center;box-shadow:var(--bc30-gloed);transform:none}.bc-cm.bc30 .bc-team-grid__join .bc-btn:hover{background:var(--bc30-oranje-hover);color:var(--bc-white);transform:none}@media(max-width:1000px){.bc-cm.bc30 .bc-team-grid__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}@media(max-width:699px){
 .bc-cm.bc30 .bc-team-grid{padding-bottom:55px}
 .bc-cm.bc30 .bc-team-grid__eyebrow{margin-bottom:13px}
 .bc-cm.bc30 .bc-team-grid__title{line-height:1.2}
 .bc-cm.bc30 .bc-team-grid__intro{font-size:var(--bc30-fs-tekst)}
 .bc-cm.bc30 .bc-team-grid__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:32px}
 .bc-cm.bc30 .bc-team-grid__cap{padding:12px 12px 14px}
 .bc-cm.bc30 .bc-team-grid__cap small{letter-spacing:.08em}
 .bc-cm.bc30 .bc-team-grid__go{letter-spacing:.06em}
 .bc-cm.bc30 .bc-team-grid__join{flex-direction:column;align-items:stretch;text-align:left}
}/* Smalle telefoon: "Bekijk profiel" met de pijl op één regel (review batch 7: op 360 twee regels). */@media(max-width:399px){.bc-cm.bc30 .bc-team-grid__go{letter-spacing:0}}/* === team-grid variant rij (batch 5b, contactpagina richting B; Bram 04-10: "dat element met teammembers is echt
   dope", maar netjes uitgelijnd en ook op de telefoon). Vier tot zes uitsnedes naast elkaar op dezelfde hoogte en
   dezelfde onderlijn (de foto's uit één reeks zijn even groot ingekaderd, dus dezelfde hoogte is dezelfde schaal), het
   naamkaartje (voornaam in script, functie) bij iedereen op dezelfde hoogte, de oranje boog achter het midden. Op de
   tablet kleiner, op de telefoon een veegrij met de volgende persoon half in beeld en stipjes. Wisselen:
   src/bc30/apart-contact.js (.is-uit), de pauzeknop alleen als er gewisseld wordt (vanaf 1000 px). === */.bc-cm.bc30 .bc-team-grid[data-variant="rij"] .bc-team-grid__inner{max-width:var(--bc30-breed)}/* De sierboog van de band zou links achter de eerste persoon vallen, naast de boog van de rij: weg in een band met de rij. */.bc-cm.bc30 .bc-band:has(>.bc-team-grid[data-variant="rij"]):before{display:none}.bc-cm.bc30 .bc-team-grid__podium{position:relative;isolation:isolate;margin-top:48px}.bc-cm.bc30 .bc-team-grid__boog{position:absolute;z-index:-1;left:50%;bottom:0;width:min(560px,46%);aspect-ratio:1200/556;translate:-50% 0;rotate:180deg;background:var(--wpr-bg-17fc7a4f-238c-4ce0-a5f9-ea245ac7c23d) center/contain no-repeat;pointer-events:none}.bc-cm.bc30 .bc-team-grid__rij{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none}.bc-cm.bc30 .bc-team-grid[data-zichtbaar="4"] .bc-team-grid__rij{grid-template-columns:repeat(4,minmax(0,1fr))}.bc-cm.bc30 .bc-team-grid[data-zichtbaar="6"] .bc-team-grid__rij{grid-template-columns:repeat(6,minmax(0,1fr))}.bc-cm.bc30 .bc-team-grid__reserve{display:none}.bc-cm.bc30 .bc-team-grid__persoon{position:relative;min-width:0;margin:0;padding:0;list-style:none;transition:opacity var(--bc30-duur) var(--bc30-ease),translate var(--bc30-duur-in) var(--bc30-ease)}.bc-cm.bc30 .bc-team-grid__persoon:before{display:none}.bc-cm.bc30 .bc-team-grid__persoon.is-uit{opacity:0;translate:0 var(--bc30-in-beeld)}.bc-cm.bc30 .bc-team-grid__figuur{position:relative;display:block;height:360px;color:var(--bc30-kop);text-decoration:none}.bc-cm.bc30 .bc-team-grid[data-zichtbaar="6"] .bc-team-grid__figuur{height:320px}.bc-cm.bc30 .bc-team-grid__uitsnede{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}.bc-cm.bc30 .bc-team-grid__uitsnede img{display:block;width:auto;height:100%;max-width:none}.bc-cm.bc30 .bc-team-grid__kaartje{position:absolute;z-index:1;left:50%;top:50%;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:4px;width:-moz-max-content;width:max-content;max-width:min(176px,calc(100% - 8px));padding:8px 16px 12px;background:var(--bc30-grond);border-radius:var(--bc30-r-kaart);box-shadow:var(--bc30-schaduw-kaart);text-align:center}.bc-cm.bc30 .bc-team-grid__naam{font:400 var(--bc30-fs-kaart-foto)/1 var(--bc30-font-script);color:var(--bc30-oranje-tekst)}.bc-cm.bc30 .bc-team-grid__functie{font:800 var(--bc30-fs-eyebrow)/1.35 var(--bc30-font-tekst);color:var(--bc30-kop);text-wrap:balance}.bc-cm.bc30 a.bc-team-grid__figuur:hover .bc-team-grid__kaartje{outline:2px solid var(--bc30-oranje);outline-offset:0}.bc-cm.bc30 .bc-team-grid__sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.bc-cm.bc30 .bc-team-grid__pauze{position:absolute;right:0;top:calc(100% + 16px);display:grid;place-items:center;width:32px;height:32px;padding:0;border:1px solid var(--bc30-lijn);border-radius:50%;background:var(--bc30-grond);color:var(--bc30-tekst-zacht);cursor:pointer;transition:color var(--bc30-duur-snel) var(--bc30-ease),border-color var(--bc30-duur-snel) var(--bc30-ease)}.bc-cm.bc30 .bc-team-grid__pauze[hidden]{display:none}.bc-cm.bc30 .bc-team-grid__pauze:hover{color:var(--bc30-oranje-tekst);border-color:var(--bc30-oranje)}.bc-cm.bc30 .bc-team-grid__pauze svg{width:12px;height:12px;fill:currentColor}.bc-cm.bc30 .bc-team-grid__ico-speel,.bc-cm.bc30 .bc-team-grid__pauze[aria-pressed="true"] .bc-team-grid__ico-pauze{display:none}.bc-cm.bc30 .bc-team-grid__pauze[aria-pressed="true"] .bc-team-grid__ico-speel{display:block}@media(min-width:1000px) and (max-width:1279px){
 .bc-cm.bc30 .bc-team-grid__figuur{height:320px}
 .bc-cm.bc30 .bc-team-grid[data-zichtbaar="6"] .bc-team-grid__figuur{height:280px}
}@media(min-width:700px) and (max-width:999px){
 .bc-cm.bc30 .bc-team-grid__podium{margin-top:40px}
 .bc-cm.bc30 .bc-team-grid__figuur,.bc-cm.bc30 .bc-team-grid[data-zichtbaar="6"] .bc-team-grid__figuur{height:clamp(200px,28vw,260px)}
 .bc-cm.bc30 .bc-team-grid__kaartje{padding:8px 8px 12px}
}@media(max-width:699px){
 .bc-cm.bc30 .bc-team-grid__podium{margin-top:32px}
 .bc-cm.bc30 .bc-team-grid__boog{left:0;width:300px;translate:none}
 .bc-cm.bc30 .bc-team-grid__rij,.bc-cm.bc30 .bc-team-grid[data-zichtbaar] .bc-team-grid__rij{display:flex;gap:8px;margin:0 calc(-1 * var(--bc30-gutter));padding:0 var(--bc30-gutter);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--bc30-gutter);scrollbar-width:none;overscroll-behavior-x:contain}
 .bc-cm.bc30 .bc-team-grid__rij::-webkit-scrollbar{display:none}
 .bc-cm.bc30 .bc-team-grid__persoon{flex:0 0 min(152px,40vw);scroll-snap-align:start}
 .bc-cm.bc30 .bc-team-grid__figuur,.bc-cm.bc30 .bc-team-grid[data-zichtbaar="6"] .bc-team-grid__figuur{height:248px}
 .bc-cm.bc30 .bc-team-grid__kaartje{padding:8px 12px 12px}
 .bc-cm.bc30 .bc-team-grid[data-variant="rij"] .bc-dots{margin-top:16px}
}@media print{.bc-cm.bc30 .bc-team-grid__boog,.bc-cm.bc30 .bc-team-grid__pauze{display:none}.bc-cm.bc30 .bc-team-grid__kaartje{box-shadow:none}}/* === team-grid rij in de kop (data-genest, batch 6, contactpagina richting C; Bram 04-10: "op desktop is drie goed, en
   op mob juist liever meer en kleiner"). render-blocks.mjs nest de rij in een compacte page-hero (vorm team, hero.css).
   Vijf mensen in de DOM, in leesvolgorde, sales in het midden. Computer: de middelste drie op één schaal (zelfde hoogte)
   en één onderlijn op de onderrand van de kop, iets over elkaar met het midden voorop, het naamkaartje (voornaam in
   script) bij iedereen op dezelfde hoogte, de oranje boog erachter. Tablet en telefoon: alle vijf naast elkaar en kleiner (telefoon tot de
   schermrand), alleen de voornaam; naam en functie blijven voor schermlezers. Wisselen en binnenkomen:
   src/bc30/apart-contact.js; de beweging zit op foto en kaartje, niet op de persoon, zodat elk kaartje boven elke
   foto blijft. Zonder JS: de vijf uit de HTML, geen wachtstand. === *//* De kolom loopt over de hele hoogte van de kop (de boog hangt aan de bovenkant, zodat zijn rechte rand altijd buiten de
   kop valt); de mensen staan onderaan. */.bc-cm.bc30 .bc-team-grid[data-genest]{--team-h:380px;--team-b:190px;--team-o:35px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-self:stretch;justify-self:stretch;container-type:normal;min-height:calc(var(--team-h) + 52px);padding:0;scroll-margin-top:90px}.bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__podium{position:static;width:calc(3 * var(--team-b) - 2 * var(--team-o));height:calc(var(--team-h) + 30px);margin:0 0 0 auto;isolation:auto}.bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__boog{z-index:0}.bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__rij{position:relative;z-index:1;display:flex;gap:0;justify-content:center;align-items:flex-end;height:100%;margin:0;padding:0;overflow:visible;scroll-snap-type:none}.bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__persoon{flex:0 0 var(--team-b);order:0;margin:0 calc(var(--team-o) / -2);transition:none}.bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__persoon.is-uit{opacity:1;translate:none}.bc-cm.bc30 .bc-team-grid[data-genest][data-zichtbaar="5"] .bc-team-grid__persoon:is(:first-child,:last-child){display:none}.bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__figuur{height:var(--team-h)}.bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__uitsnede{z-index:1}/* Iedereen even groot op één lijn (Bram 04-10: "nu is Etienne beetje anders dan de rest"): per uitsnede een gemeten
   correctie uit de teamlijst (knowledge/authors.json, veld uitsnede; meet-uitsnedes.mjs in de machine), als schaal
   en verschuiving met de oorsprong onderaan in het midden. Alleen omlaag; de kop en het podium knippen onderaan af. */.bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__uitsnede img{transform:translate(calc(var(--uit-x,0) * 100%),calc(var(--uit-y,0) * 100%)) scale(var(--uit-s,1));transform-origin:50% 100%}.bc-cm.bc30 .bc-team-grid[data-genest][data-zichtbaar="5"] .bc-team-grid__persoon:nth-child(3) .bc-team-grid__uitsnede,.bc-cm.bc30 .bc-team-grid[data-genest][data-zichtbaar="3"] .bc-team-grid__persoon:nth-child(2) .bc-team-grid__uitsnede{z-index:2}.bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__kaartje{z-index:3;top:46%;gap:4px;max-width:min(150px,calc(100% - 8px));padding:8px 16px 12px}/* Het script heeft diepe staarten (de j van Stijn): de naam krijgt ruimte, zodat hij de functie niet raakt. */.bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__naam{line-height:1.15}/* Alleen de voornaam op het kaartje, ook op de computer (Bram 04-10); naam en functie blijven voor schermlezers.
   Terugzetten (functie weer zichtbaar op de computer): deze ene regel weghalen. */@media(min-width:1000px){.bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__functie{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}/* Wisselen (.is-uit) en binnenkomen (wachtstand tot .is-klaar): foto en kaartje apart, met een vertraging per plek. */.bc-cm.bc30 .bc-team-grid[data-genest] :is(.bc-team-grid__uitsnede,.bc-team-grid__kaartje){transition:opacity var(--bc30-duur) var(--bc30-ease) var(--team-vertraging,0ms),transform var(--bc30-duur-in) var(--bc30-ease) var(--team-vertraging,0ms)}.bc-cm.bc30 .bc-team-grid[data-genest] .is-uit .bc-team-grid__uitsnede{opacity:0;transform:translateY(var(--bc30-in-beeld))}.bc-cm.bc30 .bc-team-grid[data-genest] .is-uit .bc-team-grid__kaartje{opacity:0;transform:translateY(8px)}@media(scripting:enabled){
 .bc-cm.bc30 .bc-team-grid[data-genest]:not(.is-klaar) .bc-team-grid__uitsnede{opacity:0;transform:translateY(var(--bc30-in-beeld))}
 .bc-cm.bc30 .bc-team-grid[data-genest]:not(.is-klaar) .bc-team-grid__kaartje{opacity:0;transform:translateY(8px)}
 .bc-cm.bc30 .bc-team-grid[data-genest]:not(.is-klaar) :is(.bc-team-grid__uitsnede,.bc-team-grid__kaartje){animation-name:bc-team-terugval;animation-duration:1ms;animation-delay:var(--bc30-vangnet);animation-fill-mode:both}
}/* Vangnet als de bundel niet laadt: na 3 s toch in beeld (longhands: de minifier sloopte eerder een shorthand). */@keyframes bc-team-terugval{to{opacity:1;transform:none}}.bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__pauze{top:auto;right:0;bottom:20px;z-index:4}/* De boog op de computer: schuin rechtsboven zoals de homekop, 28 graden, door de rand van de kop afgesneden (Bram koos
   04-10 stand b). Hij hangt aan de bovenkant van de kolom, zodat zijn rechte rand altijd boven de kop valt. */@media(min-width:1000px){
 .bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__boog{left:auto;right:-170px;bottom:auto;top:-18px;width:640px;translate:none;rotate:28deg}
}@media(min-width:1000px) and (max-width:1279px){
 .bc-cm.bc30 .bc-team-grid[data-genest]{--team-h:334px;--team-b:167px;--team-o:31px}
 .bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__boog{right:-150px;width:564px}
}/* Tablet en telefoon: vijf naast elkaar, kleiner, alleen de voornaam in een pil; geen pauzeknop (wisselen alleen op de computer). */@media(max-width:999px){
 .bc-cm.bc30 .bc-team-grid[data-genest]{display:block;min-height:0;margin-top:24px}
 .bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__podium{position:relative;width:auto;max-width:560px;height:auto;margin:0 auto;overflow:hidden}
 .bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__boog{left:50%;bottom:-62%;width:118%;translate:-50% 0;rotate:180deg}
 .bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__rij{display:grid;grid-template-columns:repeat(var(--team-n,5),minmax(0,1fr));height:auto}
 .bc-cm.bc30 .bc-team-grid[data-genest][data-zichtbaar="3"]{--team-n:3}
 .bc-cm.bc30 .bc-team-grid[data-genest][data-zichtbaar="2"]{--team-n:2}
 .bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__persoon{margin:0}
 .bc-cm.bc30 .bc-team-grid[data-genest][data-zichtbaar="5"] .bc-team-grid__persoon:is(:first-child,:last-child){display:block}
 .bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__figuur{height:auto;aspect-ratio:2/5}
 .bc-cm.bc30 .bc-team-grid[data-genest][data-zichtbaar="5"] .bc-team-grid__persoon:is(:nth-child(2),:nth-child(4)) .bc-team-grid__uitsnede{z-index:2}
 .bc-cm.bc30 .bc-team-grid[data-genest][data-zichtbaar="5"] .bc-team-grid__persoon:nth-child(3) .bc-team-grid__uitsnede{z-index:3}
 .bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__kaartje{z-index:4;top:auto;bottom:8px;max-width:calc(100% - 4px);padding:4px 8px;border-radius:var(--bc30-r-pil)}
 .bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__naam{font-size:var(--bc30-fs-lead)}
 .bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__functie{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}@media(max-width:699px){
 .bc-cm.bc30 .bc-team-grid[data-genest]{margin:24px calc(-1 * var(--bc30-gutter)) 0}
 .bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__podium{max-width:none}
}/* Op de telefoon passen lange voornamen (Laurens, Etienne, Thomas: 61 px op 18 px) niet in een kolom van 75 px en
   braken ze af ("Lauren s", live gezien 16-10, v0.22.1). Tot 430 px daarom tekstgrootte, minder opvulling en op één
   regel; onder 360 px nog iets kleiner. Gemeten met de vijf langste namen tegelijk, 320 tot 500 px. */@media(max-width:429px){
 .bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__kaartje{padding:4px 6px}
 .bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__naam{font-size:var(--bc30-fs-tekst);white-space:nowrap}
}@media(max-width:359px){.bc-cm.bc30 .bc-team-grid[data-genest] .bc-team-grid__naam{font-size:var(--bc30-fs-kaarttekst)}}@media print{.bc-cm.bc30 .bc-team-grid[data-genest] :is(.bc-team-grid__uitsnede,.bc-team-grid__kaartje){opacity:1!important;transform:none!important;animation:none!important}}/* === callout: de uitgelichte zin in een lang artikel. accent (ronde 5, Bram 05-10: "ja dis nice"): geen vak en geen
   streep; de zin in de kopletter op citaatmaat met de markeerstift onder elke regel, zoals het citaat uit de tekst
   (text-image.css), in de tekstkolom in het midden. De mark komt uit de render; markeerstift.js tekent hem; zonder JS
   en bij afdrukken staat hij er meteen (fundament.css). quiet: crème vak zonder lijn, gewone
   letter. stat: het eerste deel groot en oranje in de serif. Links oranje onderstreept, donker oranje op hover. === */.bc-cm.bc30 .bc-callout{max-width:none;margin:0;padding:0 var(--bc30-gutter) 80px;opacity:1;transform:none;transition:none}.bc-cm.bc30 .bc-callout-wrap{max-width:860px;margin:0 auto;border-radius:0 var(--bc30-r-kaart) var(--bc30-r-kaart) 0;padding:30px 40px 30px 36px;background:var(--bc30-creme);border-left:4px solid var(--bc30-oranje);box-shadow:none}.bc-cm.bc30 .bc-callout-wrap:before,.bc-cm.bc30 .bc-callout-wrap:after{content:none}.bc-cm.bc30 .bc-callout__line{font:400 var(--bc30-fs-lead)/1.65 var(--bc30-font-tekst);color:var(--bc30-kop);margin:0;text-wrap:pretty}.bc-cm.bc30 .bc-callout__line+.bc-callout__line{margin-top:14px}.bc-cm.bc30 .bc-callout--accent .bc-callout-wrap{max-width:var(--bc30-tekstkolom);padding:0;border:0;border-radius:0;background:none}.bc-cm.bc30 .bc-callout--accent .bc-callout__line{font:700 var(--bc30-fs-citaat)/1.6 var(--bc30-font-kop);color:var(--bc30-kop);letter-spacing:-.2px}.bc-cm.bc30 .bc-callout--accent .bc-mark{-webkit-box-decoration-break:clone;box-decoration-break:clone}.bc-cm.bc30 .bc-callout--high .bc-callout__line{font-size:var(--bc30-fs-kaart-foto);line-height:1.45}.bc-cm.bc30 .bc-callout--quiet .bc-callout-wrap{border:0;border-radius:var(--bc30-r-kaart);padding:28px 34px}.bc-cm.bc30 .bc-callout--quiet .bc-callout__line{color:var(--bc30-tekst)}.bc-cm.bc30 .bc-callout--stat .bc-callout-wrap{border:0;border-radius:var(--bc30-r-kaart);text-align:center;padding:36px 34px}.bc-cm.bc30 .bc-callout--stat .bc-callout__line:first-child{font:900 var(--bc30-fs-statement)/1 var(--bc30-font-kop);letter-spacing:-1px;color:var(--bc30-oranje);margin-bottom:12px}.bc-cm.bc30 .bc-callout--stat .bc-callout__line:not(:first-child){font:600 var(--bc30-fs-tekst)/1.55 var(--bc30-font-tekst);color:var(--bc30-tekst);max-width:40ch;margin-left:auto;margin-right:auto;margin-top:0}.bc-cm.bc30 .bc-callout__line strong{font-weight:800;color:inherit}.bc-cm.bc30 .bc-callout__line a{color:var(--bc30-oranje);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}.bc-cm.bc30 .bc-callout__line a:hover{color:var(--bc30-oranje-hover)}@media(max-width:699px){
 .bc-cm.bc30 .bc-callout{padding-bottom:55px}
 .bc-cm.bc30 .bc-callout-wrap{padding:24px 22px 24px 20px}
 .bc-cm.bc30 .bc-callout--quiet .bc-callout-wrap,.bc-cm.bc30 .bc-callout--stat .bc-callout-wrap{padding:24px 22px}
 .bc-cm.bc30 .bc-callout__line{font-size:var(--bc30-fs-tekst)}
}/* === author-byline: "Geschreven door" onder de kop van een blog (E-E-A-T; Bram: blogs echt dik). Een
   witte kaart (radius 24, zachte schaduw) op de breedte van de tekst: ronde foto met een oranje ring,
   het label in de eyebrowletter, de naam groot in de serif, de rol klein en ingetogen, de bio leesbaar,
   en "Meer over <voornaam>" als oranje link met pijl. Geen optilling (de kaart zelf is geen link) en
   geen losse swoosh-sticker meer. figure: de uitsnede staat links op een crème vlak met de oranje
   swoosh. === */.bc-cm.bc30 .bc-author-byline{max-width:none;margin:0;padding:0 var(--bc30-gutter) 80px;opacity:1;transform:none;transition:none}.bc-cm.bc30 .bc-author-byline__card{max-width:860px;margin:0 auto;align-items:flex-start;gap:28px;background:var(--bc30-vlak);border-radius:var(--bc30-r-kaart);padding:30px 34px;box-shadow:none;transition:none}.bc-cm.bc30 .bc-author-byline__card:hover{transform:none;box-shadow:none}.bc-cm.bc30 .bc-author-byline__card:after{content:none}.bc-cm.bc30 .bc-author-byline__photo{flex:0 0 104px;width:104px;height:104px;background:var(--bc30-creme);box-shadow:0 0 0 4px #fff,0 0 0 6px var(--bc-primary)}/* O60 (Bram 03-10): de foto uit de mailhandtekening is al een uitsnede op een crème cirkel met de oranje
   swoosh (doorzichtig); dan geen eigen ring en geen rondje eromheen. */.bc-cm.bc30 .bc-author-byline__photo--sig{flex:0 0 148px;width:148px;height:auto;background:none;box-shadow:none;border-radius:0;overflow:visible;margin:-10px 0 -10px -8px}.bc-cm.bc30 .bc-author-byline__photo--sig img{display:block;width:100%;height:auto;-o-object-fit:contain;object-fit:contain;border-radius:0}@media(max-width:699px){.bc-cm.bc30 .bc-author-byline__photo--sig{flex-basis:112px;width:112px;margin:-6px 0 0 -6px}}.bc-cm.bc30 .bc-author-byline__avatar{font:900 var(--bc30-fs-h2-paneel)/1 var(--bc30-font-kop);color:var(--bc30-oranje)}.bc-cm.bc30 .bc-author-byline__meta{display:flex;flex-direction:column;align-items:flex-start;padding-top:4px}.bc-cm.bc30 .bc-author-byline__label{font:700 var(--bc30-fs-eyebrow)/1.3 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);text-transform:uppercase;color:var(--bc30-oranje-tekst);margin:0 0 10px}.bc-cm.bc30 .bc-author-byline__name{font:900 var(--bc30-fs-kaart-foto)/1.2 var(--bc30-font-kop);letter-spacing:-.4px;color:var(--bc30-kop)}.bc-cm.bc30 .bc-author-byline__role{font:700 var(--bc30-fs-eyebrow)/1.4 var(--bc30-font-tekst);letter-spacing:.12em;text-transform:uppercase;color:#6b665f;margin:8px 0 0}.bc-cm.bc30 .bc-author-byline__bio{font:400 var(--bc30-fs-tekst)/var(--bc30-lh-tekst) var(--bc30-font-tekst);color:var(--bc30-tekst);margin:14px 0 0;max-width:62ch}.bc-cm.bc30 .bc-author-byline__bio:empty{display:none}.bc-cm.bc30 .bc-author-byline__bio a:not(.bc-btn){color:var(--bc30-oranje);text-underline-offset:4px}.bc-cm.bc30 .bc-author-byline__bio a:not(.bc-btn):hover{color:var(--bc30-oranje-hover)}.bc-cm.bc30 .bc-author-byline__more{gap:8px;margin-top:16px;min-height:24px;font:800 var(--bc30-fs-knop)/1.3 var(--bc30-font-tekst);color:var(--bc30-oranje-tekst);text-decoration:none}.bc-cm.bc30 .bc-author-byline__more:after{content:"\2192";font-size:var(--bc30-fs-h4);display:inline-block;transition:transform var(--bc30-duur-snel) var(--bc30-ease)}.bc-cm.bc30 .bc-author-byline__more:hover,.bc-cm.bc30 .bc-author-byline__more:focus{gap:8px;color:var(--bc30-oranje-hover)}.bc-cm.bc30 .bc-author-byline__more:hover:after{transform:translateX(3px)}.bc-cm.bc30 .bc-author-byline__more:focus-visible{outline:2px solid var(--bc30-oranje);outline-offset:3px;border-radius:4px}.bc-cm.bc30 .bc-author-byline--figure .bc-author-byline__card{min-height:180px;padding-left:34px}.bc-cm.bc30 .bc-author-byline__figure{left:0;width:170px;border-radius:var(--bc30-r-kaart) 0 0 var(--bc30-r-kaart);background:var(--bc30-creme)}.bc-cm.bc30 .bc-author-byline__cutout{height:176px}.bc-cm.bc30 .bc-author-byline--figure .bc-author-byline__meta{margin-left:162px}@media(max-width:699px){
 .bc-cm.bc30 .bc-author-byline{padding-bottom:55px}
 .bc-cm.bc30 .bc-author-byline__card{flex-direction:column;gap:18px;padding:24px 22px}
 .bc-cm.bc30 .bc-author-byline__photo{flex-basis:80px;width:80px;height:80px}
 .bc-cm.bc30 .bc-author-byline__label{margin-bottom:8px}
 .bc-cm.bc30 .bc-author-byline__more{min-height:44px;margin-top:6px}
 .bc-cm.bc30 .bc-author-byline--figure .bc-author-byline__card{min-height:0;padding-top:170px}
 .bc-cm.bc30 .bc-author-byline__figure{right:0;bottom:auto;width:auto;height:156px;border-radius:var(--bc30-r-kaart) var(--bc30-r-kaart) 0 0}
 .bc-cm.bc30 .bc-author-byline__cutout{height:150px}
 .bc-cm.bc30 .bc-author-byline--figure .bc-author-byline__meta{margin-left:0}
}/* === flipbook: alleen de rand (kop, intro, kaarten, knoplabel); de viewer zelf blijft ongemoeid.
   De sectie staat in 3.0 op de donkere grond met een eigen witte grond (EIGEN_GROND) en krijgt de vorm
   van een witte band (ronding boven, ruimte als een band). Kop als de sectiekop van 3.0 (serif 900,
   clamp 28 tot 42, scriptaccent: een *woord* of het laatste woord), eyebrow 12px .22em. Kaarten: het
   label "Open het boek" als oranje link, hover donker oranje (2.0: teal). Geen transform op de sectie of
   een voorouder (de viewer is position:fixed). === */.bc-cm.bc30 .bc-flipbook{background:var(--bc30-grond);border-radius:var(--bc30-r-band) var(--bc30-r-band) 0 0;padding:var(--bc30-sectie) 0 96px}.bc-cm.bc30 .bc-flipbook__wrap{max-width:var(--bc30-breed);padding:0 var(--bc30-gutter)}/* zelfde container als de rest van de pagina (review batch 7: kop op 52 tegen 102) *//* Boektitels op één lijn (review batch 7): de kaarten stonden onderaan gelijk, dus een tagline van twee regels duwde
   de titel omhoog. Nu bovenaan gelijk, met de omslagen op één plank van de 2.0-hoogte (340); onder 769 staan ze onder
   elkaar (2.0). */@media(min-width:769px){
 .bc-cm.bc30 .bc-flipbook__grid{align-items:flex-start}
 .bc-cm.bc30 .bc-flipbook__cover-wrap{display:flex;align-items:flex-end;justify-content:center;height:340px}
}.bc-cm.bc30 .bc-flipbook__eyebrow{font:700 var(--bc30-fs-eyebrow)/1.3 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);color:var(--bc30-oranje-tekst);margin:0 0 18px}.bc-cm.bc30 .bc-flipbook__title{font:900 var(--bc30-fs-h2)/1.18 var(--bc30-font-kop);letter-spacing:-.6px;color:var(--bc30-kop);max-width:860px;text-wrap:balance}.bc-cm.bc30 .bc-flipbook__title :is(em,.bc-script){font-family:var(--bc-font-script);font-style:normal;font-weight:400;font-size:var(--bc30-script);line-height:.9;color:var(--bc30-oranje);letter-spacing:0;display:inline;transform:none}.bc-cm.bc30 .bc-flipbook__intro{font:400 var(--bc30-fs-lead)/1.65 var(--bc30-font-tekst);color:var(--bc30-tekst);max-width:680px}.bc-cm.bc30 .bc-flipbook__card-title{font:900 var(--bc30-fs-kaart)/1.25 var(--bc30-font-kop);color:var(--bc30-kop)}.bc-cm.bc30 .bc-flipbook__card:hover .bc-flipbook__card-title,.bc-cm.bc30 .bc-flipbook__card:focus-visible .bc-flipbook__card-title{color:var(--bc30-donker)}.bc-cm.bc30 .bc-flipbook__card-tagline{font:400 var(--bc30-fs-kaarttekst)/1.55 var(--bc30-font-tekst);color:var(--bc30-tekst)}.bc-cm.bc30 .bc-flipbook__card-open{font:800 var(--bc30-fs-knop)/1.3 var(--bc30-font-tekst);letter-spacing:normal;text-transform:none;color:var(--bc30-oranje-tekst);border:0;padding:0;margin-top:14px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}.bc-cm.bc30 .bc-flipbook__card:hover .bc-flipbook__card-open,.bc-cm.bc30 .bc-flipbook__card:focus-visible .bc-flipbook__card-open{color:var(--bc30-oranje-hover);border-color:transparent}@media(max-width:699px){
 .bc-cm.bc30 .bc-flipbook{padding:var(--bc30-sectie) 0 48px}
 .bc-cm.bc30 .bc-flipbook__eyebrow{margin-bottom:13px}
 .bc-cm.bc30 .bc-flipbook__title{line-height:1.2}
 .bc-cm.bc30 .bc-flipbook__intro{font-size:var(--bc30-fs-tekst)}
}@media print{
 .bc-cm.bc30 .bc-team-grid__card,.bc-cm.bc30 .bc-author-byline__card{box-shadow:none;border:1px solid #0002}
 .bc-cm.bc30 .bc-callout-wrap{background:none}
 .bc-cm.bc30 .bc-flipbook{border-radius:0}
}/* === offerte-form: de offertepagina (OfferteForm, 2026-10-08). Compacte kop op crème en direct het formulier van de
   bc-offerte-plugin over de volle breedte, half over de kop heen, zodat stap 1 boven de vouw begint (computer:
   kop ongeveer 320 px in plaats van 780 px van de gewone kop). De plugin brengt zijn eigen witte kaart, zijkolom en
   adviseur; dit blok geeft alleen de ruimte. Foto alleen vanaf 1000 px: op tablet en telefoon wint het formulier.
   Telefoon: kop zo kort mogelijk en het formulier zonder overlap over de volle breedte, zoals de plugin het daar
   zelf tekent. === */.bc-cm.bc30 .bc-offerte-form{background:var(--bc30-grond);position:relative}.bc-cm.bc30 .bc-offerte-form__kop{background:var(--bc30-creme);padding:48px 24px 136px}.bc-cm.bc30 .bc-offerte-form__wrap{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:48px;align-items:center}.bc-cm.bc30 .bc-offerte-form__eyebrow{margin:0 0 12px;font:800 var(--bc30-fs-eyebrow)/1.2 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);text-transform:uppercase;color:var(--bc30-oranje-tekst-creme)}.bc-cm.bc30 .bc-offerte-form h1{margin:0 0 16px;font:900 var(--bc30-fs-h1)/1.2 var(--bc30-font-kop);letter-spacing:normal;color:var(--bc30-kop)}.bc-cm.bc30 .bc-offerte-form h1 .bc-script{font-size:var(--bc30-script);line-height:0;white-space:nowrap}.bc-cm.bc30 .bc-offerte-form__lead{margin:0;max-width:600px;font:400 var(--bc30-fs-lead)/var(--bc30-lh-tekst) var(--bc30-font-tekst);color:var(--bc30-tekst)}.bc-cm.bc30 .bc-offerte-form__trust{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px}.bc-cm.bc30 .bc-offerte-form__trust li{display:flex;align-items:center;gap:8px;margin:0;font:700 var(--bc30-fs-klein)/1.3 var(--bc30-font-tekst);color:var(--bc30-kop)}.bc-cm.bc30 .bc-offerte-form__trust li:before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:var(--bc30-oranje) url("data:image/svg+xml,%3Csvg xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27 viewBox%3D%270 0 12 10%27%3E%3Cpath d%3D%27M1 5.2 4.3 8.5 11 1.5%27 fill%3D%27none%27 stroke%3D%27%23fff%27 stroke-width%3D%272%27 stroke-linecap%3D%27round%27 stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center/11px 9px no-repeat}.bc-cm.bc30 .bc-offerte-form__foto{display:none;margin:0}.bc-cm.bc30 .bc-offerte-form__foto img{display:block;width:100%;height:auto;aspect-ratio:3/2;-o-object-fit:cover;object-fit:cover;border-radius:var(--bc30-r-kaart);box-shadow:var(--bc30-schaduw)}.bc-cm.bc30 .bc-offerte-form__formulier .bc-offerte{background:transparent;padding-bottom:0}/* de page-variant van de plugin (shortcode met id, variant full) brengt een warme grond en 120 px onderruimte mee */.bc-cm.bc30 .bc-offerte-form__formulier{position:relative;z-index:2;max-width:calc(1160px + 48px);box-sizing:border-box;margin:-96px auto 0;padding:0 24px 64px;scroll-margin-top:96px}@media(min-width:1000px){
  .bc-cm.bc30 .bc-offerte-form[data-foto="ja"] .bc-offerte-form__wrap{grid-template-columns:minmax(0,1fr) 400px}
  .bc-cm.bc30 .bc-offerte-form__foto{display:block}
}@media(min-width:700px) and (max-width:999px){
  .bc-cm.bc30 .bc-offerte-form__kop{padding:40px 32px 120px}
  .bc-cm.bc30 .bc-offerte-form__formulier{margin-top:-88px;padding:0 32px 56px}
}@media(max-width:699px){
  .bc-cm.bc30 .bc-offerte-form__kop{padding:28px 16px 32px}
  .bc-cm.bc30 .bc-offerte-form h1{margin-bottom:12px}
  .bc-cm.bc30 .bc-offerte-form__lead{font-size:var(--bc30-fs-tekst)}
  .bc-cm.bc30 .bc-offerte-form__trust{margin-top:16px;gap:8px 16px}
  .bc-cm.bc30 .bc-offerte-form__formulier{margin-top:0;padding:0 0 40px;scroll-margin-top:72px}
}/* === Werken bij (2026-10-10, Bram: "alle vacatures op dezelfde manier laten zien, of dat je kan filteren" en
   "zo werkt solliciteren: leef je uit, bouw een nieuw element, echt een toffe feature hiervoor"). Twee aparte 3.0-blokken:
   vacature-lijst (VacatureList): alle vacatures in dezelfde kaart met filterknoppen per groep; op de telefoon een compacte
   lijst met de foto links. sollicitatie-route (ApplyRoute): van sollicitatie tot je eerste event als route op zwart, de lijn
   vult zich halte voor halte als hij in beeld komt (src/bc30/vacatures.js); zonder JS staat hij gevuld. De animaties
   draaien altijd (besluit Bram). === *//* --- vacature-lijst --- */.bc-cm.bc30 .bc-vacatures{padding:88px 24px 96px;scroll-margin-top:72px}.bc-cm.bc30 .bc-vacatures__wrap{max-width:1160px;margin:0 auto}.bc-cm.bc30 .bc-vacatures__kop{max-width:720px;margin:0 auto;text-align:center}.bc-cm.bc30 .bc-vacatures__eyebrow{margin:0 0 12px;font:800 var(--bc30-fs-eyebrow)/1.2 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);text-transform:uppercase;color:var(--bc30-oranje-tekst)}.bc-cm.bc30 .bc-vacatures h2{margin:0;font:900 var(--bc30-fs-h2)/var(--bc30-lh-kop) var(--bc30-font-kop);letter-spacing:var(--bc30-ls-kop);color:var(--bc30-kop)}.bc-cm.bc30 .bc-vacatures h2 .bc-script{font-size:var(--bc30-script);line-height:0;white-space:nowrap}.bc-cm.bc30 .bc-vacatures__intro{margin:16px auto 0;max-width:var(--bc30-lees);font:400 var(--bc30-fs-tekst)/var(--bc30-lh-tekst) var(--bc30-font-tekst);color:var(--bc30-tekst)}.bc-cm.bc30 .bc-vacatures__filters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:32px 0 36px}.bc-cm.bc30 .bc-vacatures__filters[hidden]{display:none}.bc-cm.bc30 .bc-vacatures__filter{display:inline-flex;align-items:center;gap:8px;height:var(--bc30-knop-h);padding:0 8px 0 18px;border:1px solid var(--bc30-lijn);border-radius:var(--bc30-r-pil);background:var(--bc30-grond);font:700 var(--bc30-fs-knop)/1 var(--bc30-font-tekst);color:var(--bc30-kop);cursor:pointer;white-space:nowrap;transition:background var(--bc30-duur-snel),border-color var(--bc30-duur-snel),color var(--bc30-duur-snel)}.bc-cm.bc30 .bc-vacatures__filter:hover{border-color:var(--bc30-kop)}.bc-cm.bc30 .bc-vacatures__filter:focus-visible{outline:2px solid var(--bc30-oranje);outline-offset:2px}.bc-cm.bc30 .bc-vacatures__aantal{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 8px;box-sizing:border-box;border-radius:var(--bc30-r-pil);background:var(--bc30-creme);font:800 var(--bc30-fs-eyebrow)/1 var(--bc30-font-tekst);color:var(--bc30-kop)}.bc-cm.bc30 .bc-vacatures__filter[aria-pressed="true"]{background:var(--bc30-donker);border-color:var(--bc30-donker);color:var(--bc30-creme)}.bc-cm.bc30 .bc-vacatures__filter[aria-pressed="true"] .bc-vacatures__aantal{background:var(--bc30-oranje);color:#fff}.bc-cm.bc30 .bc-vacatures__lijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.bc-cm.bc30 .bc-vacatures__item{margin:0;min-width:0}.bc-cm.bc30 .bc-vacatures__item[hidden]{display:none}.bc-cm.bc30 .bc-vacatures__lijst.is-wissel .bc-vacatures__item{animation:bc30-vacature-in var(--bc30-duur) var(--bc30-ease) both}@keyframes bc30-vacature-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.bc-cm.bc30 .bc-vacatures__kaart{display:flex;flex-direction:column;height:100%;border:1px solid var(--bc30-lijn);border-radius:var(--bc30-r-kaart);overflow:hidden;background:var(--bc30-grond);box-shadow:var(--bc30-schaduw-kaart);color:inherit;text-decoration:none;transition:transform var(--bc30-duur) var(--bc30-ease),box-shadow var(--bc30-duur) var(--bc30-ease)}.bc-cm.bc30 .bc-vacatures__kaart:hover{transform:translateY(-4px);box-shadow:var(--bc30-schaduw)}/* Het thema onderstreept koppen binnen een link (live gezien 10-10, niet in de schets zonder thema): de hele kaart is een link. */.bc-cm.bc30 .bc-vacatures__kaart :is(h3,p,span){text-decoration:none}.bc-cm.bc30 .bc-vacatures__kaart:focus-visible{outline:2px solid var(--bc30-oranje);outline-offset:3px}.bc-cm.bc30 .bc-vacatures__foto{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--bc30-creme)}.bc-cm.bc30 .bc-vacatures__foto img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .6s var(--bc30-ease)}.bc-cm.bc30 .bc-vacatures__kaart:hover .bc-vacatures__foto img{transform:scale(1.04)}.bc-cm.bc30 .bc-vacatures__body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}.bc-cm.bc30 .bc-vacatures__kenmerken{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px}.bc-cm.bc30 .bc-vacatures__kenmerken li{margin:0;padding:5px 10px;border-radius:var(--bc30-r-pil);background:var(--bc30-creme);font:700 var(--bc30-fs-eyebrow)/1.2 var(--bc30-font-tekst);color:var(--bc30-kop)}.bc-cm.bc30 .bc-vacatures h3{margin:0 0 6px;font:900 var(--bc30-fs-kaart)/1.25 var(--bc30-font-kop);color:var(--bc30-kop)}.bc-cm.bc30 .bc-vacatures__body p{margin:0 0 18px;font:400 var(--bc30-fs-kaarttekst)/1.55 var(--bc30-font-tekst);color:var(--bc30-tekst)}.bc-cm.bc30 .bc-vacatures__link{display:inline-flex;align-items:center;gap:6px;margin-top:auto;font:800 var(--bc30-fs-kaarttekst)/1 var(--bc30-font-tekst);color:var(--bc30-oranje-tekst)}.bc-cm.bc30 .bc-vacatures__pijl{width:18px;height:18px;flex:none;transition:transform var(--bc30-duur) var(--bc30-ease)}.bc-cm.bc30 .bc-vacatures__kaart:hover .bc-vacatures__pijl{transform:translateX(4px)}.bc-cm.bc30 .bc-vacatures__open{display:flex;flex-direction:column;justify-content:center;height:100%;min-height:220px;box-sizing:border-box;padding:28px;border:2px dashed rgba(36,36,34,.22);border-radius:var(--bc30-r-kaart);background:var(--bc30-creme)}.bc-cm.bc30 .bc-vacatures__open h3{margin-bottom:8px}.bc-cm.bc30 .bc-vacatures__open p{margin:0 0 20px;font:400 var(--bc30-fs-kaarttekst)/1.55 var(--bc30-font-tekst);color:var(--bc30-tekst)}.bc-cm.bc30 .bc-vacatures__open-knop{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:var(--bc30-knop-h);padding:0 20px;border-radius:var(--bc30-r-pil);background:var(--bc30-oranje);font:800 var(--bc30-fs-knop)/1 var(--bc30-font-tekst);color:#fff;text-decoration:none;box-shadow:var(--bc30-gloed)}.bc-cm.bc30 .bc-vacatures__open-knop:hover{background:var(--bc30-oranje-hover)}@media(min-width:700px) and (max-width:999px){
  .bc-cm.bc30 .bc-vacatures{padding:72px 32px 80px}
  .bc-cm.bc30 .bc-vacatures__lijst{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}@media(max-width:699px){
  .bc-cm.bc30 .bc-vacatures{padding:56px 16px 64px}
  .bc-cm.bc30 .bc-vacatures__kop{text-align:left}
  .bc-cm.bc30 .bc-vacatures__intro{margin-left:0}
  .bc-cm.bc30 .bc-vacatures__filters{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:24px -16px 24px;padding:2px 16px;scrollbar-width:none}
  .bc-cm.bc30 .bc-vacatures__filters::-webkit-scrollbar{display:none}
  .bc-cm.bc30 .bc-vacatures__lijst{grid-template-columns:minmax(0,1fr);gap:12px}
  .bc-cm.bc30 .bc-vacatures__kaart{flex-direction:row}
  .bc-cm.bc30 .bc-vacatures__kaart:hover{transform:none}
  .bc-cm.bc30 .bc-vacatures__foto{flex:none;width:112px;aspect-ratio:auto;min-height:132px}
  .bc-cm.bc30 .bc-vacatures__body{padding:14px 16px 16px}
  .bc-cm.bc30 .bc-vacatures__kenmerken{margin-bottom:8px}
  .bc-cm.bc30 .bc-vacatures__kenmerken li:nth-child(n+3){display:none}
  .bc-cm.bc30 .bc-vacatures h3{font-size:var(--bc30-fs-h4);margin-bottom:4px}
  .bc-cm.bc30 .bc-vacatures__body p{margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .bc-cm.bc30 .bc-vacatures__open{min-height:0;padding:22px}
}/* --- sollicitatie-route --- */.bc-cm.bc30 .bc-route{position:relative;overflow:hidden;padding:104px 24px 112px;background:var(--bc30-zwart);color:var(--bc30-op-donker-tekst);scroll-margin-top:72px}.bc-cm.bc30 .bc-route:before{content:"";position:absolute;right:-180px;top:-200px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(238,116,55,.22) 0,rgba(238,116,55,0) 68%);pointer-events:none}.bc-cm.bc30 .bc-route__wrap{position:relative;max-width:1160px;margin:0 auto}.bc-cm.bc30 .bc-route__kop{max-width:640px}.bc-cm.bc30 .bc-route__eyebrow{margin:0 0 12px;font:800 var(--bc30-fs-eyebrow)/1.2 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);text-transform:uppercase;color:var(--bc-primary-light)}.bc-cm.bc30 .bc-route h2{margin:0;font:900 var(--bc30-fs-h2)/var(--bc30-lh-kop) var(--bc30-font-kop);letter-spacing:var(--bc30-ls-kop);color:var(--bc30-op-donker-kop)}.bc-cm.bc30 .bc-route h2 .bc-script{font-size:var(--bc30-script);line-height:0;white-space:nowrap;color:var(--bc30-oranje)}.bc-cm.bc30 .bc-route__intro{margin:16px 0 0;max-width:var(--bc30-lees);font:400 var(--bc30-fs-lead)/var(--bc30-lh-tekst) var(--bc30-font-tekst);color:var(--bc30-op-donker-zacht)}.bc-cm.bc30 .bc-route__knop{display:inline-flex;align-items:center;height:48px;margin-top:28px;padding:0 26px;border-radius:var(--bc30-r-pil);background:var(--bc30-oranje);font:800 var(--bc30-fs-knop)/1 var(--bc30-font-tekst);color:#fff;text-decoration:none;box-shadow:var(--bc30-gloed);transition:background var(--bc30-duur-snel)}.bc-cm.bc30 .bc-route__knop:hover{background:var(--bc30-oranje-hover)}.bc-cm.bc30 .bc-route__stappen{--gat:28px;list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--stappen,4),minmax(0,1fr));gap:var(--gat)}.bc-cm.bc30 .bc-route__stap{position:relative;display:flex;flex-direction:column;margin:0;min-width:0}.bc-cm.bc30 .bc-route__beeld{position:relative;aspect-ratio:4/5;border-radius:var(--bc30-r-kaart);overflow:hidden;background:#ffffff0d;border:1px solid var(--bc30-lijn-donker)}.bc-cm.bc30 .bc-route__beeld--foto img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.bc-cm.bc30 .bc-route__beeld--persoon{background:radial-gradient(circle at 50% 100%,var(--bc30-oranje) 0,var(--bc30-oranje) 47%,rgba(238,116,55,0) 47.5%),#ffffff0d}.bc-cm.bc30 .bc-route__beeld--persoon img{position:absolute;left:0;right:0;bottom:0;width:100%;height:88%;-o-object-fit:contain;object-fit:contain;-o-object-position:bottom;object-position:bottom}.bc-cm.bc30 .bc-route__spoor{position:relative;display:flex;align-items:center;height:44px;margin:24px 0 16px}.bc-cm.bc30 .bc-route__stap:not(:last-child) .bc-route__spoor:before,
.bc-cm.bc30 .bc-route__stap:not(:last-child) .bc-route__spoor:after{content:"";position:absolute;top:50%;left:52px;right:calc(-1 * var(--gat) + 8px);height:2px;margin-top:-1px;border-radius:2px}.bc-cm.bc30 .bc-route__stap:not(:last-child) .bc-route__spoor:before{background:var(--bc30-lijn-donker)}.bc-cm.bc30 .bc-route__stap:not(:last-child) .bc-route__spoor:after{background:var(--bc30-oranje);transform-origin:left;transform:scaleX(1)}.bc-cm.bc30 .bc-route__punt{position:relative;z-index:1;display:grid;place-items:center;width:44px;height:44px;box-sizing:border-box;border:2px solid var(--bc30-oranje);border-radius:50%;background:var(--bc30-oranje);font:800 var(--bc30-fs-kaarttekst)/1 var(--bc30-font-tekst);color:#fff}.bc-cm.bc30 .bc-route__tijd{display:inline-flex;align-self:flex-start;margin:0 0 10px;padding:5px 10px;border-radius:var(--bc30-r-pil);background:rgba(238,116,55,.16);font:800 var(--bc30-fs-eyebrow)/1.2 var(--bc30-font-tekst);letter-spacing:.08em;text-transform:uppercase;color:var(--bc-primary-light)}.bc-cm.bc30 .bc-route__tekst{display:flex;flex-direction:column}.bc-cm.bc30 .bc-route__tekst h3{margin:0 0 6px;font:900 var(--bc30-fs-kaart)/1.25 var(--bc30-font-kop);color:var(--bc30-op-donker-kop)}.bc-cm.bc30 .bc-route__tekst p{margin:0;font:400 var(--bc30-fs-kaarttekst)/1.6 var(--bc30-font-tekst);color:var(--bc30-op-donker-zacht)}/* Wachtstand (JS zet hem alleen als de route nog niet in beeld is) en de vulling halte voor halte. */.bc-cm.bc30 .bc-route--wacht .bc-route__stap{opacity:0;transform:translateY(18px)}.bc-cm.bc30 .bc-route--wacht .bc-route__stap:not(:last-child) .bc-route__spoor:after{transform:scaleX(0)}.bc-cm.bc30 .bc-route--wacht .bc-route__punt{background:var(--bc30-zwart);color:var(--bc30-op-donker-kop)}.bc-cm.bc30 .bc-route--wacht.is-actief .bc-route__stap{opacity:1;transform:none;transition:opacity .6s var(--bc30-ease) calc(var(--i) * .5s),transform .6s var(--bc30-ease) calc(var(--i) * .5s)}.bc-cm.bc30 .bc-route--wacht.is-actief .bc-route__punt{background:var(--bc30-oranje);color:#fff;transition:background .35s var(--bc30-ease) calc(var(--i) * .5s + .2s),color .35s var(--bc30-ease) calc(var(--i) * .5s + .2s)}.bc-cm.bc30 .bc-route--wacht.is-actief .bc-route__stap:not(:last-child) .bc-route__spoor:after{transform:scaleX(1);transition:transform .55s var(--bc30-ease) calc(var(--i) * .5s + .4s)}@media print{
  .bc-cm.bc30 .bc-route--wacht .bc-route__stap{opacity:1;transform:none}
  .bc-cm.bc30 .bc-route--wacht .bc-route__spoor:after{transform:none}
}@media(min-width:700px) and (max-width:999px){
  .bc-cm.bc30 .bc-route{padding:80px 32px 88px}
  .bc-cm.bc30 .bc-route__stappen{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}
  .bc-cm.bc30 .bc-route__stap .bc-route__spoor:before,.bc-cm.bc30 .bc-route__stap .bc-route__spoor:after{display:none}
}@media(max-width:699px){
  .bc-cm.bc30 .bc-route{padding:64px 16px 72px}
  .bc-cm.bc30 .bc-route:before{right:-260px;top:-240px}
  .bc-cm.bc30 .bc-route__knop{width:100%;justify-content:center;box-sizing:border-box}
  .bc-cm.bc30 .bc-route__stappen{grid-template-columns:minmax(0,1fr);gap:0;margin-top:44px}
  .bc-cm.bc30 .bc-route__stap{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"spoor tekst" "spoor beeld";-moz-column-gap:16px;column-gap:16px}
  .bc-cm.bc30 .bc-route__spoor{grid-area:spoor;align-items:flex-start;height:auto;margin:0}
  .bc-cm.bc30 .bc-route__tekst{grid-area:tekst;padding-top:8px}
  .bc-cm.bc30 .bc-route__beeld{grid-area:beeld;aspect-ratio:4/3;margin:16px 0 36px}
  .bc-cm.bc30 .bc-route__stap:last-child .bc-route__beeld{margin-bottom:0}
  .bc-cm.bc30 .bc-route__stap:not(:last-child) .bc-route__spoor:before,
  .bc-cm.bc30 .bc-route__stap:not(:last-child) .bc-route__spoor:after{top:52px;bottom:4px;left:21px;right:auto;width:2px;height:auto;margin-top:0;transform-origin:top}
  .bc-cm.bc30 .bc-route--wacht .bc-route__stap:not(:last-child) .bc-route__spoor:after{transform:scaleY(0)}
  .bc-cm.bc30 .bc-route--wacht.is-actief .bc-route__stap:not(:last-child) .bc-route__spoor:after{transform:scaleY(1)}
  .bc-cm.bc30 .bc-route__spoor{position:relative;align-self:stretch}
  .bc-cm.bc30 .bc-route__beeld--persoon img{height:92%}
}/* === sollicitatie-form (ApplyForm, 2026-10-10): het sollicitatieformulier van de plugin op een vacature, in de witte
   band. Links een korte zijkolom (eyebrow, punten met een groen vinkje, een regel om eerst te mailen, op de computer
   een foto die meeschuift), rechts het formulier op het off-white vlak zonder schaduw, zoals elk formulier in 3.0.
   Het formulier brengt zijn eigen kop mee. Telefoon en tablet: de punten boven het formulier, geen foto. === */.bc-cm.bc30 .bc-sollform{padding:var(--bc30-sectie) 24px;scroll-margin-top:96px}.bc-cm.bc30 .bc-sollform__wrap{max-width:var(--bc30-smal);margin:0 auto;display:grid;grid-template-columns:minmax(0,760px);justify-content:center;gap:48px;align-items:start}.bc-cm.bc30 .bc-sollform__wrap[data-zij="ja"]{grid-template-columns:minmax(0,4fr) minmax(0,7fr);justify-content:stretch}.bc-cm.bc30 .bc-sollform__zij{position:sticky;top:120px}.bc-cm.bc30 .bc-sollform__eyebrow{margin:0 0 16px;font:800 var(--bc30-fs-eyebrow)/1.2 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);text-transform:uppercase;color:var(--bc30-oranje-tekst)}.bc-cm.bc30 .bc-sollform__punten{margin:0;padding:0;list-style:none;display:grid;gap:12px}.bc-cm.bc30 .bc-sollform__punten li{position:relative;margin:0;padding-left:32px;font:600 var(--bc30-fs-tekst)/1.45 var(--bc30-font-tekst);color:var(--bc30-kop)}.bc-cm.bc30 .bc-sollform__punten li:before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--bc30-groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}.bc-cm.bc30 .bc-sollform__punten strong{font-weight:800}.bc-cm.bc30 .bc-sollform__contact{margin:20px 0 0;font:400 var(--bc30-fs-tekst)/1.55 var(--bc30-font-tekst);color:var(--bc30-tekst-zacht)}.bc-cm.bc30 .bc-sollform__contact a{color:var(--bc30-oranje-tekst);font-weight:700;text-decoration:underline;text-underline-offset:3px}.bc-cm.bc30 .bc-sollform__foto{margin:32px 0 0;aspect-ratio:4/5;border-radius:var(--bc30-r-kaart);overflow:hidden;box-shadow:var(--bc30-schaduw)}.bc-cm.bc30 .bc-sollform__foto img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.bc-cm.bc30 .bc-sollform__kaart{background:var(--bc30-vlak);border-radius:var(--bc30-r-kaart);padding:48px}.bc-cm.bc30 .bc-sollform__kaart .bc-inzending{max-width:none;margin:0}@media(max-width:999px){
  .bc-cm.bc30 .bc-sollform__wrap[data-zij="ja"]{grid-template-columns:minmax(0,760px);justify-content:center;gap:32px}
  .bc-cm.bc30 .bc-sollform__zij{position:static}
  .bc-cm.bc30 .bc-sollform__foto{display:none}
}@media(max-width:699px){
  .bc-cm.bc30 .bc-sollform{padding:64px 16px}
  .bc-cm.bc30 .bc-sollform__wrap,.bc-cm.bc30 .bc-sollform__wrap[data-zij="ja"]{gap:24px}
  .bc-cm.bc30 .bc-sollform__kaart{padding:32px 16px;border-radius:var(--bc30-r-kaart)}
}/* === video-kaart (VideoCard, 2026-10-10): compacte video naast tekst in de witte band (Bram: "die op de homepage is een
   grote sectie en dat vreet veel ruimte"). Tekst links, video rechts (data-flip: andersom); de video is een foto met
   een oranje afspeelknop en laadt pas na een klik op dezelfde plek (src/bc30/video-kaart.js). Telefoon: tekst boven
   de video. De animaties draaien altijd (besluit Bram). === */.bc-cm.bc30 .bc-videokaart{padding:72px 24px}.bc-cm.bc30 .bc-videokaart__wrap{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}.bc-cm.bc30 .bc-videokaart[data-flip="ja"] .bc-videokaart__tekst{order:2}.bc-cm.bc30 .bc-videokaart__eyebrow{margin:0 0 12px;font:800 var(--bc30-fs-eyebrow)/1.2 var(--bc30-font-tekst);letter-spacing:var(--bc30-ls-eyebrow);text-transform:uppercase;color:var(--bc30-oranje-tekst)}.bc-cm.bc30 .bc-videokaart h2{margin:0 0 16px;font:900 var(--bc30-fs-h2)/var(--bc30-lh-kop) var(--bc30-font-kop);letter-spacing:var(--bc30-ls-kop);color:var(--bc30-kop)}.bc-cm.bc30 .bc-videokaart h2 .bc-script{font-size:var(--bc30-script);line-height:0;white-space:nowrap}.bc-cm.bc30 .bc-videokaart__tekst p:not(.bc-videokaart__eyebrow){margin:0 0 14px;font:400 var(--bc30-fs-tekst)/var(--bc30-lh-tekst) var(--bc30-font-tekst);color:var(--bc30-tekst)}.bc-cm.bc30 .bc-videokaart__knop{display:inline-flex;align-items:center;height:var(--bc30-knop-h);margin-top:10px;padding:0 22px;border-radius:var(--bc30-r-pil);background:var(--bc30-oranje);font:800 var(--bc30-fs-knop)/1 var(--bc30-font-tekst);color:#fff;text-decoration:none;box-shadow:var(--bc30-gloed);transition:background var(--bc30-duur-snel)}.bc-cm.bc30 .bc-videokaart__knop:hover{background:var(--bc30-oranje-hover)}.bc-cm.bc30 .bc-videokaart__video{position:relative;aspect-ratio:16/9;border-radius:var(--bc30-r-kaart);overflow:hidden;background:var(--bc30-zwart);box-shadow:var(--bc30-schaduw)}.bc-cm.bc30 .bc-videokaart__speler{position:absolute;inset:0;display:block;color:#fff;text-decoration:none;cursor:pointer}.bc-cm.bc30 .bc-videokaart__speler img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:transform .6s var(--bc30-ease)}.bc-cm.bc30 .bc-videokaart__speler:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,3,1,0) 45%,rgba(4,3,1,.55) 100%)}.bc-cm.bc30 .bc-videokaart__speler:hover img{transform:scale(1.03)}.bc-cm.bc30 .bc-videokaart__speler:focus-visible{outline:3px solid var(--bc30-oranje);outline-offset:3px}.bc-cm.bc30 .bc-videokaart__play{position:absolute;z-index:1;left:50%;top:50%;display:grid;place-items:center;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--bc30-oranje);transition:transform var(--bc30-duur) var(--bc30-ease)}/* Puls: een oranje schijf achter de knop die groeit tot 18 px rand en vervaagt (zelfde beeld als de oude box-shadow, 21-10). */.bc-cm.bc30 .bc-videokaart__play:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--bc30-oranje);opacity:0;animation:bc30-videokaart-puls 2.2s infinite}.bc-cm.bc30 .bc-videokaart__play svg{width:34px;height:34px;margin-left:4px}.bc-cm.bc30 .bc-videokaart__speler:hover .bc-videokaart__play{transform:scale(1.08)}@keyframes bc30-videokaart-puls{0%{opacity:.55;transform:scale(1)}70%{opacity:0;transform:scale(var(--puls-schaal,1.43))}100%{opacity:0;transform:scale(1)}}.bc-cm.bc30 .bc-videokaart__label{position:absolute;z-index:1;left:20px;bottom:18px;font:800 var(--bc30-fs-klein)/1 var(--bc30-font-tekst);letter-spacing:.02em;color:#fff}.bc-cm.bc30 .bc-videokaart__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}@media(min-width:700px) and (max-width:999px){
  .bc-cm.bc30 .bc-videokaart{padding:64px 32px}
  .bc-cm.bc30 .bc-videokaart__wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px}
}@media(max-width:699px){
  .bc-cm.bc30 .bc-videokaart{padding:48px 16px}
  .bc-cm.bc30 .bc-videokaart__wrap{grid-template-columns:minmax(0,1fr);gap:24px}
  .bc-cm.bc30 .bc-videokaart[data-flip="ja"] .bc-videokaart__tekst{order:0}
  .bc-cm.bc30 .bc-videokaart__knop{width:100%;justify-content:center;box-sizing:border-box}
  .bc-cm.bc30 .bc-videokaart__play{width:68px;height:68px;margin:-34px 0 0 -34px;--puls-schaal:1.53}
  .bc-cm.bc30 .bc-videokaart__play svg{width:28px;height:28px}
  .bc-cm.bc30 .bc-videokaart__label{left:14px;bottom:12px}
}/* Begint een band met de videokaart (studentenbijbaan, 2026-10-10), dan valt de sierboog van de band (fundament.css)
   links over de tekst. Zoals bij profile: op de computer gespiegeld rechts als de tekst links staat (met data-flip staat
   de video links en valt de boog erachter), op de telefoon onderaan de band. */@media(min-width:641px){
  .bc-cm.bc30 .bc-band:has(>.bc-videokaart:first-child:not([data-flip])):before{left:auto;right:-380px;transform:rotate(-32deg) scaleX(-1)}
}@media(max-width:640px){
  .bc-cm.bc30 .bc-band:not([data-variant]):has(>.bc-videokaart:first-child):before{top:auto;bottom:40px}
}/* BC 3.0: site-chrome (header, USP-balk, footer), fase 3 run 7.
   Plan bc-content-machine/docs/superpowers/plans/2026-09-30-bc30-fase3-blokbibliotheek.md, Architectuur 13.
   Bron: de 3.0-preview (tag bc30-vastgezet-2026-09-30), css/chrome.css en de chrome-regels in css/base.css.

   Twee plekken, een stijl:
   (a) de blokken site-header en site-footer in een 3.0-pagina (`<div class="bc-cm bc30">`: kandidaatpagina's,
       portalvoorbeelden);
   (b) de live chrome uit de mu-plugin, geprint in eigen eilanden met de chrome-marker:
       `<div class="bc-cm bc-wp-chrome bc-wp-chrome--header|usp|footer bc30-chrome">`.
   De chrome krijgt NIET de contentmarker bc30 (review run 1): dan zouden paginagrond en typografie van het
   fundament op de chrome vallen. Wat het fundament in de preview wel op de chrome doet (box-sizing, links,
   focus, minder beweging, tokens) staat hieronder apart voor `.bc30-chrome`.
   Zonder bc30 of bc30-chrome verandert er niets: de live 2.0-chrome houdt zijn opmaak.

   Specificiteit gelijk aan de preview (lane-instructie punt 4):
     preview `.bc30 X`        ->  `:is(.bc30,.bc30-chrome):where(.bc-cm) X`   (0,1,0 + X)
     preview `.bc-cm.bc30 X`  ->  `.bc-cm:is(.bc30,.bc30-chrome) X`           (0,2,0 + X)
   `:is()` telt als zijn zwaarste argument (een klasse), `:where()` telt niet.
   Hoger alleen waar de preview niets zegt: de plakkende header en zijn pill-stand (de preview plakt niet) en
   de 2.0-regels die alleen op de WordPress-eilanden gelden (`.bc-wp-chrome`). *//* === Tokens en basis van de chrome-marker (in 3.0-pagina's zet het fundament ze al op .bc-cm.bc30) === */.bc30-chrome:where(.bc-cm){--bc-muted:#8f887c;--bc-primary-dark:#d6642c;--bc-on-dark:#cfc8bc;--bc-font-serif:'Merriweather',Georgia,serif;--bc30-cap:1400px;--bc30-gutter:32px;color:var(--bc-dark)}@media(max-width:760px){.bc30-chrome:where(.bc-cm){--bc30-gutter:24px}}.bc30-chrome:where(.bc-cm) *{box-sizing:border-box}.bc30-chrome:where(.bc-cm) img{max-width:100%}.bc30-chrome:where(.bc-cm) a{text-decoration:none}.bc30-chrome:where(.bc-cm) a:focus-visible,.bc30-chrome:where(.bc-cm) button:focus-visible,.bc30-chrome:where(.bc-cm) summary:focus-visible{outline:3px solid var(--bc-primary,#ee7437);outline-offset:5px}/* Knophover (knopregels, besluit Bram 2026-09-21; plan Architectuur 12 "de chrome volgt bij de chromerelease"):
   oranje, op een oranje knop #d6642c, nooit teal. Gelijk aan de regel in fundament.css voor .bc-cm.bc30. */.bc-cm.bc30-chrome .bc-btn:not(.bc-btn--text,.bc-btn--outline,.bc-btn--secondary,.bc-btn--cream,.bc-btn--dark,.bc-btn--green):hover{background:var(--bc-primary-dark);transform:none}/* De glow van de 2.0-knop kleurt op hover teal mee; in de chrome blijft hij oranje. */.bc-cm:is(.bc30,.bc30-chrome) :is(.bc-site-header,.bc-site-footer) .bc-btn--glow:hover{box-shadow:var(--bc30-gloed)}/* === Header. DOM gelijk aan 2.0 en de mu-plugin. Positie uit de preview (`position:relative`) bewust
   niet: de header blijft plakken zoals live (besluit fase 3). === */:is(.bc30,.bc30-chrome):where(.bc-cm) .bc-site-header{z-index:80;background:var(--bc-dark)}:is(.bc30,.bc30-chrome):where(.bc-cm) .bc-hdr__shell{background:var(--bc-dark)}:is(.bc30,.bc30-chrome):where(.bc-cm) .bc-hdr__cta{display:flex;align-items:center;justify-content:center;color:var(--bc-white)}:is(.bc30,.bc30-chrome):where(.bc-cm) .bc-hdr__logo img{width:190px;height:33px;-o-object-fit:contain;object-fit:contain}:is(.bc30,.bc30-chrome):where(.bc-cm) .bc-hdr__wrap{max-width:1400px;min-height:76px;padding-top:12px;padding-bottom:12px}@media(max-width:640px){:is(.bc30,.bc30-chrome):where(.bc-cm) .bc-hdr__wrap{min-height:66px;padding:12px 20px}}:is(.bc30,.bc30-chrome):where(.bc-cm) .bc-hdr__wrap,:is(.bc30,.bc30-chrome):where(.bc-cm) .bc-sf__wrap{max-width:var(--bc30-cap);padding-left:var(--bc30-gutter);padding-right:var(--bc30-gutter);margin-left:auto;margin-right:auto}@media(max-width:640px){
  .bc-cm:is(.bc30,.bc30-chrome) .bc-hdr__cta{display:none}
  .bc-cm:is(.bc30,.bc30-chrome) .bc-hdr__wrap{justify-content:space-between;gap:14px}
  .bc-cm:is(.bc30,.bc30-chrome) .bc-hdr__extra{margin-left:auto}
  :is(.bc30,.bc30-chrome):where(.bc-cm) .bc-hdr__logo img{width:154px;height:29px}
}/* Pill-stand na 120 px scrollen (site-header.js, 2.0): de 2.0-maten van de pill blijven; de vaste 3.0-hoogte
   en logobreedte gaan eruit, en de balk om de pill is doorzichtig (de preview kent geen pill). */.bc-cm:is(.bc30,.bc30-chrome) .bc-site-header.bc-hdr--min{background:transparent}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-header.bc-hdr--min .bc-hdr__wrap{min-height:0}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-header.bc-hdr--min .bc-hdr__logo img{width:auto}/* === USP-balk: creme, klein. Op de telefoon (<=760) een doorlopende carrousel: de punten achter elkaar met 40 px
   ertussen (besluit Bram 2026-10-07: "echt als carrousel scrollen, de USP's achter elkaar met wat ruimte ertussen").
   De randen lopen weg onder een verloop in de creme van de balk: de 2.0-pseudo-elementen van 36 px (site-header.css)
   staan dan weer aan. Geen masker: dat maakte de balk zelf aan de randen wit (Bram 2026-10-07). src/bc30/chrome.js
   zet .bc-usp--loop, zet de punten er een tweede keer achter (aria-hidden, links zonder tabstop) en de duur op 40 px
   per seconde; hover en focus pauzeren. Geen afhandeling van minder beweging in de browser (Bram 2026-10-07, zoals
   casino 2026-09-19). Zonder JS een rij die je zelf veegt. Hoogte op de telefoon 45 px (was 65; computer 50).
   chrome.js maakt een overlopende rij zonder links met het toetsenbord bereikbaar (tabindex); het label staat in de
   HTML. === */:is(.bc30,.bc30-chrome):where(.bc-cm) .bc-usp-strip{background:var(--bc-cream)}:is(.bc30,.bc30-chrome):where(.bc-cm) .bc-usp-strip li{font-size:11px}:is(.bc30,.bc30-chrome):where(.bc-cm) .bc-usp-strip ul{max-width:1300px;margin:auto}:is(.bc30,.bc30-chrome):where(.bc-cm) .bc-usp-strip svg{width:14px}/* Boven 760 px: gecentreerd zolang de punten passen, anders beginnend links en veegbaar. De 2.0-regel
   (justify-content:center met overflow-x:auto) schoof de inhoud tussen 761 en ongeveer 935 px links buiten de
   scrollrand, onbereikbaar (iPad staand; review run 7, bevinding 1). Automatische marges op het eerste en
   laatste punt centreren zonder dat probleem: ze worden 0 zodra de rij te breed is. */@media(min-width:761px){
  :is(.bc30,.bc30-chrome):where(.bc-cm) .bc-usp-strip ul{justify-content:flex-start}
  :is(.bc30,.bc30-chrome):where(.bc-cm) .bc-usp-strip li:first-child{margin-left:auto}
  :is(.bc30,.bc30-chrome):where(.bc-cm) .bc-usp-strip li:last-child{margin-right:auto}
}@media(max-width:760px){
  :is(.bc30,.bc30-chrome):where(.bc-cm) .bc-usp-strip{padding:0;min-height:44px}
  :is(.bc30,.bc30-chrome):where(.bc-cm) .bc-usp-strip::before,:is(.bc30,.bc30-chrome):where(.bc-cm) .bc-usp-strip::after{display:none}
  :is(.bc30,.bc30-chrome):where(.bc-cm) .bc-usp-strip ul{display:flex;overflow-x:auto;gap:16px;justify-content:flex-start;padding:12px 16px;scroll-snap-type:x proximity;scroll-padding-inline:16px;scrollbar-width:none;overscroll-behavior-x:contain}
  :is(.bc30,.bc30-chrome):where(.bc-cm) .bc-usp-strip ul::-webkit-scrollbar{display:none}
  :is(.bc30,.bc30-chrome):where(.bc-cm) .bc-usp-strip ul:focus-visible{outline:2px solid var(--bc-green);outline-offset:-4px}
  :is(.bc30,.bc30-chrome):where(.bc-cm) .bc-usp-strip li{display:flex;font-size:13px;line-height:1.4;flex:0 0 auto;min-width:0;max-width:calc(100vw - 64px);min-height:20px;white-space:normal;scroll-snap-align:start;justify-content:flex-start}
  :is(.bc30,.bc30-chrome):where(.bc-cm) .bc-usp--loop{overflow:hidden}
  :is(.bc30,.bc30-chrome):where(.bc-cm) .bc-usp-strip.bc-usp--loop::before,:is(.bc30,.bc30-chrome):where(.bc-cm) .bc-usp-strip.bc-usp--loop::after{display:block}
  :is(.bc30,.bc30-chrome):where(.bc-cm) .bc-usp--loop ul{width:-moz-max-content;width:max-content;max-width:none;margin:0;overflow:visible;gap:0;padding:12px 0;scroll-snap-type:none;animation:bc-usp-loop var(--bc-usp-duur,28s) linear infinite}
  :is(.bc30,.bc30-chrome):where(.bc-cm) .bc-usp--loop ul:is(:hover,:focus-within){animation-play-state:paused}
  :is(.bc30,.bc30-chrome):where(.bc-cm) .bc-usp--loop li{max-width:none;padding:0 20px;white-space:nowrap}
}@keyframes bc-usp-loop{to{transform:translateX(-50%)}}/* === Footer (bc-site-footer--max): donker verloop met afgeronde bovenhoeken, kop met de merkregel (CTA
   verborgen), raster van vier kolommen, reviewrijen als link met aantal en platformlogo, donkere onderbalk. === */:is(.bc30,.bc30-chrome):where(.bc-cm) .bc-site-footer:before,:is(.bc30,.bc30-chrome):where(.bc-cm) .bc-site-footer:after{display:none}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max{padding:0;margin:0;border-radius:48px 48px 0 0;background:linear-gradient(180deg,var(--bc-dark),#10100e 88%);overflow:hidden}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__wrap{width:100%;max-width:1300px;padding:0 32px;margin:0 auto}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__head{height:177px;padding:0;margin:0;display:flex;justify-content:center;align-items:center;text-align:center;border-bottom:1px solid #ffffff1f}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__head:after{display:none}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__mark{font-size:56px;line-height:1;transform:rotate(-3deg);color:var(--bc-primary)}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__cta{display:none}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,1fr);gap:56px;padding:60px 0 70px;margin:0}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__grid>div{min-width:0;order:0}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max h5{font:800 13px/1 var(--bc-font-body);letter-spacing:.2em;color:var(--bc-cream);margin:0 0 22px}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max p,.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__links li{font:400 15px/1.65 var(--bc-font-body);color:var(--bc-on-dark)}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max p{margin:0 0 6px}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__contact-lines{margin-top:6px}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__links li{padding:5px 0;margin:0}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__links a{font:inherit}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__rev{display:block;width:100%;max-width:330px}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__rev-row{display:grid;grid-template-columns:86px minmax(0,1fr) 95px;gap:10px;align-items:center;padding:15px 0;margin:0}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__rev-row+.bc-sf__rev-row{border-top:1px solid #ffffff21;padding-top:16px}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max a.bc-sf__rev-row{text-decoration:none}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max a.bc-sf__rev-row:hover .bc-sf__review-count{color:var(--bc-primary)}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max a.bc-sf__rev-row:focus-visible{outline:2px solid var(--bc-primary);outline-offset:4px}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__rnum{font:900 34px/1 var(--bc-font-serif);color:#fff;display:block;min-width:0;white-space:nowrap;margin:0}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__rnum small{font:700 13px/1 var(--bc-font-body);color:var(--bc-muted);margin-left:2px}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__review-count{font:400 13px/1.3 var(--bc-font-body);color:var(--bc-on-dark);white-space:nowrap}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__review-platform{display:flex;align-items:center;border-left:1px solid #ffffff29;padding-left:18px;height:22px}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__review-platform img{display:block;width:76px;height:22px;max-width:none;-o-object-fit:contain;object-fit:contain;-o-object-position:left center;object-position:left center}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__review-platform img.bc-sf__plogo--google{width:61px;height:20px}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__insta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:280px;max-height:none;overflow:visible;margin:14px 0 16px}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__insta img{width:100%;height:auto;aspect-ratio:1;-o-object-fit:cover;object-fit:cover;border-radius:8px}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__insta-head{font-size:14px;margin-top:18px}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__ghostbtn{font:700 13px/16px var(--bc-font-body);padding:10px 18px;margin:0}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__bottom{background:#030401;padding:0;margin:0;border:0}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__bottom-wrap{max-width:1300px;min-height:66px;padding:18px 32px;margin:0 auto;color:var(--bc-muted);font:700 13px/1.4 var(--bc-font-body);gap:22px}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__bottom-wrap a{color:var(--bc-muted)}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__blogo{width:157px;height:26px;-o-object-fit:contain;object-fit:contain;filter:none;opacity:1;margin-right:33px}.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max a:hover{color:var(--bc-primary)}@media(max-width:1200px){
  .bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:42px 64px}
  .bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__rev{max-width:310px}
}@media(max-width:640px){
  .bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max{border-radius:28px 28px 0 0}
  .bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__wrap{padding:0 24px}
  .bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__head{height:126px}
  .bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__mark{font-size:42px}
  .bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__grid{grid-template-columns:minmax(0,1fr);gap:34px;padding:36px 0 42px}
  .bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__grid h5{margin-bottom:16px}
  .bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__rev{max-width:330px}
  .bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__rev-row{grid-template-columns:72px minmax(0,1fr) 86px;gap:8px}
  .bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__review-platform{padding-left:10px}
  .bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__rnum{font-size:32px}
  .bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__bottom-wrap{padding:24px;align-items:center;justify-content:center;text-align:center;gap:16px}
  .bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__bottom-wrap nav{margin:0;gap:22px;justify-content:center;flex-wrap:wrap}
  .bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__blogo{margin:0}
}/* === Grond achter de afgeronde bovenhoeken. In de preview zit de footer in de lichte paginawrapper
   (`.bc30{background:var(--bc-white)}`), dus de hoeken tonen licht.
   (a) Blok in een 3.0-pagina: de wrapper .bc-cm.bc30 is hier de zwarte paginagrond (fundament); alleen een
       schaduw kan in de hoeken schilderen. clip-path houdt hem binnen de footer, dus hij valt nooit over het
       blok erboven.
   (b) WordPress-eiland op een pagina met 3.0-inhoud: de lichte grond van de preview op het eiland zelf, en
       niet de 2.0-overlap van -2.2vw (die hoorde bij de schuine 2.0-rand; de 3.0-footer staat recht onder de
       inhoud, zoals in de preview). Op andere pagina's blijft het eiland doorzichtig zoals in 2.0, en ook de
       2.0-overlap van -2.2vw: de afgeronde hoeken tonen dan de laatste sectie erachter in plaats van een
       losse strook; de bovenste 2.2vw van de laatste sectie is padding (gemeten op duurzaam en een blog,
       review run 7, bevinding 7; bewust zo gelaten). === */.bc-cm.bc30>.bc-site-footer--max{box-shadow:0 -48px 0 var(--bc30-grond);clip-path:inset(-1px 0 0)}body:has(.bc-cm.bc30) .bc-cm.bc-wp-chrome--footer.bc30-chrome{margin-top:0;background:var(--bc30-grond)}/* === Print (review run 7, bevinding 12): de header plakt niet, de USP-balk en de footerkop vallen weg, de
   footer drukt donkere tekst op wit (Chrome drukt standaard geen achtergronden). === */@media print{
  .bc-cm:is(.bc30,.bc30-chrome) .bc-site-header{position:static!important}
  :is(.bc30,.bc30-chrome):where(.bc-cm) .bc-usp-strip,.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max :is(.bc-sf__head,.bc-sf__insta){display:none}
  .bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max,.bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max .bc-sf__bottom{background:none;border-radius:0;box-shadow:none}
  .bc-cm:is(.bc30,.bc30-chrome) .bc-site-footer--max :is(h5,p,li,a,span,small,.bc-sf__bottom-wrap){color:#000!important}
}