/* brightflow.css v20260729c — BrightFlow overrides on Assan/Bootstrap 5 template
   Bron: "rebuild brightflow.nl". Werk je met een kopie (Laravel, lokaal), vergelijk
   dan deze versie met de bron voordat je een verschil in opmaak als bug behandelt.
   Bij elke wijziging: hoog deze regel op EN de ?v= in de 74 HTML-bestanden. */

/* ===== Bootstrap variable overrides ===== */
:root {
  --bs-primary: #00a1c6;
  --bs-primary-rgb: 0, 161, 198;
  --bs-secondary: #1d2b37;
  --bs-secondary-rgb: 29, 43, 55;
  --bs-warning: #ffb600;
  --bs-warning-rgb: 255, 182, 0;
  --bf-success: #00c688;
  --bf-success-rgb: 0, 198, 136;
  --bf-danger: #c62500;
  --bf-danger-rgb: 198, 37, 0;
  /* Bootstrap-componenten (.alert-success, .is-invalid) blijven op merkkleur via alias */
  --bs-success: var(--bf-success);
  --bs-success-rgb: var(--bf-success-rgb);
  --bs-danger: var(--bf-danger);
  --bs-danger-rgb: var(--bf-danger-rgb);
  --bs-info: #00cbf9;
  --bs-info-rgb: 0, 203, 249;
  --bs-body-color: rgb(116, 132, 148);
  --bs-body-bg: #ffffff;
  --bs-body-font-family: var(--bf-font-body);
  --bs-font-sans-serif: Verdana, Geneva, sans-serif;
  --bs-body-font-size: 15px;
  --bs-body-font-weight: 300;
  --bs-body-line-height: 1.74;
  --bs-link-color: #00a1c6;
  --bs-link-hover-color: #008fb0;
  --bs-dark: #1d2b37;
  --bs-dark-rgb: 29, 43, 55;

  /* BrightFlow tokens */
  --bf-primary: #00a1c6;
  --bf-primary-hover: #008fb0;
  --bf-primary-active: #007a98;
  --bf-accent: #ffb600;
  --bf-accent-hover: #e6a400;
  --bf-accent-active: #cc9200;
  --bf-tooltip-bg: #00cbf9;
  --bf-line-light: #00cbf9;
  --bf-line-mid: #00b6df;
  --bf-dark: #1d2b37;
  --bf-text: #333333;
  --bf-muted: rgb(116, 132, 148);
  --bf-subtle: #7a7a7a;
  --bf-surface: #f9fbff;
  --bf-surface-2: #fafafa;
  --bf-border: #d9d9d9;
  --bf-border-2: #e9e9e9;
  --bf-border-input: #c3cdd8;
  --bf-radius-sm: 10px;
  --bf-radius-md: 14px;
  --bf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --bf-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.12);
  --bf-shadow-lg: 0 16px 50px rgba(0, 0, 0, 0.14);
  --bf-container-max: 1170px;
  --bf-transition: 180ms cubic-bezier(0.2, 0, 0, 1);
  --bf-topbar-height: 45px;
  --bf-navbar-height: 100px;
  /* Typografie */
  --bf-font-display: "Exo", Verdana, Arial, sans-serif;
  --bf-font-body: Verdana, Geneva, sans-serif;
  --bf-section-title-size: clamp(24px, 4vw, 26px);
  --bf-card-title-size: 24px;
}

/* ===== Sitebreed: voorkom horizontale overflow op alle viewports ===== */
/* scrollbar-gutter: stable reserveert altijd de verticale-scrollbalk-ruimte,
   zodat de gecentreerde layout niet horizontaal verspringt tussen pagina's
   die wel/niet scrollen (klassieke/permanente scrollbalken). */
html { overflow-x: hidden; scrollbar-gutter: stable; }

/* ===== Container override — match live site 1170px ===== */
.container {
  max-width: 1170px !important;
}

/* ===== Typography ===== */
body {
  font-family: var(--bf-font-body) !important;
  color: var(--bf-text) !important;
  background-color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.74 !important;
  letter-spacing: 0.05px !important;
  padding-top: calc(var(--bf-topbar-height) + var(--bf-navbar-height)); /* ruimte voor fixed topbar + fixed navbar */
}

/* Override Assan/Poppins globally */
.btn, .nav-link, .dropdown-item, .form-control, .form-select,
input, button, select, textarea, p, li, td, th, span, div, a, label {
  font-family: var(--bf-font-body);
}

/* Headings: Exo 900, UPPERCASE like current site */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bf-font-display);
  font-weight: 900;
  color: var(--bf-primary);
  text-transform: uppercase;
  letter-spacing: 0.1px;
}

h2, .h2 { font-size: 20px; line-height: 28px; letter-spacing: 0.1px; }
h3, .h3 { font-size: 18px; line-height: 25.2px; letter-spacing: 0.1px; }

/* ===== Links — site-wide ===== */
/* Alle hyperlinks: cyaan, hover oranje, niet bold.
   a strong / a b: font-weight:inherit neutraliseert <a><strong>-patronen
   zonder HTML te hoeven aanpassen. */
a { color: var(--bf-primary); transition: color var(--bf-transition); }
a:hover { color: var(--bf-accent); }
a strong, a b { font-weight: inherit; }

/* ===== Buttons ===== */
.btn-primary {
  --bs-btn-bg: var(--bf-primary);
  --bs-btn-border-color: var(--bf-primary);
  --bs-btn-hover-bg: var(--bf-primary-hover);
  --bs-btn-hover-border-color: var(--bf-primary-hover);
  --bs-btn-active-bg: var(--bf-primary-active);
  --bs-btn-active-border-color: var(--bf-primary-active);
  --bs-btn-focus-shadow-rgb: 0, 161, 198;
  color: #fff;
}

/* .btn-accent (oude losse variant) verwijderd: de kleine fill-knop is nu
   .bf-btn-accent.bf-btn-sm (modifier-conventie). */

.btn-outline-primary {
  --bs-btn-color: var(--bf-primary);
  --bs-btn-border-color: var(--bf-line-mid);
  --bs-btn-hover-bg: var(--bf-primary);
  --bs-btn-hover-border-color: var(--bf-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--bf-primary-active);
}

/* Assan template zet text-transform:capitalize op .btn — overschrijven */
.btn {
  text-transform: none;
}

.btn-outline-accent {
  color: var(--bf-accent);
  border: 1px solid var(--bf-accent);
  background: transparent;
  border-radius: 8px;
  font-family: var(--bf-font-display);
  font-weight: 400;
  font-size: 15px;
  line-height: 22px;
  padding: 12px 34px;
  display: inline-block;
  text-decoration: none;
}
.btn-outline-accent:hover {
  background: var(--bf-accent);
  color: #fff;
}

.bf-btn-accent {
  display: inline-block;
  background: var(--bf-accent);
  color: #fff;
  font-family: var(--bf-font-display);
  font-weight: 400;
  font-size: 15px;
  padding: 12px 30px;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  text-transform: none !important;
  transition: all var(--bf-transition);
}

.bf-btn-accent:hover {
  background: var(--bf-accent-hover);
  color: #fff;
}

/* Maat-modifier: de fill-knop (.bf-btn-accent) in compacte maat.
   Waarden gelijk aan de oude topbar-knop, zodat die pixel-identiek blijft. */
.bf-btn-sm {
  font-family: var(--bf-font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  padding: 4px 14px;
}

/* ===== "Lees meer" card link style ===== */
.bf-card-link {
  display: inline-block;
  color: #333;
  font-size: 15px;
  font-family: var(--bf-font-display);
  font-weight: 700;
  text-decoration: none;
  margin-top: 12px;
  padding: 10px 33px;
  border: 1px solid #333;
  border-radius: 8px;
  background: #fff;
  transition: all var(--bf-transition);
  text-transform: none;
}
.bf-card-link:hover {
  background: #333;
  border-color: #333;
  color: #fff;
}

/* ===== Voorbeeldproject row (1/5 - 3/5 - 1/5 kolommen, match live site) ===== */
.bf-voorbeeldproject-row {
  display: flex;
  align-items: center;
  margin-left: 0;
  margin-right: 0;
  padding: 16px 8px;
  border: 1px solid rgba(100, 120, 144, 0.22);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(31, 37, 44, 0.06);
  background: rgba(255, 255, 255, 0.72);
}
.bf-vb-col-img {
  flex: 0 0 18%;
  max-width: 18%;
  padding-right: 15px;
  padding-left: 15px;
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bf-vb-col-img img {
  width: 168px;
  max-width: 100%;
  height: 110px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.bf-vb-col-text {
  flex: 0 0 62%;
  max-width: 62%;
  padding-right: 15px;
  padding-left: 15px;
}
@media (max-width: 576px) {
  .bf-voorbeeldproject-row {
    flex-direction: column;
    padding: 20px 16px;
    text-align: left;
    gap: 16px;
  }
  .bf-vb-col-img,
  .bf-vb-col-text,
  .bf-vb-col-btn {
    flex: 0 0 100%;
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
    text-align: left;
  }
  .bf-vb-col-img img {
    width: 100px;
    height: 65px;
  }
}

/* ===== "Bekijk nu" voorbeeldproject link ===== */
.bf-bekijk-nu {
  display: inline-block;
  color: #333;
  font-size: 15px;
  font-weight: 700;
  padding: 10px 40px;
  border: 1px solid #333;
  border-radius: 8px;
  background: transparent;
  text-decoration: none;
  transition: all var(--bf-transition);
  text-transform: none;
}
.bf-bekijk-nu:hover {
  background: #333;
  color: #fff;
}

/* ===== Topbar ===== */
.bf-topbar {
  background: #ccf2fc;
  color: #333;
  padding: 8px 0;
  font-size: 14px;
  font-family: var(--bf-font-display);
  font-weight: 400;
  line-height: 1.2;
  text-align: right;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999999;
  overflow: hidden;
}

.bf-topbar span {
  color: #333;
}

/* Topbar-knop = standaard .bf-btn-accent.bf-btn-sm (fill in compacte maat).
   Alleen de positionering binnen de topbar blijft hier staan; uiterlijk en
   hover komen van de gedeelde knopstijl. */
.bf-topbar a.bf-btn-accent {
  margin-left: 16px;
  margin-right: 46px;
}

/* ===== Anchor offset voor de vaste header (topbar 45 + navbar 100 = 145, +5 lucht) =====
   Site-breed op alle ankerdoelen (niet alleen <section id>), zodat #contactformulier,
   FAQ-links e.d. ook netjes onder de navbar landen i.p.v. eronder weg te vallen. */
[id] {
  scroll-margin-top: 150px;
}
@media (max-width: 991.98px) {
  /* Mobiel: topbar verborgen, alleen navbar (100px) telt mee. */
  [id] {
    scroll-margin-top: 110px;
  }
}

/* ===== Navbar ===== */
.bf-navbar {
  background: #fff;
  position: fixed; /* was sticky: fixed wordt deterministisch geplaatst -> geen sprong bij load */
  left: 0;
  right: 0;
  top: var(--bf-topbar-height); /* onder de fixed topbar */
  z-index: 1040;
  padding: 0 !important;
  height: 100px !important;
  min-height: 100px !important;
  display: flex !important;
  align-items: center !important;
  transition: box-shadow 0.3s;
}

.bf-navbar .navbar {
  padding: 0 !important;
  height: 100px;
}

.bf-navbar-scrolled {
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Navbar overlay voor zachte fade op homepagina (div.bf-navbar-bg-overlay in <header>).
   Zit achter de nav-content (z-index 0 vs container z-index 1).
   Opacity-transitie werkt wél waar background-color-transitie vast liep. */
.bf-navbar-bg-overlay {
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
  pointer-events: none;
}
.bf-navbar-scrolled .bf-navbar-bg-overlay {
  opacity: 1;
}
.bf-navbar > .container,
.bf-navbar > nav {
  position: relative;
  z-index: 1;
}

.bf-navbar .navbar-brand {
  margin: 0 !important;
  padding: 0 !important;
  margin-right: 40px !important;
}
.bf-navbar .navbar-brand img {
  height: 59px !important;
  width: auto !important;
  display: block !important;
}

header.bf-navbar .navbar .navbar-nav .nav-item .nav-link {
  font-family: var(--bf-font-display) !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  text-transform: uppercase !important;
  color: var(--bf-text) !important;
  padding: 0 !important;
  letter-spacing: 0.25px !important;
  line-height: 100px !important;
  transition: color var(--bf-transition) !important;
}

header.bf-navbar .navbar .navbar-nav .nav-item {
  margin: 0 17px !important;
}

header.bf-navbar .navbar .navbar-nav .nav-item .nav-link:hover,
header.bf-navbar .navbar .navbar-nav .nav-item .nav-link.active {
  color: var(--bf-primary) !important;
}

.bf-navbar .dropdown-menu {
  border: 1px solid var(--bf-border-2);
  border-radius: 8px;
  box-shadow: var(--bf-shadow-md);
  padding: 8px 0;
}

.bf-navbar .dropdown-item {
  font-family: var(--bf-font-display) !important;
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
  padding: 8px 16px;
}

.bf-navbar .dropdown-item:hover {
  color: var(--bf-primary);
  background: rgba(0, 161, 198, 0.05);
}


/* Mobile nav toggle */
.bf-navbar .navbar-toggler {
  border: none;
  padding: 8px;
}
.bf-navbar .navbar-toggler:focus {
  box-shadow: none;
}
@media (max-width: 991.98px) {
  .bf-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23333333' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
}

/* ===== Hero ===== */
/* Revolution Slider on live site: wrapper 1170px wide, 406px tall, starts at y=154 */
.bf-hero {
  position: relative;
  padding: 0 0 30px;
  overflow: visible;
  background: #fff;
  min-height: 406px;
}

/* Background layer container — matches slider wrapper position */
.bf-hero-bg {
  position: absolute;
  top: -107px; /* overlaps navbar (107px tall) */
  left: 50%;
  transform: translateX(-50%);
  width: 1170px;
  max-width: 100%;
  height: 560px; /* 406px slider + overlap */
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* Individual layers — EXACT positions from Revolution Slider at 1440px */
.bf-layer {
  position: absolute;
}

/* circle-large — large circle right: rotates -11deg over 9s, loops */
.bf-layer-circle-large {
  width: 531px;
  height: 531px;
  left: 208px;
  top: -118px;
  opacity: 1;
  animation: bf-rotate-slight 9s ease-in-out infinite alternate;
}


/* circle-mid copy — pulsing circle
   Revolution Slider data: sX:.9→1.1, sY:.9→1.1, o:0.8→0
   sp:2000 (2s duration), sR:1940 (repeat every 1940ms after end)
   Total cycle: 2000ms pulse + 1940ms pause = 3940ms
   e:power3.out = aggressive ease-out (fast start, slow end) */
.bf-layer-circle-mid {
  width: 356px;
  height: 356px;
  left: 11px;
  top: 60px;
  opacity: 1;
  transform-origin: center center;
  animation: bf-pulse 2s ease-out infinite;
}

/* dashed — cogwheel/procescirkel rechts (met staafjes). Naar links gehaald (762 -> 702)
   zodat hij de grote cyaan cirkel links net overlapt -> alle cirkels verbonden. (juni 2026) */
.bf-layer-dashed {
  width: 410px;
  height: 410px;
  left: 702px;
  top: 30px;
  opacity: 1;
  animation: bf-rotate-dashed 9s linear infinite;
}

/* lines — connecting lines: rotates 40deg over 9s, loops */
.bf-layer-lines {
  /* Oranje dashed cirkel = verbindende laag. Overlapt BEIDE cyaan cirkels (koppelingen-cirkel
     links + cogwheel rechts) zodat de metafoor "gekoppelde, samenwerkende systemen" klopt.
     Het maatwerk-icoon (.bf-toptaak-maatwerk) zit op het kruispunt oranje x koppelingen-cirkel
     en is het "vaste" pivot-punt. Vanaf dat pivot is de cirkel ~36 graden naar BENEDEN gedraaid
     (left/top hieronder = de rotatie rond dat punt) zodat de onderkant tot net in de introtekst
     reikt -> minder "zwevende" compositie, spannender. (juni 2026)
     NB: pivot vastgezet op het maatwerk-icoon; alleen de cirkel-positie draait mee. */
  width: 315px;
  height: 315px;
  left: 576px; /* rotatie rond het maatwerk-pivot, ~36 graden naar beneden */
  top: 250px;
  opacity: 1;
  animation: bf-rotate-lines 9s ease-in-out infinite alternate;
}

/* Mobile-only hero illustration wrapper — verborgen op desktop.
   Toont op <768px de inline SVG die de complete hero-compositie als één
   schaalbaar geheel rendert (zie @media (max-width: 767.98px) verderop). */
.bf-hero-illustration-wrap { display: none; }

/* Hero heading.
   font-size/line-height ZONDER !important zodat de responsive overrides
   (1024px, 767.98px, en de per-band rules) hun werk kunnen doen.
   Eerder had dit !important wat alle smaller-screen rules sloopte. */
.bf-hero-heading {
  font-size: 36px;
  font-weight: 900;
  line-height: 42px;
  color: var(--bf-primary);
  max-width: 783px;
  margin-bottom: 0;
  padding-top: 87px; /* matches slider layer y=87 */
  position: relative;
  z-index: 2;
}

/* Hero-kop regelafbreking: alleen op desktop (>=1200, waar de overlay-hero actief is)
   forceren we de break na "doet" -> regel 1 "Zoek je software die echt doet",
   regel 2 "wat jouw bedrijf nodig heeft?". Onder 1200 (SVG-hero) wraps de kop natuurlijk,
   dus daar verbergen we de <br>. (juni 2026) */
.bf-hero-heading .bf-h1-break { display: none; }
@media (min-width: 1200px) {
  .bf-hero-heading .bf-h1-break { display: inline; }
}

/* Toptaak icons container — matches slider wrapper */
.bf-hero-icons {
  position: absolute;
  top: -107px; /* same offset as bg */
  left: 50%;
  transform: translateX(-50%);
  width: 1170px;
  max-width: 100%;
  height: 560px;
  z-index: 3;
  pointer-events: none;
}

/* Individual toptaak icon links */
.bf-toptaak {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  transition: transform 0.3s ease;
  border-radius: 50%;
}
.bf-toptaak:hover {
  transform: scale(1.15);
}
.bf-toptaak img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Koppelingen icon — EXACT pos (186, 286+107=393) relative to hero-icons */
.bf-toptaak-koppelingen {
  left: 292px; /* onder de O van "nodig", op de cyaan stippellijn-cirkel (circleLarge) */
  top: 339px;
  width: 38px;
  height: 38px;
}

/* Maatwerk icon — op het kruispunt oranje-cirkel x koppelingen-cirkel (verbinding).
   left/top mee-geschoven met de omhoog gebrachte oranje cirkel (juni 2026). */
.bf-toptaak-maatwerk {
  left: 558px;
  top: 372px;
  width: 38px;
  height: 38px;
}

/* WCAG 2.5.5: klikbaar gebied 44×44 voor de 2 kleine iconen.
   Padding 3px maakt border-box 44×44, negative margin -3px compenseert de
   border-box-verschuiving zodat het visuele icoon op de pixel-perfecte
   (186,393) en (468,428) blijft. Box-sizing content-box garandeert dat
   `width: 38px` content-area is, niet border-box. */
.bf-toptaak-koppelingen,
.bf-toptaak-maatwerk {
  box-sizing: content-box;
  padding: 3px;
  margin: -3px;
}

/* Optimalisatie icon (staafjes) — mee-geschoven met de cogwheel naar links (924 -> 864),
   blijft gecentreerd in de procescirkel. (juni 2026) */
.bf-toptaak-optimalisatie {
  left: 864px;
  top: 186px;
  width: 89px;
  height: 91px;
}

/* Hero animations — exact match from Revolution Slider data */
/* circle-large: rZ from 0 to -11deg in 9s, alternating */
@keyframes bf-rotate-slight {
  from { transform: rotate(0deg); }
  to { transform: rotate(-11deg); }
}
/* Pulse: subtle expansion with fade - matches original site */
@keyframes bf-pulse {
  0% { transform: scale(0.9); opacity: 0.75; }
  100% { transform: scale(1.15); opacity: 0; }
}
/* dashed (dashed): rZ from 0 to 119deg in 9s, continuous */
@keyframes bf-rotate-dashed {
  from { transform: rotate(0deg); }
  to { transform: rotate(119deg); }
}
/* lines (lines): rZ from 0 to 40deg in 9s, alternating */
@keyframes bf-rotate-lines {
  from { transform: rotate(0deg); }
  to { transform: rotate(40deg); }
}

/* Hero intro text */
.bf-hero-intro {
  font-size: 15px;
  color: var(--bf-text);
  line-height: 1.74;
  max-width: none; /* geen breedte-cap: zin past op 1 regel binnen 1170px container */
  text-transform: none;
  position: relative;
  z-index: 2;
  /* BASE = SVG-/flow-hero (<1200): illustratie staat IN de flow boven de intro, dus alleen een
     kleine natuurlijke marge. Eerder stond hier 270px (overlay-waarde) wat op tablet een gat
     van ~270px tussen illustratie en intro gaf. (juni 2026) */
  margin-top: 16px;
  margin-bottom: 0; /* gap naar diensten-sectie = 30px hero-padding + 30px diensten-padding = 60px normaal */
}
/* Desktop (>=1200, overlay-hero): de illustratie ligt ABSOLUUT bovenop (achter de kop), dus de
   intro heeft hier de grote marge nodig om eronder te vallen. Tegelijk omhoog gehaald (was 270)
   zodat de hero compacter wordt en de intro dichter bij de illustratie komt. (juni 2026) */
@media (min-width: 1200px) {
  .bf-hero-intro { margin-top: 225px; }
}

/* ===== Tooltip (qTip2-style: light blue bg, white text) ===== */
.bf-term {
  border-bottom: 2px dotted #888;
  cursor: help;
  position: relative;
  text-decoration: none;
  color: inherit;
}

/* JS-generated tooltip popup */
.bf-tooltip {
  position: absolute;
  z-index: 15001;
  background: var(--bf-tooltip-bg);
  color: #fff;
  padding: 5px 9px;
  border-radius: 5px;
  font-size: 14px;
  font-family: var(--bf-font-body);
  line-height: 1.5;
  max-width: 280px;
  white-space: normal;
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--bf-tooltip-bg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.bf-tooltip-visible {
  opacity: 1;
}

/* ===== Section Styles ===== */
.bf-section {
  padding: 30px 0;
}

.bf-section-compact-bottom {
  margin-bottom: -15px;
}

.bf-section h2 {
  font-size: var(--bf-section-title-size);
  line-height: 1.15;
  margin-bottom: 20px;
}

.bf-section p {
  margin-bottom: 25px;
}

.bf-section-title {
  font-size: var(--bf-section-title-size);
  line-height: 1.15;
  color: var(--bf-primary);
  margin-bottom: 20px;
}

.bf-cta-title { font-size: var(--bf-section-title-size); line-height: 1.15; color: var(--bf-text); }

/* #333 + 18px, gelijk aan .bf-service-card h3 / .project-card-title / .bf-news-card h4 /
   .ww-card h3 (cyaan-tempering afgerond juli 2026). Was cyaan 20px.
   LET OP bij hergebruik: 83 van de 88 voorkomens zijn <h2>-spec-koppen in de
   feature-modals van baseflow/portflow (lange kop+alinea-lijsten), niet kaarttitels.
   Daar deed de cyaan scanwerk; het is bewust ingeruild voor consistentie. Als een
   toekomstige sessie die lijsten weer wil laten scannen: geef ZE een eigen class
   (bv. .bf-spec-title) en zet die op cyaan - deze regel niet terugdraaien.
   Nog geen donkere-sectie-variant nodig: 0 van de 88 staat in .bf-section-dark
   (gemeten juli 2026). Komt er ooit één, dan is #333 op navy onleesbaar -> dan
   `.bf-section-dark .bf-feature-title { color: var(--bf-primary-light); }` toevoegen. */
.bf-feature-title { font-size: 18px; color: var(--bf-text); margin-bottom: 12px; }

/* Statement: een uitspraak binnen een sectie. Zwaarder dan lopende tekst,
   gedraagt zich niet als sectiekop (geen uppercase). Los van kaart-componenten. */
.bf-statement {
  font-family: var(--bf-font-display);
  font-weight: 900;
  font-size: 20px;
  line-height: 1.3;
  color: var(--bf-primary);
  text-transform: none;
  letter-spacing: 0.1px;
  margin-top: 34px;
  margin-bottom: 14px;
}
.bf-section-dark .bf-statement { color: var(--bf-primary-light); }

.bf-section-text {
  color: var(--bf-text);
  font-size: 15px;
  line-height: 1.74;
  text-transform: none;
  max-width: 100%;
  width: 100%;
  margin-bottom: 25px;
}

/* Diensten section - transparent so hero circle stays visible */
.bf-diensten-section {
  background: transparent;
}

/* ===== Service Cards ===== */
.bf-service-card {
  background: #fff;
  border: 1px solid #e8eef4;
  border-radius: 16px;
  padding: 28px 24px 24px;
  text-align: left;
  transition: border-color .3s, box-shadow .3s, transform .3s;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.bf-service-card .btn,
.bf-service-card .bf-card-link {
  margin-top: auto;
  align-self: flex-start;
}

/* Ensure the <a> wrapper stretches full height */
.bf-diensten-section .col-md-4 > a {
  display: flex;
  height: 100%;
}

.bf-service-card:hover {
  border-color: var(--bf-primary, #00b6df);
  box-shadow: 0 8px 28px rgba(0,63,95,.09);
  transform: translateY(-3px);
}

.bf-service-card .icon-wrap {
  width: 56px;
  height: 56px;
  margin: 0 0 20px;
}

.bf-service-card .icon-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bf-service-card h3 {
  /* 18px gelijk aan .project-card-title (keuze juli 2026); was
     var(--bf-card-title-size) = 24px. De dienstenkaart-koppen lijnen nu qua
     grootte uit met de projectkaart-titels op de homepage. */
  font-size: 18px;
  margin-bottom: 8px;
  /* #333333 (= --bf-text), niet cyaan (keuze juli 2026). Tempert de cyaan-
     opeenstapeling (sectiekop + kaartkoppen + "Lees over"-links waren alle cyaan)
     en lijnt de dienstenkaart-koppen uit met de projectkaart-titels (ook
     --bf-text). De "Lees over"-link blijft cyaan als actie-kleur. Draait de
     juni-2026-keuze (card-koppen cyaan) voor .bf-service-card bewust terug.
     .bf-feature-title is juli 2026 ook meegegaan (zie die regel hierboven). */
  color: var(--bf-text);
}

.bf-service-card p {
  font-size: 15px;
  color: var(--bf-text);
  line-height: 1.7;
  text-transform: none;
}

/* Service cards with left-aligned text */
.bf-service-card-left {
  text-align: left;
}

/* ===== Diensten-sectie: sticky intro + gestapelde toptaken (#standaard-niet-genoeg) =====
   <992px: één kolom, intro boven, kaarten eronder gestapeld, geen sticky.
   >=992px: twee kolommen (smalle intro links, brede stack rechts); intro plakt
   vast tijdens scrollen, kaarten schuiven er langs omhoog. */
.bf-diensten-stack {
  display: grid;
  gap: 14px;
}
.bf-diensten-stack > a {
  display: flex; /* laat .bf-service-card (height:100%) de gridcel vullen */
}
/* Klein toptaak-icoon (38px = hero-formaat van maatwerk/koppelingen) bovenin de
   kaart, op alle breedtes. Optimalisatie krijgt dezelfde 38px (hero was 89px). */
.bf-diensten-stack .bf-service-card .icon-wrap {
  width: 38px;
  height: 38px;
  margin-bottom: 16px;
}
.bf-diensten-intro {
  margin-bottom: 24px;
}
/* Eerste dienstkaart (Maatwerk) transparant zodat de hero-cirkel erachter
   zichtbaar blijft. Alleen homepage (scope: .bf-diensten-stack). */
.bf-diensten-stack > a:first-child .bf-service-card {
  background: transparent;
}

@media (min-width: 992px) {
  .bf-diensten-layout {
    display: grid;
    grid-template-columns: 420px 1fr; /* intro (420px) + kaarten vullen tot de containerrand
       (= site-anker padding-right:60px, lijnt uit op de N van PRODUCTEN in de navbar) */
    justify-content: start; /* links verankeren; kaarten lopen door tot de rechter containerrand */
    gap: 48px;
    align-items: start; /* zonder dit rekt de intro-kolom mee en kan sticky niet vastplakken */
  }
  .bf-diensten-intro {
    position: sticky;
    top: 170px; /* topbar 45px + navbar 100px + ~24px ademruimte; runtime gemeten */
    margin-bottom: 0;
  }
  .bf-diensten-stack {
    gap: 14px;
  }
  /* Dienstkaarten in de stack: content-gedreven (kleiner kader), klein icoon
     bovenin (zie basis-regel), daaronder de bodytekst. Ruimere padding op desktop. */
  .bf-diensten-stack .bf-service-card {
    padding: 24px 36px 36px;
  }
}

/* ===== Magnetische CTA's: soepele terugveer van de transform =====
   .bf-btn-accent heeft al `transition: all` (dekt transform); .btn-outline-accent
   van zichzelf niet, dus alleen daar een transform-transitie toevoegen. */
.btn-outline-accent.magnetic {
  transition: transform var(--bf-transition);
}
.magnetic {
  will-change: transform;
}

/* ===== Product Cards ===== */
.bf-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
@media (max-width: 991px) {
  .bf-product-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .bf-product-grid { grid-template-columns: 1fr; }
}

.bf-product-card {
  background: #fff;
  border: 1px solid #e8eef4;
  border-radius: 16px;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
  transition: border-color .3s, box-shadow .3s, transform .3s;
  animation: bfReveal .6s ease both;
}
.bf-product-card:hover {
  border-color: var(--bf-primary, #00b6df);
  box-shadow: 0 8px 28px rgba(0,63,95,.09);
  transform: translateY(-3px);
}
.bf-product-card:nth-child(1) { animation-delay: .05s; }
.bf-product-card:nth-child(2) { animation-delay: .15s; }
.bf-product-card:nth-child(3) { animation-delay: .25s; }
.bf-product-card:nth-child(4) { animation-delay: .35s; }
.bf-product-card:nth-child(5) { animation-delay: .45s; }
.bf-product-card:nth-child(6) { animation-delay: .55s; }

.bf-product-card-logo {
  height: 50px;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.bf-product-card-logo svg,
.bf-product-card-logo img {
  max-height: 36px;
  width: auto;
  max-width: 200px;
}
.bf-product-card-tagline {
  font-family: var(--bf-font-display);
  font-weight: 700;
  color: var(--bf-primary, #00b6df);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 8px;
}
.bf-product-card-body {
  color: #4a5a6a;
  font-size: 14px;
  line-height: 1.55;
  flex-grow: 1;
  margin-bottom: 20px;
}
/* Product- en dienstenkaart sluiten af met dezelfde omrande knop als de
   nieuws- en projectkaart (juli 2026). Beide waren een cyaan tekstlink met
   pijl, en dat waren twee extra behandelingen voor precies dezelfde handeling:
   ook deze kaarten zijn helemaal klikbaar (de productkaart via
   .bf-product-card-link::before in producten.html, de dienstenkaart doordat
   de hele kaart in een <a> zit). De pijl-nudge op hover vervalt daarmee
   bewust; de andere kaart-CTA's hebben die ook niet. */
.bf-product-card-link,
.bf-diensten-stack .bf-card-readmore {
  font-family: var(--bf-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--bf-text);
  text-decoration: none;
  display: inline-block;
  align-self: flex-start;
  padding: 8px 16px;
  border: 1px solid var(--bf-text);
  border-radius: 8px;
  background: #fff;
  transition: all var(--bf-transition);
}
.bf-product-card-link:hover,
.bf-diensten-stack .bf-card-readmore:hover {
  background: var(--bf-text);
  color: #fff;
}
.bf-diensten-stack .bf-card-readmore { margin-top: 14px; }

.bf-product-connectors {
  border-top: 1px dashed #cfd8e3;
  margin-top: 16px;
  padding-top: 14px;
}
.bf-product-connectors-label {
  font-family: var(--bf-font-display);
  font-weight: 700;
  color: #8899aa;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 8px;
}
.bf-product-connector {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background .2s;
}
.bf-product-connector:hover { background: #f2f7fb; }
.bf-product-connector img { height: 26px; width: auto; }
.bf-product-connector-name {
  color: #222e3a;
  font-weight: 600;
  font-size: 13px;
}

/* Reveal animatie voor product cards */
@keyframes bfReveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== QuickScan Section ===== */
.bf-quickscan {
  position: relative;
  background: var(--bf-dark, #1d2b37);
  color: #fff;
  padding: 64px 0;
  overflow: hidden;
}
/* Patroon op een APARTE laag, links verankerd (KRITIEK: 'left center', NIET 'center'):
   de linkerrand zit vast op x=0, alleen de rechterkant crop't weg op smalle schermen,
   zodat het patroon niet "wegschiet" bij het van rechts versmallen (juni 2026). */
.bf-quickscan::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../img/bg-quickscan.png');
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}
/* Content boven het patroon-laagje houden. */
.bf-quickscan > .container {
  position: relative;
  z-index: 1;
}
.bf-quickscan h2 { color: #fff; font-size: var(--bf-section-title-size); line-height: 1.15; letter-spacing: 0.1px; margin-bottom: 20px; }
.bf-quickscan h3 { color: #fff; }
.bf-quickscan p { color: rgba(255, 255, 255, 0.85); text-transform: none; font-size: 15px; line-height: 26.1px; margin-bottom: 25px; }

.bf-quickscan-interest {
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* QuickScan-banner eyebrow: label boven de h2 */
.bf-quickscan .bf-quickscan-interest {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bf-accent, #ffb600);
  margin-top: 0;
  margin-bottom: 12px;
}

/* QuickScan-banner: subline onder de CTA-knop */
.bf-quickscan .bf-qs-subline {
  font-family: var(--bf-font-body);
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6) !important;
  line-height: 22.62px;
  text-transform: none !important;
  text-align: left !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
}

/* QuickScan-banner: rechterkolom met deliverables */
.bf-qs-delivers-col {
  display: flex;
  align-items: flex-start;
}
.bf-qs-delivers {
  padding-left: 40px;
  width: 100%;
  /* 40px = hoogte eyebrow-regel links, zo start "Wat je krijgt" op gelijke hoogte met de kop */
  padding-top: 40px;
}
.bf-quickscan .bf-qs-delivers-label {
  font-family: var(--bf-font-display);
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
}
.bf-qs-delivers-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.bf-qs-delivers-list li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  color: rgba(255,255,255,0.88);
  line-height: 22px;
  text-transform: none;
}
.bf-qs-delivers-list li::before {
  content: '';
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2300cbf9' fill-rule='evenodd' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* QuickScan-CTA visueel gelijkgesteld aan de contactformulier-knop (.bf-btn-submit):
   zelfde font (Exo 700), padding (40px) en hoekradius (4px). Vaste breedte 195.4px zodat
   de knop niet breder is dan "Stuur bericht". Gescopet op .bf-quickscan. (juni 2026) */
.bf-quickscan .bf-btn-accent {
  display: inline-block;
  width: 188.5px;
  white-space: nowrap;
  font-weight: 400;
  padding: 12px 34px;
  border-radius: 8px;
}

/* Reveal-animatie: will-change opruimen NA het onthullen. bf-reveal.css zet
   will-change: opacity, transform op elke .bf-reveal-sectie en laat dat staan,
   ook als de animatie al klaar is. Die permanente GPU-/compositing-laag laat
   grote secties (o.a. de QuickScan-banner) tijdens venster-resize horizontaal
   "wegschieten". Zodra onthuld (.bf-reveal-in) is de hint niet meer nodig ->
   op auto zetten zodat de laag verdwijnt. Hogere specificity (0,3,1) dan de
   basisregel in bf-reveal.css (0,2,1), dus dit wint. (juni 2026) */
html.bf-reveal-ready .bf-reveal.bf-reveal-in {
  will-change: auto;
}

@media (max-width: 991px) {
  /* Compacter op mobile: minder padding zodat de hoogte-sprong op het breakpoint minimaal is */
  .bf-quickscan { padding: 36px 0; }
  /* QuickScan-CTA: altijd auto-breedte (normale knop), ook op mobiel/tablet -- bewust
     geen full-width meer (keuze juni 2026). De subline blijft daardoor links uitgelijnd. */
  .bf-qs-delivers-col { margin-top: 28px; }
  .bf-qs-delivers { padding-left: 0; border-left: none; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 24px; }
}

/* ===== Project Cards (gedeelde stijl: projecten.html + index.html) ===== */
.project-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
}
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,.12);
  color: inherit;
  text-decoration: none;
}
.project-card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 298 / 166;
  background: #fff;
  padding: 14px 22px;
}
.project-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform .35s ease;
}
.project-card:hover .project-card-img img {
  transform: scale(1.04);
}
/* Projectkaart met een live animatie i.p.v. een still. Zelfde behandeling als
   .bf-news-card: pointer-events uit, anders vangt de iframe de klik op de kaart-link. */
.project-card-img .bf-card-anim {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
  pointer-events: none;
  transition: transform .35s ease;
}
.project-card:hover .project-card-img .bf-card-anim {
  transform: scale(1.04);
}
.project-card-body {
  padding: 20px 24px 24px;
  /* Terms (categorie-eyebrow) BOVEN de titel, net als de andere kaarten.
     Via flex-order zodat het klopt ongeacht de HTML-volgorde die de generator
     zet (geldt voor projecten.html én de homepage-projectsSwiper). */
  display: flex;
  flex-direction: column;
}
.project-card-title {
  order: 2;
  font-family: var(--bf-font-display);
  font-weight: 900;
  font-size: 18px;
  line-height: 1.4;
  margin: 0 0 8px;
  color: var(--bf-text);
}
.project-card-terms {
  order: 1;
  font-family: var(--bf-font-display);
  font-size: 12px;
  color: var(--bf-accent);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 8px;
}
.project-card-desc {
  padding: 14px 24px 20px;
  margin: 0;
  font-size: .92rem;
  line-height: 1.45;
  color: #555;
}

/* Voorbeeldprojecten-slider: alle kaarten even hoog (gelijk aan de hoogste).
   Zonder dit zet Swiper een vaste slide-hoogte en steekt een langere kaart
   (bijv. WhatsApp) eruit. Zelfde aanpak als de newsSwiper hieronder. */
.projectsSwiper .swiper-wrapper { align-items: stretch; }
.projectsSwiper .swiper-slide { height: auto; }
.projectsSwiper .swiper-slide .project-card { height: 100%; }


/* ===== News Slider ===== */
.bf-news-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e8eef4;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color var(--bf-transition);
  position: relative;
  text-decoration: none;
  color: inherit;
}
.bf-news-card:focus,
.bf-news-card:active,
.bf-news-card:visited {
  color: inherit;
  text-decoration: none;
}

.bf-news-card .card-img-wrap {
  height: 170px;
  overflow: hidden;
  background-color: #f9fbff;
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* thumb links uitlijnen i.p.v. centreren -> zwemt minder */
  padding: 8px 28px;             /* links 28px = zelfde kantlijn als card-body (eyebrow/titel/tekst); 8px verticaal -> thumb ~12% groter */
}

.bf-news-card .card-img-wrap img {
  width: auto;                   /* auto-breedte, zodat de thumb echt links kan uitlijnen */
  height: auto;                  /* auto-hoogte -> element == zichtbare afbeelding (geen letterbox), zodat border-radius de foto zelf afrondt */
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;            /* zelfde radius (8px) als de blog-detail-visual (.bf-blog-hero-img) */
}

/* Blog-detail hero-afbeelding (2-koloms tekst+beeld): op kolombreedte i.p.v. het HTML width-attribuut.
   Globaal gezet zodat nieuwe blog-pagina's dit niet per ongeluk missen (voorheen alleen inline per pagina). */
.bf-blog-hero-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Live animatie als kaart-thumb (kaart met 'animation'-veld in blog.json) i.p.v. een
   still. Vult de wrap-hoogte; aspect-ratio komt inline. pointer-events:none -> klik
   gaat door naar de kaart-link (hele kaart blijft klikbaar). Transparant zodat de
   #f9fbff-wrap doorschijnt. */
.bf-news-card .card-img-wrap .bf-card-anim {
  height: 100%;
  width: auto;
  max-width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  pointer-events: none;
}

.bf-news-card .card-body {
  padding: 16px 28px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.bf-news-card .card-body .bf-card-link {
  margin-top: auto;
  align-self: flex-start;
  font-size: 15px;
  font-weight: 700;
  color: var(--bf-text);
  border: 1px solid var(--bf-text);
  background: #fff;
  padding: 8px 16px;
  text-decoration: none;
  display: inline-block;
  transition: all var(--bf-transition);
}

.bf-news-card .card-body .bf-card-link:hover {
  background: var(--bf-text);
  color: #fff;
}

/* Eyebrow op de gewone archief-kaart: eerste tag in hoofdletters met streepje
   ervoor. Zelfde opmaak (kleine kap, letter-spacing, weight 700) als de
   UITGELICHT-kaart, maar in cyaan (--bf-primary, ook de linkkleur) i.p.v. het
   oranje dat gereserveerd blijft voor de UITGELICHT-stijl. Geen kleur-per-tag:
   de filterchips kennen die conventie niet, dus overal cyaan. */
.bf-news-card .card-body .bf-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--bf-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bf-accent, #ffb600);
  margin: 0 0 4px;
}
/* Titel sluit direct onder de eyebrow aan (neutraliseer de top-padding die de
   h4 anders bovenaan de card-body zou geven). */
.bf-news-card .card-body .bf-card-eyebrow + h4 {
  padding-top: 0;
}

.bf-news-card h4 {
  font-size: 18px;
  font-family: var(--bf-font-display);
  font-weight: 900;
  color: var(--bf-text);
  margin: 0;
  padding: 20px 0 12px;
  line-height: 1.4;
  text-transform: uppercase;
}

.bf-news-card p {
  font-size: 15px;
  font-family: var(--bf-font-body);
  font-weight: 300;
  color: var(--bf-text);
  line-height: 24px;
  text-transform: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Swiper slides equal height */
.newsSwiper .swiper-wrapper {
  align-items: stretch;
}

.newsSwiper .swiper-slide {
  height: auto;
}

.newsSwiper .swiper-slide .bf-news-card {
  height: 100%;
}

/* Cyaan kader bij hover, gelijk aan service- en projectkaarten */
.bf-news-card:hover {
  border-color: var(--bf-primary);
  cursor: pointer;
}

/* Kop-blok (eyebrow + titel) BOVEN het beeld: volgorde eyebrow -> titel -> visual ->
   tekst -> cta, gelijk aan .project-card. Geldt zowel op de blogpagina (#bf-blog-cards)
   als op de homepage-artikelenslider (.newsSwiper) - die is juli 2026 op verzoek van
   beeld-boven naar titel-boven omgezet (kaarten herstructureerd naar head/img/body).
   Het kop-blok heeft class "card-body card-body--head" zodat de eyebrow-styling blijft gelden. */
#bf-blog-cards .bf-news-card .card-body--head,
.newsSwiper .bf-news-card .card-body--head {
  flex: 0 0 auto;
  padding: 20px 28px 10px;
  /* Eyebrow altijd BOVEN de titel forceren via flex-order, ongeacht de HTML-volgorde
     die build-blog-cards.py produceert (die zet titel-eerst). Zo overleeft de
     eyebrow-boven-titel-keuze elke regeneratie, zonder de generator-template aan te raken.
     Gelijkgetrokken met projecten.html en producten.html. */
  display: flex;
  flex-direction: column;
}
#bf-blog-cards .bf-news-card .card-body--head .bf-card-eyebrow,
.newsSwiper .bf-news-card .card-body--head .bf-card-eyebrow { order: 1; }
#bf-blog-cards .bf-news-card .card-body--head h4,
.newsSwiper .bf-news-card .card-body--head h4 {
  order: 2;
  padding: 0;
  margin: 0 0 6px;
  /* Titel altijd exact 2 regels hoog: reserveer 2 regels + cap op 2.
     Zo lijnen thumbnails/teasers/CTA's uit, ongeacht de titellengte.
     Vangnet - gegenereerde titels horen al binnen 2 regels te passen
     (zie scripts/check-title-lines.py). */
  min-height: 2.8em;            /* 2 regels bij line-height 1.4 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#bf-blog-cards .bf-news-card .card-body--head .bf-card-eyebrow,
.newsSwiper .bf-news-card .card-body--head .bf-card-eyebrow {
  margin: 0 0 4px;
}

/* Gerelateerde-artikelen-module (in-artikel, #bf-related-articles): identieke kaartkop
   als het blogoverzicht (eyebrow boven titel, titel exact 2 regels). Zelfde regels als
   #bf-blog-cards/.newsSwiper hierboven, apart gescopet omdat de module buiten die
   containers in de artikelpagina's staat. */
#bf-related-articles .bf-news-card .card-body--head {
  flex: 0 0 auto;
  padding: 20px 28px 10px;
  display: flex;
  flex-direction: column;
}
#bf-related-articles .bf-news-card .card-body--head .bf-card-eyebrow { order: 1; margin: 0 0 4px; }
#bf-related-articles .bf-news-card .card-body--head h4 {
  order: 2;
  padding: 0;
  margin: 0 0 6px;
  min-height: 2.8em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* News slider: position relative wrapper for absolute nav arrows */
.newsSwiper {
  position: relative;
}

/* News-carrousel: navigatieknoppen aan weerszijden, verbonden door een cyaan hairline.
   Rust: cyaan rand plus chevron. Hover: gevuld cyaan met witte chevron. */
.news-slider-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 0 0 100%;
  width: 100%;
  position: relative;
}

.news-slider-nav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--bf-primary);
  z-index: 0;
}

.news-slider-nav button {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--bf-primary);
  background: #fff;
  color: var(--bf-primary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--bf-transition), border-color var(--bf-transition), color var(--bf-transition);
}

.news-slider-nav button:hover,
.news-slider-nav button:focus-visible {
  background: var(--bf-primary);
  border-color: var(--bf-primary);
  color: #fff;
  outline: none;
}

/* ===== FAQ Accordion ===== */
.bf-faq {
  background: var(--bf-surface);
}

.bf-faq .accordion-item {
  border: 1px solid var(--bf-border-2);
  border-radius: var(--bf-radius-sm) !important;
  margin-bottom: 12px;
  overflow: hidden;
}

.bf-faq .accordion-button {
  font-family: var(--bf-font-body);
  font-weight: 400;
  font-size: 15px;
  color: var(--bf-dark);
  background: #fff;
  box-shadow: none;
  padding: 16px 20px;
  gap: 16px;
  text-transform: none;
}

.bf-faq .accordion-button:not(.collapsed) {
  background: rgba(0, 161, 198, 0.05);
  color: var(--bf-primary);
}

/* Cyan accent: hover op een dichte vraag */
.bf-faq .accordion-button:hover {
  color: var(--bf-primary);
}

/* Cyan accent: rand van het geopende item (:has wordt breed ondersteund) */
.bf-faq .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: var(--bf-primary);
}

.bf-faq .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300a1c6'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.bf-faq .accordion-body {
  font-size: 14px;
  color: var(--bf-text);
  padding: 0 20px 20px;
  text-transform: none;
}

.bf-faq .accordion-body ul {
  padding-left: 20px;
  margin: 8px 0;
}

.bf-faq .accordion-body li {
  margin-bottom: 4px;
  font-size: 14px;
}

/* ===== FAQ categoriekoppen (zichtbaar in ongefilterde weergave) ===== */
.bf-faq #faqAccordion > .bf-faq-cat {
  font-family: var(--bf-font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  color: #333333;
  text-transform: none;
  letter-spacing: normal;
  margin: 1.5rem 0 0.6rem;
}
.bf-faq #faqAccordion > .bf-faq-cat:first-child {
  margin-top: 0;
}

/* ===== Afsluitend CTA-kaartje (sitebreed: faq, koppelingen, baseflow, portflow) ===== */
.bf-faq-cta {
  max-width: 730px;
  margin: 32px 0 0;
  background: #fff;
  border: 1px solid var(--bf-border-2);
  border-left: 4px solid var(--bf-accent);
  border-radius: var(--bf-radius-sm);
  padding: 28px 28px 30px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 36px;
}
.bf-faq-cta-title,
.bf-faq-cta-text { grid-column: 1; }
.bf-faq-cta > .bf-faq-cta-text { margin-bottom: 0; }
.bf-faq-cta > a {
  grid-column: 2;
  grid-row: 1 / span 2;
  white-space: nowrap;
  margin: 0;
  background: transparent;
  color: var(--bf-accent);
  border: 2px solid var(--bf-accent);
}
.bf-faq-cta > a:hover {
  background: var(--bf-accent);
  color: #fff;
}
@media (max-width: 767.98px) {
  .bf-faq-cta {
    grid-template-columns: 1fr;
  }
  .bf-faq-cta > a {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: 18px;
    white-space: normal;
  }
}
.bf-faq-cta-title {
  font-family: var(--bf-font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--bf-text);
  text-transform: none;
  margin: 0 0 8px;
}
/* Zonder knop (bv. het adviesblok op project-pmr-cashkoppeling) is de tekst het laatste
   kind; de 18px ondermarge geeft dan een dood gat onderin. Alle andere toepassingen
   eindigen met een knop en blijven ongemoeid. (juli 2026) */
.bf-faq-cta > :last-child { margin-bottom: 0; }
.bf-faq-cta-text {
  font-size: 15px;
  color: var(--bf-text);
  text-transform: none;
  margin: 0 0 18px;
}
/* Modifier: paginabrede variant, gebruikt bij blog-optimalisatie-operationele-processen, blog-belang-klantreis, baseflow, portflow */
.bf-faq-cta-wide {
  max-width: none;
}

/* ===== Benieuwd / CTA Section ===== */
.bf-cta-section {
  background: transparent;
  padding: 30px 0;
}

.bf-cta-section h2 { color: var(--bf-text); }
.bf-cta-section p { text-transform: none; }
.bf-cta-section .row { --bs-gutter-x: 1.5rem; }
/* Cirkel-kolom altijd auto-breed, ongeacht Bootstrap col-klasse in HTML */
.bf-cta-section .row > div:first-child { flex: 0 0 auto; width: auto; max-width: none; text-align: left; }

.bf-cta-circle-wrap {
  position: relative;
  width: 109px;
  aspect-ratio: 1 / 1;
  margin: 0;
}
.bf-cta-circle-ring {
  width: 100%;
  height: 100%;
  animation: ctaSpin 9s ease-in-out infinite;
}
.bf-cta-circle-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 40%;
  object-fit: contain;
}
/* Scale-to-point transition: 3 icons, 9s total (3s per icon) */
.bf-cta-icon-1 { animation: ctaScale1 9s ease infinite; }
.bf-cta-icon-2 { animation: ctaScale2 9s ease infinite; }
.bf-cta-icon-3 { animation: ctaScale3 9s ease infinite; }

/* Circle rotates 120deg per icon switch */
@keyframes ctaSpin {
  0%, 30%   { transform: rotate(0deg); }
  33%, 63%  { transform: rotate(120deg); }
  66%, 96%  { transform: rotate(240deg); }
  100%      { transform: rotate(360deg); }
}
/* Icon 1: scale in, hold, scale to 0 */
@keyframes ctaScale1 {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  5%   { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  28%  { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  33%  { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}
/* Icon 2: wait, scale in, hold, scale to 0 */
@keyframes ctaScale2 {
  0%, 30%  { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  38%  { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  61%  { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  66%  { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}
/* Icon 3: wait, scale in, hold, scale to 0 */
@keyframes ctaScale3 {
  0%, 63%  { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  71%  { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  94%  { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}

/* ===== Contact Form ===== */
.bf-contact-section {
  background: var(--bf-dark);
  color: #fff;
}

.bf-contact-section .bf-section-title { color: var(--bf-primary); font-size: var(--bf-section-title-size); }

.bf-form-heading {
  font-family: var(--bf-font-body);
  font-size: 18px;
  font-weight: 700;
  color: #1d2b37 !important;
  margin-bottom: 12px;
  text-transform: none;
}

.bf-required { color: var(--bf-accent); }

.bf-btn-submit {
  background: var(--bf-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 40px;
  text-transform: none;
  font-family: var(--bf-font-display);
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  position: relative;
}
.bf-btn-submit:hover {
  background: var(--bf-accent-hover);
  color: #fff;
}

.bf-form-subtext {
  font-size: 13px;
  color: #6b7785;
  text-transform: none;
}

.bf-contact-form .form-control,
.bf-contact-form .form-select {
  border: 1px solid var(--bf-border-input);
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 15px;
  background: #ffffff;
  color: #1d2b37;
  height: 52px;
  transition: border-color var(--bf-transition), box-shadow var(--bf-transition);
}

.bf-contact-form .form-control::placeholder {
  color: #9aa7b5;
}

.bf-contact-form textarea.form-control {
  height: auto;
  resize: none;
}

.bf-contact-form .form-control:focus,
.bf-contact-form .form-select:focus {
  border-color: var(--bf-primary);
  box-shadow: 0 0 0 3px rgba(0, 161, 198, 0.15);
  background: #ffffff;
  color: #1d2b37;
}

.bf-contact-form .form-check-label {
  color: rgba(255,255,255,0.85);
  font-size: 14px;
}

.bf-contact-form .form-check-input {
  width: 15px;
  height: 15px;
  background-color: #f8f8f8;
  border: none;
  border-radius: 2.25px;
  margin-top: 5px;
  margin-right: 8px;
}

.bf-contact-form .form-check-input:checked {
  background-color: #f8f8f8;
  border-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%2300a1c6' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

.bf-contact-form .field-error {
  color: var(--bf-danger);
  font-size: 13px;
  margin-top: 4px;
  display: none;
}

.bf-contact-form .is-invalid + .field-error,
.bf-contact-form .is-invalid ~ .field-error {
  display: block;
}

/* ===== Interesse-chips (contactformulier) ===== */
.bf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.bf-chips:last-of-type { margin-bottom: 0; }
.bf-chip-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.bf-chip {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--bf-border-input);
  background: #ffffff;
  color: #1d2b37;
  cursor: pointer;
  user-select: none;
  text-transform: none;
  margin: 0;
  position: relative;
  transition: border-color var(--bf-transition), background var(--bf-transition), color var(--bf-transition), padding var(--bf-transition);
}
.bf-chip:hover { border-color: var(--bf-primary); }
.bf-chip-input:checked + .bf-chip {
  border-color: var(--bf-primary);
  padding-left: 40px;
}
.bf-chip-input:checked + .bf-chip::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffb600' fill-rule='evenodd' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.bf-chip-input:focus-visible + .bf-chip {
  box-shadow: 0 0 0 3px rgba(0, 161, 198, 0.25);
}

/* Contactpagina: grotere titel */
#contactformulier h2 {
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.15;
}

/* ===== Footer Ticker ===== */
.bf-ticker {
  background: #fff;
  color: #748494;
  overflow: hidden;
  padding: 0 24px;
  white-space: nowrap;
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
}

.bf-ticker-inner {
  display: inline-flex;
  animation: ticker-scroll 65s linear infinite;
}

.bf-ticker:hover .bf-ticker-inner {
  animation-play-state: paused;
}

.bf-ticker-item {
  padding: 0 32px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-transform: none;
}

.bf-ticker-item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bf-primary);
  flex-shrink: 0;
}

.bf-ticker-label {
  color: var(--bf-primary);
  font-weight: 700;
}

@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== Footer ===== */
.bf-footer {
  background: var(--bf-dark);
  color: #748494;
  padding: 48px 0 0;
}

.bf-footer h5 {
  color: var(--bf-primary);
  font-size: 16px;
  font-family: var(--bf-font-display);
  font-weight: 900;
  margin-bottom: 16px;
}

.bf-footer a {
  color: #748494;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  transition: color var(--bf-transition);
}

.bf-footer a:hover { color: #fff; }

.bf-footer ul { list-style: none; padding: 0; margin: 0; }
.bf-footer ul li { margin-bottom: 8px; font-size: 14px; }

.bf-footer .footer-brand img { width: 195px; height: auto; margin-bottom: 12px; }

.bf-footer .footer-tagline {
  color: var(--bf-line-light);
  font-size: 12px;
  margin: 0;
  padding: 0;
  font-family: var(--bf-font-body);
  font-weight: 300;
  line-height: 1.4;
}

.bf-subfooter {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 0;
  margin-top: 32px;
  font-size: 13px;
}

.bf-subfooter a { font-size: 13px; }

/* ===== Sticky Widget ===== */
/* ===== Sticky Widget ===== */
.bf-sticky-widget {
  position: fixed;
  right: 0;
  /* Rail-midden op 57% i.p.v. 50% (op verzoek lager gezet, juli 2026). De live
     site staat op 50%, maar heeft géén vaste header - daar scrolt de header weg,
     waardoor de rail luchtiger/lager oogt. Op de rebuild is de header vast, dus
     zetten wij de rail bewust wat lager zodat hij niet tegen de header aan lijkt
     te zitten. Bewuste afwijking van live. */
  top: 57%;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--bf-accent);
  border-right: none;
  border-radius: 10px 0 0 10px;
  padding: 0;
  background: transparent;
}

@keyframes bf-sticky-pulse {
  0% { transform: scale(1); }
  25% { transform: scale(0.92); }
  50% { transform: scale(1.15); }
  75% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.bf-sticky-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 53px;
  height: 53px;
  background: #fff;
  color: var(--bf-accent);
  text-decoration: none;
  transition: all var(--bf-transition);
  font-size: 20px;
  border: none;
}

.bf-sticky-icon:hover {
  color: var(--bf-accent) !important;
  background: #fff !important;
}

.bf-sticky-icon i,
.bf-sticky-icon img,
.bf-sticky-icon svg {
  animation: bf-sticky-pulse 3s ease-in-out infinite;
}

.bf-sticky-item { position: relative; }
.bf-sticky-item:first-child .bf-sticky-icon { border-radius: 10px 0 0 0; }
.bf-sticky-widget > :last-child .bf-sticky-icon { border-radius: 0 0 0 10px; }

/* Hover labels */
.bf-sticky-label {
  position: absolute;
  right: 53px;
  top: 50%;
  transform: translateY(-50%) translateX(10px);
  background: #fff;
  color: var(--bf-accent);
  font-family: var(--bf-font-display);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  padding: 8px 16px;
  border: 1px solid var(--bf-accent);
  border-right: none;
  border-radius: 8px 0 0 8px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
  text-decoration: none;
}

a.bf-sticky-label:hover {
  color: var(--bf-accent);
  text-decoration: none;
}

.bf-sticky-item:hover > .bf-sticky-label {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}

/* Slide-out panel */
.bf-sticky-panel {
  position: absolute;
  right: 54px;
  top: -1px;
  width: 320px;
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(20px);
  transition: all 0.3s ease;
  pointer-events: none;
}

.bf-sticky-item:hover > .bf-sticky-panel,
.bf-sticky-widget .bf-sticky-panel.active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
}

/* Sluitknop op het hover-paneel werkend maken: 'dismissed' verslaat de :hover-open hierboven. */
.bf-sticky-panel.bf-sticky-dismissed {
  display: none !important;
}

.bf-sticky-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.bf-sticky-panel-title {
  font-family: var(--bf-font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--bf-primary);
}

.bf-sticky-panel-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  /* Groter tikgebied (>=40px) zonder de header-layout te verschuiven: padding vergroot de
     hitzone, negatieve marge houdt de visuele x-positie gelijk. (juli 2026, tap-target-fix) */
  padding: 8px;
  margin: -8px;
  line-height: 1;
}

.bf-sticky-panel .form-control {
  margin-bottom: 16px;
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
}

.bf-sticky-panel .form-control:focus,
.bf-sticky-panel .form-control:focus-visible {
  border-color: #ddd !important;
  box-shadow: none !important;
  outline: none !important;
}

.bf-sticky-panel .form-control::placeholder {
  color: #999 !important;
  opacity: 1 !important;
}

.bf-sticky-panel .bf-btn-accent {
  background: var(--bf-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px;
  font-size: 16px;
  font-weight: 600;
}

/* ===== Back to Top ===== */
.bf-back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 50px;
  height: 50px;
  background: none;
  border: none;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s, transform 0.2s, filter 0.3s;
  z-index: 1050;
}
.bf-back-to-top img { width: 100%; height: 100%; object-fit: contain; }
.bf-back-to-top.on-dark {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 14px rgba(255, 255, 255, 0.4));
}

.bf-back-to-top.visible { opacity: 1; visibility: visible; }
.bf-back-to-top:hover { transform: scale(1.1); }


/* ===== Breadcrumb ===== */
.bf-breadcrumb { font-size: 13px; color: var(--bf-subtle); }
.bf-breadcrumb a { color: var(--bf-subtle); text-decoration: none; }
.bf-breadcrumb a:hover { color: var(--bf-primary); }


/* ===== Detail Page Header ===== */
.bf-detail-header {
  background: var(--bf-dark);
  background-image: url('../img/toptaken.svg');
  background-position: 50% -20px;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 56px 0 64px;
  color: #fff;
}

.bf-detail-header .bf-breadcrumb { color: #cacaca; margin-top: 30px; font-size: 15px; }
.bf-detail-header .bf-breadcrumb a { color: #fff; font-weight: 600; font-size: 15px; }
.bf-detail-header .bf-breadcrumb a:hover { color: #fff; }

.bf-detail-header h1 {
  font-size: 24px;
  color: #fff;
  margin: 0;
}

/* ===== Section Surface (alternate bg) ===== */
.bf-section-surface {
  background: #f9fbff !important;
}

/* ===== Section Dark (navy bg, white text) ===== */
.bf-section-dark {
  background: var(--bf-dark, #1d2b37);
  background-image: url('../img/bg-quickscan.png');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
}
.bf-section-dark h2 { color: #fff; }
.bf-section-dark p,
.bf-section-dark li { color: rgba(255,255,255,0.85); }
.bf-section-dark a { color: var(--bf-primary); }
.bf-section-dark .bf-check-list li::before { color: var(--bf-primary); }
.bf-section-dark .bf-numbered-list { color: rgba(255,255,255,0.85); }

/* Witte kaarten in donkere sectie: tekst blijft donker */
.bf-section-dark .bf-service-card { color: var(--bf-text); }
.bf-section-dark .bf-service-card h3 { color: var(--bf-text); }
.bf-section-dark .bf-service-card p { color: var(--bf-muted); }
.bf-section-dark .bf-service-card li { color: var(--bf-muted); }

/* ===== Numbered List (live site: ▪ cyan bullets, geen nummers) ===== */
.bf-numbered-list {
  list-style: none;
  padding-left: 0;
  margin-left: 18px;
}

.bf-numbered-list li {
  margin-bottom: 0;
  line-height: 26.1px;
  font-size: 15px;
}

.bf-numbered-list li::before {
  content: "▪";
  color: var(--bf-primary, #00a1c6);
  display: inline-block;
  width: 17px;
  margin-left: -17px;
  font-size: 17px;
  line-height: 29.58px;
}

/* ===== Bullet List ===== */
.bf-bullet-list {
  list-style: none;
  padding-left: 0;
  margin-top: 0;
}

.bf-bullet-list li {
  margin-bottom: 2px;
  line-height: 1.7;
  padding-left: 18px;
  position: relative;
}

.bf-bullet-list li:last-child {
  margin-bottom: 0;
}

.bf-bullet-list li::before {
  content: "▪";
  position: absolute;
  left: 0;
  color: var(--bf-primary);
  font-size: 12px;
  line-height: 1.9;
}

/* ===== Introzin + lijst: kleine, consistente tussenruimte ==========
   Patroon "<p>...:</p> direct gevolgd door <ul> of <ol>" krijgt op de
   hele site dezelfde compacte spacing. .bf-section p heeft normaal 25px
   margin-bottom (brightflow.css regel), waardoor de witregel te groot
   werd. Met :has() sturen we de paragraaf, met de adjacent-sibling
   combinator de lijst. Scope met .bf-section zodat de specificity
   (0,1,2) wint van .bf-section p (0,1,1).
   margin-bottom op 0 plus margin-top en padding-top op 0 op de lijst:
   de visuele tussenruimte komt nu volledig uit de natuurlijke line-
   height van de p en de eerste li (~10-11px text-to-text), geen extra
   margin daarbovenop. Tighter zonder negatieve marges.                */
.bf-section p:has(+ ul),
.bf-section p:has(+ ol) {
  margin-bottom: 0;
}
.bf-section p + ul,
.bf-section p + ol {
  margin-top: 0;
  padding-top: 0;
}

/* ===== Check List (Voordelen) ===== */
.bf-check-list {
  list-style: none;
  padding-left: 0;
}

.bf-check-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
  line-height: 1.7;
}

.bf-check-list li::before {
  content: '▪';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--bf-primary);
  font-size: 18px;
  font-weight: 700;
}

/* ===== Quote Image ===== */
.bf-quote-img {
  max-width: 570px;
  width: 100%;
  height: auto;
}

/* ===== Citaat als TEKST (juli 2026) - opvolger van .bf-quote-img =====
   Waarom: bij .bf-quote-img zit de belettering IN een PNG van 1722x306. Op een
   telefoon wordt die 4,8x verkleind tot ~13px, kleiner dan de bodytekst eromheen,
   en de regel kan niet afbreken. Als tekst breekt hij wel af, schaalt hij mee met
   de tekstinstelling van de gebruiker, is hij selecteerbaar en doorzoekbaar, telt
   hij mee voor SEO, en kost hij geen kilobyte.
   Font: Caveat 400 - gekozen 28 juli 2026 door de opdrachtgever uit een proef met
   tien handschriften naast elkaar (Kalam, Caveat, Architects Daughter, Gloria
   Hallelujah, Patrick Hand, Permanent Marker, Rock Salt, Shadows Into Light, Just
   Another Hand, Reenie Beanie). Verving Kalam, dat als een schuine smalle letter las
   in plaats van als handschrift.
   LET OP - onopgeloste tegenstrijdigheid: een eerdere proef (juli 2026, met dezelfde
   drie kandidaten) concludeerde "bewust GEEN kapitalen: een dun handschrift in
   hoofdletters verliest zijn leesbaarheid en zijn handgeschreven karakter". Die
   conclusie stond hier, maar de code eronder zet wel degelijk text-transform:
   uppercase, en CLAUDE.md documenteert die kapitalen als bewuste keuze. De kapitalen
   zijn dus na die proef teruggezet. Caveat is juist een dun handschrift, dus als het
   citaat er nog steeds niet handgeschreven uitziet, is de kapitalisering de eerste
   verdachte, niet het lettertype.
   Kader, radius (16px, gelijk aan de kaarten) en het aanhalingsteken zaten voorheen
   in het beeld en staan nu in CSS. Het vlak is wit, ook op een lichtblauwe sectie,
   net als de witte vulling van de oude PNG. */
/* Aanhalingsteken VOLLEDIG boven het kader, kader rondom dicht (keuze juli 2026).
   Eerdere pogingen: teken half over de bovenrand met een dekkend vlakje eronder
   (viel op een lichtblauwe sectie op als wit blokje, en de rand liep er zichtbaar
   achterlangs), en teken binnen het kader (deed als klein glyphje geen werk).
   Nu staat het met `bottom: 100%` er helemaal bovenop: geen overlap, dus geen
   onderbreking in de rand en geen vlakje in de achtergrondkleur nodig. Werkt
   daardoor op wit én op lichtblauw. De bovenmarge houdt ruimte vrij voor het teken.
   NIET terugzetten naar een teken dat over de rand valt. */
.bf-quote-tekst {
  position: relative;
  max-width: 760px;
  margin: 58px auto 0;
  padding: 26px 34px;
  background: #fff;
  border: 1px solid #cfe9f2;
  border-radius: 0;          /* vierkant, keuze juli 2026 */
  text-align: center;
}
/* De inkt van het aanhalingsteken eindigt bij Caveat 23px boven de basislijn
   (gemeten op font-size 52). Dat lege stuk binnen het regelvak bepaalt de afstand
   tot het kader, niet de offset. Daarom line-height 0 en een negatieve bottom, zodat
   de ONDERKANT VAN DE INKT vlak boven de rand landt in plaats van de onderkant van
   het regelvak.
   Wijzig je de font-size of het lettertype, herbereken dan de -3px zo:
     offset = 12 + baseKalam - 28,76 - baseNieuw + inktNieuw
     waarbij base = (fontBoundingBoxAscent - fontBoundingBoxDescent) / 2
   Kalam had base 13,5 en inkt 28,76 en stond daarmee op -12px; Caveat heeft
   base 17 en inkt 23,0 en komt daarmee uit op -3px (juli 2026). */
.bf-quote-tekst::before {
  content: "\201C";
  position: absolute;
  bottom: calc(100% - 3px);
  left: 50%;
  transform: translateX(-50%);
  font-family: Caveat, cursive;
  font-weight: 600;
  font-size: 52px;
  line-height: 0;
  color: var(--bf-primary);
}
/* Kapitalen zoals in de oorspronkelijke citaatbeelden. Bewust via text-transform en
   NIET door de tekst in kapitalen te typen: in de HTML blijft de zin normaal staan,
   wat beter is voor schermlezers (die spellen volledig gekapitaliseerde tekst soms
   letter voor letter) en voor de zoekindex, die de HTML-tekst overneemt. */
.bf-quote-tekst p {
  margin: 0;
  font-family: Caveat, cursive;
  /* 600, niet 400: Caveat 400 oogde te dun op de echte weergavegrootte, zeker
     op mobiel waar de clamp naar 15px zakt. 700 kantelt richting marker. De
     inktmaten van het aanhalingsteken zijn per gewicht doorgemeten; bij 500 en
     600 blijft de offset hierboven op -3px staan, alleen 700 zou -2px vragen. */
  font-weight: 600;
  font-size: clamp(15px, 1.7vw, 22px);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--bf-dark);
}


/* ===== Swiper customization ===== */
.swiper-button-next, .swiper-button-prev { color: var(--bf-primary) !important; }
.swiper-pagination-bullet-active { background: var(--bf-primary) !important; }


/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .bf-hero { min-height: 300px; }
  .bf-hero-heading { font-size: 28px; line-height: 34px; padding-top: 60px; }
  /* Hero-decoratie wordt site-wide geschaald via --bf-hero-scale onderaan
     brightflow.css (zie blok "Hero master-scale"). De voorheen aanwezige
     per-layer positionering en bf-hero-bg/bf-hero-icons resets zijn hier
     verwijderd zodat ze niet tegen de schaling in werken — goedgekeurde
     uitzondering op "geen bestaande CSS wijzigen" (mei 2026). */
  .bf-section { padding: 24px 0; }
  .bf-section-compact-bottom { margin-bottom: -12px; }
}

@media (max-width: 767.98px) {
  .bf-detail-header {
    padding: 24px 0 36px;
    background-position: 50% 0;
  }
  /* Detail-pagina H1 — gematcht aan live brightflow.nl #featured-title .main-title (alle detail-pagina's).
     Gemeten op brightflow.nl/maatwerk en brightflow.nl/poscockpit: zelfde waarden. */
  .bf-detail-header h1 {
    font-size: 22px;
    line-height: 30.8px;
    letter-spacing: -0.1px;
  }
  /* ===== MOBILE HERO via inline SVG illustration =====
     Hero is natuurlijke flow: H1 → SVG-illustratie → intro.
     De SVG heeft viewBox 0 0 1000 460 en width:100% — schaalt vanzelf proportioneel
     op elke viewport-breedte EN bij rotatie, zonder per-element coord-tweaks.
     Desktop blijft de oude absolute overlay (.bf-hero-bg + .bf-hero-icons) gebruiken;
     die zijn op mobile expliciet verborgen.
  */
  .bf-hero {
    min-height: 0;
    overflow: visible;
    position: relative;
    padding-top: 1px;
  }
  .bf-hero-heading {
    font-size: 22px;
    line-height: 30.8px;
    letter-spacing: 0.1px;
    padding-top: 0;
    margin: 0;
    max-width: none;
    position: relative;
    z-index: 2;
  }
  /* Verberg desktop-overlay op mobile */
  .bf-hero-bg,
  .bf-hero-icons {
    display: none !important;
  }
  /* Toon mobile-SVG in flow */
  .bf-hero-illustration-wrap {
    display: block;
    margin: 16px auto 0;
    padding: 0 var(--bs-gutter-x, 0.75rem);
  }
  .bf-hero-illustration {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  /* Body intro — geen kunstmatige margin-top meer, natuurlijke flow na SVG */
  .bf-hero-intro {
    margin-top: 16px;
    margin-bottom: 0;
    max-width: none;
  }

  /* Sticky widget — icons kleiner op mobile (live ~32px, was 53px) */
  .bf-sticky-icon {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
  .bf-sticky-icon img,
  .bf-sticky-icon svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* ===== Roadmap/proces-animatie: horizontaal scrollbaar op mobiel =====
     Iframe-animatie (assets/animations/maatwerk/maatwerk-animatie.html) is een
     gechoreografeerde horizontale compositie (wielen + overlays + dashes met
     percent-positie op 600px-grid). Verticaal stapelen vergt complete redesign.
     Daarom de fallback: iframe houdt leesbare min-breedte, wrapper scrollt
     horizontaal, rechter rand fadet uit als veeg-hint zodat duidelijk is dat
     er meer fasen bereikbaar zijn. */
  .bf-animation-wrapper {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    /* Veeg-hint: rechter 12% fadet uit zodat zichtbaar is dat content doorloopt */
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  .bf-animation-wrapper .bf-animation-iframe {
    /* Minimale leesbare breedte: onder 600px wordt fase-labeling onleesbaar.
       Bij viewport 360: iframe blijft 600px, 240px content scrollt rechts. */
    min-width: 600px;
    width: 600px;
  }

  /* Maatwerk-procesanimatie (#ontwikkelproces): op mobiel passend in beeld i.p.v.
     horizontaal scrollen. iOS Safari schaalt iframes toch al (de min-width/scroll-
     hack pakt daar niet), dus uniform laten passen geeft een consistente, nette
     weergave zonder lege ruimte links of overflow rechts. Labels worden kleiner;
     bewust akkoord (juni 2026). Alleen deze sectie; andere bf-animation-iframe's
     (connectflow, onderhoud) behouden hun horizontale-scroll-gedrag. */
  #ontwikkelproces .bf-animation-wrapper {
    overflow-x: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  #ontwikkelproces .bf-animation-iframe {
    min-width: 0 !important;
    width: 100% !important;
  }
  .bf-hero-icon { width: 35px; height: 35px; }
  .bf-section { padding: 20px 0; }
  .bf-section-compact-bottom { margin-bottom: -10px; }
  .bf-topbar { font-size: 12px; }
  .bf-topbar .bf-btn-accent { display: block; margin: 8px auto 0; }
  /* Sticky widget blijft zichtbaar op mobile (telefoon/FAQ/chat) — eerder display:none */
  .bf-ticker-inner { animation-duration: 28s; }
  .bf-footer .row > [class*="col-"] { margin-bottom: 24px; }
  .bf-subfooter { text-align: center; }
  .bf-subfooter .d-flex { flex-direction: column; gap: 8px; }

  /* Service-rijen: 1-koloms onder md (uit voormalig max-width: 767.98px blok) */
  .bf-diensten-section .row > .col-md-4,
  #voorbeeldprojecten .row > .col-md-4 {
    width: 100%;
    max-width: 100%;
  }

  /* Responsive fix: WCAG-tap-target 44x44 voor hamburger en back-to-top */
  .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
  }
  .bf-back-to-top {
    width: 44px;
    height: 44px;
  }

  .row > [class*="col-lg-"][style*="max-width"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ===== Wegwijzer (optie D: cyaan pijl, dunne lijn erboven) ===== */
.bf-wegwijzer {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #dde5ec;
}
.bf-wegwijzer-arrow {
  flex: 0 0 auto;
  color: var(--bf-primary, #00a3c4);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.65;
}
.bf-wegwijzer p { margin: 0; }
.bf-wegwijzer a {
  color: var(--bf-primary, #00a3c4);
  font-weight: 600;
  text-decoration: none;
}
.bf-wegwijzer a:hover { text-decoration: underline; }

/* ===== ConnectFlow: Animation Iframe ===== */
.bf-animation-wrapper {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto 0 0;
  overflow: hidden;
  background: transparent;
}

.bf-animation-iframe {
  display: block;
  width: 100%;
  aspect-ratio: 960 / 580;
  border: none;
}

/* Optimalisatie: de losse intro-paragraaf "Wij starten dit proces..." staat direct
   na de rij met de QuickScan-animatie. Op mobiel/tablet (gestapelde kolommen, <992px)
   plakt die tekst tegen de animatie. Lucht geven via CSS i.p.v. een HTML-class, zodat
   de fix via brightflow.css meedeployt. :has() target precies de quickscan-rij.
   Desktop (>=992px) blijft ongewijzigd. (juni 2026) */
@media (max-width: 991.98px) {
  .bf-section .container > .row:has(iframe[src*="quickscan-animatie"]) + p {
    margin-top: 28px;
  }
}

/* BaseFlow- en PortFlow-animatie: iframes hebben inline width:465px (vast).
   Op mobiel begrenzen tot de kolombreedte en margin-left resetten.
   Op desktop de -7px offset voor visuele uitlijning behouden. (juni 2026) */
@media (max-width: 767.98px) {
  iframe[src*="baseflow-animatie"],
  iframe[src*="portflow-animatie"] {
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}
@media (min-width: 768px) {
  iframe[src*="baseflow-animatie"],
  iframe[src*="portflow-animatie"] {
    margin-left: -7px;
  }
}

/* ConnectFlow hub-animatie (connectflow-werking): valt onder de globale
   .bf-animation-wrapper min-width:600px scroll-hack en loopt daardoor rechts uit
   beeld op mobiel. Passend maken binnen het scherm (zelfde aanpak als maatwerk
   #ontwikkelproces). :has() scoped op precies deze animatie; andere
   bf-animation-iframe's behouden hun gedrag. Desktop ongewijzigd. (juni 2026) */
@media (max-width: 767.98px) {
  .bf-animation-wrapper:has(iframe[src*="connectflow-werking"]) {
    overflow-x: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .bf-animation-wrapper:has(iframe[src*="connectflow-werking"]) .bf-animation-iframe {
    min-width: 0 !important;
    width: 100% !important;
  }
}

/* MoniFlow-animatie: .bf-moniflow-embed heeft een vaste aspect-ratio 784/636 (desktop-
   verhouding). Op telefoon reflowt de 6-kaarten-hub naar een hogere compositie, maar het
   frame blijft te plat (bij 366px breed: 297px hoog terwijl de content ~370px nodig heeft),
   waardoor overflow:hidden de onderste kaarten (Planning + Projectbeheer) afknipte.
   Op telefoon een hogere verhouding zodat alles past. !important wint van de inline
   <style> in moniflow.html (deployt zo betrouwbaar via brightflow.css). Desktop/tablet
   (>=576px) houden de originele 784/636. (juni 2026) */
@media (max-width: 575.98px) {
  .bf-moniflow-embed {
    aspect-ratio: 24 / 25 !important;
  }
}

/* ===== iframe color-scheme reset =====
   Sommige browsers erven color-scheme: dark van system/site-CSS, waardoor
   iframes met background:transparent niet naadloos blenden met de lichte
   section-achtergrond (zichtbaar als een net iets ander wit-vlak).
   Forceer light color-scheme op alle iframes zodat transparency goed werkt. */
iframe {
  color-scheme: light;
}

/* ===== Contact Form: Column Labels (Diensten / Producten) ===== */
.bf-form-column-label {
  font-family: var(--bf-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--bf-primary) !important;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Ensure paragraphs, list items, card text etc are NOT uppercase */
p, li, .accordion-body, .card-body p, .bf-section-text,
.bf-service-card p, .bf-news-card p,
.bf-footer .tagline, .bf-subfooter,
.bf-topbar, .bf-ticker-item, .bf-term, .bf-hero-intro,
.bf-form-heading, .bf-form-subtext, .form-check-label,
.bf-card-link, label, .form-label {
  text-transform: none;
}

/* ===== Portfolio Grid (projecten.html) ===== */
#project-filter {
  text-align: center;
  margin-bottom: 40px;
}
#project-filter .inner {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
#project-filter .cbp-filter-item {
  display: inline-block;
  cursor: pointer;
  font-family: var(--bf-font-display);
  font-weight: 900;
  font-size: 18px;
  text-transform: uppercase;
  line-height: 28px;
  color: var(--bf-dark);
  padding: 6px 16px;
  transition: color 0.2s;
}
#project-filter .cbp-filter-item:hover,
#project-filter .cbp-filter-item.active {
  color: var(--bf-primary);
}
#project-filter .cbp-filter-item > span {
  position: relative;
}
#project-filter .cbp-filter-item > span:after {
  content: '';
  display: block;
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--bf-accent);
  opacity: 0;
  transition: opacity 0.2s;
}
#project-filter .cbp-filter-item.active > span:after {
  opacity: 0;
}
#project-filter .cbp-filter-item.active {
  color: var(--bf-primary);
  font-weight: 900;
}

/* Project portfolio box (matches live site .project-box.style-2) */
.project-box .project-image {
  position: relative;
}
.project-box .project-image > .inner {
  position: relative;
  overflow: hidden;
}
.project-box .project-image > .inner img {
  width: 100%;
  height: auto;
  display: block;
}
/* Hover overlay — scale + fade, triggered on .project-image:hover (live site) */
.project-box .project-image > .inner:after {
  content: '';
  width: 100%;
  height: 100%;
  background-color: var(--bf-accent);
  display: block;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  transform: scale(0.95);
  transition: transform ease 0.35s, opacity ease 0.35s;
}
.project-box .project-image:hover > .inner:after {
  transform: scale(1);
  opacity: 0.9;
}
/* Overlay title text */
.project-box .project-text .title {
  opacity: 0;
  font-size: 16px;
  padding: 0 0 12px;
  margin: 0 0 0 30px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  color: #fff;
  z-index: 2;
  transition-duration: 0.35s;
  transition-property: opacity, padding, margin;
}
.project-box:hover .project-text .title {
  margin-left: 0;
  opacity: 1;
}
.project-box .project-text .title a {
  color: #fff !important;
  text-decoration: none;
}
/* Full-card link wrapper (deliberate deviation: entire card is clickable) */
a.project-box.style-2 {
  display: block;
  text-decoration: none;
}

/* Below-image titel — opmaak gelijkgetrokken met .project-card-title
   (juni 2026 site-brede kaarttitel-uniformering): Exo 900, 18px,
   line-height 1.4, kleur var(--bf-text). Gele hover-kleur verwijderd
   want paste niet bij huisstijl. */
.project-box.style-2 .project-image > .title {
  font-family: var(--bf-font-display);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.1px;
  margin: 13px 0 6px 16px;
  color: var(--bf-text);
  text-transform: uppercase;
  transition: color ease 0.3s;
}
/* Terms (category labels) — opmaak gelijkgetrokken met .project-card-terms
   op projecten.html: Verdana 500, .8rem, letter-spacing .04em, #7a7e83. */
.project-box.style-2 .project-image > .terms {
  font-family: var(--bf-font-body);
  font-size: .8rem;
  font-weight: 500;
  color: var(--bf-subtle);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 13px 16px;
}

/* ===== Gerelateerde-projecten tegels: gele hover weg + compacter =====
   Override-blok (mag NIET met andere kaarten interfereren).
   Toepasselijk op de .project-box.style-2 tegels in de "Gerelateerde
   projecten" sectie op alle project-*.html. Affecteert NIET .project-card
   (projecten.html overzicht) of .bf-project-card (CMS-template).        */

/* 1. Gele overlay uitschakelen (was: bf-accent achtergrond op hover) */
.project-box .project-image > .inner:after {
  display: none !important;
}

/* 2. Overlay-titel uitschakelen (titel staat al onder de afbeelding,
   de absoluut-gepositioneerde overlay-titel is dubbelop). De below-image
   titel .project-image > .title blijft staan want die is geen child van
   .project-text. */
.project-box .project-image .project-text {
  display: none !important;
}

/* 3. Compactere tegel: ~28% lagere afbeelding (350x195 -> 350x140).
   aspect-ratio 5/2 cropt thumb minimaal (was 1.795 natural). Img schaalt
   met cover om scherp te blijven (geen vervorming). */
.project-box .project-image > .inner {
  aspect-ratio: 5 / 2;
}
.project-box .project-image > .inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ===== Project detail: meta-box (Naam / Opdrachtgever / Categorie) ===== */
.bf-project-meta .label {
  color: #00a1c6;
  font-weight: 700;
}
.bf-project-meta p {
  margin-bottom: 5px;
}
.bf-project-meta .value {
  font-weight: 700;
}

/* ===== reCAPTCHA v3 ===== */
.grecaptcha-badge {
  visibility: hidden !important;
}
.bf-recaptcha-notice {
  font-size: 11px;
  color: #748494;
  margin-top: 8px;
  margin-bottom: 0;
}
/* De link in de reCAPTCHA-notice krijgt overal de standaard inhoudslink-opmaak
   (cyaan + onderstreept, geen hover-kleurwissel). Zonder deze regel kreeg de
   link binnen .bf-section (contactformulier) wél de onderstreping via
   .bf-section p a, maar in de sticky-vorm (buiten secties) niet - dat oogde
   inconsistent. */
.bf-recaptcha-notice a,
.bf-recaptcha-notice a:hover {
  color: var(--bf-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Twee opeenvolgende notice-regels (de "* invoer verwacht"-legenda en de
   reCAPTCHA-regel) sluiten strak aan: de tweede krijgt geen extra bovenmarge.
   De eerste houdt zijn margin-top (ruimte onder de knop/legenda). */
.bf-recaptcha-notice + .bf-recaptcha-notice { margin-top: 0; }
/* =============================================
   @media (min-width: 992px) — alle lg-breakpoint overrides
   • Body-content uitlijning (container padding)
   • Navbar expand-lg gedrag (override Assan template)
   • Navbar ↔ Footer verticale uitlijning
   ============================================= */
@media (min-width: 992px) {
  /* Body-content rechts uitlijnen op N van PRODUCTEN (site-wide ankerpunt):
     padding-right compenseert de sticky widget en lijnt content uit met nav-items. */
  main > section > .container {
    padding-right: 60px;
  }

  /* Force navbar-expand-lg behavior — override Assan template */
  .bf-navbar .collapse.navbar-collapse,
  .bf-navbar .navbar-collapse.collapse,
  header.bf-navbar .navbar-collapse,
  #mainNav .navbar-collapse,
  #navbarNav.collapse {
    display: flex !important;
    flex-basis: auto !important;
    visibility: visible !important;
    height: auto !important;
  }
  .bf-navbar .navbar-toggler,
  #mainNav .navbar-toggler {
    display: none !important;
  }
  .bf-navbar .navbar-nav {
    flex-direction: row;
    align-items: center;
  }

  /* Footer-kolommen (juni 2026): de merk-kolom houdt z'n vaste breedte (lijnt
     links uit). De vier linkkolommen vouwen zich naar hun INHOUD — elk precies zo
     breed als z'n langste item ("OfficeRnD-connector" past dan vanzelf) — en de rij
     verdeelt de resterende ruimte met justify-content: space-between, zodat de
     tussenruimte OVERAL gelijk is en het loze gat tussen Diensten en Producten
     verdwijnt. Vervangt de oude vaste percentages (Bedrijf 17% / Diensten·Producten
     19,5%+3px / Contact 16,5%) én het verwijderde inline 13/17/17/17/36-blok.
     Bewuste afwijking: footer-kolommen lijnen hierdoor niet meer 1-op-1 verticaal
     uit onder de navbar-items (gelijke tussenruimte gaat nu vóór). */
  .bf-footer .row {
    justify-content: space-between !important;
  }
  .bf-footer .row > .col-lg-3:first-child {
    flex: 0 0 calc(25% - 6px) !important;
    max-width: calc(25% - 6px) !important;
  }
  .bf-footer .row > .col-lg-2,
  .bf-footer .row > .col-lg-3:last-child {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
  }

  /* Navbar: items spreiden */
  .bf-navbar .navbar-brand {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
    margin-right: 0 !important;
  }
  .bf-navbar .navbar-collapse {
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: 71% !important;
    max-width: 71% !important;
    width: 71% !important;
    justify-content: flex-start !important;
  }
  .bf-navbar .navbar-nav {
    width: 100% !important;
    justify-content: space-between !important;
  }
  header.bf-navbar .navbar .navbar-nav .nav-item {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Verberg Safari focus-outline op navbar links */
  .bf-navbar .nav-link:focus,
  .bf-navbar .nav-link:focus-visible,
  .bf-navbar .dropdown-toggle:focus,
  .bf-navbar .dropdown-toggle:focus-visible {
    outline: none !important;
    box-shadow: none !important;
  }
  /* Dropdown-items: conform live site (donkergrijs, lichter gewicht) */
  .bf-navbar .dropdown-menu .dropdown-item {
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    color: #333 !important;
  }
  .bf-navbar .dropdown-menu .dropdown-item:hover {
    color: var(--bf-primary, #00a1c6) !important;
  }

  /* .bf-vb-col-btn: desktop-only uitlijning met topbar-knop (zie CLAUDE.md "Voorbeeldproject Bekijk nu knop alignment").
     Padding-right buiten lg-breakpoint veroorzaakte horizontale overflow op tablet/mobile. */
  .bf-vb-col-btn {
    flex: 0 0 20%;
    max-width: 20%;
    padding-right: 24px;
    padding-left: 15px;
    text-align: right;
  }
}

/* ============================================================
   RESPONSIVE OVERRIDES (feature/responsive-index, mei 2026)
   Alle nieuwe regels onder de desktopgrens van 992 px,
   m.u.v. de hero-graphic visuele-botsing-fix die in CLAUDE.md
   als bewuste afwijking is goedgekeurd (G3).
   ============================================================ */

/* === G3 — Hero master-scale (mei 2026) ===
   Hero-decoratie schaalt als één geheel mee met de viewportbreedte via
   --bf-hero-scale. Beide containers (.bf-hero-bg + .bf-hero-icons) behouden
   hun bestaande translateX(-50%) en krijgen scale erbij. overflow:hidden
   vangt de pixel-grid van layers af die buiten het verkleinde box-vak vallen,
   zodat doc-overflow niet terugkomt. transform-origin: top center zorgt dat
   het samenstel zijn relatie met de H1 erboven niet verliest.

   De bestaande @media (max-width: 1024px) regel hierboven is opgeschoond:
   per-layer positionering en bf-hero-bg/bf-hero-icons resets daar zijn
   weggehaald zodat ze niet tegen deze schaling in werken.

   Onder 768 px verbergt de bestaande @media (max-width: 768px) regel het
   hele samenstel al via display:none — daar oogt scaling niet meer mooi
   en het hele blok valt weg ten gunste van de mobiele 1-kolom layout. */

.bf-hero-bg,
.bf-hero-icons {
  /* transform-origin: center center (default).
     "top center" werd verworpen: de bovenkant van bf-hero-bg ligt op top:-107
     en wordt door overflow op .bf-hero geknipt; met center center krimpt het
     samenstel óók verticaal naar binnen. */
  transform-origin: 50% 50%;
}

/* Bovengrens scope: dit master-tablet-block geldt vanaf 768 tot 1199 zodat het
   de mobile-rules (max-width: 767.98px) niet meer overschrijft. Op <768 nemen
   de mobiele rules over (kleinere H1, hero-bg/icons display:none, etc.). */
@media (max-width: 1199.98px) and (min-width: 768px) {
  /* Master-scale geldt voor de hele tabletband. bf-hero-bg.top en
     .bf-toptaak-optimalisatie.left zijn per scale-band hieronder ingesteld
     zodat de live ankerpunten (chart-icoon en H1) op dezelfde x/y vallen
     als op brightflow.nl — gemeten via responsive-review/anchors.py.
     Live chart-x = 0.76 × viewport (constant); chart.left in box volgt
     uit: vp×0.5 + (chart_target_x − vp/2)/scale = vp × (0.5 + 0.26/scale).
     In CSS uitgedrukt als percentage van vw zodat het continu volgt. */
  .bf-hero {
    overflow-x: clip;
    overflow-y: visible;
    position: relative;
    /* Stopt margin-collapse van H1.margin-top naar .bf-hero. */
    padding-top: 1px;
  }
  /* OVERLAY-OP-TABLET (juni 2026) — vervangt de eerdere "SVG onder de kop" (G3b).
     Kop + proportionele SVG-illustratie staan nu in EEN grid-cel (.bf-hero-stack)
     zodat de illustratie ACHTER de kop bovenin valt (zoals de desktop-overlay), maar
     via de proportionele SVG -> GEEN clipping/botsing. De grid-cel krijgt automatisch
     de SVG-hoogte; de intro flowt deterministisch eronder (geen vw-gegok). De absolute
     PNG-overlay (.bf-hero-bg + .bf-hero-icons) blijft ALLEEN desktop >=1200px.
     De per-band --bf-hero-scale / bf-hero-bg.top / optimalisatie-vw regels hieronder
     zijn legacy (sturen verborgen elementen aan); alleen .bf-hero-heading font-size per
     band is nog functioneel. De per-band margin-top op de kop wordt hier geneutraliseerd. */
  .bf-hero-bg,
  .bf-hero-icons {
    display: none !important; /* overlay alleen op desktop >=1200px */
  }
  .bf-hero-stack {
    display: grid;
    grid-template-columns: 1fr;
  }
  .bf-hero-stack > .container {
    grid-area: 1 / 1;        /* kop-container en SVG-container overlappen in dezelfde cel */
    min-width: 0;
    align-self: start;
  }
  .bf-hero-stack > .bf-hero-illustration-wrap { z-index: 0; }                 /* SVG achter */
  .bf-hero-stack > .container:not(.bf-hero-illustration-wrap) { z-index: 2; } /* kop voor */

  .bf-hero-illustration-wrap {
    display: block;
    margin: 0;
    padding: 0 var(--bs-gutter-x, 0.75rem);
  }
  .bf-hero-illustration {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  /* Klikbare toptaak-<a>'s in de SVG blijven klikbaar (de kop eroverheen heeft
     pointer-events:none zodat hij geen icoon-clicks onderschept). */
  .bf-hero-illustration-wrap a { pointer-events: auto; }

  .bf-hero-heading {
    margin-left: calc(5vw - 12px);
    font-size: 28px !important;
    line-height: 34px !important;
    padding-top: 20px;         /* kop in de lege bovenband van de SVG */
    margin-top: 0 !important;  /* neutraliseert de per-band margin-top hieronder */
    margin-bottom: 0;
    pointer-events: none;      /* kop onderschept geen icoon-clicks in de SVG eronder */
    /* witte halo houdt de donkere kop leesbaar over de lichte SVG-lijnen */
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 14px rgba(255, 255, 255, 0.85);
  }
}

/* Per-scale-band: viewport, scale, en de bij die scale berekende bf-hero-bg.top
   en chart.left waarden. Live chart_x = 0.76 vw → chart.left = vw × (0.5 + 0.26/s).
   bf-hero-bg.top is afgestemd om chart_y na scale dichtbij live target te brengen.
   ─ band ─ vp range ─ scale ─ chart.left (vw) ─ bf-icons.top (px) ── */
/* Bands fijner gesplitst om chart-y en chart-grootte binnen ±5px van live
   te brengen. Chart-base-size per band gecompenseerd voor scale-verlies. */
@media (max-width: 1199.98px) and (min-width: 1100px) {
  :root { --bf-hero-scale: 0.92; }
  .bf-hero-bg, .bf-hero-icons { top: -143px; }
  .bf-toptaak-optimalisatie { left: 78.3vw; width: 82px; height: 84px; }

  .bf-hero-heading { font-size: 30px !important; line-height: 38px !important; }

  .bf-hero-heading {
    max-width: 60vw;
    margin-top: 60px;
  }
}
@media (max-width: 1099.98px) and (min-width: 1000px) {
  :root { --bf-hero-scale: 0.82; }
  .bf-hero-bg, .bf-hero-icons { top: -157px; }
  .bf-toptaak-optimalisatie { left: 81.7vw; width: 85px; height: 87px; }
}
/* 992-999: topbar nog zichtbaar (Bootstrap-lg grens), section_top=145. */
@media (max-width: 999.98px) and (min-width: 992px) {
  :root { --bf-hero-scale: 0.72; }
  .bf-hero-bg, .bf-hero-icons { top: -195px; }
  .bf-toptaak-optimalisatie { left: 86.1vw; width: 93px; height: 95px; }
}
/* Vanaf 991 en lager: topbar verborgen, section_top = 100 (alleen navbar).
   Alle bf-hero-icons.top waarden zijn aangepast (+47 minder negatief)
   t.o.v. de vorige versie met topbar zichtbaar. */
@media (max-width: 991.98px) and (min-width: 950px) {
  :root { --bf-hero-scale: 0.72; }
  .bf-hero-bg, .bf-hero-icons { top: -145px; }
  .bf-toptaak-optimalisatie { left: 86.1vw; width: 93px; height: 95px; }

  .bf-hero-heading { font-size: 32px !important; line-height: 40px !important; }

  .bf-hero-heading {
    max-width: 67.7vw;
    margin-top: 56px;
  }
}
@media (max-width: 949.98px) and (min-width: 900px) {
  :root { --bf-hero-scale: 0.72; }
  .bf-hero-bg, .bf-hero-icons { top: -156px; }
  .bf-toptaak-optimalisatie { left: 86.1vw; width: 85px; height: 86px; }

  .bf-hero-heading { font-size: 28px !important; line-height: 36px !important; }

  .bf-hero-heading {
    max-width: 67.7vw;
    margin-top: 46px;
  }
}
@media (max-width: 899.98px) and (min-width: 820px) {
  :root { --bf-hero-scale: 0.6; }
  .bf-hero-bg, .bf-hero-icons { top: -171px; }
  .bf-toptaak-optimalisatie { left: 93.3vw; width: 92px; height: 95px; }

  .bf-hero-heading { font-size: 26px !important; line-height: 33px !important; }

  .bf-hero-heading {
    max-width: 67.7vw;
    margin-top: 42px;
  }
}
@media (max-width: 819.98px) and (min-width: 768px) {
  /* 768-819 band — live chart_y springt naar 210 (Slider-preset switch). */
  :root { --bf-hero-scale: 0.6; }
  .bf-hero-bg, .bf-hero-icons { top: -114px; }
  .bf-toptaak-optimalisatie { left: 93.3vw; width: 87px; height: 88px; }

  .bf-hero-heading { font-size: 32px !important; line-height: 41px !important; }

  /* 768-819 band: Slider-preset switch, live H1 wordt breder (86%) */
  .bf-hero-heading {
    max-width: 86.2vw;
    margin-top: 18px;
  }
}
@media (max-width: 767.98px) and (min-width: 600px) {
  :root { --bf-hero-scale: 0.5; }
  .bf-hero-bg, .bf-hero-icons { top: -147px; }
  .bf-toptaak-optimalisatie { left: 102vw; width: 80px; height: 84px; }

  .bf-hero-heading { font-size: 26px !important; line-height: 32px !important; }

  .bf-hero-heading {
    max-width: 86.2vw;
    margin-top: 14px;
  }
}
@media (max-width: 599.98px) and (min-width: 480px) {
  :root { --bf-hero-scale: 0.5; }
  .bf-hero-bg, .bf-hero-icons { top: -164px; }
  .bf-toptaak-optimalisatie { left: 102vw; width: 64px; height: 66px; }

  .bf-hero-heading { font-size: 20px !important; line-height: 26px !important; }

  .bf-hero-heading {
    max-width: 86.2vw;
    margin-top: 12px;
  }
}
@media (max-width: 479.98px) {
  :root { --bf-hero-scale: 0.32; }
  .bf-toptaak-optimalisatie { left: 131.25vw; width: 78px; height: 81px; }
  /* top: -111px en margin-top: 93px verwijderd — werd overruled door 767.98 block
     dat top: 110px en margin-top: 0 instelt voor compactere mobile hero. */
}

/* H1 per Bootstrap-band — matched aan live H1.width en H1.x per breakpoint.
   Live H1.x = ~5 % van viewport (constant); rebuild krijgt margin-left zodat
   H1.box-left = 5vw (container heeft 12px padding-left, dus margin = 5vw - 12).
   Basis-CSS heeft font-size:36px !important + line-height:42px !important —
   die moeten met !important geneutraliseerd worden onder 1199, anders blijft
   H1 36 px en wrapt naar 3 regels waar live er 2 heeft. */

/* H1.height per band — live varieert (live lh: 34/40/36/33/41/32/26 per bp).
   Match font-size en line-height per Bootstrap-band om H1.dh binnen 5 px te
   krijgen. !important nodig omdat basisregel zelf font-size:36 !important heeft. */







/* H1.y wordt gestuurd via margin-top (boven bbox, telt niet mee in H1.height).
   Targets per band gebaseerd op live H1.y meting. */
/* Live H1.width volgt een vast percentage van viewport per band:
   ≥1024 = 60vw, 820-991 = 67.7vw, 768-819 én 480-767 = 86.2vw, <480 = 90vw.
   Patroon ontdekt door live-data te delen door viewport-breedte. */

@media (max-width: 1099.98px) and (min-width: 992px) {
  .bf-hero-heading {
    max-width: 60vw;
    margin-top: 53px;
  }
}
/* Vanaf 991: topbar verborgen, section_top = 100. Live H1.y target per band:
   991:157 / 900:147 / 820:143 / 768:119 / 600:115 / 480:113 / 375:194.
   margin-top = live H1.y - 100 (section_top) - 1 (padding-stop-collapse). */








/* === Deel 0 — Desktop defaults voor drawer-only elementen ===
   Op desktop verborgen; in het @media (max-width: 991.98px) blok hieronder
   krijgen ze display: block. Source-volgorde: defaults staan VÓÓR media query
   zodat de mobiele override wint binnen het media-block. */
.bf-nav-overlay  { display: none; }
.bf-drawer-brand { display: none; }
.bf-drawer-close { display: none; }

/* === A — Service-cards: 2 cols op 768-991, 1 col onder 768 === */
@media (max-width: 991.98px) {
  /* Responsive fix: 3 col-md-4 cards te krap onder 992px (Diensten/Voorbeeldprojecten) */
  .bf-diensten-section .row > .col-md-4,
  #voorbeeldprojecten .row > .col-md-4 {
    flex: 0 0 auto;
    width: 50%;
    max-width: 50%;
  }
}

/* === A' — Service-cards: 1 col onder 768 (matcht live brightflow.nl mobile) === */
@media (max-width: 767.98px) {
  .bf-diensten-section .row > .col-md-4,
  #voorbeeldprojecten .row > .col-md-4,
  .bf-diensten-section .row > [class*="col-md-"],
  #voorbeeldprojecten .row > [class*="col-md-"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Diensten-kaarten: zijmarge gelijktrekken met live brightflow.nl (juni 2026).
     Live = 19.5px gap per kant -> kaart 351px. Rebuild had container-padding 12px -> kaart 366px (15px te breed).
     Alleen de container van de dienstensectie wordt verbreed; .bf-service-card (border, radius, bg,
     interne padding 28px 24px 24px, hover) blijft ongemoeid en geen andere sectie verspringt. */
  .bf-diensten-section .container {
    padding-left: 19.5px;
    padding-right: 19.5px;
  }
}

@media (max-width: 991.98px) {
  /* Vervolgens dezelfde mobile-only drawer-styling hieronder */

  /* Drawer-paneel: vaste positie links, schuift in vanaf -100% naar 0 */
  .bf-navbar .navbar-collapse {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(85vw, 320px);
    height: 100vh !important;
    max-width: 100%;
    background: #1d2b37; /* bf-dark / navy */
    z-index: 10000;
    display: block !important; /* altijd in DOM zodat transitie werkt */
    transform: translateX(-100%);
    transition: transform 0.3s ease-out;
    padding: 32px 24px 24px;
    overflow-y: auto;
    /* !important verslaat theme.min.css .navbar-expand-lg.navbar .navbar-collapse { margin-top: 0.5rem }
       (specificity 0,3,0); zonder !important bleef er 8px margin-top -> gat bovenin de drawer (juni 2026). */
    margin: 0 !important;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
  }
  /* Bootstrap zet .show bij open, .collapsing tijdens animatie */
  .bf-navbar .navbar-collapse.show,
  .bf-navbar .navbar-collapse.collapsing {
    transform: translateX(0);
  }
  /* Resize-guard: tijdens het slepen van het venster (.bf-resizing wordt door
     navbar-align.js op <html> gezet) de drawer-transitie uitzetten, zodat het paneel
     niet kort "wegschiet" op het 992px-omslagpunt. (juni 2026) */
  html.bf-resizing .bf-navbar .navbar-collapse {
    transition: none !important;
  }

  /* Drawer-logo bovenin (witte variant), zelfde positionering als live site */
  .bf-drawer-brand {
    display: block;
    margin: 4px 0 24px;
    text-align: left;
  }
  .bf-drawer-brand img {
    width: 140px;
    height: auto;
    display: block;
  }

  /* Close-X is sibling van .navbar-collapse, zodat position:fixed relatief blijft aan de viewport
     (en niet wordt gevangen door de transform-containing block van de drawer). Standaard verborgen;
     toont alleen wanneer de drawer .show of .collapsing heeft. */
  .navbar-collapse.show ~ .bf-drawer-close,
  .navbar-collapse.collapsing ~ .bf-drawer-close {
    display: block;
    position: fixed;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    z-index: 10001; /* boven drawer (10000) en sticky-widget (1040) */
  }
  .bf-drawer-close:hover,
  .bf-drawer-close:focus {
    color: var(--bf-primary, #00a1c6);
    outline: none;
  }

  /* Hamburger verbergen wanneer drawer open is — Bootstrap zet aria-expanded="true"
     op de toggler tijdens .show/.collapsing, zodat alleen de close-X zichtbaar blijft. */
  .navbar-toggler[aria-expanded="true"] {
    display: none;
  }

  /* Items: kolom-layout binnen drawer.
     padding-left/margin-left genuld om nav-text uit te lijnen met logo
     (beide op x = drawer padding-left). !important nodig om hogere-
     specificity Assan/Bootstrap-defaults te overrulen. */
  .bf-navbar .navbar-collapse .navbar-nav {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    gap: 0;
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none;
  }
  header.bf-navbar .navbar .navbar-nav .nav-item {
    /* !important: basisregel 382-384 heeft margin: 0 17px !important */
    margin: 0 !important;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  header.bf-navbar .navbar .navbar-nav .nav-item:last-child {
    border-bottom: none;
  }
  header.bf-navbar .navbar .navbar-nav .nav-item .nav-link {
    /* !important: basisregel 370-380 heeft padding: 0, line-height: 100px,
       color: var(--bf-text) — alles met !important. Zonder override blijven
       items donkergrijs op donkere bg en duwt line-height ze ~80px uit elkaar. */
    /* padding-left 11px compenseert de ~10.6 px transparante padding aan de
       linkerkant van het BrightFlow-logo-PNG, zodat de eerste tekstletter
       (M van Maatwerk) visueel uitlijnt met de B van het logo. */
    padding: 16px 0 16px 11px !important;
    line-height: 1.3 !important;
    color: #fff !important;
    width: 100%;
  }
  header.bf-navbar .navbar .navbar-nav .nav-item .nav-link:hover,
  header.bf-navbar .navbar .navbar-nav .nav-item .nav-link:focus,
  header.bf-navbar .navbar .navbar-nav .nav-item .nav-link.active {
    color: var(--bf-primary, #00a1c6) !important;
  }

  /* Overlay-element: dimt de pagina achter de drawer, click-to-close.
     :has() detecteert wanneer collapse open is en activeert de overlay. */
  .bf-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(29, 43, 55, 0.6);
    z-index: 9999; /* onder drawer (10000), boven content */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s, visibility 0.3s;
    cursor: pointer;
    border: 0;
    margin: 0;
    padding: 0;
  }
  .bf-navbar:has(.navbar-collapse.show) .bf-nav-overlay,
  .bf-navbar:has(.navbar-collapse.collapsing) .bf-nav-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .bf-topbar {
    display: none;
  }

  /* Topbar verborgen -> navbar bovenaan. Navbar is position:fixed, dus de body
     reserveert hier alleen de navbar-hoogte (geen topbar). CSS corrigeert
     onmiddellijk zodat er geen sprong optreedt bij het resizen van het venster. */
  body { padding-top: var(--bf-navbar-height) !important; }
  .bf-navbar { top: 0 !important; }

  /* Responsive fix: FAQ leest krap in 2 kolommen onder 992px */
  .bf-faq .row > .col-lg-6 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }
}
/* === C — Mobiel menu als zijpaneel drawer onder 992 ===
   Drawer-elementen (paneel-styling, logo, close-X, overlay) staan in het
   gecombineerde @media (max-width: 991.98px) blok hierboven. De top-level
   `display: none` defaults voor .bf-drawer-brand / .bf-drawer-close /
   .bf-nav-overlay staan in DEEL 0 vóór dat media-blok zodat de mobile-
   override (display: block) in source-volgorde wint op viewport <= 991.
   ============================================================ */



/* === B — Topbar verbergen onder 992 px ===
   Live site verbergt de top-bar onder Bootstrap-lg (gemeten via anchors.py:
   visible=False op viewport <=991). Rebuild volgt dezelfde grens.
   navbar-align.js berekent --bf-topbar-height + body.padding-top dynamisch,
   dus verbergen werkt automatisch door — geen extra JS-aanpassing nodig. */


/* === D — FAQ 2-koloms naar 1 kolom onder 992 px === */


/* === E — Hero H1 schalen op mobiel ===
   Vervangen door per-Bootstrap-band font-size overrides hierboven (regel ~3022-3040)
   die de live H1.height (line-count + line-height) per breakpoint matchen.
   Het blok hier zou de live-match terugdraaien op <576 — daarom uitgecommentarieerd. */
/*
@media (max-width: 575.98px) {
  .bf-hero-heading {
    font-size: 28px !important;
    line-height: 1.15 !important;
  }
}
*/

/* === F — Tap-targets minimaal 44x44 op mobiel === */


/* === G — Inline-style col-lg-* met vaste max-width onder md stapelen ===
   Koppelingen.html "Waarom je applicaties koppelen?" gebruikt op .col-lg-5/-7
   inline `flex: 0 0 41.2%; max-width: 41.2%;` voor een afwijkende desktop-ratio
   (41.2/58.8 ipv 5/12 en 7/12). Die inline max-width blokkeert het Bootstrap-lg
   stack-gedrag onder 992, waardoor de kolommen ook op mobiel naast elkaar blijven.
   Override onder 768: dwing 100% breedte, !important nodig om inline style te slaan. */


/* =====================================================================
   ===== Gedeelde contentfilters (juni 2026) ===========================
   ===================================================================== */
/* ============================================================
   Filterbalk — gedeeld component voor blog, projecten en producten.
   Actieve chip: wit met cyaan accent. Mobiel: chips scrollen
   horizontaal binnen de balk zonder de pagina te verbreden.
   ============================================================ */
.bf-blog-filter {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0 30px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 161, 198, .14);
  border-radius: 16px;
  background: #f0f9fc;
}

/* Chip-rij: breekt af over meerdere regels als de chips niet in één rij passen
   (i.p.v. verborgen horizontaal scrollen, wat op mobiel afgekapt/kapot oogde).
   Op desktop passen alle 7 chips in één rij, dus daar verandert er niets. */
.bf-blog-filter .bf-filter-row {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 4px;
  margin: 0;
  padding: 0;
}

/* Pill-chip */
.bf-blog-filter .bf-chip {
  flex: 0 0 auto;
  min-height: 34px;
  margin: 0;
  padding: 7px 14px;
  font-family: var(--bf-font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--bf-subtle);
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  transition:
    color var(--bf-transition),
    border-color var(--bf-transition),
    background var(--bf-transition),
    box-shadow var(--bf-transition);
}
.bf-blog-filter .bf-chip:hover {
  color: var(--bf-text);
  background: rgba(255, 255, 255, .7);
}
.bf-blog-filter .bf-chip:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 161, 198, .28);
}
.bf-blog-filter .bf-chip.is-active,
.bf-blog-filter .bf-chip[aria-pressed="true"] {
  color: #006e87;
  font-weight: 600;
  border-color: rgba(0, 161, 198, .3);
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 80, 100, .12);
}

/* Meta: resultaattelling + (optionele) reset, rechts in de balk */
.bf-blog-filter .bf-filter-meta {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 2px 6px 2px 14px;
  border-left: 1px solid rgba(0, 80, 100, .1);
  font-family: var(--bf-font-body);
  font-size: 13px;
  color: var(--bf-subtle);
  white-space: nowrap;
}
.bf-blog-filter .bf-filter-count strong {
  color: var(--bf-text);
  font-weight: 700;
}
.bf-blog-filter .bf-filter-reset {
  font-family: var(--bf-font-body);
  font-size: 13px;
  color: var(--bf-primary);
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}
.bf-blog-filter .bf-filter-reset:hover { text-decoration: underline; }
.bf-blog-filter .bf-filter-reset:focus-visible {
  outline: 2px solid rgba(0, 161, 198, .4);
  outline-offset: 3px;
}

.bf-blog-filter + .bf-product-grid { margin-top: 0; }

@media (max-width: 767px) {
  .bf-blog-filter {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
    padding: 8px;
    border-radius: 14px;
  }
  .bf-blog-filter .bf-filter-row {
    width: 100%;
  }
  .bf-blog-filter .bf-chip {
    min-height: 36px;
  }
  .bf-blog-filter .bf-filter-meta {
    justify-content: space-between;
    margin: 0;
    padding: 7px 4px 1px;
    border-top: 1px solid rgba(0, 80, 100, .1);
    border-left: 0;
  }
}

/* Lege staat: tonen wanneer filter geen resultaten oplevert */
.bf-blog-empty {
  text-align: center;
  margin-top: 24px;
  padding: 36px 20px;
  color: #748494;
  border: 1px dashed #d7e0e7;
  border-radius: 14px;
  background: #f9fbfc;
}
.bf-blog-empty p { margin-bottom: 16px; }

/* Verborgen kaart respecteren, ook wanneer de kaart zelf display:flex gebruikt. */
.bf-blog-card[hidden],
.bf-product-card[hidden] { display: none !important; }

/* ===== OfficeRnD-connector: voordelen-kaarten ===== */
.bf-voordeel-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bf-voordeel-card { background: #fff; border: 1px solid #e8eef4; border-radius: 16px; padding: 28px 24px 24px; }
.bf-voordeel-card .bf-voordeel-kop { color: var(--bf-text); font-weight: 600; font-size: 15.5px; line-height: 1.3; margin: 0 0 18px; text-transform: none; }
.bf-voordeel-lijst { list-style: none; margin: 0; padding: 0; }
.bf-voordeel-lijst li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.55; margin: 0 0 12px; text-transform: none; }
.bf-voordeel-lijst li:last-child { margin-bottom: 0; }
.bf-voordeel-lijst li::before { content: "\2022"; color: var(--bf-primary); position: absolute; left: 0; top: -1px; font-size: 15px; }
.bf-voordeel-titel { color: var(--bf-primary); font-weight: 500; }
@media (max-width: 768px) { .bf-voordeel-cards { grid-template-columns: 1fr; gap: 16px; } }

/* ===== Afsluit-CTA: subline onder de knop ("Reactie binnen 1 werkdag") ===== */
.bf-cta-subline {
  font-family: var(--bf-font-body);
  font-size: 13px;
  font-weight: 300;
  color: #6b7785 !important;
  line-height: 22.62px;
  text-transform: none !important;
  margin-top: 8px !important;
}

/* =================================================================
   Vormgeving site-breed (juni 2026) - voorheen de geisoleerde
   bf-proef-proeflaag (bf-proef.css onder body.bf-proef), nu vast
   ingebakken. De `body`-prefix geeft (0,1,1)-specificiteit: net genoeg
   om 1-class page-<style>-regels (oude kaartrand op producten/over-ons/
   moniflow) te verslaan zonder grof !important. Pointer-glow en de
   (dubbele) actieve-nav-regel zijn bewust NIET meegenomen.
   ================================================================= */
:root { --bf-primary-light: #00cbf9; }

body .bf-voordeel-card,
body .bf-news-card,
body .bf-product-card,
body .bf-team-card,
body .bf-feature-block,
body .project-card,
body .bf-service-card:not(.bf-diensten-stack *) {
  border: 1px solid rgba(16, 26, 34, .10);
  border-radius: 16px;
  background: #fff;
}
body .bf-voordeel-card:hover,
body .bf-news-card:hover,
body .bf-product-card:hover,
body .bf-team-card:hover,
body .bf-feature-block:hover,
body .project-card:hover,
body .bf-service-card:not(.bf-diensten-stack *):hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 14px 40px rgba(8, 25, 36, .08);
  border-color: var(--bf-primary);
}

body .bf-section:not(.bf-diensten-section) h2 {
  font-size: clamp(20px, 2.5vw, 26px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

body .bf-section .bf-term {
  border-bottom: 1px dotted var(--bf-primary);
  text-decoration: none;
}

body .bf-section p a,
body .bf-section li a,
body .bf-cta-section p a,
body .bf-cta-section li a {
  color: var(--bf-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Eén consistente lijst-stijl site-breed: compacte regelafstand + 9x9 cyaan
   vierkantje. Geldt voor bullet-, voordeel-, numbered- en check-list, zodat
   ze overal identiek ogen (margin-left/-17px-glyph van numbered-list worden
   geneutraliseerd). */
body .bf-section .bf-bullet-list,
body .bf-section .bf-voordeel-lijst,
body .bf-section .bf-numbered-list,
body .bf-section .bf-check-list {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
body .bf-section .bf-bullet-list li,
body .bf-section .bf-voordeel-lijst li,
body .bf-section .bf-numbered-list li,
body .bf-section .bf-check-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 4px;
  line-height: 1.74;
}
body .bf-section .bf-bullet-list li::before,
body .bf-section .bf-voordeel-lijst li::before,
body .bf-section .bf-numbered-list li::before,
body .bf-section .bf-check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 9px;
  height: 9px;
  margin-left: 0;
  border-radius: 2px;
  background: var(--bf-primary);
}

body .bf-cta-subline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body .bf-cta-subline::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bf-primary);
}

body .bf-cta-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
}

body .bf-section-dark .bf-term { border-bottom-color: var(--bf-primary-light); }
body .bf-section-dark p a, body .bf-section-dark li a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
body .bf-section-dark .bf-bullet-list li::before,
body .bf-section-dark .bf-voordeel-lijst li::before,
body .bf-section-dark .bf-numbered-list li::before,
body .bf-section-dark .bf-check-list li::before { background: var(--bf-primary-light); }

/* ===== Onze werkwijze (maatwerk) — scroll-vertelling ZONDER vastzetten =====
   Kop + ankertekst links, kaarten rechts; tijdens het scrollen wisselt set A -> set B
   (2 sets van 3 + 2 ankerteksten). Aansturing: assets/js/werkwijze.js (progressie op de
   positie van .ww-layout in beeld; draait op ALLE breedtes, ook mobiel).
   GEEN sticky/pin: een vastgezet blok zet de animatie achter een lange scroll-track,
   waardoor er een groot gat (~977px gemeten) onder de kaarten ontstaat. Zonder vastzetten
   rijden de kaarten met de pagina mee en staat de kanban-animatie (.ww-method) ALTIJD pal
   onder de kaarten (18px). De onthulling + de A->B-wissel blijven; mobiel = één kolom met
   de wissel actief (NIET alle kaarten tegelijk tonen). NIET terugzetten naar sticky. */
.ww-pin-wrap{position:relative;}
.ww-pin{position:static;}
/* Tekstkolom vast 420px + kaarten vullen de rest, gelijk aan de homepage-diensten
   (.bf-diensten-layout). Houdt het gat tussen de bodytekst en de kaarten klein.
   Was 1.05fr .95fr + clamp-gap; maatwerk en over-ons overschreven dat allebei
   page-scoped naar deze waarden, dus staat het sinds juli 2026 hier als basis.
   Mobiel (<=991.98px) blijft één kolom; zie het media-block onderaan dit blok. */
.ww-layout{display:grid;grid-template-columns:420px 1fr;gap:48px;align-items:start;width:100%;}

.ww-anchor-text{display:grid;}
.ww-anchor-text > p{grid-area:1 / 1;margin:0;max-width:48ch;transition:opacity .6s ease, transform .6s ease;}
.anchor-a{opacity:1;transform:none;}
.anchor-a.hide{opacity:0;transform:translateY(-12px);pointer-events:none;}
.anchor-b{opacity:0;transform:translateY(12px);pointer-events:none;}
.anchor-b.show{opacity:1;transform:none;pointer-events:auto;}

.ww-stage{display:grid;}
.ww-stage > *{grid-area:1 / 1;}
.ww-cards{display:grid;gap:14px;align-content:start;pointer-events:none;}  /* container vangt zelf geen hover; zie .ww-card.in -> de inactieve (overlappende) set kan zo nooit de hover van de actieve kaarten onderscheppen */

.ww-card{background:#fff;border:1px solid rgba(16,26,34,.10);border-radius:16px;padding:24px 26px 26px;opacity:0;transform:translateY(24px);transition:opacity .6s ease, transform .6s ease;}
.ww-card.in{opacity:1;transform:none;pointer-events:auto;}
.ww-card:not(.in){pointer-events:none;}
.ww-card:hover{transform:translateY(-6px);box-shadow:0 14px 40px rgba(8,25,36,.08);border-color:var(--bf-primary);transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;}
/* Titel #333 + 18px, gelijk aan .project-card-title / .bf-service-card h3 / .bf-news-card h4
   (tempert de cyaan-opeenstapeling, keuze juli 2026). Was cyaan 20px; maatwerk en over-ons
   overschreven dat allebei page-scoped, dus staat het nu hier als basis. */
.ww-card h3{color:var(--bf-text);font-family:var(--bf-font-display);font-weight:900;font-size:18px;line-height:1.1;letter-spacing:-.01em;margin:0 0 8px;}
.ww-card p{font-size:15px;line-height:1.55;margin:0;}

.ww-method{padding:18px 0 0;}   /* 18px gap tussen de kaarten en de animatie */
.ww-method-inner{max-width:760px;margin:0 auto;opacity:0;transform:translateY(28px);transition:opacity .7s ease, transform .7s ease;}
.ww-method-inner.in{opacity:1;transform:none;}

/* MOBIEL: één kolom; de wissel BLIJFT actief (geen sticky, niet alle kaarten tonen) */
@media (max-width:991.98px){
  .ww-layout{grid-template-columns:1fr;gap:26px;}
  .ww-card{padding:20px 22px 22px;}
}
@media (prefers-reduced-motion:reduce){
  .ww-card,.ww-anchor-text > p,.ww-method-inner{transform:none;}
}

/* ===== Over ons - werkwijze: animatie klapt pal onder de kaarten open =====
   Eén set kaarten (geen A->B-wissel); na de 3e kaart schuift de kanban-animatie open.
   De iframe-wrapper in over-ons.html is identiek bijgesneden als op maatwerk (lege strook
   boven de cirkels weggeclipt). margin-top:18px = dezelfde waarde als maatwerk's .ww-method,
   zodat de gap gelijk is. Aansturing: inline scroll-script onderaan over-ons.html. */
.ww-anim{max-height:0; opacity:0; overflow:hidden; margin:0 auto; max-width:760px;
  transition:max-height .6s ease, opacity .55s ease, margin-top .6s ease;}
.ww-anim.in{max-height:400px; opacity:1; margin-top:18px;}
@media (prefers-reduced-motion:reduce){ .ww-anim{transition:none;} }

/* ============================================================
   Micro-polish (juni 2026) - site-breed via deze stylesheet:
   tekstselectie in merkkleur, zacht ankerscrollen, consistente
   toetsenbord-focus en de skip-to-content link.
   ============================================================ */

/* Tekstselectie in merkkleur (cyaan + witte tekst). */
::selection { background: var(--bf-primary); color: #fff; }
::-moz-selection { background: var(--bf-primary); color: #fff; }

/* Animaties horen NIET in een tekstselectie (gemeld juli 2026, mobiel).
   Een <iframe> is een vervangen element in de tekstflow: houd je op een telefoon
   je vinger op een kaart, dan selecteert iOS het hele element en schildert de
   cyaan ::selection hierboven de complete animatie dicht. Je ziet dan een blauw
   vlak in plaats van de tekening. user-select haalt het element uit de selectie;
   de inhoud van de animatie houdt zijn eigen gedrag, want dat is een eigen
   document en CSS erft niet over de iframe-grens.
   touch-callout onderdrukt daarbij het iOS-menu bij lang indrukken. */
iframe {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Zacht in-page scrollen naar ankers (offset zit op [id] hierboven).
   Uit bij prefers-reduced-motion. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Consistente toetsenbord-focus: cyaan outline, alleen bij :focus-visible
   (toetsenbord), niet bij muisklik. Componenten met een eigen focus-stijl
   (navbar, sticky-formulier) zijn specifieker en houden hun eigen stijl. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--bf-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip-to-content link: onzichtbaar tot hij focus krijgt via Tab. */
.bf-skip-link {
  position: absolute;
  left: 8px;
  top: -56px;
  z-index: 10000000;
  padding: 8px 16px;
  background: var(--bf-primary);
  color: #fff;
  font-family: var(--bf-font-display);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border-radius: 6px;
  transition: top .2s ease;
}
.bf-skip-link:focus { top: 8px; }
.bf-skip-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .bf-skip-link { transition: none; } }

/* ===== UITGELICHT (featured) archief-kaart =====
   Donker navy paneel, gesplitste layout (tekst links, bestaande image rechts),
   eyebrow "UITGELICHT · [TAG]". Aangestuurd door "featured": true in blog.json
   -> build-blog-cards.py rendert dan deze markup (.bf-featured-card i.p.v. de
   normale .bf-news-card). UITGELICHT is de ENIGE manier om een kaart breed te
   maken. Volle breedte op ALLE schermformaten (eigen rij), zodat de kaart nooit
   een rij deelt met normale kaarten en de overige rijen 3 kaarten breed blijven. */
#bf-blog-cards > .bf-blog-featured { flex: 0 0 100%; max-width: 100%; }
.bf-featured-card {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 280px;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(16, 26, 34, 0.10);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.bf-featured-card:hover {
  border-color: var(--bf-primary, #00a1c6);
  box-shadow: 0 12px 34px rgba(0, 63, 95, 0.10);
  transform: translateY(-4px);
}
/* Decoratieve procescirkels op de achtergrond, laag contrast (puur decoratief). */
.bf-featured-card::before,
.bf-featured-card::after {
  content: "";
  position: absolute;
  top: 50%;
  border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}
.bf-featured-card::before {
  left: -95px; width: 350px; height: 350px;
  border: 1px dashed rgba(16, 26, 34, 0.07);
}
.bf-featured-card::after {
  left: -35px; width: 230px; height: 230px;
  border: 1px solid rgba(16, 26, 34, 0.05);
}
.bf-featured-content {
  position: relative;
  z-index: 1;
  flex: 1 1 54%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 32px 36px;
}
.bf-featured-media {
  position: relative;
  z-index: 1;
  flex: 0 0 46%;
  align-self: stretch;
  background: #f9fbff;   /* lichte surface, zoals de img-wrap van de normale kaarten */
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bf-featured-media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;   /* hele tekening in beeld, geen crop, geen navy-doorloop */
  display: block;
  border-radius: 8px;    /* element == zichtbare afbeelding -> radius rondt de visual zelf af */
}
.bf-featured-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--bf-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bf-accent, #ffb600);
  margin-bottom: 14px;
}
.bf-featured-title {
  font-family: var(--bf-font-display);
  font-weight: 900;
  color: var(--bf-dark, #1d2b37);
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.15;
  margin: 0 0 14px;
  text-transform: none;
}
.bf-featured-teaser {
  color: var(--bf-text, #333333);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 22px;
  text-transform: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* De featured-teaser is een <p> in .bf-section en erft daardoor margin-bottom:25px
   (regel ~726). Bij een 3-regelige teaser + 2-regelige titel overschrijdt de inhoud
   de vaste 300px-kaart met ~8px; flexbox drukt dan de line-clamp-box samen (67 i.p.v.
   72px) en knipt de descenders van de laatste regel af (de "p" in "oplost"). Kleinere
   marge (gelijk aan het eyebrow/titel-ritme, 14px) + flex-shrink:0 houdt de teaser op
   volle 3-regelhoogte. Specificiteit 0,2,0 + latere bronvolgorde verslaat .bf-section p. */
.bf-featured-card .bf-featured-teaser {
  margin-bottom: 14px;
  flex-shrink: 0;
}
.bf-featured-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--bf-font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--bf-primary, #00a1c6);
}
.bf-featured-link::after {
  content: "\2192";
  transition: transform .2s;
}
.bf-featured-card:hover .bf-featured-link::after { transform: translateX(3px); }
/* Alle feature-blokken dezelfde vaste hoogte (QuickScan-maat) op desktop/tablet,
   zodat een vierkant beeld de kaart niet oprekt en alle blokken uniform ogen.
   Mobiel stapelt en blijft flexibel. */
@media (min-width: 768px) {
  .bf-featured-card { height: 300px; }
}
/* Mobiel: image onder de tekst stapelen, decoratie uit. */
@media (max-width: 767.98px) {
  .bf-featured-card { flex-direction: column; }
  .bf-featured-content { flex-basis: auto; padding: 26px 24px; }
  .bf-featured-media { flex-basis: auto; width: 100%; height: 200px; }
  .bf-featured-card::before, .bf-featured-card::after { display: none; }
}

/* ===== Genummerde processtappen — herbruikbaar patroon (juli 2026) =====
   Zet een platte proceslijst (bf-bullet-list bij "werkwijze/proces"-secties) om
   in genummerde kaarten. Markup:
     <div class="bf-proces-steps">
       <div class="bf-proces-step"><span class="bf-proces-num">1</span><h3>Titel</h3><p>omschrijving</p></div>
       ...
       <div class="bf-proces-step bf-proces-finish"><span class="bf-proces-num">6</span><h3>Slotstap</h3></div>
     </div>
   .bf-proces-finish = navy afsluit-kaart met oranje badge (de payoff). Copy blijft
   1-op-1 (vet kopwoord -> h3, rest -> p). 3 kolommen desktop, 1 op mobiel. */
.bf-proces-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; }
/* Volgt er een afsluitende alinea direct op de kaarten, dan plakt die zonder deze regel
   tegen de onderrand aan: het component heeft zelf geen ondermarge en een <p> begint met
   margin-top 0. Alleen van toepassing op een <p> die er DIRECT op volgt; overal elders
   volgt een kop of een nieuwe sectie, en die brengen hun eigen ruimte mee. (juli 2026) */
.bf-proces-steps + p,
.bf-proces-steps-4 + p { margin-top: 30px; }
.bf-proces-step {
  position: relative; background: #fff; border: 1px solid rgba(16,26,34,.10);
  border-radius: 18px; padding: 34px 26px 26px;
  transition: transform .22s, box-shadow .22s, border-color .22s;
}
.bf-proces-step:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(16,26,34,.10); border-color: var(--bf-primary); }
.bf-proces-step .bf-proces-num {
  position: absolute; top: -22px; left: 26px; width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 20px; color: #fff;
  background: linear-gradient(135deg, var(--bf-primary-light), var(--bf-primary));
  box-shadow: 0 8px 20px rgba(0,161,198,.38);
}
.bf-proces-step h3 { color: var(--bf-dark); font-weight: 900; font-size: 17px; margin: 14px 0 8px; line-height: 1.25; }
.bf-proces-step p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--bf-text); }
.bf-proces-step p a { color: var(--bf-primary); text-decoration: underline; text-underline-offset: 2px; }
.bf-proces-step.bf-proces-finish { background: linear-gradient(160deg, #12212e, var(--bf-dark)); border-color: transparent; }
.bf-proces-step.bf-proces-finish .bf-proces-num { background: linear-gradient(135deg, #ffcf4d, var(--bf-accent)); box-shadow: 0 8px 20px rgba(255,182,0,.4); color: var(--bf-dark); }
.bf-proces-step.bf-proces-finish h3 { color: #fff; }
.bf-proces-step.bf-proces-finish p { color: #c7d2dc; }
@media (max-width: 820px) { .bf-proces-steps { grid-template-columns: 1fr; } }
/* 4-koloms variant (bv. moniflow "Wat gebeurt er op de achtergrond?" — 4 stappen).
   Eigen grid + breakpoints; deelt de .bf-proces-step kaartstijl (parent-onafhankelijk). */
.bf-proces-steps-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 34px; }
@media (max-width: 1000px) { .bf-proces-steps-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .bf-proces-steps-4 { grid-template-columns: 1fr; } }

/* ===== Mobiele overflow-hardening (juli 2026, na de site-brede overflow-audit) ===== */

/* .row.g-5 (alleen moniflow/over-ons/quickscan) heeft een 3rem horizontale gutter waarvan
   de negatieve marge ~4px voorbij de container-rand steekt op smalle schermen. De kolommen
   zijn col-lg-* en stapelen onder de lg-breakpoint tot één kolom, dus de horizontale gutter
   is daar tóch onzichtbaar. Terug naar de Bootstrap-standaard (1.5rem) zodat de marge exact
   in de container-padding valt -> geen overflow meer. Verticale gutter (rij-afstand) blijft. */
@media (max-width: 991.98px) {
  .row.g-5 { --bs-gutter-x: 1.5rem; }
}

/* Sticky-widget-paneel is position:absolute; right:54px; width:320px (rechts verankerd, groeit
   naar links). Als het op een smal scherm zou openen (iOS tap-to-hover), klipt ~54px aan de
   LINKERkant. Cap de breedte viewport-relatief zodat het paneel altijd binnen beeld blijft met
   een kleine linkermarge. Op desktop (>=992px) bijt deze cap niet -> paneel blijft 320px.
   (max-width:100% zou hier fout zijn: dat refereert aan de ~39px widget-container.) */
@media (max-width: 991.98px) {
  .bf-sticky-panel { max-width: calc(100vw - 68px); }
}

/* ===== Stat-tiles + uitgelicht cijfer (juli 2026) =====
   Surft cijfers uit vloeitekst naar scanbare tegels. Eerst toegepast op
   blog-houtje-touwtje-werkwijze (probleem-cijfers + uitgelichte besparing).
   Kaartstijl volgt de ingebakken vormgeving (rand, radius, schaduw); tegels zijn
   statisch (geen hover-lift, want het zijn geen klikbare kaarten). Kleuren via tokens. */
.bf-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 30px;
}
.bf-stat {
  background: #fff;
  border: 1px solid rgba(16,26,34,.10);
  border-radius: 18px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 14px 40px rgba(16,26,34,.05);
}
.bf-stat-num {
  display: block;
  font-family: 'Exo', sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 5vw, 46px);
  line-height: 1;
  color: var(--bf-primary);
  letter-spacing: -0.5px;
}
.bf-stat-label {
  display: block;
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--bf-text);
}
@media (max-width: 560px) {
  .bf-stats { grid-template-columns: 1fr; gap: 16px; }
}

/* Eén uitgelicht payoff-cijfer (bv. de jaarlijkse besparing). Breed kaartje met
   een cyaan accent-rand links; groot cijfer + eenheid naast de context-tekst. */
.bf-stat-highlight {
  display: flex;
  align-items: center;
  gap: 34px;
  background: var(--bf-surface);
  border: 1px solid rgba(16,26,34,.10);
  border-radius: 18px;
  padding: 32px 36px;
  margin-top: 8px;
  box-shadow: 0 18px 50px rgba(16,26,34,.06);
}
.bf-stat-highlight-figure { flex: 0 0 auto; min-width: 200px; text-align: center; }
.bf-stat-highlight-num {
  display: block;
  font-family: 'Exo', sans-serif;
  font-weight: 900;
  font-size: clamp(42px, 6vw, 60px);
  line-height: 1;
  color: var(--bf-primary);
  letter-spacing: -1px;
}
.bf-stat-highlight-unit {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--bf-muted);
}
.bf-stat-highlight-body { margin: 0; color: var(--bf-text); }
@media (max-width: 700px) {
  .bf-stat-highlight { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 24px; }
  .bf-stat-highlight-figure { min-width: 0; text-align: left; }
}

/* ===== Inline CTA-callout (juli 2026) =====
   Laat een losse actiezin 'poppen' als een kadertje met knop i.p.v. platte tekst.
   Werkt op lichte én donkere secties (zie .bf-section-dark-override hieronder).
   Eerst toegepast op blog-verborgen-kosten-inefficientie (QuickScan in de donkere sectie). */
.bf-inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  margin-top: 26px;
  padding: 22px 28px;
  border-radius: 16px;
  background: var(--bf-surface);
  border: 1px solid rgba(16,26,34,.10);
}
.bf-inline-cta p { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--bf-dark); }
.bf-inline-cta .bf-btn-accent { flex: 0 0 auto; white-space: nowrap; color: #fff; }
/* Op donkere secties: subtiel licht paneel + witte tekst zodat het contrasteert. */
.bf-section-dark .bf-inline-cta { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.bf-section-dark .bf-inline-cta p { color: #fff; }
@media (max-width: 575px) {
  .bf-inline-cta { padding: 20px 22px; }
  .bf-inline-cta .bf-btn-accent { width: 100%; text-align: center; }
}

/* ===== Wijspijl: tekstregel die naar de kaarten ernaast/eronder wijst =====
   In gebruik op index ("Dat doen wij met deze diensten."), maatwerk ("Zo ziet dat
   proces eruit.") en over-ons ("Dat levert de volgende voordelen op."). De pijl wijst
   naar rechts op desktop (kaarten staan ernaast) en omlaag op mobiel (kaarten staan
   eronder). Dikkere lijn (stroke 2.6) in de stijl van de scroll-top-knop + zachte
   nudge-lus. Stond eerder 3x page-scoped gedupliceerd als .bf-diensten-arrow; die
   naam dekte de lading niet meer (proces/voordelen), vandaar één component hier
   onder een neutrale naam (juli 2026). NIET terug naar page-scoped kopieën. */
.bf-wijspijl { display: inline-flex; align-items: center; margin-left: 8px; vertical-align: middle; color: var(--bf-primary); }
.bf-wijspijl .bf-arrow-down { display: none; }
.bf-wijspijl .bf-arrow-right { animation: bfNudgeX 1.5s ease-in-out infinite; }
@media (max-width: 991.98px) {
  .bf-wijspijl .bf-arrow-right { display: none; }
  .bf-wijspijl .bf-arrow-down { display: inline-block; animation: bfNudgeY 1.5s ease-in-out infinite; }
}
@keyframes bfNudgeX { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes bfNudgeY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .bf-wijspijl .bf-arrow-right,
  .bf-wijspijl .bf-arrow-down { animation: none; }
}

/* Spatiëring van de wijsregel in de werkwijze-secties (maatwerk + over-ons).
   Op maatwerk volgt de regel direct op .ww-anchor-text, waarvan de <p>'s margin:0
   hebben -> daar is ~22px lucht erboven nodig. Op over-ons volgt hij op een gewone
   .bf-section-text (margin-bottom:25px), die levert de tussenruimte al. Structureel
   opgelost met de +-combinator, zodat geen van beide pagina's eigen CSS nodig heeft.
   LET OP de element-prefix `p`: zonder die prefix (0,1,0) verliest de regel van
   `.bf-section p { margin-bottom: 25px }` (0,1,1) en houdt de wijsregel 25px lucht
   onder zich. `p.bf-ww-wijs` is óók 0,1,1 en staat later in dit bestand, dus wint.
   De oude page-scoped variant won via `#werkwijze`; niet terug naar !important. */
p.bf-ww-wijs { margin-bottom: 0; }
.ww-anchor-text + p.bf-ww-wijs { margin-top: 22px; }

/* ===== Projectdetailpagina's (juli 2026, na de ontwerpreview van de PMR-pagina) ===== */

/* LEESMAAT: bewust NIET beperkt. Een max-width van 760px (~80 tekens per regel) is
   geprobeerd op de PMR-pagina, maar door de opdrachtgever teruggedraaid juli 2026: de
   lopende tekst loopt over de volle container, gelijk aan alle andere pagina's. Niet
   opnieuw invoeren zonder overleg. */

/* PROJECT-META: drie kolommen i.p.v. drie gestapelde regels (het projecttemplate
   schrijft 3 kolommen voor). Geen markup-wijziging nodig: .bf-project-meta is de
   container zelf en heeft precies de 3 <p>'s als kinderen (gemeten op alle 7 pagina's). */
.bf-project-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 32px; }
.bf-project-meta p { margin-bottom: 0; }
@media (max-width: 767.98px) {
  .bf-project-meta { grid-template-columns: 1fr; gap: 4px; }
}

/* SCHETS: klad-visual (foto van een handgetekende schets) op een projectpagina. Iets
   breder dan de leesmaat als hij los in de tekst staat. */
.bf-schets { margin: 28px 0 0; max-width: 860px; }
.bf-schets img { width: 100%; height: auto; display: block; border-radius: 16px; }
/* In een twee-koloms row vult de schets de kolom en lijnt hij bovenaan uit met de
   eerste tekstregel ernaast (geen bovenmarge, geen eigen max-width). */
[class*="col-"] > .bf-schets { margin: 0; max-width: 100%; }

/* ===== Projectkaart: "Bekijk project"-knop (juli 2026) =====
   De projectkaart was de enige klikbare kaart zonder afsluitende knop, terwijl
   de nieuwskaart (203x) er wel een heeft. De kaart is helemaal een <a>, dus de
   knop is de affordance die verklapt dat er iets achter zit; op touch is er
   geen hover-lift die dat doet. Zelfde opmaak als .bf-news-card .bf-card-link.
   De kaart wordt hiervoor een flex-kolom zodat margin-top:auto de knop naar
   onderen duwt en alle kaarten in een rij op dezelfde hoogte afsluiten. */
.project-card {
  display: flex;
  flex-direction: column;
}
.project-card .bf-card-link {
  align-self: flex-start;
  margin: auto 24px 20px;
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--bf-text);
  border: 1px solid var(--bf-text);
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  display: inline-block;
  transition: all var(--bf-transition);
}
.project-card .bf-card-link:hover {
  background: var(--bf-text);
  color: #fff;
}