/** Shopify CDN: Minification failed

Line 261:2 Unexpected "{"
Line 261:3 Expected identifier but found "%"
Line 263:42 Expected identifier but found whitespace
Line 267:3 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:beeldband (INDEX:0) */
.beeldband { background: var(--bd-cream); line-height: 0; }
  .beeldband__img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 3; max-height: 540px; object-fit: cover; object-position: var(--bb-pos, 50% 30%); }
  @media (max-width: 699px) {
    .beeldband__img { aspect-ratio: 4 / 3; max-height: none; }
  }
/* END_SECTION:beeldband */

/* START_SECTION:categorie-tegels (INDEX:1) */
/* De knop in de hero scrolt hierheen. Het anker is #tegels, op de sectie zelf
     (15 september 2026). Het stond eerst op #shopify-section-tegels, de omhulling
     van Shopify -- maar die heet op de winkel shopify-section-template--<nummer>__tegels,
     dus dat anker wees nergens heen en de knop deed niets. Een eigen id staat er
     wél, en staat er hetzelfde bij op elk thema.
     De kop is sticky, dus zonder deze marge komt de titel eronder terecht. */
  #tegels, .section-categorie-tegels { scroll-margin-top: 6rem; }
  .tegels { padding: 48px 0; background: var(--bd-white); }
  @media (min-width: 760px) { .tegels { padding: 72px 0; } }
  .tegels__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
  .tegels__h2 { margin: 0; }
  .tegels__noot { margin: .3rem 0 0; font-size: .875rem; color: var(--bd-muted); }
  .tegels__alle { color: var(--bd-navy); font-weight: 500; font-size: .95rem; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
  .tegels__alle:hover { text-decoration-style: dotted; }
  .tegels__merken { margin: 22px 0 0; font-size: .875rem; color: var(--bd-muted); }
  .tegels__merken p { margin: 0; }
  .tegels__merken p + p { margin-top: .5rem; }
  .tegels__merken a { color: var(--bd-navy); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
  .tegels__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
  @media (min-width: 640px) { .tegels__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
  @media (min-width: 1000px) {
    .tegels__grid { grid-template-columns: repeat(6, 1fr); }
    .tegels__grid--5 { grid-template-columns: repeat(5, 1fr); }
    .tegels__grid--4 { grid-template-columns: repeat(4, 1fr); }
  }
  .tegel { display: block; background: var(--bd-white); border: 1px solid var(--bd-border); border-radius: 2px; overflow: hidden; transition: border-color .2s; }
  .tegel:hover, .tegel:focus-visible { border-color: var(--bd-navy); }
  .tegel:focus-visible { outline: 2px solid var(--bd-focus-op-licht); outline-offset: 2px; }
  .tegel__foto { aspect-ratio: 1; background: var(--bd-cream-200); overflow: hidden; }
  .tegel__img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .tegel__leeg { height: 100%; display: grid; place-items: center; color: var(--bd-muted); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; }
  /* min-width: 0 op het tekstblok, anders kan de prijsregel de pijl niet
     opzij duwen en breekt hij liever zelf af (14 september 2026). */
  .tegel__tekst { padding: 12px 14px 14px; }
  .tegel__tekst > div { min-width: 0; }
  .tegel__titel { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 17px; color: var(--bd-navy); line-height: 1.2; }
  .tegel__sub { display: block; font-size: 13px; color: var(--bd-muted); margin-top: 2px; }
  /* Op één regel: "vanaf € 27,32 met logo" brak in elke tegel over twee
     regels, en op de telefoon kwam de pijl daardoor naast de ondertitel te
     staan in plaats van naast de prijs. */
  .tegel__prijs { display: block; font-size: 15px; color: var(--bd-navy); font-weight: 700; margin-top: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  @media (prefers-reduced-motion: reduce) { .tegel { transition: none; } }
/* END_SECTION:categorie-tegels */

/* START_SECTION:cta-band (INDEX:3) */
.contact-blok { padding: 48px 0; background: var(--bd-cream); border-top: 1px solid var(--bd-border); }
  .contact-blok__inner { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center; }
  .contact-blok__tekst h2 { margin: 0; max-width: none; }
  .contact-blok__alinea { margin-top: 14px; font-size: 17px; max-width: 52ch; }
  .contact-blok__alinea p { margin: 0 0 .6rem; }
  .contact-blok__alinea a { text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
  .contact-blok__bel { margin-top: 22px; }
  .contact-blok__wa { display: inline-block; margin-top: 14px; }
  .contact-blok__adres { font-size: 14px; margin: 18px 0 0; color: var(--bd-muted); }
  .contact-blok__slot { font-family: var(--font-serif); font-weight: 500; font-size: 18px; margin: 22px 0 0; }
  .contact-blok__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border: 1px solid var(--bd-border); }
  @media (max-width: 759px) { .contact-blok__bel { width: 100%; } }
  @media (min-width: 760px) { .contact-blok { padding: 72px 0; } }
  @media (min-width: 1024px) { .contact-blok__inner--foto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* END_SECTION:cta-band */

/* START_SECTION:hero-antwoord (INDEX:7) */
.hero-antwoord { background: var(--bd-cream); padding: 40px 0 0; }
  .hero-antwoord--wit { background: var(--bd-white); }
  .hero-antwoord__inner { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "tekst" "kaarten" "werk" "antwoorden"; }
  .hero-antwoord__tekst { grid-area: tekst; }
  .hero-antwoord__noot { font-size: 14px; }
  .hero-antwoord__noot--breed { display: none; margin-top: 20px; }
  .hero-antwoord__noot--smal { margin-top: 12px; }
  .hero-antwoord__noot p { margin: 0; }
  .hero-antwoord__noot a { text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
  .hero-antwoord__noot a:hover { text-decoration-style: dotted; }
  .hero-antwoord__kaarten { grid-area: kaarten; }
  /* Rij B is één vlak, wit met dezelfde rand als de kaarten: foto en bijschrift
     horen zichtbaar bij elkaar en bij de kaarten erboven, in plaats van los op
     het crème te zweven (opmerking van de eigenaar, 7 oktober 2026). */
  .hero-antwoord__werk { grid-area: werk; background: var(--bd-white); border: 1px solid var(--bd-border); border-radius: 2px; overflow: hidden; }
  .hero-antwoord--wit .hero-antwoord__werk { background: var(--bd-cream); }
  .hero-antwoord__bijschrift { font-size: 17px; padding: 16px 20px 20px; }
  .hero-antwoord__bijschrift > * { max-width: 52ch; }
  .hero-antwoord__bijschrift p { margin: 0 0 .6rem; }
  .hero-antwoord__antwoorden { grid-area: antwoorden; }
  .hero-antwoord__kop { margin: 0; }
  .hero-antwoord__sub { font-size: 17px; margin: 16px 0 0; max-width: 60ch; }
  .hero-antwoord__kaartlabel { font-size: 13px; font-weight: 600; color: var(--bd-muted); margin: 0 0 12px; }
  .hero-antwoord__rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .hero-antwoord__kaart { display: block; background: var(--bd-white); border: 1px solid var(--bd-border); border-radius: 2px; padding: 0 0 14px; color: var(--bd-navy); }
  .hero-antwoord--wit .hero-antwoord__kaart { background: var(--bd-cream); }
  .hero-antwoord__kaart:hover { border-color: var(--bd-navy); }
  .hero-antwoord__kaart:focus-visible { outline: 2px solid var(--bd-focus-op-licht); outline-offset: 2px; }
  .hero-antwoord__foto { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 10px; background: var(--bd-white); }
  .hero-antwoord--wit .hero-antwoord__foto { background: var(--bd-cream); }
  .hero-antwoord__img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }
  .hero-antwoord__leeg { color: var(--bd-muted); font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; }
  .hero-antwoord__naam { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 17px; line-height: 1.2; padding: 10px 14px 0; }
  .hero-antwoord__productnaam { display: block; font-size: 13px; color: var(--bd-muted); padding: 2px 14px 0; }
  .hero-antwoord__prijs { display: block; padding: 8px 14px 0; font-size: 17px; line-height: 1.3; font-weight: 700; font-variant-numeric: tabular-nums; }
  .hero-antwoord__label { font-weight: 400; font-size: 12px; color: var(--bd-muted); }
  .hero-antwoord__btw { font-weight: 400; font-size: 12px; color: var(--bd-muted); margin-left: .3em; }
  .hero-antwoord__knop { margin-top: 16px; }
  .hero-antwoord__werkfoto { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bd-navy); position: relative; }
  .hero-antwoord__videoknop { position: absolute; right: 10px; bottom: 10px; min-height: 36px; padding: 6px 14px; border: 0; border-radius: 2px; background: rgba(15, 30, 61, .85); color: var(--bd-cream); font: inherit; font-size: 13px; cursor: pointer; }
  .hero-antwoord__videoknop:focus-visible { outline: 2px solid var(--bd-gold); outline-offset: 2px; }
  .hero-antwoord__werkimg { width: 100%; height: 100%; object-fit: cover; object-position: var(--ha-pos-m); display: block; }
  .hero-antwoord__werklink { display: inline-block; }
  .hero-antwoord__antwoorden { border-top: 1px solid var(--bd-border); padding: 24px 0 40px; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
  .hero-antwoord__vraag { font-size: 20px; margin: 0 0 6px; }
  .hero-antwoord__antwoord p { margin: 0; font-size: 16px; }

  /* Telefoon: subkop weg, drie kaarten naast elkaar, prijs op één regel. */
  @media (max-width: 759px) {
    .hero-antwoord { padding-top: 24px; }
    .hero-antwoord__inner { gap: 16px; }
    .hero-antwoord__sub { display: none; }
    .hero-antwoord__rij { gap: 10px; }
    .hero-antwoord__naam { font-size: 14px; padding: 8px 8px 0; }
    .hero-antwoord__productnaam { display: none; }
    .hero-antwoord__prijs { font-size: 14px; padding: 6px 8px 0; white-space: normal; }
    .hero-antwoord__label, .hero-antwoord__btw { display: block; }
    .hero-antwoord__knop { width: 100%; }
    .hero-antwoord__bijschrift { font-size: 15px; padding: 12px 14px 16px; }
  }

  /* Tablet: de offertezin onder de tekst, de antwoorden in 2 x 2. */
  @media (min-width: 760px) {
    .hero-antwoord__noot--breed { display: block; }
    .hero-antwoord__noot--smal { display: none; }
    .hero-antwoord__antwoorden { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 32px 0 48px; }
    .hero-antwoord__werkimg { object-position: var(--ha-pos); }
  }

  /* Vanaf 1024 px: twee kolommen, in beide rijen op dezelfde lijn. Links de kop
     en daaronder de werkfoto, rechts de kaarten en daaronder het bijschrift:
     het bijschrift begint waar de kaarten beginnen. Eerder had rij A zes om zes
     en rij B vijf om zeven kolommen, waardoor de twee rijen los van elkaar
     stonden. Het vlak van rij B gebruikt subgrid, zodat het dezelfde kolommen
     volgt als de rij erboven. */
  @media (min-width: 1024px) {
    .hero-antwoord__inner {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-areas:
        "tekst kaarten"
        "werk werk"
        "antwoorden antwoorden";
      align-items: start;
    }
    /* De kop staat midden naast de kaarten, zodat er onder de offertezin geen
       leeg vlak overblijft. */
    .hero-antwoord__tekst { align-self: center; }
    .hero-antwoord__werk { display: grid; grid-template-columns: subgrid; align-items: center; margin-top: 16px; }
    .hero-antwoord__bijschrift { padding: 24px 32px 24px 0; }
    .hero-antwoord__antwoorden { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; }
    /* Stand wit: geen vlak, de werkfoto loopt links tot aan de schermrand. */
    .hero-antwoord--wit .hero-antwoord__werk { background: none; border: 0; overflow: visible; }
    .hero-antwoord--wit .hero-antwoord__werkfoto { aspect-ratio: 3 / 2; margin-left: calc(50% - 50vw); width: calc(50vw - 12px); max-width: none; }
    .hero-antwoord--wit .hero-antwoord__antwoorden { border-top-color: rgba(15, 30, 61, .2); }
  }

  /* Rij B: de atelier-video's (snippets/atelier-rij.liquid), sinds 16 oktober 2026. */
  .hero-antwoord__atelier { grid-area: werk; min-width: 0; }
  .atelier { color: var(--bd-text); }
  .atelier__kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 40px; flex-wrap: wrap; }
  .atelier__tekst { max-width: 640px; min-width: 0; }
  .atelier__eyebrow { color: var(--bd-gold-text); margin-bottom: .5rem; }
  .atelier__h2 { margin: 0; text-wrap: balance; }
  .atelier__intro { font-size: 17px; max-width: 62ch; margin: 12px 0 0; color: var(--bd-muted); }
  .atelier__meer { color: var(--bd-navy); font-weight: 600; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; }
  .atelier__meer:hover { color: var(--bd-gold-text); }
  .atelier__meer:focus-visible, .atelier__knop:focus-visible { outline: 2px solid var(--bd-focus-op-licht); outline-offset: 3px; }
  /* Op de telefoon een veegrij: twee clips en een stukje van de derde in beeld. */
  .atelier__clips { display: flex; gap: 12px; margin-top: 24px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .atelier__clip { margin: 0; flex: 0 0 72%; min-width: 0; scroll-snap-align: start; }
  .atelier__beeld { aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; background: var(--bd-navy); border-radius: 2px; }
  .atelier__video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .atelier__bijschrift { margin-top: 10px; font-size: 14px; line-height: 1.4; display: flex; flex-direction: column; }
  .atelier__titel { font-weight: 600; }
  .atelier__sub { color: var(--bd-muted); }
  .atelier__onder { display: flex; justify-content: flex-end; margin-top: 16px; }
  .atelier__knop { min-height: 44px; padding: 8px 18px; border: 1px solid var(--bd-navy); border-radius: 2px; background: transparent; color: var(--bd-navy); font: inherit; font-size: 14px; cursor: pointer; }
  .atelier__knop:hover { background: var(--bd-navy); color: var(--bd-cream); }
  @media (min-width: 760px) {
    .atelier__clips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 32px; overflow: visible; }
    .atelier__clips--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .atelier__clips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .atelier__clips--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  }
/* END_SECTION:hero-antwoord */

/* START_SECTION:hero-b2b (INDEX:8) */
.hero-b2b {
    position: relative;
    overflow: hidden;
    background: var(--hero-bg, #faf7f2);
    color: var(--hero-fg, #1a2a44);
    font-family: var(--font-body-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  }
  .hero-b2b__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 4rem 1.5rem 5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
  }
  @media (min-width: 990px) {
    .hero-b2b__inner {
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      padding: 6rem 2rem 7rem;
    }
  }
  .hero-b2b__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-left: 2px solid var(--hero-accent, #c9a961);
    padding-left: 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--hero-muted, #6b7280);
    margin-bottom: 2rem;
  }
  /* De eyebrow had een gouden streep links én een gouden stip ervoor: twee
     markeringen voor één regel. De stip is weg (21 september 2026); de streep
     blijft, want de cijferband eronder gebruikt dezelfde. */
  .hero-b2b__headline {
    font-family: var(--font-heading-family, Georgia, serif);
    font-size: clamp(2.5rem, 6vw, 4.75rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--hero-fg, #1a2a44);
    font-weight: 500;
  }
  {%- comment -%}
    Een schuingedrukt woord in goud in de grootste kop is het patroon waaraan een
    bezoeker een gemaakte website herkent. Besloten op 21 september 2026: de kop
    staat in één kleur en rechtop. Een <em> die nog uit de thema-editor komt wordt
    hier onschadelijk gemaakt in plaats van weggegooid, zodat een oude instelling
    de kop niet alsnog schuin zet.
  {%- endcomment -%}
  .hero-b2b__headline em,
  .hero-b2b__headline i {
    font-style: normal;
    color: inherit;
  }
  .hero-b2b__sub {
    margin-top: 2rem;
    max-width: 34rem;
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--hero-muted, #52606d);
  }
  .hero-b2b__ctas {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 2.5rem;
  }
  @media (min-width: 640px) {
    .hero-b2b__ctas { flex-direction: row; }
  }
  .hero-b2b__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 2px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
  }
  .hero-b2b__btn--primary {
    background: var(--hero-btn-bg, #1a2a44);
    color: var(--hero-btn-fg, #ffffff);
  }
  .hero-b2b__btn--primary:hover { opacity: 0.9; }
  .hero-b2b__btn--primary:hover .hero-b2b__btn-arrow { transform: translateX(3px); }
  .hero-b2b__btn-arrow { transition: transform 0.2s ease; }
  .hero-b2b__btn--ghost {
    background: transparent;
    color: var(--hero-fg);
    border-color: rgba(26,42,68,0.2);
  }
  .hero-b2b__btn--ghost:hover {
    border-color: var(--hero-fg);
    background: rgba(26,42,68,0.05);
  }
  .hero-b2b__note {
    margin-top: 1rem;
    font-size: .9rem;
    color: var(--hero-fg);
  }
  .hero-b2b__note p { margin: 0; }
  .hero-b2b__note a {
    color: var(--hero-fg);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--hero-accent, #c9a961);
  }
  .hero-b2b__note a:hover { color: var(--hero-accent, #c9a961); }

  /* Rekenkaart (11 september 2026): de offertevraag op de pagina zelf. De
     opmaak staat in snippets/hero-rekenkaart.liquid; hier alleen hoe de kaart
     in het raster van de hero valt. */
  .hero-b2b--compact.hero-b2b--calc .hero-b2b__inner { align-items: start; padding-bottom: 2rem; }
  @media (min-width: 990px) {
    .hero-b2b--compact.hero-b2b--calc .hero-b2b__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  }

  /* Compacte stand: geen foto, de cijfers rechtsonder op de grondlijn van de
     tekst, en de sectie zo hoog als de tekst. */
  .hero-b2b--compact .hero-b2b__inner { padding: 2.5rem 1.5rem 1rem; align-items: end; gap: 1.5rem; }
  @media (min-width: 990px) {
    .hero-b2b--compact .hero-b2b__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding: 3rem 2rem 1.25rem; }
  }
  .hero-b2b--compact .hero-b2b__eyebrow { margin-bottom: 1rem; }
  .hero-b2b--compact .hero-b2b__headline { font-size: clamp(2rem, 3.4vw, 3rem); }
  .hero-b2b--compact .hero-b2b__sub { margin-top: 1rem; }
  .hero-b2b--compact .hero-b2b__ctas { margin-top: 1.5rem; }
  .hero-b2b__stats {
    list-style: none;
    margin: 0;
    padding: 0 0 .35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.6rem;
  }
  @media (min-width: 990px) { .hero-b2b__stats { justify-content: flex-end; } }
  .hero-b2b__stat { border-left: 2px solid var(--hero-accent, #c9a961); padding-left: .8rem; }
  .hero-b2b__stat-number {
    display: block;
    font-family: var(--font-heading-family, Georgia, serif);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    color: var(--hero-fg);
    font-variant-numeric: tabular-nums;
  }
  .hero-b2b__stat-label {
    display: block;
    margin-top: .3rem;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--hero-muted, #6b7280);
  }
  .hero-b2b__usps {
    list-style: none;
    padding: 0;
    margin: 2.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
  }
  .hero-b2b__usp {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--hero-fg);
  }
  .hero-b2b__usp + .hero-b2b__usp::before {
    content: "\00b7";
    margin-right: 1rem;
    color: var(--hero-muted, #6b7280);
  }
  .hero-b2b__media { position: relative; }
  .hero-b2b__media-wrap { position: relative; }
  .hero-b2b__img {
    display: block;
    width: 100%;
    aspect-ratio: var(--hero-img-ratio, 4 / 5);
    object-fit: cover;
    object-position: var(--hero-img-pos, 50% 50%);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  }
  .hero-b2b__crop { overflow: hidden; }
  @media (max-width: 749px) {
    .hero-b2b__crop .hero-b2b__img {
      aspect-ratio: var(--hero-img-ratio-m, 4 / 3);
      object-position: var(--hero-img-pos-m, 50% 50%);
      transform: scale(var(--hero-img-zoom-m, 1));
      transform-origin: var(--hero-img-pos-m, 50% 50%);
    }
  }
  /* Drie vaste foto's (30 september 2026), geen carrousel. Op een telefoon
     staat de hoofdfoto er zoals altijd, met de kleine twee naast elkaar
     eronder. Vanaf 750 px is het één raster van 16:9: de hoofdfoto links op
     twee derde, de twee kleine gestapeld rechts. Dat is lager dan de foto
     alleen op 3:2, dus de vouw schuift niet. De hoofdfoto wordt in het raster
     bijgesneden; de schuiven Uitsnede horizontaal/verticaal bepalen wat blijft. */
  .hero-b2b__mosaic-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; margin-top: .35rem; }
  .hero-b2b__mosaic-item { min-width: 0; overflow: hidden; }
  .hero-b2b__mosaic-img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
  @media (min-width: 750px) {
    .hero-b2b__mosaic { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .35rem; aspect-ratio: 16 / 9; }
    .hero-b2b__mosaic .hero-b2b__crop { position: relative; min-height: 0; }
    .hero-b2b__mosaic .hero-b2b__crop .hero-b2b__img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
    .hero-b2b__mosaic-side { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); margin-top: 0; min-height: 0; }
    .hero-b2b__mosaic-item { position: relative; }
    .hero-b2b__mosaic-img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  }
  .hero-b2b__img--placeholder {
    background: var(--hero-card-bg, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero-b2b__badge {
    position: absolute;
    background: var(--hero-card-bg, #ffffff);
    border: 1px solid var(--hero-border, #e5e7eb);
    box-shadow: 0 20px 40px -12px rgba(0,0,0,0.2);
    display: none;
  }
  @media (min-width: 768px) {
    .hero-b2b__badge { display: block; }
  }
  .hero-b2b__badge--left {
    left: -1.5rem;
    bottom: -1.5rem;
    max-width: 18rem;
    padding: 1.5rem;
  }
  .hero-b2b__badge--right {
    right: -1rem;
    top: 2rem;
    padding: 1rem 1.25rem;
  }
  .hero-b2b__badge-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }
  .hero-b2b__badge-number {
    font-family: var(--font-heading-family, Georgia, serif);
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--hero-fg);
    line-height: 1;
  }
  .hero-b2b__badge--right .hero-b2b__badge-number { font-size: 1.75rem; }
  .hero-b2b__badge-label,
  .hero-b2b__badge-eyebrow {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--hero-muted, #6b7280);
  }
  .hero-b2b__badge-eyebrow { display: block; margin-bottom: 0.15rem; }
  .hero-b2b__badge-text {
    margin: 0.5rem 0 0;
    font-size: 0.88rem;
    color: var(--hero-muted);
    line-height: 1.5;
  }
  /* Het werkstuk (14 september 2026): foto op 4:3 met het kaartje erover, de
     hero zo hoog als de foto, en de cijfers eronder. Het kaartje is ook op een
     telefoon zichtbaar; de badges waren dat niet. */
  .hero-b2b--werkstuk .hero-b2b__inner { padding: 2.5rem 1.5rem 1.5rem; gap: 2rem; align-items: center; }
  /* Op een breed scherm staan tekst en foto boven uitgelijnd, niet gecentreerd.
     Gecentreerd zette de kortere tekstkolom in het midden van de hogere foto en
     liet zo'n 75 px leeg boven de eyebrow; nu begint de kop waar de foto begint
     (21 september 2026). */
  @media (min-width: 990px) {
    .hero-b2b--werkstuk .hero-b2b__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); padding: 3rem 2rem 1.5rem; gap: 3rem; align-items: start; }
  }
  .hero-b2b--werkstuk .hero-b2b__eyebrow { margin-bottom: 1rem; }
  .hero-b2b--werkstuk .hero-b2b__headline { font-size: clamp(2rem, 3.4vw, 3rem); }
  .hero-b2b--werkstuk .hero-b2b__sub { margin-top: 1rem; }
  .hero-b2b--werkstuk .hero-b2b__ctas { margin-top: 1.5rem; }
  .hero-b2b--werkstuk .hero-b2b__usps { margin-top: 1.5rem; flex-direction: column; gap: .55rem; }
  /* In de werkstuk-stand staan de regels onder elkaar. De punt die de regels
     in een rij scheidt (hierboven) werd hier een los puntje vóór regel twee en
     drie, met een inspringing die regel één niet had. Onder elkaar hoort er
     geen scheidingsteken (21 september 2026). */
  .hero-b2b--werkstuk .hero-b2b__usp + .hero-b2b__usp::before { content: none; margin: 0; }
  /* Foto en bijschrift zijn samen één omlijnd geheel: de foto bovenin, de
     tekst eronder. Niets ligt over de foto heen. */
  .hero-b2b--werkstuk .hero-b2b__media-wrap {
    background: var(--hero-card-bg, #ffffff);
    border: 1px solid var(--hero-border, #e5e7eb);
  }
  /* De foto ís het borduurwerk. De verhouding en de uitsnede stelt de eigenaar
     in de customizer in (Verhouding van de foto + Uitsnede horizontaal/verticaal):
     op "Hele foto" wordt niets bijgesneden, op een vaste verhouding bepaalt de
     uitsnede welk deel in beeld blijft, zodat het geel niet wegvalt. */
  .hero-b2b--werkstuk .hero-b2b__img { box-shadow: none; border: 0; }
  .hero-b2b__werkstuk {
    display: grid;
    gap: .75rem;
    padding: .9rem 1.1rem 1rem;
    border-top: 1px solid var(--hero-border, #e5e7eb);
  }
  @media (min-width: 480px) {
    .hero-b2b__werkstuk {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 1.25rem;
    }
  }
  .hero-b2b__werkstuk-wat { display: grid; gap: .2rem; align-content: end; }
  .hero-b2b__werkstuk-eyebrow {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--hero-muted, #6b7280);
  }
  .hero-b2b__werkstuk-title {
    font-family: var(--font-heading-family, Georgia, serif);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--hero-fg);
  }
  /* Het bedrag draagt zijn etiket boven en onder zich: waarvoor het geldt, en
     op welke grondslag. Links uitgelijnd op een telefoon, rechts zodra het
     bijschrift twee kolommen heeft. */
  .hero-b2b__werkstuk-prijs {
    display: grid;
    gap: .1rem;
    border-top: 2px solid var(--hero-accent, #c9a961);
    padding-top: .45rem;
  }
  @media (min-width: 480px) {
    .hero-b2b__werkstuk-prijs { text-align: right; justify-items: end; border-top: 0; padding-top: 0; }
  }
  .hero-b2b__werkstuk-waarvoor {
    font-size: .78rem;
    font-weight: 600;
    color: var(--hero-fg);
  }
  .hero-b2b__werkstuk-bedrag {
    font-family: var(--font-heading-family, Georgia, serif);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--hero-fg);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .hero-b2b__werkstuk-vanaf {
    font-family: var(--font-body-family, sans-serif);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hero-muted, #6b7280);
    margin-right: .4rem;
    vertical-align: .32em;
  }
  .hero-b2b__werkstuk-basis {
    font-size: .76rem;
    line-height: 1.45;
    color: var(--hero-muted, #52606d);
  }
  /* Kledingknoppen (29 september 2026): drie gelijke knoppen, elk met de
     vanaf-prijs. Op een telefoon onder elkaar, naam links en prijs rechts,
     elk zo'n 48 px hoog; vanaf 640 px drie naast elkaar. */
  .hero-b2b__kleding { margin-top: 1.5rem; }
  .hero-b2b__kleding-kop { margin: 0 0 .6rem; font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--hero-fg); }
  .hero-b2b__kleding-rij { display: grid; gap: .5rem; }
  @media (min-width: 640px) { .hero-b2b__kleding-rij { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; } }
  .hero-b2b__kleding-knop { flex-direction: row; justify-content: space-between; gap: .75rem; padding: .8rem 1rem; text-align: left; }
  @media (min-width: 640px) { .hero-b2b__kleding-knop { flex-direction: column; align-items: flex-start; justify-content: center; gap: .15rem; padding: .9rem 1rem; } }
  .hero-b2b__kleding-naam { font-size: .95rem; font-weight: 600; }
  .hero-b2b__kleding-prijs { font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .hero-b2b__kleding-vanaf { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; opacity: .75; margin-right: .2rem; }
  .hero-b2b__kleding-knop:focus-visible, .hero-b2b__werkstuk--bestel:focus-visible { outline: 2px solid var(--hero-accent, #c9a961); outline-offset: 3px; }
  .hero-b2b__kleding-noot { margin: .6rem 0 0; font-size: .76rem; line-height: 1.45; color: var(--hero-muted, #52606d); }
  .hero-b2b--werkstuk .hero-b2b__kleding + .hero-b2b__usps { margin-top: 1.25rem; }
  /* Het bijschrift als bestelknop: hele blok klikbaar, de actie onder het bedrag. */
  a.hero-b2b__werkstuk--bestel { color: inherit; text-decoration: none; transition: background .2s ease; }
  a.hero-b2b__werkstuk--bestel:hover { background: rgba(201,169,97,.1); }
  .hero-b2b__werkstuk-cta { margin-top: .35rem; font-size: .82rem; font-weight: 600; color: var(--hero-fg); text-decoration: underline; text-decoration-color: var(--hero-accent, #c9a961); text-underline-offset: 3px; }
  a.hero-b2b__werkstuk--bestel:hover .hero-b2b__werkstuk-cta { text-decoration-thickness: 2px; }
  .hero-b2b__media .hero-b2b__stats { margin-top: 1rem; justify-content: flex-start; gap: 1rem 1.6rem; }

  /* De cijferband: over de volle breedte, met dezelfde randen als de
     vertrouwd-door balk eronder, zodat het één stapel wordt in plaats van twee
     losse stroken. Op de telefoon twee kolommen, want drie naast elkaar maakt
     "2 tot 3 weken levertijd" onleesbaar smal. */
  .hero-b2b__statsband { border-top: 1px solid var(--hero-border, #e5e7eb); }
  .hero-b2b__statsband-inner {
    list-style: none;
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 1.5rem;
  }
  /* flex-basis 40% zet er twee op een rij op de telefoon; vanaf 750 px deelt
     elk cijfer evenveel breedte, ongeacht hoeveel blokken er staan. */
  .hero-b2b__statsband .hero-b2b__stat { flex: 1 1 40%; }
  @media (min-width: 750px) {
    .hero-b2b__statsband-inner { padding: 1.75rem 2rem; gap: 1.5rem 2.5rem; }
    .hero-b2b__statsband .hero-b2b__stat { flex: 1 1 0; }
  }
  /* De garanties onder de cijfers, in dezelfde band en op dezelfde kolombreedte:
     een rij met een punt ertussen vanaf 750 px, onder elkaar op een telefoon. */
  .hero-b2b__statsband .hero-b2b__usps--band {
    max-width: 1280px; margin: 0 auto; padding: 0 1.5rem 1.4rem;
    flex-direction: column; gap: .45rem;
  }
  .hero-b2b__usps--band .hero-b2b__usp { font-size: .88rem; }
  .hero-b2b__usps--band .hero-b2b__usp + .hero-b2b__usp::before { content: none; margin: 0; }
  @media (min-width: 750px) {
    .hero-b2b__statsband .hero-b2b__usps--band { padding: 0 2rem 1.6rem; flex-direction: row; flex-wrap: wrap; gap: .4rem 0; }
    .hero-b2b__usps--band .hero-b2b__usp + .hero-b2b__usp::before { content: "\00b7"; margin: 0 1rem; }
  }
  .hero-b2b__statsband .hero-b2b__stat-number { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }

  .hero-b2b__trust {
    border-top: 1px solid var(--hero-border, #e5e7eb);
    border-bottom: 1px solid var(--hero-border, #e5e7eb);
    background: rgba(0,0,0,0.02);
  }
  .hero-b2b__trust-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }
  @media (min-width: 768px) {
    .hero-b2b__trust-inner { flex-direction: row; justify-content: space-between; }
  }
  .hero-b2b__trust-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 600;
    color: var(--hero-muted);
  }
  .hero-b2b__trust-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 2.5rem;
    align-items: center;
  }
  .hero-b2b__client-name {
    font-family: var(--font-heading-family, Georgia, serif);
    font-style: italic;
    font-size: 1.25rem;
    color: rgba(26,42,68,0.65);
  }
  .hero-b2b__client-img { max-height: 32px; width: auto; opacity: 0.75; }
/* END_SECTION:hero-b2b */

/* START_SECTION:homepage-kern (INDEX:9) */
.hk { background: var(--bd-cream); padding: 28px 0 32px; border-bottom: 1px solid var(--bd-border); }
  .hk__kop { font-size: 1.5rem; margin: 0 0 .3em; color: var(--bd-navy); }
  .hk__sub { margin: 0 0 18px; color: var(--bd-muted); max-width: 70ch; font-size: .95rem; }
  .hk__rij { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
  .hk__item { min-width: 0; border-left: 2px solid var(--bd-gold); padding-left: 12px; }
  .hk__vraag { font-family: var(--font-sans); font-weight: 600; font-size: .9rem; line-height: 1.3; margin: 0 0 2px; color: var(--bd-navy); }
  .hk__antwoord { font-size: .85rem; margin: 0; color: var(--bd-muted); line-height: 1.4; }
  @media (min-width: 1024px) {
    .hk { padding: 36px 0 40px; }
    .hk__kop { font-size: 1.9rem; }
    .hk__rij { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  }
/* END_SECTION:homepage-kern */

/* START_SECTION:how-it-works (INDEX:10) */
.how { padding: 48px 0; background: var(--bd-cream); }
  .how__header { max-width: 640px; margin: 0 0 28px; }
  .how__header h2 { margin: 0; }
  .how__intro { color: var(--bd-muted); margin: 12px 0 0; }
  .how__grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .how__figuur { margin: 0; }
  .how__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 45%; border: 1px solid var(--bd-border); display: block; }
  .how__bijschrift { font-size: 13px; color: var(--bd-muted); margin-top: 8px; }
  .how__stappen { list-style: none; margin: 0; padding: 0; }
  .step { padding: 18px 0; border-top: 1px solid var(--bd-border); }
  .step:last-child { border-bottom: 1px solid var(--bd-border); }
  .step__num { font-size: 13px; color: var(--bd-muted); margin-bottom: 4px; }
  .step__title { font-size: 20px; margin: 0; }
  .step__text { margin: 6px 0 0; max-width: 66ch; }
  .how__link { display: inline-block; margin-top: 18px; }
  .how__atelier { margin-top: 36px; }
  .how__atelier-titel { font-size: 20px; margin: 0 0 14px; }
  .how__atelier-rij { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .how__atelier-figuur { margin: 0; }
  .how__atelier-foto { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--bd-border); display: block; }
  @media (min-width: 760px) { .how__atelier-rij { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (min-width: 760px) { .how { padding: 72px 0; } }
  @media (min-width: 1024px) {
    .how__grid--foto { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  }
/* END_SECTION:how-it-works */

/* START_SECTION:laatste-kans-strook (INDEX:11) */
.lk-strook { background: var(--bd-navy); color: var(--bd-cream); padding: 32px 0; }
  .lk-strook__inner { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); align-items: center; }
  .lk-strook__oog { margin: 0 0 6px; color: var(--bd-gold); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
  .lk-strook__h2 { margin: 0; color: var(--bd-gold); font-size: 3.2rem; line-height: .95; }
  .lk-strook__datum { display: block; margin-top: .4em; font-size: 1.1rem; line-height: 1.2; font-weight: 500; color: var(--bd-cream); }
  .lk-strook__p { margin: 12px 0 0; color: var(--bd-cream-on-navy); max-width: 36ch; font-size: .95rem; }
  .lk-strook__knop { display: block; text-align: center; background: var(--bd-gold); color: var(--bd-navy); font-weight: 600; font-size: 14px; padding: 12px 20px; text-decoration: none; }
  .lk-strook__knop:hover { background: var(--bd-gold-dark); }
  .lk-strook__knop:focus-visible, .lk-strook__link:focus-visible { outline: 2px solid var(--bd-focus-op-navy); outline-offset: 3px; }
  .lk-strook__knop-boven { display: none; }
  .lk-strook__knop-onder { margin-top: 18px; }
  .lk-strook__kaarten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lk-strook__kaart { min-width: 0; }
  .lk-strook__link { display: block; height: 100%; background: var(--bd-white); color: var(--bd-navy); text-decoration: none; }
  .lk-strook__foto { position: relative; aspect-ratio: 7 / 9; overflow: hidden; background: var(--bd-cream-200); }
  .lk-strook__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
  .lk-strook__badge { position: absolute; top: 8px; left: 8px; z-index: 2; background: var(--bd-danger); color: var(--bd-white); font-weight: 700; font-size: .85rem; padding: .2rem .5rem; font-variant-numeric: tabular-nums; }
  .lk-strook__hover { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-between; background: var(--bd-navy); color: var(--bd-cream); font-size: .75rem; font-weight: 600; padding: .4rem .55rem; transition: transform .3s ease; }
  .lk-strook__body { padding: .7rem .75rem .85rem; }
  .lk-strook__soort { margin: 0 0 .15rem; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--bd-muted); }
  .lk-strook__titel { font-size: .95rem; line-height: 1.2; margin: 0 0 .3rem; color: var(--bd-navy); }
  .lk-strook__prijs { margin: 0; font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; }
  .lk-strook__prijs span { font-weight: 400; font-size: .75rem; color: var(--bd-muted); }
  .lk-strook__was { font-weight: 400; color: var(--bd-muted); margin-right: 4px; }
  .lk-strook__kleur { margin: .2rem 0 0; font-size: .75rem; font-weight: 600; color: var(--bd-danger); }
  .lk-strook--creme { background: var(--bd-cream-200); color: var(--bd-navy); border-top: 1px solid var(--bd-border); }
  .lk-strook--creme .lk-strook__oog { color: var(--bd-gold-text); }
  .lk-strook--creme .lk-strook__h2, .lk-strook--creme .lk-strook__datum { color: var(--bd-navy); }
  .lk-strook--creme .lk-strook__p { color: var(--bd-muted); }
  .lk-strook--creme .lk-strook__knop { background: var(--bd-navy); color: var(--bd-cream); }
  .lk-strook--creme .lk-strook__knop:hover { background: var(--bd-navy-800); }
  .lk-strook--creme .lk-strook__knop:focus-visible, .lk-strook--creme .lk-strook__link:focus-visible { outline-color: var(--bd-focus-op-licht); }
  .lk-strook--creme .lk-strook__badge { background: var(--bd-navy); }
  .lk-strook--creme .lk-strook__kleur { color: var(--bd-navy); }
  .lk-strook--creme .lk-strook__foto { background: var(--bd-white); }
  .lk-strook--creme .lk-strook__foto img { object-fit: contain; }
  @media (hover: hover) {
    .lk-strook__hover { font-size: .85rem; padding: .65rem .8rem; transform: translateY(100%); }
    .lk-strook__link:hover .lk-strook__foto img, .lk-strook__link:focus-visible .lk-strook__foto img { transform: scale(1.06); }
    .lk-strook__link:hover .lk-strook__hover, .lk-strook__link:focus-visible .lk-strook__hover { transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) { .lk-strook__foto img, .lk-strook__hover { transition: none; } }
  @media (min-width: 760px) {
    .lk-strook { padding: 48px 0; }
    .lk-strook__knop { display: inline-block; }
    .lk-strook__knop-boven { display: block; margin-top: 22px; }
    .lk-strook__knop-onder { display: none; }
    .lk-strook__kaarten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .lk-strook__h2 { font-size: 4.4rem; }
  }
  @media (min-width: 760px) and (max-width: 1023px) {
    .lk-strook__knop-boven { display: none; }
    .lk-strook__knop-onder { display: block; }
  }
  @media (min-width: 1024px) {
    .lk-strook__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 36px; }
    .lk-strook__h2 { font-size: 5.2rem; }
  }
/* END_SECTION:laatste-kans-strook */

/* START_SECTION:mobiele-balk (INDEX:19) */
.mobiele-balk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr auto auto; gap: .5rem; padding: .6rem 14px calc(.6rem + env(safe-area-inset-bottom)); background: var(--bd-white); border-top: 1px solid var(--bd-border); box-shadow: 0 -8px 20px rgba(15,30,61,.12); }
  .mobiele-balk[hidden] { display: none; }
  .mobiele-balk__knop { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; padding: .6rem 1rem; background: var(--bd-navy); color: var(--bd-cream); font-weight: 600; font-size: .92rem; border-radius: 2px; text-decoration: none; }
  .mobiele-balk__bel, .mobiele-balk__wa { display: grid; place-items: center; width: 46px; min-height: 46px; border: 1.5px solid var(--bd-navy); border-radius: 2px; color: var(--bd-navy); }
  .mobiele-balk__wa svg { width: 26px; height: 26px; }
  .mobiele-balk__wa { border-color: #25D366; }
  /* Alleen op een telefoon; daarboven staat de knop toch in beeld. */
  @media (min-width: 760px) { .mobiele-balk { display: none; } }
  /* Zolang de balk zichtbaar is, geen zwevende WhatsApp-knop erbovenop. */
  @media (max-width: 759px) { body:has(.mobiele-balk:not([hidden])) .whatsapp-btn { display: none; } }
/* END_SECTION:mobiele-balk */

/* START_SECTION:ons-werk (INDEX:20) */
.werk { background: var(--bd-navy); color: var(--bd-cream); padding: 48px 0; }
  .werk__kop { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
  .werk__h2 { color: var(--bd-cream); margin: 0; }
  .werk__eyebrow { color: var(--bd-gold); margin-bottom: .5rem; }
  .werk__intro { font-size: 17px; max-width: 66ch; margin: 12px 0 0; color: var(--bd-cream); }
  .werk__cijfers { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 16px; font-size: 16px; }
  .werk__getal { font-family: var(--font-serif); font-weight: 600; font-size: 20px; color: var(--bd-gold); margin-right: 4px; }
  .werk__meer { color: var(--bd-gold); font-weight: 600; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; }
  .werk__meer:focus-visible, .werk__knop:focus-visible { outline: 2px solid var(--bd-focus-op-navy); outline-offset: 2px; }
  .werk__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
  .werk__figuur { margin: 0; min-width: 0; }
  .werk__figuur--groot { grid-column: 1 / -1; }
  .werk__knop { all: unset; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; cursor: zoom-in; background: var(--bd-navy-800); }
  .werk__img { width: 100%; height: 100%; object-fit: cover; object-position: var(--werk-pos, 50% 50%); display: block; }
  .werk__leeg { aspect-ratio: 1; display: grid; place-items: center; background: var(--bd-navy-800); color: var(--bd-cream-on-navy); font-size: .8rem; }
  .werk__bijschrift { font-size: 13px; color: var(--bd-cream-on-navy); margin-top: 8px; }
  /* Zes foto's: geen grote foto, maar zes gelijke vierkanten; anders staat er een foto alleen. */
  .werk__grid--6 .werk__figuur--groot { grid-column: auto; grid-row: auto; }
  @media (min-width: 760px) {
    .werk { padding: 72px 0; }
    .werk__grid { gap: 24px; margin-top: 36px; }
  }
  @media (min-width: 1024px) {
    .werk__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .werk__figuur--groot { grid-column: 1 / 3; grid-row: 1 / 3; }
    .werk__grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .werk__grid--6 .werk__figuur--groot { grid-column: auto; grid-row: auto; }
  }
/* END_SECTION:ons-werk */

/* START_SECTION:staffel-strip (INDEX:21) */
.staffel { background: var(--bd-white); border-top: 1px solid var(--bd-border); padding: 48px 0; }
  .staffel__inner { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center; }
  .staffel__h2 { margin: 0; }
  .staffel__lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .staffel__procent { display: block; font-family: var(--font-serif); font-weight: 600; font-size: 24px; line-height: 1.1; color: var(--bd-navy); font-variant-numeric: tabular-nums; }
  .staffel__label { display: block; font-size: 13px; color: var(--bd-muted); margin-top: 4px; }
  @media (min-width: 760px) {
    .staffel { padding: 72px 0; }
    .staffel__lijst { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .staffel__procent { font-size: 28px; }
  }
  @media (min-width: 1024px) {
    .staffel__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  }
/* END_SECTION:staffel-strip */

/* START_SECTION:veelgestelde-vragen (INDEX:23) */
.vragen { padding: 48px 0; background: var(--bd-white); }
  .vragen__inner { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .vragen__h2 { margin: 0; }
  .vragen__intro { color: var(--bd-muted); margin: 12px 0 0; max-width: 40ch; }
  .vraag { border-top: 1px solid var(--bd-border); }
  .vraag:last-child { border-bottom: 1px solid var(--bd-border); }
  .vraag__vraag { cursor: pointer; padding: 16px 0; font-family: var(--font-serif); font-weight: 600; font-size: 20px; line-height: 1.25; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--bd-navy); }
  .vraag__vraag::-webkit-details-marker { display: none; }
  .vraag__vraag::after { content: '+'; font-family: var(--font-sans); font-weight: 500; font-size: 22px; line-height: 1; color: var(--bd-navy); flex: 0 0 auto; }
  .vraag[open] .vraag__vraag::after { content: '\2212'; }
  .vraag__vraag:focus-visible { outline: 2px solid var(--bd-focus-op-licht); outline-offset: 2px; }
  .vraag__antwoord { padding: 0 0 18px; max-width: 66ch; line-height: 1.55; }
  .vraag__antwoord p { margin: 0 0 .5rem; }
  .vraag__antwoord p:last-child { margin-bottom: 0; }
  .vraag__antwoord a { text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
  @media (min-width: 760px) { .vragen { padding: 72px 0; } }
  @media (min-width: 1024px) { .vragen__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
/* END_SECTION:veelgestelde-vragen */

/* START_SECTION:welkomstcode (INDEX:24) */
.welkomstcode { padding: 40px 0; background: var(--bd-cream); }
  .welkomstcode__blok { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: center;
    background: var(--bd-white); border: 1px solid var(--bd-border); padding: 22px; }
  .welkomstcode__tekst h2 { margin: 0; }
  .welkomstcode__tekst p { margin: 8px 0 0; color: var(--bd-muted); max-width: 56ch; }
  .welkomstcode__invoer { display: flex; flex-wrap: wrap; gap: 8px; }
  .welkomstcode__invoer input { flex: 1 1 220px; min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid var(--bd-border);
    background: var(--bd-cream); font: inherit; color: var(--bd-text); }
  .welkomstcode__invoer input[aria-invalid="true"] { border-color: var(--bd-danger); }
  .welkomstcode__klein { font-size: 13px; color: var(--bd-muted); margin: 10px 0 0; }
  .welkomstcode__fout { font-size: 14px; color: var(--bd-danger); margin: 8px 0 0; }
  .welkomstcode__code { margin: 10px 0 0; }
  .welkomstcode__code span { display: inline-block; padding: 6px 14px; border: 1px dashed var(--bd-gold); background: var(--bd-cream-200);
    color: var(--bd-gold-text); font-weight: 600; letter-spacing: .12em; font-size: 18px; }
  @media (max-width: 759px) { .welkomstcode__invoer .btn, .welkomstcode__actie > .btn { width: 100%; } }
  @media (min-width: 900px) {
    .welkomstcode { padding: 56px 0; }
    .welkomstcode__blok { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 32px; padding: 28px 32px; }
  }
/* END_SECTION:welkomstcode */