/*
Theme Name:   WIJ.ZORGEN Child
Theme URI:    https://wij.zorgen.nu
Description:  Child theme of Impreza for WIJ.ZORGEN.NU.
Author:       Dexo
Template:     Impreza
Version:      1.0.0
Text Domain:  wijzorgen-child
*/

/* ============================================================================
   PORTED 2026-05-30 from the canonical V2 design system:
     Pages designs/wijzorgen.css  (phase-b/21 · CSS-V2-REFACTOR-REPORT.md)
   This is the SHARED system (tokens + dx--ru reusable + dx--su single + utils).
   NOT yet included: per-page @layer pages blocks (fold in per page during build)
   and the vacancy-single workstream (its template uses pre-V2 class names).
   @layer order: impreza < settings < generic < base < objects < components < utilities < pages.
   ============================================================================ */

@layer impreza, settings, generic, base, objects, components, utilities, pages;

/* ============================================================================
   WIJ.ZORGEN — shared stylesheet
   Consolidated from the 4 concept <style> blocks (Homepage, Professionals,
   Werkveld Gehandicaptenzorg, Vacatures Helpende). One rule per unique pattern.
   Architecture: phase-b/21. Tokens: phase-b/04. Rules: phase-b/19. Map: phase-b/03.
   Each concept HTML links this file + a small inline <style> into @layer pages.
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────
   SETTINGS — design tokens (--wz-*). No selector here outputs visual CSS.
   ───────────────────────────────────────────────────────────────────────── */
@layer settings {
  :root{
    /* brand — pink */
    --wz-pink:            #D4537E;
    --wz-pink-hover:      #BF3F6C;
    --wz-pink-light:      #FBEAF0;
    --wz-pink-mid:        #ED93B1;
    --wz-pink-soft:       #FCF5F8;
    --wz-pink-dark:       #72243E;
    --wz-pink-darkest:    #631830;
    --wz-pink-rgb:        212,83,126;

    /* brand — purple */
    --wz-purple:          #443285;
    --wz-purple-soft:     #E5E1F4;
    --wz-purple-deep:     #2E2259;
    --wz-purple-dark:     #261C4A;
    --wz-purple-darkest:  #17112D;
    --wz-purple-rgb:      68,50,133;
    --wz-purple-deep-rgb: 46,34,89;
    --wz-purple-dark-rgb: 38,28,74;

    /* ink */
    --wz-ink:             #171413;
    --wz-ink-soft:        #4B4642;
    --wz-ink-mute:        #807872;

    /* paper / surfaces — COOL tint scale, anchored on #F7F8FA (owner 2026-05-25;
       was a warm-cream scale). `paper` is the reference; `-warm`/`-deep` keep
       their token NAMES for cascade compatibility but are now cooler steps that
       harmonise with #F7F8FA (the "-warm" name is now historical, not literal). */
    --wz-paper:           #F7F8FA;
    --wz-paper-warm:      #EEF1F6;
    --wz-paper-deep:      #E4E9F1;
    --wz-white:           #FFFFFF;

    /* lines — neutral light-grey hairlines (owner 2026-05-26: prefer #eee over the
       cool blue-grey). --wz-line is the standard hairline used across all dividers,
       accordion/FAQ separators, u-surface--lined, and the header bottom rule. */
    --wz-line:            #EEEEEE;
    --wz-line-soft:       #F4F4F4;
    --wz-line-strong:     rgba(23,20,19,.12);   /* hairline that stays visible on paper / paper-warm surfaces (accordion dividers) */

    /* on-dark foreground tiers */
    --wz-on-dark-1:       rgba(255,255,255,0.85);
    --wz-on-dark-2:       rgba(255,255,255,0.70);
    --wz-on-dark-3:       rgba(255,255,255,0.55);
    --wz-on-dark-4:       rgba(255,255,255,0.40);

    /* typography */
    --wz-font-display:    'Open Sans', sans-serif;
    --wz-font-body:       'Montserrat', system-ui, sans-serif;

    /* radii */
    --wz-radius-sm:       10px;
    --wz-radius-md:       16px;
    --wz-radius-lg:       22px;
    --wz-radius-xl:       32px;
    --wz-radius-pill:     999px;

    /* elevation */
    --wz-shadow-card:     0 1px 2px rgba(23,20,19,.05), 0 18px 32px -20px rgba(23,20,19,.12);
    --wz-shadow-hover:    0 30px 48px -22px rgba(var(--wz-purple-deep-rgb),.22), 0 8px 16px rgba(23,20,19,.06);
    --wz-shadow-float:    0 30px 60px -28px rgba(var(--wz-purple-deep-rgb),.35), 0 8px 24px rgba(23,20,19,.08);

    /* motion */
    --wz-ease:            .22s ease;

    /* layout — one content model, aligned to the header's content box.
       --wz-inset = min side gap (4vw, matching the header; 24px floor on phones).
       --wz-edge  = viewport→content-box distance (== the header content edge):
                    grows to (100vw − content-max)/2 once the box centres. Used by
                    full-bleed sections so their content lines up with the header. */
    --wz-content-max:     1500px;
    --wz-content-wide:    1600px;
    --wz-content-narrow:  860px;
    --wz-inset:           max(24px, 4vw);
    --wz-edge:            max(var(--wz-inset), calc((100vw - var(--wz-content-max)) / 2));
    --wz-stap-cols:       7;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   GENERIC — reset, document defaults, focus, motion, noise.
   ───────────────────────────────────────────────────────────────────────── */
@layer generic {
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

  html{font-size:100%;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{
    font-family:var(--wz-font-body);
    font-size:1rem;
    line-height:1.6;
    color:var(--wz-ink);
    background:var(--wz-paper);
    font-synthesis:none;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }

  img{max-width:100%;display:block}
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--wz-pink);color:#fff}

  /* fine paper grain */
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.09  0 0 0 0 0.08  0 0 0 0 0.07  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode:multiply;opacity:.4;
  }

  /* focus ring — never rely on browser default */
  :focus-visible{outline:2px solid var(--wz-pink);outline-offset:3px;border-radius:2px}
  .dx--su-topbar :focus-visible,
  .dx--ru-eind-cta--on-dark :focus-visible,
  .u-surface-purple-deep :focus-visible,
  .dx--su-footer :focus-visible{outline-color:var(--wz-pink-mid)}

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
      scroll-behavior:auto !important;
    }
    .dx--ru-reveal,.dx--ru-reveal--stagger>*{opacity:1 !important;transform:none !important}
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   BASE — bare element typography.
   ───────────────────────────────────────────────────────────────────────── */
@layer base {
  h1,h2{font-family:var(--wz-font-display);font-weight:700;letter-spacing:-.028em;color:var(--wz-ink);line-height:1.04}
  h3,h4{font-family:var(--wz-font-body);font-weight:700;letter-spacing:-.015em;color:var(--wz-ink);line-height:1.18}
}

/* ─────────────────────────────────────────────────────────────────────────
   OBJECTS — layout primitives (skin-free).
   ───────────────────────────────────────────────────────────────────────── */
@layer objects {
  /* Content sits flush in the content box (== the header edge); the only side gap
     on narrow screens is --wz-inset (no inner gutter pushing content inward). */
  .o-container{width:min(100% - 2 * var(--wz-inset), var(--wz-content-max));margin-inline:auto}
  .o-container--wide{width:min(100% - 2 * var(--wz-inset), var(--wz-content-wide))}
  .o-container--narrow{width:min(100% - 2 * var(--wz-inset), var(--wz-content-narrow))}

  /* responsive card grids */
  .o-grid{display:grid;gap:14px}
  .o-grid--2{grid-template-columns:repeat(2,1fr)}
  .o-grid--3{grid-template-columns:repeat(3,1fr)}
  .o-grid--4{grid-template-columns:repeat(4,1fr)}

  /* 50/50 split section */
  .o-split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}

  @media (max-width:1080px){
    .o-grid--4{grid-template-columns:repeat(2,1fr)}
    .o-grid--3{grid-template-columns:1fr}
    .o-split{grid-template-columns:1fr}
  }
  @media (max-width:640px){
    .o-grid--4,.o-grid--3,.o-grid--2{grid-template-columns:1fr}
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   COMPONENTS — dx--ru-* (the bulk).
   ───────────────────────────────────────────────────────────────────────── */
@layer components {

  /* ── eyebrow (.eyebrow) ── */
  .dx--ru-eyebrow{
    display:inline-flex;align-items:center;gap:12px;
    font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
    color:var(--wz-pink);margin-bottom:22px;
  }
  .dx--ru-eyebrow::before{content:"";width:22px;height:1px;background:var(--wz-pink)}
  .dx--ru-eyebrow--on-dark{color:var(--wz-pink)}
  .dx--ru-eyebrow--on-dark::before{background:var(--wz-pink)}

  /* hairline (.hairline) */
  .dx--ru-hairline{height:1px;background:var(--wz-line);border:0}
  .dx--ru-hairline--pink{background:linear-gradient(to right,var(--wz-pink) 0%,var(--wz-pink) 36px,var(--wz-line) 36px)}

  /* ── buttons (.btn / .btn-*) ── */
  button {font-family: var(--wz-font-body)}
  .dx--ru-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    font-family:var(--wz-font-body);font-size:.92rem;font-weight:500;
    padding:13px 22px;border-radius:var(--wz-radius-pill);
    border:1px solid transparent;cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    white-space:nowrap;
  }
  .dx--ru-btn .dx--ru-arrow{display:inline-block;transition:transform .25s ease}
  .dx--ru-btn:hover .dx--ru-arrow{transform:translateX(3px)}
  .dx--ru-btn--primary{background:var(--wz-pink);color:#fff;box-shadow:0 8px 20px -10px rgba(var(--wz-pink-rgb),.6)}
  .dx--ru-btn--primary:hover{background:#e0608e;transform:translateY(-1px);box-shadow:0 14px 28px -12px rgba(var(--wz-pink-rgb),.8)}
  .dx--ru-btn--outline{background:transparent;color:var(--wz-ink);border-color:rgba(23,20,19,.15)}
  .dx--ru-btn--outline:hover{border-color:var(--wz-ink);transform:translateY(-1px)}
  .dx--ru-btn--ghost{background:transparent;color:var(--wz-ink);padding:13px 4px}
  .dx--ru-btn--ghost:hover{color:var(--wz-pink)}

  /* link-arrow — secondary text link (no button surface, pink + chevron) */
  .dx--ru-link-arrow{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--wz-font-body);font-size:.92rem;font-weight:500;
    color:var(--wz-pink);text-decoration:none;
    transition:gap .2s ease,color .2s ease;
  }
  .dx--ru-link-arrow:hover{gap:12px;text-decoration:underline}
  .dx--ru-link-arrow .dx--ru-arrow{transition:transform .2s ease}
  .dx--ru-link-arrow:hover .dx--ru-arrow{transform:translateX(2px)}
  .dx--ru-btn--on-purple{background:var(--wz-pink);color:var(--wz-white)}
  .dx--ru-btn--on-purple:hover{background:#e0608e;transform:translateY(-1px)}
  .dx--ru-btn--on-purple-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
  .dx--ru-btn--on-purple-outline:hover{border-color:#fff;background:rgba(255,255,255,.06)}

  /* ── topbar (.topbar-wrap + .util-bar + nav.topbar) ── */
  .dx--su-topbar{
    position:fixed;inset:0 0 auto 0;z-index:50;
  }
  /* No box-shadow, no scrolled/non-scrolled difference (owner 2026-05-26) — just a
     permanent subtle grey hairline under the nav (see .dx--su-topbar-nav). */
  .dx--su-topbar-util{
    background:var(--wz-purple-darkest);color:#fff;
    display:flex;align-items:center;justify-content:space-between;gap:24px;
    padding:7px var(--wz-inset);
    font-size:.8rem;letter-spacing:.01em;
  }
  .dx--su-topbar-util .dx--su-topbar-util__tag{color:rgba(255,255,255,.75);font-size:.76rem;font-weight:400;letter-spacing:.03em}
  .dx--su-topbar-util .dx--su-topbar-util__links{display:flex;align-items:center;gap:20px}
  .dx--su-topbar-util .dx--su-topbar-util__links a{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.82);font-weight:500;transition:color .2s}
  .dx--su-topbar-util .dx--su-topbar-util__links a:hover{color:var(--wz-purple-soft)}
  .dx--su-topbar-util .dx--su-topbar-util__links a i{font-size:13px;opacity:.7}
  .dx--su-topbar-util .dx--su-topbar-util__sep{width:1px;height:12px;background:rgba(255,255,255,.12)}
  /* In the Impreza header the topbar is split into a left (tag) and right
     (contact) cell that already sit inside the guttered subheader — so drop the
     util's own gutter (it double-indented the tag) and pin the contact to the
     cell's right edge, lining the tag up with the logo and the contact with the
     Vacatures CTA. */
  .l-header .dx--su-topbar-util{padding-left:0;padding-right:0;width:100%}
  .l-header .l-subheader-cell.at_right .dx--su-topbar-util{justify-content:flex-end}

  .dx--su-topbar-nav{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px var(--wz-inset);background:#fff;
    border-bottom:1px solid var(--wz-line);
  }
  .dx--su-topbar-nav .dx--su-topbar-nav__logo img{height:36px;width:auto}
  .dx--su-topbar-nav .dx--su-topbar-nav__links{display:flex;align-items:center;gap:32px}
  .dx--su-topbar-nav .dx--su-topbar-nav__links a{font-size:.92rem;color:var(--wz-ink-soft);font-weight:500;transition:color .2s;position:relative;padding:6px 0}
  .dx--su-topbar-nav .dx--su-topbar-nav__links a:hover{color:var(--wz-pink)}
  .dx--su-topbar-nav .dx--su-topbar-nav__links a.is-active{color:var(--wz-ink)}
  .dx--su-topbar-nav .dx--su-topbar-nav__links a.is-active::after{content:"";position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);width:16px;height:2px;background:var(--wz-pink);border-radius:2px}

  /* ── section header (.doelgroep-head / .anders-top / .werkveld-head / .traject-head /
        .ervaringen-head / .dx--ru-vlist__head / .dx--ru-vlist__head / .dx--ru-functies__head …) ──
     Base = left-aligned stacked head. --center = centered editorial head. */
  .dx--ru-section-header{
    display:flex;flex-direction:column;gap:18px;
    max-width:880px;margin-bottom:48px;
  }
  .dx--ru-section-header .dx--ru-eyebrow{margin-bottom:0}
  .dx--ru-section-header h2{font-size:clamp(2.1rem,3.6vw,3rem);letter-spacing:-.03em;line-height:1.04}
  .dx--ru-section-header h2 em{font-style:italic;color:var(--wz-pink)}
  .dx--ru-section-header h2 em.dx--ru-section-header__em--purple{color:var(--wz-purple)}
  /* Heading accent — `.dx--ru-accent` (span) is the alias for the design's <em>
     accent: `us_text` STRIPS <em>, so token-driven headings carry the accent word
     in a span instead. Mirrors the <em> rules (pink+italic default; the normal /
     purple sections override). <em> stays valid in WYSIWYG / HTML contexts. */
  h2 .dx--ru-accent{font-style:italic;color:var(--wz-pink)}
  .dx--ru-section-header h2 .dx--ru-accent.dx--ru-section-header__em--purple{color:var(--wz-purple)}
  .dx--ru-functies .dx--ru-functies__head h2 .dx--ru-accent,
  .dx--ru-bijzonder .dx--ru-bijzonder__text h2 .dx--ru-accent,
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__intro h2 .dx--ru-accent,
  .dx--ru-pgvm .dx--ru-pgvm__head h2 .dx--ru-accent{font-style:normal}
  .dx--ru-verschillen .dx--ru-verschillen__head h2 .dx--ru-accent{font-style:normal;color:var(--wz-purple)}
  .dx--ru-section-header .dx--ru-section-header__intro .dx--ru-accent{font-style:italic;color:var(--wz-purple)}
  /* Syne kicker intro (doelgroep / anders / vacatures) */
  .dx--ru-section-header .dx--ru-section-header__intro{
    font-family:var(--wz-font-display);
    font-size:clamp(1.1rem,1.4vw,1.25rem);
    font-weight:400;letter-spacing:-.01em;line-height:1.4;
    color:var(--wz-ink-soft);max-width:62ch;margin-top:4px;
  }
  .dx--ru-section-header .dx--ru-section-header__intro em{font-style:italic;color:var(--wz-purple);}
  /* centered variant (werkveld / traject / ervaringen) */
  .dx--ru-section-header--center{
    align-items:center;text-align:center;gap:14px;
    max-width:880px;margin-left:auto;margin-right:auto;margin-bottom:44px;
  }
  /* center modifier for a narrow text-only lead/body (e.g. intro prose under a centered header) */
  .dx--ru-lead--center{text-align:center;margin-left:auto;margin-right:auto}
  .dx--ru-section-header--center .dx--ru-section-header__intro{
    font-family:var(--wz-font-body);
    font-weight:350;letter-spacing:0;line-height:1.55;
    font-size:clamp(.95rem,1.15vw,1.05rem);
    color:#1A1A18;max-width:62ch;margin-top:4px;
  }

  /* ── icon circle — reusable pink-soft round icon holder. Default 34px; --sm 24px; --lg 56px.
     Used directly by contact-card + recruiter-card (34px) and richtingen (--lg, 56px).
     Components needing a distinct size/border (bijzonder 48px+border, verschillen 54px) keep
     their own scoped icon class on purpose. */
  .dx--ru-icon-circle{
    width:34px;height:34px;border-radius:50%;
    background:var(--wz-pink-soft);color:var(--wz-pink);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .dx--ru-icon-circle i{font-size:15px}
  .dx--ru-icon-circle--sm{width:24px;height:24px}
  .dx--ru-icon-circle--sm i{font-size:14px}
  .dx--ru-icon-circle--lg{width:56px;height:56px}
  .dx--ru-icon-circle--lg i{font-size:24px}

  /* ── base card (.persona-card / .wv-card / .erv-card / .vac-card / .contact-card …) ──
     White surface, hairline border, lg radius, card shadow, hover lift. */
  .dx--ru-card{
    position:relative;background:#fff;
    border-radius:var(--wz-radius-lg);
    box-shadow:var(--wz-shadow-card);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .dx--ru-card:hover{transform:translateY(-4px);box-shadow:var(--wz-shadow-hover)}

  /* persona card (homepage doelgroep) */
  .dx--ru-card--persona{
    padding:40px 36px 28px;display:flex;flex-direction:column;
  }
  .dx--ru-card--persona:hover{transform:translateY(-6px);box-shadow:var(--wz-shadow-hover)}
  .dx--ru-card--persona .dx--ru-eyebrow{margin-bottom:22px}
  .dx--ru-card--persona h3{
    font-family:var(--wz-font-body);font-weight:700;
    font-size:clamp(1.6rem,2.4vw,2.1rem);letter-spacing:-.024em;line-height:1.12;
    margin-bottom:20px;max-width:18ch;color:var(--wz-ink);
  }
  .dx--ru-card--persona p{color:var(--wz-ink-soft);font-size:.97rem;line-height:1.65;margin-bottom:28px;flex:1}
  .dx--ru-card--persona .dx--ru-card__go{
    display:inline-flex;align-items:center;gap:8px;
    font-weight:500;color:var(--wz-pink);font-size:.95rem;
    padding-top:18px;border-top:1px solid var(--wz-line-soft);
  }
  .dx--ru-card--persona:hover .dx--ru-card__go .dx--ru-arrow{transform:translateX(4px)}

  /* werkveld card (.wv-card) */
  .dx--ru-card--werkveld{
    overflow:hidden;display:flex;flex-direction:column;
  }
  .dx--ru-card--werkveld:hover{transform:translateY(-6px);box-shadow:var(--wz-shadow-hover)}
  .dx--ru-card--werkveld .dx--ru-card--werkveld__ph{
    aspect-ratio:5/4;overflow:hidden;position:relative;
    display:flex;align-items:center;justify-content:center;
  }
  .dx--ru-card--werkveld.dx--ru-card__type--gehandicapten .dx--ru-card--werkveld__ph{background:linear-gradient(135deg,#F1ECE3 0%,#E3D7C0 100%)}
  .dx--ru-card--werkveld.dx--ru-card__type--ouderen     .dx--ru-card--werkveld__ph{background:linear-gradient(135deg,#FBEAF0 0%,#E9C5D2 100%)}
  .dx--ru-card--werkveld.dx--ru-card__type--thuis       .dx--ru-card--werkveld__ph{background:linear-gradient(135deg,#EEEDFE 0%,#C8C4F1 100%)}
  .dx--ru-card--werkveld.dx--ru-card__type--ggz         .dx--ru-card--werkveld__ph{background:linear-gradient(135deg,#E6EEEA 0%,#B8CFC3 100%)}
  .dx--ru-card--werkveld.dx--ru-card__type--foto .dx--ru-card--werkveld__ph{background:var(--wz-paper-warm)}
  .dx--ru-card--werkveld.dx--ru-card__type--foto .dx--ru-card--werkveld__ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s ease}
  .dx--ru-card--werkveld.dx--ru-card__type--foto:hover .dx--ru-card--werkveld__ph img{transform:scale(1.05)}
  .dx--ru-card--werkveld.dx--ru-card__type--foto .dx--ru-card--werkveld__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(var(--wz-purple-deep-rgb),.18) 100%)}
  .dx--ru-card--werkveld .dx--ru-card--werkveld__glyph{
    width:64px;height:64px;border-radius:50%;
    background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);
    display:flex;align-items:center;justify-content:center;color:var(--wz-purple);
    box-shadow:0 6px 24px -10px rgba(var(--wz-purple-deep-rgb),.3);
    transition:transform .4s ease;
  }
  .dx--ru-card--werkveld .dx--ru-card--werkveld__glyph i{font-size:26px}
  .dx--ru-card--werkveld:hover .dx--ru-card--werkveld__glyph{transform:scale(1.05) rotate(-3deg)}
  .dx--ru-card--werkveld .dx--ru-card--werkveld__num{
    position:absolute;top:14px;left:14px;
    background:rgba(255,253,250,.94);color:var(--wz-pink);
    padding:5px 11px;border-radius:var(--wz-radius-pill);
    font-family:var(--wz-font-display);font-size:.7rem;letter-spacing:.14em;font-weight:700;
  }
  .dx--ru-card--werkveld .dx--ru-card--werkveld__body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
  .dx--ru-card--werkveld .dx--ru-card--werkveld__body h3{font-size:1.15rem;margin-bottom:8px;letter-spacing:-.01em}
  .dx--ru-card--werkveld .dx--ru-card--werkveld__body p{color:var(--wz-ink-soft);font-size:.9rem;flex:1;margin-bottom:16px;line-height:1.55}
  .dx--ru-card--werkveld .dx--ru-card--werkveld__go{color:var(--wz-pink);font-weight:500;font-size:.88rem;display:inline-flex;align-items:center;gap:6px}
  .dx--ru-card--werkveld:hover .dx--ru-card--werkveld__go .dx--ru-arrow{transform:translateX(4px)}

  /* ervaring card (.erv-card) — photo banner is the differentiator */
  .dx--ru-card--ervaring{overflow:hidden;display:flex;flex-direction:column}
  /* In an Impreza grid this card renders as a content-width w-vwrapper (align_left); make it fill the
     grid column + stretch its children. 3-class selector beats .w-vwrapper.align_left without !important. */
  .w-grid-item .dx--ru-card--ervaring.w-vwrapper{width:100%;align-items:stretch}
  .dx--ru-card--ervaring .dx--ru-card--ervaring__photo{
    position:relative;aspect-ratio:5/3;overflow:hidden;
    background:linear-gradient(135deg, var(--wz-paper-warm) 0%, var(--wz-paper-deep) 60%, var(--wz-purple-soft) 100%);
    /* author cards set the portrait via inline bg-image (lazyload data-bg-image), no <img> child —
       crop+center it like the post_image (<img>) cards instead of native top-left tiling */
    background-size:cover;background-position:center;background-repeat:no-repeat;
  }
  .dx--ru-card--ervaring .dx--ru-card--ervaring__photo img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
  .dx--ru-card--ervaring:hover .dx--ru-card--ervaring__photo img{transform:scale(1.04)}
  .dx--ru-card--ervaring .dx--ru-card--ervaring__photo::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg, transparent 60%, rgba(var(--wz-purple-deep-rgb),.18) 100%);
    pointer-events:none;
  }
  .dx--ru-card--ervaring .dx--ru-card--ervaring__photo.is-placeholder::before{
    content:"Portretfoto (TBD)";
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:var(--wz-font-display);font-style:italic;color:rgba(var(--wz-purple-deep-rgb),.45);
    font-size:.85rem;letter-spacing:.04em;
  }
  /* role-tag — small pink uppercase eyebrow-style badge on ervaring card (replaces the old star rating). */
  .dx--ru-card--ervaring .dx--ru-card--ervaring__role-tag{
    position:absolute;top:14px;left:14px;z-index:2;
    background:rgba(255,255,255,.94);padding:5px 11px;border-radius:var(--wz-radius-pill);
    color:var(--wz-pink);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
    backdrop-filter:blur(6px);
  }
  .dx--ru-card--ervaring .dx--ru-card--ervaring__body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:14px;flex:1}
  .dx--ru-card--ervaring .dx--ru-card--ervaring__quote{font-family:var(--wz-font-body);font-size:1.18rem;font-weight:600;line-height:1.32;letter-spacing:-.012em;color:#1A1A18}
  .dx--ru-card--ervaring .dx--ru-card--ervaring__excerpt{color:var(--wz-ink-soft);font-size:.92rem;line-height:1.6;flex:1}
  .dx--ru-card--ervaring .dx--ru-card--ervaring__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:14px;border-top:1px solid var(--wz-line-soft)}
  .dx--ru-card--ervaring .dx--ru-card--ervaring__meta{display:flex;flex-direction:column;gap:2px;min-width:0}
  .dx--ru-card--ervaring .dx--ru-card--ervaring__name{font-family:var(--wz-font-body);font-weight:700;font-size:.95rem;color:var(--wz-ink);letter-spacing:-.01em;line-height:1.2;margin:0 !important}
  .dx--ru-card--ervaring .dx--ru-card--ervaring__role{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wz-pink);font-weight:700}
  .dx--ru-card--ervaring .dx--ru-card--ervaring__link{font-size:.85rem;color:var(--wz-ink-mute);font-weight:500;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
  .dx--ru-card--ervaring .dx--ru-card--ervaring__link:hover{color:var(--wz-pink)}
  .dx--ru-card--ervaring .dx--ru-card--ervaring__link .dx--ru-arrow{transition:transform .25s ease}
  .dx--ru-card--ervaring:hover .dx--ru-card--ervaring__link .dx--ru-arrow{transform:translateX(3px)}

  /* vacancy card (.vac-card) — permanent 5px pink left stripe (sitewide vacancy marker).
     Drift reconciled: border → var(--wz-line), radius → var(--wz-radius-lg) (was 18px on werkveld/helpende). */
  .dx--ru-card--vacancy{
    padding:24px 26px;display:flex;flex-direction:column;gap:14px;
    overflow:hidden;
  }
  .dx--ru-card--vacancy::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
    background:var(--wz-pink);
  }
  .dx--ru-card--vacancy .dx--ru-card--vacancy__meta-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .dx--ru-card--vacancy .dx--ru-card--vacancy__chip{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:5px 10px;border-radius:var(--wz-radius-pill)}
  .dx--ru-card--vacancy .dx--ru-card--vacancy__chip.dx--ru-card__chip--route{background:var(--wz-pink-soft);color:var(--wz-pink)}
  .dx--ru-card--vacancy .dx--ru-card--vacancy__chip.dx--ru-card__chip--werkveld{background:var(--wz-pink-soft);color:var(--wz-pink)}
  .dx--ru-card--vacancy .dx--ru-card--vacancy__title{font-family:var(--wz-font-body);font-size:1.32rem;font-weight:700;line-height:1.16;letter-spacing:-.02em;margin-top:4px}
  /* meta items group in one inline-wrap row (concept .meta) — location · uren ·
     salaris · opleiding flow horizontally and wrap, instead of stacking. */
  .dx--ru-card--vacancy .dx--ru-card--vacancy__meta-list{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
  .dx--ru-card--vacancy .dx--ru-card--vacancy__meta{display:inline-flex;align-items:center;gap:8px;color:var(--wz-ink-mute);font-size:.85rem}
  .dx--ru-card--vacancy .dx--ru-card--vacancy__meta i{font-size:14px;color:var(--wz-pink)}
  .dx--ru-card--vacancy .dx--ru-card--vacancy__sfeer{color:var(--wz-ink-soft);font-size:.92rem;font-style:italic;line-height:1.55;flex:1}
  .dx--ru-card--vacancy .dx--ru-card--vacancy__foot{display:flex;justify-content:flex-end;align-items:center;padding-top:18px;border-top:1px solid var(--wz-line-soft)}
  .dx--ru-card--vacancy .dx--ru-card--vacancy__foot .dx--ru-arrow{color:var(--wz-pink);font-weight:500;font-size:.88rem}
  /* /vacatures feed results render as <ul class="job_listings"> inside the 3/4
     .dx--su-vacancies-list column (the [jobs] shortcode). The concept feed is a
     SINGLE column of full-width rich cards + strip the default list chrome so each
     li.dx--ru-vlist__item is a grid cell its card fills (content-job_listing.php
     emits the card markup). */
  .dx--su-vacancies-list ul.job_listings{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:18px;border-top:none!important;}
  .dx--su-vacancies-list ul.job_listings > li.dx--ru-vlist__item{list-style:none;margin:0;padding:0;display:flex}
  .dx--su-vacancies-list ul.job_listings > li.dx--ru-vlist__item::before{display:none}
  .dx--su-vacancies-list ul.job_listings > li.dx--ru-vlist__item > .dx--ru-card--vacancy{width:100%}

  /* functie card (.fn-card) — number-in-circle, inset pseudo-element dividers */
  .dx--ru-card--functie{
    display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto;gap:0 28px;
    padding:40px clamp(24px,2.5vw,36px) 36px clamp(24px,2.5vw,36px);
    background:transparent;border:0;border-radius:0;box-shadow:none;
    text-decoration:none;position:relative;transition:background .25s ease;
  }
  .dx--ru-card--functie:hover{background:rgba(0,0,0,.015);transform:none}
  .dx--ru-card--functie::after{content:"";position:absolute;right:0;top:28px;bottom:28px;width:1px;background:var(--wz-line)}
  .dx--ru-card--functie:nth-child(3n)::after{display:none}
  .dx--ru-card--functie::before{content:"";position:absolute;bottom:0;left:0;right:28px;height:1px;background:var(--wz-line)}
  .dx--ru-card--functie:nth-last-child(-n+3)::before{display:none}
  .dx--ru-card--functie:hover h3{color:var(--wz-pink)}
  .dx--ru-card--functie:hover .dx--ru-card--functie__foot .dx--ru-arrow{transform:translateX(4px)}
  .dx--ru-card--functie .dx--ru-card--functie__icon{
    width:74px;height:74px;border-radius:50%;
    background:var(--wz-pink-soft);color:var(--wz-pink);
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    grid-column:1;grid-row:1 / span 3;align-self:start;margin-top:4px;
    font-family:var(--wz-font-display);font-weight:600;font-size:1.7rem;letter-spacing:-.01em;line-height:1;
  }
  .dx--ru-card--functie h3{
    grid-column:2;grid-row:1;
    font-family:var(--wz-font-body);font-weight:700;font-size:clamp(1.2rem,1.45vw,1.35rem);
    letter-spacing:-.012em;line-height:1.2;color:var(--wz-ink);margin:0 0 14px;transition:color .2s ease;
  }
  .dx--ru-card--functie p{grid-column:2;grid-row:2;color:var(--wz-ink-soft);font-size:.95rem;line-height:1.55;margin:0;max-width:34ch}
  .dx--ru-card--functie .dx--ru-card--functie__foot{
    grid-column:1 / -1;grid-row:3;display:flex;justify-content:space-between;align-items:center;
    color:var(--wz-pink);font-weight:500;font-size:.95rem;padding:0;border-top:none;margin-top:28px;align-self:end;
  }
  .dx--ru-card--functie .dx--ru-card--functie__foot .dx--ru-arrow{display:inline-block;transition:transform .25s ease;color:var(--wz-pink);font-weight:500}

  /* feature card — richtingen route card (.rk-card) */
  .dx--ru-card--feature{
    border-color:var(--wz-line-soft);border-radius:18px;box-shadow:none;
    padding:clamp(24px,2.2vw,32px);
    display:flex;flex-direction:column;gap:18px;text-decoration:none;color:inherit;
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .dx--ru-card--feature:hover{
    border-color:rgba(var(--wz-pink-rgb),.3);
    box-shadow:0 1px 2px rgba(23,20,19,.03), 0 20px 40px -28px rgba(23,20,19,.16);
    transform:translateY(-1px);
  }
  .dx--ru-card--feature .dx--ru-card--feature__head{display:flex;align-items:center;gap:20px}
  .dx--ru-card--feature h3{font-family:var(--wz-font-body);font-weight:700;font-size:clamp(1.05rem,1.25vw,1.2rem);letter-spacing:-.014em;line-height:1.18;color:var(--wz-ink);margin:0}
  .dx--ru-card--feature p{color:var(--wz-ink-soft);font-size:.92rem;line-height:1.62;margin:0;flex:1 1 auto}
  .dx--ru-card--feature .dx--ru-card--feature__link{color:var(--wz-pink);font-family:var(--wz-font-body);font-weight:600;font-size:.95rem;text-decoration:none;display:inline-flex;align-items:center;gap:10px;width:fit-content;margin-top:4px;transition:gap .2s ease}
  .dx--ru-card--feature:hover .dx--ru-card--feature__link{gap:14px}
  .dx--ru-card--feature .dx--ru-card--feature__link .dx--ru-arrow{transition:transform .2s ease}
  .dx--ru-card--feature:hover .dx--ru-card--feature__link .dx--ru-arrow{transform:translateX(2px)}

  /* ── list rows & bullets ── */
  /* Shared row shell — contact-card + recruiter-card method rows both use .dx--ru-list-row
     (their rows were byte-identical; consolidated). Container stays .dx--ru-*-card__rows. */
  .dx--ru-list-row{
    display:flex;align-items:center;gap:14px;
    padding:14px 0;border-bottom:1px solid var(--wz-line-soft);
    color:var(--wz-ink);font-weight:500;font-size:.97rem;transition:color .2s;
  }
  .dx--ru-list-row:last-of-type{border-bottom:0}
  .dx--ru-list-row:hover{color:var(--wz-pink)}
  /* non-interactive info variant — same shell, no hover pink, no pointer */
  .dx--ru-list-row--info{cursor:default}
  .dx--ru-list-row--info:hover{color:var(--wz-ink)}
  .dx--ru-list-row--info:hover .dx--ru-arrow{transform:none;color:var(--wz-ink-mute)}
  .dx--ru-list-row .dx--ru-contact-card__meta{display:flex;flex-direction:column;gap:2px;flex:1}
  .dx--ru-list-row .dx--ru-contact-card__meta .dx--ru-contact-card__label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--wz-ink-mute);font-weight:600}
  .dx--ru-list-row .dx--ru-contact-card__meta .dx--ru-contact-card__value{font-family:var(--wz-font-display);font-size:1.05rem;letter-spacing:-.012em;color:inherit;font-weight:600}
  .dx--ru-list-row .dx--ru-arrow{color:var(--wz-ink-mute);transition:transform .25s, color .2s}
  .dx--ru-list-row:hover .dx--ru-arrow{transform:translateX(3px);color:var(--wz-pink)}

  /* check/cross bullet lists (.dx--ru-pgvm__list / .dx--ru-herken__bullets) */
  .dx--ru-bullets{list-style:none;display:flex;flex-direction:column;gap:0}
  .dx--ru-bullets li{
    display:grid;grid-template-columns:28px 1fr;gap:18px;align-items:center;
    padding:18px 0;color:var(--wz-ink);font-size:.98rem;line-height:1.5;
    border-top:1px solid rgba(var(--wz-purple-rgb),.10);
  }
  .dx--ru-bullets li:last-child{border-bottom:none}
  .dx--ru-bullets--check li .dx--ru-bullets__icon{width:24px;height:24px;color:var(--wz-pink);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
  .dx--ru-bullets--check li .dx--ru-bullets__icon i{font-size:21px}
  .dx--ru-bullets--cross li .dx--ru-bullets__icon{width:24px;height:24px;color:var(--wz-purple);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
  .dx--ru-bullets--cross li .dx--ru-bullets__icon i{font-size:21px}

  /* ── HERO shell (.hero / .hero-gcsp / .hero-werkveld / .hero-functie) ──
     Base = two-column split, white copy side. Variants tune ratios + min-height. */
  .dx--ru-hero{
    position:relative;z-index:2;padding:0;
    display:flex;align-items:stretch;
    min-height:min(96vh,860px);
  }
  /* WPBakery wraps the columns in .l-section-h > .g-cols, so the 2-col split is done by
     the WPBakery grid (1/2 + 1/2); .l-section-h must fill the flex + the columns stretch. */
  .dx--ru-hero > .l-section-h{width:100%;align-self:stretch}
  .dx--ru-hero > .l-section-h > .g-cols{height:100%;align-items:stretch}
  .dx--ru-hero .dx--ru-hero__visual .w-image,
  .dx--ru-hero .dx--ru-hero__visual .w-image > .w-image-h{height:100%;width:100%;display:block}
  .dx--ru-hero .dx--ru-hero__side{
    display:flex;flex-direction:column;justify-content:center;
    /* left padding = the header inset so the hero text lines up with the header/nav
       (== the home hero); right is just the gap before the bleeding photo column. */
    padding:216px var(--wz-inset) 126px var(--wz-inset);
    position:relative;background:#fff;
  }
  .dx--ru-hero h1{
    font-size:clamp(2.6rem,5.2vw,4.1rem);
    font-weight:700;letter-spacing:-.038em;line-height:1.15;
    margin-bottom:24px;max-width:18ch;
  }
  .dx--ru-hero h1 .dx--ru-hero__nb{white-space:nowrap}
  .dx--ru-hero h1 .dx--ru-accent{color:var(--wz-pink);position:relative}
  .dx--ru-hero .dx--ru-hero__lead{font-size:1.06rem;color:var(--wz-ink-soft);max-width:48ch;line-height:1.65;margin-bottom:30px}
  .dx--ru-hero .dx--ru-hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:36px}
  .dx--ru-hero .dx--ru-hero__tags{display:flex;flex-wrap:wrap;gap:8px}
  .dx--ru-hero .dx--ru-hero__tag{
    font-size:.82rem;color:var(--wz-ink-soft);
    background:#fff;border:1px solid var(--wz-line);
    border-radius:var(--wz-radius-pill);padding:7px 14px;
    transition:all .2s;cursor:pointer;font-weight:500;
  }
  .dx--ru-hero .dx--ru-hero__tag:hover{border-color:var(--wz-pink-mid);color:var(--wz-pink);background:var(--wz-pink-soft);transform:translateY(-1px)}
  .dx--ru-hero .dx--ru-hero__visual{position:relative;overflow:hidden;background:var(--wz-paper-warm);margin-right:calc(var(--wz-inset) * -1)}
  .dx--ru-hero .dx--ru-hero__visual img{width:100%;height:100%;object-fit:cover;object-position:62% 32%;transform:scale(1.04);transition:transform 9s ease-out, filter .6s ease}
  .dx--ru-hero .dx--ru-hero__visual.is-loaded img{transform:scale(1)}
  .dx--ru-hero .dx--ru-hero__visual::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(var(--wz-purple-deep-rgb),.22) 0%,rgba(var(--wz-purple-deep-rgb),0) 22%,rgba(var(--wz-purple-deep-rgb),0) 60%,rgba(var(--wz-purple-deep-rgb),.22) 100%);
    pointer-events:none;
  }
  /* hero stats overlay (homepage) */
  .dx--ru-hero .dx--ru-hero__stats{
    position:absolute;bottom:0;left:0;right:0;
    display:grid;grid-template-columns:repeat(4,1fr);
    background:linear-gradient(180deg,transparent 0,rgba(var(--wz-purple-deep-rgb),.55) 60%);
    padding:34px 26px 22px;color:#fff;
  }
  .dx--ru-hero .dx--ru-hero__stat .dx--ru-hero__stat-n{font-family:var(--wz-font-display);font-size:1.85rem;font-weight:700;line-height:1;letter-spacing:-.02em}
  .dx--ru-hero .dx--ru-hero__stat .dx--ru-hero__stat-l{font-size:.72rem;color:rgba(255,255,255,.78);margin-top:6px;letter-spacing:.04em}
  /* hero USP overlay (homepage) — vertical chip list replacing stat numbers. */
  .dx--ru-hero .dx--ru-hero__usps{
    position:absolute;left:0;right:0;bottom:0;
    display:flex;flex-direction:column;gap:8px;
    background:linear-gradient(180deg,transparent 0,rgba(var(--wz-purple-deep-rgb),.62) 60%);
    padding:34px 28px 24px;color:#fff;
  }
  .dx--ru-hero .dx--ru-hero__usp{display:flex;align-items:center;gap:10px;margin:0;font-size:.92rem;line-height:1.35;color:rgba(255,255,255,.92)}
  .dx--ru-hero .dx--ru-hero__usp i{color:var(--wz-pink);font-size:.95rem}

  /* hero --gcsp (Professionals): page-context wayfinding + testimonial overlay */
  .dx--ru-hero--gcsp{min-height:min(92vh,820px)}
  .dx--ru-hero--gcsp h1{font-size:clamp(2.4rem,4.8vw,3.8rem);letter-spacing:-.036em;line-height:1.15;margin-bottom:22px}
  .dx--ru-hero--gcsp .dx--ru-hero__lead{max-width:50ch}
  .dx--ru-hero--gcsp .dx--ru-hero__ctas{margin-bottom:22px}
  .dx--ru-hero--gcsp .dx--ru-hero__visual img{object-position:50% 36%}
  .dx--ru-hero .dx--ru-hero__context-back{
    display:inline-flex;align-items:center;gap:8px;
    font-size:.82rem;color:var(--wz-ink-mute);font-weight:500;
    margin-bottom:14px;transition:color .2s;width:fit-content;
  }
  .dx--ru-hero .dx--ru-hero__context-back:hover{color:var(--wz-pink)}
  .dx--ru-hero .dx--ru-hero__context-back i{font-size:14px}
  .dx--ru-hero .dx--ru-hero__context-tag{
    display:inline-flex;align-items:center;
    font-family:var(--wz-font-display);font-weight:700;
    font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
    color:var(--wz-purple-deep);background:var(--wz-purple-soft);
    padding:8px 18px;border-radius:var(--wz-radius-pill);
    margin-bottom:24px;width:fit-content;
  }
  .dx--ru-hero .dx--ru-hero__trust{color:var(--wz-ink-mute);font-size:.92rem;font-style:italic;line-height:1.55;max-width:48ch}
  .dx--ru-hero .dx--ru-hero__visual.is-placeholder{
    background:
      radial-gradient(circle at 30% 30%, rgba(var(--wz-pink-rgb),.15) 0%, transparent 55%),
      radial-gradient(circle at 70% 70%, rgba(var(--wz-purple-rgb),.18) 0%, transparent 55%),
      linear-gradient(135deg, var(--wz-paper-warm) 0%, var(--wz-paper-deep) 100%);
  }
  .dx--ru-hero .dx--ru-hero__visual.is-placeholder .dx--ru-hero__placeholder-label{
    position:absolute;top:24px;left:28px;z-index:2;
    font-family:var(--wz-font-display);font-style:italic;color:rgba(var(--wz-purple-deep-rgb),.55);
    font-size:.85rem;letter-spacing:.04em;
  }
  .dx--ru-hero .dx--ru-hero__testimonial{
    position:absolute;bottom:36px;left:36px;right:36px;max-width:380px;
    background:rgba(255,255,255,.96);padding:22px 24px 20px;border-radius:var(--wz-radius-lg);
    box-shadow:0 24px 50px -20px rgba(var(--wz-purple-deep-rgb),.35), 0 4px 12px rgba(0,0,0,.08);
    backdrop-filter:blur(8px);z-index:3;
  }
  .dx--ru-hero .dx--ru-hero__testimonial .dx--ru-hero__testimonial-quote{font-family:var(--wz-font-display);font-size:1.08rem;font-weight:600;line-height:1.32;letter-spacing:-.014em;color:var(--wz-ink);margin-bottom:14px}
  .dx--ru-hero .dx--ru-hero__testimonial .dx--ru-hero__testimonial-meta{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--wz-line-soft)}
  .dx--ru-hero .dx--ru-hero__testimonial .dx--ru-hero__testimonial-avatar{width:32px;height:32px;border-radius:50%;background:var(--wz-purple-soft);color:var(--wz-purple);display:flex;align-items:center;justify-content:center;font-family:var(--wz-font-display);font-weight:700;font-size:.78rem;flex-shrink:0}
  .dx--ru-hero .dx--ru-hero__testimonial .dx--ru-hero__testimonial-role{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wz-pink);font-weight:700}
  .dx--ru-hero .dx--ru-hero__testimonial .dx--ru-hero__testimonial-name{font-family:var(--wz-font-display);font-size:.92rem;font-weight:700;color:var(--wz-ink);letter-spacing:-.01em;line-height:1.2}

  /* hero --werkveld / --functie (archive heroes): mild asymmetry, real photo + badge */
  .dx--ru-hero--werkveld,.dx--ru-hero--functie{grid-template-columns:1.05fr 1fr;min-height:100vh}
  .dx--ru-hero--werkveld .dx--ru-hero__side,.dx--ru-hero--functie .dx--ru-hero__side{padding:184px clamp(40px,5.5vw,96px) 104px var(--wz-inset)}
  .dx--ru-hero--werkveld .dx--ru-hero__context-back,.dx--ru-hero--functie .dx--ru-hero__context-back{margin-bottom:18px}
  .dx--ru-hero--werkveld .dx--ru-hero__context-tag,.dx--ru-hero--functie .dx--ru-hero__context-tag{margin-bottom:32px}
  .dx--ru-hero--werkveld .dx--ru-hero__eyebrow-line,.dx--ru-hero--functie .dx--ru-hero__eyebrow-line{
    font-family:var(--wz-font-body);font-style:italic;font-weight:400;color:var(--wz-pink);font-size:.92rem;margin-bottom:22px;
  }
  .dx--ru-hero--werkveld h1,.dx--ru-hero--functie h1{
    font-size:clamp(1.9rem,3.4vw,3rem);font-weight:700;letter-spacing:-.032em;line-height:1.04;
    margin-bottom:28px;max-width:none;overflow-wrap:break-word;
  }
  .dx--ru-hero--werkveld .dx--ru-hero__lead,.dx--ru-hero--functie .dx--ru-hero__lead{font-size:1rem;max-width:none;margin-bottom:12px}
  .dx--ru-hero--werkveld .dx--ru-hero__ctas,.dx--ru-hero--functie .dx--ru-hero__ctas{margin:20px 0 18px}
  .dx--ru-hero--werkveld .dx--ru-hero__trust,.dx--ru-hero--functie .dx--ru-hero__trust{font-size:.9rem;max-width:none}
  .dx--ru-hero--werkveld .dx--ru-hero__visual img,.dx--ru-hero--functie .dx--ru-hero__visual img{object-position:50% 22%}
  .dx--ru-hero--werkveld .dx--ru-hero__visual::after,.dx--ru-hero--functie .dx--ru-hero__visual::after{
    background:linear-gradient(180deg,rgba(var(--wz-purple-deep-rgb),.20) 0%,rgba(var(--wz-purple-deep-rgb),0) 22%,rgba(var(--wz-purple-deep-rgb),0) 55%,rgba(var(--wz-purple-deep-rgb),.32) 100%);
  }
  .dx--ru-hero .is-photo-tbd{
    position:absolute;top:24px;right:24px;z-index:3;
    background:rgba(0,0,0,.45);color:rgba(255,255,255,.95);
    font-family:var(--wz-font-display);font-weight:700;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
    padding:6px 12px;border-radius:var(--wz-radius-pill);backdrop-filter:blur(6px);
  }
  .dx--ru-hero .dx--ru-hero__badge{
    position:absolute;bottom:32px;left:32px;right:32px;z-index:3;
    display:flex;align-items:center;gap:14px;
    background:rgba(255,255,255,.96);padding:16px 20px;border-radius:var(--wz-radius-md);
    box-shadow:0 18px 40px -18px rgba(var(--wz-purple-deep-rgb),.40);backdrop-filter:blur(6px);max-width:380px;
  }
  .dx--ru-hero .dx--ru-hero__badge .dx--ru-hero__badge-glyph{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--wz-pink-mid);color:var(--wz-pink);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .dx--ru-hero .dx--ru-hero__badge .dx--ru-hero__badge-glyph i{font-size:20px}
  .dx--ru-hero .dx--ru-hero__badge .dx--ru-hero__badge-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
  .dx--ru-hero .dx--ru-hero__badge .dx--ru-hero__badge-tag{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--wz-pink);font-weight:700}
  .dx--ru-hero .dx--ru-hero__badge .dx--ru-hero__badge-name{font-family:var(--wz-font-display);font-weight:700;color:var(--wz-ink);font-size:1rem;letter-spacing:-.012em;line-height:1.2}

  /* ── herken block (.herken + .dx--ru-herken__video + .dx--ru-herken__text) ── */
  .dx--ru-herken .dx--ru-herken__grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .dx--ru-herken .dx--ru-herken__video{
    position:relative;overflow:hidden;
    background:transparent;
    display:flex;align-items:center;justify-content:center;min-height:580px;cursor:pointer;transition:transform .4s ease;
  }
  .dx--ru-herken .dx--ru-herken__video::before{
    content:"";position:absolute;inset:0;
    background:transparent;
    pointer-events:none;
  }
  .dx--ru-herken .dx--ru-herken__play-btn{
    position:relative;z-index:2;width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.95);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 12px 32px rgba(0,0,0,.25), 0 0 0 0 rgba(255,255,255,.4);transition:transform .3s ease, box-shadow .3s ease;
  }
  .dx--ru-herken .dx--ru-herken__video:hover .dx--ru-herken__play-btn{transform:scale(1.08);box-shadow:0 16px 40px rgba(0,0,0,.3), 0 0 0 16px rgba(255,255,255,.08)}
  .dx--ru-herken .dx--ru-herken__play-btn i{font-size:32px;color:var(--wz-pink);margin-left:4px}
  .dx--ru-herken .dx--ru-herken__video-label{position:absolute;top:24px;left:28px;z-index:2;font-family:var(--wz-font-display);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.85);display:inline-flex;align-items:center;gap:8px}
  .dx--ru-herken .dx--ru-herken__video-label::before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:var(--wz-pink);animation:wz-pulse 2s ease-in-out infinite}
  .dx--ru-herken .dx--ru-herken__video-caption{position:absolute;bottom:26px;left:28px;right:28px;z-index:2;font-family:var(--wz-font-display);font-size:.95rem;font-weight:600;color:#fff;line-height:1.4;letter-spacing:-.01em;max-width:34ch}
  .dx--ru-herken .dx--ru-herken__video-caption .dx--ru-herken__duration{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:700;margin-bottom:8px}
  .dx--ru-herken .dx--ru-herken__text{padding:88px clamp(32px,5vw,80px) 88px clamp(32px,5vw,72px);display:flex;flex-direction:column;justify-content:center}
  .dx--ru-herken .dx--ru-herken__text h2{font-size:clamp(2.1rem,3.6vw,3rem);max-width:18ch;margin-bottom:24px;line-height:1.04;letter-spacing:-.03em}
  .dx--ru-herken .dx--ru-herken__text h2 em{font-style:italic;color:var(--wz-pink)}
  .dx--ru-herken .dx--ru-herken__text p,.dx--ru-herken .dx--ru-herken__text .dx--ru-lead{color:var(--wz-ink-soft);max-width:52ch;margin-bottom:14px;font-size:1rem;line-height:1.65}
  .dx--ru-herken .dx--ru-herken__bullets{list-style:none;display:flex;flex-direction:column;gap:14px;margin:6px 0 28px;max-width:54ch}
  .dx--ru-herken .dx--ru-herken__bullets li{display:grid;grid-template-columns:20px 1fr;gap:14px;align-items:start;color:var(--wz-ink-soft);font-size:.98rem;line-height:1.55}
  .dx--ru-herken .dx--ru-herken__bullets li::before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:var(--wz-pink);margin-top:9px;margin-left:6px}
  .dx--ru-herken .dx--ru-herken__cta{margin-top:26px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
  @keyframes wz-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}

  /* ── anders block (.anders 3-cell) ── */
  .dx--ru-anders .dx--ru-anders__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--wz-line);margin-top:46px}
  .dx--ru-anders .dx--ru-anders__cell{padding:36px 36px 8px 0;border-right:1px solid var(--wz-line);display:grid;grid-template-columns:auto 1fr;gap:0 24px;align-items:start}
  .dx--ru-anders .dx--ru-anders__cell:last-child{border-right:none}
  .dx--ru-anders .dx--ru-anders__cell:not(:first-child){padding-left:36px}
  .dx--ru-anders .dx--ru-anders__num{font-family:var(--wz-font-display);font-size:clamp(3rem,4.5vw,4.2rem);font-weight:600;color:var(--wz-pink);line-height:.85;letter-spacing:-.05em;grid-row:1 / span 2}
  .dx--ru-anders .dx--ru-anders__content h3{font-size:1.2rem;line-height:1.2;margin-bottom:10px;margin-top:8px}
  .dx--ru-anders .dx--ru-anders__content p{color:var(--wz-ink-soft);font-size:.95rem;line-height:1.6}

  /* ── werkgever strip / werkgevers inverted block (.werkgever-strip, .werkgevers) ── */
  .dx--ru-werkgever-strip{
    display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;
    background:var(--wz-purple-deep);color:#fff;
    margin-top:18px;padding:20px 28px;border-radius:var(--wz-radius-md);
    transition:transform .25s ease, box-shadow .25s ease;position:relative;overflow:hidden;
  }
  .dx--ru-werkgever-strip:hover{transform:translateY(-2px);box-shadow:var(--wz-shadow-float)}
  .dx--ru-werkgever-strip .dx--ru-werkgever-strip__tag{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--wz-purple-soft);border:1px solid rgba(255,255,255,.18);padding:6px 12px;border-radius:var(--wz-radius-pill);white-space:nowrap;position:relative;z-index:1}
  .dx--ru-werkgever-strip .dx--ru-werkgever-strip__content{display:flex;flex-direction:column;gap:3px;position:relative;z-index:1;min-width:0}
  .dx--ru-werkgever-strip .dx--ru-werkgever-strip__title{font-family:var(--wz-font-body);font-weight:700;font-size:1.05rem;color:#fff;letter-spacing:-.014em;line-height:1.2}
  .dx--ru-werkgever-strip .dx--ru-werkgever-strip__sub{font-size:.88rem;color:rgba(255,255,255,.72);line-height:1.4}
  .dx--ru-werkgever-strip .dx--ru-werkgever-strip__go{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:500;font-size:.95rem;white-space:nowrap;position:relative;z-index:1}
  .dx--ru-werkgever-strip:hover .dx--ru-werkgever-strip__go .dx--ru-arrow{transform:translateX(4px)}

  /* werkgevers / twijfel inverted promise block */
  .dx--ru-werkgevers{position:relative;overflow:hidden}
  .dx--ru-werkgevers::before{content:"";position:absolute;top:-220px;right:-140px;width:560px;height:560px;background:radial-gradient(circle,rgba(var(--wz-pink-rgb),.3) 0%,transparent 60%);pointer-events:none}
  .dx--ru-werkgevers::after{content:"";position:absolute;bottom:-240px;left:-220px;width:520px;height:520px;background:radial-gradient(circle,rgba(var(--wz-purple-rgb),.4) 0%,transparent 60%);pointer-events:none}
  .dx--ru-werkgevers .o-container,.dx--ru-werkgevers .o-container{position:relative;z-index:2}
  .dx--ru-werkgevers .dx--ru-werkgevers__head{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;margin-bottom:48px}
  .dx--ru-werkgevers .dx--ru-werkgevers__head h2{color:#fff;max-width:18ch;font-size:clamp(2.1rem,3.6vw,3rem);letter-spacing:-.03em;line-height:1.04}
  .dx--ru-werkgevers .dx--ru-werkgevers__head h2 em{font-style:italic;color:var(--wz-pink)}
  .dx--ru-werkgevers .dx--ru-werkgevers__head .dx--ru-lead{color:rgba(255,255,255,.78);max-width:44ch;font-size:1rem;line-height:1.65}
  .dx--ru-werkgevers .dx--ru-werkgevers__promise{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(255,255,255,.14);margin-bottom:44px}
  /* --four: 4-promise variant (e.g. zorgpersoneel-gezocht "Doorbreek de vicieuze zorg cirkel") */
  .dx--ru-werkgevers .dx--ru-werkgevers__promise--four{grid-template-columns:repeat(4,1fr)}
  .dx--ru-werkgevers .dx--ru-werkgevers__wp{padding:34px 32px 34px 0;border-right:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;gap:6px}
  .dx--ru-werkgevers .dx--ru-werkgevers__wp:last-child{border-right:none}
  .dx--ru-werkgevers .dx--ru-werkgevers__wp:not(:first-child){padding-left:32px}
  .dx--ru-werkgevers .dx--ru-werkgevers__wp .dx--ru-werkgevers__wp-num{font-family:var(--wz-font-display);font-size:clamp(2.8rem,4vw,3.6rem);font-weight:600;color:var(--wz-pink);line-height:.85;letter-spacing:-.055em;margin-bottom:18px}
  .dx--ru-werkgevers .dx--ru-werkgevers__wp .dx--ru-werkgevers__wp-title{font-family:var(--wz-font-body);font-weight:700;color:#fff;font-size:1.2rem;line-height:1.2;letter-spacing:-.01em}
  .dx--ru-werkgevers .dx--ru-werkgevers__wp .dx--ru-werkgevers__wp-desc{color:rgba(255,255,255,.7);font-size:.92rem;line-height:1.55}
  .dx--ru-werkgevers .dx--ru-werkgevers__cta{display:flex;gap:12px;flex-wrap:wrap}

  /* twijfel = werkgevers variant (Werkveld/Helpende) */
  .dx--ru-twijfel{position:relative;overflow:hidden}
  .dx--ru-twijfel::before{content:"";position:absolute;top:-220px;right:-140px;width:560px;height:560px;background:radial-gradient(circle,rgba(var(--wz-pink-rgb),.30) 0%,transparent 60%);pointer-events:none}
  .dx--ru-twijfel::after{content:"";position:absolute;bottom:-240px;left:-220px;width:520px;height:520px;background:radial-gradient(circle,rgba(var(--wz-purple-rgb),.45) 0%,transparent 60%);pointer-events:none}
  .dx--ru-twijfel .o-container,.dx--ru-twijfel .o-container{position:relative;z-index:2}
  .dx--ru-twijfel .dx--ru-twijfel__head{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:center;margin-bottom:36px}
  .dx--ru-twijfel .dx--ru-twijfel__head h2{color:#fff;max-width:20ch;font-size:clamp(2.1rem,3.6vw,3rem);letter-spacing:-.03em;line-height:1.04}
  .dx--ru-twijfel .dx--ru-twijfel__head h2 em{font-style:italic;color:var(--wz-pink)}
  .dx--ru-twijfel .dx--ru-twijfel__head .dx--ru-lead{color:rgba(255,255,255,.78);max-width:46ch;font-size:1rem;line-height:1.65}
  .dx--ru-twijfel .dx--ru-twijfel__head .dx--ru-lead em{font-style:italic;color:var(--wz-pink)}
  .dx--ru-twijfel .dx--ru-twijfel__body{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:start;margin-bottom:40px}
  .dx--ru-twijfel .dx--ru-twijfel__body p{color:rgba(255,255,255,.72);font-size:1rem;line-height:1.7;max-width:54ch}
  .dx--ru-twijfel .dx--ru-twijfel__body p + p{margin-top:14px}
  .dx--ru-twijfel .dx--ru-twijfel__body .dx--ru-twijfel__fineprint{color:rgba(255,255,255,.55);font-size:.92rem;line-height:1.55;font-style:italic}
  .dx--ru-twijfel .dx--ru-twijfel__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

  /* ── traject / V1 procesbalk (.dx--ru-traject__bar / .dx--ru-traject__stop) ── */
  .dx--ru-traject .dx--ru-traject__bar{position:relative;display:grid;grid-template-columns:repeat(var(--wz-stap-cols),1fr);gap:18px;padding-top:36px;align-items:start}
  .dx--ru-traject .dx--ru-traject__bar::before{content:"";position:absolute;left:calc(100% / (var(--wz-stap-cols) * 2));right:calc(100% / (var(--wz-stap-cols) * 2));top:calc(36px + 16px + 16px + 24px);height:2px;background:var(--wz-pink-mid);z-index:0}
  .dx--ru-traject .dx--ru-traject__stop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;position:relative;z-index:1}
  .dx--ru-traject .dx--ru-traject__tag{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--wz-pink);font-weight:700;height:16px}
  .dx--ru-traject .dx--ru-traject__node{
    width:48px;height:48px;border-radius:50%;background:#fff;border:2px solid var(--wz-pink);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--wz-font-display);font-weight:700;font-size:.92rem;color:var(--wz-pink);
    box-shadow:0 0 0 8px #fff;transition:transform .25s ease, box-shadow .25s ease;
  }
  .dx--ru-traject .dx--ru-traject__stop:hover .dx--ru-traject__node{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(var(--wz-pink-rgb),.45), 0 0 0 8px #fff}
  .dx--ru-traject .dx--ru-traject__title{font-family:var(--wz-font-body);font-size:1.05rem;font-weight:700;letter-spacing:-.018em;color:var(--wz-ink);line-height:1.18;margin-top:2px;max-width:20ch}
  .dx--ru-traject .dx--ru-traject__body{font-size:.86rem;color:var(--wz-ink-soft);line-height:1.55;max-width:22ch}
  .dx--ru-traject .dx--ru-traject__stop.dx--ru-traject__stop--climax .dx--ru-traject__node{background:var(--wz-purple-dark);color:#fff;border-color:var(--wz-purple-dark);width:56px;height:56px;font-size:1rem;box-shadow:0 6px 16px -6px rgba(var(--wz-purple-dark-rgb),.5), 0 0 0 8px #fff}
  .dx--ru-traject .dx--ru-traject__stop.dx--ru-traject__stop--climax:hover .dx--ru-traject__node{transform:translateY(-2px);box-shadow:0 10px 22px -8px rgba(var(--wz-purple-dark-rgb),.55), 0 0 0 8px #fff}
  .dx--ru-traject .dx--ru-traject__stop.dx--ru-traject__stop--climax .dx--ru-traject__tag{color:var(--wz-purple-dark)}
  .dx--ru-traject .dx--ru-traject__stop.dx--ru-traject__stop--climax .dx--ru-traject__title{color:var(--wz-purple-dark)}

  /* ── vlist / vacatures listing wrapper (.vacatures / .vlist) ── */
  .dx--ru-vlist .dx--ru-vlist__head,.dx--ru-vlist .dx--ru-vlist__head{display:flex;flex-direction:column;gap:18px;max-width:880px;margin-bottom:40px}
  .dx--ru-vlist .dx--ru-vlist__head h2{font-size:clamp(2rem,3.4vw,2.7rem);letter-spacing:-.028em;line-height:1.06}
  .dx--ru-vlist .dx--ru-vlist__head h2 em{font-style:italic;color:var(--wz-pink)}
  .dx--ru-vlist .dx--ru-vlist__head .dx--ru-section-header__intro{color:var(--wz-ink-soft);font-size:1rem;line-height:1.65;max-width:62ch}
  .dx--ru-vlist .dx--ru-vlist__note{font-size:.78rem;color:var(--wz-ink-mute);letter-spacing:.04em;display:inline-flex;align-items:center;gap:8px;margin-bottom:18px}
  .dx--ru-vlist .dx--ru-vlist__note::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--wz-pink-mid)}
  .dx--ru-vlist .dx--ru-vlist__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
  .dx--ru-vlist .dx--ru-vlist__rail{display:flex;flex-wrap:wrap;gap:10px;flex:1;min-width:0}
  .dx--ru-vlist .dx--ru-vlist__chip{font-size:.84rem;color:var(--wz-ink-soft);background:#fff;border:1px solid var(--wz-line);border-radius:var(--wz-radius-pill);padding:7px 14px;font-weight:500;transition:border-color .2s, color .2s, background .2s, transform .2s}
  .dx--ru-vlist .dx--ru-vlist__chip:hover{border-color:var(--wz-pink);color:var(--wz-pink);background:var(--wz-pink-soft);transform:translateY(-1px)}
  .dx--ru-vlist .dx--ru-vlist__vacatures-foot{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .dx--ru-vlist .dx--ru-vlist__foot{margin-top:40px;display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}
  .dx--ru-vlist .dx--ru-vlist__cta-group{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

  /* ── ervaringen wrapper (.ervaringen + foot) ── */
  .dx--ru-ervaringen .dx--ru-ervaringen__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .dx--ru-ervaringen .dx--ru-ervaringen__foot{margin-top:40px;display:flex;justify-content:center}
  .dx--ru-ervaringen h2 .dx--ru-ervaringen__line2{display:block}

  /* werkveld / functies wrappers — foot */
  .dx--ru-functies .dx--ru-functies__werkveld-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .dx--ru-functies .dx--ru-functies__werkveld-foot{margin-top:40px;display:flex;justify-content:center}
  .dx--ru-functies .dx--ru-functies__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
  .dx--ru-functies .dx--ru-functies__foot{margin-top:48px;display:flex;justify-content:flex-start;gap:14px;flex-wrap:wrap}
  .dx--ru-functies .dx--ru-functies__head{display:flex;flex-direction:column;gap:18px;max-width:880px;margin-bottom:56px}
  .dx--ru-functies .dx--ru-functies__head h2{font-size:clamp(2.4rem,4.4vw,3.4rem);letter-spacing:-.034em;line-height:1.04}
  .dx--ru-functies .dx--ru-functies__head h2 em{font-style:normal;color:var(--wz-pink)}
  .dx--ru-functies .dx--ru-functies__head .dx--ru-section-header__intro{color:var(--wz-ink-soft);font-size:1rem;line-height:1.7;max-width:62ch;margin-top:4px;font-family:var(--wz-font-body);font-weight:400;letter-spacing:0}

  /* ── bijzonder block (50/50 image + icon list) ── */
  .dx--ru-bijzonder{position:relative}
  .dx--ru-bijzonder .dx--ru-bijzonder__grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;min-height:min(820px,90vh)}
  .dx--ru-bijzonder .dx--ru-bijzonder__visual{position:relative;overflow:hidden;background:var(--wz-paper-warm)}
  .dx--ru-bijzonder .dx--ru-bijzonder__visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 70% at 0% 100%, rgba(var(--wz-pink-rgb),.55) 0%, rgba(var(--wz-pink-rgb),.32) 28%, rgba(var(--wz-pink-rgb),0) 65%);z-index:1}
  .dx--ru-bijzonder .dx--ru-bijzonder__visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
  .dx--ru-bijzonder .dx--ru-bijzonder__quote{
    position:absolute;left:clamp(28px,4vw,56px);bottom:clamp(28px,4vw,56px);
    background:var(--wz-white);border-radius:18px;padding:30px 32px 28px;width:min(340px,80%);z-index:2;
    box-shadow:0 1px 2px rgba(23,20,19,.06),0 30px 60px -28px rgba(var(--wz-purple-deep-rgb),.40),0 6px 16px rgba(23,20,19,.08);
    display:flex;flex-direction:column;gap:16px;
  }
  .dx--ru-bijzonder .dx--ru-bijzonder__quote .dx--ru-bijzonder__qmark{color:var(--wz-pink);width:36px;height:30px;flex-shrink:0;display:inline-block}
  .dx--ru-bijzonder .dx--ru-bijzonder__quote .dx--ru-bijzonder__qmark i{font-size:30px;display:block;line-height:1}
  .dx--ru-bijzonder .dx--ru-bijzonder__quote .dx--ru-bijzonder__qtext{font-family:var(--wz-font-body);font-weight:400;font-size:1.05rem;line-height:1.5;letter-spacing:-.005em;color:var(--wz-ink);margin:0}
  .dx--ru-bijzonder .dx--ru-bijzonder__quote .dx--ru-bijzonder__qrule{width:36px;height:2px;background:var(--wz-pink);border:0;margin:6px 0 4px}
  .dx--ru-bijzonder .dx--ru-bijzonder__quote .dx--ru-bijzonder__qauthor{display:flex;flex-direction:column;gap:2px}
  .dx--ru-bijzonder .dx--ru-bijzonder__quote .dx--ru-bijzonder__qname{font-family:var(--wz-font-body);font-weight:600;font-size:.98rem;color:var(--wz-ink);letter-spacing:-.005em}
  .dx--ru-bijzonder .dx--ru-bijzonder__quote .dx--ru-bijzonder__qrole{font-size:.84rem;color:var(--wz-ink-mute);letter-spacing:.01em}
  .dx--ru-bijzonder .dx--ru-bijzonder__text{
    display:flex;flex-direction:column;justify-content:center;
    padding:clamp(72px,8vw,120px) max(28px,4.5vw) clamp(72px,8vw,120px) clamp(48px,5vw,88px);
    max-width:calc(var(--wz-content-max) / 2 + 96px);
  }
  .dx--ru-bijzonder .dx--ru-bijzonder__text .dx--ru-eyebrow{margin-bottom:20px}
  .dx--ru-bijzonder .dx--ru-bijzonder__text h2{font-size:clamp(2.1rem,3.4vw,2.9rem);letter-spacing:-.032em;line-height:1.06;margin-bottom:22px;max-width:22ch}
  .dx--ru-bijzonder .dx--ru-bijzonder__text h2 em{font-style:normal;color:var(--wz-pink)}
  .dx--ru-bijzonder .dx--ru-bijzonder__text > p{color:var(--wz-ink-soft);font-size:1rem;line-height:1.7;max-width:56ch;margin-bottom:28px}
  .dx--ru-bijzonder .dx--ru-bijzonder__icons{display:flex;flex-direction:column;gap:0;margin-top:4px}
  .dx--ru-bijzonder .dx--ru-bijzonder__cell{display:grid;grid-template-columns:48px 1fr;gap:0 22px;align-items:center;padding:16px 0;border-bottom:1px solid var(--wz-line)}
  .dx--ru-bijzonder .dx--ru-bijzonder__cell:last-child{border-bottom:none}
  .dx--ru-bijzonder .dx--ru-bijzonder__icon{width:48px;height:48px;border-radius:50%;background:#fff;color:var(--wz-pink);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid rgba(var(--wz-pink-rgb),.35)}
  .dx--ru-bijzonder .dx--ru-bijzonder__icon i{font-size:20px}
  .dx--ru-bijzonder .dx--ru-bijzonder__content{display:flex;flex-direction:column;gap:2px;min-width:0}
  .dx--ru-bijzonder .dx--ru-bijzonder__title{font-family:var(--wz-font-body);font-weight:700;font-size:1rem;letter-spacing:-.005em;line-height:1.35;color:var(--wz-ink);margin:0}
  .dx--ru-bijzonder .dx--ru-bijzonder__title .dx--ru-bijzonder__sub-inline{font-weight:400;color:var(--wz-ink-soft)}
  .dx--ru-bijzonder .dx--ru-bijzonder__body{color:var(--wz-ink-soft);font-size:.92rem;line-height:1.45;margin:0}

  /* ── verschillen — accordion + sticky intro (Werkveld) ── */
  .dx--ru-verschillen .dx--ru-verschillen__grid{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.18fr);gap:clamp(40px,5vw,80px);align-items:start}
  .dx--ru-verschillen .dx--ru-verschillen__left{position:sticky;top:118px;display:flex;flex-direction:column;gap:26px;align-self:start;justify-content:flex-start}
  .dx--ru-verschillen .dx--ru-verschillen__head{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:16px}
  .dx--ru-verschillen .dx--ru-verschillen__head .dx--ru-eyebrow{margin-bottom:0}
  .dx--ru-verschillen .dx--ru-verschillen__head h2{font-size:clamp(2.2rem,3.4vw,3.05rem);letter-spacing:-.032em;line-height:1.04}
  .dx--ru-verschillen .dx--ru-verschillen__head h2 em{font-style:normal;color:var(--wz-purple)}
  .dx--ru-verschillen .dx--ru-verschillen__head .dx--ru-verschillen__rule{width:40px;height:2px;background:var(--wz-pink);border:0;margin:2px 0}
  .dx--ru-verschillen .dx--ru-verschillen__head .dx--ru-section-header__intro{font-family:var(--wz-font-body);font-weight:400;letter-spacing:0;line-height:1.7;font-size:1rem;color:var(--wz-ink-soft);max-width:42ch}
  .dx--ru-verschillen .dx--ru-verschillen__gesprek{background:var(--wz-white);border-radius:24px;padding:clamp(26px,2.4vw,34px);display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 2px rgba(23,20,19,.04), 0 24px 48px -34px rgba(var(--wz-purple-deep-rgb),.18)}
  .dx--ru-verschillen .dx--ru-verschillen__gesprek-icon{width:54px;height:54px;border-radius:50%;background:#fff;border:1px solid var(--wz-pink-mid);color:var(--wz-pink);display:inline-flex;align-items:center;justify-content:center}
  .dx--ru-verschillen .dx--ru-verschillen__gesprek-icon i{font-size:24px}
  .dx--ru-verschillen .dx--ru-verschillen__gesprek h3{font-family:var(--wz-font-body);font-weight:700;font-size:clamp(1.2rem,1.5vw,1.45rem);letter-spacing:-.018em;line-height:1.2;color:var(--wz-ink);max-width:16ch}
  .dx--ru-verschillen .dx--ru-verschillen__gesprek p{color:var(--wz-ink-soft);font-size:.96rem;line-height:1.6;max-width:40ch}
  .dx--ru-verschillen .dx--ru-verschillen__gesprek-link{display:inline-flex;align-items:center;gap:8px;color:var(--wz-pink);font-weight:600;font-size:.95rem;margin-top:2px}
  .dx--ru-verschillen .dx--ru-verschillen__gesprek-link .dx--ru-arrow{transition:transform .25s ease}
  .dx--ru-verschillen .dx--ru-verschillen__gesprek-link:hover .dx--ru-arrow{transform:translateX(4px)}
  .dx--ru-verschillen .dx--ru-verschillen__acc{--vs-num:52px;--vs-gap:clamp(18px,1.6vw,26px);display:flex;flex-direction:column;border-top:1px solid var(--wz-line-strong)}
  .dx--ru-verschillen .dx--ru-verschillen--cta__item{border-bottom:1px solid var(--wz-line-strong)}
  .dx--ru-verschillen .dx--ru-verschillen__toggle-head{width:100%;background:transparent;border:0;cursor:pointer;text-align:left;color:inherit;font-family:inherit;display:grid;grid-template-columns:var(--vs-num) 1fr;gap:var(--vs-gap);padding:26px 4px;align-items:start}
  .dx--ru-verschillen .dx--ru-verschillen__num{width:var(--vs-num);height:var(--vs-num);border-radius:50%;border:1px solid var(--wz-pink-mid);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--wz-font-display);font-weight:600;font-size:.82rem;letter-spacing:.05em;color:var(--wz-pink);background:transparent;transition:background .3s ease,border-color .3s ease}
  .dx--ru-verschillen .dx--ru-verschillen--cta__item.is-open .dx--ru-verschillen__num,.dx--ru-verschillen .dx--ru-verschillen__toggle-head:hover .dx--ru-verschillen__num{background:var(--wz-pink-soft);border-color:var(--wz-pink)}
  .dx--ru-verschillen .dx--ru-verschillen__head-main{min-width:0;display:flex;flex-direction:column;gap:8px}
  .dx--ru-verschillen .dx--ru-verschillen__title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
  .dx--ru-verschillen .dx--ru-verschillen__title{font-family:var(--wz-font-body);font-weight:600;font-size:clamp(1.1rem,1.35vw,1.32rem);letter-spacing:-.016em;line-height:1.25;color:var(--wz-ink)}
  .dx--ru-verschillen .dx--ru-verschillen__toggle{position:relative;width:24px;height:24px;flex-shrink:0;margin-top:5px}
  .dx--ru-verschillen .dx--ru-verschillen__toggle::before,.dx--ru-verschillen .dx--ru-verschillen__toggle::after{content:"";position:absolute;background:var(--wz-pink);border-radius:2px;transition:transform .3s ease,opacity .3s ease}
  .dx--ru-verschillen .dx--ru-verschillen__toggle::before{left:0;top:50%;width:100%;height:2px;transform:translateY(-50%)}
  .dx--ru-verschillen .dx--ru-verschillen__toggle::after{top:0;left:50%;width:2px;height:100%;transform:translateX(-50%)}
  .dx--ru-verschillen .dx--ru-verschillen--cta__item.is-open .dx--ru-verschillen__toggle::after{opacity:0;transform:translateX(-50%) scaleY(0)}
  .dx--ru-verschillen .dx--ru-verschillen__q-label{font-family:var(--wz-font-body);font-style:italic;font-weight:500;font-size:.82rem;letter-spacing:.01em;color:var(--wz-pink);margin-top:2px}
  .dx--ru-verschillen .dx--ru-verschillen__q{font-family:var(--wz-font-body);font-weight:400;font-size:1rem;line-height:1.5;color:var(--wz-ink);max-width:46ch}
  .dx--ru-verschillen .dx--ru-verschillen__body-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.4,0,.2,1)}
  .dx--ru-verschillen .dx--ru-verschillen--cta__item.is-open .dx--ru-verschillen__body-wrap{grid-template-rows:1fr}
  .dx--ru-verschillen .dx--ru-verschillen__body{overflow:hidden}
  .dx--ru-verschillen .dx--ru-verschillen__body p{margin:0 0 0 calc(4px + var(--vs-num) + var(--vs-gap));padding:14px 0 28px;color:var(--wz-ink-soft);font-size:.96rem;line-height:1.65;max-width:52ch;opacity:0;transform:translateY(-4px);transition:opacity .3s ease .04s,transform .3s ease .04s}
  .dx--ru-verschillen .dx--ru-verschillen--cta__item.is-open .dx--ru-verschillen__body p{opacity:1;transform:none}

  /* verschillen --cta (Helpende variant: paper CTA card + max-height accordion) */
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__layout{display:grid;grid-template-columns:minmax(300px,440px) 1fr;gap:clamp(48px,7vw,120px);align-items:start}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__intro{position:sticky;top:96px;display:flex;flex-direction:column}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__intro .dx--ru-verschillen--cta__eyebrow-row{display:flex;align-items:center;gap:14px;font-family:var(--wz-font-display);font-weight:700;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--wz-pink);margin-bottom:24px}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__intro .dx--ru-verschillen--cta__eyebrow-row::before{content:"";width:36px;height:2px;background:var(--wz-pink)}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__intro h2{font-size:clamp(1.9rem,3vw,2.6rem);letter-spacing:-.03em;line-height:1.06;color:var(--wz-ink);margin:0}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__intro h2 em{font-style:normal;color:var(--wz-pink);white-space:nowrap}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__intro .dx--ru-verschillen--cta__intro-rule{width:48px;height:2px;background:var(--wz-pink);border:0;margin:24px 0 0}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__intro .dx--ru-verschillen--cta__intro-lead{color:var(--wz-ink-soft);font-size:1.02rem;line-height:1.65;max-width:38ch;margin:20px 0 0}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__cta{margin-top:clamp(28px,3vw,40px);background:var(--wz-white);border:1px solid var(--wz-line);border-radius:20px;padding:clamp(28px,3vw,36px);display:grid;grid-template-columns:auto 1fr;gap:22px 24px;box-shadow:0 1px 2px rgba(23,20,19,.04), 0 24px 48px -34px rgba(var(--wz-purple-deep-rgb),.18)}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__cta::after{display:none}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__cta-icon{width:56px;height:56px;border-radius:50%;background:transparent;color:var(--wz-pink);border:1.5px solid var(--wz-pink);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;grid-row:1;grid-column:1}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__cta-icon i{font-size:24px}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__cta-text{display:flex;flex-direction:column;gap:0;min-width:0;grid-row:1;grid-column:2}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__cta-text h3{font-family:var(--wz-font-body);font-weight:700;font-size:clamp(1.2rem,1.45vw,1.4rem);letter-spacing:-.014em;line-height:1.2;color:var(--wz-ink);margin:6px 0 0}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__cta-text h3 .dx--ru-accent{color:var(--wz-ink)}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__cta-body{grid-row:2;grid-column:2;color:var(--wz-ink-soft);font-size:.92rem;line-height:1.65;max-width:42ch;margin:0;justify-self:start;text-align:left}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__cta-link{grid-row:3;grid-column:2;color:var(--wz-pink);font-family:var(--wz-font-body);font-weight:600;font-size:1rem;text-decoration:none;display:inline-flex;align-items:center;gap:10px;width:fit-content;justify-self:start;margin-top:6px;transition:gap .2s ease, color .2s ease}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__cta-link:hover{gap:14px;color:var(--wz-purple)}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__cta-link .dx--ru-arrow{display:inline-block;transition:transform .2s ease}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__cta-link:hover .dx--ru-arrow{transform:translateX(2px)}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__cta-actions{grid-row:3;grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:12px;justify-self:start}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__list{display:flex;flex-direction:column;border-top:1px solid var(--wz-line)}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__item{border-bottom:1px solid var(--wz-line);padding:clamp(20px,2vw,28px) 0}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__item-row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,2.4vw,36px);align-items:flex-start;background:transparent;border:0;width:100%;text-align:left;cursor:pointer;color:inherit;padding:0;font:inherit}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__num-badge{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--wz-pink);color:var(--wz-pink);background:transparent;display:inline-flex;align-items:center;justify-content:center;font-family:var(--wz-font-display);font-weight:700;font-size:.92rem;letter-spacing:.06em;flex-shrink:0}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__item-main{display:flex;flex-direction:column;gap:10px;min-width:0;padding-top:6px}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__item-title{font-family:var(--wz-font-body);font-weight:700;font-size:clamp(1rem,1.15vw,1.15rem);letter-spacing:-.014em;line-height:1.2;color:var(--wz-ink);margin:0}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__item-q-label{font-family:var(--wz-font-body);font-style:italic;font-weight:700;font-size:1.04rem;color:var(--wz-pink);margin:4px 0 0;letter-spacing:0}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__item-q-text{color:var(--wz-ink);font-size:.98rem;line-height:1.55;margin:0;max-width:64ch}
  .dx--ru-verschillen--cta .dx--ru-verschillen__toggle{width:36px;height:36px;flex-shrink:0;align-self:flex-start;margin-top:8px;color:var(--wz-pink);position:relative;display:inline-flex;align-items:center;justify-content:center;transition:transform .25s ease}
  .dx--ru-verschillen--cta .dx--ru-verschillen__toggle::before,.dx--ru-verschillen--cta .dx--ru-verschillen__toggle::after{content:"";position:absolute;top:50%;left:50%;background:currentColor;border-radius:2px}
  .dx--ru-verschillen--cta .dx--ru-verschillen__toggle::before{width:22px;height:2.5px;transform:translate(-50%,-50%)}
  .dx--ru-verschillen--cta .dx--ru-verschillen__toggle::after{width:2.5px;height:22px;transform:translate(-50%,-50%);transition:transform .25s ease, opacity .2s ease}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__item.is-open .dx--ru-verschillen__toggle::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__item-detail{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,2.4vw,36px);overflow:hidden;max-height:0;opacity:0;transition:max-height .35s ease, opacity .25s ease, margin-top .25s ease;margin-top:0}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__item.is-open .dx--ru-verschillen--cta__item-detail{max-height:600px;opacity:1;margin-top:18px}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__item-detail .dx--ru-verschillen--cta__spacer{width:56px}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__item-detail-body{color:var(--wz-purple);font-size:.98rem;line-height:1.65;max-width:64ch;font-family:var(--wz-font-body);font-weight:400;margin:0;padding-right:36px}
  /* accordion-body lists match the purple body text, with pink bullets */
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__item-detail ul,
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__item-detail-list{margin:0;padding:2px 36px 0 0;max-width:64ch;list-style:none}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__item-detail li{color:var(--wz-purple);font-size:.98rem;line-height:1.6;font-family:var(--wz-font-body);margin-bottom:6px;position:relative;padding-left:18px;list-style:none}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__item-detail li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--wz-pink)}
  .dx--ru-verschillen--cta .dx--ru-verschillen--cta__item-detail-end{width:36px}

  /* ── pgvm — past goed vs minder goed (.pgvm) ── */
  .dx--ru-pgvm{position:relative}
  .dx--ru-pgvm .dx--ru-pgvm__head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;max-width:820px;margin:0 auto 56px}
  .dx--ru-pgvm .dx--ru-pgvm__head .dx--ru-eyebrow{margin-bottom:0}
  .dx--ru-pgvm .dx--ru-pgvm__head h2{font-size:clamp(2.4rem,4.2vw,3.4rem);letter-spacing:-.034em;line-height:1.04}
  .dx--ru-pgvm .dx--ru-pgvm__head h2 em{font-style:normal;color:var(--wz-pink)}
  .dx--ru-pgvm .dx--ru-pgvm__head .dx--ru-pgvm__lead{margin-top:12px;color:var(--wz-ink-soft);font-size:.98rem;line-height:1.7;max-width:64ch}
  .dx--ru-pgvm .dx--ru-pgvm__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3vw,40px);align-items:stretch;max-width:1240px;margin:0 auto}
  .dx--ru-pgvm .dx--ru-pgvm__col{background:linear-gradient(180deg,#fff 0%,rgba(var(--wz-pink-rgb),.05) 55%,rgba(var(--wz-pink-rgb),.11) 100%);border:1px solid rgba(var(--wz-pink-rgb),.14);border-radius:24px;padding:clamp(28px,3vw,40px) clamp(28px,3vw,40px) 12px;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(23,20,19,.03), 0 24px 48px -32px rgba(var(--wz-purple-deep-rgb),.14)}
  .dx--ru-pgvm .dx--ru-pgvm__col.dx--ru-pgvm__col--no{background:linear-gradient(180deg,#fff 0%,rgba(var(--wz-purple-rgb),.05) 55%,rgba(var(--wz-purple-rgb),.11) 100%);border-color:rgba(var(--wz-purple-rgb),.16)}
  .dx--ru-pgvm .dx--ru-pgvm__col-head{display:flex;flex-direction:column;gap:14px;margin-bottom:18px}
  .dx--ru-pgvm .dx--ru-pgvm__col-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--wz-pink);width:fit-content}
  .dx--ru-pgvm .dx--ru-pgvm__col-eyebrow::before{content:"";width:22px;height:1px;background:var(--wz-pink)}
  .dx--ru-pgvm .dx--ru-pgvm__col.dx--ru-pgvm__col--no .dx--ru-pgvm__col-eyebrow{color:var(--wz-purple)}
  .dx--ru-pgvm .dx--ru-pgvm__col.dx--ru-pgvm__col--no .dx--ru-pgvm__col-eyebrow::before{background:var(--wz-purple)}
  .dx--ru-pgvm .dx--ru-pgvm__col-title{font-family:var(--wz-font-body);font-weight:700;font-size:clamp(1.35rem,1.8vw,1.6rem);letter-spacing:-.022em;line-height:1.18;color:var(--wz-ink);max-width:22ch}
  .dx--ru-pgvm .dx--ru-pgvm__list{list-style:none;display:flex;flex-direction:column;gap:0;margin-top:8px}
  .dx--ru-pgvm .dx--ru-pgvm__list li{display:grid;grid-template-columns:28px 1fr;gap:18px;align-items:center;padding:18px 0;border-top:1px solid rgba(var(--wz-purple-rgb),.10);color:var(--wz-ink);font-size:.98rem;line-height:1.5}
  .dx--ru-pgvm .dx--ru-pgvm__list li:last-child{border-bottom:none}
  .dx--ru-pgvm .dx--ru-pgvm__icon{width:24px;height:24px;color:var(--wz-pink);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
  .dx--ru-pgvm .dx--ru-pgvm__icon i{font-size:21px}
  .dx--ru-pgvm .dx--ru-pgvm__col.dx--ru-pgvm__col--no .dx--ru-pgvm__icon{border-color:var(--wz-purple);color:var(--wz-purple)}
  /* Built as a WPBakery column: .dx--ru-pgvm__cta > .vc_column-inner > .w-html >
     [icon][text][button]. The column just spans the full grid width; the card
     surface + the horizontal icon·text·button row live on the .w-html (the real
     parent of the three items — putting grid on the column itself does nothing,
     since Impreza forces columns to flex-direction:column and the items sit deeper). */
  .dx--ru-pgvm .dx--ru-pgvm__cta{grid-column:1 / -1;width:100%;max-width:none;margin:clamp(40px,4.5vw,56px) 0 0;padding:0;position:relative}
  .dx--ru-pgvm .dx--ru-pgvm__cta > .vc_column-inner{width:100%;max-width:none;margin:0;padding:0}
  .dx--ru-pgvm .dx--ru-pgvm__cta .w-html{background:#fff;border:1px solid rgba(var(--wz-purple-rgb),.10);border-radius:24px;padding:clamp(24px,3vw,36px) clamp(28px,3.5vw,44px);display:grid;grid-template-columns:auto 1fr auto;gap:clamp(24px,3vw,40px);align-items:center;box-shadow:0 1px 2px rgba(23,20,19,.03), 0 24px 48px -32px rgba(var(--wz-purple-deep-rgb),.14)}
  .dx--ru-pgvm .dx--ru-pgvm__cta-icon{width:76px;height:76px;border-radius:50%;background:#fff;border:1px solid var(--wz-pink-mid);color:var(--wz-pink);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
  .dx--ru-pgvm .dx--ru-pgvm__cta-icon i{font-size:34px}
  .dx--ru-pgvm .dx--ru-pgvm__cta-text{display:flex;flex-direction:column;gap:6px;min-width:0;border-left:1.5px solid var(--wz-pink);padding-left:clamp(20px,2.2vw,28px)}
  .dx--ru-pgvm .dx--ru-pgvm__cta-text h3{font-family:var(--wz-font-body);font-weight:700;font-size:clamp(1.3rem,1.7vw,1.5rem);letter-spacing:-.018em;line-height:1.2;color:var(--wz-pink);margin:0}
  .dx--ru-pgvm .dx--ru-pgvm__cta-text p{color:var(--wz-ink-soft);font-size:.96rem;line-height:1.6;max-width:64ch;margin:0}
  .dx--ru-pgvm .dx--ru-pgvm__pgvm{display:inline-flex;align-items:center;gap:10px;font-family:var(--wz-font-body);font-size:.92rem;font-weight:500;padding:14px 24px;border-radius:var(--wz-radius-pill);background:#fff;color:var(--wz-pink);border:1.5px solid var(--wz-pink);transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;white-space:nowrap;flex-shrink:0}
  .dx--ru-pgvm .dx--ru-pgvm__pgvm .dx--ru-arrow{display:inline-block;transition:transform .25s ease}
  .dx--ru-pgvm .dx--ru-pgvm__pgvm:hover{background:var(--wz-pink);color:#fff;transform:translateY(-1px);box-shadow:0 14px 28px -12px rgba(var(--wz-pink-rgb),.55)}
  .dx--ru-pgvm .dx--ru-pgvm__pgvm:hover .dx--ru-arrow{transform:translateX(3px)}

  /* ── past-bij-jou block (.past) ── */
  .dx--ru-past .dx--ru-past__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(48px,6vw,96px);align-items:start}
  .dx--ru-past .dx--ru-past__head h2{font-size:clamp(2.4rem,4.2vw,3.6rem);letter-spacing:-.034em;line-height:1.02;max-width:22ch;margin-bottom:0}
  .dx--ru-past .dx--ru-past__head h2 .dx--ru-past__jou{color:var(--wz-pink)}
  .dx--ru-past .dx--ru-past__head .dx--ru-past__head-rule{width:56px;height:2px;background:var(--wz-pink);border:0;margin:28px 0 32px}
  .dx--ru-past .dx--ru-past__head p{color:var(--wz-ink-soft);font-size:1rem;line-height:1.7;max-width:46ch;margin-bottom:18px}
  .dx--ru-past .dx--ru-past__head p:last-child{margin-bottom:0}
  .dx--ru-past .dx--ru-past__card{background:linear-gradient(180deg,#fff 0%,rgba(229,225,244,.35) 100%);border:1px solid rgba(var(--wz-purple-rgb),.08);border-radius:24px;padding:32px 40px 16px;box-shadow:0 1px 2px rgba(23,20,19,.04), 0 24px 48px -28px rgba(var(--wz-purple-deep-rgb),.18)}
  .dx--ru-past .dx--ru-past__card-head{display:grid;grid-template-columns:48px 1fr;gap:20px;align-items:center;padding:4px 0 26px}
  .dx--ru-past .dx--ru-past__card-head .dx--ru-past__icon{width:48px;height:48px;border-radius:50%;background:var(--wz-purple-soft);color:var(--wz-purple);display:inline-flex;align-items:center;justify-content:center}
  .dx--ru-past .dx--ru-past__card-head .dx--ru-past__icon i{font-size:22px}
  .dx--ru-past .dx--ru-past__card-head .dx--ru-past__title{font-family:var(--wz-font-body);font-weight:600;font-size:1.08rem;color:var(--wz-ink);letter-spacing:-.005em;line-height:1.3}
  .dx--ru-past .dx--ru-past__questions{list-style:none;display:flex;flex-direction:column;gap:0;counter-reset:past}
  .dx--ru-past .dx--ru-past__questions li{display:grid;grid-template-columns:48px 1fr;gap:22px;align-items:center;color:var(--wz-ink);font-size:1rem;line-height:1.5;padding:20px 0;border-top:1px solid rgba(var(--wz-purple-rgb),.10);counter-increment:past}
  .dx--ru-past .dx--ru-past__questions li:last-child{padding-bottom:18px}
  .dx--ru-past .dx--ru-past__questions li::before{content:counter(past,decimal-leading-zero);display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--wz-pink);color:var(--wz-pink);font-family:var(--wz-font-body);font-weight:600;font-size:.88rem;letter-spacing:.02em;flex-shrink:0}

  /* ── richtingen grid wrapper (.dx--ru-richtingen__grid + .dx--ru-richtingen__cta) — feature cards via dx--ru-card--feature ── */
  .dx--ru-richtingen .dx--ru-richtingen__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2vw,28px);margin-top:8px}
  /* richtingen icon reuses .dx--ru-icon-circle .dx--ru-icon-circle--lg (56px); only the glyph size differs. */
  .dx--ru-richtingen .dx--ru-icon-circle--lg i{font-size:26px}
  .dx--ru-richtingen .dx--ru-richtingen__cta{margin-top:clamp(32px,3.5vw,48px);background:linear-gradient(180deg,#fff 0%, rgba(252,245,248,.7) 100%);border:1px solid rgba(var(--wz-pink-rgb),.16);border-radius:20px;padding:clamp(20px,2vw,28px) clamp(24px,2.5vw,36px);display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,2.5vw,36px);align-items:center;box-shadow:0 1px 2px rgba(23,20,19,.03), 0 18px 40px -28px rgba(var(--wz-pink-rgb),.18)}
  .dx--ru-richtingen .dx--ru-richtingen__cta-icon{width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid var(--wz-pink-mid);color:var(--wz-pink);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
  .dx--ru-richtingen .dx--ru-richtingen__cta-icon i{font-size:22px}
  .dx--ru-richtingen .dx--ru-richtingen__cta-text{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;min-width:0}
  .dx--ru-richtingen .dx--ru-richtingen__cta-text strong{font-family:var(--wz-font-body);font-weight:700;font-size:clamp(1rem,1.2vw,1.15rem);color:var(--wz-ink);letter-spacing:-.014em}
  .dx--ru-richtingen .dx--ru-richtingen__cta-text span{color:var(--wz-ink-soft);font-size:.96rem}
  .dx--ru-richtingen .dx--ru-richtingen__cta .dx--ru-btn{flex-shrink:0}

  /* ── hero --overview (text-led overview hero, no photo — Vacatures /vacatures) ──
     Single full-width copy column on white. Front-loads eyebrow + h1 + TL;DR lead +
     CTAs + kleine regel. Reusable across overview-style pages (vacatures, werken-bij). */
  .dx--ru-hero--overview{
    display:block;grid-template-columns:none;min-height:auto;
    background:var(--wz-white);padding:80px var(--wz-inset) 96px;
  }
  .dx--ru-hero--overview .dx--ru-hero__overview-inner{max-width:var(--wz-content-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,5vw,72px);align-items:center}
  .dx--ru-hero--overview .dx--ru-hero__side{padding:0;background:transparent;display:block;max-width:none}
  .dx--ru-hero--overview h1{
    font-size:clamp(2.4rem,4.6vw,4rem);letter-spacing:-.036em;line-height:1.0;
    margin-bottom:26px;max-width:20ch;
  }
  .dx--ru-hero--overview h1 .dx--ru-accent{color:var(--wz-pink)}
  .dx--ru-hero--overview .dx--ru-hero__lead{font-size:1.12rem;color:var(--wz-ink-soft);max-width:66ch;line-height:1.65;margin-bottom:30px}
  .dx--ru-hero--overview .dx--ru-hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
  .dx--ru-hero--overview .dx--ru-hero__fineprint{color:var(--wz-ink-mute);font-size:.95rem;font-style:italic;line-height:1.6;max-width:64ch}
  /* search-forward hero card (right column on the vacatures overview) */
  .dx--ru-hero-search{
    background:var(--wz-white);border:1px solid var(--wz-line);border-radius:var(--wz-radius-xl);
    padding:clamp(28px,2.6vw,40px);box-shadow:var(--wz-shadow-float);
    display:flex;flex-direction:column;gap:18px;
  }
  .dx--ru-hero-search .dx--ru-hero-search__label{font-family:var(--wz-font-body);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--wz-pink)}
  .dx--ru-hero-search .dx--ru-hero-search__title{font-family:var(--wz-font-body);font-weight:700;font-size:clamp(1.2rem,1.5vw,1.45rem);letter-spacing:-.018em;line-height:1.2;color:var(--wz-ink)}
  .dx--ru-hero-search .dx--ru-hero-search__form{display:flex;gap:10px;flex-wrap:wrap}
  .dx--ru-hero-search .dx--ru-hero-search__input{flex:1 1 200px;display:flex;align-items:center;gap:10px;background:var(--wz-paper);border:1px solid var(--wz-line);border-radius:var(--wz-radius-pill);padding:13px 18px;transition:border-color .2s ease}
  .dx--ru-hero-search .dx--ru-hero-search__input:focus-within{border-color:var(--wz-pink-mid)}
  .dx--ru-hero-search .dx--ru-hero-search__input i{color:var(--wz-ink-mute);font-size:15px;flex-shrink:0}
  .dx--ru-hero-search .dx--ru-hero-search__input input{border:0;background:transparent;outline:none;font-family:var(--wz-font-body);font-size:.98rem;color:var(--wz-ink);width:100%}
  .dx--ru-hero-search .dx--ru-hero-search__input input::placeholder{color:var(--wz-ink-mute)}
  .dx--ru-hero-search .dx--ru-hero-search__form .dx--ru-btn{flex-shrink:0}
  .dx--ru-hero-search .dx--ru-hero-search__chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .dx--ru-hero-search .dx--ru-hero-search__chips-label{font-size:.82rem;color:var(--wz-ink-mute);margin-right:2px}
  .dx--ru-hero-search .dx--ru-hero-search__chip{font-size:.85rem;color:var(--wz-ink-soft);background:var(--wz-paper);border:1px solid var(--wz-line);border-radius:var(--wz-radius-pill);padding:7px 14px;transition:all .2s ease;font-weight:500}
  .dx--ru-hero-search .dx--ru-hero-search__chip:hover{border-color:var(--wz-pink-mid);color:var(--wz-pink);background:var(--wz-pink-soft);transform:translateY(-1px)}

  /* ── vfilters — faceted vacancy filter strip (styled placeholder for WPJM S&F) ──
     Title + a bar of select-style pills + microcopy. Non-functional in concept.
     Reusable on any page that surfaces the vacancy filter facets. */
  .dx--ru-vfilters .dx--ru-vfilters__head{display:flex;flex-direction:column;gap:14px;max-width:880px;margin-bottom:30px}
  .dx--ru-vfilters .dx--ru-vfilters__head h2{font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.028em;line-height:1.08}
  .dx--ru-vfilters .dx--ru-vfilters__bar{
    display:flex;flex-wrap:wrap;gap:12px;align-items:center;
    background:var(--wz-white);border-radius:var(--wz-radius-lg);
    padding:18px 20px;box-shadow:var(--wz-shadow-card);
  }
  .dx--ru-vfilters .dx--ru-vfilters__select{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--wz-paper);border:1px solid var(--wz-line);border-radius:var(--wz-radius-pill);
    padding:10px 16px;font-size:.88rem;font-weight:500;color:var(--wz-ink-soft);
    cursor:pointer;transition:border-color .2s, color .2s, background .2s, transform .2s;white-space:nowrap;
  }
  .dx--ru-vfilters .dx--ru-vfilters__select:hover{border-color:var(--wz-pink-mid);color:var(--wz-pink);background:var(--wz-pink-soft);transform:translateY(-1px)}
  .dx--ru-vfilters .dx--ru-vfilters__select .dx--ru-vfilters__label{color:var(--wz-ink-mute);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
  .dx--ru-vfilters .dx--ru-vfilters__select i{font-size:11px;color:var(--wz-ink-mute);transition:color .2s}
  .dx--ru-vfilters .dx--ru-vfilters__select:hover i{color:var(--wz-pink)}
  .dx--ru-vfilters .dx--ru-vfilters__submit{margin-left:auto}
  .dx--ru-vfilters .dx--ru-vfilters__microcopy{color:var(--wz-ink-mute);font-size:.92rem;font-style:italic;line-height:1.6;margin-top:18px;max-width:64ch}

  /* ── keuzehulp — inset editorial "twijfel je?" block (zachte keuzehulp) ──
     Centered card with icon, title, body, single CTA. Reusable advisory inset. */
  .dx--ru-keuzehulp .dx--ru-keuzehulp__inner{
    max-width:760px;margin:0 auto;text-align:center;
    display:flex;flex-direction:column;align-items:center;gap:18px;
    background:linear-gradient(180deg,#fff 0%, var(--wz-pink-soft) 100%);
    border:1px solid rgba(var(--wz-pink-rgb),.16);border-radius:var(--wz-radius-xl);
    padding:clamp(36px,4vw,56px);box-shadow:0 1px 2px rgba(23,20,19,.03), 0 24px 48px -32px rgba(var(--wz-pink-rgb),.18);
  }
  .dx--ru-keuzehulp .dx--ru-keuzehulp__icon{
    width:64px;height:64px;border-radius:50%;background:var(--wz-white);color:var(--wz-pink);
    display:inline-flex;align-items:center;justify-content:center;border:1.5px solid rgba(var(--wz-pink-rgb),.35);
  }
  .dx--ru-keuzehulp .dx--ru-keuzehulp__icon i{font-size:26px}
  .dx--ru-keuzehulp h2{font-size:clamp(1.7rem,2.8vw,2.3rem);letter-spacing:-.026em;line-height:1.1;max-width:20ch}
  .dx--ru-keuzehulp p{color:var(--wz-ink-soft);font-size:1.02rem;line-height:1.65;max-width:54ch;margin:0}
  .dx--ru-keuzehulp .dx--ru-keuzehulp__cta{margin-top:6px}

  /* ── niet-online — single dark pivot ("niet elke vacature staat online") ──
     Inverted purple-deep band: eyebrow + h2 + body + on-purple CTA, centered editorial. */
  .dx--ru-niet-online{position:relative;overflow:hidden}
  .dx--ru-niet-online::before{content:"";position:absolute;top:-220px;right:-140px;width:560px;height:560px;background:radial-gradient(circle,rgba(var(--wz-pink-rgb),.30) 0%,transparent 60%);pointer-events:none}
  .dx--ru-niet-online::after{content:"";position:absolute;bottom:-240px;left:-220px;width:520px;height:520px;background:radial-gradient(circle,rgba(var(--wz-purple-rgb),.45) 0%,transparent 60%);pointer-events:none}
  .dx--ru-niet-online .dx--ru-niet-online__inner{position:relative;z-index:2;max-width:780px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
  .dx--ru-niet-online .dx--ru-niet-online__inner .dx--ru-eyebrow{margin-bottom:0;justify-content:center}
  .dx--ru-niet-online h2{color:#fff;font-size:clamp(2rem,3.6vw,3rem);letter-spacing:-.03em;line-height:1.06;max-width:24ch}
  .dx--ru-niet-online h2 em{font-style:italic;color:var(--wz-pink)}
  .dx--ru-niet-online p{color:rgba(255,255,255,.78);font-size:1.05rem;line-height:1.7;max-width:54ch;margin:0}
  .dx--ru-niet-online .dx--ru-niet-online__cta{margin-top:6px}

  /* ── functieroutes — route-link grid per functie (SEO + practical navigation) ──
     Compact icon+label cards in a grid; reuses dx--ru-card chrome via --route modifier. */
  .dx--ru-functieroutes .dx--ru-functieroutes__head{display:flex;flex-direction:column;gap:14px;max-width:880px;margin-bottom:40px}
  .dx--ru-functieroutes .dx--ru-functieroutes__head h2{font-size:clamp(2rem,3.4vw,2.7rem);letter-spacing:-.028em;line-height:1.06}
  .dx--ru-functieroutes .dx--ru-functieroutes__head h2 em{font-style:italic;color:var(--wz-pink)}
  .dx--ru-functieroutes .dx--ru-functieroutes__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .dx--ru-card--route{
    display:flex;align-items:center;gap:18px;padding:22px 24px;text-decoration:none;color:inherit;
  }
  .dx--ru-card--route .dx--ru-card--route__icon{
    width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid var(--wz-pink-mid);color:var(--wz-pink);
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .3s ease;
  }
  .dx--ru-card--route .dx--ru-card--route__icon i{font-size:22px}
  .dx--ru-card--route:hover .dx--ru-card--route__icon{transform:scale(1.05) rotate(-3deg)}
  .dx--ru-card--route .dx--ru-card--route__meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
  .dx--ru-card--route .dx--ru-card--route__title{font-family:var(--wz-font-body);font-weight:700;font-size:1.12rem;letter-spacing:-.014em;line-height:1.18;color:var(--wz-ink);transition:color .2s}
  .dx--ru-card--route:hover .dx--ru-card--route__title{color:var(--wz-pink)}
  .dx--ru-card--route .dx--ru-card--route__sub{font-size:.84rem;color:var(--wz-ink-mute);line-height:1.4}
  .dx--ru-card--route .dx--ru-arrow{color:var(--wz-pink);font-weight:500;flex-shrink:0;transition:transform .25s ease}
  .dx--ru-card--route:hover .dx--ru-arrow{transform:translateX(4px)}
  .dx--ru-functieroutes .dx--ru-functieroutes__foot{margin-top:32px;color:var(--wz-ink-soft);font-size:.96rem;line-height:1.65;max-width:62ch}

  /* ── eind-cta (.eind-cta + .contact-card) ──
     Drift reconciled: padding moves to the .u-section rhythm (104/120), no per-block 112px. */
  .dx--ru-eind-cta{position:relative}
  .dx--ru-eind-cta .dx--ru-eind-cta__inner{width:min(100% - 2 * var(--wz-inset), var(--wz-content-max));margin-inline:auto;display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:center}
  .dx--ru-eind-cta .dx--ru-eind-cta__left h2{text-align:left;max-width:18ch;font-size:clamp(2.4rem,4.4vw,3.4rem);letter-spacing:-.038em;line-height:1.02;margin-bottom:18px}
  .dx--ru-eind-cta .dx--ru-eind-cta__left h2 em{font-style:italic;color:var(--wz-pink)}
  .dx--ru-eind-cta .dx--ru-eind-cta__left p{color:var(--wz-ink-soft);font-size:1.04rem;line-height:1.65;margin-bottom:28px;text-align:left;max-width:48ch}
  .dx--ru-eind-cta .dx--ru-eind-cta__left .dx--ru-eind-cta__trust{color:var(--wz-ink-mute);font-size:.92rem;font-style:italic;margin-top:6px}
  .dx--ru-eind-cta .dx--ru-eind-cta__left-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}

  /* ── hero --story (story-led single-column overview hero — Ervaringen /ervaringen) ──
     Variant of --overview: one centred copy column, no search card. Warm, narrative
     framing for editorial overview pages. Reuses the --overview padding/h1 scale. */
  .dx--ru-hero--story .dx--ru-hero__story-inner{max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}
  .dx--ru-hero--story .dx--ru-eyebrow{justify-content:center;margin-bottom:18px}
  .dx--ru-hero--story h1{max-width:18ch;margin-left:auto;margin-right:auto}
  .dx--ru-hero--story .dx--ru-hero__lead{max-width:60ch;margin-left:auto;margin-right:auto;text-align:center}
  .dx--ru-hero--story .dx--ru-hero__ctas{justify-content:center;margin-bottom:0}

  /* ── ervaring-uitgelicht (one large featured story — editorial portrait + pull-quote) ──
     Two-column: portrait banner left, big quote + attribution + read-link right.
     Reusable for any "uitgelicht verhaal" feature block. */
  .dx--ru-ervaring-uitgelicht .dx--ru-ervaring-uitgelicht__inner{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center;max-width:1160px;margin:0 auto}
  .dx--ru-ervaring-uitgelicht .dx--ru-ervaring-uitgelicht__photo{
    position:relative;aspect-ratio:4/5;border-radius:var(--wz-radius-xl);overflow:hidden;
    background:linear-gradient(135deg, var(--wz-paper-warm) 0%, var(--wz-paper-deep) 55%, var(--wz-purple-soft) 100%);
    box-shadow:var(--wz-shadow-float);
  }
  .dx--ru-ervaring-uitgelicht .dx--ru-ervaring-uitgelicht__photo img{width:100%;height:100%;object-fit:cover}
  .dx--ru-ervaring-uitgelicht .dx--ru-ervaring-uitgelicht__photo.is-placeholder::before{
    content:"Portretfoto (TBD)";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-family:var(--wz-font-display);font-style:italic;color:rgba(var(--wz-purple-deep-rgb),.45);font-size:.9rem;letter-spacing:.04em;
  }
  .dx--ru-ervaring-uitgelicht .dx--ru-ervaring-uitgelicht__photo .dx--ru-ervaring-uitgelicht__stars{
    position:absolute;top:16px;left:16px;background:rgba(255,255,255,.94);padding:6px 12px;border-radius:var(--wz-radius-pill);
    color:var(--wz-pink);font-size:.82rem;letter-spacing:1.2px;backdrop-filter:blur(6px);
  }
  /* role/category label on the featured ervaring photo (replaces the star rating — no stars per brand) */
  .dx--ru-ervaring-uitgelicht .dx--ru-ervaring-uitgelicht__photo .dx--ru-ervaring-uitgelicht__role-tag{
    position:absolute;top:16px;left:16px;z-index:2;background:rgba(255,255,255,.94);padding:6px 12px;border-radius:var(--wz-radius-pill);
    color:var(--wz-pink);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;backdrop-filter:blur(6px);
  }
  .dx--ru-ervaring-uitgelicht .dx--ru-ervaring-uitgelicht__body .dx--ru-eyebrow{margin-bottom:22px}
  .dx--ru-ervaring-uitgelicht .dx--ru-ervaring-uitgelicht__quote{
    font-family:var(--wz-font-display);font-weight:600;font-size:clamp(1.7rem,3vw,2.6rem);
    letter-spacing:-.028em;line-height:1.1;color:var(--wz-ink);margin-bottom:24px;
  }
  .dx--ru-ervaring-uitgelicht .dx--ru-ervaring-uitgelicht__quote em{font-style:italic;color:var(--wz-pink)}
  .dx--ru-ervaring-uitgelicht .dx--ru-ervaring-uitgelicht__text{color:var(--wz-ink-soft);font-size:1.04rem;line-height:1.66;margin-bottom:14px;max-width:54ch}
  .dx--ru-ervaring-uitgelicht .dx--ru-ervaring-uitgelicht__attrib{display:flex;align-items:baseline;gap:10px;margin:22px 0 26px}
  .dx--ru-ervaring-uitgelicht .dx--ru-ervaring-uitgelicht__name{font-family:var(--wz-font-body);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;color:var(--wz-ink)}
  .dx--ru-ervaring-uitgelicht .dx--ru-ervaring-uitgelicht__role{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wz-pink);font-weight:700}

  /* ── ervaring-body (long-form verhaal: prose column + sticky adviseur sidebar) ──
     The detail-page article body for an `ervaring` CPT single. A readable prose
     measure (~62ch) on the left, an optional sidebar on the right carrying the
     byline + the menselijk-contact adviseur card (the medewerker who guided this
     person). Reusable for any long-form story/article single. Sidebar adviseur
     card is a compact column variant of the Professionals adviseur card. */
  .dx--ru-ervaring-body .dx--ru-ervaring-body__layout{
    max-width:var(--wz-content-wide);margin:0 auto;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,472px);
    gap:clamp(40px,5vw,72px);align-items:start;
  }
  .dx--ru-ervaring-body .dx--ru-ervaring-body__prose{max-width:80ch}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__prose > :first-child{margin-top:0}
  /* in-body OPTIONAL video — placed between paragraphs, rendered only when the
     ervaring has a video_url. (The person photo lives in the hero, not here.)
     16:9 poster frame with a centred play button. */
  .dx--ru-ervaring-body .dx--ru-ervaring-body__video{margin:20px 0 34px}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__video-frame{
    position:relative;aspect-ratio:16/9;border-radius:var(--wz-radius-lg);overflow:hidden;margin-top:20px;
    background:
      radial-gradient(circle at 30% 30%, rgba(var(--wz-pink-rgb),.14) 0%, transparent 55%),
      radial-gradient(circle at 72% 72%, rgba(var(--wz-purple-rgb),.16) 0%, transparent 55%),
      linear-gradient(135deg, var(--wz-paper-warm) 0%, var(--wz-paper-deep) 100%);
    box-shadow:var(--wz-shadow-card);
  }
  .dx--ru-ervaring-body .dx--ru-ervaring-body__video-frame img{width:100%;height:100%;object-fit:cover;display:block}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__video-ph{
    position:absolute;top:16px;left:18px;
    font-family:var(--wz-font-body);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--wz-ink-mute);background:rgba(255,255,255,.72);border-radius:var(--wz-radius-pill);padding:5px 12px;
  }
  .dx--ru-ervaring-body .dx--ru-ervaring-body__video-play{
    position:absolute;inset:0;margin:auto;width:74px;height:74px;border:0;cursor:pointer;
    border-radius:50%;background:var(--wz-pink);color:#fff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 10px 30px -8px rgba(var(--wz-pink-rgb),.6);transition:transform .2s ease, background .2s ease;
  }
  .dx--ru-ervaring-body .dx--ru-ervaring-body__video-play i{font-size:24px;margin-left:3px}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__video-play:hover{transform:scale(1.06);background:var(--wz-pink-hover)}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__video-cap{margin-top:10px;font-size:.85rem;font-style:italic;color:var(--wz-ink-mute)}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__byline{
    display:flex;flex-wrap:wrap;align-items:center;gap:10px;
    font-size:.9rem;color:var(--wz-ink-mute);line-height:1.5;
    padding-bottom:22px;margin-bottom:28px;border-bottom:1px solid var(--wz-line);
  }
  .dx--ru-ervaring-body .dx--ru-ervaring-body__byline .dx--ru-ervaring-body__author{font-weight:600;color:var(--wz-ink)}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__byline .dx--ru-ervaring-body__sep{color:var(--wz-pink);font-weight:600}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__lead{
    font-family:var(--wz-font-body);font-size:1.22rem;line-height:1.62;font-weight:500;
    color:var(--wz-ink);margin-bottom:30px;letter-spacing:-.006em;
  }
  .dx--ru-ervaring-body .dx--ru-ervaring-body__prose p{color:var(--wz-ink-soft);font-size:1.06rem;line-height:1.75;margin-bottom:22px}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__prose h2{
    font-family:var(--wz-font-display);font-weight:700;font-size:clamp(1.4rem,2.2vw,1.7rem);
    letter-spacing:-.02em;line-height:1.18;color:var(--wz-ink);margin:40px 0 14px;
  }
  .dx--ru-ervaring-body .dx--ru-ervaring-body__prose h2 em{font-style:italic;color:var(--wz-pink)}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__pullquote{
    margin:34px 0;padding:6px 0 6px 26px;border-left:3px solid var(--wz-pink);
    font-family:var(--wz-font-display);font-weight:600;font-style:italic;
    font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.22;letter-spacing:-.02em;color:var(--wz-ink);
  }
  .dx--ru-ervaring-body .dx--ru-ervaring-body__sample-note{
    margin-top:36px;padding:16px 20px;border:1px dashed var(--wz-pink-mid);border-radius:var(--wz-radius-md);
    background:var(--wz-pink-soft);font-size:.86rem;line-height:1.55;color:var(--wz-ink-soft);
  }
  .dx--ru-ervaring-body .dx--ru-ervaring-body__sample-note strong{color:var(--wz-pink);font-weight:600}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__sidebar{position:sticky;top:120px;display:flex;flex-direction:column;gap:18px}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__adv-card{
    background:#fff;border-radius:var(--wz-radius-lg);
    padding:26px 26px 24px;box-shadow:var(--wz-shadow-card);
  }
  .dx--ru-ervaring-body .dx--ru-ervaring-body__adv-eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wz-ink-mute);font-weight:600;display:inline-flex;width:fit-content;align-self:flex-start;margin-bottom:16px}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__adv-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__adv-photo{
    width:64px;height:64px;border-radius:50%;flex-shrink:0;background:var(--wz-purple-soft);
    display:flex;align-items:center;justify-content:center;
    color:var(--wz-purple);font-family:var(--wz-font-display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;
    border:3px solid #fff;box-shadow:0 4px 12px rgba(var(--wz-purple-deep-rgb),.18);
  }
  .dx--ru-ervaring-body .dx--ru-ervaring-body__adv-name{font-family:var(--wz-font-body);font-weight:700;font-size:1.08rem;letter-spacing:-.014em;color:var(--wz-ink);line-height:1.15;display:block}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__adv-role{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wz-pink);font-weight:700;display:block;margin-top:4px}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__adv-quote{color:var(--wz-ink-soft);font-size:.96rem;line-height:1.6;margin-bottom:18px}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__adv-pills{display:flex;flex-direction:column;gap:9px}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__adv-pill{
    display:flex;width:100%;align-items:center;justify-content:center;gap:10px;
    border-radius:var(--wz-radius-pill);padding:11px 16px;
    font-family:var(--wz-font-body);font-size:.9rem;font-weight:500;
    border:1px solid var(--wz-pink-mid);background:#fff;color:var(--wz-ink);
    transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .dx--ru-ervaring-body .dx--ru-ervaring-body__adv-pill i{font-size:14px;color:var(--wz-pink);transition:color .2s ease}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__adv-pill:hover{background:var(--wz-pink-soft);color:var(--wz-pink);border-color:var(--wz-pink);transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(var(--wz-pink-rgb),.35)}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__adv-pill.dx--ru-ervaring-body__adv-pill--primary{background:var(--wz-pink);color:#fff;border-color:var(--wz-pink);box-shadow:0 6px 16px -8px rgba(var(--wz-pink-rgb),.5)}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__adv-pill.dx--ru-ervaring-body__adv-pill--primary i{color:#fff}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__adv-pill.dx--ru-ervaring-body__adv-pill--primary:hover{background:var(--wz-pink-hover);border-color:var(--wz-pink-hover);color:#fff}
  .dx--ru-ervaring-body .dx--ru-ervaring-body__adv-pill.dx--ru-ervaring-body__adv-pill--primary:hover i{color:#fff}
  /* Impreza w-btn owns ::before/::after (the border-overlay layer), so the icon
     goes on the label's ::before instead — inline before the text, inheriting the
     label colour (white on primary, pink on the ghost pills). Glyphs are mapped by
     unicode against the loaded "fontawesome" 900 (full FA5 solid) + "Font Awesome 5
     Brands", bypassing the un-generated .fa-* mapping. */
  .dx--ru-ervaring-body .dx--ru-ervaring-body__adv-pill .w-btn-label::before{
    font-family:fontawesome;font-weight:900;font-style:normal;-webkit-font-smoothing:antialiased;
    display:inline-block;margin-right:9px;font-size:14px;line-height:1;vertical-align:-1px;
  }
  .dx--ru-ervaring-body .dx--ru-ervaring-body__adv-pill--primary .w-btn-label::before{content:"\f086"}            /* comments */
  .dx--ru-ervaring-body .dx--ru-ervaring-body__adv-pill[href^="tel:"] .w-btn-label::before{content:"\f095"}       /* phone */
  .dx--ru-ervaring-body .dx--ru-ervaring-body__adv-pill[href^="https://wa.me"] .w-btn-label::before{font-family:"Font Awesome 5 Brands";font-weight:400;content:"\f232"}  /* whatsapp */

  /* ── ervaring-filter (motivator chip bar above the ervaringen grid) ──
     Static filter scaffold; in production maps to Search & Filter taxonomy
     (ervaring_categorie). Pill rail with one active state. */
  .dx--ru-ervaring-filter .dx--ru-ervaring-filter__label{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--wz-ink-mute);margin-bottom:14px;display:block}
  .dx--ru-ervaring-filter{margin-bottom:36px}
  .dx--ru-ervaring-filter .dx--ru-ervaring-filter__chips{display:flex;flex-wrap:wrap;gap:10px}
  .dx--ru-ervaring-filter .dx--ru-ervaring-filter__chip{
    font-size:1.01rem;color:var(--wz-ink-soft);background:#fff;border:1px solid var(--wz-line);
    border-radius:var(--wz-radius-pill);padding:12px 20px;font-weight:400;cursor:pointer;
    transition:border-color .2s, color .2s, background .2s, transform .2s;
  }
  .dx--ru-ervaring-filter .dx--ru-ervaring-filter__chip:hover{border-color:var(--wz-pink);color:var(--wz-pink);background:var(--wz-pink-soft);transform:translateY(-1px)}
  .dx--ru-ervaring-filter .dx--ru-ervaring-filter__chip.is-active{background:var(--wz-pink);border-color:var(--wz-pink);color:#fff}

  /* ── tussenblok (recognition / empathy interstitial — dark pivot) ──
     Centred, narrow editorial recognition block on a dark surface. Reusable as a
     soft mid-page pivot ("herken je iets…") with one soft CTA. */
  .dx--ru-tussenblok{position:relative;overflow:hidden}
  .dx--ru-tussenblok::before{content:"";position:absolute;top:-200px;left:-160px;width:520px;height:520px;background:radial-gradient(circle,rgba(var(--wz-purple-rgb),.45) 0%,transparent 60%);pointer-events:none}
  .dx--ru-tussenblok::after{content:"";position:absolute;bottom:-220px;right:-160px;width:500px;height:500px;background:radial-gradient(circle,rgba(var(--wz-pink-rgb),.28) 0%,transparent 60%);pointer-events:none}
  .dx--ru-tussenblok .dx--ru-tussenblok__inner{position:relative;z-index:2;max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
  .dx--ru-tussenblok .dx--ru-eyebrow{justify-content:center;margin-bottom:0}
  .dx--ru-tussenblok h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.8rem);letter-spacing:-.03em;line-height:1.08;max-width:20ch}
  .dx--ru-tussenblok p{color:rgba(255,255,255,.78);font-size:1.05rem;line-height:1.7;max-width:56ch;margin:0}
  .dx--ru-tussenblok .dx--ru-tussenblok__cta{margin-top:20px}

  /* ── contact-card (eind-cta right column) ── */
  .dx--ru-contact-card{
    background:#fff;border-radius:var(--wz-radius-lg);
    padding:30px 32px 28px;box-shadow:var(--wz-shadow-card);position:relative;
  }
  .dx--ru-contact-card .dx--ru-contact-card__eyebrow{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--wz-pink);margin-bottom:14px;display:block}
  .dx--ru-contact-card .dx--ru-contact-card__lead{font-family:var(--wz-font-display);font-size:1.25rem;font-weight:700;letter-spacing:-.018em;line-height:1.22;margin-bottom:18px;color:var(--wz-ink)}
  .dx--ru-contact-card .dx--ru-contact-card__rows{display:flex;flex-direction:column;border-top:1px solid var(--wz-line-soft)}
  /* Rows themselves use the shared .dx--ru-list-row shell + .dx--ru-icon-circle (see "list rows
     & bullets" above); only the contact-card __meta/__label/__value scoping lives there too. */

  /* ── vacature-hero (WP Job Manager single-vacancy hero) ────────────────────
     FULL-WIDTH dark purple-deep panel (owner redesign 2026-05-25, mirrors the
     ervaring-single hero treatment): left content over the dark bg, right photo
     bleeding in + fading into the purple via a left-gradient. Breadcrumb +
     back-link, ONE h1 (job title), short description, a meta-badge row (werkuren /
     salaris / werkveld+regio / contracttype) and the apply CTA. Reusable for any
     /vacature/* single. Salary + hours stay visible text (LLM-readiness §schema).
     Edge-to-edge; sits directly below the static header. */
  .dx--ru-vacature-hero{
    position:relative;margin:0;background:var(--wz-purple-deep);color:#fff;
    overflow:hidden;isolation:isolate;min-height:min(78vh,640px);
    display:flex;align-items:center;gap:clamp(24px,4vw,56px);
  }
  /* right photo bleeding in + fading into the purple (left-gradient) */
  .dx--ru-vacature-hero .dx--ru-vacature-hero__photo{
    position:absolute;top:0;right:0;bottom:0;width:50%;z-index:1;
    background-size:cover;background-repeat:no-repeat;background-position:center right;
  }
  .dx--ru-vacature-hero .dx--ru-vacature-hero__photo::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg, var(--wz-purple-deep) 0%, rgba(var(--wz-purple-deep-rgb),.68) 28%, rgba(var(--wz-purple-deep-rgb),0) 66%);
  }
  /* left content column — no max-width cap; bounded by the flex split + the optional aside */
  .dx--ru-vacature-hero .dx--ru-vacature-hero__inner{position:relative;z-index:2;flex:1 1 56%;min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding:56px clamp(24px,2.5vw,40px) 56px var(--wz-inset)}
  /* right column — holds the OPTIONAL per-functie review card, layered over the photo */
  .dx--ru-vacature-hero .dx--ru-vacature-hero__aside{position:relative;z-index:2;flex:0 1 460px;min-width:0;display:flex;padding:48px var(--wz-inset) 48px 0}
  .dx--ru-vacature-hero .dx--ru-vacature-hero__aside > *{width:100%;margin:0}
  /* compact the shared testimonial card when it sits in the hero aside */
  .dx--ru-vacature-hero .dx--ru-vacature-hero__aside .dx--ru-vacature-testimonial{grid-template-columns:1fr;max-width:none;padding:clamp(22px,2.4vw,30px)}
  .dx--ru-vacature-hero .dx--ru-vacature-hero__aside .dx--ru-vacature-testimonial .dx--ru-vacature-testimonial__avatar{width:72px;height:72px;font-size:1.4rem;margin-bottom:4px}
  .dx--ru-vacature-hero .dx--ru-vacature-hero__aside .dx--ru-vacature-testimonial .dx--ru-vacature-testimonial__quote{font-size:1.02rem;max-width:none}
  /* circular pink back button + light label (mirrors ervaring-single) */
  .dx--ru-vacature-hero .dx--ru-vacature-hero__back{
    display:inline-flex;align-items:center;gap:14px;width:fit-content;
    color:var(--wz-on-dark-1);font-family:var(--wz-font-body);font-size:.95rem;font-weight:500;margin-bottom:22px;
  }
  .dx--ru-vacature-hero .dx--ru-vacature-hero__back-ic{
    width:42px;height:42px;border-radius:50%;background:var(--wz-pink);color:#fff;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;transition:transform .2s ease, background .2s ease;
  }
  .dx--ru-vacature-hero .dx--ru-vacature-hero__back:hover{color:#fff}
  .dx--ru-vacature-hero .dx--ru-vacature-hero__back:hover .dx--ru-vacature-hero__back-ic{transform:translateX(-3px);background:var(--wz-pink-hover)}
  .dx--ru-vacature-hero .dx--ru-vacature-hero__crumbs{font-family:var(--wz-font-body);font-size:.86rem;color:var(--wz-on-dark-2);margin-bottom:24px;line-height:1.6}
  .dx--ru-vacature-hero .dx--ru-vacature-hero__crumbs a{color:var(--wz-on-dark-1);text-decoration:underline;text-underline-offset:2px}
  .dx--ru-vacature-hero .dx--ru-vacature-hero__crumbs a:hover{color:#fff}
  .dx--ru-vacature-hero .dx--ru-vacature-hero__crumbs .dx--ru-vacature-hero__sep{color:var(--wz-pink-mid);margin:0 8px}
  .dx--ru-vacature-hero .dx--ru-vacature-hero__crumbs [aria-current]{color:var(--wz-on-dark-2)}
  .dx--ru-vacature-hero .dx--ru-vacature-hero__eyebrow{
    display:inline-flex;align-items:center;gap:14px;
    font-family:var(--wz-font-body);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
    color:#fff;margin-bottom:20px;
  }
  .dx--ru-vacature-hero .dx--ru-vacature-hero__eyebrow::before{content:"";width:34px;height:2px;background:var(--wz-pink-mid)}
  .dx--ru-vacature-hero h1{
    font-family:var(--wz-font-display);font-weight:700;font-size:clamp(2.1rem,4vw,3.4rem);
    line-height:1.05;letter-spacing:-.032em;color:#fff;margin-bottom:20px;max-width:22ch;
  }
  .dx--ru-vacature-hero .dx--ru-vacature-hero__desc{color:var(--wz-on-dark-1);font-size:1.12rem;line-height:1.6;max-width:56ch;margin-bottom:28px}
  .dx--ru-vacature-hero .dx--ru-vacature-hero__meta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:32px}
  .dx--ru-vacature-hero .dx--ru-vacature-hero__badge{
    display:inline-flex;align-items:center;gap:10px;
    padding:10px 18px;border-radius:var(--wz-radius-pill);
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
    font-family:var(--wz-font-body);font-size:.95rem;font-weight:500;color:#fff;
  }
  .dx--ru-vacature-hero .dx--ru-vacature-hero__badge i{font-size:14px;color:var(--wz-pink-mid)}
  /* all badges share one treatment (incl. contracttype) — no special tint */
  .dx--ru-vacature-hero .dx--ru-vacature-hero__actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
  .dx--ru-vacature-hero .dx--ru-vacature-hero__sub{color:var(--wz-on-dark-2);font-size:.9rem}
  @media (max-width:900px){
    .dx--ru-vacature-hero{margin:0;min-height:0;flex-direction:column;align-items:stretch;gap:0}
    .dx--ru-vacature-hero .dx--ru-vacature-hero__photo{width:100%}
    .dx--ru-vacature-hero .dx--ru-vacature-hero__photo::after{background:linear-gradient(180deg, rgba(var(--wz-purple-deep-rgb),.95) 0%, rgba(var(--wz-purple-deep-rgb),.99) 68%)}
    .dx--ru-vacature-hero .dx--ru-vacature-hero__inner{flex:none;max-width:none;padding:44px var(--wz-inset) 24px}
    .dx--ru-vacature-hero .dx--ru-vacature-hero__aside{flex:none;padding:0 var(--wz-inset) 40px}
  }

  /* ── vacature-testimonial (WPJM per-functie experience card) ───────────────
     Avatar photo + name(age) + functie + pull-quote. In the live template the
     person/quote swaps on a functie keyword (6 variants). Reusable wherever a
     single functie testimonial is surfaced. Surface set per page. */
  .dx--ru-vacature-testimonial{
    display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,36px);align-items:center;
    max-width:var(--wz-content-max);margin:0 auto;position:relative;
    background:#fff;border-radius:var(--wz-radius-xl);
    padding:clamp(26px,3vw,40px) clamp(28px,3.5vw,48px);box-shadow:var(--wz-shadow-card);
  }
  .dx--ru-vacature-testimonial .dx--ru-vacature-testimonial__avatar{
    width:clamp(96px,11vw,140px);height:clamp(96px,11vw,140px);border-radius:50%;flex-shrink:0;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    background:var(--wz-purple-soft);color:var(--wz-purple-deep);
    font-family:var(--wz-font-display);font-weight:700;font-size:clamp(1.4rem,2.4vw,2rem);letter-spacing:-.02em;
    border:3px solid var(--wz-white);box-shadow:0 6px 22px -10px rgba(var(--wz-purple-deep-rgb),.4);
  }
  .dx--ru-vacature-testimonial .dx--ru-vacature-testimonial__avatar img{width:100%;height:100%;object-fit:cover}
  .dx--ru-vacature-testimonial .dx--ru-vacature-testimonial__quote-icon{
    position:absolute;top:clamp(18px,2vw,28px);right:clamp(22px,2.6vw,36px);
    font-size:clamp(2rem,4vw,3rem);color:var(--wz-pink-soft);z-index:0;line-height:1;
  }
  .dx--ru-vacature-testimonial .dx--ru-vacature-testimonial__content{position:relative;z-index:1}
  .dx--ru-vacature-testimonial .dx--ru-vacature-testimonial__quote{
    font-family:var(--wz-font-display);font-weight:600;font-size:clamp(1.1rem,1.8vw,1.4rem);
    letter-spacing:-.014em;line-height:1.4;color:var(--wz-ink);margin-bottom:18px;max-width:52ch;
  }
  .dx--ru-vacature-testimonial .dx--ru-vacature-testimonial__author{display:flex;flex-direction:column;gap:3px}
  .dx--ru-vacature-testimonial .dx--ru-vacature-testimonial__name{font-family:var(--wz-font-body);font-weight:700;font-size:1.05rem;letter-spacing:-.012em;color:var(--wz-ink)}
  .dx--ru-vacature-testimonial .dx--ru-vacature-testimonial__function{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wz-pink);font-weight:700}
  @media (max-width:680px){
    .dx--ru-vacature-testimonial{grid-template-columns:1fr;text-align:left}
    .dx--ru-vacature-testimonial .dx--ru-vacature-testimonial__avatar{margin-bottom:6px}
  }

  /* ── vacature-modal (full-screen application pop-up) ───────────────────────
     Fixed full-viewport overlay (neutral scrim + centred scrolling white panel)
     with a close × (top-right) containing the full sollicitatieformulier. Form
     styling reuses .dx--ru-cf7. Toggled .is-open via JS (SSR-friendly: markup is
     in the HTML, just hidden). Reusable for any /vacature/* single. */
  .dx--ru-vacature-modal{
    position:fixed;inset:0;z-index:200;display:none;
    align-items:flex-start;justify-content:center;
    padding:clamp(16px,4vh,56px) var(--wz-inset);overflow-y:auto;
  }
  .dx--ru-vacature-modal.is-open{display:flex}
  .dx--ru-vacature-modal .dx--ru-vacature-modal__scrim{position:fixed;inset:0;background:rgba(23,20,19,.62);backdrop-filter:blur(3px)}
  .dx--ru-vacature-modal .dx--ru-vacature-modal__panel{
    position:relative;z-index:1;width:100%;max-width:760px;margin:auto;
    background:var(--wz-white);border-radius:var(--wz-radius-xl);box-shadow:var(--wz-shadow-float);
    padding:clamp(28px,3.4vw,52px) clamp(24px,3.4vw,52px);
  }
  .dx--ru-vacature-modal .dx--ru-vacature-modal__close{
    position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;
    background:var(--wz-paper);border:1px solid var(--wz-line);color:var(--wz-ink);
    display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;
    transition:background .2s ease, color .2s ease, transform .2s ease;z-index:2;
  }
  .dx--ru-vacature-modal .dx--ru-vacature-modal__close:hover{background:var(--wz-pink);color:#fff;border-color:var(--wz-pink);transform:rotate(90deg)}
  .dx--ru-vacature-modal .dx--ru-vacature-modal__eyebrow{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--wz-pink);display:block;margin-bottom:8px}
  .dx--ru-vacature-modal .dx--ru-cf7__form-title{
    font-family:var(--wz-font-display);font-weight:700;font-size:clamp(1.4rem,2vw,1.8rem);
    letter-spacing:-.02em;line-height:1.18;color:var(--wz-ink);margin-bottom:8px;
  }
  .dx--ru-vacature-modal .dx--ru-cf7__form-sub{color:var(--wz-ink-soft);font-size:.98rem;line-height:1.6;margin-bottom:26px;max-width:54ch}
  /* the modal reuses .dx--ru-cf7 form rules via that class on the form wrapper */
  body.is-modal-lock{overflow:hidden}

  /* ── vacature-apply-fab (floating apply CTA — mobile + desktop) ────────────
     Always-reachable apply trigger. Desktop: floating bottom-right pill. Mobile:
     full-width bottom bar. Opens the application modal. Reusable for any single
     vacancy / persistent conversion CTA. */
  .dx--ru-vacature-fab{
    position:fixed;z-index:150;right:clamp(20px,3vw,40px);bottom:clamp(20px,3vw,36px);
    display:flex;align-items:center;gap:14px;
    opacity:0;transform:translateY(20px);pointer-events:none;
    transition:opacity .4s ease, transform .4s ease;
  }
  .dx--ru-vacature-fab.is-visible{opacity:1;transform:none;pointer-events:auto}
  /* white reassurance pill — makes the CTA read louder on the page */
  .dx--ru-vacature-fab__note{
    background:#fff;border:1px solid var(--wz-line);border-radius:var(--wz-radius-pill);
    padding:11px 20px;font-family:var(--wz-font-body);font-size:.92rem;font-weight:600;color:var(--wz-ink-soft);
    box-shadow:0 10px 30px -16px rgba(23,20,19,.25);white-space:nowrap;
  }
  .dx--ru-vacature-fab .dx--ru-vacature-fab__btn{
    box-shadow:0 18px 40px -14px rgba(var(--wz-pink-rgb),.7), 0 6px 16px rgba(23,20,19,.12);
  }
  @media (max-width:640px){
    /* mobile: full-width bar, always visible (no scroll-gate); note hidden */
    .dx--ru-vacature-fab{left:0;right:0;bottom:0;gap:0;padding:10px 12px env(safe-area-inset-bottom);background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-top:1px solid var(--wz-line);opacity:1;transform:none;pointer-events:auto}
    .dx--ru-vacature-fab__note{display:none}
    .dx--ru-vacature-fab .dx--ru-vacature-fab__btn{width:100%;justify-content:center;border-radius:var(--wz-radius-pill);box-shadow:none}
  }

  /* ── recruiter-card (talentscout "Heb je nog vragen?" — vacancy + CTA column) ──
     Compact contact card: portrait + name + role + email/phone rows. Reusable
     wherever a single recruiter/talentscout is surfaced beside a CTA. */
  .dx--ru-recruiter-card{
    background:#fff;border-radius:var(--wz-radius-lg);
    padding:30px 32px 28px;box-shadow:var(--wz-shadow-card);
  }
  .dx--ru-recruiter-card .dx--ru-recruiter-card__eyebrow{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--wz-pink);margin-bottom:6px;display:block}
  .dx--ru-recruiter-card .dx--ru-recruiter-card__lead{font-family:var(--wz-font-display);font-size:1.25rem;font-weight:700;letter-spacing:-.018em;line-height:1.22;margin-bottom:20px;color:var(--wz-ink)}
  .dx--ru-recruiter-card .dx--ru-recruiter-card__head{display:flex;align-items:center;gap:16px;margin-bottom:20px}
  .dx--ru-recruiter-card .dx--ru-recruiter-card__photo{
    width:64px;height:64px;border-radius:50%;flex-shrink:0;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    background:var(--wz-purple-soft);color:var(--wz-purple-deep);
    font-family:var(--wz-font-display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;
  }
  .dx--ru-recruiter-card .dx--ru-recruiter-card__photo img{width:100%;height:100%;object-fit:cover}
  .dx--ru-recruiter-card .dx--ru-recruiter-card__name{font-family:var(--wz-font-body);font-weight:700;font-size:1.12rem;letter-spacing:-.014em;color:var(--wz-ink);line-height:1.15;display:block}
  .dx--ru-recruiter-card .dx--ru-recruiter-card__role{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wz-pink);font-weight:700;display:block;margin-top:5px}
  .dx--ru-recruiter-card .dx--ru-recruiter-card__rows{display:flex;flex-direction:column;border-top:1px solid var(--wz-line-soft)}
  /* row + icon reuse the shared .dx--ru-list-row / .dx--ru-icon-circle shells (DRY: byte-identical). */
  .dx--ru-recruiter-card .dx--ru-recruiter-card__meta{display:flex;flex-direction:column;gap:2px;flex:1}
  .dx--ru-recruiter-card .dx--ru-recruiter-card__meta .dx--ru-recruiter-card__label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--wz-ink-mute);font-weight:600}
  .dx--ru-recruiter-card .dx--ru-recruiter-card__meta .dx--ru-recruiter-card__value{font-family:var(--wz-font-display);font-size:1.02rem;letter-spacing:-.012em;color:inherit;font-weight:600}

  /* ── cf7 — styled Contact Form 7 wrapper (Contact /contact) ──
     Two-column block: contact options/openingsinfo left, a tokenised, accessible
     contact-form card right. Inputs are placeholders (no real action in concept).
     Reusable for any page that embeds a CF7 form. Surface set per page. */
  .dx--ru-cf7 .dx--ru-cf7__inner{
    display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:clamp(40px,4.5vw,72px);align-items:start;
    max-width:var(--wz-content-max);margin:0 auto;
  }
  /* left — contact options + opening info */
  .dx--ru-cf7 .dx--ru-cf7__aside .dx--ru-eyebrow{margin-bottom:18px}
  .dx--ru-cf7 .dx--ru-cf7__aside h2{
    font-size:clamp(1.9rem,3vw,2.6rem);letter-spacing:-.028em;line-height:1.07;
    color:var(--wz-ink);margin-bottom:18px;
  }
  .dx--ru-cf7 .dx--ru-cf7__aside h2 em{font-style:italic;color:var(--wz-pink)}
  .dx--ru-cf7 .dx--ru-cf7__aside .dx--ru-cf7__aside-lead{color:var(--wz-ink-soft);font-size:1.04rem;line-height:1.65;margin-bottom:26px;max-width:44ch}
  /* (retired 2026-05-29) .dx--ru-cf7__hours was a separate floating card.
     The bereikbaarheid items are now folded into .dx--ru-contact-card rows
     using the .dx--ru-list-row--info modifier (non-interactive variant). */
  /* right — the form card */
  .dx--ru-cf7 .dx--ru-cf7__form-card{
    background:var(--wz-white);border-radius:var(--wz-radius-xl);
    padding:clamp(28px,3vw,44px);box-shadow:var(--wz-shadow-float);
  }
  .dx--ru-cf7 .dx--ru-cf7__form-card .dx--ru-cf7__form-title{
    font-family:var(--wz-font-display);font-weight:700;font-size:clamp(1.3rem,1.8vw,1.6rem);
    letter-spacing:-.02em;line-height:1.2;color:var(--wz-ink);margin-bottom:8px;
  }
  .dx--ru-cf7 .dx--ru-cf7__form-card .dx--ru-cf7__form-sub{color:var(--wz-ink-soft);font-size:.98rem;line-height:1.6;margin-bottom:26px;max-width:50ch}
  .dx--ru-cf7 .dx--ru-cf7__form{display:grid;gap:18px}
  .dx--ru-cf7 .dx--ru-cf7__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .dx--ru-cf7 .dx--ru-cf7__field{display:flex;flex-direction:column;gap:7px}
  .dx--ru-cf7 .dx--ru-cf7__field label{font-family:var(--wz-font-body);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--wz-ink-soft)}
  .dx--ru-cf7 .dx--ru-cf7__field label .dx--ru-cf7__req{color:var(--wz-pink)}
  .dx--ru-cf7 .dx--ru-cf7__field input,
  .dx--ru-cf7 .dx--ru-cf7__field textarea{
    font-family:var(--wz-font-body);font-size:1rem;color:var(--wz-ink);
    background:var(--wz-paper);border:1px solid var(--wz-line);border-radius:var(--wz-radius-md);
    padding:14px 16px;width:100%;transition:border-color .2s ease, background .2s ease;
  }
  .dx--ru-cf7 .dx--ru-cf7__field input::placeholder,
  .dx--ru-cf7 .dx--ru-cf7__field textarea::placeholder{color:var(--wz-ink-mute)}
  .dx--ru-cf7 .dx--ru-cf7__field input:focus,
  .dx--ru-cf7 .dx--ru-cf7__field textarea:focus{outline:none;border-color:var(--wz-pink-mid);background:var(--wz-white)}
  .dx--ru-cf7 .dx--ru-cf7__field textarea{resize:vertical;min-height:130px;line-height:1.55}
  .dx--ru-cf7 .dx--ru-cf7__consent{display:flex;align-items:flex-start;gap:11px;font-size:.9rem;color:var(--wz-ink-soft);line-height:1.5}
  .dx--ru-cf7 .dx--ru-cf7__consent input{margin-top:3px;accent-color:var(--wz-pink);flex-shrink:0;width:17px;height:17px}
  .dx--ru-cf7 .dx--ru-cf7__consent a{color:var(--wz-pink);text-decoration:underline;text-underline-offset:2px}
  .dx--ru-cf7 .dx--ru-cf7__submit{justify-self:start;margin-top:4px}
  .dx--ru-cf7 .dx--ru-cf7__formnote{color:var(--wz-ink-mute);font-size:.84rem;font-style:italic;line-height:1.55;margin-top:2px}

  /* ── Apply form (real WPJM Applications form) inside the V2 modal — 2-col grid,
     labels above inputs; min-height on labels keeps inputs aligned even when a
     label wraps to 2 lines (e.g. the "Mobiel nummer …" field). ── */
  .dx--ru-vacature-modal .job-manager-application-form{
    display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,20px) clamp(16px,1.8vw,28px);align-items:stretch;margin:0;
  }
  .dx--ru-vacature-modal .job-manager-application-form fieldset{
    display:flex;flex-direction:column;gap:7px;margin:0;padding:0;border:0;
  }
  .dx--ru-vacature-modal .job-manager-application-form fieldset > label{
    display:block;margin:0;line-height:1.25;
    font-family:var(--wz-font-body);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--wz-ink);
  }
  /* pin the input to the bottom of the (row-stretched) fieldset so inputs align
     across a row even when one label wraps to 2–3 lines */
  .dx--ru-vacature-modal .job-manager-application-form fieldset > .field,
  .dx--ru-vacature-modal .job-manager-application-form fieldset > input,
  .dx--ru-vacature-modal .job-manager-application-form fieldset > textarea{margin:0;margin-top:auto}
  .dx--ru-vacature-modal .job-manager-application-form input[type=text],
  .dx--ru-vacature-modal .job-manager-application-form input[type=email],
  .dx--ru-vacature-modal .job-manager-application-form input[type=tel],
  .dx--ru-vacature-modal .job-manager-application-form input[type=url],
  .dx--ru-vacature-modal .job-manager-application-form textarea{
    width:100%;box-sizing:border-box;background:var(--wz-paper,#f4f1ee);border:1px solid var(--wz-line,#e6e1db);
    border-radius:var(--wz-radius-pill,999px);padding:13px 18px;font-family:var(--wz-font-body);font-size:.98rem;color:var(--wz-ink);
  }
  .dx--ru-vacature-modal .job-manager-application-form input:focus,
  .dx--ru-vacature-modal .job-manager-application-form textarea:focus{outline:none;border-color:var(--wz-pink);box-shadow:0 0 0 3px rgba(var(--wz-pink-rgb),.15)}
  /* full-width rows */
  .dx--ru-vacature-modal .fieldset-cv,
  .dx--ru-vacature-modal .fieldset-privacyverklaring-aanvaarden{grid-column:1 / -1}
  .dx--ru-vacature-modal .fieldset-cv > label{min-height:0}
  /* privacy: checkbox + inline consent text, no uppercase label */
  .dx--ru-vacature-modal .fieldset-privacyverklaring-aanvaarden{flex-direction:row;align-items:flex-start;gap:10px;flex-wrap:wrap}
  .dx--ru-vacature-modal .fieldset-privacyverklaring-aanvaarden > label{min-height:0;text-transform:none;letter-spacing:0;font-weight:500;font-size:.92rem}
  /* hide honeypot / tracking fieldsets */
  .dx--ru-vacature-modal .fieldset-tracking_fields,
  .dx--ru-vacature-modal .fieldset-bevestig_email_hier {display:none !important}
  /* submit → full-width pink button */
  .dx--ru-vacature-modal .job-manager-application-form input[type=submit],
  .dx--ru-vacature-modal .job-manager-application-form button[type=submit],
  .dx--ru-vacature-modal .job-manager-application-form .application_button{
    grid-column:1 / -1;width:100%;justify-content:center;cursor:pointer;
    background:var(--wz-pink);color:#fff;border:0;border-radius:var(--wz-radius-pill,999px);
    font-family:var(--wz-font-body);font-weight:600;font-size:1rem;padding:15px 28px;transition:background .2s ease;
  }
  .dx--ru-vacature-modal .job-manager-application-form input[type=submit]:hover,
  .dx--ru-vacature-modal .job-manager-application-form button[type=submit]:hover{background:var(--wz-pink-hover)}

  /* ── over-ons-mission (editorial narrative block — Over ons /over-ons) ──
     Two-column editorial: narrative prose left, value/stat rail right. Reusable for
     any "ons verhaal / onze missie" story block. Surface set per page (paper / paper-warm). */
  .dx--ru-over-ons-mission .dx--ru-over-ons-mission__inner{
    display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:clamp(48px,5vw,80px);align-items:start;max-width:var(--wz-content-max);margin:0 auto;
  }
  .dx--ru-over-ons-mission .dx--ru-over-ons-mission__narrative .dx--ru-eyebrow{margin-bottom:20px}
  .dx--ru-over-ons-mission .dx--ru-over-ons-mission__narrative h2{
    font-size:clamp(2rem,3.4vw,2.9rem);letter-spacing:-.03em;line-height:1.05;
    color:var(--wz-ink);margin-bottom:24px;max-width:18ch;
  }
  .dx--ru-over-ons-mission .dx--ru-over-ons-mission__narrative h2 em{font-style:italic;color:var(--wz-pink)}
  .dx--ru-over-ons-mission .dx--ru-over-ons-mission__narrative p{
    color:var(--wz-ink-soft);font-size:1.05rem;line-height:1.72;margin-bottom:18px;max-width:58ch;
  }
  .dx--ru-over-ons-mission .dx--ru-over-ons-mission__narrative p:last-child{margin-bottom:0}
  .dx--ru-over-ons-mission .dx--ru-over-ons-mission__narrative p em{font-style:italic;color:var(--wz-purple)}
  /* right rail — value cards */
  .dx--ru-over-ons-mission .dx--ru-over-ons-mission__values{display:flex;flex-direction:column;gap:16px}
  .dx--ru-over-ons-mission .dx--ru-over-ons-mission__value{
    background:#fff;border-radius:var(--wz-radius-lg);
    padding:24px 26px;box-shadow:var(--wz-shadow-card);
    display:grid;grid-template-columns:46px 1fr;gap:18px;align-items:start;
  }
  .dx--ru-over-ons-mission .dx--ru-over-ons-mission__value-icon{
    width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--wz-pink-mid);color:var(--wz-pink);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .dx--ru-over-ons-mission .dx--ru-over-ons-mission__value-icon i{font-size:18px}
  .dx--ru-over-ons-mission .dx--ru-over-ons-mission__value h3{
    font-family:var(--wz-font-body);font-weight:700;font-size:1.1rem;
    letter-spacing:-.014em;line-height:1.25;color:var(--wz-ink);margin-bottom:7px;
  }
  .dx--ru-over-ons-mission .dx--ru-over-ons-mission__value p{color:var(--wz-ink-soft);font-size:.94rem;line-height:1.58;margin:0}

  /* ── medewerker-grid (portrait cards — directie / team. Over ons + Contact) ──
     Portrait cards in a centred grid. Reuses the adviseur-card photo language
     (round photo, name, role, quote). Reusable for any team / directie listing. */
  .dx--ru-medewerker-grid .dx--ru-medewerker-grid__grid{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;max-width:920px;margin:0 auto;
  }
  .dx--ru-medewerker-grid .dx--ru-medewerker-grid__card{
    background:#fff;border-radius:var(--wz-radius-lg);
    padding:32px 34px;box-shadow:var(--wz-shadow-card);
    display:flex;flex-direction:column;align-items:flex-start;gap:0;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .dx--ru-medewerker-grid .dx--ru-medewerker-grid__card:hover{transform:translateY(-3px);box-shadow:var(--wz-shadow-float)}

  /* card-on-white contrast: cards on a WHITE section flip to paper so they stay
     distinguishable. On paper / paper-warm sections they keep their default white bg. */
  .u-surface-white .dx--ru-medewerker-grid__card,
  .u-surface-white .dx--ru-recruiter-card,
  .u-surface-white .dx--ru-contact-card{background:var(--wz-paper)}
  .dx--ru-medewerker-grid .dx--ru-medewerker-grid__photo{
    width:104px;height:104px;border-radius:50%;overflow:hidden;background:var(--wz-purple-soft);
    display:flex;align-items:center;justify-content:center;
    color:var(--wz-purple);font-family:var(--wz-font-display);font-weight:700;font-size:1.6rem;letter-spacing:-.02em;
    border:3px solid #fff;box-shadow:0 4px 12px rgba(var(--wz-purple-deep-rgb),.18);
    flex-shrink:0;margin-bottom:20px;
  }
  .dx--ru-medewerker-grid .dx--ru-medewerker-grid__photo img{width:100%;height:100%;object-fit:cover}
  .dx--ru-medewerker-grid .dx--ru-medewerker-grid__name{
    font-family:var(--wz-font-body);font-weight:700;font-size:1.32rem;
    letter-spacing:-.016em;color:var(--wz-ink);line-height:1.18;margin-bottom:6px;
  }
  .dx--ru-medewerker-grid .dx--ru-medewerker-grid__role{
    font-family:var(--wz-font-body);font-size:.72rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--wz-pink);font-weight:600;margin-bottom:16px;
  }
  .dx--ru-medewerker-grid .dx--ru-medewerker-grid__quote{color:var(--wz-ink-soft);font-size:1rem;line-height:1.62;max-width:46ch}

  /* ── faq / Q&A accordion (.dx--ru-faq) ──────────────────────────────────────
     SSR-friendly accordion built on <details>/<summary> — all content lives in
     the initial HTML, no JS needed. First child can carry `open`. Reusable for
     any informational Q&A / FAQPage block (zij-instromer, omscholen, studenten…).
     Pair the visible Q&A with a FAQPage JSON-LD whose questions match 1:1. */
  /* head shares the same narrow column + left edge as the accordion (no centered-head / left-body mismatch) */
  /* FAQ is a narrow-centred block: pin the width once on its container instead of
     repeating max-width on the header + list + aside. */
  .dx--ru-faq .o-container{width:min(100% - 2 * var(--wz-inset), var(--wz-content-narrow))}
  .dx--ru-faq .dx--ru-faq__list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--wz-line-strong)}
  .dx--ru-faq .dx--ru-faq__item{border-bottom:1px solid var(--wz-line-strong);padding-bottom:15px}
  .dx--ru-faq .dx--ru-faq__q{
    list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:0.9375rem;
    padding:26px 0 6px;font-family:var(--wz-font-body);font-weight:700;
    font-size:clamp(1.08rem,1.6vw,1.28rem);letter-spacing:-.018em;line-height:1.3;
    color:var(--wz-ink);transition:color .2s ease;
  }
  .dx--ru-faq .dx--ru-faq__q::-webkit-details-marker{display:none}
  .dx--ru-faq .dx--ru-faq__q:hover{color:var(--wz-pink)}
  .dx--ru-faq .dx--ru-faq__q .dx--ru-faq__marker{
    flex-shrink:0;width:30px;height:30px;border-radius:50%;line-height:0;
    background:var(--wz-pink-soft);color:var(--wz-pink);
    display:inline-flex;align-items:center;justify-content:center;margin-top:1px;
    transition:transform .25s ease, background .2s ease, color .2s ease;
  }
  .dx--ru-faq .dx--ru-faq__q .dx--ru-faq__marker i{font-size:13px;line-height:1;display:block;transition:transform .25s ease}
  .dx--ru-faq .dx--ru-faq__item[open] .dx--ru-faq__q .dx--ru-faq__marker{background:var(--wz-pink);color:#fff}
  .dx--ru-faq .dx--ru-faq__item[open] .dx--ru-faq__q .dx--ru-faq__marker i{transform:rotate(45deg)}
  .dx--ru-faq .dx--ru-faq__q .dx--ru-faq__q-text{flex:1;min-width:0;padding-left:0.3125rem}
  .dx--ru-faq .dx--ru-faq__a{padding:4px 0 22px 40px;max-width:74ch}
  .dx--ru-faq .dx--ru-faq__a > :first-child{margin-top:0}
  .dx--ru-faq .dx--ru-faq__a p{color:var(--wz-ink-soft);font-size:1rem;line-height:1.75;margin:0 0 18px}
  .dx--ru-faq .dx--ru-faq__a p:last-child{margin-bottom:0}
  /* lists get a subtle paper-card grouping so bullets read as a distinct cluster, not a wall */
  .dx--ru-faq .dx--ru-faq__a ul{
    list-style:none;display:flex;flex-direction:column;gap:12px;margin:0 0 20px !important;
    padding:18px 22px;background:transparent;border:none;border-radius:var(--wz-radius-md);
  }
  .dx--ru-faq .dx--ru-faq__a ul:last-child{margin-bottom:0}
  .dx--ru-faq .dx--ru-faq__a ul li{position:relative;padding-left:26px;color:var(--wz-ink-soft);font-size:1rem;line-height:1.5;list-style-type:none}
  .dx--ru-faq .dx--ru-faq__a ul li::before{
    content:"";position:absolute;left:2px;top:.52em;width:8px;height:8px;border-radius:50%;
    background:var(--wz-pink);box-shadow:0 0 0 3px var(--wz-pink-soft);
  }
  .dx--ru-faq .dx--ru-faq__a strong{color:var(--wz-ink);font-weight:600}

  /* ── footer (.dx--su-footer__top / .dx--su-footer__bottom) ── */
  .dx--su-footer{position:relative;z-index:2}
  .dx--su-footer .dx--su-footer__top{background:var(--wz-purple-dark);color:#fff;padding:80px 0 60px;position:relative;overflow:hidden}
  .dx--su-footer .dx--su-footer__top::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:140%;height:1px;background:linear-gradient(to right,transparent,rgba(255,255,255,.12) 30%,rgba(255,255,255,.12) 70%,transparent)}
  .dx--su-footer .dx--su-footer__inner{max-width:var(--wz-content-max);margin:0 auto;padding:0;display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:48px}
  .dx--su-footer .dx--su-footer__brand img{height:42px;width:auto;margin-bottom:22px;filter:brightness(0) invert(1)}
  .dx--su-footer .dx--su-footer__brand .dx--su-footer__logomark{width:42px;height:42px;border-radius:12px;background:#fff;color:var(--wz-purple-dark);display:inline-flex;align-items:center;font-family:var(--wz-font-display);font-weight:700;font-size:.92rem;letter-spacing:.04em}
  .dx--su-footer .dx--su-footer__brand p{color:rgba(255,255,255,.65);font-size:.92rem;line-height:1.7}
  .dx--su-footer .dx--su-footer__brand p a{color:#fff;border-bottom:1px solid rgba(255,255,255,.3)}
  .dx--su-footer .dx--su-footer__col h4{font-family:var(--wz-font-display);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:18px;font-weight:700}
  .dx--su-footer .dx--su-footer__col ul{list-style:none;display:flex;flex-direction:column;gap:10px}
  .dx--su-footer .dx--su-footer__col a{color:rgba(255,255,255,.82);font-size:.92rem;transition:color .2s}
  .dx--su-footer .dx--su-footer__col a:hover{color:var(--wz-pink-mid)}
  .dx--su-footer .dx--su-footer__bottom{background:var(--wz-purple-darkest);color:rgba(255,255,255,.55);padding:22px 0}
  .dx--su-footer .dx--su-footer__bottom-inner{max-width:var(--wz-content-max);margin:0 auto;padding:0;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;font-size:.82rem}
  .dx--su-footer .dx--su-footer__bottom a{color:rgba(255,255,255,.55);transition:color .2s}
  .dx--su-footer .dx--su-footer__bottom a:hover{color:#fff}
  .dx--su-footer .dx--su-footer__socials{display:flex;gap:8px}
  .dx--su-footer .dx--su-footer__social{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);transition:all .2s}
  .dx--su-footer .dx--su-footer__social i{font-size:14px}
  .dx--su-footer .dx--su-footer__social:hover{background:var(--wz-pink);color:#fff;transform:translateY(-1px)}

  /* ── reveal (.dx--ru-reveal / .reveal-stagger) ── */
  .dx--ru-reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease, transform .8s ease}
  .dx--ru-reveal.is-in{opacity:1;transform:translateY(0)}
  .dx--ru-reveal--stagger > *{opacity:0;transform:translateY(20px);transition:opacity .7s ease, transform .7s ease}
  .dx--ru-reveal--stagger.is-in > *{opacity:1;transform:translateY(0)}
  .dx--ru-reveal--stagger.is-in > *:nth-child(1){transition-delay:.05s}
  .dx--ru-reveal--stagger.is-in > *:nth-child(2){transition-delay:.13s}
  .dx--ru-reveal--stagger.is-in > *:nth-child(3){transition-delay:.21s}
  .dx--ru-reveal--stagger.is-in > *:nth-child(4){transition-delay:.29s}
  .dx--ru-reveal--stagger.is-in > *:nth-child(5){transition-delay:.37s}
  .dx--ru-reveal--stagger.is-in > *:nth-child(6){transition-delay:.45s}

  /* ── dx--ru-bevestiging — centred confirmation hero (thank-you / form-bedankt pages) ──
     Single focused success state: badge + H1 + one line + return CTA. Clears the
     fixed topbar with its own top padding (no split-hero grid). Reuses dx--ru-eyebrow
     + dx--ru-btn; net-new = the centred layout shell + success badge. */
  .dx--ru-bevestiging{
    position:relative;display:grid;place-items:center;text-align:center;
    padding:clamp(150px,16vh,196px) var(--wz-inset) clamp(72px,11vh,128px);
    background:var(--wz-paper);min-height:min(82vh,720px);overflow:hidden;
  }
  .dx--ru-bevestiging .dx--ru-bevestiging__inner{
    position:relative;z-index:1;max-width:var(--wz-content-narrow);
    display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2.2vw,24px);
  }
  .dx--ru-bevestiging .dx--ru-bevestiging__badge{
    margin:0 auto;width:clamp(72px,9vw,94px);aspect-ratio:1;border-radius:50%;
    display:grid;place-items:center;background:var(--wz-pink-soft);color:var(--wz-pink);
    font-size:clamp(1.9rem,3.6vw,2.4rem);
  }
  .dx--ru-bevestiging h1{
    margin:0;font-size:clamp(2.2rem,4.6vw,3.6rem);font-weight:700;
    letter-spacing:-.035em;line-height:1.02;max-width:18ch;
  }
  .dx--ru-bevestiging h1 .dx--ru-accent{color:var(--wz-pink)}
  .dx--ru-bevestiging .dx--ru-bevestiging__lead{
    margin:0;color:var(--wz-ink-soft);font-size:clamp(1.04rem,1.5vw,1.18rem);
    line-height:1.65;max-width:52ch;
  }
  .dx--ru-bevestiging .dx--ru-bevestiging__actions{
    display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px;
  }

  /* ─────────────── shared responsive (components) ─────────────── */
  @media (max-width:1080px){
    .dx--ru-hero,.dx--ru-hero--gcsp,.dx--ru-hero--werkveld,.dx--ru-hero--functie{grid-template-columns:1fr;min-height:auto;padding:0}
    .dx--ru-hero .dx--ru-hero__side{padding:160px var(--wz-inset) 48px;order:1}
    .dx--ru-hero .dx--ru-hero__visual{min-height:420px;margin-right:0;order:2}
    .dx--ru-hero--werkveld .dx--ru-hero__side,.dx--ru-hero--functie .dx--ru-hero__side{padding:160px var(--wz-inset) 56px}
    .dx--ru-hero--werkveld .dx--ru-hero__visual,.dx--ru-hero--functie .dx--ru-hero__visual{min-height:520px}
    .dx--ru-hero--werkveld .dx--ru-hero__badge,.dx--ru-hero--functie .dx--ru-hero__badge{max-width:none;left:24px;right:24px;bottom:24px}
    .dx--ru-hero--gcsp .dx--ru-hero__testimonial{max-width:none;left:24px;right:24px;bottom:24px}

    .dx--ru-section-header{grid-template-columns:1fr;gap:24px}
    .dx--ru-herken .dx--ru-herken__grid{grid-template-columns:1fr}
    .dx--ru-herken .dx--ru-herken__video{min-height:380px}

    .dx--ru-anders .dx--ru-anders__grid{grid-template-columns:1fr;border-top:none;margin-top:32px}
    .dx--ru-anders .dx--ru-anders__cell{border-right:none;border-bottom:1px solid var(--wz-line);padding:24px 0;grid-template-columns:auto 1fr;gap:0 18px}
    .dx--ru-anders .dx--ru-anders__cell:not(:first-child){padding-left:0}
    .dx--ru-anders .dx--ru-anders__cell:last-child{border-bottom:none}

    .dx--ru-werkgever-strip{grid-template-columns:1fr;gap:14px;text-align:left}
    .dx--ru-werkgever-strip .dx--ru-werkgever-strip__tag,.dx--ru-werkgever-strip .dx--ru-werkgever-strip__go{justify-self:start}
    .dx--ru-werkgevers .dx--ru-werkgevers__head{grid-template-columns:1fr}
    .dx--ru-werkgevers .dx--ru-werkgevers__promise{grid-template-columns:1fr}
    .dx--ru-werkgevers .dx--ru-werkgevers__promise--four{grid-template-columns:1fr}
    .dx--ru-werkgevers .dx--ru-werkgevers__wp{border-right:none;border-bottom:1px solid rgba(255,255,255,.14);padding:24px 0!important}
    .dx--ru-werkgevers .dx--ru-werkgevers__wp:last-child{border-bottom:none}
    .dx--ru-twijfel .dx--ru-twijfel__head,.dx--ru-twijfel .dx--ru-twijfel__body{grid-template-columns:1fr;gap:28px}

    .dx--ru-functies .dx--ru-functies__werkveld-grid{grid-template-columns:repeat(2,1fr)}
    .dx--ru-functies .dx--ru-functies__grid{grid-template-columns:repeat(2,1fr)}
    .dx--ru-functies .dx--ru-functies__foot{justify-content:flex-start}
    .dx--ru-card--functie::after{display:block}
    .dx--ru-card--functie:nth-child(3n)::after{display:block}
    .dx--ru-card--functie:nth-child(2n)::after{display:none}
    .dx--ru-card--functie::before{display:block}
    .dx--ru-card--functie:nth-last-child(-n+3)::before{display:block}
    .dx--ru-card--functie:nth-last-child(-n+2)::before{display:none}

    .dx--ru-vlist .dx--ru-vlist__grid{grid-template-columns:1fr}
    .dx--ru-vlist .dx--ru-vlist__vacatures-foot{flex-direction:column;align-items:flex-start;gap:18px}
    .dx--ru-vlist .dx--ru-vlist__rail{width:100%}
    .dx--ru-vlist .dx--ru-vlist__cta-group{width:100%}
    .dx--ru-vlist .dx--ru-vlist__foot{justify-content:flex-start}
    .dx--ru-ervaringen .dx--ru-ervaringen__grid{grid-template-columns:1fr}

    .dx--ru-over-ons-mission .dx--ru-over-ons-mission__inner{grid-template-columns:1fr;gap:40px}
    .dx--ru-medewerker-grid .dx--ru-medewerker-grid__grid{grid-template-columns:1fr;max-width:520px}

    .dx--ru-cf7 .dx--ru-cf7__inner{grid-template-columns:1fr;gap:48px}
    .dx--ru-cf7 .dx--ru-cf7__row{grid-template-columns:1fr;gap:18px}
    .dx--ru-cf7 .dx--ru-cf7__submit{justify-self:stretch}
    .dx--ru-cf7 .dx--ru-cf7__submit.dx--ru-btn{justify-content:center}

    .dx--ru-traject .dx--ru-traject__bar{grid-template-columns:1fr;gap:32px;padding-top:0}
    .dx--ru-traject .dx--ru-traject__bar::before{left:32px;right:auto;top:24px;bottom:24px;width:2px;height:auto}
    .dx--ru-traject .dx--ru-traject__stop{display:grid;grid-template-columns:64px 1fr;column-gap:18px;row-gap:4px;align-items:start;text-align:left}
    .dx--ru-traject .dx--ru-traject__tag{grid-row:1;grid-column:2;width:auto;height:auto;padding-top:14px}
    .dx--ru-traject .dx--ru-traject__node{grid-row:1 / span 3;grid-column:1;align-self:start;justify-self:center;margin-top:6px}
    .dx--ru-traject .dx--ru-traject__title{grid-row:2;grid-column:2;max-width:none}
    .dx--ru-traject .dx--ru-traject__body{grid-row:3;grid-column:2;max-width:none}
    .dx--ru-traject .dx--ru-traject__stop.dx--ru-traject__stop--climax .dx--ru-traject__node{width:52px;height:52px}

    .dx--ru-bijzonder .dx--ru-bijzonder__grid{grid-template-columns:1fr;gap:40px}
    .dx--ru-bijzonder .dx--ru-bijzonder__visual{min-height:480px}
    .dx--ru-bijzonder .dx--ru-bijzonder__quote{left:20px;width:min(320px,calc(100% - 40px))}

    .dx--ru-past .dx--ru-past__grid{grid-template-columns:1fr;gap:40px}
    .dx--ru-past .dx--ru-past__card{padding:28px 24px 32px;border-radius:var(--wz-radius-lg)}
    .dx--ru-past .dx--ru-past__questions li{grid-template-columns:44px 1fr;gap:16px;padding:18px 0}
    .dx--ru-past .dx--ru-past__questions li::before{width:40px;height:40px;font-size:.84rem}

    .dx--ru-verschillen .dx--ru-verschillen__grid{grid-template-columns:1fr;gap:40px}
    .dx--ru-verschillen .dx--ru-verschillen__left{position:static}
    .dx--ru-verschillen--cta .dx--ru-verschillen--cta__layout{grid-template-columns:1fr;gap:48px}
    .dx--ru-verschillen--cta .dx--ru-verschillen--cta__intro{position:static;top:auto}
    .dx--ru-verschillen--cta .dx--ru-verschillen--cta__cta .dx--ru-btn{align-self:flex-start}

    .dx--ru-pgvm .dx--ru-pgvm__grid{grid-template-columns:1fr;gap:24px}
    .dx--ru-pgvm .dx--ru-pgvm__cta .w-html{grid-template-columns:1fr;text-align:left;gap:20px}
    .dx--ru-pgvm .dx--ru-pgvm__cta-text{border-left:none;border-top:1.5px solid var(--wz-pink);padding-left:0;padding-top:18px}

    .dx--ru-richtingen .dx--ru-richtingen__grid{grid-template-columns:repeat(2,1fr)}
    .dx--ru-richtingen .dx--ru-richtingen__cta{grid-template-columns:auto 1fr;gap:18px}
    .dx--ru-richtingen .dx--ru-richtingen__cta .dx--ru-btn{grid-column:1 / -1;justify-self:flex-start}

    .dx--ru-eind-cta .dx--ru-eind-cta__inner{grid-template-columns:1fr;gap:40px}
    .dx--ru-eind-cta .dx--ru-eind-cta__left-actions{flex-direction:column;align-items:stretch}
    .dx--ru-eind-cta .dx--ru-eind-cta__left-actions .dx--ru-btn{justify-content:center}

    .dx--ru-hero--overview{padding:160px var(--wz-inset) 64px}
    .dx--ru-hero--overview .dx--ru-hero__overview-inner{grid-template-columns:1fr;gap:40px}
    .dx--ru-ervaring-uitgelicht .dx--ru-ervaring-uitgelicht__inner{grid-template-columns:1fr;gap:32px}
    .dx--ru-ervaring-uitgelicht .dx--ru-ervaring-uitgelicht__photo{aspect-ratio:16/10;max-width:520px}
    .dx--ru-ervaring-body .dx--ru-ervaring-body__layout{grid-template-columns:1fr;gap:44px}
    .dx--ru-ervaring-body .dx--ru-ervaring-body__prose{max-width:none}
    .dx--ru-ervaring-body .dx--ru-ervaring-body__sidebar{position:static;top:auto}
    .dx--ru-vfilters .dx--ru-vfilters__submit{margin-left:0;width:100%}
    .dx--ru-vfilters .dx--ru-vfilters__submit .dx--ru-btn{width:100%;justify-content:center}
    .dx--ru-functieroutes .dx--ru-functieroutes__grid{grid-template-columns:repeat(2,1fr)}

    .dx--su-footer .dx--su-footer__inner{grid-template-columns:1fr 1fr;gap:32px}
    .dx--su-topbar-nav .dx--su-topbar-nav__links{display:none}
  }

  @media (max-width:640px){
    .dx--ru-functies .dx--ru-functies__werkveld-grid,.dx--ru-functies .dx--ru-functies__grid{grid-template-columns:1fr}
    .dx--ru-ervaringen .dx--ru-ervaringen__grid{grid-template-columns:1fr}
    .dx--ru-card--functie::after{display:none}
    .dx--ru-card--functie::before{display:block}
    .dx--ru-card--functie:last-child::before{display:none}
    .dx--ru-verschillen--cta .dx--ru-verschillen--cta__num-badge{width:48px;height:48px;font-size:.82rem}
    .dx--ru-verschillen--cta .dx--ru-verschillen--cta__item-row{gap:16px}
    .dx--ru-verschillen--cta .dx--ru-verschillen--cta__item-detail{gap:16px}
    .dx--ru-verschillen--cta .dx--ru-verschillen--cta__item-detail .dx--ru-verschillen--cta__spacer{width:48px}
    .dx--ru-verschillen .dx--ru-verschillen__toggle-head{padding:22px 0}
    .dx--ru-richtingen .dx--ru-richtingen__grid{grid-template-columns:1fr}
    .dx--ru-faq .dx--ru-faq__q{gap:14px}
    .dx--ru-faq .dx--ru-faq__a{padding-left:0}
    .dx--su-footer .dx--su-footer__inner{grid-template-columns:1fr}
    .dx--su-topbar-util{display:none}
    .dx--ru-hero .dx--ru-hero__side{padding-top:80px}
    .dx--ru-hero .dx--ru-hero__stats{grid-template-columns:repeat(2,1fr);gap:16px 0}
    .dx--ru-hero--overview{padding-top:80px}
    .dx--ru-functieroutes .dx--ru-functieroutes__grid{grid-template-columns:1fr}
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   UTILITIES — single-purpose recurring decisions.
   ───────────────────────────────────────────────────────────────────────── */
@layer utilities {
  /* section vertical rhythm (phase-b/19 §6) */
  .u-section{padding:104px 0;position:relative;z-index:2}
  .u-section--tight{padding:80px 0}
  .u-section--spacious{padding:120px 0}
  @media (max-width:640px){
    .u-section,.u-section--tight,.u-section--spacious{padding:72px 0}
  }

  /* surfaces (phase-b/04 surface convention) */
  .u-surface-white{background:var(--wz-white)}
  .u-surface-paper{background:var(--wz-paper)}
  .u-surface-paper-warm{background:var(--wz-paper-warm)}
  .u-surface-purple-deep{background:var(--wz-purple-deep);color:#fff}
  .u-surface-purple-deep h2,.u-surface-purple-deep h3{color:#fff}
  /* lined modifier — transition device between two paper-family surfaces */
  .u-surface--lined{border-top:1px solid var(--wz-line);border-bottom:1px solid var(--wz-line)}

  /* a11y */
  .u-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}

/* ─────────────────────────────────────────────────────────────────────────
   PAGES — dx--su-* page-specific one-offs.
   Each concept fills this layer from its own inline <style> (into @layer pages).
   Examples per concept:
     Homepage      → .dx--su-* for hero-stats strip specifics, werkgevers atmospherics tuning.
     Professionals → .dx--ru-adviseur-card (menselijk-contact) lives here pending its own component family;
                     .dx--su-nhz-* flip-headline + checklist (niet-harder-zoeken) page-unique.
     Werkveld      → .dx--su-typeert (legacy/superseded), .dx--su-fullbleed image band, .dx--su-quote-strip.
     Helpende      → none page-unique beyond what the verschillen--cta + richtingen components cover.
   (Placeholder — no rules authored in the shared file.)
   ───────────────────────────────────────────────────────────────────────── */
@layer pages {

  /* ── Professionals (was Professionals Concept.html @layer pages) ── */
  /* ── Professionals-only one-offs (dx--su-*) ───────────────────────────────
     Everything else inherits from wijzorgen.css. Only the niet-harder-zoeken
     (nhz) flip-headline + checklist and the menselijk-contact adviseur card
     have no shared component — they live here. Plus a few per-section
     padding/surface parity tweaks the approved design relies on. */

  /* herken: approved Professionals spacing — shared file reconciled these to the
     Homepage's herken values (lead 1rem / mb 14px, cta mt 26px). This page's
     approved design uses lead 1.02rem / mb 24px and cta mt 8px (bullets variant).
     A lead that immediately precedes the bullet list collapses to mb 4px so the
     intro sentence reads as part of the list (avoids a too-big visual gap). */
  .dx--su-herken .dx--ru-lead{font-size:1.02rem;margin-bottom:24px}
  .dx--su-herken .dx--ru-lead:has(+ .dx--ru-herken__bullets){margin-bottom:4px}
  .dx--su-herken .dx--ru-herken__cta{margin-top:8px}

  /* vlist head: approved Professionals gap (shared dx--ru-vlist uses 18px) */
  .dx--su-vlist .dx--ru-vlist__head{gap:16px}

  /* niet-harder-zoeken — flip-headline + checkmark list (page-unique) */
  .dx--su-nhz{padding:88px 0}
  .dx--su-nhz-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:64px;align-items:start}
  .dx--su-nhz-flip h3{font-size:clamp(2.1rem,3.6vw,2.2rem);letter-spacing:-.03em;line-height:1.02;max-width:18ch;margin-bottom:26px}
  .dx--su-nhz-flip h3 .dx--su-nhz-flip__strike{text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:var(--wz-ink-mute);color:var(--wz-ink-mute)}
  .dx--su-nhz-flip h3 em{font-style:italic;color:var(--wz-pink)}
  .dx--su-nhz-flip h3 .dx--ru-accent{color:var(--wz-pink)}
  .dx--su-nhz-flip p{color:var(--wz-ink-soft);font-size:1rem;line-height:1.6;max-width:42ch}
  .dx--su-nhz-list{list-style:none;display:flex;flex-direction:column;gap:0}
  .dx--su-nhz-item{display:grid;grid-template-columns:28px 1fr;gap:20px;align-items:start;padding:28px 0;border-bottom:1px solid var(--wz-line)}
  .dx--su-nhz-item:first-child{padding-top:0}
  .dx--su-nhz-item:last-child{border-bottom:0;padding-bottom:0}
  .dx--su-nhz-check{width:34px;height:34px;border-radius:50%;background:#fff;color:var(--wz-pink);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:3px}
  .dx--su-nhz-check i{font-size:20px}
  .dx--su-nhz-item-title{font-family:var(--wz-font-display);font-weight:700;font-size:clamp(1.05rem,1.35vw,1.18rem);line-height:1.3;letter-spacing:-.014em;color:var(--wz-ink);margin-bottom:10px}
  .dx--su-nhz-item-body{color:var(--wz-ink-soft);font-size:.95rem;line-height:1.6}

  /* anders head: approved design never reset the eyebrow's 22px margin
     (shared dx--ru-section-header resets it to 0) — restore for parity */
  .dx--ru-anders .dx--ru-section-header .dx--ru-eyebrow{margin-bottom:22px}

  /* tegenaan — Waar loop je nu tegenaan? (7-card issue grid, Jelle §4) */
  .dx--su-tegenaan .dx--ru-section-header{margin-bottom:48px;max-width:760px}
  .dx--su-tegenaan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
  @media (min-width:1024px){
    .dx--su-tegenaan-grid{grid-template-columns:repeat(3,1fr)}
  }
  .dx--su-tegenaan .dx--ru-card--feature{background:var(--wz-white);cursor:default}
  .dx--su-tegenaan .dx--ru-card--feature:hover{transform:none;box-shadow:0 1px 2px rgba(23,20,19,.03), 0 14px 28px -22px rgba(23,20,19,.10);border-color:rgba(var(--wz-pink-rgb),.18)}
  .dx--su-tegenaan-foot{margin-top:48px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
  .dx--su-tegenaan-foot__line{font-family:var(--wz-font-body);font-style:italic;font-size:1.0rem;color:var(--wz-ink-soft);max-width:48ch;line-height:1.45}

  /* werkveld grid — same 4-col pattern Homepage uses inline (this section
     isn't a .dx--ru-functies wrapper). wv-glyph icon kept at the approved 28px. */
  .dx--su-werkveld-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .dx--su-werkveld-foot{margin-top:40px;display:flex;justify-content:center}
  .dx--ru-card--werkveld .dx--ru-card--werkveld__glyph i{font-size:28px}

  /* traject — Professionals variant has 6 stops (shared default = 7) + asymmetric tail */
  .dx--su-traject{--wz-stap-cols:6;padding-bottom:128px}  /* o-container--wide gives the 1600px the 6-stop bar needs */
  .dx--su-traject .dx--ru-section-header--center{margin-bottom:56px}  /* approved value; shared --center = 44px */
  /* Professionals ervaringen head had NO max-width — h2 stays on one line (shared --center caps at 880px) */
  .dx--ru-ervaringen .dx--ru-section-header--center{margin-bottom:46px;max-width:none}  /* approved: 46px mb (shared 44px) + uncapped width */

  /* menselijk-contact — closing CTA: editorial left + adviseur card right (page-unique) */
  .dx--su-menselijk{border-top:1px solid var(--wz-line)}
  .dx--su-menselijk-inner{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .dx--su-menselijk-left h2{font-size:clamp(2rem,3.2vw,2.7rem);letter-spacing:-.028em;line-height:1.06;margin-bottom:18px;max-width:18ch}
  .dx--su-menselijk-left h2 em{font-style:italic;color:var(--wz-pink)}
  .dx--su-menselijk-left p{color:var(--wz-ink-soft);font-size:1.02rem;line-height:1.65;max-width:46ch;margin-bottom:24px}
  .dx--su-menselijk-actions{display:flex;gap:12px;flex-wrap:wrap}
  .dx--su-adv-card{
    background:#fff;border:1px solid var(--wz-line);border-radius:var(--wz-radius-lg);
    padding:30px 36px 32px;box-shadow:var(--wz-shadow-card);
    display:grid;grid-template-columns:96px 1fr;column-gap:22px;row-gap:0;align-items:center;position:relative;
  }
  .dx--su-adv-photo{
    width:96px;height:96px;border-radius:50%;overflow:hidden;background:var(--wz-purple-soft);
    display:flex;align-items:center;justify-content:center;
    color:var(--wz-purple);font-family:var(--wz-font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;
    border:3px solid #fff;box-shadow:0 4px 12px rgba(var(--wz-purple-deep-rgb),.18);
    flex-shrink:0;grid-row:1 / -1;align-self:start;
  }
  .dx--su-adv-head{display:flex;flex-direction:column;gap:5px;min-width:0}
  .dx--su-adv-name{font-family:var(--wz-font-display);font-weight:700;font-size:1.3rem;letter-spacing:-.016em;color:var(--wz-ink);line-height:1.15;margin-top:0.7em}
  .dx--su-adv-role{font-family:var(--wz-font-body);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--wz-pink);font-weight:600}
  .dx--su-adv-quote{font-family:var(--wz-font-body);font-weight:400;font-style:normal;font-size:1rem;line-height:1.55;color:var(--wz-ink-soft);margin-top:0.5em;max-width:54ch}
  .dx--su-adv-contacts{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:36px}
  .dx--su-adv-pill{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;
    border-radius:var(--wz-radius-pill);padding:13px 18px;
    font-family:var(--wz-font-body);font-size:.92rem;font-weight:500;
    transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    border:1px solid transparent;
  }
  .dx--su-adv-pill i{font-size:15px;transition:color .2s ease}
  .dx--su-adv-pill.dx--ru-ervaring-body__adv-pill--primary{background:var(--wz-pink);color:#fff;border-color:var(--wz-pink);box-shadow:0 6px 16px -8px rgba(var(--wz-pink-rgb),.5)}
  .dx--su-adv-pill.dx--ru-ervaring-body__adv-pill--primary:hover{background:var(--wz-pink-hover);border-color:var(--wz-pink-hover);transform:translateY(-1px);box-shadow:0 12px 24px -10px rgba(var(--wz-pink-rgb),.65)}
  .dx--su-adv-pill.dx--ru-ervaring-body__adv-pill--primary i{color:#fff}
  .dx--su-adv-pill.dx--su-adv-pill__ghost{background:#fff;color:var(--wz-ink);border-color:var(--wz-pink-mid)}
  .dx--su-adv-pill.dx--su-adv-pill__ghost:hover{background:var(--wz-pink-soft);color:var(--wz-pink);border-color:var(--wz-pink);transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(var(--wz-pink-rgb),.35)}
  .dx--su-adv-pill.dx--su-adv-pill__ghost i{color:var(--wz-pink)}

  @media (max-width:1080px){
    .dx--su-nhz-grid{grid-template-columns:1fr;gap:28px}
    .dx--su-werkveld-grid{grid-template-columns:repeat(2,1fr)}
    .dx--su-menselijk-inner{grid-template-columns:1fr;gap:40px}
    .dx--su-adv-card{grid-template-columns:1fr;text-align:center;padding:28px 24px 28px}
    .dx--su-adv-photo{margin:0 auto;grid-row:auto;align-self:auto}
    .dx--su-adv-head{align-items:center}
    .dx--su-adv-quote{text-align:center;margin:0 auto}
    .dx--su-adv-contacts{grid-template-columns:1fr;gap:10px;margin-top:24px}
  }
  @media (max-width:640px){
    .dx--su-werkveld-grid{grid-template-columns:1fr;gap:30px}
  }

  /* ── Privacy Statement (was Privacy Statement Concept.html @layer pages) ── */
  /* ── dx--su-legal-head — slim page header for legal/content pages ──
     Compact band (NOT the big split testimonial hero). Paper surface,
     page-context back-link reused from the hero wayfinding pattern. */
  .dx--su-legal-head{
    background:var(--wz-paper);
    padding:clamp(40px,5vw,72px) 0 clamp(40px,5vw,64px);
    border-bottom:1px solid var(--wz-line);
  }
  .dx--su-legal-head .dx--su-legal-head__inner{width:min(100% - 2 * var(--wz-inset), var(--wz-content-max));margin-inline:auto}
  .dx--su-legal-head .dx--ru-hero__context-back{
    display:inline-flex;align-items:center;gap:8px;
    font-size:.82rem;color:var(--wz-ink-mute);font-weight:500;
    margin-bottom:14px;transition:color .2s;width:fit-content;
  }
  .dx--su-legal-head .dx--ru-hero__context-back:hover{color:var(--wz-pink)}
  .dx--su-legal-head .dx--ru-hero__context-back i{font-size:14px}
  .dx--su-legal-head h1{
    font-size:clamp(2.4rem,5vw,4rem);font-weight:700;
    letter-spacing:-.036em;line-height:1.0;margin:8px 0 0;
  }
  .dx--su-legal-head .dx--su-legal-head__lead{
    font-size:1.06rem;color:var(--wz-ink-soft);
    line-height:1.65;margin-top:22px;
  }
  .dx--su-legal-head .dx--su-legal-head__meta{
    display:inline-flex;align-items:center;gap:8px;
    margin-top:22px;color:var(--wz-ink-mute);
    font-size:.84rem;font-weight:500;letter-spacing:.01em;
  }
  .dx--su-legal-head .dx--su-legal-head__meta i{font-size:13px;color:var(--wz-pink)}

  /* ── dx--su-legal-prose — long-form legal content block ──
     Sticky TOC rail + a content-prose article at a comfortable ~70ch measure.
     Borderless (per system); section anchors clear the fixed topbar. */
  .dx--su-legal-prose .dx--su-legal-prose__grid{
    width:min(100% - 2 * var(--wz-inset), var(--wz-content-max));margin-inline:auto;
    display:grid;grid-template-columns:240px minmax(0,1fr);
    gap:clamp(40px,5vw,80px);align-items:start;
  }
  .dx--su-legal-prose .dx--su-legal-prose__toc{position:sticky;top:135px}
  .dx--su-legal-prose .dx--su-legal-prose__toc-title{
    display:block;margin-bottom:16px;color:var(--wz-pink);
    font-size:.72rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  }
  .dx--su-legal-prose .dx--su-legal-prose__toc a{
    display:block;padding:9px 0;
    border-top:1px solid var(--wz-line-soft);
    color:var(--wz-ink-soft);font-size:.9rem;font-weight:500;line-height:1.35;
    transition:color .2s;
  }
  .dx--su-legal-prose .dx--su-legal-prose__toc a:hover{color:var(--wz-pink)}

  .dx--su-legal-prose .dx--su-legal-prose__article{max-width:70ch}
  .dx--su-legal-prose .dx--su-legal-prose__lead{
    font-family:var(--wz-font-display);font-weight:500;
    font-size:clamp(1.1rem,1.5vw,1.28rem);letter-spacing:-.01em;line-height:1.5;
    color:var(--wz-ink-soft);margin-bottom:8px;
  }
  .dx--su-legal-prose .dx--su-legal-prose__section{
    padding:34px 0;border-top:1px solid var(--wz-line);
    scroll-margin-top:135px;
  }
  .dx--su-legal-prose .dx--su-legal-prose__section:last-child{padding-bottom:0}
  .dx--su-legal-prose h2{
    font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.026em;line-height:1.12;
    margin-bottom:16px;
  }
  .dx--su-legal-prose p{
    color:var(--wz-ink-soft);font-size:1rem;line-height:1.8;margin-bottom:18px;
  }
  .dx--su-legal-prose p:last-child{margin-bottom:0}
  .dx--su-legal-prose a{
    color:var(--wz-pink);font-weight:500;
    text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  }
  .dx--su-legal-prose a:hover{color:var(--wz-pink-dark)}
  .dx--su-legal-prose ul{
    list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px 28px;margin:18px 0 0;
  }
  .dx--su-legal-prose li{
    position:relative;padding-left:18px;
    color:var(--wz-ink-soft);font-size:1rem;line-height:1.7;
  }
  .dx--su-legal-prose li::before{
    content:"";position:absolute;top:.72em;left:0;
    width:5px;height:5px;border-radius:50%;background:var(--wz-pink);
  }

  @media (max-width:900px){
    .dx--su-legal-prose .dx--su-legal-prose__grid{grid-template-columns:1fr}
    .dx--su-legal-prose .dx--su-legal-prose__toc{display:none}
    .dx--su-legal-prose .dx--su-legal-prose__article{max-width:none}
    .dx--su-legal-prose ul{grid-template-columns:1fr}
  }

  /* ── Werken en Leren (was Werken en Leren Concept.html @layer pages) ── */
  /* ── dx--su-wl-hero — page-local split hero (dark purple, photo bleed + card) ── */
  .dx--su-wl-hero{min-height:660px;background:var(--wz-purple-deep);position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center}
  .dx--su-wl-hero .dx--su-zd-hero__photo{position:absolute;inset:0 0 0 42%;background:linear-gradient(135deg,var(--wz-purple-soft),var(--wz-paper-warm));overflow:hidden}
  .dx--su-wl-hero .dx--su-zd-hero__photo::before{content:"";position:absolute;inset:0;background:url("/media/2022/03/werken-bij-wij-zorgen-vacatures-in-de-zorg.jpg") center/cover no-repeat;opacity:.76}
  .dx--su-wl-hero .dx--su-zd-hero__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--wz-purple-deep) 0%,rgba(var(--wz-purple-deep-rgb),.78) 32%,rgba(var(--wz-purple-deep-rgb),0) 78%)}
  .dx--su-wl-hero .dx--su-zd-hero__inner{position:relative;z-index:2;width:auto;max-width:none;margin:0;padding:78px var(--wz-inset);display:grid;grid-template-columns:minmax(0,720px) minmax(300px,1fr);gap:44px;align-items:center}
  .dx--su-wl-hero .dx--ru-hero__context-back{display:inline-flex;align-items:center;gap:10px;color:var(--wz-on-dark-2);font-size:.92rem;margin-bottom:22px}
  .dx--su-wl-hero .dx--ru-hero__context-back i{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff}
  .dx--su-wl-hero .dx--ru-eyebrow{color:var(--wz-pink-mid)}
  .dx--su-wl-hero .dx--ru-eyebrow::before{background:var(--wz-pink-mid)}
  .dx--su-wl-hero h1{font-size:clamp(2.75rem,5.5vw,5.35rem);line-height:.94;letter-spacing:-.05em;color:#fff;max-width:12ch;margin-bottom:22px}
  .dx--su-wl-hero .dx--su-wl-hero__question{font-family:var(--wz-font-display);font-size:clamp(1.3rem,2.2vw,2rem);line-height:1.18;color:#fff;max-width:26ch;margin-bottom:18px;letter-spacing:-.025em}
  .dx--su-wl-hero .dx--ru-hero__lead{color:var(--wz-on-dark-1);font-size:1.08rem;line-height:1.68;max-width:62ch;margin-bottom:32px}
  .dx--su-wl-hero .dx--ru-hero__ctas{display:flex;gap:12px;flex-wrap:wrap}
  .dx--su-wl-hero .dx--su-wl-hero__card{align-self:end;justify-self:end;width:min(390px,100%);background:rgba(255,255,255,.96);border-radius:var(--wz-radius-lg);box-shadow:var(--wz-shadow-float);padding:30px;position:relative;z-index:3}
  .dx--su-wl-hero .dx--su-wl-hero__card span{display:inline-flex;color:var(--wz-pink);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
  .dx--su-wl-hero .dx--su-wl-hero__card strong{display:block;font-family:var(--wz-font-display);font-size:1.18rem;line-height:1.18;letter-spacing:-.025em;color:var(--wz-purple-deep);margin-bottom:24px}

  /* ── dx--su-aanbod-process — tweaks over reused dx--ru-traject (9-step) ── */
  .dx--su-aanbod-process .dx--ru-section-header{max-width:820px;margin:0 auto clamp(56px,5vw,86px)}
  .dx--su-aanbod-process .dx--ru-section-header h2 em{color:var(--wz-pink);font-style:normal}
  .dx--su-aanbod-process .dx--ru-traject__bar{--wz-stap-cols:9;overflow:visible}
  .dx--su-aanbod-process .dx--ru-traject__title{text-transform:none}
  .dx--su-aanbod-process-actions{display:flex;justify-content:center;margin-top:clamp(44px,4vw,72px)}
  @media (max-width:1190px){
    .dx--su-aanbod-process .dx--ru-traject__bar{overflow-x:auto;grid-template-columns:repeat(9,minmax(160px,1fr));padding-bottom:12px}
    .dx--su-aanbod-process .dx--ru-traject__bar::before{left:80px;right:80px}
  }
  @media (max-width:760px){
    .dx--su-aanbod-process .dx--ru-traject__bar{overflow:visible;grid-template-columns:1fr}
  }

  /* De voordelen now uses PURE dx--ru-bijzonder (the proven 50/50 full-bleed photo
     + overlay quote + icon list). The earlier dx--su-advantages-bijzonder overrides
     (custom columns, min-height, washed img opacity) were removed — they broke the
     50/50 image. No page-local CSS needed here anymore. */

  /* ── dx--su-traineeship — sticky-copy + photo card grid ── */
  .dx--su-traineeship .dx--su-traineeship__layout{display:grid;grid-template-columns:minmax(260px,.42fr) minmax(0,1fr);gap:clamp(30px,5vw,60px);align-items:start}
  .dx--su-traineeship .dx--su-traineeship__copy{position:sticky;top:140px}
  .dx--su-traineeship .dx--su-traineeship__copy h2{font-size:clamp(2rem,3.7vw,3.2rem);line-height:1.02;letter-spacing:-.04em;color:var(--wz-purple-deep);margin-bottom:10px}
  .dx--su-traineeship .dx--su-traineeship__section-subtitle{font-size:1.08rem;color:var(--wz-pink);font-weight:600;margin-bottom:18px}
  .dx--su-traineeship .dx--su-traineeship__copy p:not(.dx--su-traineeship__section-subtitle){color:var(--wz-ink-soft);font-size:1rem;line-height:1.74;margin-bottom:20px}
  .dx--su-traineeship .dx--su-traineeship__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  /* paper surface (was #fff) so the cards stand out from the white page; the portrait
     opacity is raised (.16→.46) and the white scrim softened (paper #F7F8FA, .94/.78 → .66/.42)
     so the photo reads clearly behind the copy. */
  .dx--su-traineeship .dx--su-traineeship__card{position:relative;isolation:isolate;overflow:hidden;min-height:265px;background:var(--wz-paper);border-radius:var(--wz-radius-lg);box-shadow:var(--wz-shadow-card);padding:30px;display:flex;flex-direction:column;align-items:flex-start}
  .dx--su-traineeship .dx--su-traineeship__card::before{content:"";position:absolute;inset:0;background:var(--card-img) center/cover no-repeat;opacity:.46;z-index:-2;transition:opacity .25s ease,transform .35s ease}
  .dx--su-traineeship .dx--su-traineeship__card::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(247,248,250,.66),rgba(247,248,250,.42));z-index:-1}
  .dx--su-traineeship .dx--su-traineeship__card:hover::before{opacity:.58;transform:scale(1.04)}
  .dx--su-traineeship .dx--su-traineeship__card h3{font-size:1.55rem;line-height:1.1;color:var(--wz-purple-deep);letter-spacing:-.025em;margin-bottom:4px}
  .dx--su-traineeship .dx--su-traineeship__card h4{font-family:var(--wz-font-body);font-size:.98rem;color:var(--wz-pink);font-weight:700;margin-bottom:18px}
  .dx--su-traineeship .dx--su-traineeship__card p{font-size:.95rem;line-height:1.55;color:var(--wz-ink-soft);margin:0 0 24px}
  .dx--su-traineeship .dx--su-traineeship__card .dx--ru-btn{margin-top:auto}
  @media (max-width:1120px){
    .dx--su-traineeship .dx--su-traineeship__layout{grid-template-columns:1fr}
    .dx--su-traineeship .dx--su-traineeship__copy{position:relative;top:auto}
  }
  @media (max-width:760px){
    .dx--su-traineeship .dx--su-traineeship__grid{grid-template-columns:1fr}
  }

  /* ── dx--su-verdieping — clean editorial long-form rows (no blob / panel / gradient) ── */
  .dx--su-verdieping .dx--ru-section-header{margin-bottom:clamp(40px,4vw,64px)}
  .dx--su-verdieping-rows{max-width:var(--wz-content-wide,1600px);margin:0 auto;border-top:1px solid var(--wz-line)}
  .dx--su-verdieping-row{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(0,1.7fr);gap:clamp(28px,4vw,64px);padding:clamp(34px,4vw,52px) 0;border-bottom:1px solid var(--wz-line)}
  .dx--su-verdieping-row-label{display:flex;flex-direction:column;gap:16px}
  .dx--su-verdieping-row-label span{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--wz-pink);color:var(--wz-pink);font-family:var(--wz-font-display);font-weight:700;font-size:.95rem;letter-spacing:.04em}
  .dx--su-verdieping-row-label h3{margin:0;color:var(--wz-purple-deep);font-family:var(--wz-font-display);font-size:clamp(1.4rem,2.1vw,2rem);line-height:1.08;letter-spacing:-.03em}
  .dx--su-verdieping-row-content p{margin:0;color:var(--wz-ink-soft);font-size:1rem;line-height:1.8}
  .dx--su-verdieping-row-content p + p{margin-top:16px}
  .dx--su-verdieping-actions{display:flex;justify-content:center;margin-top:clamp(40px,4vw,64px)}
  @media (max-width:860px){
    .dx--su-verdieping-row{grid-template-columns:1fr;gap:16px;padding:30px 0}
  }

  /* ── dx--su-faq-aside — "Heb je nog vragen?" block under the FAQ list ── */
  .dx--su-faq-aside{max-width:var(--wz-content-narrow,860px);margin:clamp(36px,4vw,56px) auto 0;text-align:center}
  .dx--su-faq-aside h3{font-family:var(--wz-font-display);font-size:clamp(1.4rem,2.1vw,1.9rem);line-height:1.1;letter-spacing:-.03em;color:var(--wz-purple-deep);margin:0 0 12px}
  .dx--su-faq-aside p{color:var(--wz-ink-soft);font-size:1.02rem;line-height:1.7;max-width:60ch;margin:0 auto 24px !important}

  /* ── responsive: hero ── */
  @media (max-width:1120px){
    .dx--su-wl-hero{margin-top:0;min-height:0}
    .dx--su-wl-hero .dx--su-zd-hero__photo{inset:0}
    .dx--su-wl-hero .dx--su-zd-hero__photo::after{background:linear-gradient(180deg,rgba(var(--wz-purple-deep-rgb),.68),var(--wz-purple-deep) 78%)}
    .dx--su-wl-hero .dx--su-zd-hero__inner{grid-template-columns:1fr}
    .dx--su-wl-hero .dx--su-wl-hero__card{justify-self:start}
  }
  @media (max-width:760px){
    .dx--su-wl-hero .dx--su-zd-hero__inner{padding:58px var(--wz-inset)}
    .dx--su-wl-hero .dx--ru-hero__ctas{flex-direction:column;align-items:stretch}
  }

  /* ── Zorgpersoneel Gezocht (was Zorgpersoneel Gezocht Concept.html @layer pages) ── */
  /* ── Zorgpersoneel-gezocht-only one-offs (dx--su-*) ───────────────────────
     Everything structural inherits from wijzorgen.css. The 4-promise variant
     of dx--ru-werkgevers (--four) lives in the shared file. Only the hero
     benefit-checklist, the flex-naar-vast USP narrative and the SNA trust
     inset have no shared component — they live here as small one-offs. */

  /* hero: reuse the shared split .dx--ru-hero (true 50/50, full-bleed right
     .dx--ru-hero__visual via its negative margin-right). Left = benefit checklist;
     right = placeholder photo (.dx--ru-hero__visual.is-placeholder) + floating kennismaking card. */
  .dx--su-zpg-hero .dx--ru-hero__lead{max-width:54ch}

  /* B1 — floating "Plan kennismaking" card over the full-bleed hero-visual. */
  .dx--su-zpg-herocard{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:min(420px,calc(100% - 56px));z-index:3;
    background:var(--wz-white);border:1px solid rgba(var(--wz-purple-deep-rgb),.14);border-radius:var(--wz-radius-lg);
    box-shadow:0 24px 50px -20px rgba(var(--wz-purple-deep-rgb),.35), 0 4px 12px rgba(0,0,0,.08);
    padding:30px 28px 26px;display:grid;gap:17px;
  }
  .dx--su-zpg-herocard h2{
    font-family:var(--wz-font-display);font-weight:700;font-size:1.22rem;letter-spacing:-.018em;
    line-height:1.22;color:var(--wz-ink);margin:0 0 3px;
  }
  .dx--su-zpg-herocard .dx--su-zpg-herocard__field{display:flex;flex-direction:column;gap:7px}
  .dx--su-zpg-herocard label{
    font-family:var(--wz-font-body);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
    font-weight:600;color:var(--wz-ink-soft);
  }
  .dx--su-zpg-herocard input{
    font-family:var(--wz-font-body);font-size:.98rem;color:var(--wz-ink);
    background:var(--wz-paper);border:1px solid var(--wz-line);border-radius:var(--wz-radius-md);
    padding:12px 14px;width:100%;transition:border-color .2s ease, background .2s ease;
  }
  .dx--su-zpg-herocard input::placeholder{color:var(--wz-ink-mute)}
  .dx--su-zpg-herocard input:focus{outline:none;border-color:var(--wz-pink-mid);background:var(--wz-white)}
  .dx--su-zpg-herocard .dx--ru-btn{justify-content:center;width:100%;margin-top:3px}
  .dx--su-zpg-herocard-note{font-size:.86rem;color:var(--wz-ink-soft);margin:0;padding-top:16px;border-top:1px solid var(--wz-line-soft);text-align:center}
  .dx--su-zpg-herocard-note a{color:var(--wz-pink);font-weight:600}
  @media (max-width:1080px){
    /* stacked hero: card anchors to the bottom of the hero-visual, like the shared testimonial */
    .dx--su-zpg-herocard{top:auto;bottom:24px;left:24px;right:24px;transform:none;width:auto}
  }
  .dx--su-zpg-checklist{
    list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;align-items:start;
    margin:6px 0 30px;max-width:60ch;
  }
  .dx--su-zpg-checklist li{
    display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
    font-family:var(--wz-font-body);font-size:1rem;line-height:1.5;color:var(--wz-ink-soft);
  }
  .dx--su-zpg-checklist li i{
    color:var(--wz-pink);font-size:15px;margin-top:3px;
  }

  /* flex-naar-vast — editorial USP narrative + CTA (page-unique) */
  .dx--su-flexvast-inner{max-width:var(--wz-content-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,5vw,72px);align-items:flex-start}
  .dx--su-flexvast-head h2{font-size:clamp(2rem,3.4vw,2.9rem);letter-spacing:-.03em;line-height:1.05;color:var(--wz-ink);max-width:14ch;margin-bottom:0}
  .dx--su-flexvast-head h2 em{font-style:italic;color:var(--wz-pink)}
  .dx--su-flexvast-body p{color:var(--wz-ink-soft);font-size:1.05rem;line-height:1.72;margin-bottom:18px;max-width:56ch}
  .dx--su-flexvast-body p:last-of-type{margin-bottom:0}
  .dx--su-flexvast-body p em{font-style:italic;color:var(--wz-purple)}
  .dx--su-flexvast-cta{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap}

  /* SNA-Keurmerk — small trust inset (page-unique) */
  .dx--su-sna{
    max-width:920px;margin:36px auto 0;  /* B3: match the founders mg-grid width (shared .dx--ru-medewerker-grid__grid = 920px) */
    display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;
    background:#fff;border:1px solid var(--wz-line);border-radius:var(--wz-radius-lg);
    padding:24px 30px;box-shadow:var(--wz-shadow-card);
  }
  .dx--su-sna-badge{
    width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid var(--wz-pink-mid);color:var(--wz-pink);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .dx--su-sna-badge i{font-size:24px}
  .dx--su-sna-text h3{font-family:var(--wz-font-display);font-weight:700;font-size:1.1rem;letter-spacing:-.014em;color:var(--wz-ink);line-height:1.25;margin-bottom:5px}
  .dx--su-sna-text p{color:var(--wz-ink-soft);font-size:.95rem;line-height:1.55;margin:0}

  @media (max-width:1080px){
    .dx--su-flexvast-inner{grid-template-columns:1fr;gap:32px}
    .dx--su-flexvast-head h2{max-width:none}
  }
  @media (max-width:640px){
    .dx--su-zpg-checklist{grid-template-columns:1fr}
    .dx--su-sna{grid-template-columns:1fr;text-align:left;gap:14px}
  }

  /* ── Werken Zonder Diploma (was Werken Zonder Diploma Concept.html @layer pages) ── */
  /* eind-cta sits on a WHITE section here (section above is paper/paper-warm);
     contact-card flips to paper for contrast. */
  #kennismaking .dx--ru-contact-card{background:var(--wz-paper)}

  /* ── dx--su-zd-hero — purple split hero w/ side route-card (page-local) ── */
  .dx--su-zd-hero{min-height:620px;background:var(--wz-purple-deep);position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center}
  .dx--su-zd-hero .dx--su-zd-hero__photo{position:absolute;inset:0 0 0 48%;background:linear-gradient(135deg,var(--wz-purple-soft),var(--wz-paper-warm));overflow:hidden}
  .dx--su-zd-hero .dx--su-zd-hero__photo::before{content:"";position:absolute;inset:0;background:url("/media/2023/04/werken-in-de-zorg-zonder-diploma-header.jpg") center/cover no-repeat;opacity:.78}
  .dx--su-zd-hero .dx--su-zd-hero__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--wz-purple-deep) 0%,rgba(var(--wz-purple-deep-rgb),.72) 28%,rgba(var(--wz-purple-deep-rgb),0) 72%)}
  .dx--su-zd-hero .dx--su-zd-hero__inner{position:relative;z-index:2;width:100%;max-width:none;margin:0;padding:72px var(--wz-inset);display:grid;grid-template-columns:minmax(0,650px) minmax(0,1fr);gap:48px;align-items:center}
  .dx--su-zd-hero .dx--ru-hero__context-back{display:inline-flex;align-items:center;gap:10px;color:var(--wz-on-dark-2);font-size:.92rem;margin-bottom:22px}
  .dx--su-zd-hero .dx--ru-hero__context-back i{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff}
  .dx--su-zd-hero .dx--ru-eyebrow{color:var(--wz-pink-mid)}
  .dx--su-zd-hero .dx--ru-eyebrow::before{background:var(--wz-pink-mid)}
  .dx--su-zd-hero h1{font-size:clamp(2.7rem,5vw,4.8rem);line-height:.98;letter-spacing:-.04em;color:#fff;max-width:12ch;margin-bottom:24px}
  .dx--su-zd-hero .dx--ru-hero__lead{color:var(--wz-on-dark-1);font-size:1.12rem;line-height:1.66;max-width:58ch;margin-bottom:32px}
  .dx--su-zd-hero .dx--ru-hero__ctas{display:flex;gap:12px;flex-wrap:wrap}
  .dx--su-zd-hero .dx--su-zd-hero__card{align-self:end;justify-self:end;width:min(390px,100%);background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.6);border-radius:var(--wz-radius-lg);box-shadow:var(--wz-shadow-float);padding:28px;position:relative;z-index:3}
  .dx--su-zd-hero .dx--su-zd-hero__card h2{font-size:1.3rem;line-height:1.22;margin-bottom:14px;color:var(--wz-purple-deep)}
  .dx--su-zd-hero .dx--su-zd-hero__list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:22px}
  .dx--su-zd-hero .dx--su-zd-hero__list li{display:grid;grid-template-columns:24px 1fr;gap:10px;color:var(--wz-ink-soft);font-size:.95rem;line-height:1.45}
  .dx--su-zd-hero .dx--su-zd-hero__list i{color:var(--wz-pink);margin-top:3px}

  /* ── dx--su-zd-mogelijkheden — tweaks over dx--ru-verschillen--cta ── */
  .dx--su-zd-mogelijkheden{
    background:#fff;
    padding:clamp(80px,9vw,128px) 0;
  }
  .dx--su-zd-mogelijkheden .dx--ru-verschillen--cta__layout{align-items:start}
  .dx--su-zd-mogelijkheden .dx--ru-verschillen--cta__intro{position:sticky;top:128px}
  .dx--su-zd-mogelijkheden .dx--ru-verschillen--cta__intro h2 em{color:var(--wz-purple);font-style:normal}
  .dx--su-zd-mogelijkheden .dx--ru-verschillen--cta__item-detail-body{max-width:740px}
  .dx--su-zd-mogelijkheden .dx--ru-verschillen--cta__item-detail-body p{margin:0 0 16px}
  .dx--su-zd-mogelijkheden .dx--ru-verschillen--cta__item-detail-body p:last-child{margin-bottom:0}
  .dx--su-zd-mogelijkheden .dx--ru-verschillen--cta__item-detail-body ul{
    display:grid;
    gap:8px;
    margin:16px 0 18px;
    padding-left:0;
    list-style:none;
  }
  .dx--su-zd-mogelijkheden .dx--ru-verschillen--cta__item-detail-body li{
    position:relative;
    padding-left:22px;
    list-style:none;
  }
  .dx--su-zd-mogelijkheden .dx--ru-verschillen--cta__item-detail-body li::before{
    content:"";
    position:absolute;
    left:0;
    top:.72em;
    width:6px;
    height:6px;
    border-radius:999px;
    background:var(--wz-pink);
  }

  /* ── dx--su-zd-vac-* — vacatures filter shell + list (page-local) ── */
  .dx--su-zd-vac-head{text-align:center;max-width:760px;margin:0 auto 34px}
  .dx--su-zd-vac-head h2:first-of-type{font-size:clamp(2rem,3.2vw,2.7rem);margin-bottom:6px}
  .dx--su-zd-vac-head h2:last-of-type{font-size:1.06rem;font-family:var(--wz-font-body);font-weight:500;letter-spacing:0;color:var(--wz-pink);line-height:1.4}
  .dx--su-zd-vac-shell{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;max-width:1120px;margin:0 auto}
  .dx--su-zd-filter-card{background:#fff;border:1px solid var(--wz-line);border-radius:var(--wz-radius-lg);box-shadow:var(--wz-shadow-card);padding:22px;position:sticky;top:120px}
  .dx--su-zd-filter-card h5{font-family:var(--wz-font-display);font-size:.98rem;letter-spacing:-.01em;margin-bottom:12px;color:var(--wz-ink)}
  .dx--su-zd-filter-row{display:flex;gap:8px;margin-bottom:18px}
  .dx--su-zd-filter-row span{display:inline-flex;align-items:center;justify-content:center;min-width:46px;padding:8px 10px;border:1px solid var(--wz-line);border-radius:var(--wz-radius-sm);font-size:.82rem;color:var(--wz-ink-soft);background:var(--wz-paper)}
  .dx--su-zd-filter-card .dx--su-zd-filter-card__signup{margin-top:20px;padding-top:20px;border-top:1px solid var(--wz-line-soft)}
  .dx--su-zd-filter-card .dx--su-zd-filter-card__signup h4{font-size:1.08rem;line-height:1.22;margin-bottom:9px;color:var(--wz-purple-deep)}
  .dx--su-zd-filter-card .dx--su-zd-filter-card__signup p{font-size:.92rem;line-height:1.55;color:var(--wz-ink-soft);margin-bottom:16px}
  .dx--su-zd-top-filter{background:var(--wz-pink);border-radius:var(--wz-radius-pill);padding:10px;display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin-bottom:18px;box-shadow:0 16px 30px -22px rgba(var(--wz-pink-rgb),.85)}
  .dx--su-zd-top-filter input{border:0;border-radius:var(--wz-radius-pill);padding:12px 16px;font-family:var(--wz-font-body);min-width:0}
  .dx--su-zd-top-filter button{border:0}
  .dx--su-zd-vac-list{display:flex;flex-direction:column;gap:14px}
  .dx--su-zd-vac-list .dx--ru-card--vacancy{padding:24px 28px 22px 30px;background:#fff}


  @media (max-width:1080px){
    .dx--su-zd-mogelijkheden .dx--ru-verschillen--cta__intro{position:static}
    .dx--su-zd-hero{margin-top:0;min-height:0}
    .dx--su-zd-hero .dx--su-zd-hero__photo{inset:0}
    .dx--su-zd-hero .dx--su-zd-hero__photo::after{background:linear-gradient(180deg,rgba(var(--wz-purple-deep-rgb),.66),var(--wz-purple-deep) 76%)}
    .dx--su-zd-hero .dx--su-zd-hero__inner{grid-template-columns:1fr}
    .dx--su-zd-hero .dx--su-zd-hero__card{justify-self:start}
    .dx--su-zd-vac-shell{grid-template-columns:1fr}
    .dx--su-zd-filter-card{position:relative;top:auto;order:2}
    .dx--su-zd-top-filter{grid-template-columns:1fr}
  }

  /* ── Ervaring Single (was Ervaring Single Concept.html @layer pages) ── */
  /* ── Ervaring single one-offs (dx--su-*) ──────────────────────────────────────
     Everything visual inherits from wijzorgen.css. Sections map to shared
     components: hero--story, ervaring-body (NEW, prose + adviseur sidebar),
     ervaringen (erv-card grid, "meer verhalen"), eind-cta + contact-card.
     Only the small back-link + werkveld eyebrow pairing in the hero is page-local. */
  /* ── Ervaring-single HERO (owner redesign 2026-05-25) ───────────────────────
     Dark purple-deep rounded panel, inset from the page edges; left content over
     the dark bg, right photo of the person bleeding in and fading into the purple.
     Closed with an outlined byline pill (avatar + author + dates). Page-local. */
  .dx--su-ervsingle-hero{
    position:relative;margin:0;
    background:var(--wz-purple-deep);overflow:hidden;
    min-height:0;display:flex;align-items:stretch;isolation:isolate;
  }
  /* right photo (ACF foto — example image dropped in for evaluation) + left-fade into the purple */
  /* right photo (ACF foto via us_image): fills the right column full-height, fades left into the purple */
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__photo-col{
    position:relative;padding:0;margin:0;align-self:stretch;z-index:1;
  }
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__photo-col > .vc_column-inner,
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__photo-col > .vc_column-inner > .wpb_wrapper,
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__photo,
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__photo .w-image-h{height:100%}
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__photo{position:relative;margin:0}
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block;opacity:.82}
  /* smooth 90deg fade matching the good wl/zd heroes (was a 105deg banding seam). */
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__photo-col::after{
    content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(90deg, var(--wz-purple-deep) 0%, rgba(var(--wz-purple-deep-rgb),.78) 32%, rgba(var(--wz-purple-deep-rgb),0) 78%);
  }
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__photo-ph{
    position:absolute;top:18px;right:20px;z-index:2;
    font-family:var(--wz-font-body);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--wz-on-dark-2);background:rgba(255,255,255,.12);border-radius:var(--wz-radius-pill);padding:5px 12px;
  }
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__content{
    position:relative;z-index:2;width:100%;
    /* Left edge = the header inset (== the home hero + all other heroes). */
    --wz-hero-inset:var(--wz-inset);
    max-width:calc(788px + var(--wz-hero-inset));
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
    padding:64px clamp(32px,4vw,64px) 64px var(--wz-hero-inset);
  }
  /* circular pink back button + light label */
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__back{
    display:inline-flex;align-items:center;gap:14px;width:fit-content;
    color:var(--wz-on-dark-1);font-family:var(--wz-font-body);font-size:.95rem;font-weight:500;margin-bottom:26px;
  }
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__back-ic{
    width:44px;height:44px;border-radius:50%;background:var(--wz-pink);color:#fff;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;transition:transform .2s ease, background .2s ease;
  }
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__back:hover{color:#fff}
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__back:hover .dx--su-ervsingle-hero__back-ic{transform:translateX(-3px);background:var(--wz-pink-hover)}
  /* pink dashed eyebrow */
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__eyebrow{
    display:inline-flex;align-items:center;gap:14px;
    font-family:var(--wz-font-body);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
    color:var(--wz-pink);margin-bottom:22px;
  }
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__eyebrow::before{content:"";width:34px;height:2px;background:var(--wz-pink)}
  .dx--su-ervsingle-hero h1{
    font-family:var(--wz-font-display);font-weight:700;font-size:clamp(2.6rem,5vw,4.4rem);
    line-height:1.02;letter-spacing:-.035em;color:#fff;margin-bottom:26px;max-width:17ch;
  }
  .dx--su-ervsingle-hero h1 .dx--ru-accent{color:var(--wz-pink)}
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__lead{
    color:var(--wz-on-dark-1);font-size:1.1rem;line-height:1.62;max-width:54ch;margin-bottom:34px;
  }
  /* outlined byline pill */
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__byline{
    display:inline-flex;align-items:center;gap:16px;width:fit-content;
    padding:12px 24px 12px 12px;border:1px solid rgba(255,255,255,.18);
    border-radius:var(--wz-radius-pill);background:rgba(255,255,255,.05);
  }
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__byline-avatar{
    width:52px;height:52px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--wz-purple-soft);color:var(--wz-purple-deep);
    font-family:var(--wz-font-display);font-weight:700;font-size:.92rem;letter-spacing:-.02em;
    border:2px solid rgba(255,255,255,.22);
  }
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__byline-meta{display:flex;flex-direction:column;gap:3px;font-family:var(--wz-font-body)}
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__byline-author{color:#fff;font-size:.95rem}
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__byline-author strong{font-weight:700}
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__byline-dates{color:var(--wz-on-dark-2);font-size:.85rem}
  .dx--su-ervsingle-hero .dx--su-ervsingle-hero__byline-dates .dx--su-ervsingle-hero__dot{color:var(--wz-pink);margin:0 7px}

  /* ── Auteur (author) page — LinkedIn social chip below byline pill ──
     E-E-A-T verification row on /auteur/{slug} pages. */
  .dx--su-auteur-social{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
  .dx--su-auteur-social__chip{
    display:inline-flex;align-items:center;gap:10px;
    padding:9px 16px 9px 14px;border-radius:var(--wz-radius-pill);
    background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
    color:#fff;font-family:var(--wz-font-body);font-size:.88rem;font-weight:500;
    text-decoration:none;transition:background .2s ease,border-color .2s ease,transform .2s ease;
  }
  .dx--su-auteur-social__chip i{font-size:1rem;color:var(--wz-pink)}
  .dx--su-auteur-social__chip .dx--ru-arrow{font-size:.88rem;color:var(--wz-on-dark-2);transition:transform .2s ease,color .2s ease}
  .dx--su-auteur-social__chip:hover{background:rgba(255,255,255,.10);border-color:rgba(var(--wz-pink-rgb),.45);transform:translateY(-1px)}
  .dx--su-auteur-social__chip:hover .dx--ru-arrow{transform:translateX(3px);color:var(--wz-pink)}

  /* ── Auteur — Mijn achtergrond: 2-koloms definition list ──
     Label links (max-content), waarde rechts. Onder 720px → gestapeld. */
  .dx--su-auteur-cv{
    display:grid;grid-template-columns:minmax(180px,max-content) 1fr;
    column-gap:32px;row-gap:14px;margin:18px 0 28px;padding:0;
    border-top:1px solid var(--wz-line);padding-top:18px;
  }
  .dx--su-auteur-cv dt{
    font-family:var(--wz-font-body);font-weight:600;color:var(--wz-ink-strong);
    font-size:.92rem;letter-spacing:-.005em;line-height:1.45;
  }
  .dx--su-auteur-cv dd{
    margin:0;font-family:var(--wz-font-body);color:var(--wz-ink);
    font-size:1rem;line-height:1.55;
  }
  .dx--su-auteur-cv dd a{color:var(--wz-pink);text-decoration:underline;text-underline-offset:3px}
  .dx--su-auteur-cv dd a:hover{color:var(--wz-pink-hover)}
  /* row separator — subtle line above each dt except the first */
  .dx--su-auteur-cv dt:not(:first-of-type),
  .dx--su-auteur-cv dt:not(:first-of-type) + dd{
    padding-top:14px;border-top:1px solid var(--wz-line);
  }
  @media (max-width:720px){
    .dx--su-auteur-cv{grid-template-columns:1fr;row-gap:6px;column-gap:0}
    .dx--su-auteur-cv dt{margin-top:14px;padding-top:14px;border-top:1px solid var(--wz-line)}
    .dx--su-auteur-cv dt:first-of-type{margin-top:0;padding-top:0;border-top:0}
    .dx--su-auteur-cv dt:not(:first-of-type) + dd{padding-top:0;border-top:0}
  }

  @media (max-width:900px){
    .dx--su-ervsingle-hero{margin:0;min-height:0}
    .dx--su-ervsingle-hero .dx--su-ervsingle-hero__photo{width:100%}
    .dx--su-ervsingle-hero .dx--su-ervsingle-hero__photo::after{background:linear-gradient(180deg, rgba(var(--wz-purple-deep-rgb),.45) 0%, rgba(var(--wz-purple-deep-rgb),.92) 68%)}
    .dx--su-ervsingle-hero .dx--su-ervsingle-hero__content{max-width:none;padding:48px var(--wz-inset)}
  }

  /* ── Vacature Single (was Vacature Single Concept.html @layer pages) ── */
  /* ── Vacature-single one-offs (dx--su-*) ──────────────────────────────────
     Everything structural inherits from wijzorgen.css. Page-local: the
     sollicitatieproces column-count (6, not the default 7), the prose treatment
     for the verbatim job_description sections, the 2-col body layout (prose +
     sticky recruiter sidebar), the example-photo background for the shared
     vacature-hero, and the small annotation note documenting WPJM variants. */

  /* hero photo — example image, fading into the purple via the shared component */
  .dx--su-vac-hero-photo{
    background-image:url("/media/2020/02/werken-in-de-gehandicaptenzorg-vacatures.jpg");
    background-position:62% 28%;
  }

  /* hero split rebalance (~10% toward 50/50): left text column narrower, right
     photo/aside panel wider. Shared default = left flex 56% / right 460px →
     left 50% / right 520px. Page-local, leaves the stacked mobile layout intact. */
  .dx--ru-vacature-hero .dx--ru-vacature-hero__inner{flex-basis:50%}
  .dx--ru-vacature-hero .dx--ru-vacature-hero__aside{flex-basis:520px}

  /* sollicitatieproces uses the shared dx--ru-traject procesbalk but with 6 stops */
  .dx--su-solliproces{--wz-stap-cols:6}

  /* job_description prose — reuses the ervaring-body prose scale, but rendered as
     standalone sections with the verbatim emoji H3 headings from the template. */
  .dx--su-vac-body .dx--su-vac-body__block{max-width:none;margin:0}
  .dx--su-vac-body .dx--su-vac-body__block + .dx--su-vac-body__block{margin-top:48px;padding-top:48px;border-top:1px solid var(--wz-line)}
  .dx--su-vac-body .dx--su-vac-body__block h2{
    font-family:var(--wz-font-display);font-weight:700;font-size:clamp(1.5rem,2.6vw,2rem);
    letter-spacing:-.02em;line-height:1.12;color:var(--wz-ink);margin-bottom:18px;
  }
  .dx--su-vac-body .dx--su-vac-body__block p{color:var(--wz-ink-soft);font-size:1.06rem;line-height:1.75;margin-bottom:18px}
  .dx--su-vac-body .dx--su-vac-body__block p strong{color:var(--wz-ink);font-weight:700}
  .dx--su-vac-body .dx--su-vac-body__block ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin:4px 0 18px}
  .dx--su-vac-body .dx--su-vac-body__block ul li{position:relative;padding-left:32px;color:var(--wz-ink-soft);font-size:1.04rem;line-height:1.6;list-style:none}
  .dx--su-vac-body .dx--su-vac-body__block ul li::before{
    content:"\f00c";font-family:fontawesome;font-weight:900;font-size:.78rem;
    position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:50%;
    background:var(--wz-pink-soft);color:var(--wz-pink);display:flex;align-items:center;justify-content:center;
  }
  .dx--su-vac-body .dx--su-vac-body__block.is-belofte{
    background:var(--wz-purple-soft);border-radius:var(--wz-radius-lg);
    padding:34px clamp(28px,3.5vw,44px);max-width:none;border:0;margin-top:48px;
  }
  .dx--su-vac-body .dx--su-vac-body__block.is-belofte h2{color:var(--wz-purple-deep)}
  .dx--su-vac-body .dx--su-vac-body__block.is-belofte p{color:var(--wz-ink)}

  /* 2-col body layout: prose left, sticky recruiter sidebar + apply button right */
  .dx--su-vac-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,4vw,64px);align-items:start;max-width:1280px;margin:0 auto}
  .dx--su-vac-sidebar{position:sticky;top:120px;display:flex;flex-direction:column;gap:18px}
  .dx--su-vac-sidebar .dx--ru-btn{width:100%;justify-content:center}

  /* annotation note documenting conditional WPJM template branches not rendered */
  .dx--su-variant-note{
    max-width:64ch;margin:28px auto 0;padding:16px 20px;
    background:var(--wz-paper-warm);border:1px dashed var(--wz-line);border-left:3px solid var(--wz-pink-mid);
    border-radius:var(--wz-radius-sm);font-size:.86rem;line-height:1.6;color:var(--wz-ink-soft);
  }
  .dx--su-variant-note strong{color:var(--wz-pink);font-weight:700}
  .dx--su-variant-note code{font-family:ui-monospace,monospace;font-size:.82em;background:var(--wz-white);padding:1px 5px;border-radius:4px;border:1px solid var(--wz-line)}

  /* CV file upload — match the form text inputs (reused pattern from Contact) */
  .dx--su-cf7-file input[type="file"]{
    font-family:var(--wz-font-body);font-size:.95rem;color:var(--wz-ink-soft);
    background:var(--wz-paper);border:1px solid var(--wz-line);border-radius:var(--wz-radius-md);
    padding:11px 14px;width:100%;cursor:pointer;transition:border-color .2s ease, background .2s ease;
  }
  .dx--su-cf7-file input[type="file"]:focus{outline:none;border-color:var(--wz-pink-mid);background:var(--wz-white)}
  .dx--su-cf7-file input[type="file"]::file-selector-button{
    font-family:var(--wz-font-body);font-size:.82rem;font-weight:600;letter-spacing:.02em;
    color:var(--wz-pink);background:var(--wz-pink-soft);border:1px solid var(--wz-pink-mid);
    border-radius:var(--wz-radius-pill);padding:8px 16px;margin-right:14px;cursor:pointer;
    transition:background .2s ease, color .2s ease;
  }
  .dx--su-cf7-file input[type="file"]::file-selector-button:hover{background:var(--wz-pink);color:#fff}
  .dx--su-cf7-file .dx--su-cf7-file__filenote{font-size:.82rem;color:var(--wz-ink-mute);font-style:italic;margin-top:6px}

  @media (max-width:900px){
    .dx--su-vac-layout{grid-template-columns:1fr}
    /* Recruiter card follows the vacancy body on mobile (was order:-1 = above).
       Source order is article → sidebar, so default order puts it below. */
    .dx--su-vac-sidebar{position:static}
  }

  /* ── Omscholen (was Omscholen Concept.html @layer pages) ── */
  /* eind-cta sits on a WHITE section here (the FAQ above is paper-warm), so the
     contact-card flips to paper to keep contrast. */
  #kennismaking .dx--ru-contact-card{background:var(--wz-paper)}

  /* ── Omscholen one-offs (dx--su-*) ────────────────────────────────────────
     Two genuinely-unique sections the shared components don't cover:
       1) dx--su-werken  — 50/50 photo-placeholder + (eyebrow/h2/lead + intro
          accordion + CTAs). Closest shared cousin is dx--ru-bijzonder (50/50
          image + content) but that block carries an icon list + quote card, not
          an accordion; reusing it would fight the markup. Page-local for now.
       2) dx--su-vacatures — a pink search bar + sticky checkbox filter sidebar +
          a column of vacancy cards. The vacancy CARDS reuse dx--ru-card--vacancy;
          the searchbar + sidebar shell is what's new (no shared "filter rail +
          list" object exists yet).
     The intro accordion rows reuse the shared .dx--ru-faq look so the two
     accordions on the page read as one system. */

  /* 1 ── WERKEN — now REUSES dx--ru-verschillen --cta (same sticky-intro + accordion
     pattern as /werken-in-de-zorg-zonder-diploma), on a paper surface. No bespoke
     50/50 split / page-local CSS needed — the shared component owns the look. */

  /* 2 ── VACATURES — centered head + pink search bar + filter rail + card column */
  .dx--su-vacatures .dx--su-vacatures__search{
    display:grid;grid-template-columns:1fr 1fr auto;gap:10px;
    background:var(--wz-pink);border-radius:var(--wz-radius-lg);
    padding:12px;margin:0 auto 32px;max-width:1060px;
    box-shadow:0 20px 60px -24px rgba(var(--wz-pink-rgb),.55);
  }
  .dx--su-vacatures .dx--su-vacatures__search input{
    min-height:48px;border:0;border-radius:var(--wz-radius-sm);
    padding:0 18px;background:var(--wz-white);font:inherit;color:var(--wz-ink);outline:none;
  }
  .dx--su-vacatures .dx--su-vacatures__search input::placeholder{color:var(--wz-ink-mute)}
  .dx--su-vacatures .dx--su-vacatures__search button{
    min-height:48px;border:0;border-radius:var(--wz-radius-sm);
    padding:0 28px;background:var(--wz-purple-deep);color:#fff;
    font-family:var(--wz-font-body);font-weight:600;font-size:.95rem;cursor:pointer;white-space:nowrap;
    transition:background .2s ease, transform .2s ease;
  }
  .dx--su-vacatures .dx--su-vacatures__search button:hover{background:var(--wz-purple-dark);transform:translateY(-1px)}

  .dx--su-vacatures .dx--su-vacatures__layout{
    display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;align-items:start;
    max-width:1060px;margin:0 auto;
  }
  .dx--su-vacatures .dx--su-vacatures__filter{
    position:sticky;top:120px;display:flex;flex-direction:column;gap:12px;
    background:var(--wz-white);border-radius:var(--wz-radius-lg);
    padding:24px;box-shadow:var(--wz-shadow-card);
  }
  .dx--su-vacatures .dx--su-vacatures__filter h3{
    font-family:var(--wz-font-display);font-weight:700;font-size:.78rem;letter-spacing:.18em;
    text-transform:uppercase;color:var(--wz-ink-mute);margin-bottom:6px;
  }
  .dx--su-vacatures .dx--su-vacatures__filter label{
    display:flex;align-items:center;gap:10px;color:var(--wz-ink);font-size:.95rem;font-weight:500;cursor:pointer;
  }
  .dx--su-vacatures .dx--su-vacatures__filter input[type="checkbox"]{accent-color:var(--wz-pink);width:16px;height:16px}
  .dx--su-vacatures .dx--su-vacatures__filter .dx--ru-btn{margin-top:8px;justify-content:center}
  .dx--su-vacatures .dx--su-vacatures__list{display:flex;flex-direction:column;gap:16px}
  /* the cards are dx--ru-card--vacancy; tune the link to a pill button per source */
  .dx--su-vacatures .dx--su-vacatures__apply{
    display:inline-flex;align-items:center;gap:8px;width:fit-content;
    padding:11px 20px;border-radius:var(--wz-radius-pill);
    background:var(--wz-pink);color:#fff;font-family:var(--wz-font-body);font-weight:500;font-size:.92rem;
    transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .dx--su-vacatures .dx--su-vacatures__apply:hover{background:var(--wz-pink-hover);transform:translateY(-1px);box-shadow:0 12px 24px -12px rgba(var(--wz-pink-rgb),.7)}
  .dx--su-vacatures .dx--su-vacatures__apply .dx--ru-arrow{display:inline-block;transition:transform .25s ease}
  .dx--su-vacatures .dx--su-vacatures__apply:hover .dx--ru-arrow{transform:translateX(3px)}

  @media (max-width:1080px){
    .dx--su-vacatures .dx--su-vacatures__search{grid-template-columns:1fr}
    .dx--su-vacatures .dx--su-vacatures__layout{grid-template-columns:1fr}
    .dx--su-vacatures .dx--su-vacatures__filter{position:static;top:auto}
  }

  /* ── Contact (was Contact Concept.html @layer pages) ── */
  /* ── Contact-only one-offs (dx--su-*) ────────────────────────────────────
     Everything structural inherits from wijzorgen.css. Only tiny per-page
     parity tweaks live here. */

  /* hero: tighten the lead column on this functional page, then surface the
     contact quick-links as a calm centred rail under the CTAs. */
  .dx--su-contact-hero .dx--ru-hero__lead{max-width:54ch}
  .dx--su-contact-hero .dx--ru-hero__story-inner{max-width:780px}
  .dx--su-contact-quicklinks{
    display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px;
  }
  .dx--su-contact-quicklinks a{
    display:inline-flex;align-items:center;gap:9px;
    font-family:var(--wz-font-body);font-size:.92rem;font-weight:500;color:var(--wz-ink-soft);
    background:var(--wz-paper);border:1px solid var(--wz-line);border-radius:var(--wz-radius-pill);
    padding:9px 16px;transition:border-color .2s, color .2s, background .2s, transform .2s;
  }
  .dx--su-contact-quicklinks a:hover{border-color:var(--wz-pink-mid);color:var(--wz-pink);background:var(--wz-pink-soft);transform:translateY(-1px)}
  .dx--su-contact-quicklinks a i{font-size:13px;color:var(--wz-pink)}

  /* A1 — CV-upload field (sollicitatie form): style the native file input to
     match the cf7 text inputs without overriding the shared component. */
  .dx--su-cf7-file input[type="file"]{
    font-family:var(--wz-font-body);font-size:.95rem;color:var(--wz-ink-soft);
    background:var(--wz-paper);border:1px solid var(--wz-line);border-radius:var(--wz-radius-md);
    padding:11px 14px;width:100%;cursor:pointer;transition:border-color .2s ease, background .2s ease;
  }
  .dx--su-cf7-file input[type="file"]:focus{outline:none;border-color:var(--wz-pink-mid);background:var(--wz-white)}
  .dx--su-cf7-file input[type="file"]::file-selector-button{
    font-family:var(--wz-font-body);font-size:.82rem;font-weight:600;letter-spacing:.02em;
    color:var(--wz-pink);background:var(--wz-pink-soft);border:1px solid var(--wz-pink-mid);
    border-radius:var(--wz-radius-pill);padding:8px 16px;margin-right:14px;cursor:pointer;
    transition:background .2s ease, color .2s ease;
  }
  .dx--su-cf7-file input[type="file"]::file-selector-button:hover{background:var(--wz-pink);color:#fff}

  /* A2 — team-card contact icon buttons (contact-only; over-ons founder cards
     keep their mg-quote text link and are untouched). */
  .dx--su-mg-contacticons{
    display:flex;justify-content:center;gap:10px;margin-top:14px;
  }
  .dx--su-mg-contacticons a{
    width:42px;height:42px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--wz-paper);border:1px solid var(--wz-line);color:var(--wz-ink-soft);
    transition:border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
  }
  .dx--su-mg-contacticons a i{font-size:16px}
  .dx--su-mg-contacticons a:hover{border-color:var(--wz-pink-mid);color:var(--wz-pink);background:var(--wz-pink-soft);transform:translateY(-1px)}

  /* A4 — contact team grid: 3-up on wide (~1.5× wider cards than the prior 4-up;
     shared dx--ru-medewerker-grid default stays 2-up for over-ons/zorgpersoneel
     founders). Collapse 3 → 2 → 1. */
  .dx--su-contact-team .dx--ru-medewerker-grid__grid{grid-template-columns:repeat(3,1fr)}
  @media (max-width:900px){
    .dx--su-contact-team .dx--ru-medewerker-grid__grid{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:520px){
    .dx--su-contact-team .dx--ru-medewerker-grid__grid{grid-template-columns:1fr}
  }

  /* ── Vacatures Helpende (was Vacatures Helpende Concept.html @layer pages) ── */
  /* ── Vacatures Helpende one-offs (dx--su-*) ───────────────────────────────
     Everything visual inherits from wijzorgen.css. This page's sections map to
     shared components: hero--functie, past, bijzonder (wat-doe-je), richtingen
     (kanten-op route cards via dx--ru-card--feature), verschillen--cta
     (welke-werkplek accordion), pgvm, ervaringen, anders, vlist, eind-cta.
     The legacy typeert / fullbleed / quote-strip / fn-card blocks from the
     original concept are not present in this live markup, so no rule is needed
     for them. Only genuine page-deltas live below. */

  /* nav logo: Helpende keeps the original WZ text logomark (the shared topbar
     ships an <img> logo); restore the text-mark styling for parity. */
  .dx--su-topbar-nav .dx--su-topbar-nav__logo{display:inline-flex;align-items:center;gap:10px;color:var(--wz-purple-dark);font-family:var(--wz-font-display);font-weight:700;letter-spacing:-.02em;font-size:1.05rem}
  .dx--su-topbar-nav .dx--su-topbar-nav__logo .dx--su-footer__logomark{width:36px;height:36px;border-radius:10px;background:var(--wz-purple-dark);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.78rem;letter-spacing:.06em}
  .dx--su-topbar-nav .dx--su-topbar-nav__logo .dx--su-footer__logomark span{position:relative;top:-1px}

  /* ervaringen head: approved Helpende uses 46px mb (shared --center = 44px). */
  .dx--ru-ervaringen .dx--ru-section-header--center{margin-bottom:46px}

  /* anders head: approved design keeps the eyebrow's 22px bottom margin
     (shared dx--ru-section-header resets it to 0) — restore for parity. */
  .dx--ru-anders .dx--ru-section-header .dx--ru-eyebrow{margin-bottom:22px}

  /* eind-cta: approved Helpende keeps the original 112px band + its tighter
     editorial left column (shared reconciled p to 28px / actions to 8px from
     the Homepage; this page's approved design uses 14px / 20px). */
  .dx--ru-eind-cta{padding:112px 0}
  .dx--ru-eind-cta .dx--ru-eind-cta__left p{margin-bottom:14px}
  .dx--ru-eind-cta .dx--ru-eind-cta__left-actions{margin-top:20px}

  /* vacancy card + grid: approved Helpende padding (extra left + tighter bottom),
     18px grid gap and .92rem foot arrow (shared dx--ru-card--vacancy reconciled to
     a symmetric 24px 26px / 14px gap / .88rem arrow). Restore for parity. */
  .dx--ru-vlist .dx--ru-card--vacancy{padding:24px 26px 22px 30px}
  .dx--ru-vlist .dx--ru-vlist__grid{gap:30px}
  .dx--ru-vlist .dx--ru-vlist__note{margin-bottom:14px}
  .dx--ru-vlist .dx--ru-card--vacancy .dx--ru-card--vacancy__foot .dx--ru-arrow{font-size:.92rem}

  /* welke-werkplek band: approved Helpende uses the original clamp band
     (128px @1440) rather than the shared 104px u-section rhythm. */
  .dx--ru-verschillen--cta{padding:clamp(80px,9vw,128px) 0}

  /* pgvm columns: approved Helpende keeps the flat-white "past goed" column +
     white→purple-soft "minder goed" column with a hairline purple border. The
     shared dx--ru-pgvm reconciled both cols to a pink/purple tinted gradient with
     tinted borders — restore the original surfaces for parity. */
  .dx--ru-pgvm .dx--ru-pgvm__col{background:#fff;border:1px solid rgba(var(--wz-purple-rgb),.10)}
  .dx--ru-pgvm .dx--ru-pgvm__col.dx--ru-pgvm__col--no{background:linear-gradient(180deg,#fff 0%,rgba(229,225,244,.35) 100%);border-color:rgba(var(--wz-purple-rgb),.10)}

}

/* ─────────────────────────────────────────────────────────────────────────
   NAVIGATION / MEGA-MENU — promoted from "Navigatie Concept.html" (v3).
   Shared across all concepts. Prefixes graduated dx--su-* → dx--ru-*.
   ───────────────────────────────────────────────────────────────────────── */
@layer components {
  /* ── nav items (all share ONE dropdown) ── */
  .dx--su-nav-item{position:static;display:inline-flex}
  .dx--su-nav-trigger{display:inline-flex;align-items:center;gap:7px;font-size:.92rem;color:var(--wz-ink-soft);font-weight:500;padding:6px 0;cursor:pointer;font-family:inherit;position:relative}
  .dx--su-nav-trigger .dx--su-nav-item__caret{font-size:10px;transition:transform .25s ease;opacity:.6}
  /* underline indicator (same language as .dx--su-topbar-nav__links a.is-active) */
  .dx--su-nav-trigger::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--wz-pink);border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform .25s ease}
  .dx--su-nav-item:hover .dx--su-nav-trigger,
  .dx--su-nav-item:focus-within .dx--su-nav-trigger{color:var(--wz-pink)}
  .dx--su-nav-item:hover .dx--su-nav-trigger::after,
  .dx--su-nav-item:focus-within .dx--su-nav-trigger::after{transform:scaleX(1)}
  .dx--su-nav-item:hover .dx--su-nav-trigger .dx--su-nav-item__caret,
  .dx--su-nav-item:focus-within .dx--su-nav-trigger .dx--su-nav-item__caret{transform:rotate(180deg)}

  /* ── the single shared mega-menu panel ── */
  .dx--su-mm-panel{
    position:absolute;left:0;right:0;top:100%;
    background:var(--wz-white);border-bottom:1px solid var(--wz-line);
    box-shadow:0 26px 44px -30px rgba(23,20,19,.22);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
    z-index:40;
  }
  /* opens on hover/focus of ANY nav item, or hover of the panel itself */
  .dx--su-topbar:has(.dx--su-nav-item:hover) .dx--su-mm-panel,
  .dx--su-topbar:has(.dx--su-nav-item:focus-within) .dx--su-mm-panel,
  .dx--su-mm-panel:hover{opacity:1;visibility:visible;transform:translateY(0)}

  /* nav bottom hairline: inset (gutter L/R) by default, expands to full width
     while the mega-menu is open — smooth in/out */
  .dx--su-topbar-nav{position:relative;border-bottom:0}
  .dx--su-topbar-nav::after{content:"";position:absolute;left:var(--wz-inset);right:var(--wz-inset);bottom:0;height:1px;background:var(--wz-line);transition:left .3s ease,right .3s ease}
  .dx--su-topbar:has(.dx--su-nav-item:hover) .dx--su-topbar-nav::after,
  .dx--su-topbar:has(.dx--su-nav-item:focus-within) .dx--su-topbar-nav::after,
  .dx--su-topbar:has(.dx--su-mm-panel:hover) .dx--su-topbar-nav::after{left:0;right:0}

  .dx--su-mm-grid{
    max-width:var(--wz-content-max);margin:0 auto;
    padding:clamp(22px,2.2vw,34px) var(--wz-inset);
    display:grid;grid-template-columns:1.35fr 1fr 1fr 1.3fr;gap:0;align-items:stretch;
  }
  .dx--su-mm-col{padding:0 clamp(22px,2.4vw,40px);border-left:1px solid var(--wz-line-soft)}
  .dx--su-mm-col:first-child{padding-left:0;border-left:0}
  .dx--su-mm-col--werkvelden{padding-right:0;display:flex;flex-direction:column}

  .dx--su-mm-col-title{font-family:var(--wz-font-display);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--wz-pink);margin:0 0 12px;display:flex;align-items:center;gap:9px}
  .dx--su-mm-col-title::before{content:"";width:20px;height:2px;background:var(--wz-pink)}

  /* rich rows (icon + title + desc) — Zij-instroom column */
  .dx--su-mm-rich{display:flex;flex-direction:column;gap:2px}
  .dx--su-mm-rich a{display:grid;grid-template-columns:38px 1fr auto;grid-template-rows:auto auto;column-gap:13px;align-items:center;padding:10px 12px;border-radius:var(--wz-radius-md);transition:background .16s ease}
  .dx--su-mm-rich a:hover{background:var(--wz-pink-soft)}
  .dx--su-mm-rich .dx--su-mm-rich__ic{grid-column:1;grid-row:1/3;width:38px;height:38px;border-radius:50%;background:var(--wz-pink-light);color:var(--wz-pink);display:grid;place-items:center;font-size:15px;transition:background .16s ease,color .16s ease}
  .dx--su-mm-rich a:hover .dx--su-mm-rich__ic{background:var(--wz-pink);color:#fff}
  .dx--su-mm-rich .dx--su-mm-rich__t{grid-column:2;grid-row:1;font-family:var(--wz-font-body);font-weight:600;font-size:.96rem;color:var(--wz-ink);line-height:1.2}
  .dx--su-mm-rich .dx--su-mm-rich__d{grid-column:2;grid-row:2;font-size:.8rem;color:var(--wz-ink-mute);line-height:1.4;margin-top:2px}
  .dx--su-mm-rich .dx--ru-arrow{grid-column:3;grid-row:1/3;align-self:center;color:var(--wz-pink);font-size:.85rem;opacity:0;transform:translateX(-4px);transition:opacity .16s ease,transform .16s ease}
  .dx--su-mm-rich a:hover .dx--ru-arrow{opacity:1;transform:translateX(0)}

  /* simple link rows — functies / regio / werkvelden */
  .dx--su-mm-links{display:flex;flex-direction:column;gap:1px}
  .dx--su-mm-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:var(--wz-radius-sm);font-size:.92rem;color:var(--wz-ink-soft);font-weight:500;transition:background .16s ease,color .16s ease}
  .dx--su-mm-links a:hover{background:var(--wz-pink-soft);color:var(--wz-pink)}
  .dx--su-mm-links a .dx--ru-arrow{color:var(--wz-pink);font-size:.78rem;opacity:0;transform:translateX(-4px);transition:opacity .16s ease,transform .16s ease}
  .dx--su-mm-links a:hover .dx--ru-arrow{opacity:1;transform:translateX(0)}
  .dx--su-mm-links a.is-all{margin-top:6px;color:var(--wz-pink);font-weight:600}
  .dx--su-mm-links a.is-all .dx--ru-arrow{opacity:1;transform:none}

  /* kennismaken card (slim, anchored to the bottom of the werkvelden column so
     the links read as their own group above it) */
  .dx--su-mm-card{margin-top:auto;background:var(--wz-pink-soft);border:1px solid var(--wz-pink-light);border-radius:var(--wz-radius-lg);padding:16px 18px;display:flex;flex-direction:column}
  .dx--su-mm-card .dx--su-mm-card__ic{width:32px;height:32px;border-radius:50%;background:var(--wz-pink);color:#fff;display:grid;place-items:center;font-size:13px;margin-bottom:8px}
  .dx--su-mm-card .dx--su-mm-card__ey{font-family:var(--wz-font-display);font-weight:700;font-size:1rem;color:var(--wz-ink);margin:0 0 4px}
  .dx--su-mm-card p{font-size:.82rem;color:var(--wz-ink-soft);line-height:1.45;margin:0 0 12px}
  .dx--su-mm-card .dx--ru-btn{align-self:flex-start}
  /* werkvelden column: links grouped at top, card pushed to bottom */
  .dx--su-mm-col--werkvelden .dx--su-mm-links{margin-bottom:8px}

  /* ── mobile menu (overlay + drill-down) ── */
  .dx--su-nav-burger{display:none;width:42px;height:42px;border:0;background:none;color:var(--wz-ink);font-size:20px;cursor:pointer;align-items:center;justify-content:center}
  /* dimmed backdrop — the strip of page left uncovered makes it read as an overlay */
  .dx--su-mm-scrim{position:fixed;inset:0;z-index:59;background:rgba(23,20,19,.45);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
  .dx--su-mm-scrim.is-open{opacity:1;visibility:visible}
  .dx--su-mm-mobile{
    position:fixed;inset:0 0 0 auto;width:min(440px,calc(100% - 52px));z-index:60;background:var(--wz-white);
    box-shadow:-24px 0 48px -24px rgba(23,20,19,.3);
    display:flex;flex-direction:column;transform:translateX(100%);
    transition:transform .3s ease;visibility:hidden;
  }
  .dx--su-mm-mobile.is-open{transform:translateX(0);visibility:visible}
  .dx--su-mm-mobile .dx--su-mm-mobile__top{display:flex;align-items:center;justify-content:space-between;padding:16px var(--wz-inset);border-bottom:1px solid var(--wz-line)}
  .dx--su-mm-mobile .dx--su-mm-mobile__top img{height:32px}
  .dx--su-mm-mobile .dx--su-mm-mobile__actions{display:flex;align-items:center;gap:6px}
  .dx--su-mm-mobile .dx--su-mm-mobile__iconbtn{width:42px;height:42px;border:0;background:none;color:var(--wz-ink);font-size:18px;display:grid;place-items:center;cursor:pointer}
  .dx--su-mm-mobile .dx--su-mm-mobile__viewport{position:relative;flex:1;overflow:hidden}
  .dx--su-mm-mobile .dx--su-mm-mobile__panel{position:absolute;inset:0;overflow-y:auto;padding:14px var(--wz-inset) 28px;transition:transform .3s ease;background:var(--wz-white)}
  .dx--su-mm-mobile .dx--su-mm-mobile__sub{transform:translateX(100%)}
  .dx--su-mm-mobile .dx--su-mm-mobile__sub.is-active{transform:translateX(0)}
  .dx--su-mm-mobile .dx--su-mm-mobile__row{display:grid;grid-template-columns:42px 1fr auto;grid-template-rows:auto auto;column-gap:14px;align-items:center;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--wz-line);padding:15px 4px;cursor:pointer;font-family:inherit}
  .dx--su-mm-mobile .dx--su-mm-mobile__row .dx--su-mm-rich__ic{grid-column:1;grid-row:1/3;width:42px;height:42px;border-radius:50%;background:var(--wz-pink-light);color:var(--wz-pink);display:grid;place-items:center;font-size:17px}
  .dx--su-mm-mobile .dx--su-mm-mobile__row .dx--su-mm-rich__t{grid-column:2;grid-row:1;font-family:var(--wz-font-body);font-weight:600;color:var(--wz-ink);font-size:1.02rem}
  .dx--su-mm-mobile .dx--su-mm-mobile__row .dx--su-mm-rich__d{grid-column:2;grid-row:2;font-size:.82rem;color:var(--wz-ink-mute)}
  .dx--su-mm-mobile .dx--su-mm-mobile__row .dx--ru-arrow{grid-column:3;grid-row:1/3;align-self:center;color:var(--wz-pink)}
  .dx--su-mm-mobile .dx--su-mm-mobile__link{display:flex;align-items:center;justify-content:space-between;width:100%;border-bottom:1px solid var(--wz-line);padding:18px 4px;font-family:var(--wz-font-body);font-weight:600;color:var(--wz-ink);font-size:1.02rem}
  .dx--su-mm-mobile .dx--su-mm-mobile__link i{color:var(--wz-pink);font-size:.9rem}
  .dx--su-mm-mobile .dx--su-mm-mobile__back{display:inline-flex;align-items:center;gap:10px;background:none;border:0;color:var(--wz-ink-soft);font-weight:600;font-family:inherit;font-size:.95rem;padding:8px 0 14px;cursor:pointer}
  .dx--su-mm-mobile .dx--su-mm-mobile__back i{color:var(--wz-pink)}
  .dx--su-mm-mobile .dx--su-mm-mobile__subtitle{font-family:var(--wz-font-display);font-size:1.3rem;letter-spacing:-.02em;margin:0 0 14px}
  .dx--su-mm-mobile .dx--su-mm-mobile__card{background:var(--wz-pink-soft);border:1px solid var(--wz-pink-light);border-radius:var(--wz-radius-lg);padding:20px;margin:18px 0}
  .dx--su-mm-mobile .dx--su-mm-mobile__card strong{display:block;font-family:var(--wz-font-display);margin-bottom:6px}
  .dx--su-mm-mobile .dx--su-mm-mobile__card p{font-size:.86rem;color:var(--wz-ink-soft);line-height:1.5;margin:0 0 14px}
  .dx--su-mm-mobile .dx--su-mm-mobile__contact{display:flex;flex-direction:column;gap:4px;margin-top:10px}
  .dx--su-mm-mobile .dx--su-mm-mobile__contact a{display:flex;align-items:center;gap:12px;padding:10px 0;color:var(--wz-ink-soft);font-weight:500}
  .dx--su-mm-mobile .dx--su-mm-mobile__contact a i{color:var(--wz-pink);width:20px;text-align:center}
  .dx--su-mm-mobile .dx--su-mm-mobile__all{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:16px;border-radius:var(--wz-radius-md);background:var(--wz-pink-soft);color:var(--wz-pink);font-weight:600}

  @media (max-width:1080px){
    .dx--su-nav-item{display:none}
    .dx--su-nav-burger{display:inline-flex}
    .dx--su-topbar-util{display:none}
  }
  @media (min-width:1081px){
    .dx--su-mm-mobile,.dx--su-mm-scrim{display:none}
  }
  /* stack the directory earlier on smaller desktops to avoid cramping */
  @media (max-width:1280px) and (min-width:1081px){
    .dx--su-mm-grid{grid-template-columns:1.4fr 1fr 1.2fr}
    .dx--su-mm-col--regio{display:none}
  }
}


@layer components {
  /* ── dx--ru-stappen — vertical numbered step accordion (reusable) ───────────
     Centered section-header + full-width single-column list of collapsible
     numbered steps. Built 2026-05-26 (traineeship traject; reusable elsewhere). */
  .dx--ru-stappen .dx--ru-stappen__list{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
  .dx--ru-stappen .dx--ru-stappen__item{background:var(--wz-white);border:1px solid var(--wz-line-strong);border-radius:var(--wz-radius-lg);transition:box-shadow .18s ease,border-color .18s ease}
  .dx--ru-stappen .dx--ru-stappen__item:hover{box-shadow:var(--wz-shadow-card);border-color:transparent}
  .dx--ru-stappen .dx--ru-stappen__row{display:flex;align-items:center;gap:clamp(16px,2vw,26px);width:100%;background:none;border:0;padding:20px clamp(20px,2.4vw,30px);cursor:pointer;font-family:inherit;text-align:left}
  .dx--ru-stappen .dx--ru-stappen__badge{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--wz-pink);color:var(--wz-pink);display:grid;place-items:center;font-family:var(--wz-font-display);font-weight:700;font-size:.92rem}
  .dx--ru-stappen .dx--ru-stappen__main{display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
  .dx--ru-stappen .dx--ru-stappen__tag{font-family:var(--wz-font-display);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--wz-pink)}
  .dx--ru-stappen .dx--ru-stappen__title{font-family:var(--wz-font-body);font-weight:700;font-size:clamp(1.05rem,1.6vw,1.2rem);letter-spacing:-.01em;color:var(--wz-ink);line-height:1.2}
  .dx--ru-stappen .dx--ru-stappen__toggle{flex:none;width:22px;height:22px;position:relative}
  .dx--ru-stappen .dx--ru-stappen__toggle::before,.dx--ru-stappen .dx--ru-stappen__toggle::after{content:"";position:absolute;background:var(--wz-pink);border-radius:2px;transition:transform .22s ease}
  .dx--ru-stappen .dx--ru-stappen__toggle::before{top:10px;left:0;right:0;height:2px}
  .dx--ru-stappen .dx--ru-stappen__toggle::after{left:10px;top:0;bottom:0;width:2px}
  .dx--ru-stappen .dx--ru-stappen__item.is-open .dx--ru-stappen__toggle::after{transform:scaleY(0)}
  .dx--ru-stappen .dx--ru-stappen__detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s ease}
  .dx--ru-stappen .dx--ru-stappen__item.is-open .dx--ru-stappen__detail{grid-template-rows:1fr}
  .dx--ru-stappen .dx--ru-stappen__detail-inner{overflow:hidden}
  .dx--ru-stappen .dx--ru-stappen__detail p{margin:0;padding:0 clamp(20px,2.4vw,30px) 24px calc(46px + clamp(16px,2vw,26px) + clamp(20px,2.4vw,30px));color:var(--wz-ink-soft);line-height:1.7}
  @media (max-width:640px){
    .dx--ru-stappen .dx--ru-stappen__detail p{padding-left:clamp(20px,2.4vw,30px)}
  }
}


/* ── Homepage (was Homepage Concept.html) ── */
@layer pages {
  /* ── Homepage-only one-offs (dx--su-*) ───────────────────────────────
     Everything else inherits from wijzorgen.css. These are the grids +
     section tuning that have no shared component in the consolidated file. */

  /* doelgroep — 2 primary persona cards (werkgever moves to slim strip) */
  .dx--su-doelgroep-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}

  /* werkveld — homepage 4-col card grid + centered foot
     (the shared werkveld-grid lives under .dx--ru-functies; homepage isn't that wrapper) */
  .dx--su-werkveld-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  .dx--su-werkveld-foot{margin-top:40px;display:flex;justify-content:center}

  /* head-spacing parity: the shared dx--ru-section-header standardised gaps/margins;
     the approved Homepage uses these exact (slightly different) values per section. */
  #doelgroep .dx--ru-section-header{gap:14px}          /* was 18px in shared base */
  /* anders + vacatures heads never reset the eyebrow's 22px margin in the approved
     Homepage (only doelgroep/werkveld/traject/ervaringen did) — restore that gap. */
  .dx--ru-anders .dx--ru-section-header .dx--ru-eyebrow,
  .dx--ru-vlist  .dx--ru-section-header .dx--ru-eyebrow{margin-bottom:22px}
  .dx--ru-traject .dx--ru-section-header--center{margin-bottom:56px}  /* shared --center = 44px */
  .dx--ru-ervaringen .dx--ru-section-header--center{margin-bottom:46px} /* shared --center = 44px */

  /* section-padding parity: shared utilities normalised the rhythm; the approved
     Homepage keeps traject's asymmetric tail + eind-cta's 112px. */
  .dx--ru-traject{padding-bottom:128px}   /* u-section--spacious = 120/120 */
  .dx--ru-eind-cta{padding:112px 0}        /* u-section = 104/104 */

  @media (max-width:1080px){
    .dx--su-doelgroep-grid{grid-template-columns:1fr 1fr}
    .dx--su-werkveld-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:640px){
    .dx--su-doelgroep-grid{grid-template-columns:1fr}
    .dx--su-werkveld-grid{grid-template-columns:1fr;gap:30px}
  }
}


/* ── Werkveld Gehandicaptenzorg (was Werkveld Gehandicaptenzorg Concept.html) ── */
@layer pages {
  /* ── Werkveld Gehandicaptenzorg one-offs (dx--su-*) ───────────────────────
     Everything visual inherits from wijzorgen.css. This page's sections all map
     to shared components (hero--werkveld, past, bijzonder, verschillen, pgvm,
     ervaringen, functies, twijfel, anders, vlist, eind-cta). No section needs a
     page-unique rule: the legacy typeert / fullbleed / quote-strip blocks from
     the original concept are not present in this live markup, and the verschillen
     vs-gesprek sticky card, hero badge, and per-werkveld tints all already live
     in the shared file. Layer kept for parity with the other concepts. */

  /* anders head: approved design keeps the eyebrow's 22px bottom margin
     (shared dx--ru-section-header resets it to 0) — restore for parity. */
  .dx--ru-anders .dx--ru-section-header .dx--ru-eyebrow{margin-bottom:22px}

  /* eind-cta: approved Werkveld keeps the original 112px band + its tighter
     editorial left column (shared reconciled p to 28px / actions to 8px from
     the Homepage; this page's approved design uses 14px / 20px). */
  .dx--ru-eind-cta{padding:112px 0}
  .dx--ru-eind-cta .dx--ru-eind-cta__left p{margin-bottom:14px}
  .dx--ru-eind-cta .dx--ru-eind-cta__left-actions{margin-top:20px}

  /* ervaringen head: approved Werkveld uses 46px mb (shared --center = 44px). */
  .dx--ru-ervaringen .dx--ru-section-header--center{margin-bottom:46px}

  /* vacancy card: approved Werkveld padding (extra left + tighter bottom) — the
     shared dx--ru-card--vacancy reconciled to a symmetric 24px 26px, which lets
     the sfeer line wrap to 3 lines instead of the approved 4. Restore for parity.
     (Radius staying at the shared 22px is an accepted token consolidation.) */
  .dx--ru-card--vacancy{padding:24px 26px 22px 30px}
  /* vac-grid gap: approved Werkveld 18px (shared dx--ru-vlist reconciled to 14px).
     The wider gap narrows each card just enough to keep the sfeer at 4 lines. */
  .dx--ru-vlist .dx--ru-vlist__grid{gap:30px}
  /* vlist-note: approved Werkveld 14px mb (shared dx--ru-vlist = 18px). */
  .dx--ru-vlist .dx--ru-vlist__note{margin-bottom:14px}
  /* vac-foot arrow: approved Werkveld .92rem (shared reconciled to .88rem) —
     restores the foot's 1px taller baseline so the card matches exactly. */
  .dx--ru-card--vacancy .dx--ru-card--vacancy__foot .dx--ru-arrow{font-size:.92rem}
}


/* ── Regio Single (was Regio Single Concept.html) ── */
@layer pages {
  /* ── Regio one-offs (dx--su-*) ────────────────────────────────────────────
     Two page-local rules: the SEO body prose (verbatim H2 sections) and the
     WPJM Search & Filter listing placeholder. Everything else is shared. */
  .dx--su-regio-body{max-width:var(--wz-content-narrow,860px);margin:0 auto}
  .dx--su-regio-body .rb-block + .rb-block{margin-top:40px}
  .dx--su-regio-body h2{
    font-family:var(--wz-font-display);font-weight:700;font-size:clamp(1.4rem,2.4vw,1.9rem);
    letter-spacing:-.02em;line-height:1.14;color:var(--wz-ink);margin-bottom:14px;
  }
  .dx--su-regio-body p{color:var(--wz-ink-soft);font-size:1.05rem;line-height:1.75}

  /* WPJM Search & Filter listing placeholder + loopbaanadvies note */
  .dx--su-regio-listing{max-width:var(--wz-content-max);margin:0 auto}
  .dx--su-regio-listing .dx--su-regio-listing__filterbar{
    display:flex;flex-wrap:wrap;gap:12px;align-items:center;
    background:var(--wz-white);border:1px solid var(--wz-line);border-radius:var(--wz-radius-md);
    padding:14px 18px;margin-bottom:22px;
  }
  .dx--su-regio-listing .dx--su-regio-listing__filterbar .dx--su-regio-listing__chip{
    font-size:.9rem;color:var(--wz-ink-soft);background:var(--wz-paper);
    border:1px solid var(--wz-line);border-radius:var(--wz-radius-pill);padding:8px 16px;
  }
  .dx--su-regio-listing .dx--su-regio-listing__filterbar .dx--su-regio-listing__filterbtn{margin-left:auto;color:var(--wz-pink);font-weight:600;font-size:.9rem}
  .dx--su-regio-listing .dx--su-regio-listing__placeholder{
    border:1px dashed var(--wz-line);border-radius:var(--wz-radius-lg);background:var(--wz-paper);
    padding:clamp(40px,6vw,72px) 24px;text-align:center;color:var(--wz-ink-mute);
  }
  .dx--su-regio-listing .dx--su-regio-listing__placeholder i{font-size:1.6rem;color:var(--wz-pink-mid);margin-bottom:12px;display:block}
  .dx--su-regio-listing .dx--su-regio-listing__placeholder .dx--su-regio-listing__ph-title{font-family:var(--wz-font-display);font-weight:700;color:var(--wz-ink-soft);font-size:1.05rem;margin-bottom:6px}
  .dx--su-regio-listing .dx--su-regio-listing__placeholder code{font-family:ui-monospace,monospace;font-size:.85em;background:var(--wz-white);padding:1px 6px;border-radius:4px;border:1px solid var(--wz-line)}
  .dx--su-regio-listing .dx--su-regio-listing__loopbaan{
    margin-top:24px;background:var(--wz-purple-soft);border-radius:var(--wz-radius-lg);
    padding:24px clamp(22px,3vw,36px);display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;
  }
  .dx--su-regio-listing .dx--su-regio-listing__loopbaan p{color:var(--wz-purple-deep);font-size:1rem;line-height:1.6;max-width:62ch;margin:0}
  .dx--su-regio-listing .dx--su-regio-listing__loopbaan p strong{font-weight:700}
}


/* ── Vacancy by Experience (was Vacancy by Experience Concept.html) ── */
@layer pages {
  /* ── Vacancy-by-experience one-offs (dx--su-*) ────────────────────────────
     WPJM S&F listing placeholder + loopbaanadvies note. SAME visual contract as
     the regio-single dx--su-regio-listing — candidate for promotion to a shared
     dx--ru-vacancy-listing on next reuse. */
  .dx--su-vbe-listing{max-width:var(--wz-content-max);margin:0 auto}
  .dx--su-vbe-listing .dx--su-regio-listing__filterbar{
    display:flex;flex-wrap:wrap;gap:12px;align-items:center;
    background:var(--wz-white);border:1px solid var(--wz-line);border-radius:var(--wz-radius-md);
    padding:14px 18px;margin-bottom:22px;
  }
  .dx--su-vbe-listing .dx--su-regio-listing__chip{font-size:.9rem;color:var(--wz-ink-soft);background:var(--wz-paper);border:1px solid var(--wz-line);border-radius:var(--wz-radius-pill);padding:8px 16px}
  .dx--su-vbe-listing .dx--su-regio-listing__filterbtn{margin-left:auto;color:var(--wz-pink);font-weight:600;font-size:.9rem}
  .dx--su-vbe-listing .dx--su-regio-listing__placeholder{
    border:1px dashed var(--wz-line);border-radius:var(--wz-radius-lg);background:var(--wz-paper);
    padding:clamp(40px,6vw,72px) 24px;text-align:center;color:var(--wz-ink-mute);
  }
  .dx--su-vbe-listing .dx--su-regio-listing__placeholder i{font-size:1.6rem;color:var(--wz-pink-mid);margin-bottom:12px;display:block}
  .dx--su-vbe-listing .dx--su-regio-listing__placeholder .dx--su-regio-listing__ph-title{font-family:var(--wz-font-display);font-weight:700;color:var(--wz-ink-soft);font-size:1.05rem;margin-bottom:6px}
  .dx--su-vbe-listing .dx--su-regio-listing__placeholder code{font-family:ui-monospace,monospace;font-size:.85em;background:var(--wz-white);padding:1px 6px;border-radius:4px;border:1px solid var(--wz-line)}
  .dx--su-vbe-listing .dx--su-regio-listing__loopbaan{
    margin-top:24px;background:var(--wz-purple-soft);border-radius:var(--wz-radius-lg);
    padding:24px clamp(22px,3vw,36px);display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;
  }
  .dx--su-vbe-listing .dx--su-regio-listing__loopbaan p{color:var(--wz-purple-deep);font-size:1rem;line-height:1.6;max-width:62ch;margin:0}
  .dx--su-vbe-listing .dx--su-regio-listing__loopbaan p strong{font-weight:700}

  /* variant annotation (4 vac-by-exp pages share this template) */
  .dx--su-vbe-variants{
    max-width:var(--wz-content-narrow,860px);margin:28px auto 0;padding:16px 20px;
    background:var(--wz-paper-warm);border:1px dashed var(--wz-line);border-left:3px solid var(--wz-pink-mid);
    border-radius:var(--wz-radius-sm);font-size:.86rem;line-height:1.6;color:var(--wz-ink-soft);
  }
  .dx--su-vbe-variants strong{color:var(--wz-pink);font-weight:700}
  .dx--su-vbe-variants code{font-family:ui-monospace,monospace;font-size:.82em;background:var(--wz-white);padding:1px 5px;border-radius:4px;border:1px solid var(--wz-line)}
}


/* ── Traineeship (was Traineeship Concept.html) ── */
@layer pages {
  /* eind-cta sits on a WHITE section here (section above is paper/paper-warm);
     contact-card flips to paper for contrast. */
  #kennismaking .dx--ru-contact-card{background:var(--wz-paper)}

  /* dx--su-tr-traject — tweaks over reused dx--ru-traject (the canonical roadmap) for 10 steps */
  .dx--su-tr-traject .dx--ru-section-header{max-width:760px;margin:0 auto clamp(48px,5vw,76px)}
  .dx--su-tr-traject .dx--ru-section-header h2 em{color:var(--wz-pink);font-style:normal}
  .dx--su-tr-traject .dx--ru-traject__title{text-transform:none}
  .dx--su-tr-traject-actions{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:clamp(44px,4vw,72px)}
  .dx--su-tr-traject-actions .dx--su-tr-traject-actions__missie{font-family:var(--wz-font-display);font-style:italic;color:var(--wz-purple);font-size:1.05rem}
  @media (max-width:1280px){
    .dx--su-tr-traject .dx--ru-traject__bar{overflow-x:auto;grid-template-columns:repeat(10,minmax(150px,1fr));padding-bottom:14px}
    .dx--su-tr-traject .dx--ru-traject__bar::before{left:75px;right:75px}
  }
  @media (max-width:760px){
    .dx--su-tr-traject .dx--ru-traject__bar{overflow:visible;grid-template-columns:1fr}
  }
  .dx--su-tr-info .meer-intro{max-width:62ch;margin:0 auto clamp(36px,4vw,52px);text-align:center;font-style:italic;color:var(--wz-ink-soft);font-size:1.06rem;line-height:1.75}
  .dx--su-tr-info .dx--ru-faq__a ul{margin:0}
}


/* ── Form Aanmelden (was Form Aanmelden Concept.html) ── */
@layer pages {
  /* ── dx--su-aanmelden-hero — form-in-hero split (intro/bullets left · form right) ── */
  .dx--su-aanmelden-hero{padding:clamp(80px,1vh,186px) var(--wz-inset) clamp(60px,7vw,96px)}
  .dx--su-aanmelden-hero .dx--ru-cf7__aside h1{font-family:var(--wz-font-display);font-weight:700;font-size:clamp(2.1rem,3.6vw,3rem);letter-spacing:-.03em;line-height:1.05;margin:6px 0 18px;max-width:18ch}
  .dx--su-aanmelden-hero .dx--ru-cf7__aside h1 em{color:var(--wz-pink);font-style:normal}
  .dx--su-aanmelden-usps{list-style:none;display:flex;flex-direction:column;gap:13px;margin:24px 0 0}
  .dx--su-aanmelden-usps li{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;color:var(--wz-ink-soft);font-size:1rem;line-height:1.5}
  .dx--su-aanmelden-usps i{color:var(--wz-pink);margin-top:3px;font-size:1.05rem}

  /* CV-upload field (reused from /contact) */
  .dx--su-cf7-file input[type="file"]{width:100%;font:inherit;color:var(--wz-ink-soft);font-size:.92rem;padding:10px 0;cursor:pointer}
  .dx--su-cf7-file input[type="file"]::file-selector-button{font:inherit;font-weight:600;font-size:.86rem;cursor:pointer;margin-right:14px;padding:10px 16px;border:1px solid var(--wz-line);border-radius:var(--wz-radius-pill);background:var(--wz-paper);color:var(--wz-ink);transition:border-color .2s ease, color .2s ease}
  .dx--su-cf7-file input[type="file"]::file-selector-button:hover{border-color:var(--wz-pink);color:var(--wz-pink)}
  .dx--su-cf7-file .dx--su-cf7-file__file-hint{display:block;margin-top:6px;font-size:.82rem;color:var(--wz-ink-mute)}

  /* slim variant-annotation strip (not shipped) */
  .dx--su-aanmelden-variants{max-width:var(--wz-content-narrow);margin:clamp(32px,4vw,52px) auto 0;border:1px dashed var(--wz-line);border-radius:var(--wz-radius-md);background:var(--wz-white);padding:18px 22px}
  .dx--su-aanmelden-variants p{margin:0;color:var(--wz-ink-mute);font-size:.86rem;line-height:1.6}
  .dx--su-aanmelden-variants strong{color:var(--wz-ink)}
}


/* ── Zij-instroom (was Zij-instroom Concept.html) ── */
@layer pages {
  /* ── Zij-instroom one-offs (dx--su-*) ─────────────────────────────────────
     This is an SEO-LOCKED design refresh: copy is verbatim from the live page,
     only the rendering moves onto wijzorgen.css. Every section maps to a shared
     component (hero--gcsp, werkgevers --four, faq, eind-cta + contact-card).
     The only page-unique rule is the "Meer informatie" intro lead above the
     accordion — no shared component carries a centred eyebrow+h2+lead at the
     top of a FAQ block, so it lives here. */
  /* left-aligned to match the left-aligned accordion below (same max-width, same left edge) */
  .dx--su-faq-head{max-width:var(--wz-content-narrow,860px);margin:0 auto 36px}
  .dx--su-faq-head h2{font-size:clamp(2.1rem,3.6vw,3rem);letter-spacing:-.03em;line-height:1.04;margin-bottom:14px}
  .dx--su-faq-head .faq-sub{color:var(--wz-ink-soft);font-size:1rem;line-height:1.65;max-width:60ch;margin:0}

  @media (max-width:640px){
    .dx--su-faq-head{margin-bottom:32px}
  }
}


/* ── Werken Bij (was Werken Bij Concept.html) ── */
@layer pages {
  /* ── dx--su-wb-listing — internal-vacancy listing placeholder (WPJM-driven live) ── */
  .dx--su-wb-listing .dx--su-wb-listing__intro{max-width:62ch;margin:0 0 clamp(28px,3vw,40px)}
  .dx--su-wb-listing .dx--su-wb-listing__intro p{color:var(--wz-ink-soft);font-size:1.04rem;line-height:1.7;margin-bottom:14px}
  .dx--su-wb-listing .dx--su-wb-listing__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .dx--su-wb-listing .dx--su-wb-listing__placeholder{
    grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
    padding:clamp(40px,6vw,72px) var(--wz-inset);border:1.5px dashed var(--wz-line);border-radius:var(--wz-radius-lg);
    background:var(--wz-white);color:var(--wz-ink-mute);
  }
  .dx--su-wb-listing .dx--su-wb-listing__placeholder i{font-size:26px;color:var(--wz-pink)}
  .dx--su-wb-listing .dx--su-wb-listing__placeholder strong{font-family:var(--wz-font-display);color:var(--wz-ink);font-size:1.1rem}
  @media (max-width:760px){ .dx--su-wb-listing .dx--su-wb-listing__grid{grid-template-columns:1fr} }
}


/* ── Over Ons (was Over Ons Concept.html) ── */
@layer pages {
  /* ── Over-ons-only one-offs (dx--su-*) ───────────────────────────────────
     Everything structural inherits from wijzorgen.css. Only tiny per-page
     parity tweaks live here. */

  /* hero: this is an editorial Over-ons page — restore the eyebrow margin the
     story hero zeroes, and tighten the lead width for a calmer reading column. */
  .dx--su-overons-hero .dx--ru-hero__lead{max-width:58ch}
}


/* ── Vacatures Overzicht (was Vacatures Overzicht Concept.html) ── */
@layer pages {
  /* ── Vacatures overzicht one-offs (dx--su-*) ─────────────────────────────────
     Everything visual inherits from wijzorgen.css. All sections map to shared
     components: hero--overview, vfilters, keuzehulp, vlist, niet-online,
     functies (werkveld-grid reuse), functieroutes, anders, eind-cta — all newly
     added to or already present in the shared file. No page-unique rule is
     required; layer kept for parity with the other concepts. */
}


/* ── Studenten (was Studenten Concept.html) ── */
@layer pages {
  /* ── Studenten one-offs (dx--su-*) ────────────────────────────────────────
     Almost entirely reuse. The only page-local rule centres the "Nu solliciteren"
     CTA under the traject procesbalk (no shared component carries a centred CTA
     below the bar). */
  .dx--su-stud-traject-cta{display:flex;justify-content:center;margin-top:clamp(40px,5vw,64px)}
}


/* ── Ervaringen Overzicht (was Ervaringen Overzicht Concept.html) ── */
@layer pages {
  /* ── Ervaringen overzicht one-offs (dx--su-*) ─────────────────────────────────
     Everything visual inherits from wijzorgen.css. Sections map to shared components:
     hero--overview/--story, ervaring-uitgelicht, ervaring-filter, ervaringen (erv-card),
     tussenblok, anders, eind-cta + contact-card — all in the shared file. No page-unique
     rule is required; layer kept for parity with the other concepts. */
}


/* ── AI-recruiter Fenna (was AI-recruiter Fenna Concept.html) ── */
@layer pages {
  /* ── Fenna one-offs (dx--su-*) ────────────────────────────────────────────
     (1) the 4-step traject column-count, (2) the wel/niet capability grid. */
  .dx--su-fenna-steps{--wz-stap-cols:4}
  /* "Wie is Fenna?" intro: narrow, centered reading column */
  .dx--su-fenna-intro .o-container{max-width:var(--wz-content-narrow);margin-inline:auto}
}


/* ── 404 (was 404 Concept.html) ── */
@layer pages {
  /* inline links inside the 404 lead — pink + underline so they read as links */
  .dx--su-404 .dx--ru-bevestiging__lead a{color:var(--wz-pink);text-decoration:underline;text-underline-offset:3px;font-weight:500}
  .dx--su-404 .dx--ru-bevestiging__lead a:hover{color:var(--wz-pink-dark)}
}

/* ─────────────────────────────────────────────────────────────
   Header MEGA-MENU — full-width 4-column panel (WIJ.ZORGEN)
   Impreza marks columns-megas with .has_cols; we widen the panel to
   the full fixed header and lay out the 4 columns (L2 = headers, L3 = links).
   ───────────────────────────────────────────────────────────── */
.l-header .w-nav-item.has_cols.level_1{position:static}
.l-header .w-nav-item.has_cols.level_1 > .w-nav-list.level_2{
  position:absolute;top:100%;left:0;right:0;width:100%;
  display:flex;flex-wrap:nowrap;align-items:flex-start;
  gap:clamp(20px,3vw,56px);
  /* no horizontal padding — the grid self-insets (--wz-inset) so the panel lines up
     with the header content edge; full-bleed white still spans the viewport. */
  padding:35px 0;
  background:#fff;border-top:1px solid rgba(46,34,89,.10);
  box-shadow:0 28px 50px -14px rgba(46,34,89,.22);
}
.l-header .w-nav-item.has_cols.level_1 > .w-nav-list.level_2 > .w-nav-item{
  flex:1 1 0;min-width:0;margin:0;border:0;
}
/* column header (L2) — a non-clickable label */
.l-header .w-nav-item.has_cols.level_1 > .w-nav-list.level_2 > .w-nav-item > .w-nav-anchor{
  display:block;pointer-events:none;
  font-family:var(--wz-font-display);font-weight:700;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--wz-pink);padding:0 0 12px;margin-bottom:6px;border-bottom:1px solid rgba(46,34,89,.10);
}
.l-header .w-nav-item.has_cols.level_1 > .w-nav-list.level_2 > .w-nav-item > .w-nav-anchor .w-nav-arrow{display:none}
/* L3 link list — always visible inside its column */
.l-header .w-nav-item.has_cols.level_1 .w-nav-list.level_3{
  position:static;display:block;width:auto;min-width:0;padding:0;margin:0;background:none;box-shadow:none;transform:none;opacity:1;visibility:visible;
}
.l-header .w-nav-item.has_cols.level_1 .w-nav-list.level_3 > .w-nav-item{margin:0;border:0}
.l-header .w-nav-item.has_cols.level_1 .w-nav-list.level_3 .w-nav-anchor{
  padding:7px 0;color:var(--wz-purple-deep);font-size:.95rem;font-weight:500;line-height:1.3;
}
.l-header .w-nav-item.has_cols.level_1 .w-nav-list.level_3 .w-nav-anchor:hover{color:var(--wz-pink)}

/* ============================================================================
   UNLAYERED OVERRIDES (2026-05-31 · design-verification batch 1)
   ROOT CAUSE: our dx--* system is wrapped in @layer (components/objects/…), but
   Impreza's theme CSS is UNLAYERED — and unlayered CSS beats ALL layers regardless
   of specificity. So Impreza's a / .w-btn / h* / .l-section rules were winning
   every conflict (buttons rendered as plain links, headings recoloured, the zpg
   hero forced to flex, etc.). These UNLAYERED re-assertions (higher specificity
   than Impreza's element/single-class rules, later in source) restore the design.
   No !important — pure cascade. Add new cross-page overrides here.
   ============================================================================ */
/* S1 — primary / on-purple buttons rendered transparent (Impreza link/.w-btn won) */
.dx--ru-btn{text-decoration:none}
.dx--ru-btn.dx--ru-btn--primary{background:var(--wz-pink);color:#fff;box-shadow:0 8px 20px -10px rgba(var(--wz-pink-rgb),.6)}
.dx--ru-btn.dx--ru-btn--primary:hover{background:#e0608e;color:#fff}
.dx--ru-btn.dx--ru-btn--on-purple{background:var(--wz-pink);color:#fff}
.dx--ru-btn.dx--ru-btn--on-purple:hover{background:#e0608e;color:#fff}
.dx--ru-btn.dx--ru-btn--outline{background:transparent;color:var(--wz-ink);border-color:rgba(23,20,19,.15)}
.dx--ru-btn.dx--ru-btn--outline:hover{border-color:var(--wz-ink);color:var(--wz-ink)}
.dx--ru-btn.dx--ru-btn--ghost{background:transparent;color:var(--wz-ink)}
.dx--ru-btn.dx--ru-btn--ghost:hover{color:var(--wz-pink)}
.dx--ru-btn.dx--ru-btn--on-purple-outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
/* S4 — heading accent (em / .dx--ru-accent) pink+italic was rendering plain */
.dx--ru-section-header h2 em,.dx--ru-section-header h2 .dx--ru-accent,h2 .dx--ru-accent{color:var(--wz-pink);font-style:italic}
.dx--ru-section-header h2 em.dx--ru-section-header__em--purple,.dx--ru-section-header h2 .dx--ru-accent.dx--ru-section-header__em--purple{color:var(--wz-purple)}
.dx--ru-section-header .dx--ru-section-header__intro em,.dx--ru-section-header .dx--ru-section-header__intro .dx--ru-accent{color:var(--wz-purple);font-style:italic}
/* Ervaringen tussenblok — H2 on the purple-deep surface was near-black (invisible) */
.dx--ru-tussenblok h2,.dx--ru-tussenblok .dx--ru-tussenblok__inner h2{color:#fff}
/* Contact-card values were inheriting Impreza's link-pink instead of dark ink */
.dx--ru-contact-card .dx--ru-contact-card__value{color:var(--wz-ink)}
/* Zorgpersoneel hero — Impreza .l-section flex collapsed the visual + form column; keep grid */
.dx--su-zpg-hero{display:grid}
/* Werkveld/functie card h3 — Impreza's unlayered h3 default (~33px) was overriding the small card title */
.dx--ru-card--werkveld .dx--ru-card--werkveld__body h3{font-size:1.15rem;line-height:1.18;letter-spacing:-.01em;margin-bottom:8px;color:var(--color-alt-content-heading)}
.dx--ru-card--functie h3,.dx--ru-card--feature h3{font-size:1.15rem;line-height:1.18;padding-top:0}
/* Hero H1 pink accent — re-assert above Impreza's h1 colour */
.dx--ru-hero h1 .dx--ru-accent{color:var(--wz-pink)}
/* Hero H1 size — Impreza's unlayered responsive h1 font-size beat our layered clamp, so the
   title grew unbounded with viewport width (70px@1920 → 83px@2560 vs concept's capped 65.6px).
   Re-assert the concept clamp + metrics unlayered so the title stays capped on wide screens. */
.dx--ru-hero h1{font-size:clamp(2.6rem,5.2vw,4.1rem);line-height:1.15;letter-spacing:-.038em;font-weight:700;max-width:24ch}
/* batch 9 — vacatures overview hero side: no top padding (the 80px section padding-top
   supplies the spacing); body prefix beats the P11 .dx--ru-hero__side{padding-top:150px}. */
body .dx--ru-hero--overview .dx--ru-hero__side{padding-top:0}
/* ervaring card excerpt: kill the inherited <p> bottom margin so the foot sits tight. */
.dx--ru-card--ervaring .dx--ru-card--ervaring__excerpt{margin-bottom:0 !important}
/* Hero H1 colour = purple-dark on the LIGHT-bg heroes (beats Impreza's unlayered h1..h6
   colour). The pink .dx--ru-accent (above) is more specific and stays pink. Dark-bg heroes
   (ervsingle/zd/wl/vacature) keep their own unlayered white h1 override — not matched here. */
.dx--ru-hero h1,
.dx--su-aanmelden-hero .dx--ru-cf7__aside h1{color:var(--wz-purple-deep)}
/* batch 10 — aanmelden form-page + bedankt fixes (UNLAYERED: Impreza's unlayered
   h1 + ul rules beat the @layer pages copies at 3271/3273; same for the section
   surfaces, so these must sit outside @layer to win). */
.dx--su-aanmelden-hero .dx--ru-cf7__aside h1{font-size:clamp(2.1rem,3.6vw,3rem);line-height:1.05;letter-spacing:-.03em;max-width:18ch}
.dx--su-aanmelden-usps{list-style:none;margin:24px 0 0;padding:0;gap:11px}
.dx--su-aanmelden-usps li{gap:11px;line-height:1.45}
/* form vs reviews contrast: white hero/form + paper-warm reviews (the generic
   .dx--ru-ervaringen.u-surface-paper{background:#fff} ~4337 forced both white →
   "no contrast"). paper-warm (#EEF1F6) is a visible step from white, on-palette. */
body:has(.dx--su-aanmelden-hero) .dx--ru-ervaringen.u-surface-paper{background:var(--wz-paper-warm)}
/* bedankt: centre the column inside Impreza's .g-cols track — place-items:center on
   the .dx--ru-bevestiging section doesn't reach it (.l-section-h + .g-cols sit between),
   so the max-width-capped inner parked flush-left in the full-width track. */
.dx--ru-bevestiging .g-cols{justify-items:center}
.dx--ru-bevestiging .dx--ru-bevestiging__inner{margin-inline:auto}
/* Home hero — owner: full-viewport height (the concept caps the base hero at min(96vh,860px); this is
   a deliberate owner override to 100vh, scoped to --home so other heroes keep the concept cap).
   Impreza reserves 100px on the first section's .l-section-h for the fixed header, but the side
   column's 216px padding already clears it → zero that reserve (home only) so content isn't pushed
   ~100px low, then fill + centre the viewport. */
/* Home hero = exactly one viewport. The (solid) fixed header reserves --header-height at the
   top of the page, so the full_height row must be 100vh MINUS that reserve — otherwise header +
   100vh overflows and the hero bottom (CTAs) falls off-screen. Also zero Impreza's 64px padding. */
.dx--ru-hero.dx--ru-hero--home.full_height{min-height:calc(100svh - var(--header-height));padding-top:0;padding-bottom:0}
/* Home hero keeps its immersive left spacing (== the topbar inset); only the OTHER
   heroes push their text to the header content edge (--wz-edge, set on the base rule). */
.dx--ru-hero--home .dx--ru-hero__side{padding-left:var(--wz-inset)}
/* Home hero image — owner: use full-size source + centre horizontally (was 62% object-position) */
/* Hero image must be absolute-fill, NOT in-flow — otherwise its natural height (≈981px) stretches
   the visual column → the whole hero section past 100vh and the bottom (CTAs) falls off-screen. */
.dx--ru-hero--home .dx--ru-hero__visual img{position:absolute !important;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:0}
/* Hero visual image — Impreza's .w-image wrapper has no resolved height, so height:100%
   collapsed to the image's natural height and left bare paper under the USP scrim. Absolutely
   fill the (position:relative) visual so the photo covers the full column behind the USPs. */
.dx--ru-hero .dx--ru-hero__visual .w-image{position:absolute;inset:0;height:100%;width:100%;margin:0}
.dx--ru-hero .dx--ru-hero__visual .w-image .w-image-h{height:100%;width:100%;display:block}
.dx--ru-hero .dx--ru-hero__visual .w-image img{height:100%;width:100%;object-fit:cover}

/* ── Anchor-based cards/blocks (Home doelgroep, vacatures, …) ──
   Cards/strips are <a> elements; Impreza's UNLAYERED a{background:none} + a{color:link(pink)}
   beat our layered dx fills/colours → transparent cards + pink text. Re-assert unlayered.
   (Same root cause will hit every anchor card site-wide — persona/vacancy/route/feature.) */
.dx--ru-card{background:#fff}
.dx--ru-werkgever-strip{background:var(--wz-purple-deep)}
.dx--ru-werkgever-strip .dx--ru-werkgever-strip__title,.dx--ru-werkgever-strip .dx--ru-werkgever-strip__go{color:#fff}
.dx--ru-werkgever-strip .dx--ru-werkgever-strip__sub{color:rgba(255,255,255,.72)}
.dx--ru-werkgever-strip .dx--ru-werkgever-strip__tag{color:var(--wz-purple-soft)}
.dx--ru-card--vacancy .dx--ru-card--vacancy__title{color:var(--wz-ink)}
/* ── Headings on the purple-deep surface (werkgevers band, tussenblok, twijfel) ──
   Impreza's unlayered h1..h6{color:var(--color-content-heading)} (dark) beats layered white → dark-on-dark. */
.u-surface-purple-deep h2,.u-surface-purple-deep h3,.u-surface-purple-deep h4{color:#fff}
/* ── Footer (Impreza footer layout) — same a{} / h*{} cascade + UA list bullets ── */
.dx--su-footer__col h4{color:rgba(255,255,255,.5)}
.dx--su-footer__col a{color:rgba(255,255,255,.82)}
.dx--su-footer__col a:hover{color:#fff}
.dx--su-footer__col ul{list-style:none;margin:0;padding:0}
.dx--su-footer__col li{list-style:none}
/* Herken video — real HTML5 media fills the concept poster panel; hidden until the panel is
   clicked (.is-playing), then it reveals + native controls show and the play-btn/label/caption hide. */
.dx--ru-herken .dx--ru-herken__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:1;background:#000}
.dx--ru-herken .dx--ru-herken__video.is-playing .dx--ru-herken__media{opacity:1;z-index:4}
.dx--ru-herken .dx--ru-herken__video.is-playing .dx--ru-herken__play-btn,.dx--ru-herken .dx--ru-herken__video.is-playing .dx--ru-herken__video-label,.dx--ru-herken .dx--ru-herken__video.is-playing .dx--ru-herken__video-caption{opacity:0;pointer-events:none}
/* Ervaring overview cards — video badge on cards whose ervaring has a video (live feature).
   FA-independent (FA glyphs unbuilt locally): pink circle + white video-camera icon via inline SVG.
   left/bottom:auto cancels the base __photo::after inset:0 (which otherwise pinned it top-LEFT). */
.w-grid-item.dx--has-video .dx--ru-card--ervaring__photo{position:relative}
.w-grid-item.dx--has-video .dx--ru-card--ervaring__photo::after{
  content:"";position:absolute;top:14px;right:14px;left:auto;bottom:auto;width:36px;height:36px;border-radius:50%;z-index:3;
  background:var(--wz-pink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512' fill='%23fff'%3E%3Cpath d='M0 128C0 92.7 28.7 64 64 64H320c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128zM559.1 99.8c10.4 5.6 16.9 16.4 16.9 28.2V384c0 11.8-6.5 22.6-16.9 28.2s-23 5-32.9-1.6l-96-64L416 337.1V320 192 174.9l14.2-9.5 96-64c9.8-6.5 22.4-7.2 32.9-1.6z'/%3E%3C/svg%3E") center/18px no-repeat;
  box-shadow:0 4px 12px rgba(0,0,0,.28);
}
/* ── Vacature single — moved out of the inline <style> in content-single-job_listing.php ── */
/* Apply modal: hide WPJM's own apply button + legacy close inside the V2 modal
   (the modal has its own open/close; form body stays visible via the
   job-application-details-keep-open body class set in inc/wz-jobs.php). */
.dx--ru-vacature-modal .application_button{ display:none !important; }
.dx--ru-vacature-modal .dx--su-close{ display:none !important; }
/* Fenna avatar in step 1 of the sollicitatieproces (zij-instroom only). */
.dx--su-traject-fenna__img{
    width:80px; height:80px; border-radius:50%; object-fit:cover; object-position:50% 16%;
    border:3px solid var(--wz-white,#fff);
    box-shadow:0 6px 18px -8px rgba(var(--wz-purple-deep-rgb),.5);
    margin-top:-6px; margin-bottom:8px;
}
/* Proactive scan fix — dark hero headings (wl-hero / zd-hero on werken-en-leren,
   werken-zonder-diploma, etc.) rendered near-black on purple-deep (Impreza h* colour beats
   the layered white). Re-assert white unlayered (only the h1 was affected; body text was already light). */
.dx--su-wl-hero h1,.dx--su-wl-hero h2,.dx--su-zd-hero h1,.dx--su-zd-hero h2{color:#fff}
/* Footer chrome (agent C findings) — Impreza's base h4{} + a{} beat the layered footer rules
   (same @layer/specificity defeat). Re-assert unlayered: small uppercase eyebrow column headings
   (were big Montserrat sentence-case) + muted-white bottom-bar/brand links (were Impreza pink). */
.dx--su-footer__col h4{font-family:var(--wz-font-display);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;line-height:1.2}
.dx--su-footer__bottom a{color:rgba(255,255,255,.55)}
.dx--su-footer__bottom a:hover{color:#fff}
.dx--su-footer__brand a,.dx--su-footer__brand p a{color:#fff}
/* ============================================================================
   MEGA-MENU — concept dx--ru-mm-* ported for the Impreza us_page_block dropdown.
   The panel lives inside Impreza's dropdown <ul> (Impreza handles show/hide +
   positioning), so override the concept's absolute/hidden panel + make the
   Impreza dropdown shell full-bleed white. Content rules are the concept's verbatim.
   ============================================================================ */
.l-header .w-nav-list.level_2:has(.dx--ru-mm-panel){left:-4vw !important;right:auto;width:100vw !important;max-width:none !important;background:#fff;padding:5px 0 10px;box-shadow:0 26px 44px -30px rgba(23,20,19,.22);border-bottom:1px solid var(--wz-line)}
.l-header li:has(> .dx--ru-mm-panel){width:100%}
.dx--ru-mm-panel{position:static;opacity:1;visibility:visible;transform:none;background:#fff;width:100%}
/* Mega dropdown content aligns to the HEADER content edge: the header is full-width
   with a --wz-inset gutter (NOT capped at --wz-content-max), so the panel matches by
   spanning 100% with the same --wz-inset side padding (the centered/capped o-container
   model drifted right of the header once it maxed out ≥1500px). */
.dx--ru-mm-grid{width:100%;padding:0 var(--wz-inset);display:grid;grid-template-columns:1.35fr 1fr 1fr 1.3fr;gap:0;align-items:stretch}
.dx--ru-mm-col{padding:0 clamp(22px,2.4vw,40px);border-left:1px solid var(--wz-line-soft)}
.dx--ru-mm-col:first-child{padding-left:0;border-left:0}
.dx--ru-mm-col--werkvelden{padding-right:0;display:flex;flex-direction:column}
.dx--ru-mm-col-title{font-family:var(--wz-font-display);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;font-weight:700;color:var(--wz-pink);margin:0 0 12px;display:flex;align-items:center;gap:9px}
.dx--ru-mm-col-title::before{content:"";width:20px;height:2px;background:var(--wz-pink)}
.dx--ru-mm-rich{display:flex;flex-direction:column;gap:2px}
.dx--ru-mm-rich a{display:grid;grid-template-columns:38px 1fr auto;grid-template-rows:auto auto;column-gap:13px;align-items:center;padding:10px 12px;border-radius:var(--wz-radius-md);transition:background .16s ease}
.dx--ru-mm-rich a:hover{background:var(--wz-pink-soft)}
.dx--ru-mm-rich .dx--ru-mm-rich__ic{grid-column:1;grid-row:1/3;width:38px;height:38px;border-radius:50%;background:var(--wz-pink-light);color:var(--wz-pink);display:grid;place-items:center;font-size:15px;transition:background .16s ease,color .16s ease}
.dx--ru-mm-rich a:hover .dx--ru-mm-rich__ic{background:var(--wz-pink);color:#fff}
.dx--ru-mm-rich .dx--ru-mm-rich__t{grid-column:2;grid-row:1;font-family:var(--wz-font-body);font-weight:600;font-size:.96rem;color:var(--wz-ink);line-height:1.2}
.dx--ru-mm-rich .dx--ru-mm-rich__d{grid-column:2;grid-row:2;font-size:.8rem;color:var(--wz-ink-mute);line-height:1.4;margin-top:2px}
.dx--ru-mm-rich .dx--ru-arrow{grid-column:3;grid-row:1/3;align-self:center;color:var(--wz-pink);font-size:.85rem;opacity:0;transform:translateX(-4px);transition:opacity .16s ease,transform .16s ease}
.dx--ru-mm-rich a:hover .dx--ru-arrow{opacity:1;transform:translateX(0)}
.dx--ru-mm-links{display:flex;flex-direction:column;gap:1px}
.dx--ru-mm-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:var(--wz-radius-sm);font-size:.92rem;color:var(--wz-ink-soft);font-weight:500;transition:background .16s ease,color .16s ease}
.dx--ru-mm-links a:hover{background:var(--wz-pink-soft);color:var(--wz-pink)}
.dx--ru-mm-links a .dx--ru-arrow{color:var(--wz-pink);font-size:.78rem;opacity:0;transform:translateX(-4px);transition:opacity .16s ease,transform .16s ease}
.dx--ru-mm-links a:hover .dx--ru-arrow{opacity:1;transform:translateX(0)}
.dx--ru-mm-links a.is-all{margin-top:6px;color:var(--wz-pink);font-weight:600}
.dx--ru-mm-links a.is-all .dx--ru-arrow{opacity:1;transform:none}
.dx--ru-mm-card{margin-top:auto;background:var(--wz-pink-soft);border:1px solid var(--wz-pink-light);border-radius:var(--wz-radius-lg);padding:16px 18px;display:flex;flex-direction:column}
.dx--ru-mm-card .dx--ru-mm-card__ic{width:32px;height:32px;border-radius:50%;background:var(--wz-pink);color:#fff;display:grid;place-items:center;font-size:13px;margin-bottom:8px}
.dx--ru-mm-card .dx--ru-mm-card__ey{font-family:var(--wz-font-display);font-weight:700;font-size:1rem;color:var(--wz-ink);margin:0 0 4px}
.dx--ru-mm-card p{font-size:.82rem;color:var(--wz-ink-soft);line-height:1.45;margin:0 0 12px}
.dx--ru-mm-card .dx--ru-btn{align-self:flex-start}
.dx--ru-mm-col--werkvelden .dx--ru-mm-links{margin-bottom:8px}
/* FontAwesome 6 class aliases — the concept + mega-menu markup uses FA6 syntax
   (fa-solid/fa-regular/fa-brands); the site bundles FA5 fonts. Map the FA6 classes
   to the loaded FA fonts so their (now-real, via optimize_assets) glyph codepoints render. */
.fa-solid{font-family:fontawesome;font-weight:900}
.fa-regular{font-family:fontawesome;font-weight:400}
.fa-light{font-family:fontawesome;font-weight:300}
.fa-brands{font-family:"Font Awesome 5 Brands";font-weight:400}
/* Nav dropdown caret — Impreza's .w-nav-arrow::before is its own empty element; render the
   concept's chevron using the (now-working) FA glyph. */
.l-header .w-nav-arrow::before{content:"\f078" !important;font-family:fontawesome !important;font-weight:900;font-size:10px;border:0 !important;width:auto;height:auto;transform:none}
/* Home hero "Onze belofte" overlay (concept dx--su-home-belofte) — replaces old hero__usps.
   Image fills the column (via .w-image fill rules); ::before scrim darkens it for legible white text. */
.dx--ru-hero__visual.dx--su-home-belofte{background:var(--wz-purple-deep);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;padding:clamp(40px,4.5vw,72px);color:#fff}
/* gradient only on the BOTTOM of the image (behind the USPs) — image reads clear up top */
.dx--su-home-belofte::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(var(--wz-purple-deep-rgb),.94) 0%,rgba(var(--wz-purple-deep-rgb),.82) 20%,rgba(var(--wz-purple-deep-rgb),.42) 44%,rgba(var(--wz-purple-deep-rgb),0) 70%)}
.dx--su-home-belofte__list{position:relative;z-index:2;list-style:none;margin:0;padding:0;width:100%;max-width:420px}
.dx--su-home-belofte__row{display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:start;padding:16px 0}
.dx--su-home-belofte__row + .dx--su-home-belofte__row{border-top:1px solid rgba(255,255,255,.18)}
.dx--su-home-belofte__ic{width:46px;height:46px;border-radius:50%;flex-shrink:0;background:#fff;color:var(--wz-purple-deep);display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.dx--su-home-belofte__txt h3{font-family:var(--wz-font-display);font-weight:700;font-size:clamp(.98rem,1.1vw,1.1rem);letter-spacing:-.012em;line-height:1.25;color:#fff;margin:0 0 4px}
.dx--su-home-belofte__txt p{font-family:var(--wz-font-body);color:var(--wz-on-dark-2,rgba(255,255,255,.72));font-size:.86rem;line-height:1.5;margin:0}
@media (max-width:900px){.dx--ru-hero__visual.dx--su-home-belofte{justify-content:center;align-items:stretch;padding:48px var(--wz-inset)}.dx--su-home-belofte__list{max-width:520px;margin-inline:auto}
  /* mobile: stronger bottom→top scrim so the belofte rows stay legible over the photo */
  .dx--su-home-belofte::before{background:linear-gradient(to top, rgba(var(--wz-purple-deep-rgb),.84) 0%, rgba(var(--wz-purple-deep-rgb),.62) 20%, rgba(var(--wz-purple-deep-rgb),.42) 44%, rgba(var(--wz-purple-deep-rgb),.4) 70%)}}
/* Vacatures CTA — compact pink pill, vertically centred. Lives in the html:3
   header widget (.w-html), so the styling is NOT scoped to .w-nav. */
.l-header .w-html .w-nav-list{list-style:none;margin:0;padding:0;display:flex;align-items:center}
.l-header .menu-item-cta{margin-left:12px;display:flex;align-items:center}
.l-header .menu-item-cta > .w-nav-anchor{background:var(--wz-pink) !important;border-radius:999px;padding:13px 22px;font-size:.92rem;line-height:1.1 !important;height:auto !important;display:inline-flex;align-items:center}
.l-header .menu-item-cta > .w-nav-anchor .w-nav-title{color:#fff}
.l-header .menu-item-cta > .w-nav-anchor:hover{background:var(--wz-pink-hover) !important}
.l-header .menu-item-cta > .w-nav-anchor:hover .w-nav-title{color:#fff}
/* Dropdown caret (the menu element renders no arrow) */
.l-header .w-nav-anchor.level_1{position:relative}
.l-header .menu-item-has-children:not(.menu-item-cta) > .w-nav-anchor.level_1 > .w-nav-title::after{content:"\f078";font-family:fontawesome;font-weight:900;font-size:9px;margin-left:7px;display:inline-block;vertical-align:middle;line-height:0;opacity:.6}
/* Nav menu type + logo vertical balance */
.l-header .w-nav-anchor.level_1,
.l-header .w-nav-anchor.level_1 .w-nav-title{font-size:.92rem}
.l-header .l-subheader.at_middle .w-img,.l-header .l-subheader.at_middle img{margin-top:-6px}

/* Full-width dark topbar (overrides the transparent-header scrim) */
.l-header .l-subheader.at_top{background:#17112d !important}
.l-header .l-subheader.at_top .w-html{width:100%}
.dx--su-topbar-util{width:100%;background:transparent}

/* Mega dropdown spans the full viewport on desktop */
@media (min-width:901px){
  .l-header .w-nav-list.level_2:has(.dx--ru-mm-panel){left:50% !important;right:auto !important;width:100vw !important;max-width:none !important;margin-left:-50vw !important}
}

/* Werkveld card photo: fills the frame; number top-left, glyph centred above the scrim */
.dx--ru-card--werkveld__ph{position:relative;overflow:hidden;aspect-ratio:16/10}
.dx--ru-card--werkveld__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.dx--ru-card--werkveld__ph::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(var(--wz-purple-deep-rgb),.10),rgba(var(--wz-purple-deep-rgb),.45))}
.dx--ru-card--werkveld__glyph{position:relative;z-index:2}
.dx--ru-card--werkveld__num{position:absolute;top:14px;left:14px;z-index:3}

/* Footer columns: tight list, brand body flush with the logo, pink heart */
.dx--su-footer__col a{padding-top:0;padding-bottom:0}
.dx--su-footer__col li,.dx--su-footer__col a{line-height:1.35}
.dx--su-footer__col ul{gap:0;row-gap:0}
.dx--su-footer__col li{margin:0;padding:0}
.dx--su-footer__brand p{margin-left:0;padding-left:0;text-indent:0}
.dx--su-footer__logomark span{color:var(--wz-pink)}

/* Hero visual reaches the row edge — no gutter-bleed overflow */
.dx--ru-hero .dx--ru-hero__visual{margin-right:0}

/* Home hero = one viewport below the fixed header; photo crops, USP list sits bottom-right.
   Heights forced down the WPBakery chain (Impreza full_height + grid min-height:auto otherwise
   stretch the columns past 100vh and clip the CTAs). */
@media (min-width:901px){
  .dx--ru-hero.dx--ru-hero--home.full_height{height:calc(100svh - var(--header-height)) !important;overflow:hidden}
  .dx--ru-hero--home .l-section-h{height:100% !important;min-height:0 !important}
  .dx--ru-hero--home .dx--ru-hero__side,
  .dx--ru-hero--home .dx--ru-hero__visual{min-height:0 !important;height:100% !important;overflow:hidden}
  .dx--ru-hero--home .dx--ru-hero__visual .vc_column-inner{height:100%}
}
.dx--ru-hero--home .dx--su-home-belofte .vc_column-inner{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end}
.dx--ru-hero--home .dx--su-home-belofte{padding:clamp(40px,4.5vw,72px) clamp(44px,5vw,80px)}

/* ── Page-audit fixes (2026-06-01) ── */
/* Werken-zonder-diploma hero card heading at concept size */
.dx--su-zd-hero .dx--su-zd-hero__card h2{font-size:1.3rem;line-height:1.22;margin-bottom:14px;color:var(--wz-purple-deep)}
/* Omscholen vacancies filter label = uppercase eyebrow */
.dx--su-vacatures__filter h3{font-size:.78rem;color:var(--wz-ink-soft);text-transform:uppercase;letter-spacing:.14em;font-weight:600}
/* pgvm: head + cta span full width, ok/no compare columns side-by-side; stacks below desktop */
.dx--ru-pgvm .dx--ru-pgvm__col{min-width:0}
@media (min-width:1024px){
  .dx--ru-pgvm .g-cols{grid-template-columns:1fr 1fr !important}
  .dx--ru-pgvm .dx--ru-pgvm__head,.dx--ru-pgvm .dx--ru-pgvm__cta{grid-column:1 / -1}
}
@media (max-width:1023px){.dx--ru-pgvm .g-cols{--custom-columns:1fr !important}}
/* "Twijfel je?" CTA heading pink (concept) — Impreza's stylesheet loads UNLAYERED, so
   its h1-h6 colour beats the layered component rule; this unlayered rule wins it back. */
.dx--ru-pgvm .dx--ru-pgvm__cta-text h3{color:var(--wz-pink)}
/* Zorgpersoneel hero accent word */
.dx--su-zpg-hero h1 .dx--ru-accent{color:var(--wz-pink)}
/* hide the bevestiging secondary CTA when it has no label (single-button bedankt pages) */
.dx--ru-bevestiging__actions .w-btn.text_none{display:none}
/* CF7 submit = pink primary button (matches the concept's dx--ru-cf7__submit).
   Width is set by the PHASE-3 forms bridge below (auto, left-aligned; full-width ≤768). */
.dx--ru-cf7 .wpcf7-submit{background:var(--wz-pink);color:#fff;border:0;border-radius:var(--wz-radius-pill);padding:14px 24px;font-family:var(--wz-font-body);font-size:.96rem;font-weight:600;cursor:pointer;transition:background .2s ease}
.dx--ru-cf7 .wpcf7-submit:hover{background:var(--wz-pink-hover)}
/* Home hero stacks at tablet/mobile (≤900) — prevents the 2-col squeeze + 768 overflow */
@media (max-width:900px){
  .dx--ru-hero--home .g-cols{grid-template-columns:1fr !important}
  .dx--ru-hero--home .dx--ru-hero__visual{min-height:340px}
  .dx--ru-hero--home img{max-width:100%}
}
/* nhz flip headline keeps its large size (Impreza's unlayered h3 otherwise wins) */
.dx--su-nhz-flip h3{font-size:clamp(2.1rem,3.6vw,2.2rem);line-height:1.02;letter-spacing:-.03em}
/* clip the home hero photo's slight bleed when stacked (tablet/mobile) — kills the 768 overflow */
@media (max-width:900px){.dx--ru-hero--home{overflow-x:clip}.dx--ru-hero--home .dx--ru-hero__visual{overflow:hidden}}
/* Home content sections stack at tablet/mobile (the WPBakery rows are set tablets-cols_inherit,
   so they stay 2-col at ≤900 and the herken CTA overflows) */
@media (max-width:900px){.dx--ru-herken .g-cols,.dx--ru-doelgroep .g-cols{grid-template-columns:1fr !important}}
/* Aanmelden hero accent word (us_text delivers .dx--ru-accent, not <em>) */
.dx--su-aanmelden-hero .dx--ru-cf7__aside h1 .dx--ru-accent{color:var(--wz-pink)}
/* /vacatures top-search — the wpjmsf section lays its fields out with inline
   absolute coords (vue-grid-item top/left/width/height); flatten that grid into
   one horizontal bar of cells + pink submit, ordered functie · adres · afstand ·
   knop, all wrapped as the concept .search CARD (white, radius-lg, shadow, a 4px
   pink→purple top accent, per-cell eyebrow labels + hairline dividers). The
   surrounding u-section padding is collapsed so the bar tucks under the hero with
   no empty band. Overriding the plugin's inline styles is the one place
   !important is unavoidable. Fields wrap to a vertical stack on mobile. */
/* Search band: symmetric content-edge inset (== the page sections / .o-container at
   every width, via --wz-edge) + a 60px top gap so the card clears the section above. */
.dx--su-vacatures-top-search.u-section{padding:60px var(--wz-edge) 34px}
/* CARD shell = the section's text-column wrapper (one block wrapping all fields) */
.dx--su-vacatures-top-search .wpb_text_column > .wpb_wrapper{background:#fff;border-radius:var(--wz-radius-lg);box-shadow:var(--wz-shadow-card);position:relative;overflow:hidden;padding:10px}
.dx--su-vacatures-top-search .wpb_text_column > .wpb_wrapper::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--wz-pink),var(--wz-purple));z-index:2}
.dx--su-vacatures-top-search .wpjmsf-wrapper,.dx--su-vacatures-top-search .section-wrapper,.dx--su-vacatures-top-search .section-wrapper-inner,.dx--su-vacatures-top-search .fields-wrapper,.dx--su-vacatures-top-search .fields-wrapper-normal-grid{width:100%}
.dx--su-vacatures-top-search .vue-grid-layout{display:flex !important;flex-wrap:wrap;align-items:stretch;gap:0;height:auto !important}
.dx--su-vacatures-top-search .vue-grid-item{position:relative !important;inset:auto !important;width:auto !important;height:auto !important;transform:none !important;margin:0 !important;display:flex}
.dx--su-vacatures-top-search .vue-grid-placeholder{display:none !important}
.dx--su-vacatures-top-search .wpjmsf-multiselect-field-type{order:1;flex:1.5 1 230px}
.dx--su-vacatures-top-search .wpjmsf-text_locate-field-type{order:2;flex:1.2 1 200px}
.dx--su-vacatures-top-search .wpjmsf-slider-field-type{order:3;flex:1 1 210px}
.dx--su-vacatures-top-search .wpjmsf-button-field-type{order:4;flex:0 0 auto}
.dx--su-vacatures-top-search .grid-field-wrapper{height:100%;width:100%}
.dx--su-vacatures-top-search .wpjmsf-field-wrapper{height:100%;width:100%;margin:0 !important;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:12px 18px;border-radius:var(--wz-radius-md);transition:background .22s ease}
.dx--su-vacatures-top-search .wpjmsf-multiselect-field-wrapper:hover,.dx--su-vacatures-top-search .wpjmsf-text_locate-field-wrapper:hover,.dx--su-vacatures-top-search .wpjmsf-slider-field-wrapper:hover{background:var(--wz-pink-soft)}
/* hairline divider between adjacent cells (concept .s-field+.s-field) */
.dx--su-vacatures-top-search .wpjmsf-text_locate-field-type,
.dx--su-vacatures-top-search .wpjmsf-slider-field-type{border-left:1px solid var(--wz-line)}
/* per-cell EYEBROW label (.7rem uppercase mute) — concept .lbl. The functie/locate
   fields ship no label, so emit one via ::before on the field wrapper; the slider
   already has a <label> which we restyle to match below. */
.dx--su-vacatures-top-search .wpjmsf-multiselect-field-wrapper::before{content:"Functie"}
.dx--su-vacatures-top-search .wpjmsf-text_locate-field-wrapper::before{content:"Locatie"}
.dx--su-vacatures-top-search .wpjmsf-multiselect-field-wrapper::before,
.dx--su-vacatures-top-search .wpjmsf-text_locate-field-wrapper::before{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--wz-ink-mute);font-weight:600;line-height:1}
/* fields now sit BARE inside the cell (no inner pill) — let the eyebrow carry it */
.dx--su-vacatures-top-search .select2-container{width:100% !important}
.dx--su-vacatures-top-search .select2-selection{box-sizing:border-box;min-height:auto;display:flex;align-items:center;background:none !important;border:0 !important;border-radius:0 !important;padding:0 !important}
.dx--su-vacatures-top-search .wpjmsf-text_locate-field-wrapper{position:relative}
.dx--su-vacatures-top-search .wpjmsf-text_locate-field{box-sizing:border-box;width:100%;min-height:auto;background:none !important;border:0 !important;border-radius:0 !important;padding:0 28px 0 24px !important;font-size:.95rem}
.dx--su-vacatures-top-search .select2-selection__rendered{padding:0 0 0 24px !important;line-height:1.3}
.dx--su-vacatures-top-search .select2-selection__arrow{height:24px !important;right:2px;top:50%;transform:translateY(-50%)}
/* pink field icon in front of the functie + locate cells (concept .s-field i) */
.dx--su-vacatures-top-search .wpjmsf-multiselect-field-wrapper{position:relative}
/* the field cell has a ::before eyebrow above the input, so vertical-center the icon
   on the input row (≈9px below the cell midpoint), not the whole cell */
.dx--su-vacatures-top-search .wpjmsf-multiselect-field-wrapper::after,
.dx--su-vacatures-top-search .wpjmsf-text_locate-field-wrapper::after{font-family:fontawesome;font-weight:900;color:var(--wz-pink);position:absolute;left:18px;top:calc(50% + 9px);bottom:auto;transform:translateY(-50%);font-size:.95rem}
.dx--su-vacatures-top-search .wpjmsf-multiselect-field-wrapper::after{content:"\f002"}
.dx--su-vacatures-top-search .wpjmsf-text_locate-field-wrapper::after{content:"\f3c5"}
/* the locate field's own crosshair icon-button moves to the right edge, muted + same row */
.dx--su-vacatures-top-search .text-locate-field-icon-button{color:var(--wz-ink-mute);right:0;top:calc(50% + 9px);transform:translateY(-50%)}
/* afstand slider cell: caption above a centred track (no pill) */
.dx--su-vacatures-top-search .wpjmsf-slider-field-wrapper{box-sizing:border-box;background:none;border:0;border-radius:0}
.dx--su-vacatures-top-search .wpjmsf-label-slider{font-size:.7rem !important;letter-spacing:.08em !important;text-transform:uppercase;font-weight:600 !important;color:var(--wz-ink-mute) !important;margin:0 0 4px !important;padding:0 !important;line-height:1}
.dx--su-vacatures-top-search .slider-wrapper{padding:4px 0 2px}
/* pink submit = concept .s-btn (rounded-md, sits inside the card) */
.dx--su-vacatures-top-search .wpjmsf-button-field-wrapper{padding:6px;justify-content:center}
.dx--su-vacatures-top-search .wpjmsf-button-field{min-height:54px;padding:0 30px !important;border-radius:var(--wz-radius-md) !important;white-space:nowrap;font-weight:600}
@media (max-width:720px){
  .dx--su-vacatures-top-search .vue-grid-item{flex:1 1 100% !important}
  .dx--su-vacatures-top-search .wpjmsf-text_locate-field-type,
  .dx--su-vacatures-top-search .wpjmsf-slider-field-type{border-left:0;border-top:1px solid var(--wz-line)}
  .dx--su-vacatures-top-search .wpjmsf-button-field{width:100%}
}
/* keuzehulp card merged into the overview sidebar — compact card under the facets */
.dx--ru-keuzehulp--sidebar{background:var(--wz-pink-soft,#fdeef3);border:1px solid var(--wz-line);border-radius:var(--wz-radius-lg);padding:22px 20px;margin-top:24px}
.dx--ru-keuzehulp--sidebar .dx--ru-keuzehulp__inner h2{font-size:1.1rem;line-height:1.25;margin:8px 0 8px}
.dx--ru-keuzehulp--sidebar p{font-size:.88rem;line-height:1.5;margin-bottom:16px}
.dx--ru-keuzehulp--sidebar .dx--ru-btn{width:100%;justify-content:center}

/* ===== /vacatures FEED — 2026-06-02 ===== */
/* Brings the live S&F sidebar facets, WPJM results line and pagination up to the
   Vacaturefeed-concept visual language (paper/line fields, pink accents, pill
   pagination). Scoped to the feed wrappers so the /vacature single is untouched. */

/* 1 · RESULTS HEADER — WPJM's .showing_jobs count line is MIRRORED by
   wz-vacatures-chips.js into the toolbar's left group (count + chips on one row);
   the native source form (which the plugin still owns/re-renders) is hidden. The
   toolbar copy reads as inline text: count + the "Herstel" reset in pink, RSS
   dropped (concept has none). */
.dx--su-vacancies-list .job_filters{display:none}
.dx--ru-vacancies-toolbar .showing_jobs{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;background:none;border:0;padding:0;margin:0;font-size:1rem;color:var(--wz-ink-soft)}
.dx--ru-vacancies-toolbar .showing_jobs > span{margin-right:0}
.dx--ru-vacancies-toolbar .showing_jobs > span b{color:var(--wz-ink);font-weight:700}
.dx--ru-vacancies-toolbar .showing_jobs .rss_link{display:none}
.dx--ru-vacancies-toolbar .showing_jobs .reset{color:var(--wz-pink);font-weight:600;font-size:.88rem;text-decoration:none}
.dx--ru-vacancies-toolbar .showing_jobs .reset:hover{color:var(--wz-pink-hover);text-decoration:underline}

/* 2 · TOOLBAR + REMOVABLE ACTIVE-FILTER CHIPS — concept .toolbar/.chip. ONE flex
   row: count + active-filter chips on the LEFT (pushed together via margin-right
   auto), the orderby sort pill on the RIGHT, vertically centered, no stray gap.
   Chips are rendered by js/wz-vacatures-chips.js into [data-wz-active-filters]
   from the live S&F selection; each chip's fa-xmark clears that field. Pink-light
   pill, pink-dark text, per the concept. */
.dx--ru-vacancies-toolbar{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;margin:0 0 18px;min-height:42px}
.dx--ru-vacancies-toolbar .showing_jobs{margin-right:auto}
.dx--ru-active-filters{display:flex;gap:8px;flex-wrap:wrap;min-width:0}
.dx--ru-active-filters:not([hidden]){margin-right:auto}
.dx--ru-active-filters .chip{display:inline-flex;align-items:center;gap:6px;background:var(--wz-pink-light);color:var(--wz-pink-dark);font-size:.82rem;font-weight:600;padding:6px 8px 6px 12px;border-radius:var(--wz-radius-pill);line-height:1.2}
.dx--ru-active-filters .chip i.fa-xmark{font-size:.72rem;opacity:.7;cursor:pointer;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;transition:opacity .18s ease,background .18s ease}
.dx--ru-active-filters .chip i.fa-xmark::before{font-family:fontawesome;font-weight:900;content:"\f00d"}
.dx--ru-active-filters .chip i.fa-xmark:hover,
.dx--ru-active-filters .chip i.fa-xmark:focus-visible{opacity:1;background:rgba(var(--wz-pink-rgb),.18);outline:none}

/* 3 · SORT — the S&F orderby el-select styled as the concept .sort pill (white,
   1px line, pill radius, pink chevron, compact), right-aligned in the toolbar.
   The S&F vue-grid wraps the field in a fixed 90px-tall absolutely-positioned
   grid (inline styles) that created a tall empty block + stray gap; flatten the
   grid back to normal flow and let the pill size to its content. !important only
   beats the plugin's inline width/height/position. */
.dx--ru-vacancies-toolbar__sort{flex:0 0 auto;margin-left:auto}
.dx--ru-vacancies-toolbar__sort .wpjmsf-wrapper{width:auto !important;height:auto !important}
.dx--ru-vacancies-toolbar__sort .wpjmsf-section-container{margin:0}
.dx--ru-vacancies-toolbar__sort .vue-grid-layout,
.dx--ru-vacancies-toolbar__sort .vue-grid-item{position:static !important;width:auto !important;height:auto !important;transform:none !important;inset:auto !important;margin:0 !important}
.dx--ru-vacancies-toolbar__sort .wpjmsf-field-wrapper{margin:0 !important}
/* the pill = an inline-flex shell carrying the "Sorteer op" prefix; the el-select
   input holds the chosen value (Nieuwste/Relevantie/…) with no border of its own */
.dx--ru-vacancies-toolbar__sort .el-select{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--wz-line);border-radius:var(--wz-radius-pill);padding:0 14px 0 16px;width:auto !important;cursor:pointer;transition:border-color .22s ease}
.dx--ru-vacancies-toolbar__sort .el-select:hover{border-color:var(--wz-pink)}
.dx--ru-vacancies-toolbar__sort .el-select::before{content:"Sorteer op";color:var(--wz-ink-soft);font-size:.88rem;white-space:nowrap;margin-right:6px}
.dx--ru-vacancies-toolbar__sort .el-input{display:inline-flex;align-items:center;width:auto}
.dx--ru-vacancies-toolbar__sort input.el-input__inner{background:none;border:0;border-radius:0;box-shadow:none !important;height:40px;padding:0 4px 0 0;width:auto !important;min-width:62px;color:var(--wz-ink);font-weight:600;font-size:.88rem;cursor:pointer}
.dx--ru-vacancies-toolbar__sort .el-input__suffix{position:static;display:inline-flex;align-items:center;height:auto}
.dx--ru-vacancies-toolbar__sort .el-input__suffix-inner{display:inline-flex;align-items:center}
/* pink chevron — S&F renders an ElementUI arrow-up icon (its own icon font, grey);
   override the el-icon class so OUR fa down-chevron + pink win on specificity. */
.dx--ru-vacancies-toolbar__sort .el-select .el-select__caret.el-icon-arrow-up{color:var(--wz-pink);transform:none;font-size:.72rem;width:auto}
.dx--ru-vacancies-toolbar__sort .el-select .el-select__caret.el-icon-arrow-up::before{content:"\f078";font-family:fontawesome;font-weight:900}
@media (max-width:1024px){
  .dx--ru-vacancies-toolbar__sort{margin-left:auto}
}
#wpjmsf-section-437, #wpjmsf-section-438, #wpjmsf-section-427, #wpjmsf-section-426 {display: none;}

/* 4 · SIDEBAR — tidy white card (sticky), the 7 facets as concept paper/line fields. */
.dx--su-side-filters-container{background:#fff;border-radius:var(--wz-radius-lg);box-shadow:var(--wz-shadow-card);padding:24px 22px;position:sticky;top:28px}
/* "Filters" heading + sliders icon + "Wis alle filters" clear-all (concept .filters h3 / .clear) */
.dx--su-side-filters-container .dx--ru-side-filters__head{margin:0 0 18px}
.dx--su-side-filters-container .dx--ru-side-filters__title{font-family:var(--wz-font-display);font-size:1.05rem;font-weight:700;display:flex;align-items:center;gap:10px;margin:0 0 6px;padding:0}
.dx--su-side-filters-container .dx--ru-side-filters__title i{color:var(--wz-pink);font-size:1rem}
/* template-emitted FA glyph isn't in us_used_icons → map directly (fontawesome 900 loaded) */
.dx--su-side-filters-container .dx--ru-side-filters__title i.fa-sliders::before{content:"\f1de";font-family:fontawesome;font-weight:900}
.dx--su-side-filters-container .dx--ru-side-filters__clear{appearance:none;background:none;border:0;padding:0;font-family:inherit;font-size:.8rem;color:var(--wz-pink);font-weight:600;cursor:pointer}
.dx--su-side-filters-container .dx--ru-side-filters__clear:hover{color:var(--wz-pink-hover);text-decoration:underline}
.dx--su-side-filters-container .vc_column-inner,.dx--su-side-filters-container .wpb_wrapper{height:auto}
.dx--su-side-filters-container .wpjmsf-section-container{margin-bottom:16px}
.dx--su-side-filters-container .vue-grid-layout,.dx--su-side-filters-container .vue-grid-item{position:static !important;width:auto !important;height:auto !important;transform:none !important;inset:auto !important;margin:0 !important}
.dx--su-side-filters-container .wpjmsf-field-wrapper{margin:0 !important}
/* el-select multiselect → concept .fselect (paper bg, 1px line, radius-sm, chevron room) */
.dx--su-side-filters-container input.el-input__inner{background:var(--wz-paper);border:1px solid var(--wz-line);border-radius:var(--wz-radius-sm);padding:0 34px 0 14px;color:var(--wz-ink-soft);font-size:.9rem;transition:border-color .22s ease,box-shadow .22s ease}
.dx--su-side-filters-container .el-select:hover input.el-input__inner,.dx--su-side-filters-container input.el-input__inner:hover{border-color:var(--wz-pink)}
.dx--su-side-filters-container input.el-input__inner:focus{border-color:var(--wz-pink);box-shadow:0 0 0 3px rgba(var(--wz-pink-rgb),.12);outline:none}
.dx--su-side-filters-container .el-select__caret{color:var(--wz-ink-mute)}
.dx--su-side-filters-container .el-select:hover .el-select__caret{color:var(--wz-pink)}
/* selected-tag chips inside the field = concept pink-light pills */
.dx--su-side-filters-container .el-select__tags .el-tag{background:var(--wz-pink-light);color:var(--wz-pink-dark);border:0;border-radius:var(--wz-radius-pill);font-weight:600}
.dx--su-side-filters-container .el-select__tags .el-tag .el-tag__close{color:var(--wz-pink-dark)}
/* Werkveld checklist (section 417) → concept .fopt rows: each option is a label
   row, the native appearance:none checkbox restyled as a 19px rounded box with a
   visible --wz-line-strong border, pink fill + white check when :checked. The
   plugin gives the input inline width:100% (a faint full-width pill) — reset it
   to a fixed glyph box (!important beats that inline width only). */
.dx--su-side-filters-container .wpjmsf-checklist-field-wrapper span > label{display:flex;align-items:center;gap:11px;padding:7px 2px;cursor:pointer;font-size:.9rem;color:var(--wz-ink-soft);line-height:1.3}
.dx--su-side-filters-container .wpjmsf-checklist-field-wrapper span > label:hover{color:var(--wz-ink)}
.dx--su-side-filters-container input.wpjmsf-checklist-field{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:19px !important;height:19px;min-height:0;margin:0;border:1.5px solid var(--wz-line-strong);border-radius:6px;background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .18s ease,border-color .18s ease}
.dx--su-side-filters-container input.wpjmsf-checklist-field:hover{border-color:var(--wz-pink)}
.dx--su-side-filters-container input.wpjmsf-checklist-field:checked{background:var(--wz-pink);border-color:var(--wz-pink)}
.dx--su-side-filters-container input.wpjmsf-checklist-field:checked::before{content:"\f00c";font-family:fontawesome;font-weight:900;color:#fff;font-size:.62rem;line-height:1}
.dx--su-side-filters-container input.wpjmsf-checklist-field:focus-visible{outline:2px solid var(--wz-pink);outline-offset:2px}
/* "Uren per week" group heading → concept uppercase mute .7rem label */
.dx--su-side-filters-container h5.dx--ru-search-filter-label{font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--wz-ink-mute);font-weight:600;margin:18px 0 7px;padding-top:0;line-height:1.2}
/* Van/Tot hour inputs → paper/line fields, the two single-field sections (min/max)
   sit side by side (each S&F section is its own block .wpjmsf-wrapper.wpjmsf-job-section
   carrying an inline width:100% — !important is the only way to beat that inline style). */
.dx--su-side-filters-container .wpjmsf-wrapper:has(.section-wrapper-421),
.dx--su-side-filters-container .wpjmsf-wrapper:has(.section-wrapper-420){display:inline-block;width:calc(50% - 5px) !important;vertical-align:top}
.dx--su-side-filters-container .wpjmsf-wrapper:has(.section-wrapper-421){margin-right:8px}
.dx--su-side-filters-container input.dx--ru-search-filter-number-input{width:100%;background:var(--wz-paper);border:1px solid var(--wz-line);border-radius:var(--wz-radius-sm);padding:0 12px;color:var(--wz-ink);font-size:.9rem;transition:border-color .22s ease,box-shadow .22s ease}
.dx--su-side-filters-container input.dx--ru-search-filter-number-input:hover{border-color:var(--wz-pink)}
.dx--su-side-filters-container input.dx--ru-search-filter-number-input:focus{border-color:var(--wz-pink);box-shadow:0 0 0 3px rgba(var(--wz-pink-rgb),.12);outline:none}
/* keuzehulp card keeps its full-width row below the paired hour inputs */
.dx--su-side-filters-container .dx--ru-keuzehulp--sidebar{display:block;width:auto}

/* 5 · PAGINATION — pill page tokens, current solid pink, chevrons pink, centered. */
.dx--su-vacancies-list nav.job-manager-pagination{margin-top:30px;border-bottom: none!important}
.dx--su-vacancies-list nav.job-manager-pagination ul{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:0;border:0}
.dx--su-vacancies-list nav.job-manager-pagination li{margin:0;padding:0;list-style:none;border:0;float:none}
.dx--su-vacancies-list nav.job-manager-pagination li::before{display:none}
.dx--su-vacancies-list nav.job-manager-pagination a,
.dx--su-vacancies-list nav.job-manager-pagination span{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;border-radius:var(--wz-radius-md);font-weight:600;font-size:.95rem;text-decoration:none;color:var(--wz-ink-soft);background:#fff;border:1px solid var(--wz-line);transition:border-color .22s ease,color .22s ease,transform .22s ease,background .22s ease}
.dx--su-vacancies-list nav.job-manager-pagination a:hover{border-color:var(--wz-pink);color:var(--wz-pink);}
.dx--su-vacancies-list nav.job-manager-pagination span.current{background:var(--wz-pink);border-color:var(--wz-pink);color:#fff}
.dx--su-vacancies-list nav.job-manager-pagination span.gap{border:0;background:none;color:var(--wz-ink-mute);min-width:24px}
/* prev/next chevron links (rendered as ← / → text) read pink */
.dx--su-vacancies-list nav.job-manager-pagination li:first-child a,
.dx--su-vacancies-list nav.job-manager-pagination li:last-child a{color:var(--wz-pink)}
.dx--su-vacancies-list nav.job-manager-pagination li:first-child a:hover,
.dx--su-vacancies-list nav.job-manager-pagination li:last-child a:hover{border-color:var(--wz-pink)}

/* 6 · RESPONSIVE — ≤1024px the filters wrapper stacks (sidebar above results, full
   width), results grid → 1 col, sidebar un-sticks; verified to 390px. */
@media (max-width:1024px){
  .dx--su-vacatures-filters-wrapper .g-cols{grid-template-columns:1fr !important}
  .dx--su-side-filters-container,.dx--su-vacancies-list{width:100% !important}
  .dx--su-side-filters-container{position:static;margin-bottom:24px}
  .dx--su-vacancies-list ul.job_listings{grid-template-columns:1fr}
}

/* ── /vacature single ──────────────────────────────────────────────────────
   The template emits icons via Impreza/FA4 icon classes whose glyph-mapping CSS
   isn't generated locally (us_used_icons only covers builder icons). The
   fontawesome 900 font IS loaded, so map the glyphs directly here. H1 must beat
   Impreza's dark heading colour over the purple hero. Unlayered on purpose. */
.dx--ru-vacature-hero .dx--ru-vacature-hero__inner h1,
.dx--su-ervsingle-hero h1.dx--su-ervsingle-hero__title{color:#fff;-webkit-text-fill-color:#fff}
/* hero links stay legible on the purple hero — Impreza's pink:hover darkens to
   near-invisible against it; force a light hover instead. */
.dx--ru-vacature-hero a:hover,
.dx--ru-vacature-hero .dx--ru-vacature-hero__back:hover,
.dx--ru-vacature-hero .dx--ru-vacature-hero__crumbs a:hover{color:#fff;-webkit-text-fill-color:#fff}
/* hero link rest colour = on-dark (Impreza's generic pink link rule leaks in) */
.dx--ru-vacature-hero .dx--ru-vacature-hero__crumbs a,
.dx--ru-vacature-hero .dx--ru-vacature-hero__back{color:var(--wz-on-dark-1)}
/* job-title H1: Impreza's post_title ignores the layered clamp and renders ~64px —
   rein it in (smaller, tighter, constrained line length) so it stops overwhelming. */
.dx--ru-vacature-hero .dx--ru-vacature-hero__inner h1{font-size:clamp(1.85rem,2.8vw,2.6rem);line-height:1.12;letter-spacing:-.03em;max-width:20ch}
/* review card: the shared testimonial's 1.3rem quote is oversized in the hero
   aside (card ran ~588px tall) — restore the compact 1.02rem so it hugs content. */
/* hero review card — decorative quote-mark top-right BEHIND the text (absolute,
   doesn't push content), body-font lighter quote, author row = small avatar
   beside name/function, card pinned to the hero's bottom-right. Overrides the
   shared testimonial's layered base, hence unlayered. */
.dx--ru-vacature-hero .dx--ru-vacature-hero__aside{align-self:flex-end}
.dx--ru-vacature-hero .dx--ru-vacature-hero__aside .dx--ru-vacature-testimonial{display:block}
.dx--ru-vacature-hero .dx--ru-vacature-hero__aside .dx--ru-vacature-testimonial__quote-icon{position:absolute;z-index:0;top:clamp(14px,1.6vw,20px);right:clamp(16px,2vw,24px);font-size:clamp(1.3rem,2vw,1.7rem);color:var(--wz-pink-soft)}
.dx--ru-vacature-hero .dx--ru-vacature-hero__aside .dx--ru-vacature-testimonial__content{position:relative;z-index:1}
.dx--ru-vacature-hero .dx--ru-vacature-hero__aside .dx--ru-vacature-testimonial__quote{font-family:var(--wz-font-body);font-weight:400;font-size:1.02rem;line-height:1.55}
.dx--ru-vacature-hero .dx--ru-vacature-hero__aside .dx--ru-vacature-testimonial__author{display:flex;flex-direction:row;align-items:center;gap:14px}
.dx--ru-vacature-hero .dx--ru-vacature-hero__aside .dx--ru-vacature-testimonial__avatar{width:54px;height:54px;font-size:1.1rem;margin-bottom:0;border-width:2px}
.dx--ru-vacature-hero .dx--ru-vacature-hero__aside .dx--ru-vacature-testimonial__author-meta{display:flex;flex-direction:column;gap:2px}
/* vacancy single content is visible immediately — no scroll-reveal (it read as
   blank/slow on first paint). */
.single_job_listing .dx--ru-reveal,
.single_job_listing .dx--ru-reveal--stagger > *{opacity:1 !important;transform:none !important}
/* meta-badge icon: center the glyph (Impreza/FA glyph metrics vary slightly) */
.dx--ru-vacature-hero .dx--ru-vacature-hero__badge i{display:inline-flex;align-items:center;justify-content:center;width:16px;line-height:1}
.single_job_listing i[class*="icon-"]::before,
.single_job_listing .dx--ru-icon-circle i::before{font-family:fontawesome;font-weight:900;font-style:normal;display:inline-block}
.single_job_listing .icon-arrow-left::before{content:"\f060"}
.single_job_listing .icon-map-marker-alt::before{content:"\f3c5"}
.single_job_listing .icon-clock-o::before{content:"\f017"}
.single_job_listing .icon-money::before{content:"\f53a"}
.single_job_listing .icon-graduation-cap::before{content:"\f19d"}
.single_job_listing .icon-file-signature::before{content:"\f573"}
.single_job_listing .icon-quote-right::before{content:"\f10e"}
.single_job_listing .icon-close::before{content:"\f00d"}
/* recruiter contact icons (shared card; FA4 class names) */
.dx--ru-icon-circle i.fa-envelope::before{content:"\f0e0";font-family:fontawesome;font-weight:900}
.dx--ru-icon-circle i.fa-phone::before{content:"\f095";font-family:fontawesome;font-weight:900}
/* contact/eind-cta address row: fa-location-dot is an FA6 name (loaded face is FA5) → map the
   FA5 map-marker-alt glyph so the location circle isn't empty (contact + werken-bij eind-cta). */
.dx--ru-icon-circle i.fa-location-dot::before{content:"\f3c5";font-family:fontawesome;font-weight:900}

/* ── Apply modal form (real WPJM Applications form) — UNLAYERED.
   The layered @components copy (~1624) lost the pill inputs, white submit and
   privacy layout to Impreza's UNLAYERED us-assets rules (input[type=text]{background:none!important},
   input[type=submit]{color:inherit!important}); only unlayered + !important wins.
   Modal close × is also mapped here (the .single_job_listing icon map at 3965 doesn't
   reach the modal — it's a sibling after .single_job_listing closes). ── */
.dx--ru-vacature-modal__close i.icon-close::before{font-family:fontawesome;font-weight:900;font-style:normal;content:"\f00d";display:inline-block}
.dx--ru-vacature-modal .job-manager-application-form{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,20px) clamp(16px,1.8vw,28px);align-items:start;margin:0;
}
.dx--ru-vacature-modal .job-manager-application-form fieldset{display:flex;flex-direction:column;gap:7px;margin:0;padding:0;border:0}
/* float:none;width:100% resets WPJM core's classic label{float:left;width:25%} so labels
   (Mobiel nummer / E-mailadres) sit on one line — no longer forced to wrap to 2 lines. */
.dx--ru-vacature-modal .job-manager-application-form fieldset > label{
  display:block;float:none !important;width:100% !important;margin:0;line-height:1.25;text-transform:uppercase;
  font-family:var(--wz-font-body);font-size:.72rem;letter-spacing:.1em;font-weight:700;color:var(--wz-ink)
}
.dx--ru-vacature-modal .job-manager-application-form fieldset > .field{margin:0}
/* WPJM-Applications frontend.css forces div.field{width:70%} (unlayered) → full width. */
.dx--ru-vacature-modal .job-manager-application-form fieldset div.field:not(.full-line-checkbox-field){width:100% !important}
.dx--ru-vacature-modal .job-manager-application-form input[type=text],
.dx--ru-vacature-modal .job-manager-application-form input[type=email],
.dx--ru-vacature-modal .job-manager-application-form input[type=tel],
.dx--ru-vacature-modal .job-manager-application-form input[type=url],
.dx--ru-vacature-modal .job-manager-application-form .field input.input-text,
.dx--ru-vacature-modal .job-manager-application-form textarea{
  width:100% !important;box-sizing:border-box;background:var(--wz-paper) !important;
  border:1px solid var(--wz-line) !important;border-radius:var(--wz-radius-pill) !important;
  padding:13px 18px !important;line-height:1.3 !important;min-height:0 !important;
  font-family:var(--wz-font-body);font-size:.98rem;color:var(--wz-ink) !important;margin:0
}
.dx--ru-vacature-modal .job-manager-application-form input:focus,
.dx--ru-vacature-modal .job-manager-application-form textarea:focus{
  outline:none;border-color:var(--wz-pink) !important;box-shadow:0 0 0 3px rgba(var(--wz-pink-rgb),.15)
}
.dx--ru-vacature-modal .fieldset-cv,
.dx--ru-vacature-modal .fieldset-privacyverklaring-aanvaarden{grid-column:1 / -1}
/* privacy: ditch the redundant uppercase label; checkbox + consent text on one line.
   (needs .job-manager-application-form in the selector to outrank the general
   .job-manager-application-form fieldset>label{display:block} above — both unlayered). */
.dx--ru-vacature-modal .job-manager-application-form .fieldset-privacyverklaring-aanvaarden > label{display:none}
.dx--ru-vacature-modal .fieldset-privacyverklaring-aanvaarden > .field{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;margin-top:0}
.dx--ru-vacature-modal .fieldset-privacyverklaring-aanvaarden input[type=checkbox]{
  width:18px !important;height:18px !important;min-height:0 !important;margin:0 !important;flex:0 0 auto;
  accent-color:var(--wz-pink);border-radius:4px !important;padding:0 !important
}
.dx--ru-vacature-modal .fieldset-privacyverklaring-aanvaarden small.description{
  margin:0;font-size:.92rem;line-height:1.4;color:var(--wz-ink-soft);text-transform:none;letter-spacing:0
}
.dx--ru-vacature-modal .fieldset-privacyverklaring-aanvaarden small.description a{color:var(--wz-pink);text-decoration:underline;text-underline-offset:2px}
.dx--ru-vacature-modal .fieldset-tracking_fields,
.dx--ru-vacature-modal .fieldset-bevestig_email_hier{display:none !important}
.dx--ru-vacature-modal .job-manager-application-form p:has(> input[type=submit]){grid-column:1 / -1;margin:0}
.dx--ru-vacature-modal .job-manager-application-form input[type=submit],
.dx--ru-vacature-modal .job-manager-application-form button[type=submit],
.dx--ru-vacature-modal .job-manager-application-form .application_button{
  grid-column:1 / -1;width:100% !important;justify-content:center;cursor:pointer;
  background:var(--wz-pink) !important;color:#fff !important;border:0 !important;
  border-radius:var(--wz-radius-pill) !important;font-family:var(--wz-font-body);font-weight:600;font-size:1rem;
  padding:15px 28px !important;transition:background .2s ease
}
.dx--ru-vacature-modal .job-manager-application-form input[type=submit]:hover,
.dx--ru-vacature-modal .job-manager-application-form button[type=submit]:hover{background:var(--wz-pink-hover) !important}

/* mobile: let the long current-page crumb wrap instead of overflowing */
@media (max-width:480px){
  .dx--ru-vacature-hero .dx--ru-vacature-hero__crumbs{font-size:.8rem;overflow-wrap:anywhere}
}

/* Header clearance for page-local heroes that butt against the header.
   >1366px the header is in normal flow (relative, takes its own 130px), so the
   hero needs no margin. At ≤1366px the header becomes position:fixed (out of
   flow) and --header-height tracks its real height (100px → 60px), so the hero
   must offset by exactly that to avoid sliding under it. */
@media (max-width:1366px){
  .dx--ru-vacature-hero,
  .dx--su-zd-hero,
  .dx--su-wl-hero,
  .dx--su-ervsingle-hero{margin-top:var(--header-height)}
  .dx--su-legal-head{padding-top:calc(var(--header-height) + clamp(24px,4vw,48px))}
}

/* ── V2 mobile drawer (concept .dx--ru-mm-mobile) — opened by Impreza's burger
   at ≤768px; Impreza's own dropdown is suppressed so only this shows. Unlayered
   + high z-index so it sits above the fixed header/FAB. ── */
.l-header .w-nav.type_mobile .w-nav-list{display:none !important}
.dx--ru-mm-scrim{position:fixed;inset:0;z-index:9990;background:rgba(23,20,19,.45);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
.dx--ru-mm-scrim.is-open{opacity:1;visibility:visible}
.dx--ru-mm-mobile{position:fixed;inset:0 0 0 auto;width:min(440px,calc(100% - 52px));z-index:9991;background:var(--wz-white);box-shadow:-24px 0 48px -24px rgba(23,20,19,.3);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s ease;visibility:hidden}
.dx--ru-mm-mobile.is-open{transform:translateX(0);visibility:visible}
.dx--ru-mm-mobile .dx--ru-mm-mobile__top{display:flex;align-items:center;justify-content:space-between;padding:16px var(--wz-inset);border-bottom:1px solid var(--wz-line)}
.dx--ru-mm-mobile .dx--ru-mm-mobile__top img{height:32px;width:auto}
.dx--ru-mm-mobile .dx--ru-mm-mobile__actions{display:flex;align-items:center;gap:6px}
.dx--ru-mm-mobile .dx--ru-mm-mobile__iconbtn{width:42px;height:42px;border:0;background:none;color:var(--wz-ink);font-size:18px;display:grid;place-items:center;cursor:pointer}
.dx--ru-mm-mobile .dx--ru-mm-mobile__viewport{position:relative;flex:1;overflow:hidden}
.dx--ru-mm-mobile .dx--ru-mm-mobile__panel{position:absolute;inset:0;overflow-y:auto;padding:14px var(--wz-inset) 28px;transition:transform .3s ease;background:var(--wz-white)}
.dx--ru-mm-mobile .dx--ru-mm-mobile__sub{transform:translateX(100%)}
.dx--ru-mm-mobile .dx--ru-mm-mobile__sub.is-active{transform:translateX(0)}
.dx--ru-mm-mobile .dx--ru-mm-mobile__cta{width:100%;justify-content:center;margin-bottom:14px}
.dx--ru-mm-mobile .dx--ru-mm-mobile__row{display:grid;grid-template-columns:42px 1fr auto;grid-template-rows:auto auto;column-gap:14px;align-items:center;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--wz-line);padding:15px 4px;cursor:pointer;font-family:inherit;text-decoration:none}
.dx--ru-mm-mobile .dx--ru-mm-mobile__row .dx--ru-mm-rich__ic{grid-column:1;grid-row:1/3;width:42px;height:42px;border-radius:50%;background:var(--wz-pink-light);color:var(--wz-pink);display:grid;place-items:center;font-size:17px}
.dx--ru-mm-mobile .dx--ru-mm-mobile__row .dx--ru-mm-rich__t{grid-column:2;grid-row:1;font-family:var(--wz-font-body);font-weight:600;color:var(--wz-ink);font-size:1.02rem}
.dx--ru-mm-mobile .dx--ru-mm-mobile__row .dx--ru-mm-rich__d{grid-column:2;grid-row:2;font-size:.82rem;color:var(--wz-ink-mute)}
.dx--ru-mm-mobile .dx--ru-mm-mobile__row .dx--ru-arrow{grid-column:3;grid-row:1/3;align-self:center;color:var(--wz-pink)}
.dx--ru-mm-mobile .dx--ru-mm-mobile__link{display:flex;align-items:center;justify-content:space-between;width:100%;border-bottom:1px solid var(--wz-line);padding:18px 4px;font-family:var(--wz-font-body);font-weight:600;color:var(--wz-ink);font-size:1.02rem;text-decoration:none}
.dx--ru-mm-mobile .dx--ru-mm-mobile__link i{color:var(--wz-pink);font-size:.9rem}
.dx--ru-mm-mobile .dx--ru-mm-mobile__back{display:inline-flex;align-items:center;gap:10px;background:none;border:0;color:var(--wz-ink-soft);font-weight:600;font-family:inherit;font-size:.95rem;padding:8px 0 14px;cursor:pointer}
.dx--ru-mm-mobile .dx--ru-mm-mobile__back i{color:var(--wz-pink)}
.dx--ru-mm-mobile .dx--ru-mm-mobile__subtitle{font-family:var(--wz-font-display);font-size:1.3rem;letter-spacing:-.02em;margin:0 0 14px}
.dx--ru-mm-mobile .dx--ru-mm-mobile__card{background:var(--wz-pink-soft);border:1px solid var(--wz-pink-light);border-radius:var(--wz-radius-lg);padding:20px;margin:18px 0}
.dx--ru-mm-mobile .dx--ru-mm-mobile__card strong{display:block;font-family:var(--wz-font-display);margin-bottom:6px}
.dx--ru-mm-mobile .dx--ru-mm-mobile__card p{font-size:.86rem;color:var(--wz-ink-soft);line-height:1.5;margin:0 0 14px}
.dx--ru-mm-mobile .dx--ru-mm-mobile__contact{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.dx--ru-mm-mobile .dx--ru-mm-mobile__contact a{display:flex;align-items:center;gap:12px;padding:10px 0;color:var(--wz-ink-soft);font-weight:500;text-decoration:none}
.dx--ru-mm-mobile .dx--ru-mm-mobile__contact a i{color:var(--wz-pink);width:20px;text-align:center}
/* the mega-menu link lists reused inside the functies/werkvelden/regio sub-panels */
.dx--ru-mm-mobile .dx--ru-mm-links{display:flex;flex-direction:column}
.dx--ru-mm-mobile .dx--ru-mm-links a{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;border-bottom:1px solid var(--wz-line);color:var(--wz-ink);font-weight:500;text-decoration:none}
.dx--ru-mm-mobile .dx--ru-mm-links a .dx--ru-arrow{color:var(--wz-pink)}

/* P5 — reusable narrow content width: add .dx--su-narrow to any section to cap
   its inner at ~1050px (e.g. home "Waar sta jij nu"). */
.dx--su-narrow > .l-section-h{max-width:1050px}
/* FAQ built as a native WPBakery row (no .o-container) — constrain the column to the
   same narrow centred width the .dx--ru-faq .o-container reference uses (zij-instroom),
   so omscholen + traineeship-single FAQs center like the reference. */
.l-section.dx--ru-faq:not(:has(.o-container)) > .l-section-h > .g-cols > .wpb_column > .vc_column-inner{
  width:min(100% - 2 * var(--wz-inset), var(--wz-content-narrow));
  margin-inline:auto;
}
/* FAQ head: centre it like the zij-instroom reference (werken-en-leren used a plain
   left-aligned .dx--ru-section-header inside the narrow .o-container). */
.dx--ru-faq .dx--ru-section-header{text-align:center;align-items:center}
/* FAQ question row: the <summary> UA `display:list-item` beats the LAYERED .dx--ru-faq__q
   `display:flex`, so on sources whose q-text is an <h3> (werken-en-leren 820492 + the
   traineeship template 913850 — vs the <span> on zij-instroom/omscholen) the block heading
   drops below the + marker → "+ icon and title on two lines". Force the flex row UNLAYERED and
   neutralise the <h3>'s heading styling so both markups render identically to the reference. */
.dx--ru-faq .dx--ru-faq__q{display:flex !important}
.dx--ru-faq .dx--ru-faq__q-text{flex:1 1 auto !important;min-width:0;margin:0 !important;padding:0 0 0 .3125rem !important;font:inherit !important;color:inherit !important;text-align:left}
/* answer lists stay flat (no card, no native bullets) even inside WPBakery .wpb_text_column */
.dx--ru-faq .dx--ru-faq__a ul{background:none !important;border:0 !important}
.dx--ru-faq .dx--ru-faq__a ul li{list-style:none !important}
/* P2 — header Vacatures CTA arrow (concept shows one; html:3 markup has none) */
.l-header .menu-item-cta > .w-nav-anchor::after{content:"\2192";margin-left:9px;display:inline-block;transition:transform .25s ease;color:#fff}
.l-header .menu-item-cta > .w-nav-anchor:hover::after{transform:translateX(3px)}

/* ═══════════ WIDE-AUDIT 2026-06-01 — applied agent CSS specs (P1–P16 + page-specifics) ═══════════ */

/* ========== home-hdr-ftr ========== */
/* =========================================================================
   WIJ.ZORGEN — group: home-hdr-ftr — CSS for lead dev (paste into style.css,
   then regenerate assets). Uses existing --wz-* tokens; no !important.
   Won't render until asset regen (optimize_assets). Selectors verified
   against the live Impreza DOM via CDP getMatchedStyles.
   ========================================================================= */

/* Default heading colour = brand purple-dark (Impreza's stylesheet sets h1-h6 to
   #1A1A18 UNLAYERED, so this must be unlayered too to win). Headings with their own
   colour (white-on-dark .u-surface-purple-deep, pink em-accents, explicit card-title
   rules) are more specific and keep their colour. */
h2,h3{color:var(--wz-purple-deep)}

/* P1 — persona h3 sits too far below its eyebrow: the global
   h1..h6{padding-top:1.5rem} isn't reset when a heading follows an eyebrow
   <span>. Zero it on the persona card heading. Heading colour stays #1A1A18 (owner). */
.dx--ru-card--persona h3{padding-top:0;color:#1A1A18}

/* Home 'Even stilstaan' (herken): heading↔body had 0px gap (h2 margin-bottom
   is killed by the h*:last-child reset inside its .w-html wrapper). Add space
   above the body custom-field element. */
.dx--ru-herken .dx--ru-herken__text .w-post-elm.post_custom_field{margin-top:18px}

/* P7 — Ervaringen cards equal heights: cards render via us_post_list; the
   grid items stretch but the inner card doesn't fill them. Make it fill.
   (NB: the Paulien ervaring also lacks a featured image — content/data gap.) */
.dx--ru-ervaringen .w-grid-item{display:flex}
.dx--ru-ervaringen .w-grid-item .dx--ru-card--ervaring{height:100%;width:100%}
/* 3 ervaring cards can't fit 3-up below ~1080px (card min ~284px > the track width),
   so the old forced 3-col band overflowed across 800–1075px (home + professionals).
   Use ONE centred column across the whole 641–1080 tablet range; >1080px keeps
   Impreza's native 3-up. */
@media (min-width:641px) and (max-width:1080px){
  .dx--ru-ervaringen .w-grid-list{grid-template-columns:1fr !important;max-width:520px;margin-left:auto;margin-right:auto}
}

/* P7 — 'Lees alle ervaringen' is in a column flex (us_vwrapper); justify-content
   only centers vertically. Center it horizontally. (Arrow added by the P2 rule.) */
.dx--ru-ervaringen .w-vwrapper.dx--ru-ervaringen__foot{align-items:center}

/* P2 — arrow on us_btn-rendered .dx--ru-btn (hero pair, eind-cta pair,
   ervaringen foot). The :not(:has(.dx--ru-arrow)) guard skips html-coded
   buttons that already contain an inner arrow span, so no double arrows.
   Mirrors the existing header .menu-item-cta arrow (content:"\2192"). */
.dx--ru-btn.w-btn:not(:has(.dx--ru-arrow)) .w-btn-label::after{content:"\2192";margin-left:9px;display:inline-block;transition:transform .25s ease}
.dx--ru-btn.w-btn:not(:has(.dx--ru-arrow)):hover .w-btn-label::after{transform:translateX(3px)}

/* P3 — secondary 'extra left-space': Impreza .w-btn{padding:.8em 1.8em} was
   overriding .dx--ru-btn--ghost{padding:13px 4px}. Raise specificity (compound
   class) to beat .w-btn — no !important. Also standardize the button-row gap to
   the zij-instroom reference (10px 20px). */
.dx--ru-btn.dx--ru-btn--ghost{padding:13px 4px}
.dx--ru-hero__ctas,.dx--ru-eind-cta__left-actions{gap:10px 20px}

/* P1/P5 — Zorgorganisaties (werkgevers) heading: widen 18ch→22ch and remove
   the global heading padding-top so the eyebrow↔heading gap isn't ~46px. */
.dx--ru-werkgevers__head h2{max-width:22ch;padding-top:0}

/* P15b — Footer: brand (left) column too wide → ~105px dead space before the
   'Werkvelden' column. Tighten the first track (1.6fr → 1.2fr) so the gutter
   rhythm matches the link columns. NB live markup uses .dx--su-footer__* (the
   concept's .dx--ru-footer__inner selector does NOT apply here). */
.dx--su-footer .dx--su-footer__inner{grid-template-columns:1.1fr 1fr 1fr 1fr}

/* P14 — Header nav is already geometrically centered (menu in middle_center,
   center 719.5 vs page 720). Optional safety to keep it explicitly centered
   within its cell if the cell ever grows asymmetrically. */
.l-header .l-subheader-cell.at_center > .w-nav > .menu{justify-content:center}


/* ========== professionals — /professionals-in-de-zorg (page ID 820485) ========== */
/* =========================================================================
   PROFESSIONALS group — /professionals-in-de-zorg — wide QA CSS (2026-06-01)
   Place these UNLAYERED, after the existing end-of-file overrides (~line 3370),
   so they beat Impreza's unlayered defaults + the @layer components rules.
   Lead dev: add to style.css then regenerate assets (optimize_assets).
   ========================================================================= */

/* P11 — GCSP hero too much padding-top (desktop only; home hero is --home, NOT flagged).
   Source: .dx--ru-hero .dx--ru-hero__side{padding:216px ...} (@layer components).
   Tablet/mobile (<=1080 / <=640) keep their existing 160px/120px values. */
@media (min-width:1081px){
  .dx--ru-hero--gcsp .dx--ru-hero__side{padding-top:132px}
}

/* P13 — GCSP hero h1 too big (was 65.6px@1440). The base hero's unlayered clamp(...,4.1rem)
   beat the layered --gcsp rule; re-assert a smaller cap for the --gcsp variant unlayered.
   (The base hero 65.6px cap is intentional and kept for non-gcsp heroes.) */
.dx--ru-hero--gcsp h1{font-size:clamp(2.3rem,4.2vw,3.4rem);line-height:1.12;letter-spacing:-.036em;max-width:22ch}

/* "Even stilstaan" herken bullets: kill Impreza's unlayered disc + 40px indent + tighten.
   (The correct design already exists at style.css ~738-740 but is layered, so it loses.) */
.dx--ru-herken .dx--ru-herken__bullets{list-style:none;display:flex;flex-direction:column;gap:12px;margin:2px 0 24px;padding-left:0;margin-left:0;max-width:54ch}
.dx--ru-herken .dx--ru-herken__bullets li{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;margin:0;padding-left:0;list-style:none;color:var(--wz-ink-soft);font-size:.98rem;line-height:1.55}
.dx--ru-herken .dx--ru-herken__bullets li::before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:var(--wz-pink);margin-top:9px}
.dx--ru-herken .dx--ru-herken__bullets li::marker{content:""}

/* "Zo begeleiden we je naar een vaste werkplek" — section heading max-width 24ch. */
.dx--su-traject .dx--ru-section-header h2{max-width:24ch;margin-left:auto;margin-right:auto}

/* Ervaringen here = WHITE section (odd/even) with PAPER cards.
   The reusable ervaringen page-block brings its own u-surface-paper section; when nested in
   the page's u-surface-white wrapper, flip it (scoped so home/werken-en-leren are unaffected). */
.dx--ru-ervaringen.u-surface-white .dx--ru-ervaringen.u-surface-paper{background:transparent}
.dx--ru-ervaringen.u-surface-white .dx--ru-card--ervaring{background:var(--wz-paper);border:1px solid var(--wz-line)}

/* Ervaringen section heading max-width 26ch (the --center header is uncapped at ~line 1994). */
.dx--ru-ervaringen .dx--ru-section-header h2{max-width:26ch;margin-left:auto;margin-right:auto}


/* ========== instroom-A (/zij-instroom id 820491, /omscholen-zorg id 820494) ========== */
/* ============================================================
   instroom-A CSS — /zij-instroom (820491) + /omscholen-zorg (820494)
   Lead dev: PLACE THIS UNLAYERED (after the @layer{...} blocks, e.g.
   near the existing header-arrow rules ~line 3746). The Impreza rules
   these override are all UNLAYERED and beat layered overrides regardless
   of specificity, so a layered placement will NOT take effect.
   (Items P8 + the checked-ok ones aside, all targets verified vs the
   live Impreza DOM via CDP getMatchedStyles.)
   ============================================================ */

/* P1 (+ zij P5 22ch) — eind-cta: kill the unlayered Impreza h2 padding-top
   (h1..h6{padding-top:1.5rem}=24px) so eyebrow->heading isn't oversized;
   widen heading to 22ch (zij ask); add real heading->body breathing room. */
.dx--ru-eind-cta .dx--ru-eind-cta__left h2{padding-top:0;max-width:22ch;margin-bottom:24px}

/* P2 — hero CTA buttons (us_btn, label-only) get a → arrow, mirroring the
   shipped header-CTA arrow. Scoped to hero so eind-cta arrows don't double. */
.dx--ru-hero__ctas .w-btn .w-btn-label{display:inline-flex;align-items:center}
.dx--ru-hero__ctas .w-btn .w-btn-label::after{content:"\2192";margin-left:9px;display:inline-block;transition:transform .25s ease}
.dx--ru-hero__ctas .w-btn:hover .w-btn-label::after{transform:translateX(3px)}

/* P3 — hero CTA row: remove the unlayered .w-hwrapper child margin
   (.w-hwrapper>:not(:last-child){margin-inline-end:1.2rem}=19.2px) that
   stacks on the flex gap:12px (~31px). Leaves only the 12px gap. */
.dx--ru-hero__ctas.w-hwrapper > :not(:last-child){margin-inline-end:0}
.dx--ru-hero__ctas .w-btn-wrapper{margin:0}

/* P6 — omscholen accordion <ul>: drop the unlayered Impreza
   ul{margin-inline-start:2.5rem}=40px so the list aligns with the
   body paragraphs (single pink bullet from the existing P6 fix stays). */
.dx--ru-verschillen--cta .dx--ru-verschillen--cta__item-detail ul,
.dx--ru-verschillen--cta .dx--ru-verschillen--cta__item-detail-list{margin-inline-start:0;margin-left:0}

/* P8 — omscholen "de eerste stap zet je samen" card: tighten
   heading->body (33px) and body->button (58px). */
.dx--ru-verschillen--cta .dx--ru-verschillen--cta__cta{gap:0 24px}
/* batch 8 — re-assert above Impreza's unlayered h-margins / p-margins / list-indent */
.dx--ru-verschillen--cta .dx--ru-verschillen--cta__item-title{margin:0 !important}
.dx--ru-verschillen--cta .dx--ru-verschillen--cta__cta-body{margin-bottom:20px !important}
.dx--ru-lead:has(+ .dx--ru-herken__bullets){margin-bottom:12px}
.dx--su-menselijk-left h2{padding-top:0}
.dx--su-nhz-list{margin-left:0;padding-left:0}
.dx--ru-verschillen--cta .dx--ru-verschillen--cta__cta-text h3{margin:0}
.dx--ru-verschillen--cta .dx--ru-verschillen--cta__cta-actions{margin-top:0}


/* ========== instroom-B (/werken-en-leren id=820492, /werken-in-de-zorg-zonder-diploma id=820493, /studenten-in-de-zorg id=820487 = the studenten/bijbanen hero page) ========== */
/* ============================================================
   WIJ.ZORGEN — instroom-B group CSS (lead dev to paste into style.css)
   Pages: /werken-en-leren, /werken-in-de-zorg-zonder-diploma, /studenten-in-de-zorg
   Diagnosed against the real Impreza DOM (CDP getMatchedStyles); uses --wz-* tokens.
   NOTE: under optimize_assets these will not render until assets are regenerated.
   ============================================================ */

/* P10 — hero eyebrow/breadcrumb on one line: make the back-link block-level so the
   following eyebrow/context-tag drops to its own line (WL, ZD, Studenten heroes). */
.dx--ru-hero__context-back,
.dx--su-wl-hero .dx--ru-hero__context-back,
.dx--su-zd-hero .dx--ru-hero__context-back {
  display: flex;
  width: fit-content;
}

/* WL hero — 2/3 + 1/3 split ONLY on desktop. Unconditional before, it kept the 2-col
   grid on mobile and collapsed the copy column to 0px (every word wrapped); the layered
   ≤1120 1fr stack now wins below this breakpoint. */
@media (min-width:1121px){
  .dx--su-wl-hero .dx--su-zd-hero__inner{grid-template-columns:minmax(0,2fr) minmax(300px,1fr)}
}
/* WL hero — title not over-narrow (layered 12ch wrapped to 4 lines on mobile);
   kill the blank top bar; lock the context-back link colour. */
.dx--su-wl-hero h1{max-width:22ch}
.dx--su-wl-hero{padding-top:0!important}
.dx--su-wl-hero .dx--ru-hero__context-back{color:var(--wz-on-dark-2)!important}

/* WL hero — question line max-width 36ch */
.dx--su-wl-hero__question {
  max-width: 36ch;
}

/* ZD hero — title max-width 22ch (was wrapping to 3 lines) */
.dx--su-zd-hero h1 {
  max-width: 22ch;
}

/* ZD mogelijkheden — keep 'zonder diploma' on one line (em was orphan-breaking) */
.dx--ru-verschillen--cta__intro h2 em {
  white-space: nowrap;
}

/* ZD mogelijkheden accordion — remove residual left indent.
   A late generic {ul} margin-inline-start:2.5rem (logical) was winning over the
   class rule's physical margin-left:0 — zero the logical longhand explicitly. */
.dx--su-zd-mogelijkheden .dx--ru-verschillen--cta__item-detail-body ul {
  margin-inline-start: 0;
  padding-inline-start: 0;
}

/* P11 — shared gcsp hero too much padding-top (216px -> 150px).
   SHARED: also affects zij-instroom/professionals/functies (intended per P11). */
.dx--ru-hero .dx--ru-hero__side {
  padding-top: 150px;
}
/* Mobile: the fixed header is only ~60px, so the hero needs far less top padding.
   `body` prefix (0,2,1) wins over every per-variant .dx--ru-hero--* side rule (0,2,0). */
@media (max-width:640px){
  body .dx--ru-hero .dx--ru-hero__side{padding-top:80px}
}

/* P2 — hero us_btn arrows (Impreza buttons render label only) + a touch more width.
   Same ::after approach the lead dev shipped for the header Vacatures arrow. */
.dx--ru-hero__ctas .dx--ru-btn--primary > .w-btn-label::after {
  content: " \2192";
}
.dx--ru-hero__ctas .dx--ru-btn > .w-btn {
  padding-left: 1.4em;
  padding-right: 1.4em;
}

/* P1/P13 — eind-cta (shared block 915098): heading too big + gaps.
   Shared with ZD last CTA + fenna via .dx--ru-eind-cta__left h2 (intended). */
.dx--ru-eind-cta .dx--ru-eind-cta__left h2 {
  font-size: clamp(2rem, 3vw, 2.5rem);
  max-width: 22ch;
  margin-bottom: 18px;
}
.dx--ru-eind-cta__left .dx--ru-eyebrow {
  margin-bottom: 10px;
}
.dx--ru-eind-cta__left p:not(.dx--ru-eind-cta__trust) {
  max-width: 60ch; /* ZD last-cta body */
}

/* P7 — ervaringen reusable block (also home + professionals): white surface,
   pink function line, right-aligned read-link, centered button + arrow.
   Cards already render equal height (547px) and the foot is already centered. */
.dx--ru-ervaringen.u-surface-paper {
  background: #fff;
}
.dx--ru-ervaringen .dx--ru-ervaring__functie,
.dx--ru-ervaringen [class*="functie"] {
  color: var(--wz-pink);
}
.dx--ru-ervaringen .dx--ru-ervaring__readlink,
.dx--ru-ervaringen [class*="lees"] {
  text-align: right;
}
.dx--ru-ervaringen__foot .dx--ru-btn > .w-btn-label::after {
  content: " \2192";
}

/* ZD sticky 'scroll-lock' — OPTIONAL lead-dev lever (layout decision):
   sticky intro only visibly locks when the accordion list exceeds the viewport.
   A min-height floor gives it scroll room even with items closed. */
.dx--su-zd-mogelijkheden .dx--ru-verschillen--cta__list {
  min-height: 80vh;
}

/* ========== vacancy-cluster ========== */
/* ============================================================================
   vacancy-cluster (functie / region / werkveld single) — append at END of
   style.css, UNLAYERED. These pages' per-variant hero/accordion rules live in
   @layer components, but duplicate generic .dx--ru-hero h1 (~L3370) + Impreza
   h2{font-size:var(--h2-font-size)} are UNLAYERED and win. Appending unlayered
   (after L3370) restores the concept's intended per-variant sizing by source
   order. Uses existing tokens; no blind !important.
   ============================================================================ */

/* P13 — hero h1 too big (live 65.6px): unlayered generic .dx--ru-hero h1 (4.1rem)
   defeats the layered per-variant rule. Restore concept intent (functie/werkveld
   3rem=48px, gcsp/region 3.2rem). Equal specificity → later source order wins. */
.dx--ru-hero--werkveld h1,
.dx--ru-hero--functie h1{font-size:clamp(1.9rem,3.4vw,3rem)}
.dx--ru-hero--gcsp h1{font-size:clamp(2.2rem,4vw,3.2rem)}

/* P11 — hero too much padding-top (live 184px functie/werkveld, 216px region).
   NOTE: CONFLICTS with concept (concept sets 184px); applied per owner remark. */
.dx--ru-hero--werkveld .dx--ru-hero__side,
.dx--ru-hero--functie .dx--ru-hero__side{padding-top:clamp(120px,11vw,148px)}
.dx--ru-hero--gcsp .dx--ru-hero__side{padding-top:clamp(120px,12vw,160px)}

/* P2 — [us_btn] buttons render <a><span class="w-btn-label">…</span></a> with NO
   arrow span. Add a → after the label on primary/ghost/on-purple (NOT outline,
   per concept). Same proven pattern as the header Vacatures CTA. */
.dx--ru-btn--primary > .w-btn-label::after,
.dx--ru-btn--ghost > .w-btn-label::after,
.dx--ru-btn--on-purple > .w-btn-label::after{content:"\2192";margin-left:9px;display:inline-block;transition:transform .25s ease}
.dx--ru-btn--primary:hover > .w-btn-label::after,
.dx--ru-btn--ghost:hover > .w-btn-label::after,
.dx--ru-btn--on-purple:hover > .w-btn-label::after{transform:translateX(3px)}

/* "Past … bij jou?" — questions <ul> carries a 40px left margin (WPBakery/Impreza
   ul default) → align flush. */
.dx--ru-past .dx--ru-past__questions,
.dx--ru-past .w-html .dx--ru-past__questions{margin-left:0;padding-left:0}

/* "Past … echt bij jou?" — pgvm check/cross <ul> carries the same 40px Impreza ul
   indent → align flush like the questions list above. */
.dx--ru-pgvm .dx--ru-pgvm__list,
.dx--ru-pgvm .w-html .dx--ru-pgvm__list{margin-left:0;padding-left:0}

/* Region — intro accordion headings are <h2> (wz_intro_accordion) so the unlayered
   Impreza h2 size (48px) wins over the layered .dx--ru-verschillen--cta__item-title
   clamp. Match the functie/werkveld <h3> size. */
.dx--ru-verschillen--cta .dx--ru-verschillen--cta__list h2.dx--ru-verschillen--cta__item-title{font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.2}

/* Werkveld — "mogelijke functies": ~104px gap between the intro ("Afhankelijk van
   jouw ervaring…") and the cards grid (head margin-bottom 56px + WPBakery column
   gap). Reduce → ~48px. */
.dx--ru-functies .dx--ru-functies__head{margin-bottom:clamp(20px,2vw,28px)}
.dx--ru-functies > .l-section-h > .g-cols > .wpb_column{margin-bottom:0}

/* ========== overview-misc (/vacatures/regio/alle-regios, /vacatures, /zorgpersoneel-gezocht) ========== */
/* ===== overview-misc group — wide QA pass 2026-06-01 ===== */
/* All items below diagnosed against the real Impreza DOM; ships after asset regen. */

/* --- /vacatures/regio/alle-regios (hero --gcsp) --- */
/* P10: breadcrumb (__context-back) + pill (__context-tag) were BOTH inline-flex
   inside a single .w-html block → flowed on ONE line. Make them block-level flex
   so each takes its own line (stacked). Scoped to --gcsp so werkveld/functie heroes
   (which already get their own margin overrides) are untouched. */
.dx--ru-hero--gcsp .dx--ru-hero__context-back,
.dx--ru-hero--gcsp .dx--ru-hero__context-tag{display:flex}
/* P11: hero left column had the shared 216px padding-top → too much empty space
   above the breadcrumb. Trim on --gcsp (shared with Professionals, which also wants less). */
/* gcsp + overview default to a contained 1500 row (no width_full); make the hero
   full-width so the left content reaches the header inset like every other hero
   (the ervaringen --story hero stays centred → excluded). Unlayered to beat
   Impreza's unlayered .l-section-h max-width. */
.l-section.dx--ru-hero--gcsp,
.l-section.dx--ru-hero--overview:not(.dx--ru-hero--story){padding-left:0;padding-right:0}
.dx--ru-hero--gcsp > .l-section-h,
.dx--ru-hero--overview:not(.dx--ru-hero--story) > .l-section-h{max-width:none;padding-left:var(--wz-inset);padding-right:0}
.dx--ru-hero--gcsp .dx--ru-hero__side{padding-top:150px;padding-bottom:104px;padding-left:0}
/* gcsp hero on the stacked (mobile/tablet) layout: image goes full-bleed edge-to-edge,
   so the l-section-h + visual carry NO side padding and the text inset moves onto __side;
   no bottom gap under the text before the image. */
@media (max-width:1080px){
  .dx--ru-hero--gcsp > .l-section-h{padding-left:0;padding-right:0}
  .dx--ru-hero--gcsp .dx--ru-hero__side{padding-left:var(--wz-inset);padding-right:var(--wz-inset);padding-bottom:0}
  .dx--ru-hero--gcsp .dx--ru-hero__visual{padding-left:0;padding-right:0}
}

/* --- /zorgpersoneel-gezocht hero restyle ("looks like shit") --- */
/* Root cause: .dx--su-zpg-hero{display:grid} (style.css ~3361) had no columns →
   one full-width column; __side took all 1440px, __visual collapsed to h:0, and the
   absolute herocard (top:50% of the zero-height visual) floated bottom-left over the side.
   Restore a true 2-col split + give the visual height so the card centers in the right col. */
.dx--su-zpg-hero{grid-template-columns:1fr 1fr;align-items:stretch}
.dx--su-zpg-hero .dx--ru-hero__side{padding-top:148px;padding-bottom:96px}
.dx--su-zpg-hero .dx--ru-hero__visual{min-height:100%}
@media (max-width:1080px){
  .dx--su-zpg-hero{grid-template-columns:1fr}
  .dx--su-zpg-hero .dx--ru-hero__side{padding-top:120px;padding-bottom:0}
  .dx--su-zpg-hero .dx--ru-hero__visual{min-height:0;display:flex;padding:0 var(--wz-inset) 48px}
  .dx--su-zpg-hero .dx--ru-hero__visual .dx--ru-hero__placeholder-label{display:none}
  /* form card flows under the checklist instead of floating over a zero-height visual */
  .dx--su-zpg-herocard{position:static;transform:none;width:100%;max-width:520px;margin:0 auto}
}

/* --- /zorgpersoneel-gezocht lowest CTA → WHITE, cards paper --- */
/* eind-cta = shared us_page_block 915098 hardcoding u-surface-paper-warm (7 pages),
   so can't edit the block. Scope to this page; mirrors the existing
   `.u-surface-white .dx--ru-contact-card{background:var(--wz-paper)}` pattern. */
.page-id-820486 .dx--ru-eind-cta{background:var(--wz-white)}
.page-id-820486 .dx--ru-eind-cta .dx--ru-contact-card{background:var(--wz-paper)}

/* ========== content-legal ========== */
/* ============================================================
   GROUP: content-legal  (over-ons, ai-recruiter-fenna,
   algemene-voorwaarden, privacy-statement)
   Append to style.css OUTSIDE @layer where noted — Impreza's
   unlayered h2 typography beats any @layer rule regardless of
   specificity, so the h2 overrides MUST be unlayered.
   Tokens: --wz-pink #D4537E, --wz-pink-soft #FCF5F8,
   --wz-ink, --wz-ink-soft, --wz-content-max 1500px.
   ============================================================ */

/* ---- LEGAL pages (P16) ---------------------------------- */

/* breadcrumb (back-link) + eyebrow currently sit on ONE line
   because .dx--ru-eyebrow is display:inline-flex. Force the
   eyebrow to its own line under the back-link.  (CONFLICTS w/
   concept, which leaves them inline.) */
.dx--su-legal-head .dx--ru-hero__context-back{ display:flex; }
.dx--su-legal-head .dx--ru-eyebrow{ display:flex; }

/* legal section headings render at Impreza's 48px because the
   unlayered `h2{font-size:var(--h2-font-size)}` beats the
   layered .dx--su-legal-prose h2 rule. Re-apply the concept
   size UNLAYERED so it actually wins. */
.dx--su-legal-prose .dx--su-legal-prose__article h2,
.dx--su-legal-prose h2{
  font-size:clamp(1.5rem,2.4vw,1.9rem);
  letter-spacing:-.026em;line-height:1.14;margin-bottom:16px;
}

/* ul: single column + single bullet.
   (CONFLICTS w/ concept, which uses a 2-col grid — owner's
   list wins: long alg-vw clauses look bad in 2 narrow cols.)
   Double-bullet fix = same as P6: the disc is on the <li>
   itself (Impreza), not the <ul>, so list-style:none on the
   ul alone leaves the native marker → set it on the li too,
   keep the single pink ::before. */
.dx--su-legal-prose .dx--su-legal-prose__article ul{
  display:block;margin:18px 0 0;
}
.dx--su-legal-prose .dx--su-legal-prose__article ul li,
.dx--su-legal-prose .dx--su-legal-prose__article ol li,
.dx--su-legal-prose li{
  list-style:none;position:relative;padding-left:18px;
  margin-bottom:8px;color:var(--wz-ink-soft);
  font-size:1rem;line-height:1.7;
}
.dx--su-legal-prose .dx--su-legal-prose__article li::before{
  content:"";position:absolute;top:.72em;left:0;
  width:5px;height:5px;border-radius:50%;background:var(--wz-pink);
}

/* ---- OVER-ONS ------------------------------------------- */

/* hero h1 18ch → 22ch (owner). */
.dx--ru-hero--story h1{ max-width:22ch; }

/* ── batch-11 unlayered overrides (Impreza-contested props → must be unlayered) ── */
/* Vacancy single hero */
.dx--ru-vacature-hero .dx--ru-vacature-hero__inner h1{max-width:24ch;padding-top:0 !important}
.dx--ru-vacature-hero .dx--ru-vacature-hero__meta{margin:20px 0 25px !important}
/* bijzonder text h2 — kill Impreza's h2 padding-top */
.dx--ru-bijzonder .dx--ru-bijzonder__text h2{padding-top:0 !important}
.dx--ru-bijzonder .dx--ru-bijzonder__title{padding-top:0 !important;margin-bottom:3px !important}
/* cf7 aside h2 — kill Impreza's h2 padding-top (max-width already removed in the layered rule) */
.dx--ru-cf7 .dx--ru-cf7__aside h2{padding-top:0 !important}
/* vacancy card sfeer line — bottom breathing room */
.dx--ru-card--vacancy .dx--ru-card--vacancy__sfeer{margin-bottom:15px !important}
/* werken-en-leren "Waarom werken en leren" (verdieping): paper bg (it sat white-on-white
   below a white ervaringen section) + title pinned to 2rem. */
.dx--su-verdieping.u-surface-white{background:var(--wz-paper)}
.dx--su-verdieping .dx--ru-section-header h2{font-size:2rem}
/* bijzonder ("De voordelen") image fills its box — WP Smush lazyload sets an unlayered
   !important aspect-ratio on .lazyload that shrank the img inside its column; override it
   + restore the height chain through any .w-image wrapper. */
.dx--ru-bijzonder .dx--ru-bijzonder__visual{position:relative}
.dx--ru-bijzonder .dx--ru-bijzonder__visual .w-image,
.dx--ru-bijzonder .dx--ru-bijzonder__visual .w-image-h{height:100%}
.dx--ru-bijzonder .dx--ru-bijzonder__visual img{width:100% !important;height:100% !important;aspect-ratio:auto !important;object-fit:cover !important}
/* werken-en-leren traject = 9 stops in the professionals-style dx--su-traject (was the
   tablet-horizontal-scroll dx--su-aanbod-process). Keep 9 cols on desktop; below desktop
   stack to one clean vertical column (no sideways-scroll band). */
.dx--su-traject.dx--su-wl-9{--wz-stap-cols:9}
.dx--su-traject.dx--su-wl-9 .dx--ru-traject__title{text-transform:none}
@media (max-width:1200px){
  .dx--su-traject.dx--su-wl-9 .dx--ru-traject__bar{grid-template-columns:1fr;gap:32px;padding-top:0;overflow:visible}
}
/* ── batch-11 (cont.) — unlayered overrides ── */
/* vacancy feed rows: no border-bottom (Impreza li border leaked through) */
.dx--su-vacancies-list ul.job_listings > li.dx--ru-vlist__item{border-bottom:none !important}
/* top search: search_location is the first cell on the location/regio bar → no left divider */
.dx--su-vacatures-top-search .wpjmsf-field-grid-item-search_location{border-left:0 !important}
/* feed intro head (the vlist__head that pairs with a top-filters bar) — centred + narrow.
   The owner's `.dx--su-top-filters-container .dx--ru-vlist__head` descendant selector matched
   nothing (they're sibling columns); :has on the row is the working equivalent. */
.dx--su-top-filters-container .dx--ru-vlist__head,
.dx--ru-vlist:has(.dx--su-top-filters-container) .dx--ru-vlist__head{text-align:center;align-items:center;max-width:60ch;margin:0 auto 25px}
/* ervaring single — pullquote size (incl. Impreza's .w-text-h inner) */
.dx--ru-ervaring-body .dx--ru-ervaring-body__pullquote,
.dx--ru-ervaring-body .dx--ru-ervaring-body__pullquote .w-text-h{font-size:clamp(1.5rem,2.6vw,1.75rem)}
/* kill Impreza's h2 padding-top on ervaring-single prose + the ervaringen section header */
.dx--ru-ervaring-body .dx--ru-ervaring-body__prose h2{padding-top:0}
.dx--ru-ervaringen .dx--ru-section-header h2{padding-top:0}
/* ervaring-single back link colour (Impreza's unlayered a colour was winning) */
.dx--su-ervsingle-hero .dx--su-ervsingle-hero__back{color:var(--wz-on-dark-1) !important}

/* "ons verhaal" mission h2 18ch → 22ch (owner). */
.dx--ru-over-ons-mission .dx--ru-over-ons-mission__narrative h2{
  max-width:22ch;
}

/* mission value-card heading→body spacing too large (P8):
   16px → 7px (concept value). */
.dx--ru-over-ons-mission .dx--ru-over-ons-mission__value h3{
  margin-bottom:7px;
}

/* ---- EIND-CTA buttons  (over-ons + fenna; P2/P3) -------- */

/* The eind-cta buttons are Impreza us_btn (.w-btn) — they have
   NO hardcoded .dx--ru-arrow span (unlike the raw hero <a>).
   Add the arrow to the PRIMARY us_btn only, via ::after on the
   label. Raw hero buttons are .dx--ru-btn (no .w-btn) so they
   are untouched (no double arrow). */
.dx--ru-eind-cta .dx--ru-btn--primary.w-btn .w-btn-label::after{
  content:"\2192";          /* → */
  display:inline-block;margin-left:.5em;
  transition:transform .25s ease;
}
.dx--ru-eind-cta .dx--ru-btn--primary.w-btn:hover .w-btn-label::after{
  transform:translateX(3px);
}

/* button-row gap too large: Impreza us_hwrapper defaults to
   --hwrapper-gap:1.2rem (~19px); concept actions gap is 14px. */
.dx--ru-eind-cta .dx--ru-eind-cta__left-actions.w-hwrapper{
  --hwrapper-gap:14px;
}

/* ---- FENNA  (P13) --------------------------------------- */

/* eind-cta heading too big: Impreza's unlayered h2 forces 48px,
   beating the layered .dx--ru-eind-cta__left h2 clamp. Re-apply
   a smaller CTA-weight clamp UNLAYERED so it wins. Also affects
   over-ons eind-cta (same component) — intended. */
.dx--ru-eind-cta .dx--ru-eind-cta__left h2{
  font-size:clamp(1.9rem,3vw,2.6rem);
  letter-spacing:-.032em;line-height:1.06;
}

/* ─────────── conflict items (vacancy hero padding P11 + breadcrumb stack P10) ─────────── */

/* ===== Apply two owner CSS-leaning remarks on t ===== */
/* ============================================================================
   Append at END of Impreza-child/style.css (after ~L4177), UNLAYERED, so equal
   specificity + later source order wins over the prior P11 rules (L4007-4011 /
   L4052). Uses existing tokens; no blind !important. NOTE: P11 padding values go
   FURTHER than the concept (concept pt 184px functie/werkveld, 216px --gcsp) —
   owner's list WINS over concept.
   ============================================================================ */

/* P11 (owner re-flag) — functie/werkveld/--gcsp hero still has too much top
   padding; the right-hand hero CARD (.__badge on functie/werkveld, .__testimonial
   on --gcsp) is position:absolute;bottom:32px and is anchored to the BOTTOM of the
   stretched hero row, so it drops below the fold. Trim top+bottom padding, cap the
   100vh/92vh min-height, and (only where the long titles need it) ease the h1 +
   clamp the lead so the card clears the fold on laptop heights (verified card
   bottom <= viewport at 1280/1366/1440/1536). Scoped >=1081px so the mobile stack
   (@media max-width:1080px) is untouched. */
@media (min-width:1081px){
  .dx--ru-hero--werkveld,
  .dx--ru-hero--functie{min-height:min(86vh,720px)}
  .dx--ru-hero--werkveld .dx--ru-hero__side,
  .dx--ru-hero--functie .dx--ru-hero__side{
    padding-top:0;
    padding-bottom:clamp(36px,3.5vw,52px);
  }
  .dx--ru-hero--werkveld h1,
  .dx--ru-hero--functie h1{
    font-size:clamp(1.7rem,2.8vw,2.4rem);
    line-height:1.08;
    margin-bottom:16px;
  }
  .dx--ru-hero--werkveld .dx--ru-hero__lead,
  .dx--ru-hero--functie .dx--ru-hero__lead{
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .dx--ru-hero--gcsp{min-height:min(82vh,720px)}
  .dx--ru-hero--gcsp .dx--ru-hero__side{
    padding-top:clamp(104px,9vw,124px);
    padding-bottom:clamp(48px,5vw,80px);
  }
}

/* P10 — breadcrumb (.dx--ru-hero__context-back <a>) + pill
   (.dx--ru-hero__context-tag <span>) are inline-flex sibling elements with no block
   wrapper, so they flow on ONE line. Force each onto its own line (block-level flex,
   not stretched). Hardens the existing --gcsp stack (L4048-4049) and extends to the
   --overview hero defensively. Covers alle-regios (820568); /vacatures (820515) has
   no context pair today. */
.dx--ru-hero--gcsp .dx--ru-hero__context-back,
.dx--ru-hero--gcsp .dx--ru-hero__context-tag,
.dx--ru-hero--overview .dx--ru-hero__context-back,
.dx--ru-hero--overview .dx--ru-hero__context-tag{
  display:flex;
  align-self:flex-start;
}

/* S3-14 — box the header CONTENT to the boxed hero/section width (1500px, centred)
   so the logo + topbar tag + nav sit at the same left edge as the boxed hero/section content.
   Full-width background bars stay (only the inner .l-subheader-h content is boxed).
   The topbar carries .width_full, whose Impreza rule forces max-width:none !important,
   so the topbar override must use !important to keep the topbar tag aligned with the logo. */
/* Header top + middle rows run full-width with the --wz-inset side gap (the rows
   already carry it), i.e. the same content width as the home hero — not capped to
   the 1500 content box like the page sections. */
.l-header .l-subheader.at_middle .l-subheader-h{max-width:none;margin-left:0;margin-right:0}
.l-header .l-subheader.at_top .l-subheader-h{max-width:none !important;margin-left:0;margin-right:0}

/* ===== PHASE-2 AUDIT 2026-06-02 (S2) — unlayered overrides ===== */

/* S2-01 — herken heading spacing + wider cap (beats Impreza's unlayered heading rules). */
.dx--ru-herken .dx--ru-herken__text h2{max-width:26ch;margin-bottom:24px}
.dx--ru-herken .dx--ru-herken__text .post_custom_field.herkenning_body{margin-top:0}

/* S2-02 — home ervaringen stays paper (restores traject/ervaringen contrast vs the unscoped P7 #fff). */
.page-id-912669 .dx--ru-ervaringen.u-surface-paper{background:var(--wz-paper)}

/* S2-05 — centre the tussenblok heading + body inside the WPBakery column wrapper (/ervaringen). */
.dx--ru-tussenblok h2{margin-left:auto;margin-right:auto}
.dx--ru-tussenblok p{margin-left:auto;margin-right:auto}

/* S2-06 — mobile header order: Vacatures CTA left, burger right. */
@media (max-width:900px){
  .l-header .l-subheader.at_middle .l-subheader-cell.at_right{display:flex;align-items:center;gap:10px}
  .l-header .l-subheader.at_middle .l-subheader-cell.at_right > .w-html{order:1}
  .l-header .l-subheader.at_middle .l-subheader-cell.at_right > .w-nav{order:2}
}
/* tighten the Vacatures-CTA ↔ burger gap (Impreza's .header_hor at_right child margin
   is 1.4rem, far too wide next to the burger when the menu is closed). */
.header_hor .l-subheader-cell.at_right > *{margin-left:.2rem}

/* S2-07 — tighten the middle header row to hug the logo (was a 90px band around a 45px logo). */
@media (min-width:901px){
  .l-header .l-subheader.at_middle,
  .l-header .l-subheader.at_middle .l-subheader-h,
  .l-header .l-subheader.at_middle .l-subheader-cell{min-height:66px;height:66px}
}
.l-header .l-subheader.at_middle .w-img,
.l-header .l-subheader.at_middle img{margin-top:0}

/* S2-12 — footer columns stack on mobile (unlayered, beats the dead layered media rules);
   restore the edge gutter that S2-11 removed from the desktop inner. */
@media (max-width:1080px){
  .dx--su-footer .dx--su-footer__inner{grid-template-columns:1fr 1fr;gap:32px;padding-left:var(--wz-inset);padding-right:var(--wz-inset)}
  .dx--su-footer .dx--su-footer__bottom-inner{padding-left:var(--wz-inset);padding-right:var(--wz-inset)}
}
@media (max-width:640px){
  .dx--su-footer .dx--su-footer__inner{grid-template-columns:1fr;gap:28px;padding-left:var(--wz-inset);padding-right:var(--wz-inset)}
  .dx--su-footer .dx--su-footer__bottom-inner{flex-direction:column;align-items:flex-start;gap:14px;padding-left:var(--wz-inset);padding-right:var(--wz-inset)}
}

/* S2-13 — werkveld/functie hero h1: stop the generic .dx--ru-hero h1 max-width:18ch leaking in. */
.dx--ru-hero--werkveld h1,
.dx--ru-hero--functie h1{font-size:clamp(1.9rem,3.4vw,3rem);max-width:none}

/* S2-18 — ervaring-single hero h1 (beats Impreza's unlayered h1{font-size:var(--h1-font-size)}). */
.dx--su-ervsingle-hero h1{font-size:clamp(2.2rem,3.6vw,3.4rem)}

/* S2-19 — werkveld twijfel grid rebalance to 1.2fr/1fr + vertical centre (only justified !important:
   beats WPBakery's unlayered .g-cols column template + valign_top). */
.dx--ru-twijfel > .l-section-h > .g-cols{grid-template-columns:1.2fr 1fr !important;gap:64px;align-items:center}
.dx--ru-twijfel .dx--ru-twijfel__head,
.dx--ru-twijfel .dx--ru-twijfel__body{display:flex;flex-direction:column;justify-content:center}
@media (max-width:900px){.dx--ru-twijfel > .l-section-h > .g-cols{grid-template-columns:1fr !important;gap:28px;align-items:start}}

/* S2-33 — twijfel column inner: drop the WPBakery via_grid 31px inset so columns fill their track. */
.dx--ru-twijfel .dx--ru-twijfel__head > .vc_column-inner,
.dx--ru-twijfel .dx--ru-twijfel__body > .vc_column-inner{width:100%;max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0}

/* S2-20 + S2-32 — restore sticky on the functie/werkveld verschillen left rail (beaten by
   WPBakery's unlayered position:relative on .wpb_column); align-self:start + height:auto removes
   the full-height grid stretch so the box can pin and top-align. */
.dx--ru-verschillen--cta .dx--ru-verschillen--cta__intro{position:sticky;top:96px;align-self:start;height:auto}
.dx--ru-verschillen .dx--ru-verschillen__left{position:sticky;top:118px;align-self:start;height:auto}
.dx--ru-verschillen--cta .dx--ru-verschillen--cta__list{min-height:70vh}
/* mobile/tablet: drop the 70vh min-height (it left a tall empty band on small screens). */
@media (max-width:980px){.dx--ru-verschillen--cta .dx--ru-verschillen--cta__list{min-height:0}}
.dx--ru-verschillen .dx--ru-verschillen__acc{min-height:70vh}
@media (max-width:980px){.dx--ru-verschillen--cta .dx--ru-verschillen--cta__intro,.dx--ru-verschillen .dx--ru-verschillen__left{position:static;top:auto;height:auto}}

/* S2-26 — ervaring-body advice pill (primary): pink fill + hover (beats Impreza's .w-btn). */
.dx--ru-ervaring-body__adv-pill.dx--ru-ervaring-body__adv-pill--primary,
.dx--ru-ervaring-body__adv-pill.dx--ru-ervaring-body__adv-pill--primary .w-btn-label{
  background:var(--wz-pink);color:#fff;border-color:var(--wz-pink);
}
.dx--ru-ervaring-body__adv-pill.dx--ru-ervaring-body__adv-pill--primary:hover,
.dx--ru-ervaring-body__adv-pill.dx--ru-ervaring-body__adv-pill--primary:hover .w-btn-label{
  background:var(--wz-pink-hover);border-color:var(--wz-pink-hover);color:#fff;
}
/* ervaring-single advice card: pills span the full card width (Impreza .w-btn shrink-wraps). */
.dx--ru-ervaring-body .dx--ru-ervaring-body__adv-pills{align-self:stretch;width:100%}
.dx--ru-ervaring-body .dx--ru-ervaring-body__adv-pill.w-btn{display:flex !important;width:100% !important;justify-content:center !important}

/* Hide the leaked S&F pre-filter (the FIRST side-filter widget = the {{vlist_sf_section_id}}
   audience/location pre-filter) on regio + werkveld vacancy pages. Regio (children of 820551)
   is safe via parent-pageid; werkveld must be listed by page-id, because functie pages share
   parent-pageid-820515 and THEIR first side-filter is a real facet (must NOT be hidden). */
.parent-pageid-820551 .dx--su-side-filters-container .wpjmsf-job-section:not(.wpjmsf-job-section ~ .wpjmsf-job-section),
.page-id-820532 .dx--su-side-filters-container .wpjmsf-job-section:not(.wpjmsf-job-section ~ .wpjmsf-job-section),
.page-id-820533 .dx--su-side-filters-container .wpjmsf-job-section:not(.wpjmsf-job-section ~ .wpjmsf-job-section),
.page-id-820534 .dx--su-side-filters-container .wpjmsf-job-section:not(.wpjmsf-job-section ~ .wpjmsf-job-section),
.page-id-820535 .dx--su-side-filters-container .wpjmsf-job-section:not(.wpjmsf-job-section ~ .wpjmsf-job-section),
.page-id-820541 .dx--su-side-filters-container .wpjmsf-job-section:not(.wpjmsf-job-section ~ .wpjmsf-job-section){display:none !important}
/* auteur-social chips (dark hero): on hover keep text white + take the pink accents
   LIGHTER, not darker (Impreza's a:hover was darkening them — bad on the purple bg). */
.dx--su-auteur-social__chip:hover{color:#fff}
.dx--su-auteur-social__chip:hover i,
.dx--su-auteur-social__chip:hover .dx--ru-arrow{color:var(--wz-pink-mid)}

/* S2-27 — ervaring-body pullquote to concept weight (hit both the wrapper and the .w-text-h Impreza nests). */
.dx--ru-ervaring-body .dx--ru-ervaring-body__pullquote,
.dx--ru-ervaring-body .dx--ru-ervaring-body__pullquote .w-text-h{
  font-family:var(--wz-font-display);font-weight:600;font-style:italic;
  font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.25;letter-spacing:-.02em;color:var(--wz-ink);
}
.dx--ru-ervaring-body .dx--ru-ervaring-body__pullquote{
  position:relative;margin:38px 0;padding:6px 0 6px 28px;border-left:4px solid var(--wz-pink);
}
.dx--ru-ervaring-body .dx--ru-ervaring-body__pullquote::before{
  content:"\201C";position:absolute;left:18px;top:-.18em;
  font-family:var(--wz-font-display);font-size:2.4em;line-height:1;color:var(--wz-pink);opacity:.25;
}

/* S2-28 — global h2 reduction (~27px..37px, down from 48px) + ervaringen-specific h2 overrides. */
:root{--h2-font-size:clamp(1.7rem,2.6vw,2.3rem)}
.dx--ru-ervaring-body .dx--ru-ervaring-body__prose h2{
  font-size:clamp(1.4rem,2.2vw,1.7rem);letter-spacing:-.02em;line-height:1.18;margin:40px 0 14px;
}
.dx--ru-ervaringen .dx--ru-section-header h2{
  font-size:clamp(1.8rem,3vw,2.4rem);letter-spacing:-.026em;line-height:1.1;
}
.dx--ru-ervaring-uitgelicht .dx--ru-ervaring-uitgelicht__quote{
  font-size:clamp(1.7rem,3vw,2.6rem);letter-spacing:-.028em;line-height:1.1;padding-top:0;
}
/* featured photo fills its full box — restore the height chain through Impreza's
   .w-image/.w-image-h wrappers (they carry no height, so the img's height:100% collapsed). */
.dx--ru-ervaring-uitgelicht .dx--ru-ervaring-uitgelicht__photo .w-image,
.dx--ru-ervaring-uitgelicht .dx--ru-ervaring-uitgelicht__photo .w-image-h{height:100%}
.dx--ru-ervaring-uitgelicht .dx--ru-ervaring-uitgelicht__photo .w-image-h img{height:100%;object-fit:cover}

/* S2-30 — bijzonder quote text: reset margin (must be unlayered to beat the unlayered rule). */
.dx--ru-bijzonder .dx--ru-bijzonder__quote .dx--ru-bijzonder__qtext{margin:0}

/* S2-31 — zd/wl hero list: drop the 40px Impreza left indent; owner gap:6px. */
.dx--su-zd-hero .dx--su-zd-hero__list,
.dx--su-wl-hero .dx--su-zd-hero__list{margin-inline-start:0;margin-left:0;padding-left:0;gap:6px}

/* S2-34 — on-purple-outline button hover keeps white label on the dark hero. */
.dx--ru-btn.dx--ru-btn--on-purple-outline:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.06)}

/* S2-23 — ervaringen filter chips: unlayered so they beat Impreza's button reset
   (border/font/color stripped while the chip rule sat in @layer). Active = pink.
   .is-filtered-out hides grid items the chip click filtered away. */
.dx--ru-ervaring-filter .dx--ru-ervaring-filter__chip{
  font-size:.86rem;color:var(--wz-ink-soft);background:#fff;
  border:1px solid var(--wz-line);border-radius:var(--wz-radius-pill);
  padding:8px 16px;font-weight:500;cursor:pointer;line-height:1.2;
}
.dx--ru-ervaring-filter .dx--ru-ervaring-filter__chip:hover{
  border-color:var(--wz-pink);color:var(--wz-pink);background:var(--wz-pink-soft);
}
.dx--ru-ervaring-filter .dx--ru-ervaring-filter__chip.is-active{
  background:var(--wz-pink);border-color:var(--wz-pink);color:#fff;
}
.dx--ru-ervaringen .w-grid-item.is-filtered-out{display:none}

/* S2-37 — traineeship card title hierarchy: unlayered so the card h3/h4 beat
   Impreza's unlayered heading rules (which had flipped them to dark, with h4
   larger than h3). Concept: h3 large purple, h4 small pink. */
.dx--su-traineeship .dx--su-traineeship__card h3{
  font-size:1.55rem;line-height:1.1;color:var(--wz-purple-deep);
  letter-spacing:-.025em;margin-bottom:4px;
}
.dx--su-traineeship .dx--su-traineeship__card h4{
  font-family:var(--wz-font-body);font-size:.98rem;color:var(--wz-pink);
  font-weight:700;margin-bottom:18px;
}

/* /vacatures — keuzehulp moved out of the sidebar to a distinct LAST card at the
   end of the results column. Concept .help card: deep-purple banner, pink glow,
   text left + pink pill CTA right. Scoped to --end so the compact --sidebar card
   (now unused on this page) never bleeds in. */
.dx--ru-keuzehulp--end{
  background:var(--wz-purple-deep);color:#fff;border-radius:var(--wz-radius-lg);
  padding:30px 34px;display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;position:relative;overflow:hidden;margin-top:18px;
}
.dx--ru-keuzehulp--end::after{
  content:"";position:absolute;right:-40px;top:-40px;width:200px;height:200px;
  border-radius:50%;background:radial-gradient(circle, rgba(var(--wz-pink-rgb),.35), transparent 70%);
  pointer-events:none;
}
.dx--ru-keuzehulp--end .dx--ru-keuzehulp__inner{
  display:block;flex:1 1 460px;min-width:0;position:relative;z-index:1;gap:0;
  /* reset the layered .keuzehulp__inner white-card look — --end is the banner itself */
  background:none;border:0;box-shadow:none;border-radius:0;
  max-width:none;margin:0;padding:0;text-align:left;
}
.dx--ru-keuzehulp--end .dx--ru-keuzehulp__inner h2{
  font-family:var(--wz-font-display);font-size:1.5rem;font-weight:700;
  line-height:1.15;color:#fff;max-width:26ch;margin:0;
}
.dx--ru-keuzehulp--end .dx--ru-keuzehulp__inner p{
  color:rgba(255,255,255,.78);font-size:.95rem;line-height:1.55;
  margin:8px 0 0;max-width:46ch;
}
.dx--ru-keuzehulp--end .dx--ru-keuzehulp__cta{
  position:relative;z-index:1;flex:0 0 auto;align-self:center;width:auto;margin:0;
  background:var(--wz-pink);color:#fff;border-radius:var(--wz-radius-pill);
  padding:15px 28px;font-weight:600;white-space:nowrap;
}
.dx--ru-keuzehulp--end .dx--ru-keuzehulp__cta:hover{
  background:var(--wz-pink-hover);transform:translateY(-2px);
}
@media (max-width:640px){
  .dx--ru-keuzehulp--end{flex-direction:column;align-items:flex-start;gap:18px}
  .dx--ru-keuzehulp--end .dx--ru-keuzehulp__cta{width:100%;justify-content:center}
}


/* ═══════════ VISUAL AUDIT PHASE-3 (2026-06-02) — unlayered overrides ═══════════
   Beat Impreza's unlayered theme defaults + the @layer rules. Tokens only;
   !important only where it beats S&F / CF7 inline styles. */

/* S3-02 — author hero: the live H1 is class="" (no __title class), so the
   layered/__title rules don't reach it. Force white ink + pink accent surname. */
.dx--su-ervsingle-hero h1{color:#fff;-webkit-text-fill-color:#fff}
.dx--su-ervsingle-hero h1 .dx--ru-accent{color:var(--wz-pink);-webkit-text-fill-color:var(--wz-pink)}

/* S3-11 — single-vacancy sticky CTA: drop the stray white reassurance pill on
   desktop, leaving only the pink button (mobile already hides it via @media). */
.dx--ru-vacature-fab__note{display:none}

/* S3-13 — the section after the /vacatures hero (and the feed below it) get the
   paper surface so they no longer read as one continuous white band with the hero. */
.dx--su-vacatures-top-search.u-section{background:var(--wz-paper)}
.dx--su-vacatures-filters-wrapper{background:var(--wz-paper)}

/* Functie pages (template 912674): unlike /vacatures (search near the top after the hero),
   the feed sits at the BOTTOM — between the paper "Wat WIJ.ZORGEN voor je doet" (.dx--ru-anders)
   and the paper-warm CTA — so the global paper above runs 3 sections deep with no contrast.
   Give the search + feed a white surface so it reads as one distinct panel. Scoped via the
   functie hero so /vacatures + werkveld + regio keep the paper treatment. */
body:has(.dx--ru-hero--functie) .dx--su-vacatures-top-search.u-section,
body:has(.dx--ru-hero--functie) .dx--su-vacatures-filters-wrapper{background:var(--wz-white)}
/* …and the functie top-search ships a 2nd S&F job-section (the standalone function list 441)
   on top of the search bar's own Functie field — redundant on a function page; hide it. */
body:has(.dx--ru-hero--functie) .dx--su-vacatures-top-search .wpjmsf-job-section ~ .wpjmsf-job-section{display:none !important}

/* S3-17 — afstand (KM) slider: WPJM/vue default blue (#3498db) → brand purple, whole
   control consistent (process track, dot focus ring, tooltip bg+border, tooltip arrow).
   Plugin CSS is UNLAYERED so these are unlayered; the .dx-- scope out-specifies it. */
.dx--su-vacatures-top-search .vue-slider-process{background-color:var(--wz-purple)}
.dx--su-vacatures-top-search .vue-slider-dot-handle-focus{box-shadow:0 0 1px 2px rgba(var(--wz-purple-rgb),.36)}
.dx--su-vacatures-top-search .vue-slider-dot-tooltip-inner{background-color:var(--wz-purple);border-color:var(--wz-purple)}
.dx--su-vacatures-top-search .vue-slider-dot-tooltip-inner-top:after{border-top-color:var(--wz-purple)}
.dx--su-vacatures-top-search .vue-slider-dot-tooltip-inner-bottom:after{border-bottom-color:var(--wz-purple)}
.dx--su-vacatures-top-search .vue-slider-dot-tooltip-inner-left:after{border-left-color:var(--wz-purple)}
.dx--su-vacatures-top-search .vue-slider-dot-tooltip-inner-right:after{border-right-color:var(--wz-purple)}

/* S3-19 — sidebar card stretched to the full feed-row height (grid stretch). Pin
   the grid cell to the top so the sticky card hugs its content. */
.dx--su-vacatures-filters-wrapper .g-cols{align-items:start}
.dx--su-side-filters-container{align-self:start}

/* S3-20 — feed section had no bottom padding (purple section butted right against
   the pagination). Give it generous bottom spacing. */
.dx--su-vacatures-filters-wrapper{padding-bottom:clamp(56px,7vw,104px)}

/* S3-22 — vacancy card refinements (owner CSS). Title size + breathing room, meta
   gap, sfeer size, and the WPJM default <a> padding (the <a> IS our card). */
.dx--ru-card--vacancy .dx--ru-card--vacancy__title{font-size:1.52rem;margin-top:10px;margin-bottom:15px;padding-top:0}
/* home preview cards: drop Impreza's h3 padding-top (scoped to home so the general
   feed card title is untouched). */
/* The homepage vacancy-preview layout is the reusable .dx--ru-vlist__grid class:
   any page that wraps vacancy cards in it gets the grid + this title reset (drops
   Impreza's h3 padding-top). NOT scoped to .home, and NOT applied to the single-column
   feed cards (content-job_listing.php) which live outside .dx--ru-vlist__grid. */
.dx--ru-vlist__grid .dx--ru-card--vacancy .dx--ru-card--vacancy__title{padding-top:0}
.dx--ru-card--vacancy .dx--ru-card--vacancy__meta-list{gap:8px 14px;margin-bottom:5px}
.dx--ru-card--vacancy .dx--ru-card--vacancy__sfeer{font-size:1.02rem}
ul.job_listings li.job_listing a{padding:1.3em 1.5em 1.2em 1.9em}

/* S3-28 — Impreza core adds .7rem L/R margin to every direct child of a centered
   subheader cell, nudging the nav block off-center. Reset it. */
.l-header .l-subheader-cell.at_center > *{margin-left:0;margin-right:0}

/* S3-30 — vacancy-body list: the browser/Impreza default ul margin-left wins over
   our layered margin → zero it unlayered. */
.dx--su-vac-body .dx--su-vac-body__block ul{margin-left:0}

/* S3-31 — vacancy-body heading emoji images (e.g. 🎁 in an <h2>) render at 1em →
   trim to 0.9em, scoped to the vacancy body. */
.dx--su-vac-body img.emoji{height:0.9em}

/* S3-12 — vacancy card education meta icon (fa-graduation-cap) rendered as a blob;
   the template-emitted glyph isn't in us_used_icons → map it directly to the
   loaded fontawesome 900 face (U+f19d). */
.dx--ru-card--vacancy__meta i.fa-graduation-cap{font-family:'fontawesome';font-weight:900}
.dx--ru-card--vacancy__meta i.fa-graduation-cap::before{content:"\f19d"}

/* ── FORMS — CF7-markup bridge (S3-10) ───────────────────────────────────────
   The concept .dx--ru-cf7__field/__row/__consent rules match NOTHING on the real
   page: CF7 emits .row/.col-* + label.full-width + .wpcf7-form-control. Map that
   real markup onto the concept design. Scope widened to the aanmelden/solliciteren
   CF7 hero too (forms-8). */

/* forms-1 — grid/field bridge */
.dx--ru-cf7 .wpcf7 .row,
.dx--su-aanmelden-hero .wpcf7 .row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0}
/* contact CF7 (744045) = THREE col-sm-4 columns → 3 tracks (the shared 2-track rule
   above orphaned col 3: huisnummer/straat/cv). The centered submit .row is flex (overridden
   separately), so it's unaffected. Stack to 1 on mobile. */
/* contact CF7 (744045) is 3 bootstrap col-sm-4 (3 stacked fields each). Flatten the columns
   (display:contents) so all 9 label.full-width flow into ONE 2-up grid = the concept's 2-col
   row-major layout (Voornaam|Achternaam · E-mail|Telefoon · Stad|Postcode · Huisnummer|Straat),
   CV full-width. The centered submit .row stays flex (forms-3). Was wrongly forced to 3 cols. */
#contact-formulier.dx--ru-cf7 .wpcf7 .row:not([style*=center]){display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0}
#contact-formulier.dx--ru-cf7 .wpcf7 .row:not([style*=center])>[class*=col-]{display:contents}
#contact-formulier.dx--ru-cf7 .wpcf7 .row:not([style*=center])>[class*=col-]>p{display:contents}
#contact-formulier.dx--ru-cf7 .wpcf7 .row:not([style*=center]) label.full-width{margin:0}
#contact-formulier.dx--ru-cf7 .wpcf7 .row:not([style*=center]) label.full-width:has(input[type=file]){grid-column:1 / -1}
@media (max-width:768px){#contact-formulier.dx--ru-cf7 .wpcf7 .row:not([style*=center]){grid-template-columns:1fr}}
.dx--ru-cf7 .wpcf7 .row>[class*=col-],
.dx--su-aanmelden-hero .wpcf7 .row>[class*=col-]{width:auto;max-width:none;float:none;padding:0;flex:initial}
.dx--ru-cf7 .wpcf7 .row>[class*=col-]>p,
.dx--su-aanmelden-hero .wpcf7 .row>[class*=col-]>p{margin:0;display:grid;gap:18px}
.dx--ru-cf7 .wpcf7 label.full-width,
.dx--su-aanmelden-hero .wpcf7 label.full-width{display:block;width:100%;margin:0}
.dx--ru-cf7 .wpcf7 label.full-width br,
.dx--su-aanmelden-hero .wpcf7 label.full-width br{display:none}
.dx--ru-cf7 .wpcf7 .wpcf7-form-control-wrap,
.dx--su-aanmelden-hero .wpcf7 .wpcf7-form-control-wrap{display:block}
.dx--ru-cf7 .wpcf7 .wpcf7-form-control:not(.wpcf7-submit):not([type=checkbox]):not([type=file]),
.dx--su-aanmelden-hero .wpcf7 .wpcf7-form-control:not(.wpcf7-submit):not([type=checkbox]):not([type=file]){font-family:var(--wz-font-body);font-size:1rem;color:var(--wz-ink);background:var(--wz-paper);border:1px solid var(--wz-line);border-radius:var(--wz-radius-md);padding:12px 16px;line-height:1.4;min-height:0;width:100%;height:auto;transition:border-color .2s ease,background .2s ease}
.dx--ru-cf7 .wpcf7 .wpcf7-form-control::placeholder,
.dx--su-aanmelden-hero .wpcf7 .wpcf7-form-control::placeholder{color:var(--wz-ink-mute)}
.dx--ru-cf7 .wpcf7 .wpcf7-form-control:not(.wpcf7-submit):focus,
.dx--su-aanmelden-hero .wpcf7 .wpcf7-form-control:not(.wpcf7-submit):focus{outline:none;border-color:var(--wz-pink-mid);background:var(--wz-white)}

/* forms-1b — REAL aanmelden CF7 markup has NO .row/.col- wrappers (the forms-1
   .row bridge above matches nothing here): all fields are label.full-width inside
   ONE <p> (order voornaam→straat = 4 pairs, then cv, then privacy). Grid that <p>
   into 2 columns; CV (file) + privacy (checkbox) span the full width. */
.dx--su-aanmelden-hero .wpcf7 form > p:has(> label.full-width){display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;margin:0}
.dx--su-aanmelden-hero .wpcf7 form > p:has(> label.full-width) > *{margin:0}
.dx--su-aanmelden-hero .wpcf7 form > p > label.full-width:has(input[type=file]),
.dx--su-aanmelden-hero .wpcf7 form > p > *:has(input[type=checkbox]){grid-column:1 / -1}
/* a lone trailing text field (e.g. Organisatie on the 5-field B2B form 761317) would orphan
   an empty 2nd cell → span it full-width. :nth-of-type(odd) targets only the odd lone field
   (Organisatie=5th), not Straat=8th on the 8-field forms. */
.dx--su-aanmelden-hero .wpcf7 form > p > label.full-width:last-of-type:nth-of-type(odd){grid-column:1 / -1}
/* privacy on ONE line: the CF7 acceptance renders the checkbox (#acceptance-label) and the
   consent text (#validation-text) as two separate consecutive grid items → they stacked.
   Shrink the checkbox to content + pull the consent text up beside it. */
.dx--su-aanmelden-hero .wpcf7 form > p > #acceptance-label{grid-column:1 / -1;display:flex;align-items:center;width:100%;height:22px;min-height:0;margin:0}
.dx--su-aanmelden-hero .wpcf7 form > p > #acceptance-label .wpcf7-form-control-wrap,
.dx--su-aanmelden-hero .wpcf7 form > p > #acceptance-label .wpcf7-acceptance,
.dx--su-aanmelden-hero .wpcf7 form > p > #acceptance-label .wpcf7-list-item{display:inline-flex;align-items:center;width:auto;min-width:0;height:22px;margin:0;background:none;border:0;border-radius:0;padding:0}
.dx--su-aanmelden-hero .wpcf7 form > p > #acceptance-label input[type=checkbox]{margin:0}
/* pull the consent text up beside the checkbox: −(checkbox-row 22px + grid gap 18px) = −40px */
.dx--su-aanmelden-hero .wpcf7 form > p > #validation-text{grid-column:1 / -1;margin:-40px 0 0;padding-left:26px;line-height:1.45}

/* contact — the consent checkbox wrapper picks up the input pill (it carries .wpcf7-form-control);
   strip that chrome so only the native checkbox shows, inline with the consent text. */
.dx--ru-cf7 #acceptance-label .wpcf7-form-control-wrap,
.dx--ru-cf7 #acceptance-label .wpcf7-acceptance,
.dx--ru-cf7 #acceptance-label .wpcf7-list-item{background:none;border:0;border-radius:0;padding:0}
.dx--ru-cf7 #acceptance-label input[type=checkbox]{vertical-align:middle;margin:0 8px 0 0}

/* forms-6 — uniform 18px rhythm regardless of CF7 <br>/<p> */
.dx--ru-cf7 .wpcf7 p,
.dx--su-aanmelden-hero .wpcf7 p{margin:0}
.dx--ru-cf7 .wpcf7 br,
.dx--su-aanmelden-hero .wpcf7 br{display:none}

/* forms-3 — CF7 acceptance → concept consent row (left-aligned, inline checkbox). */
.dx--ru-cf7 .wpcf7 .row[style*=center],
.dx--su-aanmelden-hero .wpcf7 .row[style*=center]{text-align:left;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.dx--ru-cf7 .wpcf7 #acceptance-label,
.dx--su-aanmelden-hero .wpcf7 #acceptance-label{display:inline-flex;align-items:flex-start;margin:0}
.dx--ru-cf7 .wpcf7 .wpcf7-acceptance,
.dx--ru-cf7 .wpcf7 #acceptance-label .wpcf7-form-control-wrap,
.dx--su-aanmelden-hero .wpcf7 .wpcf7-acceptance,
.dx--su-aanmelden-hero .wpcf7 #acceptance-label .wpcf7-form-control-wrap{display:inline-flex}
.dx--ru-cf7 .wpcf7 input[type=checkbox],
.dx--su-aanmelden-hero .wpcf7 input[type=checkbox]{appearance:auto;-webkit-appearance:auto;width:17px;height:17px;margin:3px 11px 0 0;accent-color:var(--wz-pink);flex-shrink:0}
.dx--ru-cf7 .wpcf7 #validation-text,
.dx--su-aanmelden-hero .wpcf7 #validation-text{font-size:.9rem;color:var(--wz-ink-soft);line-height:1.5}
.dx--ru-cf7 .wpcf7 #validation-text a,
.dx--su-aanmelden-hero .wpcf7 #validation-text a{color:var(--wz-pink);text-decoration:underline;text-underline-offset:2px}

/* forms-4 — CF7 file input → concept .dx--su-cf7-file look (pill selector button). */
.dx--ru-cf7 .wpcf7 input[type=file],
.dx--su-aanmelden-hero .wpcf7 input[type=file]{width:100%;font:inherit;color:var(--wz-ink-soft);font-size:.92rem;padding:10px 0;cursor:pointer;background:none;border:0;height:auto}
.dx--ru-cf7 .wpcf7 input[type=file]::file-selector-button,
.dx--su-aanmelden-hero .wpcf7 input[type=file]::file-selector-button{font:inherit;font-weight:600;font-size:.86rem;cursor:pointer;margin-right:14px;padding:10px 16px;border:1px solid var(--wz-line);border-radius:var(--wz-radius-pill);background:var(--wz-paper);color:var(--wz-ink);transition:border-color .2s ease,color .2s ease}
.dx--ru-cf7 .wpcf7 input[type=file]::file-selector-button:hover,
.dx--su-aanmelden-hero .wpcf7 input[type=file]::file-selector-button:hover{border-color:var(--wz-pink);color:var(--wz-pink)}

/* forms-5 — submit: auto-width left-aligned pink pill + trailing arrow; full-width ≤768. */
.dx--ru-cf7 .wpcf7 .wpcf7-submit.dx--ru-btn,
.dx--su-aanmelden-hero .wpcf7 .wpcf7-submit.dx--ru-btn{width:auto;justify-self:start;margin-top:4px}
.dx--ru-cf7 .wpcf7 .wpcf7-submit.dx--ru-btn::after,
.dx--su-aanmelden-hero .wpcf7 .wpcf7-submit.dx--ru-btn::after{content:'\2192';margin-left:10px;font-weight:600}

@media(max-width:768px){
  .dx--ru-cf7 .wpcf7 .row,
  .dx--su-aanmelden-hero .wpcf7 .row,
  .dx--su-aanmelden-hero .wpcf7 form > p:has(> label.full-width){grid-template-columns:1fr}
  .dx--ru-cf7 .wpcf7 .wpcf7-submit.dx--ru-btn,
  .dx--su-aanmelden-hero .wpcf7 .wpcf7-submit.dx--ru-btn{width:100%;justify-content:center}
}

/* Aanmeld "jump to form" CTA (interactions.js injects it after the USPs, label mirrored from
   the form submit). Hidden on the 2-col hero (form already beside the USPs); shown once the
   columns stack (≤650px) so the primary CTA stays above the fold on mobile. */
.dx--su-aanmelden-jump{display:none}
.dx--su-aanmelden-hero .wpcf7{scroll-margin-top:var(--header-height,96px)}
@media(max-width:650px){
  .dx--su-aanmelden-jump{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;box-sizing:border-box;
    margin-top:26px;padding:16px 26px;border-radius:var(--wz-radius-md);
    background:var(--wz-pink);color:#fff !important;text-decoration:none;text-align:center;
    font-family:var(--wz-font-body);font-weight:600;font-size:1rem;line-height:1.2;
    box-shadow:0 12px 26px -12px rgba(var(--wz-pink-rgb),.7);transition:background .2s ease,transform .2s ease;
  }
  .dx--su-aanmelden-jump::after{content:'\2193';font-weight:700;font-size:.95em;line-height:1}
  .dx--su-aanmelden-jump:active{transform:translateY(1px)}
}