/* ── Tokens ─────────────────────────────── */
    /* Palette derived from the SLAAP.care logo: deep night-blue ground,
       sky-blue ("SLAAP") → turquoise ("care") gradient. No green. */
    :root {
      --night:    #0A1A2F;   /* deep logo background        */
      --night2:   #102842;   /* lifted night               */
      --blue:     #1B4FBF;   /* familiekleuren-B: RomRom-blauw */
      --blue-dk:  #153D93;
      --teal:     #2E8C8C;   /* familiekleuren-B: RomRom-turquoise */
      --teal-dk:  #226767;
      --tint:     #E9F6FA;   /* pale turquoise wash         */
      --tint-bd:  #C2E6EC;   /* turquoise border            */
      --bg:       #FFFFFF;
      --soft:     #F4F9FB;
      --text:     #0A1A2F;
      --muted:    #56697C;
      --line:     #E0EAF1;
      --shadow:   0 6px 24px rgba(10,26,47,0.08);
      --radius:   16px;
      --max:      1040px;
    }
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; }
    body {
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      color: var(--text);
      background: var(--bg);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
    a:hover { opacity: .8; }
    .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

    /* ── Topbar ──────────────────────────────── */
    .topbar {
      position: sticky; top: 0; z-index: 20;
      background: rgba(255,255,255,0.94);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line);
    }
    .topbar-inner {
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px; padding: 11px 0;
    }
    .brand {
      display: flex; align-items: center; gap: 9px;
      text-decoration: none; flex-shrink: 0;
    }
    /* Logo art is on a dark ground; show it on a small night-blue chip
       in the light topbar so it reads cleanly. */
    .brand img {
      height: 34px; width: auto; display: block;
      background: var(--night); border-radius: 8px;
      padding: 4px 8px;
    }
    .hero-logo {
      height: 64px; width: auto; display: block; margin: 0 0 24px;
    }
    @media (max-width: 600px) { .hero-logo { height: 48px; } }
    nav { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
    nav a {
      text-decoration: none; font-size: 14px; color: var(--muted);
      padding: 6px 12px; border-radius: 999px;
      border: 1px solid transparent; transition: all .15s;
      white-space: nowrap;
    }
    nav a:hover { color: var(--text); border-color: var(--line); background: var(--soft); opacity: 1; }
    .nav-cta {
      background: linear-gradient(135deg, var(--blue), var(--teal)) !important;
      color: #fff !important;
      border-color: transparent !important; font-weight: 600;
    }
    .nav-cta:hover { opacity: .86 !important; }

    /* ── Hero ────────────────────────────────── */
    .hero {
      background:
        radial-gradient(1200px 500px at 70% -10%, var(--night2), var(--night) 70%);
      color: #fff;
      padding: 68px 0 56px;
      position: relative; overflow: hidden;
    }
    /* Signature element: slow breathing gradient — mimics a sleep breath cycle */
    .hero::before {
      content: '';
      position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 65% 70% at 12% 65%, rgba(46,143,203,.30), transparent 55%),
        radial-gradient(ellipse 55% 50% at 88% 25%, rgba(52,192,201,.24), transparent 55%);
      animation: breathe 8s ease-in-out infinite;
    }
    @keyframes breathe {
      0%, 100% { opacity: .55; transform: scale(1);    }
      50%       { opacity: 1;   transform: scale(1.05); }
    }
    @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; opacity: .8; } }
    .hero .wrap { position: relative; z-index: 1; }

    .kicker {
      display: inline-block; margin-bottom: 18px;
      font-size: 13px; letter-spacing: .17em; text-transform: uppercase;
      color: rgba(255,255,255,.55);
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 999px; padding: 5px 13px;
    }
    h1 {
      margin: 0 0 18px;
      font-size: clamp(30px, 4.5vw, 52px);
      line-height: 1.09; letter-spacing: -.028em;
      max-width: 19ch; color: #fff;
    }
    .hero-sub {
      color: rgba(255,255,255,.70);
      font-size: clamp(16px, 2vw, 19px);
      max-width: 54ch; margin: 0 0 36px;
      line-height: 1.6;
    }
    .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      text-decoration: none; font-size: 15px; font-weight: 600;
      padding: 13px 22px; border-radius: 10px;
      transition: opacity .15s, transform .15s;
      white-space: nowrap;
    }
    .btn:hover { opacity: .86; transform: translateY(-1px); }
    .btn-green { background: linear-gradient(135deg, var(--blue), var(--teal)); color: #fff; }
    .btn-ghost {
      color: rgba(255,255,255,.75); font-weight: 400;
      border: 1px solid rgba(255,255,255,.22);
    }
    .btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,.5); }

    /* ── Verwijzers strip ────────────────────── */
    .refer {
      background: var(--tint);
      border-bottom: 1px solid var(--tint-bd);
      padding: 40px 0;
      scroll-margin-top: 72px;
    }
    .refer h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.018em; }
    .refer .lead { color: var(--muted); font-size: 17px; margin: 0 0 26px; }

    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px; margin-bottom: 28px;
    }
    @media (max-width: 680px) { .steps { grid-template-columns: 1fr; } }

    .step {
      background: #fff; border: 1px solid var(--tint-bd);
      border-radius: 12px; padding: 16px 18px;
      display: flex; gap: 14px; align-items: flex-start;
    }
    .step-num {
      flex-shrink: 0; width: 28px; height: 28px;
      background: linear-gradient(135deg, var(--blue), var(--teal));
      color: #fff; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; font-weight: 700;
    }
    .step-body strong { display: block; font-size: 17px; margin-bottom: 5px; }
    .step-body span   { font-size: 15.5px; color: var(--muted); line-height: 1.55; }

    .region-label { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
    .region-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
    .region-card {
      display: flex; align-items: center; gap: 11px;
      background: #fff; border: 1px solid var(--tint-bd);
      border-radius: 12px; padding: 12px 16px;
      font-size: 16px; text-decoration: none; color: var(--text);
      transition: box-shadow .15s;
    }
    .region-card:hover { box-shadow: 0 4px 16px rgba(52,192,201,.22); opacity: 1; }
    .region-card.active { border-color: var(--teal); }
    .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .dot-on   { background: var(--teal); box-shadow: 0 0 0 3px rgba(52,192,201,.2); }
    .dot-soon { background: #CBD5E1; }
    .region-card strong { display: block; font-weight: 600; }
    .region-card small  { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }

    .self-refer {
      margin-top: 18px; padding: 14px 18px;
      background: #fff; border: 1px dashed var(--tint-bd);
      border-radius: 12px;
      display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
      font-size: 16px;
    }
    .self-refer strong { color: var(--text); }
    .self-refer span   { color: var(--muted); }
    .self-refer a {
      margin-left: auto; font-weight: 600; color: var(--blue-dk);
      text-decoration: none; white-space: nowrap;
    }
    .self-refer a:hover { text-decoration: underline; opacity: 1; }
    @media (max-width: 600px) {
      .self-refer a { margin-left: 0; }
    }

    /* ── Verwijzen via ZorgDomein ─────────────── */
    .zd { margin: 30px 0 24px; }
    .zd-head { margin-bottom: 14px; }
    .zd-head strong { display: block; font-size: 17px; margin-bottom: 5px; }
    .zd-head span   { font-size: 15.5px; color: var(--muted); line-height: 1.55; }
    .zd-term {
      display: inline-block; padding: 1px 7px; border-radius: 6px;
      background: var(--tint); border: 1px solid var(--tint-bd);
      font-weight: 600; color: var(--text);
    }
    .zd-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
    @media (max-width: 680px) { .zd-row { grid-template-columns: 1fr; } }
    .zd-card {
      background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--blue);
      border-radius: 12px; padding: 15px 17px;
    }
    .zd-card.pref { border-left-color: var(--teal); }
    .zd-step {
      display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
      text-transform: uppercase; color: var(--teal-dk); margin-bottom: 7px;
    }
    .zd-card:not(.pref) .zd-step { color: var(--blue-dk); }
    .zd-arrow {
      display: flex; align-items: center; justify-content: center;
      color: var(--muted); flex: none;
    }
    @media (max-width: 680px) { .zd-arrow svg { transform: rotate(90deg); } }
    .zd-tag {
      display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
      padding: 2px 8px; border-radius: 20px; margin-bottom: 8px;
      background: rgba(27,79,191,.09); color: var(--blue-dk);
    }
    .zd-card.pref .zd-tag { background: rgba(46,140,140,.12); color: var(--teal-dk); }
    .zd-card b { display: block; font-size: 16px; margin-bottom: 4px; }
    .zd-card p { margin: 0 0 10px; font-size: 15px; color: var(--muted); line-height: 1.5; }
    .zd-meta {
      display: flex; gap: 14px; flex-wrap: wrap;
      font-size: 14px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 9px;
    }
    .zd-meta span { display: inline-flex; align-items: center; gap: 5px; }
    .zd-note {
      margin-top: 12px; font-size: 15px; color: var(--muted); line-height: 1.55;
    }
    .zd-note strong { color: var(--text); font-weight: 600; }

    /* ── Content grid ────────────────────────── */
    .content-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 22px; padding: 28px 0 24px;
      align-items: start;
    }
    @media (max-width: 880px) { .content-grid { grid-template-columns: 1fr; } }

    /* ── Cards ───────────────────────────────── */
    .card {
      background: #fff; border: 1px solid var(--line);
      border-radius: var(--radius); box-shadow: var(--shadow);
      padding: 20px 22px; margin-bottom: 18px;
    }
    .card:last-child { margin-bottom: 0; }
    .card h2 { margin: 0 0 12px; font-size: 18px; letter-spacing: -.01em; }
    .card p  { margin: 0 0 12px; }
    .card p:last-child { margin-bottom: 0; }
    .card ul { margin: 8px 0 0; padding-left: 18px; }
    .card li { margin: 7px 0; }
    .muted   { color: var(--muted); }

    /* Diagram wrapper */
    .model {
      padding: 44px 0 8px;
      scroll-margin-top: 72px;
    }
    .model-title { margin: 0 0 4px; font-size: 24px; letter-spacing: -.02em; }
    .model-lead  { margin: 0 0 24px; color: var(--muted); font-size: 16px; }
    .diagram-wrap {
      border: 1px solid var(--line); border-radius: var(--radius);
      box-shadow: var(--shadow); overflow: hidden;
      background: #fff; padding: 8px;
    }
    .diagram-wrap svg { width: 100%; height: auto; display: block; }

    /* Desktop / mobile visibility toggles */
    .mobile-only { display: none; }
    @media (max-width: 720px) {
      .desktop-only { display: none; }
      .mobile-only  { display: block; }
    }

    /* Mobile stacked model (2e → 1,5e lijn) */
    .model-mobile {
      border: 1px solid var(--line); border-radius: var(--radius);
      box-shadow: var(--shadow); background: #fff;
      padding: 18px 16px;
    }
    .mm-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
    .mm-card strong { display: block; font-size: 21px; margin: 3px 0 10px; }
    .mm-card ul { margin: 0; padding-left: 20px; }
    .mm-card li { margin: 7px 0; font-size: 15px; line-height: 1.5; }
    .mm-eyebrow {
      font-size: 13px; letter-spacing: .12em; font-weight: 700;
      color: var(--muted); text-transform: uppercase;
    }
    .mm-eyebrow-teal { color: var(--teal-dk); }
    .mm-old { background: var(--soft); }
    .mm-old li { color: var(--muted); }
    .mm-new { background: var(--tint); border-color: var(--teal); }
    .mm-new li::marker { color: var(--blue); }
    .mm-hl::marker { color: var(--teal); }
    .mm-arrow { text-align: center; padding: 14px 0 10px; }
    .mm-arrow span {
      display: block; font-size: 15px; font-weight: 800; color: var(--blue-dk);
    }
    .mm-arrow small { display: block; font-size: 13px; font-weight: 700; color: var(--teal-dk); margin-top: 2px; }
    .mm-arrow::after {
      content: '▼'; display: block; color: var(--teal); font-size: 15px; margin-top: 4px;
    }
    .mm-caption {
      margin: 16px 0 0; padding: 12px 14px;
      background: var(--tint); border: 1px solid var(--tint-bd);
      border-radius: 10px; font-size: 15px; font-weight: 600;
      color: var(--teal-dk); text-align: center; line-height: 1.5;
    }

    /* Mobile triage — two columns: géén-route left, wél-route right.
       NOTE: `display` is set inside the mobile media query only. Declaring it
       here would override `.mobile-only { display: none }` (equal specificity,
       later in source) and the block would show up on desktop too. */
    .triage-mobile {
      border: 1px solid var(--line); border-radius: var(--radius);
      box-shadow: var(--shadow); background: #fff;
      padding: 18px 14px;
    }
    @media (max-width: 720px) {
      .triage-mobile {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 10px;
        align-items: start;
      }
    }
    /* Full-width rows: start, screening, endpoint, caption */
    .tm-span { grid-column: 1 / -1; }
    .tm-node {
      border: 1px solid var(--line); border-radius: 12px;
      padding: 14px 16px; text-align: center; background: var(--soft);
    }
    .tm-node strong { display: block; font-size: 18px; margin: 2px 0; }
    .tm-node span   { display: block; font-size: 15px; color: var(--muted); }
    .tm-eyebrow {
      font-size: 13px !important; letter-spacing: .12em; font-weight: 700;
      color: var(--teal-dk) !important; text-transform: uppercase;
    }
    .tm-eyebrow-blue { color: var(--blue-dk) !important; }
    .tm-hub { background: var(--tint); border-color: var(--teal); }
    .tm-hub strong { font-size: 22px; }
    .tm-kno { background: #fff; border-color: var(--blue); text-align: center; padding: 12px 10px; }
    .tm-kno strong { font-size: 15px; line-height: 1.3; }
    .tm-kno span   { font-size: 13px; }
    .tm-kno .tm-eyebrow { font-size: 11px !important; letter-spacing: .06em; }
    .tm-loop {
      display: block; margin-top: 8px; font-style: normal;
      font-size: 13px; font-weight: 700; color: var(--blue-dk);
    }
    .tm-end { background: var(--tint); border: 2px solid var(--teal); }
    .tm-end strong { font-size: 22px; }
    .tm-arrow {
      width: 2px; height: 22px; margin: 6px auto;
      background: linear-gradient(var(--blue), var(--teal));
      position: relative;
    }
    .tm-arrow::after {
      content: ''; position: absolute; bottom: -5px; left: 50%;
      transform: translateX(-50%);
      border-left: 6px solid transparent; border-right: 6px solid transparent;
      border-top: 8px solid var(--teal);
    }
    /* The géén-route arrow runs the full height of the wél-route beside it */
    .tm-long {
      grid-row: span 3;
      height: auto; align-self: stretch;
      min-height: 150px;
      margin: 6px auto 8px;
    }

    .tm-branch { display: flex; justify-content: center; margin: 10px 0 2px; }
    .tm-tag {
      text-align: center; font-size: 14px; font-weight: 800;
      padding: 7px 10px; border-radius: 999px; border: 1.5px solid;
      background: #fff; white-space: nowrap;
    }
    .tm-tag-blue { color: var(--blue-dk); border-color: var(--tint-bd); }
    .tm-tag-teal { color: var(--teal-dk); border-color: var(--tint-bd); }
    .tm-caption {
      margin: 14px 0 0; padding: 12px 14px;
      background: var(--tint); border: 1px solid var(--tint-bd);
      border-radius: 10px; font-size: 15px; font-weight: 600;
      color: var(--teal-dk); text-align: center; line-height: 1.5;
    }

    /* ── Animated triage route ───────────────── */
    /* Fail-safe: the diagram is fully visible by default. Only when JS confirms
       the browser supports the animation is `.anim-ready` added, which hides the
       parts so they can play in narrative order. If anything fails, nothing hides. */
    .triage-anim.anim-ready .ta      { opacity: 0; }
    .triage-anim.anim-ready .ta-node { transform: translateY(12px); }
    .triage-anim.anim-ready .ta-path { stroke-dasharray: 900; stroke-dashoffset: 900; }

    .triage-anim.anim-ready.is-playing .ta-node { animation: taIn   1.1s cubic-bezier(.2,.7,.3,1) forwards; }
    .triage-anim.anim-ready.is-playing .ta-path { animation: taDraw 1.2s ease-out forwards; }

    @keyframes taIn   { to { opacity: 1; transform: translateY(0); } }
    @keyframes taDraw { from { opacity: 1; stroke-dashoffset: 900; }
                        to   { opacity: 1; stroke-dashoffset: 0; } }

    /* Delays must match the specificity of the rule above AND come after it —
       the `animation` shorthand resets animation-delay, so a weaker selector
       here would be overridden and every step would start at once. */
    .triage-anim.anim-ready.is-playing .d1  { animation-delay: 0s;    }  /* Verwijzing          */
    .triage-anim.anim-ready.is-playing .d2  { animation-delay: .70s;  }  /* pijl naar screening */
    .triage-anim.anim-ready.is-playing .d3  { animation-delay: 1.40s; }  /* Screening           */
    .triage-anim.anim-ready.is-playing .d4  { animation-delay: 2.20s; }  /* label Géén apneu    */
    .triage-anim.anim-ready.is-playing .d5  { animation-delay: 2.90s; }  /* pijl géén-route     */
    .triage-anim.anim-ready.is-playing .d6  { animation-delay: 3.60s; }  /* Leefstijl eindpunt  */
    .triage-anim.anim-ready.is-playing .d7  { animation-delay: 4.40s; }  /* label Wél apneu     */
    .triage-anim.anim-ready.is-playing .d8  { animation-delay: 5.10s; }  /* pijl wél-route      */
    .triage-anim.anim-ready.is-playing .d9  { animation-delay: 5.80s; }  /* ZBC OnlineKNO-arts  */
    .triage-anim.anim-ready.is-playing .d10 { animation-delay: 6.60s; }  /* behandeling terug   */
    .triage-anim.anim-ready.is-playing .d11 { animation-delay: 7.40s; }  /* conclusiebalk       */

    .replay-btn {
      display: none; align-items: center; gap: 7px;
      margin: 0 0 16px; padding: 8px 14px;
      background: #fff; border: 1px solid var(--tint-bd);
      border-radius: 999px; cursor: pointer;
      font: inherit; font-size: 15px; font-weight: 600;
      color: var(--teal-dk);
      transition: box-shadow .15s, transform .15s;
    }
    .replay-btn:hover { box-shadow: 0 4px 14px rgba(52,192,201,.22); transform: translateY(-1px); }
    .triage-anim.anim-capable .replay-btn { display: inline-flex; }

    /* Section anchors */
    .sec { scroll-margin-top: 88px; }

    /* ── Aside ───────────────────────────────── */
    .aside { position: sticky; top: 72px; }
    @media (max-width: 880px) { .aside { position: static; } }

    .fact-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
    .fact-row {
      padding: 11px 14px;
      border: 1px solid var(--line); border-radius: 12px;
      background: var(--soft);
    }
    .fact-row strong { display: block; font-size: 15px; }
    .fact-row span   { display: block; font-size: 15px; color: var(--muted); margin-top: 3px; }

    .aside-cta {
      display: block; text-align: center;
      background: linear-gradient(135deg, var(--blue), var(--teal));
      color: #fff;
      text-decoration: none; font-size: 16px; font-weight: 600;
      padding: 13px 16px; border-radius: 10px;
      transition: opacity .15s, transform .15s;
    }
    .aside-cta:hover { opacity: .86; transform: translateY(-1px); }

    /* ── Footer ──────────────────────────────── */
    .footer {
      padding: 28px 0 40px; margin-top: 4px;
      border-top: 1px solid var(--line);
      color: var(--muted); font-size: 15px;
    }
    .footer a { color: var(--muted); }
    .footer-tiny { font-size: 14px; margin-top: 5px; }

    /* Mobile nav collapse */
    @media (max-width: 600px) {
      nav a:not(.nav-cta) { display: none; }
    }

    /* On narrow screens a long button label must wrap, or it widens the page */
    @media (max-width: 480px) {
      .btn { white-space: normal; text-align: center; }
    }

    /* Very narrow phones (≤380px): tighten the two-column triage so it still fits */
    @media (max-width: 380px) {
      .wrap { padding: 0 16px; }
      .triage-mobile { padding: 16px 10px; column-gap: 8px; }
      .tm-tag { font-size: 13px; padding: 6px 8px; white-space: normal; }
      .tm-kno { padding: 10px 7px; }
      .tm-kno strong { font-size: 14px; }
      .tm-kno span { font-size: 12px; }
      .tm-kno .tm-eyebrow { font-size: 10px !important; letter-spacing: .02em; }
      .tm-loop { font-size: 12px; }
    }

/* ── Toegevoegd bij het opsplitsen in doelgroeppagina's ──────────── */

/* Leesbaarheid gelijkgetrokken met oor.care: daar is de lopende tekst in
   blokken 16px op een regelhoogte van 1,65. De site zat op 15 en 15,5px, en
   dat leest in de dichtbedrukte kaarten te klein. Alleen de maat verandert —
   letter, kleur en indeling blijven zoals ze waren. */
.step-body span,
.zd-head span,
.zd-card p,
.zd-note,
.mm-card li,
.role-card span,
.fact-row strong,
.fact-row span,
.self-refer          { font-size: 16px; }
.step-body strong,
.role-card strong,
.zd-card b           { font-size: 17px; }
.region-card small,
.zd-meta,
.footer .wrap > div  { font-size: 15px; }
.region-label,
.zd-step,
.zd-tag              { font-size: 13.5px; }

/* Het logo in de topbalk stond op een donkerblauwe chip, omdat 41% van het
   merk lichtblauw is en op wit maar 1,9:1 haalt. In plaats van die chip staat
   er nu een variant die op licht werkt (gen_logo_opwit.py): hetzelfde beeld,
   maar het verloop verschoven naar de donkere familiekleuren, 7,2 tot 14,9:1
   op wit. De hero houdt het originele logo — daar is de ondergrond donker. */
.brand img { background: none; padding: 0; border-radius: 0; height: 30px; }

/* ── Route per patiënt ───────────────────────────────────────────── */
/* Vervangt het SVG-diagram met de animatie. Reden: in dat diagram stond de
   tekst vast op 13 tot 15px en werd hij bij het schalen nóg kleiner, terwijl
   de vertakking juist het lastigste deel is om te lezen. Dit is dezelfde
   opzet als het duo-blok op oor.care: gewone HTML-kaarten met leesbare tekst,
   die meeschalen met de browserinstelling van de lezer. */
.route { padding: 44px 0 8px; scroll-margin-top: 88px; }
.route .model-title { margin-bottom: 4px; }
.rt { display: grid; gap: 12px; margin-top: 22px; }
.rt-card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px;
}
.rt-eyebrow {
  display: block; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); margin-bottom: 6px;
}
.rt-card strong { display: block; font-size: 17.5px; margin-bottom: 4px; }
.rt-card p { margin: 0; font-size: 16px; color: var(--muted); line-height: 1.55; }
.rt-card.start { border-left: 3px solid var(--muted); }
.rt-card.hub   { border-left: 3px solid var(--teal); }
.rt-card.hub .rt-eyebrow { color: var(--teal-dk); }
.rt-card.end   { border-left: 3px solid var(--teal-dk); background: var(--tint); border-color: var(--tint-bd); }
.rt-card.end .rt-eyebrow { color: var(--teal-dk); }

/* De splitsing: twee routes naast elkaar, met hun uitkomst als kop. */
.rt-fork { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .rt-fork { grid-template-columns: 1fr; } }
.rt-branch {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
  display: flex; flex-direction: column;
}
.rt-branch.geen { border-top: 3px solid var(--teal); }
.rt-branch.wel  { border-top: 3px solid var(--blue); }
.rt-tag {
  display: inline-block; align-self: flex-start; font-size: 13.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px; margin-bottom: 9px;
}
.rt-branch.geen .rt-tag { background: rgba(46,140,140,.12); color: var(--teal-dk); }
.rt-branch.wel  .rt-tag { background: rgba(27,79,191,.09); color: var(--blue-dk); }
.rt-branch .rt-eyebrow { color: var(--blue-dk); margin-bottom: 6px; }
/* De linkertak heeft geen stap 2; dat expliciet zeggen scheelt de lezer de
   vraag of hij iets mist. Zelfde plek en maat als de eyebrow ernaast, maar
   ingetogen, want het is een afwezigheid en geen halte. */
.rt-geenstap {
  display: block; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); opacity: .75; margin-bottom: 6px;
}
.rt-branch strong { display: block; font-size: 17px; margin-bottom: 4px; }
.rt-branch p { margin: 0; font-size: 16px; color: var(--muted); line-height: 1.55; }
.rt-branch .rt-terug {
  margin-top: auto; padding-top: 11px; font-size: 15px; font-weight: 600;
  color: var(--blue-dk);
}
.rt-branch.geen .rt-terug { color: var(--teal-dk); }

/* Pijl tussen de stappen — puur decoratief, dus buiten de voorleesvolgorde. */
.rt-down {
  display: flex; justify-content: center; color: var(--teal);
  margin: -2px 0; line-height: 1;
}
.rt-caption {
  margin: 14px 0 0; font-size: 16px; color: var(--muted); line-height: 1.55;
  max-width: 72ch;
}

/* Compacte paginakop op de subpagina's; de homepage houdt de hero. */
.pagehead { background: var(--night); color: #fff; padding: 46px 0 38px; }
.pagehead h1 {
  margin: 0 0 10px; font-size: clamp(28px, 4.4vw, 40px);
  letter-spacing: -.028em; line-height: 1.12;
}
.pagehead .lead {
  margin: 0; max-width: 62ch; font-size: 17.5px; line-height: 1.6;
  color: rgba(255,255,255,.82);
}

/* Rolkaarten op de homepage: vier ingangen naar de doelgroeppagina's. */
.roles { padding: 34px 0 8px; }
.roles h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: -.018em; }
.roles .lead { color: var(--muted); font-size: 17px; margin: 0 0 22px; }
.role-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .role-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .role-row { grid-template-columns: 1fr; } }
.role-card {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--teal);
  border-radius: 12px; padding: 16px 17px;
  transition: box-shadow .18s ease, transform .18s ease;
}
.role-card:nth-child(2) { border-top-color: var(--blue); }
.role-card:nth-child(3) { border-top-color: var(--teal-dk); }
.role-card:nth-child(4) { border-top-color: var(--blue-dk); }
.role-card:hover { box-shadow: 0 6px 20px rgba(10,26,47,.10); transform: translateY(-2px); }
.role-card strong { display: block; font-size: 16.5px; margin-bottom: 5px; }
.role-card span { display: block; font-size: 15px; color: var(--muted); line-height: 1.5; }
.role-card em {
  display: block; margin-top: 10px; font-style: normal;
  font-size: 14.5px; font-weight: 600; color: var(--blue-dk);
}
@media (prefers-reduced-motion: reduce) {
  .role-card { transition: none; }
  .role-card:hover { transform: none; }
}

/* Verwijzing terug naar de homepage onder aan een doelgroeppagina. */
.pagefoot { padding: 26px 0 40px; }
.pagefoot a { font-weight: 600; color: var(--blue-dk); text-decoration: none; }
.pagefoot a:hover { text-decoration: underline; }

/* De juridische regel in de voettekst. */
.footer-legal { margin: 6px 0 2px; }
.footer-legal a { color: inherit; }