/* ==========================================================================
   PULSEMATCH — Design System
   "De pols van de match" — warm, persoonlijk, levendig.
   ========================================================================== */

/* ---- Fonts ----------------------------------------------------------
   No monospace family: this is a recruitment brand, not a developer tool —
   a mono accent would read as borrowed technical costume (see
   docs/03-verbetervoorstellen.md, polish pass). Two families, used with
   real weight/size contrast, carry the whole system. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Archivo:ital,wght@0,400..700;1,400..600&family=Reenie+Beanie&display=swap');

/* ---- Tokens -----------------------------------------------------------
   Bron: het officiële Pulsematch-logo (/assets/img/logo.png). Kleuren zijn
   gemeten uit het bronbestand, geen benadering. "Pulse" (het rustige,
   betrouwbare woorddeel) = petrolnavy; "Match" (het warme, energieke
   woorddeel) = koraalrood. Die tweedeling is de basis van het hele
   dual-audience kleursysteem — zie 04-design-systeem.md §2.
   ------------------------------------------------------------------- */
:root{
  --navy:#044153;        /* "Pulse" — rust, vertrouwen, werkgeversspoor */
  --navy-dark:#022B37;
  --navy-10: rgba(4,65,83,.08);
  --navy-20: rgba(4,65,83,.16);

  --ink:#0E2126;          /* leestekst — donkerder dan navy, niet zuiver zwart */
  --ink-90: rgba(14,33,38,.9);
  --ink-70: rgba(14,33,38,.75); /* secundaire tekst — AA-veilig (>=4.5:1) op cream én wit, i.t.t. ink-60 */
  --ink-60: rgba(14,33,38,.62); /* decoratief gebruik alleen (borders, grote/ambient tekst) — niet voor kleine leestekst */
  --ink-40: rgba(14,33,38,.4);
  --ink-15: rgba(14,33,38,.12);
  --ink-08: rgba(14,33,38,.06);

  --cream:#FAF7F1;        /* zelfde warme wit als de logo-achtergrond */
  --cream-dim:#F1EADA;
  --paper:#FFFFFF;

  /* --pulse is the true brand hue — reserve it for LARGE text (>=18px),
     icons, dots and borders. As a solid fill behind white/cream text, or as
     small text on a light tint, it fails WCAG AA (verified: white-on-pulse
     tops out at 3.6:1 even at full opacity). --pulse-dark is the fill token;
     --pulse-700 is the readable-small-text token. */
  --pulse:#FD3C3A;        /* "Match" — energie, warmte, kandidatenspoor */
  --pulse-dark:#D42624;   /* solid-fill buttons/tiles with white text (5.1:1) */
  --pulse-700:#B8221F;    /* small red text on light backgrounds (5.2-6.4:1) */
  --pulse-light:#FFE1DA;

  --ember:#FA6E3C;        /* accent uit de EKG-iconen in het logo — gradient-partner van --pulse */
  --ember-light:#FFE8D9;

  --match:#044153;        /* alias: werkgeversspoor gebruikt --navy als "match"-kleur */
  --match-dark:#022B37;
  --match-light:#DCE9EC;

  --mint:#1FAE7A;         /* uitsluitend voor bevestiging/succes-momenten */
  --mint-light:#DDF3E9;
  --mint-dark:#146B4C;    /* leesbare tekstkleur op --mint-light achtergronden */

  --white:#FFFFFF;

  --shadow: 21,18,28;     /* schaduw-basis (kanalen); gebruik rgba(var(--shadow), alpha) */
  --navy-glow: 10,110,135; /* lichte navy-gloed voor mesh-gradients op donkere achtergronden */
  --ember-dark:#8A3D16;   /* leesbare tekstkleur op --ember-light achtergronden */

  --font-display:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-hand:'Reenie Beanie', cursive;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --ease: cubic-bezier(.22,.9,.28,1);
  --ease-snap: cubic-bezier(.65,0,.35,1);
  --ease-out-expo: cubic-bezier(.16,1,.3,1); /* effortless deceleration — mobile nav, panels */
}

/* ---- Reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0s !important; scroll-behavior:auto !important;}
}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background-color:var(--cream);
  /* Warm paper grain — SVG feTurbulence tiled at a fixed size, ~2% visible
     via a near-transparent fill. Static (never animated), so it costs one
     paint and nothing per frame. Tiled on the body background rather than a
     positioned overlay element on purpose: a position:fixed layer would sit
     in the positioned-elements stacking order and risk painting over real
     content; a body background-image never does. */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.055  0 0 0 0 0.13  0 0 0 0 0.15  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  line-height:1.5;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
input,textarea,select{font:inherit; color:inherit;}
ul,ol{list-style:none; padding:0;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-0.01em; text-wrap:balance;}

/* ---- Type scale -----------------------------------------------------
   .eyebrow is a deliberate, singular brand device — the page kicker used
   once, in the hero, on each page. It is NOT a per-section label; repeating
   it above every heading is the AI section-scaffold this system explicitly
   avoids (see docs/03-verbetervoorstellen.md). */
.h-display{ font-size:clamp(2.75rem, 3.2vw + 1.6rem, 5.75rem); font-weight:600; overflow-wrap:break-word; }
.h-xl{ font-size:clamp(2.25rem, 2vw + 1.4rem, 3.75rem); font-weight:600; }
.h-lg{ font-size:clamp(1.7rem, 1.2vw + 1.2rem, 2.5rem); font-weight:600; }
.h-md{ font-size:clamp(1.3rem, .6vw + 1.05rem, 1.65rem); font-weight:600; }
.eyebrow{
  font-family:var(--font-body); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--pulse-700); display:inline-flex; align-items:center; gap:.5em; font-weight:700;
}
.eyebrow.is-match{ color:var(--match); }
.eyebrow::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--pulse); display:inline-block; }
.eyebrow.is-match::before{ background:var(--match); }
/* --match (navy) on a dark --ink hero (werkgevers.html) is ≈1.5:1 — nearly
   invisible. Swap to the light navy tint there; measured ≈13.4:1 on --ink. */
.bg-ink .eyebrow.is-match{ color:var(--match-light); }
.bg-ink .eyebrow.is-match::before{ background:var(--match-light); }
.lede{ font-size:clamp(1.05rem, .4vw + .95rem, 1.35rem); color:var(--ink-70); line-height:1.6; max-width:46ch; text-wrap:pretty; }
.body-copy{ font-size:1.05rem; color:var(--ink-90); line-height:1.7; max-width:62ch; text-wrap:pretty; }
.small{ font-size:.875rem; color:var(--ink-70); }
.note{ font-family:var(--font-body); font-style:italic; font-size:.8rem; letter-spacing:.01em; color:var(--ink-70); }
/* .note's ink-70 default is only correct on light backgrounds. It was
   silently winning (class beats inherited inline color) over the already-
   correct light text color in the two dark contexts that nest it, making
   "· placeholder" / "(placeholder)" blend invisibly into the background
   (measured contrast ≈1:1 — effectively invisible). Scoped overrides below
   fix both known sites without touching the light-background default used
   everywhere else (story cards, testimonials, vacature-empty, etc). */
.site-footer .note{ color:rgba(250,247,241,.65); }
.btn-primary .note{ color:rgba(250,247,241,.75); }
/* Neutral data-label (e.g. "E-mail" above a value) — distinct from .eyebrow:
   no brand color, no dot, not a section kicker, just a field caption. */
.field-label{ font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-70); }

/* ---- Layout ------------------------------------------------------------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block: clamp(4rem, 7vw, 8rem); position:relative; }
.section-tight{ padding-block: clamp(2.5rem, 4vw, 5rem); }
.stack{ display:flex; flex-direction:column; }
.cluster{ display:flex; flex-wrap:wrap; align-items:center; }
.grid{ display:grid; gap: clamp(1.25rem, 2vw, 2.5rem); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){
  .grid-3, .grid-4{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
}

/* ---- Buttons -------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-weight:600; font-size:.95rem; padding:.95em 1.7em; border-radius:var(--radius-pill);
  transition: transform .45s var(--ease), background-color .3s, box-shadow .3s, color .3s;
  white-space:nowrap; position:relative; will-change:transform;
}
.btn-primary{ background:var(--ink); color:var(--cream); }
/* Hover fills use -dark shades, not the raw brand hue: white/cream text on
   raw --pulse tops out at 3.6:1 (fails AA) even at full opacity — verified
   during the polish pass. --pulse-dark clears 4.5:1+ with cream text. */
.btn-primary:hover{ background:var(--pulse-dark); box-shadow:0 12px 30px -10px rgba(212,38,36,.5); }
.btn-primary.is-match:hover{ background:var(--match); box-shadow:0 12px 30px -10px rgba(4,65,83,.55); }
.btn-outline{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink-15); }
.btn-outline:hover{ box-shadow:inset 0 0 0 1.5px var(--ink); }
.btn-ghost{ color:var(--ink); padding-inline:0; border-radius:0; }
.btn-ghost .arrow{ transition:transform .35s var(--ease); }
.btn-ghost:hover .arrow{ transform:translateX(6px); }
.btn-sm{ padding:.7em 1.3em; font-size:.85rem; }
.btn-pulse{ background:var(--pulse-dark); color:var(--white); }
.btn-pulse:hover{ background:var(--pulse-700); }
.btn-match{ background:var(--match); color:var(--white); }
.btn-match:hover{ background:var(--match-dark); }

/* ---- Header -----------------------------------------------------------
   "Next level, effortless": a context-aware accent (--header-accent flips
   koraal→navy on the werkgevers track, set via body[data-track] below), a
   header that visibly but calmly compacts on scroll (.is-scrolled, toggled
   in main.js), and an underline that draws in on transform:scaleX() —
   GPU-cheap, no layout property is ever animated. */
:root{ --header-accent: var(--pulse); --header-accent-light: var(--pulse-light); }
body[data-track="werkgevers"]{ --header-accent: var(--match); --header-accent-light: var(--match-light); }

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,247,241,.82); backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--ink-08);
  transition:box-shadow .5s var(--ease), border-color .5s var(--ease);
  /* .container below animates padding-block (a layout property) on scroll.
     contain:layout scopes that reflow cost to the header itself instead of
     letting it cascade into a repaint of everything below it on every
     transition frame — cheaper than reworking the compact effect onto a
     transform, and keeps the animation smooth rather than an instant snap. */
  contain:layout style;
}
.site-header::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, var(--pulse) 0%, var(--ember) 35%, transparent 70%);
  opacity:.55; transform:scaleX(0); transform-origin:left center; transition:transform 1.1s var(--ease-out-expo);
}
.site-header.is-ready::after{ transform:scaleX(1); }
.site-header.is-scrolled{ box-shadow:0 8px 30px -20px rgba(14,33,38,.35); }
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:1.05rem; transition:padding-block .45s var(--ease);
}
.site-header.is-scrolled .container{ padding-block:.7rem; }

.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:600; font-size:1.35rem; color:var(--ink); }
.brand img{ transition:transform .5s var(--ease-out-expo); view-transition-name:site-logo; }
.site-header.is-scrolled .brand img{ transform:scale(.9); }
/* Hover "heartbeat" on the logo itself — this used to target a .dot element
   that no longer exists in the markup (the logo is a plain <img> now), which
   left the whole rule dead. Re-targeted at the image directly instead of
   restoring the unused element. */
.brand:hover img{ animation:pulse-beat 1.1s var(--ease) 1; }
@media (prefers-reduced-motion: reduce){ .brand:hover img{ animation:none; } }
@keyframes pulse-beat{
  0%, 100%{ transform:scale(1); }
  20%{ transform:scale(1.08); }
  35%{ transform:scale(.98); }
  50%{ transform:scale(1.05); }
  65%{ transform:scale(1); }
}

.nav{ display:flex; align-items:center; gap:clamp(1.1rem, 1.8vw, 2.1rem); }
.nav a{ font-size:.94rem; font-weight:500; color:var(--ink-70); position:relative; padding-block:.3rem; transition:color .3s var(--ease); }
.nav a:hover, .nav a[aria-current="page"]{ color:var(--ink); }
.nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:2px;
  background:var(--header-accent); transform:scaleX(0); transform-origin:left center;
  transition:transform .45s var(--ease-out-expo);
}
.nav a:hover::after{ transform:scaleX(.6); }
.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-cta{ display:flex; align-items:center; gap:.6rem; }
/* Higher-specificity override: .nav a{color:var(--ink-70)} would otherwise win over .btn's own color rules. */
.nav-cta a.btn-primary{ color:var(--cream); }
.nav-cta a.btn-outline{ color:var(--ink); }
.nav-cta a.btn-match{ color:var(--white); }
/* The .nav a::after underline is meant for plain text nav links only — the
   CTA button is a filled control and shouldn't grow a stray underline. */
.nav-cta a::after{ content:none; }
.nav-toggle{ display:none; }
@media (max-width: 860px){
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(86vw, 360px); background:var(--paper); flex-direction:column;
    align-items:flex-start; justify-content:flex-start; padding:6rem 2rem 2rem; gap:1.4rem;
    transform:translateX(100%); transition:transform .6s var(--ease-out-expo); box-shadow:-20px 0 60px -20px rgba(0,0,0,.25);
    will-change:transform;
  }
  .nav.is-open{ transform:translateX(0); }
  .nav a{ font-size:1.15rem; color:var(--ink); }
  .nav-cta{ flex-direction:column; align-items:flex-start; width:100%; margin-top:1rem; }
  .nav-cta .btn{ width:100%; }
  .nav-toggle{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--ink-08); z-index:101; flex-direction:column; gap:5px; transition:background-color .4s var(--ease); }
  .nav-toggle.is-active{ background:var(--ink-15); }
  .nav-toggle span{ display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .45s var(--ease-out-expo), opacity .3s var(--ease); }
  .nav-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.is-active span:nth-child(2){ opacity:0; transform:scale(0); }
  .nav-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .nav-scrim{
    position:fixed; inset:0; z-index:99; background:rgba(4,17,20,.45); backdrop-filter:blur(3px);
    opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility 0s linear .5s;
  }
  .nav-scrim.is-open{ opacity:1; visibility:visible; transition:opacity .5s var(--ease), visibility 0s; }
}

/* ---- Footer ------------------------------------------------------------ */
.site-footer{ background:var(--ink); color:var(--cream); padding-block: clamp(3.5rem, 6vw, 6rem) 2rem; }
.site-footer a{ color:var(--cream); opacity:.72; transition:opacity .25s; }
.site-footer a:hover{ opacity:1; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(250,247,241,.12); }
@media (max-width: 780px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .footer-grid{ grid-template-columns: 1fr; } }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:1.75rem; flex-wrap:wrap; gap:1rem; }
.footer-col h3{ font-family:var(--font-body); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; opacity:.5; margin-bottom:1rem; font-weight:600; }
.footer-col ul{ display:flex; flex-direction:column; gap:.65rem; }

/* ---- Cards -------------------------------------------------------------- */
.card{ background:var(--paper); border-radius:var(--radius-md); padding:clamp(1.5rem, 2vw, 2.25rem); border:1px solid var(--ink-08); transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(var(--shadow),.25); }
/* Parallelogram tag, not a pill: badges are data labels (sector, contract
   type), not interactive controls, so they get a distinct hard-edged shape
   — one clipped diagonal corner, à la Sutéra (see docs/07-motion-verdieping
   §A). The pill shape stays reserved for real buttons/toggles elsewhere,
   keeping "tag" and "control" visually distinct vocabulary. calc(100% -
   10px) keeps the cut angle constant regardless of the badge's own width. */
.badge{
  display:inline-flex; align-items:center; gap:.4em; font-size:.78rem; font-weight:600;
  padding:.4em calc(.9em + 9px) .4em .9em; background:var(--ink-08); color:var(--ink-70);
  clip-path:polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.badge.is-pulse{ background:var(--pulse-light); color:var(--pulse-700); }
.badge.is-match{ background:var(--match-light); color:var(--match-dark); }
.badge.is-mint{ background:var(--mint-light); color:var(--mint-dark); }
.badge.is-ember{ background:var(--ember-light); color:var(--ember-dark); }

/* ---- Pulse-line: scroll-scrubbed draw (progressive enhancement) ---------
   Baseline (all browsers): JS adds .is-drawn once via IntersectionObserver
   and the line draws itself in one 1.5s transition — see main.js
   revealOnceWithFallback(). Where the browser supports scroll-driven
   animations (Chrome/Edge/Safari 26+, per docs/07-motion-verdieping.md),
   the @supports block below takes over and ties stroke-dashoffset directly
   to scroll position through the line's own container: the line draws and
   un-draws continuously as you scroll, not just once. Firefox (no support)
   silently keeps the baseline one-shot reveal — true progressive
   enhancement, no feature detection needed in JS. */
.pulse-path{
  fill:none; stroke:var(--pulse); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:100; stroke-dashoffset:100;
  transition:stroke-dashoffset 1.5s var(--ease);
}
.pulse-path.is-drawn{ stroke-dashoffset:0; }
.pulse-path.is-navy{ stroke:var(--navy); }

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .pulse-path{
      transition:none;
      animation:pulse-scroll-draw linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 65%;
    }
  }
}
@keyframes pulse-scroll-draw{
  from{ stroke-dashoffset:100; }
  to{ stroke-dashoffset:0; }
}

/* ---- Section bridge: the pulse-line connecting two sections, not just
   steps within one — reuses the exact same .pulse-path scroll-draw
   mechanism above, no extra JS. ------------------------------------------ */
.section-bridge{ height:64px; display:flex; justify-content:center; }
.section-bridge svg{ height:100%; width:2px; overflow:visible; }

/* ---- Process / pulse-line steps ----------------------------------------- */
.process{ position:relative; }
.process-line{ position:absolute; left:29px; top:14px; bottom:14px; width:2px; overflow:visible; }
.process-line svg{ height:100%; width:2px; overflow:visible; }
.process-steps{ display:flex; flex-direction:column; gap:clamp(2rem, 3vw, 3rem); padding-left:64px; position:relative; }
.process-step{ position:relative; }
.process-step .num{
  position:absolute; left:-64px; top:0; width:44px; height:44px; border-radius:50%;
  background:var(--paper); border:2px solid var(--ink-15); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--ink-70);
  transition:border-color .5s var(--ease), color .5s var(--ease), background-color .5s var(--ease);
}
.process-step.is-visible .num{ border-color:var(--pulse); color:var(--pulse-700); background:var(--pulse-light); }
.process.is-match .process-step.is-visible .num{ border-color:var(--navy); color:var(--navy); background:var(--match-light); }
.process-step h3{ margin-bottom:.5rem; }

/* ---- Stat tiles ----------------------------------------------------------- */
.stat{ display:flex; flex-direction:column; gap:.25rem; }
.stat .n{ font-family:var(--font-display); font-size:clamp(2.1rem, 2.4vw, 3.1rem); font-weight:600; color:var(--ink); }
.stat .l{ font-size:.85rem; color:var(--ink-70); }

/* ---- Marquee (sectors) --------------------------------------------------- */
.marquee{ overflow:hidden; border-top:1px solid var(--ink-08); border-bottom:1px solid var(--ink-08); }
.marquee-track{ display:flex; width:max-content; }
@media (prefers-reduced-motion: no-preference){ .marquee-track{ animation:marquee 32s linear infinite; } }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{ display:flex; align-items:center; gap:.9rem; padding:1.3rem 2.4rem; font-family:var(--font-display); font-size:1.4rem; white-space:nowrap; color:var(--ink-70); }
.marquee-item .dot{ width:6px; height:6px; border-radius:50%; background:var(--pulse); }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---- Audience split (hero) ------------------------------------------------
   The seam between the two tracks is a deliberate diagonal, not a straight
   50/50 cut — a small (4°) tilt with a coral→navy gradient literally drawn
   at the boundary, echoing the two-colour brand system meeting in the
   middle. A precise clip-path split on the tiles themselves needs the two
   halves to overlap by an exact pixel amount (fragile under CSS Grid); a
   thin rotated seam bar layered on top gets the same diagonal read with no
   overlap math, and degrades to invisible (not broken) if it's ever off by
   a pixel at the very top/bottom corners, which `overflow:hidden` hides. */
.split{ position:relative; display:grid; grid-template-columns:1fr 1fr; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--ink-08); }
.split::after{
  content:''; position:absolute; left:50%; top:-8%; height:116%; width:5px;
  background:linear-gradient(180deg, var(--pulse) 0%, var(--ember) 45%, var(--navy) 100%);
  transform:translateX(-50%) rotate(4deg); transform-origin:center; border-radius:4px;
  box-shadow:0 0 26px rgba(var(--shadow),.18); z-index:2; pointer-events:none;
}
@media (max-width: 760px){ .split{ grid-template-columns:1fr; } .split::after{ display:none; } }
.split-tile{
  position:relative; padding:clamp(2rem, 3vw, 3.25rem); min-height:280px; display:flex; flex-direction:column; justify-content:flex-end; gap:.75rem;
  transition:background .5s var(--ease); overflow:hidden;
}
.split-tile.is-pulse{ background:var(--pulse-dark); color:var(--white); --mesh-1:rgba(250,110,60,.55); --mesh-2:rgba(255,225,218,.16); }
.split-tile.is-match{ background:var(--match); color:var(--white); --mesh-1:rgba(var(--navy-glow),.5); --mesh-2:rgba(255,255,255,.12); }
.split-tile h2{ font-size:clamp(1.5rem, 1.6vw, 2.1rem); color:var(--white); }
.split-tile p{ color:var(--white); max-width:32ch; }
.split-tile .go{ display:inline-flex; align-items:center; gap:.5em; font-weight:600; color:var(--white); }
.split-tile .go .arrow{ transition:transform .4s var(--ease); }
.split-tile:hover .go .arrow{ transform:translate(5px,-5px); }
/* Mesh-gradient: 3 stacked radial layers, CSS-only. The very slow drift only
   moves background-position (GPU-composited, never repaints the gradient
   colors themselves — see docs/07-motion-verdieping.md §C on why that split
   matters for perf) and is skipped entirely under reduced-motion. */
.split-tile::before{
  content:''; position:absolute; inset:-10%; pointer-events:none; background-size:140% 140%;
  background-image:
    radial-gradient(circle at 85% 12%, rgba(255,255,255,.85), transparent 42%),
    radial-gradient(circle at 12% 88%, var(--mesh-1), transparent 55%),
    radial-gradient(circle at 65% 100%, var(--mesh-2), transparent 60%);
}
@media (prefers-reduced-motion: no-preference){
  .split-tile::before{ animation:mesh-drift 50s ease-in-out infinite alternate; }
}
@keyframes mesh-drift{ from{ background-position:0% 0%, 0% 0%, 0% 0%; } to{ background-position:6% 4%, -5% -6%, 4% -5%; } }

/* ---- Reveal on scroll ----------------------------------------------------- */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
[data-reveal-group] > *{ transition-delay: calc(var(--i, 0) * 90ms); }

/* ---- Forms ------------------------------------------------------------------ */
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field label{ font-size:.85rem; font-weight:600; color:var(--ink-70); }
.field input, .field textarea, .field select{
  background:var(--paper); border:1.5px solid var(--ink-15); border-radius:var(--radius-sm); padding:.9em 1.1em; transition:border-color .25s, box-shadow .25s;
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--pulse); box-shadow:0 0 0 4px var(--pulse-light); }
.field textarea{ resize:vertical; min-height:120px; }
.field.is-valid input, .field.is-valid textarea, .field.is-valid select{ border-color:var(--mint); }
.field.is-valid .select-trigger{ border-color:var(--mint); }
.field .hint{ font-size:.78rem; color:var(--ink-70); }

/* ---- Custom select — replaces the bare native dropdown (see main.js
   initCustomSelect). The <select> itself stays functional but invisible;
   everything below is the picker a visitor actually sees and clicks. ---- */
.select{ position:relative; }
.select-native{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; margin:0; padding:0; border:0;
}
.select-trigger{
  display:flex; align-items:center; justify-content:space-between; gap:.75em; width:100%;
  background:var(--paper); border:1.5px solid var(--ink-15); border-radius:var(--radius-sm);
  padding:.9em 1.1em; font:inherit; font-size:1rem; color:var(--ink); text-align:left; cursor:pointer;
  transition:border-color .25s, box-shadow .25s;
}
.select-trigger:hover{ border-color:var(--ink-40); }
.select-trigger:focus-visible{ outline:none; border-color:var(--pulse); box-shadow:0 0 0 4px var(--pulse-light); }
.select.is-open .select-trigger{ border-color:var(--pulse); box-shadow:0 0 0 4px var(--pulse-light); }
.select-value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.select-chevron{ flex:0 0 auto; color:var(--ink-60); transition:transform .35s var(--ease-out-expo); }
.select.is-open .select-chevron{ transform:rotate(180deg); }
.select-panel{
  position:absolute; z-index:20; left:0; right:0; top:calc(100% + 8px); margin:0;
  background:var(--paper); border:1px solid var(--ink-08); border-radius:var(--radius-sm);
  box-shadow:0 24px 50px -20px rgba(var(--shadow),.35); padding:.4rem; max-height:280px; overflow-y:auto;
  transform-origin:top center; opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none;
  transition:opacity .25s var(--ease-out-expo), transform .25s var(--ease-out-expo);
}
.select.is-open .select-panel{ opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.select-option{
  padding:.7em .9em; border-radius:calc(var(--radius-sm) - 4px); cursor:pointer; font-size:.95rem; color:var(--ink-90);
  transition:background-color .15s var(--ease);
}
.select-option.is-active{ background:var(--pulse-light); color:var(--pulse-700); }
.select-option[aria-selected="true"]{ font-weight:700; }
.select-option[aria-selected="true"]::after{ content:'✓'; float:right; color:var(--pulse-700); }
.form-note{ display:flex; align-items:center; gap:.6em; padding:.9em 1.2em; border-radius:var(--radius-sm); background:var(--mint-light); color:var(--mint-dark); font-weight:600; font-size:.9rem; }
.audience-toggle{ display:inline-flex; padding:.3rem; background:var(--ink-08); border-radius:var(--radius-pill); gap:.25rem; }
.audience-toggle button{
  padding:.65em 1.4em; border-radius:var(--radius-pill); font-weight:600; font-size:.9rem; color:var(--ink-70);
  transition:background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
.audience-toggle button.is-active{ background:var(--paper); color:var(--ink); box-shadow:0 6px 16px -8px rgba(var(--shadow),.3); }

/* ---- Misc utilities --------------------------------------------------------- */
.bg-ink{ position:relative; background:var(--ink); color:var(--cream); overflow:hidden; }
.bg-ink::before{
  content:''; position:absolute; inset:-10%; pointer-events:none; z-index:0; background-size:150% 150%;
  background-image:
    radial-gradient(circle at 88% 8%, rgba(253,60,58,.18), transparent 45%),
    radial-gradient(circle at 8% 92%, rgba(var(--navy-glow),.35), transparent 55%);
}
@media (prefers-reduced-motion: no-preference){ .bg-ink::before{ animation:mesh-drift 60s ease-in-out infinite alternate; } }
.bg-ink > .container{ position:relative; z-index:1; }
.bg-paper{ background:var(--paper); }
.text-center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.mt-1{margin-top:.5rem;} .mt-2{margin-top:1rem;} .mt-3{margin-top:1.5rem;} .mt-4{margin-top:2rem;} .mt-6{margin-top:3rem;}
.mb-1{margin-bottom:.5rem;} .mb-2{margin-bottom:1rem;} .mb-3{margin-bottom:1.5rem;} .mb-4{margin-bottom:2rem;} .mb-6{margin-bottom:3rem;}
.gap-1{gap:.5rem;} .gap-2{gap:1rem;} .gap-3{gap:1.5rem;}
.divider{ height:1px; background:var(--ink-08); border:0; margin-block:0; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--ink); color:var(--cream); padding:.8em 1.2em; border-radius:0 0 12px 0; z-index:200; }
.skip-link:focus{ left:0; }

/* ---- Cursor dot (desktop only) ----------------------------------------------
   Fixed 10px box, resized visually via transform:scale() (not width/height)
   so the browser never has to re-run layout for a hot mousemove-driven element. */
.cursor-dot{
  position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%; background:var(--pulse);
  pointer-events:none; z-index:9999; mix-blend-mode:multiply; display:none;
  transform:translate(-50%,-50%) scale(1);
  transition:transform .18s var(--ease), background-color .3s;
}
@media (hover:hover) and (pointer:fine){ .cursor-dot{ display:block; } }
.cursor-dot.is-match{ background:var(--match); }
.cursor-dot.is-big{ transform:translate(-50%,-50%) scale(3.6); }

/* ---- Section heading pattern -------------------------------------------------- */
.section-head{ max-width:640px; margin-bottom: clamp(2.5rem, 4vw, 4rem); }
.section-head.is-center{ margin-inline:auto; text-align:center; }

/* ---- Focus states (accessibility, brand-consistent) --------------------------- */
:focus-visible{ outline:2.5px solid var(--pulse); outline-offset:3px; border-radius:4px; }
.btn:focus-visible{ outline-offset:4px; }

/* ---- Native page transitions (progressive enhancement, no dependency) --------- */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation: pm-fade-out .35s var(--ease-snap) both; }
  ::view-transition-new(root){ animation: pm-fade-in .45s var(--ease) both; }
}
@keyframes pm-fade-out{ to{ opacity:0; transform:translateY(-8px); } }
@keyframes pm-fade-in{ from{ opacity:0; transform:translateY(8px); } }

/* ---- Selection ------------------------------------------------------------------ */
::selection{ background:var(--pulse-dark); color:var(--white); }

/* ==========================================================================
   PHOTOGRAPHY — duotone treatment
   Real photography (currently verified Unsplash placeholders, see
   docs/06-build-notes.md) run through a two-colour duotone so a stock photo
   never looks bolted-on: grayscale the source, then lay a navy→pulse
   gradient over it with mix-blend-mode:color. Swapping in real photography
   later needs zero markup changes — same treatment carries the brand.
   ========================================================================== */
.photo{ position:relative; overflow:hidden; border-radius:var(--radius-md); background:var(--ink-08); }
.photo img{ display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08) brightness(1.03); }
.photo::after{
  content:''; position:absolute; inset:0; mix-blend-mode:color; pointer-events:none;
  background:linear-gradient(155deg, var(--navy) 0%, var(--pulse) 100%);
  opacity:.88;
}
.photo::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(0deg, rgba(4,65,83,.35), transparent 55%);
}
.photo.is-portrait{ aspect-ratio:4/5; }

/* ---- Hover circle-reveal: duotone → true colour under the cursor -----------
   [data-hover-reveal] photos carry a second, non-duotone copy of the same
   image (.photo-reveal) stacked on top, clipped to a circle that follows the
   pointer (--rx/--ry set in main.js). A stock placeholder photo "coming to
   life" in colour where you touch it reads as a deliberate, crafted moment
   rather than a generic hover-zoom. Skipped entirely on touch (see
   isFinePointer gating in main.js) — there's no cursor to follow. */
.photo img.photo-reveal{
  position:absolute; inset:0; z-index:1; filter:none;
  clip-path:circle(0% at var(--rx, 50%) var(--ry, 50%));
  transition:clip-path .55s var(--ease-out-expo);
}
.photo:hover img.photo-reveal, .photo:focus-within img.photo-reveal{
  clip-path:circle(42% at var(--rx, 50%) var(--ry, 50%));
}

/* ---- Avatar cluster — "meerdere kleine foto's in een rond frame" -------------
   Four circular duotone crops of the existing story photos, overlapped into
   one stack. Hovering/focusing the cluster fans them apart via --spread
   (a per-chip custom property set inline in HTML) — pure transform, so it's
   GPU-cheap and trivially skipped under reduced-motion. */
.avatar-cluster{ display:flex; }
.avatar-chip{
  width:56px; height:56px; flex:0 0 auto; border-radius:50%; overflow:hidden;
  border:3px solid var(--cream); box-shadow:0 6px 16px -6px rgba(var(--shadow),.35);
  margin-left:-18px; position:relative; transition:transform .6s var(--ease-out-expo);
}
.avatar-chip:first-child{ margin-left:0; }
.avatar-chip img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.08) brightness(1.03); }
.avatar-chip::after{
  content:''; position:absolute; inset:0; mix-blend-mode:color; opacity:.88;
  background:linear-gradient(155deg, var(--navy) 0%, var(--pulse) 100%);
}
.avatar-cluster:hover .avatar-chip,
.avatar-cluster:focus-within .avatar-chip{ transform:translateX(var(--spread, 0)); }

/* ---- Monogram avatar (for named real people without a photo yet) -------------
   Used instead of a stock photo wherever the placeholder would sit next to a
   real name (e.g. Mehmet Incedal) — a stock face standing in for a specific,
   named person would misrepresent who they are. Story cards below use real
   placeholder photography instead because they're explicitly example
   content, not a claim about a specific individual. */
.avatar-mono{
  aspect-ratio:4/5; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center;
  background:linear-gradient(155deg, var(--navy) 0%, var(--pulse-dark) 100%); position:relative; overflow:hidden;
}
.avatar-mono .initials{ font-family:var(--font-display); font-size:clamp(3rem,6vw,4.5rem); font-weight:600; color:var(--cream); letter-spacing:-0.02em; }
.avatar-mono::after{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image: radial-gradient(circle at 20% 15%, rgba(255,255,255,.25), transparent 45%);
}

/* ==========================================================================
   STORIES — "verhalen" carousel (photo + naam + rol + quote)
   Horizontal scroll-snap: works as a static row on wide screens and a
   swipeable carousel on mobile without any JS or breakpoint branching.
   ========================================================================== */
.stories{
  display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem;
  scrollbar-width:thin; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
}
.stories::-webkit-scrollbar{ height:6px; }
.stories::-webkit-scrollbar-thumb{ background:var(--ink-15); border-radius:99px; }
.story-card{
  scroll-snap-align:start; flex:0 0 auto; width:min(78vw, 300px); position:relative;
  border-radius:var(--radius-md); border:1px solid var(--ink-08);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.story-card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(var(--shadow),.28); }
/* overflow:visible on purpose — the sector-tab below deliberately breaks the
   card's frame at the top-left corner (docs/07-motion-verdieping.md #12).
   Rounding moves onto .photo/.body individually since the card itself no
   longer clips. */
.story-card .photo{ border-radius:var(--radius-md) var(--radius-md) 0 0; }
.story-card .body{ padding:1.35rem 1.5rem 1.6rem; background:var(--paper); border-radius:0 0 var(--radius-md) var(--radius-md); }
.story-card .sector-tab{
  position:absolute; top:-11px; left:22px; z-index:3;
  background:var(--pulse-dark); color:var(--white); font-size:.7rem; font-weight:700;
  padding:.5em 1.1em .5em 1em; letter-spacing:.02em; white-space:nowrap;
  clip-path:polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  box-shadow:0 10px 18px -8px rgba(var(--shadow),.45);
  transition:transform .4s var(--ease-out-expo);
}
.story-card:hover .sector-tab{ transform:translateY(-3px); }
.story-card .quote{ font-family:var(--font-display); font-size:1.05rem; font-weight:500; line-height:1.4; color:var(--ink); }
.story-card .who{ display:flex; align-items:baseline; gap:.5em; margin-top:.9rem; }
.story-card .who .name{ font-weight:700; color:var(--ink); }
.story-card .who .role{ font-size:.85rem; color:var(--ink-70); }

/* ==========================================================================
   SEARCH & SECTOR FILTERS (functional, client-side — see main.js)
   ========================================================================== */
.hero-search{
  display:flex; gap:.6rem; background:var(--paper); padding:.5rem; border-radius:var(--radius-pill);
  box-shadow:0 20px 45px -25px rgba(var(--shadow),.3); border:1px solid var(--ink-08);
}
.hero-search input{
  flex:1; border:0; background:transparent; padding:.75em 1em; font-size:1rem; font-family:var(--font-body); color:var(--ink);
  min-width:0;
}
.hero-search input:focus{ outline:none; }
.hero-search input::placeholder{ color:var(--ink-70); }
@media (max-width:560px){ .hero-search{ flex-direction:column; box-shadow:none; border:none; background:none; padding:0; gap:.75rem; }
  .hero-search input{ background:var(--paper); border-radius:var(--radius-pill); border:1.5px solid var(--ink-15); }
  .hero-search .btn{ width:100%; }
}

.sector-filters{ display:flex; flex-wrap:wrap; gap:.6rem; }
.sector-filter{
  padding:.65em 1.3em; border-radius:var(--radius-pill); font-weight:600; font-size:.9rem; color:var(--ink-70);
  background:var(--ink-08); border:1.5px solid transparent; cursor:pointer;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.sector-filter:hover{ transform:translateY(-2px); }
.sector-filter.is-active{ background:var(--pulse-light); color:var(--pulse-700); border-color:var(--pulse); }
.sector-filter[data-sector="__all"].is-active{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

.vacature-card{ transition:opacity .4s var(--ease), transform .4s var(--ease); }
.vacature-card[hidden]{ display:none; }
.vacature-empty{ display:none; text-align:center; padding:3rem 1rem; color:var(--ink-70); }
.vacature-empty.is-visible{ display:block; }

/* ---- Marquee items as links --------------------------------------------------- */
a.marquee-item{ cursor:pointer; transition:color .3s; }
a.marquee-item:hover{ color:var(--pulse-700); }

/* ==========================================================================
   MOBILE NAVIGATION — staggered link reveal (scrim + panel timing live in
   the .nav-toggle/.nav-scrim rules above, inside the 860px media query)
   ========================================================================== */
@media (max-width:860px){
  .nav a, .nav-cta{ opacity:0; transform:translateX(14px); transition:opacity .45s var(--ease) calc(var(--i,0)*70ms + 120ms), transform .45s var(--ease) calc(var(--i,0)*70ms + 120ms); }
  .nav.is-open a, .nav.is-open .nav-cta{ opacity:1; transform:translateX(0); }
}