/* ═══════════════════════════════════════════════════════════════
   orj-core · Homepage-secties
   Regels: ORJ-CTA-SYSTEM.md §10 (schaal), §11 (vlakken/blokken/bogen),
   §12 (breakpoints 1120 · 960 · 640 — berekend, niet aangenomen).
   Pro-omgeving: kritieke eigenschappen op !important (bekend foutpatroon).
   ═══════════════════════════════════════════════════════════════ */

/* Sectiebasis (vlakken, container, koppen, streep, tekstlink, accent,
   nowrap, USP-strip) staat sinds v2.16.0 in assets/css/orj-secties.css
   (B-069) — één bron voor élke paginamodule. Alleen homepage-eigen
   regels staan hieronder. */

/* ═══ 1 · HERO ══════════════════════════════════════════════════
   Maten B-037/B-039 (v2.7.0): gemeten op vlucht-vertraagd.nl bij viewport
   1455 (DPR 2) en 1:1 overgenomen. Verticaal: header 73 → 96 → H1
   (kaptop 102 onder de header) → 24 → alinea → 32 → knop 68 → 18 →
   Trustpilot → 94 → herobodem; de USP-kaart hangt 44 over de bodem.
   Horizontaal: kantlijn 120 (container 1215), tekst 64 ingesprongen.
   B-077 (v2.21.1): het tekstblok staat BOVENAAN de flexregel, niet in
   het midden. De foto (min-height 393 − 29) maakt de regel ±24 px hoger
   dan het tekstblok; gecentreerd zakte de H1 daardoor 12 px (gemeten:
   kaptop 114 i.p.v. 102). Trustpilot 26 → 18: het bewijs hoort bij de
   knop, dus de afstand eronder is kleiner dan de 32 erboven. */
.orj-hero .orj-wrap { padding: 96px 24px 94px; }
.orj-hero-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.orj-hero-tekst { max-width: 664px; padding-left: 64px; position: relative; z-index: 1; align-self: flex-start; }   /* 64 inspringing + kolom 600; bovenaan (B-077) */
.orj-hero-kop { margin: 0 !important; font-size: clamp(30px, 12px + 1.65vw, 36px) !important; font-weight: 700 !important; letter-spacing: -.025em !important; line-height: 1.11 !important; color: var(--orj-ink) !important; }
/* 36/40 vanaf 1455 (was 40/44). Kolom 600: regel 1 "Ontslagen of een VSO
   gekregen?" is 556 px, met de tweede regel erbij 873 — de <br> in het
   template bepaalt de breuk, de kolom vangt alleen te lange teksten. */
.orj-hero-alinea { margin: 24px 0 0 !important; font-size: 20px; line-height: 1.4; color: var(--orj-muted); max-width: 560px; }
/* 20/28 op 560 (was 19/29,5 op 493). Marge 24 = basislijn H1 → basislijn
   alinea 52 (referentie), gerekend met Inter-metrics (asc ,969 · desc ,242).
   De slotzin staat in .orj-nowrap (template): die kan intern niet breken
   en valt dus altijd héél op de laatste regel — "Krijg direct …" op regel
   3, bij elke kolombreedte. Onder 640 weer gewoon vloeiend. */

/* Actiezone: knoppen onderaan uitgelijnd, microcopy boven de ghost */
.orj-hero-acties { position: relative; z-index: 0; display: flex; align-items: flex-end; gap: 0; margin-top: 32px; width: fit-content; }   /* B-039: 32 (was 36) */
.orj-hero-sec { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.orj-hero-sec .orj-micro { padding-left: 2px; white-space: nowrap; }
.orj-hero-sec--link { margin-left: 28px; padding-bottom: 16px; gap: 6px; }
.orj-hero-sec--link .orj-tekstlink { font-size: 16px; }
/* Click-trigger onder de primair (B-029, v2.6.0, §7): raster met drie rijen —
   micro tweede route · knoppen · micro primair — zodat de knoppen op
   één lijn blijven (r8-patroon). Onder 640 gewoon gestapeld. */
.orj-micro--prim { display: none; }
@media (min-width: 640px) {
	.orj-hero-acties--trigger { display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto auto; align-items: center; row-gap: 8px; }
	.orj-hero-acties--trigger .orj-hero-sec { display: contents; }
	.orj-hero-acties--trigger > .orj-cta { grid-column: 1; grid-row: 2; }
	.orj-hero-acties--trigger .orj-micro--prim { display: block; grid-column: 1; grid-row: 3; padding-left: 2px; white-space: nowrap; }
	.orj-hero-acties--trigger .orj-of { grid-column: 2; grid-row: 2; }
	.orj-hero-acties--trigger .orj-hero-sec > .orj-micro { grid-column: 3; grid-row: 1; }
	.orj-hero-acties--trigger .orj-hero-sec > .orj-cta, .orj-hero-acties--trigger .orj-hero-sec > .orj-tekstlink { grid-column: 3; grid-row: 2; justify-self: start; }
	.orj-hero-acties--trigger .orj-hero-sec--link > .orj-micro, .orj-hero-acties--trigger .orj-hero-sec--link > .orj-tekstlink { margin-left: 28px; }
}
@media (max-width: 639px) { .orj-micro--prim { display: block; margin-top: -6px; } }
.orj-of { display: flex; flex-direction: column; align-items: center; height: 68px; padding: 0 20px; color: #9ca3af; font-size: 13px; }   /* = lg-knop (B-040) */
.orj-of > span { flex: 1; border-left: 1px dashed #d1d5db; }
.orj-of > em { font-style: normal; padding: 4px 0; }

/* Vlakken (B-042, vervangt het podium §11c): twee vormen in één tint,
   beide aan de sectie verankerd — gemeten op de referentie en per cirkel
   gefit. Rechtsboven een blok 651 × 346 met een ronding van 160 linksonder;
   linksonder een blok 251 × 262 met een ronding van 140 rechtsboven, dat
   achter de knop en het Trustpilot-lockup ligt. Alleen met `hero_boog`. */
/* B-062 (vervangt B-051 op dit punt): boven 1455 breed blijft de rónde
   binnenrand op zijn gemeten plek, maar het vlak loopt door tot de
   schermrand — B-051 verschóóf het hele vlak naar binnen en liet daardoor
   op 1920 aan weerszijden 232,5 px crème staan. Gemeten op 1920 (DPR 2):
   binnenrand referentie 1036, ORJ 1036,5 — gelijk; alleen de buitenkant
   verschilde. Reken: 651 + (50% − 727,5) = 50% − 76,5 en
   251 + (50% − 727,5) = 50% − 476,5. Onder 1455 wint de vaste maat, dus
   daar verandert er niets. */
.orj-hero--vlakken::after  { content: ""; position: absolute; right: 0; top: 0; width: max(651px, calc(50% - 76.5px)); height: 346px; background: var(--orj-zand-donker); border-radius: 0 0 0 160px; z-index: 0; }
.orj-hero--vlakken::before { content: ""; position: absolute; left: 0; bottom: 0; width: max(251px, calc(50% - 476.5px)); height: 262px; background: var(--orj-zand-donker); border-radius: 0 140px 0 0; z-index: 0; }
.orj-hero-tp { margin-top: 18px; position: relative; z-index: 1; }   /* B-077: 18 (was 26, B-039) — bewijs hoort bij de knop */
/* Hero-schaal: één getal. Tegel 20 px; label (17,8/500), telregel
   (13,8), logo-ster (17,5) en marges volgen automatisch uit
   orj-cta-system.css (B-032, verhoudingen B-036). */
.orj-hero-tp .orj-tp { --tp-h: 20px; }
/* Mobiel (B-045): tegel 17,5 (referentie gemeten), lockup gecentreerd;
   zonder telregel één rij van ±267 px, met telregel twee rijen. */
@media (max-width: 639px) { .orj-hero-tp { margin-top: 24px; display: flex; justify-content: center; } .orj-hero-tp .orj-tp { --tp-h: 17.5px; } }
.orj-hero-foto { display: flex; justify-content: flex-end; flex-shrink: 0; position: relative; z-index: 1; align-self: flex-end; margin-bottom: -29px; margin-right: 88px; }
/* B-043: foto 268 breed (18,4vw, vanaf 1455 vast), rechts 88 px binnen de
   containerrand, en de onderkant 21 px bóven de USP-kaart (referentie:
   de figuur zweeft, staat niet op de kaart). Rekensom: padding-bodem 94 −
   29 = 65 boven de sectiebodem = kaart-overlap 44 + 21.
   Upload een uitgesneden bestand zonder transparante rand: bij het originele
   1500×1500-bestand was 33% lucht, waardoor ze op 290 px maar 195 px was. */
.orj-hero-foto img { width: clamp(240px, 18.4vw, 268px); height: auto; display: block;
	/* Vangnet voor bestanden met lucht eromheen (zoals het vierkante 1500×1500):
	   een minimale hoogte + object-fit zorgt dat de figuur het vak vult vanaf de
	   onderkant, zodat ze nooit als klein blok onderin blijft hangen. Bij een
	   strak uitgesneden bestand doet dit niets. */
	min-height: clamp(340px, 27vw, 393px); object-fit: contain; object-position: center bottom; }
.orj-hero .orj-wrap { z-index: 1; }

/* ── Tablet en mobiel (B-045, v2.7.1) ──────────────────────────────
   Referentie mobiel gemeten (393 × DPR 3): alles gecentreerd en gestapeld:
   header 73 → 64 → H1 36/40 (kaptop 71 onder de header) → 24 → alinea
   18/28 → 20 → knop volle breedte 56 → 24 → Trustpilot → 26 → figuur 208
   breed tot op de sectiebodem → kaart −44. Zijpadding 32. Vlakken:
   rechtsboven 200 × 66 (kwartrond), linksonder 170 × 160 (r100).
   Tablet (640–959) is niet gemeten: dezelfde stapel op desktopmaten
   (alinea 20/28 op 560, knop op eigen breedte, foto 268), vlakken
   tussenmaat. B-021 "foto weg onder 960" vervalt. */
@media (max-width: 1119px) { .orj-hero-tekst { padding-left: 32px; } }
@media (max-width: 959px) {
	.orj-hero .orj-wrap { padding: 64px 32px 44px; }
	.orj-hero-in { flex-direction: column; align-items: center; gap: 0; }
	.orj-hero-tekst { max-width: 600px; padding-left: 0; width: 100%; text-align: center; align-self: center; }   /* gestapeld: de kruisas is horizontaal, dus terug naar het midden (B-077) */
	.orj-hero-alinea { margin: 24px auto 0 !important; }   /* !important: de desktopmarge staat er ook op */
	.orj-hero-acties { margin-left: auto; margin-right: auto; }
	.orj-hero-tp { display: flex; justify-content: center; }
	/* Foto: gecentreerd onder de tekst, onderkant op de sectiebodem (marge −44 =
	   padding-bodem); de kaart bedekt de onderste 44 px — referentiepatroon. */
	.orj-hero-foto { display: flex; justify-content: center; align-self: center; margin: 26px 0 -44px; }
	.orj-hero-foto img { width: 268px; min-height: 0; }
	.orj-hero--vlakken::after  { width: 260px; height: 90px; border-radius: 0 0 0 90px; }   /* blijft boven de kaptop van de H1 (64 + 7) */
	.orj-hero--vlakken::before { width: 200px; height: 200px; border-radius: 0 120px 0 0; }
	.orj-uspstrip .orj-wrap { padding: 0 32px; }   /* zelfde zijpadding als de hero */
}
/* < 640: maten van de referentie; knoppen volle breedte, geen "of" */
@media (max-width: 639px) {
	.orj-hero .orj-wrap { padding: 64px 32px 44px; }
	.orj-hero-kop { font-size: 36px !important; line-height: 40px !important; }
	.orj-hero-alinea { margin-top: 24px !important; font-size: 18px; line-height: 28px; max-width: none; }
	.orj-hero-acties { flex-direction: column; align-items: stretch; gap: 14px; width: 100%; margin-top: 20px; }
	.orj-hero-acties .orj-cta { width: 100%; }
	.orj-hero-sec { align-items: stretch; }
	.orj-hero-sec .orj-micro { padding-left: 0; white-space: normal; }
	.orj-hero-sec--link { margin-left: 0; padding-bottom: 0; }
	.orj-of { display: none; }
	.orj-hero-foto img { width: 208px; }
	.orj-hero--vlakken::after  { width: 200px; height: 66px; border-radius: 0 0 0 66px; }
	.orj-hero--vlakken::before { left: 0; }
	.orj-hero--vlakken::after  { right: 0; }
	.orj-hero--vlakken::before { width: 170px; height: 160px; border-radius: 0 100px 0 0; }
}
/* < 360 (B-051): kolom 256 op 320 breed — "Ontslagen of een" is 285 op 36 px
   en zou de kop op vijf regels zetten; op 32 px (253) blijven het er drie. */
@media (max-width: 359px) { .orj-hero-kop { font-size: 32px !important; line-height: 36px !important; } }

/* ═══ 2 · USP-STRIP → assets/css/orj-secties.css (v2.16.0, B-069):
   de strip hangt over de herorand en wordt ook door /over-ons/ gebruikt. */
/* ═══ 3 · HOE WERKT HET ═════════════════════════════════════════ */
/* B-048 (v2.8.1): compacter — sectie 72/72 (was 80/72), kop → kaarten 40
   (was 48), kaart 32/28 (was 36/32), titel 20 (was 21); kaart ±205 hoog met
   vier regels tekst (was 264 met vijf à zes). Streep en donkergroene titel
   blijven (signatuur, 7:1). */
.orj-hoe .orj-wrap { padding: 72px 24px; }
.orj-stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; }
.orj-stap { background: var(--orj-mint); border-radius: 16px; padding: 32px 28px; text-align: center; }
.orj-stap-titel { margin: 0 !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: -.01em; color: var(--orj-green-dark) !important; }
.orj-stap p { margin: 14px 0 0 !important; font-size: 16px; line-height: 1.6; color: var(--orj-ink); }
@media (max-width: 959px) { .orj-hoe .orj-wrap { padding: 64px 24px 56px; } .orj-stappen { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 639px) { .orj-hoe .orj-wrap { padding: 56px 20px 40px; } .orj-stappen { margin-top: 28px; } .orj-stap { padding: 26px 22px; } .orj-stap-titel { font-size: 20px !important; } }

/* ═══ 4 · DIENSTEN (B-059: spotlight) ═══════════════════════════
   Eén groene kaart, altijd. De groene staat is .orj-dienst--uit; de server
   zet hem op de uitgelichte kaart, home.js verplaatst hem naar de
   gehoverde kaart en zet hem terug bij het verlaten van het raster (JS
   in plaats van :hover — tussen twee kaarten zit 24 px waar niets gehoverd
   is en :hover zou de VSO-kaart daar laten opflitsen). Alle kaarten dragen
   dezelfde .orj-cta--wit-link: in rust getekend als tekstlink (variant 4)
   in een gereserveerd vak van 48, zodat de wissel niets verschuift.
   Overgang 220 ms met de streep-curve (§14); alleen kleur en schaduw. */
.orj-dienstraster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; align-items: stretch; }
.orj-dienst { border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(17,24,39,.08), 0 0 0 1px rgba(17,24,39,.07); padding: 30px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
	transition: background-color .22s var(--orj-streep-curve, ease-out), box-shadow .22s var(--orj-streep-curve, ease-out); }
.orj-dienst--uit { background: var(--orj-green); box-shadow: none; }
.orj-dienstraster--spot .orj-dienst { cursor: pointer; }   /* alleen als JS de kaart als klikzone bedient */
.orj-dienst-icoon { width: 104px; height: 104px; border-radius: 50%; background: var(--orj-mint); display: inline-flex; align-items: center; justify-content: center; transition: background-color .22s var(--orj-streep-curve, ease-out); }
.orj-dienst--uit .orj-dienst-icoon { background: rgba(255,255,255,.18); }
.orj-dienst-titel { margin: 6px 0 0 !important; font-size: 19px !important; font-weight: 700 !important; letter-spacing: -.01em; color: var(--orj-ink) !important; transition: color .22s var(--orj-streep-curve, ease-out); }
.orj-dienst p { font-size: 15px; line-height: 1.55; color: var(--orj-muted); flex: 1; transition: color .22s var(--orj-streep-curve, ease-out); }
.orj-dienst--uit .orj-dienst-titel { color: #fff !important; }
.orj-dienst--uit p { color: #eaf6f1; }   /* = de oude rgba(255,255,255,.9) op merkgroen, maar dekkend (§2b); 3,1:1 */
.orj-dienst-actie { margin-top: 4px; min-height: 48px; display: flex; align-items: center; justify-content: center; }
/* Rust: de witte knop als tekstlink — transparant, green-dark, geen hover-
   of active-vulling (die hoort bij de knop). Specificiteit 0-3-0 wint van
   .orj-cta--wit / .orj-cta:hover (0-2-0); kleur staat in het systeem al op
   green-dark !important, dus die hoeft hier niet. */
.orj-dienst:not(.orj-dienst--uit) .orj-cta--wit,
.orj-dienst:not(.orj-dienst--uit) .orj-cta--wit:hover,
.orj-dienst:not(.orj-dienst--uit) .orj-cta--wit:active { background: transparent; border-color: transparent; color: var(--orj-green-dark) !important; }   /* kleur ook hier: .orj-cta:hover zet #fff !important (zonder JS zou de tekstlink bij hover verdwijnen) */
@media (hover: hover) and (pointer: fine) {
	.orj-dienstraster--spot .orj-dienst:hover .orj-arrow { transform: translateX(3px); }   /* de hele kaart is de klikzone, dus de pijl reageert op de kaart */
}
@media (max-width: 1119px) { .orj-dienstraster { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 639px) { .orj-dienstraster { grid-template-columns: 1fr; margin-top: 28px; } .orj-dienst { padding: 26px 22px; } }

/* ═══ 5 · REVIEWS (B-053 · B-054 · B-055) ═══════════════════════
   Veegrij met scroll-snap, zonder zichtbare schuifbalk: pijlen (≥ 960) en
   positie-stipjes per pagina (JS) doen dat werk; toetsenbord scrolt de
   focusbare rij. Kaarten: 4 per rij vanaf 1280 (289 breed, gap 20 — de
   "vierkantere" maat, ratio ≈ 1,15 bij 4 regels), 3 per rij 1120–1279,
   300 px daaronder, 86 % onder 640; gelijke minimale hoogte zodat de voet
   op één lijn ligt, en alleen de opengeklapte kaart groeit.
   Tekst geklemd op --rv-regels zolang html.orj-js staat; zonder JS voluit.
   "Geverifieerd": vinkje + woord in green-dark — de enige groene tekst die
   geen link is (bewijslabel, verzoek team; 7,0:1 op wit).
   Let op (les v1.0.2/v1.2.1/v2.10.1): `.orj-sec img { height: auto }` wint
   van elke klasse zonder scope — maten op afbeeldingen hier altijd met
   `.orj-sec`-scope én !important. */
.orj-reviews::before { content: ""; position: absolute; right: 0; bottom: 0; width: 520px; height: 520px; background: var(--orj-zand-donker); border-radius: 100% 0 0 0; }
.orj-reviewrij-vak { position: relative; margin-top: 44px; }
.orj-reviewrij { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; outline: none; }
.orj-reviewrij::-webkit-scrollbar { display: none; }
.orj-reviewrij:focus-visible { outline: 2px solid var(--orj-green); outline-offset: 4px; }
.orj-review { flex: 0 0 calc((100% - 60px) / 4); scroll-snap-align: start; align-self: flex-start; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 6px 20px rgba(17,24,39,.06); min-height: 252px; box-sizing: border-box; }
.orj-review-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; --tp-h: 18px; }
.orj-review-sterren { display: inline-flex; height: 18px; }
.orj-sec img.orj-review-sterren { width: auto !important; height: 18px !important; }
.orj-review-geverifieerd { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 500; color: var(--orj-green-dark); white-space: nowrap; }
.orj-review-geverifieerd svg { color: var(--orj-green-dark); stroke-width: 2; }
.orj-review-titel { margin: 2px 0 0 !important; font-size: 16.5px !important; font-weight: 700 !important; letter-spacing: -.01em !important; line-height: 1.3 !important; color: var(--orj-ink) !important; }
.orj-review-tekst { margin: 0 !important; font-size: 15px; line-height: 1.55; color: var(--orj-ink); }
html.orj-js .orj-review-tekst:not(.is-open) { display: -webkit-box; -webkit-line-clamp: var(--rv-regels, 4); -webkit-box-orient: vertical; overflow: hidden; }
.orj-review-meer { align-self: flex-start; background: none; border: 0; padding: 0; margin: -2px 0 0; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--orj-green-dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.orj-review-meer:focus-visible { outline: 2px solid var(--orj-green); outline-offset: 2px; border-radius: 2px; }
.orj-review-voet { margin-top: auto; padding-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; color: var(--orj-muted); }
.orj-review-naam strong { color: var(--orj-ink); font-weight: 600; }
.orj-review-datum { white-space: nowrap; }
.orj-review-bron { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; letter-spacing: -.02em; color: var(--orj-muted); white-space: nowrap; flex-shrink: 0; }
/* B-055: het officiële logo op inkthoogte 12 — het vak is 12 / vulfactor, net als het lockup (B-032). Scope + !important tegen `.orj-sec img`. */
.orj-sec img.orj-review-bron-logo { display: block; width: auto !important; height: calc(12px / var(--tp-logo-vul, 1)) !important; max-width: none !important; }
/* pijlen: ORJ-vorm (wit rond, haarlijn, ink), buiten de rij op ≥ 1350, erop daaronder */
.orj-review-pijl { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(17,24,39,.06); color: var(--orj-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; padding: 0; }
.orj-review-pijl[hidden] { display: none; }
.orj-review-pijl:disabled { opacity: .35; cursor: default; }
.orj-review-pijl:focus-visible { outline: 2px solid var(--orj-green); outline-offset: 2px; }
.orj-review-pijl--l { left: -66px; }
.orj-review-pijl--r { right: -66px; }
@media (max-width: 1350px) { .orj-review-pijl--l { left: -12px; } .orj-review-pijl--r { right: -12px; } }
/* stipjes: één per pagina, actieve in merkgroen (grafisch) */
.orj-review-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; min-height: 8px; }
.orj-review-dots:empty { display: none; }
.orj-review-dot { width: 8px; height: 8px; border-radius: 50%; background: #d1d5db; border: 0; padding: 0; cursor: pointer; transition: background .2s; }
.orj-review-dot.is-actief { background: var(--orj-green); }
.orj-review-dot:focus-visible { outline: 2px solid var(--orj-green); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .orj-review-dot { transition: none; } }
/* onder de rij: TrustBox of (op verzoek) lockup, dan de selectiemelding met link — klein, zoals de referentie */
.orj-review-onder { margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.orj-review-lockup .orj-tp { --tp-h: 20px; }
.orj-review-trustbox { width: 100%; max-width: 560px; }
.orj-review-regel { margin: 0 !important; text-align: center; font-size: 13px; line-height: 1.5; color: var(--orj-muted); }
.orj-review-link { display: block; margin-top: 4px; color: var(--orj-green-dark) !important; font-weight: 500; text-decoration: underline !important; text-underline-offset: 3px; }   /* B-057: eigen regel onder de zin, op elke breedte */
/* 1120–1279: 3 per rij (kolom smaller dan 1215, vier wordt te smal voor 4 regels) */
@media (max-width: 1279px) { .orj-reviewrij { gap: 24px; } .orj-review { flex-basis: calc((100% - 48px) / 3); } }
/* < 1120: kaarten 300 breed in dezelfde veegrij; < 960 geen pijlen (JS) */
/* B-057: de rij loopt tot de schermrand (peek van de volgende kaart), maar de
   eerste kaart lijnt uit met de contentrand. scroll-padding legt het
   snappunt op die rand; zonder dat trekt scroll-snap-align: start de kaart
   naar x = 0 zodra er één keer geveegd is. */
@media (max-width: 1119px) {
	.orj-reviewrij { gap: 16px; margin: 0 -24px; padding: 0 24px; scroll-padding-inline: 24px; }
	.orj-reviewrij-vak { margin-top: 40px; }
	.orj-review { flex-basis: 300px; }
}
@media (max-width: 639px) {
	.orj-reviews::before { width: 220px; height: 220px; }
	.orj-reviewrij-vak { margin-top: 32px; }
	.orj-reviewrij { gap: 14px; margin: 0 -20px; padding: 0 20px; scroll-padding-inline: 20px; }
	.orj-review { flex-basis: 86%; padding: 20px 20px 18px; min-height: 0; }
}

/* ═══ 6 · JURIST ════════════════════════════════════════════════ */
.orj-jurist .orj-wrap { padding: 80px 24px; }
.orj-booglijn { position: absolute; left: 0; top: 0; width: 360px; height: 360px; opacity: .6; }
.orj-booglijn--rb { left: auto; right: 0; top: auto; bottom: 0; transform: rotate(180deg); }   /* B-058: zelfde vorm, andere hoek */
.orj-jurist-in { position: relative; display: flex; align-items: center; gap: 72px; }
.orj-jurist-portret { position: relative; flex: 0 0 320px; width: 320px; height: 320px; }
.orj-blob { position: absolute; inset: -16px; border-radius: 46% 54% 42% 58% / 52% 40% 60% 48%; background: var(--orj-mint); }
.orj-jurist-portret img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 44% 56% 46% 54% / 54% 44% 56% 46%; display: block; }
.orj-jurist-tekst { flex: 1; }
.orj-jurist-tekst > svg { display: block; margin-bottom: 14px; }
.orj-jurist-quote { margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: clamp(21px, 11px + 1vw, 25px) !important; font-weight: 500 !important; letter-spacing: -.02em; line-height: 1.3 !important; color: var(--orj-ink) !important; max-width: 620px; font-style: normal !important; }
.orj-jurist-naam { margin-top: 26px; display: flex; align-items: center; gap: 14px; }
.orj-jurist-naam strong { display: block; font-size: 16px; color: var(--orj-ink); }
.orj-jurist-naam span:not(.orj-streep) { display: block; font-size: 14.5px; color: var(--orj-muted); }
.orj-jurist-link { margin-top: 20px; }
@media (max-width: 959px) {
	.orj-jurist .orj-wrap { padding: 64px 24px; }
	.orj-jurist-in { flex-direction: column; gap: 28px; text-align: center; }
	.orj-jurist-portret { flex: none; width: 200px; height: 200px; }
	.orj-jurist-tekst > svg { display: inline-block; }
	.orj-jurist-quote { margin: 0 auto !important; }
	.orj-jurist-naam { justify-content: center; }
	.orj-jurist-naam > div { text-align: left; }
}
@media (max-width: 639px) { .orj-jurist .orj-wrap { padding: 48px 20px; } .orj-booglijn { width: 180px; height: 180px; } }

/* ═══ 7 · EXPERTISE ═════════════════════════════════════════════ */
.orj-expertise .orj-wrap { padding: 64px 24px; }
.orj-exp-in { display: flex; gap: 64px; align-items: flex-start; }
.orj-exp-tekst { flex: 1; }
.orj-exp-tekst h2 { margin: 0 !important; font-size: clamp(24px, 12px + 1.3vw, 30px) !important; font-weight: 700 !important; letter-spacing: -.025em !important; line-height: 1.12 !important; color: var(--orj-ink) !important; }
.orj-exp-tekst .orj-streep { margin: 16px 0 0; }
.orj-exp-tekst p { margin: 18px 0 0 !important; font-size: 17px; line-height: 1.65; color: var(--orj-ink); }
.orj-exp-acties { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; align-items: center; }
.orj-exp-bewijs { flex: 0 0 440px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.orj-bewijs { background: #fff; border-radius: 16px; box-shadow: 0 8px 24px rgba(17,24,39,.08), 0 0 0 1px rgba(17,24,39,.07); padding: 20px 24px; }
.orj-bewijs--breed { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; font-size: 15px; line-height: 1.5; color: var(--orj-ink); }
.orj-bewijs--breed img { width: 88px; height: auto; flex-shrink: 0; }
.orj-bewijs--cijfer { text-align: center; }
.orj-bewijs--cijfer strong { display: block; font-size: 32px; font-weight: 700; letter-spacing: -.02em; color: var(--orj-ink); }
.orj-bewijs--cijfer span { font-size: 14px; color: var(--orj-muted); }
@media (max-width: 959px) { .orj-expertise .orj-wrap { padding: 56px 24px; } .orj-exp-in { flex-direction: column; gap: 28px; } .orj-exp-bewijs { flex: none; width: 100%; } }
@media (max-width: 639px) { .orj-expertise .orj-wrap { padding: 40px 20px; } .orj-exp-bewijs { grid-template-columns: 1fr; } .orj-bewijs--breed { grid-column: auto; } }

/* ═══ 8 · VSO-BALK ══════════════════════════════════════════════
   Drie stijlen (vso_stijl): 'compact' (standaard sinds v2.14.0, B-063: één
   knop naar de uploadmodule), 'strook' (B-061: de upload in de balk) en
   'kaart' (de balk van v2.9–2.12: vinkjes + knop of formulier-slot). */
.orj-vsobalk .orj-wrap { padding: 64px 24px; }

/* ── compact (B-063): kaart max. 960 op wit, raster icoon 104 · tekst · knop.
   Eén streep per kaart (onder de kop); het VSO-document staat zonder
   grondlijn in een wit rondje. Vier controles 2 × 2, elk vinkje op een wit
   rondje van 22. Kolommen minmax(0, max-content): past een label niet, dan
   breekt het binnen zijn kolom in plaats van over de kaartrand te lopen.
   Gemeten in Chromium met de Inter-bestanden: 960 × 248 op 1455; 912 op 960
   (tekstkolom 383, lijst 370, kop 352); 720 × 328 op 768; 353 × 479 op 393. */
.orj-vso--compact { max-width: 960px; margin: 0 auto; background: var(--orj-mint); border-radius: 16px; padding: 40px 48px; display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; grid-template-areas: "icoon kop knop" "icoon sub knop" "icoon controles knop"; column-gap: 32px; align-items: center; }
.orj-vso--compact.orj-vso--grijs { background: #f4f6f8; }
.orj-vso-icoon { grid-area: icoon; align-self: center; width: 104px; height: 104px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.orj-vso-icoon svg { display: block; }
.orj-vso--compact .orj-vso-kopblok { grid-area: kop; min-width: 0; }
.orj-vso--compact .orj-streep { margin: 16px 0 0; }
.orj-vso--compact .orj-vso-sub { grid-area: sub; }
.orj-vso-controles { grid-area: controles; list-style: none !important; margin: 18px 0 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 8px 28px; }
.orj-vso-controles li { display: flex; align-items: flex-start; gap: 10px; margin: 0 !important; padding: 0 !important; font-size: 15px; line-height: 1.45; color: var(--orj-ink); }
.orj-vink-schijf { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--orj-green); display: inline-flex; align-items: center; justify-content: center; }   /* 22 = regelhoogte 15 × 1,45: rondje en eerste regel delen hun midden */
.orj-vink-schijf svg { display: block; }
.orj-vso--compact .orj-vso-knopvak { grid-area: knop; margin-left: 16px; display: flex; }
@media (max-width: 959px) {
	.orj-vso--compact { max-width: none; padding: 32px; column-gap: 24px; grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "icoon kop" "icoon sub" "icoon controles" ". knop"; }
	.orj-vso--compact .orj-vso-knopvak { margin: 28px 0 0; }
}
@media (max-width: 639px) {
	.orj-vso--compact { padding: 28px 20px 24px; text-align: center; grid-template-columns: minmax(0, 1fr); grid-template-areas: "icoon" "kop" "sub" "controles" "knop"; }
	.orj-vso-icoon { width: 88px; height: 88px; justify-self: center; margin-bottom: 18px; }
	.orj-vso-icoon svg { width: 72px; height: 72px; }
	.orj-vso--compact .orj-streep { margin: 14px auto 0; }
	.orj-vso--compact .orj-vso-sub { margin-top: 14px !important; }
	.orj-vso-controles { grid-template-columns: minmax(0, max-content); justify-content: center; margin-top: 16px !important; text-align: left; }   /* 2 × 2 vraagt 341, er is 313: één kolom, als blok gecentreerd */
	.orj-vso--compact .orj-vso-knopvak { margin: 24px 0 0; }
	.orj-vso--compact .orj-cta--lg { width: 100%; }
}

/* ── strook: kaart met tekst links en het formulier rechts (stand 1 en 3),
   één kolom zodra er een bestand is (stand 2). Het formulier zelf
   (dropzone, chips, velden, bevestiging) komt uit modules/vso/assets/vso.css;
   hier staan alleen de kaart en de tekstkolom. */
.orj-vso--strook { background: var(--orj-mint); border-radius: 16px; padding: 40px 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.orj-vso--strook.orj-vso--grijs { background: #f4f6f8; }
.orj-vso--strook .orj-vso-tekst { min-width: 0; }
.orj-vso-kop { margin: 0 !important; font-size: 28px !important; font-weight: 700 !important; letter-spacing: -.02em !important; line-height: 1.15 !important; color: var(--orj-ink) !important; text-wrap: pretty; }
.orj-vso--strook .orj-streep { margin: 16px 0 0; }
.orj-vso-sub  { margin: 18px 0 0 !important; font-size: 17px !important; line-height: 1.55 !important; color: var(--orj-ink) !important; max-width: 520px; text-wrap: pretty; }
.orj-vso-sub2 { margin: 8px 0 0 !important; font-size: 15px !important; line-height: 1.5 !important; color: #4b5563 !important; max-width: 520px; text-wrap: pretty; }   /* 6,7:1 op mint; muted zou onder de norm zakken (§2b) */
.orj-vso--strook .orj-vso-tp { margin-top: 22px; }
.orj-vso--strook .orj-vso-form { min-width: 0; }
/* stand 2: één kolom; kop + streep links, lockup rechts op dezelfde regel;
   de subregels wijken voor de statuszin (de "nog niet klaar"-boodschap). */
.orj-vso--strook[data-stand="2"] { grid-template-columns: 1fr; gap: 0; align-items: start; }
.orj-vso--strook[data-stand="2"] .orj-vso-tekst { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: end; }
.orj-vso--strook[data-stand="2"] .orj-vso-kopblok { grid-column: 1; }
.orj-vso--strook[data-stand="2"] .orj-vso-tp { grid-column: 2; grid-row: 1; margin: 0 0 4px; }
.orj-vso--strook[data-stand="2"] .orj-vso-status { grid-column: 1 / -1; }
.orj-vso--strook[data-stand="2"] .orj-vso-sub, .orj-vso--strook[data-stand="2"] .orj-vso-sub2 { display: none !important; }
/* stand 3: terug naar twee kolommen, bevestiging rechts; subregels weg. */
.orj-vso--strook[data-stand="3"] .orj-vso-sub, .orj-vso--strook[data-stand="3"] .orj-vso-sub2, .orj-vso--strook[data-stand="3"] .orj-vso-status { display: none !important; }
/* Zonder JS staat het formulier volledig open → altijd de één-kolom-vorm. */
html:not(.orj-js) .orj-vso--strook { grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (max-width: 959px) {
	.orj-vsobalk .orj-wrap { padding: 56px 24px; }
	.orj-vso--strook { grid-template-columns: 1fr; gap: 28px; padding: 32px; align-items: start; }
	.orj-vso--strook[data-stand="2"] .orj-vso-tekst { grid-template-columns: 1fr; }
	.orj-vso--strook[data-stand="2"] .orj-vso-tp { grid-column: 1; grid-row: auto; margin: 12px 0 0; }
}
@media (max-width: 639px) {
	.orj-vsobalk .orj-wrap { padding: 40px 20px; }
	.orj-vso--strook { padding: 24px 20px; text-align: center; }
	.orj-vso--strook .orj-streep, .orj-vso-sub, .orj-vso-sub2, .orj-vso--strook .orj-vso-status { margin-left: auto !important; margin-right: auto !important; }
	.orj-vso-kop { font-size: 24px !important; }
	.orj-vso--strook .orj-vso-tp { display: flex; justify-content: center; }
	.orj-vso--strook .orj-bestand { justify-content: center; }
	.orj-vso--strook .orj-veld { text-align: left; }
	.orj-vso--strook .orj-vso-klaar { text-align: left; }
}

/* ── kaart (v2.9–2.12): grijs, vinkjes, knop of formulier-slot ── */
.orj-vso-kaart { background: #f4f6f8; border-radius: 16px; padding: 36px 40px; display: flex; gap: 44px; align-items: center; }
.orj-vso-kaart .orj-vso-tekst { flex: 1; }
.orj-vso-kaart .orj-vso-tekst h2 { margin: 0 !important; font-size: clamp(22px, 12px + 1.15vw, 28px) !important; font-weight: 700 !important; letter-spacing: -.02em !important; line-height: 1.15 !important; color: var(--orj-ink) !important; }
.orj-vso-checks { list-style: none !important; padding: 0 !important; margin: 18px 0 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.orj-vso-checks li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--orj-ink); margin: 0 !important; }
.orj-vso-checks li svg { color: var(--orj-green); flex-shrink: 0; }
.orj-vso-kaart .orj-vso-form { flex: 0 0 420px; }
.orj-vso-form--knop { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.orj-vso-form--knop .orj-micro { font-size: 13px; }
/* B-052: Trustpilot-lockup onder de knop / het formulier. Tegel 17,5 (de
   mobiele heromaat): kleiner dan de hero (20) zodat de knop het zwaarste
   element van de kaart blijft; label, logo en marges volgen uit
   orj-cta-system.css. Onder 640 gecentreerd, zoals in de hero. */
.orj-vso-tp { margin-top: 14px; }
.orj-vso-tp .orj-tp { --tp-h: 17.5px; }
@media (max-width: 959px) { .orj-vso-kaart { flex-direction: column; align-items: stretch; gap: 24px; } .orj-vso-kaart .orj-vso-form { flex: none; } }
@media (max-width: 639px) { .orj-vso-kaart { padding: 24px 20px; } .orj-vso-checks { grid-template-columns: 1fr; } .orj-vso-form--knop .orj-cta { width: 100%; } .orj-vso-tp { display: flex; justify-content: center; } }

/* ═══ 9 · NIEUWS & BLOG ═════════════════════════════════════════ */
.orj-nieuws .orj-wrap { padding: 40px 24px 48px; }
.orj-nieuws-in { display: flex; gap: 64px; }
.orj-nieuws-kolom { flex: 1; }
.orj-nieuws-kop { margin: 0 !important; font-size: 22px !important; font-weight: 700 !important; letter-spacing: -.01em; color: var(--orj-ink) !important; }
.orj-nieuws-lijst { margin-top: 18px; display: flex; flex-direction: column; }
.orj-nieuws-item { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid #eef0f2; text-decoration: none !important; color: var(--orj-ink) !important; font-size: 15.5px; line-height: 1.45; }
.orj-nieuws-item:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }
.orj-nieuws-datum { flex: 0 0 64px; font-size: 13px; font-weight: 600; color: var(--orj-muted); padding-top: 2px; }
@media (max-width: 639px) { .orj-nieuws .orj-wrap { padding: 32px 20px 40px; } .orj-nieuws-in { flex-direction: column; gap: 32px; } }

@media (prefers-reduced-motion: reduce) { .orj-sec * { transition: none !important; } }