/* ==========================================================================
   Baan Talent v2 — aanvullingen op site.css voor de WordPress-blocks.
   site.css is de front-end uit frontend-v2. Waar het ontwerp met
   vooraf uitgesneden afbeeldingen werkte, doet dit bestand de uitsnede met
   CSS, zodat een redacteur gewoon een foto kan uploaden.
   ========================================================================== */

.accent { color: var(--c-orange); }
.intro__title .accent { font-weight: 600; }

/* Tweede kleur en woordmerk (opmaakknoppen in de editor). Donker op licht, wit op donker. */
.donker, .merk-baan { color: var(--tweede, var(--c-ink)); }
.home-hero, .hero, .split, .cta-banner, .site-footer, .page-hero { --tweede: var(--c-white); }
.merk-baan { font-weight: 400; }
.merk-talent { font-weight: 700; color: var(--c-orange); }

/* --- Fotokader -------------------------------------------------------------
   Eén foto (--photo) levert de wazige achtergrond én de scherpe uitsnede.
   Het kader is een vak (--fx, --fy, --fw, --fh); de uitsnede is een kopie van
   de achtergrond met clip-path, zodat beide precies op elkaar vallen.          */
.bt-frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.bt-frame-line { position: absolute; z-index: 2; left: var(--fx); top: var(--fy); width: var(--fw); height: var(--fh); overflow: visible; pointer-events: none; }
.bt-frame-line polygon { fill: none; stroke: var(--c-white); stroke-width: 1.5px; vector-effect: non-scaling-stroke; opacity: .85; }

/* Hero page */
.bt-hero-page { --fx: 50.5%; --fy: calc(121 * var(--px)); --fw: calc(735.5 * var(--px)); --fh: calc(450 * var(--px)); }
.bt-hero-page .hero__clip { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.bt-hero-page .hero__bg,
.bt-frame--hero { position: absolute; inset: 0; width: auto; height: auto; transform: none; background: var(--photo) right center / cover no-repeat; }
.bt-frame--hero {
  clip-path: polygon(
    calc(var(--fx) + .388 * var(--fw)) var(--fy),
    calc(var(--fx) + var(--fw)) var(--fy),
    calc(var(--fx) + var(--fw)) calc(var(--fy) + .42 * var(--fh)),
    calc(var(--fx) + .95 * var(--fw)) calc(var(--fy) + .505 * var(--fh)),
    calc(var(--fx) + var(--fw)) calc(var(--fy) + .585 * var(--fh)),
    calc(var(--fx) + var(--fw)) calc(var(--fy) + var(--fh)),
    var(--fx) calc(var(--fy) + var(--fh)),
    var(--fx) calc(var(--fy) + .72 * var(--fh))
  );
}
.bt-hero-page .hero__text, .bt-hero-page .vision, .bt-hero-page .usps { z-index: 2; }
.bt-hero-page .invite { z-index: 3; }
.bt-hero-page .hero__text .t-h1 { font-weight: 600; }
/* Tekstkolom stopt 32px voor het kader, ook nu lopende tekst niet meeschaalt. */
@media (min-width: 1101px) {
  .bt-hero-page .hero__text { width: min(calc(722 * var(--px)), calc(var(--fx) - var(--gutter) - 42 * var(--px))); }
}

/* Tussen 1401 en ~1500px zou het kader rechts buiten beeld lopen (50,5% + 735,5px). */
@media (min-width: 1261px) {
  .bt-hero-page { --fx: min(50.5%, calc(100% - var(--gutter) - var(--fw))); }
}
@media (max-width: 1260px) {
  .bt-hero-page { --fx: calc(100% - var(--gutter) - 52vw); --fw: 52vw; --fh: calc(52vw * .6118); }
}
@media (max-width: 1100px) {
  .bt-frame--hero, .bt-frame-line--hero { opacity: .45; }
}
@media (max-width: 760px) {
  .bt-hero-page { --fx: calc(100% + 30vw - 110vw); --fy: 110px; --fw: 110vw; --fh: calc(110vw * .6118); }
}

/* --- Page-CTA (gesynchroniseerd patroon) ----------------------------------- */
.bt-cta { --fx: 54.06%; --fy: calc(17 * var(--px)); --fw: calc(699 * var(--px)); --fh: calc(592 * var(--px)); }
.bt-cta .cta-banner__bg,
.bt-frame--cta { background: var(--photo) center 34.5% / cover no-repeat; }
.bt-frame--cta {
  clip-path: polygon(
    calc(var(--fx) + .5504 * var(--fw)) var(--fy),
    calc(var(--fx) + var(--fw)) var(--fy),
    calc(var(--fx) + var(--fw)) calc(var(--fy) + .2521 * var(--fh)),
    calc(var(--fx) + .9711 * var(--fw)) calc(var(--fy) + .2741 * var(--fh)),
    calc(var(--fx) + var(--fw)) calc(var(--fy) + .2961 * var(--fh)),
    calc(var(--fx) + var(--fw)) calc(var(--fy) + .5165 * var(--fh)),
    calc(var(--fx) + .1201 * var(--fw)) calc(var(--fy) + var(--fh)),
    var(--fx) calc(var(--fy) + var(--fh)),
    var(--fx) calc(var(--fy) + .943 * var(--fh))
  );
}
.bt-cta .cta-banner__copy h2 { max-width: calc(423 * var(--px)); }
.bt-cta .cta-banner__copy p { max-width: calc(470 * var(--px)); color: rgba(255, 255, 255, .75); }
.bt-cta .wp-block-buttons { display: flex; flex-wrap: wrap; gap: calc(24 * var(--px)); }
.bt-cta .wp-block-button__link {
  --btn-bg: var(--c-orange); --btn-fg: var(--c-white); --btn-hover-bg: var(--c-sand); --btn-hover-fg: var(--c-ink);
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  padding: calc(12 * var(--px)) calc(16 * var(--px)); border: 0; border-radius: 0; background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font); font-size: calc(13.5 * var(--px)); font-weight: 700; line-height: calc(22.28 * var(--px)); letter-spacing: .11em; text-transform: uppercase; white-space: nowrap;
  transition: color .35s ease;
}
.bt-cta .wp-block-button__link::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 200%; background: var(--btn-hover-bg);
  clip-path: polygon(0 0, 100% 41%, 100% 100%, 0 100%); transform: translateY(100%); transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.bt-cta .wp-block-button__link:hover, .bt-cta .wp-block-button__link:focus-visible { color: var(--btn-hover-fg); }
.bt-cta .wp-block-button__link:hover::before, .bt-cta .wp-block-button__link:focus-visible::before { transform: translateY(-45%); }
.bt-cta .is-style-white .wp-block-button__link { --btn-bg: var(--c-white); --btn-fg: var(--c-ink); --btn-hover-bg: var(--c-orange); --btn-hover-fg: var(--c-white); }

@media (max-width: 1100px) {
  .bt-cta { --fx: 48%; }
  .bt-frame--cta, .bt-frame-line--cta { opacity: .55; }
}
@media (max-width: 760px) {
  .bt-frame--cta, .bt-frame-line--cta { display: none; }
}

/* --- Tweeluik: foto's uit het blok, schuine snede met CSS --------------------- */
.bt-tweeluik .split__photo { background: var(--photo-right) center 40% / cover no-repeat; }
.bt-tweeluik .split__cut { background: var(--photo-left) center / cover no-repeat; }
.bt-tweeluik :is(.split__cut, .split__hit--left) { clip-path: polygon(0 0, 100% 0, 78.5% 100%, 0 100%); }
/* Touch en smal (≤1100): geen hover, dus twee panelen onder elkaar, elk met een eigen foto.
   .split__grid valt weg (display: contents), zodat foto's en kaarten in één raster staan.
   De linkerfoto krijgt onderaan de schuine snede; de rechterfoto loopt eronder door. */
@media (max-width: 1100px) {
  .bt-tweeluik { --snede: clamp(56 * var(--px), 14vw, 120 * var(--px)); display: grid; grid-template-columns: 1fr; min-height: 0; }
  .bt-tweeluik .split__grid { display: contents; }
  .bt-tweeluik .split__hit--right { display: none; }
  /* De vrije hover-laag wordt hier de lijn langs de snede (zoals de kaderlijnen in de hero).
     Bij 'to bottom right' loopt de 50%-lijn precies van linksonder naar rechtsboven. */
  .bt-tweeluik .split__hit--left {
    position: relative; inset: auto; grid-row: 1; grid-column: 1; align-self: end; z-index: 3;
    width: auto; height: var(--snede); clip-path: none; transform: none; pointer-events: none;
    background: linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(255, 255, 255, .55) 50%, transparent calc(50% + 1px));
  }
  .bt-tweeluik :is(.split__cut, .split__photo, .split__card) { grid-column: 1; }
  .bt-tweeluik .split__cut {
    position: relative; inset: auto; grid-row: 1; z-index: 2; width: auto; opacity: 1; transform: none;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--snede)), 0 100%);
  }
  /* De standaardfoto (split-left.png) heeft de desktopsnede als transparantie rechts (vanaf ~78%).
     Een laag van 128% breed, links uitgelijnd, houdt dat deel altijd buiten beeld. */
  .bt-tweeluik .split__cut { background: none; }
  .bt-tweeluik .split__cut::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 128%; background: var(--photo-left) left center / cover no-repeat; }
  .bt-tweeluik .split__photo { position: relative; inset: auto; grid-row: 2; margin-top: calc(-1 * var(--snede)); }
  .bt-tweeluik .split__cut::after { opacity: 1; background: linear-gradient(to top, rgba(0, 0, 0, .75) 25%, rgba(0, 0, 0, .15) 85%); }
  .bt-tweeluik .split__card { position: relative; z-index: 3; align-self: end; width: auto; padding: calc(160 * var(--px)) var(--gutter) calc(var(--snede) + 40 * var(--px)); }
  .bt-tweeluik .split__card:not(.split__card--right) { grid-row: 1; }
  .bt-tweeluik .split__card--right { grid-row: 2; justify-self: stretch; padding-bottom: calc(56 * var(--px)); }
}

/* --- Logostrip: geüploade logo's op vaste hoogte ---------------------------- */
.marquee__item.bt-logo { height: calc(40 * var(--px)); }
.marquee__item.bt-logo img { width: auto; height: 100%; object-fit: contain; }
.bt-logo--wit img { filter: brightness(0) invert(1); }

/* --- Stepper ---------------------------------------------------------------
   Stappen vullen samen de breedte (maximaal 5 in beeld), maar worden nooit smaller
   dan --step-min. Passen ze niet, dan schuift de rij en verschijnen de pijlen
   (site.js zet .is-slider zodra de rij overloopt). Mobiel: veegbare rij van 85%.   */
.bt-stepper .approach__steps {
  --cols: min(var(--steps, 5), 5); --gap: calc(24 * var(--px)); --step-min: calc(300 * var(--px));
  counter-reset: step;
  grid-template-columns: none; grid-auto-flow: column; gap: var(--gap);
  grid-auto-columns: max(var(--step-min), calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)));
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.bt-stepper .step__nr::before { counter-increment: step; content: counter(step, decimal-leading-zero); }
.bt-stepper .approach__steps::-webkit-scrollbar { display: none; }
.bt-stepper .step { scroll-snap-align: start; }
.bt-stepper__nav { display: none; justify-content: flex-end; gap: calc(12 * var(--px)); margin-top: calc(32 * var(--px)); }
.bt-stepper.is-slider .bt-stepper__nav { display: flex; }
.bt-stepper__arrow { display: grid; place-items: center; width: calc(48 * var(--px)); height: calc(48 * var(--px)); border: 0; background: var(--c-white); cursor: pointer; transition: background-color .2s; }
.bt-stepper__arrow:hover { background: var(--c-sand); }
.bt-stepper__arrow img { width: calc(12 * var(--px)); height: calc(12 * var(--px)); }
.bt-stepper__arrow[data-dir="-1"] img { transform: rotate(180deg); }
.bt-stepper__arrow:disabled { opacity: .35; cursor: default; }

@media (max-width: 1100px) { .bt-stepper .step { padding-right: calc(32 * var(--px)); } }
@media (max-width: 760px) {
  .bt-stepper .approach__steps { --gap: 16px; grid-auto-columns: 85%; }
}

/* --- Bedrijfslocatie: foto krijgt de vorm met inkeping ---------------------- */
.bt-locatie__photo { aspect-ratio: 825 / 440; object-fit: cover; clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%, 0 85%, 8.2% 70.5%, 0 55%, 0 41%); }

/* --- Contactformulier ------------------------------------------------------ */
.bt-form-status { width: 100%; padding: calc(12 * var(--px)) calc(16 * var(--px)); border-left: 3px solid var(--c-orange); background: var(--c-white); color: var(--c-ink); }
.bt-form-status--fout { border-left-color: #b3261e; }
.bt-form-status:focus { outline: none; }
.field__fout { margin: calc(2 * var(--px)) 0 0; padding-left: calc(22 * var(--px)); background: no-repeat 0 .2em / calc(16 * var(--px)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23b3261e'/%3E%3Cpath d='M7 4h2v5H7zm0 6h2v2H7z' fill='%23fff'/%3E%3C/svg%3E"); color: #b3261e; font-size: 15px; line-height: 1.4; }
.field__fout[hidden] { display: none; }
.field.has-error input, .field.has-error textarea { border-color: #b3261e; box-shadow: 0 0 0 1px #b3261e; }
.field.has-error input:focus, .field.has-error textarea:focus { border-color: #b3261e; box-shadow: 0 0 0 2px rgba(179, 38, 30, .35); }
.field--captcha { min-height: 65px; }
.contact-form .btn.is-busy { opacity: .7; cursor: progress; }
.contact-form--bedankt { gap: calc(20 * var(--px)); color: var(--c-tundora); }
.contact-form--bedankt:focus { outline: none; }
.contact-form--bedankt p { max-width: 36em; margin: 0; }
.contact-form--bedankt p a { color: var(--c-orange); }
.contact-form__vink { width: calc(56 * var(--px)); height: calc(56 * var(--px)); border-radius: 50%; background: var(--c-orange) no-repeat center / 55% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.direct-box p a { display: block; }

/* --- Tekst + media: foto met bokeh -------------------------------------------
   Eén foto: wazig over het hele vlak (backdrop-blur), scherp binnen het kader.
   Kaderpunten in procenten, gelijk aan MEDIA_POINTS in src/blocks/_shared/frame.js. */
.bt-media { position: relative; overflow: hidden; flex: 0 1 calc(698 * var(--px)); width: calc(698 * var(--px)); aspect-ratio: 698 / 587; margin: 0; background: #2b2826; }
.bt-media__bg { position: absolute; inset: 0; background: var(--photo) var(--pos, center) / cover no-repeat; }
.bt-media::before { content: ""; position: absolute; inset: 0; z-index: 1; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: rgba(0, 0, 0, .08); }
.bt-frame--media {
  background: var(--photo) var(--pos, center) / cover no-repeat;
  clip-path: polygon(3% 3.6%, 45.3% 3.6%, 96.85% 91.9%, 96.85% 97%, 85.6% 97%, 3% 51.8%, 3% 31.4%, 5.6% 29.4%, 3% 27.45%);
}
.bt-frame-line--media { left: 0; top: 0; width: 100%; height: 100%; }
.bt-media__match { position: absolute; z-index: 3; left: 7%; top: 7.2%; width: 20.4%; height: auto; }
.bt-tekst-media .copy p + p { margin-top: 0; }

@media (max-width: 1260px) {
  .bt-media { flex: 1 1 0; width: auto; min-width: 0; }
}
@media (max-width: 1100px) {
  .bt-media { flex: none; width: 100%; }
  .media-row--flip .bt-media { order: 1; }
}

/* --- Mention: met afbeelding zoals het SNA-blok, zonder afbeelding een quote --- */
.bt-mention .sna__logo { object-fit: contain; }
.bt-mention--quote .sna__card { flex-direction: column; justify-content: center; gap: calc(24 * var(--px)); text-align: center; }
.bt-mention--quote .sna__text { align-items: center; max-width: calc(900 * var(--px)); }
.bt-mention--quote .sna__text p:not(.tag) { font-size: 20px; }

/* --- Subnavigatie: ankers landen onder de vaste header en de plakkende balk --- */
main [id], .bt-artikel .article h2[id], .bt-zigzag .solution[id] { scroll-margin-top: var(--anchor-offset, calc(var(--header-h, calc(120 * var(--px))) + 80 * var(--px))); }

/* --- Stepper verspringend ----------------------------------------------------
   Nummer telt vanzelf; elke tweede stap staat rechts (zoals .solution--right). */
.bt-zigzag { counter-reset: zigzag; }
.bt-zigzag .solution { counter-increment: zigzag; }
.bt-zigzag .solution__nr::before { content: counter(zigzag, decimal-leading-zero); }
.bt-zigzag > .solution:nth-child(2n of .solution) {
  --clip: polygon(38.06% 0, 100% 0, 100% 100%, 0 100%, 0 85.58%, calc(37.44 * var(--px)) 79.35%, 0 73.12%, 0 57.69%);
  width: min(1193 * var(--px), calc(100% - max(var(--gutter), 26.51%) - var(--gutter))); margin-left: max(var(--gutter), 26.51%);
  padding: calc(44 * var(--px)) calc(40 * var(--px)) calc(72 * var(--px)) calc(454 * var(--px));
}
.bt-zigzag > .solution:nth-child(2n of .solution) .solution__nr { left: calc(103 * var(--px)); top: calc(14 * var(--px)); bottom: auto; }

/* Animatie van de stepper (component "Oplossing blok", Diensten overzicht).
   Binnenkomen: op verzoek van Jannes alleen een subtiele fade op de eigen plek (de schuifbeweging
   uit het Figma-prototype viel te houterig), zonder wachttijd, zodra het blok in beeld scrolt.
   site.js zet .is-animated op de lijst en .is-in op elk blok dat in beeld komt.
   Hover: Default → Hover uit Figma, 0,25 s ease-out. Vorm oranje met schaduw, tag donker,
   tekst wit, nummer gevuld en 1,2× groter (links vanuit linksonder, rechts vanuit
   rechtsboven), knop met donkere vulling. */
.bt-zigzag {
  --zz-in: .9s cubic-bezier(.33, 1, .68, 1);
  --zz-hover: .25s cubic-bezier(0, 0, .58, 1);
}
.bt-zigzag.is-animated > .solution { transition: opacity var(--zz-in), filter var(--zz-hover); }
.bt-zigzag.is-animated > .solution:not(.is-in) { opacity: 0; }

.bt-zigzag .solution::before { transition: background-color var(--zz-hover); }
.bt-zigzag :is(.solution__title, .solution__text, .tag) { transition: color var(--zz-hover), background-color var(--zz-hover); }
.bt-zigzag .solution__nr { transform-origin: left bottom; transition: transform var(--zz-hover), color var(--zz-hover), -webkit-text-stroke-color var(--zz-hover); }
.bt-zigzag > .solution:nth-child(2n of .solution) .solution__nr { transform-origin: right top; }
.bt-zigzag .btn .arrow { transition: color var(--zz-hover); }
@media (hover: hover) and (min-width: 1101px) {
  .bt-zigzag .solution:hover { filter: drop-shadow(0 28px 28px rgba(28, 27, 25, .25)); }
  .bt-zigzag .solution:hover::before { background-color: var(--c-orange); }
  .bt-zigzag .solution:hover :is(.solution__title, .solution__text) { color: var(--c-white); }
  .bt-zigzag .solution:hover .tag { background-color: var(--c-ink); }
  .bt-zigzag .solution:hover .solution__nr { transform: scale(1.2); color: var(--c-ink); -webkit-text-stroke-color: var(--c-ink); }
  .bt-zigzag .solution:hover .btn { --btn-hover-bg: var(--c-ink); color: var(--c-white); }
  .bt-zigzag .solution:hover .btn::before { transform: translateY(-45%); }
  .bt-zigzag .solution:hover .btn .arrow { color: var(--c-orange); }
}
@media (prefers-reduced-motion: reduce) {
  .bt-zigzag.is-animated > .solution:not(.is-in) { opacity: 1; }
  .bt-zigzag .solution, .bt-zigzag .solution::before, .bt-zigzag :is(.solution__title, .solution__text, .tag, .solution__nr), .bt-zigzag .btn .arrow { transition: none; }
}
@media (max-width: 1260px) {
  .bt-zigzag > .solution:nth-child(2n of .solution) { width: calc(100% - 2 * var(--gutter)); margin-left: var(--gutter); padding-left: calc(330 * var(--px)); }
  .bt-zigzag > .solution:nth-child(2n of .solution) .solution__nr { left: calc(40 * var(--px)); right: auto; }
}
@media (max-width: 1100px) {
  .bt-zigzag > .solution:nth-child(2n of .solution) {
    --clip: polygon(0 0, 100% 0, 100% calc(50% - 32 * var(--px)), calc(100% - 32 * var(--px)) 50%, 100% calc(50% + 32 * var(--px)), 100% 100%, 0 100%);
    padding: calc(120 * var(--px)) calc(48 * var(--px)) calc(56 * var(--px)) calc(32 * var(--px));
  }
  .bt-zigzag > .solution:nth-child(2n of .solution) .solution__nr { left: calc(32 * var(--px)); top: calc(8 * var(--px)); }
}
@media (max-width: 760px) {
  .bt-zigzag > .solution:nth-child(2n of .solution) { padding: 96px 40px 48px 24px; }
  .bt-zigzag > .solution:nth-child(2n of .solution) .solution__nr { left: 24px; }
}

/* --- Artikel met zijbalk -------------------------------------------------------
   Kernblokken (kop, alinea, lijst, knoppen) in de opmaak van .article uit
   frontend-v2. De eerste alinea is de intro.                                    */
.bt-artikel .article > p:first-child { font-size: 20px; color: var(--c-ink); }
.bt-artikel .article h2 {
  padding-top: calc(44 * var(--px)); color: var(--c-ink);
  font-size: clamp(22 * var(--px), calc(1.46 * var(--vw)), 28 * var(--px)); font-weight: 400; line-height: 1; letter-spacing: -.01em; text-transform: uppercase;
}
.bt-artikel .article .wp-block-list { display: flex; flex-direction: column; gap: calc(12 * var(--px)); margin: 0; padding: calc(5 * var(--px)) 0 0 calc(27 * var(--px)); color: var(--c-tundora); }
.bt-artikel .article .wp-block-list li::marker { font-size: .9em; }
.bt-artikel .article .wp-block-list strong { font-weight: 700; }
.bt-artikel .article p a, .bt-artikel .article li a { color: var(--c-orange); text-decoration: underline; text-underline-position: from-font; }
.bt-artikel .article p a:hover, .bt-artikel .article li a:hover { color: var(--c-ink); }
.bt-artikel .wp-block-buttons { display: flex; flex-wrap: wrap; gap: calc(24 * var(--px)); padding-top: calc(5 * var(--px)); }
.bt-artikel .wp-block-button__link {
  --btn-bg: var(--c-orange); --btn-fg: var(--c-white); --btn-hover-bg: var(--c-sand); --btn-hover-fg: var(--c-ink);
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  padding: calc(20 * var(--px)) calc(30 * var(--px)); border: 0; border-radius: 0; background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font); font-size: calc(16 * var(--px)); font-weight: 600; line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  transition: color .35s ease;
}
.bt-artikel .wp-block-button__link::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 200%; background: var(--btn-hover-bg);
  clip-path: polygon(0 0, 100% 41%, 100% 100%, 0 100%); transform: translateY(100%); transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.bt-artikel .wp-block-button__link:hover, .bt-artikel .wp-block-button__link:focus-visible { color: var(--btn-hover-fg); }
.bt-artikel .wp-block-button__link:hover::before, .bt-artikel .wp-block-button__link:focus-visible::before { transform: translateY(-45%); }
.bt-artikel .is-style-secundair .wp-block-button__link { --btn-bg: var(--c-sand); --btn-fg: var(--c-ink); --btn-hover-bg: var(--c-orange); --btn-hover-fg: var(--c-white); }
.bt-artikel .contact-card__photo { background-position: center 30%; background-size: cover; }

/* Kaartenlijst: voordelen (crème) of genummerde stappen (zand, nummer telt vanzelf). */
.bt-kaarten--voordelen .perk { background: var(--c-cream); }
.bt-kaarten--voordelen .perk__title { font-size: calc(18 * var(--px)); font-weight: 700; line-height: 1.3; color: var(--c-tundora); }
.bt-kaarten--voordelen .perk__text { color: var(--c-tundora); }
.bt-kaarten--stappen { counter-reset: kaart; }
.bt-kaarten--stappen .perk { counter-increment: kaart; background: var(--c-sand); }
.bt-kaarten--stappen .perk__title { font-size: calc(20 * var(--px)); font-weight: 600; line-height: calc(23 * var(--px)); letter-spacing: .02em; }
.bt-kaarten--stappen .perk__title::before { content: counter(kaart) ". "; }

/* --- Begrenzing op grote schermen ---------------------------------------------
   De pagina is maximaal 1920px breed (het ontwerpformaat) en staat daarboven
   gecentreerd op wit; zie --page en --vw in site.css. Boven 1920 ziet alles er
   dus precies zo uit als op 1920.                                               */

/* 404: knoppen naast elkaar onder de tekst, groot "404" als label erboven. */
.bt-404__code { margin: 0 0 calc(8 * var(--px)); color: var(--c-orange); font-weight: 800; font-size: calc(20 * var(--px)); letter-spacing: .12em; }
.bt-404__actions { display: flex; flex-wrap: wrap; gap: calc(16 * var(--px)); margin-top: calc(32 * var(--px)); }

/* --- Veelgestelde vragen (bt/faq) --------------------------------------------
   De vragen zelf gebruiken de opmaak van de FAQ op de vacaturepagina (.faq__item,
   .faq__q, .faq__a in site.css). Los op een pagina: kop links, vragen rechts.
   In een artikel: één kolom, zoals op de vacature.                               */
.bt-faq { display: grid; grid-template-columns: minmax(0, calc(520 * var(--px))) minmax(0, calc(860 * var(--px))); justify-content: center; gap: calc(40 * var(--px)) calc(120 * var(--px)); padding: calc(120 * var(--px)) var(--gutter); }
.bt-faq__head { display: flex; flex-direction: column; align-items: flex-start; gap: calc(24 * var(--px)); }
.bt-faq__head h2 { margin: 0; color: var(--c-ink); }
.bt-faq__intro { color: var(--c-tundora); }
.bt-faq__list { display: flex; flex-direction: column; }
.bt-faq .faq__a p { margin: 0; }
.article .bt-faq { display: flex; flex-direction: column; gap: 0; padding: 0; }
.article .bt-faq__head { gap: calc(12 * var(--px)); margin-bottom: calc(18.7 * var(--px)); }
.article .bt-faq__head h2 { font-size: clamp(22 * var(--px), calc(1.46 * var(--vw)), 28 * var(--px)); font-weight: 400; }
@media (max-width: 1260px) {
  .bt-faq { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .bt-faq { padding: 72px var(--gutter); }
}