/* Plant Mee Elements CSS — aligned with bb-* design system */
:root{
  --bbpm-brand-700:#074e37;
  --bbpm-orange:#d96a3b;
  --bbpm-orange-hover:#c25a2e;
  --bbpm-accent-100:#f5f0e8;
  --bbpm-ink-900:#1b1b1b;
  --bbpm-ink-700:#3b3b3b;
  --bbpm-ink-500:#6b6b6b;
  --bbpm-line-200:#e8e8e8;
  --bbpm-white:#fff;
  --bbpm-rad-m:16px; --bbpm-rad-l:24px;
  --bbpm-rad-btn:8px;
  --bbpm-shadow-s:0 4px 12px rgba(7,78,55,.08);
  --bbpm-shadow-m:0 12px 32px rgba(7,78,55,.12);
  --bbpm-maxw:1200px;
}

/* container & spacing */
.bbpm-container{max-width:var(--bbpm-maxw);margin:0 auto;padding:0 clamp(16px,3vw,28px)}
.bbpm-section{padding-block:clamp(48px,6vw,80px)}
.bbpm-two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);align-items:start}
@media (max-width:980px){.bbpm-two-col{grid-template-columns:1fr}}

/* text & headings */
.bbpm-eyebrow{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bbpm-brand-700);font-weight:700}
.bbpm-h1{font-size:clamp(2rem,3.5vw + .5rem,3.25rem);line-height:1.15;font-weight:800;margin:.25rem 0 1rem}
.bbpm-h2{font-size:clamp(1.5rem,2vw + 0.75rem,2.25rem);line-height:1.15;margin:0 0 .75rem;font-weight:900;letter-spacing:-0.02em;color:var(--bbpm-brand-700)}
.bbpm-h3{font-size:clamp(1.05rem,.6vw + .9rem,1.25rem);margin:.25rem 0 .4rem;font-weight:800}
.bbpm-muted{color:var(--bbpm-ink-500)}
.bbpm-list{padding-left:1.1rem;margin:.6rem 0 1rem}

/* buttons */
.bbpm-btn{--bg:var(--bbpm-orange);--fg:#fff;--bd:transparent;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:14px 28px;border-radius:var(--bbpm-rad-btn);border:1px solid var(--bd);background:var(--bg);color:var(--fg);font-weight:700;letter-spacing:.2px;text-decoration:none;line-height:1;transition:transform .15s ease,background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}
.bbpm-btn:active{transform:translateY(1px)}
.bbpm-btn:hover{background:var(--bbpm-orange-hover);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(217,106,59,.3)}
.bbpm-btn--ghost{--bg:transparent;--fg:var(--bbpm-brand-700);--bd:var(--bbpm-brand-700)}
.bbpm-btn--ghost:hover{background:var(--bbpm-brand-700);color:#fff;border-color:var(--bbpm-brand-700);box-shadow:none}
.bbpm-btn--secondary{--bg:#fff;--fg:var(--bbpm-brand-700);--bd:#fff}
.bbpm-btn--secondary:hover{background:#f8f8f8;color:var(--bbpm-brand-700);box-shadow:none;transform:none}
.bbpm-btn--outline{--bg:transparent;--fg:var(--bbpm-brand-700);--bd:var(--bbpm-brand-700)}
.bbpm-btn--outline:hover{background:var(--bbpm-brand-700);color:#fff;box-shadow:none}
.bbpm-btnrow{display:flex;gap:.6rem;flex-wrap:wrap}
.bbpm-btnrow.bbpm-center{justify-content:center}
.bbpm-btn--white{--bg:#fff;--fg:var(--bbpm-brand-700);--bd:#fff}
.bbpm-btn--white:hover{background:#f8f8f8;color:var(--bbpm-brand-700)}
.bbpm-link-secondary{color:var(--bbpm-brand-700);font-weight:600;text-decoration:none}
.bbpm-link-secondary:hover{text-decoration:underline}

/* cards & grids */
.bbpm-card{background:#fff;border:1px solid var(--bbpm-line-200);border-radius:var(--bbpm-rad-m);box-shadow:var(--bbpm-shadow-s);padding:clamp(16px,1.6vw,20px);height:100%}
.bbpm-icon{width:56px;height:56px;border-radius:12px;display:inline-grid;place-items:center;background:var(--bbpm-accent-100);color:var(--bbpm-brand-700);border:1px solid #e9e2d5;margin-bottom:.5rem;overflow:hidden;font-size:1.5rem}
.bbpm-icon img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.bbpm-feature-icon img{width:28px;height:28px;object-fit:contain;vertical-align:middle}
.bbpm-benefit-icon img{width:1.5em;height:1.5em;object-fit:contain;vertical-align:middle}
.bbpm-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
@media (max-width:980px){.bbpm-grid-3{grid-template-columns:1fr}}
@media (max-width:560px){.bbpm-grid-3{grid-template-columns:1fr}}

/* lightbox trigger (algemeen voor alle componenten) */
.bbpm-lightbox-trigger{cursor:pointer;display:block;transition:transform 0.2s ease, opacity 0.2s ease}
.bbpm-lightbox-trigger:hover{opacity:0.95;transform:scale(1.01)}

/* hero — full-width, generous whitespace */
.bbpm-hero{background:var(--bbpm-accent-100);padding:clamp(32px,4vw,48px) clamp(24px,5vw,80px) clamp(60px,8vw,100px)}
.bbpm-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,5vw,80px);align-items:center;padding-block:0;max-width:1300px;margin:0 auto}
@media (max-width:980px){.bbpm-hero-grid{grid-template-columns:1fr;gap:32px}.bbpm-hero{padding:48px 24px 56px}}

/* Hero breadcrumb — subtle bar above hero */
.bbpm-breadcrumb{background:#fff;padding:14px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.bbpm-breadcrumb-inner{max-width:1300px;margin:0 auto;padding:0 clamp(24px,5vw,80px)}
.bbpm-breadcrumb a{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:500;color:var(--bbpm-ink-500);text-decoration:none;transition:color .15s ease}
.bbpm-breadcrumb a:hover{color:var(--bbpm-brand-700);text-decoration:underline}

/* Hero eyebrow — like bb-breadcrumbs */
.bbpm-hero .bbpm-eyebrow{font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--bbpm-brand-700);margin-bottom:24px}

/* Hero title — large, bold, zwartopwit-inspired */
.bbpm-hero .bbpm-h1{font-size:clamp(2.5rem,5vw,4rem);font-weight:900;line-height:1.1;color:var(--bbpm-brand-700);margin-bottom:24px;letter-spacing:-0.03em;position:relative;padding-bottom:0}
.bbpm-hero .bbpm-h1::after{display:none}

/* Hero lead */
.bbpm-hero .bbpm-hero-lead{font-size:clamp(1.1rem,1.2vw,1.3rem);line-height:1.7;color:var(--bbpm-ink-500);margin:20px 0 36px;max-width:560px}

/* Hero image card — flat, no shadows, no radius */
.bbpm-hero-card{aspect-ratio:4/3;background:#f4efe6;border:none;border-radius:0;box-shadow:none;overflow:hidden}
.bbpm-hero-card img{width:100%;height:100%;object-fit:cover}
.bbpm-hero-card .bbpm-lightbox-trigger{height:100%}

/* Hero buttons — compact like bb-page-header */
.bbpm-hero .bbpm-btnrow{margin-top:8px}

/* Hero mobile — image above like bb-page-header */
@media (max-width:980px){.bbpm-hero-card{order:-1;max-height:250px}.bbpm-hero .bbpm-h1{font-size:clamp(1.75rem,5vw,2.25rem)}.bbpm-hero .bbpm-hero-lead{font-size:1rem}}

/* impact banner */
.bbpm-impact-banner{padding:clamp(12px,2vw,20px) 0;border-radius:18px}
.bbpm-banner-content{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700}
.bbpm-banner--left .bbpm-banner-content{justify-content:flex-start}
.bbpm-banner--right .bbpm-banner-content{justify-content:flex-end}
.bbpm-banner-icon{font-size:1.2em;opacity:0.9}
.bbpm-banner-small{font-size:clamp(0.85rem,1vw,1rem)}
.bbpm-banner-medium{font-size:clamp(1rem,1.2vw,1.125rem)}
.bbpm-banner-large{font-size:clamp(1.125rem,1.4vw,1.25rem)}

/* cta */
.bbpm-cta{background:var(--bbpm-accent-100);text-align:center}
.bbpm-hero-lead{font-size:clamp(1.05rem,.6vw + 1rem,1.25rem);color:var(--bbpm-ink-700);margin:0 0 1.25rem}

/* Campaign Bar CSS */
/* titel (ín de balk) */
.bb-campaign-heading{
  text-align:center;
  font-weight:800;
  line-height:1.25;
  margin:0 0 10px 0;
  font-size:clamp(18px,2.2vw,28px);
  color:inherit;
}

/* balk */
.bb-campaign-bar{
  --bb-bg:#0f5d47;  --bb-fg:#ffffff;  --bb-frame:#0a4c35;  --bb-sep:#0a4c35;

  --bb-primary:#39c18d;      /* primaire knop + progress fill */
  --bb-secondary:#d5491e;    /* secundaire knop basiskleur (outline/ghost gebruiken border/background varianten) */
  --bb-secondary-rgb:213,73,30;

  /* optionele hover vars:
     --bb-primary-hover-bg, --bb-primary-hover-fg
     --bb-secondary-hover-bg, --bb-secondary-hover-fg, --bb-secondary-hover-border
  */

  background:var(--bb-bg);
  color:var(--bb-fg);
  border-radius:18px;
  padding:14px 18px;
}
.bb-campaign-bar.bb-layout--full{border-radius:0}

/* Campaign Bar enhanced styling — full-width bars (footer, footer injection, fullwidth template pages) */
.bb-campaign-bar.bb-layout--full,
.page-template-template-wpbakery-fullwidth .bb-campaign-bar,
#footer .bb-campaign-bar {
  border-radius: 0;
  padding: 80px 0;
  margin: 0;
  max-width: 100%;
  background: linear-gradient(135deg, #0f5d47 0%, #1a6b52 100%);
  box-shadow: none;
}

:is(.bb-campaign-bar.bb-layout--full, .page-template-template-wpbakery-fullwidth .bb-campaign-bar, #footer .bb-campaign-bar) .bb-shell {
  max-width: 100%;
  margin: 0;
  padding: 0 60px;
}

@media (max-width: 900px) {
  :is(.bb-campaign-bar.bb-layout--full, .page-template-template-wpbakery-fullwidth .bb-campaign-bar, #footer .bb-campaign-bar) .bb-shell {
    padding: 0 40px;
  }
}

@media (max-width: 600px) {
  :is(.bb-campaign-bar.bb-layout--full, .page-template-template-wpbakery-fullwidth .bb-campaign-bar, #footer .bb-campaign-bar) .bb-shell {
    padding: 0 30px;
  }
}

/* Typography */
:is(.bb-campaign-bar.bb-layout--full, .page-template-template-wpbakery-fullwidth .bb-campaign-bar, #footer .bb-campaign-bar) .bb-campaign-heading {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 4vw, 42px);
  margin-bottom: 16px;
  font-weight: 800;
}

:is(.bb-campaign-bar.bb-layout--full, .page-template-template-wpbakery-fullwidth .bb-campaign-bar, #footer .bb-campaign-bar) .bb-progress-label {
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 600;
  opacity: 0.95;
}

:is(.bb-campaign-bar.bb-layout--full, .page-template-template-wpbakery-fullwidth .bb-campaign-bar, #footer .bb-campaign-bar) .bb-stat-value {
  font-family: 'Fraunces', serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 800;
}

:is(.bb-campaign-bar.bb-layout--full, .page-template-template-wpbakery-fullwidth .bb-campaign-bar, #footer .bb-campaign-bar) .bb-stat-label {
  font-size: 14px;
  opacity: 0.9;
}

/* Progress bar */
:is(.bb-campaign-bar.bb-layout--full, .page-template-template-wpbakery-fullwidth .bb-campaign-bar, #footer .bb-campaign-bar) .bb-progress-track {
  height: 14px;
  background: rgba(255, 255, 255, 0.2);
  margin-top: 10px;
}

:is(.bb-campaign-bar.bb-layout--full, .page-template-template-wpbakery-fullwidth .bb-campaign-bar, #footer .bb-campaign-bar) .bb-progress-fill {
  background: var(--bb-primary);
  box-shadow: 0 2px 8px rgba(57, 193, 141, 0.3);
}

/* Phase styling */
:is(.bb-campaign-bar.bb-layout--full, .page-template-template-wpbakery-fullwidth .bb-campaign-bar, #footer .bb-campaign-bar) .bb-phase-track {
  height: 10px;
  background: rgba(255, 255, 255, 0.18);
}

:is(.bb-campaign-bar.bb-layout--full, .page-template-template-wpbakery-fullwidth .bb-campaign-bar, #footer .bb-campaign-bar) .bb-phase-fill {
  background: var(--bb-primary);
}

:is(.bb-campaign-bar.bb-layout--full, .page-template-template-wpbakery-fullwidth .bb-campaign-bar, #footer .bb-campaign-bar) .bb-phase-checkmark {
  width: 20px;
  height: 20px;
  font-size: 12px;
}

/* Button styling */
:is(.bb-campaign-bar.bb-layout--full, .page-template-template-wpbakery-fullwidth .bb-campaign-bar, #footer .bb-campaign-bar) .bb-btn-primary {
  background: var(--bb-primary);
  color: #0b1115;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 4px 14px rgba(57, 193, 141, 0.25);
  transition: all 0.2s ease;
}

:is(.bb-campaign-bar.bb-layout--full, .page-template-template-wpbakery-fullwidth .bb-campaign-bar, #footer .bb-campaign-bar) .bb-btn-primary:hover {
  background: var(--bb-primary-hover-bg, var(--bb-primary));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(57, 193, 141, 0.35);
}

:is(.bb-campaign-bar.bb-layout--full, .page-template-template-wpbakery-fullwidth .bb-campaign-bar, #footer .bb-campaign-bar) .bb-btn-secondary {
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: white;
  background: transparent;
  padding: 12px 26px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 9999px;
  transition: all 0.2s ease;
}

:is(.bb-campaign-bar.bb-layout--full, .page-template-template-wpbakery-fullwidth .bb-campaign-bar, #footer .bb-campaign-bar) .bb-btn-secondary:hover {
  border-color: white;
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 900px) {
  .bb-campaign-bar.bb-layout--full,
  .page-template-template-wpbakery-fullwidth .bb-campaign-bar,
  #footer .bb-campaign-bar {
    padding: 60px 0;
  }

  :is(.bb-campaign-bar.bb-layout--full, .page-template-template-wpbakery-fullwidth .bb-campaign-bar, #footer .bb-campaign-bar) .bb-campaign-heading {
    font-size: clamp(24px, 5vw, 32px);
  }

  :is(.bb-campaign-bar.bb-layout--full, .page-template-template-wpbakery-fullwidth .bb-campaign-bar, #footer .bb-campaign-bar) .bb-stat-value {
    font-size: clamp(28px, 6vw, 40px);
  }
}

@media (max-width: 600px) {
  .bb-campaign-bar.bb-layout--full,
  .page-template-template-wpbakery-fullwidth .bb-campaign-bar,
  #footer .bb-campaign-bar {
    padding: 50px 0;
  }
}

/* Footer campaign bar: break out of Foundation row max-width */
#footer .bb-campaign-wrap {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* GRID: links progress 1fr, midden stats auto, rechts actions auto */
.bb-campaign-bar .bb-shell{
  display:grid;
  grid-template-columns: 1fr auto auto;
  align-items:center;
  column-gap: clamp(16px, 2vw, 28px);
}
@media (max-width:900px){
  .bb-campaign-bar{padding:18px 18px}
  .bb-campaign-bar .bb-shell{grid-template-columns:1fr;row-gap:16px}
}

/* --- PROGRESS-KOLOM LINKS --- */
.bb-progress-col{display:grid;grid-template-rows:auto auto}
.bb-progress-header{display:flex;align-items:center}
.bb-progress-label{
  font-weight:700;font-size:clamp(14px,1.4vw,16px);line-height:1.2;opacity:.98
}
.bb-progress-track{
  position:relative;width:100%;height:10px;border-radius:9999px;
  background:rgba(255,255,255,.18);overflow:hidden;margin-top:6px
}
.bb-progress-fill{
  position:absolute;left:0;top:0;bottom:0;width:var(--bb-progress,0%);
  background:var(--bb-primary);border-radius:9999px
}

/* --- FASES --- */
.bb-phases-wrapper{display:flex;flex-direction:column;gap:12px}
.bb-phase{display:grid;grid-template-rows:auto auto;gap:4px}
.bb-phase-label{
  font-weight:700;font-size:clamp(13px,1.3vw,15px);line-height:1.2;opacity:.95;
  display:flex;align-items:center;gap:6px
}
.bb-phase-checkmark{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;
  background:var(--bb-primary);color:var(--bb-bg);
  font-size:11px;font-weight:900;line-height:1
}
.bb-phase-track{
  position:relative;width:100%;height:8px;border-radius:9999px;
  background:rgba(255,255,255,.15);overflow:hidden
}
.bb-phase-fill{
  position:absolute;left:0;top:0;bottom:0;
  background:var(--bb-primary);border-radius:9999px;
  transition:width 0.3s ease
}

/* --- STATS MIDDEN --- */
.bb-stats{display:flex;gap:36px;justify-content:flex-end;text-align:right}
@media (max-width:900px){.bb-stats{justify-content:center;gap:28px;text-align:center}}
@media (max-width:600px){.bb-stats{justify-content:space-around;gap:22px;flex-wrap:wrap}}
.bb-stat{min-width:90px}
.bb-stat-value{font-weight:800;line-height:1;letter-spacing:.5px;font-size:clamp(24px,4.2vw,44px)}
.bb-stat-label{opacity:.95;font-size:13px;margin-top:4px; text-align: center}
@media (min-width:901px){
  .bb-stats .bb-stat + .bb-stat{border-left:1px solid var(--bb-sep);padding-left:36px}
}

/* --- KNOPPEN RECHTS --- */
.bb-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.bb-actions:empty{display:none}
@media (max-width:900px){.bb-actions{justify-content:center}}
.bb-campaign-bar .bb-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding:12px 18px;font-weight:800;text-decoration:none;transition:transform .06s ease,background-color .15s ease,color .15s ease,border-color .15s ease}
.bb-campaign-bar .bb-btn:active{transform:translateY(1px)}

/* primaire — scoped to campaign bar to avoid conflict with theme .bb-btn */
.bb-campaign-bar .bb-btn-primary{background:var(--bb-primary);color:#0b1115}
.bb-campaign-bar .bb-btn-primary:hover{background:var(--bb-primary-hover-bg,var(--bb-primary));color:var(--bb-primary-hover-fg,#fff)}

/* secundaire – SOLID (fallback) — scoped to campaign bar */
.bb-campaign-bar .bb-btn-secondary{background:var(--bb-secondary);color:#fff;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15);border:0}
.bb-campaign-bar .bb-btn-secondary:hover{background:var(--bb-secondary-hover-bg,var(--bb-secondary));color:var(--bb-secondary-hover-fg,#fff)}

/* secundaire – OUTLINE */
.bb-secondary--outline .bb-btn-secondary{background:transparent;color:var(--bb-secondary);border:2px solid var(--bb-secondary);box-shadow:none}
.bb-secondary--outline .bb-btn-secondary:hover{background:var(--bb-secondary-hover-bg,rgba(var(--bb-secondary-rgb),.12));color:var(--bb-secondary-hover-fg,var(--bb-secondary));border-color:var(--bb-secondary-hover-border,var(--bb-secondary))}

/* secundaire – GHOST */
.bb-secondary--ghost .bb-btn-secondary{background:rgba(var(--bb-secondary-rgb),.12);color:var(--bb-secondary);border:1px solid rgba(var(--bb-secondary-rgb),.35);box-shadow:none}
.bb-secondary--ghost .bb-btn-secondary:hover{background:var(--bb-secondary-hover-bg,rgba(var(--bb-secondary-rgb),.18));color:var(--bb-secondary-hover-fg,var(--bb-secondary));border-color:var(--bb-secondary-hover-border,rgba(var(--bb-secondary-rgb),.35))}

/* palet: neutral (wit) voor outline/ghost op donkere balk */
.bb-secondary-palette--neutral{--bb-secondary:#ffffff;--bb-secondary-rgb:255,255,255}
.bb-secondary-palette--neutral .bb-btn-secondary{color:#ffffff}
.bb-secondary-palette--neutral.bb-secondary--solid .bb-btn-secondary{background:#ffffff;color:#0b1115}
.bb-secondary-palette--neutral.bb-secondary--outline .bb-btn-secondary{border-color:#ffffff}
.bb-secondary-palette--neutral.bb-secondary--ghost .bb-btn-secondary{border-color:rgba(255,255,255,.35)}

/* Steps Component CSS */
.bb-steps-wrap{
  --bb-brand:#0f5d47;   /* donkergroen */
  --bb-accent:#39c18d;  /* mintgroen */
  --bb-fg:#0b1115;
}

/* heading */
.bb-steps-head{margin-bottom:10px;text-align:left}
.bb-steps-title{margin:0 0 6px 0;line-height:1.2;font-size:clamp(22px,2.8vw,32px);color:var(--bb-fg)}
.bb-steps-intro{margin:0;opacity:.9}

/* grid */
.bb-steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(16px,3vw,28px);
  margin:22px 0 0 0;
  list-style:none;padding:0
}
/* Voor meer controle op kleinere schermen */
@media (max-width:1200px) {
  .bb-steps{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
}

/* horizontale lijn achter de markers (desktop) */
.bb-steps::before{
  content:"";
  position:absolute;left:0;right:0;top:40px;height:2px;
  background:linear-gradient(90deg, rgba(15,93,71,.18), rgba(15,93,71,.18));
}
@media (max-width:980px){ .bb-steps{grid-template-columns:repeat(2,1fr)} .bb-steps::before{display:none} }
@media (max-width:560px){ .bb-steps{grid-template-columns:1fr} }

/* item */
.bb-step{ text-align:center; padding-top:22px }
.bb-step-inner{ background:#fff; border-radius:16px; padding:12px 14px 16px; box-shadow:0 1px 0 rgba(0,0,0,.05) }
.bb-step:hover .bb-step-inner{ box-shadow:0 3px 14px rgba(0,0,0,.08) }

/* marker (groot rond nummer) */
.bb-step-marker{
  width:60px;height:60px;border-radius:50%;
  background:var(--bb-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:22px;margin:-30px auto 8px;
  position:relative;z-index:2;box-shadow:0 2px 0 rgba(0,0,0,.08)
}

/* icon onder nummer */
.bb-step-icon{font-size:22px;color:var(--bb-brand);line-height:1;margin-top:6px}

/* teksten */
.bb-step-title{margin:10px 0 6px 0;font-weight:800;font-size:18px;color:var(--bb-fg)}
.bb-step-text{margin:0 auto;max-width:34ch;opacity:.9}

/* variant: accentkleur voor marker */
.bb-steps--accent .bb-step-marker{ background:var(--bb-accent); color:#0b1115 }

/* CTA onderaan optioneel */
.bb-steps-cta{margin-top:18px;text-align:left}
.bb-steps-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 18px;border-radius:9999px;
  background:var(--bb-accent);color:#0b1115;font-weight:800;text-decoration:none
}
.bb-steps-btn:hover{ filter:brightness(0.95) }

/* ================================
   KERSTKAARTEN COMPONENTEN
   ================================ */

/* Announcement Bar */
.bbpm-announcement-bar {
  width: 100%;
  text-align: center;
  font-size: 14px;
  padding: 8px 16px;
  position: relative;
}
.bbpm-announcement-content {
  max-width: var(--bbpm-maxw);
  margin: 0 auto;
  position: relative;
}
.bbpm-announcement-highlight {
  font-weight: 700;
  margin-right: 4px;
}
.bbpm-announcement-close {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* FAQ Component */
.bbpm-faq {
  background: #fff;
}
.bbpm-faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.bbpm-faq-item {
  background: #fff;
  border: 1px solid var(--bbpm-line-200);
  border-radius: var(--bbpm-rad-m);
  padding: 20px;
  box-shadow: var(--bbpm-shadow-s);
}
.bbpm-faq-question {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--bbpm-ink-900);
  margin: 0;
  padding: 0;
}
.bbpm-faq-question::-webkit-details-marker {
  display: none;
}
.bbpm-faq-answer {
  margin-top: 12px;
  color: var(--bbpm-ink-700);
  line-height: 1.5;
}
.bbpm-section-intro {
  margin-top: 8px;
  margin-bottom: 0;
  color: var(--bbpm-ink-700);
  max-width: 60ch;
}
.bbpm-section-cta {
  margin-top: 32px;
  text-align: center;
}

/* FAQ Section (bb-faq from Faq.php component) */
.bb-faq-section{padding:clamp(40px,6vw,72px) clamp(16px,3vw,28px);max-width:var(--bbpm-maxw);margin:0 auto}
.bb-faq-section .bb-section-heading{font-size:clamp(1.375rem,1.4vw + 1rem,2rem);font-weight:800;margin:0 0 .75rem;line-height:1.2}
.bb-faq-section .bb-section-eyebrow{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bbpm-brand-700);font-weight:700;margin-bottom:.5rem}
.bb-faq-card{background:#fff;padding:clamp(20px,2.5vw,32px);border-radius:var(--bbpm-rad-m);border:1px solid var(--bbpm-line-200);box-shadow:var(--bbpm-shadow-s);margin-bottom:12px;transition:border-color .2s ease,box-shadow .2s ease}
.bb-faq-card:hover{border-color:#c5d6c0;box-shadow:0 6px 24px rgba(30,90,67,.08)}
.bb-faq-card h3{font-size:clamp(1rem,.4vw + .9rem,1.15rem);font-weight:700;color:var(--bbpm-ink-900);margin:0 0 8px}
.bb-faq-card p{color:var(--bbpm-ink-700);line-height:1.7;margin:0;font-size:.95rem}
details.bb-faq-card{cursor:pointer}
details.bb-faq-card > summary{list-style:none;font-size:clamp(1rem,.4vw + .9rem,1.15rem);font-weight:700;color:var(--bbpm-ink-900);display:flex;align-items:center;justify-content:space-between;gap:16px}
details.bb-faq-card > summary::-webkit-details-marker{display:none}
details.bb-faq-card > summary::after{content:"+";font-size:1.4rem;font-weight:400;color:var(--bbpm-brand-700);transition:transform .2s ease;flex-shrink:0}
details.bb-faq-card[open] > summary::after{content:"−"}
details.bb-faq-card[open] > summary{margin-bottom:12px}
details.bb-faq-card .bb-faq-answer{color:var(--bbpm-ink-700);line-height:1.7;font-size:.95rem}
details.bb-faq-card .bb-faq-answer p{margin:0 0 8px}
details.bb-faq-card .bb-faq-answer p:last-child{margin-bottom:0}
.bb-faq-section .bb-section-cta{margin-top:24px;text-align:center}

/* Value Props Component */
.bbpm-value-props-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 980px) {
  .bbpm-value-props-grid {
    grid-template-columns: 1fr;
  }
}
.bbpm-value-description {
  margin-top: 16px;
  color: var(--bbpm-ink-700);
  line-height: 1.6;
  max-width: 60ch;
}
.bbpm-value-features {
  list-style: none;
  padding: 0;
  margin: 24px 0 0 0;
}
.bbpm-value-feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.bbpm-feature-icon {
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}
.bbpm-value-cta {
  margin-top: 32px;
}

/* Impact Card */
.bbpm-impact-card {
  background: #fff;
  border: 1px solid var(--bbpm-line-200);
  border-radius: var(--bbpm-rad-l);
  padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--bbpm-shadow-m);
}
.bbpm-impact-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 24px 0;
  color: var(--bbpm-ink-900);
}
.bbpm-impact-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}
@media (max-width: 640px) {
  .bbpm-impact-numbers {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.bbpm-impact-item {
  text-align: center;
}
.bbpm-impact-number {
  width: 64px;
  height: 64px;
  border-radius: var(--bbpm-rad-m);
  background: var(--bbpm-accent-100);
  color: var(--bbpm-brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  margin: 0 auto 12px;
}
.bbpm-impact-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--bbpm-ink-900);
  margin: 0;
}
.bbpm-impact-note {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--bbpm-rad-m);
  padding: 16px;
  font-size: 14px;
  color: var(--bbpm-ink-700);
}

/* Testimonials */
.bbpm-testimonials {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.bbpm-testimonials-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.bbpm-testimonial,
.bbpm-testimonial-card {
  background: #fff;
  border: 1px solid var(--bbpm-line-200);
  border-radius: var(--bbpm-rad-l);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--bbpm-shadow-m);
  margin: 0;
}
.bbpm-testimonial-text {
  font-size: 18px;
  color: var(--bbpm-ink-900);
  margin: 0 0 16px 0;
  line-height: 1.5;
}
.bbpm-testimonial-author {
  font-size: 14px;
  color: var(--bbpm-ink-500);
  margin: 0;
}

/* Product Showcase */
.bbpm-product-showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 980px) {
  .bbpm-product-showcase-grid {
    grid-template-columns: 1fr;
  }
}
.bbpm-product-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 24px 0;
  color: var(--bbpm-ink-900);
}
.bbpm-product-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
}
.bbpm-product-feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.bbpm-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Visit Section */
.bbpm-visit-section {
  color: #fff;
}
.bbpm-visit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 980px) {
  .bbpm-visit-grid {
    grid-template-columns: 1fr;
  }
}
.bbpm-visit-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 16px 0;
}
.bbpm-visit-description {
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 24px 0;
  line-height: 1.6;
}
.bbpm-visit-cta {
  margin: 0;
}

/* Map */
.bbpm-map-embed {
  border-radius: var(--bbpm-rad-l);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.bbpm-map-embed iframe {
  width: 100%;
  height: 300px;
  border: 0;
}
.bbpm-map-placeholder {
  aspect-ratio: 16 / 10;
  width: 100%;
  border-radius: var(--bbpm-rad-l);
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  overflow: hidden;
  position: relative;
}
.bbpm-map-grid {
  height: 100%;
  width: 100%;
  background-image: 
    linear-gradient(90deg, rgba(16,185,129,0.12) 1px, transparent 1px),
    linear-gradient(0deg, rgba(16,185,129,0.12) 1px, transparent 1px);
  background-size: 32px 32px;
}
.bbpm-map-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bbpm-brand-700);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 9999px;
}

/* Over Ons Page Styles */

/* Team Grid */
.bbpm-team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  margin: 40px 0;
}

.bbpm-team-member {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--bbpm-shadow-s);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bbpm-team-member:hover {
  transform: translateY(-5px);
  box-shadow: var(--bbpm-shadow-m);
}

.bbpm-member-photo {
  width: 100%;
  height: 350px;
  background: var(--bbpm-accent-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bbpm-member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bbpm-photo-placeholder {
  color: var(--bbpm-brand-700);
  font-size: 0.9em;
  text-align: center;
  padding: 20px;
}

.bbpm-member-info {
  padding: 30px;
}

.bbpm-member-name {
  color: var(--bbpm-brand-700);
  font-size: 1.6em;
  margin-bottom: 5px;
  font-weight: 600;
}

.bbpm-member-role {
  color: var(--bbpm-ink-500);
  font-size: 1em;
  margin-bottom: 20px;
}

.bbpm-member-bio {
  color: var(--bbpm-ink-700);
  line-height: 1.7;
}

.bbpm-member-bio ul {
  padding-left: 0;
  list-style: none;
}

.bbpm-member-bio li {
  margin: 8px 0;
  padding-left: 16px;
  position: relative;
}

.bbpm-member-bio li:before {
  content: "•";
  color: var(--bbpm-brand-700);
  position: absolute;
  left: 0;
}

/* Values Grid */
.bbpm-values-wrapper {
  background: var(--bbpm-accent-100);
  padding: 80px 40px;
  border-radius: var(--bbpm-rad-l);
  margin: 0;
}

.bbpm-values-section {
  padding: 40px 20px 20px 20px !important;
}

.bbpm-values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 25px;
}

.bbpm-value-card {
  background: white;
  padding: 32px;
  border-radius: var(--bbpm-rad-l);
  box-shadow: var(--bbpm-shadow-s);
  transition: transform 0.3s cubic-bezier(.4,0,.2,1), box-shadow 0.3s cubic-bezier(.4,0,.2,1);
  text-align: center;
}

.bbpm-value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bbpm-shadow-m);
}

.bbpm-value-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bbpm-accent-100);
  border-radius: 14px;
  font-size: 1.5rem;
}

.bbpm-value-icon img {
  max-width: 36px;
  height: auto;
  display: inline-block;
}

.bbpm-value-card h3 {
  color: var(--bbpm-brand-700);
  font-size: 1.2em;
  font-weight: 700;
  margin-bottom: 12px;
}

.bbpm-value-card p {
  font-size: 0.95em;
  line-height: 1.7;
  color: var(--bbpm-ink-500);
}

/* Timeline Section */
.bbpm-timeline {
  max-width: 1000px;
  margin: 0 auto;
}

.bbpm-timeline-item {
  margin-bottom: 50px;
}

.bbpm-timeline-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.bbpm-timeline-reverse .bbpm-timeline-content {
  direction: rtl;
}

.bbpm-timeline-reverse .bbpm-timeline-text {
  direction: ltr;
}

.bbpm-timeline-year-location {
  color: var(--bbpm-brand-700);
  font-size: 1.1em;
  margin-bottom: 20px;
}

.bbpm-timeline-text-content {
  color: var(--bbpm-ink-700);
  line-height: 1.8;
}

.bbpm-timeline-image {
  width: 100%;
  height: 400px;
  background: var(--bbpm-accent-100);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bbpm-timeline-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bbpm-image-placeholder {
  color: var(--bbpm-brand-700);
  font-size: 0.9em;
  text-align: center;
  padding: 20px;
}

@media (max-width: 768px) {
  .bbpm-timeline-content {
    grid-template-columns: 1fr;
  }
  
  .bbpm-timeline-reverse .bbpm-timeline-content {
    direction: ltr;
  }
  
  .bbpm-team-grid {
    grid-template-columns: 1fr;
  }
}

/* Quote Box — full-width statement section */
.bbpm-quote-box {
  background: transparent;
  padding: clamp(40px,6vw,80px) clamp(24px,5vw,80px);
  border-radius: 0;
  margin: 0;
  border-left: none;
  box-shadow: none;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.bbpm-quote-box::before {
  content: "\201C";
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(5rem, 9vw, 8rem);
  line-height: .8;
  color: var(--bbpm-brand-700, #0f5d47);
  opacity: .18;
  margin-bottom: -.3em;
}

.bbpm-quote-box blockquote {
  font-style: normal;
  font-size: clamp(1.3rem,2.5vw,1.8rem);
  color: var(--bbpm-ink-900);
  margin: 0;
  line-height: 1.4;
  font-weight: 600;
}

.bbpm-quote-caption {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bbpm-quote-caption .bbpm-quote-author {
  font-weight: 700;
  color: var(--bbpm-brand-700, #0f5d47);
  font-size: .95rem;
}
.bbpm-quote-caption .bbpm-quote-role {
  font-size: .85rem;
  color: var(--bbpm-ink-700, #5c6b66);
}
.bbpm-quote-center .bbpm-quote-caption { align-items: center; }
.bbpm-quote-right .bbpm-quote-caption { align-items: flex-end; }

.bbpm-quote-accent {
  background: var(--bbpm-brand-700);
  color: #fff;
  border-left: none;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: clamp(60px,8vw,100px) clamp(24px,5vw,80px);
  box-sizing: border-box;
}

.bbpm-quote-accent blockquote {
  color: #fff;
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(1.4rem,3vw,2.2rem);
}

.bbpm-quote-large blockquote {
  font-size: clamp(1.5rem,3vw,2.2rem);
}

.bbpm-quote-center {
  text-align: center;
}

.bbpm-quote-left {
  text-align: left;
}

.bbpm-quote-right {
  text-align: right;
}

/* News Grid Component */
.bbpm-news-section {
  background: #fff;
}

.bbpm-news-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px;
}

.bbpm-news-description {
  font-size: 1.1em;
  color: var(--bbpm-ink-500);
  line-height: 1.6;
  margin: 0;
}

.bbpm-news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.bbpm-news-item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--bbpm-shadow-s);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--bbpm-line-200);
}

.bbpm-news-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--bbpm-shadow-m);
}

.bbpm-news-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: var(--bbpm-accent-100);
}

.bbpm-news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.bbpm-news-item:hover .bbpm-news-image img {
  transform: scale(1.05);
}

.bbpm-news-content {
  padding: 25px;
}

.bbpm-news-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-size: 0.9em;
  color: var(--bbpm-ink-500);
}

.bbpm-news-source {
  font-weight: 600;
  color: var(--bbpm-brand-700);
}

.bbpm-news-date {
  font-style: italic;
}

.bbpm-news-title {
  margin: 0 0 15px 0;
  font-size: 1.3em;
  line-height: 1.4;
  font-weight: 600;
}

.bbpm-news-title a {
  color: var(--bbpm-ink-900);
  text-decoration: none;
  transition: color 0.3s ease;
}

.bbpm-news-title a:hover {
  color: var(--bbpm-brand-700);
}

.bbpm-news-summary {
  color: var(--bbpm-ink-700);
  line-height: 1.6;
  margin: 0 0 20px 0;
  font-size: 1em;
}

.bbpm-news-link {
  display: inline-flex;
  align-items: center;
  color: var(--bbpm-brand-700);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95em;
  transition: color 0.3s ease;
}

.bbpm-news-link:hover {
  color: var(--bbpm-ink-900);
  text-decoration: none;
}

/* Single column layout for very small screens */
@media (max-width: 400px) {
  .bbpm-news-grid {
    grid-template-columns: 1fr;
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .bbpm-news-content {
    padding: 20px;
  }
  
  .bbpm-news-title {
    font-size: 1.2em;
  }
  
  .bbpm-news-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
}

/* Who Are We Component — full-width, generous spacing */
.bbpm-who-are-we {
  margin: 0;
}

.bbpm-who-background-light {
  background: var(--bbpm-accent-100);
  padding: clamp(80px,10vw,140px) clamp(24px,5vw,80px);
  border-radius: 0;
}

.bbpm-who-background-white {
  background: #fff;
  padding: clamp(80px,10vw,140px) clamp(24px,5vw,80px);
  border-radius: 0;
  box-shadow: none;
}

.bbpm-who-background-transparent {
  background: transparent;
  padding: clamp(60px,8vw,120px) 0;
}

/* Content Section - Wide container */
.bbpm-content-section-wide {
  margin-left: 0;
  margin-right: 0;
}

.bbpm-content-section-wide .bbpm-container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.bbpm-content-section-wide.bbpm-who-background-light,
.bbpm-content-section-wide.bbpm-who-background-white {
  border-radius: 0;
}

/* Responsive video wrapper */
.bbpm-team-photo:has(.bbpm-responsive-video) {
  height: auto;
  display: block;
  padding: 0;
  background: transparent;
}

.bbpm-responsive-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 0;
  width: 100%;
}

.bbpm-responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.bbpm-who-are-we-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px,5vw,80px);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.bbpm-who-style-reverse .bbpm-who-are-we-content {
  direction: rtl;
}

.bbpm-who-style-reverse .bbpm-who-text {
  direction: ltr;
}

.bbpm-who-style-text-only .bbpm-who-are-we-content {
  grid-template-columns: 1fr;
  max-width: 800px;
  text-align: center;
}

.bbpm-who-style-text-only .bbpm-who-image {
  display: none;
}

.bbpm-team-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  background: var(--bbpm-accent-100);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bbpm-brand-700);
  font-size: 0.9em;
  text-align: center;
  padding: 0;
  overflow: hidden;
  box-shadow: none;
}

.bbpm-team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.bbpm-team-photo .bbpm-lightbox-trigger {
  width: 100%;
  height: 100%;
}

.bbpm-team-photo .bbpm-lightbox-trigger img {
  display: block;
}

.bbpm-who-title {
  color: var(--bbpm-brand-700);
  font-size: clamp(1.8rem,3.5vw,2.8rem);
  margin-bottom: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.bbpm-who-paragraph {
  font-size: clamp(1.05rem,1.1vw,1.2rem);
  color: var(--bbpm-ink-700);
  line-height: 1.8;
  margin-bottom: 20px;
  font-weight: 400 !important;
}

.bbpm-who-paragraph p {
  font-weight: 400 !important;
  margin: 0 0 10px 0;
}

.bbpm-who-paragraph strong {
  font-weight: 700 !important;
}

.bbpm-who-paragraph em {
  font-style: italic;
}

.bbpm-who-emphasis {
  font-size: 1.2em !important;
  color: var(--bbpm-brand-700) !important;
  margin-top: 25px !important;
}

.bbpm-who-emphasis p {
  font-weight: 400 !important;
}

.bbpm-who-emphasis strong {
  font-weight: 600 !important;
}

@media (max-width: 768px) {
  .bbpm-who-are-we-content {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: left;
  }

  .bbpm-who-style-reverse .bbpm-who-are-we-content {
    direction: ltr;
  }

  .bbpm-who-title {
    font-size: clamp(1.5rem,5vw,2rem);
  }

  .bbpm-who-background-light,
  .bbpm-who-background-white {
    padding: 60px 24px;
  }

  .bbpm-team-photo {
    height: auto;
    aspect-ratio: 16/10;
  }
}

/* Hero Visual - Card Mockup Component */
.bbpm-hero-visual {
  position: relative;
}

.bbpm-card-mockup-container {
  position: relative;
  margin: 0 auto;
  max-width: 448px; /* max-w-md = 28rem = 448px */
  padding: 20px 32px; /* p-5 lg:p-8 */
  border-radius: 24px; /* rounded-3xl */
  background: #fff;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-xl */
  border: 1px solid #dcfce7; /* ring-1 ring-emerald-100 */
}

.bbpm-card-mockup-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* grid-cols-3 */
  gap: 12px; /* gap-3 */
}

.bbpm-mockup-card {
  aspect-ratio: 3 / 4; /* aspect-[3/4] */
  border-radius: 12px; /* rounded-xl */
  background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%); /* bg-gradient-to-br from-emerald-100 to-emerald-50 */
  border: 1px solid rgba(187, 247, 208, 0.6); /* ring-1 ring-emerald-200/60 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.bbpm-mockup-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px; /* Slightly smaller than container */
}

.bbpm-card-placeholder {
  color: #047857; /* text-emerald-700 */
  font-weight: 600; /* font-semibold */
  font-size: 11px;
  text-align: center;
}

.bbpm-mockup-caption {
  margin-top: 16px; /* mt-4 */
  text-align: center;
  font-size: 14px; /* text-sm */
  color: #64748b; /* text-slate-500 */
  margin-bottom: 0;
}

/* Decoratieve bomen */
.bbpm-tree-left {
  position: absolute;
  bottom: 0; /* Tegen het kader */
  left: 0; /* Tegen het kader */
  width: 96px; /* w-24 = 6rem = 96px */
  transform: rotate(-6deg); /* rotate-[-6deg] */
  z-index: 1;
}

.bbpm-tree-right {
  position: absolute;
  bottom: 0; /* Tegen het kader */
  right: 0; /* Tegen het kader */
  width: 112px; /* w-28 = 7rem = 112px */
  transform: rotate(8deg); /* rotate-[8deg] */
  opacity: 0.8; /* opacity-80 */
  z-index: 1;
}

.bbpm-tree-left svg,
.bbpm-tree-right svg {
  width: 100%;
  height: auto;
}

/* Responsive aanpassingen */
@media (max-width: 1024px) {
  .bbpm-card-mockup-container {
    padding: 20px; /* lg:p-8 -> p-5 */
  }
}

@media (max-width: 640px) {
  .bbpm-card-mockup-container {
    padding: 16px;
    max-width: 320px;
  }
  
  .bbpm-card-mockup-grid {
    gap: 8px;
  }
  
  .bbpm-card-placeholder {
    font-size: 9px;
  }
  
  .bbpm-tree-left {
    width: 60px;
    bottom: 0;
    left: 0;
  }
  
  .bbpm-tree-right {
    width: 70px;
    bottom: 0;
    right: 0;
  }
}

/* Lightbox functionaliteit */
.bbpm-card-clickable {
  cursor: pointer;
  position: relative;
  transition: transform 0.2s ease;
}

.bbpm-card-clickable:hover {
  transform: scale(1.05);
}

.bbpm-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 12px;
}

.bbpm-card-clickable:hover .bbpm-card-overlay {
  opacity: 1;
}

.bbpm-zoom-icon {
  font-size: 20px;
  color: white;
}

/* Lightbox modal */
.bbpm-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bbpm-lightbox-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

.bbpm-lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.bbpm-lightbox-image {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
}

.bbpm-lightbox-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.bbpm-lightbox-close:hover {
  background: rgba(0, 0, 0, 0.9);
}

.bbpm-lightbox-title {
  padding: 15px 20px;
  font-weight: 600;
  color: var(--bbpm-ink-900);
  border-top: 1px solid var(--bbpm-line-200);
}

.bbpm-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  pointer-events: none;
}

.bbpm-lightbox-prev,
.bbpm-lightbox-next {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  transition: background 0.2s ease;
}

.bbpm-lightbox-prev:hover,
.bbpm-lightbox-next:hover {
  background: rgba(0, 0, 0, 0.9);
}

.bbpm-lightbox-prev:disabled,
.bbpm-lightbox-next:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

@media (max-width: 640px) {
  .bbpm-lightbox-content {
    max-width: 95vw;
    max-height: 95vh;
  }
  
  .bbpm-lightbox-image {
    max-height: 70vh;
  }
  
  .bbpm-zoom-icon {
    font-size: 16px;
  }
}

/* Layout met tekst links */
.bbpm-mockup-with-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  max-width: var(--bbpm-maxw);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(16px, 3vw, 28px);
}

.bbpm-mockup-text-content {
  max-width: 100%;
}

.bbpm-mockup-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bbpm-accent-100);
  color: var(--bbpm-brand-700);
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}

.bbpm-eyebrow-icon {
  font-size: 16px;
}

.bbpm-mockup-title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 16px 0;
  color: var(--bbpm-ink-900);
}

.bbpm-mockup-title .bbpm-title-accent {
  color: var(--bbpm-brand-700);
}

.bbpm-mockup-description {
  font-size: 18px;
  line-height: 1.6;
  color: var(--bbpm-ink-700);
  margin: 0 0 24px 0;
  max-width: 60ch;
}

.bbpm-mockup-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
}

.bbpm-mockup-feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
  color: var(--bbpm-ink-700);
}

.bbpm-mockup-feature .bbpm-feature-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.bbpm-mockup-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Responsive voor tekst layout */
@media (max-width: 980px) {
  .bbpm-mockup-with-text {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  
  .bbpm-mockup-text-content {
    order: 1;
  }
  
  .bbpm-hero-visual {
    order: 2;
  }
}

@media (max-width: 640px) {
  .bbpm-mockup-with-text {
    padding: 32px 16px;
    gap: 32px;
  }
  
  .bbpm-mockup-buttons {
    justify-content: center;
  }
}

/* Impact Trio Footer Note */
.bbpm-impact-footer-note {
  margin-top: 24px;
  background: #f0fdf4; /* emerald-50 */
  border: 1px solid #bbf7d0; /* emerald-200 */
  border-radius: var(--bbpm-rad-m);
  padding: 16px 20px;
  font-size: 14px;
  color: var(--bbpm-ink-700);
  text-align: center;
}

.bbpm-impact-footer-note strong {
  color: var(--bbpm-ink-900);
}

/* ====== PLANTDAG COMPONENTEN CSS ====== */

/* Hero Plantdag */
.bbpm-hero-plantdag {
    background: transparent;
    color: var(--bbpm-brand-700);
    padding: 80px 20px;
    text-align: center;
    position: relative;
}
.bbpm-hero-plantdag--has-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    padding: clamp(80px,12vw,140px) 20px;
}
.bbpm-hero-plantdag--has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(30,90,67,.72) 0%, rgba(27,27,27,.68) 100%);
    z-index: 0;
}
.bbpm-hero-plantdag--has-bg .bbpm-hero-content {
    position: relative;
    z-index: 1;
}
.bbpm-hero-plantdag--has-bg .bbpm-hero-title {
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.bbpm-hero-plantdag--has-bg .bbpm-hero-description {
    color: rgba(255,255,255,.92);
}
.bbpm-hero-plantdag--has-bg .bbpm-hero-date {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.35);
    color: #fff;
}

.bbpm-hero-content {
    max-width: 900px;
    margin: 0 auto;
}

.bbpm-hero-date {
    background: var(--bbpm-brand-700);
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 30px;
    font-size: 1.3em;
    font-weight: bold;
    border: 2px solid var(--bbpm-brand-700);
}

.bbpm-hero-title {
    font-size: 3em;
    margin-bottom: 20px;
    font-weight: bold;
    line-height: 1.2;
    color: var(--bbpm-brand-700);
}

.bbpm-hero-description {
    font-size: 1.3em;
    margin-bottom: 30px;
    line-height: 1.6;
    color: var(--bbpm-ink-700);
}

.bbpm-cta-primary {
    display: inline-block;
    background: var(--bbpm-orange);
    color: white;
    padding: 16px 36px;
    border-radius: var(--bbpm-rad-btn);
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 700;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
    box-shadow: 0 4px 14px rgba(217, 106, 59, 0.3);
}

.bbpm-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(217, 106, 59, 0.4);
    background: var(--bbpm-orange-hover);
    color: white;
    text-decoration: none;
}

.bbpm-hero-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.bbpm-cta-secondary {
    display: inline-block;
    background: var(--bbpm-brand-700);
    color: white;
    padding: 16px 36px;
    border-radius: var(--bbpm-rad-btn);
    border: 2px solid var(--bbpm-brand-700);
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 700;
    transition: transform 0.2s, background 0.2s;
}

.bbpm-cta-secondary:hover {
    background: var(--bbpm-orange);
    border-color: var(--bbpm-orange);
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
}

/* Stats Bar — bold, generous */
.bbpm-stats-bar {
    background: var(--bbpm-accent-100);
    color: var(--bbpm-brand-700);
    padding: clamp(48px,6vw,80px) clamp(24px,5vw,80px);
    text-align: center;
    border-top: none;
}

.bbpm-stats-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 40px;
}

.bbpm-stat {
    flex: 1;
    min-width: 200px;
}

.bbpm-stat-number {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    color: var(--bbpm-brand-700);
    letter-spacing: -0.02em;
}

.bbpm-stat-label {
    font-size: 1em;
    margin-top: 8px;
    color: var(--bbpm-ink-700);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}

/* Story Section — like bb-boomcadeau */
.bbpm-story-section {
    background: white;
    padding: 80px 40px;
}

.bbpm-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.bbpm-story-content {
    text-align: left;
}

.bbpm-story-content h2 {
    color: var(--bbpm-brand-700);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    margin-bottom: 20px;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.bbpm-story-content p {
    font-size: 1.2em;
    line-height: 1.8;
    margin-bottom: 20px;
    color: var(--bbpm-ink-700);
}

.bbpm-story-button {
    margin-top: 30px;
}

.bbpm-story-images {
    display: grid;
    gap: 20px;
}

.bbpm-story-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.bbpm-image-caption {
    font-size: 0.9em;
    color: var(--bbpm-ink-500);
    margin-top: 8px;
    font-style: italic;
}

/* Single column layout when no images */
.bbpm-story-grid:not(:has(.bbpm-story-images)) {
    grid-template-columns: 1fr;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

@media (max-width: 768px) {
    .bbpm-story-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .bbpm-story-content h2 {
        font-size: 2em;
    }
    
    .bbpm-story-content p {
        font-size: 1.1em;
    }
}

/* Action Cards */
.bbpm-action-section {
    background: transparent;
    padding: 30px 20px 10px 20px;
}

.bbpm-action-header,
.bbpm-values-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}

.bbpm-action-header h2,
.bbpm-values-header h2 {
    text-align: center;
    font-size: 2.5em;
    color: var(--bbpm-brand-700);
    margin-bottom: 20px;
}

.bbpm-action-description {
    font-size: 1.1em;
    color: var(--bbpm-ink-500);
    line-height: 1.6;
    margin: 0;
}

.bbpm-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 25px;
}

.bbpm-action-card {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
}

.bbpm-action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.bbpm-action-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.bbpm-action-icon svg {
    width: 48px;
    height: 48px;
    stroke: var(--bbpm-brand-700);
    stroke-width: 1.5;
}

.bbpm-action-icon i {
    display: block;
}

.bbpm-action-icon.emoji {
    font-size: 3em;
}

.bbpm-action-icon img {
    max-width: 80px;
    height: auto;
    display: inline-block;
}

.bbpm-action-card h3 {
    color: var(--bbpm-brand-700);
    font-size: 1.8em;
    margin-bottom: 15px;
}

.bbpm-action-card p {
    font-size: 1.05em;
    line-height: 1.6;
    margin-bottom: 25px;
    color: #555;
}

.bbpm-cta-secondary {
    display: inline-block;
    background: var(--bbpm-brand-700);
    color: white;
    padding: 14px 32px;
    border-radius: var(--bbpm-rad-btn);
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.2s, background 0.2s;
}

.bbpm-cta-secondary:hover {
    background: var(--bbpm-orange);
    border-color: var(--bbpm-orange);
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
}

/* Highlight Box - Full width green background */
.bbpm-highlight-section {
    background: var(--bbpm-brand-700);
    padding: clamp(48px,6vw,72px) 0;
    margin: 0;
}

.bbpm-highlight-box {
    text-align: center;
    position: relative;
}

.bbpm-highlight-box h2 {
    color: white;
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 1.2;
}

.bbpm-highlight-box p {
    font-size: 1.25em;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
}

.bbpm-highlight-emphasis {
    font-size: 1.4em !important;
    font-weight: 600 !important;
    color: var(--bbpm-accent-100) !important;
    margin-top: 30px !important;
    padding-top: 25px !important;
    border-top: 2px solid rgba(255, 255, 255, 0.2) !important;
}

@media (max-width: 768px) {
    .bbpm-highlight-section {
        padding: 50px 0;
    }
    
    .bbpm-highlight-box h2 {
        font-size: 2em;
    }
    
    .bbpm-highlight-box p {
        font-size: 1.1em;
    }
    
    .bbpm-highlight-emphasis {
        font-size: 1.2em !important;
    }
}

/* Testimonial Section */
.bbpm-testimonial-section {
    background: var(--bbpm-brand-700);
    color: white;
    padding: 60px 20px;
    text-align: center;
}

.bbpm-testimonial-section blockquote {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.5em;
    font-style: italic;
    line-height: 1.7;
}

.bbpm-testimonial-author {
    margin-top: 20px;
    font-size: 1.1em;
    opacity: 0.9;
}

/* Footer CTA — flat, no diagonal */
.bbpm-footer-cta {
    position: relative;
    background: linear-gradient(135deg, var(--bbpm-brand-700) 0%, #085940 100%);
    color: #fff;
    padding: clamp(80px,10vw,140px) clamp(24px,5vw,80px);
    text-align: center;
    margin-top: 0;
    clip-path: none;
    box-shadow: none;
}

.bbpm-footer-cta h2 {
    font-size: clamp(2.25rem, 5.5vw, 3.5rem);
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #fff;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.bbpm-footer-cta p {
    font-size: clamp(1rem,1.2vw,1.2rem);
    margin-bottom: 40px;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    line-height: 1.6;
}

.bbpm-footer-cta .bbpm-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 32px;
    background: var(--bbpm-white);
    color: var(--bbpm-brand-700);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 4px;
    text-decoration: none;
    box-shadow: none;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.bbpm-footer-cta .bbpm-cta-primary:hover {
    background: var(--bbpm-orange);
    color: #fff;
    transform: none;
    box-shadow: none;
}

.bbpm-footer-cta a[href^="mailto"]:not(.bbpm-cta-primary) {
    color: rgba(255,255,255,.7);
    text-decoration: none;
    transition: color .2s ease;
}

.bbpm-footer-cta a[href^="mailto"]:not(.bbpm-cta-primary):hover {
    color: #fff;
}

/* Responsive voor plantdag componenten */
@media (max-width: 768px) {
    .bbpm-hero-title {
        font-size: 2em;
    }
    
    .bbpm-hero-date {
        font-size: 1.1em;
    }
    
    .bbpm-hero-description {
        font-size: 1.1em;
    }
    
    .bbpm-stat-number {
        font-size: 2em;
    }
    
    .bbpm-actions-grid {
        grid-template-columns: 1fr;
    }
    
    .bbpm-story-content h2 {
        font-size: 2em;
    }
    
    .bbpm-highlight-box h2 {
        font-size: 1.8em;
    }
    
    .bbpm-footer-cta {
        padding: 60px 24px;
    }
    .bbpm-footer-cta h2 {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
    }
}

/* Benefit Card Component */
.bbpm-benefit-card {
    background: white;
    padding: 40px;
    margin-bottom: 40px;
    border-radius: var(--bbpm-rad-l);
    box-shadow: var(--bbpm-shadow-s);
    border-left: 5px solid var(--bbpm-brand-700);
}

.bbpm-benefit-title {
    color: var(--bbpm-brand-700);
    font-size: 1.6em;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.bbpm-benefit-icon {
    font-size: 1.3em;
}

.bbpm-research-items {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.bbpm-research-item {
    padding-left: 20px;
    border-left: 3px solid var(--bbpm-accent-100);
}

.bbpm-research-item h4 {
    color: var(--bbpm-ink-900);
    font-size: 1.2em;
    margin-bottom: 8px;
    font-weight: 600;
}

.bbpm-research-item p {
    color: var(--bbpm-ink-500);
    line-height: 1.7;
    font-size: 1em;
}

/* Reading List Component */
.bbpm-reading-list {
    background: var(--bbpm-accent-100);
    padding: 40px;
    border-radius: 12px;
    margin: 50px 0;
}

.bbpm-reading-title {
    color: var(--bbpm-brand-700);
    margin-bottom: 25px;
    font-size: 1.6em;
    font-weight: 600;
}

.bbpm-books-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.bbpm-book-item {
    background: white;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--bbpm-brand-700);
}

.bbpm-book-title {
    color: var(--bbpm-ink-900);
    display: block;
    margin-bottom: 5px;
    font-size: 1.1em;
    font-weight: 600;
}

.bbpm-book-author {
    color: var(--bbpm-ink-500);
    font-size: 0.95em;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .bbpm-benefit-card {
        padding: 25px;
    }
    
    .bbpm-benefit-title {
        font-size: 1.4em;
    }
    
    .bbpm-research-item h4 {
        font-size: 1.1em;
    }
    
    .bbpm-reading-list {
        padding: 30px 25px;
    }
    
    .bbpm-reading-title {
        font-size: 1.4em;
    }
}
/* ========================================
   Photo Gallery Component
   ======================================== */

.bbpm-photo-gallery-section {
    background: #f8f9fa;
}

.bbpm-gallery-description {
    color: var(--bbpm-ink-500);
    line-height: 1.6;
}

/* Photo Grid */
.bbpm-photo-grid {
    display: grid;
    gap: 20px;
    margin-top: 2rem;
}

.bbpm-photo-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.bbpm-photo-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.bbpm-photo-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 980px) {
    .bbpm-photo-grid-cols-3,
    .bbpm-photo-grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .bbpm-photo-grid-cols-2,
    .bbpm-photo-grid-cols-3,
    .bbpm-photo-grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

/* Photo Item */
.bbpm-photo-item {
    position: relative;
}

.bbpm-photo-image {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #e8e8e8;
}

/* Aspect ratios */
.bbpm-photo-aspect-square .bbpm-photo-image {
    aspect-ratio: 1 / 1;
}

.bbpm-photo-aspect-landscape .bbpm-photo-image {
    aspect-ratio: 4 / 3;
}

.bbpm-photo-aspect-portrait .bbpm-photo-image {
    aspect-ratio: 3 / 4;
}

.bbpm-photo-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

/* Auto aspect ratio - no cropping */
.bbpm-photo-aspect-auto .bbpm-photo-image {
    aspect-ratio: auto;
}

.bbpm-photo-aspect-auto .bbpm-photo-image img {
    object-fit: contain;
    height: auto;
}

/* Clickable photo */
.bbpm-photo-clickable {
    cursor: pointer;
}

.bbpm-photo-clickable:hover .bbpm-photo-image img {
    transform: scale(1.05);
}

/* Photo overlay (zoom icon) */
.bbpm-photo-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease, background-color 0.3s ease;
    border-radius: 12px;
}

.bbpm-photo-clickable:hover .bbpm-photo-overlay {
    background: rgba(0, 0, 0, 0.4);
    opacity: 1;
}

.bbpm-zoom-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* Photo caption */
.bbpm-photo-caption {
    margin-top: 12px;
    font-size: 0.95rem;
    color: var(--bbpm-ink-700);
    text-align: center;
    line-height: 1.4;
}

/* ========================================
   Friends Grid Component
   ======================================== */

.bbpm-friends-section {
    background: var(--bbpm-accent-100);
}

.bbpm-friends-description {
    line-height: 1.6;
}

/* Friends Grid */
.bbpm-friends-grid {
    display: grid;
    gap: 24px;
    margin-top: 2rem;
}

.bbpm-friends-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.bbpm-friends-grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.bbpm-friends-grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 980px) {
    .bbpm-friends-grid-cols-3,
    .bbpm-friends-grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .bbpm-friends-grid-cols-2,
    .bbpm-friends-grid-cols-3,
    .bbpm-friends-grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

/* Friend Card — flat, minimal */
.bbpm-friend-card {
    background: white;
    border: none;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    transition: box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.bbpm-friend-clickable {
    cursor: pointer;
}

.bbpm-friend-clickable:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.bbpm-friend-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Friend Logo */
.bbpm-friend-logo {
    background: #f8f7f4;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    border-bottom: none;
    overflow: hidden;
}

.bbpm-friend-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bbpm-logo-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bbpm-accent-100);
    color: var(--bbpm-brand-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
}

/* Friend Content */
.bbpm-friend-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex-grow: 1;
}

.bbpm-friend-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bbpm-ink-900);
    margin: 0;
    line-height: 1.3;
}

.bbpm-friend-tagline {
    font-size: 0.9rem;
    color: var(--bbpm-brand-700);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

.bbpm-friend-description {
    font-size: 0.95rem;
    color: var(--bbpm-ink-700);
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

.bbpm-friend-cta {
    font-size: 0.95rem;
    color: var(--bbpm-brand-700);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    transition: gap 0.2s ease;
}

.bbpm-friend-clickable:hover .bbpm-friend-cta {
    gap: 0.5rem;
}

/* CTA Cards Component */
.bbpm-cta-cards {
    padding: 80px 20px;
}

.bbpm-cta-cards-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.bbpm-cta-card {
    background: white;
    border-radius: 12px;
    padding: 50px 40px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
}

.bbpm-cta-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.bbpm-cta-card-icon {
    font-size: 4em;
    margin-bottom: 20px;
}

.bbpm-cta-card-title {
    font-size: 2em;
    margin-bottom: 20px;
    color: var(--bbpm-brand-700);
    font-weight: bold;
}

.bbpm-cta-card-text {
    font-size: 1.2em;
    line-height: 1.6;
    color: var(--bbpm-ink-700);
    margin-bottom: 30px;
}

.bbpm-cta-card-button {
    display: inline-block;
    padding: 18px 40px;
    border-radius: var(--bbpm-rad-btn);
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s;
}

.bbpm-cta-card-button-primary {
    background: var(--bbpm-orange);
    color: white;
    box-shadow: 0 4px 15px rgba(217, 106, 59, 0.3);
}

.bbpm-cta-card-button-primary:hover {
    background: var(--bbpm-orange-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(217, 106, 59, 0.4);
    color: white;
    text-decoration: none;
}

.bbpm-cta-card-button-secondary {
    background: transparent;
    color: var(--bbpm-brand-700);
    border: 2px solid var(--bbpm-brand-700);
}

.bbpm-cta-card-button-secondary:hover {
    background: var(--bbpm-brand-700);
    color: white;
    transform: translateY(-2px);
    text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
    .bbpm-cta-cards-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .bbpm-cta-card {
        padding: 40px 30px;
    }
    
    .bbpm-cta-card-title {
        font-size: 1.6em;
    }
    
    .bbpm-cta-card-text {
        font-size: 1.1em;
    }
}

/* ==========================================
   Testimonials Section
   ========================================== */
.bb-testimonials-section {
    padding: clamp(40px,6vw,64px) 0;
    background: #fdfbf7;
}

.bb-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    margin-top: 32px;
}

.bb-testimonial-card {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bb-testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.bb-testimonial-quote {
    font-family: 'Fraunces', serif;
    font-size: 1.35rem;
    line-height: 1.7;
    color: var(--forest-900, #1b3c2f);
    margin-bottom: 25px;
    font-style: italic;
}

.bb-testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bb-testimonial-author strong {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--forest-900, #1b3c2f);
}

.bb-testimonial-author span {
    font-size: 0.95rem;
    color: #666;
}

@media (max-width: 768px) {
    .bb-testimonials-section {
        padding: 60px 0;
    }

    .bb-testimonials-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 40px;
    }

    .bb-testimonial-card {
        padding: 30px;
    }

    .bb-testimonial-quote {
        font-size: 1.2rem;
    }
}

/* ========================================
   Tag Grid
   ======================================== */
.bbpm-tag-grid{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
    max-width:900px;
    margin:0 auto;
}
.bbpm-tag{
    display:inline-flex;
    align-items:center;
    padding:12px 24px;
    background:#fff;
    border:1px solid var(--bbpm-brand-700);
    border-radius:var(--bbpm-rad-btn);
    color:var(--bbpm-brand-700);
    font-weight:600;
    font-size:.95rem;
    white-space:nowrap;
    transition:background .15s ease,color .15s ease;
}
.bbpm-tag:hover{
    background:var(--bbpm-brand-700);
    color:#fff;
}
@media(max-width:560px){
    .bbpm-tag-grid{gap:8px}
    .bbpm-tag{padding:10px 18px;font-size:.85rem}
}

/* ── WPBakery full-width override for pages with bbpm shortcodes ── */
.page .row.wpb_row:has(.bbpm-hero),
.page .row.wpb_row:has(.bbpm-who-are-we),
.page .row.wpb_row:has(.bblf){
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
}
.page .row.wpb_row:has(.bbpm-hero) > .wpb_column,
.page .row.wpb_row:has(.bbpm-who-are-we) > .wpb_column,
.page .row.wpb_row:has(.bblf) > .wpb_column{
    padding-left:0 !important;
    padding-right:0 !important;
}