/* ============================================================
   Buiten Buddies website styles
   Layered on top of tokens.css — mobile-first, WCAG 2.2 AA
   ============================================================ */

/* ---------- A11y: skip link ---------- */
.bb-skip {
  position: fixed; top: -100px; left: 12px; z-index: 200;
  background: var(--bb-green-dark); color: #fff;
  padding: 10px 16px; border-radius: 10px;
  font: 600 14px var(--font-body); text-decoration: none;
  transition: top var(--t-fast) var(--ease-out);
}
.bb-skip:focus { top: 12px; color: #fff; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .bb-fade { opacity: 1 !important; transform: none !important; }
  .bb-hero__photo { animation: none !important; }
}
html.bb-rm-force *, html.bb-rm-force *::before, html.bb-rm-force *::after {
  animation-duration: 0.001ms !important;
  transition-duration: 0.001ms !important;
}
html.bb-rm-force .bb-fade { opacity: 1 !important; transform: none !important; }
html.bb-rm-force .bb-hero__photo { animation: none !important; }

/* ---------- Layout helpers ---------- */
.bb-page { min-height: 100vh; background: var(--bg-page); overflow-x: clip; }
.bb-container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 720px) { .bb-container { padding: 0 32px; } }

.bb-section { padding: 36px 0; position: relative; }
@media (min-width: 720px) { .bb-section { padding: 52px 0; } }
@media (min-width: 1024px) { .bb-section { padding: 68px 0; } }

.bb-section--alt  { background: var(--bg-alt); }
.bb-section--cream{ background: var(--bg-page); }
.bb-section--soft { background: #F1F7F0; }
.bb-section--dark { background: var(--bb-green-dark); color: var(--bb-white); }
.bb-section--dark h1, .bb-section--dark h2, .bb-section--dark h3 { color: var(--bb-white); }

/* Section eyebrow */
.bb-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px var(--font-body); letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--bb-green-forest);
  padding: 6px 14px; border-radius: 999px;
  background: rgba(19, 86, 55, 0.08);
  margin-bottom: 16px;
}
.bb-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bb-green-forest); }
.bb-section--dark .bb-eyebrow { background: rgba(255,255,255,0.12); color: var(--bb-yellow); }
.bb-section--dark .bb-eyebrow .dot { background: var(--bb-yellow); }

/* ---------- Scroll fade-up ---------- */
.bb-fade {
  opacity: 0; transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  will-change: opacity, transform;
}
.bb-fade.in { opacity: 1; transform: translateY(0); }

/* ============================================================
   HEADER
   ============================================================ */
.bb-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 253, 245, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.bb-header.scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--border-card);
  box-shadow: var(--shadow-sticky);
}
.bb-header__inner {
  display: flex; align-items: center; gap: 16px;
  max-width: var(--content-max); margin: 0 auto;
  /* Minder ruimte boven en onder, meer ruimte voor het logo. De balkhoogte blijft
     gelijk aan die van v6.0 doordat de oude hoogte hier als minimum vastligt. */
  padding: 6px 20px; min-height: 70px;
}
@media (min-width: 561px) and (max-width: 719px) { .bb-header__inner { min-height: 68px; } }
@media (min-width: 720px) { .bb-header__inner { padding: 6px 32px; gap: 24px; min-height: 72px; } }
/* Smalle telefoons, waaronder de voorkant van een opvouwbaar toestel: minder
   ruimte tussen de onderdelen, zodat het logo, de knop en het menu alle drie
   volledig binnen het scherm blijven. */
@media (max-width: 420px) { .bb-header__inner { gap: 8px; padding: 6px 12px; } }
@media (max-width: 340px) { .bb-header__inner { gap: 6px; padding: 6px 10px; } }

.bb-header__brand { display: flex; align-items: center; gap: 20px; text-decoration: none; min-height: 44px; flex: 0 1 auto; min-width: 0; }
.bb-header__brand:hover { color: inherit; }
.bb-header__brand img { width: 56px; height: 56px; border-radius: 10px; display: block; flex: none; }
.bb-header__brand .wm {
  font: 600 17px/1 var(--font-display); color: var(--bb-green-dark);
  letter-spacing: -0.01em; min-width: 0;
}
/* Op de smalste schermen, zoals de voorkant van een opvouwbare telefoon, krijgt
   het woordmerk minder ruimte zodat het logo, de knop en het hamburgermenu alle
   drie volledig in beeld blijven. */
@media (max-width: 400px) {
  .bb-header__brand img { width: 46px; height: 46px; }
  .bb-header__brand { gap: 12px; }
  .bb-header__brand .wm { font-size: 15px; line-height: 1.05; }
}
/* Onder deze breedte passen het woordmerk, de knop en het menu niet meer naast
   elkaar. Het logo blijft staan, dat spreekt voor zich. */
@media (max-width: 390px) {
  .bb-header__brand .wm { display: none; }
  .bb-header__brand img { width: 44px; height: 44px; }
}
/* Vanaf de breedte waarop het volledige menu verschijnt, mag het woordmerk niet
   meer krimpen of afbreken: daar is de ruimte berekend op één regel. */
@media (min-width: 1140px) {
  .bb-header__brand { flex: none; }
  .bb-header__brand .wm { white-space: nowrap; }
}
@media (min-width: 720px) {
  .bb-header__brand img { width: 60px; height: 60px; }
  .bb-header__brand .wm { font-size: 19px; }
}

.bb-header__spacer { flex: 1; }

.bb-header__nav {
  display: none; gap: 22px;
}
/* Het menu staat in het font van Buiten Buddies en is daarmee breder dan
   voorheen. De balk toont de volledige navigatie dus pas vanaf 1140 px; daaronder
   blijft het hamburgermenu staan. */
@media (min-width: 1140px) { .bb-header__nav { display: flex; } }
@media (min-width: 1140px) and (max-width: 1259px) { .bb-header__nav { gap: 15px; } }

.bb-header__nav a {
  position: relative; padding: 8px 2px; white-space: nowrap; flex: none;
  font: 600 17px var(--font-display); color: var(--bb-green-olijf);
  text-decoration: none; transition: color var(--t-fast) var(--ease-out);
}
.bb-header__nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 3px;
  background: var(--bb-green-light);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms var(--ease-out);
}
.bb-header__nav a:hover { color: var(--bb-green-dark); }
.bb-header__nav a:hover::after { transform: scaleX(1); }
/* Alleen de pagina waar je bent staat in het donkerste groen. */
.bb-header__nav a.active { font-weight: 700; color: var(--bb-green-dark); }
.bb-header__nav a.active::after {
  transform: scaleX(1);
  background: var(--bb-green-forest);
}

/* Mobile menu */
.bb-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; min-width: 44px; flex: none; border-radius: 12px;
  background: transparent; border: 1.5px solid rgba(6,69,48,0.18);
  color: var(--bb-green-dark); cursor: pointer;
}
@media (min-width: 1140px) { .bb-burger { display: none; } }
.bb-burger svg { width: 22px; height: 22px; }

.bb-mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--bb-cream);
  display: flex; flex-direction: column;
  padding: 24px 20px 32px;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(-100%);
  visibility: hidden; pointer-events: none;
  transition: transform 320ms var(--ease-out), visibility 320ms linear;
}
.bb-mobile-menu.open { transform: translateY(0); visibility: visible; pointer-events: auto; }
.bb-mobile-menu__top { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; }
.bb-mobile-menu__top .bb-header__brand { flex: 1; }
.bb-mobile-menu nav { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.bb-mobile-menu nav a {
  font: 600 22px var(--font-display); color: var(--bb-green-dark);
  text-decoration: none; padding: 14px 4px;
  border-bottom: 1px solid rgba(6, 69, 48, 0.08);
}
.bb-mobile-menu nav a.active { color: var(--bb-green-forest); }
.bb-mobile-menu__foot { padding-top: 22px; }
@media (prefers-reduced-motion: reduce) { .bb-mobile-menu { transition: none; } }

/* ============================================================
   BUTTONS
   ============================================================ */
.bb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 18px/1 var(--font-display);
  padding: 15px 26px; min-height: 52px;
  border-radius: var(--radius-pill);
  border: 0; cursor: pointer; text-decoration: none;
  letter-spacing: 0.005em;
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast),
              box-shadow var(--t-fast);
}
.bb-btn:active { transform: scale(0.97); }
.bb-btn--primary {
  background: var(--bb-green-forest); color: var(--bb-white);
  box-shadow: 0 4px 14px rgba(19, 86, 55, 0.25);
}
.bb-btn--primary:hover {
  background: var(--bb-green-dark); color: #fff;
  box-shadow: 0 6px 20px rgba(6, 69, 48, 0.32);
}
.bb-btn--secondary {
  background: transparent; color: var(--bb-green-dark);
  border: 2px solid var(--bb-green-dark);
}
.bb-btn--secondary:hover {
  background: var(--bb-green-light); border-color: var(--bb-green-light);
  color: var(--bb-green-dark);
}
.bb-btn--ghost {
  background: transparent; color: var(--bb-white);
  border: 2px solid rgba(255,255,255,0.6);
}
.bb-btn--ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.bb-btn--yellow {
  background: var(--bb-yellow); color: var(--bb-green-dark);
  box-shadow: 0 4px 14px rgba(250, 215, 40, 0.4);
}
.bb-btn--yellow:hover { background: #FAE56F; color: var(--bb-green-dark); }
.bb-btn--sm { font-size: 15px; padding: 10px 18px; min-height: 44px; white-space: nowrap; }
/* Mobiel iets compacter, maar nog altijd groter dan voorheen. */
@media (max-width: 720px) {
  .bb-btn { font-size: 17px; padding: 14px 22px; min-height: 50px; }
}
/* Uitzonderingen: knoppen in de navigatiebalk, de footer, de cookiemelding en in
   banners houden hun eigen maat. Alleen losstaande knoppen bij artikelen en
   formulieren zijn vergroot. */
.bb-footer .bb-btn,
.bb-cookie__btn,
.bb-faq__cta .bb-btn,
.bb-md__perscard .bb-btn,
.bb-legal__contact .bb-btn {
  font-size: 16px; padding: 14px 24px; min-height: 48px;
}
@media (max-width: 720px) {
  .bb-footer .bb-btn,
  .bb-cookie__btn,
  .bb-faq__cta .bb-btn,
  .bb-md__perscard .bb-btn,
  .bb-legal__contact .bb-btn {
    font-size: 15px; padding: 13px 20px; min-height: 46px;
  }
}
@media (max-width: 480px) { .bb-header__inner .bb-btn--sm { padding: 10px 13px; font-size: 14px; } }
/* Op telefoons krijgt de knop juist meer breedte: de ruimte tussen het woordmerk
   en het hamburgermenu gaat naar de aanmeldknop, zodat die goed te raken blijft. */
@media (max-width: 560px) {
  .bb-header__inner .bb-btn--sm { flex: 1 1 42%; min-width: 120px; justify-content: center; padding: 11px 14px; font-size: 15px; min-height: 46px; }
  /* De merknaam mag nooit onder zijn eigen minimum krimpen: de knop pakt alleen
     wat er daarna nog over is. Het woordmerk valt zelf over twee regels als het
     smal wordt, zodat het altijd binnen het logoblok blijft. */
  .bb-header__inner .bb-header__brand { flex: 0 1 auto; min-width: min-content; }
  .bb-header__spacer { display: none; }
}
/* Op de smalste toestellen krijgt de aanmeldknop een lagere ondergrens, zodat het
   hamburgermenu er altijd naast past en volledig aan te tikken blijft. De knop is
   dan zo breed als zijn tekst, in plaats van een vast aandeel van de balk. */
@media (max-width: 420px) {
  .bb-header__inner .bb-btn--sm { flex: 0 0 auto; min-width: 0; padding: 11px 16px; font-size: 15px; margin-left: auto; }
}
@media (max-width: 360px) {
  .bb-header__inner .bb-btn--sm { padding: 11px 13px; font-size: 14px; }
}
.bb-btn--full { width: 100%; }
.bb-btn svg { width: 18px; height: 18px; }

/* ============================================================
   HERO
   ============================================================ */
.bb-hero {
  position: relative; overflow: hidden;
  padding: 32px 0 36px; /* bottom matched to section padding for equal inter-block gaps */
  /* Subtiele tweekleurige groene wash. Sterkst in de linkerbovenhoek voor
     afscheiding van de header, met zachte radiale echo's rechtsboven en
     linksonder en een lichte groene 'horizon' bovenaan de sectie. */
  background:
    /* De washes hierboven faden onderaan uit naar crème, zodat de hero naadloos
       overgaat in het introblok dat op crème begint. */
    linear-gradient(180deg,
      rgba(253, 253, 245, 0) 58%,
      var(--bg-page) 100%),
    radial-gradient(ellipse 720px 560px at -6% -8%,
      rgba(111, 181, 97, 0.32) 0%,     /* groen-mid #6FB561 — kern */
      rgba(141, 187, 78, 0.16) 38%,    /* groen-logo #8DBB4E — uitwaaiering */
      transparent 64%),
    radial-gradient(circle 540px at 108% -10%,
      rgba(141, 187, 78, 0.20) 0%,
      transparent 62%),
    radial-gradient(circle 500px at -8% 108%,
      rgba(232, 244, 236, 0.70) 0%,    /* mint, koele counterbalance */
      transparent 60%),
    linear-gradient(180deg,
      rgba(141, 187, 78, 0.06) 0%,     /* fijne groene horizon onder header */
      transparent 24%),
    var(--bb-cream);
}
@media (min-width: 720px) { .bb-hero { padding: 56px 0 52px; } }
@media (min-width: 1024px) { .bb-hero { padding: 64px 0 68px; } }
/* Op een laptop of groter scherm loopt de hero door tot onder de onderrand van het
   venster, zodat de bovenkant van het introblok precies op de fold ligt en de kop
   ongeveer 30 px eronder begint. De header telt 73 px mee. */
@media (min-width: 900px) and (min-height: 600px) { .bb-hero { min-height: calc(100vh - 73px); } }

/* Pseudo-elementen niet meer nodig — alles zit in de background hierboven */
.bb-hero::before, .bb-hero::after { content: none; }

.bb-hero__inner { position: relative; z-index: 1; }

.bb-hero__grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) {
  .bb-hero__grid { grid-template-columns: 1.05fr 1fr; gap: 64px; }
}

.bb-hero__pill {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 15px var(--font-body); color: var(--bb-green-dark);
  background: var(--bb-white);
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  border: 1.5px solid var(--border-card);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  margin-bottom: 20px;
}
.bb-hero__pill .badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bb-yellow); color: var(--bb-green-dark);
  font-size: 14px;
}

.bb-hero h1 {
  font-size: clamp(38px, 9vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  color: var(--bb-green-dark);
}
.bb-hero__title {
  /* Words slide & fade in one by one to give a hand-written feel */
  display: block;
}
.bb-hero__title-line {
  display: block;
}
.bb-hero__title-line--2 {
  padding-left: 0.6em; /* speelse inspring voor 'beleef echt.' */
}
@media (min-width: 720px) {
  .bb-hero__title-line--2 { padding-left: 0.9em; }
}
.bb-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  animation: bbWordIn 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
  white-space: pre;
}
.bb-word--accent {
  font-family: var(--font-hand);
  font-weight: 400;
  color: var(--bb-green-forest);
  font-size: 0.78em;
  margin-left: 0.04em;
  /* Hand-written reveal: clip from left to right while fading in */
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transform: translateY(-0.04em) rotate(-2deg);
  animation: bbWriteIn 1100ms cubic-bezier(0.65, 0.05, 0.36, 1) both;
}
@keyframes bbWordIn {
  from { opacity: 0; transform: translateY(0.35em); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bbWriteIn {
  0%   { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(-0.04em) rotate(-2deg) scale(0.96); }
  15%  { opacity: 1; }
  100% { opacity: 1; clip-path: inset(0 0% 0 0);   transform: translateY(-0.05em) rotate(-2deg) scale(1); }
}
html.bb-rm-force .bb-word,
@media (prefers-reduced-motion: reduce) {
  .bb-word, .bb-word--accent {
    opacity: 1 !important; transform: none !important;
    clip-path: none !important; animation: none !important;
  }
}

.bb-hero__lead {
  font: 400 var(--fs-lead)/1.5 var(--font-body);
  color: var(--bb-ink-soft);
  max-width: 560px;
  margin: 0 0 28px;
}

.bb-hero__cta-row {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px;
}
.bb-hero__cta-row .bb-btn { flex: 1; min-width: 0; }
@media (min-width: 480px) { .bb-hero__cta-row .bb-btn { flex: 0 0 auto; } }

.bb-hero__trust {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  font: 500 15px var(--font-body);
  color: var(--bb-ink-soft);
}
.bb-hero__trust .sep {
  display: inline-block; width: 4px; height: 4px;
  border-radius: 50%; background: rgba(6,69,48,0.3);
}
.bb-hero__trust strong {
  color: var(--bb-green-dark); font-weight: 700;
}

/* Hero collage — 5-cirkel, mobile-first, speels overlappend */
.bb-hero__collage {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 480px;
  margin: 0 auto;
}
@media (min-width: 980px) {
  .bb-hero__collage { max-width: 560px; margin-right: 0; }
}

.bb-hero__photo {
  position: absolute;
  border-radius: 50%;
  border: 4px solid var(--bb-green-light);
  overflow: hidden;
  background: var(--bb-cream);
  box-shadow: 0 10px 30px rgba(6, 7, 7, 0.14);
  margin: 0;
  transition: border-color 700ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow    700ms cubic-bezier(0.4, 0, 0.2, 1),
              z-index       0ms 200ms;
}
.bb-slot-layer {
  position: absolute; inset: 0;
  display: block;
}
.bb-slot-layer > img,
.bb-slot-layer > .bb-hero__logo-tile {
  width: 100%; height: 100%; display: block;
}
.bb-slot-layer > img { object-fit: cover; }
.bb-slot-layer--in  { animation: bbLayerIn  1500ms cubic-bezier(0.4, 0, 0.2, 1) both; }
.bb-slot-layer--out { animation: bbLayerOut 1500ms cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes bbLayerIn {
  from { opacity: 0; transform: scale(1.025); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes bbLayerOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.985); }
}
html.bb-rm-force .bb-slot-layer--in,
html.bb-rm-force .bb-slot-layer--out { animation: none !important; opacity: 1; transform: none; }
html.bb-rm-force .bb-slot-layer--out { display: none; }

.bb-hero__logo-tile {
  background: var(--bb-cream);
  display: flex; align-items: center; justify-content: center;
  /* De cirkel snijdt de hoeken van het vierkante logo weg: een vierkant past pas
     volledig in een cirkel als het 71% van de doorsnede is. Met 17% ruimte rondom
     staat het logo daar ruim binnen, in elke bolmaat, met minimaal 18 px lucht. */
  padding: max(18px, 17%);
}
.bb-hero__logo-tile img {
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(6, 69, 48, 0.18));
  width: 100%; height: 100%;
}

/* ----- Posities: 5 cirkels in 5 maten.
       s1 is de PRIMARY (logo-thuisbasis) — grootst en dominant,
       met meer ruimte om zich heen (minder overlap met de rest).
       s5 is de MIDDLE HUB — ligt altijd over s1 heen.
       has-logo gaat altijd over alles heen. ----- */
.bb-hero__photo--s1 { /* PRIMARY — top-left, dominant, +20% losser, 15% hoger dan rest */
  top: -4%;   left: 0%;
  width: 66%; aspect-ratio: 1;
  z-index: 5;
  animation: bbFloatA 7s ease-in-out infinite;
}
.bb-hero__photo--s2 { /* top-right — +15% groter, eigen ritme, iets lager geplaatst */
  top: 14%;   right: 0%;
  width: 50%; aspect-ratio: 1;
  z-index: 3;
  animation: bbFloatB 5.4s ease-in-out infinite -0.5s;
}
.bb-hero__photo--s3 { /* bottom-right */
  bottom: 0%; right: 2%;
  width: 40%; aspect-ratio: 1;
  z-index: 4;
  animation: bbFloatC 7.5s ease-in-out infinite -2.4s;
}
.bb-hero__photo--s4 { /* bottom-left */
  bottom: 2%; left: 2%;
  width: 36%; aspect-ratio: 1;
  z-index: 4;
  animation: bbFloatD 6.8s ease-in-out infinite -3.6s;
}
.bb-hero__photo--s5 { /* MIDDLE HUB — 5% kleiner, naar bottom-right verschoven, altijd over s1
                        Beweegt asymmetrisch — meer naar beneden dan omhoog. */
  top: 44%;   left: 34%;
  width: 46%; aspect-ratio: 1;
  z-index: 8; /* boven s1 (z 5), onder has-logo (z 12) */
  animation: bbFloatE 8.2s ease-in-out infinite -1.8s;
}

/* Wanneer een slot het logo bevat:
   — z-index naar absolute voorgrond (altijd boven s5)
   — ring wordt donker groen voor extra pop
   — schaduw iets nadrukkelijker */
.bb-hero__photo--has-logo {
  z-index: 12 !important;
  border-color: var(--bb-green-dark);
  box-shadow: 0 14px 38px rgba(6, 69, 48, 0.28);
}

/* Eigen bouncepatroon per cirkel — elk z'n eigen ritme & richting.
   s1 anchor (rustig), s2 grootste afstand + tegengesteld, s5 ~10% meer dan corners. */
@keyframes bbFloatA { /* s1 — rustig, up-left */
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50%      { transform: translate(-10px, -22px) rotate(-1.2deg); }
}
@keyframes bbFloatB { /* s2 — GROOTSTE afstand, down-right (tegengesteld) */
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50%      { transform: translate(26px, 34px) rotate(-2.5deg); }
}
@keyframes bbFloatC { /* s3 — down-left */
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50%      { transform: translate(-16px, 18px) rotate(-1.5deg); }
}
@keyframes bbFloatD { /* s4 — up-right */
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50%      { transform: translate(18px, -16px) rotate(2deg); }
}
@keyframes bbFloatE { /* s5 — asymmetrisch: kort omhoog (12px), lang en ver omlaag (28px). */
  0%, 100% { transform: translate(0, 0) rotate(0); }
  35%      { transform: translate(-12px, -12px) rotate(1.5deg); }   /* korte ademhaling omhoog */
  75%      { transform: translate(10px, 28px) rotate(-1.7deg); }    /* zwaardere dip omlaag */
}
html.bb-rm-force .bb-hero__photo { animation: none !important; }

/* Decorative yellow stars in hero — removed per design feedback */
.bb-hero__star { display: none !important; }

/* ---------- Introblok onder de hero ----------
   De achtergrond loopt van crème (waar de hero eindigt) naar mint (waar de
   infographics beginnen), met een zachte groene gloed achter de bol. Zo zit er
   geen harde kleurgrens tussen de drie blokken. */
.bb-intro { padding: 30px 0 32px; margin-top: -1px; background: radial-gradient(ellipse 52% 62% at 88% 40%, rgba(141,187,78,0.15) 0%, transparent 62%), linear-gradient(180deg, var(--bg-page) 0%, var(--bg-page) 14%, #F4F8F2 52%, var(--bg-alt) 88%, var(--bg-alt) 100%); }
@media (min-width: 1024px) { .bb-intro { padding: 30px 0 44px; } }
.bb-intro__grid { display: grid; gap: 30px; align-items: center; grid-template-columns: minmax(0, 1fr) 186px; }
.bb-intro__kop { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 12px; color: var(--bb-green-dark); }
.bb-intro__p { font-size: var(--fs-lead); line-height: 1.55; color: var(--bb-ink-soft); margin: 0; max-width: 62ch; text-wrap: pretty; }
.bb-intro__p b { color: var(--bb-green-dark); }
.bb-intro__streep { text-decoration: underline; text-decoration-color: var(--bb-green-light); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.bb-intro__hand { font-family: var(--font-hand); font-size: clamp(20px, 2.2vw, 25px); line-height: 1.4; color: var(--bb-green-forest); margin: 18px 0 0; max-width: 58ch; }
.bb-intro__w { display: inline-block; white-space: pre; }
.bb-intro__hand.is-schrijf .bb-intro__w { clip-path: inset(0 100% 0 0); opacity: 0; animation: bbSchrijf 480ms cubic-bezier(0.65, 0.05, 0.36, 1) both; }
@keyframes bbSchrijf { from { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateY(0.04em); } to { clip-path: inset(0 0 0 0); opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bb-intro__hand.is-schrijf .bb-intro__w { clip-path: none; opacity: 1; animation: none; } }
html.bb-rm-force .bb-intro__hand.is-schrijf .bb-intro__w { clip-path: none; opacity: 1; animation: none; }
.bb-intro__bol { position: relative; width: 186px; height: 186px; border-radius: 50%; border: 6px solid var(--bb-green-dark); background: var(--bb-cream); overflow: hidden; box-shadow: 0 14px 34px rgba(6, 69, 48, 0.2); justify-self: end; }
.bb-intro__slot { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms ease; display: flex; align-items: center; justify-content: center; }
.bb-intro__slot.is-aan { opacity: 1; }
.bb-intro__slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-intro__slot.is-logo { background: var(--bb-cream); padding: 14.5%; box-sizing: border-box; }
.bb-intro__slot.is-logo img { object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .bb-intro__slot { transition: none; } }
@media (max-width: 820px) {
  .bb-intro__grid { grid-template-columns: 1fr; gap: 26px; }
  .bb-intro__bol { justify-self: center; width: min(50vw, 320px); height: min(50vw, 320px); }
}

/* ----- Minimal hero variant ----- */
.bb-hero-min { text-align: center; max-width: 920px; margin: 0 auto; }
.bb-hero-min__title { display: block; } /* hero-title styles cover the rest */
.bb-hero-min__lead { margin-left: auto; margin-right: auto; }
.bb-hero-min__ctas { justify-content: center; }
.bb-hero-min__banner {
  position: relative;
  margin-top: 40px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  box-shadow: 0 16px 48px rgba(6, 7, 7, 0.16);
}
.bb-hero-min__banner > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-hero-min__overlay {
  position: absolute;
  right: 5%; bottom: -8%;
  width: 24%; max-width: 200px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 5px solid var(--bb-cream);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  margin: 0;
}
.bb-hero-min__overlay img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 720px) {
  .bb-hero-min__banner { aspect-ratio: 4 / 3; }
  .bb-hero-min__overlay { right: 4%; bottom: -12%; width: 32%; }
}

/* ============================================================
   STATS BAND
   ============================================================ */
/* ============================================================
   STATS INFOGRAPHIC
   ============================================================ */
.bb-statfig-wrap { --dial: 168px; --cgap: 24px; }
@media (min-width: 720px) { .bb-statfig-wrap { --dial: 192px; } }
.bb-statfig { position: relative; display: grid; grid-template-columns: 1fr; gap: 32px; text-align: center; }
@media (min-width: 720px) { .bb-statfig { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.bb-statfig__item { position: relative; z-index: 1; opacity: 0.45; transition: opacity 0.8s var(--ease-out); }
.bb-statfig__item.is-on { opacity: 1; }
/* Voetbal die na elke voltooide cirkel door de lucht naar de volgende vliegt. */
.bb-statfig__ball { display: none; }
@media (min-width: 720px) {
  .bb-statfig__ball {
    display: block; position: absolute; top: calc(0.05 * var(--dial) + 4px); width: 81px; height: 81px;
    z-index: 2; pointer-events: none;
    filter: drop-shadow(0 3px 5px rgba(6, 69, 48, 0.22));
    transform: translate(-50%, -100%);
  }
}
.bb-statfig__ball svg { display: block; }
.bb-statfig__ball.ball-in { left: calc(16.666% - var(--cgap) / 3); animation: bbBallIn 0.95s cubic-bezier(0.3, 0, 0.4, 1) both; }
.bb-statfig__ball.ball-p1 { left: calc(16.666% - var(--cgap) / 3); transform: translate(-50%, -100%); }
.bb-statfig__ball.ball-out { left: 118%; animation: bbBallOut 1s cubic-bezier(0.4, 0, 0.75, 1) both; }
@keyframes bbBallIn {
  0%   { left: -14%; transform: translate(-50%, calc(-100% - 130px)) rotate(-520deg); opacity: 0; }
  10%  { opacity: 1; }
  58%  { left: calc(16.666% - var(--cgap) / 3); transform: translate(-50%, -100%) rotate(0deg); }
  72%  { transform: translate(-50%, calc(-100% - 30px)) rotate(46deg); }
  86%  { transform: translate(-50%, -100%) rotate(74deg); }
  93%  { transform: translate(-50%, calc(-100% - 9px)) rotate(84deg); }
  100% { left: calc(16.666% - var(--cgap) / 3); transform: translate(-50%, -100%) rotate(90deg); opacity: 1; }
}
@keyframes bbBallOut {
  0%   { left: calc(83.333% + var(--cgap) / 3); transform: translate(-50%, -100%) rotate(0deg); opacity: 1; }
  28%  { transform: translate(-50%, calc(-100% - 130px)) rotate(260deg); }
  100% { left: 118%; transform: translate(-50%, calc(-100% + 30px)) rotate(760deg); opacity: 1; }
}
.bb-statfig__ball.ball-p2 { left: 50%;     animation: bbBallFly2 1.25s cubic-bezier(0.35, 0, 0.5, 1) both; }
.bb-statfig__ball.ball-p3 { left: calc(83.333% + var(--cgap) / 3); animation: bbBallFly3 1.25s cubic-bezier(0.35, 0, 0.5, 1) both; }
@keyframes bbBallFly2 {
  0%   { left: calc(16.666% - var(--cgap) / 3); transform: translate(-50%, -100%) rotate(0deg); }
  45%  { transform: translate(-50%, calc(-100% - 118px)) rotate(320deg); }
  78%  { left: 50%; transform: translate(-50%, -100%) rotate(600deg); }
  89%  { transform: translate(-50%, calc(-100% - 22px)) rotate(645deg); }
  100% { left: 50%; transform: translate(-50%, -100%) rotate(670deg); }
}
@keyframes bbBallFly3 {
  0%   { left: 50%; transform: translate(-50%, -100%) rotate(0deg); }
  45%  { transform: translate(-50%, calc(-100% - 118px)) rotate(320deg); }
  78%  { left: calc(83.333% + var(--cgap) / 3); transform: translate(-50%, -100%) rotate(600deg); }
  89%  { transform: translate(-50%, calc(-100% - 22px)) rotate(645deg); }
  100% { left: calc(83.333% + var(--cgap) / 3); transform: translate(-50%, -100%) rotate(670deg); }
}
.bb-statfig__dial { position: relative; width: var(--dial); height: var(--dial); margin: 0 auto 16px; }
.bb-statfig__dial::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--bb-white); box-shadow: var(--shadow-card); }
.bb-statfig__gauge { position: relative; width: 100%; height: 100%; transform: rotate(-90deg); }
.bb-statfig__track { fill: none; stroke: rgba(19, 86, 55, 0.10); stroke-width: 5; }
.bb-statfig__ring { fill: none; stroke: var(--bb-green-light); stroke-width: 5; stroke-linecap: round; stroke-dashoffset: 339.3; transition: stroke-dashoffset 2.1s var(--ease-out); }
.bb-statfig__item.is-on .bb-statfig__ring { stroke-dashoffset: 0; }
.bb-statfig__inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.bb-statfig__icon { color: var(--bb-green-light); display: block; line-height: 0; }
.bb-statfig__num { font: 400 46px/1 var(--font-display); color: var(--bb-green-forest); letter-spacing: -0.02em; }
@media (min-width: 720px) { .bb-statfig__num { font-size: 52px; } }
.bb-statfig__label { font: 700 19px var(--font-body); color: var(--bb-green-dark); }
@media (min-width: 720px) { .bb-statfig__label { font-size: 20px; } }
/* Handtekening-regel schuift van links binnen, 1 s na de derde cirkel. */
.bb-statfig-wrap .bb-stats__sub { opacity: 0; transform: translateX(-30px) rotate(-1deg); }
.bb-statfig-wrap.step-4 .bb-stats__sub, .bb-statfig-wrap.step-5 .bb-stats__sub, .bb-statfig-wrap.step-6 .bb-stats__sub { animation: bbStatSubIn 1.1s var(--ease-out) 3.1s forwards; }
@keyframes bbStatSubIn {
  from { opacity: 0; transform: translateX(-30px) rotate(-1deg); }
  to   { opacity: 1; transform: translateX(0) rotate(-1deg); }
}
.bb-stats__sub {
  margin-top: 24px; text-align: center;
  font: 400 22px/1.3 var(--font-hand);
  color: var(--bb-green-forest);
  transform: rotate(-1deg);
}

/* ============================================================
   3-STEP EXPLAINER
   ============================================================ */
.bb-steps3 {
  display: grid; grid-template-columns: 1fr; gap: 20px;
  align-items: stretch;
}
@media (min-width: 720px) { .bb-steps3 { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.bb-step-card {
  position: relative;
  background: var(--bb-white);
  border-radius: var(--radius-lg);
  padding: 28px 24px 26px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 14px;
  transition: transform var(--t-base), box-shadow var(--t-base);
  overflow: hidden;
  height: 100%; /* vul de grid-rij, alle 3 cards even hoog */
}
.bb-step-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 4px; background: var(--bb-green-forest);
}
.bb-step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-h); }

.bb-step-card__num {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--bb-green-forest); color: var(--bb-white);
  display: inline-flex; align-items: center; justify-content: center;
  font: 400 26px/1 var(--font-display);
  position: relative;
}
.bb-step-card__num .bb-star-deco {
  position: absolute; top: -8px; right: -10px;
  color: var(--bb-yellow); width: 22px; height: 22px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
.bb-step-card h3 {
  margin: 0; font: 600 22px var(--font-display);
  color: var(--bb-green-dark);
}
.bb-step-card p {
  margin: 0; font-size: 18px; line-height: 1.55;
  color: var(--bb-ink);
}
.bb-step-card .quote {
  font-family: var(--font-hand);
  font-size: 19px;
  color: var(--bb-green-forest);
  padding-left: 12px;
  border-left: 3px solid var(--bb-green-light);
}

/* ============================================================
   MEDIA STRIP
   ============================================================ */
.bb-media-strip {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 12px 18px;
}
.bb-media-strip__label {
  display: block; text-align: center;
  font: 600 14px var(--font-body); letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--bb-muted);
  margin-bottom: 18px;
}
.bb-media-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--bb-white);
  border: 1.5px solid var(--border-card);
  font: 600 15px var(--font-body);
  color: var(--bb-green-dark);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.bb-media-pill:hover {
  transform: translateY(-2px);
  border-color: var(--bb-green-light);
  box-shadow: var(--shadow-card);
}
.bb-media-pill svg { width: 16px; height: 16px; color: var(--bb-green-forest); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.bb-testimonials {
  display: grid; grid-template-columns: 1fr; gap: 20px;
  align-items: stretch;
}
@media (min-width: 720px) { .bb-testimonials { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
/* FadeUp wrapper moet de volle gridrij vullen zodat de kaart erin even hoog wordt */
.bb-testimonials > .bb-fade { height: 100%; display: flex; }

.bb-quote-card {
  position: relative;
  background: var(--bb-white);
  border-radius: var(--radius-lg);
  padding: 32px 26px 24px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base);
  display: flex; flex-direction: column;
  width: 100%;
  height: 100%;
}
.bb-quote-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 4px; background: var(--bb-green-forest);
}
.bb-quote-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-h); }
.bb-quote-card .mark {
  position: absolute; top: 14px; right: 18px;
  font: 400 60px/1 var(--font-display);
  color: rgba(19, 86, 55, 0.12);
  pointer-events: none;
}
.bb-quote-card blockquote {
  margin: 0 0 18px;
  font: 400 20.5px/1.5 var(--font-hand);
  color: var(--bb-green-dark);
  flex: 1; /* pakt extra ruimte zodat de 'who'-footer onderaan landt */
}
.bb-quote-card .who {
  display: flex; align-items: center; gap: 12px;
  font: 600 16px var(--font-body); color: var(--bb-green-dark);
  border-top: 1px solid rgba(6, 69, 48, 0.08);
  padding-top: 14px;
  margin-top: auto;
}
.bb-quote-card .who .ph {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2.5px solid var(--bb-green-light);
  overflow: hidden;
  flex-shrink: 0;
}
.bb-quote-card .who .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bb-quote-card .who small {
  display: block; font-weight: 400; color: var(--bb-muted);
  font-size: 15px; margin-top: 2px;
}
/* Profielfoto bij de citaten (Lindsay en Charlie). Mirjam heeft geen foto,
   de lege kop houdt de citaattekst op dezelfde hoogte. */
.bb-quote-card__head { min-height: 64px; margin-bottom: 16px; }
.bb-quote-card__avatar { width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--bb-green-light); overflow: hidden; }
.bb-quote-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 720px) {
  .bb-quote-card__head { min-height: 88px; }
  .bb-quote-card__avatar { width: 88px; height: 88px; }
}

/* ============================================================
   AWARD BANNER — trophy + count-up + certificate + confetti
   Compacte horizontale banner, niet hoger dan ~210px content.
   ============================================================ */
.bb-award-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle 480px at 18% 30%, rgba(250, 215, 40, 0.16), transparent 65%),
    radial-gradient(circle 360px at 85% 80%, rgba(141, 187, 78, 0.18), transparent 60%),
    linear-gradient(125deg, var(--bb-green-dark) 0%, var(--bb-green-forest) 60%, #0E4830 100%);
  color: var(--bb-white);
  box-shadow:
    0 5px 12px  rgba(6, 69, 48, 0.20),
    0 18px 38px rgba(6, 69, 48, 0.30),
    0 28px 60px rgba(19, 86, 55, 0.20),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  padding: 24px 24px;
}
@media (min-width: 720px) { .bb-award-banner { padding: 28px 36px; } }

.bb-award-banner__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px 28px;
  align-items: center;
}
@media (min-width: 720px) {
  .bb-award-banner__grid {
    grid-template-columns: auto 1fr auto;
    gap: 32px;
  }
}

/* ---- Trofee ---- */
.bb-award-banner__trophy {
  display: flex; justify-content: center;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.35));
  /* Initial state — start in scale 0, pops in on view */
  transform: scale(0.4) rotate(-25deg);
  opacity: 0;
}
.bb-trophy {
  width: 100%;
  height: auto;
  display: block;
}

.bb-award-banner--in .bb-award-banner__trophy {
  animation: bbTrophyPop 900ms cubic-bezier(0.34, 1.56, 0.64, 1) 150ms forwards;
}
@keyframes bbTrophyPop {
  0%   { opacity: 0; transform: scale(0.4) rotate(-25deg); }
  55%  { opacity: 1; transform: scale(1.12) rotate(8deg); }
  80%  {            transform: scale(0.97) rotate(-3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* ---- Body ---- */
.bb-award-banner__body {
  /* Initial state — fade up after trofee */
  opacity: 0;
  transform: translateY(10px);
}
.bb-award-banner--in .bb-award-banner__body {
  animation: bbAwardBodyIn 700ms cubic-bezier(0.22, 1, 0.36, 1) 350ms forwards;
}
@keyframes bbAwardBodyIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bb-award-banner__body .bb-eyebrow {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  margin-bottom: 10px;
}
.bb-award-banner__body .bb-eyebrow .dot { background: var(--bb-green-light); }

.bb-award-banner__body h3 {
  margin: 0 0 6px;
  color: #fff;
  font: 700 22px/1.2 var(--font-display);
  letter-spacing: -0.01em;
}
@media (min-width: 720px) { .bb-award-banner__body h3 { font-size: 26px; } }
@media (min-width: 1024px) { .bb-award-banner__body h3 { font-size: 30px; } }

.bb-award-banner__count {
  color: var(--bb-yellow);
  font-variant-numeric: tabular-nums;
}
.bb-award-banner__body p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}
@media (min-width: 720px) { .bb-award-banner__body p { font-size: 16px; } }

.bb-award-banner__partner {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px 8px 14px;
  background: rgba(255, 255, 255, 0.98);
  color: var(--bb-green-dark);
  border-radius: 999px;
  font: 600 14px var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  max-width: 100%;
}
.bb-award-banner__partner img {
  height: 32px;
  width: auto;
  display: block;
}
@media (min-width: 720px) {
  .bb-award-banner__partner img { height: 36px; }
}

/* ---- Certificate thumbnail ---- */
.bb-award-banner__cert {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  width: 120px;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  transform: rotate(3deg) translateX(40px);
  opacity: 0;
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
  align-self: center;
  justify-self: center;
}
@media (min-width: 720px) {
  .bb-award-banner__cert { width: 110px; justify-self: end; }
}
@media (min-width: 1024px) { .bb-award-banner__cert { width: 132px; } }

.bb-award-banner__cert img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.bb-award-banner__cert-cta {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 8px;
  background: rgba(6, 69, 48, 0.92);
  color: #fff;
  font: 600 13.5px var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bb-award-banner__cert:hover {
  transform: rotate(0deg) translateX(0) scale(1.04);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.36);
}
.bb-award-banner--in .bb-award-banner__cert {
  animation: bbCertSlideIn 800ms cubic-bezier(0.34, 1.45, 0.64, 1) 550ms forwards;
}
@keyframes bbCertSlideIn {
  0%   { opacity: 0; transform: rotate(8deg) translateX(60px) scale(0.85); }
  60%  { opacity: 1; transform: rotate(-2deg) translateX(-6px) scale(1.05); }
  100% { opacity: 1; transform: rotate(3deg) translateX(0) scale(1); }
}
@media (min-width: 720px) {
  .bb-award-banner__cert:hover { transform: rotate(0deg) translateX(0) scale(1.04); }
}

/* ---- Confetti canvas — eenmalig 7s burst ---- */
.bb-confetti-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---- Trofee-stack: bokaal morpht na 3s naar BB-logo in groene cirkel ---- */
.bb-trophy-stack {
  position: relative;
  display: block;
  width: 110px;
  aspect-ratio: 140 / 175;
}
@media (min-width: 720px)  { .bb-trophy-stack { width: 130px; } }
@media (min-width: 1024px) { .bb-trophy-stack { width: 150px; } }

.bb-trophy-stack__trophy {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.bb-trophy-stack__trophy .bb-trophy {
  width: 100%;
  height: auto;
  display: block;
}
.bb-trophy-stack__trophy {
  opacity: 1;
  transform: scale(1) rotate(0);
  filter: blur(0);
  transition:
    opacity   1100ms cubic-bezier(0.55, 0, 0.55, 0.2),
    transform 1500ms cubic-bezier(0.55, 0, 0.55, 0.2),
    filter    1100ms ease;
}

/* Het BB-logo komt in een eigen cirkelframe — wit, met lichtgroene rand,
   conform het signatuur-ontwerpelement van Buiten Buddies. */
.bb-trophy-stack__logo-frame {
  position: absolute;
  top: 50%; left: 50%;
  width: 110%;            /* iets groter dan de bokaal-doos voor zichtbaarheid */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 4px solid var(--bb-green-light);
  background: #fff;
  box-shadow: 0 12px 28px rgba(6, 7, 7, 0.22);
  /* Ook hier is de lijst rond: het logo krijgt daarom ruim een zesde van de
     doorsnede aan ruimte, zodat de hoeken vrij blijven van de rand. */
  padding: max(20px, 17%);
  display: flex; align-items: center; justify-content: center;
  /* Initial state — onzichtbaar tot morph triggert */
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4) rotate(40deg);
  filter: blur(10px);
  transition:
    opacity   1500ms cubic-bezier(0.22, 1, 0.36, 1)         400ms,
    transform 1700ms cubic-bezier(0.34, 1.45, 0.64, 1)      400ms,
    filter    1200ms ease                                   400ms;
}
.bb-trophy-stack__logo-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.bb-trophy-stack__flash {
  position: absolute;
  top: 50%; left: 50%;
  width: 120%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(255, 245, 200, 0.95) 0%,
    rgba(250, 215, 40, 0.45) 35%,
    transparent 70%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
  pointer-events: none;
}

/* Morphed state */
.bb-award-banner__trophy.is-morphed .bb-trophy-stack__trophy {
  opacity: 0;
  transform: scale(0.28) rotate(-30deg);
  filter: blur(10px);
}
.bb-award-banner__trophy.is-morphed .bb-trophy-stack__logo-frame {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0);
  filter: blur(0);
}
.bb-award-banner__trophy.is-morphed .bb-trophy-stack__flash {
  animation: bbMorphFlash 1100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes bbMorphFlash {
  0%   { opacity: 0;    transform: translate(-50%, -50%) scale(0.4); }
  35%  { opacity: 0.95; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(1.55); }
}

html.bb-rm-force .bb-trophy-stack__trophy,
html.bb-rm-force .bb-trophy-stack__logo-frame,
html.bb-rm-force .bb-trophy-stack__flash {
  transition: none !important;
  animation: none !important;
}

/* ============================================================
   AWARD BANNER — mobiele compositie (≤719px)
   Trofee en certificaat staan naast elkaar op één "prijzenplank",
   de tekst staat gecentreerd daaronder en komt regel voor regel op.
   ============================================================ */
@media (max-width: 719px) {
  .bb-award-banner { padding: 26px 18px 26px; }
  .bb-award-banner__grid {
    grid-template-columns: auto auto;
    grid-template-areas: "trophy cert" "body body";
    justify-content: center;
    align-items: end;
    gap: 22px 22px;
  }
  .bb-award-banner__trophy { grid-area: trophy; filter: none; }
  .bb-award-banner__cert { grid-area: cert; }
  .bb-award-banner__body { grid-area: body; text-align: center; }
  .bb-trophy-stack { width: 96px; }
  /* Statieve gloed in plaats van een drop-shadow-filter op een bewegend element */
  .bb-trophy-stack::before {
    content: ""; position: absolute; left: 50%; top: 54%;
    width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%);
    background: radial-gradient(circle at center, rgba(6, 40, 28, 0.5) 0%, rgba(6, 40, 28, 0.22) 45%, transparent 70%);
    pointer-events: none;
  }
  .bb-award-banner__cert { width: 84px; border-radius: 8px; }
  .bb-award-banner__body h3 { font-size: 21px; line-height: 1.25; margin-bottom: 8px; }
  .bb-award-banner__body p { font-size: 16px; max-width: 30ch; margin: 0 auto 14px; }
  .bb-award-banner__body .bb-eyebrow { margin-bottom: 12px; line-height: 1.3; text-wrap: balance; }
  .bb-award-banner__partner { padding: 6px 12px 6px 10px; gap: 8px; flex-wrap: nowrap; font-size: 13px; letter-spacing: 0.02em; }
  .bb-award-banner__partner span { white-space: nowrap; }
  .bb-award-banner__partner img { height: 24px; }

  /* ---- Animatie: alleen opacity en transform, geen horizontale sprongen ---- */
  .bb-award-banner__trophy {
    transform: scale(0.6) rotate(-9deg);
    will-change: transform, opacity;
  }
  .bb-award-banner--in .bb-award-banner__trophy {
    animation: bbTrophyPopM 900ms cubic-bezier(0.34, 1.4, 0.64, 1) 140ms forwards;
  }
  @keyframes bbTrophyPopM {
    0%   { opacity: 0; transform: scale(0.6) rotate(-9deg); }
    58%  { opacity: 1; transform: scale(1.07) rotate(3deg); }
    82%  {             transform: scale(0.98) rotate(-1deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
  }
  .bb-award-banner__cert {
    transform: translateY(16px) rotate(-8deg) scale(0.92);
    will-change: transform, opacity;
  }
  .bb-award-banner--in .bb-award-banner__cert {
    animation: bbCertRiseM 880ms cubic-bezier(0.34, 1.4, 0.64, 1) 420ms forwards;
  }
  @keyframes bbCertRiseM {
    0%   { opacity: 0; transform: translateY(16px) rotate(-8deg) scale(0.92); }
    100% { opacity: 1; transform: translateY(0) rotate(-3.5deg) scale(1); }
  }
  .bb-award-banner__cert:hover { transform: translateY(0) rotate(-3.5deg) scale(1); }
  /* De tekst komt regel voor regel op in plaats van als één blok */
  .bb-award-banner__body { opacity: 1; transform: none; }
  .bb-award-banner--in .bb-award-banner__body { animation: none; }
  .bb-award-banner__body > * { opacity: 0; }
  .bb-award-banner--in .bb-award-banner__body > * {
    animation: bbAwardLineIn 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .bb-award-banner--in .bb-award-banner__body > *:nth-child(1) { animation-delay: 640ms; }
  .bb-award-banner--in .bb-award-banner__body > *:nth-child(2) { animation-delay: 800ms; }
  .bb-award-banner--in .bb-award-banner__body > *:nth-child(3) { animation-delay: 960ms; }
  .bb-award-banner--in .bb-award-banner__body > *:nth-child(4) { animation-delay: 1120ms; }
  @keyframes bbAwardLineIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ---- Reduced motion ---- */
html.bb-rm-force .bb-award-banner__body > *,
html.bb-rm-force .bb-award-banner__trophy,
html.bb-rm-force .bb-award-banner__cert {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
html.bb-rm-force .bb-confetti-canvas,
@media (prefers-reduced-motion: reduce) {
  .bb-confetti-canvas { display: none; }
  .bb-award-banner__trophy,
  .bb-award-banner__body,
  .bb-award-banner__body > *,
  .bb-award-banner__cert {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   FINAL CTA BAND
   ============================================================ */
.bb-final {
  text-align: center; max-width: 720px; margin: 0 auto;
}
.bb-final h2 {
  font-size: clamp(32px, 6vw, 48px);
  margin: 0 0 16px; color: var(--bb-white);
}
.bb-final p {
  margin: 0 auto 32px; max-width: 560px;
  color: rgba(255,255,255,0.92); font-size: var(--fs-lead);
}
.bb-final__cta-row {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
/* Op desktop mag de alinea breder, zodat de tekst op twee regels blijft. */
@media (min-width: 900px) { .bb-final p { max-width: 700px; } }
.bb-final__cta-row .bb-btn { flex: 1 1 auto; min-width: 220px; }
@media (min-width: 720px) { .bb-final__cta-row .bb-btn { flex: 0 0 auto; } }

/* ============================================================
   FOOTER
   ============================================================ */
.bb-footer {
  background: var(--bb-green-dark);
  color: var(--bb-white);
  padding: 56px 0 24px;
}
.bb-footer:has(.bb-footer__grid:first-child) { padding-top: 30px; }
.bb-footer__grid {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  margin-top: 44px;
}
.bb-footer__grid:first-child { margin-top: 0; }
@media (min-width: 720px) {
  .bb-footer__grid { grid-template-columns: 1.5fr 1fr 1.1fr 1fr; gap: 32px; }
}
.bb-footer h4 {
  color: var(--bb-white); font: 600 17px var(--font-display);
  margin: 0 0 14px;
}
.bb-footer__brand {
  display: flex; align-items: center; gap: 20px; margin-bottom: 14px;
}
.bb-footer__brand img { width: 44px; height: 44px; border-radius: 10px; }
.bb-footer__brand .wm { font: 600 19px var(--font-display); color: #fff; letter-spacing: -0.01em; }
.bb-footer__desc {
  font-size: 15px; line-height: 1.55;
  color: rgba(255,255,255,0.85); max-width: 320px;
}
.bb-footer__tagline {
  font: 400 22px var(--font-hand); color: var(--bb-yellow);
  margin: 14px 0 0;
}
.bb-footer a {
  display: block; padding: 5px 0;
  color: rgba(255,255,255,0.85); text-decoration: none;
  font-size: 15px;
}
.bb-footer a:hover { color: var(--bb-yellow); text-decoration: underline; text-underline-offset: 3px; }
.bb-footer .bb-cookie__settings { display: block; padding: 5px 0; color: rgba(255,255,255,0.85); font-size: 15px; font-family: inherit; }
.bb-footer .bb-cookie__settings:hover { color: var(--bb-yellow); text-decoration: underline; text-underline-offset: 3px; }
.bb-socials { list-style: none; margin: 12px 0 0; padding: 0; display: flex; gap: 10px; }
.bb-socials a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; text-decoration: none; transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out); }
.bb-socials a:hover { text-decoration: none; }
.bb-socials--dark a { border: 1.5px solid rgba(255,255,255,0.35); color: #fff; }
.bb-socials--dark a:hover { background: var(--bb-yellow); border-color: var(--bb-yellow); color: var(--bb-green-dark); }
.bb-socials--light a { border: 1.5px solid var(--bb-green-light); color: var(--bb-green-dark); }
.bb-socials--light a:hover { background: var(--bb-green-forest); border-color: var(--bb-green-forest); color: #fff; }
@media (prefers-reduced-motion: reduce) { .bb-socials a { transition: none; } }
.bb-footer__base {
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.18);
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between;
  font-size: 14.5px; color: rgba(255,255,255,0.7);
}

/* Mobiel: compacte footer met inklapbare linkkolommen */
@media (max-width: 719px) {
  .bb-footer { padding: 34px 0 20px; }
  .bb-footer:has(.bb-footer__grid:first-child) { padding-top: 26px; }
  .bb-footer__grid { gap: 0; margin-top: 30px; }
  .bb-footer__intro { padding-bottom: 18px; }
  .bb-footer__brand { margin-bottom: 8px; }
  .bb-footer__desc { display: none; }
  .bb-footer__tagline { margin: 6px 0 0; font-size: 20px; }
  .bb-footer__acc { border-top: 1px solid rgba(255,255,255,0.16); }
  .bb-footer__acc h4 { margin: 0; }
  .bb-footer__acc h4 button {
    width: 100%; min-height: 50px; padding: 12px 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border: 0; background: none; cursor: pointer;
    font: 600 17px var(--font-display); color: var(--bb-white); text-align: left;
  }
  .bb-footer__acc .chev { display: inline-flex; transition: transform 220ms var(--ease-out); color: rgba(255,255,255,0.7); }
  .bb-footer__acc.is-open .chev { transform: rotate(180deg); }
  .bb-footer__accbody { padding: 0 0 14px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 44px; align-content: start; column-gap: 18px; }
  .bb-footer__accbody[hidden] { display: none; }
  .bb-footer__accbody a, .bb-footer__accbody .bb-cookie__settings { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .bb-footer__contact a { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .bb-footer__contact {
    border-top: 1px solid rgba(255,255,255,0.16);
    border-bottom: 1px solid rgba(255,255,255,0.16);
    padding: 14px 0 16px;
  }
  .bb-footer__contact h4 { margin: 0 0 4px; }
  .bb-socials { margin-top: 12px; }
  .bb-footer__base { margin-top: 0; padding-top: 14px; gap: 4px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .bb-footer__acc .chev { transition: none; } }

/* ============================================================
   PLACEHOLDER PAGE
   ============================================================ */
.bb-placeholder {
  max-width: 720px; margin: 0 auto;
  text-align: center; padding: 80px 24px 120px;
}
.bb-placeholder h1 { font-size: clamp(32px, 6vw, 48px); margin-bottom: 16px; }
.bb-placeholder p { font-size: 18px; color: var(--bb-ink-soft); max-width: 540px; margin: 0 auto 28px; }
.bb-placeholder__icon {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--bb-mint); color: var(--bb-green-forest);
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
}
.bb-placeholder__icon svg { width: 44px; height: 44px; }

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.bb-section__head {
  text-align: center; max-width: 720px; margin: 0 auto 48px;
}
.bb-section__head h2 {
  font-size: clamp(28px, 5vw, 40px);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.bb-section__head p {
  font-size: var(--fs-lead); color: var(--bb-ink-soft); margin: 0;
}

/* Sticker strip — small decorative element between sections */
.bb-sticker-strip {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 auto 40px;
  font: 400 19px var(--font-hand); color: var(--bb-green-forest);
  transform: rotate(-1deg);
}
.bb-sticker-strip svg { width: 18px; height: 18px; color: var(--bb-yellow); }

/* Tweaks panel overrides */
.tweaks-panel { z-index: 100; }

/* ============================================================
   PHOTO STRIP — speelse scatter van cirkelfoto's tussen secties
   ============================================================ */
.bb-photo-strip {
  position: relative;
  padding: 24px 0 32px;
  background:
    radial-gradient(circle 480px at 20% 50%, rgba(141, 187, 78, 0.10), transparent 65%),
    radial-gradient(circle 420px at 82% 50%, rgba(232, 244, 236, 0.55), transparent 60%),
    var(--bb-cream);
  overflow: hidden;
}
.bb-photo-strip__inner {
  position: relative;
  height: 220px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 720px) {
  .bb-photo-strip { padding: 32px 0 48px; }
  .bb-photo-strip__inner { height: 280px; padding: 0 32px; }
}
@media (min-width: 1024px) {
  .bb-photo-strip__inner { height: 320px; }
}

.bb-photo-bubble {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--bb-green-light);
  box-shadow: 0 10px 24px rgba(6, 7, 7, 0.14);
  margin: 0;
  background: #fff;
}
.bb-photo-bubble img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Mobile-first scatter. Bigger bubbles & extras kick in at wider viewports. */
.bb-photo-bubble--1 {
  width: 120px; height: 120px;
  top: 30px; left: 4%;
  transform: rotate(-4deg);
  animation: bbFloatA 7s ease-in-out infinite;
}
.bb-photo-bubble--2 {
  width: 150px; height: 150px;
  top: 10px; right: 6%;
  transform: rotate(3deg);
  border-color: var(--bb-green-mid);
  animation: bbFloatB 6.4s ease-in-out infinite -1.3s;
}
.bb-photo-bubble--3 {
  width: 110px; height: 110px;
  bottom: 8px; left: 36%;
  transform: rotate(5deg);
  animation: bbFloatC 7.6s ease-in-out infinite -2.4s;
}
.bb-photo-bubble--4 {
  display: none; /* tablet+ */
  width: 92px; height: 92px;
  top: 60px; left: 26%;
  transform: rotate(-7deg);
  animation: bbFloatD 6.8s ease-in-out infinite -3.6s;
}
@media (min-width: 720px) {
  .bb-photo-bubble--1 { width: 150px; height: 150px; left: 6%; top: 40px; }
  .bb-photo-bubble--2 { width: 180px; height: 180px; right: 8%; top: 20px; }
  .bb-photo-bubble--3 { width: 140px; height: 140px; left: 50%; bottom: 12px; }
  .bb-photo-bubble--4 { display: block; }
}
@media (min-width: 1024px) {
  .bb-photo-bubble--1 { width: 170px; height: 170px; left: 8%; }
  .bb-photo-bubble--2 { width: 210px; height: 210px; right: 10%; }
  .bb-photo-bubble--3 { width: 160px; height: 160px; left: 52%; }
  .bb-photo-bubble--4 { width: 120px; height: 120px; left: 30%; top: 80px; }
}
html.bb-rm-force .bb-photo-bubble { animation: none !important; }

.bb-photo-sticker {
  position: absolute;
  font: 400 18px var(--font-hand);
  color: var(--bb-green-dark);
  padding: 6px 14px;
  background: var(--bb-yellow);
  border-radius: 14px;
  transform: rotate(-3deg);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  z-index: 5;
}
.bb-photo-sticker--1 {
  top: 0; left: 50%; transform: translateX(-50%) rotate(-3deg);
}
@media (min-width: 720px) {
  .bb-photo-sticker { font-size: 22px; padding: 8px 18px; }
  .bb-photo-sticker--1 { left: 22%; transform: rotate(-3deg); }
}

/* ============================================================
   FEATURE QUOTE — groot beeld met Gochi-quote, tussen secties
   ============================================================ */
.bb-feature-quote {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--bb-green-dark);
}
.bb-feature-quote__inner {
  position: relative;
  min-height: 280px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 720px) { .bb-feature-quote__inner { min-height: 340px; } }
@media (min-width: 1024px) { .bb-feature-quote__inner { min-height: 420px; } }

.bb-feature-quote__photo {
  position: absolute; inset: 0;
  z-index: 0;
  /* Initial state: hidden via left-to-right clip */
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
}
.bb-fq--in .bb-feature-quote__photo {
  animation: bbFqPhotoReveal 1200ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes bbFqPhotoReveal {
  from { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0);   -webkit-clip-path: inset(0 0% 0 0); }
}
.bb-feature-quote__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.bb-feature-quote__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(95deg,
      rgba(6, 69, 48, 0.84) 0%,
      rgba(19, 86, 55, 0.62) 45%,
      rgba(6, 69, 48, 0.35) 100%);
  z-index: 1;
}
.bb-feature-quote__body {
  position: relative;
  z-index: 2;
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
  padding: 48px 24px;
  color: #fff;
  text-align: center;
}
@media (min-width: 720px) {
  .bb-feature-quote__body { padding: 64px 40px; max-width: 760px; margin: 0 auto; }
}
.bb-feature-quote__body blockquote {
  font: 400 26px/1.35 var(--font-hand);
  color: #fff;
  margin: 0 auto 20px;
  max-width: 640px;
  text-shadow:
    0 5px 22px rgba(0, 0, 0, 0.7),
    0 2px 6px  rgba(0, 0, 0, 0.55),
    0 0 2px    rgba(0, 0, 0, 0.8);
}
@media (min-width: 720px) { .bb-feature-quote__body blockquote { font-size: 36px; } }
@media (min-width: 1024px) { .bb-feature-quote__body blockquote { font-size: 44px; } }

.bb-fq-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.3em);
  white-space: nowrap;
}
.bb-fq--in .bb-fq-word {
  animation: bbFqWord 950ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes bbFqWord {
  from { opacity: 0; transform: translateY(0.3em); }
  to   { opacity: 1; transform: translateY(0); }
}

.bb-feature-quote__attrib {
  display: inline-flex; align-items: center; gap: 14px;
  font: 700 18px var(--font-body);
  color: var(--bb-white);
  letter-spacing: 0.02em;
  text-shadow:
    0 3px 12px rgba(0, 0, 0, 0.7),
    0 1px 3px  rgba(0, 0, 0, 0.55),
    0 0 2px    rgba(0, 0, 0, 0.8);
  /* Initial state: hidden, fades in after quote */
  opacity: 0;
  transform: translateY(8px);
}
.bb-fq--in .bb-feature-quote__attrib {
  animation: bbFqAttrib 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes bbFqAttrib {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bb-feature-quote__attrib .role {
  font-weight: 400;
  opacity: 0.85;
}
.bb-feature-quote__attrib .ph {
  width: 54px; height: 54px;
  border-radius: 50%; overflow: hidden;
  border: 2px solid var(--bb-yellow);
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.bb-feature-quote__attrib .ph img { width: 100%; height: 100%; object-fit: cover; }

/* Reduced motion: alles direct zichtbaar */
html.bb-rm-force .bb-feature-quote__photo,
html.bb-rm-force .bb-fq-word,
html.bb-rm-force .bb-feature-quote__attrib {
  animation: none !important; clip-path: none !important; -webkit-clip-path: none !important;
  opacity: 1 !important; transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .bb-feature-quote__photo { clip-path: none !important; -webkit-clip-path: none !important; animation: none !important; }
  .bb-fq-word { opacity: 1 !important; transform: none !important; animation: none !important; }
  .bb-feature-quote__attrib { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ============================================================
   NEWS BLOCK — kaarten met logo, foto, quote, gradient achtergrond
   ============================================================ */
.bb-section--news {
  background:
    radial-gradient(ellipse 720px 480px at -8% 12%,
      rgba(141, 187, 78, 0.22) 0%,
      rgba(141, 187, 78, 0.08) 38%,
      transparent 65%),
    radial-gradient(circle 560px at 108% 90%,
      rgba(111, 181, 97, 0.18) 0%,
      transparent 60%),
    linear-gradient(180deg,
      rgba(232, 244, 236, 0.6) 0%,
      rgba(232, 244, 236, 0.3) 100%),
    var(--bb-cream);
}

.bb-news-grid {
  display: grid; grid-template-columns: 1fr; gap: 24px;
}
@media (min-width: 720px) { .bb-news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bb-news-grid { grid-template-columns: repeat(3, 1fr); } }

.bb-news-card {
  background: var(--bb-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-card);
  transition: transform var(--t-base), box-shadow var(--t-base);
  position: relative;
  height: 100%; /* vul de grid-rij zodat alle 3 kaarten even hoog zijn */
}
.bb-news-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 4px; background: var(--bb-green-forest);
  z-index: 2;
}
.bb-news-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-h);
  text-decoration: none;
  color: inherit;
}
.bb-news-card__photo {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bb-mint);
}
.bb-news-card__photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Logo's van programma's staan volledig in beeld op een lichte achtergrond,
   in plaats van beeldvullend bijgesneden zoals de foto's. */
.bb-news-card__photo--contain { background: var(--bb-white); }
.bb-news-card__photo--contain img { object-fit: contain; padding: 18px; }
.bb-news-card__source {
  position: absolute;
  bottom: 14px; left: 14px;
  padding: 7px 14px;
  border-radius: 8px;
  font: 700 14px/1 var(--font-body);
  letter-spacing: 0.05em;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  z-index: 2;
}
.bb-news-card__source--nh  { background: #003a8c; color: #fff; font-family: Georgia, "Times New Roman", serif; letter-spacing: 0.02em; }
.bb-news-card__source--hd  { background: #111;    color: #fff; font-family: Georgia, "Times New Roman", serif; font-style: italic; letter-spacing: 0; }
.bb-news-card__source--naz { background: var(--bb-yellow); color: var(--bb-green-dark); letter-spacing: 0.04em; }
.bb-news-card__source--hn  { background: #c4161c; color: #fff; font-family: Georgia, "Times New Roman", serif; }
.bb-news-card__source--jong { background: #0b7aa8; color: #fff; letter-spacing: 0.02em; }


.bb-news-card__body {
  padding: 20px 22px 22px;
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
}
.bb-news-card__meta {
  display: flex; align-items: center; gap: 10px;
  font: 600 14px var(--font-body);
  color: var(--bb-muted);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  /* Lange bronnamen (Leidsebuurtkrant Haarlem) mogen de datum niet wegdrukken:
     de datum valt dan op een tweede regel in plaats van afgekapt te worden. */
  flex-wrap: wrap; row-gap: 2px; min-width: 0;
}
.bb-news-card__meta > span:not(.dot) { white-space: nowrap; }
.bb-news-card__meta .dot {
  width: 4px; height: 4px; border-radius: 50%; background: var(--bb-green-light);
}
.bb-news-card h3 {
  margin: 0;
  font: 600 19px/1.3 var(--font-display);
  color: var(--bb-green-dark);
}
.bb-news-card__sum,
.bb-news-card blockquote {
  margin: 0;
  font: 400 20.5px/1.45 var(--font-hand);
  color: var(--bb-green-forest);
  padding-left: 14px;
  border-left: 3px solid var(--bb-green-light);
}
.bb-news-card .bb-news-card__cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto;
  font: 600 15px var(--font-body);
  color: var(--bb-green-forest);
}
.bb-news-card:hover .bb-news-card__cta { color: var(--bb-green-dark); text-decoration: underline; text-underline-offset: 4px; }
.bb-news-card__cta svg { transition: transform var(--t-fast); }
.bb-news-card:hover .bb-news-card__cta svg { transform: translateX(3px); }

/* ============================================================
   MEDIA CARROUSEL
   ============================================================ */
.bb-carousel { position: relative; }
.bb-carousel__viewport { overflow: hidden; padding: 6px 4px 10px; margin: -6px -4px -10px; }
.bb-carousel__track { display: flex; gap: 24px; transition: transform 0.45s var(--ease-out); }
/* min-width: 0 is nodig: zonder die regel groeit een kaart mee met zijn langste woord
   (de automatische minimumbreedte van een flexitem), waardoor de kaarten ongelijk
   worden en de laatste buiten de kantlijn valt. */
.bb-carousel__slide { flex: 0 0 calc((100% - (var(--per-view) - 1) * 24px) / var(--per-view)); min-width: 0; display: flex; }
.bb-carousel__slide > * { min-width: 0; }
.bb-carousel__slide > .bb-news-card { width: 100%; }
.bb-carousel__slide .bb-news-card__sum,
.bb-carousel__slide .bb-news-card blockquote,
.bb-carousel__slide .bb-news-card__meta { min-width: 0; overflow-wrap: break-word; }
/* Zachte achtergrond onder de foto's in de carrousel op de homepage */
.bb-carousel__slide .bb-news-card__body { position: relative; background: linear-gradient(180deg, var(--bb-white) 0%, #F7FBF3 42%, #E2F0E6 100%); }
.bb-carousel__slide .bb-news-card__body::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(115% 85% at 100% 100%, rgba(148, 177, 67, 0.22), rgba(148, 177, 67, 0) 64%),
    radial-gradient(80% 70% at 0% 100%, rgba(250, 215, 40, 0.09), rgba(250, 215, 40, 0) 60%),
    radial-gradient(70% 60% at 0% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 58%);
  opacity: 0.9; transition: opacity var(--t-base);
}
.bb-carousel__slide .bb-news-card:hover .bb-news-card__body::before { opacity: 1; }
.bb-carousel__slide .bb-news-card__body > * { position: relative; z-index: 1; }
.bb-carousel__controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.bb-carousel__arrow {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--bb-white); border: 1.5px solid var(--border-card);
  color: var(--bb-green-forest); display: grid; place-items: center;
  box-shadow: var(--shadow-card); cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}
.bb-carousel__arrow:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--bb-green-light); box-shadow: var(--shadow-card-h); }
.bb-carousel__arrow.is-glow { background: var(--bb-yellow); border-color: var(--bb-yellow); color: var(--bb-green-dark); animation: bb-arrow-glow 2.4s var(--ease-out) infinite; }
.bb-carousel__arrow.is-glow:hover:not(:disabled) { border-color: var(--bb-yellow); }
@keyframes bb-arrow-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(250, 215, 40, 0.6); }
  55% { box-shadow: 0 0 0 12px rgba(250, 215, 40, 0); }
}
.bb-carousel__arrow:disabled { opacity: 0.38; cursor: default; }
.bb-carousel__dots { display: flex; align-items: center; justify-content: center; gap: 2px; }
.bb-carousel__dot { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; }
.bb-carousel__dot span { width: 10px; height: 10px; border-radius: 999px; background: rgba(19, 86, 55, 0.22); transition: width var(--t-fast), background var(--t-fast); }
.bb-carousel__dot:hover span { background: var(--bb-green-light); }
.bb-carousel__dot[aria-current="true"] span { width: 26px; background: var(--bb-green-forest); }
.bb-carousel__more { display: flex; justify-content: center; margin-top: 28px; }
/* Smalle schermen: bij één kaart per pagina zijn er zes bolletjes, en dan past de
   rij pijl + bolletjes + pijl niet meer op één regel; de rechterpijl viel buiten
   beeld. De bolletjes gaan daarom naar een eigen regel eronder, zodat beide
   pijlen altijd passen. De raakvlakken blijven 44 × 44 px. */
@media (max-width: 640px) {
  .bb-carousel__controls { flex-wrap: wrap; row-gap: 2px; }
  .bb-carousel__dots { order: 3; flex: 1 0 100%; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-carousel__track { transition: none; }
  .bb-carousel__arrow.is-glow { animation: none; }
  .bb-statfig__ring { transition: none; stroke-dashoffset: 0; }
  .bb-statfig__item { opacity: 1; transition: none; }
  .bb-statfig__ball { display: none; }
  .bb-statfig-wrap .bb-stats__sub { opacity: 1; transform: rotate(-1deg); animation: none; }
}
.bb-rm-force .bb-carousel__track { transition: none; }
.bb-rm-force .bb-carousel__arrow.is-glow { animation: none; }
.bb-rm-force .bb-statfig__ring { transition: none; stroke-dashoffset: 0; }
.bb-rm-force .bb-statfig__item { opacity: 1; transition: none; }
.bb-rm-force .bb-statfig__ball { display: none; }
.bb-rm-force .bb-statfig-wrap .bb-stats__sub { opacity: 1; transform: rotate(-1deg); animation: none; }


/* ============================================================
   JURIDISCHE PAGINA'S — privacybeleid, cookiebeleid, disclaimer, toegankelijkheid
   ============================================================ */
.bb-legal__head{background:var(--bg-alt);border-bottom:1px solid rgba(6,69,48,0.10);padding:28px 0 32px}
@media(min-width:720px){.bb-legal__head{padding:40px 0 44px}}
.bb-legal__crumb{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--bb-muted);margin:0 0 18px}
.bb-legal__crumb a{color:var(--bb-green-forest);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.bb-legal__crumb a:hover{text-decoration:underline}
.bb-legal__kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;font-family:var(--font-display);font-size:14px;letter-spacing:0.07em;text-transform:uppercase;color:var(--bb-green-forest)}
.bb-legal__kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--bb-green-light)}
.bb-legal__head h1{font-size:clamp(28px,5.2vw,44px);margin:0 0 14px;max-width:22ch}
.bb-legal__lead{margin:0;max-width:64ch;font-size:17px;line-height:1.65;color:var(--bb-ink-soft);text-wrap:pretty}
@media(min-width:720px){.bb-legal__lead{font-size:18px}}
.bb-legal__meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin:22px 0 0}
.bb-legal__meta>div{display:flex;flex-direction:column;gap:2px}
.bb-legal__meta dt{font-size:14px;letter-spacing:0.03em;text-transform:uppercase;color:var(--bb-muted)}
.bb-legal__meta dd{margin:0;font-size:15px;font-weight:700;color:var(--bb-green-dark)}
.bb-legal__meta dd a{font-weight:700}

.bb-legal{padding:28px 0 56px}
@media(min-width:720px){.bb-legal{padding:40px 0 72px}}
.bb-legal__grid{display:grid;gap:24px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1024px){.bb-legal__grid{grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start}.bb-legal__side{position:sticky;top:96px}}

.bb-legal__toc{background:var(--bg-surface);border:1px solid var(--border-card);border-radius:14px;padding:6px 14px 10px}
@media(min-width:1024px){.bb-legal__toc{background:transparent;border:0;border-left:2px solid rgba(6,69,48,0.10);border-radius:0;padding:2px 0 2px 16px}}
.bb-legal__tocsum{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;cursor:pointer;font-family:var(--font-display);font-size:16px;color:var(--bb-green-dark);list-style:none}
.bb-legal__tocsum::-webkit-details-marker{display:none}
.bb-legal__tocsum .c{font-family:var(--font-body);font-size:14px;font-weight:700;color:var(--bb-green-forest);background:var(--bb-mint);border-radius:999px;padding:3px 9px}
.bb-legal__toc[open] .bb-legal__tocsum{border-bottom:1px solid var(--border-card);margin-bottom:6px}
.bb-legal__toctitle{display:none}
@media(min-width:1024px){.bb-legal__tocsum{display:none}.bb-legal__toctitle{display:block;margin:0 0 10px;font-family:var(--font-display);font-size:14px;letter-spacing:0.06em;text-transform:uppercase;color:var(--bb-muted)}}
.bb-legal__toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bb-legal__toc a{display:flex;gap:10px;align-items:baseline;min-height:44px;padding:9px 6px;text-decoration:none;color:var(--bb-ink-soft);font-size:14.5px;line-height:1.35;border-radius:8px}
.bb-legal__toc a .num{font-variant-numeric:tabular-nums;color:var(--bb-muted);font-size:14px;min-width:16px}
.bb-legal__toc a:hover{background:var(--bb-mint);color:var(--bb-green-dark)}
.bb-legal__toc a.is-active{color:var(--bb-green-dark);font-weight:700}
.bb-legal__toc a.is-active .num{color:var(--bb-green-light)}
@media(min-width:1024px){.bb-legal__toc a.is-active{background:var(--bb-mint)}}

.bb-legal__body{max-width:74ch;min-width:0}
.bb-legal__summary{background:var(--bb-mint);border-radius:16px;padding:20px 22px;margin:0 0 34px}
.bb-legal__summary h2{font-size:20px;margin:0 0 12px}
.bb-legal__summary ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.bb-legal__summary li{position:relative;padding-left:26px;font-size:16px;line-height:1.6;color:var(--bb-ink-soft)}
.bb-legal__summary li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:7px;border-left:2.5px solid var(--bb-green-light);border-bottom:2.5px solid var(--bb-green-light);transform:rotate(-45deg)}
.bb-legal__summarynote{margin:14px 0 0;font-size:15px;color:var(--bb-muted)}

.bb-legal__sec{padding:0 0 30px;scroll-margin-top:96px}
.bb-legal__sec h2{display:flex;gap:12px;font-size:clamp(20px,2.6vw,25px);margin:0 0 14px;outline:none;text-wrap:pretty}
.bb-legal__num{color:var(--bb-green-light);font-variant-numeric:tabular-nums}
.bb-legal__h3{font-size:17px;margin:22px 0 8px;color:var(--bb-green-forest)}
.bb-legal__p{margin:0 0 14px;font-size:16.5px;line-height:1.7;color:var(--bb-ink-soft);text-wrap:pretty}
.bb-legal__ul{margin:0 0 16px;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.bb-legal__ul li{position:relative;padding-left:20px;font-size:16.5px;line-height:1.65;color:var(--bb-ink-soft)}
.bb-legal__ul li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--bb-green-light)}

.bb-legal__dl{margin:0 0 16px;display:grid;gap:2px}
.bb-legal__dlrow{display:grid;grid-template-columns:1fr;gap:2px;padding:9px 0;border-bottom:1px solid var(--border-card)}
@media(min-width:560px){.bb-legal__dlrow{grid-template-columns:180px minmax(0,1fr);gap:16px;align-items:baseline}}
.bb-legal__dlrow dt{font-size:14.5px;color:var(--bb-muted);text-transform:uppercase;letter-spacing:0.03em}
.bb-legal__dlrow dd{margin:0;font-size:16.5px;color:var(--bb-ink-soft)}

.bb-legal__note{background:var(--bb-white);border:1px solid var(--border-card);border-radius:14px;padding:16px 18px;margin:6px 0 18px;box-shadow:0 2px 10px rgba(6,69,48,0.04)}
.bb-legal__note h4{margin:0 0 6px;font-size:16px;color:var(--bb-green-forest);display:flex;gap:9px;align-items:baseline}
.bb-legal__note h4::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--bb-yellow);flex:none;transform:translateY(-1px)}
.bb-legal__note p{margin:0;font-size:15.5px;line-height:1.65;color:var(--bb-ink-soft)}

.bb-legal__subkicker{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bb-green-olijf)}
.bb-legal__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:10px 0 18px}
.bb-legal__col{background:var(--bb-white);border:1px solid var(--border-card);border-radius:14px;padding:16px 18px;box-shadow:0 2px 10px rgba(6,69,48,0.04)}
.bb-legal__col h4{margin:0 0 4px;font-size:16px;color:var(--bb-green-forest);display:flex;align-items:center;gap:10px}
.bb-legal__col h4::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--bb-mint);background-repeat:no-repeat;background-position:center;background-size:12px 12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%235E7A22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 6.5 4.5 9.5 10.5 2.5'/%3E%3C/svg%3E")}
.bb-legal__col.is-niet h4::before{background-color:#FCEEDD;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23A35606' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2.5 2.5 9.5 9.5M9.5 2.5 2.5 9.5'/%3E%3C/svg%3E")}
.bb-legal__colintro{margin:0 0 10px;font-size:15px;line-height:1.6;color:var(--bb-muted)}
.bb-legal__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.bb-legal__col li{position:relative;padding-left:24px;font-size:15.5px;line-height:1.6;color:var(--bb-ink-soft)}
.bb-legal__col li::before{content:"";position:absolute;left:0;top:5px;width:14px;height:14px;background-repeat:no-repeat;background-position:center;background-size:12px 12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%235E7A22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 6.5 4.5 9.5 10.5 2.5'/%3E%3C/svg%3E")}
.bb-legal__coloutro{margin:10px 0 0;padding-top:9px;border-top:1px solid var(--border-card)}
.bb-legal__col.is-niet li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23A35606' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2.5 2.5 9.5 9.5M9.5 2.5 2.5 9.5'/%3E%3C/svg%3E")}

.bb-legal__tablewrap{margin:6px 0 20px;border:1px solid var(--border-card);border-radius:14px;background:var(--bb-white);overflow:hidden;max-width:100%}
@media (max-width:719px){.bb-legal__tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.bb-legal__table{min-width:520px}.bb-legal__table th,.bb-legal__table td{padding:10px 12px;font-size:14px}}
.bb-legal__tablewrap.is-scrollbaar::after{content:"Schuif zijwaarts voor de hele tabel";display:block;position:sticky;left:0;padding:8px 12px 10px;font-size:14px;color:var(--fg-2);background:var(--bb-white)}
.bb-legal__tablewrap:focus-visible{outline:3px solid var(--bb-green-forest);outline-offset:2px}
.bb-legal__table{width:100%;border-collapse:collapse;font-size:15px}
.bb-legal__table th,.bb-legal__table td{text-align:left;padding:11px 14px;vertical-align:top;line-height:1.5;border-bottom:1px solid var(--border-card)}
.bb-legal__table thead th{background:var(--bb-mint);font-family:var(--font-display);font-size:15px;color:var(--bb-green-dark);letter-spacing:0.02em}
.bb-legal__table tbody th{font-weight:700;color:var(--bb-green-dark);font-family:var(--font-body)}
.bb-legal__table td{color:var(--bb-ink-soft)}
.bb-legal__table tr:last-child th,.bb-legal__table tr:last-child td{border-bottom:0}

.bb-legal__todo{background:#FFF3CD;color:#5A4300;border:1px dashed #C8A400;border-radius:6px;padding:1px 7px;font-size:0.92em;font-weight:700}

.bb-legal__contact{background:var(--bb-green-dark);color:var(--bb-white);border-radius:18px;padding:24px 24px 26px;margin:14px 0 28px}
.bb-legal__contact h2{color:var(--bb-white);font-size:22px;margin:0 0 8px}
.bb-legal__contact p{margin:0 0 18px;color:rgba(255,255,255,0.86);font-size:16px;line-height:1.6}
.bb-legal__contactrow{display:flex;flex-wrap:wrap;gap:12px}
.bb-legal__contact .bb-btn--secondary{background:transparent;color:var(--bb-white);border-color:rgba(255,255,255,0.5)}
.bb-legal__contact .bb-btn--secondary:hover{background:rgba(255,255,255,0.12);color:var(--bb-white)}

.bb-legal__others{display:grid;gap:10px}
@media(min-width:720px){.bb-legal__others{grid-template-columns:repeat(3,1fr)}}
.bb-legal__others a{display:flex;flex-direction:column;gap:4px;background:var(--bb-white);border:1px solid var(--border-card);border-radius:14px;padding:14px 16px;text-decoration:none;min-height:44px;transition:border-color .18s ease,transform .18s ease}
.bb-legal__others a:hover{border-color:var(--bb-green-light);transform:translateY(-2px)}
.bb-legal__others .t{font-family:var(--font-display);font-size:16px;color:var(--bb-green-dark)}
.bb-legal__others .d{font-size:15px;color:var(--bb-muted);line-height:1.45}
.bb-legal__others .a{color:var(--bb-green-light);margin-top:2px}

@media print{
  .bb-legal__side,.bb-legal__others,.bb-legal__crumb{display:none}
  .bb-legal__body{max-width:none}
  .bb-legal__sec,.bb-legal__note,.bb-legal__tablewrap,.bb-legal__col{break-inside:avoid}
  .bb-legal__contact{background:none;color:#000;border:1px solid #999}
  .bb-legal__contact h2,.bb-legal__contact p{color:#000}
}

/* ============================================================
   FOCUS (WCAG 2.2): één duidelijke ring op alles wat focus krijgt.
   Hogere specificiteit dan de componentregels, zodat knoppen met een
   eigen box-shadow de ring niet overschrijven.
   ============================================================ */
.bb-page :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  box-shadow: var(--shadow-focus);
  outline: none;
}
.bb-page :is(.bb-section--dark, .bb-footer, .bb-chapter--dark, .bb-award-banner, .bb-legal__contact, .bb-faq__cta, .bb-wa__ctacard, .bb-md__perscard) :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  box-shadow: var(--shadow-focus-op-donker);
}

/* Alleen voor schermlezers: aankondiging van paginawissels. */
.bb-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- Knoppen op mobiel ----------
   Zodra knoppen onder elkaar vallen, staan ze op een smal scherm te dicht op
   elkaar. Overal 10 px ertussen geeft een rustig en gelijk beeld, en elke knop
   in zo'n rij krijgt de breedte van de langste tekst in die rij, dus niet de
   volle schermbreedte.
   De knoppen op de activiteitkaarten staan hier bewust niet bij: die zijn
   apart afgestemd in activiteiten.css.
   De selectors beginnen met .bb-page, want styles.css wordt eerder geladen dan
   de paginabestanden. Zonder dat extra niveau winnen hun eigen gap-waarden. */
@media (max-width: 620px) {
  /* Rijen met echte knoppen: één kolom, zo breed als de langste knop. */
  .bb-page :is(.bb-tabs, .bb-hero__cta-row, .bb-thanks__cta, .bb-partner__cta, .bb-over-hero__cta, .bb-deel__knoppen, .bb-act__klaaracts) {
    display: grid; grid-template-columns: minmax(0, max-content); gap: 10px;
  }
  .bb-page :is(.bb-tabs, .bb-hero__cta-row, .bb-thanks__cta, .bb-partner__cta, .bb-over-hero__cta, .bb-deel__knoppen, .bb-act__klaaracts) > :is(.bb-btn, .bb-tab, .bb-deel__btn) {
    width: auto; justify-content: center; text-align: center;
  }
  /* Rijen met tekstlinks houden hun eigen breedte, alleen de ruimte gelijk. */
  .bb-page :is(.bb-md__acts, .bb-faq__ctarow, .bb-wa__onder) { row-gap: 10px; }
  /* De cookiemelding staat buiten .bb-page. */
  .bb-cookie .bb-cookie__acts { row-gap: 10px; }
}



/* ================================================================
   LEESBAARHEID OP MOBIEL (WCAG 2.2, EAA)
   ================================================================
   Op een telefoon is alle lopende tekst minimaal 17 pixels, en waar het de hoofdtekst
   van een pagina is 18. Deze regels tillen de plekken op waar in de vormgeving een
   kleinere maat was vastgelegd. Tekst in een kader of onder een element mag een halve
   maat kleiner, maar blijft altijd op minimaal 16 pixels. Losse labels, pillen en tags
   staan op 16: dat zijn losse woorden en geen leestekst. De maten voor de kop, de
   inleiding en de lopende tekst zelf staan in tokens.css. */
@media (max-width: 719px) {
  .bb-header__brand .wm { font-size: 16.5px; }
  .bb-hero__pill { font-size: 17px; }
  .bb-quote-card .who small { font-size: 16.5px; }
  .bb-news-card__meta { font-size: 16px; }
  .bb-news-card .bb-news-card__cta { font-size: 17px; }
  .bb-hero__trust { font-size: 16.5px; }
  .bb-award-banner__body p { font-size: 18px; }

  /* Voettekst: de beschrijving en alle links duidelijk groter. Alleen het regeltje
     onderaan met het jaartal en de kamer van koophandel blijft kleine letter. */
  .bb-footer__desc { font-size: 18px; line-height: 1.6; }
  .bb-footer a, .bb-footer .bb-cookie__settings { font-size: 17.5px; }
  .bb-footer__base { font-size: 16px; }

  /* Juridische pagina's: kruimelpad, samenvatting, kaders, lijsten en tabellen. */
  .bb-legal__lead { font-size: 20px; }
  .bb-legal__contact p { font-size: 18px; }
  .bb-legal__crumb { font-size: 17px; }
  .bb-legal__kicker { font-size: 16px; }
  .bb-legal__meta dt { font-size: 16px; }
  .bb-legal__meta dd { font-size: 17px; }
  .bb-legal__tocsum { font-size: 17px; }
  .bb-legal__tocsum .c { font-size: 16px; }
  .bb-legal__toc a { font-size: 17px; }
  .bb-legal__toc a .num { font-size: 16px; }
  .bb-legal__summary li { font-size: 18px; }
  .bb-legal__summarynote { font-size: 18px; }
  .bb-legal__dlrow dt { font-size: 16px; }
  .bb-legal__dlrow dd { font-size: 18px; }
  .bb-legal__note h4 { font-size: 17.5px; }
  .bb-legal__subkicker { font-size: 14px; }
  .bb-legal__col h4 { font-size: 17.5px; }
  .bb-legal__colintro { font-size: 17px; }
  .bb-legal__col li { font-size: 17.5px; }
  .bb-legal__note p { font-size: 18px; }
  .bb-legal__others .t { font-size: 17.5px; }
  .bb-legal__others .d { font-size: 17px; }
  .bb-legal__tablewrap.is-scrollbaar::after { font-size: 16px; }
  .bb-legal__table { font-size: 17px; }
  .bb-legal__table th, .bb-legal__table td { font-size: 17px; }
  .bb-legal__table thead th { font-size: 17px; }
}

/* Knoppen op mobiel: de tekst in een knop is nooit kleiner dan 16 pixels. In de
   vormgeving stonden hier en daar nog vaste maten van 14 of 15 pixels, die de
   verhoogde knopmaat uit tokens.css overrulden. De aanmeldknop in de balk krijgt
   op de smalste schermen wat minder ruimte om zich heen in plaats van kleinere
   letters. De gele knop in de cookiemelding blijft bewust groter: die maat staat
   in cookies.css en wordt hier niet aangeraakt. */
@media (max-width: 719px) {
  .bb-btn--sm,
  .bb-footer .bb-btn, .bb-cookie__btn, .bb-faq__cta .bb-btn,
  .bb-md__perscard .bb-btn, .bb-legal__contact .bb-btn,
  .bb-header__inner .bb-btn--sm { font-size: 16px; }
}
@media (max-width: 480px) { .bb-header__inner .bb-btn--sm { padding: 11px 12px; } }
@media (max-width: 360px) { .bb-header__inner .bb-btn--sm { padding: 11px 10px; } }


/* Logo's die naar de website van de partner linken. Het logo blijft een logo: geen
   onderstreping en geen kleurverandering, alleen een kleine reactie bij aanwijzen en een
   duidelijke focusring voor het toetsenbord. */
/* Een verzendknop staat uit zolang de inzending onderweg is, zodat een tweede klik geen
   tweede aanmelding kan opleveren. De knop blijft goed leesbaar, alleen wat rustiger. */
.bb-btn:disabled, .bb-btn[disabled] { opacity: 0.72; cursor: default; pointer-events: none; }
.bb-btn:disabled:hover, .bb-btn[disabled]:hover { transform: none; }

a.bb-logolink { display: inline-block; width: max-content; max-width: 100%; line-height: 0; text-decoration: none; border-radius: 6px; transition: transform var(--t-base) var(--ease-bounce), opacity var(--t-fast) var(--ease-out); }
a.bb-logolink:hover { transform: translateY(-2px); opacity: 0.88; }
@media (prefers-reduced-motion: reduce) { a.bb-logolink { transition: none; } a.bb-logolink:hover { transform: none; } }