/* ═══════════════════════════════════════════════════════════════
   orj-core · Over ons — hero + bewijsstrip
   Sectiebasis (vlakken, container, accentstreep, strip) komt uit
   assets/css/orj-secties.css; knoppen uit orj-cta-system.css.
   Maten: B-067 (hero), B-068 (het lint). Alles gerekend met de
   Inter-bestanden uit de plugin, niet aangenomen.
   Pro-omgeving: maten op afbeeldingen altijd binnen .orj-sec én met
   !important — `.orj-sec img { height: auto }` wint anders (B-055).
   ═══════════════════════════════════════════════════════════════ */

/* ═══ 1 · HERO ══════════════════════════════════════════════════
   Verticaal: 44 → kruimelpad 20 → 32 → H1 2 × 40 (B-126, was 56 → 20 → 20) → 24 → alinea
   3 × 28 → 32 → knop 68 → 18 → Trustpilot 20 → 72 = 494 hoog
   (richtwaarde ≤ 720, §10). De 56 + 20 + 20 zetten het regelkader van
   de H1 op 96 onder de header (kaptop 103) — dezelfde hoogte als op de
   homepage (B-039/B-077), dus de kop staat op élke pagina op dezelfde
   regel. Het tekstblok staat bovenaan de flexregel (B-077): het
   portret mag nooit de hoogte van de kop bepalen. */
.orj-oh .orj-wrap { padding: 44px 24px 72px; }   /* B-126: 44 + kruimelpad 20 + 32 = 96, kaptop 103 ongewijzigd (was 56 + 20 + 20) */
.orj-oh-in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.orj-oh-tekst { max-width: 664px; padding-left: 64px; position: relative; z-index: 1; align-self: flex-start; }   /* 64 inspringing + kolom 600 (B-037); bovenaan (B-077) */

/* Kruimelpad: #4b5563 haalt 6,6:1 op zand én op zand-donker; muted
   (#6b7280) zou 4,45:1 zijn — te krap voor 13,5 px (§2b). De chevron
   is decoratief en dus aria-hidden; de huidige pagina is geen link. */
.orj-kruimels { display: flex; align-items: center; gap: 6px; margin: 0 0 32px; font-size: 13.5px; font-weight: 500; line-height: 20px; color: #4b5563; }
.orj-kruimels a { color: inherit !important; text-decoration: none !important; }
.orj-kruimels a:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.orj-kruimels a:focus-visible { outline: 2px solid var(--orj-green); outline-offset: 2px; }
.orj-kruimels svg { flex-shrink: 0; color: #9ca3af; }
.orj-kruimels [aria-current] { color: var(--orj-ink); }
/* Kruimelpad als lijst (artikelpagina's, B-123): <ol> met <li>'s voor het
   BreadcrumbList-schema. De regels hierboven gingen uit van losse kinderen; een
   <li> is een blok en zette elke kruimel op een eigen regel (bug v2.35.0). Nu:
   de lijst is de flexrij, altijd één regel. Alleen de laatste kruimel (de huidige
   pagina, die de H1 eronder toch herhaalt) mag krimpen en kort af met …; Home en
   de tussenstap krimpen nooit. Op display/marge/padding !important tegen de
   lijstopmaak van Pro (lijstbullets, inspringing). */
.orj-kruimels-lijst { display: flex !important; align-items: center; flex-wrap: nowrap; gap: 6px; margin: 0 !important; padding: 0 !important; list-style: none !important; min-width: 0; max-width: 100%; }
.orj-kruimels-lijst li { display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; padding: 0 !important; flex: 0 0 auto; min-width: 0; white-space: nowrap; list-style: none !important; }
.orj-kruimels-lijst li::before, .orj-kruimels-lijst li::after { content: none !important; }
.orj-kruimels-lijst li:last-child { flex: 0 1 auto; }
.orj-kruimels-lijst li:last-child [aria-current] { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.orj-oh-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; }
.orj-oh-alinea { margin: 24px 0 0 !important; font-size: 20px; line-height: 1.4; color: var(--orj-muted); max-width: 560px; }
.orj-oh-acties { margin-top: 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.orj-oh-tp { margin-top: 18px; }   /* B-077: 18 (was 26) — kleiner dan de 32 boven de knop */
.orj-oh-tp .orj-tp { --tp-h: 20px; }   /* heroschaal (§8b) */

/* Portret in het blobmasker. Breedte krimpt mee zodat de rij past:
   gerekend bij 1455/1200/1120/960 — tekst 664 + gap + portret +
   marge blijft binnen de container (5 → 13 px over op 960). */
.orj-oh-portret { position: relative; flex: 0 0 auto; width: clamp(208px, 22vw, 320px); height: clamp(208px, 22vw, 320px); margin-right: 88px; }
.orj-sec .orj-oh-portret img { position: relative; z-index: 1; display: block; width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 44% 56% 46% 54% / 54% 44% 56% 46%; }
.orj-oh-leeg { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 100%; padding: 0 28px; box-sizing: border-box; text-align: center; background: var(--orj-mint-donker); border-radius: 44% 56% 46% 54% / 54% 44% 56% 46%; color: #4b5563; }
.orj-oh-leeg strong { font-size: 13.5px; font-weight: 600; }
.orj-oh-leeg span { font-size: 12.5px; }

/* ═══ 2 · HET LINT (B-068) ══════════════════════════════════════
   Eén streek in zand-donker met ronde uiteinden, gehangen aan het
   portret: de flexrij houdt de afstand tot de tekst, dus het lint
   kan niet achter de kop of de alinea schuiven (gemeten: minimaal
   44 px vrij tussen 960 en 1455). De maten zijn procenten van het
   portret, zodat het lint met de foto meekrimpt en de verhouding
   540 : 500 klopt — de tekening schaalt dus zuiver. */
.orj-lint { position: absolute; top: -37.5%; left: -9.375%; width: 168.75%; height: 156.25%; z-index: 0; pointer-events: none; }
.orj-lint svg { display: block; width: 100%; height: 100%; }

/* Alternatief: dezelfde twee vlakken als de homepage-hero (B-042),
   voor wie het lint niet wil. Nooit samen met het lint. */
.orj-oh--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-oh--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-oh .orj-wrap { z-index: 1; }

/* ═══ 3 · BREAKPOINTS (§12: 1120 · 960 · 640) ══════════════════ */
@media (max-width: 1119px) {
	.orj-oh-tekst { padding-left: 32px; }
	.orj-oh-in { gap: 32px; }
	.orj-oh-portret { margin-right: 24px; }
}
/* < 960: gecentreerde stapel (B-045). Het portret zakt onder de tekst;
   het lint gaat mee en schuift iets naar beneden, zodat het niet achter
   het Trustpilot-lockup komt (gemeten: 37 px vrij op 393). */
@media (max-width: 959px) {
	.orj-oh .orj-wrap { padding: 52px 32px 44px; }   /* B-126: 52 + 20 + 32 = 104, was 64 + 20 + 20 — de kop blijft waar hij was */
	.orj-oh-in { flex-direction: column; align-items: center; gap: 0; }
	.orj-oh-tekst { max-width: 600px; width: 100%; padding-left: 0; text-align: center; align-self: center; }   /* gestapeld: kruisas horizontaal (B-077) */
	.orj-kruimels { justify-content: center; }
	.orj-oh-alinea { margin-left: auto !important; margin-right: auto !important; }
	.orj-oh-acties { align-items: center; margin-left: auto; margin-right: auto; }
	.orj-oh-tp { display: flex; justify-content: center; }
	.orj-oh-portret { width: 240px; height: 240px; margin: 32px 0 0; }
	.orj-lint { top: -6%; left: -14%; }
	.orj-oh--vlakken::after  { width: 260px; height: 90px; border-radius: 0 0 0 90px; }
	.orj-oh--vlakken::before { width: 200px; height: 200px; border-radius: 0 120px 0 0; }
}
/* < 640: mobiele referentiematen (B-045) — H1 36/40, alinea 18/28,
   knop vol 56/16, Trustpilot op tegel 17,5, portret 200. */
@media (max-width: 639px) {
	.orj-oh .orj-wrap { padding: 56px 32px 44px; }   /* B-126: 56 + 20 + 24 = 100, was 64 + 20 + 16 */
	.orj-oh-kop { font-size: 36px !important; line-height: 40px !important; }
	.orj-oh-alinea { margin-top: 24px !important; font-size: 18px; line-height: 28px; max-width: none; }
	.orj-kruimels { margin-bottom: 24px; }   /* B-126 */
	.orj-oh-acties { align-items: stretch; width: 100%; margin-top: 20px; }
	.orj-oh-acties .orj-cta { width: 100%; }
	.orj-oh-acties .orj-micro { text-align: center; }
	.orj-oh-tp { margin-top: 24px; }
	.orj-oh-tp .orj-tp { --tp-h: 17.5px; }
	.orj-oh-portret { width: 200px; height: 200px; margin-top: 26px; }
	.orj-oh--vlakken::after  { width: 200px; height: 66px; border-radius: 0 0 0 66px; }
	.orj-oh--vlakken::before { width: 170px; height: 160px; border-radius: 0 100px 0 0; }
}
@media (max-width: 359px) { .orj-oh-kop { font-size: 32px !important; line-height: 36px !important; } }

/* ═══ 4 · WAT SPECIALIST BIJ ONS BETEKENT (B-070 · B-072) ═══════
   Het bewijs onder de kop van de hero, als mint blok in de stijl van
   de referentie (B-072): wit vlak met een afgerond mint blok van de
   volle containerbreedte (logo tot knop, B-071). Links de tekst,
   rechts de foto van het kantoor in een groen kader met een wit
   label. Vanaf 960 naast elkaar: de fotokolom groeit mee van 288 tot
   384 (30vw), de tekst houdt minstens 400. Gerekend met de Inter-
   bestanden (HarfBuzz): sectie 659 hoog op 1455, 683 op 1120, 764 op
   960 (richtwaarde ≤ 720, §10 — daar net erboven), gestapeld 987 op
   768 en 1003 op 393. Tekst op mint in #4b5563 (6,8:1): het gewone
   grijs haalt op mint 4,3:1 (§2b). Geen knop: na de hero staat de
   header-CTA solid (B-065). */
.orj-spec-kaart { position: relative; overflow: hidden; background: var(--orj-mint); border-radius: 24px; padding: 64px 64px 64px 96px; display: grid; grid-template-columns: minmax(0, 1fr) clamp(288px, 30vw, 384px); column-gap: 64px; align-items: stretch; }
.orj-spec-kaart--zonder-foto { grid-template-columns: minmax(0, 1fr); }
/* Booglijn (B-058) linksboven, in de eigen donkere tint, nooit achter
   tekst: de padding links (96) houdt hem vrij van de kop. */
.orj-spec-boog { position: absolute; top: 0; left: 0; width: 240px; height: 240px; pointer-events: none; }
.orj-spec-boog path { stroke: var(--orj-mint-donker); stroke-width: 12px; vector-effect: non-scaling-stroke; }
.orj-spec-tekst { position: relative; }
.orj-spec-titel { margin: 0 !important; font-size: clamp(26px, 12px + 1.6vw, 34px) !important; font-weight: 700 !important; letter-spacing: -.025em !important; line-height: 1.12 !important; color: var(--orj-ink) !important; }
.orj-spec .orj-streep { margin: 16px 0 0; }
.orj-spec-intro { margin: 16px 0 0 !important; max-width: 620px; font-size: 18px; line-height: 1.55; color: #4b5563; }
.orj-spec-punt { margin: 14px 0 0 !important; max-width: 620px; font-size: 17px; line-height: 1.65; color: #4b5563; }
.orj-spec-intro + .orj-spec-punt { margin-top: 24px !important; }
.orj-spec-punt strong { font-weight: 700; color: var(--orj-ink); }
.orj-spec-link { margin-top: 12px; line-height: 24px; }
/* Foto: kader rondom even dik (10), binnenradius 14 = 24 − 10. */
.orj-spec-foto { position: relative; margin: 0; background: var(--orj-green); border-radius: 24px; padding: 10px; display: flex; }
.orj-spec-foto img { display: block; flex: 1; width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 14px; }
/* Label: wit, pilvorm (de enige toegestane pil: labels en badges),
   gecentreerd 16 px boven de onderrand van de foto. */
.orj-spec-label { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px 0 12px; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgba(17,24,39,.12); font-size: 14px; line-height: 1; font-weight: 600; color: var(--orj-ink); white-space: nowrap; }
.orj-spec-pin { flex-shrink: 0; color: var(--orj-green); }
/* < 960: gestapeld — tekst, dan de foto (16 : 9, hoogstens 640 breed);
   de booglijn gaat naar rechtsboven, weg van de kop. */
@media (max-width: 959px) {
	.orj-spec-kaart { grid-template-columns: minmax(0, 1fr); padding: 48px 40px; }
	.orj-spec-boog { left: auto; right: 0; width: 200px; height: 200px; transform: scaleX(-1); }
	.orj-spec-foto { margin-top: 32px; max-width: 640px; }
	.orj-spec-foto img { height: auto; aspect-ratio: 16 / 9; }
}
/* < 640: zijmarge 32 zoals de strip (orj-secties.css); foto 6 : 5. */
@media (max-width: 639px) {
	.orj-spec .orj-wrap { padding: 48px 32px; }
	.orj-spec-kaart { border-radius: 20px; padding: 32px 24px; }
	.orj-spec-boog { width: 140px; height: 140px; }
	.orj-spec-boog path { stroke-width: 10px; }
	.orj-spec-intro, .orj-spec-punt { font-size: 16px; }
	.orj-spec-punt { line-height: 1.6; margin-top: 12px !important; }
	.orj-spec-intro + .orj-spec-punt { margin-top: 20px !important; }
	.orj-spec-foto { margin-top: 24px; border-radius: 20px; }
	.orj-spec-foto img { aspect-ratio: 6 / 5; border-radius: 10px; }
	.orj-spec-label { bottom: 24px; height: 34px; padding: 0 14px 0 11px; }
	.orj-spec-pin { width: 15px; height: 15px; }
}
/* Veiligheidsklep: de kantoornaam vraagt 260 px op 16 px, op een
   scherm van 320 is er 256 — daar mag hij afbreken. */
@media (max-width: 359px) { .orj-spec .orj-nowrap-slot { white-space: normal; } }

/* ═══ 5 · DE JURISTEN DIE JE HELPEN (B-073) ═════════════════════
   Alle juristen als witte haarlijnkaarten op crème (canvas "ORJ — hero
   /over-ons/", rij 5, r4). Gecentreerde kop met streep (§11f), kaarten
   op het containerraster: 3, 4 of 5 per rij naar het aantal (nooit 2 of
   6+, §11), onder 1120 twee per rij, onder 640 één. Kaart: wit, rand
   in crème-donker (#e5dccc — de haarlijn van het vlak, geen grijs op
   crème), radius 16 (radiusladder: kaarten), padding 24. Portret 88 ×
   86 in de merkvorm (clipPath #orj-vorm uit includes/merk.php) boven
   de naam, zodat de naam altijd op één regel staat: 231 px op 16/700
   is ±24 tekens inclusief "mr."; de backend waarschuwt bij langer.
   Bio krijgt de rek (flex: 1), zodat chips en voet in alle kaarten op
   dezelfde hoogte staan. Chips: de enige toegestane pil (labels en
   badges), 28 hoog, 13,5/600 ink, hoogstens drie per jurist; als link
   met hover-onderstreping, anders als tekst. Gerekend: kaart ±447 op
   1455 (4 per rij), sectie ±818 — boven de richtwaarde 720 (§10), net
   als sectie 2; mobiel ±2200 met vier kaarten. Geen knop: de header-CTA
   staat hier solid (B-065). */
.orj-jur .orj-wrap { padding: 96px 24px; }
.orj-jur .orj-kopc-sub { max-width: 620px; margin: 16px auto 0 !important; color: #4b5563; }   /* 6,7:1 op crème; muted haalt daar 4,3:1 (§2b). v2.19.1: auto-marges — de basisregel zet 16px 0 0 !important, dus een max-width zonder auto stond 70 px links van de kop */
.orj-jur-rij { list-style: none !important; margin: 48px 0 0 !important; padding: 0 !important; display: grid; column-gap: 32px; row-gap: 32px; align-items: stretch; }
.orj-jur-rij--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.orj-jur-rij--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.orj-jur-rij--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; }
.orj-jur-kaart { margin: 0 !important; padding: 24px !important; background: #fff; border: 1px solid #e5dccc; border-radius: 16px; display: flex; flex-direction: column; min-width: 0; }
/* Portret in de merkvorm. Maat gescoped met !important (B-055):
   .orj-sec img { height: auto } wint anders. De clipPath staat één keer
   in de sectie (orj_merk_clip_svg); zonder foto een mint contour. */
.orj-jur-portret { width: 88px; height: 86px; flex-shrink: 0; }
.orj-sec .orj-jur-portret img { display: block; width: 88px !important; height: 86px !important; object-fit: cover; clip-path: url(#orj-vorm); }
.orj-jur-leeg { display: block; width: 88px; height: 86px; }
.orj-jur-naam { margin: 14px 0 0 !important; font-size: 16px !important; line-height: 22px !important; font-weight: 700 !important; letter-spacing: 0 !important; color: var(--orj-ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.orj-jur-functie { margin: 2px 0 0 !important; font-size: 13.5px; line-height: 20px; font-weight: 500; color: #4b5563; }
.orj-jur-bio { margin: 16px 0 0 !important; font-size: 15px; line-height: 1.6; color: #4b5563; flex: 1 0 auto; }
.orj-chips { list-style: none !important; margin: 16px 0 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; }
.orj-chips li { margin: 0 !important; padding: 0 !important; }
.orj-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid #e5e7eb; font-size: 13.5px; line-height: 1; font-weight: 600; color: var(--orj-ink) !important; white-space: nowrap; text-decoration: none !important; }
/* Hover (B-074): mint vulling, rand mint-donker, geen onderstreping en
   geen beweging — hetzelfde gebaar als de dropdown-items en .orj-cta--wit
   (hover = vlak verdonkeren, niets anders; §3). Een pil met een streep
   eronder leest als fout. Ink op mint 15:1. */
.orj-chip { transition: background-color .2s ease, border-color .2s ease; }
a.orj-chip:hover { background: var(--orj-mint); border-color: var(--orj-mint-donker); text-decoration: none !important; }
a.orj-chip:active { background: var(--orj-mint-donker); border-color: var(--orj-mint-donker); }
a.orj-chip:focus-visible { outline: 2px solid var(--orj-green); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .orj-chip { transition: none; } }
.orj-jur-voet { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e5e7eb; line-height: 24px; }
/* < 1120: twee per rij (zoals USP en diensten, §12); de bio-rek houdt
   chips en voet gelijk. */
@media (max-width: 1119px) {
	.orj-jur-rij--3, .orj-jur-rij--4, .orj-jur-rij--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; }
}
/* < 640: één kolom, zijmarge 32 zoals de strip; rijafstand 16. */
@media (max-width: 639px) {
	.orj-jur .orj-wrap { padding: 48px 32px; }
	.orj-jur-rij { margin-top: 32px !important; }
	.orj-jur-rij--3, .orj-jur-rij--4, .orj-jur-rij--5 { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
	.orj-jur-naam { white-space: normal; overflow: visible; }   /* op 329 past ±33 tekens; breekt hij toch, dan liever twee regels dan een afgekapte naam */
}

/* ═══ 6 · IN DE MEDIA + HET AFSLUITENDE BLOK (B-076, vervangt B-075)
   Het slot van de pagina op wit, twee beats naar het referentiepatroon
   (vlucht-vertraagd.nl /over-ons/, gemeten: tekstkolom 462, tegels
   278 × 96 op #f3f4f6, mint blok 1215 × 308 met knop 272 × 52).
   Beat 1: kolom 400 : rest (op 1215 → 719) met gap 96 — niet 463 : 656
   (B-071), want de artikelkop "Verlaging rechtsbijstandvergoeding"
   is 294 px op 18/700 en past alleen in een kaart van 347 (binnen
   299); bij 463 : 656 stond "Verlaging" alleen op de eerste regel.
   Kaarten crème (--orj-paper, radius 16, padding 24), twee per rij met
   gap 24, gelijke hoogte per rij (grid stretch, de kop krijgt de rek
   zodat de datum in beide kaarten onderaan staat): badge = de enige pil
   (28 hoog, wit, haarlijn #e5dccc), artikelkop 18/24/700 ink, datum
   13,5/20 #4b5563 (6,7:1 op crème). Hover = het vlak verdonkeren naar
   --orj-paper-donker, niets anders (§3). Tussen 1120 en 1262 wordt de
   kaart 276–346 breed: hyphens als veiligheidsklep voor lange
   samenstellingen. Beat 2: mint blok, padding 64/64/64/96 (§11g),
   booglijn (B-058), tekst ≤ 567, lg-knop (B-065 zet de header-CTA in
   rust), spot 220 zonder grondlijn (B-063) in de eigen donkere tint.
   Gerekend (Inter, HarfBuzz): beat 1 388 (kaartrij 194 + 24 + 170),
   blok 387, sectie 1023 op 1455; mobiel: kaarten 1 per rij, kop 17. */
.orj-herk .orj-wrap { padding: 96px 24px; }
.orj-media { display: grid; grid-template-columns: 400px minmax(0, 1fr); column-gap: 96px; align-items: start; }
.orj-media-tekst { min-width: 0; }
.orj-media-titel { margin: 0 !important; font-size: clamp(26px, 12px + 1.6vw, 34px) !important; font-weight: 700 !important; letter-spacing: -.025em !important; line-height: 1.12 !important; color: var(--orj-ink) !important; }
.orj-herk .orj-streep { margin: 16px 0 0; }
.orj-media-intro { margin: 16px 0 0 !important; max-width: 620px; font-size: 18px; line-height: 1.55; color: #4b5563; }
.orj-knipsels { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-items: stretch; }
.orj-knipsels li { margin: 0 !important; padding: 0 !important; display: flex; min-width: 0; }
.orj-herk .orj-knipsel { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 24px; box-sizing: border-box; background: var(--orj-paper); border-radius: 16px; color: var(--orj-ink); text-decoration: none !important; transition: background-color .2s ease; }
.orj-herk .orj-knipsel:hover { background: var(--orj-paper-donker); }
.orj-herk .orj-knipsel:active { background: #e5dccc; }
.orj-herk .orj-knipsel:focus-visible { outline: 2px solid var(--orj-green); outline-offset: 2px; }
.orj-knipsel-bron { align-self: flex-start; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid #e5dccc; font-size: 13.5px; line-height: 1; font-weight: 600; color: var(--orj-ink); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.orj-knipsel-kop { display: block; margin-top: 14px; font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--orj-ink); flex: 1 0 auto; hyphens: auto; -webkit-hyphens: auto; }
.orj-knipsel-datum { display: block; margin-top: 12px; font-size: 13.5px; line-height: 20px; font-weight: 500; color: #4b5563; }
/* Beat 2 · het blok */
.orj-herk-blok { position: relative; overflow: hidden; margin-top: 56px; background: var(--orj-mint); border-radius: 24px; padding: 64px 64px 64px 96px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; column-gap: 64px; align-items: center; }
.orj-herk-blok--zonder-spot { grid-template-columns: minmax(0, 1fr); }
.orj-herk-boog { position: absolute; top: 0; left: 0; width: 240px; height: 240px; pointer-events: none; }
.orj-herk-boog path { stroke: var(--orj-mint-donker); stroke-width: 12px; vector-effect: non-scaling-stroke; }
.orj-herk-blok-tekst { position: relative; max-width: 567px; }
.orj-herk-titel { margin: 0 !important; font-size: clamp(26px, 12px + 1.6vw, 34px) !important; font-weight: 700 !important; letter-spacing: -.025em !important; line-height: 1.12 !important; color: var(--orj-ink) !important; }
.orj-herk-tekst { margin: 16px 0 0 !important; font-size: 17px; line-height: 1.65; color: #4b5563; }
.orj-herk-knopvak { margin-top: 32px; }
/* Spot in de eigen donkere tint: de mint vullingen van orj_home_spot()
   worden mint-donker, zodat de tekening op het mint blok zichtbaar blijft. */
.orj-herk-spot { --orj-mint: var(--orj-mint-donker); position: relative; display: flex; justify-content: center; }
.orj-herk-spot svg { display: block; width: 220px; height: 220px; }
@media (prefers-reduced-motion: reduce) { .orj-herk .orj-knipsel { transition: none; } }
/* < 1120: gestapeld — kop en context (≤ 620), kaarten eronder, twee per rij. */
@media (max-width: 1119px) {
	.orj-media { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
}
/* < 960: het blok één kolom, de spot boven de kop op 112. */
@media (max-width: 959px) {
	.orj-herk-blok { grid-template-columns: minmax(0, 1fr); padding: 48px 40px; }
	.orj-herk-blok--zonder-spot { grid-template-columns: minmax(0, 1fr); }
	.orj-herk-spot { order: -1; justify-content: flex-start; margin-bottom: 16px; }
	.orj-herk-spot svg { width: 112px; height: 112px; }
	.orj-herk-boog { left: auto; right: 0; width: 200px; height: 200px; transform: scaleX(-1); }
}
/* < 640: één kaart per rij, zijmarge 32 zoals de strip, artikelkop 17
   ("Verlaging rechtsbijstandvergoeding" 277 in 281), knop full-width. */
@media (max-width: 639px) {
	.orj-herk .orj-wrap { padding: 48px 32px; }
	.orj-media { row-gap: 28px; }
	.orj-media-intro { font-size: 16px; }
	.orj-knipsels { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
	.orj-herk .orj-knipsel { padding: 20px; }
	.orj-knipsel-kop { font-size: 17px; margin-top: 12px; }
	.orj-herk-blok { margin-top: 40px; border-radius: 20px; padding: 32px 24px; }
	.orj-herk-boog { width: 140px; height: 140px; }
	.orj-herk-boog path { stroke-width: 10px; }
	.orj-herk-tekst { font-size: 16px; line-height: 1.6; }
	.orj-herk-knopvak { margin-top: 24px; }
	.orj-herk-knopvak .orj-cta { width: 100%; justify-content: center; }
}