/* BuroGeel, alle opmaak. Zie style.css voor de themagegevens.
   LET OP: het nummer in de bestandsnaam is de cachesleutel. Wijzig je dit
   bestand, hernoem het dan naar burogeel-14.css en pas functions.php aan.
   De cache van TransIP negeert ?ver= bij statische bestanden, dus een nieuw
   versienummer in de URL is niet genoeg. */


/* ==============================================================================
   TOKENS
   Kleuren en maten zijn uitgemeten op de live Wix-site bij een venster van
   1440 px. De vlakken zijn daar absoluut gepositioneerd; hier zijn ze omgezet
   naar percentages, zodat dezelfde compositie meeschaalt.
   ============================================================================ */
:root {
  --bg-navy: #162741;
  --bg-navy-zacht: #324158;      /* subtitel op dienstpagina's */
  --bg-navy-70: rgba(22, 39, 65, .68);
  --bg-geel: #ffe014;
  --bg-creme: #f6ebe4;
  --bg-grijs: #e8e6e6;           /* grote vlakken */
  --bg-grijs-2: #dbdbdb;         /* kaarten */
  --bg-tekst: #212121;
  --bg-wit: #fff;

  --bg-font-kop: 'Bricolage Grotesque', 'Archivo', 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --bg-font-body: 'Quicksand', 'Trebuchet MS', Arial, sans-serif;

  --bg-t-h1: clamp(1.75rem, 1.15rem + 1.6vw, 2.375rem);   /* 38px */
  --bg-t-h2: clamp(1.5rem, 1.05rem + 1.4vw, 2.25rem);     /* 36px */
  --bg-t-h3: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --bg-t-sub: clamp(1.0625rem, 1rem + .3vw, 1.25rem);     /* 20px */
  --bg-t-body: 1rem;
  --bg-t-klein: .875rem;
  --bg-t-knop: .75rem;                                     /* 12px */

  --bg-r-1: .5rem;
  --bg-r-2: 1rem;
  --bg-r-3: 1.5rem;
  --bg-r-4: 2.5rem;
  --bg-r-5: 4rem;
  --bg-r-6: clamp(3.5rem, 7vw, 6.5rem);

  --bg-max: 1306px;              /* levert 1258 px inhoud, gelijk aan Wix */
  --bg-pad: 24px;
  --bg-radius: 0;
  --bg-kader: 15px;              /* witte rand om beeld en tekstkaart */
  --bg-schaduw: 0 22px 44px -30px rgba(22, 39, 65, .45);
  --bg-transitie: 320ms cubic-bezier(.22, .61, .36, 1);

  /* Arcering. Op burogeel.nl zijn dit vier tekeningen van hetzelfde patroon,
     op twee schalen. Nagemeten in de SVG's: alle strepen lopen van linksonder
     naar rechtsboven (dus 135deg, niet 45deg), de fijne band heeft een lijn
     van 1,2 px met een steek van 26 px, de grove een lijn van 3,7 px met een
     steek van 67 px. De oude waarde, 3 px met 26 px steek, was zowel te dik
     als de verkeerde kant op. */
  --bg-geel-licht: #fffce8;      /* zeer lichte tint van het geel, voor vlakken */
  --bg-arcering: repeating-linear-gradient(135deg, var(--bg-geel) 0 1.5px, transparent 1.5px 26px);
  --bg-arcering-grof: repeating-linear-gradient(135deg, var(--bg-geel) 0 4px, transparent 4px 67px);
}

/* ============================================================== RESET ==== */
*, *::before, *::after { box-sizing: border-box; }
/* Geen overflow op html of body. Safari laat position:sticky stuklopen zodra
   een voorouder overflow heeft, en dat was precies waarom de kop daar bij het
   scrollen half werd afgekapt. Het afkappen van de uitlopende vlakken gebeurt
   nu op main en footer, die geen voorouder van de kop zijn. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg-wit);
  color: var(--bg-tekst);
  font-family: var(--bg-font-body);
  font-size: var(--bg-t-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--bg-geel); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--bg-geel); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--bg-font-kop);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.005em;
  color: var(--bg-navy);
  margin: 0 0 var(--bg-r-3);
  text-wrap: balance;
}
h1 { font-size: var(--bg-t-h1); }
h2 { font-size: var(--bg-t-h2); }
h3 { font-size: var(--bg-t-h3); }
p { margin: 0 0 var(--bg-r-2); }
strong { font-weight: 700; }

/* De gele punt achter BuroGeel, zoals in het logo en in de H1. */
.bg-punt { color: var(--bg-geel); }
.bg-accent { color: var(--bg-geel); }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.bg-skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--bg-geel); color: var(--bg-navy); padding: var(--bg-r-2); }
.bg-skip:focus { left: var(--bg-r-2); }

/* ============================================================== LAYOUT == */
main, .bg-slot, .bg-balk { overflow-x: clip; }
.bg-wrap { max-width: var(--bg-max); margin-inline: auto; padding-inline: var(--bg-pad); }
@media (max-width: 900px) { :root { --bg-pad: 20px; } }

/* Elke sectie is volle breedte; de gekleurde vlakken zitten erin als
   absoluut gepositioneerde laag, precies zoals op de Wix-site. */
.bg-sectie { position: relative; isolation: isolate; padding-block: var(--bg-r-6); }
.bg-sectie > .bg-wrap, .bg-sectie > * { position: relative; z-index: 1; }
.bg-sectie::before { content: ""; position: absolute; z-index: 0; }

/* Twaalfkoloms raster binnen de wrap: hiermee laten we beeld en tekstkaart
   over elkaar heen vallen zonder absolute pixels. */
/* minmax(0, 1fr) en niet 1fr: met 1fr mag een kolom groeien tot de breedte van
   zijn inhoud, en dan loopt het raster op mobiel buiten het scherm. */
.bg-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }

/*
 * WordPress geeft elk blok binnen een groep een margin-block-start van 24 px,
 * behalve het eerste. Binnen een raster of een rij duwt dat het tweede en
 * volgende blok 24 px omlaag, en dan staat een kop niet meer gelijk met de
 * foto ernaast en verspringen de gele streepjes boven de stappen. Hier zetten
 * we die marge terug op nul, vóór de secties hieronder, zodat een sectie er
 * daarna alsnog een eigen marge overheen kan zetten.
 */
.bg-raster > *,
.bg-stappen > *,
.bg-logowall > *,
.bg-quotes > *,
.bg-knoprij > * { margin-block-start: 0; margin-block-end: 0; min-width: 0; }

/* ============================================================ ARCERING == */
/* De gele diagonalen zitten als ::after op de sectie, dus zonder extra
   markup. Positie en richting staan per sectie hieronder. */
.bg-sectie::after { content: ""; position: absolute; z-index: 0; pointer-events: none; display: none; }
.bg-arcering { position: absolute; z-index: 0; pointer-events: none; background-image: var(--bg-arcering); }
.bg-arcering--grof { background-image: var(--bg-arcering-grof); }
@media (max-width: 900px) { .bg-arcering, .bg-sectie::after { display: none !important; } }

/* ============================================================== HEADER == */
/* De kop houdt bewust een vaste hoogte. Eerder kromp hij bij het scrollen,
   waardoor het logo versprong en je een halve balk zag op het moment dat het
   navy vlak van de hero er net onderdoor schoof. */
/* Safari en de kop: position:sticky eruit, position:fixed erin.
 *
 * De kop stond vastgeplakt met position:sticky. In Safari liep de witte balk
 * tijdens het scrollen uit de pas met het logo en het menu erin: de balk werd
 * op de oude plek getekend terwijl de inhoud al op de nieuwe stond. Zo brak
 * het logo af en stond het menu niet meer midden in het wit. Het promoveren
 * naar een eigen laag (translateZ) hielp niet en maakte het waarschijnlijk
 * erger, want juist dan tekent Safari de achtergrond apart.
 *
 * Een vaste kop kent dat probleem niet: er valt tijdens het scrollen niets te
 * herberekenen, de kop staat altijd op dezelfde plek. Omdat hij daarmee uit de
 * pagina-opbouw valt, vangt body een bovenmarge van 85 px op. De hero begint
 * daardoor nog steeds op 85, precies zoals op burogeel.nl.
 */
.bg-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: var(--bg-wit);
  height: 85px;
  padding-block: 9px;
  display: flex; align-items: center;
}
.bg-header__inner { flex: 1 1 auto; }
/* De hoogte staat op de AFBEELDING, niet op een voorouder. WordPress zet het
   logo neer als <span class="bg-logo"><a class="custom-logo-link"><img
   class="custom-logo" width="726" height="217">. Een hoogte van 100% rekent
   dus tegen die <a> aan, en die heeft geen hoogte, waardoor de afbeelding
   terugviel op zijn eigen 217 px en het logo drie keer te groot werd. Met een
   maximum op de afbeelding zelf kan dat niet gebeuren, ongeacht welk bestand
   er in WordPress staat. */
.bg-logo { flex: none; }
.bg-logo a { display: inline-flex; }
.bg-logo img, .bg-logo .custom-logo { max-height: 67px; width: auto; height: auto; }
body { padding-top: 85px; }
html { scroll-padding-top: 85px; }
.admin-bar .bg-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .bg-header { top: 46px; } }
.bg-header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 26px;
  pointer-events: none; opacity: 0;
  background: linear-gradient(rgba(22, 39, 65, .16), rgba(22, 39, 65, 0));
  transition: opacity var(--bg-transitie);
}
.bg-header.is-klein::after { opacity: 1; }
.bg-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--bg-r-3); }

.bg-logo { display: inline-flex; align-items: center; text-decoration: none; }
.bg-logo__tekst { font-family: var(--bg-font-kop); font-size: 1.75rem; font-weight: 700; color: var(--bg-navy); letter-spacing: -.02em; }
.bg-logo__tekst .bg-buro { color: var(--bg-geel); }

/* Menu: vier items, klein, navy, met gele onderstreping die uitschuift. */
.bg-nav > ul { display: flex; gap: clamp(1.25rem, 3.4vw, 3.4rem); list-style: none; margin: 0; padding: 0; }
.bg-nav li { position: relative; }
.bg-nav a {
  display: block; text-decoration: none; font-size: var(--bg-t-klein);
  color: var(--bg-navy); padding-block: 6px; white-space: nowrap;
}
.bg-nav > ul > li > a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--bg-geel); transition: right var(--bg-transitie);
}
.bg-nav > ul > li > a:hover::after,
.bg-nav > ul > li.current-menu-item > a::after,
.bg-nav > ul > li.current-menu-ancestor > a::after { right: 0; }

/* Uitklap onder "teksten laten schrijven". */
.bg-nav ul ul {
  position: absolute; top: 100%; left: -18px; min-width: 250px;
  list-style: none; margin: 0; padding: 10px 0;
  background: var(--bg-wit); box-shadow: 0 18px 36px -22px rgba(22, 39, 65, .6);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}
.bg-nav li:hover > ul, .bg-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
/* Eén gele lijn, niet twee. Het uitklapmenu had zelf ook een gele bovenrand;
   die zat direct onder de gele streep van het hoofditem en las als een dubbele
   lijn. Nu geeft alleen het hoofditem de gele markering. */
.bg-nav > ul > li:focus-within > a::after { right: 0; }
.bg-nav ul ul a { padding: 8px 18px; }
.bg-nav ul ul a:hover { background: var(--bg-grijs); }

.bg-nav-toggle { display: none; background: none; border: 0; padding: 8px; font: inherit; cursor: pointer; color: var(--bg-navy); }
@media (max-width: 900px) {
  .bg-nav-toggle { display: block; }
  .bg-nav { position: absolute; inset: 100% 0 auto; background: var(--bg-wit); box-shadow: 0 18px 30px -24px rgba(22,39,65,.6); }
  .bg-nav[hidden] { display: none; }
  .bg-nav > ul { flex-direction: column; gap: 0; padding: var(--bg-r-2) var(--bg-pad); }
  .bg-nav a { font-size: 1rem; padding-block: 10px; }
  .bg-nav ul ul { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-top: 0; padding: 0 0 0 18px; min-width: 0; }
}

/* ======================================================== HERO HOMEPAGE == */
/* Navy vlak rechts, foto eroverheen vanaf links, grijze tekstkaart bovenop.
 *
 * Alles hieronder is nagemeten in de DOM van burogeel.nl bij een venster van
 * 1440 px. De kolom van Wix is daar 980 px breed en staat op 230..1210. De
 * getallen zijn viewportcoordinaten, met de bovenkant van de hero op 85:
 *
 *   navy vlak      20 .. 1420   x   85 .. 841   (dus 20 px marge links en
 *                                                rechts, volle hoogte hero)
 *   wit vlak links -224 .. 726  x   85 .. 841   (dekt het navy links af, het
 *                                                navy is dus zichtbaar vanaf
 *                                                726 = 50,4% van 1440)
 *   witte lijst     97 .. 950   x  143 .. 760   (853 x 617)
 *   foto           112 .. 935   x  158 .. 745   (823 x 587, lijst dus 15 px)
 *   tekstkaart     690 .. 1203  x  343 .. 682   (513 x 339, vlak grijs,
 *                                                geen witte rand, geen schaduw)
 *   H1             709 .. 1099  x  400 .. 588   (38 px, dus 19 px vanaf de
 *                                                linkerrand van de kaart en
 *                                                57 px vanaf de bovenkant)
 *   arcering      -140 .. 689   x  700 .. 841   (829 x 141, loopt links het
 *                                                beeld uit en stopt 37 px
 *                                                voor het navy vlak)
 *
 * Ten opzichte van de bovenkant van de hero: lijst begint op 58, foto op 73,
 * kaart op 258, arcering op 615, hero eindigt op 757.
 */
.bg-hero--home { padding-block: 0 82px; }
.bg-hero--home::before { inset: 0 20px 0 50.4%; background: var(--bg-navy); }
.bg-hero--home .bg-raster { padding-top: 58px; }

/* Procentmarges op een rasteritem rekenen met de breedte van het VAK, niet van
   de container. Kolom 1 t/m 8 is 838,7 px bij 1440, dus .715% is 6 px en
   2,42% is 20 px. Daarmee komt de witte lijst op 97..950 uit. */
.bg-hero__beeld {
  grid-column: 1 / 9; grid-row: 1; z-index: 1;
  margin: 0 -2.42% 0 .715%;
  background: var(--bg-wit);
  padding: var(--bg-kader);
}
.bg-hero__beeld img { width: 100%; aspect-ratio: 823 / 587; object-fit: cover; }

/* Kolom 7 t/m 11 is 720..1244 bij 1440. De kaart moet op 690..1203 staan, dus
   30 px naar links en 41 px smaller: -5,7% en 7,8% van 524 px. */
.bg-hero__kaart {
  grid-column: 7 / 12; grid-row: 1; z-index: 2;
  margin: 200px 7.8% 0 -5.7%;
  background: var(--bg-grijs);
  padding: 57px 24px 94px 19px;
}
.bg-hero__kaart h1 { margin: 0; max-width: 390px; }  /* op burogeel.nl breekt de H1 binnen 390 px */
.bg-hero__kaart p { margin: var(--bg-r-2) 0 0; }

/* Brede arceringsband linksonder. Loopt links het beeld uit en stopt net voor
   het navy vlak; de onderkant ligt gelijk met de onderkant van het navy. */
.bg-hero--home::after {
  display: block; background-image: var(--bg-arcering);
  left: -10%; right: 52.2%; bottom: 1px; height: 141px; width: auto;
}

@media (max-width: 900px) {
  .bg-hero--home { padding-block: 0 34px; }
  /* Navy over de hele hero. Foto en kaart liggen daar als twee gecentreerde
     vlakken op. De harde waarden staan verderop in het MOBIEL-blok. */
  .bg-hero--home::before { inset: 0; }
  .bg-hero--home .bg-raster { padding-top: 30px; }
  .bg-hero__beeld { grid-column: 1 / 13; margin: 0; padding: 10px; }
  .bg-hero__kaart {
    grid-column: 1 / 13; grid-row: 2;
    margin: -84px 40px 0; padding: 28px 20px 32px;
  }
  .bg-hero__kaart h1 { max-width: none; }
}

/* ==================================================== HERO DIENSTPAGINA == */
/* Grijs vlak over de volle inhoudsbreedte, foto links in witte lijst,
   H1 met subtitel en intro rechts. */
.bg-hero--dienst { padding-block: 20px 0; }
.bg-hero--dienst .bg-vlak { background: var(--bg-grijs); padding: 50px 34px 34px; }
/* De bovenkant van de kop ligt op één lijn met de bovenkant van de foto
   ernaast. De foto heeft een witte lijst van 15 px, dus de tekstkolom krijgt
   diezelfde 15 px als bovenmarge; verder zorgt de negatieve marge ervoor dat
   de optische bovenkant van de letters klopt in plaats van de regelhoogte. */
.bg-hero--dienst .bg-raster { gap: var(--bg-r-4); align-items: start; }
.bg-hero__tekst { padding-top: calc(var(--bg-kader) - .28em); }
.bg-hero__foto { grid-column: 1 / 7; margin: 0; background: var(--bg-wit); padding: var(--bg-kader); }
.bg-hero__foto img { width: 100%; aspect-ratio: 611 / 397; object-fit: cover; }
.bg-hero__tekst { grid-column: 7 / 13; }
.bg-hero__tekst h1 { margin: 0 0 var(--bg-r-1); }
.bg-hero__sub {
  font-family: var(--bg-font-kop); font-size: var(--bg-t-sub);
  color: var(--bg-navy-zacht); letter-spacing: .06em; line-height: 1.3;
  margin: 0 0 var(--bg-r-3); max-width: 30ch;
}
.bg-hero__tekst p { color: var(--bg-navy); max-width: 46ch; }
.bg-hero--dienst::after {
  display: block; background-image: var(--bg-arcering-grof);
  right: 0; bottom: -70px; width: 486px; height: 340px;
}
@media (max-width: 900px) {
  .bg-hero__foto, .bg-hero__tekst { grid-column: 1 / 13; }
  .bg-hero--dienst .bg-vlak { padding: 24px; }
}

/* =========================================== SECTIE: NAVY MET TEKSTKAART = */
/* Homepage, blok "Teksten laten schrijven": navy loopt links van het scherm
   af en stopt rechts 10% voor de rand. */
.bg-sectie--intro { color: var(--bg-wit); padding-block: 50px 96px; margin-top: 26px; }
.bg-sectie--intro::before { inset: 0 10% 0 -20px; background: var(--bg-navy); }
.bg-sectie--intro h2, .bg-sectie--intro h3 { color: var(--bg-wit); }
.bg-sectie--intro .bg-raster { gap: var(--bg-r-4); }
.bg-sectie--intro__tekst { grid-column: 2 / 7; }
.bg-sectie--intro__tekst p { line-height: 1.55; margin-bottom: var(--bg-r-3); }
.bg-sectie--intro__tekst a { color: var(--bg-wit); text-decoration-color: var(--bg-geel); }

.bg-kaart-grijs {
  grid-column: 7 / 12;
  background: var(--bg-grijs);
  /* Op burogeel.nl ligt de foto niet tegen de rand maar 30 px binnen de kaart:
     kaart 748..1236 en 935..1465, foto 778..1205 en 965..1167. Daarom een
     rondlopende binnenmarge in plaats van alleen marge op de tekst. */
  padding: 30px 30px var(--bg-r-4);
  color: var(--bg-tekst);
}
.bg-kaart-grijs .wp-block-image, .bg-kaart-grijs figure { margin: 0 0 var(--bg-r-2); }
.bg-kaart-grijs img { width: 100%; aspect-ratio: 427 / 202; object-fit: cover; }
.bg-kaart-grijs h2, .bg-kaart-grijs h3 { padding-inline: 0; color: var(--bg-navy); }
.bg-kaart-grijs ul { padding-inline: 0; }
.bg-kaart-grijs li { color: var(--bg-navy); }
@media (max-width: 900px) {
  .bg-sectie--intro::before { inset: 0 0 0 0; }
  .bg-sectie--intro__tekst, .bg-kaart-grijs { grid-column: 1 / 13; }
}

/* ============================================================= UITSNEDE == */
/*
 * Op burogeel.nl staat bij elke foto een uitsnede in de URL, bijvoorbeeld
 * crop/x_0,y_596,w_1000,h_729. Bij de import is de hele foto meegekomen, en dan
 * knipt de opmaak zelf, standaard precies uit het midden. Op de foto's die
 * staand zijn en liggend getoond worden, scheelt dat flink: je kreeg meer
 * plafond en lamp dan persoon, of het hoofd viel er helemaal buiten.
 *
 * Per foto is uit de oude URL de zichtbare band uitgerekend en teruggerekend
 * naar object-position. De formule: bij object-fit: cover is het zichtbare deel
 * van de hoogte gelijk aan (breedte/hoogte van de bron) gedeeld door die van het
 * vak, v; en object-position p laat de band lopen van p*(1-v) tot p*(1-v)+v.
 * Staat er 100%, dan lag de oude band nog lager dan wij kunnen halen: dan tonen
 * we het onderste deel, want daar zit de persoon.
 *
 * Foto                       bron        vak        band bij Wix   positie
 * home hero                  1000x1500   823x587    604-1317       77%
 * home grijze kaart          1000x667    427x202     94-568        50%
 * home over Marleen          1000x1499   622x657    417-1470       94%
 * over-mij portret           5464x8192   611x763   1432-8192      100%
 * webteksten waarom          5464x8192   425x509   1718-8192      100%
 * webteksten daarom          5213x7815   611x397   3018-6406       68%
 * blogs waarom               5464x8192   425x509    860-7333       52%
 * blogs daarom               5351x8022   611x534   3255-7931       97%
 * papier waarom              5405x8103   425x509   2140-7303      100%
 * papier daarom              5351x8022   611x534   3255-7931       97%
 *
 * De hero's van blogs en papier komen precies op 50% uit, dus die staan hier
 * niet: dat is de standaard.
 */
.bg-hero__beeld img { object-position: 50% 77%; }
.bg-sectie--over__beeld img { object-position: 50% 94%; }

/* Het portret op over-mij: Wix toonde een band van 83% van de hoogte, onderaan
   uitgelijnd. Zonder verhouding lieten wij de hele foto zien en werd hij te lang. */
.bg-sectie--verhaal .bg-beeld img { aspect-ratio: 611 / 763; object-fit: cover; object-position: 50% 100%; }

/*
 * De twee tweeluiken op een dienstpagina dragen allebei bg-sectie--daarom; het
 * tweede heeft er bg-sectie--omgekeerd bij. Zonder :not() raakt een regel voor
 * het eerste blok dus ook het tweede. Daar ging het eerder mis: het hoofd viel
 * bij 'daarom vraag je Marleen' en 'daarom laat je blogs schrijven' buiten beeld.
 */
.bg-sectie--daarom:not(.bg-sectie--omgekeerd) .bg-beeld img { object-position: 50% 100%; }
.pagina-blogs-laten-schrijven .bg-sectie--daarom:not(.bg-sectie--omgekeerd) .bg-beeld img { object-position: 50% 52%; }

.bg-sectie--omgekeerd .bg-beeld img { object-position: 50% 97%; }
.pagina-webteksten-laten-schrijven .bg-sectie--omgekeerd .bg-beeld img { object-position: 50% 68%; }

/* =============================================================== LIJST == */
.bg-lijst { list-style: none; padding: 0; margin: 0 0 var(--bg-r-3); }
/* Rond bolletje in het navy van het thema. De top is .85em (de helft van de
   regelhoogte 1.7) min de halve bolletjeshoogte, zodat het bolletje precies
   op het midden van de eerste tekstregel staat, ook als die regel omloopt. */
.bg-lijst li { position: relative; padding-left: 1.6rem; margin-bottom: .55rem; line-height: 1.7; }
.bg-lijst--check li::before {
  content: ""; position: absolute; left: 1px;
  top: calc(.85em - 3.5px); width: 7px; height: 7px;
  border-radius: 50%; background: var(--bg-navy);
}
/* Op een navy ondergrond zou een navy bolletje wegvallen: daar geel. */
.bg-sectie--waarom .bg-lijst--check li::before { background: var(--bg-geel); }
.bg-sectie--intro .bg-lijst li { line-height: 1.55; }

/* ============================================================== KNOPPEN = */
/* Wix gebruikt twee vormen: omlijnd (homepage) en gevuld navy (dienstpagina's).
   Standaard is omlijnd; op een navy ondergrond wordt de lijn wit. */
.wp-block-button__link, .bg-knop-basis {
  display: inline-block;
  background: transparent; color: var(--bg-navy);
  border: 1px solid var(--bg-navy);
  font-family: var(--bg-font-body); font-weight: 700;
  font-size: var(--bg-t-knop); letter-spacing: .02em;
  text-decoration: none; text-align: center;
  padding: 12px 20px; min-width: 208px; border-radius: var(--bg-radius);
  transition: background var(--bg-transitie), color var(--bg-transitie), border-color var(--bg-transitie);
}
.wp-block-button__link:hover, .bg-knop-basis:hover { background: var(--bg-navy); color: var(--bg-wit); }

.bg-sectie--intro .wp-block-button__link,
.bg-sectie--quotes .wp-block-button__link,
.bg-sectie--cta .wp-block-button__link { color: var(--bg-wit); border-color: var(--bg-wit); }
.bg-sectie--intro .wp-block-button__link:hover,
.bg-sectie--quotes .wp-block-button__link:hover,
.bg-sectie--cta .wp-block-button__link:hover { background: var(--bg-geel); color: var(--bg-navy); border-color: var(--bg-geel); }

.bg-knop--gevuld .wp-block-button__link, .bg-knop-basis--gevuld {
  background: var(--bg-navy); color: var(--bg-wit);
}
.bg-knop--gevuld .wp-block-button__link:hover { background: var(--bg-geel); color: var(--bg-navy); border-color: var(--bg-geel); }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--bg-r-2); margin-top: var(--bg-r-3); }

/* ============================================================== KAARTEN = */
/* Drie grijze dienstkaarten, zonder foto, met de knop onderaan uitgelijnd. */
.bg-kaarten {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 944px; margin-inline: auto; margin-block: 0;
}
.bg-kaarten > .wp-block-column, .bg-kaarten > div {
  margin: 0 !important; background: var(--bg-grijs-2);
  padding: 34px 30px 30px; display: flex; flex-direction: column;
}
.bg-kaarten h3, .bg-kaarten .bg-kaart__kop { font-size: var(--bg-t-h2); margin-bottom: var(--bg-r-3); text-align: center; }
.bg-kaarten h3 a, .bg-kaarten .bg-kaart__kop a { text-decoration: none; }
.bg-kaarten p { color: var(--bg-tekst); margin-bottom: var(--bg-r-3); }
/* De knop vult de kaart, dat is het rustigste beeld bij drie kaarten naast
   elkaar met verschillende labels. */
.bg-kaarten .wp-block-buttons { margin-top: auto; }
.bg-kaarten .wp-block-button { flex: 1 1 100%; }
.bg-kaarten .wp-block-button__link { width: 100%; min-width: 0; }
@media (max-width: 900px) { .bg-kaarten { grid-template-columns: 1fr; max-width: 460px; } }

/* De drie kaarten schuiven met een negatieve marge onder het navy blok, zodat
   ze er visueel aan vastzitten. Zo staat het ook op burogeel.nl. */
.bg-sectie--diensten { padding-top: 0; margin-top: -56px; }
.bg-sectie--diensten .bg-wrap { position: relative; z-index: 2; }
/* Gele arceringsband achter de onderkant van de kaarten. */
.bg-sectie--diensten::after {
  display: block; background-image: var(--bg-arcering);
  left: 33%; right: 6%; bottom: 6px; height: 147px; z-index: 0;
}

/* De iconen boven de drie dienstkaarten staan als tekening in de opmaak en
   niet in de tekst. Zo blijft de pagina in de blokeditor schoon en hoeft er
   niets extra's geladen te worden. mask-image en niet background-image, zodat
   het icoon de themakleur aanneemt. */
.bg-kaart::before {
  content: ""; display: block; width: 52px; height: 52px;
  margin: 0 auto var(--bg-r-3); background: var(--bg-navy);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.bg-kaart--webteksten::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMiIgeT0iNCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjEzIiByeD0iMSIvPjxwYXRoIGQ9Ik0yIDhoMjBNOCAyMWg4TTEyIDE3djQiLz48Y2lyY2xlIGN4PSI0LjYiIGN5PSI2IiByPSIuNCIgZmlsbD0iYmxhY2siLz48Y2lyY2xlIGN4PSI2LjQiIGN5PSI2IiByPSIuNCIgZmlsbD0iYmxhY2siLz48L3N2Zz4="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMiIgeT0iNCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjEzIiByeD0iMSIvPjxwYXRoIGQ9Ik0yIDhoMjBNOCAyMWg4TTEyIDE3djQiLz48Y2lyY2xlIGN4PSI0LjYiIGN5PSI2IiByPSIuNCIgZmlsbD0iYmxhY2siLz48Y2lyY2xlIGN4PSI2LjQiIGN5PSI2IiByPSIuNCIgZmlsbD0iYmxhY2siLz48L3N2Zz4="); }
.bg-kaart--blogs::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgM2g5bDUgNXYxM0g1eiIvPjxwYXRoIGQ9Ik0xNCAzdjVoNSIvPjxwYXRoIGQ9Ik04LjUgMTIuNWg1TTguNSAxNmg3Ii8+PC9zdmc+"); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTUgM2g5bDUgNXYxM0g1eiIvPjxwYXRoIGQ9Ik0xNCAzdjVoNSIvPjxwYXRoIGQ9Ik04LjUgMTIuNWg1TTguNSAxNmg3Ii8+PC9zdmc+"); }
.bg-kaart--papier::before { -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyIDIuNiAxNSA3djExLjVMMTIgMjEuNCA5IDE4LjVWN3oiLz48cGF0aCBkPSJNOSA3aDZNMTIgMTB2NyIvPjwvc3ZnPg=="); mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTEyIDIuNiAxNSA3djExLjVMMTIgMjEuNCA5IDE4LjVWN3oiLz48cGF0aCBkPSJNOSA3aDZNMTIgMTB2NyIvPjwvc3ZnPg=="); }
.bg-sectie--diensten > .bg-wrap > h2 { text-align: center; margin-bottom: var(--bg-r-4); }

/* =============================================================== QUOTES = */
/* Navy vlak over de inhoudsbreedte: kop links, quotes rechts. */
.bg-sectie--quotes { color: var(--bg-wit); padding-block: 0; }
.bg-sectie--quotes .bg-vlak {
  /* Nagemeten op burogeel.nl bij 1440 px: navy 91..1348 en 2321..2719, kop op
     374 (283 px vanaf de linkerrand) en de quote op 625. De kop staat daar dus
     ingesprongen, niet tegen de rand.
     De kop staat nu verder naar links dan die 283 px, zodat er meer lucht komt
     tussen de kop en de quote ernaast. De quote zelf blijft op 622 staan. */
  background: var(--bg-navy); padding: 78px 60px 78px 8%;
  display: grid; grid-template-columns: minmax(180px, 430px) 1fr; gap: 0;
}
/* De kop blijft op twee regels breken, ook nu zijn kolom breder is. */
.bg-sectie--quotes h2 { color: var(--bg-wit); margin: 0; max-width: 260px; }
.bg-quotes { display: grid; gap: var(--bg-r-4); }
.bg-quotes__item p { color: var(--bg-creme); font-style: italic; margin-bottom: var(--bg-r-2); }
.bg-quotes__item cite, .bg-quotes__bron {
  display: block; font-style: normal; font-weight: 700; color: var(--bg-geel);
}

/* Groot geel aanhalingsteken boven de quote, als vorm en niet als letter.
   Als teken uit het lettertype valt hij per font anders uit; getekend blijft
   hij altijd hetzelfde. */
.bg-quotes__teken { display: block; width: 46px; height: 38px; margin-bottom: var(--bg-r-2); color: var(--bg-geel); }
.bg-quotes__teken svg { width: 100%; height: 100%; display: block; }

/* Draaicarrousel. Het script zet .is-carrousel zodra het draait; zonder script
   staan de quotes gewoon onder elkaar. De nieuwe quote schuift van rechts
   binnen terwijl de oude naar links vertrekt.
 *
 * De quotes stonden absoluut gepositioneerd in een blok met een vaste hoogte
 * van 250 px. Bij een lange quote liep de tekst dwars door de bolletjes en
 * kwam de naam eronder terecht. Ze staan nu alle drie in dezelfde rastercel:
 * de niet-actieve quotes zijn onzichtbaar maar houden hun plek, dus de rij is
 * altijd zo hoog als de langste quote en de bolletjes staan er altijd onder.
 * Geen vaste hoogte meer, en het blok springt evenmin bij het wisselen. */
/*
 * De quotes liggen op elkaar. Zonder meer zou het blok altijd zo hoog zijn als
 * de langste quote, en bij een korte quote hield je op de telefoon een half
 * scherm leeg navy over. Het script meet de zichtbare quote en zet de hoogte in
 * --bg-quote-h; die loopt hier zachtjes mee, dus het blok springt niet.
 * touch-action: pan-y houdt verticaal scrollen intact terwijl je opzij veegt.
 */
.bg-quotes.is-carrousel {
  display: block; position: relative;
  height: var(--bg-quote-h, auto);
  transition: height 420ms cubic-bezier(.22, .61, .36, 1);
  touch-action: pan-y;
}
.bg-quotes.is-carrousel .bg-quotes__teken { margin-bottom: var(--bg-r-2); }
.bg-quotes.is-carrousel .bg-quotes__item {
  position: absolute; inset: 58px 0 auto; margin: 0;
  opacity: 0; visibility: hidden; transform: translateX(40px);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(.22, .61, .36, 1), visibility 420ms;
}
.bg-quotes.is-carrousel .bg-quotes__item.is-actief { opacity: 1; visibility: visible; transform: none; }
.bg-quotes.is-carrousel .bg-quotes__item.gaat-weg { opacity: 0; visibility: visible; transform: translateX(-40px); }
.bg-quotes.is-carrousel .bg-quotes__bolletjes { position: absolute; bottom: 0; left: 0; }
@media (prefers-reduced-motion: reduce) {
  .bg-quotes.is-carrousel { transition: none; }
}
.bg-quotes__bolletjes { display: none; gap: 2px; margin-top: var(--bg-r-2); margin-left: -10px; }
.bg-quotes.is-carrousel .bg-quotes__bolletjes { display: flex; }
/* Het bolletje is 10 px, het aanraakvlak eromheen 34 px. */
.bg-quotes__bol {
  width: 34px; height: 34px; padding: 0; border: 0; background: none;
  cursor: pointer; display: grid; place-items: center;
}
.bg-quotes__bol::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--bg-wit); transition: background var(--bg-transitie);
}
.bg-quotes__bol[aria-current="true"]::before { background: var(--bg-geel); border-color: var(--bg-geel); }
@media (max-width: 900px) { .bg-sectie--quotes .bg-vlak { grid-template-columns: 1fr; padding: 40px 24px; gap: var(--bg-r-3); } }

.bg-quote { border: 0; margin: var(--bg-r-4) 0; padding-left: var(--bg-r-4); position: relative; }
.bg-quote::before { content: "\201C"; position: absolute; left: 0; top: -.15em; font-family: var(--bg-font-kop); font-size: 3.5rem; color: var(--bg-geel); line-height: 1; }
.bg-quote p { font-size: 1.125rem; line-height: 1.6; }
.bg-quote cite { display: block; font-style: normal; font-size: var(--bg-t-klein); color: var(--bg-navy-70); margin-top: var(--bg-r-1); }

/* ================================================== SECTIE OVER MARLEEN == */
/* Grijs vlak dat links van het scherm afloopt, foto eroverheen, tekst rechts,
   twee gele arceringen als tegenwicht. */
.bg-sectie--over { padding-block: var(--bg-r-6); }
.bg-sectie--over::before { inset: 56px auto 0 -14%; width: 65%; background: var(--bg-grijs); }
.bg-sectie--over .bg-raster { gap: var(--bg-r-4); }
.bg-sectie--over__tekst { padding-top: calc(var(--bg-kader) - .28em); }
.bg-sectie--over__beeld { grid-column: 1 / 7; margin: 0; z-index: 1; margin-left: -4%; }
.bg-sectie--over__beeld img { width: 100%; aspect-ratio: 622 / 657; object-fit: cover; background: var(--bg-wit); padding: var(--bg-kader); box-shadow: var(--bg-schaduw); }
.bg-sectie--over__tekst { grid-column: 8 / 13; }
/* Knop en LinkedIn-icoon op één regel. Ze komen uit twee losse blokken, dus
   de rij eromheen zet ze naast elkaar. */
.bg-knoprij { display: flex; align-items: center; gap: var(--bg-r-3); flex-wrap: wrap; }
.bg-knoprij .wp-block-buttons { margin-top: 0; }
.bg-knoprij p { margin: 0; }
/* LinkedIn krijgt dezelfde behandeling als de klantlogo's: rustig van kleur in
   ruststand, de eigen kleur bij mouseover. Eromheen een dunne lijn in dezelfde
   maat als de knop ernaast, zodat de twee als een paar lezen. */
/* Het LinkedIn-vak doet bij mouseover niets meer dan van kleur wisselen, en
 * dat gebeurt in een keer. Drie dingen staan hier bewust NIET:
 *
 * 1. geen opacity. Een SVG met een doorzichtigheid onder de 1 wordt door de
 *    browser eerst in een apart buffertje getekend en daarna over de pagina
 *    gelegd. Dat buffertje ligt op hele pixels, terwijl dit vak op 1080,16 px
 *    staat. Op het moment dat de doorzichtigheid precies 1 wordt, tekent de
 *    browser weer rechtstreeks en verspringt de tekening een fractie. Dat is
 *    het schokje dat je zag. De rusttoestand is nu een dekkende kleur:
 *    #616c7e is exact hetzelfde als het oude navy op 68% over wit.
 * 2. geen overgang. Op een lettervorm van 21 px verschuiven bij een
 *    kleurovergang de randpixels mee; nagemeten zijn dat er 44 die tijdens de
 *    overgang aan en uit gaan. Op een logo van de klantenwand valt dat niet
 *    op, want dat is een foto met een vaste pixelrooster. Op een getekende
 *    letter wel.
 * 3. geen text-decoration. Het blijft een link, dus hij erfde de gele
 *    onderstreping.
 */
.bg-linkedin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 47px; height: 47px; flex: none;
  border: 1px solid var(--bg-navy);
  color: #616c7e;
  text-decoration: none;
}
.bg-linkedin svg { width: 21px; height: 21px; display: block; }
.bg-linkedin:hover, .bg-linkedin:focus-visible { color: #0a66c2; border-color: #0a66c2; }
.bg-sectie--over::after {
  display: block; background-image: var(--bg-arcering-grof);
  left: 0; bottom: 0; width: 31%; height: 308px;
}
@media (max-width: 900px) {
  .bg-sectie--over::before { inset: 0 0 0 0; width: 100%; }
  .bg-sectie--over__beeld { grid-column: 1 / 13; margin-left: 0; }
  .bg-sectie--over__tekst { grid-column: 1 / 13; }
}

/* ================================================== TWEELUIK DIENSTPAGINA */
.bg-sectie--waarom { padding-block: 0; margin-top: 40px; }
.bg-sectie--waarom .bg-vlak { background: var(--bg-navy); color: var(--bg-wit); padding: 44px 60px; }
.bg-sectie--waarom h2, .bg-sectie--waarom h3 { color: var(--bg-wit); }
.bg-sectie--waarom .bg-lijst li { line-height: 1.6; }

.bg-sectie--daarom { padding-block: 0; margin-top: 40px; }
.bg-sectie--daarom .bg-vlak { background: var(--bg-grijs); padding: 40px; }
/* align-items: start en niet center. Met center zakte de foto in het blok
   'Daarom vraag je Marleen' ver naar beneden zodra de tekst ernaast langer
   werd dan het beeld. */
.bg-sectie--daarom .bg-raster { gap: var(--bg-r-4); align-items: start; }
.bg-sectie--daarom .bg-tweeluik__tekst { padding-top: calc(var(--bg-kader) - .28em); }
/* grid-row: 1 op allebei. Zonder die regel plaatst de browser het beeld op
   rij 2 zodra het in de opmaak NA de tekst staat maar in een kolom ervoor,
   en dan zakt de foto onder de tekst weg. Dat gebeurde in het blok 'Daarom
   vraag je Marleen'. */
.bg-sectie--daarom .bg-beeld { grid-column: 8 / 13; grid-row: 1; margin: 0; }
.bg-sectie--daarom .bg-tweeluik__tekst { grid-column: 1 / 8; grid-row: 1; }
.bg-sectie--daarom .bg-beeld img { width: 100%; aspect-ratio: 425 / 509; object-fit: cover; background: var(--bg-wit); padding: var(--bg-kader); }
/* Foto links, tekst rechts, en liggend in plaats van staand. Zo staat het
   blok 'Daarom vraag je Marleen' ook op burogeel.nl, als tegenhanger van het
   staande beeld in het blok erboven. */
.bg-sectie--omgekeerd .bg-beeld { grid-column: 1 / 7; grid-row: 1; }
.bg-sectie--omgekeerd .bg-tweeluik__tekst { grid-column: 7 / 13; grid-row: 1; }
/* Het omgekeerde tweeluik stond op burogeel.nl bij blogs en papier in een lager
   vak (611x534) dan bij webteksten (611x397). */
.bg-sectie--omgekeerd .bg-beeld img { aspect-ratio: 611 / 534; }
.pagina-webteksten-laten-schrijven .bg-sectie--omgekeerd .bg-beeld img { aspect-ratio: 611 / 397; }
@media (max-width: 900px) {
  .bg-sectie--daarom .bg-beeld, .bg-sectie--daarom .bg-tweeluik__tekst,
  .bg-sectie--omgekeerd .bg-beeld, .bg-sectie--omgekeerd .bg-tweeluik__tekst { grid-column: 1 / 13; }
  .bg-sectie--waarom .bg-vlak { padding: 28px 24px; }
  .bg-sectie--daarom .bg-vlak { padding: 24px; }
}

/* ================================================================ STAP == */
.bg-sectie--stappen { padding-block: 0; margin-top: 40px; }
.bg-sectie--stappen .bg-vlak { background: var(--bg-grijs); padding: 44px 60px; }
/* Alle stappen naast elkaar op één rij, zodat de gele streepjes erboven op
   dezelfde hoogte liggen. Met auto-fit vielen ze over twee rijen en verspron-
   gen de streepjes. Onder 1000 px gaat het naar twee kolommen. */
.bg-stappen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--bg-r-3); margin-top: var(--bg-r-4); }
.bg-stap { border-top: 3px solid var(--bg-geel); padding-top: var(--bg-r-2); }
/* Voluit uitgeschreven, want '.bg-stap p' hieronder is specifieker en zou
   het cijfer anders terugzetten naar 14 px. */
.bg-stap .bg-stap__nr { font-family: var(--bg-font-kop); font-size: 3.25rem; font-weight: 700; line-height: 1; color: var(--bg-navy); margin: 0 0 .3rem; }
@media (max-width: 1000px) { .bg-stappen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bg-stappen { grid-template-columns: minmax(0, 1fr); } }
.bg-stap__kop { font-size: 1.125rem; margin: var(--bg-r-1) 0; }
.bg-stap p { font-size: var(--bg-t-klein); line-height: 1.7; }
.bg-stappen__oproep { margin-top: var(--bg-r-5); }
.bg-stappen__oproep .bg-cta__tekst { font-family: var(--bg-font-kop); font-size: var(--bg-t-h3); max-width: 46ch; }
@media (max-width: 900px) { .bg-sectie--stappen .bg-vlak { padding: 28px 24px; } }

/* ================================================================= CTA == */
.bg-sectie--cta { padding-block: 0; margin-top: 40px; }
/* Staat het blauwe blok als laatste op de pagina, dan zit de gele contactbalk
   er direct tegenaan. Op /werk viel dat op omdat daar niets meer onder komt.
   Deze marge zet het blok los van de balk. */
.bg-pagina > .bg-sectie--cta:last-child { margin-bottom: 72px; }
/* Op /werk stond het blok ook erg laag: het casesoverzicht heeft zelf al 56px
   onderruimte en daar kwam de 40px van het blok bovenop. Samen 48px is genoeg. */
.pagina-werk .bg-sectie--cases { padding-bottom: 8px; }
.bg-sectie--cta .bg-vlak { background: var(--bg-navy); color: var(--bg-wit); padding: 54px 60px; text-align: center; }
.bg-sectie--cta h2 { color: var(--bg-wit); }
.bg-sectie--cta .bg-cta__tekst { font-family: var(--bg-font-kop); font-size: var(--bg-t-h3); max-width: 46ch; margin-inline: auto; }
.bg-sectie--cta .wp-block-buttons { justify-content: center; }
@media (max-width: 900px) { .bg-sectie--cta .bg-vlak { padding: 34px 24px; } }

/* =============================================================== VERHAAL */
/* Over-mij: grijs vlak met foto links en tekst rechts. */
.bg-sectie--verhaal { padding-block: 20px 0; }
.bg-sectie--verhaal .bg-vlak { background: var(--bg-grijs); padding: 50px 34px 34px; }
.bg-sectie--verhaal .bg-raster { gap: var(--bg-r-4); }
.bg-verhaal__tekst { padding-top: calc(var(--bg-kader) - .28em); }
.bg-sectie--verhaal .bg-beeld { grid-column: 1 / 7; margin: 0; background: var(--bg-wit); padding: var(--bg-kader); }
.bg-sectie--verhaal .bg-verhaal__tekst { grid-column: 7 / 13; }
.bg-sectie--verhaal .bg-verhaal__tekst p { color: var(--bg-navy); }
@media (max-width: 900px) {
  .bg-sectie--verhaal .bg-beeld, .bg-sectie--verhaal .bg-verhaal__tekst { grid-column: 1 / 13; }
  .bg-sectie--verhaal .bg-vlak { padding: 24px; }
}

/* =================================================== KOP ZONDER COMPOSITIE */
/* Werk en de losse tekstsecties: alleen een kop en tekst, geen vlak. */
.bg-hero--werk { padding-block: var(--bg-r-5) var(--bg-r-3); }
.bg-hero--werk p, .bg-sectie--tekst p { max-width: 68ch; }
.bg-sectie--tekst { padding-block: var(--bg-r-4); }

/* Case: grijs vlak met kruimelpad, kop en beeld. */
.bg-hero--case { padding-block: 20px 0; }
.bg-hero--case .bg-vlak { background: var(--bg-grijs); padding: 40px 34px 34px; }
.bg-case__kruimels { font-size: var(--bg-t-klein); margin-bottom: var(--bg-r-2); }
.bg-case__kruimels a { text-decoration: none; }
.bg-hero--case .bg-hero__beeld { margin: var(--bg-r-3) 0 0; background: var(--bg-wit); padding: var(--bg-kader); }
.bg-case .bg-sectie--tekst p, .bg-case .bg-sectie--tekst li { max-width: 68ch; }

/* =============================================================== CASES == */
.bg-sectie--cases { padding-block: var(--bg-r-4) var(--bg-r-6); }
.bg-filters {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--bg-r-4);
  padding: 20px 24px; list-style: none; background: var(--bg-grijs-2);
}
.bg-filter {
  background: var(--bg-wit); border: 1px solid transparent; cursor: pointer;
  font: inherit; font-size: var(--bg-t-klein); padding: .35em 1em; color: var(--bg-navy);
  transition: background var(--bg-transitie), color var(--bg-transitie);
}
.bg-filter[aria-pressed="true"] { background: var(--bg-navy); color: var(--bg-wit); }
.bg-filter:hover { background: var(--bg-geel); color: var(--bg-navy); }

.bg-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 21px 21px; list-style: none; margin: 0; padding: 0; }
.bg-case-kaart[hidden] { display: none; }
/*
 * De tegel toont het logo van de opdrachtgever in plaats van een sfeerfoto.
 * De foto's kwamen uit Wix, liepen in stijl uiteen en ontbraken bij de
 * nieuwste cases, waardoor de bovenste rij van /werk leeg stond. Logo's zijn
 * er van iedereen, dus het raster is nu altijd heel.
 *
 * Om te voorkomen dat zo'n logoraster als een zakelijke klantenlijst leest,
 * heeft het merkvlak een zeer lichte tint van het geel van de site en komt de
 * kaart bij hover omhoog met een zachte schaduw, waarbij het logo van licht
 * ontkleurd naar volle kleur gaat.
 *
 * Hier heeft ook een band gele arcering in het witte blok gestaan. Die is er
 * weer af: in combinatie met het geel las het geheel als een bouwhek.
 */
.bg-case-kaart a {
  text-decoration: none; display: flex; flex-direction: column; height: 100%;
  background: var(--bg-wit); border: 1px solid var(--bg-grijs);
  transition: transform var(--bg-transitie), box-shadow var(--bg-transitie), border-color var(--bg-transitie);
}
.bg-case-kaart a:hover { transform: translateY(-4px); box-shadow: var(--bg-schaduw); border-color: var(--bg-grijs-2); }

.bg-case-kaart__merk {
  background: var(--bg-geel-licht);
  display: flex; align-items: center; justify-content: center;
  padding: var(--bg-r-3); height: 150px;
}
/* Gelijke HOOGTE voor alle logo's, niet gelijke breedte. Bij te veel witruimte
   in een logobestand stel je het per case bij met het veld 'Logo-schaal'. */
.bg-case-kaart__merk img {
  height: calc(58px * var(--schaal, 1)); max-height: 84px; width: auto;
  max-width: calc(74% * var(--schaal, 1)); object-fit: contain;
  filter: grayscale(.35); opacity: .88;
  transition: filter var(--bg-transitie), opacity var(--bg-transitie);
}
.bg-case-kaart a:hover .bg-case-kaart__merk img { filter: grayscale(0); opacity: 1; }
.bg-case-kaart__merk--tekst span {
  font-family: var(--bg-font-kop); font-size: 1.0625rem; line-height: 1.3;
  color: var(--bg-navy-70); text-align: center; text-wrap: balance;
}

.bg-case-kaart__body { padding: 22px 24px 20px; flex: 1; display: flex; flex-direction: column; }
/* Wat er gemaakt is staat vooraan en groot, de klantnaam eronder in klein
   kapitaal. Het logo zegt al voor wie het was; de kop zegt wat het was. */
.bg-case-kaart__kop { font-size: 1.3125rem; line-height: 1.25; margin: 0 0 .4rem; text-wrap: balance; }
.bg-case-kaart a:hover .bg-case-kaart__kop {
  text-decoration: underline; text-decoration-color: var(--bg-geel);
  text-decoration-thickness: 3px; text-underline-offset: 3px;
}
.bg-case-kaart__klant {
  font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bg-navy-70); margin: 0 0 var(--bg-r-3); line-height: 1.5;
}
.bg-case-kaart__tags {
  font-size: var(--bg-t-klein); color: var(--bg-navy-70);
  margin: auto 0 0; padding-top: var(--bg-r-2);
  border-top: 1px solid var(--bg-grijs);
}
.bg-cases__leeg { grid-column: 1 / -1; }
@media (max-width: 1000px) { .bg-cases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .bg-cases { grid-template-columns: 1fr; } }

.bg-case__intro { font-size: 1.125rem; }
.bg-case__credit { font-size: var(--bg-t-klein); color: var(--bg-navy-70); }
.bg-case-gegevens {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--bg-r-3); margin: var(--bg-r-5) 0; padding: var(--bg-r-3) 0;
  border-top: 3px solid var(--bg-geel); border-bottom: 1px solid var(--bg-grijs);
}
.bg-case-gegevens dt { font-family: var(--bg-font-kop); font-size: var(--bg-t-klein); color: var(--bg-navy-70); }
.bg-case-gegevens dd { margin: .2rem 0 0; }

/* ============================================================== CONTACT == */
/*
 * Uitgemeten op burogeel.nl bij 1440 px, met een inhoudskolom van 1258 px
 * (91..1349):
 *   navy vlak        -304 .. 638   y  94 .. 788
 *   witte lijst foto   72 .. 785   y 150 .. 622   (foto 87..770, 165..607)
 *   gegevens          412 .. 580   y 234 .. 396   GEEN achtergrond
 *   plattegrond       175 .. 683   y 543 .. 840   grijze lijst van 5 px
 *   rechterkolom      813 .. 1209  kop op y 211
 *
 * Het belangrijkste verschil met de eerste opzet: de gegevens hebben daar geen
 * wit of grijs blok. Het is lichte tekst rechtstreeks op de foto.
 */
/* Onderaan stond ruim 100 px lucht onder het formulier. Daardoor liep de
   pagina net over de vouw en moest je een paar pixels scrollen voor niets.
   De contactpagina is bedoeld als een scherm: kop, gegevens, formulier. */
.bg-sectie--contact { padding-block: 8px 28px; }
.bg-sectie--contact::before { inset: 0 auto 12% -21%; width: 65%; background: var(--bg-navy); }
.bg-sectie--contact .bg-raster { gap: 0; }

/* Foto met witte lijst van 15 px, iets links van de inhoudskolom. */
.bg-contact__beeld {
  /* Let op: procentuele marges op een rasteronderdeel rekenen tegen de
     BREEDTE VAN HET VAK, niet tegen die van het hele raster. Vandaar deze
     ogenschijnlijk vreemde getallen; ze zijn teruggerekend uit de gemeten
     posities op burogeel.nl. */
  grid-column: 1 / 8; grid-row: 1; z-index: 1;
  margin: 56px 2.9% 0 -2.6%; background: var(--bg-wit); padding: var(--bg-kader);
}
.bg-contact__beeld img { width: 100%; aspect-ratio: 683 / 442; object-fit: cover; }

/* Gegevens over de foto, zonder blok eromheen. */
.bg-contact__gegevens {
  grid-column: 4 / 8; grid-row: 1; z-index: 3;
  margin-top: 85px; padding-right: var(--bg-r-2);
  color: var(--bg-wit);
  /* De foto is daar donker, maar niet overal even donker. Een lichte schaduw
     houdt de tekst leesbaar zonder dat je er een blok voor nodig hebt. */
  text-shadow: 0 1px 10px rgba(0, 0, 0, .55);
}
.bg-contact__gegevens .bg-gegevens__merk { color: var(--bg-wit); margin-bottom: var(--bg-r-3); }
.bg-contact__gegevens .bg-gegevens__merk span { color: var(--bg-wit); }
.bg-gegevens--opfoto { gap: .55rem; }
.bg-gegevens--opfoto li { color: #dbdbdb; font-size: var(--bg-t-klein); line-height: 1.5; }
.bg-gegevens--opfoto a { color: #dbdbdb; text-decoration-color: var(--bg-geel); }
.bg-gegevens--opfoto a:hover { color: var(--bg-wit); }
.bg-gegevens--opfoto .bg-gegevens__klein { color: #c8c8c8; }

/* Plattegrond in een grijze lijst, over de onderkant van de foto heen. */
.bg-contact__plattegrond {
  grid-column: 1 / 7; grid-row: 2; z-index: 2;
  margin: -196px 5.88% 0 13.35%; padding: 5px; background: var(--bg-grijs);
}
.bg-plattegrond { position: relative; aspect-ratio: 488 / 275; background: var(--bg-grijs-2); }
.bg-plattegrond iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bg-plattegrond__link { font-size: var(--bg-t-klein); margin: 0; }

/* Rechterkolom: kop, intro, formulier. */
.bg-contact__kolom { grid-column: 8 / 13; grid-row: 1 / 3; z-index: 2; padding-top: 24px; }
.bg-contact__kolom h1 { margin-bottom: var(--bg-r-3); }
.bg-contact__kolom p { font-size: var(--bg-t-klein); line-height: 1.6; max-width: 42ch; }
.bg-contact__kolom .bg-form { margin-top: var(--bg-r-2); }

@media (max-width: 900px) {
  .bg-sectie--contact .bg-raster { gap: var(--bg-r-3) !important; }
  .bg-contact__beeld { margin: 24px 0 0 !important; }
  .bg-contact__gegevens {
    margin-top: 0 !important; color: var(--bg-tekst); text-shadow: none;
    background: var(--bg-grijs); padding: 22px;
  }
  .bg-contact__gegevens .bg-gegevens__merk,
  .bg-contact__gegevens .bg-gegevens__merk span { color: var(--bg-navy); }
  .bg-gegevens--opfoto li, .bg-gegevens--opfoto a { color: var(--bg-navy); }
  .bg-gegevens--opfoto .bg-gegevens__klein { color: var(--bg-navy-70); }
  .bg-contact__plattegrond { margin: 0 !important; }
  /*
   * Op de telefoon eerst de kop, de intro en het formulier, daarna pas de
   * foto, de gegevens en de kaart. Anders staat de H1 pas na twee grote
   * blokken en weet je halverwege nog niet op welke pagina je bent.
   *
   * Het navy vlak zat als losse laag achter de sectie en dekte daar precies
   * de bovenste 45 procent. De kop, de intro en de labels van het formulier
   * stonden daar in navy overheen: donker op donker, onleesbaar. Het navy zit
   * nu op de kolom zelf, dus het loopt exact tot waar het formulier ophoudt en
   * alle tekst erbinnen is wit.
   */
  .bg-sectie--contact::before { display: none !important; }
  .bg-contact__kolom {
    padding: 30px var(--bg-pad) 36px; order: -1;
    /* !important, want het MOBIEL-blok zet alle zijmarges in een raster op nul.
       Zonder dit blijft het navy 20 px van de schermrand af hangen. */
    margin-inline: calc(var(--bg-pad) * -1) !important;
    background: var(--bg-navy); color: var(--bg-wit);
  }
  .bg-contact__kolom h1,
  .bg-contact__kolom p,
  .bg-contact__kolom .bg-form label { color: var(--bg-wit); }
  .bg-contact__kolom p a { color: var(--bg-wit); text-decoration-color: var(--bg-geel); }
  /* De gevulde knop is navy op wit; op het navy vlak wordt dat een gat. */
  .bg-contact__kolom .bg-knop-basis,
  .bg-contact__kolom .bg-knop-basis--gevuld {
    background: var(--bg-geel); color: var(--bg-navy); border-color: var(--bg-geel);
  }
}

/* ============================================================== FORMULIER */
/* Het formulier heeft geen omkadering: label erboven, daaronder een compact
   grijs veld zonder rand. Zo staat het op burogeel.nl, waar de velden 29 px
   hoog zijn. Hier 34 px, want 29 is voor een vinger aan de krappe kant. */
.bg-form { display: grid; gap: 10px; background: none; padding: 0; }
/* Het sterretje achter een verplicht veld zit in een <abbr title="verplicht">.
   Browsers zetten daar standaard een stippellijn onder, en dat las als vuil
   onder het sterretje. De uitleg blijft wel als tooltip staan. */
.bg-form label abbr[title] { text-decoration: none; border-bottom: 0; cursor: help; }
/* Het voorbeeldnummer in het telefoonveld hoort duidelijk lichter te zijn dan
   een ingevulde waarde, anders lijkt het alsof er al iets staat. */
.bg-form ::placeholder { color: var(--bg-navy); opacity: .45; }
.bg-form__uitleg {
  display: block; margin-top: .3rem;
  font-size: .75rem; line-height: 1.4; color: var(--bg-navy-70);
}
.bg-contact__kolom .bg-form__uitleg { color: rgba(255, 255, 255, .72); }
.bg-contact__kolom .bg-form ::placeholder { color: var(--bg-navy); opacity: .5; }
.bg-form label {
  font-family: var(--bg-font-body); font-size: var(--bg-t-klein);
  color: var(--bg-navy); display: block; margin-bottom: .3rem;
}
.bg-form input, .bg-form textarea, .bg-form select {
  width: 100%; font: inherit; font-size: var(--bg-t-klein); padding: .5em .7em;
  border: 0; border-radius: var(--bg-radius);
  background: var(--bg-grijs); color: var(--bg-tekst);
  transition: box-shadow var(--bg-transitie);
}
.bg-form input, .bg-form select { height: 34px; }
.bg-form input:focus, .bg-form textarea:focus, .bg-form select:focus {
  outline: none; box-shadow: inset 0 -2px 0 var(--bg-geel);
}
.bg-form textarea { min-height: 96px; resize: vertical; }
.bg-form button { min-width: 150px; padding: 13px 24px; font-size: 1rem; }
.bg-form__melding { padding: var(--bg-r-2); background: var(--bg-geel); color: var(--bg-navy); }
/* Na een geslaagde inzending staat er alleen nog de kop en de gele bevestiging.
   De uitnodigende tekst eronder ("laat hieronder je gegevens achter") klopt dan
   niet meer, want er staat geen formulier meer. De klasse bg-verzonden komt van
   het thema zodra de pagina met ?verzonden=1 wordt opgevraagd. */
body.bg-verzonden .bg-contact__kolom > p:not(.bg-form__melding) { display: none; }
.bg-form__eer { position: absolute; left: -9999px; }
.bg-form button { justify-self: start; }

.bg-gegevens { list-style: none; margin: 0 0 var(--bg-r-3); padding: 0; display: grid; gap: var(--bg-r-2); }
.bg-gegevens a { text-decoration: none; }
.bg-gegevens a:hover { text-decoration: underline; text-decoration-color: var(--bg-geel); }
.bg-gegevens__klein { font-size: var(--bg-t-klein); color: var(--bg-navy-70); }

/* ============================================================= LOGOWALL = */
/* Klantenwand: een rustig raster met logo's. Klanten zonder logo krijgen hun
   naam in tekst, in dezelfde tegel, zodat het blok niet gatenkaas wordt. */
.bg-logowall {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1px; background: var(--bg-grijs);
  border: 1px solid var(--bg-grijs);
}
.bg-logowall__tegel {
  background: var(--bg-wit);
  display: flex; align-items: center; justify-content: center;
  padding: var(--bg-r-3) var(--bg-r-2); min-height: 108px;
}
/* Alle logo's krijgen dezelfde HOOGTE, niet dezelfde maximale breedte. Dat
   leest een stuk evenwichtiger, want een breed liggend logo en een compact
   vierkant logo ogen bij gelijke breedte totaal verschillend. Staat er in een
   logo veel witruimte, dan kun je dat per case bijstellen met het veld
   'logo-schaal': die zet --schaal op de tegel. */
.bg-logowall__tegel img {
  height: calc(46px * var(--schaal, 1)); width: auto;
  max-width: calc(82% * var(--schaal, 1)); object-fit: contain;
  filter: grayscale(1); opacity: .72;
  transition: filter var(--bg-transitie), opacity var(--bg-transitie);
}
.bg-logowall__tegel:hover img { filter: grayscale(0); opacity: 1; }
.bg-logowall__tegel--tekst span {
  font-family: var(--bg-font-kop); font-size: .9375rem; line-height: 1.3;
  color: var(--bg-navy-70); text-align: center; text-wrap: balance;
}
@media (max-width: 600px) { .bg-logowall { grid-template-columns: repeat(2, 1fr); } }

.bg-sectie--logos { padding-block: var(--bg-r-5); text-align: center; }
.bg-sectie--logos h2 { font-size: var(--bg-t-h3); color: var(--bg-navy-70); }

/* ============================================================== FOOTER == */
/* Navy band met grote gele aanhalingstekens (alleen homepage), daaronder de
   gele contactbalk die op elke pagina staat. */
.bg-slot { background: var(--bg-navy); color: var(--bg-wit); text-align: center; padding: 46px var(--bg-pad) 54px; }
/* Getekend en niet als letter uit het lettertype: dan valt de vorm per font
   anders uit. Dit is dezelfde massieve, licht schuine dubbele komma als op
   burogeel.nl. */
.bg-slot__teken { display: block; width: 62px; height: 50px; margin: 0 auto var(--bg-r-3); color: var(--bg-geel); }
.bg-slot__teken svg { width: 100%; height: 100%; display: block; }
.bg-slot p { font-size: 1.375rem; font-weight: 700; font-style: italic; line-height: 1.5; max-width: 900px; margin-inline: auto; }

.bg-balk { background: var(--bg-geel); color: var(--bg-navy); }
.bg-balk__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 26px; padding: 20px var(--bg-pad); font-size: var(--bg-t-klein);
}
.bg-balk a { color: var(--bg-navy); text-decoration: underline; text-decoration-color: var(--bg-navy); text-underline-offset: 3px; }
.bg-balk a:hover { text-decoration-thickness: 3px; }
.bg-balk__item { display: inline-flex; align-items: center; gap: 9px; }
.bg-balk__item svg { width: 20px; height: 20px; flex: none; }
.bg-balk__stil { opacity: .8; }
@media (max-width: 760px) { .bg-balk__inner { justify-content: flex-start; } }


/* ============================================================== MOBIEL === */
/*
 * Onder 900 px klapt het twaalfkolomsraster naar één kolom. Dit staat bewust
 * op één plek en met !important, omdat elke sectie hierboven zijn eigen
 * kolommen en rijen zet. Zonder deze regel telt de browser twaalf tussen-
 * ruimtes van 40 px op bij een scherm van 350 px, en loopt de inhoud buiten
 * beeld. Dat was op de telefoon precies wat er misging.
 */
@media (max-width: 900px) {
  .bg-raster {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--bg-r-3) !important;
  }
  .bg-raster > * {
    grid-column: 1 !important;
    grid-row: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Overlappingen werken alleen bij genoeg breedte. Op de telefoon zetten we
     de kaarten gewoon onder het beeld, met een kleine overlap als knipoog. */
  .bg-contact__kaart { margin: -48px 12px 0 !important; align-self: auto !important; }
  /* Het navy blok van de contactkolom moet tot de schermrand lopen. De regel
     hierboven in dit blok zet alle zijmarges in een raster op nul, dus die
     moet hier met een zwaardere selector overruled worden. */
  .bg-sectie--contact .bg-contact__kolom { margin-inline: calc(var(--bg-pad) * -1) !important; }
  .bg-contact__plattegrond { margin-top: 0 !important; }
  /*
   * De hero op de telefoon: navy over het hele vlak, daarop de foto en daar
   * weer overheen de grijze kaart, allebei gecentreerd.
   *
   * De maten bij een scherm van 390 px, nagemeten:
   *   inhoudskolom      20 .. 370
   *   witte lijst foto  40 .. 350
   *   foto zelf         50 .. 340
   *   grijze kaart      60 .. 330
   * De kaart valt dus 10 px binnen de foto en raakt de witte lijst niet, en
   * schuift 60 px over de onderkant van de foto heen. Let op: de witte lijst is
   * 10 px, dus een negatieve marge van 84 px levert 60 px overlap op de foto.
   * De kop gaat op de telefoon terug naar 1,45rem, zodat Marleen Vermeiren op
   * één regel past: 202 px in een kaart die binnen de marges 238 px breed is.
   * Daarmee wordt de kaart ook ruim 20 px lager, en dat leest rustiger.
   *
   * Onder 390 px krimpt de kaart mee, dus krimpt de kop mee met het scherm in
   * plaats van in stappen. Nagemeten van 320 tot 500 px: overal drie regels,
   * en de langste regel houdt minstens 18 px over.
   */
  .bg-hero--home .bg-raster { padding-top: 30px; }
  .bg-hero__beeld { margin: 0 20px !important; padding: 10px !important; }
  .bg-hero__kaart { margin: -84px 40px 0 !important; }
  .bg-hero__kaart h1 { font-size: clamp(.95rem, 10.57vw - 1.126rem, 1.45rem); }
  .bg-hero--home::before { inset: 0 !important; }
  .bg-sectie--over::before { inset: 0 !important; width: 100% !important; }
  .bg-sectie--contact::before { inset: 0 0 55% 0 !important; width: 100% !important; }

  /* Vlakken met veel binnenmarge worden op de telefoon te krap. */
  .bg-sectie--quotes .bg-vlak,
  .bg-sectie--waarom .bg-vlak,
  .bg-sectie--stappen .bg-vlak,
  .bg-sectie--cta .bg-vlak { padding: 32px 22px; }
  .bg-hero--dienst .bg-vlak,
  .bg-sectie--verhaal .bg-vlak,
  .bg-sectie--daarom .bg-vlak { padding: 22px; }
  .bg-sectie--intro { padding-block: 34px 44px; }
  /* De drie dienstkaarten schuiven op de desktop met een negatieve marge onder
     het navy blok. Op de telefoon staat de grijze kaart van dat blok er vlak
     boven, en dan plakken twee grijze vlakken tegen elkaar: geen naad, geen
     lucht. Hier dus geen overlap maar een rustige tussenruimte. */
  .bg-sectie--diensten { margin-top: 0 !important; padding-top: var(--bg-r-3); }
  .bg-kaart-grijs { padding: 20px 20px var(--bg-r-3); }

  /* De foto bij 'Over Marleen' hield op de telefoon de verhouding 4:3 van de
     andere liggende beelden. Maar deze bron is staand, en in dat lage vak viel
     het hoofd eruit: je zag Marleen vanaf de schouders. Op de telefoon staat hij
     nu in hetzelfde vak als op de desktop, met dezelfde band als op burogeel.nl,
     zodat ze er helemaal op staat. */
  .bg-sectie--over__beeld img { aspect-ratio: 622 / 657; object-fit: cover; object-position: 50% 94%; }

  /* Op mobiel staan beide tweeluiken in hetzelfde liggende vak van 4:3. Dat is
     een ander vak dan op de desktop, dus de positie moet mee: bij 4:3 zie je
     ongeveer de helft van de hoogte, en dan valt het hoofd er bij 100% net
     buiten. Hieronder per foto dezelfde band als op de desktop, teruggerekend
     naar 4:3. Bijsnijden en niet uitrekken: zonder object-fit trekt de browser
     de foto gewoon in vorm. */
  .bg-sectie--daarom .bg-beeld img { aspect-ratio: 4 / 3; object-fit: cover; }
  .pagina-webteksten-laten-schrijven .bg-sectie--daarom:not(.bg-sectie--omgekeerd) .bg-beeld img { object-position: 50% 42%; }
  .pagina-webteksten-laten-schrijven .bg-sectie--omgekeerd .bg-beeld img { aspect-ratio: 4 / 3; object-position: 50% 77%; }
  .pagina-blogs-laten-schrijven .bg-sectie--daarom:not(.bg-sectie--omgekeerd) .bg-beeld img { object-position: 50% 21%; }
  .pagina-blogs-laten-schrijven .bg-sectie--omgekeerd .bg-beeld img { object-position: 50% 81%; }
  .pagina-teksten-op-papier .bg-sectie--daarom:not(.bg-sectie--omgekeerd) .bg-beeld img { object-position: 50% 53%; }
  .pagina-teksten-op-papier .bg-sectie--omgekeerd .bg-beeld img { object-position: 50% 81%; }

  .bg-filters { padding: 14px 16px; }
  .bg-slot p { font-size: 1.0625rem; }
  .bg-slot__teken { font-size: 3rem; }
  .bg-balk__inner { justify-content: flex-start; gap: 8px 18px; }
}

@media (max-width: 520px) {
  .bg-hero__kaart { padding: var(--bg-r-3) var(--bg-r-2); }
  .bg-case-kaart__merk { height: 118px; }
  .bg-case-kaart__merk img { height: calc(46px * var(--schaal, 1)); max-height: 66px; }
}

/* =============================================================== MOTION = */
/* Alles wat inloopt is verborgen ZOLANG er JavaScript is. De klasse 'js' zet
   een klein script in de kop meteen op <html>. Zonder JavaScript blijft die
   klasse weg en staat alle inhoud gewoon zichtbaar: geen witte pagina als er
   iets misgaat met het script. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); }
.js [data-reveal].is-zicht { opacity: 1; transform: none; transition: opacity 700ms ease, transform 700ms cubic-bezier(.22,.61,.36,1); }
/* Beeld komt binnen met een fade. Het openvegen van boven naar beneden las
   als het inladen van de pagina in plaats van als een effect; een foto die
   rustig verschijnt leest als een keuze. De lijst eromheen staat er meteen,
   dus je ziet geen gat springen: alleen de foto zelf faded. */
.js [data-reveal="beeld"] { opacity: 1; transform: none; }
.js [data-reveal="beeld"] img { opacity: 0; }
.js [data-reveal="beeld"].is-zicht img { opacity: 1; transition: opacity 800ms ease; }

/* De hero-foto veegt open en zoomt tegelijk een fractie uit. Dat geeft het
   binnenkomen dat op de oude site door de opbouw van Wix ontstond. */
.js [data-reveal="hero"] { opacity: 1; transform: none; overflow: hidden; }
.js [data-reveal="hero"] img { clip-path: inset(0 100% 0 0); transform: scale(1.08); transform-origin: 50% 50%; }
.js [data-reveal="hero"].is-zicht img {
  clip-path: inset(0 0 0 0); transform: scale(1);
  transition: clip-path 1100ms cubic-bezier(.22,.61,.36,1), transform 1600ms cubic-bezier(.22,.61,.36,1);
}
/* De tekstkaart komt er net na overheen. Het script hangt data-reveal aan de
   kaart, dus zonder JavaScript staat hij er gewoon. */
.js .bg-hero__kaart[data-reveal].is-zicht { transition-delay: 400ms; }

.js .bg-woord { display: inline-block; opacity: 0; transform: translateY(.4em); }
.js .bg-woord.is-zicht { opacity: 1; transform: none; transition: opacity 460ms ease, transform 460ms cubic-bezier(.22,.61,.36,1); }

/* Parallax: de laag verschuift langzamer dan de pagina. De verschuiving zet
   het script op --bg-shift; hier staat alleen hoe die wordt toegepast. */
[data-parallax] { will-change: transform; transform: translate3d(0, var(--bg-shift, 0px), 0); }

/* De knop verspringt niet meer bij mouseover: alleen de kleur wisselt. Het
   magnetische meebewegen bleef aan de muis plakken zodra de aanwijzer de knop
   via een randje verliet, en dat leverde meer irritatie dan effect op. */

/* Gele voortgangslijn onder de kop. */
.bg-voortgang {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--bg-geel); transform: scaleX(0); transform-origin: 0 50%;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal].is-zicht, .bg-woord, .bg-woord.is-zicht { opacity: 1; transform: none; transition: none; }
  .js [data-reveal="beeld"] img { opacity: 1; }
  .js [data-reveal="hero"] img { clip-path: none; transform: none; }
  [data-parallax] { transform: none !important; }
}

/* ================================================================ PRINT = */
@media print {
  .bg-header, .bg-slot, .bg-balk, .bg-filters, .wp-block-buttons, .bg-arcering { display: none; }
  body { padding-top: 0; }
  body { color: #000; background: #fff; }
  .bg-sectie::before { display: none; }
}