/* ==========================================================================
   Publieke merksite (Introdi / Introdio / Introducio)
   Plain CSS. Alle kleuren staan in :root als RGB-kanalen, zodat ze met elke
   opacity herbruikbaar zijn via rgb(var(--token) / alpha). Rethemen doe je
   uitsluitend hier.
   ========================================================================== */

:root {
  /* Vlakken — het oorspronkelijke warme ivoor en crème */
  --canvas: 255 254 253;
  --surface: 255 255 255;
  --subtle: 250 246 238;
  --line: 236 229 218;

  /* Warme achtergrondtinten voor ritme over de lange pagina */
  --wash-cream: 250 246 238;
  --wash-amber: 255 247 225;
  --wash-stone: 244 240 235;
  --wash-deep: 235 229 223;

  /* Merk / hoofdkleur — amber (#fbb000), gebruikt als accent */
  --brand-50: 255 248 235;
  --brand-100: 253 236 200;
  --brand-200: 250 215 154;
  --brand-300: 247 193 99;
  --brand-400: 249 173 53;
  --brand-500: 251 176 0;
  --brand-600: 219 142 0;
  --brand-700: 156 96 0;

  /* Donker / structuur — het oorspronkelijke warme donker */
  --cta: 80 67 53;
  --cta-hover: 68 56 44;
  --night: 24 18 15;
  --night-line: 66 60 54;
  --night-ink: 245 241 236;
  --night-muted: 190 180 168;

  /* Tekst */
  --ink: 50 43 37;
  --ink-soft: 70 58 46;
  --ink-muted: 110 98 83;
  --ink-faint: 124 112 95;

  /* Negatief — warm gedempt rood */
  --danger-50: 250 240 238;
  --danger-100: 242 222 218;
  --danger-600: 170 68 56;

  /* Positief — zacht, licht groen */
  --money-50: 240 248 243;
  --money-100: 216 236 225;
  --money-300: 84 205 147; /* lichte variant, voor groen op donkere vlakken */
  --money-500: 92 184 142;
  --money-600: 64 154 114;
  --money-700: 48 124 92;

  /* Aardse accenten, afgestemd op het amber/crème palet */
  --clay-50: 250 240 232;
  --clay-100: 242 221 202;
  --clay-600: 176 96 56;
  --clay-700: 138 74 42;

  --sand-50: 249 243 230;
  --sand-100: 240 227 198;
  --sand-600: 158 116 46;

  --neutral-25: 247 247 248;
  --neutral-100: 227 227 230;

  --maxw: 1180px;
  --radius: 1.25rem;
  --shadow-card: 0 1px 2px 0 rgba(15, 23, 42, 0.04), 0 1px 3px 0 rgba(15, 23, 42, 0.06);
  --shadow-card-lg: 0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 12px 32px -10px rgba(15, 23, 42, 0.16);
}

/* ----- Reset / basis ---------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: rgb(var(--ink));
  background: rgb(var(--canvas));
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ----- Layout-helpers --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 640px) { .container { padding-inline: 2rem; } }

.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;
}

.section {
  padding-block: 4rem;
  background: rgb(var(--surface));
}
@media (min-width: 640px) { .section { padding-block: 6rem; } }

/* Waar een anchor-link landt: de bovenkant van de sectie net onder de sticky
   header (4rem) plus een kleine marge. Zo zie je de sectie vanaf het begin in
   plaats van halverwege.
   Geen JS nodig: de .reveal-blokken zitten bínnen de sectie, dus de sectiebox
   zelf wordt nooit getransformeerd en de browser rekent de landing goed uit. */
.section { scroll-margin-top: 4.75rem; }

.section--alt {
  background: rgb(var(--subtle));
  border-top: 1px solid rgb(var(--line));
  border-bottom: 1px solid rgb(var(--line));
}
.section--alt + .section--alt { border-top: 0; }

.grid-2 { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.center { text-align: center; }
.mx-auto { margin-inline: auto; }

/* ----- Typografie ------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgb(var(--ink-faint));
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.section-title {
  font-size: clamp(1.85rem, 4.5vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: rgb(var(--ink));
  margin-top: 1rem;
}

.lead {
  margin-top: 1rem;
  max-width: 38rem;
  font-size: 1.075rem;
  line-height: 1.65;
  color: rgb(var(--ink-muted));
}
.lead.center { margin-inline: auto; }

.highlight {
  display: inline;
  background-image: linear-gradient(rgb(var(--brand-300) / 0.7), rgb(var(--brand-300) / 0.7));
  background-repeat: no-repeat;
  background-position: 0 68%;
  background-size: 0% 0.8em;
  padding-inline: 0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: streep-grow 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.75s forwards;
}
@keyframes streep-grow { to { background-size: 100% 0.8em; } }

/* ----- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

.btn--primary {
  background: rgb(var(--cta));
  color: #fff;
  box-shadow: var(--shadow-card);
}
.btn--primary:hover { background: rgb(var(--cta-hover)); box-shadow: var(--shadow-card-lg); }
.btn--primary:focus-visible { outline: 2px solid rgb(var(--brand-700)); outline-offset: 2px; }

.btn--secondary {
  background: rgb(var(--surface));
  color: rgb(var(--ink-soft));
  border-color: rgb(var(--line));
}
/* Warme hover in plaats van het vorige neutrale grijs; naast de donkere
   primaire knop had deze anders nauwelijks een eigen reactie. Brons is
   dezelfde tint als de focus-ring, zodat beide statussen bij elkaar horen. */
.btn--secondary:hover {
  border-color: rgb(var(--brand-200));
  background: rgb(var(--brand-50));
  color: rgb(var(--brand-700));
}
.btn--secondary:focus-visible { outline: 2px solid rgb(var(--brand-700)); outline-offset: 2px; }

.btn--amber {
  background: rgb(var(--brand-300));
  color: rgb(var(--night));
  box-shadow: var(--shadow-card);
}
.btn--amber:hover { background: rgb(var(--brand-200)); box-shadow: var(--shadow-card-lg); }
.btn--amber:focus-visible { outline: 2px solid rgb(var(--night)); outline-offset: 2px; }

.btn--lg { padding: 0.75rem 1.25rem; font-size: 0.95rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: 0.65; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.btn-note { margin-top: 0.85rem; font-size: 0.8rem; color: rgb(var(--ink-faint)); }

/* ----- Chips / badges --------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid rgb(var(--line));
  background: rgb(var(--surface));
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(var(--ink-soft));
}
.chips { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.75rem; }
.chip svg { color: rgb(var(--ink)); }

.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgb(var(--ink-faint));
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.badge-green,
.badge-amber,
.badge-neutral {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.badge-green { background: rgb(var(--money-50)); color: rgb(var(--money-700)); border: 1px solid rgb(var(--money-100)); }
.badge-amber { background: rgb(var(--brand-50)); color: rgb(var(--brand-700)); border: 1px solid rgb(var(--brand-100)); }
.badge-neutral { background: rgb(var(--neutral-25)); color: rgb(var(--ink-muted)); border: 1px solid rgb(var(--neutral-100)); }

/* ----- Card ------------------------------------------------------------- */
.card {
  border: 1px solid rgb(var(--line));
  background: rgb(var(--surface));
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid rgb(var(--line));
  background: rgb(var(--subtle) / 0.6);
  padding: 0.7rem 1.25rem;
}
.card-bar-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(var(--ink-faint));
}

/* Icon-helpers */
.icon { width: 1.25rem; height: 1.25rem; flex: none; }
.icon-sm { width: 1rem; height: 1rem; flex: none; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}
.site-header.is-scrolled {
  background: rgb(var(--surface) / 0.8);
  backdrop-filter: blur(12px);
  border-bottom-color: rgb(var(--line));
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4rem;
}
.logo { height: 2.25rem; width: auto; user-select: none; }
.nav { display: none; }
.nav ul { display: flex; align-items: center; gap: 0.25rem; }
.nav a {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgb(var(--ink-muted));
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav a:hover { background: rgb(var(--brand-100)); color: rgb(var(--brand-700)); }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.header-cta { display: none; }

.menu-toggle {
  display: grid;
  place-items: center;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 0.625rem;
  border: 1px solid rgb(var(--line));
  background: rgb(var(--surface));
  color: rgb(var(--ink-soft));
  box-shadow: var(--shadow-card);
}
.mobile-nav {
  display: none;
  border-top: 1px solid rgb(var(--line));
  background: rgb(var(--surface));
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 0.6rem; padding-block: 0.75rem; }
.mobile-nav a {
  padding: 0.75rem 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgb(var(--ink-muted));
}
.mobile-nav a:hover { background: rgb(var(--subtle)); color: rgb(var(--ink)); }
.mobile-nav .btn { margin-top: 0.5rem; }
.mobile-nav a.btn--primary,
.mobile-nav a.btn--primary:hover { color: #fff; background: rgb(var(--cta)); }

@media (min-width: 1024px) {
  .nav { display: block; }
  .header-cta { display: inline-flex; }
  .menu-toggle { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: -4rem;
  background: rgb(var(--surface));
}
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-dots {
  position: absolute;
  inset: 0 0 auto;
  height: 38%;
  background-image: radial-gradient(rgb(var(--ink) / 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 58% 72% at 50% 0%, black 18%, transparent 58%);
  mask-image: radial-gradient(ellipse 58% 72% at 50% 0%, black 18%, transparent 58%);
}
.hero-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(var(--brand-100) / 0.4) 0%, rgb(var(--brand-50) / 0.25) 18%, transparent 42%);
}
.hero-inner {
  display: grid;
  gap: 3rem;
  align-items: center;
  padding-block: 5.75rem 2rem;
}
@media (min-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr 1fr; padding-block: 9rem 3rem; }
}
@media (max-width: 480px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-inner > .fade-up, .hero-inner > .visual { min-width: 0; }
}
@media (max-width: 1023px) {
  .hero-inner .fade-up { text-align: center; }
  .hero-inner .fade-up .hero-sub { margin-inline: auto; }
  .hero-inner .fade-up .btn-row,
  .hero-inner .fade-up .chips { justify-content: center; }
}

.hero h1 {
  margin-top: 1.25rem;
  font-size: clamp(2.35rem, 6.5vw, 2.9rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: rgb(var(--ink));
}
.hero-sub {
  margin-top: 1.25rem;
  max-width: 34rem;
  font-size: 1.075rem;
  line-height: 1.65;
  color: rgb(var(--ink-muted));
}

/* Op telefoonformaat krijgt de kop wat meer gewicht en stapt het labeltje
   erboven juist terug, zodat de verhouding tussen die twee klopt. Zelfde grens
   als waar de hero-art stapelt. */
@media (max-width: 619px) {
  /* De ondergrens van de clamp bepaalt hier de maat (6.5vw blijft er onder),
     dus die met 10% opgehoogd: 2.35rem -> 2.585rem. */
  .hero h1 { font-size: clamp(2.585rem, 6.5vw, 2.9rem); }
  /* 0.75rem -> 0.6rem (20% kleiner), daarna 10% terug omhoog naar 0.66rem. */
  .badge-live { font-size: 0.66rem; }
}

.visual { position: relative; }
.hero-inner > .visual { margin-top: 0.75rem; }
@media (min-width: 1024px) {
  .hero-inner > .visual { margin-top: 1.5rem; }
}

/* ==========================================================================
   Hero-art — één geselecteerde kandidaat gekoppeld aan één vacature
   ========================================================================== */
.hero-match {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 35rem;
  margin-inline: auto;
  aspect-ratio: 560 / 410;
}
.hero-match::before {
  content: "";
  position: absolute;
  inset: 3% 2%;
  z-index: -3;
  border-radius: 50%;
  /* Tint van de neutrale bal achter de werkwijze-stappen, maar lichter, met
     twee warme amberkernen erin zodat de bal kleur heeft in plaats van grijs.
     De schaduw is zacht en ver uitgelopen, zodat de vorm lift krijgt zonder
     dat er een harde rand omheen ontstaat. */
  background:
    radial-gradient(circle at 30% 24%, rgb(var(--brand-200) / 0.32), transparent 62%),
    radial-gradient(circle at 76% 80%, rgb(var(--brand-100) / 0.30), transparent 58%),
    rgb(var(--cta) / 0.04);
  box-shadow: 0 18px 52px -34px rgb(var(--night) / 0.22);
  animation: hero-art-bg-in 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

/* ----- Decor achter de hero-art ----------------------------------------- */
/* De kaarten stonden op een vrijwel lege ondergrond. Deze laag geeft diepte:
   hetzelfde fijne stippenraster als .hero-dots bovenaan de sectie, twee dunne
   ringen en drie amberaccenten. Alles zit tussen de bal (-3) en de kaarten
   (positieve z-index) in. */
.hero-deco {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  animation: hero-art-bg-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
}
.hero-deco::before {
  content: "";
  position: absolute;
  inset: -6% -4%;
  background-image: radial-gradient(rgb(var(--ink) / 0.055) 1px, transparent 1px);
  background-size: 22px 22px;
  /* Zonder masker zou het raster een zichtbaar vierkant blok vormen. */
  -webkit-mask-image: radial-gradient(ellipse 54% 54% at 50% 50%, black 18%, transparent 74%);
  mask-image: radial-gradient(ellipse 54% 54% at 50% 50%, black 18%, transparent 74%);
}

.hero-deco-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgb(var(--cta) / 0.08);
}
.hero-deco-ring--out { inset: -5% -6%; }
.hero-deco-ring--in {
  inset: 9% 8%;
  border-style: dashed;
  border-color: rgb(var(--brand-400) / 0.18);
}

.hero-deco-spark {
  position: absolute;
  border-radius: 50%;
  background: rgb(var(--brand-400));
  box-shadow: 0 0 0 0.25rem rgb(var(--brand-300) / 0.18);
  animation: hero-spark-float 6s ease-in-out infinite;
}
.hero-deco-spark--1 { top: 7%; left: 13%; width: 0.4rem; height: 0.4rem; }
.hero-deco-spark--2 { top: 79%; left: 7%; width: 0.28rem; height: 0.28rem; animation-delay: -2s; }
.hero-deco-spark--3 { top: 15%; right: 8%; width: 0.34rem; height: 0.34rem; animation-delay: -4s; }

@keyframes hero-spark-float {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(-0.4rem); opacity: 1; }
}

.hero-profile-card,
.hero-job-card {
  border-radius: 1rem;
  text-align: left;
}

.hero-profile-stack {
  position: absolute;
  left: 2%;
  top: 25%;
  z-index: 3;
  width: 17.6rem;
  isolation: isolate;
  --hero-profile-rest: rotate(-1.25deg);
  transform: var(--hero-profile-rest);
  animation: hero-profile-in 0.78s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
}
.hero-profile-card {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 1.1rem;
  border: 1px solid rgb(var(--ink) / 0.12);
  background: rgb(var(--surface));
  box-shadow: 0 24px 52px -32px rgb(var(--night) / 0.45);
}
.hero-profile-stack::before {
  content: "";
  position: absolute;
  inset: 0.55rem -0.45rem -0.55rem 0.55rem;
  z-index: 1;
  border: 1px solid rgb(var(--ink) / 0.08);
  border-radius: 1rem;
  /* Bewust geen backdrop-filter. De ouder animeert opacity en is daardoor
     tijdens de animatie wél een backdrop root en daarna niet meer, waardoor
     deze laag halverwege omklapt ten opzichte van de vacaturekaart. Een iets
     dekkender vlak geeft hetzelfde matglas zonder die afhankelijkheid; wat
     erachter ligt is toch alleen de zachte bal met het stippenraster. */
  background: rgb(var(--surface) / 0.72);
  transform: rotate(2.4deg);
}
.hero-card-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgb(var(--brand-700));
}
.hero-profile-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.8rem;
}
.hero-profile-main img {
  height: 3.4rem;
  width: 3.4rem;
  flex: none;
  border: 2px solid rgb(var(--brand-300));
  border-radius: 999px;
  object-fit: cover;
}
.hero-profile-main > span { display: grid; gap: 0.18rem; min-width: 0; }
.hero-profile-main strong { font-size: 0.92rem; color: rgb(var(--ink)); }
.hero-profile-main small { font-size: 0.7rem; color: rgb(var(--ink-faint)); }
.hero-profile-data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgb(var(--line));
}
.hero-profile-data div { display: grid; gap: 0.12rem; }
.hero-profile-data dt { font-size: 0.58rem; color: rgb(var(--ink-faint)); }
.hero-profile-data dd { margin: 0; font-size: 0.72rem; font-weight: 650; color: rgb(var(--ink-soft)); }
.hero-profile-verified {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.9rem;
  font-size: 0.7rem;
  font-weight: 650;
  color: rgb(var(--cta));
}
.hero-profile-verified i {
  display: grid;
  place-items: center;
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 999px;
  background: rgb(var(--brand-300));
  color: rgb(var(--night));
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
}

.hero-job-card {
  position: absolute;
  right: 1%;
  top: 14%;
  z-index: 2;
  width: 16.4rem;
  padding: 1.25rem;
  border: 1px solid rgb(255 255 255 / 0.2);
  background: rgb(var(--cta));
  box-shadow:
    inset 0 1px rgb(255 255 255 / 0.08),
    0 26px 56px -30px rgb(var(--night) / 0.62);
  animation: hero-job-in 0.76s cubic-bezier(0.22, 1, 0.36, 1) 0.34s both;
}
.hero-job-card .hero-card-label { color: rgb(var(--brand-300)); }
/* Bewust een <p> en geen <h2>: dit is de verzonnen vacaturetitel in de
   hero-illustratie. Als kop kwam die als eerste h2 onder de h1 in de
   documentstructuur terecht, alsof de pagina over die functie ging. */
.hero-job-title {
  margin-top: 0.65rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: #fff;
}
.hero-job-meta { margin-top: 0.28rem; font-size: 0.72rem; color: rgb(255 255 255 / 0.7); }
.hero-job-list {
  display: grid;
  gap: 0.48rem;
  margin-top: 1.05rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
}
.hero-job-list li {
  position: relative;
  padding-left: 0.8rem;
  font-size: 0.68rem;
  color: rgb(255 255 255 / 0.76);
}
.hero-job-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  height: 0.28rem;
  width: 0.28rem;
  border-radius: 999px;
  background: rgb(var(--brand-300));
}
.hero-match-bridge {
  position: absolute;
  left: 44%;
  top: 54%;
  z-index: 4;
  width: 25%;
  height: 2.4rem;
  animation: hero-bridge-in 0.58s cubic-bezier(0.22, 1, 0.36, 1) 0.72s both;
}
.hero-match-bridge > span {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: rgb(var(--brand-300));
}
.hero-match-bridge strong {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.42rem 0.68rem 0.42rem 0.46rem;
  border: 1px solid rgb(var(--ink) / 0.1);
  border-radius: 999px;
  /* Zelfde reden als bij .hero-profile-stack::before: de ouder animeert
     opacity, dus een backdrop-filter klapt hier na de animatie om. */
  background: rgb(var(--surface) / 0.88);
  color: rgb(var(--cta));
  font-size: 0.63rem;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.82),
    0 12px 24px -16px rgb(var(--night) / 0.45);
  transform: translate(-50%, -50%);
}
.hero-match-bridge strong i {
  display: grid;
  place-items: center;
  height: 1.2rem;
  width: 1.2rem;
  border-radius: 999px;
  background: rgb(var(--brand-300));
  color: rgb(var(--night));
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 900;
}
.hero-match-bridge strong b { font-weight: 700; }

@keyframes hero-art-bg-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes hero-profile-in {
  from { opacity: 0; transform: translate(-1rem, 0.75rem) scale(0.97); }
  to { opacity: 1; transform: var(--hero-profile-rest); }
}
@keyframes hero-job-in {
  from { opacity: 0; transform: translate(1rem, -0.5rem) scale(0.97); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-bridge-in {
  from { opacity: 0; transform: scale(0.82); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 619px) {
  .hero-match {
    display: grid;
    justify-items: center;
    gap: 0.8rem;
    aspect-ratio: auto;
    padding: 1rem 0.5rem;
  }
  .hero-match::before { inset: 0 4%; border-radius: 3rem; }
  /* Gestapeld is er nauwelijks vrije achtergrond: de ringen zouden de rand van
     het vlak hierboven dubbelen en de accenten vallen achter de kaarten. Alleen
     het stippenraster blijft over. */
  .hero-deco-ring,
  .hero-deco-spark { display: none; }
  .hero-profile-stack,
  .hero-job-card {
    position: relative;
    inset: auto;
    width: min(100%, 19rem);
    transform: none;
  }
  .hero-profile-stack { z-index: 2; --hero-profile-rest: none; }
  .hero-profile-card { width: 100%; }
  .hero-job-card { z-index: 1; }
  .hero-match-bridge {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 19rem;
    height: 2.8rem;
  }
  /* Gestapeld staan de kaarten al onder elkaar; de verticale amberlijn werd
     daar een losse streep zonder functie. De pil ertussen legt het verband al. */
  .hero-match-bridge > span { display: none; }
}

/* ==========================================================================
   Kandidaat-kaarten (overige secties)
   ========================================================================== */
.cand-stack { display: grid; gap: 0.85rem; }

.cand-card {
  position: relative;
  border: 1px solid rgb(var(--line));
  background: rgb(var(--surface));
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.cand-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-lg); border-color: rgb(var(--brand-200)); }
.cand-card.is-picked { border-color: rgb(var(--money-500)); box-shadow: 0 0 0 3px rgb(var(--money-100)); }

.cand-head { display: flex; align-items: center; gap: 0.8rem; }
.cand-avatar {
  display: grid;
  place-items: center;
  height: 2.75rem;
  width: 2.75rem;
  flex: none;
  border-radius: 999px;
  background: rgb(var(--brand-50));
  border: 1px solid rgb(var(--brand-100));
  color: rgb(var(--brand-700));
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.cand-avatar--clay { background: rgb(var(--clay-50)); border-color: rgb(var(--clay-100)); color: rgb(var(--clay-700)); }
.cand-avatar--sand { background: rgb(var(--sand-50)); border-color: rgb(var(--sand-100)); color: rgb(var(--sand-600)); }
.cand-avatar--money { background: rgb(var(--money-50)); border-color: rgb(var(--money-100)); color: rgb(var(--money-700)); }

.cand-id { min-width: 0; flex: 1; }
.cand-role { font-size: 0.95rem; font-weight: 700; color: rgb(var(--ink)); line-height: 1.3; }
.cand-meta { margin-top: 0.15rem; font-size: 0.8rem; color: rgb(var(--ink-faint)); }

.cand-match {
  display: grid;
  place-items: center;
  flex: none;
  text-align: center;
  border-radius: 0.7rem;
  padding: 0.3rem 0.55rem;
  background: rgb(var(--money-50));
  border: 1px solid rgb(var(--money-100));
}
.cand-match-num { font-size: 0.95rem; font-weight: 700; color: rgb(var(--money-700)); line-height: 1.1; }
.cand-match-lbl { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: rgb(var(--money-600)); }

.cand-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.85rem; }
.cand-tag {
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgb(var(--ink-muted));
  background: rgb(var(--subtle));
  border: 1px solid rgb(var(--line));
}

.cand-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid rgb(var(--line));
}
.cand-fee { font-size: 0.78rem; color: rgb(var(--ink-faint)); }
.cand-fee strong { color: rgb(var(--ink-soft)); font-weight: 600; }
.cand-act {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgb(var(--brand-700));
}

/* subtiele instap-animatie voor de hero-stack */
.cand-stack .cand-card { animation: card-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.cand-stack .cand-card:nth-child(1) { animation-delay: 0.15s; }
.cand-stack .cand-card:nth-child(2) { animation-delay: 0.3s; }
.cand-stack .cand-card:nth-child(3) { animation-delay: 0.45s; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ==========================================================================
   "Je kreeg een mail van ons" — compacte rij
   ========================================================================== */
.mailrow { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .mailrow { grid-template-columns: 0.82fr 1.18fr; gap: 3rem; } }
.mailrow-art { display: flex; justify-content: center; }

.mail-facts { display: grid; gap: 0.7rem; margin-top: 1.5rem; }
.mail-facts li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.93rem;
  line-height: 1.6;
  color: rgb(var(--ink-muted));
}
.mail-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 999px;
  background: rgb(var(--brand-400));
}
.mail-facts strong { color: rgb(var(--ink)); font-weight: 600; }

/* Compacte desktopweergave, gebaseerd op de rustige structuur van Apple Mail. */
.mailnote {
  width: 100%;
  max-width: 39.5rem;
  border: 1px solid rgb(var(--ink) / 0.12);
  background: rgb(var(--surface));
  border-radius: 1rem;
  box-shadow: 0 22px 55px -34px rgb(var(--night) / 0.36);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.mailnote-chrome {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 2.8rem;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid rgb(var(--line));
  background: rgb(var(--subtle) / 0.86);
  box-shadow: inset 0 1px rgb(255 255 255 / 0.75);
}
.mailnote-window-controls {
  display: flex;
  gap: 0.38rem;
}
.mailnote-window-controls i {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--night) / 0.1);
}
.mailnote-window-controls i:nth-child(1) { background: rgb(255 95 87 / 0.82); }
.mailnote-window-controls i:nth-child(2) { background: rgb(254 188 46 / 0.82); }
.mailnote-window-controls i:nth-child(3) { background: rgb(40 200 64 / 0.75); }
.mailnote-toolbar {
  display: flex;
  justify-self: end;
  gap: 0.25rem;
}
.mailnote-toolbar i,
.mailnote-reply {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.45rem;
  border: 1px solid rgb(var(--ink) / 0.08);
  border-radius: 0.38rem;
  background: rgb(var(--surface) / 0.72);
  color: rgb(var(--ink-muted));
  font-size: 0.72rem;
  font-style: normal;
}
.mailnote-tool--archive::before {
  content: "";
  width: 0.62rem;
  height: 0.43rem;
  border: 1.2px solid currentColor;
  border-radius: 0.08rem;
  box-shadow: inset 0 0.13rem 0 rgb(var(--surface));
}
.mailnote-tool--archive::after {
  content: "";
  position: absolute;
  top: 0.49rem;
  width: 0.26rem;
  border-top: 1.2px solid currentColor;
}
.mailnote-tool--trash::before {
  content: "";
  width: 0.46rem;
  height: 0.5rem;
  margin-top: 0.12rem;
  border: 1.2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 0.08rem 0.08rem;
}
.mailnote-tool--trash::after {
  content: "";
  position: absolute;
  top: 0.39rem;
  width: 0.62rem;
  border-top: 1.2px solid currentColor;
  box-shadow: 0 -0.14rem 0 -0.03rem currentColor;
}
.mailnote-tool--more { padding-bottom: 0.3rem; }
.mailnote-app {
  font-size: 0.72rem;
  font-weight: 650;
  color: rgb(var(--ink-soft));
}

.mailnote-shell {
  display: grid;
  grid-template-columns: 11.75rem minmax(0, 1fr);
  /* Extra verticale lucht houdt de mailbox rustig en geeft de berichtenlijst
     en de geopende mail meer ruimte zonder de breedte te veranderen. De ruimte
     komt onder de brief terecht; op deze hoogte loopt de mailbox vrijwel gelijk
     met de tekstkolom ernaast. */
  min-height: 24.5rem;
}
.mailnote-sidebar {
  padding: 0.68rem 0.52rem 0.8rem;
  border-right: 1px solid rgb(var(--line));
  background: rgb(var(--subtle) / 0.78);
  box-shadow: inset -1px 0 rgb(255 255 255 / 0.55);
}
.mailnote-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.38rem 0.62rem;
  font-size: 0.68rem;
  color: rgb(var(--ink-soft));
}
.mailnote-sidebar-title {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  min-width: 0;
}
.mailnote-sidebar-title svg {
  width: 0.82rem;
  height: 0.82rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mailnote-sidebar-title strong { font-weight: 680; }
.mailnote-sidebar-count {
  display: grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1rem;
  padding-inline: 0.3rem;
  border: 1px solid rgb(var(--line) / 0.8);
  border-radius: 999px;
  background: rgb(var(--surface) / 0.45);
  color: rgb(var(--ink-faint));
  font-size: 0.52rem;
  font-weight: 700;
}
.mailnote-preview {
  position: relative;
  display: grid;
  gap: 0.18rem;
  padding: 0.7rem 0.68rem;
  border: 1px solid rgb(255 255 255 / 0.94);
  border-radius: 0.66rem;
  background: rgb(var(--surface) / 0.8);
  box-shadow:
    inset 0 1px rgb(255 255 255 / 0.9),
    0 10px 22px -17px rgb(var(--night) / 0.32);
  -webkit-backdrop-filter: blur(12px) saturate(112%);
  backdrop-filter: blur(12px) saturate(112%);
}
.mailnote-preview[aria-current="true"] .mailnote-preview-top strong {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}
.mailnote-preview[aria-current="true"] .mailnote-preview-top strong::before {
  content: "";
  width: 0.28rem;
  height: 0.28rem;
  flex: none;
  border-radius: 999px;
  background: rgb(var(--brand-300) / 0.7);
}
.mailnote-preview--muted {
  gap: 0.12rem;
  margin-top: 0.2rem;
  padding: 0.5rem 0.58rem 0.48rem;
  border: 0;
  border-top: 1px solid rgb(var(--line) / 0.72);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0.42;
  filter: grayscale(0.82);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mailnote-preview-top {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.63rem;
  color: rgb(var(--ink));
}
.mailnote-preview-top time { color: rgb(var(--ink-faint)); font-size: 0.58rem; }
.mailnote-preview-subject {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-size: 0.63rem;
  line-height: 1.3;
  color: rgb(var(--ink-soft));
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mailnote-preview-copy {
  overflow: hidden;
  color: rgb(var(--ink-faint));
  font-size: 0.58rem;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mailnote-message { min-width: 0; background: rgb(var(--surface)); }

.mailnote-subject-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.3rem 0.78rem;
}
.mailnote-subject {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: rgb(var(--ink));
}
.mailnote-sender {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.3rem 0.9rem;
  border-bottom: 1px solid rgb(var(--line));
}
.mailnote-sender-mark {
  display: grid;
  place-items: center;
  height: 2rem;
  width: 2rem;
  flex: none;
  border-radius: 999px;
  border: 1px solid rgb(var(--brand-200) / 0.5);
  background: rgb(var(--brand-100) / 0.62);
  color: rgb(var(--ink-soft));
  font-size: 0.65rem;
  font-weight: 800;
  box-shadow: 0 0 0 3px rgb(var(--brand-50) / 0.72);
}
.mailnote-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mailnote-from { font-size: 0.7rem; font-weight: 650; color: rgb(var(--ink)); }
.mailnote-to { margin-top: 0.08rem; font-size: 0.59rem; color: rgb(var(--ink-faint)); }
.mailnote-time { flex: none; font-size: 0.58rem; color: rgb(var(--ink-faint)); }
.mailnote-reply { flex: none; }

.mailnote-body { padding: 0.95rem 1.1rem 1.15rem; }
.mailnote-body p { font-size: 0.75rem; line-height: 1.62; color: rgb(var(--ink-soft)); }
.mailnote-body p + p { margin-top: 0.78rem; }
.mailnote-body strong { color: rgb(var(--ink)); font-weight: 600; }
.mailnote-letter {
  overflow: hidden;
  border: 1px solid rgb(var(--brand-200) / 0.62);
  border-radius: 0.78rem;
  background: rgb(var(--surface));
  box-shadow:
    inset 0 1px rgb(255 255 255 / 0.82),
    0 14px 28px -24px rgb(var(--night) / 0.38);
}
.mailnote-personal {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.68rem 0.72rem;
  border-bottom: 1px solid rgb(var(--brand-200) / 0.52);
  background: rgb(var(--brand-50) / 0.6);
  box-shadow: inset 0 1px rgb(255 255 255 / 0.76);
}
.mailnote-personal-icon {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  flex: none;
  border: 1px solid rgb(var(--brand-200) / 0.75);
  border-radius: 0.5rem;
  background: rgb(var(--surface) / 0.8);
  color: rgb(var(--brand-700));
}
.mailnote-personal-icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mailnote-personal-copy { display: grid; gap: 0.08rem; min-width: 0; }
.mailnote-personal-copy strong {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgb(var(--ink));
}
.mailnote-personal-copy small {
  overflow: hidden;
  font-size: 0.58rem;
  color: rgb(var(--ink-muted));
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mailnote-letter-copy { padding: 0.88rem 0.9rem 1rem; }
.mailnote-letter-copy.has-typewriter { min-height: 9.5rem; }
.mailnote-letter-copy.has-typewriter .mailnote-letter-static {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.mailnote-letter-typed { display: none; }
.mailnote-letter-copy.has-typewriter .mailnote-letter-typed { display: block; }
.mailnote-caret {
  display: inline-block;
  width: 1.5px;
  height: 0.9em;
  margin-left: 2px;
  background: rgb(var(--brand-700));
  vertical-align: -0.1em;
  animation: mailnote-caret-blink 0.75s steps(1, end) infinite;
}
@keyframes mailnote-caret-blink { 50% { opacity: 0; } }

@media (max-width: 540px) {
  .mailnote-shell { grid-template-columns: 1fr; min-height: 0; }
  .mailnote-sidebar { display: none; }
  .mailnote-subject-row { padding: 1.05rem 1rem 0.7rem; }
  .mailnote-sender { padding: 0 1rem 0.8rem; }
  .mailnote-body { padding: 1rem; }
  .mailnote-personal { padding: 0.64rem 0.68rem; }
  .mailnote-letter-copy.has-typewriter { min-height: 11rem; }
}

/* ==========================================================================
   Mailkaart (generiek, ongebruikt in de huidige pagina)
   ========================================================================== */
.mail-card { max-width: 40rem; }
.mail-body { padding: 1.35rem 1.5rem 1.5rem; }
.mail-line { font-size: 0.92rem; line-height: 1.7; color: rgb(var(--ink-muted)); }
.mail-line + .mail-line { margin-top: 0.9rem; }
.mail-line strong { color: rgb(var(--ink)); font-weight: 600; }
.answer-list { display: grid; gap: 1.1rem; margin-top: 1.75rem; }
.answer {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.answer-ck {
  display: grid;
  place-items: center;
  height: 1.6rem;
  width: 1.6rem;
  flex: none;
  margin-top: 0.1rem;
  border-radius: 999px;
  background: rgb(var(--brand-50));
  border: 1px solid rgb(var(--brand-100));
  color: rgb(var(--brand-300));
}
.answer-ck svg { width: 0.85rem; height: 0.85rem; }
.answer h3 { font-size: 0.98rem; font-weight: 700; color: rgb(var(--ink)); }
.answer p { margin-top: 0.25rem; font-size: 0.92rem; line-height: 1.65; color: rgb(var(--ink-muted)); }

/* ==========================================================================
   Werkwijze — drie stappen met art
   ========================================================================== */
.flow { display: grid; gap: 1.25rem; margin-top: 3.25rem; }
@media (min-width: 860px) { .flow { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

.flow-step {
  position: relative;
  border: 1px solid rgb(var(--line));
  background: rgb(var(--surface));
  border-radius: 1.1rem;
  padding: 0 1.4rem 1.65rem;
  box-shadow: 0 14px 34px -28px rgb(var(--night) / 0.45);
  overflow: hidden;
}
.flow-art {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: 11rem;
  margin-inline: -1.4rem;
  padding: 1.2rem;
  overflow: hidden;
  background: linear-gradient(145deg, rgb(var(--wash-cream)), rgb(var(--wash-stone)));
  border-bottom: 1px solid rgb(var(--line));
}
.flow-art::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -3.5rem;
  right: -2.5rem;
  height: 8rem;
  width: 8rem;
  border-radius: 999px;
  background: rgb(var(--brand-300) / 0.28);
}
.flow-art::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -3.25rem;
  left: -2rem;
  height: 7rem;
  width: 7rem;
  border-radius: 999px;
  background: rgb(var(--cta) / 0.08);
}

/* De drie illustraties zijn mini-interfaces in hetzelfde merkpalet. */
.flow-ui {
  width: 100%;
  max-width: 15.5rem;
  padding: 0.72rem;
  border: 1px solid rgb(var(--line));
  border-radius: 0.85rem;
  background: rgb(var(--surface) / 0.96);
  box-shadow: 0 18px 32px -24px rgb(var(--night) / 0.48);
}
.flow-ui-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.flow-ui-label { font-size: 0.64rem; font-weight: 700; color: rgb(var(--ink)); }
.flow-intake-duration { font-size: 0.56rem; font-weight: 650; color: rgb(var(--ink-faint)); }
.flow-avatar {
  display: grid;
  place-items: center;
  height: 2.2rem;
  width: 2.2rem;
  flex: none;
  border-radius: 0.7rem;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 800;
}
.flow-avatar--candidate {
  color: rgb(var(--night));
  background: rgb(var(--brand-300));
  box-shadow: 0 0 0 4px rgb(var(--brand-100));
}
.flow-avatar--recruiter,
.flow-avatar--employer {
  color: rgb(var(--night-ink));
  background: rgb(var(--cta));
  box-shadow: 0 0 0 4px rgb(var(--wash-cream));
}

.flow-intake-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 0.55rem;
  margin-top: 0.65rem;
}
.flow-intake-call,
.flow-intake-notes {
  min-width: 0;
  border: 1px solid rgb(var(--line));
  border-radius: 0.65rem;
  background: rgb(var(--subtle) / 0.62);
  padding: 0.58rem;
}
.flow-intake-avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 0.18rem;
}
.flow-intake-avatars .flow-avatar {
  height: 1.85rem;
  width: 1.85rem;
  border-radius: 999px;
  font-size: 0.62rem;
  box-shadow: 0 0 0 2px rgb(var(--surface));
}
.flow-intake-avatars .flow-avatar + .flow-avatar { margin-left: -0.38rem; }
.flow-intake-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  margin-top: 0.35rem;
  font-size: 0.5rem;
  font-weight: 700;
  color: rgb(var(--ink-muted));
}
.flow-intake-status i {
  height: 0.32rem;
  width: 0.32rem;
  border-radius: 999px;
  background: rgb(var(--brand-300));
}
.flow-intake-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  height: 1rem;
  margin-top: 0.18rem;
}
.flow-intake-wave i { width: 0.12rem; border-radius: 999px; background: rgb(var(--cta) / 0.72); }
.flow-intake-wave i:nth-child(1),
.flow-intake-wave i:nth-child(7) { height: 0.3rem; }
.flow-intake-wave i:nth-child(2),
.flow-intake-wave i:nth-child(6) { height: 0.55rem; }
.flow-intake-wave i:nth-child(3),
.flow-intake-wave i:nth-child(5) { height: 0.78rem; }
.flow-intake-wave i:nth-child(4) { height: 1rem; background: rgb(var(--brand-300)); }
.flow-intake-notes { display: grid; gap: 0.3rem; background: rgb(var(--surface)); }
.flow-intake-notes strong { margin-bottom: 0.05rem; font-size: 0.52rem; color: rgb(var(--ink)); }
.flow-intake-notes span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.5rem;
  color: rgb(var(--ink-muted));
}
.flow-intake-notes span i {
  height: 0.36rem;
  width: 0.36rem;
  flex: none;
  border-radius: 999px;
  background: rgb(var(--brand-300));
}

.flow-searchbar {
  display: flex;
  align-items: center;
  gap: 0.48rem;
  border: 1px solid rgb(var(--line));
  border-radius: 0.55rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.58rem;
  font-weight: 600;
  color: rgb(var(--ink-muted));
  background: rgb(var(--subtle) / 0.7);
}
.flow-search-icon {
  position: relative;
  height: 0.65rem;
  width: 0.65rem;
  flex: none;
  border: 1.5px solid rgb(var(--cta));
  border-radius: 999px;
}
.flow-search-icon::after {
  content: "";
  position: absolute;
  right: -0.25rem;
  bottom: -0.15rem;
  height: 1.5px;
  width: 0.3rem;
  background: rgb(var(--cta));
  transform: rotate(45deg);
}
.flow-company-list { display: grid; gap: 0.32rem; margin-top: 0.48rem; }
.flow-company {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 0.48rem;
}
.flow-company.is-best { border-color: rgb(var(--brand-200)); background: rgb(var(--brand-50)); }
.flow-company-logo {
  display: grid;
  place-items: center;
  height: 1.35rem;
  width: 1.35rem;
  flex: none;
  border-radius: 0.4rem;
  font-size: 0.5rem;
  font-weight: 800;
  color: rgb(var(--cta));
  background: rgb(var(--wash-cream));
}
.flow-company.is-best .flow-company-logo { color: rgb(var(--night)); background: rgb(var(--brand-300)); }
.flow-company-copy { display: grid; flex: 1; gap: 0.2rem; }
.flow-company-copy i { display: block; height: 0.24rem; border-radius: 999px; background: rgb(var(--line)); }
.flow-company-copy i:first-child { width: 76%; background: rgb(var(--ink-faint) / 0.58); }
.flow-company-copy i:last-child { width: 54%; }
.flow-company strong { font-size: 0.55rem; font-weight: 600; color: rgb(var(--ink-faint)); }
.flow-company.is-best strong { color: rgb(var(--ink-muted)); }

.flow-match-route {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.15rem 0.85rem;
}
.flow-profile { display: grid; justify-items: center; gap: 0.42rem; flex: none; }
.flow-profile small { font-size: 0.52rem; font-weight: 700; color: rgb(var(--ink-muted)); }
.flow-route-line {
  position: relative;
  width: 5rem;
  height: 2px;
  margin-inline: 0.45rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--brand-300)), rgb(var(--cta)));
}
.flow-route-check {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  height: 1.45rem;
  width: 1.45rem;
  border: 3px solid rgb(var(--surface));
  border-radius: 999px;
  background: rgb(var(--brand-300));
  color: rgb(var(--night));
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
  transform: translate(-50%, -50%);
}
.flow-match-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.62rem;
  border-top: 1px solid rgb(var(--line));
  font-size: 0.56rem;
  color: rgb(var(--ink-faint));
}
.flow-match-meta strong { color: rgb(var(--cta)); }

.flow-num {
  display: inline-block;
  margin-top: 1.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgb(var(--cta));
}
.flow-step h3 { margin-top: 0.5rem; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; color: rgb(var(--ink)); }
.flow-step p { margin-top: 0.6rem; font-size: 0.93rem; line-height: 1.65; color: rgb(var(--ink-muted)); }

/* ==========================================================================
   Stappen (generiek, ongebruikt in de huidige pagina)
   ========================================================================== */
.steps { display: grid; gap: 1.25rem; margin-top: 3rem; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }

.step {
  position: relative;
  border: 1px solid rgb(var(--line));
  background: rgb(var(--surface));
  border-radius: var(--radius);
  padding: 1.5rem 1.35rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-lg); }
.step-num {
  display: grid;
  place-items: center;
  height: 2.25rem;
  width: 2.25rem;
  border-radius: 0.75rem;
  background: rgb(var(--brand-50));
  border: 1px solid rgb(var(--brand-100));
  color: rgb(var(--brand-700));
  font-size: 0.9rem;
  font-weight: 700;
}
.step h3 { margin-top: 1rem; font-size: 1rem; font-weight: 700; color: rgb(var(--ink)); }
.step p { margin-top: 0.5rem; font-size: 0.9rem; line-height: 1.65; color: rgb(var(--ink-muted)); }

/* ==========================================================================
   Verschil — bureau vs. ons, als route-vergelijking
   ========================================================================== */
.vs { display: grid; gap: 1.25rem; margin-top: 3.25rem; }
@media (min-width: 900px) { .vs { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

.vs-col {
  display: flex;
  flex-direction: column;
  /* grid-item met min-width:auto zou meegroeien met de brede tijdlijn erin */
  min-width: 0;
  border-radius: 1.1rem;
  border: 1px solid rgb(var(--line));
  background: rgb(var(--surface));
  padding: 1.35rem;
  box-shadow: 0 16px 38px -30px rgb(var(--night) / 0.4);
}
/* Links wit, rechts het donkere bruine vlak — zelfde opzet als het
   ROI-blok op trodu.net: rgb(var(--cta)) als grond, amber als accent en
   rgb(255 255 255 / 0.055) voor de kaartjes erbinnen. */
.vs-col--them { background: rgb(var(--surface)); }

.vs-col--us {
  background: rgb(var(--cta));
  border-color: rgb(var(--cta));
  color: #fff;
  box-shadow: 0 22px 46px -28px rgb(var(--cta) / 0.6);
}
.vs-col--us .vs-head h3 { color: #fff; }
.vs-col--us .badge-amber {
  background: rgb(255 255 255 / 0.1);
  border-color: rgb(255 255 255 / 0.16);
  color: rgb(var(--brand-300));
}
.vs-brand-icon {
  width: 0.65rem;
  height: 0.82rem;
  flex: none;
  object-fit: contain;
}
.vs-time-icon {
  width: 0.95rem;
  height: 0.95rem;
  flex: none;
  color: rgb(var(--ink-soft));
  overflow: visible;
  opacity: 0.92;
}
.vs-time-icon-face {
  fill: currentColor;
  stroke: rgb(var(--ink));
  stroke-width: 0.85;
  paint-order: stroke fill;
}
.vs-time-icon-hands {
  fill: none;
  stroke: rgb(var(--neutral-25));
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.vs-col--us .vs-col--us .vs-col--us 
.vs-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.vs-head h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; color: rgb(var(--ink)); }

/* Concrete objecten in plaats van een schema: links het papierwerk dat aan
   een samenwerking voorafgaat, rechts de kandidaatkaart uit de hero. */
.vs-lede { margin-top: 1rem; }
.vs-lede-big {
  display: block;
  font-size: clamp(1.95rem, 4.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: rgb(var(--ink));
  font-variant-numeric: tabular-nums;
}
.vs-lede-sub {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: rgb(var(--ink-muted));
}
.vs-col--us .vs-lede-big { color: rgb(var(--brand-300)); }
.vs-col--us .vs-lede-sub { color: rgb(255 255 255 / 0.62); }

/* ----- Dossier: een kaartje per stap die je normaal moet doorlopen ----- */
.dossier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 1.75rem;
}
.doc {
  border-radius: 0.4rem;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--ink) / 0.1);
  padding: 0.6rem 0.7rem 0.7rem;
  box-shadow: 0 8px 18px -15px rgb(var(--night) / 0.45);
}
/* lichte verdraaiing, zodat het als een losse stapel leest en niet als tabel */
.doc:nth-child(6n + 1) { transform: rotate(-1.2deg); }
.doc:nth-child(6n + 2) { transform: rotate(0.9deg); }
.doc:nth-child(6n + 3) { transform: rotate(0.7deg); }
.doc:nth-child(6n + 4) { transform: rotate(-0.8deg); }
.doc:nth-child(6n + 5) { transform: rotate(1.1deg); }
.doc:nth-child(6n + 6) { transform: rotate(-0.6deg); }

.doc-kop {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.25;
  color: rgb(var(--ink));
  hyphens: auto;
}
.doc-regel {
  display: block;
  height: 0.3rem;
  margin-top: 0.42rem;
  border-radius: 999px;
  background: rgb(var(--neutral-100));
}
.doc-regel--kort { width: 58%; }

/* ----- Kandidaatkaart, zelfde opzet als in de hero ----- */
.vs-kandidaat {
  margin-top: 1.75rem;
  border-radius: 0.85rem;
  padding: 1.1rem;
  background: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 255 255 / 0.14);
  box-shadow: 0 18px 40px -30px rgb(0 0 0 / 0.7);
}
.vs-kandidaat-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgb(var(--brand-300));
}
.vs-kandidaat-hoofd {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.8rem;
}
.vs-kandidaat-hoofd img {
  height: 3.4rem;
  width: 3.4rem;
  flex: none;
  border: 2px solid rgb(var(--brand-300));
  border-radius: 999px;
  object-fit: cover;
}
.vs-kandidaat-hoofd > span { display: grid; gap: 0.18rem; min-width: 0; }
.vs-kandidaat-hoofd strong { font-size: 0.92rem; color: #fff; }
.vs-kandidaat-hoofd small { font-size: 0.7rem; color: rgb(255 255 255 / 0.6); }

.vs-kandidaat-data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 1rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid rgb(255 255 255 / 0.14);
}
.vs-kandidaat-data dt { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; color: rgb(255 255 255 / 0.66); }
.vs-kandidaat-data dd { margin: 0.15rem 0 0; font-size: 0.8rem; font-weight: 600; color: #fff; }

.vs-kandidaat-check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.9rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(var(--brand-300));
}
.vs-kandidaat-check i {
  display: grid;
  place-items: center;
  height: 1.1rem;
  width: 1.1rem;
  flex: none;
  border-radius: 999px;
  font-style: normal;
  font-size: 0.62rem;
  background: rgb(var(--brand-300) / 0.16);
  border: 1px solid rgb(var(--brand-300) / 0.38);
}

.vs-conclusion {
  position: relative;
  display: grid;
  gap: 0.24rem;
  margin-top: auto;
  padding: 1.15rem 0.15rem 0.1rem 1rem;
  border-top: 1px solid rgb(var(--ink) / 0.09);
}
.vs-conclusion::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.18rem;
  bottom: 0.12rem;
  width: 3px;
  border-radius: 999px;
  background: rgb(var(--ink) / 0.14);
}
.vs-conclusion span {
  font-size: 0.59rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgb(var(--ink-faint));
}
.vs-conclusion strong {
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.45;
  color: rgb(var(--ink-soft));
}
.vs-col--us .vs-conclusion { border-top: 0; }
.vs-col--us .vs-conclusion::before { background: rgb(var(--brand-300)); }
.vs-col--us .vs-conclusion span { color: rgb(var(--brand-300)); }
.vs-col--us .vs-conclusion strong { color: #fff; }

/* ==========================================================================
   Vergelijking (generiek, ongebruikt in de huidige pagina)
   ========================================================================== */
.compare { display: grid; gap: 1.25rem; margin-top: 3rem; }
@media (min-width: 900px) { .compare { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }

.compare-col {
  border-radius: var(--radius);
  border: 1px solid rgb(var(--line));
  background: rgb(var(--surface));
  padding: 1.75rem 1.6rem;
  box-shadow: var(--shadow-card);
}
.compare-col--them { background: rgb(var(--neutral-25)); }
.compare-col--us { border-color: rgb(var(--brand-200)); box-shadow: var(--shadow-card-lg); }

.compare-head { display: flex; align-items: center; gap: 0.6rem; }
.compare-head h3 { font-size: 1.05rem; font-weight: 700; color: rgb(var(--ink)); }

.compare-list { display: grid; gap: 0.85rem; margin-top: 1.4rem; }
.compare-list li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.92rem; line-height: 1.6; color: rgb(var(--ink-muted)); }
.compare-list svg { width: 1.05rem; height: 1.05rem; flex: none; margin-top: 0.22rem; }
.compare-col--them .compare-list svg { color: rgb(var(--danger-600)); }
.compare-col--us .compare-list svg { color: rgb(var(--brand-300)); }

/* ==========================================================================
   Cijfers
   ========================================================================== */
/* Cijferblok: glazen kaartjes op het donkere merkvlak. Amber op dit bruin
   haalt ~4.6:1, tegen 1.9:1 toen dezelfde tint op wit stond. */
.statboard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 3rem;
  padding: 2.1rem 1.5rem;
  border-radius: 1.6rem;
  background: rgb(var(--cta));
  box-shadow: 0 26px 60px -34px rgb(var(--cta) / 0.7);
}
@media (min-width: 768px) { .statboard { padding: 2.4rem 2rem; } }

.stats { display: grid; gap: 1rem; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(3, 1fr); gap: 1.15rem; } }

.stat {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 1.15rem;
  padding: 1.55rem 1.3rem 1.4rem;
  text-align: center;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.12);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  /* dunne lichtlijn bovenlangs geeft het glazen randje */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.16),
    0 20px 44px -32px rgb(0 0 0 / 0.65);
}

.stat-val {
  font-size: clamp(2.25rem, 5.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.96;
  color: rgb(var(--night-ink));
  text-shadow: 0 8px 22px rgb(var(--night) / 0.2);
  white-space: nowrap;
  /* vaste cijferbreedte, anders springt de tekst tijdens het optellen */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.stat-val::after {
  content: "";
  display: block;
  width: 5.5rem;
  height: 3px;
  margin: 0.7rem auto 0;
  border-radius: 999px;
  background: rgb(var(--brand-300));
}

.stat-lbl {
  margin-top: 0.55rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #fff;
}

.stat-note {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgb(255 255 255 / 0.58);
}

/* ==========================================================================
   Reviews — compacte, zelfstandige sectie onder de hero
   ========================================================================== */
.revstrip {
  padding-block: 2.35rem 2.6rem;
  overflow: hidden;
  background: rgb(var(--surface));
}
@media (min-width: 640px) { .revstrip { padding-block: 2.75rem 3rem; } }

.revstrip-head {
  margin-bottom: 1rem;
  text-align: center;
}
.revstrip-title {
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgb(var(--ink-faint));
}

/* De strook loopt niet full-bleed maar stopt op de sectiebreedte, gelijk met
   de hero erboven. overflow:hidden knipt de kaarten op die rand af; het masker
   laat ze daar vervagen in plaats van hard afsnijden. */
.revmarquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent);
}

/* De kaartenset staat twee keer in de DOM; 50% opschuiven laat de tweede helft
   naadloos op de eerste aansluiten.
   Let op: de tussenruimte staat als margin-right op elke kaart, niet als `gap`
   op de track. Met `gap` zijn er bij 12 kaarten maar 11 tussenruimtes, waardoor
   50% van de trackbreedte precies één tussenruimte korter is dan één set — dat
   geeft een zichtbaar sprongetje bij elke herhaling. */
.revtrack {
  display: flex;
  align-items: stretch;
  width: max-content;
  animation: rev-scroll 95s linear infinite;
}
@keyframes rev-scroll { to { transform: translateX(-50%); } }

.revcard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: none;
  width: 18.25rem;
  margin: 0 1.5rem 0 0;
  border: 1px solid rgb(var(--cta) / 0.12);
  background: rgb(var(--surface));
  border-radius: 0.8rem;
  padding: 0.9rem 1rem;
  box-shadow: none;
}
.revcard::before {
  content: "★★★★★";
  display: block;
  margin-bottom: 0.55rem;
  font-size: 0.82rem;
  line-height: 1;
  letter-spacing: 0.08em;
  color: rgb(var(--brand-300));
}
.revcard[data-rating="4"]::before { content: "★★★★☆"; }
.revcard-quote {
  font-size: 0.9rem;
  line-height: 1.42;
  color: rgb(var(--ink-soft));
}
.revcard-foot {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.7rem;
  padding-top: 0.62rem;
  border-top: 1px solid rgb(var(--line));
}
/* Bewust geen persoonsnaam: alleen foto + bedrijfsnaam. */
.revcard-photo {
  height: 2.25rem;
  width: 3.25rem;
  flex: none;
  border-radius: 0.45rem;
  object-fit: contain;
  padding: 0.18rem;
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--line));
}
.revcard-id { display: flex; flex-direction: column; min-width: 0; }
.revcard-company { font-size: 0.8rem; font-weight: 700; color: rgb(var(--ink)); }
.revcard-role { font-size: 0.72rem; color: rgb(var(--ink-faint)); }

/* Op telefoon worden de kaarten nog compacter, zodat de strook zichtbaar
   blijft bewegen en er al een deel van de volgende review in beeld staat. */
@media (max-width: 640px) {
  .revcard { width: 16.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .revtrack { animation: none; }
  /* zonder animatie moet de strook zelf scrollbaar zijn */
  .revmarquee { overflow-x: auto; }
}

/* ==========================================================================
   Contactformulier
   ========================================================================== */
.contact-shell {
  display: grid;
  max-width: 72rem;
  margin-inline: auto;
  border: 1px solid rgb(var(--cta) / 0.18);
  border-radius: 1.55rem;
  background: rgb(var(--surface));
  box-shadow: 0 28px 70px -40px rgb(var(--night) / 0.5);
  overflow: hidden;
}
@media (min-width: 960px) {
  .contact-shell { grid-template-columns: minmax(0, 1.22fr) minmax(20rem, 0.78fr); }
}

.contact-main {
  min-width: 0;
  padding: clamp(1.5rem, 4vw, 3rem);
  background: rgb(var(--surface));
}
/* .eyebrow is inline-flex en komt dus in een regelbox terecht; de halve leading
   daarboven duwt hem ~5px omlaag. De kicker in het donkere paneel ernaast is
   een flexitem en staat daardoor strak tegen de padding. Blokniveau maakt beide
   koppen weer gelijk. */
.contact-heading .eyebrow { display: flex; }
.contact-heading .section-title { margin-top: 0.65rem; }
.contact-heading .lead { margin-top: 0.75rem; font-size: 1rem; }

.form-wrap { margin-top: 1.75rem; }

.form-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  padding: 0.35rem;
  border-radius: 0.85rem;
  background: rgb(var(--wash-deep));
  border: 1px solid rgb(var(--line));
}
.form-tab {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 0.62rem;
  padding: 0.78rem 0.75rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: rgb(var(--ink-muted));
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.form-tab:hover { color: rgb(var(--ink)); }
.form-tab.is-active {
  background: rgb(var(--cta));
  color: rgb(var(--night-ink));
  border-color: rgb(var(--cta));
  box-shadow: 0 8px 18px -12px rgb(var(--cta) / 0.7);
}
.form-tab:focus-visible { outline: 2px solid rgb(var(--brand-700)); outline-offset: 2px; }

.form-panel { display: none; margin-top: 1.25rem; }
.form-panel.is-active { display: block; }

.form-card {
  position: relative;
  min-height: 100%;
}
.form-intro {
  padding: 0.75rem 0.85rem;
  border-left: 3px solid rgb(var(--brand-500));
  border-radius: 0.35rem 0.65rem 0.65rem 0.35rem;
  background: rgb(var(--brand-50) / 0.72);
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgb(var(--ink-muted));
}

.field-grid { display: grid; gap: 0.95rem; margin-top: 1.25rem; }
@media (min-width: 640px) { .field-grid { grid-template-columns: 1fr 1fr; } }
.field--full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-size: 0.78rem; font-weight: 650; color: rgb(var(--ink-soft)); }
.field .req { color: rgb(var(--brand-600)); }

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.88rem;
  color: rgb(var(--ink));
  background: rgb(var(--subtle) / 0.72);
  border: 1px solid rgb(var(--line));
  border-radius: 0.62rem;
  padding: 0.72rem 0.82rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.field textarea { min-height: 6rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: rgb(var(--surface));
  border-color: rgb(var(--cta));
  box-shadow: 0 0 0 3px rgb(var(--cta) / 0.12);
}
.field input:user-invalid,
.field textarea:user-invalid { border-color: rgb(var(--danger-600)); }

.form-consent {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  margin-top: 1.15rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgb(var(--ink-muted));
}
.form-consent input {
  display: block;
  align-self: center;
  height: 1rem;
  width: 1rem;
  margin: 0;
  flex: none;
  accent-color: rgb(var(--brand-300));
  cursor: pointer;
}
.form-consent a { color: rgb(var(--brand-700)); text-decoration: underline; }
.form-consent--secondary { margin-top: 0.55rem; }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin-top: 1.3rem; }
.contact-shell .form-actions { align-items: stretch; }
.contact-shell .submit-btn { flex: 1 0 100%; width: 100%; }

/* Rechterkolom in hetzelfde vaste warme vlak als de kandidaatwebsite. */
.contact-reasons {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 4vw, 3rem);
  color: #fff;
  background: rgb(var(--cta));
}
/* Zelfde metriek als .eyebrow elders op de pagina; alleen de kleur wijkt af
   omdat dit paneel een donkere achtergrond heeft. */
.contact-reasons-kicker {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgb(var(--brand-300));
}
.contact-reasons h3 {
  margin-top: 0.8rem;
  max-width: 26rem;
  font-size: clamp(1.45rem, 3vw, 1.9rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
}
.contact-reasons > p {
  margin-top: 1rem;
  max-width: 28rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgb(255 255 255 / 0.78);
}
.contact-reasons-list { display: grid; gap: 1.05rem; margin-top: 1.75rem; }
.contact-reasons-list li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding-left: 2.25rem;
}
.contact-reasons-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.05rem;
  display: grid;
  place-items: center;
  height: 1.45rem;
  width: 1.45rem;
  border-radius: 999px;
  background: rgb(var(--brand-300));
  color: rgb(var(--cta));
  font-size: 0.7rem;
  font-weight: 900;
}
.contact-reasons-list strong { font-size: 0.86rem; line-height: 1.5; color: #fff; }
.contact-reasons-list span { font-size: 0.8rem; line-height: 1.65; color: rgb(255 255 255 / 0.72); }

.contact-proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 2rem;
}
.contact-proof > div {
  padding: 0.85rem;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 0.75rem;
  background: rgb(255 255 255 / 0.05);
}
.contact-proof strong { display: block; font-size: 0.78rem; color: rgb(var(--brand-300)); }
.contact-proof span { display: block; margin-top: 0.22rem; font-size: 0.65rem; line-height: 1.45; color: rgb(255 255 255 / 0.7); }

@media (max-width: 959px) {
  .contact-reasons { min-height: 30rem; }
  .contact-proof { margin-top: 2rem; }
}
@media (max-width: 520px) {
  .contact-shell { border-radius: 1.15rem; }
  .contact-main, .contact-reasons { padding: 1.35rem; }
  .form-tabs { grid-template-columns: 1fr; }
  .contact-proof { grid-template-columns: 1fr; }
}

/* Submit-knop met spinner-state */
.submit-btn { position: relative; min-width: 12rem; }
.submit-btn .spinner { display: none; }
.submit-btn.is-loading .btn-label,
.submit-btn.is-loading .arrow { visibility: hidden; }
.submit-btn.is-loading .spinner {
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  height: 1.1rem;
  width: 1.1rem;
  border-radius: 999px;
  border: 2px solid rgb(255 255 255 / 0.35);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Tijdelijke serverfout zolang het formulier nog geen backend heeft. */
.form-error {
  display: none;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.85rem;
  padding: 0.78rem 0.85rem;
  border: 1px solid rgb(var(--danger-100));
  border-radius: 0.72rem;
  background: rgb(var(--danger-50) / 0.72);
  color: rgb(var(--danger-600));
}
.form-error.is-visible { display: flex; animation: fade-up 0.3s ease-out both; }
.form-error-code {
  display: grid;
  place-items: center;
  min-width: 2.6rem;
  height: 1.75rem;
  flex: none;
  border: 1px solid rgb(var(--danger-600) / 0.2);
  border-radius: 0.45rem;
  background: rgb(var(--surface) / 0.72);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.form-error-copy { display: grid; gap: 0.08rem; }
.form-error-copy strong { font-size: 0.78rem; line-height: 1.4; }
.form-error-copy > span { font-size: 0.7rem; line-height: 1.45; color: rgb(var(--ink-muted)); }

/* Succes-overlay over de formulierkaart */
.form-success {
  position: absolute;
  inset: -1.25rem -0.9rem -0.9rem;
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 2rem 1.75rem;
  border-radius: 0;
  background: rgb(var(--surface));
}
.form-success.is-visible { display: flex; animation: fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.form-success-ck {
  display: grid;
  place-items: center;
  height: 3.25rem;
  width: 3.25rem;
  border-radius: 999px;
  background: rgb(var(--brand-50));
  border: 1px solid rgb(var(--brand-100));
  color: rgb(var(--brand-300));
}
.form-success-ck svg { width: 1.5rem; height: 1.5rem; animation: ck-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both; }
@keyframes ck-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.form-success h3 { margin-top: 0.5rem; font-size: 1.15rem; font-weight: 700; color: rgb(var(--ink)); }
.form-success p { max-width: 26rem; font-size: 0.92rem; line-height: 1.65; color: rgb(var(--ink-muted)); }
.form-success .btn { margin-top: 0.75rem; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq {
  max-width: 46rem;
  margin-inline: auto;
  margin-top: 2.5rem;
  border: 1px solid rgb(var(--line));
  background: rgb(var(--surface));
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.faq-item { border-top: 1px solid rgb(var(--line)); }
.faq-item:first-child { border-top: 0; }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 1.15rem 1.25rem;
  transition: background-color 0.15s ease;
}
.faq-q:hover { background: rgb(var(--brand-50)); }
.faq-q:hover .chev { color: rgb(var(--brand-600)); }
.faq-q:focus-visible { outline: 2px solid rgb(var(--brand-700)); outline-offset: -2px; }
.faq-q span { font-size: 1rem; font-weight: 600; color: rgb(var(--ink)); }
.faq-q .chev { flex: none; color: rgb(var(--ink-faint)); transition: transform 0.3s ease, color 0.15s ease; }
.faq-item.is-open .faq-q .chev { transform: rotate(180deg); }
.faq-a { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.3s ease, opacity 0.3s ease; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; opacity: 1; }
.faq-a-inner { overflow: hidden; }
.faq-a p { padding: 0 1.25rem 1.25rem; font-size: 0.9rem; line-height: 1.65; color: rgb(var(--ink-muted)); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  position: relative;
  border-top: 1px solid rgb(var(--line));
  background: rgb(var(--surface));
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgb(var(--ink) / 0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 55%);
  mask-image: linear-gradient(180deg, black 0%, transparent 55%);
}
.footer-inner { position: relative; z-index: 1; padding-block: 3rem 2.25rem; }
@media (min-width: 640px) { .footer-inner { padding-block: 4rem 2.5rem; } }
.footer-top { display: flex; flex-direction: column; gap: 2.5rem; }
@media (min-width: 768px) { .footer-top { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 3rem; } }
.footer-brand { max-width: 24rem; }
.footer-brand p { margin-top: 1rem; font-size: 0.9375rem; line-height: 1.65; color: rgb(var(--ink-muted)); }

.socials { margin-top: 1.25rem; display: flex; gap: 0.6rem; }
.social {
  display: grid;
  place-items: center;
  height: 2.4rem;
  width: 2.4rem;
  border-radius: 0.7rem;
  border: 1px solid rgb(var(--line));
  background: rgb(var(--surface));
  color: rgb(var(--ink-muted));
  box-shadow: var(--shadow-card);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.social:hover { color: rgb(var(--brand-600)); border-color: rgb(var(--brand-200)); background: rgb(var(--brand-50)); transform: translateY(-2px); box-shadow: var(--shadow-card-lg); }
.social svg { width: 1.05rem; height: 1.05rem; }

.footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem; }
.footer-cols .footer-col:last-child { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .footer-cols { display: flex; flex-direction: row; gap: 4rem; }
  .footer-cols .footer-col:last-child { grid-column: auto; }
}
.footer-col { display: flex; flex-direction: column; gap: 0.7rem; font-size: 0.875rem; }
.footer-col .title { margin-bottom: 0.2rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: rgb(var(--ink-faint)); }
.footer-col a { width: fit-content; color: rgb(var(--ink-muted)); transition: color 0.18s ease, transform 0.18s ease; }
.footer-col a:hover { color: rgb(var(--brand-600)); transform: translateX(2px); }
.footer-biz { font-style: normal; line-height: 1.7; color: rgb(var(--ink-faint)); }

.footer-bottom {
  margin-top: 3rem;
  padding: 1.5rem;
  border: 1px solid rgb(var(--line));
  border-radius: var(--radius);
  background: rgb(var(--subtle) / 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
@media (min-width: 640px) { .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
.footer-disclaimer { max-width: 36rem; font-size: 0.75rem; line-height: 1.6; color: rgb(var(--ink-faint)); margin: 0; text-align: center; }
@media (min-width: 640px) { .footer-disclaimer { text-align: left; } }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.625rem; }
@media (min-width: 640px) { .badges { justify-content: flex-start; } }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border: 1px solid rgb(var(--money-100));
  background: rgb(var(--surface));
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(var(--ink-soft));
  box-shadow: var(--shadow-card);
}
.badge svg { color: rgb(var(--money-600)); }
.copyright { position: relative; z-index: 1; margin-top: 1.5rem; font-size: 0.75rem; color: rgb(var(--ink-faint)); text-align: center; }

@media (max-width: 639px) {
  .footer-inner { padding-bottom: 4rem; }
  .footer-top { gap: 0; }
  .footer-brand { max-width: none; padding-bottom: 2.25rem; margin-bottom: 2.25rem; border-bottom: 1px solid rgb(var(--line)); }
  .footer-cols { gap: 2rem 1.25rem; }
  .footer-cols .footer-col:last-child { margin-top: 0.5rem; padding-top: 2rem; border-top: 1px solid rgb(var(--line)); }
  .footer-bottom { margin-top: 2.5rem; }
}

/* ==========================================================================
   Animaties
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(42px); transition: opacity 0.7s ease-out, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@keyframes fade-up { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fade-up 0.75s cubic-bezier(0.22, 1, 0.36, 1) both; }

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

/* ==========================================================================
   404
   ========================================================================== */
.notfound {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: 4rem;
}
.notfound-code {
  font-size: clamp(4rem, 14vw, 7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgb(var(--brand-300));
}
.notfound h1 { margin-top: 1rem; font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; color: rgb(var(--ink)); }
.notfound p { margin-top: 1rem; max-width: 32rem; margin-inline: auto; font-size: 1rem; line-height: 1.65; color: rgb(var(--ink-muted)); }