/* ============================================================
   REACHCONNECT - DESIGN SYSTEM (2026-11)
   Laadt NA style.css. Zet de huisstijl over alle pagina's heen
   en bevat de nieuwe nav, footer en homepage-blokken (rc-*).
   ============================================================ */

:root {
  --rc-ink: #0E1726;
  --rc-ink-2: #1B2638;
  --rc-blue: #2447E6;
  --rc-blue-hover: #1A37C2;
  --rc-blue-soft: #EAEEFD;
  --rc-mint: #12A27E;
  --rc-mint-soft: #E3F5EF;
  --rc-bg: #FFFFFF;
  --rc-surface: #F5F6F8;
  --rc-line: #E2E5EA;
  --rc-line-strong: #C7CCD4;
  --rc-text: #0E1726;
  --rc-text-2: #4F5868;
  --rc-on-ink: #FFFFFF;
  --rc-on-ink-2: #A9B1BF;
  --rc-radius: 10px;
  --rc-radius-sm: 6px;
  --rc-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rc-display: 'Manrope', 'Inter', system-ui, sans-serif;

  /* Oude tokens uit style.css omzetten naar de nieuwe huisstijl */
  --bg-ink: var(--rc-ink);
  --border: var(--rc-line);
  --border-hover: var(--rc-line-strong);
  --border-strong: var(--rc-line-strong);
  --accent: var(--rc-blue);
  --accent-glow: rgba(36, 71, 230, 0.10);
  --accent-on-ink: #7D95FF;
  --accent-soft: var(--rc-blue-soft);
  --accent-2: var(--rc-ink);
  --data-blue: var(--rc-blue);
  --text-primary: var(--rc-text);
  --text-secondary: var(--rc-text-2);
  --text-muted: var(--rc-text-2);
  --font-sans: var(--rc-font);
  --font-accent: var(--rc-display);
  --radius: var(--rc-radius-sm);
  --radius-lg: var(--rc-radius);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--rc-font); color: var(--rc-text); background: #fff; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, .section-title { font-family: var(--rc-display); letter-spacing: -0.02em; }
h1 { font-weight: 800; letter-spacing: -0.035em; }
h1 em, .section-title em { font-style: normal; color: var(--rc-blue); }

.btn-primary, .nav-cta, .vcard-apply { background: var(--rc-blue) !important; color: #fff !important; }
.btn-primary:hover, .nav-cta:hover, .vcard-apply:hover { background: var(--rc-blue-hover) !important; }
.site-fx { display: none !important; }

/* ---------- Basis ---------- */
.rc-wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .rc-wrap { padding: 0 16px; } }
.rc-skip { position: absolute; left: -9999px; }
.rc-skip:focus { left: 16px; top: 12px; z-index: 1000; background: #fff; padding: 8px 12px; border-radius: 6px; }

.rc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 22px; border-radius: var(--rc-radius-sm); font: 600 16px/1 var(--rc-font); transition: background .15s, border-color .15s, color .15s; white-space: nowrap; }
.rc-btn-primary { background: var(--rc-blue); color: #fff; }
.rc-btn-primary:hover { background: var(--rc-blue-hover); }
.rc-btn-line { border: 1px solid var(--rc-line-strong); color: var(--rc-text); background: #fff; }
.rc-btn-line:hover { border-color: var(--rc-ink); }
.rc-btn-light { background: #fff; color: var(--rc-ink); }
.rc-btn-light:hover { background: #E9ECF2; }
.rc-btn:focus-visible, .rc-nav a:focus-visible { outline: 3px solid #93A6FF; outline-offset: 2px; }

.rc-eyebrow { display: inline-block; font: 600 13px/1 var(--rc-font); letter-spacing: .06em; text-transform: uppercase; color: var(--rc-blue); margin-bottom: 14px; }
.rc-h2 { font: 800 clamp(28px, 3.2vw, 40px)/1.12 var(--rc-display); letter-spacing: -0.03em; color: var(--rc-text); margin: 0 0 14px; }
.rc-lead { font-size: 18px; line-height: 1.6; color: var(--rc-text-2); max-width: 640px; }
.rc-section { padding: 88px 0; }
.rc-section-alt { background: var(--rc-surface); }
@media (max-width: 760px) { .rc-section { padding: 60px 0; } }

/* ---------- Logo ---------- */
.rc-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--rc-ink); font: 800 20px/1 var(--rc-display); letter-spacing: -0.02em; }
.rc-logo svg { flex-shrink: 0; }
.rc-logo b { color: var(--rc-blue); font-weight: 800; }
.rc-logo-ink { color: #fff; }

/* ---------- Nav ---------- */
.rc-nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--rc-line); }
.rc-nav-in { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; }
.rc-nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.rc-nav-links a { display: block; padding: 10px 12px; border-radius: 6px; font: 500 15px/1 var(--rc-font); color: var(--rc-text-2); }
.rc-nav-links a:hover { color: var(--rc-text); background: var(--rc-surface); }
.rc-nav-links a.rc-nav-cta { background: var(--rc-blue); color: #fff; padding: 12px 18px; margin-left: 8px; font-weight: 600; }
.rc-nav-links a.rc-nav-cta:hover { background: var(--rc-blue-hover); }
.rc-burger { display: none; width: 44px; height: 44px; border-radius: 6px; border: 1px solid var(--rc-line); background: #fff; align-items: center; justify-content: center; }
.rc-burger span, .rc-burger span::before, .rc-burger span::after { display: block; width: 18px; height: 2px; background: var(--rc-ink); position: relative; content: ''; }
.rc-burger span::before { position: absolute; top: -6px; } .rc-burger span::after { position: absolute; top: 6px; }
@media (max-width: 900px) {
  .rc-burger { display: inline-flex; }
  .rc-nav-links { display: none; position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--rc-line); padding: 8px 16px 16px; }
  .rc-nav.open .rc-nav-links { display: flex; }
  .rc-nav-links a { padding: 14px 8px; font-size: 16px; }
  .rc-nav-links a.rc-nav-cta { margin: 8px 0 0; text-align: center; padding: 16px; }
}

/* ---------- Hero ---------- */
.rc-hero { padding: 72px 0 64px; border-bottom: 1px solid var(--rc-line); }
.rc-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.rc-hero h1 { font: 800 clamp(36px, 5vw, 60px)/1.04 var(--rc-display); letter-spacing: -0.04em; margin: 0 0 20px; color: var(--rc-text); }
.rc-hero h1 em { color: var(--rc-blue); font-style: normal; }
.rc-hero-sub { font-size: 19px; line-height: 1.6; color: var(--rc-text-2); max-width: 580px; margin: 0 0 30px; font-weight: 400; }
.rc-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.rc-hero-note { margin-top: 16px; font-size: 14px; color: var(--rc-text-2); }
.rc-pick { background: #fff; border: 1px solid var(--rc-line); border-radius: var(--rc-radius); padding: 8px; }
.rc-pick-head { padding: 14px 14px 10px; font: 700 15px/1.2 var(--rc-display); color: var(--rc-text); }
.rc-pick a { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; padding: 14px; border-radius: 8px; }
.rc-pick a + a { border-top: 1px solid var(--rc-line); }
.rc-pick a:hover { background: var(--rc-surface); }
.rc-pick-ic { width: 40px; height: 40px; border-radius: 8px; background: var(--rc-blue-soft); color: var(--rc-blue); display: flex; align-items: center; justify-content: center; }
.rc-pick-ic.m { background: var(--rc-mint-soft); color: var(--rc-mint); }
.rc-pick-t { display: block; font: 600 16px/1.3 var(--rc-font); color: var(--rc-text); }
.rc-pick-s { display: block; font-size: 14px; color: var(--rc-text-2); margin-top: 2px; }
.rc-pick-arrow { color: var(--rc-text-2); }
@media (max-width: 900px) { .rc-hero { padding: 44px 0 48px; } .rc-hero-grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 480px) { .rc-hero-btns .rc-btn { width: 100%; } }

/* ---------- Feitenbalk ---------- */
.rc-facts { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--rc-line); }
.rc-fact { padding: 22px 24px; border-right: 1px solid var(--rc-line); }
.rc-fact:last-child { border-right: 0; }
.rc-fact b { display: block; font: 700 16px/1.3 var(--rc-display); color: var(--rc-text); }
.rc-fact span { font-size: 14px; color: var(--rc-text-2); }
@media (max-width: 860px) { .rc-facts { grid-template-columns: 1fr 1fr; } .rc-fact:nth-child(2) { border-right: 0; } .rc-fact:nth-child(-n+2) { border-bottom: 1px solid var(--rc-line); } }
@media (max-width: 420px) { .rc-fact { padding: 16px; } }

/* ---------- Vacatures ---------- */
.rc-head-row { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; }
.rc-jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rc-job { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--rc-line); border-radius: var(--rc-radius); padding: 22px; transition: border-color .15s; }
.rc-job:hover { border-color: var(--rc-ink); }
.rc-job-overlay { position: absolute; inset: 0; z-index: 1; border-radius: var(--rc-radius); }
.rc-job-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.rc-tag { font: 600 12px/1 var(--rc-font); padding: 6px 8px; border-radius: 4px; background: var(--rc-surface); color: var(--rc-text-2); }
.rc-tag.b { background: var(--rc-blue-soft); color: var(--rc-blue); }
.rc-tag.m { background: var(--rc-mint-soft); color: #0B7A5E; }
.rc-job h3 { font: 700 19px/1.25 var(--rc-display); margin: 0 0 6px; color: var(--rc-text); }
.rc-job-loc { font-size: 14px; color: var(--rc-text-2); margin: 0 0 18px; }
.rc-job-pay { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rc-line); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rc-job-pay b { display: block; font: 700 17px/1.2 var(--rc-display); color: var(--rc-text); }
.rc-job-pay small { font-size: 13px; color: var(--rc-text-2); }
.rc-job-apply { position: relative; z-index: 2; font: 600 14px/1 var(--rc-font); color: #fff; background: var(--rc-blue); padding: 11px 14px; border-radius: 6px; white-space: nowrap; }
.rc-job-apply:hover { background: var(--rc-blue-hover); }
@media (max-width: 980px) { .rc-jobs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .rc-jobs { grid-template-columns: 1fr; } }

/* ---------- Stappen ---------- */
.rc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: s; margin-top: 36px; }
.rc-step { background: #fff; border: 1px solid var(--rc-line); border-radius: var(--rc-radius); padding: 26px; }
.rc-step::before { counter-increment: s; content: counter(s); display: flex; width: 36px; height: 36px; border-radius: 50%; background: var(--rc-ink); color: #fff; font: 700 16px/1 var(--rc-display); align-items: center; justify-content: center; margin-bottom: 18px; }
.rc-step h3 { font: 700 19px/1.3 var(--rc-display); margin: 0 0 8px; }
.rc-step p { color: var(--rc-text-2); margin: 0; }
@media (max-width: 820px) { .rc-steps { grid-template-columns: 1fr; } }

/* ---------- Verdiensten ---------- */
.rc-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
@media (max-width: 900px) { .rc-split { grid-template-columns: 1fr; gap: 28px; } }
.rc-pay { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--rc-line); border-radius: var(--rc-radius); overflow: hidden; }
.rc-pay th, .rc-pay td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--rc-line); vertical-align: top; font-size: 15px; }
.rc-pay tr:last-child td { border-bottom: 0; }
.rc-pay th { font: 600 13px/1.2 var(--rc-font); color: var(--rc-text-2); background: var(--rc-surface); text-transform: uppercase; letter-spacing: .04em; }
.rc-pay td b { font-family: var(--rc-display); font-weight: 700; white-space: nowrap; }
.rc-pay td small { display: block; color: var(--rc-text-2); font-size: 13px; margin-top: 2px; }
.rc-note { font-size: 14px; color: var(--rc-text-2); margin-top: 12px; }
@media (max-width: 520px) { .rc-pay th, .rc-pay td { padding: 12px; font-size: 14px; } }

/* ---------- Bedrijven (donkere band) ---------- */
.rc-biz { background: var(--rc-ink); color: var(--rc-on-ink); }
.rc-biz .rc-h2 { color: #fff; }
.rc-biz .rc-lead { color: var(--rc-on-ink-2); }
.rc-biz .rc-eyebrow { color: #8FA3FF; }
.rc-biz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #2A3548; border: 1px solid #2A3548; border-radius: var(--rc-radius); overflow: hidden; margin: 36px 0 32px; }
.rc-biz-item { background: var(--rc-ink-2); padding: 24px; }
.rc-biz-item h3 { color: #fff; font: 700 18px/1.3 var(--rc-display); margin: 0 0 8px; }
.rc-biz-item p { color: var(--rc-on-ink-2); margin: 0; font-size: 15px; }
.rc-sectors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.rc-sectors span { border: 1px solid #34405A; color: #D6DCE6; font-size: 14px; padding: 8px 12px; border-radius: 99px; }
@media (max-width: 820px) { .rc-biz-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.rc-faq { max-width: 820px; margin-top: 28px; border-top: 1px solid var(--rc-line); }
.rc-faq details { border-bottom: 1px solid var(--rc-line); }
.rc-faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font: 600 17px/1.4 var(--rc-display); color: var(--rc-text); }
.rc-faq summary::-webkit-details-marker { display: none; }
.rc-faq summary::after { content: '+'; position: absolute; right: 4px; top: 16px; font: 400 26px/1 var(--rc-font); color: var(--rc-text-2); }
.rc-faq details[open] summary::after { content: '\2212'; }
.rc-faq p { margin: 0 0 20px; color: var(--rc-text-2); line-height: 1.65; }

/* ---------- Steden ---------- */
.rc-cities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 28px; }
.rc-cities a { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border: 1px solid var(--rc-line); border-radius: 8px; background: #fff; font-weight: 600; }
.rc-cities a:hover { border-color: var(--rc-ink); }
.rc-cities a span { font-weight: 400; font-size: 13px; color: var(--rc-text-2); }
@media (max-width: 860px) { .rc-cities { grid-template-columns: 1fr 1fr; } }

/* ---------- Slot-CTA ---------- */
.rc-cta { border: 1px solid var(--rc-line); border-radius: var(--rc-radius); padding: 44px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; background: #fff; }
.rc-cta h2 { margin: 0 0 6px; }
.rc-cta p { margin: 0; color: var(--rc-text-2); }
@media (max-width: 640px) { .rc-cta { padding: 28px 20px; } .rc-cta .rc-btn { width: 100%; } }

/* ---------- Footer ---------- */
.rc-foot { background: var(--rc-ink); color: var(--rc-on-ink-2); padding: 64px 0 28px; font-size: 15px; }
.rc-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.rc-foot h4 { color: #fff; font: 600 14px/1 var(--rc-font); margin: 0 0 16px; }
.rc-foot ul { list-style: none; margin: 0; padding: 0; }
.rc-foot li { margin-bottom: 10px; }
.rc-foot a { color: var(--rc-on-ink-2); }
.rc-foot a:hover { color: #fff; }
.rc-foot-brand p { margin: 16px 0 0; max-width: 320px; line-height: 1.6; }
.rc-foot-addr { margin-top: 18px; font-style: normal; line-height: 1.6; }
.rc-foot-bottom { margin-top: 48px; padding-top: 22px; border-top: 1px solid #263247; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.rc-foot-bottom span a { margin-left: 16px; }
@media (max-width: 860px) { .rc-foot-grid { grid-template-columns: 1fr 1fr; } .rc-foot-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .rc-foot-grid { grid-template-columns: 1fr; } .rc-foot-bottom span a { margin: 0 16px 0 0; } }

/* Mobiele sticky sollicitatieknop */
.rc-sticky { display: none; }
@media (max-width: 640px) {
  .rc-sticky { display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; transform: translateY(140%); transition: transform .2s; }
  .rc-sticky.show { transform: none; }
  .rc-sticky a { display: flex; justify-content: center; align-items: center; height: 52px; border-radius: 8px; background: var(--rc-blue); color: #fff; font-weight: 600; box-shadow: 0 6px 20px rgba(14,23,38,.18); }
}
@media (prefers-reduced-motion: reduce) { .rc-sticky { transition: none; } }

/* Oude pagina's hadden ruimte boven de inhoud voor de vaste nav. De nieuwe nav
   staat in de flow, dus die ruimte kan veel kleiner. */
.rc-nav + .carriere-hero, .rc-nav + .vacatures-hero, .rc-nav + .section, .rc-nav + .container.legal-content,
.rc-nav ~ main > .carriere-hero:first-child { padding-top: 56px !important; }
@media (max-width: 640px) { .rc-nav + .carriere-hero, .rc-nav + .vacatures-hero, .rc-nav + .section, .rc-nav + .container.legal-content { padding-top: 32px !important; } }