/* ────────────────────────────────────────────────────────────────────────────
   Beeldbreed — Components
   Color language:
     Violet  → brand, CTAs, interactive
     Amber   → energy, stats, highlights, featured markers
     Cyan    → AI/tech elements, specific labels
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Hero horizontal scroll ────────────────────────────────────────────────── */

/* Outer: creates scroll room for 3 panels (300vh).
   On mobile/reduced-motion: falls back to single panel, normal scroll. */
.bb-hero-outer {
  position: relative;
  height: 300vh;
}
@media (prefers-reduced-motion: reduce) {
  .bb-hero-outer { height: auto; }
}

/* Sticky container: pins to top, always 100vh tall */
.bb-hero-sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .bb-hero-sticky { position: relative; height: auto; }
}

/* Strip: the 3 panels side by side — één doorlopende achtergrond over alle panels */
.bb-hero-strip {
  display: flex;
  width: 300vw;
  height: 100%;
  will-change: transform;
  position: relative;

  /* Doorlopende basistoon met duidelijk zichtbare kleurzones per panel */
  background: linear-gradient(
    90deg,
    #060310  0%,       /* panel 1: diep void */
    #0a0522 20%,
    #16093e 33%,       /* panel 1 → 2: violet opwaarts */
    #1c1248 46%,       /* panel 2: het diepst paars */
    #1e1445 50%,
    #180f40 54%,
    #0f0830 66%,       /* panel 2 → 3: darker */
    #09051e 82%,
    #060310 100%       /* panel 3: terug naar void */
  );
}

/* Glow-laag 1: vaste posities als basis */
.bb-hero-strip::before {
  content: '';
  position: absolute;
  inset: -8%;   /* ruimte zodat animatie niet tot een zichtbare rand leidt */
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 50% 80% at  8% 20%,  rgba(121, 64,251,0.42) 0%, transparent 60%),
    radial-gradient(ellipse 35% 45% at 20% 85%,  rgba( 34,211,238,0.20) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 50% 95%,  rgba(245,166, 35,0.24) 0%, transparent 55%),
    radial-gradient(ellipse 45% 55% at 55% 10%,  rgba(121, 64,251,0.24) 0%, transparent 50%),
    radial-gradient(ellipse 30% 50% at 68% 72%,  rgba( 34,211,238,0.18) 0%, transparent 45%),
    radial-gradient(ellipse 55% 70% at 92% 25%,  rgba(121, 64,251,0.40) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 82% 88%,  rgba(245,166, 35,0.16) 0%, transparent 50%);
  animation: hero-pulse-a 9s ease-in-out infinite alternate;
}

/* Glow-laag 2: zweeft op een ander ritme voor organisch effect */
.bb-hero-strip::after {
  content: '';
  position: absolute;
  inset: -8%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 40% 60% at 14% 65%,  rgba(155,107,252,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 33% 30%,  rgba(121, 64,251,0.14) 0%, transparent 50%),
    radial-gradient(ellipse 45% 55% at 48% 55%,  rgba(245,166, 35,0.12) 0%, transparent 50%),
    radial-gradient(ellipse 35% 65% at 75% 20%,  rgba(155,107,252,0.20) 0%, transparent 55%),
    radial-gradient(ellipse 40% 45% at 88% 70%,  rgba( 34,211,238,0.14) 0%, transparent 50%);
  animation: hero-pulse-b 12s ease-in-out infinite alternate;
}

@keyframes hero-pulse-a {
  0%   { opacity: 0.60; transform: scale(1);    }
  35%  { opacity: 1;    transform: scale(1.14); }
  100% { opacity: 0.75; transform: scale(0.92); }
}
@keyframes hero-pulse-b {
  0%   { opacity: 0.45; transform: scale(1.08); }
  50%  { opacity: 1;    transform: scale(0.90); }
  100% { opacity: 0.60; transform: scale(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  .bb-hero-strip { width: 100%; flex-direction: column; transform: none !important; }
  .bb-hero-strip::before,
  .bb-hero-strip::after { animation: none; }
}

/* Individual panel */
.bb-hero-panel {
  width: 100vw;
  height: 100%;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Transparant — strip-background schijnt door */
  background: transparent;
  /* Zorg dat content boven de strip ::before glow zit */
  z-index: 1;
}

/* ── Panel 1: intro ─────────────────────────────────────────────────────── */
.bb-hero-panel--intro {
  text-align: center;
  padding-block: 9rem 5rem;
}
.bb-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.bb-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bb-cyan);
}
.bb-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-hero);
  text-transform: uppercase;
  color: var(--bb-pure);
  line-height: 0.88;
  letter-spacing: -0.03em;
}
.bb-hero__title .line {
  display: block;
  overflow: hidden;
}
.bb-hero__sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--size-lg);
  color: var(--bb-mist);
  max-width: 50ch;
  line-height: 1.65;
}
.bb-hero__cta-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.5rem;
}

/* ── Panel 2: diensten ──────────────────────────────────────────────────── */
.bb-hero-panel--diensten {
  background: transparent;
}
.bb-hero-diensten {
  position: relative;
  z-index: 2;
  padding-inline: clamp(3rem, 8vw, 8rem);
  width: 100%;
  max-width: 1400px;
}
.bb-hero-diensten__label {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bb-spark);
  margin-bottom: 3rem;
}
.bb-hero-diensten__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.bb-hero-diensten__item {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: 1.2rem;
  border-bottom: 1px solid rgba(155,107,252,0.1);
  cursor: default;
  transition: border-color 0.3s;
}
.bb-hero-diensten__item:first-child {
  border-top: 1px solid rgba(155,107,252,0.1);
}
.bb-hero-diensten__item:hover {
  border-color: rgba(121,64,251,0.5);
}
.bb-hero-diensten__item:hover .bb-hero-diensten__name {
  color: var(--bb-pure);
  letter-spacing: -0.01em;
}
.bb-hero-diensten__num {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--bb-spark);
  letter-spacing: 0.1em;
  min-width: 2.5rem;
  transition: color 0.3s;
}
.bb-hero-diensten__item:hover .bb-hero-diensten__num {
  color: var(--bb-violet);
}
.bb-hero-diensten__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 8vw, 9rem);
  text-transform: uppercase;
  color: rgba(245,243,255,0.85);
  line-height: 1;
  letter-spacing: -0.03em;
  transition: color 0.3s, letter-spacing 0.4s;
}

/* animate items in when panel becomes active */
.bb-hero-panel--diensten .bb-hero-diensten__item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s, transform 0.5s, border-color 0.3s;
}
.bb-hero-panel--diensten.is-active .bb-hero-diensten__item {
  opacity: 1;
  transform: none;
}
.bb-hero-panel--diensten.is-active .bb-hero-diensten__item:nth-child(1) { transition-delay: 0.05s; }
.bb-hero-panel--diensten.is-active .bb-hero-diensten__item:nth-child(2) { transition-delay: 0.15s; }
.bb-hero-panel--diensten.is-active .bb-hero-diensten__item:nth-child(3) { transition-delay: 0.25s; }
.bb-hero-panel--diensten.is-active .bb-hero-diensten__item:nth-child(4) { transition-delay: 0.35s; }

/* ── Panel 3: Enthousiast? Denk breed. ─────────────────────────────────── */
.bb-hero-panel--cta {
  background: transparent;
}
.bb-hero-cta-panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  padding-inline: clamp(3rem, 8vw, 8rem);
  max-width: 1400px;
  width: 100%;
  /* kader */
  border-left: 3px solid var(--bb-violet);
  padding-left: clamp(3rem, 6vw, 6rem);
  margin-left: clamp(3rem, 6vw, 6rem);
}
.bb-hero-cta-panel::before {
  content: '';
  position: absolute;
  top: 1.5rem;
  left: -1px;
  bottom: 1.5rem;
  width: 1.5px;
  background: rgba(155,107,252,0.35);
  transform: translateX(-10px);
}
.bb-hero-cta-panel__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bb-spark);
}
.bb-hero-cta-panel__heading {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.88;
  letter-spacing: -0.03em;
}
.bb-hero-cta-panel__line1 {
  font-size: clamp(3.5rem, 7vw, 8rem);
  color: var(--bb-mist);
  text-transform: uppercase;
}
.bb-hero-cta-panel__line2 {
  font-size: clamp(5rem, 10vw, 13rem);
  color: var(--bb-pure);
  text-transform: uppercase;
}
/* "breed" in violet */
.bb-hero-cta-panel__line2 em {
  font-style: normal;
  color: var(--bb-violet);
}

/* animate in */
.bb-hero-panel--cta .bb-hero-cta-panel__eyebrow,
.bb-hero-panel--cta .bb-hero-cta-panel__heading,
.bb-hero-panel--cta .bb-btn {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s, transform 0.6s;
}
.bb-hero-panel--cta.is-active .bb-hero-cta-panel__eyebrow { opacity: 1; transform: none; transition-delay: 0.05s; }
.bb-hero-panel--cta.is-active .bb-hero-cta-panel__heading  { opacity: 1; transform: none; transition-delay: 0.2s; }
.bb-hero-panel--cta.is-active .bb-btn                      { opacity: 1; transform: none; transition-delay: 0.45s; }

/* ── Panel nav dots ─────────────────────────────────────────────────────── */
.bb-hero-nav {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.6rem;
  z-index: 10;
}
.bb-hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  background: rgba(155,107,252,0.25);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, transform 0.3s, width 0.4s;
}
.bb-hero-dot.is-active {
  background: var(--bb-violet);
  width: 22px;
  border-radius: 3px;
}

/* ── Scroll indicator (panel 1 only) ───────────────────────────────────── */
.bb-scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  right: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  z-index: 2;
  transition: opacity 0.4s;
}
.bb-scroll-indicator span {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.15em;
  color: rgba(196,181,253,0.35);
  text-transform: uppercase;
}
.bb-scroll-indicator__arrow {
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, rgba(155,107,252,0.5), transparent);
}
.bb-scroll-indicator.is-hidden { opacity: 0; pointer-events: none; }

/* ── Large button variant ───────────────────────────────────────────────── */
.bb-btn--lg {
  font-size: var(--size-base);
  padding: 1.25rem 3rem;
}

/* ── Marquee band ─────────────────────────────────────────────────────────── */
.bb-marquee {
  background: var(--bb-surface);
  border-top: none;
  border-bottom: none;
  padding-block: 1.3rem;
  overflow: hidden;
}
.bb-marquee + .bb-marquee {
  margin-top: 2px;
  padding-block: 1rem;
}
.marquee__wrap {
  overflow: hidden;
  width: 100%;
}
.marquee__track {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.marquee__item {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.85rem, 1.4vw, 1rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-white);
  padding-inline: 2rem;
  white-space: nowrap;
}
.marquee__dot {
  color: var(--bb-amber);           /* ← amber dots add warmth to the ticker */
  font-size: 1.1em;
  padding-inline: 0.25rem;
}

/* ── Clients logo strip (scrollende marquee) ──────────────────────────────── */
.bb-clients {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.bb-clients__label {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bb-mist);
  text-align: center;
  margin-bottom: 2rem;
  opacity: 0.5;
}
.bb-clients__marquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}
.bb-clients__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: clients-scroll 32s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bb-clients__track { animation: none; }
}
@keyframes clients-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}
.bb-clients__item {
  display: flex;
  align-items: center;
  padding-inline: clamp(3rem, 6vw, 5rem);
  opacity: 0.6;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
}
.bb-clients__item:hover { opacity: 1; }
.bb-clients__logo {
  display: block;
  width: auto;
  height: 2.5rem;
  object-fit: contain;
  /* Logo's zijn reeds wit — geen filter */
}
/* Optisch gelijkgewicht per logo */
.bb-clients__item:has([alt="VRT"]) .bb-clients__logo               { height: 1.75rem; }
.bb-clients__item:has([alt*="Vlaanderen v"]) .bb-clients__logo      { height: 3.25rem; }
.bb-clients__item:has([alt="HQI"]) .bb-clients__logo               { height: 2.75rem; }
.bb-clients__item:has([alt*="Provincie"]) .bb-clients__logo         { height: 2.5rem; }

/* ── Section break gradient ───────────────────────────────────────────────── */
.bb-section-break {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(34,211,238,0.2) 30%, rgba(155,107,252,0.3) 60%, transparent 100%);
}

/* ── Intro statement ──────────────────────────────────────────────────────── */
.bb-intro {
  background:
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(121,64,251,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 5% 80%, rgba(34,211,238,0.06) 0%, transparent 55%),
    transparent;
  position: relative;
}
.bb-intro__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}
.bb-intro__statement {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-3xl);
  text-transform: uppercase;
  color: var(--bb-pure);
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.bb-intro__body {
  color: var(--bb-mist);
  font-weight: 300;
}
.bb-intro__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.5rem;
}
.bb-badge {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border: 1px solid;
}
/* Badge colour variants */
.bb-badge:nth-child(1) { color: #22D3EE;               border-color: rgba(34,211,238,0.4); }
.bb-badge:nth-child(2) { color: var(--bb-spark);        border-color: rgba(183,148,252,0.4); }
.bb-badge:nth-child(3) { color: var(--bb-amber);        border-color: rgba(245,166,35,0.4); }
.bb-badge:nth-child(4) { color: var(--bb-mist);         border-color: rgba(212,197,254,0.3); }

@media (max-width: 768px) {
  .bb-intro__inner { grid-template-columns: 1fr; gap: 3.5rem; }
}

/* ── Intro werk-showcase ──────────────────────────────────────────────────── */
.bb-intro__werk {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 4rem;
  padding-bottom: 1rem;
}

.bb-intro__werk-kaart {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.bb-intro__werk-img-wrap {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #0a0720;
}

.bb-intro__werk-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s ease;
  filter: brightness(0.88) saturate(0.9);
}

.bb-intro__werk-kaart:hover .bb-intro__werk-img-wrap img {
  transform: scale(1.04);
  filter: brightness(1) saturate(1.05);
}

.bb-intro__werk-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 0 0.25rem;
}

.bb-intro__werk-label {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-mist);
  opacity: 0.7;
}

.bb-intro__werk-naam {
  font-size: var(--size-sm);
  font-weight: 500;
  color: var(--bb-white);
  transition: color 0.2s ease;
}
.bb-intro__werk-naam::after {
  content: ' >';
  opacity: 0;
  margin-left: 0.1em;
  transition: opacity 0.2s ease, margin-left 0.25s ease;
}

.bb-intro__werk-kaart:hover .bb-intro__werk-naam {
  color: var(--bb-spark);
}
.bb-intro__werk-kaart:hover .bb-intro__werk-naam::after {
  opacity: 1;
  margin-left: 0.35em;
}

@media (max-width: 600px) {
  .bb-intro__werk {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bb-intro__werk-img-wrap img { transition: none; }
}

/* ── AI Spotlight ─────────────────────────────────────────────────────────── */
.bb-ai-spotlight {
  background: linear-gradient(160deg, rgba(34,211,238,0.06) 0%, rgba(121,64,251,0.2) 40%, rgba(55,30,130,0.4) 100%);
  position: relative;
  overflow: hidden;
}
.bb-ai-spotlight__grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Subtiele horizontale scanlijnen */
  background-image: repeating-linear-gradient(
    0deg,
    rgba(121, 64, 251, 0.04) 0px,
    rgba(121, 64, 251, 0.04) 1px,
    transparent 1px,
    transparent 60px
  );
}
.bb-ai-spotlight__inner { position: relative; z-index: 2; }
.bb-ai-spotlight__tag {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bb-cyan);            /* ← cyan: AI/tech label */
  margin-bottom: 1.5rem;
}
.bb-ai-spotlight__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-3xl);
  text-transform: uppercase;
  color: var(--bb-pure);
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
}
.bb-ai-spotlight__intro {
  font-size: var(--size-base);
  color: rgba(255,255,255,0.65);
  line-height: 1.75;
  max-width: 58ch;
  margin-bottom: 3rem;
}
.bb-ai-spotlight__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}
.bb-ai-feature {
  padding: 2.25rem;
  background: rgba(6,4,16,0.45);
  border: 1px solid rgba(34,211,238,0.1);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.bb-ai-feature:hover {
  border-color: rgba(34,211,238,0.3);
  transform: translateY(-3px);
}
.bb-ai-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: 1.35rem;
  line-height: 1;
  margin-bottom: 1.1rem;
  color: var(--bb-cyan);            /* ← cyan icons on AI features */
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.22);
  border-radius: 10px;
}
.bb-ai-feature__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-lg);
  color: var(--bb-pure);
  margin-bottom: 0.6rem;
}
.bb-ai-feature__body {
  font-size: var(--size-sm);
  color: var(--bb-mist);
  font-weight: 300;
  line-height: 1.75;
}

@media (max-width: 768px) {
  .bb-ai-spotlight__features { grid-template-columns: 1fr; }
}

/* ── Vastgoed Spotlight ───────────────────────────────────────────────────── */
.bb-vastgoed-spotlight {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(245,166,35,0.05) 0%, rgba(121,64,251,0.18) 40%, rgba(55,30,130,0.35) 100%);
}
.bb-vastgoed-spotlight__inner { position: relative; z-index: 2; }

.bb-vastgoed__tag {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bb-spark);
  margin-bottom: 1.5rem;
}
.bb-vastgoed__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-3xl);
  text-transform: uppercase;
  color: var(--bb-pure);
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.bb-vastgoed__sub {
  font-size: var(--size-lg);
  color: var(--bb-mist);
  max-width: 55ch;
  font-weight: 300;
  margin-bottom: 3.5rem;
}

/* Features grid: Gaussian Splatting full width (bovenaan), dan 3 kaarten */
.bb-vastgoed__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

.bb-vastgoed-feature {
  padding: 2rem;
  background: rgba(6,4,16,0.45);
  border: 1px solid rgba(245,166,35,0.1);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.bb-vastgoed-feature:hover {
  border-color: rgba(245,166,35,0.3);
  transform: translateY(-3px);
}

/* Gaussian Splatting — featured, volle breedte */
.bb-vastgoed-feature--gaussian {
  grid-column: 1 / -1;
  border-color: rgba(245,166,35,0.25);
  background: rgba(6,4,16,0.6);
  padding: 2.5rem;
  position: relative;
}
.bb-vastgoed-feature--gaussian:hover {
  border-color: rgba(245,166,35,0.5);
  transform: translateY(-3px);
}
.bb-tech-note {
  display: inline;
  font-family: var(--font-mono);
  font-size: 0.72em;
  letter-spacing: 0.06em;
  color: rgba(245, 166, 35, 0.65);
}

.bb-vastgoed-feature__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bb-spark);
  background: rgba(245,166,35,0.12);
  border: 1px solid rgba(245,166,35,0.3);
  padding: 0.3rem 0.75rem;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(8px);
}
.bb-vastgoed-feature__gaussian-inner {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

.bb-vastgoed-feature__icon {
  font-size: 1.6rem;
  margin-bottom: 1.1rem;
  color: var(--bb-spark);
  flex-shrink: 0;
}
.bb-vastgoed-feature--gaussian .bb-vastgoed-feature__icon {
  font-size: 2.2rem;
  margin-bottom: 0;
  margin-top: 0.15rem;
}

.bb-vastgoed-feature__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-lg);
  color: var(--bb-pure);
  margin-bottom: 0.6rem;
}
.bb-vastgoed-feature--gaussian .bb-vastgoed-feature__title {
  font-size: var(--size-xl);
}
.bb-vastgoed-feature__body {
  font-size: var(--size-sm);
  color: var(--bb-mist);
  font-weight: 300;
  line-height: 1.75;
}

@media (max-width: 900px) {
  .bb-vastgoed__features { grid-template-columns: repeat(2, 1fr); }
  .bb-vastgoed-feature--gaussian { grid-column: 1 / -1; }
  .bb-vastgoed-feature__gaussian-inner { flex-direction: column; gap: 1rem; }
}
@media (max-width: 600px) {
  .bb-vastgoed__features { grid-template-columns: 1fr; }
}

/* ── Vastgoed showcase grid (homepage) ──────────────────────────────────── */
.bb-vastgoed__showcase {
  display: grid;
  grid-template-columns: 1fr 0.42fr;
  gap: 0.75rem;
  margin-bottom: 3.5rem;
  border-radius: 2px;
  overflow: hidden;
}
.bb-vastgoed__showcase-main {
  position: relative;
  overflow: hidden;
}
.bb-vastgoed__showcase-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.bb-vastgoed__showcase-main:hover img { transform: scale(1.03); }

/* 3D-tour UI overlay */
.bb-tour-ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(
    to bottom,
    rgba(6,4,16,0.55) 0%,
    transparent 35%,
    transparent 60%,
    rgba(6,4,16,0.65) 100%
  );
  pointer-events: none;
}
.bb-tour-ui__badge {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bb-spark);
  background: rgba(6,4,16,0.7);
  border: 1px solid rgba(245,166,35,0.35);
  padding: 0.3rem 0.8rem;
  align-self: flex-start;
  backdrop-filter: blur(8px);
}
.bb-tour-ui__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.bb-tour-ui__arrow {
  font-size: 1.4rem;
  color: rgba(255,255,255,0.7);
  line-height: 1;
}
.bb-tour-ui__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
}
.bb-tour-ui__dot--active {
  background: var(--bb-spark);
  width: 8px;
  height: 8px;
}
.bb-tour-ui__compass {
  position: absolute;
  bottom: 1.25rem;
  right: 1.5rem;
  width: 36px;
  height: 36px;
  opacity: 0.85;
}

/* Kleine versie van de tour UI overlay op de kaart */
.bb-tour-ui--card {
  padding: 0.85rem 1rem;
}
.bb-tour-ui--card .bb-tour-ui__compass {
  bottom: 0.85rem;
  right: 1rem;
  width: 28px;
  height: 28px;
}

/* Side thumbnails */
.bb-vastgoed__showcase-side {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.bb-vastgoed__showcase-thumb {
  position: relative;
  overflow: hidden;
  flex: 1;
}
.bb-vastgoed__showcase-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.bb-vastgoed__showcase-thumb:hover img { transform: scale(1.04); }
.bb-thumb-label {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bb-pure);
  background: rgba(6,4,16,0.65);
  padding: 0.25rem 0.6rem;
  backdrop-filter: blur(6px);
}

@media (max-width: 768px) {
  .bb-vastgoed__showcase {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .bb-vastgoed__showcase-main { aspect-ratio: 16/9; }
  .bb-vastgoed__showcase-side { flex-direction: row; }
  .bb-vastgoed__showcase-thumb { aspect-ratio: 4/3; }
}

/* ── Vastgoed Showreel (dedicated page hero video) ───────────────────────── */
.bb-vastgoed-showreel {
  position: relative;
  background: var(--bb-void);
  overflow: hidden;
}
.bb-vastgoed-showreel__inner {
  position: relative;
  width: 100%;
  height: clamp(380px, 56vw, 720px);
  overflow: hidden;
}
.bb-vastgoed-showreel__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.65);
}
.bb-showreel__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--bb-pure);
  transition: opacity 0.3s ease;
}
.bb-showreel__play svg {
  width: 80px;
  height: 80px;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 0 24px rgba(0,0,0,0.5));
}
.bb-showreel__play:hover svg { transform: scale(1.1); }
.bb-showreel__play span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.8;
}
.bb-showreel__label {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
}
@media (max-width: 768px) {
  .bb-vastgoed-showreel__inner { height: clamp(240px, 56vw, 420px); }
  .bb-showreel__play svg { width: 60px; height: 60px; }
}

/* ── Vastgoed Diensten (dedicated page) ─────────────────────────────────── */
.bb-vastgoed-diensten {
  background: transparent;
  padding-block: clamp(5rem, 10vw, 10rem);
  position: relative;
  overflow: hidden;
}
/* Subtiele glow in de hoeken */
.bb-vastgoed-diensten::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 40% at 90% 10%, rgba(121,64,251,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 5%  90%, rgba(34,211,238,0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
/* Noise textuur */
.bb-vastgoed-diensten::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
}
.bb-vastgoed-diensten > * {
  position: relative;
  z-index: 1;
}
/* ── Diensten overzichtspagina sectie ────────────────────────────────────── */
.bb-diensten-sectie {
  background:
    radial-gradient(ellipse 50% 40% at 88% 15%, rgba(121,64,251,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 35% 45% at 8%  80%, rgba(34,211,238,0.06) 0%, transparent 60%),
    transparent;
  padding-block-start: clamp(2rem, 4vw, 3rem);
  padding-block-end: clamp(5rem, 10vw, 10rem);
  position: relative;
}

.bb-vastgoed-diensten__intro {
  margin-bottom: 4rem;
}
.bb-vastgoed-diensten__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-3xl);
  text-transform: uppercase;
  color: var(--bb-pure);
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-top: 1rem;
  margin-bottom: 1.25rem;
}
.bb-vastgoed-diensten__sub {
  font-size: var(--size-lg);
  color: var(--bb-mist);
  max-width: 55ch;
  font-weight: 300;
}
.bb-vastgoed-diensten__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 4rem;
}
.bb-vd-card {
  padding: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.bb-vd-card:hover {
  border-color: rgba(245,166,35,0.25);
  transform: translateY(-3px);
}

/* Media afbeelding bovenaan de kaart */
.bb-vd-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}
.bb-vd-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
  filter: brightness(0.88);
}
.bb-vd-card:hover .bb-vd-card__media img { transform: scale(1.04); filter: brightness(1); }

/* Play hint (video-indicator) */
.bb-vd-card__play-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: rgba(255,255,255,0.85);
  background: rgba(6,4,16,0.25);
  opacity: 0;
  transition: opacity 0.3s ease;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.bb-vd-card:hover .bb-vd-card__play-hint { opacity: 1; }

/* Tekstinhoud van de kaart */
.bb-vd-card__body-wrap {
  padding: 2rem 2.5rem 2.5rem;
}
.bb-vd-card--featured .bb-vd-card__body-wrap {
  padding: 1.5rem 2.5rem 2.5rem;
}

.bb-vd-card--featured {
  grid-column: 1 / -1;
  border-color: rgba(245,166,35,0.2);
  background: rgba(245,166,35,0.04);
  position: relative;
}
.bb-vd-card--featured .bb-vd-card__media {
  aspect-ratio: 21/8;
}
.bb-vd-card--featured:hover { border-color: rgba(245,166,35,0.4); }
.bb-vd-card__number {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: rgba(245,166,35,0.5);
  margin-bottom: 0.75rem;
}
.bb-vd-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: 1rem;
  color: var(--bb-spark);
  background: rgba(121, 64, 251, 0.08);
  border: 1px solid rgba(121, 64, 251, 0.2);
  border-radius: 10px;
}
.bb-vd-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-xl);
  color: var(--bb-pure);
  margin-bottom: 0.75rem;
}
.bb-vd-card__body {
  font-size: var(--size-sm);
  color: var(--bb-mist);
  font-weight: 300;
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.bb-vd-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.bb-vd-card__list li {
  font-size: var(--size-sm);
  color: rgba(245,243,255,0.65);
  font-weight: 300;
  padding-left: 1.2rem;
  position: relative;
}
.bb-vd-card__list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  font-size: 0.5rem;
  top: 0.35em;
  color: var(--bb-spark);
}

/* Voor wie sectie */
.bb-vastgoed-diensten__voor-wie { margin-top: 2rem; }
.bb-voor-wie__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}
.bb-voor-wie__item {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  letter-spacing: 0.08em;
  color: var(--bb-pure);
  background: rgba(245,166,35,0.08);
  border: 1px solid rgba(245,166,35,0.2);
  padding: 0.6rem 1.25rem;
}

@media (max-width: 768px) {
  .bb-vastgoed-diensten__grid { grid-template-columns: 1fr; }
  .bb-vd-card--featured { grid-column: 1; }
}

/* ── Dienst featured case card ───────────────────────────────────────────── */
.bb-dienst-case-section {
  padding-block: 0 5rem;
}
.bb-dienst-case-section .bb-vastgoed__tag {
  margin-bottom: 1.5rem;
}
.bb-dienst-case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  text-decoration: none;
  color: var(--bb-pure);
  transition: border-color 0.3s ease;
}
.bb-dienst-case:hover {
  border-color: rgba(121,64,251,0.4);
}
.bb-dienst-case__img-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.bb-dienst-case__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.bb-dienst-case:hover .bb-dienst-case__img-wrap img {
  transform: scale(1.04);
}
.bb-dienst-case__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  padding: 2.5rem 3rem;
}
.bb-dienst-case__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.bb-dienst-case__tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-spark);
  background: rgba(121,64,251,0.1);
  border: 1px solid rgba(121,64,251,0.25);
  padding: 0.3rem 0.75rem;
  border-radius: 2px;
}
.bb-dienst-case__title {
  font-family: var(--font-hero);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.02em;
}
.bb-dienst-case__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  letter-spacing: 0.08em;
  color: var(--bb-spark);
  transition: gap 0.25s ease;
}
.bb-dienst-case:hover .bb-dienst-case__cta { gap: 0.85rem; }

@media (max-width: 768px) {
  .bb-dienst-case { grid-template-columns: 1fr; }
  .bb-dienst-case__img-wrap { aspect-ratio: 16 / 9; }
  .bb-dienst-case__body { padding: 1.75rem 1.5rem; }
}

/* ── Portfolio grid ───────────────────────────────────────────────────────── */
.bb-portfolio {
  background-image:
    radial-gradient(ellipse 80% 50% at 10% 0%, rgba(121,64,251,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 100%, rgba(245,166,35,0.06) 0%, transparent 55%);
}
.bb-portfolio__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 3.5rem;
}
.bb-portfolio__header h2 {
  font-size: var(--size-3xl);
}
.bb-portfolio__link {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-amber);           /* ← amber: call-to-action link */
  transition: color 0.2s;
}
.bb-portfolio__link:hover { color: var(--bb-pure); }
/* ── Portfolio slider wrapper + arrow navigation ─────────────────────────── */
.bb-portfolio__slider-wrap {
  position: relative;
}
.bb-portfolio__arrow {
  position: absolute;
  top: calc(50% - 1.5rem); /* offset for caption below media */
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(10,7,28,0.65);
  border: 1px solid rgba(121,64,251,0.3);
  color: var(--bb-pure);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(6px);
}
.bb-portfolio__arrow:hover {
  background: rgba(121,64,251,0.25);
  border-color: rgba(121,64,251,0.6);
  transform: translateY(-50%) scale(1.1);
}
.bb-portfolio__arrow--prev { left: 1.25rem; }
.bb-portfolio__arrow--next { right: 1.25rem; }

@media (max-width: 768px) {
  .bb-portfolio__arrow { width: 40px; height: 40px; }
  .bb-portfolio__arrow--prev { left: 0.5rem; }
  .bb-portfolio__arrow--next { right: 0.5rem; }
}

/* ── Homepage portfolio infinite carousel ─────────────────────────────────── */
.bb-portfolio__slider {
  display: flex;
  align-items: flex-start;   /* align tops so scale grows downward */
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-block: 2rem 3rem;  /* vertical room for scale effect */
  cursor: grab;
}
.bb-portfolio__slider::-webkit-scrollbar { display: none; }
.bb-portfolio__slider.is-dragging { cursor: grabbing; user-select: none; }
.bb-portfolio__slider.is-dragging .portfolio-card { pointer-events: none; }

/* ── Portfolio card ────────────────────────────────────────────────────────── */
.portfolio-card {
  flex: 0 0 min(68vw, 780px);
  display: flex;
  flex-direction: column;
  scroll-snap-align: center;
  text-decoration: none;
  /* transform + opacity set continuously by JS — no CSS transition here */
  transform-origin: top center;
  will-change: transform, opacity;
}

/* Frame-masked media area */
.portfolio-card__media {
  position: relative;
  aspect-ratio: 2196 / 1157;  /* exact frame-fill.svg viewBox */
  background: var(--bb-deep);
  overflow: hidden;
  -webkit-mask-image: url('../images/frame-fill.svg');
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url('../images/frame-fill.svg');
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
.portfolio-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.portfolio-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 1;
}
.portfolio-card.is-playing .portfolio-card__video { opacity: 1; }
.portfolio-card.is-playing .portfolio-card__img    { opacity: 0; }

/* Caption below the frame — fully outside the mask, never clipped */
.portfolio-card__caption {
  padding: 1.1rem 0.25rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.2rem;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity   0.4s ease 0.1s,
    transform 0.4s ease 0.1s;
}
.portfolio-card.is-active .portfolio-card__caption {
  opacity: 1;
  transform: translateY(0);
}
.portfolio-card__cat {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bb-amber);
}
.portfolio-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  text-transform: uppercase;
  color: var(--bb-pure);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.portfolio-card__year {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: rgba(255,255,255,0.4);
}
.portfolio-card__play-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: rgba(155,107,252,0.8);
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
}

@media (max-width: 640px) {
  .bb-portfolio__slider { gap: 1.25rem; padding-block: 1rem 2rem; }
  .portfolio-card { flex: 0 0 84vw; }
}

/* ── Stats band ───────────────────────────────────────────────────────────── */
.bb-stats {
  background:
    radial-gradient(ellipse 60% 50% at 50% 110%, rgba(121,64,251,0.12) 0%, transparent 60%),
    transparent;
}
.bb-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.bb-stat {
  text-align: center;
  padding: 1.5rem 1rem;
}
.stat-number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-3xl);
  color: var(--bb-amber);           /* ← amber numbers: warm, energetic */
  line-height: 1;
  display: block;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bb-spark);
  margin-top: 0.85rem;
  display: block;
}

@media (max-width: 768px) {
  .bb-stats__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.bb-faq {
  background:
    radial-gradient(ellipse 55% 45% at 10% 20%, rgba(121,64,251,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 90% 85%, rgba(245,166,35,0.05) 0%, transparent 55%),
    transparent;
  padding-block: clamp(5rem, 10vw, 9rem);
}
.bb-faq__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.bb-faq__tag {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bb-violet);
}
.bb-faq__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-3xl);
  text-transform: uppercase;
  color: var(--bb-pure);
  line-height: 0.92;
  letter-spacing: -0.02em;
}

.bb-faq__list {
  border-top: 1px solid rgba(121,64,251,0.15);
}

/* ── FAQ groepen ──────────────────────────────────────────────────────────── */
.bb-faq__group {
  padding-top: 2.75rem;
  padding-bottom: 0.5rem;
}
.bb-faq__group + .bb-faq__group {
  /* Geen border-top nodig: border-bottom van het laatste bb-faq__item levert al de scheiding */
}
.bb-faq__group-label {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--bb-spark);
  margin-bottom: 1.25rem;
}
.bb-faq__group-icon {
  font-size: 0.65em;
  opacity: 0.7;
}

.bb-faq__item {
  border-bottom: 1px solid rgba(121,64,251,0.15);
}

/* Verwijder standaard details-marker */
.bb-faq__item summary { list-style: none; }
.bb-faq__item summary::-webkit-details-marker { display: none; }

.bb-faq__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  padding: 1.75rem 0;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-lg);
  color: var(--bb-pure);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  transition: color 0.2s;
}
.bb-faq__question:hover { color: var(--bb-violet); }

/* Emdash */
.bb-faq__icon {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: rgba(121, 64, 251, 0.5);
  transition: color 0.25s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1);
  user-select: none;
  display: inline-block;
}
.bb-faq__icon::before {
  content: '>';
}
.bb-faq__item[open] .bb-faq__icon {
  color: var(--bb-violet);
  transform: rotate(90deg);
}

.bb-faq__answer {
  overflow: hidden;
  padding-bottom: 1.75rem;
}
.bb-faq__more {
  margin-top: 2.5rem;
  text-align: left;
}
.bb-faq__answer p {
  color: var(--bb-mist);
  font-size: var(--size-base);
  line-height: 1.75;
  max-width: 72ch;
}

/* Smooth open animatie */
@supports (interpolate-size: allow-keywords) {
  .bb-faq__item { interpolate-size: allow-keywords; }
  .bb-faq__answer {
    height: 0;
    transition: height 0.4s cubic-bezier(0.16,1,0.3,1);
  }
  .bb-faq__item[open] .bb-faq__answer { height: auto; }
}

@media (max-width: 640px) {
  .bb-faq__header { grid-template-columns: 1fr; gap: 0.75rem; }
  .bb-faq__question { font-size: var(--size-base); }
}

/* ── Testimonials ─────────────────────────────────────────────────────────── */
.bb-testimonials {
  background:
    radial-gradient(ellipse 70% 60% at 50% 110%, rgba(121,64,251,0.14) 0%, transparent 65%),
    radial-gradient(ellipse 40% 35% at 90% 10%, rgba(34,211,238,0.07) 0%, transparent 55%),
    transparent;
}

/* Slider wrapper */
.bb-testimonials__slider-wrap {
  width: min(1200px, 100% - 4rem);
  margin-inline: auto;
}

.bb-testimonials__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}
.bb-testimonials__track::-webkit-scrollbar { display: none; }

/* Dots navigatie (enkel zichtbaar als er > 3 items zijn) */
.bb-testimonials__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}
.bb-testimonials__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(121,64,251,0.3);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, transform 0.25s;
}
.bb-testimonials__dot.is-active {
  background: var(--bb-violet);
  transform: scale(1.4);
}

/* Kaart */
.testimonial-card {
  scroll-snap-align: start;
  padding: 2.5rem 2.5rem 2rem;
  background: rgba(26, 21, 53, 0.55);
  border: 1px solid rgba(155,107,252,0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

/* Grote openings-aanhalingsteken */
.testimonial-card__mark {
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 900;
  line-height: 0.8;
  color: var(--bb-amber);
  user-select: none;
}

.testimonial-card__quote {
  font-size: var(--size-base);
  color: var(--bb-mist);
  font-weight: 300;
  font-style: normal;
  line-height: 1.8;
  flex: 1;
}

.testimonial-card__author {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(121,64,251,0.12);
}
.testimonial-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-sm);
  color: var(--bb-pure);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.testimonial-card__role {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--bb-mist);
  opacity: 0.7;
  letter-spacing: 0.08em;
}

@media (max-width: 1024px) {
  .bb-testimonials__track { grid-template-columns: repeat(3, 85vw); }
}
@media (max-width: 640px) {
  .bb-testimonials__track { grid-template-columns: repeat(3, 90vw); }
}

/* ── CTA banner ───────────────────────────────────────────────────────────── */
.bb-cta {
  position: relative;
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: var(--bb-surface);
  background-image:
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(121,64,251,0.15) 0%, transparent 70%);
}
.bb-cta__label {
  display: block;
  text-align: center;
  margin-bottom: 1.75rem;
}
.bb-cta__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: clamp(6rem, 11vw, 10rem) clamp(6rem, 17vw, 17rem);
}
.bb-cta__content::before {
  display: none;
}

/* Frame SVG in de CTA — zelfde vorm als hero */
.bb-cta__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--bb-violet);
  opacity: 0.55;
  pointer-events: none;
  /* Subtiele gloed */
  filter: drop-shadow(0 0 12px rgba(121, 64, 251, 0.4));
}
.bb-cta__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-3xl);
  text-transform: uppercase;
  color: var(--bb-pure);
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.bb-cta__sub {
  font-size: var(--size-lg);
  color: var(--bb-mist);
  max-width: 45ch;
  font-weight: 300;
}
.bb-cta__buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* CTA dual-path (twee proposities) */
.bb-cta__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(245,243,255,.45);
  margin: 0 0 .5rem;
}
.bb-cta__dual {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  width: 100%;
  max-width: 820px;
  margin-top: 2.5rem;
  text-align: left;
}
.bb-cta__path {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}
.bb-cta__divider {
  width: 1px;
  background: rgba(255,255,255,.12);
  align-self: stretch;
  margin: 0 clamp(24px, 4vw, 56px);
}
.bb-cta__path-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin: 0;
}
.bb-cta__path-label--merken { color: var(--bb-violet, #7940fb); }
.bb-cta__path-label--vastgoed { color: var(--bb-amber, #d97706); }
.bb-cta__path-text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245,243,255,.5);
  margin: 0;
  max-width: 32ch;
}
@media (max-width: 640px) {
  .bb-cta__dual {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
  .bb-cta__divider {
    width: auto;
    height: 1px;
    margin: 28px 0;
    align-self: auto;
  }
}

/* ── CTA eenvoudig (inner pages) ─────────────────────────────────────────── */
.bb-cta-simple {
  padding-block: clamp(5rem, 10vw, 9rem);
  position: relative;
}
.bb-cta-simple__inner {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}
.bb-cta-simple__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-3xl);
  text-transform: uppercase;
  color: var(--bb-pure);
  line-height: 0.92;
  letter-spacing: -0.02em;
  flex: 1;
  min-width: 0;
}

@media (max-width: 768px) {
  .bb-cta-simple__inner { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .bb-cta-simple__title { flex: none; }
}

/* ── Global label utility ─────────────────────────────────────────────────── */
.label {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bb-cyan);            /* ← cyan for section labels */
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
/* ── Buttons ──────────────────────────────────────────────────────────────── */
.wp-block-button__link,
.bb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  transition: background-position 0.5s cubic-bezier(0.16,1,0.3,1),
              color               0.3s cubic-bezier(0.16,1,0.3,1),
              border-color        0.3s cubic-bezier(0.16,1,0.3,1),
              opacity             0.3s ease;
}
.bb-btn--filled,
.bb-btn--ghost {
  background: transparent;
  color: var(--bb-pure);
  border-color: rgba(255,255,255,0.25);
}
.bb-btn--filled:hover,
.bb-btn--ghost:hover {
  background: transparent;
  animation: btn-border-slide 2s linear infinite;
}

@keyframes btn-border-slide {
  0%   { border-color: var(--bb-cyan); }
  50%  { border-color: var(--bb-violet); }
  100% { border-color: var(--bb-cyan); }
}

/* Inschuivend > — zit in de flex-flow maar neemt bij rust geen ruimte in.
   Bij hover groeit max-width naar de echte breedte: tekst schuift links,
   > schuift in, samen gecentreerd via justify-content: center. */
.bb-btn::after {
  content: '>';
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  margin-left: 0;
  transition: max-width   0.35s cubic-bezier(0.16,1,0.3,1),
              margin-left 0.35s cubic-bezier(0.16,1,0.3,1),
              opacity     0.2s  ease;
}
.bb-btn:hover::after {
  max-width: 1.5em;
  opacity: 1;
  margin-left: 0.45em;
}

/* ── Glassmorphism card ───────────────────────────────────────────────────── */
.bb-glass {
  background: rgba(26, 21, 53, 0.55);
  border: 1px solid rgba(155,107,252,0.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color 0.3s cubic-bezier(0.16,1,0.3,1),
              transform 0.3s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.3s cubic-bezier(0.16,1,0.3,1);
}
.bb-glass:hover {
  border-color: rgba(245,166,35,0.3); /* ← amber glow on glass hover */
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(245,166,35,0.08), 0 0 0 1px rgba(245,166,35,0.1);
}

/* ── Team grid ────────────────────────────────────────────────────────────── */
.bb-team {
  background:
    radial-gradient(ellipse 60% 50% at 20% 50%, rgba(121,64,251,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 80% 20%, rgba(34,211,238,0.06) 0%, transparent 55%),
    transparent;
}
.bb-over-intro {
  background:
    radial-gradient(ellipse 55% 45% at 85% 30%, rgba(121,64,251,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 45% 50% at 10% 70%, rgba(34,211,238,0.06) 0%, transparent 55%),
    transparent;
}
.bb-waarden {
  background:
    radial-gradient(ellipse 50% 40% at 15% 20%, rgba(121,64,251,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 45% 45% at 85% 80%, rgba(245,166,35,0.05) 0%, transparent 55%),
    transparent;
}

.bb-team__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 4.5rem;
}
.team-card { display: flex; flex-direction: column; }
.team-card__photo-wrap {
  overflow: hidden;
  aspect-ratio: 3/4;
  margin-bottom: 1.75rem;
  border: 1px solid rgba(121,64,251,0.12);
  box-shadow: 0 4px 20px rgba(26,10,60,0.08);
  position: relative;
  z-index: 2;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.team-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.team-card:hover .team-card__photo-wrap {
  border-color: rgba(121,64,251,0.35);
  box-shadow: 0 12px 40px rgba(121,64,251,0.18);
}
.team-card__role {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bb-violet);
  margin-bottom: 0.5rem;
}
.team-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-xl);
  text-transform: uppercase;
  color: var(--bb-pure);
  line-height: 1;
  margin-bottom: 0.85rem;
}
.team-card__bio {
  font-size: var(--size-sm);
  color: var(--bb-mist);
  font-weight: 400;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .bb-team__grid { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; }
}

/* ── Waarden kaarten ──────────────────────────────────────────────────────── */
.bb-waarden__card {
  background: rgba(26, 21, 53, 0.55);
  border: 1px solid rgba(155,107,252,0.14);
  border-left: 3px solid var(--bb-violet);
  padding: 2.5rem 2.75rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.3s cubic-bezier(0.16,1,0.3,1),
              border-color 0.3s;
}
.bb-waarden__card:hover {
  transform: translateY(-4px);
  border-color: rgba(155,107,252,0.35);
  box-shadow: 0 16px 48px rgba(121,64,251,0.18);
}
.bb-waarden__num {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.15em;
  color: var(--bb-amber);
  display: block;
  margin-bottom: 1rem;
}
.bb-waarden__title {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: 700;
  color: var(--bb-pure);
  margin-bottom: 0.75rem;
}
.bb-waarden__body {
  font-size: var(--size-sm);
  color: var(--bb-mist);
  line-height: 1.75;
}

@media (max-width: 768px) {
  .bb-waarden [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* ── Diensten grid (legacy, bewaard voor eventueel hergebruik) ────────────── */
.bb-diensten__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 4.5rem;
}

/* ── Diensten lagen — nieuwe 3-laags structuur ────────────────────────────── */
.bb-diensten__lagen {
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 8vw, 7rem);
  padding-block: clamp(4rem, 8vw, 7rem);
}

.bb-dienst-laag {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.bb-dienst-laag__content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.bb-dienst-laag__visual {
  display: block;
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  text-decoration: none;
}
.bb-dienst-laag__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.bb-dienst-laag__visual:hover img {
  transform: scale(1.04);
}
.bb-dienst-laag__visual-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(to top, rgba(10,7,28,0.85) 0%, transparent 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: var(--bb-pure);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.bb-dienst-laag__visual:hover .bb-dienst-laag__visual-label {
  opacity: 1;
  transform: translateY(0);
}

.bb-dienst-laag__header {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.bb-dienst-laag__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--bb-accent);
  opacity: 0.7;
  letter-spacing: 0.1em;
  padding-top: 0.35rem;
  flex-shrink: 0;
  width: 2rem;
}

.bb-dienst-laag__titel {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}

.bb-dienst-laag__sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  margin: 0;
  max-width: 52ch;
}

.bb-dienst-laag__kaarten {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-left: 4rem;
}

.bb-dienst-laag__kaart {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  text-decoration: none;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.bb-dienst-laag__kaart:hover {
  border-color: rgba(121, 64, 251, 0.35);
  background: rgba(121, 64, 251, 0.05);
  transform: translateX(4px);
}

.bb-dienst-laag__kaart--featured {
  border-color: rgba(121, 64, 251, 0.3);
  background: rgba(121, 64, 251, 0.04);
}
.bb-dienst-laag__kaart--teaser {
  border-style: dashed;
  border-color: rgba(121, 64, 251, 0.15);
  opacity: 0.75;
}
.bb-dienst-laag__kaart--teaser:hover {
  opacity: 1;
  border-color: rgba(121, 64, 251, 0.3);
}

.bb-dienst-laag__kaart-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  width: 2rem;
  text-align: center;
}

.bb-dienst-laag__kaart div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.bb-dienst-laag__kaart strong {
  font-size: 1rem;
  font-weight: 600;
  color: var(--bb-pure);
}

.bb-dienst-laag__kaart span {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
}

.bb-dienst-laag__pijl {
  font-size: 1rem;
  color: var(--bb-accent);
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s, transform 0.25s;
}
.bb-dienst-laag__pijl::before {
  content: '>';
}

.bb-dienst-laag__kaart:hover .bb-dienst-laag__pijl {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 768px) {
  .bb-dienst-laag {
    grid-template-columns: 1fr;
  }
  .bb-dienst-laag__visual {
    order: -1;
    aspect-ratio: 16 / 9;
  }
  .bb-dienst-laag__visual-label {
    opacity: 1;
    transform: none;
  }
  .bb-dienst-laag__header {
    flex-direction: column;
    gap: 0.75rem;
  }
  .bb-dienst-laag__kaarten {
    padding-left: 0;
  }
  .bb-diensten__grid { grid-template-columns: 1fr; }
  .bb-diensten__grid .dienst-card--featured { grid-column: span 1; }
}
.bb-diensten__grid .dienst-card--featured {
  grid-column: span 2;
}
.dienst-card {
  padding: 3rem;
  background: rgba(26, 21, 53, 0.5);
  border: 1px solid rgba(155,107,252,0.1);
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.dienst-card:hover {
  border-color: rgba(155,107,252,0.35);
  transform: translateY(-4px);
}
.dienst-card--featured {
  background: linear-gradient(135deg, rgba(34,211,238,0.07) 0%, rgba(121,64,251,0.25) 50%, rgba(55,30,130,0.35) 100%);
  border-color: rgba(121, 64, 251, 0.6);
  animation: featured-border-glow 5s ease-in-out infinite;
}
.dienst-card--featured:hover {
  filter: brightness(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .dienst-card--featured {
    animation: none;
    border-color: rgba(121, 64, 251, 0.4);
  }
}
.dienst-card__number {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.18em;
  color: var(--bb-amber);           /* ← amber numbers on service cards */
  margin-bottom: 1.5rem;
  display: block;
}
.dienst-card__icon {
  font-size: 2rem;
  margin-bottom: 1.1rem;
  color: var(--bb-cyan);            /* ← cyan icons */
}
.dienst-card--featured .dienst-card__icon {
  color: var(--bb-cyan);
}
.dienst-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-xl);
  text-transform: uppercase;
  color: var(--bb-pure);
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}
.dienst-card--featured .dienst-card__title {
  font-size: var(--size-2xl);
}
.dienst-card__body {
  font-size: var(--size-sm);
  color: var(--bb-mist);
  font-weight: 300;
  line-height: 1.8;
  margin-bottom: 1.75rem;
}
.dienst-card__link {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-amber);           /* ← amber "meer info" links */
  transition: color 0.2s;
}
.dienst-card__link:hover { color: var(--bb-pure); }

@media (max-width: 768px) {
  .bb-diensten__grid { grid-template-columns: 1fr; }
  .bb-diensten__grid .dienst-card--featured { grid-column: span 1; }
}

/* ── Page hero (inner pages) ──────────────────────────────────────────────── */
.bb-page-hero,
.bb-page-hero.bb-mesh {
  position: relative;
  min-height: 0;
  display: flex;
  align-items: center;
  padding-block: 14rem 5rem;
  background: transparent;   /* body::before + body::after schijnen door
                                (override op .bb-mesh uit animations.css) */
}
.bb-page-hero__content { position: relative; z-index: 2; }

/* ── Prijzen hero — tekst links, foto rechts (editorial split) ───────────── */
/* Hogere specificiteit (.bb-page-hero.bb-prijzen-hero) om display:flex te overschrijven */
.bb-page-hero.bb-prijzen-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: 72vh;
  padding-block: 0;
  overflow: hidden;
}
/* Tekst: links uitgelijnd met de container-marge */
.bb-prijzen-hero__tekst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 12rem;
  padding-bottom: 7rem;
  padding-left: max(2rem, calc(50vw - 600px));
  padding-right: clamp(2rem, 4vw, 5rem);
  position: relative;
  z-index: 2;
}
/* Foto: vult de rechter helft volledig */
.bb-prijzen-hero__foto {
  position: relative;
  overflow: hidden;
  min-height: 60vh;
}
.bb-prijzen-hero__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: brightness(0.8) grayscale(0.1);
}
@media (max-width: 768px) {
  .bb-page-hero.bb-prijzen-hero {
    grid-template-columns: 1fr;
  }
  .bb-prijzen-hero__tekst {
    padding: 12rem 2rem 5rem;
  }
  .bb-prijzen-hero__foto {
    display: none;
  }
}
.bb-page-hero__tag {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bb-cyan);            /* ← cyan page tag */
  margin-bottom: 1.5rem;
  display: block;
}
.bb-page-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-3xl);
  text-transform: uppercase;
  color: var(--bb-pure);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.bb-page-hero__sub {
  margin-top: 2rem;
  font-size: var(--size-base);
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  max-width: 52ch;
}

/* ── Case study — deliverables strip ─────────────────────────────────────── */
.bb-case-deliverables-strip {
  padding-block: 2.5rem;
  border-bottom: 1px solid rgba(121, 64, 251, 0.1);
}
.bb-case-deliverables {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.bb-case-client {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bb-spark);
  margin-right: 0.5rem;
}
.bb-case-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-mist);
  border: 1px solid rgba(121, 64, 251, 0.3);
  border-radius: 2px;
  padding: 0.35em 0.75em;
}

/* ── Case study — archive badge ───────────────────────────────────────────── */
.bb-archive-card__case-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-amber);
  border: 1px solid rgba(245, 166, 35, 0.4);
  border-radius: 2px;
  padding: 0.2em 0.5em;
}

/* ── Case study — section (editor pattern) ────────────────────────────────── */
.bb-case-section {
  padding-block: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid rgba(121, 64, 251, 0.08);
}
.bb-case-section__label {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bb-spark);
  margin-bottom: 2rem;
}
.bb-case-section__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.bb-case-section__media img,
.bb-case-section__media video {
  width: 100%;
  height: auto;
  display: block;
}
.bb-case-section__text {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--bb-mist);
  font-weight: 300;
}
@media (max-width: 768px) {
  .bb-case-section__body { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── Case study — results strip ──────────────────────────────────────────── */
.bb-case-results {
  padding-block: clamp(4rem, 8vw, 6rem);
  border-top: 1px solid rgba(121, 64, 251, 0.08);
}
.bb-case-results__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.bb-case-stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bb-case-stat__num {
  font-family: var(--font-display);
  font-size: var(--size-3xl);
  font-weight: 700;
  color: var(--bb-amber);
  line-height: 1;
}
.bb-case-stat__label {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-mist);
}
@media (max-width: 768px) {
  .bb-case-results__grid { grid-template-columns: 1fr 1fr; }
}

/* ── Contact form ─────────────────────────────────────────────────────────── */
.bb-contact-sectie {
  background:
    radial-gradient(ellipse 50% 45% at 90% 20%, rgba(121,64,251,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 5%  75%, rgba(34,211,238,0.06) 0%, transparent 60%),
    transparent;
  padding-block: clamp(5rem, 10vw, 10rem);
  position: relative;
}

.bb-contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7rem;
  align-items: start;
}
.bb-contact__info h1 { margin-bottom: 1.5rem; }
.bb-contact__meta {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.bb-contact__meta li {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-mist);
  opacity: 0.6;
}
.bb-contact__detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
}
.bb-contact__detail a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--size-base);
  color: var(--bb-mist);
  transition: color 0.2s;
}
.bb-contact__detail a:hover { color: var(--bb-violet); }
.bb-contact__icon {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  transition: color 0.2s;
}
.bb-contact__detail a .bb-contact__icon { color: var(--bb-amber); }
.bb-contact__detail a:hover .bb-contact__icon { color: inherit; }

/* ── Contact process strip ──────────────────────────────────────────────────── */
.bb-contact-process {
  padding-block: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid rgba(121, 64, 251, 0.1);
}
.bb-process__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}
.bb-process__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-spark);
  margin-bottom: 1.25rem;
}
.bb-process__title {
  font-size: var(--size-lg);
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.bb-process__body {
  color: var(--bb-mist);
  line-height: 1.8;
  font-weight: 300;
  max-width: 32ch;
}
@media (max-width: 768px) {
  .bb-process__steps { grid-template-columns: 1fr; gap: 2.5rem; }
}

.wpcf7-form input,
.wpcf7-form textarea,
.bb-form input,
.bb-form textarea {
  width: 100%;
  background: var(--bb-pure);
  border: 1px solid rgba(121,64,251,0.2);
  color: var(--bb-ink);
  font-family: var(--font-body);
  font-size: var(--size-base);
  font-weight: 300;
  padding: 1rem 1.25rem;
  outline: none;
  transition: border-color 0.3s;
  -webkit-appearance: none;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.bb-form input:focus,
.bb-form textarea:focus {
  border-color: var(--bb-amber);    /* ← amber focus ring on form fields */
}
.wpcf7-form textarea,
.bb-form textarea {
  min-height: 160px;
  resize: vertical;
}
.bb-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}
.bb-form__label {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-spark);
}

@media (max-width: 768px) {
  .bb-contact__inner { grid-template-columns: 1fr; gap: 3rem; }
}

/* ── 404 ──────────────────────────────────────────────────────────────────── */
.bb-404 {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.bb-404__number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(8rem, 25vw, 22rem);
  color: var(--bb-pure);
  line-height: 0.85;
  letter-spacing: -0.05em;
  display: block;
  margin-bottom: 2rem;
}
.bb-404__sub {
  font-size: var(--size-lg);
  color: var(--bb-mist);
  margin-bottom: 3rem;
}

/* ── Custom cursor ────────────────────────────────────────────────────────── */
.bb-cursor {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  top: 0; left: 0;
}
.bb-cursor__ring {
  width: 28px;
  height: 28px;
  border: 1.5px solid rgba(255,255,255,0.7);
  border-radius: 50%;
  position: absolute;
  top: -14px; left: -14px;
  transition: width 0.3s ease, height 0.3s ease,
              background 0.3s ease, border-color 0.3s ease,
              top 0.3s ease, left 0.3s ease,
              border-radius 0.3s ease;
}
.bb-cursor__dot {
  width: 4px;
  height: 4px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  position: absolute;
  top: -2px; left: -2px;
  transition: opacity 0.2s ease, background 0.2s ease;
}

/* Hover states */
.bb-cursor.is-hovering .bb-cursor__ring {
  width: 16px;
  height: 16px;
  top: -8px; left: -8px;
  background: var(--bb-amber);
  border-color: var(--bb-amber);
}
.bb-cursor.is-hovering .bb-cursor__dot { opacity: 0; }

/* Text cursor */
.bb-cursor.is-text .bb-cursor__ring {
  width: 3px;
  height: 1.2em;
  border-radius: 1px;
  top: -0.6em; left: -1.5px;
  border-color: var(--bb-cyan);
}

/* ── Portfolio filter pills ───────────────────────────────────────────────── */
.bb-filter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 4rem;
}
[data-filter] {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.45rem 1rem;
  border: 1px solid rgba(155,107,252,0.2);
  background: transparent;
  color: var(--bb-mist);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
[data-filter]:hover,
[data-filter].is-active {
  border-color: var(--bb-amber);
  color: var(--bb-amber);
  background: rgba(245,166,35,0.06);
}

/* ── Noise overlay ────────────────────────────────────────────────────────── */
.bb-noise::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
  z-index: 1;
}
.bb-noise > * { position: relative; z-index: 2; }

/* ── Mesh gradient background — inner page heroes & dark sections ─────────── */
/* Statische versie van de homepage glow. Geen animatie nodig op inner pages. */
.bb-mesh {
  background: transparent;
}

/* ── Sticky header ────────────────────────────────────────────────────────── */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.75rem 0;
  transition: background 0.4s cubic-bezier(0.16,1,0.3,1),
              padding 0.4s cubic-bezier(0.16,1,0.3,1),
              border-color 0.4s,
              opacity 0.5s ease,
              transform 0.5s cubic-bezier(0.16,1,0.3,1);
  border-bottom: 1px solid transparent;
}
#site-header.scrolled {
  background: rgba(8, 5, 21, 0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  padding: 1.1rem 0;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* ════════════════════════════════════════════════════════════════════════════
   Portfolio — Single project
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.bb-portfolio-hero {
  position: relative;
  min-height: 70svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-top: 8rem; /* header clearance */
}
.bb-portfolio-hero__img-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.bb-portfolio-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  transition: transform 6s cubic-bezier(0.16,1,0.3,1);
}
.bb-portfolio-single .bb-portfolio-hero__img {
  transform: scale(1);
}
.bb-portfolio-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8,5,21,0.96) 0%,
    rgba(8,5,21,0.6) 45%,
    rgba(8,5,21,0.2) 100%
  );
}
.bb-portfolio-hero__content {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(3rem, 6vw, 6rem);
}
.bb-portfolio-hero__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.bb-portfolio-hero__cat {
  font-family: var(--font-display);
  font-size: var(--size-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-amber);
  background: rgba(245,166,35,0.1);
  border: 1px solid rgba(245,166,35,0.3);
  padding: 0.3em 0.8em;
  border-radius: 4px;
}
.bb-portfolio-hero__year {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--bb-mist);
  letter-spacing: 0.06em;
}
.bb-portfolio-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--bb-pure);
}

/* ── Content ──────────────────────────────────────────────────────────────── */
.bb-portfolio-content {
  padding-block: clamp(4rem, 8vw, 8rem);
  background:
    radial-gradient(ellipse 50% 40% at 15% 25%, rgba(121,64,251,0.10) 0%, transparent 60%),
    var(--bb-void);
}
.bb-portfolio-content__inner {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 800px;
}
.bb-portfolio-content__body {
  color: var(--bb-mist);
  font-size: var(--size-lg);
  line-height: 1.75;
}
.bb-portfolio-content__body p { margin-bottom: 1.25em; }
.bb-portfolio-content__body p:last-child { margin-bottom: 0; }
.bb-portfolio-content__body strong { color: var(--bb-pure); }

/* ── Video ────────────────────────────────────────────────────────────────── */
.bb-portfolio-video {
  background: var(--bb-deep);
  padding-block: clamp(4rem, 8vw, 8rem);
}
.bb-portfolio-video__wrap {
  border-radius: 0;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}
.bb-portfolio-video__player {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* ── Gallery ──────────────────────────────────────────────────────────────── */
.bb-portfolio-gallery {
  background: transparent;
  padding-block: clamp(4rem, 8vw, 8rem);
}

/* Grid — past zich aan op aantal zichtbare foto's (1, 2 of 3) */
.bb-portfolio-gallery__grid {
  display: grid;
  gap: 4px;
}
.bb-portfolio-gallery__grid--1 { grid-template-columns: 1fr; }
.bb-portfolio-gallery__grid--2 { grid-template-columns: 2fr 1fr; }
.bb-portfolio-gallery__grid--3 {
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 1fr 1fr;
}
.bb-portfolio-gallery__grid--3 .bb-portfolio-gallery__item:first-child {
  grid-row: span 2;
}

.bb-portfolio-gallery__item {
  position: relative;
  overflow: hidden;
  background: rgba(14, 10, 35, 0.6);
  cursor: pointer;
}
.bb-portfolio-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 4 / 3;
  transition: transform 0.5s var(--ease-out), filter 0.4s ease;
  filter: brightness(0.85);
}
.bb-portfolio-gallery__grid--1 .bb-portfolio-gallery__item img,
.bb-portfolio-gallery__grid--3 .bb-portfolio-gallery__item:first-child img {
  aspect-ratio: 16 / 9;
}
.bb-portfolio-gallery__item:hover img,
.bb-portfolio-gallery__item:focus-visible img {
  transform: scale(1.04);
  filter: brightness(1);
}
.bb-portfolio-gallery__item:focus-visible {
  outline: 2px solid rgba(155, 107, 252, 0.6);
  outline-offset: -2px;
}

/* "+N meer" badge op het derde item */
.bb-portfolio-gallery__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 7, 28, 0.55);
  font-family: var(--font-hero);
  font-size: clamp(1.2rem, 2.5vw, 1.8rem);
  font-weight: 700;
  color: var(--bb-pure);
  letter-spacing: 0.04em;
  transition: background 0.25s;
  pointer-events: none;
}
.bb-portfolio-gallery__item:hover .bb-portfolio-gallery__more {
  background: rgba(10, 7, 28, 0.35);
}

@media (max-width: 600px) {
  .bb-portfolio-gallery__grid--2,
  .bb-portfolio-gallery__grid--3 {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .bb-portfolio-gallery__grid--3 .bb-portfolio-gallery__item:first-child {
    grid-row: auto;
  }
}

/* ── Lightbox ──────────────────────────────────────────────────────────────── */
.bb-lb {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 7, 28, 0.96);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.bb-lb.bb-lb--open { display: flex; }
body.bb-lb-active  { overflow: hidden; }

.bb-lb__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bb-lb__img-wrap {
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bb-lb__img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  display: block;
  user-select: none;
  transition: opacity 0.18s ease;
}
.bb-lb__img.bb-lb--fade { opacity: 0; }

/* Sluitknop */
.bb-lb__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(10, 7, 28, 0.7);
  color: var(--bb-pure);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  z-index: 2;
}
.bb-lb__close:hover {
  border-color: var(--bb-spark);
  background: rgba(155, 107, 252, 0.15);
}
.bb-lb__close svg { width: 18px; height: 18px; }

/* Pijlknoppen */
.bb-lb__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(10, 7, 28, 0.7);
  color: var(--bb-pure);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  z-index: 2;
}
.bb-lb__arrow:hover {
  border-color: var(--bb-spark);
  background: rgba(155, 107, 252, 0.15);
}
.bb-lb__arrow--prev { left:  1.5rem; }
.bb-lb__arrow--next { right: 1.5rem; }
.bb-lb__arrow svg { width: 20px; height: 20px; }

/* Teller onderaan */
.bb-lb__counter {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

@media (max-width: 600px) {
  .bb-lb__arrow--prev { left:  0.75rem; }
  .bb-lb__arrow--next { right: 0.75rem; }
  .bb-lb__img-wrap,
  .bb-lb__img { max-width: 100vw; }
}

/* ── Project Navigation ───────────────────────────────────────────────────── */
.bb-portfolio-nav {
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.bb-portfolio-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.bb-portfolio-nav__item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-decoration: none;
  max-width: 280px;
}
.bb-portfolio-nav__item--next { text-align: right; }
.bb-portfolio-nav__label {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--bb-spark);
  letter-spacing: 0.06em;
}
.bb-portfolio-nav__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-lg);
  color: var(--bb-pure);
  text-transform: uppercase;
  transition: color 0.25s;
}
.bb-portfolio-nav__item:hover .bb-portfolio-nav__title {
  color: var(--bb-violet);
}
.bb-portfolio-nav__all {
  font-family: var(--font-display);
  font-size: var(--size-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-mist);
  transition: color 0.25s;
  white-space: nowrap;
}
.bb-portfolio-nav__all:hover { color: var(--bb-violet); }

/* portfolio-card__year now defined in slider section above */

/* ════════════════════════════════════════════════════════════════════════════
   Portfolio — Archive grid
   ════════════════════════════════════════════════════════════════════════════ */
.bb-portfolio-archive {
  padding-block: clamp(3rem, 6vw, 6rem);
  background:
    radial-gradient(ellipse 55% 40% at 85% 15%, rgba(121,64,251,0.09) 0%, transparent 60%),
    transparent;
}

/* ── Category filter bar ──────────────────────────────────────────────────── */
.bb-portfolio-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.bb-filter-btn {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5em 1.25em;
  border: 1px solid rgba(121,64,251,0.2);
  border-radius: 2px;
  background: transparent;
  color: var(--bb-mist);
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.bb-filter-btn:hover {
  border-color: rgba(121,64,251,0.5);
  color: var(--bb-pure);
}
.bb-filter-btn.is-active {
  border-color: var(--bb-violet);
  color: var(--bb-violet);
  background: rgba(121,64,251,0.08);
}

/* ── Archive grid layout ──────────────────────────────────────────────────── */
.bb-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .bb-archive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .bb-archive-grid { grid-template-columns: 1fr; }
}

/* ── Archive card ─────────────────────────────────────────────────────────── */
.bb-archive-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bb-void);
  overflow: hidden;
  text-decoration: none;
  /* No gap: grid seam creates the separation */
}
/* Info sectie vult de resterende ruimte → gelijke totaalhoogte in dezelfde rij */
.bb-archive-card > .bb-archive-card__info {
  flex: 1 1 auto;
}
.bb-archive-card:focus-visible {
  outline: 2px solid var(--bb-violet);
  outline-offset: -2px;
}

/* Media wrapper — fixed aspect ratio */
.bb-archive-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bb-deep);
}

/* Thumbnail */
.bb-archive-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16,1,0.3,1),
              filter  0.5s cubic-bezier(0.16,1,0.3,1);
  filter: brightness(0.85) saturate(0.95);
}
.bb-archive-card:hover .bb-archive-card__img {
  transform: scale(1.06);
  filter: brightness(0.55) saturate(0.8);
}

/* WebM video preview — fades in on hover, behind the overlay */
.bb-archive-card__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 1;
}
.bb-archive-card.is-playing .bb-archive-card__video {
  opacity: 1;
}
.bb-archive-card.is-playing .bb-archive-card__img {
  opacity: 0;
  transform: scale(1.06);
}

/* Play badge (shown when video is present) */
.bb-archive-card__play {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(121,64,251,0.7);
  color: #fff;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0.8;
  transition: opacity 0.25s, transform 0.25s, background 0.25s;
}
.bb-archive-card:hover .bb-archive-card__play {
  opacity: 1;
  transform: scale(1.1);
  background: var(--bb-violet);
}
.bb-archive-card.is-playing .bb-archive-card__play {
  background: var(--bb-amber);
  opacity: 1;
}

/* Dark gradient over media (always present for readability) */
.bb-archive-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8,5,21,0.6) 0%,
    transparent 50%
  );
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.4s;
}
.bb-archive-card:hover .bb-archive-card__media::after {
  opacity: 0;     /* remove gradient when hovering so video is fully visible */
}

/* Info section below the media */
.bb-archive-card__info {
  padding: 1.25rem 1.5rem 1.5rem;
  background: var(--bb-surface, #0f0b28);
  border-top: 1px solid rgba(121,64,251,0.12);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.35rem 1rem;
  align-items: end;
  transition: background 0.3s;
}
.bb-archive-card:hover .bb-archive-card__info {
  background: rgba(121,64,251,0.15);
}

.bb-archive-card__meta {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.bb-archive-card__cat {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bb-amber);
}
.bb-archive-card__year {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--bb-spark);
}
.bb-archive-card__title {
  grid-column: 1;
  grid-row: 2;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--bb-pure);
  transition: color 0.25s;
}
.bb-archive-card:hover .bb-archive-card__title {
  color: var(--bb-violet);
}
.bb-archive-card__arrow {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--bb-violet);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s, transform 0.3s;
  line-height: 1;
  align-self: end;
}
.bb-archive-card:hover .bb-archive-card__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Hidden card state (filter) */
.bb-archive-card.is-hidden {
  display: none;
}

/* Empty state message */
.bb-archive-empty {
  padding: 4rem 0;
  text-align: center;
  color: var(--bb-mist);
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  letter-spacing: 0.08em;
}

/* Vastgoed crosslink onderaan portfolio */
.bb-portfolio-vastgoed-teaser {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px dashed rgba(121, 64, 251, 0.15);
  border-radius: 16px;
}
.bb-portfolio-vastgoed-teaser__text {
  font-size: var(--size-base);
  color: var(--bb-mist);
  margin: 0 0 1.25rem;
  max-width: none;
}

/* ── Featured archive card (eerste kaart, 2 kolommen breed) ──────────────── */
.bb-archive-card--featured {
  grid-column: span 2;
}
/* 2 kolommen breed × 4/3 kolomverhouding = 8/3 → matcht de rijhoogte van de normale kaart ernaast */
.bb-archive-card--featured .bb-archive-card__media {
  aspect-ratio: 8 / 3;
}
/* Bij actief categoriefilter: featured kaart gedraagt zich als gewone kaart */
.bb-archive-grid.is-filtered .bb-archive-card--featured {
  grid-column: span 1;
}
.bb-archive-grid.is-filtered .bb-archive-card--featured .bb-archive-card__media {
  aspect-ratio: 4 / 3;
}
/* Op 2-koloms raster: featured blijft 2 kolommen breed (= volle breedte) met cinematic ratio */
@media (max-width: 900px) {
  .bb-archive-card--featured {
    grid-column: span 2;
  }
  .bb-archive-card--featured .bb-archive-card__media {
    aspect-ratio: 16 / 9;
  }
}
/* Op 1-koloms raster: featured krijgt dezelfde ratio als de rest */
@media (max-width: 560px) {
  .bb-archive-card--featured {
    grid-column: span 1;
  }
  .bb-archive-card--featured .bb-archive-card__media {
    aspect-ratio: 4 / 3;
  }
}

/* ── Portfolio break — visuele onderbreking tussen batches ────────────────── */
.bb-portfolio-break {
  position: relative;
  margin-block: 1.5rem;
  min-height: clamp(260px, 36vw, 480px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Achtergrondafbeelding via pseudo-element */
.bb-portfolio-break__bg {
  position: absolute;
  inset: 0;
  background-image: url('/wp-content/uploads/2026/04/hoe-we-werken.jpg');
  background-size: cover;
  background-position: center 30%;
  filter: brightness(0.35) saturate(0.7);
  transform: scale(1.04);
  transition: transform 8s ease-out;
}
.bb-portfolio-break:hover .bb-portfolio-break__bg {
  transform: scale(1.0);
}
/* Kleur-overlay voor merkidentiteit */
.bb-portfolio-break::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(121, 64, 251, 0.18) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 188, 212, 0.08) 100%
  );
  pointer-events: none;
}
.bb-portfolio-break__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 3rem 2rem;
}
.bb-portfolio-break__label {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bb-violet);
  margin-bottom: 1.5rem;
}
.bb-portfolio-break__quote {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--bb-pure);
  margin: 0;
}

/* Verbergen bij actieve filter (JS voegt .is-hidden toe) */
.bb-portfolio-break.is-hidden {
  display: none;
}

/* ────────────────────────────────────────────────────────────────────────────
   V2 Hero — Scroll-driven logo frame (groot → klein → 3D wegdraaien)
   ──────────────────────────────────────────────────────────────────────────── */

.bb-v2-hero {
  position: relative;
  height: 600vh;
}

/* Sticky viewport with 3D perspective */
.bb-v2-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  background: var(--bb-void);
}

/* Mesh gradient background */
.bb-v2-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Frame wrapper — starts HUGE (fills viewport), JS drives transform */
.bb-v2-frame-wrap {
  position: relative;
  z-index: 1;
  width: 55vw;
  aspect-ratio: 2196.35 / 1156.52;
  will-change: transform, opacity;
  transform-style: preserve-3d;
}

/* Portfolio image reel inside frame opening */
.bb-v2-reel {
  position: absolute;
  top: 12%;
  left: 7.5%;
  right: 9.5%;
  bottom: 12%;
  overflow: hidden;
  border-radius: 2px;
  will-change: opacity;
}
.bb-v2-reel__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
}
.bb-v2-reel__slide.is-active {
  opacity: 1;
}

/* SVG frame overlay — WHITE */
.bb-v2-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  fill: #fff;
  pointer-events: none;
}

/* BEELDBREED letters — Lottie container, driven by scroll */
.bb-v2-letters {
  position: absolute;
  inset: -5% -3%;          /* slight overshoot to compensate aspect-ratio diff */
  z-index: 2;
  pointer-events: none;
  opacity: 0;              /* hidden until JS triggers reveal */
}
.bb-v2-letters svg {
  width: 100% !important;
  height: 100% !important;
}

/* ── Header: hidden during v2 hero, revealed by JS ───────────────────────── */
.bb-v2-hero ~ #site-header,
.has-v2-hero #site-header {
  /* fallback: JS adds .header-visible when hero ends */
}
#site-header.header-hidden {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}
#site-header {
  transition: background 0.4s cubic-bezier(0.16,1,0.3,1),
              padding 0.4s cubic-bezier(0.16,1,0.3,1),
              border-color 0.4s,
              opacity 0.5s ease,
              transform 0.5s cubic-bezier(0.16,1,0.3,1);
}

/* "Grenzeloze Verbeelding" — centered, rises then slides up */
.bb-v2-caption {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  will-change: transform, opacity, filter;
  pointer-events: none;
  transform-style: preserve-3d;
}
.bb-v2-caption.is-visible {
  pointer-events: auto;
}
.bb-v2-caption__tagline {
  font-family: var(--font-hero);
  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  line-height: 0.92;
  color: var(--bb-pure);
  margin: 0;
  will-change: font-weight, letter-spacing;
}

/* Story section — subtitle + services + CTA */
.bb-v2-story {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  will-change: transform, opacity;
  pointer-events: none;
  gap: clamp(1.5rem, 3vh, 2.5rem);
}
.bb-v2-story.is-visible {
  pointer-events: auto;
}
.bb-v2-story__line {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  line-height: 1.7;
  color: var(--bb-mist);
  margin: 0;
  max-width: 34rem;
}
.bb-v2-story__services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
}
.bb-v2-story__services span {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bb-spark);
  padding: 0.4em 1em;
  border: 1px solid rgba(155, 107, 252, 0.35);
  border-radius: 100px;
}
.bb-v2-story__cta {
  margin-top: 0.5rem;
}

/* Scroll indicator */
.bb-v2-sticky .bb-scroll-indicator {
  z-index: 4;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .bb-v2-frame-wrap { width: 92vw; }
  .bb-v2-caption__tagline { font-size: clamp(2rem, 10vw, 3.5rem); }
  .bb-v2-sticky { perspective: 800px; }
}

/* ════════════════════════════════════════════════
   HOMEPAGE — Vloeiende scroll-achtergrond
   ════════════════════════════════════════════════ */

/*
 * Eén gedeelde achtergrond voor de hele home — hero én content-secties.
 * De truc: zet de body-gradient OOK achter de hero sticky, zodat er tijdens
 * de hele scroll hetzelfde "levende" achtergrond-beeld is. Geen kleursprong.
 */
body {
  background: var(--bb-void);
  position: relative;
}

/*
 * Fixed achtergrond-gradient — site-wide.
 * Violet (brand), cyaan (AI/tech accent), diep blauw (diepte), donker paars (grond).
 * Alle secties zijn transparant zodat deze gradient overal doorheen schijnt.
 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 100% 60% at 20% 5%,  rgba(121, 64, 251, 0.35) 0%, transparent 60%),
    radial-gradient(ellipse  60% 40% at 70% 12%, rgba(34, 211, 238, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse  70% 80% at 85% 50%, rgba(35, 60, 150,  0.28) 0%, transparent 60%),
    radial-gradient(ellipse  80% 45% at 40% 90%, rgba(55, 15, 95,   0.20) 0%, transparent 65%);
  background-color: var(--bb-void);
  pointer-events: none;
}

/* Hero sticky: transparant zodat body-gradient er doorheen schijnt */
body.home .bb-v2-sticky {
  background: transparent;
}

/*
 * Hero-mesh faded aan de onderkant uit via een mask.
 * Langer fade-traject (50% → 100%) voor een zachter einde.
 */
body.home .bb-v2-bg {
  mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}

body.home .bb-v2-hero {
  position: relative;
}

/* ════════════════════════════════════════════════
   V3 Hero — Autoplay timeline
   Tagline → Frame + Lottie → Portfolio reel → Story
   ════════════════════════════════════════════════ */

.bb-v3-hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
}

.bb-v3-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  background: transparent;
}

.bb-v3-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 55%, transparent 100%);
}

/* ── Fase 1: Tagline — volledige z-space reis via één keyframe ────────────── */
.bb-v3-tagline {
  position: absolute;
  z-index: 3;
  color: var(--bb-pure);
  text-align: center;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  animation: v3-tagline-journey 3.8s linear 0.2s both;
  pointer-events: none;
}
.bb-v3-tagline__main {
  font-family: var(--font-hero);
  font-size: clamp(3.5rem, 9vw, 8rem);
  /* font-weight en letter-spacing worden geanimeerd via de ouder-keyframe */
  text-transform: uppercase;
  line-height: 0.92;
}
.bb-v3-tagline__sub {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.8vw, 1.35rem);
  font-weight: 300;
  letter-spacing: 0.06em;
  opacity: 0.72;
}
@keyframes v3-tagline-journey {
  /* Aankomst: dun, breed, onscherp — één spring drijft de tekst door tot 65%,
     deceleert continu zodat er geen harde stop of pauze is bij aankomst */
  0% {
    opacity: 0;
    font-weight: 200;
    letter-spacing: 0.12em;
    transform: translateZ(600px) scale(1.4);
    filter: blur(22px);
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
  /* Scherp, vet, 80px voorbij nulpunt — nog steeds in beweging */
  65% {
    opacity: 1;
    font-weight: 700;
    letter-spacing: 0.02em;
    transform: translateZ(-80px) scale(0.96);
    filter: blur(0.5px);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 1); /* versnelt de val */
  }
  /* Verdwenen in de diepte */
  82% {
    opacity: 0;
    font-weight: 700;
    letter-spacing: 0.03em;
    transform: translateZ(-500px) scale(0.80);
    filter: blur(20px);
  }
  100% {
    opacity: 0;
    font-weight: 700;
    letter-spacing: 0.03em;
    transform: translateZ(-500px) scale(0.80);
    filter: blur(20px);
  }
}

/* ── Fases 2-4: Frame — arriveert vanuit dezelfde z-diepte ───────────────── */
.bb-v3-frame-wrap {
  position: relative;
  z-index: 1;
  width: 55vw;
  aspect-ratio: 2196.35 / 1156.52;
  transform-style: preserve-3d;
  animation: v3-frame-arrive 2.0s cubic-bezier(0.16, 1, 0.3, 1) 2.7s both;
}
@keyframes v3-frame-arrive {
  from { opacity: 0; transform: translateZ(600px) scale(1.2); filter: blur(18px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Reel — begint onzichtbaar, JS brengt hem in */
.bb-v3-reel {
  position: absolute;
  top: 12%;
  left: 7.5%;
  right: 9.5%;
  bottom: 12%;
  overflow: hidden;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.bb-v3-reel.is-in { opacity: 1; }

.bb-v3-reel__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.bb-v3-reel__slide.is-active { opacity: 1; }

/* SVG frame border */
.bb-v3-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  fill: #fff;
  pointer-events: none;
}

/* Lottie letters */
.bb-v3-letters {
  position: absolute;
  inset: -5% -3%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.4, 0, 0.6, 1), filter 0.7s ease;
}
.bb-v3-letters svg {
  width: 100% !important;
  height: 100% !important;
}
.bb-v3-letters.is-visible { opacity: 1; }
.bb-v3-letters.is-out {
  opacity: 0;
  transform: translateZ(-400px) scale(0.72);
  filter: blur(14px);
}

/* ── Fase 5: Story ────────────────────────────────────────────────────────── */
.bb-v3-story {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 4rem;
  text-align: center;
  pointer-events: none;
  gap: clamp(1rem, 2vh, 1.75rem);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.bb-v3-story.is-in {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.bb-v3-story__line {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  line-height: 1.7;
  color: var(--bb-mist);
  margin: 0;
  max-width: 34rem;
}
.bb-v3-story__services {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
}
.bb-v3-story__services span {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--bb-spark);
  padding: 0.4em 1em;
  border: 1px solid rgba(155, 107, 252, 0.35);
  border-radius: 100px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .bb-v3-frame-wrap { width: 92vw; }
  .bb-v3-tagline__main { font-size: clamp(2.5rem, 10vw, 4rem); }
  .bb-v3-tagline__sub  { font-size: clamp(0.85rem, 3.5vw, 1rem); }
  .bb-v3-story { padding-bottom: 2.5rem; }
}

/* ── prefers-reduced-motion: sla intro over ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bb-v3-tagline    { animation: none; opacity: 0; }
  .bb-v3-tagline__main { font-weight: 700; letter-spacing: 0.02em; }
  .bb-v3-frame-wrap { animation: none; opacity: 1; transform: none; }
}

/* Gedeelde achtergrond met de rest van de homepage */
body.home .bb-v3-sticky { background: transparent; }
body.home .bb-v3-hero   { position: relative; }

/* ════════════════════════════════════════════════
   INNER PAGES — Animerende mesh over hele viewport
   ════════════════════════════════════════════════
   Op alle niet-home pagina's: een fixed mesh-laag op body::after.
   Vervaagt zacht lineair van boven naar onder zodat de mesh-kleuren
   aanwezig zijn in het bovenste deel van de viewport en vloeiend
   overgaan in body::before. Geen sectie-grens beïnvloedt dit,
   dus geen scheidingslijn bij <main id="wp--skip-link--target">. */
body:not(.home)::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at var(--bx1) var(--by1), rgba(121,64,251,0.45) 0%, transparent 50%),
    radial-gradient(ellipse at var(--bx2) var(--by2), rgba(34,211,238,0.18) 0%, transparent 45%),
    radial-gradient(ellipse at var(--bx3) var(--by3), rgba(55,30,130,0.40)  0%, transparent 55%),
    radial-gradient(ellipse at var(--bx4) var(--by4), rgba(245,166,35,0.14) 0%, transparent 42%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}
@media (prefers-reduced-motion: no-preference) {
  body:not(.home)::after {
    animation:
      blob1 22s ease-in-out infinite,
      blob2 28s ease-in-out infinite,
      blob3 19s ease-in-out infinite,
      blob4 35s ease-in-out 5s infinite;
  }
}

/* Marquee — zweeft als teksttextuur, volledig transparant */
body.home .bb-marquee {
  background: transparent !important;
  border: none !important;
  padding-block: 0.5rem;
  /* Zijkanten uitfaden */
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}
body.home .bb-marquee + .bb-marquee { margin-top: 0; }

body.home .bb-marquee .marquee__item {
  font-size: clamp(1rem, 2vw, 1.5rem);
  opacity: 0.18;
  letter-spacing: 0.2em;
  color: var(--bb-white);
}
body.home .bb-marquee .marquee__dot { opacity: 0.10; }
body.home .bb-marquee:last-of-type .marquee__item {
  opacity: 0.11;
  font-size: clamp(0.85rem, 1.6vw, 1.2rem);
}

/* Alle content-secties: geen eigen achtergrond, geen section-borders */
body.home .bb-intro,
body.home .bb-ai-spotlight,
body.home .bb-vastgoed-spotlight,
body.home .bb-portfolio,
body.home .bb-stats,
body.home .bb-testimonials,
body.home .bb-faq,
body.home .bb-cta {
  background: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  position: relative;
}

/* FAQ accordion-borders zichtbaar op home — zelfde kleur als uitgebreide FAQ */

/* ── Precies 2 bewuste dividers ──────────────────────────────────────────────
   1. Vóór de FAQ (rustpunt halverwege de pagina)
   2. Vóór de footer (afsluiting van de content)                             */


/* Footer__bottom: geen extra lijn op home */
body.home .footer__bottom {
  border-top: none !important;
}


/* Ademende maar compacte padding per sectie */
body.home .bb-intro        { padding: clamp(4rem, 8vw, 7rem) 0; }
body.home .bb-portfolio    { padding: clamp(3.5rem, 7vw, 6rem) 0; }
body.home .bb-ai-spotlight      { padding: clamp(4rem, 8vw, 7rem) 0; }
body.home .bb-vastgoed-spotlight { padding: clamp(4rem, 8vw, 7rem) 0; }
body.home .bb-stats        { padding: clamp(3rem, 6vw, 5rem) 0; }
body.home .bb-testimonials { padding: clamp(3.5rem, 7vw, 6rem) 0; }
body.home .bb-faq          { padding: clamp(3.5rem, 7vw, 6rem) 0; }
body.home .bb-cta          { padding: clamp(4.5rem, 9vw, 8rem) 0; overflow: hidden; }

/* Intro-tekst — zelfde schaal als andere sectiekoppen */
body.home .bb-intro__statement {
  font-size: var(--size-3xl);
  line-height: 1.05;
  letter-spacing: -0.03em;
}


/* Stats grid — consistent met structureel raster */
body.home .bb-stats__grid { gap: 1.5rem; }

/* ════════════════════════════════════════════════
   HOMEPAGE — Leesbaarheid op donkere achtergrond
   ════════════════════════════════════════════════
   De secties zijn origineel ontworpen voor lichte bg met donkere tekst.
   Op de home draaien we alle tekstkleuren om naar licht, en geven cards
   een subtiel glas-achtig oppervlak voor extra contrast.
*/

/* ── Headings: krijgen de pure witte merkkleur ───────────────────────────── */
body.home .bb-intro__statement,
body.home .bb-faq__title,
body.home .bb-testimonials__title,
body.home .bb-stats__title,
body.home .bb-ai-spotlight__title,
body.home .bb-portfolio__title,
body.home .bb-cta__title {
  color: var(--bb-pure);
}

/* ── Body-tekst: lichter grijs voor comfortabele leesbaarheid ────────────── */
body.home .bb-intro__body,
body.home .bb-testimonials .testimonial-card__quote,
body.home .bb-faq__answer p,
body.home .bb-faq__answer,
body.home .bb-stats__subtitle,
body.home .bb-ai-spotlight__body,
body.home .bb-portfolio__body {
  color: rgba(245, 243, 255, 0.78);
}

/* ── Muted labels / captions: gedimd maar nog leesbaar ───────────────────── */
body.home .bb-intro__label,
body.home .bb-stats__label,
body.home .bb-faq__label,
body.home .bb-testimonials__label,
body.home .bb-ai-spotlight__label,
body.home .bb-portfolio__label,
body.home .bb-cta .label,
body.home .bb-cta__label,
body.home .testimonial-card__role {
  color: rgba(245, 243, 255, 0.55);
}

/* ── FAQ: donkere questions wit maken, borders lichter ────────────────────── */
body.home .bb-faq__question {
  color: var(--bb-pure);
}
body.home .bb-faq__question:hover {
  color: var(--bb-violet-light, #b59dff);
}

/* ── Testimonial cards: glass-achtig zodat quotes leesbaar zijn ──────────── */
body.home .testimonial-card {
  background: rgba(21, 16, 46, 0.55);
  border: 1px solid rgba(155, 107, 252, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.home .testimonial-card__author {
  color: var(--bb-pure);
}

/* ── Badges: lichte rand en tekst voor donkere achtergrond ──────────────── */
body.home .bb-badge {
  color: rgba(245, 243, 255, 0.85);
  border-color: rgba(245, 243, 255, 0.18);
}
body.home .bb-badge:nth-child(1) { color: #22d3ee; border-color: rgba(34, 211, 238, 0.4); }
body.home .bb-badge:nth-child(2) { color: #b59dff; border-color: rgba(155, 107, 252, 0.5); }
body.home .bb-badge:nth-child(3) { color: #f5a623; border-color: rgba(245, 166, 35, 0.45); }
body.home .bb-badge:nth-child(4) { color: rgba(245, 243, 255, 0.65); border-color: rgba(245, 243, 255, 0.2); }

/* ── Stats: grote cijfers helder + labels zichtbaar ─────────────────────── */
body.home .bb-stats__number {
  color: var(--bb-pure);
}
body.home .bb-stats__caption {
  color: rgba(245, 243, 255, 0.65);
}

/* ── Portfolio cards: zichtbaar maken op donkere achtergrond ─────────────── */
body.home .bb-portfolio__card {
  border-color: rgba(245, 243, 255, 0.1);
}
body.home .bb-portfolio__link {
  color: rgba(245, 243, 255, 0.85);
}
body.home .bb-portfolio__link:hover {
  color: var(--bb-pure);
}

/* ── Universele fallback: elke --bb-ink / --bb-ink-soft tekst op de home
      wordt automatisch licht gemaakt. Vangt edge cases af.                   */
body.home .bb-intro,
body.home .bb-stats,
body.home .bb-faq,
body.home .bb-testimonials,
body.home .bb-ai-spotlight,
body.home .bb-vastgoed-spotlight,
body.home .bb-portfolio {
  --bb-ink: var(--bb-pure);
  --bb-ink-soft: rgba(245, 243, 255, 0.78);
  --bb-ink-muted: rgba(245, 243, 255, 0.55);
}

/* ════════════════════════════════════════════════
   INNER PAGES — Content-secties transparant
   ════════════════════════════════════════════════
   Op niet-home pagina's: alle content-secties hebben geen eigen
   achtergrond-gradient. De body-gradient (body::before) + mesh-laag
   (body::after) zorgen voor de sfeer. Zo ontstaat er geen zichtbare
   lijn bij de grens van <main id="wp--skip-link--target"> of tussen
   andere secties. */
/* Op niet-home pagina's: alle content-secties en hun ::before / ::after
   pseudo-elementen krijgen geen eigen achtergrond of gradient-overlay.
   Lokale gradients knippen af aan sectiegrenzen en veroorzaken zichtbare
   naadlijnen. De body::before + body::after zorgen voor de sfeer. */
body:not(.home) .bb-noise::after,
body:not(.home) .bb-diensten-sectie::before,
body:not(.home) .bb-diensten-sectie::after,
body:not(.home) .bb-contact-sectie::before,
body:not(.home) .bb-contact-sectie::after,
body:not(.home) .bb-stats::before,
body:not(.home) .bb-stats::after,
body:not(.home) .bb-intro::before,
body:not(.home) .bb-intro::after,
body:not(.home) .bb-faq::before,
body:not(.home) .bb-faq::after,
body:not(.home) .bb-testimonials::before,
body:not(.home) .bb-testimonials::after,
body:not(.home) .bb-ai-spotlight::before,
body:not(.home) .bb-ai-spotlight::after,
body:not(.home) .bb-vastgoed-spotlight::before,
body:not(.home) .bb-vastgoed-spotlight::after,
body:not(.home) .bb-portfolio::before,
body:not(.home) .bb-portfolio::after,
body:not(.home) .bb-portfolio-hero::before,
body:not(.home) .bb-portfolio-hero::after,
body:not(.home) .bb-portfolio-content::before,
body:not(.home) .bb-portfolio-content::after,
body:not(.home) .bb-portfolio-video::before,
body:not(.home) .bb-portfolio-video::after,
body:not(.home) .bb-portfolio-gallery::before,
body:not(.home) .bb-portfolio-gallery::after,
body:not(.home) .bb-portfolio-archive::before,
body:not(.home) .bb-portfolio-archive::after,
body:not(.home) .bb-cta-simple::before,
body:not(.home) .bb-cta-simple::after,
body:not(.home) .bb-cta::before,
body:not(.home) .bb-cta::after,
body:not(.home) .bb-team::before,
body:not(.home) .bb-team::after,
body:not(.home) .bb-proces::before,
body:not(.home) .bb-proces::after,
body:not(.home) .bb-over::before,
body:not(.home) .bb-over::after,
body:not(.home) .bb-over-intro::before,
body:not(.home) .bb-over-intro::after,
body:not(.home) .bb-waarden::before,
body:not(.home) .bb-waarden::after,
body:not(.home) .bb-video-showcase::before,
body:not(.home) .bb-video-showcase::after,
body:not(.home) .bb-vastgoed-showcase::before,
body:not(.home) .bb-vastgoed-showcase::after,
body:not(.home) .bb-vastgoed-showreel::before,
body:not(.home) .bb-vastgoed-showreel::after,
body:not(.home) .bb-vastgoed-diensten::before,
body:not(.home) .bb-vastgoed-diensten::after,
body:not(.home) .bb-webdesign::before,
body:not(.home) .bb-webdesign::after,
body:not(.home) .bb-branding::before,
body:not(.home) .bb-branding::after,
body:not(.home) .bb-marketing::before,
body:not(.home) .bb-marketing::after,
body:not(.home) .bb-motion::before,
body:not(.home) .bb-motion::after,
body:not(.home) .bb-video::before,
body:not(.home) .bb-video::after {
  display: none !important;
}

body:not(.home) .bb-diensten-sectie,
body:not(.home) .bb-contact-sectie,
body:not(.home) .bb-stats,
body:not(.home) .bb-intro,
body:not(.home) .bb-faq,
body:not(.home) .bb-testimonials,
body:not(.home) .bb-ai-spotlight,
body:not(.home) .bb-vastgoed-spotlight,
body:not(.home) .bb-portfolio,
body:not(.home) .bb-portfolio-hero,
body:not(.home) .bb-portfolio-content,
body:not(.home) .bb-portfolio-video,
body:not(.home) .bb-portfolio-gallery,
body:not(.home) .bb-portfolio-archive,
body:not(.home) .bb-cta-simple,
body:not(.home) .bb-cta,
body:not(.home) .bb-team,
body:not(.home) .bb-proces,
body:not(.home) .bb-over,
body:not(.home) .bb-over-intro,
body:not(.home) .bb-waarden,
body:not(.home) .bb-video-showcase,
body:not(.home) .bb-vastgoed-showcase,
body:not(.home) .bb-vastgoed-showreel,
body:not(.home) .bb-vastgoed-diensten,
body:not(.home) .bb-webdesign,
body:not(.home) .bb-branding,
body:not(.home) .bb-marketing,
body:not(.home) .bb-motion,
body:not(.home) .bb-video,
body:not(.home) .bb-dronebeelden {
  background: transparent !important;
}


/* ── Drone Pro CTA — zusterbedrijf verwijzing ────────────────────────────── */
.bb-drone-pro-cta {
  margin-top: 4rem;
  padding: 2.5rem 3rem;
  border: 1px solid rgba(121, 64, 251, 0.2);
  border-radius: 4px;
  background: rgba(121, 64, 251, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}

.bb-drone-pro-cta__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-accent);
  margin: 0;
}

.bb-drone-pro-cta__text {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 52ch;
  margin: 0;
  line-height: 1.65;
}

.bb-drone-pro-cta .bb-btn {
  margin-top: 0.5rem;
}

@media (max-width: 768px) {
  .bb-drone-pro-cta {
    padding: 2rem 1.5rem;
  }
}


/* ══════════════════════════════════════════════════════════════════════════════
   PRIJZEN PAGINA
   ══════════════════════════════════════════════════════════════════════════════ */

.bb-prijzen {
  padding-block: clamp(5rem, 10vw, 10rem);
}

.bb-prijzen__intro {
  max-width: 60ch;
  margin-bottom: clamp(4rem, 8vw, 7rem);
}

.bb-prijzen__uitleg {
  margin-top: 1rem;
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.65);
}

/* Grid van dienst-blokken */
.bb-prijzen__grid {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

/* Eén dienst-blok */
.bb-prijs-card {
  position: relative;
  padding-top: 3rem;
}
/* Full-bleed divider — breekt uit de container */
.bb-prijs-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.bb-prijs-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.bb-prijs-card__icon {
  font-size: 1.5rem;
  line-height: 1;
}

.bb-prijs-card__dienst {
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 600;
  margin: 0;
}

.bb-prijs-card__note {
  margin-top: 1.25rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.45);
}
.bb-prijs-card--teaser {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.bb-prijs-card__teaser-tekst {
  color: rgba(255, 255, 255, 0.6);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 36ch;
}

/* Pakketten — webdesign heeft er 3 */
.bb-prijs-card__pakketten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Twee pakketten naast elkaar */
.bb-prijzen__twee-kolom {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

/* Individueel pakket */
.bb-pakket {
  position: relative;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.bb-pakket--featured {
  border-color: rgba(121, 64, 251, 0.45);
  background: rgba(121, 64, 251, 0.05);
}

.bb-pakket__badge {
  position: absolute;
  top: -0.75rem;
  left: 1.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-accent);
  background: #080515;
  padding: 0.2rem 0.75rem;
  border: 1px solid rgba(121, 64, 251, 0.4);
  border-radius: 100px;
}

.bb-pakket__top {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.bb-pakket__naam {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

.bb-pakket__prijs {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.bb-pakket__prijs strong {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--bb-pure);
}

.bb-pakket__lijst {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bb-pakket__lijst li {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.65);
  padding-left: 1.25rem;
  position: relative;
}

.bb-pakket__lijst li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--bb-accent);
  font-size: 0.8rem;
}

.bb-pakket__voor {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.35);
  margin: 0;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Footer van de sectie */
.bb-prijzen__footer {
  position: relative;
  margin-top: 5rem;
  padding-top: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.bb-prijzen__footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
}

.bb-prijzen__footer-tekst {
  flex: 1 1 auto;
  max-width: 52ch;
}

.bb-prijzen__disclaimer {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
  line-height: 1.7;
}

/* Over-ons Robin sectie */
.bb-over-robin .bb-intro__inner {
  display: grid;
  gap: 4rem;
}

/* Over-ons "Hoe we werken" — tekst links, foto rechts */
.bb-over-verhaal__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: center;
}

.bb-over-verhaal__foto {
  position: relative;
  overflow: hidden;
  border-radius: 0;
}

.bb-over-verhaal__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-height: 680px;
  filter: brightness(0.9) saturate(0.95);
}

@media (max-width: 860px) {
  .bb-over-verhaal__grid {
    grid-template-columns: 1fr;
  }
  .bb-over-verhaal__foto {
    order: -1;
  }
  .bb-over-verhaal__foto img {
    max-height: 420px;
  }
}

/* Responsive */
@media (max-width: 900px) {
  .bb-prijs-card__pakketten {
    grid-template-columns: 1fr;
  }

  .bb-prijzen__twee-kolom {
    grid-template-columns: 1fr;
  }

  .bb-prijzen__footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .bb-prijzen__grid {
    gap: 3.5rem;
  }
}

/* ── Onze inzichten (blog cards op Over ons) ──────────────────────────────── */
.bb-inzichten {
  padding-block: clamp(5rem, 10vw, 10rem);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.bb-inzichten__header {
  margin-bottom: 3.5rem;
}
.bb-inzichten__title {
  font-size: var(--size-2xl);
  margin-top: 1rem;
}
.bb-inzichten__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.bb-inzichten__cta {
  display: flex;
  justify-content: center;
  margin-top: 3.5rem;
}

/* Card */
.bb-inzicht-card {
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
  text-decoration: none;
  color: inherit;
}
.bb-inzicht-card:hover {
  border-color: rgba(155,107,252,0.35);
  background: rgba(121,64,251,0.06);
  transform: translateY(-4px);
}
.bb-inzicht-card__img-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.bb-inzicht-card__img-wrap--placeholder {
  background: linear-gradient(135deg, rgba(121,64,251,0.1), rgba(34,211,238,0.06));
}
.bb-inzicht-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.bb-inzicht-card:hover .bb-inzicht-card__img-wrap img {
  transform: scale(1.04);
}
.bb-inzicht-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.5rem;
  flex: 1;
}
.bb-inzicht-card__cat {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-cyan);
}
.bb-inzicht-card__title {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: 600;
  line-height: 1.15;
  color: var(--bb-pure);
  text-transform: none;
  letter-spacing: 0;
}
.bb-inzicht-card__excerpt {
  font-size: var(--size-sm);
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  flex: 1;
}
.bb-inzicht-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: rgba(255,255,255,0.4);
}
.bb-inzicht-card__arrow {
  color: var(--bb-violet);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.bb-inzicht-card:hover .bb-inzicht-card__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Responsive */
@media (max-width: 900px) {
  .bb-inzichten__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .bb-inzichten__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Blog archiefpagina (inzichten overzicht) ────────────────────────────── */
.bb-inzichten-archief {
  padding-block: clamp(5rem, 10vw, 8rem) clamp(5rem, 10vw, 10rem);
}

/* Categoriefilter pills */
.bb-cat-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 3rem;
}
.bb-cat-filter__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5em 1.25em;
  border: 1px solid rgba(121,64,251,0.2);
  border-radius: 2px;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-mist);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.bb-cat-filter__pill:hover {
  border-color: rgba(121,64,251,0.5);
  color: var(--bb-pure);
}
.bb-cat-filter__pill.is-active {
  border-color: var(--bb-violet);
  color: var(--bb-violet);
  background: rgba(121,64,251,0.08);
}

/* Uitgelicht artikel */
.bb-featured-post {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  text-decoration: none;
  color: inherit;
  margin-bottom: 3rem;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.bb-featured-post:hover {
  border-color: rgba(155,107,252,0.35);
  background: rgba(121,64,251,0.06);
}
.bb-featured-post__img-wrap {
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  height: 100%;
  min-height: 280px;
}
.bb-featured-post__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}
.bb-featured-post:hover .bb-featured-post__img-wrap img {
  transform: scale(1.04);
}
.bb-featured-post__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 2.5rem 2.5rem;
}
.bb-featured-post__title {
  font-family: var(--font-display);
  font-size: clamp(var(--size-xl), 2.5vw, var(--size-2xl));
  font-weight: 700;
  line-height: 1.1;
  color: var(--bb-pure);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}
.bb-featured-post__excerpt {
  font-size: var(--size-sm);
  line-height: 1.75;
  color: rgba(255,255,255,0.6);
  margin: 0;
  flex: 1;
}
.bb-featured-post__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: rgba(255,255,255,0.4);
  margin-top: auto;
}
.bb-featured-post__cta {
  color: var(--bb-violet);
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.04em;
  transition: color 0.2s ease;
}
.bb-featured-post:hover .bb-featured-post__cta {
  color: var(--bb-pure);
}

/* Responsive: featured post stapelt op tablets */
@media (max-width: 900px) {
  .bb-featured-post {
    grid-template-columns: 1fr;
  }
  .bb-featured-post__img-wrap {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 7;
  }
  .bb-featured-post__body {
    padding: 1.75rem;
  }
}
@media (max-width: 600px) {
  .bb-featured-post__body {
    padding: 1.25rem;
    gap: 0.75rem;
  }
}

/* Grid: bb-archief-grid is de className op wp:post-template */
ul.bb-archief-grid,
.bb-archief-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 0 0 !important;
}
ul.bb-archief-grid > li,
.bb-archief-grid > li {
  display: flex;
  flex-direction: column;
}
ul.bb-archief-grid > li > .bb-inzicht-card,
.bb-archief-grid > li > .bb-inzicht-card {
  flex: 1;
}

@media (max-width: 900px) {
  ul.bb-archief-grid, .bb-archief-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  ul.bb-archief-grid, .bb-archief-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Paginering */
.bb-archief-paginering {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
}
.bb-archief-paginering .wp-block-query-pagination {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.bb-archief-paginering .wp-block-query-pagination-numbers a,
.bb-archief-paginering .wp-block-query-pagination-numbers span,
.bb-archief-paginering .wp-block-query-pagination-previous a,
.bb-archief-paginering .wp-block-query-pagination-next a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.bb-archief-paginering .wp-block-query-pagination-numbers a:hover,
.bb-archief-paginering .wp-block-query-pagination-previous a:hover,
.bb-archief-paginering .wp-block-query-pagination-next a:hover {
  border-color: var(--bb-violet);
  color: var(--bb-pure);
  background: rgba(121,64,251,0.08);
}
.bb-archief-paginering .wp-block-query-pagination-numbers .current {
  border-color: var(--bb-violet);
  color: var(--bb-pure);
  background: rgba(121,64,251,0.15);
}

/* Native block overrides binnen de kaarten */
.bb-inzicht-card__img-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  width: 100%;
  display: block;
  background: rgba(255,255,255,0.04);
}
.bb-inzicht-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}
.bb-inzicht-card:hover .bb-inzicht-card__img-wrap img {
  transform: scale(1.04);
}
.bb-inzicht-card .wp-block-post-terms a,
.bb-inzicht-card .wp-block-post-terms {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-cyan);
  text-decoration: none;
}
.bb-inzicht-card .wp-block-post-title {
  font-family: var(--font-display);
  font-size: var(--size-lg);
  font-weight: 600;
  line-height: 1.15;
  color: var(--bb-pure);
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}
.bb-inzicht-card .wp-block-post-title a {
  color: inherit;
  text-decoration: none;
}
.bb-inzicht-card .wp-block-post-excerpt__excerpt {
  font-size: var(--size-sm);
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  margin: 0;
}
.bb-inzicht-card .wp-block-post-date {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: rgba(255,255,255,0.4);
}
.bb-inzicht-card .wp-block-post-date time { color: inherit; }

@media (max-width: 900px) {
  .bb-inzichten-archief .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 600px) {
  .bb-inzichten-archief .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}



/* ═══════════════════════════════════════════════════════════════════════════
   BLOG POST LAYOUTS — Single post templates
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Gedeelde post-content typografie ────────────────────────────────────── */
.bb-post__body .wp-block-post-content,
.bb-post__body-wide .wp-block-post-content { font-size: 1.0625rem; }

.bb-post__body .wp-block-post-content h2,
.bb-post__body-wide .wp-block-post-content h2 {
  font-size: var(--size-xl); color: var(--bb-pure);
  margin: 3rem 0 1rem; line-height: 1.2;
}
.bb-post__body .wp-block-post-content h3,
.bb-post__body-wide .wp-block-post-content h3 {
  font-size: var(--size-lg); color: var(--bb-pure);
  margin: 2.5rem 0 0.75rem; line-height: 1.25;
}
.bb-post__body .wp-block-post-content p,
.bb-post__body-wide .wp-block-post-content p {
  line-height: 1.85; color: rgba(255,255,255,0.82); margin-bottom: 1.5rem;
}
.bb-post__body .wp-block-post-content a,
.bb-post__body-wide .wp-block-post-content a {
  color: var(--bb-violet); text-decoration: underline; text-underline-offset: 3px;
}
.bb-post__body .wp-block-post-content ul,
.bb-post__body .wp-block-post-content ol,
.bb-post__body-wide .wp-block-post-content ul,
.bb-post__body-wide .wp-block-post-content ol {
  padding-left: 1.75rem; color: rgba(255,255,255,0.82);
  line-height: 1.85; margin-bottom: 1.5rem;
}
.bb-post__body .wp-block-post-content li,
.bb-post__body-wide .wp-block-post-content li { margin-bottom: 0.5rem; }

.bb-post__body .wp-block-post-content blockquote,
.bb-post__body-wide .wp-block-post-content blockquote {
  border-left: 2px solid var(--bb-violet);
  margin: 2.5rem 0; padding: 1rem 1.75rem;
  background: rgba(255,255,255,0.02);
}
.bb-post__body .wp-block-post-content blockquote p,
.bb-post__body-wide .wp-block-post-content blockquote p {
  color: var(--bb-pure); font-size: 1.125rem; font-style: italic; margin: 0;
}
.bb-post__body .wp-block-post-content figure,
.bb-post__body-wide .wp-block-post-content figure { margin: 2.5rem 0; }
.bb-post__body .wp-block-post-content figure img,
.bb-post__body-wide .wp-block-post-content figure img { width: 100%; border-radius: 2px; }
.bb-post__body .wp-block-post-content figcaption,
.bb-post__body-wide .wp-block-post-content figcaption {
  font-family: var(--font-mono); font-size: var(--size-xs);
  color: rgba(255,255,255,0.4); text-align: center; margin-top: 0.75rem;
}

/* ── Drop cap ───────────────────────────────────────────────────────────── */
.bb-post__body .wp-block-post-content > p:first-of-type::first-letter,
.bb-post__body-wide .wp-block-post-content > p:first-of-type::first-letter {
  float: left;
  font-size: 3.6em;
  line-height: 0.8;
  margin: 0.06em 0.12em 0 -0.03em;
  color: var(--bb-pure);
  font-weight: 700;
}

/* ── Lead paragraph ─────────────────────────────────────────────────────── */
.bb-post__body .bb-post__lead,
.bb-post__body-wide .bb-post__lead {
  font-size: 1.25rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.9);
  margin-bottom: 2.5rem;
}

/* ── Pull quote (uitgelicht citaat, breekt uit de kolom) ────────────────── */
.bb-post__body .wp-block-post-content .bb-pullquote,
.bb-post__body-wide .wp-block-post-content .bb-pullquote {
  border-left: none;
  border-top: 2px solid var(--bb-violet);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: transparent;
  margin: 3.5rem -2rem;
  padding: 2rem 2rem 2rem 0;
  text-align: left;
}
.bb-post__body .wp-block-post-content .bb-pullquote p,
.bb-post__body-wide .wp-block-post-content .bb-pullquote p {
  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bb-pure);
  margin: 0;
}

/* ── Brede afbeelding (breekt uit de kolom) ─────────────────────────────── */
.bb-post__body .wp-block-post-content .bb-wide-image,
.bb-post__body-wide .wp-block-post-content .bb-wide-image {
  margin: 3.5rem -4rem;
  border-radius: 4px;
  overflow: hidden;
}
.bb-post__body .wp-block-post-content .bb-wide-image img,
.bb-post__body-wide .wp-block-post-content .bb-wide-image img {
  width: 100%;
  display: block;
}

/* ── Media + tekst (afbeelding naast tekst) ─────────────────────────────── */
.bb-post__body .wp-block-post-content .bb-media-text,
.bb-post__body-wide .wp-block-post-content .bb-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  margin: 3rem 0;
}
.bb-post__body .wp-block-post-content .bb-media-text--flip {
  direction: rtl;
}
.bb-post__body .wp-block-post-content .bb-media-text--flip > * {
  direction: ltr;
}
.bb-media-text__image {
  border-radius: 4px;
  overflow: hidden;
}
.bb-media-text__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4px;
}
.bb-media-text__content p {
  margin-bottom: 1rem;
}
.bb-media-text__content p:last-child {
  margin-bottom: 0;
}

/* ── Highlight box (kennisblok) ─────────────────────────────────────────── */
.bb-post__body .wp-block-post-content .bb-highlight-box,
.bb-post__body-wide .wp-block-post-content .bb-highlight-box {
  background: rgba(121, 64, 251, 0.06);
  border: 1px solid rgba(121, 64, 251, 0.15);
  border-radius: 4px;
  padding: 2rem;
  margin: 3rem 0;
}
.bb-highlight-box h3 {
  font-size: var(--size-md);
  color: var(--bb-pure);
  margin: 0 0 1rem;
}
.bb-highlight-box p {
  color: rgba(255,255,255,0.82);
  margin-bottom: 0.75rem;
}
.bb-highlight-box p:last-child { margin-bottom: 0; }
.bb-highlight-box ul {
  padding-left: 1.5rem;
  color: rgba(255,255,255,0.82);
}
.bb-highlight-box li {
  margin-bottom: 0.4rem;
}

/* ── Styled hr ──────────────────────────────────────────────────────────── */
.bb-post__body .wp-block-post-content hr,
.bb-post__body-wide .wp-block-post-content hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(121,64,251,0.3), transparent);
  margin: 3.5rem 0;
}

/* ── Responsive: artikellayout ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .bb-post__body .wp-block-post-content .bb-media-text,
  .bb-post__body-wide .wp-block-post-content .bb-media-text {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .bb-post__body .wp-block-post-content .bb-media-text--flip {
    direction: ltr;
  }
  .bb-post__body .wp-block-post-content .bb-wide-image,
  .bb-post__body-wide .wp-block-post-content .bb-wide-image {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
  .bb-post__body .wp-block-post-content .bb-pullquote,
  .bb-post__body-wide .wp-block-post-content .bb-pullquote {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ── Gedeelde body-kolom ─────────────────────────────────────────────────── */
.bb-post__body {
  max-width: 760px; margin-inline: auto;
  padding: clamp(4rem,8vw,7rem) 1.5rem clamp(5rem,10vw,9rem);
}
.bb-post__body-wide {
  max-width: 980px; margin-inline: auto;
  padding: clamp(4rem,8vw,7rem) 1.5rem clamp(5rem,10vw,9rem);
}
/* WordPress voegt wp-block-group class toe — geen extra stijl nodig */
.wp-block-group.bb-post__body,
.wp-block-group.bb-post__body-wide { display: block; }

/* ── Template 1: Diepte — Groot editorial hero ───────────────────────────── */
.bb-post-hero-diepte {
  position: relative;
  height: clamp(420px, 65vh, 720px);
  overflow: hidden;
}
.bb-post-hero-diepte__img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.bb-post-hero-diepte__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(6,3,18,0.05) 0%,
    rgba(6,3,18,0.45) 50%,
    rgba(6,3,18,0.88) 100%);
}
.bb-post-hero-diepte__meta {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 0 clamp(1.5rem,5vw,3rem) clamp(2.5rem,5vw,4rem);
  max-width: calc(800px + 6rem); margin-inline: auto;
}
.bb-post-hero-diepte__cat {
  font-family: var(--font-mono); font-size: var(--size-xs);
  color: var(--bb-violet); text-transform: uppercase;
  letter-spacing: 0.12em; margin-bottom: 0.75rem;
}
.bb-post-hero-diepte__title {
  font-size: clamp(var(--size-2xl), 5.5vw, var(--size-3xl));
  color: var(--bb-pure); line-height: 1.05;
  margin: 0 0 1rem; max-width: 18ch;
}
.bb-post-hero-diepte__date {
  font-family: var(--font-mono); font-size: var(--size-xs);
  color: rgba(255,255,255,0.4);
}

/* ── Template 2: Visueel — Split hero + brede kolom ─────────────────────── */
.bb-post-hero-visueel {
  display: grid; grid-template-columns: 58fr 42fr;
  min-height: clamp(420px, 60vh, 680px);
}
.bb-post-hero-visueel__img { overflow: hidden; }
.bb-post-hero-visueel__img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.bb-post-hero-visueel__meta {
  background: var(--bb-ink);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(2.5rem,5vw,4.5rem);
  border-left: 1px solid rgba(255,255,255,0.06);
}
.bb-post-hero-visueel__tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: var(--size-xs);
  color: var(--bb-violet); text-transform: uppercase;
  letter-spacing: 0.12em; margin-bottom: 1.25rem;
}
.bb-post-hero-visueel__title {
  font-size: clamp(var(--size-lg), 3.5vw, var(--size-2xl));
  color: var(--bb-pure); line-height: 1.15;
  margin: 0 0 1.5rem; max-width: 20ch;
}
.bb-post-hero-visueel__date {
  font-family: var(--font-mono); font-size: var(--size-xs);
  color: rgba(255,255,255,0.38);
}
.bb-post-hero-visueel__cta {
  margin-top: 2rem; padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.bb-post-hero-visueel__cta a {
  font-family: var(--font-mono); font-size: var(--size-xs);
  color: var(--bb-mist); text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.1em;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.bb-post-hero-visueel__cta a:hover { color: var(--bb-pure); }

/* ── Template 3: Compact — Minimale kop + auteur ────────────────────────── */
.bb-post-hero-compact {
  padding: clamp(8rem,13vw,13rem) 1.5rem clamp(3rem,5vw,4.5rem);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bb-post-hero-compact__inner {
  max-width: 760px; margin-inline: auto;
}
.bb-post-hero-compact__cat {
  font-family: var(--font-mono); font-size: var(--size-xs);
  color: var(--bb-violet); text-transform: uppercase;
  letter-spacing: 0.12em; margin-bottom: 1rem;
}
.bb-post-hero-compact__title {
  font-size: clamp(var(--size-2xl), 5vw, var(--size-3xl));
  color: var(--bb-pure); line-height: 1.05;
  margin: 0 0 1.25rem; max-width: 22ch;
}
.bb-post-hero-compact__date {
  font-family: var(--font-mono); font-size: var(--size-xs);
  color: rgba(255,255,255,0.38);
}

/* ── Auteurkaart (Template 3) ────────────────────────────────────────────── */
.bb-post__author {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 2px; margin-bottom: 3.5rem;
}
.bb-post__author-photo {
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.bb-post__author-name {
  font-size: var(--size-sm); color: var(--bb-pure);
  font-weight: 600; display: block; margin-bottom: 0.2rem;
}
.bb-post__author-role {
  font-family: var(--font-mono); font-size: var(--size-xs);
  color: var(--bb-mist);
}

/* ── Gerelateerde inzichten ──────────────────────────────────────────────── */
.bb-inzichten-gerelateerd {
  padding: clamp(4rem,8vw,8rem) 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.bb-inzichten-gerelateerd__grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 2rem; margin-top: 2rem;
}
.bb-inzicht-mini {
  display: flex; flex-direction: column; gap: 1rem;
  text-decoration: none; color: inherit;
}
.bb-inzicht-mini__img-wrap {
  aspect-ratio: 16/9; overflow: hidden; border-radius: 2px;
}
.bb-inzicht-mini__img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.45s ease;
}
.bb-inzicht-mini:hover .bb-inzicht-mini__img-wrap img { transform: scale(1.04); }
.bb-inzicht-mini__cat {
  font-family: var(--font-mono); font-size: var(--size-xs);
  color: var(--bb-violet); text-transform: uppercase; letter-spacing: 0.08em;
}
.bb-inzicht-mini__title {
  font-size: var(--size-base); color: var(--bb-pure);
  line-height: 1.4; margin: 0;
}
.bb-inzicht-mini__date {
  font-family: var(--font-mono); font-size: var(--size-xs);
  color: rgba(255,255,255,0.38);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .bb-post-hero-visueel { grid-template-columns: 1fr; }
  .bb-post-hero-visueel__img { aspect-ratio: 16/7; min-height: 0; }
  .bb-post-hero-visueel__meta { justify-content: flex-start; }
  .bb-post-hero-visueel__cta { display: none; }
}
@media (max-width: 700px) {
  .bb-inzichten-gerelateerd__grid { grid-template-columns: 1fr; }
  .bb-post-hero-diepte { height: clamp(320px, 55vw, 480px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROPOSITIES INGANG — Dubbele ingang: merken vs. vastgoed
   ═══════════════════════════════════════════════════════════════════════════ */

.bb-proposities {
  padding: clamp(64px, 10vw, 120px) clamp(24px, 5vw, 80px);
}
.bb-proposities__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 80px) clamp(32px, 5vw, 72px);
  align-items: start;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(121, 64, 251, 0.10);
  border-radius: 6px;
}

/* Scheidingslijn */
.bb-proposities__divider {
  width: 1px;
  background: rgba(255,255,255,0.1);
  align-self: stretch;
  margin: 0 clamp(32px, 5vw, 72px);
}

/* Elk paneel */
.bb-propositie {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px 0;
}

/* Nummer */
.bb-propositie__num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .35;
  color: #fff;
}

/* Tag */
.bb-propositie__tag {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
}
.bb-propositie--merken .bb-propositie__tag { color: var(--bb-violet, #7940fb); }
.bb-propositie--vastgoed .bb-propositie__tag { color: var(--bb-amber, #d97706); }

/* Titel */
.bb-propositie__title {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}

/* Body */
.bb-propositie__body {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  color: rgba(255,255,255,0.6);
  margin: 0;
  max-width: 44ch;
}

/* Diensten lijst */
.bb-propositie__diensten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bb-propositie__diensten li {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  padding-left: 18px;
  position: relative;
}
.bb-propositie__diensten li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.bb-propositie--merken .bb-propositie__diensten li::before {
  background: var(--bb-violet, #7940fb);
}
.bb-propositie--vastgoed .bb-propositie__diensten li::before {
  background: var(--bb-amber, #d97706);
}

/* CTA knop */
.bb-propositie__cta {
  align-self: flex-start;
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Amber ghost button variant (voor vastgoed) */
.bb-btn--amber {
  color: var(--bb-amber);
  border-color: var(--bb-amber);
}
.bb-btn--amber:hover,
.bb-btn--amber:focus-visible {
  background: var(--bb-amber);
  border-color: var(--bb-amber);
  color: #fff;
  animation: none;
}

/* Reveal animaties */
.bb-proposities .reveal-left,
.bb-proposities .reveal-right {
  opacity: 0;
  transform: translateX(0);
  transition: opacity .7s ease, transform .7s ease;
}
.bb-proposities .reveal-left { transform: translateX(-32px); }
.bb-proposities .reveal-right { transform: translateX(32px); }
.bb-proposities .reveal-left.is-visible,
.bb-proposities .reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}
@media (prefers-reduced-motion: reduce) {
  .bb-proposities .reveal-left,
  .bb-proposities .reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Responsive */
@media (max-width: 900px) {
  .bb-proposities__inner {
    grid-template-columns: 1fr;
  }
  .bb-propositie__body { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VASTGOED SUBBRAND — "Frost Glass" licht thema (body.bb-vastgoed-page)
   Zelfde visuele DNA als de merken-wereld: violet accent, animated mesh,
   frosted glassmorphism. Maar dan in light mode op cool lavendel-grijs.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. CSS custom properties — cool lavendel-grijs, violet blijft primair */
body.bb-vastgoed-page {
  background: #F0EEF6;
  color: var(--bb-ink);
  --bb-void:    #F0EEF6;
  --bb-deep:    #E8E5F0;
  --bb-surface: rgba(255, 255, 255, 0.72);
  --bb-white:   var(--bb-ink);
  --bb-pure:    var(--bb-ink);
  --bb-mist:    var(--bb-ink-soft);
  --bb-spark:   #7940FB;
  --bb-violet:  #7940FB;  /* violet blijft primair — sterkste familieband */
}

/* Body pseudo-elementen: lichte variant voor vastgoed */
body.bb-vastgoed-page::before {
  background:
    radial-gradient(ellipse 100% 60% at 20% 5%,  rgba(121, 64, 251, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse  60% 40% at 70% 12%, rgba(34, 211, 238, 0.04) 0%, transparent 55%),
    radial-gradient(ellipse  70% 80% at 85% 50%, rgba(100, 60, 180, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse  80% 45% at 40% 90%, rgba(121, 64, 251, 0.04) 0%, transparent 65%);
  background-color: #F0EEF6;
}
body.bb-vastgoed-page::after {
  background-image:
    radial-gradient(ellipse at var(--bx1) var(--by1), rgba(121,64,251,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at var(--bx2) var(--by2), rgba(34,211,238,0.04) 0%, transparent 45%),
    radial-gradient(ellipse at var(--bx3) var(--by3), rgba(100,60,180,0.06)  0%, transparent 55%),
    radial-gradient(ellipse at var(--bx4) var(--by4), rgba(245,166,35,0.03) 0%, transparent 42%);
}

/* 2. Logo: lichte versie verbergen, donkere tonen */
body.bb-vastgoed-page .site-header__mark--light { display: none; }
body.bb-vastgoed-page .site-header__mark--dark  { display: block; }

/* 3. Header — frosted glas met blur */
body.bb-vastgoed-page #site-header {
  background: rgba(240, 238, 246, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(121, 64, 251, 0.06);
}
body.bb-vastgoed-page #site-header.scrolled {
  background: rgba(240, 238, 246, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(121, 64, 251, 0.1);
}
body.bb-vastgoed-page .site-header__inner a,
body.bb-vastgoed-page .site-header__nav a,
body.bb-vastgoed-page .site-header__wordmark {
  color: var(--bb-ink);
}
body.bb-vastgoed-page .site-header__subbrand {
  color: #7940FB;
  border-left-color: rgba(121, 64, 251, 0.2);
}
body.bb-vastgoed-page .site-header__nav a:hover { color: #7940FB; opacity: 1; }
body.bb-vastgoed-page .bb-hamburger span { background: var(--bb-ink); }

/* 4. Page hero — mesh blijft leven */
body.bb-vastgoed-page .bb-page-hero {
  color: var(--bb-ink);
}
body.bb-vastgoed-page .bb-page-hero__tag { color: #7940FB; }
body.bb-vastgoed-page .bb-page-hero__title { color: var(--bb-ink); }

/* 5. Showreel: video blijft cinematic */
body.bb-vastgoed-page .bb-vastgoed-showreel {
  background: #E8E5F0;
}

/* 6. Diensten sectie — violet mesh-glows */
body.bb-vastgoed-page .bb-vastgoed-diensten {
  background: transparent;
}
body.bb-vastgoed-page .bb-vastgoed-diensten::before {
  background:
    radial-gradient(ellipse 55% 40% at 90% 10%, rgba(121,64,251,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 40% 50% at 5%  90%, rgba(34,211,238,0.04) 0%, transparent 60%);
}
body.bb-vastgoed-page .bb-vastgoed-diensten__title { color: var(--bb-ink); }
body.bb-vastgoed-page .bb-vastgoed-diensten__sub   { color: var(--bb-ink-soft); }

/* Dienst-kaarten: frosted glas */
body.bb-vastgoed-page .bb-vd-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(121, 64, 251, 0.10);
  box-shadow: 0 2px 16px rgba(26, 10, 60, 0.05);
}
body.bb-vastgoed-page .bb-vd-card:hover {
  border-color: rgba(121, 64, 251, 0.30);
  box-shadow: 0 12px 40px rgba(121, 64, 251, 0.12);
}
body.bb-vastgoed-page .bb-vd-card--featured {
  background: rgba(121, 64, 251, 0.04);
  border-color: rgba(121, 64, 251, 0.25);
}
body.bb-vastgoed-page .bb-vd-card__title { color: var(--bb-ink); }
body.bb-vastgoed-page .bb-vd-card__body  { color: var(--bb-ink-soft); }
body.bb-vastgoed-page .bb-vd-card__list li { color: var(--bb-ink-muted); }
body.bb-vastgoed-page .bb-vd-card__media img { filter: brightness(0.95); }
body.bb-vastgoed-page .bb-vd-card:hover .bb-vd-card__media img { filter: brightness(1); }
body.bb-vastgoed-page .bb-vd-card__play-hint { background: rgba(121,64,251,0.08); }

/* "Voor wie" chips — violet tint */
body.bb-vastgoed-page .bb-voor-wie__item {
  color: var(--bb-ink);
  background: rgba(121, 64, 251, 0.06);
  border-color: rgba(121, 64, 251, 0.18);
}

/* 7. Mesh gradient — animated blobs op licht, subtielere opacity */
body.bb-vastgoed-page .bb-mesh {
  background:
    radial-gradient(ellipse at var(--bx1) var(--by1), rgba(121,64,251,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at var(--bx2) var(--by2), rgba(34,211,238,0.08)  0%, transparent 45%),
    radial-gradient(ellipse at var(--bx3) var(--by3), rgba(100,60,180,0.10)  0%, transparent 55%),
    radial-gradient(ellipse at var(--bx4) var(--by4), rgba(245,166,35,0.06)  0%, transparent 42%),
    #F0EEF6;
}
body.bb-vastgoed-page .bb-noise::after { opacity: 0.025; }

/* 8. Knoppen — violet primair */
body.bb-vastgoed-page .bb-btn--filled {
  background: #7940FB;
  border-color: #7940FB;
  color: #fff;
  background-position: 0%;
}
body.bb-vastgoed-page .bb-btn--filled:hover {
  background: #9B6BFC;
  border-color: #9B6BFC;
}
body.bb-vastgoed-page .bb-btn--ghost {
  color: var(--bb-ink);
  border-color: rgba(121, 64, 251, 0.25);
  background: rgba(121, 64, 251, 0.05);
}
body.bb-vastgoed-page .bb-btn--ghost:hover {
  border-color: #7940FB;
  color: #7940FB;
  background: rgba(121, 64, 251, 0.08);
  animation: none;
}

/* 9. CTA banner */
body.bb-vastgoed-page .bb-cta-simple {
  background: #E8E5F0;
}
body.bb-vastgoed-page .bb-cta-simple__title { color: var(--bb-ink); }

/* 10. Footer — lavendel */
body.bb-vastgoed-page #site-footer {
  background: #E8E5F0;
  border-top-color: rgba(121, 64, 251, 0.12);
}
body.bb-vastgoed-page .footer__nav h4     { color: var(--bb-ink); }
body.bb-vastgoed-page .footer__nav a      { color: var(--bb-ink-soft); }
body.bb-vastgoed-page .footer__nav a:hover{ color: #7940FB; }
body.bb-vastgoed-page .footer__wordmark   { color: var(--bb-ink); }
body.bb-vastgoed-page .footer__baseline   { color: var(--bb-ink-muted); }
body.bb-vastgoed-page .footer__bottom     { border-top-color: rgba(121,64,251,0.08); }
body.bb-vastgoed-page .footer__bottom p,
body.bb-vastgoed-page .footer__bottom a   { color: var(--bb-ink-muted); }

/* 11. Mobile nav */
body.bb-vastgoed-page .bb-mobile-nav {
  background: rgba(240, 238, 246, 0.98);
}
body.bb-vastgoed-page .bb-mobile-nav a { color: var(--bb-ink); }
body.bb-vastgoed-page .bb-mobile-nav a:hover { color: #7940FB; }

/* 12. Footer logo toggle */
body.bb-vastgoed-page .footer__logo-framed--light { display: none; }
body.bb-vastgoed-page .footer__logo-framed--dark  { display: block; }

/* 13. Nav-item "Vastgoed" markeren */
.site-header__nav a.nav-vastgoed,
.bb-mobile-nav a.nav-vastgoed {
  color: #7940FB;
}
.site-header__nav a.nav-vastgoed:hover { opacity: 0.8; }
body.bb-vastgoed-page .site-header__nav a.nav-vastgoed { color: #7940FB; }

/* ═══════════════════════════════════════════════════════════════════════════
   VASTGOED STATS — Vertrouwensband met cijfers
   ═══════════════════════════════════════════════════════════════════════════ */

.bb-vastgoed-stats {
  padding-block: clamp(3rem, 6vw, 5rem);
  background: transparent;
}
.bb-vastgoed-stats__tagline {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-xl);
  color: var(--bb-pure);
  letter-spacing: -0.01em;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.bb-vastgoed-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
}
.bb-vastgoed-stats__item {
  text-align: center;
  padding: clamp(1.5rem, 3vw, 2.5rem) 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.3s ease;
}
.bb-vastgoed-stats__item:hover {
  border-color: rgba(121, 64, 251, 0.25);
}
.bb-vastgoed-stats__number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  color: #7940FB;
  line-height: 1;
  display: block;
}
.bb-vastgoed-stats__label {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bb-mist);
  margin-top: 0.75rem;
  display: block;
}
@media (max-width: 900px) {
  .bb-vastgoed-stats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .bb-vastgoed-stats__grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .bb-vastgoed-stats__item { padding: 1.25rem 0.5rem; }
}

/* Frost Glass overrides (vastgoed-pagina) */
body.bb-vastgoed-page .bb-vastgoed-stats__tagline { color: var(--bb-ink); }
body.bb-vastgoed-page .bb-vastgoed-stats__item {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(121, 64, 251, 0.10);
  box-shadow: 0 2px 16px rgba(26, 10, 60, 0.05);
}
body.bb-vastgoed-page .bb-vastgoed-stats__item:hover {
  border-color: rgba(121, 64, 251, 0.30);
  box-shadow: 0 12px 40px rgba(121, 64, 251, 0.12);
}
body.bb-vastgoed-page .bb-vastgoed-stats__number { color: #7940FB; }
body.bb-vastgoed-page .bb-vastgoed-stats__label { color: var(--bb-ink-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   VASTGOED REDENEN — Drie kernpijlers
   ═══════════════════════════════════════════════════════════════════════════ */

.bb-vastgoed-redenen {
  padding-block: clamp(5rem, 10vw, 8rem);
}
.bb-vastgoed-redenen__intro {
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.bb-vastgoed-redenen__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-3xl);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--bb-pure);
  margin: 0.75rem 0 0;
}
.bb-vastgoed-redenen__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.bb-vastgoed-redenen__card {
  padding: clamp(2rem, 4vw, 3rem);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.bb-vastgoed-redenen__card:hover {
  border-color: rgba(121, 64, 251, 0.25);
  transform: translateY(-3px);
}
.bb-vastgoed-redenen__icon {
  width: 40px;
  height: 40px;
  color: #7940FB;
  margin-bottom: 1.5rem;
}
.bb-vastgoed-redenen__icon svg {
  width: 100%;
  height: 100%;
}
.bb-vastgoed-redenen__card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-lg);
  color: var(--bb-pure);
  margin-bottom: 0.75rem;
}
.bb-vastgoed-redenen__card-body {
  font-size: var(--size-sm);
  color: var(--bb-mist);
  line-height: 1.75;
  font-weight: 300;
}
@media (max-width: 900px) {
  .bb-vastgoed-redenen__grid { grid-template-columns: 1fr; }
}

/* Frost Glass overrides (vastgoed-pagina) */
body.bb-vastgoed-page .bb-vastgoed-redenen__title { color: var(--bb-ink); }
body.bb-vastgoed-page .bb-vastgoed-redenen__card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(121, 64, 251, 0.10);
  box-shadow: 0 2px 16px rgba(26, 10, 60, 0.05);
}
body.bb-vastgoed-page .bb-vastgoed-redenen__card:hover {
  border-color: rgba(121, 64, 251, 0.30);
  box-shadow: 0 12px 40px rgba(121, 64, 251, 0.12);
}
body.bb-vastgoed-page .bb-vastgoed-redenen__icon { color: #7940FB; }
body.bb-vastgoed-page .bb-vastgoed-redenen__card-title { color: var(--bb-ink); }
body.bb-vastgoed-page .bb-vastgoed-redenen__card-body  { color: var(--bb-ink-soft); }

/* ═══════════════════════════════════════════════════════════════════════════
   WERKWIJZE — Stappenplan (vastgoed-pagina)
   ═══════════════════════════════════════════════════════════════════════════ */

.bb-werkwijze {
  padding-block: clamp(5rem, 10vw, 9rem);
}
.bb-werkwijze__intro { margin-bottom: clamp(3rem, 6vw, 5rem); }
.bb-werkwijze__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-3xl);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--bb-pure);
  margin: 0.75rem 0 1rem;
}
.bb-werkwijze__sub {
  font-size: var(--size-lg);
  color: var(--bb-mist);
  max-width: 55ch;
  font-weight: 300;
}
.bb-werkwijze__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  counter-reset: stap;
}
.bb-werkwijze__step {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.bb-werkwijze__step:hover {
  border-color: rgba(121, 64, 251, 0.25);
  transform: translateY(-2px);
}
.bb-werkwijze__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: #7940FB;
  display: block;
  margin-bottom: 1rem;
}
.bb-werkwijze__step-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-lg);
  color: var(--bb-pure);
  margin-bottom: 0.75rem;
}
.bb-werkwijze__step-body {
  font-size: var(--size-sm);
  color: var(--bb-mist);
  line-height: 1.7;
  font-weight: 300;
}
@media (max-width: 900px) {
  .bb-werkwijze__steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .bb-werkwijze__steps { grid-template-columns: 1fr; }
}

/* Frost Glass overrides (vastgoed-pagina) */
body.bb-vastgoed-page .bb-werkwijze__title { color: var(--bb-ink); }
body.bb-vastgoed-page .bb-werkwijze__sub   { color: var(--bb-ink-soft); }
body.bb-vastgoed-page .bb-werkwijze__step {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(121, 64, 251, 0.10);
  box-shadow: 0 2px 16px rgba(26, 10, 60, 0.05);
}
body.bb-vastgoed-page .bb-werkwijze__step:hover {
  border-color: rgba(121, 64, 251, 0.30);
  box-shadow: 0 12px 40px rgba(121, 64, 251, 0.12);
}
body.bb-vastgoed-page .bb-werkwijze__num { color: #7940FB; }
body.bb-vastgoed-page .bb-werkwijze__step-title { color: var(--bb-ink); }
body.bb-vastgoed-page .bb-werkwijze__step-body  { color: var(--bb-ink-soft); }

/* ── Vastgoed CTA uitbreidingen ──────────────────────────────────────────── */

.bb-cta-simple__tag {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #7940FB;
  margin-bottom: 0.5rem;
}
.bb-cta-simple__sub {
  font-size: var(--size-base);
  color: var(--bb-mist);
  max-width: 50ch;
  margin-top: 0.75rem;
  font-weight: 300;
  line-height: 1.7;
}
.bb-cta-simple__buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
body.bb-vastgoed-page .bb-cta-simple__sub { color: var(--bb-ink-soft); }

/* ── Vastgoed FAQ Frost Glass overrides ──────────────────────────────────── */

body.bb-vastgoed-page .bb-faq__title    { color: var(--bb-ink); }
body.bb-vastgoed-page .bb-faq__label    { color: var(--bb-ink-muted); }
body.bb-vastgoed-page .bb-faq__question { color: var(--bb-ink); }
body.bb-vastgoed-page .bb-faq__question:hover { color: #7940FB; }
body.bb-vastgoed-page .bb-faq__answer,
body.bb-vastgoed-page .bb-faq__answer p { color: var(--bb-ink-soft); }
body.bb-vastgoed-page .bb-faq__item {
  border-bottom-color: rgba(121, 64, 251, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   VASTGOED MICROSITE — Header, footer & navigatie
   ═══════════════════════════════════════════════════════════════════════════ */

/* Subbrand label naast wordmark */
.site-header__subbrand {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #7940FB;
  margin-left: 0.5rem;
  padding-left: 0.5rem;
  border-left: 1px solid rgba(121, 64, 251, 0.2);
  line-height: 1;
  align-self: center;
}

/* Cross-link button (rechts in de header) — alleen desktop */
.site-header__crosslink {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.5rem 1.25rem;
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  margin-left: 2rem;
  display: none;
}
@media (min-width: 1024px) {
  .site-header__crosslink { display: inline-block; }
}
/* Vastgoed-site: "Merken" knop — violet ghost op frosted bg */
body.bb-vastgoed-page .site-header__crosslink {
  color: #7940FB !important;
  border: 1px solid rgba(121, 64, 251, 0.25);
  background: rgba(121, 64, 251, 0.06);
}
body.bb-vastgoed-page .site-header__crosslink:hover {
  background: rgba(121, 64, 251, 0.12);
  border-color: rgba(121, 64, 251, 0.4);
}
/* Hoofdsite: "Vastgoed" knop — licht op donker */
.site-header__crosslink--vastgoed {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}
.site-header__crosslink--vastgoed:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.35);
}

/* Vastgoed nav: ruimte na logo */
.site-header__nav--vastgoed {
  margin-left: 1.5rem;
}
.site-header__nav--vastgoed a {
  position: relative;
}
.site-header__nav--vastgoed a.is-active {
  color: #7940FB;
}
.site-header__nav--vastgoed a.is-active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: #7940FB;
  border-radius: 1px;
}

/* Mobiele vastgoed-nav — frosted lavendel */
.bb-mobile-nav--vastgoed {
  background: rgba(240, 238, 246, 0.98) !important;
}
.bb-mobile-nav--vastgoed a {
  color: var(--bb-ink) !important;
}
.bb-mobile-nav--vastgoed a:hover,
.bb-mobile-nav--vastgoed a.is-active {
  color: #7940FB !important;
}
.bb-mobile-nav--vastgoed hr {
  border: none;
  border-top: 1px solid rgba(121, 64, 251, 0.08);
  margin: 0.75rem 0;
}
.bb-mobile-nav__back {
  font-size: 0.85rem;
  color: var(--bb-ink-muted) !important;
}
.bb-mobile-nav__vastgoed {
  font-size: 1rem !important;
  color: #7940FB !important;
  font-weight: 500;
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: 0;
}

/* Vastgoed footer — frosted lavendel
   Layout erft van de base .footer__inner 12-kolom grid (global.css).
   Kleur-overrides via body.bb-vastgoed-page selectors hierboven. */
.site-footer--vastgoed {
  background: #E8E5F0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VASTGOED MICROSITE — Page hero (herbruikbaar)
   ═══════════════════════════════════════════════════════════════════════════ */

.bb-vg-hero {
  padding: clamp(6rem, 12vw, 10rem) 0 clamp(4rem, 8vw, 6rem);
}
.bb-vg-hero__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #7940FB;
  margin-bottom: 1rem;
}
.bb-vg-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.5rem, 7vw, 8rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--bb-ink);
  margin-bottom: 1.25rem;
}
.bb-vg-hero__sub {
  font-size: var(--size-lg);
  color: var(--bb-ink-soft);
  max-width: 55ch;
  line-height: 1.7;
  font-weight: 300;
}
.bb-vg-hero__buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VASTGOED MICROSITE — Prijzen pakketten
   ═══════════════════════════════════════════════════════════════════════════ */

.bb-vg-prijzen { padding-block: clamp(4rem, 8vw, 7rem); }
.bb-vg-prijzen__intro { margin-bottom: clamp(3rem, 6vw, 5rem); }
.bb-vg-prijzen__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: stretch;
}
.bb-vg-pakket {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(121, 64, 251, 0.10);
  box-shadow: 0 2px 16px rgba(26, 10, 60, 0.05);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.bb-vg-pakket .bb-vg-pakket__list { flex: 1; }
.bb-vg-pakket .bb-btn { margin-top: auto; }
.bb-vg-pakket:hover {
  border-color: rgba(121, 64, 251, 0.30);
  box-shadow: 0 12px 40px rgba(121, 64, 251, 0.12);
  transform: translateY(-4px);
}
.bb-vg-pakket--featured {
  border-color: rgba(121, 64, 251, 0.25);
  background: rgba(121, 64, 251, 0.04);
  position: relative;
}
.bb-vg-pakket--featured::before {
  content: 'Populairst';
  position: absolute;
  top: -12px;
  left: 1.5rem;
  background: var(--bb-amber);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 2px;
}
.bb-vg-pakket__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-xl);
  color: var(--bb-ink);
}
.bb-vg-pakket__prijs {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-2xl);
  color: var(--bb-amber);
}
.bb-vg-pakket__prijs--text {
  font-size: var(--size-lg);
  color: var(--bb-violet);
}
.bb-vg-pakket__prijs span {
  font-size: var(--size-sm);
  font-weight: 400;
  color: var(--bb-ink-muted);
}
.bb-vg-pakket__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.bb-vg-pakket__list li {
  font-size: var(--size-sm);
  color: var(--bb-ink-soft);
  padding: 0.4rem 0;
  padding-left: 1.25rem;
  position: relative;
}
.bb-vg-pakket__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #7940FB;
  font-weight: 700;
}
@media (max-width: 1024px) {
  .bb-vg-prijzen__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .bb-vg-prijzen__grid { grid-template-columns: 1fr; }
}

/* Extra's lijst */
.bb-vg-extras { padding-block: clamp(3rem, 6vw, 5rem); }
.bb-vg-extras__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.bb-vg-extra {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(121, 64, 251, 0.10);
  font-size: var(--size-sm);
  color: var(--bb-ink);
}
.bb-vg-extra__prijs {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--bb-amber);
  margin-left: auto;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VASTGOED MICROSITE — Diensten detail grid
   ═══════════════════════════════════════════════════════════════════════════ */

.bb-vg-diensten-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.bb-vg-dienst {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(121, 64, 251, 0.10);
  box-shadow: 0 2px 16px rgba(26, 10, 60, 0.05);
  padding: clamp(2rem, 4vw, 3rem);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.bb-vg-dienst:hover {
  border-color: rgba(121, 64, 251, 0.30);
  box-shadow: 0 12px 40px rgba(121, 64, 251, 0.12);
  transform: translateY(-3px);
}
.bb-vg-dienst__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: #7940FB;
  margin-bottom: 1rem;
}
.bb-vg-dienst__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-xl);
  color: var(--bb-ink);
  margin-bottom: 0.75rem;
}
.bb-vg-dienst__body {
  font-size: var(--size-sm);
  color: var(--bb-ink-soft);
  line-height: 1.75;
  margin-bottom: 1rem;
}
.bb-vg-dienst__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--bb-ink-muted);
}
@media (max-width: 768px) {
  .bb-vg-diensten-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VASTGOED MICROSITE — Contact formulier
   ═══════════════════════════════════════════════════════════════════════════ */

.bb-vg-contact { padding-block: clamp(3rem, 6vw, 5rem); }
.bb-vg-contact__layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: start;
}
.bb-vg-contact__info h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-xl);
  color: var(--bb-ink);
  margin-bottom: 1rem;
}
.bb-vg-contact__info p {
  font-size: var(--size-base);
  color: var(--bb-ink-soft);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.bb-vg-form { display: flex; flex-direction: column; gap: 1rem; }
.bb-vg-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.bb-vg-form label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-ink-muted);
  display: block;
  margin-bottom: 0.35rem;
}
.bb-vg-form input,
.bb-vg-form select,
.bb-vg-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: var(--size-sm);
  font-family: var(--font-body);
  color: var(--bb-ink);
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(121, 64, 251, 0.12);
  border-radius: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.bb-vg-form input:focus,
.bb-vg-form select:focus,
.bb-vg-form textarea:focus {
  outline: none;
  border-color: #7940FB;
  box-shadow: 0 0 0 3px rgba(121, 64, 251, 0.10);
}
.bb-vg-form textarea { min-height: 120px; resize: vertical; }
@media (max-width: 768px) {
  .bb-vg-contact__layout { grid-template-columns: 1fr; }
  .bb-vg-form__row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VASTGOED MICROSITE — Werk/portfolio grid
   ═══════════════════════════════════════════════════════════════════════════ */

.bb-vg-werk { padding-block: clamp(3rem, 6vw, 5rem); }
.bb-vg-werk__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.bb-vg-werk__item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #E8E5F0;
}
.bb-vg-werk__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.bb-vg-werk__item:hover img {
  transform: scale(1.04);
}
.bb-vg-werk__item--wide {
  grid-column: span 2;
}
.bb-vg-werk__label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(transparent, rgba(26, 10, 60, 0.7));
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.bb-vg-werk__item:hover .bb-vg-werk__label {
  opacity: 1;
}
@media (max-width: 768px) {
  .bb-vg-werk__grid { grid-template-columns: repeat(2, 1fr); }
  .bb-vg-werk__item--wide { grid-column: span 1; }
}
@media (max-width: 480px) {
  .bb-vg-werk__grid { grid-template-columns: 1fr; }
}

/* Werk overlay (label + type) */
.bb-vg-werk__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(transparent, rgba(26, 10, 60, 0.75));
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.bb-vg-werk__item:hover .bb-vg-werk__overlay { opacity: 1; }
.bb-vg-werk__overlay .bb-vg-werk__label {
  position: static;
  background: none;
  padding: 0;
  opacity: 1;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-sm);
  letter-spacing: 0;
  text-transform: none;
}
.bb-vg-werk__type {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.bb-vg-werk__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.bb-vg-werk__cta p {
  font-size: var(--size-base);
  color: var(--bb-ink-soft);
  margin: 0 0 1rem;
  max-width: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VASTGOED MICROSITE — Diensten detail page
   ═══════════════════════════════════════════════════════════════════════════ */

.bb-vg-diensten-detail { padding-block: clamp(3rem, 6vw, 5rem); }
.bb-vg-diensten-detail__intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
}
.bb-vg-diensten-detail__intro h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-2xl);
  color: var(--bb-ink);
  margin-bottom: 1rem;
}
.bb-vg-diensten-detail__sub {
  font-size: var(--size-base);
  color: var(--bb-ink-soft);
  line-height: 1.7;
}
.bb-vg-dienst__meta {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.bb-vg-dienst__meta li {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--bb-ink-muted);
  line-height: 1.5;
}
.bb-vg-dienst__meta li strong {
  color: var(--bb-ink-soft);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   VASTGOED MICROSITE — Prijzen extras + makelaar CTA
   ═══════════════════════════════════════════════════════════════════════════ */

.bb-vg-pakket__badge {
  position: absolute;
  top: -12px;
  left: 1.5rem;
  background: var(--bb-amber);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 2px;
  display: none; /* ::before al aanwezig */
}
.bb-vg-pakket__header {
  margin-bottom: 1rem;
}
.bb-vg-pakket__btw {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--bb-ink-muted);
  margin-top: 0.15rem;
}
.bb-vg-pakket__omschrijving {
  font-size: var(--size-sm);
  color: var(--bb-ink-soft);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.bb-vg-extras__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-xl);
  color: var(--bb-ink);
  margin-bottom: 1.5rem;
}
.bb-vg-extras__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(121, 64, 251, 0.10);
  font-size: var(--size-sm);
  color: var(--bb-ink);
}
.bb-vg-extras__dienst { flex: 1; }
.bb-vg-extras__prijs {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--bb-amber);
  white-space: nowrap;
}
.bb-vg-makelaar {
  margin-top: clamp(3rem, 6vw, 5rem);
}
.bb-vg-makelaar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2rem, 4vw, 3rem);
  background: linear-gradient(135deg, rgba(121, 64, 251, 0.06), rgba(100, 60, 180, 0.03));
  border: 1px solid rgba(121, 64, 251, 0.12);
}
.bb-vg-makelaar__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-xl);
  color: var(--bb-ink);
  margin-bottom: 0.5rem;
}
.bb-vg-makelaar__body {
  font-size: var(--size-sm);
  color: var(--bb-ink-soft);
  line-height: 1.6;
}
@media (max-width: 640px) {
  .bb-vg-makelaar__inner {
    flex-direction: column;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VASTGOED MICROSITE — Contact form grid (updated)
   ═══════════════════════════════════════════════════════════════════════════ */

.bb-vg-contact__layout {
  grid-template-columns: 1.2fr 1fr;
}
.bb-vg-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.bb-vg-form__field--full { grid-column: 1 / -1; }
.bb-vg-form__field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bb-ink-muted);
  display: block;
  margin-bottom: 0.35rem;
}
.bb-vg-form__submit {
  margin-top: 1rem;
}
.bb-vg-form__note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--bb-ink-muted);
  margin-top: 0.75rem;
  text-align: center;
}
.bb-vg-contact__sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.bb-vg-contact__sidebar .bb-vg-contact__info {
  padding: 1.5rem;
  background: rgba(121, 64, 251, 0.04);
  border: 1px solid rgba(121, 64, 251, 0.10);
}
.bb-vg-contact__sidebar .bb-vg-contact__info h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-base);
  color: var(--bb-ink);
  margin-bottom: 0.5rem;
}
.bb-vg-contact__sidebar .bb-vg-contact__info p {
  font-size: var(--size-sm);
  color: var(--bb-ink-soft);
  line-height: 1.6;
  margin-bottom: 0;
}
.bb-vg-contact__sidebar .bb-vg-contact__info a {
  color: #7940FB;
  text-decoration: none;
}
.bb-vg-contact__sidebar .bb-vg-contact__info a:hover {
  text-decoration: underline;
}
@media (max-width: 768px) {
  .bb-vg-form__grid { grid-template-columns: 1fr; }
  .bb-vg-form__field--full { grid-column: auto; }
}

/* CF7 op vastgoed: lichte achtergrond, donkere invoertekst */
body.bb-vastgoed-page .wpcf7-form input,
body.bb-vastgoed-page .wpcf7-form select,
body.bb-vastgoed-page .wpcf7-form textarea {
  color: var(--bb-ink);
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(121, 64, 251, 0.12);
}
body.bb-vastgoed-page .wpcf7-form input:focus,
body.bb-vastgoed-page .wpcf7-form select:focus,
body.bb-vastgoed-page .wpcf7-form textarea:focus {
  border-color: #7940FB;
  box-shadow: 0 0 0 3px rgba(121, 64, 251, 0.10);
}
body.bb-vastgoed-page .wpcf7-form label {
  color: var(--bb-ink-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   VASTGOED MICROSITE — 6-step werkwijze variant
   ═══════════════════════════════════════════════════════════════════════════ */

.bb-vg-werkwijze-detail { padding-block: clamp(3rem, 6vw, 5rem); }
.bb-werkwijze__steps--6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2rem);
}
@media (max-width: 768px) {
  .bb-werkwijze__steps--6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .bb-werkwijze__steps--6 { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HUISSTIJL — Stijlgids pagina
   ═══════════════════════════════════════════════════════════════════════════ */

.bb-huisstijl { padding-block: clamp(3rem, 8vw, 6rem); }

/* Secties */
.bb-hs-section {
  padding-block: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.bb-hs-section:last-child { border-bottom: none; }
.bb-hs-section__header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.bb-hs-section__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--bb-amber);
}
.bb-hs-section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--size-2xl);
  color: var(--bb-white);
}
.bb-hs-section__intro {
  font-size: var(--size-base);
  color: var(--bb-mist);
  line-height: 1.7;
  max-width: 680px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* Logo grid */
.bb-hs-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.bb-hs-logo-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.bb-hs-logo-card:hover { border-color: rgba(121, 64, 251, 0.3); }
.bb-hs-logo-card__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 4vw, 3.5rem);
  min-height: 160px;
}
.bb-hs-logo-card--dark .bb-hs-logo-card__preview {
  background: var(--bb-void);
}
.bb-hs-logo-card--light .bb-hs-logo-card__preview {
  background: #F5F3FF;
}
.bb-hs-logo-card__preview img {
  max-width: 200px;
  height: auto;
}
.bb-hs-logo-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background: var(--bb-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.bb-hs-logo-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--bb-mist);
}
.bb-hs-download {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-violet);
  text-decoration: none;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(121, 64, 251, 0.3);
  border-radius: 2px;
  transition: background 0.2s ease, color 0.2s ease;
}
.bb-hs-download:hover {
  background: var(--bb-violet);
  color: #fff;
}
@media (max-width: 640px) {
  .bb-hs-logo-grid { grid-template-columns: 1fr; }
}

/* Gebruiksregels */
.bb-hs-rules { margin-top: clamp(2rem, 4vw, 3rem); }
.bb-hs-rules__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-lg);
  color: var(--bb-white);
  margin-bottom: 1.25rem;
}
.bb-hs-rules__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.bb-hs-rule {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
.bb-hs-rule__icon {
  font-size: 14px;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
.bb-hs-rule--do .bb-hs-rule__icon { color: #16a34a; }
.bb-hs-rule--dont .bb-hs-rule__icon { color: #dc2626; }
.bb-hs-rule p {
  font-size: var(--size-sm);
  color: var(--bb-mist);
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 640px) {
  .bb-hs-rules__grid { grid-template-columns: 1fr; }
}

/* Kleuren */
.bb-hs-colors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.bb-hs-color {
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.bb-hs-color:hover { border-color: rgba(255, 255, 255, 0.15); }
.bb-hs-color__swatch {
  height: 100px;
  background: var(--swatch);
}
.bb-hs-color__swatch--bordered {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.bb-hs-color__info {
  padding: 0.75rem 1rem;
  background: var(--bb-deep);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.bb-hs-color__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-sm);
  color: var(--bb-white);
}
.bb-hs-color__hex {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--bb-mist);
}
.bb-hs-color__role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--bb-ink-muted);
  margin-top: 0.15rem;
}
@media (max-width: 768px) {
  .bb-hs-colors { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .bb-hs-colors { grid-template-columns: 1fr; }
}

/* Typografie */
.bb-hs-type-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.bb-hs-type {
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transition: border-color 0.3s ease;
}
.bb-hs-type:hover { border-color: rgba(121, 64, 251, 0.25); }
.bb-hs-type__sample {
  display: flex;
  align-items: baseline;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--bb-deep);
  color: var(--bb-white);
}
.bb-hs-type__specimen {
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.3;
}
.bb-hs-type__phrase {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.3;
}
.bb-hs-type__info {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.75rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.bb-hs-type__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-sm);
  color: var(--bb-white);
}
.bb-hs-type__use {
  font-size: var(--size-sm);
  color: var(--bb-mist);
}
.bb-hs-type__weights {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--bb-ink-muted);
  margin-left: auto;
}
@media (max-width: 640px) {
  .bb-hs-type__info { flex-direction: column; gap: 0.25rem; align-items: flex-start; }
  .bb-hs-type__weights { margin-left: 0; }
  .bb-hs-type__sample { flex-direction: column; gap: 0.75rem; }
}

/* Tone of voice */
.bb-hs-tone-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.bb-hs-tone {
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.3s ease;
}
.bb-hs-tone:hover { border-color: rgba(121, 64, 251, 0.25); }
.bb-hs-tone h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-lg);
  color: var(--bb-white);
  margin-bottom: 0.5rem;
}
.bb-hs-tone p {
  font-size: var(--size-sm);
  color: var(--bb-mist);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 640px) {
  .bb-hs-tone-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOEGANKELIJKHEID & TOUCH — globale focus-stijlen en mobiele verfijning
   ═══════════════════════════════════════════════════════════════════════════ */

/* Focus zichtbaar voor toetsenbordgebruikers, onzichtbaar bij muisklik */
.bb-btn:focus-visible,
.site-header__nav a:focus-visible,
.site-header__logo:focus-visible,
.site-header__crosslink:focus-visible,
.bb-mobile-nav a:focus-visible,
.bb-hamburger:focus-visible,
.footer__nav a:focus-visible,
.bb-propositie__cta:focus-visible,
.portfolio-card:focus-visible,
.bb-faq__question:focus-visible {
  outline: 2px solid var(--bb-violet, #7940FB);
  outline-offset: 3px;
  border-radius: 2px;
}
body.bb-vastgoed-page .bb-btn:focus-visible,
body.bb-vastgoed-page a:focus-visible {
  outline-color: #7940FB;
}

/* Formuliervelden: duidelijke focus-ring in plaats van enkel borderkleur */
.wpcf7-form input:focus-visible,
.wpcf7-form textarea:focus-visible,
.wpcf7-form select:focus-visible,
.bb-vg-form input:focus-visible,
.bb-vg-form select:focus-visible,
.bb-vg-form textarea:focus-visible {
  outline: 2px solid #7940FB;
  outline-offset: 1px;
}

/* Touch: geen dubbeltik-zoomvertraging op interactieve elementen */
a, button, input, select, textarea, .bb-btn {
  touch-action: manipulation;
}

/* Mobiel menu: scroll niet doorgeven aan de pagina erachter */
.bb-mobile-nav {
  overscroll-behavior: contain;
}

/* Ankernavigatie: secties niet onder de vaste header laten verdwijnen */
section[id], [id^="bb-"] {
  scroll-margin-top: 90px;
}